/* ============================================================
   BASE — jetons de design, reset, utilitaires partagés
   Chargé par toutes les pages.
   ============================================================ */

:root{
  /* ---- Marque : ne bascule JAMAIS ----
     --navy sert de fond aux surfaces profondes (en-tête, héros, pied de page,
     barre latérale, cartes bancaires). Ces surfaces sont sombres dans les deux
     thèmes : la charte tient à ce bleu nuit, l'inverser dissoudrait l'identité.
     Pour la COULEUR DE TEXTE des titres, voir --title plus bas : c'est là que
     se joue la bascule, et les deux usages doivent rester séparés — sans quoi,
     en sombre, une surface navy se retrouve blanche avec du texte blanc. */
  --navy:#0B1B2B; --navy-2:#122539; --navy-soft:#1B3049;
  --gold:#A9812C; --gold-light:#C9A227; --gold-pale:#E8DCB8;
  --bordeaux:#5C1A1B; --bordeaux-light:#7A2426;

  /* ---- Surfaces et texte : basculent ---- */
  --ivory:#F6F2EA;          /* fond de page */
  --ivory-2:#EFE9DC;        /* fond de section alternée */
  --card:#FFFFFF;           /* fond de carte */
  --title:#0B1B2B;          /* titres — s'éclaircit en sombre */
  --ink:#1B2430;            /* texte courant */
  --slate:#3E5064;
  --muted:#66707D;
  --hint:#8A93A0;
  --border:#E4DFD2;
  --border-dark:rgba(233,225,197,.14);

  /* ---- Statuts ---- */
  --success:#2E6B4F; --success-bg:#E7F1EA; --success-border:#C7DFCF;
  --warning:#9C6B15; --warning-bg:#FBF1DD; --warning-border:#EFDBA8;
  --danger:#7A2E2E;  --danger-bg:#F7E9E9;  --danger-border:#E9C9C9;
  --info:#2B4C72;    --info-bg:#E8EFF7;    --info-border:#C6D8EA;

  /* ---- Teintes de catégorie ----
     Pastilles d'opération, anneau de répartition, icônes du back-office.
     Ce sont des jetons et non des codes écrits dans le PHP parce qu'ils
     servent de COULEUR DE TEXTE sur fond de carte : un bleu nuit ou un
     bordeaux plein, lisibles sur ivoire, disparaissent sur fond sombre.
     Chaque teinte a donc sa version éclaircie dans les blocs ci-dessous. */
  --tone-blue:#2B4C72;  --tone-gold:#A9812C;  --tone-green:#2E6B4F;
  --tone-slate:#3E5064; --tone-red:#5C1A1B;   --tone-amber:#9C6B15;
  --tone-sky:#0284C7;   --tone-ink:#334155;   --tone-grey:#6F7E8C;
  --tone-rose:#7A2E2E;

  /* ---- Forme ---- */
  --radius:14px; --radius-lg:20px; --radius-sm:9px;
  --shadow-sm:0 1px 3px rgba(11,27,43,.08);
  --shadow:0 10px 30px rgba(11,27,43,.10);
  --shadow-lg:0 30px 70px rgba(11,27,43,.22);

  --font-d:'Fraunces',serif; --font-b:'Inter',sans-serif; --font-m:'IBM Plex Mono',monospace;

  color-scheme:light;
}

/* ============================================================
   THÈME SOMBRE

   Un bleu nuit profond, jamais un gris d'écran de veille : la marque est ce
   bleu, le fond doit en garder la trace. L'or y gagne même en éclat.

   Deux blocs identiques, et c'est voulu : [data-theme="dark"] pour un choix
   explicite, prefers-color-scheme pour qui n'a jamais touché l'interrupteur.
   Le second est neutralisé par :not([data-theme="light"]), sinon un visiteur
   ayant demandé le clair sur un appareil réglé en sombre se verrait imposer
   le sombre malgré lui.

   Les ombres portées ne se voient pas sur fond sombre : elles s'effacent au
   profit de bordures plus franches, seul moyen d'y détacher une carte.
   ============================================================ */

