/**
 * RESPONSIVE GLOBAL - Génération Phoenix
 * Styles responsives pour tous les éléments du site
 * Optimisé pour mobile, tablette et desktop
 */

/* ========================================
   BASE - PRÉVENTION DÉBORDEMENTS
   ======================================== */

* {
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

/* ========================================
   IMAGES RESPONSIVES
   ======================================== */

img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Images dans les cartes */
.card img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Images de fond responsives */
@media (max-width: 768px) {
    .bg-image {
        background-size: cover !important;
        background-position: center !important;
    }
}

/* ========================================
   TABLEAUX RESPONSIVES
   ======================================== */

table {
    width: 100%;
    border-collapse: collapse;
}

@media (max-width: 768px) {
    /* Rendre les tableaux scrollables horizontalement */
    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    table {
        min-width: 600px;
    }
    
    /* Tableaux en mode carte sur mobile */
    .table-mobile-card {
        display: block;
    }
    
    .table-mobile-card thead {
        display: none;
    }
    
    .table-mobile-card tbody,
    .table-mobile-card tr,
    .table-mobile-card td {
        display: block;
        width: 100%;
    }
    
    .table-mobile-card tr {
        margin-bottom: 1rem;
        border: 1px solid #dee2e6;
        border-radius: 0.5rem;
        padding: 1rem;
    }
    
    .table-mobile-card td {
        border: none;
        padding: 0.5rem 0;
        text-align: left !important;
    }
    
    .table-mobile-card td:before {
        content: attr(data-label) ": ";
        font-weight: bold;
        display: inline-block;
        min-width: 100px;
    }
}

/* ========================================
   FORMULAIRES RESPONSIVES
   ======================================== */

form {
    width: 100%;
}

.form-control,
.form-select,
textarea {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 576px) {
    .form-control,
    .form-select,
    textarea {
        font-size: 16px; /* Évite le zoom sur iOS */
    }
    
    /* Labels empilés sur mobile */
    .form-label {
        display: block;
        margin-bottom: 0.5rem;
    }
    
    /* Boutons de formulaire pleine largeur */
    .form-actions .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

/* Groupes de formulaires */
.form-group {
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
    }
    
    .form-row .col,
    .form-row [class*="col-"] {
        width: 100%;
        margin-bottom: 1rem;
    }
}

/* ========================================
   CARTES (CARDS) RESPONSIVES
   ======================================== */

.card {
    width: 100%;
    margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
    .card {
        margin-bottom: 1rem;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    .card-title {
        font-size: 1.25rem;
    }
    
    .card-text {
        font-size: 0.9rem;
    }
}

/* Grilles de cartes */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

@media (max-width: 992px) {
    .card-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 1rem;
    }
}

@media (max-width: 768px) {
    .card-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

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

.btn {
    white-space: normal;
    word-wrap: break-word;
}

@media (max-width: 576px) {
    .btn {
        width: 100%;
        margin-bottom: 0.5rem;
        padding: 0.75rem 1rem;
        font-size: 1rem;
    }
    
    .btn-group {
        flex-direction: column;
        width: 100%;
    }
    
    .btn-group .btn {
        width: 100%;
        border-radius: 0.375rem !important;
        margin-bottom: 0.5rem;
    }
}

/* ========================================
   TYPOGRAPHIE RESPONSIVE
   ======================================== */

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.75rem;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.25rem;
}

h6 {
    font-size: 1rem;
}

@media (max-width: 992px) {
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.75rem;
    }
    
    h3 {
        font-size: 1.5rem;
    }
    
    h4 {
        font-size: 1.25rem;
    }
}

