/*  
*** A CORRIGER *** 
trier page html 404
Finir les textes et traductions "Services"
couleur pour le light mode => plus de coul tertiaire = bleu, et les logos et filter: invert 1. les logos en blanc (bandeau + portfolio img)


*** RESPONSIVE ***
PORTFOLIO RESPONSIVE : Utiliser seulement en mobile ou petit écran le portfolio avec liste des projets, pas de générations.
 

*** FINAL ***
<em> <i> <b> = sémantique
SEO
*/


/*----------------------------------------------------------------- 
INITIALISATION 
-----------------------------------------------------------------*/
:root {
  --clr-primary: rgb(0, 0, 0);
  --clr-secondary: rgb(255, 255, 255);
  --clr-tertiary: #4169E1;
  --clr-background-loading: hsla(0, 0%, 100%);

  --ft-family: 'Lack', sans-serif;

  --z-index-loading: 10000;
  --z-index-max: 1000;
  --z-index-major: 100;
  --z-index-mid: 50;
  --z-index-minor: 10;
  --z-index-min: 1;

  --transition-time: 0.3s;
  --petite-marge: 15px;
  --marge: 40px;
  --doublemarge: calc(var(--marge)*2);
  --tiers: 40vw;

  --fade-width: 15vw;
  --fade-height: 7vw;
}

body,
html {
  position: relative;
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background-color: var(--clr-primary);
  color: var(--clr-secondary);
  transition: background-color 0.3s, color 0.3s;
  font-family: 'Inter', 'Arial', sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-size: clamp(0.9rem, 2vw, 1rem);
  box-sizing: border-box;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: none;
  z-index: var(--z-index-max);
  scroll-behavior: smooth;
}

main {
  box-sizing: border-box;
  border: 1px solid var(--clr-secondary);
  width: 100%;
  height: 100%;
  position: relative;
  overflow-y: scroll;
  overflow-x: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
  pointer-events: all;
  z-index: var(--z-index-mid);
}

.light-mode {
  /* Faire en sorte d'avoir du bleu en coul secondaire. troisième couleur spéciale light.mode? revoir */
  --clr-primary: #ffffff;
  --clr-secondary: #4169E1;
  --clr-tertiary: #ffffff;
}

.client-logo-high.light-mode,
.client-logo-normal.light-mode,
.client-logo-long.light-mode,
.slider-thumb.light-mode,
#dinoCall.light-mode,
.invert-for-light {
  filter: invert(1);
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
section,
summary {
  display: block;
}

a:hover {
  color: var(--clr-secondary);
  transition: all var(--transition-time) ease;
}

button,
a {
  text-decoration: none;
}


/*----------------------------------------------------------------- 
FONTS
-----------------------------------------------------------------*/
@font-face {
  font-family: 'billy';
  src: url('../fonts/billy.woff') format('woff'),
    /* ajouter un fichier format woff2 = compatibilité */
    url('../fonts/billy.ttf') format('truetype'),
    url('../fonts/billy.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

h1,
.inter-title {
  font-family: "Inter", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(1.7rem, 2vw, 2rem);
  font-style: bold;
  text-align: center;
  padding-bottom: 1vw;
}

h2 {
  text-align: left;
}

.billy-title {
  font-family: "Billy", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(2rem, 2vw, 3rem);
  font-style: normal;
  letter-spacing: 0.1rem;
}

.billy-slogan {
  font-family: "Billy", serif;
  font-optical-sizing: auto;
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  font-style: normal;
}

nav,
.inter-navbar {
  font-family: "Inter", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(1.2rem, 2vw, 1.4rem);
  font-style: bold;
}

legend,
.inter-sous-titre {
  font-family: "Inter", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-style: bold;
}

.inter-text {
  font-family: "Inter", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  line-height: 24px;
  font-size: clamp(0.9rem, 2vw, 1.05rem);
  font-style: normal;
}

b {
  font-family: "Billy", serif;
  font-optical-sizing: auto;
  font-weight: 450;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-style: normal;
}

.inter-subtext {
  font-family: "Inter", serif;
  font-optical-sizing: auto;
  font-weight: 250;
  font-size: clamp(0.6rem, 5vw, 0.8rem);
  font-style: normal;
}

.italic {
  font-style: italic;
  font-weight: normal;
}

.list-puce {
  list-style: none;
  margin: 0;
  padding: 0;
}

.list-puce li {
  margin-bottom: 20px;
}

.dino-puce {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-bottom: 6px;
  margin-left: 10px;
  margin-right: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='white' d='M168.36,122.67q-13-9.27-18.53-14.82l8.65-3.71a109,109,0,0,0,21-9.88c7.41-6.17,9.88-11.11,9.88-16.05s-6.17-7.41-9.88-9.88c-14.82-2.47-30.87-2.47-45.69-1.24,2.47-8.64,4.94-16.06,6.17-21l1.24-2.47q9.26-27.78,3.7-37A12.59,12.59,0,0,0,137.48.4h-4.94c-8.64,1.23-19.76,12.35-30.88,32.11A160.94,160.94,0,0,0,86.84,56L69.55,43.62c-9.88-7.41-21-12.35-32.11-13.58a20.85,20.85,0,0,0-12.35,3.7,13.36,13.36,0,0,0-3.71,8.65c1.24,11.11,6.18,21,12.36,29.64a70.87,70.87,0,0,1,8.64,9.88c2.47,1.24,3.71,3.71,4.94,4.94v.54H45.06L31.5,89.65A45,45,0,0,0,7.78,99.82c-3.39,3.39-4.52,7.91-4.52,12.43q0,3.39,3.39,6.78c3.39,2.26,7.91,4.52,12.43,4.52,5.64,0,12.42,1.13,22.59,1.13H50.5C27,173.08,29.57,187.47,34.81,194a12.41,12.41,0,0,0,13.08,5.23h6.84C62.14,198,69.55,190.6,79.43,177a131.1,131.1,0,0,0,22.23-40.76c1.24-3.7,2.47-3.7,3.71-3.7a115.94,115.94,0,0,1,27.17,14.82l8.65,4.94c28.4,14.82,44.46,17.29,51.87,8.65a11.21,11.21,0,0,0,3.7-8.65C195.53,147.37,186.88,136.26,168.36,122.67Z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}



/*----------------------------------------------------------------- 
CHARGEMENT 
-----------------------------------------------------------------*/
#loading-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  background-color: var(--clr-primary);
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-index-loading);
}

/* SVG Animation */
.loading-star {
  width: 7vh;
  height: 7vh;
  ;
  margin-top: 1.25rem;
}

.rotating-svg {
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}



/*----------------------------------------------------------------- 
CURSEUR DE LA SOURIS 
-----------------------------------------------------------------*/
#cursor-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

.custom-cursor {
  position: absolute;
  border-radius: 50%;
  transition: transform 0.1s ease-out, opacity 0.2s ease;
  width: 0.625rem;
  height: 0.625rem;
  background-color: var(--clr-secondary);
  border: 1px solid var(--clr-primary);
}

.cursor-paw {
  cursor: url('/assets/images/cursor-hover-white.svg') 10 10, auto;
}

.cursor-paw.light-mode {
  cursor: url('/assets/images/cursor-hover-black.svg') 10 10, auto;
}

@media (hover: none) {
  .custom-cursor .cursor-paw {
    display: none;
  }
}



/*----------------------------------------------------------------- 
CANVAS GENERATIVE BACKGROUND
-----------------------------------------------------------------*/
.cadre-noir {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: var(--marge) solid rgb(0, 0, 0);
  pointer-events: none;
  z-index: var(--z-index-max);
}

#container {
  position: fixed;
  top: var(--marge);
  width: calc(100% - var(--doublemarge));
  height: calc(100% - var(--doublemarge));
  transition: all var(--transition-time) ease;
}

#backgroundCanvas,
#interactionCanvas {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
}

