@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); 
@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans&family=Poppins:ital@1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital@1&display=swap');

/*|==============================================| Base |==============================================|*/
html {
    scroll-behavior:smooth;
    width:100%;
}

body {
    margin:0;
    top:0;
    width:100%;
} 

section {
    max-width:1200px;
    width:80%;
    margin-left:auto;
    margin-right:auto;
}

h1 {
	line-height:30px;
	color:white;
}

h2 {
    font-size:28px;
    color:white;
}

p {
    font-size:20px;
}

/*|==============================================| Header / Footer |==============================================|*/

header {
    position:fixed;
    height:100px;
    width:100%;
    top:0;
    z-index:5;
    background-color:#E8E8E8;
}

footer {
    display:flex;
  	justify-content:space-around;
    width:100%;
	height:100px;
	background-color:#E8E8E8;
}

/*|------------------------------| Conteneur des boutons + caractéristiques des boutons du header / footer |------------------------------|*/

#h-content, #h-content2, #f-content {
    display:flex;
    flex-direction:row;
    max-width:90%;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    background-color:#E8E8E8;
}

.h-items, #h-items2, .f-items {
	display:flex;
	align-items:center;
  	justify-content:center;
    text-align:center;
    width:100%;
    text-decoration:none;
    font-family:'Roboto';
    font-weight:bold;
    font-size:20px;
    color:#1a1a1a;
}

.h-items, #h-items2 {
    line-height:100px;

    filter:drop-shadow(0 2mm 0.5mm grey);
    transition:0.08s ease-in;
    -webkit-transition:0.08s ease-in;
}

.f-items {
    flex-direction:column;
}

/*---| Effets d'animation sur les boutons du header |---*/

.h-items:hover, #h-items2:hover{
    background-color:#E8E8E8;
    transition:0.2s ease-in-out;
    cursor:pointer;
}

/*---| Bouton affiché/non-affiché dans le header (au bout d'une certaine taille) |---*/

#h-show, #planet-header {
    display:none;
    width:80px;
	height:80px;
	background-repeat:no-repeat;
	background-size:48px 48px;
	background-position:center;
}

#h-show {
    margin-left:10px;
	margin-top:10px;
    float:left;
    background-image:url("./images/menu_icon.png");
}

#planet-header {
    margin-right:10px;
    float:right;
}

#logo-menu {
    display:flex;
    width:50px;
    height:50px;
    margin:auto;
    text-align:center;
}

#logo-planet {
    display:flex;
    justify-content: center;
    align-items:center;
    width:100%;
    height:100%;
}

#h-show:hover, #logo-menu:hover {
	cursor:pointer;
    filter: opacity(0.5) drop-shadow(0 0 0 #b62121);
    transition: 0.15s ease-in;
}

#h-hide {
	display:none;
	height:50px;
}

/*|------------------------------| Ancrage |------------------------------|*/

#second-anchor, #third-anchor, #fourth-anchor, #fifth-anchor{
    padding-top:100px;
}

/*|------------------------------| Contenu première page |------------------------------|*/

/*---| Décalage par rapport au header |---*/

#index-section {
	margin-top:100px;
    max-width:none;
	width:100%;
}

/*---| Conteneur de la première page* |---*/

.container-1, #container-mlegales {
    display:flex;
	justify-content:center;
    position:relative;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    width:100%;
    background-color:#0C0B0B;
}

/*---| Arrière-plan sur le thème de l'espace ---|*/

