@charset "UTF-8";
/* ==========================================================================
   CONSTELLATION 50 — Salle de contrôle
   Même nuit, mais sans la fête : ici on lit, on tranche, on publie.
   Densité d'information plus forte, typographie utilitaire, zéro confetti.
   ========================================================================== */

body.controle {
  background:
    radial-gradient(90% 60% at 12% 0%, #17103c 0%, transparent 55%),
    linear-gradient(180deg, #0a0620 0%, #060314 100%);
  background-attachment: fixed;
}

/* ==========================================================================
   Connexion
   ========================================================================== */
.portail {
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: var(--e-5);
}

.portail-carte {
  width: min(100%, 25rem);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border: 1px solid var(--trait);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--ombre-halo);
  animation: monte 0.7s var(--ressort) both;
}

.portail-sceau {
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  margin-bottom: var(--e-5);
  border-radius: 50%;
  border: 1px solid var(--trait-or);
  background: radial-gradient(circle at 35% 25%, rgba(245,201,120,0.32), transparent 62%);
  font-family: var(--f-titre);
  font-weight: 700;
  color: var(--or-clair);
}

.portail-titre {
  font-family: var(--f-titre);
  font-size: var(--t-xl);
  font-weight: 400;
  font-variation-settings: "SOFT" 40, "WONK" 1;
}
.portail-carte > p { margin: var(--e-2) 0 var(--e-5); font-size: var(--t-sm); color: var(--brume); }
.portail-formulaire { display: flex; flex-direction: column; gap: var(--e-4); }
.portail-retour { display: block; margin-top: var(--e-5); font-size: var(--t-xs); color: var(--brume-2); text-align: center; }
.portail-retour:hover { color: var(--or); }

/* ==========================================================================
   En-tête de la salle
   ========================================================================== */
.controle-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  flex-wrap: wrap;
  padding-block: var(--e-5);
  border-bottom: 1px solid var(--trait);
  margin-bottom: var(--e-6);
}
.controle-titre {
  font-family: var(--f-titre);
  font-size: var(--t-xl);
  font-weight: 400;
  font-variation-settings: "SOFT" 40, "WONK" 1;
}
.controle-titre span { display: block; font-family: var(--f-data); font-size: var(--t-xs);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--brume-2); }

.identite { display: flex; align-items: center; gap: var(--e-3); }
.identite-nom { font-size: var(--t-sm); }
.identite-role {
  font-family: var(--f-data);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--or);
}

/* ==========================================================================
   Compteurs
   ========================================================================== */
.compteurs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--e-4);
  margin-bottom: var(--e-6);
}
.compteur-tuile {
  position: relative;
  padding: var(--e-4) var(--e-5);
  border: 1px solid var(--trait);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
}
.compteur-tuile::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent, var(--brume-2));
}
.compteur-tuile b {
  display: block;
  font-family: var(--f-data);
  font-size: 1.9rem;
  font-weight: 500;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--accent, var(--lin));
}
.compteur-tuile span {
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brume-2);
}
.tuile-attente { --accent: var(--or); }
.tuile-publie  { --accent: var(--menthe); }
.tuile-refuse  { --accent: var(--fuchsia); }
.tuile-total   { --accent: var(--violet); }

/* ==========================================================================
   Barre d'outils
   ========================================================================== */
.outils {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  flex-wrap: wrap;
  margin-bottom: var(--e-5);
}
.onglets { display: flex; gap: var(--e-1); flex-wrap: wrap; }
.onglet {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: 0.45rem 1rem;
  border: 1px solid var(--trait);
  border-radius: var(--r-full);
  font-size: var(--t-sm);
  color: var(--brume);
  transition: all 0.24s var(--doux);
}
.onglet:hover { color: var(--lin); border-color: rgba(255,255,255,0.24); }
.onglet[aria-current="page"] {
  background: var(--verre-fort);
  border-color: var(--trait-or);
  color: var(--lin);
}
.onglet b {
  min-width: 1.4rem;
  padding: 0.05rem 0.35rem;
  border-radius: var(--r-full);
  background: rgba(255,255,255,0.1);
  font-family: var(--f-data);
  font-size: 0.68rem;
  text-align: center;
}
.onglet[aria-current="page"] b { background: var(--or); color: #2a1a02; }

/* ==========================================================================
   Liste des vœux à modérer
   ========================================================================== */
.liste { display: flex; flex-direction: column; gap: var(--e-4); }

.fiche {
  --teinte: 268;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--e-4);
  align-items: start;
  padding: var(--e-5);
  border: 1px solid var(--trait);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 0.24s var(--doux), opacity 0.3s var(--doux), transform 0.3s var(--doux);
}
.fiche:hover { border-color: rgba(255,255,255,0.2); }
.fiche.part { opacity: 0; transform: translateX(28px); }

