.elementor-314 .elementor-element.elementor-element-b0de24c{--display:flex;--padding-top:100px;--padding-bottom:0px;--padding-left:100px;--padding-right:100px;}.elementor-widget-woocommerce-checkout-page .product-name .variation{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-314 .elementor-element.elementor-element-dc229bd{--additional-information-display:block;}.elementor-314 .elementor-element.elementor-element-dc229bd .coupon-container-grid{--coupon-button-alignment:end;}.elementor-314 .elementor-element.elementor-element-cc0ee6d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:100px;--padding-left:100px;--padding-right:100px;}@media(max-width:767px){.elementor-314 .elementor-element.elementor-element-b0de24c{--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-314 .elementor-element.elementor-element-dc229bd > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-314 .elementor-element.elementor-element-cc0ee6d{--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}}/* Start custom CSS for woocommerce-checkout-page, class: .elementor-element-dc229bd *//* =========================================
   HELIOX PAGE DESIGN - VERSION FINALE
   Fix: Traduction Apply & Layout PC Harmonieux
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap');

:root {
    --heliox-navy: #1F3D58;
    --heliox-light-navy: #2a4d6e;
    --heliox-gold: #C5A059;
    --heliox-gold-hover: #a68545;
    --font-tech: 'Share Tech Mono', monospace;
    --font-sans: 'Poppins', sans-serif;
    --heliox-radius: 12px;
    --heliox-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* --- FIX DEBORDEMENT --- */
.heliox-skin {
    width: 100%;
    margin: 0 !important;
}

.heliox-skin * {
    box-sizing: border-box !important;
    max-width: 100%;
}

/* 1. BLOCS PRINCIPAUX (Style Carte) */
.heliox-skin .elementor-widget-wrap, 
.heliox-skin .woocommerce-MyAccount-content, 
.heliox-skin .u-column1, 
.heliox-skin .u-column2,
.heliox-skin #customer_login > div,
.heliox-skin form.checkout #customer_details, 
.heliox-skin #order_review, 
.heliox-skin #payment {
    background: white !important;
    border-radius: var(--heliox-radius) !important;
    padding: 30px !important;
    box-shadow: var(--heliox-shadow) !important;
    border-top: 4px solid var(--heliox-navy) !important;
    margin-bottom: 30px !important;
    width: 100% !important;
    display: block !important;
    overflow: visible !important;
    position: relative !important;
}

/* Clearfix */
.heliox-skin form.checkout #customer_details::after,
.heliox-skin #customer_login > div::after {
    content: "";
    display: table;
    clear: both;
}

/* Mobile Padding */
@media (max-width: 767px) {
    .heliox-skin .elementor-widget-wrap, 
    .heliox-skin #customer_login > div,
    .heliox-skin form.checkout #customer_details, 
    .heliox-skin #order_review, 
    .heliox-skin #payment {
        padding: 20px 15px !important;
    }
}

/* 2. TYPOGRAPHIE */
.heliox-skin h1, .heliox-skin h2, .heliox-skin h3, 
.heliox-skin h4, .heliox-skin h5, 
.heliox-skin .woocommerce-loop-product__title,
.heliox-skin .elementor-heading-title,
.heliox-skin #order_review_heading {
    font-family: var(--font-tech) !important;
    color: var(--heliox-navy) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.heliox-skin h2, .heliox-skin h3,
.heliox-skin #order_review_heading {
    border-bottom: 2px solid #f3f4f6;
    padding-bottom: 10px;
    margin-bottom: 25px !important;
}

.heliox-skin p, .heliox-skin li, .heliox-skin span, 
.heliox-skin div, .heliox-skin td, .heliox-skin th, .heliox-skin label {
    font-family: var(--font-sans);
    color: #4b5563;
}

.heliox-skin a {
    color: var(--heliox-navy) !important;
    text-decoration: none;
    font-weight: 500;
}
.heliox-skin a:hover { color: var(--heliox-gold) !important; }

/* 3. FORMULAIRES & CHAMPS */
.heliox-skin input[type="text"], 
.heliox-skin input[type="email"], 
.heliox-skin input[type="password"], 
.heliox-skin input[type="tel"], 
.heliox-skin textarea, 
.heliox-skin select {
    background-color: #f9fafb !important;
    border: 1px solid #d1d5db !important;
    border-radius: 4px !important;
    padding: 10px 15px !important;
    min-height: 48px !important;
    width: 100% !important;
    font-family: var(--font-sans) !important;
    color: var(--heliox-navy) !important;
}

.heliox-skin input:focus, .heliox-skin textarea:focus, .heliox-skin select:focus {
    background-color: #fff !important;
    border-color: var(--heliox-gold) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.1) !important;
}

/* --- FIX SELECT2 (CENTRAGE VERTICAL PAYS/REGION) --- */
.heliox-skin .select2-container .select2-selection--single {
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    background-color: #f9fafb !important;
    border: 1px solid #d1d5db !important;
    border-radius: 4px !important;
    padding: 0 10px !important;
}

.heliox-skin .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: normal !important;
    padding-left: 5px !important;
    color: var(--heliox-navy) !important;
}

.heliox-skin .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 46px !important;
    top: 1px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 4. BOUTONS GLOBAUX */
.heliox-skin button, 
.heliox-skin input[type="submit"], 
.heliox-skin .button, 
.heliox-skin #place_order {
    background-color: var(--heliox-gold) !important;
    color: white !important;
    font-family: var(--font-tech) !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    letter-spacing: 1px !important;
    padding: 15px 30px !important;
    border-radius: 4px !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    width: 100%;
}

