/**
 * woocommerce.css — Style WooCommerce Belle Époque
 *
 * Boutique / Fiche produit / Panier / Checkout
 * Charte graphique : _references/charte-belle-epoque.html
 *
 * Migration : ce fichier utilisait déjà ses propres variables locales
 * (--be-*) de façon cohérente sur tout le fichier — il suffit donc de
 * les réaliaser vers les tokens de la charte pour migrer les couleurs
 * partout d'un coup. --be-font devient Inter par défaut (couvre labels/
 * boutons/tableaux, la majorité des usages) ; les titres et prix qui
 * doivent rester en Newsreader ont un override ciblé plus bas.
 */

/* ─────────────────────────────────────────────────────────
   VARIABLES GLOBALES — alias vers les tokens de la charte
───────────────────────────────────────────────────────── */
:root {
    --be-noir:       var(--bg);
    --be-noir-2:     var(--panel);
    --be-noir-3:     var(--bg-2);
    --be-or:         var(--ice);
    --be-or-clair:   var(--ice-2);
    --be-blanc:      var(--ink);
    --be-muted:      var(--ink-2);
    --be-border:     var(--line);
    --be-radius:     var(--radius);
    --be-font:       var(--ui);
}

/* Typographie globale — em en Newsreader italique (accent de titre) */
body em,
h1 em, h2 em, h3 em, h4 em,
p em,
.hero-dm-title em,
.hero-pt-title em,
.dm-definition-title em,
.dm-cta-title em,
.dm-how-title em,
.dm-tarifs-title em,
.dm-cibles-title em,
.dm-stats-title em {
    font-family: var(--disp) !important;
    font-style: italic !important;
}

/* Titres et prix — restent en Newsreader (--be-font ci-dessus est
   aliasé à Inter pour le reste : labels, boutons, tableaux, etc.) */
.woocommerce-shop h1.page-title,
.woocommerce .woocommerce-products-header__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce div.product h1.product_title,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce-cart table.cart td.product-name a,
.woocommerce-cart .cart_totals .order-total td,
.woocommerce-checkout h2,
.woocommerce-checkout h3,
.woocommerce-checkout table.shop_table .order-total td,
.woocommerce-checkout table.shop_table .order-total th,
.woocommerce-cart .wp-block-woocommerce-empty-cart-block h2,
.woocommerce-cart .cross-sells h2,
.woocommerce-cart .empty-cart-cross-sells h2,
.wc-block-grid__product.product-loop-boxed .wc-block-grid__product-title,
.wc-block-cart-item__product a,
.wc-block-cart-items .wc-block-cart-item__product-name,
.wc-block-cart-item__total .woocommerce-Price-amount,
.wc-block-cart-item__prices .woocommerce-Price-amount,
.wc-block-cart__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item span {
    font-family: var(--disp) !important;
    font-weight: 400;
}

/* ─────────────────────────────────────────────────────────
   FOND DE PAGE — Toutes les pages WooCommerce
───────────────────────────────────────────────────────── */

body.woocommerce,
body.woocommerce-page,
body.woocommerce-cart,
body.woocommerce-checkout {
    background-color: var(--be-noir) !important;
}

body.woocommerce .site-main,
body.woocommerce-page .site-main,
body.woocommerce-cart .site-main,
body.woocommerce-checkout .site-main,
body.woocommerce #primary,
body.woocommerce-page #primary,
body.woocommerce-cart #primary,
body.woocommerce-checkout #primary,
body.woocommerce .content-area,
body.woocommerce-page .content-area,
body.woocommerce-cart .content-area,
body.woocommerce-checkout .content-area,
body.woocommerce #inner-wrap,
body.woocommerce-page #inner-wrap,
body.woocommerce-cart #inner-wrap,
body.woocommerce-checkout #inner-wrap {
    background-color: var(--be-noir) !important;
}

/* ─────────────────────────────────────────────────────────
   BREADCRUMB
───────────────────────────────────────────────────────── */

/* 🔴 Kadence rend les breadcrumbs via <nav class="kadence-breadcrumbs">, pas
   le balisage classique .woocommerce-breadcrumb — cette 2e classe n'existe
   nulle part sur le site, donc les règles ci-dessous ne matchaient jamais.
   Sans elles, Kadence applique sa couleur par défaut (gris foncé, pensée
   pour un fond clair) : quasi invisible sur notre fond noir — texte présent
   mais illisible, pas juste "discret" (même bug déjà corrigé pour
   .woocommerce-account uniquement, voir rental.css — jamais étendu ici). */
.woocommerce-breadcrumb,
.woocommerce nav.woocommerce-breadcrumb,
.kadence-breadcrumbs {
    font-family: var(--be-font);
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--be-muted) !important;
    margin-bottom: 32px;
}

.woocommerce-breadcrumb a,
.kadence-breadcrumbs a {
    color: rgba(126,180,219, 0.5) !important;
    text-decoration: none;
}

.woocommerce-breadcrumb a:hover,
.kadence-breadcrumbs a:hover {
    color: var(--be-or) !important;
}

/* Fil d'Ariane retiré sur la fiche produit — pas d'intérêt fonctionnel
   au-dessus de l'image produit (demande explicite), gardé ailleurs
   (boutique, panier, compte). */
.single-product .woocommerce-breadcrumb,
.single-product .kadence-breadcrumbs {
    display: none !important;
}

/* ─────────────────────────────────────────────────────────
   NOTICES (ajouté au panier, erreurs, succès)
───────────────────────────────────────────────────────── */

.woocommerce-message,
.woocommerce-info {
    background: rgba(126,180,219, 0.06) !important;
    border-top: 3px solid var(--be-or) !important;
    color: var(--be-blanc) !important;
    font-family: var(--be-font);
    font-size: 14px;
    border-radius: 0 0 var(--be-radius) var(--be-radius);
    padding: 16px 20px;
}

.woocommerce-message::before,
.woocommerce-info::before {
    color: var(--be-or) !important;
}

.woocommerce-error {
    background: rgba(229,137,137, 0.06) !important;
    border-top: 3px solid #E58989 !important;
    color: var(--be-blanc) !important;
    font-family: var(--be-font);
    border-radius: 0 0 var(--be-radius) var(--be-radius);
}

/* Bouton dans les notices */
.woocommerce-message .button,
.woocommerce-info .button {
    background: var(--be-or) !important;
    color: var(--be-noir) !important;
    border: none !important;
    font-size: 11px !important;
    letter-spacing: 0.2em;
    font-family: var(--be-font) !important;
    padding: 8px 20px !important;
    border-radius: var(--be-radius) !important;
}

