/* SSP — css/rapport-admin.css
   Les textes d'une enquête : leur mise en forme [b] [i] [u], et leur
   édition par le MJ. Partagé par report.html, report_scene.html et
   enquetes.html, avec js/rapport-admin.js — qui dit, en tête, ce que la
   page doit fournir.

   Deux choses viennent de la page et ne sont pas redéfinies ici :
   - .details-text, l'allure du texte édité (police, corps, interligne) :
     l'éditeur la porte aussi, pour que ce qu'on saisit ait d'emblée
     l'allure de ce qui s'affichera ;
   - la place du bouton : à côté de « Pièces jointes » dans report.html,
     dans le chrome du volet de report_scene.html, à droite de la barre
     d'enquetes.html (« Aide MJ »).

   accueilSSP.html la charge aussi, sans le script : son popup « Liste
   enquêtes » emprunte le panneau et le portail (.admin-panel,
   .admin-gate-*, .admin-psw-*), et rien d'autre.

   Chargée après le <style> de la page. Une retouche → incrémenter le ?v=N
   des quatre <link>, comme pour wiki-recherche.css. */

/* ════════════════════════════════════════════════════
   MISE EN FORME DU TEXTE — [b] [i] [u], voir formaterRapport()
   Vaut pour le texte affiché comme pour l'éditeur.
   ════════════════════════════════════════════════════ */
/* 600 et non le 700 implicite de <b> : Inter n'est chargée qu'en 400, 500
   et 600 (eos.css) — un 700 serait une graisse synthétisée. */
.details-text b { font-weight: 600; color: var(--text-primary); }
.details-text u {
  text-decoration-color: rgba(76,143,209,0.7);
  text-underline-offset: 3px;
}

/* ════════════════════════════════════════════════════
   ADMINISTRATION — édition du texte du rapport
   Bouton, portail et popup sont ceux d'enquetes.html : même mot de passe
   (phobos_psw), même violet d'administration réservé au MJ.
   ════════════════════════════════════════════════════ */

/* « Édition » : révélé par brancherAdmin(), une fois le rapport chargé — il
   n'y a rien à éditer avant. Classe plutôt qu'attribut hidden, que Safari
   ignore sur un bouton (convention n°9).
   Même gabarit que le bouton « Pièces jointes » de report.html, à côté
   duquel il se range : seul le violet d'administration les distingue. */
.admin-btn {
  display: none; align-items: center; gap: 7px;
  flex-shrink: 0;
  padding: 5px 10px;
  background: rgba(var(--accent-admin-rgb),0.07);
  border: 1px solid rgba(var(--accent-admin-rgb),0.35);
  color: var(--accent-admin); cursor: pointer;
  font-family: var(--font-mono);
  font-size: 8px; letter-spacing: 2px; text-transform: uppercase;
  transition: all 0.2s;
}
.admin-btn-icon { font-size: 10px; line-height: 1; }
.admin-btn.visible { display: flex; }
.admin-btn:hover {
  background: rgba(var(--accent-admin-rgb),0.16);
  border-color: var(--accent-admin);
  box-shadow: 0 0 10px rgba(var(--accent-admin-rgb),0.2);
}

/* Frère du cadre, jamais son enfant : socle.css met la zone de contenu en
   overflow auto, un overlay posé dedans défilerait avec elle (CLAUDE.md,
   « Overlays plein écran hors du cadre, z-index ≥ 5000 »). Sous la
   visionneuse (9000), qu'on ne peut de toute façon pas ouvrir pendant
   l'édition : le popup couvre ce qui la déclenche. */
#admin-overlay {
  position: fixed; inset: 0; z-index: 5000;
  display: none; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(4,7,11,0.88);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
#admin-overlay.open { display: flex; }

/* Animation propre plutôt que le fadeSlideIn des pages : ce fichier ne
   dépend ainsi d'aucune de leurs @keyframes. Mêmes étapes. */
@keyframes adminEntree {
  from { opacity:0; transform: translateY(-12px); }
  to   { opacity:1; transform: translateY(0); }
}

.admin-panel {
  width: min(680px, 100%); max-height: min(78dvh, 640px);
  display: flex; flex-direction: column;
  background: rgba(13,22,32,0.97);
  border: 1px solid rgba(var(--accent-admin-rgb),0.35);
  border-left: 3px solid var(--accent-admin);
  box-shadow: 0 0 40px rgba(0,0,0,0.6);
  animation: adminEntree 0.28s cubic-bezier(.22,1,.36,1) both;
}
/* Une fois déverrouillé, le popup s'agrandit pour l'éditeur : un rapport
   se relit mieux sur la largeur d'une page que dans une boîte de dialogue.
   Hauteur fixée et non plafonnée, pour que la zone de saisie reçoive en
   flex tout ce que la barre d'outils et le pied lui laissent. */
.admin-panel.edition { width: min(860px, 100%); height: min(86dvh, 760px); max-height: none; }

.admin-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 12px 18px;
  border-bottom: 1px solid rgba(var(--accent-admin-rgb),0.2);
  flex-shrink: 0;
}
.admin-panel-label {
  font-family: var(--font-mono); font-size: 8px;
  letter-spacing: 3px; text-transform: uppercase; color: var(--accent-admin);
}
.admin-panel-title {
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  letter-spacing: 2px; color: var(--white);
}
.admin-close {
  background: none; border: 1px solid rgba(126,147,166,0.3);
  color: var(--silver2); cursor: pointer;
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 2px; padding: 4px 10px; transition: all 0.2s;
  flex-shrink: 0;
}
.admin-close:hover { border-color: var(--silver2); color: var(--white); }