.container-1 .space, #container-mlegales .space {
    height: 1px;
    width: 1px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: -42vw -4vh 0px 0px #fff,25vw -41vh 0px 0px #fff,-20vw 49vh 0px 1px #fff,5vw 40vh 1px 1px #fff,29vw 19vh 1px 0px #fff,-44vw -13vh 0px 0px #fff,46vw 41vh 0px 1px #fff,-3vw -45vh 0px 1px #fff,47vw 35vh 1px 0px #fff,12vw -8vh 1px 0px #fff,-34vw 48vh 1px 1px #fff,32vw 26vh 1px 1px #fff,32vw -41vh 1px 1px #fff,0vw 37vh 1px 1px #fff,34vw -26vh 1px 0px #fff,-14vw -49vh 1px 0px #fff,-12vw 45vh 0px 1px #fff,-44vw -33vh 0px 1px #fff,-13vw 41vh 0px 0px #fff,-36vw -11vh 0px 1px #fff,-23vw -24vh 1px 0px #fff,-38vw -27vh 0px 1px #fff,16vw -19vh 0px 0px #fff,28vw 33vh 1px 0px #fff,-49vw -4vh 0px 0px #fff,16vw 32vh 0px 1px #fff,36vw -18vh 1px 0px #fff,-25vw -30vh 1px 0px #fff,-23vw 24vh 0px 1px #fff,-2vw -35vh 1px 1px #fff,-25vw 9vh 0px 0px #fff,-15vw -34vh 0px 0px #fff,-8vw -19vh 1px 0px #fff,-20vw -20vh 1px 1px #fff,42vw 50vh 0px 1px #fff,-32vw 10vh 1px 0px #fff,-23vw -17vh 0px 0px #fff,44vw 15vh 1px 0px #fff,-40vw 33vh 1px 1px #fff,-43vw 8vh 0px 0px #fff,-48vw -15vh 1px 1px #fff,-24vw 17vh 0px 0px #fff,-31vw 50vh 1px 0px #fff,36vw -38vh 0px 1px #fff,-7vw 48vh 0px 0px #fff,15vw -32vh 0px 0px #fff,29vw -41vh 0px 0px #fff,2vw 37vh 1px 0px #fff,7vw -40vh 1px 1px #fff,15vw 18vh 0px 0px #fff,25vw -13vh 1px 1px #fff,-46vw -12vh 1px 1px #fff,-18vw 22vh 0px 0px #fff,23vw -9vh 1px 0px #fff,50vw 12vh 0px 1px #fff,45vw 2vh 0px 0px #fff,14vw -48vh 1px 0px #fff,23vw 43vh 0px 1px #fff,-40vw 16vh 1px 1px #fff,20vw -31vh 0px 1px #fff,-17vw 44vh 1px 1px #fff,18vw -45vh 0px 0px #fff,33vw -6vh 0px 0px #fff,0vw 7vh 0px 1px #fff,-10vw -18vh 0px 1px #fff,-19vw 5vh 1px 0px #fff,1vw 42vh 0px 0px #fff,22vw 48vh 0px 1px #fff,39vw -8vh 1px 1px #fff,-6vw -42vh 1px 0px #fff,-47vw 34vh 0px 0px #fff,-46vw 19vh 0px 1px #fff,-12vw -32vh 0px 0px #fff,-45vw -38vh 0px 1px #fff,-28vw 18vh 1px 0px #fff,-38vw -46vh 1px 1px #fff,49vw -6vh 1px 1px #fff,-28vw 18vh 1px 1px #fff,10vw -24vh 0px 1px #fff,-5vw -11vh 1px 1px #fff,33vw -8vh 1px 0px #fff,-16vw 17vh 0px 0px #fff,18vw 27vh 0px 1px #fff,-8vw -10vh 1px 1px #fff;
    box-shadow: 24vw 9vh 1px 0px #fff,12vw -24vh 0px 1px #fff,-45vw -22vh 0px 0px #fff,-37vw -40vh 0px 1px #fff,29vw 19vh 0px 1px #fff,4vw -8vh 0px 1px #fff,-5vw 21vh 1px 1px #fff,-27vw 26vh 1px 1px #fff,-47vw -3vh 1px 1px #fff,-28vw -30vh 0px 1px #fff,-43vw -27vh 0px 1px #fff,4vw 22vh 1px 1px #fff,36vw 23vh 0px 0px #fff,-21vw 24vh 1px 1px #fff,-16vw 2vh 1px 0px #fff,-16vw -6vh 0px 0px #fff,5vw 26vh 0px 0px #fff,-34vw 41vh 0px 0px #fff,1vw 42vh 1px 1px #fff,11vw -13vh 1px 1px #fff,48vw -8vh 1px 0px #fff,22vw -15vh 0px 0px #fff,45vw 49vh 0px 0px #fff,43vw -27vh 1px 1px #fff,20vw -2vh 0px 0px #fff,8vw 22vh 0px 1px #fff,39vw 48vh 1px 1px #fff,-21vw -11vh 0px 1px #fff,-40vw 45vh 0px 1px #fff,11vw -30vh 1px 0px #fff,26vw 30vh 1px 0px #fff,45vw -29vh 0px 1px #fff,-2vw 18vh 0px 0px #fff,-29vw -45vh 1px 0px #fff,-7vw -27vh 1px 1px #fff,42vw 24vh 0px 0px #fff,45vw -48vh 1px 0px #fff,-36vw -18vh 0px 0px #fff,-44vw 13vh 0px 1px #fff,36vw 16vh 0px 1px #fff,40vw 24vh 0px 0px #fff,18vw 11vh 0px 0px #fff,-15vw -23vh 1px 0px #fff,-24vw 48vh 0px 1px #fff,27vw -45vh 1px 0px #fff,-2vw -24vh 0px 1px #fff,-15vw -28vh 0px 0px #fff,-43vw 13vh 1px 0px #fff,7vw 27vh 1px 0px #fff,47vw 5vh 0px 0px #fff,-45vw 15vh 1px 1px #fff,-5vw -28vh 0px 1px #fff,38vw 25vh 1px 1px #fff,-39vw -1vh 1px 0px #fff,5vw 0vh 1px 0px #fff,49vw 13vh 0px 0px #fff,48vw 10vh 0px 1px #fff,19vw -28vh 0px 0px #fff,4vw 7vh 0px 0px #fff,21vw 21vh 1px 1px #fff,-15vw -15vh 0px 1px #fff,-6vw -42vh 1px 0px #fff,-15vw 48vh 1px 1px #fff,-23vw 25vh 1px 1px #fff,-48vw 25vh 0px 1px #fff,-31vw -19vh 0px 1px #fff,4vw 37vh 1px 1px #fff,-43vw 28vh 0px 0px #fff,3vw -25vh 0px 1px #fff,-39vw 14vh 0px 1px #fff,-40vw 31vh 0px 1px #fff,35vw -36vh 1px 1px #fff,16vw 49vh 0px 0px #fff,6vw 39vh 0px 0px #fff,3vw -35vh 0px 1px #fff,-44vw -2vh 1px 0px #fff,-6vw 21vh 1px 0px #fff,48vw 9vh 1px 1px #fff,-43vw 30vh 1px 1px #fff,29vw -12vh 1px 1px #fff,-48vw 13vh 1px 0px #fff,-42vw 32vh 1px 1px #fff,34vw 15vh 1px 1px #fff,29vw -37vh 1px 1px #fff,28vw 2vh 0px 0px #fff;
    animation: zoom 16s alternate infinite; 
}

/*---| Animation de zoom effective sur les points ---|*/

@keyframes zoom {
    0%{
        transform: scale(1);
    }
    100%{
        transform: scale(1.5);
    }
}

/*---| Ensemble des éléments du conteneur de la première page ---|*/

#all-content, #pos-content {
    display:flex;
    justify-content:space-around;
    flex-direction:column;
    margin-top:100px;
    margin-bottom:200px;
}

#all-content {
    max-width:1400px;
    width:85%;
}

/*---| Élément principal ---|*/

#main-content {
    display: flex; 
    align-items: flex-start; 
    justify-content:space-between; 
    margin-bottom:100px;
    padding:30px;
    border-radius:20px;
    text-align:left;
    flex-wrap: wrap; 
}

.content-left {
    flex: 1; 
    padding-right: 20px; 
    padding-top:50px;
}

#main-title, #bar-space {
    font-family:'Poppins', sans-serif;
    font-size:28px;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(90deg, lightgrey, white, white, lightgrey);
}

.planet-image-container {
    max-width: 50%; 
}

.planet-image {
    max-width: 100%; 
    height: auto;
    transform: translateY(0px);
	animation: float 6s ease-in-out infinite;
}

#p-styles1 {
    padding-top:20px;
    font-weight:bold;
    font-family:'Roboto';
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(90deg, #a30000, #ff3434, #ff3434, #a30000);
    text-align:justify;
}

#content-left-button {
    display:flex;
    justify-content:center;
    margin-top:70px;
    margin-bottom:70px;
}

#button-more {
    display: inline-block;
    padding: 15px 20px;
    background: linear-gradient(90deg, #a30000, #ff3434);
    color: #fff;
    border: none;
    border-radius: 20px; 
    text-decoration: none;
    text-align: center; 
    font-family:'Merriweather Sans', sans-serif;
    font-weight: bold;
  }
  
#button-more:hover {
    background: linear-gradient(90deg, #6e0000, #a30000); 
    cursor: pointer;
    transition: 0.8s ease-in-out; 
}

/*---| Éléments secondaires (contact) ---|*/

#pos-contact-container {
    display: flex;
    flex-direction: column; 
    align-items:center;
    animation: float 6s ease-in-out infinite;
}

.contact-container {
    border-radius:40px;
    text-align:center;
    padding-left:5px;
    padding-right:5px;
}

.links {
    text-decoration:none;
}

