@charset "utf-8";

/*
#ff0066, #00c8ff, #ffb900, #ae63e4, #47cf73 ; 
BFA181  1D548A

Color White Dégrader: 
background-image: linear-gradient(hsl(var(--hue),var(--sat),95%),hsl(var(--hue),var(--sat),70%));

Color Black Dégrader: 
background-image: linear-gradient(hsl(var(--hue), var(--sat), 30%), hsl(var(--hue), var(--sat), 5%));

Color Black :  #2c2a30
Color White :  #d3d5cf
*/

/*------------------------------RESET------------------------------*/
*, *::after, *::before {
	box-sizing: border-box;
	border: 0;
	margin: 0;
	padding: 0;
}
/*------------------------------END OF RESET------------------------------*/


/*------------------------------ROOT------------------------------*/
:root {
    --gap: 8px;
    --base: clamp(2rem, 8cqi, 80px);
    --easing: linear(
      0 0%,
      0.1538 4.09%,
      0.2926 8.29%,
      0.4173 12.63%,
      0.5282 17.12%,
      0.6255 21.77%,
      0.7099 26.61%,
      0.782 31.67%,
      0.8425 37%,
      0.8887 42.23%,
      0.9257 47.79%,
      0.9543 53.78%,
      0.9752 60.32%,
      0.9883 67.11%, 
      0.9961 75%,
      1 100%
    );
    --speed: 0.6s;
}

@layer base {
  :root {
    --font-size-min: 16;
    --font-size-max: 20;
    --font-ratio-min: 1.2;
    --font-ratio-max: 1.33;
    --font-width-min: 375;
    --font-width-max: 1500;
  }
}
  
  
  :root { 
    --hue: 223;
    --sat: 10%;
    --sat2: 90%;

    --light-primary: 30%;
    --light-secondary: 5%;
    --light2: 60%;

    --trans-dur: 0.3s;
    --trans-timing: ease-in-out;
    --trans-timing2: cubic-bezier(0.42, -1.84, 0.42, 1.84);
    --trans-timing3: cubic-bezier(0.42, 0, 0.42, 1.84);
    --transition-duration: .2s;
    --transition-timing-function: linear;
    --transition-delay: 0s;

    --negative-multiplier: -1;
    --m: 4rem;

    --font-size-default: 15px;
    --font-size-lg: 25px;

    --color-primary: #2C2C2C;
    --color-secondary: #DBDBDB;
    --color-gray: #7e7e7e;
    --color-red: #ff0066;
    --color-blue: #00c8ff;
    --color-yellow: #ffb900;
    --color-purple: #ae63e4;
    --color-green: #47cf73;

    --color-primary_opacity: rgba(44, 44, 44, 0.75);
    --color-secondary_opacity: rgba(219, 219, 219, 0.75);

    --gradient-default: linear-gradient(122deg, var(--color-accent-light) 0%, var(--color-accent-dark) 100%);
    --color-accent-light: #ff0066;
    --color-accent-dark: #00c8ff;

	--animation-duration: 30s;
    --animation-timing: ease-in-out;

    --gradient-background-black-loader: linear-gradient(to bottom, 
        rgba(44, 42, 48, 1) 0%, 
        rgba(44, 42, 48, 0) 50%, 
        rgba(44, 42, 48, 1) 100%);

    --gradient-background-light: linear-gradient(to bottom, 
        hsl(var(--hue), var(--sat), 100%),
        hsl(var(--hue), var(--sat), 80%));

    --gradient-background-black: linear-gradient(to bottom, 
        hsl(var(--hue), var(--sat), 20%), /* Lumière plus basse pour le noir */
        hsl(var(--hue), var(--sat), 0%) /* Lumière plus haute pour le noir */
    );

    --gradient-background-light-opacity: linear-gradient(to bottom, 
        hsla(var(--hue), var(--sat), 100%, 0.5),
        hsla(var(--hue), var(--sat), 80%, 0.5));

    --gradient-background-black-opacity: linear-gradient(to bottom, 
        hsla(var(--hue), var(--sat), 20%, 0.5), /* Lumière plus basse pour le noir */
        hsla(var(--hue), var(--sat), 0%, 0.5) /* Lumière plus haute pour le noir */
    );
}

.transition-common {
	transition: all var(--trans-dur) var(--trans-timing);
}

@keyframes gradientFill {
    0% { fill: var(--color-red); }
    20% { fill: var(--color-blue); }
    40% { fill: var(--color-yellow); }
    60% { fill: var(--color-purple); }
    80% { fill: var(--color-green); }
    100% { fill: var(--color-red); }
}

@keyframes backgroundFill {
    0% { background-color: var(--color-red); }
    20% { background-color: var(--color-blue); }
    40% { background-color: var(--color-yellow); }
    60% { background-color: var(--color-purple); }
    80% { background-color: var(--color-green); }
    100% { background-color: var(--color-red); }
}
/*------------------------------END OF ROOT------------------------------*/


/*------------------------------PRE LOADER------------------------------*/
#preloader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	background-image: var(--gradient-background-black);
    overflow: hidden;
    z-index: 9999; 
    opacity: 1;
    transition: opacity 1s ease; 
}

.loading-page {
    margin-top: -30px;
    padding: 20px;
}

.loading-page .counter {
    text-align: end;
}

.loading-page .counter p {
    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
    color: red;
}

.loading-page .counter h1 {
    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
    color: red;
}

#progress-bar {
    background: red;
    border: none;
    height: 5px; 
    width: 0;
    max-width: 500px;
    transition: width 0.3s ease; 
    margin-top: 20px;
    border-radius: 2.5px; 
    margin-left: auto;
}
    @keyframes scalePulse {
        0% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.1);
        }
        100% {
            transform: scale(1);
        }
    }

#portfolio-button.show {
    display: flex; 
    opacity: 1;
}

#portfolio-button {
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
    z-index: 99999999;
    cursor: pointer;
    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
    animation: scalePulse 5s ease-in-out infinite;
    all: unset;
    display: inline-block;
    border: 1px solid red;
    color: red;
    line-height: 1.5em;
    white-space: nowrap;
    position: relative;
    text-transform: uppercase;
    padding: 10px 13px;
    margin-left: auto;
    margin-right: 20px;


    .text, .decoration {
        display: inline-block;
    }

    .decoration {
        float: right;
    }

    &:hover,
    &:focus {
        animation: glitch 0.2s;
        background-color: red;
        color: var(--color-primary);
        border-color: red;

        .text-decoration, .decoration {
            animation: blink 0.1s infinite;
        }

        &::before {
            content: " ";
            width: 15px;
            border: 1px solid var(--color-primary);
            position: absolute;
            right: 25%;
            bottom: 3px;
            transform: rotate(35deg);
        }

        &::after {
            content: " ";
            width: 75%;
            border: 1px solid var(--color-primary);
            position: absolute;
            left: 0;
            bottom: 5px;
            animation: shrink 0.5s 1 forwards;
        }
    }

  &:active {
    background: none;
    color: red;

        .text-decoration, .decoration {
            animation: none;
        }

        &::before,
        &::after {
            display: none;
        }
    }
}

#preloader-terminal-code {
  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
  color: red;
  visibility: hidden;
  color: red;
  padding: 20px;
  white-space: pre-wrap;
  text-align: right;
}

.preloader-blink {
  opacity: 1;
  animation: preloader-blink 1s linear infinite;
}
    @keyframes preloader-blink {
    0.01% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    50.01% {
        opacity: 1;
    }
    }

#preloader-terminal-scanline {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.055);
  animation: preloader-scanline 8s linear infinite;
  pointer-events: none;
  z-index: 9999;
}

#preloader-terminal-scanline.dark {
  background: rgba(255, 255, 255, 0.055);
}
    @keyframes preloader-scanline {
    0.01% {
        height: 0;
    }
    99.99% {
        height: 100%;
    }
    100% {
        height: 0;
    }
    }

#preloader-terminal-code a {
  color: inherit;
  text-decoration: underline dotted;
  cursor: pointer;
}

/*------------------------------END OF PRELOADER------------------------------*/




/*------------------------------VIDEO DARK------------------------------*/
.dark {
	width: 100%;
	height: 100%;
	color: var(--color-secondary);
	z-index: -2;
	transition: 0.3s;
	top: 0;
	left: 0;
	padding: 0%;
	margin: 0%;
	background-image: var(--gradient-background-black);
}

#video {
    display: none;
}

 .dark #video {
    position: absolute; 
    left: 0;
    top: 0;
    width: 100%;
    z-index: 0; 
    opacity: 1; 
    transition: opacity 0.1s;
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    display: block;
}
/*------------------------------END OF VIDEO DARK------------------------------*/

/*------------------------------PROPOS DARK------------------------------*/
#goku{
    display: none;
}

.dark #goku{
position: fixed; 
right: 10px;
top: 10px;
width: 50%;
z-index: 0; 
opacity: 0.5; 
transition: opacity 0.1s;
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
display: block;
}
/*------------------------------END OF PROPOS DARK------------------------------*/

/*------------------------------WEB DARK------------------------------*/
.webdark_content {
    display: none;
}

.dark .webdark_content {
    height: 100vh; /* Prend toute la hauteur de la fenêtre */
    width: 100%;
    left: 0px;
    top: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Cache tout débordement du contenu */
    position: absolute; /* Permet le positionnement absolu à l'intérieur */
}


.webdark_base {
	width: 150vw;
	height: 100px;
	position: absolute;
	top: calc(50vh + 18.5vmin);
	background: var(--color-primary);
	transform-origin: 50% 0;
	transform: rotate(13deg);
}

.webdark_base:before {
	content: "";
	position: absolute;
	background: linear-gradient(45deg, var(--color-secondary), var(--color-secondary));
	width: 100%;
	height: 5vmin;
}

