/* ═══════════════════════════════════════════════════════════════
   BURIDA AUTH — Design System
   Thème : Corporate africain — épuré, premium, AWWWARDS-grade
   ═══════════════════════════════════════════════════════════════ */

/* ── Fonts ─────────────────────────────────────────────────────
   Inter AUTO-HÉBERGÉE, famille unique du site (cf. --font-sans dans
   tokens.css, chargé par tailwind-auth.css juste avant cette feuille).
   Remplace Syne + DM Sans servies par Google Fonts : deux origines tierces
   et une feuille bloquante en moins sur le chemin critique de l'auth, et
   plus de rupture typographique avec le reste du site. Le titrage se
   distingue par la graisse et l'interlettrage négatif (même traitement
   « display » que .bx-font-display), jamais par un changement de famille. */
:root {
    font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
}

/* ── Jetons — clair ─────────────────────────────────────────────
   Cette feuille est SERVIE TELLE QUELLE (hors build Vite/Tailwind), mais
   le layout auth charge `assets/css/tailwind.output.css` AVANT elle : les
   jetons du thème BURIDA (resources/css/tokens.css) sont donc disponibles
   ici. On ne redéclare plus une palette parallèle, on les consomme.

   ⚠️ Les jetons du thème qui portent DÉJÀ leur valeur sombre
   (--bur-text-*, --bur-border*, --bur-status-*, --bur-focus-ring) ne sont
   volontairement PAS repris dans le bloc sombre plus bas.

   ⚠️ Les noms `--shadow-*` et `--radius-*` sont devenus `--auth-*` : sinon
   ils ÉCRASAIENT les jetons homonymes du thème pour toute la page. */
:root,
[data-theme="light"] {
    --primary:        rgb(var(--burida-brand-500));   /* orange du logo : filets, icônes */
    --primary-dark:   rgb(var(--burida-brand-600));   /* « ember » : texte sur BLANC */
    --primary-ink:    rgb(var(--burida-brand-700));   /* texte sur VOILE orange */
    --primary-light:  rgb(var(--burida-brand-200));
    --primary-glow:   rgb(var(--burida-brand-500) / .18);

    --bg:             rgb(var(--burida-silver-50));
    --bg-card:        rgba(255,255,255,.92);
    --bg-input:       var(--bur-surface);
    /* Le panneau porte du texte BLANC : la rampe démarre donc au 600
       (4,6:1) — en brand-500 le paragraphe tombait à 2,4:1. */
    --bg-panel:       linear-gradient(145deg,
                          rgb(var(--burida-brand-600)) 0%,
                          rgb(var(--burida-brand-700)) 60%,
                          rgb(var(--burida-brand-800)) 100%);

    --text:           var(--bur-text-primary);
    --text-muted:     var(--bur-text-muted);
    --text-inv:       #FFFFFF;

    --border:         var(--bur-border);
    --border-input:   var(--bur-border-strong);
    --border-focus:   var(--bur-focus-ring);

    --error:          var(--bur-status-danger-text);
    --success:        var(--bur-status-success-text);
    --warning:        var(--bur-status-warning-text);

    /* ⚠️ Ces trois jetons étaient définis PAR EUX-MÊMES (`--auth-shadow-md:
       var(--auth-shadow-md)`) : une variable auto-référente est invalide au
       calcul, donc les `box-shadow: var(--auth-shadow-*)` de la carte, du
       dropdown de langue, des boutons flottants et de la modale ne peignaient
       RIEN. Ils pointent désormais sur les jetons du thème (tokens.css), ce
       qui était manifestement l'intention du renommage. */
    --auth-shadow-sm:    var(--shadow-sm);
    --auth-shadow-md:    var(--shadow-md);
    --auth-shadow-lg:    var(--shadow-lg);
    --auth-shadow-brand: 0 8px 30px rgb(var(--burida-brand-500) / .35);

    /* Rayons propres à l'auth (plus serrés que ceux du thème) : renommés
       pour ne pas masquer --radius-* côté thème. Valeurs inchangées. */
    --auth-radius-sm: 8px;
    --auth-radius-md: 14px;
    --auth-radius-lg: 20px;
    --auth-radius-xl: 28px;

    --orb1-color:     rgb(var(--burida-brand-500) / .12);
    --orb2-color:     rgb(var(--burida-brand-600) / .08);
    --orb3-color:     rgb(var(--burida-warning-300) / .07);
    --grid-color:     rgb(var(--burida-silver-950) / .04);
}

