html{
    box-sizing: border-box;
    cursor: crosshair;
}

  *, *:before, *:after {
    box-sizing: inherit;
}

body{
    margin-left: 20px;
    margin-right: 20px;
    background: rgb(255, 255, 255);
}

h1{
    font-family: 'Fira Sans', sans-serif;
    font-size: 22px;
    grid-column: 1/7;
    grid-row: 1/2; 
    text-align: center;
    line-height:10px;
    text-decoration: none;
    color: black;
}

.nom{
    font-family: 'Fira Sans', sans-serif;
    font-size: 22px;
    grid-column: 1/7;
    grid-row: 1/2; 
    text-align: center;
    line-height:20px;
}

.pnom{
    font-family: 'Fira Sans', sans-serif;
    font-size: 22px;
    grid-column: 1/7;
    grid-row: 1/2; 
    text-align: center;
    line-height:50px;
    border-bottom: 2px solid black; 
}

.rnom{
    font-family: 'Fira Sans', sans-serif;
    font-size: 22px;
    grid-column: 1/7;
    grid-row: 1/2; 
    text-align: center;
    line-height:50px;
    border-bottom: 2px solid black; 
}

.ynom{
    font-family: 'Fira Sans', sans-serif;
    font-size: 22px;
    grid-column: 1/7;
    grid-row: 1/2; 
    text-align: center;
    line-height:50px;
    border-bottom: 2px solid black; 
}

.mnom{
    font-family: 'Fira Sans', sans-serif;
    font-size: 22px;
    grid-column: 1/7;
    grid-row: 1/2; 
    text-align: center;
    line-height:50px;
    border-bottom: 2px solid black; 
}

.enom{
    font-family: 'Fira Sans', sans-serif;
    font-size: 22px;
    grid-column: 1/7;
    grid-row: 1/2; 
    text-align: center;
    line-height:50px;
    border-bottom: 2px solid black; 
}

.innom{
    font-family: 'Fira Sans', sans-serif;
    font-size: 22px;
    grid-column: 1/7;
    grid-row: 1/2; 
    text-align: center;
    line-height:50px;
    border-bottom: 2px solid black; 
}

.ernom{
    font-family: 'Fira Sans', sans-serif;
    font-size: 22px;
    grid-column: 1/7;
    grid-row: 1/2; 
    text-align: center;
    line-height:50px;
    border-bottom: 2px solid black; 
}

.ilnom{
    font-family: 'Fira Sans', sans-serif;
    font-size: 22px;
    grid-column: 1/7;
    grid-row: 1/2; 
    text-align: center;
    line-height:50px;
    border-bottom: 2px solid black; 
}

.mcnom{
    font-family: 'Fira Sans', sans-serif;
    font-size: 22px;
    grid-column: 1/7;
    grid-row: 1/2; 
    text-align: center;
    line-height:50px;
    border-bottom: 2px solid black; 
}

.conom{
    font-family: 'Fira Sans', sans-serif;
    font-size: 22px;
    grid-column: 1/7;
    grid-row: 1/2; 
    text-align: center;
    line-height:50px;
    border-bottom: 2px solid black; 
}


.currentnom{
    font-family: 'Fira Sans', sans-serif;
    font-size: 22px;
    grid-column: 1/7;
    grid-row: 1/2; 
    text-decoration: none;
    color: black;
}

.nom{
    border-bottom: 2px solid black; 
}

.propos{
    font-family: 'Fira Sans', sans-serif;
    font-size: 16px;
    grid-column: 1/7;
    grid-row: 4/5;
    text-align: center;
    line-height:50px; 
}

.rpropos{
    font-family: 'Fira Sans', sans-serif;
    font-size: 16px;
    grid-column: 1/7;
    grid-row: 5/6;
    text-align: center;
    line-height:50px; 
    border-top: 2px solid black; 
}

.ppropos{
    font-family: 'Fira Sans', sans-serif;
    font-size: 16px;
    grid-column: 1/7;
    grid-row: 4/5;
    text-align: center;
    line-height:44px; 
    border-top: 2px solid black; 
}

.ypropos{
    font-family: 'Fira Sans', sans-serif;
    font-size: 16px;
    grid-column: 1/7;
    grid-row: 5/6;
    text-align: center;
    line-height:44px; 
    border-top: 2px solid black; 
}

.mpropos{
    font-family: 'Fira Sans', sans-serif;
    font-size: 16px;
    grid-column: 1/7;
    grid-row: 6/7;
    text-align: center;
    line-height:44px; 
    border-top: 2px solid black; 
}

.epropos{
    font-family: 'Fira Sans', sans-serif;
    font-size: 16px;
    grid-column: 1/7;
    grid-row: 5/6;
    text-align: center;
    line-height:44px; 
    border-top: 2px solid black; 
}
.inpropos{
    font-family: 'Fira Sans', sans-serif;
    font-size: 16px;
    grid-column: 1/7;
    grid-row: 7/8;
    text-align: center;
    line-height:44px; 
    border-top: 2px solid black; 
}
.erpropos{
    font-family: 'Fira Sans', sans-serif;
    font-size: 16px;
    grid-column: 1/7;
    grid-row: 6/7;
    text-align: center;
    line-height:44px; 
    border-top: 2px solid black; 
}

.ilpropos{
    font-family: 'Fira Sans', sans-serif;
    font-size: 16px;
    grid-column: 1/7;
    grid-row: 6/7;
    text-align: center;
    line-height:44px; 
    border-top: 2px solid black; 
}

.mcpropos{
    font-family: 'Fira Sans', sans-serif;
    font-size: 16px;
    grid-column: 1/7;
    grid-row: 10/11;
    text-align: center;
    line-height:44px; 
    border-top: 2px solid black; 
}

.copropos{
    font-family: 'Fira Sans', sans-serif;
    font-size: 16px;
    grid-column: 1/7;
    grid-row: 11/12;
    text-align: center;
    line-height:44px; 
    border-top: 2px solid black; 
}

.current{
    text-decoration: none;
    color: black;
    
}

.propos{
    border-top: 2px solid black; 
}

p{
    font-family: 'Fira Sans', sans-serif;
    font-size: 16px;
}

@media screen and (min-width: 960px) {
.index .grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 70px 1fr 1fr 40px ;
    grid-gap: 0px;
    gap:0px;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}

.apropos .grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 70px 1fr 1fr 40px ;
    grid-gap: 0px;
    gap:0px;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}

.intranet .grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 55px 1.5fr 2fr 2fr 2fr 2fr 40px ;
    grid-gap: 0px;
    gap:0px;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}

.appyuka .grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 55px 1.5fr 2fr 2fr 40px ;
    grid-gap: 0px;
    gap:0px;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}

