/* -------------------> Classes */

.titre-ubuntu {
    font-family: "Ubuntu", sans-serif;
    font-size: 28px;
    font-weight: 700;
    margin-top: 8px;
    margin-left: 8px;
    margin-bottom: 10px;
}

.ligne {
    width: 3000;
    padding: 2px;
    margin-top: 5px;
    margin-bottom: 0px;
    background-color: black;
}

.intro {
    background-color: #e0e0e0;
}

.live {
    background-color: #000000;
	font-size: 20px;
	color: White;
	text-align: Center;
    height: 40px;
}

.important {
    background-color: black;
    color: #f3a602;
}

.corps {
    background-color: #fafafa;
}



/* -------------------> Général */

body {
    font-family: "Ubuntu", sans-serif;
    margin-left: 4px;
}

header {
    position: fixed;
    background-color: white;
    top: 0px;
    left: 8px;
    width: 100%;
    z-index: 20;
    min-width: 1250px;
}

main {
    width: 1200px;
    padding-top: 96px;
    margin-left: 48px;
    margin-left: 52px;
}

p {
    font-family: "Ubuntu Mono", monospace;
    padding: 10px;
    margin-top: 0px;
    margin-bottom: 0px;
    text-align: justify;
    line-height: 2;
}

a {
    text-decoration: none;
    color: #f3a602;
}

div {
    display: inline-block;
    vertical-align: top;
    padding: 0px;
    margin: 0px;
    margin-bottom: 8px;
}

img {
    margin: 0px;
}

hr {
    width: 1200px;
    height: 4px;
    border: none;
    background-color: black;
    margin: 30px 0px 0px 0px;
}

#contenu_interne p {
    width: 1180px;
}

#contenu_live p {
    margin-top: 8px;
    width: 520px;
	border-bottom: 8px solid red;
	padding-left: 340px;
	padding-right: 340px;
    padding-top: 0px;
    padding-bottom: 0px;
}

#contenu_live_zoom p {
    margin-top: 8px;
    width: 1270px;
	border-bottom: 8px solid red;
	padding-left: 340px;
	padding-right: 340px;
    padding-top: 0px;
    padding-bottom: 0px;
}

#pied div {
    width: 1180px;
}

#pied p {
    width: 1180px;
    height: 40px;
    text-align: center;
    padding-top: 8px;
}

#resultats p {
    height: 2244px;
    margin-bottom: revert;
}

#colonne1 p {
    width: 600px;
}

#colonne2 p {
    width: 580px;
    padding: 0px;
}

#colonne2 img {
    width: 100%;
}

/* -------------------> Aside */

aside {
    padding-top: 121px;
    position: fixed;
    background-color: black;
    display: inline-block;
    width: 40px;
    height: 100%;    
    z-index: 15;
}

#fleches {
    position: fixed;
    bottom: 150px;
    left: 28px;
    width: 40px;
    transform: translateX(-50%);
    display: none;
    /* cachée par défaut */
    z-index: 9999;
}

#email {
    position: fixed;
    bottom: 0px;
    left: 28px;
    transform: translateX(-50%);
}

/* -------------------> Menu v2 */

/* Styles de base pour le menu */
.menu-principal {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-principal>li {
    display: block;
    /* Pour un menu horizontal */
    position: relative;
}

.menu-principal a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: black;
}

/* Style pour les sous-menus */
.sous-menu2 {
    list-style: none;
    text-align: right;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 100%;
    /* Position sous l'élément parent */
    left: 0;
    background-color: LightGray;
    display: none;
    /* Masquer les sous-menus par défaut */
    min-width: 330px;
}

.sous-menu2 li {
    position: relative;
    /* Nécessaire pour positionner les sous-menus de niveau 3 */
}

.sous-menu2 a:hover {
    background-color: black;
    font-weight: bold;
    color: #f3a602;
}

/* Rendre le sous-menu2 visible au survol */
.menu-principal li:hover>.sous-menu2 {
    display: block;
}

/* Styles pour les sous-menus de niveau 3 (exemple) */
.sous-menu2 .sous-menu2 {
    top: 0;
    left: 100%;
    /* Positionner à droite du parent */
}

/* -------------------> Galerie */

.gallery {
    width: 1200px;
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    background-color: #fafafa;
    padding-top: 8px;
}

.gallery img {
    width: 100%;
    max-width: 230px;
    max-height: 306px;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    filter: grayscale(100);
}

.gallery img:hover {
    transform: scale(0.9);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    filter: grayscale(0);
}

/* -------------------> Galerie : visionneuse */

.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 10, 10, 0.9);
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 25;
}

.lightbox img {
    max-width: 90%;
    max-height: 80%;
    border-radius: 8px;
}

.lightbox .close,
.lightbox .prev,
.lightbox .next {
    position: absolute;
    font-size: 30px;
    color: white;
    cursor: pointer;
    background: none;
    border: none;
    font-weight: bold;
}

.lightbox .close {
    top: 20px;
    right: 20px;
}

.lightbox .prev {
    left: 60px;
    top: 50%;
    transform: translateY(-50%);
}

.lightbox .next {
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

/* -------------------> Galerie : responsivité */

@media (max-width: 768px) {
    .gallery img {
        max-width: 100px;
    }

    .lightbox img {
        max-width: 95%;
    }
}

/* -------------------> Pop-up */

.popup {
  display: none; /* Caché par défaut */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.95); /* Fond semi-transparent */
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.popup-content {
  background-color: black;
  padding: 20px;
  position: relative;
  border-radius: 20px;
}

.popup-content img {
  max-width: 100%;
}

.popup-content button {
  position: absolute;
  top: 15px;
  right: 22px;
  font-size: 30px;
  font-weight: bold;
  cursor: pointer;
  background-color:rgba(255, 255, 255, 0);
  border-radius: 10px;
  color: white;
  border: none;
}

/* -------------------> Compte à rebours */

.countdown {
    position: absolute;
    top: 392px;
    left: -20px;
    background: red;
    color: white;
    border-radius: 10px;
    padding-right: 15px;
    padding-top:15px;
}

.countdown a {
    color: white;
}

.part {
    min-width: 31px;
}

.num {
    font-size: 1.7rem;
    font-weight: 500;
    line-height: 1;
}

.label {
    font-size: 0.8rem;
    color: white;
}

.vertical {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}