/* Importer la police Sohne */
@font-face {
    font-family: 'SohneReg';
    src: url('../fonts/soehne-leicht.woff2') format('woff2');
    font-style: normal;
}

/* Importer la police Sohne Bold */
@font-face {
    font-family: 'SohneBold';
    src: url('../fonts/soehne-fett.woff2') format('woff2');
    font-style: normal;
}

h1, h2, h3, h4, p, medium, nav_liste, menu {
font-feature-settings:'kern';        /* turns on kerning */ 
text-rendering: optimizeLegibility;  /* emphasise on legibility when rendering, turns on ligatures and kerning */  
-webkit-font-smoothing: antialiased; /* apply font anti-aliasing for Webkit on OSX */  
-moz-osx-font-smoothing: grayscale;  /* apply font anti-aliasing for Firefox on OSX */
    
}    
    

*{
    margin:0;
    padding:0;
}

/* Exemple d'utilisation de la police */
body {
    padding:0;
    margin:0;
    font-family: "SohneReg";
font-size: 22px;
font-style: normal;
line-height: 27px; /* 122.727% */
}

h1 {
    font-family: "SohneBold";
    font-size: 70px;
    font-style: normal;
    line-height: 62px; /* 88.571% */
    text-transform: uppercase;
}
h2{
    font-family: "SohneBold";
    font-size: 31px;
    font-style: normal;
    line-height: 31px; /* 100% */
    text-transform: uppercase;
}

h3,.search_input{
font-family: "SohneBold";
font-size: 36px;
font-style: normal;
line-height: 38px; /* 105.556% */
text-transform: uppercase;
font-feature-settings: 'liga' off;
    
}


.medium{
font-family: "SohneReg";
font-size: 28px;
font-style: normal;

line-height: 34px; /* 121.429% */
}

p {
    font-weight: 400; /* Utilise SohneReg */
}


.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -10;
}



.top_film {
    height: 700px; /* Hauteur fixe */
    position: relative;
    width: 100%; /* Largeur pleine */
    overflow: hidden; /* Masquer les débordements */
    text-align: center;
}
.bodyfilms .top_film{
    height:540px;
}
.bodyfilm .top_film{
    height:600px;
}
.black .top_film{
    height:auto;
    background:black;
    min-height:200px;
}

.top_film .top_image {
    position: absolute; /* Positionner l'image absolument à l'intérieur de .top */
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Couvrir tout l'espace sans déformation */
    transform: translate(-50%, -50%); /* Centrer l'image */
    z-index:5;
}
.top_film .film_hinfo{
    color:white;
    position:absolute;
    bottom:100px;
    text-align: center;
    box-sizing: border-box;
    padding:0 50px;
    z-index:10;
    width:100%;
}
.top_film .film_hinfo a{
    text-decoration:none;
    color:inherit;
}
.top_film .film_hinfo .medium {
    padding:10px 0;
    visibility:visible;
}
.top_film .film_hinfo h1:not(.visible){
    visibility: visible;
}
.top_film .play{
    background: url('../pics/Play_Video.svg') center center no-repeat; 
    width:100px;
    height:100px;
    position:absolute;
    top: 50%;  /* Positionner au milieu verticalement */
    left: 50%; /* Positionner au milieu horizontalement */
    transform: translate(-50%, -50%); /* Centrer en utilisant une translation négative de 50% */
    z-index: 15; /* S'assurer que le bouton est au-dessus des autres éléments */
    cursor: pointer;
}
.toplogo {
    background: url('../pics/Logo_ECL_White.svg') center center no-repeat; /* Correct background property */
    width: 190px;
    height: 136px;
    position: absolute;
    z-index: 10;
    top: 10px;
    left: 30px;
    font-size: 0; /* Correct font-size to hide text */
}
.toplogo a{
    display:block;
    width:190px;
    height:136px;
}
.burger{
    background: url('../pics/Burger_menu.svg') center center no-repeat; 
    width:60px;
    height:60px;
    position:absolute;
    top:10px;
    right:20px; 
    z-index:10;
    cursor:pointer;
}
.burger.active{
    background: url('../pics/Close_navig.svg') center center no-repeat; 
}
.search{
    background: url('../pics/Search_White.svg') center center no-repeat; 
    width:60px;
    height:60px;
    position:absolute;
    top:10px;
    right:80px;
    z-index:10;
    cursor:pointer;
}


