/* 
   Définition de la taille de police de base et adaptation responsive selon la largeur de l'écran.
   On utilise des media queries pour ajuster la taille de police sur les petits écrans.
*/
:root {
    font-size: 16px;
    /* Taille de base pour desktop */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    min-height: 100vh;
    line-height: 1.5;
}

#email-error {
    display: none;
    color: #c34338;
}

.page-container {
    max-width: 70%;
    min-height: 100vh;
    margin: 0 auto;
    background-color: #FFF;
    padding: 4rem 0;
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    gap: 2rem;
}

/* Header et logo */
.header {
    text-align: center;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.logo-ign {
    color: #333333;
    font-weight: 300;
}

.logo-rando {
    color: #4CAF50;
    font-weight: 300;
}

.logo-icon {
    margin-left: 4px;
}

/* Message d'information */
.info-banner {
    text-align: center;
    margin-bottom: 1.5rem;
}

.info-main {
    
    font-weight: 600;
    color: #333333;
    margin-bottom: 5px;
}

.info-sub {
    
    color: #333333;
}

/* Contenu principal */
.main-content {
    display: flex;
    gap: 2rem;
    align-items: start;
}

.right-content {
    height: 100%;
    border: 1px solid #26A581;
    box-shadow: 0 4px 8px 0 rgba(38, 165, 129, 0.25);
    padding: 32px;
    /* Rend la colonne de droite sticky lors du scroll */
    position: sticky;
    top: 1rem;
    width: 62%;
}

.right-content h2 {
    font-size: 1.375rem;
    margin-bottom: -12px;
}

.left-content {
    padding: 2rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.left-content h1 {
    font-size: 1.375rem;
}

.link {
    color: #26A581;
    font-family: Arial;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
}

.left-content p {
    color: #091625;
    font-family: Arial;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

/* Décalage des listes dans la colonne gauche */
.left-content ul {
    padding-left: 1rem;
}

.login-box {
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.login-form {
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.form-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    align-self: stretch;
    margin-top: 12px;
}

.connect-btn {
    border: 1px solid #26A581;
    background: #26A581;
    display: flex;
    padding: 12px 24px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #FFF;
    text-align: center;
    font-family: Arial;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    cursor: pointer;
}

.forgot-link {
    color: #091625;
    text-align: center;
    font-family: Arial;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.input-group {
    width: 100%;
}

input {
    border-radius: 1px;
    border: 1px solid #DDE1E6;
    background: #FFF;
    width: 100%;
    height: 3rem;
    padding: 0.25rem;
}

label {
    color: #091625;
    font-family: Arial;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.required-note {
    color: #091625;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.subtitle {
    color: #091625;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

/* Bouton retour en haut (visible uniquement quand JS ajoute .show) */
.back-to-top {
    position: fixed;
    bottom: 16px;
    right: 16px;
    width: 48px;
    height: 48px;
    padding: 10px;
    background: #26A581;
    color: #FFF;
    border: none;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
    z-index: 1000;
    cursor: pointer;
}

.back-to-top:focus-visible {
    outline: 2px solid #0b4d3d;
    outline-offset: 2px;
}

.back-to-top.show {
    display: flex;
}

.error {
    border: 1px solid #FF0000;
}

/* Vue connectée */
.connected-section {
    display: none;
    width: 100%;
    display: none;
    /* masqué par défaut, montré en JS */
}

.account-name {
    color: #091625;
    font-family: Arial;
    font-size: 1.375rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.meta {
    color: #091625;
    font-family: Arial;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.account-identity {
    display: flex;
    align-items: baseline;
    font-size: 1.375rem;
    color: #091625;
    font-style: normal;
    line-height: normal;
    gap: 8px;
}

.account-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

.action-btn {
    border: 1px solid #26A581;
    background: #26A581;
    display: inline-flex;
    padding: 12px 24px;
    justify-content: center;
    align-items: center;
    color: #FFF;
    text-align: center;
    font-family: Arial;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    cursor: pointer;
}

/* Etat de chargement sur bouton */
.action-btn.is-loading {
    position: relative;
    opacity: 0.85;
    pointer-events: none;
}

.action-btn.is-loading::after {
    content: "";
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-top-color: #ffffff;
    border-radius: 50%;
    position: absolute;
    right: 12px;
    animation: ign-spin 0.8s linear infinite;
}

/* Etat de chargement pour le bouton Connexion */
.connect-btn.is-loading {
    position: relative;
    opacity: 0.85;
    pointer-events: none;
}

.connect-btn.is-loading::after {
    content: "";
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-top-color: #ffffff;
    border-radius: 50%;
    position: absolute;
    right: 12px;
    animation: ign-spin 0.8s linear infinite;
}

@keyframes ign-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.connected-section-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}


#connectedSection {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.logout-btn {
    background: #FFF;
    color: #26A581;
}

/* Adaptation responsive de la taille de police */
@media (max-width: 1600px) {
    :root {
        font-size: 15px;
        /* Légère réduction sur les écrans moyens */
    }

    .page-container {
        padding: 0.5rem
    }

    .info-banner {
        margin-bottom: 0.25rem;
    }
}

/* Adaptation responsive de la taille de police */
@media (max-width: 1200px) {
    :root {
        font-size: 14px;
        /* Légère réduction sur les écrans moyens */
    }

    .page-container {
        padding: 0.5rem
    }

    .info-banner {
        margin-bottom: 0.25rem;
    }

    /* Empiler meta + nom sur mobile */
    .account-identity {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
}

@media (max-width: 800px) {
    :root {
        font-size: 12px;
        /* Pour les petits écrans (mobiles) */
    }

    body {
        padding-bottom: 5rem;
    }

    .logo img {
        width: 12rem;
    }

    .page-container {
        max-width: 80%;
    }

    .info-banner {
        margin-bottom: 0.25rem;
    }

    /* Empilement des colonnes et ordre sur mobile */
    .main-content {
        flex-direction: column;
        align-items: stretch;
    }

    /* Désactive le sticky sur mobile et place la colonne droite en premier */
    .right-content {
        position: static;
        top: auto;
        order: 1;
        width: 100%;
        padding: 2rem;
    }

    /* Colonne gauche placée en dessous sur mobile */
    .left-content {
        order: 2;
        width: 100%;
        padding: 0;
    }

    .login-form .form-actions {
        flex-direction: column;
        width: 100%;
    }

    .login-form .connect-btn {
        width: 100%;
    }

    /* Empiler meta + nom sur mobile */
    .account-identity {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
}