/* Console du Pôle technique (#/technique), au thème de l'entrée de Suna.
   Chargé après entree.css. */
.tech { overflow: visible; min-height: 100vh; padding-bottom: 40px; }
.tech .tech-fond { position: fixed; }
.tech-zone { width: 100%; max-width: 1120px; margin: 0 auto; display: grid; gap: 16px; min-width: 0; }

/* En-tête */
.tech-entete { width: 100%; max-width: 1120px; margin: 6px auto 0; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 18px; }
.tech-sceau { display: grid; place-items: center; width: 64px; height: 80px; font: 2.4rem/1 'Yuji Syuku', serif; color: var(--or);
  background: linear-gradient(180deg, rgb(20 13 6 / 0.9), rgb(10 7 3 / 0.94)); border: 1px solid rgb(233 196 106 / 0.55);
  box-shadow: 0 12px 24px rgb(0 0 0 / 0.55); }
.tech-entete small { display: block; font: 700 0.74rem/1 var(--titre); letter-spacing: 0.28em; text-transform: uppercase; color: var(--or); }
.tech-entete h1 { margin: 6px 0 4px; font: 700 clamp(1.9rem, 4vw, 2.8rem)/1 var(--titre); letter-spacing: 0.08em; text-transform: uppercase;
  background: linear-gradient(180deg, #fff6dc 20%, var(--or) 85%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tech-entete p { margin: 0; color: #eadcbc; max-width: 62ch; text-shadow: 0 1px 8px rgb(0 0 0 / 0.9); }
.tech-onglets { grid-column: 1 / -1; display: flex; gap: 4px; margin-top: 10px; border-bottom: 1px solid rgb(233 196 106 / 0.3); }
.tech-onglets a { padding: 10px 16px; color: #eadcbc; text-decoration: none; font: 600 0.95rem/1 var(--titre); letter-spacing: 0.16em; text-transform: uppercase;
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tech-onglets a:hover { color: var(--or-pale); }
.tech-onglets a[aria-current='page'] { color: var(--or); border-bottom-color: var(--or); }

/* Cartes */
.tech-carte { min-width: 0; padding: 18px 20px; background: rgb(16 11 6 / 0.84); border: 1px solid rgb(233 196 106 / 0.28); border-radius: 4px;
  box-shadow: 0 24px 50px -24px rgb(0 0 0 / 0.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.tech-carte h2 { font-size: 1.6rem; margin: 0 0 4px; }
.tech-carte h3 { font: 700 1.15rem/1.1 var(--titre); letter-spacing: 0.12em; text-transform: uppercase; color: var(--or); margin: 0 0 10px; }
.tech-refus { max-width: 560px; justify-self: center; text-align: center; }
.tech-refus p { color: #eadcbc; }
.tech-note { margin: 0 0 8px; color: var(--texte-doux); font-size: 0.9rem; }
.tech-avis { margin: 8px 0 0; padding: 8px 12px; border-left: 4px solid var(--sceau-clair); background: rgb(163 48 42 / 0.2); color: #ffd9d4; font-size: 0.92rem; border-radius: 3px; }
.tech-avis[hidden] { display: none; }

/* Champs sombres */
.tech input[type='text'], .tech input[type='search'], .tech select { background: rgb(8 5 2 / 0.7); color: var(--texte); border: 1px solid rgb(233 196 106 / 0.35); }
.tech input:focus-visible, .tech select:focus-visible { outline: 2px solid var(--or); outline-offset: 1px; }
.tech select:disabled { opacity: 0.45; }
.tech select option { background: #1c140b; color: var(--texte); }
.tech button.secondaire { color: var(--or-pale); }
.tech button:disabled { cursor: not-allowed; }

/* Liste des comptes */
.tech-filtres { display: grid; grid-template-columns: 1fr minmax(170px, 240px); gap: 10px; }
.tech-compte-total { margin: 14px 0 8px; color: var(--texte-doux); font: 600 0.85rem/1 var(--titre); letter-spacing: 0.16em; text-transform: uppercase; }
.tech-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tech-ligne { display: grid; grid-template-columns: 40px minmax(150px, 230px) 1fr 20px; align-items: center; gap: 12px; padding: 10px 12px;
  color: var(--texte); text-decoration: none; border: 1px solid rgb(233 196 106 / 0.14); border-radius: 3px; background: rgb(255 255 255 / 0.02); }
.tech-ligne:hover, .tech-ligne:focus-visible { border-color: rgb(233 196 106 / 0.6); background: rgb(233 196 106 / 0.07); color: var(--texte); }
.tech-ligne .avatar, .tech-identite .avatar { border-radius: 50%; object-fit: cover; }
.tech-ligne-nom { min-width: 0; }
.tech-ligne-nom b, .tech-ligne-nom small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tech-ligne-nom small { color: var(--texte-doux); font-size: 0.82rem; }
.tech-ligne-fleche { color: var(--or); justify-self: end; }
.tech-pages { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; color: var(--texte-doux); font-size: 0.9rem; flex-wrap: wrap; }

/* Puces d'accès */
.tech-puces { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.tech-puce { --t: 233 196 106; display: inline-block; max-width: 100%; padding: 3px 9px; border-radius: 20px; font: 600 0.78rem/1.3 var(--corps);
  color: rgb(var(--t)); background: rgb(var(--t) / 0.12); border: 1px solid rgb(var(--t) / 0.45); overflow-wrap: anywhere; }
.tech-puce-haruba { --t: 214 178 94; }
.tech-puce-tribunal { --t: 232 120 104; }
.tech-puce-pole { --t: 240 181 78; }
.tech-puce-technique { --t: 150 200 235; }
.tech-puce-attente { --t: 170 190 120; border-style: dashed; }
.tech-puce-refus { --t: 230 90 80; }
.tech-puce-gris, .tech-puce-vide { --t: 180 168 145; }

/* Fiche d'un compte */
.tech-retour { justify-self: start; color: #eadcbc; text-decoration: none; font: 600 0.9rem/1 var(--titre); letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 0; }
.tech-retour:hover { color: var(--or-pale); }
.tech-identite { display: flex; align-items: center; gap: 16px; }
.tech-identite > div { min-width: 0; }
.tech-identite p { margin: 0 0 8px; color: var(--texte-doux); font-size: 0.9rem; overflow-wrap: anywhere; }
.tech-blocs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tech-bloc { display: flex; flex-direction: column; }
.tech-bloc > header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tech-bloc > header h3 { margin: 0; }
.tech-bloc-kanji { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgb(233 196 106 / 0.55); font: 17px/1 'Yuji Syuku', serif; color: var(--or); }
.tech-bloc-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; margin: 6px 0 10px; align-items: end; }
.tech-champ { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tech-champ label { font-weight: 600; font-size: 0.86rem; color: #eadcbc; }
.tech-bloc > .tech-champ { margin-top: auto; }
.tech-case { display: flex; align-items: center; gap: 9px; min-height: 40px; cursor: pointer; font-weight: 600; }
.tech-case input { width: 18px; height: 18px; accent-color: var(--or); flex: none; }
.tech-case:has(input:disabled) { opacity: 0.5; cursor: default; }
.tech-bloc-actions { display: flex; justify-content: flex-end; margin-top: 12px; }

/* Confirmation (boîte de dialogue claire) */
.tech-confirmation { display: grid; gap: 4px; }

/* Journal */
.tech-journal { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tech-evenement { padding: 10px 12px; border: 1px solid rgb(233 196 106 / 0.14); border-radius: 3px; background: rgb(255 255 255 / 0.02); }
.tech-evenement-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.tech-evenement-tete a { color: var(--texte); font-weight: 600; }
.tech-evenement-tete time { margin-left: auto; color: var(--texte-doux); font-size: 0.85rem; }
.tech-evenement-changements { margin: 6px 0 4px; padding-left: 18px; }
.tech-evenement-pied { margin: 0; color: var(--texte-doux); font-size: 0.85rem; overflow-wrap: anywhere; }

@media (max-width: 860px) {
  .tech-blocs { grid-template-columns: 1fr; }
  .tech-ligne { grid-template-columns: 40px minmax(0, 1fr) 16px; }
  .tech-ligne .tech-puces { grid-column: 2 / 3; }
  .tech-ligne-fleche { grid-row: 1; grid-column: 3; }
}
@media (max-width: 520px) {
  .tech-carte { padding: 14px; }
  .tech-filtres { grid-template-columns: 1fr; }
  .tech-entete { grid-template-columns: 1fr; }
  .tech-sceau { display: none; }
  .tech-bloc-champs { grid-template-columns: 1fr; }
  .tech-identite { align-items: flex-start; }
  .tech-evenement-tete time { margin-left: 0; width: 100%; }
  .tech-onglets a { flex: 1; text-align: center; }
}