/* --- Styles généraux --- */
body {
    margin: 0;
    font-family: 'Kiona', sans-serif;
    background-color: white;
    color: black;
}

/* --- En-tête et Navigation --- */
header {
    background-color: white;
    padding-top: 40px;
    position: relative;
    z-index: 20;
}

.nav-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
}

/* Petits carrés noirs au-dessus des onglets */
.header-boxes {
    display: flex;
    gap: 180px;
    margin-bottom: 5px;
}

.header-box {
    width: 10px;
    height: 10px;
    background-color: black;
    transition: background-color 0.4s ease;
}

.header-box > li:hover > a {
    color: #4a007d;
}
/* Menu principal */
.menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 40px;
}

.menu > li {
    position: relative;
    text-align: center;
}

.menu > li > a {
    text-decoration: none;
    text-transform: uppercase;
    font-size: 14px;
    color: black;
    letter-spacing: 3px;
}

.menu > li:hover > a {
    color: #4a007d;
}
/* Sous-menus */
.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    list-style: none;
    padding: 0;
    margin: 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 10; /* Ajoutez cette ligne pour que le sous-menu recouvre le menu principal */
    font-family: 'Kiona', sans-serif; /* Police Kiona Sans-serif */
}

.menu > li:hover .submenu {
    display: block;
    top: 30; /* Ajustez la position pour qu'il recouvre le menu principal */
    left: 50%; /* Centre le sous-menu horizontalement */
    transform: translateX(-50%); /* Ajuste la position pour un alignement parfait */
}

.menu > li:hover .submenu {
    display: block;
}

.submenu li {
    border-bottom: 1px solid #ddd;
}

.submenu li:last-child {
    border-bottom: none;
}

.submenu li a {
    padding: 20px 20px;
    text-decoration: none;
    font-size: 12px;
    color: black;
    display: block;
    text-align: left;
    font-family: 'Kiona', sans-serif; /* Police Kiona Sans-serif */
}

.submenu li:hover a {
    color: #4a007d;
}

/* --- Grille des projets --- */
.index {
    display: grid;
    grid-template-columns: repeat(3, 200px); /* 3 colonnes de 200px */
    gap: 20px; /* Espacement égal entre les carrés */
    justify-content: center; /* Centrer la grille */
    padding: 20px;
}

/* Case projet */
.index .card {
    border-radius: 5px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px; /* Largeur fixe pour les carrés */
    height: 200px; /* Hauteur fixe pour les carrés */
    position: relative; /* Pour positionner l'overlay */
}
.index .card img {
    width: 200px;
    height: 200px;
    object-fit: cover; /* Assure que l'image remplit le carré */
}

.index .card .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    color: #4a007d;
    display: flex;
    flex-direction: column; /* Assure que les éléments sont empilés verticalement */
    align-items: center;
    justify-content: center;
    opacity: 0; /* Initialement caché */
    transition: opacity 0.3s ease;
}

.index .card .overlay .text-uppercase {
    text-transform: uppercase;
    font-family: 'Kiona', sans-serif; /* Changez la police selon vos besoins */
    font-size: 18px; /* Changez la taille selon vos besoins */
    color: white; /* Changez la couleur selon vos besoins */
    margin-bottom: 10px; /* Espacement entre les deux textes */
}

.index .card .overlay .text-normal {
    font-family: 'Kiona', sans-serif; /* Changez la police selon vos besoins */
    font-size: 14px; /* Changez la taille selon vos besoins */
    color: white; /* Changez la couleur selon vos besoins */
}

.index .card:hover .overlay {
    opacity: 1; /* Le texte apparaît au survol */
}

/* Styles spécifiques pour la page fiction */
.fiction-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 colonnes égales */
    gap: 10px; /* Espacement égal entre les rectangles */
    justify-content: center; /* Centrer la grille */
    padding: 20px;
    margin-left: 15%; /* Marge à gauche proportionnelle */
    margin-right: 15%; /* Marge à droite proportionnelle */
    grid-auto-flow: dense; /* Remplir les espaces vides de manière dense */
}

