/* retire la couleur de selection au panier draggable */
#menu-panier ::-moz-selection {
	background:transparent;
}
#menu-panier ::selection {
	background:transparent;
}

#main_client{
	padding: 20px 2% 10px 2%;
	min-height: 350px;
}
#main_client table{
    width:100%;
    margin:auto;
    
}
#main_client table td{
    vertical-align:middle;
    padding:4px 0;
}
#main_client .seconnecter table td{
    width:50%;
}
#main_client table td input{
	margin:0;
	width:100%
}
#main_client .label{
    color:#000000;
    text-align:right;
    padding-right:4px;
}
#main_client .date select{
    width:24%;
}
#main_panier h2,
#main_client h2{
    overflow: hidden;
	margin:10px 0px;
	text-transform: uppercase;
}
#main_panier h2{
	margin:40px 0px 10px;
}

#main_client h3 {
    font-size:15px;
    margin:10px 0 5px 0;
}
/**
 *     FORM INSCRIPTION 
 */

#main_client  .block_form{
	width:46%;
	padding:0 1%;
    margin:0 0 35px 0;
    display:inline-block;
    vertical-align:top;
}
#main_client  #afflivt{
	width:96%;
}
#main_client  #afflivt .form_content{
	margin-left:46%;
}


#main_client  .block_form label{
    display:inline-block;
    width:40%;
    font-size:14px;
    text-align:right;
    font-weight:normal;
}
#main_client .content_client form.contact label{
	width:17%;
}
#main_client .block_form input[type='text'],
#main_client .block_form input[type='password'],
#main_client .block_form select{
    display:inline-block;
    width:58%;
}
#main_client  .block_form select{
    width:58%;
}
#main_client form.contact  input[type='text'],
#main_client form.contact  input[type='password'],
#main_client form.contact  select{
    display:inline-block;
    width:76%;
}
#main_client form.contact select{
    width:77%;
}
#main_client form.contact textarea {
	display: inline-block;
	width: 76%;
}

#main_client .block_form .date select{
    width:16%;
}
#main_client .block_form .date select.mois{
    width:22%;
}
#main_client .block_form .activ_livraison{
	padding-left:30%;
	font-size:12px;
}
#main_client  .CGV_compte{
    float:right;
    margin-top:10px;
    padding-left:5%;
    font-size:12px;
}
#main_client .bt_send{
	text-align:right;
    margin-top:10px;
}

/**
 *    CLIENT CONNECTE
 */
#main_client .logged_client{
    display:inline-block;
    vertical-align: top;
    width:78%;
    margin:0;
    font-size:14px;
}
#main_client .client_menu{
    display:inline-block;
    vertical-align: top;
    width:18%;
    margin:0 1% 30px;
}
#main_client .client_menu h3 {
    overflow: hidden;
	margin:20px 0px 10px 0px;
	text-transform: uppercase;
}
#main_client .client_menu dl{
	margin:0;
}
.cat dt{
	margin:0;
	margin-left:0px;
	font-weight:normal;
	border-top:1px solid #E7E7E7;
}

.cat dt a{
	display:block;
	padding:6px 2px 6px 5px;
	font-weight:normal;
	font-size:13px;
	color: #313131;
}
.cat dt a:hover{
	color: #D0006F;
}
.cat dt.ss_cat_sel a:before {
  content: "▶ ";
  color: #D0006F;
  padding-right:5px;
}
.cat dt.ss_cat_sel a {
    padding-left: 0px;
}
#main_client .client_menu dt{
	font-weight: normal;
	text-transform:uppercase;
	font-size:13px;
	padding:5px 0;
	border-top: 0;
	border-bottom: 1px solid #E7E7E7;
}

