@CHARSET "UTF-8";

/* *****************************************************
 *	BO VieWeb - Copyright 2012 VieWeb
 *	----------------------------------
 *	Feuille de style générale
 * *****************************************************/

* {
	font-family:					helvetica;
}

a, p, div, span, label, input, textarea, select, td, th {
	font-size:						10pt;
}

a {
	color:							#333333;
	text-decoration:				none;
	font-weight:					bold;
}

a:hover {
	text-decoration:				none;
	color:							#007FFF;
}

h1 {
	font-size:						16pt;
	border-bottom:					solid 1px #007FFF;
}

h2 {
	font-size:						14pt;
}

h3 {
	font-size:						12pt;
}

h4 {
	font-size:						11pt;
}

html {
	width:							100%;
	height:							100%;
	background:						#f4f6fb;
}

body {
	margin:							0;
	padding:						0;
	overflow:						auto;
	width:							100%;
	height:							100%;
}

img {
	border:							0;
}

.clear {
	clear:							both;
	height:							0px;
}

.right {
	position:						relative;
	float:							right;
}

.left {
	position:						relative;
	float:							left;
}

#page {
	position:						relative;
	width:							100%;
	/*height:							100%;*/
	margin:							0 auto;
}

a.loupe {
	display:						inline-block;
	width:							20px;
	height:							20px;
	position:						absolute;
	bottom:							0;
	right:							0;
	background:						url(../images/loupe.png) no-repeat top left;
}

/*
	Module header
 */
#header {
	width:							100%;
	top:							0;
	z-index:						1000;
	position:						relative;
	float:							left;
	background:						#ffffff;
}

#header .header {
	width:							100%;
	max-width:						1200px;
	box-sizing:						border-box;
	padding:						0 32px;
	position:						relative;
	margin:							0 auto;
	display:						flex;
	align-items:					center;
	height:							90px;
}

#header .header #logo {
	flex:							0 0 auto;
	float:							none;
	margin-right:					16px;
	display:						flex;
	align-items:					center;
}

#header .header #logo a {
	display:						inline-block;
}

#header .header #logo a img {
	height:							75px;
}

/* =====================================================
   Mini-panier dans le header (droite)
   margin-right: 57px = alignement bord droit sur la 5e carte du catalogue
   (32px padding header + 3px bordure carte + 4×16px gap inter-cartes = 57px depuis le bord interne)
   ===================================================== */
#header-cart {
	flex:							0 0 auto;
	border:							solid 1px #007FFF;
	border-radius:					4px;
	background:						#ffffff url(../images/icons/small/grey/shopping_cart_3.png) no-repeat 8px center;
	padding:						5px 12px 5px 34px;
	min-width:						140px;
	box-shadow:						1px 1px 3px #CCCCCC;
	box-sizing:						border-box;
	margin-right:					57px;
}

#header-cart a {
	display:						block;
	text-decoration:				none;
	color:							inherit;
}

#header-cart .hc-title {
	margin:							0 0 3px;
	font-size:						9pt;
	font-weight:					bold;
	color:							#383740;
	border-bottom:					solid 1px #007FFF;
	padding-bottom:					2px;
}

#header-cart .hc-info,
#header-cart .hc-total {
	margin:							2px 0 0;
	font-size:						8pt;
	color:							#555555;
	line-height:					1.3;
}

#header .header #ident {
	width:							auto;
	position:						relative;
	float:							left;
	color:							#FFFFFF;
	margin-left:					20px;
	margin-top:						7px;
}

#header .header #nav {
	width:							auto;
	position:						relative;
	float:							right;
	color:							#FFFFFF;
	margin-right:					45px;
	margin-top:						7px;
}

#header .header #nav a {
	color:							#FFFFFF;
	text-decoration:				none;
}

#header .header #nav a:hover {
	text-decoration:				underline;
}

#header .header #menu {
	flex:							1;
	float:							none;
	display:						flex;
	align-items:					flex-end;
	justify-content:				center;
	z-index:						10;
	height:							90px;
}

#header .header #menu ul.menu {
	margin:							0;
	padding:						0;
	list-style:						none;
	display:						flex;
	align-items:					center;
	text-align:						center;
	line-height:					30px;
	width:							auto;
}

