/* ----- 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; margin-top: 3%}

: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{padding:0px 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 0; }
.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-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;
  }
}

/* Newspaper-style CSS for article page */

/* Import a serif font for body text */
@import url('https://fonts.googleapis.com/css2?family=Times+New+Roman:wght@400;700&family=Playfair+Display:wght@400;700&display=swap');

/* Override body font for article page */
body {
  font-family: 'Times New Roman', serif;
  line-height: 1.6;
  text-align: justify;
}

/* Newspaper article container */
.newspaper-article {
  /* background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border: 2px solid rgba(255,255,255,.1);
  box-shadow: 0 4px 20px rgba(0,0,0,.5); */
  border-radius: 8px;
  padding: 20px;
  position: relative;
}

/* Add a subtle paper texture */
.newspaper-article::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0);
  background-size: 20px 20px;
  opacity: 0.3;
  pointer-events: none;
}

/* Headlines */
.newspaper-article h1 {
  font-family: 'Playfair Display', serif;
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
  color: var(--c-accent);
  text-shadow: 1px 1px 2px rgba(0,0,0,.5);
  border-bottom: 2px solid var(--c-accent);
  padding-bottom: 3%;
  margin-bottom: 1%;
}

.newspaper-article header {
  margin-bottom: 4%;
}

.newspaper-article h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  font-weight: 700;
  margin-top: 30px;
  margin-bottom: 15px;
  color: var(--c-text);
  border-left: 4px solid var(--c-accent);
  padding-left: 15px;
}

.newspaper-article h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  font-weight: 700;
  margin-top: 20px;
  margin-bottom: 10px;
  color: var(--c-accent-2);
}

/* Body text */
.newspaper-article p {
  margin-bottom: 15px;
  color: var(--c-text);
}

/* Drop cap for first paragraph */
.drop-cap::first-letter {
  font-family: 'Playfair Display', serif;
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--c-accent);
}

/* Style for all digits in h1 */
.newspaper-article h1 span.digit {
  font-family: 'Playfair Display', serif;
  font-size: 4.5rem;
  font-weight: 700;
  color: var(--c-accent);
}

/* Multi-column layout for sections */
.newspaper-columns {
  column-count: 2;
  column-gap: 30px;
}

@media (max-width: 768px) {
  .newspaper-columns {
    column-count: 1;
  }
}

/* Lists */
.newspaper-article ul {
  margin-left: 20px;
  margin-bottom: 15px;
}

.newspaper-article li {
  margin-bottom: 8px;
  color: var(--c-text);
}

/* Table */
.newspaper-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.1);
}

.newspaper-article th, .newspaper-article td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,.1);
  color: var(--c-text);
}

.newspaper-article th {
  background: rgba(255,255,255,.05);
  font-weight: 700;
}

/* Details (FAQ) */
.newspaper-article details {
  margin: 15px 0;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  background: rgba(255,255,255,.02);
}

.newspaper-article summary {
  padding: 10px;
  cursor: pointer;
  font-weight: 700;
  color: var(--c-accent);
}

.newspaper-article details p {
  padding: 10px;
  margin: 0;
}

/* Call to action */
.cta {
  text-align: center;
  margin: 20px 0;
}

.btn {
  background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2));
  color: #051416;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  display: inline-block;
  transition: transform 0.2s;
}

.btn:hover {
  transform: translateY(-2px);
}

/* Footer */
.newspaper-article footer {
  text-align: center;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.1);
  color: var(--c-text-dim);
}

.fotter {
  background: none !important;
  border: none !important;
  font-size: 1.8rem !important;
}

.fotter a {
  color: var(--c-accent)
}

/* ===========================
   MEDIA QUERIES - Responsive
   ===========================
   Ajoute ce bloc à la fin de ton fichier CSS.
*/

/* Réduire animations si l'utilisateur a demandé des réductions de mouvement */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------------------------
   Large screens -> medium
   --------------------------- */
@media (max-width: 1200px) {
  .appbar-inner,
  .hero-inner,
  .container,
  .tabs,
  .section-card { max-width: 100%; padding-left: 18px; padding-right: 18px; }
  .hero h1 { font-size: clamp(26px, 5.2vw, 40px); }
}

/* ---------------------------
   Tablettes paysage / petits laptops
   --------------------------- */
@media (max-width: 980px) {
  /* simplifier l'hero */
  .hero-compact { padding: 28px 16px; min-height: 28vh; }
  .hero-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hero-left { width: 100%; display:flex; align-items:center; gap:12px; }
  .hero-logo { width:84px; margin:0 4% 0 3%; }

  /* appbar */
  .brand img{ height:40px; }
  .appbar-inner{ padding:10px 16px; gap:8px; }

  /* tabs scrollables */
  .tabs{ gap:12px; padding:8px 12px; }

  /* grilles */
  .teams-grid{ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap:12px; }

  /* drawer -> panneau latéral */
  .drawer{ width: min(420px, 38vw); padding:14px; }

  /* newspaper columns -> 2 colonnes max */
  .newspaper-columns { column-count: 2; column-gap: 22px; }
}

/* ---------------------------
   Tablettes portrait & grands téléphones (~<=768px)
   --------------------------- */
