.project-wrapper {
    position: relative;
    width: 100%; /* Prend toute la largeur disponible */
    max-width: 900px;
    height: 500px;
    display: flex; /* Utilise flexbox pour le positionnement */
    justify-content: flex-start; /* Aligne le contenu à gauche */
    align-items: flex-start; /* Aligne le contenu en haut */
    margin: clamp(50px, 10vw, 100px) auto; /* Ajuste la marge en fonction de la largeur de l'écran */
    cursor: pointer; 
}

.project-container {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: clamp(50px, 10vw, 100px) auto; /* Ajuste la marge en fonction de la largeur de l'écran */

    height: 500px;

    overflow: hidden;
    background-size: cover;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    z-index: 1; /* En haut de la hiérarchie */
    margin: 0; /* Supprimer la marge ici */

    /* hints de performance */
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.transparent-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--trensparent-gray);
    z-index: 2; /* Au-dessus du contenu */
}

.green-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--green);
    z-index: 2; /* Au-dessus du contenu */
    transform: translateX(-100%); /* Fait disparaître le fond vert à gauche */
    transition: transform 0.5s ease; /* Transition pour le mouvement */
}

.project-content {
    position: relative;
    height: 500px; /* Fixe la hauteur de chaque projet */
    color: white;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 3; /* Assure qu'il est derrière les fonds */
    background-size: cover; /* Redimensionne l'image pour qu'elle tienne dans la boîte */
    background-repeat: no-repeat; /* Empêche la répétition de l'image */
    background-position: center; /* Centre l'image dans la boîte */
}

.project-text {
    position: absolute; /* Change position à absolute pour se baser sur le parent */
    z-index: 10; /* Assure que le texte est au-dessus de tout */
    bottom: 120px; /* Place le texte en bas */
    left: 80px;
    right: 80px;
    /* Ajoute du padding pour plus de lisibilité */
}

.project-text h1 {
    font-size: 3em;
    transition: all 0.5s ease;
}


.project-text p {
    margin-top: 10px;
    font-size: 3.2em;
    font-weight: bolder;
    color: white;
}

.project-text .presentation {
    margin-top: 5px;
    font-size: 1.3em;
    font-style: italic;
    font-weight: normal;
    color: white;
}


.project-wrapper:hover .green-background {
    transform: translateX(0); /* Fait apparaître le fond vert */
}


.project-wrapper:hover .project-text h1 {
    font-size: 3.5em; /* Agrandissement du titre */
}

/* BIG NUMBER */
.number-container {
    position: absolute;
    top: -95px; /* Positionné tout en haut */
    right: -25px; /* Positionné tout à droite */
    z-index: 4; /* Assurez-vous qu'il est au-dessus des autres éléments */
    margin: 0; /* Élimine les marges */
    padding: 0; /* Élimine les remplissages */
}

/* Suppression de la classe .big-number::after et modification de .big-number */
.big-number {
    position: absolute;
    top: 0; /* Gardez cette propriété pour le placer en haut */
    right: 0; /* Gardez cette propriété pour le placer à droite */
    font-size: 11em;
    color: rgba(150, 150, 150, 0); /* Couleur initiale : transparent */
    z-index: 4; 
    transition: color 0.5s ease; 
    overflow: hidden; 
    margin: 0; /* Élimine les marges */
    padding: 0; /* Élimine les remplissages */
}

/* Animation pour le changement de couleur */
@keyframes fillColor {
    0% {
        color: rgba(150, 150, 150, 0); /* Transparent */
        transform: translateY(100%); /* Commence en bas */
    }
    100% {
        color: white; /* Couleur finale */
        transform: translateY(0); /* Se déplace vers le haut */
    }
}

/* Au hover, appliquer l'animation */
.project-wrapper:hover .number-container .big-number {
    animation: fillColor 0.5s forwards 0.5s; /* Exécute l'animation après 3 secondes */
}


