/*
 Theme Name:   Bootscore Child
 Description:  Bootscore Child Theme
 Author:       Bootscore
 Author URI:   https://bootscore.me
 Template:     bootscore
 Version:      6.0.0
 Requires at least: 5.0
 Tested up to: 6.6
 Requires PHP: 7.4
 License: MIT License
 License URI: https://github.com/bootscore/bootscore-child/blob/main/LICENSE
 Text Domain:  bootscore
*/

/* -----------------------------------------------------------
   Variables globales (couleurs, rayons, ombres)
----------------------------------------------------------- */
:root{
  --bg-grad-1:#c6cb2e;           /* vert chaud  */
  --bg-grad-2:#3de3dd;           /* turquoise   */
  --text:#0f172a;
  --muted:#637085;
  --card-bg: rgba(255,255,255,.85);
  --card-blur: 6px;
  --line:#e6e9f0;
  --radius-xl:24px;
  --radius-lg:16px;
  --radius:12px;
  --shadow-sm:0 6px 18px rgba(0,0,0,.08);
  --shadow-md:0 10px 28px rgba(0,0,0,.12);
  --primary:#2563eb;
  --success:#16a34a;
  --warning:#f59e0b;
  --danger:#ef4444;
  --info:#0ea5e9;
  --light:#f8fafc;
  --dark:#0b1222;
}

/* Meilleure lisibilité si thème système sombre */
@media (prefers-color-scheme: dark){
  :root{
    --text:#e7e9ee;
    --muted:#9aa3b2;
    --card-bg: rgba(20,25,35,.6);
    --line:#263142;
    --light:#0f172a;
    --dark:#e8ecf1;
  }
}