.webdark_base:after {
	content: "";
	position: absolute;
	background: 
		radial-gradient(circle at 68% -14%, #000, #fff0 8vmin),  
		radial-gradient(circle at 50% 50%, #000000c2, #fff0), 
		radial-gradient(circle at 50% 50%, #000c, #fff0);
	border-radius: 100% 20% 50% 0;
	width: 40%;
	height: 3vmin;
	top: 2.1vmin;
	left: 50%;
	transform: translateX(-65%);
	filter: blur(3px);
}

.webdark_ring {
	position: absolute;
	margin-left: 6vmin;
	width: 43vmin;
	height: 45vmin;
	border-radius: 100%;
	background: 
		linear-gradient(-5deg, #fff0 43vmin, #000c),
		radial-gradient(circle at 63% 40%, #fff0 0 23vmin, #000d 31vmin), 
		linear-gradient(180deg, #fff0 40vmin, #000c), 
		radial-gradient(circle at 50% 100%, #0006 0vmin, #fff0 5vmin), 
		radial-gradient(circle at 55% 105%, #0006 0vmin, #fff0 8vmin),
		radial-gradient(circle at 75% 95%, #0006 0vmin, #fff0 10vmin), 
		radial-gradient(circle at 53% 50%, #fff0 17vmin, var(--color-secondary) calc(17vmin + 1px)), 
		radial-gradient(circle at 47% 50%, #fff0 17vmin, var(--color-secondary) calc(17vmin + 1px));
}

.webdark_ring:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle at 50% 50%, #fff0 17vmin, var(--color-primary) calc(17vmin + 1px));
	border-radius: 100%;
	left: -4vmin;
}

.webdark_ball {
	width: 9vmin;
	height: 9vmin;
	background: 
		radial-gradient(circle at -80% 120%, var(--color-primary) 4vmin, #fff0), 
		radial-gradient(circle at 6% 60%, #1f212d40 4vmin, #fff0), 
		radial-gradient(circle at 100% 38%, #fff8 -2vmin, #fff0 5vmin), 
		radial-gradient(circle at 100% 50%, var(--color-secondary) -2vmin, #fff0),
		radial-gradient(circle at 6% 60%, var(--color-primary) 4vmin, var(--color-secondary));
	border-radius: 100%;
	z-index: 5;
	position: absolute;
	top: 23vmin;
	left: 3vmin;
}

.webdark_ball-shadow {
	width: 9vmin;
	height: 9vmin;
	background: #000e;
	border-radius: 100%;
	position: absolute;
	top: 25vmin;
	left: 0.3vmin;
	z-index: 0;
	transform: scale(0.5) rotate(-30deg);
	filter: blur(8px);
	box-shadow: 
		-0.5vmin 4vmin 8vmin var(--color-primary), 
		-0.5vmin 7vmin 7vmin var(--color-primary), 
		-0.5vmin -6vmin 8vmin var(--color-primary), 
		-0.5vmin -5vmin 5vmin var(--color-primary), 
		-0.5vmin 0.5vmin 0 var(--color-primary), 
		-2vmin -1vmin 0 #0008, -1vmin 3vmin 0 #0008;
}
/*------------------------------END OF WEB DARK------------------------------*/


/*------------------------------PARTICULES JS------------------------------*/
.large-header {
    position: fixed;
    width: 100%;
    height: 100vh; 
	overflow: hidden;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
}
@media screen and (max-width: 576px) {
.large-header  {
    display: none;
    }
}
#demo-canvas {
    position: fixed; /* Position absolue pour le canevas */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* Même hauteur que large-header */
    z-index: 3; /* Z-index au-dessus de tout */
}
/*------------------------------END OF PARTICULES JS------------------------------*/




/*------------------------------BODY------------------------------*/
html, body {
	text-rendering: optimizeLegibility;
    font-family: 'Montserrat', sans-serif;
	margin:0px;
	padding:0px;
	color: var(--color-primary);
	background-image: var(--gradient-background-light);
    overflow-x: hidden;
    scroll-behavior: auto; /* désactive l'animation de scroll */

}
/*------------------------------END OF BODY------------------------------*/


/*------------------------------TITLE------------------------------*/
h1 {
    font-size: 100px;
    text-transform: uppercase;
    color: inherit;
    border-radius: 0px;
    width: 100%;
    margin-bottom: 20px;
    }

@media screen and (max-width: 940px) {
 h1  {
    font-size: 50px;
    }
}
@media screen and (max-width: 576px) {
 h1  {
    font-size: 30px;
    }
}


.dark h1  {
    background-color: transparent;
    color: var(--color-secondary);
}

.hero {
  line-height: 1;
  display: inline-block;
  z-index: 2;
 /*   filter: drop-shadow(0 1px 3px); Bright things in dark environments usually cast that light, giving off a glow */
}

.layers {
  position: relative;
}

.layers::before,
.layers::after {
  content: attr(data-text);
  position: absolute;
  width: 110%;
  z-index: -1;
}

.layers::before {
  top: 10px;
  left: 15px;
  color: var(--color-accent-light);
}

.layers::after {
  top: 5px;
  left: -10px;
  color: var(--color-accent-dark);
}

.single-path {
  clip-path: polygon(
    0% 12%,
    53% 12%,
    53% 26%,
    25% 26%,
    25% 86%,
    31% 86%,
    31% 0%,
    53% 0%,
    53% 84%,
    92% 84%,
    92% 82%,
    70% 82%,
    70% 29%,
    78% 29%,
    78% 65%,
    69% 65%,
    69% 66%,
    77% 66%,
    77% 45%,
    85% 45%,
    85% 26%,
    97% 26%,
    97% 28%,
    84% 28%,
    84% 34%,
    54% 34%,
    54% 89%,
    30% 89%,
    30% 58%,
    83% 58%,
    83% 5%,
    68% 5%,
    68% 36%,
    62% 36%,
    62% 1%,
    12% 1%,
    12% 34%,
    60% 34%,
    60% 57%,
    98% 57%,
    98% 83%,
    1% 83%,
    1% 53%,
    91% 53%,
    91% 84%,
    8% 84%,
    8% 83%,
    4% 83%
  );
}

.paths {
  animation: paths 500s step-end infinite;
}

@keyframes paths {
  0% {
    clip-path: polygon(
      0% 43%,
      83% 43%,
      83% 22%,
      23% 22%,
      23% 24%,
      91% 24%,
      91% 26%,
      18% 26%,
      18% 83%,
      29% 83%,
      29% 17%,
      41% 17%,
      41% 39%,
      18% 39%,
      18% 82%,
      54% 82%,
      54% 88%,
      19% 88%,
      19% 4%,
      39% 4%,
      39% 14%,
      76% 14%,
      76% 52%,
      23% 52%,
      23% 35%,
      19% 35%,
      19% 8%,
      36% 8%,
      36% 31%,
      73% 31%,
      73% 16%,
      1% 16%,
      1% 56%,
      50% 56%,
      50% 8%
    );
  }

  5% {
    clip-path: polygon(
      0% 29%,
      44% 29%,
      44% 83%,
      94% 83%,
      94% 56%,
      11% 56%,
      11% 64%,
      94% 64%,
      94% 70%,
      88% 70%,
      88% 32%,
      18% 32%,
      18% 96%,
      10% 96%,
      10% 62%,
      9% 62%,
      9% 84%,
      68% 84%,
      68% 50%,
      52% 50%,
      52% 55%,
      35% 55%,
      35% 87%,
      25% 87%,
      25% 39%,
      15% 39%,
      15% 88%,
      52% 88%
    );
  }

  30% {
    clip-path: polygon(
      0% 53%,
      93% 53%,
      93% 62%,
      68% 62%,
      68% 37%,
      97% 37%,
      97% 89%,
      13% 89%,
      13% 45%,
      51% 45%,
      51% 88%,
      17% 88%,
      17% 54%,
      81% 54%,
      81% 75%,
      79% 75%,
      79% 76%,
      38% 76%,
      38% 28%,
      61% 28%,
      61% 12%,
      55% 12%,
      55% 62%,
      68% 62%,
      68% 51%,
      0% 51%,
      0% 92%,
      63% 92%,
      63% 4%,
      65% 4%
    );
  }

  45% {
    clip-path: polygon(
      0% 33%,
      2% 33%,
      2% 69%,
      58% 69%,
      58% 94%,
      55% 94%,
      55% 25%,
      33% 25%,
      33% 85%,
      16% 85%,
      16% 19%,
      5% 19%,
      5% 20%,
      79% 20%,
      79% 96%,
      93% 96%,
      93% 50%,
      5% 50%,
      5% 74%,
      55% 74%,
      55% 57%,
      96% 57%,
      96% 59%,
      87% 59%,
      87% 65%,
      82% 65%,
      82% 39%,
      63% 39%,
      63% 92%,
      4% 92%,
      4% 36%,
      24% 36%,
      24% 70%,
      1% 70%,
      1% 43%,
      15% 43%,
      15% 28%,
      23% 28%,
      23% 71%,
      90% 71%,
      90% 86%,
      97% 86%,
      97% 1%,
      60% 1%,
      60% 67%,
      71% 67%,
      71% 91%,
      17% 91%,
      17% 14%,
      39% 14%,
      39% 30%,
      58% 30%,
      58% 11%,
      52% 11%,
      52% 83%,
      68% 83%
    );
  }

  76% {
    clip-path: polygon(
      0% 26%,
      15% 26%,
      15% 73%,
      72% 73%,
      72% 70%,
      77% 70%,
      77% 75%,
      8% 75%,
      8% 42%,
      4% 42%,
      4% 61%,
      17% 61%,
      17% 12%,
      26% 12%,
      26% 63%,
      73% 63%,
      73% 43%,
      90% 43%,
      90% 67%,
      50% 67%,
      50% 41%,
      42% 41%,
      42% 46%,
      50% 46%,
      50% 84%,
      96% 84%,
      96% 78%,
      49% 78%,
      49% 25%,
      63% 25%,
      63% 14%
    );
  }

  90% {
    clip-path: polygon(
      0% 41%,
      13% 41%,
      13% 6%,
      87% 6%,
      87% 93%,
      10% 93%,
      10% 13%,
      89% 13%,
      89% 6%,
      3% 6%,
      3% 8%,
      16% 8%,
      16% 79%,
      0% 79%,
      0% 99%,
      92% 99%,
      92% 90%,
      5% 90%,
      5% 60%,
      0% 60%,
      0% 48%,
      89% 48%,
      89% 13%,
      80% 13%,
      80% 43%,
      95% 43%,
      95% 19%,
      80% 19%,
      80% 85%,
      38% 85%,
      38% 62%
    );
  }

  1%,
  7%,
  33%,
  47%,
  78%,
  93% {
    clip-path: none;
  }
}

.movement {
  /* Normally this position would be absolute & on the layers, set to relative here so we can see it on the div */
  position: relative;
  animation: movement 8s step-end infinite;
}

@keyframes movement {
  0% {
    top: 0px;
    left: -20px;
  }

  15% {
    top: 10px;
    left: 10px;
  }

  60% {
    top: 5px;
    left: -10px;
  }

  75% {
    top: -5px;
    left: 20px;
  }

  100% {
    top: 10px;
    left: 5px;
  }
}

.opacity {
  animation: opacity 5s step-end infinite;
}

@keyframes opacity {
  0% {
    opacity: 0.1;
  }

  5% {
    opacity: 0.7;
  }

  30% {
    opacity: 0.4;
  }

  45% {
    opacity: 0.6;
  }

  76% {
    opacity: 0.4;
  }

  90% {
    opacity: 0.8;
  }

  1%,
  7%,
  33%,
  47%,
  78%,
  93% {
    opacity: 0;
  }
}

.font {
  animation: font 7s step-end infinite;
}

@keyframes font {
  0% {
    font-weight: 100;
    color: var(--color-red);
    filter: blur(3px);
  }

  20% {
    font-weight: 500;
    color: var(--color-secondary);
    filter: blur(0);
  }

  50% {
    font-weight: 300;
    color: var(--color-blue);
    filter: blur(2px);
  }

  60% {
    font-weight: 700;
    color: var(--color-secondary);
    filter: blur(0);
  }

  90% {
    font-weight: 500;
    color: var(--color-red);
    filter: blur(6px);
  }
}

.glitch span {
  animation: paths 5s step-end infinite;
}


.glitch::before {
  animation: paths 5s step-end infinite, opacity 5s step-end infinite,
    font 8s step-end infinite, movement 10s step-end infinite;
    overflow: hidden;
}

.glitch::after {
  animation: paths 5s step-end infinite, opacity 5s step-end infinite,
    font 7s step-end infinite, movement 8s step-end infinite;
        overflow: hidden;
}
 
.hero-container {
  position: relative; /* position context pour les enfants absolus */
  overflow: hidden;   /* masque les débordements horizontaux ET verticaux */
  width: 100%;
  max-width: 100%;
}

.text-right {
    text-align: right;
    padding-top: 00px;
}
    @media (max-width: 576px) {
        .text-right {
        text-align: center;
        padding: 0px;
        }
    }
/*------------------------------END OF TITLE------------------------------*/


/*------------------------------NAVIGUATION MENU SLIDER------------------------------*/
.navigation {
    color: var(--color-secondary);
    height: 100%;
    min-height: 650px;
    padding: 16px; 
    display: flex;
    flex-direction: column; 
    min-width: 50px;
}
    @media (max-width: 576px) {
        .navigation {
            padding: 13px;
        }
    }

.navigation-container {
	position: fixed;
	height: 100%;
	top: 0;
	left: 0;
    z-index: 6;
    background-image: none;
    transition: width 0.2s ease;
    width: 170px;
}

.navigation-container--collapsed {
    transition: width 0.2s ease; 
}
    @media (max-width: 576px) {
        .navigation-container {
            background-image: var(--gradient-background-light);
        }
    }

.dark .navigation-container {
    background-image:none;
}
    @media (max-width: 576px) {
        .dark .navigation-container {
            background-image: var(--gradient-background-black);
        }
    }¨

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

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

/*---BLUELINE---*/
.navigation::before {
    background: linear-gradient(180deg, rgba(64, 139, 255, 0) 0%, #408bff 5%, #408bff 95%, rgba(64, 139, 255, 0) 100%);
    bottom: 0;
    pointer-events: none;
    position: absolute;
    right: -3px;
    top: 0;
    width: 2px;
    content: "";
    opacity: 0;
    transition: opacity 0.2s ease-out;
    transition-delay: 0.1s;
}

.navigation-collapse-trigger__orb:hover {
    cursor: pointer;
}

.navigation-collapse-trigger__orb > svg {
    stroke: var(--color-primary);
    width: 80%;
    height: auto;
    transition: transform 0.2s var(--trans-timing);
}

[class$="--collapsed"] .navigation-collapse-trigger__orb > svg {
    transform: rotate(180deg);
}

.navigation-collapse-trigger:hover .navigation-collapse-trigger__orb {
    transform: translate(calc(-50% + 2px), 100px) scale(1);
}

.navigation-collapse-trigger:hover ~ .navigation::before {
    opacity: 1;
    z-index: 99999;
}
/*---END OF BLUELINE---*/

/*---BOUTTON DU MENU---*/
.nav-icon {
    width: 50px;
    height: 45px;
    position: relative;
    margin: 15px 0px 0px 15px;
    transform: rotate(0deg);
    cursor: pointer;
}
    @media (max-width: 576px) {
        .nav-icon {
            width: 26px;
            height: 21px;
            margin: 13px 0px 0px 13px;
        }
    }

.nav-icon span {
    display: block;
    position: absolute;
    height: 9px;
    width: 100%;
    background: var(--color-primary);
    border-radius: 9px;
    opacity: 1;
    left: 0;
    transition: .25s ease-in-out;
}
    @media (max-width: 576px) {
        .nav-icon span {
            height: 6px;
        }
    }

.dark .nav-icon span {
    background: var(--color-secondary);
}

.nav-icon span:nth-child(1) {
    top: 0px;
}

.nav-icon span:nth-child(2) {
    top: 18px;
}
    @media (max-width: 576px) {
        .nav-icon span:nth-child(2) {
            top: 10px;
        }
    }

.nav-icon span:nth-child(3) {
    top: 36px;
}
    @media (max-width: 576px) {
        .nav-icon span:nth-child(3) {
            top: 20px;
        }
    }

.nav-icon.open span:nth-child(1) {
    top: 18px;
    transform: rotate(135deg);
}
    @media (max-width: 576px) {
        .nav-icon.open span:nth-child(1) {
            top: 10px;
        }
    }

.nav-icon.open span:nth-child(2) {
    opacity: 0;
    left: -60px;
}

.nav-icon.open span:nth-child(3) {
    top: 18px;
    transform: rotate(-135deg);
}
    @media (max-width: 576px) {
        .nav-icon.open span:nth-child(3) {
            top: 10px;
        }
    }
/*---END OF BOUTTON DU MENU---*/

/*---LOGO/VERSION---*/
.navigation-collapse-trigger {
    bottom: 0;
    position: absolute;
    top: 0px;
    left: 0px;
    height:80px;
}
/*---END OF LOGO/VERSION---*/

/*---LOGOUT---*/
.navigation .logout {
    margin-top: auto;
}
    @media (max-width: 576px) {
        .navigation .logout  {
            margin-top: 0px;
        }
    }
/*---END OFLOGOUT---*/


 /*---LOGO LM---*/
 a.navigation-logo {
    text-decoration: none;
    box-sizing: border-box;
    width: 10%;
}

.navigation-container a.navigation-logo {
    margin: 80px 0 130px 0;
    transition: var(--animation-timing);
}
    @media (max-width: 576px) {
        .navigation-container a.navigation-logo  {
                   margin: 80px 0 80px 0;
        }
}
    @media (max-width: 400px) {
        .navigation-container a.navigation-logo  {
                   margin: 80px 0 60px 0;
        }
}

.navigation-container--collapsed a.navigation-logo {
    margin: 60px 0 70px 0;
    transition: var(--animation-timing);
}
    @media (max-width: 576px) {
        .navigation-container--collapsed a.navigation-logo  {
                margin: 60px 0 30px 0;
        }
    }
#rs_text_lm_menu{
    margin-top: 75px;
}
    @media (max-width: 576px) {
        #rs_text_lm_menu  {
            margin-top: 45px;
        }
}
    @media (max-width: 400px) {
        #rs_text_lm_menu  {
            margin-top: 25px;
        }
}
.navigation-container--collapsed  #rs_text_lm_menu{
    margin-top: 40px;
}
    @media (max-width: 576px) {
        .navigation-container--collapsed  #rs_text_lm_menu  {
            margin-top: 5px;
        }
    }

a.navigation-logo img {
    width: 70%;
    position: absolute;
    margin-top: -20px;
}
    @media (max-width: 576px) {
         a.navigation-logo img  {
            width: 20%;
            position: absolute;
            margin-top: -30px;
        }
}

.navigation-container--collapsed a.navigation-logo img {
    width: 70%;
    position: absolute;
    margin-top: 0px;
}
    @media (max-width: 576px) {
        .navigation-container--collapsed a.navigation-logo img  {
            margin-top: -20px;
            width: 60%;
        }
    }

.white_mode{
    opacity: 1;
}

.dark .white_mode{
    opacity: 0;
}

.dark_mode {
    opacity: 0;
}

.dark .dark_mode{
    opacity: 1;
}
/*---LOGO LM---*/

/*---ZONE SEARCH---*/
.navigation-search {
    margin-bottom: 24px;
    position: relative;
    height: 50px;
}
    @media (max-width: 576px) {
        .navigation-search{
            margin-bottom: 22px;
            position: relative;
            height: 24px;
        }
    }

.navigation-search__icon {
    height: 25px;
    left: 10px;
    opacity: 1;
    pointer-events: none;
    position: absolute;
    top: 10px;
    width: 25px;
    z-index: 1;
}
    @media (max-width: 576px) {
        .navigation-search__icon {
            left: 3px;
            top: 3px;
            height: 18px;
            width: 18px;
        }
    }

.dark .navigation-search__icon {
    color: var(--color-primary);
}

[class$="--collapsed"] .navigation-search__icon {
    left: 12px;
}
    @media (max-width: 576px) {
        [class$="--collapsed"] .navigation-search__icon {
            left: 3px;
        }
    }

.navigation-search__input {
    background-color: var(--color-primary);
    border-radius: 5px;
    color: var(--color-secondary);
    font-family: inherit;
    font-size: inherit;
    height: 45px;
    line-height: 45px;
    outline: none;
    padding-left: 50px;
    width: 100%;
    position: relative;
    z-index: 1;
}
    @media (max-width: 576px) {
        .navigation-search__input {
            height: 24px;
            padding-left: 24px;
        }
    }

.dark .navigation-search__input {
    background-color: var(--color-secondary);
    color:  var(--color-primary);
}

.dark .navigation-search__input:focus {
    background-color: var(--color-secondary);
    color: var(--color-primary);
}

.navigation-search__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    background: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x' %3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E") no-repeat center center/cover;
    cursor: pointer;
    height: 20px;
    position: relative;
    right: 10px;
    width: 20px;
}

[class$="--collapsed"] .navigation-search__input:not(:focus)::-webkit-search-cancel-button {
    display: none;
}

.navigation-search__input:focus {
    padding-left: 10px;
    background-color: var(--color-primary);
    border-radius: 5px;
}

[class$="--collapsed"] .navigation-search__input:focus {
    width: 138px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.navigation-search__input:focus + svg {
    opacity: 0;
    transform: translateX(-20%);
    z-index: 2;
}
/*---END OF ZONE SEARCH---*/

/*--NAVIGUATION LINK (TOUTLERESTE)---*/
.navigation-link {
    display: grid;
    grid-template-columns: 24px auto; /* Colonne fixe pour le picto, flexible pour le texte */
    align-items: center; /* Aligne les éléments verticalement */
    gap: 10px;
    padding: 0 12px;
	margin: 0;
	height: 45px;
	line-height: 45px;
	border-radius: 0px;
	text-decoration: none;
	white-space: nowrap;
	font-size: 0.7em;
    font-weight:600;
	color: var(--color-primary);
	fill:var(--color-primary);
}
    @media (max-width: 576px) {
        .navigation-link {
        padding: 0 8px;
        line-height: 25px;
        	height: 25px;
        }
    }

/* Pour le mode light, l'état ouvert, active */
.navigation-link.active {
    animation: backgroundFill var(--animation-duration) linear infinite;
	color: var(--color-secondary);
    fill: var(--color-secondary);
	transition: all 0.2s var(--trans-timing);
}

/* Pour le mode light, l'état ouvert, hover */
.navigation-link:hover {
	background-image: var(--gradient-background-black);
	fill: var(--color-secondary);
	color: var(--color-secondary);
}

.navigation-link__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 24px;

}
    @media (max-width: 576px) {
        .navigation-link__icon {
            min-width: 8px;
            width: 8px;
            min-height: 8px;
            height: 8px;
        }
    }
  
.navigation-link__icon_logo {
	width: 50px;
	min-width: 50px;
} 
    @media (max-width: 576px) {
        .navigation-link__icon_logo {
            width: 24px;
            height: 24px;
            min-height: 24px;
            min-width: 24px;
        }
    }  

.navigation-link__name {
	margin-left: 22px;
    white-space: nowrap;
}
    @media (max-width: 576px) {
        .navigation-link__name  {
	        margin-left: 2px;
            font-size: 7px;
        }
    }  
  
[class$="--collapsed"] .navigation-link__name {
	padding-left: 0.5em;
	padding-right: 0.5em;
	transition: transform 0.2s var(--trans-timing);
	pointer-events: none;
	margin-left: 40px;
}

/* Pour l'état collapsed, light, hover */  
[class$="--collapsed"] .navigation-link:hover .navigation-link__name {
	position: absolute;
	opacity: 1 !important;
	transform: translateX(4px);
    background-image: var(--gradient-background-black);
    font-size: 7px;
}

/* Pour l'état collapsed, light, active */
[class$="--collapsed"] .navigation-link:hover:active .navigation-link__name {
    background: var(--color-red);
    animation: backgroundFill var(--animation-duration) var(--animation-timing) infinite;
    color:var(--color-secondary);
}

/* Pour l'état collapsed, light, petit triangle */
[class$="--collapsed"] .navigation-link__name::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -7px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-right: 7px solid var(--color-primary);
    border-bottom: 5px solid transparent;
}

/* Pour le mode sombre*/
.dark .navigation-link {
	fill: var(--color-secondary);
	color: var(--color-secondary);
}

/* Pour le mode sombre, hover*/   
.dark .navigation-link:hover {
    background-image: var(--gradient-background-light);
	fill: var(--color-primary);
	color: var(--color-primary);
}

 /* Pour le mode sombre, active*/  
.dark .navigation-link:active {
    background: var(--color-red);
    animation: backgroundFill var(--animation-duration) var(--animation-timing) infinite;
    color: var(--color-secondary);
    fill: var(--color-secondary);
}

/* Pour le mode sombre et l'état collapsed, hover, le nom */ 
.dark [class$="--collapsed"] .navigation-link:hover .navigation-link__name {
	font-size: 1em;
	color: var(--color-primary);
	fill: var(--color-primary);
    background-image: var(--gradient-background-light);
}

/* Pour le mode sombre et l'état collapsed, hover, active*/ 
.dark [class$="--collapsed"] .navigation-link:hover:active .navigation-link__name {
    background: var(--color-red);
    animation: backgroundFill var(--animation-duration) var(--animation-timing) infinite;
	color: var(--color-secondary);
}

/* Pour le mode sombre et l'état collapsed, le petit triangle */
.dark [class$="--collapsed"] .navigation-link__name::before {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-right: 7px solid var(--color-secondary);
    border-bottom: 5px solid transparent;
    left: -7px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
}
/*--END OF NAVIGUATION LINK (TOUTLERESTE)---*/


/*
[class$="--collapsed"] .navigation-link__name:hover::before,
[class$="--collapsed"] .navigation-link:hover:active .navigation-link__name::before {
        animation: backgroundFill var(--animation-duration) var(--animation-timing) infinite;
}
*/


/*------------------------------END OF NAVIGUATION MENU SLIDER------------------------------*/







/*------------------------------MAINS CONTAINER ------------------------------*/
.maincontainer {
    z-index: 4; 
    margin-right: 0px;
    overflow: visible;
    margin-left: 170px;
    transition: margin-left 0.3s ease; /* Transition fluide lors du changement */

}

/* Quand le menu est fermé */
.navigation-container.navigation-container--collapsed + .maincontainer,
.navigation-container.navigation-container--collapsed ~ .maincontainer {
  margin-left: 80px;
}
/*--------------------MENU BREADCRUMBS : SOCIALMEDIA, NAV, DARKMODEBUTTON--------------------*/
.maincontainer > .breadcrumbs {
	height: 60px;
	align-items: center;
	display:flex;
	z-index: 5;
}
.maincontainer > .breadcrumbs .social {
	position: fixed;
	right: 1%;
	display: flex;
	background-color: transparent;
	z-index: 999;
}
.social {
	height: 60px;
      display: flex;
    flex-direction:row;
    align-items: center;
    justify-content: center;
}
.maincontainer > .breadcrumbs .social span{
	font-weight: 100;
}
.nav-next-prev,
.dark-mode-toggle {
  flex: none;
}
@media (max-width: 578px) {
  .social {
    flex-direction: column;
    align-items: flex-end; /* ou center selon ton besoin */
  }
  .nav-next-prev,
  .dark-mode-toggle {
    width: 100%;
    display: flex;
    justify-content: flex-end; /* aligner à droite */
    margin: 5px 0;
  }
}
/*---NAV : NEXT & PREVIOUS---*/
.maincontainer .breadcrumbs .social nav {
    margin-right: 10px;
	border-radius: 15px;
    cursor: pointer;
	padding: 4px;
}
@media (max-width: 578px) {
  .maincontainer .breadcrumbs .social nav  {
    margin-right: 0px;
  }
}
.maincontainer .breadcrumbs .social nav a {
    float: left;
    position: relative;
    width: 40px;
    height:40px;
    border-radius: 50%;
	background-color: var(--color-primary);
    margin: 0 0.1em;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s, color 0.3s; 
    text-decoration: none; 
}
    @media (max-width: 1200px) {
        .maincontainer .breadcrumbs .social nav a {
            width: 35px;
            height: 35px;
        }
    }

    @media (max-width: 768px) {
        .maincontainer .breadcrumbs .social nav a {
            width: 30px;
            height: 30px;
        }
    }

    @media (max-width: 576px) {
        .maincontainer .breadcrumbs .social nav a {
            width: 25px;
            height: 25px;
        }
    }

.dark .maincontainer .breadcrumbs .social nav a {
	background-color: var(--color-secondary);
}

.maincontainer .breadcrumbs .social nav a:hover {
    background: var(--color-primary);
}

.maincontainer .breadcrumbs .social nav a i {
    color: var(--color-secondary);
    pointer-events: none;
    transition: color 0.3s; 
}
.dark .maincontainer .breadcrumbs .social nav a i {
    color: var(--color-primary); 
}
.maincontainer .breadcrumbs .social nav a:hover i {
    animation: shake 0.5s; 
}

@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
    100% { transform: translateX(0); }
}

.dark .maincontainer .breadcrumbs .social nav a:hover {
    background: var(--color-secondary); 
}

.dark .maincontainer .breadcrumbs .social nav a:after {
    color:var(--color-primary);
}

.dark .maincontainer .breadcrumbs .social nav a:hover:before {
    color: var(--color-primary); 
}
/*---END OF NAV : NEXT & PREVIOUS---*/


/*---DARKMODE BUTTON---*/
.dark-mode-toggle {
	margin-right: 10px;
	z-index: 10;
}

    @media (max-width: 576px) {
        .dark-mode-toggle {
	margin: 0px;
        }
    }

.dark-mode-toggle label {
	border-radius: 15px;
	cursor: pointer;
}

.dark-mode-toggle label:hover {
	background-color:var(--color-secondary);
}

#dark-mode-toggle-checkbox:active:after {
	width: 260px;
}

#ddark-mode-toggle-checkbox:checked + label svg.sun {
	fill:var(--color-secondary); 
}

#dark-mode-toggle-checkbox:checked + label svg.moon {
	fill: var(--color-secondary); 
	transition: all 0.6s;
	transform: scaleX(1) scaleY(1) rotate(360deg);
}

#dark-mode-toggle-checkbox {
	width: 0;
	height: 0;
	visibility: hidden;
	display: none;
}

#dark-mode-toggle-checkbox:checked + label:after {
	left: 97%;
	transform: translateX(-100%);
	background: var(--gradient-background-black-opacity);
}

.label-darkmode svg {
	position: absolute;
	height: 80%;
	top: 10%;
	z-index: 100;
}

.label-darkmode svg.sun {
	left: 5%;
	fill: #ffffff;
}

.dark .label-darkmode svg.sun {
	left: 5%;
	fill:var(--color-secondary);
}

.label-darkmode svg.moon {
	fill: var(--color-primary);
	transition: 0.6s;
	right:5%;
}

.label-darkmode {
	width: 80px;
	height: 40px;
	position: relative;
	display: block;
	background: var(--gradient-background-light-opacity);
	cursor: pointer;
	transition: 0.3s;
}
    @media (max-width: 1200px) {
        .label-darkmode {
            height: 35px;
        }
    }

    @media (max-width: 768px) {
        .label-darkmode {
            height: 30px;
            width: 60px;
        }
    }

    @media (max-width: 576px) {
        .label-darkmode {
            height: 25px;
            width: 50px;
        }
    }

.dark .dark-mode-toggle label {
	background: var(--gradient-background-black-opacity);
}

.label-darkmode:after {
	content: "";
	width: 35px;
	height: 35px;
	position: absolute;
	top: 2.5px;
	left: 3%;
	background: linear-gradient(180deg, #ffc72ecb, #ffa600);
	border-radius: 180px;
	box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
	transition: all 0.3s;
}
    @media (max-width: 1200px) {
        .label-darkmode:after {
            width: 30px;
            height: 30px;
        }
    }

    @media (max-width: 768px) {
        .label-darkmode:after {
            width: 25px;
            height: 25px;
        }
    }

    @media (max-width: 576px) {
        .label-darkmode:after {
            width: 20px;
            height: 20px;
        }
    }
/*---END OF DARK MODE BUTTON---*/



/*----------RESEAU SOCIAUX----------*/
/* BOUTTON SHARE */
.share-button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    height:40px;
    width: 40px;
    position: absolute;
    right: 240px;
    padding: 0px;
    fill: var(--color-primary);
    z-index:1 ;
}
    @media (max-width: 1200px) {
        .share-button {
            width: 35px;
            height: 35px;    
            right: 230px;
        }
    }

    @media (max-width: 768px) {
        .share-button {
            width: 30px;
            height: 30px;
            right: 190px;
        }
    }

    @media (max-width: 576px) {
        .share-button {
            width: 25px;
            height: 25px;
            right: 95px;
            top: 6px;
        }
    }
    @media (max-width: 265px) {
        .share-button {
            width: 25px;
            height: 25px;
            right: 10px;
            top:50px;
        }
    }
.dark .share-button {
    fill: var(--color-secondary);
}
#cercle_share {
    fill: var(--color-primary);
}
#logo_share {
    fill: var(--color-secondary);
}
.dark #cercle_share {
    fill: var(--color-secondary);
}
.dark #logo_share {
    fill: var(--color-primary);
}
#share-button {
    position: relative;
    z-index: 2; /* Ensure button is above overlay */
    cursor: pointer;
}
#logo_share {
    transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55), fill 0.4s ease;
    transform-origin: center; /* Le centre devient le point de rotation et d'échelle */
}
.share-button:hover #logo_share {
    transform: scale(1.2) rotate(360deg); /* Agrandissement et rotation */
}
/* END OF BOUTTON SHARE */

