/* =========================================================================
   BODEZIA — PAGE D'INSCRIPTION (wizard 7 étapes)
   -------------------------------------------------------------------------
   Réécriture complète. Le HTML n'a pas changé : tous les sélecteurs sont
   identiques à la version précédente, aucune classe n'a été ajoutée ni
   supprimée, aucun id n'est touché. Le JS de /js/signup/ continue de
   fonctionner tel quel.

   Ce qui change
     - Les tokens de la page d'accueil sont repris à l'identique
       (violet #7441d4, gris #5c6670 et #2b3034, surfaces, bordures)
     - Une échelle de 6 tailles au lieu de 22 valeurs dispersées, avec
       un plancher à 12px pour les libellés et 15px pour le texte courant
     - Les cinq encarts internes (otp / identité / téléphone / adresse /
       confirmation) partagent enfin les mêmes règles au lieu d'être
       recopiés cinq fois
     - Les blocs dupliqués (en-tête d'étape, libellés, champs, règles de
       mot de passe étaient définis deux fois) sont fusionnés
     - Le chevron Retour est stylé et masqué sur l'étape 1
     - La barre de navigation (.arrows / #navRight) est prise en charge ici
     - Points de rupture alignés sur le projet : 991,98 / 575,98 / 1600

   Ce qui ne change pas
     - Le violet de marque et la forme générale de la carte
     - Les classes .valid / .invalid pilotées par le JS des règles de
       mot de passe, et .d-none sur les messages

   ATTENTION : les tokens sont redéclarés ici en --signup-* plutôt que
   d'utiliser les --home-* directement. home-page.css n'est pas chargé sur
   signup.php : réutiliser ses variables donnerait des valeurs vides. Les
   valeurs sont identiques, à recopier si la charte évolue.
   ========================================================================= */


/* =========================================================================
   TOKENS
   ========================================================================= */

:root {

    /* Échelle typographique — 6 paliers, base 16px */
    --signup-fs-eyebrow: 0.75rem;     /* 12px — sur-titres en capitales   */
    --signup-fs-small: 0.875rem;      /* 14px — mentions secondaires      */
    --signup-fs-body: 0.9375rem;      /* 15px — texte courant, champs     */
    --signup-fs-lead: 1rem;           /* 16px — chapô sous le titre       */
    --signup-fs-title: 1.125rem;      /* 18px — titre de carte, encarts   */
    --signup-fs-step: 1.5rem;         /* 24px — titre de l'étape          */

    /* Couleurs de texte — reprises de home-page.css, 4,5:1 minimum */
    --signup-c-heading: #2b3034;      /* 12,9:1 sur blanc */
    --signup-c-body: #5c6670;         /*  5,8:1 sur blanc */
    --signup-c-accent: #7441d4;       /*  6,0:1 sur blanc */
    --signup-c-accent-dark: #6737c7;

    /* Surfaces */
    --signup-c-page: #f4f6fa;
    --signup-c-surface: #fafbfc;
    --signup-c-surface-alt: #f7f8fb;
    --signup-c-surface-accent: #f3eefd;
    --signup-c-border: #e6e9ee;

    /* Champs */
    --signup-c-field-border: #d7dce3;
    --signup-c-field-border-hover: #c3cad3;
    --signup-c-placeholder: #6e7880;  /*  4,5:1 — voir note en fin de fichier */
    --signup-field-height: 52px;

    /* États */
    --signup-c-danger: #b42318;
    --signup-c-danger-soft: #fef3f2;
    --signup-c-danger-border: #fecdca;
    --signup-c-success: #21874e;
    --signup-c-success-soft: #f0f9f4;
    --signup-c-success-border: #cfe8da;

    /* Formes */
    --signup-radius-card: 20px;
    --signup-radius-panel: 14px;
    --signup-radius-field: 12px;

    /* Gouttière horizontale de la carte */
    --signup-gutter: 34px;
}


