/* ============================================
   TTCP - Tennis de Table Club Pellerinais
   Design : Sportif moderne aux couleurs du club (vert et blanc)
   ============================================ */

/* Import de Google Fonts - Typographie distinctive */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Exo+2:wght@400;600;700;800&family=Work+Sans:wght@300;400;500;600&display=swap');

/* Variables CSS pour maintenance facile */
:root {
    /* Couleurs principales */
    --couleur-primaire: #096409;
    --couleur-secondaire: #2c8b2c;
    --couleur-accent: #99ee99;
    --couleur-fond: #f8f9fa;
    --couleur-texte: #212529;
    --couleur-texte-clair: #6c757d;
    --blanc: #ffffff;
    --noir: #000000;
    
    /* Typographie */
    --font-titre: 'Archivo Black', sans-serif;
    --font-corps: 'Work Sans', sans-serif;
    --font-display: 'Exo 2', sans-serif;
    
    /* Espacements */
    --espacement-xs: 0.5rem;
    --espacement-sm: 1rem;
    --espacement-md: 2rem;
    --espacement-lg: 4rem;
    --espacement-xl: 6rem;
    
    /* Ombres */
    --ombre-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --ombre-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --ombre-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
    
    /* Animations */
    --transition-rapide: 0.2s ease;
    --transition-normale: 0.3s ease;
    --transition-lente: 0.5s ease;
}

/* Reset et base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-corps);
    color: var(--couleur-texte);
    background: var(--couleur-fond);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Typographie */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: var(--espacement-sm);
}

h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-family: var(--font-titre);
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    color: var(--couleur-primaire);
}

h3 {
    font-size: clamp(1.5rem, 3vw, 2rem);
}

p {
    margin-bottom: var(--espacement-sm);
    font-size: 1.1rem;
}

a {
    color: var(--couleur-primaire);
    text-decoration: none;
    transition: var(--transition-rapide);
}

a:hover {
    color: var(--couleur-secondaire);
}

/* Header */
header {
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.5)), url('../images/header/bandeau-header.png');
    background-size: cover;
    background-position: center 15%;
    background-color: #096409; /* couleur de secours si l'image ne charge pas */
    color: var(--blanc);
    padding: 2rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--ombre-lg);
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--espacement-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--espacement-md);
}

.logo-section {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: transparent;
    order: 1; /* Logo à gauche */
}

nav {
    order: 2; /* Menu à droite */
}

.logo-section img {
    height: 180px;
    width: auto;
    filter: brightness(1.05);
    background: none;
    object-fit: contain;
}

.logo-text {
    display: none; /* Masquer le texte TTCP Le Pellerin */
}

.logo-text .nom-club {
    font-family: var(--font-titre);
    font-size: 1.5rem;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.logo-text .sous-titre {
    font-size: 0.85rem;
    opacity: 0.9;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 300;
}

/* Navigation */
nav ul {
    list-style: none;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

nav ul li a {
    color: var(--blanc);
    padding: 0.75rem 1.25rem;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    transition: var(--transition-rapide);
    position: relative;
    display: block;
}

nav ul li a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: var(--couleur-accent);
    transform: translateX(-50%);
    transition: width var(--transition-normale);
}

nav ul li a:hover::before {
    width: 80%;
}

nav ul li a:hover {
    background: rgba(255, 255, 255, 0.1);
}

nav ul li a.active {
    background: var(--couleur-secondaire);
    color: var(--blanc);
}

nav ul li a.active::before {
    width: 0;
}

/* Sous-menu déroulant (ex : "Sportif") */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-toggle {
    cursor: pointer;
}

.nav-submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    flex-direction: column;
    gap: 0;
    min-width: 190px;
    background: var(--couleur-primaire);
    box-shadow: var(--ombre-lg);
    border-radius: 4px;
    z-index: 200;
    list-style: none;
    /* Pas de margin-top : un espace ici casserait la continuité du survol
       (la souris "sortirait" de la zone .nav-dropdown en descendant vers le
       sous-menu, qui se refermerait avant d'être atteint). Le padding-top
       joue le même rôle visuel de respiration sans créer ce vide. */
    margin: 0;
    padding: calc(0.3rem + 6px) 0.3rem 0.3rem;
}

