/*
Theme Name: ccv #470ef0
Author: Adrazza
Author URI: http://curlingclubverbier.ch
Description: thème WordPress curling club verbier
Version: 1.0
*/
	/*-----------------------------------------------
		RESET
	-------------------------------------------------*/
	html, body, div, span, applet, object, iframe,
	input,h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, font, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td {
		border: 0;
		font-family: inherit;
		font-size: 100%;
		font-style: inherit;
		font-weight: inherit;
		list-style: none;
		margin: 0;
		padding: 0;
		outline: 0;
		vertical-align: baseline;
	}
	:focus {
		outline: 0;
	}
	article, aside, details, figcaption, figure,
	footer, header, hgroup, menu, nav, section {
		display: block;
	}
	/*-----------------------------------------------
		BASE
	-------------------------------------------------*/
	html,p,a,h1,h2,h3,h4,h5,h6,em,li,input{
		color:white;
		font-family: 'Lato', sans-serif;
		-webkit-font-smoothing: antialiased;
	}
	p,a,li,span{
		color:white;
		line-height:22px;
	}
	input{
		color:black;
	}
	h1,h2,h3,h4,h5,h6{
		letter-spacing:1px;
		font-weight:700;
		line-height:24px;
	}
	a,
	a:focus,
	a:hover,
	a:visited,
	a:active{
		cursor:pointer;
		outline:0;
		text-decoration:none;
	}
	a:hover{
		color:#4b90ef;
	}
	body{
		background: rgb(47, 50, 56);
		font-weight:normal;
		padding:0;
		margin:0;

	}
		p{
		font-size:40px;
		text-align:center;
		color:white;
		margin:0 auto;
		max-width:60%;
		min-width:320px;
		width:100%;
		line-height:40px;


	}
	ul{
		width:100%;
		margin:0 auto;
		color:white;
		text-align:center;
	}
	ul li{
		color:white;

	}
	a{
		text-align:center;
		color:white;
		margin:0 auto;
		text-decoration: none;
	/*	-moz-transition: color 0.5s;
		-webkit-transition: color 0.5s;
		-o-transition: color 0.5s; */
	}
	a:hover{
		color:#4b90ef;
		text-shadow:2px 2px black;


	}


	/*-----------------------------------------------
		LOGO
	-------------------------------------------------*/
	#branding{
		display:block;
		width:100%;
		height:100%;
		line-height:100px;
		overflow:hidden;
		}
	#branding h1{
		width:250px;
		float:left;
		font-family: 'Lato', sans-serif;
		font-size:20px;
		font-weight:900;
		height:200px;
		line-height:100px;
		margin:0 0 0 60px;
		padding:0;
		letter-spacing:2px;
		text-shadow:2px 2px black;
	/*	text-transform: uppercase; */
				}

	#branding h1 a{
		color: #470ef0;
		}

	.logo{
		float:left;
		width:80px;
		margin-top:10px;
		margin-left:10px;
		}

	/*-----------------------------------------------
		NAVIGATION
	-------------------------------------------------*/

	#branding .navigation{
		display:block;
		/*float:right;*/
		margin-top:45px;
		padding:0 60px 0 0;
		width:auto;

	}
	#branding .navigation li{
		display: inline-block;

	}

	#branding .navigation a,
	#branding .navigation a:hover{
		font-size:13px;
		font-weight:600;
		display:block;
		color:white;
		text-transform:uppercase;
		float:left;
		width:auto;
		margin-left:20px;
		letter-spacing:2px;
		height: 40px;
	}


	#branding .navigation a:hover,
	.current{
		color:white;
		border-top: 4px solid #470ef0;
		margin-top:-4px;
		text-shadow: none;

	}
		.mobilier{

		display:none;
	}

	/*-----------------------------------------------
			TITRES
	-------------------------------------------------*/
	#title{
		max-width:100%;
		margin:none;
		position:relative;
	    background:#191919;
		width:100%;
		height:420px;
		overflow:hidden;
		margin-bottom:30px;
	}
	#title img{
		display:block;
		width:100%;
	 	position:relative;
		top:-130px;
		box-shadow : none;
		border:none;
		opacity:.7;


	}
	#title h2{
		font-size:60px;
		line-height:60px;
		letter-spacing:5px;
		margin:0 0;
	 	color:#fff;
	 	text-align:center;
		position:absolute;
		top:140px;
		max-width:400px;
		left:50%;
		margin-left:-100px;
		font-weight:600;
		font-style:italic;
	}




	.historique{
			font-size:19px;
			margin:30px auto 30px auto;
			color:white;
			line-height:30px;

	}

    .title_historique{
    	font-size:25px;
    	margin-top:20px;

    }

 		/*-----------------------------------------------
					WEBCAM
	-------------------------------------------------*/

	#webcam h2{
		text-align:center;
		width:100%;
		padding-top:10px;
		padding-bottom:0;
		line-height:20px;
		font-size:20px;
		color:#0086B2;
	}
	#webcam ul{
		width:40%;
		margin:25px auto;
		text-align:center;
	}
	#webcam ul li{
		float:left;
		width:33%;
		list-style:none;
	}
	#webcam ul li a{
		font-size:15px;
		color:#333;
		font-weight:500;
	}
 	#webcam ul li a:hover{
	  	color:#e74c3c;
	}
	#webcam p{
		font-size:19px;
		margin:30px auto 30px auto;
		color:#333;
		line-height:30px;
	}
	hr {
   	 display: block;
   	 clear: both;
   	 height: 0;
   	 margin: 40px 0 80px;
   	 padding: 0;
   	 border: 0;
   	 text-align: center;
   	 font-size: 25px;
   	 line-height: 1;
	}
	hr:after {
   	 content: "\273D \273D \273D";
   	 height: 0;
   	 letter-spacing: 1em;
   	 color: #aaa;
	}

	form{
		font-size:20px;
		text-align:left;
		width:90%;
		margin-top:90px;
		margin-bottom:90px;
	}