/* ── Jetons — sombre ────────────────────────────────────────────
   Ne restent ici que les valeurs SANS équivalent direct dans le thème :
   surfaces translucides, dégradé du panneau, halos. Texte, bordures,
   statuts et anneau de focus basculent seuls via les jetons --bur-*. */
[data-theme="dark"] {
    --primary:        rgb(var(--burida-brand-400));
    --primary-dark:   rgb(var(--burida-brand-500));
    --primary-ink:    rgb(var(--burida-brand-300));
    --primary-light:  rgb(var(--burida-brand-900));
    --primary-glow:   rgb(var(--burida-brand-400) / .2);

    --bg:             rgb(var(--burida-silver-950));
    --bg-card:        rgb(var(--burida-silver-900) / .96);
    --bg-input:       rgb(var(--burida-silver-800) / .9);
    --bg-panel:       linear-gradient(145deg,
                          rgb(var(--burida-brand-700)) 0%,
                          rgb(var(--burida-brand-800)) 60%,
                          rgb(var(--burida-brand-900)) 100%);

    --auth-shadow-brand: 0 8px 30px rgb(var(--burida-brand-400) / .25);

    --orb1-color:     rgb(var(--burida-brand-500) / .08);
    --orb2-color:     rgb(var(--burida-brand-600) / .06);
    --orb3-color:     rgb(var(--burida-brand-900) / .1);
    --grid-color:     rgba(255,255,255,.03);
}

/* ── Reset & Base ───────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    background-color: var(--bg);
    color: var(--text);
    min-height: 100dvh;
    transition: background-color .35s ease, color .35s ease;
    overflow-x: hidden;
}

/* ── Page Wrapper ───────────────────────────────────────────── */
.page-wrapper {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5rem 1rem 2rem;
}

/* ── Background System ──────────────────────────────────────── */
.page-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    will-change: transform;
}
.bg-orb-1 {
    width: 600px; height: 600px;
    top: -200px; left: -150px;
    background: var(--orb1-color);
    animation: orbFloat1 25s ease-in-out infinite;
}
.bg-orb-2 {
    width: 400px; height: 400px;
    bottom: -100px; right: -100px;
    background: var(--orb2-color);
    animation: orbFloat2 20s ease-in-out infinite;
}
.bg-orb-3 {
    width: 300px; height: 300px;
    top: 50%; left: 60%;
    background: var(--orb3-color);
    animation: orbFloat3 18s ease-in-out infinite;
}
.bg-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--grid-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
    background-size: 48px 48px;
}

@keyframes orbFloat1 {
    0%,100% { transform: translate(0,0) scale(1); }
    33%      { transform: translate(40px,-30px) scale(1.05); }
    66%      { transform: translate(-20px,20px) scale(.95); }
}
@keyframes orbFloat2 {
    0%,100% { transform: translate(0,0) scale(1); }
    50%      { transform: translate(-30px,-40px) scale(1.08); }
}
@keyframes orbFloat3 {
    0%,100% { transform: translate(-50%,-50%) scale(1); }
    50%      { transform: translate(calc(-50% + 25px),calc(-50% - 20px)) scale(1.1); }
}

/* ── Float Buttons ──────────────────────────────────────────── */
.auth-theme-toggle,
.auth-home-toggle {
    position: fixed;
    top: 18px;
    z-index: 100;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--auth-shadow-md);
    transition: transform .2s ease, box-shadow .2s ease, background .35s ease;
    text-decoration: none;
    font-size: .9rem;
    backdrop-filter: blur(12px);
}
.auth-theme-toggle { right: 18px; }
.auth-home-toggle  {
    left: 50%;
    transform: translateX(-50%);
}
/* Couleurs/ombre mutualisées, mais le `transform` est déclaré PAR bouton.
   ⚠️ Le bouton « accueil » est centré par `transform: translateX(-50%)` :
   une règle de survol partagée qui repose le `transform` sans reprendre ce
   recentrage le décale d'une demi-largeur vers la droite. Combiné au
   `scale`, le mouvement se lisait comme un étirement horizontal du bouton
   au survol (et un retour brusque à la sortie). */
.auth-theme-toggle:hover,
.auth-home-toggle:hover {
    box-shadow: var(--auth-shadow-lg);
    background: var(--primary);
    color: white;
    border-color: transparent;
}
.auth-theme-toggle:hover {
    transform: scale(1.08) translateY(-1px);
}
.auth-home-toggle:hover {
    transform: translateX(-50%) scale(1.08) translateY(-1px);
}