/* ─────────────────────────────────────────────────────────
   1. BOUTIQUE — Liste des produits
───────────────────────────────────────────────────────── */

/* Titre de page boutique */
.woocommerce-shop h1.page-title,
.woocommerce .woocommerce-products-header__title {
    font-family: var(--be-font);
    font-weight: 400;
    font-size: 42px;
    letter-spacing: 0.08em;
    color: var(--be-or-clair);
    text-align: center;
    margin-bottom: 48px;
}

/* Barre de résultats / tri */
.woocommerce-result-count {
    font-family: var(--be-font);
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--be-muted);
    font-style: italic;
}

.woocommerce-ordering select {
    background: var(--be-noir-2) !important;
    border: 1px solid var(--be-border) !important;
    color: var(--be-muted) !important;
    font-family: var(--be-font) !important;
    font-size: 12px;
    letter-spacing: 0.08em;
    padding: 8px 32px 8px 14px !important;
    border-radius: var(--be-radius) !important;
}

/* Grille produits */
.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

.woocommerce ul.products li.product {
    background: var(--be-noir-2) !important;
    border: 1px solid var(--be-border);
    border-radius: var(--be-radius);
    overflow: hidden;
    transition: border-color 0.3s ease, transform 0.3s ease;
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce ul.products li.product:hover {
    border-color: rgba(126,180,219, 0.45);
    transform: translateY(-3px);
}

/* Image produit */
.woocommerce ul.products li.product img {
    display: block;
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.woocommerce ul.products li.product:hover img {
    transform: scale(1.03);
}

/* Infos produit */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--be-font) !important;
    font-size: 20px !important;
    font-weight: 400;
    color: var(--be-or-clair) !important;
    padding: 16px 20px 4px !important;
    letter-spacing: 0.03em;
}

.woocommerce ul.products li.product .price {
    font-family: var(--be-font) !important;
    font-size: 15px !important;
    color: var(--be-muted) !important;
    padding: 0 20px 20px !important;
    display: block;
}

/* Bouton "Ajouter au panier" sur la grille */
.woocommerce ul.products li.product .button {
    display: block;
    width: calc(100% - 40px);
    margin: 0 20px 20px !important;
    background: transparent !important;
    color: var(--be-or) !important;
    border: 1px solid var(--be-border) !important;
    font-family: var(--be-font) !important;
    font-size: 11px !important;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 11px 0 !important;
    text-align: center;
    border-radius: var(--be-radius) !important;
    transition: all 0.25s ease;
}

.woocommerce ul.products li.product .button:hover {
    background: rgba(126,180,219, 0.08) !important;
    border-color: var(--be-or) !important;
}

/* ─────────────────────────────────────────────────────────
   2. FICHE PRODUIT
───────────────────────────────────────────────────────── */

/* Titre — [MODIFIÉ 21/09/2026] même typo que les H2 du site (tokens
   partagés --h2-*, voir style.css), en blanc plutôt qu'en couleur charte,
   demande explicite. */
.woocommerce div.product h1.product_title {
    font-family: var(--disp) !important;
    font-weight: var(--h2-weight);
    font-size: var(--h2-size);
    line-height: var(--h2-line);
    letter-spacing: var(--h2-tracking);
    color: var(--be-blanc) !important;
    margin-bottom: 8px;
}

/* [AJOUT 21/09/2026] Sous-titre "Notre offre de lancement" — injecté par
   Rental_Product_Page::render_offer_subtitle(), même recette que
   .dm-hero-brand (Dream Machine, "Par Kevin Finel & Brice Battung") mais
   en blanc plutôt qu'en couleur charte (demande explicite, cohérent avec
   le titre juste au-dessus). */
.rental-offer-subtitle {
    font-family: var(--disp); font-weight: 300; font-style: italic;
    font-size: 1.5rem; color: var(--be-blanc) !important; margin-bottom: 22px;
}

/* Prix — [MODIFIÉ 21/09/2026] remplace l'affichage natif WooCommerce
   (une seule ligne) par un bloc à 3 lignes construit par
   Rental_Product_Page::render_price() : 1er mois / tarif récurrent /
   engagement — toutes en blanc, typo --disp (demande explicite : le prix
   natif ne sait pas représenter 2 tarifs différents, d'où le remplacement
   plutôt qu'un simple habillage CSS de la sortie WooCommerce). */
.rental-price-block { margin-bottom: 18px; }
.rental-price-block .rental-price-first {
    font-family: var(--disp) !important; font-weight: 400; font-size: 1.9rem;
    color: var(--be-blanc) !important; line-height: 1.25;
}
.rental-price-block .rental-price-then {
    font-family: var(--disp) !important; font-weight: 300; font-size: 1.15rem;
    color: var(--be-blanc) !important; margin-top: 2px;
}
.rental-price-block .rental-price-commitment {
    font-family: var(--disp) !important; font-weight: 300; font-style: italic;
    font-size: 1.5rem; color: var(--be-blanc) !important; opacity: .7; margin-top: 8px;
}
/* [AJOUT 21/09/2026] wc_price() sort un <span class="woocommerce-Price-amount">
   cible directement par le reset universel *{font-family:var(--ui)} (style.css)
   — une règle qui matche l'élément DIRECTEMENT bat toujours l'héritage
   venant du parent, même avec !important dessus : il faut recibler ce
   span explicitement. */
.rental-price-block .woocommerce-Price-amount {
    font-family: var(--disp) !important;
}

/* Stock */
.woocommerce div.product p.stock {
    font-family: var(--be-font) !important;
    font-size: 12px !important;
    letter-spacing: 0.1em;
    color: var(--be-muted) !important;
    font-style: italic;
}

/* Description courte */
.woocommerce div.product div.woocommerce-product-details__short-description {
    font-family: var(--be-font);
    font-size: 16px;
    color: var(--be-muted);
    line-height: 1.7;
    font-style: italic;
    border-top: 1px solid var(--be-border);
    border-bottom: 1px solid var(--be-border);
    padding: 16px 0;
    margin: 16px 0;
}

/* Bouton Ajouter au panier — fiche produit */
.woocommerce div.product .single_add_to_cart_button,
.woocommerce div.product button.single_add_to_cart_button {
    background: transparent !important;
    color: var(--be-or) !important;
    border: 1px solid rgba(126,180,219, 0.5) !important;
    font-family: var(--be-font) !important;
    font-size: 12px !important;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    padding: 16px 40px !important;
    border-radius: var(--be-radius) !important;
    transition: all 0.25s ease;
    box-shadow: none !important;
}