#backgroundCanvas {
  pointer-events: none;
}



/*----------------------------------------------------------------- 
ANIMATIONS TEXTE
-----------------------------------------------------------------*/
.scroll-anim {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}

.scroll-anim.visible {
  opacity: 1;
  transform: translateY(0);
}

.scroll-cascade-anim {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}

.scroll-cascade-anim.visible {
  opacity: 1;
  transform: translateY(0);
}



/*----------------------------------------------------------------- 
HEADER (Navbar + Selectors + Logo-Slogan + Social Networks)
-----------------------------------------------------------------*/
/* NAVBAR */
.bottom-btn,
.top-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  width: var(--marge);
  height: var(--marge);
  right: 0;
  pointer-events: all;
}

.burger {
  display: none;
  background: transparent;
  border: none;
  padding-right: 0;
  margin: auto, 0;
  width: var(--marge);
  height: 100%;
}

.bottom-btn:hover,
.top-btn:hover,
.burger:hover {
  filter: invert(67%) sepia(54%) saturate(2550%) hue-rotate(215deg) brightness(94%) contrast(86%);
}

#fullscreen-bottom-btn,
#fullscreen-top-btn {
  display: none;
}

.top-btn {
  top: var(--marge);
}

#lottie-arrowDown,
#lottie-arrowUp,
#lottie-arrowLeft,
#lottie-arrowRight,
#lottie-explore,
#lottie-heart,
#lottie-star,
#lottie-visibility {
  image-rendering: pixelated;
  width: var(--marge);
  height: var(--marge);
  filter: invert(1);
  transition: opacity 1s, visibility 1s, transform 1s ease-out;
  transform: scale(1);
}

.button-roll-secondary:hover #lottie-heart,
.button-roll-secondary:hover #lottie-star,
.button-roll-secondary:hover #lottie-visibility {
  filter: invert(1) invert(67%) sepia(54%) saturate(2550%) hue-rotate(215deg) brightness(94%) contrast(86%);
}

#lottie-heart,
#lottie-star,
#lottie-visibility {
  display: inline-block;
  vertical-align: middle;
  padding-right: 15px;
}

#lottie-arrowLeft {
  transform: rotate(90deg);
}

#lottie-arrowRight {
  transform: rotate(90deg);
}

#lottie-arrowDown[style*="opacity: 0"],
#lottie-arrowUp[style*="opacity: 0"] {
  transform: scale(0.8);
}

#top-anchor,
#bottom-anchor {
  position: relative;
  height: 0;
  width: 0;
  overflow: hidden;
  visibility: hidden;
}

#top-anchor {
  top: 0;
}

#bottom-anchor {
  bottom: 0;
}

nav {
  user-select: none;
}

.main-nav {
  position: fixed;
  top: 0;
  right: 0;
  padding-right: var(--marge);
  height: var(--marge);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  z-index: var(--z-index-max);
}

.main-nav .nav-links {
  display: flex;
  margin: 0;
  padding: 0;
  gap: 1.5vw;
  height: var(--marge);
}

/* STYLE DES LIENS (commun aux deux nav bars) */
.nav-links li {
  display: inline-flex;
  align-items: center;
  height: 100%;
}

.nav-links a {
  color: white;
  text-decoration: none;
  padding: 0 0.8em;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  pointer-events: auto;
}

nav li:last-child {
  margin-left: auto;
}

nav li:last-child a {
  background-color: white;
  color: black;
  padding: 0 1.2em;
}

nav a:hover {
  color: var(--clr-tertiary);
}

nav li:last-child a:hover {
  filter: none;
  background-color: var(--clr-tertiary);
  color: white;
  transition: all var(--transition-time) ease;
}

nav a.active::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-bottom: 6px;
  margin-left: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='white' d='M168.36,122.67q-13-9.27-18.53-14.82l8.65-3.71a109,109,0,0,0,21-9.88c7.41-6.17,9.88-11.11,9.88-16.05s-6.17-7.41-9.88-9.88c-14.82-2.47-30.87-2.47-45.69-1.24,2.47-8.64,4.94-16.06,6.17-21l1.24-2.47q9.26-27.78,3.7-37A12.59,12.59,0,0,0,137.48.4h-4.94c-8.64,1.23-19.76,12.35-30.88,32.11A160.94,160.94,0,0,0,86.84,56L69.55,43.62c-9.88-7.41-21-12.35-32.11-13.58a20.85,20.85,0,0,0-12.35,3.7,13.36,13.36,0,0,0-3.71,8.65c1.24,11.11,6.18,21,12.36,29.64a70.87,70.87,0,0,1,8.64,9.88c2.47,1.24,3.71,3.71,4.94,4.94v.54H45.06L31.5,89.65A45,45,0,0,0,7.78,99.82c-3.39,3.39-4.52,7.91-4.52,12.43q0,3.39,3.39,6.78c3.39,2.26,7.91,4.52,12.43,4.52,5.64,0,12.42,1.13,22.59,1.13H50.5C27,173.08,29.57,187.47,34.81,194a12.41,12.41,0,0,0,13.08,5.23h6.84C62.14,198,69.55,190.6,79.43,177a131.1,131.1,0,0,0,22.23-40.76c1.24-3.7,2.47-3.7,3.71-3.7a115.94,115.94,0,0,1,27.17,14.82l8.65,4.94c28.4,14.82,44.46,17.29,51.87,8.65a11.21,11.21,0,0,0,3.7-8.65C195.53,147.37,186.88,136.26,168.36,122.67Z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

nav li:last-child a.active::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-bottom: 6px;
  margin-left: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='white' d='M168.36,122.67q-13-9.27-18.53-14.82l8.65-3.71a109,109,0,0,0,21-9.88c7.41-6.17,9.88-11.11,9.88-16.05s-6.17-7.41-9.88-9.88c-14.82-2.47-30.87-2.47-45.69-1.24,2.47-8.64,4.94-16.06,6.17-21l1.24-2.47q9.26-27.78,3.7-37A12.59,12.59,0,0,0,137.48.4h-4.94c-8.64,1.23-19.76,12.35-30.88,32.11A160.94,160.94,0,0,0,86.84,56L69.55,43.62c-9.88-7.41-21-12.35-32.11-13.58a20.85,20.85,0,0,0-12.35,3.7,13.36,13.36,0,0,0-3.71,8.65c1.24,11.11,6.18,21,12.36,29.64a70.87,70.87,0,0,1,8.64,9.88c2.47,1.24,3.71,3.71,4.94,4.94v.54H45.06L31.5,89.65A45,45,0,0,0,7.78,99.82c-3.39,3.39-4.52,7.91-4.52,12.43q0,3.39,3.39,6.78c3.39,2.26,7.91,4.52,12.43,4.52,5.64,0,12.42,1.13,22.59,1.13H50.5C27,173.08,29.57,187.47,34.81,194a12.41,12.41,0,0,0,13.08,5.23h6.84C62.14,198,69.55,190.6,79.43,177a131.1,131.1,0,0,0,22.23-40.76c1.24-3.7,2.47-3.7,3.71-3.7a115.94,115.94,0,0,1,27.17,14.82l8.65,4.94c28.4,14.82,44.46,17.29,51.87,8.65a11.21,11.21,0,0,0,3.7-8.65C195.53,147.37,186.88,136.26,168.36,122.67Z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  filter: brightness(0) saturate(100%);

}