#header .header #menu ul.menu li {
	display:						inline-block;
	float:							none;
	list-style:						none;
	overflow:						visible;
	position:						relative;
}

#header .header #menu ul.menu li a {
	display:						inline-block;
	line-height:					30px;
	overflow:						hidden;
	text-decoration:				none;
	padding:						0 11px;
	color:							#FFFFFF;/*#777777;*/
	font-weight:					bold;
	background:						#007FFF;/*#007FFF;/*url(flick/images/ui-bg_highlight-soft_50_dddddd_1x100.png) repeat-x top left;*/
	border-left:					solid 1px #807E7F;
}

#header .header #menu ul.menu li a.actif {
	color:							#000000;
	border-bottom:					solid 3px #007FFF;
	background:						#F8F0E7;
}

#header .header #menu ul.menu li a:hover {
	color:							#007FFF;
	background:						#F8F0E7;
}

#header .header #menu ul.menu li a.actif:hover {
	color:							#007FFF;
}

#header .header #menu ul.menu li ul.ssmenu {
	position:						absolute;
	top:							30px;
	/*left:							0;
	margin:							0 0 0 -130px;
	padding:						0 0 0 130px;*/
	width:							210px;/*770px;*/
	/*height:							28px;*/
	border-left:					solid 1px #007FFF;
	border-bottom:					solid 1px #007FFF;
	margin:							0;
	padding:						0;
}

#header .header #menu ul.menu li ul.ssmenu li {
	display:						block;
	float:							none;
	margin:							0;
	padding:						0;
	height:							29px;
}

#header .header #menu ul.menu li ul.ssmenu li a {
	display:						inline-block;
	width:							190px;
	line-height:					28px;
	padding-left:					10px;
	text-align:						left;
	border:							0;
	-moz-border-radius:				0;
	-webkit-border-radius:			0;
	-khtml-border-radius:			0;
	border-radius:					0;
	border-bottom:					solid 1px transparent;
}

#header .header #menu ul.menu ul.ssmenu li a:hover,
#header .header #menu ul.menu ul.ssmenu li a.actif {
	background:						#EEEEEE;
	line-height:					28px;
	border-bottom:					solid 1px #007FFF;
}

#header .header #submenu {
	position:						absolute;
	top:							0;
	right:							210px;
	z-index:						100;
}

#header .header #submenu a {
	background:						#E7E7E7;
	border:							solid 1px #007FFF;
	color:							#000000;
	-moz-border-radius:				4px;
	-webkit-border-radius:			4px;
	-khtml-border-radius:			4px;
	border-radius:					4px;
	display:						inline-block;
	padding:						5px 24px;
}

#header .header #inscript {
	flex:							0 0 auto;
	position:						static;
	margin-left:					auto;
	margin-right:					16px;
	white-space:					nowrap;
	z-index:						100;
}

#header #inscript label {
	width:							150px;
}

#header #inscript input {
	width:							100px;
}

#header #inscript span {
	line-height:					28px;
	display:						inline-block;
	font-weight:					bold;
}

#header #inscript a {
	display:						inline-block;
	background:						#999999 url(../images/icons/small/white/v-card.png) no-repeat top left;
	padding:						0 5px 0 26px;
	line-height:					24px;
	color:							#FFFFFF;
	-moz-border-radius:				2px;
	-webkit-border-radius:			2px;
	-khtml-border-radius:			2px;
	border-radius:					2px;
	-moz-box-shadow:				2px 2px 3px #AAAAAA;
	-webkit-box-shadow:				2px 2px 3px #AAAAAA;
	box-shadow:						2px 2px 3px #AAAAAA;
}

#header #inscript a:hover {
	-moz-box-shadow:				2px 2px 3px #333333;
	-webkit-box-shadow:				2px 2px 3px #333333;
	box-shadow:						2px 2px 3px #333333;
	text-decoration:				none;
}

/*
	Contenu
 */
#contenu {
}

#contenu #content {
	background:						#ECEEF0;
	padding:						10px;
	margin:							10px 0;
}

#contenu #dash {
	width:							auto;
	max-width: 						900px;
	min-height:						600px;
	margin:							auto;
	position:						relative;
	/*border-left:					solid 1px #E7E7E7;
	border-right:					solid 1px #E7E7E7;*/
	background:						#FFFFFF;
}

