* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    background-image: url('images/image_D_Accueil7.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
     background-attachment: fixed;
}


/* Structure de base */
.banniere {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
}

/* Masquer le bouton sur grand écran */
.menu-toggle {
  display: none;
  font-size: 28px;
  background: none;
  border: none;
  cursor: pointer;
}

/* Menu classique */
.navig ul {
  display: flex;
  gap: 20px;
  list-style: none;
}

.navig ul li a {
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  color: #333;
}

.navig ul li a:hover {
    color: #fff;
}

/* Responsive : version mobile */
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }

  .navig {
    display: none;
    position: absolute;
    top: 60px;
    right: 20px;
    background: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
  }

  .navig ul {
    flex-direction: column;
    padding: 10px;
  }

  .navig ul li {
    margin: 10px 0;
  }

  /* Menu ouvert */
  header.menu-open .navig {
    display: block;
  }
}

/* Par défaut (mobile), le menu est caché */
.navig {
  display: none;
}

/* Quand actif (bouton cliqué) */
.navig.active {
  display: block;
}

/* Le bouton hamburger est masqué en desktop */
.menu-toggle {
  display: block;
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
}

/* Desktop view: afficher le menu, cacher le bouton */
@media screen and (min-width: 768px) {
  .menu-toggle {
    display: none;
  }

  .navig {
    display: block;
  }
}


.logo img {
  width: 150px;     
  height: auto;     
   animation: flip 4s ease-in-out infinite; /* Retour et rotation continue */
}

@keyframes flip {
    0% {
        transform: rotateY(0deg); /* Position initiale */
    }
    50% {
        transform: rotateY(180deg); /* Retournement à 180 degrés */
    }
    100% {
        transform: rotateY(360deg); /* Retour à la position initiale */
    }
}



.container {
    width: 80%;
    margin: 0 auto;
}






.section {
    padding: 60px 0;
}

