/* ----- Base / Thème ----- */
*,*::before,*::after{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#0b0f14;color:#eef3f7}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

:root{
  --c-bg:#0b0f14;
  --c-card:#111823;
  --c-card-alt:#0f1420;
  --c-accent:#00e7d6;
  --c-accent-2:#6ec2ff;
  --c-text:#eef3f7;
  --c-text-dim:#b7c3cf;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

/* ----- Décor ----- */
.bg-stage{
  position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
  background: radial-gradient(1200px 600px at 10% 0%, rgba(0,231,214,.12) 0%, transparent 60%),
              radial-gradient(900px 500px at 100% 100%, rgba(110,194,255,.10) 0%, transparent 60%),
              linear-gradient(180deg, #0b0f14 0%, #0b0f14 30%, #0d131b 100%);
}
.bg-ball{ position:absolute; width:min(54vmin,560px); aspect-ratio:1/1; top:8vh; left:-18vw; opacity:.07; filter:drop-shadow(0 0 24px rgba(0,231,214,.15)); }
.bg-ball svg{width:100%;height:100%}
.bg-ball path{ fill:none; stroke:var(--c-accent); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

/* ----- Appbar ----- */
.appbar{ position:sticky; top:-70px; z-index:50; transition:top .45s ease, background .3s ease, box-shadow .3s ease; background:rgba(11,15,20,.35); backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,.06); }
.appbar.scrolled{ top:0; background:rgba(10,14,19,.7); box-shadow:var(--shadow) }
.appbar-inner{ max-width:1200px; margin:auto; padding:10px 20px; display:flex; align-items:center; gap:16px; }
.brand{display:flex; align-items:center; gap:10px}
.brand img{height:44px}
.brand a{font-weight:700; letter-spacing:.3px}
.spacer{flex:1}
.langbox{position:relative; display:flex; align-items:center; gap:8px}
.lang-trigger{ display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:10px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); cursor:pointer }
.lang-trigger img{height:18px;border-radius:3px}
.lang-list{ position:absolute; top:120%; left:0; min-width:180px; background:var(--c-card); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:8px; display:none; box-shadow:var(--shadow) }
.langbox[aria-expanded="true"] .lang-list{display:block}
.lang-list li{list-style:none}
.lang-list button{ width:100%; display:flex; align-items:center; gap:10px; padding:8px 10px; border:0; background:transparent; color:var(--c-text); cursor:pointer; border-radius:10px }
.lang-list button:hover{background:rgba(255,255,255,.06)}
.lang-list img{height:18px;border-radius:3px}
.actions a{ display:inline-flex; align-items:center; justify-content:center; width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); margin-left:8px; transition:transform .2s ease }
.actions a:hover{transform:translateY(-2px); background:rgba(255,255,255,.09)}
.white-image { filter: brightness(0) invert(1); }
.white-image[aria-current="page"]{filter:none; background:linear-gradient(135deg,var(--c-accent),var(--c-accent-2)); border-color:transparent}
.white-image[aria-current="page"]:hover{filter:none; background:linear-gradient(135deg,var(--c-accent),var(--c-accent-2)) !important; border-color:transparent}

/* ----- Tabs ----- */
.tabbar{ position:relative; z-index:40; background:rgba(255,255,255,0.02); border-bottom:1px solid rgba(255,255,255,.06); }
.tabs{ max-width:1200px; margin:auto; padding:8px 16px; display:flex; gap:18px; overflow:auto; scrollbar-width:none }
.tabs::-webkit-scrollbar{display:none}
.tab{ color:var(--c-text-dim); padding:10px 14px; border-radius:24px; white-space:nowrap; border:1px solid transparent; transition:color .2s, background .2s, border-color .2s }
.tab:hover{color:var(--c-text); background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.08)}
.tab[aria-current="page"]{color:#051416; background:linear-gradient(135deg,var(--c-accent),var(--c-accent-2)); border-color:transparent}
.hidden{display:none !important}
.mail{color:var(--c-accent); text-decoration:none}
.mail:hover{text-decoration:underline}

/* ----- Hero compact + Toolbar ----- */
.hero{ border-bottom:1px solid rgba(255,255,255,.06); }
.hero-compact{ min-height:30vh; display:flex; align-items:center; padding:36px 20px; }
.hero-inner{ max-width:1200px; margin:auto; width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.hero-left{ display:flex; align-items:center; gap:16px; }
.hero-logo{ width:100px; height:auto; margin-right: 20px; margin-left:3%; }
.hero h1{ font-size:clamp(28px,4.8vw,42px); margin:10% 0 7%; }
.hero p{ margin: 0 0 10%}
.muted{ color:var(--c-text-dim); }
.toolbar{ display:flex; flex-direction: column; align-items:center; gap:10px;  margin-right:1%; font-size: 1.2rem; font-weight: 500;}
.toolbar input, .toolbar select{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  color:var(--c-text); border-radius:12px; padding:10px 12px; outline:none; font-size: 1rem; margin-top:5%;
}
.toolbar input::placeholder{ color:#9fb1c2; }
.soixcente{width: 72%; margin-right: auto;}

/* ----- Contenu ----- */
.container{max-width:1200px; margin:auto; padding:28px 20px 56px; display:grid; gap:28px}
.section-card{ background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:29px 24px 24px 24px; box-shadow:var(--shadow); }
.section-title{ margin:0; font-size:1.8rem;}
.entete{display: flex; max-width: 100%;}
.entete h2{margin-right: auto; }
/* Style pour le sélecteur de tri (#sort) */
.sortbox { position:relative; display:flex; align-items:center; gap:8px }
.sort-trigger {
  display:flex; align-items:center; gap:8px;
  padding:8px 15px; border-radius:10px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  cursor:pointer; color:var(--c-text); font-size: 0.9rem;
}
.sort-trigger svg { pointer-events:none }
.sort-list {
  position:absolute; top:120%; left:0; min-width:180px;
  background:var(--c-card); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:8px; display:none; box-shadow:var(--shadow);
}
#selected-sort{margin-right:10px; }
.sortbox[aria-expanded="true"] .sort-list { display:block }
.sort-list li { list-style:none }
.sort-list button {
  width:100%; display:flex; align-items:center; gap:10px;
  padding:8px 10px; border:0; background:transparent;
  color:var(--c-text); cursor:pointer; border-radius:10px
}
.sort-list button:hover { background:rgba(255,255,255,.06) }

/* Style pour tous les autres sélecteurs d'option */
select:not(#sort) {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  color: #ffffff;
  font-size: 1rem;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  padding-right: 35px;
  min-height: 38px;
}

select:not(#sort):hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

select:not(#sort):focus {
  border-color: rgba(0, 231, 214, 0.4);
  box-shadow: 0 0 0 2px rgba(0, 231, 214, 0.1);
}

/* Options dans tous les selects */
select option {
  background-color: var(--c-card);
  color: var(--c-text);
  padding: 8px;
}

/* Style spécifique pour le sélecteur dans la toolbar */
.toolbar select {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--c-text);
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
  font-size: 1rem;
  margin-top: 5%;
  height: 44px; /* Ajustement pour correspondre à l'input */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  padding-right: 35px;
}

/* Groupes + Grille équipes */
#groups{margin-top: 49px;}
.group-block{ margin-top:10px; }
.group-block h3{ margin:8px 0 12px; font-size:1.15rem; color:#a9c4d9; }
.teams-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:14px; }

.team-card{
  background:var(--c-card); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:14px; display:flex; flex-direction:column; gap:10px;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; cursor:pointer;
}
.team-card:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.14); box-shadow:0 14px 26px rgba(0,0,0,.35); }
.team-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.team-name{ font-weight:700; }
.team-odds{ font-weight:800; color:#09f; }
.team-actions{ display:flex; gap:8px; }
.micro-btn{ padding:6px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.18); background:transparent; color:var(--c-text); font-weight:700; }
.micro-btn.primary{ border:0; background:linear-gradient(135deg,var(--c-accent),var(--c-accent-2)); color:#051416; }

.btn{ display:inline-flex; align-items:center; justify-content:center; padding:12px 20px; border-radius:12px; font-weight:700; cursor:pointer; border:0; transition:transform .2s ease; text-decoration:none; }
.btn:hover{ transform:translateY(-2px); filter:brightness(1.05); }
.btn.primary{ background:linear-gradient(135deg,var(--c-accent),var(--c-accent-2)); color:#051416; }
.btn.outline{ background:transparent; border:1px solid rgba(255,255,255,.18); color:var(--c-text); }

/* Drawer */
.drawer{
  position:fixed; left:0; right:0; bottom:-100%; background:var(--c-card); border-top:1px solid rgba(255,255,255,.08);
  box-shadow:0 -20px 40px rgba(0,0,0,.45); border-radius:20px 20px 0 0; padding:16px; z-index:70; transition:bottom .25s ease;
}
#drawer-team-name{font-size: 1.7rem; margin: 5% auto 7%}
.drawer.open{ bottom:0; }
.drawer-header{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.drawer-team{ display:flex; align-items:center; gap:8px; font-weight:800; }
.drawer-body{ display:grid; gap:14px; margin-top:8px; }
.drawer-footer{ display:flex; gap:10px; justify-content:flex-end; margin-top:8px; }
.icon-btn{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:8px; cursor:pointer; }

.odds-box{ display:inline-flex; gap:8px; align-items:center; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); padding:8px 10px; border-radius:12px; width:max-content; }
.odds-box .label{ color:var(--c-text-dim); }
#drawer-odds{ color:#09f; }

.bet-title{ margin:10% 0 6%; }
.bet-input{
  width:100%; max-width:420px; height:6rem; font-size:3rem; font-weight:900; text-align:center; padding:.5rem 1rem;
  border-radius:12px; border:2.5px solid #09f; outline:none; background:#08121d; color:var(--c-text); margin-bottom: 7%;
}
.no-spinner::-webkit-outer-spin-button,.no-spinner::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
.no-spinner{ -moz-appearance:textfield }

.bet-calculation-container-text{}
.bet-calculation-text{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-weight:700;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:12px; display:inline-block; }
.bet-caution-text{ color:var(--c-text-dim); font-size:.9rem; margin-top:6px; margin-bottom: 15%;}
.calc-part{ opacity:.9 }
.calc-result{ font-size:1.15em }

/* Effet survol */
.has-light{ position:relative; overflow:hidden; }
.has-light::before{ content:""; position:absolute; inset:0; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.15), transparent 80%); opacity: var(--light-opacity, 0); pointer-events:none; transition: opacity .15s ease; }

/* Footer */
footer{ border-top:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02); padding:18px 20px; text-align:center; color:var(--c-text-dim) }
.social-media{
  display:flex; gap:16px; justify-content:center; margin: 1.5% 0 1% 0;
}
.social-media a{
  display:inline-block; width:24px; height:24px; color:var(--c-text-dim); transition:color .2s ease
}
.social-media a:hover{ color:var(--c-accent) }
.social-media svg{ width:100%; height:100%; fill:currentColor }

