@font-face {
    font-family: 'forumsans';
    src: url('forum_sans/forumsans-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


body {
    font-family: "Work Sans", sans-serif;
    font-optical-sizing: auto;
    font-size: 22px;

    -moz-font-smoothing: none;
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;

}


h3 {
    font-family: forumsans, sans-serif;
    font-weight: 100;
    font-size: 250%;
    line-height: 1.1em;
}

h4 {
    font-family: forumsans, sans-serif;
    font-weight: 100;
    font-size: 150%;
    margin: 1em 0 .5em;
    line-height: 1.1em;
}

.hidden {
    display: none;
}

.title-container h3 {
    font-size: 200%;
}

._item._list h4 {
    margin: 0;
    font-size: 120%;
    word-break: break-word;
}

.hidden, ._item._list.hidden {
    display: none;
}


@media screen and (min-device-width: 320px) and (max-width: 768px) {
    h3 {
        font-size: 150%;
    }
}



/*********************************************************************************************************
STRUCTURE
**********************************************************************************************************/
#wrapper {
    width: 90vw;
    margin: auto;
    min-height: 30vh;
    background: white;
    padding: 0 1em;

}

#accueil #wrapper {
    width: 100vw;
    background: transparent;
    padding: 0;
}

.skip-link {
    display: none;
}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
  #wrapper {
      width: 98vw;
      padding: 0em;
  }
}

/*********************************************************************************************************
ACCESSIBILITE
**********************************************************************************************************/

/*********************************************************************************************************
  Theme
**********************************************************************************************************/
body {
    transition: 1s ease-in-out background-color, .5s ease-in-out color;
}

.bg-theme {
    background-color: var(--main-color);
}

.theme-dark, .theme-dark ._search._item {
    background-color: #333;
    color: white
}

.theme-dark .selected {
    background-color: white;
    color: black;
}

.theme-dark ._detail a:not(.bouton):not(.toggle) {
    color:white
}

.theme-dark #compte-wrapper .gutter a:not(.bouton), .theme-dark #compte-wrapper .help_text {
    color:white;
}

.theme-dark #wrapper {
    background-color: #333;
}

.theme-dark .bg, .theme-light .other_bg {
    background-color: #333;
    transition: .5s ease-in-out background-color, .5s ease-in-out color;
}

 .theme-dark .bg_ui {
     background-color: #666
 }

.theme-dark .bg_couleur, .theme-light .other_bg_couleur {
    background-color: #333
}

