/*
 * Theme Name:  Hello Elementor Child
 * Template:    hello-elementor
 * Version:     1.0.0
 * Author:      Your Name
 * Description: A child theme for Hello Elementor
*/

/* Optional custom styles go here */
/* ------------------------------------------------------------------
---------------------------------------------------------------------
taille d'images dans le boutique
---------------------------------------------------------------------
----------------------------------------------------------------------*/

/* --- GLOBAL : MASQUER LA COLONNE PRIX/SOUS-TOTAL (DEVIS) --- */

/* 1. Masquer l'en-tête de la colonne "Prix" et "Sous-total" dans le panier et la validation */
.woocommerce-cart table.cart thead .product-price,
.woocommerce-checkout table.shop_table thead .product-price,
.woocommerce-cart-form__contents th.product-subtotal,
.woocommerce-checkout table.shop_table thead .product-subtotal {
    display: none;
}

/* 2. Masquer les cellules de prix de chaque article dans le corps du tableau */
.woocommerce-cart table.cart tbody td.product-price,
.woocommerce-checkout table.shop_table tbody td.product-price,
.woocommerce-cart-form__contents td.product-subtotal,
.woocommerce-checkout table.shop_table tbody td.product-subtotal {
    display: none !important;
}

/*------------------------------------------------------------------
# 1. STYLE GLOBAL DU FORMULAIRE DE DEVIS (.gss-quote-form)
--------------------------------------------------------------------*/

/* Conteneur principal du formulaire : style moderne et flottant */
.gss-quote-form {
    background-color: #ffffff;
    padding: 35px;
    
    margin: 40px 0; /* Remplace auto par 0 pour annuler le centrage horizontal */
    
    box-sizing: border-box;
    
    /* max-width: 800px; <--- ÉTAIT COMMENTÉ, mais doit rester absent */
    
    /* Vous pouvez ajouter les styles de carte si vous voulez un fond blanc qui s'étire 
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);*/
}

/* Titre du formulaire */
.gss-quote-form h3 {
    font-size: 30px;
    font-weight: 700;
    color: #0e2b45;
    text-align: center;
    margin-bottom: 5px;
}

/* Sous-titre descriptif */
.gss-quote-subtitle {
    font-size: 17px;
    color: #666666;
    text-align: center;
    margin-bottom: 40px;
}

