:root {
    --orange: #F39C12;
    --orange-vif: #FFA500;
    --orange-dark: #D35400;
    --vert: #27AE60;
    --vert-fonce: #1E8449;
    --bleu: #2980B9;
    --bleu-fonce: #1F618D;
    --noir: #2C3E50;
    --blanc: #FFFFFF;
    --gris-clair: #F4F6F9;
    --vert-clair: #E9F7EF;
    --bleu-clair: #EAF2F8;
    --orange-clair: #FEF5E7;
}

body {
    font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
    background-color: var(--gris-clair);
    padding-bottom: 70px; /* Pour la barre de navigation mobile */
}

/* Header dégradé orange */
.bg-orange-gradient {
    background: linear-gradient(135deg, #FFA500, #FF8C00);
}

/* Logo */
.brand-icon {
    color: white !important;
    font-size: 2rem;
}
.brand-text {
    color: white !important;
    font-size: 1.8rem;
    font-weight: 800;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.1);
    letter-spacing: 1px;
}

/* Ajustement taille logo sur mobile pour alignement avec burger */
@media (max-width: 991.98px) {
    .brand-icon {
        font-size: 1.6rem !important;
    }
    .brand-text {
        font-size: 1.4rem !important;
    }
}

.navbar-nav .nav-link {
    color: white !important;
    font-weight: 500;
    transition: 0.2s;
}
.navbar-nav .nav-link:hover {
    color: #ffdd99 !important;
    transform: scale(1.02);
}

/* Bouton hamburger personnalisé */
.custom-toggler {
    background: linear-gradient(145deg, #FF8C00, #E67E22);
    border: 2px solid rgba(255,255,255,0.5);
    border-radius: 8px;
    padding: 6px 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.custom-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.custom-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(255,255,255,0.3);
}

/* Titres colorés */
.text-orange { color: var(--orange) !important; }
.text-vert { color: var(--vert) !important; }
.text-bleu { color: var(--bleu) !important; }

/* Icônes */
h2 i, h3 i, h4 i {
    color: inherit;
}

/* Boutons */
.btn-orange {
    background-color: var(--orange);
    color: white;
    border: none;
    transition: 0.3s;
}
.btn-orange:hover {
    background-color: var(--orange-dark);
    transform: scale(1.02);
}
.btn-outline-orange {
    border: 2px solid var(--orange);
    color: var(--orange);
    background: transparent;
    transition: 0.3s;
}
.btn-outline-orange:hover {
    background-color: var(--orange);
    color: white;
    transform: scale(1.02);
}
.btn-outline-bleu {
    border: 2px solid var(--bleu);
    color: var(--bleu);
    background: transparent;
}
.btn-outline-bleu:hover {
    background-color: var(--bleu);
    color: white;
}
.btn-vert {
    background-color: var(--vert);
    color: white;
    border: none;
}
.btn-vert:hover {
    background-color: var(--vert-fonce);
    transform: scale(1.02);
}

/* Fonds de sections */
.bg-vert-clair { background-color: var(--vert-clair); }
.bg-bleu-clair { background-color: var(--bleu-clair); }
.bg-orange-clair { background-color: var(--orange-clair); }
.bg-gris-clair { background-color: var(--gris-clair); }
.bg-bleu-fonce { background-color: var(--bleu-fonce); }

/* Carrousel */
.carousel-item img {
    height: 70vh;
    object-fit: cover;
}
.carousel-caption {
    bottom: 20%;
    left: 5%;
    right: 5%;
    padding: 1rem !important;
}
/* Légende transparente avec ombre portée pour lisibilité */
.text-shadow {
    text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
}
.carousel-caption .btn {
    text-shadow: none;
}
@media (max-width: 768px) {
    .carousel-item img {
        height: 50vh;
    }
    .carousel-caption {
        bottom: 10%;
        left: 5%;
        right: 5%;
    }
    .carousel-caption h2 {
        font-size: 1.4rem;
    }
}

/* Cartes générales */
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 1rem;
    overflow: hidden;
}
.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 1.5rem 2.5rem rgba(0,0,0,0.15) !important;
}

/* Disciplines */
.discipline-card img {
    height: 200px;
    object-fit: cover;
}

/* Clubs */
.club-card {
    background: white;
    transition: all 0.3s;
}
.club-card:hover {
    transform: scale(1.02);
}
.bg-gradient-club {
    background: linear-gradient(145deg, var(--orange), var(--vert));
    color: white;
    padding: 1rem 0.5rem;
}

/* Événements */
.event-card {
    border-left: 6px solid var(--orange);
    background: white;
}
.event-tire {
    font-size: 1.2rem;
    border-left: 4px solid var(--orange);
    padding-left: 12px;
    margin-bottom: 1rem;
}

/* Infrastructures */
.infra-card img {
    height: 180px;
    object-fit: cover;
}

/* Galerie */
.galerie-img {
    transition: transform 0.3s;
    cursor: pointer;
    height: 150px;
    object-fit: cover;
    width: 100%;
}
.galerie-img:hover {
    transform: scale(1.05);
}

/* Interviews */
.interview-card {
    transition: all 0.3s;
}
.interview-card:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    background-color: #fff8e7;
}

/* Bas de page */
.transition-hover {
    transition: all 0.3s;
}
.transition-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* Séparateur */
.separator-orange {
    width: 80px;
    height: 4px;
    background-color: var(--orange);
    border-radius: 2px;
}

/* AOS */
[data-aos] {
    opacity: 0;
    transition-property: opacity, transform;
}
[data-aos].aos-animate {
    opacity: 1;
}

/* Menu déroulant mobile */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background: linear-gradient(135deg, #FFA500, #FF8C00);
        padding: 1rem;
        border-radius: 0 0 20px 20px;
        margin-top: 10px;
    }
    .navbar-nav .nav-link {
        padding: 10px 15px;
        border-bottom: 1px solid rgba(255,255,255,0.2);
    }
    .dropdown-menu {
        background-color: rgba(255,255,255,0.95);
        border: none;
    }
}

/* Barre de navigation inférieure (style application mobile) */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 65px;
    background: white;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 1000;
    border-top: 1px solid #eee;
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #6c757d;
    text-decoration: none;
    font-size: 0.75rem;
    transition: color 0.2s;
    padding: 8px 0;
    flex: 1;
}

.bottom-nav-item i {
    font-size: 1.4rem;
    margin-bottom: 4px;
}

.bottom-nav-item.active {
    color: var(--orange);
    font-weight: 600;
}

.bottom-nav-item:hover {
    color: var(--orange-dark);
}

/* Ajustement pour que le contenu ne soit pas caché derrière la bottom nav */
@media (max-width: 991.98px) {
    body {
        padding-bottom: 70px;
    }
    /* Footer masqué sur mobile, donc pas besoin de marge supplémentaire */
}