@charset "utf-8";
/* CSS Document */

/*@import url("style_client.css");*/

@media (min-width: 1024px) {
	#header-container, .body-container, .pied-container {
		/* padding: 0.1px 70px; */
	}

	div.zone_form {
		border-left: solid 1px rgba(255,255,255,.2);
		color: #fff;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: stretch;
		-ms-flex-align: stretch;
		align-items: stretch;
		border-right: solid 1px rgba(255,255,255,.2);
	}

	.header-items {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}

	.panier-abo {
		min-height: 1px;
		width: 380px;
	}

	.panier-prixtotal {
		font-size: 34px;
	}

	#bloc_abo {
		-webkit-box-flex: 1;
		-ms-flex: 1 1 0%;
		flex: 1 1 0%;
		max-width: 800px;
		/* padding-right: 70px; */
	}
}

@media (max-width: 1023px){
	#bloc_abo {
		padding: 0;
	}

	.panier-abo {
		-webkit-box-flex: 1;
		-ms-flex: 1 100%;
		flex: 1 100%;
		-webkit-box-ordinal-group: 1;
		-ms-flex-order: 0;
		order: 0;
	}

	.boite-entete p._first {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
	}

	.modalite-btn .valide {
		width: 100%;
		padding: 14px 0;
	}
}

@media(min-width: 768px) and (max-width: 1023px) {
	.body-container, .pied-container {
		/* padding: 0.1px 49px; */
	}
}

@media (min-width: 768px) {
	h3._font {
		font-size: 24px;
	}

	.modalite-cell {
		-webkit-box-flex: 1;
		-ms-flex: 1 1 0px;
		flex: 1 1 0px;
	}
}

@media (max-width: 767px){
	.body-container, .pied-container {
		/* padding: 0.1px 14px; */
	}

	#bloc_abo {
		-webkit-box-flex: 1;
		-ms-flex: 1 100%;
		flex: 1 100%;
		-webkit-box-ordinal-group: 2;
		-ms-flex-order: 1;
		order: 1;
		padding: 0;
	}

	#bloc_abo h2.align-item {
		font-size: 22px;
	}

	.panier-prixtotal {
		font-size: 28px;
	}

	.boite-entete.aligne {
		margin-bottom: 15px;
	}
}

