/*
Theme Name: Vilain Bon
Author: Norit Simonneaux
Author URI: http://behance.net/nori-t/
Description: The theme for Vilain Bonhomme edited and created by Norit Simonneaux.
Version: 2.0
License: GNU General Public License
License URI: license.txt
Tags: white, light, gray, three-column, right-sidebar
*/



html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

@font-face {
    font-family: 'Economica';
    src: url('fonts/Economica.woff') format('truetype');
    font-weight: 400; /* Poids de la police (Regular) */
    font-style: normal;
}



/* Cible l'input qui sert de toggle */
.nav-toggle {
    /* Vos règles existantes: position: absolute; left: -9999px; opacity: 0; */
    
    /* AJOUTEZ CECI pour supprimer l'apparence par défaut */
    -webkit-appearance: none !important; /* pour les navigateurs basés sur Webkit (Chrome, Safari) */
    -moz-appearance: none !important;    /* pour Firefox */
    appearance: none !important;         /* standard */
    
    /* AJOUTEZ CECI pour s'assurer qu'aucune bordure/marge par défaut ne persiste */
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    
    /* Assurez-vous qu'elle soit invisible/hors-écran */
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}




h1, h2{font-family: 'Economica', Arial, Helvetica, sans-serif; text-transform: uppercase; font-weight: 400;}
h2.big{font-size: 1.5em;}
h3{font-family: Georgia, 'Times New Roman', serif; font-size: 12px; font-style: italic; color: #000;}

body{
	background: url(images/bg2.gif) repeat #222;
}

#background{
	margin-top: 15px;
	background: url(images/bg.gif) repeat #eee;
	width: 100%;
	padding-bottom: 40px;
}

ul, li{list-style: none;}

a {border: none; text-decoration: none;}
a:hover {text-decoration: none;}
a img{border: none;}

#container{
	width: 960px;
	margin: 0 auto 0 auto;
	display: block;
	overflow: hidden;
}

.left{float: left;}
.right{float: right;}
.mtop{margin-top: 28px}
.blok{display: block; overflow: hidden;}



/* -------------------- HEADER -------------------- */


#head {
	width: 100%;
	overflow: hidden;
	display: block;
	background: url(images/fade.png) top repeat-x;
}


#header {
	text-align: center;
	position: relative;
	width: 960px;
	margin: 0 auto;
}

#header a.logo{
	width: 200px;
	height: 200px;
	background: url(images/logo.png) center center no-repeat;
	margin: 20px auto 20px auto;
	display: block;
	overflow: hidden;
}



/* -------------------- SOCIAL -------------------- */


#header #social{
	margin-top: 5px; 
    float: right; 
    position: relative;
}

#header #social ul{
	list-style-type: none;
}
#header #social li{
	list-style-type: none;
	float: right;
	margin: 10px;
}

#header #social a.google{
	display: block;
	overflow: hidden;
	width: 30px;
	height: 29px;
	background: url(images/social.png) left top no-repeat;
}
#header #social a:hover.google{
	background: url(images/social.png) left -30px no-repeat;
}
#header #social a.facebook{
	display: block;
	overflow: hidden;
	width: 30px;
	height: 29px;
	background: url(images/social.png) -42px top no-repeat;
}
#header #social a:hover.facebook{
	background: url(images/social.png) -42px -30px no-repeat;
}
#header #social a.twitter{
	display: block;
	overflow: hidden;
	width: 30px;
	height: 29px;
	background: url(images/social.png) -84px top no-repeat;
}
#header #social a:hover.twitter{
	background: url(images/social.png) -84px -30px no-repeat;
}
#header #social a.rss{
	display: block;
	overflow: hidden;
	width: 30px;
	height: 29px;
	background: url(images/social.png) -125px top no-repeat;
}
#header #social a:hover.rss{
	background: url(images/social.png) -125px -30px no-repeat;
}



/* -------------------- MENU -------------------- */

#band{width: 100%; height: 60px; overflow: hidden; display: block; background: url(images/band.png) top repeat-x;}

#menu{
	margin-top: 18px;
	font-family: 'Economica', Arial, Helvetica, sans-serif;
	/*font-family: Georgia, 'Times New Roman', serif;*/
	font-size: 1em;
	font-weight: 400;
	font-weight: normal;
	text-transform: uppercase;
	display: block;
	position: relative;
	overflow: hidden;
	float: left;
}
#menu ul{
	height: 22px;
	list-style-type: none;
	text-align: center;
	position: relative;
	float: left;
	overflow: hidden;
	display: block;
}
#menu li{
	float:left;
	display:block;
	overflow: hidden;
	border-right: 1px solid #000;
	padding: 0 20px;
}
#menu li.first{
	padding-left: 0px;
	border: none;
}
#menu li a{
	text-decoration: none;
	color: #000;
	display:block;
}
#menu li a:hover{
	color: #444;
}
#menu a.home{
	/*background: url(images/home.png) left top no-repeat;*/
	width: 70px;
	height: 22px;
	display: block;
	overflow: hidden;
	float: left;
}
#menu a.home:hover{
	background: url(images/home.png) left -22px no-repeat;
}


/* -------------------- CONTENT -------------------- */

#content{
	position: relative;
	display: block;
	overflow: hidden;
}

#content p{font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #000;}

#content p a{color: #000; font-weight: bold;}

#content #center{
	width: 960px;
}

/* -------------------- AFFICHAGES CATEGORIES -------------------- */

.categorie{
	font-family: 'Economica', Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: 400;
	text-transform: uppercase;
}
.categorie ul{
	margin-top: 3px;
}
.categorie li{
	margin: 0 5px 8px 0;
	float: left;
}
.categorie li a{
	color: #fff;
	background: #000;
	padding: 2px 8px;
}

/* -- PAGES CATEGORIES -- */

#cattitle{
	margin: 0 auto;
	display: block;
	overflow: hidden;
	text-align: center;
}
#cattitle .style{margin: 0 auto; display: block; overflow: hidden; width: 200px; height: 140px; background: url(images/style.png) top center no-repeat;}
#cattitle .portrait{margin: 0 auto; display: block; overflow: hidden; width: 200px; height: 140px; background: url(images/portrait.png) top center no-repeat;}
#cattitle .deambulation{margin: 0 auto; display: block; overflow: hidden; width: 200px; height: 140px; background: url(images/deambulation.png) top center no-repeat;}
#cattitle .litterature{margin: 0 auto; display: block; overflow: hidden; width: 200px; height: 140px; background: url(images/litterature.png) top center no-repeat;}
#cattitle .retrospective{margin: 0 auto; display: block; overflow: hidden; width: 200px; height: 140px; background: url(images/retro.png) top center no-repeat;}


