/*
* Eléments génériques (header, body & tableaux)
*/

:root {
    --card-border:#e9ecef;
    --muted:#6c757d;
    --gap:clamp(16px,3vw,40px); /* espace entre colonnes en desktop */
    --brand-h: 56px;
    --page-title-h: 56px;
    --container-max: 1200px;
    --container-padding: 10px;
    --bottombar-bg:#fff;
    --bottombar-h:  92px;
    --blue:#000EA8;
    --blue-hover:#0033ff;
    --grey:#e0e0e0;
    --grey-text:#2b2b2b;
}


/* Décaler le contenu sous les deux barres */
body{
    background:#fff;
    padding-top:calc(var(--brand-h) + var(--page-title-h));
    padding-bottom: calc(var(--bottombar-h));
}

/* Barre “2025” fixe et centrée */
.page-title-bar{
    position:fixed;
    top:var(--brand-h);
    left:0; right:0;
    background:#fff; 
    border-bottom:none;
    z-index:1035;
    height:var(--page-title-h);
}

.page-title-bar .page-title-inner{
    width:100%;
    height:100%;
    max-width:var(--container-max);
    margin:0 auto;
    padding:0 var(--container-padding);
    display:flex; align-items:center; justify-content:center;
    text-align:center;
    border-bottom:1px solid #f1f3f5; /* trait limité à 1200px */
}

/*.page-title-inner{max-width:1200px; margin:0 auto; padding:.65rem 1rem; text-align:center}*/
.page-title-inner .page-title{font-weight:bold; font-size:1.6rem; margin:0}

/* Conteneur des ligues : mobile = glissement horizontal ; desktop = 2 colonnes */
.leagues, .tableaux {
    display:flex;
    /* gap: var(--gap); */
    overflow-x:auto; 
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
}

.league, .tableau {
    flex:0 0 100%;            /* chaque volet prend 100% du viewport en mobile */
    min-width: 100%;
    scroll-snap-align:start;
    padding:0px 12px 24px;
    /*width:100%;*/
}


/* Desktop : largeur d’une ligue = min(50vw, 580px) */
@media (min-width: 992px){
  .leagues, .tableaux {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
  }

  .league, .tableau {
    flex: 0 0 min(50vw, 580px);
    min-width: min(50vw, 580px);
    padding:12px;
    width:auto;                /* pas besoin du 100% ici */
    scroll-snap-align: start; /* on conserve le snapping */
  }
}

/* Titre de ligue ou de bloc */
.league-title, .bloc-title {font-weight:700; font-size:1.125rem; text-align:center; margin:4px 0 12px}

