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

/* 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: 0 10px 30px rgba(0, 0, 0, 0.1);

    --shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.15);

    --border-radius: 16px;

    --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;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    line-height: 1.6;

    position: relative;

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

}



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

.registration-container {

    width: 100%;

    max-width: 1200px; /* Réduit de 1400px à 1200px */

    max-height: 90vh; /* Réduit de 100vh à 90vh */

    background: var(--white);

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

    box-shadow: var(--shadow);

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

    position: relative;

    display: flex;

    flex-direction: column;

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

}



@keyframes containerEnter {

    0% {

        opacity: 0;

        transform: translateY(30px) scale(0.95);

    }

    100% {

        opacity: 1;

        transform: translateY(0) scale(1);

    }

}



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

.registration-header {

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

    color: var(--white);

    padding: 30px;

    text-align: center;

    position: relative;

    overflow: hidden;

    flex-shrink: 0;

}



.registration-header::before {

    content: '';

    position: absolute;

    top: -50%;

    left: -50%;

    width: 200%;

    height: 200%;

    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="white" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');

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

}



@keyframes float {

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

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

}



.registration-header h1 {

    font-size: 2rem; /* Réduit de 2.5rem à 2rem */

    font-weight: 700;

    margin-bottom: 8px; /* Réduit de 10px à 8px */

    position: relative;

    z-index: 1;

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

}



@keyframes titleSlideIn {

    0% {

        opacity: 0;

        transform: translateY(-30px);

    }

    100% {

        opacity: 1;

        transform: translateY(0);

    }

}



.registration-header p {

    font-size: 1rem; /* Réduit de 1.1rem à 1rem */

    opacity: 0.9;

    position: relative;

    z-index: 1;

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

}



@keyframes subtitleSlideIn {

    0% {

        opacity: 0;

        transform: translateY(-20px);

    }

    100% {

        opacity: 0.9;

        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) 0.6s 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);

    }

}



.header-logo {

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

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

    object-fit: contain;

    filter: brightness(0) invert(1); /* Rendre le logo blanc */

    transition: var(--transition);

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

}



.header-logo:hover {

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

    filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));

}



@keyframes logoFloat {

    0%, 100% {

        transform: translateY(0px);

    }

    50% {

        transform: translateY(-5px);

    }

}



.registration-logo {

    font-size: 2.5rem; /* Réduit de 3rem à 2.5rem */

    margin-bottom: 15px; /* Réduit de 20px à 15px */

    position: relative;

    z-index: 1;

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

}



@keyframes logoBounce {

    0% {

        opacity: 0;

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

    }

    50% {

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

    }

    100% {

        opacity: 1;

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

    }

}



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

.registration-form {

    padding: 30px;

    flex: 1;

    overflow: auto; /* Permettre le défilement du formulaire */

    display: flex;

    flex-direction: column;

}



/* ===== LAYOUT EN COLONNES ===== */

.form-layout {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 0;

    max-width: 1000px; /* Réduit de 1200px à 1000px */

    margin: 0 auto;

    border-radius: 16px;

    overflow: visible; /* Permettre le défilement */

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

    flex: 1;

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

}



@keyframes formLayoutSlideIn {

    0% {

        opacity: 0;

        transform: translateX(-50px);

    }

    100% {

        opacity: 1;

        transform: translateX(0);

    }

}



.form-left {

    background: var(--white);

    padding: 30px; /* Réduit de 40px à 30px */

    display: flex;

    flex-direction: column;

    gap: 20px; /* Réduit de 25px à 20px */

    overflow: visible; /* Permettre le défilement */

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

}



@keyframes leftPanelSlideIn {

    0% {

        opacity: 0;

        transform: translateX(-30px);

    }

    100% {

        opacity: 1;

        transform: translateX(0);

    }

}



.form-right {

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

    padding: 30px; /* Réduit de 40px à 30px */

    display: flex;

    flex-direction: column;

    gap: 20px; /* Réduit de 25px à 20px */

    overflow: visible; /* Permettre le défilement */

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

}



@keyframes rightPanelSlideIn {

    0% {

        opacity: 0;

        transform: translateX(30px);

    }

    100% {

        opacity: 1;

        transform: translateX(0);

    }

}



