/* jouravek - jaune = #ffd552 - bleu = #000099 */

@font-face {
  font-family: Protest-rev;
  src: url(protest_revolution.ttf);
}

/* ◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘ STRUCTURE ◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘ */

body {
	/*width: 100%; /* ? */
	margin: 0 0 30px 0;
	font-family: 'Montserrat',Verdana,sans-serif;
  font-weight: 300;
	/*font-size: 18px; ►adapt*/
	/*text-align: justify;*/
	/*line-height: 1.5em; ►adapt*/
	background-repeat: repeat-y;
	background-attachment: fixed;
	color: #494742;
	background-color: white; /*#f7f2e2;*/
}

main {
	min-width: 300px;
	max-width: 1200px;
	margin-top: 30px;
	margin-right: auto;
	/*margin-left: 270px; ►adapt*/
	/*margin-left: auto; ►adapt*/
	/*padding-right: 5%; ►adapt*/
}

header {
	/*position: fixed;*/
	/*width : 100%;*/
	text-align: center;
	background: #FFD552;
	background: linear-gradient(90deg, #ffd552 0%, #ffd552 55%, #000099 55%, #000099 100%);
}

#img-coin {
	position: fixed;
	top: 0;
	left: 0;
	/*float: left;*/
	width : 100px;
	/*height : 50%;*/
	margin: 17px 0 0 38px;
}

#img-entete {
	height : 97px;
	vertical-align: middle;
	margin-left: 256px;
}

#img-entete_m {
	height : 97px;
	vertical-align: middle;
	/*margin-left: 20px;*/
}

footer {
	color: #4e5d56;
}

#valid {
	margin-left: 15px;
	text-align: left;
}

#contacts {
	text-align: center;
}


/* =( 1 )========== ORDI / TABLETTE-en-paysage =========== */
@media screen and (min-width: 1024px) {
	
	body {
		font-size: 18px;
		text-align: justify;
		line-height: 1.5em;
		background-image: url(../_deco/fond.png); /**/
	}

	main {
		margin-right: auto;
		margin-left: auto;
		padding-right: 15px;
		padding-left: 270px;
	}
  
	footer {
		font-size: 0.8em;
	}

	#contacts {
		margin-right: auto;
		margin-left: auto;
		padding-right: 15px;
		padding-left: 270px;
	}
}

/* =( 2 )========== MOBILE / TABLETTE-en-portrait (commun) =========== */
@media screen and (max-width: 1023px) {
	
	/*► trucs "habituels" communs ◄*/
	/* nécessaire notamment pour un menu OK */
	* {
      box-sizing: border-box;
    }

	/* passer body (et tous les éléments de largeur fixe) en largeur automatique ► trucs "habituels" communs ◄*/
	body {
		margin: 0;
		padding: 0;
		width: auto;
	}
	body {
		position: relative;
		font-size: 18px;
		text-align: left;
		line-height: 1.8em;
	}
	
	main {
		margin-bottom: 80px;
		margin-left: auto;
		padding-right: 5%;
		padding-left: 5%;
	}
	
	footer {
		font-size: 12px;
	}
}

/* =( 3 )====== Hack CSS : alternative pour IE(9-11) → bon positionnement footer ======= */ /* ? */

@media screen and (min-width:0\0.1px) {
	body {
		display : block; /* remplace table; */
		width: auto; /* remplace 100% */
		margin-top: 0;
		margin-right: 0;
	}
      
	main {
		display: block; /* nouveau */
	}
      
	footer {
		display : block; /* remplace table-row*/
	}
}







/* ◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘ SPÉCIAL ◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘ */

/* apparence du bouton CookieYes (forme) */
.cky-btn-revisit-wrapper {
	width: 34px !important;
	height: 34px !important;
	border-style: solid;
	border-width: 2px;
	border-radius: 50%;
}
.cky-btn-revisit-wrapper:hover {
	transition: all .2s ease-in;
}
.cky-btn-revisit { /* à cause de button */
	border-style: solid !important;
	border-width: 2px !important;
	border-radius: 50%;
}