/* OVERLAY */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--gradient-background-light);
    opacity: 0;
    visibility: hidden;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.dark .overlay {
    background-image: var(--gradient-background-black);
}
.overlay.active {
    opacity: 1;
    visibility: visible;
}
/* OVERLAY */

/* RESEAU SOCIAUX CONTENEUR UL LI */
.wrapper {
    z-index: 9999999999999;
    margin-top: 50px;
    display: flex;
    justify-content: center;
    align-items: center; 
    margin-left: 170px;
}
.navigation-container--collapsed ~ .maincontainer .wrapper {
    margin-left: 80px;
}
.svg-icon {
    height: 1em;
    vertical-align: -0.15em;
    fill: var(--color-primary);
    overflow: hidden;
}
.dark .svg-icon {
    fill: var(--color-secondary);
}
.sns {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column; 
    align-items: center;  
}
.sns svg {
    display: block;
}
.sns__item {
    margin: 20px 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
    @media (max-width: 1200px) {
        .sns__item {
            margin: 20px 0;
        }
    }

    @media (max-width: 768px) {
        .sns__item {
            margin: 15px 0;
        }
    }

    @media (max-width: 576px) {
        .sns__item{
            margin: 12px 0;
        }
    }
    @media (max-width: 265px) {
        .sns__item {
            margin: 10px 0;
        }
    }
.sns.active {
    display: flex;
    top: 20px;
}
.sns.active .sns__item {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(0.1s * var(--i));
}
.sns__icon-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.sns__link {
    color: var(--color-primary);
    font-size: 30px;
    height: 30px;
    cursor: pointer;
}
    @media (max-width: 1200px) {
        .sns__link {
            font-size: 25px;
            height: 25px;
        }
    }

    @media (max-width: 768px) {
        .sns__link {
            font-size: 20px;
            height: 20px;
        }
    }

    @media (max-width: 576px) {
        .sns__link{
            font-size: 15px;
            height: 15px;
        }
    }
    @media (max-width: 265px) {
        .sns__link {
            font-size: 10px;
            height: 10px;
        }
    }
.dark .sns__link {
    color: var(--color-secondary);
}
/* END OF RESEAU SOCIAUX CONTENEUR */


/* BEHANCE */
#logo_behance {
    overflow: visible;
}
#logo_behance #behance_bar_wrapper {
    transition: transform 0.5s ease;
}
#logo_behance #behance_bar {
    transform-origin: 18.5px 1px;
    transition: transform 0.5s ease;
}
.sns__link:hover #logo_behance #behance_bar_wrapper {
    animation: translateLoop 1s infinite cubic-bezier(0.42, 0, 0.58, 1); 
}
.sns__link:hover #logo_behance #behance_bar {
    animation: rotateLoop 1s infinite cubic-bezier(0.42, 0, 0.58, 1); 
}
@keyframes rotateLoop {
    0% { transform: rotate(0deg); }     
    100% { transform: rotate(360deg); }   
}
@keyframes translateLoop {
    0% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
    100% { transform: translateY(0); }
}
/* END OF BEHANCE */


