/* ══════════════════════════════════════════════════════════════════
   COMBI — CORRECTIF PANIER / CHECKOUT — 31 août 2026
   Chargé APRÈS common.css et après le CSS des plugins (PayPal/PPCP)
   pour reprendre la main sur le bloc de paiement.

   Défauts corrigés (audit Vision Humain mobile 390x844) :
   1. Espace latéral : paddings empilés (body+container+carte+ul+li+box)
   2. Bloc carte bancaire au fond lavande = hors charte
   3. Grille Date d'expiration / CVV cassée, champ MM/AA tronqué
   4. Deux boutons #place_order visibles (PAYER + COMMANDER)
   5. Débordement horizontal 44px (select pays de select2)
   6. Blancs verticaux : 40px sous le header, 80px avant le footer
   7. Ligne fantôme sous la dernière ligne du panier
   8. Prix produit orphelin en 2e ligne, aligné à gauche
   ══════════════════════════════════════════════════════════════════ */

/* ─── 5. DÉBORDEMENT HORIZONTAL ────────────────────────────────────
   Le <select> pays masqué par select2 gardait sa largeur pleine et
   poussait la page de 44px. Masquage a11y standard. */
.woocommerce-checkout select.select2-hidden-accessible {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.woocommerce-checkout .select2-container { max-width: 100% !important; }

/* ─── 4. UN SEUL BOUTON DE COMMANDE ────────────────────────────────
   PPCP pose .ppcp-hidden sur le bouton standard quand il affiche le
   sien (.ppcp-dcc-order-button) : on applique enfin ce masquage.
   Les deux portent id="place_order" donc le style du thème s'applique
   déjà au bouton restant, quel qu'il soit. */
.woocommerce-checkout #place_order.ppcp-hidden,
.woocommerce-checkout button#place_order.ppcp-hidden {
    display: none !important;
}

/* ─── 2 & 3. BLOC DE PAIEMENT : CHARTE + GRILLE ────────────────────
   Le fond lavande vient du CSS PayPal. On repasse en crème charte. */
