/*
0 - 600px:      Phone
600 - 900px:    Tablet portrait
900 - 1200px:   Tablet landscape
[1200 - 1800] is where our normal styles apply
1800px + :      Big desktop
$breakpoint arguement choices:
- phone
- tab-port
- tab-land
- big-desktop
/* --- CONFIGURATION DES COULEURS --- */
:root {
  /* Mode Clair (tes couleurs actuelles) */
  --bg-main: #ffffff;
  --bg-secondary: #f0f0f0;
  --bg-third: #eeecec;
  --text-main: #333333;
  --text-sub: #555555;
  --heading-main: #111111;
  --white: #ffffff;
  --primary-color: #d51066; 
}

/* Mode Sombre (les couleurs qui vont s'appliquer) */
[data-theme="dark"] {
  --bg-main: #111111;       /* Fond profond */
  --bg-secondary: #1a1a1a;  /* Sections alternées */
  --text-main: #eeeeee;     /* Texte presque blanc */
  --text-sub: #bbbbbb;      /* Texte secondaire gris clair */
  --heading-main: #ffffff;  /* Titres blancs */
  --white: #1a1a1a;         /* Pour les éléments qui étaient blancs */
}

.theme-toggle {
    -webkit-tap-highlight-color: transparent; /* Supprime le flash bleu au clic sur iPhone */
    color: var(--text-main) !important;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0; 
    margin-right: 1.5rem; /* Petit espace avant le mot ACCUEIL */
    order: 1; /* Force le bouton à être en premier si besoin */
}


/* En mode sombre, l'icône doit devenir blanche ou claire */
[data-theme="dark"] .theme-toggle {
  color: #fff;
}

.theme-icon {
  width: 2.2rem; /* Ajuste selon la taille de tes liens de menu */
  height: 2.2rem;
  transition: transform 0.3s ease;
  stroke: currentColor !important; /* Force le trait à prendre la couleur du texte */
  fill: none;
}
#sun-icon, #moon-icon {
    stop-color: var(--text-main) !important;
}
/* Pour le menu mobile (petit écran) */
@media only screen and (max-width: 37.5em) {
  .header__links .theme-toggle {
    margin-top: 1rem; /* Espace en mode mobile si nécessaire */
  }
}
/* =======================================================
   CORRECTIF FINAL ULTIME - À METTRE TOUT EN BAS
   ======================================================= */
.header__main {
    display: flex;
    align-items: center; /* Aligne verticalement le bouton et les liens */
    gap: 1rem; /* Espace entre le bouton et le début de la liste */
}
.header__links {
    display: flex; /* Garde tes liens en ligne */
    align-items: center;
    order: 2;
}

/* --- RESPONSIVE MOBILE --- */
@media only screen and (max-width: 37.5em) {
    .header__links {
        display: none; /* Cache la liste sur mobile */
    }
    
    .theme-toggle {
        display: flex !important; /* Force l'affichage du bouton même sur mobile */
        margin-right: 2rem; /* Espace par rapport au menu hamburger */
    }

    .header__main {
        justify-content: flex-end; /* Aligne bouton + hamburger à droite */
        width: auto;
    }
}

@media only screen and (max-width: 68.75em) { 
    /* 1. On cible avec body et les deux classes pour être le plus lourd possible */
    body .header__content .header__links {
        display: none !important; /* CACHE LES LIENS DESKTOP */
    }

    /* 2. On affiche le bouton mobile */
    body .header__content .header__main-ham-menu-cont {
        display: block !important;
    }

    /* 3. On force l'alignement pour éviter l'empilement vertical */
    body .header__content {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }

    /* 4. On s'assure que le logo ne prend pas trop de place */
    body .header__logo {
        font-size: 1.6rem !important;
        white-space: nowrap !important;
    }
}
/* --- CONFIGURATION NAVIGATION MOBILE (Placé au début) --- */
@media only screen and (max-width: 65em) { 
    /* 1. On cache les liens desktop */
    .header__links {
        display: none !important;

    }

    /* 2. On affiche le hamburger */
    .header__main-ham-menu-cont {
        display: block !important;
    }

    /* 3. Force le Header sur une ligne */
    .header__content {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        padding: 0 2rem !important;
        height: 8rem !important; /* Hauteur identique à la version PC */
    }

    /* 4. RETOUR À LA POLICE D'ORIGINE */
    .header__logo {
        font-size: 1.8rem !important; /* Ajusté pour tenir sur mobile */
        font-family: "Source Sans Pro", sans-serif !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
        letter-spacing: 2px !important;
        white-space: nowrap !important;
        color: var(--text-main) !important;
    }
    .header__logo-name {
        color: #D51066 !important;
    }

    /* 5. STYLE DU MENU DÉROULANT (Comme ta 3ème capture) */
    .header__sm-menu {
        display: none !important; 
        position: absolute !important;
        top: 8rem !important; /* Juste en dessous du header */
        left: 0 !important;
        width: 100% !important;
        background:var(--bg-main) !important;
        z-index: 100 !important;
        box-shadow: 0 10px 10px rgba(0,0,0,0.1) !important;
    }

    /* Affiche le menu quand actif */
    .header__sm-menu--active {
        display: block !important;
    }

    /* Style des liens dans le menu déroulant */
    .header__sm-menu-link a {
        display: block !important;
        padding: 2.5rem 3rem !important;
        text-align: right !important;
        font-size: 1.6rem !important;
        color: var(--text-main) !important;
        text-transform: uppercase !important;
        font-weight: 700 !important;
        border-top: 1px solid #eee !important;
        text-decoration: none !important;
    }
    .header__main {
    display: flex !important;
    flex-direction: row !important; /* Force la ligne */
    align-items: center !important;
    gap: 2rem !important; /* Espace entre le menu et la lune */
}

/* Le menu hamburger doit être en premier (à gauche de la lune) */
.header__main-ham-menu-cont {
    order: 1 !important;
}
[data-theme="dark"] .header__main-ham-menu,
[data-theme="dark"] #ham-open,
[data-theme="dark"] #ham-close {
    /* Force le blanc pur et augmente l'éclat */
    filter: invert(1) brightness(100%) !important;
}
/* Le bouton de thème doit être en deuxième (à droite du hamburger) */
.theme-toggle {
    order: 1!important;
    display: flex !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
}

/* Ajustement de la taille de l'icône pour qu'elle ne soit pas plus grosse que le menu */
.theme-icon {
    width: 2.8rem !important;
    height: 2.8rem !important;
}
}

/* --- 2. ÉTAT DESKTOP (PC) --- */
@media only screen and (min-width: 65.01em) {
    .header__links {
        display: flex !important;
    }
    .header__main-ham-menu-cont {
        display: none !important;
    }
    .header__sm-menu {
        display: none !important;
    }
}

/* 5. Sécurité pour le menu mobile s'il reste invisible */
.header__sm-menu--active {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: 100vh !important;
}
/* =======================================================
   VERSION FINALE PARCOURS : TRAIT + PUCES IDENTIQUES PC
   ======================================================= */
@media only screen and (max-width: 56.25em) {

    /* 1. On force le conteneur de la ligne */
    body #parcours .timeline {
        position: relative !important;
        display: block !important;
        padding-left: 40px !important; /* Espace pour le trait */
        margin-left: 10px !important;
    }

    /* 2. LE TRAIT ROSE (Timeline line) */
    body #parcours .timeline::after {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 20px !important; /* Aligné avec les puces */
        width: 4px !important;
        background-color: var(--primary-color) !important;
        z-index: 1 !important;
        display: block !important;
        transform: none !important;
    }

    /* 3. LES BLOCS DE TEXTE (.element) */
    body #parcours .element {
        width: 100% !important;
        margin: 0 0 30px 0 !important; /* Plus besoin de grosse marge gauche */
        padding: 20px !important;
        position: relative !important;
        background: var(--bg-main) !important;
        border-radius: 10px !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
        display: block !important;
        left: 20px !important; /* Décale le bloc par rapport au trait */
        width: calc(100% - 40px) !important;
    }

    /* 4. LES PUCES (Exactement comme sur PC) */
    body #parcours .element i.timeline-icon {
        position: absolute !important;
        /* Calcul pour centrer la puce de 32px sur le trait à 20px */
        /* Le trait est à -20px du bord du bloc .element */
        left: -34px !important; 
        top: 25px !important;
        
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        
        background-color: var(--bg-main) !important;
        border: 4px solid var(--primary-color) !important;
        border-radius: 50% !important;
        color: var(--primary-color) !important;
        
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 10 !important;
        font-size: 0.9rem !important;
        transform: none !important;
    }

/* On neutralise tout contenu textuel ou icône FontAwesome */
body #parcours .element i.timeline-icon {
    content: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
}

/* On force la disparition des pseudo-éléments */
body #parcours .element i.timeline-icon::before,
body #parcours .element i.timeline-icon::after {
    display: none !important;
    content: "" !important;
    visibility: hidden !important;
}
}




*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
  font-family: inherit; }