.woocommerce div.product .single_add_to_cart_button:hover {
    background: rgba(126,180,219, 0.08) !important;
    border-color: var(--be-or) !important;
}

/* Sur mobile, le bouton (inline-block, largeur de son texte) flotte seul à
   gauche sous le cadre "Date de début de location" qui lui est pleine
   largeur — décalage visuel. Aligné à la même largeur que ce cadre. */
@media (max-width: 899px) {
    .woocommerce div.product .single_add_to_cart_button,
    .woocommerce div.product button.single_add_to_cart_button {
        display: block !important;
        width: 100%;
        text-align: center;
    }
}

/* Onglets (Informations complémentaires / Avis) */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    border-bottom: 1px solid var(--be-border);
    padding: 0;
    margin-bottom: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    font-family: var(--be-font) !important;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--be-muted) !important;
    padding: 12px 20px !important;
    display: block;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    border-bottom-color: var(--be-or) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--be-or) !important;
}

.woocommerce div.product .woocommerce-tabs .panel {
    background: var(--be-noir-2);
    border: 1px solid var(--be-border);
    border-top: none;
    padding: 24px;
    font-family: var(--be-font);
    color: var(--be-muted);
    font-size: 15px;
    line-height: 1.7;
}

/* Tableau infos complémentaires */
.woocommerce div.product .woocommerce-product-attributes th,
.woocommerce div.product .woocommerce-product-attributes td {
    font-family: var(--be-font);
    font-size: 14px;
    color: var(--be-muted);
    border-color: var(--be-border) !important;
    padding: 10px 16px;
}

.woocommerce div.product .woocommerce-product-attributes th {
    color: var(--be-or) !important;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 400;
}

/* ─────────────────────────────────────────────────────────
   3. PANIER
───────────────────────────────────────────────────────── */

/* Tableau panier */
.woocommerce-cart table.cart {
    background: transparent;
    border-collapse: collapse;
    width: 100%;
}

.woocommerce-cart table.cart th {
    font-family: var(--be-font) !important;
    font-size: 10px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--be-or) !important;
    font-weight: 400;
    padding: 14px 12px;
    border-bottom: 1px solid var(--be-border) !important;
    background: transparent !important;
}

.woocommerce-cart table.cart td {
    background: var(--be-noir-2) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    padding: 20px 12px !important;
    vertical-align: middle;
    font-family: var(--be-font);
    color: rgba(234, 237, 240, 0.7);
}

/* Nom du produit dans le panier */
.woocommerce-cart table.cart td.product-name a {
    font-family: var(--be-font) !important;
    font-size: 17px;
    font-weight: 400;
    color: var(--be-or-clair) !important;
    text-decoration: none;
    letter-spacing: 0.02em;
}

.woocommerce-cart table.cart td.product-name dl.variation {
    font-size: 13px;
    color: var(--be-muted);
    font-style: italic;
}

/* Prix panier */
.woocommerce-cart table.cart td.product-price,
.woocommerce-cart table.cart td.product-subtotal {
    font-size: 16px;
    color: var(--be-or) !important;
}

/* Quantité panier */
.woocommerce-cart table.cart td.product-quantity input[type="number"] {
    background: var(--be-noir-3) !important;
    border: 1px solid var(--be-border) !important;
    color: var(--be-blanc) !important;
    font-family: var(--be-font) !important;
    text-align: center;
    width: 64px;
    padding: 8px !important;
    border-radius: var(--be-radius) !important;
}

/* Bouton supprimer */
.woocommerce-cart table.cart td.product-remove a.remove {
    color: var(--be-muted) !important;
    font-size: 18px;
    transition: color 0.2s;
}

.woocommerce-cart table.cart td.product-remove a.remove:hover {
    color: #E58989 !important;
    background: transparent !important;
}

/* Actions panier (code promo + mettre à jour) */
.woocommerce-cart table.cart td.actions {
    background: transparent !important;
    border-top: 1px solid var(--be-border) !important;
    padding-top: 20px !important;
}

.woocommerce-cart table.cart td.actions input[type="text"] {
    background: var(--be-noir-2) !important;
    border: 1px solid var(--be-border) !important;
    color: var(--be-blanc) !important;
    font-family: var(--be-font) !important;
    padding: 11px 16px !important;
    border-radius: var(--be-radius) !important;
    font-size: 14px;
}

/* Total panier */
.woocommerce-cart .cart-collaterals .cart_totals {
    background: var(--be-noir-2);
    border: 1px solid var(--be-border);
    border-radius: var(--be-radius);
    padding: 28px;
}

.woocommerce-cart .cart_totals h2 {
    font-family: var(--be-font) !important;
    font-size: 13px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--be-or) !important;
    font-weight: 400;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--be-border);
    padding-bottom: 14px;
}

.woocommerce-cart .cart_totals table {
    width: 100%;
}

.woocommerce-cart .cart_totals table th {
    font-family: var(--be-font) !important;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--be-muted) !important;
    font-weight: 400;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}

.woocommerce-cart .cart_totals table td {
    font-family: var(--be-font) !important;
    color: var(--be-or-clair) !important;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
    text-align: right;
}

.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
    font-size: 18px;
    color: var(--be-or) !important;
    border-bottom: none !important;
    padding-top: 16px;
}

/* Bouton "Valider la commande" dans le panier */
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
    display: block;
    width: 100%;
    background: transparent !important;
    color: var(--be-or) !important;
    border: 1px solid rgba(126,180,219, 0.5) !important;
    font-family: var(--be-font) !important;
    font-size: 12px !important;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    padding: 16px 0 !important;
    text-align: center;
    border-radius: var(--be-radius) !important;
    margin-top: 16px;
    transition: all 0.25s ease;
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover {
    background: rgba(126,180,219, 0.08) !important;
    border-color: var(--be-or) !important;
}

/* ─────────────────────────────────────────────────────────
   4. CHECKOUT
───────────────────────────────────────────────────────── */

/* Titres de section */
.woocommerce-checkout h2,
.woocommerce-checkout h3 {
    font-family: var(--be-font) !important;
    font-weight: 400;
    color: var(--be-or-clair) !important;
    font-size: 22px;
    letter-spacing: 0.05em;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--be-border);
    padding-bottom: 12px;
}

/* Labels */
.woocommerce-checkout .woocommerce-checkout label,
.woocommerce-checkout form .form-row label {
    font-family: var(--be-font) !important;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--be-muted) !important;
    margin-bottom: 6px;
    display: block;
}

