body {
    font-family: "Barlow", sans-serif;
    font-size: 20px;
}

/* Variables
************************************************************************************************************************/
:root {
    --principal: #5C2583;
    --secondaire: #B3EDFC;
    --contaste-orange: #FF6B35;
    --contaste-jaune: #FFC107;

    --bg-secondaire: rgba(179, 237, 252, 0.5);
    --bg-orange: rgba(255, 107, 53, 0.2);

    --border-radius: 8px;
    --border-size: 3px
}

a {
    color: var(--contaste-orange)
}

/* Typo
************************************************************************************************************************/

h3 {
    text-transform: uppercase;
    color: var(--principal);
    font-weight: 900;
    font-size: 150%;
    line-height: 1.3em;
    margin: 1em 0 .5em;
}

h4 {
    margin: 2em 0 .5em;
}


h6 {
    font-size: 80%;
    text-align: right;
    font-weight: normal;
    margin-bottom: 2em;
}

.button, .btn {
    border: var(--border-size) solid black;
    border-radius: var(--border-radius);
    background: var(--bg-secondaire);
    color: black;
    padding: .2em .7em;
    text-decoration: none;
    font-weight: bold;
    font-size: 90%;
    transition: .3s ease-in-out all;
    position: absolute;
}


.main-col .button {
    position: inherit;
    margin: 10px 0;
    display: inline-block;
    min-width: 7em;
    text-align: center;
}

.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
}

/* EN-TETE
************************************************************************************************************************/
#header {
    display: flex;
    justify-content: space-between;
    background-color: var(--bg-secondaire);
    padding: 10px;
}

#header h1, #header h2 {
    display: none;
}

#logo {
    flex: 0 0 25%;
    aspect-ratio: 4/1;
    background-image: url('../img/header-logo.svg');
    background-repeat: no-repeat;
    background-size: cover;
}

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

    #header {
        padding: 15px 10px;
        /*height: 60px;*/
    }

    #logo {
        flex: 0 0 75%;
        background-size: contain;
        background-position: left center;
        aspect-ratio: initial;
        height: 56px;
        margin: 2px;
    }

}

/* NAVIGATION
************************************************************************************************************************/
#btn-mobile-menu {
    display: none;
}

#menu {
    flex: 0 0 75%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

#nav {
    border-bottom: var(--border-size) solid black;
}

#nav a {
    color: black;
    text-decoration: none;
    text-transform: uppercase;
    padding: 0 1em;
    font-size: 1.4vw;
}

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


@media screen and (min-device-width: 320px) and (max-width: 868px) {
    #btn-mobile-menu {
        position: absolute;
        font-size: 30px;
        margin: 0;
        width: 60px;
        height: 60px;
        top: 20px;
        right: 20px;
        z-index: 99900000;
        display: block;
        cursor: pointer;
        text-align: right;
    }

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

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

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

    }

    .nav-on {
        overflow: hidden;
    }


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

    }

    .nav-on #nav {
        display: flex;
        height: 120vh;
        justify-content: flex-start;
        z-index: 10000;
        background-color: var(--principal);
        top: 0;
    }

    #nav a {
        color: white;
        text-decoration: none;
        text-align: center;
        padding: .2em .5em;
        width: 80vw;
        margin: 4px auto 40px;
        font-size: 24px;
        flex-direction: row;
        height: auto;
        justify-content: flex-start;
    }

    .nav-on #subnav {
        display: none;
    }


}

#subnav {
    display: flex;
    align-content: flex-start;
    justify-content: flex-end;
    height: 1.5em;
}

#subnav span.end {
    display: inline-block;
    border-right: var(--border-size) solid black;
    border-bottom: var(--border-size) solid black;
    width: 1em;
    height: 1em;
    padding: 10px;
}

#subnav a {
    font-size: 1.2vw;
    color: black;
    text-decoration: none;
    text-transform: uppercase;
    padding: 10px .5em;
}

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

@media screen and (min-device-width: 320px) and (max-width: 868px) {
    #header {

    }

    #menu {
        display: block;
        flex: none;
    }

    #subnav {
        /*position: relative;*/
        background: var(--bg-orange);
        width: 100vw;
        display: flex;
        flex-direction: column;
        border: 1px dotted green;
        height: auto;
    }

    #subnav a {
        font-size: 90%;
    }

    #subnav span.end {
        display: none;
    }

}