.nav-dropdown:hover .nav-submenu,
.nav-dropdown.active .nav-submenu {
    display: flex;
}

.nav-submenu li a {
    white-space: nowrap;
    border-radius: 4px;
}

/* Menu burger pour mobile */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--blanc);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
}

/* Hero Section */
.hero {
    background: linear-gradient(135deg, var(--couleur-primaire) 0%, #064806 100%);
    color: var(--blanc);
    padding: var(--espacement-xl) var(--espacement-md);
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 60%;
    height: 200%;
    background: radial-gradient(circle, rgba(153, 238, 153, 0.15) 0%, transparent 70%);
    animation: pulse 4s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.1); opacity: 0.5; }
}

.hero-content {
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}

.hero h1 {
    color: var(--blanc);
    margin-bottom: var(--espacement-md);
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    animation: slideInDown 0.8s ease-out;
}

.hero p {
    font-size: 1.4rem;
    max-width: 700px;
    margin: 0 auto var(--espacement-md);
    opacity: 0.95;
    animation: fadeIn 1s ease-out 0.3s both;
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Boutons CTA */
.cta-buttons {
    display: flex;
    gap: var(--espacement-sm);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--espacement-md);
}

.btn {
    display: inline-block;
    padding: 1rem 2.5rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition-normale);
    border: none;
    text-decoration: none;
}

.btn-primary {
    background: var(--couleur-secondaire);
    color: var(--blanc);
    box-shadow: 0 4px 15px rgba(44, 139, 44, 0.4);
}

.btn-primary:hover {
    background: #257025;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(44, 139, 44, 0.5);
}

.btn-secondary {
    background: transparent;
    color: var(--blanc);
    border: 2px solid var(--blanc);
}

.btn-secondary:hover {
    background: var(--blanc);
    color: var(--couleur-primaire);
}

/* Container principal */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--espacement-lg) var(--espacement-md);
}

/* Sections */
section {
    margin-bottom: var(--espacement-xl);
}

.section-title {
    text-align: center;
    margin-bottom: var(--espacement-lg);
    position: relative;
}

.section-title::after {
    content: '';
    display: block;
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, var(--couleur-secondaire), var(--couleur-accent));
    margin: var(--espacement-sm) auto 0;
    border-radius: 2px;
}

/* Grilles */
.grid {
    display: grid;
    gap: var(--espacement-md);
}

.grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid-4 {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Cards */
.card {
    background: var(--blanc);
    border-radius: 12px;
    padding: var(--espacement-md);
    box-shadow: var(--ombre-sm);
    transition: var(--transition-normale);
    border: 2px solid transparent;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--ombre-lg);
    border-color: var(--couleur-secondaire);
}

.card h3 {
    color: var(--couleur-primaire);
    margin-bottom: var(--espacement-sm);
}

.card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: var(--espacement-sm);
}

/* Carte événement : texte à gauche, image à droite dans un cadre de taille
   fixe (overflow:hidden) — garantit un rendu constant quelle que soit la
   résolution de la photo fournie, sans jamais déborder ni rester minuscule. */
.event-card-inner {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
}
.event-card-texte {
    flex: 1;
    min-width: 0;
}
.event-card-image-wrap {
    width: 130px;
    height: 130px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.5);
    position: relative;
}
.event-card-photo-badge {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: rgba(0, 0, 0, 0.65);
    color: white;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 10px;
    pointer-events: none;
}

/* Vignette générique pour un PDF (pas d'aperçu du contenu — icône + libellé),
   utilisée dans les cadres image existants (événements, information
   importante) quand le média joint est un PDF plutôt qu'une photo. */