/* :root {
    --clr-theme: #D51066; 
    
} */
html {
font-size: 62.5%;
  /* Supprime overflow-y: scroll et utilise auto */
  overflow-y: auto; 
  /* Empêche les sauts de mise en page quand la barre apparaît */
  scrollbar-gutter: stable; 
  scroll-behavior: smooth; 
  background-color: var(--bg-main); }
  @media only screen and (max-width: 75em) {
    html {
      font-size: 59%; } }
  @media only screen and (max-width: 56.25em) {
    html {
      font-size: 56%; } }
  @media only screen and (min-width: 112.5em) {
    html {
      font-size: 65%; } }

body {
  box-sizing: border-box;
  position: relative;
  line-height: 1.5;
  font-family: sans-serif;
  
  overflow-x: hidden;
 
  font-family: 'Source Sans Pro', sans-serif; }
body, html {
    transform: none !important;
    filter: none !important;
    perspective: none !important;
}
section {
    transition: all 0.8s ease-out; 
}
.section-hidden {
  opacity: 0;
  transform: translateY(50px);
  /* transition: all 0.8s ease-out; */
}
/* État initial : Masqué et légèrement décalé vers le bas */
.section-hidden-visual {
    opacity: 0;
    /* Décalage vertical léger (30px) */
    transform: translateY(30px); 
    /* Transition douce pour l'apparition */
    transition: opacity 1s ease-out, transform 1s ease-out; 
}

/* État final : Visible et à sa position normale */
.section-visible-visual {
    opacity: 1;
    transform: translateY(0);
}
.section-visible {
  opacity: 1;
  transform: translateY(0);
}

a {
  text-decoration: none;
  color: inherit; }

li {
  list-style: none; }

input:focus,
button:focus,
a:focus,
textarea:focus {
  outline: none; }

button {
  border: none;
  cursor: pointer; }

textarea {
  resize: none; }

/* Nouveau style pour le nom avec dégradé */
.heading-primary {
    font-size: 8rem;
    /* text-transform: uppercase; */
    letter-spacing: 3px;
    text-align: center;
    font-weight: 800; /* Assurez-vous que la police est assez épaisse pour voir le dégradé */
    
    /* PROPRIÉTÉS CLÉS POUR LE DÉGRADÉ SUR TEXTE */
    
    /*  Définir le dégradé comme arrière-plan */
    background-image: linear-gradient(90deg, #A80048, #D51066, #ff87b7);
    
    /*  Cacher l'arrière-plan */
    -webkit-background-clip: text;
    background-clip: text;
    
    /*  Rendre le texte transparent pour que le dégradé soit visible */
    color: transparent; 
}

@media only screen and (max-width: 37.5em) {
    .heading-primary {
        font-size: 4.5rem; 
    }
}

.heading-sec__mb-bg {
  margin-bottom: 11rem; }
  @media only screen and (max-width: 56.25em) {
    .heading-sec__mb-bg {
      margin-bottom: 8rem; } }

.heading-sec__mb-med {
  margin-bottom: 9rem; }
  @media only screen and (max-width: 56.25em) {
    .heading-sec__mb-med {
      margin-bottom: 8rem; } }

.heading-sec__main {
  display: block;
  font-size: 4rem;
  color:var(--text-main);
  text-transform: uppercase;
  letter-spacing: 1px;
  letter-spacing: 3px;
  text-align: center;
  margin-bottom: 3.5rem;
  position: relative; }
  .heading-sec__main--lt {
    color: var(--text-main); }
    .heading-sec__main--lt::after {
      content: '';
      background: var(--primary-color) !important; }
  .heading-sec__main::after {
    content: '';
    position: absolute;
    top: calc(100% + 1.5rem);
    height: 5px;
    width: 3rem;
    background: var(--primary-color);
    left: 50%;
    transform: translateX(-50%);
    border-radius: 5px; }
    @media only screen and (max-width: 37.5em) {
      .heading-sec__main::after {
        top: calc(100% + 1.2rem); } }

.heading-sec__sub {
  display: block;
  text-align: center;
  color: var(--text-sub);
  font-size: 2.5rem;
  font-weight: 500;
  max-width: 80rem;
  margin: auto;
  line-height: 1.6; }
  @media only screen and (max-width: 37.5em) {
    .heading-sec__sub {
      font-size: 1.8rem; } }
  .heading-sec__sub--lt {
    color: var(--text-main); }
.heading-sec__sub-veille{

  color: var(--text-main);
  font-size: 2rem;
  font-weight: 500;
  max-width: 80rem;
  line-height: 1.6; }
  @media only screen and (max-width: 37.5em) {
    .heading-sec__sub {
      font-size: 1.8rem; } }
  .heading-sec__sub--lt {
    color: var(--text-main); }

.heading-sm {
  font-size: 2.2rem;
  text-transform: uppercase;
  letter-spacing: 1px; }

.main-container {
  max-width: 120rem;
  margin: auto;
  width: 100%;
  background:var(--bg-secondary);
   }
section.project-details .main-container,
section.project-details .main-container__project {
    background: transparent !important; /* Force la transparence */
    background-color: transparent !important;
    box-shadow: none !important;
}
/* On cible spécifiquement la liste des skills dans les détails du projet */
.project-details .skills {
    justify-content: flex-start !important; /* Force l'alignement au début (gauche) */
    gap: 2rem; /* Espace entre les icônes */
    margin-left: 0;
    padding-left: 0;
}

/* On s'assure que le titre au-dessus est aussi bien calé à gauche */
.project-details__tools-used {
    text-align: left;
    width: 100%;
}
.project-details {
    width: 100%;
    background-color: var(--bg-main); /* Noir par défaut */
    padding: 8rem 0;
}

/* La section qui doit être grise sur toute la largeur */
.project-details--alt {
    background-color: var(--bg-secondary) !important;
}


#contact .main-container {
    background: var(--bg-main);
}
#parcours .main-container {
    max-width: 2100px; 
}
#projects .main-container {
    background:var(--bg-main);
}