#cattitle h2{
	height: 32px;
	display: block;
	overflow: hidden;
	line-height: 32px;
	text-align: center;
	clear: both;
}

.margin{
	margin-right: 25px;
}

/* -------------------- RESULTAT RECHERCHES -------------------- */
.field3{
	display: block;
	overflow: hidden;
	width: 500px;
	height: 28px;
	padding: 3px 8px;
	line-height: 23px;
	border: 3px solid #000;
	background: transparent;
	margin: 0 auto 15px auto;
}
.black2{
	border: none;
	padding: 2px 0;
	margin: 2px 0;
	width: 460px;
	background: url(images/border.png) center bottom repeat-x;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
}

.actu2{
	width: 197px;
	height: 170px;
	float: left;
	margin: 35px 25px 0 0;
	overflow: hidden;
}
.actu2 h2 a{
	margin-top: 10px;
	display: block;
	text-align: center;
	color: #000;
	text-decoration: none;
}
.actu2 .date{
	font-family: Georgia, 'Times New Roman', serif; 
	font-size: 12px; 
	color: #666; 
	font-style: italic;
	text-align: center;
}
.actu2 .box{
	width:197px;
	height: 110px;
	overflow: hidden;
	display: block;
}
.actu2 .box img{
	width: 197px;
	height: auto;
}

/* -------------------- ARTICLE -------------------- */

#titre{margin: 20px 0; display: block; overflow: hidden;}

.colonne{
	margin-top: 20px;
	width: 170px;
	float: left;
	padding-right: 25px;
	display: block;
	overflow: hidden;
	background: url(images/ligne.png) right center no-repeat;
	text-align: center;
}

.colonne .cbox{margin: 20px 0;}
.colonne .cbox #user{
	display: block;
	overflow: hidden; 
	line-height: 14px;
	font-family: Georgia, 'Times New Roman', serif; 
	font-size: 12px; 
	color: #666; 
	font-style: italic;
}
.colonne .cbox #user img{margin: 0 auto 5px auto; display: block;}

.colonne .cbox .media{
	margin-bottom: 10px;
	height: 23px;
	display: block;
	overflow: hidden;
}
.colonne .cbox .media .bouton{position: relative;}
.colonne .cbox .media .bouton a{
	width: 100px;
	margin: 0 auto;
	line-height: 23px;
	height: 23px;
	display: block;
	background: #222;
	border-radius: 5px;
	font-family: 'Economica', Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	font-size: 14px;
	color: #fff;
}
.colonne .cbox .media .bouton a:hover{background: #000;}

.colonne .cbox #tagged{
	display: block;
	overflow: hidden;
	font-family: Georgia, 'Times New Roman', serif;
	font-style: italic;
}
.colonne .cbox #tagged li{
	margin: 0 5px 5px 0;
	display: block;
	overflow: hidden;
	list-style: none;
	float: left;
}
.colonne .cbox #tagged li a{
	display: block;
	overflow: hidden;
	font-size: 10px; 
	padding: 2px 3px;
	border-radius: 5px;
	border: 1px solid #444;
	color: #444;
}
.colonne .cbox #tagged li a:hover{border: 1px solid #000; color: #000;}

.box2{
	width:645px;
	height:340px;
	overflow:hidden;
	display: block;
}
.box2 img{
	width:645px;
	height:auto;
}
.legende{
	width:500px;
	height:auto;
	margin: 10px auto 0 auto;
	font-family: Georgia, 'Times New Roman', serif; 
	font-size: 12px; 
	color: #666; 
	font-style: italic;
	text-align: center;
}
.legende a{color: #666;}
dd{
	height:auto;
	/*margin: 10px auto 0 auto;*/
	font-family: Georgia, 'Times New Roman', serif; 
	font-size: 12px; 
	color: #666; 
	font-style: italic;
	text-align: center;
}
dd a{color: #666;}

.article{
	width: 420px;
	margin-bottom: 20px;
	display: block;
	overflow: hidden;
	float: right;
}
.article p{
	font-size: 13px;
	font-family: Arial, Helvetica, sans-serif;
	color: #000;
	text-align: justify;
	margin-top: 20px;
}
.article p a{
	color: #000;
	font-weight: bold;
}
.article p strong, .article strong{font-weight: bold;}
.article em{
	font-family: Georgia, 'Times New Roman', serif; 
	font-size: 14px; 
	color: #666;
	display: block; 
	font-style: italic;
	text-align: justify;
	width: 380px;
	padding: 5px 0 5px 40px;
	background: url(images/em.png) top left no-repeat;
}
.article img{
	margin: 20px 0;
	width: 420px;
	height: auto;
}
#gallery-1 img{width: 200px; height: auto; margin: 0!important; border: none!important;}

#nav{
	display: block;
	overflow: hidden;
	width: 640px;
	margin-top: 10px;
	padding: 20px 0;
	border-top: 1px dotted #000;
	border-bottom: 1px dotted #000;
}
.navleft{
	float: left;
	width: 120px;
	display: block;
	overflow: hidden;
}
.navleft a{
	font-family: 'Economica', Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #fff;
	text-align: center;
	line-height: 20px;
	width: 120px;
	height: 20px;
	background: #222;
	display: block;
	overflow: hidden;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.navleft a:hover{background: #000;}
.navright{
	float: right;
	width: 120px;
	display: block;
	overflow: hidden;
}
.navright a{
	font-family: 'Economica', Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #fff;
	text-align: center;
	line-height: 20px;
	width: 120px;
	height: 20px;
	background: #222;
	display: block;
	overflow: hidden;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.navright a:hover{background: #000;}

/* -------------------- STYLE DES CARTES GOOGLE MAPS -------------------- */

.article iframe {
    /* Le filtre Noir et Blanc ! */
    filter: grayscale(100%) contrast(130%) brightness(90%); 
    
    /* Bonus : une bordure noire qui correspond à votre thème */
    border: 3px solid #000 !important; 
    

    /* Optionnel : ajoute une petite marge en dessous */
    margin-bottom: 20px;
}

/* -------------------- FORM-------------------- */

.black{
	border: none;
	padding: 2px 0;
	margin: 2px 0;
	width: 208px;
	background: url(images/border.png) center bottom repeat-x;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
}

#styled{
	width: 650px;
	height: 120px;
	border: 3px solid #000;
	margin-top: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	background: transparent;
}

#submit{
	border: none;
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	background: transparent;
	cursor: pointer;
	float: right;
	display: block;
	overflow: hidden;
}

/* -------------------- 404 -------------------- */

#oops{
	width: 800px;
	display: block;
	background: url(images/oops.png) top center no-repeat;
	margin: 20px auto;
	padding-top: 450px;
	text-align: center;
}
#oops h2{margin-bottom: 20px;}

/* -------------------- ACTU -------------------- */

.block{overflow: hidden; display: block; position: relative; margin-bottom: 35px;}

#content #left {
	width: 670px;
	min-height: 1154px;
	float: left;
	border-right: 1px solid #000;
	margin-top: 30px;

    /* AJOUTS  BOUTONS BAS: */
	position: relative; /* Devient le "cadre" de référence */
	padding-bottom: 100px; /* Crée un espace en bas pour les boutons */
}

#content #left .actu{
	width: 310px;
    min-height: 350px;
	float: left;
	margin: 35px 25px 0 0;
	overflow: hidden;
}
#content #left .actu h2 a{
	margin-top: 15px;
	display: block;
	text-align: center;
	color: #000;
	text-decoration: none;
}
#content #left .actu .date{
	font-family: Georgia, 'Times New Roman', serif; 
	font-size: 12px; 
	color: #666; 
	font-style: italic;
	text-align: center;
}
#content #left .actu .date a.nbe-com{
	padding-left: 10px;
	margin-left: 5px;
	background: url(images/com.png);
	background-repeat: no-repeat;
	background-position: left;
	color: #666;
}

