:root {
    /* --bordeaux: #756161; */
    --nicebrown: #5ce1e6;
    /* --dark-bg: #3C3A3D; */
    /* --lightgrey: #494747; */
    --lightgrey : #FFFFFF;
    /* --crème : #fffbf8; */
    --creme: #060606;
    /* --new : #ede6d9; */
    --new : #060606;
    /* --nicebrown : #847972; */
    --newbeige : #e8e2dd;
    /* --brunclair : #bab2ad; */
    --brunclair : #5ce1e697;
    --bordeaux : #FFFFFF;
    --dark-bg : #FFFFFF;
  }


  /* Container */
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    background-color: var(--creme);
  }

  /* Structure de base */
  body {
    margin: 0;
    padding: 0;
    background-color: var(--new);
    color: var(--soft-white);
  }
  
  /* Titres */

  
  /* Structure du header */
  header {
      background-image: url('assets/images/DevByFr.png'); 
      background-size: contain;
      background-color: var(--creme);
      background-position: center; /* Pour la centrer */
      background-repeat: no-repeat; /* Pour éviter qu'elle se répète */
      height: 350px; /* la hauteur du header */
      color: white; /* Pour que le texte reste lisible si besoin */
  }
  
  h1 {
    color: var(--slate-blue);
    font-size: 2.5rem;
    margin-bottom: 1rem;
  }
  
  h2 {
    color: var(--beige);
    font-size: 2rem;
    margin-bottom: 0.75rem;
  }

  
  h3 {
    color: var(--slate-blue);
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }
  
  /* Paragraphe */
  p {
    color: var(--light-grey);
    font-size: 1rem;
  }
  
  /* Navigation */
  .navbar .nav-link {
    position: relative;
    color: #1e1e2f;
    transition: all 0.3s ease;
    font-weight: 600;
    padding: 8px 15px;
}

.navbar .nav-link::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    height: 2px;
    background: var(--new);
    transition: width 0.3s ease-in-out;
}

.navbar .nav-link:hover::before {
    width: 100%;
}

.navbar .nav-link:hover {
    color: var(--new);
    background-color: var(--brunclair);
    /* background-color: var(--bordeaux); */
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(187, 164, 127, 0.3);
}

.navbar {
    font-family: 'Orbitron', sans-serif;
    background-color: var(--nicebrown);
    /* font-family: "Italianno", cursive; */
    font-family: "Lexend Mega", sans-serif;
    font-weight: 400;
    font-size:x-large;
    font-style: normal;
}

.nav-link {
    color: #1e1e2f;
}

.navbar-nav .nav-item {
  margin-right: 2.5rem; 
}


.navbar-nav.flex-row .nav-item {
  margin-right: 1rem;
}


      
  /* Footer */
  footer {
    background-color: var(--nicebrown);
    color: var(--soft-white);
    text-align: center;
    padding: 1rem;
    margin-top: 2rem;
    /* font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; */
    font-family: "Lexend Mega", sans-serif;
    font-weight: 400;
    font-size:x-large;
    font-style: normal;
  }
  
  footer .social-icons {
    margin-top: 0.5rem;
  }
  
  footer .social-icons a {
    color: var(--crème);
    margin: 0 0.5rem;
    font-size: 1.5rem;
    transition: color 0.3s ease;
  }
  
  footer .social-icons a:hover {
    color: var(--beige);
  }

  footer a {
    color: inherit; /* Cela prend la couleur du texte parent */
    text-decoration: none; /* Cela enlève le soulignement */
  }
  
  /* VIDEO */

  .video {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin-bottom: 1rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  }
  
  .feature-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .feature-list li {
    background-color: var(--soft-white);
    border-left: 4px solid var(--slate-blue);
    padding: 10px 15px;
    margin-bottom: 10px;
    border-radius: 6px;
    color: var(--dark-bg);
    font-size: 0.95rem;
    text-align: start;
  }
  
  .feature-list li strong {
    color: var(--bordeaux);
  }
  
  
  /* Boutons */
  button {
    background-color: var(--nicebrown);
    color: var(--soft-white);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease;
  }
  
  button:hover {
    background-color: #345556
  }

  .btn {
    display: inline-block; /* Garde la taille du contenu */
    background-color: var(--bordeaux);
    color: var(--soft-white);
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    width: auto; /* s'assure qu'il ne s'étend pas */
    text-align: center;
  }
    
  .btn:hover {
    background-color: #5e4e4e; /* une version plus foncée du bordeaux */
    transform: translateY(-2px);
  }
  
  