/* STRUCTURE
************************************************************************************************************************/
#col-wrapper {
    display: flex;
    justify-content: space-between;
}

.col {
    flex: 0 0 15%;

    width: 25vw;

}

.col img {
    margin: 0 auto;
}

.main-col {
    flex: 1 1 75%;

}

.col {
    /*min-width: 20vw;*/
    padding-left: 2em;
}

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

    #col-wrapper {
        flex-direction: column;
    }

    .col, .main-col {
        flex: 0 0 100%;
        width: 100%;
    }

    /*.col {*/
    /*    order: 0;*/
    /*    padding: 0;*/
    /*}*/

    /*.main-col {*/
    /*    order: 1;*/
    /*}*/
}

/* CONTENU
************************************************************************************************************************/
#content {
    width: 80vw;
    max-width: 60em;
    margin: 5vh auto;
    min-height: 60vh;
}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
    #content {
        width: 94vw;

    }

}

#btn-back {
    position: absolute;
    font-size: 2em;
    margin-left: -1em;
}

#btn-back span {
    display: none;
}

.main-col h2 {
    font-size: 200%;
    line-height: 1.1em;
    margin-bottom: .5em;
    text-transform: uppercase;
    font-weight: 500;
}

.logo {
    /*width: 200px;*/
}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
    .logo {
        width: 100%;
        margin: 0 0 40px 0;
    }
}

/* ACCUEIL
************************************************************************************************************************/
#accueil #content {
    width: 100vw;
    margin: 0;
    max-width: none;
}

#backdrop {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#backdrop::before {
    content: "";
    position: absolute;
    inset: 0;
    /*background-image: var(--backdrop-next-image, none);*/
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 280ms ease;
    pointer-events: none;
    z-index: 0;
}

#btn-urgences {;
    width: 8vw;
    height: 8vw;
    background: url(../img/icone-urgences.png);
    background-size: contain;
    border-radius: 1000px;
    display: block;
    position: absolute;
    margin-top: -12vw;
    right: 2vw;
    text-indent: -9999px;
    z-index: 100;
}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
    #btn-urgences {
        width: 25vw;
        height: 25vw;
        margin-top: -25vw;
    }
}

/* S'assure que le contenu reste au-dessus de l'overlay */
#backdrop > * {
    position: relative;
    z-index: 1;
}

/* Quand on active le fondu, l'overlay devient visible */
#backdrop.is-fading::before {
    opacity: 1;
}

#slogan {
    font-size: 200%;
    line-height: 1.2em;
    color: black;
    width: 50vw;
    margin: 0 auto 0 auto;
    padding-top: 2em;
    text-align: center;
    text-transform: none;
}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
    #slogan {
        font-size: 125%;
        width: 85vw;
        margin-bottom: 50px;
    }
}

#search-wrapper {
    text-align: center;
    margin: 0 0 10vh;
    padding-bottom: 4vh;
}

#search-wrapper .search-input-wrap {
    position: relative;
    display: inline-block;
}

#search-wrapper input[type=search] {
    width: 15em;
    border-radius: 100px;
    padding: .2em .4em;
    border: var(--border-size) solid black;
}

#search-wrapper .search-suggest {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    /*margin-top: .3em;*/
    margin-top: -2px;
    background: #fff;
    border: var(--border-size) solid black;
    border-radius: 12px;
    text-align: left;
    z-index: 10;
    display: none;
    overflow: hidden;
}

#search-wrapper .search-suggest-item {
    width: 100%;
    padding: .35em .7em;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

#search-wrapper .search-suggest-item:hover,
#search-wrapper .search-suggest-item:focus {
    background: var(--contaste-jaune);
}

.highlight {
    color: black;
    background: var(--contaste-jaune);
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}

#search-wrapper #search-button {
    border-radius: 100px;
    background: black;
    color: white;
    padding: 6px;
    width: 2em;
    height: 2em;
    border: 0
}

/* LIGNE DE VIE
************************************************************************************************************************/
#life-line-wrapper {
    display: flex;
    justify-content: space-between;
    width: 70vw;
    margin: 0vh auto 10vh;
    padding: 10vh 0 0;
    background: url(../img/bg-ligne-vie.svg) no-repeat center;
}