.main-container.entreprise {
   display: flex;
    flex-direction: column;
    gap: 30px;
    width: 90%;          /* Utilise 90% de l'espace disponible */
    max-width: 1100px;   /* Mais ne dépasse jamais 1100px */
    margin: 40px auto;
    background: var(--bg-main);
    
}
/* Ciblage spécifique du main-container dans la section Veille */
/* #veille .main-container.section-hidden {
    opacity: 0;
    transform: translateY(8vh);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

#veille .main-container.section-visible {
    opacity: 1;
    transform: translateY(0);
} */
.btn {
  background: var(--bg-secondary);
  color: var(--text-main);
  text-transform: uppercase;
  letter-spacing: 2px;
  /* display: inline-block; */
  font-weight: 700;
  border-radius: 50px;
  box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15);
  margin-top:0;
  transition: transform 0.3s ease-out, box-shadow 0.3s;
  position: relative;
  will-change: transform; 
  transform: translateZ(0);
 }
  .btn:hover {
    /* transform: translateZ(50px) scale(1.02); 
    
    
    transform-style: preserve-3d; */
    transform: translateY(-5px) scale(1.02);
    
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    z-index: 9999 !important; 
    
    /* Garder la transition si elle n'est pas déjà sur .btn */
    /* transition: transform 0.3s ease-out, box-shadow 0.3s; */
  }
  .home-hero .btn:hover {
    /* Utiliser transform: none; pour annuler l'effet et le réappliquer après */
    /* Cela peut forcer le navigateur à recréer le contexte d'empilement */
    transform: translateY(-7px) scale(1.02) !important; 
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); 
    /* Rajoutez un z-index élevé */
    z-index: 9999 !important; 
}
  .btn--bg {
    padding: 1.5rem 8rem;
    font-size: 2rem; }
  .btn--med {
    padding: 1.5rem 5rem;
    font-size: 1.6rem; }
  .btn--theme {
    background: var(--primary-color);
    color: #fff; }
  .btn--theme-inv {
    color: var(--primary-color);
    background: var(--bg-secondary);
    border: 2px solid var(--primary-color);
    box-shadow: none;
    padding: 1.5rem 5rem; } 
  .btn--theme-inv:hover {
    background: var(--primary-color); /* Couleur de fond rose (#D51066) */
    color: var(--white);        /* Couleur du texte blanc */
    border: 2px solid var(--primary-color); /* La bordure devient invisible contre le fond */
    /* Garder l'effet de soulèvement général (transform) qui est sur .btn:hover */
}

.sec-pad {
  padding: 12rem 0; 
  background:var(--bg-main);
   }
  @media only screen and (max-width: 56.25em) {
    .sec-pad {
      padding: 8rem 0; } }

.text-primary {
  color: #0e0000;
  font-size: 5rem;
  text-align: center;
  width: 100%;
  line-height: 1.6; }
  @media only screen and (max-width: 37.5em) {
    .text-primary {
      font-size: 2rem; } }
.text-primary-profile{
  color: var(--text-main);
  font-size: 2.2rem;
  text-align: center;
  width: 100%;
  line-height: 1.6; }
  @media only screen and (max-width: 37.5em) {
    .text-primary {
      font-size: 2rem; } }

.d-none {
  display: none !important; }

.home-hero {
  /* Augmentation légère du contraste du dégradé */
  /* background: linear-gradient(135deg, #eeeeee, #ffffff);  */
  /* background:  #e3e3e3; */
  background: var(--bg-main);
  background-size: 200%; 
  
  /* Ajout des deux versions de l'animation pour la compatibilité */
  -webkit-animation: subtleShift 20s ease infinite alternate; 
  animation: subtleShift 20s ease infinite alternate;
  

  /* ANCIENNES PROPRIÉTÉS CONSERVÉES */
  color: #080000;
  /* background-position: center; -> Retiré car l'animation le gère */
  height: 100vh;
  min-height: 80rem;
  /* max-height: 120rem; */
  position: relative;
  padding-top: 8rem; 
  display: flex;
  align-items: center; /* Centre verticalement */
  justify-content: center;
}
  @media only screen and (max-width: 37.5em) {
    .home-hero {
      height: unset;
      min-height: unset; } }
  .home-hero__socials {
    position: absolute;
    top: 50%;
    border: 2px solid #eee;
    border-left: 2px solid #eee;
    transform: translateY(-50%); }
    @media only screen and (max-width: 56.25em) {
      .home-hero__socials {
        display: none; } }
  .home-hero__mouse-scroll-cont {
    position: absolute;
    bottom: 3%;
    left: 53%;
    transform: translateX(-50%); }
  
    @media only screen and (max-width: 37.5em) {
      .home-hero__mouse-scroll-cont {
        display: none; } }
  .home-hero__social {
    width: 5rem; }
  .home-hero__social-icon-link {
    width: 100%;
    display: block;
    padding: 1.2rem;
    /* border-bottom: 2px solid #eee; */
    transition: background .3s; }
    .home-hero__social-icon-link:hover {
      background: rgba(255, 255, 255, 0.1); }
    .home-hero__social-icon-link--bd-none {
      border-bottom: 0; }
  .home-hero__social-icon {
    width: 100%; }
  .home-hero__content {
    position: relative; 
    z-index: 10;
    /* top: 50%; */
    /* left: 50%; */
    /* transform: translate(-50%, -50%); */
    max-width: 90rem;
    width: 92%;
    margin: auto;
    perspective: 1000px;
    padding: 3rem 0;}
    @media only screen and (max-width: 37.5em) {
      .home-hero__content {
        padding: 19rem 0 13rem 0;
        margin: auto;
        position: static;
        transform: translate(0, 0); } }
  .home-hero__info {
    margin: 3rem auto 0 auto;
    max-width: 80rem; }
  .home-hero__cta { 
     margin-top: 5rem;
     text-align: center;
     position: relative;
     z-index:20;
 /* NOUVEAU : Ajout de Flexbox pour espacer les deux boutons */
   display: flex; /* <-- APPLIQUÉ sur le conteneur (le parent) */
   justify-content: center;
   gap: 2rem; /* Espace entre les boutons */
    /* Assurez-vous que les boutons ne s'étirent pas à l'intérieur */
    align-items: center;
}



@media only screen and (max-width: 37.5em) {
    .home-hero__cta {
        flex-direction: column; /* Empile les boutons sur mobile */
        gap: 1.5rem;
    }
}
    .home-hero__greeting {
    font-size: 3rem; /* Une taille visible mais plus petite que le titre */
    color: var(--text-main); /* Couleur très foncée */
    text-align: center;
    margin-bottom: 1rem; /* Espace au-dessus du titre principal */
    font-weight: 400; /* Plus léger que le titre */
}

@media only screen and (max-width: 37.5em) {
    .home-hero__greeting {
        font-size: 2rem;
    }
}
.home-hero__intro-text {
    /* Surcharge le 5rem du .text-primary pour le rendre lisible */
    font-size: 2.8rem; 
    
    /* On ajuste la couleur pour qu'elle contraste bien avec l'arrière-plan */
    color: var(--text-main); 
    
    /* Épaisseur de la police plus légère pour un corps de texte */
    font-weight: 500; 
    
    max-width: 65rem; /* Réduit la largeur pour une lecture confortable */
    margin: 3rem auto; /* Centre et ajoute de l'espace */
}

@media only screen and (max-width: 56.25em) { /* Tablette */
    .home-hero__intro-text {
        font-size: 2.4rem;
        max-width: 80%;
    }
}

@media only screen and (max-width: 37.5em) { /* Téléphone */
    .home-hero__intro-text {
        font-size: 1.8rem;
    }
}
[data-theme="dark"] #entreprise,
[data-theme="dark"] .section-banner,
[data-theme="dark"] .entreprise-description {
    background-color: var(--bg-main);
    color: var(--text-main);
}

/* Les textes dans les bandeaux d'entreprise */
[data-theme="dark"] .entreprise__content-details-para {
    color: var(--text-sub);
}

.entreprise-description {
    /* --- 1. CONFIGURATION MOBILE (Par défaut) --- */
    width: 90%;
    margin: 50px auto 30px auto; 
    text-align: center; /* Centré sur mobile pour l'équilibre */
    padding: 0 15px;
    color: var(--text-sub);
    font-size: 1.8rem;
    line-height: 1.6;
}



  /*Conteneur flex pour disposer les blocs côte à côte*/
  #entreprise .main-container  {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}

.entreprise__item-bandeau {
    display: flex;
    align-items: center; /* Centrage vertical du logo et du contenu */
    gap: 30px; /* Espace entre le logo et le bandeau */
    padding: 10px 0; 
    
    
}

/* --- 2.3. Style du Conteneur du Logo (Gauche) --- */
.entreprise__logo-container {
    flex-shrink: 0; /* Empêche le logo de se réduire */
    width: 150px; /* Taille pour l'alignement */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease-out, box-shadow 0.3s;
   
}
.entreprise__logo-container:hover {
    transform: translateY(-5px); /* Se soulève */
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1); /* Ajout d'une ombre */
    cursor: pointer;
}

/* --- Effet Hover pour le Bandeau de Contenu --- */
.entreprise__content:hover {
    transform: translateY(-5px); /* Se soulève */
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15); /* Ajout d'une ombre plus marquée */
}
.entreprise__logo-container .section-banner__img-content {
    max-width: 100%;
    max-height: 100px; /* Agrandissement des logos */
    height: auto;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.1)); /* Légère ombre pour le logo */
}
.section-hidden .entreprise__item-bandeau:nth-child(1) {
    opacity: 0;
    transform: translateX(-100px);
}

/* Masquer et décaler le deuxième bandeau (EUROCAP) */
.section-hidden .entreprise__item-bandeau:nth-child(2) {
    opacity: 0;
    transform: translateX(100px);
}


