/*
 * Custom CSS pour Bootship Theme
 * Palette de couleurs personnalisée
 */

/* ===== VARIABLES CSS - NOUVELLE PALETTE ===== */
:root {
    /* Nouvelle palette de couleurs */
    --primary-blue: #2563EB;        /* Bleu principal */
    --navy-dark: #1E293B;           /* Bleu marine foncé */
    --light-gray: #F8FAFC;          /* Gris clair */
    --cyan-accent: #06B6D4;         /* Cyan d'accentuation */
    --neutral-gray: #94A3B8;        /* Gris neutre */
    
    /* Couleurs dérivées pour les variations */
    --primary-blue-hover: #1D4ED8;
    --primary-blue-light: #3B82F6;
    --navy-lighter: #334155;
    --cyan-hover: #0891B2;
    --light-gray-alt: #F1F5F9;
    --dark-text: #0F172A;
    
    /* Couleurs de statut */
    --success: #10B981;
    --warning: #F59E0B;
    --danger: #EF4444;
    
    /* Transparences */
    --glass-bg: rgba(37, 99, 235, 0.1);
    --glass-border: rgba(37, 99, 235, 0.2);
}

/* ===== ARRIÈRE-PLAN GÉNÉRAL ===== */
body {
    background: linear-gradient(135deg, var(--navy-dark) 0%, #0F172A 100%);
    color: var(--light-gray);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    min-height: 100vh;
}

/* ===== HEADER & NAVIGATION ===== */
.header {
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(37, 99, 235, 0.3);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.logo-text {
    color: white;
    font-weight: 800;
}

.logo-icon {
    background: linear-gradient(135deg, var(--primary-blue), var(--cyan-accent));
    color: white;
}

/* ===== BOUTONS ===== */
.btn-primary {
    background: linear-gradient(135deg, var(--primary-blue), var(--primary-blue-hover));
    border: none;
    color: white;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.3);
    background: linear-gradient(135deg, var(--primary-blue-hover), var(--primary-blue));
}

.btn-secondary {
    background: rgba(148, 163, 184, 0.1);
    color: var(--navy-dark);
    border: 1px solid var(--neutral-gray);
}

.btn-secondary:hover {
    background: var(--neutral-gray);
    color: white;
    transform: translateY(-1px);
}

.btn-link {
    background: transparent;
    color: var(--primary-blue);
    text-decoration: none;
}

.btn-link:hover {
    color: var(--primary-blue-hover);
    text-decoration: underline;
}

/* ===== BOUTON PANIER ===== */
.cart-button {
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid var(--cyan-accent);
    color: var(--cyan-accent);
}

.cart-button:hover {
    background: var(--cyan-accent);
    color: white;
}

.cart-badge {
    background: var(--danger);
    color: white;
}

/* ===== SECTION HERO ===== */
.hero {
    background: linear-gradient(135deg, var(--navy-dark) 0%, #0F172A 100%);
    position: relative;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(6, 182, 212, 0.1) 100%);
    pointer-events: none;
}

.hero-content {
    background: rgba(30, 41, 59, 0.3);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(37, 99, 235, 0.3);
    position: relative;
    z-index: 1;
}

.hero-title {
    color: white;
    font-weight: 800;
}

.hero-gradient-text {
    background: linear-gradient(135deg, var(--primary-blue), var(--cyan-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    color: rgba(255, 255, 255, 0.8);
}

/* ===== CARDS & GLASS EFFECT ===== */
.glass-card {
    background: rgba(30, 41, 59, 0.4);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(37, 99, 235, 0.3);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    color: white;
}

.featured-card,
.event-card {
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(37, 99, 235, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.featured-card:hover,
.event-card:hover {
    box-shadow: 0 8px 40px rgba(37, 99, 235, 0.3);
    border-color: var(--primary-blue);
}

/* ===== SECTIONS PRINCIPALES ===== */
.featured-title,
.partners-title {
    color: white;
    font-weight: 700;
}

.search-section {
    background: rgba(30, 41, 59, 0.4);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(37, 99, 235, 0.3);
}

/* ===== FORMULAIRES ===== */
.search-input,
.auth-input {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.5);
    color: white;
    border-radius: 12px;
}

.search-input:focus,
.auth-input:focus {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
    outline: none;
}

.search-input::placeholder,
.auth-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.search-select {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.5);
    color: white;
}

.search-icon {
    color: rgba(255, 255, 255, 0.6);
}

/* ===== ÉVÉNEMENTS ===== */
.event-title {
    color: white;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.event-venue {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}

.event-description {
    color: rgba(255, 255, 255, 0.8);
}

.event-price {
    color: var(--cyan-accent);
    font-weight: 700;
}

.event-featured-badge {
    background: var(--primary-blue);
    color: white;
}

.event-datetime-item {
    color: rgba(255, 255, 255, 0.7);
}

.event-availability {
    color: rgba(255, 255, 255, 0.6);
}

/* ===== MODAL ===== */
.modal-overlay {
    background: rgba(15, 23, 42, 0.8);
}

.modal-content {
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(37, 99, 235, 0.3);
}

.modal-title {
    color: white;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

.modal-venue {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}

.modal-info-section h3 {
    color: white;
}

.modal-info-item {
    color: rgba(255, 255, 255, 0.8);
}

.modal-price {
    color: var(--cyan-accent);
}

/* ===== SIDEBAR PANIER ===== */
.cart-panel {
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(15px);
    border-left: 1px solid rgba(37, 99, 235, 0.3);
}

.cart-title {
    color: white;
}

.cart-item {
    background: rgba(51, 65, 85, 0.5);
    border: 1px solid rgba(37, 99, 235, 0.2);
}

.cart-item-title {
    color: white;
}

.cart-item-venue,
.cart-item-date {
    color: rgba(255, 255, 255, 0.7);
}

.cart-item-price {
    color: var(--cyan-accent);
}

.cart-total-amount {
    color: var(--primary-blue);
}

.cart-empty {
    color: rgba(255, 255, 255, 0.6);
}

/* ===== CONTRÔLES ===== */
.quantity-controls {
    background: rgba(30, 41, 59, 0.6);
}

.quantity-btn,
.cart-quantity-btn {
    background: rgba(37, 99, 235, 0.3);
    color: white;
}

.quantity-btn:hover,
.cart-quantity-btn:hover {
    background: var(--primary-blue);
    color: white;
}

.quantity-value,
.cart-quantity-value {
    color: white;
}

/* ===== FOOTER ===== */
.footer {
    background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy-lighter) 100%);
}

.footer-section h4 {
    color: white;
}

.footer-links a {
    color: var(--neutral-gray);
}

.footer-links a:hover {
    color: var(--cyan-accent);
}

.footer-social a {
    background: rgba(6, 182, 212, 0.2);
    color: var(--cyan-accent);
}

.footer-social a:hover {
    background: var(--cyan-accent);
    color: white;
}

.footer-bottom {
    color: var(--neutral-gray);
    border-top-color: rgba(148, 163, 184, 0.3);
}

/* ===== SECTION PARTENAIRES ===== */
.partners-section {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(51, 65, 85, 0.8) 100%);
}

.partner-logo-container {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(37, 99, 235, 0.3);
    backdrop-filter: blur(10px);
}

.partner-logo-container:hover {
    background: rgba(30, 41, 59, 0.8);
    border-color: var(--primary-blue);
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.3);
}

/* ===== MENU MOBILE ===== */
.mobile-menu {
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(15px);
}

.mobile-link {
    color: white;
}

.mobile-link:hover {
    color: var(--cyan-accent);
}

/* ===== BARRES DE PROGRESSION ===== */
.modal-progress {
    background: rgba(148, 163, 184, 0.3);
}

.modal-progress-bar {
    background: linear-gradient(135deg, var(--primary-blue), var(--cyan-accent));
}

/* ===== ÉTATS VIDES ===== */
.empty-state {
    color: rgba(255, 255, 255, 0.7);
}

.empty-state h3 {
    color: white;
}

/* ===== SÉLECTEUR DE LANGUE ===== */
.lang-select {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.5);
    color: white;
}

