@import url('https://fonts.googleapis.com/css2?family=Federo&family=Lavishly+Yours&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Merienda:wght@300..900&family=Pompiere&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");



html, body {
    width:100% ;
    font-family: "Roboto Slab", serif;
    margin: 0;
    padding: 0
  
}


.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #000000;
  padding: 10px 20px;
  position: relative;
}

/* Logo à gauche */
.logo {
  display: flex;
  align-items: center;
}

.logo img {
  height: 50px; /* ajustez selon votre logo */
}

/* Icônes à droite */
.nav-icons {
  display: flex;
  align-items: center;
  gap: 15px; /* espace entre icônes */
}

/* Liens et icônes */
.nav-icons a {
  color: white;
  font-size: 1.2em;
  text-decoration: none;
}

.nav-icons a:hover { color: #33f702; /* Couleur au survol, à adapter */}

/* Style pour le menu burger */
.menu-burger {
  display: none;
  font-size: 1.5em;
  cursor: pointer;
}

/* Menu mobile caché par défaut */
.mobile-menu {
  display: none;
  position: absolute;
  top: 60px; /* ajustez selon la hauteur du header */
  right: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
  flex-direction: column;
  gap: 10px;
  z-index: 1000;
}


/* TITRE en bleu néon */
        .h1_neon {
            font-family: "Merienda", cursive;
            font-size: 35px;
            color: #00ffff; /* Couleur bleu néon */
            text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff, 0 0 40px #00ffff;
            text-align: center;
            margin-top: 50px;
        }


/* TITRES */
h1 {
    
    font-family: "Merienda", cursive;
    color: black;
    font-size: 30px;
   text-align: center;
}

h2 {
    font-family: "Federo", sans-serif;
    color: black;
    font-size: 50px;
    text-align: center;   
}


h3 {
    font-family: "Pompiere", sans-serif;
    color: white;
   text-align: center;
    font-size: 30px;  /* pour augmenter la police car la taille de départ est trop petite */
}


p {
    font-family: "Libre Baskerville", serif;
    color: white;
    font-size: 18px; 
}


p1. {
    font-family: "Pompiere", sans-serif;
    color: white;
    font-size: 18px; 
}



/* Styles de base pour le footer */
.footer {
  width: 100%;
  min-height: 10vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: black; 
  flex-wrap: wrap; /* Permet de passer en colonne sur petits écrans */
}



/* Partie gauche */
.footer_gauche {
  display: flex;
  flex-direction: row;
  gap: 20px; /* Espacement entre les liens */
  align-items: center;
}

/* Partie milieur */
.footer_milieu {
  display: flex;
  align-items: center;
}


/* Partie droite */
.footer_droite {
  display: flex;
  align-items: center;
}

/* Style des liens */
.footer a {
  text-decoration: none;
  color: white; 
  font-weight: bold;
}

.footer a:hover { color: #33f702; /* Couleur au survol, à adapter */}

/* Style pour l'icône */
.fas {margin-right: 8px;}




  /* Style du bouton */
  .neon-button {
    padding: 15px 30px;
    font-size: 1.2em;
    color: #00ffff; /* Couleur du texte */
    background: transparent;
    border: 2px solid #48ff00; /* Bordure néon */
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff;
    transition: all 0.3s ease;
  }

  /* Effet au survol */
  .neon-button:hover {
    
    box-shadow: 0 0 20px #02f807, 0 0 40px #02f807, 0 0 60px #02f807,;
    color: #02f807,; /* Changement de couleur du texte au survol */
  }



    /* BOUTON COMMUN */
.label {
  width: 156px;
  height: 45px;
  text-align: center;
  line-height: 45px;
  border-radius: 22px;
  background-color: rgb(0, 102, 255);
  background-image: linear-gradient(
    180deg,
    rgb(0,102,255) 0%,
    rgb(0,102, 255) 100%
  );
  text-decoration: none;
}

.button:hover .gradient-container {
  transform: translate(-50%, -50%) scale(0.98);
  filter: blur(5px);
}





/* PAGE BIENVENUE */
#section_bienvenue{ 
  background-color: bla;
  width: 100%;
  min-height:80vh;
  display: flex;
	justify-content: center;	/* espace égal entre chaque élément, sans espace aux extrémités. */
	align-items: center;		/* vertical = centré */
	flex-direction: column;		/* pour que ce soit tout sur la même en ligne */
}

/* - FOND ECRAN TERRE QUI TOURNE */
  .video-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* pour que la vidéo couvre tout l'écran sans déformer */
    z-index: -1; /* pour que la vidéo reste en arrière-plan */
  }


  /* LES CASES BIENVENUE - LETTRE AVEC LIGNE DEFERLANTE */
/*=============== VARIABLES CSS ===============*/
:root {
 
  --white-color: hsl(0, 0%, 100%); /* couleur écriture dans bienvenue */

  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: "Poppins", sans-serif;
  --h1-font-size: 1.5rem;
  --normal-font-size: 0.938rem;
}



ul {
  list-style: none;
}

.section__container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 80vh;
}