nav li:last-child:hover a.active::after {
  filter: brightness(100%) saturate(0);
}

/* NAVIGATION SECONDAIRE (mobile) */
.footer-mobile {
  display: none;
}

/* SELECTEURS MODES */
.language-theme-selector {
  user-select: none;
  position: fixed;
  left: 0;
  bottom: var(--marge);
  display: flex;
  flex-direction: column-reverse;
  gap: 2em;
  width: var(--marge);
}

.selector-group {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 4px;
}

.selector-btn {
  width: clamp(1rem, 1vw, 1.2rem);
  height: clamp(1rem, 1vw, 1.2rem);
  padding: 0;
  border: 1px solid white;
  background-color: black;
  pointer-events: auto;
}

.selector-btn:hover {
  background-color: var(--clr-tertiary);
  transform: scale(1.2);
  transition: all var(--transition-time) ease;
}

.selector-btn.active {
  background-color: white;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 388.3 400'%3E%3Cpath fill='black' d='M270.8,181.8l35.7-49.6c7.6-13.9,13.4-28.8,17.4-44.8c1.8-21.1-2.5-33.7-10.7-43.5c-8.2-9.8-22.3-7.1-32.3-7.4c-23.3,11-46.1,35.5-65.6,55.3c-8.5,8.5-16.5,17.3-24,26.7L95.7,236.4l-18.1,20.8c-12.4,12.5-19.9,29.5-21.4,48.7c0.1,10.7,5.8,21.1,13.2,30c3.7,4.5,9.3,7.5,16.6,9.1c9.2,0.3,20.3-0.6,27.6-5.9c9-6.9,21.8-12.7,38.3-25l29-27c8.8-8.2,17-17,24.6-26l53-63.6C263.1,192.3,267,187,270.8,181.8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 70%;
}

.selector {
  writing-mode: vertical-lr;
  text-orientation: mixed;
  transform: rotate(180deg);
  white-space: nowrap;
  margin-bottom: 5px;
  color: white;
}

/* HEADER STICKY */
.header-sticky {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 var(--petite-marge);
  z-index: var(--z-index-min);
  pointer-events: none;
}

.logo-slogan-container {
  padding-top: var(--petite-marge);
  display: flex;
  align-items: flex-start;
  flex: 1;
}

.logo-button {
  position: fixed;
  z-index: var(--z-index-max);
  border-radius: 100%;
  width: clamp(6em, 12vw, 10em);
  height: clamp(6em, 12vw, 10em);
  margin-top: var(--petite-marge);
  margin-left: var(--petite-marge);
  border: none;
  background-color: transparent;
  pointer-events: all;
}

.logo {
  margin-right: var(--marge);
  position: absolute;
  width: clamp(9em, 15vw, 12em);
  height: clamp(9em, 15vh, 12em);
}

.logo svg {
  width: 100%;
  height: auto;
}

body.light-mode .logo svg {
  filter: brightness(0) saturate(100%);
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes rotate-reverse {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-360deg);
  }
}

.rotate-dino {
  transform-origin: 50% 50%;
  animation: rotate 12s linear infinite;
  filter: invert(67%) sepia(54%) saturate(2550%) hue-rotate(215deg) brightness(94%) contrast(86%);
}

.rotate-dino-exit {
  transform-origin: 50% 50%;
  animation: rotate-reverse 2s linear forwards;
  filter: none;
}

.slogan-mobile {
  display: none;
  margin-top: 0.3em;
  padding-left: clamp(6em, 20vw, 7em);
}

.slogan {
  padding-left: clamp(7em, 7vw, 12em);
  height: 100%;
  position: flex;
  margin-left: var(--petite-marge);
  padding-bottom: var(--marge);
  line-height: 0.4;
}

/* SOCIAL */
.social-links {
  padding-top: var(--petite-marge);
  padding-right: var(--petite-marge);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: auto;
  user-select: none;
  pointer-events: all;
}

.social-links p {
  margin-bottom: 0;
}

.social-links a {
  color: var(--clr-secondary);
  text-decoration: none;
}

.social-links a:hover {
  color: var(--clr-tertiary);
  transition: all var(--transition-time) ease;
}

#lottie-mail,
#lottie-behance,
#lottie-instagram,
#lottie-facebook,
#lottie-linkedin,

#lottie-mail-footer,
#lottie-behance-footer,
#lottie-instagram-footer,
#lottie-facebook-footer,
#lottie-linkedin-footer {
  image-rendering: pixelated;
  filter: invert(1);
  width: 25px;
  height: 25px;
  display: inline-block;
  vertical-align: middle;
  padding-right: 10px;
}

.social-links a:hover #lottie-mail,
.social-links a:hover #lottie-instagram,
.social-links a:hover #lottie-facebook,
.social-links a:hover #lottie-behance,
.social-links a:hover #lottie-linkedin,
.social-links-footer a:hover #lottie-mail-footer,
.social-links-footer a:hover #lottie-instagram-footer,
.social-links-footer a:hover #lottie-facebook-footer,
.social-links-footer a:hover #lottie-behance-footer,
.social-links-footer a:hover #lottie-linkedin-footer {
  filter: invert(1) invert(67%) sepia(54%) saturate(2550%) hue-rotate(215deg) brightness(94%) contrast(86%);
}



/*----------------------------------------------------------------- 
FOOTER
-----------------------------------------------------------------*/
footer {
  user-select: none;
  position: fixed;
  width: calc(100% - var(--doublemarge));
  height: var(--marge);
  left: var(--marge);
  right: var(--marge);
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  white-space: nowrap;
  color: white;
  pointer-events: all;
  z-index: var(--z-index-max);
}

.footer-copyright {
  position: fixed;
  left: var(--marge);
}

.footer-ml {
  position: fixed;
  right: var(--marge);
  text-align: right;
}

.footer-ml a {
  color: #ffffff;
  text-decoration: none;
}

.footer-ml a:hover {
  color: var(--clr-tertiary);
}



/*----------------------------------------------------------------- 
000 - INTRODUCTION PAGE
-----------------------------------------------------------------*/
#intro {
  position: fixed;
  bottom: var(--marge);
  display: flex;
  align-items: flex-end;
  width: calc(100% - var(--doublemarge));
  margin: var(--marge) auto;
  box-sizing: border-box;
}

#raccourcis {
  margin: var(--marge);
  margin-bottom: calc(10px + var(--marge));
  width: 30%;
  margin-right: auto;
}

#raccourcis h2 {
  text-align: left;
}

