/* =====================================================================
   Studicap — Parcours d'inscription parent
   Construit sur le design system "studicap.css" (golden ratio, container
   queries, fluid type, color-mix). Cette feuille ajoute uniquement les
   composants spécifiques au wizard (stepper, cartes produit, OTP).
   ===================================================================== */

/* -------------------------- Stepper / progress -------------------------- */
.stepper {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}
.stepper__step {
    flex: 1;
    height: 6px;
    border-radius: var(--radius-full);
    background: color-mix(in oklab, var(--color-border) 60%, transparent);
    transition: background var(--t-base);
}
.stepper__step.is-current {
    background: linear-gradient(90deg,
        var(--studi-blue) 0%,
        var(--studi-gold) 100%);
}
.stepper__step.is-done {
    background: var(--studi-blue);
}
.stepper__label {
    font-size: var(--fs-300);
    color: var(--color-text-muted);
    margin: 0 0 var(--sp-1);
    letter-spacing: .02em;
    text-transform: uppercase;
    font-weight: 600;
}

/* -------------------------- Grid champs cote-a-cote -------------------- */
.grid-2 {
    display: grid;
    gap: var(--sp-4);
}
@container auth (min-width: 36rem) {
    .grid-2 { grid-template-columns: 1fr 1fr; }

    /* Champs cote-a-cote dont les libelles n'ont pas le meme nombre de
       lignes (ex. « Mot de passe » vs « Confirmer le mot de passe » qui
       passe sur 2 lignes) : on reserve aux libelles une hauteur de 2 lignes
       pour que les deux champs demarrent exactement a la meme position.
       Le libelle est aligne en bas, collant a son champ. */
    .grid-2--aligned .field__label {
        min-height: 2.4em;
        line-height: 1.2;
        display: flex;
        align-items: flex-end;
    }
    /* Les champs occupent toute la hauteur de leur cellule et poussent
       le hint eventuel en bas, sans decaler la zone de saisie. */
    .grid-2--aligned .field { align-content: start; }
}

/* -------------------------- Selects natifs -------------------- */
.field__control select {
    flex: 1;
    border: 0;
    background: transparent;
    padding: var(--sp-3) var(--sp-2);
    font: inherit;
    color: var(--color-text);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    /* Petite flèche en pur CSS pour rester dans le CSP strict */
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 18px) center, calc(100% - 12px) center;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: var(--sp-8);
    color: var(--color-text);
}

/* -------------------------- Actions de l'espace parent -------------------- */
.space-actions {
    display: grid;
    gap: var(--sp-3);
}
@container auth (min-width: 36rem) {
    .space-actions { grid-template-columns: 1fr 1fr; }
}
/* Repli hors container-query : largeur d'écran classique. */
@media (min-width: 36rem) {
    .space-actions { grid-template-columns: 1fr 1fr; }
}

/* -------------------------- Champ OTP (code 6 chiffres) -------------------- */
.otp-field {
    display: grid;
    gap: var(--sp-3);
    place-items: center;
}
.otp-field input {
    width: 100%;
    max-width: 20rem;
    font: 600 var(--fs-800) / 1 var(--font-display);
    letter-spacing: .6em;
    text-align: center;
    padding: var(--sp-4) var(--sp-3);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--studi-blue);
    text-indent: .3em; /* compense le letter-spacing */
}
.otp-field input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px var(--color-focus-ring);
    outline: none;
}