.video-bonbon {
    max-width: 800px;
    width: 100%;
    position: relative;
}

/* Styles spécifiques pour l'affiche */
.affiche {
    grid-column: span 1; /* Prend une colonne */
    grid-row: span 2; /* Prend deux carrés de long */
    background-color: #f0f0f0;
    position: relative; /* Pour positionner l'image */
    aspect-ratio: auto; /* Désactive le format 16/9 */
    
    width: 90%;
    height: 100%;
}

.affiche img {
    
    width: 90%;
    height: 100%;
    object-fit: relative;
}


.fiction-gallery .card {
    background-color: #f0f0f0;
    border-radius: 5px;
    position: relative; /* Pour positionner l'image */
    aspect-ratio: 16 / 9; /* Assure un format 16/9 */
}

.fiction-gallery .card.large {
    grid-column: span 2; /* Largeur flexible pour les rectangles */
    grid-row: span 2; /* Hauteur flexible pour les rectangles */
}

.fiction-gallery .card.small {
    grid-column: span 1; /* Largeur flexible pour les rectangles */
    grid-row: span 1; /* Hauteur flexible pour les rectangles */
}

.fiction-gallery .card img,
.fiction-gallery .card video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fiction-gallery .card img:hover {
    filter: grayscale(80%); /* Applique un effet de grisage à 80% au survol */
}

.fiction-gallery .card video {
    display: block;
}





.video-container {
    position: relative;
}

.play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    color: white;
    opacity: 1;
    pointer-events: none;
    transition: opacity 0.3s ease; /* Transition douce pour l'apparition/disparition */
}

.separator {
    grid-column: 1 / -1; /* Traverse toutes les colonnes */
    height: 25%;
    background-color: transparent; /* Vous pouvez changer la couleur si nécessaire */
}

.separator-60 {
    grid-column: 1 / -1; /* Traverse toutes les colonnes */
    height: 25%;
    background-color: transparent; /* Vous pouvez changer la couleur si nécessaire */
}

/* --- Ajout du fond noir entre les images 33 et 55 --- */
.black-background {
    background-color: black; /* Fond noir sous chaque carte */
    display: grid;
    margin: 0 auto;
    grid-template-columns: repeat(4, 1fr); /* 4 colonnes égales */
    gap: 10px; /* Espacement égal entre les rectangles */
    justify-content: center; /* Centrer la grille */
    padding: 20px 13%;

    grid-auto-flow: dense; /* Remplir les espaces vides de manière dense */
}

.black-background .card {
    background-color: black; /* Fond noir sous chaque carte */
    border-radius: 5px;
    position: relative; /* Pour positionner l'image */
    aspect-ratio: 16 / 9; /* Assure un format 16/9 */

}

.black-background .card.small {
    grid-column: span 1; /* Largeur flexible pour les rectangles */
    grid-row: span 1; /* Hauteur flexible pour les rectangles */
    
}

.black-background .card img,
.black-background .card video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.black-background .card img:hover {
    filter: grayscale(80%); /* Applique un effet de grisage à 80% au survol */
}

/* Séparateurs pour marquer la transition avant et après */
.separator {
    grid-column: 1 / -1; /* Traverse toutes les colonnes */
    height: 50px; /* Ajuste la hauteur selon ton besoin */
    background-color: transparent;
}



/* --- Mise en page de la section Live Video --- */
.livevideo-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 colonnes égales */
    gap: 10px; /* Espacement égal entre les rectangles */
    justify-content: center; /* Centrer la grille */
    padding: 20px;
    margin-left: 15%; /* Marge à gauche proportionnelle */
    margin-right: 15%; /* Marge à droite proportionnelle */
    grid-auto-flow: dense; /* Remplir les espaces vides de manière dense */
}


/* Styles pour les formats d'images */
.livevideo-gallery .card {
    background-color: #f0f0f0;
    border-radius: 5px;
    position: relative; /* Pour positionner l'image */
    aspect-ratio: 16 / 9; /* Assure un format 16/9 */
}

