/*************************************/
/* A11Y */
/*************************************/

.visually-hidden, .a11y a {clip: rect(0 0 0 0);  
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;}

.a11y a:focus, .a11y a:active {
    outline:2px solid transparent;
    height:100%;
    width:100%;
    margin:auto;
    overflow: visible;
    display:block;
    position:relative;
    clip: auto;
    padding:0.8em 0.5em 1em 0.5em;
    background-color:#f7fafd;
    text-align: center;
    color:#454646;
    line-height: 1;
    text-decoration:underline;
    box-sizing: border-box;
}

/*************************************/
/* ÉLÉMENTS HTML GÉNÉRAUX */
/*************************************/

html, body {
    height: 100%;
}

body {  
    font-size: 100%;
    line-height: 1.65em; /* WCAG 2.0, Règle 1.4  */
    background-color:#fff;
    padding:0;
    margin:0;
    display: flex;
    flex-direction: column;
}

p, ul li, ol li, .a11y {
    color:black;
    font-family:"Barlow", sans-serif;
    font-size:1.1em;}

ul li, ol li {margin-bottom:0.4em;}

sup, sub {
    vertical-align: baseline;
    position: relative;
    top: -0.6em;
    white-space: nowrap;
}

abbr {
    border-bottom: 0;
    padding-bottom:1px;
    text-decoration:none;}

a {
    text-decoration: underline;
    text-underline-position: under; 
    color:#000;
}

a:focus, a:active, a:hover  {
    color:#2f519f;
    text-decoration:none;
    border-bottom:none;}


h1 {
    color:#2f519f;
    font-weight:bold;
    font-family: "B612", sans-serif;
    font-size:1.8em;
    margin-bottom:0.3em;
    line-height: 135%;
}

h2 {color:#3a3a3a;
    font-family: "Barlow", sans-serif;
    font-size:1.5em;
}

h2:first-of-type {margin-top:1rem;}

h3 {color:#313131;
    font-size:1.22em;}

img {max-width: 100%;
    height: auto;
    border:0;
}

/*************************************/
/* Styles de base */
/*************************************/

.italique {font-style: italic;}
.gras {font-weight:bold;}
.semigras, strong {font-weight:600;}
.maj {text-transform:uppercase;}
.biblio {
    text-indent: -2.1em;
    margin-left:2.1em;
    margin-bottom:0.7em;
    margin-top:0.7em;}
.img-link a {border:0 !important;}
.att-r {color:#E52521; font-weight:500;}
.att-b {color:#2f519f; font-weight:500;}

/*************************************/
/* Visibilité du focus */
/*************************************/

.js-focus-visible :focus:not(.focus-visible) {
    outline: 3px solid transparent;
}

.js-focus-visible .focus-visible,
.no-js :focus {
    outline:2px dotted #2f519f;
    outline-offset: 2px;
    background-color:#fff;
    box-shadow:0 0 0 3px #fff;
    -moz-outline-radius:3px;
}
#main-menu a.focus-visible,
.no-js #main-menu a:focus,
ul.logos a.focus-visible:focus {outline-offset: 6px;
    box-shadow: 0 0 0 6px #fff;}

#subnav nav ul li a.focus-visible:focus,
.no-js #subnav nav ul li a:focus {
    text-decoration:none;}

/*************************************/
/* Wrappers */
/*************************************/

#site-header, 
#main-menu, 
#content,
.footer-links,
.footer-copyright-wrapper {
    max-width:1200px;
    margin:auto;}

/* Always bottom footer */

.middle-wrapper {flex-grow:1;}

.header-wrapper, 
.main-menu-wrapper,
.middle-wrapper, 
.footer-wrapper {flex-shrink:0;}


/*************************************/
/* En-tête */
/*************************************/

.header-wrapper {
    border-top:15px solid #2f519f;
}

#site-header {background: url(../images/banner-o1.png) 520px top no-repeat, 
    url(../images/banner-o2.png) 843px bottom no-repeat;
    min-height:300px;
}

.coll {
    padding-top:0.5rem;
    padding-bottom:1.5rem;
}
.international p {
    color:#2f519f;
    font-size:1.3em;
    font-weight:500;
    margin-bottom:0em;
}
.nom-colloque p {
    font-family:"B612", sans-serif;
    font-weight:bold;
    color:#2f519f;
    margin-bottom:0.7em;
}
.ligne1 {
    font-size:2.3rem;
    line-height:110%;
}
.ligne2 {
    font-size:2.7rem;
    display:block;
    line-height:110%;
    max-width:34rem;}

.date-lieu {
    /*
    padding:0.5rem 0.8rem;
    background-color:#fff;
    display:inline-block;
    border:1px solid #2f519f;
    border-top:1px solid #e52521;
    border-right:1px solid #e52521;
    border-radius: 3px;
    */
}
.date-lieu p {color:#2f519f;
    font-weight: 500;
    margin-top:0;
    margin-bottom:0;}


/*************************************/
/* Menu */
/*************************************/

.navbar-toggle {display:none;}

.main-menu-wrapper {
    background-color:#f7fafd;
    border-top:1px solid #ccc;
    border-bottom:1px solid #ccc;
}

#main-menu ul {
    margin:0;
    padding:0; 
    list-style-type: none;
    display:flex;
    align-content: space-around;
    flex-direction: row;
    flex-wrap: wrap;
}

