/* ===== VARIABLES ===== */

/* Palette GardenGrid Professionnelle - 2024 */

:root {

    --primary-green: #87D900;

    --primary-green-dark: #01402A;

    --primary-green-light: #EBFFC9;

    --gray-50: #F9FFF5;

    --gray-100: #F0F9FF;

    --gray-200: #E0F2FE;

    --gray-300: #BAE6FD;

    --gray-400: #7DD3FC;

    --gray-500: #38BDF8;

    --gray-600: #0EA5E9;

    --gray-700: #0284C7;

    --gray-800: #0369A1;

    --gray-900: #0C4A6E;

    --accent-blue: #1E40AF;

    --accent-purple: #7C3AED;

    --accent-orange: #EA580C;

    --accent-red: #DC2626;

    --white: #FFFFFF;

    --black: #1D1D1B;

    --shadow-light: 0 2px 10px rgba(0, 0, 0, 0.1);

    --shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.15);

    --shadow-heavy: 0 8px 30px rgba(0, 0, 0, 0.2);

    --border-radius: 12px;

    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

}



/* ===== RESET ET BASE ===== */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html, body {

    height: 100%;

    overflow: hidden; /* Empêcher le défilement */

}



body {

    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 50%, var(--primary-green-light) 100%);

    min-height: 100vh;

    overflow: hidden; /* Empêcher le défilement */

    position: relative;

}



/* ===== CONTAINER PRINCIPAL ===== */

.login-container {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    position: relative;

    overflow: hidden; /* Empêcher le défilement */

    animation: containerEnter 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;

}



@keyframes containerEnter {

    0% {

        opacity: 0;

        transform: scale(0.95);

    }

    100% {

        opacity: 1;

        transform: scale(1);

    }

}



/* ===== ARRIÈRE-PLAN ANIMÉ ===== */

.login-background {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 1;

    overflow: hidden; /* Empêcher le défilement */

}



.floating-shapes {

    position: absolute;

    width: 100%;

    height: 100%;

}



.shape {

    position: absolute;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.1);

    animation: float 6s ease-in-out infinite;

    transition: var(--transition);

}



.shape:hover {

    transform: scale(1.2);

    background: rgba(255, 255, 255, 0.2);

}



.shape-1 {

    width: 80px;

    height: 80px;

    top: 20%;

    left: 10%;

    animation-delay: 0s;

    animation: float 6s ease-in-out infinite, shapeGlow 3s ease-in-out infinite;

}



.shape-2 {

    width: 120px;

    height: 120px;

    top: 60%;

    right: 15%;

    animation-delay: 2s;

    animation: float 6s ease-in-out infinite, shapeGlow 3s ease-in-out infinite 1s;

}



.shape-3 {

    width: 60px;

    height: 60px;

    bottom: 20%;

    left: 20%;

    animation-delay: 4s;

    animation: float 6s ease-in-out infinite, shapeGlow 3s ease-in-out infinite 2s;

}



.shape-4 {

    width: 100px;

    height: 100px;

    top: 10%;

    right: 30%;

    animation-delay: 1s;

    animation: float 6s ease-in-out infinite, shapeGlow 3s ease-in-out infinite 0.5s;

}



@keyframes float {

    0%, 100% { transform: translateY(0px) rotate(0deg); }

    50% { transform: translateY(-20px) rotate(180deg); }

}



@keyframes shapeGlow {

    0%, 100% { 

        box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);

        filter: brightness(1);

    }

    50% { 

        box-shadow: 0 0 40px rgba(255, 255, 255, 0.3);

        filter: brightness(1.2);

    }

}



/* ===== CONTENU PRINCIPAL ===== */

.login-content {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 450px;

    animation: contentSlideIn 1s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;

}



@keyframes contentSlideIn {

    0% {

        opacity: 0;

        transform: translateY(50px) scale(0.9);

    }

    100% {

        opacity: 1;

        transform: translateY(0) scale(1);

    }

}



.login-card {

    background: var(--white);

    border-radius: var(--border-radius);

    box-shadow: var(--shadow-heavy);

    padding: 40px;

    backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.2);

    animation: cardFloat 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.6s both;

    transition: var(--transition);

}



