/* ===================== */
/* BASE GLOBALE DU SITE */
/* ===================== */
body {
  margin: 0; /* supprime les marges par défaut du navigateur */
  font-family: 'Montserrat', sans-serif; /* police principale */
  background: #000; /* fond noir (cinéma / studio) */
  color: #fff; /* texte blanc */
}

/* ===================== */
/* STYLE GLOBAL DES LIENS */
/* ===================== */

/* Style de base pour tous les liens <a> */
a {
  color: #fff;               /* force la couleur blanche (évite le violet) */
  text-decoration: none;     /* supprime le soulignement par défaut */
  transition: opacity 0.3s ease; /* transition douce pour l'effet hover */
}

/* Liens déjà visités */
a:visited {
  color: #fff;               /* reste blanc même après clic */
}

/* Effet au survol de la souris */
a:hover {
  opacity: 0.65;             /* léger fade pour un rendu minimaliste */
}

/* ===================== */
/* NAVIGATION */
/* ===================== */
.navbar {
  position: fixed; /* navbar toujours visible en haut */
  top: 0;
  width: 100%; /* prend toute la largeur */
  padding: 20px 40px; /* espace intérieur */
  display: flex; /* aligne logo + menu */
  justify-content: space-between; /* logo à gauche, menu à droite */
  backdrop-filter: blur(2px); /* flou de l’arrière-plan */
  -webkit-backdrop-filter: blur(2px); /* support Safari */
  background-color: #00000069;
  z-index: 100; /* passe au-dessus de tout */
}



/* ===================== */
/* HERO (VIDÉO + TEXTE) */
/* ===================== */
.hero {
  height: 100vh; /* hauteur plein écran */
  position: relative; /* nécessaire pour positionner les enfants */
  overflow: hidden; /* cache ce qui dépasse */
}

/* Vidéo plein écran */
.hero video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* remplit sans déformer */
}

/* Texte centré au-dessus de la vidéo */
.hero-text {
  position: absolute;
  inset: 0; /* top/right/bottom/left = 0 */
  display: flex;
  flex-direction: column; /* éléments en colonne */
  justify-content: center; /* centrage vertical */
  align-items: center; /* centrage horizontal */
  background: rgba(0,0,0,0.5); /* assombrit la vidéo */
}

/* Titre principal */
.hero h1 {
  font-size: 4rem; /* gros titre */
  text-align: center;
  letter-spacing: 5px; /* espacement lettres (cinéma) */
}

/* ===================== */
/* BOUTON "DÉCOUVRIR" */
/* ===================== */
.centredubutton {
  display: flex;
  justify-content: center; /* centre horizontalement */
  margin-top: 40px; /* espace au-dessus */
}

/* Style du bouton */
#button1 {
  padding: 14px 40px; /* taille du bouton */
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;

  background: transparent; /* fond transparent */
  color: white;
  border: 1px solid white; /* contour blanc */
  cursor: pointer; /* curseur main */

  transition: 0.3s ease; /* animation douce */
}

/* ===================== */
/* SECTIONS GÉNÉRALES */
/* ===================== */
.section {
  padding: 120px 10%; /* espace intérieur (haut/bas + côtés) */
  text-align: center; /* texte centré */
}

/* Texte d’introduction */
.intro p {
  max-width: 700px; /* limite la largeur */
  margin: auto; /* centre horizontalement */
  line-height: 1.8; /* lisibilité */
}

/* ===================== */
/* PROJETS */
/* ===================== */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  /* grille responsive */
  gap: 20px; /* espace entre les projets */
}


.project {
  position: relative; /* pour positionner le texte */
  overflow: hidden; /* cache le zoom */
}

/* Image du projet */
.project img {
  width: 100%;
  transition: transform 0.6s; /* animation zoom */
}

/* Texte du projet */
.project span {
  position: absolute;
  bottom: 20px;
  left: 20px;
  opacity: 0; /* caché par défaut */
  transition: 0.5s;
}

/* Zoom image au hover */
.project:hover img {
  transform: scale(1.1);
}

/* Affiche le texte au hover */
.project:hover span {
  opacity: 1;
}

/* ===================== */
/* TARIFS */
/* ===================== */
.pricing-box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
}

/* ===================== */
/* CONTACT */
/* ===================== */
form {
  max-width: 500px; /* largeur max */
  margin: auto; /* centré */
}

/* Réseaux sociaux */
/* Conteneur des réseaux sociaux */
.socials {
  display: flex;
  justify-content: center; /* centre horizontalement */
  gap: 10px; /* espace entre les boutons */
  margin-top: 40px;
}

/* Chaque bouton réseau */
.socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px 6px; /* rectangle horizontal */
  border: 0px solid #fff; /* contour minimaliste */
  color: #fff; /* texte/icône blanc */
  font-size: 1.2rem; /* taille icône */
  font-weight: 600;
  background: transparent; /* fond transparent */
  transition: all 0.3s ease;
  letter-spacing: 1px;
}

/* Hover - léger effet cinématique */
.socials a:hover {
  background: rgba(255,255,255,0.1); /* légère lueur blanche */
  transform: translateY(-3px); /* léger soulèvement */
  border-color: #fff; /* bordure renforcée */
}

/* Champs du formulaire */
form input,
form textarea {
  width: 100%;
  margin-bottom: 15px;
  padding: 12px;
  background: #111; /* fond sombre */
  color: #fff;
  border: none;
}

/* ===================== */
/* FOOTER */
/* ===================== */
footer {
  padding: 30px;
  text-align: center;
  background: #000;
}