/* ============================================
   RUBIK'S CONSULTING - SAP IAS LOGIN THEME
   Charte graphique : Bleus (#000033, #0068AB, #35B3E1, #CEE6F5) + Vert accent (#33FF99)
   Background : Dégradé OKLab 45° diagonal
   ============================================ */

/* === BASE STYLES === */
html {
    width: 100%;
    height: 100%;
    font-size: 16px;
    line-height: 1.15;
    color: #000033; /* Bleu navy Rubik's */
    text-align: left;
    background-color: transparent;
    font-family: "72", Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1 {
    font-size: 25px;
    color: #000033; /* Bleu navy */
}

h2 {
    font-size: 17px !important;
    color: #0068AB; /* Bleu principal */
}

* {
    box-sizing: border-box;
}

*:focus {
    outline: none;
}

/* === LINKS === */
a {
    text-decoration: underline;
    cursor: pointer;
    color: #0068AB; /* Bleu principal Rubik's */
    transition: color 0.2s ease;
}

a:hover {
    cursor: pointer;
    color: #35B3E1; /* Bleu ciel au survol */
}

body {
    color: #000033; /* Bleu navy */
}

/* === FORM ITEMS === */
.fd-form-item.ids-input-group {
    text-align: left;
}

[dir="rtl"] .fd-form-item.ids-input-group {
    text-align: right;
}

/* === LOGO STYLING === */
/* Le logo est importé via SAP IAS, mais on peut contrôler sa mise en forme */
.iam-container__logo,
.ids-logo,
.iam-logo {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    margin: 0 auto !important;
    padding: 2rem 0 1.5rem 0 !important;
}

.iam-container__logo img,
.ids-logo img,
.iam-logo img {
    max-width: 200px !important; /* Taille augmentée (était généralement ~150px) */
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Variante pour les logos SVG */
.iam-container__logo svg,
.ids-logo svg,
.iam-logo svg {
    max-width: 200px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Si le logo est dans un lien */
.iam-container__logo a,
.ids-logo a,
.iam-logo a {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

/* === MAIN CONTAINER === */
.ids-main .ids-main__content {
    background: rgba(255, 255, 255, 0.92); /* Fond blanc semi-transparent pour contraste avec le gradient */
    text-align: center;
    border-radius: 12px; /* Coins arrondis modernes */
    box-shadow: 0 8px 32px rgba(0, 0, 51, 0.15); /* Ombre subtile avec bleu navy */
    backdrop-filter: blur(10px); /* Effet glassmorphism léger */
    -webkit-backdrop-filter: blur(10px);
}

.ids-main .ids-main__content .iam-container__header {
    margin-bottom: 0rem !important;
}

.ids-main .ids-main__content .iam-container__footer {
    background: transparent;
}

/* === BUTTONS === */
.fn-button--emphasized .fn-button__text {
    color: #FFFFFF; /* Texte blanc sur bouton principal */
}

.fn-button:hover .fn-button__text {
    color: #FFFFFF;
}

.fn-button:active .fn-button__text {
    color: #FFFFFF;
}

.fn-button:focus .fn-button__text {
    color: #FFFFFF !important;
}

.fn-button:hover:active .fn-button__text {
    color: #FFFFFF;
}

/* === SOCIAL BUTTONS === */
.ids-social-buttons a {
    text-decoration: none;
}

.ids-social-buttons .fd-text {
    font-family: "72", "72full", Arial, Helvetica, sans-serif;
    font-weight: normal !important;
    line-height: 1.375rem;
    color: #0068AB; /* Bleu principal */
}

.ids-social-buttons .fd-text:hover {
    color: #35B3E1; /* Bleu ciel au survol */
}

/* === ILLUSTRATED MESSAGES === */
.fd-illustrated-message__text {
    color: #000033 !important; /* Bleu navy */
}

.ids-main .ids-main__content .iam-container__header .iam-container__title h1 {
    margin-top: 4rem;
}

/* === FOOTER === */
.ids-footer .ids-footer__links {
    background: rgba(53, 179, 225, 0.1); /* Bleu ciel très léger */
    border-top: 1px solid rgba(0, 104, 171, 0.1);
}

/* === FORGOT PASSWORD LINK === */
#forgotPasswordLink {
    font-weight: normal !important;
    color: #0068AB; /* Bleu principal */
}

#forgotPasswordLink:hover {
    color: #35B3E1; /* Bleu ciel */
}

/* === LABELS === */
.fn-label {
    color: #0068AB; /* Bleu principal */
    font-weight: 500;
}

/* === INPUT FIELDS === */
.fd-input-group {
    border-radius: 0.5rem; /* Coins plus arrondis */
}

.fn-input__text-field {
    border-radius: 0.5rem;
    background: rgba(206, 230, 245, 0.3); /* Bleu très pâle semi-transparent */
    color: #000033; /* Bleu navy pour le texte */
    border: 1px solid rgba(0, 104, 171, 0.2);
    transition: all 0.3s ease;
}

.fn-input__text-field:focus {
    background: rgba(206, 230, 245, 0.5);
    border-color: #0068AB; /* Bleu principal au focus */
    box-shadow: 0 0 0 3px rgba(0, 104, 171, 0.1);
}

.fn-input__text-field:hover {
    border-color: #35B3E1; /* Bleu ciel au survol */
}

#j_username, #j_password {
    font-size: 14px;
}

#test-service-provider-name {
    font-size: 18px;
}

