/*
 * adhesion.css
 * Assistant d'adhésion en 3 étapes.
 *
 * Chargé uniquement par pages/adhesion.php, via $pageStyles : inutile
 * d'alourdir main.css — servi sur toutes les pages — avec le style d'un
 * seul écran.
 *
 * Toutes les couleurs viennent de variables.css : ce fichier
 * n'introduit aucune valeur de marque en dur.
 */

/* ---------------------------------------------------------------
   Barre d'étapes
   --------------------------------------------------------------- */
.wizard-steps {
    display: flex;
    align-items: flex-start;
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    counter-reset: wizard;
}

.wizard-step {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    text-align: center;
}

/* Trait de liaison : tracé derrière les pastilles, d'un centre à l'autre. */
.wizard-step::before {
    content: "";
    position: absolute;
    top: 21px;
    left: -50%;
    width: 100%;
    height: 2px;
    background: var(--color-border);
    z-index: 0;
}
.wizard-step:first-child::before { display: none; }
.wizard-step.is-done::before { background: var(--color-primary); }

.wizard-bullet {
    position: relative;
    z-index: 1;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
    border: 2px solid var(--color-border);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.wizard-bullet svg { width: 19px; height: 19px; display: block; }

.wizard-label {
    margin-top: 0.55rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-muted);
    line-height: 1.25;
    padding: 0 0.25rem;
}

/* Étape franchie */
.wizard-step.is-done .wizard-bullet {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}
.wizard-step.is-done .wizard-label { color: var(--color-text); }

/* Étape en cours — rouge du mouvement, comme sur la maquette */
.wizard-step.is-current .wizard-bullet {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(206, 17, 38, 0.15);
}
.wizard-step.is-current .wizard-label { color: var(--color-secondary); }

.wizard-counter {
    text-align: center;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin: 0 0 1.6rem;
}
.wizard-counter strong { color: var(--color-text); font-weight: 600; }

/* ---------------------------------------------------------------
   Panneau d'étape
   --------------------------------------------------------------- */
.wizard-panel {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    padding: 0;
    margin: 0 0 1.6rem;
    overflow: hidden;
}

/* Remplace le <legend> flottant : un bandeau plein, comme la maquette. */
.wizard-panel > legend {
    display: block;
    width: 100%;
    box-sizing: border-box;
    float: left;          /* neutralise le placement natif du legend */
    padding: 1rem 1.6rem;
    margin: 0;
    background: var(--color-primary);
    color: #fff;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
}
.wizard-panel > legend + * { clear: both; }

.wizard-panel-body {
    clear: both;
    padding: 1.7rem 1.6rem 0.5rem;
}

.wizard-panel-intro {
    margin: 0 0 1.4rem;
    font-size: 0.92rem;
    color: var(--color-text-muted);
}

/* ---------------------------------------------------------------
   Champs
   --------------------------------------------------------------- */
.wizard-panel .form-row select {
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.97rem;
    background: var(--color-surface);
    color: var(--color-text);
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2355566B' stroke-width='1.8'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 15px;
    padding-right: 2.4rem;
}
.wizard-panel .form-row select:focus {
    outline: none;
    border-color: var(--color-primary);
}

/*
 * L'en-tête du site est collant. Quand le navigateur fait défiler la
 * page vers un champ (focus() après une erreur de validation, ou
 * navigation au clavier), il l'amène par défaut tout en haut de la
 * fenêtre — c'est-à-dire SOUS l'en-tête, qui le masque. scroll-margin-top
 * réserve cette hauteur.
 */
.wizard,
.wizard-panel,
.wizard-panel .form-row { scroll-margin-top: 6rem; }

.required-mark { color: var(--color-secondary); margin-left: 0.15rem; }

.field-hint {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    margin: 0.15rem 0 0;
}

/* État d'erreur — posé par adhesion.js à la validation d'une étape */
.form-row.has-error input,
.form-row.has-error select,
.form-row.has-error textarea { border-color: var(--color-danger); }

.field-error {
    display: none;
    font-size: 0.82rem;
    color: var(--color-danger);
    margin: 0.2rem 0 0;
}
.form-row.has-error .field-error { display: block; }

