/* Ciblage du portlet MFA spécifique */
.portlet-mfa-verify {
    background: transparent;
}

.portlet-header {
    display: none !important;
}

/* Le conteneur du formulaire (la carte) */
.portlet-mfa-verify .portlet-content {
    background: #ffffff;
    border-radius: 16px;
    border: none;
    box-shadow: 0 10px 30px rgba(0, 94, 66, 0.08); /* Ombre teintée en vert très léger */
    max-width: 450px;
    margin: 40px auto;
    padding: 25px;
}

/* Bouton retour */
.portlet-mfa-verify .portlet-icon-back {
    background: #f1f3f2;
    border-radius: 50%;
    padding: 10px;
    color: #005E42 !important;
    transition: all 0.2s ease;
    padding-top: 0;
}

.portlet-mfa-verify .portlet-icon-back:hover {
    background: #005E42;
    color: #ffffff !important;
}

/* Message d'information (Email envoyé) */
.portlet-mfa-verify .portlet-msg-info {
    background-color: #f0f7f5; /* Fond vert très pâle */
    border: none;
    border-left: 4px solid #005E42;
    color: #004d36;
    padding: 15px;
    border-radius: 4px;
    font-size: 0.92rem;
    margin-bottom: 25px;
}

/* Style du label */
.portlet-mfa-verify .control-label {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 12px;
}

/* Champ de saisie OTP Modernisé */
.portlet-mfa-verify .form-control#_com_liferay_multi_factor_authentication_web_portlet_MFAVerifyPortlet_otp {
    height: 60px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 10px;
    text-align: center;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    background-color: #fcfcfc;
    color: #005E42;
    transition: all 0.3s ease;
}

.portlet-mfa-verify .form-control#_com_liferay_multi_factor_authentication_web_portlet_MFAVerifyPortlet_otp:focus {
    border-color: #005E42;
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(0, 94, 66, 0.15);
    outline: none;
}

/* Bouton principal (Envoyer / Valider) */
.portlet-mfa-verify .btn-primary {
    width: 100%;
    height: 52px;
    background: linear-gradient(135deg, #005E42 0%, #004631 100%) !important;
    border: none !important;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1.05rem;
    margin-top: 15px;
    box-shadow: 0 4px 12px rgba(0, 94, 66, 0.2);
    transition: all 0.3s ease;
}

.portlet-mfa-verify .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 94, 66, 0.3);
    filter: brightness(1.1);
}

/* Bouton secondaire (Phase 1: Obtenir le code) */
.portlet-mfa-verify .btn-secondary {
    width: 100%;
    background-color: #ffffff;
    border: 2px solid #005E42;
    color: #005E42;
    border-radius: 12px;
    padding: 10px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.portlet-mfa-verify .btn-secondary:hover {
    background-color: #005E42;
    color: #ffffff;
}

/* Ajustement espacement */
.portlet-mfa-verify .button-holder {
    margin-top: 20px;
}

/* Alert après */
#_com_liferay_multi_factor_authentication_web_portlet_MFAVerifyPortlet_messageContainer {
    margin-top:10px;
}

/*=============================*/
.portlet-mfa-verify .portlet-content {
    position: relative;
    padding-top: 80px; /* Espace augmenté pour laisser place à l'image */
    /* ... rest of your portlet-content styles ... */
}

/* 1. On ajuste le conteneur principal pour accueillir le logo tout en haut */
.portlet-mfa-verify {
    padding-top: 100px !important; /* Espace pour le logo */
    position: relative;
}

/* 2. Insertion de votre logo PNG en Base64 */
.portlet-mfa-verify::before {
    content: "";
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 250px; /* Ajustez selon la largeur souhaitée du logo */
    height: 80px;  /* Ajustez selon la hauteur souhaitée du logo */
    background-image: url("data:image/png;base64,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");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 888;
}

/* Insertion de l'image en Base64 */
.portlet-mfa-verify .portlet-content::before {
    content: "";
    position: absolute;
    top: -45px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 90px;
    background-color: #ffffff;
    /* Version robuste du SVG Base64 - Icône Cadenas de Sécurité */
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23005E42'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 45px;
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(0, 94, 66, 0.15);
    border: 5px solid #ffffff;
    z-index: 100;
}

/* Ajustement pour mobile */
@media (max-width: 576px) {
    .portlet-mfa-verify .portlet-content {
        margin-top: 60px;
    }
}

@keyframes float {
    0% { transform: translate(-50%, 0px); }
    50% { transform: translate(-50%, -5px); }
    100% { transform: translate(-50%, 0px); }
}

.portlet-mfa-verify .portlet-content::before {
    animation: float 3s ease-in-out infinite;
}

/*===== Le Titre : Vérification de Sécurité ===== */
.portlet-mfa-verify .portlet-content::after {
    content: "Vérification de Sécurité";
    position: absolute;
    top: 55px; /* Positionné juste sous l'icône */
    left: 0;
    right: 0;
    display: block;
    color: #005E42;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    text-align: center;
}

/* 4. Ajustement des messages existants pour ne pas chevaucher le titre */
.portlet-mfa-verify .portlet-body {
    margin-top: 20px;
}