/* =========================================================================
   PAGE
   ========================================================================= */

#content .signup-page,
.signup-page {
    display: flex;
    align-items: center;

    min-height: 650px;

    padding: 55px 0;

    background: var(--signup-c-page);
}

#content .signup-page > .container,
.signup-page > .container {
    display: flex;
    justify-content: center;

    width: 100%;
}

#content .signup-card,
.signup-card {
    width: 100%;
    max-width: 728px;

    margin: 0 auto;

    background: #fff;

    border: 1px solid var(--signup-c-border);
    border-radius: var(--signup-radius-card);

    box-shadow:
            0 18px 50px rgba(31, 35, 48, 0.07);

    overflow: hidden;
}


/* =========================================================================
   EN-TÊTE DE CARTE
   -------------------------------------------------------------------------
   L'en-tête est du mobilier : il ne change pas d'une étape à l'autre.
   Le titre y passe à 18px pour laisser le titre d'étape (24px) dominer.
   Avant, les deux étaient à 23px et se disputaient la hiérarchie.
   ========================================================================= */

.signup-card-header {
    padding: 26px var(--signup-gutter) 22px;

    border-bottom: 1px solid var(--signup-c-border);
}

.signup-card-title {
    display: flex;
    align-items: center;

    gap: 14px;
}

.signup-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 46px;

    width: 46px;
    height: 46px;

    color: var(--signup-c-accent);
    background: var(--signup-c-surface-accent);

    border-radius: 12px;

    font-size: 1.0625rem;
}

.signup-card-title h1 {
    margin: 0;

    color: var(--signup-c-heading);

    font-size: var(--signup-fs-title);
    font-weight: 600;

    line-height: 1.3;
    letter-spacing: -0.01em;
}

.signup-card-title p {
    margin: 3px 0 0;

    color: var(--signup-c-body);

    font-size: var(--signup-fs-body);
    line-height: 1.5;
}


/* =========================================================================
   PROGRESSION
   ========================================================================= */

.signup-progress {
    margin-top: 22px;
}

.signup-progress-info {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 8px;

    color: var(--signup-c-body);

    font-size: var(--signup-fs-eyebrow);

    letter-spacing: 0.02em;
}

.signup-progress-info strong {
    color: var(--signup-c-accent);

    font-weight: 700;
}

.signup-progress-track {
    width: 100%;
    height: 6px;

    background: var(--signup-c-border);

    border-radius: 999px;

    overflow: hidden;
}

.signup-progress-bar {
    height: 100%;

    background: var(--signup-c-accent);

    border-radius: inherit;

    transition: width 0.3s ease;
}


/* =========================================================================
   CORPS DU WIZARD
   ========================================================================= */

.signup-card > .form-wizard,
.signup-card .form-wizard {
    position: relative;

    display: block;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    padding: 30px var(--signup-gutter) 26px;

    background: none;

    border: 0;
    border-radius: 0;
}

.signup-card .signupStep {
    width: 100%;
    max-width: none;

    margin: 0;
}

.signupStep {
    display: none !important;
}

.signupStep.signup-step-active {
    display: block !important;
}


/* =========================================================================
   CHEVRON RETOUR
   -------------------------------------------------------------------------
   Le div #chevron-arrow-left est un frère des sections, placé en tête du
   formulaire. Il est repositionné en bouton rond aligné sur le sur-titre,
   et masqué sur l'étape 1 où il n'y a nulle part où revenir. Le :has()
   évite d'avoir à toucher signup-core.js.

   Le thème dessine ce chevron avec des bordures et une rotation sur le div
   lui-même : les !important ci-dessous neutralisent ce dessin pour le
   refaire proprement en ::before.
   ========================================================================= */