.section-title {

    font-size: 1.3rem; /* Réduit de 1.5rem à 1.3rem */

    font-weight: 600;

    margin-bottom: 25px; /* Réduit de 30px à 25px */

    padding-bottom: 12px; /* Réduit de 15px à 12px */

    border-bottom: 2px solid;

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

}



@keyframes titleFadeIn {

    0% {

        opacity: 0;

        transform: translateY(-20px);

    }

    100% {

        opacity: 1;

        transform: translateY(0);

    }

}



.form-left .section-title {

    color: var(--primary-green);

    border-bottom-color: var(--gray-200);

}



.form-right .section-title {

    color: var(--white);

    border-bottom-color: rgba(255, 255, 255, 0.3);

}



.form-group {

    margin-bottom: 15px; /* Réduit de 20px à 15px */

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

    opacity: 0;

    transform: translateY(20px);

}



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

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

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

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

.form-group:nth-child(5) { animation-delay: 2.0s; }

.form-group:nth-child(6) { animation-delay: 2.1s; }

.form-group:nth-child(7) { animation-delay: 2.2s; }

.form-group:nth-child(8) { animation-delay: 2.3s; }



@keyframes formGroupFadeIn {

    0% {

        opacity: 0;

        transform: translateY(20px);

    }

    100% {

        opacity: 1;

        transform: translateY(0);

    }

}



.form-label {

    display: block;

    font-weight: 500;

    margin-bottom: 6px; /* Réduit de 8px à 6px */

    font-size: 0.9rem; /* Réduit de 0.95rem à 0.9rem */

    transition: var(--transition-fast);

}



.form-left .form-label {

    color: var(--black);

}



.form-right .form-label {

    color: var(--white);

}



.form-control {

    width: 100%;

    padding: 12px 15px; /* Réduit de 15px 18px à 12px 15px */

    border: none;

    border-bottom: 2px solid;

    border-radius: 0;

    font-size: 0.95rem; /* Réduit de 1rem à 0.95rem */

    transition: var(--transition);

    background: transparent;

    position: relative;

}



.form-left .form-control {

    border-bottom-color: var(--gray-300);

    color: var(--black);

}



.form-left .form-control:focus {

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

    outline: none;

    transform: scale(1.02);

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

}



.form-right .form-control {

    border-bottom-color: rgba(255, 255, 255, 0.3);

    color: var(--white);

}



.form-right .form-control:focus {

    border-bottom-color: var(--white);

    outline: none;

    transform: scale(1.02);

    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);

}



.password-field {

    padding-right: 50px;

}



.form-control::placeholder {

    opacity: 0.7;

    transition: var(--transition-fast);

}



.form-left .form-control::placeholder {

    color: var(--gray-500);

}



.form-right .form-control::placeholder {

    color: rgba(255, 255, 255, 0.8);

}



.form-control:focus::placeholder {

    opacity: 0.5;

    transform: translateX(5px);

}



.form-select {

    appearance: none;

    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");

    background-position: right 12px center;

    background-repeat: no-repeat;

    background-size: 16px;

    padding-right: 40px;

    cursor: pointer;

    transition: var(--transition);

}



.form-select:hover {

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

}



.form-right .form-select {

    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");

}



.form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

}



/* ===== PROFILE PICTURE ===== */

.profile-picture-section {

    text-align: center;

    margin-bottom: 15px; /* Réduit de 20px à 15px */

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

}



@keyframes profileSectionFadeIn {

    0% {

        opacity: 0;

        transform: scale(0.8) rotate(-10deg);

    }

    100% {

        opacity: 1;

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

    }

}



.profile-picture-container {

    width: 80px; /* Réduit de 100px à 80px */

    height: 80px; /* Réduit de 100px à 80px */

    margin: 0 auto 12px; /* Réduit de 15px à 12px */

    border-radius: 50%;

    overflow: hidden;

    border: 3px solid var(--primary-green);

    cursor: pointer;

    position: relative;

    background: linear-gradient(135deg, var(--gray-50), var(--gray-100));

    transition: var(--transition);

}



