/* MINUIT — « Mes appareils », « Supprimer mon compte », avis d'un nouvel appareil sur l'écran d'entrée (js/appareils.js, sprint 4,
   piste APPAREILS). Même direction que le panneau de la clé (css/reprise.css) : nuit, filets d'or, losanges ; le rouge seulement sur ce
   qui détruit. Couches : la modale (1100) de css/base.css. Les animations s'éteignent avec « Animations : réduites » et
   prefers-reduced-motion. */

/* --- dans le panneau de la clé : deux gestes de plus, sous un filet --- */
.ap-cle { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; padding-top: 10px;
  border-top: 1px dashed rgba(222, 184, 92, .32); }
.ap-ouvrir { display: inline-flex; align-items: center; gap: 7px; }
.ap-ouvrir-ico { color: var(--gold-hi); font-size: calc(12px * var(--echelle-ecran, 1) / var(--echelle, 1)); transform: translateY(-.5px); }
.ap-supprimer { padding: 4px 2px; border: 0; background: none; cursor: pointer;
  font: 600 calc(12.5px * var(--echelle-ecran, 1) / var(--echelle, 1))/1.2 var(--font-ui); color: #ff8a93;
  text-decoration: underline; text-decoration-color: rgba(255, 90, 103, .45); text-underline-offset: 3px; }
.ap-supprimer:hover { color: #ffb3b9; text-decoration-color: #ff5a67; }
.ap-supprimer:focus-visible, .ap-sortir:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }

/* --- la fenêtre « Mes appareils » (plus large que la modale ordinaire de 460 px : une ligne tient le navigateur, d'où, quand, le bouton) --- */
.modal.ap-modal { width: min(620px, 100%); }
.modal.ap-modal-sup { width: min(500px, 100%); }
.ap { display: grid; gap: 12px; }
.ap-intro { margin: 0; font-size: calc(13px * var(--echelle-ecran, 1) / var(--echelle, 1)); line-height: 1.45; color: var(--text-dim); }
.ap-liste { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ap-attente { padding: 14px; text-align: center; font-size: calc(13px * var(--echelle-ecran, 1) / var(--echelle, 1));
  color: var(--text-dim); border: 1px dashed var(--line); border-radius: 12px; }
/* une ligne = un ticket : la souche (le glyphe) à gauche, perforée, puis le navigateur, d'où il vient et quand */
.ap-ligne { position: relative; display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 12px; min-height: 58px;
  padding: 8px 12px 8px 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: linear-gradient(100deg, rgba(222, 184, 92, .07), rgba(5, 6, 11, .35) 46%); animation: apEntree .42s cubic-bezier(.2, .9, .3, 1.2) both;
  animation-delay: calc(var(--i, 0) * 60ms); }
.ap-ico { display: grid; place-items: center; align-self: stretch; font-size: 20px; border-right: 1px dashed rgba(222, 184, 92, .35);
  background: rgba(222, 184, 92, .06); }
.ap-qui { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ap-nav { font: 600 calc(15px * var(--echelle-ecran, 1) / var(--echelle, 1))/1.2 var(--font-ui); letter-spacing: .01em; color: var(--text);
  }
.ap-meta { overflow: hidden; font-size: calc(12.5px * var(--echelle-ecran, 1) / var(--echelle, 1)); color: var(--text-dim);
  white-space: nowrap; text-overflow: ellipsis; }
.ap-ancien { align-self: flex-start; margin-top: 3px; padding: 1px 8px; border: 1px solid rgba(255, 181, 71, .5); border-radius: 999px;
  font: 600 calc(12px * var(--echelle-ecran, 1) / var(--echelle, 1))/1.6 var(--font-ui); letter-spacing: .08em; text-transform: uppercase;
  color: var(--warn); background: rgba(255, 181, 71, .07); }
.ap-ligne.is-ancien .ap-nav { color: var(--text-dim); }
/* cet appareil : la souche dorée, et un losange qui luit */
.ap-ligne.is-courant { border-color: rgba(222, 184, 92, .6); background: linear-gradient(100deg, rgba(222, 184, 92, .16), rgba(5, 6, 11, .3) 55%);
  box-shadow: inset 0 0 0 1px rgba(5, 6, 11, .4), 0 0 24px rgba(222, 184, 92, .08); }
.ap-ligne.is-courant .ap-ico { background: rgba(222, 184, 92, .16); border-right-color: rgba(222, 184, 92, .6); }
.ap-ligne.is-courant .ap-meta { color: var(--gold-hi); }
.ap-ici { padding-right: 4px; font: 700 calc(12px * var(--echelle-ecran, 1) / var(--echelle, 1))/1 var(--font-ui); letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-hi);
  text-shadow: 0 0 12px rgba(247, 221, 143, .45); }
.ap-sortir { color: #ffd9dc; border-color: rgba(255, 90, 103, .45); }
.ap-sortir:hover:not(:disabled) { background: rgba(210, 50, 63, .22); border-color: #ff5a67; }
.ap-ligne.is-parti { opacity: 0; transform: translateX(14px); transition: opacity .25s, transform .25s; }
.ap-pied { display: grid; justify-items: start; gap: 8px; }
.ap-pied:empty { display: none; }
.ap-note { margin: 0; font-size: calc(12px * var(--echelle-ecran, 1) / var(--echelle, 1)); line-height: 1.4; color: var(--text-faint); }
@keyframes apEntree { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* --- « Supprimer mon compte » : l'avertissement rouge, puis la confirmation --- */
.ap-sup { display: grid; gap: 12px; }
.ap-sup-alerte { display: grid; grid-template-columns: 30px 1fr; align-items: start; gap: 12px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgba(255, 90, 103, .55); background: linear-gradient(100deg, rgba(210, 50, 63, .2), rgba(210, 50, 63, .05)); }
.ap-sup-alerte p { margin: 0; font-size: calc(14px * var(--echelle-ecran, 1) / var(--echelle, 1)); line-height: 1.45; color: #ffe3e6; }
.ap-sup-ico { position: relative; display: grid; place-items: center; width: 26px; height: 26px; margin-top: 1px;
  font: 800 calc(13px * var(--echelle-ecran, 1) / var(--echelle, 1))/1 var(--font-ui); color: #ff8a93; }
.ap-sup-ico::before { content: ""; position: absolute; inset: 4px; transform: rotate(45deg); border: 1.5px solid #ff5a67; border-radius: 3px; }
.ap-sup-t { margin: 0; font-size: calc(13px * var(--echelle-ecran, 1) / var(--echelle, 1)); color: var(--text-dim); }
.ap-sup .field { display: grid; gap: 5px; }
.ap-sup .input { height: 40px; }
.ap-sup-err { min-height: 1em; font-size: calc(12.5px * var(--echelle-ecran, 1) / var(--echelle, 1)); font-weight: 600; color: var(--lose);
  }
.ap-sup-err:empty { display: none; }

/* --- écran d'entrée : l'appareil remplacé par un nouvel appareil lit l'avis --- */
.ap-avis-entree { margin-top: 8px; padding: 9px 12px; border-left: 2px solid var(--warn); border-radius: 0 10px 10px 0;
  background: rgba(255, 181, 71, .1); font-size: calc(12.8px * var(--echelle-ecran, 1) / var(--echelle, 1)); line-height: 1.4;
  color: var(--text); }
.ap-avis-entree b { color: var(--warn); }

/* --- la fiche du joueur : le mot de passe d'un compte protégé qui change de pseudo (reste de S3.7) --- */
.fm-mdp-box[hidden] { display: none; }
.fm-mdp-box { display: grid; gap: 5px; padding: 10px 12px; border-left: 2px solid var(--gold); border-radius: 0 10px 10px 0; background: rgba(222, 184, 92, .07);
  animation: apEntree .3s ease both; }
.fm-mdp-t { font-size: calc(12px * var(--echelle-ecran, 1) / var(--echelle, 1)); line-height: 1.35; color: var(--gold-hi); }
.fm-mdp.is-bad { border-color: var(--lose); animation: shake .45s cubic-bezier(.36, .07, .19, .97) both; }
.fm-err { font-size: calc(12.5px * var(--echelle-ecran, 1) / var(--echelle, 1)); font-weight: 600; line-height: 1.35; color: var(--lose); }
.fm-err:empty { display: none; }

/* --- salon de l'hôte : un compte fermé à sa demande (pas « bloqué ») et « Rouvrir » ; la soirée qui effacera --- */
.hp-prow.is-ferme { border-color: rgba(255, 181, 71, .5); }
.hp-prow.is-ferme .hp-vu { color: var(--warn); }
/* HOTE-0910 : la ligne d'un compte fermé dit QUAND (« fermé par toi le 09/10 à 23:14 ») : elle passe à la ligne au lieu de couper la date */
.hp-prow.is-ferme .hp-vu { white-space: normal; overflow: visible; text-overflow: clip; }
.hp-ferme-t { font-size: calc(12.3px * var(--echelle-ecran, 1) / var(--echelle, 1)); line-height: 1.38; color: var(--text);
  padding: 6px 10px; border-left: 2px solid var(--warn); border-radius: 0 8px 8px 0;
  background: rgba(255, 181, 71, .08); }
.hp-act-rouvrir { color: var(--gold-hi); border-color: var(--gold); background: rgba(222, 184, 92, .12); }
.hp-confirme p { margin: 0; }
.hp-effaces { font-size: calc(13px * var(--echelle-ecran, 1) / var(--echelle, 1)); color: var(--text-dim); }
.hp-effaces.is-effaces { padding: 8px 10px; border-left: 2px solid #ff5a67; border-radius: 0 8px 8px 0; color: #ffe3e6; background: rgba(210, 50, 63, .12); }

/* --- décision HOTE-0910 : « Fermer… » parle l'ambre des comptes fermés (rouvrable : rien n'est détruit ; le rouge reste à l'effacement) ;
   un compte sans mot de passe n'a pas de code temporaire : la phrase qui dit par où le dépanner --- */
.hp-act-fermer { color: var(--warn); border-color: rgba(255, 181, 71, .55); background: rgba(255, 181, 71, .08); }
.hp-act-fermer:hover { background: rgba(255, 181, 71, .16); }
.hp-suppr.hp-fermer { padding: 8px 10px; border-left: 2px solid var(--warn); border-radius: 0 8px 8px 0; background: rgba(255, 181, 71, .07); }
.hp-fermer .hp-suppr-t { color: var(--text); }
.hp-fermer-q { display: block; margin-bottom: 3px; font-weight: 700; color: var(--warn); letter-spacing: .01em; }
.hp-fermer-l { font-size: calc(12px * var(--echelle-ecran, 1) / var(--echelle, 1)); color: var(--text-dim); }
.hp-fermer-go { color: #1b1206; border-color: #ffb547; background: linear-gradient(180deg, #ffc56b, #f0a53a); font-weight: 700; }
.hp-sans-code { flex: 1 1 14em; min-width: 0; font-size: calc(12px * var(--echelle-ecran, 1) / var(--echelle, 1)); line-height: 1.3;
  color: var(--text-dim); }

html.reduce-motion .ap-ligne, html.reduce-motion .ap-ligne.is-parti, html.reduce-motion .fm-mdp-box { animation: none; transition: none; }
@media (prefers-reduced-motion: reduce) { .ap-ligne, .ap-ligne.is-parti { animation: none; transition: none; } }
@media (max-width: 560px) {
  .ap-ligne { grid-template-columns: 38px 1fr; }
  .ap-ligne > .ap-sortir, .ap-ligne > .ap-ici { grid-column: 2; justify-self: start; margin-bottom: 4px; }
}
/* TÉLÉPHONE — N5 (annexe B remesurée sur d1cc705) : « Supprimer mon compte » (un lien de 23 px de haut, dans « Mon compte ») : 32 px de
   zone de toucher, même texte, même soulignement. Bornée au téléphone. */
@media (orientation: portrait) and (max-width: 480px), (orientation: landscape) and (max-height: 560px) {
  .ap-supprimer { min-height: 32px; }
}