/* apparence du bouton CookieYes (couleurs) */
.cky-btn-revisit-wrapper {
	border-color: #DCD7C8;
	box-shadow: 1px 1px 2px 0 #756448;
	opacity: 0.6;
	background-color: #DCD7C8 !important;
}
.cky-btn-revisit-wrapper:hover {
	border-color: #bfc66a !important;
	opacity: 0.7;
	background-color: #bfc66a !important;
}
.cky-btn-revisit { /* à cause de button */
	border-color: #DCD7C8 !important;
}
.cky-btn-revisit:hover { /* à cause de button */
	border-color: #bfc66a !important;
	box-shadow: none;
}


/* =( 1 )========== ORDI / TABLETTE-en-paysage =========== */
@media screen and (min-width: 1024px) {
	
	/* masquer les éléments superflus */
	.cach_ordi {
		display: none !important;
	}
}

/* =( 2 )========== MOBILE / TABLETTE-en-portrait (commun) =========== */
@media screen and (max-width: 1023px) {
	
	/* masquer les éléments superflus */
	.cach_mobile {
		display: none !important;
	}
}







/* ◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘ MENU ◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘ */

#logo-nav a {
	display: block;
	margin-top: 0;
	width: 200px;
	height: 97px;
	text-decoration: none;
	text-align: center;
	background-image: url(../_deco/nav/plaf_couliss.png);
	background-repeat: no-repeat;
	/*background: #FFD552;
	background: linear-gradient(90deg, rgba(255, 213, 82, 1) 0%, rgba(255, 213, 82, 1) 50%, rgba(0, 0, 153, 1) 50%, rgba(0, 0, 153, 1) 100%);*/
}

#logo-nav a:hover,
#logo-nav a:focus,
#logo-nav a:active {
	text-decoration: none;
	background-image: url(../_deco/nav/plaf_couliss.png);
	background-position: right top;
	background-repeat: no-repeat;
}

/* =( 1 )========== ORDI / TABLETTE-en-paysage =========== */
@media screen and (min-width: 1024px) {
	
	#volet {
		display: none;
	}
/*♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣*/	
	nav {
		visibility: visible;
		position: fixed;
		float: left;
		margin-top: -30px;
		/*margin-left: 0;*/
		width: 200px;
		font-size: 16px; /**/
		text-align: left;
		/*line-height: 1.3em;*/
	}
	
	#logo-nav,
	#logo-nav a {
		background-color: transparent;
	}
	#logo-nav-m {
		display: none;
	}
	
	.a_couliss {
		display: block;
		padding: 0;
		width: 120px; /*150px;*/
		height: 30px;  /**/
		text-align: center;
		line-height: 1.2em; /**/
		background-repeat: no-repeat;
		background-color: transparent;
		/*background-image: url(../_deco/nav/a_couliss.png); /**/
	}
	.a_couliss:hover,
	.a_couliss:focus,
	.a_couliss:active {
		background-position: right top;
		background-repeat: no-repeat;
		color: #375b03;
		background-color: transparent;
		background-image: url(../_deco/nav/a_couliss.png);
	}

	/*.a_menuli {
		background-color: transparent;
	}

	.a_menuli:hover {
		background-color: transparent;
	}*/
}

/* =( 2 )========== MOBILE / TABLETTE-en-portrait (commun) =========== */
@media screen and (max-width: 1023px) {
	
	#menu {
		display: none;
	}
	
	#logo-nav a {
		margin: 0 0 -30px 0;
	}

	/* menu coulissant */
	#volet {
		position: fixed;
			left: -220px;  /* opposé du width ▼ */
			top: 97px;     /*  ▼▼  */
		z-index: 1;
		padding: 10px;
		width: 220px;
		border-radius: 0 0 7px 0;
		/*box-shadow: 1px 1px 1px 0 #666666; /* ? */
		opacity: 0.95;
		transition: all .4s ease-in;
		text-align: left;
		/*font-size: 1.05em; /* ? */
		line-height: 1.7em;
		color: #000099; /*#cddc50; /* => couleurs des puces du menu, =couleur2 */
		background: #ffd552;; /*#bfc76a;*/
	}
	#volet a.ouvrir,
	#volet a.fermer {
		position: absolute;
		  right: -30px; /* opposé du width ▼ */
		  top: 0;
		padding: 8px;
		width: 30px;
		border-radius: 0 8px 8px 0;
		/*box-shadow: 1px 1px 1px 0 #666666; /* ? */
		opacity: 0.8;
		font-style: normal;
		font-size: 12px;
		text-decoration: none;
		text-align: center;
		line-height: 1.1em;
		color: white;
		background: #000099; /*#79742e;*/
	}
	#volet a.fermer {
		display: none;
	}
	#volet:target {
		top: 97px;
		left: 0;
	}

	/* code fermeture*/
	#volet_clos:target #volet {
		top: -145px;    /*  ▼▼  */
	}
	#volet:target a.ouvrir {
		display: none;
	}
	#volet:target a.fermer {
		display: block;
	}

	#logo-nav,
	#logo-nav a {
		background-color: #ffd552; /*#cad37d;*/
	}	

}