.topping{
    width:100%;
    height:80px;
    background:black;
    position:fixed;
    z-index:20;
}
.topping .toplogo{
    background: url('../pics/Logo_ECL_Compact_White.svg') center center no-repeat; 
    height:40px;
    width:105px;
    top:20px;
    left:30px;
}
.topping .burger{
    background: url('../pics/Burger_menu.svg') center center no-repeat; 
    top:10px;
}
.topping .search{
    background: url('../pics/Search_White.svg') center center no-repeat; 
}
.topping .menu{
    color:white;
}
.searchpanel{
    background:black;
    position:fixed;
    top:-1000px;
    left:0;
    width:100%;
    z-index:20;
    padding:20px 70px;
    box-sizing: border-box;
    transition: top 0.5s ease-in-out;
    z-index:100;
}
.searchpanel.active{
    top:0px;
}
.searchpanel .close{
    cursor:pointer;
    background: url('../pics/Close_navig.svg') center center no-repeat; 
    width:60px;
    height:60px;
    position:absolute;
    right:72px;
    top:7px;
    z-index:30;
}
.searchpanel form, .page_search form{
    display: flex;                /* Utiliser Flexbox pour aligner les éléments */
    align-items: center;          /* Centrer verticalement */
    padding-top: 50px;            /* Ajouter un espacement au-dessus */
    position: relative;     
}
.page_search form{
    padding-top:0;
}
.searchpanel .search_input, .page_search .search_input {
    width: 100%;
    background-color: transparent;  /* Fond transparent */
    border: none;                   /* Supprime toutes les bordures */
    border-bottom: 1px solid white;  /* Garde uniquement la bordure inférieure */
    color: white;                   /* Couleur du texte */
    outline: none;                  /* Supprime l'effet de focus */
    -webkit-appearance: none;       /* Désactive le style par défaut de l'input sur iOS */
    -moz-appearance: none;          /* Désactive le style par défaut sur Firefox */
    appearance: none;               /* Désactive le style par défaut des autres navigateurs */
    padding: 10px 0;   
    height:60px;
    box-sizing: border-box;             /* Ajouter du padding pour l'espacement */
}
.page_search .search_input {
    color:black;
}

/* Supprimer la bordure de focus par défaut sur mobile */
.searchpanel .search_input:focus, .page_search .search_input:focus {
    outline: none;
    background-color: transparent;  /* S'assurer que le fond reste transparent au focus */
}

/* Style pour le bouton de soumission */
.searchpanel .search_submit, .page_search .search_submit {
    background: url('../pics/BigArrow_white.svg') center center no-repeat; /* Image de la flèche */      /* S'assurer que l'image est bien ajustée */
    border: none;                  /* Supprimer les bordures */
    width: 60px;                   /* Largeur du bouton */
    height: 60px;                  /* Hauteur du bouton */
    cursor: pointer;               /* Afficher un curseur pour le bouton */
    padding: 0;
    border-bottom:1px solid white;   
    font-size:0px;         /* Espace entre l'input et le bouton */
}
.page_search .search_submit {
    background:url('../pics/Big_Arrow.svg') center center no-repeat; 
}

.searchpanel .search_submit:focus, .page_search .search_submit:focus {
    outline: none;                 /* Supprimer l'effet de focus */
}
footer {
    display: flex;                /* Aligner les éléments horizontalement */
    justify-content: space-between; /* Espacement entre les sections */
    box-sizing: border-box;       /* Inclure le padding et la bordure dans la taille de l'élément */
    font-family: "SohneBold"; /* Police personnalisée */
    font-size: 15px;

    line-height: 16px; /* 106.667% */
    letter-spacing: 0.3px;
    text-transform: uppercase;
    padding: 40px;   
    padding-bottom:20px;             /* Padding général autour du footer */
    gap: 25px;                  /* Espacement entre les sections (sans créer de marge externe) */
}
.black:not(.footerwhite) footer{
    background:black;
    color:white;
}

