/* forms.css — Formulaire multi-steps, upload, progression */
/* SYNC sur pages avec formulaire */

/* --- Section formulaire --- */
.form-section{max-width:800px;margin-inline:auto;background:var(--color-bg);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:var(--spacing-xl)}
@media (max-width:640px){.form-section{padding:var(--spacing-lg) var(--spacing-md);border-radius:var(--radius-lg)}}

/* --- Groupes de champs --- */
.form-group{margin-bottom:var(--spacing-lg)}
.form-label{display:block;font-weight:600;font-size:.9375rem;margin-bottom:var(--spacing-xs);color:var(--color-text)}
.form-input,.form-select,.form-textarea{display:block;width:100%;padding:.75rem 1rem;border:2px solid var(--color-border);border-radius:var(--radius-md);font-size:1rem;color:var(--color-text);background-color:var(--color-bg);transition:border-color var(--transition),box-shadow var(--transition);appearance:none}
.form-input:focus,.form-select:focus,.form-textarea:focus{outline:0;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.form-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5l5 5 5-5' stroke='%2364748B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;padding-right:2.5rem;cursor:pointer}
.form-textarea{resize:vertical;min-height:120px}

/* --- Erreurs --- */
.form-error{font-size:.8125rem;color:var(--color-error);margin-top:var(--spacing-xs);display:none}
.form-group--error .form-error{display:block}
.form-group--error .form-input,.form-group--error .form-select,.form-group--error .form-textarea{border-color:var(--color-error)}
.form-group--error .form-input:focus,.form-group--error .form-select:focus,.form-group--error .form-textarea:focus{box-shadow:0 0 0 3px rgba(239,68,68,.15)}

/* --- Honeypot (invisible) --- */
.form-hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;pointer-events:none;tab-index:-1;opacity:0}

/* --- Barre de progression (3 steps) --- */
.form-progress{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:var(--spacing-xl);padding:0 var(--spacing-md)}
.form-progress__step{display:flex;flex-direction:column;align-items:center;position:relative;flex:1}
.form-progress__step:not(:last-child)::after{content:'';position:absolute;top:18px;left:calc(50% + 22px);right:calc(-50% + 22px);height:2px;background-color:var(--color-border);z-index:0}
.form-progress__step--done:not(:last-child)::after{background-color:var(--color-primary)}
.form-progress__dot{width:36px;height:36px;border-radius:50%;border:2px solid var(--color-border);background-color:var(--color-bg);display:flex;align-items:center;justify-content:center;font-size:.8125rem;font-weight:700;color:var(--color-text-muted);z-index:1;transition:background-color var(--transition),border-color var(--transition),color var(--transition)}
.form-progress__step--active .form-progress__dot{background-color:var(--color-primary);border-color:var(--color-primary);color:#fff}
.form-progress__step--done .form-progress__dot{background-color:var(--color-primary);border-color:var(--color-primary);color:#fff}
.form-progress__label{font-size:.6875rem;color:var(--color-text-muted);margin-top:var(--spacing-xs);text-align:center;white-space:nowrap}
.form-progress__step--active .form-progress__label{color:var(--color-primary);font-weight:600}

/* --- Zone d'upload --- */
.upload-zone{border:2px dashed var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-xl) var(--spacing-lg);text-align:center;cursor:pointer;transition:border-color var(--transition),background-color var(--transition)}
.upload-zone:hover,.upload-zone--active{border-color:var(--color-primary);background-color:var(--color-bg-energy)}
.upload-zone__icon{font-size:2rem;margin-bottom:var(--spacing-sm);color:var(--color-primary)}
.upload-zone__text{font-size:.9375rem;color:var(--color-text-muted);margin-bottom:var(--spacing-xs)}
.upload-zone__hint{font-size:.8125rem;color:var(--color-text-muted)}

/* --- Liste de fichiers --- */
.upload-file-list{display:flex;flex-direction:column;gap:var(--spacing-sm);margin-top:var(--spacing-md)}
.upload-file-item{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md);background:var(--color-bg-alt);border-radius:var(--radius-md);font-size:.875rem}
.upload-file-item__info{display:flex;align-items:center;gap:var(--spacing-sm);min-width:0}
.upload-file-item__name{font-weight:500;color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upload-file-item__size{color:var(--color-text-muted);flex-shrink:0}
.upload-file-item__remove{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:transparent;border:none;cursor:pointer;color:var(--color-text-muted);transition:background-color var(--transition),color var(--transition)}
.upload-file-item__remove:hover{background-color:rgba(239,68,68,.1);color:var(--color-error)}

/* --- Bouton submit --- */
.form-submit{width:100%}
.form-submit:disabled{opacity:.5;cursor:not-allowed;transform:none}
.form-submit:disabled:hover{transform:none;box-shadow:none}

/* --- Tiles de selection --- */
.tile-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-sm)}
@media (min-width:640px){.tile-grid{grid-template-columns:repeat(3,1fr)}}
.tile-select{position:relative}
.tile-select input[type=checkbox],.tile-select input[type=radio]{position:absolute;opacity:0;width:0;height:0}
.tile-select__label{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-xs);padding:var(--spacing-md);border:2px solid var(--color-border);border-radius:var(--radius-md);background-color:var(--color-bg);cursor:pointer;text-align:center;font-size:.875rem;font-weight:500;color:var(--color-text);transition:border-color var(--transition),background-color var(--transition);min-height:80px}
.tile-select__label:hover{border-color:var(--color-primary);background-color:var(--color-primary-light)}
.tile-select input:checked+.tile-select__label{border-color:var(--color-primary);background-color:var(--color-primary-light);color:var(--color-primary-dark)}
.tile-select input:focus-visible+.tile-select__label{outline:3px solid var(--color-primary);outline-offset:2px}
.tile-select__icon{font-size:1.5rem;line-height:1}

/* --- Navigation formulaire --- */
.form-nav{display:flex;align-items:center;justify-content:space-between;margin-top:var(--spacing-xl);gap:var(--spacing-md)}
.form-nav__back{display:flex;align-items:center;gap:var(--spacing-xs);color:var(--color-text-muted);font-size:.9375rem;background:0 0;border:none;cursor:pointer;padding:var(--spacing-sm) 0;transition:color var(--transition)}
.form-nav__back:hover{color:var(--color-primary)}
.form-nav__next{margin-left:auto}

/* --- Step animation --- */
.form-step{display:none;animation:fadeInStep .3s ease}
.form-step--active{display:block}
@keyframes fadeInStep{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}
.form-step__title{font-size:1.375rem;font-weight:700;margin-bottom:var(--spacing-xs)}
.form-step__subtitle{color:var(--color-text-muted);margin-bottom:var(--spacing-lg)}

/* --- Responsive --- */
@media (max-width:480px){.form-progress{gap:0}.form-progress__label{font-size:.625rem}.tile-grid{grid-template-columns:1fr 1fr}}