@font-face {
    font-family: 'Sabon';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/Sabon.woff') format('woff');
}
@font-face {
    font-family: 'Sabon';
    font-style: italic;
    font-weight: 400;
    src: url('fonts/SabonItalic.woff') format('woff');
}
@font-face {
    font-family: 'Sabon';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/SabonBold.woff') format('woff');
}
@font-face {
    font-family: 'Sabon';
    font-style: italic;
    font-weight: 700;
    src: url('fonts/SabonBoldItalic.woff') format('woff');
}


@media all and (max-width: 800px)  {
    h1 { font-size: 1.2rem !important;}
    h2 { font-size: 2.5em !important;}
    h3 { font-size: 1.5em !important;}
    main {
	  width:100vw;
	  margin-left:10px;
	  margin-right:10px;
	 }
    header{width:100vw !important;
	   height:12vh !important;}
    #cover{
	margin-top:0 !important;
	padding-top:0 !important}
    .btn-programme{
	margin-top:0px !important;
        background-color:rgb(249,249,249) !important;
	border-color: rgb(249,249,249) !important;
    }
    .btn-programme a{
	color:#194973!important;
    }
    section{
	scroll-margin-top: 10vh;
	padding-left:5px !important;
	padding-right:5px !important}
    img.aside{
	display:none;
	
    }
    #ribbon{ 
	position: absolute !important;
        top: 40px !important;
	font-size: 0.8em !important; 
	padding: 0px !important;
	right: -10px;!important}
}

.nom{
    font-variant: small-caps;
}

.signature{
    text-align: right;
}

.new:after{
          content: "\002217  "; 
     color:#ffd400 !important 

}
h1 {
    font-family: 'Sabon', sans-serif;
    font-weight: 400;
    font-size: 3rem;
    font-style: normal;
    padding:0px;
    margin:0px;
    background-color:#194973;
}


header {
    background-color:#194973;
    color:white;
    position:fixed;
    top:0px;
    width:100%;
    left: 0px;
    text-align: center;
    /* line-height: 1; */
    z-index: 100;
}

.edito{
    margin:auto;
    font-size:1.2em;

}
.edito{
    max-width: 35em;
}



.aside{
    margin:auto;
    margin-left:3em;
    /*float:right; */
    width:21em;}


h4{
    clear:right;
margin-bottom:0.2em}

.wrap2col{
    display: flex;
}

section nav.up a{
    display:block;
    position:absolute;
    right:0;
}

h3{
    margin-top: 3em;
        color:#194973;

}

.accroche{
    color:#194973;
}




#nav-education{
    display:flex;
    justify-content: space-evenly;
}

nav.up{
clear:both}

nav.up a
{
    border: none;
    border-radius: 0;
    padding: 0;
    text-decoration: none;
    background: none;
    color:#194973!important;
}

#membres, #reunions{
    display:flex;
    list-style-type:none;
    width:100%;
    flex-wrap: wrap;
    margin: 0px;
    padding:0px;
    justify-content:space-evenly;
}

#reunions, #membres{
    margin-top:0.5em;}

#reunions li {background-color:#194973!important;
	      text-align:center;
	      margin: 0.5em;
	      border-radius: 20px 20px;
	      padding:0.5em}


#reunions span, #reunions time{
    display:block;
    font-size:1.5em;
    color:white
}
#reunions time  {
    color: #ffd400
}

#membres .age{
    display:block;
font-size:1rem}

#membres .activite{
    display:block;
font-size:1rem}
 
#membres li{
    font-size: 1.3rem;
    flex-basis:20%;
    text-align:center;
    margin-bottom: 1em;
}

#membres li img{
    width: 128px;
    display:block;
    margin:auto;
}

/* #social{ */
/*     position:absolute; */
/*     right:1em;} */

#social{
    flush: right;
    align-content: flex-end
    vertical-align: middle;
    text-align: right;
    justify-content: center;
    bottom:1em;
} 


#social img{
    width:2em;
    height:2em;
}

h2{
    font-weight:400;
    font-size:4em;
    color:#194973;
    margin-bottom:0.5em;
    margin-top:0.5em;
    scroll-margin-top: 22vh; 
}

dt,ul {margin-top:0.5em;}

h3{
    font-weight:400;
    font-size:1.5em;
    margin-bottom:0;
    margin-top:1em;}

/* #cover_placeholder */
/* { */
/*     min-height:90vh; */
/*     padding-top:8vh; */
/*     margin-top: 0px; */
/*     padding-left:2em; */
/*     padding-right: 2em; */
/* } */

/* #cover{ */
/*     background-image: url("images/sylvie_transparant.png"), url("background.jpg"); */
/*     background-repeat: no-repeat; */
/*     background-attachment: fixed, scroll; */
/*     background-size: 20% auto, 200% auto; */
/*     background-position: 33% 80%, center top; */
/*     padding-top:8vh; */
/*     margin-top: 0px; */
/*     padding-left:2em; */
/*     padding-right: 2em; */
/*     padding-bottom: 0.3em; */
/* } */