.life-line-item {
    width: 12vw;
    height: 12vw;
    margin: 0 2vw;
    transition: .3s ease-in-out all;
}

.life-line-item:hover {
    transform: scale(1.1);
}

.life-line-content {
    display: flex;
    flex-direction: column;
    justify-self: center;
    width: 12vw;
    height: 12vw;
    border-radius: 100%;
    border: var(--border-size) solid black;
    text-align: center;
    color: black;
    text-decoration: none;
    font-size: 1.3vw;
    z-index: 26;
    position: absolute;
}

.life-line-item img {
    width: 8vw;
    align-self: center;
}

.life-line-bg {
    width: 12vw;
    height: 12vw;
    border-radius: 100%;
    position: absolute;
    z-index: 0;
    background: white;

}

.life-line-hover {
    width: 12vw;
    height: 12vw;
    border-radius: 100%;
    position: absolute;
    z-index: 1;
    opacity: 0;
    transition: .3s ease-in-out all;
}

.life-line-item:hover .life-line-hover {
    background: var(--contaste-jaune);
    opacity: 1;
}

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

    .life-line-content {
        width: 22vw;
        height: 22vw;
        font-size: 12px;
        font-weight: bold;
    }

    .life-line-item {
        width: 22vw;
        height: 22vw;
    }

    .life-line-hover, .life-line-bg {
        width: 22vw;
        height: 22vw;
    }

    .life-line-item img {
        width: 18vw;
        margin-bottom: 12px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .life-line-item img {
        margin-bottom: 0
    }
}

/* ACTUALITES
************************************************************************************************************************/
#actualites-wrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 80vw;
    max-width: 60em;
    margin: 5vh auto;
}

#actualites-wrapper h3 {
    flex: 0 0 100%
}

.actualite-item {
    flex: 0 0 30%;
    text-decoration: none;
    text-align: center;
    color: black;
    margin-bottom: 5vh;
}

#actualites .col {
    flex: 0 0 30%;
    margin-right: 20px;
    /*padding: ;*/
}

.pagination {
    margin: 5vh auto;
    display: flex;
    justify-content: center;
}

.pagination > * {
    margin: 0 .2em;
    text-decoration: none;
}

.pagination .current {
    font-weight: 900;
}

.visuel {
    width: 85%;
    margin: 7%;
    aspect-ratio: 1;
    background-size: cover;
    background-position: center;
    border-radius: var(--border-radius);
    padding: 10px
}

.frame {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.frame1 {
    background: url(../img/cadre1.svg);
}

.frame2 {
    background: url(../img/cadre2.svg);
}

.frame3 {
    background: url(../img/cadre3.svg);
}

.frame4 {
    background: url(../img/cadre4.svg);
}

.frame5 {
    background: url(../img/cadre5.svg);
}

.frame6 {
    background: url(../img/cadre6.svg);
}

.frame7 {
    background: url(../img/cadre7.svg);
}

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

    #actualites-wrapper {
        flex-direction: column;
    }

    .actualite-item {
        flex: 0 0 100%;
    }
}

/*PERSONNES
  ************************************************************************************************************************/
#personnes-wrapper {
    display: flex;
    flex-wrap: wrap;
}

#personnes-wrapper a span {
    display: none;
}

.personne.item {
    flex: 0 0 20%;
    text-align: center;
    font-size: 80%;
    margin: 0 0 5vh 0;


}

.personne.item p {
    margin: 0;
}

.personne.item .visuel {
    border-radius: 100%;
    border-size: var(--border-size);
    border-style: solid;
    border-color: black;
    width: 80%;
    margin: 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
    .personne.item {
        flex: 0 0 49%;
    }


}

/* ANNUAIre
************************************************************************************************************************/
#annuaire:not(.detail) #content {
    width: 100vw;
    margin: 0;
    max-width: none;
}

#annuaire .liste-wrapper {
    width: 80vw;
    max-width: 60em;
    margin: 5vh auto;
}

#annuaire .icon {
    flex: 0 0 16%
}

#annuaire .icon img {
    width: 90%;
}

.no-results {
    color:      #999;
    margin:     50px auto;
    text-align: center;
}

