/* ==========================================================================
   INITIALISATION ET POLICES DE CARACTÈRES
   ========================================================================== */
.unselectable * {
    cursor: no-drop;
}

@font-face {
    font-family: 'Roboto';
    src: url("../need/css/fonts/Robot-Regular.ttf") format('truetype');
}

@font-face {
    font-family: 'Poppins';
    src: url("../need/css/fonts/Poppins-Regular.ttf") format('truetype');
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
} 

html {
    overflow-y: scroll;
    font-size: 62.5%; /* Définit 1rem = 10px pour simplifier vos calculs */
    cursor: default;
}

body {
    width: 100%;
    background: #f5f5f5;
    font-family: 'Roboto', 'Poppins', 'Lato', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.clear {
    display: block;
    clear: both;
}


/* ajouté par PO*/



.blockaffiche {
    /* Sur mobile : 2 affiches côte à côte */
    flex: 0 1 calc(25% - 15px); 
    max-width: 100%; /* Taille maximale pour ne pas pixéliser l'image */
    box-sizing: border-box;
}

/* 3. Sur grand écran d'ordinateur : repassez à 5 affiches par ligne */
/*@media (min-width: 800px) {
    .blockaffiche {
        flex: 0 1 calc(20% - 15px); 
    }
}*/

/* Sécurité Responsive : Évite que 4 affiches ne soient trop écrasées sur petit écran */
@media (max-width: 800px) {
    .blockaffiche {
        flex: 0 1 calc(50% - 10px); /* Passe à 2 affiches par ligne sur Tablettes/Mobiles */
    }
}

.blockaffiche img {
	width: 100%;
    height: auto;
    border-radius: 8px;
	}
	
.blockaffiche :hover img {
	-webkit-filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

/*.flagProgramme {
			color:white;margin:0rem;
			border-radius: 5px;
			font-size:2rem;
			padding: 0.5rem;
			margin: 1rem;
			
			}*/
			
			.flagProgramme		{
			display:inline;
			float:left;
			width:100%;
			text-align:center;
			color:white;margin:1rem;
			border-radius: 10px;
			background-color:black;
			font-weight: normal;
			font-size:3.5rem;
			padding: 0.5rem;
			}

#container-affiches {
    display: flex;
    flex-wrap: wrap; /* INDISPENSABLE pour que les affiches passent à la ligne sur mobile */
    justify-content: center;
    gap: 20px;
    width: 100%;
}
/* pour faire fonctionner la grille tous horaires*/


#container-horairefilm .blockhorairefilm img  {
	height:25px;
	width:25px;
	position:relative;
	/*right:center;
	bottom:center;*/
	float:right;
	margin-left:2px;
	box-shadow:8px 8px 10px 0 rgba(0,0,0,0.5);
	z-index:1;
}	
	
.blockhorairefilm :hover{
	color:red;
	box-shadow:8px 8px 10px 0 rgba(0,0,0,0.5);
	/*text-shadow: black 0.0em 0.0em 0.0em*/
}

.blockhorairefilm-block :hover{
	color:white;
	
}


.blockhorairefilm-box {
	display : flex;
	flex-direction:row;
	z-index:2;
	height:150px;
	width:260px;
	align-items:center;
	justify-content:center;
	border:1px solid black;
	border-radius:5px;
	color:black;
	font-weight:100;
	text-align:center;
	font-size:1.9rem;
	box-shadow:8px 8px 10px 0 rgba(0,0,0,0.5);
	/*text-shadow: black 0.0em 0.0em 0.0em*/
}

	
.blockhorairefilm {
	display : flex;
	flex-direction:row;
	z-index:2;
	height:70px;
	width:130px;
	align-items:center;
	justify-content:center;
	border:1px solid black;
	border-radius:5px;
	color:black;
	font-weight:100;
	text-align:center;
	font-size:1.9rem;
	margin:10px;
	box-shadow:8px 8px 10px 0 rgba(0,0,0,0.5);
	/*text-shadow: black 0.0em 0.0em 0.0em*/
}