.signup-card #chevron-arrow-left {
    position: absolute;

    top: 30px;
    left: var(--signup-gutter);

    z-index: 3;

    display: flex !important;
    align-items: center;
    justify-content: center;

    width: 34px !important;
    height: 34px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #fff !important;

    border: 1px solid var(--signup-c-border) !important;
    border-radius: 50% !important;

    transform: none !important;

    cursor: pointer;

    transition:
            border-color 0.18s ease,
            background-color 0.18s ease;
}

.signup-card #chevron-arrow-left::before {
    content: "";

    width: 8px;
    height: 8px;

    margin-left: 3px;

    border-left: 2px solid var(--signup-c-accent);
    border-bottom: 2px solid var(--signup-c-accent);

    transform: rotate(45deg);
}

.signup-card #chevron-arrow-left:hover {
    background: var(--signup-c-surface-accent) !important;

    border-color: #d8c9f3 !important;
}

/* Étape 1 : pas de retour possible */
.signup-card .form-wizard:has(.signupStep#one.signup-step-active) #chevron-arrow-left {
    display: none !important;
}


/* =========================================================================
   EN-TÊTE D'ÉTAPE
   ========================================================================= */

.signup-step-header {
    margin-bottom: 26px;
}

.signup-step-eyebrow {
    display: flex;
    align-items: center;

    min-height: 34px;

    margin-bottom: 6px;
    padding-left: 46px;      /* place du chevron */

    color: var(--signup-c-accent);

    font-size: var(--signup-fs-eyebrow);
    font-weight: 700;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Étape 1 : le chevron est masqué, on récupère la gouttière */
.signup-card .form-wizard:has(.signupStep#one.signup-step-active) .signup-step-eyebrow {
    min-height: 0;

    padding-left: 0;
}

.signup-step-header h2 {
    margin: 0 0 8px;

    max-width: 640px;

    color: var(--signup-c-heading);

    font-size: var(--signup-fs-step);
    font-weight: 600;

    line-height: 1.25;
    letter-spacing: -0.01em;
}

.signup-step-header p {
    margin: 0;

    color: var(--signup-c-body);

    font-size: var(--signup-fs-lead);
    line-height: 1.6;
}


/* =========================================================================
   ENCART D'INFORMATION
   -------------------------------------------------------------------------
   Même composant que .app-modal-note dans /css/modal.css : icône à gauche,
   texte à droite, fond teinté de l'accent. Il est redéclaré ici parce que
   les tokens --m-* de modal.css ne vivent qu'à l'intérieur d'une .app-modal.

   Le <strong> est facultatif : ajouter un titre court dans le <div> avant
   le <p> suffit, comme dans les modales.
   ========================================================================= */

.signup-note {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    margin-top: 14px;
    padding: 14px 16px;

    background: var(--signup-c-surface-accent);

    border: 1px solid #e6dcf8;
    border-radius: var(--signup-radius-field);
}

.signup-note > i {
    flex: 0 0 auto;

    margin-top: 2px;

    color: var(--signup-c-accent);

    font-size: 1.0625rem;
}

.signup-note > div {
    min-width: 0;
}

.signup-note strong {
    display: block;

    margin-bottom: 3px;

    color: var(--signup-c-heading);

    font-size: var(--signup-fs-small);
    font-weight: 600;

    line-height: 1.4;
}

.signup-note p {
    margin: 0;

    color: var(--signup-c-body);

    font-size: var(--signup-fs-small);
    line-height: 1.55;
}

.signup-note p + p {
    margin-top: 6px;
}


/* =========================================================================
   CHAMPS — RÈGLES COMMUNES
   -------------------------------------------------------------------------
   Un seul bloc pour tous les champs de toutes les étapes. Avant, chaque
   encart redéfinissait les mêmes bordures, rayons et tailles.
   ========================================================================= */

.signup-step-fields {
    display: flex;
    flex-direction: column;

    gap: 22px;
}

.signup-card .form-group {
    margin-bottom: 0;
}

.signup-card .form-label {
    display: block;

    margin-bottom: 8px;

    color: var(--signup-c-heading);

    font-size: var(--signup-fs-body);
    font-weight: 600;

    line-height: 1.4;
}

.signup-card .form-label .error,
.signup-card .form-label .required {
    color: var(--signup-c-danger);

    font-weight: 600;
}

.signup-card .form-control,
.signup-card .form-select,
.signup-card .bootstrap-select > .dropdown-toggle {
    width: 100%;
    min-height: var(--signup-field-height);

    padding: 0 16px;

    color: var(--signup-c-heading);
    background: #fff;

    border: 1px solid var(--signup-c-field-border);
    border-radius: var(--signup-radius-field);

    box-shadow: none;

    font-size: var(--signup-fs-body);

    transition:
            border-color 0.18s ease,
            box-shadow 0.18s ease;
}

.signup-card .form-control::placeholder {
    color: var(--signup-c-placeholder);

    opacity: 1;
}

.signup-card .form-control:hover,
.signup-card .form-select:hover,
.signup-card .bootstrap-select > .dropdown-toggle:hover {
    border-color: var(--signup-c-field-border-hover);
}

.signup-card .form-control:focus,
.signup-card .form-select:focus,
.signup-card .bootstrap-select.show > .dropdown-toggle,
.signup-card .bootstrap-select > .dropdown-toggle:focus {
    border-color: var(--signup-c-accent);

    box-shadow:
            0 0 0 3px rgba(116, 65, 212, 0.12);

    outline: 0;
}


/* Champ avec icône à gauche */

.signup-input-wrapper {
    position: relative;
}

.signup-input-wrapper > i {
    position: absolute;

    top: 50%;
    left: 18px;

    z-index: 2;

    width: 18px;

    color: var(--signup-c-body);

    transform: translateY(-50%);

    font-size: var(--signup-fs-body);

    text-align: center;

    pointer-events: none;
}

.signup-card .signup-input-wrapper .form-control {
    padding-left: 52px !important;
    padding-right: 16px !important;
}


/* bootstrap-select — le sélecteur de pays et l'indicatif téléphonique */

.signup-card .bootstrap-select {
    width: 100% !important;
}

.signup-card .bootstrap-select > .dropdown-toggle {
    display: flex;
    align-items: center;

    font-weight: 500;
}

.signup-card .bootstrap-select .dropdown-menu {
    border: 1px solid var(--signup-c-border);
    border-radius: var(--signup-radius-field);

    box-shadow:
            0 12px 30px rgba(31, 35, 48, 0.10);

    font-size: var(--signup-fs-body);
}

.signup-card .bootstrap-select .dropdown-menu li a {
    padding: 9px 14px;

    color: var(--signup-c-heading);
}

.signup-card .bootstrap-select .dropdown-menu li a:hover,
.signup-card .bootstrap-select .dropdown-menu li.selected a {
    color: var(--signup-c-accent);
    background: var(--signup-c-surface-accent);
}


/* Message d'erreur sous le champ */

.signup-card .error-message {
    display: block;

    min-height: 6px;
    margin-top: 6px;

    color: var(--signup-c-danger);

    font-size: var(--signup-fs-eyebrow);
    line-height: 1.4;
}

.signup-card .form-control.is-invalid,
.signup-card .form-select.is-invalid,
.signup-card select.form-control.is-invalid {
    border-color: var(--signup-c-danger-border);
}

.form-select.is-invalid,
select.form-control.is-invalid {
    background-repeat: no-repeat;
    background-position: right 2.25rem center;
    background-size: 1rem 1rem;
}


/* =========================================================================
   ENCARTS D'ÉTAPE
   -------------------------------------------------------------------------
   Les cinq encarts internes partagent la même boîte. Avant, chacun
   redéclarait padding, fond, bordure et rayon à l'identique.
   ========================================================================= */

.signup-otp-card,
.signup-identity-card,
.signup-phone-card,
.signup-address-card,
.signup-confirm-card {
    display: flex;
    flex-direction: column;

    gap: 22px;

    padding: 24px;

    background: var(--signup-c-surface-alt);

    border: 1px solid var(--signup-c-border);
    border-radius: var(--signup-radius-panel);
}


/* En-tête d'encart : icône + intitulé + précision */

.signup-otp-destination,
.signup-phone-info,
.signup-confirm-info {
    display: flex;
    align-items: center;

    gap: 13px;
}

.signup-otp-destination-icon,
.signup-phone-info-icon,
.signup-confirm-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 44px;

    width: 44px;
    height: 44px;

    color: var(--signup-c-accent);
    background: var(--signup-c-surface-accent);

    border-radius: 11px;

    font-size: var(--signup-fs-lead);
}

