/* ============================================
   TUNNEL DE COMMANDE — PENSEZ SAUVAGE KRAFT
   css/cart.css
   Chargé uniquement sur is_cart() et is_checkout()
   ============================================ */

/* ── BLOC LIVRAISON (remplace le mini-panier sur panier et checkout) ── */

.ps-bloc-livraison {
    position: sticky;
    top: 80px;
    width: 335px;
    flex-shrink: 0;
    align-self: flex-start;
    z-index: var(--ps-z-overlay-flottant);   /* 350 : sous le voile, cohérent avec le mini-panier */
    font-family: var(--ps-police-titre);
    transition: top 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: block;
}

/* Fond kraft + voile mauve sur le cadre livraison */
.ps-livraison-cadre {
    background: url('../images/kraft-long.jpg') var(--ps-kraft-couleur) !important;
    background-size: 4% !important;
    background-attachment: scroll !important;
    position: relative !important;
}

.ps-livraison-cadre::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(180, 160, 200, 0.18);
    pointer-events: none;
    z-index: 0;
}

.ps-livraison-cadre .ps-minipanier-inner {
    position: relative;
    z-index: 1;
}

/* Tunnel (panier / checkout / merci) : autoriser le retour à la ligne du
   conteneur flex pour que l'aside livraison puisse refluer SOUS le central
   quand il ne tient plus à côté. .ps-contenu-flex est en nowrap par défaut
   (défini dans shop.css, qu'on ne touche pas) ; on ouvre le wrap uniquement
   sur les pages tunnel via les classes body WooCommerce.
   .woocommerce-checkout couvre aussi la page merci (order-received). */
.woocommerce-cart .ps-contenu-flex,
.woocommerce-checkout .ps-contenu-flex {
    flex-wrap: wrap;
}

/* Titre de section intermédiaire */
.ps-livraison-titre-section {
    font-family: var(--ps-police-titre);
    color: var(--ps-bordure-fonce);
    font-size: 1.35rem;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    margin: 1.2rem 0 0.6rem;
    font-weight: 400; /* neutralise le gras par défaut du <h2> (intitulé sémantique) */
}

/* Les 2 intitulés du bloc livraison sont des <h2> (SEO/a11y). « Frais
   d'expédition » neutralise son gras juste au-dessus ; « Délais de livraison »
   réutilise .ps-minipanier-titre-texte (font-size/weight déjà fixés) et n'a
   besoin que d'annuler la marge basse UA du <h2>. Scopé .ps-livraison-cadre
   pour ne PAS toucher le mini-panier ni la page de confirmation (mêmes classes,
   restés en <span>). Rendu identique à avant. */
.ps-livraison-cadre .ps-minipanier-titre-texte {
    margin-bottom: 0;
}

/* Liste tarifs avec puces rondes */
.ps-livraison-tarifs {
    list-style: disc;
    padding-left: 1.2rem;
    margin: 0.4rem 0 0;
}

.ps-livraison-tarifs li {
    margin-bottom: 0.4rem;
    font-size: 1.05rem;
    color: var(--ps-texte);
    font-family: var(--ps-police-titre);
}

/* ── TABLEAU PANIER ────────────────────────── */

/* Encadré kraft autour du tableau */
.woocommerce-cart-form {
    border: var(--ps-bordure-medium);
    border-image: url('../images/border.png') 24 24 / 20px 20px / 0.1rem 0.2rem round;
    padding: 1rem;
    margin-bottom: 1.5rem;
    background: rgba(200, 168, 130, 0.15);
}

.woocommerce-cart-form .shop_table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--ps-police-titre);
    color: var(--ps-texte);
    background: transparent !important;
}

/* En-têtes */
.woocommerce-cart-form .shop_table thead th {
    font-family: var(--ps-police-titre);
    color: var(--ps-bordure-fonce);
    font-weight: 400;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: transparent !important;
    border-bottom: 2px solid rgba(76, 53, 28, 0.4);
    padding: 0.5rem 0.6rem;
}

/* Lignes produits */
.woocommerce-cart-form .woocommerce-cart-form__cart-item {
    background: transparent !important;
    border-bottom: 1px solid rgba(76, 53, 28, 0.15);
    font-family: var(--ps-police-titre);
    color: var(--ps-texte);
}

.woocommerce-cart-form .woocommerce-cart-form__cart-item td {
    padding: 0.8rem 0.6rem;
    vertical-align: middle;
    background: transparent !important;
}

/* Lignes alternées légères */
.woocommerce-cart-form .woocommerce-cart-form__cart-item:nth-child(even) {
    background: rgba(200, 168, 130, 0.12) !important;
}

/* Image vignette — plus grande */
.woocommerce-cart-form .product-thumbnail img {
    border: 1px solid rgba(76, 53, 28, 0.3);
    width: 90px !important;
    height: 90px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block;
    aspect-ratio: 1 / 1;
}

/* Nom produit */
.woocommerce-cart-form .product-name a {
    font-family: var(--ps-police-titre);
    color: var(--ps-texte) !important;
    text-decoration: none;
    font-size: 1.1rem;
}

.woocommerce-cart-form .product-name a:hover {
    color: var(--ps-orange) !important;
}