/*.bg_point_noir, .theme-light ._item._list, .theme-light ._item._grid, ._item._bloc {*/
.bg_point_noir, .theme-light ._item._list, .theme-light {
    background-color: white;
    opacity: 1;
    background-image: radial-gradient(#e1dfdf 1px, white 1px);
    background-size: 3px 3px;
}

/*.theme-dark .bg_point_noir, .theme-dark ._item {*/
.theme-dark .bg_point_noir{
    background-color: #000000;
    background-image: unset;
}

.theme-dark .bg_diag {
    background-color: #474444;
    /*opacity: 0.8;*/
    background-size: 5px 5px;
    background-image: repeating-linear-gradient(45deg, #000000 0, #000000 0.5px, #474444 0, #474444 50%);
}

.theme-dark .bouton {
    color:white
}

.theme-dark ._list._item {
    background: #666;
}

.theme-dark .brd, .theme-light .brd {
    border-color: white
}

.theme-dark .txt, .theme-light .other_txt {
    color: white;
    transition: .5s ease-in-out background-color, .5s ease-in-out color;
}


.theme-light {
    background-color: white;
    color: #333
}

.theme-light ._detail a:not(.bouton):not(.toggle):not(.infos) {
    color:var(--main-color)
}

.theme-light .selected {
    background-color: black;
    color: white;
}

.theme-light #compte-wrapper .gutter a:not(.bouton) {
    color: var(--main-color)
}

.theme-light .bg, .theme-dark .other_bg {
    background-color: white;
    transition: .5s ease-in-out background-color, .5s ease-in-out color;
}

.theme-light .bg_couleur, .theme-dark .other_bg_couleur {
    background-color: var(--main-color)
}

.theme-light .bg_diag {
    background-color: #fff;
    /*opacity: 0.8;*/
    background-size: 5px 5px;
    background-image: repeating-linear-gradient(45deg, var(--main-color) 0, var(--main-color) 0.5px, #fff 0, #fff 50%);
}

.theme-light .txt, .theme-dark .other_txt {
    color: black
}


.theme-light .brd, .theme-dark .brd {
    border-color: black
}

.sticker {
    height: 100%;
}

/* Taille des polices
************************************************************************************/
.fontsize-1 {
    font-size: 18px;
}

.fontsize-2 {
    font-size: 20px;
}

.fontsize-3 {
    font-size: 24px;
}

.fontsize-4 {
    font-size: 36px;
}

/*********************************************************************************************************
NAVIGATION
**********************************************************************************************************/

nav {
    display: flex;
    justify-content: center;
    height: 60px;
    /*padding: 15px 0;*/
    font-family: "forumsans", sans-serif;
    position: sticky;
    top: 0;
    z-index: 10;
}

nav > div {
    width: 100vw;
    text-align: center;
    align-self: center;
}

nav a {
    padding: .5em .7em;
    text-decoration: none;
    color: white;
    font-size: 1.7vw;
}

#logo {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

#accueil #logo {
    display: none;
}

#logo {

}

#logo h1 {
    font-size: 190%;
    position: absolute;
    top: 14px;
    left: 20px;
    font-family: "forumsans", sans-serif;
    line-height: 1em;
    color: var(--main-color);
}

#tools {
    display: flex;
    justify-content: space-between;
    font-size: 1.4vw;
    padding: 10px 20px;
}


#tools > div {
    /*margin-left: 2em;*/
    display: flex;
}

#tools button {
    width: 2em;
    height: 2em;
    background-color: transparent;
    border: 0;
    cursor: pointer;
}

#tools #search-wrapper {
    display: flex;
    justify-content: center;
}

#tools #search {
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    border-left: 1px solid black;
    border-right: 0;
    padding: .2em 1em;
    /*border: 0;*/
    margin: 0;
}

#tools #search:focus {
    outline: none;
}

#tools #btn-search {
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    background: url(../img/btn-search.svg);
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: center;
    text-indent: -9999px;
    background-color: white;
}


#tools #fontsize-wrapper {
    display: flex;
    height: 2em;
    margin: 0 1em 0;
}

#tools #accessibility-wrapper {
    display: flex;
}

#tools #fontsize-decrease-button,
#tools #fontsize-increase-button {
    font-size: 150%;
    padding: 0;
    height: 1.3em;
    line-height: .1em;
}

#tools #fontsize-decrease-button {
    background: white;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    border-left: 1px solid black;
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
}

#tools #fontsize-wrapper #fontsize-reset-button {
    background-color: white;
    width: 1.5em;
    height: 1.95em;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    padding: 0em 0 0;
    text-indent: -9999px;
}

#tools #fontsize-increase-button {
    background: white;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
}

#tools #theme-toggle-button {
    background-size: contain;
    background-repeat: no-repeat;
    text-indent: -9999px;
    width: 4em;
    height: 2em;
}

.theme-light #tools #theme-toggle-button {
    background: url(../img/btn-switch-theme-dark.svg);
    background-repeat: no-repeat;
    background-size: contain;
}

.theme-dark #tools #theme-toggle-button {
    background: url(../img/btn-switch-theme-light.svg);
    background-repeat: no-repeat;
}

#subnav {
    text-align: center;
    padding: 1em;
    background: var(--main-color-50);

}

#subnav a {
    padding: .5em 1em;
    text-decoration: none;
    margin: 0 2px;
    font-size: 1.2vw;
}

