/***************************
                                      *      STYLES GÉNÉRAUX   *
                                      ***************************/

html, body { overflow-x: hidden; }

* {
  box-sizing: border-box; /*content+padding+border*/
}

body {
  font-family: Verdana, Geneva, Tahoma, 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f7f7f7;
  color: #333;
  line-height: 1.6;
}
.section {
  padding: 6rem 3rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  width: 100%;
  max-width: 900px;
  padding: 1rem;
}

.accueil       { background: linear-gradient(#cce7e8, White);}
.photo-profil  { background: linear-gradient(White, #e7dce9);}
.objectif      { background-color: #e7dce9;}
.experiences   { background-color: #fdf3e7;}
.parcours      { background-color: #dde9f4;}
.association   { background-color: #fce8e6;}
.contact       { background-color: #e9f0f4;}


h1 {
  font-size: 3rem;
  margin: 2rem;
}

h2, h3 {
  margin: 0;
}

h2 {
  font-size: 2.5rem;
  margin-bottom: 2rem;

}
p {
font-size: 1.1rem;
}

/**********LIENS GENERIQUE**********/
a{
color: #555;
font-weight: bold;
text-decoration: underline dotted;
}
a:visited {
color: #555; /* même couleur après visite */
}
a:hover {
color: #333; /* léger foncé au survol */
text-decoration: underline solid;
}

/**********BOUTTONS GENERIQUE**********/
button {
padding: 10px 20px;
margin :2rem;
font-size: 1rem;
border: none;
cursor: pointer;
transition: background-color 0.6s, opacity 0.3s ease;
border-radius: 5px;
}

button.fade-out {
  opacity: 0;
}

/**********AFFICHER IMAGE**********/
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}

.modal-img {
max-width: 90%;
max-height: 90%;
border-radius: 8px;
box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

.close-modal {
position: absolute;
right: 10px;
top: -10px;
font-size: 3rem;
color: white;
cursor: pointer;
background: none;
border: none;
}

.hidden {
display: none !important;
pointer-events: none;
}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}




/**********INFOBULLES**********/
 .infobulle {
  position: relative;
  cursor: help;
  text-decoration: dotted underline;
  font-style: normal;
}
.infobulle::after { /* Infobulle visible sur hover (desktop) */
  content: attr(data-info);
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.8rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out;
  z-index: 999;
}

.infobulle:hover::after { /* Version "active" pour mobile */
  opacity: 1;
}
.infobulle.active::after {
  opacity: 1;
}


                                      /***************************
                                      *      SECTION ACCEUIL   *
                                      ***************************/
.section.accueil {
  height: 100dvh;

}

.section.accueil:has(#biographie.active) {
  height: auto;
}

.section.accueil .container {
  max-width: 1200px;
}

.intro {
  font-size: 1.2rem;
  margin-bottom:0;
}

#btn-biographie{
background-color: #a8dadc;
}
#btn-biographie:hover {
background-color: #74cbd4;
}

/* Bloc biographie avec effet smooth */
#biographie {
  overflow: hidden;
  height: 0;
  opacity: 0;
  transition: height 0.4s ease, opacity 0.4s ease;
  margin-top: 0;
  text-align: center;
}

/* Quand activé (via JS) */
#biographie.active {
  opacity: 1;
}


                                /**********************************
                                *      SECTION PHOTO DE PROFIL   *
                                **********************************/
.section.photo-profil {
  position: relative;
  height: 80vh;
  overflow: hidden;
  z-index: 1;
}

/* Image de fond avec effet parallaxe */
.parallax-photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%; /* + que 100% pour accentuer l’effet de scroll */
  background-image: url('images/large_photo_profil.png'); /* ⇐ remplace par ton chemin */
  background-size: cover;
  background-position: center;
  background-attachment: scroll; /* ← effet parallaxe */
  z-index: 0;
  transform: translateY(0);
  transition: transform 0.3s ease;
}


                                /*****************************************
                                *      SECTION OBJECTIF PROFESSIONNEL   *
                                *****************************************/

.section.objectif .container {
  max-width: 1200px;
}

.intro-objectif-pro {
  margin: 0;
}

#btn-suite{
background-color: #BDAAD6;
}
#btn-suite:hover {
background-color: #8B74B7;
}

/**********EFFET HIDE/REVEAL**********/
/* Bloc voir/masquer avec effet smooth */
#suite {
  overflow: hidden;
  height: 0;
  opacity: 0;
  transition: height 0.4s ease, opacity 0.4s ease;
  margin-top: 0;
  text-align: center;
}


/* Quand activé (via JS) */
#suite.active {
  opacity: 1;
}

                                /******************************
                                *      SECTION EXPERIENCES   *
                                ******************************/

.experiences {
  content-visibility: auto;              /* évite calcul + peinture hors-écran */
  contain-intrinsic-size: 1200px;        /* hauteur de réserve pour éviter le saut */
}

/**********LIENS AFFICHAGE PDF**********/
a.lien-pdf {
  color: #555;
  font-style: italic;
  text-decoration: underline dotted;
  font-weight: 500;
}
a.lien-pdf:visited {
  color: #555;
}
a.lien-pdf:hover {
  color: #333;
  text-decoration: underline solid;
}

