/* ============================================================
   Tripot Poker Tour — style.css unique
   Tous les chemins sont relatifs à la racine (zéro ../)
   ============================================================ */

/* RESET & BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  background-color: #050505;
  background-image: url('theme/background.jpg');
  background-repeat: repeat-x;
  font-size: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

html, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6,
blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike,
sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, input, textarea {
  border: 0 none;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  margin: 0;
  padding: 0;
}

p { border: 0 none; font-size: 95%; padding: 0; text-indent: 15px; }
strong { font-weight: bold; }
img { margin: 0; padding: 0; }
ol { margin: 0 0 15px 25px; }

.rouge { color: #69554d; }
.right { float: right; }
.left { float: left; }
.cleaner { clear: both; }
.clear { clear: both; }

/* HEADER & MENU
============================================================ */
#header {
  color: #fff;
  background-image: url('theme/header.jpg');
  background-repeat: no-repeat;
  margin: auto;
  padding: 0;
  width: 880px;
  height: 259px;
  display: block;
}

#header img { display: block; width: 880px; }

#menu {
  font-family: "Century Gothic", Arial, Helvetica, sans-serif;
  background-image: url('theme/menu.png');
  background-repeat: no-repeat;
  width: 880px;
  height: 50px;
  display: block;
}

#menu ul { list-style: none; margin-left: 15px; padding: 0; }
#menu li {
  float: left;
  width: 96px;
  height: 50px;
  line-height: 50px;
  margin: 0 10px 0 0;
  padding: 0;
}
#menu li a {
  display: block;
  height: 50px;
  text-align: center;
  text-decoration: none;
  color: white;
  font-weight: normal;
}
#menu li a:hover,
#menu li a:focus,
#menu li a:active {
  background-image: url('theme/menu-hover.png');
  background-repeat: no-repeat;
  display: block;
  height: 46px;
  width: 96px;
}

/* CONTENU
============================================================ */
#contenu {
  background-color: #070707;
  display: block;
  margin: auto;
  padding: 0;
  width: 880px;
  min-height: 359px;
}

#titre-contenu {
  display: block;
  margin: auto;
  padding: 10px 0 0 0;
  text-align: center;
  width: 860px;
  height: 40px;
}
#titre-contenu h1 a { z-index: -9999; position: absolute; left: -9999px; }

#texte-contenu {
  display: block;
  background-repeat: no-repeat;
  margin: auto;
  padding: 10px 0 0 0;
  width: 860px;
  font-family: "Century Gothic", Arial, Helvetica, sans-serif;
  text-align: justify;
}

#texte-contenu h2 {
  display: block;
  margin: auto;
  padding: 3px 0 0 10px;
  width: 860px;
  height: 40px;
  font-family: "Century Gothic", Arial, Helvetica, sans-serif;
  background-image: url('theme/h2/h2-100p.jpg');
  background-repeat: no-repeat;
}

#texte-contenu h3 { font-weight: bold; text-indent: 15px; }
#texte-contenu p { text-align: justify; padding-left: 5px; padding-right: 5px; }
#texte-contenu a { color: #8c6a60; text-decoration: none; padding: 0; margin: 0; }
#texte-contenu a:hover { color: #991514; }
#texte-contenu h2 a { text-decoration: none; color: #fff; }
#texte-contenu h2 a:hover { text-decoration: none; color: #fff; }

/* NAVIGATION
============================================================ */
#navigation-contenu {
  display: block;
  margin: 0;
  padding: 0;
  width: 860px;
  height: 20px;
}
#navigation-contenu a {
  text-decoration: none;
  color: #070707;
  padding: 20px 0 0 27px;
  font-weight: bold;
}
#suivant {
  display: block;
  width: 160px;
  height: 60px;
  background-image: url('theme/boutons/suivant.png');
  background-repeat: no-repeat;
  float: right;
  margin: 0;
}
#precedent {
  display: block;
  width: 160px;
  height: 60px;
  background-image: url('theme/boutons/precedent.png');
  background-repeat: no-repeat;
  float: left;
}