.signup-otp-destination > div:last-child,
.signup-phone-info > div:last-child,
.signup-confirm-info > div:last-child {
    display: flex;
    flex-direction: column;

    gap: 3px;

    min-width: 0;
}

.signup-otp-destination-label,
.signup-phone-info span,
.signup-confirm-info span {
    color: var(--signup-c-body);

    font-size: var(--signup-fs-small);
    line-height: 1.5;
}

.signup-otp-destination strong,
.signup-phone-info strong,
.signup-confirm-info strong {
    color: var(--signup-c-heading);

    font-size: var(--signup-fs-body);
    font-weight: 600;

    line-height: 1.4;

    overflow-wrap: anywhere;
}


/* Ligne d'aide en bas d'encart */

.signup-otp-help,
.signup-phone-help,
.signup-address-help {
    display: flex;
    align-items: center;

    gap: 9px;

    color: var(--signup-c-body);

    font-size: var(--signup-fs-small);
    line-height: 1.5;
}

.signup-phone-help,
.signup-address-help {
    padding-top: 16px;

    border-top: 1px solid var(--signup-c-border);
}

.signup-otp-help i,
.signup-phone-help i,
.signup-address-help i {
    flex: 0 0 auto;

    color: var(--signup-c-accent);
}


/* =========================================================================
   ÉTAPE 1 — RÈGLES DE MOT DE PASSE
   ========================================================================= */