@keyframes cardFloat {

    0% {

        opacity: 0;

        transform: translateY(30px) rotateX(-10deg);

    }

    100% {

        opacity: 1;

        transform: translateY(0) rotateX(0deg);

    }

}



.login-card:hover {

    transform: translateY(-5px) rotateX(2deg);

    box-shadow: 0 25px 50px rgba(135, 217, 0, 0.2);

}



/* ===== EN-TÊTE ===== */

.login-header {

    text-align: center;

    margin-bottom: 40px;

    animation: headerFadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.9s both;

}



@keyframes headerFadeIn {

    0% {

        opacity: 0;

        transform: translateY(-30px);

    }

    100% {

        opacity: 1;

        transform: translateY(0);

    }

}



.logo-container {

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 20px;

    animation: logoContainerBounce 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 1.1s both;

}



@keyframes logoContainerBounce {

    0% {

        opacity: 0;

        transform: scale(0.3) rotate(-180deg);

    }

    50% {

        transform: scale(1.1) rotate(0deg);

    }

    100% {

        opacity: 1;

        transform: scale(1) rotate(0deg);

    }

}



.logo-icon {

    width: 50px;

    height: 50px;

    background: transparent; /* Supprimer le background */

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-right: 15px;

    box-shadow: none; /* Supprimer l'ombre */

    transition: var(--transition);

}



.logo-icon:hover {

    transform: scale(1.1) rotate(5deg);

    box-shadow: 0 8px 25px rgba(135, 217, 0, 0.3);

}



.header-logo {

    width: 60px; /* Taille adaptée pour Logo.png qui contient le logo + texte */

    height: auto; /* Hauteur automatique pour maintenir les proportions */

    object-fit: contain;

    transition: var(--transition);

    animation: logoFloat 3s ease-in-out infinite;

}



.header-logo:hover {

    transform: scale(1.1) rotate(5deg);

    filter: drop-shadow(0 0 10px rgba(135, 217, 0, 0.5));

}



@keyframes logoFloat {

    0%, 100% {

        transform: translateY(0px);

    }

    50% {

        transform: translateY(-5px);

    }

}



.logo-icon i {

    color: var(--white);

    font-size: 24px;

    transition: var(--transition);

}



.logo-icon:hover i {

    transform: scale(1.2);

}



.login-header h1 {

    color: var(--black);

    font-size: 28px;

    font-weight: 700;

    margin: 0;

    transition: var(--transition);

}



.logo-container:hover .login-header h1 {

    color: var(--primary-green);

    transform: scale(1.05);

}



.welcome-text {

    color: var(--gray-500);

    font-size: 16px;

    margin: 0;

    animation: welcomeTextSlideIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) 1.3s both;

}



@keyframes welcomeTextSlideIn {

    0% {

        opacity: 0;

        transform: translateY(-20px);

    }

    100% {

        opacity: 1;

        transform: translateY(0);

    }

}



/* ===== FORMULAIRE ===== */

.login-form {

    margin-bottom: 30px;

    animation: formFadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) 1.5s both;

}



@keyframes formFadeIn {

    0% {

        opacity: 0;

        transform: translateY(30px);

    }

    100% {

        opacity: 1;

        transform: translateY(0);

    }

}



.form-group {

    margin-bottom: 25px;

    animation: formGroupSlideIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;

    opacity: 0;

    transform: translateX(-30px);

}



.form-group:nth-child(1) { animation-delay: 1.6s; }

.form-group:nth-child(2) { animation-delay: 1.8s; }



@keyframes formGroupSlideIn {

    0% {

        opacity: 0;

        transform: translateX(-30px);

    }

    100% {

        opacity: 1;

        transform: translateX(0);

    }

}



.input-wrapper {

    position: relative;

    display: flex;

    align-items: center;

    transition: var(--transition);

}



.input-wrapper:hover {

    transform: translateY(-2px);

}



.input-icon {

    position: absolute;

    left: 15px;

    color: var(--gray-500);

    font-size: 16px;

    z-index: 2;

    transition: var(--transition);

    animation: iconBounce 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;

}



