/* --- CONFIGURATION DES VARIABLES (ROOT) --- */
:root {
    /* Identité INSA Rennes */
    --mdc-theme-primary: #d21000 !important;
    --mdc-theme-on-primary: #ffffff !important;
    
    /* Suppression du bleu CAS */
    --cas-theme-primary: #d21000 !important;
    --cas-theme-primary-light: #d21000 !important;
    --cas-theme-button-bg-hover: #a10d00 !important;
    
    --mdc-theme-secondary: #555555 !important;
    --mdc-theme-on-secondary: #ffffff !important;
    --mdc-theme-error: #e42313 !important;
    
    --link-color-hover: #333333;
}

/* --- ANIMATIONS DE TRANSITION --- */
.mdc-button, 
.sidebar-navigation ul li, 
.sidebar-navigation ul li i, 
a {
    transition: all 200ms ease-out !important;
}

/* --- COMPOSANTS MATERIAL DESIGN --- */

/* 1. Boutons et Icônes de boutons */
.mdc-button--raised, 
.mdc-button--raised:not(:disabled, .reveal-password),
#allow {
    background-color: var(--mdc-theme-primary) !important;
    color: var(--mdc-theme-on-primary) !important;
    filter: none !important;
    box-shadow: none !important;
}

/* Bouton Refuser / Cancel spécifique */
#cancel, 
.button-cancel,
.mdc-button--outlined:not(.reveal-password) {
    background-color: #767676 !important;
    color: #ffffff !important;
    border: none !important;
    filter: none !important;
}

#cancel:hover {
    background-color: #5a5a5a !important;
}

/* Forcer les icônes dans les boutons colorés à être blanches */
.mdc-button--raised i, 
.mdc-button--raised .material-icons,
.mdc-button--raised .mdc-button__icon,
#allow i {
    color: #ffffff !important;
}

.mdc-button--raised:not(:disabled):hover, 
.mdc-button.btn-primary:not(:disabled):hover,
#allow:hover {
    background-color: var(--cas-theme-button-bg-hover) !important;
}

/* 2. Champs de saisie */
.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,
.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,
.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing {
    border-color: #e0e0e0 !important;
}

.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,
.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,
.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing {
    border-color: var(--mdc-theme-primary) !important;
}

/* 3. Case à cocher */
.mdc-checkbox__native-control:enabled:checked ~ .mdc-checkbox__background {
    background-color: var(--mdc-theme-primary) !important;
    border-color: var(--mdc-theme-primary) !important;
}

/* --- NAVIGATION ET LIENS --- */

/* Règle générale (HORS footer et bannières pour éviter les conflits) */
a:not(footer a):not([class*="banner-"] a), 
#login a:not(footer a):not([class*="banner-"] a) {
    color: var(--mdc-theme-primary) !important;
    text-decoration: none;
    font-weight: 500;
}

a:hover:not(footer a):not([class*="banner-"] a) {
    color: var(--link-color-hover) !important;
    text-decoration: underline !important;
}

/* --- ALERTES ET BANNIÈRES --- */

.banner {
    box-shadow: none !important;
}

.banner-danger, .banner-warning, .banner-success, .banner-info {
    padding: 1rem !important;
    margin-bottom: 1rem !important;
    border-radius: 4px !important;
    border: 1px solid transparent !important;
}

/* Forcer les liens dans les bannières à hériter de la couleur du texte */
[class*="banner-"] a {
    color: inherit !important;
    text-decoration: underline !important;
    font-weight: 700 !important;
}

.banner-danger {
    border: 1px solid #f5c6cb !important;
    border-left: 5px solid #d21000 !important;
    color: #721c24 !important;
    background-color: #fdf2f2 !important;
}

.banner-warning {
    border: 1px solid #efe0b3 !important;
    border-left: 5px solid #ffc107 !important;
    color: #856404 !important;
    background-color: #fff3cd !important;
}

.banner-success {
    border: 1px solid #c3e6cb !important;
    border-left: 5px solid #28a745 !important;
    color: #155724 !important;
    background-color: #e9f7ef !important;
}

.banner-info {
    border: 1px solid #bee5eb !important;
    border-left: 5px solid #17a2b8 !important;
    color: #004085 !important;
    background-color: #e7f3ff !important;
}

/* --- FOOTER --- */

footer, #cas-footer, footer * {
    background-color: #303030 !important;
    color: #ffffff !important;
}

footer a, #cas-footer a {
    color: #ffffff !important;
    text-decoration: none !important;
}

footer a:visited, #cas-footer a:visited {
    color: #aaaaaa !important; /* Gris moyen pour les liens visités */
}

footer a:hover, #cas-footer a:hover {
    color: #cccccc !important;
    text-decoration: underline !important;
}

/* --- LAYOUT ET BACKGROUND --- */

body {
    border-top: 4px solid var(--mdc-theme-primary) !important;
}

/* Correctif titre "Portées" OIDC */
.bg-primary {
    background-color: var(--mdc-theme-primary) !important;
    color: #ffffff !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-thumb { background: #ccc; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--mdc-theme-primary); }
/* --- CORRECTIFS RESPONSIVE --- */

@media (max-width: 600px) {
    /* 1. Boutons OIDC : On les passe l'un sous l'autre */
    .mdc-card__actions, 
    #api-description .mdc-card__actions {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    /* Les boutons prennent toute la largeur sur mobile */
    .mdc-button, 
    #allow, 
    #cancel {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 2. Footer : On empile les éléments et on centre */
    footer, #cas-footer {
        text-align: center !important;
        padding: 20px 10px !important;
    }

    footer .mdc-layout-grid__inner {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    /* 3. Bannières : On réduit les paddings pour gagner de la place */
    .banner-danger, .banner-warning, .banner-success, .banner-info {
        padding: 0.8rem !important;
        font-size: 0.9rem !important;
    }

    /* 4. Formulaire de login : On s'assure qu'il ne dépasse pas */
    #fm1 {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 10px !important;
    }
    
    .mdc-card {
        width: 95% !important;
        margin: 10px auto !important;
    }
}

#heroimg {
    /* Règle d'or : ne jamais dépasser la largeur du parent */
    max-width: 100% !important;
    
    /* Garde les proportions (évite l'effet écrasé) */
    height: auto !important;
    
    /* Assure un comportement de bloc pour éviter les espaces résiduels */
    display: block;
    /* Centre l'image si elle est dans un conteneur plus large */
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 50px !important;
}