.images-container {
    margin-left:20px;
    margin-right:20px;
    max-width:25%;
    height:50px;
    width:50px;
    border-radius:100%;
    background-image: linear-gradient(-45deg, #0C0B0B, #330303, #5c0303, #940000);
    background-size:600% 100%;
}

.images-container:hover {
    filter: opacity(0.5) drop-shadow(0 0 0 rgb(168, 33, 33));
    transition: 0.3s ease-in-out;
}

/*---| Animation de contenu flottant |---*/

@keyframes float {
	0% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-20px);
	}
	100% {
		transform: translateY(0px);
	}
}

/*|------------------------------| Contenu deuxième / troisième & quatrième page |------------------------------|*/

/*---| Conteneurs ---*/

.container-2, .container-3, .container-4, .container-5 {
    display:flex;
    position:relative;
    justify-content:center;
    background-size:cover;
}

.container-2 {
    background-color:#111010;
}

.container-3 {
    background-color:#131313;
}

.container-4 {
    background-color:rgb(22, 22, 22);
}

.container-5 {
    background-color:rgb(24, 24, 24);
}

/*---| Ensemble des éléments du conteneur de la deuxième/troisième/quatrième/cinquième page
+ éléments constituant le formulaire |---*/

#all-content-2, #all-content-3, #all-content-4, #all-content-5 {
    margin-left:auto;
    margin-right:auto;
    max-width:900px;
    width:80%;
    text-align:justify;
    font-weight:bold;
}

#all-content-5, .champs, #last-champ, .link-container {
    display:flex;
	align-items:center;
  	justify-content:center;
  	flex-direction:column;
}

#first-pos-title {
    font-family:'Poppins', sans-serif;
    font-size:28px;
    margin-bottom:100px;
}

/*---| Carrousel ---|*/

.projects-carousel {
    position: relative;
    width: 100%;
    max-width: 1200px;
    overflow: hidden;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px;
}

/* Conteneur des slides */
.carousel-container {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    margin: 20px 0 20px 0;
}

/* Slide individuel */
.carousel-slide {
    min-width: 100%;
    transition: all 0.6s ease;
    transform: scale(0.95);
    filter: blur(2px);
}

.carousel-slide.active {
    transform: scale(1);
    filter: blur(0);
}

/* Carte de projet */
.project-card {
    display: flex;
    margin: 0 10px;
    border-radius: 15px;
    background-color: #2a2a2a;
    box-shadow: inset 5px 5px 15px #222,
                inset -5px -5px 15px #333;
}