.footer1, .footer2, .footer3 {
    border-top: 1px solid black;
    padding: 20px 0;          /* Padding intérieur pour chaque section */
    text-align: left;
    flex: 1;                      /* Occuper un espace égal pour chaque section */
}
.black:not(.footerwhite) .footer1, .black:not(.footerwhite) .footer2, .black:not(.footerwhite) .footer3 {
    border-color:white;
}
footer a{
    color:inherit;
    text-decoration: none;
}
footer .legal{
    font-family: "SohneReg";
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 16px; /* 133.333% */
display:inline-block;
margin-left:20px;
}
.footer3 {
    display: flex;               /* Utiliser Flexbox pour aligner les éléments */
    justify-content: space-between; /* Distribuer les liens sur toute la largeur */
    align-items: center;         /* Centrer verticalement les liens si nécessaire */
    width: 100%;                 /* Assurer que .footer3 occupe toute la largeur disponible */
}

.footer3 a {
    flex-basis: 33%;             /* Chaque lien occupe un tiers de la largeur */        /* Ajouter un peu de padding vertical */
    text-decoration: none;       /* Supprimer les soulignements par défaut */
    color: inherit;              /* Conserver la couleur du texte du parent */
}

/* Alignements spécifiques */
.footer3 .facebook {
    text-align: left;            /* Aligner Facebook à gauche */
}

.footer3 .imdb {
    text-align: center;          /* Centrer IMDB */
}

.footer3 .instagram {
    text-align: right;           /* Aligner Instagram à droite */
}
.page_film, .page_team, .page_contact, .page_search, .page_home {
    padding:12px;
    width:100%;
    box-sizing: border-box;
}
.page_contact{
    padding:30px;
}
.contact_img{
    text-align:center;
    background:black;
}
.contact_img img{
    margin:auto;
    width:90%;
    max-width:600px;
    height:auto;
    display:block;
}
.page_home{
    background:black;
}
.page_team, .page_contact,.page_film{
    background:black;
    min-height:200px;
    color:white;
}
.page_contact{
    min-height:800px;
}
.team_intro{
    margin:auto;
    max-width:900px;
    padding-bottom:100px;
}
.nav{
    display: flex;                  /* Utiliser Flexbox pour aligner les éléments horizontalement */
    justify-content: space-between; /* Répartir les éléments horizontalement avec un espace égal */
    align-items: center;            /* Centrer les éléments verticalement */
    width: 100%;   
}
.nav_prev{
    background: url('../pics/previous.svg') center left no-repeat;
    width:60px;
    height:20px;
    display:block;
}
.nav_next{
    background: url('../pics/next.svg') center right no-repeat;
    width:60px;
    height:20px; 
    display:block;
}
.nav_liste{
    text-align: center;
    font-family: "SohneBold";
font-size: 16px;
font-style: normal;

line-height: 19px; /* 118.75% */
text-decoration: none;
color:inherit;
}
.blocs {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 20px; /* espace entre les blocs */
        padding-top:60px;
      }
