@font-face {
    font-family: 'milling-4';
    src: url(font/Milling-Triplex4mm.woff2);
}

@font-face {
    font-family: 'pinokio-regular';
    src: url(font/PinokioSans-Regular.woff2);
}

@font-face {
    font-family: 'pinokio-medium';
    src: url(font/PinokioSans-Medium.woff2);
}

@font-face {
    font-family: 'pinokio-black';
    src: url(font/PinokioSans-Black.woff2);
}

@font-face {
    font-family: 'pinokio-light';
    src: url(font/PinokioSans-Light.woff2);
}

@font-face {
    font-family: 'icons';
    src: url(font/foundation-icons.woff);
}

@font-face {
  font-family: "pinokio-moyen-regular";
  src: url(font/PinokioMoyen-Regular.woff2);
}

@font-face {
  font-family: "pinokio-moyen-bold";
  src: url(font/PinokioMoyen-Bold.woff2);
}


* {
  -webkit-tap-highlight-color: transparent;
}

html, body {
  padding: 0;
  margin: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100%;
  background-color: #ffffff;
  overflow: hidden;
  max-width: 100vw;
  text-wrap: balance;     
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

h1 {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-family:"milling-4";
  font-weight: bold;
  font-size: clamp(60px, 10vw, 120px);
  line-height: clamp(50px, 9vw, 110px);
  color: #ff61cf;
  z-index: 1;
  width: 100%;
}

.clock {
  width: 90vh;
  height: 90vh;
  border-radius: 50%;
  position: fixed;
  z-index: 8;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  right: auto;
  bottom: auto;
  margin: 0;
}

.time {
  display: block;
  position: absolute;
  /* top/left sont gérés par JS */
  width: 0;
  height: 0;
  overflow: visible;

}

.time p {
  position: absolute;
  white-space: normal;
  transform: translate(-50%, -50%);
  margin: 0;
  cursor: url('curseur8.svg') 0 0, auto;
  font-size: 3.5vmin;
  font-family: "pinokio-medium";
  transition: color 0.2s, font-size 0.2s;
  text-align: center;
  line-height: 3.6vmin;
  width: 90px;
}

.time-conf p{
  width: 100px;
}

.p-bold{
  font-family: "pinokio-black";
}

.time p:hover {
  font-family: "pinokio-black";
}



.colonne {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  padding-left: 15px;
  padding-right: 15px;
  width: 100%;
  z-index: 100;
  position: fixed;
}

.instagram {
  margin: 0;
  font-family: "pinokio-black";
  font-size: clamp(16px, 1em, 22px);
  text-align: end;
  color: #000000;
}

.insta-lien{
  color: #000000;
  cursor: url('curseur8.svg') 0 0, auto;


}

.about {
  margin: 0;
  text-align: end;
  font-size: clamp(16px, 1em, 22px);
  z-index: 0;
  cursor: url('curseur8.svg') 0 0, auto;
}

.contact:hover, .about:hover{
  color: #9e8038;
}

#toggle-menu { display: none; }

.btn-menu {
top: 10px;
right: 15px;
cursor: url('curseur8.svg') 0 0, auto;
font-family: "pinokio-black";
font-size: 2vmin;
}

.menu-backdrop {
display: none;
position: fixed;
inset: 0;
z-index: 150;
cursor: url('curseur8.svg') 0 0, auto;
}

.menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;       
height: 100vh;
background: #9e8038;
z-index: 160;
margin: 0px;
transform: translateX(-100%);        /* caché à droite */
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
}

.menu-overlay img{
  width: 100%;
  height: 100%;
  object-position: center;
  position: absolute;
  padding: 0px;
  margin: 0px;
  top: 0px;
  left: 0px;
  z-index: 0;
  position: absolute;
  opacity: 50%;

}

.menu-close {
position: absolute;
top: 5px;
right: 20px;
cursor: url('curseur8.svg') 0 0, auto;
color: #ffffff;
font-family: "pinokio-light";
font-size: 40px;
z-index: 190;
}

.menu-close:hover{
color: #ff61cf;
}

.text-about{
  position: absolute;
  font-family: "pinokio-moyen-regular";
  font-size: 20px;
  color: #ffffff;
  text-align: left;
  z-index: 170;
  height: 100%;
  margin: 0px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  overflow-x: scroll;
  padding-right: 30px;
}

.text-about-contenu {
margin: 0px;
padding: 0px;
flex: 1;
margin-bottom: 50px;
}

