@charset "utf-8";

/* ══════════════════════════════════════════════════════════════════════
   1. VARIABLES CSS & STYLES GLOBAUX
   ══════════════════════════════════════════════════════════════════════ */

:root {
         /* Orange foncé (Ligne séparation) */
    --text-on-orange: #ffffff;   /* Texte blanc sur fond orange */
    --step-line-bg: rgba(255, 255, 255, 0.4); /* Ligne entre les étapes (blanc transparent) */
	--focus-shadow: rgba(255, 131, 48, 0.25);
	--no-good-message-bk : #F1CFD0;
	--no-good-message-text : #9D2E2F;
	--no-good-message-border : #CB4F50;
	--allright-message-bk : #f0fdf4;
	--allright-message-text : #166534;
	--allright-message-border : #bbf7d0;
	--input-error-bg: #fff0e6;
}

body{background-color: var(--very-light-grey)}

#content_tunnel {
	margin-top: 143px;
	width:/*94%*/100%;/*min-height:710px*/
	background: var(--very-light-grey);
}


/* ══════════════════════════════════════════════════════════════════════
   2. tunnel_top.inc.php — HEADER NAVIGATION / BARRE DE PROGRESSION
   ══════════════════════════════════════════════════════════════════════ */

/* 2a. Barre de navigation */
#top_nav {
    background-color: var(--main-color);
    width: 100%;
    position: relative;
}

.tunnel-header-inner {
    position: relative;
    margin: 0 auto;
    height: 71px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 15px 0 5px;
}

/* 2b. Logo */
.tunnel_logo {
    position: absolute;
    left: 15px;
    top: 15px ;
    z-index: 10;
}

.tunnel_logo img.logo-img {
    max-height: 77px ;
    width: auto;
    display: block;
}

/* 2c. Barre de progression */
.checkout-progress-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 600px;
	padding-top:7px;
}

.step-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    z-index: 1;
}

/* Ligne entre les étapes */
.step-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 15px;
    left: 50%;
    width: 100%;
    height: 2px;
    background-color: var(--step-line-bg);
    z-index: -1;
}

.step-item.completed:not(:last-child)::after {
    background-color: var(--text-on-orange);
}

/* Bulle */
.step-badge {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--main-color);
    border: 2px solid rgba(255, 255, 255, 0.6);
    color: rgba(255, 255, 255, 0.8);
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 4px;
    font-size: 14px;
    transition: all 0.3s ease;
}

/* Texte étape */
.step-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* État : complété */
.step-item.completed .step-badge {
    background-color: var(--second-color);
    border-color: var(--second-color);
    color: #fff;
}
.step-item.completed .step-label {
    color: #fff;
}

/* État : actif */
.step-item.active .step-badge {
    background-color: #fff;
    border-color: #fff;
    color: var(--main-color);
    transform: scale(1.15);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3);
}

.step-item.active .step-label {
    color: #fff;
    font-weight: 800;
}

/* 2d. Ligne du bas */
#top_line {
    width: 100%;
    height: 20px;
    background-color: var(--second-color);
    display: block;
}

/* 2e. Responsives header nav */
@media screen and (max-width: 1280px) {
	#top_line { height:15px }
	.tunnel_logo {top:10px;left:10px}
	.tunnel_logo img.logo-img {height : 66px;}
	.step-label { font-size: 10px; }
	.step-badge {
		width: 25px;
		height: 25px;
	}
}

@media screen and (max-width: 1024px) {
	.checkout-progress-bar {max-width: 400px;}
	.step-label { font-size: 10px; }
	.step-badge {
		width: 25px;
		height: 25px;
	}
}

@media screen and (max-width: 976px) {
	#top_line {display: none;}

	.checkout-progress-bar {
		width: 100%;
		max-width: 100%;
		background-color: var(--second-color);
	}

    .tunnel-header-inner {
        flex-direction: column;
        height: auto;
        padding: 10px 0px 0px ;
    }

    .tunnel_logo {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        text-align: center;
        width: 100%;
		height:69px
    }

	.tunnel_logo img.logo-img {margin: 0 auto;}

	.checkout-progress-bar { padding:15px 0 3px 0;}

	.step-badge {
    	background-color: var(--second-color);
	}

	.step-item.completed .step-badge {
		background-color: var(--main-color);
		border-color: var(--main-color);
	}

    .step-item:not(:last-child)::after {
       top: 13px;
    }
}

@media only screen and (max-width:615px) {
	#head {height:60px}
}


/* ══════════════════════════════════════════════════════════════════════
   3. ÉLÉMENTS COMMUNS DU TUNNEL
   ══════════════════════════════════════════════════════════════════════ */

/* 3a. En-tête de page (header custo, utilisé dans pan.gab.php) */
.header-inner, .header-inner_idt {
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    width: 95%;
    max-width: 950px;
    margin: 0 auto;
    position: relative;
    padding-top: 5px;
}
.header-inner_idt { max-width: 1100px }

/* Spacer gauche = largeur du bouton → centrage symétrique du titre */
.header-inner::before {
    content: '';
    flex: 0 0 32px;
    height: 1px;
}

.header-flex-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    text-align: center;
    flex: 1;
    min-width: 0;
    order: 1;
	padding-top:10px;
}

.header-left-col {
    flex: 0 0 auto;
}

.header-main-image {
    display: block;
    max-width: 100px;
    height: auto;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}

.en_gris { filter: grayscale(100%); }

/* Image header masquée — titre centré seul */
.header-left-col { display: none; }

.header-right-col {
    flex: unset;
    text-align: center;
}

/* Bouton retour/déco — dans le flux flex, ne peut jamais chevaucher le titre */
.header-inner #retour_btn_descro, .header-inner #btn_deconnexion {
    flex: 0 0 32px;
    order: 2;
    position: relative;
    right: auto;
    transform: none;
    /* pas de margin-top : alignement naturel via align-items:flex-start sur .header-inner,
       la valeur calculée (20px) décalait le bouton par rapport au titre en pratique. */
}
.header-inner #retour_btn_descro:hover, .header-inner #btn_deconnexion:hover {
    transform: translateX(-2px);
}

.logo-title-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.tunnel_titre {
    font-size: 2.2em;
    font-weight: 600;
    margin: 0 0 15px 0;
    text-align: center;
	font-family: 'josefin',  Verdana, Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS","sans-serif"
}

.tunnel_sous_title {
    color: var(--text-color-grey);
    font-size: 0.85em;
    line-height: 1.5;
    margin: 0;
    max-width: none;
    text-align: center;
}

.ajust_sous_title {margin-top:1em;text-align: center}

/* 3b. Header pleine largeur */
.auth-header-full {
	width: 100%;
	background-color: #fff;
	border-bottom: 1px solid #e0e0e0;
	padding: 17px 0 35px 0  ;
	margin-bottom: 30px;
	text-align: center;
}

.header_ajust_pan {padding-bottom: 17px;}

/* 3c. Conteneur principal */
.cnt_def_modern {
	width: 95%;
	max-width: 1100px;
	margin: 0 auto;
	color: var(--text-color);
	padding-bottom: 60px;
}

/* 3d. Cartes auth (Nouveau client / Déjà client) */
.auth-container {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	justify-content: center;
}

.auth-card  {
    background: var(--main-bk-color);
    border-top: 8px solid var(--main-color);
	 border-bottom: 8px solid var(--main-color);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    flex: 1;
    min-width: 300px;
    display: flex;
    flex-direction: column;
}

/* 3e. Éléments de formulaire communs */
.title_box {
	font-size: 1.4em;
	margin-bottom: 20px;
	border-bottom: 1px solid #ddd;
	padding-bottom: 10px;
	color: var(--text-color);
	font-weight: 600;
}

.form-group { margin-bottom: 20px; }

.label_cnx {
	display: block;
	margin-bottom: 4px;
	font-weight: 600;
	font-size: 1em;
	color: #333;
	padding-left:15px;
	text-align: left
}

.title_cnx {font-size:1.6em; line-height: 1.5; font-family:'josefin', Verdana, "sans-serif"; padding:0.5em 1em; color: var(--main-color); background: var(--very-light-grey); border-radius: var(--border-radius)}

.input-wrapper { position: relative; }

.input_cnx {
	width: 100%;
	padding: 12px 15px;
	border: 1px solid #ccc;
	border-radius: var(--border-radius);
	font-size: 1em;
	color: var(--text-color);
	box-sizing: border-box;
	transition: all 0.3s ease;
	background-color: #fff;
}

.input_cnx:focus, #client_form input:focus, #client_form select:focus, #crl_form input:focus {
	border-color: var(--main-color);
	outline: none;
	box-shadow: 0 0 0 3px var(--focus-shadow);
}

/* 3f. Icône œil (mot de passe) */
.eye-icon, .eye-icon2  {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	color: #999;
	display: flex;
	transition: color 0.2s;
	padding: 5px;
}
.eye-icon:hover, .eye-icon2:hover { color: var(--main-color); }

.eye-icon2  { position:relative; right:50px; top:23px; width: 22px}