/* GITHUB */
#logo_github #yeux {
    opacity: 0;
    transition: opacity 0.3s ease;
    transform-origin: center;
    transform: scaleY(1);
    transition: transform 0.2s ease;
}
#logo_github #oreille #droite-2, 
#logo_github #oreille #gauche-2 {
    transform: scale(1);
    transform-origin:top center;
    transition: transform 0.4s ease;
}
.sns__link:hover #logo_github #yeux {
    opacity: 1;
    animation: blinkIrregular 3s infinite ease-in-out;
}
@keyframes blinkIrregular {
    0% { transform: scaleY(1); }
    10% { transform: scaleY(0); }
    15% { transform: scaleY(1); }
    30% { transform: scaleY(1); }
    40% { transform: scaleY(0); }
    45% { transform: scaleY(1); }
    70% { transform: scaleY(1); }
    85% { transform: scaleY(0); }
    90% { transform: scaleY(1); }
    100% { transform: scaleY(1); }
}
.sns__link:hover #logo_github #oreille #droite-2,
.sns__link:hover #logo_github #oreille #gauche-2 {
    animation: earScale 1.5s infinite ease-in-out;
}
@keyframes earScale {
    0% { transform: scale(1); }
    20% { transform: scale(1.1); }
    40% { transform: scale(1.15); }
    60% { transform: scale(1.05); }
    80% { transform: scale(1.12); }
    100% { transform: scale(1); }
}
.sns__link:not(:hover) #logo_github #oreille #droite-2,
.sns__link:not(:hover) #logo_github #oreille #gauche-2 {
    animation: none;
    transform: scale(1);
}
#yeux{
    fill: var(--color-secondary);
}
.dark #yeux{
    fill: var(--color-primary);
}
/* END OF GITHUB */


