/* RESPONSIVE.CSS - Corrigé pour Cyrillink (06/10/2025)
   Responsive design pour résolutions inférieures à 1440p (1080p, 720p, smartphones en portrait/paysage)
   Tailles fixes en px pour images de index.html, espace réduit entre h1 et images, et entre images et logo de déconnexion
   Ne s'applique pas pour 1440p ou supérieur (max-width: 1439px) */

   @media screen and (max-width: 1439px) {
    /* Ajustements généraux pour écrans jusqu'à 1080p */
    .header-container {
        margin: 20px 10px; /* Réduit de 40px 20px */
    }

    .main-title {
        font-size: 3em; /* Réduit de 4em */
    }

    .sub-title {
        font-size: 1em; /* Réduit de 1.2em */
        margin: 8px 0 15px;
    }

    .menu-links {
        gap: 40px; /* Réduit de 70px */
        margin-top: 40px; /* Réduit de 120px à 40px pour rapprocher les images du h1 */
    }

    .menu-item {
        font-size: 1.2em; /* Réduit de 1.5em */
    }

    /* Spécificité renforcée pour images */
    div.menu-links .menu-item img {
        max-width: 400px !important; /* 400px pour 1080p */
        width: 100% !important; /* Assure l'adaptation */
        height: auto !important; /* Maintient le ratio */
        border-width: 2px; /* Réduit de 3px */
        border-radius: 10px; /* Réduit de 12px */
    }

    .logout-footer {
        margin: 40px auto; /* Réduit de 120px à 40px pour rapprocher le logo des images */
    }

    .logout-icon img {
        width: 200px !important; /* 200px pour 1080p */
        height: auto !important;
    }

    .contracts-table {
        width: 90%; /* Augmente de 80% */
        margin: 20px auto; /* Réduit de 30px */
        font-size: 1.2em; /* Réduit de 1.5em */
        border-width: 2px; /* Réduit de 3px */
        border-radius: 10px; /* Réduit de 12px */
    }

    .contracts-table th, .contracts-table td {
        padding: 10px; /* Réduit de 14px */
        width: 120px; /* Réduit de 140px */
    }

    .contracts-table th {
        font-size: 1em; /* Réduit de 1.2em */
        height: 50px; /* Réduit de 70px */
        border-bottom: 2px solid #FFD700; /* Réduit de 3px */
    }

    .status {
        width: 35px; /* Réduit de 45px */
        height: 20px; /* Réduit de 28px */
        border-radius: 4px; /* Réduit de 6px */
        border-width: 1px; /* Réduit de 2px */
    }

    .sms-gauge {
        right: 10px; /* Réduit de 20px */
    }

    .sms-gauge .gauge {
        width: 50px; /* Réduit de 60px */
        height: 120px; /* Réduit de 150px */
        border-radius: 6px; /* Réduit de 8px */
        border-width: 1px; /* Réduit de 2px */
    }

    .gauge-label {
        font-size: 0.8em; /* Réduit de 1em implicite */
    }

    .gauge-text {
        font-size: 0.7em; /* Réduit de 0.9em */
    }
}

/* Media query spécifique pour 1080p avec zoom 125% (résolution effective ~1536px) */
@media screen and (max-width: 1536px) and (min-width: 1081px) {
    .menu-links {
        margin-top: 40px; /* Réduit de 120px à 40px pour 1080p avec zoom 125% */
    }

    div.menu-links .menu-item img {
        max-width: 400px !important; /* 400px pour 1080p avec zoom 125% */
        width: 100% !important;
        height: auto !important;
    }

    .logout-footer {
        margin: 40px auto; /* Réduit de 120px à 40px pour 1080p avec zoom 125% */
    }

    .logout-icon img {
        width: 200px !important; /* 200px pour 1080p */
        height: auto !important;
    }
}

@media screen and (max-width: 1080px) {
    /* Ajustements pour écrans jusqu'à 720p */
    .main-title {
        font-size: 2.5em; /* Réduit de 3em */
    }

    .menu-links {
        gap: 30px; /* Réduit de 40px */
        margin-top: 30px; /* Réduit de 60px à 30px */
    }

    .menu-item {
        font-size: 1em; /* Réduit de 1.2em */
    }

    div.menu-links .menu-item img {
        max-width: 280px !important; /* Réduit de 400px à 280px pour 720p */
        width: 100% !important;
        height: auto !important;
    }

    .logout-footer {
        margin: 30px auto; /* Réduit de 80px à 30px */
    }

    .logout-icon img {
        width: 150px !important; /* Réduit de 200px */
        height: auto !important;
    }

    .contracts-table {
        width: 95%; /* Augmente de 90% */
        font-size: 1em; /* Réduit de 1.2em */
    }

    .contracts-table th, .contracts-table td {
        padding: 8px; /* Réduit de 10px */
        width: 100px; /* Réduit de 120px */
    }

    .contracts-table th {
        font-size: 0.9em; /* Réduit de 1em */
        height: 40px; /* Réduit de 50px */
    }

    .status {
        width: 30px; /* Réduit de 35px */
        height: 18px; /* Réduit de 20px */
    }

    .sms-gauge .gauge {
        width: 40px; /* Réduit de 50px */
        height: 100px; /* Réduit de 120px */
    }
}

