.partie_a { font-size: 0.55rem; background-color: rgba(255,255,255,0.6); text-align: left; box-shadow: 2px 3px 4px rgba(0,0,0,0.3); z-index: 5; width: 80%; margin: 0 auto 30px auto;
              padding: 20px 0 15px 5px; } /*BOITE partie informations personnelles*/
              #part_right, #part_left { display: inline-block; width: 49%; vertical-align: middle;} /*Partie personnelle droite et gauche*/
			  .partie { position: relative;} /*Bloc de chaque partie*/
              .panel { font-size: 13px; background-color: rgba(255,255,255,0.6); text-align: left; z-index: 5; width: 100%; margin: 0 0 30px 0; padding: 20px 0 15px 5px;} /*panneau contenant les boutons de chaques parties*/
              .label h2{ background-color: #00a8ff; padding: 5px 10px; border-bottom: solid 1px #fff; color: #fff; display: block; margin: 0;  font-family: 'Open Sans',sans-serif; } /*Titre de chaques parties*/
              h2 i { position: absolute; right: 10px; margin: 2px 0 0 0;} /*reglage de font awesome pour mettre les fleches au fond à droite*/

              /* conteneur radio et bouton */
              .ligne_1 { font-size: 30px; color: #B1B1B1; font-weight: bold; font-family: 'Open Sans',sans-serif;  height: auto;} /*Ligne des selections avec des radiobutton*/
              .ligne_2 { height: auto;  font-family: 'Open Sans',sans-serif;} /*hauteur de la ligne couleur*/
			
			  /* BOUTON LIGNE2 */
              .bouton {cursor:pointer; background-color: #afd89b; display: inline-block; border-radius: 20px; position: relative; transition : width 0.5s linear, height 0.5s linear, color 0.5s linear, background-color 0.5s linear, font-size 0.5s linear; color: #85ba6b; background-image: url(../images/sprite_devis_clot.png); background-repeat: no-repeat;vertical-align: middle;}  /*Base bouton */ 
              .bouton:hover { background-color: #a8d791;box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25) inset; } /*Base bouton au survol */
              .bouton_panneau { width: 9rem; height: 9rem; margin: 1rem; background-position: -161px -2px; } /*particularité bouton panneau*/
              .bouton_poteau { width: 9rem; height: 9rem; margin: 0.5rem; background-position: -320px -161px; } /*particularité bouton poteau*/ 
              .bouton_souba { width: 9rem; height: 9rem; margin: 1rem; background-position: -161px -320px; } /*particularité bouton soubassements*/ 
              .bouton_kits { width: 9rem; height: 9rem; margin: 0.5rem; background-position: -161px -161px; } /*particularité bouton kits occultants*/ 
              .bouton_couleur { width: 9rem; height: 9rem; margin: 0.5rem; } /*particularité bouton couleur*/ 
			  .bouton_pose { width: 9rem; height: 9rem; margin: 1rem;} /*particularité bouton pose*/
              .legend_bouton { position: absolute; top: 2.8rem; font-size: 14px; font-weight: bold; left: 0.5rem; } /*Legend bouton couleur et taille poteau*/

              .bouton_div { display: inline-block;background-color: #00a8ff; padding: 3px 20px; color: #fff; font-weight: bold; text-align: center; font-size: 17px; transition : width 0.5s linear, height 0.5s linear, height 0.5s linear, color 0.5s linear, background-color 0.5s linear, font-size 0.5s linear;} /*Bouton "ok" envoi quantité*/
              .bouton_div:active {box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.25) inset;}/*Bouton "ok" envoi quantité A l'appui*/

              .texte_pan { position: absolute; font-size: 29px; font-weight: bold; top: 1.3rem; left: 0.8rem; line-height: 29px;transition :  width 0.5s linear, height 0.5s linear, color 0.5s linear, background-color 0.5s linear, font-size 0.5s linear;} /*texte interne des boutons*/

              /* BOUTON COULEUR */ 
              .noir { background-color: #222; color: #666; background-image: none!important; }
              .noir:hover { background-color: #000;}
              .gris { background-color: #bbb; color: #555; font-size: 15px; background-image: none!important; }
              .gris:hover { background-color: #989898;}

              /* BOUTON CLIC ET DISABLED*/ 
                .bout_clic_pan { background-color: #afd89b; color: #85ba6b; width: 9rem; height: 9rem; } /* CLICK gros bouton [panneau et soubassement] */
                .bout_disa_pan { background-color: #c8c8c8; color: #aba9a9; width: 8rem; height: 8rem; } /* DESACTIVER gros bouton [panneau et soubassement] */ 

                /*Bouton fond disabled*/
                #panel_panneau .bout_disa_pan { background-image: url(../images/sprite_devis_clot.png); background-repeat: no-repeat; background-position: -2px -2px;}
                #panel_poteau .bout_disa_pot { background-image: url(../images/sprite_devis_clot.png); background-repeat: no-repeat; background-position: -320px -2px;  }
                #panel_souba .bout_disa_pan { background-image: url(../images/sprite_devis_clot.png); background-repeat: no-repeat; background-position: -2px -320px;  }
                #panel_kits .bout_disa_pot { background-image: url(../images/sprite_devis_clot.png); background-repeat: no-repeat; background-position: -2px -161px;  }
				
				#bouton_sceller.bouton_sceller{ background-image: url(../images/cloture-gabion/sceller.png); background-repeat: no-repeat; background-position: 50%;  background-color: #afd89b; color: #655; width: 9rem; height: 9rem; }
				#bouton_platine.bouton_platine{ background-image: url(../images/cloture-gabion/platine.png); background-repeat: no-repeat; background-position: 50%;  background-color: #afd89b; color: #655; width: 9rem; height: 9rem; }
				#bouton_sceller.bouton_sceller_off{ background-image: url(../images/cloture-gabion/sceller_off.png); background-repeat: no-repeat; background-position: 50%;  background-color: #c8c8c8; color: #aba9a9; width: 8rem; height: 8rem; }
				#bouton_platine.bouton_platine_off{ background-image: url(../images/cloture-gabion/platine_off.png); background-repeat: no-repeat; background-position: 50%;  background-color: #c8c8c8; color: #aba9a9; width: 8rem; height: 8rem; }
				#bouton_sceller.bouton_sceller_off:hover, #bouton_platine.bouton_platine_off:hover{background-color:#afd89b;}
				
				
                .bout_clic_pot { background-color: #afd89b; color: #85ba6b; width: 9rem; height: 9rem;} /* CLICK moyen bouton [poteau et kits] */
				.text_pot_clic{font-size:32px;color:#464;}
                .bout_disa_pot { background-color: #c8c8c8; color: #aba9a9; width: 8rem; height: 8rem; } /* DESACTIVER moyen bouton [poteau et kits] */
				.text_pot_disa{font-size:24px;}

                .bout_clic_col { width: 9rem; height: 9rem; } /* CLICK petit bouton [coloris] */
                .text_col_clic{font-size:32px;}
				.bout_disa_col { width: 8rem; height: 8rem; } /* DESACTIVER petit bouton [coloris] */
				.text_col_disa{font-size:24px;}

                .noir.bout_clic_col { background-color: #111; color: #666; transition:0.5s; }  /*couleur au clic */
                .gris.bout_clic_col { background-color: #bbb; color: #555; transition:0.5s; } /*couleur au clic */
				.noir.bout_disa_col { background-color: #333; color: #666; transition:0.5s; }
                .gris.bout_disa_col { background-color: #888; color: #555; transition:0.5s; }
				.noir.bout_clic_col:hover { background-color: #000; transition:0.5s; }
                .gris.bout_clic_col:hover { background-color: #999; transition:0.5s; }
				.noir.bout_disa_col:hover { background-color: #000; transition:0.5s; }
                .gris.bout_disa_col:hover { background-color: #999; transition:0.5s; } 
				
				.champ_petit{width: 9rem;}


              /* BOUTON RADIO GAMME ET SECTION*/
              .gamme_selec { display: inline-block; width: 60%; }  /* Contenant des deux boutons radio*/
              #titre_gamme, #titre_section {display: inline-block; width: 39%;  } /*Section ou Gamme  */
              .gamme_selec label { width: 49%; display: inline-block;} /*Label (DC60, DC90, 4mm, 5mm, ect)*/
              .gamme_selec .petit_texte { font-size: 17px; line-height: 15px; width: 50%; display: inline-block; color: #B1B1B1;} /*Texte plus petits des labels*/
              

              /* QUANTITE */
              .fond_noir { background-color: rgba(0, 0, 0, 0.25); position: absolute; width: 100%; top: 0; height: 100%; left: 0; display: none; } /*fond semi transparent pour la quantité*/ 
              .boite_qty { background-color: white; width: 50%; position: absolute; top: 35%; margin: 0 auto; left: 25%; padding: 20px 35px; border-radius: 5px; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25); font-size: 17px; font-weight: bold; color: #6c6c6c; text-align: center; font-family: 'Open Sans',sans-serif;} /*Boite blanche des quantité*/
              .boite_qty input, .ligne_2 input{text-align:right;font-size: 17px; font-weight: bold; color: rgb(108, 108, 108); border: 1px solid rgb(212, 212, 212); padding: 10px 10px;} /*Input impacté et présent dans la boite des qty*/
              .boite_qty input:focus, .ligne_2 input:focus { box-shadow: 0 0 3px rgba(99, 214, 252, 0.7) ;} /*Input impacté et présent dans la boite des qty QUAND ON CLIQUE DEDANS*/
              .boite_qty input:invalid, .ligne_2 input:invalid  { box-shadow: 0 0 3px rgba(225, 0, 0, 0.7) ;}/*Input impacté et présent dans la boite des qty SI FAUX */


              /* DIVERS */ 
              #choix_couleur { text-align: center;} /*Texte centré dans la boite des choix couleurs*/
              .complement_info {width: 19rem; margin: 0.5rem; height: 9rem; display: block; position: relative; font-size: 17px; font-weight: bold; color: #B1B1B1; float: right; margin-top: 1rem;} /*Petite apparté dans les boites en mode float*/
              #panel_poteau .complement_info {width: 34.8rem; margin: 0.5rem; height: 6rem; display: block; position: relative; font-size: 17px; font-weight: 500; color: #B1B1B1; margin-top: -150px; float: right; margin-top: 1rem;} /*Ciomplément d'informations relatif aux poteaux*/
              #devis_cache { display: none ;} /*DEVIS CACHE*/

              /* RECAPITULATIF */
              .ligne_fonce { font-size: 16px; font-weight: bold; color: #8D8D8D; font-family: 'Open Sans',sans-serif;} /*ligne de légende*/
              .ligne_reca { font-size: 16px; font-weight: bold; color: #B1B1B1;} /*Ligne de recapitulatif*/
              .col_prod { display:inline-block; width: 68%; padding-left: 2%; font-family: 'Open Sans',sans-serif;} /*Nom du produit*/
              .colo_chgt, .colo_anc { display:inline-block; width: 14.2%; text-align: center; position: relative;} /*Quantité du produit*/
              #sort_pan, #sort_pot, #sort_souba, #sort_kits { display: none;} /*qty produit changé*/
              .colo_chgt input { width: 50%; } /*Input influent*/
              .col_prod, .anc_pan, .sort_pan { vertical-align: top; } /*Alignement pour faire une ligne propre*/

              /* PROTIPS */
              .protip { width: 90%; background-color: #f0dda5; color: #b4ab6b; border-radius: 5px; margin: 15px auto; padding: 6px 15px; display: none;font-size: 17px;} /*Boite du conseil du pro*/
              .protip_titre { font-weight: bold; color: #db7d7d; font-family: 'Open Sans',sans-serif; } /*"Le conseil du pro"*/

              /* MESSAGE ERREUR */
			  .erreur{border: solid 1px #f00}
			  .msg_erreur{background-color: #e39393;color:#600;border:solid 1px #600;border-radius: 5px;padding:8px;font-size:15px;}
              #error_pan, #error_pot, #error_souba, #error_kits { background-color: #F59696; color: #AA3030; border-radius: 5px; margin: 10px auto; width: 90%; padding: 5px 15px; display: none; font-size: 13px; font-weight: normal; } /*Notification d'erreur*/
              #message_avertissement_javascript { background-color: #F59696; color: #AA3030; border-radius: 5px; margin: 10px auto; width: 90%; padding: 5px 15px;position: relative; font-size: 15px; font-weight: normal; }/*Si javascript n'est pas activé */
              #fond_js { /*background-color: rgba(0, 0, 0, 0.25);*/ position: fixed; width: 100%; top: 0; height: 100%; left: 0; z-index: 999; } /*Empeche de cliquer ou que ce soit*/
              
              /* FORMULAIRE VERIFICATION */
              .box_input { position: relative;} /*Boite entourant l'input à vérifier*/
              .abso, .abso_g { font-size: 17px; position: absolute; top: 3px; right: 50px;} /*signal de vérification , une mouette pour le "bon"  et une croix pour le "mauvais"*/ 
              .abso { color: #e35b5b;} /*Mauvais*/
              .abso_g { color: #70bf74; } /*Bon*/

              #box_condition, #box_conditionb { background-color: transparent; padding: 0; border-radius: 0;color: #000;} /*message d'erreur pour les checkbox*/
              #comm_erreur { display: inline-block; background-color: #cecece; color: #7b7b7b; padding: 2px 5px; border-radius: 3px; margin: 0 0 0 50px;} /*message d'erreur pour l'espace commentaire*/
				
				#panel_longueur .complement_info{top:-2em;}

              /* CLASS DES DISPLAYS (JS)*/ 
                .dis_block { display: block !important; }
                .dis_none { display: none !important;}
                .dis_inblock { display: inline-block !important; }

                @media screen and (max-width: 1000px) { 
                  .bouton_panneau, .bouton_souba, .bouton_kits { width : 16.3%; margin: 1%; height: 0px; padding-top: 16.3%; overflow: hidden; }
                  .bouton_poteau  { width : 14.3%; margin: 0.7%; height: 0px; padding-top: 14.3%; overflow: hidden; }

                .bout_clic_pan { width : 16.3%; padding-top: 16.3%; } /* CLICK gros bouton [panneau et soubassement] */
                .bout_disa_pan { width : 14.3%; padding-top: 14.3%; } /* DESACTIVER gros bouton [panneau et soubassement] */ 

                .bout_clic_pot { width : 15.3%; padding-top: 15.3%; } /* CLICK moyen bouton [poteau et kits] */
                .bout_disa_pot { width : 13.3%; padding-top: 13.3%; } /* DESACTIVER moyen bouton [poteau et kits] */

                .class_saisie { width: 90%; font-size: 0.8rem; }
                }

                @media screen and (max-width: 760px) { 
                #part_right, #part_left { width: 100%; font-size: 0.7rem; }
                .class_saisie { width: 90%; font-size: 0.8rem; }
                .bouton_panneau, .bouton_souba, .bouton_kits, .bouton_poteau, .bouton_couleur { width : 20.3%; margin: 1%; height: 0px; padding-top: 20.3%; overflow: hidden; }

                .bout_clic_pan, .bout_clic_pot, .bout_clic_col { width : 20.3%; padding-top: 20.3%; } /* CLICK gros bouton [panneau et soubassement] */
                .bout_disa_pan, .bout_disa_pot, .bout_disa_col { width : 19.3%; padding-top: 19.3%; } /* DESACTIVER gros bouton [panneau et soubassement] */ 

                .complement_info {width: 90%; margin: 5%; height: auto; display: block; float: none;} /*Petite apparté dans les boites en mode float*/
                #titre_gamme, #titre_section { width: 150px; }
                .gamme_selec { width: calc(100% - 150px); }
                
                #panel_poteau .complement_info { width: 90%; margin: 0 auto; height: auto; float: none;}
                .col_prod { width: 58%; }
                .colo_chgt, .colo_anc { width: 19.2%; }
                }

                @media screen and (max-width: 590px) { 
                  .bouton_panneau, .bouton_souba, .bouton_kits, .bouton_poteau, .bouton_couleur { width : 26.3%; margin: 2%; height: 0px; padding-top: 26.3%; overflow: hidden; }

                .bout_clic_pan, .bout_clic_pot, .bout_clic_col { width : 26.3%; padding-top: 26.3%; } /* CLICK gros bouton [panneau et soubassement] */
                .bout_disa_pan, .bout_disa_pot, .bout_disa_col { width : 25.3%; padding-top: 25.3%; } /* DESACTIVER gros bouton [panneau et soubassement] */
                #titre_gamme, #titre_section { width: 100%; }
                .gamme_selec { width: 100%; }
                .gamme_selec label{ width: 100%; }

                .col_prod { width: 100%; }
                .colo_chgt, .colo_anc { width: 49%; }
                .boite_qty { width: 90%; left: 5%; padding: 20px 0px;}
				#panel_longueur .complement_info{top:0em;}
                }

                @media screen and (max-width: 370px) { 
                  .bouton_panneau, .bouton_souba, .bouton_kits, .bouton_poteau { width : 42.3%; margin: 2%; height: 0px; padding-top: 32.3%; overflow: hidden; }
					#panel_longueur .complement_info{top:0em;}
                }



.close_box { display: block; position: absolute; top: 10px; right: 15px; color: rgba(0, 0, 0, 0.47); transition: 0.3s; font-size: 22px; cursor:pointer; }
.close_box:active, .close_box:hover { color: rgba(0, 0, 0, 0.23); }