/* --- 3.2. État Final (Visible) --- */
.section-visible .entreprise__item-bandeau {
    opacity: 1;
    transform: translateX(0);
    /* Transition de base pour tous les bandeaux */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Ajout d'un décalage temporel pour le deuxième bandeau (effet de staggering) */
.section-visible .entreprise__item-bandeau:nth-child(2) {
    transition-delay: 0.2s; /* Commence 0.2s après le premier */
}
/* --- 2.4. Style du Bandeau de Contenu (Droite) --- */
.entreprise__content {
    flex-grow: 1; /* Le bandeau prend tout l'espace restant */
    /* Style neutre */
    background-color: var(--bg-secondary); /* Fond blanc */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Ombre subtile */
    color: var(--text-main); 
    padding: 20px;
    border-radius: 8px;
    /* Effet Hover et Transition */
     transition: transform 0.3s ease-out, box-shadow 0.3s;
     font-size: 1.1rem;
}
.entreprise__content-details-para {
    /* Taille actuelle (probablement 1rem ou moins) */
    font-size: 1.5rem; 
    line-height: 1.6; /* Assurer un bon espacement pour la lecture */
    color: var(--text-main); /* Rendre le texte bien visible */
    margin-bottom: 10px; /* Ajout d'un espacement entre les paragraphes si nécessaire */
}

/* --- Style Spécifique pour le Bloc EDI Centré --- */
.entreprise__edi-bandeau {
    /* Assure que l'élément prend 100% de la largeur du .main-container */
    width: 100%;
    margin: 40px 0; /* Ajoute de l'espace au-dessus et en dessous */
}

.entreprise__edi-content {
    /* Hérite du style du .entreprise__content (ombre, padding) */
    /* On s'assure qu'il n'y a pas de flexbox ici si ce n'est pas nécessaire */
    max-width: 100%; /* S'assure que le contenu remplisse son parent .main-container */
}

/* Ajustement de la taille de la police pour ce bloc */
.edi-details {
    font-size: 1.5rem; /* Plus lisible qu'un 1.5rem géant pour un texte dense */
    line-height: 1.7;
    margin-top: 15px;
}
/* Masquer et décaler le premier bandeau (APICOMTAT) */
/* Cible: 1er enfant (.entreprise__item-bandeau) */
.section-hidden .entreprise__item-bandeau:nth-child(1) {
    opacity: 0;
    transform: translateX(-100px);
}

/* Masquer le bloc EDI (MAINTENANT 2e ENFANT) */
/* Cible: 2e enfant (.entreprise__edi-bandeau) */
.section-hidden .entreprise__edi-bandeau {
    opacity: 0;
    /* On change le sélecteur, mais l'effet de glissement vers le haut reste approprié */
    transform: translateY(-20px); 
}

/* Masquer et décaler le troisième bandeau (EUROCAP) */
/* Cible: 3e enfant (.entreprise__item-bandeau) */
.section-hidden .entreprise__item-bandeau:nth-child(3) { /* <--- CORRECTION ICI : était :nth-child(2) */
    opacity: 0;
    transform: translateX(100px);
}


/* --- État Final (Visible) --- */

/* Apparition du bloc EDI (2e enfant) */
/* Cible: 2e enfant (.entreprise__edi-bandeau) */
.section-visible .entreprise__edi-bandeau {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    transition-delay: 0.1s; /* Apparaît après le 1er bandeau */
}

/* Apparition du bandeau EUROCAP (3e enfant) */
/* Cible: 3e enfant (.entreprise__item-bandeau) */
.section-visible .entreprise__item-bandeau:nth-child(3) { /* <--- CORRECTION ICI : était :nth-child(2) */
    transition-delay: 0.3s; /* Nouveau délai pour apparaître après EDI (0.1s) */
}
/* Optionnel : Titre pour le bloc EDI */
.heading-sec__sub-title {
    font-size: 1.5rem;
    color: var(--text-main); /* Utilisez la couleur de votre choix */
    margin-bottom: 10px;
    font-weight: 700;
}
/* Logos internes */
.section-banner__img-content {
  max-height: 80px; /* Logos un peu plus grands */
  margin-bottom: 2rem;
  margin-top: 1rem;
 } 

 /* Responsive */
@media (max-width: 900px) {
  .main-container.entreprise {
    flex-direction: column;
  }

  .entreprise__content {
    flex: 1 1 100%;
  }
}
/* --- 1. MOBILE (Priorité) --- */
.entreprise__item-bandeau {
    display: flex;
    flex-direction: column; /* Empilement vertical obligatoire sur téléphone */
    align-items: center;
    gap: 15px;
    padding: 10px;
    width: 100%; /* S'assure de ne pas dépasser */
}

.entreprise__logo-container {
    width: auto;      /* Laisse le container s'adapter */
    max-width: 120px; /* Réduit un peu le logo sur mobile */
    flex-shrink: 1;   /* Autorise le logo à rétrécir si besoin */
}

/* --- 2. TABLETTE / PETIT ÉCRAN --- */
@media only screen and (min-width: 48em) { /* Env 768px */
    .entreprise__item-bandeau {
        flex-direction: row; /* Remet côte à côte */
        align-items: flex-start;
        text-align: left;
    }
}

/* --- 3. GRAND ÉCRAN (PC) --- */
@media only screen and (min-width: 62.5em) {
    .entreprise-description {
      margin: 80px auto 40px auto; 
        
      text-align: center; /* Ou 'left' si tu préfères l'aligner sous le logo */
      max-width: 800px;   /* On limite la largeur pour la lisibilité */
      font-size: 2rem;
      line-height: 1.8;
    }
    /* Aligner les bandeaux (Apicomtat / Eurocap) */
    .entreprise__item-bandeau {
        max-width: 1000px;  /* Largeur max du bloc pour éviter qu'il s'étale trop */
        margin: 0 auto;     /* Centre le bloc entier dans la page */
        justify-content: center;
    }
}


 .about {
  background: var(--bg-secondary); }
  .about__content {
    display: grid;
    grid-template-columns: 1fr; 
    grid-column-gap: 10rem;
    }
    @media only screen and (max-width: 56.25em) {
      .about__content {
        grid-template-columns: 1fr;
        grid-gap: 8rem; } }
    .about__content-title {
      font-weight: 700;
      font-size: 2.8rem;
      margin-bottom: 3rem; }
      @media only screen and (max-width: 37.5em) {
        .about__content-title {
          font-size: 2.4rem; } }
    .about__content-details {
    /* Taille de police standard pour le corps de texte. Ajustez selon votre design. */
    font-size: 1.8rem; 
    line-height: 1.6; /* Améliore la lisibilité des longs textes */ 
    color: var(--text-sub);
    /*color: var(--clr-dark-2);  Utilisez la couleur de texte principale de votre thème */
    margin-bottom: 2rem;
}
    .about__content-details-para {
      font-size: 1.8rem;
      color: var(--text-sub);
      max-width: 60rem;
      line-height: 1.7;
      margin-bottom: 1rem; }
      .about__content-details-para--hl {
        font-weight: 700;
        margin: 0 3px; }
      .about__content-details-para:last-child {
        margin-bottom: 4rem; } */


      .about {
        background: var(--bg-secondary);
}

.about__content {
  margin-bottom: 3rem;
  padding: 2rem;
  background: var(--bg-secondary);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
/* Note l'espace entre l'ID et la classe + les deux tirets __ */
#veille .about__content {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.about__content-title {
  font-weight: 700;
  font-size: 2.8rem;
  margin-bottom: 2rem;
  color:var(--text-main);
} 
/* 
@media only screen and (max-width: 37.5em) {
  .about__content-title {
    font-size: 2.4rem;
  }
}

.about__content-details-para {
  font-size: 2rem;
  color: grey;
  /* max-width: 60rem; */
  /* line-height: 1.7; */
  /* margin-bottom: 1rem;
} */ 

/* .about__content-details-para:last-child {
  margin-bottom: 4rem;
}
.about__content-logo{
  max-height: 30px; 
  width: auto;
  object-fit: contain

} */
.section-banner__img-content{
  max-height: 200px; 
  width: auto;
  object-fit: contain;
}
.section-banner {
    background: none; 
    
    /* Assurer que le logo est centré */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px; /* Espace après le logo */
}

.section-banner__img {
    max-width: 100%; /* Taille ajustée pour le logo principal */
    height: auto;
    
    /* Effet visuel : Ombre portée subtile pour le détacher */
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.1));
    
    /* Préparation pour l'animation */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.section-hidden .section-banner__img {
    opacity: 0;
    transform: translateY(20px); /* Glisse légèrement du bas vers le haut */
}

/* État final (visible) */
.section-visible .section-banner__img {
    opacity: 1;
    transform: translateY(0);
}
.projects {
  background-color: var(--bg-main);
  transition: background-color 0.3s ease;
}

[data-theme="dark"] .projects {
  background-color: var(--bg-main); 
}
.projects__grid-container {
    display: grid;
    /* 3 colonnes sur desktop, passage automatique à 1 colonne sur mobile */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 30px; 
    padding: 40px 0;
}
/* --- Style pour la nouvelle section Ressources --- */
.project-details__resources {
    margin-top: 5rem;
    margin-bottom: 5rem;
    padding-top: 2rem;
    padding-bottom: 5rem;
    border-top: 1px solid var(--bg-main);
    border-bottom: 1px solid var(--bg-main);  
    background-color: var(--bg-secondary);
}

.project-details__resources-cta {
    display: flex; /* Aligner les boutons côte à côte */
    gap: 20px; /* Espace entre les boutons */
    margin-top: 20px;
    flex-wrap: wrap; /* Pour le responsive */
}

/* Assurer que les boutons sont bien visibles */
.project-details__resources-cta .btn {
    padding: 12px 25px;
    text-transform: uppercase;
    font-size: 1.4rem;
    font-weight: 700;
}
/* -------------------------------------------------------
   CARTE DE PROJET INDIVIDUELLE
   ------------------------------------------------------- */
.project__card {
    background: var(--bg-secondary);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    text-align: center;
    border: 3px solid transparent; 
    /* Animation de transition pour le soulèvement et l'ombre */
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, border-color 0.3s ease-out;
}
.section-visible .project__card:hover {
    transition: transform 0.3s ease-out 0s, 
                box-shadow 0.3s ease-out 0s,
                border-color 0.3s ease-out 0s;
                
    transform: translateY(-8px); 
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
    border-color:var(--primary-color);
    
    /* L'ombre n'a pas besoin de l'annulation de transition-delay, mais elle est là pour l'effet */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); 
}
.project__card:hover {
  transition: transform 0.3s ease-out 0s, 
                box-shadow 0.3s ease-out 0s;
    transform: translateY(-8px); /* Soulèvement au survol */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); /* Ombre plus marquée */
}

/* Conteneur et Image (pour centrer le logo ou l'image) */
.project__card-media {
    width: 100%;
    height: 120px; /* Espace pour le logo */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.project__card-img {
    max-width: 100px; /* Taille maximale pour le logo */
    max-height: 100%;
    object-fit: contain;
}

/* Titre et Description */
.project__card-title {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text-main);
}

.project__card-desc {
    font-size: 1.5rem;
    color: var(--text-sub);
    margin-bottom: 25px;
    min-height: 50px; /* Pour éviter le saut de mise en page si les descriptions sont de longueurs légèrement différentes */
}

/* -------------------------------------------------------
   SCROLL REVEAL (Apparition des Cartes)
   ------------------------------------------------------- */

/* 1. États initiaux (Masqués) */
.section-hidden .project__card {
    opacity: 0;
    transform: translateY(30px); 
}

/* 2. États visibles et Décalage */
.section-visible .project__card {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; 
}

/* Décalage en vague (staggering) */
.section-visible .project__card:nth-child(1) { transition-delay: 0.1s; } 
.section-visible .project__card:nth-child(2) { transition-delay: 0.2s; }

/* -------------------------------------------------------
   STYLE DU BOUTON DÉTAILS DANS LA CARTE
   ------------------------------------------------------- */