.profile-picture-container:hover {

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

    box-shadow: 0 12px 30px rgba(135, 217, 0, 0.4);

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

}



.profile-picture-placeholder {

    width: 100%;

    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    color: var(--gray-500);

    transition: var(--transition);

}



.profile-picture-placeholder i {

    font-size: 1.5rem; /* Réduit de 2rem à 1.5rem */

    margin-bottom: 4px; /* Réduit de 5px à 4px */

    color: var(--primary-green);

    transition: var(--transition);

}



.profile-picture-container:hover .profile-picture-placeholder i {

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

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

}



.profile-picture-placeholder span {

    font-size: 0.7rem; /* Réduit de 0.75rem à 0.7rem */

    font-weight: 500;

}



#profile-preview {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: none;

    transition: var(--transition);

}



/* ===== CHAMPS D'ENTREPRISE ===== */

.company-fields {

    background: linear-gradient(135deg, var(--gray-50), var(--gray-100));

    border-radius: 8px;

    padding: 15px; /* Réduit de 20px à 15px */

    margin-top: 12px; /* Réduit de 15px à 12px */

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

    transition: var(--transition-slow);

    display: none;

    opacity: 0;

    transform: translateY(-10px) scale(0.95);

    max-height: 0;

    overflow: hidden;

}



.company-fields.active {

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

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

    display: block;

    opacity: 1;

    transform: translateY(0) scale(1);

    max-height: 180px; /* Réduit de 200px à 180px */

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

}



@keyframes companyFieldsExpand {

    0% {

        max-height: 0;

        opacity: 0;

        transform: translateY(-10px) scale(0.95);

    }

    100% {

        max-height: 180px; /* Réduit de 200px à 180px */

        opacity: 1;

        transform: translateY(0) scale(1);

    }

}



/* ===== PASSWORD STRENGTH ===== */

.password-strength {

    margin-top: 12px; /* Réduit de 15px à 12px */

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

}



@keyframes passwordStrengthFadeIn {

    0% {

        opacity: 0;

        transform: translateX(-20px);

    }

    100% {

        opacity: 1;

        transform: translateX(0);

    }

}



.strength-bar {

    width: 100%;

    height: 3px; /* Réduit de 4px à 3px */

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

    border-radius: 2px;

    overflow: hidden;

    margin-bottom: 6px; /* Réduit de 8px à 6px */

    position: relative;

}



.strength-fill {

    height: 100%;

    width: 0%;

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

    border-radius: 2px;

    position: relative;

}



.strength-fill::after {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

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

    animation: strengthShine 2s ease-in-out infinite;

}



@keyframes strengthShine {

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

    50% { transform: translateX(100%); }

}



.strength-text {

    font-size: 0.75rem; /* Réduit de 0.8rem à 0.75rem */

    color: rgba(255, 255, 255, 0.8);

    transition: var(--transition-fast);

}



/* ===== CHECKBOX PERSONNALISÉ ===== */

.checkbox-container {

    display: flex;

    align-items: center;

    gap: 10px; /* Réduit de 12px à 10px */

    cursor: pointer;

    font-size: 0.85rem; /* Réduit de 0.9rem à 0.85rem */

    color: var(--white);

    transition: var(--transition);

    padding: 8px; /* Réduit de 10px à 8px */

    border-radius: 8px;

}



.checkbox-container:hover {

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

    transform: translateX(5px);

}



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

    display: none;

}



.checkmark {

    width: 16px; /* Réduit de 18px à 16px */

    height: 16px; /* Réduit de 18px à 16px */

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

    border-radius: 50%;

    position: relative;

    transition: var(--transition);

}



.checkbox-container input[type="checkbox"]:checked + .checkmark {

    background: var(--white);

    border-color: var(--white);

    transform: scale(1.2);

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

}



.checkbox-container input[type="checkbox"]:checked + .checkmark::after {

    content: '✓';

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    color: var(--primary-green);

    font-size: 9px; /* Réduit de 10px à 9px */

    font-weight: bold;

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

}



@keyframes checkmarkAppear {

    0% {

        opacity: 0;

        transform: translate(-50%, -50%) scale(0);

    }

    100% {

        opacity: 1;

        transform: translate(-50%, -50%) scale(1);

    }

}



