@font-face { font-family: 'champagne__limousinesregular'; src: url('champagne__limousines-webfont.woff2') format('woff2'), url('champagne__limousines-webfont.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } *{ margin:0; padding:0; } body { font-family: 'champagne__limousinesregular', arial, sans-serif; margin:0 auto; padding:0; } #splash { margin: auto; padding: 0; text-align: center; height: 99%; max-height: 1080px; max-width: 1440px } #splash img { height: 100% } #galerie p { color: #e73f2d; /* ton rouge */ text-transform: uppercase; font-weight: 600; margin: 2vh auto; font-size: 1.6em; text-align: justify; } /* Ajustement mobile */ @media (max-width: 480px) { #galerie p { font-size: 1.2em; } } .projet-media p:after, #galerie p:after{ content: ""; display: inline-block; width: 100%; } #presentation p{ text-transform:initial; text-align:justify; text-align-last: left; margin:2vh auto; font-weight:300; color:#1d1d1b; font-size:1.6em; max-width:640px; } #presentation p:after{ content: ""; display: inline-block; width:auto; } footer { text-align: center; font-size:1.2em; text-transform:uppercase; padding:1vh; } footer a { text-decoration:none; color:black; font-weight:600; } /* GALERIE */ #galerie { margin: 5vh auto 0; text-align: center; width: min(1000px, 90vw); } /* Grille d’images */ #galerie .galerie-grid { display: grid; grid-template-columns: repeat(3, 1fr); /* 3 colonnes sur desktop */ gap: 10px; /* équivalent du padding de l’ancien li */ padding: 0; margin: 0 auto; list-style: none; } /* Chaque vignette */ #galerie .galerie-grid li { position: relative; overflow: hidden; border-radius: 0; /* à garder ou ajuster si tu veux */ } /* Le lien couvre toute la vignette */ #galerie .galerie-grid li a { display: block; width: 100%; height: 100%; } /* L’image occupe un carré, comme avant (200x200) */ #galerie .galerie-grid li img { display: block; width: 100%; height: 100%; aspect-ratio: 1 / 1; /* carré, même quand la largeur change */ object-fit: cover; transition: opacity .4s ease-out, transform .4s ease-out; } /* Effet au survol / focus : même idée que ton opacity:0.6 */ #galerie .galerie-grid li:hover img, #galerie .galerie-grid li a:focus-visible img { opacity: 0.6; transform: scale(1.02); /* léger zoom optionnel, retire-le si tu n’en veux pas */ } /* ----- NAVIGATION PROJET ----- */ /* on sait qu’on est sur une page projet grâce à la classe sur */ .page-projet #main { position: relative; min-height: 100vh; } /* Pas de scroll vertical sur les grandes fenêtres : tout tient déjà à l’écran */ @media (min-height: 800px) { .page-projet { overflow-y: hidden; } } /* ----- NAVIGATION PROJET ----- */ /* Home en haut à gauche, fixe */ .project-nav { position: fixed; top: 20px; left: 20px; z-index: 20; } .project-nav .nav-home img { display: block; width: 100px; height: auto; } /* Conteneur image + flèches */ .projet .projet-media { position: relative; display: inline-block; /* la largeur suit celle de l'image */ margin-top: 20px; } /* Flèches gauche / droite centrées sur l'image */ .projet .nav-prev, .projet .nav-next { position: absolute; top: 50%; transform: translateY(-50%); } .projet .nav-prev img, .projet .nav-next img { display: block; width: 100px; /* taille réelle */ height: auto; } /* décalage horizontal par rapport à l'image */ .projet .nav-prev { left: -120px; } .projet .nav-next { right: -120px; } /* Un léger effet au survol */ .projet .nav-prev:hover img, .projet .nav-next:hover img, .projet .nav-prev:focus-visible img, .projet .nav-next:focus-visible img { opacity: 0.7; } /* ----- Responsive mobile ----- */ @media (max-width: 480px) { .page-projet .projet img#projet { max-width: 80vw; /* image un peu plus large sur mobile */ } .projet .nav-prev img, .projet .nav-next img { width: 70px; /* pictos un peu plus petits si besoin */ } .projet .nav-prev { left: -80px; } .projet .nav-next { right: -80px; } } /* ----- IMAGE PRINCIPALE DU PROJET ----- */ .page-projet .projet { text-align: center; } .page-projet .projet img#projet { display: block; margin: 0 auto; max-width: 60vw; /* largeur max ~60% de l’écran */ max-height: calc(100vh - 180px); /* marge + texte + footer ≈ 180px, à ajuster */ width: auto; height: auto; } /* ---------- PAGE CONTACT ---------- */ .page-contact #main { max-width: 1100px; margin: 0 auto; padding: 3vh 2rem 6vh; text-align: center; } #contact { font-size: 1rem; line-height: 1.4; } /* Logo */ .contact-logo img { display: block; margin: 0 auto 1.5rem; max-width: 160px; height: auto; } /* Coordonnées hautes */ .contact-top { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; /* prend toute la largeur de #main */ max-width: 1100px; /* même largeur visuelle que la page */ margin: 0 auto 1.5rem; } /* Ligne horizontale entre les deux numéros */ .contact-top::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0.15rem; /* ajuste la hauteur de la ligne sous le texte */ height: 1px; background: #cfcfcf; /* gris clair comme sur ta maquette */ } /* Numéros rouges, posés sur la ligne (fond blanc pour couper la ligne) */ .contact-phone { position: relative; color: #e73f2d; font-size: 0.95rem; white-space: nowrap; padding-bottom: 4px; background: #fff; } /* Bloc site + e-mail au centre, pose aussi un fond blanc sur la ligne */ .contact-site-mail { position: relative; padding: 0 1.5rem 4px; background: #fff; } .contact-site-mail p { margin: 0; } /* Tagline */ .contact-tagline { max-width: 1100px; letter-spacing: 0.12em; font-size: 0.9rem; margin: 1.8rem auto 2rem; } /* Intro rouge + texte noir */ .contact-intro { max-width: 900px; margin: 0 auto 2rem; text-align: center; } .contact-intro-red { color: #e73f2d; } /* Portraits (image unique) */ .contact-portraits img { display: block; margin: 0 auto 1.5rem; max-width: 400px; height: auto; } /* Bios en deux colonnes */ .contact-bios { display: flex; gap: 3rem; justify-content: center; align-items: flex-start; max-width: 900px; margin: 0 auto 2rem; text-align: left; } .contact-bios .bio { flex: 1; } .contact-bios h2 { font-size: 1.05rem; margin-bottom: 0.3rem; } .prenom-red { color: #e73f2d; } .bio-subtitle { font-size: 0.9rem; margin-bottom: 0.7rem; } .contact-bios p { margin-bottom: 0.6rem; } /* Ligne rouge en bas */ .contact-bottom-line { max-width: 800px; margin: 0 auto 2.5rem; color: #e73f2d; } /* Logos marques (image unique) */ .contact-brands img { display: block; margin: 0 auto; max-width: 100%; height: auto; } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .contact-top { flex-direction: column; gap: 0.3rem; } .contact-bios { flex-direction: column; text-align: center; } .contact-bios .bio { text-align: center; } }