/* ---------------------------------------------------------------
   Étape 3 — photo d'identité
   --------------------------------------------------------------- */
.photo-field {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 1.4rem;
    align-items: start;
    margin-bottom: 1.4rem;
}

.photo-preview {
    width: 132px;
    aspect-ratio: 32 / 34;      /* proportions de l'emplacement sur la fiche */
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-alt);
    overflow: hidden;
    max-width: 100%;
}
.photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.photo-preview span {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    text-align: center;
    padding: 0 0.5rem;
}
.photo-preview.is-filled { border-style: solid; border-color: var(--color-primary); }

.photo-field input[type="file"] {
    font-size: 0.92rem;
    width: 100%;
}
.photo-field input[type="file"]::file-selector-button {
    font: inherit;
    font-weight: 600;
    padding: 0.55rem 1rem;
    margin-right: 0.8rem;
    border: 1.5px solid var(--color-primary);
    border-radius: var(--radius-sm);
    background: var(--color-primary-light);
    color: var(--color-primary);
    cursor: pointer;
}

/* ---------------------------------------------------------------
   Récapitulatif de la dernière étape
   --------------------------------------------------------------- */
.wizard-recap {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-alt);
    padding: 1.1rem 1.3rem;
    margin-bottom: 1.4rem;
}
.wizard-recap h3 {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin: 0 0 0.7rem;
    font-family: var(--font-body);
}
.wizard-recap dl {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: 0.35rem 1.2rem;
    font-size: 0.9rem;
}
.wizard-recap dt { color: var(--color-text-muted); }
.wizard-recap dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------
   Écran de confirmation
   --------------------------------------------------------------- */
.confirmation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    justify-content: center;
    margin: 1.6rem 0 1rem;
}

.confirmation-note {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    max-width: 46rem;
    margin-inline: auto;
}

@media (max-width: 480px) {
    .confirmation-actions { flex-direction: column; }
    .confirmation-actions .btn { width: 100%; justify-content: center; }
}

/* ---------------------------------------------------------------
   Navigation
   --------------------------------------------------------------- */
.wizard-nav {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.wizard-nav .btn[hidden] { display: none; }
.wizard-nav-spacer { flex: 1 1 auto; }

/* ---------------------------------------------------------------
   Sans JavaScript : toutes les étapes s'affichent à la suite.
   La classe .js-on est posée par adhesion.js dès son exécution ;
   tant qu'elle est absente, rien n'est masqué et le formulaire
   reste entièrement utilisable.
   --------------------------------------------------------------- */
.wizard.js-on .wizard-panel[hidden] { display: none; }
.wizard:not(.js-on) .wizard-steps,
.wizard:not(.js-on) .wizard-counter,
.wizard:not(.js-on) .wizard-nav .btn-step { display: none; }

/* ---------------------------------------------------------------
   Mobile
   --------------------------------------------------------------- */
@media (max-width: 760px) {
    .wizard-label { font-size: 0.7rem; }
    .wizard-bullet { width: 34px; height: 34px; }
    .wizard-bullet svg { width: 15px; height: 15px; }
    .wizard-step::before { top: 17px; }
    .wizard-panel-body { padding: 1.3rem 1.1rem 0.4rem; }
    .wizard-panel > legend { padding: 0.85rem 1.1rem; font-size: 1rem; }
}

@media (max-width: 400px) {
    /* Avec trois étapes les libellés tiennent jusqu'à ~400 px. En
       dessous, on les retire tous : la ligne « Étape 1 sur 3 — Vos
       informations », juste en dessous, nomme déjà l'étape en cours.
       Conserver le libellé sous la pastille le ferait déborder de
       l'écran pour la première et la dernière étape, sans rien
       apporter de plus. */
    .wizard-label { display: none; }
    .wizard-steps { margin-bottom: 1rem; }
    .photo-field { grid-template-columns: 1fr; }
    .photo-preview { width: 118px; }
    .wizard-nav { flex-direction: column-reverse; }
    .wizard-nav .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .wizard-bullet { transition: none; }
}