/* TIKTOK */
#logo_tiktok {
    overflow: visible; 
}
#logo_tiktok #tiktok_rouge,
#logo_tiktok #tiktok_bleu {
    transition: transform 0.4s ease;
}
.sns__link:hover #logo_tiktok #tiktok_rouge {
    transform: translate(50px, 50px);
}
.sns__link:hover #logo_tiktok #tiktok_bleu {
    transform: translate(-50px, -50px);
}
/* END OF TIKTOK */


/* TWITCH */
#logo_twitch #bouche rect {
    transform: scale(0);
    transform-origin: center;
    transition: transform 0.3s ease;
    transform-origin: 60% 60%; 
}
.sns__link:hover #logo_twitch #bouche rect {
    transform: scale(1);
}
#logo_twitch #yeuxtwitch rect {
    transform-origin: center;
    transform: scaleY(1);
    transition: transform 0.2s ease;
}
.sns__link:hover #logo_twitch #yeuxtwitch rect {
    animation: blink 3s infinite;
}
@keyframes blink {
    0% { transform: scaleY(1); }
    10% { transform: scaleY(0); }
    20% { transform: scaleY(1); }
    30% { transform: scaleY(0); } 
    40% { transform: scaleY(1); }
    50% { transform: scaleY(1); }
    55% { transform: scaleY(0); }
    60% { transform: scaleY(1); }
    70% { transform: scaleY(0); }
    80% { transform: scaleY(1); }
    85% { transform: scaleY(0); }
    90% { transform: scaleY(1); }
    100% { transform: scaleY(1); }
}
#yeuxtwitch {
    fill: var(--color-primary);
}
.dark #yeuxtwitch {
    fill: var(--color-secondary);
}
/*END OF TWITCH */


/* CODEPEN */
#codepen-logo {
  width: 27px;
  height: 27px;
  margin: 0;
  border-radius: 5%;
  display: flex;
  justify-content: center;
  align-items: center;
}
    @media (max-width: 1200px) {
        #codepen-logo {
            scale: 0.8;
        }
    }

    @media (max-width: 768px) {
        #codepen-logo {
            scale: 0.7;
        }
    }

    @media (max-width: 576px) {
        #codepen-logo {
            scale: 0.5;
        }
    }
    @media (max-width: 265px) {
        #codepen-logo {
            scale: 0.3;
        }
    }
.cube {
  --color: currentColor;
  width: 27px;
  height: 16.2px;
  transform: rotateX(-35deg) rotateY(45deg);
  transition: transform 0s;
  transform-style: preserve-3d;
}
.face {
  border: 2.16px solid var(--color);
  border-radius: 1.08px;
  position: absolute;
  box-sizing: border-box;
}
.face-front, .face-back, .face-left, .face-right,
.face-front-in, .face-back-in, .face-left-in, .face-right-in {
  width: 27px;
  height: 16.2px;
}
.face-top, .face-bottom,
.face-top-in, .face-bottom-in {
  width: 27px;
  height: 27px;
}
.face-front {
  transform: translateZ(13.5px);
}
.face-front-in {
  transform: translateZ(11.34px);
}
.face-back {
  transform: translateZ(-13.5px) rotateY(180deg);
}
.face-back-in {
  transform: translateZ(-11.34px) rotateY(180deg);
}
.face-left {
  transform: translateX(-13.5px) rotateY(-90deg);
}
.face-left-in {
  transform: translateX(-11.34px) rotateY(-90deg);
}
.face-right {
  transform: translateX(13.5px) rotateY(90deg);
}
.face-right-in {
  transform: translateX(11.34px) rotateY(90deg);
}
.face-top {
  transform: translateY(-13.365px) rotateX(90deg);
}
.face-top-in {
  transform: translateY(-11.34px) rotateX(90deg);
}
.face-bottom {
  transform: translateY(2.43px) rotateX(-90deg);
}
.face-bottom-in {
  transform: translateY(2.565px) rotateX(-90deg);
}
#codepen-logo:hover .cube {
  transform: rotateX(-35deg) rotateY(135deg);
  transition: transform 500ms;
}
/* END OF CODEPEN */


/* DISCORD */
#dicord_over{
    overflow: visible;
}
.sns__link.disc:hover #dicord_Calque_1 {
    animation: scaleRotate1 1.2s ease-in-out;
    transform-origin: center;
    overflow: visible; 
}
.sns__link.disc:hover #dicord_Calque_2 {
    animation: scaleRotate2 1.2s ease-in-out 0.2s;
    transform-origin: center; 
    overflow: visible;
}
.sns__link.disc:hover #dicord_Calque_3 {
    animation: scaleRotate3 1.2s ease-in-out 0.4s;
    transform-origin: center; 
    overflow: visible;
}
@keyframes scaleRotate1 {
    0% {
        transform: scale(1) rotate(0deg);
    }
    50% {
        transform: scale(0.8) rotate(360deg);
    }
    100% {
        transform: scale(1) rotate(360deg);
    }
}
@keyframes scaleRotate2 {
    0% {
        transform: scale(1) rotate(0deg);
    }
    50% {
        transform: scale(1.1) rotate(-360deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}
@keyframes scaleRotate3 {
    0% {
        transform: scale(1) rotate(0deg);
    }
    50% {
        transform: scale(1.2) rotate(360deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}
/* END OF DISCORD */


/* WHATSAPP */
.sns__link:hover #logo_whatsapp_tel {
    animation: shake 1s infinite; 
    transform-origin: center; 
}
@keyframes shake {
    0%, 100% { transform: rotate(0deg); }
    10% { transform: rotate(-15deg); }
    20% { transform: rotate(15deg); }
    30% { transform: rotate(-15deg); }
    40% { transform: rotate(15deg); }
    50% { transform: rotate(-15deg); }
    60% { transform: rotate(15deg); }
    70% { transform: rotate(-15deg); }
    80% { transform: rotate(15deg); }
    90% { transform: rotate(-15deg); }
}
#logo_whatsapp {
    overflow: visible;
}
.sns__link:hover #logo_whatsapp_cercle {
    animation: move-then-rotate 3s cubic-bezier(0.7, 0, 0.3, 1) forwards;
    overflow: visible;
    transform-origin: bottom left;
}
@keyframes move-then-rotate {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    10% {
        transform: translate(150px, -250px) rotate(0deg);
    }
    90% {
        transform: translate(150px, -250px) rotate(-1080deg); 
    }
    100% {
        transform: translate(0, 0) rotate(-1080deg);
    }
}
/* END OF WHATSAPP */


/* YOUTUBE */
#youtubeplay {
    transform: scale(1);
    transition: transform 0.3s ease; /* Ajout de la transition pour scale */
    transform-origin: bottom center; /* Origine en bas au centre */
    fill: var(--color-secondary);
}
.dark #youtubeplay {
    fill: var(--color-primary);
}
.sns__link.yt:hover #youtubeplay {
    transform: scale(0); /* Réduction à l'échelle 0 lors du survol */
}
.sns__icon-hover .chatyt {
    opacity: 0;
    transform: translate(5px, 100px) scale(0);
    transition: opacity 0.3s ease, transform 0.3s ease, scale 0.3s; 
    transform-origin: bottom center;
}     
.sns__link.yt:hover .sns__icon-hover .chatyt {
    opacity: 1;
    transform: translate(5px, -160px) scale(0.5);;
}
#chatyt{
    fill:var(--color-secondary);
}
.dark #chatyt{
    fill:var(--color-primary);
}
/* END OF YOUTUBE */


/* FACEBOOK */
.sns__link.fb .sns__icon-origin {
    transition: transform 0.3s;
    transform-origin: bottom center;
    transition-timing-function: cubic-bezier(0, 1.05, 0.83, 1.43);
}
.sns__link.fb .sns__icon-hover {
    transform: scale(1.5) translateY(5%);
}
.sns__link.fb .sns__icon-hover .fb-line {
    stroke-dasharray: 3;
    stroke-dashoffset: 3;
}
.sns__link.fb .sns__icon-hover .fb-like {
    transition: transform 0.3s;
    transform: translateY(-20px);
}
.sns__link.fb:hover .sns__icon-origin {
    transform: scaleY(0);
    transition-timing-function: cubic-bezier(0, 1.05, 0.78, 0.98);
}
.sns__link.fb:hover .sns__icon-hover .fb-line {
    animation: iconFbLine 0.3s 0.1s forwards;
}
.sns__link.fb:hover .sns__icon-hover .fb-like {
    transform: translateY(0);
    transform-origin: bottom center;
    animation: iconFbLike 0.3s;
}
@keyframes iconFbLine {
    0%,
    20% {
        stroke-dashoffset: 3;
    }
    100% {
        stroke-dashoffset: 9;
    }
}
/* END OF FACEBOOK */


/* LINKEDIN */
.sns__link.linkedin .sns__icon-origin, .sns__link.linkedin .sns__icon-hover {
    transform-origin: 30% 29%;
    transition: transform 0.3s;
}
.sns__link.linkedin .sns__icon-hover {
    transform: scale(1.5) translateY(5%);
    transform: scale(0);
}
.sns__link.linkedin:hover .sns__icon-origin {
    transform: scale(0.4);
}
.sns__link.linkedin:hover .sns__icon-hover {
    transform: scale(1);
    transition-timing-function: cubic-bezier(0.27, 1.12, 0.65, 1.39);
}
/* END OF LINKEDIN */