:root[data-theme="dark"]{
  color-scheme:dark;

  --ivory:#070E15;
  --ivory-2:#0C1621;
  --card:#111C28;
  --title:#EAF0F6;
  --ink:#DCE4EC;
  --slate:#AFBECB;
  --muted:#93A2B1;
  --hint:#6F7E8C;
  --border:#1F2E3D;
  --border-dark:rgba(233,225,197,.10);

  --gold:#D3A63F;
  --gold-light:#E0B84E;
  --gold-pale:#F0E2BC;
  /* --bordeaux sert d'accent au back-office, donc de couleur de texte : il
     s'éclaircit comme les autres encres. Les surfaces bordeaux (bandeau
     d'environnement, écran de connexion) sont écrites en dur ailleurs. */
  --bordeaux:#8E2E30;
  --bordeaux-light:#B8494B;

  --success:#5FBE90; --success-bg:#0F241B; --success-border:#20402F;
  --warning:#DCA943; --warning-bg:#251C0C; --warning-border:#3F3117;
  --danger:#E08585;  --danger-bg:#2A1315;  --danger-border:#452023;
  --info:#7FB0E0;    --info-bg:#0E1C2A;    --info-border:#1D3348;

  --tone-blue:#7FB0E0;  --tone-gold:#D3A63F;  --tone-green:#5FBE90;
  --tone-slate:#9FB2C4; --tone-red:#D98486;   --tone-amber:#DCA943;
  --tone-sky:#5BB8EE;   --tone-ink:#A3B3C6;   --tone-grey:#93A2B1;
  --tone-rose:#E08585;

  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --shadow-lg:0 30px 70px rgba(0,0,0,.6);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;

    --ivory:#070E15;
    --ivory-2:#0C1621;
    --card:#111C28;
    --title:#EAF0F6;
    --ink:#DCE4EC;
    --slate:#AFBECB;
    --muted:#93A2B1;
    --hint:#6F7E8C;
    --border:#1F2E3D;
    --border-dark:rgba(233,225,197,.10);

    --gold:#D3A63F;
    --gold-light:#E0B84E;
    --gold-pale:#F0E2BC;
    --bordeaux:#8E2E30;
    --bordeaux-light:#B8494B;

    --success:#5FBE90; --success-bg:#0F241B; --success-border:#20402F;
    --warning:#DCA943; --warning-bg:#251C0C; --warning-border:#3F3117;
    --danger:#E08585;  --danger-bg:#2A1315;  --danger-border:#452023;
    --info:#7FB0E0;    --info-bg:#0E1C2A;    --info-border:#1D3348;

    --tone-blue:#7FB0E0;  --tone-gold:#D3A63F;  --tone-green:#5FBE90;
    --tone-slate:#9FB2C4; --tone-red:#D98486;   --tone-amber:#DCA943;
    --tone-sky:#5BB8EE;   --tone-ink:#A3B3C6;   --tone-grey:#93A2B1;
    --tone-rose:#E08585;

    --shadow-sm:0 1px 2px rgba(0,0,0,.5);
    --shadow:0 10px 30px rgba(0,0,0,.45);
    --shadow-lg:0 30px 70px rgba(0,0,0,.6);
  }
}

/* ---------------------------------------------------------- reset */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-b);background:var(--ivory);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;transition:background .25s,color .25s}
h1,h2,h3,h4{font-family:var(--font-d);color:var(--title);line-height:1.15;font-weight:500}
a{text-decoration:none;color:inherit}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
img,svg{display:block;max-width:100%}
input,select,textarea{font:inherit;outline:none}
ul{list-style:none}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#CBBF9E;border-radius:5px}
:root[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2B3C4D}
::-webkit-scrollbar-track{background:transparent}
:focus-visible{outline:2px solid var(--gold-light);outline-offset:2px}

/* Le sceau SVG est déclaré en ligne dans chaque page (<symbol id="seal-mark">). */
.seal-defs{position:absolute;width:0;height:0;overflow:hidden}