.checkbox-container a {

    color: var(--white);

    text-decoration: underline;

    font-weight: 600;

    transition: var(--transition-fast);

}



.checkbox-container a:hover {

    opacity: 0.8;

    transform: translateY(-1px);

}



/* ===== TERMS SECTION ===== */

.terms-section {

    margin-top: 15px; /* Réduit de 20px à 15px */

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

}



@keyframes termsSectionFadeIn {

    0% {

        opacity: 0;

        transform: translateY(20px);

    }

    100% {

        opacity: 1;

        transform: translateY(0);

    }

}



/* ===== BOUTONS ===== */

.form-actions {

    display: flex;

    justify-content: center;

    margin-top: 25px; /* Réduit de 30px à 25px */

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

}



@keyframes formActionsFadeIn {

    0% {

        opacity: 0;

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

    }

    100% {

        opacity: 1;

        transform: translateY(0) scale(1);

    }

}



.btn {

    padding: 12px 35px; /* Réduit de 15px 40px à 12px 35px */

    border: none;

    border-radius: 25px;

    font-size: 0.95rem; /* Réduit de 1rem à 0.95rem */

    font-weight: 600;

    cursor: pointer;

    transition: var(--transition);

    display: inline-flex;

    align-items: center;

    gap: 8px;

    text-decoration: none;

    position: relative;

    overflow: hidden;

}



.btn-primary {

    background: var(--primary-green);

    color: var(--white);

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

    backdrop-filter: blur(10px);

}



.btn-primary:hover {

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

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

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

    box-shadow: 0 12px 30px rgba(135, 217, 0, 0.4);

}



.btn-primary::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;

}



.btn-primary:hover::before {

    left: 100%;

}



.btn:disabled {

    opacity: 0.6;

    cursor: not-allowed;

    transform: none !important;

}



/* ===== MESSAGES D'ERREUR ET SUCCÈS ===== */

.alert {

    padding: 12px 18px; /* Réduit de 15px 20px à 12px 18px */

    border-radius: 12px;

    margin-bottom: 15px; /* Réduit de 20px à 15px */

    font-weight: 500;

    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-success {

    background: var(--primary-green-light);

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

    border: 1px solid var(--primary-green);

}



.alert-error {

    background: rgba(220, 38, 38, 0.1);

    color: var(--accent-red);

    border: 1px solid var(--accent-red);

}



.alert i {

    font-size: 1rem; /* Réduit de 1.1rem à 1rem */

}



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

.form-control.is-invalid {

    border-bottom-color: var(--accent-red);

    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-bottom-color: var(--primary-green);

    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: 0.2rem; /* Réduit de 0.25rem à 0.2rem */

    font-size: 0.75em; /* Réduit de 0.8em à 0.75em */

    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);

    }

}



.form-left .invalid-feedback {

    color: var(--accent-red);

}



.form-right .invalid-feedback {

    color: rgba(255, 204, 203, 0.9);

}



.valid-feedback {

    display: block;

    width: 100%;

    margin-top: 0.2rem; /* Réduit de 0.25rem à 0.2rem */

    font-size: 0.75em; /* Réduit de 0.8em à 0.75em */

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

}



.form-left .valid-feedback {

    color: var(--primary-green);

}



.form-right .valid-feedback {

    color: rgba(144, 238, 144, 0.9);

}



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

@media (max-width: 1200px) {

    .form-layout {

        grid-template-columns: 1fr;

        gap: 0;

        max-height: none; /* Supprimer la limitation de hauteur */

    }

    

    .form-left, .form-right {

        padding: 25px;

        max-height: none; /* Supprimer la limitation de hauteur */

        overflow: visible; /* Permettre le défilement */

    }

}



