/* Layout */

* {
	box-sizing:border-box;
	/*test*//*position:relative;
	z-index:-1;*/
}

html{
	height:100%;
}

body{
	font-family:"Segoe UI", Arial, sans-serif;
	overflow-y:scroll;		/* force la présence d'une scrollbar ; évite des décalages agaçants du contenu quand on passe d'une page avec scrollbar à une page sans et vice-versa */
	min-width:320px;
	max-width:1366px;
	margin:auto;
	display:flex;
	flex-direction:column;
	min-height:100%;
	background-color:#D6E8E6;
	background-image:url("/images/fondred.png");
	background-size:cover;
	text-align:justify;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {		/* IE 10+ */
   body{
		 display:block;		/* IE a du mal avec les flex */
		 height:100%;
	 }
	 #contenu{
		 min-height:100%;
	 }
	.annonce a.lien-une-annonce{
		display:block!important;
	}
	.annonce a.lien-une-annonce .corps-annonce{
		display:block!important;
	}
	#liste-annonces .liste-annonces .annonce{
		display:block!important;
	}
	/*
	#zone-logo-user{
		display:block!important;
		flex:0 1 auto!important;
	}
	#cadre-utilisateur{
		flex:0 1 auto;
	}
	*/
}


#page{
	min-height:100%;
	background:black;
}

#contenu{
}


#contenu{
	display:flex;
	flex:1;
	flex-wrap:wrap;
	background:white;
	/*background-color:lightgoldenrodyellow;*/
	justify-content:space-between;
}

#contenu > *{
	flex:1;
	margin:4px;
}



#col-gauche{
	flex-basis:640px;
	flex-grow:7;
	/*max-width:80%;*/
	overflow:hidden;
	margin-top:0;
}
#contenu-col-gauche{
	margin/*padding*/:10px 0 0 4px;
	padding-left:8px;
	padding-right:18px;
}
#fonctionnement #contenu-col-gauche{
	margin-top:20px;
}
#fonctionnement li{
	margin-top:5px;
}
#accueil #contenu-col-gauche, #mes-annonces #contenu-col-gauche{
	margin:0;		/* garde un peu plus de place pour le contenu, qui est large, de ces pages */
	padding-left:0;
	padding-right:0;
}
#col-droite{
	flex-basis:220px;
	flex-grow:1;
	min-width:220px;
	background:#e3eded;
	border-radius:5px 5px 0 0;
	/* margin-top:9px; */
}
#col-droite h2{
	border-radius:5px 5px 0 0;
}

/* Généralités et couleurs */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Segoe UI", Arial, sans-serif;
    font-weight: 400;
    margin: 10px 0
}
h1{
	background-color:#4caf50;
	padding:0.18em 16px 0.34em;
	margin:0;
	margin-top:2px;
	box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}
h1, .bandeau-titre{
	font-size:29px;
	color:white;
	font-family: "Segoe UI", Arial, sans-serif;
}
.bandeau-titre{
	background-color:#4caf50;
	margin-top:10px;
}
.page-blog h1, .page-blog .bandeau-titre{
	background-color:#46a5a1;
}

.bandeau-titre h1{
	margin:0;
	box-shadow:none;
	/*padding:0;*/
	vertical-align:top;
	display:inline-block;
}

.bandeau-titre .section{
	display:inline-block;
	background:#409142;
	height:100%;
	padding:0 6px 0em 16px;
	height:55px;
	margin-right:16px;
	position:relative;
}
.bandeau-titre .section > *{
	vertical-align:middle;
}

.bandeau-titre .section:after{
	content:" ";
	display:block;
	position:absolute;
	top:0;
	left:100%;
	border:27.5px solid transparent;
		border-left-color:#409142;
	/*border-bottom:50px solid transparent;
	border-top:50px solid transparent;*/
}
@media(max-width:400px){
	h1, .bandeau-titre{
		font-size:20px;
	}
	.bandeau-titre .section{
		height:40px;
	}
	.bandeau-titre .section{
		padding:0.10em 6px 0em 16px;
	}
	.bandeau-titre .section span{
		vertical-align:middle;
		line-height:100%;
	}
	.bandeau-titre .section:after{
		border-width:20px;
	}
	.bandeau-titre h1{
		vertical-align:bottom;
		min-height:40px;
	}
}
.page-blog .bandeau-titre .section{
	background-color:#0a6660;
}

.page-blog .bandeau-titre .section:after{
	border-left-color:#0a6660;
}
.bandeau-titre a{
	color:white;
}
.section:hover{
	background-color:#316e33;
}
.section:hover:after{
	border-left-color:#316e33;
}
h4{
	font-size:large;
	color:rgb(75,120,255);
}
.message-principal{
	display:flex;
	align-items:center;
	padding:22px;
}
.message-principal img{
	margin-right:44px;
	width:100px;
	height:auto;
}
.message-principal span{
	font-size:15px;
	font-weight:bold;
}
.message-principal.erreur{
	color:#521010;
}
.message-principal.succes{
	color:#19410b;
}


.page-blog .section:hover{
	background-color:#115752;
}
.page-blog .section:hover:after{
	border-left-color:#115752;
}