/* -------------------------- Boutons secondaires -------------------- */
.btn--link {
    background: transparent;
    border: 0;
    color: var(--color-primary);
    padding: var(--sp-2);
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.btn--link:hover { color: var(--color-primary-hover); }

.btn--ghost {
    background: transparent;
    border: 1.5px solid var(--color-border);
    color: var(--color-text);
    padding: var(--sp-3) var(--sp-5);
    border-radius: var(--radius-md);
    font: 600 var(--fs-400) var(--font-sans);
    cursor: pointer;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.btn--ghost:hover {
    border-color: var(--color-primary);
    background: color-mix(in oklab, var(--color-primary) 6%, transparent);
}

/* -------------------------- Cartes produit -------------------- */
.offer-grid {
    display: grid;
    gap: var(--sp-4);
}
@container auth (min-width: 42rem) {
    .offer-grid { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
}

.offer-card {
    display: grid;
    grid-template-rows: auto 1fr auto auto;
    gap: var(--sp-3);
    padding: var(--sp-5);
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
    transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.offer-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-2);
    transform: translateY(-2px);
}
.offer-card__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-600);
    color: var(--studi-blue);
}
/* Sélecteur du lieu de scolarisation, en tête de l'étape « choix de l'offre ».
   Le bouton reste sur la même ligne que le select tant que la place le permet,
   puis passe dessous — pas de media query, le wrap suffit. */
.schooling-picker {
    margin-bottom: var(--sp-6);
}
.schooling-picker__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
}
.schooling-picker__row .field__control {
    flex: 1 1 14rem;
}

/* Valeur non modifiable affichée à la place d'un champ (pays de scolarisation
   à la qualification : arrêté à l'achat). Volontairement distincte d'un input
   `disabled`, qui suggérerait un champ temporairement inactif. */
.field__readonly {
    margin: 0;
    font-size: var(--fs-500);
    font-weight: 600;
    color: var(--color-text);
}

/* Public visé par l'offre : badges « classe » et « tranche d'âge ».
   Rangée qui passe à la ligne plutôt que de déborder sur mobile. */
.offer-card__target {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin: 0;
}
@media (prefers-color-scheme: dark) {
    /* `.tag--soft` est défini en bleu marine sur fond quasi transparent : c'est
       illisible sur la surface sombre. Correction volontairement LOCALE à la
       fiche offre — la classe reste à reprendre globalement, elle a le même
       problème sur les écrans d'administration. */
    .offer-card__target .tag--soft {
        background: color-mix(in oklab, var(--studi-gold) 18%, transparent);
        color: var(--studi-gold);
    }
}
.offer-card__desc {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--fs-400);
}
.offer-card__price {
    font-family: var(--font-display);
    font-size: var(--fs-700);
    color: var(--studi-blue);
    font-weight: 600;
}
.offer-card__price small {
    font-family: var(--font-sans);
    font-size: var(--fs-400);
    color: var(--color-text-muted);
    font-weight: 400;
    margin-left: var(--sp-2);
}
.offer-card form { margin: 0; }

/* -------------------------- Récapitulatif paiement -------------------- */
.summary {
    background: color-mix(in oklab, var(--studi-blue-100) 40%, var(--color-surface));
    border: 1.5px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    display: grid;
    gap: var(--sp-3);
}
.summary__row {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-4);
    font-size: var(--fs-400);
}
.summary__row--total {
    padding-top: var(--sp-3);
    border-top: 1px solid var(--color-border);
    font-weight: 600;
    color: var(--studi-blue);
    font-size: var(--fs-500);
}

/* -------------------------- Badges statut -------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--radius-full);
    font-size: var(--fs-300);
    font-weight: 600;
    letter-spacing: .02em;
}
.badge--paid    { background: var(--studi-green-bg); color: var(--studi-green); }
.badge--pending { background: color-mix(in oklab, var(--studi-gold) 25%, var(--color-surface));
                  color: var(--studi-blue-700); }
.badge--failed,
.badge--cancelled,
.badge--refunded { background: var(--studi-red-bg); color: var(--studi-red); }
.badge__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* -------------------------- Page espace parent -------------------- */
.space-page {
    min-height: 100dvh;
    background: var(--color-bg);
    padding: var(--sp-6) var(--sp-4);
}
.space-shell {
    max-width: 56rem;
    margin: 0 auto;
    display: grid;
    gap: var(--sp-6);
}
.space-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--sp-6);
    box-shadow: var(--shadow-1);
    display: grid;
    gap: var(--sp-3);
}
.space-card__title {
    font-family: var(--font-display);
    font-size: var(--fs-600);
    color: var(--studi-blue);
    margin: 0;
}
.space-card__meta {
    color: var(--color-text-muted);
    font-size: var(--fs-300);
}