/* =( 2a )========== MOBILE-en-portrait / TABLETTE-en-portrait : menu coulissant normal =========== */
@media screen and (max-width: 1023px) and (orientation : portrait) {

	/*menu coulissant normal*/
	#volet {
		font-size: 16px;
		line-height: 1.7em;
	}
	
	.menu_compact {
		display: none;
	}
}

/* =( 2b )========== MOBILE-en-paysage : menu coulissant compact =========== */
  @media screen and (max-width: 1023px) and (orientation : landscape) {
	
	/*menu coulissant compact*/
	#volet {
		/*padding: 2px; /* ? */
		font-size: 10px;
		line-height: 1.2em;
	}
	
	.menu_normal {
		display: none;
	}
}







/* ◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘ SECTIONS ◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘ */

.container {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
}

.element {
	min-width: 30%;
	max-width: 500px;
	text-align: center;
}


/* =( 1 )========== ORDI / TABLETTE-en-paysage ===========*/
/*@media screen and (min-width: 1024px) {
}*/

/* =( 2 )========== MOBILE / TABLETTE-en-portrait (commun) ===========*/
@media screen and (max-width: 1023px) {
	section {
		display:block;
		width: 90%;
		text-align: center;
	}

	.element {
		margin-right: 5%;
		margin-left: 5%;
		max-width: 90%;
		text-align: center;
	}
}







/* ◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘ TITRES ET PARAGRAPHES ◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘ */

h1 {
	padding-top: 15px;
	padding-bottom: 5px;
	font-family: Protest-rev, serif;
	/*text-transform: uppercase;*/
	text-align: center;
	/*font-size: 2.5em; ►adapt*/
	line-height: 1.2em;
	color: #000099; /*#797f94;*/
}

h2 {
	margin-top: 80px;
	padding : 0px 5px 15px 15px;
	font-family:'Montserrat',Verdana,sans-serif;
  font-weight: 800;
	font-size: 1.5em;
	text-align: left;
	/*color: #000099; /*#494742;*/
	background: #ffd552; /*#ffe48f; *jaune clair*/
	border-radius: 5px 20px;
}
h2 sup {
	font-size: 0.8em;
	line-height: .8em;
}

h3 {
	margin-top: 50px;
  font-weight: 600;
	font-size: 1.1em;
	font-style: italic;
	text-align: left;
	color: #b5c145;
}

h4 {
	margin-top: 30px;
  font-weight: 600;
	text-align: left;
	color: #706d53;
}

.sous-h {
  font-weight: 500;
	font-size: 70%;
}

/* =( 1 )========== ORDI / TABLETTE-en-paysage =========== */
@media screen and (min-width: 1024px) {
	
	h1 {
		font-size: 2.8em;
	}

	h2 {
	}
}

/* =( 2 )========== MOBILE / TABLETTE-en-portrait (commun) =========== */
@media screen and (max-width: 1023px) {
	
	h1 {
		font-size: 2.2em;
	}

	h2 {
	}
	
	/* gestion des mots longs ► trucs "habituels" communs ◄*/
	p {
		word-wrap: break-word; /* passage à la ligne forcé */
		hyphens: auto;         /* césure propre */
		/*-webkit-hyphens: auto; /* pas W3C */
		/*-moz-hyphens: auto;    /* pas W3C */
	}
}







/* ◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘ LIENS ◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘ */

