/*
Theme Name: Portfolio Angelo Bosetti
Author: Angelo Bosetti
Author URI: en cours de production
Description: Ce thème a été créer dan sle cadre d'un exercice de ma formation de mmi.
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: Angelo Bosetti
Tags: personel, portfolio, mmi, projets
Version: 0.1
*/

/* Importation des polices */
@import url('https://fonts.googleapis.com/css2?family=Antic+Didone&display=swap');

@font-face {
  font-family: 'TAN PEARL';
  src: url('<?php echo get_template_directory_uri(); ?>/media/fonts/tan-pearl.otf') format('opentype'),
       url('https://portfolio.angelo-bosetti.fr/wp-content/themes/portfolio/media/fonts/tan-pearl.otf') format('opentype'),
       url('./media/fonts/tan-pearl.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

:root {
  --White: #F2E0CF; /* Couleur blanche personnalisée */
  --Green: #AEDD71; /* Couleur verte personnalisée */
  --Black: #131315; /* Couleur noire personnalisée */
}


/* 
Architecture du css:
1. Style de base
2. Header
3. Footer
4. Page d'accueil
5. Archive projets
6. Page Single projets
7. Page About
8. Background Circles 
*/


/*1. ---Style de base--- */


  body {
    background: #131315;
    font-family: 'Antic Didone', serif; /* Police par défaut */
  }

  p, h1, h2, h3, h4, h5, h6 {
    color: var(--White);
  }

  button {
    background: var(--Black);
    color: var(--White);
    font-size: 36px;
    font-family: 'Antic Didone', serif;
    padding: 10px 15px;
    border: 1px solid var(--White);
    border-radius: 5px;
    transition: background 0.3s ease;
  }

  button:hover {
    background: var(--White);
    color: var(--Black);
  }



  /* Heading (h1) */
  h1 {
    font-family: 'TAN PEARL', serif;
    font-size: 80px; /* Desktop */
    line-height: 1.2;
  }

  h2 {
    font-family: 'TAN PEARL', serif;
    font-size: 70px; /* Desktop */
    line-height: 1.2;
  }

  h3 {
    font-family: 'Antic Didone', serif;
    font-size: 64px; /* Desktop */
    line-height: 1.3;
  }

  h4 {
    font-family: 'Antic Didone', serif;
    font-size: 48px; /* Desktop */
    line-height: 1.4;
  }

  p {
    font-family: 'Antic Didone', serif;
    font-size: 36px; /* Desktop */
  }
  img {
    max-width: 100%;
    height: auto;
  }

  /* --- Responsive Design pour Mobile --- */
  @media (max-width: 768px) {
    h1 {
      font-size: 60px; /* Mobile */
    }

    h2 {
      font-size: 50px; /* Mobile */
    }

    h3 {
      font-size: 40px; /* Mobile */
    }

    h4 {
      font-size: 32px; /* Mobile */
    }

    p {
      font-size: 24px; /* Mobile */
    }
    button {
      font-size: 24px;
    }
  }

   .wrap {
  margin-top: 120px; /* Ajoutez une marge correspondant à la hauteur de votre header */
  
  }
/*1. ---Fin Style de base--- */





/*2. ---Header--- */


  /* Header styles */
    .site-header {
    position: fixed; /* Fixe le header en haut de la page */
    top: 20px; /* Descend le header de 20px depuis le haut */
    left: 50%; /* Place le header au milieu horizontalement */
    transform: translateX(-50%); /* Recentre le header car `left: 50%` utilise le coin gauche */
    width: calc(100% - 40px); /* Réduit la largeur pour ajouter un espacement de 20px de chaque côté */
    max-width: 2300px; /* Fixe une largeur maximale pour ne pas trop étirer sur les écrans larges */
    z-index: 10; /* S'assure que le header reste au-dessus du contenu */
    padding: 10px 20px; /* Ajoute de l'espace interne */
    margin: 0 auto; /* Centre horizontalement */
    }

 
  /* suprime les marges pour la hauteur du header*/
    body.home .wrap {
    margin-top: 0;
  }

  /* Nouveau conteneur pour les éléments flexibles du header */
  .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Prend toute la largeur */
  }

  /* Menu-toggle centré indépendamment */
  .menu-toggle {
    position: absolute; /* S'enlève du flux normal */
    top: 50%; /* Aligne verticalement */
    left: 50%; /* Aligne horizontalement */
    transform: translate(-50%, -50%); /* Ajuste le décalage pour un centrage parfait */
    font-weight: bold;
    text-align: center;
    color: #F2E0CF;
    z-index: 10; /* Au-dessus des autres éléments */
  }


  img.custom-logo {
    width: auto;
    height: 75px;
  }

  .menu-toggle {
    cursor: pointer;
    font-size: 40px;
    flex: 1;
    text-align: center;
    z-index: 10;
    color: #F2E0CF;
  }

  /* Menu styles */
  .site-navigation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5); /* Fond sombre semi-transparent */
    backdrop-filter: blur(10px); /* Effet de flou */
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 5;
    /* transition: background 0.8s ease-in-out; */ 
  }

  .site-navigation.active {
    display: flex;
  }

  .menu-container {
  }

  .menu-items {
    list-style: none;
    padding: 0;
    text-align: center;
  }

  .menu-items li {
    margin: 15px 0;
  }

  .menu-items li a {
    text-decoration: none;
    color: var(--White);
    font-size: 1.5em;
    font-weight: bold;
    transition: transform 0.3s ease;
  }

  .menu-items li a:hover {
    color: var(--Green);
    font-size: 1.6em;
    transition: transform 0.3s ease;
    
  }

  /* Prevent body from scrolling when menu is open */
  .site-navigation.active ~ .wrap {
    overflow: hidden;
    height: 100vh;
    position: fixed;
  }

  .site-navigation {
    font-family: 'TAN PEARL', serif;
    font-size: 36px;
  }
  

  /* --- Ajout Volume --- */



    /* Cache les icônes inutilisées */
    .hidden {
      display: none;
    }

    .audio-controls {
      display: flex;
      align-items: center;

    }

    /* Audio Wrapper */
    .audio-wrapper {
      display: flex;
      align-items: center; /* Aligne verticalement les éléments */
      gap: 10px; /* Espacement entre l'icône et la barre */
      position: relative;
    }

    /* Barre de volume par défaut : cachée */
    #volume-slider {
      width: 100px; /* Largeur de la barre de volume */
      height: 8px;
      appearance: none;
      background: var(--White);
      border-radius: 3px;
      cursor: pointer;
      opacity: 0; /* Initialement invisible */
      transform: scaleX(0); /* Réduit à 0 pour animation fluide */
      transform-origin: right; /* Point d'origine pour l'effet stretch */
      transition: opacity 0.4s ease, transform 0.4s ease; /* Animation fluide */
    }

    /* Animation du slider thumb */
    #volume-slider::-webkit-slider-thumb {
      appearance: none;
      width: 12px;
      height: 12px;
      background: var(--Green);
      border-radius: 50%;
      cursor: pointer;
    }

    #volume-slider::-moz-range-thumb {
      width: 10px;
      height: 10px;
      background: var(--Black);
      border-radius: 50%;
      cursor: pointer;
    }

    /* Barre visible au survol avec animation */
    .audio-wrapper:hover #volume-slider {
      opacity: 1; /* Rend visible */
      transform: scaleX(1); /* Étend la barre avec une animation fluide */
    }


    /* Bouton mute/unmute */
    #mute-toggle {
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
      width: 48px;
      height: 48px; /* Taille fixe de l'icône */
    }

    #mute-toggle img {
      width: 48px; /* Ajuste l'image au bouton */
      height: 48px;
    }
    /* -Fin Ajout Volume- */


