:root {
    --bleu-fonce: #09637E;
    --bleu-moyen: #088395;
    --bleu-pale: #7AB2B2;
    --blanc: #EBF4F6;
}

body {
    background-color: var(--blanc);
}

h1, h2, h3, h4, h5, h6, p {
    margin: 0;
}

.navbar {
    background-color: var(--bleu-fonce);
    box-shadow: 4px 2px 5px rgba(4, 49, 63, 0.2);
}

.nav-item {
    color: var(--blanc);
}

.nav-link:hover,
.navbar-brand:hover {
    color: var(--bleu-pale);
}

.nav-link.active {
    color: var(--bleu-pale) !important;
}


#quarto-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

#quarto-document-content {
    padding: 0;
    margin: 0;
    width: 100%;
}

#title-block-header {
    display: none;
    padding: 0;
    margin: 0;
}


/*-------------------------------------------------------------- ACCUEIL --------------------------------------------------------------*/

/*   ACCUEIL HERO    */

.accueil-hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    text-align: center;
    padding: 6rem 10rem;
    background-color: var(--bleu-pale);
}

.accueil-hero h1 {
    color: var(--blanc);
    font-weight: 800;
    font-size: 2.5rem;
    padding-bottom: 4rem;
}

.accueil-hero h2 {
    border: none;
    color: var(--bleu-fonce);
    font-weight: 500;
    font-size: 1.5rem;
}


/*   INFORMATIONS    */

.infos {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    text-align: center;
    padding: 6rem 10rem;
    column-gap: 4rem
}

.infos-icons {
    width: 4rem;
    height: 4rem;
    fill: var(--bleu-pale);
}

.info > section > h2 {
    padding: 1rem 0rem;
    color: var(--bleu-fonce);
    font-size: 1.5rem;
    font-weight: 700;
    border: none;
}

.info > section > p {
    color: var(--bleu-fonce);
}


/*   FOOTER    */

.site-footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 1rem;
    padding: 2rem 10rem;
    background-color: var(--bleu-fonce);
    color: var(--blanc);
}



/*-------------------------------------------------------------- OBJECTIFS --------------------------------------------------------------*/

.objectifs {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    column-gap: 3rem;
    padding: 4rem 10rem;
    width: 100%;
}

.cont-img-obj {
    width: 30rem;
    height: 15rem;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 2rem;
}

.cont-img-obj > p {
    width: 100%;
    height: 100%;
}

.cont-img-obj > p > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.infos-obj {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
    max-width: 90vh;
}

.infos-obj > h2 {
    border: none;
}

.objectifs:nth-of-type(odd) {
    background-color: var(--bleu-pale);
    color: var(--blanc);
}

.objectifs:nth-of-type(odd) > .infos-obj > h2 {
    color: var(--blanc);
}

.objectifs:nth-of-type(even),
.objectifs:nth-of-type(even) > .infos-obj > h2 {
    color: var(--bleu-fonce);
}

/*-------------------------------------------------------------- PARTICIPANTS --------------------------------------------------------------*/

.part {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.cont-carte {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 2rem;
    width: 100%;
    padding: 4rem 6rem;
    min-width: 0;
}

.cont-carte:nth-of-type(2) {
    background-color: var(--bleu-pale);
}

.cont-carte > h2 {
    border: none;
    color: var(--bleu-fonce);
    font-size: 2rem;
    padding-bottom: 0;
}

.grille-part {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: 2rem;
    width: 100%;
    min-width: 0;
    justify-items: center;
}

.grille-part.petite-grille {
    display: flex;
    justify-content: center;
    align-items: center;
}

.grille-part.petite-grille > .carte {
    width: min(100%, 430px);
    min-width: 0;
}

.carte {
    background-color: var(--blanc);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 1rem;
    width: 100%;
    max-width: 430px;
    min-width: 0;
    padding: 1.5rem 2rem;
    border-radius: 2rem;
    box-shadow: 2px 2px 5px rgba(4, 49, 63, 0.2);
    box-sizing: border-box;
}

.carte > .photo-part {
    width: 10rem;
    height: 10rem;
    overflow: hidden;
    border-radius: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carte > .photo-part > img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.carte-logo > .photo-part > img,
.photo-logo > img {
    object-fit: contain;
    padding: 0.75rem;
}

.carte > h3 {
    color: var(--bleu-fonce);
    text-align: center;
}

.desc-part {
    color: var(--bleu-fonce);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    row-gap: 0.2rem;
    width: 100%;
    min-width: 0;
}

.courriel-part {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 0.5rem;
    width: 100%;
    min-width: 0;
}

.courriel-part > svg {
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    fill: var(--bleu-fonce);
}

.courriel-part > a {
    color: var(--bleu-fonce);
    text-decoration: none;
    display: block;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(0.75rem, 1.7vw, 1rem);
}

@media (max-width: 700px) {
    .cont-carte {
        padding: 3rem 1.25rem;
    }

    .grille-part {
        grid-template-columns: 1fr;
    }

    .carte {
        max-width: 100%;
        padding: 1.5rem;
    }
}

@media (max-width: 450px) {
    .courriel-part > a {
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: center;
    }
}

/* Identité commune et accès aux nouvelles rubriques. */
.navbar-logo {
    max-height: 2.75rem;
    width: auto;
}

.hero-logo {
    width: min(100%, 26.5rem);
    height: auto;
    margin: 0 auto 2rem;
}

.footer-logo {
    width: min(100%, 13.25rem);
    height: auto;
}

.site-footer {
    text-align: center;
    padding: 2rem clamp(1.25rem, 6vw, 6rem);
    width: 100%;
}

.site-footer a {
    color: var(--blanc);
    text-underline-offset: 0.2em;
}

.accueil-liens {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    padding: 0 1.25rem 4rem;
}

.btn-egee {
    background: var(--bleu-fonce);
    color: var(--blanc);
    padding: 0.85rem 1.25rem;
    white-space: normal;
}

.btn-egee:hover, .btn-egee:focus-visible {
    background: var(--bleu-moyen);
    color: white;
}

@media (max-width: 900px) {
    .accueil-hero, .infos, .objectifs {
        padding: 3rem 1.25rem;
    }

    .accueil-hero h1 {
        font-size: clamp(1.6rem, 5vw, 2.5rem);
        padding-bottom: 2rem;
    }

    .infos, .objectifs {
        flex-direction: column;
        gap: 2rem;
    }

    .cont-img-obj {
        width: 100%;
        max-width: 30rem;
        flex-shrink: 0;
    }

    .infos-obj {
        max-width: 100%;
    }
}

.accueil-hero h2 {
    margin-bottom: 1.25rem;
}