/* ===== BOUTONS DE SUPPRESSION/DANGER ===== */
.cart-item-remove,
.cart-clear {
    color: var(--danger);
}

.cart-item-remove:hover,
.cart-clear:hover {
    color: #DC2626;
}

/* ===== PERSONNALISATION DES LIENS ===== */
a {
    color: var(--primary-blue);
    text-decoration: none;
}

a:hover {
    color: var(--primary-blue-hover);
    text-decoration: underline;
}

/* ===== TEXTES SECONDAIRES ===== */
.text-muted,
.text-secondary {
    color: var(--neutral-gray) !important;
}

/* ===== BORDURES ===== */
.border {
    border-color: rgba(37, 99, 235, 0.1) !important;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 768px) {
    .cart-panel {
        background: rgba(30, 41, 59, 0.98);
    }
    
    .hero-content {
        background: rgba(30, 41, 59, 0.5);
    }
}

/* ===== AJOUTS POUR MAINTENIR LE THÈME SOMBRE ===== */
.container {
    color: white;
}

/* Assurer que tous les textes principaux sont blancs sur fond sombre */
h1, h2, h3, h4, h5, h6 {
    color: white !important;
}

/* Sections de contenu sur fond sombre */
.site-content,
.main-content {
    background: transparent;
    color: white;
}