/* FOOTER
============================================================ */
#footer {
  clear: both;
  color: #fff;
  background-image: url('theme/footer.jpg');
  background-repeat: repeat-x;
  margin: auto;
  padding: 0;
  width: 100%;
  height: 103px;
}
#footer-box {
  color: #fff;
  background-image: url('theme/footer-box.jpg');
  background-repeat: no-repeat;
  display: block;
  margin: auto;
  padding: 0;
  width: 880px;
  height: 103px;
}
#footer p {
  margin: 20px;
  padding: 0;
  font-family: "Century Gothic", Arial, Helvetica, sans-serif;
  font-size: 85%;
  line-height: 50px;
  text-indent: 0;
  color: #4a4545;
}
#footer a { color: #4a4545; text-decoration: underline; }
#footer a:hover { color: #fff; text-decoration: none; }

#facebook_halloween {
  float: left;
  width: 75px;
  height: 75px;
  margin: 10px 0 0 95px;
  padding: 0;
  text-align: center;
}
#facebook_halloween a {
  display: block;
  width: 75px;
  height: 75px;
  background-image: url('theme/boutons/voodoo-facebook.png');
  background-repeat: no-repeat;
  background-position: top left;
}
#facebook_halloween a:hover {
  display: block;
  width: 75px;
  height: 75px;
  background-image: url('theme/boutons/voodoo-facebook.png');
  background-repeat: no-repeat;
  background-position: left -75px;
}

/* PAGE HOME — slideshow
============================================================ */
#haut { display: block; margin: 0; padding: 0; width: 880px; height: 265px; }

#news {
  float: left;
  display: block;
  margin: 12px;
  padding: 0;
  width: 622px;
  height: 250px;
}
#news h2 {
  float: left;
  display: block;
  background-image: url('theme/h2/h2-75p.jpg');
  background-repeat: no-repeat;
  font-family: "Century Gothic", Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  line-height: 30px;
  margin: 0;
  padding-left: 10px;
  width: 622px;
  height: 30px;
}

/* Slideshow vanilla JS */
#slider {
  width: 621px;
  height: 219px;
  position: relative;
  overflow: hidden;
}
#sliderContent {
  width: 621px;
  position: absolute;
  top: 0;
  margin-left: 0;
  list-style: none;
  padding: 0;
}
.sliderImage {
  float: left;
  position: relative;
  display: none;
  width: 621px;
}
.sliderImage.active { display: block; }
.sliderImage img { width: 621px; height: 219px; display: block; }
.sliderImage span {
  position: absolute;
  font: 10px/15px Arial, Helvetica, sans-serif;
  padding: 10px 13px;
  width: 610px;
  background-color: #000;
  opacity: 0.7;
  color: #fff;
  display: block;
}
.sliderImage span strong { font-size: 14px; }
.bottom { bottom: 0; left: 0; }

#inscription {
  float: right;
  display: block;
  margin: 12px;
  padding: 0;
  width: 207px;
  height: 250px;
}
#inscription h2 {
  display: block;
  background-image: url('theme/h2/h2-25p.jpg');
  background-repeat: no-repeat;
  font-family: "Century Gothic", Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  line-height: 30px;
  margin: 0;
  padding-left: 10px;
  width: 207px;
  height: 30px;
}
#inscription h2:hover {
  background-image: url('theme/h2/h2-25p-hover.jpg');
}
#inscription a { display: block; color: white; text-decoration: none; }
#texte-inscription {
  display: block;
  width: 207px;
  height: 137px;
}

#bas { display: block; margin: 0; padding: 0; width: 880px; height: 312px; }
#stats, #classement, #livreor {
  float: left;
  display: block;
  margin: 13px;
  padding: 0;
  width: 266px;
  height: 250px;
  text-align: justify;
}
#stats img, #classement img, #livreor img {
  float: left;
  display: block;
  width: 120px;
  height: 120px;
  margin-right: 5px;
}
#stats h2, #classement h2, #livreor h2 {
  display: block;
  background-image: url('theme/h2/h2-30p.jpg');
  background-repeat: no-repeat;
  font-family: "Century Gothic", Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  line-height: 30px;
  margin: 0;
  padding-left: 10px;
  width: 266px;
  height: 30px;
}
#stats a, #classement a, #livreor a { display: block; color: white; text-decoration: none; }
#stats p a, #classement p a, #livreor p a { display: inline; color: #69554d; text-decoration: none; }
#stats p a:hover, #classement p a:hover, #livreor p a:hover { display: inline; color: #a8090a; text-decoration: none; }
#stats h2:hover, #classement h2:hover, #livreor h2:hover {
  display: block;
  width: 266px;
  height: 30px;
  background-image: url('theme/h2/h2-30p-hover.jpg');
}

