/**
 * Fichier pour le responsive du site
 * qui sera mis au fur et à mesure sur tout le site
 * en commençant par les produits google
 * 
 */

/**
 * Menu Mobile
 */ 
#menu_mobile,
.slicknav_menu {
	display: none;
}
 
/**
 * Structure générale
 */ 
#global {
	max-width: 987px;
	width: 100%;
	box-sizing: border-box;
}

#texte.large {
	max-width: 955px;
	width: 100% !important;
	float: none;
}

.petit_logo {
	display: none;
}

.gros_logo {
	display: block;
}

#texte {
	max-width: 645px;
	width: 100%;
}

#pub_728_90.stay {
	max-width: 728px;
	width: 100%;
	height: auto;
}

#add_comment textarea {
	max-width: 580px;
	width: 100%;
	box-sizing: border-box;
}

.content img {
  max-width: 100%;
}

input[type=submit] {
  white-space: pre-wrap;
}

textarea {
  box-sizing: border-box;
}

#colonne_300 .bloc--pub {
  background: 0;
}


.pub-desktop-336 {
	border-bottom: 5px solid #ccc;
	margin-bottom: 10px;
	padding-bottom: 10px;
}

@media(min-width: 980px) { .pub-desktop-250 { width: 336px; height: 280px; } }

@media(min-width: 980px) { .pub-desktop-336 { width: 336px; } }
@media(min-width: 980px) { .pub-desktop-600 { width: 300px; height: 600px; } }

/**
 * Accueil du site
 */
.accueil #content {
	
}

.accueil #colonne_300 {
	float: left;
}

/**
 * Produits Google
 */
.produit_google_resume {
	max-width: 600px;
	width: 100%;
  box-sizing: border-box;
  margin: 2em 0;
  -moz-border-radius: 0;
    -khtml-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}

.produit-google-etiquette {
	white-space: nowrap;
}

#texte .liste-produits-google li {
	margin: 1em 0;
}

#texte .infos_articles {
	margin: 0;
}

/**
 * Commandes Google
 */
.commande-recherche {
  float: right;
  text-align: right;
}

.commande-recherche div {
  font-size: 9pt;
  margin: 0 0 0 20px;
  padding: 5px;
  background-color: #ffffee;
  border: 1px solid #ff6600;
}

.tabber {
  width: 100%;
  max-width: 640px;
}

/**
 * Formations
 */

.formation-info {
  border:3px solid #015481;
  border-radius:10px;
  float:left;
  background-color:#f0faff;
  padding:10px 0;
  margin:10px;
  width:180px;
  height:40px;
  text-align:center;
  font-size:1.6em;
}


/**
 * Annuaire
 *
 * Premiere partie : Fiche détaillée
 * Deuxième partie : Catégories
 */

/**
 * Première partie : Fiche détaillée
 */

#marge_gauche {
	margin: 0 0 10px 0;
}

#corps_annuaire2 {
	float: right;
  width: 735px;
	margin: 0;
}

.listing_site {
	margin: 5px 0;
	box-sizing: border-box;
	max-width: 718px;
	width: 100% !important;
}

.listing_site:after {
	content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

/**
 * Deuxième partie : Catégories
 */

.recherche_cat_haut {
	display: none;
} 
 
 
/**
 * Formulaire annuaire
 */
form#contact p:after {
	content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
 
 
form#contact label {
	display: block;
	margin-left: 25px;
	width: 90%;
}

form#contact input[type=radio] {
	float: left;
}

#vignette {
	margin-top: 3px;
}

/**
 * Forum
 */
#wrap {
  width: 100%;
  min-width: 100%;
}

.tabberlive {
  max-width: 640px;
  width: 100%;
}

.tabberlive .tabbertab ul {
  list-style-type: none;
}

.postbody {
  padding-left: 1%;
}

a.postlink,
a.postlink-local {
  word-break: break-word;
}

.postbody .content {
  word-break: break-word;
}

/**
 * Classes générales pour le responsive
 */
.sidebar {
	width: 300px;
	float: right;
}

.sidebar-336 {
  width: 336px;
  float: right;
  margin-left: 20px;
}

.w580 {
  max-width: 580px;
  width: 100%;
}

.w620 {
	max-width: 620px;
	width: 100%;
}

.left {
	float: left;
}

.showtablet,
.showsmallscreen {
	display: none;
}

.mt1 { margin-top: 1em !important; }
.mt2 { margin-top: 2em !important; }

