/* Styles généraux ------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
*
{
    margin: 0;
    padding: 0;
}

html {
    overflow-y: scroll;
}

body 
{
    margin: 0;
    padding: 0;
    font-family: Tahoma, arial, sans-serif;
    color: black;
}

a
{
    text-decoration: none;
    color: black;
}

a:hover
{
    color: #007c6d;
    cursor: pointer;
}

/* Header ----------------------------------------------------------------------------------------------------------------- */

#header_top
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1em 2em;
    gap: 1em;
}

#mef
{
    margin-left: 2em;
    height: 4em;
}

#texte_mef
{
    font-size: 2em;
    color: #007c6d;
    font-weight: bold;
    text-align: center;
    display: flex;
    align-items: center;
}

#logos
{
    display: flex;
    align-items: center;
}

.logo
{
    height: 4em;
    margin-right: 2em;
} 

#header_btm
{
    background-color: #3bb49e;
}

    #header_btm p
    {
        color: white;
        text-align: justify;
        margin: 0 3em;
        padding: 1em;
    }

    #header_btm a
    {
        color:white;
    }

    #header_btm a:hover
    {
        color:#007c6d;
    }

/* Main ----------------------------------------------------------------------------------------------------------------- */

.main
{
    display: flex;

    padding: 2em 4em;
    gap: 4em;
}

.block
{
    position:relative;

    display: flex;
    align-items: center;

    height:30vw;
    aspect-ratio: 1;
    min-height: 400px;
    max-height: 600px;
}

.right {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width:70vw;
}


/* Panneau de contenu (droite) ------------------------------------------------------------------------------------------*/

.right_panel {
    border: solid 2px #007c6d;
    border-radius: 15px;
    padding: 10px;
}

.right_panel_top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid;
}

.right_panel_top_item {
    width:33%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 0 20px 0;
    text-align: center;
    margin: 0 10px;
}

    .right_panel_top_item img {
        width: 50px;
    }

    .right_panel_top_item a {
        display:flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        flex-grow: 1;
    }

.right_panel_content {
    min-height: 250px;
}

.default_content {
    margin: 20px 0;
    text-align: center;
}

    .default_content img {
        width: 100%;
        max-width: 1200px;
    }

.content_title {
    margin: 20px 20px 0 20px;
    text-align: center;
}

    .content_title img {
        width: 50px;
        margin-bottom: .5em;
    }

    .content_title h4 {
        margin-bottom: .5em;
    }

.content_subtitle {
    text-align: left;
    width: fit-content;
    max-width:90%;
    margin: 0 auto;
}

    .content_subtitle strong {
        text-decoration-line: underline;
    }

.center_content {
    margin: 1em auto 0 auto;
    text-align: center;
    max-width: 700px;
    padding-bottom: 1em;
}

    .center_content a {
        font-weight: bold;
    }

.webinaire {
    margin-top: 1.5em;
    text-align: center;
}

    .webinaire h4 {
        margin-bottom: 1em;
        color: #007c6d;
    }

    .webinaire a {
        margin-top: .5em;
        align-items: center;
        max-width: fit-content;
        margin-bottom: .5em;
    }

    .webinaire img {
        width: 125px;
        margin: 0 20px;
    }

.links {
    padding-left: 4em;
    margin-top: 2em;
}

    .links h4 {
        margin-bottom: .5em;
    }

    .links a {
        display: flex;
        align-items: center;
        gap: .5em;
        max-width: fit-content;
        margin-bottom: .5em;
    }

    .links img {
        width: 50px;
    }

.illustration {
    height: auto;
    width: 100%;
    max-width: 1200px;
    text-align: center;
}

#etape_3_exemple {
    min-width: 40%;
    margin: 0 auto;
    display: block;
    text-align: center;
}

/* Roue ------------------------------------------------------------------------------------------------------------------ */

.infos {
    width: 20%;
    height:20%;

    position: absolute;
    top: 40%;
    left: 40%;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    text-align: center;
    font-weight: bold;

    transition: transform 0.2s ease;
    transform-origin: center;
}

.infos:hover {
    transform: scale(1.15);
}

    .infos img {
        width: 6em;
    }

    .infos p {
        font-size: 80%;
        margin: 0 -1.5em;
    }

.item {
    width: 20%;
    height:20%;

    position: absolute;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    text-align: center;
    font-weight: bold;
    font-size: 1em;

    transition: transform 0.2s ease;
    transform-origin: center;
}

    .item:hover {
        transform: scale(1.15);
    }

    .item img
    {
        width: 5em;
    }

    .item p
    {
        margin: 0 -2.5em;
        font-size:80%;
    }