.eyebrow{font-family:var(--font-m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:10px}
.eyebrow::before{content:'';width:22px;height:1px;background:var(--gold)}
.container{max-width:1180px;margin:0 auto;padding:0 32px}
@media(max-width:640px){.container{padding:0 20px}}
.num{font-family:var(--font-m);font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------- marque
   La marque ne se comprime jamais : sans flex-shrink:0 et sans white-space,
   un en-tête trop chargé la rétrécit et fait passer le premier lien de
   navigation par-dessus le logo. */
.brand{display:flex;align-items:center;gap:12px;color:#fff;flex-shrink:0}
.brand-mark{width:36px;height:36px;flex-shrink:0}
.brand-name{font-family:var(--font-d);font-size:19px;letter-spacing:.02em;color:#fff;white-space:nowrap}
.brand-name b{font-weight:600}
.brand-name .tld{color:var(--gold-light);font-weight:400;font-style:italic}

/* ---------------------------------------------------------- boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:3px;font-size:13px;font-weight:500;letter-spacing:.03em;transition:all .25s;white-space:nowrap}
.btn-gold{background:var(--gold-light);color:#0B1B2B}
.btn-gold:hover{background:var(--gold-pale);transform:translateY(-1px)}
.btn-outline{border:1px solid rgba(255,255,255,.35);color:#fff}
.btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.btn-outline-dark{border:1px solid var(--title);color:var(--title)}
.btn-outline-dark:hover{background:var(--title);color:var(--ivory)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-2)}
.btn-lg{padding:15px 30px;font-size:14px}
.btn-block{width:100%}
.btn-ghost{color:var(--gold);font-size:13px}
.btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}

/* ------------------------------------------------- interrupteur clair/sombre
   Une pastille qui glisse entre un soleil et une lune. Deux boutons côte à
   côte obligeaient à comparer lequel était allumé pour savoir où l'on se
   trouvait ; ici l'état et la destination se lisent d'un regard.

   Ces règles vivent dans base.css et non dans app.css : l'interrupteur paraît
   AUSSI sur le site public, hors de .app-shell, où les jetons --a-* n'existent
   pas. Elles n'emploient donc que des jetons de racine. */
.theme-switch{
  display:inline-flex;align-items:center;gap:9px;flex-shrink:0;
  padding:0;border:0;background:none;cursor:pointer;
  font-family:var(--font-b);font-size:12.5px;font-weight:500;
  color:var(--muted);line-height:1;
}
.theme-switch-track{
  position:relative;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:space-between;
  width:52px;height:28px;padding:0 6px;
  border-radius:9999px;
  border:1px solid var(--border);background:var(--ivory-2);
  transition:background .18s ease,border-color .18s ease;
}
.theme-switch-ico{display:inline-flex;z-index:1;line-height:0;transition:color .18s ease,opacity .18s ease}
.theme-switch-ico svg{width:13px;height:13px;display:block}
.theme-switch-ico.sun{color:var(--gold)}
.theme-switch-ico.moon{color:var(--hint);opacity:.55}
.theme-switch-knob{
  position:absolute;top:2px;left:2px;
  width:22px;height:22px;border-radius:50%;
  background:var(--card);border:1px solid var(--border);
  box-shadow:0 2px 6px rgba(11,27,43,.25);
  transition:transform .22s cubic-bezier(.2,.7,.2,1),background .18s ease,border-color .18s ease;
}
.theme-switch:hover .theme-switch-track{border-color:var(--gold-light)}
.theme-switch:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px;border-radius:9999px}
.theme-switch-label{white-space:nowrap}
.theme-on-dark{display:none}

/* Sombre : la pastille glisse à droite, la lune s'allume, le soleil s'éteint.
   Deux blocs identiques, et c'est voulu — [data-theme] pour un choix explicite,
   prefers-color-scheme pour qui n'a jamais touché l'interrupteur. */
:root[data-theme="dark"] .theme-switch-knob{transform:translateX(24px);background:var(--gold-light);border-color:var(--gold-light)}
:root[data-theme="dark"] .theme-switch-track{background:#0A1420;border-color:var(--border)}
:root[data-theme="dark"] .theme-switch-ico.sun{color:var(--hint);opacity:.5}
:root[data-theme="dark"] .theme-switch-ico.moon{color:var(--gold-pale);opacity:1}
:root[data-theme="dark"] .theme-on-light{display:none}
:root[data-theme="dark"] .theme-on-dark{display:inline}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-switch-knob{transform:translateX(24px);background:var(--gold-light);border-color:var(--gold-light)}
  :root:not([data-theme="light"]) .theme-switch-track{background:#0A1420;border-color:var(--border)}
  :root:not([data-theme="light"]) .theme-switch-ico.sun{color:var(--hint);opacity:.5}
  :root:not([data-theme="light"]) .theme-switch-ico.moon{color:var(--gold-pale);opacity:1}
  :root:not([data-theme="light"]) .theme-on-light{display:none}
  :root:not([data-theme="light"]) .theme-on-dark{display:inline}
}

/* Dans une barre du haut : l'interrupteur seul. La place y est comptée et les
   deux icônes se suffisent. */
.theme-bar .theme-switch-label{display:none}

/* Sur une surface navy — barre latérale, pied de page, en-tête du site — le
   texte et la piste s'inversent : ces surfaces sont sombres dans les DEUX
   thèmes, les jetons ne les suivent donc pas. */
.theme-switch.on-dark{color:rgba(255,255,255,.72)}
.theme-switch.on-dark:hover{color:#fff}
.theme-switch.on-dark .theme-switch-track{background:rgba(255,255,255,.08);border-color:rgba(233,225,197,.22)}
.theme-switch.on-dark .theme-switch-knob{background:rgba(255,255,255,.92);border-color:rgba(255,255,255,.45)}
.theme-switch.on-dark .theme-switch-ico.moon{color:rgba(255,255,255,.6)}
:root[data-theme="dark"] .theme-switch.on-dark .theme-switch-knob{background:var(--gold-light);border-color:var(--gold-light)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-switch.on-dark .theme-switch-knob{background:var(--gold-light);border-color:var(--gold-light)}
}

/* Au bas d'une barre latérale : centré, détaché du lien qui le précède.
   Collé contre lui et aligné à gauche, il se lisait comme une entrée de
   navigation de plus au lieu d'un réglage. */
.theme-switch.sidebar-theme{width:100%;justify-content:center;margin-top:12px;padding:8px 12px;font-size:13px}

/* ----------------------------------------------------------- toasts

   EN BAS À DROITE, et non plus en haut.

   Elles y étaient, et deux choses les rendaient inutiles : elles tombaient sur
   la barre du haut, où vivent déjà le thème, la langue et le menu du compte —
   donc sur ce qu'on est en train de regarder — et elles ne SORTAIENT pas :
   `toast()` les faisait disparaître en modifiant leur style à la main, sans
   état déclaré, ce qui empêchait de les refermer avant l'heure.

   Elles entrent et sortent maintenant par la droite, du même côté : le
   mouvement dit d'où elles viennent, et le regard n'a pas à les chercher. C'est
   exactement le geste des notifications de la messagerie (.fid-toast) — un seul
   vocabulaire pour tout le site, côté client comme côté back-office.

   ⚠️ Le décalage du bas n'est pas décoratif : la bulle Fideibot est posée à
   `right:20px; bottom:20px` sur presque toutes les pages du client. Une pile de
   notifications à `bottom:20px` la recouvrirait — et c'est le bouton par lequel
   on demande de l'aide quand quelque chose ne va pas. */
.toast-wrap{
  position:fixed;right:20px;bottom:calc(20px + 56px + 14px);z-index:400;
  display:flex;flex-direction:column;gap:10px;
  width:min(360px,calc(100vw - 40px));
  pointer-events:none;                 /* la pile laisse passer les clics… */
}
.toast{
  pointer-events:auto;                 /* …mais chaque notification les reçoit */
  background:var(--card);border:1px solid var(--border);border-left:3px solid var(--success);
  border-radius:12px;padding:13px 15px;box-shadow:var(--shadow-lg,var(--shadow));
  display:flex;align-items:flex-start;gap:11px;
  animation:toastIn .28s cubic-bezier(.2,.8,.2,1);
}
@keyframes toastIn{from{transform:translateX(26px);opacity:0}to{transform:none;opacity:1}}
/* L'état de sortie est une CLASSE, et non trois styles posés à la main : on
   peut ainsi la refermer d'un clic sans se battre avec des styles en ligne. */
.toast.is-out{opacity:0;transform:translateX(26px);transition:opacity .24s ease,transform .24s ease}
.toast > i{font-size:19px;flex:0 0 auto;line-height:1.3}
.toast-msg{
  flex:1;min-width:0;font-size:13px;line-height:1.45;color:var(--title);font-weight:500;
  overflow-wrap:anywhere;
}
.toast-x{
  flex:0 0 auto;width:22px;height:22px;padding:0;cursor:pointer;
  border:none;background:none;border-radius:50%;
  font-size:16px;line-height:1;color:var(--hint);
}
.toast-x:hover{background:var(--ivory);color:var(--ink)}
/* Les graines rendues par le serveur ne s'affichent jamais : le script les lit
   au chargement puis les retire. Sans ce `display:none`, un script qui n'a pas
   chargé laisserait le message en double, une fois en texte nu. */
.toast-seed{display:none}

/* ------------------------------------------------ masque (menu mobile) */
.overlay-mask{display:none;position:fixed;inset:0;background:rgba(3,8,14,.62);z-index:45}
.overlay-mask.show{display:block}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ============================================================
   SOCLE RESPONSIVE

   Trois règles valent pour toutes les racines, et il vaut mieux les poser
   ici qu'à dix endroits :

   1. rien ne déborde horizontalement — un site qui défile latéralement sur
      téléphone paraît cassé avant même d'être lu ;
   2. les cibles tactiles font au moins 40 px ;
   3. les pastilles de thème et les boutons ne rétrécissent pas sous la
      pression d'un voisin trop large.
   ============================================================ */

html,body{max-width:100%;overflow-x:hidden}

/* iOS zoome sur tout champ dont le texte descend sous 16 px, et ne dézoome
   jamais ensuite. Le confort de lecture d'un formulaire vaut mieux que deux
   dixièmes de point de densité. */
@media(max-width:640px){
  input,select,textarea{font-size:16px !important}
  .btn{padding:12px 18px}
  .btn-lg{padding:14px 22px;font-size:13.5px}
}

@media(max-width:480px){
  .container{padding:0 16px}
  .theme-switch-track{width:56px;height:30px}
  .theme-switch-knob{width:24px;height:24px}
  :root[data-theme="dark"] .theme-switch-knob{transform:translateX(26px)}
}

/* Les toasts occupent la largeur sur téléphone : coincés à droite, ils
   tronquent leur message. Le décalage du bas laisse la bulle Fideibot
   accessible, et `env(safe-area-inset-bottom)` les tient au-dessus de la barre
   de gestes des iPhone récents — sans lui, la dernière ligne passe dessous. */
@media(max-width:560px){
  .toast-wrap{left:12px;right:12px;width:auto;bottom:calc(76px + env(safe-area-inset-bottom))}
  .toast{width:100%}
}

/* ============================================================
   VERRE — jetons partagés

   Une matière, deux lectures. En CLAIR c'est du verre dépoli posé sur de
   l'ivoire : laiteux, un reflet chaud en haut, une arête blanche sur le bord
   supérieur. En SOMBRE c'est du verre teinté bleu nuit : plus dense, un halo
   doré en haut à droite, et l'arête devient une ligne d'or très diluée.

   Ce n'est pas la même surface éclaircie — ce sont deux matériaux. Un verre
   clair simplement assombri donne du gris sale, et un verre sombre éclairci
   donne du plastique.

   `backdrop-filter` n'est pas supporté partout. Les fonds portent donc une
   alpha assez haute pour rester lisibles SANS flou : là où le flou manque, on
   perd l'effet, jamais la lisibilité.
   ============================================================ */
:root{
  --glass-bg:rgba(255,255,255,.76);
  --glass-bg-2:rgba(246,242,234,.92);
  --glass-line:rgba(11,27,43,.10);          /* arête extérieure */
  --glass-edge:rgba(255,255,255,.9);        /* arête intérieure, en haut */
  --glass-sheen:radial-gradient(120% 80% at 80% -20%, rgba(169,129,44,.10), transparent 60%);
  --glass-gloss:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 46%);
  --glass-shadow:0 18px 44px -18px rgba(11,27,43,.28), 0 2px 8px rgba(11,27,43,.06);
  --glass-hover:rgba(11,27,43,.045);
  --glass-blur:blur(16px) saturate(165%);
}
:root[data-theme="dark"]{
  --glass-bg:rgba(13,23,34,.74);
  --glass-bg-2:rgba(17,28,40,.92);
  --glass-line:rgba(233,225,197,.13);
  --glass-edge:rgba(233,225,197,.16);
  --glass-sheen:radial-gradient(130% 90% at 82% -25%, rgba(211,166,63,.16), transparent 62%);
  --glass-gloss:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 52%);
  --glass-shadow:0 22px 54px -20px rgba(0,0,0,.72), 0 2px 10px rgba(0,0,0,.4);
  --glass-hover:rgba(233,225,197,.07);
  --glass-blur:blur(20px) saturate(125%);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --glass-bg:rgba(13,23,34,.74);
    --glass-bg-2:rgba(17,28,40,.92);
    --glass-line:rgba(233,225,197,.13);
    --glass-edge:rgba(233,225,197,.16);
    --glass-sheen:radial-gradient(130% 90% at 82% -25%, rgba(211,166,63,.16), transparent 62%);
    --glass-gloss:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 52%);
    --glass-shadow:0 22px 54px -20px rgba(0,0,0,.72), 0 2px 10px rgba(0,0,0,.4);
    --glass-hover:rgba(233,225,197,.07);
    --glass-blur:blur(20px) saturate(125%);
  }
}

/* ============================================================
   SÉLECTEURS EN LISTE

   ⚠️ LA LISTE DÉROULANTE NATIVE NE SE STYLE PAS. Ni fond, ni rayon, ni flou,
   ni survol : le navigateur la dessine avec les widgets du système. C'est pour
   cela qu'elle jurait — bleu Windows et gris désactivé au milieu d'un écran
   bleu nuit et or. Aucune règle CSS n'y pouvait quoi que ce soit.

   On la REMPLACE donc, et seulement sur les pointeurs fins (select.js) :

   · le <select> natif reste en place, garde sa valeur, son `required`, son
     étiquette et ses écouteurs `change`. Rien n'est recopié, rien n'est
     simulé — c'est lui qui est soumis ;
   · au clic, on empêche l'ouverture native et on ouvre notre liste, posée
     dans <body> pour échapper aux `overflow:hidden` des cartes à filets ;
   · AU TOUCHER, on ne touche à rien : le sélecteur roulant d'iOS et d'Android
     est meilleur que tout ce qu'on pourrait dessiner, et il est accessible.

   Sans JavaScript, le sélecteur reste parfaitement natif : les règles de verre
   ne s'appliquent qu'à `.fsel-sel`, classe posée par le script. Un écran dont
   le script n'a pas chargé garde un sélecteur qui marche, pas un champ aveugle.
   ============================================================ */

.fsel{position:relative;display:block;min-width:0;border-radius:9px}

/* Spécificité 0,2,1 : il faut passer devant `.app-shell .fi` (0,2,0), qui
   s'applique à la plupart de ces sélecteurs et dont la feuille est chargée
   après celle-ci. */
.fsel select.fsel-sel{
  -webkit-appearance:none;appearance:none;
  width:100%;padding-right:34px;cursor:pointer;
  background-color:transparent;background-image:none;
  position:relative;z-index:1;
}
.fsel select.fsel-sel::-ms-expand{display:none}

/* Le fond de verre est porté par le CONTENEUR et non par le champ : un
   `backdrop-filter` posé sur un <select> est ignoré par plusieurs moteurs. */
.fsel::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
}
.fsel::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:var(--glass-gloss),var(--glass-sheen);
  box-shadow:inset 0 1px 0 var(--glass-edge);
}
.fsel-caret{
  position:absolute;top:50%;right:12px;transform:translateY(-50%);
  width:16px;height:16px;pointer-events:none;z-index:2;color:var(--muted);
  transition:transform .22s cubic-bezier(.2,.8,.2,1),color .18s ease;
}
.fsel-caret svg{width:100%;height:100%;display:block}
.fsel.open .fsel-caret{transform:translateY(-50%) rotate(180deg);color:var(--gold)}
.fsel:hover .fsel-caret{color:var(--gold)}