/* TABLEAUX
============================================================ */
table { margin-bottom: 20px; width: 420px; }
#texte-contenu tr {
  height: 30px;
  background-image: url('theme/ligne-tableau.jpg');
  text-align: center;
}
caption {
  background-image: url('theme/haut-tableau.jpg');
  background-color: #69554d;
  background-repeat: repeat-x;
  font-family: "Century Gothic", Arial, Helvetica, sans-serif;
  text-align: center;
  color: #000;
  line-height: 40px;
  padding-left: 5px;
  font-weight: bolder;
}

/* TABLEAU JOUEURS
============================================================ */
.photo-vainqueur {
  max-width: 380px;
  max-height: 350px;
  border: 5px solid #69554d;
  margin: 0 35px 0 15px;
  float: right;
}
.image_petite { display: block; }

.tableau-joueurs-1-ligne,
.tableau-joueurs-2-lignes,
.tableau-joueurs-3-lignes {
  display: block;
  background-image: url('theme/haut-tableau.jpg');
  background-color: #69554d;
  background-repeat: repeat-x;
  font-family: "Century Gothic", Arial, Helvetica, sans-serif;
  margin: 50px 0 0 0;
  padding-left: 2px;
  width: 860px;
}
.tableau-joueurs-1-ligne { height: 122px; }
.tableau-joueurs-2-lignes { height: 202px; }
.tableau-joueurs-3-lignes { height: 282px; }

.tableau-joueurs-1-ligne h3,
.tableau-joueurs-2-lignes h3,
.tableau-joueurs-3-lignes h3 {
  color: #000;
  line-height: 40px;
  padding-left: 5px;
  font-weight: bolder;
}

.ligne-tableau-joueurs {
  float: left;
  display: block;
  background-image: url('theme/ligne-tableau.jpg');
  background-color: #161616;
  background-repeat: repeat-x;
  font-family: "Century Gothic", Arial, Helvetica, sans-serif;
  line-height: 40px;
  margin-right: 2px;
  padding: 0;
  width: 170px;
  height: 80px;
}
.ligne-tableau-joueurs:hover {
  background-image: url('theme/ligne-tableau-hover.jpg');
  background-repeat: repeat-x;
  height: 80px;
  background-color: #2e0d0e;
}
.ligne-tableau-joueurs img { padding: 10px 0 0 5px; height: 60px; max-width: 80px; }
.ligne-tableau-joueurs p { float: right; padding: 5px 5px 0 0; text-indent: 0; }

/* TABLEAU GENERAL
============================================================ */
#texte-contenu .tableau-general {
  display: block;
  background-image: url('theme/haut-tableau.jpg');
  background-color: #69554d;
  background-repeat: repeat-x;
  font-family: "Century Gothic", Arial, Helvetica, sans-serif;
  text-align: center;
  margin: 20px 0 0 0;
  padding-left: 2px;
  width: 100%;
}
#texte-contenu table.sortable td { min-width: 68px; }
#texte-contenu table.sortable td:nth-child(1) { width: 132px; }
#texte-contenu table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after { content: " \25B4\25BE"; }
#texte-contenu table.sortable tr { height: 40px; line-height: 40px; }
#texte-contenu table.sortable .ligne-titre th { font-size: 80%; color: #8c6a60; padding: 0 6.78px; }