#cover{
    background-image: url("images/sylvie_transparant.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: auto 35%;
    background-position: 45% bottom;
    padding-top:8vh;
    margin-top: 0px;
    padding-left:2em;
    padding-right: 2em;
    padding-bottom: 0.3em;
    min-height:100vh;
}

#cover-education{
    padding-top:8vh;
    margin-top: 0px;
    padding-left:2em;
    padding-right: 2em;
    padding-bottom: 0.3em;
    min-height:100vh;
}


nav:first {
    margin-top:2em;
}


.handshake{
    height:0.7em;}

.partenariat .handshake{
    height:1em;}

body{
    background-image: url("background.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: auto 90vh;
    background-position: center bottom;
    background-color: #194973

}

main{
    position: absolute;
    left:0;
    right:0;
    top:13vh;
    max-width:70rem;
    font-family: 'Sabon', sans-serif;
    margin: auto;
}

nav{
    margin-bottom:2em;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(33vh, 1fr)); 
}

#annexes{
    grid-template-columns: repeat(auto-fit, minmax(20vh, 1fr)); 
}


.noms {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));    
}
.noms li span {font-variant:small-caps}
.noms li{
    color: white;
    font-size: 1.5em;
    border: 3px solid #194973;
    border-radius: 10px;
    background-color:#194973;
        transition: 0.3s;
    vertical-align: text-top;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.noms li.new{
    border: 3px solid #194973;
    background-color:#194973;
   
}

.summary{font-size:2em}

.bouton{
    color:white;
    font-size: 2em;
    border: 8px solid #194973;
    border-radius: 10px;
    background-color:#194973;
    transition: 0.3s;
    vertical-align: text-top;
    /* display: flex; */
    justify-content: flex-end;
    align-items: center;
    text-align: center;
}

.btn-focus{
    border: 8px solid #ffd400;
    background-color: #ffd400 !important;
    color:#194973 !important;
}

.btn-soutiens{
    background-color:rgb(249,249,249)   !important;
    border: 8px solid rgb(249,249,249)  !important;
    color:#194973 !important;
}

.bouton a, .bouton a:visited{
    color:white;
    text-decoration: none ;
    vertical-align: middle;
    text-align: center;
    justify-content: center;
    
}

.btn-soutiens a, .btn-focus a, .btn-focus a:visited {
      color:#194973 !important;
}

section .bouton span{
    font-size: 1rem;
}

#annexes .bouton{
    background-color:#666f38 ;
    border: 8px solid #666f38 ;
    font-size: 1.6em;
}


.bouton:hover{
    background-color:#66A3D9;
    border-color:#66A3D9;
    color:black;
}

.btn-focus:hover{    
    border: 8px solid #ffe250 !important;
    background-color: #ffe250 !important;
    color:black;
}

section a{
    color: #194973;
}


section a:visited{
    color: #36066d;
    }

#annexes .bouton:hover{
    background-color:#8ab165ff ;
    border: 8px solid #8ab165ff ;
}


.bouton:hover a{
    color:black;
}

#annexes{
    margin-top:32vh;}

.btn-programme{
    margin-top:3em;
}

#programme{
    margin-top:0px;
}

#principal .bouton a {
    font-size:2.5rem;
    color:#ffd400 ;
    vertical-align: text-top;
    text-align: center;
    justify-content: center;
}

sup{
    font-size:0.7em
}

#principal .bouton a:hover{
color:#3e3731 !important }

section{
    margin-top: 11vh;
    scroll-margin-top: 22vh; 
    padding-top: 0.1em;
    background-color:rgb(249,249,249);
    color:black;
    padding-left:2em;
    padding-right:2em;
    font-family: 'Sabon', sans-serif;
    border: 8px solid rgb(249,249,249) ;
    border-radius: 20px;
}

/* h3::before { */
/*     content: "\002217  "; */
/*     color:#ffd400 !important */
/* } */

main footer {
    margin-top: 10em;
    margin-bottom: 0px;	
    color:white;
    background-color:#194973;
    border-radius:  20px 20px 0px  0px;
    padding-left:2em;
    padding-right:2em;
    padding-bottom: 0.5em;
    text-align: center;
}

main footer span{
    color:whitew !important;
}

main footer a{
    color:white !important;
}

.photos{
    margin-top:0.5em;
    display:block;
    width:45%;
    float:right;
    text-align: right;
    margin-left:1em;
}

.logos{
    display:block;
    width:10%;
    float:right;
    text-align: right;
    margin-left:1em;
}


.photos img, .logos img{width:100%;
	    margin-bottom:0.5em;}

.partenariat{color:#555; font-size:0.9em}

dt:before {
    content:"\1F5CE  "
}


#engagements ul{
    display:flex;
    list-style-type:none;
    width:100%;
    flex-wrap: wrap;
    margin: 0px;
    padding:0px;
    justify-content:space-evenly;
    /* list-style-image: url('engagements/checkmark.svg'); */
}