.project__card .btn {
    display: inline-block; /* Assure que les marges/padding fonctionnent */
    padding: 1.2rem 2.5rem; /* Taille moyenne du bouton */
    font-size: 1.4rem; 
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    
    
    color: var(--bg-main); 
    background-color: var(--primary-color); 
    border: none;
    border-radius: 30px;
    cursor: pointer;
    
    /* Transition pour l'effet de survol */
    transition: background-color 0.3s ease-out, transform 0.3s ease-out;
}

.project__card .btn:hover {
    /* Légère variation de couleur au survol pour le feedback */
    background-color: var(--primary-color); 
    transform: translateY(-2px); /* Petit soulèvement du bouton */
}

  .contact {
    /* Fond simple pour voir les bulles (similaire à home-hero) */
    background: var(--bg-main); 
    
    /* Assurez-vous que la section couvre au moins un écran si le contenu est court */
    min-height: 100vh;
    
    /* Le 'position: relative' est crucial pour positionner les bulles (enfants absolus) */
    position: relative; 
    
    /* S'assurer que le contenu du formulaire a un z-index plus haut */
    z-index: 1; 
  }

  /* Ajustement pour le conteneur du formulaire pour le placer au-dessus des bulles */
  .contact__form-container {
    background: var(--bg-main);
      position: relative;
      z-index: 2; /* Plus haut que les bulles (z-index: 0) */
  }
    @media only screen and (max-width: 37.5em) {
      .contact__form-container {
        padding: 3rem; } }
  .contact__form-field {
    margin-bottom: 4rem; }
    @media only screen and (max-width: 37.5em) {
      .contact__form-field {
        margin-bottom: 3rem; } }
  .contact__form-label {
    color: var(--text-main);
    font-size: 1.4rem;
    letter-spacing: 1px;
    font-weight: 700;
    margin-bottom: 1rem;
    display: block;
    text-align: left; }
  .contact__form-input {
    color: var(--text-main);
    padding: 2rem;
    width: 100%;
    border: 1px solid var(--bg-secondary);
    font-size: 1.6rem;
    letter-spacing: 0px;
    background: var(--bg-secondary);
    border-radius: 5px;
    font-weight: 600;
    /* Code for Modern Browsers */
    /* Code for WebKit, Blink, Edge */
    /* Code for Internet Explorer 10-11 */
    /* Code for Microsoft Edge */
    /* Code for Mozilla Firefox 4 to 18 */
    /* Code for Mozilla Firefox 19+ */ }
    .contact__form-input::placeholder {
      color: var(--text-sub);
      font-weight: 600;
      font-size: 1.6rem; }
    .contact__form-input::-webkit-input-placeholder {
      color: var(--text-sub);
      font-weight: 600;
      font-size: 1.6rem; }
    .contact__form-input:-ms-input-placeholder {
      color: var(--text-sub);
      font-weight: 600;
      font-size: 1.6rem; }
    .contact__form-input::-ms-input-placeholder {
      color: var(--text-sub);
      font-weight: 600;
      font-size: 1.6rem; }
    .contact__form-input:-moz-placeholder {
      opacity: 1;
      color: var(--text-sub);
      font-weight: 600;
      font-size: 1.6rem; }
    .contact__form-input::-moz-placeholder {
      opacity: 1;
      color: var(--text-sub);
      font-weight: 600;
      font-size: 1.6rem; }
  .contact__btn {
    width: 30%;
    padding: 2rem 4rem;
    font-size: 1.6rem; }
    @media only screen and (max-width: 37.5em) {
      .contact__btn {
        width: 100%; } }

/* ---------------------------------------------------- */
/* Styles pour l'Animation de la Section Contact */
/* ---------------------------------------------------- */

/* État initial pour tous les champs et le bouton */
.section-hidden-contact {
    opacity: 0;
    transform: translateX(-50px); 
    /* Augmentation de la durée de la transition */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; 
}

/* État final : Visible et à sa position normale */
.section-visible-contact {
    opacity: 1;
    transform: translateX(0);
}

/* Application des délais spécifiques (plus longs) */
.contact__form-field:nth-child(1).section-hidden-contact {
    transition-delay: 0s; 
}

.contact__form-field:nth-child(2).section-hidden-contact {
    transition-delay: 0.2s; /* Augmenté */
}

.contact__form-field:nth-child(3).section-hidden-contact {
    transition-delay: 0.4s; /* Augmenté */
}

.contact__btn.section-hidden-contact {
    transition-delay: 0.6s; /* Augmenté */
}

/* =======================================================
   RECALIBRAGE DU CONTACT POUR MOBILE
   ======================================================= */

