/* Global Styles */

/* Definition of the colors */
:root {
    --purple: #390099;
    --blue: #2ec4b6;
    --white: #f7f7f4;
    --gray: #4b4b47;
    --mid-gray: #adada3;
    --light-gray: #c5c5bd;
    --trensparent-white:#ffffffb7;
    --green: #2EAD94;
    --trensparent-green: #2ead946c;
    --yellow: #ff5400;
    --pink: #ff0054;
    --trensparent-pink: #ff00556a;
    --black: #0a0908;
    --trensparent-gray: #0a090836;
}

/* Font declarations */
@font-face {
    font-family: 'Didot';
    src: url('../assets/fonts/Didot.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Lora';
    src: url('../assets/fonts/Lora.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Global HTML and body styles */
html {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body {
    background-color: var(--black);
    margin: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    overflow-x: hidden;
    font-family: 'Lora', serif;
}


/* Titles */

h2 {
    font-size: clamp(24px, 5vw, 40px);
    text-align: center;
    font-family: 'Lora', Arial, sans-serif;
    color: var(--green);
    margin: 5px 0 20px;
}

h3 {
    font-size: clamp(22px, 5.5vw, 50px);
    font-family: 'Lora', Arial, sans-serif;
    color: var(--gray);
    margin: 40px 0 20px;
    position: relative;
    display: inline-block;
}

.div_h {
    text-align: center;
}

h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0.5em; /* hauteur relative au texte */
    background-color: var(--trensparent-pink);
    transition: width 0.3s ease;
}

h3:hover::after {
    width: 100%;
}

h4 {
    font-size: clamp(20px, 4vw, 35px);
    font-family: 'Lora', Arial, sans-serif;
    color: var(--gray);
    margin: 40px 0 20px;
    position: relative;
    display: inline-block;
}

h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0.45em;
    background-color: var(--trensparent-green);
    transition: width 0.3s ease;
}

h4:hover::after {
    width: 100%;
}

@media (max-width: 768px) {
    h3::after {
        width: 100%;
    }

    h4::after {
        width: 100%;
    }
}

p {
    font-size: clamp(16px, 2.5vw, 20px);
    text-align: justify;
    font-family: 'Lora', Arial, sans-serif;
    color: var(--gray);
    margin: 5px 0 20px;
}

a {
    color: var(--green);
    text-decoration: none;
    font-weight: bold;
}



/* Style initial de l'élément hr */
hr {
    width: 1px;
    margin: 20px 0;
    border: none;
    border-top: 2px solid var(--white);
    opacity: 0;
    transition: width 2s cubic-bezier(0.25, 1, 0.5, 1) 1s, opacity 5s ease-out;
}

hr.expand {
    width: 60%;
    margin: 20px 0;
    border: none;
    border-top: 2px solid var(--white);
    opacity: 1;
}


.link{
    display: inline-block;
    position: relative;
}

.link::after {
    content: '';
    position: absolute;
    bottom: 0; /* Le soulignement démarre juste sous le texte */
    left: 0;
    width: 0; /* Débute à zéro, sera animé */
    height: 3px; /* Hauteur du soulignement, tu peux ajuster selon tes préférences */
    background-color: var(--pink); /* La couleur du rectangle */
    transition: width 0.3s ease; /* Transition douce pour l'animation */
}
    
.link:hover::after {
    width: 100%; /* S'étend jusqu'à la largeur complète du h3 au survol */
}


/* Navbar styles */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: var(--white); /* Semi-transparent white */
    backdrop-filter: blur(10px);
    padding: 20px 0; /* Increased padding for a larger look */
    display: flex;
    justify-content: space-between; /* Align logo to the left and nav links to the right */
    align-items: center; /* Center vertically */
    z-index: 1000;
    font-family: 'Didot', serif;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.navbar a {
    margin: 0 15px;
    text-decoration: none;
    color: var(--black); /* Dark gray color for text */
    font-weight: bold;
    font-family: 'Lora', serif; /* Apply Lora font for links */
    font-size: 16px; /* Font size adjustment */
}

.navbar a:hover {
    color: var(--light-red); /* Light red hover effect */
}

.navbar .logo {
    margin-left: 20px;
    font-size: 24px; /* Make the logo slightly larger */
    font-family: 'Didot', serif; /* Logo uses Didot font */
    color: var(--black); /* Gunmetal color for logo */
}

/* Active link */
.navbar a.active {
    color: var(--light-red); /* Light red color for active link */
}

/* Bulette point */
ul, li {
    font-size: clamp(16px, 2.5vw, 20px); /* Même taille que les paragraphes */
    text-align: justify; /* Justifie le texte */
    font-family: 'Lora', Arial, sans-serif; /* Même police que les paragraphes */
    color: var(--gray); /* Même couleur que les paragraphes */
    margin: 5px 0 20px; /* Même marge que les paragraphes */
    line-height: 1.6; /* Ajoute un espacement entre les lignes pour une meilleure lisibilité */
    list-style-type: disc; /* Conserve les puces */
    padding-left: 20px; /* Ajoute un padding pour indenter les listes */
}

/* Containers */


/* main container*/
.main-container{
    width: 100%;
    min-height: 100vh;
    background-color: var(--black);
    z-index: 1;
}

.white-container{
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 30px 0 30px;
    box-sizing: border-box;
    background-color: var(--white);
    z-index: 1;
}

@media (max-width: 768px) {
    .white-container {
        padding: 0 !important; /* Supprime le padding pour les petits écrans */
    }
}

.wrapper {
    display: flex;
    flex-direction: column; 
    width: 100%;
    height: auto;
}

/* Classe pour souligner en rose */
.underline-pink {
    text-decoration: underline;
    text-decoration-color: var(--pink); /* Couleur du soulignement */
    text-decoration-thickness: 3px; /* Épaisseur du soulignement */
}

/* Classe pour le texte en gras */
.bold-text {
    font-weight: bold;
}


/* lastpage.css */
/* global.css */

/* La page gris reste en arrière-plan */
.gray-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* Prend toute la hauteur de la fenêtre */
    background-color: var(--light-gray);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 0; /* Elle est en arrière-plan au début */
}


@media (max-width: 768px) {
    .green-container {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0;
    }
}


.grid-container {
    display: grid;
    padding: 30px; /* Ajoute du padding autour de la grille */
    grid-template-columns: repeat(2, 1fr); /* Deux colonnes de taille égale */
    gap: 20px; /* Espace entre les éléments de la grille */
}

.grid-item {
    text-align: center;
    padding: 20px; /* Ajoute du padding à l'intérieur de chaque élément de la grille */
    width: 100%; /* Largeur ajustée pour chaque élément de la grille */
    box-sizing: border-box; /* Inclut le padding et la bordure dans la largeur */
    align-self: start; /* Aligne chaque élément en haut */
}

.grid-item h4, .grid-item img, .grid-item p {
    margin-bottom: 15px; /* Ajoute un espace entre les éléments à l'intérieur de chaque .grid-item */
}

/* Responsive img-experience */
.img-experience {
    height: clamp(30px, 5vw, 200px); /* Définit une hauteur flexible */
    width: auto; /* Maintient le ratio d'aspect en ajustant la largeur */
    object-fit: cover;
    margin-top: 30px;
    margin-bottom: 30px !important;
    transition: transform 0.3s ease;
}

.img-experience:hover {
    transform: scale(1.1); /* Agrandit légèrement l'image à 110% de sa taille originale lors du hover */
}


/* Media query pour s'assurer que les éléments passent en une seule colonne sur les petits écrans */
@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: 1fr; /* Une seule colonne sur les petits écrans */
    }

    .img-experience {
        height: clamp(60px, 10vw, 200px); /* Définit une hauteur flexible */
    }
}



.description {
    display: none; /* Cache la description par défaut */
    position: absolute;
    bottom: -80px;
    right: -30px;
    width: 110px;
    font-size: 16px;
    color: white;
    background-color: rgba(0, 0, 0, 0.6); /* Add background for readability */
    padding: 5px 10px;
    border-radius: 8px;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 5;
    text-align: center; /* Centre le texte à l'intérieur */
}