/*.section:hover:after{
	border-left-color:#096962;
}/*:#115752*/

/*.page-blog .section:hover{
	background-color:#096962;
}
*/



h2{
	font-size:22px;
	color:#4caf50;
}
h3{
	color:white;
	/* background-color:#2e6830; */
	background-color:#265628;
	padding:0.2em 0.4em 0.5em;
	/* margin:0 0 0.5em; */
	margin:0;
}


.onglets{
	margin-top:3px;
	padding-left:6px;
}

.onglet{
	display:inline-block;
	color:white;
	text-decoration:none;
	background-color:darkblue;
	border-radius:3px;
	padding:0px 6px 2px 6px;
	margin-right:3px;
	margin-bottom:2px;
}

.onglet:nth-child(2){
	background-color:darkred;
}
.onglet.inactif{
	background-color:#9696b1;
}
.onglet:nth-child(2).inactif{
	background-color:#b08787;
}
.onglets-categories .onglet:before{
	/* content:"✿ "; */
	/* content:"✦ "; */
	content:"❋ ";
	/* content:"❧ "; */
}

.onglets-categories{
	text-align:justify;
	padding-top:4px;
	margin-left:3px;
	background-color:lightgoldenrodyellow;
}

.onglet.bricolage{
	background-color:#db8338;
}
.onglet.films_jv{
	background-color:limegreen;
}
.onglet.entretien{
	background-color:olivedrab;
}
.onglet.jardin{
	background-color:#57ad37
}
.onglet.bureau{
	background-color:#008b7c;
}
.onglet.medical{
	background-color:orangered;
}
.onglet.hygiene{
	background-color:#b3aa50;
}
.onglet.cuisine{
	background-color:#55c5ea
}
.onglet.jouets{
	background-color:#d78181;
}
.onglet.livres{
	background-color:#97bdb1;
}
.onglet.musique{
	background-color:#96732d;
}
.onglet.sports{
	background-color:#d1ca41;
}
.onglet.vehicule{
	background-color:#e73a3a;
}
.onglet.autres_loisirs{
	background-color:seagreen;
}
.onglet.electromenager{
	background-color:dodgerblue;
}
.onglet.meubles{
	background-color:brown;
}
.onglet.petite_enfance{
	background-color:violet;
}
.onglet.informatique{
	background-color:navy;
}
.onglet.vetements{
	background-color:#d7be91;
}
.onglet.multimedia{
	background-color:mediumpurple;
}
.onglet.animaux{
	background-color:mediumaquamarine;
}
.onglet.autre{
	color:white;
	background:#454545;
}
.onglet.tout{
	color:black;
	background:white;
	border:1px solid black;
}


.page-blog h3{
	background-color:#115752;
}

form .input-group{
	margin-bottom:10px;
}
form .input-group:last-child{
	margin-bottom:4px;
}
fieldset{
	padding-top:10px;
	margin-bottom:10px;
}

.form-annonce{
	border:1px solid lightgrey;
	padding:5px 8px;
}

form .choix-type-annonce{
	margin-bottom:14px;
	border-bottom:1px solid lightgrey;
	padding-bottom:22px;
	margin-top:7px;
}

form .choix-type-annonce label{
	position:relative;
}

form .choix-type-annonce input{
	margin-top:-5px;		/* centre le radiobutton verticalement par rapport au label */
	vertical-align:middle;
	margin-right:8px;
}


form .choix-type-annonce input + span{
	padding:4px;
	display:inline-block;
}

form .choix-type-annonce input + span:after{
	content:" ";
	display:block;
	position:absolute;
	bottom:-15px;
	left:0;
	width:100%;
	height:4px;
	transition:background-color 0.1s;
	background-color:transparent;
	
}

form .choix-type-annonce input:checked + span:after{
	content:" ";
	background-color:green;
	transition:background-color 0.2s;
	/* à améliorer (transition, dégradé ?) */
	
}
form choix-type-annonce input:selected{background:blue;};

form .choix-type-annonce{
	font-size:x-large;
	vertical-align:middle;
}


form .groupe-categories input:checked ~ span{
	background:pink;
}

.fieldset-textarea textarea{
  width:100%;
	height:120px;
	border:none;
	background:transparent;
}

.photos-illustration{
	display:flex;
	flex-wrap:wrap;
}

.photo-illustration{
	display:inline-block;
	border:1px solid lightgrey;
	padding:6px;
	margin:3px;
}
.photo-illustration img{
	max-width:170px;
	float:left;
	margin-right:10px
}

.photo-illustration label{
	margin-bottom:4px;
	display:inline-block;
}
.input-group span{
	vertical-align:top;
}

form .input-group label span{
	display:inline-block;
	width:200px;
}

form .input-group input{
	width:200px;
}

form .groupe-categories{
	margin-left:10px;
	font-style:italic;
	font-size:0.9em;
}

.fin-form{
	margin:7px 7px 3px 13px;
}
.fin-form > *{
	float:right;
	margin-left:4px;
}

.fin-form label{
	/* float:right; */
	/*display:inline-block;*/
	margin:4px 16px 1px 1px;
}
	
.label-titre{
	display:block;
	font-size:1.5em;
	border-bottom:1px solid black;
	margin-bottom:10px;
	margin-top:8px;
}

