/**
 * CSS Frontend Commun - DSI Location
 * Styles partagés pour toutes les pages frontend
 *
 * @package DSI\Location
 * @since 2.0.0
 */

/* ==========================================================================
   Variables CSS
   ========================================================================== */
:root {
    --dsi-primary: #0073aa;
    --dsi-primary-green: #00857f;
    --dsi-primary-teal: #33c1ba;
    --dsi-primary-red: #dd1c1a;
    --dsi-success: #28a745;
    --dsi-danger: #dc3545;
    --dsi-warning: #ffc107;
    --dsi-info: #17a2b8;
    --dsi-light: #f9f9f9;
    --dsi-border: #ddd;
    --dsi-text: #333;
    --dsi-radius: 8px;
    --dsi-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   Messages et notifications
   ========================================================================== */
.notice {
    padding: 0.75rem 1rem;
    margin-top: 0.5rem;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    font-size: 1rem;
}

.notice-success {
    background-color: #d1e7dd;
    color: #0f5132;
    border-color: #badbcc;
}

.notice-error {
    background-color: #f8d7da;
    color: #842029;
    border-color: #f5c2c7;
}

.notice-info {
    background-color: #cff4fc;
    color: #055160;
    border-color: #b6effb;
}

.notice-warning {
    background-color: #fff3cd;
    color: #664d03;
    border-color: #ffecb5;
}

.message {
    margin-bottom: 0.6rem;
}

.message {
  white-space: pre-line;
}

/* ==========================================================================
   Utilitaires
   ========================================================================== */
.hidden {
    display: none;
}

/* ==========================================================================
   Modales génériques
   ========================================================================== */
.dsi-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    z-index: 1000;
}

.dsi-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.dsi-modal-content {
    position: relative;
    background: #fff;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    max-width: 400px;
    margin: auto;
    z-index: 1001;
}

.dsi-modal-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

/* ==========================================================================
   Single Product - Cacher panier/meta
   ========================================================================== */
.cart,
.product_meta {
    display: none !important;
}

.wc-block-components-quantity-selector {
    display: none !important;
}

/* ==========================================================================
   Conteneurs principaux
   ========================================================================== */
.dsi-location-calendar-wrapper,
.dsi-reservation-form-wrapper {
    margin: 30px 0;
    padding: 25px;
    background: var(--dsi-light);
    border-radius: var(--dsi-radius);
    box-shadow: var(--dsi-shadow);
}

.dsi-location-calendar-wrapper h3,
.dsi-reservation-form-wrapper h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: var(--dsi-text);
    font-size: 1.5em;
    font-weight: 600;
}

#dsi-unit-calendars {
    width: 100%;
}

/* ==========================================================================
   Tooltip modale empreinte CB
   ========================================================================== */
.dsi-empreinte-cb {
    position: relative;
    display: inline-block;
}

.dsi-empreinte-cb p {
    margin: 0;
}

.dsi-empreinte-prix {
    font-weight: bold;
    color: #000;
}

.dsi-tooltip-trigger {
    margin-left: 5px;
    font-size: 14px;
    cursor: help;
    display: inline-block;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
    background: var(--dsi-primary);
    color: #fff;
    font-weight: bold;
    vertical-align: middle;
}

.dsi-tooltip-modal {
    display: none !important;
    visibility: hidden;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    background: #fff;
    border: 1px solid var(--dsi-border);
    border-radius: 6px;
    padding: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    width: 700px;
    max-width: 90vw;
    z-index: 10000;
}

.dsi-tooltip-modal.dsi-tooltip-visible {
    display: block !important;
    visibility: visible;
}

.dsi-tooltip-arrow {
    position: absolute;
    top: 100%;
    left: 20px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #fff;
}

.dsi-tooltip-content {
    font-size: 14px;
    line-height: 1.6;
    color: var(--dsi-text);
    font-weight: normal;
    text-align: left;
}

.dsi-tooltip-title {
    margin-bottom: 10px;
    color: var(--dsi-primary);
    font-size: 15px;
    font-weight: bold;
}

.dsi-tooltip-text {
    margin: 0;
}

.dsi-tooltip-text p {
    margin: 0 0 10px 0;
    color: #000 !important;
}

.dsi-tooltip-text p:last-child {
    margin-bottom: 0;
}

.dsi-tooltip-text ul {
    margin: 10px 0;
    padding-left: 20px;
}