.about-bold{
  font-family: "pinokio-moyen-bold";
}

.colophon{
margin-top: auto; 
font-size: clamp(15px, 0.8em, 17px);
font-family: "pinokio-regular";
margin-bottom: 100px;
}

#toggle-menu:checked ~ .menu-overlay {
transform: translateX(0);          
}

#toggle-menu:checked ~ .menu-backdrop {
display: block;
}




.bg-rotate {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  max-width: 78%;
  max-height: 78%;
  object-fit: cover;
  z-index: 2;
}


.fond-img{
  position: fixed;
  max-width: 90%;
  max-height: 90%;
  z-index: 0;
  top: 50%; left: 50%; 
  transform: translate(-50%, -50%); 
}

.fond-img-gauche{
  position: fixed;
  max-width: 90%;
  max-height: 90%;
  z-index: 0;
  top: 50%; left: 50%; 
  transform: translate(-155%, -50%); 
}

.fond-img-droite{
  position: fixed;
  max-width: 90%;
  max-height: 90%;
  z-index: 0;
  top: 50%; left: 50%; 
  transform: translate(55%, -50%); 
}

.fond-img-haut{
  position: fixed;
  max-width: 90%;
  max-height: 90%;
  z-index: 0;
  top: 50%; left: 50%; 
  transform: translate(-50%, -155%); 
}

.fond-img-bas{
  position: fixed;
  max-width: 90%;
  max-height: 90%;
  z-index: 0;
  top: 50%; left: 50%; 
  transform: translate(-50%, 55%); 
}

a{
  cursor: url('curseur8.svg') 0 0, auto;
}


/* GRILLES DE BLOCS D'INFOS*/


.grille-info{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(12, 1fr);
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 9;
  position: relative;
  pointer-events: none;
  margin-top: 15px;
  padding-top: 20px;
}

.box{
  background-color: #00c9ff;
  background-clip: padding-box;
  overflow: visible;
  z-index: 7;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: auto;
  border: 15px solid transparent; 
  font-family: "pinokio-medium";
  padding: 10px;
  min-height: 0px;
}

.box::after {
  content: '';
  position: absolute;
  inset: -6px; /* la moitié du border-width → décale vers l'extérieur */
  border: 12px solid transparent;
  border-image: url(img/border3.png) 75 75 75 75 repeat repeat;
  pointer-events: none;
}

.box-head{
  display: grid;
  grid-template-columns:auto 1fr;
  position: relative;
}

.info-princ{
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;    
  padding: 5px 10px;
}

.info-princ span{
  font-size: 17px;
  font-weight: 900;
  color: #ffffff;
}

.info-princ p{
  font-weight: 900;
  color: #00c9ff;
  text-align: center;
  margin-bottom: 0px;
  margin-top: 0px;
}

.close{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: relative;
  color: #ffffff;
  font-family: "pinokio-light";
  font-size: 35px;
  grid-column: 1;
  grid-row: 1 / 3;  
  line-height: 0px;
  top: 0px;
  padding-left: 5px;
  cursor: url('curseur8.svg') 0 0, auto;
}

.close:hover{
  color: #9e8038;
}

.titre-info{                
  position: relative;
  margin: 0px;
  color: #ffffff;
  position: relative;
  font-size: 35px;
  align-items: center;
  text-align: center;
  font-family:"milling-4";
  margin: 0px;
  color: #ffffff;
  padding-top: 7px;
  margin-bottom: 0x;
  padding-bottom: 7px;
  line-height: 35px;
}

a{
  text-decoration: none;
  color: #ffffff;

}

a:hover{
  color: #9e8038;
}

.icons{
  font-family: "icons";
}

.infos{
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;         
  color: #ffffff;
}

.info-texte {
  font-size: 17px;
  font-family: "pinokio-medium";
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 0px;
  margin-top: 0px;
  padding-bottom: 10px;
  margin-bottom: 0px;
}

.info-foot{
  font-family: "pinokio-regular";
  width: 100%;
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 0px;
  padding-bottom: 5px;
  justify-content: left;
  text-align: left;
  margin-top: 0px;
  padding-top: 0px;
  font-size: 17px;
}

.autre{
  text-align: left;
  font-size: 17px;
}

.lieu{
  text-align: right;
  font-size: 17px;
}






.box:hover{
  z-index: 14;
}



#toggle-conf { display: none; }

.conf { 
  display: none; 
  grid-column: 1 / -1;
  grid-row: 1;
  background-color: #00c9ff;
  background-clip: padding-box;
}