.logo-list {
    width: 4em;
    /*height: 4em;*/
}


#annuaire .main-col {
    flex: 0 0 60%;
}

#annuaire .col  {
    flex: 1 0 auto;
}

#frmSearch {
    font-size: 1em;
    margin: 20px 0;
    display: flex;
    justify-content: center;
}

#frmSearch label {
    display: none;
}

#toolbar {

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 3em;
}

#toolbar > div {
    flex: 0 0 30%
}

.displayToggle {
    border: 2px solid var(--contaste-jaune);
    text-decoration: none;
    color: black;
    padding: .2em 0.5em;
    font-size: 1.3vw;
}

.displayToggle.selected {
    background: var(--contaste-jaune);
}

.displayToggle:first-child {
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
}

.displayToggle:last-child {
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
}

#search {
    border: 1px solid silver;
    border-radius: 100px;
    padding: 2px 8px;
    font-size: 1em;
}

#btn-search {
    background: var(--contaste-jaune);
    border: 0;
    border-radius: 100px;
    margin: 0 4px;
}

#btn-search span {
    display: none;
}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
    #toolbar {
      padding: 10px;
    }

    #toolbar > div {
        flex: 1 1 50%
    }

    #toolbar > div:last-child {
        justify-content: flex-end;
        text-align: right;
    }

    #search {
        font-size: 12px;
    }

    .displayToggle {
        font-size: 12px;
    }

    #annuaire .col {
        padding: 0;
    }
}

/* FILTRE AGES */
#life-line-filter {
    display: flex;
    border-bottom: var(--border-size) solid var(--contaste-jaune);
    justify-content: center;
    margin-top: 3vh;
}

#life-line-filter a {
    display: flex;
    justify-content: center;
    padding: 0 20px;
    align-content: flex-end;
    margin: 0 10px;
    border-width: var(--border-size);
    border-style: none;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    color: black;
    text-decoration: none;
    position: relative;
    top: 4px
}

#life-line-filter a div {
    padding-top: .7em;
}

#life-line-filter a.selected {
    border-style: solid;
    border-color: var(--contaste-jaune);
    border-left-color: var(--contaste-jaune);
    border-right-color: var(--contaste-jaune);
    border-top-color: var(--contaste-jaune);
    border-bottom-color: white;
    background: white;
}

#life-line-filter img {
    height: 3em;
}

#age-filter {
    padding: 1em;
    display: flex;
    justify-content: center;
    border-bottom: var(--border-size) solid var(--contaste-jaune);
}

#age-filter a {
    color: black;
    text-decoration: none;
    margin: 0 1em;
    border-radius: 100px;
    padding: .2em .5em;
}

#age-filter a.selected {
    font-weight: bold;
    background: var(--contaste-jaune);
}

#categories-filtre {
    padding: 1em;
    display: flex;
    justify-content: center;
    border-bottom: var(--border-size) solid var(--contaste-jaune);
}

#categories-filtre a {
    color: black;
    text-decoration: none;
    margin: 0 .2em;
    border-radius: 100px;
    padding: .2em .2em;
    font-size: 1.3vw;
}

#categories-filtre a.selected {
    font-weight: bold;
    background: var(--contaste-jaune);
}

#filtre {
    background-color: var(--bg-orange);
    display: flex;
    flex-direction: column;
    padding: 1em;
}

#filtre .categories a {
    font-size: 1.3vw;
    padding: .1em .3em;
    border: 1px solid var(--contaste-orange);
    border-radius: var(--border-radius);
    text-decoration: none;
    margin: 2px;
}

#filtre .categories a.selected {
    background-color: var(--contaste-orange);
    color: black;
}

.institution.item {

    display: flex;
    color: black;
    text-decoration: none;
    margin: 1.5em 0 0 0;
    border-bottom: 1px dotted black;
    padding: 0 0 1.5em 0;
}

.main-col .institution.item, .col .institution.item {
    margin: .7em 0 0 0;
    padding: 0 0 .5em 0;
}

.info h3 {
    font-size: 110%;
    margin: 0;
    color:black;
    font-weight: 600;
}

.infos {
    font-size: 100%;
    font-weight: normal;
}

.info strong {
    font-weight: 300;
}

