/* ===================================================== home-improvements.css Correctifs ciblés pour la page d'accueil (mobile) À charger APRÈS bundle.css et style.css dans le : ===================================================== */ /* ----------------------------------------------------- 1. FILTRES "À LA UNE" — passaient sur 2 lignes et prenaient beaucoup de hauteur (voir capture 1). On les passe en scroll horizontal, comme les filtres de la section Bandes-annonces, pour un rendu cohérent et plus compact. ------------------------------------------------------ */ #news-filters { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 2px; /* léger fondu sur les bords pour indiquer qu'on peut glisser */ -webkit-mask-image: linear-gradient(to right, transparent, black 12px, black calc(100% - 12px), transparent); mask-image: linear-gradient(to right, transparent, black 12px, black calc(100% - 12px), transparent); } #news-filters::-webkit-scrollbar { display: none; } .news-filter-btn { flex-shrink: 0; } /* ----------------------------------------------------- 2. HARMONISATION DES PADDINGS MOBILES Les sections avaient des paddings horizontaux légèrement différents (24px, 20px, clamp...). On uniformise à 16px sur mobile pour un alignement visuel cohérent de tous les titres de section. ------------------------------------------------------ */ @media (max-width: 600px) { .section, .collection-section, .now-playing, #news-section, .news-list-section, .editors-pick-section, .recent-articles-section, #trailers-section, #funfacts-section, .about-snippet-section { padding-left: 16px; padding-right: 16px; } .section, .collection-section, .now-playing { padding-top: 32px; padding-bottom: 32px; } /* Titres de section un peu plus petits pour respirer */ .section-header h2, .trending-title, .trailers-title, .news-section-title, .ff-title { font-size: 1.35rem; } } /* ----------------------------------------------------- 3. ZONE DE SÉCURITÉ EN BAS DE PAGE Les deux boutons flottants (dé + badge VS) sont fixes et finissent toujours par recouvrir la dernière section visible pendant le scroll. On ajoute un peu de marge avant le footer pour que le dernier contenu ne soit jamais totalement caché derrière eux. ------------------------------------------------------ */ @media (max-width: 600px) { .about-snippet-section { padding-bottom: 100px; } } /* ----------------------------------------------------- 4. BOUTON "ON REGARDE QUOI ?" (dé) Légèrement remonté sur mobile pour ne pas coller à la zone de gestes iOS (home indicator) et laisser un peu plus d'air avec le bas de l'écran. ------------------------------------------------------ */ @media (max-width: 600px) { .tonight-fab { bottom: 24px; } } /* ----------------------------------------------------- 5. HERO SLIDER MOBILE — petit ajustement d'air entre les tags (genre/année) et le titre, qui étaient un peu collés sur les écrans étroits. ------------------------------------------------------ */ @media (max-width: 600px) { .hero-slide-meta { margin-bottom: 8px; } .hero-slide-title { margin-bottom: 8px; } } /* ----------------------------------------------------- 6. RYTHME VERTICAL ENTRE SECTIONS (bureau/tablette) Dans bundle.css, chaque section a un padding vertical différent (24/28px, 40px, 48px selon les blocs), ce qui crée des écarts très inégaux d'une section à l'autre : ~56px par endroits, ~88-96px ailleurs (ex. gros vide sous "On Regarde Quoi ?", capture 3). On harmonise à 40px partout pour un espacement régulier et prévisible sur toute la page d'accueil. Scopé à min-width:601px pour ne jamais interférer avec le réglage mobile (32px) déjà fait au point 2 ci-dessus pour #trending-section et #vibes-section (qui portent aussi la classe .section). ------------------------------------------------------ */ @media (min-width: 601px) { #news-section { padding-top: 40px; padding-bottom: 40px; } #trending-section, #vibes-section { padding-top: 40px; padding-bottom: 40px; } #trailers-section { padding-top: 40px; padding-bottom: 40px; } .news-list-section, .editors-pick-section { margin-top: 40px; padding-bottom: 40px; } #funfacts-section { padding-top: 40px; padding-bottom: 40px; } } /* ----------------------------------------------------- 7. BOUTONS FLOTTANTS PLUS LISIBLES (Film vs Film / dé) Les deux FAB fixes se fondent parfois dans les visuels qui défilent sous eux (ex. capture 2 mobile : le bouton "Film vs Film" recouvre une carte du carrousel Tendances). On renforce leur halo pour qu'ils se détachent quel que soit le fond. !important nécessaire : le CSS de .versus-fab est injecté en JS (versus-fab.js) après le chargement de cette feuille de style, donc il gagnerait sinon la cascade à spécificité égale. ------------------------------------------------------ */ .tonight-fab, .versus-fab { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.45) !important; backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); } /* ----------------------------------------------------- 8. CARTES "SÉLECTION DE LA RÉDACTION" TROP GRANDES Les cartes allaient jusqu'à 220px de large (affiche carrée 1:1) — bien plus que les autres cartes du site (sliders/tendances : ~150-160px), ce qui les faisait ressortir de façon disproportionnée, surtout sur mobile en 2 colonnes (capture 2). On aligne leur taille sur le reste du site. ------------------------------------------------------ */ @media (min-width: 901px) { .editors-pick-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 150px)); } } @media (max-width: 900px) { .editors-pick-grid { grid-template-columns: repeat(2, minmax(0, 150px)); justify-content: center; } } /* ----------------------------------------------------- 9. IMAGES SUR LES CARTES "NOS DERNIERS ARTICLES" Ces 4 cartes étaient 100% texte. On ajoute une image en haut (visuels déjà existants dans assets/, réutilisés depuis articles-index.json et article-joker.html) avec la même logique que .news-card : image 16/9, badge en overlay, léger zoom au survol. ------------------------------------------------------ */ .recent-article-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; } .recent-article-img-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-surface); flex-shrink: 0; } .recent-article-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .recent-article-card:hover .recent-article-img-wrap img { transform: scale(1.06); } .recent-article-img-wrap .recent-article-tag { position: absolute; top: 10px; left: 10px; margin-bottom: 0; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); padding: 3px 10px; border-radius: 50px; border: 1px solid rgba(255, 255, 255, 0.15); } .recent-article-body { padding: 16px 18px 18px; } .recent-article-body h3 { margin-bottom: 8px; } .recent-article-body p { margin: 0; } /* ----------------------------------------------------- 10. PASTILLES "ON REGARDE QUOI ?" PLUS VISUELLES Simples pilules texte jusqu'ici. On ajoute une icône par catégorie (pas de photo pertinente pour un sélecteur de genre) + un survol plus marqué, pour que la section soit moins plate visuellement. ------------------------------------------------------ */ .tags li { display: flex; align-items: center; gap: 8px; padding: 12px 22px; font-size: 0.9rem; } .tags li:hover, .tags li.active { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35); } .tags li:nth-child(1)::before { content: "🎈"; } .tags li:nth-child(2)::before { content: "😱"; } .tags li:nth-child(3)::before { content: "😢"; } .tags li:nth-child(4)::before { content: "💥"; } .tags li:nth-child(5)::before { content: "✨"; } .tags li:nth-child(6)::before { content: "❤️"; } /* ----------------------------------------------------- 11. MOTION — page plus vivante au scroll et au survol ------------------------------------------------------ */ /* 11a. "Nos derniers articles" et "À propos" rejoignent le système de scroll-reveal existant (.fade-section géré par bundle.js). Classe ajoutée dans le HTML, le fondu de base vient déjà de bundle.css — rien d'autre à faire pour ces deux-là. */ /* 11b. Cartes "Nos derniers articles" en cascade : contenu statique présent dès le chargement, donc on peut se caler sur .visible (posé par l'IntersectionObserver existant) pour un vrai déclenchement au scroll. */ .recent-articles-grid .recent-article-card { opacity: 0; transform: translateY(18px); transition: opacity 0.5s ease, transform 0.5s ease; } .recent-articles-section.visible .recent-article-card { opacity: 1; transform: translateY(0); } .recent-articles-grid .recent-article-card:nth-child(1) { transition-delay: 0s; } .recent-articles-grid .recent-article-card:nth-child(2) { transition-delay: 0.1s; } .recent-articles-grid .recent-article-card:nth-child(3) { transition-delay: 0.2s; } .recent-articles-grid .recent-article-card:nth-child(4) { transition-delay: 0.3s; } /* 11c. Cartes "Sélection de la rédaction" en cascade : injectées en JS après un appel TMDB, donc une simple classe .visible sur le parent ne suffit pas toujours (l'élément peut arriver après coup). Une animation CSS se joue elle-même dès que la carte apparaît dans le DOM, peu importe le moment — plus fiable ici. */ @keyframes cardCascadeIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .editors-pick-card { animation: cardCascadeIn 0.5s ease both; } .editors-pick-card:nth-child(1) { animation-delay: 0s; } .editors-pick-card:nth-child(2) { animation-delay: 0.1s; } .editors-pick-card:nth-child(3) { animation-delay: 0.2s; } .editors-pick-card:nth-child(4) { animation-delay: 0.3s; } /* 11d. Survol plus vivant sur les cartes clés (léger zoom en plus du décollement déjà existant). */ .recent-article-card:hover { transform: translateY(-5px) scale(1.015); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); } .editors-pick-card:hover { transform: translateY(-5px) scale(1.015); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); } /* 11e. Petit effet "pressé" sur les boutons principaux du hero — retour tactile au clic. */ .hero-btn-primary:active, .hero-btn-secondary:active { transform: scale(0.96); } /* 11f. Pulsation discrète sur le bouton dé pour attirer l'œil sans être envahissante. Coupée pour les personnes ayant demandé de réduire les animations sur leur système (accessibilité). */ @media (prefers-reduced-motion: no-preference) { @keyframes fabPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } .tonight-fab-icon { display: inline-block; animation: fabPulse 2.4s ease-in-out infinite; } .tonight-fab:hover .tonight-fab-icon { animation-play-state: paused; } } /* ----------------------------------------------------- 12. CARTES "ACTUALITÉS" (.news-list-item) SANS MOTION Comme editors-pick-card, ce bloc est injecté en JS (renderNewsList, 9 articles) et n'avait ni entrée ni survol animés. Même logique d'animation (fiable même si le rendu JS arrive après coup) + zoom image. ------------------------------------------------------ */ @keyframes newsItemCascadeIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .news-list-item { animation: newsItemCascadeIn 0.5s ease both; transition: transform 0.2s ease; } /* Délai par colonne (1er/2e/3e de chaque ligne) plutôt que par carte : la cascade reste courte même avec 9 articles. */ .news-list-item:nth-child(3n+1) { animation-delay: 0s; } .news-list-item:nth-child(3n+2) { animation-delay: 0.1s; } .news-list-item:nth-child(3n) { animation-delay: 0.2s; } .news-list-item:hover { transform: translateY(-4px); } .news-list-thumb img { transition: transform 0.4s ease; } .news-list-item:hover .news-list-thumb img { transform: scale(1.06); } .news-list-thumb { transition: box-shadow 0.2s ease; } .news-list-item:hover .news-list-thumb { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4); } @media (max-width: 900px) { /* Grille passe à 2 colonnes : on recale le délai en conséquence (1er/2e de chaque ligne). */ .news-list-item:nth-child(3n) { animation-delay: 0.1s; } .news-list-item:nth-child(2n+1) { animation-delay: 0s; } .news-list-item:nth-child(2n) { animation-delay: 0.1s; } } /* ----------------------------------------------------- 13. BADGE "VS FILM VS FILM" — asymétrie avec le bouton dé Confirmé via versus-fab.js : ce bouton reste une large pilule avec texte sur mobile (son propre @media ne fait que réduire un peu la taille à 480px), alors que .tonight-fab (le dé) devient un simple cercle 52x52 sans texte dès 600px. Cette pilule plus large recouvre donc plus de contenu de carte que le dé (visible sur les captures mobile). On aligne les deux : le badge VS devient lui aussi une pastille ronde icône seule sur mobile, même taille et même hauteur que le dé (symétrie gauche/droite). !important nécessaire : le