@media (max-width: 768px) {
    h1 {
        font-size: 1.75rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    h3 {
        font-size: 1.25rem;
    }
    
    h4 {
        font-size: 1.1rem;
    }
    
    p {
        font-size: 0.95rem;
    }
}

@media (max-width: 576px) {
    h1 {
        font-size: 1.5rem;
    }
    
    h2 {
        font-size: 1.25rem;
    }
    
    h3 {
        font-size: 1.1rem;
    }
    
    p {
        font-size: 0.9rem;
        line-height: 1.6;
    }
}

/* ========================================
   CONTAINERS ET SECTIONS
   ======================================== */

.container,
.container-fluid {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

@media (max-width: 576px) {
    .container,
    .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .section {
        padding: 2rem 0;
    }
    
    .py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    .py-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
}

/* ========================================
   NAVIGATION ET MENUS
   ======================================== */

/* Desktop - S'assurer que la navbar ne cache pas les éléments */
@media (min-width: 992px) {
    .navbar {
        overflow: visible !important;
        width: 100% !important;
    }
    
    .navbar-collapse {
        overflow: visible !important;
        width: 100% !important;
        display: flex !important;
        flex-wrap: nowrap !important;
    }
    
    .navbar .d-flex {
        overflow: visible !important;
        flex-shrink: 0 !important;
    }
    
    /* S'assurer que tous les éléments du header sont visibles */
    .navbar .btn,
    .navbar .dropdown {
        visibility: visible !important;
        opacity: 1 !important;
        display: inline-block !important;
        flex-shrink: 0 !important;
    }
    
    /* FORCER la visibilité du bouton de langue */
    .navbar .dropdown.ms-3,
    #langDropdown {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-shrink: 0 !important;
        position: relative !important;
        z-index: 1000 !important;
    }
    
    /* Conteneur des boutons - ne jamais couper */
    .navbar .d-flex.align-items-center.flex-nowrap {
        overflow: visible !important;
        max-width: none !important;
        width: auto !important;
        flex-shrink: 0 !important;
        padding-right: 0 !important;
        margin-right: 0 !important;
    }
    
    /* S'assurer que le navbar a assez d'espace pour tous les boutons */
    .navbar {
        padding-right: 1.5rem !important;
    }
    
    /* Le bouton de langue doit toujours être complètement visible */
    .navbar .dropdown.ms-3:last-child {
        margin-right: 0 !important;
        padding-right: 0 !important;
    }
    
    #langDropdown {
        width: auto !important;
        max-width: none !important;
        min-width: 90px !important;
    }
}

@media (max-width: 991px) {
    .navbar-nav {
        text-align: center;
    }
    
    .nav-item {
        margin: 0.25rem 0;
    }
    
    .dropdown-menu {
        position: static !important;
        transform: none !important;
        width: 100%;
        text-align: center;
    }
}

/* ========================================
   CAROUSELS ET SLIDERS
   ======================================== */

.carousel,
.owl-carousel {
    width: 100%;
    overflow: hidden;
}

.carousel-item img,
.owl-carousel .item img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

@media (max-width: 768px) {
    .carousel-caption {
        padding: 1rem;
        font-size: 0.9rem;
    }
    
    .carousel-caption h3 {
        font-size: 1.25rem;
    }
    
    .carousel-caption p {
        font-size: 0.85rem;
    }
}

/* ========================================
   MODALES RESPONSIVES
   ======================================== */

.modal-dialog {
    margin: 1rem;
    max-width: 100%;
}

/* Modales Sentinelles - dimensions originales */
#loginModal .modal-dialog {
    max-width: 500px !important;
}

/* Modale d'inscription - taille réduite (700px) */
#inscriptionModal .modal-dialog.modal-lg,
#inscriptionModal.modal .modal-dialog.modal-lg,
#inscriptionModal .modal-dialog {
    max-width: 700px !important;
}

/* Limiter la hauteur pour éviter le masquage */
#inscriptionModal .modal-content {
    max-height: 90vh !important;
    overflow-y: auto !important;
}