#content #left .actu .box{
	width:310px;
	height: 180px;
	overflow: hidden;
	display: block;
}

#content #left .actu .box img{
	width:100%;
	height: 100%;
	object-fit: cover;
}

#content #left .actu .text{
	margin-top: 15px;
	height: 80px;
	font-size: 13px;
	font-family: Arial, Helvetica, sans-serif;
	color: #000;
	clear: both;
	text-align: justify;
}
#content #left .actu .text a{
	color: #000;
	font-weight: bold;
}
#content #left .actu .more{
	font-size: 14px;
	text-align: center;
	margin: 0 auto 0 auto;
	font-family: 'Economica', Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	margin: 0 auto;
	width: 90px;
	display: block;
}

#content #left .actu .more a{
	color: #fff;
	background: #222;
	border-radius: 5px;
	padding: 5px 0;
	display: block;
}
#content #left .actu .more a:hover{background: #000;}

/* -------------------- COMMENTAIRES -------------------- */

#comment{
	display: block;
	overflow: hidden;
	width: 645px;
}

#comment label{
	color: #000;
	font-family: 'Economica', Arial, Helvetica, sans-serif;
	font-size: 14px;
	text-transform: uppercase;
	width: 120px;
	height: 20px;
	padding: 0 10px;
	display: block;
	overflow: hidden;
	float: left;
}
.cformul{
	display: block;
	overflow: hidden;
	margin: 10px 0;
	width: 644px;
	height: 20px;
	background: url(images/c1.png) no-repeat;
}

.cformul2{
	display: block;
	overflow: hidden;
	margin: 10px 0;
	width: 644px;
	height: 202px;
	background: url(images/c2.png) no-repeat;
}
.cformul2 .ctitre{
	color: #000;
	font-family: 'Economica', Arial, Helvetica, sans-serif;
	font-size: 14px;
	text-transform: uppercase;
	width: 120px;
	height: 20px;
	padding: 0 10px;
	display: block;
	overflow: hidden;
}

.nul{height: 20px; background: transparent; border: none; float: left; width: 490px; height: 20px; padding-left: 5px;}
#nul2{background: transparent; border: none; width: 632px; height: 175px; padding-left: 5px;}

#submit2{
	width: 100px;
	margin: 0 auto;
	line-height: 20px;
	height: 23px;
	display: block;
	background: #222;
	border-radius: 5px;
	font-family: 'Economica', Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	font-size: 14px;
	color: #fff;
	float: right;
	border: none;
	cursor: pointer;
}
#submit2:hover{background: #000;}

.titli{
	display: block;
	overflow: hidden;
	margin: 20px 0;
	text-align: center;
}

#comlist{
	display: block;
	overflow: hidden;
	width: 643px;
	/*border: 1px solid #000;*/
}

li.list{
	border-bottom: 1px dotted #000;
	display: block;
	overflow: hidden;
}

li:nth-child(odd).list{background: transparent;}
li:nth-child(even).list{background: #fff;}

li.list .ava{
	width: 65px;
	margin: 10px;
	float: left;
	display: block;
	overflow: hidden;
}
li.list .com{
	width: 550px;
	display: block;
	overflow: hidden;
	margin: 10px 0;
}
li.list .com .date{
	font-family: Georgia, 'Times New Roman', serif; 
	font-size: 12px; 
	color: #666; 
	font-style: italic;
	float: left;
	margin-bottom: 5px;
}
li.list .com .date a{
	color: #000; 
	text-decoration: none;
}

li.list .com .text{
	font-size: 13px;
	font-family: Arial, Helvetica, sans-serif;
	color: #000;
	clear: both;
}

li.list .com .text a{
	color: #000;
	font-weight: bold;
}

li.list .more{
	font-size: 14px;
	font-family: 'Economica', Arial, Helvetica, sans-serif;
	font-weight: 400;
}

li.list .more a{
	color: #000
}

li.list .credit{
	font-size: 14px;
	font-family: 'Economica', Arial, Helvetica, sans-serif;
	font-weight: 400;
	float: right;
	text-transform: uppercase;
}

li.list .credit a{
	color: #000
}

/* -------------------- INFOS -------------------- */

#conteneur-info{
	width: 420px;
	display: block;
	overflow: hidden;
	margin: 20px auto;
}
#info{
	width: 440px;
	display: block;
}
#info .contact-box{
	width: 200px;
	display: block;
	margin-right: 20px;
	float: left;
	text-align: center;
}
#info .contact-box .nori{
	width: 115px;
	height: 150px;
	display: block;
	background: url(images/avatarbig.png) left top no-repeat;
	margin: 0 auto;
}
#info .contact-box .kevin{
	width: 125px;
	height: 150px;
	display: block;
	background: url(images/avatarbig.png) -115px top no-repeat;
	margin: 0 auto;
}
#info .contact-box .text{
	display: block;
	overflow: hidden;
	margin: 10px 0;
	height: 50px;
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 13px;
	color: #000;
}
#info .contact-box .mail{
	display: block;
	background: url(images/mail.png) top center no-repeat;
	margin: 5px 0;
	padding-top: 20px;
	font-family: Georgia, 'Times New Roman', serif; 
	font-size: 12px;
	font-style: italic;
	color: #000;
}
#info .contact-box .mail a{color: #000;}
#info .contact-box .twitter{
	display: block;
	background: url(images/tw.png) top center no-repeat;
	margin: 5px 0;
	padding-top: 20px;
	text-align: center;
	font-family: Georgia, 'Times New Roman', serif; 
	font-size: 12px;
	font-style: italic;
	color: #000;
}
#info .contact-box .twitter a{color: #000;}
#info .contact-box .facebook{
	display: block;
	background: url(images/fb.png) top center no-repeat;
	margin: 5px 0;
	padding-top: 20px;
	text-align: center;
	font-family: Georgia, 'Times New Roman', serif; 
	font-size: 12px;
	font-style: italic;
	color: #000;
}
#info .contact-box .facebook a{color: #000;}