/*-----------------------------------------------
       INPUTS
-------------------------------------------------*/

/* Supprimer les flèches dans Chrome, Safari, Edge */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none !important;
	margin: 0;
}

/* Supprimer les flèches dans Firefox */
input[type="number"] {
	-moz-appearance: textfield !important;
	appearance: textfield !important;
}


/* Inputs texte, textarea et select */
input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
textarea,
select {
	background-color:  rgb(47, 50, 56);
	color: white;
	border-radius: 4px;
	border: 2px solid #555;
	padding: 0.2em;
	font-family: inherit;
	font-size: 1em;
	outline: none;
	appearance: none; /* enlève le style natif (sauf flèche sur certains navigateurs) */
}

/* Ajout optionnel pour select : flèche custom si besoin (ici on garde la native) */
select {
	background-color: rgb(47, 50, 56);
	color: white;
	border-radius: 4px;
	border: 1px solid #555;
	padding: 0.2em 2.5em 0.2em 0.2em;
	margin-top: 5px;
	font-family: inherit;
	font-size: 0.9em;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path fill='%23FFFFFF' d='M7 9c.5 0 1 .2 1.4.6L12 13.2l3.6-3.6a2 2 0 1 1 2.8 2.8l-5 5a2 2 0 0 1-2.8 0l-5-5a2 2 0 0 1 1.4-3.4Z'/></svg>");
	background-repeat: no-repeat;
	background-position: right 0.8em center;
	background-size: 1.1em;
	cursor: pointer;
	outline: none;
}

input:disabled, textarea:disabled, select:disabled {
	background-color: #222 !important;     /* plus foncé que le select actif */
	color: #777 !important;                 /* texte grisé */
	border-color: #444 !important;         /* bordure adoucie */
	cursor: not-allowed;                      /* curseur explicite */
	opacity: 1;                               /* éviter l’opacité réduite automatique */
}

option{
	cursor: pointer;
}

/* Supprime effet focus */
select:focus {
	outline: none;
	box-shadow: none;
}

/* Checkbox et radio personnalisés */
input[type="checkbox"],
input[type="radio"] {
	appearance: none;
	background-color: rgb(117, 118, 136);
	border: 2px solid #555;
	width: 1em;
	height: 1em;
	border-radius: 4px; /* arrondi pour les deux */
	display: inline-block;
	position: relative;
	cursor: pointer;
}

input[type="checkbox"]:checked{
	border-color: #4CAF50;
}

input[type="radio"]:checked{
	border-color: #4CAF50;
	border-width: 1px;
}

input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><polyline points='2,7 5,10 12,3' style='fill:none;stroke:%234CAF50;stroke-width:2'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 80%;
}

/* Style quand activé */
input[type="radio"]:checked::after {
	content: '';
	width: 0.5em;
	height: 0.5em;
	background-color: #4CAF50;
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: auto;
	inset: 0; /* centre via top/right/bottom/left */
}

/* Forme ronde pour les radios */
input[type="radio"] {
	border-radius: 50%;
}


input[type='submit'], input[type='reset']{
	background: rgb(47, 50, 56);
	cursor:pointer;
	text-shadow:none;
	color:white;
	font-size:20px;
	margin:10px;
	padding:12px;
	border:3px dashed #1362ce;
	border-radius:30px;
	line-height:25px;
	display:inline-block;
}



/*-----------------------------------------------
       LEGACY
-------------------------------------------------*/

.form{
	font-size:20px;
	text-align:left;
	width:90%;
	margin-top:90px;
	margin-bottom:90px;

}
.form a {
	color: #470ef0;
	text-shadow:2px 2px black;

	}
.form a:hover {
	color:white;
	-moz-transition: color 1s;
	-webkit-transition: color 1s;
	-o-transition: color 1s;
	text-shadow: none;
	}

.text{
	color:rgb(47, 50, 56);
	border-radius:4px 4px 4px 4px;
}

label{
	border:none;
	display:block;
}