/* Centrer les modales horizontalement et verticalement sur grands écrans */
@media (min-width: 992px) {
    #loginModal .modal-dialog.modal-dialog-centered,
    #inscriptionModal .modal-dialog.modal-dialog-centered {
        margin-left: auto !important;
        margin-right: auto !important;
        transform: translate(0, -50%) !important;
        top: 50% !important;
    }
    
    /* S'assurer que les modales sont centrées */
    #loginModal .modal-dialog,
    #inscriptionModal .modal-dialog {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media (max-width: 576px) {
    .modal-dialog {
        margin: 0.5rem;
    }
    
    .modal-content {
        border-radius: 0.5rem;
    }
    
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 1rem;
    }
    
    /* Sur mobile, les modales Sentinelles prennent toute la largeur */
    #loginModal .modal-dialog,
    #inscriptionModal .modal-dialog {
        max-width: 100%;
    }
}

/* ========================================
   GRID SYSTEM RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    /* Forcer les colonnes en pleine largeur sur mobile */
    .row > [class*="col-"] {
        width: 100%;
        margin-bottom: 1rem;
    }
    
    /* Espacement réduit entre les colonnes */
    .row {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }
    
    .row > [class*="col-"] {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* ========================================
   HERO SECTIONS
   ======================================== */

.hero-section {
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .hero-section {
        min-height: 300px;
        padding: 2rem 1rem;
    }
    
    .hero-title {
        font-size: 1.75rem !important;
    }
    
    .hero-subtitle {
        font-size: 1rem !important;
    }
}

/* ========================================
   FOOTER RESPONSIVE
   ======================================== */

footer {
    width: 100%;
}

@media (max-width: 768px) {
    footer .row {
        text-align: center;
    }
    
    footer .col-md-3,
    footer .col-md-4 {
        margin-bottom: 2rem;
    }
    
    footer h5 {
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }
    
    footer ul {
        padding-left: 0;
        list-style: none;
    }
}

/* ========================================
   UTILITAIRES RESPONSIVES
   ======================================== */

/* Masquer sur mobile */
@media (max-width: 576px) {
    .d-mobile-none {
        display: none !important;
    }
}

/* Masquer sur tablette */
@media (max-width: 991px) and (min-width: 577px) {
    .d-tablet-none {
        display: none !important;
    }
}

/* Masquer sur desktop */
@media (min-width: 992px) {
    .d-desktop-none {
        display: none !important;
    }
}

/* Afficher uniquement sur mobile */
.d-mobile-only {
    display: none !important;
}

@media (max-width: 576px) {
    .d-mobile-only {
        display: block !important;
    }
}

/* ========================================
   ESPACEMENTS RESPONSIVES
   ======================================== */

@media (max-width: 768px) {
    .mb-mobile-3 {
        margin-bottom: 1rem !important;
    }
    
    .mt-mobile-3 {
        margin-top: 1rem !important;
    }
    
    .px-mobile-2 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}

/* ========================================
   FIXES SPÉCIFIQUES
   ======================================== */

/* Éviter le zoom sur iOS lors de la saisie */
@media (max-width: 576px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* Améliorer le scroll sur mobile */
@media (max-width: 768px) {
    body {
        -webkit-overflow-scrolling: touch;
    }
}

/* Fix pour les iframes (YouTube, etc.) */
iframe {
    max-width: 100%;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

@media (max-width: 768px) {
    iframe {
        height: 250px;
    }
}

/* ========================================
   BOUTON BACK TO TOP RESPONSIVE
   ======================================== */

/* Sur petits écrans, positionner le bouton à droite pour ne pas bloquer le contenu */
@media (max-width: 768px) {
    .back-to-top {
        right: 15px !important;
        bottom: 15px !important;
        left: auto !important;
        transform: none !important;
        margin: 0 !important;
    }
}

/* Sur très petits écrans, réduire encore la taille et l'espacement */
@media (max-width: 576px) {
    .back-to-top {
        right: 10px !important;
        bottom: 10px !important;
        width: 48px !important;
        height: 48px !important;
    }
    
    .back-to-top i {
        font-size: 1rem !important;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .navbar,
    .topbar,
    footer,
    .btn,
    .no-print {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.5;
    }
    
    h1, h2, h3 {
        page-break-after: avoid;
    }
}