*, ::before, ::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --bg-primary:       #f8f5f0;
    --bg-secondary:     #ffffff;
    --bg-card:          #e8dfc8;
    --bg-card-hover:    #fff3e0;
    --bg-input:         #ffffff;

    --gold:             #b8860b;
    --gold-light:       #c9a84c;
    --gold-dark:        #8a6f2e;
    --green-racing:     #1a7a3c;
    --green-light:      #22a050;
    --green-dark:       #0f4d25;

    --text-primary:     #1a1a1a;
    --text-secondary:   #5a5a5a;
    --text-muted:       #8a8a8a;
    --border-color:     #e0d5c5;
    --border-gold:      #c9a84c88;

    --form-fields-bg:           #ffffff;
    --form-fields-border:       #d4c5a9;
    --form-fields-focus-outline: #b8860b;
    --form-fields-focus-bg:     #fffdf7;
    --form-btn-bg:              #1a7a3c;
    --form-btn-border:          #22a050;
    --form-btn-font:            #ffffff;
    --form-btn-font-hover:      #f8f5f0;
    --form-label-font:          #5a5a5a;
    --form-label-bg:            #e8dfc8;
    --form-text-color:          #b8860b;

    --color-alert-bg-success:   #e8f5e9;
    --color-alert-bg-warning:   #fff8e1;
    --color-alert-bg-danger:    #fdecea;
    --color-alert-font-gold:    #b8860b;
    --color-alert-font:         #1a1a1a;
    --color-alert-font-warning: #5a3e00;
    --color-alert-border:       #e0d5c5;
    --color-alert-btn:          #5a5a5a;

    --base-font:  Roboto, sans-serif;
    --title-font: Palanquin, sans-serif;

    --fs-12: 0.75rem;
    --fs-14: 0.875rem;
    --fs-16: 1rem;
    --fs-18: 1.125rem;
    --fs-20: 1.25rem;
    --fs-24: 1.5rem;
    --fs-30: 1.875rem;
    --fs-36: 2.25rem;
    --fs-42: 2.625rem;
    --fs-50: 3.125rem;
    --fs-72: 4.5rem;
}

body, input, select, textarea, button {
    font-family: var(--base-font);
    color: var(--text-primary);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--title-font);
    color: var(--text-primary);
}

li label {
    display: inline-block;
    font-size: smaller;
    color: var(--text-secondary);
    padding-left: 0.2rem;
}

.forgetten-pwd {
    margin-top: -1.1rem;
    text-align: right;
    margin-bottom: 0.3rem;
    padding: 0 0.5rem;
    font-style: italic;
    font-weight: 100;
    font-size: var(--fs-14);
}

.forgetten-pwd a {
    text-decoration: none;
    color: var(--gold);
}

.forgetten-pwd a::after {
    content: "";
    display: block;
    width: 0%;
    height: 0.0625rem;
    background: var(--gold);
    transition: width 0.2s ease-in-out;
    margin-left: 60%;
}

.forgetten-pwd a:hover::after { width: 38%; }

.space-login {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 770px;
}

.btn-zone {
    width: 96%;
    margin: 0 auto;
    text-align: center;
}

.btn-form {
    border-radius: 8px;
    border: 1px solid var(--gold-dark);
    cursor: pointer;
    position: relative;
    background: linear-gradient(135deg, var(--green-racing), var(--green-dark));
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4), 0 0 0 1px rgba(201,168,76,0.1);
    padding: 12px;
    transition: all 0.3s ease;
    overflow: hidden;
    z-index: 1;
    width: 100%;
}

.btn-form::before {
    content: "";
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--gold-dark), var(--gold));
    transition: left 0.4s ease;
    z-index: -1;
}

.btn-form:hover::before { left: 0; }

.btn-form:hover {
    color: var(--bg-primary);
    border-color: var(--gold);
    box-shadow: 0 6px 20px rgba(201,168,76,0.3);
    transform: translateY(-1px);
}

.group-fields {
    width: 96%;
    margin: 0 auto;
    padding: 0.3125rem 0.5rem;
    border-radius: 0.5rem;
    background-color: var(--bg-card);
    border: 0.0625rem solid var(--border-color);
    transition: all 0.2s ease;
}

.group-fields:hover {
    background-color: var(--bg-card-hover);
    border-color: var(--gold-dark);
}

.group-fields:focus-within {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(201,168,76,0.15);
}

.group-fields_input, .group-fields_select,
.group-fields_radio, .group-fields_checkbox { margin-bottom: 1.2rem; }

.group-fields_radio, .group-fields_checkbox { height: 100%; }

.fields {
    width: 100%; height: 100%;
    margin-left: 0.4rem; margin-right: 0.4rem;
    padding: 0 0.5rem;
    background-color: transparent;
}

.fields-input, .fields-select {
    border: none; outline: none;
    font-size: var(--fs-18);
    color: var(--gold-light);
    background-color: transparent;
}

.fields-select { margin-left: 0; }
.fields-radio, .fields-checkbox { padding: 0.625rem 0; }

.label {
    font-size: var(--fs-14);
    font-weight: 400;
    color: var(--text-secondary);
    margin-left: 0.4rem;
    padding: 0 0.5rem;
}

.label-on { top: -0.5rem; z-index: 1; background-color: var(--bg-card); color: var(--gold); }
.label-out { top: -1rem; z-index: 1; background-color: var(--bg-card); }

.fields ul { list-style-type: none; margin-left: 0.4rem; }
.li-horizontal { display: inline-block; margin-right: 0.4rem; }
.li-vertical { display: block; }

.li-label {
    margin-top: 0.3rem; padding: 0.1rem;
    font-size: var(--fs-18);
    color: var(--gold);
}

.form-title {
    text-align: center;
    font-size: 2.2rem;
    color: var(--gold-light);
    text-shadow: 0 0 20px rgba(201,168,76,0.3);
    letter-spacing: 0.03em;
}

@media screen and (max-width: 520px) {
    .group-fields { width: 90%; margin-bottom: 0.8rem; }
    .group-fields_input, .group-fields_select { height: 3.125rem !important; }
    .form-title { font-size: 1.8rem; }
}

/* ===== FILTRES SAUVEGARDÉS ===== */
.saved-filters-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.8rem;
    background: var(--bg-card);
    border-radius: 8px;
    margin-bottom: 0.8rem;
    border: 1px solid rgba(184,134,11,0.2);
}

.saved-filters-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gold);
    white-space: nowrap;
}

.saved-filters-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.saved-filter-item {
    display: flex;
    align-items: center;
}

.btn-filter-load {
    padding: 0.25rem 0.7rem;
    background: var(--bg-primary);
    border: 1px solid var(--gold);
    border-radius: 20px;
    color: var(--text-primary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.btn-filter-load:hover {
    background: var(--gold);
    color: #fff;
}

.btn-filter-delete {
    margin-left: 2px;
    padding: 0.1rem 0.4rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1rem;
    cursor: pointer;
    line-height: 1;
    border-radius: 50%;
    transition: color 0.2s, background 0.2s;
}
.btn-filter-delete:hover {
    color: #c62828;
    background: rgba(198,40,40,0.1);
}

.save-filter-form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.8rem;
    flex-wrap: wrap;
}

.save-filter-input {
    flex: 1;
    min-width: 160px;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--gold);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.85rem;
}

.btn-filter-save {
    padding: 0.35rem 0.9rem;
    background: var(--gold);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s;
}
.btn-filter-save:hover { opacity: 0.85; }