@font-face {

    font-family: "spiro";
    src: url(../font/AX28ScriptSpiro.otf);
}

@font-face {

    font-family: "Mignonne";
    src: url(../font/Garabosse-Mignon·ne.otf);
}

@font-face {

    font-family: "Perle";
    src: url(../font/Garabosse-Perle.otf);
}


@font-face {

    font-family: "Parangon";
    src: url(../font/Garabosse-Parangon.otf);
}

@font-face {

    font-family: "Delius";
    src: url(../font/DeliusSwashCaps-Regular.ttf);
}

:root{
    --rouge: rgb(255, 116, 146);
    --bleu : rgb(141, 194, 255);
    --jaune :rgb(234, 255, 159); 
}

body {
overflow-y: hidden;
overflow-x: hidden;

}

section {

margin-left: 17%;
height: 110%;


}

.ours {

font-size: 7pt;
line-height: 9pt;


}

.container {


width : 15%; 
/*box-shadow: 5px 0px 10px rgb(255, 116, 146);*/
position: absolute;
top :0;
left:0;
height: 110%;
border-right: solid 1px;
padding:15px;
background-color:var(--rouge);


}





.bigname {

  width : 16vw;
  margin-left: -5px;
  margin-top: 7px;


}


.gridcontainer {

display: grid; 
grid-template-columns: repeat(8, 1fr); 
height: 110%;

}

figure {

width : 100%;
margin : 0

}

img {

width:100%;
object-fit: fill;

}

.colonne1{

  grid-column: 1/7;
  height: 700px;
  overflow-y: scroll;
  border-right: solid 1px;
  padding-right: 0px;
  margin-top: -10px;
  margin-bottom: 20px;

} 

.colonne2 {

grid-column: 7/8;
margin-top: -10px;
border-right: solid 1px;
padding:15px;
background-color:var(--jaune);
}  

.colonne3 {
margin-top: -10px;
margin-right: -10px;
padding:15px;
grid-column: 8/-1;
background-color:var(--bleu);

}  




button{



 margin-top: 5px;
 font-size: 13pt;
 font-family: Delius;
 background-color: var(--jaune);
 
  border: solid 1px; /* avec et sans sont bien*/
  border-radius: 3px;
  width: 30px;
  height: 28px;

} 

button:hover {

mix-blend-mode:luminosity;

}

.w3-display-left {

position : fixed ;
bottom : 85px ; 
left : 27px; 
box-shadow: rgba(255, 116, 146, 0.522) 0px -3px 5px 0px inset, rgba(255, 116, 146, 0.304) 0px -6px 3px 0px inset, rgba(255, 116, 146, 0.211) 0px -9px 4px 0px inset, rgba(255, 116, 146, 0.201) 0px 2px 1px, rgba(255, 116, 146, 0.368) 0px 4px 2px, rgba(255, 116, 146, 0.302) 0px 8px 4px, rgba(255, 116, 146, 0.302) 0px 16px 8px, rgba(255, 116, 146, 0.145) 0px 3px 6px;;

}

.w3-display-right {

 position : fixed ;
bottom : 85px ; 
right : 27px;  
box-shadow: rgba(141, 194, 255, 0.522) 0px -3px 5px 0px inset, rgba(141, 194, 255, 0.304) 0px -6px 3px 0px inset, rgba(141, 194, 255, 0.211) 0px -9px 4px 0px inset, rgba(141, 194, 255, 0.201) 0px 2px 1px, rgba(141, 194, 255, 0.368) 0px 4px 2px, rgba(141, 194, 255, 0.302) 0px 8px 4px, rgba(141, 194, 255, 0.302) 0px 16px 8px, rgba(141, 194, 255, 0.145) 0px 3px 6px;;

}

footer {

position: fixed;
bottom:0;
left:0;

}

/*p .tags {


  font-style: italic;
}*/

h2 {

  font-family: spiro;
  font-size: 25pt;
  text-transform: uppercase;
  margin: 10px;
  margin-top: 15px;
  width: 250px;
}

p {

  font-family: Parangon;
  font-size: 11pt;
  line-height: 12.5pt;
}

.container > p > a {


    line-height: 11.5pt;

}


.extrait {

font-style: italic;

}


a {

  font-family: Delius;
  font-size: 12pt;
  line-height: 14pt;
  color: var(--jaune);
  text-decoration: underline;
  text-decoration-color: var(--rouge) ;
  
}


.a-container {
    color: var(--rouge);
  text-decoration: underline;
  text-decoration-color: var(--jaune);

}

.a-container:hover {
  color: var(--bleu);
  text-decoration: underline;
  text-decoration-color: var(--bleu);

}