/*2. ---Fin Header--- */


/*3. ---Footer--- */

  
  .site-footer {
      
      padding: 20px;
      text-align: center;
  }

  .footer-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 15px;
  }

  .footer-links a,
  .footer-socials .social-name {
      color: var(--White);
      text-decoration: none;
      font-size: 18px; /* Taille alignée avec les social names */
      transition: transform 0.3s ease, filter 0.3s ease;
  }

  .footer-links a:hover,
  .footer-socials .social-name:hover {
      color: var(--Green);
      transform: scale(1.1);
  }

  .footer-socials img {
      width: 48px;
      height: 48px;
      margin-right: 8px;
      transition: transform 0.3s ease, filter 0.3s ease;
  }

  .footer-socials a:hover img {
      transform: scale(1.1);
      color: var(--Green);
  }

  .footer-socials {
      display: flex;
      align-items: center;
      gap: 15px;
  }

  .footer-socials a {
      display: flex;
      align-items: center;
      gap: 5px;
  }

  .footer-socials .social-name {
      font-size: 18px;
  }

  .footer-links {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
  }

  a.footer-link {
      padding: 5px 10px;
  }

  .footer-copyright {
      font-size: 14px;
      color: var(--White);
      margin-top: 20px;
  }

  .footer-links a,
  .footer-socials a {
    text-decoration: none; /* Supprime la ligne bleue sous les liens */
  }


  /* Responsive Desktop Styles */
  @media (min-width: 768px) {
      .footer-content {
          flex-direction: column;
          gap: 20px;
      }

      .footer-layout {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          width: 100%;
          max-width: 1200px;
          margin-bottom: 20px;
      }

      .footer-socials {
          flex: 1;
          justify-content: flex-start;
      }

      .footer-links {
          justify-content: flex-end;
      }

      .footer-copyright {
          font-size: 16px;
      }
  }


