/* ==========================================================================
   GestaPro — liaison entre le design system (theme.css, repris de l'ERP Update IT & Training)
   et les composants existants : classes gp-* des vues + composants Bootstrap 5.3.
   Toutes les couleurs passent par les jetons du thème : le mode sombre suit automatiquement.
   ========================================================================== */

/* ---------- Bootstrap : jetons alignés sur la charte ---------- */
:root, [data-bs-theme] {
  --bs-body-font-family:var(--font); --bs-body-color:var(--text); --bs-body-bg:transparent;
  --bs-emphasis-color:var(--heading); --bs-secondary-color:var(--muted); --bs-tertiary-color:var(--faint);
  --bs-border-color:var(--line); --bs-border-radius:var(--r-md);
  --bs-link-color:var(--brand); --bs-link-hover-color:var(--brand-600); --bs-link-color-rgb:231,39,115; --bs-link-hover-color-rgb:199,28,97;
  --bs-primary:#E72773; --bs-primary-rgb:231,39,115;
  --bs-heading-color:var(--heading);
}
body { font-family:var(--font); font-size:15px; }
.text-muted { color:var(--muted) !important; }
.border-bottom, .border-top, .border { border-color:var(--line-2) !important; }
.h6, h6 { color:var(--heading); }
a.text-decoration-none { color:var(--brand); font-weight:600; }
a.text-decoration-none:hover { color:var(--brand-600); }

/* menu latéral : Bootstrap ne doit pas transformer les listes du menu en rangées */
.sn-nav .nav { display:block; flex-wrap:nowrap; }
.sn-nav .nav-link { --bs-nav-link-padding-x:.7rem; }
.sn-nav .nav-link:focus { color:inherit; }
.sn-nav .nav-link.active, .sn-nav .nav-link.active:focus { color:#fff; }
.topnav, .sidenav { font-family:var(--font); }

/* ---------- En-tête de page ---------- */
.gp-page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem 1.5rem; flex-wrap:wrap; margin-bottom:1.35rem; }
.gp-page-head h1 { font-family:var(--font-display); font-size:1.72rem; font-weight:800; letter-spacing:-.03em; line-height:1.2; color:var(--heading); margin:0; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.gp-page-head p { margin:.35rem 0 0; color:var(--muted); font-size:.92rem; }
.gp-page-head > div:last-child:not(:first-child), .gp-page-head .d-flex { gap:.55rem !important; }

/* ---------- Cartes ---------- */
.gp-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--shadow-sm); padding:1.35rem; color:var(--text); }
.gp-card > h2.h6:first-child, .gp-card > h3.h6:first-child, .gp-card > .h6:first-child,
.gp-card > .d-flex:first-child:has(> .h6) {
  margin:-1.35rem -1.35rem 1.15rem !important; padding:1rem 1.35rem; min-height:58px; border-bottom:1px solid var(--line-2);
  display:flex; align-items:center; gap:.55rem; font-family:var(--font); font-size:1rem !important; font-weight:650 !important; letter-spacing:-.01em; color:var(--heading);
}
.gp-card > .d-flex:first-child:has(> .h6) .h6 { margin:0 !important; font-size:1rem; font-weight:650; }
.gp-card > h2.h6:first-child::before, .gp-card > .h6:first-child::before, .gp-card > .d-flex:first-child:has(> .h6) > .h6::before {
  content:''; width:18px; height:4px; border-radius:99px; background:var(--grad-brand); flex:none; display:inline-block; margin-inline-end:.5rem; vertical-align:middle; }
/* tableaux pleine largeur dans une carte */
.gp-card > .table-responsive, .gp-card > table.table { margin-inline-start:-1.35rem; margin-inline-end:-1.35rem; width:calc(100% + 2.7rem); max-width:none; }
.gp-card > .table-responsive:last-child, .gp-card > table.table:last-child { margin-bottom:-1.35rem !important; }
.gp-card > .table-responsive > .table { margin-bottom:0; }
.gp-card form.row:first-child { padding-bottom:1rem; border-bottom:1px solid var(--line-2); margin-bottom:0 !important; }