/* Navigation et menus */
.nav, .navbar, .menu {
    background: rgba(30, 41, 59, 0.9);
}

.nav-link, .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.8) !important;
}

.nav-link:hover, .navbar-nav .nav-link:hover {
    color: white !important;
}


/* ===== CORRECTIONS POUR LES CONTRÔLES DE QUANTITÉ ===== */

/* Correction pour le conteneur principal des contrôles */
.quantity-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(30, 41, 59, 0.6);
    border-radius: 12px;
    padding: 4px;
    border: 1px solid rgba(37, 99, 235, 0.3);
}

/* Boutons + et - avec taille fixe et centrage parfait */
.quantity-btn,
.cart-quantity-btn {
    width: 32px;
    height: 32px;
    min-width: 32px; /* Empêche le rétrécissement */
    background: rgba(37, 99, 235, 0.3);
    border: 1px solid rgba(37, 99, 235, 0.5);
    color: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: all 0.3s ease;
    padding: 0; /* Supprime le padding pour éviter les décalages */
}

.quantity-btn:hover,
.cart-quantity-btn:hover {
    background: var(--primary-blue);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4);
}

.quantity-btn:disabled,
.cart-quantity-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Affichage de la quantité centré */
.quantity-value,
.cart-quantity-value {
    color: white;
    font-weight: 600;
    font-size: 16px;
    min-width: 24px;
    text-align: center;
    line-height: 1;
    margin: 0 4px;
}

/* Contrôles spécifiques pour les articles du panier */
.cart-item-quantity {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(51, 65, 85, 0.5);
    border-radius: 8px;
    padding: 4px 8px;
}

.cart-item-quantity .cart-quantity-btn {
    width: 24px;
    height: 24px;
    min-width: 24px;
    font-size: 14px;
    border-radius: 4px;
}

.cart-item-quantity .cart-quantity-value {
    font-size: 14px;
    min-width: 20px;
    margin: 0 2px;
}

/* Contrôles dans les modales */
.modal-actions .quantity-controls {
    background: rgba(30, 41, 59, 0.8);
    padding: 6px;
}

/* Corrections pour l'alignement global des éléments */
.event-actions,
.modal-actions,
.cart-item-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.event-actions .quantity-controls,
.modal-actions .quantity-controls {
    flex-shrink: 0; /* Empêche la compression */
}