#main_client .client_col_1,
#main_client .client_col_2{
    display:inline-block;
    vertical-align: top;
    width:46%;
    padding:0 1% 0 1%;
}
#main_client .logged_client .infos,
#main_client .logged_client .adre{
    font-size:14px;
    line-height:22px;
}
#main_client .logged_client .infos ul{ margin:5px 0;}
#main_client .logged_client .infos li{ list-style: none;}
#main_client .logged_client form{
    margin:10px 0;
}
#main_client .logged_client label{
    display:inline-block;
    vertical-align: middle;
    width:40%;
    text-align:right;
}
#main_client .logged_client #form-stat label {
	width: auto;
}
#main_client table.jqplot-table-legend{
		display:inline-block;
}
#main_client .logged_client input[type='text'],
#main_client .logged_client input[type='password']{
    display:inline-block;
    width:56%
}
#main_client .logged_client select{
	display:inline-block;
    width:58%
}
#main_client .logged_client textarea{
    display:inline-block;
    width:56%
}


#main_client .champs_obli{
    font-size:11px;
    font-style:italic;
    text-align:right;
    padding-right:80px;
}
#main_client .logged_client .bts_form{
    text-align:right;
}
#main_client .logged_client .client_col_1 .date select,
#main_client .logged_client .client_col_2 .date select{
    width:16%;
}
#main_client .logged_client .form_infos .date select{
	width:18%;
}

#main_client .logged_client .demande_retour input[type='text'],
#main_client .logged_client .demande_retour input[type='password'],
#main_client .logged_client .demande_retour select,
#main_client .logged_client .demande_retour textarea{
    width:95%
}
#main_client .logged_client .demande_retour select{
    width:96%
}


#main_client .logged_client .form_infos .offres_part{
	padding:5px 0 20px 40%;
}
#main_client .logged_client .bt_print{
	float:right;
}

#main_client .logged_client table{
    width:100%;
    margin:10px 0;
    border-collapse: collapse;
}
#main_client .logged_client table th{
    font-weight: normal;
    text-align:left;
    padding:5px 10px;
    background: #8E8D91;
    color: #FFFFFF;
}
#main_client .logged_client table td{
    border-bottom: 1px solid #efe8e6;
    padding:10px 10px;
}

#main_client .logged_client .messagerie .date{
    font-weight: normal;
    font-size:11px;
    text-align:left;
    padding:5px 10px;
    background: #8E8D91;
    color: #FFFFFF;
    margin-top:10px;
}
#main_client .logged_client .messagerie .message{
    font-weight: normal;
    text-align:left;
    padding:5px 10px;
    border:1px solid #8E8D91;
}
#main_client .logged_client .messagerie textarea{
    width:99%
}
/**
 *     EMAIL PERDU 
 */
#main_client .email_perdu{
    margin-top:20px;
}
#main_client .email_perdu input[type='text']{
    width:250px;
}


.cmd_commentaire textarea{
	min-height:80px;
	width:99%;
}


/**
* catalogue fidélité
*/
#fidepunto_top{
	margin:0 0 15px 0;
	padding:0 0 0 0;
}
#fidepunto_top p{
	margin:0 0 0 0;
	padding:0 0 0 0px;
	color:#D0006F;
}

#fidepunto_top p span{
	color:#333333;
}

.fidepunto_left{
	width:10%;
	display:inline-block;
	vertical-align:top;
}
.fidepunto_mid{
	width:78%;
	display:inline-block;
	vertical-align:top;
	text-align:center;
}
.fidepunto_right{
	width:10%;
	display:inline-block;
	vertical-align:top;
	text-align:right;
}

.fidepunto_prod{
	margin:0px;
	padding:10px 50px 10px 10px;
	width:180px;
	display:inline-block;
	vertical-align:top;
	height:272px;
	font-size:12px;
}

.fidepunto_prod_intitule{
	color:#D0006F;
}

p.fidepunto_au_lieu{
	padding:4px 0 5px 0;
	font-size:9px;
}

p.fidepunto_order{
	clear:both;
	text-align:right;
	padding:0 0 12px 0;
	line-height:12px;
}

.fidepunto_valeur{
	float:right;
	width:80px;
	text-align:right;
	color:#D0006F;
	font-weight:bold;
}

.fidepunto_prod img{
	border:1px solid #CDCDCD;
	width:180px;
}

.fidepunto_prod p{
	margin:0;
	padding:0;
}


td.jqplot-seriesToggle:hover, td.jqplot-seriesToggle:active {
    cursor: pointer;
}