#subnav a.selected {
font-weight: 700;
}


#btn-mobile-menu {
    display: none;
}

@media screen and (min-device-width: 320px) and (max-width: 768px) {

    #logo h1 {
        font-size: 10vw;
        margin-top: 7px;
    }

    #btn-mobile-menu {
        position: absolute;
        font-size: 4vw;
        margin: 0;
        width: 40px;
        height: 40px;
        top: 10px;
        right: 10px;
        z-index: 99900000;
        display: block;
        cursor: pointer;
        color: white;
        text-align: center;
        background-color: var(--main-color);
        position: fixed;
    }

    .nav-on {
        overflow: hidden;
    }

    #btn-mobile-menu:before {
        font: normal normal normal 14px/1 FontAwesome;
        content: '\f0c9';
        /*margin-right: .5em;*/
        margin-top: 5px;
        width: 1em;
        font-size: 30px;
        display: inline-block;

    }

    .nav-on #btn-mobile-menu:before {
        font: normal normal normal 14px/1 FontAwesome;

        content: '\f00d';
        margin-right: .5em;
        width: 1em;
        font-size: 30px;
        display: inline-block;
        color: white;

    }

    #nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        display: none;
        flex-direction: column;
        justify-content: flex-start;
        padding: 2vh 0 0 0;
        margin: 0 0;

    }

    #nav > div {
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: 0;
    }

    #nav a {
        width: 80%;
        margin: 0 auto;
        font-size: 24px;
        padding: .4em 0;
    }

    .nav-on #nav {

        display: flex;
        z-index: 10000;
        top: 0;
    }

    #tools {
        font-size: 100%;
    }

    #tools .left {
        height: 40px;
    }

    #tools .right {
        display: none;
    }

    #tools div {
        display: block;
    }

    .nav-on #tools .right {
        background: transparent;
        display: flex;
        flex-direction: column;
        position: fixed;
        width: 100%;
        top: 65vh;
        left: 0;
        z-index: 1000000;
    }

    .nav-on #tools #fontsize-wrapper {
        display: none;
    }

    .nav-on #tools #accessibility-wrapper {
        justify-content: center;
        margin: 1em 0 0;
    }

    /* Navigation secondaire */
    #subnav {
        background-color: var(--main-color);
        justify-content: space-between;
        display: flex;
        flex-direction: row;
        position: sticky;
        top: 0;
        padding: 13px 0;
    }

    #subnav .gutter {
        overflow-x: scroll;
        overflow-style: marquee-block;
        -webkit-overflow-scrolling: touch;
        overflow-y: hidden;
        display: flex;
        flex-direction: row;
    }

    #subnav a {
        flex: 0 0 auto;
        /*height:  fit-content;*/
        margin: 0 1em 0 0;
        padding: 0.2em .5em;
        font-size: 18px;
    }

    #subnav a.selected {
        font-weight: bold;
    }

    #subnav .arrows {
        /*display: block;*/
        /*position: relative;*/
        /*margin-left: -1em;*/
        width: 1em;
        height: 100%;
        flex: 0 0 4%;
        margin: 4px 2px 0 2px;
    }

    #subnav .arrows.right {
        /*margin-left: 90vw;*/
    }

}


/*********************************************************************************************************
FILTRES
**********************************************************************************************************/
._filter_wrapper {
    background-color: #f0f0f0;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 10px 0;
    padding: 10px;
    /*grid-column: 5*/
    flex: 0 0 100%;
}

._filter_input_toggle {
    display: flex;
    justify-content: flex-start;
    margin: 10px 0;
    flex: 0 0 100%;
    flex-wrap: wrap;
}

._filter_input_toggle a {
    padding: .2em .4em;
    text-decoration: none;
    display: inline-block;
    border-radius: 4px;
    margin: 4px;
    color: black;
    background-color: rgba(0, 0, 0, .3);
}