/* ---- la liste, posée dans <body> ---- */
.fsel-pop{
  position:fixed;z-index:600;margin:0;padding:6px;
  max-height:min(340px,60vh);overflow-y:auto;overscroll-behavior:contain;
  border-radius:14px;border:1px solid var(--glass-line);
  /* Le reflet est posé en IMAGE DE FOND et non en calque : dans une boîte qui
     défile, un fond reste accroché au cadre, un calque absolu descendrait avec
     les options. Le verre doit rester sur la vitre, pas sur ce qu'il y a
     derrière. */
  background:var(--glass-gloss),var(--glass-sheen),var(--glass-bg-2);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-shadow),inset 0 1px 0 var(--glass-edge);
  font-family:var(--font-b);font-size:13.5px;color:var(--ink);
  opacity:0;transform:translateY(-6px) scale(.985);transform-origin:top center;
  transition:opacity .16s ease,transform .18s cubic-bezier(.2,.8,.2,1);
}
.fsel-pop.up{transform-origin:bottom center;transform:translateY(6px) scale(.985)}
.fsel-pop.show{opacity:1;transform:none}

.fsel-opt{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:9px;
  padding:9px 11px;border-radius:9px;cursor:pointer;
  line-height:1.4;color:var(--ink);
  transition:background .13s ease,color .13s ease;
}
/* ⚠️ Deux <span> dans une option : la COCHE et le LIBELLÉ. Les viser par
   `.fsel-opt > span` les attrapait tous les deux — la coche héritait du
   `flex:1` et prenait la moitié de la ligne, le libellé se retrouvait écrasé
   contre le bord et tronqué (« Frère ou s… » sur une liste à moitié vide).
   Chacun a donc sa classe, et plus aucun sélecteur de type ici. */