.mb1 { margin-bottom: 1em !important; }
.mb2 { margin-bottom: 2em !important; }


.btn {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 5;
  -moz-border-radius: 5;
  border-radius: 5px;
  color: #ffffff;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.btn:hover,
.btn:focus {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

a.btn, a.btn:hover, a.btn:visited, a.btn:active, a.btn:focus {
	color: #fff;
	font-size: 16px;
	text-align: center;
}

.clearfix:after {
     content: ".";
     display: block;
     clear: both;
     visibility: hidden;
     line-height: 0;
     height: 0;
}
.clearfix {display: block;}
html[xmlns] .clearfix {display: block;}
* html .clearfix {height: 1%;}



/**
 * Media Queries
 */

 /* Ecran sous les 1110 */
@media screen and (max-width: 1109px) {

	body {
		background: #F0FAFF !important;
	}
	
	#global {
		width: 80%;
		margin: auto;
	}
  
  .accueil form#membre,
	.blog form#membre,
  form#membre {
		display: none;
	}
  
  .accueil #texte_accueil,
	.blog #texte {
		width: 60%;
	}
  
  iframe:not(.noresize),
  embed:not(.noresize) {
		max-width: 100% !important;
		width: 100% !important;
	}
  
  #sous_menu #rss {
    display: none;
  }
  
  .w580 {
    width: 50%;
  }

}
 
/* Ecran sous les 1024 */
@media screen and (max-width: 1023px) {

	#corps_annuaire2 {
		float: none;
		max-width: 100%;
		margin: auto;
	}
	
	#corps_annuaire2 .liste-sous-cat {
		margin: auto;
	}
	
	#marge_gauche {
		margin: 10px auto;
		float: none;
	}
	
	.accueil form#membre,
	.blog form#membre, {
		display: none;
	}
	
	.accueil #pub_728_90 {
		margin: auto;
	}
	
	.accueil #texte_accueil,
	.blog #texte {
		width: 60%;
	}
	
	.accueil #colonne_300 {
		float: right;
	}
	
	/**
	 * Accueil Colonne 164
	 */
	.accueil #colonne_164 {
		float: none;
		clear: both;
		margin: 20px auto 0;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	
	.accueil #colonne_164 .bloc {
		width: 33%;
		background: none;
	}
	
	.accueil #colonne_164 .bloc h2,
	.accueil #colonne_164 .bloc .titre_bloc {
		background: none;
		font-weight: bold;
		color: #fff;
		background: #3C8DF2;
	}
	
	.accueil #colonne_164 .bloc h2 a {
		color: #fff;
	}
	
	.accueil #colonne_164 .facebook_hide,
	.accueil #colonne_164 .sivit_hebergement,
	.accueil #colonne_164 .orientation_nouveaux {
		display: none;
	}
	
	#add_comment label {
		float: none;
		text-align: left;
		display: block;
		width: 100%;
		margin: 3px 0;
	}
	
	#add_comment #actions {
		text-align: left;
	}
	
	.boutons_partage_en_ligne {
		text-align: left;
	}
	
	div.wp_rp_content {
		display: block !important;
	}
	
	ul.related_post {
		display: flex !important;
		justify-content: space-around;
	}
	
	.wp-caption {
		width: 100% !important;
		max-width: 640px;
		height: auto;
	}
	
	.wri_textarea {
		max-width: 600px;
		width: 100% !important;
		box-sizing: border-box;
	}
}

/* Ecran sous les 1000 */
@media screen and (max-width: 999px) {
  
  .blog #texte {
		width: 100%;
		max-width: 100%;
	}
	
	.blog #texte .titre_article {
		margin-top: 0;
	}
	
	.blog #texte .post {
		padding: 5px;
	}
	
	.blog #colonne_300 {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		width: 100%;
		justify-content: space-around;
	}
	
	.blog #colonne_300 .bloc {
		width: 33%;
		max-width: 300px;
		background: none;
		padding: 0;
		margin: 0;
	}
	
	.blog #colonne_300 .bloc h2,
	.blog #colonne_300 .bloc .titre_bloc,
	.blog #colonne_300 .bloc .titre_bloc a {
		background: #3C8DF2;
		color: #ffffff;
		font-weight: bold;
	}
	
	.blog #colonne_300 #pub_300_250.adnext {
		display: none;
	}
	
	.blog #colonne_300 .bloc:nth-child(1),
	.blog #colonne_300 .bloc:nth-child(5),
	.blog #colonne_300 .bloc:nth-child(8),
	.blog #colonne_300 .bloc:nth-child(9) {
		display: none;
	}
	
	#add_comment {
		background: #E5F2F9;
		margin: 0;
	}
	
	#add_comment fieldset {
		background: 0;
	}
	
	.showsmallscreen {
		display: block;
	}
	
	.hidesmallscreen {
		display: none;
	}
  
}