/* Inputs checkout */
.woocommerce-checkout .woocommerce-checkout input[type="text"],
.woocommerce-checkout .woocommerce-checkout input[type="email"],
.woocommerce-checkout .woocommerce-checkout input[type="tel"],
.woocommerce-checkout .woocommerce-checkout textarea,
.woocommerce-checkout .woocommerce-checkout select,
.woocommerce-checkout form .form-row input.input-text,
.woocommerce-checkout form .form-row select {
    background: var(--be-noir-2) !important;
    border: 1px solid var(--be-border) !important;
    color: rgba(234, 237, 240, 0.8) !important;
    font-family: var(--be-font) !important;
    font-size: 15px !important;
    padding: 12px 16px !important;
    border-radius: var(--be-radius) !important;
    width: 100%;
    transition: border-color 0.2s ease;
}

.woocommerce-checkout form .form-row input.input-text:focus,
.woocommerce-checkout form .form-row select:focus {
    border-color: rgba(126,180,219, 0.5) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(126,180,219, 0.06) !important;
}

/* Adresse sauvegardée */
.woocommerce-checkout .woocommerce-address-fields .woocommerce-SavedAddresses,
.woocommerce-checkout address.woocommerce-Address {
    background: var(--be-noir-2);
    border: 1px solid var(--be-border);
    border-radius: var(--be-radius);
    padding: 16px 20px;
    font-family: var(--be-font);
    font-size: 14px;
    color: var(--be-muted);
    font-style: italic;
    line-height: 1.7;
}

/* Lien "Modifier" */
.woocommerce-checkout .woocommerce-address-fields a,
.woocommerce-checkout address a {
    color: var(--be-or) !important;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    font-style: normal;
}

/* Options de livraison */
.woocommerce-checkout .woocommerce-shipping-fields .shipping_method {
    background: var(--be-noir-2);
    border: 1px solid var(--be-border);
    border-radius: var(--be-radius);
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--be-font);
    font-size: 15px;
    color: rgba(234, 237, 240, 0.7);
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.woocommerce-checkout .woocommerce-shipping-fields .shipping_method:has(input:checked) {
    border-color: rgba(126,180,219, 0.4);
    background: rgba(126,180,219, 0.04);
}

/* Options de paiement */
.woocommerce-checkout #payment {
    background: transparent !important;
    border-radius: var(--be-radius);
}

.woocommerce-checkout #payment ul.payment_methods {
    border-bottom: 1px solid var(--be-border) !important;
    padding: 0;
    margin-bottom: 16px;
}

.woocommerce-checkout #payment ul.payment_methods li {
    background: var(--be-noir-2) !important;
    border: 1px solid var(--be-border) !important;
    border-radius: var(--be-radius);
    padding: 14px 18px !important;
    margin-bottom: 8px;
    font-family: var(--be-font);
    font-size: 15px;
    color: rgba(234, 237, 240, 0.7);
    transition: border-color 0.2s;
}

.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) {
    border-color: rgba(126,180,219, 0.4) !important;
    background: rgba(126,180,219, 0.04) !important;
}

.woocommerce-checkout #payment ul.payment_methods li label {
    font-size: 15px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: rgba(234, 237, 240, 0.7) !important;
}

/* Résumé commande */
.woocommerce-checkout #order_review_heading {
    font-family: var(--be-font) !important;
    font-size: 13px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--be-or) !important;
    font-weight: 400;
    border-bottom: 1px solid var(--be-border);
    padding-bottom: 12px;
    margin-bottom: 16px;
}

.woocommerce-checkout table.shop_table {
    background: var(--be-noir-2);
    border: 1px solid var(--be-border) !important;
    border-radius: var(--be-radius);
    overflow: hidden;
    font-family: var(--be-font);
}

.woocommerce-checkout table.shop_table th {
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--be-or) !important;
    font-weight: 400;
    background: var(--be-noir-3) !important;
    padding: 12px 18px !important;
    border-bottom: 1px solid var(--be-border) !important;
}

.woocommerce-checkout table.shop_table td {
    padding: 14px 18px !important;
    color: rgba(234, 237, 240, 0.7) !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
    font-size: 14px;
}

.woocommerce-checkout table.shop_table .order-total td,
.woocommerce-checkout table.shop_table .order-total th {
    color: var(--be-or) !important;
    font-size: 17px;
}

/* Checkbox "même adresse" / "note commande" */
.woocommerce-checkout input[type="checkbox"] {
    accent-color: var(--be-or);
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
    font-family: var(--be-font);
    font-size: 13px;
    color: var(--be-muted);
    font-style: italic;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a {
    color: var(--be-or) !important;
}

/* Bouton "Commander" */
.woocommerce-checkout #place_order {
    display: block;
    width: 100%;
    background: transparent !important;
    color: var(--be-or) !important;
    border: 1px solid rgba(126,180,219, 0.5) !important;
    font-family: var(--be-font) !important;
    font-size: 12px !important;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    padding: 18px 0 !important;
    border-radius: var(--be-radius) !important;
    cursor: pointer;
    transition: all 0.25s ease;
    margin-top: 20px;
    box-shadow: none !important;
}

.woocommerce-checkout #place_order:hover {
    background: rgba(126,180,219, 0.08) !important;
    border-color: var(--be-or) !important;
}

/* Lien "Retour au panier" */
.woocommerce-checkout .return-to-shop a,
.woocommerce-checkout a.showcoupon {
    color: var(--be-or) !important;
    font-family: var(--be-font);
    font-size: 13px;
    font-style: italic;
    text-decoration: none;
    border-bottom: 1px solid rgba(126,180,219, 0.3);
}

/* Radio buttons */
.woocommerce-checkout input[type="radio"] {
    accent-color: var(--be-or);
}

/* Panier vide */
.woocommerce-cart .woocommerce-cart-form ~ .cart-empty,
.woocommerce p.cart-empty {
    font-family: var(--be-font);
    font-size: 18px;
    color: var(--be-muted);
    font-style: italic;
    text-align: center;
    padding: 60px 0;
}

.woocommerce .return-to-shop .button {
    background: transparent !important;
    color: var(--be-or) !important;
    border: 1px solid var(--be-border) !important;
    font-family: var(--be-font) !important;
    font-size: 11px !important;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 12px 28px !important;
    border-radius: var(--be-radius) !important;
}

/* Boutons génériques WooCommerce */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    font-family: var(--be-font) !important;
    border-radius: var(--be-radius) !important;
}

.wc-block-checkout label a {
    color: #7EB4DB !important;
    font-family: var(--be-font) !important;
    font-size: 20px !important;
    border-bottom: 1px solid rgba(126,180,219, 0.3);
    text-decoration: none;
}