.heliox-skin button:hover, 
.heliox-skin input[type="submit"]:hover, 
.heliox-skin .button:hover, 
.heliox-skin #place_order:hover {
    background-color: var(--heliox-gold-hover) !important;
    transform: translateY(-2px);
}

/* =========================================
   5. SECTION COUPON
   ========================================= */

/* A. Barre "Cliquez ici..." */
.heliox-skin .woocommerce-form-coupon-toggle .woocommerce-info {
    background-color: white !important;
    border: 1px solid #d1d5db !important;
    border-left: 4px solid var(--heliox-gold) !important;
    padding: 20px !important;
    visibility: hidden; 
    position: relative;
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    min-height: 50px;
}

/* Traduction Barre Toggle */
.heliox-skin .woocommerce-form-coupon-toggle .woocommerce-info::after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px;
    content: "VOUS AVEZ UN COUPON ? CLIQUEZ ICI POUR SAISIR VOTRE CODE PROMO";
    font-size: 14px !important;
    font-family: var(--font-sans);
    color: var(--heliox-navy);
    display: flex;
    align-items: center;
    cursor: pointer;
    background: white;
    pointer-events: none;
}

/* B. Design du Formulaire (Boîte Blanche) */
.heliox-skin form.checkout_coupon {
    background: white !important;
    border: 1px solid #e5e7eb !important;
    padding: 25px !important;
    border-radius: var(--heliox-radius) !important;
    margin-bottom: 30px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* C. TRADUCTION DESCRIPTION LABEL */
.heliox-skin .e-coupon-anchor-description {
    visibility: hidden !important;
    position: relative !important;
    height: auto !important;
    min-height: 20px !important;
    margin-bottom: 10px !important;
    width: 100% !important;
    display: block !important;
}

.heliox-skin .e-coupon-anchor-description::after {
    visibility: visible !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    content: "Si vous disposez d'un code promo, saisissez-le ci-dessous.";
    font-size: 14px !important;
    color: #4b5563 !important;
    width: 100% !important;
    line-height: 1.5 !important;
    display: block !important;
    pointer-events: auto !important;
}

/* D. TRADUCTION PLACEHOLDER & BOUTON (Global) */

/* 1. Placeholder "Coupon code" -> "Code promo" */
.heliox-skin form.checkout_coupon input::placeholder {
    color: transparent !important;
    opacity: 0 !important;
}

/* On utilise le conteneur du champ pour le faux placeholder */
.heliox-skin form.checkout_coupon .form-row-first {
    position: relative;
}

.heliox-skin form.checkout_coupon .form-row-first::before {
    content: "Code promo";
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: #9ca3af;
    font-family: var(--font-sans);
    font-size: 14px;
    pointer-events: none;
    z-index: 10;
    display: block !important;
}

.heliox-skin form.checkout_coupon .form-row-first:focus-within::before {
    display: none !important;
}

/* 2. BOUTON "APPLY" -> "APPLIQUER" (Méthode VISIBILITY) */
/* On cible le bouton via sa classe spécifique */
.heliox-skin .e-apply-coupon {
    visibility: hidden !important; /* Cache le bouton et son texte (Apply) */
    position: relative !important;
    min-width: 140px !important;
    width: auto !important;
    border: none !important;
    padding: 0 !important;
}

/* On reconstruit le bouton visible avec ::after */
.heliox-skin .e-apply-coupon::after {
    visibility: visible !important; /* Révèle uniquement le pseudo-élément */
    content: "APPLIQUER";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--heliox-navy); /* Recrée le fond */
    color: white;
    font-size: 14px !important;
    font-family: var(--font-tech);
    letter-spacing: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    cursor: pointer;
}

.heliox-skin .e-apply-coupon:hover::after {
    background-color: var(--heliox-gold) !important;
}

/* E. MISE EN PAGE PC UNIQUEMENT (Min-width 768px) */
/* C'est ici qu'on force l'alignement et la taille identique */
@media (min-width: 768px) {
    
    /* Active Flexbox sur le formulaire pour mettre côte à côte */
    .heliox-skin form.checkout_coupon {
        display: flex !important;
        flex-wrap: nowrap !important; /* Empêche le retour à la ligne */
        align-items: stretch !important; /* Force la même hauteur */
        gap: 15px !important; /* Espace entre les deux */
    }

    /* Le conteneur de l'input */
    .heliox-skin form.checkout_coupon .form-row-first {
        flex-grow: 1 !important; /* Prend toute la largeur dispo */
        width: auto !important;
        float: none !important; /* Annule les floats Woo */
        margin: 0 !important;
    }

    /* Le conteneur du bouton */
    .heliox-skin form.checkout_coupon .form-row-last {
        width: auto !important;
        flex-shrink: 0 !important; /* Ne rétrécit pas */
        float: none !important;
        margin: 0 !important;
    }

    /* Force la hauteur du champ input */
    .heliox-skin form.checkout_coupon #coupon_code {
        height: 50px !important;
        width: 100% !important;
        border-radius: 4px !important;
    }

    /* Force la hauteur du bouton */
    .heliox-skin .e-apply-coupon {
        height: 50px !important;
        width: auto !important;
        margin: 0 !important;
        /* Le border radius est géré par ::after */
    }
}

/* 6. TABLEAUX & DIVERS */
.heliox-skin table.shop_table th {
    background-color: #f3f4f6 !important;
    color: var(--heliox-navy) !important;
    padding: 15px !important;
    border: none !important;
}
.heliox-skin table.shop_table td {
    padding: 15px !important;
    border-bottom: 1px solid #f3f4f6 !important;
}
.heliox-skin #payment {
    background: #f9fafb !important;
}
.heliox-skin #payment ul.payment_methods {
    border-bottom: 1px solid #d1d5db !important;
    padding-bottom: 20px !important;
}/* End custom CSS */