@media only screen and (max-width: 600px) {
    
    /* 1. On réduit le padding interne qui étouffait le contenu */
    .contact__form-container {
        padding: 1.5rem !important; /* On divise par 2 le padding de 3rem */
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. On ajoute une marge de sécurité à la section globale */
    .contact {
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }

    /* 3. On s'assure que les champs ne débordent pas */
    .contact__form-input {
        padding: 1.5rem !important; /* Un peu moins haut pour gagner de la place */
        font-size: 1.4rem !important;
    }

    /* 4. On ajuste le texte d'introduction (souvent dans .main-container) */
    .main-container {
        padding: 0 10px !important;
    }
}

.project-cs-hero {
  color: var(--bg-main);
  background: var(--bg-main); 
 /* On peut aussi utiliser 'background-color: white;' si le body n'a pas le fond */

 /* On garde les autres propriétés qui gèrent la mise en page */
   background-size: cover;
  background-position: center;
  position: relative; }
  @media only screen and (max-width: 37.5em) {
    .project-cs-hero {
      height: unset;
      min-height: unset; } }
  .project-cs-hero__content {
    padding: 25rem 0 17rem 0;
    max-width: 90rem;
    width: 92%;
    overflow: visible;
    margin: auto; }
    @media only screen and (max-width: 37.5em) {
      .project-cs-hero__content {
        padding: 19rem 0 13rem 0;
        margin: auto;
        position: static;
        overflow: visible;
        transform: translate(0, 0); } }
  .project-cs-hero__info {
    margin: 3rem auto 0 auto;
    max-width: 80rem; }
  .project-cs-hero__cta {
    position :relative ;
    z-index:100;
    margin-top: 5rem;
    text-align: center;
    transform: translateZ(0); 
    overflow: visible;
   }

.project-details__content {
  width: 100%;
  max-width: 100%;
  margin: 0; }
  .project-details__content-title {
    font-weight: 700;
    font-size: 2.8rem;
    color:var(--text-main);
    margin-bottom: 3rem; }
    @media only screen and (max-width: 37.5em) {
      .project-details__content-title {

        font-size: 2.4rem; } }

.project-details__showcase-img-cont {
  /* width: 100%;
  margin-bottom: 6rem;
  display:flex;
  flex-wrap:wrap;
  justify-content: center; 
  gap: 2rem;  */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;

 }

.project-cs-hero__cta .btn--theme-inv {
    /* Propriétés essentielles pour l'animation */
    position: relative; 
    transition: all 0.3s ease;
    transform: translateY(0);
    box-shadow: none; 
}
.project-cs-hero__cta .btn--theme-inv:hover {
   background: var(--primary-color);
    color: var(--bg-secondary);
    border: 2px solid var(--primary-color); 

    /* FORCER LE SOULÈVEMENT VISIBLE */
    /* Utilisez des valeurs extrêmes pour le test : -10px de soulèvement et léger grossissement */
    transform: translateY(-10px) scale(1.05); 
    
    /* Rendre l'ombre très visible pour le test */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.project-cs-hero__cta .btn--theme-inv:active {
    /* Effet d'enfoncement au clic */
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(213, 16, 102, 0.3);
}
/* ---------------------------------------------------- */
/* 2. Styles de la Galerie d'Images */
/* ---------------------------------------------------- */
.project-details__gallery-cont {
    padding: 8rem 0; /* Espacement du conteneur principal */
    max-width: 90rem;
    /* margin: auto; */
}

.project-details__gallery {
    display: grid;
    /* Crée une grille de 3 ou 4 colonnes, ajustables */
    grid-template-columns: repeat(4, 1fr);
    /* grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); */
    gap: 20px; /* Espace entre les vignettes */
    margin-top: 30px;
}

.gallery__item {
    cursor: pointer;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex; /* Permet à l'image et la caption de s'aligner */
    flex-direction: column;
}

.gallery__item:hover {
    transform: translateY(-5px); /* Léger soulèvement au survol */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.gallery__img {
    width: 100%;
    height: 150px; /* Hauteur fixe pour les vignettes */
    object-fit: cover; /* Assure que l'image couvre la zone sans déformation */
    display: block;
}

.gallery__caption {
    padding: 10px;
    text-align: center;
    font-size: 1.4rem;
    color: var(--text-sub);
    background: var(--bg-main);
    font-weight: 600;
}


/* ---------------------------------------------------- */
/* 3. Styles du Modal (Fenêtre Pop-up) */
/* ---------------------------------------------------- */
.modal.is-open {
    display: flex; 
    align-items: center;
    justify-content: center;
}
body.modal-open .section-visible {
    transform: none !important; 
}
.modal-open {
    overflow: hidden; /* Supprime la barre de défilement verticale */
    height: 100vh; /* Définit la hauteur à 100% du viewport */
}
.modal {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Centrage parfait garanti par flexbox */
    display: none; 
    /* justify-content: center; 
    align-items: center;  */
    
    z-index: 2000; /* Assurez-vous qu'il est au-dessus de tout */
    background-color: rgba(0,0,0,0.9);
}
#modalImage {
    width: 100%;
    height: 100%;
    object-fit: contain; 
}
.modal__content {
   position:absolute; 
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%); 
    max-width: 90vw; 
    max-height: 80vh; 
    margin: 0; 
    display: block;
    animation-name: zoom;
    animation-duration: 0.6s;
}

.modal__wrapper {
    /* Nouveau conteneur pour l'image et la légende, centré par le .modal parent */
    display: flex;
    flex-direction: column; /* Organise l'image au-dessus de la légende */
    align-items: center;
    max-width: 90%; /* Limite la largeur de l'ensemble du contenu */
    max-height: 100%; /* Laisse le contenu s'étirer verticalement */
}

.modal__caption {
    margin: 10px auto 0 auto; /* Ajoute un petit espace au-dessus de la légende */
    display: block;
    width: 100%; /* Prend toute la largeur du wrapper */
    max-width: 1000px; 
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    /* Retirez la hauteur fixe si elle est trop grande et cause des problèmes de décalage */
    height: auto; 
    font-size: 1.8rem;
}
/* Bouton de fermeture (x) */
.modal__close {
  position: fixed !important; /* Force le positionnement par rapport à l'écran, même si le modal est perturbé */
    top: 15px;
    right: 35px;
    z-index: 10000;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.modal__close:hover,
.modal__close:focus {
    color: #D51066;
    text-decoration: none;
    cursor: pointer;
}
/* Style des flèches */
.modal__prev, .modal__next {
    cursor: pointer;
    position: fixed;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 40px;
    transition: 0.6s ease;
    user-select: none;
    text-decoration: none;
    z-index: 10001;
}

.modal__prev { left: 20px; }
.modal__next { right: 20px; }

.modal__prev:hover, .modal__next:hover {
    background-color: rgba(0, 0, 0, 0.8);
    color: var(--primary-color); 
}
@media (min-width: 768px) { /* Appliqué seulement sur les écrans de taille moyenne et grande */
    .about__content {
        display: flex; /* Active Flexbox */
        flex-direction: column; /* Laisse le contenu principal en haut */
        gap: 40px;
    }
    
   
    .project-details__gallery-cont, 
    .project-details__tools-used {
        max-width: 100% !important; /* On annule le 65% et le 35% */
        flex: none !important;      /* On annule le comportement flex */
    }
}
.about__visual-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Aligne les enfants au début (à gauche) */
    width: 100%;
}

.project-details__gallery-cont, 
.project-details__tools-used {
    width: 100%;             /* Force le bloc à prendre toute la largeur */
    text-align: left;        /* Aligne le texte/titres à gauche */
    margin-left: 0;          /* Supprime les marges automatiques si présentes */
}

/* On s'assure que la galerie elle-même n'est pas centrée */
.project-details__gallery {
    justify-content: flex-start !important; 
}
/* On cible le conteneur des logos dans la section veille */
.about__visual-container .skills {
    justify-content: flex-start !important;
    display: flex;
    flex-wrap: wrap;       /* Permet de revenir à la ligne si besoin */ 
    gap: 20px;             /* Espace entre les deux logos */
    margin: 20px 0;        /* Espace au-dessus/en-dessous */
    width: 100%;
}

/* On s'assure que chaque logo individuel n'a pas de marge automatique */
.about__visual-container .skills__skill {
    flex-direction: column;
    align-items: center;    /* Aligne verticalement le logo et le texte */
    justify-content: flex-start;  /* Aligne le contenu vers la gauche du bloc */
    height: auto;           /* Enlève la hauteur fixe de 120px pour plus de souplesse */
    width: fit-content;     /* Le bloc s'adapte à la largeur du logo + texte */
    padding: 10px 20px;
    gap: 15px;
}
/* Animation d'ouverture */
@keyframes zoom {
    from {transform: scale(0)} 
    to {transform: scale(1)}
}

/* Si votre bouton utilise la classe générique .btn--theme-inv, 
    assurez-vous que ces styles ne s'appliquent pas à d'autres boutons 
    que vous ne voulez pas animer. Sinon, ciblez-le plus spécifiquement :
*/
.project-cs-hero__cta a.btn--theme-inv {
     transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(213, 16, 102, 0.3)
}
.project-details__showcase-img {
  flex: 1 1 45%;
  max-width: 600px; /* Pour éviter qu'elles deviennent trop grandes sur grand écran */
  height: auto; }

.project-details__content-main {
  width: 100%;
  max-width: 100%;
  margin: auto; }

.project-details__desc {
  margin: 0; /* Supprime les marges qui pourraient centrer le bloc */
    width: 100%;
    text-align: left; }
  .project-details__desc-para {
    font-size: 2rem;
    line-height: 1.7;
    color: var(--text-sub);
    
    margin-bottom: 2rem; }
/* Styles pour les listes de points clés dans la description du projet */
.project-details__list {
    font-size: 1.8rem; 
    color: var(--text-sub); /* Utilisez la couleur de texte principale de votre thème */
    
    /* Ajouter un espace au-dessus et en dessous de la liste */
    margin-top: 1.5rem;
    margin-bottom: 3rem;
    
    /* Ajuster l'indentation de la liste */
    padding-left: 2.5rem; 
}

.project-details__list li {
    /* Espace entre les éléments de la liste */
    margin-bottom: 1rem;
    /* Assure que la couleur reste foncée et lisible */
    color: var(--text-sub); /* Utilisez la variable de couleur sombre de votre thème */
    line-height: 1.5; /* Améliore la lisibilité du texte long */
}
@media (min-width: 768px) {
    .project-details__gallery-cont {
        flex: 2; 
        max-width: 65%;
    }
.project-details__tools-used {
    flex: 1;
    max-width: 80%; 
    min-width: 200px;
}
  .project-details__tools-used-list {
    display: flex;
    flex-wrap: nowrap;
     align-items:flex-start
  }
  .project-details__tools-used-item {
    padding: 1rem 2rem;
    margin-bottom: 1.5rem;
    margin-right: 1.5rem;
    font-size: 1.6rem;
    background: rgba(153, 153, 153, 0.2);
    border-radius: 5px;
    font-weight: 600;
    color: var(--text-main); }

.project-details__links {
  margin: 0 0; }
  .project-details__links-btn {
    margin-right: 2rem; }
    @media only screen and (max-width: 37.5em) {
      .project-details__links-btn {
        margin-right: 0;
        width: 70%;
        margin-bottom: 2rem;
        text-align: center; } }
    .project-details__links-btn:last-child {
      margin: 0; }
      @media only screen and (max-width: 37.5em) {
        .project-details__links-btn:last-child {
          margin: 0; } }
        }
/* Animation de départ (Hero) */
.hero-start-animation {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.hero-start-animation.visible {
    opacity: 1;
    transform: translateY(0);
}


/* ==========================================================================
   NOUVEAU HEADER UNIFIÉ (Remplace lignes 76 à 180)
   ========================================================================== */

.header {
  position: fixed;
  width: 100%;
  z-index: 1000;
  background: var(--bg-main);
  box-shadow: 0 10px 100px rgba(0, 0, 0, 0.1);
  top: 0;
  left: 0;
}

.header__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5rem;
  height: 8rem;
}

.header__logo {
  font-size: 2.2rem;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--text-main);
  white-space: nowrap;
}
.header__logo-name { color: #D51066; }

/* --- GESTION DES MENUS --- */

/* 1. Sur PC (plus de 1100px) */
.header__links {
  display: flex;
  list-style: none;
}
.header__link {
  padding: 1rem 2rem;
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-main);
  text-decoration: none;
}
.header__main-ham-menu-cont {
  display: none; /* Cache le hamburger sur PC */
}



/* 3. Style du menu déroulant (Small Menu) */
.header__sm-menu {
  position: absolute;
  top: 8rem;
  left: 0;
  width: 100%;
  background: var(--bg-main);
  z-index: 999;
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: all 0.3s;
  box-shadow: 0 10px 10px rgba(0,0,0,0.1);
}

.header__sm-menu--active {
  max-height: 100vh;
  visibility: visible;
}

.header__sm-menu-link a {
  display: block;
  padding: 2rem 3rem;
  font-size: 1.6rem;
  color: var(--text-main);
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  text-align: right;
  border-top: 1px solid #eee;
}

/* Ajustement ultime pour tout petits écrans*/
@media only screen and (max-width: 30em) {
  .header__logo { font-size: 1.6rem; }
}
@media only screen and (max-width: 30em) {
  .header__logo { 
     font-size: 5rem !important; 
  }
} 