.jqplot-table-legend .jqplot-series-hidden {
    text-decoration: line-through;
}

div.jqplot-table-legend-swatch-outline {
    border: 1px solid #cccccc;
    padding:1px;
    width:12px;
}

div.jqplot-table-legend-swatch {
    width:0px;
    height:0px;
    border-top-width: 5px;
    border-bottom-width: 5px;
    border-left-width: 6px;
    border-right-width: 6px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-style: solid;
}

.jqplot-title {
    top: 0px;
    left: 0px;
    padding-bottom: 0.5em;
    font-size: 1.2em;
}

table.jqplot-cursor-tooltip {
    border: 1px solid #cccccc;
    font-size: 0.75em;
}


.jqplot-cursor-tooltip {
    border: 1px solid #cccccc;
    font-size: 0.75em;
    white-space: nowrap;
    background: rgba(208,208,208,0.5);
    padding: 1px;
}

.jqplot-highlighter-tooltip, .jqplot-canvasOverlay-tooltip {
    border: 1px solid #cccccc;
    font-size: 0.75em;
    white-space: nowrap;
    background: rgba(208,208,208,0.5);
    padding: 1px;
}

.jqplot-point-label {
    font-size: 0.75em;
    z-index: 2;
}
      
td.jqplot-cursor-legend-swatch {
    vertical-align: middle;
    text-align: center;
}

div.jqplot-cursor-legend-swatch {
    width: 1.2em;
    height: 0.7em;
}

.jqplot-error {
/*   Styles added to the plot target container when there is an error go here.*/
    text-align: center;
}

.jqplot-error-message {
/*    Styling of the custom error message div goes here.*/
    position: relative;
    top: 46%;
    display: inline-block;
}

div.jqplot-bubble-label {
    font-size: 0.8em;
/*    background: rgba(90%, 90%, 90%, 0.15);*/
    padding-left: 2px;
    padding-right: 2px;
    color: rgb(20%, 20%, 20%);
}

div.jqplot-bubble-label.jqplot-bubble-label-highlight {
    background: rgba(90%, 90%, 90%, 0.7);
}

div.jqplot-noData-container {
	text-align: center;
	background-color: rgba(96%, 96%, 96%, 0.3);
}

div.jqplot-pie-series{
	padding:1px;
	color:white;
	text-shadow: 0px 0px 9px #000;
}





/* FOCUS */
.top_right .mon_compte{
	display: inline-block;
	vertical-align:top;
	padding-right: 3px;
	/*width:80px;*/
}
#top #client_focus{
	position:relative;
	font-size:11px;
	text-align:center;
}
#top #client_focus .client-cont{
	position:absolute;
	z-index:12000;
	width:220px;
	min-height:50px;
	top:55px;
	right:0px;
	display:block;
	visibility: hidden;
	border:1px solid #c0c0c0;
	background:#FFFFFF;
	-moz-box-shadow: 1px 1px 3px 1px #656565;
	-webkit-box-shadow: 0px 0px 3px 1px #656565;
	-o-box-shadow: 0px 0px 3px 1px #656565;
	box-shadow: 0px 0px 5px 0px #656565;
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=NaN, Strength=3);
	text-align:left;
}
#top #client_focus .client_focus_nom{
	padding:10px 0 0 15px;
}
#top #client_focus .top_pop ul{
	margin:6px 0 10px 0;
	padding:0;
	list-style:none;
}
#top #client_focus .top_pop li{
	margin:0px 0 0px 0;
	padding:2px 0 2px 21px;
}
#top #client_focus .top_pop li a{
	color:#404040;
	font-size:12px;
}
#top #client_focus .top_pop li a:hover{
	color:#D0006F;
	text-decoration:underline;
}
#top #client_focus .top_pop li span{
	color:#D0006F;
	font-weight:bold;
}

#top #client_focus:hover .client-cont{
	visibility: visible;
}


/**
 * =========== AVIS ===============
 */
/** NOTE AVIS **/
.overlay_avis{
	padding:10px;
	text-align:left;
}
#form_avis{
	font-weight:bold;
}
#form_avis .block_left,
#form_avis .block_right{
	display:inline-block;
	vertical-align:top;
	width:49%;
}

