/* 
==========================
SOMMAIRE
1. Navigation et sélecteur de langue
2. Bannière de statut
3. Liens de navigation
4. Pagination
5. Filtres
6. Icônes de réseaux sociaux
7. Pages statiques spécifiques
8. éléments communs
==========================
*/

/*
===========================================
  1. Navigation et sélecteur de langue
===========================================
*/
.language-selector {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.language-icon {
    width: 30px;
    margin: 0 5px;
    padding-bottom: 5px;
    border-bottom: 3px solid transparent;
}

.language-icon.active {
    border-bottom-color: #007bff;
}

.language-link {
    text-decoration: none;
}

header.header.mb-4 {
    margin-bottom: 0 !important;
}

header.header .row {
    min-height: 50px;
}

@media (max-width: 767px) {
    header.header .row {
        min-height: auto;
        height: auto;
    }
}

.navbar.mb-4 {
    margin-top: 0 !important;
}

/*
===========================================
  2. Bannière de statut
===========================================
*/
.status-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #e9ecef;
    padding: 15px;
    font-size: 14px;
    border-radius: 5px;
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    white-space: nowrap; 
}

.status-text {
    display: flex;
    flex-wrap: wrap;
}

.status-text a {
    margin-left: 5px; 
}

.status-banner button {
    margin-left: 20px; 
    padding: 10px 20px;
}

/*
===========================================
  3. Liens de navigation
===========================================
*/
.navbar {
    height: 80px;
}

.navbar-brand-mine img {
    height: 157px;
    position: absolute;
    top: 0;
    overflow: visible;
}

.nav-link {
    font-size: 18px;
    margin-right: 15px;
}

/* Limite la largeur du contenu central */
.container-content {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* Full width background sections */
.full-width-section {
    width: 100%;
    background-color: #f8f9fa; /* Adjust the background color as needed */
    padding-left: 0;
    padding-right: 0;
}

/*
===========================================
  4. Pagination
===========================================
*/
.form-select-sm {
    width: auto;
    min-width: 100px;
}

@media (max-width: 768px) {
    .d-flex.justify-content-end {
        flex-direction: column;
        align-items: stretch !important;
    }
    .d-flex.justify-content-end > div {
        margin-bottom: 10px;
    }
    .form-select-sm {
        width: 100%;
    }
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.pagination .page-item {
    margin: 0 3px;
}

.pagination .page-link {
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #dee2e6;
    color: #007bff;
    background-color: #fff;
    transition: all 0.3s ease;
}

.pagination .page-item.active .page-link {
    background-color: #007bff;
    border-color: #007bff;
    color: white;
    box-shadow: 0 2px 5px rgba(0,123,255,0.5);
}

.pagination .page-item:not(.active) .page-link:hover {
    background-color: #f8f9fa;
    border-color: #007bff;
}

.pagination .page-item.disabled .page-link {
    color: #6c757d;
    pointer-events: none;
    background-color: #fff;
    border-color: #dee2e6;
}

.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
    font-size: 1.2rem;
    padding: 0.4rem 0.75rem;
}

.pagination .page-item.first-last .page-link {
    border-radius: 1rem;
    padding: 0.3rem 0.6rem;
    font-weight: bold;
    background-color: #f0f0f0;
}

/*
===========================================
  5. Filtres
===========================================
*/
.form-check-label {
    margin-bottom: 0.5rem;
}

.form-check-input:checked + .form-check-label {
    font-weight: bold;
}

/* Styliser les sessions avec des couleurs */
#session1 + .form-check-label {
    color: #17a2b8;
}

#session2 + .form-check-label {
    color: #dc3545;
}

#session3 + .form-check-label {
    color: #ffc107;
}

.bg-cyan {
    background-color: #0ab0b2;
    color: #fff;
}

.bg-pink {
    background-color: #E85880;
    color: #fff;
}

.bg-orange {
    background-color: #E89944;
    color: #fff;
}

