@charset "utf-8";
/* Police embarquée - décommenter le paragraphe suivant et changer les noms et chemins pour ceux de la police voulue */
/*@import url('https://www.silverlib.fr/fonts/FranklinGothicDemiCond/stylesheet.css');*/
@import url('https://www.silverlib.fr/fonts/ErasBD/stylesheet.css'); /* ErasBoldITCRegular */
/* Silver 6 horizontal big slide */

body {
	font-family:Arial, Helvetica, sans-serif;
	color:#000000;
	font-size: 100%;
}

/* styles basiques */
img {border:0}
h1 {font-size:20px;margin:0.625em 0 0.625em 0; font-family: ErasBoldITCRegular;text-align: center;}
h2 {font-size:18px;margin:0.1875em 0 0.375em 0}
h3 {font-size:16px;margin:0.125em 0 0.25em 0}


/*-------------------------------INTEGRATION-------------------------------*/
#integration p {margin:0.75em 0;font-size:14px}


/* table - les balises apparaissent dans leur ordre normal d'ouverture (legend, thead et tfoot AVANT tbody) */
#integration table {border-collapse:collapse;} /* element table - defaut: fusionne les bordures.*/
#integration th {border:0.0625em solid #555;font-weight:bold;font-size:14px} /* cellule d'entete. Selon la valeur se son parametre 'scope', couvre la ligne ou la colonne.*/
#integration td {border:0.0625em solid #888;font-size:14px} /* cellule normale. */

/* positionnement */
#integration .centre, .centre {margin:auto}
.gauche {float:left}
.droite {float:right}
.clear {clear:both;}

/* alignement du texte */
.centrer, #integration .interne p.centrer, #integration .interne div.centrer p {text-align:center}
.align-gauche {text-align:left}
.align-droite {text-align:right}


/* listes */
#integration ul li:before {}
#integration ul.decoliste { list-style-type:none}
#integration ul.decoliste li:before { content: "\+ \ ";color:#E75407;font-size:18px; font-weight:bold}
#integration ul.liste-horizontale {display:block;list-style:none;padding:0;text-align:center}
#integration ul.liste-horizontale > li {display:inline-block;width:13em;border:1px solid #888;min-height:2.5em;margin:1em 1em;vertical-align:bottom} /* changer le % de largeur selon le nombre d'elements horizontaux desires, et la hauteur mini */

#integration ul {margin:0;padding:0 0 0 2.5em; font-size:14px}/* liste à puce */
#integration li {margin:0}/* element d'UL/OL */
#integration ul > li, #integration ol > li {list-style-image:none;}
#integration ul.droite,#integration ul.gauche {margin:0.5em 1em}


a.bouton {display:inline-block; margin:0.1875em;text-decoration:none;}
a.bouton:hover {background-image:none}


a:link{}
a:hover{}
a:visited {}


/* citations - insere des guillemets autour des citations */
blockquote {margin:0.7em;padding:0.2em 0.8em}
blockquote:after {display:inline-block;float:right;font-size:200%;margin:-0.8em -0.35em 0 0}
blockquote:before, cite:before {content:' " ';font-style:normal}

.demi {width:25em; margin:2em; float:left; background:none}
.tiers {width:18.133333em; margin:0.60em; float:left; background:none}
.quarts {width:14em; margin:0.25em; float:left; background:none}
.bloc60{width:34em; margin:0.5em; float:left; background:none}
.bloc40{width:22em; margin:0.5em; float:left; background:none}
.bloc70{width:40em; margin:0.5em; float:left; background:none}
.bloc30{width:16em; margin:0.5em; float:left; background:none}
.bloc-centrer{width:50em;margin: auto;background-color: none;padding:0.5em;border-radius:6px}

#integration .texte-couleur{color: #a52941}
#integration .texte-gros{font-size:24px}
.separation{border-top:1px solid #a52941;border-bottom:3px solid #a52941;width:90%;padding-bottom:1%;margin:auto;clear:both;margin-top:10px}
.bordure{border:3px dotted #C00}

/* Boutons de Contact de bas de page */
a .encart-contact{width: 20.7em; margin:0.5em; float:left; background-color:#a52941;padding:0.5em}
a .encart-contact p{text-align:center;font-size:22px;color:#fff}
a .encart-contact:hover{ background-color: #d6201f;}

body > #sb-container {

    z-index:99999999999;

}


.thepet { background-color:#FFF}

/*style integration*/
#integration .interne p{
	text-align:justify
	}
#integration .center, #pied .center{
	text-align:center !important;
	}

.container-flex{
	display:flex;
	}
.index-gauche{
	width: 53%;
	padding-right: 15px;
	align-self:center;
	}
.index-droite{
	width: 45%;
	text-align: center;
	}
.index-droite > div{
	margin-bottom: 30px;
	}
@media(max-width: 720px){
	.container-flex{
	display:flex;
	flex-direction: column;
	}
.index-gauche{
	width: 100%;
	padding-right: 0;
	padding-left: 0;
	}
.index-droite{
	width: 100%;
	}
	}


.produit{
	display:flex;
	flex-wrap:wrap;
	padding:5px;
	}

.contenu-produit{
	width: 291px;
	height: 375;
	background:#fff;
	border-bottom:5px solid #E75407;
	border-top: 5px solid #E75407;
	margin: 20px auto;
	box-shadow:1px 1px 5px #000;
	border-radius: 2px;
	}
.contenu-produit img{width:100%}
.contenu-produit h2{color: #E75407; height:25px; margin-bottom: 15px; text-align:center}
.contenu-produit .text-produit {min-height:145px; padding: 0 15px;}
#baspage .menus-footer li a:hover{
	color: #fff
}

.btn{padding:0.5em;background-color:#E75407;border-radius:6px;color:#000;font-size:14px}

.text-center{
	text-align:center !important;
	}
	
	
.text-produit.expend{
	min-height:280px;
	}
	
	
.btn-slick.slick-arrow{
	position: absolute;
	top: 50%;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(231, 84, 7, 0.8);
	border: 0;
	font-size: 15px;
	transition: display 1s ease-in-out;
	}
.contenu-produit:hover .cycle-slideshow2 .btn-slick.slick-arrow{
	display:block !important;
	}
.slick-next {
	right:0;
	}
.slick-prev {
	left:0;
	z-index:1;
	}
	
	
#integration #new-classique {
    background: transparent;
    padding: 5px;
    border: 1px solid #e75407 !important;
    margin: 15px 0;
    box-sizing: border-box;
    display: flex;
	align-items: center;
}
.titre-vignette{
	width: 40%;
	text-align:center;
	}
.titre-vignette a{
	display:block;
	width:100%;
	text-align:center;
	
	}
.titre-vignette a >img{
	margin: 5px auto;
	float: none !important;
	}
.bloc-test p.droite{
	background: #e75407;
	padding: 15px;
	border-radius: 4px;
	text-align:center !important;
}
.bloc-test p.droite a{
	color: #fff;
	text-decoration:none !important;
	
	}
.rubriq{
	text-align:center;	
	}
.rubriq > a{
	text-decoration:none;
	}
@media(max-width: 720px){
	
	
	}
@media(max-width: 490px){
	#integration #new-classique {
	align-items: center;
	flex-wrap:wrap;
	justify-content:center;
	}
	.titre-vignette{
		width: 100%;
		}
	}