/* responsive mobile */
@media (max-width: 768px) {
  /* Wrapper en colonne, espacement et marges mobiles */
  .project-wrapper {
    margin: 50px 0 !important;
  }

  /* Image pleine largeur, ratio fixe, centrée et recadrée */
  .project-container {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 18/9;         /* adapte la hauteur automatiquement */
    background-size: cover;
    background-position: center;
    position: relative;
  }

  .project-text {
    position: absolute;  /* passe en positionnement absolu */
    bottom: 10px;           /* colle le bas */
    left: 0;             /* étend sur toute la largeur */
    width: 100%;
    background-color: var(--transparent-gray);
    padding: 10px;       /* Padding uniforme */
    box-sizing: border-box; /* Inclut le padding dans la largeur totale */
    white-space: normal; /* Permet le retour à la ligne */
    overflow-wrap: break-word; /* Coupe les mots longs si nécessaire */
}

  /* Titre et texte plus petits pour mobile */
  .project-text p:first-child {
    font-size: 1.8em;
    padding-bottom: clamp(20px, 8vw, 100px) !important;
    text-align: center;
  }

  .project-text .presentation {
    display: none;
  }

  /* Cacher les décorations desktop */
  .green-background,
  .number-container,
  .details-button,
  .arrow, .description{
    display: none !important;
  }
  
  .details-button {
    display: block;
    margin: 16px auto 0;
    padding: 10px 20px;
    font-size: 1em;
  }

}


/* Styles pour les détails du projet */
.modal {
    position: fixed;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0); /* Fond transparent par défaut */
    display: flex;
    justify-content: center;
    align-items: center; /* Centre horizontalement et verticalement */
    z-index: 1000; /* Place la modale au-dessus de tout */
    overflow: hidden; /* Évite le débordement */
    transition: background-color 0.3s ease; /* Animation pour le fondu */
}

.modal.show {
    background-color: rgba(0, 0, 0, 0.7); /* Remplace le fond par noir semi-transparent */
}

.modal-content {
    background-color: var(--white);
    width: 85%; /* Largeur de la modal */
    height: 85%; /* Limite la hauteur de la modal */
    padding: 0 clamp(20px, 10vw, 100px); /* Padding responsive with 0 for top and bottom */
    box-sizing: border-box; /* Assure que le padding n'augmente pas la taille de la div */
    overflow-y: auto; /* Ajoute un défilement pour la hauteur si le contenu dépasse */
    overflow-x: hidden; /* Bloque le défilement horizontal */
    transform: translateY(100%); /* Commence cachée en bas */
    transition: transform 0.3s ease; /* Animation pour glisser */
}

.modal.show .modal-content {
    transform: translateY(0); /* Remonte la modal */
}

.close-button-container {
    position: sticky;
    top: 0;
    right: calc(clamp(10px, 3vw, 100px) * -1);
    width: 100%;
    height: clamp(40px, 6vw, 80px); /* hauteur adaptative */
    background-color: transparent;
}

/* Double la taille du container au format mobile */
@media (max-width: 768px) {
    .close-button-container {
        height: calc(clamp(40px, 6vw, 80px) * 2); /* Double la hauteur */
    }

    /* Double la taille de la croix au format mobile */
    .close-button {
        font-size: calc(clamp(30px, 4vw, 80px) * 2); /* Double la taille */
    }
}

/* ——— Style de base ——— */
.close-button {
    position: absolute;
    top: 0;
    right: calc(clamp(10px, 3vw, 100px) * -1);
    font-size: clamp(30px, 4vw, 80px);
    cursor: pointer;
    font-weight: bold;
    color: var(--pink);
    transition: transform 0.3s ease, color 0.3s ease;
  }
  
  /* ——— Mobile (<768px) ——— */
  @media (max-width: 768px) {
    .close-button-container {
      height: calc(clamp(40px, 6vw, 80px) * 2);
    }
  
    .close-button {
      /* on double simplement chaque paramètre de clamp */
      font-size: clamp(60px, 8vw, 160px);
    }
  }
  

.close-button:hover {
    transform: rotate(180deg) scale(1.2);
}

/* Masque la modale par défaut */
.hidden {
    display: none;
}

/* Désactive le défilement lorsque la modale est active */
html.no-scroll,
body.no-scroll {
    overflow: hidden !important;
}

/* Classe pour activer le style de fond lorsque la modale est ouverte */
.modal-open {
    overflow: hidden; /* Désactive le défilement sur le corps */
}


