@import url('https://fonts.googleapis.com/css2?family=Rubik+Glitch&display=swap');


body{
    background-color: #D7E9ED;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    transition: background-color 0.3s color 0.3s;
}

/*-----------------------Mode Sombre-------------------------*/

[data-bs-theme="dark"] body {
    background-color: #222525;
    color: white;
}

[data-bs-theme="dark"] #box {
    background-color: #2E3232;
    border-color: #2E3232;
    color: white;
}

[data-bs-theme="dark"] .navbar {
    background-color: #1E1F1F !important;
}

[data-bs-theme="dark"] .nav-link {
    color: white !important;
}

[data-bs-theme="dark"] .nav-link:hover {
    color: #999 !important;
}

[data-bs-theme="dark"] .nav-link.active {
    color: #D0662A !important;
}

[data-bs-theme="dark"] .form-control {
    background-color: #3A3D3D;
    border-color: white;
    color: white;
}


[data-bs-theme="dark"] .button-mode button{
    background-color: #D7E9ED;
}


.button-mode{
    position: fixed;
    bottom: 2vh;
    right: 2vw;
    display: flex;

}

.button-mode button {
  background: none;
  cursor: pointer;
  border: none;
  padding: 5px;
}

.button-mode img {
  width: 28px;
  height: 28px;
}


/*-----------------------------------------------------------*/

#box {
    width: 100%;               /* largeur par défaut sur grand écran */
    max-width: 70%;        /* limite largeur maximale */
    margin: 2vh 2vw;  /* marge en haut pour laisser espace avec navbar */
    padding: 4vh 3vw;         /* padding interne */
    background-color: white;
    border: solid #ffffff 5px;
    border-radius: 10px;
    box-sizing: border-box;
    order: 2;
}

#page {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: auto;
    margin-left: 2vw;
    margin-right: 2vw;
    justify-content: center;
}

.adsbygoogle{
    max-width: 100%;
    max-height: 100%;
}

@media (max-width: 1200px) {
	#page {
        flex-direction: column; /* Empile les éléments en colonne sur petits écrans */
        align-items: center;
		}
  
  	#left-ad-container,
    #right-ad-container {
      	display: none;
  		}
    .ad-container {
  	 	width: 75%;  /* Les publicités occupent plus d'espace sur mobile */
        margin-bottom: 15px;
      	height: 7vh   
  		}
    #box{
        max-width: 90%;
    }
}

@media (max-width: 767.98px) {

  .footer-row > div:nth-child(1) {
    order: 3; /* Logo */
    width: 100%;
  }

  .footer-row > div:nth-child(2) {
    order: 1; /* Accès */
  }

  .footer-row > div:nth-child(3) {
    order: 2; /* Navigation */
  }

  .footer-row > div:nth-child(4) {
    order: 4; /* Newsletter (ne bouge pas) */
  }
}
  
@media (min-width: 1200px) {

  #top-ad-container,
  #bottom-ad-container {
    display: none;
  }
}

.ad-container {
    width: 15%;  /* Taille des blocs publicitaires */
    background-color: #f0f0f0;
    text-align: center;
    margin: 2vh 0;
  	height: 100%
}

.ad-container2 {
    width: 100%;  
    background-color: #f0f0f0;
    padding: 10px;
    text-align: center;
    margin: 2vh 2vw 0 2vw;
  	height: 7vh;
}

#left-ad-container {
    order: 1;
    height: 100%;
    position: sticky;
    top: 0;
    /* Supprimez la ligne max-width vide ou fixez-la */
    flex: 1; /* Ajout conseillé */
}

#right-ad-container {
    order: 3;
    height: 100%;
    position: sticky;
    top: 0;
    flex: 1; /* Ajout conseillé */
}

#top-ad-container {
    order: 1;  /* Publicité à gauche */
    margin: 2vh 2vw 0 2vw;
}

#bottom-ad-container {
    order: 3;  /* Publicité à droite */
    margin: 0 2vw 2vh 2vw;
}

.navbar-brand{
  color: #D0662A;
  font-family: "Rubik Glitch";
}


nav{
    background-color: #58B6D0;
}

.btn{
    background-color: #387586;
    color: white;
    border-color: white;
}

[data-bs-theme="dark"] .btn{
    background-color: #25140a;
    color: white;
    border-color: white;
}

.btn:hover{
    background-color: #438FA8;
    color: white;
    border-color: black;
}

[data-bs-theme="dark"] .btn:hover{
    background-color: #381d0d;
    color: white;
    border-color: white;
}

.btn-outline-success {
    --bs-btn-color: #58B6D0;
    --bs-btn-border-color: #58B6D0;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #58B6D0;
    --bs-btn-hover-border-color: #58B6D0;
    --bs-btn-focus-shadow-rgb: 25, 135, 84;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #58B6D0;
    --bs-btn-active-border-color: #58B6D0;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #58B6D0;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #58B6D0;
    --bs-gradient: none;
}

[data-bs-theme="dark"] .btn-outline-success {
    --bs-btn-color: #25140a;
    --bs-btn-border-color: #25140a;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #25140a;
    --bs-btn-hover-border-color: #25140a;
    --bs-btn-focus-shadow-rgb: 25, 135, 84;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #25140a;
    --bs-btn-active-border-color: #25140a;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #25140a;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #25140a;
    --bs-gradient: none;
}