/* INSTAGRAM */
.sns__link.ig .sns__icon-hover {
    opacity: 0;
    transition-delay: 0.3s;
}
.sns__link.ig .sns__icon-hover .ig-eye {
    transform: scaleY(0);
    transform-origin: 0% 23.5%;
}
.sns__link.ig .sns__icon-hover .ig-center,
.sns__link.ig .sns__icon-hover .ig-lens,
.sns__link.ig .sns__icon-hover .ig-heart {
    transition: transform 0.3s;
}
.sns__link.ig .sns__icon-hover .ig-center {
    transform-origin: center center;
}
.sns__link.ig .sns__icon-hover .ig-lens1 {
    transform: translate(-20%);
}
.sns__link.ig .sns__icon-hover .ig-lens2 {
    transform: translate(0, 20%);
}
.sns__link.ig .sns__icon-hover .ig-lens3 {
    transform: translate(20%);
}
.sns__link.ig .sns__icon-hover .ig-lens4 {
    transform: translate(0, -20%);
}
.sns__link.ig .sns__icon-hover .ig-heart {
    transform: scale(0);
    transform-origin: center center;
}
.sns__link.ig:hover .sns__icon-origin {
    opacity: 0;
    transition-delay: 0s;
}
.sns__link.ig:hover .sns__icon-hover {
    opacity: 1;
    transition-delay: 0s;
}
.sns__link.ig:hover .sns__icon-hover .ig-eye {
    animation: iconIgEye 2s infinite;
}
.sns__link.ig:hover .sns__icon-hover .ig-eye-left {
    animation-delay: 0.1s;
}
.sns__link.ig:hover .sns__icon-hover .ig-lens {
    transition-delay: 0.1s;
    transition-duration: 0.5s;
    transform: translate(0, 0%);
}
.sns__link.ig:hover .sns__icon-hover .ig-center {
    transform: scale(0);
    transition-delay: 1s;
}
.sns__link.ig:hover .sns__icon-hover .ig-heart {
    transform: scale(1.2) translateY(5%);
    transition-delay: 1.5s;
}
@keyframes iconIgEye {
    0% {
        transform: scaleY(0.1);
    }
    10%,
    100% {
        transform: scaleY(1);
    }
}
/* END OF INSTAGRAM */

/*----------END OF RESEAU SOCIAUX----------*/

/*--------------------END OF MENU BREADCRUMBS : SOCIALMEDIA, NAV, DARKMODEBUTTON--------------------*/


/*--------------------CLEARFIX: TEXTMORPH, UIUX, TYPEWRITE, BUTTONSCROLL--------------------*/
.clearfix {
	margin-top: 200px;
	margin-bottom: 10px;
    margin-right: 25px;
}
    @media (max-width: 1200px) {
        .clearfix {
            margin-top: 90px;
        }
    }

    @media (max-width: 992px) {
        .clearfix {
            margin-top: 70px;
        }
    }

    @media (max-width: 768px) {
        .clearfix {
            margin-top: 60px;
        }
    }

    /* Styles for Phones */
    @media (max-width: 576px) {
        .clearfix {
            margin-top: 40px;
        }
    }

    @media (max-width: 400px) {
        .clearfix {
            margin-top: 30px;
        }
    }

.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

/*---TEXT MORPHING---*/
#morph-container {
	width: 100%;
	top: 0;
	bottom: 0;
	filter: url(#morph-threshold) blur(0.1px);
}

#morph-text1, #morph-text2 {
	position: absolute;
	width: 100%;
	margin: 0px;
	font-size: 110pt;
	text-align: right;
	user-select: none;
}
    @media (max-width: 1200px) {
        #morph-text1, #morph-text2 {
            font-size: 90pt;
        }
    }

    @media (max-width: 992px) {
        #morph-text1, #morph-text2 {
            font-size: 65pt;
        }
    }

    @media (max-width: 768px) {
        #morph-text1, #morph-text2 {
            font-size: 50pt;
        }
    }

    /* Styles for Phones */
    @media (max-width: 576px) {
        #morph-text1, #morph-text2 {
            font-size: 35pt;
        }
    }

    @media (max-width: 400px) {
        #morph-text1, #morph-text2 {
            font-size: 20pt;
        }
    }

#morph-filters {
	margin: 0px;
	height: 0px;
	width: 0px;
}
/*---END OF TEXT MORPHING---*/

/*---UI/UX/TYPEWRITE---*/
.bottom-text {
    width: 200px;
    padding-bottom: 36px;
    margin-top: 130px;
	float: right;
	position: relative;
    right: 0px;
    top: 20px;
    height: 250px;
}

    @media (max-width: 1200px) {
        .bottom-text {
            width: 160px;
            margin-top: 105px;
        }
    }

    @media (max-width: 992px) {
        .bottom-text {
            width: 150px;
            margin-top: 75px;
        }
    }

    @media (max-width: 768px) {
        .bottom-text {
            width: 130px;
            margin-top: 55px;
        }
    }

    @media (max-width: 576px) {
        .bottom-text {
            width: 80px;
            margin-top: 30px;
        }
    }

    @media (max-width: 400px) {
        .bottom-text {
            width: 60px;
            margin-top: 10px;
        }
    }

.bottom-title {
    --line-progress: 0%;
    font-size: 50px;
    position: relative;
}
    @media (max-width: 1200px) {
        .bottom-title {
            font-size: 40px;
        }
    }

    @media (max-width: 992px) {
        .bottom-title {
            font-size: 35px;
        }
    }

    @media (max-width: 768px) {
        .bottom-title {
            font-size: 30px;
        }
    }

    /* Styles for Phones */
    @media (max-width: 576px) {
        .bottom-title {
            font-size: 20px;
        }
    }

    @media (max-width: 400px) {
        .bottom-title{
            font-size: 15px;
        }
    }

.bottom-top {
    justify-content: space-between;
    align-items: flex-start;
    display: flex;
}

.noOverflowWithSpan {
    overflow: hidden;
}

.bottom-title:before {
    content: "";
    width: var(--line-progress);
    background-color: var(--color-primary);
    height: 1px;
    position: absolute;
    top: 0;
    left: 0;
}

.dark .bottom-title:before {
    background-color: var(--color-secondary);
}

.bottom-square {
    background-color: var(--color-primary);
    width: 13px;
    height: 13px;
    margin-top: max(.6vw, 5px);
}
    @media (max-width: 1200px) {
        .bottom-square {
            width: 11px;
            height: 11px;
        }
    }
    @media (max-width: 992px) {
        .bottom-square {
            width: 9px;
            height: 9px;
        }
    }
    @media (max-width: 768px) {
        .bottom-square {
            width: 7px;
            height: 7px;
        }
    }
    @media (max-width: 576px) {
        .bottom-square {
            width: 6px;
            height: 6px;
        }
    }
    @media (max-width: 400px) {
        .bottom-square {
            width: 5px;
            height: 5px;
        }
    }

.dark .bottom-square {
    background-color: var(--color-secondary);
}

.text-about {
    padding-top: 18px;
    padding-bottom: 33px;
}
    @media (max-width: 1200px) {
        .text-about {
            padding-top: 16px;
        }
    }

    @media (max-width: 992px) {
        .text-about {
            padding-top: 14px;
        }
    }

    @media (max-width: 768px) {
        .text-about {
            padding-top: 10px;
        }
    }

    @media (max-width: 576px) {
        .text-about {
            padding-top: 8px;
            line-height: 0.8;
        }
    }

    @media (max-width: 400px) {
        .text-about {
            padding-top: 6px;
        }
    }

.typewrite {
	text-decoration: none;
	color: var(--color-primary);
	padding-top: 15px;
    padding-bottom: 15px;
    font-size: 20px;
}
    @media (max-width: 1200px) {
        .typewrite {
            font-size: 18px;
        }
    }
    @media (max-width: 992px) {
        .typewrite {
            font-size: 16px;
        }
    }
    @media (max-width: 768px) {
        .typewrite {
            font-size: 14px;
        }
    }
    /* Styles for Phones */
    @media (max-width: 576px) {
        .typewrite {
            font-size: 12px;
        }
    }
    @media (max-width: 400px) {
        .typewrite {
            font-size: 10px;
        }
    }

.dark .typewrite {
	color: var(--color-secondary);
}
/*---END OF UI/UX/TYPEWRITE---*/

/*---SCROLL BUTTON---*/
.button-container {
    display: flex;
    justify-content: center;
    align-items: center;
	width: 100%;
    padding-top: 50px;
}

.scroll-button {
    background-color: var(--color-primary);
    color: var(--color-secondary);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
}
    @media (max-width: 1200px) {
        .scroll-button {
            width: 45px;
            height: 45px;
            font-size: 23px;
        }
    }
    @media (max-width: 992px) {
        .scroll-button {
            width: 40px;
            height: 40px;
            font-size: 20px;
        }
    }
    @media (max-width: 768px) {
        .scroll-button {
            width: 35px;
            height: 35px;
            font-size: 18px;
        }
    }
    @media (max-width: 576px) {
        .scroll-button {
            width: 30px;
            height: 30px;
            font-size: 15px;
        }
    }
    @media (max-width: 400px) {
        .scroll-button {
            width: 25px;
            height: 25px;
            font-size: 12px;
        }
    }

.dark .scroll-button {
    background-color: var(--color-secondary);
    color: var(--color-primary);
}

.scroll-button:hover {
	animation: backgroundFill var(--animation-duration) var(--animation-timing) infinite;
}
/*---END OF SCROLL BUTTON---*/

/*--------------------END OF CLEARFIX: TEXTMORPH, UIUX, TYPEWRITE, BUTTONSCROLL--------------------*/


/*--------------------MAINCONTAINERCHANGING--------------------*/
/*---TITRE---*/
.titleacceuil {
    text-align: center;
    justify-content: center;
    margin-top: 220px;
    margin-bottom: 50px;
    font-size: 120pt;
    user-select: none;
    text-transform: uppercase;
}
    @media (max-width: 1200px) {
        .titleacceuil {
            font-size: 110pt;
        }
    }
    @media (max-width: 992px) {
        .titleacceuil {
            font-size: 70pt;
        }
    }
    @media (max-width: 768px) {
        .titleacceuil {
            font-size: 50pt;
        }
    }
    /* Styles for Phones */
    @media (max-width: 576px) {
        .titleacceuil {
            font-size: 25pt;
        }
    }
    @media (max-width: 400px) {
        .titleacceuil {
            font-size: 15pt;
        }
    }
/*---END OF TITRE----*/  


/*---A PROPOS---*/
#section1 {
    height: 5000px;
}

.bakcgourndimg{
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 1000px; /* Prend toute la largeur de l'écran */
    height: auto;  /* Hauteur auto pour respecter les proportions */
    object-fit: contain;
    overflow: hidden; /* Pas nécessaire ici mais ok pour précaution */
    box-sizing: border-box;
}
    @media screen and (max-width: 1255px) {
    .bakcgourndimg {
        width: 500px; 
        left: 50px;
        }
    }
    @media screen and (max-width: 720px) {
    .bakcgourndimg {
        width: 250px; 
        left: 50px;
        }
    }
    @media screen and (max-width: 576px) {
    .bakcgourndimg {
    opacity: 0;
        }
    }

.dark .bakcgourndimg {
opacity: 0;
}


.bakcgourndimg_neg {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 1000px;
    height: auto;  
    object-fit: contain;
    overflow: hidden; /* Pas nécessaire ici mais ok pour précaution */
    box-sizing: border-box;
    opacity: 0;
}
    @media screen and (max-width: 1255px) {
    .bakcgourndimg_neg {
        width: 500px; 
        left: 50px;
        }
    }
    @media screen and (max-width: 720px) {
    .bakcgourndimg_neg{
        width: 250px; 
        left: 50px;
        }
    }
    @media screen and (max-width: 576px) {
    .bakcgourndimg_neg {
    opacity: 0;
        }
}

.dark .bakcgourndimg_neg {
  opacity: 1;
}

#section2 {
   height: 5000px;
}
#section3 {
    height: 5000px;
}
#section4 {
    height: 5000px;
}



#background_propos{
    width: 100%;
}

#logo_lm_degrade_propos{
    width: 70%;
    bottom: 0%;
}

#propos_img_wrapper {
    position: relative; 
    margin-bottom: 50px;
    height: 70px;
}

#logo_leo_monnerat_propos{
    width: 50%;
    position: absolute;
    object-fit: cover; /* ou contain selon ton besoin */
    left:0vw;
}

.propos_progress-bar a {
    color: var(--color-secondary);
    position: relative;
    opacity: 0;
    text-wrap: nowrap;
    display: block; /* transforme le lien en bloc cliquable */
    padding: 0.8em 1.2em;
}

.dark .propos_progress-bar a {
    color: var(--color-primary);
}
    