.blockhorairefilmtroptard {
	display : flex;
	flex-direction:row;
	z-index:2;
	height:70px;
	width:130px;
	align-items:center;
	justify-content:center;
	border:1px solid black;
	border-radius:5px;
	color:black;
	background-color:grey;
	font-weight:100;
	text-align:center;
	font-size:1.9rem;
	box-shadow:8px 8px 10px 0 rgba(0,0,0,0.5);
	/*text-shadow: black 0.0em 0.0em 0.0em*/
}

.blockhorairedate {
	display : flex;
	flex-direction:row;
	z-index:2;
	height:70px;
	width:130px;
	align-items:center;
	justify-content:center;
	border:1px solid black;
	border-radius:5px;
	color:black;
	font-weight:100;
	text-align:center;
	font-size:1.9rem;
	box-shadow:8px 8px 10px 0 rgba(0,0,0,0.5);
	/*text-shadow: black 0.0em 0.0em 0.0em*/
}

 #container-horairefilm  img { 
		/*margin-left: auto;margin-right: auto;width: 4rem;height : 4rem;*/
		float:left;
		/*box-shadow:8px 8px 10px 0 rgba(0,0,0,0.5);*/
		z-index:1;
		height:50px;
		width:120px;
		
		
		}

#container-titrefilm-ad-pmr-vfstf-G {
	display:grid;
	/*border-top:30px solid white;*/
	grid-template-columns:1fr;
	color:red;	font-weight:100;text-align:center;font-size:5rem;
	/*flex-direction: column;*/
	flex-grow :1;
	align-items:center;
	justify-content:center;
	/*background-color:#f0f0f0;*/
	background-color:white;
	/*text-shadow: grey 0.05em 0.05em 0.1em;*/
	/*border:1px solid black;*/
	margin-top:30px;
}

.imgVFSTF{
	width:100px;
	height:100px;
	
	
}



#container-titrefilm-ad-pmr-vfstf-B {
	display:grid;
	/*border-top:30px solid white;*/
	grid-template-columns:1fr;
	color:red;	font-weight:100;text-align:center;font-size:5rem;
	/*flex-direction: column;*/
	/*flex-grow :1;*/
	align-items:center;
	justify-content:center;
	background-color:#ebe0d3;
	/*text-shadow: grey 0.05em 0.05em 0.1em;*/
	/*border-top:1px solid black;
	border-left:1px solid black;
	border-right:1px solid black;*/
	margin-top:30px;
	
}

#container-horairefilm-ad-pmr-vfstf-G {
	display:grid;
	
	/*border:5px solid white;*/
	grid-template-columns:repeat(auto-fill, minmax(170px, 1fr));
	color:red;	font-weight:100;text-align:center;font-size:2rem;
	/*flex-direction: column;*/
	flex-grow :1;
	align-items:center;
	justify-content:center;
	/*background-color:#f0f0f0;*/
	background-color:white;
	/*text-shadow: grey 0.05em 0.05em 0.1em;*/
	border-bottom:1px solid black;
}

#container-horairefilm-ad-pmr-vfstf-B {
	display:grid;
	/*border-top:5px solid white;*/
	/*border-style:outset;*/
	grid-template-columns:repeat(auto-fill, minmax(170px, 1fr));
	color:red;	font-weight:100;text-align:center;font-size:2rem;
	/*flex-direction: column;*/
	flex-grow :1;
	align-items:center;
	justify-content:center;
	background-color:#ebe0d3;
	/*text-shadow: grey 0.05em 0.05em 0.1em;*/
	border-bottom:1px solid black;
	/*border-left:1px solid black;
	border-right:1px solid black;*/
}

.blockhorairefilm-ad-vfstf-pmr {
	display : flex;
	flex-direction:row;
	z-index:2;
	height:60px;
	width:220px;
	align-items:center;
	justify-content:center;
	border:1px solid black;
	border-radius:5px;
	color:black;	font-weight:100;text-align:center;font-size:1.9rem;
	background-color:white;
	box-shadow:8px 8px 10px 0 rgba(0,0,0,0.5);
	/*text-shadow: black 0.0em 0.0em 0.0em;*/
}

