#container {
    background-color: #9E2B46;
    color: #FFF;
}
@media (min-width : 500px) { #container { padding: 0 60px 60px; } }
@media (max-width : 499px) { #container { padding: 0 15px 45px; } }

/*---------------------------------------------------------------------------------------------------------------*/

.title { font-family: "Anton"; }
.content { text-align: justify; }

/*---------------------------------------------------------------------------------------------------------------*/

#cover { min-height: 85px; }
#cover > * {
    background-position: center;
    background-size: cover;
}
#cover > .desktop { height: 225px; }
#cover > .mobile { height: 400px; }
@media (min-width : 500px) {
    #cover { margin: 0 -60px 90px; }
    #cover > .desktop { display: block; }
    #cover > .mobile { display: none; }
}
@media (max-width : 499px) {
    #cover { margin: 0 -15px 70px; }
    #cover > .desktop { display: none; }
    #cover > .mobile { display: block; }
}

/*---------------------------------------------------------------------------------------------------------------*/

#introduction {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#introduction > * {
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    
    text-align: center;
}
#introduction > .title { text-transform: uppercase; }
#introduction > .title > span {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #FFF;
}
#introduction > .subtitle { margin-bottom: 16px; }
#introduction > .slogan { font-weight: 700; }
@media (min-width : 500px) {
    #introduction { margin-bottom: 90px; }
    #introduction > .title {
        margin-bottom: 60px;

        font-size: 77px;
        line-height: 66px;
    }
    #introduction > .subtitle {
        line-height: 34px;
        font-size: 25px;
    }
    #introduction > .slogan { font-size: 24px; }
}
@media (max-width : 499px) {
    #introduction { margin-bottom: 70px; }
    #introduction > .title {
        margin-bottom: 40px;
        
        font-size: 50px;
        line-height: 43px;
    }
    #introduction > .subtitle {
        line-height: 28px;
        font-size: 20px;
    }
    #introduction > .slogan { font-size: 20px; }
}

/*---------------------------------------------------------------------------------------------------------------*/

#presentation {}

#presentation > .block { border: solid 1px #FFF; }
#presentation > .block:not(:first-child) { margin-top: -1px; }
#presentation > .block > .title { color: #FEFD71; }
#presentation > .block > .content {
    line-height: 28px;
    font-size: 18px;
}

@media (max-width : 899px) and (min-width : 500px) {
    #presentation > .block { padding: 35px; }
}
@media (min-width : 500px) {
    #presentation > .block > .title { font-size: 30px; }
}
@media (max-width : 499px) {
    #presentation > .block { padding: 20px 15px; }
    #presentation > .block > .title { font-size: 24px; }
}

@media (min-width : 900px) {
    /* Bloc 1 "Nos engagements à vos côtés" : titre en colonne fixe + contenu */
    #presentation > .block:first-child {
        display: flex;
        flex-direction: row;
    }
    #presentation > .block:first-child > * { padding: 35px; }
    #presentation > .block:first-child > .title { flex: 0 0 310px; }

    /* Bloc 2 "L'approche Cloix Mendès-Gil" : colonne unique, titre puis contenu */
    #presentation > .block:nth-child(2) { padding: 35px; }

    /* Bloc 3 "Notre organisation" : titre+contenu à gauche, décoration à droite */
    #presentation > .block:last-child {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto 1fr;
    }
    #presentation > .block:last-child > * { padding: 35px; }
    #presentation > .block:last-child > .title { grid-column: 1; grid-row: 1; }
    #presentation > .block:last-child > .content { grid-column: 1; grid-row: 2; }
    #presentation > .block:last-child::after {
        content: "VOUS & NOUS\A VOUS & NOUS\A VOUS & NOUS";
        white-space: pre-line;
        grid-column: 2;
        grid-row: 1 / 3;
        align-self: stretch;

        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;

        padding: 35px;
        border-left: solid 1px #FFF;

        font-family: "Anton";
        font-size: 40px;
        line-height: 1.2;
        text-transform: uppercase;

        -webkit-text-fill-color: transparent;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: #FFF;
    }
}
#presentation .content .cols-2 {
    display: flex;
    flex-direction: column;
}
@media (min-width: 900px) {
    #presentation .content .cols-2 {
        flex-direction: row;
        gap: 40px;
    }
    #presentation .content .cols-2 > div {
        flex: 1 1 0;
    }
}