.input-grand{
	font-size:1.5em;
	width:500px;
	max-width:100%;
}
	
.fin-form button{
	/* float:right; */
	margin-right:2px;
}

label.avec-separateur{
	/*position:relative;*/
	border-right:3px double black;
	padding-right:9px;
	/*margin-right:0px;*/
}

/*
label.avec-separateur:after{
	content:" ";
	display:block;
	position:absolute;
	right:-9px;
	top:0;
	bottom:0;
	width:2px;
	height:100%;
	background-color:black;
}*/

/*form .input-group.choix-type-annonce label span*/

.annonce.demande h3{
	/*background-color:#543a48;*/
	background-color:#114c4b;
	
}

.contenu-annonce{
	border:1px solid grey;
	background-color:#FBFBFB;
	padding:6px 8px;
}

/* #nouvel-article .ck-editor__editable, #modifier-article .ck-editor__editable{ */
#nouvel-article .ck-editor__editable, #modifier-article .ck-editor__editable{
	min-height:400px;
}

#partie-accroche .ck-editor__editable{
	min-height:130px;
}
#partie-accroche .ck-editor{
	flex-basis:500px;
	flex-grow:1;
	max-width:500px;
	min-height:200px;
	order:-1;
}

textarea#texte-article{
	width:100%;
	height:220px;
}

button,.bt-base{
	display:inline-block;
	text-decoration:none;
	text-align:center;
	color:white;
	/*border:1px solid #149e14;*/
	border-radius:2px;
	cursor:pointer;
	
	/*box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12),0 3px 1px -2px rgba(0,0,0,0.2);*/
  background: #34d94a;
  background-image:linear-gradient(to bottom, #3bca4e, #32b82b);
  font-family: Arial;
	font-size:13px;
	padding:5px 9px 5px 13px;
  text-decoration: none;
	border:1px outset lightgrey;
}

.bt-grand{
	font-size:16px;
	border:1px none;
}

button.annuler, a.annuler{
	background-color:#F80808;
	background-image:none;
}

.bt-icone{
	padding:7px 21px 7px 33px;
	position:relative;
}
.bt-icone i{
	position:absolute;
	left:6px;
}

input[type=text],input[type=email],input[type=password],input[type=number]{
	height:1.8em;
}
.box-message{
	position:relative;
	background-color:lightblue;
	padding:9px 11px 10px 11px;
	border-radius:5px;
	border:1px solid darkblue;
	margin-top:10px;
	margin-bottom:10px;
}
.txt-rouge{
	color:red;
}
.erreur{
	color:#7f1406;
	background-color:#fcc7bb;
	border-color:#59201e;
}
#cadre-utilisateur .erreur{
	background:transparent;
	color:#ffe0e0;
}
.succes {
  background-color:#a3ff7e;
	border-color:darkgreen;
}
.bt-croix-fermer{
	position:absolute;
	top:5px;
	right:6px;
	font-size:21px;
	height:21px;
	width:21px;
	text-align:center;
	line-height:16px;
	cursor:pointer;
}
.bt-croix-fermer:hover{
	background:#a1c9d6;
}
.erreur .bt-croix-fermer:hover{
	background-color:#da9b91;
}
.succes .bt-croix-fermer:hover{
	background-color:#8cda6d;
}
.fermable{
	transition: opacity 0.5s, height 0.75s, padding-top 0.75s, padding-bottom 0.75s, margin-top 0.75s ease-in, margin-bottom 0.75s;
}
.se-fermant {
  height: 0!important;		/* doit avoir priorité sur le style inline ajouté par le javascript */
  opacity: 0!important;		/* et de façon générale sur tous les autres styles */
  padding-top: 0!important;
  padding-bottom: 0!important;
  margin-top: 0!important;
  margin-bottom: 0!important;
  overflow: hidden!important;
}

/* Header / cadre utilisateur */

header/*,.header*/{
	display:flex;
	background:#6ec071;
	box-shadow:0 2px 5px -1px rgba(0,0,0,0.16);
	min-height:81px;
	background-image:url('/images/b-bg.png');
	/* justify-content:space-between; */
	/* margin-bottom:5px; */
	/* position:relative; */

}

header > */*,.header>**/{
	/*flex:0;*/
	/* background:white; */
}

#logo{
	display:flex;
	flex-basis:270px;
	flex-grow:1;
	flex-shrink:0;		/* à ajuster ?*/
	align-items:center;
	font-family:"Marck Script","Comic Sans MS",serif;
	font-size:50px;
	margin-right:auto;
}
a#logo, #logo a{
	text-decoration:none;
	color:/*#F7FFF2*/#E4FFD4;
}
img.logo{
	display:block;
	width:90px;
	margin:3px 16px 0px 5px;
	/* version logo la hulpe collé au bord sup:*/
	/*width:180px;
	align-self:flex-start;
	margin:0px 16px 0px 5px;*/
}
#titre-site{
	margin-right:16px;
}
#cadre-utilisateur{
	flex-shrink:0;
	display:flex;
	position:relative;
	justify-content:flex-end;
	z-index:9999;
	/* overflow:hidden;*/
}