#description {
  margin-right: var(--marge);
  margin-bottom: var(--marge);
  padding-bottom: 0;
  width: 20%;
  text-align: right;
}

#description p {
  margin: 0;
}

.button-void {
  width: 100%;
  color: var(--clr-secondary);
  background-color: rgba(var(--clr-primary), 0.1);
  backdrop-filter: blur(2px);
  border: 1px solid var(--clr-secondary);
  display: inline-block;
  text-align: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0.7rem 1rem;
  transition: var(--transition-time) ease;
}

.button-void:hover {
  background-color: var(--clr-tertiary);
  color: var(--clr-secondary);
  transform: scale(1.05, 1);
  transition: var(--transition-time) ease;
}

/* main BANDEAU */
.splide__container {
  box-sizing: border-box;
  position: relative
}

.splide__list {
  backface-visibility: hidden;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important
}

.splide.is-initialized:not(.is-active) .splide__list {
  display: block
}

.splide {
  position: relative;
  visibility: hidden
}

.splide.is-initialized,
.splide.is-rendered {
  visibility: visible
}

.splide__slide {
  backface-visibility: hidden;
  box-sizing: border-box;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  list-style-type: none !important;
  margin: 0;
  position: relative;
  padding: 0 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.splide__slide img {
  vertical-align: bottom
}

.splide__sr {
  clip: rect(0 0 0 0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px
}

.splide__toggle.is-active .splide__toggle__play,
.splide__toggle__pause {
  display: none
}

.splide__toggle.is-active .splide__toggle__pause {
  display: inline
}

@keyframes splide-loading {
  0% {
    transform: rotate(0)
  }

  to {
    transform: rotate(1turn)
  }
}

.client-logo_wrapper {
  pointer-events: auto;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  overflow: hidden;
  padding-top: var(--petite-marge);
  padding-bottom: var(--petite-marge);
}

/* bandeau- logos sizes */
.client-logo-high {
  height: clamp(50px, 5.5vh, 5.5vh);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(1) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.client-logo-normal {
  height: clamp(40px, 4vh, 4vh);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(1) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.client-logo-long {
  height: clamp(40px, 3vh, 3vh);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(1) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

body.light-mode .client-logo-normal {
  filter: brightness(0) saturate(100%);
}

/* bandeau- fades */
.fade-overlay-bandeau {
  position: absolute;
  top: 1px;
  bottom: 0%;
  width: var(--fade-width);
  z-index: var(--z-index-min);
  pointer-events: none;
}

.fade-left {
  background: linear-gradient(to right, var(--clr-primary), transparent);
}

.fade-right {
  right: 0;
  background: linear-gradient(to left, var(--clr-primary), transparent);
}



/*----------------------------------------------------------------- 
111 - PORTFOLIO PAGE
-----------------------------------------------------------------*/
#portfolioCanvas {
  box-sizing: border-box;
  position: fixed;
  top: var(--marge);
  left: var(--marge);
  right: var(--marge);
  bottom: var(--marge);
  width: calc(100% - var(--doublemarge));
  height: calc(100% - var(--doublemarge));
  transition: all var(--transition-time) ease;
  pointer-events: all;

  border: 1px solid var(--clr-secondary);
}

#category-bar {
  position: fixed;
  bottom: var(--marge);
  left: var(--marge);
  right: var(--marge);
  background-color: var(--clr-primary);
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: center;
  align-content: flex-end;
  padding: 0;
  z-index: var(--z-index-major);
  overflow: hidden;
  pointer-events: all;
}

.category-btn {
  position: relative;
  background-color: transparent;
  border: 1px solid var(--clr-secondary);
  border-left: 0px;
  color: var(--clr-secondary);
  height: var(--marge);
  min-width: fit-content;
  flex: 1 0 auto;
  overflow: hidden;
  transition: color var(--transition-time) ease;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-right: 20px;
  padding-left: 20px;
}

.category-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: var(--clr-tertiary);
  transition: all 0.4s cubic-bezier(0.7, 0, 0.2, 1);
  z-index: -1;
}

.category-btn:hover {
  color: var(--clr-secondary);
}

.category-btn:hover::before {
  left: 0;
}

.category-btn.active {
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  color: var(--clr-primary);
  box-sizing: border-box;
  border-right: 1px solid var(--clr-primary);
}

.category-btn.active::before {
  left: 0;
  background-color: var(--clr-secondary);
}

.category-btn.active:hover {
  color: var(--clr-tertiary);
}

.category-btn:active {
  transform: scale(0.95);
  transition: transform 0.1s ease;
}

#imageInfo {
  padding: 10px 14px;
  margin-bottom: var(--petite-marge);
  background-color: var(--clr-primary);
  border: 1px solid var(--clr-secondary);
  color: var(--clr-secondary);
  display: none;
}

#imageInfo.show {
  display: block;
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Sliders */
.sliderInfo-container {
  user-select: none;
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: right;
  bottom: calc(var(--petite-marge) + var(--marge));
  left: var(--petite-marge);
  pointer-events: none;
}

label {
  cursor: none;
  display: flex;
  gap: 8px;
}

.slider-all {
  position: relative;
  width: fit-content;
  display: inline-block;

}

.slider-horizontal {
  display: flex;
  align-items: center;
  gap: 10px;
}

.slider-line {
  flex-shrink: 0;
  width: 120px;
  position: relative;
}

.slider-track {
  position: absolute;
  top: -5px;
  left: 10px;
  right: 0;
  height: 8px;
  border-radius: 4px;
  border: 1px solid var(--clr-secondary);
  pointer-events: auto;
  z-index: var(--z-index-mid);
}

.slider-thumb {
  position: absolute;
  width: 17px;
  height: 17px;
  top: -9px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='white' d='M168.36,122.67q-13-9.27-18.53-14.82l8.65-3.71a109,109,0,0,0,21-9.88c7.41-6.17,9.88-11.11,9.88-16.05s-6.17-7.41-9.88-9.88c-14.82-2.47-30.87-2.47-45.69-1.24,2.47-8.64,4.94-16.06,6.17-21l1.24-2.47q9.26-27.78,3.7-37A12.59,12.59,0,0,0,137.48.4h-4.94c-8.64,1.23-19.76,12.35-30.88,32.11A160.94,160.94,0,0,0,86.84,56L69.55,43.62c-9.88-7.41-21-12.35-32.11-13.58a20.85,20.85,0,0,0-12.35,3.7,13.36,13.36,0,0,0-3.71,8.65c1.24,11.11,6.18,21,12.36,29.64a70.87,70.87,0,0,1,8.64,9.88c2.47,1.24,3.71,3.71,4.94,4.94v.54H45.06L31.5,89.65A45,45,0,0,0,7.78,99.82c-3.39,3.39-4.52,7.91-4.52,12.43q0,3.39,3.39,6.78c3.39,2.26,7.91,4.52,12.43,4.52,5.64,0,12.42,1.13,22.59,1.13H50.5C27,173.08,29.57,187.47,34.81,194a12.41,12.41,0,0,0,13.08,5.23h6.84C62.14,198,69.55,190.6,79.43,177a131.1,131.1,0,0,0,22.23-40.76c1.24-3.7,2.47-3.7,3.71-3.7a115.94,115.94,0,0,1,27.17,14.82l8.65,4.94c28.4,14.82,44.46,17.29,51.87,8.65a11.21,11.21,0,0,0,3.7-8.65C195.53,147.37,186.88,136.26,168.36,122.67Z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  transition: background-color var(--transition-time) ease;
  animation: rotate 12s linear infinite;
  pointer-events: auto;
  z-index: var(--z-index-mid);
}

.slider-horizontal .valeur {
  flex-shrink: 0;
  min-width: 30px;
}

/* remplissage à gauche (bleu) */
.slider-fill {
  position: absolute;
  top: -4px;
  left: 10px;
  height: 8px;
  width: 0;
  background: var(--clr-tertiary);
  border-radius: 4px;
  z-index: 1;
}

#dinoCall-container {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#dinoCall {
  pointer-events: all;
  z-index: var(--z-index-major);
  position: absolute;
  transform: translate(-50%, -50%);
  top: 45vh;
  left: 50%;
  width: clamp(8em, 12vw, 12em);
  height: auto;
  filter: none;
}

