@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
@font-face {
    font-family: "Bristol";
    src: url("./assets/polices/Bristol.otf") format("opentype");
    font-weight: normal; /* tu peux mettre bold, 100, 200… si tu as plusieurs variantes */
    font-style: normal;  /* ou italic */
}

@font-face {
    font-family: "Roca";
    src: url("./assets/polices/Roca\ Regular.ttf") format("opentype");
    font-weight: normal; /* tu peux mettre bold, 100, 200… si tu as plusieurs variantes */
    font-style: normal;  /* ou italic */
}



*{
    margin: 0;
}
*:focus {
  outline: none;
}

body {
    /*background-color: black;*/
    color:white;
    font-family: "Outfit", sans-serif;
    font-optical-sizing: auto;
    cursor: none;
    overflow: hidden;
}
main {
    margin-top:140px;
}

.home {
    margin-top:0;
}
a {
    text-decoration: none;
    color: white;
    cursor:none;
}

ul {
    list-style-type: none;
    display: flex;
    gap: 50px;
    margin-right: 50px;
}

header a {
    text-align: center;
    color:rgb(255,255,255);
    margin: -2% auto 0 auto;
    letter-spacing: 1px;
    transition: color 0.3s ease-in-out;
}

header a:hover {
   color:pink;
   transition: color 0.3s ease-in-out;
}

.header-project {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: flex-start;   /* start everything on the left */
  padding: 0 50px;
  box-sizing: border-box;
}

/* Push the nav fully to the right */
.header-project nav {
  margin-left: auto;
}

/* Make sure the logo doesn't auto-center */
.header-project img {
  display: block;
  margin: 0;            /* overrides any global margin: 0 auto; */
  height: auto;
  max-height: 250px;    /* adjust as you like */
}

/* Optional: prevent children from stretching */
.header-project > * {
  flex: 0 0 auto;
}
/* HOME */

.firstPage {
    background: url('./assets/images/bg1.png');
    background-size: cover;
    width: 100%;
    height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;

    /* pour l'animation */
    opacity: 1;
    transition: opacity 1s ease;
    position: fixed; /* pour recouvrir tout */
    top: 0;
    left: 0;
    z-index: 9999;
}


.firstPage.fade-out {
    opacity: 0;
    pointer-events: none; /* plus cliquable une fois en fade */
}

.custom-cursor {
  position: fixed;
  top: -1000;
  left: -1000;
  width: 150px;              /* taille demandée */
  pointer-events: none;      /* ne bloque pas les clics */
  transform: translate(-50%, -50%); /* décalage bas-gauche */
  z-index: 9999;
}

.banners {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.banner {
    flex: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    text-transform: uncapitalize;
    text-decoration: none;
    color: white;
}

.home {
    background: url('./assets/images/bg1.png');
    background-size: cover;
 }
.bFilms {
    position: relative;
    background: url('./assets/images/Fond 3.jpg');
    background-size: cover;
    background-position: center;
    justify-content: flex-start;
    padding-left: 70%;
    overflow: hidden;
}

/* Texte en avant-plan */
.bFilms span,
.bFilms a {
    position: relative;
    z-index: 1; /* passe au-dessus du ::after */
    color: white;
}

/* Image de remplacement */
.bFilms::after {
    content: "";
    position: absolute;
    inset: 0; /* prend toute la div */
    background: url('./assets/images/3persos.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease; /* fondu */
    z-index: 0;
}

.bFilms:hover::after {
    opacity: 1; /* apparition de la nouvelle image */
}

.bContact {
    position: relative;
    background: url('./assets/images/Fond 6.png');
    background-size: cover;
    background-position: center;
    justify-content: flex-start; /* place le texte à gauche */
    padding-left: 100px; /* petit espace par rapport au bord */
    overflow: hidden;
}

/* texte toujours au-dessus */
.bContact span,
.bContact a {
    position: relative;
    z-index: 1;
    color: white;
}

/* deuxième background */
.bContact::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url('./assets/images/dans_voiture.jpg'); /* remplace par ton image */
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease;
    z-index: 0;
}

.bContact:hover::after {
    opacity: 1; /* apparition en fondu */
}
.bAbout {
    position: relative;
    background: url('./assets/images/Fond 4.png');
    background-size: cover;
    background-position: center;
    justify-content: center; /* texte au milieu par défaut */
    overflow: hidden;
}

/* texte toujours visible au-dessus */
.bAbout span,
.bAbout a {
    position: relative;
    z-index: 1;
    color: white;
}

/* deuxième image en fondu */
.bAbout::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url('./assets/images/voiture_et_policiers.jpg'); /* à remplacer */
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease;
    z-index: 0;
}

.bAbout:hover::after {
    opacity: 1; /* apparition en fondu */
}


.banner img {
    max-width: 150px;
}
/* PROJECT */


.bg-project {
    background: url('./assets/images/Fond 3.jpg');
    background-size: cover;
    width: 100%;
    min-height: 100vh;
    margin: 0;
    overflow: hidden;
}

.containerGauche{
    width:35%;
    margin: 120px 50px 0 50px;
    text-align: left;
    padding-top: 50px;
    height: auto;
}

.titrePage{
    font-size: 40px;
    font-family: "Outfit", monospace;
    text-transform: uncapitalize;
    text-align:center;
    margin-bottom: 5px;
}

.grosTitre h2{
    font-size: clamp(22px, 2vw, 50px);
    font-family: "Outfit", monospace;
    font-weight: 100;
    text-transform: lowercase;
    margin: 10px 0;
}