#cadre-utilisateur #form-connexion button{
	max-height:50px;
	flex-basis:70px;
}


#cadre-utilisateur #form-inscription > *{
	display:inline-block;
}

#cadre-utilisateur #form-inscription{
	/* text-align:center; */
	margin-left:10px;
}

#zone-logo-user .nom-user{
	display:inline-block;
	padding:10px 14px;
	color:white;
}
.logo-user{
	display:block;
}
#nom-et-deco{
	display:flex;
	/*flex:0;*/
	align-items:stretch;
	flex-direction:column;
	justify-content:space-between;
	flex-shrink:0;/***/
}
#nom-et-deco .nom-user{
	margin:auto;
	padding-left:8px;
	padding-right:10px;
	/* min-width: */
}
#nom-et-deco #form-deco{
	/* display:inline-block; */
	/* width:100%; */
	/* display:block; */
	min-width:85px;
	/* width:100%; */
}
#nom-et-deco #form-deco button{
	background:#f82222;
	width:100%;
}
#menu-utilisateur{
	flex-basis:	80px;
	flex-shrink:0;
	flex-grow:1;
	text-align:right;
	min-width:275px;
}
#menu-utilisateur,#zone-logo-user{
	align-self:flex-start;
}

@media(max-width:780px){
	#logo{
		font-size:32px;
	}
}
@media(max-width:400px){
	img.logo{
		display:none;
	}
	#logo{
		flex-basis:230px;
	}
	#titre-site{
	margin-right:16px;
	margin-left:16px;
	text-align:center;
	}
	img.4logo-user.non-co{
		width:60px!important;
	}
}
@media(max-width:700px){
	#menu-utilisateur{
		flex-basis:280px;
		flex-shrink:1;
		min-width:auto;
	}
}


/* Menu principal */

#menu-principal{
	/*padding:0px 0px 4px;*/
	padding:5px 0px 6px 19px;
	background:white;
	background:lightgoldenrodyellow;
	/* align-self:flex-end; */
	
	/* border-left:1px solid black; */
	/* border-right:1px solid black; */
	/* box-shadow:0px 2px 5px -4px rgba(0,0,0,0.75); */	/* à voir */
}

#menu-principal > a {
	display:inline-block;
	padding:5px 10px 7px 10px;
	background-color:#008200;
	color:white;
	/*font-size:large;*/
	text-decoration:none;
	/* border:4px double darkgreen; */
	position:relative;
	margin:0;
	transform:skewX(-15deg);
	font-size:1.1em;
}
#menu-principal > a:first-child{
	background-color:#005082;
}

#menu-principal > a.actif{
	border:2px solid #377c20;
	background-color:#199627;
}
#menu-principal > a.actif:first-child{
	background-color:#0265a2;
	border:3px double #064872;
}

#menu-principal > a > *{
	display:inline-block;
	transform:skewX(15deg);
}

#menu-principal i{
	margin-right:4px;
}

@media(max-width:580px){
	#menu-principal{
		/* text-align:center; */
		/* padding-left:0; */
	}
}

@media(max-width:465px){
	#menu-principal > a > .txt-lien-menu-principal.fonctionnement{
		display:none;
	}
}
@media(max-width:330px){
	#menu-principal > a > .txt-lien-menu-principal.news{	
		display:none;
	}
}

@media(max-width:300px){
	#menu-principal > a > .txt-lien-menu-principal.annonces{
		display:none;
	}
	#menu-principal{
		text-align:center;
		padding:4px 0 0 0;
	}
	#menu-principal > a{
		margin-left:4px;
		margin-right:4px;
		padding-right:13px;
		padding-left:13px;
	}
}


/* Menu admin */
#menu-administration{
	background:black;
	color:white;
}

#menu-administration a{
	color:lightblue;
}

/* Header */

/* En-tête utilisateur */

#zone-logo-user{
	display:flex;
	margin-left:8px;
}

.logo-user{
	width:82px;
	height:80px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:space-around;
}
.logo-user span{
	text-align:center;
	font-size:15px;
}
.logo-user i{
	font-size:26px;
}
img.logo-user{		/* garde les proportions si le "logo" est une image */
	height:auto;
	display:block;
}
#cadre-utilisateur a{
	text-decoration:none;
	color:white;
}



.logo-user.non-co{
	
}
.logo-user.co{
	
}

#form-connexion{
	display:flex;
}

#form-connexion label{
	display:inline-block;
	width:9em;
	text-align:right;
}

#inputs-connexion{
	margin-right:10px;
}

#cadre-connexion-inscription{
	overflow:hidden;
	position:absolute;
	right:100%;
	min-width:464px;
	/*z-index:9999;*/

}
#cadre-connexion-inscription > *{
	position:relative;
	right:-101%;
	transition:left 0.2s, right 0.25s;
	/*transition:right 0.25s;*/
}
#cadre-connexion-inscription > div{
	padding-right:50px;	/* place pour le bouton fermer */
	/* background:rgba(255,255,255,0.6); */
	background-color:#343434;
	color:white;
	
	/*border:2px solid black;*/
	/*box-shadow: inset 3px -3px 3px 0px rgb(110, 192, 113);		/* doit être de la même couleur que l'arrière-plan du header, et ne pas dépasser du header ; à virer au pire */
	border-bottom:2px solid rgba(0,150,0,0.7);
	border-left:2px solid rgba(0,150,0,0.7);
	border-right:1px solid rgba(0,150,0,0.7);
	opacity:1;
	padding : 0 0 3px 7px;	/* pour tenir compte de l'"ombre" */
}