._filter_wrapper .selected {
    color: white;
    font-weight: 700;
    background-color: var(--main-color);
}

._filter_wrapper a {
    background-color: var(--main-color-50);
}

._filter_input_search {
  font-size: 100%;
    border: 1px transparent;
    border-radius: 100px;
    padding: 0.2em 1em;
    flex:0 0 100%;
    text-align: center;
}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
    ._filter_wrapper {
        width: 100%;
        font-size: 80%;
        padding: 2px;
    }

    ._filter_input_toggle a {
        flex: 0 0 auto
    }
}

/*********************************************************************************************************
UI
**********************************************************************************************************/
.sticky {
    position: sticky;
    top: 60px;
    margin-top: 4em;
    z-index: 50;
}

.sticky h3 {
    font-size: 200%;
    padding: .2em;
}


.sticky.stuck {
    box-shadow: 0 10px 40px silver;
}

#map {
    width: 100%;
    aspect-ratio: 4/3;
    margin-bottom: 1em;
}

.error {
    /*display: none;*/
}

.bouton, .btn {
    border: 0;
    display: inline-block;
    border-radius: 4px;
    cursor: pointer;
    transition: .5s ease-in-out transform;
    background: var(--main-color-50);
    padding: .5em 1em;
    text-decoration: none;
    color: black
}

.bouton:hover {
    transform: scale(1.05);
}

.alerte {
    padding: 1em;
    text-align: center;
    font-weight: 700;
    margin: 1em 0;
    color: white;
    border-radius: 8px;
}

.alerte.vert {
    background: #3c763d;
    border: 1px solid #3c763d;
}


.no-result {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 50vh;
    width: 100%;
    text-align: center;
}

#esp-form, .esp-grid {
    font-size: 80%;
    width: 80%;
    margin: 0 auto 5vh;
}

#esp-form h2, #esp-grid h2 {
    display: none;
}
#esp-form .field {
    padding: 0 1em 0 0;
}
#esp-form .field.full {
    flex: 1 1 100%;
}

#esp-form .field.half {
    flex: 1 1 50%;
}

#esp-form .field.third {
    flex: 1 1 33%;
}

#esp-form .field.two-thirds {
    flex: 1 1 66%;
}

#esp-form .field.quarter {
    flex: 1 1 25%;
}

#esp-form .field.three-quarters {
    flex: 1 1 75%;
}

#esp-form h5 {
    font-family: "forumsans", sans-serif;
    font-size: 200%;

}

#esp-form .fa-calendar {
   display: none;
}

#esp-form h6, .esp-grid h6 {
    font-family: "forumsans", sans-serif;
    padding: 2em 0 0 0;
    margin-bottom: .5em;
    font-size: 125%;
    border-bottom: 2px solid silver;
}

.alert {
    text-align: center;
    margin: 0 0 2em 0;
    border-radius: 8px;
    color: white;
    padding: 1em;
}


.alert-danger {
    background: red;
}

.alert-success {
    background: green;
    margin: 2em auto 10em;
}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
    .sticky {
        position: sticky;
        top: 0px;
        margin-top: 4em;
        z-index: 50;
    }

 .sticky {
        top:60px
    }

 #agenda .sticky {
     top:0
 }
}


/*********************************************************************************************************
Eléments
**********************************************************************************************************/

/* Liste */
._item {
    padding: .5em;
    border-radius: 8px;
}

._list-wrapper {
    width: 100%;
}


._item._list .visuel {
    flex: 0 0 10%;
    align-self: center;
    /*aspect-ratio: 1*/
;
}

@media screen and (min-device-width: 320px) and (max-width: 768px) {

    ._list-wrapper {
        width: 100%;
    }


   ._list._item {
       flex: 0 0 100%;
       flex-direction: column;
       width: 100%;
   }

    ._item._list .visuel {
        flex: 0 0 100%;
        aspect-ratio: 1;
    }

    ._item._list .actions {
        display: none;
    }

}

