/* =========================================================
   style-j-pong.css
   Page jeu PONG / arabe
   - fond noir
   - canvas centré
   - scoreboard lisible
   - contrôles propres
   - footer visible
   - aucun style de menu principal ici
   ========================================================= */


/* =========================================================
   1) BASE PAGE
   ========================================================= */

html,
body{
  margin:0;
  padding:0;
  width:100%;
  min-height:100%;
  height:auto;

  background:#000 !important;
  color:#fff;

  display:block;
  text-align:center;

  overflow-x:hidden;
  overflow-y:auto !important;
}

/* espace pour le footer/logo */
body{
  padding-bottom:20vh;
}


/* =========================================================
   2) TITRES
   ========================================================= */

.titre-oeuvre{
  margin:0 auto 18px;
  color:#fff;
  text-align:center;
}

.titre-principal{
  margin:0 0 6px;
  font-size:3rem;
  font-weight:800;
  color:#fff;
  text-align:center;
}

.titre-genre{
  margin:0 0 20px;
  font-size:2.5rem;
  font-weight:600;
  color:#fff;
  text-align:center;
}

h2{
  margin:10px auto 0;
  padding:0;

  font-size:clamp(1.5rem,3vw,2rem);
  line-height:1.9;
  color:#fff;

  text-align:center !important;
  height:auto;
}


/* =========================================================
   3) SCOREBOARD
   ========================================================= */

#scoreboard{
  display:inline-block;

  margin:22px auto 16px;
  padding:12px 22px;

  background:rgba(0,0,0,.55);
  border-radius:14px;

  color:#fff;
  font-weight:800;
  font-size:clamp(1.9rem,4.5vw,3rem);

  text-align:center;
}


/* =========================================================
   4) ZONE JEU
   ========================================================= */

#container{
  position:relative;
  z-index:1;

  width:100%;
  margin:0 auto;
  text-align:center;
}

canvas,
#pong,
#gameCanvas{
  display:block;
  margin:auto;

  background:#6db36d;
  border:none;
  outline:none;

  max-width:100%;
  height:auto;

  position:relative;
  z-index:1;

  touch-action:none;
}


/* =========================================================
   5) CONTRÔLES
   ========================================================= */

#controls{
  margin:18px auto 0;

  font-size:1.4rem;
  color:#fff;
  text-align:center;

  position:relative;
  z-index:10;
}

#controls > div{
  margin:0 auto;
}

label{
  margin:0 12px;
  font-size:1.3rem;
}

input[type="radio"]{
  transform:scale(1.15);
  margin-inline:4px;
}


/* bouton son */

#soundToggle{
  margin-top:12px;
  padding:12px 20px;

  font-size:1.3rem;

  background:#444;
  color:#fff;

  border:1px solid #666;
  border-radius:12px;

  cursor:pointer;
}

#soundToggle:hover{
  background:#666;
}


/* bouton restart */

#restartBtn{
  margin-left:10px;
  padding:2px 12px;

  font-size:32px;
  line-height:1;

  color:#fff;
  background:#444;

  border:1px solid #888;
  border-radius:6px;

  cursor:pointer;
}

#restartBtn:hover{
  background:#666;
}


/* =========================================================
   6) MENUS LIGNES SIMPLES
   (pas le menu-float principal)
   ========================================================= */

.menu-ul{
  margin-bottom:10px;
}

.menu-regle{
  margin-top:15px;
  margin-bottom:0;

  font-size:20px;
  color:white;
  text-align:center;
}


/* sous-menu lignes */

#sous-menu-lignes{
  background:#000;
  padding:10px 0;
}

#sous-menu-lignes .menu-list{
  list-style:none;
  margin:0;
  padding:0;

  display:flex;
  flex-wrap:wrap;
  gap:20px;
  justify-content:center;
}

#sous-menu-lignes .menu-list li{
  display:inline;
}

#sous-menu-lignes a.menu-lien{
  padding:8px 12px;

  color:#fff !important;
  text-decoration:none;

  border-radius:6px;
}