/* Section image */
.project-image {
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.project-image img {
    max-width: 80%;
    filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.carousel-slide.active .project-image img {
    transform: scale(1.1) rotate(-3deg);
}

/* Section contenu */
.project-content {
    width: 60%;
    padding: 30px;
    display: flex;
    flex-direction: column;
}

/* En-tête du projet */
.project-header h3 {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    margin: 10px 0;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Badge de type de projet */
.project-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    box-shadow: 3px 3px 6px #1a1a1a,
                -3px -3px 6px #3a3a3a;
}

.project-badge.stage {
    font-family: 'Roboto', sans-serif;
    background: linear-gradient(145deg, #ff4500, #ff6347);
    color: white;
}

.project-badge.projet {
    font-family: 'Roboto', sans-serif;
    background: linear-gradient(145deg, #ffa500, #ffcc00);
    color: white;
}

/* Description du projet */
.project-description {
    padding: 0 10px 0 10px;
    border-radius: 10px;
    background: #2a2a2a;
    box-shadow: inset 4px 4px 8px #222,
                inset -4px -4px 8px #333;
}

.objective {
    font-family: 'Roboto', sans-serif;
    color: #e0e0e0;
    line-height: 1.6;
    font-size:14px;
}

.learnings p {
    font-size:14px;
    font-family: 'Roboto', sans-serif;
    color: #e0e0e0;
}

.learnings ul {
    font-size:14px;
    list-style-type: none;
    padding: 0;
}

.learning-item {
    font-family: 'Roboto', sans-serif;
    color: #e0e0e0;
    padding: 8px 8px 8px 25px;
    position: relative;
    transition: transform 0.3s ease, background 0.3s ease;
}

.learning-item:hover {
    transform: translateX(5px);
    background: rgba(255, 255, 255, 0.05);
}

.learning-item::before {
    content: '•';
    position: absolute;
    left: 5px;
    font-size: 14px;
}

.learning-item.red::before { color: #ff5555; text-shadow: 0 0 5px #ff5555; }
.learning-item.green::before { color: #55ff55; text-shadow: 0 0 5px #55ff55; }
.learning-item.purple::before { color: #aa55ff; text-shadow: 0 0 5px #aa55ff; }
.learning-item.blue::before { color: #5555ff; text-shadow: 0 0 5px #5555ff; }
.learning-item.gold::before { color: #ffdd55; text-shadow: 0 0 5px #ffdd55; }

/* Liens du projet */
.project-links {
    display: flex;
    gap: 20px;
    margin-top: 25px;
}

.project-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 12px 20px;
    background-color: #2a2a2a;
    color: white;
    border-radius: 10px;
    transition: all 0.4s ease;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    box-shadow: 5px 5px 10px #1a1a1a,
                -5px -5px 10px #3a3a3a;
}

.project-link img {
    height: 20px;
    margin-right: 10px;
    transition: transform 0.4s ease;
}

.project-link:hover {
    box-shadow: 3px 3px 5px #1a1a1a,
                -3px -3px 5px #3a3a3a,
                inset 3px 3px 5px #1a1a1a,
                inset -3px -3px 5px #3a3a3a;
}

.project-link:hover img {
    transform: rotate(10deg);
}

/* Flèches de navigation */
.carousel-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #2a2a2a;
    border: none;
    color: white;
    font-size: 22px;
    cursor: pointer;
    z-index: 1;
    transition: all 0.3s ease;
    box-shadow: 5px 5px 10px #1a1a1a,
                -5px -5px 10px #3a3a3a;
}

.carousel-arrow:hover {
    box-shadow: 3px 3px 6px #1a1a1a,
                -3px -3px 6px #3a3a3a,
                inset 2px 2px 4px #1a1a1a,
                inset -2px -2px 4px #3a3a3a;
}

.prev-arrow {
    left: 20px;
}

.next-arrow {
    right: 20px;
}

/* Indicateurs */
.carousel-indicators {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.indicator {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #2a2a2a;
    margin: 0 6px;
    cursor: pointer;
    transition: all 0.4s ease;
    box-shadow: 3px 3px 6px #1a1a1a,
                -3px -3px 6px #3a3a3a;
}

.indicator.active {
    background: linear-gradient(145deg, #e0e0e0, #a0a0a0);
    transform: scale(1.3);
}

/*---| Timeline |---*/

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.cd-container {
    font-family:'Roboto';
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 10%;
    border-radius: 2px;
}

.cd-container::after {
    content: '';
    display: table;
    clear: both;
}

#cd-timeline {
    position: relative;
    padding: 2em 0;
    margin-top: 2em;
    margin-bottom: 2em;
}

#cd-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 25px;
    height: 100%;
    width: 4px;
    background: white;
    border-radius: 2px;
}

.cd-timeline-block {
    position: relative;
    margin: 3em 0;
}

.cd-timeline-block:after {
    content: "";
    display: table;
    clear: both;
}

.cd-timeline-block:first-child {
    margin-top: 0;
}

.cd-timeline-block:last-child {
    margin-bottom: 0;
}

.cd-timeline-img {
    cursor:pointer;
    display:flex;
    position: absolute;
    justify-content:center;
    align-items: center;
    top: 8px;
    left: 12px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.cd-timeline-img i {
    font-size:20px;
}

.fa-eye, .fa-eye-slash {
    color:white;
}

.cd-competence-1 {
    background:red;
    box-shadow: 0 0 0 4px rgb(192, 13, 13), inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
}

.cd-competence-1:hover {
    background:rgb(192, 13, 13);
    box-shadow: 0 0 0 4px darkred, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
    transition:0.2s ease-in-out;
}

.cd-competence-2 {
    background:orange;
    box-shadow: 0 0 0 4px rgb(192, 135, 13), inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
}

.cd-competence-2:hover {
    background:rgb(192, 135, 13);
    box-shadow: 0 0 0 4px rgb(138, 101, 22), inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
    transition:0.2s ease-in-out;
}

.cd-competence-3 {
    background:gold;
    box-shadow: 0 0 0 4px rgb(192, 174, 13), inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
}

.cd-competence-3:hover {
    background:rgb(192, 174, 13);
    box-shadow: 0 0 0 4px rgb(131, 121, 30), inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
    transition:0.2s ease-in-out;
}

.cd-competence-4 {
    background:lightgreen;
    box-shadow: 0 0 0 4px rgb(13, 192, 117), inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
}

.cd-competence-4:hover {
    background:rgb(13, 192, 117);
    box-shadow: 0 0 0 4px rgb(29, 129, 87), inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
    transition:0.2s ease-in-out;
}

.cd-competence-5 {
    background:blue;
    box-shadow: 0 0 0 4px rgb(13, 16, 192), inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
}

.cd-competence-5:hover {
    background:rgb(13, 16, 192);
    box-shadow: 0 0 0 4px rgb(12, 15, 134), inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
    transition:0.2s ease-in-out;
}

.cd-competence-6 {
    background:darkviolet;
    box-shadow: 0 0 0 4px purple, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
}

.cd-competence-6:hover {
    background:purple;
    box-shadow: 0 0 0 4px rgb(87, 6, 87), inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
    transition:0.2s ease-in-out;
}

.cd-timeline-content.show {
    opacity: 1;
    display: block;
    transition: opacity 0.3s ease;
}

.cd-timeline-content {
    opacity: 0;
    display:none;
    position: relative;
    margin-left: 60px;
    margin-right: 30px;
    background: #1f1f1f;
    border-radius: 2px;
    padding: 1em;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
    transition: opacity 0.3s ease;

    .timeline-content-info {
      background: #272727;
      padding: 5px 10px;
      color: rgba(255,255,255,0.7);
      font-size: 12px;
      box-shadow:  inset 0 2px 0 rgba(0, 0, 0, 0.08);
      border-radius: 2px;

      i {
        margin-right: 5px;
      }

      .timeline-content-info-title, .timeline-content-info-date {  
        width: calc(50% - 2px);
        display: inline-block;
      }

      @media (max-width: 500px) {
        .timeline-content-info-title, .timeline-content-info-date {  
          display: block;
          width:100%;
        } 
      }
    }

    .content-skills {
        font-size: 12px;
        padding:0;
        margin: 10px 0 0 0;
        display:flex;
        flex-wrap: wrap;
        justify-content: center;
    }
        
    .content-skills p {
        background: #363636;
        border-radius: 2px;
        display: inline-block;
        padding: 2px 10px;
        color: white;
        margin: 3px 2px;
        text-align: center;
        flex-grow: 1;
        box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.08);
    }

    .content-skills img {
        vertical-align: middle;
        max-height:15px;
        max-width:15px;
    }
}

.cd-timeline-content:after {
    content: "";
    display: table;
    clear: both;
}

.cd-timeline-content h3 {
    font-size: 17px;
    color: rgba(255,255,255,.9);
    margin-top:0;
    margin-bottom: 5px;
}

.cd-timeline-content p, .cd-timeline-content .cd-date {
    color: rgba(255,255,255,.7);
    font-size: 13px;
    font-size: 0.8125rem;
}

.cd-timeline-content .cd-date {
    display: inline-block;
}

.cd-timeline-content p {
    margin: 1em 0;
    line-height: 1.6;
}

.cd-timeline-content::before {
    content: '';
    position: absolute;
    top: 16px;
    right: 100%;
    height: 0;
    width: 0;
    border: 7px solid transparent;
    border-right: 7px solid #1f1f1f;
}

#timeline-hyperlink {
    color:white;
}

#timeline-hyperlink:hover {
    color:lightgray;
    transition:0.3s ease-in-out;
}

.custom-link {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    text-decoration:none;
    font-family:'Roboto';
    font-size: 14px;
    padding:10px 20px;
    background-color:white;
    color:#131313;
    border:2px solid #131313;
    border-radius:5px;
    transition:background-color 0.3s, color 0.3s;
    width:55%;
}

.custom-link:hover {
    background-color:#131313;
    color:white;
}

.custom-link img {
    margin-right:10px; 
    max-height:20px;
}

.project-context-1, .project-context-2{
    font-family:'Roboto';
    font-style:normal;
    font-weight:bold;
    color:white;
}

.project-context-1 {
    background-color:orangered;
}

.project-context-2 {
    background-color:orange;
}

/*---| Parcours |---*/

.education-timeline {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    margin: 40px auto;
    gap: 20px;
}

.education-card {
    flex: 1;
}

.education-card a {
    display: block;
    text-decoration: none;
    color: white;
    border-radius: 20px;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    height: 100%;
    z-index: 1;
}

.education-card a::before {
    content: '';
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s ease;
}

.education-card .card-content {
    display: flex;
    flex-direction: column;
    padding: 25px;
}

.education-card .card-image {
    margin-bottom: 25px;
    text-align: center;
    transition: transform 0.5s ease;
}

.education-card .card-image img {
    height: 100px;
    max-width: 150px;
    border-radius: 12px;
    object-fit: contain;
    filter: drop-shadow(0 8px 15px rgba(0, 0, 0, 0.2));
    transition: all 0.5s ease;
}

.education-card .card-info {
    display: flex;
    flex-direction: column;
    transition: transform 0.5s ease;
}

.education-card .card-info h3 {
    font-family:'Roboto';
    font-size: 18px;
    margin: 0 0 12px 0;
    position: relative;
    padding-bottom: 8px;
}

.education-card .card-info h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: rgba(255, 255, 255, 0.6);
    transition: width 0.5s ease;
}

.education-card .card-info p {
    font-weight: lighter;
    font-family:'Roboto';
    margin-bottom:10px;
    font-size: 14px;
}

.education-card.lycee a {
    background: linear-gradient(135deg, #ff7e5f, #feb47b);
}

.education-card.iut a {
    background: linear-gradient(135deg, #e53935, #e35d5b);
}

.education-card.mastere a {
    background: linear-gradient(135deg, #36d1dc, #5b86e5);
}

.education-card a:hover {
    transform: translateY(-10px) rotateX(5deg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.education-card a:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}

.education-card:hover .card-image {
    transform: translateY(-5px) scale(1.05);
}

.education-card:hover .card-info {
    transform: translateY(0);
}

.education-card:hover .card-info h3::after {
    width: 80px;
} 

.timeline-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff9966;
    font-size: 28px;
}

/*---| Compétences |---*/

.competences-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    justify-content: center;
}

.competence-1 i, .competence-2 i, .competence-3 i, .competence-4 i, .competence-5 i, .competence-6 i {
    font-size:50px;
}

.competence-1 img, .competence-2 img, .competence-3 img, .competence-4 img, .competence-5 img, .competence-6 img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.competence-1 p, .competence-2 p, .competence-3 p, .competence-4 p, .competence-5 p, .competence-6 p {
    font-family:'Roboto';
    margin-top: 10px;
    font-size: 20px;
}

.competence-header-1, .competence-header-2, .competence-header-3, .competence-header-4, .competence-header-5, .competence-header-6 {
    text-align:center;
}

.competence-1, .competence-2, .competence-3, .competence-4, .competence-5, .competence-6 {
    border-radius:10px;
    padding:20px;
}

.competence-header-1 {
    color: red;
}

.competence-1 {
    border:2px solid red;
}

.competence-1:hover, .competence-1:hover .competence-header-1 {
    color:white;
    background-color:red;
}

.competence-header-2 {
    color: orange;
}

.competence-2 {
    border:2px solid orange;
}

.competence-2:hover, .competence-2:hover .competence-header-2 {
    color:white;
    background-color:orange;
}

.competence-header-3 {
    color: gold;
}

.competence-3 {
    border:2px solid gold;
}

.competence-3:hover, .competence-3:hover .competence-header-3 {
    color:white;
    background-color:gold;
}

.competence-header-4 {
    color: lightgreen;
}

.competence-4 {
    border:2px solid lightgreen;
}

.competence-4:hover, .competence-4:hover .competence-header-4 {
    color:white;
    background-color:lightgreen;
}

.competence-header-5 {
    color: darkviolet;
}

.competence-5 {
    border:2px solid darkviolet;
}

.competence-5:hover, .competence-5:hover .competence-header-5 {
    color:white;
    background-color:darkviolet;
}

.competence-header-6 {
    color: blue;
}

.competence-6 {
    border:2px solid blue;
}

.competence-6:hover, .competence-6:hover .competence-header-6 {
    color:white;
    background-color:blue;
}

.competence-description {
    font-size:16px;
    font-weight: normal;
    color:white;
    text-align:left;
}

/*---| Element contenant le texte + la barre verticale + le bouton télécharger + formulaire |---*/

.v-bar {
    display:block;
    position:relative;
    background: rgba(255,255,255,0.02);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 165, 0, 0.15);
    border-radius: 16px;
    margin: 40px 0;
    padding: 25px 40px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.v-bar::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(180deg, #ff6b35 0%, #f7931e 50%, #ffb347 100%);
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 20px rgba(255, 107, 53, 0.3);
}

.v-bar::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 165, 0, 0.3) 50%, transparent 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.v-bar:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 165, 0, 0.3);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 165, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.v-bar:hover::after {
    opacity: 1;
}

.v-bar:hover::before {
    animation: shimmer 2s ease-in-out infinite;
}

@keyframes shimmer {
    0%, 100% { 
        background: linear-gradient(180deg, #ff6b35 0%, #f7931e 50%, #ffb347 100%);
    }
    50% { 
        background: linear-gradient(180deg, #ffb347 0%, #ff6b35 50%, #f7931e 100%);
    }
}

.section-education, .section-interests, .section-presentation, .section-projects {
    position: relative;
}

.section-education::before, .section-interests::before, .section-presentation::before, .section-projects::before {
    position: absolute; 
    font-size: 24px;
    opacity: 0.3;
    transition: all 0.3s ease; 
}

.section-education:hover::before, .section-interests:hover::before, .section-presentation:hover::before, .section-projects:hover::before {
    opacity: 0.8;
    transform: scale(1.2);
}

.section-education::before {
    content: '🎓';
}

.section-interests::before {
    content: '🎯';
}

.section-presentation::before {
    content: '👋';
}

.section-projects::before {
    content: '💼';
}

.pos-titles {
    font-family:'Poppins', sans-serif;
    font-size:28px;
    margin-top:75px;
    margin-bottom:100px;
}

#first-carac, #second-carac, #third-carac, #fourth-carac, #fifth-carac, #sixth-carac {
    font-size:32px;
}

#first-carac {
    color:gold;
}

#second-carac {
    color:orange;
}

#third-carac {
    color:orangered;
}

#fourth-carac {
    color:red;
}

#fifth-carac {
    color:darkred;
}