.about {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.profile {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

h2 {
    font-size: 30px;
    text-align: center;
    padding: 25px;
    color: #2c3e50; 
}





.intro {
   background-image: ; 
    border-radius: 10px; /* Bords arrondis */
    padding: 20px; /* Espacement interne */
   background: linear-gradient(90deg, #4b0082, #8e44ad, #9b59b6);
  color: #2c3e50;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombre pour donner de la profondeur */
    
}

.intro p{
    font-size: 20px;
    font-family: 'Poppins', sans-serif;
    color: #fff;
    text-align: justify;
}

.text p{
    font-size: 20px;
    font-family: 'Poppins', sans-serif;
    color: #fff;
    text-align: center;
     
    border-radius: 10px; /* Bords arrondis */
    padding: 20px; /* Espacement interne */
    background: #662D91; /* Fond transparent avec légère opacité */
    color: #fff; /* Couleur du texte */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombre pour donner de la profondeur */
    margin-left: 300px;
    margin-right: 300px;
  
}


.coup{
    background: #662D91; 
    margin-left: 250px;  
    margin-right: 250px;
    border-radius: 10px;  
}
.coup p {
    font-size: 30px;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 20px;
    text-align: center;
    color: #fff; 
    padding: 50px;
}

#cv h2{
    text-align: center;
}

.section-cv {
  padding: 40px 0;
  border-radius: 10px;
  margin-top: 0;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto; /* Centre la section */
}

.curriculum-vitae {
  display: flex;
  justify-content: center; /* centre le contenu à l'intérieur */
  flex-wrap: wrap;
  gap: 20px;
}

.curri-vitae {
  background: url(images/ban.jpg);
  color: #fff;
  padding: 20px;
  width: 30%;
  min-width: 250px;
  border-radius: 10px;
  transition: transform 0.3s, background-color 0.3s;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  text-align: center;
}
.curri-vitae:hover {
    transform: scale(1.05);
    background-color: #2c3e50;
}


.retour {
    margin-left: 10px;
    display: inline-block;
    background-color: #2c3e50; 
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1rem;
    margin-top: 20px;
    transition: background-color 0.3s;
}

.retour a{
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    text-decoration: none;
}

.retour:hover{
    background-color: rgba(0, 0, 0, 0.5);
}

.btn {
    display: inline-block;
    background-color: #2c3e50; 
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1rem;
    margin-top: 20px;
    transition: background-color 0.3s;
}

.btn:hover {
    background-color: #e6f0ff; 
  color: #003366;          
}

.projects {
    
    padding: 40px 0;
    border-radius: 10px;
}


.project-cards {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; /* Permet de passer à la ligne */
  gap: 20px; /* Ajoute un espace entre les cartes */
}


.project-cardV-link {
  display: block;
  width: fit-content;  /* ou une largeur fixe */
  margin: 0 auto;
}

.project-cardV {
  background-image: url("images/Travel.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 300px;
  height: 200px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  cursor: pointer;
}

.project-cardV:hover {
    transform: scale(1.05);
    background-color: rgba(255, 255, 255, 0.4); /* Fond plus clair au survol */
}





.project-cardZ-link {
  display: inline-block;
  text-decoration: none;
}

.project-cardZ {
  background-image: url("images/animaux-sauv.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 300px;
  height: 200px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  cursor: pointer;
}

.project-cardZ:hover {
    transform: scale(1.05);
    background-color: rgba(255, 255, 255, 0.4); /* Fond plus clair au survol */
}


.project-cardM-link {
  display: inline-block;
  text-decoration: none;
}

.project-cardM {
  background-image: url("images/MJ.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 300px;
  height: 200px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  cursor: pointer;
}

.project-cardM:hover {
    transform: scale(1.05);
    background-color: rgba(255, 255, 255, 0.4); /* Fond plus clair au survol */
}


.project-cardA-link {
  display: inline-block;
  text-decoration: none;
}

.project-cardA {
  background-image: url("images/famAlg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 300px;
  height: 200px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  cursor: pointer;
}

.project-cardA:hover {
    transform: scale(1.05);
    background-color: rgba(255, 255, 255, 0.4); /* Fond plus clair au survol */
}


.project-cardI-link {
  display: inline-block;
  text-decoration: none;
}

.project-cardI {
  background-image: url("images/chat.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 300px;
  height: 200px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  cursor: pointer;
}

.project-cardI:hover {
    transform: scale(1.05);
    background-color: rgba(255, 255, 255, 0.4); /* Fond plus clair au survol */
}


.project-cardL-link {
  display: inline-block;
  text-decoration: none;
}

.project-cardL {
  background-image: url("images/lampe.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 300px;
  height: 200px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  cursor: pointer;
}

.project-cardL:hover {
    transform: scale(1.05);
    background-color: rgba(255, 255, 255, 0.4); /* Fond plus clair au survol */
}


.project-cardU-link {
  display: inline-block;
  text-decoration: none;
}

.project-cardU {
  background-image: url("images/labirynthe.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 300px;
  height: 200px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  cursor: pointer;
}

.project-cardU:hover {
    transform: scale(1.05);
    background-color: rgba(255, 255, 255, 0.4); /* Fond plus clair au survol */
}

.project-cardB-link {
  display: inline-block;
  text-decoration: none;
}

.project-cardB {
  background-image: url("images/blend.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 300px;
  height: 200px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  cursor: pointer;
}

.project-cardB:hover {
    transform: scale(1.05);
    background-color: rgba(255, 255, 255, 0.4); /* Fond plus clair au survol */
}


.project-cardC-link {
  display: block;
  width: fit-content;  /* ou une largeur fixe */
  margin: 0 auto;
}

.project-cardC {
  background-image: url("images/alo.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 300px;
  height: 200px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  cursor: pointer;
}

.project-cardC:hover {
    transform: scale(1.05);
    background-color: rgba(255, 255, 255, 0.4); /* Fond plus clair au survol */
}


.project-cardAF-link {
  display: block;
  width: fit-content;  /* ou une largeur fixe */
  margin: 0 auto;
}

.project-cardAF {
  background-image: url("images/AFTEREFFECTS.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 300px;
  height: 200px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  cursor: pointer;
}

.project-cardAF:hover {
    transform: scale(1.05);
    background-color: rgba(255, 255, 255, 0.4); /* Fond plus clair au survol */
}



.project-cardVR-link {
  display: inline-block;
  text-decoration: none;
}

.project-cardVR {
  background-image: url("images/VR.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 300px;
  height: 200px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  cursor: pointer;
}

.project-cardVR:hover {
    transform: scale(1.05);
    background-color: rgba(255, 255, 255, 0.4); /* Fond plus clair au survol */
}



footer {
    background-image: url(images/ban.jpg);
    text-align: center;
    padding: 20px 0;
}

footer p {
    font-size: 0.9rem;
    color: #000000;
}


.project-cardMA-link {
  display: inline-block;
  text-decoration: none;
}

.project-cardMA {
  background-image: url("images/Mark2.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 300px;
  height: 200px;
  margin-left: 450px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  cursor: pointer;
}

.project-cardMA:hover {
    transform: scale(1.05);
    background-color: rgba(255, 255, 255, 0.4); /* Fond plus clair au survol */
}


.project-cardCR-link {
  display: inline-block;
  text-decoration: none;
}

.project-cardCR {
  background-image: url("images/moi.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 300px;
  height: 200px;
  margin-left: 450px; 
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  cursor: pointer;
}

.project-cardCR:hover {
    transform: scale(1.05);
    background-color: rgba(255, 255, 255, 0.4); /* Fond plus clair au survol */
}



#hidden-box {
  position: fixed;
  top: 0; /* ← au lieu de top: 10px */
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  background: linear-gradient(135deg, #6A0DAD, #F9F9FF);
  border: 1px solid #ccc;
  padding: 1px;
  text-align: center;
  transition: width 0.5s ease;
  overflow: hidden;
  z-index: 999;
  border-radius: 0 0 8px 8px; /* coins arrondis uniquement en bas */
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

#hidden-box.open {
   width: 80%; /* devient large */
}

#toggle-btn {
  cursor: pointer;
  font-weight: bold;
  color: #fff;
}

.infos h1, h3, p, ul{
  color: #fff;
  margin: 20px;
}
#content {
  display: none;
  margin-top: 10px;
  text-align: left;
}

#hidden-box.open #content {
  display: block;
}

#close-btn {
  float: right;
  margin-right: 20px;
  background: linear-gradient(to bottom, #6c3faa, #d1a0f7);
  color: #fff;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 4px;
}

#close-btn:hover {
  background-color: #555;
}


/*CSS pour rendre le site responsive et compatible */

/* Smartphones (portrait et petits) */
@media (max-width: 768px) {
  .project-cards {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .project-card {
    width: 90%;
    height: 180px;
  }

  .navig ul {
    flex-direction: column;
    background-color: #000;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    display: none;
  }

  .navig.active ul {
    display: flex;
  }

  .menu-toggle {
    display: block;
  }

  header.menu-open .navig ul {
    display: flex;
  }
}

/* Tablettes et iPad Pro */
@media (min-width: 769px) and (max-width: 1024px) {
  .project-cards {
    justify-content: space-around;
  }

  .project-card {
    width: 45%;
    height: 200px;
  }
}



@media (max-width: 768px) {
  body {
    font-size: 16px;
    padding: 0 10px;
  }

  h1, h2, h3 {
    font-size: 1.5em;
    text-align: center;
  }

  p {
    font-size: 1em;
    line-height: 1.5em;
    text-align: justify;
  }

  .container {
    padding: 10px;
  }

  .text {
    padding: 10px;
    text-align: center;
  }

  .menu-toggle {
    display: block;
  }

  .navig ul {
    flex-direction: column;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background-color: #000;
    display: none;
    z-index: 999;
    padding: 10px 0;
  }

  header.menu-open .navig ul {
    display: flex;
  }

  .navig ul li {
    margin: 10px 0;
  }

  .navig ul li a {
    color: white;
    font-size: 1.2em;
    text-align: center;
  }

  .Nina h2 {
    font-size: 1.4em;
    text-align: center;
    padding: 10px;
  }

  .intro {
    padding: 10px;
  }

  footer p {
    font-size: 0.9em;
    text-align: center;
    padding: 5px 10px;
  }
}



/*RESPONSIVE GÉNÉRAL < 1200px*/
@media (max-width: 1199px) {
  .container {
    width: 95%;
    padding: 0 10px;
  }

  h1, h2, h3 {
    font-size: 1.8em;
  }

  p, .intro p, .text p {
    font-size: 1em;
    line-height: 1.5;
  }
}

/* TABLETTES / IPAD / SURFACE < 1024px*/
@media (max-width: 1024px) {
  .project-card {
    width: 45%;
    height: 200px;
  }

  .banniere {
    flex-direction: column;
    align-items: flex-start;
  }

  .menu-toggle {
    display: block;
  }

  .navig {
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
  }

  .navig ul {
    display: none;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.9);
    padding: 10px;
  }

  header.menu-open .navig ul,
  .navig.active ul {
    display: flex;
  }

  .navig ul li a {
    font-size: 1.2em;
    color: #fff;
    padding: 10px 0;
  }

  .intro,
  .text,
  .coup {
    padding: 15px;
  }

.coup {
    width: 65%;
    margin: 10px auto;
  }

  .coup p {
    font-size: 20px;
    padding: 10px;
  }
}

/*  SMARTPHONES / IPHONE / GALAXY / OPPO < 768px*/
@media (max-width: 768px) {
  h1, h2 {
    font-size: 1.5em;
  }

  .project-card {
    width: 90%;
    height: 180px;
    margin: 15px auto;
  }

  .intro p, .text p {
    font-size: 0.80em;
     margin-left: 20px;
     margin-right: 20px;

  }


#cv h2{
    font-size: 1.80em;
}

  .banniere {
    align-items: center;
    padding: 10px;
  }

  .logo img {
    height: 120px;
    width: 140px;
  }

  .coup {
    width: 65%;
    margin: 10px auto;
  }

  .coup p {
    font-size: 15px;
    padding: 10px;
  }

    .menu-toggle {
  display: block;
  position: relative;
  z-index: 1001;
  background: none;
  border: none;
  font-size: 30px;
  cursor: pointer;
  color: #000;
}



.navig.active {
  position: fixed;
  top: 20px;
  left: 50px;
  right:50px;
  width: 40%;
  height: 50%;
  background-color: #2c003e;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.navig ul {
  list-style: none;
  padding: 0;
  margin: 10px;
  width: 70%;
}

.navig li {
  margin: 10px 0;
}

.navig a {
  text-decoration: none;
  color: #000;
  font-size: 1.2em;
   
} 
}

/* PETITS SMARTPHONES < 480px*/
@media (max-width: 480px) {
  h1, h2 {
    font-size: 1.3em;
  }

  p, .intro p, .text p {
    font-size: 0.80em;
     margin-left: 50px;
     margin-right: 50px;

  }


#cv h2{
    font-size: 1.80em;
}

  .project-card {
    height: 150px;
  }

  .banniere {
    flex-direction: column;
    padding: 5px;
  }

  .menu-toggle {
    font-size: 1.8em;
  }

  .navig ul li a {
    font-size: 1.1em;
  }


}

/* GRAND ÉCRAN DESKTOP > 1200px*/
@media (min-width: 1200px) {
  .container {
    width: 1200px;
    margin: auto;
  }

  .project-card {
    width: 30%;
    height: 250px;
  }
}