#pwd-status-icon, #pwd-status-icon2 {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-weight: bold;
        font-size: 18px;
        display: none;
}
#pwd-status-icon2 svg, #feedback-message { stroke: rgb(40, 167, 69,0.70);}

#pwd-status-icon2 {position: inherit; float:left; margin-top:-6px;width:22px;}

#feedback-message { margin:0 auto; display:block; max-width: 300px; text-align: left; font-size:0.8em; clear:both; font-style:italic}
#feedback-message.lay2 {max-width: 100%; text-align: center; }
#pwd-status-icon2.lay2 {display: none}

#creer_cmpt_cnt #feedback-message { display: block; text-align: center; margin: 5px auto ; clear: both; max-width: 100%; }

/* 3g. Bouton primaire commun */
.btn-primary {
	display: inline-block;
	width: 100%;
	padding: 14px;
	background-color: var(--main-color);
	color: #fff;
	border: none;
	border-radius: 5px;
	font-size: 1.1em;
	font-weight: bold;
	cursor: pointer;
	transition: background 0.2s, transform 0.1s;
	text-align: center;
}
.btn-primary:hover { background-color: var(--second-color); }
.btn-primary:active { transform: scale(0.98); }

/* 3h. Messages formulaire */
#mess_cnx div, #mess_form, .mess_form_1 {
	background: var(--allright-message-bk) ;
	border-top:1px solid var(--allright-message-border); border-bottom:1px solid var(--allright-message-border);
	color:var(--allright-message-text); padding:15px; margin-bottom:20px; text-align:center; }

#mess_cnx div.nogood { background: var(--no-good-message-bk) ;
	border-top:1px solid var(--no-good-message-border);border-bottom:1px solid var(--no-good-message-border);
	color: var(--no-good-message-text)
}

#mess_form, .mess_form_1 {
	font-size:0.9em;
	display:none;
}
#mess_form.nogood {
	background: var(--no-good-message-bk);
	border-top-color: var(--no-good-message-border);
	border-bottom-color: var(--no-good-message-border);
	color: var(--no-good-message-text);
}

.mess_form_min {clear:both;text-align:left;color:var(--link-color2);font-size:10px;line-height:11px;padding-top:12px}

/* 3i. Logos paiement */
.payment-logos {
    text-align: center;
    opacity: 0.7;
	clear:both;
	width: 50%;
	float: right;
}

