/* ---------------------------Import de la typo Inter--------------------------------------------*/

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 100;
  font-display: swap;
  src: url("../typo/Inter-Thin.woff2?v=3.19") format("woff2"),
       url("../typo/Inter-Thin.woff?v=3.19") format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 100;
  font-display: swap;
  src: url("../typo/Inter-ThinItalic.woff2?v=3.19") format("woff2"),
       url("../typo/Inter-ThinItalic.woff?v=3.19") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 200;
  font-display: swap;
  src: url("../typo/Inter-ExtraLight.woff2?v=3.19") format("woff2"),
       url("../typo/Inter-ExtraLight.woff?v=3.19") format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 200;
  font-display: swap;
  src: url("../typo/Inter-ExtraLightItalic.woff2?v=3.19") format("woff2"),
       url("../typo/Inter-ExtraLightItalic.woff?v=3.19") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 300;
  font-display: swap;
  src: url("../typo/Inter-Light.woff2?v=3.19") format("woff2"),
       url("../typo/Inter-Light.woff?v=3.19") format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 300;
  font-display: swap;
  src: url("../typo/Inter-LightItalic.woff2?v=3.19") format("woff2"),
       url("../typo/Inter-LightItalic.woff?v=3.19") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
  src: url("../typo/Inter-Regular.woff2?v=3.19") format("woff2"),
       url("../typo/Inter-Regular.woff?v=3.19") format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 400;
  font-display: swap;
  src: url("../typo/Inter-Italic.woff2?v=3.19") format("woff2"),
       url("../typo/Inter-Italic.woff?v=3.19") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 500;
  font-display: swap;
  src: url("../typo/Inter-Medium.woff2?v=3.19") format("woff2"),
       url("../typo/Inter-Medium.woff?v=3.19") format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 500;
  font-display: swap;
  src: url("../typo/Inter-MediumItalic.woff2?v=3.19") format("woff2"),
       url("../typo/Inter-MediumItalic.woff?v=3.19") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 600;
  font-display: swap;
  src: url("../typo/Inter-SemiBold.woff2?v=3.19") format("woff2"),
       url("../typo/Inter-SemiBold.woff?v=3.19") format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 600;
  font-display: swap;
  src: url("../typo/Inter-SemiBoldItalic.woff2?v=3.19") format("woff2"),
       url("../typo/Inter-SemiBoldItalic.woff?v=3.19") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 700;
  font-display: swap;
  src: url("../typo/Inter-Bold.woff2?v=3.19") format("woff2"),
       url("../typo/Inter-Bold.woff?v=3.19") format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 700;
  font-display: swap;
  src: url("../typo/Inter-BoldItalic.woff2?v=3.19") format("woff2"),
       url("../typo/Inter-BoldItalic.woff?v=3.19") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 800;
  font-display: swap;
  src: url("../typo/Inter-ExtraBold.woff2?v=3.19") format("woff2"),
       url("../typo/Inter-ExtraBold.woff?v=3.19") format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 800;
  font-display: swap;
  src: url("../typo/Inter-ExtraBoldItalic.woff2?v=3.19") format("woff2"),
       url("../typo/Inter-ExtraBoldItalic.woff?v=3.19") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 900;
  font-display: swap;
  src: url("../typo/Inter-Black.woff2?v=3.19") format("woff2"),
       url("../typo/Inter-Black.woff?v=3.19") format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 900;
  font-display: swap;
  src: url("../typo/Inter-BlackItalic.woff2?v=3.19") format("woff2"),
       url("../typo/Inter-BlackItalic.woff?v=3.19") format("woff");
}

@font-face {
  font-family: 'Inter var';
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  font-named-instance: 'Regular';
  src: url("../typo/Inter-roman.var.woff2?v=3.19") format("woff2");
}
@font-face {
  font-family: 'Inter var';
  font-weight: 100 900;
  font-display: swap;
  font-style: italic;
  font-named-instance: 'Italic';
  src: url("../typo/Inter-italic.var.woff2?v=3.19") format("woff2");
}

@font-face {
  font-family: 'Inter var experimental';
  font-weight: 100 900;
  font-display: swap;
  font-style: oblique 0deg 10deg;
  src: url("../typo/Inter.var.woff2?v=3.19") format("woff2");
}

/* -------------------------------PAGE D'ACCUEIL----------------------------------------*/

body{
margin : 0;
padding : 0;
  overflow: hidden visible;
}

.fondbleu{
  background-color: #6b58f6;
}
.fondblanc{
  background-color: ghostwhite;
  }