#main-menu ul li {
    margin-right:1.4rem;
    margin-bottom:0;
    padding:0; 
    display:flex;
    align-items:center;
    justify-content: center;
    flex-basis:auto;
}

#main-menu ul li a {
    font-size:1.1rem;
    height:102%;
    box-sizing:border-box;
    align-items:center;
    font-weight:500;
    line-height: 125%;
    text-decoration:none;
    color:#2f519f;
    border-bottom:3px solid transparent;
    padding-top:0.9em;
    padding-bottom:0.9em;
    text-align:center;
    flex-grow:2;
    justify-content: center;
    display:inline-flex;

}

#main-menu ul li a:hover,
#main-menu ul li a:focus,
#main-menu ul li a:active,
#main-menu ul li.current_page_item a {
    color: #2f519f;
    border-bottom:3px solid #2f519f;
}

#main-menu ul li:last-of-type {
    margin-right:0;
}


/*************************************/
/* Contenu */
/*************************************/

#content {
    padding-top:1.5rem;
    padding-bottom:2rem;
    display:block; /* Older browsers */
    display:grid;
}

#content.sec-page {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto 1fr;}

#content.sec-page .maintext {
    max-width:875px; /*old browsers*/
    grid-column: 1 / span 3;
    grid-row:2;
} 

#content.main-page {
    display:block;
    padding-left:390px;
    box-sizing:border-box;
    background: url(../images/statue2.png) left 1.2rem no-repeat;
    padding-top:1.8rem;}

#content.sec-page h1 {
    grid-column: 1 / span 4;
    grid-row:1}

#subnav {
    float:right; /* pour de plus vieux navigateurs */
    grid-column: 4 / span 1;
    grid-row:1 / span 2;
    width:330px;
    position:relative;
}

#subnav .this-page {
    font-weight:600;
    margin-top:0.2em;
    font-size:1.2rem;
}

#subnav nav {
    border:1px solid #ccc;
    border-left:8px solid #2f519f;
    padding:0.6rem 1.3rem;
    background:#f7fafd;
    margin-left:2rem;
    margin-top:1.5em;
    position:sticky;
    position: -webkit-sticky;
    top:1.5em;
}

#subnav nav ul {
    position:relative;
    list-style-type:none;
    margin-left:0;
    padding-left:1.6em;}

#subnav nav ul li a {
    text-decoration: none;
    color: #2f519f;
    font-size:1.1rem;
    font-weight:500;
    display:inline-block; /* Pour rendu adéquat de l'outline a11y */}

#subnav nav ul li a:hover,
#subnav nav ul li a:active,
#subnav nav ul li a:focus {
    text-decoration:underline;
    text-underline-position: under;
    color:#2f519f; }

#subnav nav ul li:before {
    content: "";
    height: 0.7em;
    width: 0.7em;
    border-bottom: 1px solid #111;
    left: 0.1em;
    position: absolute;}

#complement-landingpage {
    display:flex;
    justify-content: space-between;
    flex-wrap: wrap; 
    box-sizing: border-box;}

.encadre {
    box-sizing: border-box;
    border:1px solid #ccc;;
    background-color:#f7fafd;
    padding:0.5rem 1.3rem;
    position:relative;
    width:100%;
    margin-bottom:1.5rem;
}

.encadre:before {content: "";
    height: 12px;
    width: 12px;
    border-top: 2px solid #e52521;
    border-left: 2px solid #2f519f;
    top:-1px;
    left:-1px;
    position: absolute;}

.encadre:after {
    content: "";
    height: 12px;
    width: 12px;
    border-bottom: 2px solid #2f519f;
    border-right: 2px solid #e52521;
    bottom:-1px;
    right:-1px;
    position: absolute;}

#desc-landingpage {padding-left:0;
    margin-bottom:2rem;}


#dates-landingpage, #organisation-landingpage {width:calc(53% - 0.8rem);}
#invites-landingpage, #contact-landingpage {width:calc(47% - 0.8rem);}

/*************************************/
/* Pied de page */
/*************************************/