/* Logo */
._item._logo {
    /*width: 33vw;*/
}

@media screen and (min-device-width: 320px) and (max-width: 768px) {


    ._item._logo {
        width: 33vw;
    }
}


/* Grille */
._grid-wrapper {
    width: 100%;
    display: flex;
    margin: 0;
    padding: 0;
}

._grid._item {
    aspect-ratio: unset;
}

._grid._item:hover .actions {
    display: none;
}

._grid._item .infos {
    margin: 0;
    height: 0;
    display: unset;
}

._grid .visuel {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 8px;
}

._grid h3, ._bloc h3 {
    background-color: rgba(255,255,255,.8);
    font-size: 120%;
    padding: 2px;
    width: auto;
    margin: 0;

}

._grid h4, ._bloc h4, #_blocs-wrapper h4{
    background-color: rgba(255,255,255,.8);
    font-size: 80%;
    padding: 2px;
    width: auto;
    margin: 0;
}

._grid h5, ._bloc h5 {
    background-color: rgba(255,255,255,.8);
    font-size: 80%;
    padding: 2px;
    width: auto;
    margin: 0;
}

/* Bloc
*************************************************************/

#_blocs-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: 100%;
}

#accueil #_blocs-wrapper {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

#accueil #_blocs-wrapper  ._item._bloc {
    transition: .6s cubic-bezier(.66,-0.81,.18,1.61)
}

#accueil #_blocs-wrapper  ._item._bloc:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 20px var(--main-color-50);
}


#_blocs-wrapper ._item._bloc {
    /*height: 20vw;*/
    margin: 20px;
    padding: 0;
    text-decoration: none;
    color: black
}


._item._bloc .title-container {
    aspect-ratio: 1;
}

#_blocs-wrapper ._item._bloc .visuel {
    /*filter: grayscale(1);*/
    background-size: cover;
        overflow: hidden;
    justify-content: space-between;
    border-radius: 8px;
}

#_blocs-wrapper ._item._bloc .visuel.portrait {
    background-size:  100% auto;
}

#_blocs-wrapper ._item._bloc .visuel.landscape {
    background-size:   100% ;
}

#_blocs-wrapper .title-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

#_blocs-wrapper .no-image .title-container {
    justify-content: center;
    align-content: center;
    align-self: center;
    text-align: center;
    /*transform: rotateZ(-20deg);*/
    transform-origin: center;
    text-align: center;
}
#_blocs-wrapper .no-image .title-container h3, #_blocs-wrapper .no-image .title-container h4, #_blocs-wrapper .no-image .title-container h5 {
    background-color: transparent;
    text-align: center;
    width: 100%;
    color:white;

}


#_blocs-wrapper h3 {
    order: 1;
    width: fit-content;
}


#_blocs-wrapper h4 {
    order: 0;
    margin: 0;
    padding: .5em;
    width: fit-content;
}

#_blocs-wrapper h5 {
    order: 2;
    width: fit-content;
}

#_logo {
    grid-row: span 2;
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    aspect-ratio: 1;
    margin: 0 10px 0 0;
}

#accueil video {
    /*width: 100%;*/
    /*height: 100%;*/
    /*!*position: absolute;*!*/
    /*object-fit: cover;*/

    z-index: 0;
}

.video-masque-1 {
    -webkit-mask-box-image: url(/img/accueil-masque-1.svg);
    mask-box-image: url(/img/accueil-masque-1.svg);
}

.video-masque-2 {
    -webkit-mask-box-image: url(/img/accueil-masque-2.svg);
    mask-box-image: url(/img/accueil-masque-2.svg);
}

.video-masque-3 {
    -webkit-mask-box-image: url(/img/accueil-masque-3.svg);
    mask-box-image: url(/img/accueil-masque-3.svg);
}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
    #_blocs-wrapper {
        display: flex;
        flex-direction: column;
        /*width: 100vw;*/
        padding: 2vw;
    }

    #_blocs-wrapper ._item._bloc {
        margin: 4vw 0;
    }
}