#sixth-carac {
    color:purple;
}

.p-styles3, .p-styles5, .legend {
    margin-bottom:50px;
    padding-left:20px;
    font-family:'Roboto';
}

.p-styles3 {
    color:orange;
    line-height: 1.6;
    font-size:18px;
    transition: all 0.3s ease;
}

.p-styles5 {
    color:orangered;
}

.highlight {
    background: linear-gradient(120deg, rgba(255, 107, 53, 0.2) 0%, rgba(247, 147, 30, 0.2) 100%);
    padding: 2px 6px;
    border-radius: 4px;
    color: #ffb347;
    border: 1px solid rgba(255, 165, 0, 0.1);
}

.legend, .legend i {
    font-size:11px;
    color:whitesmoke;
}

#me-contacter {
    color: #ff6b35;
    text-decoration: none;
    position: relative;
    transition: all 0.3s ease;
    background: linear-gradient(120deg, rgba(255, 107, 53, 0.1) 0%, rgba(247, 147, 30, 0.1) 100%);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(255, 165, 0, 0.2);
}

#me-contacter::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;

    background: linear-gradient(90deg, #ff6b35, #f7931e);
    transition: width 0.3s ease;
}

#me-contacter:hover {
    color: #ffb347;
    background: linear-gradient(120deg, rgba(255, 107, 53, 0.2) 0%, rgba(247, 147, 30, 0.2) 100%);
    border-color: rgba(255, 165, 0, 0.4);
    transform: translateY(-1px);
}