.signup-password-rules {
    margin-top: 14px;
    padding: 16px 18px;

    background: var(--signup-c-surface-alt);

    border: 1px solid var(--signup-c-border);
    border-radius: var(--signup-radius-field);
}

.signup-password-rules-title {
    display: flex;
    align-items: center;

    gap: 9px;

    margin-bottom: 12px;

    color: var(--signup-c-heading);

    font-size: var(--signup-fs-small);
    font-weight: 600;
}

.signup-password-rules-title i {
    color: var(--signup-c-accent);
}

.signup-password-rules-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 9px 22px;
}

.signup-password-rules p {
    display: flex;
    align-items: center;

    gap: 9px;

    margin: 0;

    color: var(--signup-c-body);

    font-size: var(--signup-fs-small);
    line-height: 1.4;
}

.signup-password-rules p i {
    flex: 0 0 auto;

    color: #b3bbc4;

    font-size: 0.375rem;
}

.signup-password-rule-wide {
    grid-column: 1 / -1;
}


/* États pilotés par le JS */

.signup-password-rules p.invalid {
    color: var(--signup-c-body);
}

.signup-password-rules p.invalid i {
    color: #b3bbc4;
}

.signup-password-rules p.valid {
    color: var(--signup-c-success);
}

.signup-password-rules p.valid i {
    color: var(--signup-c-success);
}


/* =========================================================================
   ÉTAPES 2 ET 5 — CODE DE VÉRIFICATION
   ========================================================================= */

.signup-card .signup-otp-input {
    min-height: 58px !important;

    padding: 0 18px !important;

    color: var(--signup-c-heading) !important;

    font-size: 1.375rem !important;
    font-weight: 600;

    letter-spacing: 0.28em;

    text-align: center;
}