/*==================== ZigZag Border Animation ====================*/
.zigzag__container {
  --skin-color: #7fed09;
  --dark-black-color: #CA3C66;
  --border-color: #E8AABE;
  position: absolute;
  display: flex;
  gap: 38px;
}

.zigzag__container:nth-child(2) {
  transform: rotate(180deg);
  z-index: -1;
}
.zigzag__item {
  display: block;
  height: 100px;
  width: 100px;
  position: relative;
  overflow: hidden;
  transform: rotate(315deg);
}
.zigzag__item::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--skin-color));
  transform: translateX(-100%);
  animation: animateBefore 4s linear infinite;
  animation-delay: calc(1s * var(--i));
}
@keyframes animateBefore {
  0% {transform: translateX(-100%);}
  25%,100% {transform: translateX(100%);}
}
.zigzag__item::after {
  content: "";
  position: absolute;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, var(--skin-color));
  transform: translateY(-100%);
  animation: animateAfter 4s linear infinite;
  animation-delay: calc(1s * var(--i));
}
@keyframes animateAfter {
  0%,12.5% { transform: translateY(-100%);}
  37.5%,100% {transform: translateY(100%);}
}

.zigzag__item span {
  position: absolute;
  cursor: pointer;
  inset: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--dark-black-color);
  outline: 1px solid var(--border-color);
  transition: 0.3s linear;
}
.zigzag__container:nth-child(1) .zigzag__item span:hover {
  outline-offset: -5px;
}
.zigzag__item span b {
  font-weight: normal;
  font-size: 2em;
  transform: rotate(45deg);
  color: var(--white-color);
}

@media screen and (max-width: 600px) {
  .zigzag__container { gap: 19px;}
  .zigzag__item { height: 50px;width: 50px;}
  .zigzag__item span b {font-size: 1em;}
}


 /* PAGE ACCUEIL */

 .section_accueil{ 
  width: 100%;
  min-height:90vh;
    background-image: url(../images/background.png);
    background-size: cover;
    background-repeat: no-repeat; /* Ceci empêche l'image de se répéter */
    background-position: center; /* Optionnel: Pour centrer l'image */
	
    display: flex;
	justify-content: center;	/* espace égal entre chaque élément, sans espace aux extrémités. */
	align-items: center;		/* vertical = centré */
	flex-direction: column;		/* pour que ce soit tout sur la même en ligne */
	gap: 20px;
   
}

.dispo_accueil{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  line-height: 0.5;
}

.espace_ligne{
    line-height: 95%;
}

 .bouton-bleu{
	background-color:#7a90a4;
	border-radius:0px 15px 0px 15px;
 
	font-size:18px;
	padding:10px; /* pour gérer la hauteur du bouton */
	color:white;
	text-decoration:none;
	font-weight:bold;
}

/* CSS pour icônes Font Awesome */
.logo-line {
  display: flex;
  justify-content:space-between;
  align-items: center;
  font-size: 50px; /* ajustez la taille */
  gap:100px;
  padding:10px
}

.logo-line i {
  color: white;
  cursor: pointer;
  transition: color 0.3s;
}

.logo-line i:hover {
  color:rgb(88, 185, 220); /* bleu au survol */
}

  /* Le cadre lumineux en dessous */
  .glow-box1 {
    width: 90%;
    max-width: 850px;
    min-height: 230px;
    border: 4px solid #01f92f;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 0 20px #ffffff, inset 0 0 20px #fff;
    animation: glow 2s infinite alternate;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #222;
    margin-top: 10px;
  }



/* PAGE MON PARCOURS */
  .section_parcours{
  width: 100%;
  min-height:90vh;
    background-image: url(../images/background.png);
    background-size: cover;
    background-repeat: no-repeat; /* Ceci empêche l'image de se répéter */
    background-position: center; /* Optionnel: Pour centrer l'image */
    display: flex;
	justify-content: center;	/* espace égal entre chaque élément, sans espace aux extrémités. */
	align-items: center;		/* vertical = centré */
	flex-direction: column;		/* pour que ce soit tout sur la même en ligne */
	gap: 10px;
}

.sophie1{
    width: 10px;
    height: auto;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: left;
    border-radius: 50px;  
}

 .sophie-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px;
    text-align: center;
    border: none;
  
  }