/* ---------- Indicateurs ---------- */
.gp-kpis { display:grid; gap:1rem; margin-bottom:1.35rem; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); }
.gp-kpi { position:relative; display:flex; flex-direction:column; gap:.2rem; padding:1rem 1.15rem 1.05rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--shadow-sm); color:var(--text); overflow:hidden; }
.gp-kpi .lbl { display:flex; flex-direction:row-reverse; align-items:center; justify-content:space-between; gap:.6rem; font-size:.82rem; color:var(--muted); font-weight:550; margin-bottom:.15rem; }
.gp-kpi .lbl:not(:has(.ic)) { flex-direction:row; justify-content:flex-start; }
.gp-kpi .lbl .ic { width:38px; height:38px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center; flex:none; color:#fff; fill:currentColor; stroke:none; vertical-align:middle;
  background:var(--gg, var(--grad-gray)); box-shadow:0 8px 18px -10px var(--glow, rgba(15,18,34,.5)), inset 0 1px 0 rgba(255,255,255,.22); }
.gp-kpi .lbl .ic i { font-size:1.05rem; line-height:1; }
.gp-kpi .val { font-family:var(--font-display); font-size:1.55rem; font-weight:750; color:var(--heading); letter-spacing:-.03em; line-height:1.15; font-variant-numeric:tabular-nums; }
.gp-kpi .val small { font-size:.85rem; font-weight:600; color:var(--muted); }
.gp-kpi::after { content:''; position:absolute; inset-inline-end:-40px; top:-40px; width:140px; height:140px; border-radius:50%; background:radial-gradient(circle, var(--glow-soft, transparent), transparent 70%); pointer-events:none; }
.kpi-dec { font-size:.85rem; font-weight:600; color:var(--muted); letter-spacing:0; }

/* tons des pastilles et icônes GestaPro → tons de la charte */
.gp-indigo  { --gg:var(--grad-blue);   --glow:rgba(33,80,212,.5);  --glow-soft:rgba(33,80,212,.12); }
.gp-emerald { --gg:var(--grad-teal);   --glow:rgba(15,179,154,.5); --glow-soft:rgba(15,179,154,.14); }
.gp-sky     { --gg:var(--grad-cyan);   --glow:rgba(15,181,211,.5); --glow-soft:rgba(15,181,211,.14); }
.gp-amber   { --gg:var(--grad-amber);  --glow:rgba(245,158,11,.5); --glow-soft:rgba(255,176,32,.16); }
.gp-rose    { --gg:var(--grad-brand);  --glow:rgba(231,39,115,.5); --glow-soft:rgba(231,39,115,.13); }
.gp-violet  { --gg:var(--grad-violet); --glow:rgba(124,58,237,.5); --glow-soft:rgba(124,58,237,.13); }
.gp-kpi:has(.ic.gp-indigo)  { --glow-soft:rgba(33,80,212,.12); }
.gp-kpi:has(.ic.gp-emerald) { --glow-soft:rgba(15,179,154,.14); }
.gp-kpi:has(.ic.gp-sky)     { --glow-soft:rgba(15,181,211,.14); }
.gp-kpi:has(.ic.gp-amber)   { --glow-soft:rgba(255,176,32,.16); }
.gp-kpi:has(.ic.gp-rose)    { --glow-soft:rgba(231,39,115,.13); }
.gp-kpi:has(.ic.gp-violet)  { --glow-soft:rgba(124,58,237,.13); }