#toggle-conf:checked ~ .conf { 
  display: grid; 
}


#toggle-realite { display: none; }

.realite { 
  display: none; 
  grid-column: 1 / -1;
  grid-row: 2;
 background-color: #9e8038;
 background-clip: padding-box;
}

#toggle-realite:checked ~ .realite { 
  display: grid; 
}

#toggle-sticker { display: none; }

.sticker { 
  display: none; 
  grid-column: 1 / -1;
  grid-row: 3;
  background-color: #00c9ff;
  background-clip: padding-box;

}

#toggle-sticker:checked ~ .sticker { 
  display: grid; 
}


#toggle-marche { display: none; }

.marche { 
  display: none; 
  grid-column: 1 / -1;
  grid-row: 4;
 background-color: #9e8038;
 background-clip: padding-box;
}

#toggle-marche:checked ~ .marche { 
  display: grid; 
}


#toggle-atelier { display: none; }

.atelier { 
  display: none; 
  grid-column: 1 / -1;
  grid-row: 5;
 background-color: #b4b4b4;
 background-clip: padding-box;
}

#toggle-atelier:checked ~ .atelier { 
  display: grid; 
}


#toggle-proj { display: none; }

.proj { 
  display: none; 
  grid-column: 1 / -1;
  grid-row: 6;
  background-color: #ff61cf;
  background-clip: padding-box;
}

#toggle-proj:checked ~ .proj { 
  display: grid; 
}