.appechange .grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 55px 1.5fr 2fr 2fr 40px ;
    grid-gap: 0px;
    gap:0px;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}

.appmindy .grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 55px 1.5fr 2fr 2fr 2fr 40px ;
    grid-gap: 0px;
    gap:0px;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}

.expoair .grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 55px 1.5fr 2.5fr 40px ;
    grid-gap: 0px;
    gap:0px;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}

.artconcret .grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 55px 1.5fr 3fr 3fr 3fr 3fr 3fr 3fr 3fr 2fr 40px ;
    grid-gap: 0px;
    gap:0px;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}

.insulaire .grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 55px 1.5fr 1.5fr 1.5fr 2fr 40px ;
    grid-gap: 0px;
    gap:0px;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}

.expodereve .grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 55px 1.5fr 2fr 3.5fr 2fr 40px ;
    grid-gap: 0px;
    gap:0px;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}

.recode .grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 55px 1.5fr 1fr 2fr 40px ;
    grid-gap: 0px;
    gap:0px;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}

.maisonculture .grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 55px 1.5fr 3fr 3fr 3fr 3fr 3fr 3fr 1.5fr 40px ;
    grid-gap: 0px;
    gap:0px;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}

/*figure{ position : relative; 
    display : inline-block; 
    max-width: 170px;  
    height: auto; 
    margin-top: 10px;
    margin-bottom: 10px;
}

img{
    max-width: 180px;  
    max-height: 260px; 

}*/

.index figure{
    width: auto;
    padding: 0px;
    margin : 0px
}
}

.index img{
    max-width: 72%;
    height:auto;
    margin-left: 30px;
   
}

.apropos figure{
    grid-column: 1/7;
      
}

.apropos  img {
    grid-column: 1/7;
    align-items: center;
    display: flex; 
    margin-left: 8%;
    max-width: 84%;
    height:auto;
}

.aproposmobile img{
    width: 1px;
    opacity: 0;
}

/*carré texte pages projets*/
.intranet .txtintranet{
    max-width: 100%;
    height:auto;
    grid-column: 4/7;
  grid-row: 2/3;
  align-items: center;
    display: flex; 
}

.appyuka .txtyuka{
    max-width: 100%;
    height:auto;
    grid-column: 4/7;
  grid-row: 2/3;
  align-items: center;
    display: flex; 
}

.appechange .txtechange{
    max-width: 100%;
    height:auto;
    grid-column: 4/7;
  grid-row: 2/3;
  align-items: center;
    display: flex; 
}

.appmindy .txtmindy{
    max-width: 100%;
    height:auto;
    grid-column: 4/7;
  grid-row: 2/3;
  align-items: center;
    display: flex; 
}

.expoair .txtexpo{
    max-width: 100%;
    height:auto;
    grid-column: 4/7;
  grid-row: 2/3;
  align-items: center;
    display: flex; 
}

.artconcret .txtconcret{
    max-width: 100%;
    height:auto;
    grid-column: 4/7;
  grid-row: 2/3;
  align-items: center;
    display: flex; 
}

.insulaire .txtile{
    max-width: 100%;
    height:auto;
    grid-column: 4/7;
  grid-row: 2/3;
  align-items: center;
    display: flex; 
}

.expodereve .txtreve{
    max-width: 100%;
    height:auto;
    grid-column: 4/7;
  grid-row: 2/3;
  align-items: center;
    display: flex; 
}

.recode .txtpeter{
    max-width: 100%;
    height:auto;
    grid-column: 4/7;
  grid-row: 2/3;
  align-items: center;
    display: flex; 
}

.maisonculture .txtmca{
    max-width: 100%;
    height:auto;
    grid-column: 4/7;
  grid-row: 2/3;
  align-items: center;
    display: flex; 
}

/*intranet*/

.invideo{
    grid-column: 1/7;
  grid-row: 5/6;
  max-width: 100%;
    height:auto;
}

.inmvideo{
    grid-column: 1/7;
  grid-row: 6/7;
  max-width: 100%;
    height:auto;
}

.intranet .slide-container {
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    display: flex;
    grid-column: 1/7;
  grid-row: 3/4;
}
.intranet .slide {
    -ms-scroll-snap-y: start;
    min-width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;

}
.intranet .slide-containerb {
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    display: flex;
    grid-column: 1/7;
  grid-row: 4/5;
}

.intranet .slideb {
    -ms-scroll-snap-y: start;
    min-width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;

}

.intranet img {
    max-width: 80%;
    height: auto;
}

/*yuka*/

.yvideo{
    grid-column: 1/7;
  grid-row: 4/5;
  max-width: 100%;
    height:auto;
}

.appyuka .slide-container {
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    display: flex;
    grid-column: 1/7;
  grid-row: 3/4;
}
.appyuka .slide {
    -ms-scroll-snap-y: start;
    min-width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;

}
.appyuka img {
    max-width: 80%;
    height: auto;
}

/*mindy*/

.amvideo{
    grid-column: 1/7;
  grid-row: 4/5;
  max-width: 100%;
    height:auto;
}

.cmvideo{
    grid-column: 1/7;
  grid-row: 5/6;
  max-width: 100%;
    height:auto;
}

.appmindy .slide-container {
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    display: flex;
    grid-column: 1/7;
  grid-row: 3/4;
}
.appmindy .slide {
    -ms-scroll-snap-y: start;
    min-width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;

}
.appmindy img {
    max-width: 80%;
    height: auto;
}

/*echange*/

.appechange .slide-container {
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    display: flex;
    grid-column: 1/7;
  grid-row: 3/4;
}
.appechange .slide {
    -ms-scroll-snap-y: start;
    min-width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;

}
.appechange img {
    max-width: 80%;
    height: auto;
}

.ecvideo{
    grid-column: 1/7;
  grid-row: 4/5;
  max-width: 100%;
    height:auto;
}

/*expo*/

.expoair .slide-container {
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    display: flex;
    grid-column: 1/7;
  grid-row: 3/4;
}
.expoair .slide {
    -ms-scroll-snap-y: start;
    min-width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;

}
.expoair img {
    max-width: 65%;
    height: auto;
}

/*concret*/

.affiche1{
    max-width: 100%;
    height:auto;
    grid-column: 4/7;
  grid-row: 8/9;
  align-items: center;
    display: flex; 
}

.affiche2{
    max-width: 100%;
    height:auto;
    grid-column: 4/7;
  grid-row: 4/5;
  align-items: center;
    display: flex; 
}

.affiche3{
    max-width: 100%;
    height:auto;
    grid-column: 1/4;
  grid-row: 5/6;
  align-items: center;
    display: flex; 
}