.dsi-tooltip-text li {
    margin-bottom: 5px;
}
.woocommerce-thankyou-order-details,
.woocommerce-table--order-details {
	background: #abd7d5 !important;
}

.woocommerce-thankyou-order-received {
  color: #00857f !important;
}

.woocommerce-order {
	margin: 2rem 0;
}

a.wc-block-components-checkout-return-to-cart-button {
    display: none;
}

/* Cache la ligne "Actions:" (titre + cellule) */
.woocommerce-order-details table.woocommerce-table--order-details th.order-actions--heading,
.woocommerce-order-details table.woocommerce-table--order-details th.order-actions--heading + td{
  display: none !important;
}

.woocommerce-table--order-details .product-quantity{
  display: none !important;
}

.woocommerce-table--order-details .product-name{
  font-weight: bold;
}

/* ==========================================================================
   Checkout - Bouton Valider la réservation
   ========================================================================== */
/* WooCommerce Blocks checkout button */
.wc-block-components-checkout-place-order-button,
button.wc-block-components-button.wc-block-components-checkout-place-order-button {
    background: var(--dsi-primary-green) !important;
    background: linear-gradient(180deg, #00a099 0%, #00857f 100%) !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    padding: 16px 32px !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 133, 127, 0.4) !important;
    transition: all 0.3s ease !important;
    text-transform: none !important;
    letter-spacing: 0.025em !important;
}

.wc-block-components-checkout-place-order-button:hover,
button.wc-block-components-button.wc-block-components-checkout-place-order-button:hover {
    background: linear-gradient(180deg, #00857f 0%, #006b66 100%) !important;
    box-shadow: 0 6px 16px rgba(0, 133, 127, 0.5) !important;
    transform: translateY(-2px) !important;
}

.wc-block-components-checkout-place-order-button:active,
button.wc-block-components-button.wc-block-components-checkout-place-order-button:active {
    transform: translateY(0) !important;
}

/* WooCommerce Classic checkout button */
#place_order {
    background: var(--dsi-primary-green) !important;
    background: linear-gradient(180deg, #00a099 0%, #00857f 100%) !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    padding: 16px 32px !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 133, 127, 0.4) !important;
    transition: all 0.3s ease !important;
}

#place_order:hover {
    background: linear-gradient(180deg, #00857f 0%, #006b66 100%) !important;
    box-shadow: 0 6px 16px rgba(0, 133, 127, 0.5) !important;
    transform: translateY(-2px) !important;
}

/* ==========================================================================
   Checkout - Spinner de chargement visible
   ========================================================================== */
/* Spinner WooCommerce Blocks - plus visible */
.wc-block-components-spinner,
.wc-block-components-button .wc-block-components-spinner {
    border-color: rgba(0, 133, 127, 0.2) !important;
    border-top-color: var(--dsi-primary-green) !important;
    border-width: 3px !important;
    width: 24px !important;
    height: 24px !important;
}

/* Overlay de chargement pendant la soumission */
.wc-block-components-checkout-place-order-button[disabled],
.wc-block-components-checkout-place-order-button[aria-disabled="true"],
button.wc-block-components-button[disabled] {
    opacity: 0.8 !important;
    cursor: wait !important;
    position: relative !important;
}

/* Overlay global pendant le traitement */
.wc-block-checkout__form.is-loading::after,
.wc-block-checkout.is-loading::after,
.woocommerce-checkout.processing::after {
    content: "" !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(255, 255, 255, 0.8) !important;
    z-index: 9998 !important;
}

.wc-block-checkout__form.is-loading::before,
.wc-block-checkout.is-loading::before,
.woocommerce-checkout.processing::before {
    content: "" !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    width: 50px !important;
    height: 50px !important;
    margin: -25px 0 0 -25px !important;
    border: 4px solid rgba(0, 133, 127, 0.2) !important;
    border-top-color: var(--dsi-primary-green) !important;
    border-radius: 50% !important;
    animation: dsi-spin 0.8s linear infinite !important;
    z-index: 9999 !important;
}

.wc-block-checkout__actions .wc-block-checkout__actions_row{
    justify-content: flex-start !important;
    line-height: 20px !important;
}

.dsi-cancel-checkout-link{
    padding-block: 1rem !important;
    background-color: #f0c807 !important;
    box-shadow: 0 4px 12px rgb(139, 116, 4, 0.4) !important;
    font-size: 1.1rem !important;
}

@keyframes dsi-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   Spinner de redirection (message succès formulaire réservation)
   ========================================================================== */
.dsi-redirect-spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-left: 10px;
    border: 3px solid rgba(15, 81, 50, 0.2);
    border-top-color: #0f5132;
    border-radius: 50%;
    animation: dsi-spin 0.8s linear infinite;
    vertical-align: middle;
}

/* ==========================================================================
   Checkout - Overlay de chargement personnalisé
   ========================================================================== */
.dsi-checkout-loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dsi-checkout-loading-content {
    text-align: center;
    padding: 40px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.dsi-checkout-spinner {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    border: 5px solid rgba(0, 133, 127, 0.15);
    border-top-color: var(--dsi-primary-green);
    border-radius: 50%;
    animation: dsi-spin 0.8s linear infinite;
}

.dsi-checkout-loading-text {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 500;
    color: #333;
}


/* Espace sous le contenu uniquement sur Mon compte */
body.woocommerce-account .woocommerce,
body.woocommerce-account .site-main,
body.woocommerce-account #primary {
  padding-bottom: 40px; /* ajuste */
}

/* Sécurité : si ton thème utilise des colonnes en float (fréquent), on "clear" */
body.woocommerce-account .woocommerce::after {
  content: "";
  display: block;
  clear: both;
}

/* ==========================================================================
   Mon Compte - Statuts de réservation DSI
   ========================================================================== */
.dsi-reservation-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: 600;
    text-transform: none;
    white-space: nowrap;
}

