/* styles.css */
@font-face {
  font-family: 'MaPolicePerso';
  src:
    url('fonts/MaPolicePerso.woff2') format('woff2'),
    url('fonts/MaPolicePerso.woff') format('woff'),
    url('fonts/MaPolicePerso.otf') format('opentype'),
    url('fonts/MaPolicePerso.ttf') format('truetype'),
    url('fonts/MaPolicePerso.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* bonus: perf web moderne */
}

html, body {
  font-family: 'MaPolicePerso', 'Arial', sans-serif;
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #ecf0f1;
  color: #2c3e50;
  /*overflow: hidden; /* Masquer les débordements */
}

header {
  background-color: #ecf0f1;/*#2c3e50;*/
  color: white;
  /*margin-left: 10%;*/
  padding: 1rem 0;
  
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  z-index :200;
}

nav ul {
  display: flex;
  
  justify-content : flex-start;
  list-style: none;
  margin: 0;
  
  padding-left: 10%;
}

nav ul li {
  margin: 0 1rem;
}

nav ul li a {
  color: #2c3e50;/*white;*/
  text-decoration: none; /* Supprime le soulignement */
}

nav ul li a.active {
  text-decoration: none; /* Supprime soulignement pour le lien actif */
}

nav a {
  color: white;
  text-decoration: none;
  /*font-weight: bold;*/
  transition: color 0.3s;
}

nav a:hover {
  color: #2980b9; /* Changement de couleur au survol */
}

nav a.active {
  color: #2980b9; /* Même couleur que le survol pour indiquer la page active */
  border-bottom: 2px solid #2980b9; /* Une petite bordure en bas pour plus de visibilité */
}

button {
  transition: background 0.3s;
}

/* Style du médaillon */
.medaillon {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.medaillon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


main {
  flex: 1;
  padding: 2rem;
  
  
  
  max-width: 800px;
  margin: 0 auto;
      /*padding-bottom: 80px;  Ex : la hauteur de ton footer, ajuste selon ton cas */

}

mainp {
  flex: 1;
  /*padding: 2rem;*/
  max-width: 1500px;
  margin: 0 auto;
  /*overflow : hidden;*/
  
}

.titre{
    display : flex;
    justify-content : space-evenly;
    align-items : center;
    
}

.global{
    display : flex;
    width : 100%;
    /*align-items : center;*/
    
}




h1 {
  text-align: center;
  margin-bottom: 1.5rem;
}

h2 {
  text-align: center;
  margin-bottom: 1.5rem;
}

video-container, #contact-form {
  margin: 2rem 0;
}

/*.portfolio-grid {
   margin: 1rem 0; 
}
*/

.video-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: 90%;
  /*overflow: hidden; /* Masquer les débordements */
}

.video-container video {
  width: 50vw;
  height: 50vh;
  min-width: 300px; /* Minimum width */
  min-height: 300px; /* Minimum height */
  object-fit: cover;
  /*overflow: hidden; /* Masquer les débordements */
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* styles.css */

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(200px, 1fr));
  /*grid-template-columns: repeat(5, 1fr);*/
  gap: 1rem;
  justify-items: center;
  width : 100%;
  margin : 0 auto;

overflow-y: scroll; /* le contenu peut défiler, la barre existe (mais on va la cacher) */
  scrollbar-width: none;    /* pour Firefox */

  /*overflow : hidden;*/
  
}
.portfolio-grid::-webkit-scrollbar {
  display: none;
}



.portfolio-grid figure {
  
  position : relative;
  
  z-index : 1;
  
  aspect-ratio: 0.9/1;
  width: 100%;
  max-width: 200px;
  max-height : 250px;
  background: #2c3e50;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  overflow: visible;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
}

/*.portfolio-grid figure {
  flex: 1 1 calc(33.33% - 2rem);
}*/

.portfolio-grid img {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}

.portfolio-grid figure:hover,
.portfolio-grid figure:focus-within
{
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  
  z-index: 99; /* au survol/au focus clavier */
  
}

.portfolio-grid figcaption {
  /*display : flex;*/
  
  border-radius: 10px;
  
  height : 30%;
  padding: 0.5rem;
  background: #2c3e50;
  color: white;
  font-weight: bold;
  font-size : 16px;
  align-items : center;
  
}

.portfolio-grid figcaption:hover {
  padding: 0.5rem;
  background: #2980b9;
  color: white;
  font-weight: bold;
}