#cadre-connexion-inscription a.lien{
	color:lightblue;
}

#cadre-connexion-inscription:target > *{
	right:0;
	
}
@media(min-width:1100px){
	#cadre-connexion-inscription > *{
	right:0;		/* le cadre peut être affiché de base sur un écran assez large */
	}
	#cadre-connexion-inscription .bt-close{
		display:none;
	}
	#cadre-utilisateur .logo-user.non-co{
		display:none;
	}
}



#cadre-connexion-inscription .lien-null{
	position:absolute;
	right:0;
	top:0;
	color:white;
	font-size:large;
}

#cadre-modif-deco{
	align-content:flex-start;
}
.lien-img-utilisateur img{
	display:block;
	/* margin-left:8px; */
}
.bt-vert{
	background:green;
}
.bt-standard{
	width:130px;
	padding:7px 5px 7px 12px;
	margin-top:5px;
}
.bt-mes-annonces, .bt-creer-annonce{
	margin-top:5px;
}



/*
@media(max-width:632px){
	#cadre-connexion-inscription{
		right:-10px;
		top:0;
		max-width:255px;
	}
	#cadre-utilisateur #form-connexion button{
		align-self:flex-end;
		margin-top:9px;
		
	}
}
*/

/* media queries cadre de connexion */

/* @media(max-width:550px){		/* largeur à ajuster pour que ça arrive avant que la place ne manque pour les labels + input sur la même ligne */ 
@media(max-width:640px){		/* largeur à ajuster pour que ça arrive avant que la place ne manque pour les labels + input sur la même ligne */
	#form-connexion{
		flex-direction:column;
	}
	#form-connexion label{
		display:block;
		text-align:center;
		width:172px;
	}
	#inputs-connexion{
		margin-right:0;
	}
	#inputs-connexion input{
		width:172px;
	}
	#cadre-utilisateur{
		/*position:static;		/* n'est plus la référence pour positionnement de ses sous-éléments */
	}
	#cadre-utilisateur #form-connexion button{
		width:172px;
		flex:0;
		flex-basis:37px;
		align-self:flex-start;
		margin-top:5px;
		/* text-align:left; */
	}
	#cadre-connexion-inscription{
		 /* display:none;  */
		 visibility:hidden;		/* permet d'animer le contenu en même temps que la div s'affiche, contrairement à un display:none */
	/* https://tympanus.net/codrops/2013/06/25/nifty-modal-window-effects/ */
		position:absolute;
		/*left:0;*/ /* reste right:100% à ce stade */
		background:#343434;
		color:white;
		transition:opacity 0.05s;
		opacity:0;
		padding:0 10px 14px 10px;
		border:1px solid black;
		border-radius:0 0 5px 0;
		box-shadow : 0px 1px 3px 1px rgba(0,0,0,0.6);
		min-width:240px;

	}
	#cadre-connexion-inscription > div{
		background:transparent;
		box-shadow:none;
		border:none;
	}
	/*#cadre-connexion-inscription .lien-null{
		color:white;
	}*/
	#cadre-connexion-inscription:target{
		 /* display:block;  */
		 visibility:visible;
		opacity:1;
		transition:opacity 0.05s 
	}
	#cadre-connexion-inscription:target > *{
		transition:left 0.3s  ease-out;
	}
	#cadre-utilisateur #form-inscription {
		/* text-align:center; */
		margin-left:0;
	}
	#cadre-utilisateur #form-inscription button{
		min-height:37px;
		/*width:100%;*/ width:172px; /* comme les boutons connexion */
		margin-top:5px;
	}
}

@media(max-width:432px){
	#cadre-utilisateur{
		position:relative;
		
	}
	#cadre-connexion-inscription{
		position:fixed;
		visibility:hidden;
		/*display:none;	/* évite un élargissement de la page sur la droite */
		/*position:absolute;*/ /* ? */
		top:0;
		left:0;
		opacity:0;
	}
	#cadre-connexion-inscription:target{
		/*position:absolute; */
		top:0;
		left:0;
		visibility:visible;
		
		max-width:none;
		width:100%;
		opacity:1;
		transition:opacity 0.1s;
	}
	#cadre-connexion-inscription:target > *{
		transition:none;
	}
	#form-connexion label{
		width:100%;
		margin:5px 5px;
	}
	#form-connexion input{
		width:100%;
		height:2.1em;
	}
	#cadre-utilisateur #form-connexion button{
		width:100%;
		margin-top:8px;
	}
	#cadre-utilisateur #form-inscription button{
		width:100%;
		min-height:37px;
		margin-top:13px;
	}
}

/* media queries cadre utilisateur connecté */

#menu-utilisateur .bt-creer-annonce{
	display:none;
}