/* ---------- Boutons ---------- */
.btn { --bs-btn-focus-box-shadow:var(--ring); }
.btn .bi { font-size:1em; line-height:1; }
/* action principale (créer, enregistrer, valider) : couleur de marque */
.btn-gp { background:var(--surface); color:var(--heading) !important; border:1px solid var(--line-strong); box-shadow:var(--shadow-xs); }
.btn-gp:hover { background:var(--surface-2); border-color:var(--line-strong); color:var(--heading) !important; filter:none; }
.btn-gp.gp-emerald, .btn-gp.gp-indigo, .gp-page-head > .btn-gp, .gp-page-head > a.btn-gp:last-child, .btn-gp[type=submit].w-100,
.btn-primary { background:var(--grad-brand); color:#fff !important; border-color:transparent; box-shadow:0 8px 18px -10px rgba(231,39,115,.75), inset 0 1px 0 rgba(255,255,255,.18); }
.btn-gp.gp-emerald:hover, .btn-gp.gp-indigo:hover, .gp-page-head > .btn-gp:hover, .btn-gp[type=submit].w-100:hover,
.btn-primary:hover { background:var(--grad-brand); filter:brightness(1.06); color:#fff !important; border-color:transparent; }
.btn-gp.gp-rose { background:var(--danger); color:#fff !important; border-color:transparent; }
.btn-gp.gp-rose:hover { filter:brightness(1.08); }
.btn-gp:has(.bi-whatsapp) { background:linear-gradient(135deg, #3ee08a, #12a150); color:#fff !important; border-color:transparent; }
.btn-gp .bi, .btn-gp i { color:inherit; }
.btn-gp:not(.gp-emerald):not(.gp-indigo):not(.gp-rose) .bi { color:var(--gt, var(--muted)); }
.btn-gp.gp-amber  { --gt:var(--amber-text); }
.btn-gp.gp-violet { --gt:var(--violet-text); }
.btn-gp.gp-sky    { --gt:var(--cyan-text); }
.btn-outline-secondary { background:var(--surface); color:var(--heading); border-color:var(--line-strong); box-shadow:var(--shadow-xs); }
.btn-outline-secondary:hover { background:var(--surface-2); color:var(--heading); border-color:var(--line-strong); }
.btn-outline-danger { background:var(--surface); color:var(--danger); border-color:var(--line-strong); }
.btn-outline-danger:hover { background:var(--danger-soft); color:var(--danger); border-color:var(--danger); }
.btn-lg { padding:.78rem 1.35rem; font-size:.98rem; border-radius:12px; }
/* actions de ligne dans les tableaux : boutons icônes discrets, teinte au survol */
.table .btn-sm.btn-gp, .table .btn-sm.btn-outline-danger, .table .btn-sm.btn-outline-secondary {
  width:34px; height:34px; padding:0 !important; border:none !important; background:transparent !important; box-shadow:none !important; border-radius:9px; color:#8b929c !important; }
.table .btn-sm.btn-gp:hover, .table .btn-sm.btn-outline-secondary:hover { background:var(--surface-3) !important; color:var(--heading) !important; filter:none; }
.table .btn-sm.gp-amber:hover { background:var(--warning-soft) !important; color:var(--warning) !important; }
.table .btn-sm.gp-rose:hover, .table .btn-sm.btn-outline-danger:hover { background:var(--danger-soft) !important; color:var(--danger) !important; }
.table .btn-sm.gp-indigo:hover, .table .btn-sm.gp-sky:hover { background:var(--info-soft) !important; color:var(--info) !important; }
.table .btn-sm.gp-violet:hover { background:var(--violet-soft) !important; color:var(--violet) !important; }
.table .btn-sm .bi { font-size:1.05rem; color:inherit !important; }
.table td.text-end form.d-inline + a, .table td.text-end a + form.d-inline, .table td.text-end a + a { margin-inline-start:.15rem; }

/* ---------- Tableaux ---------- */
.table { --bs-table-bg:transparent; --bs-table-color:var(--text); --bs-table-border-color:var(--line-2); --bs-table-hover-bg:var(--surface-2); --bs-table-striped-bg:var(--surface-2); color:var(--text); margin-bottom:0; }
.table > :not(caption) > * > * { background-color:transparent; box-shadow:none; }
.table thead th, .table > thead > tr > th { background:var(--surface-2); color:var(--muted); font-size:.72rem; font-weight:650; text-transform:uppercase; letter-spacing:.06em; border-bottom:1px solid var(--line); }
.table tbody tr:hover td { background:var(--surface-2); }
.table.table-sm td, .table.table-sm th { padding:.55rem .85rem; }
.table td.fw-semibold, .table td .fw-semibold, .table td.fw-bold { color:var(--heading); }
.table tfoot td, .table tfoot th { color:var(--heading); font-weight:700; background:var(--surface-2); }
.table-responsive { overflow-x:auto; }

/* ---------- Badges (statuts) : pastilles douces de la charte ---------- */
.badge { --bs-badge-padding-x:.62rem; --bs-badge-padding-y:.2rem; --bs-badge-font-size:.75rem; --bs-badge-font-weight:650; --bs-badge-border-radius:999px; }
.text-bg-success { background:var(--success-soft) !important; color:var(--success) !important; }
.text-bg-danger  { background:var(--danger-soft) !important;  color:var(--danger) !important; }
.text-bg-warning { background:var(--warning-soft) !important; color:var(--warning) !important; }
.text-bg-info    { background:var(--info-soft) !important;    color:var(--info) !important; }
.text-bg-primary { background:var(--brand-50) !important;     color:var(--brand) !important; }
.text-bg-secondary, .text-bg-light { background:var(--surface-3) !important; color:var(--slate-text, #5f6670) !important; }
.text-bg-dark    { background:var(--slate-soft) !important; color:var(--heading) !important; }
.badge .bi { font-size:.85em; }
.badge:has(.bi)::before { display:none; }
.gp-page-head h1 .badge { font-family:var(--font); font-size:.78rem; letter-spacing:0; vertical-align:middle; }

/* ---------- Formulaires ---------- */
.form-label { display:block; margin-bottom:.35rem; font-size:.82rem; font-weight:600; color:var(--heading); }
.form-control, .form-select { min-height:40px; padding:.55rem .8rem; border:1px solid var(--line-strong); border-radius:var(--r-md); background-color:var(--surface); color:var(--heading); font:400 .92rem/1.4 var(--font); box-shadow:var(--shadow-xs); transition:border-color .13s, box-shadow .13s; }
.form-select { padding-inline-end:2.2rem; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%236b7280' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .8rem center; background-size:12px 8px; }
.form-control:hover, .form-select:hover { border-color:#c1c6cd; }
.form-control:focus, .form-select:focus { outline:none; border-color:var(--brand); box-shadow:var(--ring); background-color:var(--surface); color:var(--heading); }
.form-control::placeholder { color:#a9afb8; }
.form-control-sm, .form-select-sm { min-height:34px; padding-top:.35rem; padding-bottom:.35rem; font-size:.87rem; border-radius:9px; }
.form-select-sm { padding-inline-start:.6rem; }
.form-control-lg { min-height:46px; font-size:.98rem; }
textarea.form-control { min-height:88px; }
.input-group > .form-control, .input-group > .form-select { box-shadow:none; }
.input-group { box-shadow:var(--shadow-xs); border-radius:var(--r-md); }
.input-group-text { background:var(--surface-2); border-color:var(--line-strong); color:var(--muted); font-size:.84rem; }
.input-group > .btn { border-radius:0 var(--r-md) var(--r-md) 0; }
.form-check-input { border-color:var(--line-strong); }
.form-check-input:checked { background-color:var(--brand); border-color:var(--brand); }
.form-check-input:focus { box-shadow:var(--ring); border-color:var(--brand); }
.form-check-label { color:var(--text); }

/* ---------- Onglets (pilules) : segments de la charte ---------- */
.container-app .nav-pills { display:inline-flex; max-width:100%; gap:.2rem; padding:.22rem; border-radius:11px; background:var(--surface-3); }
.container-app .nav-pills .nav-link { display:inline-flex; align-items:center; gap:.4rem; padding:.42rem .85rem; border-radius:8px; color:var(--muted); font:550 .87rem/1.3 var(--font); background:none; }
.container-app .nav-pills .nav-link:hover { color:var(--heading); }
.container-app .nav-pills .nav-link.active { background:var(--surface); color:var(--heading); box-shadow:var(--shadow-sm); font-weight:650; }
.container-app .nav-pills .nav-link.active .bi { color:var(--brand); }

/* ---------- Menus déroulants Bootstrap ---------- */
.dropdown-menu { --bs-dropdown-bg:var(--surface-elev); --bs-dropdown-border-color:var(--line); --bs-dropdown-link-color:var(--heading); --bs-dropdown-link-hover-bg:var(--surface-3); --bs-dropdown-link-hover-color:var(--heading); --bs-dropdown-link-active-bg:var(--brand); padding:.35rem; border-radius:var(--r-lg); box-shadow:var(--shadow-lg); font-size:.88rem; }
.dropdown-item { border-radius:9px; padding:.5rem .7rem; font-weight:500; }

/* ---------- Pagination ---------- */
.pagination { padding:1rem 0 0; border-top:none; gap:.3rem; --bs-pagination-border-width:0; }
.pagination .page-link { min-width:34px; height:34px; padding:0 .6rem; display:inline-flex; align-items:center; justify-content:center; border-radius:9px !important; border:1px solid var(--line); color:var(--text); font-size:.85rem; background:var(--surface); box-shadow:none; }
.pagination .page-link:hover { border-color:var(--line-strong); color:var(--heading); background:var(--surface-2); }
.pagination .page-item.active .page-link { background:var(--heading); color:#fff; border-color:var(--heading); }
.pagination .page-item.disabled .page-link { opacity:.45; }
.gp-card > nav:last-child .pagination, .gp-card > .pagination:last-child { margin-bottom:0; }

/* ---------- Messages dans le contenu (hors notifications flottantes) ---------- */
.container-app .alert { display:flex; gap:.65rem; align-items:flex-start; padding:.8rem 1rem; border-radius:var(--r-lg); font-weight:500; font-size:.88rem; box-shadow:none; animation:none;
  background:linear-gradient(135deg, var(--blue-soft), #f3f0ff); color:#1e3a8a; border:1px solid #dce6ff; }
.container-app .alert::before, .container-app .alert::after { display:none; }
.container-app .alert-warning { background:var(--warning-soft); color:var(--warning); border-color:transparent; }
.container-app .alert-danger { background:var(--danger-soft); color:var(--danger); border-color:transparent; }
.container-app .alert-success { background:var(--success-soft); color:var(--success); border-color:transparent; }
:root[data-theme="dark"] .container-app .alert { background:var(--info-soft); color:var(--info); border-color:transparent; }
:root[data-theme="dark"] .container-app .alert-warning { background:var(--warning-soft); color:var(--warning); }
:root[data-theme="dark"] .container-app .alert-danger { background:var(--danger-soft); color:var(--danger); }
.note-warning { background:var(--warning-soft) !important; color:var(--warning) !important; border-color:transparent !important; }
.note-warning .ic { color:var(--warning) !important; }

/* ---------- Divers ---------- */
.gp-content-narrow { max-width:980px; }
.list-unstyled li a { color:var(--heading); font-weight:600; }
.list-unstyled li a:hover { color:var(--brand); }
.display-1 { font-family:var(--font-display); }
.login-visuel-logo svg { display:block; }

/* ---------- Écran étroit : le menu latéral glisse (géré par theme.css) ---------- */
@media (max-width:700px) {
  .gp-card { padding:1rem; }
  .gp-card > h2.h6:first-child, .gp-card > .h6:first-child, .gp-card > .d-flex:first-child:has(> .h6) { margin:-1rem -1rem 1rem !important; padding:.85rem 1rem; }
  .gp-card > .table-responsive, .gp-card > table.table { margin-inline-start:-1rem; margin-inline-end:-1rem; width:calc(100% + 2rem); }
  .gp-card > .table-responsive:last-child, .gp-card > table.table:last-child { margin-bottom:-1rem !important; }
  .gp-page-head h1 { font-size:1.45rem; }
}

/* ---------- Impression : le document reste neutre ---------- */
@media print {
  .sidenav, .topnav, .footer-app, .toasts, .module-tabs { display:none !important; }
  .main-content { margin:0 !important; }
}

.vide .tuile { margin:0 auto; }
.ref { white-space:nowrap; }

/* ---------- Logo officiel Gesta Pro (version claire / sombre selon le thème) ---------- */
.gp-logo-img { display:block; width:auto; max-width:100%; }
.gp-logo-sombre { display:none !important; }
:root[data-theme="dark"] .gp-logo-clair { display:none !important; }
:root[data-theme="dark"] .gp-logo-sombre { display:block !important; }
.sn-brand .sn-logo img { height:42px !important; width:auto; }
.sn-brand .sn-coeur img { height:34px !important; width:auto; }
.login-logo img { height:46px; width:auto; }
.login-visuel-logo img { height:52px; width:auto; }

.gp-form-narrow { max-width:860px; }

/* ---------- Colonnes Bootstrap : un contenu large ne fait jamais déborder la page ---------- */
.container-app .row > * { min-width:0; }
/* ---------- Éditeur de lignes : le tableau défile dans sa carte plutôt que d'écraser les champs ---------- */
#linesTable { min-width:900px; }
#linesTable td input { min-width:64px; }
#linesTable td:first-child input { min-width:200px; }
@media (max-width:700px) { #linesTable { min-width:0; } #linesTable td input, #linesTable td:first-child input { min-width:0; } }

/* ---------- Espace de démonstration ---------- */
.gp-demo-bar { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin:-.4rem 0 1.1rem; padding:.6rem .9rem; border-radius:var(--r-lg); font-size:.86rem;
  background:linear-gradient(100deg, rgba(246,26,116,.10), rgba(43,117,243,.10)); border:1px solid rgba(246,26,116,.22); color:var(--heading); }
.gp-demo-bar .ic { color:var(--brand); }
.gp-demo-bar a { margin-inline-start:auto; font-weight:700; }
.gp-demo-logins { margin-top:1.4rem; padding-top:1.1rem; border-top:1px dashed var(--line); }
.gp-demo-logins-t { display:flex; align-items:center; gap:.45rem; font-weight:700; font-size:.88rem; color:var(--heading); margin:0 0 .6rem; }
.gp-demo-login { display:flex; flex-direction:column; align-items:flex-start; width:100%; margin-bottom:.45rem; padding:.55rem .8rem; border-radius:var(--r-md);
  border:1px solid var(--line-strong); background:var(--surface); color:var(--heading); text-align:start; cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.gp-demo-login:hover { border-color:var(--brand); box-shadow:var(--ring); }
.gp-demo-login b { font-size:.88rem; } .gp-demo-login small { color:var(--muted); font-size:.76rem; font-family:var(--mono); }
.gp-demo-logins-n { font-size:.76rem; color:var(--faint); margin:.4rem 0 0; }

/* ── Fiche document : formulaire de règlement sous le tableau ── */
.card-table > form.card-body { padding:1rem 1.35rem 1.2rem; }
/* ── Pages finances & paramètres ── */
.effet-statut { min-width:7.5rem; }
/* ── fin Pages finances & paramètres ── */

/* ── Configuration › Modules ── */
.modules-grille { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:.85rem; }
.module-carte { display:grid; grid-template-columns:auto 1fr auto; align-items:start; gap:.75rem; padding:.9rem 1rem; border:1px solid var(--line); border-radius:var(--r-lg, 14px); background:var(--surface); cursor:pointer; position:relative; }
.module-carte.actif { border-color:var(--brand); box-shadow:0 0 0 3px rgba(231,39,115,.08); }
.module-carte .module-texte { display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.module-carte .module-texte b { color:var(--heading); font-size:.92rem; }
.module-carte .module-texte small { color:var(--muted); font-size:.8rem; line-height:1.35; }
.module-carte .module-texte em { color:var(--faint); font-size:.74rem; font-style:normal; }
.module-carte > .badge { position:absolute; inset-inline-end:.8rem; bottom:.6rem; }

/* ---------- Langue de l'interface : sélecteur de la barre du haut et de la page de connexion ---------- */
.btn-rond.btn-langue { width:auto; min-width:40px; padding:0 .55rem; gap:.3rem; }
.btn-langue .langue-code { font-size:.72rem; font-weight:700; color:var(--muted); }
.menu-deroulant.langue .menu-liste { min-width:200px; }
.menu-deroulant.langue .menu-liste button.actif { color:var(--brand); font-weight:650; }
.menu-deroulant.langue .menu-liste button .ic { margin-inline-start:auto; }
.menu-deroulant.langue .langue-code { display:inline-flex; min-width:1.8rem; font-size:.7rem; font-weight:700; color:var(--muted); }
.login-forme { position:relative; }
.login-langues { position:absolute; top:1.2rem; inset-inline-end:1.4rem; display:flex; gap:.35rem; flex-wrap:wrap; z-index:2; }
.login-langues form { margin:0; }
.login-langues button { border:1px solid var(--line); background:var(--surface); color:var(--muted); border-radius:99px; padding:.22rem .75rem; font:600 .8rem/1.4 var(--font); cursor:pointer; }
.login-langues button[lang="ar"] { font-family:'Cairo', var(--font); }
.login-langues button.actif { border-color:var(--brand); color:var(--brand); background:var(--brand-50, transparent); }
@font-face { font-family:'Cairo'; src:url('../fonts/cairo/cairo-var-arabic.woff2') format('woff2'); font-weight:200 900; font-display:swap; unicode-range:U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
[lang="ar"] { letter-spacing:0; }
option[lang="ar"], button[lang="ar"] { font-family:'Cairo', var(--font); }