.li_parcours{
text-align: left;
font-size:12px ;
color: white;


}
 /* Container pour la ligne de boutons */
  .buttons-container {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin-bottom: 40px;
    flex-wrap: wrap; /* pour le responsive */

  }

  /* Style pour chaque bouton hexagonal */
  .hexagon {
    width: 100px;
    height: 57.74px; /* hauteur pour un hexagone régulier basé sur la largeur */
    background-color: transparent; /* couleur par défaut, modifiée par classes */
    position: relative;
    margin: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: white;
    font-weight: bold;
  
    border: none;
  }

  /* Effet au hover */
  .hexagon:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(255,255,255,0.7);
  }

  /* Pseudo-elements pour créer la forme hexagonale */
  .hexagon::before,
  .hexagon::after {
    content: "";
    position: absolute;
    width: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
  }

  /* Partie supérieure de l'hexagone */
  .hexagon::before {
    top: -28.87px; /* moitié de la hauteur */
    border-bottom: 28.87px solid; /* couleur à définir */
  }

  /* Partie inférieure de l'hexagone */
  .hexagon::after {
    bottom: -28.87px;
    border-top: 28.87px solid; /* couleur à définir */
  }

  /* Couleurs spécifiques */
  .yellow { background-color: #FFEB3B;
  box-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff;}
  .yellow::before { border-bottom-color: #FFEB3B;}
  .yellow::after { border-top-color: #FFEB3B;}


  .orange { background-color: #f36721;
  box-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff;}
  .orange::before { border-bottom-color: #f36721;}
  .orange::after { border-top-color: #f36721;}

  .pink { background-color: #E91E63;
  box-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff;}
  .pink::before { border-bottom-color: #E91E63;}
  .pink::after { border-top-color: #E91E63;}

  

  .green { background-color: #4CAF50;
  box-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff;}
  .green::before { border-bottom-color: #4CAF50;}
  .green::after { border-top-color: #4CAF50;}

  /* Style pour le contenu intérieur du bouton */
  .hex-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px;
    text-align: center;
    border: #3c3cca;
  
  }

  /* Style pour les icônes */
  .hex-icon {
    font-size: 24px;
    margin-top: 7px;
  }


.image-container img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* ou cover si tu veux remplir tout l'espace */
}

  /* BOUTON SPECIFIQUE CV */
/* Style du bouton */
  .cv-button {
    padding: 12px 24px;
    background-color: #4CAF50; /* Vert agréable */
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
  }

  .cv-button:hover {
    background-color: #45a049;
  }


@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0); 
  }
  40% {
    transform: translateY(10px);
  }
  60% {
    transform: translateY(5px);
  }
}




/* PAGE PROJET -PORTFOLIO */
.section_portfolio{ 
  width: 100%;
  min-height:90vh;
    background-image: url(../images/background.png);
    background-size: cover;
    background-repeat: no-repeat; /* Ceci empêche l'image de se répéter */
    background-position: center; /* Optionnel: Pour centrer l'image */
    display: flex;
	justify-content: center;	/* espace égal entre chaque élément, sans espace aux extrémités. */
	align-items: center;		/* vertical = centré */
	flex-direction: column;		/* pour que ce soit tout sur la même en ligne */
}

/* page 1 */

gallery {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 5px;
              border-radius: 20px;
        }

        .item {
            flex: 1 1 calc(25% - 20px);
            max-width: calc(25% - 20px);
            box-sizing: border-box;
            text-align: center;

            padding: 10px;
            border-radius: 8px;
            transition: transform 0.2s;
        }

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

        .item img {
            width: 100%;
            height: 200px;
              border-radius: 20px;
        }

        .title {
            margin-top: 10px;
            font-weight: bold;
        }

/* page 2 */
.photos {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
        }

        .photo {
            flex: 1 1 calc(25% - 20px);
            max-width: calc(25% - 20px);
            box-sizing: border-box;
            background-color: #fff;
            padding: 10px;
            border-radius: 8px;
            text-align: center;
        }

        .photo img {
            width: 100%;
            height: auto;
            border-radius: 4px;
        }

        /* Cadre explicatif */
        .explanation {
            margin-top: 30px;
            padding: 15px;
            border: 2px solid #333;
            border-radius: 8px;
            background-color: #fff;
        }

.dispo_cadre{
  display: flex;
justify-content: center;
}
  /* Le cadre lumineux en dessous */
  .glow-box {
    width: 90%;
    max-width: 1300px;
    min-height: 400px;
    border: 4px solid #01f92f;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 0 20px #ffffff, inset 0 0 20px #fff;
    animation: glow 2s infinite alternate;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #222;
    margin-top: 10px;
  }

  @keyframes glow {
    from {box-shadow: 0 0 20px #fff, inset 0 0 20px #fff;}
    to {box-shadow: 0 0 40px #fff, inset 0 0 40px #fff;}
  }





/* PAGE DIVERS */
 .section_divers{ 
  width: 100%;
  min-height:100vh;
    background-image: url(../images/background.png);
    background-size: cover;
    background-repeat: no-repeat; /* Ceci empêche l'image de se répéter */
    background-position: center; /* Optionnel: Pour centrer l'image */
    display: flex;
	justify-content: center;	/* espace égal entre chaque élément, sans espace aux extrémités. */
	align-items: center;		/* vertical = centré */
	flex-direction: column;		/* pour que ce soit tout sur la même en ligne */
	gap: 20px;

}

.dispo_diversb{
  display: flex;
  justify-content: center;
}

  /* Photo centrée */
  .center-image {
    display: flex;
    justify-content: center;
    margin: 20px 0;
  }

  .center-image img {
    width: 70px;
    height: 70px;
    border: 2px solid #fff;
    border-radius: 50px;
  }

  /* Cadres interactifs */
  .frames-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 60px;
    margin: 30px; /* marge entre les blocs */
  }

  .frame {
    width: 150px;
    height: 150px;
    background-color: black;
    border: 2px solid #fff;
    border-radius: 8px;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: background-color 0.3s;
  }

  .frame:hover {
    background-color: rgba(216, 128, 128, 0.4);
  }

  /* Texte dans les cadres */
  .frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Cadre de texte qui apparaît après clic */
  #textBox {
    display: none;
    margin: 10px auto;
    width: 80%;
    max-width: 1200px;
    min-height: 100px ;
    background-color: rgba(0,0,0,0.8);
    padding: 10px;
    border-radius: 10px;
    overflow-y: auto;
  }
 
  .p_about {
    
    font-family: "Libre Baskerville", serif;
    color: white;
    font-size: 12px;
   text-align: left;
}
  button {
    padding: 15px 30px;
    font-size: 18px;
    border: none;
    border-radius: 20px;
    background-color: #3c3cca;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s;
  }

  button:hover {
    background-color: #A7E0E0;
    border-radius:20px ;
    color: #000;
  }

  /* pour que le texte apparaise sur les boutons après le clic */
 

  #monTexte {
            display: none; /* Le texte est caché au départ */
            margin-top: 20px;
            font-size: 16px;
            color: white;
        }


/* Icones lumineux */
/* Styles pour les icônes roses lumineuses */
  .icon-rose {
    font-size: 50px;
    margin: 20px;
    color: #ff69b4; /* rose */
    text-shadow: 0 0 10px #ff69b4, 0 0 20px #ff69b4;
    transition: all 0.3s ease;
  }

  /* Styles pour les icônes bleues lumineuses */
  .icon-blue {
    font-size: 50px;
    margin: 20px;
    color: #00ffff; /* bleu lumineux */
    text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff;
    transition: all 0.3s ease;
  }

  /* Icone chapeau de cowboy lumineux bleu */
  /* Style pour l'icône */
  .cowboy-hat {
    width: 100px;
    height: 100px;
    fill: #00ffff; /* Bleu lumineux */
    stroke: #00ffff;
    stroke-width: 2px;
    animation: glow 1.5s infinite alternate;
  }

  /* Effet de glow pour le bleu lumineux */
  @keyframes glow {
    from {
      filter: drop-shadow(0 0 5px #00ffff)
              drop-shadow(0 0 10px #00ffff);
    }
    to {
      filter: drop-shadow(0 0 15px #00ffff)
              drop-shadow(0 0 20px #00ffff);
    }
  }





/* PAGE FORMATION ET DIPLOME */
.section_formations{
   width: 100%;
  min-height:90vh ;
background-image: url(../images/background.png);
    background-size: cover;
    background-repeat: no-repeat; /* Ceci empêche l'image de se répéter */
    background-position: center; /* Optionnel: Pour centrer l'image */
    display: flex;
	justify-content: center;	/* espace égal entre chaque élément, sans espace aux extrémités. */
	align-items: center;		/* vertical = centré */
	flex-direction: column;		/* pour que ce soit tout sur la même en ligne */
	gap: 40px; 	
}

 .dispo_formations{
display:flex ;
justify-content: center;
}

/* les années */
time {
    background-color: #5df804;
    color: blue;
    border-radius: 0 10px 0 10px;
    padding: 0.5em;
    /* on va diminuer la police de la police  */
    font-size: 1rem;
    margin-top:50px ;
}

.h1_formations {
    font-family: "Federo", sans-serif;
    color: white;
    font-size: 50px;
    text-align: center;   
}
.h3_formations{
    font-family: "Federo", sans-serif;
    color: rgb(168, 250, 3);
    /* pour augmenter la police car la taille de départ est trop petite */
    font-size: 20px;
   /* ajouter une ligne en dessous du texte */
   text-align:left;
}
.p_formations{
    font-family: "Libre Baskerville", serif;
    color: pink;
    font-size: 16px; 
    text-align:left;
}

.li1 {
    width: 100%;
    list-style: none; /* il faut désactiver l'apparition des puces des li */
}

/* BULLES */
.container_bulle {
  position: relative;
  display: flex;
  align-content: center;
  justify-content: center;
  background: {
    image: linear-gradient(to bottom,  #00c9ff 0%, #92fe9d 100%), url(https://images.unsplash.com/photo-1502726299822-6f583f972e02);
    blend-mode: multiply;
    size: cover;
  }
  overflow: hidden;
}

.bubbles-container {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    max-width: 15rem;
    transform: translateX(-50%);
  opacity: 0.75;
  overflow: visible;
}

.bubbles {
  width: 100%;
  height: auto;
  circle {stroke: white;fill: none;
  box-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff;}
  > g > g:nth-of-type(3n) circle {stroke: #87f5fb;}
  > g > g:nth-of-type(4n) circle {stroke: #51b998}
}

.bubbles-large {
  overflow: visible;
  > g {
    transform: translateY(2048px);
    opacity: 0;
    will-change: transform, opacity;
  }
  g:nth-of-type(1) {
    animation: up 6.5s infinite;
    g {transform: translateX(350px);}
    circle {animation: wobble 3s infinite ease-in-out;}
  }
  
  g:nth-of-type(2) {
    animation: up 5.25s 250ms infinite;
    g {transform: translateX(450px);}
    circle {animation: wobble 3s infinite ease-in-out;}
  }
  
  g:nth-of-type(3) {
    animation: up 6s 750ms infinite;
    g {transform: translateX(700px);}
    circle {animation: wobble 3s infinite ease-in-out;}
  }
  
  g:nth-of-type(4) {
    animation: up 5.5s 1.5s infinite;
    g {transform: translateX(500px);}
    circle {animation: wobble 3s infinite ease-in-out;}
  }

  g:nth-of-type(5) {animation: up 6.5s 4s infinite;
    g {transform: translateX(675px);}
    circle {animation: wobble 3s infinite ease-in-out;}
  }
}

.bubbles-small {
  overflow: visible;
  > g {
    transform: translateY(2048px);
    opacity: 0;
    will-change: transform, opacity;
  }

  g circle {transform: scale(0);}

  g:nth-of-type(1) {animation: up 5.25s infinite;
    g {transform: translateX(350px);}
    circle {animation: wobble 3s infinite ease-in-out;}
  }

  g:nth-of-type(2) {
    animation: up 5.75s infinite;
    g {transform: translateX(750px);}
    circle {animation: wobble 3s infinite ease-in-out;}
  }

  g:nth-of-type(3) {
    animation: up 5.25s 250ms infinite;
    g {transform: translateX(350px);}
    circle {animation: wobble 3s 250ms infinite ease-in-out;}
  }

  g:nth-of-type(4) {
    animation: up 5.75s 325ms infinite;
    g {transform: translateX(180px);}
    circle {animation: wobble 3s 325ms infinite ease-in-out;}
  }

  g:nth-of-type(5) {
    animation: up 6s 125ms infinite;
    g {transform: translateX(350px);}
    circle {animation: wobble 3s 250ms infinite ease-in-out;}
  }

  g:nth-of-type(6) {
    animation: up 5.13s 250ms infinite;
    g {transform: translateX(650px);}
    circle {animation: wobble 3s 125ms infinite ease-in-out;}
  }

  g:nth-of-type(7) {
    animation: up 6.25s 350ms infinite;
    g {transform: translateX(480px);}
    circle {animation: wobble 3s 325ms infinite ease-in-out;}
  }
  
  g:nth-of-type(8) {
    animation: up 7s 200ms infinite;
    g {transform: translateX(330px);}
    circle {animation: wobble 3s 325ms infinite ease-in-out;}
  }

  g:nth-of-type(9) {
    animation: up 6.25s 233ms infinite;
    g {transform: translateX(230px);}
    circle {animation: wobble 3s 275ms infinite ease-in-out;}
  }
  
  g:nth-of-type(10) {
    animation: up 6s 900ms infinite;
    g {transform: translateX(730px);}
    circle {animation: wobble 2s 905ms infinite ease-in-out;}
  } 
}

@keyframes wobble {
  33% {transform: translateX(-50px);}
  66% {transform: translateX(50px);}
  }

@keyframes up {
0% {opacity: 0;}
10%, 90% {opacity: 1;}
100% {opacity: 0;transform: translateY(-1024px);}
  }




/* PAGE SKILLS */

.section_skills1{
width: 100%;
  min-height:100vh;
    background-image: url(../images/background.png);
    background-size: cover;
    background-repeat: no-repeat; /* Ceci empêche l'image de se répéter */
    background-position: center; /* Optionnel: Pour centrer l'image */
    display: flex;
	justify-content: center;	/* espace égal entre chaque élément, sans espace aux extrémités. */
	align-items: center;		/* vertical = centré */
	flex-direction: column;		/* pour que ce soit tout sur la même en ligne */
	gap: 10px;
}


.dispo_skill{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 30px;
  margin-bottom:10px ;
}


 /* Le cadre lumineux en dessous */
  .glow-box2 {
    width: 90%;
    max-width: 1000px;
    min-width: 1000px;
    min-height: 400px;
    border: 4px solid #01f92f;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 0 20px #03f3f7, inset 0 0 20px #04d3f8;
    animation: glow 3s infinite alternate;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #222;
    margin-top: 10px;
  }

  @keyframes glow {
    from {box-shadow: 0 0 20px hsl(178, 99%, 49%), inset 0 0 20px #03d8f9;}
    to {box-shadow: 0 0 40px #310028, inset 0 0 40px #02d7ef;}
  }

/* Styles pour l'accordéon */
  .accordion {
    width: 100%;
    max-width: 1000px;
    min-width:900px ;
    margin: 0 auto;
  }

  .accordion-item {
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 10px;
    overflow: hidden;
  }

  .accordion-header {
    background-color: #A7E0E0;
    cursor: pointer;
    padding: 15px;
    font-weight: bold;
    transition: background-color 0.3s;
  }

  .accordion-header:hover {
    background-color: #054aca;
    color: white;
  }

  .accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
    background-color: #fff;
    padding: 0 15px;
  }

  /* Style pour la liste de logiciels */
  .software-list {
    list-style: none;
    padding: 10px 0;
    margin: 0;
  }

  .software-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }

  .software-name {
    flex: 1;
  }

  /* Barre de niveau */
  .level-bar {
    background-color: #ddd;
    width: 50%;
    height: 10px;
    border-radius: 5px;
    margin-left: 10px;
    position: relative;
  }

  .level-fill {
    background-color: #4CAF50;
    height: 100%;
    width: 0%;
    border-radius: 5px;
    transition: width 1s;
  }

  /* Container principal */
  .container1 {
     background-color: #000;
    margin: 0px auto;
    padding: 20px;
    max-width: 1000px;
    min-height:130px ;
    max-height:130px ;
    border-radius: 20px;
  }

  /* Titre de chaque section */
  .section-title {
      background-color: #000;
    font-size: 1.8em;
    margin-bottom: 15px;
    color: yellow;
    text-shadow: 1px 1px 2px #000;
  }

  /* Titre de chaque section */
  .section-title1 {
      background-color: #000;
    font-size: 1.8em;
    margin-bottom: 15px;
    color: orangered;
    text-shadow: 1px 1px 2px #000;
  }

.section-title2 {
      background-color: #000;
    font-size: 1.8em;
    margin-bottom: 15px;
    color: rgb(50, 200, 205);
    text-shadow: 1px 1px 2px #000;
  }
  /* Grille pour les cadres */
  .grid {
      background-color: #000;
    display: grid;
    gap: 10px;
  }

  /* Styles pour chaque cadre */
  .frame1 {
    background-color: #000;
    border-radius: 8px;
    aspect-ratio: 1 / 1; /* Carré pour les images */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  /* Image dans le cadre */
  .frame1 img {
      background-color: #000;
    width: 60px;
    max-width:60px ;
    height: 60px;
    min-height: 60px;
    object-fit: cover;
  }

.p_accord1{
  color:rgb(4, 4, 137);
  font-size: 12px;
  font-style: italic;
}

.p_accord2{
  color:rgb(207, 3, 115);
  font-size: 12px;
  font-style: italic;
}





/* PAGE PORTFOLIO */
.section_portfolio{ 
  width: 100%;
  min-height:90vh;
  color:white;
    background-image: url(../images/background.png);
    background-size: cover;
    background-repeat: no-repeat; /* Ceci empêche l'image de se répéter */
    background-position: center; /* Optionnel: Pour centrer l'image */
    display: flex;
	justify-content: center;	/* espace égal entre chaque élément, sans espace aux extrémités. */
	align-items: center;		/* vertical = centré */
	flex-direction: column;		/* pour que ce soit tout sur la même en ligne */
  gap: 20px;
  padding-bottom: 20px;
}

/* Page 1 */
.gallery1 {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
  }

  .item1 {
    width: 600px;
    min-height:100px;
    text-align: center;
  }

  .item1 img {
    width: 100%;
   
    min-height: 240px;
    max-height:240px;
    cursor: pointer;
    object-fit: contain; /* conserve les proportions sans déformer */
    border-radius: 10px;
    transition: transform 0.2s;
  }

  .item1 img:hover {
    transform: scale(1.3);
    border-radius:10px ;
  }

  .title {
    margin-top: 8px;
    font-weight: bold;
  }

/* Page 2 */
.gallery2 {
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: center;
  }

  .item2 {
    width: 400px;
    min-height:200px ;
    text-align: center;
  }

  .item2 img {
    width: 100%;
    height: 200px;
    cursor: pointer;
    border-radius: 8px;
    transition: transform 0.2s;
  }

  .item2 img:hover {
    transform: scale(1.8);
  }

  /* Cadre explicatif */
  .explanation {
    background-color: #000;
    margin-top: 30px;
    padding: 15px;
    border: 2px solid #060606;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Version agrandie */
  .explanation.expanded {
    transform: scale(1.8);
    background-color: #f0f0f0;
  }

.section_formulaire{
  width: 100%;
  min-height:100vh;
  background-image: url(../images/background.png);
  background-size: cover;
  background-repeat: no-repeat; /* Ceci empêche l'image de se répéter */
  background-position: center; /* Optionnel: Pour centrer l'image */
  display: flex;
	justify-content: center;	/* espace égal entre chaque élément, sans espace aux extrémités. */
	align-items: center;		/* vertical = centré */
	flex-direction: column;		/* pour que ce soit tout sur la même en ligne */
	gap:10px;
  padding-bottom:20px ;	
}






/* PAGE CONTACT */
.section_contact{
  width: 100%;
  min-height:100vh;
  background-image: url(../images/background.png);
  background-size: cover;
  background-repeat: no-repeat; /* Ceci empêche l'image de se répéter */
  background-position: center; /* Optionnel: Pour centrer l'image */
  display: flex;
	justify-content: center;	/* espace égal entre chaque élément, sans espace aux extrémités. */
	align-items: center;		/* vertical = centré */
	flex-direction: column;		/* pour que ce soit tout sur la même en ligne */
	gap:10px;
  padding-bottom:20px ;	
}
.dispo_contact{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.background-container {
    position: relative;
    width: 100%;
    min-height: 80%;
    overflow: hidden;
  }

  /* Le contenu de votre page */
  .contenu_contact {
    position: relative;
    z-index: 2; /* devant l'image de fond */
    padding: 20px;
    color: #fff; /* couleur du texte, par exemple */
  }

.h1_contact {
    font-family: "Federo", sans-serif;
    color: white;
    font-size: 50px;
    text-align: center;} 

.p_contact1{
    font-family: "Merienda", cursive;
    color:white;
    /* pour augmenter la police car la taille de départ est trop petite */
    font-size: 16px;
   /* ajouter une ligne en dessous du texte */
   text-align: center;
}

.h3_contact{
    font-family: "Pompiere", sans-serif;
    color:  #f5fafb;
    font-size: 30px;
   text-align: center;
}

.container_contact {
    display: flex;
    justify-content:space-evenly;
    gap: 20px;
    flex-wrap: wrap;
  }
.container {
    display: flex;
    justify-content:space-evenly;
    gap: 20px;
    flex-wrap: wrap;
  }

  
  .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
  }

  .text {
    text-align: center;
    font-size: 18px;
    color: #030303;
    line-height: 1.4;
  }


div.at-container {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	

  .at-item {
		width: 230px;
    height: 180px;
    background: linear-gradient(135deg, #f476d0 0%, #a1c6f9 100%);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;

			/* shorthand
		animation: slit-in-horizontal 1s linear 0s 1 normal none;*/
		animation-name: slit-in-horizontal;
		animation-duration: 1s;
		animation-timing-function: linear;
		animation-delay: 0s;
		animation-iteration-count: 1;
		animation-direction: normal;
		animation-fill-mode: none;	
	}

  .at-item1 {
		width: 230px;
    height: 180px;
    background: linear-gradient(135deg, #f4dbed 0%, #e8a6f9 100%);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;

			/* shorthand
		animation: slit-in-horizontal 1s linear 0s 1 normal none;*/
		animation-name: slit-in-horizontal;
		animation-duration: 1s;
		animation-timing-function: linear;
		animation-delay: 0s;
		animation-iteration-count: 1;
		animation-direction: normal;
		animation-fill-mode: none;	
	}

  .at-item2 {
		width: 230px;
    height: 180px;
    background: linear-gradient(135deg, #b9eaed 0%, #66a6ff 100%);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;

			/* shorthand
		animation: slit-in-horizontal 1s linear 0s 1 normal none;*/
		animation-name: slit-in-horizontal;
		animation-duration: 1s;
		animation-timing-function: linear;
		animation-delay: 0s;
		animation-iteration-count: 1;
		animation-direction: normal;
		animation-fill-mode: none;	
	}

	@keyframes slit-in-horizontal {
			
		0% {transform:translateZ(-800px) rotateX(90deg);opacity:0;}
		50% {transform:translateZ(-160px) rotateX(87deg);opacity:1;}
		100% {transform:translateZ(0) rotateX(0);}
	}

.icon-container {
    display: flex;
    align-items: center;
    gap: 15px; /* espace entre les icônes */
  }

  /* Styles pour les icônes */
  .icon1 {
    display: inline-block;
    vertical-align: middle;
    color:black ;
  }
  
  /* Styles pour les icônes */
  .icon {
    display: inline-block;
    vertical-align: middle;
  }

  /* ICON RESEAUX SOCIAUX */
  /* Ajustement de la taille */
  .icon-mail {
    width: 30px;
    height: 30px;
  }

  .icon-phone {
    width: 20px;
    height: 20px;
  }

  .icon-address {
    width: 22px;
    height: 22px;
  }

  .social-icons {
    display: flex;
    gap: 20px;
  }
  .icon-link {
    display: inline-block;
    width: 60px; /* Ajustez la taille selon vos besoins */
    height: 50px;
  }
  .icon-link svg {
    width: 100%;
    height: 100%;
    fill: white; /* Couleur des icônes, modifiable */
    box-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff;
    transition: fill 0.3s;
  }
  .icon-link:hover svg {
    fill: #00ffff; /* Couleur au survol, modifiable */
    box-shadow: 0 0 10px #15ff00, 0 0 20px #15ff00, 0 0 30px #15ff00;
  }





/* PAGE Politiques de confidentialité et Mentions Légale  */

.section_RGDA{
  background-color:rgb(194, 193, 193) ;
  width: 100%;
  display: flex;
 align-items: center;
  flex-direction: column;
gap: 20px;
padding: 60px;}

.h1_rgda{
 display: flex;
 text-align: center;
 color: #110262;
 text-decoration: solid;
}

.p_rgda{
  font-size: 14px;
 display: flex;
 text-align: start;
 color: black;
 

}




/* RESPONSIVE sur Mobile */
/* Responsive : pour écran ≤ 390px */
@media (max-width: 390px) {
  
  .nav-icons {display: none;} /* Cacher la navigation classique */
  
  .menu-burger { display: block;}/* Afficher le menu burger */

  .mobile-menu.show {display: flex;}  /* Afficher le menu mobile quand activé */


   /* TEXTE BIENVENUE A ENLEVER POUR TELEPHONE */
    :root {--normal-font-size: 1rem;}
    .zigzag__container{display: none;}

}

/* FOOTER */
/* Responsive pour les écrans jusqu'à 768px */
@media (max-width: 390px) {
  .footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .footer-left,
  .footer-right {
    width: 100%;
    margin: 10px 0;
  }
  .footer-left {
    flex-direction: column;
    gap: 10px;
  }
}



/* Responsive adjustments */
  @media(max-width: 390px) {
    .card {height: auto;}
  }


/* Responsive Parcours */

  @media(max-width: 390px) {
    .hexagon {
      width: 80px;
      height: 46.19px; 
    }
    .hexagon::before,
    .hexagon::after {
      border-left: 40px solid transparent;
      border-right: 40px solid transparent;
    }
    .hexagon::before {border-bottom: 23.09px solid;}
    .hexagon::after {border-top: 23.09px solid;}
    .hex-icon {font-size: 20px;}
    #textFrame {padding: 15px;}
    #textFrame p {font-size: 1em;}
  }


/* Page portfolio */


  @media (max-width: 390px) {
    .item {
      width: 45%;
    }
  }


/* Page Skills */
/* Responsive : ajuster la grille selon la section */
  /* Frontend / Backend : 2 colonnes sur 2 lignes (donc 2 colonnes) */
  .frontend-backend {grid-template-columns: repeat(2, 1fr);}

  /* Design : 2 colonnes */
  .design {grid-template-columns: repeat(2, 1fr);}

  /* CMS : 3 colonnes */
  .cms {grid-template-columns: repeat(3, 1fr);}

  /* Outils : 5 colonnes */
  .outils {grid-template-columns: repeat(5, 1fr);}

  /* RGPD : 4 colonnes */
  .rgpd {grid-template-columns: repeat(4, 1fr);}

  /* ERP & Bureautique : 5 colonnes */
  .erp-bureautique {grid-template-columns: repeat(5, 1fr);}

  /* Media queries pour adaptabilité */
  @media(max-width: 768px) {
    /* Réduire le nombre de colonnes pour petits écrans */
    .frontend-backend {grid-template-columns: 1fr;}
    .design {grid-template-columns: 1fr;}
    .cms {grid-template-columns: 1fr;}
    .outils {grid-template-columns: 2fr;}
    .rgpd {grid-template-columns: 2fr;}
    .erp-bureautique {grid-template-columns: 2fr;}
  }

@media (max-width: 390px) {
  /* Ajustez la taille des textes, marges, paddings, etc. */
  .dispo_skill {
    padding: 10px;
  }
  .accordion {
    font-size: 14px;
  }
  /* Si vous avez des colonnes ou des flexbox, assurez-vous qu'ils s'adaptent */
  .glow-box2 {
    padding: 10px;
  }
  /* Ajustez la largeur des barres de niveau si nécessaire */
  .level-bar {
    width: 100% !important;
  }
  /* Par exemple, pour les boutons */
  .neon-button {
    width: 100%;
    font-size: 16px;
  }
}





  /* Responsive */
        @media (max-width: 390px) {
            .item {
                flex: 1 1 calc(50% - 20px);
                max-width: calc(50% - 20px);
                 flex: 1 1 100%;
                max-width: 100%;
            }
        }

        @media (max-width: 390px) {
  /* Ajustements pour la section_skills */
  .section_skills {
    flex-direction: column; /* Si besoin, pour empiler les éléments verticalement */
    gap: 10px; /* Réduire l'espacement si nécessaire */
  }

  /* Ajustements pour container1 */
  .container1 {
    max-width: 90%; /* Pour qu'il prenne moins de place sur petit écran */
    padding: 10px;
  }

  /* Ajustements pour les titres */
  .section-title, .section-title1, .section-title2 {
    font-size: 1.4em; /* Réduire la taille du texte */
  }

  /* Grille pour les cadres */
  .grid {
    grid-template-columns: 1fr 1fr; /* Deux colonnes pour mieux s'adapter */
    gap: 8px;
  }

  /* Ajustements pour les cadres d'images */
  .frame1 {
    aspect-ratio: auto; /* Permet de s'adapter à la nouvelle disposition */
  }

  .frame1 img {
    width: 40px; /* Réduire la taille des images */
    height: 40px;
  }

  /* Pour la section_divers */
  .section_divers {
    flex-direction: column; /* Empiler verticalement si nécessaire */
    gap: 10px;
  }

  /* Ajustements pour dispo_diversb */
  .dispo_diversb {
    flex-direction: column; /* Si vous souhaitez empiler les éléments */
  }
}


  /* Responsive */
  @media (max-width: 390px) {
    body {
      padding: 10px;
    }
  }



  /* animation page pré acceuil avec javascript */
/* COULEUR ANIMATION DU BACKGROUND dégradé de couleur- ALLER CHERCHER SUR animation fond ecran https://animated-gradient-background-generator.netlify.app/ */
 .gradient-background {
  background: linear-gradient(293deg,#ca3c66,#db7999,#efb7ca,#9bf9f9,#41a1a1);
  background-size: 300% 300%;
  animation: gradient-animation 10s ease infinite;
}

@keyframes gradient-animation {
  0% {background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
  100% {background-position: 0% 50%;}
}
/* Fin couleur Background */

 /* Pour le faire partir d'en haut à l'ouverture de la page, pour aller vers le bas */

#Blocdate{
    margin-top: -200vh;
    transition: 0.5s;
}