/* -------------------- RIGHT -------------------- */

#right{
	width: 270px;
	float: right;
	margin-top: 30px;
}
#right .wp-tag-cloud{display: block; overflow: hidden;}
#right .wp-tag-cloud li{margin: 0 5px 5px 0; float: left;}
#right .wp-tag-cloud li a{
	color: #444;
	padding: 2px 3px;
	border: 1px solid #444;
	border-radius: 5px;
	font-style: italic;
}
#right .wp-tag-cloud li a:hover{color: #000; border: 1px solid #000;}

#right h2{
	margin: 20px 0 10px;
}

#right #contact{
	/*border: 1px solid #000;*/
}

#right #contact #nori, #right #contact #kevin{
	padding-left: 70px;
	display: block;
	overflow: hidden;
}
#right #contact #nori p, #right #contact #kevin p{
	font-size: 0.7em;
	font-family: Arial, Helvetica, sans-serif;
}
#right #contact #nori .contact, #right #contact #kevin .contact{
	font-size: 0.8em;
	font-family: 'Economica', Arial, Helvetica, sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	float: right;
	padding: 3px 8px;
	margin: 8px 0;
	display: block;
	background: #222;
	border-radius: 3px;
}
#right #contact #nori .contact:hover, #right #contact #kevin .contact:hover{background: #000;}
#right #contact #nori{
	background: url(images/norit.png) left center no-repeat;
	border-bottom: 1px dotted #000;
}
#right #contact #kevin{
	background: url(images/kevin.png) left center no-repeat;
	margin-top: 10px;
}



#sidebar{
	display: block;
	width: 273px;
}

.field2{
	display: block;
	overflow: hidden;
	width: 248px;
	height: 28px;
	padding: 3px 8px;
	line-height: 23px;
	border: 3px solid #000;
	background: transparent;
}

.submit{
	width: 35px;
	height: 23px;
	line-height: 25px;
	border: none;
	background: transparent;
	float: right;
	font-size: 1em;
	font-weight: bold;
	cursor: pointer;
}

/* -------------------- POPULAR -------------------- */

#conteneur-popular{
	width: 270px;
	height: 170px;
	display: block;
	overflow: hidden;
}
#popular{
	width: 300px;
	display: block;
	overflow: hidden;
}
#popular .pactu{
	width: 127px;
	height: 70px;
	float: left;
	display: block;
	overflow: hidden;
	margin: 0 20px 20px 0;
}
#popular .pactu .pbox{
	width: 127px;
	height: 70px;
	display: block;
	overflow: hidden;
}
#popular .pactu .pbox img{width: 127px; height: auto;}
#popular .pactu a.ptext{
	position: relative;
	text-align: center;
	width: 127px;
	height: 70px;
	top: -70px;
	z-index: 2;
	background: url(images/pbg.png) repeat;
	display: none;
	font-family: Georgia, 'Times New Roman', serif; 
	font-size: 12px; 
	font-style: italic;
	color: #000;
}

/* -------------------- ADVERTISING -------------------- */

.advertising{
	margin: 20px 0;
	width: 250px;
	padding: 10px;
	display: block;
	overflow: hidden;
	background: #ccc;
}
.advertising h3{
	margin-bottom: 5px;
	font-family: Georgia, 'Times New Roman', serif; 
	font-size: 12px; 
	font-style: italic;
	color: #fff;
}
.advertising img{width: 250px; height: auto;}

/* -------------------- FOOTER -------------------- */

#footer{
	width: 100%;
	padding-top: 50px;
	background: url(images/ombre.png) no-repeat top center;
	height: 140px;
	overflow: hidden;
	display: block;
}

#footer #footer-content{
	width: 960px;
	margin: 0 auto 0 auto;
	overflow: hidden;
	display: block;
	position: relative;
}

#footer #footer-content #flogo{
	margin-right: 30px;
	width: 200px;
	height: 50px;
	float: left;
	background: url(images/logo_blanc.png) left top no-repeat;
	overflow: hidden;
	display: block;
}

#footer #footer-content .ours {
	width: 720px;
	display: block;
	float: left;
	list-style: none;
}

#footer #footer-content .ours #fcredit{
	width: 200px;
	display: block;
	overflow: hidden;
	margin: 10px 10px 0 0;
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #444;
	text-transform: uppercase;
}
#footer #footer-content .ours #fcredit a{color: #444;}
#footer #footer-content .ours #fcredit a:hover{color: #666;}

#footer #footer-content .ours #flien{
	width: 200px;
	display: block;
	overflow: hidden;
	margin: 10px 10px 0 0;
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #444;
	text-transform: uppercase;
}
#footer #footer-content .ours #flien li{
	float: left;
	display: block;
	padding: 0 10px;
	list-style: none;
	background: url(images/separateur.png) right center no-repeat;
}
#footer #footer-content .ours #flien li.last{background: none;}
#footer #footer-content .ours #flien a{color: #444;}
#footer #footer-content .ours #flien a:hover{color: #666;}

#footer #footer-content .ours #fsocial{
	width: 220px;
	display: block;
	overflow: hidden;
	margin-top: 5px;
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #444;
	text-transform: uppercase;
}
#footer #footer-content .ours #fsocial li{
	float: left;
	display: block;
	padding: 0 10px;
	list-style: none;
	background: url(images/separateur.png) right center no-repeat;
}
#footer #footer-content .ours #fsocial li.last{background: none;}
#footer #footer-content .ours #fsocial a{color: #444;}
#footer #footer-content .ours #fsocial a:hover{color: #666;}