a {
  font-weight: 500;
	font-style: italic;
	text-decoration: none;
	outline: none; /* pour firefox */
	color: black;
	background-color: #e9e4d4;
}

a:hover {
	color: #000099; /*#494742;*/
	background-color: #ffd552;
}

.a_img { /* obsolète ? */
	background-color: transparent !important;     /* à appliquer sur la balise <a> */
}

img a {
	background-color: transparent !important;     /* à appliquer sur la balise <a> ? */
}

nav a {
	background-color: transparent;
	color: #454592;
}

nav a:hover {
	text-decoration: none;
	color: #494742;
	background-color: white;
}

.a_cach {
	display:none;
}

.a_cach:hover {
	border-style: none;
	text-decoration: underline overline;
	background-color: transparent;
	color: #3366ff;
}


/* =( 1 )========== ORDI / TABLETTE-en-paysage ===========
@media screen and (min-width: 1024px) {
}*/

/* =( 2 )========== MOBILE / TABLETTE-en-portrait (commun) ===========
@media screen and (max-width: 1023px) {
}*/







/* ◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘ CARACTÈRES ◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘ */

b {
  font-weight: 600;
}

strong {
  font-weight: 500;
}

.droit {
	font-style: normal;
}

.couleur {
	font-weight: 600;
	color: #bf0b01; /* rouge */
}

.couleur2 {
	font-weight: 500;
	color: #000099; /*bleu #cddc50; /* vert */
}

.remarque {
	font-size: 0.9em;
	color: #8b9438;
}


/* =( 1 )========== ORDI / TABLETTE-en-paysage ===========*/
/*@media screen and (min-width: 1024px) {
}*/

/* =( 2 )========== MOBILE / TABLETTE-en-portrait (commun) =========== */
/*@media screen and (max-width: 1023px) {
}*/







/* ◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘ BORDURES ET CADRES ◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘ */

hr {
	color: #cedc4f
}

.cadre_relief {
	/*margin: 2em 0 2em 5%;  ►adapt*/
	/*padding: 0.7em 5% 0.6em 7%  ►adapt*/
	border-style: solid;
	border-width: 1px 1px 1px 2px;
	border-radius: 20px;
	border-color: white #b1ada0 #b1ada0 white;
	box-shadow: 1px 1px 2px 0px #756448;
}

.en_avant {
	margin-left: 5%;
	padding: 0.6em 5% 0.6em 7%;
	border-style: solid;
	border-width: 1px 1px 1px 2px;
	border-radius: 20px;
  font-weight: 500;
	font-style: italic;
	font-size: 1.1em;
	text-align: justify;
	line-height: 1.4em;
	border-color: white #b1ada0 #b1ada0 white;
	box-shadow: 1px 1px 2px 0px #756448;
	background-color: #f6f4ec;
}


/* =( 1 )========== ORDI / TABLETTE-en-paysage ===========*/
@media screen and (min-width: 1024px) {
	.cadre_relief {
		margin: 2em 0 2em 5%;
		padding: 0.7em 5% 0.6em 7%
	}
}

/* =( 2 )========== MOBILE / TABLETTE-en-portrait (commun) ===========*/
@media screen and (max-width: 1023px) {
	
	.cadre_relief {
		margin: 2em 0 2em 2%;
		padding: 0.7em 3% 0.6em 2%;
		/*text-align: left; –supprimé pour navigation interne photos samanches */
	}
}







/* ◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘ MULTIMEDIA ◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘ */

img {     /* pour photos à hauteur fixée ► pb anamorphose */
	/*  display: block;   pas bon pour centrage dans div parent */
	margin: 0 auto;
	max-width: 100%;
}

.img_milieu {
	vertical-align: middle;
	margin-right: 15px;
}

.img_gauche {
    float: left;
    margin-right: 15px;
}

.img_droite {
    float: right;
    margin-left: 15px;
}

.plein_ecran {
	position: absolute;
		top: 0;
		left: 0;
	width : 100%;
	height : 100%;
}

.nav_video {
  margin-top: -1px; /*-15px;*/
  font-size: 0.6em;
  text-align: right;
}

#lecteur_audio {
	visibility: visible;
	position: fixed;
		bottom: 0;
		left: 0;
	text-align: left;
}