a {
text-decoration : none;
color : white;
}

.page{
  color : blue;
}

header {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  font-family : Inter;
  font-weight : 300;
  font-size: 1.2vw;
  width: 100%;
  color: ghostwhite;
 padding-top: 0.4em;
  padding-bottom: 0.4em;
  position: fixed;
  z-index: 1;
   background-color: #6b58f6;
   /* background: linear-gradient(#4d30d7, transparent) ;*/
}



.name{
grid-column: 1/3;
grid-row: 1/2;
margin : 0;
font-family : Inter;
font-weight : 600;
/*font-style : italic;*/
font-size : 1.2 vw;
  margin-left: 1.3em;
  color : ghostwhite;
/*text-transform : uppercase;*/
}

.name:hover {
font-style: italic;
transition: 2s;
transition-timing-function: ease;
cursor: pointer;
}

.job{
grid-column: 2/6;
grid-row: 1/2;
margin : 0;
text-align: center;
font-family : Inter;
font-weight : 600;
font-style : italic;
font-size : 1.2 vw;
  color : ghostwhite;
}

.menuright{
  grid-column: 7/13;
  grid-row: 1/2;
  text-align: center;
  margin : 0;
  font-size : 1.2vw;
  font-weight : 200;
  justify-content: space-between;
  box-sizing: inherit;
}


#menu01:hover,#menu02:hover,#menu03:hover,#menu04:hover,#menu05:hover {
font-weight: 600;
transition: 0.4s;
transition-timing-function: ease;
cursor: pointer;
}

#menu01{
color : ghostwhite;
margin-left: 2.2em;
}

#menu02{
color : ghostwhite;
 margin-left: 2.2em;
}

#menu03{
color : ghostwhite;
 margin-left: 2.2em;
}

#menu04{
color : ghostwhite;
margin-left: 2.2em;
}

#menu05{
color : ghostwhite;
margin-left: 2.2em;
}

.menu {
overflow : hidden;
padding-top: 3em;
}


section {
font-size : 8vh;
/*font-size : 3.46rem;*/
font-family : Inter;
font-weight : 800;
display: inline-block;                 /*modèle de boîte en ligne */
  white-space: nowrap;                   /*pas de passage à la ligne */
  margin-top : -10px;
}

.verse {
animation: defilement 60s infinite linear;
}
.reverse {
animation: defilement 60s infinite reverse linear;
}

@keyframes defilement {
  0% {
    transform: translate(0,0);     /* position initiale à droite */
  }
  100% {
    transform: translate(-50%,0);  /*position finale à gauche */
  }
}

.menu a img {
position : fixed;
top : 15vh;
left : 88vw;
width : 10vw;
z-index: 1;
opacity : 0;
}


p {
    grid-column: 1/3;
    column-count: 2;
    padding-right: 0.3em;
    padding-left: 0.3em;
    padding-bottom: 0.3em;
    padding-top: 0em;
    font-family : Inter;
  font-weight : 200;
  font-size : 1.7vw;
  color : black;
  margin-top: 1em;
  margin-bottom: 3em;

}

#footermenu{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  background-color : #4d30d7;
  font-family : Inter;
  font-weight : 300;
  font-size: 1vw;
  padding : 0;
  position: inherit;
  bottom: 0;
  width: 100%;

}

#footermenupage{

    display: grid;
  grid-template-columns: repeat(12, 1fr);
  background-color : #4d30d7;
  font-family : Inter;
  font-weight : 300;
  font-size: 1vw;
  padding : 0;
  position: fixed;
  bottom: 0;
  width: 100%;
}


footer {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  background-color : #4d30d7;
  font-family : Inter;
  font-weight : 300;
  font-size: 1vw;
  padding : 0;
  position: fixed;
  bottom: 0;
  width: 100%;
}

#copyright{
grid-column: 1/6;
grid-row: 1/2;
padding-left: 1.3em;
}

.texteinfo1{
  grid-column: 09/10;
  grid-row: 1/2;
}
.texteinfo2{
  grid-column: 10/11;
  grid-row: 1/2;
}
.texteinfo3{
  grid-column: 11/12;
  grid-row: 1/2;
}
.texteinfo4{
  grid-column: 12/13;
  grid-row: 1/2;
}

footer a {
text-align : left;
color : white;
margin : 0 2px;
}

footer {
  text-align : left;
  /*margin-right: 5em;*/

}

footer.page {
position : static;
bottom : 0;
left : 0;
width : 100%;
}

