/* 
police du logo : Klill 
violet : #993366
*/

/* FONTS */
/* titres : Alice */
@import url('https://fonts.googleapis.com/css2?family=Alice:wght@400;500;600;700&display=swap');
/* chapo : Overpass */
 @import url('https://fonts.googleapis.com/css2?family=Overpass+Mono:wght@500;600&display=swap');
/* texte : Ubuntu */
 @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;600;700;800;900&display=swap');

 
body {margin:0; background:#F5EFF5; }
header, nav, footer, figure, section, aside, article { display:block; }

/************ MISE EN PAGE ET FOND *************/
#page { width:100%; max-width:1190px; text-align:left; margin:10px auto; background:#FFF; font-family:'Alice'; }
#centre { width:850px; float:left; background:#FFF; }
#colD { float:left; width:340px; position:relative; }
#centreHP { padding-top:20px; overflow:hidden;}
#centre_large { width:1000px; padding:0; float:left; text-align:left; }
#centreBoutique { width:1150px; margin: 0; padding:0; float:left; text-align:left; }

.index {width:790px; float:left; padding:0; margin:0 0 10px 20px; }

/* pleine page */
#mainpage { float:none; width:100%; background:#FFF; overflow:hidden; }
.article, .breve {width:75%; margin:0 auto; }
.index.large {width:80%; margin:0 auto; float:none; }

/********* TITRES et textes **************/
H1, H2, H3, H4, H5, H6, H7, FORM { margin:0; padding:0; font-family:'Alice'; }
P { margin:0; padding:0;font-size:15px; color: #555; line-height:22px; text-align: justify;}
A { color:#993366; text-decoration:none; }
H3 {color:#555; margin: 20px 0 0 0; font-weight:normal;}

.imgShadow { box-shadow:0 0 6px #AAA; border:5px solid #FFF; margin:0 0 5px 0; }

/* images flottantes et separateurs */
.imgfL, .article P IMG imgfL {float: left; margin: 0 10px 10px 0 !important; padding:3px; border: 1px solid #CCC; }
.imgfR, .article P IMG imgfR {float: right; margin: 0 0 10px 10px !important; padding:3px; border: 1px solid #CCC; }
.floatstop, .sep {float:none; font-size:0px; height:0px; line-height:0px; margin:0; padding:0; clear:both;}
.floatstop.ccc { border-bottom:1px dotted #CCC; margin:15px 0;}
.floatstopLeft {float:none; font-size:0px; height:0px; line-height:0px; margin:0; padding:0; clear:left;}
.space { float:none; font-size:0px; height:20px; line-height:0px; margin:0; padding:0; clear:both; }
hr {height: 1px; margin: 15px 0 15px 0; padding: 0; color: #CCC; background: #CCC; border: 0;}

/******** HEADER *******/
header { width:100%; height:150px; background:#FFF; box-shadow: 0 2px 8px #CCC; }
header .header-content { width:100%; height:150px; margin:0 auto; padding:0; text-align:center; position:relative; }
.header-content span.logo { width:300px; height:75px; background:url("/images/logo.png") no-repeat left 20px; z-index:3; border:0; padding:0; margin:0 auto; display:block; }
.header-content .logo A { width:300px; height:66px; display:block; }
.header-content span.logo p.slogan { font-size:22px; color:#AAA; font-family: 'Caveat', cursive; margin:15px 0 0 40px; width:300px; }
.header-content .recherche { width:350px; position:absolute; top:30px; right:50px; }
.header-content .recherche .btnOK { width:29px; height:29px; text-align:center; padding:5px 0 5px 0; position:absolute; top:0px; right:-10px; text-align:center; background:#FFF; font-weight:bold; text-transform:uppercase; cursor:pointer; background:url(/img/spriteGIF.gif) no-repeat left -30px; }
.header-content .menuBurger, .header-content .menuX, .header-content .submenuX { display:none; }

/* navigation */
header nav { width:100%; margin:12px auto 0 auto; padding:0; overflow:hidden; border-top:1px solid #EEE;}
nav UL.mainNav  { list-style-type:none; margin:0; padding:0; text-align: center;} 
nav UL.mainNav LI { display: inline-block; font-size:18px; position:relative; margin:0 5px 0 0; padding: 20px 0; }
nav UL.mainNav LI A { color:#565656; font-size:18px; padding:5px 15px 3px 15px; position:relative; text-decoration:none; font-family: 'Alice'; }
nav UL.mainNav LI A:HOVER, nav UL.mainNav LI A.on, .smaller UL.mainNav LI A:HOVER, .smaller UL.mainNav LI A.on { color:#993366; text-decoration:none; }
nav UL.mainNav A.active { color:#993366; }
.mainNav li::after { content:'/'; color:#993366; }
.mainNav li:last-of-type::after { content:'';}

/* sous-rubriques */
UL.subNav { width:auto; background:#CCC; list-style-type:none; margin:0 auto; padding:20px; position:absolute; top:100%; left:50%; display:none; 
	transform: translateX(-50%); z-index: 5; text-align: center; }
UL.subNav LI { width:230px; height:70px; background:#FFF; padding:0; overflow:hidden; display: inline-block; margin:0 20px 15px 0; border-radius:3px; box-shadow:0 0 6px #CCCCCC; position:relative; }
UL.subNav LI A { font-size:18px; color:#666; display:block; margin:0; padding:10px 5px 0 70px; font-family: 'Alice'; text-align:left; }
UL.subNav LI A:HOVER { color:#993366; text-decoration:none; }
UL.subNav LI IMG { float:left; margin-right:5px; padding:3px; border:2px solid #DDD; border-radius: 5px; position:relative; position:absolute; left:5px; top:5px; }

/* header small */
/*#decalFixedHeader { height:130px; }
.smaller { height:90px!important; position:fixed; z-index:900; box-shadow: 0 10px 5px -9px #bbb; top:-100px; transition:transform 0.8s; transform:translateY(100%); border-top:none; }
.smaller .header-content { height:80px; margin:0; border:none; }
.smaller .ssLiens, .smaller .slogan { display:none; }
.smaller span.logo { width:196px; height:50px; background:url("/images/logo_small.png") no-repeat left 20px;}
.smaller nav { margin-top:0px; width:950px; border: none;}
.smaller nav UL.mainNav LI {padding-top: 10px;}
.smaller UL.mainNav LI A { font-size:15px; color:#777; }
.smaller .mainNav li::after {font-size: 15px;}
.smaller UL.subNav { margin-top:10px; }
.smaller .recherche { top:30px; } */

header.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  transform: translateY(0);
  transition: transform 0.3s ease;
}

header.header.hidden {
  transform: translateY(-100%);
}

header.header.fixed {
  transform: translateY(0);
}


/* fil d'ariane */
nav.ariane {margin:30px 0 15px 0; text-align:center; font-size: 13px; line-height:20px; color:#888; font-family:'Ubuntu'; text-transform: uppercase; }
nav.ariane A { font-size: 13px; color:#888; font-style:normal; text-decoration:none; font-weight:normal; border:0; padding:0; margin-right:5px; }
nav.ariane A::after {content:" / "; padding-left:5px; color:#993366; }
nav.ariane A:hover {text-decoration:none; color:#993366; }
nav.ariane A:last-child::after { content:none;}


/************ COLONNE DROITE ***************/

#colD .bloc { width:295px; border: 1px solid #CCC; margin:20px auto; padding:5px; overflow:hidden; }
#colD A { font-family:'Alice'; font-size:18px; color:#993366; font-weight:normal; text-decoration:none; } 

.memerubrique A { margin:5px; padding: 0 0 5px 0; border-bottom: 1px dotted #CCC; overflow:hidden; display:block; vertical-align:middle; background:#FFF; }
.memerubrique A IMG { width:70px; float:left; margin-right:10px; padding:2px; }
#colD .memerubrique.actu A { font-size:17px; margin-bottom:10px; }
#colD .memerubrique.actu IMG { width:290px; float:none; margin:5px auto; padding:0; }
#colD .memerubrique a:hover {text-decoration: underline; color:#777;}
#colD .memerubrique.post A {font-size:16px; }
#colD .memerubrique.post A::before {content:'\00BB'; padding-right:5px; }

.decouvrir { background:#EEE; }
.decouvrir a { display:block; color:#993366; font-size:14px; font-weight:normal; text-decoration:none; padding:0; margin:10px 0 0 10px;}
.decouvrir P {padding-top:5px; color:#666; font-family:'Alice'; font-size:16px; text-align:left; }
.decouvrir a:hover, .avousdejouer a:hover {text-decoration: underline;}
.decouvrir IMG {float:left; width:70px; border:1px solid #CCC; margin:0 10px 0 0;}

.citation h2, .tags h2, .communaute h2, .memerubrique h2, .decouvrir h2, .sondage h2, .surleforum h2, .index .bloc_forum H2, .article .bloc_forum H2, .index .bloc_itw_large H2 { font-size:20px; color:#565656; font-style: normal; font-weight: normal; margin:10px 10px 15px 10px; padding:0 0 10px 0; border-bottom:1px solid #CCC; }
.citation p { font-size:15px; color:#993366; font-style: normal; font-weight: normal; margin: 15px;}
.citation i { color:#444; }
.citation { background:#EEE; }

.tags .nuage { margin:5px 10px 5px 10px; text-align:left;}
.tags a { color:#993366; text-decoration:none; line-height:23px; } 
.tags a:hover { text-decoration:underline; } 

/* boites on en parle sur le forum (col droite et sous-rubrique) */ 
.surleforum { width:295px; padding:5px; margin:20px 0 20px 20px; background: linear-gradient(to bottom, #EEEEEE, #FFFFFF);}
.surleforum A, .article .bloc_forum A, .bloc_forum A { display:block; margin:5px; padding:10px 10px 10px 5px; border-bottom: 1px dotted #CCC; }
.bloc_forum { margin:20px 0 20px 0; padding:15px 0 0 0; }
.bloc_forum A { margin-top:0; background-color:transparent; padding-bottom:5px; }
#colD .bloc_forum A:HOVER, .surleforum A:HOVER { color: #777; }

/* boite communaut� */
.communaute {height:95px;}
.communaute A { padding:10px 0 15px 40px; vertical-align:middle; margin:10px 15px 0 0; }
.communaute A SPAN { width:95px; display:block; float:left; }
.communaute IFRAME { margin-top:10px;}
.communaute A.fb, .social A.fb { background:url("https://www.bienchezsoi.net/img/spriteGIF.gif") 0 -242px no-repeat; }
.communaute A.forum, .social A.forum { background:url("https://www.bienchezsoi.net/img/spriteGIF.gif") 0 -338px no-repeat; }
.communaute A.twitter, .social A.twitter { background:url("https://www.bienchezsoi.net/img/spriteGIF.gif") 0 -290px no-repeat; }
.communaute A.rss, .social A.rss { background:url("https://www.bienchezsoi.net/img/icones/newsletter.png") no-repeat; }

/** FIN STYLE COLONNE DROITE **/


/**************** HOME PAGE ******************************/
.blocActu A { font-family:'Alice'; font-size:18px; line-height:24px; font-weight: normal; color: #222; }
.blocActu A:HOVER {color: #888; text-decoration:none;}
.blocActu IMG { transition: .2s ease-in-out;}

.blocActu.big {width:570px; float:left; position:relative; margin:8px 15px 8px 20px;}
.blocActu.big span.img {overflow: hidden; display: inline-block; width: 600px; height: 338px;}
.blocActu.big IMG {width:570px; margin: 0;  }
.blocActu.big SPAN.titre { width:530px; background: rgba(153, 51, 102,0.7); text-align:center; position: absolute; bottom:30px; padding:20px; display:block; font-size:24px; line-height:28px; color:#FFF; }

.blocActu.small {float:left; width:255px; margin:8px 5px 0 20px; position:relative; }
.blocActu.small span.photo { width:255px; height:355px; overflow: hidden; position: relative; float:left; }
.blocActu.small IMG {width: 100%; height: 100%; object-fit: cover; object-position: center;  }
.blocActu.small SPAN.titre { width:215px; line-height:28px; font-size:24px; color:#FFF; text-align:center; position: absolute; bottom:20px; 
	padding:10px 20px; display:block; background: rgba(121, 120, 120, 0.7);}

/* gros plans */
.bloc_gp { margin:40px 10px; padding:10px 5px 0 5px; overflow:hidden;  }
.bloc_gp .zoom { width:255px; float:left; margin:0 10px 0 20px; padding:0; position:relative; }
.bloc_gp .zoom img { width:255px; border-bottom:2px solid #993366; margin:0; transition: .2s ease-in-out; }
.blocActu img:hover, .bloc_gp .zoom img:hover, .mosaicHP img:hover {filter: brightness(1.2); }
.bloc_gp .zoom A { font-family:'Alice'; font-size:22px; line-height:28px; font-weight: normal; color: #222; display: block; text-align:left; }
.bloc_gp .zoom a:hover, .mosaicHP .quadri A SPAN:hover, .bloc_gp .zoom.trio A:hover, .blocQuiz .quiz A:hover { color: #993366; text-decoration:none; }
.bloc_gp .zoom img A {margin-top:0;}
.zoom SPAN.rub { color:#777; font-size:11px; font-family:'Ubuntu'; font-weight:normal; text-transform:uppercase; display:block; text-align:left; padding:5px 5px 0 5px; }
.zoom SPAN.rub::before, .zoom SPAN.rub::after { content:"";}

.bloc_gp .zoom.quadri {margin:0 20px 0 30px; width: 240px;}
.bloc_gp .zoom.quadri span.photo {width:240px; height:240px; overflow: hidden; position: relative; display:block; border-bottom:2px solid #993366; margin-bottom: 10px;}
.bloc_gp .zoom.quadri IMG {width: 100%; height: 100%; object-fit: cover; object-position: center; }

.bloc_gp .zoom.trio { width: 250px; margin:0 20px 0 30px; overflow:hidden; }
.bloc_gp .zoom.trio span.photo { width:250px; height:300px; overflow: hidden; position: relative; float:left; border-bottom:2px solid #993366; margin-bottom: 10px; }
.bloc_gp .zoom.trio IMG {width: 100%; height: 100%; object-fit: cover; object-position: center;  }
.bloc_gp .zoom.trio span.titre {display: block; clear: both; width:250px;}
.bloc_gp .zoom.trio.big { width: 500px; }
.bloc_gp .zoom.trio.big span.photo { width:500px; height: 313px; overflow: hidden; position: relative; float:left; }
.bloc_gp .zoom.trio.big IMG {width: 100%; height: 100%; object-fit: cover; object-position: center;  }
.bloc_gp .zoom.trio.big span.titre {display: block; clear: both; width:500px;}

.bloc_gp .zoom.trio.doss { width: 340px; height:180px; margin:0 20px;}
.bloc_gp .zoom.trio.doss IMG { }
.bloc_gp .zoom.trio A {width:340px; padding:5px 0; }
.bloc_gp .zoom.trio.doss A SPAN {width:340px; position:absolute; color:#993366; text-shadow: 2px 1px 0 #FFF; display:block; bottom:35px; font-size:22px; 
	padding:5px; background:#FFF; opacity:0.8; text-align: center; }

.bloc_gp H2, .mosaicHP H2, .index h3 {font-size:15px; font-weight:normal; color:#888; width:320px; margin:0 auto 30px auto; padding:0 0 15px 0; font-style:normal; 
	text-align:center; border-bottom:1px solid #EEE; text-transform: uppercase; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

.mosaicHP { margin:30px 15px 10px 15px; padding:10px 5px 0 5px; overflow:hidden; }
.mosaicHP .main {width:350px; float:left; margin:0 15px 0 10px; padding:0; position:relative; } 
.mosaicHP .main.right {float:right; margin:0 10px 0 5px; } 
.mosaicHP .main IMG { width:350px; transition: .2s ease-in-out; margin:0; }
.mosaicHP .main A { font-family:'Alice'; font-size:18px; font-weight: normal; color: #993366; display: block; }
.mosaicHP .main A SPAN {width:340px; position:absolute; color:#993366; text-shadow: 2px 1px 0 #FFF; display:block; bottom:4px; font-size:20px; padding:5px; background:#FFF; opacity:0.8; text-align:center; }
.mosaicHP .quadri {float:left; width:360px; margin:0 10px 15px 10px; padding:7px 3px; background:#EEE; } 
.mosaicHP .quadri IMG {float:left; width:140px; position:relative; margin-right:10px; } 
.mosaicHP .quadri A SPAN { font-family:'Alice'; font-size:18px; line-height:25px; font-weight: normal; color: #993366; display:block; text-align:left; padding-top:5px; }
 
/* diaporama */
.ctendance { width:600px; height:auto; float:left; padding:10px; background:#EEE; margin:20px 0 0 10px; overflow:hidden; position:relative; }
.ctendance IMG { width:600px; height:450px; -webkit-transition: all 1s ease-out; transition: all 1s linear;}
.ctendance A:HOVER IMG {transform: scale(1.1); }
.ctendance .fdTitre { width:580px; position:absolute; bottom:50px; text-align:center; padding:10px; background:#993366; z-index:1; 
opacity:0.8; filter:alpha(opacity=80); color:#FFF; text-transform:uppercase; font-size:25px; font-family:'Alice'; transition: all 2s linear;}
.ctendance A:HOVER .fdTitre { opacity:1; filter:alpha(opacity=100); }
/*.ctendance .fdTitre SPAN { display:table; white-space:nowrap; text-align:center; padding:0 10px 0 10px; font-family:'Ubuntu'; font-size:14px; color:#FFF; }
.ctendance .fdTitre SPAN:before, .ctendance .fdTitre SPAN:after { width:50%; content: ""; display:table-cell; background: url(data:image/gif;base64,R0lGODlhAQABAIAAAP7//wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==) repeat-x left center; }*/

/* selection boutique */
.boutique { width:470px; height:auto; float:left; text-align:center; border:1px solid #DEECF5; background:#EEE; padding:5px; margin:20px 0 0 25px; }
.boutique H2 { font-size:15px; color:#777; text-transform: uppercase; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin:10px 0; text-align:center; font-weight: normal; }
.boutique .each { float:left; width:230px; margin:8px 0;}
.boutique A { display:block; margin:0 auto 10px auto; font-size:15px; }
.boutique A:HOVER IMG { border:1px solid #993366; }
.boutique IMG {border:1px solid #FFF; width:150px; height:150px; margin-bottom:5px; }

/* remontee forum */
.bloc-forum {border:1px solid #DDD; border-radius:10px; padding:10px; margin:40px 30px 20px 30px; overflow:hidden;}
.bloc-forum .illust {float:left; width:350px; margin-right:30px; }
.bloc-forum .topics { float:left; width:670px; }
.bloc-forum .topics H2 {font-size:30px; font-weight:normal; color:#777; width:320px; margin:10px auto 25px auto; padding:0; font-style:normal; text-align:center; font-family: 'Caveat', cursive; }
.bloc-forum .topics .each {margin:12px;}
.bloc-forum .topics .each span.rub {color: #888;}
.bloc-forum .topics .each A:hover { text-decoration:underline; }

/* citation 
.bloc_citation { width:336px; background:#EEE; margin:20px 30px 10px 40px; text-align:center; float:left; }
.bloc_citation h2 { font-size:20px; color:#565656; font-style: normal; font-weight: normal; margin:5px 10px 10px 10px; padding:0 0 5px 0; border-bottom:1px solid #CCC; }
.bloc_citation p { font-size:15px; color:#993366; font-style: normal; font-weight: normal; margin: 15px;}
.bloc_citation i { color:#444; }*/

.news h2, .entrevous h2, .bloc_tendance h2, .bonus h2, .bloc_itw h2, .bloc_quiz h2, .blocQuiz H2 {
	font-size:15px; font-weight:normal; color:#888; margin:0 0 10px 15px; padding:0 0 5px 0; font-style:normal; text-align:left; text-transform: uppercase;
	font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; border-bottom:1px solid #DDD;}

/* rencontre avec */
.bloc_itw { width:500px; height:265px; float: left; margin:20px 10px 0 20px; padding:10px; overflow:hidden; background:#EEE; }
.bloc_itw_small { overflow:hidden; margin:20px 0 0 0; padding:10px ; border-bottom:1px solid #993366; }
.article .bloc_itw_small h3 { font-size:16px; font-weight:normal; text-transform:uppercase; color:#565656; margin:-5px 5px 0 5px; font-style:normal; text-align:left; }
.article .bloc_itw_small A { border:0; }
.bloc_itw_small .uneitw IMG { margin:5px 10px 0 20px; }
.bloc_itw_small .uneitw span { margin:10px 0 10px 0; }

.uneitw A.suite {font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#555; text-decoration: none; font-weight: bold; display:inline;}
.uneitw IMG { float: left; padding: 0; margin:5px 10px 0 5px; border: 1px solid #DDD; width:100px; }
.uneitw.HP IMG { width:300px; }
.uneitw IMG:hover { border: 1px solid #993366; }
.uneitw A { font-family:'Alice'; font-size:18px; line-height:24px; color:#993366; margin: 0; padding:5px 0 0 0; display: block; text-align:center; }
.uneitw A:hover { text-decoration:underline; }
.uneitw p { font-size: 12px; padding: 3px; font-weight: normal; }
.uneitw H3 { font-size: 20px; font-weight: normal; color: #777; margin: 0 0 0 5px;}
.uneitw span { font-family:'Alice'; font-size:16px; color:#565656; display: block; margin:30px 0 10px 0; text-transform:uppercase; text-align:center; }

/* quiz */ 
.blocQuiz {width:550px; margin:20px 0 0 30px; float:left; overflow:hidden;}
.blocQuiz .quiz {width:260px; height:230px; float:left; text-align:center; margin: 0 15px 0 0;}
.blocQuiz .quiz A { font-family:'Alice'; font-size:18px; line-height:22px; color:#333; display:block; margin:10px 0 0 0;  }
.blocQuiz .quiz IMG {width: 250px; border-bottom:1px solid #993366; padding-bottom:8px; margin:0 0 5px 0;}

.entrevous { width:260px; text-align:left; float:left; border:1px solid #DDD; border-width:3px 1px 1px 1px; padding:5px; background:#FFF; }
.entrevous { margin:5px 0 0 0; }
.entrevous br { display:none;}
.entrevous a {	font-size: 13px; color: #FF874D; padding:3px 0 5px 20px; margin:5px 0 10px 0; text-decoration:none; border-bottom:1px dotted #CCC; background:url("https://www.bienchezsoi.net/img/spriteGIF.gif") 0 -381px no-repeat; display:block; }
.entrevous a:hover {background-color:#EEE; color:#F60; text-decoration: none; }
.thumbnail { float:left; border:2px solid #FCE6D1; margin:5px 3px 0px 0; padding:0px; }

/* sondage */
.sondageHP { text-align:left; border:1px solid #CCC; margin:50px auto; padding:10px; width:1000px; overflow:hidden; }
.sondageHP H2 { width:250px; padding:10px; margin:-30px auto 0 auto; background:#CCC; text-align:center; font-size:25px; font-weight:normal; color:#666; font-family: 'Caveat', cursive;  }
.sondageHP .grosplan { position:relative; overflow:hidden; margin:30px 20px 0 30px; padding:0; }
.sondageHP img { width:350px; float:left; margin:0 20px 0 0; }
.sondageHP H3 {color:#993366; font-size:24px; font-weight: normal; margin: 0; padding: 0 0 20px 0; display: block; }
.sondageHP P { font-size:15px; line-height:22px; }
.sondageHP A { width: 50px; float:right; text-align:center; text-transform:uppercase; font-size:13px; margin: 10px 0 0 0; padding:5px; display:block; background:#993366; color:#FFF;}

/* bloc newsletter */
.blocNewsletter { background:#EEE; width:98%; margin:30px auto; padding: 10px 0; text-align:center; overflow: hidden;}
.blocNewsletter P {line-height:20px; margin:10px 20px; }
.blocNewsletter H3 { color:#993366; font-size:24px; font-weight: normal; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin:0; }
.blocNewsletter input.champnl { border:1px solid #993366; width:300px; font-size:16px; padding:5px; margin:5px;  color:#666;}
.blocNewsletter input.send { background:#993366; font-size:16px; padding:5px; color:#FFF; cursor:pointer;}

/* bloc social */
.social {background: #EEE; padding:10px; margin: 20px 0 10px 20px; width:400px; float: left;}
.social H2 { text-align:center; font-size:20px; font-weight:normal; text-transform:uppercase; color:#666; margin: 0 0 5px 0; }
.social A { width:170px; height:38px; float:left; padding:10px 0 0 5px; margin:10px 0 5px 10px; border-bottom:2px dotted #FFF; overflow:hidden; color:#993366; font-size:16px; }
.social A.forum {color:#993366; font-size:16px;}

/** FIN STYLE HP **/


/************ INDEX RUBRIQUES ***************/
#centreHP.indexcat h1 { font-family:'Alice', serif, Arial, serif; font-size:30px; line-height:42px; font-weight:normal; color:#993366; margin:20px 50px; padding:0 0 10px 0; text-align: center; }
#centreHP.indexcat p.chapo { font-family:'Alice'; font-size:15px; color:#555; line-height:25px; text-align: center; padding: 0; margin: 0; } 
.index {}
.index p.citation {margin: 5px 0 15px 0; font-style:italic; background:none;}
.index P {font-size:16px; color:#666; line-height:24px; text-align: justify; padding: 0; margin: 0 10px 20px 10px; display:block;} 

.each_rub { border: 1px solid #CCC; overflow: hidden; margin: 10px; padding: 10px;}
.each_rub IMG { float: left; margin-right: 10px; width:50px;}
.each_rub H3 { font-size:26px; font-weight:normal; color:#993366; border-bottom:1px dotted #CCC; padding:0 0 5px 0; margin:0 10px 20px 10px; text-align: left; }
.each_rub A { display: block; color:#444; margin:10px 0 0 60px; font-size:16px; }

.bloc_gp A.plus { width:185px; font-family:'Alice', Arial, serif; display:block; background:#993366; color:#FFF; padding:5px; margin: 20px auto;
	font-weight: normal; font-size:16px; text-align:center; }
#centreHP.indexcat h1, #centreHP.indexcat p.chapo {margin:5px 50px;}

.bloc_itw_large { margin:20px 50px; padding:15px 0 0 10px; overflow:hidden; background:#EEE; }
.bloc_itw_large H2 { color: #565656; font-family: 'Alice',Georgia,Times,serif; font-size: 25px; font-weight: normal; margin:10px; padding:0 0 10px 0; border-bottom:1px solid #CCC; }
.bloc_itw_large .each { margin:10px; background:#FFF; overflow:hidden; float: left; width: 48%; }
.bloc_itw_large .each IMG { float:left; margin-right:10px; width:250px; }
.bloc_itw_large SPAN.titre {font-family: 'Alice',Georgia,Times,serif; font-size:20px; padding-top:15px; display:block }
.bloc_itw_large P {color:#555; text-align: left; margin-top: 30px;}

/************ SOUS-RUBRIQUES **************/
.index H2 {font-weight:normal; color:#333; margin:20px 0; }
.index H2 IMG {position:relative; vertical-align:middle; width:50px; }
.index h4 {font-family:'Ubuntu'; font-size: 13px; color: #555; font-style: normal; font-weight: normal; margin: 0px 0px 5px 0px;}

/* premieres breves index */
.IndexActu { width:350px; float:left; margin:0 20px 10px 20px; position:relative; }
.IndexActu A { font-family:'Alice'; font-size:18px; font-weight: normal; color: #993366; }
.IndexActu A:HOVER {color: #888; text-decoration:none;}
.IndexActu IMG { width:350px; }
.IndexActu A SPAN { width:350px; position:absolute; padding:10px 0 10px 0; left:0; bottom:0; background:#FFF; z-index:2; opacity:0.8; filter:alpha(opacity=80); text-align:center; }

/* liste articles et breves */

.container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 30px; 
    justify-content: flex-start;
}
.listing {
    flex: 0 0 290px;
    border-bottom: 1px dotted #CCC;
    box-sizing: border-box;
    padding: 0;
}

.listing.news { height:335px; margin-bottom:20px; }
.listing.result { height:340px; margin-bottom:30px; }
.listing.post { height:200px; margin-bottom:30px; }
.listing.result P { text-align:center; margin:0; }
.listing IMG { width:290px; height:185px; margin:10px auto; display:block; transition: .2s ease-in-out; }
.listing img:hover {filter: brightness(1.2); }


.listing IMG.crop { width:290px; height:185px; }
.listing SPAN.titre { font-size:22px; margin:20px 0; display:block; font-family:'Alice', serif, Arial, serif; text-align:center; }
.listing A SPAN.titre {color: #333;}
.listing A:hover SPAN.titre { color: #993366; }
.index .listing P, .index .sommaire_breves p { font-size:15px; color:#777; text-align: center;}
.listing SPAN.dateactu { font-size:15px; color:#666; margin-top:5px; display:block; text-align:center; }

/*dossiers*/
.index .dos {  width:43%; border:1px solid #DDD; float:left; display:block; overflow:hidden; padding: 10px; margin: 5px 20px 60px 20px; text-align:center; background:#EFEFEF; }
.index .dos p { font-size:14px; color:#444; padding:3px; margin:0; text-align:left; line-height:18px; }
.index .dos IMG {width: 380px; margin:10px 0; transition: .2s ease-in-out;}
.index .dos A {font-family:'Alice', Arial, serif; font-size:22px; color:#993366; font-weight:normal; padding:0; margin:5px 0 5px 0; font-style: normal; line-height:22px;}
.index .dos:hover IMG {filter: brightness(1.2);}

/* index entre nous */
.sommaire {  border:1px solid #DDD; display:block; overflow:hidden; padding:10px 5px 10px 10px; margin: 5px 10px 20px 5px; float:left; width:340px; height:80px; }
.sommaire A {font-family:'Alice', Arial, serif; font-size:18px; color:#993366; font-weight:normal; padding:0; margin:5px 0 5px 0; font-style: normal; line-height:22px;}
.sommaire A:hover { text-decoration: underline;}
.sommaire IMG { float:left; border:2px solid #EEE; margin:0 10px 0 0; padding:0; width:80px; }
.sommaire p { font-family:'Carrois Gothic'; font-size:14px; color:#444; padding:3px; margin:0; text-align:left; line-height:18px; }


/********** PAGE ARTICLE ET BREVE ***************/
.index h1, .article h1, .breve h1, .shop h1 { 
	font-family:'Alice', serif, Arial, serif; font-size:30px; line-height:40px; font-weight:normal; color:#993366; border-bottom:2px dashed #DDD; 
	margin:30px 0; padding:0 0 10px 0; text-align: center; }
.article h1, .breve h1 { text-align:center; font-size:35px; width:650px; margin:20px auto 0 auto; border:none; }

.article .imgShadow, .index .imgShadow { width:600px; float:none; margin:20px auto; border-bottom:3px; } 
.liseret {text-align:center;margin:5px auto 20px auto; background:url("../images/separateur5.png") top no-repeat; height:35px; }

.article P.chapo, .index p.chapo, .forum P.chapo { font-family:'Alice'; font-size:17px; color:#000; font-weight: 500; line-height:27px; text-align: justify; padding: 0; margin: 0 0 5px 0; } 
.article P.lettrine:first-letter {font-size:100px; font-weight: normal; font-family:'Alice';  float: left; line-height: 0.8;padding: 0 6px 0 0;}
.article H2, .breve H2 { font-family:'Alice', Arial, serif; font-size:26px; font-weight: normal; color: #993366; margin: 10px 0 20px 0; padding:0;} /* intertitre */
.article H3 { font-family:'Alice', Arial, serif; font-size:22px; font-weight: normal; color: #222; margin: 0 0 10px 0; padding:0;} 
.article h4 { font-family:'Alice', Arial, serif; font-size: 18px; font-weight: normal; color:#275EFF; margin: 10px 0px 5px 0px; padding: 5px;} /* libell� interview */
.article p { font-size:17px; color:#444; text-align: justify; margin: 0px; padding:0; line-height:27px; } /* corps de texte */
.article strong { color:#993366; font-family:'Alice', Arial, serif; font-weight: normal; font-size:20px; line-height:25px; margin:0 0 -10px 0; display:block; } 
.article A { font-size:17px; border-bottom: 1px dotted #993366;}
.article A:hover { border-bottom: 1px dashed #993366;}
.article P IMG {margin:0 auto -20px auto; display:block;}
.article UL { font-size:17px; color:#444; margin:0 0 10px 30px; padding:0; list-style: none; line-height:15px; }
.article UL LI { line-height:27px; margin:0; text-align:justify; }
.article li::before {content: "\25CF"; color: #993366; font-size:18px; padding-right:5px; }
.article P IMG.insert { display:inline; margin:0;}
.timelec {text-align:center; color:#666; font-size:15px; font-family:'Ubuntu'; margin:20px 0; display:block; font-style: italic; }

span.wait { text-align:center; display:block; color:#FFF; text-transform:uppercase; font-size:20px; background:#C00; border-radius:5px; margin:0 30px 20px 30px; padding:5px 0; }

H4.titreIntw { font-family:'Alice', Arial, serif; font-size: 22px; font-weight: normal; color:#333; margin: 0 0 15px 0; padding:0; text-align: center; } 
.date { font-family:'Alice', Arial, serif;  font-size: 16px; color: #888; font-weight: normal; margin: 0 0 5px 15px; display: block;}
.date .name {color: #888;}

.photoArticle { float:left; margin:5px 15px 20px 0; }
.photoArticle.big {float:none; width:600px; padding:0; margin: 5px auto;}
.copyright, .copyright3 { border-bottom: 1px solid #DDD; display:block; margin:0; padding:3px; font-size:11px; color:#565656; background: #EEE; }
.copyright A, .copyright3 A { border-bottom: 1px dotted #EEE; font-size:11px; color:#565656; }
.copyright2 { text-align: right; margin:20px; font-size:11px; color:#777; font-style: italic;}
.copyright3 {text-align:right; margin:-10px 35px 10px 0; color:#777; background:none; border:0;}

.bigphoto { margin:40px auto; padding:0; text-align:center; }
.bigphoto IMG { width:800px; box-shadow:0 0 4px #AAA; border:4px solid #FFF; }
.copyright_large { display:block; margin:5px 50px 0 0; text-align:right; color:#777; font-size:12px; }
.copyright_large A { color:#777; font-size:12px; text-decoration:none; border-bottom:1px dotted #CCC;}

.meme_theme { margin:20px auto; overflow:hidden; width:95%; }
.meme_theme H3 { font-size:25px; font-weight:normal; color:#FFF; margin:0 0 10px 0; text-align: left; padding:5px 0 3px 10px; background:#993366; }
.meme_theme A { font-family:'Alice', Arial, serif; width:340px; height:auto; float:left; margin:10px; padding-bottom:10px; font-size:18px; color:#993366; border-bottom:1px dotted #CCC; overflow:hidden; text-align:center; }
.meme_theme.shop A { width:400px; }
.meme_theme A IMG { margin:0 0 5px 0; width:350px; height:265px; }
.meme_theme A SPAN {color: #666;}
.meme_theme P {float:left;}

.meme_theme.forum A::before {content:'\1F4AC'; padding-right:10px; }

SPAN.credits { font-size:12px; margin:0; padding:0; font-weight:normal; font-style:italic; color:#666;  text-align:right; display:block;}
SPAN.credits.inside { padding-right:50px; margin-bottom:-40px; }
SPAN.source { font-size:12px; margin:0; padding:0; font-weight:normal; font-style:italic; color:#666;  text-align:left; display:block;}
SPAN.quote { font-family:'Alice'; font-size:24px; line-height:30px; font-style:italic; text-align:left; color:#777; margin: 0 auto -15px auto; 
	padding:0 0 0 10px; width:75%; display:block; border-left:7px solid #EEE; }

/* tableau comparatif */

.comparateur{
  width: 892px;
  margin: 0;
}

.comparateur .row{
  display: flex;
  flex-wrap: nowrap; 
  gap: 14px;
  padding: 0 4px 15px 4px;
  align-items: flex-start;
  border-bottom: 1px solid #EEE;
  color: #444;
}

.comparateur .header{
	padding: 10px 4px;
	line-height: 1.15;
  font-weight: 600;
  background: #eee;
  border-bottom: 2px solid #ccc;
}

.comparateur .row > div{
  flex: 1 1 0;  
  min-width: 0;  
  line-height: 1.5;
  white-space: normal;  
  overflow-wrap: break-word;
  margin: 0;
  padding: 0;
}


/* etoiles */
.row > div[data-rating]{
  position: relative;
  display: inline-block;
  font-size: 20px;
  letter-spacing: 2px;
  line-height: 1;
  white-space: nowrap;
}

/* fond : 5 étoiles grises */
.row > div[data-rating]::before{
  content: "★★★★★";
  color: #ddd;
}

/* premier plan : étoiles pleines selon la note */
.row > div[data-rating="1"]::after{ content: "★"; }
.row > div[data-rating="2"]::after{ content: "★★"; }
.row > div[data-rating="3"]::after{ content: "★★★"; }
.row > div[data-rating="4"]::after{ content: "★★★★"; }
.row > div[data-rating="5"]::after{ content: "★★★★★"; }

.row > div[data-rating]::after{
  position: absolute;
  left: 0;
  top: 0;
  color: #f4b400;
}



/*** bottom sur pleine page ***/
.bottom { margin:25px auto; overflow:hidden; width:90%; }
.bottom H3 { font-size:18px; font-weight:normal; color:#777; margin:0 0 20px 0; text-align: center; padding:5px 0; text-transform: uppercase;
	font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; border-bottom:1px solid #DDD;  }
.bottom H3.mauve { background:#666; color:#FFF; border:none; }
.bottom A { font-family:'Alice', Arial, serif; width:325px; height:auto; float:left; margin:10px 15px; padding-bottom:5px; font-size:22px; line-height:28px; 
	color:#333; text-align:left; overflow:hidden; }
.bottom A IMG { margin:0; width:320px; height:200px; transition: .2s ease-in-out; }
.bottom A img:hover {filter: brightness(1.2);}
.bottom A SPAN {color: #666; display:block; }
.bottom A:hover { color:#993366; }

.bottom.selshop A {width:180px;}
.bottom.selshop A IMG {width:175px; height:185px; }

/*** DIAPORAMA ***/
.diapo { background:#EEE; text-align:center; padding:15px 0; margin:30px 0; border-radius:5px; position:relative; }
.diapo IMG {box-shadow:0 0 6px #BBBBBB; border:5px solid #FFF; }
.diapo H3 {font-family:'Ubuntu'; font-size: 22px; margin:10px 0 20px 0;}
.article .diapo P { margin:20px 0 10px 0; padding:0 30px; text-align:justify; font-size: 17px;}

/* bloc redacteur */
.bloc_redac {margin: 30px 0; padding:10px; border: 1px solid #EEE; overflow:hidden;}
.redacteur {float:left; width:500px; }
.redacteur IMG {float:left; margin-right: 10px; width:60px; border-radius:5px;}
.redacteur H4 {font-family:'Alice', Arial, serif; font-size: 18px; font-weight: normal; margin:8px 0 0 0; padding:0; color:#333; }
.redacteur SPAN.qualite {font-size:14px; color:#666; font-style:italic;}
.redacteur H5 {color:#777; font-weight:normal; font-size:16px; margin-top:5px;}
H4.nopic { background:url("images/writer.png") no-repeat left center; padding-left:35px;}
.partage { float:right; width:auto; margin: 10px 0 5px 0;}
A.voircom { float:left; background:url('img/icones/comment.png') no-repeat center center #FFF;  width:28px; height:28px; border:1px solid #CCC; border-radius:6px; padding:9px; margin-right:10px; }

/* outils de partage */
.share { margin:15px; padding:20px; text-align:center; background: #EEE; border-radius:5px; overflow:hidden; clear:both;}
.share .boutons {background:#EEE; float:left; width:300px;}
.share FORM { width:350px; float:left; margin:0 0 0 0; }
.share FORM SPAN { width:auto; height:20px; margin:0; font-size:15px; font-family:'Ubuntu'; float:none; color:#993366; text-align:left; display:block; font-weight:bold; }
.share FORM INPUT { float:left; background:#993366; color:#FFF; text-align:center; padding:5px; border-radius:3px; }
.share FORM .champs { width:80%; background:#FFF; color:#993366; text-align:left; margin:0; padding: 5px; font-size: 18px; border:1px solid #CCC; }
.share FORM INPUT[type="submit"] {cursor:pointer; font-size: 18px; margin: 0;}

.outils {margin: 5px 0 10px 0; text-align:center; background: #EEE; padding: 5px;}
a.comment {background: url('img/icones/comment.png') no-repeat left center;}
.share SPAN.rss A {background: url('img/icones/rss.png') no-repeat left center; width: 70px;}
a.print {background: url('https://www.bienchezsoi.net/img/icones/print.jpg') no-repeat left top;}
/*a.fb {background: url('https://www.bienchezsoi.net/img/icones/facebook.jpg') no-repeat left top;}*/
a.send:hover, a.comment:hover, a.print:hover, a.rss:hover {text-decoration: underline;}
.merci { font-family:'Ubuntu'; font-size:15px; line-height:25px; color: #777; text-align: right; margin: 30px 0; padding:0; font-style: normal;}
.merci A {font-size:15px; color: #666;}
.banniere {margin: 20px 0 10px 0; text-align:center;}
.article A.icoNewsletter, #centre A.icoNewsletter { width:100px; height:32px; background: url('img/icones/icone_newsletter.gif') no-repeat left center; padding:0 0 0 30px; float:right; border:0; }

/**************** COMMENTAIRES ***********************/
.avis { padding:10px; margin:20px 0 30px 0; background:#efefef; }
.avis IMG {width:60px; float: left; margin: 0 5px 10px 0; border:3px solid #FFF; }
.article .avis h2, .breve .avis H2, .index .avis H2 { font-family:'Alice'; font-size:25px; font-weight: normal; font-style: normal; color: #993366; padding:0 0 5px 0; margin:10px 10px 20px 10px; border-bottom:1px solid #CCC;}
.avis .commentaire { overflow:hidden; padding:10px; margin:10px 10px 20px 10px; background:#FFF; border-radius:5px; }
.avis .commentaire h3 { font-family:'Alice'; font-size:22px; color:#333; margin:0 0 5px 0; padding:0; font-weight:normal; }
.avis .commentaire span.auteur { font-family:'Alice'; font-weight: normal; font-size: 16px; color:#666; font-style:italic; margin:5px 0 10px 0; display:block; }
.avis .commentaire p { font-family:'Ubuntu'; font-size:15px; color:#444; margin: 0; padding:0 10px 0 0; text-align:justify; line-height:22px; }
.commentaire SPAN.reponsecom { color:#936; line-height:22px; padding:0 0 0 10px; margin:10px 0 0 20px; display:block; border-left:2px solid #936; }
.commentaire SPAN.reponsecom A {font-size:15px;}
A.sendcom { color:#FFF; font-weight:bold; cursor:pointer; font-size: 16px; background:#993366; padding:5px 10px; margin:10px auto; border-radius:5px; width:280px; display:block; text-align:center; font-family:'Ubuntu'; }
A.sendcom:hover { background:#444; }
#com { display: block; height: 100px; margin-top: -100px; visibility: hidden; }

/****************** QUIZZ ***************************/
.quizz {clear: both; padding: 10px 0 0 0;}
.quizz .question {border: 1px solid #CCC; padding: 5px; margin: 10px 0 30px 0; background: #FFF;}
.quizz .question .rep { width: 32%; float: left; position: relative; padding: 0 5px; }
.quizz .question h3 { font-size:20px; color: #333; font-weight: normal; padding: 5px; margin:0 0 5px 0; font-style: normal; background: #DDD;}
.quizz .question p { font-family:'Ubuntu'; font-size:17px; font-weight: normal; margin: 0; padding:5px 25px;}
.quizz .question fieldset { border: 0; position: relative; font-size: 17px; margin: 0 2px; padding: 0; }
.quizz .question fieldset input { visibility: hidden; position: absolute; left: 0; top: 0; }
.quizz .question fieldset label { width: 100%; text-align: center; border: 1px solid #035682; border-radius:5px; color: #035682; font-size:17px; cursor: pointer; margin: 5px 0; padding: 8px 0; display: inline-block; vertical-align: baseline; }
.quizz .question fieldset label:hover { background: #993366; color: #FFF; border: 1px solid #993366; }
.quizz .question fieldset label.active { background: #993366; color: #FFF; border: 1px solid #993366; }

.score {background: #EEE; padding: 10px; margin: 0 0 15px 0; text-align:center;}
.score h2 { font-size:24px; color: #993366; margin: 0; padding: 0; font-weight: bold; font-style: normal; text-align:center; }
.score P { font-family:'Ubuntu'; font-size:17px; color: #444; margin: 15px 0 5px 0; }
.quizz .question p.succes { color:#090; background:#DCFCE7}
.quizz .question p.echec { color:#F30; background:#FFD7D7}
.quizz .question p span { display:block; text-transform:uppercase; font-size:20px;}

/*********** COLORIAGES ***********/
.dessin {text-align:center;}
.dessin IMG {width:700px;}
.actions { text-align:center; width:360px; margin:0 auto 30px auto; overflow:hidden;}
.bouton {float:left; margin: 20px 20px 20px 0; text-align:center; background: #993366; border-radius:5px; width:150px; padding:5px;}
.bouton A {color:#FFF;}

/*********** SONDAGES ***********/
.reponses {margin: 0 0 20px 10px; color: #444; font-family:'Ubuntu'; font-size:16px;}
.reponses p {margin: 10px 0; font-size:16px; }
.pourcentage { height:20px; background:#666; padding:0;margin-right:10px; border-radius:2px; float:left; }


/********** RECHERCHE **********/

/* formulaire */
.recherche_form {background: #DDD; margin: 10px; padding:5px; text-align: center; overflow:hidden; }
.recherche_form p { font-family:'Ubuntu'; font-size: 16px; color: #444; float: left; margin: 0; padding: 3px 10px 0 50px;}
.recherche_form input { font-size: 16px; color: #333; border:1px solid #CCC; margin:10px 0; padding:5px; border-radius:5px; }
.recherche_form .submit4 {background:#FFF; color:#993366; font-weight:bold; cursor:pointer; font-size:16px; padding: 5px;  margin: 0;  }
.recherche_form .submit4:hover {color: #FFF; background:#993366;}

/* SONDAGES */
.sondage FORM { margin:0 0 0 5px; }
.sondage h3 { font-size:18px; color:#993366; padding: 5px; font-weight:normal; }

.sondage UL, .votesuite UL { margin:5px 0 0 0; padding:0; }
.sondage LI, .votesuite LI { display:block; margin:0 0 7px 0; font-size:15px; color:#555; }
.sondage LI input, .votesuite LI input  { padding:3px 0 0 0; }
.sondage LABEL, .votesuite LABEL { margin:0 0 0 5px; padding:0; cursor:pointer; }
.sondage .voirResultats, #colD .bloc.sondage A { float:right; margin:10px 0 0 0; font-weight:normal; font-size:14px; }

.liste_sondages {font-family:'Ubuntu'; font-size:14px; color: #555; border-bottom: 1px solid #DDD; padding: 0 0 5px 0; margin: 0 0 15px 0; overflow:hidden;}
.liste_sondages A {display: block; font-family:'Alice'; font-size: 18px; color: #993366; text-decoration: none; font-weight: normal;}
.liste_sondages A:hover { text-decoration: underline; }
.liste_sondages IMG {width: 200px; float: left; margin-right: 10px; }

.vote { color:#FFF; font-weight:bold; cursor:pointer; font-size:13px; background:#565656; padding:10px; border-radius:5px; }
.sondageHP .vote { margin-top:-20px; }

.sondage .vote { margin:10px 0 0 110px; }
.votesuite .vote { margin:10px auto; display:block; text-transform:uppercase; font-size:16px; }
.vote:hover { background:#993366; color:#FFF; }
.votebox { height:130px; background: #5E503E; padding:10px; }
.votebox p { margin:20px 0 20px 0; font-size:13px; color:#FFF; }
.votebox a { font-size:13px; color: #FFF; font-weight: bold;}
.votesuite { border:1px solid #CCC; margin: 0 0 10px 10px; padding:5px; background:#EEE; overflow:hidden; }
.votesuite h3 { font-size: 24px; font-weight: normal; color:#993366; padding: 2px 0 2px 0; margin: 0 0 5px 0; border-bottom: 1px solid #993366;}
.votesuite h2 { font-size: 20px; color: #444; font-weight: normal; font-style: normal; margin:0; padding:5px;}
.votesuite LI::before { content:'';}


/************** BOUTIQUE **************/

.shop  {width:880px; float:left; padding: 5px; margin: 10px 0 10px 0; text-align: left;}
.shop h2 {font-size: 15px; color: #555; font-style: normal; margin: 5px 0px 10px 0px; font-weight: normal;}
.shop P {font-size: 17px; margin-bottom: 20px;}
.shop .liste_cat {display: flex;flex-wrap: wrap;justify-content: left; gap: 30px;}
.eachcat {
	width: 30%;
  position: relative;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid #CCC;
  margin: 10px 0;
}

.eachcat .cardlink {
  display: block;
  height: 350px;
  position: relative;
  text-decoration: none;
}

.eachcat .cardlink img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.eachcat .overlay-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 55%; 
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.75) 0%,
    rgba(0,0,0,0.55) 30%,
    rgba(0,0,0,0.22) 70%,
    rgba(0,0,0,0) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.eachcat .cardlink h2 {
margin: 0;
  padding: 0 20px;
  color: #fff;
  font-size: 26px;
  text-align: center;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.shop .liste_cat .eachcat ul { margin: 0 0 5px 20px; padding: 0; text-align: left; font-size:15px;}
.shop .liste_cat .eachcat li { margin:0 0 5px 10px ; padding: 0;}
.shop .liste_cat .eachcat h3 {text-align: center; margin-bottom: 10px;}
.shop .liste_cat .eachcat a { display: block; color:#666; font-weight: normal;}
.shop .liste_cat .eachcat a.tous {display: block; border: 1px solid #888; color:#888; background: #FFF; font-size:16px; text-align: center; 
	padding: 5px; margin:15px auto; width:190px; border-radius:5px; }
.shop .liste_cat .eachcat a.tous:hover { background:#993366; color:#FFF; text-decoration:none;}
.shop .liste_cat .eachcat a:hover {text-decoration: underline; }
.shop .liste_cat .eachcat:hover img {
  transform: scale(1.05);
  transition: transform 0.4s ease;
}

.shop .allarticles {}
.shop .allarticles .eacharticle {font-size:18px; font-weight:normal; color:#666; margin: 10px 18px 10px 5px; padding: 10px 0; float: left; width: 30%; height:380px; text-align: left; border-bottom: 1px dotted #DDD; 
overflow:hidden; }
.shop .allarticles .eacharticle .image-container { width: 260px; height: 260px; overflow: hidden; border:1px solid #CCC; margin-bottom:10px; }
.shop .allarticles .eacharticle .image-container img { width: 100%; height: 100%; transition: transform 0.3s ease-in-out; }
.shop .allarticles .eacharticle:hover .image-container img { transform: scale(1.5); }
.shop .allarticles .eacharticle span.marque { color:#888; display:block; margin:5px 0; font-size:15px;}
.shop .allarticles .eacharticle span.nom, .shop .autres .autre_article span.nom { font-size:18px; line-height:25px; margin:8px 0; display:block;}
.shop .allarticles .eacharticle span.prix, .shop .autres .autre_article span.prix { font-size:20px; color:#333; font-weight:500;}

.shop .fiche_produit {}
.shop .fiche_produit h1 { font-family: 'Alice', Georgia, Times, serif; font-size: 30px; line-height: 22px; font-weight: normal; color: #993366; margin: 10px 0px 20px 0px; padding: 0 0 15px 0; border-bottom : 2px solid #CCC;}
.shop .fiche_produit h2 { font-size: 28px; font-weight: normal; color: #006C16; margin: 10px 0px 15px 0px; }
.shop .fiche_produit .desc { width: 490px; font-size:15px; color: #555; line-height: 24px; margin: 0; padding: 0; float: right; text-align:justify; overflow:hidden; font-family:'Ubuntu'; }
.shop .fiche_produit .desc p {font-size: 15px;}
.shop .fiche_produit .illust {float: left; margin: 0 10px 0 0; padding: 0 30px 0 0; width: 340px; height:340px; overflow:hidden; border: 1px solid #DDD; }
.shop .fiche_produit .illust .image-container { width: 350px; height: 350px; overflow: hidden;  }
.shop .fiche_produit .illust .image-container img { width: 100%; height: 100%; transition: transform 0.5s ease-out;}
.shop .fiche_produit .illust:hover .image-container img { transform: scale(1.8); }

.shop .fiche_produit .desc2 { margin:30px auto; font-size:15px; color: #555; line-height: 24px; text-align:justify; font-family:'Ubuntu'; width:90%; border-left: 7px solid #993366; padding-left:10px; }
.shop .fiche_produit .desc2 h3 { font-size:18px; margin:10px 0; font-weight:bold;}

.shop .autres {}
.shop .autres h3 { font-family: 'Alice', Georgia, Times, serif; font-size: 22px; font-weight: normal; color:#555; margin: 10px 0px 5px 0px; padding: 5px; border-bottom: 1px solid #555;}
.shop .autres .autre_article { font-size: 20px; font-weight: normal; color:#666; margin: 10px 5px 10px 10px; padding: 10px; background: #EEE; float: left; width: 28%; height: 360px; border: 1px solid #FFF;}
.shop .autres .autre_article img {border:1px solid #DDD; width: 245px; height:245px;}
.shop .autres .autre_article a, .shop .allarticles .eacharticle a {display: block; color: #993366; }
.eacharticle a, .shop .autres .autre_article a { font-weight:normal; font-size:16px; color: #333; }
.eacharticle a IMG, .shop .autres .autre_article a img { margin:0 0 5px 0; }
.shop .autres .autre_article A:HOVER IMG { border-color:#CCC; }
.shop .buy A {color:#FFF; text-align:center; background: #993366; border: 1px solid #993366; border-radius:15px; width:250px; padding:8px 12px; margin:25px auto 15px auto; display:block;}
.shop .buy A:HOVER {color:#993366; background: #FFF; border: 1px solid #993366; text-decoration:none;}
.shop .prob A {color:#F00; font-size:13px; margin:25px auto 5px auto; padding:5px 2px; background:#FFF; border:1px solid #F00; border-radius:15px; width:190px; text-align:center; display:block; }
.shop .prob A:HOVER { background:#F00; color:#FFF; }

.optimots { font-size:14px; line-height:20px; color: #666; margin: 10px; padding: 0;}

#colD_boutique { float:right; width:180px; margin:0 0 0 5px; padding:10px 10px 0 0; text-align:left; }

/* navigation boutique */
.shopnav {float: left; margin: 5px 10px 5px 0; padding: 10px; position:relative;}
.shopnav A {font-family: 'Alice', Arial, serif; font-size: 16px; width: 150px; margin: 0 20px 10px 0; padding: 3px 15px 3px 15px; font-weight: normal; display: block; 
border: 1px solid #993366; border-left: 5px solid #993366; color: #555; }
.shopnav A.on, .shopnav A:hover { border: 1px solid #993366; border-left: 5px solid #993366; background: #993366; color: #FFF; text-decoration:none;}
.shopnav .champs {font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #444; border:1px solid #993366; padding: 5px;}
.shopnav .btnOK {color:#FFF; font-weight:bold; cursor:pointer; font-size: 13px; background:#666; padding:5px; margin:10px 0 0 0; }

/*********** FORUM ***********/

/* navigation */
.forum_nav {border:1px solid #CCC; margin:20px 0; padding:10px; background:#EFEFEF; overflow:hidden; }
.forum_nav A { font-size: 14px; padding:0 0 0 15px; margin:5px 25px 0 0; text-align:left; text-decoration: none; color : #666; font-weight: normal; background: url('https://www.bienchezsoi.net/images/habillage/arrow.gif') no-repeat left center; }
.forum_nav A:hover { text-decoration: underline; }

/* accueil */
.forum {padding:0 10px;}
.forum H1 {font-family: 'Alice', serif, Arial, serif; font-size: 30px; font-weight: normal; color: #993366; margin: 0 0 20px 0; padding:0; text-align: center;}
.forum .mosaique {overflow:hidden; padding:0; margin:10px 0;}
.forum .mosaique .unforum {overflow:hidden; width:235px; float:left; margin:10px 10px 10px 8px; text-align:center;}
.forum .mosaique .unforum IMG { width:235px; height:180px; }
.forum .mosaique .unforum A { display:block; font-size:20px; font-family: 'Alice', serif, Arial, serif; margin:10px 0 5px 0; }
.forum .mosaique .unforum SPAN { display:block; font-size:14px; color:#666; }

/* page categorie et liste des sujets */
input.newtopic { font-size:18px; padding:10px; margin: 0 auto; border-radius:5px; background:#555; width: 220px; display:block; color:#FFF; cursor:pointer; } 
input.newtopic:hover {color:#6F6;}
.liste_sujets {overflow:hidden; margin:20px 0; padding:5px;}
.liste_sujets .each { margin:10px 0; padding: 10px; background:#EEE;}
.liste_sujets .each A {font-family: 'Alice', Times, serif; font-weight: normal; font-size: 22px; color: #993366; display:block; margin-bottom:5px;}
.liste_sujets .each P {padding-left: 10px; color:#555; font-size: 14px;}
.liste_sujets .each SPAN.resolu {color:#666;}
.liste_sujets .each SPAN.vert {color:#090;}
.liste_sujets .each SPAN.rouge {color:#F00;}
.liste_sujets .each P.textresult {margin:5px 10px; font-style:italic; font-size:14px;}

/* page du sujet et ses reponses */
H1.titresujet { font-size:35px; line-height:42px; font-weight:normal; color:#993366; border-bottom:2px solid #CCC; text-align:center; width:500px; margin:0 auto 25px auto; padding-bottom:15px; }
span.datesujet { text-align:center; font-size:15px; color:#777; display:block; margin-bottom:30px; }
h1.titresujet SPAN {color:#666;}
.forum .sujet {border-top:3px solid #CCC; border-bottom:1px dotted #DDD; margin:20px 20px 40px 20px; padding:10px 10px 40px 10px; position:relative; overflow:hidden; background:#EEE;}
.forum .sujet.rep {background:#FFF; padding:10px;}
.forum .sujet SPAN.posteur {font-size: 18px; color: #993366; font-family: 'Alice'; float:left; }
.forum .sujet SPAN.datepost {font-size: 16px; color: #666; margin: 0 0 5px 0; font-family: 'Alice'; float:right; }
.forum .sujet p, .forum .sujet ul { font-size: 15px; text-align: justify; color: #444; line-height:22px; clear:both; margin:40px 0 0 0; padding-bottom:10px; font-family:'Ubuntu'; }
.forum .sujet ul { margin:0 0 -30px 0;}
.forum .sujet p A { font-size: 15px;  border-bottom:1px dotted #993366; }
.forum .sujet p A:HOVER { border-bottom:1px dashed #993366; }
.forum .sujet SPAN.nbreponses {color:#666; width:100px; border:1px solid #CCC; border-radius:5px; padding:5px; position:absolute; left:10px; bottom:10px; font-size:15px; text-align:center; }
input.answer {background:#993366; color:#FFF; width:100px; border-radius:5px; padding:5px; position:absolute; right:10px; bottom:10px; cursor:pointer; font-size:18px; }
input.answer:hover { color:#FF0; }
input.answer.bottom {position:relative; margin:10px auto; display:block; }
.forum .sujet SPAN.quoting {font-size:13px; line-height:18px; font-style:italic; color:#777; margin:10px 10px 0 10px; padding:5px; display:block; border:1px solid #EEE; background:#EEE;}
.forum .sujet P IMG {max-width:700px; margin:20px;}

/* poster un message */
H1.posting {font-family: 'Alice', Arial; font-weight: normal; color: #993366; font-size: 25px; text-align: left; margin: 20px; }
.formulaire LABEL .forumtitle {font-family: 'Alice', Arial; font-size:18px; }
.messalert {background:#EFEFEF; border-radius:10px; padding:20px; margin:30px; font-size:15px; line-height:25px; color:#444; text-align:justify; }
.forum input.btnok {display:block; background:#993366; color:#FFF; width:220px; border-radius:5px; padding:5px; margin:20px auto; cursor:pointer; font-size:18px;}
.forum input.btnok:hover { color:#FF0;}
P.rules {margin:20px; padding:10px; border:1px solid #993366;}
.rappelsujet {margin:30px;}
.rappelsujet textarea {width:700px; height:150px; color:#777; font-size:14px;}

/* recherche */
.forum .rech {border:1px solid #CCC; border-radius:10px; margin:30px; padding:30px; overflow:hidden; color:#555; font-size:14px; }
.forum .rech input {font-size: 15px; color: #555; border:1px solid #CCC; padding: 5px; margin:0 0 10px 0; border-radius:3px;}
.rech .validation { margin: 10px auto; padding: 10px; clear:both; width:150px; }
.rech .validation .btn { color:#FFF; font-weight:normal; cursor:pointer; font-size:18px; background:#993366; padding: 5px; text-align:center; border:1px solid #993366; border-radius:5px; }
.rech .validation .btn:hover {color:#993366; background:#CCC; border:1px solid #993366;}
H2.recherche {color:#666; margin:20px 0; font-weight:normal; text-align:center; font-family:'Ubuntu'; font-size:24px; }


/********* PAGINATION ****************/
.pagination, .forum_pagination { color:#333; font-size:18px; margin:30px 0px; text-align:center; }
.pagination A, .forum_pagination A { border:1px solid #999; background:#777; color:#FFF; text-decoration:none; display:inline; margin:5px; font-weight: normal; font-size:18px; padding:3px 8px; border-radius:50%; }
.pagination A:HOVER, .forum_pagination A:HOVER { text-decoration:none; background: #FFF; border: 1px solid #993366; color: #993366;}
.pagination SPAN.pageactive A, .pagination SPAN.pageactive, .forum_pagination SPAN.pageactive A, .forum_pagination SPAN.pageactive 
{ color:#FFF;  background:#993366; font-weight:bold; font-size:18px; border:1px solid #993366; margin:5px; padding:3px 8px; border-radius:50%; }
.pagetop { text-align:center; margin:20px 0; color:#777; font-size:22px;}


/**************** FORMULAIRES ******************************/
FORM, INPUT { margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; border:0; }
.formulaire {margin: 10px 15px; padding: 20px; background: #EEE; overflow: hidden;}
.formulaire h3 { font-family: Arial, Helvetica, sans-serif; font-size:12px; color:#555; font-style: italic; font-weight: normal; margin:0 0 10px 0; padding: 5px; background: #EEE;}
.formulaire h4 { font-family: Arial, Helvetica, sans-serif; font-size:12px; color:#555; font-style: normal; font-weight: normal; margin:0 0 10px 0; padding: 0;}
.formulaire LABEL { clear:both; display:block; margin:0 0 10px 0; font-size:14px; color:#333; }
.formulaire LABEL.genre { clear:none; display:inline; font-size:14px; color:#555; margin:0 20px 0 0; font-weight:bold; cursor:pointer; }
.formulaire p { width:170px; float:left; margin:0 0 15px 0; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px; color:#666; font-weight:bold; }
.formulaire input {  float:left;  font-family: Arial, Helvetica, sans-serif; font-size: 16px; color:#09F; border:1px solid #CCC; padding: 5px; margin:0 0 10px 0; border-radius:3px; }
.formulaire select, .formulaire textarea { font-size:16px; color:#09F; }
.formulaire .radio {	width:auto; height:auto; border:0; display:inline; float:none; margin:5px; padding:10px 0 0 0; }
.formulaire .validation { margin: 20px auto; width:200px; clear:both; text-align:center; overflow:hidden; }
.formulaire .validation .btn { color:#FFF; font-weight:normal; cursor:pointer; font-size:20px; background:#993366; padding: 10px; text-align:center; border:0; float:none; }
.formulaire .validation .btn:hover {color:#993366; background:#CCC;}
P.alert { text-align:center;}

select { font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #555; border:1px solid #CCC;}
textarea { font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #555; padding: 5px; border:1px solid #CCC; border-radius:3px;}
.search {  font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #666; border:1px solid #CCC; background:#FFFFFF; height:17px; padding-left:3px; float:left; margin-right:5px; font-weight: bold;}
.searchOK, .submit2, .submit3 { color:#FFF; font-weight:bold; cursor:pointer; font-size: 18px; background:#993366; padding:8px; margin:10px 0 0 0; border-radius:3px; }
.searchOK:hover, .submit2:hover, .submit3:hover {background:#090; }
.formulaire .codebox {font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: #444; border:1px solid #CCC; width: 90px; height:20px; padding: 5px 0 5px 10px; font-weight: bold; text-align: center; text-transform:uppercase;}
.textbox {font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #0833FF; border: 1px dotted #CCC; background: #FFF;}
.formulaire .genre { float:none; }
.formulaire span { font-family: Arial,Helvetica,sans-serif; color: #cc0000; font-size: 13px; font-weight: bold; display: block; clear: both; margin: 5px 0 0 170px; padding: 5px 0 5px 0; }
.btnall A { text-align:center; margin:10px auto; padding:10px; width:190px; background:#993366; color:#FFF; display:block; clear:both; }
input:focus, textarea:focus, select:focus, .codebox:focus { border:1px solid #993366; outline:none; }

/* RECHERCHE */
.formsearch {margin: 0 15px 20px 15px; padding: 10px; background: #EEE; overflow: hidden;}
.formsearch input[type="text"] { font-size:25px; width:95%; margin:20px auto; padding:10px; float:none; border:1px solid #CCC; border-radius:3px; display:block; text-align:center; }
.formsearch span.cocher { margin:30px auto; display:block; text-align:center; font-family:"Ubuntu"; font-size:16px; color:#666; }
.formsearch input[type="submit"] {  color:#FFF; cursor:pointer; font-size:18px; background:#993366; padding: 10px; margin:5px auto; text-align:center; border-radius:3px; display:block; }
.formsearch label { margin-right:10px; cursor:pointer; }


/* FAQ */
A.faq {display:block; margin:10px 5px; }
A.faq:hover { text-decoration:underline; }
A.faq::before {content:'\25BA'; color:#CCC; padding-right:5px;}
.reponse {background:#EEE; }
.reponse P { padding:5px; line-height:26px; }
.reponse P A { border-bottom:1px dashed #993366; }

/* SIMULATEUR DE COULEURS */
.simulator { background:#EEE; padding:10px; margin:0; }
.simulator select { width:150px;}

/***** IMPRESSION *****/
.impression {background: #FFF; font-family:'Ubuntu'; font-size:12px; color: #555; line-height: 18px; text-align: left; width: 800px; padding: 10px;}
.impression .ecolo {background: #EEE; font-size:11px; color: #336633;}

/***** PUB *****/
.pub { margin:20px auto; padding:0; text-align:center; }
.leaderboard { margin:30px auto 20px auto; text-align:center; }
.pub_droite { float:right; width:300px; margin: 10px 0 0 15px; } /* pub forum */
.facebox {width:298px; height: 260px; margin: 0 0 15px 0; overflow: hidden; background: #FFF; text-align: center; border: 1px solid #CCC; }
.pub468 { margin:30px 0 30px 0; text-align: center;}
.pub468-forum { margin:20px 0 20px 100px; text-align: center;}
.pubvideo {text-align:center; margin: 20px 0 20px 100px;}
.pubmobile {display:none;}
.reco {margin: 10px 0 20px 0;}
.reco h3 {font-size:25px; font-weight:normal; color:#FFF; margin:0 0 10px 0; text-align: left; padding:5px 0 3px 10px; background:#CCC; }
.skymt {margin:20px auto 20px auto; text-align:center; }

.autopromo { width:710px; text-align:left; border:1px solid #CCC; background:#F3F3F3; margin:15px 0 15px 0; padding:5px; overflow: hidden;}
.autopromo H3 {font-size: 25px; color: #565656; margin:10px; }
.autopromo .each_prod { width:310px; height:100px; display:block; border:1px solid #FFF; float:left; padding:5px; margin:10px 15px 10px 10px; background: #FFF; border-radius:3px; }
.autopromo .each_prod IMG {  width:100px; height:100px; float:left; margin:0 10px 0 10px;}
.autopromo .each_prod H4 { font-family:'Alice', Arial, serif; font-size:18px; font-weight: normal; color: #993366; margin: 10px 0 0 0;} /*nom du produit */
.autopromo .each_prod H5 {font-size: 18px; color: #666; font-weight:normal; padding-top:5px;} /* prix du produit */
.autopromo .each_prod H6 { font-size: 12px; color: #555; font-weight: normal;}
.autopromo .each_prod:HOVER { text-decoration:none; border:1px solid #CCC; }


/*************** FOOTER ****************/
footer { width:100%; text-align:center; background:#666; }
footer .content {width:1190px; margin: 0 auto; padding:30px; font-family:'Ubuntu'; overflow:hidden; }
.content ul.col { width:220px; height:190px; float:left; padding:0 20px 0 0; margin:0 30px 10px 20px; text-align:left; border-right:1px solid #888; }
.content ul.col + ul.col + ul.col + ul.col { border:none; }
.content ul.col h4 { font-family:'Alice'; font-size:16px; font-weight:normal; margin:0 0 10px 0; padding: 0; color:#FFF; text-transform:uppercase; }
.content ul.col LI { display:block; margin:0; padding:0 0 5px 0; font-size:14px; line-height:20px; color:#EEE;}
.content ul.col LI A { color:#EEE; text-decoration:none; font-size:14px; }
.content ul.col LI A:HOVER { text-decoration:underline; }
footer .rights {width:100%; margin: 0 auto; padding:30px 0; background:#333; font-family:'Alice'; overflow:hidden; color:#FFF; font-size:15px; }


/* annonce adblock */
#antiBlock { display: none; padding: 150px 0 20px 0; text-align: center; font-weight: normal; color: #666; height:30%; width:100%; position: fixed; bottom:0;
z-index: 900; background:url("images/info.png") no-repeat top center #EEE; font-family:'Ubuntu'; line-height:22px; border:1px solid #CCC;}

/* POPUP newsletter */

/* Masqué au démarrage */
.popup-hidden { display: none !important;}

/* Conteneur principal */
#popup-form { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; z-index: 1000;}

/* Fond sombre (overlay séparé) */
.popup-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 0;}

/* Contenu de la popup */
.popup-content {
  position: relative;
  z-index: 1;
  background: white;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  width: 90%;
  max-width: 500px;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.popup-content h2 { text-align: center; font-size: 22px; color:#993366; font-weight: normal; margin-bottom: 20px;}

/* Style de l'input email */
.popup-content input[type="email"] {
  width: 100%;
  padding: 12px 15px;
  margin-bottom: 15px;
  border: 2px solid #ccc;
  border-radius: 6px;
  font-size: 16px;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
}

.popup-content input[type="email"]:focus {
  border-color: #993366; 
  outline: none;
  box-shadow: 0 0 5px rgba(250, 193, 5, 0.678);
}

/* Style du bouton S’abonner */
.popup-content input[type="submit"] {
  width: 100%;
  padding: 12px 15px;
  background-color: #993366; 
  border: none;
  border-radius: 6px;
  color: white;
  font-size: 18px;
  cursor: pointer;
  font-weight: 600;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-sizing: border-box;
}

.popup-content input[type="submit"]:hover {
  background-color: #993366; 
  transform: scale(1.05);
}

.popup-content input[type="submit"]:active {
  transform: scale(0.95);
}


/* Animation quand visible */
#popup-form.show .popup-content {animation: fadeInZoom 0.3s ease forwards;}

/* Fermeture */
#close-popup { position: absolute; top: 10px; right: 15px; font-size: 24px; cursor: pointer; }

.popup-overlay {display: none;}
#popup-form.show .popup-overlay {display: block;}

/* Animation keyframe */
@keyframes fadeInZoom {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}


/********** STYLE MOBILE **********/
@media (max-width:640px) { 
	html {  width:auto; }
	body, p { word-wrap:break-word; }
	img { width:auto; height:auto; max-width:100%; margin:0; }
	#page { padding-top:10px;}
	#centre, #centreBoutique {padding:0 5px; float:none; clear:both; width:auto; }
	#colD { float:none; margin:20px 0 0 0; padding:0 5px; clear:both; }
	
	header, .window, #page, #decalFixedHeader, #centre, #colD, nav UL, .header-content, .index, .article, .breve, 
	.remonteesActu .fdTitre,	.sommaire, .meme_theme A, .diapo .diapo_pagi, header .recherche, #centre_large, .bodyline, .boiteconnexion, .forum_auteur, .forum_message { width:auto; max-width:100%; }
	.autopromo, .communaute, #back-top A, .header-content span.logo p.slogan, .header-content .ssLiens, header nav, .smaller, .leaderboard, .skymt { display:none; }
	.noel, .noel2, .nouvelan, .hiver, .hiver2, .printemps, .printemps2, .ete, .ete2, .ete3, .automne, .automne2, .halloween, .paques, .zen, .rentree, .chine {background-image:none;}

	#colD > div { width:auto!important; max-width:100%!important; margin:0; }

	/* header */
	header { height:55px; padding-top:15px; overflow:hidden; text-align:center; border-bottom:2px solid #936;  }
	header .header-content { width:auto; height:auto; border:none; }
	.header-content span.logo {background:url("/images/logo_small.png") no-repeat left top; width:196px; height:50px; }
	.header-content .logo A { width:196px; height:50px; }
	.header-content .recherche { width:auto; top:45px; right:10px; background:#FFF; z-index:800; padding-bottom:10px; margin:0;}
	header .recherche .champs { width:auto; max-width:90%; border:1px solid #DDD; color:#444; margin:0; }
	.header-content .recherche .btnOK { padding:0; top:-40px; right:10px; }
	
	
	header .header-content SPAN.menuBurger, SPAN.menuX, span.submenuX { display:block; height:30px; background:#936; border-radius:3px; color:#FFF; position:absolute; left:10px; top:5px; z-index:800; line-height: 25px; cursor:pointer; }
	header .header-content SPAN.menuBurger { width:35px; font-size:40px; padding-top:3px; }
	header .header-content SPAN.menuX, span.submenuX { width:35px; font-size:30px; padding-top:3px;}
	header .menuBurger:hover, header .menuX:hover { text-decoration:none; }
	header nav {width:auto; margin:0; }
	nav UL { height:auto; overflow:hidden; text-align:center; background:#936;  }
	nav UL LI { float:none; height:25px; display:block; margin:10px;}
	nav UL LI A { font-size:20px; color:#FFF; margin:0; padding:0;}
	nav UL.mainNav LI A {color: #FFF; display: block; 	}
	nav UL.mainNav LI {display: block;}
	nav UL LI A:HOVER, nav UL LI A.on { background:#FFF; color:#936; padding:5px;}
	UL.subNav { width:auto; height:auto; max-width:100%; position:relative; margin-top:10px; text-align:center;  }
	UL.subNav LI { float:none; margin:10px auto; width: 80%; background: none; box-shadow: none; 	background: #fff; height:45px; }
	UL.subNav LI A, UL.subNav LI A:HOVER { font-size:18px; padding:10px 0 0 50px; color: #333; float: none; text-align: left;}
	UL.subNav LI IMG {display: block; width: 30px; margin-right:10px; }
	UL#subNav1,UL#subNav2,UL#subNav3,UL#subNav4,UL#subNav5,UL#subNav6,UL#subNav7,UL#subNav8,UL#subNav13,UL#subNav14 { background:#936; }

	span.submenuX{ display: none; }

	nav.ariane UL {text-align:left; background:none; }
	nav.ariane UL LI A:HOVER { color:#666; padding:0;}

	.index, .article, .breve { margin:0 5px; padding:0; }
	.index.large {width:95%;}
	.photoArticle { margin:0 auto 10px auto; float:none; text-align:center; }
	.bigphoto IMG {width: 98%; }
	H1 { font-size:24px; margin:0 0 10px 0; padding:0 5px;}
	.timelec { text-align:center; margin:10px 0;}
	.article h1, .breve h1 { font-size:30px; line-height:38px; width:auto; }
	.article P.chapo, .index p.chapo { font-size:15px; margin: 0 0 5px 0; padding:0 10px; } 
	.article p, .breve p { padding:0 10px; line-height:22px;}
	.article UL { margin:0 5px 15px 10px; }
	P iframe {width:auto; height:auto; max-width:100%;}
	.article h2, .index H2 { margin:0 10px 10px 10px; }
	.liseret {width:auto; height:30px;}
	.meme_theme { margin:10px 0; }
	.meme_theme H3 { font-size:24px; margin:0; }
	.meme_theme A { width:auto; height:auto; float:none; margin:5px; display:block; }
	.meme_theme A IMG, #colD .memerubrique.actu IMG {width:100%;}
	
	.bottom A { float:none; width:auto; margin:20px 0; display:block; }
	.bottom A IMG { width:auto; height:auto; }	
	.bottom.selshop A { width: auto; }
	.bottom.selshop A IMG {width:100%; }

	.index .dos {  width:auto; height:auto; float:none; margin: 5px 0 10px 0; }
	.index .dos IMG {padding:0;}
	.sommaire {  width:auto; height: auto; float:none; margin: 5px; }
	.article .imgShadow, .index .imgShadow { width:auto; } 
	.each_rub A { margin:10px 0 0 10px;  }
	.index P { margin: 5px; }
	.listing {padding: 5px; width:100%; height:auto; float:none; margin:10px 0; flex:0 0 100% }
	.listing IMG { float:none; margin:5px 0; width:100%; height:auto;}
	.listing IMG.crop {width: auto; height: auto; margin: 5px; }
	.listing SPAN.titre {margin: 5px 0; padding-top: 0; }

	.blocActu.big {width: auto; float: none; margin:5px; }
	.blocActu.big SPAN.titre, .blocActu.small SPAN.titre {width: auto; }
	.blocActu.small {float: none; width: auto; margin: 5px; }
	.blocActu.small span.photo {width: auto; height: auto; float: none; }
	
	
	.blocActu, .bloc_itw, .blocQuiz, .bloc_gp .zoom.trio { width:auto; float:none; margin:10px 0 30px 0; }
	.bloc_itw { height:auto;}
	.blocActu IMG {width:100%;}
	.blocActu .fdTitre { width:auto; }
	.bloc_gp {margin: 50px 0;}
	.bloc_gp .zoom.quadri { margin: 30px 0; width: 100%;}
	.bloc_gp .zoom.quadri span.photo {width: 100%; height: 100%; border: none; margin: 0 auto;}
	.zoom SPAN.rub {padding:0 10px;}

	.bloc_gp .zoom.trio span.photo, .bloc_gp .zoom.trio.big span.photo {width: 100%;height: 100%;float: none; border: none;}
	.bloc_gp .zoom.trio.big {width: auto;}
	.bloc_gp .zoom.trio span.titre, .bloc_gp .zoom.trio.big span.titre {width: auto;}

	.bloc_gp.last { padding:10px 5px; }
	.bloc_gp .zoom { width:auto; float:none; margin:5px 20px 25px 15px; }
	.bloc_gp .zoom.trio.doss { width:auto; float:none; margin:5px 20px 5px 15px; }
	.bloc_gp .zoom img, .bloc_gp .zoom.trio img, .mosaicHP .main IMG { width:100%;  }
	.mosaicHP .main A SPAN {width:100%; padding:0; }
	.bloc_gp .zoom.trio A {width:auto;}
	.blocActu A, .bloc_gp .zoom A { font-size:20px; }
	.blocActu A SPAN { width:98%; padding-bottom:5px; }
	.ctendance { width:auto; height:auto; float:none; margin:5px; }
	.ctendance IMG { width:auto; height:auto;} 
	.ctendance .fdTitre { width:90%; left:0; margin: 0 10px;}
	.bloc_gp .zoom.trio.doss A SPAN {width: 100%;}
	
	.mosaicHP .main {width:auto; float:none; margin:0; } 
	.mosaicHP .main.right {float:none; margin:0; } 
	.mosaicHP .quadri {float:none; width:auto; margin:20px 0; clear:both; background:none; } 
	.mosaicHP .quadri A SPAN { font-family:'Alice'; font-size:18px; font-weight: normal; color: #993366; padding-top: 0; margin-top:5px; display:block; text-align:left; }

	.bloc-forum {border:1px solid #DDD; border-radius:10px; padding:10px; margin:30px 0 10px 0; overflow:hidden;}
	.bloc-forum .illust {float:none; width:auto; margin:5px; }
	.bloc-forum .topics { float:none; width:auto; }
	.bloc-forum .topics H2 {font-size:30px; font-weight:normal; color:#777; width:320px; margin:10px auto 25px auto; padding:0; font-style:normal; text-align:center; font-family: 'Caveat', cursive; }
	.bloc-forum .topics .each {margin:12px;}
	.bloc-forum .topics .each span.rub {display: block; margin-bottom:3px;}

	.blocNewsletter { width:auto; margin:20px 5px;}
	.blocNewsletter input.champnl {width:90%;}

	.boutique { width:auto; height:auto; float:none; margin:10px; }
	.boutique IMG {width:200px; height:200px;}
	.boutique .each { float:none; width:auto; margin:8px 0;}

	.uneitw IMG { float: none; margin:5px 0 0 0; }
	.uneitw A { padding:0; }
	.uneitw span { margin:10px;}
	.blocQuiz .quiz {width:100%; height:auto; float:none;}
	.blocQuiz .quiz IMG {padding-bottom:1px; display:block; margin:0 auto;}
	.quizz .question .rep { width: 100%; float: none; }
	.sondageHP { width:auto; float:none; clear:both; margin:40px 10px; text-align:center; overflow:hidden; }
	.sondageHP H2 {width:auto; padding:5px; margin-top:0;}
	.sondageHP IMG { float:none; display:block; margin:0 auto 10px auto; }
	.sondageHP p { margin:10px 0 0 0; }	
	.social {margin: 10px; width:auto; float: none; overflow:hidden;}
	.social A { width:110px; height:38px; padding:10px 0 0 20px; margin:0; border-bottom:0; }
	
	.share { padding:5px; }
	.share .boutons {float: none; width: auto; }
	.share FORM { width:auto; max-width:100%; margin:20px 10px 10px 10px; float:none; clear:both; }
	.share FORM .champs { width:auto; max-width:95%; }
	
	.forum .mosaique .unforum {width:auto; float:none; margin:5px;}
	.forum .mosaique .unforum IMG { width:100%; height:auto; }
	.forum .sujet {margin:20px 0; }
	H1.titresujet {width: auto;}

	.diapo IMG {width:auto; border:2px; }
	.article .diapo P { margin:10px 0; padding:0 5px; }
	
	.shopnav {display:none;}
	.shop {width:auto; max-width:100%; float:none;}
	.shop .allarticles .eacharticle {margin: 10px 0; float: none; clear:both; width:auto; }
	.shop .liste_cat .eachcat { width: auto; height: auto; margin: 10px; float: none; }
	.shop .fiche_produit .desc, .ariane, .shop .fiche_produit { width: auto; max-width:100%; display:block; }
	.shop .fiche_produit .illust {float: none; margin:0; padding:0; border:none; width:auto; }
	.shop .autres .autre_article { float: none; width:auto; height:auto; max-width:100%;}
	.shop .fiche_produit .desc SPAN A {margin: 20px 0 10px 0;}
	.shop .buy {width:auto;}
	.shop .autres .autre_article img {width: 70%; height:70%;}
	.shop .fiche_produit .desc SPAN.prob A {margin: 20px 0 10px 150px; display:block;}

	.nuage A { margin:20px; }
	.communaute A { width:30%; margin:0px 10px 0 5px; float:left; }
	.reponses p {width: auto;}
	.votesuite .vote { margin:0; width:100%; }
	.result P { line-height:16px; }
	.result H4 { font-style:italic;}

	.avis { padding:5px; margin:10px 0; }
	.avis IMG {display:none; }
	.avis .commentaire h3 span { font-style: italic; display:block; }
	textarea {width:auto; max-width:95%; margin:0;}
	.pub, .pubmobile { margin:10px auto; display:block;}
	.formulaire {margin: 0 5px 20px 5px; }
	.formulaire LABEL {margin:0;}
	.formulaire SELECT {margin-bottom:10px;}
	.formulaire p { width:auto; float:none; margin:0; }
	.formulaire input {  float:none; margin:0; max-width:95%;}
	.formulaire .validation { margin: 10px 0; padding: 0; }
	.formulaire .validation .btn { width:100%;  margin-top:10px;}

	footer { width:100%; }
	footer .content {width:auto; padding:10px; }
	.content ul.col { width:auto; height:auto; float:none; padding:00; margin:10px; border-bottom:1px dotted #CCC; border-right:0; }

 }