/* =====================================
   PAGE PROJET SCIENTIFIQUE
   ===================================== */

.projet-equipe {
    position: relative !important;

    width: min(1500px, calc(100vw - 80px)) !important;
    max-width: none !important;

    left: 50% !important;
    transform: translateX(-50%) !important;

    margin: 0 !important;
    padding: 70px 0 80px !important;

    box-sizing: border-box !important;
}

/* Supprime les contraintes Gutenberg sur les éléments internes */
.projet-equipe > * {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}




/* =====================================
   UNE LIGNE IMAGE + TEXTE
   ===================================== */

.projet-axe {
    width: 100% !important;
    max-width: none !important;

    display: grid !important;
    grid-template-columns: 1fr 1fr !important;

    gap: 45px !important;

    align-items: center !important;

    margin: 0 0 80px !important;
    padding: 0 !important;
}


/* =====================================
   TEXTE
   ===================================== */

.projet-axe-texte {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 30px 34px !important;

    background-color: #f5f7fa !important;
    border-radius: 16px !important;

    color: #254150 !important;

    box-sizing: border-box !important;
}

.projet-axe-texte p {
    margin: 0 0 18px !important;

    font-size: 16px !important;
    line-height: 1.7 !important;
}

.projet-axe-texte p:last-child {
    margin-bottom: 0 !important;
}

.projet-axe-texte ul,
.projet-axe-texte ol {
    margin: 15px 0 20px 22px !important;
    padding: 0 !important;
}

.projet-axe-texte li {
    margin-bottom: 10px !important;

    font-size: 16px !important;
    line-height: 1.6 !important;
}


/* =====================================
   IMAGE
   ===================================== */

.projet-axe figure {
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.projet-axe img {
    display: block !important;

    width: 100% !important;
    max-width: 520px !important;
    height: auto !important;

    object-fit: contain !important;
}


/* =====================================
   POSITIONNEMENT
   ===================================== */

/* Image à gauche / texte à droite */

.projet-axe:not(.projet-axe-inverse) > figure {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

.projet-axe:not(.projet-axe-inverse) > .projet-axe-texte {
    grid-column: 2 !important;
    grid-row: 1 !important;
}


/* Texte à gauche / image à droite */

.projet-axe-inverse > .projet-axe-texte {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

.projet-axe-inverse > figure {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

@media (max-width: 900px) {

    .projet-equipe {
        width: calc(100% - 40px) !important;

        left: auto !important;
        transform: none !important;

        margin: 0 auto !important;
        padding: 50px 0 60px !important;
    }

    .projet-axe,
    .projet-axe-inverse {
        display: flex !important;
        flex-direction: column !important;

        gap: 25px !important;

        margin-bottom: 55px !important;
    }

    .projet-axe figure,
    .projet-axe-inverse figure {
        order: 1 !important;

        width: 100% !important;

        justify-content: center !important;
    }

    .projet-axe-texte {
        order: 2 !important;

        width: 100% !important;
    }

    .projet-axe img {
        width: 100% !important;
        max-width: 500px !important;

        margin: 0 auto !important;
    }
}

/* =====================================
   MASQUER LE TITRE WORDPRESS
   ===================================== */

body:has(.projet-equipe) .wp-block-post-title {
    display: none !important;
}

/* =====================================
   BOUTON RETOUR
   ===================================== */

.projet-equipe > .wp-block-buttons {
    width: 100% !important;
    max-width: none !important;

    margin: 20px 0 0 !important;

    display: flex !important;
    justify-content: center !important;
}

.projet-equipe .wp-block-button {
    margin: 0 !important;
}

.projet-equipe .wp-block-button__link {
    display: inline-block !important;

    padding: 14px 32px !important;

    background-color: #80b827 !important;
    color: #ffffff !important;

    border: none !important;
    border-radius: 6px !important;

    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;

    text-decoration: none !important;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease !important;
}

.projet-equipe .wp-block-button__link:hover {
    background-color: #6fa020 !important;
    color: #ffffff !important;

    transform: translateY(-2px);
}

.projet-axe > figure {
    width: 100% !important;
    max-width: none !important;
}

.projet-axe > figure img {
    width: 100% !important;
    max-width: 560px !important;
}

.projet-image-large img {
    max-width: 900px !important;
}

.projet-image-large {
    width: 100% !important;
    max-width: none !important;
}

.projet-image-large img {
    width: 100% !important;
    max-width: 700px !important;
    height: auto !important;
}


/* =====================================
   RESPONSIVE
   ===================================== */

media (max-width: 900px) {

    .projet-equipe {
        width: calc(100% - 40px) !important;
        left: auto !important;
        transform: none !important;

        margin: 0 auto !important;
        padding: 50px 0 60px !important;
    }

    .projet-axe,
    .projet-axe-inverse {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;

        gap: 24px !important;

        margin-bottom: 55px !important;
    }

    /* Toujours image puis texte sur mobile */
    .projet-axe figure,
    .projet-axe-inverse figure {
        order: 1 !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;

        justify-content: center !important;
    }

    .projet-axe > p,
    .projet-axe-inverse > p {
        order: 2 !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
    }

    .projet-axe img {
        width: 100% !important;
        max-width: 420px !important;
        height: auto !important;

        margin: 0 auto !important;
    }
}