.livevideo-gallery .card.large {
    grid-column: span 2; /* Largeur flexible pour les rectangles */
    grid-row: span 2; /* Hauteur flexible pour les rectangles */
}

.livevideo-gallery .card.big {
    grid-column: span 3; /* Largeur flexible pour les rectangles */
    grid-row: span 3; /* Hauteur flexible pour les rectangles */
}

.livevideo-gallery .card.small {
    grid-column: span 1; /* Largeur flexible pour les rectangles */
    grid-row: span 1; /* Hauteur flexible pour les rectangles */
}

.gallery-colonne {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 4 colonnes égales */
    gap: 0px; /* Espacement égal entre les rectangles */
    justify-content: center; /* Centrer la grille */
    padding: 20px;
    grid-auto-flow: dense; /* Remplir les espaces vides de manière dense */
}

.gallery-colonne2{
    display: grid;
    grid-template-columns: repeat(9, 1fr); /* 4 colonnes égales */
    gap: 0px; /* Espacement égal entre les rectangles */
    justify-content: center; /* Centrer la grille */
    padding: 20px;
    grid-auto-flow: dense; /* Remplir les espaces vides de manière dense */
}

.carousels-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes pour les 3 carrousels */
    gap: 20px; /* Espacement entre les carrousels */
    justify-content: center; /* Centrer la grille */
    padding: 20px;
    
}

.carousel {
    width: 100%; /* Ajustez cette valeur selon vos besoins */
    max-width: 700px; /* Largeur maximale du carrousel */

    margin: 0 auto; /* Centre le carrousel horizontalement */
}

.carousel-item card {
    width: 100%;
    padding-bottom: 100%; /* Hauteur égale à la largeur pour rendre l'image carrée */
    object-fit: cover; /* Assure que l'image couvre entièrement l'espace */
    
}


.livevideo-gallery .card img,
.livevideo-gallery .card video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.livevideo-gallery .card img:hover {
    filter: grayscale(80%); /* Applique un effet de grisage à 80% au survol */
}



/* --- Grille des photographies --- */
.photographie-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 2 colonnes égales */
    gap: 20px; /* Espacement égal entre les photos */
    justify-content: center; /* Centrer la grille */
    padding: 20px;
    width: 100%;
    
}


.photo-card img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease; /* Transition pour l'effet de zoom */
}

.photo-card.left {
    grid-column: 1 / 2; /* Place la photo dans la première colonne */
}

.photo-card.center {
    grid-column: 3 / 4; /* Place la photo dans la deuxième colonne */
    
}

.photo-card.centerbig {
    grid-column: 3 / 4; /* Place la photo dans la deuxième colonne */
    width: 200%;

    
}


.photo-card.right {
    grid-column: 4 / 4; /* Place la photo dans la deuxième colonne */
    
    
}


.photo-left {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease; /* Transition pour l'effet de zoom */
}

/* --- Styles pour le modal --- */
.modal {
    display: none; /* Caché par défaut */
    position: fixed; /* Reste en place même lors du défilement */
    z-index: 1000; /* Au-dessus des autres éléments */
    padding-top: 60px; /* Espacement en haut */
    left: 0;
    top: 0;
    width: 100%; /* Largeur complète */
    height: 100%; /* Hauteur complète */
    overflow: auto; /* Permet le défilement si nécessaire */
    background-color: rgba(0, 0, 0, 0.9); /* Fond noir avec transparence */
}

.modal-content {
    margin: auto;
    display: block;
    width: 80%; /* Largeur de l'image */
    max-width: 700px; /* Largeur maximale de l'image */
}

.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

.presentation {
    background-color: black; /* Fond noir sous chaque carte */
    margin: 0 auto;
    padding: 20px 13%;
    color: white;
    display: flex;  
    align-items: center;

}

/* --- Section de vidéo --- */
.video-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background-color: #000;
}

