/* ============================================================
   Denaix — feuille de style (reconstruction PHP)
   ============================================================ */
body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  background: #ffffff;
  color: #000;
  margin: 0;
  padding: 0;
}
.wrap { max-width: 1100px; margin: 0 auto; padding: 10px 16px 40px; }

/* En-tête : bannière + accès abonné */
.entete-site {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 6px 0 14px;
}
.entete-site .banniere { flex: 1; text-align: center; }
.entete-site .banniere img { max-width: 100%; height: auto; border: 0; }
.entete-site .abonne { white-space: nowrap; }
.entete-site .abonne a { color: #0000ee; text-decoration: underline; }

/* Bandeau titre jaune */
.bandeau-titre {
  background: #ffff00;
  color: #0000cc;
  font-weight: bold;
  text-align: center;
  font-size: 22px;
  padding: 10px 14px;
  margin: 14px 0;
}
.sous-titre { font-weight: bold; font-size: 13px; margin: 18px 0 26px; }

/* Grille des pronostics */
.grille-pronos {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #000;
  font-size: 13px;
}
.grille-pronos th,
.grille-pronos td {
  border: 1px solid #000;
  padding: 8px 6px;
  vertical-align: middle;
}
.grille-pronos .entete th {
  background: #33cccc;
  color: #000;
  font-weight: bold;
  text-align: center;
  font-size: 12px;
}
.grille-pronos .col-num { width: 70px; }
.grille-pronos .col-prono { width: 70px; }
.grille-pronos .col-res  { width: 110px; }

.grille-pronos td.num {
  background: #33cccc;
  color: #000;
  font-weight: bold;
  font-size: 10px;
  text-align: center;
  text-transform: uppercase;
}
.grille-pronos td.equipe {
  background: #ffff99;
  color: #000;
  font-weight: bold;
  text-align: center;
}
.grille-pronos td.comm  { background: #ffcccc; color: #000; text-align: left; }
.grille-pronos td.prono { background: #ffffff; color: #000; font-weight: bold; text-align: center; }
.grille-pronos td.res   { background: #ffffff; color: #000; font-weight: bold; text-align: center; }

/* Couleurs de résultat */
.grille-pronos td.res-vert    { background: #99ff66; }
.grille-pronos td.res-rose    { background: #ff66ff; }
.grille-pronos td.res-attente { background: #ffff66; }

/* Pied de page */
.pied { margin-top: 30px; font-size: 11px; color: #777; text-align: center; }

/* Responsive : tableau défilable sur petit écran */
.table-scroll { width: 100%; overflow-x: auto; }
@media (max-width: 700px) {
  .bandeau-titre { font-size: 17px; }
  .entete-site { flex-direction: column; align-items: stretch; }
}