@media(max-width:700px){
	#menu-utilisateur .bt-offrir, #menu-utilisateur .bt-demander{
		display:none;
	}
	#menu-utilisateur .bt-creer-annonce{
		display:inline-block;
		width:auto;
		padding-left:34px;
	}
	#zone-logo-user #nom-et-deco{
		width:auto;
	}
	#nom-et-deco .nom-user{
		display:none;
	}
	#zone-logo-user{
		flex-direction:column;
	}
	#menu-utilisateur .bt-mes-annonces, #menu-utilisateur .bt-creer-annonce{
		width:185px;
		padding:7px 0;
		/* background:red; */
		/* margin-top:5px; */
	}
	#menu-utilisateur .bt-creer-annonce{
		padding:7px 0 7px 13px;
	}
	#nom-et-deco #form-deco{
		min-width:70px;		/* largeur du logo-utilisateur */
	}	
}
@media(max-width:530px){
	header/*,.header*/{
		flex-wrap:wrap;
	}
	#menu-utilisateur{
		order:99;
		 /* display:flex;  */
		 /* justify-content:space-around;  */
		 /* flex-wrap:wrap;  */
		 text-align:center;
		 padding-bottom:5px;
	}
	#bts-offrir-demander{
		display:inline-block;
	}
}


#texte-accueil{
	background:#fafffa;
	border:2px solid lightgrey;
	border-radius:5px;
	margin:10px;
	padding:0 12px 16px 8px;
	display:flex;
}
#texte-accueil-texte{
	flex-basis:60%;
}
#texte-accueil-lien-img{
	flex-basis:40%;
	margin-left:25px;
}
#texte-accueil-lien-img img{
	width:100%;
	max-width:320px;
}
@media(max-width:985px){		/* encombrerait l'accueil */
	#texte-accueil{
		display:none;
	}
}

.form-recherche{
	padding:20px;
	background-color:#b7dfb8;
	border-bottom:1px solid #008F00;
	border-top:1px solid #008F00;
}
.groupe-categories{
	column-width:200px;
	overflow:hidden;
}
#rech-rap-lien-deroul-cats{
	display:none;		/* sera montré en JS, si le js est actif */
}

.boutons-admin > *{
	display:inline-block;
}
.boutons-admin button, .boutons-admin a{
	display:inline-block;
	vertical-align:top;
	border-radius: 8px;
	color: black;
	background-image: linear-gradient(to bottom, #d1d1d1, #dcdee0);
	/* font-size: */
	padding:4px 4px;
	text-decoration: none;
	border:none;
	cursor:pointer;
	min-width:34px;
	min-height:32px;
	font-size:1.1em;
	
}
.boutons-admin button:hover, .boutons-admin a:hover{
	  background: #7eccfc;
		background-image: linear-gradient(to bottom, #7eccfc, #10adff);
}
.boutons-admin .bt-publier-annonce{
	background:#f20000;
	background-image:none;
	box-shadow:0 0 10px #f20000;
}


/* Présentation des listes d'annonces et d'articles */

#container-page-liste-annonces{
	position:relative;
}

.annonce a.lien-une-annonce{
	flex-grow:1;
	align-self:stretch;
	color:black;
	text-decoration:none;	
}
.annonce a.lien-une-annonce{
	display:flex;
	flex-direction:column;
}
.annonce a.lien-une-annonce .corps-annonce{
	flex:1;
	min-height:150px;
	position:relative;
	padding: 5px 0;
}
.annonce a.lien-une-annonce .corps-annonce{
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	align-items:center;
}
a.lien-une-annonce .annonce-description-courte{
	margin:auto;
	padding:6px 11px 4px 7px;
}

#liste-annonces{
	border-left:1px solid #008F00;
	border-right:1px solid #008F00;
}

#liste-annonces{
	/*background:#b7dfb8;*/
	/* background-color:white; */
}

.liste-annonces{
	background-color:white;
	padding:3px 6px 6px 3px;	
}
#liste-annonces .pagination.slmt-petit{
	display:none;
}
@media(max-width:600px){		/* évite, sur petits écrans, de scroller en bas de la liste (qui doit faire une seule colonne à ce stade) */
	#liste-annonces .pagination.slmt-petit{
		display:flex;
	}
*}

#liste-annonces .liste-annonces .annonce{
	position:relative;
	display:flex;		/* gère plus facilement la taille du <a> */
	flex:1;
	position:relative;
	min-width:300px;
	max-width:600px;
	overflow:hidden;
	background:#f4faf4;
	margin:2px;
	border:1px solid #4caf50;
	border-radius:5px 5px 0 0;
}

#liste-annonces .liste-annonces .annonce .nom-auteur,.annonce.pleine-page .nom-auteur{
	display:block;
	font-size:14px;
	padding:4px 10px 5px 10px;
	background:#E0E0E0;
	border-bottom:1px solid darkgrey;
}
.annonce.pleine-page .nom-auteur {
	border:1px solid darkgrey;
}
#liste-annonces .liste-annonces .annonce .nom-auteur > span{
	color:#575963;
}

#liste-annonces .liste-annonces .annonce.non-publie{
	background:lightgrey;
}

#liste-annonces .liste-annonces .annonce.supprime{
	background:grey;
}

