@import url('../outils/color.css');
@import url('../outils/police.css');
@import url('projet.css');
@import url('../outils/palettecouleur.css');


.headeromodaka {
    display: flex;
    height: 100%;
    width: 100%;
    background-image: url('../../image/omodaka/decors4.avif');
    align-items: center;
    justify-content: center;
    background-size: cover;
    overflow: hidden;
    position: fixed;
    z-index: -1;

}

.headeromodaka img {
    width: 50%;
    animation: textFadeIn 1s ease-in-out;
}

.paletteomodaka {
    display: flex;
    flex-wrap: wrap;
    /* Permet aux panneaux de s'enrouler si l'espace est insuffisant */
    justify-content: center;
    /* Centre les panneaux */
    height: auto;
    gap: 30px;

}

.paletteomodaka>div {
    width: calc((100% - 30px) / 2);
    /* subtracting total gap to keep each image equally sized */
    justify-content: center;

}

.explicationomodaka {
    padding-top: 30px;
    padding-bottom: 30px;
    display: flex;
    width: 100%;
    justify-content: space-between;
    /* Sépare les éléments à gauche et à droite */
    /* Aligne en haut de chaque bloc */
    position: relative;
    background-color: var(----backgroundaccueil);
}

.explicationomodaka p {
    width: calc(50% - 12.5px);
    margin: 0;
    padding: 0;
}

.explicationomodaka ::selection {
    background-color: #ffb300;
    color: rgb(255, 255, 255);
    /* Couleur de surlignage (jaune doré) */
}

.uneimageomodaka {
    border-radius: var(--anglesprojets);
    background-color: var(--greymouvaplan);
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.uneimageomodaka img {
    height: 500px;
    width: auto;
    object-fit: cover;
}

.femme img {
    height: 250px;
    object-fit: cover;
}

.logovideo {
    display: flex;
    flex-direction: column;
    gap: var(--gapimage);
    width: 100%;

}

.logovideo img {
    height: calc(50vh - 70px);
    object-fit: cover;
    max-height: calc(50vh - 70px),
}

.logobas {
    display: flex;
    /* Aligner les vidéos horizontalement */
    gap: var(--gapimage);
    justify-content: space-between;
    /* Créer de l'espace entre les vidéos */
    width: 100%;
    /* La section prend toute la largeur de son conteneur */

}

.logohaut {
    gap: 25px;
    justify-content: space-between;
    /* Créer de l'espace entre les vidéos */
    width: 100%;
    /* La section prend toute la largeur de son conteneur */

}

.videodeslogos {
    border-radius: 25px;
    /* Coins arrondis pour les vidéos */
    width: calc(50% - 17.5px);
    /* Chaque vidéo prend 1/3 de la largeur moins 30px pour l'écart entre les vidéos et 10px de padding */
    height: 100%;
    /* La hauteur des vidéos est 100% de la section */
    object-fit: cover;
    /* Remplir sans distorsion */
}

.decors {
    display: flex;
    flex-direction: column;
    gap: var(--gapimage);
    padding-inline: var(--espacecote);
    width: 100%;
    /* Assure que la section occupe toute la largeur */
    padding-bottom: 30px;
    background-color: var(--backgroundaccueil);
}

.wrapper {
    display: flex;
    justify-content: center;
    /* Centre le contenu dans chaque wrapper */
    width: 100%;
}

.decors-container {
    display: flex;
    align-items: center;
    gap: 0;
    /* Enlève l'espace entre l'image et les informations */
    border-radius: var(--anglesprojets);
    /* Bords arrondis pour l'ensemble du bloc image + infos */
    overflow: hidden;
    /* Masque la partie de l'image ou du fond qui dépasse des bords arrondis */
    width: 100%;
    /* Le conteneur occupe 100% de la largeur disponible */
    max-width: 100%;
    /* Le conteneur ne dépasse pas la largeur de son parent */
}

.decors img {
    width: calc(100% - 400px);
    /* L'image occupe 100% moins la largeur de la section d'informations (300px) */
    height: 300px;
    object-fit: cover;
    border-radius: 0;
    /* L'image n'a pas de bords arrondis pour que le contour global reste arrondi */
}

.infodecors {
    width: 400px;
    /* Largeur fixe de la zone d'information */
    height: 300px;
    background-color: var(--greymouvaplan);
    /* Couleur de fond pour la section */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Sépare le nom du lieu et les coordonnées */
    border-top-right-radius: var(--anglesprojets);
    border-bottom-right-radius: var(--anglesprojets);
    /* Applique les bords arrondis uniquement à la section d'information */
}

.infodecors h2 {
    font-size: 1.8rem;
    margin: 0;
    color: #333;
    padding-top: 30px;
    padding-left: 30px;
}

.espace {
    background-color: #ffb300;
    width: 0.7rem;
}

.infodecors p {
    font-size: 1rem;
    margin: 0px;
    color: #555;
    padding: 0px;
}

.petiteinfos {
    display: flex;
    align-items: center;
    font-family: var(--ibm);
    font-size: 1rem;
    margin-top: 10px;
    color: #555;
    padding-left: 30px;
    padding-bottom: 30px;
}


.imagepackagingomodaka {
    display: flex;
    flex-direction: row;
    gap: var(--gapimage);
}

.plants {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--greymouvaplan);
    border-radius: var(--anglesprojets);
    width: 80%;
}