/*Fleche plus de detail */
/* Styles pour le texte et la flèche */
/* Bouton */
.arrow-container { 
    position: absolute; /* Positionnement absolu */
    bottom: 100px; /* Positionné en bas */
    left: 50%; /* Centré horizontalement */
    transform: translate(-50%, 100px); /* Centré par rapport à l'élément parent et commence en bas */
    text-align: center; /* Centrer le contenu à l'intérieur */
    opacity: 0; /* Initialement invisible */
    transition: opacity 0.5s ease, transform 0.5s ease; /* Transition pour l'effet d'apparition */
    display: flex; /* Utilisation de flexbox */
    flex-direction: column; /* Aligne les enfants en colonne */
    align-items: center; /* Centre les enfants horizontalement */
}

/* Affiche la flèche et le bouton au survol de .project-wrapper */
.project-wrapper:hover .arrow-container {
    opacity: 1; /* Rendre visible */
    transform: translate(-50%, -20px); /* Monte à sa position finale */
}

/* Animation inverse pour cacher la flèche et le bouton lorsque le curseur n'est plus sur .project-wrapper */
.project-wrapper:not(:hover) .arrow-container {
    opacity: 0; /* Rendre invisible */
    transform: translate(-50%, 100px); /* Retourne à sa position de départ */
}

/* Style pour le bouton */

.details-button {
    display: inline-block; /* Affichage en ligne */
    background-color: var(--pink) !important; /* Couleur de fond du bouton */
    color: var(--white) !important; /* Couleur du texte */
    font-size: 30px !important; /* Taille de la police */
    border: none; /* Supprime la bordure */
    padding: 10px 20px; /* Ajoute du padding */
    cursor: pointer; /* Change le curseur au survol */
    border-radius: 5px; /* Arrondit les coins */
    position: relative; /* Nécessaire pour le positionnement de la flèche */
    z-index: 1; /* S'assurer que le bouton est au-dessus */
    transition: background-color 0.5s ease; /* Transition de la couleur de fond */
}

/* Style pour la flèche */
.arrow {
    font-size: 40px; /* Taille de la flèche */
    font-weight: bolder;
    color: var(--white); /* Couleur de la flèche */
    margin-top: -90px; /* Espace négatif pour que la flèche touche le bouton */
    transition: transform 0.5s ease; /* Transition pour le mouvement de la flèche */
    position: relative; /* Pour le positionnement par rapport au bouton */
    z-index: 0; /* S'assurer que la flèche est en dessous du bouton */
}

/* Lorsque le bouton est survolé, la couleur change et la flèche monte */
.details-button:hover {
    background-color: var(--purple) !important; /* Couleur violet au survol */
}

/* Lorsque le bouton est survolé, la flèche monte */
.details-button:hover + .arrow {
    transform: translateY(-20px); /* Monte la flèche vers le haut */
}

/* Rendre le texte plus grand lorsque hover */
.project-wrapper:hover .project-text {
    transform: translateY(-100px); /* Monte de 100px */
    transition: transform 0.5s ease, font-size 0.5s ease; /* Transition pour le mouvement et la taille */
    font-size: 1.2em; /* Augmente la taille du texte */
}

/* Animation inverse pour le texte lorsque le curseur n'est plus sur .project-wrapper */
.project-wrapper:not(:hover) .project-text {
    transform: translateY(0); /* Retourne à la position d'origine */
    transition: transform 0.5s ease, font-size 0.5s ease; /* Transition pour le mouvement et la taille */
    font-size: 1em; /* Réinitialise la taille du texte */
}



/* BAGE*/

.badge-image-container {
    position: absolute; /* Place le badge au-dessus du project-wrapper */
    bottom: 20px; /* Ajuste selon tes besoins */
    right: 30px; /* Ajuste selon tes besoins */
    z-index: 4; /* Augmente le z-index pour que tout le contenu soit au-dessus */
    margin: 0;
    padding: 0;
    opacity: 0; /* Initialement invisible */
    visibility: hidden; /* Initialement caché */
    transition: opacity 0.5s ease, visibility 0.5s ease; /* Transition pour l'effet de fondu */
}