/* Mini */
._item._mini .visuel {
    height: 4em;
    width: 4em;
    background-color: white;
    /*border-radius: 100px;*/
}

._item .visuel.no-image {
    background-color: var(--main-color);
}

._item._mini a {
    color: black;
}

._item._mini h3 {
    margin: .2em 0;
}

._item._mini h4 {
    margin-top: 0;
    font-family: "Work Sans", sans-serif;
    font-weight: 300;
}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
    ._item._mini {
        flex-direction: row;
    }

    ._item._mini .visuel {
        height: 50px;
        width: 50px;

    }

    ._item._mini h3 {
        font-size: 100%;
    }

    ._item._mini h4 {
        font-size: 80%;
    }
}

/* Détail */

._item._detail {
    padding: 0 2vw;
    margin: 0;
    display: flex;
}

._item._detail > div {
    margin-bottom: 3vh;
}

._item._detail > .title-container {
    margin-top: 1em;
    order: 0;
    aspect-ratio: 1;
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: right;

}

._item._detail.pages > .title-container {
    aspect-ratio: unset;
    flex: 0 0 100%;
    display: flex;
    flex-direction: row;
    margin: 8vh 0;
}

._item._detail.pages > .title-container > div {
    flex: 0 0 49%
}

._item._detail > .title-container > .titre {
    display: flex;
    flex-direction: column;
    justify-content: center;
}


._item._detail > .title-container > .explication {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    padding: 0 2em;
    font-style: italic;
    font-size: 90%;
    flex: 0 1 49%
}

._item._detail > .visuel {
    order: 1;
    flex: 0 0 49%;
    background-size: cover;
}

._item._detail > .content-container {
    flex: 0 0 69%;
    order: 2;
    padding-top: 5vh;
}

._item._detail > .content-container a:not(.infos) {
    color: var(--main-color);
}

._item._detail > .secondary-container {
    flex: 0 0 29%;
    order: 3;
    padding-top: 5vh;
}

._item._detail > .secondary-container a:not(.bouton) {
    color: var(--main-color);
}

._item._detail > .secondary-container h4 {
    color: var(--main-color);
    border-top: 1px solid var(--main-color);
    padding: .5em 0 0 0;
    margin-top: 2em;
}

._item._detail > .secondary-container a {
    text-decoration: none;
}

._item._detail > .secondary-container h4:first-child {
    margin-top: 0;
}

._item._detail > .actions-container {
    order: 4;
}


._item._detail > .title-container h3 {
    font-size: 400%;
    /*hyphens: auto;*/
    /*word-break: break-all;*/
    line-height: .9em;
    margin: .5em 0;
}


@media screen and (min-device-width: 768px) and (max-width: 1124px) {
    ._item._detail > .title-container h3 {
        font-size: 200%;
    }
}


@media screen and (min-device-width: 320px) and (max-width: 768px) {

    ._item._detail {
        width: 90vw;
        display: flex;
    }

    ._item._detail > div {
        felx: 0 0 100%
    }

    ._item._detail > .title-container {
        flex: 0 0 100%;
    }

    ._item._detail .title-container {
        order: 0;
        text-align: left;
        aspect-ratio: unset;

        width: 100%;
    }

    ._item._detail > .title-container  h3 {
        font-size: 200%;
    }

    ._item._detail > .content-container {
        order: 2;
        width: 100%;
        flex: 0 0 100%;
    }

    ._item._detail > .visuel {
        order: 1;
        flex: 0 0 100%;

    }

    ._item._detail.pages {
        flex-direction: column;
        width: auto;
    }

    ._item._detail.pages > .title-container {
        flex-direction: column;
    }

    ._item._detail.pages > .title-container > .explication {
        text-align: left;
        padding: 0;
        margin: 0;
    }

    ._item._detail.pages > .title-container h5 {
        font-size: 125%;
    }

    ._item._detail.pages > .title-container h3 {
        font-size: 250%;
    }

    ._item._detail.pages > div {
        width: 100%;
    }

    ._item._detail > .secondary-container {
        flex: 0 0 100%;
        width: 100%;
        order: 3;
    }
}