/* Le gabarit 000000 doit rester lisible comme un exemple, pas comme une
   valeur déjà saisie : c'est la seule exception au gris AA du fichier. */
.signup-card .signup-otp-input::placeholder {
    color: #aab2bb !important;

    font-weight: 500;

    letter-spacing: 0.22em;
}


/* Renvoi du code */

.signup-otp-resend {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

    gap: 10px;

    padding-top: 16px;

    border-top: 1px solid var(--signup-c-border);

    color: var(--signup-c-body);

    font-size: var(--signup-fs-small);
}

.signup-otp-resend strong {
    color: var(--signup-c-heading);

    font-weight: 600;
}

.signup-otp-resend a {
    color: var(--signup-c-accent);

    font-weight: 600;

    text-decoration: none;
}

.signup-otp-resend a:hover,
.signup-otp-resend a:focus {
    color: var(--signup-c-accent-dark);

    text-decoration: underline;
}


/* =========================================================================
   ÉTAPE 3 — IDENTITÉ
   ========================================================================= */

.signup-identity-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px 18px;
}

.signup-birthdate {
    display: flex;
    flex-direction: column;

    gap: 8px;
}

.signup-birthdate-grid {
    display: grid;

    grid-template-columns:
        0.85fr 1.25fr 1fr;

    gap: 14px;
}

/* Sous-libellés Jour / Mois / Année : ils précisent un champ déjà nommé
   par « Date de naissance », d'où le palier sur-titre. */
.signup-select-label {
    display: block;

    margin-bottom: 6px;

    color: var(--signup-c-body);

    font-size: var(--signup-fs-eyebrow);
    font-weight: 600;

    letter-spacing: 0.02em;
}


/* =========================================================================
   ÉTAPE 4 — TÉLÉPHONE
   ========================================================================= */

.signup-phone-fields {
    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    gap: 18px;
}


/* =========================================================================
   ÉTAPE 6 — ADRESSE
   ========================================================================= */

.signup-address-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px 18px;
}

.signup-address-wide {
    grid-column: 1 / -1;
}


/* =========================================================================
   ÉTAPE 7 — CONFIRMATION
   ========================================================================= */

.signup-terms {
    display: flex;
    align-items: flex-start;

    gap: 13px;

    padding: 18px;

    background: #fff;

    border: 1px solid var(--signup-c-border);
    border-radius: var(--signup-radius-field);
}

.signup-terms input {
    flex: 0 0 auto;

    width: 18px;
    height: 18px;

    margin-top: 2px;

    accent-color: var(--signup-c-accent);

    cursor: pointer;
}

.signup-terms label {
    display: flex;
    flex-direction: column;

    gap: 5px;

    margin: 0;

    cursor: pointer;
}

.signup-terms-title {
    color: var(--signup-c-heading);

    font-size: var(--signup-fs-body);
    font-weight: 600;
}

.signup-terms-text {
    color: var(--signup-c-body);

    font-size: var(--signup-fs-small);
    line-height: 1.6;
}

.signup-terms a {
    color: var(--signup-c-accent);

    font-weight: 600;

    text-decoration: none;
}

.signup-terms a:hover,
.signup-terms a:focus {
    color: var(--signup-c-accent-dark);

    text-decoration: underline;
}

.signup-card .signup-confirm-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: var(--signup-field-height);

    padding: 12px 24px;

    color: #fff !important;
    background: var(--signup-c-accent) !important;

    border: 0 !important;
    border-radius: 999px !important;

    box-shadow:
            0 10px 22px rgba(116, 65, 212, 0.20);

    font-size: var(--signup-fs-body);
    font-weight: 600;

    transition: background-color 0.18s ease;
}

.signup-card .signup-confirm-button:hover,
.signup-card .signup-confirm-button:focus {
    background: var(--signup-c-accent-dark) !important;
}