.pdf-tile {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    text-decoration: none !important;
    color: var(--couleur-primaire) !important;
    background: rgba(255, 255, 255, 0.6);
    transition: var(--transition-rapide);
}
.pdf-tile:hover {
    filter: brightness(0.94);
}
.pdf-tile-icone {
    font-size: 2.2rem;
    line-height: 1;
}
.pdf-tile-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

/* Liste des PDF joints à un événement, sous le texte de la carte */
.event-card-pdfs {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 0.6rem;
}
.event-card-pdfs a {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--couleur-primaire);
    text-decoration: none;
    width: fit-content;
}
.event-card-pdfs a:hover {
    text-decoration: underline;
}
.event-card-image-wrap img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    display: block;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
}
.event-card-image-wrap img.lightbox-image {
    cursor: zoom-in;
    transition: var(--transition-rapide);
}
.event-card-image-wrap img.lightbox-image:hover {
    filter: brightness(0.92);
}
@media (max-width: 550px) {
    .event-card-inner {
        flex-direction: column;
    }
    .event-card-image-wrap {
        width: 100%;
        height: 160px;
    }
}

/* Footer */
footer {
    background: #000000;
    color: var(--blanc);
    padding: var(--espacement-lg) var(--espacement-md) var(--espacement-md);
}

.footer-content {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--espacement-md);
    margin-bottom: var(--espacement-md);
}

.footer-section h3 {
    color: var(--couleur-accent);
    margin-bottom: var(--espacement-sm);
    font-size: 1.3rem;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 0.5rem;
}

.footer-section a {
    color: rgba(255, 255, 255, 0.8);
}

.footer-section a:hover {
    color: var(--couleur-accent);
}

.footer-bottom {
    text-align: center;
    padding-top: var(--espacement-md);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    opacity: 0.8;
}

/* Responsive */
@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }
    
    nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--couleur-primaire);
        max-height: 0;
        overflow: hidden;
        transition: var(--transition-normale);
    }
    
    nav.active {
        max-height: 800px;
        box-shadow: var(--ombre-lg);
    }
    
    nav ul {
        flex-direction: column;
        padding: var(--espacement-sm);
    }
    
    nav ul li a {
        display: block;
        padding: 1rem;
    }

    /* Sur mobile, le sous-menu s'affiche en ligne (pas en superposition) */
    .nav-submenu {
        position: static;
        box-shadow: none;
        background: rgba(0, 0, 0, 0.15);
        margin: 0;
        padding-left: 1rem;
        padding-top: 0.3rem; /* pas besoin de la marge tampon anti-survol ici (mode clic, pas de vide à traverser) */
    }
    
    .header-container {
        flex-wrap: wrap;
    }
    
    .logo-text .nom-club {
        font-size: 1.2rem;
    }
    
    .hero {
        padding: var(--espacement-lg) var(--espacement-sm);
    }
    
    .container {
        padding: var(--espacement-md) var(--espacement-sm);
    }
    
    .cta-buttons {
        flex-direction: column;
    }
    
    .btn {
        width: 100%;
    }
}

/* Animations au scroll */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Fiches "personne" (entraîneurs, membres du bureau) avec photo ronde uniforme */
.personnes-liste {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
    margin-top: 1rem;
}

/* Un bloc par commission, disposition adaptative selon leur nombre */
.commissions-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
}

.commission-bloc {
    /* Quatre blocs maximum par ligne. Les blocs de la dernière ligne
       s'agrandissent à parts égales pour en occuper toute la largeur. */
    flex: 1 1 280px;
}

.commission-bloc h3 {
    margin-top: 0;
}

.personne-fiche {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 110px;
}

.personne-fiche-large {
    width: 150px;
}

.personne-photo {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    margin-bottom: 0.5rem;
    box-shadow: var(--ombre-sm);
    background: var(--couleur-fond);
    border: 2px solid var(--blanc);
    outline: 1px solid #e9ecef;
}