#footer #footer-content .ours #fmenu{
	width: 700px;
	height: 30px;
	display: block;
	list-style: none;
	background: url(images/separateur-big.png) bottom left no-repeat;
}
#footer #footer-content .ours #fmenu li{
	float: left;
	display: block;
	padding: 5px 25px;
	list-style: none;
	background: url(images/separateur.png) left center no-repeat;
}
#footer #footer-content .ours #fmenu li a{
	color: #999;
	text-decoration: none;
	font-size: 1em;
	font-family: 'Economica', Arial, Helvetica, sans-serif;
	font-weight: 400;
	text-transform: uppercase;
}
#footer #footer-content .ours #fmenu li a:hover{
	color: #fff;
}


/* 1. Cache l'élément par défaut (si vous ne voulez pas qu'il s'affiche en version desktop) */
.footer-bottom {
    display: none;
}


/* ------------------------ SLIDER ------------------------ */

/* Easy Slider */

#slide{
	width: 645px;
	display: block;
	overflow: hidden;
}

#slider{
	width: 645px;
	/*-moz-box-shadow: -15px 15px 0px 0px #000000;
	-webkit-box-shadow: -15px 15px 0px 0px #000000;
	-o-box-shadow: -15px 15px 0px 0px #000000;
	box-shadow: -15px 15px 0px 0px #000000;*/
}
#slider .box{
	width:645px;
	height:340px;
	overflow:hidden;
	display: block;
}
#slider .box img{
	width: 645px;
	height: auto;
}
#slider .text{
	margin-top: 10px;
	height: 70px;
	text-align: center;
}
#slider .text h2{line-height: 25px;}
#slider .text p{font-family: Georgia, 'Times New Roman', serif; font-size: 12px; color: #555; font-style: italic;}

#slider ul, #slider li{
	margin:0;
	padding:0;
	list-style:none;
}


#slider li{ 
	width:645px;
	height:400px;
	overflow:hidden;
}

#prevBtn, #nextBtn{ 
	display:block;
	width:20px;
	height:27px;
	position:absolute;
	left:-20px;
	top:71px;
	z-index:1000;
}

#nextBtn{ 
	left:645px;
}

#prevBtn a, #nextBtn a{  
	display:block;
	position:relative;
	width:20px;
	height:27px;
}

#nextBtn a{}





/* numeric controls */	

ol#controls{
	margin: 20px auto 30px auto;
	padding: 0;
	height: 20px;
	font-family: 'Economica', Arial, Helvetica, sans-serif;
	font-weight: 400;
	font-size: 13px;
	display: block;
	width: 120px;
}

ol#controls li{
	margin:0 7px;
	padding:0;
	float:left;
	list-style:none;
}

ol#controls li a{
	float:left;
	height: 20px;
	line-height:20px;
	background:#222;
	color:#fff;
	padding: 2px 10px;
	border-radius: 5px;
	text-decoration:none;
}

ol#controls li.current a{
	background:#000;
}

ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}


/* -------------------- CORRECTION FINALE NUAGE D'ÉTIQUETTES (Force le style) -------------------- */

/* Cible le widget contenant le nouveau bloc */
.widget_block.widget_tag_cloud {
    font-family: Arial, Helvetica, sans-serif; /* Fallback si Georgia n'est pas chargée */
}

/* Cible le conteneur des tags à l'intérieur du bloc */
.widget_block.widget_tag_cloud .wp-block-tag-cloud {
    overflow: hidden; /* LA CORRECTION : Force le bloc à contenir les floats */
    display: block;
}

/* Cible les liens (étiquettes) à l'intérieur du nouveau bloc */
.widget_block.widget_tag_cloud .wp-block-tag-cloud a {
    /* Typographie et Couleur (Ancien style) */
    font-family: Economica, 'Times New Roman', serif !important; /* Force la police */
    font-style: italic !important;
    font-weight: 400 !important; /* Force le retrait du "gras" */
    color: #444 !important; /* Force la couleur grise */
    
    /* Bordure (Ancien style) */
    padding: 2px 3px;
    border: 1px solid #444;
    border-radius: 5px;
    
    /* Mise en page */
    margin: 0 5px 5px 0;
    float: left;
    text-decoration: none;
    font-size: 1em !important; 
    line-height: 1.5; /* Ajout pour espacement vertical */
}

/* Effet de survol (Ancien style) */
.widget_block.widget_tag_cloud .wp-block-tag-cloud a:hover {
    color: #000 !important;
    border: 1px solid #000;
}

/* -------------------- PAGINATION -------------------- */

.pagination {
/*  Avant changement boutons bas  clear: both;         /* ← LE POINT CRUCIAL */
    /*margin-top: 800px;    /* ensuite les marges fonctionneront */
    /*margin-bottom: 40px;
    text-align: right;
    padding-right: 40px;
    display: block; */

/* ON DÉTACHE ET ON COLLE EN BAS */
	position: absolute;
	bottom: 40px;      /* À 40px du bas du cadre #left */
	left: 0;
	
	/* ON FORCE LA LARGEUR */
	width: 100%;       /* Prend toute la largeur de #left */
	box-sizing: border-box; /* Permet au padding de fonctionner avec width: 100% */

	/* ON GARDE TON STYLE */
	text-align: right;
	padding-right: 40px;
	display: block;
    
    /* On supprime les marges qui posaient problème */
    margin-top: 0; 
    margin-bottom: 0;


}

.pagination a, 
.pagination span {
    background: #222;
    color: #fff;
    padding: 5px 12px;
    border-radius: 5px;
    font-family: 'Economica', Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    font-size: 14px;
    margin-left: 10px;
    text-decoration: none;
}

.pagination a:hover {
    background: #000;
}

/* Élément actif (page en cours) */
.pagination .current {
    background: #000;
}



/* ================================================= */
/* STYLE WPFORMS - CORRIGÉ (Cible les bons DIVs)    */
/* ================================================= */

#left .wpforms-container {
    max-width: 600px;
    margin-left: 0;
    margin-top: 30px;
}

/* CIBLE LE CONTENEUR DE CHAMP (le <div>) */
#left .wpforms-field {
    margin-bottom: 8px !important; /* C'EST LA LIGNE QUI SERRE ! */
    padding: 0 !important; /* Retire les paddings bizarres */
}