/*3. ---Fin Footer--- */




/*4. ---Page d'accueil--- */


  .section-presentation{
    padding: 150px;
  }

  .titre, .presentation-titre{ 
    text-align: center;
    font-weight: 400;
    line-height: 130%; /* 117px */
  }


  /* Texte dans la présentation */
  .presentation-paragraphe {
    font-size: 24px;
    line-height: 1.5;
    color: var(--White);
    text-align: center; /* Centrage horizontal du texte */
    display: flex; /* Flexbox pour centrer verticalement */
    justify-content: center; /* Centre horizontalement les enfants */
    align-items: center; /* Centre verticalement les enfants */
    margin: 0; /* Supprime les marges */
  }

  .hero-section {
    margin-top: 0; /* Assurez-vous qu'il commence tout en haut */
    padding: 0;
  }
  
  .hero-section {
    position: relative;
    width: 100%;
    height: 100vh; /* La vidéo prend toute la hauteur de l'écran */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .hero-video-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1; /* La vidéo reste en arrière-plan */
  }

  .background-video {
      width: 100%;
      height: 100%;
      object-fit: cover; /* La vidéo remplit tout l'espace sans déformation */
  }

  .hero-content {
      position: relative;
      z-index: 1; /* Le contenu reste devant la vidéo */
      text-align: center;
      color: white; /* Couleur du texte */
      font-size: 4rem; /* Taille du texte */
      font-family: 'TAN PEARL', serif; /* Font utilisée */
      text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); /* Ajoute un ombrage pour le contraste */
  }

  .titre {
      margin: 0;
      padding: 0;
  }

  /* Texte par défaut */
  .text-highlight {
    color: #F2E0CF; /* Couleur par défaut */
    transition: color 0.3s ease; /* Animation fluide */
  }

  

  /* Survol de la div */
  .presentation-paragraphe:hover .text-highlight {
    color: #AEDD71; /* Vert au survol de la div */
  }
  
  .section-presentation,
  .more-project-btn {
    text-align: center; /* Centre tous les éléments enfants dans cette section */
    }


    .btn-index {
        display: inline-block; /* Largeur du bouton ajustée au texte */
        text-align: center; /* Centre le contenu dans le bouton */
        text-decoration: none; /* Retire le soulignement */
        background: var(--Black);
        color: var(--White);
        font-size: 36px;
        font-family: 'Antic Didone', serif;
        padding: 10px 15px; /* Ajoute des marges internes */
        border: 1px solid var(--White);
        border-radius: 5px;
        transition: background 0.3s ease;
        margin: 0; /* Supprime les marges inutiles */
    }

    .btn-index:hover {
        background: var(--White);
        color: var(--Black);
    }

  .text-contact {
      color: var(--Green);
      margin: 50px auto; /* Espacement vertical */
      padding: 0 15px; /* Ajoute des marges internes gauche/droite */
      text-align: center; /* Centre le texte */
      max-width: 80%; /* Optionnel : limite la largeur */
      line-height: 1.6; /* Améliore la lisibilité */
    }
  /*Last Projets*/
      .last-projet-cards {
      display: flex;
      justify-content: center; /* Centre horizontalement */
      align-items: center; /* Centre verticalement */
      height: 100vh; /* Prend toute la hauteur de l'écran */
      overflow: hidden; /* Désactive le scroll horizontal si nécessaire */
      background-color: #131315; /* Optionnel : une couleur de fond pour l'effet visuel */
  }

      .last-project_title {
        display: flex;
        flex-direction: rows;
        align-items: center; /* Centrer horizontalement */
        margin: 0 auto; /* Centrer sur la page */
        padding: 0 40px; /* Ajoute des marges internes (gauche et droite) */
        text-align: center; /* Centre le texte */
    }

    .last-project_h3 {
        font-size: 2.5rem;
        color: var(--Green);
    }

    .last-project-span {
        display: block;
        width: 75%; /* Optionnel : ajuster la largeur */
        height: 2.5px; /* Une ligne de séparation (ou autre design) */
        background-color: var(--Green); /* Couleur de ton choix */
        margin: 0 auto; /* Centre la ligne */
    }

    .last-projet-card {
        position: relative;
        flex: 0 0 auto; /* Fixe la largeur de la carte */
        width: 950px;
        aspect-ratio: 950 / 575; /* Ratio fixe (1.65:1) */
        border-radius: 10px;
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        background-color: #fff;
    }

    /* Effet au survol */
    .last-projet-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
    }

    /* Image de la carte */
    .last-projet-card-image img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; /* L'image remplit la carte tout en respectant son ratio */
    }

    /* Overlay */
    .last-projet-card-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.85); /* Fond semi-transparent */
        color: white;
        opacity: 0; /* Initialement invisible */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 40px; /* Ajoute des marges internes pour éviter que le contenu touche les bords */
        box-sizing: border-box; /* Inclut le padding dans les dimensions de l'overlay */
        border-radius: 10px; /* Ajuste le rayon pour qu'il corresponde aux bords de la carte */
        transition: opacity 0.3s ease-in-out; /* Transition fluide pour l'apparition */
        overflow: hidden; /* Empêche tout contenu de dépasser l'overlay */
    }

    .last-projet-card:hover .last-projet-card-overlay {
        opacity: 1; /* Rendre l'overlay visible au survol */
    }

    /* Contenu de l'overlay */
    .last-projet-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%; /* S'assure que le contenu occupe toute la largeur disponible */
        margin-bottom: 15px;
    }

    .last-projet-card-title {
        font-size: 40px;
        font-family: 'TAN PEARL', serif;
        color: var(--White);
        margin: 0;
    }

    .last-projet-type {
        font-size: 32px;
        font-family: 'Antic Didone', serif;
        color: var(--White);
    }

    .last-projet-card-description {
        font-size: 24px;
        font-family: 'Antic Didone', sans-serif;
        color: var(--White);
        margin-bottom: 15px;
        padding: 0 20px;
    }

    .last-projet-see-more-btn {
        align-self: center; /* Centré horizontalement */
        background: var(--Black);
        color: var(--White);
        font-size: 1.5rem;
        font-family: 'Antic Didone', serif;
        text-decoration: none;
        padding: 10px 15px;
        border: 1px solid var(--White);
        border-radius: 5px;
        transition: background 0.3s ease;
    }

    .last-projet-see-more-btn:hover {
        background: var(--White);
        color: var(--Black);
    }

    /* Animation fluide */
    .last-projet-card-title,
    .last-projet-type,
    .last-projet-card-description,
    .last-projet-see-more-btn {
        transform: translateY(20px); /* Position initiale */
          opacity: 0;
          transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .last-projet-card:hover .last-projet-card-title,
    .last-projet-card:hover .last-projet-type,
    .last-projet-card:hover .last-projet-card-description,
    .last-projet-card:hover .last-projet-see-more-btn {
        transform: translateY(0); /* Position finale */
        opacity: 1; /* Visible */
    }


    
/*4. ---Fin Page d'accueil--- */




/*5. ---Archive projets--- */

  
  /* Styles globaux */

    /* Conteneur pour le titre et le menu déroulant */

    .title_projets{
      margin: 0;
    }
    .title-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Menu déroulant */
    .filter-container {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .filter-container label {
        font-size: 16px;
        font-weight: 500;
        color: var(--White);
    }

    /* Personnalisation de la police et de la couleur du menu déroulant */
    .filter-container select {
        padding: 8px 12px; /* Ajouter du padding pour plus de confort visuel */
        font-size: 16px; /* Taille de police */
        font-family: 'Antic Didone', serif; /* Police de ton choix */
        color: #333; /* Couleur du texte avant sélection */
        background-color: var(--White); /* Couleur de fond avant sélection */
        border: 1px solid #ccc; /* Bordure pour le style */
        border-radius: 4px; /* Coins arrondis */
        cursor: pointer; /* Curseur en forme de main */
        transition: background-color 0.3s ease, border-color 0.3s ease; /* Transition douce lors du survol ou de la sélection */
    }

    /* Changer la couleur de fond et du texte lorsque l'utilisateur survole ou sélectionne */
    .filter-container select:hover {
        background-color: var(--White); /* Changer la couleur de fond au survol */
        border-color: var(--Green); /* Changer la bordure au survol */
    }

    /* Changer la couleur de fond lorsque le menu est actif (c'est-à-dire une catégorie sélectionnée) */
    .filter-container select:focus {
        background-color: var(--White); /* Couleur de fond après sélection */
        border-color: var(--Green); /* Couleur de bordure après sélection */
        color: #333; /* Couleur du texte après sélection */
    }

    .filter-container select:focus {
        outline: none;
        border-color: var(--Green);
    }
    .title_projets {
        text-align: center;
        font-size: 2.5rem;
        font-family: 'TAN PEARL', serif;
    }

  /* Section des cartes */
    .cards {
        display: flex;
        overflow-x: auto; /* Scroll horizontal */
        gap: 20px; /* Espacement entre les cartes */
        padding: 20px;
        scrollbar-width: thin; /* Style pour les navigateurs compatibles */
        scrollbar-color: #888 #f0f0f0; /* Couleur de la barre de défilement */
    }

    .cards::-webkit-scrollbar {
        height: 10px; /* Hauteur de la barre de défilement */
    }

    .cards::-webkit-scrollbar-track {
        background: #f0f0f0; /* Fond de la barre */
    }

    .cards::-webkit-scrollbar-thumb {
        background-color: #888; /* Couleur du "curseur" */
        border-radius: 5px;
    }

    .projet-card {
        position: relative;
        flex: 0 0 auto; /* Fixe la largeur des cartes */
        width: 800px;
        aspect-ratio: 950 / 575; /* Ratio fixe (1.65:1) */
        border-radius: 10px;
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        background-color: #fff;
    }

  /* Effet au survol */
    .projet-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
    }

  /* Image du projet */
  .card-image img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; /* L'image remplit la carte tout en respectant son ratio */
  }

  /* Overlay */
  .card-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.85); /* Fond semi-transparent */
      color: white;
      opacity: 0; /* Initialement invisible */
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 40px; /* Ajoute des marges internes pour éviter que le contenu touche les bords */
      box-sizing: border-box; /* Inclut le padding dans les dimensions de l'overlay */
      border-radius: 10px; /* Ajuste le rayon pour qu'il corresponde aux bords de la carte */
      transition: opacity 0.3s ease-in-out; /* Transition fluide pour l'apparition */
      overflow: hidden; /* Empêche tout contenu de dépasser l'overlay */
  }

  .projet-card:hover .card-overlay {
      opacity: 1; /* Rendre l'overlay visible au survol */
  }

  /* Contenu de l'overlay */
  .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%; /* S'assure que le contenu occupe toute la largeur disponible */
      margin-bottom: 15px;
  }

  /* Titre (aligné à gauche) */
  .card-title {
      font-size: 40px;
      font-family: 'TAN PEARL', serif;
      color: var(--White);
      margin: 0;
  }

  /* Type de projet (aligné à droite) */
  .project-type {
      font-size: 32px;
      font-family: 'Antic Didone', serif;
      color: var(--White);
  }

  /* Description */
  .card-description {
      font-size: 24px;
      font-family: 'Antic Didone', sans-serif; /* Police classique */
      color: var(--White);
      margin-bottom: 15px;
  }

  /* Bouton "En savoir plus" */
  .see-more-btn {
      align-self: center; /* Centré horizontalement */
      background: var(--Black);
      color: var(--White);
      font-size: 1.5rem;
      font-family: 'Antic Didone', serif;
      text-decoration: none;
      padding: 10px 15px;
      border: 1px solid var(--White);
      border-radius: 5px;
      transition: background 0.3s ease;
  }

  .see-more-btn:hover {
      background: var(--White);
      color: var(--Black);
  }

    /* Animation fluide sur le titre et la catégorie */
    .card-title, .project-type, .card-description, .see-more-btn {
        transform: translateY(20px); /* Position initiale */
        opacity: 0;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .projet-card:hover .card-title,
    .projet-card:hover .project-type,
    .projet-card:hover .card-description,
    .projet-card:hover .see-more-btn {
        transform: translateY(0); /* Animé vers sa position finale */
        opacity: 1; /* Rendu visible */
    }


  /* --- Scroll Bar Style --- */
    /* --- Masquer la barre de défilement par défaut --- */
      .cards {
          scrollbar-width: none; /* Firefox */
          -ms-overflow-style: none; /* IE 10+ */
      }

      .cards::-webkit-scrollbar {
          display: none; /* Chrome, Safari */
      }
    
    
    .scroll-bar {
      position: relative;
      margin: 20px auto 0;
      width: 80%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .scroll-start, .scroll-end {
        font-size: 24px;
        color: var(--White); /* Variable CSS personnalisée */
        font-family: 'Antic Didone', sans-serif; /* Assurez-vous que cette police est importée */
        margin: 0 10px;
    }

    .scroll-lines {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex: 1;
      max-width: 750px;
      height: 50px; /* Hauteur totale de la zone de la barre */
      position: relative;
    }
   /* Ligne active (visible en vert) */
    .scroll-lines .line.active {
        height: 45px; /* Taille plus grande pour la ligne active */
        background-color: var(--Green); /* Couleur verte */
        width: 4px; /* Barre plus épaisse */
        border-radius: 2px; /* Coins légèrement arrondis */
        transition: height 0.15s ease-in-out, background-color 0.15s ease-in-out, width 0.15s ease-in-out, border-radius 0.15s ease-in-out;
    }

    /* Ligne non active (par défaut) */
    .scroll-lines .line {
        width: 2.5px;
        height: 35px; /* Taille normale */
        background-color: var(--White);
        border-radius: 2px; /* Coins légèrement arrondis */
        transition: height 0.15s ease-in-out, background-color 0.15s ease-in-out, width 0.15s ease-in-out, border-radius 0.15s ease-in-out;
    }

    .scroll-lines {
    cursor: pointer; /* Indique que c'est interactif */
    user-select: none;
  }

  .scroll-lines .line:hover {
      background-color: var(--Green);
      height: 50px;
      transition: height 0.2s ease-in-out, background-color 0.2s ease-in-out;
  }
          

  /* Styles pour mobile */
  @media (max-width: 768px) {
      .cards {
          display: grid; /* Les cartes passent en grille pour les petits écrans */
          grid-template-columns: 1fr;
          gap: 20px;
      }

      .projet-card {
          width: 100%; /* La carte s'adapte à la largeur de l'écran */
          aspect-ratio: auto; /* Pas de ratio forcé pour mobile */
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      }

      .card-content {
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
          padding: 20px;
      }

      .card-image img {
          border-bottom: 1px solid #ddd;
      }

      .card-overlay {
          position: static;
          background-color: transparent;
          opacity: 1;
          padding: 0;
      }

      .project-type {
          margin-bottom: 10px;
          font-size: 1rem;
          color: #333;
      }

      .title-card a {
          color: var(--White);

      }

      .see-more-btn {
          margin-top: 15px;
      }
  }


/*5. ---Fin Archive projets--- */

/*6 ---Page Single projets--- */
  .content-single_projets {
      position: relative;
      z-index: 1; /* Devant les cercles */
      padding-left: 50px;
      padding-right: 50px;
  } 

/*6 ---Page Single projets--- */

/*7 ---Page About--- */


  /* Style du contenu principal */
  .content {
      position: relative;
      z-index: 1; /* Devant les cercles */
      color: var(--White);
      text-align: center;
      padding: 50px;
  }
    /* SECTION GLOBALE DE LA PAGE ABOUT */
  .about-page {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
      font-family: Arial, sans-serif;
  }

  .about-title {
      text-align: center;
      font-size: 2.5rem;
      color: var(--Green);
      margin-bottom: 30px;
  }


  /* Style par défaut pour les mots importants */
  .text-hover {
      color: var(--White); /* Couleur de base */
      font-weight: normal;
      transition: color 0.3s ease-in-out, font-weight 0.3s ease-in-out;
  }

  /* Survol du paragraphe contenant le texte */
  .about-intro:hover .text-hover,
  .about-contact:hover .text-hover {
      color: var(--Green); /* Couleur en surbrillance */
      font-weight: bold; /* Met le texte en gras */
  }



  /* INTRODUCTION */
  .about-intro {
      margin-bottom: 40px;
      line-height: 1.8;
      color: var(--White);
  }

  /* COMPÉTENCES LOGICIELS */
  .about-skills {
      margin-bottom: 40px;
  }

  .skills-title {
      font-size: 1.8rem;
      color: var(--Green);
      margin-bottom: 20px;
      text-align: center;
  }

  .skills-list {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: center;
      list-style: none;
      padding: 0;
  }

  .skill-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 10px;
      width: 120px;
  }

  .skill-icon {
      width: 60px;
      height: 60px;
      object-fit: contain;
  }

  /* SECTION CONTACT */
  .about-contact {
      text-align: center;
      margin-top: 30px;
  }

  .about-contact a {
      text-decoration: none;
      color: var(--White); /* Couleur de base */
      font-weight: normal; /* Normal quand pas survolé */
      transition: color 0.3s ease; /* Animation fluide */
  }

  .about-contact a:hover {
      color: var(--Green); /* Change la couleur au survol */
      font-weight: bold;
  }





/*7 ---Fin Page About--- */


/*8 ---Background Circles--- */


  /* Conteneur principal */
  .content {
      position: relative;
      z-index: 1; /* Devant les cercles */
      color: var(--White);
  } 

  .background-circles {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      z-index: -1; /* Derrière le contenu */
      background: var(--Black); /* Arrière-plan principal */
  }

  /* Style des cercles */
  .circle {
      position: absolute;
      width: 500px; /* Taille des cercles */
      height: 500px;
      background: var(--Green); /* Couleur des cercles */
      opacity: 0.2; /* Les rendre diffus */
      border-radius: 50%;
      filter: blur(120px); /* Effet flou */
      animation: move-circle 15s infinite ease-in-out; /* Animation des cercles */
  }

  /* Créer des positions aléatoires pour chaque cercle */
  .circle:nth-child(1) {
      top: 20%;
      left: 15%;
      animation-delay: 0s;
  }
  .circle:nth-child(2) {
      top: 50%;
      left: 70%;
      animation-delay: 3s;
  }
  .circle:nth-child(3) {
      top: 80%;
      left: 40%;
      animation-delay: 6s;
  }
  .circle:nth-child(4) {
      top: 30%;
      left: 80%;
      animation-delay: 9s;
  }
  .circle:nth-child(5) {
      top: 60%;
      left: 20%;
      animation-delay: 12s;
  }

  /* Animation pour les cercles */
  @keyframes move-circle {
      0% {
          transform: translate(0, 0) scale(1);
      }
      50% {
          transform: translate(50px, -30px) scale(1.2); /* Bouge et change légèrement de taille */
      }
      100% {
          transform: translate(-30px, 40px) scale(1);
      }
  }

/*8 ---Fin Background Circles--- */