/*La Racine de couleur pour la charte graphique*/
:root {
    /* PALETTE OFFICIELLE KATALOG [cite: 16, 18, 23, 26, 29] */
    --katalog-bordeaux: #902135;
    /* Base  */
    --katalog-blue: #183CB6;
    /* Secondaire I [cite: 23] */
    --katalog-green: #4EB368;
    /* Secondaire II [cite: 26] */
      --katalog-orange: #FFA500;
    /* Secondaire III [cite: 29] */
    --katalog-white: #FFFFFF;
    --katalog-black: #000000;
    --text-dark: #1f2937;
    --gray-light: #f3f4f6;
}

/* pour le corps de la pages  */
body {
    font-family: 'Montserrat', sans-serif;
    color: var(--text-dark);
    background-color: var(--gray-light);
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;

    /* Dégradé linéaire : part du bordeaux très clair vers le blanc pur */
    /* L'angle de 135deg crée une diagonale élégante qui guide le regard */
    background: linear-gradient(135deg,
            rgba(144, 33, 53, 0.08) 0%,
            /* Bordeaux à 8% d'opacité  */
            rgba(255, 255, 255, 1) 50%,
            /* Transition vers le blanc pur  */
            rgba(24, 60, 182, 0.03) 100%
            /* Touche finale Bleu Roi à 3% d'opacité  */
        );
}

/* HEADER & LOGO  */
.main-header {
    padding: 0.5rem 0.5rem;
    text-align: center;
}

.logo-container img {
    height: 50px;

    /* Ajusté pour la visibilité du livre ouvert  */
}

.slogan {
    display: block;
    color: var(--katalog-bordeaux);
    font-size: 0.9rem;
    font-weight: 500;
    font-style: italic;
    /* "Toute la connaissance à votre portée" */
}

/* CONTAINER PRINCIPAL */
.container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    margin-bottom: 10px;
   
}

@media (max-width: 768px) {
    body {
        min-height: auto;
    }
    .container {
        flex: none;
        align-items: flex-start;
        padding-top: 10px;
        padding-bottom: 25%;
    }
}



/* FOOTER : Mentions bas de page */
footer {
    text-align: center;
    font-size: 0.8rem;
    color: var(--katalog-black);
}

.footer-link {
    /* Suppression du soulignement par défaut */
    text-decoration: none;

    /* Couleur de base : Rouge Bordeaux de la charte */
    color: #902135;

    /* Typographie Montserrat Medium pour la lisibilité */
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;

    /* Transition douce pour l'effet de survol */
    transition: all 0.3s ease;

    /* Optionnel : un léger espacement pour le professionnalisme */
    letter-spacing: 0.5px;
}

.footer-link:hover {
    /* Au survol : passage au Bleu Roi pour l'interactivité */
    color: #902135;
    text-decoration: none;
    /* Ajout d'une bordure inférieure discrète au lieu du soulignement brut */
    border-bottom: 2px solid #902135;

    /* Légère accentuation visuelle */
    opacity: 0.9;
}




/* STYLE DES LIENS DE NAVIGATION switch Login-Register */
.login-footer-links {
    text-decoration: none;
    text-align: center;
    font-size: 0.85rem;
}


.login-footer-links p {
    margin: 10px 0;
    color: var(--secondary-gray);
}

.link-katalog {
    color: var(--katalog-bordeaux);
    text-decoration: none;
    font-weight: 700;
    transition: color 0.3s;
}

.link-katalog:hover {
    color: var(--katalog-bordeaux);
    /* Interaction : Passage au Bleu Roi */
    text-decoration: underline;
}

/* BOUTON PRIMAIRE BORDEAUX */
.btn-login-register {
    width: 100%;
    background-color: var(--katalog-bordeaux);
    color: white;
    padding: 12px;
    border: none;
    border-radius: 5px;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    transition: filter 0.2s;
}

.btn-login-register:hover {
    filter: brightness(1.2);
}

/* MESSAGES D'ERREUR (Sécurité) */
.error-box {
    background-color: #fee2e2;
    color: #dc2626;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    border: 1px solid #fecaca;
}

.size_input {
    font-size: 15px;

}

/* 1. On force le conteneur de la bibliothèque à prendre toute la largeur */
.iti {
    width: 100%;
    display: block;
    /* Remplace l'inline-block par défaut */
}

/* 2. On s'assure que l'input lui-même remplit son nouveau conteneur */
#phone_input {
    width: 100% !important;
    border-radius: 8px;
    /* Rappel de votre charte */
    border: 1px solid #666666;
    padding: 10px;

}

/* 3. Style au focus pour la cohérence visuelle */
#phone_input:focus {
    border-color: #235a81;
    outline: none;
}

/* Bouton de déconnexion en haut à droite */
.btn-logout-top {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #9ca3af;
    /* Gris discret par défaut */
    text-decoration: none;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    z-index: 10;
}

.btn-logout-top:hover {
    color: var(--katalog-bordeaux);
    transform: scale(1.05);
}

.btn-logout-top span {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}