@media (max-width:640px)
{
	
	body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td
	{
		margin:0;
		padding:0;
	}
	body
	{
		margin: 6px;
		padding: 0;
		font: 12px Arial, Helvetica, sans-serif;
		color:#666666;
		background:#FFFFFF;
	}
	
	.sep_abo, .sep
	{
		clear:both;
		margin-bottom: 4px;
	}
	
	
	/* 
	#4c9fd3 bleu clair 
	#125289 bleu foncé
	#b1c81e vert
	*/
	
	/* en-tête avec bandeau et logo */
	
	#base
	{
		width: auto;
		/*border: 1px solid red;*/
		margin: 0 auto;
	}
	
	#header
	{
		margin-bottom:16px;
		/*border: 1px solid red;*/
		overflow:auto;
	}
	.logo
	{
		width: 122px;
		margin: 12px 12px 0 6px;		
	}
	.logo img
	{
		width:105px;
		height:29px;
	}
	.bdeau_txt
	{
		display:none;
	}
	
	div.zone_form
	{
		float: right;
		margin-right:12px;
	}
	
	#bloc_ident
	{
		width:120px;
	}
	#bloc_ident ul
	{
		clear:both;
	}
	#bloc_ident li
	{
		margin-left: 8px;
		line-height: 1.3em;
		list-style: none;
	}
	
	p
	{
		margin: .5em;
	}
	
	
	/* fin en-tête avec bandeau et logo */
	
	/* Pied de page */
	
	#pied
	{
		color: #666666;
		height: 40px;
		padding-top: 20px;
		margin-bottom: 20px;
		font-size:12px;
	}
	#pied a
	{
		background: none;
		padding: 0;
	}

	/* Fin de pied de page */


	/* Partie changement de mot de passe */

	#mdp
	{
		
	}
	
	#mdp h3
	{
		
	}
	#mdp .erreur_petit
	{
		color: #FF0000;
		font-weight: bold;
	}
	#mdp div
	{
		margin: 8px 0;
	}
	#mdp form
	{
		text-align:center;
	}
	#mdp label
	{
		font-weight: bold;
		display:inline-block;
	}
	#mdp input[type=text]
	{
		border: 1px solid #CCCCCC;
		margin: 18px 0;
		width: 90%;
		font-size:16px;
	}
	#mdp .gestion_valide
	{
		margin:1em;
		padding: 8px 24px;
		border:none;
		background-color: #125289;
		color: #FFFFFF;
		border-radius: 1px;
		font-size: 16px;
	}
	#mdp p
	{
		text-align:center;
	}
	

	/* Partie abonnement - étape 1 */ 
	
	.visuel
	{
		display:none;
	}
	
	#bloc_offres
	{
		width: 100%;
		height: 370px;
		text-align: center;
		position:relative;
		-moz-box-shadow:none;
		-webkit-box-shadow:none;
		box-shadow:none;
		margin-bottom:12px;
		border:1px solid #ccc;
	}	
	.bloc_offre_acc, .bloc_offre
	{
		width:100%;
	}	
	
	.offre h1
	{
		font-size:16px;
	}
	
	.formule
	{
		width:50%;
		font-size:11px;
	}	
	.formule h2
	{
		font-size:14px;
	}
	.formule li
	{
		font-size:11px;
	}
	
	.bloc_offre .bouton
	{
		width:100%;
		position:absolute;
		bottom:40px;
	}
	
	.plus
	{
		display:none;
	}
	
	.prix
	{
		font-size:12px;
	}
	
	.radio
	{
		font-size:11px;
	}
	
	.retour
	{
		position:absolute;
		text-align:center;
		bottom:10px;
		font-size:11px;
	}
	
	.select
	{
		bottom:-30px;
	}
		
	#col_droite
	{
		display:none;	
	}
	
	#profils
	{
		width: 100%;
		background-color:#ffffff;
		overflow:visible;
		margin:0;
		padding:0;
		text-align:center;
	}	
	#profils div.profil, #profils div#promos
	{
		width:95%;
		height:30px;
		margin:2px 0;
		font-size: 14px;
		text-align:left;
		clear:both;
		color:#ffffff;
		background-color:#b1c81e;
		float:none;
		text-align:center;
	}
	#profils div.profil:hover, #profils div#promos:hover
	{
		color:#4c9fd3;
	}
	#profils div#promos ul
	{
		display:inline;
	}	
	#profils div#promos li
	{
		display:inline;
	}
		
	#raisons
	{
		display:none;
	}
	
	#test, #inscription
	{
		width:100%;
		height:auto;
		margin:2px 0 ;
		clear:both;
		border:1px solid #ccc;
	
	}
	#test h3, #inscription h3
	{
		font-size:14px;
		margin:4px 6px;	
	}
	#test p, #inscription p
	{
		font-size:12px;
	}
	#test input[type=submit], #inscription input[type=submit]
	{
		display:block;
		margin: 4px auto;
	}
	
	#code
	{
		display:none;
	}
	
	/* Etape 2 */ 
	
	#bloc_abo #recap_abo li
	{
		line-height: 1.5em;
		list-style-type:disc;
		margin-left:12px;
	}
	
	#bloc_abo #recap_abo table.produit, #bloc_abo #recap_abo table.produit_total
	{
		width:100%;
		font-size:10px;
	}	
	#bloc_abo #recap_abo #info_frac
	{
		width:95%;
		font-size:10px;
		margin:12px 0; 
	}
	#bloc_abo #recap_abo #info_frac ul
	{
		margin:0;
	}
	#bloc_abo #recap_abo #info_frac li
	{
		list-style-type: disc;
		list-style-position:inside;
		padding-left: 5px;
		margin-left:3px;
	}
	
	#bloc_abo #saisie_coords .saisie_coords
	{
		margin-left:4px;
		width:100%;
	}
	#bloc_abo #saisie_coords .saisie_coords label
	{
		/*width: 100px;*/
		display:block;
		text-align:left;
	}
	#bloc_abo #saisie_coords .saisie_coords input
	{
		font-size:14px;
	}
	#bloc_abo #saisie_coords .saisie_coords input, #bloc_abo #saisie_coords .saisie_coords select
	{
		border: 1px solid #CCCCCC;
		margin: 2px 0 8px 0;
		width: 90%;
	}
	
	/* Etape 3 */
	#bloc_abo #recap_coords .recap_coords
	{
		margin-left:4px;
		width:100%;
	}
	#bloc_abo #recap_coords .recap_coords label
	{
		width: 100px;
		display:inline-block;
		text-align:left;
	}
	
	#bloc_abo .bloc_paiement
	{
		padding: 16px 0;
	}
	#bloc_abo .bloc_paiement input[type=radio]
	{
		margin:6px 0;
	}
	#bloc_abo .bloc_paiement a
	{
		margin: 8px 0;
		display:block;
	}
	#bloc_abo .bloc_paiement a.valide
	{
		padding: 12px 18px;
		width:auto;
		display:inline;
	}	
	#bloc_abo .bloc_paiement input.valide
	{
		padding: 12px 16px;
		width:auto;
	}
	#bloc_abo .bloc_paiement img
	{
		display:none;
	}
	
	/* Gestion de l'abonnement - compte utilisateur */
	
	#gestion
	{
		width: auto;
		overflow:auto;
	}
	#gestion #gauche a.bouton_grand
	{
		font-size:12px;
		width:80%;
		display:block;
		margin:0 auto;
		float:none;
		text-align:center;
		border-radius:0;	
	}	
	#gestion h3 
	{
		margin-left:0;
	}
	#gestion table 
	{
		margin-left:0;
	}
	#gestion #gauche
	{
		margin-left:0;
		width:99%;
	}	
	#gestion .client_abo_blocs_dg
	{
		width:99%;
		margin-left:0;
	}
	#gestion .client_abo_bloc_g
	{
		width:50%;
	}	
	#gestion .client_abo_bloc_d
	{	
		width:50%;
	}
	#gestion .client_abo_2blocs, #gestion .client_abo_3blocs
	{
		width: 99%;
		margin-left:0;
	}
	#gestion #client_abo_menu_d
	{	
		display:none;
	}
	
	#gestion .saisie_coords
	{
		width: auto;
		margin-left:0;
	}
	#gestion .saisie_coords label
	{
		display:block;
		text-align:left;
	}	
	#gestion .saisie_coords input
	{
		width:90%;
		margin: 2px 0 8px 0;
	}
	
	#gestion .client_abo_2blocs table td
	{
		font-size:11px;
		width:33%;
	}
	#gestion .client_abo_2blocs table#factures td.libelle
	{
		font-size:11px;
	}
	
	#gestion .client_abo_2blocs table input[type=submit], #gestion .client_abo_2blocs table a.gestion_valide
	{
		font-size:11px;
		width:auto;
		display:block;
	}
	
	#gestion .client_abo_2blocs #select_alertes
	{
		padding:4px;
		border:0;
		margin:0;
		font-size:11px;
		margin:8px 16px;
	}
	
	#gestion .client_abo_2blocs #texte_alertes
	{
		padding:4px;
		border:0;
		font-size:10px;
		margin:8px 16px;
	}
	
	/* Ajout de produits */ 
	
	#gestion table.produit
	{
		width:100%;
		table-layout:fixed;
	}
	#gestion table.produit td
	{
		word-wrap:break-word;
		padding:1px;
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		-ms-hyphens: auto;
		-o-hyphens: auto;
		hyphens: auto;
		text-align:center;
	}
	#gestion table.produit td input.gestion_valide, #gestion table.produit td a.gestion_valide
	{
		width:60px;
		padding:4px;		
		display:inline-block;
	}
	#gestion table.produit td a.gestion_valide
	{
		margin-bottom:4px;
	}
	
	#gestion table.produit_total
	{
		width:50%;
	}
	
	/* factures */

	#facture_cont
	{
		width:auto;
		padding:4px;
		float: left;
	}
	#facture_cont table
	{
		font-size:9px;
		width:100%;
		table-layout:fixed;
	}
	#facture_cont td
	{
		max-width:50px;
		word-wrap:break-word;
		padding:1px;
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		-ms-hyphens: auto;
		-o-hyphens: auto;
		hyphens: auto;
	}
	#facture_cont table.produit
	{
		width:100%;
		margin-top: 1em;
		border: 1px solid #999999;			
	}
	#facture_cont table.produit_total
	{
		width:50%;
	}

}