@font-face {
  font-family: 'myarialnarrow';
  src: url('./font/arialnarrow.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'myarial';
  src: url('./font/arial.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* ------------------INVISIBLE SCROLL--------------------- */
/* Chrome, Edge, Safari */ 
*::-webkit-scrollbar { display: none; } 
/* Firefox */ 
* { scrollbar-width: none; -ms-overflow-style: none; /* IE / vieux Edge */ }

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

body{
    font-family: 'myarial';
    margin: 0;
}

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

mark {
  background-color: rgb(255, 238, 0); 
}

h2 {
    font-weight: lighter;
    font-family: "myarial";
    letter-spacing: -2px;
    font-size: 35px;
}

h2:hover {
    cursor: default;
}

h2 span { 
  display: inline-block; 
  transition: 0.3s ease;
}

h2 span:hover {
  background: linear-gradient(0deg, #ffe600, #ff4800);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transform: translateY(-5px);
}
h2 span.space { 
  width: 0.3em;
  display: inline-block;
  pointer-events: none; /* pas de hover */
}

.shine {
  background: linear-gradient(90deg, #ffe600, #ff4800, #ffe600);
  background-size: 200% 100%;
  animation: shine 2s linear infinite;

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@keyframes shine {
  0% {
    background-position: -100% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

/* ---------
 __    __  ________   ______   _______   ________  _______  
/  |  /  |/        | /      \ /       \ /        |/       \ 
$$ |  $$ |$$$$$$$$/ /$$$$$$  |$$$$$$$  |$$$$$$$$/ $$$$$$$  |
$$ |__$$ |$$ |__    $$ |__$$ |$$ |  $$ |$$ |__    $$ |__$$ |
$$    $$ |$$    |   $$    $$ |$$ |  $$ |$$    |   $$    $$< 
$$$$$$$$ |$$$$$/    $$$$$$$$ |$$ |  $$ |$$$$$/    $$$$$$$  |
$$ |  $$ |$$ |_____ $$ |  $$ |$$ |__$$ |$$ |_____ $$ |  $$ |
$$ |  $$ |$$       |$$ |  $$ |$$    $$/ $$       |$$ |  $$ |
$$/   $$/ $$$$$$$$/ $$/   $$/ $$$$$$$/  $$$$$$$$/ $$/   $$/ 
                                                          
----------- */
header {
  font-family: "myarialnarrow";
    position: fixed;
    display: flex;
    flex-direction: row;
    z-index: 1000;
}

/* ---------------------------TAMPON----------- */
.tampon {
    width: 75px;
    transform: rotate(5deg);
    padding-left: 25px;
    padding-top: 25px;
}
/* -----------------------------MENU BURGER----------- */
.bigburger {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    position: fixed;
    right: 0px;
}

.burger { 
  width: 40px;
  padding: 25px;
  cursor: pointer; 
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 30px; 
  }

.burger span { 
  height: 4px;
  background: rgba(255, 255, 255, 0); 
  width: 100%; 
  display: block; 
  border: black solid 1px;
  }

/* menu de base (caché) */
.menu {
  display: none;
  position: absolute;
  flex-direction: column;
  border: 1px dashed black;
  border-image: repeating-linear-gradient(45deg, black 0, black 5px, transparent 5px, transparent 10px) 1;
  padding: 25px;
  margin-right: 25px;
  top: 75px;
  text-align: center;
  letter-spacing: -1px;
  background-color: white;
}

/* style des liens (espaces notamment) */
.menu a {
  display: inline-block;
  padding: 0px 0px;
  margin-bottom: 10px;
  background: transparent;
  color: black;
}

.menu a:hover {
  background: linear-gradient(0deg, #ffe600, #ffa600); /* fond dégradé */
  color: black; /* on garde le texte visible */
}


/* menu visible quand classe "show" ajoutée */
.menu.show {
  display: flex;
}

#language {
  cursor: pointer;
}

#language:hover {
   background: linear-gradient(0deg, #ffe600, #ff4800);
   background-clip: text;
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent;
}




/* ----------------------------------------------------------------------
 ______  __    __  _______   ________  __    __ 
/      |/  \  /  |/       \ /        |/  |  /  |
$$$$$$/ $$  \ $$ |$$$$$$$  |$$$$$$$$/ $$ |  $$ |
  $$ |  $$$  \$$ |$$ |  $$ |$$ |__    $$  \/$$/ 
  $$ |  $$$$  $$ |$$ |  $$ |$$    |    $$  $$<  
  $$ |  $$ $$ $$ |$$ |  $$ |$$$$$/      $$$$  \ 
 _$$ |_ $$ |$$$$ |$$ |__$$ |$$ |_____  $$ /$$  |
/ $$   |$$ | $$$ |$$    $$/ $$       |$$ |  $$ |
$$$$$$/ $$/   $$/ $$$$$$$/  $$$$$$$$/ $$/   $$/   

----------- */
.sunset {
  height: 100vh;  /* prend toute la hauteur de l'écran */
  /* dégradé animé */
  background: linear-gradient(0deg, #fbff00, #FFD26F, #FFAA5B, #ff5e00, #d825c9);
  background-size: 200% 200%;
  animation: sunset 10s ease-in infinite;
}

@keyframes sunset {
  0% {
    background-position: 0% 100%; /* soleil bas */
  }
  50% {
    background-position: 0% 0%;   /* soleil haut */
  }
  100% {
    background-position: 0% 100%; /* revient doucement en bas */
  }
}

/* section de contenu normale */
.content {
  background: white;
  height: 100vh;
  color: black;
  border-top: 1px dashed black;
  border-image: repeating-linear-gradient(45deg, black 0, black 5px, transparent 5px, transparent 10px) 1;
}


.content h2 {
  color: rgb(0, 0, 0);
  padding-top: 25px;
  text-align: center;
 
}

.dvd {
  position: absolute;
  white-space: nowrap;
  font-size: 20px;
  font-family: "myarial";
  font-weight: lighter;
    letter-spacing: 0px;
  color: rgb(0, 0, 0);
  animation: bounce 6s linear infinite alternate,
             bounce2 4s linear infinite alternate;
}

/* Mouvement horizontal */
@keyframes bounce {
  from { left: 0; }
  to   { left: calc(100% - 310px); } /* largeur approximative du texte */
}

/* Mouvement vertical */
@keyframes bounce2 {
  from { top: 0; }
  to   { top: calc(100% - 25px); } /* hauteur approximative du texte */
}



/* ----------------------------------------------------------------------
 __       __   ______   _______   __    __ 
/  |  _  /  | /      \ /       \ /  |  /  |
$$ | / \ $$ |/$$$$$$  |$$$$$$$  |$$ | /$$/ 
$$ |/$  \$$ |$$ |  $$ |$$ |__$$ |$$ |/$$/  
$$ /$$$  $$ |$$ |  $$ |$$    $$< $$  $$<   
$$ $$/$$ $$ |$$ |  $$ |$$$$$$$  |$$$$$  \  
$$$$/  $$$$ |$$ \__$$ |$$ |  $$ |$$ |$$  \ 
$$$/    $$$ |$$    $$/ $$ |  $$ |$$ | $$  |
$$/      $$/  $$$$$$/  $$/   $$/ $$/   $$/ 
                                                                            
----------- */

.project-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    transition: transform 0.3s ease;
    margin: 100px;
    gap: 20px;
}

.project-item {
    width: 100%;
    overflow: hidden;
}

.project-item figure {
    width: 100%;
    aspect-ratio: 4 / 3; /* Garde l'image au bon ratio */
    margin: 0;
    display: flex; /* Centre le contenu */
    justify-content: center;
    align-items: center;
    position: relative; /* Nécessaire pour positionner l'image */

    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
} 

.project-item figure.show { 
  opacity: 1; transform: translateY(0); 
}

/*____IMG_______*/
.project-item figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease; /* Transition fluide */
    position: absolute; /* Positionne l'image au-dessus de l'emoji */
} 

/*____HOVER______*/
.project-item :hover h3{
    background: linear-gradient(0deg, #ffe600, #ff4800);
    background-clip: text;
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;
}

/*____CARTEL BOX_______*/
.project-item aside {
    padding-top: 10px; /* Pour ajouter un peu de marge intérieure */
}
/*____TITRE PROJECT_______*/
.project-item aside h3 {
    font-size: 20px;

}
/*____TAG PROJECT_______*/
.project-item aside h4 {
    font-size: 15px;
    font-family: "myarialnarrow";
}

/* -----------------------------------------------------------
 _______   __         ______   __      __  ______   _______    ______   __    __  __    __  _______  
/       \ /  |       /      \ /  \    /  |/      \ /       \  /      \ /  |  /  |/  \  /  |/       \ 
$$$$$$$  |$$ |      /$$$$$$  |$$  \  /$$//$$$$$$  |$$$$$$$  |/$$$$$$  |$$ |  $$ |$$  \ $$ |$$$$$$$  |
$$ |__$$ |$$ |      $$ |__$$ | $$  \/$$/ $$ | _$$/ $$ |__$$ |$$ |  $$ |$$ |  $$ |$$$  \$$ |$$ |  $$ |
$$    $$/ $$ |      $$    $$ |  $$  $$/  $$ |/    |$$    $$< $$ |  $$ |$$ |  $$ |$$$$  $$ |$$ |  $$ |
$$$$$$$/  $$ |      $$$$$$$$ |   $$$$/   $$ |$$$$ |$$$$$$$  |$$ |  $$ |$$ |  $$ |$$ $$ $$ |$$ |  $$ |
$$ |      $$ |_____ $$ |  $$ |    $$ |   $$ \__$$ |$$ |  $$ |$$ \__$$ |$$ \__$$ |$$ |$$$$ |$$ |__$$ |
$$ |      $$       |$$ |  $$ |    $$ |   $$    $$/ $$ |  $$ |$$    $$/ $$    $$/ $$ | $$$ |$$    $$/ 
$$/       $$$$$$$$/ $$/   $$/     $$   /     $$$$$$/  $$/   $$/  $$$$$$/   $$$$$$/  $$/   $$/ $$$$$$$/  
                                                                                                     
----------- */   

.contentplayground {
  padding: 50px 20px;
  background: white;
  color: black;
  padding-left: 50px;
  padding-right: 50px;
}

.contentplayground h2 {
  text-align: center;
  margin-top: 150px;
}

#playgroundgalery {
  margin-top: 150px;
  width: 100%;
  column-count: 5;
  column-gap: 100px;
}

/* style des items (optionnel) */
.playgroundimages {
  overflow: hidden;
  break-inside: avoid;
  margin-bottom: 100px;
}

/* images : gardent proportions et remplissent leur case */
.playgroundimages img { 
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
} 

.playgroundimages img.show { 
  opacity: 1; transform: translateY(0); 
}



/* Lightbox overlay */
.lightbox {
  display: none; /* caché par défaut */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.25);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.lightbox-img {
  max-width: 90%;
  max-height: 90%;
  filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.5));
}
.close {
  color: transparent;
}
                                                                                      
/* --------------------------------------------------------------------------
  ______   _______    ______   __    __  ________ 
 /      \ /       \  /      \ /  |  /  |/        |
/$$$$$$  |$$$$$$$  |/$$$$$$  |$$ |  $$ |$$$$$$$$/ 
$$ |__$$ |$$ |__$$ |$$ |  $$ |$$ |  $$ |   $$ |   
$$    $$ |$$    $$< $$ |  $$ |$$ |  $$ |   $$ |   
$$$$$$$$ |$$$$$$$  |$$ |  $$ |$$ |  $$ |   $$ |   
$$ |  $$ |$$ |__$$ |$$ \__$$ |$$ \__$$ |   $$ |   
$$ |  $$ |$$    $$/ $$    $$/ $$    $$/    $$ |   
$$/   $$/ $$$$$$$/   $$$$$$/   $$$$$$/     $$/    
                                                                                                                                           
----------- */

.image-about {
  height: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 100px;
    gap: 100px;
}

.image-about img {
    width: 100%;
    overflow: hidden;
}

/* ------------------------------------------------------------------------
  ______    ______   __    __  ________  ______    ______   ________ 
 /      \  /      \ /  \  /  |/        |/      \  /      \ /        |
/$$$$$$  |/$$$$$$  |$$  \ $$ |$$$$$$$$//$$$$$$  |/$$$$$$  |$$$$$$$$/ 
$$ |  $$/ $$ |  $$ |$$$  \$$ |   $$ |  $$ |__$$ |$$ |  $$/    $$ |   
$$ |      $$ |  $$ |$$$$  $$ |   $$ |  $$    $$ |$$ |         $$ |   
$$ |   __ $$ |  $$ |$$ $$ $$ |   $$ |  $$$$$$$$ |$$ |   __    $$ |   
$$ \__/  |$$ \__$$ |$$ |$$$$ |   $$ |  $$ |  $$ |$$ \__/  |   $$ |   
$$    $$/ $$    $$/ $$ | $$$ |   $$ |  $$ |  $$ |$$    $$/    $$ |   
 $$$$$$/   $$$$$$/  $$/   $$/    $$/   $$/   $$/  $$$$$$/     $$/    
                                                                     
                                                                                                             
----------- */

.image-contact {
    height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 100px;
    margin-right: 100px;
    gap: 100px;
}
.rotate1 {
  transition: transform 0.3s;
  
}

.rotate1:hover {
  transform: rotate(15deg); /* angle opposé */
}

.rotate2 {
  transition: transform 0.3s;
  
}

.rotate2:hover {
  transform: rotate(-15deg); /* angle opposé */
}

.rotate3 {
  transition: transform 0.3s;
}

.rotate3:hover {
  transform: rotate(10deg); /* angle opposé */
}


.image-contact img {
    width: 100%;
    overflow: hidden;
}
#rights {  
    display: flex;
    text-align: center;
    justify-content: center;
    color: black;
    margin-bottom: 0px;
    font-family:'myarialnarrow', sans-serif;
}

/* ----------------------------------------------------------------------
 _______   _______    ______      _____  ________   ______   ________ 
/       \ /       \  /      \    /     |/        | /      \ /        |
$$$$$$$  |$$$$$$$  |/$$$$$$  |   $$$$$ |$$$$$$$$/ /$$$$$$  |$$$$$$$$/ 
$$ |__$$ |$$ |__$$ |$$ |  $$ |      $$ |$$ |__    $$ |  $$/    $$ |   
$$    $$/ $$    $$< $$ |  $$ | __   $$ |$$    |   $$ |         $$ |   
$$$$$$$/  $$$$$$$  |$$ |  $$ |/  |  $$ |$$$$$/    $$ |   __    $$ |   
$$ |      $$ |  $$ |$$ \__$$ |$$ \__$$ |$$ |_____ $$ \__/  |   $$ |   
$$ |      $$ |  $$ |$$    $$/ $$    $$/ $$       |$$    $$/    $$ |   
$$/       $$/   $$/  $$$$$$/   $$$$$$/  $$$$$$$$/  $$$$$$/     $$/    
                                                                                                                                                                                                                                             
----------- */
/* Conteneur principal : s'assurer que les colonnes s'étirent bien */
.contentproject {
  height: 100vh; /* important pour le scroll interne */
  display: flex;
  flex-direction: row;
  align-items: stretch; /* important pour que la colonne droite prenne toute la hauteur */
}

.project-left {
  padding-right: 100px;
  width:30%;
  background-color: rgb(255, 255, 255);
  border-right: dashed black 1px;
  border-image: repeating-linear-gradient(45deg, black 0, black 5px, transparent 5px, transparent 10px) 1;
}

.cartel {
    padding-top: 250px;
    padding-left: 100px;
}

.cartel h2 {
  color: rgb(0, 0, 0);
}

.cartel h3 {
  font-family: "myarialnarrow";
}

.cartel p {
  line-height: 1.3;
  white-space: pre-line;
}

.cartel p a{
  text-decoration: underline;
}




/* FLECHES */
.navigation-buttons{
  font-family: "myarialnarrow";
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 100px;
  cursor: pointer;
}

.navigation-buttons :hover{
    background: linear-gradient(0deg, #ffe600, #ff4800);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.project-right {
  width: 60%;
  height: 100vh;
  padding-left: 100px;
  padding-right: 50px;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}

.project-right:active {
  cursor: grabbing;
}

#scroll {
  font-family: "myarialnarrow";
  opacity: 0.5;
}

.project-image {
  height: 100%;
  display: flex;
  flex-direction: row;
  gap: 150px;
  align-items: center; 
} 

.project-image img, .project-image video {
  max-height: 700px;
  max-width: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(2px 4px 5px rgba(0, 0, 0, 0.25));
}