/* Palette, theme sombre, chassis du Pokedex, modales et apercu. */

  :root{
    /* ---- Palette ---- */
    --dex-red:#ee3a3a;
    --dex-red-deep:#b5211f;
    --dex-red-darker:#7c1614;
    --chrome-hi:#fbfcff;
    --chrome-lo:#c9ced8;
    --ink:#1c1e29;
    --ink-soft:#6b7080;
    --ink-faint:#9aa0b0;
    --screen:#f6f5f0;
    --screen-edge:#e7e5dc;
    --card:#ffffff;
    --card-border:#e7e6ef;
    --gold:#f2a900;
    --gold-deep:#c98600;
    --caught:#2f9e63;
    --caught-soft:#e5f6ec;
    --danger:#c93a2e;
    /* Deux teintes qui ne servent QU'AUX ICONES. La palette n'avait ni bleu ni
       violet, et n'en avait pas besoin tant que tout etait rouge, or et vert ;
       mais une dizaine de gestes a distinguer ne tient pas sur trois teintes.
       Mesures de contraste sur --card et --screen : 4.9 et 4.7 pour le bleu,
       5.1 et 4.9 pour le violet — au-dessus du 3:1 attendu d'un element
       d'interface, et lisibles a seize pixels. */
    --ic-bleu:#2f74c9;
    --ic-violet:#7a5bc4;
    --font-display:"Press Start 2P", monospace;
    --font-body:"Outfit", -apple-system, "Segoe UI", sans-serif;
    --font-data:"JetBrains Mono", "SF Mono", Consolas, monospace;
    /* Reprise du modèle de fiche du 24 août 2026 : une seule ombre pour
       toutes les cartes de l'application. Quand chacune posait la sienne, une
       modale et un panneau ne flottaient pas à la même hauteur sans que rien
       ne dise pourquoi. */
    --ombre:0 30px 60px -20px rgba(28,30,41,.34);
  }

  /* ---- L'échelle des cartes ------------------------------------------
     Le modèle du 24 août 2026 ne pose que six arrondis. Toutes les cartes de
     l'application s'y rangent, sans autre valeur intermédiaire :

        18px   modale, fiche — ce qui recouvre l'écran
        14px   grande carte et cadre d'image — la carte d'un Pokémon dans la
               grille, celle d'un jeu, le portrait de la fiche
        11px   bloc, panneau — ce qui regroupe
        10px   ligne, carte intérieure, champ de saisie
         7px   pastille, petite commande
       999px   pilule ronde

     Les bordures font 1 px. Le 1,5 px reste aux bascules d'état (.chip-check
     et .etat) : elles doivent peser plus lourd que leur voisinage, c'est ce
     qui les distingue d'un simple cadre.

     Les sur-titres de bloc sont en --font-data 9,5 px / .14em, les
     micro-étiquettes en 8,5 px / .12em, les deux en capitales et --ink-faint.
     Tout chiffre qui peut changer sous les yeux porte tabular-nums, sinon la
     colonne danse à chaque mise à jour. */

  /* ---- Thème sombre ----------------------------------------------------
     Seules les couleurs bougent : tout le reste de la feuille passe par ces
     variables, donc rien d'autre n'a besoin d'être dupliqué. Le rouge du
     boîtier est assombri pour ne pas éblouir sur fond noir. */
  html[data-theme="dark"]{
    --dex-red:#8e2b2b;
    --dex-red-deep:#671b1b;
    --dex-red-darker:#3f1010;
    --chrome-hi:#2a2c36;
    --chrome-lo:#3b3e4a;
    --ink:#e8e9f0;
    --ink-soft:#a0a4b4;
    --ink-faint:#6e7385;
    --screen:#1a1c24;
    --screen-edge:#15171e;
    --card:#232630;
    --card-border:#343846;
    --gold:#d99a12;
    --gold-deep:#f0b53a;
    --caught:#2f9e63;
    --caught-soft:#1d3b2b;
    --danger:#e4665a;
    /* Eclaircis en sombre : les memes valeurs qu'en clair tombent a 2.1 sur
       --card, sous le seuil. */
    --ic-bleu:#5fa2e8;
    --ic-violet:#a58ae0;
    --ombre:0 30px 60px -20px rgba(0,0,0,.6);
  }
  html[data-theme="dark"] body{ background:#0e0f14; }
  /* Huit rattrapages vivaient ici : le cadre d'un sprite, la barre d'une
     génération, la case à cocher, l'onglet survolé, la glissière des portées,
     la note de portée, le numéro et le témoin de forme. Chacun repeignait en
     sombre une couleur que sa règle avait codée en dur. Ces règles passent
     maintenant par les jetons de la palette, qui changent seuls avec le
     thème — les rattrapages n'étaient plus redondants mais faux : plus
     spécifiques, ils auraient écrasé le jeton et remis le gris fixe.
     Seul celui de la jauge reste : son tracé est un attribut SVG. */
  html[data-theme="dark"] .gauge .track{ stroke:#31343f; }
  html[data-theme="dark"] .toolbar input,
  html[data-theme="dark"] .toolbar select,
  html[data-theme="dark"] .toggle-btn{ background:var(--card); color:var(--ink); }
  html[data-theme="dark"] .modal-card input[type="text"]{ background:var(--screen); color:var(--ink); }

  .theme-btn{
    margin-left:10px;
    width:34px; height:34px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.28);
    background:rgba(0,0,0,.18);
    color:#fff;
    font-size:15px;
    line-height:1;
    cursor:pointer;
    flex-shrink:0;
    transition:background 120ms;
  }
  .theme-btn:hover{ background:rgba(0,0,0,.32); }
  .theme-btn:focus-visible{ outline:2.5px solid #fff; outline-offset:2px; }

  /* Le bouton des mises à jour, en deux états.

     AU REPOS il ressemble à ses deux voisins — rond, blanc sur le rouge du
     boîtier — et ne porte qu'une flèche circulaire. Il ne s'agit pas de
     l'effacer mais de ne pas inquiéter : rien à installer, rien à crier.

     QUAND UNE VERSION EXISTE il s'allonge en pilule dorée. L'or plutôt que le
     blanc parce que c'est alors la seule chose de cette barre qui demande une
     décision — et elle doit se voir sans clignoter.

     Il était auparavant absent tant qu'il n'y avait rien : on ne pouvait donc
     pas vérifier soi-même, et rien ne disait que l'application le faisait. */
  .maj-btn{
    margin-left:10px;
    width:34px; height:34px;
    padding:0;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.28);
    background:rgba(0,0,0,.18);
    color:#fff;
    font-family:var(--font-body);
    font-size:16px; font-weight:400;
    line-height:1;
    cursor:pointer;
    flex-shrink:0;
    white-space:nowrap;
    transition:background 120ms, opacity 120ms, width 160ms;
  }
  .maj-btn:hover{ background:rgba(0,0,0,.32); }
  .maj-btn:focus-visible{ outline:2.5px solid #fff; outline-offset:2px; }

  /* L'état qui compte. La largeur repasse en auto : le libellé est un mot,
     plus une icône, et un cercle de 34 px le couperait. */
  .maj-btn.trouvee{
    width:auto;
    padding:0 14px;
    border-radius:999px;
    border-color:var(--gold);
    background:var(--gold);
    color:#2a1f05;
    font-family:var(--font-data);
    font-size:11px; font-weight:700;
    letter-spacing:.06em;
  }
  .maj-btn.trouvee:hover{ background:var(--gold-deep); border-color:var(--gold-deep); }
  /* Pendant la vérification : la flèche tourne. Une seconde d'attente sans
     signe donne l'impression d'un bouton mort. */
  .maj-btn.cherche{ animation:maj-tourne 1.1s linear infinite; }
  @keyframes maj-tourne{ to{ transform:rotate(360deg); } }
  @media (prefers-reduced-motion:reduce){ .maj-btn.cherche{ animation:none; opacity:.6; } }
  /* Pendant le téléchargement : le libellé devient un pourcentage, et le bouton
     cesse de répondre. Rendre la main ici relancerait un second transfert. */
  .maj-btn:disabled{ cursor:default; opacity:.72; }

  /* Langue des noms de Pokémon. Même famille que le bouton de thème, mais en
     pilule : le libellé porte un mot, pas une icône, et doit rester lisible. */
  .lang-btn{
    margin-left:10px;
    height:34px;
    padding:0 13px;
    border-radius:17px;
    border:1px solid rgba(255,255,255,.28);
    background:rgba(0,0,0,.18);
    color:#fff;
    font-family:var(--font-body);
    font-size:12.5px;
    font-weight:600;
    line-height:1;
    cursor:pointer;
    flex-shrink:0;
    transition:background 120ms;
  }
  .lang-btn:hover{ background:rgba(0,0,0,.32); }
  .lang-btn:focus-visible{ outline:2.5px solid #fff; outline-offset:2px; }

  /* ---- Actions groupées ---- */
  .bulk-bar{
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    margin:0 0 12px;
    padding:8px 12px;
    background:var(--card);
    border:1px solid var(--card-border);
    border-radius:11px;
  }
  .bulk-label{
    font-family:var(--font-data);
    font-size:11px;
    color:var(--ink-soft);
    font-variant-numeric:tabular-nums;
    flex:1; min-width:150px;
  }
  .bulk-label b{ color:var(--ink); font-weight:700; }
  .bulk-btn{
    font-family:var(--font-body);
    font-size:11.5px; font-weight:700;
    color:var(--ink-soft);
    background:var(--screen);
    border:1px solid var(--card-border);
    border-radius:7px;
    padding:6px 12px;
    cursor:pointer;
    transition:border-color 120ms, color 120ms;
  }
  .bulk-btn:hover:not(:disabled){ border-color:var(--chrome-lo); color:var(--ink); }
  .bulk-btn:disabled{ opacity:.45; cursor:not-allowed; }
  .bulk-btn:focus-visible{ outline:2.5px solid var(--dex-red); }

  /* ---- Comparaison avec le Pokédex d'un ami ---- */
  .compare-bar{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    margin:0 0 10px; padding:9px 13px;
    background:color-mix(in srgb, #a06ee0 10%, var(--card));
    border:1px solid color-mix(in srgb, #a06ee0 35%, var(--card-border));
    border-left:3px solid #a06ee0;
    border-radius:11px;
  }
  .compare-label{ flex:1; min-width:180px; font-size:12px; color:var(--ink-soft); line-height:1.5; }
  .compare-label b{ color:var(--ink); font-weight:700; }

  .card-compare{
    display:block;
    margin-top:6px;
    font-family:var(--font-data);
    font-size:8.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
    text-align:center;
    border-radius:7px;
    padding:3px 5px;
  }
  .card-compare.deux  { background:var(--caught); color:#fff; }
  .card-compare.lui   { background:#5a3a8c; color:#e6d8ff; }
  .card-compare.moi   { background:#2b4a6b; color:#cfe6ff; }
  .card-compare.aucun { background:transparent; color:var(--ink-faint); border:1px dashed var(--card-border); }

  /* ---- Ce que la fiche partage avec le reste de l'application ----
     La mise en page de la fiche vit dans fiche.css depuis le modèle du 24 août
     2026. Ne restent ici que le repli des logos de type et la liste des jeux,
     que d'autres écrans emploient aussi. */
  .type-chip{
    font-family:var(--font-body);
    font-size:11px; font-weight:700; letter-spacing:.03em;
    color:#fff;
    border-radius:999px;
    padding:4px 13px;
    text-shadow:0 1px 1px rgba(0,0,0,.3);
  }
  .jeux-liste{ display:flex; gap:5px; flex-wrap:wrap; }
  .jeu-puce{
    font-size:11px; font-weight:600;
    color:var(--ink-soft);
    background:var(--card);
    border:1px solid var(--card-border);
    border-radius:7px;
    padding:3px 9px;
  }
  .jeu-puce.premier{ background:var(--dex-red); border-color:var(--dex-red); color:#fff; }
  .card-lock{
    position:absolute; bottom:5px; right:5px;
    font-size:11px; line-height:1;
    background:var(--card);
    border:1px solid var(--card-border);
    border-radius:7px;
    padding:2px 5px;
    cursor:help;
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;background:transparent;}
  body{
    font-family:var(--font-body);
    color:var(--ink);
    display:flex;
    justify-content:center;
    padding:20px 14px 40px;
  }

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  }

  /* ===================== SHELL / CHASSIS ===================== */
  .dex{
    width:100%;
    max-width:980px;
    background:
      radial-gradient(120% 160% at 15% -10%, rgba(255,255,255,0.22), rgba(255,255,255,0) 45%),
      linear-gradient(155deg, var(--dex-red) 0%, var(--dex-red-deep) 62%, var(--dex-red-darker) 100%);
    border-radius:26px;
    padding:20px;
    box-shadow:
      0 30px 60px -20px rgba(90,10,10,0.55),
      0 2px 0 rgba(255,255,255,0.25) inset,
      0 -6px 18px rgba(0,0,0,0.25) inset;
    position:relative;
  }
  .dex::before{
    content:"";
    position:absolute; inset:0;
    border-radius:26px;
    background:repeating-linear-gradient(115deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 6px);
    pointer-events:none;
    opacity:0.5;
  }

  .dex-header{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px 14px;
    padding:2px 6px 18px;
    position:relative;
  }
  .dex-lens{
    width:38px;height:38px;border-radius:50%;
    flex-shrink:0;
    background:radial-gradient(circle at 32% 28%, #bfe9ff 0%, #57b9ee 28%, #1c74ad 62%, #0d3f5f 100%);
    box-shadow:
      0 0 0 4px var(--chrome-hi),
      0 0 0 6px var(--dex-red-darker),
      0 3px 6px rgba(0,0,0,0.35);
  }
  .dex-lens::after{
    content:"";
    position:absolute;
    width:9px;height:9px;
    margin:6px 0 0 8px;
    border-radius:50%;
    background:rgba(255,255,255,0.85);
    filter:blur(0.5px);
  }
  .dex-titleblock{display:flex; flex-direction:column; gap:2px;}
  .dex-eyebrow{
    font-family:var(--font-data);
    font-size:10px;
    letter-spacing:0.22em;
    color:rgba(255,255,255,0.75);
    text-transform:uppercase;
  }
  .dex-title{
    font-family:var(--font-body);
    font-weight:800;
    font-size:26px;
    color:#fff;
    letter-spacing:-0.01em;
    text-shadow:0 2px 0 rgba(0,0,0,0.15);
  }
  .dex-lights{margin-left:auto; display:flex; gap:8px;}
  .dex-lights span{
    width:10px;height:10px;border-radius:50%;
    background:rgba(255,255,255,0.35);
    box-shadow:0 0 0 2px rgba(0,0,0,0.15) inset;
  }
  .dex-lights span:nth-child(1){background:#ffd66b;}
  .dex-lights span:nth-child(2){background:#8fe08a;}
  .dex-lights span:nth-child(3){background:#88c6ff;}

  .player-badge{
    font-family:var(--font-body);
    font-weight:600;
    font-size:12.5px;
    color:#fff;
    background:rgba(0,0,0,0.18);
    border:1px solid rgba(255,255,255,0.28);
    border-radius:999px;
    padding:6px 12px;
    margin-left:10px;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
    transition:background 120ms;
  }
  .player-badge:hover{ background:rgba(0,0,0,0.3); }
  .player-badge .pencil{ opacity:0.7; font-size:11px; }
  .player-badge:focus-visible{ outline:2.5px solid #fff; outline-offset:2px; }

  /* ===================== PLAYER NAME MODAL ===================== */
  .modal-overlay{
    position:fixed; inset:0;
    background:rgba(20,16,20,0.55);
    backdrop-filter:blur(3px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    z-index:50;
  }
  .modal-card{
    width:100%;
    max-width:360px;
    background:var(--card);
    border:1px solid var(--card-border);
    border-radius:18px;
    padding:26px 24px 22px;
    box-shadow:var(--ombre);
    text-align:center;
    animation:modal-pop 220ms cubic-bezier(.2,.9,.3,1.2);
  }
  @keyframes modal-pop{
    0%{ opacity:0; transform:scale(0.92) translateY(6px); }
    100%{ opacity:1; transform:scale(1) translateY(0); }
  }
  .modal-eyebrow{
    font-family:var(--font-data);
    font-size:10.5px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--dex-red);
    font-weight:600;
    margin-bottom:6px;
  }
  .modal-title{
    font-family:var(--font-body);
    font-weight:800;
    font-size:19px;
    color:var(--ink);
    margin:0 0 6px;
  }
  .modal-sub{
    font-size:12.5px;
    color:var(--ink-soft);
    margin:0 0 16px;
    line-height:1.4;
  }
  .modal-card input[type="text"]{
    width:100%;
    font-family:var(--font-body);
    font-weight:600;
    font-size:15px;
    text-align:center;
    color:var(--ink);
    border:1px solid var(--card-border);
    background:var(--screen);
    padding:11px 12px;
    border-radius:10px;
    margin-bottom:16px;
  }
  .modal-card input[type="text"]:focus-visible{ outline:2.5px solid var(--dex-red); }
  .profile-btn.current{ border-color:var(--caught); background:var(--caught-soft); }
  /* ---- Aperçu d'un Pokémon (clic sur une carte) ---- */
  /* La fiche porte maintenant stats, talents, évolution et lieux d'obtention :
     420 px n'y suffisaient plus. Elle s'élargit et défile si la fenêtre est
     courte, sans jamais déborder de l'écran. */
  /* La carte ne defile plus elle-meme : c'est son contenu qui defile, dans un
     conteneur a part. Sans ca, la croix partait vers le haut des qu'on
     descendait dans la fiche, et se retrouvait collee a l'ascenseur. */
  .preview-card{
    width:100%; max-width:880px;
    max-height:92vh;
    display:flex; flex-direction:column;
    overflow:hidden;
    background:var(--card);
    border:1px solid var(--card-border);
    border-radius:18px;
    box-shadow:var(--ombre);
    /* PLUS DE CENTRAGE PAR DEFAUT. La fiche est la seule carte de ce genre, et
       elle se lit comme une page : un titre centre au-dessus de vingt blocs
       alignes a gauche faisait deux mises en page dans le meme cadre. Ce qui
       doit rester centre le dit desormais lui-meme — c'est plus bavard, et
       c'est le seul moyen de savoir en lisant une regle ce qu'elle fait. */
    text-align:left;
    animation:modal-pop 200ms cubic-bezier(.2,.9,.3,1.2);
    position:relative;
  }
  .preview-defilant{
    flex:1 1 auto; min-height:0;
    overflow-y:auto;
    padding:22px 22px 18px;
  }

  /* Posee au-dessus du conteneur defilant, et decalee de la largeur de
     l'ascenseur : elle reste visible du haut en bas de la fiche, sur un fond
     plein — en transparent, elle disparaissait sur les sprites clairs. */
  .preview-close{
    position:absolute; top:12px; right:20px;
    z-index:6;
    width:34px; height:34px;
    border:1px solid var(--card-border); border-radius:50%;
    background:var(--card); color:var(--ink);
    font-size:15px; line-height:1; cursor:pointer;
    box-shadow:0 2px 10px rgba(0,0,0,.35);
    transition:background 120ms, color 120ms, border-color 120ms;
  }
  .preview-close:hover{ background:var(--dex-red); border-color:var(--dex-red); color:#fff; }
  .preview-close:focus-visible{ outline:2.5px solid var(--dex-red); outline-offset:2px; }
  /* Le portrait, le nom, le numéro et les deux états de capture vivaient ici,
     sous les noms de l'ancienne fiche. Le modèle du 24 août 2026 les redessine
     dans fiche.css en .portrait, .nom, .portrait-no, .surtitre, .etats et
     .etat : plus rien ne portait ces classes. */

  .profile-sep{
    font-family:var(--font-data); font-size:10px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--ink-faint); text-align:center; margin:2px 0 8px;
  }
  .modal-error{
    display:none;
    font-size:12px;
    font-weight:600;
    color:var(--danger);
    margin:-8px 0 14px;
    line-height:1.35;
  }
  .modal-error.visible{ display:block; }
  /* UNE ATTENTE N'EST PAS UNE ERREUR. Le meme element porte les deux — il n'y
     en a qu'un dans cette fenetre — mais « Discord peut te demander de te
     connecter d'abord » en rouge vif se lit comme un echec, alors que tout se
     passe bien. En gris, c'est ce que c'est : une explication. */
  .modal-error.patiente{ color:var(--ink-soft); font-weight:500; }
  .modal-card input.invalid{ border-color:var(--danger); }
  .modal-sub strong{ color:var(--ink); font-weight:700; }
  .modal-sub code{
    font-family:var(--font-data);
    font-size:11.5px;
    background:var(--screen);
    border:1px solid var(--card-border);
    border-radius:5px;
    padding:1px 5px;
    white-space:nowrap;
  }
  /* Une marge au-dessus : sans elle, les boutons se collaient au dernier champ,
     et l'anneau de focus d'un menu ouvert leur passait dessus. */
  .modal-actions{ display:flex; gap:8px; margin-top:16px; align-items:stretch; }
  .modal-actions .toggle-btn{
    flex:1 1 0; min-width:0;
    padding:10px; justify-content:center; text-align:center;
  }
  .modal-actions .toggle-btn.primary{
    background:linear-gradient(180deg, #ff5a56, var(--dex-red));
    color:#fff;
    border-color:var(--dex-red-deep);
  }

/* ---- Le selecteur de couleur -----------------------------------------
   Panneau flottant, au rayon 11 px des blocs. Il se pose sur le corps de
   la page et non dans le bloc Apparence : depuis une ligne du bas du
   Profil, il doit pouvoir remonter au-dessus de sa pastille sans etre
   coupe par le debordement d un parent. */
.selecteur{
  position:fixed; z-index:120;
  width:236px; padding:12px;
  display:flex; flex-direction:column; gap:10px;
  background:var(--card);
  border:1px solid var(--card-border); border-radius:11px;
  box-shadow:var(--ombre);
}
.selecteur[hidden]{ display:none; }

/* Trois fonds superposes, pas de canvas : le noir qui monte, le blanc qui
   va vers la droite, la teinte pure dessous. Les transparents sont ecrits
   en rgba et non en « transparent » — ce dernier vaut du noir transparent,
   et grisait le degrade blanc sur sa moitie droite. */
.selecteur-carre{
  position:relative; height:132px; border-radius:10px;
  cursor:crosshair; touch-action:none;
  background:
    linear-gradient(to top, #000 0%, rgba(0,0,0,0) 100%),
    linear-gradient(to right, #fff 0%, rgba(255,255,255,0) 100%),
    var(--teinte-pure, #ff0000);
  box-shadow:inset 0 0 0 1px var(--card-border);
}
.selecteur-viseur,
.selecteur-curseur{
  position:absolute; width:14px; height:14px; border-radius:50%;
  transform:translate(-50%, -50%); pointer-events:none;
  border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
}
.selecteur-curseur{ top:50%; }

.selecteur-ruban{
  position:relative; height:12px; border-radius:999px;
  cursor:pointer; touch-action:none;
  background:linear-gradient(to right,
    #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%);
  box-shadow:inset 0 0 0 1px var(--card-border);
}
.selecteur-carre:focus-visible,
.selecteur-ruban:focus-visible{ outline:2px solid var(--dex-red); outline-offset:2px; }

.selecteur-bas{ display:flex; align-items:center; gap:7px; }
.selecteur-pipette{
  width:26px; height:26px; flex:none; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--card-border); border-radius:7px;
  background:var(--screen); color:var(--ink-soft); cursor:pointer;
}
.selecteur-pipette:hover{ color:var(--ink); border-color:var(--ink-faint); }
.selecteur-pipette[hidden]{ display:none; }

/* Avant et apres colles l un a l autre : c est la comparaison qui informe,
   pas chaque pastille prise a part. */
.selecteur-avant-apres{
  display:flex; flex:none; height:26px; width:44px;
  border:1px solid var(--card-border); border-radius:7px; overflow:hidden;
}
.selecteur-avant, .selecteur-apres{ flex:1; }

.selecteur-hex{
  flex:1; display:flex; align-items:center; gap:2px; min-width:0;
  height:26px; padding:0 7px;
  border:1px solid var(--card-border); border-radius:7px;
  background:var(--screen);
}
.selecteur-diese{ font-family:var(--font-data); font-size:11px; color:var(--ink-faint); }
.selecteur-hex input{
  width:100%; min-width:0; border:0; background:transparent; padding:0;
  font-family:var(--font-data); font-size:11px; letter-spacing:.06em;
  font-variant-numeric:tabular-nums; text-transform:uppercase; color:var(--ink);
}
.selecteur-hex input:focus, .selecteur-rvb input:focus{ outline:none; }
.selecteur-hex:focus-within, .selecteur-rvb label:focus-within{
  border-color:var(--dex-red);
}

.selecteur-rvb{ display:grid; grid-template-columns:repeat(3, 1fr); gap:7px; }
.selecteur-rvb label{
  display:flex; align-items:center; gap:5px; height:26px; padding:0 7px;
  border:1px solid var(--card-border); border-radius:7px;
  background:var(--screen);
  font-family:var(--font-data); font-size:8.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-faint);
}
.selecteur-rvb input{
  width:100%; min-width:0; border:0; background:transparent; padding:0;
  font-family:var(--font-data); font-size:11px; font-variant-numeric:tabular-nums;
  color:var(--ink);
  -moz-appearance:textfield;
}
.selecteur-rvb input::-webkit-outer-spin-button,
.selecteur-rvb input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

.selecteur-contraste{
  margin:0; font-size:11px;
  font-family:var(--font-data); font-variant-numeric:tabular-nums;
}
.selecteur-contraste.lisible{ color:var(--caught); }
.selecteur-contraste.juste{ color:var(--gold); }
.selecteur-contraste.illisible{ color:var(--danger); }
.selecteur-contraste[hidden]{ display:none; }

.selecteur-actions{ display:flex; gap:7px; }
.selecteur-defaut[hidden]{ display:none; }
.selecteur-actions button{
  flex:1; height:28px; padding:0 10px;
  border:1px solid var(--card-border); border-radius:7px;
  background:var(--screen); color:var(--ink);
  font-family:var(--font-body); font-size:12px; cursor:pointer;
}
.selecteur-valider{
  background:var(--dex-red); border-color:var(--dex-red); color:#fff;
}
.selecteur-actions button:focus-visible{ outline:2px solid var(--dex-red); outline-offset:2px; }

/* ---- Les changelogs --------------------------------------------------
   Une modale qui se lit : la liste peut etre longue, elle defile dans sa
   carte plutot que d etirer la page derriere. */
.nouveautes-card{ max-width:560px; width:min(560px, 92vw); }
/* A gauche, explicitement : .modal-card porte text-align:center — ce qui
   convient a un titre et a deux boutons, mais pas a une liste a puces, dont
   chaque ligne partait alors d'un endroit different. Le titre et le
   sur-titre de la modale gardent leur centrage, eux. */
.nouveautes{
  display:flex; flex-direction:column; gap:16px;
  max-height:58vh; overflow-y:auto; padding-right:4px; margin-top:4px;
  text-align:left;
}
.nouv-version{
  border-left:2px solid var(--card-border);
  padding:2px 0 2px 13px;
}
.nouv-version.neuve{ border-left-color:var(--dex-red); }
.nouv-tete{ display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; }
.nouv-num{
  font-family:var(--font-data); font-size:10px; font-variant-numeric:tabular-nums;
  letter-spacing:.08em; color:var(--ink-faint);
  border:1px solid var(--card-border); border-radius:999px; padding:2px 8px;
}
.nouv-titre{ font-size:14px; font-weight:600; color:var(--ink); }
.nouv-marque{
  font-family:var(--font-data); font-size:8.5px; letter-spacing:.12em;
  text-transform:uppercase; color:#fff;
  background:var(--dex-red); border-radius:999px; padding:2px 7px;
}
.nouv-date{
  margin-left:auto;
  font-family:var(--font-data); font-size:9.5px; color:var(--ink-faint);
}
.nouv-points{ margin:7px 0 0; padding-left:17px; }
.nouv-points li{
  font-size:12.5px; line-height:1.55; color:var(--ink-soft); margin-bottom:5px;
}
.nouv-points strong{ color:var(--ink); font-weight:600; }

/* ---- Le premier lancement ---------------------------------------------
   Deux questions, une fenetre plus large que les autres : on y choisit
   parmi vingt-trois bannieres, pas entre deux boutons. */
.depart-card{ max-width:820px; width:min(820px, 95vw); }
.depart-sous{
  margin:10px auto 0; max-width:56ch;
  font-size:12.5px; line-height:1.6; color:var(--ink-soft);
}
.depart-jeux{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:9px; margin-top:18px;
  max-height:52vh; overflow-y:auto; padding:2px;
  text-align:left;
}
.depart-jeu{
  display:flex; flex-direction:column; gap:7px;
  padding:9px; cursor:pointer;
  border:1px solid var(--card-border); border-radius:11px;
  background:var(--card); font-family:var(--font-body);
  transition:border-color 120ms, transform 90ms;
}
.depart-jeu:hover{ border-color:var(--dex-red); transform:translateY(-2px); }
.depart-jeu:focus-visible{ outline:2px solid var(--dex-red); outline-offset:2px; }
.depart-jaquette{
  display:block; border-radius:8px; overflow:hidden; background:var(--screen);
  min-height:34px;
}
.depart-jaquette img{ display:block; width:100%; height:auto; }
.depart-jeu-nom{
  font-size:12px; font-weight:600; color:var(--ink); line-height:1.35;
}
.depart-aucun{ justify-content:center; align-items:flex-start; min-height:86px; }
.depart-aucun-note{
  font-family:var(--font-data); font-size:10px; color:var(--ink-faint);
}

.depart-modes{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:10px; margin-top:18px; text-align:left;
}
.depart-mode{
  display:flex; flex-direction:column; gap:7px;
  padding:15px 16px 16px; cursor:pointer;
  border:1px solid var(--card-border); border-radius:11px;
  background:var(--card); font-family:var(--font-body);
  transition:border-color 120ms, transform 90ms;
}
.depart-mode:hover{ border-color:var(--dex-red); transform:translateY(-2px); }
.depart-mode:focus-visible{ outline:2px solid var(--dex-red); outline-offset:2px; }
.depart-mode-titre{ font-size:15px; font-weight:700; color:var(--ink); }
.depart-mode-aide{ font-size:12px; line-height:1.5; color:var(--ink-soft); }
/* L'exemple du Bulbizarre : c'est lui qui rend les trois modes evidents, et
   il merite de se distinguer du reste de la carte. */
.depart-mode-exemple{
  font-family:var(--font-data); font-size:10.5px; line-height:1.5;
  color:var(--ink-faint);
  border-top:1px solid var(--card-border); padding-top:7px;
  /* margin-top:auto — LE TRAIT DESCEND AU BAS DE LA CARTE, et les trois se
     retrouvent donc à la même hauteur. Les trois descriptions n'ont pas la même
     longueur ; caler le trait sur le texte le faisait flotter à trois hauteurs
     différentes, ce qui se voit bien plus qu'un blanc. Le trou au-dessus est le
     prix, et il est moins cher. */
  margin-top:auto;
}

/* ---- L'entraide -------------------------------------------------------
   Deux colonnes, deux listes : ce qu'il peut te donner, ce que tu peux lui
   donner. Cote a cote, parce qu'un echange se pense dans les deux sens. */
.echange-card{ max-width:760px; width:min(760px, 95vw); }
.echange-note{
  margin:10px 0 0; text-align:left;
  font-size:11.5px; line-height:1.55; color:var(--ink-faint);
}
.echange-colonnes{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px;
  margin-top:14px; text-align:left;
}
@media (max-width:620px){
  .echange-colonnes{ grid-template-columns:minmax(0, 1fr); }
}
.echange-titre{
  font-family:var(--font-data); font-size:9.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:7px;
}
.echange-liste{
  display:flex; flex-direction:column; gap:4px;
  max-height:46vh; overflow-y:auto; padding-right:3px;
}
.echange-ligne{
  display:grid; grid-template-columns:32px minmax(0,1fr) auto;
  align-items:center; gap:9px; width:100%;
  padding:5px 9px; cursor:pointer; text-align:left;
  border:1px solid var(--card-border); border-radius:9px;
  background:var(--card); font-family:var(--font-body);
}
.echange-ligne:hover{ border-color:var(--dex-red); }
.echange-ligne:focus-visible{ outline:2px solid var(--dex-red); outline-offset:2px; }
.echange-sprite{
  width:32px; height:32px; display:grid; place-items:center;
  background:var(--screen); border-radius:7px;
}
.echange-sprite img{ max-width:100%; max-height:100%; }
.echange-nom{ font-size:12.5px; font-weight:600; color:var(--ink); }
.echange-no{
  font-family:var(--font-data); font-size:9.5px; color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
}
.echange-reste{
  margin:4px 0 0; font-family:var(--font-data); font-size:10px; color:var(--ink-faint);
}

/* ---- Le lexique -------------------------------------------------------
   Le meme modele que les changelogs : une modale qui se lit, dont la liste
   defile dans sa carte. A gauche, comme eux : .modal-card centre, et un
   paragraphe centre ne se lit pas. */
.lexique-card{ max-width:620px; width:min(620px, 94vw); }
.lexique-q{
  width:100%; height:36px; margin-top:12px; padding:0 12px;
  border:1px solid var(--card-border); border-radius:10px;
  background:var(--screen); color:var(--ink);
  font-family:var(--font-body); font-size:13px;
}
.lexique-q:focus-visible{ outline:2.5px solid var(--dex-red); outline-offset:1px; }
.lexique{
  display:flex; flex-direction:column; gap:14px;
  max-height:60vh; overflow-y:auto; padding-right:4px; margin-top:14px;
  text-align:left;
}
.lex-groupe{
  font-family:var(--font-data); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint);
  margin-top:6px;
}
.lex-groupe:first-child{ margin-top:0; }
.lex-terme{
  border:1px solid var(--card-border); border-radius:11px;
  padding:13px 15px 14px;
  background:var(--card);
  transition:border-color 200ms ease, background 200ms ease;
}
/* Le terme qu'une pastille « ? » vient d'ouvrir. La surbrillance retombe
   seule : elle sert a le retrouver, pas a le marquer. */
.lex-terme.vise{ border-color:var(--dex-red); background:var(--screen); }
.lex-tete{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; }
.lex-tete h3{ margin:0; font-size:14px; font-weight:600; color:var(--ink); }
.lex-court{
  font-family:var(--font-data); font-size:10px; color:var(--ink-faint);
  letter-spacing:.02em;
}
.lex-texte{ margin:8px 0 0; font-size:12.5px; line-height:1.6; color:var(--ink-soft); }
.lex-texte b{ color:var(--ink); font-weight:600; }
.lex-points{ margin:8px 0 0; padding-left:17px; }
.lex-points li{ font-size:12px; line-height:1.55; color:var(--ink-soft); margin-bottom:4px; }
.lex-points b{ color:var(--ink); font-weight:600; }
.lex-voir{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.lex-lien{
  font-family:var(--font-data); font-size:10px; line-height:1;
  padding:5px 9px 6px; cursor:pointer;
  border:1px solid var(--card-border); border-radius:999px;
  background:transparent; color:var(--ink-soft);
}
.lex-lien:hover{ border-color:var(--dex-red); color:var(--ink); }
.lex-lien:focus-visible{ outline:2px solid var(--dex-red); outline-offset:2px; }

/* La pastille « ? » posee a cote d'un reglage. Discrete par defaut : elle est
   la pour qui la cherche, et ne dispute rien au reglage qu'elle explique. */
.lex-pastille{
  flex:none; width:18px; height:18px; padding:0; margin-left:2px;
  border:1px solid var(--card-border); border-radius:999px;
  background:transparent; color:var(--ink-faint);
  font-family:var(--font-data); font-size:10px; line-height:1; cursor:pointer;
  align-self:center;
}
.lex-pastille:hover{ border-color:var(--dex-red); color:var(--dex-red); }
.lex-pastille:focus-visible{ outline:2px solid var(--dex-red); outline-offset:2px; }

/* La pastille du bouton : un point, pas un compte — le nombre de versions non
   lues n interesse personne, seul le fait qu il y en ait compte. */
.maj-btn.a-du-neuf{ position:relative; }
.maj-btn.a-du-neuf::after{
  content:''; position:absolute; top:3px; right:3px;
  width:7px; height:7px; border-radius:50%;
  background:var(--dex-red); border:1px solid var(--card);
}

/* ---- Les icones dessinees ---------------------------------------------------
   Voir l'en-tete de js/icones.js pour le pourquoi. Ici, les trois regles qui
   font qu'une icone se comporte comme une lettre et non comme une image :

   · `currentColor` est deja pose sur le trait, donc l'icone prend la couleur du
     bouton — au survol, en sombre, sur un bouton actif, sans rien a repeindre ;
   · `vertical-align:-.18em` la fait s'asseoir sur la ligne de base du texte.
     Sans cela elle flotte au-dessus, et le libelle parait tomber ;
   · `flex-shrink:0` l'empeche de s'ecraser dans un bouton trop etroit — un
     rond de Poke Ball devenu ovale se voit tout de suite. */
.ic{ display:inline-block; vertical-align:-.18em; flex-shrink:0; }

/* LES DEUX ENCRES. Le contour suit le texte du bouton — donc le survol, le
   theme, l'etat actif — et ce qui porte `teinte` ou `aplat` prend la couleur
   propre de l'icone. Sans teinte declaree, les deux se confondent : une icone
   non coloree reste exactement ce qu'elle etait. */
.ic{ fill:none; stroke:currentColor; }
.ic .teinte{ stroke:var(--ic-teinte, currentColor); }
.ic .aplat{ fill:var(--ic-teinte, currentColor); stroke:none; }

/* Une couleur par icone, et rien d'autre dans ce bloc. Le rapprochement est
   voulu : c'est une palette, elle se relit d'un coup d'oeil, et une teinte qui
   detonne se voit ici plutot qu'a l'ecran. */
.ic-balle{ --ic-teinte:var(--dex-red); }
.ic-appareil{ --ic-teinte:var(--gold); }
.ic-image{ --ic-teinte:var(--gold); }
.ic-televerser{ --ic-teinte:var(--ic-bleu); }
.ic-loupe{ --ic-teinte:var(--ic-bleu); }
.ic-bulle{ --ic-teinte:var(--ic-bleu); }
.ic-cloche{ --ic-teinte:var(--gold); }
.ic-echange{ --ic-teinte:var(--gold); }
.ic-cadeau{ --ic-teinte:var(--dex-red); }
.ic-oeil{ --ic-teinte:var(--ic-bleu); }
.ic-cadenas{ --ic-teinte:var(--gold); }
.ic-corbeille{ --ic-teinte:var(--danger); }
.ic-croix{ --ic-teinte:var(--danger); }
.ic-coche{ --ic-teinte:var(--caught); }
.ic-etincelle{ --ic-teinte:var(--gold); }
.ic-sablier{ --ic-teinte:var(--gold); }
.ic-boite{ --ic-teinte:var(--ic-violet); }
.ic-crayon{ --ic-teinte:var(--ic-violet); }
.ic-poignee{ --ic-teinte:var(--caught); }
.ic-disque{ --ic-teinte:var(--ink-soft); }
.ic-epingle{ --ic-teinte:var(--dex-red); }
.ic-manette{ --ic-teinte:var(--ic-violet); }
.ic-banque{ --ic-teinte:var(--gold); }
.ic-maison{ --ic-teinte:var(--caught); }
.ic-fiche{ --ic-teinte:var(--ic-bleu); }

/* LA OU LA TEINTE GENE, ON L'ETEINT. Deux endroits, deux raisons :
   · un bouton deja tout entier de sa couleur — la croix blanche sur le rouge
     du survol, ou la teinte ferait une seconde couleur dans la meme forme ;
   · un bouton actif, ou l'icone doit suivre l'etat et non le contredire. */
.msg-jointe-oter:hover .ic,
.ami-retirer:hover .ic,
.btn-ic.on .ic,
.toggle-btn.active .ic,
.toggle-btn.primary .ic,
.etat.actif .ic{ --ic-teinte:currentColor; }

/* Un bouton qui porte une icone ET un mot. L'ecart est ici et non dans une
   marge sur l'icone : la marge se serait ajoutee au bourrage du bouton dans les
   cas ou il n'y a pas de mot. */
.avec-ic{ display:inline-flex; align-items:center; gap:7px; }

/* ---- Le bouton a icone seule ------------------------------------------------
   Il en existe une demi-douzaine dans l'application — joindre un Pokemon, une
   image — et ils avaient chacun leur taille et leur bordure.

   IL PORTE SON CADRE AU REPOS, et c'etait une erreur de le lui retirer. Pose
   sur rien, il ne se dessinait qu'au survol : deux dessins flottant sous le
   champ, que rien ne designait comme cliquables tant qu'on ne passait pas
   dessus par hasard. Une icone n'est pas un bouton ; c'est le cadre qui le dit.

   Le meme fond et la meme bordure que le champ de saisie a cote : ils
   appartiennent a la meme rangee, et deux traitements differents les auraient
   separes en deux objets. */
.btn-ic{
  display:inline-grid; place-items:center;
  width:34px; height:34px; padding:0; flex-shrink:0;
  border:1px solid var(--card-border); border-radius:10px;
  background:var(--screen); color:var(--ink-soft); cursor:pointer;
  transition:color 120ms, background 120ms, border-color 120ms;
}
.btn-ic:hover{ color:var(--ink); border-color:var(--gold); }
.btn-ic:focus-visible{ outline:2px solid var(--dex-red); outline-offset:2px; }
.btn-ic:disabled{ opacity:.45; cursor:default; }
.btn-ic.on{ color:var(--gold); border-color:var(--gold); background:var(--screen); }

/* ---- La cloche ------------------------------------------------------------
   Ce qui est arrivé POUR TOI — une proposition d'échange, une réponse, un
   message. Elle reste seule dans l'en-tête quand tout le reste est parti dans
   le menu du compte, et c'est voulu : c'est la seule chose de cette barre qui
   puisse changer sans qu'on ait rien fait.

   La pastille porte un chiffre plutôt qu'un point. « Trois » et « quarante »
   ne se décident pas pareil, et le point ne distinguait pas les deux. */
  .cloche-btn{
    position:relative;
    margin-left:10px;
    width:34px; height:34px;
    padding:0;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.28);
    background:rgba(0,0,0,.18);
    color:#fff;
    font-size:15px; line-height:1;
    cursor:pointer; flex-shrink:0;
    /* Une grille plutot qu'une ligne de texte : le dessin se centre de lui-meme,
       et la pastille reste posee en absolu par-dessus. */
    display:grid; place-items:center;
    transition:background 120ms;
  }
  .cloche-dessin{ display:grid; place-items:center; }
  /* L'ORANGE DE LA CLOCHE EST UNE VALEUR FIXE, et non le jeton --gold. Elle est
     posee sur le bandeau, dont le rouge et le blanc ne suivent pas le theme :
     un jeton qui s'assombrit en mode clair y perdrait le peu de contraste qu'il
     a. La mesure est faite sur le fond reel du bouton — rgba(0,0,0,.18) sur le
     rouge — et non sur --card. */
  .cloche-btn .ic{ --ic-teinte:#ffb43a; }
  .cloche-btn:hover{ background:rgba(0,0,0,.32); }
  .cloche-btn:focus-visible{ outline:2.5px solid #fff; outline-offset:2px; }
  .cloche-btn.sonne{ animation:cloche-secoue 620ms ease-in-out; }
  @keyframes cloche-secoue{
    0%,100%{ transform:rotate(0); }
    20%{ transform:rotate(-13deg); } 40%{ transform:rotate(11deg); }
    60%{ transform:rotate(-7deg); }  80%{ transform:rotate(4deg); }
  }
  @media (prefers-reduced-motion:reduce){ .cloche-btn.sonne{ animation:none; } }

  .cloche-pastille{
    position:absolute; top:-4px; right:-4px;
    /* 20 px et non 17 : la hauteur valait exactement le line-height, donc le
       chiffre touchait les deux bords et se coupait au moindre ecart de police.
       Deux pixels de chaque cote suffisent a le poser. */
    min-width:20px; height:20px; padding:0 5px;
    border-radius:999px;
    background:var(--danger); color:#fff;
    font-family:var(--font-data); font-size:10.5px; font-weight:700;
    line-height:20px; text-align:center;
    box-shadow:0 0 0 2px var(--dex-red, #b5211f);
  }

/* Le bouton qui elargit, sous un terme montre seul. Un lien plutot qu'un
   bouton dessine : c'est une porte de sortie, pas l'action de l'ecran. */
.lex-tout{
  display:block; width:100%; margin-top:14px; padding:9px;
  border:1px dashed var(--card-border); border-radius:8px;
  background:transparent; color:var(--ink-soft); cursor:pointer;
  font-family:var(--font-body); font-size:12.5px;
}
.lex-tout:hover{ border-color:var(--ink-faint); color:var(--ink); }

/* ===== L'ascenseur, partout =================================================
   UNE SEULE DÉCLARATION. Il y en avait six, une par écran, et elles avaient
   divergé : 9 px ici, 10 px là, rayon 5, 6 ou 999 selon l'endroit. Personne ne
   voit deux ascenseurs côte à côte, donc personne ne remarquait la dérive —
   c'est exactement ce qui la laisse s'installer.

   POUCE EN --ink-soft, ET C'EST MESURÉ. --card-border tombe à 1.29 sur --card
   et 1.13 sur --screen, soit un ascenseur invisible au repos. --ink-soft donne
   entre 4.5 et 6.9 selon le fond et le thème, au-dessus du 3:1 attendu d'un
   élément d'interface. Il suit aussi les couleurs choisies dans le Profil,
   puisqu'il appartient à la même famille que le texte.

   UN POUCE DE 5 PX DANS UNE GOUTTIÈRE DE 9. La bordure transparente et le
   background-clip creusent la marge, plutôt qu'un ascenseur étroit collé au
   texte.

   PAS DE scrollbar-width NI DE scrollbar-color, VOLONTAIREMENT. Quand les deux
   notations sont comprises, la standard l'emporte et tout ce qui suit est
   ignoré — or scrollbar-width:thin dessine encore ses deux chevrons dans ce
   moteur, et rien dans la notation standard ne permet de les retirer. Vérifié :
   en retirant les propriétés standard, la largeur passe de 10 px à 9 et les
   chevrons s'en vont.                                                        */
*::-webkit-scrollbar{ width:9px; height:9px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{
  background:var(--ink-soft); border-radius:999px;
  border:2px solid transparent; background-clip:content-box;
}
*::-webkit-scrollbar-thumb:hover{ background:var(--ink); }
*::-webkit-scrollbar-corner{ background:transparent; }

/* ---- Sans compte, on regarde ---------------------------------------------
   Le refus doit se voir AVANT le geste. Une case qu'on peut cocher et qui
   refuse ensuite est une promesse rompue ; une case grisée ne promet rien.

   Rien n'est masqué : le Pokédex, les fiches, les cadeaux mystères et le
   catalogue des verrous restent entiers. Seuls s'éteignent les contrôles qui
   écrivent — et ils gardent leur place, pour qu'on voie ce qu'on gagne à se
   connecter plutôt que de découvrir une interface amputée.

   `pointer-events` n'est PAS utilisé : il rendrait l'élément sourd, donc muet.
   On le laisse cliquable pour que le clic ouvre la connexion en disant
   pourquoi ; c'est le JavaScript qui refuse, cette règle ne fait que
   l'annoncer. */
body.sans-compte .chip-check,
body.sans-compte #trocEnvoyer,
body.sans-compte #profilCreer{
  opacity:.45;
  cursor:not-allowed;
}