/* =( 1 )========== ORDI / TABLETTE-en-paysage ===========
@media screen and (min-width: 1024px) {
}*/

/* =( 1a )========== ORDI / GRANDE TABLETTE-en-paysage =========== */
@media screen and (min-width: 1160px) {
	
	iframe,
	video {
		width: 853px;
		height: 480px;
	}
}

/* =( 1b )========== PETITE TABLETTE-en-paysage =========== */
@media screen and (min-width: 1024px) and (max-width: 1159px) {
	
	iframe,
	video {
		width: 731px;
		height: 411px;
	}
}

/* =( 2 )========== MOBILE / TABLETTE-en-portrait (commun) =========== */
@media screen and (max-width: 1023px) {
	
	/* fixer une largeur maximale de 100% aux éléments potentiellement problématiques ► trucs "habituels" communs ◄*/
	img,
	object,
	embed,
	video {
		max-width: 100%;
	}
	
	/* conserver le ratio des images et des vidéos ► trucs "habituels" communs ◄*/
	img {
		height: auto;
	}
	video {
		height: auto;
	}
	.audio-liste {
		margin-left: -20px;
	}
	
	/* cas des vidéos dans des iframe (Youtube, facebook…) ► trucs "habituels" communs ◄*/
	.video-container {
		position: relative;
		padding-top: 0;
		padding-bottom: 56.25%;
		height: 0;
		overflow: hidden;
	}
	.video-container iframe,
	.video-container object,   /* pour IE */
	.video-container embed {   /* pour IE */
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
	.w3c-logo {
		width: 12%;
		height: 12%;
		max-width: 88px;
		max-height: 31px;
	}
}







/* ◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘ LISTES ET TABLEAUX ◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘ */

tr:nth-child(even) { /*ligne paire*/
	background: #fffcf3;
}

tr:nth-child(odd) { /*ligne impaire*/
	background: white;
}
/*♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣*/
nav ul,
nav ul li {
	margin-top: -3px;
	background-color: transparent;
}

ul li {
	/*margin-bottom: 2px;?*/
	/*list-style-image: url(../_deco/puce.png); ►adapt*/
	list-style-position: outside;
}

table {
	border-collapse: collapse;
}

th, td {
	padding: 10px;
}

/*♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣*/
/* =( 1 )========== ORDI / TABLETTE-en-paysage =========== */
@media screen and (min-width: 1024px) {
	
	nav ul li {
		padding-left: 15px;  /*♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦*/
		margin-bottom: 2px;
		list-style-image: url(../_deco/puce.png);
	}
}

/* =( 2 )========== MOBILE / TABLETTE-en-portrait (commun) =========== */
@media screen and (max-width: 1023px) {
	
	ul {
		/*padding-left: 15px; /* par défaut = 40*/ /* ► inconvénient pour liste dans un cadre */ /* ? */
		margin-left: 1em;  /*♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦*/
		padding-left: 0;  /*♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦*/
		text-align: left;
	}
	ul li {
		list-style: none;
	}
	ul li:before {
		content: "●";
		float: left;
		margin-left: -1.5em;  /*♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦*/
		font-size: 13px;
	}
	nav ul,
	nav ul li {
		margin-left: 15px; /*♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦*/
	}
	
	nav ul li:before {
		content: "●";
		float: left;
		margin-left: -1.5em;  /*♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦*/
		font-size: 13px;
		color: white;
	}

	/* fixer une largeur maximale de 100% aux éléments potentiellement problématiques ► trucs "habituels" communs ◄*/
	table,
	td {
		max-width: 100%;
	}	
	/* gestion des mots longs ► trucs "habituels" communs ◄*/
	table,
	td,
	th {
		word-wrap: break-word; /* passage à la ligne forcé */
		hyphens: auto;         /* césure propre */
		/*-webkit-hyphens: auto; /* pas W3C */
		/*-moz-hyphens: auto;    /* pas W3C */
	}
	td {
		vertical-align : top;
	}
}







/* ◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘ FORMULAIRE ◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘ */

fieldset {
	border: none;
}

.entree {
	margin-top: 8px;
	padding-top: 5px;
	padding-bottom: 5px;
	border: 0;
	border-radius: 3px;    /* = rayon défini par google */
	line-height: 1.3em;
	box-shadow: inset 2px 2px 2px 0px gray;
	color: #443C28;
	background-color: white;
}

#label_message {    /* à la manière de h2 (→ fieldset h2) */
	display: block;  /* nécessaire */
	padding : 5px 5px 33.5px 15px; /* padding bottom réduit de 1.5px pour égaler h2 */
	border-style: solid;
	border-width: 1px 1px 1px 2px;
	border-radius: 5px;
  font-weight: 800;
	font-size: 1.5em;
	text-align: left;
	border-color: white #b1ada0 #b1ada0 white;
	box-shadow: 1px 1px 2px 0px #756448;
	color: #494742;
	background: rgba(0, 0, 0, 0) linear-gradient(to right, #f0ebdb, #dcd7c8) repeat scroll 0% 0%;
}

button {
  padding: 5px;
  border: none;
  /*border-style: solid; =button par défaut */
  /*border-width:2px; =button par défaut */
  border-radius: 10px;
  transition-duration: 0.2s;
  font-family: 'Montserrat',verdana,sans-serif;
}

#valider {
	width: 200px;
	height: 50px;
  font-weight: 600;
	font-size: 1.3em;
	letter-spacing: 1px;
}