.secure-label {
    display: block;
    font-size: 0.8em;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.payment-logos img {
    height: 24px;
    margin: 0 ;
    vertical-align: middle;
}

.privacy-text {
    font-size: 0.75em;
    color: #999;
    margin-top: auto;
    padding-top: 20px;
    line-height: 1.3;
}

.lock-icon {
    width: 14px;
    height: 14px;
    margin-right: 5px;
    position: relative;
    top: 2px;
    fill: currentColor;
}

/* 3j. Utilitaires */
.message-area { margin-top: 20px; text-align: center; }

.newsletter_field {background-color: /*var(--very-light-grey);*/ border-radius: 15px}
.newsletter_field legend {margin:0 auto; display: block; text-align:center}

/* Login par code — centrage bloc connexion seul */
.hide-new-client {
    display: none !important;
}

.auth-container.focus-mode {
    justify-content: center;
}

.auth-container.focus-mode .auth-card {
    max-width: 500px;
    flex: 0 0 500px;
    transition: all 0.3s ease;
}

/* 3k. Liens de navigation entre vues connexion */
.cnx-nav-sep {
    margin-top: 20px;
    border-top: 1px solid #eee;
    padding-top: 15px;
    text-align: center;
}
.cnx-nav-back { margin-bottom: 12px; }

.cnx-nav-sep a, .cnx-nav-back a {
    font-size: 0.85em;
    color: var(--link-color);
    text-decoration: none;
}
.cnx-nav-sep a:hover, .cnx-nav-back a:hover { color: var(--main-color); }

#btn_back_to_password, #btn_back_from_creation { color: var(--link-color); }

/* 3k2. Éléments form connexion — styles inline refactorisés */
#cnx_form label[for="rmbr"] { cursor: pointer; }
#oubli_sub { font-size: 11px; display: block; text-align: right; color: #999; margin-top: 4px; }
.cnx-switch-wrap { margin-top: 20px; border-top: 1px solid #eee; padding-top: 15px; }
#btn_switch_to_code { background: none; border: none; color: var(--main-color); font-weight: 600; cursor: pointer; }
#creer_cmpt_btn { border-top: 1px solid #eee; padding: 20px; border-bottom: 1px solid #eee; }
#creer_cmpt_form hr.sep { margin: 0.5em; }
.cnx-step-intro { font-size: 0.9em; color: #666; margin-bottom: 15px; }
#otp_code { letter-spacing: 5px; font-size: 1.2em; text-align: center; }
.cnx-resend-wrap { margin-top: 10px; text-align: center; }
#btn_resend_code { font-size: 0.85em; color: var(--link-color); text-decoration: none; }
#btn_resend_code:hover { color: var(--main-color); }

/* 3l. Responsives communs */
@media (max-width:976px){
	.auth-header-full {
		padding: 0 0 15px  0
	}
	.header_ajust_pan {padding-bottom: 15px;}

	.header-inner::before { flex: 0 0 28px; }
	.header-inner #retour_btn_descro, .header-inner #btn_deconnexion { flex: 0 0 28px; }

	.title_cnx { font-size:18px; line-height: 1.4; padding:0.2em 0.5em; }
	#creer_cmpt_form { padding:10px!important}
	#feedback-message { max-width: 100%; text-align: center; padding:5px 0 0 0; font-size: 11px; }
	 
	#feedback-message.lay2 { text-align: center; }
	#pwd-status-icon2 {
		float:none;
        position: absolute;
        right: -18px;
        top: 49px;
        transform: none;
	}
	#pwd-status-icon2.lay2 {display: none}
	.input_with_eye {position:relative }
	.eye-icon2  {
		position:absolute;
	 	right:5px;
		top:52%;transform: none;
	}
}

@media (max-width: 768px) {
    .tunnel_titre {
        font-size: 1.5em;
       
    }

    .tunnel_sous_title {
		font-size: 11px;
	}
	.ajust_sous_title { text-align: center}

  	.auth-container { flex-direction: column; }
	.auth-card { width: 100%; box-sizing: border-box; }
    .logo-title-wrapper {
        flex-direction: column;
        gap: 10px;
    }
    .auth-container.focus-mode .auth-card {
        max-width: 100%;
        flex: 1;
    }
}


/* ══════════════════════════════════════════════════════════════════════
   4. pan.gab.php — PANIER
   ══════════════════════════════════════════════════════════════════════ */

/* 4a. Conteneur principal */
.cnt_pan {max-width:980px;width:95%; margin:0 auto ; }

.content_class {background: var(--very-light-grey);}
.marge_sup_pan {margin:33px 0 30px 0}

/* 4b. Boutons commander */
#pan_sub,#pan_sub_top {width:50%; float:right; margin-bottom:20px}
#pan_sub_top {display:none; margin-bottom: 0!important}

#pan_btns {width:auto;margin-right:0;float:right}
#pan_btns span {margin: 0}

/* 4c. Tableau panier */
#pan_cnt {
    background: var(--main-bk-color);
    border-top: 8px solid var(--main-color);
	border-bottom: 8px solid var(--main-color);
    border-radius: 20px;
    padding: 20px 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    width:100%;
}

#pan_tab {width:100%;margin:30px auto 40px auto;font-size:1em; background-color:transparent}
#pan_ttls {height:40px;background-color:#efefef;border-bottom:1px solid #ccc}
#pan_ttls td {height:70px;text-align:center;padding:0 10px;vertical-align:middle;border-left:1px solid #ccc}
#pan_tab tbody {border-top:1px solid #ccc;}
.pan_line {height:70px;background-color:#fff;}
.pan_line td {border-top:1px solid #ccc;}

#pan_tab a {color:#000;}
#pan_tab a:hover {text-decoration:underline}

/* 4d. Cellules du tableau */
.cel_refs {width:300px;}
.cel_ico{ min-width:150px;text-align:center;padding:10px}
.cel_ico img {width:100px; height:auto}
.pdt_eq_lk {line-height:140%}
.cel_lib {width:35%;text-align:left;padding:10px; }
.cel_lib span {font-size:0.85em}
.cel_vers{width:100px}
.cel_supp{width:16px!important; }
.plus_inp, .moins_inp {width:10px;font-size:10px;text-align:center;cursor:pointer; }
.input_quant {width:11px;text-align:center}

.cel_res{background-color:#fff; height:40px;}

.cel_res_ttl,.cel_res_ttl2,.cel_promo {background-color:#fff;text-align:right;padding:10px}
/*.cel_res_ttl2 {border-left:1px solid #ccc}****/
.cel_promo {background-color:#fff;}
.cel_tot, .cel_res_tot {text-align:right;padding-right:20px;background-color: #f4f4f4;}

/* 4e. Lignes totaux */
#line_tot td { border-top:1px solid #eee}
#line_ttc .cel_res_tot{border-top:1px solid #ddd;font-size:16px}

#add_ttls td {padding:0 30px;height:40px;background-color:#efefef;}
#add_tr td {padding:0 20px;background-color:#FFF;border-bottom:1px solid #ccc;}
.add_p_left {text-align:left;margin:20px 0;padding:10px;border:1px solid #ccc;}
.add_p_left span {font-weight:normal}
.add_p_right {text-align:right;font-size:14px;margin:20px 0;padding:10px;border:3px solid #ccc; }
#ttle_fact_td, #add_fact_td {border-left:1px solid #ccc;}

/* 4f. Encart infos panier */
#col_g_pan {width:100%}

.infos_comp_pan {
	padding:20px;
	background-color: var(--very-light-grey) ;
	border:1px solid var(--light-grey);
	text-align: center ;
	max-width:70%;
	margin:30px auto 0 auto ;
	font-weight:normal;
	font-size:0.75em;
	line-height:160%;
}

#pan_cnx_form_btn {cursor:pointer;color:var(--link-color2);font-weight:bold}
#pan_cnx_form_btn:hover {text-decoration:underline;}

#infos_pan_cnt {
	height:auto;
	padding:2em;
	vertical-align:middle;
	border-radius: 15px;
	box-shadow: 0 0px 12px rgba(0,0,0,0.05);
}

.panier_vide img {width:54px!important; height: auto }
#pan_cnx_form_cnt {margin-top:10px}
#pan_cnx_form {float:left;width:290px}
#pan_cnx_form p{margin:3px 0 }
#pan_cnx_form p a {color:var(--link-color2)}
#pan_cnx_form label {display:block;float:left;width:90px;margin-right:5px;font-size:11px}
#pan_cnx_form input {width:170px;padding:3px;}
#pan_cnx_form_sub {padding:11px;line-height:22px;float:left;height:22px;vertical-align:middle; margin:3px;border-radius:5px;border:1px solid #ffbf91; background-color:#F7f7f7;color:var(--link-color2);font-weight:bold;cursor:pointer}
#pan_cnx_form_sub:hover { background-color:var(--link-color2);color:#fff}

/* 4g. Utilitaires tableau */
.display_in_mob {display: none; font-size:0.8em}

.sep_cell {font-size:0.7em; text-align:left; width:100%;display:none;border-top: 1px solid #ccc;
  padding: 5px 10px;
  box-sizing: border-box;
}

.quant_form_cnt {width:105px;  }

.sup_ico{float:left;margin:2px 0 0 15px;cursor:pointer;display:block;width:16px;height:18px;background:transparent url(img/supp-ico_p.png) top no-repeat;}
.sup_ico:hover{background-position:bottom}

.ptit_sub {cursor:pointer;width:24px;height:24px;display:block;background:transparent url(img/petit_btn_ok.png) top no-repeat;}
.ptit_sub:hover {background-position:bottom}

/* 4h. Héritage intfc_temp — ligne TTC */
#pan_tab #line_ttc .cel_res_tot:last-child {background-color:#eee;border-bottom:1px solid #ddd; border-top:1px solid #ddd}

@media (max-width: 580px) {
	.padding_ajust_h4 {padding-top:40px!important}
	.top_ajust_pan {top:8px!important}
}

/* 4i. Responsives panier */
@media (max-width: 976px) {
	#pan_sub,#pan_sub_top {float:none; width:90%; margin:0 auto}
	#pan_sub_top {display:none!important}
	#pan_sub { margin-bottom:25px!important}
	#crl_cnt, #cnx_cnt, #creer_cmpt_cnt, #reinit_mdp_cnt, #pan_cnt{ width:95%; box-sizing:border-box; padding:1em 2%}
	#pan_cnt { margin:2em auto; padding:0}
	#pan_tab tr td {display:block; width:100%; height:auto; clear:both; text-align:center; font-size:1.2em; padding:1em 0; margin:0 auto; line-height:130%; border:none}
	#pan_tab thead {display:none}
	.payment-logos {width:95%;margin:0 auto;float: none}
	.cel_ico {padding-top:0!important}
	.cel_ico img {width:100%; max-width:240px;height:auto}
	.sep_cell {display:block}
	.display_in_mob {display:inline}
	.quant_form_cnt {  margin:0 auto }
	.cel_res_ttl2 {padding-bottom:0!important}
	.cel_res_ttl2, .cel_tot {font-weight:bold; /*text-align: center*/}
	.cel_res_tot {font-size:1.2em!important; border:none }
	#line_ttc .cel_res_tot{font-size:1.4em ;border:none ;border-radius: 0}
	.cel_tot {
		background-color: var(--very-light-grey) ;
	}
	.ptit_cell {padding:0!important}
}

@media screen and (max-width:580px) {
	#pan_sub, #pan_sub_top {width:95%;}
}


/* ══════════════════════════════════════════════════════════════════════
   5. conf2.gab.php — CONFIRMATION & PAIEMENT
   ══════════════════════════════════════════════════════════════════════ */

/* 5a. Structure */
.conf_cnt {max-width: 900px; width:100%; margin:0 auto; box-sizing: border-box; padding:20px 0 0 0;
border-top: 8px solid var(--main-color); border-radius: 20px;}
.content_pan {background: var(--very-light-grey)!important}

#conf_form {border:none;margin:0;padding:0}
#conf_form a {color:#F60}
#entete_conf_cnt {background-color:transparent}

/* 5b. Adresses livraison / facturation */
#conf_liv_cnt, #conf_fact_cnt {padding:0; text-align:left; height:auto ;
 width:40%; float:left; }

#conf_liv_cnt h2, #conf_fact_cnt h2 , #conf_liv_cnt h3, #conf_fact_cnt h3 {margin-bottom:20px; font-size:1.2em; font-family: 'josefin', Verdana, Geneva, sans-serif; font-size : 18px}
#conf_liv_cnt h2 , #conf_fact_cnt h2 {height:30px; line-height:30px;padding:15px; background-color:#ddd; font-size : 22px; color:#333;}
#conf_liv_cnt h3 span {font-weight:normal}
.conf_addr_p {font-size:1em;line-height:114%}
.conf_livraison_prevue {font-style:italic; margin-bottom:15px; font-size:0.85em}
#conf_liv_hor_cnt {margin-top:20px; width:70%;font-size:0.75em; border:1px solid #ccc; background-color:#fbfbfb; overflow:hidden}
#conf_liv_hor_toggle {padding:10px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; user-select:none;}
#conf_liv_hor_toggle:hover {background-color:#f0f0f0}
.conf_liv_hor_arrow {display:inline-block; transition:transform 0.2s; font-size:0.8em; color:#888}
.conf_liv_hor_arrow.open {transform:rotate(180deg)}
#conf_liv_hor {padding:0 10px 10px; margin-top:0; display:none}
#conf_liv_cnt a, #conf_fact_cnt a {display:block;margin-top:20px; font-size:0.8em; text-decoration:none}
#conf_liv_cnt a:hover,  #conf_fact_cnt a:hover {text-decoration:underline}

#conf_fact_cnt { text-align:right; float:right; }

/* 5c. Tableau récapitulatif */
#conf_recap_table {width:100%;background-color:#fff;text-align:left; margin-top:10px}

#conf_recap_thead td { height:40px ; padding:20px; text-align:center; background-color: var(--light-grey) ; font-family: 'josefin', Verdana, Geneva, sans-serif; font-size : 22px;}

#conf_recap_thead td:first-child {text-align:left; }
#conf_recap_thead td:last-child {max-width: 120px; width:120px; text-align:right; padding-right:20px}
#conf_recap_table td:first-child {padding:10px 20px}

#conf_recap_table img {float:left; margin:-35px 40px 5px 0; max-height: 150px; width:auto;}

.title_item_conf { padding:10px 10px 10px 190px}
.td_border {border-bottom:1px solid #eee }
.infos_item_conf { font-size: 0.9em;float:left; border-left:1px solid #f4f4f4; padding-left:10px; margin-top:10px; line-height:160%}

.cel_res_ttl_1line, .cel_res_tot_1line { text-align:right; padding-top:20px; padding-bottom:20px; padding-right:10px;background-color: #f4f4f4 ;border-top:10px solid #eee}

.td_border_top_1 {border-top:5px solid #eee!important }
.td_border_top_2 {border-top:10px solid #eee!important }

/* 5d. Titres tableau */
.titre_conf_tab {font-size:1.4em;font-family:'josefin',Verdana, Geneva, sans-serif;width:100%; line-height:3em; height:3em; background-color:#ddd;margin-bottom:1.5em}

#cgv_title,.title_table_conf, .title_table_conf2 {background-color:#eee;font-size:1.4em;font-family:'josefin',Verdana, Geneva, sans-serif; }

.title_table_conf {width:100%; line-height:3em; height:3em; background-color:#eee;margin :0.5em 0 1.5em 0}

.title_table_conf2 {border-radius:15px;padding: 15px 1em; margin: 10px auto 25px auto;}

/* 5e. Coupon */
.coupon_form_wrap {
	display: flex;
	align-items: stretch;
	border: 2.5px solid var(--main-color, #ff8330);
	border-radius: 30px;
	overflow: hidden;
	background: #fff;
	width: 100%;
	max-width: 300px;
	box-sizing: border-box;
	margin: 0px 0 10px auto;
}
.coupon_input {
	flex: 1;
	border: none;
	outline: none;
	padding: 7px 15px 8px 15px!important;
	font-size: 1em;
	background: transparent;
	min-width: 0;
}
.coupon_input::placeholder { color: #bbb; font-size: 0.9em; }
.coupon_sub_btn {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	padding: 0 1.4em;
	background: var(--main-color, #ff8330);
	color: #fff;
	font-weight: 700;
	font-size: 0.9em;
	cursor: pointer;
	white-space: nowrap;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: background 0.2s;
}
.coupon_sub_btn:hover { background: var(--second-color, #ff6600); }

.conf_coupon_input {padding:5px 5px!important; line-height:1.1em!important; font-size:1.1em!important; margin:0 5px 10px 5px!important}
#coupon_sub {margin-top:0}

/* 5f. Fidélité */
#line_fidel td {font-weight:normal}
#use_fidel_sub {
	display: inline-block;
	background: var(--main-color, #ff8330);
	color: #fff;
	font-weight: 700;
	font-size: 0.80em;
	padding: 0.45em 1.5em;
	border-radius: 8px;
	cursor: pointer;
	margin: 8px 0;
	white-space: nowrap;
	letter-spacing: 0.05em;
	transition: background 0.2s;
}
#use_fidel_sub:hover { background: var(--second-color, #ff6600); }

/* 5g. Formulaire paiement */
#paiement_form {
  width: 100%;
  max-width: 550px;
  margin: 10px auto;
  box-sizing: border-box;
  padding: 20px;
  box-shadow: 0 0 15px rgba(0,0,0,0.10);
  border-radius: 20px;
  background-color: #fff;
}

/* Logo CB */
.logo_carte {
	transition: 0.3s;
	border-radius: 20px; cursor:pointer;
	height:45px; padding:0;
	background-color:#fff
}
.logo_carte:hover, .pmt_actif {transition: 0.3s;background-color:#FFBF91!important}

.logo_pay_2col {
    width: calc(33% - 4px);
    height: 45px;
    float: left;
    margin: 2px;
	background-position: center center; background-size: 85% auto;
}

#allcb_btn { background-image: url(img/logo_allcb.webp); background-repeat: no-repeat; width: 100% ; max-width:498px; margin: 0 auto; height: 60px; background-size: 82% auto; background-position: center center; }

#applepay_btn {background-image: url(img/logo_applepay.webp); background-repeat: no-repeat;}
#googlepay_btn {background-image: url(img/logo_googlepay.webp); background-repeat: no-repeat;}
#paypal_btn {background-image: url(img/logo_paypal.webp); background-repeat: no-repeat;}

.radio_btn_carte  {display:block;position:relative;top:-17px;left:48%}

/* Boutons Alma paiement fractionné */
.alma_btn .radio_btn_carte {left: 45.5% !important;}

#alma_btns_cnt {
	display: flex;
	align-items: flex-start;
	gap: 4px;
	justify-content: center;
	margin: 0 auto 1em auto;
	clear: both;
}
#alma_logo_cnt {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 4px;
}

#alma_logo_cnt img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: 50px;
}
#alma_btns_inner {
	display: flex;
	gap: 0;
	align-items: flex-start;
}
.alma_btn_wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.alma_btn_wrap span {
	font-size: 10px !important;
	line-height:1.3;
	color: #666;
	display: block;
}
.alma_btn {
	float: none;
	display: block;
}

.alma_btn { width: 158px; height: 60px; margin: 0 4px; }

#alma_btn_2 {background: transparent url(img/alma_2.png) center center no-repeat; background-size: contain;}
#alma_btn_3 {background: transparent url(img/alma_3.png) center center no-repeat; background-size: contain;}
#alma_btn_4 {background: transparent url(img/alma_4.png) center center no-repeat; background-size: contain;}

/* 5h. CGV */
#cel_sub_cmd { width:300px; border:none; clear:both;margin:20px auto 25px auto}
#cel_cgv {padding-bottom:25px; background-color: transparent!important; border-top:1px solid #ccc; }
.cel_cgv_tr {background-color: transparent!important; background:none}

#cgv_title { max-width: 478px; cursor:pointer; padding:10px; margin:20px auto 0 auto ; text-align: center;  border:1px solid #ddd;  border-bottom:none; border-top-left-radius: 15px; border-top-right-radius: 15px;}

#cgv_lk_cnt { max-width:498px; width:100%; cursor:pointer; font-size:0.8em; padding: 20px 0 0 0; border:1px solid #ddd;  margin:0 auto 2em auto; clear:both ; border-bottom-left-radius: 15px ; border-bottom-right-radius: 15px ; background-color: #fff;}

#lu_cgv, #newsletterOui {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

#cgv_lk {color:#ff8330;cursor:pointer;font-size: 0.9em}

.cgv_label, .optin_label_2 {
	position: relative;
	padding-left: 40px;
	cursor: pointer;
	display: inline-block;
	line-height: 1.2;
	font-size: 1em;
	margin-left: 0;
	float: none;
	text-align: left;
	vertical-align: middle;
}
.cgv_label::before, .optin_label_2::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	border: 2.5px solid var(--main-color, #ff8330);
	border-radius: 8px;
	background: #fff;
	transition: background 0.2s, border-color 0.2s;
	box-sizing: border-box;
}
.cgv_label::after, .optin_label_2::after {
	content: '';
	position: absolute;
	left: 9px;
	top: 50%;
	transform: translateY(-65%) rotate(45deg);
	width: 8px;
	height: 15px;
	border-right: 3px solid #fff;
	border-bottom: 3px solid #fff;
	opacity: 0;
	transition: opacity 0.2s;
}
.sep_ch:has(#lu_cgv:checked) .cgv_label::before,
.sep_ch:has(#newsletterOui:checked) .optin_label_2::before {
	background: var(--main-color, #ff8330);
	border-color: var(--main-color, #ff8330);
}
.sep_ch:has(#lu_cgv:checked) .cgv_label::after,
.sep_ch:has(#newsletterOui:checked) .optin_label_2::after { opacity: 1; }

.sep_ch {padding:0.5em}

#cgv_cnt {width:800px; height:500px; padding:1em;text-align: left; overflow:auto}

/* 5i. Bouton valider + note sécurité */
#conf_sub {margin:10px auto}
#form_cnt_mag {margin:70px 1em 3em 1em; padding:1em}
#lu_cgv {margin:4px 0 0 10px}

.pay_cnt_note2 {font-size:0.8em;line-height:1.6em;padding:1.5em 2.5em 2.5em 2.5em;text-align:justify}
.pay_cnt_note2 {text-align:center; padding: 2em 0 0 0 }
.pay_cnt_note { display:flex; align-items:center; gap:8px; margin:18px auto 0 auto; font-size:0.8em; width:fit-content; max-width:95%; align-self:center; text-align: left;}
.pay_cnt_note span { color:#999; font-style:italic; font-size:0.85em; line-height:1.2; }
.pay_lock_icon { flex-shrink:0; fill:#aaa; }

/* 5j. Page merci */
.rub_active {color:#FF6600;font-size:18px;}

.itsgood,.itsnotgood {line-height: 140%; color:green; font-family: 'josefin', Verdana, "sans-serif";font-size: 1.4em; padding-bottom:1em;}
.itsnotgood {color:inherit}
.customerEmail_merki, .amount_merki, .orderId_merki {color:green; font-size:1.2em;  font-style: italic;}

/* 5k. Héritage intfc_temp */
#conf_cnt {border:none;margin:0 auto 10px auto}

/* 5l. Responsives confirmation */
@media (max-width:976px) {

	/* Adresses livraison & facturation */
	#conf_liv_cnt, #conf_fact_cnt {
		width: 100%;
		float: none;
		box-sizing: border-box;
		padding: 10px 3%;
	}
	#conf_liv_cnt h2, #conf_fact_cnt h2, #conf_liv_cnt h3 { text-align: center; }
	#conf_liv_cnt h2, #conf_fact_cnt h2 { padding: 4px 8px; }
	.conf_addr_p { font-size: 0.9rem; text-align: center;}
	#conf_liv_hor_cnt { margin: 10px auto; text-align: center; font-size: 11px; line-height: 1.2; }
	#conf_liv_cnt a, #conf_fact_cnt a, #conf_fact_cnt, #conf_liv_cnt { text-align: center; }

	/* Logos CB */
	.logo_carte { background-size: contain; background-position: center center; box-sizing: border-box; }
	#googlepay_btn, #paypal_btn, #applepay_btn { background-size: auto 100%; background-position: top center; }
	#paiement_form hr { clear: both; }
	.logo_pay_2col {
		background-size: 82% auto;
	}

	/* Alma */
	#alma_btns_cnt { display: flex; flex-wrap: nowrap; width: 100%; align-items: flex-start; gap: 4px; justify-content: flex-start; margin: 0; }
	#alma_logo_cnt { flex: 0 0 calc(37% - 6px); height: 45px; margin: 2px; }
	#alma_btns_inner { flex: 1; display: flex; gap: 4px; }
	.alma_btn_wrap { flex: 1; display: flex; flex-direction: column; align-items: center; }
	.alma_btn { width: 100%; height: 50px; display: block; background-size: contain; background-position: center center; }
	.alma_btn .radio_btn_carte {left: 44% !important;}

	/* CGV */
	#cgv_title { width: 100%; box-sizing: border-box; }
	#cgv_lk_cnt { width: 100%; box-sizing: border-box; }

	/* Bouton valider */
	#conf_sub { width: 80%; }

	/* Note sécurité */
	.pay_lock_icon { width: 28px !important; height: 28px !important; }

	/* Formulaire paiement */
	#paiement_form {  padding: 0 10px 10px 10px; }

	/* Tableau récapitulatif */
	#conf_recap_table img { float:left; display:block; max-width:45%; margin:0 15px 5px 0; }
	.title_item_conf { font-size:1.2em ; padding-left:10px; }
	.infos_item_conf {font-size: 1em; float:none; overflow:hidden; max-width:none;}
	#conf_recap_table td:first-child {padding:10px}
	#conf_recap_table { padding:0 10px; table-layout: fixed; font-size: 13px;}
	#conf_recap_table td:last-child , #conf_recap_table .cel_tot, #conf_recap_thead td:last-child  {  padding-right:10px }
	#conf_recap_table .cel_res_tot {font-size: 1.1em  ;}
	.cel_res_tot_1line, .cel_res_ttl_1line {font-size: 1.3em  ;}
	#conf_recap_table .pan_line { height: auto; }
	#conf_recap_thead td {  font-size: 16px; height: auto; }
	#conf_recap_thead td:first-child { width: auto; padding-left: 20px}
	#cgv_lk_cnt p {font-size:0.9em}
	.title_table_conf2 {font-size:16px}
	.coupon_form_wrap {max-width:220px}
}

@media screen and (max-width: 580px) {
	#conf_recap_table { padding:0 ; font-size: 11px; }
	#conf_recap_thead td:last-child{ min-width:65px ;width: 65px  }
	#conf_recap_table #line_ttc td { font-size: 1.3em; height: auto; }
	#paiement_form {padding:10px 0 ; width:92%;  }
	.title_table_conf2 {border-radius: 0; background-color: #ddd;}
	#cgv_title {background-color: #ddd;}
}

@media screen and (max-width: 498px) {
	#cgv_title { border-radius:0; }
	#cgv_lk_cnt {   border-radius:0;}
}


/* ══════════════════════════════════════════════════════════════════════
   6. cnx.gab.php + form_cnx.inc.php — CONNEXION / COMPTE
   ══════════════════════════════════════════════════════════════════════ */

/* 6a. Conteneurs */
.p_form_crl { clear:both;padding:5px 0}
#cnx_cnt, #crl_cnt, #allready_cntd, #pmt_cnt, #creer_cmpt_cnt, #reinit_mdp_cnt, #login_code_view  {
	width:60%;  padding:2em; margin:1.5em auto 1.5em auto; }

.label_crl_mail,.input_crl_mail { text-align:center!important; display:block; width:95%; box-sizing:border-content; clear:both;margin:0 auto }

#cnx_cnt, #creer_cmpt_cnt, #reinit_mdp_cnt { width:70%; }

#cnx_cnt {padding-bottom: 0; margin-bottom:0 }
#login_code_view {	padding:0 50px}

.cnt_def_modern #login_code_view {width:auto}

#creer_cmpt_cnt {display:none}

/* 6b. Formulaires */
#cnx_form, #reinit_mdp_form {padding:0 50px}

#creer_cmpt_form select {
  border: 1px solid #ccc;
  font-size: 1.1em;
  width:50%;
  float:left;
  padding: 12px 15px ;
  background: #fff;
}

#creer_cmpt_cnt label, #cnx_cnt label, #reinit_mdp_cnt label, #login_code_view label, .label_crl_mail {font-family: 'josefin', Verdana, Geneva, sans-serif; font-size:1.25em;}

#login_code_view .form-group { text-align: center; }
#login_code_view .label_cnx { text-align: center; padding-left: 0; }
#login_code_view .input_cnx { display: block; margin: 0 auto; text-align: center; }
#login_code_view #btn_send_code, #login_code_view #btn_check_code { display: block; margin: 40px auto; }

#allready_cntd,#pmt_cnt  {line-height:160%}

#pmt_cnt {width:70%; margin:1em auto 2em auto; text-align: center}
#pmt_cnt p {padding:1em 0}
#cnx_sub {margin:0 auto}

#cnx_cust_cnt, #new_cust_cnt {margin:1%;width:44%; padding:2%;
background-color:#fff;/*border:1px dotted #999*/ min-height:200px}
#cnx_cust_cnt { float:left;}
#new_cust_cnt { float:right}

.title_box,.title_box_center {font : 1.4em/120% 'josefin', Verdana, Geneva, sans-serif; color: #ff8330; margin:5px 0 20px 0;clear:both; text-align:right; font-weight:bold }
.title_box_center {text-align:center}
#cnx_cust_sub, #new_cust_sub {/*width:60%;*/margin:20px auto 0 auto}
#cnx_cust_sub {margin-bottom:20px}

/* 6c. Checkbox "Se souvenir de moi" */
.checkbox-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

#rmbr { display: none; }

.checkbox-group label[for="rmbr"] {
    position: relative;
    cursor: pointer;
    user-select: none;
    color: #555;
    font-size: 0.9em;
    padding-left: 35px;
    padding-top: 12px;
    padding-bottom: 12px;
    -webkit-tap-highlight-color: transparent;
}

.checkbox-group label[for="rmbr"]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border: 2px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    transition: all 0.2s ease;
}

.checkbox-group label[for="rmbr"]::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-60%) rotate(45deg) scale(0);
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transition: all 0.2s ease;
}

#rmbr:checked + label::before {
    background-color: #007bff;
    border-color: #007bff;
}

#rmbr:checked + label::after {
    transform: translateY(-60%) rotate(45deg) scale(1);
}

/* 6d. Lien mot de passe oublié */
.forgot-link {
	display: block;
	text-align: center;
	margin-top: 15px;
	color: var(--link-color);
	text-decoration: none;
	font-size: 0.9em;
}
.forgot-link:hover { text-decoration: underline; }

/* 6e. Newsletter (section formulaire connexion / création compte) — case à cocher sur le
   modèle CGV (voir .cgv_label / #lu_cgv), même ligne, moins de padding autour du cadre */
.newsletter_radio_cnt { color:#444; border-radius:15px ; width:100%; box-sizing:border-box; margin:0 auto; background-color:var(--light-grey); padding:10px 15px; border:2px solid #fff; box-shadow: 0 1px 12px #eee}
.radio1_label {width:30px!important;margin:0;text-align:left!important;padding-left:10px}

.radios_cnt_news {width:270px; border:1px solid #fff; margin: 5px auto 20px auto}
.radio1 {margin-top:4px!important}
.input_checkbox_2 {width:auto!important; float:left!important; margin:0 auto!important; text-align:center!important;margin-top:5px!important}

/* 6f. Animation centrage bloc connexion seul */
#cnx_cust_cnt {
    transition: all 0.3s ease-in-out;
}

/* 6g. Héritage intfc_temp — anciens éléments formulaire connexion */
#creer_cmpt {margin-top:40px}
#allready_cntd {margin-top:0}
#crl_sub, #reinit_mdp_sub, #backsub {width:70%;margin:20px auto}

.select_cnx {
    width: 100%;
    padding: 12px 40px 12px 15px;
    border: 1px solid #ccc;
    border-radius: var(--border-radius);
    font-size: 1em;
    color: var(--text-color);
    background-color: #fff;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.3s ease;
}
.select_cnx:focus {
    border-color: var(--main-color);
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-shadow);
}
.input_checkbox_def {float:left;text-align:left;clear:none;padding-top:10px;margin:0.7em 0 0 0!important}
.p_form_cnx {width:95%;margin:0 auto;text-align:center;clear:both;padding:10px 0;box-sizing:border-box;}

#creer_cmpt_form fieldset {margin-top:3em;padding-top:1em;border:none}

/* 6h. Responsives connexion */
@media screen and (max-width: 976px) {
	#cnx_form, #client_form, #cnct_form, #reinit_mdp_form { width:100%; box-sizing:border-content; padding:0}
	#crl_cnt, #cnx_cnt, #creer_cmpt_cnt, #reinit_mdp_cnt, #login_code_view { width:95%; box-sizing:border-box; padding:1em 2%}
	.title_box {text-align:center}
	.p_form_cnx {width:100%; margin:0}
	#creer_cmpt_form legend {padding:0}
}


@media only screen and (max-width:768px) {
	#cnx_cust_cnt, #new_cust_cnt {width:90%; clear:both;float:none; margin:0 auto ; }
	#new_cust_cnt {margin-bottom:30px}
	#cnx_cust_sub {margin-bottom:10px}
	.label_checkbox_def {width:auto}
	.newsletter_radio_cnt{width:100%}
}


/* ══════════════════════════════════════════════════════════════════════
   7. dnns.gab.php + cacc.gab.php — DONNÉES PERSONNELLES / LIVRAISON
   ══════════════════════════════════════════════════════════════════════ */

/* 7a. Formulaires données personnelles */
#client_form ,#creer_cmpt_form  {
	box-sizing:border-box;
	width:100%;
	margin:30px auto 0 auto;
	padding:30px 0;
	background: #fff;
    border-top: 8px solid var(--main-color);
	 border-bottom: 8px solid var(--main-color);
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
#creer_cmpt_form {padding:30px 50px;}

#client_form legend, #dnns_perso_form legend, #creer_cmpt_form legend {
	font-family: 'josefin', Verdana, Geneva, sans-serif;
	font-size:24px; color:var(--main-color) ; padding:15px 15px 10px 8px; text-align:left; text-shadow:1px 0 2px #fff;
}

/* Inclut aussi #cnct_form label (cnct.gab.php) */
#client_form label, #dnns_perso_form label, #cnct_form label {
	width:30%;
	padding:8px 5px 8px 0;
	box-sizing: border-box;
	color: #999;
	font-size:0.85em ;
	margin:5px 0;
	float:left;
	display:block;
	text-align:right }

#client_form label strong { color: #777; text-shadow: #ccc 1px 1px 1px; }

/* Inclut aussi #cnct_form input/select/textarea (cnct.gab.php) */
#client_form input, #client_form select,
#crl_form input[type=email], #dnns_perso_form input, #dnns_perso_form select,
#cnct_form input, #cnct_form select, #cnct_form textarea {
	width:40%;
	box-sizing: border-box;
	border: 1px solid #ccc;
	font-size:1.1em ;
	margin:5px 2% 5px 1%;
	float:left;
	padding:8px 15px;
	background: #fff;
}

#cnct_form textarea {
	padding-top:8px;
	line-height: 1.4;
	height: 100px;
}

#crl_form input[type=email] {width:95%; max-width: 550px ; margin:5px auto 20px auto; float:none; padding:12px 15px}

#client_form fieldset, #dnns_perso_form fieldset {
	padding:5px 30px 30px 0;
	max-width:96%;
	border-top:1px solid var(--focus-shadow) ; border-bottom:0;
	border-right:0 ;
	border-left:0;
	margin:0 auto;
	box-sizing:border-box;
}

.indic{  height:auto; text-align:left; font-size:11px; padding:0 10px; margin-bottom: 2em;  color:#999; line-height:160%; clear: both }

#comp_adress_lk, #no_comp_adress_lk {
	width:auto; text-align:left; display:block;
	margin:10px 0 20px 30%;
	color:#999;
}
#comp_adress_lk:hover, #no_comp_adress_lk:hover {text-decoration:underline; color:var(--main-color);}

#client_form #adresse_cnt {margin-top:10px}
#liv_same_add_cnt {margin:20px 0;}
#liv_fields {margin-top:90px;padding :10px 0;border:1px solid #ccc;background-color:#F7f7f7}
.legend_1 {font-weight:normal;color:#999;width:150px;font-variant:small-caps;float:right;clear:both;background-color:#fff;font-size:11px;padding:6px;border-left:1px dotted #ccc;border-bottom:1px dotted #ccc;text-align:center;}
#anniv_cnt {width:500px;margin-left: 113px; }
#anniv_cnt .lab_dnns_1 {display:block;float:left;width:auto;padding:1em 5px 0 5px;}
#anniv_cnt .inp_dnns_1{ width:4em; float:left; margin:3px; text-align:center}
.border_2 { border-color:#ddd!important }
.border_3 {border-width:2px !important}
.coupons_cnt {width:100%;text-align:center}

.coupon_div {padding:0.5%;display:inline-block;width:46%;margin:1%;}
#result_creer{padding-top:20px;font-size:11px;text-align:left;height:400px;width:700px;margin:0 auto;}

#client_sub, #retour_creer, #next_step_btn ,#back_sub {display:block; margin:20px auto}

#conf_sub, #cnct_sub {margin:10px auto}

#cnct_sub {display:block; width:40%}
#back_sub {width:10%}
#mess {min-height:10em}

.optin_label{ margin:0 10px!important;padding:5px 0!important;width:450px!important;font-weight:normal!important;font-size:0.85em!important;line-height:100%}
.input_text_def {width:14em}

/* Dégradés (legacy) */
.degrade/*, #client_form input, #client_form select*/ {
background-image:-moz-linear-gradient(#ddd,#f5f5f5,white,white,white);
background-image:-webkit-linear-gradient(#ddd,#f5f5f5,white,white,white);
background-image:-o-linear-gradient(#ddd,#f5f5f5,white,white,white);
background-image:linear-gradient(#ddd,#f5f5f5,white,white,white);
}
.degrade_2/*, #client_form input, #client_form select*/ {
background-image:-moz-linear-gradient(#ff8330,#ff6600);
background-image:-webkit-linear-gradient(#ff8330,#ff6600);
background-image:-o-linear-gradient(#ff8330,#ff6600);
background-image:linear-gradient(#ff8330,#ff6600);
}
.degrade_3/*, #client_form input, #client_form select*/ {
background-image:linear-gradient(#fff,#eee);
}

/* 7b. Newsletter (données personnelles / création compte) */
.newsletter_indic {padding:1% 3%; width:96%; text-align:center;font-size:0.8em; float:left; }

/* 7c. Livraison */
#choix_transp_cnt {display:none}
#form_point_retrait_cnt, #form_magLiv_cnt, #domLiv_cnt {
	margin-bottom:30px ;
	text-align:left;
	padding:20px; 
	background-color:#fff; /*border: 2px solid #ff8330; */
	box-shadow:0 0 18px rgba(0,0,0,0.1); 
	font-size:1em;


	box-sizing: border-box;
  width: 100%;


  background: #fff;
  border-top: 8px solid var(--main-color);
  border-bottom: 8px solid var(--main-color);
  border-radius: 20px;
  /*box-shadow: 0 4px 12px rgba(0,0,0,0.05);*/







}

#choix_transp_cnt {cursor:pointer;border:none;padding:15px;text-align:left;font-size:1em; line-height:120%}

#choix_transp_cnt input {display :block; float:left; margin-top:4px;width:30px;}
#choix_transp_cnt label {cursor:pointer;display :block; float:left; margin-left:2em}
#choix_transp_cnt p {font-size:0.87em; font-style:italic;clear:both;margin-left:60px}
.liv_transp_cnt {padding:1em ; margin:0}

.liv_selected {background-color: #f1f1f1 ;color: #333; }
.liv_no_selected {background-color: #fff ;color:#999 }
.styleLiv {font-family: 'josefin',Verdana, Geneva, sans-serif;font-size:18px; }

#prix_domicile, #prix_magasin, #prix_point {font-size:0.9em; font-style:italic}
@media (max-width:580px) {
	#prix_domicile, #prix_magasin, #prix_point {margin-top:5px}
}

#domLiv_cnt {margin-top:20px}
.form_point_retrait_title , .form_domLiv_title{font-family:'josefin',Verdana, Geneva, sans-serif;margin-top:20px;clear:both;font-weight:bold; font-style:italic; font-size:1.1em; }
.form_domLiv_title {margin:0}
#mess_form_point_retrait {color:green;line-height:140%}

/* Formulaire points de retrait — flexbox */
.form_point_retrait {display:flex;flex-wrap:nowrap;align-items:flex-end;gap:8px 12px;margin:12px 0 20px 0;clear:both;}
.form_point_retrait p.fl_l {display:flex;flex-direction:column;float:none;margin:0;padding:0;}
.form_point_retrait p.fl_l label {font-size:0.8em;padding:0 0 3px 2px;margin:0;font-family:'josefin',Verdana,sans-serif;}
.form_point_retrait #adresse {width:210px}
.form_point_retrait #zip {width:68px}
.form_point_retrait #ville {width:140px}
.form_point_retrait #pays {width:115px}
#form_point_retrait_cnt form input,#form_point_retrait_cnt form select {font-size:1em;font-family:Verdana,Geneva,sans-serif;margin:0;padding:8px 10px;font-variant:small-caps;text-align:left;border:1px solid #ccc;border-radius:var(--border-radius);background:#fff;box-sizing:border-box;transition:all 0.3s ease;}
#form_point_retrait_cnt form input:focus,#form_point_retrait_cnt form select:focus {border-color:var(--main-color);outline:none;box-shadow:0 0 0 3px var(--focus-shadow);}
#rech_pntSo_btn {float:none;clear:none;margin:0 0 0 auto;padding:8px 14px;font-size:1em;font-family:Verdana,Geneva,sans-serif;background:#fff!important;background-image:none!important;border:1px solid #ccc!important;border-radius:var(--border-radius)!important;color:var(--main-color)!important;font-weight:bold;box-shadow:none;transition:all 0.3s ease;}
#rech_pntSo_btn:hover {border-color:var(--main-color)!important;box-shadow:0 0 0 3px var(--focus-shadow)!important;background:#fff!important;color:var(--main-color)!important;}

.pntSo_hn {font-family:'josefin',Verdana, Geneva, sans-serif; font-size:24px; float:left;font-weight:normal; height:31px;line-height:31px;margin-bottom:10px}
.pntSo_hn_img, .magLiv_hn_img, .pntSo_hn_img2  {display:block; float:left;height:30px;width:auto}
.pntSo_hn_img2 {margin:-6px 0 0 7px;/*height:24px;*/}
.pntSo_hn_img2 img {display: block;height:25px; width:auto}

#pntSo_ul_cnt {
	float:left;
	width:450px;
	height:450px;
	overflow-y:auto;
	overflow-x:hidden;
	padding-left: 10px;
	background-color: #f6f6f6;
	border-top:1px solid #eee;
	border-bottom:1px solid #eee;
	box-sizing: border-box;
}

.pntSo_ul_cnt_vide {height:auto!important}
.pntSo_ul_cnt_def {height:450px!important;}
#pntSo_scroll_btn_wrap {display:none;}
#pntSo_scroll_btn {width:30px;height:30px;border-radius:50%;background:#fff;border:1px solid #ddd;color:#999;font-size:11px;cursor:pointer;box-shadow:0 1px 5px rgba(0,0,0,0.12);padding:0;line-height:1;}
#pntSo_ul {width:100%;height:auto}
#pntSo_ul li {background-color:#fbfbfb;line-height:120%;display:block;height:auto;border:1px solid #ccc;margin:10px 10px 10px 0;padding:0;border-radius:10px;}
#pntSo_ul li:hover {background-color:#fff5ee;}
.pntSo_header {cursor:pointer;padding:10px;position:relative;}
.pntSo_toggle {position:absolute;top:10px;right:10px;font-size:0.75em;color:#aaa;}
.pntSo_body {display:none;padding:0 10px 10px 10px;clear:both;overflow:hidden;}
.infoWindow_pntSo_div { padding :0 20px ;  max-width:220px; font-size:16px }
.infoWindow_pntSo_nom , .pntSo_nom {font-size:1em;font-weight:bold}
.infoWindow_pntSo_nom {margin-top:10px}
.pntSo_add {font-size:1em}
.infoWindow_pntSo_add {font-size:0.85em;}
.infoWindow_pntSo_titre_hor, .pntSo_titre_hor {margin-bottom:5px}
.pntSo_horaire, .pntSo_titre_hor {color:#797979;width:230px;float:left; font-size:0.7em;line-height:1em}
.infoWindow_pntSo_horaire, .infoWindow_pntSo_titre_hor {color:#666;font-size:0.72em;line-height:1.2em}

.pntSo_distance {float:right;font-size : 0.75em;clear:both;line-height:0.75em }
.infoWindow_pntSo_distance { float:right;font-size:0.70em; clear:both; line-height:1.2em;font-style:italic; padding-right:5px }

.infoWindow_pntSo_btn, .pntSo_btn, .magLiv_btn, .domLiv_btn { 
	display:block; 
	box-sizing:border-box;
	width:auto; 
	font-weight:bold; 
	text-align:center;
	cursor:pointer; 
	float:right; 
	color: #fff; 
	padding:7px 10px;
	border:2px solid #fff;color:#fff;
	background:var(--main-color);
	background-image:linear-gradient(#ff8330,#ff6600);
	box-shadow:0 1px 2px #999;
	border-radius:var(--border-radius);
	transition:0.2s;
	outline:0;
}

.pntSo_btn { font-size:0.9em}
.pntSo_btn:visited{color:#fff}

.infoWindow_btn {float:none;clear:both;margin:10px auto;}

.infoWindow_pntSo_btn:hover, .pntSo_btn:hover, .magLiv_btn:hover, .domLiv_btn:hover {
border:2px solid var(--main-color);background-image:none;background-color:#FEEEE2!important;color:var(--main-color)!important;box-shadow:none;text-decoration:none;
}

/* Bouton action compact (style button_d en petit) — disponible pour d'autres usages */
.button_d_sm {box-sizing:border-box;display:block;cursor:pointer;text-align:center;font-family:Verdana,Geneva,sans-serif;border:2px solid #fff;color:#fff;background:var(--main-color);background-image:linear-gradient(#ff8330,#ff6600);padding:8px 16px;font-size:1em;font-weight:bold;box-shadow:0 1px 2px #999;border-radius:var(--border-radius);transition:0.2s;outline:0;}
.button_d_sm:visited {color:#fff;}
.button_d_sm:hover {border:2px solid var(--main-color);background-image:none;background-color:#FEEEE2!important;color:var(--main-color)!important;box-shadow:none;text-decoration:none;}

#map {float:left;width:450px;height:450px}

.magLiv_label {display:block; clear:both; margin-bottom:10px}
.magLiv_btn, .domLiv_btn {float:right; margin:10px; width: auto;padding: 15px}
#form_magLiv_cnt form, #domLiv_current_cnt {float:left; max-width:500px}
#magLiv_select option[value=""][disabled] {
  display: none;
}
.domLiv_add_p {font-size:1.1em;margin-top:10px;line-height:130%}
.ptit_lien {color:var(--link-color2);font-size:0.8em}
.domLiv_lien1, .domLiv_lien2{float:left; margin-right:90px}
.domLiv_lien2 {margin:0}
#infosMag_cnt {width:450px;margin:10px; padding:10px; border:1px solid #ddd;  clear:both; float:left; box-sizing: border-box;}
.mag_horaire {font-size:0.75em;}
.mag_nom {font-size:1.2em; font-variant:small-caps;font-weight:bold}
.mag_horaire {margin:10px 0}

/* 7d. Responsives données personnelles / livraison */
@media (max-width:976px) {
	#client_form {
		width:100%;
		margin:1em auto 0 auto;
		padding:0;
	}

	#client_form fieldset, #dnns_perso_form fieldset {
		padding:10px;
		max-width:96%;
		border-top:0;
		border-right:0;
	}
	#client_form legend:first-child {padding-top:1em;}
	#client_form legend, #dnns_perso_form legend {
		font-size:1.6em; display:block;
		width:100%; text-align:center; padding:0 0 10px 0;
		margin: 0 auto;
		border-top:1px solid #fff
	}

	#client_form fieldset {margin:0 auto;}

	/* Inclut aussi #cnct_form (cnct.gab.php) */
	#client_form label,
	#client_form input[type=password],#client_form input[type=text],#client_form input[type=email],
	#cnct_form label, #cnct_form input, #cnct_form textarea, #cnct_form select  {
		box-sizing:border-box;
		float:none;
		display:block;
		clear:both;
		margin:0 auto;
		width:98%;
		max-width:98%;
		text-align:left;
		text-indent:0;
		height:auto;
	}
	#client_form label { padding:0 0 2px 10px;}

	.indic {text-align: center; font-size:11px; margin-bottom: 0 }

	.label_checkbox_cnx { width:auto!important;float:left!important;}
	#client_form input[type=checkbox] {width:auto!important; margin:0.9em 0 0 0!important; }

	#comp_adress_lk, #no_comp_adress_lk {width:90%;text-align:left;display:block;margin:10px auto 20px auto}

	#client_form input[type=checkbox] {margin:0.3em auto 1em auto}
	#client_form label {padding-top:1em}
	#anniv_cnt {width:100%;margin:0 auto}
	#anniv_cnt .inp_dnns_1, #anniv_cnt .lab_dnns_1  {clear:none!important; width:auto!important;float:left!important}
	.optin_label{ margin:1em auto 0 auto!important;font-size:1em!important; width:70%!important;overflow:hidden;height:auto;text-align:center!important;line-height:130%!important }
	.width_auto_input {float:left!important;width:auto!important}

	.input_checkbox_2 { float:none!important; clear:both!important; margin-top:-1em!important}
	.label_select {text-align:center!important}

	/* Livraison */
	#form_point_retrait_cnt, #form_magLiv_cnt, #domLiv_cnt { padding:10px 17px 17px 17px; }

	.form_point_retrait {gap:5px 8px;flex-wrap:wrap;}
	.form_point_retrait p.fl_l {flex:0 0 calc(65% - 4px);min-width:0;}
	.form_point_retrait p.fl_l:nth-child(even) {flex:0 0 calc(35% - 4px);}
	.form_point_retrait #adresse,
	.form_point_retrait #zip,
	.form_point_retrait #ville,
	.form_point_retrait #pays {width:100%;box-sizing:border-box;}
	#rech_pntSo_btn {width:100%;clear:both;margin-top:6px!important;text-align:center;}
	.pntSo_hn {clear:both;width:auto; font-size:20px}
	.pntSo_hn_img, .magLiv_hn_img, .pntSo_hn_img2  {display:block; float:left; /*height:24px;*/width:auto;margin:-15px 20px 0 0px;}
	.pntSo_hn_img2 {margin:-6px 0 0 7px;/*height:24px;*/}
	.magLiv_hn_img  {margin:0 0 0 7px;height:30px;}
	#pntSo_ul_cnt {float:none;width:100%;margin:0 auto;height:auto!important;overflow-y:auto;overflow-x:hidden;}
	#pntSo_ul_cnt.pntSo_ul_cnt_def {height:400px!important;}

	.pntSo_ul_cnt_def {height:480px!important;overflow-y:auto;overflow-x:hidden;}

	#pntSo_scroll_btn_wrap {display:flex;justify-content:center;padding:6px 0;}
	#pntSo_scroll_btn {display:flex;align-items:center;justify-content:center;}

	

	.infoWindow_pntSo_add {font-size:0.9em}

	.pntSo_horaire, .pntSo_titre_hor { width:100%;float:none; font-size:0.7em;line-height:1em}
	 

	.pntSo_distance { font-size : 0.8em; line-height:0.8em }
	.infoWindow_pntSo_distance { float:right;font-size:0.70em; clear:both; line-height:1.2em;font-style:italic; padding-right:5px }
	.pntSo_nom { font-size:0.82em; }
	.pntSo_add { font-size:0.82em; }
	.pntSo_header { padding:6px 10px; }
	.infoWindow_pntSo_btn, .pntSo_btn, .magLiv_btn, .domLiv_btn { 
		clear:both;
		color:#fff; 
		/*width:80%!important;  */
		float:none!important; 
		margin:10px auto!important;
		height:auto!important
	}
	.button_d_sm {width:80%;float:none!important;margin:10px auto!important;}
	.magLiv_btn { margin-top:30px!important;}

	#map {float:none;width:100%;height:450px;}

	.selectMag_cnt {margin-left:0;text-align:center;}
	.magLiv_label {display:block;clear:both;margin-bottom:10px;text-align:center;}
	.magLiv_btn {width:100%!important;float:none!important;margin:10px auto!important;box-sizing:border-box;padding:15px;}
	#form_magLiv_cnt form, #domLiv_current_cnt {float:none;margin:0 auto;text-align:center;max-width:500px;}
	
	

	#magLiv_select {width:100%;box-sizing:border-box;}
	#magLiv_select option[value=""][disabled] {
	  display: none;
	}
	.domLiv_add_p {font-size:1.1em;margin-top:10px;line-height:130%;text-align:center;}
	.ptit_lien {color:var(--link-color2);font-size:0.8em}
	.domLiv_lien1, .domLiv_lien2 {float:none;display:block;text-align:center;margin:5px auto;}
	.domLiv_lien2 {margin:5px auto;}
	#infosMag_cnt {width:95%!important;margin:3% auto!important; padding:3%!important; border:1px solid #ddd!important;  clear:both!important; float:none!important}
	.mag_horaire {font-size:0.75em;}
	.mag_nom {font-size:1.2em; font-variant:small-caps;font-weight:bold}
	.mag_horaire {margin:10px 0}
	.styleLiv {font-size:16px}
	.liv_transp_cnt {font-size:0.8em}
	#choix_transp_cnt label { margin-left:1em}
	#choix_transp_cnt p {margin-left:4.2em}
	#choix_transp_cnt { line-height:100%}

	/* Boutons navigation formulaire (héritage intfc_temp) */
	#client_sub, #retour_creer, #next_step_btn, #back_sub {width:auto;max-width:90%;}
	#line_tot td {border:none!important}
}
@media (max-width:580px){

	.infoWindow_pntSo_div { max-width:none; padding-left:10px;  }
}


/* ══════════════════════════════════════════════════════════════════════
   8. cnct.gab.php — CONTACT
   ══════════════════════════════════════════════════════════════════════ */

/* Note : #cnct_form label et inputs sont définis en Section 7 (sélecteur partagé) */

#cnct_form select option {
	padding-top:5px
}

#cnct_sub {display:block; width:40%}

/* Héritage intfc_temp */
#cnct_form select {font-size:1em !important}

@media (max-width:580px) {
	#cnct_form select {font-size:0.9em !important}
	#cnct_sub {width:80% !important;}
}


/* ══════════════════════════════════════════════════════════════════════
   9. MES COMMANDES — #cmd_tab
   ══════════════════════════════════════════════════════════════════════ */

#cmd_tab { box-sizing: border-box; font-size:12px;width:100%; max-width:100%; margin: 0 auto 20px auto; background-color:#fff}
.bord1 {width:100%; margin: 0 auto 20px auto;border:2px solid #ff8330; background-color:#fbfbfb}
.bord1 {padding:20px}

#cmd_tab thead tr td {font:1.8em 'josefin',Verdana, Geneva, sans-serif; padding:20px;  line-height: 1.2; color:#ff8330;border:none  }
#cmd_tab tbody tr { cursor:pointer; vertical-align:middle}
#cmd_tab tr td {padding:20px; vertical-align:middle; text-align:left; font-weight:normal; border-top:1px solid var(--light-grey)}
#cmd_tab tr td:lastchild {font-size:0.85em!important}
#cmd_tab tbody tr:hover {transition:0.2s; background-color:#fff;box-shadow:1px 0 10px rgb(0,0,0,0.2)}
#cmd_tab tbody tr.piedtr {background-color:#fbfbfb;box-shadow:none}

@media (max-width:976px) {
	#cmd_tab {width:95%; max-width:95%; font-size:11px;}
	#cmd_tab tr td {padding:5px 10px;}
}

@media (max-width:580px) {
	#cmd_tab thead tr td {font-size:16px;line-height:1.1;background-color:#eee;padding:15px 5px;}
	#cmd_tab tbody tr td {font-size:11px;line-height:1.3;padding:10px 5px;}
}


/* ══════════════════════════════════════════════════════════════════════
   10. STYLES HÉRITÉS / DIVERS
   ══════════════════════════════════════════════════════════════════════ */

/* Ancien menu tunnel (hors tunnel moderne) */
#tunnel_top_menu {max-width:940px;margin: 0 auto; }
#tunnel_top_menu li {height:60px; background-color:transparent;display:block;width:25%;float:left;}
#tunnel_top_menu li img {width:100%; height:auto}
#deco_btn {margin: 40px 0 40px 0;float:right; font-size:0.75em; line-height:75px;width:75px;color:#888;height:32px; display:block;cursor:pointer; background: transparent url(img/deconnexion_img.png) top center no-repeat}

#deco_btn:hover,.tunnel_active {  background-position: bottom }
#deco_btn:hover{ color:#ff8330 }


/* surcharge de l'ancien bouton retour dans main4.css 
#retour_btn_descro, #btn_deconnexion {
    position: absolute;
    top: -3px;
    right: 0;
    width: 32px;      
    height: 32px;
    cursor: pointer;
    border-radius: 50%;  
    
 
    display: flex;
    align-items: center;
    justify-content: center;
    
  
    background-color: #fff;
    border: 1px solid #e0e0e0;
    color: #777;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

 
#retour_btn_descro:hover, #btn_deconnexion:hover {
    color: var(--main-color);  
    border-color: var(--main-color);
    box-shadow: 0 2px 8px rgba(255, 131, 48, 0.2);
    transform: translateX(-2px); 
}

*/


.tunnel_nom_user {display:block;float:left;height:30px;line-height:30px;margin:0 0 0 35px}
ul#menu_cmpt {
    display: flex;
    width: 100%;
    margin: 0 auto !important;
    padding: 0;
    list-style: none;
    gap: 12px;
	box-sizing: border-box;
}

ul#menu_cmpt li {
    flex: 1;
    padding: 0;
    cursor: pointer;
}

ul#menu_cmpt li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    font-weight: bold;
    color: #999;
    border: 1px solid #eee;
    font-size: 20px;
    font-family: 'josefin', Verdana, Geneva, sans-serif;
    text-align: center;
    padding: 15px;
    border-radius: 8px;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

ul#menu_cmpt li a:hover {
    text-decoration: none;
    background-color: #fff;
    color: #ff8330 !important;
    box-shadow: 0 2px 8px rgba(255, 131, 48, 0.15);
}

@media (max-width: 976px) {
    ul#menu_cmpt { gap: 8px; }
    ul#menu_cmpt li a { font-size: 16px;  }
    #deco_btn { margin: 0; float: none; position: absolute; right: 0; top: 220px; }
}

@media (max-width: 580px) {
    ul#menu_cmpt li a { font-size: 15px;  }
}

.menu_cmpt_active { background-color: #fff; color: #ff8330!important ; border: none; box-shadow: 0 0px 18px rgba(255, 131, 48, 0.15); }

/* Pages CGV (hors tunnel moderne, héritage intfc_temp) */
.cgv_cnt {text-align: left;}
.cgv_cnt .title_faq {cursor:default; padding-left:40px}

/* Ancien header hors tunnel moderne (héritage intfc_temp) */
#head {width:100%;height:75px; background: transparent url(img/head_bkg.png) top; clear:both;}