/*
===========================================
  6. Icônes de réseaux sociaux
===========================================
*/
.social-icons {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.social-icon-img {
    width: 32px;
    height: auto;
    transition: transform 0.3s ease;
}

.social-icon-img:hover {
    transform: scale(1.1);
}


.social-icons {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.social-icon {
    font-size: 1.8rem;
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
    padding: 5px;
    border-radius: 50%;
    background-color: #f0f0f0;
}

.social-icon:hover {
    color: #007bff;
    background-color: #e9ecef;
}

.fa-heart {
    font-size: 2rem;
    color: #dc3545;
    transition: transform 0.3s ease;
    margin-left: 10px;
}

.fa-heart:hover {
    transform: scale(1.1);
}

/*
===========================================
  7. Pages statiques spécifiques 
===========================================
*/
/* PAGE ACCUEIL */
/* Section principale */
.youtube-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.container-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px;
}

/* Vidéo pleine largeur */
.full-width-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

/* Contenu en superposition */
.content-overlay {
    position: relative;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 20px;
    margin: 100px 0 100px 0;
}

/* Zone d'actualités */
.news-carousel {
    overflow-x: hidden;
    overflow-y: visible;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    scroll-behavior: smooth;
    display: flex;
    gap: 15px;
}

.news-carousel::-webkit-scrollbar {
    display: none;
}

.news-item {
    display: inline-block;
    min-width: 280px;
    max-width: 280px;
    flex-shrink: 0;
    vertical-align: top;
    white-space: normal;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.news-item h3 {
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.news-item p {
    font-size: 0.9rem;
    line-height: 1.4;
}

.news-action {
    margin-top: 10px;
}

/* Indicateurs de carrousel */
.carousel-indicators {
    position: static;
    margin-top: 10px;
}

.carousel-indicators button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #333;
    opacity: 0.5;
}

.carousel-indicators button.active {
    opacity: 1;
}

/* Trois blocs */
.three-blocks {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
}

.block {
    flex: 1;
    margin: 0 10px;
    padding: 20px;
    border-radius: 10px;
    position: relative;
    color: white;
}

.block::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: -10px;
    bottom: -10px;
    background: inherit;
    opacity: 0.5;
    z-index: -1;
    border-radius: inherit;
}

.block::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    right: -20px;
    bottom: -20px;
    background: inherit;
    opacity: 0.2;
    z-index: -2;
    border-radius: inherit;
}

/*
===========================================
  8. Eléments communs 
===========================================
*/
/* PAGE FOOTER et BOUTON BACK TO TOP */

/* Bouton Retour en Haut */
#back-to-top {
    position: fixed;
    bottom: 100px;
    right: 20px;
    display: none;
    border-radius: 10%;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    cursor: pointer;
    transition: background-color 0.3s;
}

#back-to-top:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Responsive */
@media (max-width: 768px) {
    .full-width-video {
        display: none;
    }

    .three-blocks {
        flex-direction: column;
    }

    .block {
        margin-bottom: 20px;
    }

    .news-carousel {
        overflow-x: scroll;
    }
}




/* Montrer le bouton Retour en Haut */
.show {
    display: block !important;
}



/* Footer styles */
.footer {
    background-color: #1686B6; /* couleur du footer */
}

.footer-top,
.footer-bottom,
.footer-copyright {
    background-color: #1686B6; /* Appliquer la même couleur aux trois sections */
}

.footer h5 {
    color: white;
}

.footer p, .footer a {
    color: white;
}

.footer a:hover {
    color: #007bff;
    text-decoration: none;
}

/* Logos des partenaires */
.footer img {
    max-width: 100%;
    height: auto;
}