.form-group:nth-child(1) .input-icon { animation-delay: 1.7s; }

.form-group:nth-child(2) .input-icon { animation-delay: 1.9s; }



@keyframes iconBounce {

    0% {

        opacity: 0;

        transform: scale(0) rotate(-180deg);

    }

    50% {

        transform: scale(1.2) rotate(0deg);

    }

    100% {

        opacity: 1;

        transform: scale(1) rotate(0deg);

    }

}



.form-control {

    width: 100%;

    padding: 15px 15px 15px 50px;

    border: 2px solid #e1e8ed;

    border-radius: var(--border-radius);

    font-size: 16px;

    transition: var(--transition);

    background: var(--white);

    position: relative;

}



.form-control:focus {

    outline: none;

    border-color: var(--primary-green);

    box-shadow: 0 0 0 3px rgba(135, 217, 0, 0.1);

    transform: scale(1.02);

}



.form-control:focus + .input-icon {

    color: var(--primary-green);

    transform: scale(1.1);

}



.input-focus-border {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 0;

    height: 2px;

    background: var(--primary-green);

    transition: var(--transition);

}



.form-control:focus ~ .input-focus-border {

    width: 100%;

}



.password-toggle {

    position: absolute;

    right: 15px;

    background: none;

    border: none;

    color: var(--text-light);

    cursor: pointer;

    font-size: 16px;

    transition: var(--transition);

    padding: 8px;

    border-radius: 50%;

}



.password-toggle:hover {

    color: var(--primary-green);

    background: rgba(135, 217, 0, 0.1);

    transform: scale(1.1);

}



.password-toggle:focus {

    outline: 2px solid var(--primary-green);

    outline-offset: 2px;

}



/* ===== OPTIONS DU FORMULAIRE ===== */

.form-options {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 30px;

    animation: formOptionsFadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) 2.1s both;

}



@keyframes formOptionsFadeIn {

    0% {

        opacity: 0;

        transform: translateY(20px);

    }

    100% {

        opacity: 1;

        transform: translateY(0);

    }

}



.remember-me {

    display: flex;

    align-items: center;

}



.checkbox-wrapper {

    display: flex;

    align-items: center;

    cursor: pointer;

    position: relative;

    transition: var(--transition);

    padding: 5px;

    border-radius: 6px;

}



.checkbox-wrapper:hover {

    background: rgba(135, 217, 0, 0.05);

    transform: translateX(3px);

}



.checkbox-wrapper input[type="checkbox"] {

    position: absolute;

    opacity: 0;

    cursor: pointer;

}



.checkmark {

    width: 20px;

    height: 20px;

    border: 2px solid #e1e8ed;

    border-radius: 4px;

    margin-right: 10px;

    position: relative;

    transition: var(--transition);

}



.checkbox-wrapper input:checked ~ .checkmark {

    background: var(--primary-green);

    border-color: var(--primary-green);

    transform: scale(1.1);

    box-shadow: 0 4px 12px rgba(135, 217, 0, 0.3);

}



.checkbox-wrapper input:checked ~ .checkmark:after {

    content: '';

    position: absolute;

    left: 6px;

    top: 2px;

    width: 5px;

    height: 10px;

    border: solid white;

    border-width: 0 2px 2px 0;

    transform: rotate(45deg);

    animation: checkmarkAppear 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;

}



@keyframes checkmarkAppear {

    0% {

        opacity: 0;

        transform: rotate(45deg) scale(0);

    }

    100% {

        opacity: 1;

        transform: rotate(45deg) scale(1);

    }

}



.label-text {

    color: var(--black);

    font-size: 14px;

    font-weight: 500;

}



.forgot-password {

    color: var(--primary-green);

    text-decoration: none;

    font-size: 14px;

    font-weight: 500;

    transition: var(--transition);

    position: relative;

}



.forgot-password::after {

    content: '';

    position: absolute;

    bottom: -2px;

    left: 0;

    width: 0;

    height: 2px;

    background: var(--primary-green);

    transition: var(--transition);

}



