/*====================================================
CSS RESET
==================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "DM sans", sans-serif;
}

body {
  background: var(--bg-principal);
  color: var(--texte-principal);
  padding-top: 70px;
}

/*====================================================
CSS VARIABLES
=====================================================*/
:root {
  --bg-principal: #0d1b2a;
  --bg-carte: #161b22;
  --accent-vert: #95b8a0;
  --accent-bleu: #4a8fa8;
  --texte-principal: #e6edf3;
  --texte-secondaire: #8b949e;
}

/*====================================================
CSS HEADER
=====================================================*/

header {
  position: fixed;
  top: 0;
  width: 100%;
  background: linear-gradient(
    to bottom,
    var(--bg-principal) 50%,
    transparent 100%
  );
  z-index: 100;
}
/*====================================================
CSS NAVIGATION MENU
====================================================*/
nav {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 2rem;
}

nav ul {
  display: flex;
  gap: 2rem;
  list-style: none;
}

nav ul a {
  text-decoration: none;
  color: var(--texte-principal);
}

nav ul a:hover {
  color: var(--accent-vert);
}

/*======================================================
CSS HERO ACCUEIL
======================================================*/
.hero {
  min-height: 100vh;
  background: var(--bg-principal);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}

.hero h1 {
  font-family: "Syne", sans-serif;
  font-size: 3rem;
  margin: 1rem 0;
}

.hero h1 span {
  color: var(--accent-vert);
}
.hero-bienvenue {
  color: var(--texte-secondaire);
  letter-spacing: 0.2rem;
  text-transform: uppercase; /*met le texte en majuscule*/
  font-size: 1.2rem;
  margin-bottom: 1rem;
}
.hero-diplome {
  color: var(--accent-bleu);
  font-size: 1.2rem;
  letter-spacing: 0.1rem;
  margin-top: 1rem;
}
#matrix {
  position: absolute; /*pour le mettre sur toute la page mais pour pas ecraser mettre un position relative sur le parent .hero*/
  inset: 0;
  opacity: 0.4;
  mask-image: linear-gradient(transparent 2%, white 60%, transparent 90%);
  z-index: 0; /* canvas en arrière-plan */
}
.hero-content {
  position: relative;
  z-index: 1;
}
.btn-cv {
  display: inline-block;
  margin-top: 2rem;
  padding: 0.8rem 2rem;
  background: transparent;
  border: 2px solid var(--accent-vert);
  color: var(--accent-vert);
  border-radius: 8px;
  font-family: "Syne", sans-serif;
  font-size: 0.95rem;
  transition:
    background 0.3s,
    color 0.3s;
}

.btn-cv:hover {
  background: var(--accent-vert);
  color: var(--bg-principal);
}

/*=====================================================
CSS ABOUT
======================================================*/
/*SECTION*/

.about {
  padding: 5rem 2rem;
  position: relative; /*relative et z-index font passer la section au-dessus du canvas de l'animation*/
  z-index: 1;
}

.about h2 {
  font-family: "Syne", sans-serif;
  text-align: center;
  font-size: 2rem;
  color: var(--accent-vert);
  margin-bottom: 3rem;
}

.about-text {
  max-width: 1000px;
  margin: 0 auto;
  color: var(--texte-secondaire);
  line-height: 1.8;
  text-align: center;
}

.about-text p {
  margin-bottom: 1rem;
}

/*CARTES*/
.cartes-container {
  display: flex;
  gap: 2rem;
  justify-content: center;
  margin-top: 4rem;
}

.carte {
  width: 300px;
  height: 250px;
  cursor: pointer; /*donne la main pour indiquer qu'on peut cliquer*/
  perspective: 1000px; /*donne l'effet 3D au retournement*/
}

.carte-inner {
  width: 100%;
  height: 100%;
  position: relative; /*c'est le cadre de référence, les éléments enfants vont se positionner par rapport à lui*/
  transform-style: preserve-3d; /*dit au navigateur de garder l'effet 3D sur les enfants*/
  transition: transform 0.6s; /*animation du retournement 0.6sec*/
}

.carte-face,
.carte-dos {
  position: absolute; /*avec inset 0 cad elles prennent la même place que collées aux 4 bords de leurs parents. les 2 cartes sont donc superposées l'une sur l'autre*/
  inset: 0;
  border-radius: 10px;
  display: flex; /*j'active flexbox*/
  flex-direction: column; /*les enfants s'empilent verticalement*/
  align-items: center; /*centré horizontalement*/
  justify-content: center; /*centré verticalement*/
  text-align: center; /*le texte est centré*/
  backface-visibility: hidden; /*le plus important ici cache le dos quand la carte est face à nous et le recto quand elle est de dos*/
}