.group-seven #terms-error {
    margin-top: -12px;
}


/* =========================================================================
   NAVIGATION DU WIZARD
   ========================================================================= */

.signup-card .arrows {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;

    gap: 16px;

    margin-top: 26px;
}

.signup-card #stepInfo {
    margin-right: auto;

    color: var(--signup-c-body);

    font-size: var(--signup-fs-small);
}

.signup-card #stepInfo:empty {
    display: none;
}

.signup-card #navRight {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    min-height: 48px;

    padding: 12px 26px;

    color: #fff !important;
    background: var(--signup-c-accent) !important;

    border: 0 !important;
    border-radius: 999px !important;

    box-shadow:
            0 10px 22px rgba(116, 65, 212, 0.20);

    font-size: var(--signup-fs-body);
    font-weight: 600;

    transition: background-color 0.18s ease;
}

.signup-card #navRight:hover,
.signup-card #navRight:focus {
    background: var(--signup-c-accent-dark) !important;
}

.signup-card #navRight .arrow-right {
    font-size: var(--signup-fs-lead);
    line-height: 1;
}

/* L'étape 2 rapproche sa navigation : l'encart OTP est court */
.group-two + .arrows {
    margin-top: 18px;
}


/* =========================================================================
   MESSAGES
   ========================================================================= */

.signup-success-message {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    margin-bottom: 22px;
    padding: 14px 16px;

    color: var(--signup-c-success);
    background: var(--signup-c-success-soft);

    border: 1px solid var(--signup-c-success-border);
    border-radius: var(--signup-radius-field);

    font-size: var(--signup-fs-small);
    line-height: 1.5;
}

.signup-success-message > i {
    flex: 0 0 auto;

    margin-top: 2px;

    color: var(--signup-c-success);
}