/* ── Auth Card ──────────────────────────────────────────────── */
.auth-card {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 880px;
    display: flex;
    border-radius: var(--auth-radius-xl);
    overflow: hidden;
    box-shadow: var(--auth-shadow-lg);
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    animation: cardEntrance .6s cubic-bezier(.22,.68,0,1.2) both;
}

@keyframes cardEntrance {
    from { opacity: 0; transform: translateY(24px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Panel (left illustration) ──────────────────────────────── */
.auth-panel {
    width: 40%;
    min-width: 280px;
    background: var(--bg-panel);
    color: #fff;   /* fond orange : l'encre héritée y tombait à 3,9:1 */
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.panel-noise {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
    opacity: .4;
    pointer-events: none;
}

.panel-pattern {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.08)' stroke-width='1'%3E%3Crect x='10' y='10' width='40' height='40'/%3E%3Cline x1='30' y1='10' x2='30' y2='50'/%3E%3Cline x1='10' y1='30' x2='50' y2='30'/%3E%3Ccircle cx='30' cy='30' r='12'/%3E%3C/g%3E%3C/svg%3E");
    opacity: 1;
}

.panel-top {
    position: relative;
    z-index: 2;
}

.panel-logo-area {
    margin-bottom: 2rem;
}

.panel-logo-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 50px;
    padding: .4rem 1rem .4rem .4rem;
    font-family: var(--font-display, 'Inter', system-ui, sans-serif);
    font-weight: 700;
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: white;
}

.panel-logo-dot {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .65rem;
}

.panel-title {
    font-family: var(--font-display, 'Inter', system-ui, sans-serif);
    font-weight: 800;
    font-size: 1.75rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: white;
    margin-bottom: .75rem;
}

.panel-subtitle {
    font-size: .9rem;
    color: #fff;   /* .75 tombait à 3,3:1 sur brand-600 */
    line-height: 1.5;
}

.panel-features {
    position: relative;
    z-index: 2;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.panel-feature {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: var(--auth-radius-md);
    padding: .75rem 1rem;
    backdrop-filter: blur(8px);
    transition: background .2s ease;
}

.panel-feature:hover {
    background: rgba(255,255,255,.18);
}

.panel-feature-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: rgba(255,255,255,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    color: white;
    flex-shrink: 0;
}

.panel-feature-text {
    font-size: .82rem;
    color: rgba(255,255,255,.9);
    font-weight: 500;
}

/* Progress indicators inside panel */
.panel-progress {
    position: relative;
    z-index: 2;
    margin-top: 1.5rem;
}

.panel-steps {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: .6rem;
}

.panel-step-dot {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: 700;
    font-family: var(--font-display, 'Inter', system-ui, sans-serif);
    transition: all .3s ease;
    border: 2px solid rgba(255,255,255,.3);
    color: rgba(255,255,255,.6);
    background: rgba(255,255,255,.1);
    flex-shrink: 0;
}

.panel-step-dot.active {
    background: white;
    color: var(--primary);
    border-color: white;
    box-shadow: 0 0 0 4px rgba(255,255,255,.2);
}

.panel-step-dot.completed {
    background: rgb(var(--burida-success-500) / .9);
    border-color: rgb(var(--burida-success-500) / .9);
    color: white;
}

.panel-step-line {
    flex: 1;
    height: 2px;
    background: rgba(255,255,255,.2);
    margin: 0 4px;
    border-radius: 2px;
    overflow: hidden;
}

.panel-step-line-fill {
    height: 100%;
    background: white;
    border-radius: 2px;
    transition: width .5s ease;
}

.panel-step-labels {
    display: flex;
    justify-content: space-between;
    margin-top: .35rem;
}

.panel-step-label {
    font-size: .65rem;
    color: rgba(255,255,255,.6);
    font-weight: 500;
    text-align: center;
    flex: 1;
}

.panel-step-bar {
    width: 100%;
    height: 3px;
    background: rgba(255,255,255,.2);
    border-radius: 2px;
    margin-top: .75rem;
    overflow: hidden;
}

.panel-step-bar-fill {
    height: 100%;
    background: white;
    border-radius: 2px;
    transition: width .5s cubic-bezier(.4,0,.2,1);
}

/* ── Form Section ───────────────────────────────────────────── */
.auth-form-section {
    flex: 1;
    padding: 2.5rem 2.25rem;
    background: var(--bg-card);
    overflow-y: auto;
    max-height: 90vh;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    transition: background .35s ease;
}

.auth-form-section::-webkit-scrollbar { width: 4px; }
.auth-form-section::-webkit-scrollbar-track { background: transparent; }
.auth-form-section::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* Logo area */
.form-logo {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.75rem;
}

.form-logo-img {
    height: 36px;
    width: auto;
    object-fit: contain;
}

.form-heading {
    font-family: var(--font-display, 'Inter', system-ui, sans-serif);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    color: var(--text);
    margin-bottom: .35rem;
    transition: color .35s ease;
}

.form-subheading {
    font-size: .875rem;
    color: var(--text-muted);
    margin-bottom: 1.75rem;
    transition: color .35s ease;
}

/* ── Form Fields ────────────────────────────────────────────── */
.field-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .875rem;
}

.field-wrap {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    /* Indispensable : sans min-width:0, un enfant de grille (.field-row) ou de
       flex ne peut pas rétrécir sous la largeur de son contenu. Un Select2 en
       white-space:nowrap force alors la grille à déborder → scroll horizontal. */
    min-width: 0;
}

/* Le conteneur Select2 ne doit jamais dépasser sa colonne */
.select2-container { max-width: 100%; }

.field-label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: color .35s ease;
}

/* Conteneur de l'input + icône */
.field-inner {
    position: relative;
    display: flex;
    align-items: center;
}

.field-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: .8rem;
    pointer-events: none;
    z-index: 2;
    transition: color .2s ease;
}