.forgot-password:hover {

    color: var(--primary-green-dark);

    transform: translateY(-1px);

}



.forgot-password:hover::after {

    width: 100%;

}



/* ===== BOUTON DE CONNEXION ===== */

.login-btn {

    width: 100%;

    padding: 15px;

    background: linear-gradient(135deg, var(--primary-green), var(--primary-green-dark));

    border: none;

    border-radius: var(--border-radius);

    color: var(--white);

    font-size: 16px;

    font-weight: 600;

    cursor: pointer;

    transition: var(--transition);

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    animation: loginBtnPulse 1s cubic-bezier(0.4, 0, 0.2, 1) 2.4s both;

}



@keyframes loginBtnPulse {

    0% {

        opacity: 0;

        transform: scale(0.8);

    }

    100% {

        opacity: 1;

        transform: scale(1);

    }

}



.login-btn:hover {

    transform: translateY(-3px) scale(1.02);

    box-shadow: var(--shadow-medium);

}



.login-btn:active {

    transform: translateY(-1px) scale(0.98);

}



.login-btn::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);

    transition: left 0.6s ease;

}



.login-btn:hover::before {

    left: 100%;

}



.btn-loading {

    display: none;

    align-items: center;

    justify-content: center;

}



.login-btn.loading .btn-text,

.login-btn.loading .btn-icon {

    display: none;

}



.login-btn.loading .btn-loading {

    display: flex;

}



.spinner {

    width: 20px;

    height: 20px;

    border: 2px solid rgba(255, 255, 255, 0.3);

    border-top: 2px solid var(--white);

    border-radius: 50%;

    animation: spin 1s linear infinite;

}



@keyframes spin {

    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }

}



/* ===== PIED DE PAGE ===== */

.login-footer {

    text-align: center;

    animation: footerFadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) 2.7s both;

}



@keyframes footerFadeIn {

    0% {

        opacity: 0;

        transform: translateY(30px);

    }

    100% {

        opacity: 1;

        transform: translateY(0);

    }

}



.divider {

    position: relative;

    margin: 30px 0;

    text-align: center;

}



.divider::before {

    content: '';

    position: absolute;

    top: 50%;

    left: 0;

    right: 0;

    height: 1px;

    background: #e1e8ed;

}



.divider span {

    background: var(--white);

    padding: 0 20px;

    color: var(--text-light);

    font-size: 14px;

}



.social-login {

    display: flex;

    flex-direction: column;

    gap: 15px;

    margin-bottom: 30px;

}



.social-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 12px;

    border: 2px solid var(--gray-200);

    border-radius: var(--border-radius);

    background: var(--white);

    color: var(--black);

    font-size: 14px;

    font-weight: 500;

    cursor: pointer;

    transition: var(--transition);

    text-decoration: none;

}



.social-btn:hover {

    transform: translateY(-2px);

    box-shadow: var(--shadow-light);

}



.google-btn:hover {

    border-color: #db4437;

    color: #db4437;

}



.facebook-btn:hover {

    border-color: #4267B2;

    color: #4267B2;

}



.register-link {

    margin-top: 20px;

}



.register-link p {

    color: var(--gray-500);

    font-size: 14px;

    margin: 0;

}



.register-btn {

    color: var(--primary-green);

    text-decoration: none;

    font-weight: 600;

    display: inline-flex;

    align-items: center;

    gap: 5px;

    transition: var(--transition);

    position: relative;

    overflow: hidden;

}



.register-btn::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(135, 217, 0, 0.2), transparent);

    transition: left 0.5s ease;

}



.register-btn:hover {

    color: var(--primary-green-dark);

    transform: translateX(8px);

}



.register-btn:hover::before {

    left: 100%;

}



/* ===== ALERTES ===== */

.alert {

    padding: 15px;

    border-radius: var(--border-radius);

    margin-bottom: 25px;

    border: none;

    display: flex;

    align-items: center;

    gap: 10px;

    animation: alertSlideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;

}



@keyframes alertSlideIn {

    0% {

        opacity: 0;

        transform: translateX(-100%);

    }

    100% {

        opacity: 1;

        transform: translateX(0);

    }

}



