/* ========================================= BASE & STRUCTURE ========================================= */ html { scroll-behavior: smooth; } body { background-color: #FAF8F3; color: #5C4A3A; overflow-x: hidden; /* ✅ FIX : body devient l'élément de scroll réel à cause de overflow-x:hidden (propagation d'overflow html→body). scroll-behavior doit donc être posé ici aussi, sinon le scroll-smooth de Tailwind sur ne suffit pas. */ scroll-behavior: smooth; } /* ========================================= LENIS (SCROLL FLUIDE — index.html uniquement) Lenis désactive lui-même le scroll-behavior CSS ci-dessus une fois initialisé (règle .lenis-smooth) pour éviter un double easing. ========================================= */ html.lenis { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } /* ========================================= ANIMATIONS (GSAP) ========================================= */ .fade-in-slow { opacity: 0; } /* Reveal up — réservé aux hero (Ty Ar Vorlenn / Photos de la maison) */ .reveal-up { opacity: 0; transform: translateY(40px); } /* ========================================= COMPOSANTS UI (Boutons & Scrollbars) ========================================= */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #FAF8F3; } ::-webkit-scrollbar-thumb { background: #D4C4A8; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #8B7355; } /* Masque la scrollbar native des carousels tout en gardant le scroll */ .hide-scrollbar::-webkit-scrollbar { display: none; } .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } .btn-ocean { transition: all 0.3s ease; } .btn-ocean:hover { background-color: #8faebc; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(168, 197, 209, 0.4); } /* ========================================= CARTE (LEAFLET) ========================================= */ #map { height: 400px; width: 100%; border-radius: 1rem; z-index: 10; } /* ========================================= GALERIE PHOTOS — grille (page photos.html) ========================================= */ .gallery-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1.5rem; } @media (min-width: 768px) { .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1280px) { .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ========================================= GALLERY CARD — carrousel accueil (index.html) ✅ FIX : suppression du translateY hover qui conflicte avec hover:scale-[1.02] de Tailwind sur les cartes du carrousel. Le scale Tailwind est suffisant et plus cohérent. ========================================= */ .gallery-card { position: relative; overflow: hidden; border-radius: 2rem; box-shadow: 0 25px 80px rgba(92, 74, 58, 0.12); /* ✅ Transition uniquement sur box-shadow, pas de transform ici pour ne pas écraser le hover:scale Tailwind */ transition: box-shadow 0.45s ease; } .gallery-card:hover { /* ✅ Retiré : transform: translateY(-10px) — conflit avec scale Tailwind */ box-shadow: 0 35px 100px rgba(92, 74, 58, 0.18); } .gallery-card img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 0.8s ease; } .gallery-card:hover img { transform: scale(1.05); } /* ========================================= GALERIE PHOTOS — overlay & meta (page photos.html) ========================================= */ .gallery-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.6) 100%); pointer-events: none; } .gallery-meta { position: absolute; bottom: 1.5rem; left: 1.5rem; right: 1.5rem; color: #F8F1E3; z-index: 1; } .gallery-meta p { margin-top: 0.5rem; color: rgba(248, 241, 227, 0.9); }