.main-footer {
  background: var(--bg-secondary);
  color: var(--text-main); }
  .main-footer__upper {
    display: flex;
    justify-content: space-between;
    padding: 8rem 0; }
    @media only screen and (max-width: 56.25em) {
      .main-footer__upper {
        padding: 6rem 0; } }
    @media only screen and (max-width: 37.5em) {
      .main-footer__upper {
        display: block; } }
  .main-footer__row-1 {
    order: 2; }
    @media only screen and (max-width: 56.25em) {
      .main-footer__row-1 {
        margin-bottom: 5rem; } }
  .main-footer__row-2 {
    width: 40%;
    order: 1;
    max-width: 50rem; }
    @media only screen and (max-width: 56.25em) {
      .main-footer__row-2 {
        width: 100%; } }
  .main-footer__short-desc {
    margin-top: 2rem;
    color:var(--text-main);
    font-size: 1.5rem;
    line-height: 1.7; }
  .main-footer__social-cont {
    margin-top: 2rem; }
  .main-footer__icon {
    margin-right: 1rem;
    width: 2.5rem;
    filter: invert(1) brightness(2);}
    .main-footer__icon--mr-none {
      margin-right: 0; }
    [data-theme="dark"] .main-footer__icon {
    filter: none;
}
  .main-footer__lower {
    padding: 4rem 0;
    border-top: 1px solid var(--text-sub);
    color: var(--bg-main);
    font-size: 1.2rem;
    text-align: left;
    text-align: center; }
    .main-footer__lower a {
      text-decoration: underline;
      font-weight: bold;
      margin-left: 2px; }
    @media only screen and (max-width: 56.25em) {
      .main-footer__lower {
        padding: 3.5rem 0; } }

/* On cible la classe que tu as ajoutée au footer */
.main-footer.footer-black {
    background-color: var(--bg-main) !important;
    background: var(--bg-main) !important;
}

/* IMPORTANT : On force tous les enfants à être transparents */
/* pour que le noir du footer soit visible derrière eux */
.main-footer.footer-black .main-container,
.main-footer.footer-black .main-container__project,
.main-footer.footer-black .main-footer__upper {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
}
.main-footer.footer-black { background: var(--bg-main) !important; }


/* =======================================================
   4. MISE EN PAGE des GROUPES de COMPÉTENCES
   ======================================================= */

/* Conteneur global pour espacer les groupes */
.skills__groups-container {
    display: flex;
    flex-direction: column; 
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 0;
}

/* Titres des groupes (Gère leur propre apparition) */
.skills__group-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text-main);
    text-align: left;
    margin-bottom: 20px;
    padding-left: 10px;
    position: relative;
    opacity: 0;
    transform: translateY(10px); 
    transition: opacity 0.5s ease-out, transform 0.5s ease-out; 
}

.skills__group-title::after {
    content: '';
    position: absolute;
    bottom: -5px; 
    left: 10px; 
    height: 3px;
    width: 60px; 
    background: var(--primary-color);
    border-radius: 5px;
}

/* Grille des compétences */
.about__content-skills {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 15px; 
    padding: 0;
    max-width: 1000px; 
    margin: 0 auto;
}

/* -------------------------------------------------------
   CARTE DE COMPÉTENCE (.skills__skill)
   ------------------------------------------------------- */
   /* Ciblage spécifique si la taille est trop petite dans la section Veille */
#veille .skills__skill {
    font-size: 1.8rem !important; /* Utilisation de !important pour s'assurer que le style est appliqué */
}

/* Si les images dans la boîte de compétence sont trop petites, réglez leur taille ici */
#veille .skills__skill img {
    height: 3rem; /* Exemple : 30px de hauteur pour les logos */
    width: auto;
    

}


/* --- GESTION DU HOVER --- */
/* En Light Mode au survol : on enlève tout */
.skills__skill:hover img {
    filter: none; 
}
[data-theme="dark"] .skills__skill:hover img {
    filter: invert(1) brightness(2); 
}
.skills__skill {
    padding: 10px 15px; 
    border: 1px solid #ddd;
    border-radius: 8px;
    height: 120px;
    color: var(--text-sub);
    background: var(--bg-main);
    /* border: 3px solid transparent;  */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    /* border-radius: 8px; */
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease-out;
    
}

/* -------------------------------------------------------
   ÉLÉMENTS INTERNES (Texte et Image)
   ------------------------------------------------------- */
.skills__skill span {
    margin-top: 0.5rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-sub);
    transition: color 0.1s ease-out; 
}

.skills__skill img {
    max-width: 40px;
    max-height: 40px;
    margin-bottom: 0.5rem;
    object-fit: contain;
    filter: grayscale(100%);
    transition: filter 0.1s ease-in-out; 
}

/* -------------------------------------------------------
   EFFET DE SURVOL (:hover)
   ------------------------------------------------------- */
.skills__skill:hover {
    transition-delay: 0s;
    transform: translateY(-5px)!important; 
    border-color: #D51066; 
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); 
}

.skills__skill:hover span {
    color: #D51066; 
}

.skills__skill:hover img {
    filter: none; 
}

/* -------------------------------------------------------
   ANIMATION D'APPARITION (Scroll Reveal)
   ------------------------------------------------------- */

/* 1. États initiaux (Masqués) */
.section-hidden .skills__group,
.section-hidden .skills__group-title,
.section-hidden .skills__skill {
    opacity: 0;
    transform: translateY(30px); /* Un glissement visible */
}

/* 2. États visibles */
.section-visible .skills__group,
.section-visible .skills__group-title,
.section-visible .skills__skill {
    opacity: 1;
    transform: translateY(0);
}

/* Délais pour le Staggering (Les groupes et titres ont déjà leurs transitions) */
/* C'est ce qui rend l'effet de vague */
.section-visible .skills__group { transition-delay: 0.2s; } 
.section-visible .skills__group:nth-child(2) { transition-delay: 0.5s; } 
.section-visible .skills__group:nth-child(3) { transition-delay: 0.8s; } 

.section-visible .skills__group .skills__group-title {
    transition-delay: 0.4s; 
}

.section-visible .skills__skill:nth-child(1) { transition-delay: 0.1s; } 

/* Langages (Groupe 1: Délai de base 0.2s) */
.section-visible .skills__group:nth-child(1) .skills__skill:nth-child(1) { transition-delay: calc(0.2s + 0.10s); }
.section-visible .skills__group:nth-child(1) .skills__skill:nth-child(2) { transition-delay: calc(0.2s + 0.15s); }
.section-visible .skills__group:nth-child(1) .skills__skill:nth-child(3) { transition-delay: calc(0.2s + 0.20s); }
.section-visible .skills__group:nth-child(1) .skills__skill:nth-child(4) { transition-delay: calc(0.2s + 0.25s); }
.section-visible .skills__group:nth-child(1) .skills__skill:nth-child(5) { transition-delay: calc(0.2s + 0.30s); }
.section-visible .skills__group:nth-child(1) .skills__skill:nth-child(6) { transition-delay: calc(0.2s + 0.35s); }
.section-visible .skills__group:nth-child(1) .skills__skill:nth-child(7) { transition-delay: calc(0.2s + 0.40s); }
.section-visible .skills__group:nth-child(1) .skills__skill:nth-child(8) { transition-delay: calc(0.2s + 0.45s); }


/* Bases de Données (Groupe 2: Délai de base 0.5s) */
.section-visible .skills__group:nth-child(2) .skills__skill:nth-child(1) { transition-delay: calc(0.5s + 0.10s); }
.section-visible .skills__group:nth-child(2) .skills__skill:nth-child(2) { transition-delay: calc(0.5s + 0.15s); }
.section-visible .skills__group:nth-child(2) .skills__skill:nth-child(3) { transition-delay: calc(0.5s + 0.20s); }
.section-visible .skills__group:nth-child(2) .skills__skill:nth-child(4) { transition-delay: calc(0.5s + 0.25s); }
.section-visible .skills__group:nth-child(2) .skills__skill:nth-child(5) { transition-delay: calc(0.5s + 0.30s); }
.section-visible .skills__group:nth-child(2) .skills__skill:nth-child(6) { transition-delay: calc(0.5s + 0.35s); }
.section-visible .skills__group:nth-child(2) .skills__skill:nth-child(7) { transition-delay: calc(0.5s + 0.40s); }
.section-visible .skills__group:nth-child(2) .skills__skill:nth-child(8) { transition-delay: calc(0.5s + 0.45s); }


/* Frameworks (Groupe 3: Délai de base 0.8s) */
.section-visible .skills__group:nth-child(3) .skills__skill:nth-child(1) { transition-delay: calc(0.8s + 0.10s); }
.section-visible .skills__group:nth-child(3) .skills__skill:nth-child(2) { transition-delay: calc(0.8s + 0.15s); }
.project-details__tools-used .skills {
    display: flex; /* Active Flexbox pour les compétences */
    flex-wrap: wrap; /* Autorise le retour à la ligne */
    justify-content: center; /* **C'est la clé : centre les logos horizontalement** */
    gap: 15px; /* Ajoute un espace entre les logos */
    margin-top: 15px;
}

.mouse {
  width: 25px;
  height: 40px;
  border: 2px solid var(--text-main);
  border-radius: 60px;
  position: relative;
  overflow: hidden; }
  .mouse::before {
    content: "";
    width: 5px;
    height: 5px;
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--text-main);
    border-radius: 50%;
    opacity: 1;
    animation: wheel 1.3s infinite;
    -webkit-animation: wheel 1.3s infinite; }

@keyframes wheel {
  to {
    opacity: 0;
    top: 27px; } }