.carte-face {
  background: var(--bg-carte);
  border: 1px solid var(--accent-bleu);
}

.carte-dos {
  background: var(--accent-bleu);
  transform: rotateY(
    180deg
  ); /*le verso est déjà retourné par défaut, il attend dans le dos de la carte*/
}

.carte-inner.retournee {
  transform: rotateY(180deg);
}

.carte-dos p {
  font-size: 0.85rem;
  line-height: 1.6; /*interligne pour aerer le texte*/
}

.carte-dos h3,
.carte-dos p {
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.8);
  padding: 2px;
}

/*=======================================================
CSS COMPETENCES
=======================================================*/
/*SECTION*/

.competences {
  padding: 5rem 2rem;
  text-align: center;
}

.competences h2 {
  font-family: "Syne", sans-serif;
  font-size: 2rem;
  color: var(--accent-vert);
  margin-bottom: 3rem;
}

.competences-grid {
  display: flex; /*les icones cote à cote*/
  flex-wrap: wrap; /*retour à la ligne si pas de place*/
  justify-content: center; /*centré horizontalement*/
  gap: 2rem; /*espace entre chaque icone*/
  max-width: 800px; /*largeur max de la grille*/
  margin: 0 auto; /*centré dans la page*/
}

.techno {
  display: flex; /*icone et nom en colonne*/
  flex-direction: column; /*empilé verticalement*/
  align-items: center; /*centré horizontalement*/
  gap: 0.5rem; /*espace entre l'icone et le nom*/
  cursor: pointer; /*curseur main au suvol*/
}

.techno i {
  font-size: 3rem; /*taille de l'icone*/
  color: var(--accent-bleu);
  transition: color 0.3s; /*animation du changement de couleur*/
}

.techno span {
  font-size: 0.85rem;
  color: var(--texte-secondaire);
  opacity: 0; /*caché par défaut*/
  transition: opacity 0.3s; /*animation d'apparition*/
}

/*EFFET AU SURVOL*/

.techno:hover i {
  color: var(--accent-vert); /*l'icone passe en vert au survol*/
}

.techno:hover span {
  opacity: 1; /*le nom apparait au SURVOL*/
}
/*======================================================
CERTIFICATIONS
======================================================*/
.certifications {
  margin-top: 3rem;
}

.certifications h3 {
  font-family: "Syne", sans-serif;
  font-size: 1.7rem;
  color: var(--accent-vert);
  margin-bottom: 3.5rem;
}

.certif-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem 1rem;
}

.certif-badge {
  background: var(--bg-carte);
  border: 1px solid var(--accent-bleu);
  border-radius: 20px;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  color: var(--texte-secondaire);
  transition:
    border-color 0.3s,
    color 0.3s;
}

.certif-badge:hover {
  border-color: var(--accent-vert);
  color: var(--texte-principal);
}

/*======================================================
CSS PROJETS
======================================================*/

.projets {
  padding: 5rem 2rem;
  text-align: center;
}

.projets h2 {
  font-family: "Syne", sans-serif;
  font-size: 2rem;
  color: var(--accent-vert);
  margin-bottom: 3rem;
}

.projets-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}

.projet-carte {
  background: var(--bg-carte);
  border: 1px solid var(--accent-bleu);
  border-radius: 10px;
  width: 300px;
  padding: 2rem;
  text-align: center;
  transition: transform 0.3s;
}

.projet-carte:hover {
  transform: translateY(-5px); /*fait monter la carte au survol*/
}

.projet-img {
  background: var(--bg-principal);
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
}

.projet-img img {
  width: 100%;
  height: 100%;
  object-fit: cover; /*redimensionne l'image pour qu'elle remplisse l'espace sans se déformer*/
  border-radius: 8px;
}

.projet-info {
  padding: 1.5rem;
}

.projet-info h3 {
  font-family: "Syne", sans-serif;
  color: var(--texte-principal);
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

.projet-info p {
  color: var(--texte-secondaire);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.projet-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.tag {
  background: var(--bg-principal);
  color: var(--accent-bleu);
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  font-size: 0.75;
}

.projet-statut {
  font-size: 0.8rem;
  padding: 0.2rem 0.8rem;
  border-radius: 20px;
}

.en-cours {
  background: rgba(74, 143, 168, 0.2);
  color: var(--accent-bleu);
}

.en-ligne {
  background: rgba(149, 184, 160, 0.2);
  color: var(--accent-vert);
}

/*===================================================
VEILLE TECHNOLOGIQUE
====================================================*/
.veille {
  padding: 5rem 2rem;
  text-align: center;
}

.veille h2 {
  font-family: "Syne", sans-serif;
  font-size: 2rem;
  color: var(--accent-vert);
  margin-bottom: 3rem;
}

.veille-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}

.veille-carte {
  background: var(--bg-carte);
  border: 1px solid var(--accent-bleu);
  border-radius: 10px;
  width: 300px;
  padding: 2rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform 0.3s;
}

.veille-carte:hover {
  transform: translateY(-5px);
}

.veille-type {
  color: var(--accent-bleu);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.veille-carte h3 {
  font-family: "Syne", sans-serif;
  font-size: 1.1rem;
  color: var(--texte-principal);
}

.veille-carte p {
  font-size: 0.9rem;
  color: var(--texte-secondaire);
  line-height: 1.6;
}

.veille-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--texte-secondaire);
}

