/* ── BASE & TYPOGRAPHIE — THÈME OR & BLANC (aligné sur register.php) ── */
    #login-fb {
        --gold:        #b8901f;
        --gold-light:  #c9a227;
        --gold-soft:   #9c7a1d;
        --ink:         #1c1a14;
        --muted:       #756c58;
        --line:        rgba(180,140,30,0.22);
        --line-strong: rgba(180,140,30,0.45);
        --danger:      #c23b2c;
        --serif: 'Playfair Display', Georgia, serif;
        --sans:  'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    .auth-wrap {
        width: 100%;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background:
            radial-gradient(900px 420px at 15% -10%, rgba(201,162,39,0.08), transparent 60%),
            radial-gradient(800px 460px at 100% 0%, rgba(201,162,39,0.06), transparent 55%),
            #fbfaf7;
        padding: 24px 16px;
        color: var(--ink);
        font-family: var(--sans);
        box-sizing: border-box;
        /* ✅ garde-fou : évite tout scroll horizontal parasite si le breakout
           mobile ci-dessous (100vw) est calculé en incluant la largeur de la
           scrollbar verticale — même logique que sur register.css. */
        overflow-x: hidden;
    }
    .auth-wrap * { box-sizing: border-box; }

    .auth-wrap > div {
        width: 100%;
        max-width: 440px;
        transition: max-width 0.2s ease;
    }

    .auth-wrap input:-webkit-autofill,
    .auth-wrap input:-webkit-autofill:hover,
    .auth-wrap input:-webkit-autofill:focus,
    .auth-wrap input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
        -webkit-text-fill-color: var(--ink) !important;
        transition: background-color 5000s ease-in-out 0s;
    }

    /* ── CARTE ── */
    .auth-card {
        background-color: #ffffff;
        border: 1px solid var(--line);
        border-radius: 20px;
        padding: 32px 26px;
        box-shadow: 0 2px 8px rgba(28,26,20,0.04), 0 16px 40px rgba(28,26,20,0.05);
        position: relative;
        overflow: hidden;
    }
    .auth-card::before {
        content: "";
        position: absolute; top: 0; left: 0; right: 0; height: 1px;
        background: linear-gradient(90deg, transparent, var(--gold), transparent);
        opacity: 0.6;
    }

    .auth-card-top { text-align: center; margin-bottom: 22px; }
    .auth-crest {
        display: inline-flex; align-items: center; justify-content: center;
        width: 46px; height: 46px; border-radius: 50%;
        background: linear-gradient(155deg, #fdf8ec, #f6ecd1);
        border: 1px solid var(--line-strong);
        margin-bottom: 10px; color: var(--gold-soft); font-size: 17px;
        box-shadow: 0 8px 20px rgba(184,144,31,0.14);
    }
    .auth-title {
        font-family: var(--serif); font-style: italic; font-weight: 700;
        font-size: 24px; letter-spacing: -0.01em;
        margin: 0; color: var(--ink);
    }
    .auth-sub {
        font-size: 13.5px; color: var(--muted); font-weight: 500;
        margin-top: 6px; line-height: 1.5;
    }

    /* ── CHAMPS ── */
    .mb-1, .mb-3, .mb-4 { margin-bottom: 14px !important; }
    .mt-2 { margin-top: 5px !important; }

    .field-label {
        display: block; font-size: 10.5px; font-weight: 700; color: var(--gold-soft);
        text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px;
    }

    .inp-wrap { position: relative; display: flex; align-items: center; }
    .inp-icon {
        position: absolute; left: 15px; color: #a49c88; font-size: 13px;
        pointer-events: none;
    }
    .inp-field {
        width: 100%; background-color: #fbfaf6; color: var(--ink);
        padding: 11px 16px 11px 42px; border: 1.5px solid var(--line);
        border-radius: 11px; font-size: 14px; transition: all 0.15s ease;
        font-family: inherit;
    }
    .inp-field::placeholder { color: #a49c88; }
    .inp-field:focus {
        border-color: var(--gold); outline: none; background-color: #ffffff;
        box-shadow: 0 0 0 3.5px rgba(201,162,39,0.15);
    }

    .inp-toggle {
        position: absolute; right: 13px; background: none; border: none;
        color: #a49c88; cursor: pointer; padding: 4px; display: flex;
        align-items: center; font-size: 13px;
    }
    .inp-toggle:hover { color: var(--gold-soft); }

    /* ── LIENS ── */
    .forgot-link {
        font-size: 12.5px; color: var(--muted); font-weight: 600;
        text-decoration: none; cursor: pointer; transition: color 0.15s ease;
    }
    .forgot-link:hover { color: var(--gold-soft); }

    .link-gold {
        color: var(--gold-soft) !important; font-weight: 700; text-decoration: none;
        cursor: pointer; border-bottom: 1.5px dashed var(--line-strong); padding-bottom: 1px;
        transition: all 0.15s ease;
    }
    .link-gold:hover { border-bottom-style: solid; border-color: var(--gold-soft); }

    /* ── BOUTONS PRINCIPAUX ── */
    .btn-dark-main {
        width: 100%; color: #ffffff;
        background: linear-gradient(150deg, var(--gold-light), var(--gold-soft));
        padding: 13px; border: none; border-radius: 11px; font-weight: 700;
        font-size: 12.5px; letter-spacing: 0.02em; text-transform: uppercase; cursor: pointer;
        display: flex; align-items: center; justify-content: center; gap: 8px;
        transition: all 0.18s ease;
        box-shadow: 0 6px 16px rgba(201,162,39,0.24);
    }
    .btn-dark-main:hover { filter: brightness(1.06); transform: translateY(-1px); }
    .btn-dark-main:active { transform: translateY(0); }

    .btn-gold-main {
        width: 100%; color: #ffffff;
        background: linear-gradient(150deg, var(--gold-light), var(--gold-soft));
        padding: 13px; border: none; border-radius: 11px; font-weight: 700;
        font-size: 12.5px; letter-spacing: 0.02em; text-transform: uppercase; cursor: pointer;
        display: flex; align-items: center; justify-content: center; gap: 8px;
        transition: all 0.18s ease;
        box-shadow: 0 6px 16px rgba(201,162,39,0.24);
    }
    .btn-gold-main:hover { filter: brightness(1.06); transform: translateY(-1px); }
    .btn-gold-main:active { transform: translateY(0); }

    /* ── SÉPARATEUR ── */
    .divider {
        display: flex; align-items: center; text-align: center;
        margin: 16px 0; color: var(--muted); font-size: 10px; font-weight: 700;
        letter-spacing: 0.1em;
    }
    .divider::before, .divider::after {
        content: ''; flex: 1; border-bottom: 1px solid var(--line);
    }
    .divider:not(:empty)::before { margin-right: 12px; }
    .divider:not(:empty)::after { margin-left: 12px; }

    /* ── BOUTONS SSO ──
       IMPORTANT : plus de largeur fixe imposée à Google (voir <div class="g_id_signin">
       plus bas). C'est flex-grow qui gère la taille, exactement comme sur register.php
       où le bouton Google fonctionne. Fixer un data-width plus large que l'espace
       réellement disponible désynchronise la zone cliquable de l'iframe Google de ce
       qui est visuellement affiché → clics silencieusement ignorés. */
    .sso-buttons-container {
        display: flex;
        gap: 10px;
        margin-bottom: 10px;
        align-items: center;
        flex-wrap: wrap;
    }
    .sso-buttons-container > * { flex: 1 1 0; min-width: 0; }

    .sso-btn {
        display: inline-flex; align-items: center; justify-content: center;
        gap: 9px; background-color: #ffffff; border: 1.5px solid var(--line);
        color: var(--ink); padding: 11px; border-radius: 11px; font-weight: 700;
        font-size: 12px; cursor: pointer; transition: all 0.18s ease;
        height: 42px;
    }
    .sso-btn:hover { background-color: #fbf7ec; border-color: var(--line-strong); color: var(--gold-soft); }
    .sso-btn i.fa-google { color: #b8901f; font-size: 15px; }
    .sso-btn i.fa-facebook { color: #3d6bc4; font-size: 15px; }

    .auth-footer { margin-top: 16px; text-align: center; font-size: 12.5px; color: var(--muted); }

    /* ── OTP ── */
    .otp-row { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
    .otp-box {
        width: 50px; height: 58px; text-align: center; font-size: 22px;
        font-weight: 700; background-color: #fbfaf6; color: var(--gold-soft);
        border: 1.5px solid var(--line); border-radius: 11px; transition: all 0.15s ease;
        font-family: var(--serif);
    }
    .otp-box:focus {
        border-color: var(--gold); outline: none; background-color: #ffffff;
        box-shadow: 0 0 0 3.5px rgba(201,162,39,0.15);
    }

    .timer-text { text-align: center; font-size: 12.5px; color: var(--muted); margin: 12px 0; }
    .timer-text strong { color: var(--gold-soft); font-weight: 700; }

    .btn-outline-secondary {
        background: none; border: none; color: var(--gold-soft); font-weight: 700;
        font-size: 11px; text-decoration: underline; cursor: pointer; padding: 4px 8px;
    }
    .btn-outline-secondary:hover { color: var(--ink); }

    .d-none { display: none !important; }
    .text-center { text-align: center !important; }
    .text-end { text-align: right !important; }

    /* ══════════════ RESPONSIVE ══════════════
       Desktop : carte centrée avec marges confortables.
       Mobile  : édge-à-édge, sans marge, carte pleine hauteur. */
    @media (max-width: 576px) {
        /* ✅ BREAKOUT MOBILE — même logique que .full-mobile-width /
           #candidates-container / .register-shell. `padding:0` seul ne
           suffit pas si #login-fb est imbriqué dans un conteneur parent
           avec son propre padding (ex: main.php px-4) : la carte reste
           inset au lieu de toucher les bords de l'écran. Le
           calc(50% - 50vw) fait sortir .auth-wrap de n'importe quel
           ancêtre centré (mx-auto + padding symétrique), sans dépendre
           du markup PHP autour — ça marche à partir de la seule CSS. */
        .auth-wrap {
            width: 100vw !important;
            max-width: 100vw !important;
            margin-left: calc(50% - 50vw) !important;
            margin-right: calc(50% - 50vw) !important;
            padding: 0;
            background: #ffffff;
            align-items: stretch;
            box-sizing: border-box;
        }
        .auth-wrap > div { max-width: 100%; display: flex; flex-direction: column; justify-content: center; }
        .auth-card {
            border: none; border-radius: 0; box-shadow: none;
            padding: 32px 20px; min-height: 100vh;
            display: flex; flex-direction: column; justify-content: center;
        }
        .otp-box { width: 46px; height: 54px; font-size: 20px; }
    }

    @media (max-width: 400px) {
        /* Sous 400px, les deux boutons SSO se tassent trop côte à côte :
           on les empile, comme fait register.php sur petit écran. */
        .sso-buttons-container { flex-direction: column; }
        .sso-buttons-container > * { width: 100%; }
        .g_id_signin { width: 100% !important; display: flex; justify-content: center; }
    }