#effacer {
	height: 30px;
	font-size: 0.9em;
}
	

/* =( 1 )========== ORDI / TABLETTE-en-paysage =========== */
@media screen and (min-width: 1024px) {
	
	input, select, textarea {
		margin-left: 3%;
	}
  
	.entree {
		padding-left: 6px;
		font-family: Trebuchet,Roboto,Arial,sans-serif;
		font-weight: 300;
		font-size: 1.2em;
	}

	#label_message {
		margin: 80px -15px 0 -15px; /* marges droite/gauche à -15px = 0 ←→ main */
	}
}

/* =( 2 )========== MOBILE / TABLETTE-en-portrait (commun) =========== */
@media screen and (max-width: 1023px) {
	
	/* fixer une largeur maximale de 100% aux éléments potentiellement problématiques ► trucs "habituels" communs ◄*/
	textarea,
	input {
		max-width: 100%;
	}
	
	/* gestion des mots longs ► trucs "habituels" communs ◄*/
	textarea {
		word-wrap: break-word; /* passage à la ligne forcé */
		hyphens: auto;         /* césure propre */
		/*-webkit-hyphens: auto; /* pas W3C */
		/*-moz-hyphens: auto;    /* pas W3C */
	}
	
	fieldset {
		margin-right: 0;
		margin-left: 0;
		padding-right: 0;
		padding-left: 0;
	}
	
	.entree {
	}
}

/* =( 2c )============ grand-MOBILE ============= */
@media screen and (min-width: 500px) and (max-width: 1023px) {
	
	input, select, textarea {
		margin-left: 3%;
	}
	.entree {
		padding-left: 6px;
		font-family: "Roboto Condensed",Roboto,Arial,sans-serif;
		font-weight: 300;
		font-size: 1.1em;
	}
	#label_message {
		margin: 80px -15px 0 -15px; /* marges droite/gauche à -15px = 0 ←→ main */
	}
}

/* =( 2d )============ moyen-MOBILE ============= */
@media screen and (min-width: 400px) and (max-width: 499px) {
	
	input, select, textarea {
		margin-left: 0;
	}
	.entree {
		padding-left: 4px;
		font-family: "Roboto Condensed",Roboto,sans-serif;
	  font-weight: 300;
		font-size: 1em;
	}
	#label_message {
		margin: 80px -15px 0 -15px; /* marges droite/gauche à -15px = 0 ←→ main */
	}
}

/* =( 2e )============ petit-MOBILE ============= */
@media screen and (max-width: 399px) {
	
	input, select, textarea {
		margin-left: -10px;
	}
	
	.entree {
		padding-left: 3px;
		font-family: "Roboto Condensed",Roboto,sans-serif;
	  font-weight: 300;
		font-size: 0.9em;
	}
	
	#label_message {
		margin: 80px 0 0 -15px; /* marges gauche à -15px = 0 ←→ main */
	}
}

/* ◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘ FIN ◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘ */