/* ======= GÉNÉRAL ======= */ /* Style de base du */ body { background-color: #fff3e0; /* couleur de fond beige clair */ font-family: Arial, sans-serif; /* police par défaut */ color: #333; /* texte en gris foncé */ margin: 0; padding: 0; animation: fadeIn 0.6s ease-in; /* effet d’apparition */ } /* Animation d’apparition */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); /* décalage vers le bas au départ */ } to { opacity: 1; transform: translateY(0); /* revient à la position initiale */ } } /* ======= HEADER ======= */ header { text-align: center; padding: 20px; background: linear-gradient(to right, #ff0000, #ffcc00); color: white; } /* Titre principal dans le header */ header h1 { margin: 0; font-size: 3em; } /* Applique la police spéciale à ces éléments */ header h1, .detail-card h2, .titre-trailer { font-family: 'Bebas Neue', sans-serif; } /* ======= SECTION DE RECHERCHE ======= */ /* Conteneur de la zone de recherche */ .search-section { display: flex; flex-direction: column; align-items: center; margin: 30px auto; } /* Style du formulaire */ .search-section form { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 15px; } /* Input texte de recherche */ .search-section input[type="text"] { padding: 10px; font-size: 1.2em; width: 400px; border: 2px solid #ff0000; border-radius: 5px; transition: all 0.3s ease; } /* Effet hover/focus du champ de recherche */ .search-section input[type="text"]:hover, .search-section input[type="text"]:focus { border-color: #cc0000; background-color: #fffaf0; transform: scale(1.03); } /* Bouton "Rechercher" et "Plus d'options" */ .search-section button { padding: 10px 20px; font-size: 1.2em; background-color: #ff0000; color: white; border: none; border-radius: 5px; cursor: pointer; } /* Options avancées inline (avant ouverture) */ .search-section .advanced-options { flex-wrap: wrap; justify-content: center; margin-top: 15px; gap: 10px; } /* ======= CARTES DE PROGRAMMES ======= */ /* Conteneur général des cartes */ .cards-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 25px; margin: 20px auto; padding: 10px; } /* Carte individuelle */ .card { width: 200px; border: 1px solid #ccc; border-radius: 8px; overflow: hidden; background-color: #fff; transition: transform 0.2s; } .card:hover { transform: scale(1.05); /* zoom léger au survol */ } /* Image dans les cartes */ .card img { width: 100%; display: block; } /* Titre du programme */ .card h3 { margin: 10px; font-size: 1.1em; } /* Texte des cartes */ .card p { margin: 0 10px 10px 10px; font-size: 0.9em; color: #555; } /* ======= OPTIONS AVANCÉES ======= */ /* Bloc caché par défaut */ .advanced-options { overflow: hidden; max-height: 0; opacity: 0; transition: all 0.5s ease; display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; background-color: #fffaf0; padding: 0 20px; /* padding horizontal seulement */ border: 2px solid #ffcc00; border-radius: 10px; margin-top: 20px; width: 90%; max-width: 800px; } /* Apparition du menu d’options */ .advanced-options.show { padding: 20px; max-height: 500px; opacity: 1; } /* Champs de sélection et filtres */ .advanced-options select, .advanced-options input[type="number"], .advanced-options input[type="date"] { padding: 10px; border: 2px solid #ff0000; border-radius: 5px; font-size: 1em; min-width: 150px; background-color: #fff; } /* ======= PAGE PROGRAMME DETAIL ======= */ /* Partie haute avec image de fond */ .detail-haut { background-size: cover; background-position: center; padding: 40px; color: white; } /* Contenu de la portion haute */ .detail-haut-contenu { display: flex; gap: 40px; background-color: rgba(0, 0, 0, 0.5); padding: 30px; border-radius: 15px; flex-wrap: wrap; } /* Affiche à gauche de l'affiche */ .affiche img { width: 300px; border-radius: 10px; box-shadow: 0 0 20px rgba(255,255,255,0.3); } /* Infos du programme à droite */ .infos { flex: 1; min-width: 300px; display: flex; flex-direction: column; gap: 10px; } /* Titre du programme */ .infos h1 { font-size: 4em; margin-top: 0; margin-bottom: 10px; color: #ffcc00; font-family: 'Bebas Neue', sans-serif; text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8); letter-spacing: 1px; } /* Partie basse */ .detail-bas { padding: 40px; background-color: #fff3e0; display: flex; flex-direction: column; align-items: center; gap: 30px; } /* Bouton retour */ .btn-retour { align-self: flex-start; background-color: #d32f2f; color: white; padding: 10px 20px; text-decoration: none; border-radius: 8px; margin-bottom: 10px; } /* Carte (section Acteurs / Budget / Trailers) */ .detail-card { background-color: white; padding: 20px; border-radius: 12px; width: 90%; max-width: 1000px; box-shadow: 0 0 10px rgba(0,0,0,0.1); text-align: center; } /* Carousel des acteurs */ .carousel-acteurs { position: relative; display: flex; overflow-x: auto; gap: 15px; padding: 10px 10px; scroll-snap-type: x mandatory; scroll-padding-left: 20px; padding-left: 10px; scrollbar-width: none; /* Firefox */ } .carousel-acteurs::-webkit-scrollbar { display: none; /* Chrome, Safari, Edge */ } /* Carte acteur */ .carte-acteur { position: relative; overflow: hidden; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); background: white; width: 160px; transition: transform 0.3s; flex: 0 0 auto; scroll-snap-align: start; } .carte-acteur:hover { transform: translateY(-5px); } .acteur-img-container { position: relative; width: 100%; height: 240px; } .acteur-img-container img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Info au survol */ .acteur-info { position: absolute; bottom: 0; width: 100%; background: rgba(0,0,0,0.7); color: white; padding: 12px; text-align: center; opacity: 0; transform: translateY(100%); transition: all 0.3s ease; box-sizing: border-box; } .acteur-info p { margin: 5px 0; } .carte-acteur:hover .acteur-info { opacity: 1; transform: translateY(0); } /* Centrage dans les sections */ .detail-card .carousel-acteurs { justify-content: center; } .detail-card .trailers { justify-content: center; } /* Liens réseaux sociaux */ .reseaux-sociaux { display: flex; justify-content: center; gap: 20px; margin-top: 10px; } .reseaux-sociaux a img { width: 32px; transition: transform 0.2s ease; } .reseaux-sociaux a:hover img { transform: scale(1.1); } /* Conteneur des flèches carousel */ .carousel-container { position: relative; display: flex; align-items: center; width: 100%; justify-content: center; gap: 10px; } /* Flèches */ .arrow { background-color: #d32f2f; color: white; border: none; padding: 10px 15px; font-size: 1.5em; border-radius: 50%; cursor: pointer; transition: background-color 0.2s ease; } .arrow:hover { background-color: #b71c1c; } /* Wrapper carousel */ .carousel-wrapper { width: 100%; overflow-x: hidden; } /* Zone des trailers */ .trailers { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; } /* Bloc trailer */ .trailer-wrapper { margin-bottom: 20px; text-align: center; } .trailer-frame { border: 4px solid #ff0000; border-radius: 12px; padding: 6px; background: linear-gradient(45deg, #ff0000, #ffcc00); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); display: inline-block; transition: transform 0.2s ease; } .trailer-frame:hover { transform: scale(1.03); } .titre-trailer { color: #d32f2f; font-size: 1.3em; margin-bottom: 8px; font-weight: bold; text-shadow: 1px 1px 2px #ffcc00; text-transform: uppercase; letter-spacing: 0.5px; font-family: 'Bebas Neue', sans-serif; } /* Titre des sections */ .detail-card h2 { font-size: 2.2em; color: #b71c1c; margin-top: 0; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; border-bottom: 2px solid #ffcc00; display: inline-block; padding-bottom: 5px; font-family: 'Bebas Neue', sans-serif; } /* Budget/Recette */ .budget-recette { font-size: 1.2em; color: #333; margin: 10px 0; } /* Séparateur visuel */ .separateur-detail { height: 30px; background: linear-gradient(to bottom, rgba(0,0,0,0.2), transparent); margin-bottom: -20px; } .site-header { background: linear-gradient(225deg, #ff0000, #ff6600); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 85%); padding: 50px 40px 80px; color: white; position: relative; z-index: 10; overflow: visible; } .header-content { display: flex; align-items: center; justify-content: space-between; gap: 40px; max-width: 1600px; margin: 0 auto; padding: 0 40px; position: relative; } .logo-container { display: flex; justify-content: flex-end; flex: 1; padding-left: 40px; } .logo { height: 220px; width: auto; object-fit: contain; opacity: 0; transform: scale(0.9); transition: transform 0.3s ease, opacity 0.3s ease; } .logo.loaded { opacity: 1; transform: scale(1); } .logo:hover { transform: scale(1.10) rotate(-2deg); } .site-slogan { font-size: 4em; font-family: 'Bebas Neue', sans-serif; margin: 0; text-shadow: 2px 2px 5px rgba(0,0,0,0.5); animation: sloganPulse 2.5s ease-in-out infinite; opacity: 0; transform: translateY(20px); transition: all 0.6s ease; flex: 2; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Transition sous header */ .header-transition { position: absolute; bottom: -30px; left: 0; width: 100%; height: 100px; background: linear-gradient(to right, #ff6600, #ffcc00); /* orange → jaune */ clip-path: polygon(0 0, 100% 30%, 100% 100%, 0% 100%); z-index: 15; pointer-events: none; } /* Animation du slogan */ @keyframes sloganPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } /* Page en-dessous du header */ main, .page-content { margin-top: -60px; z-index: 1; position: relative; } html, body { margin: 0; padding: 0; overflow-x: hidden; } body > *:first-child { margin-top: 0 !important; } button, input[type="submit"], .advanced-options select, .advanced-options input[type="number"], .advanced-options input[type="date"] { transition: all 0.3s ease; } button:hover, input[type="submit"]:hover { background-color: #cc0000; transform: scale(1.05); } .advanced-options select:hover, .advanced-options input[type="number"]:hover, .advanced-options input[type="date"]:hover { border-color: #cc0000; transform: scale(1.02); background-color: #fff5e6; } .tri-form { margin: 20px 0 20px 30px; position: absolute; left: -60px; top: 420px; text-align: left; width: 90%; max-width: 800px; padding-left: 5%; } .tri-form label { font-weight: bold; margin-right: 10px; font-size: 1.1em; } .tri-form select { padding: 10px; font-size: 1em; border: 2px solid #ff0000; border-radius: 5px; background-color: #fff; transition: all 0.3s ease; } .tri-form select:hover { border-color: #cc0000; background-color: #fff8e1; transform: scale(1.03); } /* Icône dans les boutons */ .icon-btn { width: 20px; vertical-align: middle; margin-right: 8px; }