.film_bloc_title{
    color: var(--Grey-text, #9C9C9C);
font-family: "SohneBold";
font-size: 16px;
font-style: normal;

line-height: 19px; /* 118.75% */
text-transform: uppercase;
}
.film_bloc{
flex: 1 1 calc(33.33% - 20px); /* trois colonnes par ligne avec espace */
  box-sizing: border-box;
}
.gauche_droite {
    display: flex;                  /* Utiliser Flexbox pour aligner les éléments horizontalement */
    justify-content: space-between; /* Espacement entre les éléments */
    gap: 20px;                      /* Ajouter un espace de 20px entre .film_gauche et .film_droite */
    width: 100%;                    /* Prendre toute la largeur disponible */
    box-sizing: border-box;    
    padding-top:60px;     /* Inclure padding et bordure dans les dimensions */
}
.film_gauche {
    flex: 0 1 calc(33.33% - 10px);                  /* .film_gauche occupe 30% de la largeur */
}
.film_gauche img{
    width:100%;
    height:auto;
}
.film_droite {
    flex: 0 1 calc(66.66% - 10px);         /* .film_droite occupe 70% moins l'espace entre les deux (20px) */
}
.depliants{
    border-top:1px solid black;
    margin-top:50px;
}
.depliant_title{
    background: url('../pics/Stroke.svg') center right no-repeat;
    border-bottom:1px solid white;
    line-height:50px;
    vertical-align: middle;
    cursor:pointer;
}
.depliant_title.active{
    background: url('../pics/Stroke_hover2.svg') center right no-repeat;
    border-bottom:0px;
}
.depliant_content{
    display:none;
    padding:20px 0;
    border-bottom:1px solid white;
}
.link_imdb{
    color:black;
    background:url('../pics/ArrowLong.svg') white center left 20px no-repeat;
    display:inline-block;
    padding:16px 32px;
    text-decoration:none;
    padding-left:90px;
    margin:50px 0;
}
.gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 images par ligne */
    grid-gap: 10px; /* Espacement de 10px entre les images */
    padding:50px 0;
}
.gallery a {
    display: block;
    width: 100%; /* Marges internes autour des images */
    box-sizing: border-box; /* Inclure le padding dans les dimensions */
}
.gallery img {
    width: 100%; /* L'image prend toute la largeur de son conteneur */
    height: auto; /* Conserve les proportions de l'image */
    display: block;
}
.similar .h2_title{
    padding:20px 0;
}
.similar_list{
display: grid;
    grid-template-columns: repeat(3, 1fr); /* Trois colonnes de taille égale */
    gap: 30px; /* Espace de 20px entre les éléments */
}
.similar_item,.film_item{
    position:relative;
    display:inline-block;
    color:white;
}
.similar_item img{
    width:100%;
    height:auto;
    display:block;
}
.similar_item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0); /* Pas de filtre par défaut */
    transition: background-color 0.3s ease; /* Transition fluide pour l'effet */
  }
  
  .similar_item:hover::before {
    background-color: rgba(0, 0, 0, 0.3); /* Filtre noir à 30% au survol */
  }



.similar_item .si_info, .film_item .si_info{
    position:absolute;
    bottom:20px;
    width:100%;
    text-align: left;
    color:white;
    transition: transform 0.3s ease;
    box-sizing: border-box;
    padding: 0px 5%;
    padding-right:50%;
}
.similar_item .si_info p, .film_item .si_info p{
    font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 19px; 
padding:10px 0;
}
.similar_item .si_genre, .film_item .si_genre{
border-radius: 30px;
border: 1px solid #000;
background: #FFF;
color: #000;
text-align: center;
/* Hover Prod Smartphone */
font-family: "SohneBold";
font-size: 14px;
font-style: normal;

line-height: 13px; /* 108.333% */
letter-spacing: 0.24px;
text-transform: uppercase;
padding:5px 10px;
visibility:hidden;
display:inline-block;
}
.similar_item:hover .si_info, .film_item:hover .si_info {
    transform: translateY(-20px); /* Déplacer le bloc vers le haut */
}
.similar_item:hover .si_genre, .film_item:hover .si_genre{
    visibility: visible;
}
.similar_item:hover h2, .film_item:hover h2{
    font-size: 35px; /* Augmente la taille du texte */
}
.similar_item:hover .si_info p, .film_item:hover .si_info p{
    font-size: 20px; /* Augmente la taille du texte */
}
.pour_films h3{
    text-align: center;
    padding-top:10px;
    padding-bottom:25px;
    color:white;
}
/* Conteneur principal */
.film_list, .film_list2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Trois colonnes égales */
    grid-gap: 12px; /* Espace entre les éléments */
    grid-auto-rows: minmax(100px, auto); /* Hauteur automatique */
    grid-auto-flow: dense; /* Remplir les espaces vides automatiquement */
}