.pagination{
	background: white;
}

.logo{

    vertical-align: 0;
}

.nav-link.active {
    color:#D0662A !important;
    font-weight: bold;
}

.footer {
	background-color: #58B6D0;
    text-align: center;
    padding: 3px;
    color: white;
    margin-top: 10px;
    height: max-content;
}

a {
    color:#3A3D3D;
    text-decoration: none;
}

[data-bs-theme="dark"] a {
    color:white;
    text-decoration: none;
}

[data-bs-theme="dark"] a:hover {
    color: #3A3D3D;
}

.footer{
    background-color: #58B6D0;
    padding: 2vw;
}

[data-bs-theme="dark"] .footer {
    background-color: #1E1F1F !important;
}




/* Activer les container queries */
.table-responsive {
    container-type: inline-size;
    container-name: rankingTable;
}

/* ========= PAR DÉFAUT : PETIT ========= */
/* qual, #, logo, pts */
.tb th:nth-child(5),
.tb td:nth-child(5),
.tb th:nth-child(6),
.tb td:nth-child(6),
.tb th:nth-child(7),
.tb td:nth-child(7),
.tb th:nth-child(8),
.tb td:nth-child(8),
.tb th:nth-child(9),
.tb td:nth-child(9) {
    display: none;
}

/* cacher le NOM (span) */
.tb th:nth-child(3) span,
.tb td:nth-child(3) span {
    display: none;
}

/* ========= MOYEN (>= 400px) ========= */
/* qual,#, logo, MJ, V, N, D, pts */
@container rankingTable (min-width: 400px) {
    .tb th:nth-child(5),
    .tb td:nth-child(5),
    .tb th:nth-child(6),
    .tb td:nth-child(6),
    .tb th:nth-child(7),
    .tb td:nth-child(7) {
        display: table-cell;
    }
}

/* ========= GRAND (>= 600px) ========= */
/* ajouter NOM */
@container rankingTable (min-width: 600px) {
    .tb th:nth-child(3) span,
    .tb td:nth-child(3) span {
        display: inline;
    }
}

/* ========= PLUS GRAND (>= 750px) ========= */
/* ajouter + / - */
@container rankingTable (min-width: 750px) {
    .tb th:nth-child(8),
    .tb td:nth-child(8) {
        display: table-cell;
    }
}

/* ========= TRÈS GRAND (>= 900px) ========= */
/* ajouter Diff */
@container rankingTable (min-width: 900px) {
    .tb th:nth-child(9),
    .tb td:nth-child(9) {
        display: table-cell;
    }
}

@supports not (container-type: inline-size) {

    @media (max-width: 399px) {
        .tb th:nth-child(n+5):nth-child(-n+9),
        .tb td:nth-child(n+5):nth-child(-n+9),
        .tb th:nth-child(3) span,
        .tb td:nth-child(3) span {
            display: none;
        }
    }

    @media (min-width: 400px) and (max-width: 599px) {
        .tb th:nth-child(4),
        .tb td:nth-child(4),
        .tb th:nth-child(5),
        .tb td:nth-child(5),
        .tb th:nth-child(6),
        .tb td:nth-child(6),
        .tb th:nth-child(7),
        .tb td:nth-child(7) {
            display: table-cell;
        }

        .tb th:nth-child(8),
        .tb td:nth-child(8),
        .tb th:nth-child(9),
        .tb td:nth-child(9),
        .tb th:nth-child(3) span,
        .tb td:nth-child(3) span {
            display: none;
        }
    }

    @media (min-width: 600px) and (max-width: 749px) {
        .tb th:nth-child(3) span,
        .tb td:nth-child(3) span {
            display: inline;
        }
    }

    @media (min-width: 750px) and (max-width: 899px) {
        .tb th:nth-child(8),
        .tb td:nth-child(8) {
            display: table-cell;
        }
    }

    @media (min-width: 900px) {
        .tb th:nth-child(9),
        .tb td:nth-child(9) {
            display: table-cell;
        }
    }
}

.carousel-item img {
    /* Définit le ratio 16/9 */
    aspect-ratio: 16 / 9;
    /* Remplit l'espace sans déformer (coupe les bords si besoin) */
    object-fit: cover;
    /* Centre l'image pour que le visage des joueurs reste visible */
    object-position: center;
    /* Optionnel : arrondir les angles pour un look plus moderne */
    border-radius: 10px;
}

.carousel-caption {
    background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
}

[data-bs-theme="dark"] .carousel-caption {
    background-color: rgba(208, 102, 42, var(--bs-bg-opacity)) !important;
}

h1{
    text-align: center;
}

.loader-container {
    position: relative;
    text-align: center;
}

/* Remplace 'ton-logo.png' par le chemin de ton image */
.pulse {
    animation: pulse 2s infinite ease-in-out;
}

/* --- OPTION 1 : Pulsation (Moderne et élégant) --- */
@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; filter: drop-shadow(0 0 15px #387586); }
}

/* --- OPTION 2 : Rotation 3D (Le "Spin Roll") --- */
.spin-roll {
    animation: spin 3s infinite linear;
}
@keyframes spin {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(360deg); }
}

/* --- OPTION 3 : Flottement (Soft) --- */
.float {
    animation: float 2.5s infinite ease-in-out;
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

iframe{
    inset: auto auto 15px 0px !important;
}