#me-contacter:hover::after {
    width: 100%;
}

#download-button-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

#button-download {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    position:relative;
    padding:15px 25px;
    text-align:center;
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    color: #ffffff;
    text-decoration:none;
    border:none;
    border-radius:50px;
    font-size:18px;
    font-family:'Poppins', sans-serif;
    box-shadow:0 10px 30px rgba(255, 107, 53, 0.3);
    transition:all 0.3s ease;
    overflow:hidden;
}    



#button-download::before {
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

#button-download:hover::before {
    left: 100%;
}

#button-download:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 15px 40px rgba(255, 107, 53, 0.4);
}

#button-download i {
    margin-right:5px;
    font-size: 14px;
    transition: transform 0.3s ease;
}

#button-download:hover i {
    transform: translateY(-2px);
}

/* Formulaire de contact */
#form-title, #souscrire, .contact-icon {
    display:flex;
    align-items:center;
    justify-content:center;
}

#form-contact::before, #form-contact::after, #souscrire::before, .contact-card::before {
    content:'';
    position:absolute;
}

#form-contact::before, #souscrire::before, .contact-card::before {
    top:0;
}

#form-contact::before, .contact-card::before {
    left:0;
    right:0;
}

#form-contact, #form-title, .form-divider, .form-group, .input-container, #souscrire, .contact-info, .contact-card {
    position:relative;
}

#form-title, .form-divider, .form-group, #souscrire, .contact-info {
    z-index:2;
}

#form-contact, .input-container, #souscrire, .contact-card {
    overflow:hidden;
}

#form-title, #souscrire, .contact-title {
    font-family:'Poppins', sans-serif;
}

.champs, #last-champ, #souscrire, #souscrire::before, .info-card::before {
    width:100%;
}

#form-contact {
    margin-top:40px;
    margin-bottom:125px;
    max-width:800px;
    width:90%;
    border:1px solid rgba(219, 128, 255, 0.2);
    border-radius:32px;
    padding:60px;
    background:rgba(255, 255, 255, 0.02);
    backdrop-filter:blur(30px);
    box-shadow:0 25px 50px rgba(0, 0, 0, 0.5);
}

#form-contact::before {
    height:4px;
    border-radius:32px 32px 0 0;
    background:linear-gradient(90deg, #db80ff, #ff00ff, #7500a0);
}

#form-contact::after {
    top:-50%;
    right:-50%;
    width:200%;
    height:200%;
    background:conic-gradient(from 0deg, transparent, rgba(219, 128, 255, 0.02), transparent);
    animation:rotate 30s linear infinite;
    pointer-events:none;
}

#form-title {
    text-align:center;
    margin-bottom:20px;
    gap:15px;
    font-size:28px;
    color:#ffffff;
}

#form-carac {
    color:#db80ff;
    font-size:32px;
    animation:pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.form-divider {
    width:100px;
    height:3px;
    margin:0 auto 40px;
    border:none;
    border-radius:2px;
    background:linear-gradient(90deg, #db80ff, #ff00ff);
}

.form-group {
    margin-bottom:32px;
}

.input-container {
    border-radius:16px;
}

.champs, #last-champ, #souscrire {
    margin-left:auto;
    margin-right:auto;
    font-family:'Merriweather Sans', sans-serif;
}

.champs, #last-champ {
    padding:20px 24px;
    background:rgba(255, 255, 255, 0.05);
    border:2px solid rgba(219, 128, 255, 0.2);
    border-radius:16px;
    color:#ffffff;
    font-family:'Inter', sans-serif;
    font-size:16px;
    transition:all 0.3s ease;
    outline:none;
    backdrop-filter:blur(10px);
}

.champs {
    height:60px;
}

#last-champ {
    min-height:140px;
    resize:vertical;
    font-family:'Inter', sans-serif;
}

.champs::placeholder, #last-champ::placeholder {
    color:rgba(255, 255, 255, 0.6);
    font-size:16px;
    transition:all 0.3s ease;
}

.champs:focus, #last-champ:focus,
.champs:hover, #last-champ:hover {
    background:rgba(255, 255, 255, 0.08);
    border-color:#db80ff;
    transform:translateY(-2px);
    box-shadow:0 15px 35px rgba(219, 128, 255, 0.15);
}

.champs:focus::placeholder, #last-champ:focus::placeholder {
    color:rgba(255, 255, 255, 0.8);
    transform:translateY(-2px);
}

.input-icon {
    position:absolute;
    top:50%;
    right:20px;
    transform:translateY(-50%);
    font-size:18px;
    color:rgba(219, 128, 255, 0.6);
    pointer-events:none;
    transition:all 0.3s ease;
}

.input-container:hover .input-icon,
.champs:focus + .input-icon,
#last-champ:focus + .input-icon {
    color:#db80ff;
    transform:translateY(-50%) scale(1.1);
}

#souscrire {
    max-width:300px;
    margin:40px auto 0;
    border:none;
    border-radius:50px;
    padding:18px 32px;
    gap:12px;
    font-size:16px;
    background:linear-gradient(135deg, #db80ff, #ff00ff);
    cursor:pointer;
    color:#ffffff;
    box-shadow:0 10px 30px rgba(219, 128, 255, 0.3);
    transition:all 0.3s ease;
}

#souscrire::before {
    left:-100%;
    height:100%;
    background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition:left 0.5s ease;
}

#souscrire:hover::before {
    left:100%;
}

#souscrire:hover {
    transform:translateY(-3px) scale(1.05);
    box-shadow:0 15px 40px rgba(219, 128, 255, 0.4);
}

#souscrire:active {
    transform:translateY(-1px) scale(1.02);
}

.contact-info {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
    margin-top:50px;
    gap:30px;
}

.contact-card {
    border:1px solid rgba(219, 128, 255, 0.1);
    border-radius:20px;
    padding:30px;
    backdrop-filter:blur(20px);
    text-align:center;
    background:rgba(255, 255, 255, 0.03);
    transition:all 0.3s ease;
}