/* À venir - Bleu */
.dsi-reservation-status.status-confirmed {
    background-color: #e3f2fd;
    color: #1565c0;
}

/* À retirer - Orange */
.dsi-reservation-status.status-to-pickup {
    background-color: #fff3e0;
    color: #e65100;
}

/* En cours - Vert */
.dsi-reservation-status.status-in-progress {
    background-color: #e8f5e9;
    color: #2e7d32;
}

/* Retourné - Gris */
.dsi-reservation-status.status-returned {
    background-color: #f5f5f5;
    color: #616161;
}

/* Non retourné - Rouge */
.dsi-reservation-status.status-not-returned {
    background-color: #ffebee;
    color: #c62828;
}

/* Non retiré - Rouge foncé */
.dsi-reservation-status.status-not-picked-up {
    background-color: #fce4ec;
    color: #ad1457;
}

/* Compteur d'articles dans la colonne Total */
.dsi-item-count {
    display: block;
    color: #666;
    font-size: 0.85em;
    margin-top: 2px;
}

a.woocommerce-button.button.view {
    margin-left: 10px;
}

/* ==========================================================================
   Panier/Checkout - Masquage description produits
   ========================================================================== */
.wc-block-components-product-metadata__description {
    display: none !important;
}

/* ==========================================================================
   Page de confirmation - Commande annulée pour conflit
   ========================================================================== */
.dsi-conflict-cancelled .woocommerce-order-overview,
.dsi-conflict-cancelled .woocommerce-order-details,
.dsi-conflict-cancelled .woocommerce-customer-details,
.dsi-conflict-cancelled .woocommerce-thankyou-order-received {
    display: none !important;
}

/* ==========================================================================
   Shortcode Tarifs
   ========================================================================== */
.dsi-tarifs-shortcode {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.dsi-tarifs-title {
    margin: 0 0 20px 0;
    font-size: 1.3em;
    color: #333;
    text-align: center;
    border-bottom: 2px solid #0073aa;
    padding-bottom: 15px;
}

.dsi-tarifs-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 15px;
}

.dsi-tarifs-table th {
    background: #0073aa;
    color: white;
    padding: 12px;
    text-align: center;
    font-weight: 600;
    border: 1px solid #005a87;
}

.dsi-tarifs-table td {
    padding: 15px;
    text-align: center;
    border: 1px solid #e0e0e0;
    background: #f9f9f9;
}

.dsi-tarifs-table td.dsi-price {
    font-size: 1.3em;
    font-weight: 700;
    color: #28a745;
}

.dsi-caution,
.dsi-cancellation-delay {
    margin: 10px 0;
    padding: 12px;
    background: #f0f0f0;
    border-left: 4px solid #0073aa;
    border-radius: 4px;
    font-size: 0.95em;
}

.dsi-caution strong,
.dsi-cancellation-delay strong {
    color: #0073aa;
    margin-right: 8px;
}

.dsi-error {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 12px;
    border-radius: 4px;
    margin: 10px 0;
}