.pills-wrapper {
    display: flex;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.pills-wrapper.orange .pill {
    background-color: var(--bg-orange);
}

.pills-wrapper.blue .pill {
    background-color: var(--bg-secondaire);
}


.pill {
    font-size: 70%;
    padding: .1em .5em;
    border-radius: 100px;

    width: fit-content;
    display: flex;
    margin: 0 4px 4px 0;
    align-items: center;
    text-decoration: none;
    color: black;
}

.pill img {
    width: 2em;
    align-self: center;
}

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

        width: 100%;
        justify-content: center;
    }

    #life-line-filter a {
        flex: 0 0 20%;
        flex-direction: column;
        font-size: 80%;
        padding: 0;
        margin: 0;
        text-align: center;
        line-height: 1em;
    }

    #life-line-filter a div {
        padding-bottom: 8px;
    }

    #life-line-filter a img {
        width: 50%;
        height: auto;
        margin: 0 auto;
    }

    #age-filter {
        font-size: 80%;
    }

    #age-filter a {
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-radius: 8px;
        text-align: center;
        line-height: 1em;
        margin: 4px;
    }

    #categories-filtre {
        font-size: 80%;
        flex-wrap: wrap;
    }

    #categories-filtre a {
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-radius: 8px;
        text-align: center;
        line-height: 1em;
        margin: 4px;
        font-size: 14px;
    }
}

/* Carte
************************************************************************************************************************/
#mapdetailid {
    height: 400px;
    margin: 50px 0 0 0;
}

#mapid {

    width: 100%;
    height: 50vh;

}

/* Partenaires
************************************************************************************************************************/

#partenaires-wrapper {
    display: flex;
}

#partenaires > div {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

#partenaires h4 {
    font-weight: bold;
}

.partenaire {
    width: 24vw;
    height: 18vw;
    margin: 10px;
    background-color: white;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
    .partenaire {
        width: 80vw;
        height: 50vw;
        margin: 20px 5vw;
        
        }
	}

/* MEMBRES
************************************************************************************************************************/
#logos-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.logo-membre {
    width: 20vw;
    height: 15vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    color: black;
    font-size: 80%;
    margin: 5vh 0;
    text-align: center;
    text-decoration: none;
}

.logo-membre-img {
    width: 12vw;
    height: 12vw;
    background-size: contain;

    background-repeat: no-repeat;
    background-position: center;
}

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

    .logo-membre {
        width: 42vw;
        height: 20vw;
    }

    .logo-membre-img {
        width: 40vw;
        height: 15vw;
    }
}

/* ESPACE COMITE
************************************************************************************************************************/
#espace_comite .erreur {
    color: red;
    margin: 2em 0;;
}

.loginForm .button {
    margin: 5vh 0;
}

.error {
    display: none;
}

#esp-form label span {

}

#esp-form label:not(.custom-checkbox):not(.foreign-checkbox) {
    font-weight: bold;
    margin-top: 1em;
    display: block;
}


#esp-form input[type='text'] {
    width: 100%;
    margin-bottom: 10px;
}

#esp-form .foreign-item {
    display: inline-block;
    width: 10em;
}

#esp-form h4 {
    font-size: 120%;
    margin: 1em 0 .5em;
}

.file-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #ccc;
}

.file-item a {
    text-decoration: none;
}


#btn-logout {
    float: right;
    position: inherit;
    margin-top: -40px;
}

/* PIED DE PAGE
************************************************************************************************************************/
#footer {
    /*display: none;*/
    background: #f0f0f0;
    padding: 2em;
    display: flex;
    flex-wrap: wrap;
    margin-top: 10vh;
    justify-content: space-between;
}

#footer p {
    margin: 0;
}


#footer > div {
    flex: 0 1 30%
}

#footer .tools {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

#footer a {
    color: #5C2583;
}

#footer .tools .button {
    display: block;
    position: inherit;
    align-self: flex-start;
    margin: 10px 0 0 0;
}

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

@media screen and (min-device-width: 320px) and (max-width: 768px) {
    #footer > div {
        flex: 0 0 100%;
        margin-bottom: 30px;
    }
}

/* 404
************************************************************************************************************************/
#erreur404 {
    font-weight: bold;
    font-size: 300%;
    width: 100%;
    height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}