#dinoCall:hover {
  filter: invert(67%) sepia(54%) saturate(2550%) hue-rotate(215deg) brightness(94%) contrast(86%);
}



/*----------------------------------------------------------------- 
111 BIS - PORTFOLIO LIST PAGE
-----------------------------------------------------------------*/
.cache-list {
  display: none !important;
}

.toggle-btn {
  position: fixed;
  pointer-events: all;
  height: var(--marge);
  width: clamp(7em, 10vw, 10em);
  top: 0;
  left: var(--marge);
  padding-left: var(--marge);
  padding: 5px;
  border: none;
  background-color: var(--clr-secondary);
}

.toggle-btn:hover {
  background: var(--clr-tertiary);
  color: var(--clr-secondary);
  transition: all var(--transition-time) ease;
}

#galerie-projets {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--marge);
  width: 100%;
  margin: 0 auto;
  width: calc(100% - 2*var(--marge));
}

.projet-bloc {
  aspect-ratio: 1 / 0.618;
  height: auto;
  display: block;
  position: relative;
  text-decoration: none;
  overflow: hidden;
  border-radius: var(--petite-marge);
  border: 1px solid var(--clr-secondary);
}

.media-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--marge);
  box-sizing: border-box;

  background-color: antiquewhite;
  /* a supp !!*/
}

.media-container:hover {
  /* A FINIR !!!    transition: all var(--transition-time) ease;*/
  transition: all var(--transition-time) ease;
}

.media-main,
.media-hover {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: 100%;
  height: auto;
  transition: all var(--transition-time) ease;
}

.media-main {
  opacity: 1;
  z-index: 1;
}

.media-hover {
  opacity: 0;
  z-index: 2;
}

.projet-bloc:hover .media-main {
  opacity: 0;
}

.projet-bloc:hover .media-hover {
  opacity: 1;
}

/* Pause vidéo au hover */
.projet-bloc:not(:hover) .media-hover,
.projet-bloc:not(:hover) .media-main {
  animation-play-state: paused;
}



/*----------------------------------------------------------------- 
XXX - PROJET PAGE
-----------------------------------------------------------------*/
.contenu-project {
  position: absolute;
  top: 0;
  left: calc((100% - 1.5*var(--tiers)) / 2);
  width: calc(1.5*var(--tiers));
  background-color: rgba(var(--clr-primary), 0.1);
  backdrop-filter: blur(4px);
  border-left: 1px solid var(--clr-secondary);
  border-right: 1px solid var(--clr-secondary);
}

.portfolio-project {
  top: 0;
  width: 100%;
}

.project-article {
  padding: 0 calc(2*var(--marge));
}

/*----- Nav des projets (footer) 
- corriger le gap du footer entre textes=noms et chevrons
- responsive: après les outils en mobile = demi espace plutot. niveau taille d'espace.
 -----*/
.project-nav {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
}

.project-home {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--marge);
  height: var(--marge);
}

.project-prev,
.project-next {
  display: flex;
  padding: var(--marge);
  color: var(--clr-secondary);
  transition: color var(--transition-time) ease;
  gap: 0.6rem;
  flex-direction: row;
}

.project-prev span,
.project-next span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  padding-top: 6px;
  max-width: 200px;
}

.project-next span {
  text-align: right;
}

.project-prev:hover,
.project-next:hover,
.project-home:hover {
  filter: invert(67%) sepia(54%) saturate(2550%) hue-rotate(215deg) brightness(94%) contrast(86%);
  transition: color var(--transition-time) ease;
}



/*----------------------------------------------------------------- 
222 - ABOUT PAGE
-----------------------------------------------------------------*/
.kevin-herbert {
  display: none;
  position: fixed;
  left: calc(var(--marge) + 1px);
  bottom: calc(var(--marge) + 1px);
  max-width: 18vw;
  height: auto;
}

.contenu {
  position: absolute;
  top: 0;
  left: calc((100% - var(--tiers)) / 2);
  width: var(--tiers);
  padding: 0 4%;
  padding-top: 10%;
  background-color: rgba(var(--clr-primary), 0.1);
  backdrop-filter: blur(4px);
  border-left: 1px solid var(--clr-secondary);
  border-right: 1px solid var(--clr-secondary);
  box-sizing: border-box;
}

.fade-overlay {
  position: fixed;
  top: calc(1px + var(--marge));
  left: calc((100% - var(--tiers)) / 2);
  width: var(--tiers);
  height: 100vh;
  pointer-events: none;
  z-index: var(--z-index-mid);
}

.fade-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--fade-height);
  background: linear-gradient(to bottom, var(--clr-primary), transparent);
}

.fade-overlay::after {
  content: '';
  position: absolute;
  bottom: calc(2px + var(--doublemarge));
  left: 0;
  right: 0;
  height: var(--fade-height);
  background: linear-gradient(to top, var(--clr-primary), transparent);
}

.dino-stars {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='white' d='M168.36,122.67q-13-9.27-18.53-14.82l8.65-3.71a109,109,0,0,0,21-9.88c7.41-6.17,9.88-11.11,9.88-16.05s-6.17-7.41-9.88-9.88c-14.82-2.47-30.87-2.47-45.69-1.24,2.47-8.64,4.94-16.06,6.17-21l1.24-2.47q9.26-27.78,3.7-37A12.59,12.59,0,0,0,137.48.4h-4.94c-8.64,1.23-19.76,12.35-30.88,32.11A160.94,160.94,0,0,0,86.84,56L69.55,43.62c-9.88-7.41-21-12.35-32.11-13.58a20.85,20.85,0,0,0-12.35,3.7,13.36,13.36,0,0,0-3.71,8.65c1.24,11.11,6.18,21,12.36,29.64a70.87,70.87,0,0,1,8.64,9.88c2.47,1.24,3.71,3.71,4.94,4.94v.54H45.06L31.5,89.65A45,45,0,0,0,7.78,99.82c-3.39,3.39-4.52,7.91-4.52,12.43q0,3.39,3.39,6.78c3.39,2.26,7.91,4.52,12.43,4.52,5.64,0,12.42,1.13,22.59,1.13H50.5C27,173.08,29.57,187.47,34.81,194a12.41,12.41,0,0,0,13.08,5.23h6.84C62.14,198,69.55,190.6,79.43,177a131.1,131.1,0,0,0,22.23-40.76c1.24-3.7,2.47-3.7,3.71-3.7a115.94,115.94,0,0,1,27.17,14.82l8.65,4.94c28.4,14.82,44.46,17.29,51.87,8.65a11.21,11.21,0,0,0,3.7-8.65C195.53,147.37,186.88,136.26,168.36,122.67Z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  animation: rotate 12s linear infinite;
  vertical-align: middle;
  margin: 10px;
  margin-bottom: 15px;
}

