:root {
    /**Ré-ajustement du contenu pour ne pas changer l'alignement de la grille**/
    --margin-left-contenu: var(--minimum-margin, 16px);
    --margin-right-contenu: var(--minimum-margin, 16px);
}

.grille {
    display: grid;
    box-sizing: border-box;
}

.contenu {
    margin: 0 var(--margin-right-contenu, auto) 0 var(--margin-left-contenu, auto);
}

.actif {
    font-weight: 700;
    background-color: var(--couleur-hightlight, #DAE6F0);
}

/**********Notes de bas de page**********/

.footnotes-references {
    list-style: none;
    gap: 16px;
    padding-inline-start: 0;
    padding: 8px;
    counter-reset: x;
}

.footnotes-references li {
    display: grid;
    grid-template-columns: 28px auto;
    grid-template-rows: auto;
    counter-increment: x;
    margin-bottom: 8px;
}

.footnotes-references > li > a {
    text-decoration: none;
}

.footnotes-references > li p {
    margin-block-start: 8px;
}

.footnote::before {
    content: url("data:image/svg+xml,%3Csvg width='10' height='25' viewBox='0 0 10 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.09653 6.26618C4.33685 6.02586 4.72649 6.02586 4.96681 6.26618L8.88309 10.1825C9.12342 10.4228 9.12342 10.8124 8.88309 11.0527C8.64277 11.2931 8.25313 11.2931 8.01281 11.0527L5.14705 8.18699L5.14705 13.4706C5.14705 13.8104 4.87154 14.0859 4.53167 14.0859C4.1918 14.0859 3.91628 13.8104 3.91628 13.4706L3.91628 8.18699L1.05053 11.0527C0.810204 11.2931 0.420565 11.2931 0.180242 11.0527C-0.0600806 10.8124 -0.0600806 10.4228 0.180242 10.1825L4.09653 6.26618Z' fill='%23095797'/%3E%3C/svg%3E");
    width: 10px;
    height: 25px;
    font-size: smaller;
    position: relative;
    top: 0.5em;
}

.footnote::after {
    content: counter(x);
    font-weight: bold;
}

/************************/
/********* Menu *********/
#chevron-mobile {
    transition: transform 0.3s ease;
}

.petit-titre-mobile {
    display: none;
}

.menu-lateral {
    padding-left: var(--minimum-margin, 16px);
    height: fit-content;

    /**Pour toujours garder le menu visible**/
    position: sticky;
    top: 0;
    z-index: 3;
    /****/

    font-family: var(--font-family-texte, "Open Sans", sans-serif);
    font-size: 14px;
}