/* Accroche */

.accroche {
  max-width: 1100px;
  margin: 100px auto 2rem auto; /* top + centré + bas */
  padding: 1rem;
  background-color: var(--bordeaux); /* si tu veux une carte claire */
  color: var(--dark-bg); /* pour un bon contraste */
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  /* font-family: "Marck Script", cursive; */
  font-family: "Lexend Mega", sans-serif;
  font-weight: 200;
  font-style: normal;
  text-align: center;
}

.accroche h1 {
  text-align: center;
  font-size: 1.5rem;
  color: var(--new);
  margin-bottom: 1rem;
}

.accroche p {
  font-size: 1.4rem;
  color: var(--new);
  margin-bottom: 1.5rem;
}

/* PRESENTATION */
  
.presentation {
  max-width: 900px;
  margin: 100px auto 2rem auto; /* top + centré + bas */
  padding: 1rem;
  background-color: var(--new); /* si tu veux une carte claire */
  color: var(--dark-bg); /* pour un bon contraste */
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  /* font-family: "Marck Script", cursive; */
  font-family: "Lexend Mega", sans-serif;
  font-weight: 400;
  font-style: normal;
}


.presentation h1 {
  text-align: center;
  font-size: 2.5rem;
  color: var(--nicebrown);
  margin-bottom: 1rem;
}

.presentation p {
  font-size: 1.1rem;
  color: var(--dark-bg);
  margin-bottom: 1.5rem;
}

.presentation h3 {
  font-size: 1.1rem;
  color: var(--dark-bg);
  margin-bottom: 1.5rem;
  border: var(--beige) solid 2px;
  text-align: center;
}

.presentation p strong {
  font-weight: bold;
  color: var(--lightgrey);
}

.presentation footer {
  text-align: center;
  padding-top: 2rem;
  font-size: 1rem;
  color: var(--slate-blue);
}

.presentation footer p {
  color: var(--dark-bg);
}

/* Ajoute de l'espace entre les paragraphes */
.presentation p + p {
  margin-top: 1.5rem;
}

.presentation article p {
  color: var(--dark-bg);
}


/* CONTACT */

/* Formulaire */

.mail {
  text-align: center
}

/* Formulaire de contact vertical */
.contact-form {
  display: flex;
  flex-direction: column; /* Aligner les éléments en colonne */
  gap: 15px; /* Espacement entre les champs */
  margin-top: 20px;
}

.contact-info,
.contact-form {
    background-color: rgba(10, 10, 10, 0.8); /* Fond blanc semi-transparent */
    padding: 20px;
    border-radius: 10px; /* Coins arrondis */
    border-color: #FFFFFF;
    border: solid 2px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre douce */
    margin-bottom: 20px; /* Espacement en bas */
}

/* Encadré pour chaque info de contact */
.contact-info .info-item {
    background-color: rgba(0, 0, 0, 0.1); /* Fond gris clair pour chaque info */
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 15px; /* Espacement entre l'icône et le texte */
}

.contact-info .info-item i {
    font-size: 1.5rem;
    color: var(--bordeaux)
}



/* PORTFOLIO */

.portfolio-table {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Deux colonnes par ligne */
  gap: 20px;
  padding: 20px 0;
}

/* Style pour chaque élément tarif */
.portfolio-item {
  background-color: var(--crème); /* Fond clair */
  border: 2px solid var(--nicebrown); /* Bordure rouge foncé */
  border-radius: 10px; /* Coins arrondis */
  padding: 20px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre légère */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animation au survol */
}

.portfolio-item:hover {
  transform: translateY(-10px); /* Légère élévation au survol */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Ombre plus marquée au survol */
  background-color: var(--brunclair); /* effet hover */
  cursor: pointer;
}

/* Titre de la carte */
.portfolio-item h2 {
  font-size: 1.5rem;
  color: var(--bordeaux); /* Couleur du titre */
  font-weight: bold;
  margin-bottom: 10px;
}

.portfolio-item p {
  color: var(--dark-bg); /* Couleur du titre */
  margin-bottom: 10px;
}

a.portfolio-item {
  text-decoration: none;
  color: inherit;
}