/* Première ligne : 1/3 - 2/3 */
.film_list .film_item:nth-of-type(1) {
    grid-column: 1; /* Colonne 1 */
    grid-row: span 1; /* Une seule ligne */
}

.film_list .film_item:nth-of-type(2) {
    grid-column: 2 / span 2; /* Occupe les colonnes 2 et 3 (2/3 de largeur) */
    grid-row: span 1; /* Une seule ligne */
}

/* Deuxième ligne : 2/3 - 1/3 */
.film_list .film_item:nth-of-type(3) {
    grid-column: 1 / span 2; /* Occupe les colonnes 1 et 2 (2/3 de largeur) */
    grid-row: span 1; /* Une seule ligne */
}

.film_list .film_item:nth-of-type(4) {
    grid-column: 3; /* Colonne 3 */
    grid-row: span 1; /* Une seule ligne */
}

/* Films 5 et 6 (colonne 1 : 2/3 et 1/3 en hauteur) */
.film_list .film_item:nth-of-type(5), .film_list2 .film_item:nth-of-type(9n + 1) {
    grid-column: 1; /* Colonne 1 */
    grid-row: span 2; /* 2/3 de hauteur */
}

.film_list .film_item:nth-of-type(6), .film_list2 .film_item:nth-of-type(9n + 2) {
    grid-column: 1; /* Colonne 1 */
    grid-row: span 1; /* 1/3 de hauteur */
    align-self: end; /* Alignement en bas */
}

/* Films 7 et 8 (colonne 2 : 1/3 et 2/3 en hauteur) */
.film_list .film_item:nth-of-type(7), .film_list2 .film_item:nth-of-type(9n + 3) {
    grid-column: 2; /* Colonne 2 */
    grid-row: span 1; /* 1/3 de hauteur */
}

.film_list .film_item:nth-of-type(8), .film_list2 .film_item:nth-of-type(9n + 4) {
    grid-column: 2; /* Colonne 2 */
    grid-row: span 2; /* 2/3 de hauteur */
    align-self: end; /* Alignement en bas */
}

/* Films 9 et 10 (colonne 3 : 2/3 et 1/3 en hauteur) */
.film_list .film_item:nth-of-type(9), .film_list2 .film_item:nth-of-type(9n + 5) {
    grid-column: 3; /* Colonne 3 */
    grid-row: span 2; /* 2/3 de hauteur */
}

.film_list .film_item:nth-of-type(10), .film_list2 .film_item:nth-of-type(9n + 6) {
    grid-column: 3; /* Colonne 3 */
    grid-row: span 1; /* 1/3 de hauteur */
    align-self: end; /* Alignement en bas */
}
/* Films 11, 12, et 13 (1/3 de largeur chacun) */
.film_list .film_item:nth-of-type(11), .film_list2 .film_item:nth-of-type(9n + 7) {
    grid-column: 1; /* Colonne 1 */
    grid-row: span 1; /* Une seule ligne */
}

.film_list .film_item:nth-of-type(12), .film_list2 .film_item:nth-of-type(9n + 8) {
    grid-column: 2; /* Colonne 2 */
    grid-row: span 1; /* Une seule ligne */
}

.film_list .film_item:nth-of-type(13), .film_list2 .film_item:nth-of-type(9n + 9) {
    grid-column: 3; /* Colonne 3 */
    grid-row: span 1; /* Une seule ligne */
}

/* Si on a moins de 6 films restants, les placer en mode 3 colonnes */
.film_list2 .film_item:nth-last-of-type(-n+5) {
    grid-column: auto;
    grid-row: auto;
}

/* Films 14, 15, et 16 */
.film_list .film_item:nth-of-type(14) {
    grid-column: 1; /* Colonne 1 */
    grid-row: span 1; /* Une seule ligne */
}

.film_list .film_item:nth-of-type(15) {
    grid-column: 1; /* Colonne 1 */
    grid-row: span 1; /* Une seule ligne */
}