/* === CHECKBOX === */
.fn-checkbox__label {
    color: #0068AB; /* Bleu principal */
}

.ids-login-login--border {
    border: none;
}

/* === BUTTON GROUP === */
.ids-button-group {
    padding: 0 !important;
    width: 100%;
}

#touAccept-label, #pdAccept {
    color: #000033; /* Bleu navy */
}

/* === HEADINGS === */
.ids-heading-1--login, .ids-heading-1 {
    font-size: 22px;
    color: #000033; /* Bleu navy */
    font-weight: 600;
}

[data-page="ids-login/logon"] .iam-container__subtitle,
[data-page="ids-login/conditional_logon"] .iam-container__subtitle,
[data-page="ids-registration/new"] .iam-container__subtitle,
[data-page="ids-registration/success"] .iam-container__subtitle,
[data-page="ids-login/conditional_initial"] .iam-container__subtitle {
    margin-top: -2rem;
    margin-bottom: 2rem;
    color: #0068AB; /* Bleu principal */
}

/* === PRIMARY BUTTON (EMPHASIZED) === */
.fn-button--emphasized {
    background: linear-gradient(135deg, #0068AB, #35B3E1); /* Dégradé bleu Rubik's */
    width: 100%;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 104, 171, 0.25);
    transition: all 0.3s ease;
}

.ids-button.fn-button--emphasized.ids-button--primary.fn-button:hover,
.ids-button.fn-button--emphasized.ids-button--primary.fn-button:active,
.ids-button.fn-button--emphasized.ids-button--primary.fn-button:focus,
.ids-button.fn-button--emphasized.ids-button--primary.fn-button:focus:hover,
.ids-button.fn-button--emphasized.ids-button--primary.fn-button:focus:hover:active {
    background: linear-gradient(135deg, #35B3E1, #0068AB); /* Dégradé inversé au survol */
    box-shadow: 0 6px 16px rgba(0, 104, 171, 0.35);
    transform: translateY(-1px);
}

/* === SEGMENTED BUTTON === */
.fn-segmented-button {
    background: rgba(206, 230, 245, 0.5) !important; /* Bleu très pâle */
    border: 1px solid rgba(0, 104, 171, 0.2);
}

.ids-button-group.ids-button-group--centered .ids-button.fn-button.fn-button--layout {
    background: transparent;
    color: #0068AB; /* Bleu principal */
}

.ids-button-group--centered .ids-button:hover {
    background: rgba(53, 179, 225, 0.15); /* Bleu ciel très léger */
}

/* === LOGIN SECTION === */
.ids-login-section {
    padding: 0;
}

#test-standard-choice .fn-button__text,
#test-biometric-choice .fn-button__text,
#test-social-choice .fn-button__text {
    color: #000033; /* Bleu navy */
}

.iam-container__title .ids-heading-1 {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* === TWO FACTOR AUTHENTICATION === */
[data-page="ids-two_factor/logon"] .fn-fieldset {
    color: #000033; /* Bleu navy */
}

[data-page="ids-two_factor/logon"] .ids-label-container p {
    color: #0068AB; /* Bleu principal */
}

/* === MESSAGE STRIPS === */
.fn-message-strip__text,
a#securityQuestionsLink,
a#passwordResetPinLink {
    color: #000033; /* Bleu navy */
}

p.fd-text, p.fn-title.fn-title--h4 {
    color: #000033; /* Bleu navy */
}

.fn-message-strip .fn-message-strip__text #ids-p {
    margin-top: 0rem;
}

a#securityQuestionsLink:hover,
a#passwordResetPinLink:hover {
    color: #35B3E1; /* Bleu ciel */
}

/* === SELECTED SECTIONS === */
[data-iam-selected-section="login-standard"] .iam-selected-section-login-standard,
[data-iam-selected-section="login-biometric"] .iam-selected-section-login-biometric {
    width: 100%;
}

button.ids-button.fn-button.fn-button--layout:hover,
#returnToForgotPasswordFormBack:hover {
    background: rgba(206, 230, 245, 0.5); /* Bleu très pâle */
}

#ids-p {
    font-size: 13px;
    margin-top: 4rem;
    color: #0068AB; /* Bleu principal */
}