.grosTitre h4{
    font-size: clamp(22px, 2vw, 50px);
    font-family: "Outfit", monospace;
    font-weight: 300;
}

.release a{
    font-size: 2vw;
    font-family: "Outfit", monospace;
    font-weight: 300;
    text-transform: uppercase;
    color: white;
    scale: 1;
    transition: color 0.3s ease-in-out, letter-spacing 0.8s;
}
.release a:hover {
    color: pink;
    letter-spacing: 3px;
    transition: color 0.3s ease-in-out, letter-spacing 0.8s;
}

.article {
    position: fixed;
    top: 200px;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;  /* ✅ contenu aligné à gauche */
    justify-content: flex-end;
    width: 50%;
    padding: 0;               /* ✅ aucun espace intérieur */
    margin: 0 20px 0 0;                /* ✅ aucun espace extérieur */
}
.styleProjet{
    display: flex;
    width:100%;
    font-size: 16px;
    margin-bottom: 8px;
    font-family: "Outfit", monospace;
    text-transform: uppercase;
    text-align: left;
}

.article img {
    display: block;          /* ✅ block au lieu de flex */
    padding: 0;
    margin: 0;               /* ✅ pas de marge latérale */
    width: 100%;             /* ✅ prend toute la largeur du conteneur */
    max-width: 600px;
    height: 250px;
    margin-bottom: 2px;
    transition: transform 5s ease-in-out;
    object-fit: cover;       /* ✅ optionnel, garde une image propre si elle dépasse */
}
.article .production{
    text-align: left;
    width:100%;
    max-width: 600px;
    border-radius: 30px;
}

.production h3{
    font-size: 20px;
    margin-bottom: 8px;
    font-family: "Outfit", monospace;
    text-transform: uppercase;
}

.production h4{
    font-size: 20px;
    margin-bottom: 2px;
    font-family: "Outfit", monospace;
}
.resume{
    display: flex;
    flex-direction: row;
    gap: 5px;
    margin: 10px 0;
}
.production p{
    font-size: 16px;
    line-height: 1.2;
    padding-right: 30px;
    text-align: justify;
}

.active{
    color: pink;
    letter-spacing: 3px;
}
.casting {
  display: flex;
  flex-direction: column; /* empile chaque bloc */
  gap: 6px; /* espace vertical entre Réalisation et Cast */
}

.cast-wrapper {
  display: flex;
  align-items: flex-start;
}

.cast-title {
  font-weight: bold;
  width: 120px; /* largeur fixe pour que toutes les listes s'alignent */
  flex-shrink: 0; /* empêche de rapetisser */
}

.casting ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;       /* repasse en bloc = une seule colonne */
}

.casting ul li {
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 1.4;     /* compact */
}
/* About */

.bg-about {
    background: url('./assets/images/Fond 4.png');
    background-size: cover;
    width: 100%;
    min-height: 100vh;
    margin: 0;
    overflow: hidden;
}
.aboutContainer{
    width: 70%;
    margin: 120px auto 0 auto;
    padding-top: 50px;
    height: auto;
    text-align: justify;
}

.aboutContainer p{
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.signature{
    font-size: 25px;
    text-align: center;
    margin-top: 30px;
}
/* contact */

.bg-contact {
   background: url('./assets/images/Fond 6.png');
    background-size: cover;
    width: 100%;
    min-height: 100vh;
    margin: 0;
    overflow: hidden;
}
.contactContainer{
    width: 60%;
    margin: 120px auto 0 auto;
    text-align: justify;
    padding-top: 50px;
    height: auto;
}

.contactContainer p{
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
}
.d-none{
    display: none;
}

@media (max-width: 960px) {

  .article img {
    height: 200px;
}
  .containerGauche{
    margin: 120px 50px 0 30px;
}
}

@media (max-width: 540px) {
    
      .article img {
    height: 200px;
}
  .containerGauche{
    margin: 120px 50px 0 30px;
}

  .grosTitre h4{
    font-size: clamp(16px, 1vw, 50px);
  }

  .grosTitre h2{
    font-size: clamp(14px, 2vw, 50px);
  }

  .casting ul li {
    font-size: 11px;
  }

  .resume p{
    font-size: 10px;
  }

  .contactContainer p{
    font-size: 1Épx;
    line-height: 1.6;
    margin-bottom: 20px;
  }

  .aboutContainer p{
    font-size: 15px;
    line-height: 1.1;
    margin-bottom: 20px;
  }

  .header-project {
    display: flex;
    flex-direction: column; /* empile les éléments verticalement */
    align-items: center; /* centre horizontalement le contenu */
    text-align: center;
  }

  /* image du logo */
  .header-project img {
    width: 100%;
    height: 100px;
  }

  /* menu de navigation */
  .header-project nav {
    margin-top: 1px; /* petit espace entre le logo et le menu */
  }
    
  .containerGauche{
    margin: 120px 50px 0 30px;
}

}


@media (max-width: 375px) {

.header-project {
  height: 100px;
}
.aboutContainer{
  padding-top: 0;
}
main {
  height: calc(100vh - 100px);
  margin-top: 0px;
  overflow: hidden;
}
.containerGauche{
  padding-top: 10px;
   margin: 120px 50px 0 30px;
}

.article
{
  top: 141px;
}

}

@supports (-webkit-touch-callout: none) {
 .custom-cursor {
  display: none;
  }
}

@supports (height: 100svh) {
  .firstPage { height: 100svh; 
      height: calc(100svh );
  } /* couvre même quand la barre est visible */
}

/* Optionnel : gérer les encoches */
.firstPage {
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}