/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Barlow');

/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.26, autoprefixer: v9.7.3) */




/* MAINTENANCE *****************************************************************************************************************************/

#maintenance { margin-top: 50vh; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); text-align: center; }
#maintenance .typo1 { font-size: 2em; color: #b5151d; }
#maintenance .typo2 { font-size: 1em; color: #707070; }



/* GENERAL *********************************************************************************************************************************/

html{ overflow-x:hidden; }
body { background-color: #fff; width: 100%; margin: 0; padding: 0; font-family: Barlow, Roboto, sans-serif; font-weight: normal; font-style: normal; font-size: 1.2rem; color: #000; line-height:1.6rem; }
b,
strong { font-weight: bold; }
p { padding: 0; margin: 0 0 0.5rem 0; }
hr { border-top: 1px solid #000; width: 100%; margin: 0; }

/* liens */
a.lien,
a.lien:visited { color: #3194ef; text-decoration: none; }
a.lien:hover { text-decoration: underline; }

/* typos */
.TitreGeneral { display: block; font-size: 2rem; font-weight: bold; font-style: none; line-height: 3rem; color: #000000; margin: 0 0 2rem 0; }
.TitreGeneral2 { display: block; font-size: 2rem; font-weight: bold; font-style: none; line-height: 3rem; color: #000000; margin: 0; }
.typo8 { font-size: 1rem; font-weight: normal; color: #000; }	
.typo12 { font-size: 1rem; font-weight: normal; color: #000; margin-bottom: 3rem; }
.rouge { color: #f00; font-weight: bold; }

/* séparations */
.separation { clear: both; width: 100%; position: relative; margin: 0 auto 3rem; text-align: center; border-top: 1px solid #ccc; top: 1rem; }
.TitreSeparation { font-size: 1.5rem; line-height: 1.5rem; font-weight: bold; color: #213152; background-color: #fff; position: relative; top: -0.75rem; display: inline; margin: 4rem 0; padding: 0 1rem; }
.separation2 { clear: both; width: 100%; position: relative; margin: 2rem auto; text-align: center; border-top: 1px solid #ccc; top: 1rem; }
.TitreSeparation2 { font-size: 1.5rem; font-weight: bold; color: #213152; background-color: #f0f0f0; display: inline; margin: 4rem 0; padding: 0 1rem; }



/* MENUS ***********************************************************************************************************************************/

/* menu nav classique */
#MenuPC { width: 100%; min-height: 3rem; line-height: 3rem; vertical-align: middle; text-align: center; padding: 0.5rem 0rem; background-color: #f0f0f0; margin: 0 0 2rem 0; }
#MenuPC a { display: inline-block; padding: 0.75rem 1rem; margin: 0 0.25rem; line-height: 1.3rem; font-size: 1.2rem; color: #213152; font-weight: bold; text-decoration: none; border-radius: 0.5rem; }
#MenuPC a.active { background-color: #213152; color: #fff; }
#MenuPC a.inactive { background-color: #f7de21; }
#MenuPC a:hover { background: #213152; color: #f7de21; text-decoration: none; }
#MenuPC a:visited { text-decoration: none; }

/* menu nav hamburger */
#MenuMobile a { background-color: #fff; text-decoration: none; color: #213152; -webkit-transition: color 0.3s ease; -o-transition: color 0.3s ease; transition: color 0.3s ease; }
#MenuMobile a:hover { color: #f7de21; }
#menuToggle { display: block; position: absolute; top: 2rem; left: 2rem; z-index: 5; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
#menuToggle input { display: block; width: 40px; height: 32px; position: absolute; top: -3%; left: -5px; cursor: pointer; opacity: 0; z-index: 2; }
#menuToggle span { display: block; width: 33px; height: 4px; margin-bottom: 5px; position: relative; background: #213152; border-radius: 3px; z-index: 1; -webkit-transform-origin: 4px 0px; -ms-transform-origin: 4px 0px; transform-origin: 4px 0px; transition: background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease, -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0); -webkit-transition: background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease, -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0); -o-transition: background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease, -o-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0); -o-transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease; transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease; transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease, -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0); }
#menuToggle span:first-child { -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; transform-origin: 0% 0%; }
#menuToggle span:nth-last-child(2) { -webkit-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; transform-origin: 0% 100%; }
#menuToggle input:checked ~ span { opacity: 1; -webkit-transform: rotate(45deg) translate(-2px, -1px); -ms-transform: rotate(45deg) translate(-2px, -1px); transform: rotate(45deg) translate(-2px, -1px); background: #213152; }
#menuToggle input:checked ~ span:nth-last-child(3) { opacity: 0; -webkit-transform: rotate(0deg) scale(0.2, 0.2); -ms-transform: rotate(0deg) scale(0.2, 0.2); transform: rotate(0deg) scale(0.2, 0.2); }
#menuToggle input:checked ~ span:nth-last-child(2) { -webkit-transform: rotate(-45deg) translate(0, -1px); -ms-transform: rotate(-45deg) translate(0, -1px); transform: rotate(-45deg) translate(0, -1px); }
#menu { position: absolute; width: 250px; margin: -100px 0 0 -50px; padding: 50px; padding-top: 125px; background: #ccc; list-style-type: none; -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); transform: translate(-100%, 0); -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0); transition: -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0); -o-transition: -o-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0); -o-transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0); transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0); transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0); }
#menu li { padding: 10px 0; font-size: 1.1em; line-height: 1.3em; }
#menuToggle input:checked ~ ul { -webkit-transform: none; -ms-transform: none; transform: none; }



@media all and (min-width: 1250px) {

/* conteneur de la page (sauf header et footer) */
.main {	width: auto; margin: 0 auto; padding: 2rem 4rem; background-color: #fff; text-align: left; }

/* BOUTIQUE */

#boutique .produits { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; -webkit-box-align: top; -ms-flex-align: top; align-items: top; }
#boutique .box { width: 280px; height: auto; padding: 1rem; margin-bottom: 3rem; border: 1px #000 solid; text-align: center; margin-right: 2rem; text-wrap: balance; }
#boutique img { display: block; width: 100%; max-width: 250px; height: auto; max-height: 250px; margin-bottom: 2rem; }
#boutique .nom { font-size: 1.7rem; font-weight: bold; color: #213152; margin-bottom: 1rem; }
#boutique .description { font-size: 1rem; color: #000; margin-bottom: 1rem; }
#boutique .prix { font-size: 1.7rem; font-weight: bold; color: #f00; }
#boutique .barre { font-size: 1.2rem; text-decoration: line-through; font-weight: normal; color: #000; margin-right: 1rem; }

/* CLUB */

#localisation { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: top; -ms-flex-align: top; align-items: top; width: 100%; margin-bottom: 2rem; text-align: justify; }
#localisation .box { margin-bottom: 2rem; }
#localisation .box:nth-child(1) { width: 60%; }
#localisation .box:nth-child(2) { width: 35%; }
#localisation img { width: 100%; height: auto; margin-bottom: 1rem; }
#map { height: 450px; margin-bottom: 2rem; }
#club .stand { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: top; -ms-flex-align: top; align-items: top; width: 100%; margin-bottom: 2rem; text-align: justify; }
#club .box { width: 30%; margin-bottom: 2rem; }
#club img { width: 100%; height: auto; margin-bottom: 1rem; }
#reglement .TitreArticle { font-size: 1.3rem; font-weight: bold; color: #f7de21; margin: 1.5rem 0; }
#reglement p { margin: 0 0 1rem 0; }

/* COMPETITIONS */

#competitions .calendrier { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: top; -ms-flex-align: top; align-items: top; width: 100%; height: auto; text-align: left; }
#competitions .box { width: 30%; height: auto; margin: 0 0 2rem; }
#competitions .mois { width: 100%; border-radius: 0.5rem; background-color: #213152; color: #fff; font-weight: bold; text-align: center; font-size: 1.1rem; padding: 0.25rem 1rem; margin-bottom: 2px; }
#competitions .epreuve { width: 100%; border: 1px solid #213152; border-radius: 0.5rem; background-color: #fff; color: #000; text-align: left; font-size: 0.9rem; wrap: nowrap; padding: 0.25rem 1rem; margin-bottom: 2px; }
#competitions .stand10 { background-color: #00D64C; font-size: 0.8rem; color: #000; padding: 0 0.5rem; }
#competitions .stand25 { background-color: #81ABFF; font-size: 0.8rem; color: #000; padding: 0 0.5rem; }
#competitions .stand50 { background-color: #FFCB17; font-size: 0.8rem; color: #000; padding: 0 0.5rem; }
#competitions .stand200 { background-color: #FF7373; font-size: 0.8rem; color: #000; padding: 0 0.5rem; }

/* DEMARCHES */

#demarches .faq { margin-bottom: 5rem; }
#demarches .titre { font-size: 1.7rem; line-height: 1.7rem; font-weight: bold; color: #213152; }
#demarches hr { width: 100%; height: 1px; margin: 0.5rem 0; }
#demarches p.rouge { margin-bottom: 5rem; }
#demarches ul { margin: 0 0 1rem; }

/* FOOTER */

footer { clear: both; background-color: #f7de21; color: #000; width: auto; padding: 2rem 4rem; }
#footer { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 auto; }
#footer .box { width: calc(50% - 2rem); }
#footer .titre { font-size: 1.2rem; font-weight: bold; width: 100%; padding: 0 0 0.5rem 0; border-bottom: 1px solid #000; margin: 0 0 1rem 0; }
#footer .texte { font-size: 1rem; width: 100%; margin: 0 0 1rem 0; }

/* HEADER */

#banniereMob,
#MenuMobile { display: none; }
#bannierePC { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 345px; text-align: left; background-image: url('../images/banniere.png'); background-position: right; background-repeat: no-repeat; margin: 0; }
#bannierePC .banniereG { width: 270px; height: 345px; margin: 0; }
#bannierePC .banniereG img { width: 170px; height: 183px; position: absolute; top: 81px; left: 50px; margin: 0; }
#bannierePC .banniereD { width: calc(100% - 270px); height: auto; vertical-align: middle; margin: 0; color: #213152; }
#bannierePC .banniereD .titre { display: block; font-size: 3.5rem; line-height: 4.5rem; font-weight: bold; text-shadow: 3px -3px 0px #fff; margin-bottom: 2rem; }
#bannierePC .banniereD .SousTitre { font-size: 1.3rem; line-height: 1.3rem; font-weight: normal; text-shadow: 1px -1px 0px #fff; }

/* INDEX */

#index { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
#index .box { height: auto; padding: 0; margin-bottom: 3rem; }
#index .box:nth-child(1) { width: calc(60% - 2rem); text-align: justify; margin-right: 2rem; }
#index .box:nth-child(2) { width: calc(40% - 2rem); margin-left: 2rem; border: 2px solid #f7de21; border-radius: 0.5rem; }
#index .paragraphe { display: block; width: auto; min-height: 250px; margin-bottom: 3rem; }
#index img.photo1 { float: left; width: 50%; max-width: 250px; height: auto; margin: 0 2rem 0.5rem 0; }
#index img.photo2 { float: right; width: 50%; max-width: 376px; height: auto; margin: 0 0 0.5rem 2rem; }
#index img.photo3 { float: left; width: 50%; max-width: 444px; height: auto; margin: 0 2rem 0.5rem 0; }
#index .TitreParagraphe { display: block; font-size: 1.4rem; font-weight: bold; font-style: none; line-height: 1.4rem; color: #3194ef; margin-bottom: 1rem; text-align: left; }
#index ul { margin: 1rem 1rem 2rem 1rem; }
#index li { list-style-type: square; margin-left: 1rem; }
#index .fascicule { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 211px; text-align: center; }
#index .jaquette { width: 150px; height: 211px; padding: 0; margin: 0; }
#index .jaquette img { width: 150px; height: 211px; padding: 0; margin: 0; border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; }
#index .legende { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 0.9rem; width: 400px; max-width: 400px; height: 211px; background-color: #f0f0f0; padding: 0.5rem 1rem; margin: 0; border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; }
#index .legende img { padding: 0.5rem; background-color: #fff; border-radius: calc(32px + 0.5rem); }
#index .legende p { margin-bottom: 1rem; }
#index .cadre { padding-bottom: 1rem; margin: 0 2rem 1rem 2rem; border-bottom : 2px solid #f7de21; }
#index .TitreCadre { font-size: 1.2rem; text-align: center; padding: 0.5rem 1rem; margin-bottom: 1rem; background-color: #f7de21; color: #213152; margin-bottom: 1rem; font-weight: bold; font-style: none; line-height: 1.3rem; }
#index .illustration { text-align: center; font-style: italic; }
#index .illustration img { max-width: 100%; }

/* MENTIONS LEGALES */
	
#mentions .titre { font-size: 1.3rem; font-weight: bold; color: #f7de21; margin-bottom: 1.5rem; }
#mentions hr { border: 0; border-top: dashed 1px #707070; height: 1px; margin: 1.5rem 0; }

/* PERMANENCES */

#permanences .horaires { text-align: center; margin: 0 0 4rem 0; line-height: 1.5rem; }
#permanences .calendrier { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: top; -ms-flex-align: top; align-items: top; width: 100%; height: auto; text-align: left; }
#permanences .mois { width: 30%; height: auto; margin: 0 0 2rem; }
#permanences table { width: 100%; }
#permanences th { border-radius: 0.5rem; background-color: #213152; color: #fff; font-weight: bold; text-align: center; font-size: 1.1rem; padding: 0.25rem 1rem; }
#permanences td { width: auto; border: 1px solid #213152; border-radius: 0.5rem; background-color: #fff; color: #000; text-align: left; font-size: 0.9rem; wrap: nowrap; padding: 0.25rem 1rem; }
#permanences td:nth-child(1) { font-weight: bold; color: #213152; }
#permanences .carnet { font-size: 0.8rem; color: #213152; margin-bottom: 1rem; text-align: center; }
#permanences .cdt { font-size: 0.8rem; color: #213152; background-color: #f7de21; padding: 0 0.5rem; }

/* PHOTOS */

#photos .SousTitre { display: block; font-size: 1.4rem; font-weight: bold; font-style: none; line-height: 1.4rem; color: #3194ef; margin-bottom: 1rem; text-align: left; }
#photos .galerie { padding: 0; overflow: hidden; font-family: sans-serif; margin-bottom: 2rem; }
#photos .diapo { display: inline-block; margin: 0 1rem 0.5rem 0; max-width: 350px; max-height: 250px; text-align: center; }
#photos .diapo img { max-width: 350px; max-height: 250px; padding: 0; border: 0; }
#photos .CreditPhoto { font-size: 0.7rem; color:#808080; }

}



@media all and (min-width: 769px) and (max-width: 1249px) {

/* conteneur de la page (sauf header et footer) */
.main {	width: auto; margin: 0 auto; padding: 1rem 2rem; background-color: #fff; text-align: left; font-size: 1rem; line-height: 1.5rem; }
#MenuPC a { font-size: 1rem; }

/* BOUTIQUE */

#boutique .produits { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; -webkit-box-align: top; -ms-flex-align: top; align-items: top; }
#boutique .box { width: 280px; height: auto; padding: 1rem; margin-bottom: 3rem; border: 1px #000 solid; text-align: center; margin-right: 2rem; text-wrap: balance; }
#boutique img { display: block; width: 100%; max-width: 250px; height: auto; max-height: 250px; margin-bottom: 2rem; }
#boutique .nom { font-size: 1.7rem; font-weight: bold; color: #213152; margin-bottom: 1rem; }
#boutique .description { font-size: 1rem; color: #000; margin-bottom: 1rem; }
#boutique .prix { font-size: 1.7rem; font-weight: bold; color: #f00; }
#boutique .barre { font-size: 1.2rem; text-decoration: line-through; font-weight: normal; color: #000; margin-right: 1rem; }

/* CLUB */

#localisation { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; margin-bottom: 2rem; text-align: justify; }
#localisation .box { margin-bottom: 2rem; }
#localisation .box:nth-child(1) { width: 100%; }
#localisation .box:nth-child(2) { width: 100%; }
#localisation img { display: inline-block; float: left; width: calc(50% - 1rem); height: auto; margin: 0 2rem 2rem 0; }
#localisation img:nth-child(2) { margin: 0 0 2rem 0; }
#map { height: 450px; margin-bottom: 2rem; }
#club .stand { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: top; -ms-flex-align: top; align-items: top; width: 100%; margin-bottom: 2rem; text-align: justify; }
#club .box { width: 30%; margin-bottom: 2rem; }
#club img { width: 100%; height: auto; margin-bottom: 1rem; }
#reglement .TitreArticle { font-size: 1.3rem; font-weight: bold; color: #f7de21; margin: 1.5rem 0; }
#reglement p { margin: 0 0 1rem 0; }

/* COMPETITIONS */

#competitions .calendrier { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: top; -ms-flex-align: top; align-items: top; width: 100%; height: auto; text-align: left; }
#competitions .box { width: 30%; height: auto; margin: 0 0 2rem; }
#competitions .mois { width: 100%; border-radius: 0.5rem; background-color: #213152; color: #fff; font-weight: bold; text-align: center; font-size: 1.1rem; padding: 0.25rem 1rem; margin-bottom: 2px; }
#competitions .epreuve { width: 100%; border: 1px solid #213152; border-radius: 0.5rem; background-color: #fff; color: #000; text-align: left; font-size: 0.9rem; wrap: nowrap; padding: 0.25rem 1rem; margin-bottom: 2px; }
#competitions .stand10 { background-color: #00D64C; font-size: 0.8rem; color: #000; padding: 0 0.5rem; }
#competitions .stand25 { background-color: #81ABFF; font-size: 0.8rem; color: #000; padding: 0 0.5rem; }
#competitions .stand50 { background-color: #FFCB17; font-size: 0.8rem; color: #000; padding: 0 0.5rem; }
#competitions .stand200 { background-color: #FF7373; font-size: 0.8rem; color: #000; padding: 0 0.5rem; }
	
/* DEMARCHES */

#demarches .faq { margin-bottom: 5rem; }
#demarches .titre { font-size: 1.7rem; line-height: 1.7rem; font-weight: bold; color: #213152; }
#demarches hr { width: 100%; height: 1px; margin: 0.5rem 0; }
#demarches p.rouge { margin-bottom: 5rem; }
#demarches ul { margin: 0 0 1rem; }

/* FOOTER */

footer { clear: both; background-color: #f7de21; color: #000; width: auto; padding: 1rem 2rem; }
#footer { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 auto; }
#footer .box { width: calc(50% - 2rem); }
#footer .titre { font-size: 1.2rem; font-weight: bold; width: 100%; padding: 0 0 0.5rem 0; border-bottom: 1px solid #000; margin: 0 0 1rem 0; }
#footer .texte { font-size: 1rem; width: 100%; margin: 0 0 1rem 0; }

/* HEADER */

#banniereMob,
#MenuMobile { display: none; }
#bannierePC { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 345px; text-align: left; background-image: url('../images/banniere.png'); background-position: top 0 left -765px; background-repeat: no-repeat; margin: 0; }
#bannierePC .banniereG { width: 270px; height: 345px; margin: 0; }
#bannierePC .banniereG img { width: 170px; height: 183px; position: absolute; top: 81px; left: 50px; margin: 0; }
#bannierePC .banniereD { width: calc(100% - 270px); height: auto; vertical-align: middle; margin: 0; color: #213152; }
#bannierePC .banniereD .titre { display: block; font-size: 3.5rem; line-height: 4.5rem; font-weight: bold; text-shadow: 3px -3px 0px #fff; margin-bottom: 2rem; }
#bannierePC .banniereD .SousTitre { font-size: 1.3rem; line-height: 1.3rem; font-weight: normal; text-shadow: 1px -1px 0px #fff; }

/* INDEX */

#index { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
#index .box { height: auto; padding: 0; margin-bottom: 3rem; }
#index .box:nth-child(1) { width: calc(60% - 1rem); text-align: justify; margin-right: 1rem; }
#index .box:nth-child(2) { width: calc(40% - 1rem); margin-left: 1rem; border: 2px solid #f7de21; border-radius: 0.5rem; }
#index .paragraphe { display: block; width: auto; min-height: 250px; margin-bottom: 3rem; }
#index img.photo1 { float: left; width: 50%; max-width: 250px; height: auto; margin: 0 2rem 0.5rem 0; }
#index img.photo2 { float: right; width: 50%; max-width: 376px; height: auto; margin: 0 0 0.5rem 2rem; }
#index img.photo3 { float: left; width: 50%; max-width: 444px; height: auto; margin: 0 2rem 0.5rem 0; }
#index .TitreParagraphe { display: block; font-size: 1.4rem; font-weight: bold; font-style: none; line-height: 1.4rem; color: #3194ef; margin-bottom: 1rem; text-align: left; }
#index ul { margin: 1rem 1rem 2rem 1rem; }
#index li { list-style-type: square; margin-left: 1rem; }
#index .fascicule { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 211px; text-align: center; }
#index .jaquette { width: 150px; height: 211px; padding: 0; margin: 0; }
#index .jaquette img { width: 150px; height: 211px; padding: 0; margin: 0; border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; }
#index .legende { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 0.9rem; width: 400px; max-width: 400px; height: 211px; background-color: #f0f0f0; padding: 0.5rem 1rem; margin: 0; border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; }
#index .legende img { display: none; }
#index .legende p { margin: 0; }
#index .cadre { padding-bottom: 1rem; margin: 0 2rem 1rem 2rem; border-bottom : 2px solid #f7de21; }
#index .TitreCadre { font-size: 1.2rem; text-align: center; padding: 0.5rem 1rem; margin-bottom: 1rem; background-color: #f7de21; color: #213152; margin-bottom: 1rem; font-weight: bold; font-style: none; line-height: 1.3rem; }
#index .illustration { text-align: center; font-style: italic; }
#index .illustration img { max-width: 100%; }

/* MENTIONS LEGALES */
	
#mentions .titre { font-size: 1.3rem; font-weight: bold; color: #f7de21; margin-bottom: 1.5rem; }
#mentions hr { border: 0; border-top: dashed 1px #707070; height: 1px; margin: 1.5rem 0; }

/* PERMANENCES */

#permanences .horaires { text-align: center; margin: 0 0 4rem 0; line-height: 1.5rem; }
#permanences .calendrier { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: top; -ms-flex-align: top; align-items: top; width: 100%; height: auto; text-align: left; }
#permanences .mois { width: 30%; height: auto; margin: 0 0 2rem; }
#permanences table { width: 100%; }
#permanences th { border-radius: 0.5rem; background-color: #213152; color: #fff; font-weight: bold; text-align: center; font-size: 1.1rem; padding: 0.25rem 1rem; }
#permanences td { width: auto; border: 1px solid #213152; border-radius: 0.5rem; background-color: #fff; color: #000; text-align: left; font-size: 0.9rem; wrap: nowrap; padding: 0.25rem 1rem; }
#permanences td:nth-child(1) { font-weight: bold; color: #213152; }
#permanences .carnet { font-size: 0.8rem; color: #213152; margin-bottom: 1rem; text-align: center; }
#permanences .cdt { font-size: 0.8rem; color: #213152; background-color: #f7de21; padding: 0 0.5rem; }

/* PHOTOS */

#photos .SousTitre { display: block; font-size: 1.4rem; font-weight: bold; font-style: none; line-height: 1.4rem; color: #3194ef; margin-bottom: 1rem; text-align: left; }
#photos .galerie { padding: 0; overflow: hidden; font-family: sans-serif; margin-bottom: 2rem; }
#photos .diapo { display: inline-block; margin: 0 1rem 0.5rem 0; max-width: 350px; max-height: 250px; text-align: center; }
#photos .diapo img { max-width: 350px; max-height: 250px; padding: 0; border: 0; }
#photos .CreditPhoto { font-size: 0.7rem; color:#808080; }

}



@media all and (min-width: 481px) and (max-width: 768px) {

/* conteneur de la page (sauf header et footer) */
.main {	width: auto; margin: 0 auto; padding: 2rem 2rem; background-color: #fff; text-align: left; font-size: 1rem; line-height: 1.5rem; }

/* BOUTIQUE */

#boutique .produits { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; -webkit-box-align: top; -ms-flex-align: top; align-items: top; }
#boutique .box { width: 280px; height: auto; padding: 1rem; margin-bottom: 3rem; border: 1px #000 solid; text-align: center; margin-right: 2rem; text-wrap: balance; }
#boutique img { display: block; width: 100%; max-width: 250px; height: auto; max-height: 250px; margin-bottom: 2rem; }
#boutique .nom { font-size: 1.7rem; font-weight: bold; color: #213152; margin-bottom: 1rem; }
#boutique .description { font-size: 1rem; color: #000; margin-bottom: 1rem; }
#boutique .prix { font-size: 1.7rem; font-weight: bold; color: #f00; }
#boutique .barre { font-size: 1.2rem; text-decoration: line-through; font-weight: normal; color: #000; margin-right: 1rem; }

/* CLUB */

#localisation { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; margin-bottom: 2rem; text-align: justify; }
#localisation .box { margin-bottom: 2rem; }
#localisation .box:nth-child(1) { width: 100%; }
#localisation .box:nth-child(2) { width: 100%; }
#localisation img { float: left; width: 50%; height: auto; margin: 0 2rem 0.5rem 0; }
#localisation p { margin-bottom: 2rem; }
#map { height: 450px; margin-bottom: 1rem; }
#club .stand { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: top; -ms-flex-align: top; align-items: top; width: 100%; margin-bottom: 2rem; text-align: justify; }
#club .box { width: 100%; margin-bottom: 2rem; }
#club img { float: left; width: 50%; height: auto; margin: 0 2rem 0.5rem 0; }
#reglement .TitreArticle { font-size: 1.3rem; font-weight: bold; color: #f7de21; margin: 1.5rem 0; }
#reglement p { margin: 0 0 1rem 0; }

/* COMPETITIONS */

#competitions .calendrier { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: top; -ms-flex-align: top; align-items: top; width: 100%; height: auto; text-align: left; }
#competitions .box { width: 100%; height: auto; margin: 0 0 2rem; }
#competitions .mois { width: 100%; border-radius: 0.5rem; background-color: #213152; color: #fff; font-weight: bold; text-align: center; font-size: 1.1rem; padding: 0.25rem 1rem; margin-bottom: 2px; }
#competitions .epreuve { width: 100%; border: 1px solid #213152; border-radius: 0.5rem; background-color: #fff; color: #000; text-align: left; font-size: 0.9rem; wrap: nowrap; padding: 0.25rem 1rem; margin-bottom: 2px; }
#competitions .stand10 { background-color: #00D64C; font-size: 0.8rem; color: #000; padding: 0 0.5rem; }
#competitions .stand25 { background-color: #81ABFF; font-size: 0.8rem; color: #000; padding: 0 0.5rem; }
#competitions .stand50 { background-color: #FFCB17; font-size: 0.8rem; color: #000; padding: 0 0.5rem; }
#competitions .stand200 { background-color: #FF7373; font-size: 0.8rem; color: #000; padding: 0 0.5rem; }
	
/* DEMARCHES */

#demarches .faq { margin-bottom: 5rem; }
#demarches .titre { font-size: 1.7rem; line-height: 1.7rem; font-weight: bold; color: #213152; }
#demarches hr { width: 100%; height: 1px; margin: 0.5rem 0; }
#demarches p.rouge { margin-bottom: 5rem; }
#demarches ul { margin: 0 0 1rem; }

/* FOOTER */

footer { clear: both; background-color: #f7de21; color: #000; width: auto; padding: 1rem 2rem; }
#footer { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 auto; }
#footer .box { width: calc(50% - 1rem); }
#footer .titre { font-size: 1.2rem; font-weight: bold; width: 100%; padding: 0 0 0.5rem 0; border-bottom: 1px solid #000; margin: 0 0 1rem 0; }
#footer .texte { font-size: 1rem; width: 100%; margin: 0 0 1rem 0; }

/* HEADER */

#bannierePC,
#MenuPC { display: none; }
#banniereMob { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; max-height: 172px; background-image: url('../images/fond.png'); background-repeat: repeat-x; margin: 0; }
#banniereMob .banniereG { width: 100px; height: auto; padding: 30px; }
#banniereMob .banniereC { width: calc(100% - 245px); height: auto; color: #213152; }
#banniereMob .banniereC .titre { font-size: 1.7rem; line-height: 2.2rem; text-shadow: 2px -2px 0px #fff; padding: 30px 0 1rem 0; }
#banniereMob .banniereC .SousTitre { font-size: 1rem; line-height: 1.2rem; padding-bottom: 30px; text-shadow: 1px -1px 0px #fff; }
#banniereMob .banniereD { width: 145px; height: auto; padding: 30px; }
#banniereMob .banniereD img { width: 85px; height: 91px; vertical-align: middle; }

/* INDEX */

#index { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
#index .box { height: auto; padding: 0; margin-bottom: 3rem; }
#index .box:nth-child(1) { width: 100%; text-align: justify; }
#index .box:nth-child(2) { width: 100%; border: 2px solid #f7de21; border-radius: 0.5rem; }
#index .paragraphe { display: block; width: auto; min-height: 250px; margin-bottom: 3rem; }
#index img.photo1 { float: left; width: 50%; max-width: 250px; height: auto; margin: 0 2rem 0.5rem 0; }
#index img.photo2 { float: right; width: 50%; max-width: 376px; height: auto; margin: 0 0 0.5rem 2rem; }
#index img.photo3 { float: left; width: 50%; max-width: 444px; height: auto; margin: 0 2rem 0.5rem 0; }
#index .TitreParagraphe { display: block; font-size: 1.4rem; font-weight: bold; font-style: none; line-height: 1.4rem; color: #3194ef; margin-bottom: 1rem; text-align: left; }
#index ul { margin: 1rem 1rem 2rem 0rem; }
#index li { list-style-type: square; margin-left: 1rem; }
#index .fascicule { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 211px; text-align: center; }
#index .jaquette { width: 150px; height: 211px; padding: 0; margin: 0; }
#index .jaquette img { width: 150px; height: 211px; padding: 0; margin: 0; border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem;}
#index .legende { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 0.9rem; width: 400px; max-width: 400px; height: 211px; background-color: #f0f0f0; padding: 0.5rem 1rem; margin: 0; border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; }
#index .legende img { display: none; }
#index .legende p { margin-bottom: 0; }
#index .cadre { padding-bottom: 1rem; margin: 0 2rem 1rem 2rem; border-bottom : 2px solid #f7de21; }
#index .TitreCadre { font-size: 1.2rem; text-align: center; padding: 0.5rem 1rem; margin-bottom: 1rem; background-color: #f7de21; color: #213152; margin-bottom: 1rem; font-weight: bold; font-style: none; line-height: 1.3rem; }
#index .illustration { text-align: center; text-wrap: balance; width: 100%; font-style: italic; }
#index .illustration img { display: block; width: 100%; }

/* MENTIONS LEGALES */
	
#mentions .titre { font-size: 1.3rem; font-weight: bold; color: #f7de21; margin-bottom: 1.5rem; }
#mentions hr { border: 0; border-top: dashed 1px #707070; height: 1px; margin: 1.5rem 0; }

/* PERMANENCES */

#permanences .horaires { text-align: center; margin: 0 0 4rem 0; line-height: 1.5rem; }
#permanences .calendrier { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: top; -ms-flex-align: top; align-items: top; width: 100%; height: auto; text-align: left; }
#permanences .mois { width: 100%; height: auto; margin: 0 0 2rem; }
#permanences table { width: 100%; }
#permanences th { border-radius: 0.5rem; background-color: #213152; color: #fff; font-weight: bold; text-align: center; font-size: 1.1rem; padding: 0.25rem 1rem; }
#permanences td { width: auto; border: 1px solid #213152; border-radius: 0.5rem; background-color: #fff; color: #000; text-align: left; font-size: 0.9rem; wrap: nowrap; padding: 0.25rem 1rem; }
#permanences td:nth-child(1) { font-weight: bold; color: #213152; }
#permanences .carnet { font-size: 0.8rem; color: #213152; margin-bottom: 1rem; text-align: center; }
#permanences .cdt { font-size: 0.8rem; color: #213152; background-color: #f7de21; padding: 0 0.5rem; }

/* PHOTOS */

#photos .SousTitre { display: block; font-size: 1.4rem; font-weight: bold; font-style: none; line-height: 1.4rem; color: #3194ef; margin-bottom: 1rem; text-align: left; }
#photos .galerie { padding: 0; overflow: hidden; font-family: sans-serif; margin-bottom: 2rem; }
#photos .diapo { display: inline-block; margin: 0 1rem 0.5rem 0; max-width: 350px; max-height: 250px; text-align: center; }
#photos .diapo img { max-width: 350px; max-height: 250px; padding: 0; border: 0; }
#photos .CreditPhoto { font-size: 0.7rem; color:#808080; }

}



@media all and (max-width: 480px) {

/* conteneur de la page (sauf header et footer) */
.main {	width: auto; margin: 0 auto; padding: 2rem 1rem; background-color: #fff; text-align: left; font-size: 1rem; line-height: 1.5rem; }

/* BOUTIQUE */

#boutique .produits { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; -webkit-box-align: top; -ms-flex-align: top; align-items: top; }
#boutique .box { width: 100%; height: auto; padding: 1rem; margin-bottom: 3rem; border: 1px #000 solid; text-align: center; text-wrap: balance; }
#boutique img { display: block; width: 100%; height: auto; margin-bottom: 2rem; text-align: center; }
#boutique .nom { font-size: 1.7rem; font-weight: bold; color: #213152; margin-bottom: 1rem; }
#boutique .description { font-size: 1rem; color: #000; margin-bottom: 1rem; }
#boutique .prix { font-size: 1.7rem; font-weight: bold; color: #f00; }
#boutique .barre { font-size: 1.2rem; text-decoration: line-through; font-weight: normal; color: #000; margin-right: 1rem; }

/* CLUB */

#localisation { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; margin-bottom: 2rem; text-align: justify; }
#localisation .box { margin-bottom: 2rem; }
#localisation .box:nth-child(1) { width: 100%; }
#localisation .box:nth-child(2) { width: 100%; }
#localisation img { width: 100%; height: auto; margin: 0 0 0.5rem 0; }
#localisation p { margin-bottom: 2rem; }
#map { height: 450px; margin-bottom: 1rem; }
#club .stand { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: top; -ms-flex-align: top; align-items: top; width: 100%; margin-bottom: 2rem; text-align: justify; }
#club .box { width: 100%; margin-bottom: 2rem; }
#club img { width: 100%; height: auto; margin-bottom: 0.5rem; }
#reglement .TitreArticle { font-size: 1.3rem; font-weight: bold; color: #f7de21; margin: 1.5rem 0; }
#reglement p { margin: 0 0 1rem 0; }

/* COMPETITIONS */

#competitions .calendrier { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: top; -ms-flex-align: top; align-items: top; width: 100%; height: auto; text-align: left; }
#competitions .box { width: 100%; height: auto; margin: 0 0 2rem; }
#competitions .mois { width: 100%; border-radius: 0.5rem; background-color: #213152; color: #fff; font-weight: bold; text-align: center; font-size: 1.1rem; padding: 0.25rem 1rem; margin-bottom: 2px; }
#competitions .epreuve { width: 100%; border: 1px solid #213152; border-radius: 0.5rem; background-color: #fff; color: #000; text-align: left; font-size: 0.9rem; wrap: nowrap; padding: 0.25rem 1rem; margin-bottom: 2px; }
#competitions .stand10 { background-color: #00D64C; font-size: 0.8rem; color: #000; padding: 0 0.5rem; }
#competitions .stand25 { background-color: #81ABFF; font-size: 0.8rem; color: #000; padding: 0 0.5rem; }
#competitions .stand50 { background-color: #FFCB17; font-size: 0.8rem; color: #000; padding: 0 0.5rem; }
#competitions .stand200 { background-color: #FF7373; font-size: 0.8rem; color: #000; padding: 0 0.5rem; }
	
/* DEMARCHES */

#demarches .faq { margin-bottom: 5rem; }
#demarches .titre { font-size: 1.7rem; line-height: 2.2rem; font-weight: bold; color: #213152; }
#demarches hr { width: 100%; height: 1px; margin: 0.5rem 0; }
#demarches p.rouge { margin-bottom: 5rem; }
#demarches ul { margin: 0 0 1rem; }

/* FOOTER */

footer { clear: both; background-color: #f7de21; color: #000; width: auto; padding: 2rem; }
#footer { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 auto; }
#footer .box { width: calc(100% - 2rem); margin-bottom: 1rem; }
#footer .titre { font-size: 1.2rem; font-weight: bold; width: 100%; padding: 0 0 0.5rem 0; border-bottom: 1px solid #000; margin: 0 0 1rem 0; }
#footer .texte { font-size: 1rem; width: 100%; margin: 0 0 1rem 0; }

/* HEADER */

#bannierePC,
#MenuPC { display: none; }
#banniereMob { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: auto; background-image: url('../images/fond.png'); background-repeat: repeat-x; background-position: top; margin: 0; }
#banniereMob .banniereG { width: 90px; height: auto; }
#banniereMob .banniereC { width: calc(100% - 90px); height: auto; color: #213152; }
#banniereMob .banniereC .titre { display: inline-block; font-size: 1.5rem; font-weight: bold; line-height: 1.5rem; text-shadow: 1px -1px 0px #fff; padding: 2rem 2rem 0.5rem 0; }
#banniereMob .banniereC .SousTitre { display: inline-block; font-size: 1rem; line-height: 1rem; padding: 0 2rem 2rem 0; text-shadow: 1px -1px 1px #fff; }
#banniereMob .banniereD { display: none; width: 0; height: auto; }
#banniereMob .banniereD img { width: 0px; height: 0px; }

/* INDEX */

#index { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
#index .box { height: auto; padding: 0; margin-bottom: 3rem; }
#index .box:nth-child(1) { width: 100%; text-align: justify; }
#index .box:nth-child(2) { width: 100%; border: 2px solid #f7de21; border-radius: 0.5rem; }
#index .paragraphe { display: block; width: auto; min-height: 250px; margin-bottom: 3rem; }
#index img.photo1 { float: left; width: 50%; max-width: 250px; height: auto; margin: 0 1rem 0.5rem 0; }
#index img.photo2 { float: right; width: 50%; max-width: 376px; height: auto; margin: 0 0 0.5rem 1rem; }
#index img.photo3 { float: left; width: 50%; max-width: 444px; height: auto; margin: 0 1rem 0.5rem 0; }
#index .TitreParagraphe { display: block; font-size: 1.4rem; font-weight: bold; font-style: none; line-height: 1.4rem; color: #3194ef; margin-bottom: 1rem; text-align: left; }
#index ul { margin: 1rem 1rem 2rem 0rem; }
#index li { list-style-type: square; margin-left: 0rem; }
#index .fascicule { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 211px; text-align: center; }
#index .jaquette { width: 150px; height: 211px; padding: 0; margin: 0; }
#index .jaquette img { width: 150px; height: 211px; padding: 0; margin: 0; border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; }
#index .legende { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 0.9rem; line-height: 1rem; width: 100%; height: 211px; background-color: #f0f0f0; padding: 0.5rem 1rem; margin: 0; border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; }
#index .legende img { display: none; }
#index .legende p { margin: 0; }
#index .cadre { padding-bottom: 1rem; margin: 0 1rem 1rem 1rem; border-bottom : 2px solid #f7de21; }
#index .TitreCadre { font-size: 1.2rem; text-align: center; padding: 0.5rem 1rem; margin-bottom: 0; background-color: #f7de21; color: #213152; margin-bottom: 1rem; font-weight: bold; font-style: none; line-height: 1.3rem; }
#index .illustration { text-align: center; text-wrap: balance; font-size: 0.9rem; width: 100%; font-style: italic; }
#index .illustration img { display: block; width: 100%; }

/* MENTIONS LEGALES */
	
#mentions .titre { font-size: 1.3rem; font-weight: bold; color: #f7de21; margin-bottom: 1.5rem; }
#mentions hr { border: 0; border-top: dashed 1px #707070; height: 1px; margin: 1.5rem 0; }

/* PERMANENCES */

#permanences .horaires { text-align: center; margin: 0 0 4rem 0; line-height: 1.5rem; }
#permanences .calendrier { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: top; -ms-flex-align: top; align-items: top; width: 100%; height: auto; text-align: left; }
#permanences .mois { width: 100%; height: auto; margin: 0 0 2rem; }
#permanences table { width: 100%; }
#permanences th { border-radius: 0.5rem; background-color: #213152; color: #fff; font-weight: bold; text-align: center; font-size: 1.1rem; padding: 0.25rem 1rem; }
#permanences td { width: auto; border: 1px solid #213152; border-radius: 0.5rem; background-color: #fff; color: #000; text-align: left; font-size: 0.9rem; wrap: nowrap; padding: 0.25rem 1rem; }
#permanences td:nth-child(1) { font-weight: bold; color: #213152; }
#permanences .carnet { font-size: 0.8rem; color: #213152; margin-bottom: 1rem; text-align: center; }
#permanences .cdt { font-size: 0.8rem; color: #213152; background-color: #f7de21; padding: 0 0.5rem; }

/* PHOTOS */

#photos .SousTitre { display: block; font-size: 1.4rem; font-weight: bold; font-style: none; line-height: 1.4rem; color: #3194ef; margin-bottom: 1rem; text-align: left; }
#photos .galerie { padding: 0; overflow: hidden; font-family: sans-serif; margin-bottom: 2rem; }
#photos .diapo { display: inline-block; margin: 0 1rem 0.5rem 0; text-align: center; }
#photos .diapo img { height: 150px; }
#photos .CreditPhoto { font-size: 0.7rem; color:#808080; }

}