/* TABLEAUX PODIUM
============================================================ */
.tableau-podium,
.tableau-podium-mrp {
  display: block;
  background-image: url('theme/haut-tableau.jpg');
  background-color: #69554d;
  background-repeat: repeat-x;
  font-family: "Century Gothic", Arial, Helvetica, sans-serif;
  text-align: left;
  margin: 20px 0 0 0;
  padding-left: 2px;
  width: 384px;
  height: 282px;
}
.tableau-podium-mrp { float: right; margin-top: 20px; }
.tableau-podium h3, .tableau-podium-mrp h3 { color: #000; line-height: 40px; padding-left: 5px; font-weight: bolder; }

.ligne-tableau {
  float: left;
  display: block;
  background-image: url('theme/ligne-tableau.jpg');
  background-color: #161616;
  background-repeat: repeat-x;
  font-family: "Century Gothic", Arial, Helvetica, sans-serif;
  line-height: 40px;
  margin-right: 2px;
  padding: 0;
  width: 260px;
  height: 80px;
}
.ligne-tableau:hover {
  background-image: url('theme/ligne-tableau-hover.jpg');
  background-repeat: repeat-x;
  height: 80px;
  background-color: #2e0d0e;
}
.ligne-tableau img { padding: 10px 0 0 5px; height: 60px; max-width: 150px; }
.ligne-tableau p { float: right; padding: 5px 5px 0 0; text-indent: 0; }

.ligne-tableau-chiffre {
  float: left;
  display: block;
  background-image: url('theme/ligne-tableau.jpg');
  background-color: #161616;
  background-repeat: repeat-x;
  margin-right: 2px;
  padding: 0;
  width: 120px;
  height: 80px;
}
.ligne-tableau-chiffre img { padding: 20px 0 0 45px; height: 40px; }

/* TABLEAU RECORD
============================================================ */
#record { margin-bottom: 20px; width: 860px; }

/* VIDEOS & LIENS
============================================================ */
#menu-videos, #menu-liens, #menu-photos, #menu-archives {
  font-family: "Century Gothic", Arial, Helvetica, sans-serif;
  width: 880px;
  height: 50px;
  display: block;
}
#menu-videos ul, #menu-liens ul, #menu-photos ul, #menu-archives ul {
  list-style: none;
  margin-left: 15px;
  padding: 0;
}
#menu-videos li, #menu-photos li {
  float: left;
  width: 156px;
  height: 60px;
  background-image: url('theme/boutons/empty.png');
  background-repeat: no-repeat;
  line-height: 60px;
  margin: 0 10px 0 0;
  padding: 0;
}
#menu-liens li {
  float: left;
  width: 156px;
  height: 60px;
  background-image: url('theme/boutons/empty.png');
  background-repeat: no-repeat;
  line-height: 60px;
  margin: 0 100px 0 30px;
  padding: 0;
}
#menu-archives li {
  float: left;
  width: 156px;
  height: 60px;
  background-image: url('theme/boutons/empty.png');
  background-repeat: no-repeat;
  line-height: 60px;
  margin: 0 30px 0 20px;
  padding: 0;
}
#menu-videos li a, #menu-liens li a, #menu-photos li a, #menu-archives li a {
  display: block;
  height: 50px;
  text-align: center;
  text-decoration: none;
  color: #070707;
  font-weight: normal;
}
#menu-videos li a:hover, #menu-liens li a:hover, #menu-photos li a:hover, #menu-archives li a:hover { color: #991514; }