@media (max-width: 768px) {

    body {

        padding: 8px;

        overflow: hidden; /* Garder la page principale non défilable */

        align-items: flex-start; /* Commencer plus haut sur mobile */

        padding-top: 20px; /* Ajouter un padding en haut */

    }

    

    .registration-container {

        margin: 8px;

        border-radius: 12px;

        max-height: 90vh; /* Réduire la hauteur max sur mobile */

        overflow: hidden; /* Garder le container principal non défilable */

        margin-top: 0; /* Supprimer la marge du haut */

    }

    

    .registration-header {

        padding: 20px 18px; /* Réduire le padding du header sur mobile */

        flex-shrink: 0;

    }

    

    .registration-header h1 {

        font-size: 1.8rem;

        margin-bottom: 6px; /* Réduire l'espacement */

    }

    

    .registration-header p {

        font-size: 0.9rem; /* Réduire la taille du texte */

        margin-bottom: 0;

    }

    

    .registration-form {

        padding: 20px 18px; /* Réduire le padding du formulaire */

        flex: 1;

        overflow: auto; /* Permettre le défilement du formulaire */

    }

    

    .form-layout {

        margin: 8px;

        border-radius: 12px;

        max-height: none; /* Supprimer la limitation de hauteur */

        overflow: visible; /* Permettre le défilement */

    }

    

    .form-left, .form-right {

        padding: 18px 15px; /* Réduire le padding des panneaux */

        max-height: none; /* Supprimer la limitation de hauteur */

        overflow: visible; /* Permettre le défilement */

    }

    

    .form-row {

        grid-template-columns: 1fr;

        gap: 12px;

    }

    

    .section-title {

        font-size: 1.2rem;

        margin-bottom: 18px; /* Réduire l'espacement */

        padding-bottom: 10px; /* Réduire le padding */

    }

    

    .form-group {

        margin-bottom: 12px; /* Réduire l'espacement entre les champs */

    }

    

    .form-label {

        margin-bottom: 5px; /* Réduire l'espacement */

        font-size: 0.85rem; /* Réduire la taille */

    }

    

    .form-control {

        padding: 10px 12px; /* Réduire le padding des champs */

        font-size: 0.9rem;

    }

}



@media (max-width: 480px) {

    body {

        padding: 4px;

        overflow: hidden; /* Garder la page principale non défilable */

        align-items: flex-start; /* Commencer plus haut sur très petit écran */

        padding-top: 15px; /* Réduire le padding en haut */

    }

    

    .registration-container {

        margin: 4px;

        border-radius: 12px;

        max-height: 85vh; /* Réduire encore plus la hauteur */

        overflow: hidden; /* Garder le container principal non défilable */

        margin-top: 0;

    }

    

    .registration-header {

        padding: 15px 12px; /* Réduire encore plus le padding */

        flex-shrink: 0;

    }

    

    .registration-header h1 {

        font-size: 1.5rem; /* Réduire la taille du titre */

        margin-bottom: 5px;

    }

    

    .registration-header p {

        font-size: 0.85rem; /* Réduire encore plus la taille */

    }

    

    .registration-logo {

        font-size: 2rem; /* Réduire la taille du logo */

        margin-bottom: 10px;

    }

    

    .registration-form {

        padding: 15px 12px; /* Réduire le padding */

        flex: 1;

        overflow: auto; /* Permettre le défilement du formulaire */

    }

    

    .form-layout {

        margin: 4px;

        border-radius: 12px;

        max-height: none; /* Supprimer la limitation de hauteur */

        overflow: visible; /* Permettre le défilement */

    }

    

    .form-left, .form-right {

        padding: 12px 10px; /* Réduire encore plus le padding */

        max-height: none; /* Supprimer la limitation de hauteur */

        overflow: visible; /* Permettre le défilement */

    }

    

    .section-title {

        font-size: 1rem; /* Réduire la taille */

        margin-bottom: 15px;

        padding-bottom: 8px;

    }

    

    .form-group {

        margin-bottom: 10px; /* Réduire l'espacement */

    }

    

    .form-label {

        margin-bottom: 4px;

        font-size: 0.8rem;

    }

    

    .form-control {

        padding: 8px 10px;

        font-size: 0.85rem;

    }

    

    .btn {

        width: 100%;

        justify-content: center;

        padding: 8px 20px; /* Réduire le padding du bouton */

        font-size: 0.9rem;

    }

    

    .profile-picture-container {

        width: 70px; /* Réduire encore plus la taille */

        height: 70px;

        margin: 0 auto 10px;

    }

    

    .profile-picture-placeholder i {

        font-size: 1.3rem;

        margin-bottom: 3px;

    }

    

    .profile-picture-placeholder span {

        font-size: 0.65rem;

    }

}