.video-container {
    max-width: 800px;
    width: 100%;
    position: relative;
    padding-top: 30.25%; /* 16:9 Aspect Ratio */
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.text-center {
    color: white;
    text-align: center;
    margin-top: 20px;
}
/* --- Pied de page --- */
footer {
    text-align: center;
    padding: 20px;
    background-color: white;
    color: black;
}


.controls {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    gap: 10px;
}

.fullscreen-btn,
.mute-btn {
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    padding: 5px;
    border-radius: 5px;
}

.fullscreen-btn:hover,
.mute-btn:hover {
    background-color: rgba(0, 0, 0, 0.7);
}




/* --- Media Queries pour les petits écrans --- */
@media (max-width: 1200px) {
body {
      font-size: 14px; /* Ajustez la taille de la police pour les petits écrans */
}

.nav-wrapper {
     flex-direction: column;
      align-items: center;
}

.menu {
      flex-direction: column;
       gap: 20px; /* Réduisez l'espacement entre les éléments du menu */
}

.menu > li > a.visuals {
    position: relative;
}

.menu > li > a.visuals::after {
    content: '\25BC'; /* Flèche vers le bas */
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
}

.menu > li > a.visuals.active + .submenu {
    display: block;
}

.header-boxes {
      gap: 20px; /* Réduisez l'espacement entre les petits carrés noirs */
}

.index {
        grid-template-columns: 1fr; /* 1 colonne pour les cartes */
     gap: 10px; /* Réduisez l'espacement entre les cartes */
}

.index .card {
      width: auto; /* Largeur de la carte à 100% */
      height: auto; /* Hauteur automatique */
}

.index .card .overlay {
    pointer-events: none; /* Désactive les événements de pointeur sur l'overlay */
}

.index .card .overlay.show {
    opacity: 1; /* Affiche l'overlay */
}

.index .card.clicked .overlay {
    pointer-events: auto; /* Réactive les événements de pointeur sur l'overlay */
}

.index .card.clicked .overlay.show {
    opacity: 1; /* Affiche l'overlay */
}

.fiction-gallery,
.livevideo-gallery,
.photographie-gallery,
.black-background {
      grid-template-columns: none !important; /* 1 colonne pour les galeries */
      gap: 3px; /* Réduisez l'espacement entre les éléments */
      margin-left: 0;
      margin-right: 0;
      padding: 10px;
}

.contact-container {
    text-align: center;
    padding: 20px;
    width: 90%;
    flex-direction: column !important;
    align-items: center;
}

    
.fiction-gallery .card,
.livevideo-gallery .card,
.photographie-gallery .card,
.black-background .card {
      aspect-ratio: auto; /* Désactivez le format 16/9 pour les petits écrans */
}

.carousel {
      max-width: 100%; /* Largeur maximale à 100% */
}

.video-container {
      padding-top: 56.25%; /* Ajustez le ratio pour les vidéos */
}

.text-center {
       font-size: 12px; /* Ajustez la taille de la police pour les textes centrés */
}

footer {
      padding: 10px; /* Réduisez le padding du pied de page */
}

.presentation {
    background-color: black; /* Fond noir sous chaque carte */
    margin: 0 auto;
    padding: 20px 13%;
    color: white;
    display: flex;  
    align-items: center;
    flex-direction: column;
    
}


}



@media (max-width: 480px) {
.menu {
      gap: 10px; /* Réduisez encore plus l'espacement entre les éléments du menu */
}

.submenu {  
    font-family: Kiona;
}   


.index .card,
.fiction-gallery .card,
.livevideo-gallery .card,
.photographie-gallery .card,
.black-background .card {
     width: 100%; /* Largeur de la carte à 100% */
     height: auto; /* Hauteur automatique */
}

.video-container {
      padding-top: 75%; /* Ajustez le ratio pour les vidéos */
}

.text-center {
     font-size: 10px; /* Ajustez la taille de la police pour les textes centrés */
}

footer {
    padding: 5px; /* Réduisez encore plus le padding du pied de page */
}
}