.propos_main {
    padding-right: 50px;
    width: 100%;
}
    @media screen and (max-width: 665px) {
        .propos_main {
            padding-left: 0px;
        }
    }
@media screen and (max-width: 578px) {
    .propos_main {
    padding-right: 10px;
    }
}
#propos_sidebar {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    z-index: 99;
}
    
.propos_progress-bar {
    position: fixed;
    display: flex;
    gap: 1rem;
    border-radius: 5px;
    padding: 1rem;
    cursor: pointer;
    flex-direction: column;
    z-index: 99;
}
    @media (max-width: 576px) {
    .propos_progress-bar  {
    padding: 0px;
    gap: 5px;
    top: 0px;
    }
}
    @media (max-width: 320px) {
    .propos_progress-bar  {
    display: none;
    }
}

.propos_content {
    position: relative;
}
  
.propos_progress-bar li {
    list-style: none;
    width: 1rem;
    height: 1rem;
    background-color: var(--color-primary);
}
    @media (max-width: 576px) {
    .propos_progress-bar li {
        width: 100%;
        height: 100%;
    }

    .propos_progress-bar a {
        opacity: 1;
        text-decoration: none;
        font-size: 7px;
    }
}

.dark .propos_progress-bar li {
    background-color: var(--color-secondary);
}
    
.propos_progress-bar:hover li {
    width: 100%;
    height: 100%;
}
    
.propos_progress-bar li.active {
    animation: backgroundFill var(--animation-duration) linear infinite;
    transform: scale(1.1);
    transition: all 0.2s ease-in-out;
}
    
.propos_progress-bar:hover a {
    opacity: 1;
    text-decoration: none;
    font-size:0.7em;
}



.titre_propos{
    padding-bottom: 20px;
    margin-top: 40px;
}

    /*CV TIMELINE */
    #CV_timeline_timeline {
        list-style: none;
        margin: 0px 0 0px 125px;
        padding-left: 40px;
    }
    
    #CV_timeline_timeline li {
        margin-bottom: 40px;
        margin-top: 20px;
        position: relative;
    }
    
    #CV_timeline_timeline li p {
        margin: 0 0 15px;
    }
    
    .CV_timeline_date {
        margin-top: -10px;
        top: 50%;
        left: -158px;
        font-size: 0.95em;
        line-height: 20px;
        position: absolute;
    }
    
    .CV_timeline_circle {
        margin-top: -10px;
        top: 50%;
        left: -43px;
        width: 20px;
        height: 20px;
        background: var(--color-primary);
        border-radius: 50%;
        display: block;
        position: absolute;
    }

    .dark .CV_timeline_circle {
        background: var(--color-secondary);
    }
    
    .CV_timeline_content {
        max-height: 20px;
        padding: 50px 20px 0;
        border-color: transparent;
        border-width: 2px;
        border-style: solid;
        border-radius: 0.5em;
        position: relative;
    }
    
    .CV_timeline_content::before,
    .CV_timeline_content::after {
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        pointer-events: none;
        right: 100%;
    }
    
    .CV_timeline_content::before {
        border-right-color: inherit;
        border-width: 20px;
        top: 50%;
        margin-top: -20px;
    }
    
    .CV_timeline_content::after {
        border-right-color: var(--color-primary);
        border-width: 10px;
        top: 50%;
        margin-top: -9px;
    }

    .dark .CV_timeline_content::after {
        border-right-color: var(--color-secondary);
    }

    .CV_timeline_content p {
        max-height: 0;
        color: transparent;
        word-break: break-word;
        overflow: hidden;
    }
    
    .CV_timeline_work label {
        position: absolute;
        z-index: 100;
        cursor: pointer;
        top: 16px;
        left: 10px;
        transition: transform 0.2s linear;
    }
    
    .CV_timeline_radio {
        display: none;
    }
    
    .CV_timeline_radio:checked + .CV_timeline_relative label {
        cursor: auto;
        transform: translateX(32px);
    }
    
    .CV_timeline_radio:checked + .CV_timeline_relative .CV_timeline_circle {
        animation: backgroundFill var(--animation-duration) linear infinite;
    }
    
    .CV_timeline_radio:checked ~ .CV_timeline_content {
        max-height: 180px;
        margin-right: 20px;
        transform: translateX(20px);
        transition: max-height 0.4s linear, border-color 0.5s linear, transform 0.2s linear;
    }
    
    .CV_timeline_radio:checked ~ .CV_timeline_content p {
        max-height: 200px;
        color: var(--color-primary);
    }
    
    .dark .CV_timeline_radio:checked ~ .CV_timeline_content p {
        color: var(--color-secondary);
    }
    
    /* mobile phones (vertical version only) */
    @media screen and (max-width: 767px) {
        #CV_timeline_timeline {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        }
        #CV_timeline_timeline li {
        margin: 50px 0;
        }
        .CV_timeline_work label {
        width: 85%;
        font-size: 1.1em;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        display: block;
        transform: translateX(18px);
        }
        .CV_timeline_content {
        padding-top: 45px;
        border-color: #eee9dc;
        }
        .CV_timeline_content::before,
        .CV_timeline_content::after {
        border: solid transparent;
        bottom: 100%;
        }
        .CV_timeline_content::before {
        border-bottom-color: inherit;
        border-width: 17px;
        top: -16px;
        left: 50px;
        margin-left: -17px;
        }
        .CV_timeline_content::after {
        border-bottom-color: #48b379;
        border-width: 20px;
        top: -20px;
        left: 50px;
        margin-left: -20px;
        }
        .CV_timeline_content p {
        font-size: 0.9em;
        line-height: 1.4;
        }
        .CV_timeline_circle,
        .CV_timeline_date {
        display: none;
        }
    }
    /*END OF CV TIMELINE */

.link_propos {
    text-decoration: none;
    font-style: italic;
    color: inherit;
}

.link_propos:hover {
color: var(--color-accent-light);
}

#competencelm {
    fill: var(--color-primary);   
}

.dark #competencelm {
    fill: var(--color-secondary);   
}

.liste_comp {
    list-style:none;
    line-height: 2;
}

.liste_competence_cfc {
    line-height: 2;
    padding-left: 1.2em; 
    margin-bottom: 40px;
    margin-top: 20px;
}

    /*---CATS PAYING---*/
    .container_bongo-cat  {
        width: 100%;
        position: relative; 
    }
        
    .container_bongo-cat svg {
        height: auto;
        overflow: visible;
        width: 50%;
        position: absolute; /* Pour que le right fonctionne */
        right: 1%;
        margin-top: 500px;
    }

    #bongo-cat {
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 4;
        fill: transparent; /* ✅ C'est ça qui te manque */
    }

    #bongo-cat .laptop-cover,
    #bongo-cat .headphone .band {
        fill: none;
    }

    #bongo-cat .paw,
    #bongo-cat .head {
        stroke: var(--color-yellow);
        background-color: transparent;
    }

    #bongo-cat .laptop-keyboard {
        stroke-width: 2;
    }

    #bongo-cat .terminal-code {
        stroke-width: 5;
    }

    #bongo-cat .music .note,
    #bongo-cat .laptop-base,
    #bongo-cat .laptop-cover,
    #bongo-cat .paw .pads {
        stroke: var(--color-red);
    }

    #bongo-cat .table line,
    #bongo-cat .headphone .band,
    #bongo-cat .headphone .speaker path:nth-child(3) {
        stroke: var(--color-green);
    }

    #bongo-cat .terminal-frame,
    #bongo-cat .laptop-keyboard,
    #bongo-cat .headphone .speaker path:nth-child(2) {
        stroke: var(--color-blue);
    }

    #bongo-cat .terminal-code,
    #bongo-cat .headphone .speaker path:first-child {
        stroke: var(--color-purple);
    }
    /*---ENDS OF CATS PAYING---*/

    /*---Text Wrinting---*/
    #textwriting_propos {
        font-family: inherit;
    }
    .code{
        font-size: 16px;
        text-align: right;
    }
    pre.code {
    white-space: pre-wrap;      /* Permet au texte de passer à la ligne */
    }
    @media screen and (max-width: 940px) {
    pre.code {
        font-size: 12px;
        margin-top: -10px;
        }
    }
    @media screen and (max-width: 576px) {
    pre.code  {
        font-size: 8px;
        }
    }

    .blink {
        opacity: 1;
        animation: blink 1s linear infinite;
        color:inherit;
    }
        @keyframes blink {
        0.01% {
            opacity: 0;
        }
        50% {
            opacity: 0;
        }
        50.01% {
            opacity: 1;
        }
    }
    /*---END OF Text Wrinting---*/

  
/*--- COMPETENCE CAROUSEL---*/
:root {
    --gap: 8px;
    --base: clamp(2rem, 8cqi, 80px);
    --easing: linear(
      0 0%,
      0.1538 4.09%,
      0.2926 8.29%,
      0.4173 12.63%,
      0.5282 17.12%,
      0.6255 21.77%,
      0.7099 26.61%,
      0.782 31.67%,
      0.8425 37%,
      0.8887 42.23%,
      0.9257 47.79%,
      0.9543 53.78%,
      0.9752 60.32%,
      0.9883 67.11%, 
      0.9961 75%,
      1 100%
    );
    --speed: 0.6s;
}

@layer base {
  :root {
    --font-size-min: 16;
    --font-size-max: 20;
    --font-ratio-min: 1.2;
    --font-ratio-max: 1.33;
    --font-width-min: 375;
    --font-width-max: 1500;
  }
}

.list_comp_carousel{
    opacity: 1;
}
#comp_carousel{
    width: 100%;
}
#comp_carousel li :is(.picto_comp_carousel, h3) {
    opacity: 0.6;
    transition: opacity calc(var(--speed) * 1.2) var(--easing);
}

#comp_carousel li :is(a, p, .list_comp_carousel) {
    opacity: 0;
    transition: opacity calc(var(--speed) * 1.2) var(--easing);
    width: fit-content;
}

#comp_carousel li .img_comp_carousel {
    filter: grayscale(1) brightness(1.5);
    scale: 1.1;
    transition-property: filter, scale;
    transition-duration: calc(var(--speed) * 1.2);
    transition-timing-function: var(--easing);
}

#comp_carousel [data-active='true'] :is(a, p, h3, h4, .picto_comp_carousel, .list_comp_carousel) {
    opacity: var(--opacity, 1);
}

.dark #comp_carousel [data-active='true'] :is( .picto_comp_carousel) {
    opacity: var(--opacity, 0);
}

#comp_carousel [data-active='true'] :is(a, p, .list_comp_carousel) {
    transition-delay: calc(var(--speed) * 0.25);
}

#comp_carousel [data-active='true'] .img_comp_carousel {
    filter: grayscale(0) brightness(1);
    scale: 1;
    transition-delay: calc(var(--speed) * 0.25);
}

#comp_carousel article {
    width:100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 1rem;
    padding-inline: calc(var(--base) * 0.5 - 9px);
    padding-bottom: 1rem;
    overflow: hidden;

    h3 {
      position: absolute;
      top: 1rem;
      left: calc(var(--base) * 0.5);
      transform-origin: 0 50%;
      rotate: 90deg;
      font-size: 1rem;
    }

         /* h4 {
font-size: 1rem;
    }*/

    .picto_comp_carousel {
      width: 18px;
    }

        .picto_comp_carousel_W {
      width: 18px;
    }

    p,  .list_comp_carousel {
      /*font-size: 13px;*/
      text-wrap: balance;
      line-height: 1.5;
      width: 100%;

    }

    a {
      position: absolute;
      bottom: 1rem;
      height: 18px;
      line-height: 1;
      color: inherit;
    
      &:is(:focus-visible, :hover) {
        outline: none;
        span {
          text-decoration: underline;
          text-underline-offset: 4px;
        }
      }

      span {
        display: inline-block;
        line-height: 18px;
        translate: calc(var(--base) * 0.5);
        font-weight: 500;
      }
    }

    .img_comp_carousel {
      position: absolute;
      pointer-events: none;
      inset: 0;
      width: 100%;
      height: auto;
      right: 0;
      object-fit: cover;
      mask: radial-gradient(100% 100% at 100% 0, #dbdbdb, #0000);
    }
}