/* ===== AJUSTEMENTS SPÉCIAUX MOBILE ===== */

@media (max-width: 768px) {

    .registration-container {

        transform: translateY(-10px); /* Remonter légèrement le container */

    }

}



@media (max-width: 480px) {

    .registration-container {

        transform: translateY(-15px); /* Remonter encore plus sur très petit écran */

    }

}



/* ===== CHAMPS OBLIGATOIRES ===== */

.form-label.required::after {

    content: ' *';

    color: var(--accent-red);

    font-weight: bold;

    animation: requiredPulse 2s ease-in-out infinite;

}



@keyframes requiredPulse {

    0%, 100% { opacity: 1; }

    50% { opacity: 0.5; }

}



/* ===== CHAMPS DE CONTACT (SECTION DROITE) ===== */

.form-right .form-control {

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

    backdrop-filter: blur(10px);

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

    border-radius: 8px;

    padding: 12px 15px;

    color: var(--white);

    font-weight: 500;

    transition: var(--transition);

}



.form-right .form-control:focus {

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

    color: var(--white);

    border-color: rgba(255, 255, 255, 0.6);

    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);

    transform: scale(1.02);

}



.form-right .form-control:focus::placeholder {

    color: rgba(255, 255, 255, 0.9);

}



.form-right .form-control::placeholder {

    color: rgba(255, 255, 255, 0.7);

    font-weight: 400;

}



.form-right .form-label {

    color: var(--white);

    font-weight: 600;

    margin-bottom: 8px;

}



/* ===== BOUTON D'AFFICHAGE DU MOT DE PASSE ===== */

.password-input-wrapper {

    position: relative;

    display: flex;

    align-items: center;

    width: 100%;

}



.password-toggle-btn {

    position: absolute;

    right: 10px;

    top: 50%;

    transform: translateY(-50%);

    background: none;

    border: none;

    color: var(--text-light);

    cursor: pointer;

    font-size: 16px;

    padding: 8px;

    border-radius: 4px;

    transition: var(--transition);

    z-index: 10;

    width: 35px;

    height: 35px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.password-toggle-btn:hover {

    color: var(--primary-green);

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

    transform: translateY(-50%) scale(1.1);

}



.password-toggle-btn:focus {

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

    outline-offset: 2px;

}



.password-field {

    padding-right: 50px;

    width: 100%;

}



/* ===== ANIMATIONS DE CHARGEMENT ===== */

.loading {

    position: relative;

    overflow: hidden;

}



.loading::after {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

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

    animation: loadingShine 1.5s ease-in-out infinite;

}



@keyframes loadingShine {

    0% { left: -100%; }

    100% { left: 100%; }

}



/* ===== TRANSITIONS DE PAGE ===== */

.page-transition {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

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

    z-index: 9999;

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.3s ease;

}



.page-transition.active {

    opacity: 1;

    pointer-events: all;

}



/* ===== 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;

    }

} 



/* ===== STYLING DU SCROLLBAR ===== */

.registration-form::-webkit-scrollbar {

    width: 8px;

}



.registration-form::-webkit-scrollbar-track {

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

    border-radius: 4px;

}



.registration-form::-webkit-scrollbar-thumb {

    background: var(--primary-green);

    border-radius: 4px;

    transition: var(--transition);

}



.registration-form::-webkit-scrollbar-thumb:hover {

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

}



/* ===== ANIMATION DE SCROLL SMOOTH ===== */

.registration-form {

    scroll-behavior: smooth;

}



/* ===== INDICATEUR DE SCROLL ===== */

.form-layout::after {

    content: '';

    position: absolute;

    bottom: 10px;

    left: 50%;

    transform: translateX(-50%);

    width: 40px;

    height: 4px;

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

    border-radius: 2px;

    animation: scrollIndicator 2s ease-in-out infinite;

}



@keyframes scrollIndicator {

    0%, 100% { opacity: 0.3; }

    50% { opacity: 0.8; }

}