.affiche4{
    max-width: 100%;
    height:auto;
    grid-column: 4/7;
  grid-row: 6/7;
  align-items: center;
    display: flex; 
}

.affiche5{
    max-width: 100%;
    height:auto;
    grid-column: 1/4;
  grid-row: 7/8;
  align-items: center;
    display: flex; 
}

.mockup2{
    max-width: 100%;
    height:auto;
    grid-column: 1/7;
  grid-row: 3/4;
  align-items: center;
    display: flex; 
}

.mockup3{
    max-width: 100%;
    height:auto;
    grid-column: 1/7;
  grid-row: 9/10;
  align-items: center;
    display: flex; 
}


.artconcret .slide-container {
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    display: flex;
    grid-column: 1/7;
  grid-row: 10/11;
  
}
.artconcret .slide {
    -ms-scroll-snap-y: start;
    min-width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FF38F7;
}
.artconcret .slide-container img {
    max-width: 55%;
    height: auto;
}


/*insulaire*/

.insulaire .ile1{
    max-width: 100%;
    height:auto;
    grid-column: 1/3;
  grid-row: 3/4;
  align-items: center;
    display: flex; 
}
.insulaire .ile2{
    max-width: 100%;
    height:auto;
    grid-column: 2/4;
  grid-row: 4/5;
  align-items: center;
    display: flex; 
}
.insulaire .ile3{
    max-width: 100%;
    height:auto;
    grid-column: 4/6;
  grid-row: 3/4;
  align-items: center;
    display: flex; 
}
.insulaire .ile4{
    max-width: 100%;
    height:auto;
    grid-column: 5/7;
  grid-row: 4/5;
  align-items: center;
    display: flex; 
}
.insulaire .dessin1{
    max-width: 100%;
    height:auto;
    grid-column: 2/4;
  grid-row: 3/4;
  align-items: center;
    display: flex; 
}
.insulaire .dessin2{
    max-width: 100%;
    height:auto;
    grid-column: 5/7;
  grid-row: 3/4;
  align-items: center;
    display: flex; 
}
.insulaire .dessin3{
    max-width: 100%;
    height:auto;
    grid-column: 1/3;
  grid-row: 4/5;
  align-items: center;
    display: flex; 
}
.insulaire .dessin4{
    max-width: 100%;
    height:auto;
    grid-column: 4/6;
  grid-row: 4/5;
  align-items: center;
    display: flex; 
}

.insulaire .slide-container {
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    display: flex;
    grid-column: 1/7;
  grid-row: 5/6;
  
}
.insulaire .slide {
    -ms-scroll-snap-y: start;
    min-width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /*background: #FF38F7;*/
}
.insulaire img {
    max-width: 55%;
    height: auto;
}

/*expo reve*/

.expodereve .exporeve{
    max-width: 100%;
    height:auto;
    grid-column: 1/3;
  grid-row: 3/4;
  align-items: center;
    display: flex; 
}

.expodereve .posterreve{
    max-width: 100%;
    height:auto;
    grid-column: 3/7;
  grid-row: 4/5;
  align-items: center;
    display: flex; 
}

.expodereve .slide-container {
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    display: flex;
    grid-column: 1/7;
  grid-row: 5/6;
  
}
.expodereve .slide {
    -ms-scroll-snap-y: start;
    min-width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FF38F7;
}
.expodereve img {
    max-width: 55%;
    height: auto;
}

/*peter*/

.pe1{
    max-width: 100%;
    height:auto;
    grid-column: 1/4;
  grid-row: 3/4;
  align-items: center;
    display: flex; 
}