.badge-image-langage {
    width: 60px; /* Taille de l'image */
    height: auto; /* Conserve les proportions */
    position: relative;
    top: 0; /* Ajuste selon tes besoins */
    left: 0; /* Ajuste selon tes besoins */
    z-index: 5; /* Place l'image au-dessus du cercle */
}

.badge-image-round {
    content: '';
    position: absolute;
    top: 0; /* Ajuste selon tes besoins */
    left: 0;
    width: 60px; /* Diamètre du cercle */
    height: 60px; /* Diamètre du cercle */
    background-color: var(--white); /* Couleur de fond avec une légère transparence */
    border-radius: 50%; /* Rend le fond circulaire */
    z-index: 4; /* Place le cercle derrière l'image, mais au-dessus du conteneur */
}

.round-c {
    width: 50px !important; /* Diamètre du cercle */
    height: 50px !important; /* Diamètre du cercle */
    top: 10px; /* Ajuste selon tes besoins */
    left: 10px;
}

/* Affiche la div au survol de .project-wrapper */
.project-wrapper:hover .badge-image-container {
    opacity: 1; /* Rendre visible */
    visibility: visible; /* Rendre visible */
}

.badge-image-container:hover .description {
    display: block;
}

/* Experience: badges animés au hover */
.experience-card .badge-image-container {
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.5s ease, visibility 0.5s ease, transform 0.5s ease;
}

.experience-card:hover .badge-image-container {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.experience-card .badge-python {
    right: 30px;
    left: auto;
    bottom: 20px;
}


/* mobile */
@media (max-width: 768px) {
  /* Badge et bouton centrés */
  .badge-image-container {
    display: block !important;
    flex-direction: column;
    align-items: center;
    visibility: visible !important;
    opacity: 1 !important;
    gap: 4px;
    position: absolute;
    top: clamp(5px, 5vw, 20px); /* Ajuste la position verticale selon la taille de l'écran */
    right: clamp(5px, 5vw, 20px); /* Ajuste la position horizontale selon la taille de l'écran */
  }

  .badge-image-langage {
    width: clamp(30px, 6vw, 70px) !important; /* Ajuste la taille de l'image selon la largeur de l'écran */
  }
  
  .badge-image-round, .round-c {
    width: clamp(30px, 6vw, 50px) !important; /* Ajuste la taille selon la largeur de l'écran */
    height: clamp(30px, 6vw, 50px) !important; /* Ajuste la taille selon la largeur de l'écran */
    top: 2px !important; /* Ajuste la position pour mobile */
    left: 0.4px !important; /* Ajuste la position pour mobile */
  }
}

.long{
    margin: 0 0 60px 0 !important;
    padding: 0 !important;
}

/* Experience cards (distinct from projects) */
.experience-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    background-color: var(--white);
    padding: 24px 28px;
    margin: 28px auto;
    max-width: 900px;
    height: 420px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    position: relative;
}

.experience-logo {
    width: 161px;
    height: 135px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.experience-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.experience-logo img:hover {
    transform: scale(1.1);
}

.experience-content {
    text-align: center;
    max-width: 700px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-bottom: 1em;
}

.experience-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.experience-title {
    font-size: 1.5em;
    font-weight: bold;
    margin: 0 0 6px;
    color: var(--black);
    text-align: center;
}

.formation-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    width: 100%;
    margin: 4px 0 12px;
    padding: 0 8px;
    box-sizing: border-box;
}

.formation-date,
.formation-location {
    font-size: 0.95em;
    color: var(--gray);
    font-weight: bold;
}

.formation-date {
    text-align: left;
}

.formation-location {
    text-align: right;
}

.experience-summary {
    font-size: 1em;
    color: var(--gray);
    margin: 0 0 8px;
    text-align: center;
}

.experience-button {
    font-size: 30px !important;
    padding: 10px 10px !important;
}
.experience-arrow-container {
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: auto;
    margin-bottom: 16px;
}

.experience-arrow-container .details-button {
    position: relative;
    z-index: 1;
}

