* { box-sizing:border-box; }
html { background-color:#ffffff; margin:0; padding:0; }
.clear { clear:both; }
.blochref, .blochrefpopin { cursor:pointer; }

body { font-family:Saira Condensed, sans-serif; margin:0; padding:0; text-align:left; background-color:#161616; color:#3c3c3c; font-size:1.3rem; font-weight:200; }
body.popin { position:relative; background-color:#ffffff; min-height:100%; min-width:100%; }

.popinauto { position:fixed; left:-100rem; }

/* Liens par défaut */
a, a:link, a:active, a:visited, a:focus { color:inherit; text-decoration:inherit; outline:hidden; outline-color:transparent; }
a:hover { color:inherit; text-decoration:underline; outline:hidden; }

a.form { clear:both; margin: 2% 0 2% 0;  }
a.btn { color:#ffffff; }

a.ancre { display:block !important; position:absolute !important; margin:0 !important; padding:0 !important; width:0 !important; height:30rem !important; overflow:hidden !important; top:-40rem !important; z-index:100000 !important; }
body.scroll a.ancre { top:-10rem !important; }

img { padding:0; margin:0; border:0; }

/* Paragraphes par défaut */
p { word-wrap:break-word; text-align:left; margin:0; padding-bottom:1em; }
span { font-size:inherit; }

/* La largeur de la classe liquide est définie dans la feuille de style RESPONSIVE */
.liquide { display:block; clear:both; position:relative; margin:0 auto; padding:0; overflow:hidden; }

/* AJAX LOADER */
.ajaxloading { width:100% !important; background:transparent url('../../_chartes_/ptc/ressources/images/ajax-loader.gif') center 5rem no-repeat !important; min-height:20rem !important; }
.ajaxloading.white { background-image:url('../../_chartes_/ptc/ressources/images/ajax-loader.gif') !important; }
.popin .ajaxloading { background-image:url('../../_chartes_/ptc/ressources/images/ajax-loader.gif') !important; }

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/*    Mise en forme spécifique des formulaires   */
/*----------------------------------------------------------------------------------------------------------------------------------------------*/

input, textarea, select { font-size:inherit; display:inline-block; background-color:#cccccc; color:#ffffff; line-height:2em; height:2em; vertical-align:center; padding:0.1em 0.3em 0 0.3em; margin:0; width:100%; border:0; border-radius:0; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; -webkit-appearance:none; -moz-appearance:none; -o-appearance:none; appearance:none; }
textarea { height:6em; }
select { background:#cccccc url(../../_chartes_/ptc/ressources/images/dropdown.png) right center no-repeat; padding-right:30px !important; }
select::-ms-expand { display: none; }
select option { color:#ffffff; }
select.placeholder { color:rgba(54,54,54,0.55) !important; }

/* Mise en forme des boutons radio et des checkboxes */
input[type="radio"] + span:before, input[type="checkbox"] + span:before, input[type="radio"] + span:after, input[type="checkbox"] + span:after {
	content:'' !important; position:absolute !important;
	left:0.1em !important; top:0.1em !important; /* on décale la case de 10% de sa taille pour bien la centrer en hauteur */
	width:1em !important; height:1em !important; /* on définit la taille de référence de la case à la même taille que la font du span */
	transform-origin: 50% 50% !important; /* pour être certain du point d'origine du scale pour la case et la coche */
	transition:all .2s !important; /* on prévoit une animation */
}
input[type="radio"], input[type="checkbox"] { position:absolute !important; left:0 !important; top:1em !important; opacity:0 !important; transform: scale(0) !important; height:1em !important; width:1em !important; } /* On masque le champ input (opacité 0) */
input[type="radio"] + span, input[type="checkbox"] + span { position:relative !important; cursor:pointer !important; padding-top:0 !important; padding-bottom:0 !important; padding-left:1.6em !important; } /* on prépare le label (balise span située à côté du champ input) */
input[type="radio"] + span:before, input[type="checkbox"] + span:before { border:1px solid #cccccc !important; background-color:transparent !important; } /* Aspect général de la case */
input[type="radio"] + span:after, input[type="checkbox"] + span:after { background-color:#cccccc !important; } /* Aspect général de la coche */
input[type="checkbox"] + span:before, input[type="checkbox"] + span:after { border-radius: 5% !important; } /* angles arrondis */
input[type="radio"] + span:before, input[type="radio"] + span:after { border-radius: 50% !important; } /* cases circulaires */
input[type="radio"] + span:before, input[type="checkbox"] + span:before { transform: scale(1.2) !important; } /* élargissement à 120% */
input[type="radio"]:not(:checked) + span:after, input[type="checkbox"]:not(:checked) + span:after { opacity: 0 !important; transform: scale(0) !important; } /* Aspect si "pas cochée" */
input[type="radio"]:checked + span:after, input[type="checkbox"]:checked + span:after { opacity: 1 !important; transform: scale(0.6) !important; } /* Aspect si "cochée" */

.linefeed { padding-top:1rem; }

label { font-weight:200; position:relative; }

button, a.button { display:inline-block; font-size:1.5rem; text-transform:uppercase; text-align:center; background-color:#cccccc; border:1px solid #cccccc; color:#ffffff; margin:0; padding:0.5rem 1.5rem; width:auto; }
button:hover, a.button:hover { color:#cccccc; background-color:#ffffff; text-decoration:none; }

button.btn-primary, button.btn-primary:focus, button.btn-primary:hover { background-color:#cccccc; border-color:#cccccc; }
button.btn { margin-top:1em; }

.asterisque { display:block !important; float:none !important; font-size:0.8rem !important; font-weight:100 !important; clear:both !important; text-transform:none !important; }

.reponse { text-transform:uppercase; text-align:center; margin:0 2rem; }
.reponse.succes { font-size:1.4rem; color:#3c3c3c; padding:5rem 0; }
.reponse.erreur { font-size:1rem; color:#ab2727; padding:0.5rem 0 2.5rem 0; }
.reponse li { font-size:0.8rem; text-transform:none; text-align:center; margin:1em 0 0 0; }

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* HEADER */
#en2mots { width:100%; max-width:2000px; margin:0 auto; position:relative; }

header { background-color:transparent; position:fixed; height:5.4rem; top:0; width:100%; max-width:2000px; margin:0 auto; padding:0; z-index:200; transition: all 0.3s linear; overflow:visible; }

#headermaxwidth { width:100%; max-width:2000px; margin:0 auto; position:relative; background-color:transparent; }
#headerpadding { padding-bottom:5.4rem; transition: all 0.3s linear; }

#nav-home, #nav-button, #nav-toggle { display:none; }

/* LOGOS */
header #logos { margin:0 auto; padding:0; z-index:400; height:0; overflow:visible; }
header #logos a { display:block; position:relative; margin:0; padding:0; height:auto; top:0; text-align:center; transition: all 0.3s linear; }
header #logos a:first-child { float:left; width:10%; }
header #logos a:last-child { float:right; width:8%; }
header #logos a img { display:block; margin:0; padding:0; position:relative; width:100%; }

/* NAVIGATION PRINCIPALE */
header nav { height:5.4rem; z-index:300; background-color:#ffffff; display:block; position:absolute; left:0; top:0; margin:0 auto; padding:0; width:100%; text-align:right; border-bottom: 0.4rem solid #1c4a7c; }
header nav .liquide { overflow:visible; }

ul#menu-header { display:inline-block; position:relative; font-size:1.3rem; margin:0 auto; padding:0; right:12%; width:72%; transition: all 0.3s linear; }
ul#menu-header > li { position:relative; display:inline-block; float:none; margin:1.5rem 0; padding:0; list-style-type:none; text-transform:uppercase; border-left:1px solid #1c4a7c; }
ul#menu-header > li:first-child { padding-left:0; border-left:none; }
ul#menu-header > li a { color:#1c4a7c; text-decoration:none; padding:0.2rem 1.7rem; font-weight:700; }
ul#menu-header > li a:hover, ul#menu-header > li a.hover, ul#menu-header li a.current { color:#e89d16; text-decoration:none; }

ul#menu-header > li > ul.sousmenu { overflow:hidden; display:block; position:absolute; left:0; top:2rem; width:15rem; margin:0; padding:0; max-height:0; transition: max-height 0s linear; background-color:#ffffff; border:0; }
ul#menu-header > li:hover > ul.sousmenu, ul#menu-header > li > a.hover ~ ul.sousmenu { max-height:50rem; transition: max-height 2s linear; padding:1.5rem 0 0.5rem 0; border-bottom: 0.4rem solid #1c4a7c; }
ul#menu-header > li > ul.sousmenu > li { position:relative; display:block; float:none; margin:0; padding:0; list-style-type:none; text-transform:none; text-align:left; }
ul#menu-header > li > ul.sousmenu > li a { display:block; margin:0; padding:0.5rem 1.5rem; text-align:left; font-size:1.2rem; font-weight:400; }


/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* FOOTER */
footer { font-size:1.4rem; color:#c0c0c0; background-color:#161616; background-image:url('../../_chartes_/ptc/ressources/images/footer.jpg'); background-repeat:no-repeat; background-position:left bottom; background-size:cover; background-clip:border-box; position:relative; height:auto; width:100%; max-width:2000px; margin:0 auto; padding:0; z-index:100; transition: all 0.3s linear; }

footer .liquide { padding:2rem 0 8rem 20rem; }

footer #coordonnees { display:inline-block; width:45%; float:left; }
footer #coordonnees h2 { color:#c0c0c0; margin-top:2rem; font-weight:700; }
footer #coordonnees h2:first-child { margin-top:0; }
footer #coordonnees .asterisque { font-size:0.9rem !important; }
footer #googlemap { display:inline-block; width:50%; height:25rem; float:right; filter:grayscale(0.7); opacity:0.9; }
footer #googlemap:hover { filter:grayscale(0); opacity:1; }

footer #copyright { font-size:1.1rem; position:absolute; bottom:1rem; right:0; }

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* CONTENU */
main { margin:0; padding:0; background-color:#ffffff; min-height:40rem; position:relative; }

h1, h2, h3 { margin:0; padding:0; text-align:left; text-transform:none; font-weight:200; }
h1 { font-size:2.4rem; padding-top:6rem; padding-bottom:2rem; color:#1c4a7c; font-weight:700; }
h2 { font-size:2rem; }
h3 { font-size:1.6rem; }

section, aside { position:relative; margin:0; padding:0; }

div.bandeauvisuel { display:block; margin:0; padding:0; position:absolute; width:100%; height:30rem; background-color:#333; background-repeat:no-repeat; background-size:cover; background-clip:border-box; box-shadow: 0px -5px 6px 3px rgba(0, 0, 0, 0.4) inset; }
div.liquide.bandeau h1 { font-size:3rem; height:30rem; margin-bottom:2rem; color:#ffffff;  }
div.liquide.bandeau div.texte { position:absolute; top:15rem; font-size:1.8rem; color:#ffffff; }
div.liquide.bandeau div.texte p { display:inline-block; background-color:rgba(0,0,0,0.4); padding:0.5rem 1rem; border-radius:0.5rem; }

.half { max-width:50%; display:inline-block; position:relative; box-sizing:border-box; }

img { max-width:100%; }
img.arrondi { border-radius:0.5rem; }

.hovergray {-webkit-filter: grayscale(100%); -webkit-filter: grayscale(1); filter: grayscale(100%); filter: url('https://www.plaisancetennisclub.fr/_chartes_/ptc/ressources/images/gray.svg#grayscale'); filter: gray; }

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* ACCUEIL */

#baseline h1 { color:#1c4a7c; margin-top:45rem; padding-top:2rem; text-align:center; font-size:3rem; font-weight:700; }
#baseline .intro { padding-bottom:3rem; text-align:center; font-size:1.8rem; font-weight:200; }
#baseline .intro p { text-align:center; }

div.controls { position:relative; overflow:hidden; margin:0 0 4rem 0; }
div.controls > img { z-index:1; position:relative; width:100%; height:auto; left:0; top:0; vertical-align:top; }
div.controls > video ~ img { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
div.controls video { z-index:2; position:relative; width:100%; height:auto; left:0; top:0; vertical-align:top; }
div.controls iframe { z-index:4; position:relative; width:100%; height:23rem; left:0; top:0; border:0; vertical-align:top; }
div.controls > .play { z-index:3; position:absolute; width:100%; height:100%; left:0; top:0; }
div.controls > .play img, div.controls > .play svg { position:absolute; width:4rem; height:4rem; left:50%; top:50%; transform:translate(-50%,-50%); }
div.controls > .play path { fill:#e89d16; }
div.controls:hover > .play path { fill:#ffffff; }

#slider { background-color:#ffffff; color:#ffffff; margin:0; padding:0; width:100%; height:45rem; overflow:hidden; position:absolute; top:0; left:0; }
#slider .swiper-container { position:absolute; margin:0; padding:0; left:0; top:0; width:100%; height:100%; }  
#slider .swiper-wrapper { height:90%; }  
#slider ul { margin:0; padding:0; }
#slider li { display:block; list-style-type:none; margin:0; padding:0; background-color:transparent; background-repeat:no-repeat; background-size:cover; background-clip:border-box; box-shadow: 0px -5px 6px 3px rgba(0, 0, 0, 0.4) inset; }
#slider div.contenu { height:100%; opacity:0; display:block; display:flex; flex-flow:column; align-items:flex-start; justify-content:center; }
#slider div.contenu h2 { font-size:3.6rem; font-weight:700; display:inline-block; max-width:100%; text-align:left; color:#ffffff; margin:0; padding:0; margin-bottom:1rem; word-wrap:break-word; background-color:rgba(0,0,0,0.4); padding:0.5rem 1rem; border-radius:0.5rem; }
#slider div.contenu > div { font-size:2rem; font-weight:200; display:block; width:100%; text-align:left; color:#ffffff; margin:0; padding:0; margin-bottom:4rem; word-wrap:break-word; }
#slider div.contenu > div p { display:inline-block; background-color:rgba(0,0,0,0.4); padding:0.5rem 1rem; border-radius:0.5rem; }
#slider div.contenu > a { line-height:1em; padding:0.6em 0.8em; margin:0; font-weight:500; color:#ffffff; background-color:#1c4a7c; border:1px solid #1c4a7c; }
#slider div.contenu > a:hover { background-color:#ffffff; color:#1c4a7c; text-decoration:none; }
#slider .swiper-pagination { bottom:0; height:10%; display:flex; flex-flow:row; align-items:center; justify-content:center; }  
#slider .swiper-pagination-bullet { opacity:1; margin:0 0.3em; width:1em; height:1em; background-image:url('https://www.plaisancetennisclub.fr/_chartes_/ptc/ressources/images/balle.png'); background-color:transparent; background-repeat:no-repeat; background-position:center top; background-size:cover; background-clip:border-box;  }
#slider .swiper-pagination-bullet-active {  background-position:center bottom;  }

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* ACCES DIRECT */

#bandeau-direct { background-color:#dcdcdc; position:relative; height:auto; width:100%; max-width:2000px; margin:0 auto; padding:1rem 0; z-index:100; transition: all 0.3s linear; }
#bandeau-direct h2 { color:#5c5c5c; padding-bottom:1.5rem; font-weight:700; }

#bandeau-direct ul { display:block; margin:1rem 0 2rem 0; padding:0; position:relative; }
#bandeau-direct ul > li { list-style-type:none; margin:0; max-width:20%; display:inline-block; padding:0 3rem; position:relative; box-sizing:border-box; }

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* NEWS FACEBOOK */

#bandeau-news { font-size:0; }
#bandeau-news { background-color:#ffffff; position:relative; height:auto; width:100%; max-width:2000px; margin:0 auto; padding:1rem 0; z-index:100; transition: all 0.3s linear; }
#bandeau-news h2 { color:#c0c0c0; padding-bottom:1.5rem; font-weight:700; }
#bandeau-news > div:after { content:""; display:table; clear:both; }

#bandeau-news .post { font-size:0.9rem; position:relative; width:29.33%; display:inline-block; margin:2rem 3%; padding:0; overflow:hidden; vertical-align:top; border:1px solid #ccc; }
#bandeau-news .post video { width:100%; margin:0; padding:0; }
#bandeau-news .post div.visuel { position:relative; width:100%; height:20rem; margin:0; padding:0; background:transparent center no-repeat; background-size:cover; }
#bandeau-news .post img { width:100%; margin:0; padding:0; }
#bandeau-news .post p { position:relative; width:auto; font-family: Helvetica,Arial,sans-serif; font-size:0.9rem; margin:0; padding:1rem; }
#bandeau-news .post p .copyrightfetchrss { position:absolute; display:block; bottom:0; right:1rem; font-size:0.6em; color: #ccc; }
#bandeau-news .post p.pubdate { margin:0 1rem; padding:1rem 0; border-top:1px solid #ccc; }
#bandeau-news .post a.postlink { position:absolute; margin:0; padding:0; right:1rem; bottom:0; display:block; width:auto; }
#bandeau-news .post a.postlink span { position:relative; display:inline-block; width:2rem; height:2rem; text-align:center; margin:0 0 0.7rem 0; padding:0; }
#bandeau-news .post a.postlink span img { position:relative; width:100%; }
#bandeau-news .post a.postlink span svg { position:relative; width:100%; height:100%; }

#bandeau-news .post:nth-of-type(1) { margin-left:0; }
#bandeau-news .post:nth-of-type(3) { display:inline-block; margin-right:0; }


#page-news { font-size:0; }
#page-news h1 { padding-left:10rem; padding-top:2rem; padding-bottom:2rem; }
#page-news > div:after { content:""; display:table; clear:both; } 

#page-news .post { font-size:0.9rem; position:relative; width:47%; display:inline-block; margin:2rem 3%; padding:0; overflow:hidden; vertical-align:top; border:1px solid #ccc; }
#page-news .post video { width:100%; margin:0; padding:0; }
#page-news .post div.visuel { position:relative; width:100%; height:30rem; margin:0; padding:0; background:transparent center no-repeat; background-size:cover; }
#page-news .post img { width:100%; margin:0; padding:0; }
#page-news .post p { position:relative; width:auto; font-family: Helvetica,Arial,sans-serif; font-size:0.9rem; margin:0; padding:1rem; }
#page-news .post p .copyrightfetchrss { position:absolute; display:block; bottom:0; right:1rem; font-size:0.6em; color: #ccc; }
#page-news .post p.pubdate { margin:0 1rem; padding:1rem 0; border-top:1px solid #ccc; }
#page-news .post a.postlink { position:absolute; margin:0; padding:0; right:1rem; bottom:0; display:block; width:auto; }
#page-news .post a.postlink span { position:relative; display:inline-block; width:2rem; height:2rem; text-align:center; margin:0 0 0.7rem 0; padding:0; }
#page-news .post a.postlink span img { position:relative; width:100%; }
#page-news .post a.postlink span svg { position:relative; width:100%; height:100%; }

#page-news .post:nth-child(2n+1) { margin-right:0; }
#page-news .post:nth-child(2n) { display:inline-block; margin-left:0; }


.fb-post { background-color:#ffffff; }

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* PARTENAIRES */

#bandeau-partenaires { background-color:#dcdcdc; position:relative; height:auto; width:100%; max-width:2000px; margin:0 auto; padding:1rem 0; z-index:100; transition: all 0.3s linear; }
#bandeau-partenaires h2 { padding-top:1rem; padding-bottom:1.5rem; font-weight:700; color:#5c5c5c; }

#bandeau-partenaires ul.listepartenaires li { display:inline-block; margin:0.5rem 1.5rem 0.5rem 0; width:9%; }
#bandeau-partenaires ul.listepartenaires.institutionnels li { margin:0.5rem 3.5rem 0 0; width:12%; }
#bandeau-partenaires ul.listepartenaires li img { filter:grayscale(1); opacity:0.7; }
#bandeau-partenaires ul.listepartenaires li img:hover { filter:grayscale(0); opacity:1; }

ul.listepartenaires { padding:0; margin:0; display:block; width:100%; position:relative; }
ul.listepartenaires li { margin:0.5rem 2% 2.5rem 2%; list-style-type:none; display:inline-block; width:16%; position:relative; vertical-align:middle; }
ul.listepartenaires.institutionnels li { width:21%; }
ul.listepartenaires li > a { width:100%; display:block; position:relative; vertical-align:middle; }
ul.listepartenaires li img { width:100%;  }
ul.listepartenaires li div { width:100%; text-align:center; min-height:2rem; }
ul.listepartenaires li div p { width:100%; text-align:center; margin:0; padding:0; }

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* EQUIPES */

div.equipes { margin:1rem 0 2rem 0; padding:0; width:45%; display:inline-block; position:relative; vertical-align:top; }
div.equipes:last-child { margin-left:10%; }
div.equipes ul { margin:0; padding:0; }
div.equipes h2 { color:#1c4a7c; }
div.equipes li { margin:0.5rem 0; list-style-type:none; display:block; width:100%; position:relative; }
div.equipes li > a { display:block; margin:0; padding:0.5rem 1.5rem; }
div.equipes li > a.F { background-color:rgba(232,157,22,0.2); border:1px solid #e89d16; color:#e89d16; }
div.equipes li > a.H { background-color:rgba(28,74,124,0.2); border:1px solid #1c4a7c; color:#1c4a7c; }
div.equipes li > a:hover { background-color:#ffffff; text-decoration:none; }
div.equipes .contenu { display:block; position:relative; margin:0.5rem 0 1.5rem 0; }
div.equipes .contenu > img { display:block; width:100%; min-width:100%; max-width:100%; }
div.equipes .contenu > a { display:block; }

.accordeon li, .accordeon ul{ list-style: none; }    
.accordeon li .contenu { display: none; }   

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* TROMBINOSCOPE : BUREAU / EQUIPE PEDAGOGIQUE */

ul.trombinoscope { margin:1rem 0 2rem 0; padding:0; display:block; position:relative; vertical-align:top; }
ul.trombinoscope li { float:left; margin:0; padding:0.5rem 0.5rem 3rem 0.5rem; list-style-type:none; display:block; width:25%; position:relative; text-align:center; font-size:1.2rem; }
ul.trombinoscope li.mono { width:100%; }
ul.trombinoscope li.duo { width:50%; }
ul.trombinoscope li.trio { width:33.33%; }
ul.trombinoscope li.quatuor { width:25%; }
ul.trombinoscope li.mini { width:20%; }
ul.trombinoscope img { border-radius:50%; width:12rem; height:12rem; }
ul.trombinoscope li.mini img { width:9rem; height:9rem; }
ul.trombinoscope .nom { font-size:1.6rem; padding:1rem 0 0.5rem 0; font-weight:700; color:#1c4a7c; }
ul.trombinoscope:after { content:""; display:table; clear:both; }

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* PTC DECHAINE */

iframe.calameo { width:100%; height:70rem; margin:0 auto; padding:0; border:0; }
.ptcdechaine h1 { padding-top:1rem; }
.ptcdechaine ul { margin:0 0 2rem 0; padding:0; display:block; position:relative; vertical-align:top; }
.ptcdechaine li { margin:0; padding:0 1rem 1rem 0; list-style-type:none; display:inline-block; width:10%; position:relative; }
.ptcdechaine li a { display:block; width:100%; height:auto; border:4px solid transparent; position:relative; }
.ptcdechaine li a:hover, .ptcdechaine li a.current { width:100%; border:4px solid #e89d16; }
.ptcdechaine li a img { width:100%; opacity:0.8; }
.ptcdechaine li a:hover img, .ptcdechaine li a.current img { width:100%; opacity:0.3; }
.ptcdechaine li a span { display:inline-block; background-color:transparent; color:transparent; font-weight:700; font-size:3rem; position:absolute; left:0; top:0; right:0; bottom:0; text-align:center; padding-top:35%; }
.ptcdechaine li a:hover span, .ptcdechaine li a.current span { background-color:rgba(232,157,22,0.2); color:#e89d16; }

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* LACANAU */

#page-lacanau ul { width:100%; margin: 2rem 0; padding:0; }
#page-lacanau li { display:inline-block; width:48%; height:30rem; padding:0; margin:1%; list-style-type:none; position:relative; }
#page-lacanau li div { position:absolute; top:0; left:0; bottom:0; right:0; display:block; display:flex; flex-flow:column; align-items:flex-start; justify-content:center; text-align:center; }
#page-lacanau li img { position:relative; display:block; max-width:100%; max-height:100%; margin:0 auto; }

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* REPORTAGE */

ul.reportage { font-size:0; width:100%; margin: 2rem 0; padding:0; }
ul.reportage li { font-size:1rem; display:inline-block; width:48%; height:30rem; padding:0; margin:1%; list-style-type:none; position:relative; }
ul.reportage li div { position:absolute; top:0; left:0; bottom:0; right:0; display:block; display:flex; flex-flow:column; align-items:flex-start; justify-content:center; text-align:center; }
ul.reportage li img { position:relative; display:block; max-width:100%; max-height:100%; margin:0 auto; }

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* EVENEMENTS */
#page-evenements h1 { padding-left:10rem; padding-top:2rem; padding-bottom:1rem; }
#listeevenements { width:100%; height:55rem; position:relative; padding-bottom:1rem; }

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* TROUVER TOURNOI */

#page-trouvertournoi ul { display:block; margin:5rem 0 8rem 0; padding:0; position:relative; }
#page-trouvertournoi ul > li { list-style-type:none; margin:0; max-width:50%; display:inline-block; padding:0 7rem; position:relative; box-sizing:border-box; }


/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* FORMULES et OFFRESPROS */

ul.formules { padding:0; margin:0; display:block; width:100%; position:relative; }
ul.formules li { background-color:#dcdcdc; color:#5c5c5c; margin:0.5rem 0 2.5rem 0; padding:2rem 1rem; list-style-type:none; display:inline-block; position:relative; text-align:center; vertical-align:top; border-radius:2%; }
ul.formules li h2, ul.formules li p { text-align:center; }
ul.formules li .description { padding:2rem 0; }
ul.formules li .tarif { font-size:3rem; }
ul.formules li .plaquette { display:block; font-size:1.6rem; text-transform:uppercase; }

ul.formules li { width:28%; margin-left:2.5%; margin-right:2.5%; }
ul.formules5 li { width:18%; margin-left:1%; margin-right:1%; }
ul.formules4 li { width:22%; margin-left:1.5%; margin-right:1.5%; }
ul.formules3 li { width:28%; margin-left:2.5%; margin-right:2.5%; }
ul.formules2 li { width:35%; margin-left:7.5%; margin-right:7.5%; }

div.accestelechargements { margin:2rem auto; font-size:2rem; text-align:center; }
div.accestelechargements a { text-transform:uppercase; color:#e89d16; font-weight:700; }
div.accestelechargements a:hover { text-decoration:underline; }

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* TOURNOIS */

#page-tournois ul { padding:0; margin:0; display:block; width:100%; position:relative; }
#page-tournois li { margin:0.5rem 0 2.5rem 0; padding:0; list-style-type:none; display:inline-block; position:relative; text-align:center; vertical-align:top; width:28%; margin-left:2.5%; margin-right:2.5%; }
#page-tournois li h2, #page-tournois li p { text-align:center; }
#page-tournois li .datevent { font-size:1.4rem; padding:0; font-weight:700; }
#page-tournois li .titrevent { font-size:2rem; padding:0 0 1rem 0; }


/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* TELECHARGEMENTS */
#page-telechargements { padding-bottom:4rem; }
#page-telechargements h2 { text-transform:uppercase; padding-bottom:2rem; }
#page-telechargements ul { padding-bottom:2rem; }
#page-telechargements li { text-transform:uppercase; }



/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* AUTHENTIFICATION */
#div-auth { width:25%; margin:0; padding:0; }

#ul-auth { clear:both; display:block; width:auto; margin:0; padding:0; padding-top:1.5rem; }
#ul-auth li { clear:both; display:block; width:auto; padding-top:0.5rem; list-style-type:none; margin:0; padding:0; }
#ul-auth li a { padding-top:0.5rem; font-size:1.1rem; font-style:italic; opacity:0.9; }

/* ------------------------------------------------------------------------------------------------------------- */
/* RESPONSIVE */

.liquide { width:90%; }
html { font-size:10px; font-size:1vw; }


/* AFFICHAGE PANORAMIC */

/* Attention, le style panoramic n'est pas ajouté sur body mais sur html
html.panoramic { left:calc( ( 100% - 2.5 * 100vh ) / 2); width:calc(2.5 * 100vh); font-size:2vh; text-align:center; }
*/


/* AFFICHAGE FONT MAXI */
@media (min-width:2000px) { 

	html { font-size:20px; }

}

/* AFFICHAGE MAXI */
@media (min-width:2560px) { 

	.liquide { width:1200px; }
	html { font-size:13.33px; }
	.litebox-overlay .litebox-container { width:1200px; margin-left:auto; margin-right:auto; }
	.litebox-overlay .litebox-inline-html { width:960px; }

}
/* AFFICHAGE NORMAL */
@media (orientation:portrait) and (min-width:951px), (orientation:landscape) and (min-width:501px) {

}
/* AFFICHAGE TABLETTE et PETIT ECRAN */
@media (orientation:portrait) and (min-width:951px) and (max-width:1600px), (orientation:landscape) and (min-width:501px) and (max-width:1200px) {

	html { font-size:11px; font-size:1.1vw; }


}
/* AFFICHAGE MOBILE */
@media (orientation:portrait) and (max-width:800px), (max-width:500px) {

	html { font-size:24px; font-size:3vw; }
	.liquide { width:90%; }

	a.ancre { top:-10rem !important; }

	div.nosmartphone br { display: none; content: ' '; clear:none; }
	
	p img { float:none !important; display:block !important; margin:1rem auto !important; width:100% !important; }

	header .liquide { overflow:visible; width:100%; transition: all 0.5s linear; }
	#nav-button { font-size:3rem; cursor:pointer; display:block; color:#1c4a7c; position:fixed; right:1rem; top:0.8rem; transition: all 0.5s linear; }
 
	header #logos { margin-left:0.5rem; margin-top:0.5rem; }
	header #logos a:last-child { float:left; width:15%; margin-left:1rem; }

	ul#menu-header { z-index:10000; height:0; overflow:hidden; background-color:#161616; color:#ffffff; position:absolute; margin-top:5.4rem; width:100%; left:0; transition: all 0.5s linear; }
	#nav-toggle:checked ~ #menu-header { height:auto; transition: all 0.5s linear; }
	ul#menu-header li { display:block; width:100%; padding:0 2%; margin:0.7rem 0; border-left:0; position:relative; }
	ul#menu-header li:first-child { display:none; }
	ul#menu-header li a { display:block; padding:1em; color:#ffffff; text-align:center; }
	ul#menu-header.current a, ul#menu-header li.current a:link, ul#menu-header li.current a:active, ul#menu-header li.current a:visited { color:#e89d16; }
	ul#menu-header li a:hover { color:#e89d16; text-decoration:none; }

	ul#menu-header > li > ul.sousmenu { position:relative; top:0; width:100%; background-color:#161616; height:auto; display:block; border-bottom:0; }
	ul#menu-header > li:hover > ul.sousmenu, ul#menu-header > li > a.hover ~ ul.sousmenu { max-height:50rem; transition: max-height 2s linear; padding:1.5rem 0 0.5rem 0; border-bottom:0; }
	ul#menu-header > li > ul.sousmenu li { display:block; width:100%; padding:0 2%; margin:0.7rem 0; border-left:0; background-color:#161616; }


	footer { background-image:none; padding-top:2rem; }
	footer .liquide { padding:0; text-align:center; }
	footer #coordonnees { display:block; width:100%; float:none; margin-bottom:2rem; }
	footer #googlemap { display:block; width:100%; height:25rem; float:none; margin-bottom:2rem;  }
	footer #copyright { position:relative; bottom:auto; left:auto; display:block; }

	p { text-align:center; font-size:1.6rem; }
	
	h1 { text-align:center; font-size:2.6rem; }
	h2 { text-align:center; font-size:2.4rem; }
	h3 { text-align:center; }

	#baseline h1 { margin-top:25rem; }
	
	#slider { height:25rem; }
	#slider div.contenu { text-align:center; }
	#slider div.contenu h2 { text-align:center; font-size:2.4rem; }
	#slider div.contenu > div p { text-align:center; font-size:1.6rem; }
	#slider div.contenu > a { text-align:center; display:block; width:auto; font-size:1.2rem; padding:0.3rem 0.5rem; margin:0 auto; }
	
	#bandeau-direct ul > li { max-width:50%; display:block; padding:0; margin:3rem auto; text-align:center; }

	#bandeau-partenaires ul.listepartenaires li { width:50%; display:inline-block; padding:0 5%; margin:3rem auto; text-align:center; }
	#bandeau-partenaires ul.listepartenaires.institutionnels li { width:50%; display:inline-block; padding:0 5%; margin:3rem auto; text-align:center; }
	#bandeau-partenaires ul.listepartenaires li img { filter:grayscale(0); opacity:1; }

	ul.listepartenaires li { width:50%; display:inline-block; padding:0 5%; margin:3rem auto; text-align:center; }
	ul.listepartenaires.institutionnels li { width:50%; display:inline-block; padding:0 5%; margin:3rem auto; text-align:center; }
	
	#bandeau-news .post, #page-news .post { float:none; width:100%; margin:0 0 1rem 0; min-height:auto; overflow-y:hidden; }	
	
	ul.trombinoscope li { width:100%; }
	ul.trombinoscope li.mono { width:100%; }
	ul.trombinoscope li.duo { width:100%; }
	ul.trombinoscope li.trio { width:100%; }
	ul.trombinoscope li.quatuor { width:100%; }
	ul.trombinoscope li.mini { width:50%; }

	div.equipes { width:100%; display:block; }
	div.equipes:last-child { margin-left:0; }

	iframe.calameo { height:50rem; }
	.ptcdechaine li { padding:0 5% 1rem 5%; width:50%; }

	#page-lacanau li { display:block; width:100%; height:auto; padding:0; margin:0 0 2rem 0; }
	#page-lacanau li div { position:relative; }
	#page-lacanau li img { min-width:100%; width:100%; max-height:none; height:auto; }

	ul.reportage li { display:block; width:100%; height:auto; padding:0; margin:0 0 2rem 0; }
	ul.reportage li div { position:relative; }
	ul.reportage li img { min-width:100%; width:100%; max-height:none; height:auto; }

	#page-evenements h1 { padding-left:0; }
	#listeevenements { height:60rem; }

	#page-trouvertournoi ul > li { max-width:100%; padding:0 10%; margin-bottom:5rem; }

	ul.formules li { width:100%; margin-left:0; margin-right:0; }
	ul.formules5 li { width:100%; margin-left:0; margin-right:0; }
	ul.formules4 li { width:100%; margin-left:0; margin-right:0; }
	ul.formules3 li { width:100%; margin-left:0; margin-right:0; }
	ul.formules2 li { width:100%; margin-left:0; margin-right:0; }

	#page-tournois li { width:80%; margin-left:10%; margin-right:10%; }

	#div-auth { width:100%; }
	
	/* Pour éviter un zoom sur l'iphone qd on clique sur un champ de saisie */
	@media screen and (-webkit-min-device-pixel-ratio:0) { 
		textarea,input,select { font-size: 16px !important; padding:0 5px !important; line-height:20px !important; }
		input,select { height:28px !important; }
	}

/* AFFICHAGE MINI */
@media (max-width:300px) { 
	body { overflow-x:scroll; }
	html { font-size:9px; }
	#en2mots { width:300px; }
	header { width:300px; position:relative; }
	main { width:300px; margin-top:0 !important; }
	footer { width:300px; }
}