#engagements ul li {
    margin: 0.5em;
    flex-basis:25em;
    padding:0.5em;}

#engagements strong{
    font-size: 1.1em;
    color: #194973;
    display: block;
}

#slogan{
    font-size:1.5em;
    text-align: center;
    color: rgb(249,249,249);
    background-color: #194973;
        border: 8px solid #194973;
	border-radius: 10px;
	margin-top: 1em;
	margin-bottom: 1em;
}

#attractivite section aside.jaune{
            color: #29785a ;
    background-color: #fab60a;
        border-color: #fab60a;
}

#attractivite section aside.blanc{
            color:#d56c00 ;
    background-color: white;
        border-color: white;
}


#attractivite section aside.vert{
            color:white;
    background-color:#40bd8e;
        border-color:#40bd8e;
}

#attractivite section aside.bleu{
            color:white;
    background-color:#126ab4;
        border-color:#126ab4;
}



#attractivite section aside{
    width:33%;
    text-align: center;
    border-width: 12px;
    border-radius: 10px 10px 10px 10px;
    font-size:1.2em;
    font-weight: bold;
}

#attractivite section h3{
    margin-top:0px;
}

#attractivite section h2{
    margin-bottom:0.1em;
}


#slogan1, #slogan2{
    color:white;
    font-size:2em;}

#slogan1{
    margin-top:2em;
    width:60%;
    text-align:start;
    }
#slogan2{
    margin-left:40%;
    width:60%;
    text-align:end;
}

.soutien{
    font-size:1.5em;
    color: #194973;
    font-weight:bold;}

#attractivite #cover{
    background-image: none;
    margin-bottom:0px;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: auto;
    background-position: 50% bottom;
    padding-top:8vh;
}

#attractivite .accroche{
    font-size:1.5em;}

#slogan span{
    color:#ffd400 }

#engagements ul li::before{
    content: ' ';
    margin-top:1em;
    margin-right: 1em;
    width: 3em;
    height: 6em;
    display: block;
    float:left;
    background-repeat: no-repeat;
    background-size: 100% 50%;
    background-image: url("engagements/checkmark.svg");
}

#ribbon{
    position: fixed;
    background: #ffd400 ;
    color: #194973 ;
    box-shadow: rgba(0,0,0,0.2) 0px 2px 3px, inset rgba(0,0,0,0.2) 0px -1px 2px;
    transform: rotate(45deg);
    text-align: center;
    top: 70px;
    right: -100px;
    width: 400px;
    padding:10px;
    z-index: 101;
}

#ribbon2 div{
    
    justify-content:center;
    align-items:center}

header{
    display:flex;
    gap:2em;
    justify-content: center;
    align-items: center;
    background-color: #194973 ;

}



#ribbon2{
    display: grid;
    font-size: 1rem;
    align-items: center;
    background: #ffd400 ;
    color: #194973 ;
    box-shadow: rgba(0,0,0,0.2) 0px 2px 3px, inset rgba(0,0,0,0.2) 0px -1px 2px;
    text-align: center;
    justify-content: center;
    align-items:center
    z-index: 101;
    border-radius: 20em;
    width: 9em;
    height:9em;
    background-color: #ffd400;
    padding:0.5em;
}

.agir{
    color:#ffd400;
    font-size:2em;}

@media all and (max-width: 800px)  {
    #ribbon2{font-size:0.6rem;
	     padding:0em;
	     aspect-ratio: 1 / 1;}
    header{
	gap:1em;
    }
    h1{text-align:left;
       font-size:0.8.em}
    .agir{font-size:1.5em}
}

.portrait{
    display:flex;
    margin:1em;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items:center;
    align-content: center;
}

.portrait img{
    width:8rem;
    clear:both;
    margin-bottom: 0.5em;
}

.portrait{
    font-size:1.2em;
    color: #194973;
    font-weight:bold;}


#colistiers section .portrait img{
    width:12rem;
}


.soutien{
    font-size:1em;
    color: #194973;
    font-weight:bold;}


#soutiens .wrap{
    margin:auto;
    max-width:40em;}

.clear{
    clear:both;
    display: block;
}



.portrait{
    float:left}

#colistiers .nom {display:inline-block}
#colistiers {margin-top:10vh}
#colistiers section p{
}

#colistiers .portrait{
    width:40%}

#colistiers h2{
    font-size: 3rem;
    margin-bottom:0;}

#colistiers h3{
    font-size:1.5rem;
    margin-top:0rem;
}


#colistiers p{
width:60%}

#colistiers section{
    display:flex;
    justify-content: space-between;
    max-width:40em;
    margin:auto;
    margin-bottom: 1em;;
}

#colistiers .age{
    font-size: 1rem;
    display:block;
    font-weight: normal;
}

#colistiers .activite {
    color:black;
    font-weight:normal;
    font-size:1rem}