.admin-panel-body { padding: 20px 18px; overflow-y: auto; }

/* Écran de saisie — mêmes classes que les portails d'enquetes.html et de
   citoyen.html, pour que les trois se ressemblent. */
.admin-gate-text {
  font-family: var(--font-body); font-size: 12px;
  color: var(--silver); line-height: 1.7; margin-bottom: 14px;
}
.admin-gate-row { display: flex; gap: 0; width: 100%; max-width: 320px; }
.admin-psw-input {
  flex: 1; min-width: 0;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(var(--accent-admin-rgb),0.3); border-right: none;
  color: var(--white); font-family: var(--font-mono); font-size: 13px;
  padding: 8px 14px; outline: none; letter-spacing: 3px; transition: all 0.2s;
}
.admin-psw-input::placeholder {
  color: rgba(126,147,166,0.35); letter-spacing: 2px; font-size: 10px;
}
.admin-psw-input:focus {
  border-color: var(--accent-admin); background: rgba(var(--accent-admin-rgb),0.05);
  box-shadow: 0 0 10px rgba(var(--accent-admin-rgb),0.1);
}
.admin-psw-btn {
  padding: 0 18px;
  background: rgba(var(--accent-admin-rgb),0.1); border: 1px solid rgba(var(--accent-admin-rgb),0.4);
  color: var(--accent-admin); font-family: var(--font-display);
  font-size: 8px; font-weight: 700; letter-spacing: 3px;
  cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.admin-psw-btn:hover { background: rgba(var(--accent-admin-rgb),0.2); box-shadow: 0 0 14px rgba(var(--accent-admin-rgb),0.2); }
.admin-psw-btn:active { transform: scale(0.97); }
.admin-psw-btn:disabled { opacity: 0.45; cursor: wait; }

.admin-gate-msg {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 2px; min-height: 16px; margin-top: 10px;
}
.admin-gate-msg.err  { color: var(--red); }
.admin-gate-msg.info { color: var(--accent-admin); }
.admin-gate-msg.ok   { color: var(--accent-success); }

@keyframes shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
.admin-gate-row.shake { animation: shake 0.35s; }

/* ─── L'ÉDITEUR ───────────────────────────────────── */
.editeur { display: none; flex: 1; min-height: 0; flex-direction: column; }
.admin-panel.edition .editeur      { display: flex; }
.admin-panel.edition #admin-gate   { display: none; }

.editeur-barre {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(var(--accent-admin-rgb),0.15);
  flex-shrink: 0;
}
/* G / I / S : les initiales françaises des traitements de texte. La lettre
   porte elle-même le style qu'elle applique. */
.editeur-btn {
  width: 32px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(var(--accent-admin-rgb),0.25);
  color: var(--silver); cursor: pointer;
  font-family: var(--font-body); font-size: 13px;
  transition: all 0.15s;
}
.editeur-btn:hover { border-color: rgba(var(--accent-admin-rgb),0.6); color: var(--white); }
/* L'état suit la sélection (majEtatBarre) : le bouton dit si le texte sous
   le curseur est déjà gras, italique, souligné. */
.editeur-btn[aria-pressed="true"] {
  background: rgba(var(--accent-admin-rgb),0.22);
  border-color: var(--accent-admin); color: var(--white);
}
.editeur-btn b { font-weight: 600; }
.editeur-aide {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 8px;
  letter-spacing: 2px; color: rgba(126,147,166,0.45);
}

/* pre-wrap : sans lui, deux espaces tapées à la suite deviendraient des
   espaces insécables, qui finiraient en base. */
.editeur-zone {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 16px 18px; margin: 0;
  background: rgba(0,0,0,0.35);
  outline: none; white-space: pre-wrap; overflow-wrap: anywhere;
  cursor: text;
  scrollbar-width: thin; scrollbar-color: rgba(var(--accent-admin-rgb),0.3) transparent;
  transition: box-shadow 0.2s;
}
.editeur-zone::-webkit-scrollbar { width: 4px; }
.editeur-zone::-webkit-scrollbar-thumb { background: rgba(var(--accent-admin-rgb),0.3); border-radius: 2px; }
.editeur-zone:focus { box-shadow: inset 0 0 0 1px rgba(var(--accent-admin-rgb),0.35); }
.editeur-zone:empty::before {
  content: attr(data-vide);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px;
  color: rgba(126,147,166,0.35); pointer-events: none;
}

.editeur-pied {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 10px 18px;
  border-top: 1px solid rgba(var(--accent-admin-rgb),0.15);
  flex-shrink: 0;
}
.editeur-pied .admin-gate-msg { margin-top: 0; min-width: 0; }
.editeur-actions { display: flex; gap: 8px; flex-shrink: 0; }
.editeur-actions .admin-psw-btn { height: 28px; }

/* ─── RÉDUCTION ─────────────────────────────────────── */
@media (max-width: 640px) {
  /* « Édition » se réduit à son pictogramme, son title le nomme encore :
     à 375 px, le chrome du volet de report_scene.html (libellé, badge de
     verrouillage, numéro, bouton) passait sur deux lignes. */
  .admin-btn-label { display: none; }
  .admin-panel.edition { height: 90dvh; }
  .admin-panel-body { padding: 16px 14px; }
  .admin-gate-row { max-width: none; }
  .editeur-barre, .editeur-pied { padding-left: 14px; padding-right: 14px; }
  .editeur-aide { display: none; }
  .editeur-pied { flex-wrap: wrap; }
}