/* -----------------------------------------------------------
   Base
----------------------------------------------------------- */
html, body{ height:100%; }
body{
  margin:0; padding:0;
  background: linear-gradient(135deg, var(--bg-grad-1) 0%, var(--bg-grad-2) 100%);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

/* -----------------------------------------------------------
   Navigation
----------------------------------------------------------- */
.navbar{
  height:60px;
  background: linear-gradient(135deg, #f5fd00 0%, #00ffc8 100%);
  border-bottom: 1px solid rgba(255,255,255,.25);
  box-shadow: var(--shadow-sm);
}

/* -----------------------------------------------------------
   Contenu / Cards
----------------------------------------------------------- */
.content-wrapper{
  background: var(--card-bg);
  backdrop-filter: blur(var(--card-blur));
  -webkit-backdrop-filter: blur(var(--card-blur));
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 16px;
  margin: 16px;
  box-shadow: var(--shadow-sm);
}

/* Section générique eLoto */
.eloto-section{
  color: var(--text);
  background: var(--card-bg);
  backdrop-filter: blur(var(--card-blur));
  border-radius: var(--radius-lg);
  padding: 18px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

/* -----------------------------------------------------------
   Headers de blocs
----------------------------------------------------------- */
.eloto-home{ color:#000; border-radius:25px; }
.header-content h1{ font-size:2.25rem; color:#e11d48; margin:0 0 6px; }
.header-content .lead{ font-size:1.05rem; color:#111; }

/* -----------------------------------------------------------
   WooCommerce : boutons & formulaires
----------------------------------------------------------- */
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button{
  background: #111;
  color: #fff;
  border: none;
  border-radius: 28px;
  padding: 10px 22px;
  font-weight: 800;
  letter-spacing:.2px;
  transition: transform .08s ease, filter .2s ease, box-shadow .2s ease;
  box-shadow: var(--shadow-sm);
}
.woocommerce input.button{ background:#1e40af; } /* variation */
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review{
  width:100%;
  float:none;
  margin:0 auto;
}
.woocommerce-checkout #order_review{ text-align:center; }
.woocommerce-checkout #payment{
  color: var(--text);
  font-weight: 700;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
}

/* Table alternée + dégradé léger */
.woocommerce table.shop_table_responsive tr:nth-child(2n) td,
.woocommerce-page table.shop_table_responsive tr:nth-child(2n) td{
  background: linear-gradient(135deg, #8896ab 0%, #a3a1c9 100%);
  color:#0b1222;
}

/* -----------------------------------------------------------
   Select2 chips (numéros)
----------------------------------------------------------- */
select.wsf-field ~ .select2-container--default .select2-selection--multiple .select2-selection__choice{
  background-color:#fbfb0b !important;
  color:#000;
  border:1px solid #b4b800;
  border-radius:50%;
  font-size:14px;
  font-weight:800;
  margin:5px;
  margin-inline-end:5px;
  width:36px;height:36px;line-height:36px;text-align:center;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow: 0 2px 4px rgba(0,0,0,.18);
}

/* -----------------------------------------------------------
   Catalogue produits — grille responsive moderne
----------------------------------------------------------- */
/* Container */
.woocommerce ul.products{
  display:grid;
  grid-template-columns: repeat( auto-fit, minmax(180px, 1fr) );
  gap: 14px;
  margin: 0; padding: 0;
}

/* Carte produit */
.woocommerce ul.products li.product{
  list-style:none;
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .08s ease, box-shadow .2s ease, filter .2s ease;
}
.woocommerce ul.products li.product:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  filter: brightness(1.01);
}

.woocommerce ul.products li.product a img{
  width:100%; height:auto; display:block;
  aspect-ratio: 4/3; object-fit: cover;
}

.woocommerce ul.products li.product h2.woocommerce-loop-product__title{
  text-align:center;
  font-size: .95rem;
  font-weight: 800;
  letter-spacing:.1px;
  margin: 10px 10px 6px;
  color: var(--text);
}

.woocommerce ul.products li.product .price{
  display:flex; justify-content:center; align-items:center;
  gap:6px;
  margin-bottom: 10px;
  font-weight:800;
  color:#111827;
}

@media (max-width: 768px){
  .woocommerce ul.products{ gap: 10px; }
}

/* -----------------------------------------------------------
   Boutons d’action maison (fond verre)
----------------------------------------------------------- */
.action-buttons .action-btn{
  background: rgba(255,255,255,.2);
  color:#fff;
  border:none; text-decoration:none;
  border-radius: 28px;
  padding:10px 22px;
  font-weight:800;
  transition: transform .08s ease, filter .2s ease, box-shadow .2s ease;
  box-shadow: var(--shadow-sm);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
}
.action-buttons .action-btn .icon{ font-size:1.2rem; }
.action-buttons .action-btn:hover{ transform: translateY(-2px); background: rgba(255,255,255,.28); }
.action-buttons .action-btn:active{ transform: translateY(0); }

/* -----------------------------------------------------------
   Responsivité header
----------------------------------------------------------- */
@media (max-width: 768px){
  .header-content h1{ font-size:1.8rem; }
  .header-content .lead{ font-size:1rem; }
  .content-wrapper{ margin:12px; padding:12px; border-radius:20px; }
}

/* -----------------------------------------------------------
   Animations discrètes (utilisables via .pulse)
----------------------------------------------------------- */
@keyframes pulse{
  0%{ transform: scale(1); opacity:1; }
  50%{ transform: scale(1.03); opacity:.9; }
  100%{ transform: scale(1); opacity:1; }
}
.pulse{ animation: pulse 0.9s ease-in-out; }

/* -----------------------------------------------------------
   Utilitaires (peu invasifs)
----------------------------------------------------------- */
.rounded-xl{ border-radius: var(--radius-xl); }
.rounded-lg{ border-radius: var(--radius-lg); }
.text-muted-2{ color: var(--muted); }
.bg-glass{
  background: var(--card-bg);
  backdrop-filter: blur(var(--card-blur));
  -webkit-backdrop-filter: blur(var(--card-blur));
}
.border-soft{ border:1px solid var(--line); }
.shadow-soft{ box-shadow: var(--shadow-sm); }