.blockhorairefilm-block {
	display : flex;
	flex-direction:row;
	z-index:2;
	padding:5px;
	margin:10px;
	height:70px;
	width:150px;
	align-items:center;
	justify-content:center;
	border:1px solid black;
	border-radius:5px;
	color:black;	font-weight:bold;text-align:center;font-size:1.9rem;
	background-color:#F5F5F5;
	box-shadow:8px 8px 10px 0 rgba(0,0,0,0.5);
	/*text-shadow: black 0.0em 0.0em 0.0em;*/
}

.blockhorairefilm-block :hover{
	background-color:blue;
	color:white;
}


#container-horairefilm {
	display:grid;
	border:4px solid white;
	grid-template-columns:repeat(auto-fill, minmax(130px, 1fr));
	color:red;	font-weight:100;text-align:center;font-size:2rem;
	/*flex-direction: column;*/
	flex-grow :1;
	align-items:center;
	justify-content:center;
	/*background-color:#f5f5f5;*/
	/*text-shadow: grey 0.05em 0.05em 0.1em*/
}
	
#container-horairefilm1 {
	display:grid;
	/*border:4px solid white;*/
	grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
	color:green;	font-weight:100;text-align:center;font-size:2rem;
	/*flex-direction: column;*/
	flex-grow :1;
	align-items:center;
	justify-content:left;
	background-color:#ebe0d3;
	/*text-shadow: grey 0.05em 0.05em 0.1em*/
}
#container-horairefilm2 {
	display:grid;
	/*border:4px solid white;*/
	grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
	color:red;	font-weight:100;text-align:center;font-size:2rem;
	/*flex-direction: column;*/
	flex-grow :1;
	align-items:center;
	justify-content:left;
	background-color:white;
	/*text-shadow: grey 0.05em 0.05em 0.1em*/
}	
	


/* ==========================================================================
   ÉLÉMENTS STRUCTURELS ET CONTENEURS PRINCIPAUX
   ========================================================================== */
#container {
    position: relative;
    padding: 0 2rem;
    width: 100%;
}

#inside-container {
    max-width: 104rem;
    width: 100%;
    margin: 0 auto;
    position: relative;
}

a {
    text-decoration: none;
    cursor: pointer;
}
	
iframe {
    width: 100%;
    height: 100%;
    border: none;
}	
	
img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Sécurité pour la bannière principale du haut */
a[href="accueil.html"] img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* Centre la bannière automatiquement */
}


/* Container d'intégration externe */
#container-iframe {
    display: grid;
    border-top: 30px solid white;
    grid-template-columns: 1fr;
    color: red;
    font-weight: bold;
    text-align: center;
    font-size: 4rem;
    min-height: 550px;
    background-color: #ebe0d3;
}

/* ==========================================================================
   BLOCS DE CONTENUS & FICHES FILMS (RESPONSIVE)
   ========================================================================== */
.titrefilmencours {
    color: black;	
    text-align: left;
    font-size: 4rem; /* Réduit pour éviter les débordements sur smartphone */
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    margin-top: 20px;
}

@media (min-width: 768px) {
    .titrefilmencours { font-size: 7rem; } /* Taille d'origine sur grand écran */
}

.titrefilmencours2 {
    color: black;	
    font-weight: normal;
    font-style: italic;
    text-align: center;
    font-size: 3rem;
    margin: 10px;
}

.textefilmencours {
    color: black;	
    text-align: justify;
    font-size: 1.6rem;
    line-height: 1.6;
    padding: 15px 0;
}

span.italiquegris {
    color: grey;	
    font-style: italic;
    font-size: 1.8rem;
}

.petit {
    color: black;
    font-size: 1.4rem;
    padding: 5px;
    font-weight: 300;
}