/* --------- CARTES --------- */
.card {
  background-color: white;
  border-radius: 15px;
  padding: 2rem;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  max-width: 100%;
  margin-bottom: 3rem;
  text-align: left;
  margin: 0 auto 3rem auto;
  content-visibility: auto;              /* évite calcul + peinture hors-écran */
  contain-intrinsic-size: 1200px;        /* hauteur de réserve pour éviter le saut */
}

.card h3 {
  font-size: 1.5rem;
  margin: 0;
}

.card h6 {
  font-size: 0.7rem;
  margin: 0;
  color:#7f8288
}


/* --------- logos des entreprises --------- */
.logos-entreprises {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 1.5rem;
}

.logos-entreprises img {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 50%;
border: 2px solid #ddd;
background-color: #fff;
padding: 4px;
box-shadow: 0 1px 4px rgba(0,0,0,0.1);
transition: transform 0.2s ease;
}

.logos-entreprises img:hover {
transform: scale(1.20);
}

/* --------- liste des compétences --------- */
.competences {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
  padding: 1rem;
  list-style: none;
  justify-content: center;
  border-top: thin solid #7f8288;
}

.competences li {
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.9rem;
  border: 1px solid #ccc;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: background-color 0.2s ease;
}

.competences li:hover {
opacity: 0.65;
}