/* Recherche */
._search._item {
    display: flex;
    margin-top: 10px;
    text-decoration: none;
    color: black
}

._search._item .visuel {
    display: block;
    height: 4em;
    width: 4em;
    margin: 0 10px 0 0;
}

._search._item .infos {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

._search._item h3 {
    font-size: 150%;
}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
    ._search._item .visuel {
        height: 2em;
        width: 2em;
        aspect-ratio: 1;
        background-size: cover;
        background-repeat: no-repeat;
    }

    ._search._item .infos {
        flex: 0 0 70%;
    }

    ._search._item h3 {
        font-size: 100%;
    }
}


/*********************************************************************************************************
FORMULAIRES
**********************************************************************************************************/
#esp-form label {
    display: block;
    width: 100%;
    margin: 2em 0 .2em;
}

#esp-form label span {
    font-weight: bold;
    display: block;
}


#esp-form select {


    display: grid;
    font-family: "Work Sans", sans-serif;
    width: 100%;
    font-size: 125%;
    min-width: 15ch;
    max-width: 30ch;
    border-radius: 0.25em;
    padding: 0.25em 0.5em;
    /*font-size: 1.25rem;*/
    cursor: pointer;
    line-height: 1.1;
    background-color: white;
}


#esp-form input {
    width: 100%;
    border: 1px solid silver;
    padding: .2em;
    border-radius: 4px;
}

#esp-form textarea {
    width: 100%;
    height: 10em;
}

#esp-form input[type=checkbox], #esp-form input[type=radio] {
    width: 1em;
    height: 1em;
    float: left;
}

#esp-form .help_text {
    color: black;
    font-size: 80%;
}

#esp-form .error {
    /*display: none;*/
}

#esp-form .button-bar {
    display: flex;
    justify-content: flex-end;
    padding: 2em 0;
}

/*********************************************************************************************************
CALENDRIER
**********************************************************************************************************/

#oCalendar {
    width: 100%;
    border-collapse: collapse;
}

.oDays {
    font-size: 100%;
    font-weight: bold;
    text-align: center;
}

.calendar-day {

    border: 1px solid silver;
    /*aspect-ratio: 1;*/
    text-align: center;
    height: 4em;
    width: 3em;
}

.legend {
    margin: .2em 0;
}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
    .calendar-day {
        height: 1em;
        width: 1em;
    }
}

/*********************************************************************************************************
PIED E PAGE
**********************************************************************************************************/

#footer {
    box-shadow: inset 0 10px 40px -10px rgba(0, 0, 0, 0.2);
    /*margin-top: 2vh;*/
    padding: 4vh 2vw;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /*background: silver;*/
    font-size: 75%;

}

#footer ._logo {
    aspect-ratio: unset;
    width: 10vw;
    height: 8vw;
}

#footer a {
    text-decoration: none;

}

#footer>div {
    /*padding: 1em;*/
    flex: 0 0 24%;
}

#footer i.rs {
    font-size: 200%;
    margin-right: 10px;
}

#footer h5 {
    font-size: 125%;
    font-family: "forumsans", sans-serif;
}

#footer h6 {
    font-size: 110%;
    font-family: "forumsans", sans-serif;
}

#footer #credits {
    font-size: 70%;
    text-align: right;
    flex: 0 0 100%;
    padding: 4em;
}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
    #footer {
        padding-top: 5vh;
        flex-direction: column;
    }

    #footer > div {
        flex: 0 0 100%;
        margin: 2vh 0;
    }

    #footer ._logo {
        width: 40vw;
        height: 15vw;
    }
}
/*********************************************************************************************************
COMPTE
**********************************************************************************************************/
#login-content {
    margin: 0vh auto;
}