.contact-card::before {
    height:3px;
    background:linear-gradient(90deg, #db80ff, #ff00ff);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform 0.3s ease;
}

.contact-card:hover::before {
    transform:scaleX(1);
}

.contact-card:hover {
    transform:translateY(-5px);
    border-color:rgba(219, 128, 255, 0.3);
    box-shadow:0 15px 35px rgba(219, 128, 255, 0.1);
}

.contact-icon {
    width:60px;
    height:60px;
    margin:0 auto 15px;
    border-radius:50%;
    font-size:24px;
    background:rgba(219, 128, 255, 0.1);
    color:#db80ff;
}

.contact-title {
    margin-bottom:8px;
    font-size:18px;
    color:#ffffff;
}

.contact-text {
    font-size:14px;
    line-height:1.5;
    color:rgba(255, 255, 255, 0.8);
}

/*|------------------------------| Contenu page mentions légales |------------------------------|*/

#container-mlegales, .creator-avatar, .creator-info, .creator-avatar::before, .hosting-icon {
    display:flex;
    justify-content:center;
    align-items:center;
}

.hosting-details, .creator-details {
    flex:1;
}

#content-mlegales::before, #content-mlegales::after, #title-mlegales::after, .info-card::before, #github-ml::after,
.creator-avatar::before {
    content:'';
    position:absolute;
}

#mail-mlegales, #github-ml {
    display:inline-flex;
    align-items:center;
}

#container-mlegales, #content-mlegales, #title-mlegales, .legal-section, .info-card, .p-styles4, #github-ml,
.creator-avatar, .creator-avatar span {
    position:relative;
}

#title-mlegales, .mlegales-subtitles  {
    font-family:'Poppins', sans-serif;
}

.p-styles4, #mail-mlegales, .creator-avatar span, .creator-name {
    font-family:'Roboto', sans-serif;
}

#title-mlegales, .legal-section, .p-styles4, .creator-avatar span {
    z-index:2;
}

#content-mlegales, .info-card, .creator-avatar {
    overflow:hidden;
}

#pos-content {
    max-width:1000px;
    width:70%;
}

#container-mlegales {
    margin-left:auto;
    margin-right:auto;
    width: 100%;
    height:auto;
}

#content-mlegales {
    border:1px solid rgba(225, 149, 255, 0.2);
    border-radius:32px;
    padding:60px;
    box-shadow:0 25px 50px rgba(0, 0, 0, 0.5);
    background:rgba(255, 255, 255, 0.02);
    backdrop-filter:blur(30px);
}

#content-mlegales::before {
    top:0;
    left:0;
    right:0;
    height:4px;
    border-radius:32px 32px 0 0;
    background:linear-gradient(90deg, #e195ff, #a200ff, #5d0092);
}

#content-mlegales::after {
    top:-50%;
    right:-50%;
    width:200%;
    height:200%;
    background:conic-gradient(from 0deg, transparent, rgba(225, 149, 255, 0.02), transparent);
    animation:rotate 25s linear infinite;
    pointer-events:none;
}

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

#title-mlegales {
    margin-bottom:50px;
    text-align:center;
    font-size:28px;
    color:rgb(225, 149, 255);
}

#title-mlegales::after {
    bottom:-10px;
    left:50%;
    transform:translateX(-50%);
    width:100px;
    height:3px;
    border-radius:2px;
    background:linear-gradient(90deg, #e195ff, #a200ff);
}

.legal-section {
    margin-bottom:40px;
}

.mlegales-subtitles {
    display:flex;
    align-items:center;
    margin-bottom:20px;
    gap:15px;
    font-size:22px;
    color:#ffffff;
}

.mlegales-carac {
    color:#e195ff;
    font-size:20px;
}

.info-card {
    border:1px solid rgba(225, 149, 255, 0.1);
    border-left:4px solid #e195ff;
    border-radius:16px;
    padding:30px;
    transition:all 0.3s ease;
    background:rgba(225, 149, 255, 0.05);
}

.info-card::before {
    top:0;
    left:-100%;
    height:100%;
    background:linear-gradient(90deg, transparent, rgba(225, 149, 255, 0.03), transparent);
    transition:left 0.8s ease;
}

.info-card:hover::before {
    left:100%;
}

.info-card:hover {
    background:rgba(225, 149, 255, 0.08);
    border-color:rgba(225, 149, 255, 0.2);
    transform:translateY(-3px);
    box-shadow:0 15px 35px rgba(225, 149, 255, 0.1);
}

.p-styles4 {
    font-size:16px;
    line-height:1.7;
    color:#e8e8e8;
}

#mail-mlegales {
    color:#e195ff;
    gap:8px;
    margin-top:8px;
}

#mail-mlegales::before {
    content:'\f0e0';
    font-family:'Font Awesome 6 Free';
    font-weight:900;
    font-size:14px;
}

#github-ml {
    color:#a200ff;
    text-decoration:none;
    transition:all 0.3s ease;
    gap:6px;
}

#github-ml::before {
    content:'\f09b';
    font-family:'Font Awesome 6 Brands';
    font-size:16px;
}

#github-ml::after {
    bottom:-2px;
    left:0;
    width:0;
    height:2px;
    background:linear-gradient(90deg, #a200ff, #e195ff);
    transition:width 0.3s ease;
}

#github-ml:hover {
    color:#e195ff;
    transform:translateY(-1px);
}

#github-ml:hover::after {
    width:100%;
}

.creator-info {
    gap:20px;
    flex-wrap:wrap;
}

.creator-avatar {
    width:60px;
    height:60px;
    border-radius:50%;
    background:linear-gradient(135deg, #e195ff, #a200ff);
    font-size:24px;
    color:white;
}

.creator-avatar::before {
    inset:2px;
    border-radius:50%;
    background:#0a0a0a;
}

.creator-avatar span {
    background:linear-gradient(135deg, #e195ff, #a200ff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

.creator-name {
    font-size:18px;
    color:#ffffff;
    margin-bottom:4px;
}

.hosting-info {
    display:flex;
    align-items:flex-start;
    gap:20px;
}

.hosting-icon {
    width:50px;
    height:50px;
    border-radius:12px;
    background:rgba(225, 149, 255, 0.1);
    color:#e195ff;
    font-size:20px;
}

.fade-in {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease forwards;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in:nth-child(1) { animation-delay: 0.1s; }
.fade-in:nth-child(2) { animation-delay: 0.3s; }
.fade-in:nth-child(3) { animation-delay: 0.5s; }
.fade-in:nth-child(4) { animation-delay: 0.4s; }
.fade-in:nth-child(5) { animation-delay: 0.6s; }
.fade-in:nth-child(6) { animation-delay: 0.8s; }
.fade-in:nth-child(7) { animation-delay: 1s; }

/*|------------------------------| Scrollbar |------------------------------|*/

::-webkit-scrollbar {
    width:15px;
}

::-webkit-scrollbar-thumb {
    border-radius:5px;
    border:31px none #ffffff;
    background:#940000;
}

::-webkit-scrollbar-thumb:active {
    background:#b40000;
}

::-webkit-scrollbar-track {
    background:#1f1f1f;
}

::-webkit-scrollbar-corner {
    background:transparent;
}

/*|------------------------------| Responsive |------------------------------|*/

@media (max-width: 1400px) { 
    #container-1, #container-2{
        width:100%;
		padding-bottom:100px;
		padding-top:50px;      
    }

    #h-content {
        display:none;
        flex-direction:column;
        justify-content:space-around;
        float:left;
        height:auto;
        max-width:400px;
        width:100%;
        height:100vh;
        background-color:rgba(255,255,255,0.9);
    } 

    .h-items {
        display:flex;
        align-items:center;
        justify-content:center;
        margin-left:auto;
		margin-right:auto;
        height:15%;
        width:100%;
        font-size:15px;
        transition:ease-out 0.5s;
    }

    #h-show, #h-hide, #planet-header {
		display:block;
	}

    .images-container {
        margin-left:5px;
        margin-right:5px;
    }

    #main-title {
        text-align:center;
    }
}