/* Catégories par couleur */
.technique     { background-color: #cce5f6; color: #003f5c; }
.editorial     { background-color: #d4edda; color: #1e463a; }
.production    { background-color: #fff3cd; color: #665c00; }
.outil         { background-color: #e2d6f9; color: #3e2762; }
.softskill     { background-color: #f1f1f1; color: #555; }
.administratif { background-color: #f9d3d3; color: #b55b5b; }




                                  /***************************
                                  *      SECTION PARCOURS   *
                                  ***************************/

/* Frise chronologique */
.timeline {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding-left: 20px;
  border-left: 4px solid #74cbd4; /* ligne verticale */
}
.timeline-item {
  position: relative;
  margin-bottom: 3rem;
  padding-left: 15px;
  text-align: left;
}
.timeline-item::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 5px;
  width: 16px;
  height: 16px;
  background-color: #74cbd4;
  border-radius: 50%;
  border: 3px solid white;
}
/* Date */
.timeline-date {
  font-weight: bold;
  color: #444;
  margin-bottom: 0.5rem;
}
/* Titre + description */
.timeline-content h3 {
  margin: 0;
  font-size: 1.2rem;
  color: #222;
}
.timeline-content p {
  margin: 0.5rem 0 0;
  color: #555;
}


                                    /**************************
                                    *      SECTION PROJETS   *
                                    **************************/    
.section.projets {
  position: relative;
  background-image: url('images/residence_croisee.jpg'); /* ← à ajuster selon ton chemin */
  background-size:150%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  color: rgb(230, 230, 230);
  z-index: 1;
  overflow: hidden;
  background-position-y: 30%;
}

/* ✅ Mobile fix */
@media (max-width: 1200px) {
  .section.projets {
    background-image: none;
  }
}


.card.projets {
  background-color: rgba(0, 0, 0, 0.85);
  border-radius: 15px;
  padding: 2rem;
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
  max-width: 100%;
  margin-bottom: 3rem;
  text-align: center;
  margin: 0 auto 3rem auto;
}



/* Autres styles inchangés */

.section.projets p {
  margin-bottom: 1rem;
}

.section.projets a {
  text-decoration: none;
  color: #a8dadc; /* couleur plus claire sur fond sombre */
  font-weight: bold;
}

.section.projets a:hover {
  text-decoration: underline;
}

.lecteurs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5rem;
  margin-top:2rem;
}

.BD_wrapper {
  position: relative;
  display: inline-block;
  max-width: 293px;
  border-radius: 8px;
  overflow: hidden; /* masque l’overlay arrondi */
  transition: transform 0.2s ease;
}

.BD_case {
  width: 100%;
  border-radius: 8px;
  display: block;
}

.BD_wrapper:hover{
  transform: scale(1.05);
}

.BD_overlay {
  position: absolute;
  top: 50%;                   /* bande au milieu */
  left: 0;
  transform: translateY(-50%);/* centre verticalement */
  width: 100%;
  padding: 0.5rem 0;          /* hauteur du bandeau */
  background: rgba(0,0,0,0.7);/* opacité moyenne */
  color: #fff;
  font-weight: bold;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.BD_wrapper:hover .BD_overlay {
  opacity: 1;
}

.youtube {
  aspect-ratio: 16/9;
  height: 100%;
  max-height: 225px;
  width: auto;
  border-radius: 8px;
  transition: transform 0.2s ease;
}

.youtube:hover {
  transform: scale(1.05);
}

                                      /******************************
                                      *      SECTION ASSOCIATION   *
                                      ******************************/

a.credits {
  font-weight:normal;
}

blockquote {
  position: relative;
  font-family: "delius";
  font-size: 1.7rem;
  font-style: italic;
  line-height: 1;
  text-align: center;
  margin: 0;
  padding: 1.5rem 2rem;
}

blockquote::before {
  content: '«';
  font-size: 6rem;
  position: absolute;
  top: -2.5rem;
  left: 0;
  color: #c6a296;
}
blockquote::after {
  content: '»';
  font-size: 6rem;
  position: absolute;
  bottom:-0.5rem;
  right: -0.5rem;
  color: #c6a296;
}


.partenaires-larsen {
  max-width: 800px;
  width: 100%;
  height: auto;
  padding-top:2rem;
  border-top: thin solid #7f8288;
}


                                        /**************************
                                        *      SECTION CONTACT   *
                                        **************************/
.contact-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5rem;
}

.contact-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center; /* ← important */
  max-width: 200px;
  transition: transform 0.2s ease;
}

.contact-item:hover {
  transform: scale(1.05);
  text-decoration: underline;
}

.contact-item i {
  width: 32px;
  height: 32px;
  color: #333;
  margin-bottom: 0.5rem;
}

.contact-item a, .contact-item p {
  margin: 0;
  color: #006d77;
  text-decoration: none;
}



                                    /********************
                                    *      CARROUSEL   *
                                    ********************/
.carrousel {
display: flex;
overflow-x: auto;
gap: 1rem;
scroll-snap-type: x mandatory;
padding: 1rem 0;
margin-top: 1rem;
}

/* Pour vidéos */
.carrousel .carte {
flex: 0 0 300px;
scroll-snap-align: start;
background: #fff;
border-radius: 8px;
padding: 0.5rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
text-align: left;
}

.carte video {
width: 100%;
height: auto;
border-radius: 6px;
transition: transform 0.3s ease;
}

/* Pour visuel */
.carte img {
width: 100%;
height: auto;
border-radius: 6px;
display: block;
cursor: zoom-in;
transition: transform 0.3s ease;
height: 180px; /* ou 200px selon ton design */
object-fit: cover;
}

.carte img:hover {
transform: scale(1.05);
}

.carte video:hover {
transform: scale(1.05);
}

.description{
font-size: 0.7rem !important;
color: #444;
margin-top: 0.4rem;
text-align: center;
}



/****************************
 *      ANIMATION FADE-IN   *
 ****************************/
.fade-element {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-element.visible {
  opacity: 1;
  transform: translateY(0);
}


                            /******************
                            *      SIDEBAR   *
                            ******************/
/* --------- SIDEBAR GLOBALE --------- */
.sidebar {
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 1000;
  background: rgba(255, 255, 255, 0.9);
  border-right: 2px solid #ddd;
  border-radius: 0 10px 10px 0;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  padding: 0.5rem;
}

/* UL vertical sur desktop */
.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar li {
  margin: 1rem 0;
  text-align: center;
}

.sidebar a {
  text-decoration: none;
  font-size: 1.5rem;
  display: block;
  padding: 0.3rem;
  color: #555;
  transition: all 0.2s ease-in-out;
}

.sidebar a:hover {
  color: #006d77;
  transform: scale(1.2);
}

.sidebar a i {
  width: 24px;
  height: 24px;
  color: inherit;
}

/* --------- BOUTON MENU MOBILE --------- */
#menu-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  position: relative;
  z-index: 1100;
}

#menu-toggle i {
  width: 28px;
  height: 28px;
  color: #333;
}





/******************************
 *         MEDIA QUERIES      *
 *      (RESPONSIVE DESIGN)   *
 ******************************/
/* Petits écrans : téléphone */
@media (max-width: 600px) {
  h1 {
    font-size: 2.2rem;
  }

  h2 {
    font-size: 2rem;
  }

  p {
    font-size: 1rem;
  }
  
  .container {
    padding: 0.5rem;
  }

  .section {
    height: auto;
    padding: 4rem 1rem;
  }

  .intro {
    font-size: 1rem;
  }

.competences li {
    font-size:0.6rem;
}
  
.logos-entreprises img {
    width: 50px;
    height: 50px;
}

.lecteurs {
  gap: 2rem;
}

  .contact-items {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }

/* ---------- MOBILE : bar horizontale --------- */
.sidebar {
  top: 0;
  left: 0;
  right: 0;
  transform: none;
  width: 100%;
  height: auto;
  border: none;
  border-bottom: 2px solid #ddd;
  border-radius: 0;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  display: block;
  text-align: center;
}
#menu-toggle {
  display: inline-block;
  background: none;
  border: none;
  padding: 0.3rem;
  margin:0.5rem 0 0 0;
  cursor: pointer;
  position: relative;
  z-index: 1001;
}
#menu-toggle i {
  width: 28px;
  height: 28px;
  color: #333;
}
#nav-items {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  row-gap: 0.6rem;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, max-height 0.4s ease;
  margin-top: 0.5rem;
}
.sidebar.open #nav-items {
  opacity: 1;
  max-height: 100px;
  pointer-events: auto;
}
.sidebar ul {
  margin: 0;
  padding: 0;
}
.sidebar li {
  margin: 0;
}
.sidebar a {
  font-size: 1.3rem;
  padding: 0.3rem;
}

.close-modal {
    display: none;
}

}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}