/* Styles des champs input et textarea */
.gss-quote-form input[type="text"],
.gss-quote-form input[type="tel"],
.gss-quote-form input[type="email"],
.gss-quote-form textarea,
.gss-quote-form select {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid #dddddd;
    border-radius: 8px;
    font-size: 16px;
    color: #333333;
    background-color: #fcfcfc;
    box-shadow: none;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

/* Style des champs au focus */
.gss-quote-form input:focus,
.gss-quote-form textarea:focus,
.gss-quote-form select:focus {
    border-color: #0e2b45;
    box-shadow: 0 0 0 3px rgba(14, 43, 69, 0.1);
    outline: none;
    background-color: #ffffff;
}

/* Ajustement pour la grille des inputs */
.gss-quote-form > div {
    display: grid;
    gap: 25px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    margin-bottom: 25px;
}

/* Style du bouton Envoyer (Submit) */
.gss-quote-form button[type="submit"] {
    background-color: #b92f2e;
    color: #ffffff;
    border: none;
    padding: 16px 30px;
    font-size: 18px;
    font-weight: 700;
    border-radius: 8px;
    width: 100%;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.gss-quote-form button[type="submit"]:hover {
    background-color: #0e2b45;
    color: #ffffff;
    transform: translateY(-2px);
}

/* ==============================================
   # 2. TABLEAU DEVIS : STYLE CARTE SÉPARÉE (EN-TÊTE INCLUS) - CORRIGÉ
   ============================================== */

/* Supprime toutes les bordures par défaut du tableau */
.shop_table.woocommerce-cart-form__contents,
.shop_table.woocommerce-cart-form__contents tbody td {
    border: none !important;
    background: none !important;
}

/* 1. Style pour l'en-tête (THEAD) comme une carte séparée (Carte No. 1) */
.shop_table.woocommerce-cart-form__contents thead {
    /* Rétablit l'effet carte sur l'en-tête */
    background-color: #0e2b45 !important;
    color: #ffffff;
    border: none !important;
    border-radius: 8px 8px 0 0; /* Coins arrondis seulement en haut */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    display: block !important; /* Force l'en-tête à être un bloc au-dessus des lignes */
    margin-bottom: 5px; /* Petit espace sous l'en-tête */
}

/* Force la ligne de l'en-tête à utiliser Flexbox pour l'alignement des colonnes */
.shop_table.woocommerce-cart-form__contents thead tr {
    display: flex !important; 
    align-items: center;
    width: 100%;
    padding: 15px !important; /* Padding intérieur pour le contenu du titre */
    border: none !important;
    box-shadow: none !important;
}

/* Style des colonnes de l'en-tête */
.shop_table.woocommerce-cart-form__contents thead th.product-name,
.shop_table.woocommerce-cart-form__contents thead th.product-quantity,
.shop_table.woocommerce-cart-form__contents thead th.product-thumbnail,
.shop_table.woocommerce-cart-form__contents thead th.product-remove{
    padding: 0 !important; 
    width: auto !important;
     border: none !important;
    /* Styles des titres (Produit/Quantité) */
    font-size: 1.1em;
    font-weight: 700;
    text-transform: uppercase;
}

.shop_table.woocommerce-cart-form__contents thead th.product-name {
    /* Ligne de séparation dans l'en-tête */
    padding-right: 25px !important;
    flex-grow: 1; 
    text-align: left !important;
}
.shop_table.woocommerce-cart-form__contents thead th.product-quantity {
    padding-left: 25px !important;
    text-align: right !important;
    width: 120px; /* Conserve la largeur fixe pour aligner avec les TD */
    flex-shrink: 0;
}

/* 2. Style pour chaque ligne de produit (TR) comme une carte séparée (Cartes No. 2, 3, etc.) */
.shop_table.woocommerce-cart-form__contents tbody tr {
    /* Fond blanc et bordure subtile pour l'effet carte */
    background-color: #ffffff; 
    border: 1px solid #e0e0e0; 
    border-radius: 8px; /* Coins arrondis */
    margin-bottom: 15px !important; 
    
    /* Utilise Flexbox pour aligner les TD (colonnes) */
    display: flex !important;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    align-items: center;
}

/* 1. Gère la LIGNE d'action (le TR qui contient le bouton) */
.shop_table.woocommerce-cart-form__contents .actions {
    /* DOIT redevenir une ligne de tableau pour prendre la largeur du tableau */
    display: table-row !important; 
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

/* 2. Gère la CELLULE (le TD) qui contient le bouton */
.shop_table.woocommerce-cart-form__contents .actions td {
    /* Force le TD à reprendre sa place et à prendre toute la largeur */
    display: table-cell !important; /* <--- CRITIQUE : Pour la pleine largeur dans le tableau */
    width: 100% !important;
    
    padding: 30px 0 0 0 !important;
    border-top: none !important;

    /* Utilise Flexbox UNIQUEMENT pour ALIGNER le contenu (le bouton) à l'intérieur du TD */
    text-align: right !important; /* Fallback */
    display: flex !important;
    justify-content: flex-end !important; /* Pousse le bouton à l'extrême droite */
    align-items: center !important;
}



/* ==============================================
   # 3. DESIGN DES ÉLÉMENTS DANS LA CARTE (TD/Colonnes)
   ============================================== */

/* Applique la même logique de taille aux cellules TD qu'aux TH */
.shop_table.woocommerce-cart-form__contents td {
    display: flex;
    align-items: center;
    padding: 0 15px !important;
    box-sizing: border-box;
}

/* 1. Colonne du bouton de suppression (X) */
.shop_table.woocommerce-cart-form__contents td.product-remove {
    width: 30px;
    padding: 0 !important;
    justify-content: center;
    flex-shrink: 0;
}

/* 2. Colonne de l'image (Vignette) */
.shop_table.woocommerce-cart-form__contents td.product-thumbnail {
    width: 100px !important;
    padding-left: 0 !important;
    padding-right: 15px !important;
    flex-shrink: 0;
}

/* 3. Colonne du Produit (Nom et détails) */
.shop_table.woocommerce-cart-form__contents td.product-name {
    flex-grow: 1;
    border-right: 1px solid #e0e0e0;
    padding-right: 25px !important; 
    text-align: left !important; 
    display: block; 
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* 4. Colonne de la Quantité */
.shop_table.woocommerce-cart-form__contents td.product-quantity {
    width: 120px;
    flex-shrink: 0;
    padding-left: 25px !important; 
    text-align: right !important;
    justify-content: flex-end; /* Aligne le contenu (la boîte de quantité) à droite */
    display: flex; 
    align-items: center;
}


/* Style du nom du produit */
.shop_table.woocommerce-cart-form__contents td.product-name a {
    color: #0e2b45 !important;
    font-weight: 700 !important;
    text-decoration: none;
}

/* Style des détails de personnalisation (position de marquage, etc.) */
.shop_table.woocommerce-cart-form__contents .product-name dl,
.shop_table.woocommerce-cart-form__contents .product-name small {
    font-size: 0.9em;
    color: #888888;
    margin-top: 5px;
}

/* Bouton Supprimer (Rendre l'icône X rouge et visible) */
.shop_table.woocommerce-cart-form__contents .product-remove a {
font-size: 1.5em;
    height: 1em;
    width: 1em;
    text-align: center;
    line-height: 1;
    border-radius: 100%;
    color: #cacaca !important;
    text-decoration: none;
    font-weight: 700;
    border: 0;
}
.shop_table.woocommerce-cart-form__contents .product-remove a:hover {
    opacity: 1;
}

/*------------------------------------------------------------------
# 4. MEDIA QUERIES (ADAPTATION MOBILE)
--------------------------------------------------------------------*/
@media only screen and (max-width: 600px) {
    
    /* Transforme le tableau en liste à une colonne */
    .shop_table.woocommerce-cart-form__contents,
    .shop_table.woocommerce-cart-form__contents tbody,
    .shop_table.woocommerce-cart-form__contents tr,
    .shop_table.woocommerce-cart-form__contents thead {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    /* Style la carte de l'en-tête sur mobile */
    .shop_table.woocommerce-cart-form__contents thead {
        margin-bottom: 20px;
        border-radius: 8px; /* Coins arrondis partout sur mobile */
    }
    
    /* Les lignes de produit doivent aussi être en block pour s'empiler */
    .shop_table.woocommerce-cart-form__contents tbody tr {
        display: block !important;
        margin-bottom: 20px !important;
        padding-bottom: 20px;
        border-bottom: 1px solid #e0e0e0;
    }
    
    /* Cache les cellules pour ne manipuler que les lignes (Sauf l'en-tête) */
    .shop_table.woocommerce-cart-form__contents tbody td {
        display: block;
        width: 100% !important;
        text-align: left !important;
        padding: 5px 0 !important;
        border-top: none !important;
        border-right: none !important; /* Supprime la bordure verticale sur mobile */
    }



    .shop_table.woocommerce-cart-form__contents td.product-remove {
        order: 1;
        position: absolute;
        top: 15px;
        right: 15px;
        width: auto;
    }
    
    /* Le champ de quantité revient à gauche sur mobile */
    .shop_table.woocommerce-cart-form__contents .quantity {
        margin-left: 0;
        margin-right: auto;
    }
}
/* SÉLECTEUR CIBLANT DIRECTEMENT L'IMAGE DU PRODUIT DANS LE PANIER */
.woocommerce #content table.cart img,
.woocommerce table.cart img,
.woocommerce-page #content table.cart img,
.woocommerce-page table.cart img {
    /* Styles pour forcer une taille et un aspect précis */
    width: 120px;       /* Largeur de l'image (doit correspondre à la largeur de td.product-thumbnail) */
    height: 120px;      /* Hauteur de l'image (pour la rendre carrée) */
    object-fit: contain; /* Assure que l'image est visible sans être déformée */
    border-radius: 4px; /* Coins légèrement arrondis pour l'image */
    
    /* Ajout pour l'effet de survol */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Doucit l'animation */
}
/* EFFET DE SURVOL (HOVER) POUR L'IMAGE */
.woocommerce #content table.cart img:hover,
.woocommerce table.cart img:hover,
.woocommerce-page #content table.cart img:hover,
.woocommerce-page table.cart img:hover {
    transform: scale(1.07); /* Agrandit légèrement l'image */
    cursor: pointer; /* Indique que l'image est interactive */
}
/* --- BOUTON D'ACTION (Mettre à jour la liste) - Harmonisation forcée --- */

/* 1. Conteneur (positionnement) */
.woocommerce-cart-form__contents .actions {
    text-align: right !important;
    padding-top: 30px !important;
}

/* 2. Style du bouton "Mettre à jour la liste" (État normal) */
.woocommerce-cart-form__contents .actions button.button[name="update_cart"] {
    display: none;
    background-color: #b92f2e !Important; 
    color: #ffffff !Important;
    border: none !Important;
    
    padding: 16px 30px !Important; 
    font-size: 18px !Important; 
    font-weight: 700 !Important;
    border-radius: 8px !Important;
    
    width: auto !Important; 
    cursor: pointer;
    
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* 3. Effet de survol (Hover) du bouton */
.woocommerce-cart-form__contents .actions button.button[name="update_cart"]:hover {
    background-color: #0e2b45 !Important; 
    color: #ffffff !Important;
    
    transform: translateY(-2px); 
}

/*------------------------------------------------------------------
# 5. STYLE MODERNISÉ DU CHAMP DE QUANTITÉ (+/-) - CORRIGÉ FINAL
--------------------------------------------------------------------*/

/* 1. Aligne la BOÎTE (.quantity) à l'extrême droite de la cellule */
.shop_table.woocommerce-cart-form__contents .quantity {
    display: block; 
    margin-left: auto; /* Pousse le bloc vers la droite */
    margin-right: 0;
    
    max-width: 80px;
    height: 38px;
    margin-top: 0; 
    border: 1px solid #cccccc;
    border-radius: 4px;
    overflow: hidden;
}

/* 2. Centre le TEXTE (.qty) à l'intérieur de sa propre boîte */
.shop_table.woocommerce-cart-form__contents .quantity .qty {
    height: 38px;
    padding: 5px 0;
    width: 100%;
    text-align: center; /* Le texte est centré */
    border: none;
    font-size: 1em;
    font-weight: 500;
}
/* Ajustements pour les boutons de quantité (si votre thème les utilise) */
.shop_table.woocommerce-cart-form__contents .quantity .button {
    float: left;
    width: 30px;
    height: 38px;
    background-color: #f8f8f8;
    color: #0e2b45;
    border: none;
    line-height: 1;
}

/*------------------------------------------------------------------
# 6. AMÉLIORATIONS DES CHAMPS DE PERSONNALISATION
--------------------------------------------------------------------*/
/* (Les styles de personnalisation sont conservés tels quels) */

/* ... (Règles de personnalisation du formulaire) ... */

.grosafe-customization-options {
    margin-top: 30px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background-color: #fcfcfc;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    width: 100%;
    max-width: 500px;
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
}
.customization-block-title {
    font-size: 1.5em;
    color: #0e2b45;
    text-align: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}
.grosafe-customization-options label {
    font-weight: 700;
    margin-bottom: 8px;
    font-size: 1.05em;
    color: #0e2b45;
}
.grosafe-customization-options select {
    width: 100%;
    height: 48px;
    padding: 10px 15px;
    border: 1px solid #cccccc;
    border-radius: 6px;
    background-color: #ffffff;
}
.grosafe-customization-options select:hover,
.grosafe-customization-options select:focus {
    border-color: #0e2b45;
    box-shadow: 0 0 0 2px rgba(14, 43, 69, 0.1);
}
.logo-upload-container input[type="file"] {
    position: absolute;
    opacity: 0; 
    width: 0.1px;
    height: 0.1px;
    pointer-events: none;
}
.upload-button-styled {
    display: inline-block;
    padding: 10px 15px;
    border: 2px solid #0e2b45; 
    border-radius: 4px;
    background-color: #0e2b45;
    color: #fff !important; 
    cursor: pointer;
    font-weight: 700;
    transition: background-color 0.2s, border-color 0.2s;
    margin-right: 15px; 
}
.upload-button-styled:hover {
    background-color: #1a4f78;
    border-color: #1a4f78;
    color: #fff;
}
.file-name-info {
    display: inline-block;
    padding: 10px 0;
    font-size: 0.9em;
    color: #666;
}
.file-name-info.file-selected {
    color: #28a745 !important; 
    font-weight: 600;
}
.position-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.position-checkbox-group input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.position-checkbox-group label {
    display: block;
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 500;
    color: #333;
    transition: all 0.2s ease-in-out;
    text-align: center;
    margin-bottom: 0; 
}
.position-checkbox-group label:hover {
    border-color: #0e2b45;
    background-color: #f0f0f0;
}
.position-checkbox-group input[type="checkbox"]:checked + label {
    border-color: #0e2b45;
    background-color: #0e2b45;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
@media only screen and (max-width: 600px) {
    .position-checkbox-group {
        flex-direction: column;
    }
    .position-checkbox-group label {
        width: 100%;
        box-sizing: border-box;
    }
    .gss-quote-form {
        padding: 20px;
    }
    .gss-quote-form > div {
        gap: 20px;
        grid-template-columns: 1fr;
    }
}
form.cart .single_variation_wrap .woocommerce-variation-add-to-cart {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin-top: 25px;
}
form.cart .single_variation_wrap .quantity {
    margin-bottom: 15px;
    width: 100px;
    margin-left: 0;
}
form.cart .single_variation_wrap .single_add_to_cart_button {
    width: auto;
    min-width: 200px;
    padding: 12px 25px;
    font-size: 1.1em;
    height: auto;
}
/* =======================================
  STYLE DU BOUTON "CONTINUER LA SÉLECTION" (Retour au site)
  ======================================= */

/* Conteneur pour s'assurer que le bouton est bien placé (dans votre cas, au-dessus du formulaire) */
.woocommerce .return-to-shop-wrapper {
    margin-bottom: 20px; /* Ajoute de l'espace sous le bouton et le sépare du tableau/formulaire */
}

/* Style du bouton lui-même */
.woocommerce .button.wc-backward {
    /* Assure que le bouton est visible et stylé */
    display: inline-block !important; 
    
    /* COULEURS GROSAFE - Pout le fond du bouton */
    background-color: #0E2B45 !important;
    color: #ffffff !important;
    border: none !important;
    
    /* Styles généraux */
    border-radius: 4px !important;
    padding: 10px 18px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    
    /* Marge */
    margin-right: 15px !important;
    margin-top: 10px; /* Espace au-dessus */
    
    transition: background-color 0.3s ease;
}

/* Effet au survol (Rouge/Marron d'accentuation) */
.woocommerce .button.wc-backward:hover {
    background-color: #b92f2e !important; 
    color: #ffffff !important;
}
/*------------------------------------------------------------------------------
----------------------- boîte de notification----------------------------------- 
------------------------------------------------------------------------------*/
.woocommerce-message {
 position: fixed !important; 
 top: auto !important;
 bottom: 20px !important;
 left: auto !important;
 right: 20px !important;
 transform: none !important;
 z-index: 99999 !important;

    /* STRUCTURE INTERNE ET COULEURS DE FOND */
    display: flex !important; 
    align-items: center !important; 
    justify-content: space-between !important;

    /* Styles visuels */
 width: 90%;
 max-width: 450px;
 padding: 15px 20px;
 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
 border-radius: 8px;
 background-color: #ffffff !important; /* Fond Blanc pour la clarté */
 border-top: 3px solid #0e2b45 !important;
 border-left: none !important; 
    padding-left: 20px;
}

/* Texte du message */
.woocommerce-message p {
    flex-grow: 1;
    margin: 0; 
    padding-right: 10px;
    font-size: 0.95em; /* Taille légèrement réduite pour le mobile */
    color: #333333; /* Texte sombre */
}

/* =======================================
STYLE DU BOUTON (Couleurs Grosafe : Bleu Marine)
 ======================================= */
.woocommerce-message .button.wc-forward {
    background-color: #b92f2e !Important; 
    color: #ffffff !Important;
    border: none !Important;
    font-size: 15px !Important; 
    font-weight: 700 !Important;
    border-radius: 8px !Important;
    
    width: auto !Important; 
    cursor: pointer;
    
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.woocommerce-message .button.wc-forward:hover {
 background-color: #0e2b45 !Important; 
    color: #ffffff !Important;
    transform: translateY(-2px); }
/* =======================================
 CORRECTION DU TICK VERT (Redimensionnement Forcé)
 ======================================= */
.woocommerce-message::before {
    /* Rétablit l'icône originale */
    content: inherit !important; 
    display: inline-block !important;

    /* STYLISATION ET REDIMENSIONNEMENT DU TICK */
    font-size: 1.2em !important; 
    line-height: 1 !important; 
    vertical-align: middle !important; 
    margin-right: 8px !important; 
    color: #0e2b45 !important; /* Conserver le vert de succès (ou le #17a2b8 si vous voulez le turquoise) */
}

.woocommerce-message::after { 
    content: none !important;
}


/* =========================================
 4. CORRECTION GLOBALE POUR ANIMATION JS (+1)
 ========================================= */
body {
    position: relative !important; 
}
html, body {
    overflow-x: visible !important;
    overflow: visible !important;
    transform: none !important;
    filter: none !important;
}
.fly-to-cart-plus-one {
    position: absolute;
    display: block;
    line-height: 1;
    white-space: nowrap;
}