.a-container:visited {
  color: var(--jaune);
  text-decoration: underline;
  text-decoration-color: var(--jaune) ;

}

a:visited {
  color: var(--rouge);
  background-color: transparent;
  text-decoration: none;

}

a:hover {
  color: var(--bleu);
  background-color: transparent;
  text-decoration: none;
    text-decoration: underline;
 
}






.colonne2 > .tags{
  font-family: Delius;
  font-style: italic;
  text-transform: uppercase;
    font-size: 14pt;
    line-height: 14pt;
} 

.colonne2 > p {

font-family: Parangon;
margin:0pt;
font-size: 10pt;
line-height: 12pt;
}


.ruban {

display: flex;
align-items: center;

height: 4vh;
overflow: hidden;
margin-top: 0pt;
margin-bottom: 0pt;

}

/*.txtruban {
 font-family: Mignonne;
 font-size: 11pt;
line-height: normal;
}*/


.scroll {

  white-space: nowrap;
  margin: 0 0em; /*2em*/
}

.scroll div {

display: flex;
 gap: 2em;

}

.RightToLeft {
  animation: RightToLeft 25s infinite linear;
}

@keyframes  RightToLeft {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-50%);
  }
}

.LeftToRight {
  animation: LeftToRight 25s infinite linear;
}

@keyframes  LeftToRight {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0%);
  }
}



#ruban1 {

  background-color: rgb(255, 116, 146);


}

#ruban2 {

  background-color:rgb(141, 194, 255);


}

#ruban3 {

  background-color: rgb(234, 255, 159);

}

@media (max-width: 640px) {


body {



  overflow-y: scroll;
  margin-left: 0%;
  margin-right: 0%;
  min-height: 100%;
  overflow-x: hidden;
}


section {

  margin-left: 0px;

}


a {

  font-family: Delius;
  font-size: 12pt;
  line-height: 14pt;
  color: var(--rouge);
  text-decoration: underline;
  text-decoration-color: var(--rouge) ;
}

a:visited {
  color: var(--bleu);
  background-color: transparent;
  text-decoration: none;

}

.a-container {
    color: var(--jaune);
  text-decoration: underline;
  text-decoration-color: var(--jaune);

}

.a-container:hover {
  display: none;

}


.a-container:visited {
  color: var(--bleu);
  text-decoration: underline;
  text-decoration-color: var(--bleu) ;

}


button:hover {

mix-blend-mode:normal;

}


.container {

width : 100%;
height: 40vh;
background-color:var(--rouge);
/*box-shadow: 5px 0px 10px rgb(255, 116, 146);*/
position: relative;
margin-top: -20px;
border-bottom: solid 1px;

}

.container > p   {

  margin-right: 30px;
  font-size: 9pt;
  line-height: 10pt;

}

.container > .ours {

  font-size: 5pt;
  line-height: 6.5pt;
}


.container > p > a {

  font-size: 10pt;
  line-height: 10pt;
}

.bigname {

  width : 40vw;
  align-items: center;

}


.gridcontainer {

display: block; ;
}

.ruban {

display: none;
align-items: center;
top: 10px;
height: 2.7vh;
overflow: hidden;
margin-top: 0pt;
margin-bottom: 0pt;


}

.txtruban {

font-size: 10pt;
line-height: 10pt;
padding: 0;
margin-bottom: 0.7pt;
margin-top: 3pt;

}


a:hover {
  display: none;
}


.colonne1{


height: 50vh;
overflow-y: scroll;
display: block;
margin-left: 1vw; 
margin-right: 1vw; 
margin-bottom: 0px;
margin-top: 0px;
border-right: none;


} 

.colonne2 {
display: block;
margin-top: 0px;
margin-left: 0px;
padding-top: 10px;
padding-bottom: 20px;
padding-right: 15px;
border-right: none;
text-align: center;
border-top: solid 1px;
min-height: 100%;
}  

.colonne2 > p {
text-align: center;
margin:0pt;
font-size: 10pt;
line-height: 13pt;

}

.colonne3 {
display: block;
text-align: center;
border-top: solid 1px;
margin-left: 0px;
margin-right: 0px;
height: 50vh;


}  

h2 {

  font-family: spiro;
  text-align: center;
  font-size: 20pt;
  line-height: 20pt;
  text-transform: uppercase;
  margin: 10px;
  margin-bottom: 15px;
  margin-top: 15px;
  width: fit-content;
}

p {

  margin-top: 5px;
  font-family: Parangon;
  font-size: 11pt;
  line-height: 12pt;
}




.w3-display-left {

position : fixed ;
top : 40vh ; 
left : 6vw; 
color: black; 
}

.w3-display-right {

position : fixed ;
top : 40vh ; 
right : 6vw;  
color: black;
}


}