/* Ecran sous les 980 */
 @media screen and (max-width: 979px) {

	.w620,
	.w580,
	.produit_google_resume {
		max-width: 980px;
    width: 95%;
    margin: auto;
    float: none !important;
  }
	
	#texte, #colonne_300 {
		float: none;
		margin: 1em auto;
	}
	
	#membre {
		display: none;
	}
	
	#pub_728_90.stay {
		max-width: 100%;
		height: auto !important;
		margin: 0 auto;
	}
  
  #sous_menu .adsense_thematique {
    display: none;
  }
  
  /**
	 * Produits Google
	 */
	.produit_google_resume {
		float: none;
		width: 95%;
		margin: 10px auto;
		max-width: 980px;
	}
	
	.form-recherche-produits {
		float: none !important;
		width: 100% !important;
	}
	
	.google-bloc-2 {
		float: none !important;
		margin: auto;
	}
	
	#texte img {
		max-width: 100%;
		height: auto !important;
	}
	
  .sidebar,
  .sidebar-336 {
		float: none;
		width: 100%;
		margin: auto;
	}
  
}

/* Ecran sous les 1015px */
@media screen and (max-width: 1014px) {

	.accueil .gros_logo,
	.blog .gros_logo {
		display: none;
	}
	
	.accueil .petit_logo,
	.blog .petit_logo {
		display: block;
		margin-top: 20px !important;
		margin-bottom: 37px !important;
	}

}

/* Ecran sous les 830px */
@media screen and (max-width: 829px) {

  .formation-info {
    float: none;
    margin: 10px auto;
  }

}

/* Ecran sous les 799px */
@media screen and (max-width: 799px) {

	/**
	 * Accueil
	 */
	.accueil #texte_accueil {
		width: 100%;
		float: none;
	}
	
	.accueil #colonne_300 {
		float: none;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	
	.accueil #colonne_300 > div {
		width: 300px;
	}
	
	.accueil #colonne_300 .bloc h2 {
		background: none;
		font-weight: bold;
		color: #fff;
		background: #3C8DF2;
	}
	
	.accueil #colonne_300 .a_la_une .titre_bloc {
		background: none;
		font-weight: bold;
		color: #fff;
		background: #f2a539;
	}
	
	.accueil #colonne_300 .last_topics li:nth-child(n+9),
	.accueil #colonne_300 div:nth-child(n+6),
	.accueil #colonne_300 div.google_plus {
		display: none;
	}
	
	.accueil #colonne_300 .a_la_une,
	.accueil #colonne_300 .bloc {
		background: none;
	}
	
	.accueil #texte_accueil div.post:nth-child(n+18),
	.accueil #texte_accueil hr:nth-child(n+18) {
		display: none;
	}
  
  /**
   * Forum
   */
  p.pub_rm_inter_posts_forum {
    margin: 15px 0;
  }
  
  
  .avis_formulaire table {
    width: 100% !important;
  }
  
}