@media screen and (max-width: 896px) {
    /* Ajustements pour smartphones en paysage (ex: 896px pour iPhone 12 Pro) */
    .header-container {
        flex-direction: column; /* Empile les éléments */
        align-items: center;
        margin: 15px 5px; /* Réduit de 20px 10px */
    }

    .main-title {
        font-size: 2em; /* Réduit de 2.5em */
    }

    .sms-gauge {
        position: static; /* Retire positionnement absolu */
        transform: none; /* Annule centrage vertical */
        margin: 10px auto; /* Centre avec marge */
    }

    .menu-links {
        flex-direction: row; /* Reste en ligne pour paysage */
        gap: 20px; /* Réduit de 30px */
        margin-top: 20px; /* Réduit de 40px à 20px */
        flex-wrap: wrap; /* Permet retour à la ligne */
        justify-content: center;
    }

    .menu-item {
        font-size: 0.9em; /* Réduit de 1em */
    }

    div.menu-links .menu-item img {
        max-width: 180px !important; /* Réduit à 180px pour paysage */
        width: 100% !important;
        height: auto !important;
    }

    .logout-footer {
        margin: 20px auto; /* Réduit de 50px à 20px */
    }

    .logout-icon img {
        width: 120px !important; /* Réduit de 150px */
        height: auto !important;
    }

    .contracts-table {
        width: 98%; /* Maximise l'espace */
        font-size: 0.9em; /* Réduit de 1em */
        table-layout: auto; /* Adapte le tableau */
    }

    .contracts-table th, .contracts-table td {
        padding: 6px; /* Réduit de 8px */
        width: auto; /* Supprime largeur fixe */
        font-size: 0.8em; /* Ajustement lisibilité */
    }

    .contracts-table th {
        font-size: 0.8em; /* Réduit de 0.9em */
        height: auto; /* Supprime hauteur fixe */
    }

    .status {
        width: 25px; /* Réduit de 30px */
        height: 15px; /* Réduit de 18px */
    }

    .sms-gauge .gauge {
        width: 35px; /* Réduit de 40px */
        height: 80px; /* Réduit de 100px */
    }

    .gauge-label {
        font-size: 0.7em; /* Réduit de 0.8em */
    }

    .gauge-text {
        font-size: 0.6em; /* Réduit de 0.7em */
    }
}

@media screen and (max-width: 768px) {
    /* Ajustements pour smartphones en portrait */
    .menu-links {
        flex-direction: column; /* Empile les éléments */
        gap: 20px; /* Réduit de 30px */
        margin-top: 20px; /* Réduit de 40px à 20px */
        align-items: center;
    }

    div.menu-links .menu-item img {
        max-width: 280px !important; /* Réduit à 280px pour portrait */
        width: 100% !important;
        height: auto !important;
    }

    .logout-footer {
        margin: 20px auto; /* Réduit de 50px à 20px */
    }

    .logout-icon img {
        width: 150px !important; /* Réduit de 200px */
        height: auto !important;
    }
}

@media screen and (max-width: 480px) {
    /* Ajustements pour petits smartphones (portrait) */
    .main-title {
        font-size: 1.8em; /* Réduit de 2em */
    }

    .menu-item {
        font-size: 0.8em; /* Réduit de 0.9em */
    }

    div.menu-links .menu-item img {
        max-width: 240px !important; /* Réduit de 280px */
        width: 100% !important;
        height: auto !important;
    }

    .logout-footer {
        margin: 15px auto; /* Réduit de 20px à 15px */
    }

    .logout-icon img {
        width: 120px !important; /* Réduit de 150px */
        height: auto !important;
    }

    .contracts-table {
        font-size: 0.8em; /* Réduit de 0.9em */
    }

    .contracts-table th, .contracts-table td {
        padding: 4px; /* Réduit de 6px */
        font-size: 0.7em; /* Réduit de 0.8em */
    }

    .status {
        width: 20px; /* Réduit de 25px */
        height: 12px; /* Réduit de 15px */
    }

    .sms-gauge .gauge {
        width: 30px; /* Réduit de 35px */
        height: 60px; /* Réduit de 80px */
    }
}