.veille-lien {
  margin-top: auto;
  color: var(--accent-vert);
  font-size: 0.9rem;
}

.veille-lien:hover {
  color: var(--texte-secondaire);
}

/*===================================================
CONTACT
====================================================*/

.contact {
  padding: 5rem 2rem;
  text-align: center;
  border-bottom: none;
}

.contact h2 {
  font-family: "Syne", sans-serif;
  color: var(--accent-vert);
  font-size: 2rem;
  margin-bottom: 3rem;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  max-width: 600px;
  margin: 0 auto;
}
.contact-form form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact-form input,
.contact-form textarea {
  background: var(--bg-carte);
  border: 1px solid var(--accent-bleu);
  border-radius: 8px;
  padding: 1rem;
  color: var(--texte-principal);
  font-family: "DM Sans", sans-serif;
  font-size: 1rem;
  width: 100%;
}

.contact-form textarea {
  resize: vertical;
  min-height: 150px;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent-vert);
}
.contact-form button {
  background: var(--accent-bleu);
  color: var(--texte-principal);
  border: none;
  border-radius: 8px;
  padding: 1rem 2rem;
  font-family: "Syne", sans-serif;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s;
  width: auto;
  align-self: center;
}

.contact-form button:hover {
  background: var(--accent-vert);
}
.form-succes {
  color: var(--accent-vert);
  margin-bottom: 1rem;
}

.form-erreur {
  color: #e05555;
  margin-bottom: 1rem;
}
/* =====================================
 FOOTER 
 ====================================== */
footer {
  padding: 2rem;
  border-top: 1px solid var(--accent-bleu);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

.footer-liens {
  display: flex;
  gap: 1.5rem;
}

.footer-liens a {
  font-size: 1.8rem;
  color: var(--accent-bleu);
  transition: color 0.3s;
  text-decoration: none;
}

.footer-liens a:hover {
  color: var(--accent-vert);
}

.footer-top {
  color: var(--texte-secondaire);
  font-size: 0.9rem;
  transition: color 0.3s;
  text-decoration: none;
}

.footer-top:hover {
  color: var(--accent-vert);
}

footer p {
  color: var(--texte-secondaire);
  font-size: 0.85rem;
}

/*====================================
 MENTIONS LÉGALES
 ===================================== */
.mentions {
  padding: 5rem 2rem;
  max-width: 850px;
  margin: 0 auto;
}

.mentions h2 {
  font-family: "Syne", sans-serif;
  font-size: 2rem;
  color: var(--accent-vert);
  margin-bottom: 3rem;
}

.mentions-contenu h3 {
  font-family: "Syne", sans-serif;
  font-size: 1.2rem;
  color: var(--accent-bleu);
  margin-bottom: 0.5rem;
  margin-top: 2rem;
}

.mentions-contenu p {
  color: var(--texte-secondaire);
  line-height: 1.8;
}

.mentions-contenu a {
  color: var(--accent-vert);
}
/*====================================
 RESPONSIVE MOBILE
 ===================================== */
@media (max-width: 768px) {
  /* HEADER / NAV */
  nav ul {
    gap: 0.8rem;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0.5rem;
  }

  nav ul a {
    font-size: 0.85rem;
  }

  /* FOOTER */
  .footer-inner {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .footer-liens {
    justify-content: center;
  }

  /* CARTES A PROPOS */
  .cartes-container {
    flex-direction: column;
    align-items: center;
  }

  /* HERO */
  .hero h1 {
    font-size: 2rem;
  }
} /*====================================
 RESPONSIVE MOBILE
 ===================================== */
@media (max-width: 768px) {
  /* HEADER / NAV */
  nav ul {
    gap: 0.8rem;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0.5rem;
  }

  nav ul a {
    font-size: 0.85rem;
  }

  /* FOOTER */
  .footer-inner {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .footer-liens {
    justify-content: center;
  }

  /* CARTES A PROPOS */
  .cartes-container {
    flex-direction: column;
    align-items: center;
  }

  /* HERO */
  .hero h1 {
    font-size: 2rem;
  }
}