#liste-annonces .liste-annonces .annonce.mien{
	background:#fdffdc;
}

#liste-annonces .liste-annonces .annonce.mien.non-publie{
	background:#ddd;
	opacity:0.75;
}

.liste-annonces .annonce.mien.non-publie .lien-une-annonce:hover{
	background-color:#cccccc;
}
.liste-annonces .annonce.non-publie .bandeau-non-publie{
	background-color:#ea0000;
	color:white;
	padding-left:5px;
	padding-right:5px;
}
#liste-annonces .liste-annonces .annonce.mien.supprime{
	background:#446644;
	opacity:0.75;
}

#liste-annonces .liste-annonces .annonce .corps-annonce img{
	display:block;
}

.annonce .boutons-admin{
	opacity:0.2;
	position:absolute;
	top:2px;
	right:1px;
}

.annonce:hover .boutons-admin{
	opacity:1;
}

.annonce .tag-type{
	width:150px;
	height:40px;

	font-size:18px;
	
	padding:4px 11px;
	
	/*box-shadow: inset 2px -23px 13px -22px rgba(0,0,0,0.4);/*
	/*position:absolute;
	left:6px;
	top:3px;*/
	display:inline-block;
	margin-right:10px;
	background-size:100%;
	background-repeat:no-repeat;
	background-position:center;
	text-align:center;
	font-weight:bold;
}
.annonce.offre .tag-type{
	/*background:#2cad2c;*/
	
	
	
	
	/*test*/
	background-image:url("/images/bandeau-vert-court.png");
	/*padding-left:30px;
	padding-right:70px;*/
	color:#215c1a;
	
}
.annonce.demande .tag-type{
/*	background:#00a1ff;*/
/*background-image:url("/images/bandeau-violet-tres-court.png");*/
/*background-image:url("/images/bandeau-violet-tres-court.png");*/
background-image:url("/images/bandeau-bleu-clair-tres-court.png");
color:#004b4a;
}

/* Liste annonces principale */
#liste-annonces .liste-annonces{
	display:flex;
	flex-wrap:wrap;
	
}

#liste-annonces .annonce h3{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
}

.liste-annonces .annonce .annonce-description-courte{
	/* padding-top:38px;	/* place pour le tag */
	/* margin:0; */
}


.liste-annonces .annonce .lien-une-annonce{
	/* width:100%; */
	/* height:100%; */
}

.liste-annonces .annonce .lien-une-annonce:hover{
	/* background-color:#f4fdde;	 */
	background-color:white;
}

.liste-annonces .annonce .lien-une-annonce:hover h3{
	background-color:#2e6830;
}
.liste-annonces .annonce.demande .lien-une-annonce:hover h3{
	/*background-color:#693953;*/
	background-color:#006665;
}

/* Articles colonne droite */
#conteneur-page-liste-articles-cadre{
	position:relative;
}
#page-liste-articles-cadre{
	/*overflow:hidden;
	position:relative;*/
}
#cadre-news{
	position:relative;
	overflow:hidden;
}
#cadre-news .lien-nv-article{
	display:block;
	text-decoration:none;
	color:#115752;
	font-size:17px;
	padding-bottom:3px;
	padding-top:2px;
}
#cadre-news .liste-articles-cadre{
	display:flex;
	flex-wrap:wrap;
}
#col-droite h2{
	background-color:#46a5a1;
	margin:0;
	padding:7px 8px;
}
#cadre-news h2 a{
	text-decoration:none;
	color:white;
}
#cadre-news .article{
	flex-basis:210px;
	flex-grow:1;
	margin-top:3px;
	margin-bottom:8px;
	/*margin:3px 2px 8px 2px;*/
	
}
#cadre-news .article a{
	display:block;
	color:black;
	text-decoration:none;
	/* padding-bottom:20px */
}
#cadre-news a:hover{
	background-color:#f4f6f6;
}
#cadre-news h2 a:hover{
	background-color:initial;
}

#cadre-news .liens-pages{
	display:flex;
	text-decoration:none;
	justify-content:space-between;
}
#cadre-news .liens-pages a{
	text-decoration:none;
}
#cadre-news .liens-pages :nth-child(1), #cadre-news .liens-pages :nth-child(3){
	flex-basis:80px;
	flex-grow:1;
	font-size:29px;
}
#cadre-news .liens-pages :nth-child(1) a, #cadre-news .liens-pages :nth-child(3) a{
	display:block;
	text-align:center;
}
#cadre-news .liens-pages :nth-child(2){
	flex-grow:0;
	padding-left:20px;
	padding-right:20px;
}
#cadre-news a.lien-page{
	display:inline-block;
	padding:0px 16px 6px 14px;
}

#cadre-news h3{
	background-color:#115752;
}
#cadre-news .article a:hover h3{
	background-color:#247a74;
}
#cadre-news .accroche-article{
	padding:0 6px 12px 6px;
}
#cadre-news .date-article{
	display:block;
	text-align:right;
	padding-bottom:6px;
}

#cadre-news a.lien-tous-articles{
	display:block;
	text-align:right;
	padding:13px 18px 17px 13px;
}
#cadre-news a.lien-tous-articles:hover{
	background-color:#f4f6f6;
}