/* ==========================================================================
   ACCESSIBILITÉ ET BLOCS COMPOSANTS (RESPONSIVE FLEXBOX)
   ========================================================================== */
#container-accessibilites {
    display: flex;
    flex-direction: column; /* Superposition sur Mobile */
    gap: 10px;
    font-size: 1.8rem;
    color: black;
    padding: 15px;
    margin: 10px 0;
    text-align: center;
}

#container-accessibilites > div {
    padding: 15px;
    border: 2px solid lightgrey;
    border-radius: 8px;
    transition: all 0.3s ease;
}

#container-accessibilites > div:hover {
    background-color: grey;
    color: white;
}

/* Alignement horizontal sur ordinateur */
@media (min-width: 768px) {
    #container-accessibilites {
        flex-direction: row;
        justify-content: space-between;
    }
    #container-accessibilites > div {
        flex: 1;
    }
}

.imageACCESSIBILITE { 
    float: right;
    width: 2rem;
    height: 2rem;
}

/* ==========================================================================
   FORMATIONS DES FOOTERS ET PARTENAIRES (RESPONSIVE AUTO-FILL)
   ========================================================================== */
#container-basdepage {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    padding: 20px 0;
}

.blockbasdepage {
    height: 100px;
    width: 120px;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
}

#container-contacts {
    display: flex;
    flex-direction: column; /* Lignes verticales sur Mobile */
    gap: 20px;
    font-size: 1.5rem;
    color: black;
    padding: 20px;
    border: 2px solid lightgrey;
    margin: 15px 0;
    background-color: lightgrey;
    border-radius: 8px;
}

@media (min-width: 768px) {
    #container-contacts {
        flex-direction: row; /* 3 colonnes propres alignées sur PC */
        justify-content: space-between;
    }
    #container-contacts > div {
        flex: 1;
    }
}

/* ==========================================================================
   MODULES SECTIONS PROCHAINEMENT & FILMS LIÉS
   ========================================================================== */
#container-prochainement2 {
    display: flex;
    flex-direction: column;
    border: 1px solid #ccc;
    background: white;
    padding: 20px;
    margin: 20px 0;
    gap: 15px;
    border-radius: 8px;
}

.prochtitre2 {
    font-family: 'Poppins', sans-serif;
    color: black;	
    font-weight: 700;
    text-align: left;
    font-size: 2.8rem;
}

.prochtexte2 img {
    width: 100%;
    max-width: 260px;
    height: auto;
    margin: 0 auto 15px auto;
    display: block;
    border-radius: 6px;
}

.prochtexte2 {
    color: black;
    font-size: 1.6rem;
    text-align: justify;
    line-height: 1.5;
}

.espaceentrebloc {
    margin: 8px 0;
}

/* Placement de l'affiche à gauche uniquement sur ordinateur */
@media (min-width: 640px) {
    .prochtexte2 img {
        float: left;
        margin-right: 20px;
        margin-bottom: 10px;
    }
}

/* ==========================================================================
   MODULE LOADER / ENGRENAGES D'ATTENTE SÉANCE
   ========================================================================== */
.loader-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    position: relative;
}

.gear {
    width: 100px;
    height: 100px;
    position: absolute;
}

#gear1 {
    left: 44%;
    transform: translate(-50%, -50%);
    animation: rotate-clockwise 4s linear infinite;
}

#gear2 {
    left: 58%;
    transform: translate(-50%, -50%) rotate(10deg);
    animation: rotate-counterclockwise 4s linear infinite;
}

.gear img {
    width: 100%;
    height: 100%;
    filter: brightness(0) saturate(100%) invert(44%) sepia(92%) saturate(3154%) hue-rotate(353deg) brightness(101%) contrast(101%);
}

@keyframes rotate-clockwise {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes rotate-counterclockwise {
    from { transform: translate(-50%, -50%) rotate(10deg); }
    to { transform: translate(-50%, -50%) rotate(-346deg); }
}