/* Ecran sous les 790px */
@media screen and (max-width: 789px) {
	
	/**
	 * Menu Mobile
	 */ 
	.slicknav_menu {
		display: block;
		background: #3C8DF2;
		position: fixed;
		width: 100%;
		z-index:999999999;
	}
	
	.slicknav_menu ul,
	.slicknav_meni li {
		float: none !important;
		margin: 0 !important;
	}
	
	.jaune li a.actif, .jaune li a:hover,
	.jaune li a.actif span, .jaune li a:hover span {
		background: #ccc;
	}
	
	.slicknav_btn {
		float: left;
	}
	
	#menu, #sous_menu {
		display: none;
	}
	
	#global {
		padding-top: 60px;
	}
	
	.accueil .petit_logo,
	.blog .petit_logo {
		margin: 0 !important;
	}
	
	.petit_logo {
		display: block;
	}
	
	.gros_logo {
		display: none;
	}
	
	.logo, .petit_logo {
		position: fixed;
		z-index:9999999999;
		top: 5px;
		left: 115px;
		/*text-align: center;*/
		margin: 0 auto 1em !important;
	}
	
	#header .search {
		position: fixed;
		top: 10px;
		right: 20px;
		z-index: 9999999999;
	}
	
	.logo img, .petit_logo img {
		width: 200px !important;
		height: 40px !important;
	}
	
	.input-text {
		max-width: 500px;
		width: 80%;
	}
	
	/**
	 * Accueil
	 */		
	.accueil #header {
		margin-bottom: 5px;
	}
	
	/* Form Accueil */
	.accueil #right_box {
		width: 100%;
		padding: 0;
		margin-bottom: 0 !important;
	}
	
	.accueil #right_box form {
		background: none;
		padding: 5px 10px;
	}
	
	.accueil #right_box fieldset {
		background: none;
		padding:0;
		margin: 0;
	}
	
	.accueil #right_box form input#q {
		margin: 0;
		height: initial;
		padding: 5px 10px;
		box-sizing: border-box;
		width: 100%;
		float: left;
	}
	
	.accueil #right_box form input[type=submit] {
		display: block;
		height: initial;
		width: initial;
		padding: 5px 10px;
		float: right;
		margin: -25px 0 0 0;
	}
	
	.accueil #newsletter {
		margin:0 auto 5px;
	}
	
	.accueil #newsletter input {
		height: initial;
		width: initial;
		margin: 0;
		padding: 5px;
	}
	
	.accueil form.cse-search-box {
		margin: 15px 0;
	}
	
	table.partenaires {
		padding: 5px;
	}
	
	.partenaires td {
		display: table-row;
	}
	
	.blog #colonne_300 {
		flex-direction: column;
		align-items: center;
	}
	
	.blog #colonne_300 .bloc {
		width: 100%;
		max-width: 300px;
	}
	
	/**
	 * Structure générale
	 */
	#header {
		padding: 0;
		margin: 0 auto;
	}
	
	#fil_ariane {
		margin: 5px 0 5px 13px;
		padding: 0;
	}
	
	#right_box {
		margin:0 auto !important;
		float: none;
	}
	
	#newsletter + #fil_ariane {
		margin-top: 15px;
	}
	
	#newsletter {
		float: none;
		text-align:center;
		margin-top: 0;
	}
	
	
	
	/**
	 *	Annuaire
	 */
	#annuaire2 h1 {
		font-size: 2em;
	} 
	 
	#annuaire2 .pub_interne,
	#pub_728_90 {
		display: none;
	}
	
	#pub_728_90.stay {
		display: block;
		width: 100%;
		box-sizing: border-box;
		margin: 0 auto;
		height: auto;
	}
	
	.recherche_cat_haut {
		display: block;
	}
	
	.recherche_cat_haut form,
	.responsive form {
		margin: 0;
		border: 0;
		box-sizing: border-box;
		background: none;
	}
	
	.recherche_cat_haut p,
	.responsive form p {
		display: none;
	}
	
	.responsive input#q,
	.recherche_cat_haut input#q {
		box-sizing: border-box;
		width: 100%;
		padding: 5px;
		float:left;
	}
	
	.responsive input[type=submit],
	.recherche_cat_haut input[type=submit] {
		margin-top: -27px;
		padding: 5px;
		float: right;
		cursor: pointer;
	}
	
	.responsive input[type=submit]:focus,
	.recherche_cat_haut input[type=submit]:focus {
		background-color: inherit;
		border: 1px solid #000;;
		padding: 5px;
	}
	
  /**
   * Forum
   */
  .postprofile,
  .postbody {
    display: table-row;
    width: 100%;
    float: none;
  }
  
  .postprofile {
    margin-bottom: 10px;
  }
  
  .avatar_forum {
    width: 50px;
    height: 50px;
    float: left;
    margin-right: 10px;
  }
 
  .postprofile dd {
    display: none;
  }
  
  .pagination span a, .pagination span a:link, .pagination span a:visited, .pagination span a:active, .pagination span strong {
  font-size: 1.8em;
  }
  
  dl.codebox code {
    word-break: break-all;
  }
  
  dl dd.posts,
  dl dd.views,
  .forabg dd.lastpost  {
    display: none;
  }
  
  .forabg ul.topiclist dt {
    width: 65%;
  }
  .forabg ul.topiclist dd.topics {
    width: 17%;
  }
  
  h1.forum {
    margin: 10px 0;
  }
  
  fieldset.fields1 dd {
    margin-left: 0;
  }
  
  #register fieldset.fields2 dt {
    width: 100% !important;
    box-sizing: border-box;
    display: block;
    float: none;
    margin: 5px 0;
  }
  
  #register fieldset.fields2 dd {
    margin-left: 0;
  }
  
  #register fieldset.fields2 dd select {
    width: 100% !important;
  }
  
  .postbody h3 {
    display: none;
  }
  
  #page-footer .navbar .linklist li {
    float: none;
    text-align: left;
  }
  
	/**
	 * Classes générales pour le responsive
	 */
	
	.w620 {
		max-width: 980px;
		margin: auto;
	}
	
	.left {
		float: none;
	}
	
	
	
	.hidetablet {
		display: none !important;
	}
	
	.showtablet {
		display: block;
	}
  /*
  a {
    word-break: break-all;
  }
  */
}