/* Labels (Individu, Email, etc.) */
#left .wpforms-field-label {
    font-family: 'Economica', Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    color: #000;
    margin-bottom: 3px !important; 
    display: block;
    text-align: left;
}

/* Champs texte et textarea */
#left .wpforms-field input[type="text"],
#left .wpforms-field input[type="email"],
#left .wpforms-field textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #000; 
    background-color: transparent;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    box-sizing: border-box;
    margin-bottom: 0 !important; /* On annule la marge sur le champ lui-même */
    outline: none;
    transition: border-color 0.2s ease-in-out;
}

#left .wpforms-field input[type="text"]:focus,
#left .wpforms-field input[type="email"]:focus,
#left .wpforms-field textarea:focus {
    border-color: #555;
    border-width: 1px;
}

/* Textarea (Commentaire) */
#left .wpforms-field textarea {
    height: 100px;
    resize: vertical;
}

/* Bouton d'envoi */
#left .wpforms-submit {
    width: auto;
    padding: 5px 20px;
    margin: 8px 0 0 0 !important;
    background: #222;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-family: 'Economica', Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    font-size: 12px;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s ease-in-out;
    outline: none;
    display: inline-block;
}

#left .wpforms-submit:hover {
    background: #000;
}

/* Champs Nom (Prénom/Nom) */
/* CIBLE LE CONTENEUR SPÉCIFIQUE */
#left .wpforms-field-name {
    margin-bottom: 8px !important; /* La marge serrée */
}
#left .wpforms-field-row.wpforms-field-has-columns {
    display: flex;
    gap: 10px; 
    margin-bottom: 0 !important; /* Annule la marge ici */
}
#left .wpforms-field-row.wpforms-field-has-columns .wpforms-field-column {
    flex: 1;
    padding: 0 !important;
    margin-bottom: 0 !important;
}

#left .wpforms-field input::placeholder,
#left .wpforms-field textarea::placeholder {
    color: #777;
    opacity: 1;
}
#left .wpforms-field-description {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #c00;
    margin-top: 5px;
}
#left .wpforms-required-label {
    color: #c00;
}


/* ========================================= */
/* ICÔNES DES PAGES (Contact, A Propos, etc.) */
/* ========================================= */

/* Style de base pour ces icônes (copié de ton .style) */
#cattitle [class*="icon-page-"] {
    margin: 0 auto; 
    display: block; 
    overflow: hidden; 
    width: 200px; 
    height: 140px; 
    background-position: top center;
    background-repeat: no-repeat;
}

/* Icône pour la page "Contact" */
#cattitle .icon-page-contact {
    background-image: url(images/avatarbig.png); 
}

/* Icône pour la page "A Propos" */
#cattitle .icon-page-a-propos {
    background-image: url(images/icone-a-propos-titre.png); 
}

/* Icône pour la page "Mentions Légales" */
#cattitle .icon-page-mentions-legales {
    background-image: url(images/icone-mentions-titre.png); 
}




/* ================================================= */
/* == SECTION RESPONSIVE UNIFIÉE (VERSION PROPRE) == */
/* ================================================= */

@media (max-width: 960px) {
             
             /* 1. CONTENEUR */
               #container {
               width: 100%;
               }

/* 2. STRUCTURE LEFT/RIGHT (AVEC AÉRATION) */
#content #left {
	  overflow: hidden !important;

width: 100%;
float: none;
border-right: none;
min-height: auto;
padding-bottom: 100px;

  /* LES 3 LIGNES D'AÉRATION : */
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box; 
}

 #right {
 width: 100%;
 float: none;
 display: none; /* CACHÉ SUR MOBILE */
 }

/* ================== 3. SLIDER / CARROUSEL ================== */
    
        /* On cache TOUT le bloc slider sur mobile */
        #slide {
            display: none !important;
        } 


 /* ========================================= */
/* 2.5. ON RÉPARE LE CONTENU (LA VRAIE FIX)   */
/* ========================================= */

    /* Force le conteneur du header à 100% */
    #header {
        width: 100% !important;
        border-bottom: 1px solid #000 !important; /* Ligne fine et gris clair */
        padding-bottom: 20px !important; /* Espace entre le logo et la ligne */
        margin-bottom: 20px !important; /* Espace entre la ligne et l'article */
    }

    /* Centre le logo et réduit sa taille sur mobile */
    #header a.logo {
        width: 150px !important;  /* Plus petit */
        height: 150px !important; /* Plus petit */
        background-size: contain; /* S'assure que l'image rentre */
        margin: 10px auto; /* Marge réduite */
    }

    

    /* Force les articles "ACTU" à 100% */
    #content #left .actu .box {
        width: 100% !important;
        height: auto !important; /* ANNULE la hauteur fixe de 180px */
    }
    /* (Ta règle pour .actu .box img était déjà bonne) */


    /* Force le formulaire de contact à 100% */
    #left .wpforms-container {
        max-width: 100% !important;
        padding: 0 20px;
        box-sizing: border-box;
    }
    #left .wpforms-field-row.wpforms-field-has-columns {
        display: block !important; 
        gap: 0;
    }
    #left .wpforms-field-row.wpforms-field-has-columns .wpforms-field-column {
        width: 100% !important; 
        padding: 0 !important;
        margin-bottom: 5px !important;
    }


    /* ========================================= */
/* 2.6. FINITION RESPONSIVE (15/11)          */
/* ========================================= */

    /* 1. CACHE LA BARRE DE MENU (les 2 lignes noires) */
    #band {
        background: none !important;
        border: none !important;
        height: 0 !important;
        min-height: 0 !important;
    }
    
    /* 2. AJOUTE DE L'AÉRATION (le "moins large") */
    #content #left {
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box; /* Inclut le padding dans la largeur */
        overflow: hidden !important;

    }
    
    /* 3. RÉPARE LE CARROUSEL (le "défile dans le vide") */
    

/* Cache le titre "ACTU" sur mobile */
#cattitle {
    display: none !important;  
} 



/* #cattitle {
    display: block !important; 
    width: 100% !important;
    text-align: center !important; 
    margin: 20px 0 !important;
}



#cattitle .style {
    margin: 0 auto !important; 
    display: block !important;
    width: 100px !important; 
    height: 40px !important;
    background-size: contain !important; 
}*/

    
/* ========================================= */
/* 4. ARTICLES ACTU - FIX DÉBORDEMENT        */
/* ========================================= */

/* ON FORCE LE BODY ET HTML À 100% */
html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important; /* Empêche le scroll horizontal */
}