.menu-section {
    background-color: var(--couleur-fond, #FFF);
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.liste-liens-blocs ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    border-top: 1px solid var(--couleur-bordure, #C5CAD2);
}

.liste-liens-blocs li {
    margin: 0;
    border-bottom: 1px solid var(--couleur-bordure, #C5CAD2);
}

.liste-liens-blocs a {
    display: flex;
    padding: 16px 8px 16px 8px;
    text-decoration: none;
    color: var(--couleur-bleu-clair, #095797);
}

.liste-liens-blocs a:hover {
    background-color: var(--couleur-hightlight, #DAE6F0);
}

/********************************/
/******** Go to Top Button ******/
.top {
    --offset: 100px;
    margin-top: calc(100vh + var(--offset));
    place-self: end;
    min-height: 40px;
    min-width: 40px;
    background-color: var(--couleur-bleu-clair, #095797);
    box-shadow: 0 1px 4px var(--couleur-bleu-shadow);
    position: sticky;
    right: 32px;
    bottom: 96px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.top:hover {
    background-color: var(--couleur-bleu-higlight, #1472BF);
    box-shadow: 0 1px 4px var(--couleur-bleu-shadow);
}

.top:focus {
    background-color: var(--couleur-bleu-higlight, #1472BF);
    outline: 2px solid var(--couleur-bleu-shine, #4A98D9);
    border: 2px solid var(--couleur-bleu-fonce, #223654);
    box-shadow: 0 2px 8px var(--couleur-bleu-shadow);
}

/********************************/
/******** Search Bar ********/
.search-box {
    border: 1px solid var(--couleur-bordure-fonce, #8893A2);
    height: 40px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 0;
    margin-top: 24px;
    margin-bottom: 24px;
    font-size: 14px;
}

.search-box input[type="search"] {
    border: none;
    height: 100%;
    padding: 0 10px;
    font-family: 'Open Sans', sans-serif;
    font-weight: normal;
    font-size: 14px;
    color: var(--couleur-recherche, #6B778A);
    flex-grow: 1;
    padding-inline-end: 0; /**Le placeholder tronqué sinon**/
}

.search-box input[type="search"]::placeholder {
    color: var(--couleur-recherche, #6B778A);
}

.search-box input[type="search"]:focus {
    outline: none;
}

.search-button {
    height: 40px;
    width: 40px;
    background-color: var(--couleur-bleu-clair, #095797);
    border: none;
    color: var(--couleur-fond, #FFF);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.search-advanced {
    font-family: 'Open Sans', sans-serif;
    font-weight: normal;
    font-size: 14px;
    color: var(--couleur-bleu-clair, #095797);
    text-decoration: none;
    display: inline-block;
    margin-top: 10px;
}

/*************************/
/******** Accordeons ********/
.accordeon {
    border-style: none;
    font-size: 16px;
    padding: 16px;
    width: 100%;
    height: 56px;
    margin-top: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    background-color: var(--couleur-fond-accordeon, #F1F1F2);
    color: var(--couleur-bleu-fonce, #223654);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.accordeon strong {
    flex: 1;
    text-align: left;
    white-space: normal;
}

.accordeon:after {
    content: url("../../../communs/ressources/img/plus.svg");
}

.active:after {
    content: url("../../../communs/ressources/img/moins.svg");
}

.acc-contenu {
    padding: 0 16px;
    background-color: var(--couleur-fond, #FFF);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    border: none;
}

/*******************/
/** Écran <=850px **/
@media screen and (max-width: 850px) {
    .contenu {
        padding-top: 16px;
    }

    .grille {
        grid-template-rows: auto 1fr;
        grid-template-columns: 1fr;
    }

    .petit-titre-mobile {
        padding: 12px var(--minimum-margin, 16px);
        border: none;
        width: 100%;
        max-width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        font-size: 24px;
        color: var(--couleur-bleu-fonce, #223654);
        background-color: var(--couleur-hightlight, #DAE6F0);
    }

    .petit-titre-mobile strong {
        font-size: 20px;
        flex: 1;
        text-align: left;
        white-space: normal;
    }

    .menu-lateral {
        padding-left: 0;
        transition: max-height 0.2s ease-out;
        overflow: hidden;
    }

    .menu-section {
        /**Pour cacher le menu en format mobile**/
        max-height: 0;
    }

    .search-box {
        /**Pour cacher la recherche en format mobile**/
        display: none;
    }
}

/****** Écran >850px *******/
@media not screen and (max-width: 850px) {
    :root {
        --largeur-max-contenu: 650px;
        --margin-left-contenu: 0; /**Pas besoin d'espace supplémentaire entre les colonnes**/
    }

    .grille {
        grid-template-rows: auto;
        grid-template-columns: 1fr 2fr;
        grid-column-gap: 48px;
    }

    .menu-lateral {
        overflow-x: auto;
        border-radius: 0.25rem;
        margin-top: 72px; /**Pour offset verticalement le menu**/

        /**Pour garder le menu centré sur des écrans larges**/
        margin-left: auto;
        margin-right: 0;
        /****/
    }

    .liste-liens-blocs a {
        scroll-behavior: smooth;
    }
}

.highlight {
    background-color: #E58271;
}

.carte {
    width: auto;
    border: 1px solid var(--couleur-bordure, #C5CAD2);
    padding: 24px 16px;
    margin: 40px 0;
}

.carte-contenu {
    padding: 0;
    margin-top: 24px;
}

#nom, #courriel {
    margin: 0;
    padding: 0;
}

#lieu {
    margin: 0;
    padding: 16px 0;
}

#nom::before {
    content: url("../../../communs/ressources/img/personne.svg");
}

#lieu::before {
    content: url("../../../communs/ressources/img/lieu.svg");
}

#courriel::before {
    content: url("../../../communs/ressources/img/courriel.svg");
}

#nom, #lieu, #courriel {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
}

.note-bas-page-link {
    text-decoration: none;
    font-size: 9px;
    line-height: 9px;
}

.note-bas-page-link sup {
    font-weight: bold;
    padding: 2px 3px;
    background-color: var(--couleur-hightlight, #DAE6F0);
    white-space: nowrap;
}

.note-bas-page-link::after {
    content: none;
}

.icon-note {
    text-decoration: none;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
}

.icon-note::after {
    content: none;
}

body {
    /**Utilisé pour le bouton <top>**/
    display: grid;
    grid-template-columns: auto 0;
}