@media (max-width: 768px) {
  /* header / brand */
  .brand a{ display:none; } /* conserve logo mais enlève le texte */
  .brand img{ height:38px; }

  /* appbar interactions */
  .actions a{ width:44px; height:44px; }

  /* hero & toolbar */
  .hero h1{ font-size: clamp(22px, 6.5vw, 34px); margin:8% 0 6%; }
  .hero p{ margin-bottom:8%; }
  .toolbar{ flex-direction:row; gap:8px; width:100%; align-items:center; justify-content:space-between; margin-right:0; }
  .toolbar input, .toolbar select{ margin-top:0; font-size:0.95rem; height:42px; padding:8px 10px; }

  /* container spacing */
  .container{ padding-left:16px; padding-right:16px; gap:20px; }

  /* cards / grid -> 2 colonnes */
  .teams-grid{ grid-template-columns: repeat(2, 1fr); gap:12px; }

  /* team card touch target + texte */
  .team-card{ padding:12px; border-radius:12px; }
  .team-name{ font-size:1rem; }
  .team-odds{ font-size:0.95rem; }

  /* bet input taille */
  .bet-input{ max-width:100%; height:5rem; font-size:2.2rem; }

  /* drawer : bas qui remonte */
  .drawer{ bottom:0; left:0; right:0; width:100%; border-radius:16px 16px 0 0; padding:14px; }

  /* newspaper -> 1 colonne */
  .newspaper-columns{ column-count:1; column-gap: 18px; }
  .newspaper-article h1{ font-size:1.9rem; }
}

/* ---------------------------
   Smartphones (<=600px)
   --------------------------- */
@media (max-width: 600px) {
  /* generale */
  html, body { -webkit-text-size-adjust: 100%; }
  body { font-size: 15px; }

  /* appbar */
  .appbar{ padding:6px 8px; }
  .appbar-inner{ padding:8px 12px; gap:8px; }

  /* brand */
  .brand img{ height:34px; }
  .brand a{ display:none; }

  /* langues / actions */
  .lang-trigger{ padding:8px; gap:6px; }
  .actions a{ width:46px; height:46px; border-radius:12px; }

  /* tabs -> scroll horizontal plus d'espace tactile */
  .tab{ padding:12px 16px; font-size:0.95rem; border-radius:20px; }
  .tabs{ gap:12px; padding:8px 12px; }

  /* hero */
  .hero-compact{ padding:20px 12px; min-height:22vh; }
  .hero h1{ font-size: clamp(20px, 8.5vw, 30px); margin:6% 0 6%; }
  .hero p{ margin-bottom:6%; }

  /* toolbar -> empilement */
  .toolbar{ flex-direction: column; align-items:stretch; gap:8px; margin-right:0; }
  .toolbar input, .toolbar select{ width:100%; font-size:0.95rem; padding:10px 12px; }

  /* grilles -> 1 colonne */
  .teams-grid{ grid-template-columns: 1fr; gap:10px; }

  /* cartes plus compactes */
  .team-card{ padding:10px; gap:8px; border-radius:12px; }
  .team-name{ font-size:1rem; }

  /* boutons pleins largeur */
  .btn { width:100%; max-width:100%; padding:12px; border-radius:12px; box-sizing:border-box; }
  .btn.primary{ font-size:1rem; }

  /* micro-btn */
  .micro-btn{ padding:10px 12px; font-size:0.95rem; }

  /* bet input */
  .bet-input{ font-size:2rem; height:4.5rem; }

  /* odds box adaptation */
  .odds-box{ padding:8px; font-size:0.95rem; }

  /* drawer : pleine hauteur modale */
  .drawer{ height: auto; max-height: 85vh; overflow:auto; padding-bottom: 22px; }

  /* bg decorations : cacher ou réduire pour perf */
  .bg-ball{ display:none; }
  .bg-stage{ background-position: center top; }

  /* newspaper: titres et colonnes */
  .newspaper-article h1{ font-size:1.6rem; padding-bottom: 6%; }
  .newspaper-article h2{ font-size:1.15rem; padding-left:12px; border-left-width:3px; }

  /* détails / FAQ : plus d'espace tactile */
  .newspaper-article summary { padding: 14px; font-size: 1rem; border-radius:8px; }
  .newspaper-article details p { padding: 12px; font-size: 0.95rem; }

  /* footer spacing */
  footer { padding:18px 12px; font-size:0.9rem; }
  .social-media{ gap:12px; }
}

/* ---------------------------
   Très petits écrans (<=420px) et mobiles anciens
   --------------------------- */
@media (max-width: 420px) {
  /* réduire marges */
  .container { padding-left:12px; padding-right:12px; gap:14px; }

  /* hero texte plus compact */
  .hero h1 { font-size: 20px; line-height:1.15; }
  .hero p { font-size: 0.95rem; }

  /* tab tactile */
  .tab{ padding:10px 12px; font-size:0.95rem; }

  /* inputs clairs et pleins */
  input, select, textarea, .bet-input { font-size: 1rem; padding:10px; }

  /* bouton très accessible */
  .btn { padding:12px; font-size: 0.98rem; border-radius:10px; }

  /* newspaper: marge interne */
  .newspaper-article { padding:14px; }

  /* diminuer ombres trop lourdes pour perf */
  .section-card, .team-card { box-shadow: 0 6px 18px rgba(0,0,0,.28); }

  /* masquer icônes décoratifs si besoin */
  .white-image[aria-current="page"] { padding:6px; }
}

/* ---------------------------
   Orientation portrait spécifique
   --------------------------- */
@media (orientation: portrait) and (max-width: 900px) {
  .hero-inner { align-items:flex-start; }
  .toolbar { width:100%; }
  .team-card { flex-direction: row; align-items:center; gap:10px; }
}

/* ---------------------------
   Hit target improvements (global mobile)
   --------------------------- */
@media (max-width: 960px) {
  a, button, .tab, .micro-btn, .icon-btn { -webkit-tap-highlight-color: rgba(0,0,0,0.05); }
  .tab, .micro-btn, .icon-btn { padding: 12px 14px; min-height:44px; display:flex; align-items:center; justify-content:center; }
}