.signup-success-message > div {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.signup-success-message strong {
    color: var(--signup-c-success);

    font-weight: 600;
}

.signup-success-message span {
    color: var(--signup-c-body);
}

.signup-global-error {
    margin-top: 18px;
    padding: 13px 15px;

    color: var(--signup-c-danger);
    background: var(--signup-c-danger-soft);

    border: 1px solid var(--signup-c-danger-border);
    border-radius: var(--signup-radius-field);

    font-size: var(--signup-fs-small);
    line-height: 1.5;
}

.signup-mobile-debug {
    margin: 0;
    padding: 12px 14px;

    color: var(--signup-c-accent);
    background: var(--signup-c-surface-accent);

    border: 1px dashed #d1bff2;
    border-radius: var(--signup-radius-field);

    font-size: var(--signup-fs-small);
    font-weight: 600;
}

.signup-success-message.d-none,
.signup-global-error.d-none,
.signup-mobile-debug.d-none {
    display: none !important;
}


/* =========================================================================
   PIED DE CARTE
   ========================================================================= */

.signup-login {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 6px;

    padding: 20px var(--signup-gutter);

    border-top: 1px solid var(--signup-c-border);

    color: var(--signup-c-body);

    font-size: var(--signup-fs-body);
}

.signup-login a {
    color: var(--signup-c-accent);

    font-weight: 600;

    text-decoration: none;
}

.signup-login a:hover,
.signup-login a:focus {
    color: var(--signup-c-accent-dark);

    text-decoration: underline;
}


/* =========================================================================
   ACCESSIBILITÉ
   ========================================================================= */

.signup-card a:focus-visible,
.signup-card button:focus-visible,
.signup-card input:focus-visible,
.signup-card select:focus-visible,
.signup-card #chevron-arrow-left:focus-visible {
    outline: 2px solid var(--signup-c-accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

    .signup-progress-bar,
    .signup-card .form-control,
    .signup-card #navRight,
    .signup-card #chevron-arrow-left,
    .signup-card .signup-confirm-button {
        transition: none !important;
    }

}


/* =========================================================================
   TABLETTE — point de rupture du projet
   ========================================================================= */

@media (max-width: 991.98px) {

    #content .signup-page,
    .signup-page {
        padding: 40px 0;
    }

    #content .signup-page > .container,
    .signup-page > .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .signup-identity-grid,
    .signup-address-grid,
    .signup-phone-fields {
        grid-template-columns: 1fr;
    }

    .signup-address-wide {
        grid-column: auto;
    }

}


/* =========================================================================
   MOBILE
   ========================================================================= */

@media (max-width: 575.98px) {

    :root {
        --signup-fs-step: 1.25rem;   /* 20px */
        --signup-fs-lead: 0.9375rem; /* 15px */
        --signup-gutter: 20px;
    }

    /* Pas de padding horizontal ici : le .container de Bootstrap pose déjà
       sa gouttière et les deux s'additionnaient. */
    #content .signup-page,
    .signup-page {
        display: block;

        min-height: 0;

        padding: 24px 0 44px;
    }

    #content .signup-page > .container,
    .signup-page > .container {
        max-width: 100%;

        padding-left: 12px;
        padding-right: 12px;
    }

    #content .signup-card,
    .signup-card {
        border-radius: 16px;
    }

    .signup-card-header {
        padding: 22px var(--signup-gutter) 18px;
    }

    .signup-card-title {
        align-items: flex-start;

        gap: 12px;
    }

    .signup-icon {
        flex: 0 0 42px;

        width: 42px;
        height: 42px;
    }

    .signup-card > .form-wizard,
    .signup-card .form-wizard {
        padding: 24px var(--signup-gutter);
    }

    .signup-card #chevron-arrow-left {
        top: 24px;
        left: var(--signup-gutter);
    }

    .signup-step-header {
        margin-bottom: 22px;
    }

    .signup-note {
        gap: 10px;

        padding: 12px 14px;
    }

    .signup-otp-card,
    .signup-identity-card,
    .signup-phone-card,
    .signup-address-card,
    .signup-confirm-card {
        gap: 20px;

        padding: 18px;
    }

    .signup-password-rules-grid {
        grid-template-columns: 1fr;
    }

    .signup-password-rule-wide {
        grid-column: auto;
    }

    .signup-birthdate-grid {
        grid-template-columns: 1fr;
    }

    .signup-card .signup-otp-input {
        font-size: 1.1875rem !important;

        letter-spacing: 0.2em;
    }

    .signup-otp-resend {
        align-items: flex-start;
        flex-direction: column;
    }

    .signup-terms {
        padding: 15px;
    }

    .signup-card .arrows {
        justify-content: stretch;
    }

    .signup-card #navRight {
        width: 100%;
    }

    .signup-login {
        padding: 18px var(--signup-gutter);
    }

}


/* =========================================================================
   GRAND ÉCRAN — palier du projet
   ========================================================================= */

@media (min-width: 1600px) {

    :root {
        --signup-fs-eyebrow: 0.8125rem; /* 13px */
        --signup-fs-body: 1rem;         /* 16px */
        --signup-fs-lead: 1.0625rem;    /* 17px */
        --signup-fs-title: 1.1875rem;   /* 19px */
        --signup-fs-step: 1.75rem;      /* 28px */

        --signup-field-height: 56px;
    }

    #content .signup-card,
    .signup-card {
        max-width: 820px;
    }

}


/* =========================================================================
   NOTE — LISIBILITÉ DES GABARITS DE SAISIE
   -------------------------------------------------------------------------
   --signup-c-placeholder vaut #6e7880, soit 4,5:1 sur blanc. C'est plus
   sombre que le #b1bac0 précédent (2,0:1), qui était illisible. Si le
   rendu paraît trop proche d'une valeur réellement saisie, la seule
   valeur à changer est ce token : #7d868f donne 3,8:1, en dessous de AA.
   ========================================================================= */