/* Accessibilité / utilitaires */
.visually-hidden{ position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px, 1px, 1px, 1px); white-space:nowrap;}

/* Responsive */
@media (min-width:980px){
  /* En desktop, le drawer se comporte comme un panneau latéral droit */
  .drawer{
    top:0; right:0; bottom:0; left:auto; width:min(440px, 40vw);
    border-radius:0; border-left:1px solid rgba(255,255,255,.08); border-top:none;
    transform:translateX(100%); transition:transform .25s ease;
  }
  .drawer.open{ transform:translateX(0); }
}
@media (max-width:600px){
  .toolbar{ width:100%; }
  .toolbar input{ flex:1; width:100%; }
}


/* ------------------------------
   RESPONSIVE
-------------------------------*/
@media (max-width:960px){
  .hero-inner{grid-template-columns:1fr}
  .appbar-inner{gap:10px}
  .two-columns {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 30px;
  }
  .country-content {
    padding-right: 0;
    order: 2;
  }
  .country-image {
    order: 1;
  }
}
@media (max-width:600px){
  .lang-trigger span{display:flex;color:white;}
  .brand a{display:none}
  .hero .cta-buttons {
    flex-direction: column;
    align-items: center;
  }
  .hero .btn {
    width: 100%;
    max-width: 280px;
  }
}

/* Styles pour les détails */
#details-view {
  padding: 0 20px 20px;
}

.detail-section {
  margin-bottom: 20px;
}

.detail-section h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: var(--c-text);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 5px;
}

.detail-item {
  margin-bottom: 12px;
}

.detail-label {
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
  color: var(--c-text);
  opacity: 0.8;
  font-size: 0.9rem;
}

.detail-value {
  color: var(--c-text);
  white-space: pre-line;
  line-height: 1.5;
}

.hidden {
  display: none;
}

/* Ajustements pour le drawer en mode détails */
#bet-drawer.details-mode .drawer-footer {
  display: none;
}