/* Cartes & tables */
.card-app{border:1px solid var(--card-border); border-radius:14px}
.card-app h6{margin:0 0 10px; font-weight:700}
.table-app th{font-size:.8rem; color:var(--muted); font-weight:600}
.table-app td{vertical-align:middle; border-bottom:1px solid #f1f3f5}
.table-app tr:last-child td{border-bottom:none}

/* Centrage Place / Prono / Pts */
.table-app th.place, .table-app th.prono, .table-app th.pts,
.table-app td.place, .table-app td.prono, .table-app td.pts{
    text-align:center;
}

/* Pastilles podium */
.pill{
    width:28px;height:28px;border-radius:50%;
    display:inline-flex;align-items:center;justify-content:center;
    font-weight:700
}
.gold{background:#ffe08a}
.silver{background:#d6e4ff}
.bronze{background:#ffd7ba}
.gray{background:#f1f3f5}

/* Colonne équipe : wrap propre et prioritaire */
.team{white-space:normal; word-break:break-word;}

/* Dots pagination mobile */
.mobile-dots {
display:flex;
justify-content:center;
gap:8px;
margin:12px auto 0 auto;
}

.mobile-dots .dot {
width:8px;
height:8px;
border-radius:50%;
background:#cfd4da;
transition:background .3s;
}

.mobile-dots .dot.active {
background:#212529;
}

/* cacher les dots en desktop */
@media (min-width: 992px){
.mobile-dots { display:none; }
}


/* Header fixe "BéhourdBase" */
.header-brand{
    position:fixed; 
    top:0; left:0; right:0; 
    z-index:1040;
    background:#fff;
    border-bottom:none;
    height:var(--brand-h);
}

.header-brand .inner{
    width:100%; 
    max-width:var(--container-max);
    margin:0 auto;
    height:100%;
    display:grid; 
    grid-template-columns:max-content 1fr max-content;
    align-items:center; 
    gap:8px;
    padding:0 var(--container-padding);
    /* border-bottom:1px solid #f1f3f5; *//* trait limité à 1200px */
}

.header-brand img{height:40px; width:auto; display:block;}
/* Coller chaque logo à son bord */
.header-brand .inner img:first-child{ justify-self: start; }
.header-brand .inner img:last-child { justify-self: end;   }

.header-title{
    text-align:center; font-weight:normal; font-size:1.8rem;
    white-space:nowrap;
}
.header-title .blue{color:var(--blue)}


/*  
* Bloc combat
*/
/* conteneur des blocs */
.combats{
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 var(--container-padding);   
  justify-content:center;
  /* gap:var(--gap); */
}

.galerie .combats{
  display:grid;
  grid-template-columns:1fr; /* mobile: 1 colonne */
}

/* mobile paysage : 2 colonnes */
@media (min-width: 499px){
  .galerie .combats{
    grid-template-columns: repeat(2, 1fr);
    justify-content:space-between; 
  }
}

/* desktop: 3 colonnes sur 1200px */
@media (min-width: 992px){
  .galerie .combats{
    grid-template-columns: repeat(3, 1fr);
    justify-content:space-between; 
  }
}

/* carte */
.carte-combat{
  padding:14px;
  height:auto;
  width:max-content;           
  min-width:260px;
  max-width:100%;
  display:flex;
  flex-direction:column;
  gap:6px;
  margin: 0 auto;
  align-items:center;
}

/* titres */
.carte-combat .title{
  font-weight:700; text-align:center; margin:2px 0 4px;
}
.carte-combat .subtitle{
  color:#343a40; text-align:center; margin:0 0 8px; font-size:.95rem;
}

/* grille des scores */
.scoregrid{
  display:grid;
  grid-template-columns: auto;        /* 1ère colonne = nom d'équipe */
  grid-auto-flow: column;             /* les autres colonnes = scores → en colonnes automatiques */
  grid-auto-columns: minmax(16px, 24px);  /* largeur pour chaque score */
  align-items:center;
  column-gap:3px;
  row-gap:6px;
  margin-bottom:8px;
}
.scoregrid .team {
  grid-column:1;
  overflow:hidden; 
  text-overflow:ellipsis; /* white-space:nowrap; */
}
.score{
  text-align:center; color:#212529;
}

/* Conteneur vidéo fixé à 240px de large et centré */
.video-wrapper {
  width: 240px;
  margin: 0 auto 0 auto;
}

/* vidéo responsive 16:9 */
.video-embed{
  position:relative; 
  width:100%; 
  padding-top:56.25%; 
  border-radius:10px; 
  overflow:hidden;
}
.video-embed iframe{
  position:absolute; 
  top: 0; left: 0;
  width:100%; 
  height:100%; 
  border:0;
}

/*
* Module de formulaire de recherche
*/

.filters {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 420px; /* largeur raisonnable mobile/desktop */
  margin: 0 auto;
}

/* Style des selects */
.filter-select {
  width: 100%;
  padding: 5px 8px;
  font-size: 0.95rem;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  background-color: #fff;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23888' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
}

/* Style bouton */
.filter-btn {
  width: max-content;
  padding: 5px 14px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  background-color: var(--blue);
  color: #fff;
  transition: background .2s;
}

.filter-btn:hover {
  background-color: var(--blue-hover);
}

.filter-btn:active {
  background-color: var(--blue);
}

/* ---- Select custom équipes ---- */
.select-team{position:relative;}
.select-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 14px; border:1px solid #e0e0e0; border-radius:8px;
  background:#fff; cursor:pointer; font-size:.95rem;
}
.select-trigger .option-visual{display:flex; align-items:center; gap:10px; min-width:0;}
.select-trigger img{width:22px;height:22px;border-radius:4px;display:block;}
.select-trigger .option-label{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.select-team.open .select-trigger{border-color:#cbd3da;}

/* liste déroulante */
.select-list{
  position:absolute; left:0; right:0; top:100%;
  background:#fff; border:1px solid #e0e0e0; border-radius:8px; margin-top:6px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  list-style:none; padding:6px; max-height:240px; overflow:auto; display:none; z-index:20;
}
.select-team.open .select-list{display:block;}

.select-list li{
  display:flex; align-items:center; gap:10px;
  padding:8px 8px; border-radius:8px; cursor:pointer; font-size:.95rem;
}
.select-list li:hover{background:#f6f7f9;}
.select-list img{width:22px;height:22px;border-radius:4px;display:block;}

@media (min-width: 992px) {
  .filters {
    flex-direction: row;       /* aligne tout sur une ligne */
    flex-wrap: wrap;           /* permet de passer à la ligne si trop serré */
    align-items: center;
  }

  .filters > * {
    flex: 1;                  /* partage la largeur entre les éléments */
  }

  .filter-btn {
    flex: 0 0 auto;           /* bouton garde sa taille */
  }
}


/*
* Footer avec menu de page
*/

/* Barre fixe */
.bottom-bandeau{
  position: fixed; left:0; right:0; bottom:0; z-index:1050;
  margin: 0 auto;
  max-width:1200px;
  /* box-shadow: 0 -6px 24px rgba(0,0,0,.06); */
}
.bottom-bar{
  position: fixed; left:0; right:0; bottom:0; z-index:1050;
  margin: 0 auto;
  background: var(--bottombar-bg);
  max-width:1200px;
  /* box-shadow: 0 -6px 24px rgba(0,0,0,.06); */
}
.bottom-inner{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 10px var(--container-padding);
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

/* Boutons “pilules” */
.btn-pill{
  display:flex;
  align-items:center;
  justify-content:center;  
  padding:4px 8px 6px;
  border-radius:8px;
  font-size:.9rem;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
  line-height:1;
  cursor:pointer;
}
.btn-blue{ background:var(--blue); color:#fff; }
.btn-blue:hover{ background:var(--blue-hover); color:#fff; }

.btn-grey{ background:var(--grey); color:var(--grey-text); }
.btn-grey:hover{ background:#d4d4d4; color:#111; }

/* Ligne 1 : boutons bleus (wrap en mobile) */
.menu-primary, .btn-annee {
  display:flex; flex-wrap:wrap; gap:4px;
}

/* Ligne 2 : bouton gris + texte */
.menu-global{
  display:flex; align-items:center; gap:4px;
  /* border-top: 1px solid #f0f0f0;
  padding-top: 4px; */
}
.menu-global .global-text{
  margin-left: 6px;
  font-size:.9rem; color:#444;
  flex:1; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.btn-close{
  appearance:none; -webkit-appearance:none;
  width:14px; height:14px; border-radius:50%;
  border:0; background:#bdbdbd; color:#fff; font-weight:700;
  line-height:1; cursor:pointer;
}
.btn-close:hover{ background:#9b9b9b; }

.bandeau-cookie {
  z-index: 2000;
  max-width: 480px !important;
  margin-bottom:92px;
  background-color: #fff;
}

.btn-cookie {
  min-width:70px;
}

/* Desktop : place identique, largeur limitée à 1200px */
@media (min-width: 992px){
  .bottom-inner{ gap:10px; }
}

/* --- Barre de points mobile --- */
.menu-dots{
  display:none;
  position:fixed;
  left:4px;
  bottom:80px;
  z-index:2000;
  align-items:center;
  gap:12px;
  /* colonne verticale */
  flex-direction:column;
  padding:6px 0;
}
.menu-dots .dot{
  width:10px; height:10px; border-radius:50%;
  background:#d1d5db;          /* gris clair */
  border:0; padding:0; cursor:pointer;
}
.menu-dots .dot.active{ background:#222; } /* point actif plus foncé */

/* Empilement mobile : on masque les boutons bleus et on montre les points */
@media (max-width: 991.98px){
  .menu-primary{ display:none; }
  .menu-dots{ display:flex; }
}

/* Desktop inchangé : on cache les points, on montre les boutons bleus */
@media (min-width: 992px){
  .menu-dots{ display:none; }
  .menu-primary{ display:flex; flex-wrap:wrap; gap:8px; }
}

#resume, #graphique, #classement, #classement_pronostiqueurs, #combats, #podiums, #galerie, #contenu, #taux_victoires, #palmares1, #palmares2 {
  scroll-margin-top: calc(var(--brand-h) + var(--page-title-h));
}

/**
*
* Home
*
*
**/

/* Conteneur des blocs de la home : A REFAIRE - mobile = glissement horizontal ; desktop = 2 colonnes */
.index{
    display:flex;
    flex-direction:column; 
    gap: var(--gap);
    overflow: visible;
}

.miniblocs{
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0px;
  margin: 0 auto;
  width: 100%;
}

.bloc{
    padding:8px;
    width:100%;
}

.bloc a, .text-link, .table a, .tournoi-link a {
  text-decoration: none;
  color:var(--blue);
}

.menu-primary a, .btn-annee a {
  color: #fff !important;
}

/* Desktop : largeur d’une ligue = min(50vw, 580px) */
@media (min-width: 992px){
  .index{
    display:flex;
    flex-direction:column; 
    /* gap: var(--gap); */
    overflow: visible;
    max-width: var(--container-max);
    margin: 0 auto;            /* centre le rail sur desktop */
    padding: 0 var(--container-padding);
  }

  .miniblocs{ 
    display: grid;
    grid-gap: 0px;
    margin: 0 auto;
    width: 100%;
    grid-template-columns: repeat(3, 1fr); } /* desktop : 3 de front */

  .intro{
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
  }
}

/**
* 
* Galerie vidéos
*
*/

.galerie{
    display:flex;
    gap: var(--gap); 
    overflow-x:auto; 
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    width:100%;
}

/* Desktop : largeur d’une ligue = min(50vw, 580px) */
@media (min-width: 992px){
  .galerie{
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
  }

  .galerie-title {
    grid-column-start: 1;
    grid-column-end: 4;
    width: 100%;
  }

}

/**
* 
* Graphiques
*
*/
.graphique {
  width:100%;
  /*aspect-ratio: 6 / 10;*/
}

.canvas-graphique {
  width: 100% !important;
  height: 100% !important;
}

@media (min-width: 992px){
  .graphique {
    width: 100%;
    max-width: 1160px;
    aspect-ratio: 12 / 10;
  }
}