a.portfolio-item:focus {
  outline: none;
}


/* Style pour les pages sites */

.site-table {
  display: grid;
  grid-template-columns: repeat(1, 1fr); /* Deux colonnes par ligne */
  gap: 20px;
  padding: 20px 0;
}

/* Style pour chaque élément tarif */
.site-item {
  background-color: var(--light-grey); /* Fond clair */
  border: 2px solid var(--bordeaux); /* Bordure rouge foncé */
  border-radius: 10px; /* Coins arrondis */
  padding: 20px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre légère */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animation au survol */
}

.site-item p {
  color: var(--dark-bg); /* Couleur du titre */
  margin-bottom: 10px;
}

.site-item h2 {
  font-size: 1.5rem;
  color: var(--bordeaux); /* Couleur du titre */
  font-weight: bold;
  margin-bottom: 10px;
}

.site-table a {
  display: inline-block; /* Garde la taille du contenu */
  background-color: var(--nicebrown);
  color: var(--soft-white);
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  width: auto; /* s'assure qu'il ne s'étend pas */
  text-align: center;
  margin-bottom: 1rem;
}
  
.site-table a:hover {
  background-color: #5ce1e697; 
  transform: translateY(-2px);
}

/* Mentions légales et autres footer */
.ml {
  color: var(--bordeaux);
}


/* RESPONSIVE */

/* Responsive TABLETTE */
@media (max-width: 1024px) {
  .container {
    padding: 1.5rem;
  }

  header h1 {
    font-size: 2.2rem;
  }

  header h2 {
    font-size: 1.1rem;
  }

  .presentation {
    margin: 80px 1rem 2rem 1rem;
    padding: 1rem;
  }

  .presentation h1 {
    font-size: 2rem;
  }

  .presentation p {
    font-size: 1rem;
  }

  .portfolio-item {
    flex: 1 1 calc(100% - 2rem);
  }

  .portfolio-item h2 {
    font-size: 1.3rem;
  }

  .portfolio-item p {
    font-size: 0.95rem;
  }

  .portfolio-table {
    gap: 1.5rem;
  }

}



/* Responsive MOBILE */
@media (max-width: 768px) {

  body, html {
      overflow-x: hidden; /* Empêche le défilement horizontal */
      margin: 0;
      padding: 0;
  }

  header {
    background-image: url('assets/images/DevByFr.png'); 
    background-size: contain;
    background-color: #000000;
  }

  

  .presentation {
    margin: 60px 1rem 1rem 1rem;
    padding: 1rem;
  }

  .presentation h1 {
    font-size: 1.8rem;
  }

  .presentation p {
    font-size: 0.95rem;
  }

  .portfolio-table {
    display: block; /* passe de flex à block */
  }

  .portfolio-item {
    display: block;
    width: 100%;
    padding: 1rem 0;
    border-bottom: 1px solid var(--bordeaux);
    background: none;
    border-radius: 15px;
    text-decoration: none;
    color: var(--beige);
    background-color: var(--light-grey);
    margin-bottom: 1rem;
  }

  .portfolio-item:last-child {
    border-bottom: none;
  }

  .portfolio-item h2 {
    font-size: 1.2rem;
    margin: 0 0 0.3rem;
  }

  .portfolio-item p {
    font-size: 0.95rem;
    margin: 0;
  }

  .contact-info,
  .contact-form {
    padding: 15px;
  }

  .contact-info .info-item {
    /* flex-direction: column; */
    align-items: flex-start;
    gap: 8px;
  }

  .fas fa-envelope {
    display: block;
  }

  footer {
    font-size: 0.9rem;
    padding: 1rem 0.5rem;
  }

  footer .social-icons {
    font-size: 1.2rem;
  }

  .video {
    width: 100%; /* La vidéo occupe toute la largeur du container */
    height: auto; /* Conserve le ratio de la vidéo */
    cursor: pointer; /* Change le curseur en main pour indiquer qu'il est cliquable */
  }

  /* Style de la vidéo en plein écran */
  .video.fullscreen {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw; /* Largeur de l'écran */
      height: 100vh; /* Hauteur de l'écran */
      z-index: 9999; /* Place la vidéo au-dessus de tous les autres éléments */
      background-color: black; /* Fond noir pour simuler le plein écran */
  }

}