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%;
    margin: 1em 0 .5em;
}


h6 {
    font-size: 80%;
    text-align: right;
    font-weight: normal;
}

.button {
    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;
}

.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: 20px;
}

#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) {
    #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;
}

#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: 10px;
        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;
    }

    #header {
        padding: 0;
        height: 60px;
    }

    #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: 90%;
    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 span.end {
        display: none;
    }

}

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

.col {
    flex: 0 0 20%;
    padding-left: 2em;
}

.col img {
    margin: 0 auto;
}

.main-col {
    flex: 1 1 64%
}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
    
    #col-wrapper {
        flex-direction: column;
    }

    .col, .main-col {
        flex: 1 1 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;

	}

}

/* 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;
}

/* 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;
}

#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;
}

/* 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;
}

.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);
}

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

.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%;
}

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

/* 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;
}

#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: var(--border-size) solid black;
    padding: 0 0 1em 0;
}

.info h3 {
    font-size: 110%;
    margin: 0;
}

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

@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;
    }
}

/* Carte
************************************************************************************************************************/
#mapdetailid {
    height: 300px;
}

#mapid {

    width: 100%;
    height: 50vh;
    margin: 0;
}

/* MEMBRES
************************************************************************************************************************/
#logos-wrapper {
    display: flex;
    flex-wrap: wrap;
}

.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 .error {
    color: red;
    margin: 2em 0;
    ;
}

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

.error {
    display: none;
}

#esp-form label span {
    font-weight: bold;
    margin-top: 1em;
    display: block;
}

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

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

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

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

#footer p {
    margin: 0;
}


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

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

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