#contenu #dash #board {
	padding:						30px 20px;
}

#contenu #dash #board #carousel {
	margin:							auto;
}

/*
	Formulaires
 */
#formulaire {
	margin:							30px;
	position:						relative;
	float:							left;
	width:							670px
}

label {
	display:						inline-block;
	width:							200px;
	padding:						7px 0;
	color:							#777777;
	font-weight:					bold;
	line-height:					18px;
}

label.error {
	margin-left:					10px;
	color:							red;
}

label[for="cgv"],
label[for="odc"] {
	width:							auto;
}

input[type="text"],
input[type="password"] {
	width:							244px;
	padding:						1px 3px;
	height:							18px;
	border:							solid 1px #444444;
	-moz-box-shadow:				2px 2px 3px #CCAF91;/*CCCCCC;*/
	-webkit-box-shadow:				2px 2px 3px #CCAF91;/*CCCCCC;*/
	box-shadow:						2px 2px 3px #CCAF91;/*CCCCCC;*/
}

select {
	width:							252px;
	padding:						1px 1px 1px 3px;
	line-height:					18px;
	border:							solid 1px #444444;
	-moz-box-shadow:				2px 2px 3px #CCAF91;/*CCCCCC;*/
	-webkit-box-shadow:				2px 2px 3px #CCAF91;/*CCCCCC;*/
	box-shadow:						2px 2px 3px #CCAF91;/*CCCCCC;*/
}

select[multiple="multiple"] {
	margin:							7px 0;
	vertical-align:					top;
}

/* Boutons radio — pastille pleine bleue (site entier) */
input[type="radio"] {
	-webkit-appearance:				none;
	-moz-appearance:					none;
	appearance:							none;
	width:								18px;
	height:								18px;
	border-radius:						50%;
	border:								2px solid #d1d5db;
	background:							#ffffff;
	margin:								0;
	position:							relative;
	cursor:								pointer;
	vertical-align:						middle;
	flex-shrink:						0;
	outline:							none;
	transition:							border-color 0.15s, background 0.15s;
}

input[type="radio"]:hover {
	border-color:						#007FFF;
}

input[type="radio"]:checked {
	border-color:						#007FFF;
	background:							#007FFF;
}

input[type="radio"]:checked::after {
	content:							'';
	position:							absolute;
	width:								6px;
	height:								6px;
	border-radius:						50%;
	background:							#ffffff;
	top:								50%;
	left:								50%;
	transform:							translate(-50%, -50%);
}

input[type="submit"],
input[type="button"] {
	width:							150px;
	height:							24px;
	background:						#EEEEEE;
	border:							solid 1px #444444;
	-moz-box-shadow:				2px 2px 3px #AAAAAA;
	-webkit-box-shadow:				2px 2px 3px #AAAAAA;
	box-shadow:						2px 2px 3px #AAAAAA;
	-moz-border-radius:				4px;
	-webkit-border-radius:			4px;
	-khtml-border-radius:			4px;
	border-radius:					4px;
	font-weight:					bold;
	cursor:							pointer;
	float:							right;
}

input[type="submit"]:hover {
	background:						#E4E4E4;
	border:							solid 1px #333333;
	-moz-box-shadow:				1px 1px 1px #999999;
	-webkit-box-shadow:				1px 1px 1px #999999;
	box-shadow:						1px 1px 1px #999999;
	color:							#007FFF;
}

#formulaire input[type="submit"] {
	float:							left;
	margin-left:					120px;
}

#formulaire input#calculer {
	float:							left;
	margin:							0 5px 0 10px;
}

#motdepasse input[type="submit"] {
	float:							left;
	margin-left:					260px;
}

input[type="text"].error,
input[type="password"].error {
	border:							solid 1px #FF0000;
	-moz-box-shadow:				2px 2px 3px #C9A09C;
	-webkit-box-shadow:				2px 2px 3px #C9A09C;
	box-shadow:						2px 2px 3px #C9A09C;
}

select.error {
	border:							solid 1px #FF0000;
	-moz-box-shadow:				2px 2px 3px #C9A09C;
	-webkit-box-shadow:				2px 2px 3px #C9A09C;
	box-shadow:						2px 2px 3px #C9A09C;
}