.wc-block-checkout label a:hover {
    border-color: #7EB4DB;
}
.wc-block-checkout__add-note {
    display: none !important;
}
/* ─────────────────────────────────────────────────────────
   5. SCROLL — Personnalisation barre de défilement
───────────────────────────────────────────────────────── */

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--be-noir);
}

::-webkit-scrollbar-thumb {
    background: rgba(126,180,219, 0.25);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(126,180,219, 0.45);
}

/* ─────────────────────────────────────────────────────────
   6. CORRECTIONS — Overrides Kadence
───────────────────────────────────────────────────────── */

/* Carte produit — fond blanc du bas */
.woocommerce ul.products li.product .product-details,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product footer,
.woocommerce ul.products li.product .product-footer {
    background: var(--be-noir-2) !important;
}

/* Force tout le contenu de la carte en sombre */
.woocommerce ul.products li.product * {
    background-color: transparent;
}
.woocommerce ul.products li.product {
    background: var(--be-noir-2) !important;
}

/* Date picker — fond blanc sur fiche produit */
.rental-date-picker {
    background: var(--be-noir-2) !important;
    border-color: var(--be-border) !important;
}

.rental-date-picker__label {
    color: rgba(234, 237, 240, 0.5) !important;
}

.rental-date-picker__input,
.rental-date-picker .flatpickr-input {
    background: var(--be-noir-3) !important;
    border-color: var(--be-border) !important;
    color: var(--be-blanc) !important;
}

.rental-date-picker__hint {
    color: var(--be-muted) !important;
}

/* Bouton "Commander" et "Valider la commande" — override bleu Stripe/Woo */
.woocommerce-checkout #place_order,
.woocommerce-checkout button#place_order,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-button.wc-block-components-checkout-place-order-button {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--be-or) !important;
    border: 1px solid rgba(126,180,219, 0.5) !important;
    box-shadow: none !important;
}

/* Bouton "Valider la commande" dans le panier (block checkout) */
.wp-block-woocommerce-proceed-to-checkout-block a,
.wc-block-cart__submit-button {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--be-or) !important;
    border: 1px solid rgba(126,180,219, 0.5) !important;
    font-family: var(--be-font) !important;
    letter-spacing: 0.2em;
    box-shadow: none !important;
}

/* Footer blanc */
body.woocommerce .site-footer,
body.woocommerce-cart .site-footer,
body.woocommerce-checkout .site-footer,
body.woocommerce-page .site-footer,
body.woocommerce #colophon,
body.woocommerce-cart #colophon,
body.woocommerce-checkout #colophon {
    background-color: var(--be-noir) !important;
    border-top: 1px solid var(--be-border);
}

/* Zone titre boutique — fond gris Kadence */
.woocommerce-shop .wp-block-kadence-header,
body.woocommerce .entry-hero,
body.woocommerce .page-hero,
body.woocommerce .woocommerce-products-header {
    background: var(--be-noir) !important;
}

/* Inputs checkout — blanc visible */
.woocommerce-checkout .wc-block-components-text-input input,
.woocommerce-checkout .wc-block-components-select select,
.wc-block-components-text-input input,
.wc-block-components-select select,
.wc-blocks-components-select__select {
    background: var(--be-noir-2) !important;
    border-color: var(--be-border) !important;
    color: var(--be-blanc) !important;
}
.wc-blocks-components-select__select option {
    background: var(--be-noir-2);
    color: var(--be-blanc);
}

/* Bloc adresse checkout */
.wc-block-components-address-card,
.wc-block-components-shipping-rates-control__package {
    background: var(--be-noir-2) !important;
    border-color: var(--be-border) !important;
    color: rgba(234, 237, 240, 0.7) !important;
}

/* Supprime le hero/titre sur la page boutique */
.woocommerce-shop .entry-hero,
.woocommerce-shop .product-archive-hero-section,
.woocommerce-shop .entry-hero-container-inner,
.woocommerce-shop .hero-section-overlay {
    display: none !important;
}

/* Fond clair sur les images produit pour les PNGs transparents */
.woocommerce ul.products li.product .attachment-woocommerce_thumbnail,
.woocommerce ul.products li.product img {
    background-color: #f0ece4 !important;
    padding: 0px;
}

/* Masque les onglets sur les fiches produit de location */
.single-product .woocommerce-tabs {
    display: none !important;
}

.woocommerce div.product .single_add_to_cart_button,
.woocommerce div.product button.single_add_to_cart_button {
    background: transparent !important;
    color: var(--be-or) !important;
    border: 1px solid rgba(126,180,219, 0.5) !important;
    font-family: var(--be-font) !important;
    font-size: 12px !important;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    padding: 16px 40px !important;
    border-radius: var(--be-radius) !important;
    transition: all 0.25s ease;
    box-shadow: none !important;
    line-height: 1 !important;        /* ← fix décalage texte */
    display: inline-flex !important;  /* ← fix alignement */
    align-items: center !important;
    justify-content: center !important;
}

/* Fond clair pour les images PNG transparentes */
.woocommerce div.product .woocommerce-product-gallery__image {
    background-color: #f0ece4 !important;
    border-radius: var(--be-radius);
    padding: 0px;
}

/* Bouton "Louer" sur la grille boutique */
.woocommerce ul.products li.product a.rental-loop-btn {
    display: block;
    margin: 16px 20px 20px !important;  /* ← marge autour */
    background: transparent !important;
    color: var(--be-or) !important;
    border: 1px solid var(--be-border) !important;
    font-family: var(--be-font) !important;
    font-size: 11px !important;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 14px 14px 14px !important;         /* ← plus de hauteur */
    text-align: center;
    border-radius: var(--be-radius) !important;
    transition: all 0.25s ease;
    text-decoration: none;
}

.woocommerce ul.products li.product a.rental-loop-btn:hover {
    background: rgba(126,180,219, 0.08) !important;
    border-color: var(--be-or) !important;
}

/* ─────────────────────────────────────────────────────────
   7. PANIER VIDE
───────────────────────────────────────────────────────── */

/* Icône et message panier vide */
.woocommerce-cart .woocommerce-cart-form ~ *,
.woocommerce-cart .cart-empty-page {
    text-align: center;
}

.woocommerce-cart .woocommerce-cart__empty-page {
    padding: 60px 20px;
    text-align: center;
}

/* Emoji triste — on le cache, on met notre style */
.woocommerce-cart .wp-block-woocommerce-empty-cart-block svg,
.woocommerce-cart .wc-empty-cart-message img {
    display: none;
}