/* Petit ajustement pour l'alerte info (renvoi de code) */
.alert--info {
    background: color-mix(in oklab, var(--studi-blue) 8%, var(--color-surface));
    border: 1px solid color-mix(in oklab, var(--studi-blue) 30%, var(--color-surface));
    color: var(--studi-blue);
}

/* -------------------------- Code promo (toggle + form) -------------------- */
.promo-toggle {
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--sp-3) var(--sp-4);
}
.promo-toggle > summary {
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    color: var(--studi-blue);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) 0;
}
.promo-toggle > summary::-webkit-details-marker { display: none; }
.promo-toggle > summary::before {
    content: "%";
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--studi-gold);
    color: var(--studi-blue);
    font-weight: 700;
    font-size: var(--fs-300);
}
.promo-form {
    margin-top: var(--sp-3);
    display: grid;
    gap: var(--sp-3);
}
.promo-form .field__control input {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
}

/* -------------------------- Criteres de mot de passe -------------------- */
/* Liste rendue par le serveur (libelles i18n) dont /js/password-rules.js ne
   change que l'etat : is-ok / is-ko, neutre par defaut. Sans JavaScript,
   tout reste neutre et la liste tient lieu de rappel de la politique. */
.pwd-rules {
    /* Tokens locaux : le vert et le rouge de la charte manquent de contraste
       sur le fond marine du theme sombre, on les eclaircit la-bas. */
    --pwd-ok:   var(--studi-green);
    --pwd-ko:   var(--studi-red);
    --pwd-idle: var(--color-text-muted);

    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    background: color-mix(in oklab, var(--color-surface) 96%, var(--studi-blue));
    transition: border-color var(--t-base);
}
@media (prefers-color-scheme: dark) {
    .pwd-rules {
        --pwd-ok: #5fd07f;
        --pwd-ko: #ff9a8f;
    }
}
/* Tous les criteres satisfaits : la bordure confirme, sans crier. */
.pwd-rules.is-complete {
    border-color: color-mix(in oklab, var(--pwd-ok) 45%, transparent);
}

.pwd-rules__legend {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-300);
    color: var(--color-text-muted);
}

.pwd-rules__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sp-1) var(--sp-4);
}
@container auth (min-width: 36rem) {
    .pwd-rules__list { grid-template-columns: 1fr 1fr; }
    /* « Les deux saisies sont identiques » conclut la liste : on lui laisse
       la largeur entiere plutot qu'une demi-colonne orpheline. */
    .pwd-rule[data-rule="match"] { grid-column: 1 / -1; }
}

.pwd-rule {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    font-size: var(--fs-300);
    color: var(--pwd-idle);
    transition: color var(--t-fast);
}
.pwd-rule.is-ok { color: var(--pwd-ok); }
.pwd-rule.is-ko { color: var(--pwd-ko); }

/* Puce d'etat. Le glyphe porte l'information au meme titre que la couleur :
   un ecran monochrome ou un daltonisme ne doivent pas rendre la liste
   illisible (WCAG 1.4.1). */
.pwd-rule__mark {
    flex: 0 0 auto;
    width: 1.05em;
    text-align: center;
    font-weight: 700;
    line-height: 1;
}
.pwd-rule__mark::before { content: "\00B7"; }          /* neutre  · */
.pwd-rule.is-ok  .pwd-rule__mark::before { content: "\2713"; }  /* ok  ✓ */
.pwd-rule.is-ko  .pwd-rule__mark::before { content: "\2715"; }  /* ko  ✕ */

.pwd-rule__text { min-width: 0; }

/* Etat lu par les lecteurs d'ecran, jamais affiche. */
.pwd-rules__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .pwd-rules,
    .pwd-rule { transition: none; }
}