.fsel-lbl{
  flex:1;min-width:0;
  /* On RETOURNE À LA LIGNE plutôt que de couper. Une liste de choix dont on
     ne peut pas lire les choix ne sert à rien : mieux vaut deux lignes que
     « Pièce justi… ». La liste s'élargit d'abord, et ne passe à la ligne que
     passé sa largeur maximale. */
  white-space:normal;overflow-wrap:anywhere;
}
.fsel-tick{
  width:16px;height:16px;flex:0 0 16px;opacity:0;color:var(--gold);
  align-self:flex-start;margin-top:2px;
}
.fsel-tick svg{width:100%;height:100%;display:block}
.fsel-opt.sel .fsel-tick{opacity:1}
.fsel-opt.sel{color:var(--title);font-weight:600}

/* `on` est la ligne SURVOLÉE OU PARCOURUE AU CLAVIER, `sel` la valeur en
   cours. Les deux sont distinctes : on se promène dans la liste sans choisir,
   et les confondre fait croire que la valeur a déjà changé. */
.fsel-opt.on{background:var(--glass-hover);color:var(--title)}
.fsel-opt.off{opacity:.42;cursor:not-allowed}
.fsel-group{
  position:relative;z-index:1;
  padding:10px 11px 5px;font-family:var(--font-m);
  font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--hint);
}
.fsel-pop::-webkit-scrollbar{width:8px}
.fsel-pop::-webkit-scrollbar-thumb{background:var(--glass-line);border-radius:99px}
.fsel-pop::-webkit-scrollbar-track{background:transparent}

@media (prefers-reduced-motion: reduce){
  .fsel-pop,.fsel-caret{transition:none}
}