.portlet-mfa-verify .portlet-msg-info {
    border-radius: 8px !important;
    background-color: #f0f7f5 !important;
    color: #005E42 !important;
    border: 1px solid rgba(0, 94, 66, 0.1) !important;
    padding: 15px !important;
}


/*======TRANSFROMATION =====*/
/* 1. On transforme le formulaire en conteneur Flex pour réorganiser l'ordre */
#_com_liferay_multi_factor_authentication_web_portlet_MFAVerifyPortlet_fm {
    display: flex;
    flex-direction: column;
}

/* 2. On définit l'ordre visuel : PhaseTwo (texte) d'abord, PhaseOne (bouton) après */
#_com_liferay_multi_factor_authentication_web_portlet_MFAVerifyPortlet_phaseTwo {
    order: 1;
    display: inline !important;
}

#_com_liferay_multi_factor_authentication_web_portlet_MFAVerifyPortlet_phaseOne {
    order: 2;
    display: inline !important;
    margin-top:20px;
    text-align: right;
}

/* On force l'input OTP (qui est dans PhaseTwo) à descendre à la ligne suivante */
#_com_liferay_multi_factor_authentication_web_portlet_MFAVerifyPortlet_otp {
    display: block !important;
    order: 3; /* Il se place après le bloc texte+bouton */
    margin-top: 15px !important;
    width: 100%;
}

/* Le gros bouton de validation final en bas */
.portlet-mfa-verify .button-holder:last-of-type {
    order: 4;
}

/* 3. On force le texte et le bouton à rester sur la même ligne */
#_com_liferay_multi_factor_authentication_web_portlet_MFAVerifyPortlet_phaseTwo .form-group,
#_com_liferay_multi_factor_authentication_web_portlet_MFAVerifyPortlet_phaseTwo label,
#_com_liferay_multi_factor_authentication_web_portlet_MFAVerifyPortlet_phaseOne .button-holder {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 4. Transformation du bouton en format Hypertexte */
#_com_liferay_multi_factor_authentication_web_portlet_MFAVerifyPortlet_sendEmailButton {
    display: inline !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin-left: 5px !important;
    color: #005E42 !important; /* Vert BICICI */
    text-decoration: underline !important;
    font-weight: 700 !important;
    font-size: inherit !important;
    cursor: pointer;
    box-shadow: none !important;
    text-transform: none !important;
}

#_com_liferay_multi_factor_authentication_web_portlet_MFAVerifyPortlet_sendEmailButton:hover {
    color: #008f64 !important;
    text-decoration: none !important;
}

/* Nettoyage du message d'info inutile */
#_com_liferay_multi_factor_authentication_web_portlet_MFAVerifyPortlet_phaseOne .portlet-msg-info {
    display: none !important;
}

/* 1. Cacher le texte original "Envoyer" */
#_com_liferay_multi_factor_authentication_web_portlet_MFAVerifyPortlet_sendEmailButton {
    font-size: 0 !important;
    line-height: 0 !important;
}

/* 2. Injecter le nouveau texte "Renvoyer le code" */
#_com_liferay_multi_factor_authentication_web_portlet_MFAVerifyPortlet_sendEmailButton::before {
    content: "Renvoyer le code";
    /* On rétablit la taille de police pour le nouveau texte */
    font-size: 0.9rem !important;
    display: inline-block;
    visibility: visible;
    /* text-decoration: underline; Pour garder l'aspect hypertexte */
}

/* 3. Ajustement optionnel : ajouter des parenthèses ou un style particulier */
#_com_liferay_multi_factor_authentication_web_portlet_MFAVerifyPortlet_sendEmailButton::before {
    font-weight: 700;
    color: #005E42;
    /*display: none*/
}

/***** 1. On modifie la stratégie pour le texte : au lieu de font-size: 0, on utilise une couleur transparente */
#_com_liferay_multi_factor_authentication_web_portlet_MFAVerifyPortlet_sendEmailButton {
    color: transparent !important;
    position: relative;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    display: inline-block !important;
    width: auto !important;
    box-shadow: none !important;
}

/* 2. On place le texte "Renvoyer le code" par-dessus */
#_com_liferay_multi_factor_authentication_web_portlet_MFAVerifyPortlet_sendEmailButton::before {
    content: "Renvoyer le code";
    color: #005E42;
    text-decoration: underline;
    font-size: 0.9rem;
    font-weight: 700;
    /*position: absolute;
    left: 0;
    top: 0;*/
    white-space: nowrap;
}

/* 3. LORSQUE LE BOUTON EST DÉSACTIVÉ (Liferay ajoute l'attribut disabled pendant le compteur) */
/* On cache notre texte "Renvoyer" pour laisser voir le compteur */
#_com_liferay_multi_factor_authentication_web_portlet_MFAVerifyPortlet_sendEmailButton[disabled]::before {
    display: none !important;
}

/* 4. On redonne du style au compteur (le texte que Liferay injecte dans le bouton) */
#_com_liferay_multi_factor_authentication_web_portlet_MFAVerifyPortlet_sendEmailButton[disabled] {
    color: #666 !important; /* Couleur grise pour le temps restant */
    font-size: 0.85rem !important;
    text-decoration: none !important;
    cursor: not-allowed;
}