@media (max-width: 760px) {
  .fiche { grid-template-columns: auto minmax(0, 1fr); }
  .fiche-actions { grid-column: 1 / -1; }
}

.fiche-message {
  font-family: var(--f-titre);
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.55;
  white-space: pre-line;
  overflow-wrap: break-word;
  color: #eee8ff;
}

.fiche-meta {
  display: flex;
  gap: var(--e-3);
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--e-3);
  padding-top: var(--e-3);
  border-top: 1px solid rgba(255,255,255,0.07);
  font-size: var(--t-xs);
  color: var(--brume-2);
}
.fiche-meta b { color: var(--lin); font-weight: 600; font-size: var(--t-sm); }
.fiche-meta .donnee { font-size: 0.68rem; letter-spacing: 0.06em; }

.jeton {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.55rem;
  border-radius: var(--r-full);
  border: 1px solid var(--trait);
  font-family: var(--f-data);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.jeton-attente { border-color: rgba(245,201,120,0.5); color: var(--or); }
.jeton-publie  { border-color: rgba(74,222,159,0.5); color: var(--menthe); }
.jeton-refuse  { border-color: rgba(255,61,139,0.5); color: #ff9dbf; }
.jeton-avant   { border-color: var(--or); background: rgba(245,201,120,0.14); color: var(--or-clair); }

.fiche-actions { display: flex; gap: var(--e-2); flex-wrap: wrap; }
.fiche-actions .btn { padding: 0.45rem 0.85rem; font-size: var(--t-xs); }
.btn-valider  { --btn-fond: rgba(74,222,159,0.14); --btn-trait: rgba(74,222,159,0.45); --btn-texte: #a7f3d0; }
.btn-valider:hover  { --btn-fond: rgba(74,222,159,0.24); }
.btn-refuser  { --btn-fond: rgba(255,61,139,0.12); --btn-trait: rgba(255,61,139,0.42); --btn-texte: #ff9dbf; }
.btn-refuser:hover  { --btn-fond: rgba(255,61,139,0.22); }
.btn-danger   { --btn-fond: transparent; --btn-trait: rgba(255,61,139,0.3); --btn-texte: #ff8ab4; }

/* ==========================================================================
   Vide et pagination
   ========================================================================== */
.controle-vide {
  padding: var(--e-8) var(--e-5);
  text-align: center;
  border: 1px dashed var(--trait);
  border-radius: var(--r-md);
  color: var(--brume);
}
.controle-vide b { display: block; font-family: var(--f-titre); font-size: var(--t-xl);
  font-weight: 400; color: var(--lin); margin-bottom: var(--e-2); }

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  margin-top: var(--e-6);
  font-family: var(--f-data);
  font-size: var(--t-xs);
  color: var(--brume-2);
}

/* ==========================================================================
   Réglages
   ========================================================================== */
.reglages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--e-5);
  padding: var(--e-5);
  border: 1px solid var(--trait);
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.03);
}
.reglages-pied { grid-column: 1 / -1; display: flex; gap: var(--e-3); align-items: center; flex-wrap: wrap; }

.bascule { display: flex; align-items: center; gap: var(--e-3); cursor: pointer; }
.bascule input { position: absolute; opacity: 0; }
.bascule-piste {
  position: relative;
  width: 2.9rem; height: 1.6rem;
  border-radius: var(--r-full);
  background: rgba(255,255,255,0.12);
  transition: background 0.26s var(--doux);
  flex: none;
}
.bascule-piste::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 1.15rem; height: 1.15rem;
  border-radius: 50%;
  background: var(--lin);
  transition: transform 0.26s var(--ressort);
}
.bascule input:checked + .bascule-piste { background: var(--menthe); }
.bascule input:checked + .bascule-piste::after { transform: translateX(1.28rem); }
.bascule input:focus-visible + .bascule-piste { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* ==========================================================================
   Pied
   ========================================================================== */
.controle-pied {
  display: flex;
  justify-content: space-between;
  gap: var(--e-4);
  flex-wrap: wrap;
  margin-top: var(--e-8);
  padding-block: var(--e-5);
  border-top: 1px solid var(--trait);
  font-family: var(--f-data);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--brume-2);
}

/* ==========================================================================
   Médias dans les fiches de modération
   ========================================================================== */
.jeton-media { border-color: rgba(94, 231, 245, 0.45); color: var(--cyan); }

.fiche .voeu-media {
  margin: var(--e-4) 0 0;
  border-radius: var(--r-md);
  overflow: hidden;
}
.fiche .media-image,
.fiche .media-video {
  max-width: 22rem;
  max-height: 14rem;
  width: auto;
  border-radius: var(--r-md);
  object-fit: cover;
}
.fiche .media-audio,
.fiche .media-lien { margin: 0; max-width: 22rem; }