.close-conf:hover{color: #9e8038;}
.close-realite:hover{color: #ff61cf;}
.close-sticker:hover{color: #b4b4b4;}
.close-marche:hover{color: #ff61cf;}
.close-atelier:hover{color: #00c9ff;}
.close-proj:hover{color: #b4b4b4;}

.a-conf:hover{color: #9e8038;}
.a-realite:hover{color: #ff61cf;}
.a-sticker:hover{color: #b4b4b4;}
.a-marche:hover{color: #ff61cf;}
.a-atelier:hover{color: #00c9ff;}
.a-proj:hover{color: #b4b4b4;}

.a-conf:hover span{color: #9e8038;}
.a-realite:hover span{color: #ff61cf;}
.a-sticker:hover span{color: #b4b4b4;}
.a-marche:hover span{color: #ff61cf;}
.a-atelier:hover span{color: #00c9ff;}
.a-proj:hover span{color: #b4b4b4;}


/********************** MEDIA QUERY POUR TÉLÉPHONE HORIZONTAL ***************************/


@media (max-width: 768px) and (orientation: landscape) {

h1{
    font-size: 50px;
    line-height: 40px;
}

.grille-info{
    grid-template-rows: repeat(1, 1fr);
    padding-top: 5px;
}

.info-texte {
  font-size: 17px;
}

.info-texte-realite-sticker{
  font-size: 10px;
}

.text-about{
  padding-right: 30px;
}

.info-foot{
    display: grid;
    grid-template-columns: 1, 1fr;
    justify-content: space-between;
    text-align: auto;
}

.autre{
    text-align: left;
    grid-column: 1 / span 1;
    font-size: 16px;
}

.lieu{
    text-align: right;
    grid-column: 2 / span 1;
    font-size: 16px;
}

.conf { 
    grid-row: 1;
}

.realite { 
    grid-row: 1;
}

.sticker { 
    grid-row: 1;
}

.marche { 
    grid-row: 1;
}

.atelier { 
    grid-row: 1;
}

.proj { 
    grid-row: 1;
}

}

/********************** MEDIA QUERY POUR IPAD ***************************/


@media (min-width: 768px) and (max-width: 900px)  {


  .time p {
      font-size: 2.4vmin;
      line-height: 2.5vmin;
      width: 120px;
  }
  
  .time p:hover {
    font-family: "pinokio-black";
  }

  .time .p-bold:hover {
    font-family: "pinokio-black";
  }
  

.menu-overlay {
  width: 66vw;      
}

.text-about-contenu {
  margin-bottom: 0px;
  }
  


.text-about{
    font-size: 22px;
}



.colophon{
  font-size: 17px;
  margin-bottom: 0px;
}  

.menu-close{
  display: none;
}

h1{
  font-size: 120px;
  line-height: 110px;
}

/* GRILLES DE BLOCS D'INFOS*/


.box::after {
  content: '';
  position: absolute;
  inset: -10px; /* la moitié du border-width → décale vers l'extérieur */
  border: 15px solid transparent;
  border-image: url(img/border3.png) 75 75 75 75 repeat repeat;
  pointer-events: none;
}



  .grille-info{
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(6, 1fr);
    padding: 20px;
}


.info-princ span{
    font-size: 18px;
}

.info-texte{
  padding-bottom: 15px;
  font-size: 15px;
}

.info-foot{
    display: grid;
    grid-template-columns: 1, 1fr;
    justify-content: space-between;
    text-align: auto;
}

.autre{
    text-align: left;
    grid-column: 1 / span 1;
    font-size: 16px;
}

.lieu{
    text-align: right;
    grid-column: 2 / span 1;
    font-size: 16px;

}

.conf { 
    grid-column: 4 / span 3;
    grid-row: 4;
}

.realite { 
    grid-column: 3 / span 4;
    grid-row: 2;
}

.sticker { 
    grid-column: 1 / span 3;
    grid-row: 2;
}

.marche { 
    grid-column: 1 / span 3;
    grid-row: 4;
}

.atelier { 
    grid-column: 2 / span 4;
    grid-row: 5;
}

.proj { 
    grid-column: 2 / span 5;
    grid-row: 1;
}

}


/********************** MEDIA QUERY POUR ORDI AVEC PETITE FENETRE **************************/

@media (min-width: 900px) and (max-width: 1052px){


  .clock {
    width: 70vh;
    height: 70vh;
  }

  .time p {
      white-space: nowrap;
      font-size: 2.4vmin;
      line-height: 2.5vmin;
      width: auto;
  }
  
  .time p:hover {
    font-size: 2.8vmin;
    font-family: "pinokio-medium";
  }

  .time .p-bold:hover {
    font-family: "pinokio-black";
  }
  
  .instagram {
    font-size: 2vmin;
  }

  .about{
    font-size: 2vmin;
  }

.menu-overlay {
  width: 50vw;      
}

.text-about-contenu {
  margin-bottom: 20px; 
}

.text-about{
    font-size: 22px;
    padding-right: 20px;
}

.colophon{
  font-size: 17px;
  margin-bottom: 0px;
}  

.menu-close{
  display: none;
}

/* GRILLES DE BLOCS D'INFOS*/

.box::after {
  content: '';
  position: absolute;
  inset: -10px; /* la moitié du border-width → décale vers l'extérieur */
  border: 15px solid transparent;
  border-image: url(img/border3.png) 75 75 75 75 repeat repeat;
  pointer-events: none;
}

  .grille-info{
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(6, 1fr);
    padding: 20px;
    padding-bottom: 40px;

}

.info-princ span{
    font-size: 18px;
}

.info-texte{
  padding-bottom: 15px;
}

.info-foot{
    display: grid;
    grid-template-columns: 1, 1fr;
    justify-content: space-between;
    text-align: auto;
}

.autre{
    text-align: left;
    grid-column: 1 / span 1;
    font-size: 16px;
}

.lieu{
    text-align: right;
    grid-column: 2 / span 1;
    font-size: 16px;

}


.conf { 
  grid-column: 4 / span 3;
  grid-row: 3;
}

.realite { 
    grid-column: 3 / span 2;
    grid-row: 2;
}

.sticker { 
    grid-column: 1 / span 2;
    grid-row: 1;
}

.marche{
  grid-column: 1 / span 3;
  grid-row: 4;  }




  .atelier{
    grid-column: 2 / span 4;
  
  }
  

.proj { 
    grid-column: 4 / span 3;
    grid-row: 1;
}

.close-conf:hover{color: #9e8038;}
.close-realite:hover{color: #ff61cf;}
.close-sticker:hover{color: #b4b4b4;}
.close-marche:hover{color: #ff61cf;}
.close-atelier:hover{color: #00c9ff;}
.close-proj:hover{color: #b4b4b4;}

.a-conf:hover{color: #9e8038;}
.a-realite:hover{color: #ff61cf;}
.a-sticker:hover{color: #d1d1d4;}
.a-marche:hover{color: #ff61cf;}
.a-atelier:hover{color: #00c9ff;}
.a-proj:hover{color: #b4b4b4;}

.a-conf:hover span{color: #9e8038;}
.a-realite:hover span{color: #ff61cf;}
.a-sticker:hover span{color: #b4b4b4;}
.a-marche:hover span{color: #ff61cf;}
.a-atelier:hover span{color: #00c9ff;}
.a-proj:hover span{color: #b4b4b4;}





}





/********************** MEDIA QUERY POUR ORDINATEUR ***************************/


@media (min-width: 1053px) {

  .clock {
    width: 70vh;
    height: 70vh;
  }

  .time p {
      white-space: nowrap;
      font-size: 2.4vmin;
      line-height: 2.5vmin;
      width: auto;
  }
  
  .time p:hover {
    font-size: 2.8vmin;
    font-family: "pinokio-medium";
  }

  .time .p-bold:hover {
    font-family: "pinokio-black";
  }
  
  .instagram {
    font-size: 2vmin;
  }

  .about{
    font-size: 2vmin;
  }

.menu-overlay {
  width: 33vw;      
}

.text-about-contenu {
  margin-bottom: 20px; 
  font-size: 23px;
}

.text-about{
    padding-right: 20px;
}

.colophon{
  font-size: 17px;
  margin-bottom: 0px;
}  

.menu-close{
  display: none;
}

/* GRILLES DE BLOCS D'INFOS*/

.box::after {
  content: '';
  position: absolute;
  inset: -10px; /* la moitié du border-width → décale vers l'extérieur */
  border: 15px solid transparent;
  border-image: url(img/border3.png) 75 75 75 75 repeat repeat;
  pointer-events: none;
}

  .grille-info{
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(6, 1fr);
    padding: 20px;
    padding-bottom: 40px;

}

.info-princ span{
    font-size: 18px;
}

.info-texte{
  padding-bottom: 15px;
}

.info-foot{
    display: grid;
    grid-template-columns: 1, 1fr;
    justify-content: space-between;
    text-align: auto;
}

.autre{
    text-align: left;
    grid-column: 1 / span 1;
    font-size: 16px;
}

.lieu{
    text-align: right;
    grid-column: 2 / span 1;
    font-size: 16px;

}

.conf { 
    grid-column: 5 / span 2;
    grid-row: 4;
}

.realite { 
    grid-column: 3 / span 2;
    grid-row: 2;
}

.sticker { 
    grid-column: 1 / span 2;
    grid-row: 1;
}

.marche { 
    grid-column: 1 / span 2;
    grid-row: 4;
}

.atelier { 
    grid-column: 2 / span 3;
    grid-row: 5;
}

.proj { 
    grid-column: 4 / span 3;
    grid-row: 1;
}

.close-conf:hover{color: #9e8038;}
.close-realite:hover{color: #ff61cf;}
.close-sticker:hover{color: #b4b4b4;}
.close-marche:hover{color: #ff61cf;}
.close-atelier:hover{color: #00c9ff;}
.close-proj:hover{color: #b4b4b4;}

.a-conf:hover{color: #9e8038;}
.a-realite:hover{color: #ff61cf;}
.a-sticker:hover{color: #b4b4b4;}
.a-marche:hover{color: #ff61cf;}
.a-atelier:hover{color: #00c9ff;}
.a-proj:hover{color: #b4b4b4;}

.a-conf:hover span{color: #9e8038;}
.a-realite:hover span{color: #ff61cf;}
.a-sticker:hover span{color: #b4b4b4;}
.a-marche:hover span{color: #ff61cf;}
.a-atelier:hover span{color: #00c9ff;}
.a-proj:hover span{color: #b4b4b4;}

}


/*
.infos-conf{color: #ff61cf;}
.infos-realite{color: #9e8038;}
.infos-sticker{color: #00c9ff;}
.infos-marche{color: #6b6b6b;}
.infos-atelier{color: #9e8038;}
.infos-proj{color: #00c9ff;}

.titre-info-conf {border-right: 2px solid #ff61cf;}
.titre-info-realite {border-right: 2px solid #9e8038;}
.titre-info-sticker {border-right: 2px solid #00c9ff;}
.titre-info-marche {border-right: 2px solid #6b6b6b;}
.titre-info-atelier {border-right: 2px solid #9e8038;}
.titre-info-proj {border-right: 2px solid #00c9ff;}

.titre-info-conf p{color: #ff61cf;}
.titre-info-realite p{color: #9e8038;}
.titre-info-sticker p{color: #00c9ff;}
.titre-info-marche p{color: #6b6b6b;}
.titre-info-atelier p{color: #9e8038;}
.titre-info-proj p{color: #00c9ff;}

.info-princ-conf span{color: #ff61cf;}
.info-princ-realite span{color: #9e8038;}
.info-princ-sticker span{color: #00c9ff;}
.info-princ-marche span{color: #6b6b6b;}
.info-princ-atelier span{color: #9e8038;}*/