/* MINUIT — reprise de place et outils de porte de l'hôte (js/reprise.js, SECU-FIX 30/09).
   UX-OVERLAYS 30/09 : z-index ramenés dans l'échelle commune (tableau en tête de css/base.css) : attente de reprise 1010 (au-dessus
   de l'écran d'entrée 1000), petite fenêtre 1090 (sous les modales 1100), demandes à l'hôte 1190 (au-dessus des annonces, sous les toasts). */
.rp-join { display: grid; gap: 6px; margin: 10px 0 8px; padding: 10px 12px; border: 1px dashed rgba(222, 184, 92, .45); border-radius: 10px; background: rgba(222, 184, 92, .05); }
.rp-lbl { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .85rem; color: #e9dcb8; }
/* sprint 3 (COMPTES.md Q2.2) : 6 chiffres (un ancien code de 4 tient aussi) ; l'espacement après le dernier chiffre est rendu à gauche */
.rp-code { width: calc(6 * (1ch + .35em) + 22px); padding: 6px 8px 6px calc(8px + .35em); font: 700 1.15rem/1.1 ui-monospace, 'Cascadia Mono', Consolas, monospace;
  letter-spacing: .35em; text-align: center; color: #f5e7c0; background: #0a0d18; border: 1px solid rgba(222, 184, 92, .55); border-radius: 8px; }
.rp-code:focus { outline: 2px solid #deb85c; outline-offset: 1px; }
.rp-hint { font-size: .74rem; line-height: 1.35; color: rgba(233, 220, 184, .66); }
.rp-msg { min-height: 1em; font-size: .8rem; color: #ff8a93; }
.rp-msg:empty { display: none; }
.rp-ask { justify-self: start; }
.rp-wait { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 1010; display: flex; align-items: center; gap: 12px;
  max-width: min(560px, calc(100vw - 32px)); padding: 12px 14px; color: #f2e6c6; background: #10131f; border: 1px solid rgba(222, 184, 92, .6);
  border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .55); font-size: .88rem; }
.rp-ring { flex: none; width: 18px; height: 18px; border: 2px solid rgba(222, 184, 92, .25); border-top-color: #deb85c; border-radius: 50%; animation: rp-tour 1s linear infinite; }
@keyframes rp-tour { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rp-ring { animation: none; } }
.rp-tools { position: fixed; left: 10px; bottom: 10px; z-index: 900; display: flex; gap: 6px; opacity: .42; transition: opacity .2s; }
.rp-tools:hover, .rp-tools:focus-within { opacity: 1; }
.rp-tool { width: 30px; height: 30px; padding: 0; font-size: 15px; line-height: 28px; color: #f2e6c6; background: rgba(16, 19, 31, .85);
  border: 1px solid rgba(222, 184, 92, .35); border-radius: 50%; cursor: pointer; }
.rp-tool:focus-visible { outline: 2px solid #deb85c; outline-offset: 2px; }
.rp-pop { position: fixed; left: 10px; bottom: 48px; z-index: 1090; display: grid; gap: 8px; width: min(320px, calc(100vw - 32px)); padding: 14px;
  color: #f2e6c6; background: #10131f; border: 1px solid rgba(222, 184, 92, .55); border-radius: 12px; box-shadow: 0 12px 34px rgba(0, 0, 0, .6); }
.rp-pop-t { font-weight: 700; color: #deb85c; font-size: .9rem; }
.rp-pop-code { font: 800 2rem/1 ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: .12em; color: #fff3cf; text-align: center; padding: 6px 0; }
.rp-x { justify-self: end; }
.rp-stack { position: fixed; right: 12px; top: 64px; z-index: 1190; display: grid; gap: 10px; width: min(360px, calc(100vw - 24px)); }
.rp-card { display: grid; gap: 8px; padding: 12px 14px; color: #f2e6c6; background: #121626; border: 1px solid rgba(222, 184, 92, .7); border-radius: 12px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .6); font-size: .88rem; }
.rp-card-t { line-height: 1.4; }
.rp-av { margin-right: 6px; }
.rp-from { color: rgba(233, 220, 184, .6); font-size: .8rem; }
.rp-row { display: flex; gap: 8px; flex-wrap: wrap; }
.rp-tools[hidden], .rp-wait[hidden], .rp-pop[hidden] { display: none; }

/* =====================================================================================================
   COMPTES (phase 3, dev/CONTRAT-COMPTES.md §5) — écran d'entrée à deux onglets, 🔑 « Mon compte », salon de l'hôte.
   Même échelle de couches (css/base.css) ; les animations s'éteignent avec « Animations : réduites » (html.reduce-motion).
   Les attributs `hidden` sont forcés : .jc-field, .jc-again… ont un `display` d'auteur qui l'emporterait sinon.
   ===================================================================================================== */
.jc-field[hidden], .jc-again[hidden], .jc-conseil[hidden], .jc-compte-bas[hidden], .jc-oubli-t[hidden], .jc-neuf[hidden],
.jc-facultatif[hidden], .jc-f-av[hidden], .jc-f-col[hidden], .rp-changer-box[hidden], .jc-pin-note[hidden] { display: none; }
/* sprint 3 (COMPTES.md Q3.3, porte PIN) : sous les cases du code, dans « J'ai un compte », la raison de la demande (même filet d'or
   que « Mot de passe oublié ? ») */
.jc-pin-note { margin-top: 7px; padding: 6px 10px; border-left: 2px solid var(--gold); border-radius: 0 8px 8px 0; background: rgba(222,184,92,.08);
  font-size: calc(12.6px * var(--echelle-ecran, 1) / var(--echelle, 1)); line-height: 1.35; color: var(--text); }

/* --- onglets « Nouveau » · « J'ai un compte » : un filet d'or et un losange sous l'onglet ouvert --- */
.jc-tabs { display: grid; grid-template-columns: 1fr 1fr; margin: -6px 0 0; border-bottom: 1px solid var(--line); }
.jc-tab { position: relative; height: 38px; padding: 0 8px; border: 0; background: none; cursor: pointer;
  font: 600 12px/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim); transition: color .2s; }
.jc-tab:hover { color: var(--text); }
.jc-tab.is-on { color: var(--gold-hi); text-shadow: 0 0 14px rgba(247,221,143,.35); }
.jc-tab::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: -1px; height: 2px; transform: scaleX(0); transition: transform .35s cubic-bezier(.2,.9,.3,1);
  background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold-hi) 50%, var(--gold) 80%, transparent); }
.jc-tab::before { content: ""; position: absolute; left: 50%; bottom: -4px; width: 7px; height: 7px; background: var(--gold-hi); opacity: 0;
  transform: translateX(-50%) rotate(45deg) scale(.4); transition: opacity .25s, transform .35s cubic-bezier(.2,.9,.3,1.4); box-shadow: 0 0 10px rgba(247,221,143,.6); }
.jc-tab.is-on::after { transform: scaleX(1); }
.jc-tab.is-on::before { opacity: 1; transform: translateX(-50%) rotate(45deg) scale(1); }
.jc-tab:focus-visible { outline-offset: -2px; border-radius: 6px; }

/* --- mot de passe : champ, œil, conseil en or (très visible), message sous le champ --- */
.jc-mdp-lbl { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.jc-facultatif { font: 600 10px/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.jc-mdp-wrap { position: relative; }
.jc-mdp { width: 100%; height: 46px; padding-right: 50px; font-size: 16px; font-weight: 600; letter-spacing: .04em; }
.jc-mdp::placeholder { font-weight: 400; letter-spacing: .01em; }
.jc-mdp.is-bad { border-color: var(--lose); animation: shake .45s cubic-bezier(.36,.07,.19,.97) both; }
.jc-oeil { position: absolute; right: 6px; top: 50%; display: grid; place-items: center; width: 38px; height: 32px; padding: 0; transform: translateY(-50%);
  border: 0; border-radius: 8px; background: transparent; color: var(--text-dim); cursor: pointer; transition: color .2s, background .2s; }
.jc-oeil:hover { color: var(--gold-hi); background: rgba(222,184,92,.10); }
.jc-oeil svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.jc-oeil[aria-pressed="true"] { color: var(--gold-hi); }
.jc-oeil[aria-pressed="false"] .jc-oeil-barre { display: none; }
.jc-mdp-err { font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--lose); }
.jc-mdp-err:empty { display: none; }
.jc-conseil { position: relative; padding: 8px 12px 8px 36px; border-radius: 10px; border: 1px solid rgba(222,184,92,.6);
  background: linear-gradient(100deg, rgba(222,184,92,.20), rgba(222,184,92,.06) 70%); box-shadow: inset 0 0 0 1px rgba(5,6,11,.35), 0 0 22px rgba(222,184,92,.10);
  font-size: 12.8px; line-height: 1.36; color: var(--gold-hi); }
.jc-conseil::before { content: "🔑"; position: absolute; left: 11px; top: 8px; font-size: 14px; filter: drop-shadow(0 0 6px rgba(247,221,143,.5)); }
.jc-conseil b { color: #fff3cf; font-weight: 700; }
.jc-conseil small { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.3; color: rgba(247,221,143,.78); }

/* --- « Rester connecté », « Mot de passe oublié ? », « Jamais choisi… » --- */
.jc-garde { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; font-size: 13px; color: var(--text); cursor: pointer; user-select: none; }
.jc-garder { width: 17px; height: 17px; margin: 0; accent-color: var(--gold); cursor: pointer; }
.jc-garde.is-off { opacity: .55; cursor: default; }
.jc-garde.is-off .jc-garder { cursor: default; }
.jc-compte-bas { display: grid; gap: 6px; }
.jc-oubli-row { display: flex; }
.jc-oubli { padding: 0; border: 0; background: none; cursor: pointer; font: 600 13px/1.3 var(--font-ui); color: var(--gold);
  text-decoration: underline; text-decoration-color: rgba(222,184,92,.45); text-underline-offset: 3px; }
.jc-oubli:hover { color: var(--gold-hi); }
.jc-oubli-t { padding: 7px 10px; border-left: 2px solid var(--gold); border-radius: 0 8px 8px 0; background: rgba(222,184,92,.08); font-size: 12.8px; line-height: 1.35; color: var(--text); }
.jc-jamais { font-size: 12.3px; line-height: 1.4; color: var(--text-dim); }
.jc-lien { padding: 0; border: 0; background: none; font: inherit; color: var(--gold-hi); cursor: pointer; text-decoration: underline; text-decoration-color: rgba(222,184,92,.5); text-underline-offset: 2px; }
.jc-msg.is-info { color: var(--gold-hi); }
.jc-resume-mdp { font-size: 12.8px; color: var(--gold-hi); }

/* --- code temporaire accepté : le nouveau mot de passe --- */
.jc-neuf { display: grid; gap: 8px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--gold); background: rgba(222,184,92,.09); animation: msgIn .35s ease both; }
.jc-neuf-t { font-weight: 600; font-size: 14px; color: var(--gold-hi); }
.jc-neuf .input { height: 42px; }
.jc-neuf .input.is-bad { border-color: var(--lose); animation: shake .45s cubic-bezier(.36,.07,.19,.97) both; }
.jc-card.is-neuf .jc-actions { display: none; }

/* --- la carte d'identité à gauche : médaille, avatar (4 × 4), couleur ; le code d'entrée à droite --- */
.jc-left { gap: 12px; }
.jc-f-av, .jc-f-col { width: 100%; }
.jc-left .jc-avs { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.jc-left .jc-av { height: 36px; font-size: 20px; }
.jc-left .jc-cols { display: grid; grid-template-columns: repeat(4, 26px); justify-content: center; gap: 8px 14px; }
.jc-left .jc-col { width: 26px; height: 26px; }
.jc-card[data-tab="nouveau"] .jc-medal { width: 112px; height: 112px; margin: 4px 0 10px; }
.jc-card[data-tab="nouveau"] .jc-medal-e { font-size: 56px; }
.jc-card[data-tab="nouveau"] .jc-hint { font-size: 12px; }
@media (max-height: 820px) {
  .jc-tab { height: 34px; }
  .jc-mdp { height: 42px; }
  .jc-left { gap: 10px; }
  .jc-card[data-tab="nouveau"] .jc-medal { width: 96px; height: 96px; margin: 2px 0 8px; }
  .jc-card[data-tab="nouveau"] .jc-medal-e { font-size: 48px; }
  .jc-left .jc-av { height: 33px; font-size: 19px; }
  .jc-conseil { font-size: 12.4px; padding: 7px 11px 7px 34px; }
}
/* portable 1366×768 : 600 à 660 px utiles (C11, P2-D) — tout tient sans défiler, « Pousser la porte » compris */
@media (max-height: 700px) {
  .jc-tabs { margin-top: -4px; }
  .jc-tab { height: 30px; font-size: 11px; }
  .jc-mdp { height: 38px; font-size: 15px; }
  .jc-oeil { height: 28px; }
  .jc-left { gap: 8px; }
  .jc-card[data-tab="nouveau"] .jc-medal { width: 80px; height: 80px; margin: 0 0 6px; }
  .jc-card[data-tab="nouveau"] .jc-medal-e { font-size: 40px; }
  .jc-card[data-tab="nouveau"] .jc-medal::before { inset: -18px; }
  .jc-left .jc-avs { gap: 5px; }
  .jc-left .jc-av { height: 30px; font-size: 17px; }
  .jc-left .jc-cols { grid-template-columns: repeat(4, 22px); gap: 6px 14px; }
  .jc-left .jc-col { width: 22px; height: 22px; }
  .jc-conseil { font-size: 12px; line-height: 1.3; padding: 6px 10px 6px 32px; }
  .jc-conseil::before { top: 6px; left: 10px; font-size: 13px; }
  .jc-conseil small { margin-top: 2px; font-size: 11px; }
  .jc-garde { font-size: 12.5px; }
  .jc-hint { font-size: 11.5px; }
}
@media (max-width: 860px) {
  .jc-left { flex-wrap: wrap; }
  .jc-f-av, .jc-f-col { flex: 1 1 100%; }
  .jc-left .jc-avs { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  /* FINITIONS (relecture du code, point 4) : 8 colonnes de 26 px et 14 px d'écart faisaient 306 px FIXES : la carte d'entrée débordait
     sous ≈ 370 px de large (à 320 px, la scène défilée par le focus la coupait à gauche). Les pastilles se répartissent sur la largeur
     (208 px au moins), à peu près sous les colonnes des avatars */
  .jc-left .jc-cols { grid-template-columns: repeat(8, 26px); column-gap: 0; justify-content: space-between; }
}

/* --- 🔑 Mon compte : point doré discret, protéger, changer, se déconnecter --- */
.rp-cle { position: relative; }
.rp-tools:has(.rp-point) { opacity: .66; }   /* compte sans mot de passe : la clé se voit un peu plus, sans rien ouvrir */
.rp-point { position: absolute; top: 0; right: 0; width: 8px; height: 8px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 35%, #fff3cf, #deb85c 60%, #8c6a22); box-shadow: 0 0 0 1.5px rgba(10, 13, 24, .95), 0 0 8px rgba(247, 221, 143, .8); }
.rp-pop { max-height: calc(100vh - 80px); overflow: auto; }
.rp-pop-sous { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(233, 220, 184, .7); }
.rp-pop .input { height: 36px; font-size: 14px; }
.rp-proteger { display: grid; gap: 7px; margin-top: 2px; padding-top: 10px; border-top: 1px solid rgba(222, 184, 92, .28); }
.rp-proteger-t { font-weight: 700; font-size: .9rem; color: #f7dd8f; }
.rp-ok { padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(62, 224, 143, .35); background: rgba(62, 224, 143, .08); font-size: .8rem; line-height: 1.4; color: #e9dcb8; }
.rp-changer-box { display: grid; gap: 7px; padding: 10px; border-radius: 10px; border: 1px dashed rgba(222, 184, 92, .4); }
.rp-sortir-tout { color: #ffd9dc; border-color: rgba(255, 90, 103, .45); }
.rp-sortir-tout:hover { background: rgba(210, 50, 63, .22); border-color: #ff5a67; }

/* =====================================================================================================
   SPRINT 4 (SECOURS) — les codes montrés une fois : le billet doré (code de secours, code de reprise neuf), « gardé secret » et le code
   neuf en deux temps, l'avis « réseau local en clair » sous le mot de passe (Q13). Un billet de vestiaire : double filet d'or, chiffres
   en grand (sélectionnés d'un clic), une perforation ponctuée de losanges entre le code et ce qu'il faut en savoir.
   ===================================================================================================== */
.rp-billet { position: relative; display: grid; justify-items: center; gap: 9px; margin: 4px 0 2px; padding: 20px 22px 16px; text-align: center;
  border: 1px solid var(--gold); border-radius: 14px; isolation: isolate;
  background: radial-gradient(130% 85% at 50% 0%, rgba(247,221,143,.18), rgba(247,221,143,0) 62%), linear-gradient(180deg, rgba(222,184,92,.13), rgba(222,184,92,.03));
  box-shadow: inset 0 0 0 4px rgba(5,6,11,.5), inset 0 0 0 5px rgba(222,184,92,.32), 0 16px 38px rgba(0,0,0,.42);
  animation: rp-billet-in .5s cubic-bezier(.2,.9,.3,1.1) both; }
.rp-billet::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(135deg, rgba(222,184,92,.05) 0 2px, transparent 2px 9px); }
.rp-billet-t { font: 600 calc(12px * var(--echelle-ecran, 1) / var(--echelle, 1))/1 var(--font-ui); letter-spacing: .3em;
  text-transform: uppercase; color: var(--gold); }
.rp-billet-code { font: 700 clamp(30px, 7vw, calc(46px * var(--echelle-ecran, 1) / var(--echelle, 1)))/1.04 var(--font-num);
  letter-spacing: .12em; color: var(--gold-hi); white-space: nowrap;
  user-select: all; cursor: text; text-shadow: 0 0 22px rgba(247,221,143,.38), 0 1px 0 rgba(0,0,0,.6); padding: 2px 4px 0 calc(4px + .12em); }
.rp-billet-secours .rp-billet-code { font-size: clamp(24px, 5.6vw, calc(36px * var(--echelle-ecran, 1) / var(--echelle, 1)));
  letter-spacing: .1em; }
.rp-billet-perfo { position: relative; justify-self: stretch; height: 9px; margin: 2px 0;
  background: linear-gradient(90deg, transparent, rgba(222,184,92,.55) 12%, rgba(222,184,92,.55) 88%, transparent) center / 100% 1px no-repeat; }
.rp-billet-perfo::before, .rp-billet-perfo::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; background: var(--gold-hi);
  transform: translateY(-50%) rotate(45deg); box-shadow: 0 0 9px rgba(247,221,143,.6); }
.rp-billet-perfo::before { left: 8%; }
.rp-billet-perfo::after { right: 8%; }
.rp-billet-n { max-width: 34em; font-size: calc(13.5px * var(--echelle-ecran, 1) / var(--echelle, 1)); line-height: 1.42;
  color: var(--text); }
.rp-billet-n:first-of-type { font-weight: 600; color: #fff3cf; }
@keyframes rp-billet-in { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
html.reduce-motion .rp-billet { animation: none; }
@media (prefers-reduced-motion: reduce) { .rp-billet { animation: none; } }
.rp-secret { display: grid; gap: 7px; padding: 10px; border-radius: 10px; border: 1px dashed rgba(222, 184, 92, .45); background: rgba(222, 184, 92, .05); }
.rp-secret-t { color: #e9dcb8; font-size: calc(.8rem * var(--echelle-ecran, 1) / var(--echelle, 1)); }
.rp-code-neuf { justify-self: start; }
.rp-code-confirmer { display: grid; gap: 6px; }
.rp-code-neuf[hidden], .rp-code-confirmer[hidden], .rp-secours-manque[hidden] { display: none; }
.rp-secours-manque { color: #f7dd8f; }
.rp-copie { color: #f7dd8f; }
/* Q13 : sous le champ du mot de passe, discret (un filet, pas une alarme) ; seulement en http:// hors de ce PC */
.jc-clair { display: flex; gap: 7px; align-items: baseline; margin-top: 2px;
  font-size: calc(12px * var(--echelle-ecran, 1) / var(--echelle, 1)); line-height: 1.35; color: var(--text-dim); }
.jc-clair::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 1px; border: 1px solid var(--warn); transform: rotate(45deg); }
.jc-clair[hidden] { display: none; }

/* --- salon de l'hôte : la soirée, les comptes (🔒/🔓, vu il y a…, menu ⋯), code temporaire, remise générale --- */
.hp-soiree-row { flex-wrap: wrap; gap: 8px; }
.hp-soiree-t { font-size: 12px; line-height: 1.35; color: var(--text-dim); }
.hp-comptes { max-height: 250px; }
.hp-comptes .hp-prow { flex-wrap: wrap; }
/* hors ligne : seule la tête de la ligne s'efface ; le menu déplié (code temporaire, suppression) reste net */
.hp-comptes .hp-prow.is-off { opacity: 1; }
.hp-comptes .hp-prow.is-off > :not(.hp-actions) { opacity: .55; }
.hp-prow.is-bloque { border-color: rgba(255, 90, 103, .45); }
.hp-pwho { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.22; }
.hp-pwho .hp-pname { flex: none; }
.hp-vu { overflow: hidden; font-size: 11.5px; color: var(--text-dim); white-space: nowrap; text-overflow: ellipsis; }
.hp-prow:not(.is-off) .hp-vu { color: var(--win); }
.hp-prow.is-bloque .hp-vu { color: var(--lose); }
.hp-lock { width: 20px; font-size: 14px; text-align: center; }
.hp-bal { min-width: 58px; text-align: right; }
.hp-more { width: 30px; padding: 0; font-size: 17px; letter-spacing: 0; }
.hp-more[aria-expanded="true"] { color: var(--gold-hi); border-color: var(--gold); background: rgba(222, 184, 92, .10); }
.hp-actions { flex: 1 1 100%; display: grid; gap: 8px; margin-top: 4px; padding: 8px 2px 2px; border-top: 1px dashed var(--line); }
.hp-actions-row { flex-wrap: wrap; gap: 6px; }
.hp-code-box { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--gold); background: linear-gradient(100deg, rgba(222, 184, 92, .18), rgba(222, 184, 92, .05)); }
.hp-code { grid-column: 1; font: 700 30px/1.05 var(--font-num); letter-spacing: .22em; color: var(--gold-hi); user-select: all; text-shadow: 0 0 18px rgba(247, 221, 143, .3); }
.hp-code-t { grid-column: 1; font-size: 12px; color: var(--text); }
.hp-code-copier { grid-column: 2; grid-row: 1 / span 2; }
.hp-suppr { display: grid; gap: 6px; }
.hp-suppr-t { font-size: 12.5px; line-height: 1.35; color: #ffd9dc; }
.hp-suppr .row { gap: 6px; }
.hp-suppr-nom { flex: 1; min-width: 0; height: 30px; }
.hp-tous { height: 46px; font: 700 20px/1 var(--font-num); letter-spacing: .35em; text-align: center; text-transform: uppercase; }
.hp-tous.is-bad { border-color: var(--lose); animation: shake .45s cubic-bezier(.36, .07, .19, .97) both; }
.modal-actions .btn:disabled, .hp-suppr-go:disabled { opacity: .45; cursor: not-allowed; transform: none; }
/* TÉLÉPHONE, portrait — N1c (revue au téléphone du 13/10, n° 23) : dans « Les comptes », le cadenas, le solde, « Expulser » et « ⋯ »
   prenaient toute la ligne : la boîte du nom tombait à 7 px (à 360) et « Paulette-du-Bois » passait sous le solde et le cadenas. Le nom
   (et son « vu ») prend sa ligne à côté de l'avatar ; cadenas, solde et actions passent dessous, à droite. Bornée au téléphone. */
@media (orientation: portrait) and (max-width: 480px) {
  .hp-comptes .hp-prow { row-gap: 6px; }
  .hp-comptes .hp-prow > .hp-pwho, .hp-comptes .hp-prow > .hp-pname { flex: 1 1 calc(100% - 44px); }
  .hp-comptes .hp-prow > :is(.hp-pwho, .hp-pname) + * { margin-left: auto; }
}
/* TÉLÉPHONE — N1c (revue au téléphone du 13/10, n° 26) : à la porte, « facultatif · conseillé » à 10 px, « Code de la salle », « Ton
   nom », « Mot de passe », les onglets et le pied à 11 px, les pastilles de couleur à 22-26 px, « Rester connecté » à 17 px de haut.
   Libellés à 12 px (le « facultatif » passe à la ligne s'il le faut), pastilles de 34 px (deux rangées de quatre, comme au PC),
   « Rester connecté » touchable sur 34 px de haut. Mêmes polices, même or. Bornées au téléphone : le PC ne change pas. */
@media (orientation: portrait) and (max-width: 480px), (orientation: landscape) and (max-height: 560px) {
  .join .jc-field > .label, .join .jc-facultatif, .join .join-foot, .join .jc-tab, .join .jc-conseil small { font-size: 12px; }
  .join .jc-mdp-lbl { flex-wrap: wrap; row-gap: 4px; }
  .join .jc-left .jc-cols { grid-template-columns: repeat(4, 34px); gap: 10px 20px; justify-content: center; }
  .join .jc-left .jc-col { width: 34px; height: 34px; }
  .join .jc-garde { min-height: 34px; }
}
/* TÉLÉPHONE — N5 (annexe B remesurée sur d1cc705) : à la porte, « Mot de passe oublié ? » (17 px de haut), le lien « Onglet « Nouveau » »
   (17 px, dans sa phrase), les avatars couchés (30 px de haut), les onglets et l'œil du mot de passe couchés (30 et 28 px) ; le 🔑
   « Mon compte » et l'outil de l'hôte (30 px). Rien n'est redessiné : le lien garde sa taille de texte, sa zone de toucher s'agrandit
   par une marge interne que rend une marge négative (la ligne ne bouge pas), passée devant la ligne suivante de sa phrase (qui, peinte
   après lui, reprenait le doigt sous sa moitié basse : 24 px de zone), et l'écart au-dessus de sa phrase passe de 6 à 10 px pour qu'elle
   ne morde pas « Mot de passe oublié ? » ; l'avatar s'agrandit d'un cadre transparent de 2 px hors de son bord (moins que la moitié des
   5 à 7 px qui les séparent : aucun ne couvre son voisin) ; le 🔑 et l'outil se posent à une place libre d'après leur taille
   (js/reprise.js:397). Bornées au téléphone. */
@media (orientation: portrait) and (max-width: 480px), (orientation: landscape) and (max-height: 560px) {
  .join .jc-av { position: relative; }
  .join .jc-av::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; }
  .join .jc-tab { min-height: 34px; }
  .join .jc-oeil { min-height: 32px; }
  .join .jc-oubli { min-height: 32px; }
  .join .jc-compte-bas { row-gap: 10px; }
  .join .jc-lien { position: relative; z-index: 1; padding: 8px 0; margin: -8px 0; }
  .rp-tools .rp-tool { width: 32px; height: 32px; line-height: 30px; }
  .hp-comptes .hp-more { min-width: 32px; }   /* « ⋯ » d'un compte, au salon de l'hôte : 30 px de large */
}
/* TÉLÉPHONE — N11 (annexe A de la revue au téléphone, REMESURÉE sur 1bedc6a) : les phrases d'aide de « Mon compte » (11,8 px) et « Ton code de reprise » (11,5 px) : 12 px. Mêmes polices, même interlettrage,
   même couleur ; on agrandit le texte, on ne redessine pas. Bornée au téléphone : le PC ne change pas (dev/tests-client/s5-tel-textes.mjs, D et D2). */
@media (orientation: portrait) and (max-width: 480px), (orientation: landscape) and (max-height: 560px) {
  .rp-hint, .rp-pop-sous { font-size: 12px; }
}
/* TÉLÉPHONE — N23 (revue finale R2, n° 15) : à la porte, au doigt. La case « Rester connecté » (17 px) se touche par son libellé (34 px de
   haut, N1c), mais n'avait que 9 px de portée à sa gauche : le libellé s'agrandit de 8 px à gauche par un cadre transparent (rien n'y est).
   L'avatar choisi, agrandi (×1,06) et levé de 2 px, gardait le cadre transparent de 3 px de N5 et prenait le bas de l'avatar au-dessus de
   lui (couché : 13,8 px de portée sous son centre) : agrandi, il n'en garde qu'1 px. Au doigt, le survol (qui reste après un toucher)
   levait l'avatar touché de 3 px entre le toucher et le clic : touché par son bas, le clic tombait à côté (couché dès 14 px sous son
   centre, 16 px en portrait) : l'avatar ne se lève plus au survol (son liseré et son fond restent). Bornées au téléphone. */
@media (orientation: portrait) and (max-width: 480px), (orientation: landscape) and (max-height: 560px) {
  .join .jc-garde { position: relative; }
  .join .jc-garde::before { content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: 8px; }
  .join .jc-av.is-on::after { inset: -1px; }
  .join .jc-av:hover:not(.is-on) { transform: none; }
}