#login-content form {
    width: 60vw;
    border-width: 1px;
    border-style: solid;
    border-radius: 8px;
    padding: 1em;
    margin: 0 auto 20vh;
}

#login-content form .bouton-bar {
    margin: 20px auto;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

#compte.connecte #compte-wrapper {
    /*display: flex;*/
    width: 100%;

}

#compte.connecte:not(.mobile) #compte-wrapper {
    display: flex;
}

#compte.connecte:not(.mobile) #compte-wrapper #subnav {
    display: flex;
    flex-direction: column;
    padding: 10px;
}

#compte.connecte  #wrapper {
    width: 100vw;
    margin: 0;
    padding: 0;
}

#compte.connecte:not(.mobile) #compte-wrapper #subnav a {
    width: 12vw;
    height: 10vh;
    background: white;
    margin-bottom: 10px;
    border: 1px solid black;
    color: black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 4px;
    font-size: 1.2vw;
}

#compte.connecte #compte-wrapper #subnav a {
  color:black
}

#compte.connecte #compte-wrapper #subnav a.selected  {
    background-color: black;
    color: white;
    font-weight: 700;
}

#compte.connecte:not(.mobile) #compte-wrapper .gutter {
    padding: 2vw;
    width: 80%;
    /*display: flex;*/
}

#compte.connecte.mobile #compte-wrapper > .gutter {
    padding: 2em 5vw;
    width: 100%;
}

#compte-wrapper .many_to_many div {
    display: flex;
    flex-wrap: wrap;
}

#compte-wrapper .many_to_many div .foreign-item {
    display: inline-block;
    margin: 10px 20px 0 0;
    border: 1px solid silver;
    border-radius: 8px;
    padding: .2em .5em;
}

#compte-wrapper .many_to_many div .foreign-item input[type=checkbox] {
    margin: 3px;
}

#compte-wrapper .inline-labels .field label {
    display: flex;
    padding: 0;
    margin: 10px 0;
}

#compte-wrapper .inline-labels .field label span {
    flex: 0 0 10em;
}

#compte-wrapper .inline-labels .field label .input-group {
    flex: 0 0 calc(100% - 10em);
}

.error {
    border: 2px solid red
    /*display: none;*/
}

small.error {
    display: none;
}

.errorMessage {
    color: red;
    font-size: 80%;
}

.cotisation-item, .reservation-item {
    display: flex;
    justify-content: space-between;
    border-bottom: 2px dotted var(--main-color-50);
    margin: .5em 0;
    padding: .5em 0;
    width: 100%;
}

.cotisation-item div {
    flex: 1 1 20%;
    align-self: center;
}

.cotisation-item .red {
    color: maroon;
}

.cotisation-item .green {
    color: green;
}

@media screen and (min-device-width: 320px) and (max-width: 768px) {

    #login-content form {
        width: 100%;
        margin: 0vh auto;
    }

    #login-content form .bouton-bar {
        flex-direction: column;
    }

    #login-content form .bouton-bar .bouton {
        margin: 10px;
        font-size: 14px;
    }

    #login-content form .bouton-bar .bouton:first-child {
        order :1
    }
    #compte #esp-form, .esp-grid {
        width: 100%;
    }

    .cotisation-item {
        flex-direction: column;
    }

    #compte #esp-form h5 {
        margin: 2em 0 0 0;
    }
}

/*********************************************************************************************************
 404
**********************************************************************************************************/
#erreur404 h3 {
    margin: 10vh 0 0;
    font-size: 19vw;
    text-align: center;
}

#erreur404 h4 {
    margin: 0vh 0 10vh;
    font-size: 3vw;
    text-align: center;
}

h4.center {
    text-align: center;
}

#_blocs-wrapper.center {
    justify-content: center;
}