/* Grammage sous le nom (ex. « Sachet de 25 graines ») : passe à la ligne,
   même brun que le prix (var --ps-prix) pour la cohérence visuelle,
   plus petit que le nom. Hors media query : vaut sur le tableau desktop
   ET les cartes mobiles. */
.ps-cart-grammage {
    display: block;
    font-size: 0.85em;
    color: var(--ps-prix);
    margin-top: 0.15rem;
    line-height: 1.3;
}

/* Prix et sous-total */
.woocommerce-cart-form .product-price,
.woocommerce-cart-form .product-subtotal {
    font-family: var(--ps-police-titre);
    color: var(--ps-texte);
}

.woocommerce-cart-form .product-price .woocommerce-Price-amount,
.woocommerce-cart-form .product-subtotal .woocommerce-Price-amount {
    color: var(--ps-prix);
    font-weight: 400;
    font-size: 1.1rem;
}

/* Bouton suppression : icône poubelle perso (images/poubelle.svg) recolorable
   via masque CSS — brun au repos (var --ps-bordure-fonce), rouge au survol/focus
   (var --ps-rouge-alerte). Le « × » natif WC reste masqué (font-size:0 +
   color:transparent). Règle hors media query → vaut sur le tableau (desktop)
   ET les cartes (mobile). -webkit-mask requis pour Safari/Mac. */
.woocommerce-cart-form .product-remove a.remove {
    border: none !important;
    text-decoration: none;
    display: block;
    /* Icône agrandie à l'équivalent 35px, exprimée en rem (racine 16px).
       Le mask est en contain → l'icône remplit la boîte, donc width/height
       portent la taille visible ET la cible tactile. */
    width: 2.1875rem;
    height: 2.1875rem;
    font-size: 0 !important;
    color: transparent !important;
    -webkit-mask: url('../images/poubelle.svg') no-repeat center / contain;
    mask: url('../images/poubelle.svg') no-repeat center / contain;
    background-color: var(--ps-bordure-fonce) !important;
    opacity: 0.8;
}

.woocommerce-cart-form .product-remove a.remove:hover,
.woocommerce-cart-form .product-remove a.remove:focus {
    background-color: var(--ps-rouge-alerte) !important;
    opacity: 1;
}

/* ── SÉLECTEUR QUANTITÉ +/− ── */
.ps-qty-wrap {
    display: flex;
    align-items: center;
    border: var(--ps-bordure-fine);
    border-radius: var(--ps-radius);
    overflow: hidden;
    width: fit-content;
    background: var(--ps-beige-clair);
}

.ps-qty-btn {
    font-family: var(--ps-police-titre) !important;
    background: rgba(76, 53, 28, 0.15) !important;
    border: none !important;
    border-image: none !important;
    color: var(--ps-bordure-fonce) !important;
    font-size: 1.4rem !important;
    width: 34px !important;
    height: 36px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    line-height: 1 !important;
    transition: background 0.15s !important;
}

.ps-qty-btn:hover {
    background: rgba(76, 53, 28, 0.3) !important;
    color: var(--ps-texte) !important;
}

.ps-qty-input {
    font-family: var(--ps-police-titre) !important;
    background: transparent !important;
    border: none !important;
    border-left: 1px solid rgba(76, 53, 28, 0.3) !important;
    border-right: 1px solid rgba(76, 53, 28, 0.3) !important;
    border-radius: 0 !important;
    color: var(--ps-texte) !important;
    width: 44px !important;
    height: 36px !important;
    text-align: center !important;
    font-size: 1rem !important;
    padding: 0 !important;
    -moz-appearance: textfield !important;
}

.ps-qty-input::-webkit-outer-spin-button,
.ps-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ── BOUTONS KRAFT (uniformes sur toutes les actions) ── */
/*
   Cible : "Appliquer le code promo", "Mettre à jour le panier",
   "Valider la commande" — tous doivent avoir le même style kraft
   que .ps-menu-catalogue-ul li a, sans fond violet/bleu natif.
*/
.woocommerce-checkout #place_order,
.woocommerce-cart .wc-proceed-to-checkout .checkout-button,
.woocommerce-cart .woocommerce a.button,
.woocommerce-cart .woocommerce button.button,
.woocommerce-checkout .woocommerce a.button,
.woocommerce-checkout .woocommerce button.button {
    font-family: var(--ps-police-titre) !important;
    color: var(--ps-texte) !important;
    background: url('../images/kraft-long.jpg') var(--ps-kraft-couleur) !important;
    background-size: 6% !important;
    background-attachment: fixed !important;
    border: 2px solid var(--ps-bordure-fonce) !important;
    border-image: url('../images/border.png') 24 24 / 12px 15px / 0.05rem round !important;
    border-radius: 0 !important;
    font-size: 1.1rem !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    padding: 0.4em 1.4rem !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-block !important;
    box-shadow: none !important;
    transition: background-color 0.2s !important;
}

#place_order:hover,
.wc-proceed-to-checkout .checkout-button:hover {
    background-color: var(--ps-kraft-hover) !important;
    color: var(--ps-texte) !important;
    box-shadow: none !important;
}

