/* ---------------------------------------------------------
   STYLES CSS - VERSION COMPLÈTE (Fusion de style.css et style_23.css)
   --------------------------------------------------------- */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 18px; 
}

body { 
    background-color: #000000; 
    min-height: 100vh; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    width: 100%; 
}

/* --- Centrage global forcé --- */
.main-container { 
    width: 100%; 
    max-width: 600px; 
    margin: 0 auto;   
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    padding: 10px; 
}

/* --- Uniformisation des Bandeaux --- */
.logo-container-bandeau, 
.footer-banner { 
    width: 100%; 
    margin: 10px 0; 
}

.logo-container-bandeau img, 
.footer-banner img { 
    width: 100%; 
    height: auto; 
    display: block; 
    border-radius: 4px; 
}

.header-perso {
    text-align: center !important; /* Le !important force le centrage */
    margin-top: 15px !important;
    margin-bottom: 5px !important;
    border-top: 1px solid #ccc;
    padding-top: 10px !important;
    display: block; /* S'assure que l'élément occupe toute la largeur pour bien se centrer */
}

.login-box {
	width: 100%;
	max-width: 3000px;
	background: #ffffff;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 4px 15px rgba(0,0,0,0.1);
	margin: 10px 0;
}

.login-box h1 {
    text-align: center;
    margin-bottom: 20px; /* Ajoute un petit espace sous le titre pour aérer */
    color: #333;         /* Optionnel : ajuste la couleur si besoin */
}

.tab-content h3, .login-box h1, .login-box h2, .login-box h3 {
    text-align: center;
}

/* Espacement sous le titre H3 pour le détacher des fichiers */
.tab-content h3 {
    margin-bottom: 20px !important; /* Augmentez à 20px ou 25px pour un saut de ligne plus net */
    padding-bottom: 0 !important;   /* Suppression du padding */
    border-bottom: none !important; /* Suppression de la ligne */
}

/* ---------------------------------------------------------
   STYLES SPÉCIFIQUES À LA PAGE DE CONNEXION (index.php)
   --------------------------------------------------------- */
.page-login .logo-container-bandeau, 
.page-login .footer-banner { width: 100%; max-width: 600px; margin: 10px 0; }

.page-login .logo-container-bandeau img, 
.page-login .footer-banner img { width: 100%; height: auto; display: block; border-radius: 4px; }

.page-login .login-box { 
    background: #ffffff; padding: 40px 30px; border-radius: 8px; width: 100%; 
    max-width: 600px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
}

