/* Page d'accueil */

.accueil1, .accueil2, .accueil3, .accueil4, .accueil5,
.accueil6, .accueil7, .accueil8, .accueil9 {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    overflow: hidden;
}

/* Sections */
.accueil1, .accueil2 {
    min-height: 100vh !important;
}

.accueil3, .accueil4, .accueil5,
.accueil6, .accueil7, .accueil8, .accueil9 {
    min-height: 50vh;
    opacity: 0.9;
    perspective: 1500px;
}

/* Backgrounds */
.accueil1 { background-image: url("../images/uploads/accueil/accueil1-764c5a602b4bd701f64dbcbeb16aee4e.jpg"); }
.accueil2 { background-image: url("../images/uploads/accueil/accueil2-a7a3937460aa04027d8e0b02e17975de.jpg"); }
.accueil3 { background-image: url("../images/uploads/accueil/accueil3-8f70cc493016a8e9362fcdcd1e69d721.jpg"); }
.accueil4 { background-image: url("../images/uploads/accueil/accueil4-415d9ae0f7251582df60107b43f6cff7.jpg"); }
.accueil5 { background-image: url("../images/uploads/accueil/accueil5-f7b7254f2f2a3b351f39b9a148adc235.webp"); }
.accueil6 { background-image: url("../images/uploads/accueil/accueil6-43dbe74fc85eea340d6578efb4679998.webp"); }
.accueil7 { background-image: url("../images/uploads/accueil/accueil7-3ac81ca3ce502cfd4c811ce80e3bf82e.png"); }
.accueil8 { background-image: url("../images/uploads/accueil/accueil8-c3faeecf96f5319be5db79b4c2b861a2.jpg"); }
.accueil9 { background-image: url("../images/uploads/accueil/accueil9-5a2724f27b5245fa70c01127b3c857b6.jpg"); }

/* Effet de parallaxe sur les sections 3 à 9 */
.parallax {
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Effet d'ombre sur les textes */
.shadow-text {
    text-shadow: 3px 2px 5px #000000;
}

/* Images des sections 3 à 9 */
.accueil3 .col-md-7 img,
.accueil4 .col-md-7 img,
.accueil5 .col-md-7 img,
.accueil6 .col-md-7 img,
.accueil7 .col-md-7 img,
.accueil8 .col-md-7 img,
.accueil9 .col-md-7 img {
    width: 100%;
    height: auto;
    max-width: 500px;
    max-height: 300px;
    object-fit: cover;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* SECTION 1 */

.accueil1 .fixed-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 900px;
    z-index: 2;
    text-align: center;
    pointer-events: none;
}

.accueil1 .fixed-center * {
    pointer-events: auto;
}

/* SECTION 2 : Card Miyazaki*/

/* Conteneur */
.accueil2 {
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1200px; 
}

/* Titre de la section 2 */
.accueil2 h3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    margin: 0;
    text-align: center;
    width: 100%;
    color: white;
    pointer-events: none;
}

/* Card Miyazaki */
.accueil2 .content-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
    transform-style: preserve-3d;
    transform-origin: center;
    opacity: 0;
    width: 80%;
    max-width: 800px;
    min-width: 300px;
    z-index: 2;
    transition: transform 0.15s ease-out, opacity 0.8s ease;
    will-change: transform;
}

/* Apparition de la card Miyazaki */
.accueil2 .card.animate-card {
    animation: zoomInCard 1s ease-out forwards;
}

@keyframes zoomInCard {
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Effet 3D sur la card Miyazaki */
.accueil2 .card.allow-3d {
    opacity: 1;
    transition: transform 0.08s ease-out;
    backface-visibility: hidden;
    will-change: transform;
}

/* Reflet lumineux sur la card Miyazaki*/
.accueil2 .shine {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: transparent;
    mix-blend-mode: overlay;
    border-radius: inherit;
    transition: background 0.2s ease-out;
}

/* Card */
.accueil2 .card {
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        0 10px 20px rgba(0, 0, 0, 0.2),
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 30px 60px rgba(0, 0, 0, 0.2);
    background: linear-gradient(0deg, rgba(146,183,209,1) 0%, rgba(101,131,140,1) 50%, rgba(34,77,31,1) 100%);
    color: #000;
}

/* Structure interne */
.accueil2 .card .row {
    display: flex;
    flex-wrap: nowrap;
}

.accueil2 .card .col-md-4 {
    flex: 0 0 35%;
    max-width: 35%;
}

.accueil2 .card .col-md-8 {
    flex: 0 0 65%;
    max-width: 65%;
}

/* SECTION 1 : Effet machine à écrire */
.accueil1 .typewriter {
    overflow: hidden;
    white-space: nowrap;
    border-right: 3px solid #442B19;
    width: 0;
    animation: typing 4s steps(40, end) forwards;
}

@keyframes typing {
    from { width: 0; }
    to { width: 40ch; }
}

.accueil1 button:hover {
    color: #442B19 !important;
}

/* Responsive */
@media (max-width: 768px) {
    .accueil1 h1 { font-size: 2rem; }
    .accueil1 p.lead { font-size: 1rem; }
    .accueil1 button { font-size: 0.9rem; padding: 0.5rem 1rem; }

    .accueil2 h3 { font-size: 1.5rem; }

    .accueil3 img, .accueil4 img, .accueil5 img,
    .accueil6 img, .accueil7 img, .accueil8 img, .accueil9 img {
        max-width: 100%;
        max-height: 250px;
    }

    .accueil3 .row, .accueil4 .row, .accueil5 .row,
    .accueil6 .row, .accueil7 .row, .accueil8 .row,
    .accueil9 .row {
        flex-direction: column;
    }
}