/* Message panier vide */
.woocommerce-cart p.cart-empty,
.woocommerce-cart .wp-block-woocommerce-empty-cart-block p {
    font-family: var(--be-font) !important;
    font-size: 22px !important;
    color: var(--be-muted) !important;
    font-style: italic;
    letter-spacing: 0.05em;
    text-align: center;
    padding: 60px 0 20px;
}

/* Titre "Nouveau dans la boutique" */
.woocommerce-cart .wp-block-woocommerce-empty-cart-block h2,
.woocommerce-cart .cross-sells h2,
.woocommerce-cart .empty-cart-cross-sells h2 {
    font-family: var(--be-font) !important;
    font-weight: 400 !important;
    font-size: 28px !important;
    color: var(--be-or-clair) !important;
    letter-spacing: 0.08em;
    text-align: center;
    margin-bottom: 32px;
}

/* Bouton "Retour à la boutique" */
.woocommerce-cart .wc-block-cart__empty-cart__image ~ a,
.woocommerce-cart .return-to-shop .button,
.woocommerce-cart .wp-block-woocommerce-empty-cart-block a.button {
    background: transparent !important;
    color: var(--be-or) !important;
    border: 1px solid rgba(126,180,219, 0.4) !important;
    font-family: var(--be-font) !important;
    font-size: 11px !important;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 12px 28px !important;
    border-radius: var(--be-radius) !important;
    text-decoration: none;
    display: inline-block;
    transition: all 0.25s ease;
    margin-bottom: 48px;
}

.woocommerce-cart .return-to-shop .button:hover {
    background: rgba(126,180,219, 0.08) !important;
    border-color: var(--be-or) !important;
}

/* ─────────────────────────────────────────────────────────
   7. PANIER VIDE — Cartes produits suggérés
───────────────────────────────────────────────────────── */
/* Override Kadence content-bg sur les cartes bloc */
.wc-block-grid__product.content-bg,
.wc-block-grid__product.content-bg .product-details,
.wc-block-grid__product.content-bg .product-preview,
.wc-block-grid__product.content-bg > div:last-child,
.wc-block-grid__product.content-bg > div {
    background-color: var(--be-noir-2) !important;
    background: var(--be-noir-2) !important;
}

.wc-block-grid__product.product-loop-boxed:hover .product-details,
.wc-block-grid__product.product-loop-boxed:hover > div:last-child {
    background-color: var(--be-noir-2) !important;
}
/* Container carte */
.wc-block-grid__product.product-loop-boxed {
    background: var(--be-noir-2) !important;
    border: 1px solid rgba(126,180,219, 0.2) !important;
    border-radius: var(--be-radius) !important;
    overflow: hidden !important;
    box-shadow: none !important;
    transition: border-color 0.3s ease, transform 0.3s ease !important;
}

.wc-block-grid__product.product-loop-boxed:hover {
    border-color: rgba(126,180,219, 0.45) !important;
    transform: translateY(-3px) !important;
}

/* Fond clair pour PNG transparents — image uniquement */
.wc-block-grid__product.product-loop-boxed .wc-block-grid__product-image {
    background-color: #f0ece4 !important;
}

/* Reset fond sur textes */
.wc-block-grid__product.product-loop-boxed .wc-block-grid__product-title {
    background: transparent !important;
    font-family: var(--be-font) !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    color: var(--be-or-clair) !important;
    padding: 14px 18px 24px !important;
    text-align: center;
}

.wc-block-grid__product.product-loop-boxed .wc-block-grid__product-price {
    background: transparent !important;
    font-family: var(--be-font) !important;
    color: var(--be-muted) !important;
    padding: 0 18px 12px !important;
}

/* [AJOUT 21/09/2026, corrigé] Prix masqué uniquement pour la Dream Machine
   dans la grille "Nouveaux produits" — jamais .wc-block-grid__product-price
   directement (classe générique partagée par tous les produits de la
   grille, présents et futurs). Ciblage prévu via data-product_id du bouton
   "Ajouter au panier" natif WooCommerce, mais Kadence surcharge le rendu
   de cette grille avec son propre template (product-loop-boxed) qui ne
   pose PAS cet attribut — vérifié en direct, aucun data-product_id/
   .add_to_cart_button dans le DOM réel. Seul identifiant fiable présent :
   le lien vers la fiche produit. Ciblé par son slug plutôt que son ID —
   plus robuste, le slug étant probablement identique sur tous les
   environnements contrairement à l'ID (bases non synchronisées, section 23). */
.wc-block-grid__product:has(a[href*="/produit/dream-machine/"]) .wc-block-grid__product-price {
    display: none;
}

.wc-block-grid__product.product-loop-boxed .wc-block-grid__product-add-to-cart {
    background: transparent !important;
    padding: 0 16px 16px !important;
}

/* Bouton Louer dans les blocs */
.wc-block-grid__product .rental-loop-btn {
    display: block !important;
    background: transparent !important;
    color: var(--be-or) !important;
    border: 1px solid var(--be-border) !important;
    font-family: var(--be-font) !important;
    font-size: 11px !important;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 11px 0 !important;
    text-align: center;
    border-radius: var(--be-radius) !important;
    text-decoration: none;
    transition: all 0.25s ease;
}

.wc-block-grid__product .rental-loop-btn:hover {
    background: rgba(126,180,219, 0.08) !important;
    border-color: var(--be-or) !important;
}

/* Fond clair pour PNG transparents — panier vide */
.wc-block-grid__product a.wc-block-grid__product-link {
    background-color: #f0ece4 !important;
    display: block;
}

/* ── Bloc panier WooCommerce (Gutenberg) — lisibilité ── */

/* Fond du bloc */
.wp-block-woocommerce-cart,
.wc-block-cart {
    background: transparent !important;
}

/* 🔴 Fix débordement mobile — panier coupé à droite, "cadre qui ne va pas".
   Cause réelle, trouvée dans le CSS natif de WooCommerce Blocks (cart.css) :
   .wc-block-components-sidebar-layout (le conteneur articles + total) passe
   en colonne empilée via une *Container Query* — `@container (max-width:
   699px){ flex-direction:column }` — pas une media query classique sur la
   largeur de l'écran. Une container query ne se déclenche que si un ancêtre
   déclare explicitement `container-type` ; rien sur ce site n'en déclare
   un, donc cette règle ne s'active JAMAIS, quelle que soit la taille de
   l'écran. Le panier reste alors sur sa base non conditionnelle
   (display:flex, flex-wrap:wrap, *pas* de flex-direction:column), où les
   deux blocs (articles / totaux) se disputent une largeur pensée pour un
   layout 2 colonnes desktop — d'où le débordement à droite, masqué par un
   ancêtre plutôt que scrollable (« on ne voit pas... le côté droit »).
   Le formulaire de checkout n'a pas ce souci : sa propre mise en page ne
   dépend pas de cette container query.
   Fix : on rejoue la même intention (empiler + pleine largeur) via une
   media query classique sur la largeur d'écran, garantie de fonctionner
   ici, au même seuil que prévu à l'origine (699px). */