@media (max-width: 768px) {
    .dsi-tarifs-table {
        font-size: 0.9em;
    }

    .dsi-tarifs-table th,
    .dsi-tarifs-table td {
        padding: 8px;
    }
}

/* ==========================================================================
   Single Product - Responsive mobile (image + titre en colonne)
   ========================================================================== */

@media (max-width: 1024px) {
    #dsi-product-primary {
        margin-top: 0 !important;
    }
    .product{
        margin-top: 4rem !important;
    }

    #dsi-product-primary{
        padding-inline: 1rem;
    }

    .box-resa {
        flex-direction: column;
    }

    .fc .fc-scrollgrid-liquid {
        height: 350px;
    }


}


@media (max-width: 768px) {
    
    #dsi-product-primary {
        margin-top: 6rem !important;
    }

    .product{
        margin-top: 0 !important;
    }

    /* Forcer l'affichage en colonne sur mobile */
    .single-product div.product {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Galerie d'images : pleine largeur */
    .single-product div.product .woocommerce-product-gallery,
    .single-product div.product .images {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin-right: 0 !important;
        margin-bottom: 20px !important;
    }

    /* Summary (titre, prix, etc.) : pleine largeur */
    .single-product div.product .summary,
    .single-product div.product .entry-summary {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
    }

    /* Réinitialiser les flex/grid du thème si besoin */
    .single-product div.product > .woocommerce-product-gallery,
    .single-product div.product > .images,
    .single-product div.product > .summary,
    .single-product div.product > .entry-summary {
        flex: 0 0 100% !important;
    }
}

/* =========================================
   WOOCOMMERCE - PAGE "MON COMPTE" (MOBILE)
   Objectif :
   - 1 colonne (menu + contenu full width)
   - Tableau "Réservations / Commandes" rendu en cards
   - Zéro scroll horizontal
   ========================================= */

/* ---------- 0) Sécurité anti débordements ---------- */
.woocommerce-account,
.woocommerce-account *{
  box-sizing: border-box;
}

/* ---------- 1) Layout desktop : ne rien casser ---------- */
/* (Rien ici volontairement) */