#sous-menu-lignes a.menu-lien:hover,
#sous-menu-lignes a.menu-lien:focus-visible{
  background:rgba(255,255,255,0.12);
  color:#fff !important;
  outline:none;
}


/* sous-menu */

#sous-menu{
  padding:12px 0;
}

#sous-menu .menu-list{
  list-style:none;

  margin:0;
  padding:0;

  display:flex;
  flex-wrap:wrap;
  gap:24px;
  justify-content:center;
}

#sous-menu .menu-lien,
#sous-menu .menu-lien:visited{
  padding:6px 10px;

  color:#fff !important;
  font-size:24px;
  font-weight:600;
  text-decoration:none;

  line-height:1.2;
  border-radius:6px;
}

#sous-menu .menu-lien:hover,
#sous-menu .menu-lien:focus{
  opacity:.85;
  text-decoration:underline;
}


/* =========================================================
   7) FOOTER / LOGO
   ========================================================= */

footer{
  position:relative !important;
  z-index:2;

  margin-top:30px;

  background:transparent !important;
}

#fin{
  position:static !important;

  width:100%;
  margin:80px 0;
  padding:24px 0 !important;

  border:0 !important;
  box-shadow:none !important;
}

body::after{
  content:none !important;
}

#fin .centered,
#fin .centered-content{
  display:flex;
  justify-content:center;
  align-items:center;
}

#fin img{
  display:block;
  width:350px;
  max-width:90vw;
  height:auto;

  cursor:pointer;
}


/* blocs logo */

.ima-container,
.ima-container2,
.ima-container3{
  position:relative;
  display:block;

  width:300px;
  height:400px;

  margin:0 auto;
  clear:both;

  background:transparent;
}

.ima-container{ margin-bottom:200px; }
.ima-container2{ margin-top:-50px; }
.ima-container3{
  margin-top:-10px;
  margin-bottom:200px;
}

.ima-container::before,
.ima-container2::before,
.ima-container3::before{
  content:"";
  position:absolute;
  inset:0;

  background-size:contain;
  background-repeat:no-repeat;
  background-position:center 40px;
}

.ima-container::before,
.ima-container2::before{
  background-image:url("../source/img/logo-base-2028.png");
}

.ima-container3::before{
  background-image:url("logo-base-2.png");
  background-color:black;
}


/* =========================================================
   8) RESPONSIVE
   ========================================================= */

@media (max-width:900px){

  #pong,
  #gameCanvas,
  canvas{
    width:min(95vw,798px);
    height:auto;
  }

}


/* ---------- tablette ---------- */

@media (max-width:768px){

  .titre-principal{ font-size:2.4rem; }
  .titre-genre{ font-size:2rem; }

  h2{
    font-size:clamp(1.2rem,4.8vw,1.7rem);
    line-height:1.7;
    padding-inline:10px;
  }

  #scoreboard{
    font-size:clamp(1.35rem,5vw,2rem);
    padding:10px 16px;
  }

  #controls{
    font-size:1.1rem;
    padding-inline:10px;
  }

  label{
    display:inline-block;
    margin:4px 8px;
    font-size:1rem;
  }

  #soundToggle{
    font-size:1.05rem;
    padding:10px 14px;
  }

  #restartBtn{
    font-size:26px;
    padding:4px 10px;
  }

  .ima-container,
  .ima-container2,
  .ima-container3{
    width:180px;
    height:220px;
  }

  .ima-container::before,
  .ima-container2::before,
  .ima-container3::before{
    background-position:center;
  }
}


/* ---------- mobile ---------- */

@media (max-width:480px){

  body{
    padding-bottom:16vh;
  }

  .titre-principal{ font-size:2rem; }
  .titre-genre{ font-size:1.6rem; }

  h2{ font-size:1.1rem; }

  #controls{ font-size:1rem; }

  label{
    font-size:.95rem;
    margin:4px 6px;
  }

  #soundToggle{
    width:auto;
    max-width:92vw;
  }
}