/* ───────────────────────────────────────────────────────────
   RÈGLES CHECKOUT — volontairement dans cart.css.
   cart.css est le fichier du TUNNEL : il est chargé sur le panier
   ET sur le checkout (is_cart() || is_checkout()), alors que
   checkout.css n'est chargé QUE sur le checkout. Les règles
   ci-dessous (champs de saisie, labels, h3, base du tableau récap)
   sont la SEULE source de leur style ; ne pas les déplacer vers
   checkout.css sans vérifier le chargement, sous peine de casser
   le rendu. Les blocs boutons (.wc-proceed-to-checkout, #place_order)
   plus haut sont COMMUNS panier+checkout. cf diagnostic S026.
   ─────────────────────────────────────────────────────────── */

/* ── FORMULAIRE CHECKOUT ───────────────────── */
/*
   Champs identiques à css/account.css :
   fond #dfc4a6, bordure var(--ps-bordure-fonce), coins 4px, police OldNewspaper
*/

.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout input[type="number"],
.woocommerce-checkout select,
.woocommerce-checkout textarea {
    font-family: var(--ps-police-titre) !important;
    background: var(--ps-beige-clair) !important;
    border: var(--ps-bordure-fine) !important;
    border-radius: var(--ps-radius) !important;
    color: var(--ps-texte) !important;
    padding: 6px 10px !important;
    font-size: 1rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.woocommerce-checkout input:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
    outline: none !important;
    border-color: var(--ps-orange) !important;
    box-shadow: 0 0 0 2px rgba(212, 96, 10, 0.15) !important;
}

/* Labels du formulaire checkout */
.woocommerce-checkout label {
    font-family: var(--ps-police-titre) !important;
    color: var(--ps-texte) !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
}

/* Titres sections checkout */
.woocommerce-checkout h3 {
    font-family: var(--ps-police-titre);
    color: var(--ps-texte);
    font-size: 1.4rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 1.5rem 0 0.8rem;
}

/* Bloc récapitulatif commande */
.woocommerce-checkout-review-order-table {
    font-family: var(--ps-police-titre);
    color: var(--ps-texte);
    background: transparent !important;
    width: 100%;
    border-collapse: collapse;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
    background: transparent !important;
    border-bottom: 1px solid rgba(76, 53, 28, 0.2);
    padding: 0.5rem 0.4rem;
    color: var(--ps-texte);
}

/* Contenu textuel du bloc livraison */
.ps-livraison-contenu {
    font-family: var(--ps-police-titre);
    color: var(--ps-texte);
    font-size: 1.1rem;
    line-height: 1.7;
}

.ps-livraison-contenu p {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
}

/* ── RESPONSIVE TUNNEL ─────────────────────── */

/* Reflux de l'aside livraison : dès qu'on passe sous le seuil desktop
   (1389px), il quitte la colonne de droite et passe en pleine largeur
   sous le central, dans le flux (fin du position:sticky). Couplé au
   flex-wrap:wrap du conteneur (plus haut), c'est ce qui le fait
   descendre à la ligne. Seuil à 1388 pour ne pas chevaucher le palier
   deux-colonnes ≥1389px du cadre central. Les !important neutralisent
   la base (.ps-bloc-livraison : width:335px ; flex-shrink:0). */
@media (max-width: 1388px) {
    .ps-bloc-livraison {
        display: block !important;
        position: static !important;
        width: 100% !important;
        flex-shrink: unset;
        margin: 0 0 2rem;
    }
}

/* ── BOUTON "VALIDER LA COMMANDE" — override WooCommerce ── */
/* Sélecteur ultra-spécifique pour battre les styles natifs WooCommerce */

.wc-proceed-to-checkout a.checkout-button.button.alt.wc-forward {
    font-size: 1.2rem !important;
    padding: 0.6em 2rem !important;
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.wc-proceed-to-checkout a.checkout-button.button.alt.wc-forward:hover {
    background-color: var(--ps-kraft-hover) !important;
    color: var(--ps-texte) !important;
}

/* ── ZONE ACTIONS (code promo + mettre à jour) ── */

.woocommerce-cart-form .actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1rem;
    flex-wrap: wrap;
}

/* ── POPUP SACHET OFFERT ── */
.ps-popup-cadeau-inner {
    background: url('../images/kraft-long.jpg') var(--ps-kraft-couleur);
    background-size: 6%;
    background-clip: padding-box;
    border: var(--ps-bordure-medium);
    border-image: url('../images/border.png') 24 24 / 20px 20px / 0.1rem 0.2rem round;
    border-radius: 6px;
    overflow: hidden;
    padding: 2rem 2.5rem;
    text-align: center;
    max-width: 380px;
    width: 90%;
    font-family: var(--ps-police-titre);
}