.liste-videos, .liste-liens, .liste-photos, .liste-archives { display: block; width: 860px; }
.liste-videos td, .liste-liens td, .liste-photos td, .liste-archives td {
  background-color: #070707;
  text-align: left;
  padding-left: 15px;
}
.liste-videos p, .liste-liens p { padding: 0; text-indent: -5px; }
.liste-videos a, .liste-liens a { font-family: Arial, Helvetica, sans-serif; font-size: 120%; }
.liste-liens p a { font-size: 100%; }
.liste-videos img, .liste-liens img {
  display: block;
  height: 90px;
  width: 120px;
  border: solid 2px #333333;
}
.liste-videos img:hover, .liste-liens img:hover { border: solid 2px #fff; }

/* VIDEO NOTE
============================================================ */
.video-note {
  background-color: #111;
  border: 1px solid #69554d;
  padding: 8px 12px;
  margin: 10px 0;
  font-size: 90%;
  color: #aaa;
  font-style: italic;
}

/* GALLERY PHOTOS (lightbox CSS)
============================================================ */
.gallery { list-style: none; margin: 0; padding: 0; }
.gallery li {
  margin: 0 40px 40px 40px;
  padding: 0;
  float: left;
  position: relative;
  width: 200px;
  height: 145px;
}
.gallery img {
  background: #fff;
  border: solid 1px #ccc;
  padding: 4px;
  max-width: 200px;
  max-height: 145px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.gallery img:hover { border-color: #69554d; }
.gallery a { text-decoration: none; color: #000; }

/* Lightbox overlay
============================================================ */
#lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
#lightbox-overlay.open { display: flex; }
#lightbox-overlay img {
  max-width: 90vw;
  max-height: 90vh;
  border: 3px solid #69554d;
  cursor: pointer;
}
#lightbox-close {
  position: fixed;
  top: 18px;
  right: 24px;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  z-index: 1001;
  line-height: 1;
}

#video-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
#video-overlay.open { display: flex; }
#video-overlay video {
  max-width: 90vw;
  max-height: 85vh;
  border: 3px solid #69554d;
  background: #000;
}
#video-overlay .video-close {
  position: fixed;
  top: 18px;
  right: 24px;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  line-height: 1;
}

/* LISTE TITRES
============================================================ */
#liste-titres-champion ul { margin: 0 0 35px 45px; }

/* RESPONSIVE (mobile-first)
============================================================ */
@media (max-width: 900px) {
  #header, #menu, #contenu, #footer-box,
  #haut, #bas,
  #news, #inscription,
  #stats, #classement, #livreor,
  #texte-contenu, #titre-contenu, #navigation-contenu,
  #menu-videos, #menu-liens, #menu-photos, #menu-archives,
  .liste-videos, .liste-liens, .liste-photos, .liste-archives,
  .tableau-general, #record,
  .tableau-podium, .tableau-podium-mrp,
  .tableau-joueurs-1-ligne, .tableau-joueurs-2-lignes, .tableau-joueurs-3-lignes {
    width: 100% !important;
    min-width: 0;
  }

  #texte-contenu img { max-width: calc(100% - 40px); height: auto; }
  .tableau-general { display: block; overflow-x: auto; }

  #texte-contenu h2, #news h2, #navigation-contenu {
    width: 100%;
    max-width: 100%;
    background-size: cover;
  }

  #header { height: auto; background-size: cover; }
  #header img { width: 100%; height: auto; }
  #menu { height: auto; background-size: cover; overflow: hidden; }
  #menu ul { margin: 0; }
  #menu li { width: auto; height: auto; line-height: 36px; margin: 0; }
  #menu li a { height: 36px; font-size: 13px; padding: 0 6px; }
  #menu li a:hover { width: auto; height: 36px; }

  #haut, #bas { height: auto; }
  #news { float: none; width: 100%; height: auto; margin: 0 0 10px 0; }
  #inscription { float: none; width: 100%; height: auto; margin: 0; }
  #texte-inscription { width: 100%; height: auto; }
  #stats, #classement, #livreor { float: none; width: 100%; height: auto; margin: 10px 0; }

  .tableau-joueurs-1-ligne, .tableau-joueurs-2-lignes, .tableau-joueurs-3-lignes { height: auto; }
  .ligne-tableau-joueurs { width: 47%; }
  .tableau-podium, .tableau-podium-mrp { float: none; width: 100%; height: auto; }
  .ligne-tableau { width: 60%; }
  .ligne-tableau-chiffre { width: 35%; }

  table { width: 100%; }
  .gallery li { width: 140px; height: 110px; margin: 10px 15px 15px 15px; }
  .gallery img { max-width: 140px; max-height: 110px; }

  #slider { width: 100%; }
  #sliderContent { width: 100%; }
  .sliderImage { width: 100%; }
  .sliderImage img { width: 100%; height: auto; }
  .sliderImage span { width: 90%; }
}