#cadre-news .boutons-admin a{
	display:inline-block;
}

#blog #liste-articles #articles{
	display:flex;
	flex-wrap:wrap;
}

#blog #liste-articles #articles article{
	min-width:32%;
	max-width:433px;
	margin:0.5%;
	margin-bottom:9px;
}

/* Pagination */
.pagination{
	background:#C6DDDE/*pink*/;
	background:#E9EDED;
	display:flex;
	justify-content:center;
	padding:3px 3px;
	border:1px solid black;
}
#accueil .pagination, #mes-annonces .pagination{
	border:none;
	border-top:1px solid black;
	border-bottom:1px solid black;
	
}
.pagination .n-pages a{
	border-radius:3px;
	box-shadow:rgba(0, 0, 0, 0.2) 0 0 0 1px;
	display:inline-block;
	border-top:1px solid #fff;
	text-decoration:none;
	text-shadow:white 0 1px 0;
	background-image:linear-gradient(to bottom, #f9f9f9, #eaeaea);
	color:#616161;
	padding:8px 13px;
	margin-left:5px;
}
.pagination .n-pages a:first-child{
	margin-left:initial;
}
.pagination .n-pages a.actif{
	box-shadow:rgba(0, 0, 0, 0.75) 0 0 0 0 inset;
	border-color:#505050;
	color:#f2f2f2;
	text-shadow:black 0 1px 0;
	background-image:linear-gradient(to bottom, #5f5f5f, #5c5c5c)
}
.pagination .n-pages a:hover{
	background-color:#fdfdfd;
	background-image:linear-gradient(to bottom, #fefefe, #fafafa);
}
.pagination .n-pages a:active{
	/*background-image:linear-gradient(to bottom, #383838, #4a4a4a);*/
	background-image:linear-gradient(to bottom, #D8D8D8, #E6E6E6);
	border-color:#bbb;
}
.pagination .n-pages a.actif:hover{
	background-image:none;
	background-color:#333;
}
.pagination .lien-page-adjacente.suivante{
	margin-left:20px;
}
.pagination .lien-page-adjacente.precedente{
	margin-right:20px;
}
.pagination .lien-page-adjacente.inactif{
	cursor:default;
	opacity:0.5;
}

footer{
	background:#E4E4E4;
	text-align:center;
	padding-top:14px;
	padding-bottom:10px;
}

.boutons-admin{
	/* border:1px double yellow; */
}


/* Annonce pleine page */

@keyframes highlight_contact {
    from {background-color: yellow;}
    to {background-color: green;}
}

#form-contact-annonce{
	max-width:520px;
}
#form-contact-annonce .fieldset-textarea{
	/*max-width:520px;*/
} 
#form-contact-annonce textarea{
	display:block;
	height:100px;
	width:100%;
}
#form-contact-annonce button{
	float:right;
}
.desc-et-photos{
	display:flex;
	flex-wrap:wrap;
}
.desc-et-photos .description-annonce{
	flex-basis:60%;
	flex-grow:1;
	min-width:290px;
	padding-right:30px;
	margin-bottom:5px;
}
.desc-et-photos .photos-annonce{
	flex-basis:40%;
	/* flex-grow:1; */
	flex-grow:1;
	min-width:250px;
}
.miniature-photo{
	cursor:pointer;
	max-width:120px;
	/*max-height:120px;*/
}
.annonce .photos > *{
	vertical-align:top;
}

/* Utilisateurs */

body#utilisateurs{		/* le tableau d'utilisateurs a besoin d'assez de place */
	min-width:930px;
}
#utilisateurs #col-gauche{
	min-width:910px;
}
.liste-utilisateurs{
	display:table;
}
.liste-utilisateurs > *{
	display:table-row;
}
.liste-utilisateurs > * > *{
	display:table-cell;
	border:1px solid black;
	padding:2px;
}
#liste-utilisateurs .actions-utilisateur  > * {
	display:inline-block;
}
#liste-utilisateurs .actions-utilisateur a, #liste-utilisateurs .actions-utilisateur button{
	width:100px;
}
.en-tete-tableau{
	white-space:nowrap;
}
.titre-colonne-triable{
	
}
.titre-colonne-triable a{
	display:block;
	height:100%;
}

.titre-colonne-triable a:hover{
	background:lightblue;
}
.titre-colonne-triee{
	background-color:#e4eef2;
}

/*body#une-annonce .annonce.pleine-page */.liens-admin{
	text-align:right;
}
@media(max-width:560px){
	/*body#une-annonce .annonce.pleine-page*/ .liens-admin{
		text-align:center;
	}	
}
/*body#une-annonce .annonce.pleine-page */.liens-admin form{
	display:inline-block;
}
/*body#une-annonce .annonce.pleine-page */.liens-admin button{
	width:110px;
}

body#mes-annonces #liste-annonces{		/* la liste est séparée du h1 par le bouton 'nouvelle annonce' */
	border-top:1px solid #008F00;
}
body#mes-annonces .bt-nv-annonce{
	margin-top:15px;
	margin-bottom:11px;
	margin-left:12px;
	padding-top:8px;
	padding-bottom:9px;
}