.personne-photo-placeholder {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    margin-bottom: 0.5rem;
    background: var(--couleur-accent);
    color: var(--couleur-primaire);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.6rem;
    border: 2px solid var(--blanc);
    outline: 1px solid #e9ecef;
}

.personne-fonction {
    display: block;
    font-weight: 700;
    color: var(--couleur-primaire);
    font-size: 0.8rem;
    margin-bottom: 0.15rem;
}

.personne-nom {
    font-size: 0.85rem;
    line-height: 1.2;
}

.personne-contact {
    display: block;
    font-size: 0.72rem;
    color: var(--couleur-texte-clair);
    margin-top: 0.25rem;
    word-break: break-word;
}

.joueur-photo-grande {
    width: 140px;
    height: 140px;
    font-size: 2.2rem;
    flex-shrink: 0;
}

.joueur-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: -0.25rem 0 1.5rem;
}

.joueur-navigation-lien {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 42px;
    padding: 0.55rem 0.85rem;
    color: var(--couleur-primaire);
    background: var(--blanc);
    border: 1px solid rgba(7, 91, 7, 0.2);
    border-radius: 9px;
    box-shadow: var(--ombre-sm);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-rapide);
}

.joueur-navigation-lien:hover {
    color: var(--blanc);
    background: var(--couleur-primaire);
    transform: translateY(-2px);
}

.joueur-navigation-lien[aria-disabled="true"] {
    opacity: 0.4;
    pointer-events: none;
    box-shadow: none;
}

.joueur-navigation-position {
    min-width: 105px;
    text-align: center;
    color: var(--couleur-texte-clair);
    font-size: 0.9rem;
    font-weight: 600;
}

/* Fiche joueur : mise en page 3 colonnes */
.joueur-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.joueur-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.joueur-photo-corps {
    width: 100% !important;
    max-width: 260px !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    object-fit: contain !important;
    border-radius: 12px !important;
    margin: 0 auto !important;
    display: block;
    box-shadow: var(--ombre-sm);
    background: var(--couleur-fond);
}

.joueur-photo-carte {
    width: 100%;
    max-width: 260px;
    aspect-ratio: 3 / 4;
    margin: 0 auto;
    perspective: 1100px;
}

.joueur-photo-carte-interieur {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.joueur-photo-carte-active {
    cursor: pointer;
}

.joueur-photo-carte-active .joueur-photo-carte-recto::after {
    content: "Le saviez-vous ?";
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    padding: 0.35rem 0.65rem;
    color: var(--couleur-primaire);
    background: rgba(255, 255, 255, 0.92);
    border-radius: 999px;
    box-shadow: var(--ombre-sm);
    font-size: 0.75rem;
    font-weight: 700;
}

.joueur-photo-carte-active:hover .joueur-photo-carte-face {
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

.joueur-photo-carte-active:focus-visible {
    outline: 3px solid var(--couleur-secondaire);
    outline-offset: 4px;
    border-radius: 12px;
}

.joueur-photo-carte-retournee .joueur-photo-carte-interieur {
    transform: rotateY(180deg);
}

.joueur-photo-carte-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-shadow: var(--ombre-sm);
    transition: box-shadow 0.2s ease;
}

.joueur-photo-carte-recto {
    transform: rotateY(0deg);
}

.joueur-photo-carte .joueur-photo-corps {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    box-shadow: none;
}

.joueur-photo-carte-verso {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.5rem;
    color: var(--blanc);
    background: linear-gradient(145deg, var(--couleur-primaire) 0%, #063d06 100%);
    border: 3px solid var(--couleur-secondaire);
    transform: rotateY(180deg);
}

.joueur-saviez-vous-titre {
    color: var(--couleur-secondaire);
    font-size: 1.35rem;
    font-weight: 800;
}

#joueur-saviez-vous {
    max-height: calc(100% - 5rem);
    margin: 0;
    overflow-y: auto;
    color: var(--blanc);
    line-height: 1.55;
    white-space: pre-line;
}

.joueur-saviez-vous-retour {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.72rem;
}

@media (prefers-reduced-motion: reduce) {
    .joueur-photo-carte-interieur {
        transition-duration: 0.01ms;
    }
}

.joueur-photo-placeholder-corps {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--couleur-accent);
    color: var(--couleur-primaire);
    font-size: 3rem;
    font-weight: 700;
}