/* Container principal */
#container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
}

/* Le conteneur #left avec padding INTERNE */
#content #left {
    width: 100% !important;
    max-width: 100vw !important; /* Largeur de l'écran */
    padding: 0 15px !important; /* Padding interne */
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;

}

/* Chaque article .actu */
#content #left .actu {
    width: calc(100% - 0px) !important; /* 100% MOINS rien (le padding est sur le parent) */
    max-width: 100% !important;
    float: none !important;
    margin: 0 0 -10px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* La box de l'image */
#content #left .actu .box {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

#content #left .actu .box img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
}

/* Titre */
#content #left .actu h2 {
    width: 100% !important;
    text-align: center !important;
    margin: 15px 0 10px 0 !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    word-wrap: break-word !important;
}

#content #left .actu h2 a {
    color: #000 !important;
}

/* Cache extrait et date */
#content #left .actu .text,
#content #left .actu .date {
    display: none !important;
}

/* Bouton centré */
#content #left .actu .more {
    width: 120px !important;
    margin: 10px auto 0 auto !important;
    text-align: center !important;
}

#content #left .actu .more a {
    display: block !important;
    padding: 8px 0 !important;
    background: #222 !important;
    color: #fff !important;
    border-radius: 5px !important;
}


/* -------------------- CORRECTION RESPONSIVE & DÉBORDEMENT -------------------- */

    /* 1. STRUCTURE DE LA PAGE ARTICLE */
    .colonne {
        width: 100% !important;
        float: none !important;
        padding: 0 20px !important;
        background: none !important;
        text-align: center !important;
        margin-bottom: 20px !important;
    }

    .article {
        width: 100% !important;
        float: none !important;
        padding: 0 20px !important;
        box-sizing: border-box !important;
    }

    .article img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        display: block !important;
        margin: 15px 0 !important;
        box-sizing: border-box !important;

    }


/* Grande image en haut */

    .box2 {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
}

.box2 img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}


    /* 2. CARTE GOOGLE MAPS */
    .article iframe {
        width: 100% !important; 
        max-width: 100% !important;
        height: 300px !important;
        display: block !important;
        margin: 20px 0 !important;
    }

    /* 3. NAVIGATION PRÉCÉDENT/SUIVANT */
    #nav {
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        padding: 20px !important;
        box-sizing: border-box !important;
    }

    .navleft, .navright {
        width: 48% !important; /* Prend 48% pour laisser 2% d'espace entre les boutons */
        float: none !important;
    }

    .navleft a, .navright a {
    font-size: 11px !important; /* ← TEXTE PLUS PETIT pour rentrer */
    padding: 5px 5px !important;
    white-space: normal !important; /* Permet le retour à la ligne si besoin */
    word-wrap: break-word !important;

    }

    /* 4. SECTION COMMENTAIRES - FIX DÉBORDEMENT */
    #comment {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 20px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* Formulaire de commentaire */
    .cformul {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        background-size: contain !important;
            background-repeat: no-repeat !important; /* Empêche la répétition */

        padding: 10px !important;
        box-sizing: border-box !important;
    }

    .cformul2 {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;

        padding: 0px !important;
        box-sizing: border-box !important;
    }

    /* Champs de saisie */
    .nul {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #nul2 {
        width: 100% !important;
        max-width: 100% !important;
        height: 70px !important;
        box-sizing: border-box !important;
    }

    #comment label {
        width: 100% !important;
        display: block !important;
        text-align: left !important;
        margin-bottom: 5px !important;
        font-size: 11px !important; /* ← RÉDUCTION */

    }

    .cformul2 .ctitre {
        width: 100% !important;
        display: block !important;
        text-align: left !important;
        margin-bottom: 5px !important;
        font-size: 8px !important; /* ← RÉDUCTION */
        padding-left: 0px !important; /* ← DÉCALE VERS LA DROITE */
        padding-top: 0px !important; /* ← DESCEND UN PEU */


    }

    #submit2 {
        width: auto !important;
        float: none !important;
        display: block !important;
        margin: 5px auto !important;
    }

    /* Liste des commentaires */
    #comlist {
        width: 100% !important;
        max-width: 100% !important;
    }

    li.list .ava {
        width: 50px !important;
        margin: 5px !important;
    }

    li.list .com {
        width: calc(100% - 70px) !important;
        margin: 5px 0 !important;
    }


/* ========================================= */
/* 5. PAGINATION - CENTRÉE ET AÉRÉE */
/* ========================================= */

.pagination {
    position: static !important;
    width: 100% !important;
    margin: 10px 0 !important;
    padding: 0 !important;
    float: none !important;
    text-align: center !important;
    display: block !important;
    clear: both !important;
}

.pagination a, 
.pagination span {
    display: inline-block !important;
    background: #222 !important;
    color: #fff !important;
    padding: 8px 15px !important;
    border-radius: 5px !important;
    font-family: 'Economica', Arial, Helvetica, sans-serif !important;
    text-transform: uppercase !important;
    font-size: 14px !important;
    margin: 5px 5px !important;
    text-decoration: none !important;
}

.pagination a:hover {
    background: #000 !important;
}

.pagination .current {
    background: #000 !important;
}


 /* 5. BAND - CRUCIAL ! */
 #band {
 position: relative !important;
 height: auto !important; /* On retire la hauteur fixe */
 min-height: 60px;
 overflow: visible !important; /* TRÈS IMPORTANT */
 }