/* Ecran sous les 700px */
@media screen and (max-width: 699px) {

	table.emplacement {
		width: 100%;
	}

	table.emplacement td {
		display: table-row;
		width: 100%;
	}
	
	form#cse-search-box.gros_form input[type=text] {
		width: 80%;
	}
  
  .commande-recherche {
    float: none;
    text-align: left;
  }
  
  .commande-recherche div {
    margin: 0;
  }
  
  .commande-recherche input[type=text] {
    width: 80% !important;
  }
  
  .encadre_outils input[type=text] {
    max-width: 400px;
    width: 80% !important;
  }
  
  .avis_formulaire table td {
    display: table-row;
    width: 100% !important;
    text-align: left;
  }
  
  /*
  .search_annuaire input[type=text] {
    padding: 10px;
  }
  
  .search_annuaire input[type=submit] {
    float: none;
    width: 100%;
    margin: 0 auto;
    position: static;
    border-top: 0;
  }
  */

/* Ecran sous les 570px */
@media screen and (max-width: 569px) {

	/**
	 * Accueil
	 */	
	/*
	.accueil #pub_300_250,
	.accueil .last_topics,
	.accueil #___plus_0,
	.accueil #colonne_300 div.bloc:nth-child(7),
	.accueil #colonne_300 div.bloc:nth-child(8),
	.accueil #colonne_164 div.bloc:nth-child(2),
	.accueil #colonne_164 div.bloc:nth-child(4),
	.accueil #colonne_164 div.bloc:nth-child(6),
	.accueil #colonne_164 p,
	.accueil #colonne_164 iframe,
	.accueil #colonne_164 ul {
		display: none !important;
	}
	*/
	.accueil #colonne_164 {
		width: 300px;
		flex-direction: column;
	}
	
	.accueil #colonne_300 div.bloc,
	.accueil #colonne_164 div.bloc {
		background: none;
		width: 300px;
	}
	
	.accueil #colonne_300 div.bloc h2,
	.accueil #colonne_164 div.bloc h2 {
		background: #3C8DF2;
		padding: 10px;
	}

	#corps_annuaire2 .liste-sous-cat td {
		display: table-row;
	}

	.recherche-produits-google input[type=text] {
		width:80% !important;
	}
	
	.alignright, .alignleft {
		float: none !important;
		margin: auto !important;
	}
	
	img.alignright,
	img.alignleft {
		display: block;
	}
	
	.google-bloc-3 {
		text-align: center;
	}
	
	form.cse-search-box input[type=text] {
		width: 60%;
	}
	
	iframe {
		max-width: 100%;
	}

	form#contact input[type=text],
	form#contact textarea {
		width: 80%;
	}
	
	form#cse-search-box.gros_form input[type=text] {
		width: 100%;
		margin-bottom: 10px;
	}
	
	.article_partage_rs td {
		display: table-row;
		width: 100% !important;
	}
	
}

/* Ecran sous les 500px */
@media screen and (max-width: 499px) {

	#global {
		width: 100%;
	}

}

/* Ecran sous les 400px */
@media screen and (max-width: 399px) {

	.vignette-fiche-site {
		float: none !important;
		margin: 5px auto !important;
		display: block !important;
	}
	
	#right_box {
		width: 320px;
	}
  
  .logo,
  .petit_logo {
    top: 10px;
  }
  
  .logo img,
  .petit_logo img {
    width: 150px !important;
    height: 30px !important;
    margin-top: 
  }
  
  #newsletter label {
    display: block;
  }
  
}