/* Responsive - ajustements pour mobile */
@media (max-width: 768px) {
    .quantity-controls {
        padding: 3px;
        gap: 6px;
    }
    
    .quantity-btn {
        width: 28px;
        height: 28px;
        min-width: 28px;
        font-size: 14px;
    }
    
    .quantity-value {
        font-size: 14px;
        min-width: 20px;
    }
    
    .event-actions,
    .modal-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    
    .cart-item-controls {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}









/* =========================================================
   PATCH V2 — COMPACT DESKTOP + MOBILE LISIBLES (SAFE)
   À placer tout en bas de ton CSS existant
   =======================================================*/

/* --- 0) Utilitaires de base (tout petit, non intrusif) --- */
:root{
  --gap-xs: .375rem;   /* 6px  */
  --gap-sm: .5rem;     /* 8px  */
  --gap-md: .75rem;    /* 12px */
  --gap-lg: 1rem;      /* 16px */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
}

/* --- 1) Barre de recherche : plus de chevauchement icône --- */
.search-input-group{ position:relative; }
.search-input-group .search-icon{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  pointer-events:none; line-height:1; opacity:.9;
}
.search-input-group .search-input{ padding-left:42px; }
/* fallback si l’icône est en background-image */
.search-input.has-bg-icon{
  background-position: 12px center !important;
  background-repeat: no-repeat;
  padding-left: 42px !important;
}

/* --- 2) Cartes évènements : compact, propres et régulières --- */
.event-card{
  display:flex; flex-direction:column;
  gap: var(--gap-md);
  padding: var(--gap-lg);
  border-radius: var(--radius-lg);
  min-width: 260px;
  max-width: 420px; /* compacte sur desktop, fluide en grille */
}
.event-card .event-image{
  aspect-ratio: 16/9; border-radius: var(--radius-md);
  overflow:hidden;
}
.event-card .event-image img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.event-card .event-content{ flex:1 1 auto; min-height: 1px; }
.event-card .event-title{
  font-weight: 800; line-height:1.2;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.event-card .event-description{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.event-card .event-actions{
  display:flex; align-items:center; justify-content:space-between;
  gap: var(--gap-md); margin-top:auto;
}

/* --- 3) Modale: header 16:9, corps scrollable, CTA sticky --- */
.modal-content{
  border-radius: var(--radius-lg);
  overflow:hidden;
}
.modal-header, .modal-hero, .modal-image, .modal-image-wrapper{
  aspect-ratio: 16/9; overflow:hidden;
}
.modal-header img, .modal-hero img, .modal-image img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.modal-body{
  max-height: min(68vh, 920px);
  overflow:auto;
  padding: clamp(16px, 2vw, 28px);
}
.modal-actions{
  display:flex; gap: var(--gap-md); align-items:center; justify-content:flex-end;
  padding: 12px clamp(16px, 2vw, 28px);
  border-top: 1px solid rgba(37,99,235,0.3);
  background: rgba(30,41,59,0.95);
  backdrop-filter: blur(10px);
}

/* --- 4) Formulaires (login/register) --- */
.woocommerce form .form-row,
form.login .form-row, form.register .form-row{
  margin-bottom: var(--gap-lg);
}
.auth-input, .woocommerce form input.input-text, .woocommerce form .select2-selection,
input[type="text"], input[type="email"], input[type="password"], input[type="search"], textarea, select{
  width:100%; min-height:44px; border-radius: var(--radius-md);
}
.woocommerce .button, .btn, .btn-primary{
  min-height:44px; padding: 10px 16px; border-radius: var(--radius-md);
}

/* --- 5) Mobile/Tablet : lisibilité + actions accessibles --- */
@media (max-width: 1024px){
  html, body{ overflow-x:hidden; }

  .event-card{ max-width: 100%; padding: var(--gap-lg); }

  .modal-content{
    width: 96vw; max-width: 980px; max-height: 92vh;
    display:flex; flex-direction:column;
  }
  .modal-body{ flex:1 1 auto; }
  .modal-actions{
    position: sticky; bottom: 0; margin-top:auto;
  }
  .modal-actions .btn-primary{ width:100%; }
}

/* --- 6) Desktop >= 1280px : look compact --- */
@media (min-width: 1280px){
  .events-grid, .products, .cards-grid{
    gap: 1.25rem;
  }
  .event-card{
    padding: .875rem 1rem;
    gap: .75rem;
  }
  .event-title{ font-size: clamp(1.05rem, 1.2vw, 1.25rem); }
  .event-venue, .event-datetime-item{ font-size: .925rem; }
  .modal-actions{ position: static; }
}

/* --- 7) Finitions d’alignement (quantité, CTA, etc.) --- */
.quantity-controls{ gap: var(--gap-sm); padding: 4px 6px; }
.quantity-btn, .cart-quantity-btn{
  width:32px; height:32px; min-width:32px; border-radius: var(--radius-sm);
}
.quantity-value, .cart-quantity-value{ min-width:24px; }

/* --- 8) Micro-fixes d’overflow / images --- */
img{ max-width:100%; height:auto; }
svg{ overflow:visible; }

/* --- 9) Smooth scroll mobile --- */
.modal-body, .cart-panel{ -webkit-overflow-scrolling: touch; }

/* =========================================================
   PATCH V3 — Micro-fixes demandés (mobile & modale)
   =======================================================*/

/* A) Boutique WooCommerce : cartes recentrées & propres */
.woocommerce ul.products,
.woocommerce-page ul.products{
  /* si la grille est en flex chez le thème, on centre la ligne */
  justify-content: center;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  margin-left: auto; margin-right: auto;
  text-align: center;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price{
  margin-left: auto; margin-right: auto;
}
@media (max-width: 520px){
  /* optionnel : bouton plein-largeur sur mobile, reste centré */
  .woocommerce ul.products li.product .button{
    width: 100%; max-width: 320px; margin-left:auto; margin-right:auto;
  }
}

/* B) Page d’accueil : prix + places bien centrés en mobile */
@media (max-width: 520px){
  .event-pricing,
  .event-price-row{
    justify-content: center;        /* au centre, pas space-between */
    text-align: center;
    gap: .5rem;
  }
  .event-price,
  .event-availability{
    margin: 0;                      /* supprime les marges latérales héritées */
  }
}

/* C) Modale : bordure droite jamais coupée (safe area) */
.modal-overlay{
  padding: 10px;                    /* espace interne pour éviter le collage aux bords */
  display:flex; align-items:flex-start; justify-content:center;
  overflow-y:auto;
}
@supports(padding: max(0px)){
  .modal-overlay{
    /* prend en compte les encoches (iOS / Android) */
    padding-left:  max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
}
.modal-content{
  width: calc(100vw - 20px);        /* garde 10px de chaque côté */
  max-width: 980px;
  box-sizing: border-box;
  margin-inline: auto;
}

/* D) Cartes évènements : centrage doux du CTA en mobile */
@media (max-width: 520px){
  .event-actions .btn,
  .event-card .btn-primary{
    display:block; width:100%; max-width:320px; margin: .75rem auto 0;
  }
}

/* E) (Sélecteur s’il existe) – rangée prix/places compacte desktop aussi */
.event-price-row{ align-items: baseline; gap: .75rem; }



/* =========================================================
   PATCH V3.1 — Modale: mobile OK + desktop rétabli
   (à coller tout en bas)
   =======================================================*/

/* Desktop ≥ 1025px : grande modale centrée, pas de bord coupé */
@media (min-width: 1025px){
  .modal-overlay{
    /* on garde le padding safe-area défini plus haut,
       et on centre verticalement la modale en desktop */
    align-items: center;
  }
  .modal-content{
    /* largeur auto, bornée par le viewport, sans écraser le layout */
    width: auto;
    max-width: min(1200px, calc(100vw - 80px)); /* respirable sur grands écrans */
    margin: 2vh auto;                            /* centrage + petit offset vertical */
    box-sizing: border-box;                      /* évite tout clip visuel */
  }
  .modal-body{
    max-height: min(72vh, 1000px);               /* zone scrollable confortable */
  }
  .modal-actions{
    position: static;                             /* comportement desktop attendu */
  }
}

/* Mobile / tablette ≤ 1024px : on conserve le comportement “plein écran” */
@media (max-width: 1024px){
  .modal-content{
    width: calc(100vw - 20px);                    /* tient compte du padding overlay */
    max-width: 980px;                             /* garde la limite mobile/tablette */
  }
}