.alert-danger {

    background: #fee;

    color: #c53030;

    border-left: 4px solid #c53030;

}



.alert-info {

    background: #e6f3ff;

    color: #2b6cb0;

    border-left: 4px solid #2b6cb0;

}



.alert i {

    font-size: 16px;

}



/* ===== VALIDATION ===== */

.form-control.is-invalid {

    border-color: #dc3545;

    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);

    animation: fieldShake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;

}



@keyframes fieldShake {

    0%, 100% { transform: translateX(0); }

    25% { transform: translateX(-5px); }

    75% { transform: translateX(5px); }

}



.form-control.is-valid {

    border-color: var(--primary-green);

    box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.1);

    animation: fieldSuccess 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;

}



@keyframes fieldSuccess {

    0% { transform: scale(1); }

    50% { transform: scale(1.05); }

    100% { transform: scale(1); }

}



.invalid-feedback {

    display: block;

    width: 100%;

    margin-top: 8px;

    font-size: 12px;

    color: #dc3545;

    animation: feedbackSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;

}



@keyframes feedbackSlideIn {

    0% {

        opacity: 0;

        transform: translateY(-10px);

    }

    100% {

        opacity: 1;

        transform: translateY(0);

    }

}



.valid-feedback {

    display: block;

    width: 100%;

    margin-top: 8px;

    font-size: 12px;

    color: var(--primary-green);

    animation: feedbackSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;

}



/* ===== RESPONSIVE ===== */

@media (max-width: 480px) {

    body {

        overflow: hidden; /* Empêcher le défilement */

    }

    

    .login-container {

        padding: 10px;

        overflow: hidden; /* Empêcher le défilement */

    }

    

    .login-card {

        padding: 30px 20px;

        max-height: 90vh; /* Limiter la hauteur sur mobile */

        overflow: hidden; /* Empêcher le défilement */

    }

    

    .login-header h1 {

        font-size: 24px;

    }

    

    .form-options {

        flex-direction: column;

        gap: 15px;

        align-items: flex-start;

    }

    

    .social-login {

        gap: 10px;

    }

    

    .social-btn {

        padding: 10px;

        font-size: 13px;

    }

}



/* ===== TRANSITIONS ET ANIMATIONS ===== */

.page-transition {

    animation: fadeInUp 0.6s ease-out;

}



@keyframes fadeInUp {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* Animation d'entrée pour la carte */

.login-card {

    animation: slideInRight 0.8s ease-out;

}



@keyframes slideInRight {

    from {

        opacity: 0;

        transform: translateX(50px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}



/* Animation pour les éléments du formulaire */

.form-group {

    animation: fadeInStagger 0.6s ease-out;

    animation-fill-mode: both;

}



.form-group:nth-child(1) { animation-delay: 1.6s; }

.form-group:nth-child(2) { animation-delay: 1.8s; }



@keyframes fadeInStagger {

    from {

        opacity: 0;

        transform: translateY(20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* Animation pour le bouton */

.login-btn {

    animation: pulseIn 0.8s ease-out 2.4s both;

}



@keyframes pulseIn {

    from {

        opacity: 0;

        transform: scale(0.9);

    }

    to {

        opacity: 1;

        transform: scale(1);

    }

}



/* Transition fluide pour les liens */

.register-btn {

    position: relative;

    overflow: hidden;

}



/* Animation pour les icônes d'entrée */

.input-icon {

    animation: iconBounce 0.6s ease-out 0.3s both;

}



@keyframes iconBounce {

    0%, 20%, 50%, 80%, 100% {

        transform: translateY(0);

    }

    40% {

        transform: translateY(-10px);

    }

    60% {

        transform: translateY(-5px);

    }

}



/* ===== OPTIMISATIONS DE PERFORMANCE ===== */

.gpu-accelerated {

    transform: translateZ(0);

    backface-visibility: hidden;

    perspective: 1000px;

}



/* ===== PREFERENCE UTILISATEUR ===== */

@media (prefers-reduced-motion: reduce) {

    *,

    *::before,

    *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

    }

}