.joueur-points-officiels {
    background: linear-gradient(135deg, var(--couleur-primaire) 0%, #064806 100%);
}

.joueur-points-officiels h3 {
    color: var(--blanc) !important;
    font-size: 3rem !important;
}

.joueur-points-officiels strong {
    color: var(--blanc);
}

.badge-titre {
    display: inline-block;
    background: var(--couleur-secondaire);
    color: var(--blanc);
    padding: 0.5rem 1.2rem;
    border-radius: 20px;
    font-weight: 600;
}

@media (max-width: 800px) {
    .joueur-layout {
        grid-template-columns: 1fr;
    }
    .joueur-col:first-child {
        order: -1;
    }
}

@media (max-width: 550px) {
    .joueur-navigation {
        gap: 0.4rem;
    }

    .joueur-navigation-lien {
        width: 42px;
        padding: 0.5rem;
    }

    .joueur-navigation-libelle {
        display: none;
    }

    .joueur-navigation-position {
        min-width: 72px;
        font-size: 0.8rem;
    }
}

/* Icônes de réseaux sociaux (footer, cartes sponsors) */
.social-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    vertical-align: middle;
}

.social-icon img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: inline-block;
}

/* Infos de contact / réseaux sur une carte sponsor */
.sponsor-contact {
    font-size: 0.9rem;
    color: var(--couleur-texte-clair);
    text-align: center;
    margin-top: 0.5rem;
}

.sponsor-contact div {
    margin-bottom: 0.2rem;
}

.sponsor-social {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

/* Encart "Information importante" (page d'accueil, alimenté par l'admin) */
.info-importante-box {
    background: linear-gradient(135deg, #fff8e6 0%, #ffedc2 100%);
    border: 2px solid #f0ad4e;
    border-left: 6px solid #f0ad4e;
    border-radius: 12px;
    padding: 1.75rem 2rem;
    box-shadow: var(--ombre-md);
}

.info-importante-title {
    color: #a15c00;
    margin-bottom: 1rem;
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
}

.info-importante-box p {
    margin-bottom: 0.75rem;
}

/* Image alignée à côté du texte, dans un cadre de taille fixe : garantit
   qu'elle ne déborde jamais et ne reste jamais minuscule, quelle que soit
   sa résolution d'origine — même principe que les cartes événement. */
.info-importante-inner {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}
.info-importante-texte {
    flex: 1;
    min-width: 0;
}
.info-importante-image-wrap {
    width: 150px;
    height: 150px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.5);
}
.info-importante-image-wrap img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    display: block;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
}
.info-importante-image-wrap img.lightbox-image {
    cursor: zoom-in;
    transition: var(--transition-rapide);
}
.info-importante-image-wrap img.lightbox-image:hover {
    filter: brightness(0.92);
}
@media (max-width: 550px) {
    .info-importante-inner {
        flex-direction: column;
    }
    .info-importante-image-wrap {
        width: 100%;
        height: 160px;
    }
}

/* Galerie photo de l'histoire du club : disposition en damier, centrée.
   Les photos restent visibles en entier (jamais rognées, jamais déformées)
   et sont cliquables pour s'afficher en grand via la lightbox. Les colonnes
   paires sont légèrement décalées verticalement pour l'effet "damier". */