.plants img {
    max-height: 80vh;
    padding: 30px;
}

.plants2 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--greymouvaplan);
    border-radius: var(--anglesprojets);
    width: 20%;
}

.plants2 img {
    max-height: 80vh;
    padding: 30px;
}

.sac {
    width: 60%;
    height: 500px;
    background-color: var(--greymouvaplan);
    /* ou toute autre couleur de fond */
    position: relative;
    display: flex;
    justify-content: center;
    /* Centre l'image horizontalement */
    align-items: center;
    /* Centre l'image verticalement */
    overflow: hidden;
    border-radius: var(--anglesprojets);
}

.sac img {
    height: 100%;
    object-fit: cover;
}


.bougie {
    width: 40%;
    height: 500px;
    background-color: var(--greymouvaplan);
    /* ou toute autre couleur de fond */
    position: relative;
    display: flex;
    justify-content: center;
    /* Centre l'image horizontalement */
    align-items: center;
    /* Centre l'image verticalement */
    overflow: hidden;
    border-radius: var(--anglesprojets);
}

.bougie img {
    height: 110%;
    object-fit: cover;
}

.deuxpack {
    display: flex;
    gap: 30px;

}

.logoomodaka {
    scale: 1;
}

.boite {
    object-fit: cover;
    display: flex;
    justify-content: center;
    align-content: center;
    width: 100%;
    max-height: 70vh;
    overflow: hidden;
    border-radius: var(--anglesprojets);
}

.boite video {
    object-fit: cover;
    width: 100%;
    filter: contrast(1.1);
    border-radius: var(--anglesprojets);
    background-color: #ffb300;
    overflow: hidden;
}

.zoom-section {
    position: relative;
    width: 100%;
    height: 1000px;
    /* Modifie la hauteur ici (ex: 75vh pour 75% de la hauteur de la fenêtre) */
    overflow: hidden;
    margin-bottom: 30px;
    transform: rotate(180deg)
}

.zoom-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1000px;
    background-image: url('../../image/omodaka/subway.png');
    background-size: cover;
    background-position: center;
    transform: scale(0.01);
    transition: transform 0.01s ease;
}



@media (max-width: 768px) {
    .headeromodaka img {
        width: 600px;
    }

    .logoomodaka {
        scale: 0.4;
    }

    .headeromodaka {
        display: flex;
        height: 100%;
        height: 700px;
    }

    .logovideo img {
        height: 200px;
    }

    .logobas {
        display: flex;
        flex-direction: column;
    }

    .imagepackagingomodaka {
        flex-direction: column;
    }

    .plants {
        width: 100%;
        padding: 20px;
    }

    .plants2 {
        width: 100%;
        padding: 20px;
        height: 200px;
    }

    .plants img {
        width: 100%;
        scale: 1.5;
    }

    .plants2 img {
        rotate: 90deg;
        scale: 0.5;
    }

}