.ps-popup-cadeau-titre {
    font-size: 1.6rem;
    color: var(--ps-texte);
    margin: 0 0 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ps-popup-cadeau-texte {
    font-size: 1.1rem;
    color: var(--ps-texte);
    margin: 0 0 1.5rem;
    line-height: 1.5;
}

.ps-popup-cadeau-btn {
    font-family: var(--ps-police-titre);
    background: rgba(76, 53, 28, 0.15);
    border: var(--ps-bordure-fine);
    color: var(--ps-texte);
    font-size: 1rem;
    padding: 0.5em 2rem;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ps-popup-cadeau-btn:hover {
    background: radial-gradient(#ffffffb5, #e8d3ba2b);
}

/* ── BAS DE PAGE PANIER ── */

.ps-bas-panier {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    margin-top: 1.5rem;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.ps-bas-panier-gauche {
    flex: 1;
    min-width: 0;
}

.ps-bas-panier-droite {
    flex: 0 0 360px;
    width: 360px;
    min-width: 0;
}

/* Code promo */
.ps-promo-titre {
    font-family: var(--ps-police-titre);
    color: var(--ps-texte);
    font-size: 1.05rem;
    margin-bottom: 0.6rem;
}

.ps-promo-form {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ps-promo-input {
    font-family: var(--ps-police-titre) !important;
    background: var(--ps-beige-clair) !important;
    border: var(--ps-bordure-fine) !important;
    border-radius: var(--ps-radius) !important;
    color: var(--ps-texte) !important;
    padding: 6px 10px !important;
    font-size: 1rem !important;
    flex: 1;
    min-width: 140px;
}

.ps-promo-btn {
    font-family: var(--ps-police-titre) !important;
    background: rgba(76, 53, 28, 0.15) !important;
    border: var(--ps-bordure-fine) !important;
    color: var(--ps-texte) !important;
    padding: 6px 1rem !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    border-radius: var(--ps-radius) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
}

.ps-promo-btn:hover {
    background: radial-gradient(#ffffffb5, #e8d3ba2b) !important;
}

.ps-promo-applique {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
    font-family: var(--ps-police-titre);
    font-size: 0.85rem;
    color: #6B3A2A;
}

.ps-promo-supprimer {
    font-family: var(--ps-police-titre);
    font-size: 0.8rem;
    color: var(--ps-rouge-alerte);
    text-decoration: none;
    border: 1px solid rgba(139, 26, 26, 0.3);
    padding: 1px 6px 2px;
    transition: background 0.2s;
}

.ps-promo-supprimer:hover {
    background: rgba(139, 26, 26, 0.1);
    color: var(--ps-rouge-alerte);
}

/* Tableau totaux */
.ps-totaux-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--ps-police-titre);
    color: var(--ps-texte);
}

.ps-totaux-table td {
    padding: 0.4rem 0.3rem;
    border-bottom: 1px solid rgba(76, 53, 28, 0.15);
}

.ps-totaux-table td:last-child {
    text-align: right;
    color: var(--ps-prix);
}

.ps-totaux-reduction td {
    color: var(--ps-vert-bio) !important;
}

.ps-totaux-reduction td:last-child {
    color: var(--ps-vert-bio) !important;
}

.ps-totaux-ttc td {
    font-size: 1.25rem;
    border-top: 2px solid rgba(76, 53, 28, 0.4);
    border-bottom: none;
    padding-top: 0.8rem;
    color: var(--ps-texte) !important;
}

.ps-totaux-ttc td:last-child {
    color: var(--ps-prix) !important;
    font-size: 1.3rem;
}

/* Masquer le titre natif GeneratePress sur la page panier */
.woocommerce-cart .entry-header,
.woocommerce-cart h1.entry-title,
.woocommerce-cart .page-title {
    display: none !important;
}

/* Bouton valider */
.ps-bas-panier-droite .wc-proceed-to-checkout {
    margin-top: 1rem;
}

.ps-bas-panier-droite .wc-proceed-to-checkout a {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Responsive */
@media (max-width: 768px) {
    .ps-bas-panier {
        flex-direction: column;
        gap: 1.5rem;
    }
    .ps-bas-panier-gauche,
    .ps-bas-panier-droite {
        width: 100% !important;
        flex: unset !important;
    }
    /* ── TABLEAU PANIER → CARTES EMPILÉES (mobile) ──
       Le HTML reste un vrai <table> (logique panier, AJAX,
       accessibilité) ; seul le CSS reflue chaque ligne en carte.
       Cran 1 : structure + encadrement sobre provisoire (ni fond
       kraft ni border.png, prévus au cran 2). */

    /* En cartes, on retire le cadre intermediaire du groupe (bordure +
       border-image du formulaire) : redondant avec le grand cadre du bloc
       et les cadres individuels des cartes. Meme selecteur (0,1,0), plus bas
       dans le source que la regle desktop : pas besoin de !important.
       border:none reinitialise aussi le border-image. */
    .woocommerce-cart-form {
        border: none;
    }

    /* La table et son corps deviennent des blocs pleine largeur. */
    .woocommerce-cart-form .shop_table,
    .woocommerce-cart-form .shop_table tbody {
        display: block;
        width: 100%;
    }

    /* En-têtes de colonnes masqués : chaque carte se suffit à elle-même.
       L'input quantité (aria-label="Quantité") et le lien de suppression
       (aria-label="Supprimer cet article") portent leur propre nom
       accessible : masquer le thead ne dégrade pas l'accessibilité. */
    .woocommerce-cart-form .shop_table thead {
        display: none;
    }

    /* Ligne d'actions résiduelle (nonce caché, sans contenu visible) :
       masquée pour ne pas créer une carte fantôme. */
    .woocommerce-cart-form .shop_table tr.ps-cart-actions-row {
        display: none;
    }

    /* Chaque ligne article = une carte en grille 3×3. */
    .woocommerce-cart-form .woocommerce-cart-form__cart-item {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "thumb name   remove"
            "thumb price  remove"
            "qty   sub    sub";
        align-items: center;
        gap: 0.15rem 0.75rem;
        /* Bord allégé : trait fin (1.5px) en brun chaud var(--ps-titre) au
           lieu du 2px brun foncé, pour adoucir le cadre de la carte. */
        border: 1.5px solid var(--ps-titre);
        border-radius: 6px;
        padding: 0.5rem;
        margin-bottom: 0.6rem;
    }

    /* Fond kraft translucide rechauffe vers l'orange (kraft 200,168,130
       decale vers 210,160,110), uniforme sur TOUTES les cartes. rgba en dur
       assume : cohérent avec le site qui ecrit rgba(200,168,130,X) partout
       (pas de variable alpha disponible). Le double :nth-child(odd/even)
       a la specificite (0,3,0) + !important + ordre source bat a la fois le
       background:transparent !important de base ET le zebrage 0.12 !important
       des paires : zebrage neutralise en mobile, fond identique partout. */
    .woocommerce-cart-form .woocommerce-cart-form__cart-item:nth-child(odd),
    .woocommerce-cart-form .woocommerce-cart-form__cart-item:nth-child(even) {
        background: rgba(210, 160, 110, 0.2) !important;
    }

    /* Réinitialise les td : on annule display table-cell, padding et
       vertical-align hérités du tableau desktop, chaque cellule étant
       désormais placée par la grille. border:none en !important pour
       neutraliser le border 1px que woocommerce.css impose sur
       .woocommerce table.shop_table td (spécificité 0,2,2 > la nôtre) :
       sans ça, chaque td empilé dessine une ligne horizontale parasite
       dans la carte. Mobile uniquement ; le tableau desktop garde ses
       bordures de lignes. */
    .woocommerce-cart-form .woocommerce-cart-form__cart-item td {
        display: block;
        width: auto;
        padding: 0;
        border: none !important;
        vertical-align: initial;
    }

    /* Placement des cellules dans la grille. */
    .woocommerce-cart-form .woocommerce-cart-form__cart-item .product-thumbnail { grid-area: thumb; }
    .woocommerce-cart-form .woocommerce-cart-form__cart-item .product-name      { grid-area: name; }
    .woocommerce-cart-form .woocommerce-cart-form__cart-item .product-price     { grid-area: price; }
    .woocommerce-cart-form .woocommerce-cart-form__cart-item .product-remove    { grid-area: remove; }
    .woocommerce-cart-form .woocommerce-cart-form__cart-item .product-quantity  { grid-area: qty; }
    .woocommerce-cart-form .woocommerce-cart-form__cart-item .product-subtotal  { grid-area: sub; }

    /* Colle le bloc texte (nom + grammage + prix) en haut de ses rangées.
       Sans ça, align-items:center centre le texte sur toute la hauteur des
       deux rangées (étirées par la vignette 8rem) et de grands vides
       apparaissent entre le nom et le prix. La vignette n'est pas touchée. */
    .woocommerce-cart-form .woocommerce-cart-form__cart-item .product-name,
    .woocommerce-cart-form .woocommerce-cart-form__cart-item .product-price {
        align-self: start;
    }

    /* Cartes mobiles : la poubelle devient une croix CSS pure, en haut à droite.
       On neutralise le masque poubelle (hérité de la règle hors media query) et
       on dessine un « × » via deux dégradés linéaires. Recolorable comme avant :
       brun au repos (var --ps-bordure-fonce), rouge au survol (var --ps-rouge-alerte).
       Croix mobile only : le tableau desktop conserve la poubelle. */
    .woocommerce-cart-form .woocommerce-cart-form__cart-item .product-remove {
        align-self: start;
    }
    .woocommerce-cart-form .woocommerce-cart-form__cart-item .product-remove a.remove {
        width: 1.5rem;
        height: 1.5rem;
        -webkit-mask: none;
        mask: none;
        background-color: transparent !important;
        background-image:
            linear-gradient(45deg, transparent calc(50% - 1px), var(--ps-bordure-fonce) calc(50% - 1px), var(--ps-bordure-fonce) calc(50% + 1px), transparent calc(50% + 1px)),
            linear-gradient(-45deg, transparent calc(50% - 1px), var(--ps-bordure-fonce) calc(50% - 1px), var(--ps-bordure-fonce) calc(50% + 1px), transparent calc(50% + 1px));
        opacity: 0.85;
    }
    .woocommerce-cart-form .woocommerce-cart-form__cart-item .product-remove a.remove:hover,
    .woocommerce-cart-form .woocommerce-cart-form__cart-item .product-remove a.remove:focus {
        background-image:
            linear-gradient(45deg, transparent calc(50% - 1px), var(--ps-rouge-alerte) calc(50% - 1px), var(--ps-rouge-alerte) calc(50% + 1px), transparent calc(50% + 1px)),
            linear-gradient(-45deg, transparent calc(50% - 1px), var(--ps-rouge-alerte) calc(50% - 1px), var(--ps-rouge-alerte) calc(50% + 1px), transparent calc(50% + 1px));
        opacity: 1;
    }

    /* WC woocommerce-smallscreen.css masque la cellule vignette
       (display:none sans !important) ; on la réaffiche dans nos cartes,
       !important justifié car règle plugin non modifiable. La cellule se
       place via grid-area:thumb (posé plus haut, l.694) ; on ne force pas
       de width sur le td, la colonne grid « thumb » (auto) se dimensionne
       sur l'image 60px. L'image elle-même est déjà display:block + 60px. */
    .woocommerce-cart-form table.shop_table .woocommerce-cart-form__cart-item .product-thumbnail {
        display: block !important;
        min-width: 8rem; /* la colonne grille thumb ne descend jamais sous la vignette */
    }
    /* Vignette : palier haut 8rem, carre VERROUILLE. width = height (carre a
       dimensions liees) ; min-width empeche la compression par la colonne grille ;
       max-width:none neutralise le max-width:100% de WC qui ecrasait la largeur.
       aspect-ratio et object-fit rapatries ici (plus d'heritage desktop). */
    .woocommerce-cart-form .product-thumbnail img {
        height: 8rem !important;
        width: 8rem !important;
        min-width: 8rem !important;
        max-width: none !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
    }

    /* Prix unitaire discret, sous le nom ; sous-total aligné à droite. */
    .woocommerce-cart-form .woocommerce-cart-form__cart-item .product-price {
        font-size: 0.9rem;
    }
    /* Sous-total = petit cadre brun (variante 3), aligne a DROITE face au
       selecteur quantite (meme rangee "qty sub sub"). justify-self:end colle
       le cadre a droite ; width:fit-content le garde compact (epouse le
       montant). Fond kraft tres leger en rgba en dur (coherent site). Style
       sur la CLASSE .product-subtotal : survit au rafraichissement AJAX (le
       td regenere garde sa classe). grid-area:sub conserve. */
    .woocommerce-cart-form .woocommerce-cart-form__cart-item .product-subtotal {
        justify-self: end;
        width: fit-content;
        /* !important : bat le reset .cart-item td { border:none !important }
           (ajoute pour supprimer les lignes WC) ; sinon la bordure brune du
           sous-total ne s'affiche pas. Specificite (0,3,0) + !important >
           (0,2,1) + !important du reset td. Le radius reprend une fois la
           bordure retablie. Les AUTRES td restent sans bordure. */
        border: 2px solid var(--ps-titre) !important;
        border-radius: 6px;
        padding: 0.35rem 0.7rem;
        background: rgba(210, 160, 110, 0.12);
        text-align: center;
        line-height: 1.1;
    }

    /* Espacement au-dessus de la rangee quantite. Le sous-total a desormais son
       propre cadre : on le retire de ce padding partage pour garder un cadre
       symetrique (sinon padding-top ecraserait le haut du cadre). */
    .woocommerce-cart-form .woocommerce-cart-form__cart-item .product-quantity {
        padding-top: 0.3rem;
    }
}

/* Sous 530px : vignette carree reduite a 6rem. On refixe width = height ET
   min-width ensemble (max-width:none + aspect-ratio restent herites du bloc
   768) pour garder le carre et la non-compression. Place apres le bloc 768
   pour gagner par l'ordre source. */
@media (max-width: 530px) {
    .woocommerce-cart-form table.shop_table .woocommerce-cart-form__cart-item .product-thumbnail {
        min-width: 6rem;
    }
    .woocommerce-cart-form .product-thumbnail img {
        height: 6rem !important;
        width: 6rem !important;
        min-width: 6rem !important;
    }
}

/* Sous 420px (tres petits telephones) : vignette carree a 5.5rem pour laisser
   plus de place au texte. width = height + min-width refixes ensemble ;
   max-width:none + aspect-ratio herites. Place APRES le bloc 530px pour gagner
   sous 420px (desktop first : le plus petit seuil doit etre le dernier). */
@media (max-width: 420px) {
    .woocommerce-cart-form table.shop_table .woocommerce-cart-form__cart-item .product-thumbnail {
        min-width: 5.5rem;
    }
    .woocommerce-cart-form .product-thumbnail img {
        height: 5.5rem !important;
        width: 5.5rem !important;
        min-width: 5.5rem !important;
    }
}

/* ── MODALE VIDER LE PANIER ── */
#ps-modale-vider {
    position: fixed;
    inset: 0;
    z-index: var(--ps-z-popup-top);   /* 9999, inchangé */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* L'attribut hidden doit l'emporter sur le display:flex ci-dessus.
   Sans cette règle, hidden serait ignoré (display CSS bat hidden). */
#ps-modale-vider[hidden] {
    display: none;
}

.ps-modale-overlay {
    position: absolute;
    inset: 0;
    background: rgba(44, 24, 16, 0.55);
}

.ps-modale-vider-inner {
    position: relative;
    z-index: 1;
}

/* Rangée des boutons Annuler / Vider (style sorti du PHP, charte anti-inline) */
.ps-modale-vider-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.ps-popup-cadeau-btn--confirmer {
    background: rgba(212, 96, 10, 0.15) !important;
    border-color: var(--ps-orange) !important;
    color: var(--ps-orange) !important;
}

.ps-popup-cadeau-btn--confirmer:hover {
    background: rgba(212, 96, 10, 0.3) !important;
    color: var(--ps-texte) !important;
}

/* Bouton "Annuler" de la modale "Vider le panier" : override du hover
   générique radial-gradient blanc qui rendait le texte illisible.
   Spécificité ID (1,1,0) > classe (0,2,0) → pas besoin de !important.
   Le bouton "Vider" voisin n'est pas affecté (override propre via --confirmer). */
#ps-modale-vider-annuler {
    transition: background 0.2s ease, color 0.2s ease;
}
#ps-modale-vider-annuler:hover,
#ps-modale-vider-annuler:focus {
    background: rgba(76, 53, 28, 0.3);
    color: var(--ps-titre);
}

/* ── PANIER VIDE ── */
.ps-panier-vide {
    text-align: center;
    padding: 3rem 2rem;
    font-family: var(--ps-police-titre);
}

.ps-panier-vide-texte {
    font-size: 1.4rem;
    color: var(--ps-texte);
    text-align: center;
    font-style: italic;
    margin: 1.5rem 0 0;
}

.ps-btn-catalogue {
    font-family: var(--ps-police-titre);
    color: var(--ps-texte);
    background: url('../images/kraft-long.jpg') var(--ps-kraft-couleur);
    background-size: 6%;
    background-attachment: fixed;
    border: 2px solid var(--ps-bordure-fonce);
    border-image: url('../images/border.png') 24 24 / 12px 15px / 0.05rem round;
    font-size: 1.1rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 0.4em 1.4rem;
    text-decoration: none;
    display: inline-block;
}

.ps-btn-catalogue:hover {
    background-color: var(--ps-kraft-hover);
    color: var(--ps-texte);
}

/* ── BOUTON VIDER LE PANIER — style kraft fort ── */
#ps-btn-vider-panier,
#ps-btn-vider-panier.button {
    font-family: var(--ps-police-titre) !important;
    color: var(--ps-texte) !important;
    font-size: 1.05rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    background: url('../images/kraft-long.jpg') var(--ps-kraft-couleur) !important;
    background-size: 6% !important;
    border: var(--ps-bordure-epaisse) !important;
    border-image: url('../images/border.png') 24 24 / 12px 12px / 0 round !important;
    border-radius: 0 !important;
    padding: 6px 18px 8px !important;
    font-style: normal !important;
    cursor: pointer !important;
    box-shadow: none !important;
    display: block !important;
    margin-left: 0 !important;
    transition: background 0.2s !important;
}

#ps-btn-vider-panier:hover,
#ps-btn-vider-panier.button:hover {
    background:
        radial-gradient(rgba(220, 156, 90, 0.25), rgba(220, 156, 90, 0.25)),
        url('../images/kraft-long.jpg') var(--ps-kraft-couleur) !important;
    background-size: auto, 6% !important;
    background-clip: padding-box !important;
    color: var(--ps-texte) !important;
}