/*-----------------------------------------------
					FOOTER
	-------------------------------------------------*/
	#disclaimer{
		background:rgb(47, 50, 56);
		margin:0;
		padding:0;
		height:100%;



	}
	.line{
		border-top:1px solid #470ef0;
		width:80%;


	}
	#disclaimer > p{
		color:gray;
	    font-size:12px;

	    margin:0px auto 0px auto;
	    text-align:center;
	    line-height:40px;
	    padding-bottom:20px;

	}
	#disclaimer > p > a{
		color:white;
	    font-size:12px;

	    margin:0px auto 0px auto;
	    text-align:center;
	    line-height:40px;
	    padding-bottom:20px;

	}
	#disclaimer  p > a:hover{

		color:gray;
	}
	#disclaimer ul li{
			color:gray;




	}
	#liens {
    	padding-top: 30px;

	}


	#liens ul{
		margin-top:10px;
		padding-top:10px;
		postion:relative;

	}

	#liens ul li{
		list-style:none;
		text-align:center;
		color:gray;
		font-size:16px;

	}

	#liens a{

		margin-right:5px;


	}
	#liens a:hover{

		margin-right:5px;
		color:gray;
		text-shadow:none;

	}


	#liens > p{
		font-size:16px;
		text-align:center;

	}

	.liens{
		position:relative;
	}

		/*------------------------------------------
			MOBILE 480
	 --------------------------------------------*/

   @media (min-width: 1200px) {


	#branding h1{
		width:400px;
		float:left;
		font-family: 'Lato', sans-serif;
		font-size:35px;
		font-weight:900;
		height:200px;
		line-height:100px;
		margin:0 0 0 60px;
		padding:0;
		letter-spacing:2px;

				}
	 }


	 @media (min-width: 1000px) {


	#branding h1{
		width:350px;
		float:left;
		font-family: 'Lato', sans-serif;
		font-size:30px;
		font-weight:900;
		height:200px;
		line-height:100px;
		margin:0 0 0 60px;
		padding:0;
		letter-spacing:2px;

				}
	 }
	@media (min-width: 1180px) {
	 	 	#title img{
			top:-270px;

		}
}
	 @media (max-width: 1180px) {
	 	 	#title img{
			top:-270px

		}
			 }
	@media (max-width: 900px) {
	 	 	#title img{
			top:0px

		}
			 }
	 @media (max-width: 480px) {
		 #branding h1 {
			 width: 100%;
			 float: none;
			 font-size: 20px;
			 height: 40px;
			 line-height: 60px;
			 margin: 0;
			 text-align: center;
		 }

		 /*------------------------------------------
         MOBILE 480 > TITRE
      --------------------------------------------*/
		 #title {
			 height: 200px;
		 }

		 #title img {
			 top: 0px;
			 height: 100%;
		 }

		 #title h2 {
			 font-size: 30px;
			 line-height: 30px;
			 top: 60px;
			 max-width: 240px;
			 margin-left: -65px;
		 }

		 #title h3 {
			 font-size: 30px;
			 line-height: 30px;
			 letter-spacing: 2px;
			 margin: 0 0;
			 color: #fff;
			 text-align: center;
			 position: relativ;
			 top: 90px;
			 max-width: 400px;
			 left: 50%;
			 margin-left: -160px;
			 font-weight: 600;
			 font-style: italic;
		 }


		 /*------------------------------------------
         MOBILE 480 > WEBCAM
      --------------------------------------------*/
		 #webcam ul {
			 width: 90%;
			 margin: 25px auto;
		 }

		 #webcam ul li {
			 float: left;
			 width: 33%;
			 list-style: none;
			 text-align: center;
		 }

		 #webcam ul li a {
			 font-size: 12px;
			 color: #333;
			 font-weight: 500;
		 }

		 .itineraire {
			 color: #333;
			 font-size: 12px;
			 font-style: italic;
			 padding: 0 10px 0 10px;
		 }

		 #webcam h2 {
			 text-align: center;
			 width: 100%;
			 padding-top: 10px;
			 padding-bottom: 0;
			 line-height: 20px;
			 font-size: 18px;
			 color: #0086B2;
		 }

		 /*------------------------------------------
         MOBILE 480 > GALERIE PHOTOS + INSTALLATIONS
      --------------------------------------------*/
		 #branding {
			 display: block;
			 width: 100%;
			 height: 100%;
			 line-height: 40px;
			 overflow: hidden;
		 }


		 #branding .navigation a,
		 #branding .navigation a:hover {
			 font-size: 12px;
			 font-weight: 600;
			 display: block;
			 color: white;
			 text-transform: uppercase;
			 padding: 0;
			 float: left;
			 width: auto;
			 margin-left: 20px;
			 letter-spacing: 1px;

		 }


		 img {


			 width: 250px;
			 margin: 20px auto20px auto;
		 }

		 #galerie {
			 list-style: none;
			 display: block;
			 text-align: center;
			 width: 250px;
			 margin: 50px auto 50px auto;
		 }

		 .historique {
			 font-size: 13px;
			 margin: 13px auto 13px auto;
			 color: white;

		 }

		 p {
			 font-size: 25px
		 }

		 .title_historique {
			 font-size: 17px;
			 margin-top: 10px;

		 }
	 }