.field-input,
.field-select {
    width: 100%;
    height: 44px;
    padding: 0 1rem 0 2.75rem;  /* espace pour l'icône */
    border-radius: var(--auth-radius-sm);
    border: 1.5px solid var(--border-input);
    background: var(--bg-input);
    color: var(--text);
    font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
    font-size: .875rem;
    line-height: 1.4;            /* meilleur centrage vertical du texte */
    transition: border-color .2s ease, box-shadow .2s ease, background .35s ease, color .35s ease;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.field-input:focus,
.field-select:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

.field-input:focus ~ .field-icon,
.field-inner:focus-within .field-icon {
    color: var(--primary);
}

/* Réserve la place du bouton « afficher le mot de passe » (44px depuis qu'il
   respecte la cible tactile) : sans ça, un mot de passe long passait SOUS
   l'icône. `:has()` évite d'ajouter une classe modificatrice dans les cinq
   vues ; sur un navigateur qui ne le supporte pas, on retombe simplement sur
   l'ancien padding. */
.field-inner:has(.field-eye) .field-input {
    padding-right: 3.25rem;
}

.field-input.is-error {
    border-color: var(--error);
}

.field-input.is-error:focus {
    box-shadow: 0 0 0 3px rgb(var(--burida-danger-500) / .15);
}

/* Password toggle */
/* Cible tactile 44x44 (WCAG 2.5.8 / recommandation iOS-Android) : le bouton
   ne faisait que ~20px de côté. On garde l'icône à sa taille visuelle et on
   élargit la zone cliquable, sans décaler le champ (`right: 4px` compense
   l'élargissement pour que l'icône reste optiquement à 12px du bord). */
.field-eye {
    position: absolute;
    right: 4px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: .85rem;
    padding: 0;
    border-radius: 8px;
    transition: color .2s ease, background .2s ease;
    z-index: 2;
}
.field-eye:hover { color: var(--primary); }
.field-eye:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
    color: var(--primary);
}

/* Error & helper text */
.field-error {
    font-size: .75rem;
    color: var(--error);
    display: flex;
    align-items: center;
    gap: .3rem;
}
.field-error::before { content: "⚠"; font-size: .65rem; }

.field-hint {
    font-size: .72rem;
    color: var(--text-muted);
    transition: color .35s ease;
}

/* No-icon input */
.field-input.no-icon,
.field-select.no-icon {
    padding-left: 1rem;
}

/* Select arrow */
.field-select-wrap {
    position: relative;
}
.field-select-wrap::after {
    content: '';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--text-muted);
    pointer-events: none;
    z-index: 2;
}

/* ── Radio Cards ────────────────────────────────────────────── */
.radio-grid {
    display: grid;
    gap: .625rem;
}

.radio-grid-3 { grid-template-columns: repeat(3, 1fr); }
.radio-grid-2 { grid-template-columns: repeat(2, 1fr); }

.radio-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .875rem 1rem;
    border-radius: var(--auth-radius-sm);
    border: 1.5px solid var(--border-input);
    background: var(--bg-input);
    cursor: pointer;
    user-select: none;
}

.radio-card:hover {
    border-color: var(--primary);
    background: var(--primary-glow);
}