.film_list .film_item:nth-of-type(16) {
    grid-column: 2 / span 2; /* Occupe les colonnes 2 et 3 (2 colonnes) */
    grid-row: span 2; /* Occupe les deux lignes */
}

/* Films 5 et 6 (colonne 1 : 2/3 et 1/3 en hauteur) */
.film_list .film_item:nth-of-type(17) {
    grid-column: 1; /* Colonne 1 */
    grid-row: span 2; /* 2/3 de hauteur */
}

.film_list .film_item:nth-of-type(18) {
    grid-column: 1; /* Colonne 1 */
    grid-row: span 1; /* 1/3 de hauteur */
    align-self: end; /* Alignement en bas */
}

/* Films 7 et 8 (colonne 2 : 1/3 et 2/3 en hauteur) */
.film_list .film_item:nth-of-type(19) {
    grid-column: 2; /* Colonne 2 */
    grid-row: span 1; /* 1/3 de hauteur */
}

.film_list .film_item:nth-of-type(20) {
    grid-column: 2; /* Colonne 2 */
    grid-row: span 2; /* 2/3 de hauteur */
    align-self: end; /* Alignement en bas */
}

/* Films 9 et 10 (colonne 3 : 2/3 et 1/3 en hauteur) */
.film_list .film_item:nth-of-type(21) {
    grid-column: 3; /* Colonne 3 */
    grid-row: span 2; /* 2/3 de hauteur */
}

.film_list .film_item:nth-of-type(22) {
    grid-column: 3; /* Colonne 3 */
    grid-row: span 1; /* 1/3 de hauteur */
    align-self: end; /* Alignement en bas */
}

/* Films 11, 12, et 13 (1/3 de largeur chacun) */
.film_list .film_item:nth-of-type(23) {
    grid-column: 1; /* Colonne 1 */
    grid-row: span 1; /* Une seule ligne */
}

.film_list .film_item:nth-of-type(24) {
    grid-column: 2; /* Colonne 2 */
    grid-row: span 1; /* Une seule ligne */
}

.film_list .film_item:nth-of-type(25) {
    grid-column: 3; /* Colonne 3 */
    grid-row: span 1; /* Une seule ligne */
}

.film_list .film_item:nth-of-type(26) {
    grid-column: 1 / span 2; 
    grid-row: span 2; /* Une seule ligne */
}

.film_list .film_item:nth-of-type(27) {
    grid-column: 3; /* Colonne 2 */
    grid-row: span 1; /* Une seule ligne */
}

.film_list .film_item:nth-of-type(28) {
    grid-column: 3; /* Colonne 3 */
    grid-row: span 1; /* Une seule ligne */
}



  
  /* Pour l'image */
  .film_item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Remplit toute la div */
  }
  .film_item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1); /* Pas de filtre par défaut */
    transition: background-color 0.3s ease; /* Transition fluide pour l'effet */
  }
  
  .film_item:hover::before {
    background-color: rgba(0, 0, 0, 0.5); /* Filtre noir à 30% au survol */
  }
.statut_diffusion{
    font-family: "SohneBold";
font-size: 16px;
font-style: normal;
    text-transform: uppercase;

line-height: 19px; /* 118.75% */
color:inherit;
text-decoration:none;
position:absolute;
top:40px;
width:100%;
text-align:center;
display:none;
}
.team_list{
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Deux colonnes par ligne */
    gap: 30px; /* Espacement vertical de 60px entre les éléments */
    padding: 0 20px; /* Marge intérieure horizontale de 20px sur les bords gauche et droit */
    margin: 0 -20px; /* Marge négative pour compenser le padding horizontal */
    box-sizing: border-box;
}
.team_item{
box-sizing: border-box;
margin-bottom:60px;
}
.team_item img{
    width:100%;
    height:auto;
}
.team_item span{
    font-family: "SohneReg";
font-size: 22px;
font-style: normal;

line-height: 27px; /* 122.727% */
display:block;
padding-top:15px;
}

