/* Les comptes : bouton de la barre, invitations à créer un compte, page du
   compte et page d'administration. Les invitations paraissent aussi sur la
   page du jeu, qui n'a pas la charte : chaque couleur y a sa valeur de repli
   (var(--or, #e8b45c)). Chargé par compte.html et admin.html, et par
   site/compte.js sur les autres pages. */

/* ═══════════ bouton de la barre ═══════════ */
[data-compte=""] { display: inline-flex; }
.ql-compte { position: relative; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.ql-compte-ico { width: 17px; height: 17px; flex: none; }
.barre nav .ql-compte--connecte { color: var(--or-clair, #f3cf8a); }
.barre nav .ql-compte--inactif { color: var(--texte-doux, rgba(243, 236, 224, .64)); }
.ql-compte-point {
  position: absolute; top: 4px; left: 21px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--vert, #86d0a6); box-shadow: 0 0 0 2px rgba(6, 17, 27, .92);
}
.ql-synchro--en-cours .ql-compte-point { background: var(--or, #e8b45c); animation: ql-pouls 1s ease-in-out infinite; }
.ql-synchro--erreur .ql-compte-point, .ql-synchro--hors-ligne .ql-compte-point { background: var(--corail, #f07a68); }
@keyframes ql-pouls { 50% { opacity: .35; } }
@media (max-width: 600px) {
  .barre .ql-compte-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .barre nav .ql-compte { padding: 7px 8px; }
  .barre nav .ql-compte .ql-compte-ico { width: 19px; height: 19px; }
}

/* ═══════════ invitation à créer un compte ═══════════ */
.ql-invite {
  position: relative; display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 18px; border-radius: 12px; text-align: left;
  border: 1px solid rgba(232, 180, 92, .34);
  background: linear-gradient(135deg, rgba(232, 180, 92, .1), rgba(232, 180, 92, 0) 55%), rgba(20, 19, 16, .92);
  color: #f3ece0; box-shadow: 0 12px 34px rgba(0, 0, 0, .32);
  font: 400 14.5px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.ql-invite-ico {
  flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(232, 180, 92, .14); color: #e8b45c; border: 1px solid rgba(232, 180, 92, .45);
}
.ql-invite-ico svg { width: 21px; height: 21px; }
.ql-invite-corps { min-width: 0; }
.ql-invite-kicker { display: block; font: 600 10.5px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .16em; text-transform: uppercase; color: #e8b45c; }
.ql-invite-titre { display: block; margin: 2px 0 4px; font-size: 16.5px; font-weight: 650; line-height: 1.3; color: #f3ece0; }
.ql-invite-texte { margin: 0 0 12px; color: rgba(243, 236, 224, .84); }
.ql-invite-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ql-invite-oui {
  display: inline-flex; align-items: center; min-height: 36px; padding: 8px 14px; border-radius: 8px;
  background: #e8b45c; border: 1px solid #e8b45c; color: #1b160d; font: 650 13.5px/1.2 ui-sans-serif, system-ui, sans-serif; text-decoration: none;
}
.ql-invite-oui:hover { background: #f3cf8a; color: #1b160d; }
.ql-invite-non {
  min-height: 36px; padding: 7px 12px; border-radius: 8px; cursor: pointer;
  background: transparent; border: 1px solid rgba(243, 236, 224, .26); color: rgba(243, 236, 224, .84);
  font: 600 13px/1.2 ui-sans-serif, system-ui, sans-serif;
}
.ql-invite-non:hover { border-color: #e8b45c; color: #f3ece0; }
.ql-invite-oui:focus-visible, .ql-invite-non:focus-visible { outline: 2px solid #e8b45c; outline-offset: 2px; }
/* dans le résultat d'un défi du cours : sous le score */
.defi-resultat .ql-invite { margin-top: 16px; box-shadow: none; background: rgba(255, 255, 255, .04); }
@media (max-width: 420px) { .ql-invite { padding: 14px; gap: 11px; } .ql-invite-ico { width: 34px; height: 34px; } }

/* ═══════════ page du jeu ═══════════ */
/* le bouton de compte, en haut à droite, seulement avant la partie (comme « Accueil ») */
.ql-jeu-compte { position: fixed; top: calc(14px + env(safe-area-inset-top, 0px)); right: calc(16px + env(safe-area-inset-right, 0px)); z-index: 11; display: none; }
body.titre .ql-jeu-compte { display: block; }
.ql-jeu-compte .ql-compte {
  /* 40 px de haut, comme « Accueil » à gauche : une vraie cible au doigt */
  display: inline-flex; align-items: center; min-height: 40px; box-sizing: border-box;
  padding: 7px 12px 7px 10px; border-radius: 8px;
  background: rgba(20, 19, 16, .72); border: 1px solid rgba(232, 180, 92, .28);
  color: #f3ece0; font: 500 12px ui-sans-serif, system-ui, sans-serif; letter-spacing: .02em; text-decoration: none;
  transition: border-color .2s, background .2s;
}
.ql-jeu-compte .ql-compte:hover, .ql-jeu-compte .ql-compte:focus-visible { border-color: #e8b45c; background: rgba(20, 19, 16, .9); outline: none; }
.ql-jeu-compte .ql-compte--connecte { color: #f3cf8a; }
.ql-jeu-compte .ql-compte-ico { width: 15px; height: 15px; color: #e8b45c; }
.ql-jeu-compte .ql-compte-point { top: 3px; left: 20px; }
/* l'invitation de l'écran-titre : sur les grands écrans seulement, sous le bouton, une fois la ville chargée */
.ql-jeu-invite { position: fixed; top: calc(58px + env(safe-area-inset-top, 0px)); right: calc(16px + env(safe-area-inset-right, 0px)); z-index: 11; width: 350px; display: none; }
@media (min-width: 1180px) and (min-height: 640px) {
  body.titre #loader.gone ~ .ql-jeu-invite { display: block; animation: ql-arrive .5s ease .3s both; }
}
.ql-jeu-invite[hidden] { display: none !important; }
/* après une quête accomplie : un bandeau au-dessus du canevas, qui s'efface seul. site/compte.js
   ne le pose qu'une fois le message « Quête accomplie » et la fiche de l'album partis ; les
   messages du jeu l'évitent ensuite (src/game.js, Compte.zoneInvite) */
.ql-invite-flottante {
  position: fixed; z-index: 30; left: 50%; top: calc(150px + env(safe-area-inset-top, 0px));   /* sous la plaque de lieu et le bouton Terrain */
  width: min(460px, calc(100vw - 24px)); transform: translateX(-50%);
  animation: ql-arrive .45s ease both;
}
/* grand écran : sous la ligne des messages du jeu (en haut au centre, de 22 à 54 px) */
@media (min-width: 1180px) { .ql-invite-flottante { top: calc(64px + env(safe-area-inset-top, 0px)); } }
/* téléphone en portrait : la colonne des boutons tactiles (Journal, Carte, +, −) reste libre ;
   site/compte.js mesure la barre et pose --ql-droite */
.ql-invite-flottante.ql-invite-flottante--colonne {
  left: calc(12px + env(safe-area-inset-left, 0px)); right: var(--ql-droite, 80px); width: auto;
  transform: none; --ql-x: 0;
}
/* téléphone en paysage : sur la manette et les boutons d'action, il se réduit à son titre et à ses
   boutons (site/compte.js), sous la ligne du haut (--ql-haut)… */
.ql-invite-flottante.ql-invite-flottante--court { top: var(--ql-haut, 80px); width: max-content; max-width: calc(100vw - 24px); }
.ql-invite-flottante--court .ql-invite { align-items: center; padding: 10px 12px 10px 16px; }
.ql-invite-flottante--court .ql-invite-ico, .ql-invite-flottante--court .ql-invite-kicker, .ql-invite-flottante--court .ql-invite-texte { display: none; }
.ql-invite-flottante--court .ql-invite-corps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ql-invite-flottante--court .ql-invite-titre { margin: 0; }
/* … ou en bas, entre la manette et les boutons (--ql-gauche, --ql-droite) */
.ql-invite-flottante.ql-invite-flottante--entre {
  top: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); left: var(--ql-gauche, 158px); right: var(--ql-droite, 186px);
  width: auto; max-width: none; transform: none; --ql-x: 0;
}
/* sans aucune place, en mode terrain, sur l'invite d'action du jeu ou le temps d'un message qu'il
   ferait abréger : effacé, site/compte.js le replace dès que cela change */
.ql-invite-flottante.ql-invite-flottante--sans-place { visibility: hidden; }
/* au doigt, ses deux boutons : des cibles de 40 px */
@media (pointer: coarse) { .ql-invite-flottante .ql-invite-oui, .ql-invite-flottante .ql-invite-non { min-height: 40px; } }
.ql-invite-flottante[hidden] { display: none; }
/* le menu tactile ouvert (src/tactile.js pose html.tac-menu-ouvert) : le bandeau, au-dessus des
   commandes, s'efface le temps du menu, sans recevoir les touchers destinés à ses entrées */
html.tac-menu-ouvert .ql-invite-flottante { visibility: hidden; }
@keyframes ql-arrive { from { opacity: 0; transform: translate(var(--ql-x, 0), -10px); } to { opacity: 1; transform: translate(var(--ql-x, 0), 0); } }
.ql-invite-flottante { --ql-x: -50%; }
@media (prefers-reduced-motion: reduce) { .ql-jeu-invite, .ql-invite-flottante { animation: none !important; } }

/* ═══════════ page du compte ═══════════ */
.page-compte main, .page-admin main { padding: clamp(28px, 6vw, 64px) 0 clamp(44px, 7vw, 84px); }
.compte-tete .titre-bd { margin: 12px 0 18px; }
.compte-tete .chapeau { margin-bottom: 26px; }
.compte-corps { display: grid; gap: 18px; }
.compte-connecte { display: grid; gap: 18px; }
.compte-connecte[hidden], .compte-etat[hidden] { display: none; }
.compte h2, .admin h2 { font-size: 19px; font-weight: 650; margin: 0 0 12px; }
.compte-form { display: grid; gap: 16px; }
.champ { display: grid; gap: 7px; }
.champ label, .admin-outils label:not(.case) { font-weight: 600; font-size: 14.5px; color: var(--texte); }
.compte input[type="email"], .compte input[type="text"], .admin input[type="search"], .admin select {
  width: 100%; min-height: 46px; padding: 11px 14px; border-radius: 10px;
  border: 1px solid rgba(243, 236, 224, .24); background: rgba(255, 255, 255, .05); color: var(--texte);
  font: 500 16px/1.3 var(--sans);        /* 16 px : pas de zoom automatique sur iPhone */
}
.admin select { appearance: none; padding-right: 36px; cursor: pointer;
  background: rgba(255, 255, 255, .05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23e8b45c' stroke-width='1.6'/%3E%3C/svg%3E") right 14px center / 12px 8px no-repeat; }
.admin select option { background: #17150f; color: var(--texte); }
.compte input::placeholder, .admin input::placeholder { color: rgba(243, 236, 224, .38); }
.compte input:focus, .admin input:focus, .admin select:focus { outline: 2px solid var(--or); outline-offset: 1px; border-color: transparent; }
.compte #code { max-width: 260px; font: 600 26px/1 var(--mono); letter-spacing: .32em; text-align: center; padding: 12px 10px; }
.cases { display: grid; gap: 12px; }
.case { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; color: var(--texte-2); cursor: pointer; }
.case input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--or); cursor: pointer; }
.obligatoire { margin-left: 4px; font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--or); white-space: nowrap; }
.erreur {
  margin: 0; padding: 10px 13px; border-radius: 10px; font-size: 14px; line-height: 1.45;
  color: #ffc2b8; background: rgba(224, 49, 63, .12); border: 1px solid rgba(224, 49, 63, .38);
}
.erreur[hidden] { display: none; }
.petit { font-size: 13px; line-height: 1.55; }
.compte-boutons { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0; }
.lien { background: none; border: 0; padding: 0; font: inherit; color: var(--or-clair); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.lien:disabled { color: var(--texte-doux); text-decoration: none; cursor: default; }
/* l'attribut hidden l'emporte sur les display des boutons et des panneaux de la charte */
.compte [hidden], .admin [hidden] { display: none !important; }
.compte .case + .compte-boutons { margin-top: 14px; }
.compte-message { padding: 13px 16px; border-color: rgba(134, 208, 166, .4); color: var(--texte); }
.compte-message[hidden] { display: none; }
.compte-inactif { font-size: 17px; margin: 14px 0 6px; }
.tampon--petit { font-size: 15px; padding: 5px 10px 4px; }
.tampon[hidden] { display: none; }
.compte-qui { display: grid; gap: 6px; justify-items: start; }
.compte-email { font-size: clamp(18px, 3.6vw, 22px); font-weight: 650; word-break: break-all; }
.synchro { display: inline-flex; align-items: center; gap: 8px; font: 500 12.5px/1.4 var(--mono); color: var(--texte-2); }
.synchro::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--vert); }
.synchro[data-e="en-cours"]::before { background: var(--or); animation: ql-pouls 1s infinite; }
.synchro[data-e="erreur"]::before, .synchro[data-e="hors-ligne"]::before { background: var(--corail); }
.synchro[data-e="inactif"]::before { background: var(--texte-doux); }
.compte-qui .compte-boutons { margin-top: 8px; }
.resume { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.resume-carte { padding: 18px 20px 16px; }
.resume-carte ul { list-style: none; margin: 10px 0 14px; padding: 0; display: grid; gap: 7px; font-size: 14.5px; color: var(--texte-2); }
.resume-carte li b { font: 400 25px/1 var(--bd); color: var(--creme); letter-spacing: .02em; margin-right: 6px; vertical-align: -2px; }
.resume-lien { font-weight: 600; text-decoration: none; }
.compte hr { border: 0; border-top: 1px dashed rgba(243, 236, 224, .14); margin: 18px 0 16px; }
.compte-ok { color: var(--vert); font-weight: 600; font-size: 14px; }
.captcha { min-height: 66px; }
.captcha[hidden] { display: none; }
.zone-danger { border-color: rgba(224, 49, 63, .38); }
.zone-danger h2 { color: #ffb4a8; }
.bouton--danger { background: #b92c38; border-color: #b92c38; color: #fff; box-shadow: 0 2px 0 #6e1820; }
.bouton--danger:hover { background: #d8323f; color: #fff; }
.bouton:disabled { opacity: .6; cursor: progress; transform: none; }
.confirmer { margin-top: 14px; padding-top: 14px; border-top: 1px dashed rgba(224, 49, 63, .35); display: grid; gap: 12px; }
.confirmer[hidden] { display: none; }
@media (max-width: 560px) {
  .resume { grid-template-columns: 1fr; }
  .compte-boutons .bouton { flex: 1 1 auto; justify-content: center; }
}

/* ═══════════ page d'administration ═══════════ */
.admin-tete { margin-bottom: 22px; }
.admin-tete .doux { max-width: 760px; }
.admin-etat[hidden] { display: none; }
.admin-liste { display: grid; gap: 16px; }
.admin-compteurs .chiffre .valeur { font-size: clamp(30px, 3.6vw, 42px); }
@media (max-width: 520px) {
  .admin-compteurs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .admin-compteurs .chiffre { padding: 14px 14px 12px; }
  .admin-compteurs .chiffre .legende { font-size: 13px; }
}
.admin-outils { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-end; padding: 16px 18px; }
.admin-recherche { flex: 1 1 260px; }
.admin-outils .champ:not(.admin-recherche) { flex: 0 1 290px; }
.admin-outils .case { align-self: center; margin-top: 22px; }
.admin-boutons { margin-left: auto; }
.admin-table-boite { overflow-x: auto; border-radius: 12px; border: 1px solid var(--bord); background: rgba(20, 19, 16, .6); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.admin-table th {
  text-align: left; padding: 11px 12px; white-space: nowrap; background: rgba(255, 255, 255, .03);
  font: 600 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--or);
}
.admin-table td { padding: 10px 12px; border-top: 1px solid rgba(243, 236, 224, .08); vertical-align: top; color: var(--texte-2); }
.admin-table .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-table tbody tr:hover td { background: rgba(232, 180, 92, .05); }
/* l'adresse, la colonne que l'on vient lire : jamais hachée lettre par lettre (break-all la réduisait
   à 70 px dans un tableau en largeur automatique) ; coupée seulement si une adresse ne tient pas */
.admin-email { color: var(--texte) !important; font-weight: 600; overflow-wrap: anywhere; min-width: 18ch; }
.admin-oui { color: var(--vert) !important; font-weight: 600; }
.admin-badge { display: inline-block; padding: 1px 7px; border-radius: 999px; font: 600 10px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--corail); border: 1px solid rgba(240, 122, 104, .5); }
.admin-villes ol { margin: 0; padding-left: 22px; columns: 3 200px; column-gap: 30px; }
.admin-villes li { margin: 0 0 6px; break-inside: avoid; }
.admin-villes li b { color: var(--or); font-weight: 650; margin-left: 4px; }
/* une carte par inscrit plutôt qu'un tableau à faire défiler ou aux adresses coupées : les neuf
   colonnes ne tiennent bien qu'à partir de 1100 px (téléphone en paysage, tablette : des cartes) */
@media (max-width: 1099px) {
  .admin-table-boite { overflow: visible; border: 0; background: none; }
  .admin-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .admin-table, .admin-table tbody, .admin-table tr, .admin-table td { display: block; width: 100%; }
  .admin-table tr { margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--bord); background: rgba(20, 19, 16, .7); }
  .admin-table td { display: flex; justify-content: space-between; gap: 14px; padding: 4px 0; border: 0; text-align: right; }
  .admin-table td::before { content: attr(data-label); flex: none; text-align: left; font: 600 10.5px/1.9 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux); }
  .admin-table td.admin-email { display: block; text-align: left; font-size: 15px; padding-bottom: 8px; }
  .admin-table td.admin-email::before { display: none; }
  .admin-table tbody tr:hover td { background: none; }
}
@media (max-width: 760px) {
  .admin-boutons { margin-left: 0; width: 100%; }
  .admin-outils .case { margin-top: 0; }
}