@media only screen and (min-width: 1170px) {

    #cd-timeline {
      margin-top: 3em;
      margin-bottom: 3em;
    }

    #cd-timeline::before {
      left: 50%;
      margin-left: -2px;
    }

    .cd-timeline-block {
        margin: 4em 0;
    }

    .cd-timeline-block:first-child {
        margin-top: 0;
    }

    .cd-timeline-block:last-child {
        margin-bottom: 0;
    }

    .cd-timeline-img {
        width: 30px;
        height: 30px;
        left: 50%;
        margin-left: -15px;
        margin-top: 15px;
    }

    .cd-timeline-content {
        color: white;
        margin-left: 0;
        padding: 1.6em;
        width: 36%;
        margin: 0 5%;
    }
    
    .cd-timeline-content::before {
        top: 24px;
        left: 100%;
        border-color: transparent;
        border-left-color: #1f1f1f;
    }

    .cd-timeline-content .cd-date {
        position: absolute;
        width: 100%;
        left: 130%;
        top: 6px;
        font-size: 16px;
        font-size: 1rem;
    }

    .cd-timeline-block:nth-child(even) .cd-timeline-content {
        float: right;
    }

    .cd-timeline-block:nth-child(even) .cd-timeline-content::before {
        top: 24px;
        left: auto;
        right: 100%;
        border-color: transparent;
        border-right-color: #1f1f1f;
    }

    .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
        float: right;
    }

    .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
        left: auto;
        right: 130%;
        text-align: right;
    }
}

@media (max-width: 1070px) { 

    .cd-timeline-content {
        .content-skills img {
            vertical-align: middle;
            max-height:15px;
            max-width:15px;
        }
    }
    
    #main-title, #first-carac, #second-carac, #third-carac, #fourth-carac, #fifth-carac, #sixth-carac, #form-carac, #title-mlegales {
        font-size:24px;
    }

    #first-pos-title, .pos-titles, #form-title, .mlegales-subtitles{
        font-size:22px;
    }

    h2, #p-styles1 {
        font-size:18px;
    }

    .carousel-content, .cd-timeline-content h3,  .competence-1 p, .competence-2 p, .competence-3 p, .competence-4 p, .competence-5 p, .competence-6 p {
        font-size:15px;
    }

    p, .f-items, .p-styles2, .competence-text, #button-download, #souscrire, .champs::placeholder, #last-champ::placeholder {
        font-size:13px;
    }

    .carousel-content-p, .custom-link {
        font-size:11px;
    }

    #all-content {
        margin-bottom:400px;
    }

    #pos-contact-container {
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
    }

    .contact-container {
        margin-top:5px;
        max-width:200px;
        width:100%;
    }

    .content-left {
        padding-right:0px;
    }

    .planet-image-container {
        display:none;
    }
    
    .p-styles4 {
        text-align:justify;
    }

    .education-timeline {
        align-items: center;
        flex-direction: column;
        gap: 35px;
    }
    
    .education-card {
        max-width: 80%;
        width: 100%;
    }

    .education-card .card-info h3 {
        font-size: 15px;
    }
    
    .projects-carousel {
        padding: 0 0 10px 0;
    }

    .project-image, .project-content {
        width: 100%;
    }
    
    .project-image {
        display:none;
    }
    
    .project-links {
        flex-direction: column;
    }

    .project-header h3 {
        font-size:15px;
    }

    .project-description {
        box-shadow: none;  
    } 

    .carousel-container {
        height: auto;
        min-height: 600px;
    }

    .objective, .learnings p, .learnings ul {
        font-size: 11px;
    }

    .carousel-arrow {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
}

@media (max-width: 768px) {

    .cd-timeline-content {
        .content-skills img {
            vertical-align: middle;
            max-height:15px;
            max-width:15px;
        }
    } 

    .competences-container, .soft-skills-container {
        grid-template-columns: 1fr; 
    }

    .carousel-cell-image {
        display:none;
    }

    .carousel-cell-text {
        display:flex;
        flex-direction:column;
        width:100%;
    }

    .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date, .cd-timeline-content p {
        font-size: 11px;
    }

    #pos-content {
        width:85%;
    }

    .form-group {
        margin-bottom: 28px;
    }

    .champs, #last-champ {
        padding: 18px 20px;
        font-size: 15px;
    }

    .champs {
        height: 56px;
    }

    #last-champ {
        min-height: 120px;
    }

    #souscrire {
        font-size: 15px;
        padding: 16px 28px;
        max-width: 280px;
    }

    .contact-info {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 40px;
    }

    .contact-card {
        padding: 25px 20px;
    }

    #content-mlegales {
        padding-left:20px;
        padding-right:20px;
    }

    .mlegales-subtitles {
        font-size: 20px;
        margin-bottom: 15px;
    }

    .info-card {
        padding: 25px 20px;
    }

    .p-styles4 {
        font-size: 15px;
    }

    .creator-info,
    .hosting-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .creator-avatar,
    .hosting-icon {
        align-self: flex-start;
    }
}

@media (max-width: 400px) {

    #all-content {
        margin-top:80px;
        margin-bottom:100px;
    }

    .content-left {
        padding-top:0px;
    }

    #form-title {
        font-size: 24px;
    }

    .champs, #last-champ {
        padding: 16px 18px;
        font-size: 14px;
    }

    .input-icon {
        font-size: 16px;
        right: 18px;
    }

    #mail-mlegales {
        font-size:12px;
    }

    .mlegales-subtitles {
        font-size: 18px;
    }
}