.dino-stars.light-mode {
  filter: brightness(0) saturate(100%);
}

.no-break {
  display: inline-flex;
  white-space: nowrap;
}

.no-break .dino-stars {
  margin-top: 5px;
}


.espace {
  padding-bottom: 250px;
}

.demi-espace {
  padding-bottom: 100px;
}

.contenu-end-espace {
  padding-bottom: 250px;
}



/*----------------------------------------------------------------- 
333 - SERVICES PAGE
-----------------------------------------------------------------*/
p {
  margin-bottom: 3vh;
}

.button-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.button-roll,
.button-roll-secondary {
  z-index: var(--z-index-mid);
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-left: var(--marge);
  padding-right: var(--marge);
  margin-bottom: 8px;
  background-color: var(--clr-secondary);
  border: none;
}

.button-roll-secondary {
  color: var(--clr-secondary);
  border-top: 1px solid var(--clr-secondary);
  background-color: transparent;
  box-sizing: border-box;
  margin: 0px;
}

.button-roll-secondary .dino-star {
  filter: invert(1);
}

.last {
  border-bottom: 1px solid var(--clr-secondary);
}

.button-roll:hover,
.button-roll-secondary:hover {
  color: var(--clr-tertiary);
}

.button-roll:hover .dino-star,
.button-roll-secondary:hover .dino-star {
  filter: invert(1) invert(67%) sepia(54%) saturate(2550%) hue-rotate(215deg) brightness(94%) contrast(86%);
}

.dino-star {
  display: inline-block;
  width: 20px;
  min-width: 20px;
  max-width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M168.36,122.67q-13-9.27-18.53-14.82l8.65-3.71a109,109,0,0,0,21-9.88c7.41-6.17,9.88-11.11,9.88-16.05s-6.17-7.41-9.88-9.88c-14.82-2.47-30.87-2.47-45.69-1.24,2.47-8.64,4.94-16.06,6.17-21l1.24-2.47q9.26-27.78,3.7-37A12.59,12.59,0,0,0,137.48.4h-4.94c-8.64,1.23-19.76,12.35-30.88,32.11A160.94,160.94,0,0,0,86.84,56L69.55,43.62c-9.88-7.41-21-12.35-32.11-13.58a20.85,20.85,0,0,0-12.35,3.7,13.36,13.36,0,0,0-3.71,8.65c1.24,11.11,6.18,21,12.36,29.64a70.87,70.87,0,0,1,8.64,9.88c2.47,1.24,3.71,3.71,4.94,4.94v.54H45.06L31.5,89.65A45,45,0,0,0,7.78,99.82c-3.39,3.39-4.52,7.91-4.52,12.43q0,3.39,3.39,6.78c3.39,2.26,7.91,4.52,12.43,4.52,5.64,0,12.42,1.13,22.59,1.13H50.5C27,173.08,29.57,187.47,34.81,194a12.41,12.41,0,0,0,13.08,5.23h6.84C62.14,198,69.55,190.6,79.43,177a131.1,131.1,0,0,0,22.23-40.76c1.24-3.7,2.47-3.7,3.71-3.7a115.94,115.94,0,0,1,27.17,14.82l8.65,4.94c28.4,14.82,44.46,17.29,51.87,8.65a11.21,11.21,0,0,0,3.7-8.65C195.53,147.37,186.88,136.26,168.36,122.67Z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin: 10px;
  transition: background-image 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.button-roll.active .dino-star,
.button-roll-secondary.active .dino-star {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 388.3 400'%3E%3Cpath fill='black' d='M270.8,181.8l35.7-49.6c7.6-13.9,13.4-28.8,17.4-44.8c1.8-21.1-2.5-33.7-10.7-43.5c-8.2-9.8-22.3-7.1-32.3-7.4c-23.3,11-46.1,35.5-65.6,55.3c-8.5,8.5-16.5,17.3-24,26.7L95.7,236.4l-18.1,20.8c-12.4,12.5-19.9,29.5-21.4,48.7c0.1,10.7,5.8,21.1,13.2,30c3.7,4.5,9.3,7.5,16.6,9.1c9.2,0.3,20.3-0.6,27.6-5.9c9-6.9,21.8-12.7,38.3-25l29-27c8.8-8.2,17-17,24.6-26l53-63.6C263.1,192.3,267,187,270.8,181.8z'/%3E%3C/svg%3E");
  transform: rotate(45deg);
}

.skill-content {
  width: 100%;
  background-color: rgba(var(--clr-primary), 0.1);
  backdrop-filter: blur(2px);
  color: var(--clr-secondary);
  box-sizing: border-box;
  margin-top: -8px;
  margin-bottom: 8px;
  max-height: 0;
  transition: max-height 0.5s ease-out;
}

.skill-content p {
  margin-bottom: 0;
}

.button-roll.active+.skill-content {
  max-height: 1000px;
  transition: max-height 1.5s ease-in;
  border: 1px solid var(--clr-secondary);
}

.skill-content p {
  padding: var(--marge);
  padding-top: 0;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

@keyframes reveal {
  from {
    clip-path: inset(0 100% 0 0);
  }

  to {
    clip-path: inset(0 0 0 0);
  }
}

.skill-button.active+.skill-content p {
  opacity: 1;
  transform: translateY(0);
}

.skill-content.closing {
  max-height: 0 !important;
  transition: max-height 0.5s ease-in-out;
}

#travail .button-void {
  margin-bottom: 8px;
}

.button-call {
  color: var(--clr-primary);
  background-color: var(--clr-secondary);
  display: inline-block;
  text-align: center;
  justify-content: center;
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
  width: 100%;
}

.button-call:hover {
  background-color: var(--clr-secondary);
  color: var(--clr-tertiary);
}

#img-portfolio {
  width: 8vw;
}

/* "Mes Outils" - Grille de logos */
.gallery-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.svg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.svg-item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
  transition: transform var(--transition-time) ease;
}

.svg-item:hover {
  transform: scale(1.2);
  transition: transform var(--transition-time) none;
  filter: invert(67%) sepia(54%) saturate(2550%) hue-rotate(215deg) brightness(94%) contrast(86%);
}

@media (max-width: 768px) {
  .svg-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
  }
}

@media (max-width: 480px) {
  .svg-grid {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }
}



/*----------------------------------------------------------------- 
444 - CONTACT PAGE
-----------------------------------------------------------------*/
fieldset {
  border: none;
  margin: var(--marge) auto;
  margin-top: 0;
}

/* Champs du formulaire = custom-input */
form input,
form textarea {
  scrollbar-width: none;
  width: 100%;
  display: flex;
  background-color: var(--clr-primary);
  border: 1px solid var(--clr-secondary);
  color: var(--clr-secondary);
  padding: 12px;
  margin-bottom: 8px;
  box-sizing: border-box;
}