input[type="checkbox"].error {
	border:							solid 1px #FF0000;
}

#formulaire hr {
	border:							0;
	border-top:						solid 1px #AAAAAA;
}

#formulaire p.mandatory {
	color:							#AAAAAA;
	margin:							3px 0;
}

#board p.message {
	background:						#FFCACA;
	color:							#FF0000;
	padding:						5px 10px;
}

#board .miniature {
	width:							80px;
	height:							56px;
	overflow:						hidden;
}

/*
	FancyBox
 */
.fancybox-outer {
	background:						#FFFFFF;
}

.fancybox-inner {
	background:						#FFFFFF;
}

.fancybox-inner h3 {
	border-bottom:					solid 1px #555555;
	color:							#555555;
	margin-top:						0;
}

/*
	Module footer
 */
#footer {
	color:							#000000;
	text-align:						center;
	line-height:					23px;
	position:						relative;
	width:							100%;
	bottom:							0;
	background:						url(flick/images/ui-bg_highlight-soft_50_dddddd_1x100.png) repeat-x bottom left;
	border-top:						solid 1px #007FFF;
}

#footer a {
	color:							#000000;
	text-decoration:				none;
}

#footer a:hover,
#footer a.active {
	color:							#007FFF;
}

/*
	Panier
 */
#panier {
	display:						none; /* Mini-panier maintenant dans le header */
}

#panier h2 {
	margin:							0;
	font-size:						11pt;
	border-bottom:					solid 1px #007FFF;
	color:							#383740;
	background:						url(../images/icons/small/grey/shopping_cart_3.png) no-repeat 0 -1px;
	padding:						0 0 0 25px;
}

#panier p {
	margin:							5px 0;
}

#panier a {
	display:						inline-block;
	margin-right:					10px;
	position:						absolute;
	bottom:							0;
	right:							0;
}

#tunnel {
	margin:							auto;
	width:							830px;
}

/* Étapes du tunnel de commande (Panier/Livraison/Paiement/Envoi du fichier/
   Validation) — recolorées (Pascalou, 21/10/2026) : tons bleus identiques à
   ceux des boutons du bas de page (#007FFF / #0d1b4b, cf. page/panier/
   css.css), même technique de dégradé (inset box-shadow) qu'avant, juste la
   teinte change (était bleu+marron #5C0E0D, legacy VieWeb). L'étape ACTIVE
   passe en vert (était blanc+rose) pour rester bien distincte. */
#tunnel .info,
#tunnel .info.off.prev:hover {
	padding:						0 15px 0 40px;
	font-size:						12pt;
	font-weight:					bold;
	line-height:					28px;
	-moz-border-radius:				15px;
	-webkit-border-radius:			15px;
	-khtml-border-radius:			15px;
	border-radius:					15px;
	background:						#007FFF;
	-moz-box-shadow:				inset 0px -20px 30px #0d1b4b;
	-webkit-box-shadow:				inset 0px -20px 30px #0d1b4b;
	box-shadow:						inset 0px -20px 30px #0d1b4b;
	color:							#FFFFFF;
}

#tunnel a:hover .info.off.prev {
	text-decoration:				none;
	color:							#000000;
	display:						inline-block;
}

#tunnel .info.actif {
	color:							#166534;
	background:						#FFFFFF;
	-moz-box-shadow:				inset 0px -20px 30px #86EFAC;
	-webkit-box-shadow:				inset 0px -20px 30px #86EFAC;
	box-shadow:						inset 0px -20px 30px #86EFAC;
}

#tunnel .info.off {
	color:							#000000;
	background:						#FFFFFF;
	-moz-box-shadow:				inset 0px -20px 30px #007FFF;
	-webkit-box-shadow:				inset 0px -20px 30px #007FFF;
	box-shadow:						inset 0px -20px 30px #007FFF;
}

