/* tppmu-quinte-du-jour-accueil.css */

/* Layout principal */
.tppmu-quinte-block{
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 18px;
  align-items: start;
}

/* Evite les débordements dans les grilles */
.tppmu-quinte-block,
.tppmu-quinte-main,
.tppmu-quinte-side,
.tppmu-quinte-card,
.tppmu-quinte-tablewrap{
  min-width: 0;
}

.tppmu-quinte-main,
.tppmu-quinte-card{
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

.tppmu-quinte-main{ padding: 22px; }
.tppmu-quinte-card{ padding: 18px; }

.tppmu-quinte-side{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Header */
.tppmu-quinte-head{
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.tppmu-quinte-title{
  margin: 0 0 6px;
  font-size: 34px;
  line-height: 1.15;
  font-weight: 900;
  color: #111827;
  overflow-wrap: anywhere;
}

.tppmu-quinte-date{
  color: #6b7280;
  font-weight: 600;
  margin-bottom: 2px;
}

.tppmu-quinte-subtitle{
  color: #6b7280;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.tppmu-quinte-countdownBox{
  min-width: 120px;
  background: #111;
  border-radius: 10px;
  color: #fff;
  padding: 14px;
  text-align: center;
}

.tppmu-quinte-countdownLabel{
  font-size: 13px;
  font-weight: 800;
  opacity: .9;
}

.tppmu-quinte-countdown{
  font-size: 26px;
  font-weight: 900;
  margin-top: 6px;
}

/* Espacements */
.tppmu-quinte-spacer-sm{ height: 12px; }
.tppmu-quinte-spacer-md{ height: 18px; }
.tppmu-quinte-spacer-lg{ height: 22px; }

.tppmu-quinte-divider{ border-top: 1px solid #eef2f7; }

/* Table participants (desktop) */
.tppmu-quinte-tablewrap{ width: 100%; }

.tppmu-quinte-table{
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.tppmu-quinte-theadrow{
  color: #6b7280;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.tppmu-quinte-th,
.tppmu-quinte-td{
  text-align: left;
  padding: 12px 10px;
}

.tppmu-quinte-tr{ border-top: 1px solid #eef2f7; }

.tppmu-quinte-empty{
  padding: 16px;
  color: #6b7280;
  font-weight: 700;
}

/* Cercle numéro desktop */
.tppmu-quinte-num{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #0ea44b;
  color: #fff;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Le label N° est géré côté mobile (numcell) */
.tppmu-quinte-numlabel{ display: none; }
.tppmu-quinte-numval{
  font-variant-numeric: tabular-nums;
}

.tppmu-quinte-cheval{ font-weight: 800; }
.tppmu-quinte-strong{ color: #111827; font-weight: 800; }
.tppmu-quinte-mutedStrong{ color: #111827; font-weight: 700; }

.tppmu-quinte-avisCell{ font-weight: 900; }
.tppmu-quinte-avis{ display: inline-flex; align-items: center; gap: 6px; }
.tppmu-quinte-avis.is-base{ color: #0ea44b; }
.tppmu-quinte-avis.is-jeu{ color: #111827; }
.tppmu-quinte-avisIcon{ font-weight: 900; }
.tppmu-quinte-dash{ color: #9ca3af; }

/* Actions */
.tppmu-quinte-actions{
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.tppmu-quinte-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 18px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.tppmu-quinte-btn--primary{
  background: #0ea44b;
  color: #fff;
}

.tppmu-quinte-btn--outline{
  background: #fff;
  border: 2px solid #0ea44b;
  color: #0ea44b;
}

.tppmu-quinte-btn--block{
  display: flex;
  width: 100%;
  height: 54px;
  background: #0ea44b;
  color: #fff;
}

/* Cards latérales */
.tppmu-quinte-cardHead{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tppmu-quinte-cardTitle{
  display: flex;
  align-items: center;
  gap: 10px;
}

.tppmu-quinte-pill{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #0ea44b;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
}

.tppmu-quinte-cardLabel{ font-weight: 900; }

.tppmu-quinte-badgePremium{
  background: #f5c518;
  color: #111827;
  font-weight: 900;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
}

.tppmu-quinte-panel{
  background: #f8fafc;
  border-radius: 12px;
  padding: 14px;
}

.tppmu-quinte-panelTitle{
  font-weight: 900;
  margin-bottom: 10px;
}

.tppmu-quinte-chips{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.tppmu-quinte-chip{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 2px solid #0ea44b;
  color: #111827;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
}

/* Messages fallback */
.tppmu-quinte-notice{
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
}

/* Responsive: layout en une colonne */
@media (max-width: 900px){
  .tppmu-quinte-block{
    grid-template-columns: 1fr;
  }
}

/* Responsive: table -> cards comme shortcode Partants */
@media (max-width: 1024px){

  /* On masque l'en-tête de table */
  .tppmu-quinte-table thead{ display: none !important; }

  .tppmu-quinte-table,
  .tppmu-quinte-table tbody,
  .tppmu-quinte-table tr,
  .tppmu-quinte-table td{
    display: block !important;
    width: 100% !important;
  }

  /* On retire le style "table" */
  .tppmu-quinte-table{
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Card */
  .tppmu-quinte-table tbody tr{
    margin: 0 0 10px 0 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: 0 10px 26px rgba(0,0,0,0.05) !important;
  }

  /* Lignes internes compactes */
  .tppmu-quinte-table tbody td{
    padding: 7px 10px !important;
    border-bottom: 1px solid #eef2f7 !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    white-space: normal !important;
    text-align: right !important;
  }

  .tppmu-quinte-table tbody td:last-child{
    border-bottom: none !important;
  }

  /* Labels (data-label) */
  .tppmu-quinte-table tbody td::before{
    content: attr(data-label) !important;
    flex: 0 0 auto !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .4px !important;
    text-transform: uppercase !important;
    color: #6b7280 !important;
    text-align: left !important;
  }

  /* Header de card: N° + Cheval sur la même ligne */
  .tppmu-quinte-table tbody tr{
    display: grid !important;
    grid-template-columns: 62px 1fr !important;
    grid-auto-rows: auto !important;
  }

  /* Cercle N° dans la card */
  .tppmu-quinte-table tbody td.tppmu-quinte-numcell{
    grid-column: 1 / 2 !important;
    grid-row: 1 !important;

    width: 46px !important;
    height: 46px !important;
    margin: 10px 0 6px 10px !important;
    padding: 0 !important;

    border-radius: 999px !important;
    background: #0ea44b !important;
    border-bottom: none !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;

    color: #fff !important;
    text-align: center !important;
    line-height: 1 !important;
  }

  /* On ne met pas de label auto sur la cellule N° */
  .tppmu-quinte-table tbody td.tppmu-quinte-numcell::before{
    content: none !important;
  }

  /* N° + valeur affichés dans le cercle */
  .tppmu-quinte-table tbody td.tppmu-quinte-numcell .tppmu-quinte-numlabel,
  .tppmu-quinte-table tbody td.tppmu-quinte-numcell .tppmu-quinte-numval{
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  .tppmu-quinte-table tbody td.tppmu-quinte-numcell .tppmu-quinte-numlabel{
    font-size: 12px !important;
    letter-spacing: .2px !important;
    text-transform: uppercase !important;
  }

  .tppmu-quinte-table tbody td.tppmu-quinte-numcell .tppmu-quinte-numval{
    font-size: 14px !important;
  }

  /* Cheval à droite du cercle */
  .tppmu-quinte-table tbody td.tppmu-quinte-cheval{
    grid-column: 2 / -1 !important;
    grid-row: 1 !important;

    border-bottom: none !important;
    padding: 10px 12px 6px 6px !important;

    justify-content: flex-start !important;
    text-align: left !important;
    margin-left: 10px !important;

    font-weight: 900 !important;
    font-size: 14px !important;
  }

  .tppmu-quinte-table tbody td.tppmu-quinte-cheval::before{
    content: none !important;
  }

  /* Les autres lignes prennent toute la largeur */
  .tppmu-quinte-table tbody td:nth-child(n+3){
    grid-column: 1 / -1 !important;
  }

  .tppmu-quinte-table tbody td:nth-child(3){
    border-top: 1px solid #eef2f7 !important;
  }
}

/* Responsive: header et CTA plus compacts (mobile) */
@media (max-width: 599px){

  .tppmu-quinte-title{
    font-size: 22px;
    line-height: 1.15;
    margin-bottom: 4px;
  }

  .tppmu-quinte-date,
  .tppmu-quinte-subtitle{
    font-size: 12px;
    line-height: 1.2;
  }

  /* Compteur compact sans retour à la ligne */
  .tppmu-quinte-countdownBox{
    min-width: 88px;
    padding: 8px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .tppmu-quinte-countdownLabel{
    font-size: 10px;
    line-height: 1;
    margin-bottom: 4px;
    white-space: nowrap;
  }

  .tppmu-quinte-countdown{
    font-size: 16px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    margin-top: 0;
  }

  /* Deux boutons sur une seule ligne */
  .tppmu-quinte-actions{
    flex-wrap: nowrap;
    gap: 10px;
  }

  .tppmu-quinte-actions .tppmu-quinte-btn{
    flex: 1 1 0;
    min-width: 0;
    height: 44px;
    padding: 0 10px;
    font-size: 12px;
    border-radius: 10px;
    white-space: nowrap;
  }

  /* On neutralise le mode block uniquement en mobile */
  .tppmu-quinte-actions .tppmu-quinte-btn--block{
    width: auto !important;
    display: inline-flex !important;
  }
}

/* Cercle numéro en desktop (compatible numcell) */
@media (min-width: 1025px){

  .tppmu-quinte-table tbody td.tppmu-quinte-numcell{
    padding: 12px 10px !important; /* conserva el padding de la tabla */
  }

  .tppmu-quinte-table tbody td.tppmu-quinte-numcell .tppmu-quinte-numlabel{
    display: none !important; 
  }

  .tppmu-quinte-table tbody td.tppmu-quinte-numcell .tppmu-quinte-numval{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 38px !important;
    height: 38px !important;
    border-radius: 999px !important;
    background: #0ea44b !important;

    color: #fff !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    font-variant-numeric: tabular-nums !important;
  }

  .tppmu-quinte-num{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 999px !important;
    background: #0ea44b !important;
    color: #fff !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    font-variant-numeric: tabular-nums !important;
  }
}


.tppmu-resultats-quinte-box{
  margin: 14px 0 10px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #e7e7e7;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  font-size: 15px;
  line-height: 1.55;
  color: #111827;
}

.tppmu-resultats-quinte-box p{
  margin: 0;
}

.tppmu-resultats-quinte-box p + p{
  margin-top: 8px;
}

.tppmu-resultats-quinte-box strong{
  font-weight: 800;
}

.tppmu-resultats-quinte-box{
  margin: 14px 0 10px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
  font-weight: 600;
  line-height: 1.55;
}