.texte {
    margin: 0px;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

/* temporaire */

.temp-image-container {
  width: 337px !important;
  height: 600px !important;
  max-width: 337px !important;
  max-height: 600px !important;
}

/* section acceuil */

#acceuil {
    margin-top: 30px;
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.acceuil-titre {
    width: 500px;
    display: flex;
    align-items: center;
    font-size: 1.75rem;
}

.image-container {
  max-width: 750px;
  max-height: 450px;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* section decouvrir */

.decouvrir-icone {
    color: black !important;
}

.carte:hover .decouvrir-icone {
    color: gray !important;
}


/* section plateformes */

.carte-video {
    display: flex;
    justify-content: center;
}

.carte-video-mobile {
    display: none;
}

.carte-colone-video {
    display: flex;
}


/* composantes generales */

.video-player {
    border-radius: 15px;
}

.page {
    align-self: center;
    display: flex;
    flex-direction: column;
    gap: 50px;
    align-items: center;
    margin: 30px;
}

.section {
    width: 1400px;
    display: flex;
    justify-content: space-between;
    height: fit-content;
    align-items: stretch;
}

.media {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 40px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.media-desktop {
    display: flex;
 }

.media-mobile {
    display: none;
}

.infos {
    margin-top: 55px;
    margin-bottom: 55px;
}

.infos-titre {
    margin-bottom: 30px;
}

.carte-grille {
    display:flex;
    gap: 20px;
}

.carte-colone {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex:1;
}

.carte {
    border-radius: 10px;
    border-color: #40B239;
    border-width: 2px;
    border-style: solid;
    padding-right: 15px;
    padding-left: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
    position: relative;
}

.carte:hover {
    border-color: gray;
}

.carte.aucun-lien:hover {
    border-color: #40B239;
}

.carte-icone {
    font-size: 1.5em;
    color:#40B239;
}

.carte:hover .carte-icone {
    color:gray;
}

.carte-lien { 
    position: absolute;
    inset: 0;
    z-index: 1;
}

.carte-titre {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 12px;
    font-size: 1rem;
}

.carte-texte {
    margin-top: 5px;
    margin-right: 30px;
}

.bloc-vert-droit {
    background-color: #40B239;
    flex-grow: 1;
    flex-basis: 0;
    border-radius: 25px;
    margin-left: 200px;
}

.bloc-vert-gauche {
    background-color: #40B239;
    min-width: 357px;
    border-radius: 25px;
    margin-right: 20px;
}


/* Responsiveness */

@media (max-width: 1460px) {
    .section {
      width: 100%;
    }
}

@media (max-width: 1200px) {
    .carte-grille {
        display: flex;
        flex-direction: column;
    }

    /* section plateformes */

    .carte-video-mobile {
        display: flex;
    }

    .carte-colone-video {
        display: none !important;
    }
}

@media (max-width: 920px) {
    .media-desktop { 
        display: none;
    }

    .media-mobile {
        display: flex;
        margin: 0px;
        padding-top: 0px;
    }

    .infos {
        margin-top: 0px;
        margin-bottom: 0px;
    }

    .bloc-vert-gauche {
        display: none;
    }

    #acceuil {
        margin-top: 30px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .acceuil-titre {
        width: 100%;
    };
}

@media (max-width: 685px) {
    .bloc-vert-droit {
        display: none;
    }

    .page {
        margin-left: 10px;
        margin-right: 10px;
    }
}

@media (max-width: 600px) {
    .carte {
        padding: 10px;
    }

    .carte-colone {
        gap: 10px;
    }

    .carte-grille {
        gap: 10px;
    }

    .infos-titre {
        font-size: 1.75rem;
    }

    .carte-titre {
        font-size: 0.9rem;
    }

    .icone-lien {
        font-size: 1rem;
    }

    .infos-titre {
        margin-bottom: 15px;
    }

    .acceuil-titre {
        font-size: 1.25rem;
    }
}