.experience-arrow-container .arrow {
    font-size: 40px;
    font-weight: bolder;
    color: var(--white);
    margin-top: -90px;
    position: relative;
    z-index: 0;
    transition: transform 0.5s ease;
}

.experience-arrow-container .details-button:hover + .arrow {
    transform: translateY(-20px);
}

@media (max-width: 768px) {
    .experience-card {
        padding: 18px 20px;
        margin: 20px auto;
        height: auto;
    }

    .experience-logo {
        width: 100px;
        height: 70px;
    }

    .experience-title {
        font-size: 1.3em;
    }

    .formation-meta {
        flex-direction: column;
        align-items: center;
        gap: 4px;
        margin-bottom: 10px;
    }

    .formation-date,
    .formation-location {
        text-align: center;
    }
}

/* --- Carrousel d'images --- */
.image-carousel {
    position: relative;
    width: 100%;
    max-width: 900px;
    height: 500px;
    margin: 25px auto 25px;
    overflow: hidden;
    background-size: cover;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    z-index: 1;
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    will-change: transform;
  }

  .carousel-item {
    flex: 0 0 900px;
    box-sizing: border-box;
    text-align: center;
  }

  .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 4px;
  }

  .carousel-caption {
    margin-top: 8px;
    font-size: 1em;
    color: #fff;
    text-shadow: 0 0 5px rgba(0,0,0,0.7);
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.4);
    padding: 6px 12px;
    border-radius: 4px;
  }

  .carousel-control {
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    width: 50px;
    height: 50px;
    cursor: pointer;
    border-radius: 50%;
    font-size: 1.8em;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
  }

  .carousel-wrapper {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 25px auto 25px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .carousel-control {
    position: absolute;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
  }
  
  .carousel-control.prev {
    left: -50px;
  }
  
  .carousel-control.next {
    right: -50px;
  }
  
  .carousel-control img {
    /* Responsive */
    width: 8vw;
    min-width: 40px;
    max-width: 80px;
    height: auto;
  }
  
  /* On définit pour chaque bouton sa transformation de base via une variable CSS */
  .carousel-control.prev img {
    --base-transform: scaleX(-1);
    transform: var(--base-transform);
  }
  
  .carousel-control.next img {
    --base-transform: scale(1);
    transform: var(--base-transform);
  }
  
  /* Keyframes uniques pour flip + scale, réutilisant --base-transform */
  @keyframes flip-scale {
    0% {
      transform: var(--base-transform) scale(1);
    }
    50% {
      transform: var(--base-transform) scale(1.2);
    }
    100% {
      transform: var(--base-transform) scale(1.2);
    }
  }
  
  /* Application de l’animation au hover */
  .carousel-control img:hover {
    transform: scale(1.2);
    transition: transform 0.3s ease-in-out;
  }

  .carousel-control.prev img:hover {
    transform: scaleX(-1) scale(1.2);
    transition: transform 0.3s ease-in-out;
  }
  
  /* responsive mobile */
  
  @media (max-width: 768px) {
    .modal {
      width: 100% !important; /* Prend toute la largeur */
      height: 100% !important; /* Prend toute la hauteur */
      background-color: var(--white) !important; /* Fond blanc sans transparence */
      overflow-y: auto; /* Ajoute un défilement vertical si nécessaire */
    }

    .modal-content {
      width: 100% !important; /* Prend toute la largeur */
      height: 100% !important; /* Prend toute la hauteur */
      padding: 20px !important; /* Ajoute un padding pour le contenu */
      box-sizing: border-box; /* Inclut le padding dans la taille totale */
      transform: none !important; /* Supprime l'animation de translation */
    }

    .modal.show {
      background-color: var(--white) !important; /* Fond blanc sans transparence */
    }
    
    .image-carousel {
      height: auto;
      overflow-x: scroll;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
    }
  
    .carousel-track {
      flex-wrap: nowrap;
      width: auto;
    }
  
    .carousel-item {
      flex: 0 0 100%;
      scroll-snap-align: center;
      max-width: 100%;
    }
  
    .carousel-control {
      display: none; /* Cache les flèches sur mobile */
    }
  
    .carousel-caption {
      font-size: 0.9em;
      padding: 4px 8px;
      bottom: 5px;
    }
  }