@media (max-width: 699px) {
    .wc-block-components-sidebar-layout {
        flex-direction: column;
    }
    .wc-block-cart__main,
    .wc-block-cart__sidebar {
        width: 100%;
        flex-basis: 100%;
        min-width: 0;
    }
}

/* Deuxième couche du même débordement, indépendante de la container query
   ci-dessus : .wp-block-woocommerce-cart porte la classe Gutenberg
   "alignwide" (sortie de colonne, pensée pour le desktop). Son max-width
   calculé ignore le padding gauche/droite du conteneur réel (.entry-content)
   et se cale sur la largeur de la fenêtre — le bloc déborde donc de ses
   propres 24px de marge de page sur mobile. Neutralisé pour rester à 100%
   du conteneur réel plutôt que de la fenêtre. */
@media (max-width: 699px) {
    .wp-block-woocommerce-cart.alignwide,
    .wp-block-woocommerce-checkout.alignwide {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Nom du produit */
.wc-block-cart-item__product a,
.wc-block-cart-items .wc-block-cart-item__product-name {
    color: var(--be-or-clair) !important;
    font-family: var(--be-font) !important;
    font-size: 17px !important;
    text-decoration: none !important;
}

/* Prix */
.wc-block-cart-item__total .woocommerce-Price-amount,
.wc-block-cart-item__prices .woocommerce-Price-amount {
    color: var(--be-or) !important;
    font-family: var(--be-font) !important;
}

/* Meta (date de début) */
.wc-block-cart-item__product .wc-block-components-product-metadata,
.wc-block-cart-item__product dl,
.wc-block-cart-item__product dl dt,
.wc-block-cart-item__product dl dd {
    color: var(--be-muted) !important;
    font-size: 13px !important;
    font-style: italic;
}

/* Headers tableau */
.wc-block-cart-items__header span {
    color: var(--be-or) !important;
    font-family: var(--be-font) !important;
    font-size: 10px !important;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* Fond des lignes */
.wc-block-cart-items__row {
    background: var(--be-noir-2) !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}

/* Bouton supprimer */
.wc-block-cart-item__remove-link {
    color: var(--be-muted) !important;
    font-size: 12px !important;
}

/* Total sidebar */
.wc-block-cart__sidebar .wc-block-components-totals-item__label,
.wc-block-cart__sidebar .wc-block-components-totals-item__value {
    color: rgba(234, 237, 240, 0.7) !important;
    font-family: var(--be-font) !important;
}

/* Total final */
.wc-block-cart__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-cart__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    color: var(--be-or) !important;
    font-size: 18px !important;
}

/* ── Lisibilité totaux sidebar panier ── */
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value,
.wc-block-components-totals-item span,
.wc-block-cart__sidebar span,
.wc-block-cart__sidebar p {
    color: rgba(234, 237, 240, 0.75) !important;
    font-family: var(--be-font) !important;
}

/* Sous-total / Forfait labels */
.wc-block-components-totals-shipping .wc-block-components-totals-item__label,
.wc-block-components-totals-coupon .wc-block-components-totals-item__label {
    color: rgba(234, 237, 240, 0.6) !important;
}

/* Total estimé — plus visible */
.wc-block-components-totals-footer-item span {
    color: var(--be-or) !important;
    font-size: 17px !important;
}

/* "Ajouter des codes promo" */
.wc-block-components-totals-coupon__button,
.wc-block-components-panel__button {
    color: var(--be-muted) !important;
    font-family: var(--be-font) !important;
    font-size: 13px !important;
}

/* Header colonnes PRODUIT / TOTAL */
.wc-block-cart-items__header .wc-block-cart-items__header-product,
.wc-block-cart-items__header .wc-block-cart-items__header-total {
    color: var(--be-or) !important;
    font-size: 10px !important;
    letter-spacing: 0.25em !important;
}

/* Prix sous le nom produit */
.wc-block-cart-item__prices {
    color: var(--be-muted) !important;
}

/* Quantité */
.wc-block-components-quantity-selector__input {
    color: var(--be-blanc) !important;
    background: var(--be-noir-3) !important;
    border-color: var(--be-border) !important;
}

/* ── Bloc checkout — lisibilité générale ── */
.wc-block-checkout,
.wc-block-components-checkout-step,
.wc-block-components-form,
.wc-block-checkout__payment-method {
    color: rgba(234, 237, 240, 0.8) !important;
}

/* Labels et textes checkout */
.wc-block-components-checkout-step__title,
.wc-block-components-checkout-step__description,
.wc-block-components-checkout-step p,
.wc-block-components-checkout-step span,
.wc-block-components-checkout-step label {
    color: rgba(234, 237, 240, 0.75) !important;
    font-family: var(--be-font) !important;
}

/* Options de paiement */
.wc-block-components-payment-method-label,
.wc-block-components-payment-method-label__brand,
.wc-block-checkout__payment-method label,
.wc-block-checkout__payment-method p,
.wc-block-checkout__payment-method span {
    color: rgba(234, 237, 240, 0.75) !important;
    font-family: var(--be-font) !important;
}

/* Texte mode test Stripe */
.wc-block-checkout__payment-method .payment_box p,
.wc-block-components-payment-method-description {
    color: var(--be-muted) !important;
    font-size: 13px !important;
    font-style: italic;
}

/* Options livraison */
.wc-block-components-radio-control__label,
.wc-block-components-radio-control__description {
    color: rgba(234, 237, 240, 0.75) !important;
    font-family: var(--be-font) !important;
}

/* [AJOUT 19/09/2026] Habillage des 2 méthodes de livraison — un accent de
   couleur par option (glace = domicile, mauve = point relais, mêmes teintes
   que le reste de la charte) sur la bordure gauche de chaque ligne, plus le
   sous-titre "délai" (champ delivery_time natif WooCommerce, voir
   Rental_Checkout::add_shipping_delivery_time()) mis en valeur en italique
   discret — même recette que .wc-block-components-payment-method-description. */
.wc-block-components-shipping-rates-control__package-item {
    border-left: 2px solid transparent;
    padding-left: 10px !important;
    transition: border-color .25s;
}
.wc-block-components-shipping-rates-control__package-item:nth-of-type(1) {
    border-left-color: rgba(126, 180, 219, .45);
}
.wc-block-components-shipping-rates-control__package-item:nth-of-type(2) {
    border-left-color: rgba(175, 143, 197, .45);
}
.wc-block-components-shipping-rates-control__package__delivery_time {
    color: var(--be-muted) !important;
    font-size: 12.5px !important;
    font-style: italic;
}

/* Checkbox labels */
.wc-block-components-checkbox__label {
    color: rgba(234, 237, 240, 0.6) !important;
    font-size: 13px !important;
    font-style: italic;
}

/* [MODIFIÉ 21/09/2026] Case décharge de responsabilité — la case
   additionnelle "order" (Rental_Waiver::register_checkout_field()) arrive
   accompagnée d'un titre générique "Informations de commande
   supplémentaires" (auto-généré par WooCommerce Blocks) qui n'a pas lieu
   d'être pour une seule case isolée — masqué. */
#order-fields .wc-block-components-checkout-step__heading-container {
    display: none;
}

/* [MODIFIÉ 21/09/2026] Case native masquée (reste fonctionnelle — voir
   rental-waiver-checkout.js, qui relaie les clics de la case miroir
   ci-dessous vers elle) : gardée dans le DOM plutôt que supprimée, pour que
   WooCommerce continue de la valider/bloquer la commande normalement.
   Masquage désormais basé sur la classe STABLE générée par WooCommerce à
   partir du field id (wc-block-components-address-form__<id>, id = tiret
   au lieu de slash) plutôt que sur une classe ajoutée à la main en JS :
   React régénère entièrement le `className` de cette ligne à chaque
   re-render (ex. quand l'état d'erreur "has-error" apparaît après une
   tentative de soumission), ce qui effaçait silencieusement notre classe
   manuelle et faisait ressurgir la case native brute — corrigé. */
.wc-block-components-checkbox.wc-block-components-address-form__belle-epoque-health-waiver-accepted {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* Case miroir — même apparence que les autres cases à cocher du checkout
   (.wc-block-components-checkbox), avec un vrai <a> pour "conditions
   d'utilisation" au milieu de la phrase (voir rental-waiver-checkout.js). */
.rental-waiver-mirror {
    display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; cursor: pointer;
    font-family: var(--be-font); font-size: 13px; font-style: italic;
    color: rgba(234, 237, 240, 0.6); line-height: 1.5;
}
/* [FIX 21/09/2026] "accent-color" seul délègue le rendu à l'apparence
   native du navigateur — cohérent sous Chrome mais visuellement différent
   des autres cases sous Firefox/Safari. Case dessinée en CSS pur
   (appearance:none + coche via ::after), comme la case CGV native
   (.wc-block-components-checkbox__mark), pour un rendu identique partout. */
.rental-waiver-mirror__input {
    -webkit-appearance: none; appearance: none;
    flex: 0 0 auto; margin-top: 2px; width: 16px; height: 16px;
    border: 1px solid rgba(234, 237, 240, .35); border-radius: 3px;
    background: transparent; cursor: pointer; position: relative;
    transition: background-color .15s, border-color .15s;
}
.rental-waiver-mirror__input:checked {
    background: var(--ice); border-color: var(--ice);
}
.rental-waiver-mirror__input:checked::after {
    content: ''; position: absolute; left: 4px; top: 1px;
    width: 4px; height: 8px;
    border: solid var(--bg); border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
/* [FIX 21/09/2026] Sans ça, la case passait seule sur sa propre ligne,
   au-dessus du texte, au lieu de rester alignée à côté de lui (comme la
   case CGV juste au-dessus). Cause : un flex-item texte sans "min-width"
   explicite garde par défaut min-width:auto, c-à-d qu'il refuse de
   rétrécir sous la largeur de son contenu NON coupé (max-content) — avec
   "flex-wrap: wrap", la case + ce texte trop large pour tenir sur une
   ligne faisaient alors basculer le texte entier sur la ligne suivante
   plutôt que de laisser le texte se replier normalement à côté de la
   case. flex:1 1 0 + min-width:0 autorisent le texte à rétrécir et donc
   à revenir se replier normalement sur la même ligne que la case. */
.rental-waiver-mirror__text {
    flex: 1 1 0%; min-width: 0;
}

/* [AJOUT 21/09/2026] Erreur "case obligatoire" reflétée depuis la case
   native cachée (voir rental-waiver-checkout.js) — la case native affiche
   son propre message natif WooCommerce, mais celui-ci est invisible
   puisqu'il vit à l'intérieur de la ligne masquée ci-dessus. Sans ce
   relais, une tentative de commande sans avoir coché la case échouait
   réellement (le serveur bloque bien), mais SANS AUCUN retour visible —
   l'utilisateur ne comprenait pas pourquoi rien ne se passait. */
.rental-waiver-mirror__error {
    flex-basis: 100%;
    display: none;
    font-style: normal;
    font-size: 12.5px;
    color: #ff6b6b !important; /* garde-fou spécificité, cohérent avec le reste du fichier */
}
.rental-waiver-mirror.has-error .rental-waiver-mirror__error {
    display: block;
}
.rental-waiver-mirror.has-error .rental-waiver-mirror__input {
    border-color: #ff6b6b;
    outline: 1px solid #ff6b6b;
    outline-offset: 2px;
}

/* Inputs Stripe */
.wc-block-gateway-container input,
.wc-block-components-stripe-input {
    background: var(--be-noir-3) !important;
    border-color: var(--be-border) !important;
    color: var(--be-blanc) !important;
}

/* [AJOUT 19/09/2026] Case "Enregistrez les informations de paiement..."
   masquée — la sauvegarde est désormais forcée côté serveur pour toute
   commande de location (Rental_Checkout::force_save_payment_method_for_rental,
   filtre wc_stripe_force_save_payment_method), donc la case n'a plus de
   rôle fonctionnel. La cacher plutôt que la laisser décochable évite de
   laisser croire au client qu'il a le choix. Remplacée par une phrase
   fixe injectée en JS juste après (be-checkout-notice.js), même
   emplacement dans le flux du formulaire de paiement.
   !important : la feuille de style de WooCommerce Blocks (chargée après
   la nôtre sur cette page) redéfinit display sur ce composant. */
.wc-block-components-payment-methods__save-card-info {
    display: none !important;
}
.be-save-card-notice {
    font-family: var(--be-font);
    font-size: 13px;
    font-style: italic;
    color: rgba(234, 237, 240, 0.6);
    margin: 8px 0 0;
}