/* ============================================================
   AUTHENTIFICATION — connexion, code à six chiffres,
   vérification d'adresse, réinitialisation.
   Une seule feuille pour le site et l'administration : la
   variante bordeaux ne change que les accents (.auth-admin).
   ============================================================ */

.auth-body{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:32px 20px;
  background:radial-gradient(ellipse 120% 70% at 20% 0%,#132C46 0%,var(--navy) 58%,#081422 100%);
  position:relative;overflow-x:hidden;
}
.auth-body::before{
  content:'';position:fixed;inset:0;
  background-image:radial-gradient(rgba(233,225,197,.05) 1px,transparent 1px);
  background-size:26px 26px;opacity:.45;pointer-events:none;
}
.auth-body.auth-admin{
  background:radial-gradient(ellipse 120% 70% at 20% 0%,#2A1112 0%,#140C0C 60%,#0A0606 100%);
}

.auth-wrap{position:relative;z-index:1;width:100%;max-width:420px}
/* La création de compte demande douze champs : sur 420 px de colonne, elle
   devient un rouleau. La carte s'élargit et les champs se mettent par deux. */
.auth-wrap.auth-wide{max-width:620px}

/* ---- Marque ---- */
.auth-brand{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:26px}
.auth-brand .brand-mark{width:34px;height:34px;color:var(--gold-light)}
.auth-admin .auth-brand .brand-mark{color:#C98C8D}
.auth-brand .brand-name{font-size:18px}
/* La marque cliquable ne doit pas ressembler à un lien de texte : pas de
   soulignement, juste un léger recul au survol. */
a.auth-brand{text-decoration:none;color:inherit;transition:opacity .18s ease}
a.auth-brand:hover{opacity:.82}
a.auth-brand:focus-visible{outline:2px solid var(--gold-light);outline-offset:6px;border-radius:6px}
.auth-tag{
  font-family:var(--font-m);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#E8C8C8;border:1px solid rgba(233,197,197,.35);border-radius:3px;padding:3px 7px;
}

/* ---- Carte ---- */
.auth-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(233,225,197,.16);
  border-radius:var(--radius-lg);
  padding:40px 36px 34px;
  backdrop-filter:blur(6px);
}
.auth-admin .auth-card{border-color:rgba(233,197,197,.16)}

.auth-seal{width:52px;height:52px;color:var(--gold-light);margin:0 auto 22px}
.auth-admin .auth-seal{color:#C98C8D}

.auth-title{color:#fff;font-size:23px;text-align:center;margin-bottom:8px;font-weight:400}
.auth-sub{color:rgba(237,234,226,.55);font-size:13px;text-align:center;line-height:1.55;margin-bottom:28px}
.auth-sub b{color:rgba(255,255,255,.85);font-weight:500}

/* ---- Champs ---- */
.auth-fg{margin-bottom:17px}
.auth-fg label{display:block;font-size:12px;color:rgba(237,234,226,.65);margin-bottom:8px}
.auth-fi{
  width:100%;padding:12px 15px;
  border:1px solid rgba(233,225,197,.2);border-radius:var(--radius-sm);
  background:rgba(255,255,255,.04);color:#fff;font-size:13.5px;
  transition:border-color .2s,background .2s;
}
.auth-fi::placeholder{color:rgba(255,255,255,.28)}
.auth-fi:focus{border-color:var(--gold-light);background:rgba(255,255,255,.07)}
.auth-admin .auth-fi:focus{border-color:#C98C8D}
select.auth-fi option{background:var(--navy);color:#fff}
.auth-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* Champ mot de passe avec œil */
.pw-field{position:relative}
.pw-field .auth-fi{padding-right:46px}
.pw-toggle{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  color:rgba(237,234,226,.5);border-radius:7px;
}
.pw-toggle:hover{color:#fff;background:rgba(255,255,255,.06)}
.pw-toggle svg{width:19px;height:19px}

.auth-submit{width:100%;margin-top:8px;padding:14px;font-size:14px}

/* ---- Cadran du code ---- */
.otp-cadran{
  width:100%;text-align:center;
  font-family:var(--font-m);font-size:30px;font-weight:600;
  letter-spacing:14px;text-indent:14px;   /* compense l'espace après le dernier chiffre */
  padding:16px 12px;
  border:1px solid rgba(233,225,197,.28);border-radius:var(--radius);
  background:rgba(255,255,255,.05);color:#fff;
}
.otp-cadran::placeholder{letter-spacing:12px;color:rgba(255,255,255,.2);font-size:26px}
.otp-cadran:focus{border-color:var(--gold-light);background:rgba(255,255,255,.08)}
.auth-admin .otp-cadran:focus{border-color:#C98C8D}

/* ---- Renvoi du code ---- */
.otp-resend{margin-top:18px;text-align:center}
.otp-resend-btn{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;color:var(--gold-light);padding:8px 14px;border-radius:8px;
  transition:background .2s,color .2s;
}
.otp-resend-btn:hover:not(:disabled){background:rgba(255,255,255,.06)}
.otp-resend-btn:disabled{color:rgba(237,234,226,.35);cursor:default}
.otp-resend-btn svg{width:16px;height:16px}
.auth-admin .otp-resend-btn{color:#D9A3A4}

/* ---- Rappel « regardez vos indésirables » ---- */
.otp-spam{
  margin-top:16px;display:flex;gap:10px;align-items:flex-start;
  background:rgba(255,255,255,.03);border:1px solid rgba(233,225,197,.12);
  border-radius:10px;padding:12px 14px;
  font-size:11.5px;line-height:1.5;color:rgba(237,234,226,.55);
}
.otp-spam svg{width:17px;height:17px;flex-shrink:0;margin-top:1px;color:var(--gold-light)}
.otp-spam b{color:rgba(255,255,255,.8)}
.auth-admin .otp-spam svg{color:#C98C8D}

/* ---- Panneau « adresse non confirmée » ----
   L'écran qui refusait l'entrée ne proposait rien d'autre que de réessayer, et
   c'est ce qui condamnait un compte dont l'adresse était mal tapée. Ce panneau
   porte les deux seules issues : renvoyer le lien, ou déplacer l'adresse.
   L'ambre plutôt que le rouge : ce n'est pas une erreur de saisie, c'est une
   étape qui manque. */
.auth-stuck{
  margin-top:20px;padding:16px 16px 4px;
  border:1px solid rgba(169,129,44,.38);border-radius:12px;
  background:rgba(169,129,44,.09);
}
.auth-stuck-h{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-d);font-size:14.5px;font-weight:600;color:#EBDCB6;margin:0 0 6px;
}
.auth-stuck-h i{
  width:7px;height:7px;border-radius:50%;background:var(--gold-light);flex-shrink:0;
}
.auth-stuck-p{
  font-size:12.3px;line-height:1.55;color:rgba(237,234,226,.62);margin:0;
}
.auth-stuck-p b{color:rgba(255,255,255,.85)}
.auth-stuck .otp-resend{margin-top:12px}

/* Le changement d'adresse est replié : c'est le cas rare, et déplié par défaut
   il inviterait à changer d'adresse quelqu'un qui n'a qu'à ouvrir sa boîte.
   Il s'ouvre tout seul quand un envoi vient d'être refusé. */
.auth-fix{margin-top:6px;border-top:1px solid rgba(233,225,197,.12)}
.auth-fix summary{
  list-style:none;cursor:pointer;padding:12px 2px;
  font-size:12.5px;color:var(--gold-light);text-align:center;
  transition:color .18s;
}
.auth-fix summary::-webkit-details-marker{display:none}
.auth-fix summary:hover{color:var(--gold-pale)}
.auth-fix[open] summary{color:rgba(237,234,226,.6)}
.auth-fix .auth-fg{margin-bottom:14px}
.auth-fix .auth-submit{margin-top:4px}
.auth-fix-note{
  font-size:11.5px;line-height:1.5;color:rgba(237,234,226,.45);
  text-align:center;margin:10px 0 14px;
}

/* ---- Messages ---- */
.flash{
  border-radius:10px;padding:12px 15px;margin-bottom:18px;
  font-size:12.8px;line-height:1.5;display:flex;gap:9px;align-items:flex-start;
}
.flash-success{background:rgba(46,107,79,.16);border:1px solid rgba(46,107,79,.4);color:#BFE3CE}
.flash-error{background:rgba(122,46,46,.18);border:1px solid rgba(122,46,46,.45);color:#F0C9C9}
.flash-info{background:rgba(169,129,44,.14);border:1px solid rgba(169,129,44,.38);color:#EBDCB6}
.flash .num{font-family:var(--font-m);letter-spacing:3px;font-size:15px}

/* ---- Liens secondaires ---- */
.auth-alt{margin-top:22px;text-align:center;font-size:12.5px;color:rgba(237,234,226,.5)}
.auth-alt a{color:var(--gold-light)}
.auth-alt a:hover{text-decoration:underline}
.auth-admin .auth-alt a{color:#D9A3A4}
.auth-links{display:flex;justify-content:space-between;gap:12px;margin-top:14px;font-size:12.5px}
.auth-links a{color:rgba(237,234,226,.55)}
.auth-links a:hover{color:#fff}

/* ---- Bandeau de confiance ---- */
.auth-foot{
  margin-top:26px;text-align:center;
  font-family:var(--font-m);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(237,234,226,.35);display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;
}
.auth-foot svg{width:14px;height:14px}
.auth-foot i{width:3px;height:3px;border-radius:50%;background:currentColor;display:inline-block}

/* ---- Force du mot de passe ---- */
.pw-meter{display:flex;gap:4px;margin-top:8px}
.pw-meter span{height:3px;flex:1;border-radius:2px;background:rgba(255,255,255,.12);transition:background .25s}
.pw-meter.s1 span:nth-child(1){background:#B4544F}
.pw-meter.s2 span:nth-child(-n+2){background:#C68A2E}
.pw-meter.s3 span:nth-child(-n+3){background:#B5A44A}
.pw-meter.s4 span{background:#3E8F66}
.pw-hint{font-size:11.5px;color:rgba(237,234,226,.45);margin-top:7px;line-height:1.45}

@media(max-width:480px){
  .auth-card{padding:30px 22px 26px}
  .auth-row{grid-template-columns:1fr}
  .otp-cadran{font-size:25px;letter-spacing:10px;text-indent:10px}
}

/* ---- Téléphone ----
   L'écran d'authentification tenait déjà dans 420 px de colonne ; ce qui
   manquait, c'est la marge autour et la taille des cibles. */
@media(max-width:560px){
  .auth-body{padding:24px 14px;align-items:flex-start}
  .auth-wrap{padding-top:16px}
  .auth-brand{margin-bottom:20px;flex-wrap:wrap;justify-content:center}
  .auth-title{font-size:21px}
  .auth-links{flex-direction:column;align-items:center;gap:10px;text-align:center}
  .pw-toggle{width:40px;height:40px}
  .otp-resend-btn{padding:10px 16px}
}

/* ============================================================
   FORMULAIRE DE CRÉATION DE COMPTE

   Un seul écran, des sections nommées. Recette reprise de 123pozicky : un
   formulaire long mais entier vaut mieux qu'un tunnel de cinq étapes. On y
   voit d'emblée ce qui sera demandé, et un aller-retour de validation ne
   renvoie pas à l'étape deux avec les champs vidés.

   La légende de section n'est pas décorative : douze champs d'affilée se
   lisent comme une corvée, trois blocs de quatre se lisent comme un
   formulaire.
   ============================================================ */
.rg-sec{border:none;padding:0;margin:0 0 24px;min-width:0}
.rg-sec > legend{
  display:block;width:100%;padding:0 0 12px;margin-bottom:16px;
  font-family:var(--font-m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-light);border-bottom:1px solid rgba(233,225,197,.14);
}
.auth-admin .rg-sec > legend{color:#C98C8D;border-bottom-color:rgba(233,197,197,.14)}
.rg-sec .auth-fg:last-child{margin-bottom:0}
.rg-hint{margin:7px 0 0;font-size:11.5px;line-height:1.45;color:rgba(237,234,226,.42)}

/* Le consentement n'est pas une ligne de plus : c'est une case que l'on coche
   en connaissance de cause, donc un bloc à part, encadré. */
.auth-consent{
  display:flex;gap:11px;align-items:flex-start;
  margin:6px 0 4px;padding:14px 15px;
  background:rgba(255,255,255,.03);border:1px solid rgba(233,225,197,.12);
  border-radius:10px;
  font-size:12.3px;line-height:1.5;color:rgba(237,234,226,.62);cursor:pointer;
}
.auth-consent:hover{border-color:rgba(233,225,197,.24)}
.auth-consent input{width:auto;margin-top:2px;flex-shrink:0;accent-color:var(--gold-light)}

/* Safari n'applique pas la grille à un <fieldset> sans ce rappel : les deux
   colonnes de .auth-row s'effondraient en une seule dedans. */
.rg-sec .auth-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

@media(max-width:620px){
  .rg-sec{margin-bottom:20px}
  .rg-sec .auth-row{grid-template-columns:1fr;gap:0}
  .auth-consent{font-size:12px}
}

/* ============================================================
   INTERRUPTEUR DE THÈME SUR LES ÉCRANS D'AUTHENTIFICATION

   Repris du back-office de 123pozicky (.adl-bar) : ancré en haut de page,
   calé sur la largeur de la carte, donc avec la même gouttière de chaque
   côté.

   En `fixed` et non en `absolute` : .auth-wrap porte « position:relative ;
   z-index:1 », une barre en absolu s'y accrochait et venait se poser SUR la
   carte au lieu du haut de l'écran.
   ============================================================ */
.auth-bar{
  position:fixed;top:18px;left:16px;right:16px;z-index:80;
  display:flex;align-items:center;justify-content:flex-end;
  width:auto;max-width:420px;margin:0 auto;
}
.auth-bar-wide{max-width:620px}
/* Le décor reste sombre dans les deux thèmes : l'interrupteur se pose donc
   toujours sur du foncé, quelle que soit la préférence en cours. */
.auth-bar .theme-switch{color:rgba(255,255,255,.72)}
.auth-bar .theme-switch:hover{color:#fff}
.auth-bar .theme-switch-track{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26)}
.auth-bar .theme-switch-ico.sun{color:var(--gold-pale)}
.auth-admin .auth-bar .theme-switch-ico.sun{color:#E8C8C8}
/* La barre occupe le haut : le contenu centré descend d'autant, sinon elle
   recouvre la marque sur un écran court. */
.auth-body{padding-top:76px}

/* ============================================================
   THÈME CLAIR — la carte suit, le décor non

   Même parti que la page de connexion de 123pozicky : le FOND reste sombre
   dans les deux thèmes, c'est l'identité de l'écran ; c'est la CARTE qui
   bascule. Sans cela l'interrupteur qu'on vient d'ajouter ne changerait rien
   sous les yeux, et un interrupteur qui ne montre rien passe pour cassé.

   Ces règles ne visent que [data-theme="light"], c'est-à-dire un choix
   EXPLICITE : tant que personne n'a touché l'interrupteur, l'écran reste
   exactement celui d'avant.
   ============================================================ */
:root[data-theme="light"] .auth-card{
  background:var(--card);border-color:var(--border);
  box-shadow:0 30px 70px rgba(4,10,18,.45);
  backdrop-filter:none;
}
:root[data-theme="light"] .auth-title{color:var(--title)}
:root[data-theme="light"] .auth-sub{color:var(--muted)}
:root[data-theme="light"] .auth-sub b{color:var(--ink)}
:root[data-theme="light"] .auth-fg label{color:var(--slate)}
:root[data-theme="light"] .auth-fi,
:root[data-theme="light"] .otp-cadran{
  background:var(--ivory);border-color:var(--border);color:var(--ink);
}
:root[data-theme="light"] .auth-fi::placeholder{color:var(--hint)}
:root[data-theme="light"] .otp-cadran::placeholder{color:var(--border)}
:root[data-theme="light"] .auth-fi:focus,
:root[data-theme="light"] .otp-cadran:focus{background:var(--card)}
:root[data-theme="light"] select.auth-fi option{background:var(--card);color:var(--ink)}
:root[data-theme="light"] .pw-toggle{color:var(--hint)}
:root[data-theme="light"] .pw-toggle:hover{color:var(--ink);background:var(--ivory)}
:root[data-theme="light"] .otp-resend-btn{color:var(--gold)}
:root[data-theme="light"] .otp-resend-btn:hover:not(:disabled){background:var(--ivory)}
:root[data-theme="light"] .otp-resend-btn:disabled{color:var(--hint)}
:root[data-theme="light"] .otp-spam{
  background:var(--ivory);border-color:var(--border);color:var(--muted);
}
:root[data-theme="light"] .otp-spam b{color:var(--ink)}
:root[data-theme="light"] .rg-hint,
:root[data-theme="light"] .pw-hint{color:var(--muted)}
:root[data-theme="light"] .rg-sec > legend{border-bottom-color:var(--border)}
:root[data-theme="light"] .auth-consent{
  background:var(--ivory);border-color:var(--border);color:var(--slate);
}
:root[data-theme="light"] .pw-meter span{background:var(--border)}
:root[data-theme="light"] .auth-admin .auth-card{border-color:var(--border)}

@media(max-width:560px){
  .auth-bar{top:12px}
  .auth-body{padding-top:62px}
}

/* Les bandeaux étaient des teintes translucides posées sur un fond sombre :
   sur la carte claire ils perdaient leur contraste. Les jetons de statut de
   base.css les redonnent, déjà accordés au thème. */
:root[data-theme="light"] .flash-success{background:var(--success-bg);border-color:var(--success-border);color:var(--success)}
:root[data-theme="light"] .flash-error{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger)}
:root[data-theme="light"] .flash-info{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning)}

/* ---- Ce qui restait écrit en clair sur la carte claire ----
   Les liens de pied de carte, le panneau « adresse non confirmée » et le
   dépliant de changement d'adresse étaient encore en rgba(237,234,226,…) :
   du blanc à 55 % d'opacité, invisible sur une carte blanche. C'est le
   « Mot de passe oublié ? / Créer un compte » qui s'effaçait en mode clair.

   Règle à retenir pour cette feuille : tout ce qui vit DANS .auth-card se
   redonne ici en jetons. Seul ce qui vit dehors — la marque, .auth-foot —
   reste en blanc, puisque le décor reste sombre dans les deux thèmes. */
:root[data-theme="light"] .auth-links a{color:var(--muted)}
:root[data-theme="light"] .auth-links a:hover{color:var(--ink)}
:root[data-theme="light"] .auth-alt{color:var(--muted)}
:root[data-theme="light"] .auth-alt a{color:var(--gold)}
:root[data-theme="light"] .auth-admin .auth-alt a{color:var(--bordeaux-light)}

:root[data-theme="light"] .auth-stuck{
  background:var(--warning-bg);border-color:var(--warning-border);
}
:root[data-theme="light"] .auth-stuck-h{color:var(--warning)}
:root[data-theme="light"] .auth-stuck-h i{background:var(--gold)}
:root[data-theme="light"] .auth-stuck-p{color:var(--slate)}
:root[data-theme="light"] .auth-stuck-p b{color:var(--ink)}

:root[data-theme="light"] .auth-fix{border-top-color:var(--border)}
:root[data-theme="light"] .auth-fix summary{color:var(--gold)}
:root[data-theme="light"] .auth-fix summary:hover{color:var(--ink)}
:root[data-theme="light"] .auth-fix[open] summary{color:var(--muted)}
:root[data-theme="light"] .auth-fix-note{color:var(--muted)}

/* Le sceau doré et le titre de section gardent l'or : il porte sur blanc,
   c'est la teinte --gold et non --gold-light qui convient là. */
:root[data-theme="light"] .auth-seal{color:var(--gold)}
:root[data-theme="light"] .auth-admin .auth-seal{color:var(--bordeaux)}
:root[data-theme="light"] .rg-sec > legend{color:var(--gold)}
:root[data-theme="light"] .auth-admin .rg-sec > legend{color:var(--bordeaux)}
:root[data-theme="light"] .otp-spam svg{color:var(--gold)}
:root[data-theme="light"] .auth-admin .otp-spam svg{color:var(--bordeaux)}
:root[data-theme="light"] .auth-consent input{accent-color:var(--gold)}

/* ============================================================
   PAGE INTROUVABLE (includes/page_404.php)
   Le « 0 » est le sceau de la maison : le chiffre se lit, la
   marque reste. Même carte, même fond que la connexion.
   ============================================================ */
.nf{text-align:center}
.nf-num{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin:-6px 0 22px;
  font-family:var(--font-d,'Fraunces',serif);font-weight:400;
  font-size:92px;line-height:1;letter-spacing:-.02em;
  color:var(--gold-light);
}
.nf-num span{
  background:linear-gradient(180deg,var(--gold-light) 0%,#B8913A 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.nf-seal{width:78px;height:78px;color:var(--gold-light);opacity:.9;animation:nfTurn 24s linear infinite}
.auth-admin .nf-num, .auth-admin .nf-seal{color:#C98C8D}
.auth-admin .nf-num span{background:linear-gradient(180deg,#E3B5B6 0%,#A86B6C 100%);-webkit-background-clip:text;background-clip:text}
@keyframes nfTurn{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .nf-seal{animation:none} }

.nf-path{
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  margin:-12px 0 26px;font-size:11px;
}
.nf-path span{
  font-family:var(--font-m);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(237,234,226,.4);
}
.nf-path code{
  font-family:var(--font-m);font-size:12px;color:rgba(255,255,255,.78);
  background:rgba(255,255,255,.05);border:1px solid rgba(233,225,197,.14);
  border-radius:6px;padding:4px 9px;max-width:100%;overflow-wrap:anywhere;
}
.nf-home{display:flex;align-items:center;justify-content:center;text-decoration:none}
.nf-alt{margin-top:18px}
@media (max-width:480px){
  .nf-num{font-size:72px}
  .nf-seal{width:60px;height:60px}
}
/* thème clair : la carte devient ivoire, l'adresse suit */
:root[data-theme="light"] .nf-path span{color:var(--hint)}
:root[data-theme="light"] .nf-path code{color:var(--ink);background:var(--ivory);border-color:var(--border)}
:root[data-theme="light"] .nf-num, :root[data-theme="light"] .nf-seal{color:var(--gold)}
:root[data-theme="light"] .nf-num span{background:linear-gradient(180deg,#C9A227 0%,#8E6A1F 100%);-webkit-background-clip:text;background-clip:text}

/* ============================================================
   Sélecteur de langue des écrans d'accès — à gauche de l'interrupteur
   de thème, sur le même décor sombre.
   ============================================================ */
.auth-bar{gap:10px}
.auth-lang{position:relative;margin-right:auto}
.auth-lang>summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  padding:6px 10px;border-radius:999px;font-size:12.5px;font-weight:600;letter-spacing:.04em;
  color:rgba(255,255,255,.82);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);
}
.auth-lang>summary::-webkit-details-marker{display:none}
.auth-lang>summary:hover{color:#fff;background:rgba(255,255,255,.14)}
.auth-lang>summary svg{width:13px;height:13px;transition:transform .2s}
.auth-lang[open]>summary svg{transform:rotate(180deg)}
.auth-lang-flag{display:inline-flex;width:18px;height:13px;border-radius:2px;overflow:hidden;flex:none}
.auth-lang-flag svg{width:100%;height:100%;display:block}
.auth-lang-menu{
  position:absolute;top:calc(100% + 8px);left:0;min-width:180px;padding:6px;z-index:90;
  background:var(--card,#fff);border:1px solid var(--line,rgba(0,0,0,.1));border-radius:12px;
  box-shadow:0 18px 40px rgba(0,0,0,.28);
}
.auth-lang-menu a{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;
  font-size:13.5px;color:var(--ink,#0B1B2B);text-decoration:none;
}
.auth-lang-menu a:hover{background:rgba(201,162,39,.12)}
.auth-lang-menu a.on{font-weight:600;color:var(--gold-dark,#9A7B17)}