.page_contact{
    padding-top:100px;
    padding-bottom:300px;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Deux colonnes par ligne */
    gap: 30px; /* Espacement vertical de 60px entre les éléments */
}
.contact_left,.contact_right, .contact_right .social{
    border-top:1px solid white;
    padding-top:20px;
}
.csection{
    border-top:1px solid white;
    padding:20px 0;
    margin-top:20px;
}
.contact_right .social .facebook{
    background: url('../pics/Facebook_white.svg') center center no-repeat;
    width:50px;
    height:50px;
    display:inline-block;
    margin-right:15px;
}
.contact_right .social .imdb{
    background: url('../pics/IMDB_white.svg') center center no-repeat;
    width:50px;
    height:50px;
    display:inline-block;
    margin-right:15px;
}
.contact_right .social .instagram{
    background: url('../pics/Instagram_white.svg') center center no-repeat;
    width:50px;
    height:50px;
    display:inline-block;
    margin-right:15px;
}
.search_item{
    padding:40px 0;
    border-bottom:1px solid black;
}
.search_resume{
    background:url('../pics/Big_Arrow.svg') no-repeat right 0px;
    margin-top:0px;
    padding-bottom:30px;
    border-bottom:1px solid black;
}
.search_type{
    color: #838383;
/* Title Small Desktop */

}
.search_item {
    display: flex;
    text-decoration:none;
    color:inherit;
    font-family: "SohneReg";
font-size: 16px;
font-style: normal;

line-height: 19px; /* 118.75% */
    flex-direction: row-reverse; /* Sur desktop, image à droite, texte à gauche *//* Ajout de la marge intérieure */
}

.search_item img {
    width: 50%; /* Vous pouvez ajuster cette valeur */
    height: auto;
}

.search_item_left {
    margin-right: 20px; /* Marge intérieure entre l'image et le texte */
    text-align: left;
    width:50%;
}
.search_item_left h3{
    padding-bottom:10px;
}
/* Si aucune image n'est présente dans .search_item, .search_item_left occupe 100% */
.search_item:not(:has(img)) .search_item_left {
    margin-right: 0;
    width: 100%;
}
.search_item .callto{
    background: url('../pics/Arrow-Long.svg') no-repeat center left;
    padding-left:70px;
    margin:20px 0;
}





@media only screen and (min-width: 768px) {
.top_film .menu{
    position: absolute;
    z-index: 10;
    cursor: pointer;
    right: 150px; /* Position fixe */
    top: 25px;
    color: white;
    opacity: 0; /* Menu caché par défaut */
    visibility: hidden; /* Empêche l'interaction lorsque le menu est caché */
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}
.top_film .topping  .menu {
    color:white;
}
.top_film .menu.menu_visible {
    opacity: 1; /* Menu visible */
    visibility: visible; /* Autorise l'interaction */
}
.top_film .menu ul{
    list-style-type:none;
}
.top_film .menu ul li{
    display:inline-block;
}
.top_film .menu ul li a{
font-family: "SohneBold";
font-size: 15px;
font-style: normal;

line-height: 16px; /* 106.667% */
letter-spacing: 0.3px;
text-transform: uppercase;
color:inherit;
text-decoration:none;
padding:15px;
}
.top_film .menu ul li.active a{
    background:url('../pics/Arrow_3.svg') center left no-repeat; 
}
}