.recode .slide-container {
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    display: flex;
    grid-column: 1/7;
  grid-row: 4/5;
}
.recode .slide {
    -ms-scroll-snap-y: start;
    min-width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.recode img {
    max-width: 100%;
}


.bouton img{
    grid-column: 1/2;
    grid-row: 2/3;
    align-items: center;
    display: flex; 
 }
    
/*mca*/

.affichefin{
    max-width: 100%;
    height:auto;
    grid-column: 4/7;
  grid-row: 8/9;
  align-items: center;
    display: flex; 
}

.affichefin2{
    max-width: 100%;
    height:auto;
    grid-column: 4/7;
  grid-row: 4/5;
  align-items: center;
    display: flex; 
}

.affichefin3{
    max-width: 100%;
    height:auto;
    grid-column: 1/4;
  grid-row: 5/6;
  align-items: center;
    display: flex; 
}

.affichefin4{
    max-width: 100%;
    height:auto;
    grid-column: 4/7;
  grid-row: 6/7;
  align-items: center;
    display: flex; 
}

.affichefin5{
    max-width: 100%;
    height:auto;
    grid-column: 1/4;
  grid-row: 7/8;
  align-items: center;
    display: flex; 
}

.mockup1{
    max-width: 100%;
    height:auto;
    grid-column: 1/7;
  grid-row: 3/4;
  align-items: center;
    display: flex; 
}

.gifprogramme2{
    grid-column: 1/7;
  grid-row: 9/10;
  max-width: 100%;
    height:auto;
    align-items: center;
    
}


/* ----------------------------------------------
 * Generated by Animista on 2021-8-16 19:53:1
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-left
 * ----------------------------------------
 */
 @-webkit-keyframes slide-left {
    0% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    100% {
      -webkit-transform: translateX(-100px);
              transform: translateX(-100px);
    }
  }
  @keyframes slide-left {
    0% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    100% {
      -webkit-transform: translateX(-100px);
              transform: translateX(-100px);
    }
  }



  .plateforme{
    grid-column: 1/2;
  grid-row: 2/3;
  align-items: center;
    display: flex;  
    
        -webkit-animation: slide-left 3s linear infinite alternate ;
                animation: slide-left 3s linear infinite alternate ;

    }

    .titre1{
        grid-column: 1/2;
    grid-row: 2/3;
    align-items: left;
    display: flex; 
    writing-mode: vertical-lr;
    text-orientation: mixed;
    transform: rotate(-180deg);
    color: #3B48F2;
    }

   .uxui{
    grid-column: 2/3;
  grid-row: 2/3;
  align-items: center;
    display: flex;
    -webkit-animation: slide-left 3s linear infinite alternate ;
                animation: slide-left 3s linear infinite alternate ;
    
    }

    .titrea{
        grid-column: 2/3;
    grid-row: 2/3;
    align-items: left;
    display: flex; 
    writing-mode: vertical-lr;
    text-orientation: mixed;
    transform: rotate(-180deg);
    color: #3B48F2;
    }
    

   .yuka{
    grid-column: 3/4;
  grid-row: 2/3;
  align-items: center;
    display: flex;
    -webkit-animation: slide-left 3s linear infinite alternate ;
                animation: slide-left 3s linear infinite alternate ;
    
    }
    .titre2{
        grid-column: 3/4;
    grid-row: 2/3;
    align-items: left;
    display: flex; 
    writing-mode: vertical-lr;
    text-orientation: mixed;
    transform: rotate(-180deg);
    color: #3B48F2;
    }

  

   .echange{
    grid-column: 4/5;
  grid-row: 2/3;
  align-items: center;
    display: flex;
    -webkit-animation: slide-left 3s linear infinite alternate ;
                animation: slide-left 3s linear infinite alternate ;
    
    }
    .titre3{
        grid-column: 4/5;
    grid-row: 2/3;
    align-items: left;
    display: flex; 
    writing-mode: vertical-lr;
    text-orientation: mixed;
    transform: rotate(-180deg);
    color: #3B48F2;
    }

   .mindy{
    grid-column: 5/6;
  grid-row: 2/3;
  align-items: center;
  display: flex;
  -webkit-animation: slide-left 3s linear infinite alternate ;
                animation: slide-left 3s linear infinite alternate ;
  
    }
    .titre4{
        grid-column: 5/6;
    grid-row: 2/3;
    align-items: left;
    display: flex; 
    writing-mode: vertical-lr;
    text-orientation: mixed;
    transform: rotate(-180deg);
    color: #3B48F2;
    }

   .expo{
    grid-column: 6/7;
  grid-row: 2/3;
  align-items: center;
    display: flex;
    -webkit-animation: slide-left 3s linear infinite alternate ;
                animation: slide-left 3s linear infinite alternate ;

}
.titre5{
    grid-column: 6/7;
grid-row: 2/3;
align-items: left;
display: flex; 
writing-mode: vertical-lr;
text-orientation: mixed;
transform: rotate(-180deg);
color: #3B48F2;
}


/* ----------------------------------------------
 * Generated by Animista on 2021-8-17 14:20:50
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-left
 * ----------------------------------------
 */
 @-webkit-keyframes slide-left {
    0% {
      -webkit-transform: translateX(150);
              transform: translateX(150);
    }
    100% {
      -webkit-transform: translateX(-50px);
              transform: translateX(-50px);
    }
  }
  @keyframes slide-left {
    0% {
      -webkit-transform: translateX(150);
              transform: translateX(150);
    }
    100% {
      -webkit-transform: translateX(-50px);
              transform: translateX(-50px);
    }
  }
      

    .concret{
    grid-column: 1/2;
  grid-row: 3/4;
  align-items: center;
    display: flex;
   
        -webkit-animation: slide-left 3s linear infinite alternate-reverse both;
                animation: slide-left 3s linear infinite alternate-reverse both;
    }

    .titre6{
        grid-column: 1/2;
    grid-row: 3/4;
    align-items: left;
    display: flex; 
    writing-mode: vertical-lr;
    text-orientation: mixed;
    transform: rotate(-180deg);
    color: #FF38F7;
    }

   .ile{
    grid-column: 2/3;
  grid-row: 3/4;
  align-items: center;
    display: flex;
    
        -webkit-animation: slide-left 3s linear infinite alternate-reverse both;
                animation: slide-left 3s linear infinite alternate-reverse both;
    
    }
    .titre7{
        grid-column: 2/3;
    grid-row: 3/4;
    align-items: left;
    display: flex; 
    writing-mode: vertical-lr;
    text-orientation: mixed;
    transform: rotate(-180deg);
    color: #FF38F7;
    }

   .reve{
    grid-column: 3/4;
  grid-row: 3/4;
  align-items: center;
    display: flex;
    -webkit-animation: slide-left 3s linear infinite alternate-reverse both;
    animation: slide-left 3s linear infinite alternate-reverse both;
    }
    .titre8{
        grid-column: 3/4;
    grid-row: 3/4;
    align-items: left;
    display: flex; 
    writing-mode: vertical-lr;
    text-orientation: mixed;
    transform: rotate(-180deg);
    color: #FF38F7;
    }

   .peter{
    grid-column: 4/5;
  grid-row: 3/4;
  align-items: center;
    display: flex;
    -webkit-animation: slide-left 3s linear infinite alternate-reverse both;
    animation: slide-left 3s linear infinite alternate-reverse both;
    }
    .titre9{
        grid-column: 4/5;
    grid-row: 3/4;
    align-items: left;
    display: flex; 
    writing-mode: vertical-lr;
    text-orientation: mixed;
    transform: rotate(-180deg);
    color: #FF38F7;
    }

   .dg{
    grid-column: 5/6;
  grid-row: 3/4;
  align-items: center;
    display: flex;
    -webkit-animation: slide-left 3s linear infinite alternate-reverse both;
    animation: slide-left 3s linear infinite alternate-reverse both;
    }
    .titreb{
        grid-column: 5/6;
    grid-row: 3/4;
    align-items: left;
    display: flex; 
    writing-mode: vertical-lr;
    text-orientation: mixed;
    transform: rotate(-180deg);
    color: #FF38F7;
    }

   .mca{
    grid-column: 6/7;
  grid-row: 3/4;
  align-items: center;
    display: flex;
    -webkit-animation: slide-left 3s linear infinite alternate-reverse both;
    animation: slide-left 3s linear infinite alternate-reverse both;
    }
    .titre10{
        grid-column: 6/7;
    grid-row: 3/4;
    align-items: left;
    display: flex; 
    writing-mode: vertical-lr;
    text-orientation: mixed;
    transform: rotate(-180deg);
    color: #FF38F7;
    }


/*.aproposmobile{
    opacity: 0;
}*/


  /* ----------------------------------------------
 * Generated by Animista on 2021-8-16 20:5:51
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-rotate-ver-right
 * ----------------------------------------
 */
/*@-webkit-keyframes slide-rotate-ver-right {
    0% {
      -webkit-transform: translateX(0) rotateY(0);
              transform: translateX(0) rotateY(0);
    }
    100% {
      -webkit-transform: translateX(150px) rotateY(-90deg);
              transform: translateX(150px) rotateY(-90deg);
    }
  }
  @keyframes slide-rotate-ver-right {
    0% {
      -webkit-transform: translateX(0) rotateY(0);
              transform: translateX(0) rotateY(0);
    }
    100% {
      -webkit-transform: translateX(150px) rotateY(-90deg);
              transform: translateX(150px) rotateY(-90deg);
    }
  }
  

  
    .plateforme{
    grid-column: 1/2;
  grid-row: 2/3;
  align-items: center;
    display: flex;  */
    
       /* -webkit-animation: slide-left 1s linear infinite alternate ;
                animation: slide-left 1s linear infinite alternate ;*/
                
/*    -webkit-animation: slide-rotate-ver-right 3s infinite alternate-reverse both;
     animation: slide-rotate-ver-right 3s infinite alternate-reverse both;
    }

    .titre1{
        grid-column: 1/2;
    grid-row: 2/3;
    align-items: left;
    display: flex; 
    writing-mode: vertical-lr;
    text-orientation: mixed;
    transform: rotate(-180deg);
    }

   .uxui{
    grid-column: 2/3;
  grid-row: 2/3;
  align-items: center;
    display: flex;
    -webkit-animation: slide-rotate-ver-right 3s infinite alternate-reverse both;
    animation: slide-rotate-ver-right 3s infinite alternate-reverse both;
    
    }
    

   .yuka{
    grid-column: 3/4;
  grid-row: 2/3;
  align-items: center;
    display: flex;
    -webkit-animation: slide-rotate-ver-right 3s infinite alternate-reverse both;
    animation: slide-rotate-ver-right 3s infinite alternate-reverse both;
    
    }
    .titre2{
        grid-column: 3/4;
    grid-row: 2/3;
    align-items: left;
    display: flex; 
    writing-mode: vertical-lr;
    text-orientation: mixed;
    transform: rotate(-180deg);
    }

  

   .echange{
    grid-column: 4/5;
  grid-row: 2/3;
  align-items: center;
    display: flex;
    -webkit-animation: slide-rotate-ver-right 3s infinite alternate-reverse both;
    animation: slide-rotate-ver-right 3s infinite alternate-reverse both;
    
    }
    .titre3{
        grid-column: 4/5;
    grid-row: 2/3;
    align-items: left;
    display: flex; 
    writing-mode: vertical-lr;
    text-orientation: mixed;
    transform: rotate(-180deg);
    }

   .mindy{
    grid-column: 5/6;
  grid-row: 2/3;
  align-items: center;
  display: flex;
  -webkit-animation: slide-rotate-ver-right 3s infinite alternate-reverse both;
  animation: slide-rotate-ver-right 3s infinite alternate-reverse both;
  
    }
    .titre4{
        grid-column: 5/6;
    grid-row: 2/3;
    align-items: left;
    display: flex; 
    writing-mode: vertical-lr;
    text-orientation: mixed;
    transform: rotate(-180deg);
    }

   .expo{
    grid-column: 6/7;
  grid-row: 2/3;
  align-items: center;
    display: flex;
    -webkit-animation: slide-rotate-ver-right 3s infinite alternate-reverse both;
    animation: slide-rotate-ver-right 3s infinite alternate-reverse both;

}
.titre5{
    grid-column: 6/7;
grid-row: 2/3;
align-items: left;
display: flex; 
writing-mode: vertical-lr;
text-orientation: mixed;
transform: rotate(-180deg);
}
*/
        
     /* ----------------------------------------------
 * Generated by Animista on 2021-8-16 20:7:38
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-rotate-ver-left
 * ----------------------------------------
 */
/*@-webkit-keyframes slide-rotate-ver-left {
    0% {
      -webkit-transform: translateX(0) rotateY(0);
              transform: translateX(0) rotateY(0);
    }
    100% {
      -webkit-transform: translateX(-150px) rotateY(90deg);
              transform: translateX(-150px) rotateY(90deg);
    }
  }
  @keyframes slide-rotate-ver-left {
    0% {
      -webkit-transform: translateX(0) rotateY(0);
              transform: translateX(0) rotateY(0);
    }
    100% {
      -webkit-transform: translateX(-150px) rotateY(90deg);
              transform: translateX(-150px) rotateY(90deg);
    }
  }   
    
    

    .concret{
    grid-column: 1/2;
  grid-row: 3/4;
  align-items: center;
    display: flex;
    
        -webkit-animation: slide-rotate-ver-left 3s infinite alternate-reverse both;
                animation: slide-rotate-ver-left 3s infinite alternate-reverse both;
    
    }

   .ile{
    grid-column: 2/3;
  grid-row: 3/4;
  align-items: center;
    display: flex;
    -webkit-animation: slide-rotate-ver-left 3s infinite alternate-reverse both;
                animation: slide-rotate-ver-left 3s infinite alternate-reverse both;
    }

   .reve{
    grid-column: 3/4;
  grid-row: 3/4;
  align-items: center;
    display: flex;
    -webkit-animation: slide-rotate-ver-left 3s infinite alternate-reverse both;
                animation: slide-rotate-ver-left 3s infinite alternate-reverse both;
    }

   .peter{
    grid-column: 4/5;
  grid-row: 3/4;
  align-items: center;
    display: flex;
    -webkit-animation: slide-rotate-ver-left 3s infinite alternate-reverse both;
                animation: slide-rotate-ver-left 3s infinite alternate-reverse both;
    }

   .dg{
    grid-column: 5/6;
  grid-row: 3/4;
  align-items: center;
    display: flex;
    -webkit-animation: slide-rotate-ver-left 3s infinite alternate-reverse both;
                animation: slide-rotate-ver-left 3s infinite alternate-reverse both;
    }

   .mca{
    grid-column: 6/7;
  grid-row: 3/4;
  align-items: center;
    display: flex;
    -webkit-animation: slide-rotate-ver-left 3s infinite alternate-reverse both;
                animation: slide-rotate-ver-left 3s infinite alternate-reverse both;
    }
*/

@media screen and (max-width: 960px) {
	* {
		box-sizing: border-box;
	}
	
	body {
		width: auto;
		margin: 0;
        padding: 0;
        float: none;
    }

	.index .grid{
        display: grid;
       /* grid-template-columns: 2fr 0.2fr;*/
        grid-template-rows: 70px 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 40px ;
        grid-gap: 0px;
        gap:0px;
       /* grid-column-gap: 20px;
        grid-row-gap: 20px;*/
    }
    
   /* ----------------------------------------
    * animation slide-left
    * ----------------------------------------
    */
    @-webkit-keyframes slide-left {
       0% {
         -webkit-transform: translateX(0);
                 transform: translateX(0);
       }
       100% {
         -webkit-transform: translateX(-100px);
                 transform: translateX(-100px);
       }
     }
     @keyframes slide-left {
       0% {
         -webkit-transform: translateX(0);
                 transform: translateX(0);
       }
       100% {
         -webkit-transform: translateX(-100px);
                 transform: translateX(-100px);
       }
     }
   
   
   
     .plateforme{
       grid-column: 1/2;
     grid-row: 2/3;
     align-items: center;
       display: flex;  
       width: 500%;
           -webkit-animation: slide-left 3s linear infinite alternate ;
                   animation: slide-left 3s linear infinite alternate ;
   
       }
   
       .titre1{
           grid-column: 2/3;
       grid-row: 2/3;
       align-items: left;
       display: flex; 
       writing-mode: vertical-lr;
       text-orientation: mixed;
       transform: rotate(-180deg);
       color: #3B48F2;
       margin-bottom: 30px;
       }
   
      .uxui{
       grid-column: 1/2;
     grid-row: 3/4;
     align-items: center;
       display: flex;
       width: 90%;
       -webkit-animation: slide-left 3s linear infinite alternate ;
                   animation: slide-left 3s linear infinite alternate ;
       
       }
   
       .titrea{
           grid-column: 2/3;
       grid-row: 3/4;
       align-items: left;
       display: flex; 
       writing-mode: vertical-lr;
       text-orientation: mixed;
       transform: rotate(-180deg);
       color: #3B48F2;
       margin-bottom: 30px;
       }
       
   
      .yuka{
       grid-column: 1/2;
     grid-row: 4/5;
     align-items: center;
       display: flex;
       width: 500%;
       -webkit-animation: slide-left 3s linear infinite alternate ;
                   animation: slide-left 3s linear infinite alternate ;
       
       }
       .titre2{
           grid-column: 2/3;
       grid-row: 4/5;
       align-items: left;
       display: flex; 
       writing-mode: vertical-lr;
       text-orientation: mixed;
       transform: rotate(-180deg);
       color: #3B48F2;
       margin-bottom: 30px;
       }
   
     
   
      .echange{
       grid-column: 1/2;
     grid-row: 5/6;
     align-items: center;
       display: flex;
       width: 500%;
       -webkit-animation: slide-left 3s linear infinite alternate ;
                   animation: slide-left 3s linear infinite alternate ;
       
       }
       .titre3{
           grid-column: 2/3;
       grid-row: 5/6;
       align-items: left;
       display: flex; 
       writing-mode: vertical-lr;
       text-orientation: mixed;
       transform: rotate(-180deg);
       color: #3B48F2;
       margin-bottom: 30px;
       }
   
      .mindy{
       grid-column: 1/2;
     grid-row: 6/7;
     align-items: center;
     display: flex;
     width: 500%;
     -webkit-animation: slide-left 3s linear infinite alternate ;
                   animation: slide-left 3s linear infinite alternate ;
     
       }
       .titre4{
           grid-column: 2/3;
       grid-row: 6/7;
       align-items: left;
       display: flex; 
       writing-mode: vertical-lr;
       text-orientation: mixed;
       transform: rotate(-180deg);
       color: #3B48F2;
       margin-bottom: 30px;
       }
   
      .expo{
       grid-column: 1/2;
     grid-row: 7/8;
     align-items: center;
       display: flex;
       width: 500%;
       -webkit-animation: slide-left 3s linear infinite alternate ;
                   animation: slide-left 3s linear infinite alternate ;
   
   }
   .titre5{
       grid-column: 2/3;
   grid-row: 7/8;
   align-items: left;
   display: flex; 
   writing-mode: vertical-lr;
   text-orientation: mixed;
   transform: rotate(-180deg);
   color: #3B48F2;
   margin-bottom: 30px;
   }
   
   
   /* ----------------------------------------------
    * Generated by Animista on 2021-8-17 14:20:50
    * Licensed under FreeBSD License.
    * See http://animista.net/license for more info. 
    * w: http://animista.net, t: @cssanimista
    * ---------------------------------------------- */
   
   /**
    * ----------------------------------------
    * animation slide-left
    * ----------------------------------------
    */
    @-webkit-keyframes slide-left {
       0% {
         -webkit-transform: translateX(150);
                 transform: translateX(150);
       }
       100% {
         -webkit-transform: translateX(-50px);
                 transform: translateX(-50px);
       }
     }
     @keyframes slide-left {
       0% {
         -webkit-transform: translateX(150);
                 transform: translateX(150);
       }
       100% {
         -webkit-transform: translateX(-50px);
                 transform: translateX(-50px);
       }
     }
         
   
       .concret{
       grid-column: 1/2;
     grid-row: 8/9;
     align-items: center;
       display: flex;
       width: 500%;
           -webkit-animation: slide-left 3s linear infinite alternate-reverse both;
                   animation: slide-left 3s linear infinite alternate-reverse both;
       }
   
       .titre6{
           grid-column: 2/3;
       grid-row: 8/9;
       align-items: left;
       display: flex; 
       writing-mode: vertical-lr;
       text-orientation: mixed;
       transform: rotate(-180deg);
       color: #FF38F7;
       margin-bottom: 30px;
       }
   
      .ile{
       grid-column: 1/2;
     grid-row: 9/10;
     align-items: center;
       display: flex;
       width: 500%;
           -webkit-animation: slide-left 3s linear infinite alternate-reverse both;
                   animation: slide-left 3s linear infinite alternate-reverse both;
       
       }
       .titre7{
           grid-column: 2/3;
       grid-row: 9/10;
       align-items: left;
       display: flex; 
       writing-mode: vertical-lr;
       text-orientation: mixed;
       transform: rotate(-180deg);
       color: #FF38F7;
       margin-bottom: 30px;
       }
   
      .reve{
       grid-column: 1/2;
     grid-row: 10/11;
     align-items: center;
       display: flex;
       width: 500%;
       -webkit-animation: slide-left 3s linear infinite alternate-reverse both;
       animation: slide-left 3s linear infinite alternate-reverse both;
       }
       .titre8{
           grid-column: 2/3;
       grid-row: 10/11;
       align-items: left;
       display: flex; 
       writing-mode: vertical-lr;
       text-orientation: mixed;
       transform: rotate(-180deg);
       color: #FF38F7;
       margin-bottom: 30px;
       }
   
      .peter{
       grid-column: 1/2;
     grid-row: 11/12;
     align-items: center;
       display: flex;
       width: 500%;
       -webkit-animation: slide-left 3s linear infinite alternate-reverse both;
       animation: slide-left 3s linear infinite alternate-reverse both;
       }
       .titre9{
           grid-column: 2/3;
       grid-row: 11/12;
       align-items: left;
       display: flex; 
       writing-mode: vertical-lr;
       text-orientation: mixed;
       transform: rotate(-180deg);
       color: #FF38F7;
       margin-bottom: 30px;
       }
   
      .dg{
       grid-column: 1/2;
     grid-row: 12/13;
     align-items: center;
       display: flex;
       width: 90%;
       -webkit-animation: slide-left 3s linear infinite alternate-reverse both;
       animation: slide-left 3s linear infinite alternate-reverse both;
       }
       .titreb{
           grid-column: 2/3;
       grid-row: 12/13;
       align-items: left;
       display: flex; 
       writing-mode: vertical-lr;
       text-orientation: mixed;
       transform: rotate(-180deg);
       color: #FF38F7;
       margin-bottom: 30px;
       }
   
      .mca{
       grid-column: 1/2;
     grid-row: 13/14;
     align-items: center;
       display: flex;
       width: 500%;
       -webkit-animation: slide-left 3s linear infinite alternate-reverse both;
       animation: slide-left 3s linear infinite alternate-reverse both;
       }
       .titre10{
           grid-column: 2/3;
       grid-row: 13/14;
       align-items: left;
       display: flex; 
       writing-mode: vertical-lr;
       text-orientation: mixed;
       transform: rotate(-180deg);
       color: #FF38F7;
       margin-bottom: 30px;
       }

       .propos{
        font-family: 'Fira Sans', sans-serif;
        font-size: 16px;
        grid-column: 1/7;
        grid-row: 14/15;
        text-align: center;
        line-height:50px; 
    }


      

    .apropos .grid{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 70px 1fr 1fr 40px ;
        grid-gap: 0px;
        gap:0px;
        grid-column-gap: 20px;
        grid-row-gap: 20px;
    }

    /*intranet*/

.invideo{
    
  grid-row: 5/6;
  max-width: 100%;
    height:auto;
}

.inmvideo{
    
  grid-row: 6/7;
  max-width: 100%;
    height:auto;
}

.intranet .slide-container {
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    display: flex;
    
}
.intranet .slide {
    -ms-scroll-snap-y: start;
    min-width: 100vw;
    height: 25vh;
    display: flex;
    align-items: center;
    justify-content: center;

}
.intranet .slide-containerb {
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    display: flex;
    
}

.intranet .slideb {
    -ms-scroll-snap-y: start;
    min-width: 100vw;
    height: 25vh;
    display: flex;
    align-items: center;
    justify-content: center;

}

.intranet img {
    max-width: 80%;
    height: auto;
}
    
    .intranet .grid{
        display: grid;
        grid-template-columns: 1fr;
       /* grid-template-rows: 55px 1fr 1fr 1fr 1fr 1fr 40px ;*/
        grid-gap: 0px;
        gap:0px;
        grid-column-gap: 20px;
        grid-row-gap: 20px;
    }

/*yuka*/

.yvideo{
    grid-column: 1/7;
  grid-row: 4/5;
  max-width: 100%;
    height:auto;
}

.appyuka .slide-container {
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    display: flex;
    grid-column: 1/7;
  grid-row: 3/4;
}
.appyuka .slide {
    -ms-scroll-snap-y: start;
    min-width: 100vw;
    height: 25vh;
    display: flex;
    align-items: center;
    justify-content: center;

}
.appyuka img {
    max-width: 80%;
    height: auto;
}
    
    .appyuka .grid{
        display: grid;
        grid-template-columns: 1fr;
        /*grid-template-rows: 55px 1.5fr 2fr 2fr 40px ;*/
        grid-gap: 0px;
        gap:0px;
        grid-column-gap: 20px;
        grid-row-gap: 20px;
    }
    
/*echange*/
.appechange .slide-container {
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    display: flex;
    grid-column: 1/7;
  grid-row: 3/4;
}
.appechange .slide {
    -ms-scroll-snap-y: start;
    min-width: 100vw;
    height: 25vh;
    display: flex;
    align-items: center;
    justify-content: center;

}
.appechange img {
    max-width: 80%;
    height: auto;
}

.ecvideo{
    grid-column: 1/7;
  grid-row: 4/5;
  max-width: 100%;
    height:auto;
}
    .appechange .grid{
        display: grid;
        grid-template-columns: 1fr;
        /*grid-template-rows: 55px 1.5fr 2fr 2fr 40px ;*/
        grid-gap: 0px;
        gap:0px;
        grid-column-gap: 20px;
        grid-row-gap: 20px;
    }

/*mindy*/
.amvideo{
    grid-column: 1/7;
  grid-row: 4/5;
  max-width: 100%;
    height:auto;
}

.cmvideo{
    grid-column: 1/7;
  grid-row: 5/6;
  max-width: 100%;
    height:auto;
}

.appmindy .slide-container {
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    display: flex;
    grid-column: 1/7;
  grid-row: 3/4;
}
.appmindy .slide {
    -ms-scroll-snap-y: start;
    min-width: 100vw;
    height: 25vh;
    display: flex;
    align-items: center;
    justify-content: center;

}
.appmindy img {
    max-width: 80%;
    height: auto;
}

    .appmindy .grid{
        display: grid;
        grid-template-columns: 1fr;
        /*grid-template-rows: 55px 1.5fr 2fr 2fr 2fr 40px ;*/
        grid-gap: 0px;
        gap:0px;
        grid-column-gap: 20px;
        grid-row-gap: 20px;
    }
    
/*expo plein air*/
.expoair .slide-container {
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    display: flex;
    grid-column: 1/7;
  grid-row: 3/4;
}
.expoair .slide {
    -ms-scroll-snap-y: start;
    min-width: 100vw;
    height: 25vh;
    display: flex;
    align-items: center;
    justify-content: center;

}
.expoair img {
    max-width: 65%;
    height: auto;
}

    .expoair .grid{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 55px 1.5fr 2.8fr 40px ;
        grid-gap: 0px;
        gap:0px;
        grid-column-gap: 20px;
        grid-row-gap: 20px;
    }

/*concret*/
.affiche1{
    max-width: 100%;
    height:auto;
    
  align-items: center;
    display: flex; 
}

.affiche2{
    max-width: 100%;
    height:auto;
    
  align-items: center;
    display: flex; 
}

.affiche3{
    max-width: 800%;
    height:auto;
    
  align-items: center;
    display: flex; 
}

.affiche4{
    max-width: 100%;
    height:auto;
    
  align-items: center;
    display: flex; 
}

.affiche5{
    max-width: 800%;
    height:auto;
    
  align-items: center;
    display: flex; 
}

.mockup2{
    max-width: 100%;
    height:auto;
    
  align-items: center;
    display: flex; 
}

.mockup3{
    max-width: 100%;
    height:auto;
    
  align-items: center;
    display: flex; 
}


.artconcret .slide-container {
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    display: flex;
  
  
}
.artconcret .slide {
    -ms-scroll-snap-y: start;
    min-width: 100vw;
    height: 25vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FF38F7;
}
.artconcret .slide-container img {
    max-width: 55%;
    height: auto;
}

.artconcret .txtconcret{
    max-width: 100%;
    height:auto;
    
  grid-row: 2/3;
  align-items: center;
    display: flex; 
}
    .artconcret .grid{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 55px 1fr 1.5fr 2fr 2fr 2fr 2fr 2fr 1fr 1fr 40px ;
        grid-gap: 0px;
        gap:0px;
        grid-column-gap: 20px;
        grid-row-gap: 20px;
    }

/*insulaire*/

.insulaire .ile1{
    max-width: 80%;
    height:auto;
    
  align-items: center;
    display: flex; 
}
.insulaire .ile2{
    max-width: 60%;
    height:auto;
    
  align-items: center;
    display: flex; 
}
.insulaire .ile3{
    max-width: 100%;
    height:auto;
    
  align-items: center;
    display: flex; 
}
.insulaire .ile4{
    max-width: 80%;
    height:auto;
    
  align-items: center;
    display: flex; 
}
.insulaire .dessin1{
    max-width: 100%;
    height:auto;
    
  align-items: center;
    display: flex; 
}
.insulaire .dessin2{
    max-width: 100%;
    height:auto;
    
  align-items: center;
    display: flex; 
}
.insulaire .dessin3{
    max-width: 100%;
    height:auto;
    
  align-items: center;
    display: flex; 
}
.insulaire .dessin4{
    max-width: 100%;
    height:auto;
    
  align-items: center;
    display: flex; 
}

.insulaire .slide-container {
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    display: flex;
    
  
}
.insulaire .slide {
    -ms-scroll-snap-y: start;
    min-width: 100vw;
    height: 25vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /*background: #FF38F7;*/
}
.insulaire .slide-container img {
    max-width: 55%;
    height: auto;
}

.insulaire .txtile{
    max-width: 83%;
    height:auto;
    margin-top: 20px;
    margin-left: 60px;
  
  align-items: left;
    
}

    /*.insulaire .grid{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 55px 1.5fr 1fr 1fr 1fr 40px;
        grid-gap: 0px;
        gap:0px;
        grid-column-gap: 20px;
        grid-row-gap: 20px;
    }*/

/*reve*/

.expodereve .exporeve{
    max-width: 80%;
    height:auto;
    
  align-items: center;
    display: flex; 
}

.expodereve .posterreve{
    max-width: 100%;
    height:auto;
    
  align-items: center;
    display: flex; 
}

.expodereve .slide-container {
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    display: flex;
    
  
}
.expodereve .slide {
    -ms-scroll-snap-y: start;
    min-width: 100vw;
    height: 25vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    background: #FF38F7;
}
.expodereve .slide-container img{
    max-width: 55%;
    height: auto;
}

.expodereve .txtreve{
    max-width: 83%;
    height:auto;
    margin-top: 20px;
    margin-left: 60px;
  margin-bottom: 20px;
  align-items: center;
    display: flex;
}

  /* .expodereve .grid{
        display: grid;
        grid-template-columns: 1fr;
       /*grid-template-rows: 55px 1.5fr 2fr 3fr 1.5fr 40px ;
        grid-gap: 0px;
        gap:0px;
        grid-column-gap: 20px;
        grid-row-gap: 20px;
    }*/
  
/*recode*/

.recode .pe1{
    max-width: 900%;
    height:auto;
    
  align-items: center;
    display: flex; 
}

.recode .slide-container {
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    display: flex;
    
}
.recode .slide {
    -ms-scroll-snap-y: start;
    min-width: 100vw;
    height: 30vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.recode img {
    max-width: 100%;
}


.bouton img{
    
    align-items: center;
    display: flex; 
 }

    .recode .grid{
        display: grid;
        grid-template-columns: 1fr;
        /*grid-template-rows: 55px 1.5fr 1fr 2fr 40px ;*/
        grid-gap: 0px;
        gap:0px;
        grid-column-gap: 20px;
        grid-row-gap: 20px;
    }
 
/*mca*/

.affichefin{
    max-width: 100%;
    height:auto;
    grid-column: 4/7;
  grid-row: 8/9;
  align-items: center;
    display: flex; 
}

.affichefin2{
    max-width: 100%;
    height:auto;
    grid-column: 4/7;
  grid-row: 4/5;
  align-items: center;
    display: flex; 
}

.affichefin3{
    max-width: 800%;
    height:auto;
    grid-column: 1/4;
  grid-row: 5/6;
  align-items: center;
    display: flex; 
}

.affichefin4{
    max-width: 100%;
    height:auto;
    grid-column: 4/7;
  grid-row: 6/7;
  align-items: center;
    display: flex; 
}

.affichefin5{
    max-width: 800%;
    height:auto;
    grid-column: 1/4;
  grid-row: 7/8;
  align-items: center;
    display: flex; 
}

.mockup1{
    max-width: 100%;
    height:auto;
    grid-column: 1/7;
  grid-row: 3/4;
  align-items: center;
    display: flex; 
}

.gifprogramme2{
    grid-column: 1/7;
  grid-row: 9/10;
  max-width: 100%;
    height:auto;
    align-items: center;
    
}

    .maisonculture .grid{
        display: grid;
        grid-template-columns: 1fr;
        /*grid-template-rows: 55px 1.5fr 3fr 3fr 3fr 3fr 3fr 3fr 1.5fr 40px ;*/
        grid-gap: 0px;
        gap:0px;
        grid-column-gap: 20px;
        grid-row-gap: 20px;
    }


    .apropos  img {
        grid-column: 1/7;
        align-items: center;
        display: flex; 
        margin-left: 8%;
        max-width: 1px;
        height:auto;
        opacity: 0;
    }
    
    .aproposmobile img{
        width: 100%;
        opacity: 1;
    }


	
	img {
        max-width: 100%;
        height: auto;
        align-items: center;
	}
	
	textarea {
        max-width: 100%;
		-webkit-hyphens: auto; 
		-moz-hyphens: auto;
		hyphens: auto;
		word-wrap: break-word; 
	}
    
    figure{
        padding: 12px;
        margin: 12px;
       
    }
	
	
    /*.index{
		float: none;
		width: auto;
	}*/
	
	body:before {
		display: block;
        text-align: center;
        
    }
       
}


@media screen and (max-width: 960px){
    figure{
        padding: 12px;
        margin: 12px;
    }
    * {
		box-sizing: border-box;
	}
	
	body {
		width: auto;
		margin: 0;
        padding: 0;
        float: none;
    }

	
	
	img {
        max-width: 100%;
        height: auto;
        align-items: center;
	}
	
	textarea {
        max-width: 100%;
		-webkit-hyphens: auto; 
		-moz-hyphens: auto;
		hyphens: auto;
		word-wrap: break-word; 
	}
    
    figure{
        padding: 12px;
        margin: 12px;
       
    }
	
	/* Passer à une seule colonne*/
    /*.index{
		float: none;
		width: auto;
	}*/
	
	body:before {
		display: block;
        text-align: center;
        
    }
       


   }


@media screen and (max-device-width:768px) and (orientation: landscape) {
    html {
     -webkit-text-size-adjust: 100%;
     -ms-text-size-adjust: 100%;
    }
}