@-webkit-keyframes wheel {
  to {
    opacity: 0;
    top: 27px; } }

/* =======================================================
   STRUCTURE GLOBALE (PC & TABLETTE)
   ======================================================= */

.description-experience{
    font-size: 1.6rem !important;
    line-height: 1.6 !important;
    margin-bottom: 10px !important;
    color: var(--text-sub) !important;
}
body .timelines-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4% !important;
    margin-top: 4rem !important;
}

body .timeline-block {
    flex: 1 1 48% !important; /* Force le côte à côte */
    min-width: 320px !important;
}

/* 1. La ligne rose (bien espacée du titre) */
body .timeline {
    position: relative !important;
    padding-top: 20px !important;
}

body .timeline::after {
    content: "" !important;
    position: absolute !important;
    top: 20px !important; 
    bottom: 0 !important;
    left: 20px !important;
    width: 4px !important;
    background: var(--primary-color) !important;
    z-index: 1 !important;
}

/* 2. Les blocs d'expérience (Cartes) */
body .element.gauche, 
body .element.droite {
    width: calc(100% - 75px) !important;
    margin: 0 0 35px 65px !important;
    padding: 25px !important;
    background: var(--bg-main) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
    position: relative !important;
    left: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body #parcours .element i.timeline-icon {
    position: absolute !important;
    left: -40px !important; /* Ton réglage de position */
    top: 25px !important;
    
    /* Taille du cercle extérieur */
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    
    background-color: var(--bg-main)!important;
    border: 4px solid var(--primary-color) !important;
    border-radius: 50% !important; /* Force le cercle parfait */
    
    /* Centrage parfait du point au milieu */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    z-index: 10 !important;
    transform: none !important;
    box-sizing: border-box !important; /* Important pour que la bordure ne déforme pas le rond */
}

 /* Le point au centre (on utilise le caractère Unicode pour plus de stabilité) */
body #parcours .element i.timeline-icon::before {
    content: "" !important; /* Point plein FontAwesome */
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    color: #D51066 !important;
    
    /* On réduit la taille du point au centre pour qu'il soit comme sur ta photo 1 */
    font-size: 0.8rem !important; 
    display: block !important;
    line-height: 1 !important;
} 
/* 4. TAILLE DU TEXTE (Agrandie) */
body .element p {
    font-size: 1.6rem !important;
    line-height: 1.6 !important;
    margin-bottom: 10px !important;
}

body .element p:first-child {
    font-size: 1.8rem !important;
    font-weight: bold !important;
    color: #000 !important;
}

body .list-timeline li {
    font-size: 1.5rem !important;
    margin-bottom: 8px !important;
    color: var(--text-sub) !important;
}

/* =======================================================
   ADAPTATION MOBILE (Écrans < 900px)
   ======================================================= */
@media only screen and (max-width: 56.25em) {
    body .timelines-wrapper {
        display: block !important; /* Empile les blocs Pro et Scolaire */
    }

    body .timeline-block {
        width: 100% !important;
        margin-bottom: 4rem !important;
    }

    body .element.gauche, 
    body .element.droite {
        width: calc(100% - 60px) !important; /* Un peu plus large sur mobile */
        margin-left: 55px !important;
    }

    body .element .timeline-icon {
        left: -48px !important; /* Ré-ajustement léger pour mobile */
    }
}
/* ============================================== */
/* === 4. Styles d'Animation (Déclencheur JS) === */
/* ============================================== */

/* Masquer les éléments (position de DÉPART) tant que le parent est caché (section-hidden) */
.section-hidden .timeline .element {
    opacity: 0;
    transform: translateY(20px); 
}

/* Révéler les éléments (position d'ARRIVÉE) lorsque le JavaScript ajoute la classe section-visible */
.section-visible .timeline .element {
    opacity: 1;
    transform: translateY(0); 
}
/* État initial pour le bloc Professionnel (Gauche) */
.section-hidden .timeline-block:nth-child(1) {
    opacity: 0;
    transform: translateX(-50px); /* Décalé de 50px vers la gauche */
}

/* État initial pour le bloc Scolaire (Droite) */
.section-hidden .timeline-block:nth-child(2) {
    opacity: 0;
    transform: translateX(50px); /* Décalé de 50px vers la droite */
}
.section-visible .timeline-block {
    opacity: 1 !important; /* Apparition */
    transform: translateX(0) !important; /* Retour à la position normale */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* La transition elle-même */
}

/*  Ajout d'un décalage temporel (Staggering) */
.section-visible .timeline-block:nth-child(2) {
    /* Le bloc de droite commence sa transition 0.2s après celui de gauche */
    transition-delay: 0.2s; 
}
/* Style pour le conteneur des logos de projet  */
.circles.project-assets li {
    /* Annule la forme ronde des bulles */
    border-radius: 0; 
    border: none;
    background: none; /* Supprime le fond de la bulle */
    opacity: 0.8; /* Légèrement transparent */
    padding: 0; /* Supprime le padding */
}

/* Style des images réelles à l'intérieur des li */
.circles.project-assets .asset-logo {
    display: block;
    width: 100%; /* Prend toute la largeur du li parent */
    height: auto; 
    /* Définit une taille maximale si l'image est trop grande */
    max-width: 80px; /* Ajustez la taille selon l'esthétique souhaitée */
    max-height: 80px;
    filter: invert(10%) sepia(90%) saturate(7000%) hue-rotate(315deg) brightness(80%) contrast(150%);
}
/* 1. Conteneur des bulles */
.circles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Cache les bulles lorsqu'elles dépassent les bords */
    z-index: 0; 
}

/* 2. Style de chaque bulle (li) */
.circles li {
    position: absolute;
    display: block;
    list-style:circle;
    
   
    background: rgba(213, 16, 102, 0.15); /* Rose avec une transparence légère */
    
    /* Animation: L'effet de flottement */
    animation: animate 25s linear infinite; 
    bottom: -150px; /* Commence hors de l'écran */
}
/* En Dark Mode, on peut augmenter un peu l'opacité pour qu'elles ressortent */
[data-theme="dark"] .circles li {
    background: rgba(213, 16, 102, 0.4); 
}
.circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
    animation-duration: 15s;
}

.circles li:nth-child(2){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
    animation-duration: 24s;
}

.circles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
    animation-duration: 10s;
}

.circles li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
    animation-duration: 30s;
}

.circles li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
    animation-duration: 17s;
}

.circles li:nth-child(8){
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 20s;
}

.circles li:nth-child(9){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}
@keyframes animate {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }
    100% {
        transform: translateY(-1000px) rotate(720deg); /* Monte jusqu'à -1000px */
        opacity: 0; /* Disparaît en haut */
        border-radius: 50%; /* Devient un cercle */
    }
}
/* --- Correction de l'animation (Accolade fermée ici) --- */
@-webkit-keyframes animate {
    0% {
        -webkit-transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }
    100% {
        -webkit-transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }
} 

/* =======================================================
   CORRECTION ULTIME : LOGOS COMPÉTENCES MOBILE
   (À placer tout en bas du fichier CSS)
   ======================================================= */

@media only screen and (max-width: 600px) {
    /* 1. On force la grille à ne JAMAIS faire une seule colonne */
    .about__content-skills {
        display: grid !important;
        /* Ici on force 3 colonnes sur mobile standard, 2 sur très petit */
        grid-template-columns: repeat(3, 1fr) !important; 
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 2. On réduit drastiquement la taille des cartes */
    .skills__skill {
        height: 85px !important; /* Hauteur réduite */
        width: 100% !important;
        padding: 5px !important;
        margin: 0 !important;
    }

    /* 3. On réduit les logos qui sont "ÉNORMES" */
    .skills__skill img {
        width: 25px !important;  /* Taille fixe pour le logo */
        height: 25px !important;
        max-width: 25px !important;
        max-height: 25px !important;
        filter: none !important; /* On enlève le gris sur mobile pour plus de clarté */
        margin-bottom: 2px !important;
    }

    /* 4. On ajuste le texte */
    .skills__skill span {
        font-size: 1rem !important; /* Texte plus petit */
        margin-top: 0 !important;
        line-height: 1.1 !important;
    }
}

/* 5. Sécurité pour les téléphones les plus fins (iPhone SE, etc.) */
@media only screen and (max-width: 380px) {
    .about__content-skills {
        grid-template-columns: repeat(2, 1fr) !important; /* 2 colonnes seulement */
    }
}

/* Si le JS met trop de temps ou plante, on affiche quand même sur mobile */
@media (max-width: 900px) {
    .section-hidden {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
}
/* Animation douce au chargement de la page (sans JS) */
.project-details {
    animation: fadeInPage 0.8s ease-out forwards;
    background-color:var(--bg-main);
}

@keyframes fadeInPage {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
[data-theme="dark"] .skills__skill img,
[data-theme="dark"] .header__main-ham-menu {
    /* 1. Préfixe obligatoire pour Safari sur iPhone */
    -webkit-filter: grayscale(100%) invert(1) brightness(2) !important;
    
    /* 2. Filtre standard pour les autres navigateurs */
    filter: grayscale(100%) invert(1) brightness(2) !important;
    
    /* 3. Astuce pour forcer Safari à recalculer le rendu visuel */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}