@media only screen and (max-width: 768px) {
h1{
    font-size: 52px;
    line-height: 48px;
}
h2{
    font-size: 27px;
    line-height: 27px;
}
h3, .search_input{
    font-size: 27px;
    line-height: 27px;
}
.toplogo, .topping .toplogo{ 
    left:20px;
}
.medium{
/* Text Medium Smartphone */
font-family: "SohneReg";
font-size: 25px;
font-style: normal;

line-height: 31px; /* 124% */
}

.top_film .menu{
    width:100%;
    height:100%;
    background:black;
    position:fixed;
    top:0;
    right:-1000px;
    z-index:20;
    color:white;
font-family: "SohneBold";
font-size: 21px;
font-style: normal;

line-height: 23px; /* 109.524% */
letter-spacing: 0.42px;
text-transform: uppercase;
padding-top:90px;
box-sizing: border-box;
transition: right 0.5s ease-in-out;
}
.top_film .menu.menu_visible {
    right: 0px; /* Position où le menu apparaît */
}
.top_film .menu .close{
    background: url('../pics/Close_navig.svg') center center no-repeat; 
    width:60px;
    height:60px;
    position:absolute;
    right:12px;
    top:7px;
    cursor:pointer;
}
.top_film .menu ul li a {
    color:inherit;
    text-decoration:none;
}
.top_film .menu ul li:not(.langue) a {
    padding:15px 30px;
    text-align: left;
    display:block;
    background: url('../pics/Arrow_3.svg') right 35px center no-repeat;
}
.top_film .menu ul li:not(.langue).active a {
    background: url('../pics/tiret_white.svg') right 35px center no-repeat;
}
.top_film .menu ul li.langue a {
    position:absolute;
    top:10px;
    left:70px;
    padding:10px 15px;
}
.top_film .menu ul li.langue.langue1 a{
    left:20px;
}
.top_film .menu ul li.langue.active a {
    background: url('../pics/Arrow_3.svg') left center no-repeat;
}
.top_film .menu .social{
    display:block;
    margin-top:100px;
    padding:20px;
    display: flex;            /* Utiliser Flexbox */
    justify-content: space-between;  /* Distribuer les icônes avec un espacement égal */
    align-items: center; 
}
.top_film .menu .social .facebook{
    background: url('../pics/Facebook_white.svg') center center no-repeat;
    width:50px;
    height:50px;
    display:block;
}
.top_film .menu .social .imdb{
    background: url('../pics/IMDB_white.svg') center center no-repeat;
    width:50px;
    height:50px;
    display:block;
}
.top_film .menu .social .instagram{
    background: url('../pics/Instagram_white.svg') center center no-repeat;
    width:50px;
    height:50px;
    display:block;
}
.searchpanel{
    padding:20px 20px;
}
.searchpanel .close{
    right:18px;
}
footer {
    flex-direction: column;   /* Empiler les sections verticalement sur mobile */
    gap: 0px;   
    padding:20px;             /* Réduire l'espacement entre les sections sur mobile */
}
.page_film, .page_team, .page_contact, .page_search, .page_home{
    padding:20px;
}
.blocs {
    flex-direction: column;
  }
  .film_bloc {
    flex: 1 1 100%; /* occupe toute la largeur sur mobile */
    margin-bottom: 20px; /* espace entre les blocs sur mobile */
  }
  .gauche_droite {
    flex-direction: column;     /* Les éléments s'empilent verticalement sur mobile */
}
.film_gauche, .film_droite {
    width: 100%;                /* Chaque élément prend 100% de la largeur sur mobile */
    margin-bottom: 20px;        /* Ajouter un espace entre les éléments quand empilés */
}
.gallery {
    grid-template-columns: repeat(2, 1fr); /* 2 images par ligne sur mobile */
}
.similar_list {
    grid-template-columns: 1fr; /* Un élément par ligne */
}
.team_list {
    grid-template-columns: 1fr;
}
.page_contact{
    grid-template-columns: repeat(1, 1fr); /* Deux colonnes par ligne */
}

.search_item {
    flex-direction: column; /* Empiler les éléments sur mobile */
    padding: 20px 0; /* Ajuster la marge pour le mobile */
}

.search_item img {
    margin-bottom: 20px; /* Ajouter de l'espace sous l'image sur mobile */
}

.search_item_left {
    margin-right: 0; /* Supprimer la marge latérale sur mobile */
    width:100%;
}
.search_item img {
    width:100%;
}
.film_list {
    grid-template-columns: 1fr; /* Une seule colonne */
    grid-template-rows: auto; /* Hauteur automatique */
}
.film_item {
    grid-column: span 1!important; /* Chaque élément occupe une seule colonne */
    grid-row: span 1!important; /* Chaque élément occupe une seule ligne */
}
}