.ps-generer-devis-wrap {
    display: flex;
    justify-content: flex-start;
    margin: 0.8rem 0 1.2rem;
}

.ps-panier-vide-img {
    display: block;
    margin: 2rem auto;
    width: clamp(160px, 25vw, 260px);
    opacity: 0.75;
}

/* Panier vide — centrage vertical autonome.
   .ps-panier-vide ne dépend plus du parent flex (la règle pleine hauteur
   sur .ps-contenu-border-inner est globale dans shop.css depuis le chantier
   "fond clair généralisé"). On donne ici une min-height calculée pour
   garantir une zone suffisante, le flex column interne centre le contenu. */
.woocommerce-cart .ps-panier-vide {
    min-height: calc(100vh - 320px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


/* ── CONFIRMATION CODE PROMO ─────────────────*/

.ps-promo-confirmation {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 0.8rem;
    padding: 0.6rem 0.9rem;
    background: rgba(58, 122, 42, 0.1);
    border: none;
    font-family: var(--ps-police-titre);
}

.ps-promo-confirmation strong {
    color: var(--ps-vert-bio);
    font-size: 1.05rem;
}

.ps-promo-confirmation-desc {
    color: var(--ps-bordure-fonce);
    font-size: 0.95rem;
}

/* ── ERREURS CODE PROMO ──────────────────────
   Cible JS d'injection des notices WC d'erreur (coupon invalide,
   expiré, restriction email, etc.). Reset complet du style natif
   WC pour intégration kraft : pas de bandeau blanc, pas d'icône
   par défaut. Couvre <ul.woocommerce-error> (WC moderne) et
   <div.woocommerce-error> (versions antérieures). */

.ps-promo-erreurs {
    margin-top: 0.8rem;
}
.ps-promo-erreurs:empty {
    display: none;
}
.ps-promo-erreurs .woocommerce-error,
.ps-promo-erreurs ul.woocommerce-error,
.ps-promo-erreurs div.woocommerce-error {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    color: var(--ps-titre);
    font-family: var(--ps-police-titre);
    font-size: 1rem;
}
.ps-promo-erreurs .woocommerce-error li,
.ps-promo-erreurs ul.woocommerce-error li,
.ps-promo-erreurs div.woocommerce-error li {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    color: var(--ps-titre);
}
.ps-promo-erreurs .woocommerce-error li::before,
.ps-promo-erreurs ul.woocommerce-error li::before,
.ps-promo-erreurs div.woocommerce-error li::before {
    content: none !important;
    display: none !important;
}
/* Neutralisation des pseudos sur le conteneur lui-même (icône WC
   d'alerte rendue en ::before du <ul>, indépendante des <li>). */
.ps-promo-erreurs .woocommerce-error::before,
.ps-promo-erreurs ul.woocommerce-error::before,
.ps-promo-erreurs div.woocommerce-error::before,
.ps-promo-erreurs .woocommerce-error::after,
.ps-promo-erreurs ul.woocommerce-error::after,
.ps-promo-erreurs div.woocommerce-error::after {
    content: none !important;
    display: none !important;
}
.ps-promo-erreurs .woocommerce-error a {
    color: var(--ps-titre);
    text-decoration: underline;
}

/* ── BOUTON GÉNÉRER UN DEVIS ─────────────────────────────── */

.ps-actions-panier {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin: 1rem 0 2rem;
}

.ps-vider-panier-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    max-width: 50%;
}

.ps-generer-devis-form {
    margin: 0;
}

.ps-generer-devis-btn {
    font-family: var(--ps-police-titre);
    background: var(--ps-beige-clair);
    border: var(--ps-bordure-fine);
    border-image: none;
    border-radius: var(--ps-radius);
    color: var(--ps-texte);
    font-size: 1rem;
    font-style: italic;
    cursor: pointer;
    padding: 6px 1rem;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: none;
    display: block;
    transition: background 0.2s;
}

.ps-generer-devis-btn:hover:not(:disabled),
.ps-generer-devis-btn:focus:not(:disabled) {
    background: var(--ps-kraft-hover);
    color: var(--ps-texte);
}

.ps-generer-devis-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Variante lien (visiteur non connecté) : le bouton « Générer un devis »
   devient un <a> vers la connexion. On force la couleur kraft et on retire
   le soulignement pour qu'il soit identique au bouton submit des connectés. */
.ps-generer-devis-btn--lien {
    text-decoration: none;
    color: var(--ps-texte);
}
.ps-generer-devis-btn--lien:hover,
.ps-generer-devis-btn--lien:focus {
    text-decoration: none;
    color: var(--ps-texte);
}

.ps-devis-avertissement-coupon {
    font-family: var(--ps-police-titre);
    font-size: 0.9rem;
    color: var(--ps-titre);
    font-style: italic;
    margin: 0.3rem 0 0;
    text-align: right;
    line-height: 1.4;
    max-width: 28rem;
}

@media (max-width: 600px) {
    .ps-actions-panier {
        flex-direction: column;
    }
    .ps-vider-panier-wrap {
        max-width: 100%;
        align-items: stretch;
    }
    .ps-devis-avertissement-coupon {
        text-align: left;
    }
    /* Le wrap interne bouton + avertissement passe en colonne : le bouton
       garde sa taille naturelle sur sa ligne, l'avertissement passe dessous.
       Sans ça, le flex row par défaut comprime le label « Générer un devis ». */
    .ps-generer-devis-wrap {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Bandeau alerte produits indispos après commande de devis.
   Posé par ps_devis_handler_commander en session WC, lu et vidé par
   woocommerce/cart/cart.php au chargement de la page panier. */
.ps-cart-bandeau-indispos {
    background: rgba(197, 48, 48, 0.08);
    border: 2px solid rgba(197, 48, 48, 0.45);
    padding: 1rem 1.4rem;
    margin: 0 0 1.5rem;
    color: var(--ps-bordure-fonce);
    font-size: 1.05rem;
    border-radius: var(--ps-radius);
}
.ps-cart-bandeau-indispos-titre {
    margin: 0 0 0.5rem;
    font-weight: bold;
    color: var(--ps-rouge-alerte);
}
.ps-cart-bandeau-indispos-liste {
    margin: 0;
    padding-left: 1.4rem;
}
.ps-cart-bandeau-indispos-liste li {
    margin: 0.2rem 0;
}

/* Sous 599px, .ps-contenu-flex passe en padding:0 et le bloc livraison,
   rendu hors du cadre kraft, perd le coussin latéral 1rem dont héritent
   les blocs internes via .ps-contenu-border-inner. On lui rend ce 1rem
   latéral pour aligner sa bordure sur la marge de lecture des autres blocs. */
@media (max-width: 599px) {
    .ps-bloc-livraison {
        margin-left: 1rem;
        margin-right: 1rem;
    }
}


/* ============================================
   Notice d'erreur de la modale "vider le panier" (AUDIT-016)
   ============================================
   Même classe que la notice d'ajout au panier (.ps-ajout-erreur,
   product.css) pour une convention unique role="alert". Déclarée
   ici car product.css n'est pas chargé sur la page panier. */
.ps-ajout-erreur {
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid var(--ps-titre);
    background: var(--ps-beige-clair);
    color: var(--ps-titre);
    font-size: 0.95rem;
    line-height: 1.4;
    text-align: left;
}

/* AUDIT-015 : parade iOS sur les 3 boutons kraft (fixed ignoré/repaints Safari tactile, PIEGE-028). */
/* Sur tactile, attachment:scroll ; size en px (120px) pour garder le fond beige uni actuel */
/* (en scroll, 6% sur un petit bouton donnerait une tuile minuscule). Desktop garde fixed:6%. */
@media (hover: none) and (pointer: coarse) {
    .woocommerce-cart .wc-proceed-to-checkout .checkout-button,
    .woocommerce-cart .woocommerce a.button,
    .woocommerce-cart .woocommerce button.button,
    .woocommerce-checkout .woocommerce a.button,
    .woocommerce-checkout .woocommerce button.button,
    .wc-proceed-to-checkout a.checkout-button.button.alt.wc-forward,
    .ps-btn-catalogue {
        background-attachment: scroll !important;
        background-size: 120px !important;
    }
}