/* ---------- 2) MOBILE : layout Mon compte en 1 colonne ---------- */
@media (max-width: 768px){

  /* wrapper global Woo / contenu */
  .woocommerce-account .woocommerce,
  .woocommerce-account .entry-content,
  .woocommerce-account .woocommerce-MyAccount{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* casse les layouts desktop (flex/float) */
  .woocommerce-account .woocommerce-MyAccount{
    display: block !important;
  }

  /* Navigation + contenu = pleine largeur */
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content{
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* Menu Mon compte plus compact (optionnel) */
  .woocommerce-account .woocommerce-MyAccount-navigation ul{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 0 0 14px 0;
    padding: 0;
    list-style: none;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation li{
    margin: 0;
  }

  /* liens menu : zone tap plus confortable */
  .woocommerce-account .woocommerce-MyAccount-navigation a{
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
  }
}


/* ---------- 3) MOBILE : tables Woo -> cards (sans scroll horizontal) ---------- */
@media (max-width: 768px){

  /* Cible : tables Woo courantes + ta table custom si présente */
  .woocommerce-account table.shop_table,
  .woocommerce-account table.widefat,
  .woocommerce-account table.user-reservations-table,
  .woocommerce-account table.woocommerce-orders-table,
  .woocommerce-account table.woocommerce-MyAccount-orders{
    width: 100% !important;
    max-width: 100% !important;
    border-collapse: separate;
    border-spacing: 0;
  }

  /* Cache les entêtes (on affiche les labels via ::before) */
  .woocommerce-account table.shop_table thead,
  .woocommerce-account table.widefat thead,
  .woocommerce-account table.user-reservations-table thead,
  .woocommerce-account table.woocommerce-orders-table thead,
  .woocommerce-account table.woocommerce-MyAccount-orders thead{
    display: none !important;
  }

  /* Force le tableau en blocs */
  .woocommerce-account table.shop_table,
  .woocommerce-account table.widefat,
  .woocommerce-account table.user-reservations-table,
  .woocommerce-account table.woocommerce-orders-table,
  .woocommerce-account table.woocommerce-MyAccount-orders,
  .woocommerce-account table.shop_table tbody,
  .woocommerce-account table.widefat tbody,
  .woocommerce-account table.user-reservations-table tbody,
  .woocommerce-account table.woocommerce-orders-table tbody,
  .woocommerce-account table.woocommerce-MyAccount-orders tbody{
    display: block;
    width: 100%;
  }

  /* Chaque ligne = une card */
  .woocommerce-account table.shop_table tbody tr,
  .woocommerce-account table.widefat tbody tr,
  .woocommerce-account table.user-reservations-table tbody tr,
  .woocommerce-account table.woocommerce-orders-table tbody tr,
  .woocommerce-account table.woocommerce-MyAccount-orders tbody tr{
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 12px 0;
    padding: 12px;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 12px;
    background: #fff;
  }

  /* Chaque cellule = ligne "label / valeur" */
  .woocommerce-account table.shop_table tbody td,
  .woocommerce-account table.widefat tbody td,
  .woocommerce-account table.user-reservations-table tbody td,
  .woocommerce-account table.woocommerce-orders-table tbody td,
  .woocommerce-account table.woocommerce-MyAccount-orders tbody td{
    display: flex;
    width: 100%;
    padding: 6px 0;
    border: 0 !important;
    align-items: flex-start;
    gap: 12px;

    /* anti débordement */
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Labels : priorité à data-title (WooCommerce) */
  .woocommerce-account table.shop_table tbody td::before,
  .woocommerce-account table.widefat tbody td::before,
  .woocommerce-account table.user-reservations-table tbody td::before,
  .woocommerce-account table.woocommerce-orders-table tbody td::before,
  .woocommerce-account table.woocommerce-MyAccount-orders tbody td::before{
    content: attr(data-title);
    font-weight: 600;
    flex: 0 0 90px;   /* important: évite que la valeur (date) se casse */
    max-width: 90px;
  }

  /* Si un td n'a pas de data-title => on ne montre pas un label vide */
  .woocommerce-account table.shop_table tbody td:not([data-title])::before,
  .woocommerce-account table.widefat tbody td:not([data-title])::before,
  .woocommerce-account table.user-reservations-table tbody td:not([data-title])::before,
  .woocommerce-account table.woocommerce-orders-table tbody td:not([data-title])::before,
  .woocommerce-account table.woocommerce-MyAccount-orders tbody td:not([data-title])::before{
    content: "";
  }

  /* Colonne actions : empilement */
  .woocommerce-account table.shop_table tbody td:last-child,
  .woocommerce-account table.widefat tbody td:last-child,
  .woocommerce-account table.user-reservations-table tbody td:last-child,
  .woocommerce-account table.woocommerce-orders-table tbody td:last-child,
  .woocommerce-account table.woocommerce-MyAccount-orders tbody td:last-child{
    flex-direction: column;
    align-items: stretch;
  }

  .woocommerce-account table.shop_table tbody td:last-child::before,
  .woocommerce-account table.widefat tbody td:last-child::before,
  .woocommerce-account table.user-reservations-table tbody td:last-child::before,
  .woocommerce-account table.woocommerce-orders-table tbody td:last-child::before,
  .woocommerce-account table.woocommerce-MyAccount-orders tbody td:last-child::before{
    flex: 0 0 auto;
    max-width: 100%;
    margin-bottom: 6px;
  }

  /* Boutons full width */
  .woocommerce-account table.shop_table tbody td:last-child .button,
  .woocommerce-account table.widefat tbody td:last-child .button,
  .woocommerce-account table.user-reservations-table tbody td:last-child .button,
  .woocommerce-account table.woocommerce-orders-table tbody td:last-child .button,
  .woocommerce-account table.woocommerce-MyAccount-orders tbody td:last-child .button{
    width: 100%;
    max-width: 100%;
    white-space: normal !important;
  }

  /* Petites améliorations visuelles */
  .woocommerce-account table.shop_table tbody td:last-child .button + .button{
    margin-top: 8px;
  }
}


/* ---------- 4) FALLBACK : si TA table custom n'a PAS de data-title ---------- */
/* Active uniquement si besoin : adapte les labels selon l'ordre des colonnes.
   Exemple : Réservation / Date / État / Total / Actions
*/
@media (max-width: 768px){

  .woocommerce-account table.user-reservations-table tbody td:nth-child(1)::before{ content:"Réservation"; }
  .woocommerce-account table.user-reservations-table tbody td:nth-child(2)::before{ content:"Date"; }
  .woocommerce-account table.user-reservations-table tbody td:nth-child(3)::before{ content:"État"; }
  .woocommerce-account table.user-reservations-table tbody td:nth-child(4)::before{ content:"Total"; }
  .woocommerce-account table.user-reservations-table tbody td:nth-child(5)::before{ content:"Actions"; }
}