/* ========================================= */
/* 6. MENU MOBILE - LE BURGER (100% CSS)     */
/* ========================================= */

    /* On cache la checkbox (ton code était parfait) */
    .nav-toggle {
    position: absolute;
    left: -9999px;
    opacity: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    }

    /* Le label (burger) : visible sur mobile */
    .nav-toggle-label {
        display: block !important;
        
        /* CORRECTION DE LA POSITION : On le "fixe" à l'écran */
        position: fixed !important; 
        top: 40px !important;  /* SOUS la barre d'admin noire */
        right: 15px !important; /* À 15px de la droite */
        
        z-index: 99999 !important; 
        width: 40px !important; 
        height: 30px !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent;
    }

    /* Les 3 barres (Le style du Burger) */
    .nav-toggle-label span {
        display: block !important;
        background: #000 !important; /* Barres NOIRES */
        height: 2px !important;
        width: 100% !important;
        margin-bottom: 6px !important;
        border-radius: 1px !important;
        transition: all 0.3s ease !important;
    }
    .nav-toggle-label span:last-child {
        margin-bottom: 0 !important;
    }

    /* Animation croix quand ouvert (ton code était parfait) */
    .nav-toggle:checked + .nav-toggle-label span:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px);
    }
    .nav-toggle:checked + .nav-toggle-label span:nth-child(2) {
        opacity: 0;
    }
    .nav-toggle:checked + .nav-toggle-label span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }

    /* Style du menu (caché par défaut) */
    #menu {
        display: none; /* CACHÉ PAR DÉFAUT */
        width: 100%;
        margin: 0;
        padding: 0;
        float: none;
        box-sizing: border-box;
        
        /* Positionnement "fixe" */
        position: fixed !important;
        top: 65px !important; /* Sous le bouton burger */
        left: 0 !important;
        
        background: #fff !important;
        z-index: 99990 !important;
        border-top: 2px solid #000 !important;
        box-shadow: 0 4px 6px rgba(0,0,0,0.15) !important;
    }

    /* === LA RÈGLE QU'ON AJOUTE === */
    /* Affiche le menu quand la checkbox est cochée */
    .nav-toggle:checked ~ #menu,
    .nav-toggle:checked + .nav-toggle-label ~ #menu {
     display: block !important;
    }


    /* menu list style (ton code était parfait) */
    #menu .widget,
    #menu ul,
    #menu .widget ul {
        width: 100% !important;
        height: auto !important;
        text-align: center !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }
    #menu li {
        float: none !important;
        border-right: none !important;
        border-bottom: 1px solid #ddd !important;
        padding: 15px 0 !important;
        display: block !important;
        margin: 0 !important;
    }
    #menu li:last-child { border-bottom: none !important; }
    #menu li a { display:block; padding:10px 20px; color:#000 !important; text-decoration:none; font-size:16px; }
    #menu li a:hover { background:#f5f5f5; }

 /* 7. SOCIAL */
        #social {
        display: none !important; /* CACHÉ pour laisser la place au burger */
        }

             /* 8. CONTENU DES PAGES */
      .article {
  width: 100% !important;
 float: none;
padding: 0 20px;
 box-sizing: border-box;
 }

/* 9. SIDEBAR (ton code était parfait) */
#right .field2 {
width: 90%;
margin: 0 auto;
}



/* Cache le spinner de chargement WPForms sur mobile */
.wpforms-submit-spinner,
.wpforms-confirmation-container-full .wpforms-submit-spinner,
div.wpforms-container-full .wpforms-form .wpforms-submit-spinner {
    display: none !important;
}

/* Cache aussi l'overlay de chargement */
.wpforms-submit-overlay {
    display: none !important;
}



/* ========================================= */
/* 10.5. ON RÉPARE L'ENVELOPPE DU FOOTER     */
/* ========================================= */

    #footer {
        height: auto !important;      /* On annule la hauteur fixe */
        overflow: visible !important; /* On annule le "cacher" */
        padding-bottom: 40px;     /* On ajoute de l'espace en bas */
    }



/* ========================================= */
/* 11. ON RÉPARE LE FOOTER (V8 - Photoshop)  */
/* ========================================= */

    #footer #footer-content {
        width: 100% !important; 
    }

    /* On annule tous les flottants */
    #footer #footer-content #flogo,
    #footer #footer-content .ours,
    #footer #footer-content .ours #fcredit,
    #footer #footer-content .ours #flien,
    #footer #footer-content .ours #fsocial,
    #footer #footer-content .ours #fmenu {
        float: none !important; width: 100% !important; margin: 0 !important;
        padding: 0 !important; text-align: center !important; 
    }

    /* 1. CACHER ce qu'on ne veut pas */
    #footer #footer-content .ours #fcredit, 
    #footer #footer-content .ours #fmenu {   
        display: none !important;
    }

    /* 2. CENTRER le logo */
    #footer #footer-content #flogo {
        margin: 0 auto 30px auto !important; 
        background-position: center top !important; 
    }
    
    /* 3. RÉSEAUX SOCIAUX (SANS AUCUNE BORDURE) */
    #footer #footer-content .ours #fsocial {
        margin-top: 30px !important;
        margin-bottom: 20px !important;
        padding-bottom: 0 !important;
        border-top: none !important;   /* PAS DE LIGNE */
        border-bottom: none !important; /* PAS DE LIGNE */
    }
    #footer #footer-content .ours #fsocial li {
        float: none !important; display: inline-block !important; 
        background: none !important; padding: 0 10px !important;  
        border-bottom: none !important; 
    }
    #footer #footer-content .ours #fsocial li a {
        color: #999 !important; text-decoration: none !important;
        font-family: 'Economica', Arial, Helvetica, sans-serif !important;
        font-size: 1em !important; text-transform: uppercase !important;
    }
    #footer #footer-content .ours #fsocial li a:hover {
        color: #fff !important;
    }


    /* 4. LIENS "A PROPOS..." (LES 4 LIGNES) */
    
    /* On annule les bordures sur le conteneur <ul> */
    #footer #footer-content .ours #flien {
        margin-top: 20px !important; 
        margin-bottom: 20px !important;
        padding-bottom: 0 !important; 
        border-top: none !important;   
        border-bottom: none !important; 
    }
    
    /* On met une bordure BASSE sur TOUS les <li> */
    #footer #footer-content .ours #flien li {
        float: none !important;
        display: block !important; 
        background: none !important; 
        padding: 8px 0 !important;
        border-bottom: 1px dotted #000 !important; 
    }
    
    /* ET on ajoute une bordure HAUTE juste au PREMIER <li> */
    #footer #footer-content .ours #flien li:first-child {
        border-top: 1px dotted #000 !important; 
    }
    
    /* (Le style des liens <a> reste le même) */
    #footer #footer-content .ours #flien li a {
         color: #999 !important; text-decoration: none !important;
         font-family: 'Economica', Arial, Helvetica, sans-serif !important;
         font-size: 1em !important; text-transform: uppercase !important;
    }
    #footer #footer-content .ours #flien li a:hover {
        color: #fff !important;
    }


    .footer-bottom {
        display: block !important; /* Rend l'élément visible sur mobile */
        width: 100% !important;
        text-align: center !important; /* Centre le texte */
        padding: 15px 0 !important;
        margin-top: 10px !important;
    }

    .copyright-nori {
        display: block !important;
        font-size: 10px !important; /* Très petit comme demandé */
        color: #999 !important;
        line-height: 1.2 !important;
        font-family: 'Economica', sans-serif !important;
    }


} /* FIN MEDIA QUERY */