.footer-wrapper {flex-shrink: 0;
    border-top: 1px solid #e52521; }

.footer-copyright {
    background-color:#2f519f;
    background-color: #223a70;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    padding-left: 1.5em;
    padding-right: 1.5em;
    margin-top:4px;}

.footer-copyright p {color:#fff;
    font-size:1.1em;}


/*************************************/
/* Logos */
/*************************************/

ul.logos {
    padding-left:0;
    list-style-type:none;}

ul.logos-partenaires {
    margin-left:-1.5em;
    margin-top:2.5em;
    display:flex;
    flex-wrap: wrap;
    justify-content:flex-start;
    align-items: center;
}

ul.logos-partenaires li {
    margin:1em 1.5em;
    flex-basis:27%;

}

ul.logos-org {
    border-top:1px dotted #2f519f;
    padding-top:1.3em;
    display:flex;
    flex-wrap: wrap;
    justify-content:space-between;
    margin-bottom:0.2rem;
}

ul.logos-org li {
    margin-bottom:0.5em;
    margin-top:0.5em;
    margin-right:2em;}

ul.logos-org li:last-of-type {margin-right:0;}

ul.logos a {border:0;}

/*************************************/
/* Alignement image */
/*************************************/

.right {float:right;
    margin-left: 1.5rem;
    margin-bottom:0.5rem;}


.left {float:left;
    margin-right: 1.5rem;
    margin-bottom:0.5rem;}

/*************************************/
/* Alertes */
/*************************************/

.alerte {
    border:1px solid #E17924;
    padding:0rem 1rem 0rem 4.3rem;
    background:#f9f4d4 url(../images/note.svg) 1rem 1.2rem no-repeat;
    background-size: 2.2em 2.2em;}

/*************************************/
/* RESP */
/*************************************/

@media screen and (max-width: 1250px) {
    #content, 
    #main-menu {
        padding-left:1.2em;
        padding-right:1.2em;
    }

    #site-header {
        padding-left:1.2em;
    }

    #content.main-page {display:block;}

    #complement-landingpage {display:block;}

    .cp-flex {display:block; width:100% !important;}
}

@media screen and (max-width:1200px) {
    #desc-landingpage {padding-left:0;}

}

@media screen and (max-width:1040px) {

    .main-menu-wrapper {padding-top:1.2em;
        padding-bottom:1.2em;
    }

    #main-menu #menu-list {
        display:none;
        padding-top:1em;
    }

    #main-menu #menu-list.ouvert,
    .no-js #main-menu #menu-list {
        text-align:left;
        display:flex;
        flex-direction: column;
        justify-content: center;
    }

    .no-js #main-menu #menu-list {padding-top:0;}

    #main-menu a.focus-visible:focus {
        background-color:#fff;}

    .navbar-toggle {
        display:block;
        padding:1em 3.7em 1em 1.3em;
        border-radius:3px;
        text-transform: uppercase;
        border:0;
        background:transparent;
        color:#fff;
        font-size:1em;
        text-align:left;
        background: #2f519f url(../images/fbas-menu-hv.svg) 5.2em center no-repeat;
        background-size:1.4em auto;}

    .no-js .navbar-toggle {display:none;}

    .navbar-toggle.fermerMenu:active,
    .navbar-toggle.fermerMenu:focus,
    .navbar-toggle:hover, 
    .navbar-toggle.fermerMenu:hover {
        background-color:#47484b !important; 
        border:0;
    }

    .navbar-toggle:active,
    .navbar-toggle:focus {  background-color:#2f519f; 
        border:0;
    }

    .navbar-toggle.fermerMenu {
        background: #2f519f url(../images/fhaut-menu-hv.svg) 5.2em center no-repeat;
        background-size:1.4em auto;
    }

    #main-menu ul {display:block; 
        margin:0;
        padding:0; 
        position:relative;
        flex-wrap: nowrap;
    }
    #main-menu ul li {
        display:block;
        margin:0;
        border-top:1px solid #ccc;
        padding-top:0.5em;
        padding-bottom:0.5em;}

    #main-menu ul li:first-of-type {
        border-top:0;}

    #main-menu ul li a {
        position:relative;
        text-align:left;
        padding-left:1.2em;
        padding-top:0;
        padding-bottom:0;
        display:inline-block;
        border:0;

    }

    #main-menu ul li a:hover,
    #main-menu ul li a:focus,
    #main-menu ul li a:active,
    #main-menu ul li.current_page_item a {
        border-bottom:0;
        padding-top:0;
        padding-bottom:0;
        padding-left:1.2em;

    }

    #main-menu ul li a:hover:before,
    #main-menu ul li a:focus:before,
    #main-menu ul li a:active:before,
    #main-menu ul li.current_page_item a:before {
        content:"";
        width: 7px;
        height:7px;
        border: 2px solid #2f519f;
        border-radius:2px;
        background-color:#2f519f;
        top: 30%;
        left:0;
        position: absolute;
    }
}

@media screen and (max-width: 975px) {

    #content {display:block;}

    #content.main-page {background:none;
        padding-left:1.2em;}

    #subnav {float:none; /* pour de plus vieux navigateurs */}

    #subnav nav {margin-left:0;
        margin-bottom:2em;
        position: static;
    }

    ul.logos-org > *:not(:last-child) {
        margin-right: 2rem;
    }
}


@media screen and (max-width: 830px) {

    ul.logos-partenaires li {
        margin:1em 1.5em;
        flex-basis: 40%;
    }
}


@media screen and (max-width: 600px) {
    .left, .right {float:none; display:block; margin:1.5rem auto;}
}

@media screen and (max-width: 400px) {
    .coll .ligne1 {font-size:1.9rem} 
    .coll .ligne2 {font-size:2.2rem;}
    #subnav {width:100%;}
    #site-header {min-height:auto;}
}


@media screen and (max-width: 550px) {

    ul.logos-partenaires li {
        text-align:center;
        margin:1em 1.5em;
        flex-basis: 100%;
    }
}