.portfolio-grid a {
  color: inherit;
  text-decoration: none; /* Supprime le soulignement */
}
/* styles.css */

#chat-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#chatbox {
  width: 100%;
  max-width: 600px;
  height: 400px;
  border: 1px solid #ccc;
  margin-bottom: 1rem;
  overflow-y: scroll;
  background: white;
  padding: 1rem;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.user-message, .bot-message {
  margin: 1rem 0;
  padding: 1rem;
  border-radius: 10px;
  max-width: 70%;
}

.user-message {
  
  font-family: inherit;
  
  align-self: flex-end;
  background: #3498db;
  color: white;
}

.bot-message {
  
  font-family: inherit;
  
  align-self: flex-start;
  background: #e0e0e0;
}

/* styles.css */

form {
  background: white;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  width: 90%; /* Utiliser 70% de la largeur du conteneur parent */
  max-width: 800px; /* Limite maximale de largeur */
  min-width: 300px; /* Limite minimale de largeur */
  margin: 0 auto; /* Centrer le formulaire */
}

form > div {
  margin-bottom: 1rem;
}

form label {
  
  font-family: inherit;
  
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
}

form input, form textarea {
  
  font-family: inherit;
  
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1rem;
  box-sizing: border-box;
}

form textarea {
  height: 150px;
  resize: vertical;
}

form button {
  width: 100%;
  background: #007BFF;
  border: none;
  color: white;
  padding: 0.75rem;
  
  font-family: inherit;
  
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  border-radius: 5px;
}

form button:hover {
  background: #2c3e50;
}

button {
  background: #007BFF;
  padding: 0.75rem 1.5rem;
  
  font-family: inherit;
  
  font-size: 1.5rem;
  font-weight: bold;
  border: none;
  color: white;
  cursor: pointer;
  border-radius: 5px;
  transition: background 0.3s ease;
}

button:hover {
  background: #2c3e50;
}

.portfolio-grid figcaption i {
  margin-right: 8px; /* Espace entre l'icône et le texte */
  
  /*color: #333; /* Couleur de l'icône */
}

figcaption .icon1 {
  width: 70px; /* Ajustez la taille selon vos besoins */
  height: auto;
  margin-right: 8px;
}

figcaption .icon4 {
  width: 150px; /* Ajustez la taille selon vos besoins */
  height: auto;
  margin-right: 8px;
}

figcaption .icon2 {
  width: 50px; /* Ajustez la taille selon vos besoins */
  height: auto;
  margin-right: 8px;
}

figcaption .icon3 {
  width: 70px; /* Ajustez la taille selon vos besoins */
  height: auto;
  margin-right: 8px;
}

figcaption .icon7 {
  width: 90px; /* Ajustez la taille selon vos besoins */
  height: auto;
  margin-right: 8px;
}

figcaption .icon8 {
  width: 150px; /* Ajustez la taille selon vos besoins */
  height: auto;
  
}

figcaption .icon9 {
  width: 110px; /* Ajustez la taille selon vos besoins */
  height: auto;
  margin-right: 8px;
}

figcaption .icon10 {
  width: 125px; /* Ajustez la taille selon vos besoins */
  height: auto;
  margin-right: 8px;
}
/* Ajoutez en bas de votre styles.css */

/*Ombres portées sur image dans les boîtes*/
.img-ombre {
  position: relative;
  display: inline-block;
  width: 100%;
  overflow: visible;
}

.img-ombre img {
  display: block;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  
  transition: transform 0.4s cubic-bezier(.38,1.02,.51,.92); /* anime le zoom */
}

.img-ombre::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 15px; /* ombre plus ou moins haute */
  background: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0));
  pointer-events: none;
  z-index: 2;
}

.img-ombre:hover::before,
.portfolio-grid figure:hover .img-ombre::before {
  opacity: 0;
}


/* L’image « s’agrandit » au hover */
.img-ombre:hover img {
  transform: scale(1.7); /* 1.16 = 16% plus grand, tu peux monter à 1.25... */
  z-index: 99;
  
}



.ronds-navigation {
  display: flex;
  
  position : relative;
  
  justify-content: center;   /* centre horizontalement */
  gap: 24px;                 /* espace entre les ronds */
  list-style: none;          /* enlève les puces */
  padding: 5px 0 80px 0;    /* espace autour */
  margin: 0;
}