.radio-card.is-selected {
    border-color: var(--primary);
    background: var(--primary-glow);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

.radio-card input[type="radio"] {
    accent-color: var(--primary);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.radio-card-label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: .5rem;
    transition: color .35s ease;
}

.radio-card-label i {
    color: var(--primary);
    font-size: .85rem;
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 44px;
    padding: 0 1.5rem;
    border-radius: var(--auth-radius-sm);
    font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    outline: none;
    transition: all .2s ease;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

/* Aplat orange : les jetons d'ACTION du thème portent la règle « blanc le
   jour sur brand-600, ENCRE la nuit sur brand-500 ». Le blanc sur brand-400
   tombait à 2,5:1. */
.btn-primary {
    background: var(--bur-action-primary);
    color: var(--bur-text-on-action);
    box-shadow: var(--auth-shadow-brand);
}

.btn-primary:hover:not(:disabled) {
    background: var(--bur-action-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 12px 36px rgb(var(--burida-brand-500) / .4);
}

.btn-primary:active:not(:disabled) {
    transform: translateY(0);
}

.btn-primary:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.btn-ghost {
    background: transparent;
    color: var(--text-muted);
    border: 1.5px solid var(--border);
}

.btn-ghost:hover {
    border-color: var(--primary);
    color: var(--primary-ink);   /* sur le voile orange, brand-500 = 2,6:1 */
    background: var(--primary-glow);
}

/* Variante « secondaire » (contour orange sur fond de carte). Utilisée par
   two-factor-settings, qui empruntait jusqu'ici le `.btn-secondary` du site
   PUBLIC via l'agrégat tailwind.output.css. Depuis que les écrans d'auth ont
   leur propre feuille Tailwind scopée, cette classe doit vivre ici — et elle
   y gagne les jetons de thème (donc un rendu correct en mode sombre, ce que
   la version publique, en `#fff` codé en dur, n'avait pas). */
.btn-secondary {
    background: transparent;
    color: var(--primary-dark);
    border: 2px solid var(--primary);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--primary-glow);
    color: var(--primary-ink);
    transform: translateY(-1px);
}

.btn-secondary:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.btn-full { width: 100%; }

/* Spinner */
.btn-spinner {
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin .7s linear infinite;
    flex-shrink: 0;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ── Form Nav ───────────────────────────────────────────────── */
.form-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.5rem;
    gap: .75rem;
}

.form-nav.end {
    justify-content: flex-end;
}

/* ── Checkbox ───────────────────────────────────────────────── */
.check-wrap {
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
}

.check-wrap input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--primary);
    cursor: pointer;
    flex-shrink: 0;
}

.check-label {
    font-size: .82rem;
    color: var(--text-muted);
    user-select: none;
    transition: color .35s ease;
}

/* ── Links ──────────────────────────────────────────────────── */
.auth-link {
    /* --primary (brand-500) plafonne à 3,1:1 sur blanc : les LIENS prennent
       le cran « ember » (--primary-dark) — brand-600 le jour, brand-500 la
       nuit, conforme dans les deux thèmes. */
    color: var(--primary-dark);
    font-weight: 600;
    text-decoration: none;
    transition: color .2s ease;
}

.auth-link:hover {
    color: rgb(var(--burida-brand-700));
    text-decoration: underline;
}

/* La nuit, brand-700 serait plus sombre que le fond : on remonte la rampe. */
[data-theme="dark"] .auth-link:hover {
    color: rgb(var(--burida-brand-300));
}

/* ── Divider ────────────────────────────────────────────────── */
.form-footer-text {
    text-align: center;
    font-size: .82rem;
    color: var(--text-muted);
    margin-top: 1.25rem;
    transition: color .35s ease;
}

.form-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1.25rem 0;
    transition: border-color .35s ease;
}

/* ── Section subtitle ───────────────────────────────────────── */
.section-label {
    font-family: var(--font-display, 'Inter', system-ui, sans-serif);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--primary-dark);
    margin-bottom: .75rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.section-label::before {
    content: '';
    display: inline-block;
    width: 16px; height: 2px;
    background: var(--primary);
    border-radius: 2px;
}

/* ── Representant sub-section ───────────────────────────────── */
.sub-section {
    border-top: 1px solid var(--border);
    padding-top: 1.25rem;
    margin-top: 1.25rem;
}

