/* ============================================= */ home.css - Styles complets pour la page d'accueil */ ============================================= */

/* ------------------- Layout global ------------------- */
.home-simple-layout { padding-top: 140px; padding-bottom: 60px; background: var(--page-bg); min-height: 70vh; display: flex; align-items: center; }

.home-central-content { width: 75vw; max-width: 1200px; min-width: 320px; margin-left: auto; margin-right: auto; background: var(--page-bg); position: relative; z-index: 2; }

.container { width: 100%; max-width: 1200px; min-width: 320px; margin: 0 auto; padding: 0 1.5rem; }

/* ------------------- Images latérales fixes ------------------- */
.side-image-fixed { position: fixed; top: 0; bottom: 0; height: 100vh; z-index: 1; display: flex; align-items: center; justify-content: center; background: none; pointer-events: none; min-width: 80px; max-width: 500px; }

.side-image-fixed img { width: 100%; height: 100%; object-fit: cover; background: var(--secondary-color); pointer-events: auto; }

.side-image-left { left: 0; width: calc(23vw - 1vw); margin-right: 2vw; }

.side-image-left img { border-radius: 0 20px 20px 0; }

.side-image-right { right: 0; width: calc(23vw - 1vw); margin-left: 2vw; }

.side-image-right img { border-radius: 20px 0 0 20px; }

/* ------------------- Slider (gauche/droite) ------------------- */
.slider-container { width: 100%; height: 100%; position: relative; overflow: hidden; border-radius: 0 !important; }

.slider-wrapper { width: 100%; height: 100%; position: relative; }

.slider-image { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.5s ease-in-out; border-radius: 0 !important; }

.slider-image.active { opacity: 1; }

.slider-dots { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.5rem; pointer-events: auto; }

.slider-dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); cursor: pointer; transition: all 0.3s ease; }

.slider-dot.active { background: rgba(255, 255, 255, 1); transform: scale(1.2); }

/* ------------------- Contenu central ------------------- */
.home-center-content { text-align: center; padding: 2rem; }

.home-main-title { font-size: 3rem; margin-bottom: 1.5rem; color: var(--text-dark); }

.home-main-text { font-size: 1.25rem; line-height: 1.8; margin-bottom: 2rem; color: var(--text-light); }

/* ------------------- Vidéo ------------------- */
.home-video { position: relative; width: 100%; padding-bottom: 56.25%; /* Ratio 16:9 */ height: 0; overflow: hidden; margin: 2rem 0; }

.home-video-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; border-radius: 0 !important; }

/* ------------------- Boutons CTA ------------------- */
.home-cta-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin: 2rem 0; }

.btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border-radius: 0.5rem; text-decoration: none; font-weight: 500; transition: all 0.3s ease; }

.btn-primary { background: var(--primary-color); color: var(--text-dark); }

.btn-outline { border: 2px solid var(--primary-color); color: var(--primary-color); background: transparent; }

/* ------------------- Section "À propos" ------------------- */
.home-about-section { padding: 1rem 0; background: var(--background-light); }

.home-about-section .container { display: flex; flex-wrap: wrap; gap: 2.5rem; max-width: 1000px; margin: 0 auto; align-items: center; min-height: 350px; }

.about-presentation, .about-hours { text-align: center; align-items: center; max-width: 500px; margin: 0 auto; }

.about-desc { font-size: 1.125rem; margin-bottom: 1.5rem; }

.about-list { list-style: none; padding: 0; margin-bottom: 1.5rem; }

.about-list li { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }

.text-success { color: #28a745; }

.about-hours .card { background: var(--primary-color); color: var(--text-dark); padding: 1.5rem; border-radius: 0.5rem; margin: 0 auto; width: 100%; }

.about-hours-day { color: var(--text-light); margin-bottom: 0.5rem; }

/* ------------------- Responsive ------------------- */
@media (max-width: 1300px) {
    .home-about-section .container { flex-direction: column; gap: 2rem; align-items: stretch; } }

@media (max-width: 1200px) {
    .home-layout-wrapper { grid-template-columns: 180px 1fr 180px; gap: 2rem; }
    .side-image-fixed,
    .slider-container {display: none;} }

@media (max-width: 900px) {
    .home-central-content{width: 98vw; padding: 0px;}
    .side-image-fixed { display: none; }
    .home-main-title { font-size: 2.5rem; }
    .home-layout-wrapper { grid-template-columns: 1fr; }
    .side-image-fixed,
    .slider-container {display: none;} }

@media (max-width: 600px) {
    .home-cta-buttons .material-symbols-outlined,
    .about-presentation .btn .material-symbols-outlined,
    .about-hours .btn .material-symbols-outlined { display: none; } }