#form_avis .champs_txt{
	position:relative;
}
#form_avis label{
	position:absolute;
	font-size: 14px;
	color: #b4b4b4;
	top:10px;
	left:12px;
	font-family: Arial, sans-serif;
	
}

#form_avis .champs_note{
	position:relative;
	border: 1px solid #ede7ec;
	height: 36px;
	padding:0 10px;
}
#form_avis ul{
	padding:10px 0 0 50px;
}
#form_avis li label{
	position:static;
	font-size:18px;
}
#form_avis li label .fa{
	color: #D0006F;
}
#form_avis .champs_titre{
    width:100%;
}
#form_avis input[type="text"]{
	font-family: Arial, sans-serif;
	height: 36px;
  	font-size: 18px;
  	padding:0 10px;
}
#form_avis textarea{
	font-family: Arial, sans-serif;
	width:100%;
  	font-size: 18px;
  	padding:10px;
}

#form_avis textarea{
	height:140px;
	min-height:140px;
}

#form_avis .bt_prod{
	font-weight:normal;
}




#tab-avis{
    position:relative;
}
#tab-avis .avis_moyenne{
	color:#202020;
	font-size:13px;
}
#tab-avis .avis_bt{
	position:absolute;
	top:0;
	right:0px;
	margin:5px 0 0 0;
}
.avis_content{
	border-top:1px solid #F0F0F0;
	margin:10px 10px 15px 5px;
	padding-top:5px;
}
.avis_content .content{
	display:inline-block;
	width:89%;
	color:#202020;
	font-size:14px;
}
.avis_content .avis_info{
	font-size:11px;
	font-style:italic;
	color:#313131;
	margin-bottom:5px;
}
.avis_content .note{
	display:inline-block;
	vertical-align:top;
	width:10%;
	margin-top:10px;
	color:#D0006F;
	font-size:18px;
}
.avis_content .user_verif{
	color:#313131;
	font-weight:bold;
}
.avis_content .user_verif .fa{
	color:#1fc11f;
	font-size:14px;
	margin:0 0 0 5px;
}
.link_avis{text-align:center;font-size:12px;margin:10px 0 10px 0;}
.link_avis a{color:#D0006F;}
.avis_stars{
	display: flex;
}
.avis_stars .star_off,
.avis_stars .star_on,
.avis_stars .star_half{
	width:12.5px;
	height:17px;
}

.avis_stars .fa{
	color:#EFB20A;
	font-size:13px;
}

ul.notes-echelle {
	margin:0;
	padding:0;
	font:.75em/1.2 Arial, Helvetica, sans-serif;
}
ul.notes-echelle li {
	float:left;
	margin:0;
	padding:0;
	list-style:none;
	min-width:20px;
	min-height:10px;
}
/* Correctif IE6 sur min-width & min-height */
* html ul.notes-echelle.js li {
	width:20px;
	height:20px;
}
ul.notes-echelle.js input {
	position:absolute;
	left:-999%;
	background-color: transparent;
    border: 0px solid;
}
ul.notes-echelle li.note-checked {
	font-weight:bold;
}
ul.notes-echelle.js li.note-focus {
	outline:1px dotted #000;
}




.donne_avis{
	font-size:15px;
}
.donne_avis_ligne{
	width:90%;
	margin:auto;
	margin-top:15px;
	border:3px solid #ede7ec;
}
.donne_avis_ligne_img{
	width:40%;
	vertical-align:top;
	display:inline-block;
	text-align:center;
}
.donne_avis_ligne_img img{
	width:100%; 
	max-width:260px;
}
.donne_avis_ligne_form{
	width:58%;
	vertical-align:top;
	display:inline-block;
}
.donne_avis_ligne_form .champs_note{
	margin-top:5px;
	margin-bottom:12px;
}
.donne_avis_ligne_sub{
	width:94%;
	text-align:right;
	margin-top:12px;
}

#form_avis .pseudo input[type="text"]{
	display:inline-block;
	/*width:245px;*/
}