.histoire-galerie {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem 1.5rem;
    margin-top: 2rem;
}
.histoire-photo {
    width: 220px;
    margin: 0;
    text-align: center;
}
.histoire-photo img {
    width: 100%;
    height: 220px;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    box-shadow: var(--ombre-sm);
    cursor: zoom-in;
    transition: var(--transition-rapide);
}
.histoire-photo img:hover {
    filter: brightness(0.92);
}
.histoire-photo figcaption {
    margin-top: 0.6rem;
    font-style: italic;
    font-size: 0.85rem;
    color: var(--couleur-texte-clair);
}
.histoire-galerie .histoire-photo:nth-child(even) {
    transform: translateY(1.5rem);
}
@media (max-width: 700px) {
    .histoire-galerie .histoire-photo:nth-child(even) {
        transform: none;
    }
    .histoire-photo {
        width: 45%;
    }
}
@media (max-width: 480px) {
    .histoire-photo {
        width: 100%;
    }
}

/* Liste des horaires (page d'accueil) */
.horaires-list p {
    margin-bottom: 0.6rem;
}

/* Planning visuel des horaires — une ligne par jour, créneaux colorés par public */
.horaires-graph {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.5rem 0 1rem;
}

.horaire-row {
    display: grid;
    grid-template-columns: 78px 1fr;
    align-items: center;
    gap: 0.6rem;
}

.horaire-jour-label {
    font-weight: 700;
    color: var(--couleur-primaire);
    font-size: 0.85rem;
}

.horaire-timeline {
    position: relative;
    height: 24px;
    background: var(--couleur-fond);
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

.horaire-row-axe {
}

.horaire-row-axe .horaire-timeline {
    height: 16px;
    background: none;
    border: none;
}

.horaire-tick {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-size: 0.62rem;
    color: var(--couleur-texte-clair);
    white-space: nowrap;
}

.horaire-gridline {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(0, 0, 0, 0.08);
}

/* La barre n'est plus qu'un repère visuel coloré de la durée/position d'un
   créneau, sans aucun texte à l'intérieur — jamais de troncature possible. */
.horaire-bloc-barre {
    position: absolute;
    top: 4px;
    bottom: 4px;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    min-width: 4px;
}

.horaire-jour-groupe {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f1f3f5;
}

.horaire-jour-groupe:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Détail texte de chaque créneau, toujours affiché en entier (liste qui
   passe à la ligne au besoin, jamais de chevauchement ni de troncature). */
.horaire-detail-liste {
    list-style: none;
    margin: 0.4rem 0 0 88px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    row-gap: 0.3rem;
    column-gap: 1.1rem;
}

.horaire-detail-liste li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--couleur-texte);
    white-space: nowrap;
}

.horaire-detail-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* Invite visuelle : le planning compact est cliquable pour l'agrandir */
.horaires-graph {
    cursor: pointer;
}

.horaires-graph .horaire-jour-groupe:hover .horaire-timeline {
    filter: brightness(0.97);
}

/* Pop-up "Horaires en grand" */
.horaires-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.horaires-modal.active {
    display: flex;
}

.horaires-modal-contenu {
    background: var(--blanc);
    border-radius: 12px;
    padding: 2rem;
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: var(--ombre-lg);
}

.horaires-modal-fermer {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--couleur-fond);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.1rem;
    cursor: pointer;
    color: var(--couleur-texte);
    transition: var(--transition-rapide);
}

.horaires-modal-fermer:hover {
    background: var(--couleur-accent);
}

/* Fenêtre pop-up de détail d'un événement (ouverte au clic sur une vignette
   dans la liste "3 derniers événements par type") */
.event-detail-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.event-detail-modal.active {
    display: flex;
}
.event-detail-modal-contenu {
    position: relative;
    background: white;
    border-radius: 16px;
    padding: 2rem;
    max-width: 640px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: var(--ombre-lg);
}
.event-detail-modal-fermer {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--couleur-fond);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.1rem;
    cursor: pointer;
    color: var(--couleur-texte);
    transition: var(--transition-rapide);
}
.event-detail-modal-fermer:hover {
    background: var(--couleur-accent);
}

/* Galerie de photos dans le détail d'un événement : vignettes cliquables
   pour agrandir (lightbox), avec navigation entre elles au clic. */