/* === REQUIRED MARKER === */
.ids-required-marker {
    color: #0068AB; /* Bleu principal au lieu du bleu SAP par défaut */
}

.fd-illustrated-message .fd-illustrated-message__title {
    color: #000033; /* Bleu navy */
}

/* === FIELDSET HEADING === */
.ids-heading-fieldset {
    color: #000033 !important; /* Bleu navy */
    text-align: center;
}

#contactPrefSection p {
    color: #000033; /* Bleu navy */
}

#sapStoreRegisterFormBack .fn-button--layout .fn-button__text {
    color: #0068AB; /* Bleu principal */
}

/* === REGISTER LINK === */
#registerLink {
    background: none;
    color: #0068AB; /* Bleu principal */
}

#registerLink:hover {
    background: none;
    color: #35B3E1; /* Bleu ciel */
}

.iam-options-container .iam-verify-options__info {
    color: #000033; /* Bleu navy */
}

/* === SECONDARY BUTTONS (Return to Sign In, etc.) === */
.ids-secondary-button,
#returnToSignIn,
a.ids-secondary-button {
    background: transparent !important;
    color: #0068AB !important; /* Bleu principal */
    border: 2px solid #0068AB !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
}

.ids-secondary-button:hover,
#returnToSignIn:hover,
a.ids-secondary-button:hover {
    background: rgba(0, 104, 171, 0.1) !important;
    color: #35B3E1 !important;
    border-color: #35B3E1 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 104, 171, 0.15) !important;
}

.ids-secondary-button:active,
#returnToSignIn:active,
a.ids-secondary-button:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 6px rgba(0, 104, 171, 0.1) !important;
}

/* Container pour "Get access another way?" */
#returnToSignBtnInContainer {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.3rem !important; /* Réduit de 1rem à 0.3rem pour rapprocher le texte de la barre */
    margin-top: 2.5rem !important; /* Augmenté de 1.5rem à 2.5rem pour descendre l'ensemble */
    color: #000033 !important; /* Bleu navy */
}

#returnToSignBtnInContainer > span,
#returnToSignBtnInContainer > div {
    color: #000033 !important;
}

/* Divider horizontal */
.ids-horizontal-divider {
    width: 100% !important;
    height: 1px !important;
    background: rgba(0, 104, 171, 0.2) !important;
    margin: 0.25rem 0 0.5rem 0 !important; /* Marge réduite en haut (0.25rem) pour rapprocher du texte */
}

/* ============================================
   AMÉLIORATIONS SUPPLÉMENTAIRES RUBIK'S
   ============================================ */

/* === ACCENT VERT FLUO (utilisé avec parcimonie) === */
.fn-button--emphasized:focus::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, #33FF99, #35B3E1);
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.fn-button--emphasized:focus::before {
    opacity: 0.3; /* Halo vert subtil au focus */
}

/* === ANIMATION SUBTILE AU CHARGEMENT === */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ids-main .ids-main__content {
    animation: fadeInUp 0.6s ease-out;
}

/* === AMÉLIORATION DES INPUTS === */
.fn-input__text-field::placeholder {
    color: rgba(0, 104, 171, 0.5); /* Placeholder bleu principal semi-transparent */
}

/* === BORDURE SUBTILE SUR LE CONTAINER === */
.ids-main .ids-main__content {
    border: 1px solid rgba(0, 104, 171, 0.1);
}

/* === HOVER EFFECT SUR LES LIENS === */
a {
    position: relative;
}

a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: #33FF99; /* Accent vert fluo */
    transition: width 0.3s ease;
}

a:hover::after {
    width: 100%;
}

/* === AMÉLIORATION DU FOOTER === */
.ids-footer .ids-footer__links a {
    color: #0068AB;
    transition: color 0.2s ease;
}

.ids-footer .ids-footer__links a:hover {
    color: #35B3E1;
}

/* === RESPONSIVE IMPROVEMENTS === */
@media (max-width: 768px) {
    .ids-main .ids-main__content {
        border-radius: 8px;
        margin: 1rem;
    }
    
    h1 {
        font-size: 22px;
    }
    
    .ids-heading-1--login, .ids-heading-1 {
        font-size: 20px;
    }
    
    /* Logo légèrement plus petit sur mobile */
    .iam-container__logo img,
    .ids-logo img,
    .iam-logo img,
    .iam-container__logo svg,
    .ids-logo svg,
    .iam-logo svg {
        max-width: 160px !important;
    }
}

/* === ACCESSIBILITÉ === */
.fn-button--emphasized:focus-visible {
    outline: 3px solid #33FF99; /* Outline vert fluo pour accessibilité */
    outline-offset: 2px;
}

.fn-input__text-field:focus-visible {
    outline: 3px solid #0068AB;
    outline-offset: 2px;
}