input:focus,
textarea:focus {
  outline: none;
  border: 1px solid var(--clr-tertiary);
  transition: border var(--transition-time) ease;
}

.custom-input {
  background-color: var(--clr-primary);
  color: grey;
}

.input.filled,
.custom-input-bis.filled {
  background-color: var(--clr-secondary);
  color: var(--clr-primary);
}

.input.filled {
  background-color: var(--clr-secondary);
  color: var(--clr-primary);
}

.custom-input.filled {
  background-color: var(--clr-secondary);
  color: var(--clr-secondary);
}

.custom-input::-webkit-datetime-edit,
.custom-input::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

textarea.custom-input-bis {
  resize: vertical;
  min-height: 80px;
  max-height: 600px;
}

.form-row {
  display: flex;
  gap: 8px;
}

.form-row input {
  width: calc(50% - 4px);
}

.checkbox-container {
  display: flex;
  flex-direction: column;
}

.selectorBis {
  cursor: none;
  display: flex;
  align-items: center;
  gap: var(--petite-marge);
  padding-top: 8px;
  padding-left: 8px;
}

.selectorBis-checkbox {
  display: inline-block;
  width: clamp(1rem, 1vw, 1.2rem);
  height: clamp(1rem, 1vw, 1.2rem);
  border: 1px solid var(--clr-secondary);
  background: var(--clr-primary);
}

.selectorBis:hover .selectorBis-checkbox {
  background: var(--clr-tertiary);
  transform: scale(1.2);
}

.selectorBis input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}

.selectorBis input:checked+.selectorBis-checkbox {
  background: var(--clr-secondary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 388.3 400'%3E%3Cpath fill='black' d='M270.8,181.8l35.7-49.6c7.6-13.9,13.4-28.8,17.4-44.8c1.8-21.1-2.5-33.7-10.7-43.5c-8.2-9.8-22.3-7.1-32.3-7.4c-23.3,11-46.1,35.5-65.6,55.3c-8.5,8.5-16.5,17.3-24,26.7L95.7,236.4l-18.1,20.8c-12.4,12.5-19.9,29.5-21.4,48.7c0.1,10.7,5.8,21.1,13.2,30c3.7,4.5,9.3,7.5,16.6,9.1c9.2,0.3,20.3-0.6,27.6-5.9c9-6.9,21.8-12.7,38.3-25l29-27c8.8-8.2,17-17,24.6-26l53-63.6C263.1,192.3,267,187,270.8,181.8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 70%;
}

.remarque {
  display: none;
}

.input,
.custom-input-bis,
textarea {
  border: 1px solid var(--clr-secondary);
}

/* Bordure rouge uniquement après soumission ratée du formulaire */
.form-submit-attempted .input:invalid,
.form-submit-attempted .custom-input-bis:invalid,
.form-submit-attempted textarea:invalid {
  border-color: #ff4444;
}

/* Style du message d'erreur */
.error-message {
  display: none;
  color: #ff4444;
  font-size: 0.85rem;
  margin-top: 4px;
  margin-bottom: 10px;
}

.error-message.active {
  display: block;
}

/* Bouton envoyer + spinner */
#submitButton.loading {
  pointer-events: none;
  opacity: .8;
}

.button-loader {
  display: none;
  width: 18px;
  height: 18px;
  margin-left: 12px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: var(--clr-secondary);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

button.loading .button-loader {
  display: inline-block;
}

button.loading .button-text {
  opacity: .8;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Style de notification d'erreur (hors formulaire)*/
.form-notification {
  margin: 0 0 25px;
  padding: 18px;
  border-radius: 10px;
  font-size: .95rem;
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: .35s;
}

.form-notification.show {
  opacity: 1;
  transform: translateY(0);
}

.form-notification.success {
  background: var(--clr-secondary);
  color: #0b7d44;
  border-left: 4px solid #0b7d44;
}

.form-notification.error {
  background: var(--clr-secondary);
  color: #d40000;
  border-left: 4px solid #d40000;
}



/*----------------------------------------------------------------- 
ERROR 404 PAGE
-----------------------------------------------------------------*/
#error-not-happy-container {
  pointer-events: none;
  z-index: var(--z-index-mid);
  position: absolute;
  top: calc(var(--marge) + 1px);
  left: calc(var(--marge) + 1px);
  right: var(--marge);
  bottom: var(--marge);
  width: calc(100% - var(--doublemarge) - 2px);
  height: calc(100% - var(--doublemarge) - 2px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#error-not-happy {
  margin-top: 8vh;
  pointer-events: all;
  z-index: var(--z-index-major);
  width: clamp(20em, 25vw, 50em);
  height: auto;
}

#error-not-happy-container h1 {
  margin-top: 2vh;
  width: clamp(30em, 35vw, 100em);
  text-align: center;
}



/*----------------------------------------------------------------- 
    !!!!!!!!!!!!!!       MEDIA QUERIES       !!!!!!!!!!!!!!       
-----------------------------------------------------------------*/
/*--------------- Adaptation pour tablette grand ---------------*/
@media screen and (max-width: 1382px) {
  :root {
    --marge: 35px;
    --petite-marge: 12px;
    --tiers: 50vw;
  }

  .header-sticky {
    padding-right: 0;
  }

  /* 000 INTRODUCTION PAGE */
  #description {
    width: 40%;
  }

  .social-links {
    padding-right: var(--marge);
  }

  /* 111 PORTFOLIO PAGE */
  .sliderInfo-container {
    bottom: calc(var(--petite-marge) + var(--doublemarge));
  }

  .contenu-project {
    left: calc((100% - var(--tiers)) / 2);
    width: var(--tiers);
  }

  #galerie-projets {
    grid-template-columns: 1fr;
    gap: var(--marge);
    width: calc(100% - 4*(var(--marge)));
    margin: 0 calc(2*var(--marge));
  }

  .projet-bloc {
    width: 100%;
    aspect-ratio: 1 / 0.618;
    height: auto;
  }

  /* Autre */
  .espace {
    padding-bottom: 180px;
  }

  .demi-espace {
    padding-bottom: 50px;
  }

  #img-portfolio {
    width: 10vw;
  }
}