#comp_carousel ul {
    display: grid;
    container-type: inline-size;
    grid-template-columns: 10fr 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: var(--gap);
    list-style-type: none;
    justify-content: center;
    padding: 0;
    height: clamp(300px, 40dvh, 474px);
    margin: 0;
    width: calc(
      ((var(--items) - 1) * var(--base)) + ((var(--items) - 1) * var(--gap)) +
        var(--ideal)
    );
    width: 100%;
    max-width: calc(100% - 4rem);
    transition: grid-template-columns var(--speed) var(--easing);
  }

#comp_carousel li {
    /* outline: 4px dashed canvasText; */
    /* background: var(--color-secondary); */
    position: relative;
    overflow: hidden;
    min-width: var(--base);
    height: 750px;
    border: 1px solid color-mix(in hsl, canvas, canvasText 50%);
  }
 .dark #comp_carousel li {
    /* outline: 4px dashed canvasText; */
    background: var(--color-primary);
  }

#comp_carousel :where(.fluid) {
    --fluid-min: calc(
      var(--font-size-min) * pow(var(--font-ratio-min), var(--font-level, 0))
    );
    --fluid-max: calc(
      var(--font-size-max) * pow(var(--font-ratio-max), var(--font-level, 0))
    );
    --fluid-preferred: calc(
      (var(--fluid-max) - var(--fluid-min)) /
        (var(--font-width-max) - var(--font-width-min))
    );
    --fluid-type: clamp(
      (var(--fluid-min) / 16) * 1rem,
      ((var(--fluid-min) / 16) * 1rem) -
        (((var(--fluid-preferred) * var(--font-width-min)) / 16) * 1rem) +
        (var(--fluid-preferred) * var(--variable-unit, 100vi)),
      (var(--fluid-max) / 16) * 1rem
    );
    font-size: var(--fluid-type);
  }

.bullet {
  padding-left: 1rem;
  position: relative;
}

.bullet::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: currentColor;
}

.picto_wrapper {
  position: relative;
}
.picto_wrapper .picto_comp_carousel {
  position: absolute;
}


/*---END OF COMPETENCE CAROUSEL---*/


/*---END OF A PROPOS---*/
    



/*---BUTTON CONTACT ME---*/
#custom-container {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 50px;
}

button {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
}

button.custom-learn-more {
  width: 12rem;
  height: auto;
}

button.custom-learn-more .custom-circle {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: relative;
  display: block;
  margin: 0;
  width: 3rem;
  height: 3rem;
  background: var(--color-primary);
  border-radius: 1.625rem;
}

.dark button.custom-learn-more .custom-circle {
	background: var(--color-secondary);
}

button.custom-learn-more .custom-circle .custom-icon {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: var(--color-secondary);
}

.dark button.custom-learn-more .custom-circle .custom-icon {
	background: var(--color-primary);
}

button.custom-learn-more .custom-circle .custom-icon.custom-arrow {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  left: 0.625rem;
  width: 1.125rem;
  height: 0.125rem;
  background: none;
}

button.custom-learn-more .custom-circle .custom-icon.custom-arrow::before {
  position: absolute;
  content: '';
  top: -0.25rem;
  right: 0.0625rem;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 0.125rem solid var(--color-secondary);
  border-right: 0.125rem solid var(--color-secondary);
  transform: rotate(45deg);
}

.dark button.custom-learn-more .custom-circle .custom-icon.custom-arrow::before {
	border-top: 0.125rem solid var(--color-primary);
	border-right: 0.125rem solid var(--color-primary);
}

button.custom-learn-more .custom-button-text {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.75rem 0;
  margin: 0 0 0 1.85rem;
  color: var(--color-primary);
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

.dark button.custom-learn-more .custom-button-text {
	color: var(--color-secondary);
}

button:hover .custom-circle {
  width: 100%;
}

button:hover .custom-circle .custom-icon.custom-arrow {
  background: var(--color-secondary);
  transform: translate(1rem, 0);
}

.dark button:hover .custom-circle .custom-icon.custom-arrow {
	background: var(--color-primary);
}

button:hover .custom-button-text {
  color: var(--color-secondary);
}

.dark button:hover .custom-button-text {
	color: var(--color-primary);
  }
/*---END OF BUTTON CONTACT ME---*/


/*---TABS---*/
.maintabs {
	text-align: right;
    max-width:800px;
    float: right;
    display: flex;
        flex-direction: column; /* ou row selon disposition */
    align-items: flex-end;  /* aligne à droite */
}

@media screen and (max-width: 940px) {
 .maintabs {
        max-width:400px;
    }
}
@media screen and (max-width: 680px) {
 .maintabs {
        max-width:200px;
    }
}

.maintabs p {
	display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    line-height: 2;
}

.tabs {
    display: flex;
    flex-wrap: wrap;
}

@media (max-width: 576px) {
    .tabs {
        flex-direction: column;
        align-items: stretch;
    }
}

.tab-content {
    height: 400px;
    font-size: 15px;
}
@media screen and (max-width: 1500px) {
 .tab-content {
        font-size: 15px;
    }
}
    @media screen and (max-width: 940px) {
    .tab-content{
        font-size: 12px;
        }
    }
    @media screen and (max-width: 576px) {
    .tab-content {
        font-size: 8px;
        }
    }

.tabs input[name=tabs] {
    display: none;
}

input#styles:checked + label[for=styles],
input#typography:checked + label[for=typography],
input#police:checked + label[for=police],
input#tabsme:checked + label[for=tabsme] {
    background-color: var(--color-primary);
    color: var(--color-secondary);
}

.dark input#styles:checked + label[for=styles],
.dark input#typography:checked + label[for=typography],
.dark input#police:checked + label[for=police],
.dark input#tabsme:checked + label[for=tabsme]
 {
    background-color: var(--color-secondary);
    color: var(--color-primary);
}

/* Tabs Label */
.tabs label {
    display: inline-block;
    padding: 14px 20px;
	margin: 0px;
    text-align: center;
    cursor: pointer;
    outline: none;
    color: var(--color-primary);
    font-size: 15px;
    font-weight: 400;
    -webkit-font-smoothing: subpixel-antialiased;
    -webkit-text-stroke: 1px transparent;
        flex: 1;
}
    @media screen and (max-width: 940px) {
    .tabs label{
        font-size: 12px;
        padding: 14px 20px;
        }
    }
    @media screen and (max-width: 576px) {
    .tabs label  {
        font-size: 8px;
        padding: 10px 16px;
        }
    }

.dark .tabs label {
    color: var(--color-secondary);
}

/* Tab Content */
.tab-content .content {
    display: none;
}

.tab-content .content.active {
    display: block;
}
/*---END OF TABS---*/


/*------------------------------END OF MAINS CONTAINER CHANGE------------------------------*/


/*------------------------------CAT------------------------------*/
.cat {
	position: fixed; 
	bottom: -120px;     
	right: -50px;       
	width: 200px;     
	height: auto;    
	z-index: 3;
	cursor: pointer;
}

.cat:hover{
	transform: translateY(-120px);
	right: 0px; 
	animation-duration: 2s;
}
    @media screen and (max-width: 576PX) {
    .cat{
        display: none;
        }
    }

/*------------------------------END OF CAT------------------------------*/


/*------------------------------FOOTER------------------------------*/
#footer {
    margin-top: 10vh;
    z-index: 500;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: flex-start;
    padding: 5rem 2vw;
    position: relative;
    flex-wrap: wrap; 
}

/* Style pour le texte dans le footer */
.pfooter {
    color: var(--color-secondary);
    padding-top: 5px;
}

/*Style pour l'icône SVG dans le footer*/
.navigation-link__icon_logo_footer {
    min-width: 50px;
    width: 50px; /*Largeur fixe de l'icône*/
    fill: var(--color-secondary);
}

/*Style pour l'effet de fond avant du footer*/
footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        rgba(0, 0, 0, 0) 5%,
        rgba(0, 0, 0, 0.3) 20%,
        rgba(0, 0, 0, 0.6) 30%,
        rgba(0, 0, 0, 0.8) 40%,
        rgba(0, 0, 0, 1) 50%,
        rgb(0, 0, 0)
    );
    z-index: -7;
}

/*Style pour l'effet de flou en arrière-plan*/
.backdrop {
    z-index: -5;
    position: absolute;
    inset: 0;
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    mask-image: linear-gradient(
        rgba(0, 0, 0, 0),
        rgba(0, 0, 0, 0.5) 10%,
        rgba(0, 0, 0, 0.8) 20%,
        rgba(0, 0, 0, 1) 30%,
        rgb(0, 0, 0)
    );
    -webkit-mask-image: linear-gradient(
        rgba(0, 0, 0, 0),
        rgba(0, 0, 0, 0.5) 10%,
        rgba(0, 0, 0, 0.8) 20%,
        rgba(0, 0, 0, 1) 30%,
        rgb(0, 0, 0)
    );
}

/*Style pour les colonnes du footer*/
.fcol {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: calc(0.3 * var(--m)) calc(0.8 * var(--m));
    width: 28%;
    flex: 1 1 28%; /*Ajustement pour que les colonnes occupent toute la largeur sur les petits écrans*/
}
	@media screen and (max-width: 1200px) {
		.fcol {
			width: 45%; /*Réduire la largeur des colonnes sur les écrans moyens*/
		}
	}

	@media screen and (max-width: 768px) {
		.fcol {
			width: 100%; /*Pleine largeur sur les petits écrans*/
			margin-bottom: 2rem; /*Espacement entre les colonnes*/
		}
	}

/*Style pour les colonnes spécifiques du footer*/
.fcol2,
.fcol3 {
	color: var(--color-secondary);
}

.fcol2 p,
.fcol3 p,
.fcol2 h2,
.fcol3 h2 {
	margin-bottom: 15px;
}

/*Style pour les images sociales*/
.fimg {
    height: calc(0.3 * var(--m));
    object-fit: cover;
}

/*Style pour la disposition des réseaux sociaux*/
.social_footer {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 1rem;
	margin-bottom: 15px;
}

/*Style pour les liens des réseaux sociaux*/
.link {
    width: calc(0.8 * var(--m));
    height: calc(0.8 * var(--m));
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: calc(0.1 * var(--m));
    display: flex;
    justify-content: center;
    align-items: center;
}

/*Style pour l'icône SVG dans le footer*/
.logolm_footer {
    min-width: 50px;
    width: 50px; /*Largeur fixe de l'icône*/
    fill: var(--color-secondary);
}

.menu_footer{
    text-decoration: none;
    color: inherit;
    line-height: 2;
}
.menu_footer:hover{
    color: var(--color-accent-light);
}

/*Style pour les éléments du footer*/
.footer-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap; /*Permettre l'enroulement des éléments sur des écrans plus petits*/
}

/*Style pour l'icône dans les éléments du footer*/
.icon_footer {
    width: 30px;
    min-width: 20px;
    height: auto;
    margin-right: 10px;
    fill:var(--color-secondary);
}

/*Style pour le texte dans les éléments du footer*/
.pfooter2 {
    margin: 0;
    color: var(--color-secondary);
    font-size: smaller;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*Pour ajuster le comportement sur les petits écrans */
@media screen and (max-width: 768px) {
    .pfooter2 {
        white-space: normal; /*Permettre au texte de passer à la ligne*/
        text-overflow: clip; /*Supprimer les points de suspension en cas de débordement*/
    }
}
/*------------------------------END OF FOOTER------------------------------*/