#tunnel .outset,
#tunnel .off.prev:hover .outset {
	position:						absolute;
	top:							-3px;
	left:							-3px;
	background:						#FFFFFF;
	-moz-box-shadow:				2px 2px 3px #0d1b4b;
	-webkit-box-shadow:				2px 2px 3px #0d1b4b;
	box-shadow:						2px 2px 3px #0d1b4b;
	-moz-border-radius:				15px;
	-webkit-border-radius:			15px;
	-khtml-border-radius:			15px;
	border-radius:					15px;
}

#tunnel .actif .outset {
	-moz-box-shadow:				2px 2px 3px #15803d;
	-webkit-box-shadow:				2px 2px 3px #15803d;
	box-shadow:						2px 2px 3px #15803d;
}

#tunnel .off .outset {
	-moz-box-shadow:				2px 2px 3px #888888;
	-webkit-box-shadow:				2px 2px 3px #888888;
	box-shadow:						2px 2px 3px #888888;
}

#tunnel .bulle,
#tunnel .off.prev:hover .bulle {
	width:							30px;
	line-height:					30px;
	-moz-border-radius:				15px;
	-webkit-border-radius:			15px;
	-khtml-border-radius:			15px;
	border-radius:					15px;
	border:							solid 1px #0d1b4b;
	background:						#007FFF;
	-moz-box-shadow:				inset 0px -10px 20px #0d1b4b;
	-webkit-box-shadow:				inset 0px -10px 20px #0d1b4b;
	box-shadow:						inset 0px -10px 20px #0d1b4b;
	text-align:						center;
	font-size:						16pt;
	font-weight:					bold;
}

#tunnel .actif .bulle {
	border:							solid 1px #16A34A;
	background:						#FFFFFF;
	-moz-box-shadow:				inset 0px -10px 20px #86EFAC;
	-webkit-box-shadow:				inset 0px -10px 20px #86EFAC;
	box-shadow:						inset 0px -10px 20px #86EFAC;
	color:							#166534;
}

#tunnel .off .bulle {
	border:							solid 1px #007FFF;
	background:						#FFFFFF;
	-moz-box-shadow:				inset 0px -10px 20px #007FFF;
	-webkit-box-shadow:				inset 0px -10px 20px #007FFF;
	box-shadow:						inset 0px -10px 20px #007FFF;
}

#tunnel a:hover * {
	color:							#007FFF;
}

#tunnel .sep {
	height:							0;
	border-bottom:					dotted 1px #0d1b4b;
	width:							42px;
	margin:							15px 10px 15px 5px;
}

/* =====================================================
   Responsive — header/nav (Pascalou, 24/10/2026 : "la nav mobile qui
   déborde" repérée en vérifiant la page produits sur iPhone). Le header
   d'origine est un flex row en largeur fixe (logo + menu + inscript +
   mini-panier) sans wrap ni media query : sur un écran étroit, les liens
   (Nos produits / Mon compte / Contact / Déconnexion) débordent du cadre
   au lieu de passer à la ligne. Mêmes breakpoints que page/catalogue/css.css
   (900px / 560px) pour rester cohérent avec le reste du site.
   ===================================================== */
@media (max-width: 900px) {
	#header .header {
		flex-wrap:					wrap;
		height:						auto;
		padding:					12px 16px;
		justify-content:			center;
	}

	#header .header #logo {
		margin:						0 0 10px;
	}

	#header .header #logo a img {
		height:						55px;
	}

	#header .header #menu {
		flex:						1 1 100%;
		order:						3;
		height:						auto;
	}

	#header .header #menu ul.menu {
		flex-wrap:					wrap;
		justify-content:			center;
		line-height:				normal;
	}

	#header .header #menu ul.menu li a {
		padding:					8px 10px;
	}

	#header .header #menu ul.menu li ul.ssmenu {
		position:					static;
		width:						100%;
		border:						0;
		margin-top:					4px;
	}

	#header .header #menu ul.menu li ul.ssmenu li a {
		width:						100%;
		box-sizing:					border-box;
	}

	#header .header #inscript {
		order:						2;
		margin:						0 auto 10px;
	}

	#header-cart {
		order:						4;
		flex:						1 1 100%;
		margin:						10px auto 0;
		max-width:					260px;
	}
}

@media (max-width: 560px) {
	#header .header #logo a img {
		height:						44px;
	}

	#header .header #menu ul.menu li a {
		font-size:					12px;
		padding:					7px 8px;
	}
}