/*--------------- Adaptation pour tablette petit ---------------*/
@media screen and (max-width: 992px) {
  :root {
    --marge: 30px;
    --petite-marge: 10px;
    --fade-width: 15vw;
    --fade-height: 12vw;
  }

  .navbar {
    padding-right: var(--marge);
    height: var(--marge);
  }

  /* LOGO-SLOGAN */
  .header-sticky {
    z-index: var(--z-index-max);
    position: relative;
  }

  .slogan-mobile {
    display: block;
    font-size: 1.4rem;
    height: 100%;
    width: 100%;
    position: flex;
    margin-left: var(--marge);
    padding-bottom: var(--marge);
    line-height: 0.4;
  }

  .logo-button {
    width: 10em;
    height: 10em;
  }

  .logo {
    width: clamp(12em, 15vw, 12em);
    height: clamp(12em, 15vw, 12em);
  }

  /* CONTENU (About, Services, Contact) */
  .contenu {
    width: calc(100vw - var(--doublemarge));
    left: 0;
    padding: var(--doublemarge);
    border: none;
    padding-top: clamp(30vh, 35vw, 300px);
  }

  .fade-overlay {
    width: calc(100vw - var(--doublemarge) - 2px);
    left: calc(1px + var(--marge));
  }

  /* 000 INTRODUCTION PAGE */
  .slogan {
    display: none;
  }

  #description {
    margin-bottom: calc(5px + var(--marge));
  }

  /* 111 PORTFOLIO PAGE */

  /* 111 BIS PORTFOLIO LIST PAGE */
  .projet-bloc>* {
    /* tous les enfants directs pour conserver le golden ratio responsive*/
    position: absolute;
  }

  .contenu-project {
    width: 100%;
    left: 0;
    background-color: rgba(var(--clr-primary), 0.1);
    backdrop-filter: blur(4px);
    border: none;
    height: fit-content;
    padding-top: 200px;
  }

  .project-article {
    padding-left: var(--doublemarge);
    padding-right: var(--doublemarge);
  }

  /* 333 SERVICES PAGE */
  #img-portfolio {
    width: 12vw;
  }
}



/*--------------- Adaptation pour mobile grand ---------------*/
@media screen and (max-width: 768px) {
  :root {
    --petite-marge: 8px;
    --fade-width: 15%;
  }

  body,
  html {
    border: 16px solid var(--clr-secondary);
  }

  .social-links {
    display: none;
  }

  .slogan-mobile {
    line-height: 0.1;
  }

  .bottom-btn {
    display: block;
    visibility: visible;
    position: fixed;
    width: var(--marge);
    height: var(--marge);
    top: -3px;
    right: 0;
    margin-top: 0.5%;
    font-size: 1.5rem;
    color: white;
    text-align: center;
    pointer-events: all;
    line-height: var(--marge);
  }

  #fullscreen-bottom-btn,
  #fullscreen-top-btn {
    display: flex;
  }

  .burger {
    display: block;
    pointer-events: all;
  }

  .burger:hover {
    display: block;
    pointer-events: all;
  }

  .main-nav .nav-links {
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-time) ease;
    position: fixed;
    flex-direction: column;
    top: var(--marge);
    right: var(--marge);
    background: var(--clr-primary);
    border: 1px solid var(--clr-secondary);
    height: fit-content;
    gap: 0;
    overflow: hidden;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
  }

  .main-nav .nav-links.show {
    transform: scaleY(1);
    visibility: visible;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .main-nav .nav-links li a {
    display: block;
    opacity: 1;
    min-height: 1.2em;
    transition: opacity var(--transition-time) ease;
  }

  .main-nav.show .nav-links li a {
    opacity: 1;
  }

  .main-nav .nav-links li {
    display: block;
    width: 100%;
  }

  .main-nav .nav-links a {
    padding: 0.5rem;
    padding-left: 5vh;
    padding-right: 5vh;
  }

  .main-nav .nav-links li:first-child a {
    padding-top: 1em;
  }

  .main-nav .nav-links li:last-child a {
    transition: none;
    margin-top: 0.5rem;
  }

  /* ----- Footer Mobile -----*/
  .footer-mobile {
    position: sticky;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: fit-content;
    bottom: 0;
    top: 100000px;
    background-color: var(--clr-primary);
    border-top: 1px solid var(--clr-secondary);
    z-index: var(--z-index-max);
  }

  .social-links-footer {
    top: 4px;
    position: absolute;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    right: 0;
    min-width: 160px;
    margin: var(--marge);
  }

  .social-links-footer a {
    color: var(--clr-secondary);
    text-decoration: none;
    line-height: 24px;
  }

  .social-links-footer a:hover {
    color: var(--clr-tertiary);
  }

  .footer-mobile .secondary-nav {
    width: 100%;
  }

  .secondary-nav .nav-links {
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    margin: 0;
  }

  .secondary-nav .nav-links li {
    width: 100%;
    display: block;
    pointer-events: auto;
    text-align: left;
    pointer-events: none;
  }

  .secondary-nav .nav-links a {
    display: block;
    width: fit-content;
    text-align: left;
    padding: 0.8em 1em;
    color: var(--clr-secondary);
    box-sizing: border-box;
    padding-left: var(--marge);
    pointer-events: all;
  }

  .secondary-nav .nav-links a:hover {
    color: var(--clr-tertiary);
    transition: all var(--transition-time) ease;
  }

  .secondary-nav .nav-links li:first-child a {
    padding-top: 2em;
  }

  .secondary-nav .nav-links li:last-child a {
    width: 100vw;
    color: var(--clr-primary);
    background-color: var(--clr-secondary);
  }

  .secondary-nav .nav-links li:last-child a:hover {
    color: var(--clr-secondary);
    background-color: var(--clr-tertiary);
    transition: all var(--transition-time) ease;
  }

  .secondary-nav li:last-child a.active::after {
    background-color: transparent;
    filter: invert(1);
  }

  .secondary-nav li:last-child:hover a.active::after {
    background-color: transparent;
  }

  .footer-copyright {
    position: fixed;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5em 0;
    left: 0;
  }

  .footer-ml {
    position: fixed;
    right: 0;
    bottom: 0;
    margin-bottom: var(--marge);
    width: var(--marge);
    display: flex;
    justify-content: center;
    align-items: center;
    writing-mode: vertical-lr;
    text-orientation: mixed;
    transform: rotate(180deg);
    white-space: nowrap;
    line-height: normal;
  }



/* WIP Portfolio */
  .project-nav {
    gap: 1rem;
    max-width: 100%;
  }

  .project-prev span,
  .project-next span {
    max-width: 150px;
  }






  .contenu {
    padding: var(--marge);
    padding-top: clamp(30vh, 35vw, 300px);
    padding-bottom: 15vw;
  }

  /* 000 INTRODUCTION PAGE */
  #main-intro {
    background-color: rgba(var(--clr-primary), 0.1);
    backdrop-filter: blur(4px);
  }

  #intro {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    width: calc(100% - var(--doublemarge));
    padding-top: 7vh;
    bottom: var(--marge);
    margin: var(--doublemarge) auto;
    box-sizing: border-box;
  }

  #raccourcis {
    top: 10vh;
    width: 100%;
    margin: 0;
  }

  #description {
    width: 100%;
    text-align: center;
    margin: 0;
    padding-bottom: 25%;
  }

  .client-logo_wrapper {
    position: relative;
    padding-bottom: var(--marge);
    width: calc(100% - 16px);
    left: 8px;
  }

  /* 111 BIS PORTFOLIO LIST PAGE */
  .toggle-btn {
    display: none;
  }

  .end-espace {
    padding-bottom: 280px;
  }

  /* 333 SERVICES PAGE */
  #img-portfolio {
    width: 16vw;
  }
}

/*--------------- Adaptation pour mobile petit ---------------*/
@media screen and (max-width: 576px) {
  .social-links-footer {
    min-width: 140px;
    /*font-size:small;*/
  }

  #lottie-mail-footer,
  #lottie-behance-footer,
  #lottie-instagram-footer,
  #lottie-facebook-footer,
  #lottie-linkedin-footer {
    width: 20px;
    height: 20px;
  }

  #img-portfolio {
    width: 20vw;
  }
}