/*==================================
  =          SWISSNORTON           =
  ==================================
	
  Créé le : 17.12.2025
  Mis à jour le : 09.02.2026
  Par : Rui Dos Santos

  page : ./assets/css/creer-compte.css
==================================*/

/* =====================================
	FORMULAIRE "CREER UN COMPTE"
===================================== */
.creer-compte-form {
	max-width: var(--container-create);
    margin: 0 auto;
    padding: 1.5rem 2rem;
	background-color: var(--bg-form);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-xl);
	flex-direction: column;
}

.creer-compte-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md) var(--spacing-md);
    margin-bottom: var(--spacing-lg, 1.5rem);
}

.creer-compte-form-field {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 0.5rem;
	padding-bottom: 1rem;
}

.creer-compte-form-field select[name="civilite"] {
	max-width: 250px;
}

.creer-compte-form-field input[name="date_naissance"] {
	max-width: 180px;
}

.creer-compte-form-field input[name="captcha"] {
	max-width: 130px;
}

/* =====================================
	CSS RESPONSIVE
===================================== */
/* Tablettes (max 1024px) */
@media (max-width: 1024px) {
    .creer-compte-form {
        padding: 1.25rem 1.5rem;
    }

    .creer-compte-form-grid {
        gap: var(--spacing-sm) var(--spacing-sm);
    }
}

/* Tablettes portrait (max 768px) */
@media (max-width: 768px) {
    .creer-compte-form {
        padding: 1rem 1.25rem;
        margin: 0 var(--spacing-sm);
    }

    .creer-compte-form-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
        margin-bottom: var(--spacing-md, 1rem);
    }

    .creer-compte-form-field {
        padding-bottom: 0.75rem;
    }

    .creer-compte-form-field select[name="civilite"],
    .creer-compte-form-field input[name="date_naissance"],
	.creer-compte-form-field input[name="captcha"]	{
        max-width: auto;
    }
}

/* Mobiles (max 480px) */
@media (max-width: 480px) {
    .creer-compte-form {
        padding: 0.875rem 1rem;
        margin: 0 var(--spacing-xs);
        border-radius: 8px;
    }

    .creer-compte-form-grid {
        gap: var(--spacing-xs);
        margin-bottom: var(--spacing-sm, 0.75rem);
    }

    .creer-compte-form-field {
        gap: 0.375rem;
        padding-bottom: 0.5rem;
    }
}