.event-detail-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1rem 0;
}
.event-detail-photos img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 8px;
    cursor: zoom-in;
    box-shadow: var(--ombre-sm);
    transition: var(--transition-rapide);
    margin-bottom: 0 !important;
}
.event-detail-photos img:hover {
    filter: brightness(0.92);
}

/* Lightbox image générique (information importante, événements...) */
.image-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.image-lightbox.active {
    display: flex;
}

.image-lightbox-contenu {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
}

.image-lightbox-contenu img {
    display: block;
    max-width: 90vw;
    max-height: 90vh;
    width: auto !important;
    height: auto !important;
    border-radius: 8px;
    box-shadow: var(--ombre-lg);
    margin-bottom: 0 !important;
}

.image-lightbox-fermer {
    position: absolute;
    top: -1.1rem;
    right: -1.1rem;
    background: var(--blanc);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.1rem;
    cursor: pointer;
    color: var(--couleur-texte);
    box-shadow: var(--ombre-lg);
    transition: var(--transition-rapide);
}

.image-lightbox-fermer:hover {
    background: var(--couleur-accent);
}

.image-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    color: var(--couleur-texte);
    box-shadow: var(--ombre-lg);
    transition: var(--transition-rapide);
    display: flex;
    align-items: center;
    justify-content: center;
}
.image-lightbox-nav:hover {
    background: var(--couleur-accent);
}
.image-lightbox-prec { left: -1.1rem; }
.image-lightbox-suiv { right: -1.1rem; }

.image-lightbox-compteur {
    position: absolute;
    bottom: -2.2rem;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.5);
    padding: 0.2rem 0.7rem;
    border-radius: 12px;
}

@media (max-width: 600px) {
    .image-lightbox-prec { left: 0.4rem; }
    .image-lightbox-suiv { right: 0.4rem; }
}

/* Version agrandie du planning, à l'intérieur du pop-up */
.horaires-graph-grand .horaires-graph {
    cursor: default;
}

.horaires-graph-grand .horaire-row {
    grid-template-columns: 130px 1fr;
    gap: 1.2rem;
}

.horaires-graph-grand .horaire-jour-label {
    font-size: 1.15rem;
}

.horaires-graph-grand .horaire-timeline {
    height: 34px;
}

.horaires-graph-grand .horaire-row-axe .horaire-timeline {
    height: 22px;
}

.horaires-graph-grand .horaire-tick {
    font-size: 0.85rem;
}

.horaires-graph-grand .horaire-bloc-barre {
    top: 6px;
    bottom: 6px;
    border-radius: 6px;
}

.horaires-graph-grand .horaire-detail-liste {
    margin-left: 145px;
    column-gap: 1.5rem;
}

.horaires-graph-grand .horaire-detail-liste li {
    font-size: 1rem;
}

.horaires-graph-grand .horaire-detail-dot {
    width: 11px;
    height: 11px;
}

.horaires-graph-grand .horaire-jour-groupe {
    padding-bottom: 1rem;
    margin-bottom: 0.5rem;
}

@media (max-width: 700px) {
    .horaires-graph-grand .horaire-row {
        grid-template-columns: 70px 1fr;
    }
    .horaires-graph-grand .horaire-detail-liste {
        margin-left: 82px;
    }
}

.horaires-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--couleur-texte-clair);
}

.horaire-legende-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.horaire-legende-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .horaire-row {
        grid-template-columns: 55px 1fr;
    }
    .horaire-jour-label {
        font-size: 0.75rem;
    }
    .horaire-detail-liste {
        margin-left: 63px;
    }
}
/* Icônes maison (remplacent les emojis), utilisées en ligne devant un texte
   (titres, listes, boutons...). Taille alignée sur le texte environnant. */
.icone-inline {
    height: 1.2em !important;
    width: auto !important;
    max-width: 1.2em !important;
    max-height: 1.2em !important;
    vertical-align: -0.25em;
    object-fit: contain !important;
    margin-right: 0.3rem !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    display: inline-block;
}