/* CSS pour le suivi de colis */
/**
.container {
	max-width: 900px;
	margin: 0 auto;
	padding: 10px;
}
**/
/* Ligne de progression */
.progress-container {
	position: relative;
	margin: 30px 0px 60px 0px;
}

.progress-line {
	position: absolute;
	top: 30px;
	left: 60px;
	right: 60px;
	height: 4px;
	background: #e0e7ff;
	border-radius: 2px;
}

.progress-line-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: linear-gradient(90deg, #D0006F 0%, #D0007F 100%);
	border-radius: 2px;
	transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 2px 10px rgba(208, 0, 111, 0.4);
}

/* Étapes */
.steps {
	display: flex;
	justify-content: space-between;
	position: relative;
	z-index: 2;
}

.step {
	text-align: center;
	flex: 1;
	transition: transform 0.3s ease;
}


.step-circle {
	width: 60px;
	height: 60px;
	background: white;
	border: 4px solid #e0e7ff;
	border-radius: 50%;
	margin: 0 auto 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	transition: all 0.3s ease;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.step-icon {
	font-size: 24px;
	transition: transform 0.3s ease;
}

.step.completed .step-circle {
	background: linear-gradient(135deg, #D0006F 0%, #D0007F 100%);
	border-color: transparent;
	box-shadow: 0 4px 20px rgba(208, 0, 111, 0.4);
}

.step.completed .step-icon {
	filter: brightness(0) invert(1);
}

.step.active .step-circle {
	background: white;
	border-color: #D0006F;
	border-width: 4px;
	animation: pulse 2s infinite;
}

.step.active .step-icon {
	animation: bounce 1s infinite;
}

@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(208, 0, 111, 0.7);
	}
	70% {
		box-shadow: 0 0 0 15px rgba(208, 0, 111, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(208, 0, 111, 0);
	}
}

@keyframes bounce {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-5px);
	}
}

.step-title {
	font-size: 16px;
	font-weight: 600;
	color: #999;
	margin-bottom: 5px;
	transition: color 0.3s ease;
}

.step.completed .step-title,
.step.active .step-title {
	color: #D0006F;
}

.step-date {
	font-size: 13px;
	color: #999;
}

/* Détails supplémentaires */
.tracking-details {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 20px;
	margin-top: 40px;
}

.detail-box {
	background: #f8f9fb;
	padding: 20px;
	border-radius: 10px;
	text-align: center;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.detail-box:hover {
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.detail-icon {
	font-size: 32px;
	margin-bottom: 10px;
}

.detail-label {
	font-size: 14px;
	color: #666;
	margin-bottom: 5px;
}

.detail-value {
	font-size: 18px;
	font-weight: 600;
	color: #333;
}

/* Timeline des événements */
.events-timeline {
	margin-top: 40px;
}

.events-title {
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 20px;
	color: #333;
}

.event-item {
	display: flex;
	gap: 20px;
	margin-bottom: 20px;
	padding-left: 20px;
	position: relative;
	animation: slideIn 0.5s ease;
}

@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateX(-20px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.event-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 8px;
	width: 8px;
	height: 8px;
	background: #D0006F;
	border-radius: 50%;
}

.event-time {
	flex-shrink: 0;
	font-size: 14px;
	color: #666;
	width: 120px;
}

.event-description {
	flex: 1;
	font-size: 15px;
	color: #333;
}



/* Responsive */
@media (max-width: 768px) {
	.tracking-card {
		padding: 20px;
	}

	.tracking-title {
		font-size: 24px;
	}

	.progress-line {
		left: 30px;
		right: 30px;
	}

	.step-circle {
		width: 50px;
		height: 50px;
	}

	.step-icon {
		font-size: 20px;
	}

	.step-title {
		font-size: 14px;
	}

	.step-date {
		font-size: 12px;
	}

	.tracking-details {
		grid-template-columns: 1fr;
	}

	.event-item {
		flex-direction: column;
		gap: 5px;
	}

	.event-time {
		width: auto;
	}
}

/* Animation de chargement */
.loading {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 3px solid #f3f3f3;
	border-radius: 50%;
	border-top-color: #D0006F;
	animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}
/* FIN CSS pour le suivi de colis */