.woocommerce-checkout .payment_box,
.woocommerce-checkout div.payment_box,
.woocommerce-checkout li.wc_payment_method > .payment_box {
    background: var(--cream-2, #F7F2EA) !important;
    border: 1px solid var(--gray-light, #E4DBD1) !important;
    border-radius: 8px !important;
    color: var(--charcoal, #2C2421) !important;
}
/* l'ergot triangulaire au-dessus du bloc suit le même fond */
.woocommerce-checkout .payment_box::before,
.woocommerce-checkout .payment_box::after {
    border-bottom-color: var(--cream-2, #F7F2EA) !important;
    border-color: transparent transparent var(--cream-2, #F7F2EA) !important;
}
/* radios : bleu système -> charte */
.woocommerce-checkout .wc_payment_methods input[type="radio"] {
    accent-color: var(--charcoal, #2C2421);
}
/* méthode sélectionnée : liseré charte au lieu du cadre noir 2px */
.woocommerce-checkout li.wc_payment_method {
    border: 1px solid var(--gray-light, #E4DBD1) !important;
    border-radius: 10px !important;
}
.woocommerce-checkout li.wc_payment_method:has(input:checked) {
    border-color: var(--charcoal, #2C2421) !important;
}

/* ─── TYPOGRAPHIE : aligner les libellés de paiement sur la charte ── */
.woocommerce-checkout .wc_payment_method > label {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--charcoal, #2C2421) !important;
}

/* ══════════════════ MOBILE ══════════════════════════════════════ */
@media (max-width: 600px) {

    /* ─── 1. ESPACE LATÉRAL : on déstocke les paddings empilés ───── */
    .cart-page > .container,
    .checkout-page > .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .cart-item { padding: 14px !important; }
    .cart-summary { padding: 18px 16px !important; }
    .form-section { padding: 18px 14px !important; }
    .order-summary { padding: 18px 16px !important; }

    /* le nid de poupées russes du bloc paiement :
       ul 16 + li 20 + payment_box 14.7 = 50.7px de chaque côté
       -> champ carte à 197px sur 390. Ramené à ~24px -> ~285px. */
    .woocommerce-checkout ul.wc_payment_methods {
        padding: 0 !important;
        margin: 0 !important;
    }
    .woocommerce-checkout li.wc_payment_method {
        padding: 12px !important;
        margin-bottom: 10px !important;
    }
    .woocommerce-checkout .payment_box {
        padding: 14px 12px !important;
        margin: 10px 0 0 !important;
    }
    .woocommerce-checkout .wc-credit-card-form,
    .woocommerce-checkout .payment_box fieldset {
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    /* ─── 3. Date d'expiration / CVV : une colonne, plus de troncature */
    .woocommerce-checkout .wc-credit-card-form .form-row-first,
    .woocommerce-checkout .wc-credit-card-form .form-row-last,
    .woocommerce-checkout .payment_box .form-row-first,
    .woocommerce-checkout .payment_box .form-row-last {
        width: 100% !important;
        float: none !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    .woocommerce-checkout .payment_box .form-row input,
    .woocommerce-checkout .wc-credit-card-form input {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    /* le label ne doit plus casser sur 3 lignes */
    .woocommerce-checkout .payment_box .form-row label {
        white-space: normal !important;
        line-height: 1.35 !important;
        margin-bottom: 6px !important;
    }

    /* ─── 6. BLANCS VERTICAUX ─────────────────────────────────────── */
    .cart-page,
    .checkout-page {
        padding-top: 20px !important;
        padding-bottom: 32px !important;
    }
    .cart-page .sub { margin-bottom: 22px !important; }
    .cart-summary h3,
    .order-summary h3 { margin-top: 0 !important; margin-bottom: 14px !important; }
    .form-section { margin-bottom: 16px !important; }

    /* ─── 7. LIGNE FANTÔME sous la dernière ligne du panier ───────── */
    .cart-items .cart-item:last-child { margin-bottom: 0 !important; }

    /* ─── 8. PRIX : sur la ligne du titre, aligné à droite ──────────
       Spécificité .cart-page .cart-items .cart-item : les règles de
       common.css (l.1577/1985) sont en .cart-page .cart-item ... et
       gagnaient sur un simple .cart-item. */
    .cart-page .cart-items .cart-item {
        grid-template-columns: 72px 1fr auto !important;
        gap: 10px !important;
        align-items: start !important;
        padding: 12px !important;
    }
    .cart-page .cart-items .cart-item .img { width: 72px !important; }
    .cart-page .cart-items .cart-item .info {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }
    /* le titre longue traîne tient en 3 lignes, plus de "..." */
    .cart-page .cart-item .info .name {
        -webkit-line-clamp: 3 !important;
        max-height: none !important;
    }
    .cart-page .cart-items .cart-item .price-col {
        grid-column: 3 !important;
        grid-row: 1 !important;
        align-self: start !important;
        text-align: right !important;
        margin-top: 0 !important;
        padding: 0 !important;
        white-space: nowrap !important;
    }
    .cart-page .cart-items .cart-item .price-now,
    .cart-page .cart-items .cart-item .price-now * { font-size: 18px !important; }

    /* ─── CASE CGV : le texte ne doit plus repasser sous la case ────
       Pas de flex ici : l'astérisque <abbr class="required"> devient
       un flex item et part se coller au bord droit. Case en absolu +
       retrait de texte : le "*" reste collé à "du site". */
    .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label.checkbox,
    .woocommerce-checkout .validate-required label.checkbox {
        display: block !important;
        position: relative !important;
        padding-left: 30px !important;
        line-height: 1.45 !important;
    }
    .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label.checkbox input[type="checkbox"],
    .woocommerce-checkout .validate-required label.checkbox input[type="checkbox"] {
        position: absolute !important;
        left: 0 !important;
        top: 2px !important;
        margin: 0 !important;
    }

    /* ─── DOUBLE SÉPARATEUR avant le Total ───────────────────────── */
    .cart-summary .coupon-section { border-bottom: none !important; margin-bottom: 4px !important; }
}

/* ─── 7bis. LIGNE FANTÔME aussi en desktop ────────────────────────── */
.cart-items .cart-item:last-child { margin-bottom: 0 !important; }

/* ─── DESKTOP : la colonne produit ne doit plus laisser un trou ──── */
@media (min-width: 901px) {
    .cart-page { padding-bottom: 48px !important; }
    .checkout-page { padding-bottom: 48px !important; }
    .cart-summary .coupon-section { border-bottom: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   ACCUEIL — ESPACE BLANC ENTRE LES SECTIONS (mobile)
   Mesuré le 31/08 en 390x844 :
     .products-grid padding-bottom 60px + .story margin-top 80px
     = 140px de blanc entre la grille produits et la section histoire.
     .cats-grid 60px + .section-head 24px = 84px.
   Sur un écran de 844px de haut, 140px = un sixième de l'écran vide.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .cats-grid,
    .products-grid { padding-bottom: 36px !important; }

    /* .story a son propre fond crème : la marge du haut crée une
       bande blanche visible. 80px -> 24px, l'écart est porté par le
       padding interne de la section. */
    .story {
        margin-top: 24px !important;
        padding: 44px 0 !important;
    }
    .trust-signals { padding-top: 26px !important; padding-bottom: 26px !important; }
}

/* ─── DOUBLE SÉPARATEUR sous la dernière ligne du récap checkout ────
   common.css l.1470 : .dtc-checkout .order-item:last-of-type{border-bottom:none}
   ne matche jamais. :last-of-type raisonne par TYPE d'élément (div) :
   le dernier div frère dans .order-summary est .totals, pas .order-item.
   La bordure du produit restait donc EN PLUS du border-top de .totals
   -> deux traits parallèles à 8px. On cible la vraie dernière ligne. */
.dtc-checkout .order-summary .order-item:has(+ .totals),
.dtc-checkout .order-summary .order-item:last-child {
    border-bottom: none !important;
}