.sub-section-title {
    font-family: var(--font-display, 'Inter', system-ui, sans-serif);
    font-weight: 700;
    font-size: .9rem;
    color: var(--text);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.sub-section-title i {
    color: var(--primary);
}

/* ── Password Strength ──────────────────────────────────────── */
.pw-strength-bar {
    height: 3px;
    border-radius: 2px;
    background: var(--border);
    overflow: hidden;
    margin-top: .35rem;
}

.pw-strength-fill {
    height: 100%;
    border-radius: 2px;
    transition: width .4s ease, background-color .4s ease;
}

.pw-meta {
    display: flex;
    justify-content: space-between;
    margin-top: .25rem;
}

.pw-meta span {
    font-size: .7rem;
    color: var(--text-muted);
}

/* ── Review Summary ─────────────────────────────────────────── */
.review-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    background: var(--bg-input);
    border-radius: var(--auth-radius-md);
    padding: 1.25rem;
    border: 1px solid var(--border);
}

.review-item {
    font-size: .78rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.review-item strong {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: .1rem;
}

/* ── Alert ──────────────────────────────────────────────────── */
.alert {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .875rem 1rem;
    border-radius: var(--auth-radius-sm);
    border: 1px solid;
    font-size: .82rem;
    animation: alertSlide .3s ease;
}

/* Fond + bordure + encre : le trio de jetons de statut, qui porte déjà
   ses valeurs sombres (avant, l'encre changeait mais pas le fond). */
.alert-error {
    background: var(--bur-status-danger-bg);
    border-color: var(--bur-status-danger-border);
    color: var(--bur-status-danger-text);
}

.alert-success {
    background: var(--bur-status-success-bg);
    border-color: var(--bur-status-success-border);
    color: var(--bur-status-success-text);
}

.alert i { margin-top: 1px; flex-shrink: 0; }

@keyframes alertSlide {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Toast ──────────────────────────────────────────────────── */
.toast {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .875rem 1.125rem;
    border-radius: var(--auth-radius-md);
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: var(--auth-shadow-lg);
    font-size: .82rem;
    font-weight: 500;
    color: var(--text);
    max-width: 340px;
    backdrop-filter: blur(16px);
    animation: toastIn .35s cubic-bezier(.22,.68,0,1.2) both;
}

.toast.toast-error   { border-left: 3px solid var(--error); }
.toast.toast-success { border-left: 3px solid var(--success); }
/* Les middlewares d'accès (EnsureIsAdmin, CheckRole, CheckInactivity) émettent
   des toasts 'warning' / 'info' relayés par le layout : sans ces deux règles
   ils tombaient sur le style neutre, indistinguable d'un simple message. */
.toast.toast-warning { border-left: 3px solid var(--warning); }
.toast.toast-info    { border-left: 3px solid var(--primary); }
.toast.toast-exit    { animation: toastOut .3s ease forwards; }

@keyframes toastIn  {
    from { opacity: 0; transform: translateX(20px) scale(.95); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes toastOut {
    to { opacity: 0; transform: translateX(20px) scale(.95); }
}

/* ── Phone field ────────────────────────────────────────────── */
.phone-group {
    display: flex;
    gap: 0;
}

.phone-code {
    width: 110px;
    flex-shrink: 0;
    border-right: none !important;
    border-radius: var(--auth-radius-sm) 0 0 var(--auth-radius-sm) !important;
}

.phone-number {
    flex: 1;
    border-radius: 0 var(--auth-radius-sm) var(--auth-radius-sm) 0 !important;
    padding-left: 1rem !important;
}

/* ── Step transition ────────────────────────────────────────── */
.step-panel {
    animation: stepIn .35s cubic-bezier(.22,.68,0,1.2) both;
}

@keyframes stepIn {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ── Loader dot inside field ────────────────────────────────── */
.field-loader {
    position: absolute;
    right: 12px;
    width: 14px; height: 14px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin .7s linear infinite;
    display: none;
}

/* ── Select2 theming ────────────────────────────────────────── */
.select2-container--default .select2-selection--single {
    height: 44px;
    border: 1.5px solid var(--border-input);
    border-radius: var(--auth-radius-sm);
    background: var(--bg-input);
    transition: border-color .2s ease, background .35s ease;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 44px;
    padding: 0 2rem 0 2.75rem;
    color: var(--text);
    font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
    font-size: .875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 44px;
    right: 8px;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--primary-glow);
    outline: none;
}

.select2-dropdown {
    border: 1px solid var(--border);
    border-radius: var(--auth-radius-md);
    box-shadow: var(--auth-shadow-lg);
    background: var(--bg-card);
    backdrop-filter: blur(16px);
    overflow: hidden;
}

.select2-search--dropdown .select2-search__field {
    border: 1px solid var(--border) !important;
    border-radius: var(--auth-radius-sm);
    padding: .5rem .75rem;
    background: var(--bg-input);
    color: var(--text);
    font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
    font-size: .875rem;
    outline: none;
}

.select2-container--default .select2-results__option {
    padding: .6rem .875rem;
    font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
    font-size: .875rem;
    color: var(--text);
    background: transparent;
    transition: background .15s ease;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--primary-glow);
    color: var(--primary-ink);
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background: var(--primary-glow);
    font-weight: 600;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .auth-card {
        flex-direction: column;
        max-width: 480px;
        border-radius: var(--auth-radius-lg);
    }

    .auth-panel {
        width: 100%;
        min-width: unset;
        padding: 2rem 1.5rem;
        min-height: 220px;
    }

    .panel-steps { display: none; }
    .panel-step-bar { display: block; }
    .panel-features { display: none; }

    .auth-form-section {
        padding: 2rem 1.5rem;
        max-height: none;
    }

    .field-row {
        grid-template-columns: 1fr;
    }

    .radio-grid-3 {
        grid-template-columns: 1fr;
    }

    .review-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .page-wrapper {
        padding: 4.5rem .75rem 1.5rem;
    }

    .auth-form-section {
        padding: 1.5rem 1.25rem;
    }
}

/* ── Dark-mode: Select2 results bg fix ─────────────────────── */
[data-theme="dark"] .select2-results__options {
    background: var(--bg-card);
}

[data-theme="dark"] .select2-search--dropdown {
    background: var(--bg-card);
    padding: 8px;
}

/* ── Sélecteur de langue flottant ─────────────────────────── */
.auth-lang-toggle {
    position: fixed;
    top: 18px;
    left: 18px;
    z-index: 50;
    /* 44px comme les deux autres boutons flottants : 2.5rem (40px) était sous
       la cible tactile minimale. */
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.auth-lang-toggle:hover {
    background: var(--primary-dark);
    color: #fff;
    transform: scale(1.08);
    box-shadow: 0 4px 16px rgb(var(--burida-brand-500) / .35);
}

/* Dropdown */
.auth-lang-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    min-width: 11rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 0.375rem 0;
    box-shadow: var(--auth-shadow-md);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow: hidden;
}

/* Items */
.auth-lang-item {
    display: block;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    color: var(--text);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.auth-lang-item:hover {
    background: rgb(var(--burida-brand-500) / .1);
    color: var(--primary-dark);
}

.auth-lang-item--active {
    background: var(--bur-action-primary);
    color: var(--bur-text-on-action) !important;
    font-weight: 600;
}

/* Thème sombre */
/* Plus de bloc sombre : --bg-card, --border, --text et --primary-dark
   basculent seuls. Seul le survol garde un voile explicite. */
[data-theme="dark"] .auth-lang-item:hover {
    background: rgb(var(--burida-brand-400) / .15);
    color: var(--primary);
}


/* ══════════════════════════════════════════════════════════════════════
   ACCESSIBILITÉ & PETITS ÉCRANS — ajouts du 2026-09-01
   ══════════════════════════════════════════════════════════════════════ */

/* ── Anneau de focus clavier ────────────────────────────────────────────
   `.btn` pose `outline: none` : sans la règle ci-dessous, un utilisateur au
   clavier perdait totalement le curseur sur « Suivant », « Se connecter »,
   les liens et les cartes-radio. `:focus-visible` ne s'affiche PAS au clic
   souris, la finition visuelle reste donc inchangée. */
.btn:focus-visible,
.auth-link:focus-visible,
.notice-trigger:focus-visible,
.auth-theme-toggle:focus-visible,
.auth-home-toggle:focus-visible,
.auth-lang-toggle:focus-visible,
.auth-lang-item:focus-visible,
.check-wrap:focus-within,
.radio-card:focus-within {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--auth-radius-sm);
}

/* La carte-radio dessine déjà son état sélectionné : on lui donne en plus
   l'anneau, mais collé à sa propre bordure pour ne pas doubler le trait. */
.radio-card:focus-within {
    outline-offset: 0;
    border-radius: var(--auth-radius-md);
}

/* ── État « occupé » d'un bouton ────────────────────────────────────────
   Les deux libellés d'un bouton de soumission (repos / envoi en cours)
   vivaient dans des `<template x-if>`. Un `<template>` est INERTE tant qu'Alpine
   ne l'a pas rendu : le bouton s'affichait donc VIDE — sans libellé et sans nom
   accessible — pendant tout le chargement, et définitivement si Alpine échoue
   (constaté en retirant sa balise du HTML servi). Les deux libellés sont
   désormais rendus par le serveur et basculés en `x-show` ; l'état « occupé »
   porte `x-cloak` pour rester masqué avant le boot.
   ⚠️ `display` est ICI et pas en style inline : `x-show` montre un élément en
   RETIRANT la propriété `display` de son attribut `style` — un `display:flex`
   inline serait effacé au premier affichage et le spinner se retrouverait
   désaligné. Les autres déclarations inline, elles, survivent. */
.btn-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

/* ── Conteneur de toasts ────────────────────────────────────────────────
   Les vues posent `<div id="toast-container" class="fixed top-4 right-4 z-50">`.
   Or `.auth-theme-toggle` est en `position: fixed; top: 18px; right: 18px;
   z-index: 100` avec un fond opaque : le PREMIER toast passait dessous et se
   retrouvait partiellement masqué par le bouton de thème. Seul login.blade.php
   corrigeait le tir, dans son propre @push('styles') — forgot-password,
   reset-password et verify-email héritaient du défaut.
   Le sélecteur d'id (spécificité 1-0-0) l'emporte sur l'utilitaire `.z-50`
   de tailwind-auth.css, chargé juste avant cette feuille.
   `pointer-events` : le conteneur couvre le coin haut-droit sur toute sa
   largeur ; sans neutralisation il interceptait les clics destinés au bouton
   de thème même quand aucun toast n'était affiché. */
#toast-container {
    z-index: 9999;
    max-width: calc(100vw - 2rem);
    pointer-events: none;
}
#toast-container > * {
    pointer-events: auto;
}

/* ── État désactivé d'un bouton stylé en lien ───────────────────────────
   `.btn-primary:disabled` existe, mais verify-email verrouille aussi un
   `<button class="auth-link">` pendant la déconnexion : sans cette règle, le
   bouton restait d'apparence cliquable pendant tout l'aller-retour. */
.auth-link:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* ── Cibles tactiles ────────────────────────────────────────────────────
   Les entrées du sélecteur de langue tombaient à ~34px de haut. */
.auth-lang-item {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: .5rem;   /* le drapeau est un <span aria-hidden> séparé du libellé */
}

/* ── Champ en erreur : le rouge de bordure n'est pas la seule information ─
   `.field-error` porte déjà un pictogramme ⚠ ; on renforce ici le contraste
   de la bordure pour les daltonismes deutan/protan. */
.field-input[aria-invalid="true"],
.field-select[aria-invalid="true"] {
    border-color: var(--error);
    border-width: 2px;
}

/* ── Très petits écrans (< 375px : Galaxy A0x, iPhone SE 1re gén.) ───────
   Le dernier palier s'arrêtait à 480px. En dessous, les trois boutons
   flottants (langue / accueil / thème) se chevauchaient avec la carte et le
   panneau orange mangeait la moitié de la hauteur utile. */
@media (max-width: 374px) {
    .page-wrapper {
        padding: 4rem .5rem 1rem;
    }

    .auth-card {
        border-radius: var(--auth-radius-lg);
    }

    .auth-panel {
        padding: 1.5rem 1rem;
        min-height: 0;
    }

    .panel-title {
        font-size: 1.35rem;
    }

    .panel-subtitle {
        font-size: .82rem;
    }

    .auth-form-section {
        padding: 1.25rem 1rem;
    }

    /* Les boutons flottants restent à 44px (cible tactile) mais se resserrent
       vers les bords pour ne plus mordre sur la carte. */
    .auth-theme-toggle { right: 8px; }
    .auth-lang-toggle  { left: 8px; }
    .auth-theme-toggle,
    .auth-home-toggle,
    .auth-lang-toggle { top: 10px; }

    /* Le dropdown de langue débordait de l'écran à gauche. */
    .auth-lang-dropdown {
        min-width: 10rem;
        max-width: calc(100vw - 16px);
    }

    /* « Retour » + « Se connecter » côte à côte ne tiennent plus. */
    .form-nav {
        flex-direction: column-reverse;
        gap: .5rem;
    }
    .form-nav .btn {
        width: 100%;
    }
}

/* ── Mouvement réduit ───────────────────────────────────────────────────
   Le layout coupe déjà la garde GSAP quand `prefers-reduced-motion` est
   posé ; on neutralise ici les animations purement décoratives de la
   feuille (entrée de carte, orbes du fond, transitions de thème). */
@media (prefers-reduced-motion: reduce) {
    .auth-card,
    .step-panel {
        animation: none !important;
    }

    .bg-orb {
        animation: none !important;
    }

    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}