/* Social media icons */
.social-icons {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.social-icon {
    font-size: 1.8rem;
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

.social-icon:hover {
    color: #007bff;
}

.elegant-shape-divider-wrap {
    width: 100%;
    height: 150px;
    position: relative;
    z-index: 2;
}

.elegant-shape-divider {
    width: 100%;
    height: inherit;
    animation: breathe 4s ease-in-out infinite;
}

@keyframes breathe {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/*
===========================================
  9. Overrides Bootstrap
===========================================
*/

/* Ajustement du margin-top pour éviter le chevauchement avec le logo et margin-bottom pour l'espacement du footer */
.mt-5 {
    margin-top: 4rem !important;
    margin-bottom: 2rem !important;
}


/* ==== Pricing Grid (Metro/Bento Style) ==== */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 30px auto;
    max-width: 1100px;
    padding: 0 20px;
}

/* Layout masonry pour effet tiles imbriqué */
.pricing-grid.masonry-layout {
    grid-auto-rows: auto;
    grid-auto-flow: dense;
}

.pricing-box {
    padding: 25px;
    border-radius: 8px;
    color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    position: relative;
}

.pricing-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.pricing-box h4 {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 15px;
    color: #fff;
}

.pricing-price {
    /* Bande gris foncé qui traverse toute la box */
    margin: 15px -25px;
    padding: 15px 25px;
    background-color: rgba(0, 0, 0, 0.4);
    border-top: 2px solid rgba(255, 255, 255, 0.2);
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

.price-line {
    font-size: 2rem;
    font-weight: bold;
    line-height: 1.2;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.price-line-small {
    font-size: 1.1rem;
    font-weight: normal;
    opacity: 0.9;
    margin-top: 5px;
}

.pricing-box p {
    flex-grow: 1;
    margin: 15px 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

.pricing-box .btn {
    align-self: flex-start;
    margin-top: auto;
}

@media (max-width: 992px) {
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 800px;
    }
}

@media (max-width: 768px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        padding: 0 15px;
    }

    .pricing-box {
        min-height: auto;
    }

    .price-line {
        font-size: 1.5rem;
    }

    .pricing-price {
        margin: 15px -15px;
        padding: 15px 15px;
    }
}

/*
===========================================
  12. Améliorations Responsive Globales
===========================================
*/

/* Logo navbar responsive */
@media (max-width: 991px) {
    .navbar {
        height: auto;
        min-height: 60px;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .navbar-brand-mine img {
        height: 70px;
        position: relative;
        top: auto;
    }

    .nav-link {
        font-size: 16px;
        margin-right: 10px;
    }
}

@media (max-width: 575px) {
    .navbar-brand-mine img {
        height: 50px;
    }

    .nav-link {
        font-size: 14px;
        margin-right: 5px;
    }
}

/* Bouton retour en haut responsive */
@media (max-width: 768px) {
    #back-to-top {
        right: 15px;
        bottom: 15px;
        width: 45px;
        height: 45px;
        font-size: 0.9rem;
    }

    #back-to-top h1 {
        font-size: 1.2rem;
        margin: 0;
    }
}

/* Cards masterclass responsive */
@media (max-width: 991px) {
    .col-md-4.mb-4 .card {
        margin-bottom: 1rem;
    }

    .card-img-top {
        max-height: 200px;
        object-fit: cover;
    }
}

@media (max-width: 575px) {
    .card-img-top {
        max-height: 180px;
    }

    .card-body {
        padding: 1rem;
    }

    .card-title {
        font-size: 1.1rem;
    }
}

/* Header langue responsive */
@media (max-width: 575px) {
    .language-selector img,
    .language-selector .flag-icon {
        width: 20px;
        height: auto;
    }

    .language-selector a {
        padding: 2px;
    }
}

/* Formulaires responsive */
@media (max-width: 768px) {
    .form-control,
    .form-select {
        font-size: 16px; /* Évite le zoom iOS sur focus */
    }
}

/* Tableaux admin responsive */
@media (max-width: 768px) {
    .table td,
    .table th {
        padding: 0.5rem;
        font-size: 0.875rem;
    }

    .btn-sm {
        padding: 0.2rem 0.4rem;
        font-size: 0.75rem;
    }
}

/* Sidebar filtres mobile */
@media (max-width: 767px) {
    #filterCollapse {
        background-color: #f8f9fa;
        padding: 1rem;
        border-radius: 0.5rem;
        margin-bottom: 1rem;
    }
}

/*
===========================================
  13. Header responsive
===========================================
*/
/* Desktop : drapeaux toujours alignés, texte s'adapte */
.header .container-content {
    padding: 0.5rem 15px;
}

.header-title {
    font-size: 1rem;
    line-height: 1.3;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-flags-col {
    flex-shrink: 0;
}

.language-selector {
    gap: 2px;
}

.language-selector a {
    display: inline-flex;
    padding: 2px;
}

.language-icon {
    width: 26px;
    height: auto;
    transition: transform 0.2s;
}

.language-icon:hover {
    transform: scale(1.1);
}

/* Mobile : layout en colonne */
@media (max-width: 767px) {
    .header .row {
        flex-direction: column;
    }

    .header-text-col {
        width: 100%;
        text-align: center;
        margin-bottom: 0.5rem;
    }

    .header-title {
        font-size: 0.85rem;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }

    .header-flags-col {
        width: 100%;
    }

    .language-selector {
        justify-content: center;
        flex-wrap: wrap;
        gap: 4px;
    }

    .language-icon {
        width: 22px;
    }
}

/*
===========================================
  14. Onglets en lecture linéaire sur mobile
===========================================
*/
/* Sur mobile : masquer les onglets et afficher tout le contenu */
@media (max-width: 767px) {
    /* Masquer la barre d'onglets */
    .nav-tabs.mobile-linear {
        display: none !important;
    }

    /* Afficher tous les contenus d'onglets */
    .tab-content.mobile-linear .tab-pane {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        margin-bottom: 2rem;
        padding-bottom: 2rem;
        border-bottom: 2px solid #dee2e6;
    }

    .tab-content.mobile-linear .tab-pane:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    /* Style des titres de section (remplace les onglets) */
    .mobile-section-title {
        display: block !important;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 1rem 1.5rem;
        margin: 0 -15px 1.5rem -15px;
        font-size: 1.2rem;
        font-weight: 600;
        border-radius: 0;
    }

    .mobile-section-title i {
        margin-right: 0.5rem;
    }
}

/* Sur desktop : masquer les titres de section mobile */
@media (min-width: 768px) {
    .mobile-section-title {
        display: none !important;
    }
}

/*
===========================================
  15. Menu dropdown avec lien et flèche séparés
===========================================
*/
.dropdown-hover .d-flex {
    position: relative;
}

.dropdown-hover .dropdown-toggle-split {
    padding-left: 0.25rem !important;
    padding-right: 0.5rem !important;
}

.dropdown-hover .dropdown-toggle-split::after {
    margin-left: 0;
}

.dropdown-hover .dropdown-menu {
    left: 0;
}

@media (max-width: 991px) {
    .dropdown-hover .d-flex {
        flex-wrap: wrap;
    }

    .dropdown-hover .dropdown-menu {
        position: static !important;
        width: 100%;
        margin-top: 0;
        border: none;
        background-color: #f8f9fa;
    }
}