/* ========================================================================== PORTFOLIO PHOTOGRAPHE - VERSION FINALE INTEGRALE Design : Luxe, Minimaliste, Immersif ========================================================================== */ /* --- POLICES : chargées via dans le HTML pour un téléchargement parallèle (au lieu de @import séquentiel) --- */ /* --- VARIABLES GLOBALES --- */ :root { /* Couleurs */ --bg-color: #0a0a0a; --text-color: #ffffff; --accent-color: #808080; /* Typographie */ --font-main: 'Montserrat', sans-serif; --font-title: 'Playfair Display', serif; /* Transitions */ --transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Paramètres de grille */ --cols-desktop: 6; --cols-mobile: 3; --gallery-gap: 30px; } /* --- RESET & BASE --- */ * { box-sizing: border-box; margin: 0; padding: 0; } /* * Réserve en permanence la gouttière de la barre de défilement verticale. * Sans cela, les pages sans scrollbar (about.html, parfois main_gallery.html) * ont un viewport plus large que index.html (qui scrolle), ce qui décale * légèrement le fond rendu par body.bg-fixed::before (position: fixed + * background-size: cover + background-position: top center). * Cette règle garantit une largeur de viewport identique sur toutes les pages. */ html { scrollbar-gutter: stable; } body { background-color: var(--bg-color); color: var(--text-color); font-family: var(--font-main); line-height: 1.6; overflow-x: hidden; -webkit-user-select: none; -ms-user-select: none; user-select: none; } img { touch-action: manipulation; } .carousel-viewport img { touch-action: pan-x; } /* ========================================================================== NAVIGATION ========================================================================== */ nav { position: fixed; top: 0; width: 100%; z-index: 1000; padding: 20px 0; transition: var(--transition); } .nav-container { display: flex; justify-content: space-between; align-items: center; max-width: 1400px; margin: 0 auto; padding: 0 50px; } .menu-links { display: flex; align-items: center; } .menu-links a { color: var(--text-color); text-decoration: none; margin-right: 30px; text-transform: uppercase; font-size: 1.1rem; letter-spacing: 3px; font-weight: 600; transition: var(--transition); } .menu-links a:hover { color: var(--accent-color); } .menu-links a[href="contact.html"] { display: none; } .nav-right { display: flex; align-items: center; gap: 20px; } .nav-logo { height: 40px; width: auto; transition: var(--transition); } .nav-logo:hover { transform: scale(1.1); } .lang-selector select { background: transparent; color: white; border: 1px solid var(--accent-color); padding: 5px; font-size: 0.7rem; cursor: pointer; outline: none; } /* --- BURGER MENU (Input caché & Label stylisé) --- */ .nav-toggle { display: none; } .nav-toggle-label { display: none; cursor: pointer; position: relative; z-index: 1001; } .nav-toggle-label span, .nav-toggle-label span::before, .nav-toggle-label span::after { display: block; background: white; height: 2px; width: 2em; border-radius: 2px; position: relative; } .nav-toggle-label span::before, .nav-toggle-label span::after { content: ''; position: absolute; } .nav-toggle-label span::before { bottom: 7px; } .nav-toggle-label span::after { top: 7px; } /* ========================================================================== PAGE D'ACCUEIL (INDEX) ========================================================================== */ /* * .home-hero-background * ----------------------------------------------------------------------- * Le fond visuel n'est PLUS géré ici. Il est rendu par body.bg-fixed::before * (voir plus bas), technique unique partagée par index.html, main_gallery.html * et about.html pour garantir un positionnement identique sur les 3 pages. * Cet élément ne conserve que le centrage du contenu du hero ; il doit rester * transparent pour laisser apparaître le ::before situé en arrière-plan. * ----------------------------------------------------------------------- */ .home-hero-background { height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; } .hero-content { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; max-width: 600px; z-index: 2; } .hero-text h1 { font-family: var(--font-title); font-size: 3.5rem; font-weight: 400; margin: 0; text-transform: uppercase; letter-spacing: 2px; text-shadow: 0 0 20px rgba(0, 0, 0, 0.8); } .hero-text p { font-size: 0.9rem; letter-spacing: 6px; text-transform: uppercase; margin-top: 15px; color: #cccccc; } /* ========================================================================== FOND FIXE (main_gallery.html & about.html) Utilise un pseudo-élément ::before en position: fixed pour garantir un rendu identique à .home-hero-background sur index.html. background-attachment: fixed sur body est rendu différemment selon les navigateurs — le ::before évite ce comportement. ========================================================================== */ body.bg-fixed::before { content: ''; position: fixed; inset: 0; /* top: 0; right: 0; bottom: 0; left: 0 */ background-image: linear-gradient(rgba(10, 10, 10, 0.75), rgba(10, 10, 10, 0.75)), url('assets/images/home_bg.png'); background-size: cover; background-position: top center; z-index: -1; } /* ========================================================================== BOUTON RETOUR (Back) ========================================================================== */ /* * Bouton retour (croix) — position fixed à droite * Hors du flux : n'interfère avec aucun autre élément */ .back-btn { position: fixed; top: 75px; right: 50px; background: none; border: 1px solid rgba(255, 255, 255, 0.3); color: white; font-size: 1.2rem; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0.5; transition: var(--transition); z-index: 1000; } .back-btn:hover { opacity: 1; border-color: var(--accent-color); color: var(--accent-color); } /* ========================================================================== GRILLE GALERIES ========================================================================== */ .page-header { text-align: center; padding: 150px 0 50px; } .page-header h1 { font-family: var(--font-title); font-size: 3rem; } .page-header p { font-size: 0.9rem; letter-spacing: 3px; text-transform: uppercase; color: var(--accent-color); margin-top: 10px; } .gallery-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gallery-gap); padding: 0 50px 100px; max-width: 1600px; margin: 0 auto; } .gallery-item { position: relative; cursor: pointer; overflow: hidden; aspect-ratio: 0.75 / 1; width: calc((100% - (var(--cols-desktop) - 1) * var(--gallery-gap)) / var(--cols-desktop)); } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); pointer-events: none; } .gallery-item:hover img { transform: scale(1.08); } .gallery-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; opacity: 0; transition: var(--transition); z-index: 1; } .gallery-item:hover .gallery-overlay { opacity: 1; } /* * .gallery-name * ----------------------------------------------------------------------- * Affiche le NOM D'AFFICHAGE de la galerie (gallery.name, ex: nom du modèle) * et non plus l'ID technique. * Ce texte est injecté par gallery.js via : * nameEl.textContent = gallery.name || galleryId; * ----------------------------------------------------------------------- */ .gallery-name { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); z-index: 2; color: white; font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase; border: 1px solid white; padding: 8px 12px; background: rgba(0, 0, 0, 0.3); transition: var(--transition); pointer-events: none; white-space: nowrap; } .gallery-item:hover .gallery-name { background: rgba(0, 0, 0, 0.7); border-color: var(--accent-color); color: var(--accent-color); } /* ========================================================================== CARROUSEL & TITRE DE GALERIE ========================================================================== */ .carousel-container { height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; background: #000; } /* * .gallery-view-title * ----------------------------------------------------------------------- * Affiche le NOM D'AFFICHAGE de la galerie (gallery.name, ex: nom du modèle) * et non plus l'ID technique. * Ce texte est injecté par carousel.js via : * document.getElementById('gallery-title').textContent = gallery.name || galleryId; * ----------------------------------------------------------------------- */ .gallery-view-title { position: absolute; top: 75px; left: 0; right: 0; text-align: center; width: 100%; font-family: var(--font-title); font-size: 1rem; letter-spacing: 3px; text-transform: uppercase; color: white; opacity: 0.7; z-index: 5; } .carousel-viewport { width: 85vw; height: 80vh; display: flex; align-items: center; justify-content: center; position: relative; flex-direction: column; } .carousel-viewport img { max-width: 100%; max-height: 100%; object-fit: contain; transition: opacity 0.5s ease-in-out; pointer-events: none; } .nav-btn { position: absolute; background: none; border: none; color: white; font-size: 4rem; cursor: pointer; z-index: 10; opacity: 0.3; transition: var(--transition); } .nav-btn:hover { opacity: 1; } #prev { left: 30px; } #next { right: 30px; } .counter { position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%); font-size: 0.65rem; letter-spacing: 2px; opacity: 0.4; color: white; } .model-link { position: absolute; bottom: -70px; left: 50%; transform: translateX(-50%); color: white; text-decoration: none; font-size: 0.6rem; letter-spacing: 1.5px; text-transform: uppercase; border-bottom: 1px solid rgba(255, 255, 255, 0.3); padding-bottom: 2px; transition: var(--transition); opacity: 0.4; } .model-link:hover { opacity: 1; color: var(--accent-color); border-bottom-color: var(--accent-color); } /* ========================================================================== PAGE CONTACT ========================================================================== */ .contact-section { max-width: 800px; margin: 150px auto 50px auto; padding: 0 40px; text-align: center; } /* ========================================================================== PAGE ABOUT ========================================================================== */ .about-section { max-width: 800px; margin: 150px auto 50px auto; padding: 0 40px; text-align: center; } /* Supprime le padding hérité de .page-header (inutile ici car .about-section fournit déjà la marge haute) */ .about-section .page-header { padding: 0; } .about-text { font-size: 1.2rem; max-width: 600px; margin: 40px auto; } form { display: flex; flex-direction: column; gap: 20px; margin-top: 40px; } input, textarea { background: transparent; border: 1px solid #333; padding: 15px; color: white; font-family: var(--font-main); transition: var(--transition); outline: none; } input:focus, textarea:focus { border-color: var(--accent-color); } button.submit-btn { background: white; color: black; border: none; padding: 15px; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; transition: var(--transition); font-weight: 600; } button.submit-btn:hover { background: var(--accent-color); color: white; } footer { text-align: center; padding: 5px 0; font-size: 0.7rem; opacity: 0.5; letter-spacing: 1px; } /* ========================================================================== RESPONSIVE (Smartphone & Tablette) ========================================================================== */ @media (max-width: 1024px) { /* --- NAVIGATION MOBILE (Menu Burger) --- */ .nav-toggle-label { display: block; } .menu-links { position: absolute; top: 100%; left: 0; width: 100%; background: rgba(10, 10, 10, 0.98); flex-direction: column; align-items: center; padding: 20px 0; transform: translateY(-10px); opacity: 0; visibility: hidden; pointer-events: none; transition: var(--transition); z-index: 999; } .nav-toggle:checked ~ .menu-links { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; } .nav-toggle:checked ~ .nav-toggle-label span { background: transparent; } .nav-toggle:checked ~ .nav-toggle-label span::before { transform: rotate(45deg); bottom: 0; } .nav-toggle:checked ~ .nav-toggle-label span::after { transform: rotate(-45deg); top: 0; } .menu-links a { margin-right: 0; margin: 10px 0; font-size: 1rem; opacity: 0.8; } .nav-container { padding: 0 20px; } .back-btn { right: 20px; top: 70px; width: 35px; height: 35px; font-size: 1rem; } .gallery-name { font-size: 0.6rem; letter-spacing: 1px; padding: 5px 8px; } .gallery-grid { padding: 0 20px 100px; } .gallery-item { width: calc((100% - (var(--cols-mobile) - 1) * var(--gallery-gap)) / var(--cols-mobile)); } .hero-text h1 { font-size: 2rem; } .carousel-viewport { width: 95vw; height: 60vh; } .nav-btn { font-size: 2rem; } .counter { bottom: -25px; } .model-link { bottom: -45px; } }