.ronds-navigation li a {
  display: flex;
  
  align-items : center;
  
  width: 90px;
  height: 90px;
  /*background-color: #a3cef1;  couleur pastel, à changer par rond */
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0,0,0,0.10);
  text-indent: -9999px;      /* cache le texte, visible pour lecteurs d’écran */
  transition: transform 0.2s, background-color 0.2s;
  border: 2px solid #fff;
  
  font-size: 1.5em;
  color: #333;
  text-indent: 0;     /* on montre le texte */
  text-align: center;
  
  justify-content : center;
  
  line-height: 50px;  /* verticalement au centre */
  font-weight: bold;
  
  text-decoration: none;
  
}

.ronds-navigation li a:hover,
.ronds-navigation li a:focus
{
  transform: scale(1.10);
  background-color: #ecf0f1; /* couleur au survol */
  border: 2px solid #2c3e50;
}

.rond-accueil a{ background-color: #B7E7A7;}
.rond-portfolio a{ background-color: #FFD6BA;}
.rond-chat a{ background-color: #A7C7E7; }
.rond-CV a{ background-color: #D6C6F6;}
.rond-contact a{ background-color: #F6CED8;}

.ronds-navigation li a.active{
   transform: scale(1.10);
  
  border: 3px solid #2c3e50; 
}






.ronds-navigation_bis {
  position :fixed;
  display: flex;
  flex-direction : column;
  justify-content: center;   /* centre horizontalement */
  gap : 24px;                 /* espace entre les ronds */
  list-style: none;          /* enlève les puces */
  padding: 50px 0 40px 10%;    /* espace autour */
  margin: 0;
}

.ronds-navigation_bis li a {
  display: flex;
  
  align-items : center;
  
  width: 90px;
  height: 90px;
  /*background-color: #a3cef1;  couleur pastel, à changer par rond */
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0,0,0,0.10);
  text-indent: -9999px;      /* cache le texte, visible pour lecteurs d’écran */
  transition: transform 0.2s, background-color 0.2s;
  border: 2px solid #fff;
  
  font-size: 1.5em;
  color: #333;
  text-indent: 0;     /* on montre le texte */
  text-align: center;
  
  justify-content : center;
  
  line-height: 50px;  /* verticalement au centre */
  font-weight: bold;
  
  text-decoration: none;
  
}

.ronds-navigation_bis li a:hover,
.ronds-navigation_bis li a:focus
{
  transform: scale(1.10);
  background-color: #ecf0f1; /* couleur au survol */
  border: 2px solid #2c3e50;
}

.ronds-navigation_bis li a.active{
   transform: scale(1.10);
  
  border: 3px solid #2c3e50; 
}





footer{
    position : fixed;
    background-color: #ecf0f1;
    color: #2c3e50;
    text-align: center;
    padding: 15px 0;
    width: 100%;
    bottom: 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

@media (max-width: 1100px) {
.portfolio-grid {

  grid-template-columns: repeat(4, minmax(200px, 1fr));

}
}

@media (max-width: 870px) {
.portfolio-grid {

  grid-template-columns: repeat(3, minmax(200px, 1fr));

}

.video-container,.video-container video {
    z-index: 99;
}
nav ul {
    flex-direction: column;
  }
 nav ul li {
    margin: 0.5rem 0;
  }   

.ronds-navigation {
  display: none;
}

.ronds-navigation_bis {
  display: none;
}

#myFrame{
    display : none;
}
.btn-download {
            display: inline-flex;
            height : 50px;
            margin-top: 50px;
            justify-content : center;
            
            margin-left: 20%;
            margin-right: 15%;
            
            padding: 10px 20px;
            align-items : center;
            font-size: 16px;
            font-weight: bold;
            color: white;
            background-color: #007BFF;
            border: none;
            border-radius: 5px;
            text-decoration: none;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }




}






@media (max-width: 768px) {
  .portfolio-grid figure {
    grid-template-columns: repeat(1, 1fr);
  }
  
  #avatar-container {
        width: 100%;
         }
      
     #main {
        padding: 1rem;
      }
  
}

@media (max-width: 650px) {


.portfolio-grid {

  grid-template-columns: repeat(2, minmax(200px, 1fr));

}
}





@media (max-width: 480px) {
  
.portfolio-grid {

  grid-template-columns: repeat(1, minmax(200px, 1fr));

}

  .portfolio-grid figure {
    grid-template-columns: 1fr;
  }
}