.page-login .form-group { margin-bottom: 15px; }
.page-login .form-group label { display: block; margin-bottom: 5px; }
.page-login .form-group input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; }
.page-login .btn-submit { width: 100%; padding: 10px; background: #b30000; color: white; border: none; border-radius: 4px; cursor: pointer; }

.page-login .contact-footer { text-align: center; margin-top: 20px; font-size: 1.1em; }
.page-login .contact-footer a { display: inline-block; margin-top: 5px; font-weight: bold; color: #b30000; }

/* ---------------------------------------------------------
   STYLES SPÉCIFIQUES AU TABLEAU DE BORD (tableau_de_bord.php)
   --------------------------------------------------------- */
/* --- Version PC : Configuration Large pour le Tableau de Bord --- */
.dashboard-page .main-container {
    max-width: 1100px; /* Agrandit le bloc sur PC */
}

/* --- Version Mobile : On revient à 100% de la largeur --- */
@media (max-width: 600px) {
    .dashboard-page .main-container {
        max-width: 100%;
        padding: 5px;
    }
}

.tournois-table { width: 100%; border-collapse: collapse; margin-top: 15px; font-size: 14px; }
.tournois-table thead tr { background-color: #b30000; color: #ffffff; }
.tournois-table th, .tournois-table td { padding: 12px 15px; border: 1px solid #dddddd; text-align: center; }

/* --- Onglets (Tableau de bord) --- */
.tabs-menu { display: flex; width: 100%; border-bottom: 2px solid #b30000; margin-top: 20px; }
.tab-button { flex: 1; padding: 10px 5px; background: #eee; border: 1px solid #ddd; border-bottom: none; cursor: pointer; font-size: 14px; text-align: center; }
.tab-button.active { background: #b30000; color: white; border-color: #b30000; }
.tab-content { display: none; padding: 20px; border: 1px solid #ddd; background: #fff; border-top: none; width: 100%; }
.tab-content.active { display: block; }

/* --- SECTION CONTACT - besoin_aide.php --- */
.page-contact .logo-container-bandeau, 
.page-contact .footer-banner,
.page-contact .login-box { width: 100%; max-width: 600px; margin: 10px auto; }

.page-contact .login-box { background: #ffffff; padding: 40px 30px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.page-contact .form-group { margin-bottom: 15px; }
.page-contact .form-group label { display: block; margin-bottom: 5px; font-weight: bold; }
.page-contact .form-group input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 18px; }
.page-contact .form-textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 18px; }
.page-contact .btn-submit { width: 100%; padding: 10px; background: #b30000; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 18px; }
.page-contact .contact-footer { text-align: center; margin-top: 20px; font-size: 1.1em; }
.page-contact .contact-footer a { color: #b30000; text-decoration: none; font-weight: bold; }

/* Tableau */
.tournois-table { width: 100%; border-collapse: collapse; margin-top: 15px; font-size: 14px; }
.tournois-table thead tr { background-color: #b30000; color: #ffffff; }
.tournois-table th, .tournois-table td { padding: 12px 15px; border: 1px solid #dddddd; text-align: center; }

/* --- Centrage pour PC --- */
.tournois-table td { 
    text-align: center; /* Centre le texte provenant de la base */
    vertical-align: middle; 
}

/* Force le bouton profil à redevenir normal si on est sur l'onglet tournois */
body.is-on-tournois #bouton-profil-id {
	background-color: transparent !important; /* Ou votre couleur d'origine */
	border: none !important;
	color: inherit !important;
}

.login-links {
    text-align: center;
    margin-top: 15px;
}

.login-links a {
    text-decoration: none;
    color: #007bff; /* Ou votre couleur habituelle */
}

.titre-section {
    color: #b30000;
    border-bottom: 2px solid #b30000;
    padding-bottom: 10px;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.5em;
}

.titre {
    color: #ffffff;
	background-color: #b30000;
    /*border-bottom: 2px solid #b30000; */
    /*padding-bottom: 10px;*/
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.5em;
}

/* On s'assure que tous les conteneurs d'onglets commencent de la même façon */
.tab-content {
    padding-top: 20px; /* Espace uniforme en haut de chaque onglet */
}

/* Conteneur pour centrer le bouton horizontalement
.conteneur-deconnexion {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
*/

.table-grades th {
    text-align: center;
}

/* Centre le texte dans les en-têtes de tableau */
table th {
    text-align: center;
}

.doc-list {
    list-style: none; /* Supprime le point ou l'astérisque */
    padding: 0;       /* Supprime la marge intérieure par défaut */
    margin: 0;        /* Supprime la marge extérieure par défaut */
}

/* Suppression des puces pour les listes de documents */
.tab-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tab-content li {
    padding: 5px 0; /* Optionnel : ajoute un léger espacement entre les lignes */
}

/* 1. Par défaut (Mobile) : On cache l'image */
.ceinture-image-container {
    display: none !important; /* Le !important force la priorité sur toute autre règle */
}

/* 2. Pour PC (Écrans larges) : On affiche l'image */
@media (min-width: 601px) {
    .ceinture-image-container {
        display: block !important;
        margin-left: 15px;
    }
}

@media (max-width: 767px) {
	.profil-diplome {
		display: none; /* Reste masqué totalement sur Mobile */
	}
}

/* Style du menu d'onglets amélioré */
.tabs-menu {
    display: flex;
    overflow-x: auto; /* Active le défilement horizontal si ça déborde */
    white-space: nowrap; /* Empêche les boutons de passer à la ligne */
    gap: 5px; /* Espace proprement les boutons */
    
    /* Supprime la barre de défilement visuelle pour que ce soit propre (Optionnel) */
    scrollbar-width: none; /* Firefox */
}
.tabs-menu::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.tab-button {
    flex: 0 0 auto; /* Empêche les boutons de s'écraser sur mobile */
    padding: 10px 20px; /* Confort de clic sur mobile */
}

/* ==========================================================================
   POST-IT
   ========================================================================== */

.post-it-container {
	display: flex;
	justify-content: center;
	/* CORRECTION : 25px en haut (pour l'écart avec le bandeau) et 25px en bas (avec la login-box) */
	margin: 25px auto 25px auto; 
	padding: 0 10px;
}

.post-it {
	background: #fff9c4 !important; /* Jaune clair pastel */
	color: #333333 !important;      /* Texte gris foncé/noir */
	padding: 15px 20px;
	width: 100%;
	max-width: 360px;               /* S'aligne sur la largeur de la login-box */
	font-family: 'Arial', sans-serif;
	font-size: 0.95em;
	font-weight: bold;
	text-align: center;
	line-height: 1.4;
	border-left: 5px solid #fbc02d; /* Petite bande jaune plus foncée style bloc-notes */
	
	/* Ombre portée pour l'effet décollé */
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.15);
	
	/* Légère inclinaison pour l'effet Post-it */
	transform: rotate(-1deg);
	
	/* Transition fluide pour l'effet au survol */
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Effet interactif au survol */
.post-it:hover {
	transform: rotate(0deg) scale(1.02);
	box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.2);
}

.post-it-important {
    background-color: #FFF9C4; /* Jaune pâle */
    border-left: 5px solid #FFEB3B; /* Bordure plus foncée pour le relief */
    padding: 15px;
    margin: 20px 0;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    font-size: 0.95em;
}

/* ==========================================================================
   UNIFORMISATION DES EN-TÊTES DE TABLEAUX (th)
   ========================================================================== */
th {
    background-color: #000000 !important; /* Fond noir absolu */
    color: #ffffff !important;            /* Texte blanc pur */
    text-align: center !important;        /* Centrage horizontal du texte */
    vertical-align: middle !important;    /* Centrage vertical (optionnel, pour le confort visuel) */
    padding: 12px 10px !important;        /* Espacement interne pour laisser respirer le texte */
}

@media (max-width: 600px) {
    /* Cache les entêtes sur mobile */
    .tournois-table thead { display: none; }
    
    /* Structure en bloc pour les lignes */
    .tournois-table, .tournois-table tbody, .tournois-table tr, .tournois-table td { 
        display: block; 
        width: 100%; 
    }
    
    .tournois-table tr { 
        margin-bottom: 20px; 
        border: 1px solid #ddd; 
        border-radius: 4px; 
        padding: 10px;
        background-color: #f9f9f9;
    }

    /* Cible la première cellule de chaque ligne (la compétition) */
    /* On utilise tr > td:first-child pour une précision maximale */
    .tournois-table tr > td:first-child {
		background-color: #000000 !important; /* Fond noir absolu */
		color: #ffffff !important;            /* Texte blanc pur */
		font-weight: bold;
        text-align: center;
/*        border-bottom: 2px solid #ffcccc !important; */
        padding: 10px;
    }
	
    /* Style pour les autres cellules */
    .tournois-table td { 
        text-align: center; 
        padding: 10px;
        border: none;
    }
    
    .tournois-table td::before { 
        display: block; 
        text-align: center; 
        font-weight: bold; 
        color: #00000; 
        margin-bottom: 5px; 
        content: attr(data-label);
    }
}

@media screen and (max-width: 768px) {
    /* 1. On donne la couleur de fond noire à toute la cellule */
    .tournois-table td[data-label="Compétition"] {
        background-color: #000000 !important;
        color: #ffffff !important;
        text-align: center !important;
        padding: 10px !important;
    }

    /* 2. On isole la valeur pour la mettre sur fond blanc */
    .tournoi-valeur {
        display: block !important;
        background-color: #ffffff !important;
        color: #b00000 !important;
        padding: 8px !important;
        margin-top: 5px !important; /* Espace le blanc du haut de la cellule */
		margin-bottom: 5px !important; /* Espace le bas du bloc */
        border-radius: 4px !important;
    }
}

/* Centrage des images dans le projet Diplômes */
.img-placeholder img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

/* Style pour les titres de sections (h2) dans le contenu RGPD */
.contenu-rgpd h2 {
    background-color: #FFC000 !important; /* Orange */
    color: #000000 !important;/* Texte noir */
    padding: 10px 15px !important;        /* Espacement interne */
    border-radius: 5px!important;        /* Coins légèrement arrondis */
    margin-top: 30px!important;          /* Marge supérieure */
    margin-bottom: 15px;       /* Marge inférieure */
    font-size: 1.3em;          /* Taille dynamique */
    font-weight: bold;         /* Mise en gras pour la lisibilité */
    border: none;              /* Suppression de tout trait de soulignement */
}

/* Style optimisé pour les listes */
.contenu-rgpd ul {
    list-style-type: square;    /* Style de puce */
    margin-left: 20px;          /* Retrait à gauche */
    margin-top: 20px;           /* Espace au-dessus de la liste */
    margin-bottom: 20px;        /* Espace en dessous de la liste */
    padding-left: 15px;         /* Espace pour ne pas coller les puces au texte */
}

.contenu-rgpd li {
    margin-bottom: 10px;
}
.contenu-rgpd {
    text-align: justify;      /* Justifie le texte */
    line-height: 1.6;         /* Améliore la lisibilité avec un interligne confortable */
    color: #333;              /* Couleur de texte standard pour une bonne lecture */
}

/* ==========================================================================
   LAYOUT : ACTIONS-CONTAINER (Correction finale)
   ========================================================================== */
/*.actions-container {
	display: flex; 
	gap: 15px;
	width: 100%;
	margin-top: 20px;
}
*/

.actions-container {
	flex: 1;
	display: flex !important;
	align-items: center;
	justify-content: center;
	text-align: center;
	white-space: normal !important;
	line-height: 1.2 !important;
	padding: 12px 10px !important;
}

.buttons-container { 
	display: flex !important;
	gap: 15px !important;
	width: 100% !important;
	margin-top: 20px;
	align-items: stretch !important;
}

.buttons-container > * {
    flex: 1 !important;           /* Force le partage 50/50 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 12px 10px !important;
    box-sizing: border-box !important; /* Essentiel pour la hauteur identique */
    margin: 0 !important;

    /* On reprend vos styles visuels ici */
    white-space: normal !important;
    line-height: 1.2 !important;
	border-radius: 10px !important;
	border:1px solid transparent !important;
	line-height: normal  !important;
	
	/* test */
	height: auto;         /* Laisse le flexbox gérer la hauteur */
}

.buttons-container-fixe {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Force 50% / 50% */
    gap: 10px;
    align-items: stretch;           /* C'est ici que la magie opère */
}

.buttons-container-fixe .btn-base {
    width: 100%;
    height: auto;                   /* La hauteur s'adapte au texte */
    padding: 12px 10px;             /* Padding uniforme */
    margin: 0 !important;
    display: flex;
    align-items: center;            /* Centre le texte verticalement */
    justify-content: center;
    text-align: center;
    line-height: 1.2;               /* Garde un texte compact */
}

/* Conteneur dédié aux boutons isolés (connexion/déconnexion) */
.single-btn-container {
    display: flex !important;
    justify-content: center !important; /* Centre horizontalement */
    width: 100% !important;
    margin: 20px 0 !important;
}

/* On force le bouton à ne PAS s'étirer */
.single-btn-container .btn-base {
    flex: 0 1 auto !important; /* La clé : taille automatique selon le texte */
    min-width: 150px !important; /* Une largeur minimale pour qu'il soit joli */
    text-align: center !important;
}

/* ==========================================================================
   BOUTONS
   ========================================================================== */

button:disabled {
    background-color: #cccccc !important;
    border-color: #cccccc !important;
    color: #666666 !important;
    cursor: not-allowed !important;
    opacity: 0.7;
}

/* On ajoute une transition pour que le changement de couleur soit doux */
button {
    border: none !important;      /* Supprime la bordure par défaut */
    outline: none !important;     /* Supprime le contour bleu/noir au clic */
	transition: background-color 0.3s ease;
}   

.btn-base {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    
    /* Le bouton s'adapte au texte, mais peut être étiré par le container */
    width: 100%;             /* Force la pleine largeur par défaut */
    padding: 12px 24px;      /* Padding uniforme */
    box-sizing: border-box;  /* Pour que le padding ne dépasse pas */
    
    /* Style */
    line-height: 1.2;
    border-radius: 6px;
    font-weight: 600;
    font-size: 18px;
    text-decoration: none;
    cursor: pointer;
    border: none !important;
    transition: all 0.3s ease;
    
    /* Marges harmonisées */
    margin: 5px 0;           /* Espace vertical uniquement */
    outline: none !important;
}

/* Optionnel : Garder un petit effet au focus pour l'accessibilité */
.btn-base:focus {
    outline: 2px solid #007bff; /* Un trait bleu propre au lieu du noir par défaut */
    outline-offset: 2px;
}

.btn-full {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/* 1. Action Principale */
.btn-primary {
	background-color: #b30000 !important;
	color: white !important;
}

.btn-primary:hover {
	background-color: #8b0000 !important;
}

/* 2. Action Secondaire (Retour) */
.btn-secondary {
	background-color: #f0f0f0 !important; 
	color: #333 !important; 
	border: 1px solid #ccc;
}

.btn-secondary:hover {
	background-color: #e0e0e0 !important;
}

/* 3. Action de Navigation */
.btn-nav {
	background-color: #2c3e50 !important;
	color: white !important;
}

.btn-nav:hover {
	background-color: #1a252f !important;
}

/* Cette règle force l'apparence grisée et l'icône interdit */
button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    border: 1px solid #ccc;
    background-color: #e0e0e0; /* Couleur grise pour bien montrer qu'il est inactif */
    color: #888;
}

/* Telechargement */
.btn-pdf-download {
	display: block;          /* Le bouton prend toute la ligne */
	margin-left: auto;       /* Marge automatique à gauche */
	margin-right: auto;      /* Marge automatique à droite */
	width: fit-content;      /* Le bouton ne prend que la largeur nécessaire */
	background-color: #00BCD4; /* Couleur Cyan de votre charte */
	color: #ffffff;
	padding: 15px 30px;
	text-decoration: none;
	border-radius: 8px;
	font-weight: bold;
	text-align: center;
	transition: background-color 0.3s ease;
	margin-top: 25px;
	margin-bottom:25px;
}

.btn-pdf-download:hover {
	background-color: #0097A7;
}

.btn-retour-tatami {
    display: inline-block;
    margin-top: 25px;
    padding: 10px 20px;
    background-color: #333;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    transition: background 0.2s;
}
.btn-retour-tatami:hover {
    background-color: #b30000; /* Rouge Judo au survol */
}

.btn-retour-accueil {
	display: inline-block;
	margin-top: 25px;
	padding: 10px 20px;
	background-color: #333;
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
	font-weight: bold;
	transition: background 0.2s;
}
.btn-retour-accueil:hover {
	background-color: #b30000; /* Rouge Judo au survol */
}

.btn-retour {
    background: #FFD700 !important; /* Jaune Or */
    color: #000000 !important;      /* Texte noir pour la lisibilité sur le jaune */
    margin-top: 20px;
    width: auto;
    padding: 10px 20px;
    font-size: 0.9em;
    /* On force les propriétés de forme pour qu'elles restent identiques aux autres boutons */
    display: inline-block;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    transition: transform 0.2s, background 0.2s;
    border: none;
}

.btn-retour:hover { 
    background: #e6c200 !important; /* Un jaune légèrement plus foncé pour l'effet survol */
    transform: scale(1.05);
    color: #000000 !important;
}

.btn-compact {
    white-space: nowrap !important; /* Force le texte sur une seule ligne */
    padding: 12px 15px !important;  /* Padding réduit pour gagner de la place */
    font-size: 16px !important;     /* Taille de police légèrement réduite */
}

/* ==========================================================================
   LINK
   ========================================================================== */
/* Zone des liens secondaires */
.links-container {
    display: flex;
    justify-content: space-between; /* Espace les deux liens aux extrémités */
    margin-top: 20px;
    font-size: 0.9em;
}

.link-secondary {
    color: #666;
    text-decoration: none;
    transition: color 0.3s;
}

.link-secondary:hover {
    color: #007bff; /* Changement de couleur au survol */
    text-decoration: underline;
}

@media (max-width: 600px) {
    .links-container {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
}