section:hover {
animation-play-state: paused;
}

section:hover a{
color : white;
background-color: #4b1900;
}

section:hover +a img {
opacity : 100%;
}

footer a:hover {
font-weight: 600;
transition: 0.4s;
transition-timing-function: ease;
cursor: pointer;
}


/*--------------------- PAGE DE CHAQUE PROJET----------------------*/

#container{
  padding-top: 2.9em;
  height: 35vw;
  display : flex;    /*-safari-*/
  overflow-x: hidden;
}

.texte {
  display: grid;
    grid-template-columns: repeat(2, 1fr);

}


/*--------------------- PAGE THEMATIQUES ----------------------*/

.menustatic{
overflow : hidden;
padding-top: 3em;
}

.menustatic img {
position : fixed;
top : 260px;
left : 73vw;
z-index: 1;
opacity : 0;
width: 25%;
}



/*---------------------MODE TELEPHONE--------------------------------*/

@media (orientation: portrait) {


/*  .fondbleu{
  background-color: blue;
  width: 170%;
}*/

header {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  font-family : Inter;
  font-weight : 300;
  font-size: 3.6vw;
  width: 100%;
  color: ghostwhite;
 padding-top: 0.4em;
  padding-bottom: 0.4em;
  position: absolute;
   background-color: #6b58f6;
   /* background: linear-gradient(#4d30d7, transparent) ;*/
}

.name{
grid-column: 1/5;
grid-row: 1/2;
margin-left: 12px;
font-family : Inter;
font-weight : 600;
/*font-style : italic;*/
font-size : 3.6vw;
  color : ghostwhite;
/*text-transform : uppercase;*/
}

.name:hover {
font-style: italic;
transition: 2s;
transition-timing-function: ease;
cursor: pointer;
}

.job{
grid-column: 4/13;
grid-row: 1/2;
margin-right: 12px;
text-align: right;
font-family : Inter;
font-weight : 600;
font-style : italic;
font-size : 2 vw;
  color : ghostwhite;
}

.menuright{
  padding-top: 0em;
  grid-column: 1/13;
  grid-row: 2/3;
  text-align: center;
  margin : 0;
  font-size : 0vw;
  font-weight : 300;
  justify-content: space-between;
  box-sizing: inherit;
}



.menu {
overflow : hidden;
padding-top: 3em;
}

.menu {
  overflow : none;    
  padding-top: 2em;                 
}

.page{
  font-size :0rem;  
                   /*en attendant mieux*/
}

section {  
  font-size : 3.2rem;
  font-family : Inter;
  font-weight : 800;
  display: inline-block;                 /*modèle de boîte en ligne */
  white-space: nowrap;                   /*pas de passage à la ligne */
  margin-block: 0.7em;
}

section:hover a{
color : white;
background-color: #4b1900;
padding: 0.7em;
}

.verse {
  animation: defilement 50s infinite linear;
}
.reverse {
  animation: defilement 50s infinite reverse linear;
}

@keyframes defilement {
  0% {
    transform: translate(0,0);     /* position initiale à droite */
  }
  100% {
    transform: translate(-50%,0);  /*position finale à gauche */
  }
}


.menu a img{
  position : relative;
  top: 0;
  height: auto;
  left: 0;
  vertical-align: middle;
  width : 100%;
  opacity : 100;
}

.menustatic img {
  position : relative;
  top: 0;
  height: auto;
  left: 0;
  vertical-align: middle;
  width : 100%;
  opacity : 100;
}

/*--------------*/

#container{
  height: 100%;
  display : block;
  overflow-x: hidden;
  overflow-x: none;
}

#container img {
 width : 100%;
 overflow-x: hidden;
padding-top: 1em;
}

.texte {
  display: grid;
  grid-template-columns: repeat(2, 1fr);

}

p {
  grid-column: 1/3;
  column-count: 1;
  padding-right: 0.5em;
  padding-left: 0.5em;
  padding-bottom: 0.3em;
  padding-top: 0em;
  font-family : Inter;
  font-size : 4vw;
  color : black;
  margin-top: 1em;
  margin-bottom: 3em;
}


footer.page{
     /*position: relative;    en attendant mieux*/
  bottom: 0;
}


footer {
  display: block;
  font-size: 3.3vw;
  padding : 0;
  position: relative;
  bottom: 0;
  width: 100%;
}

footer a{
  display: block;
  width : 100%;
  text-align: center;
  margin : 0 0px;
}

}