/* Backoffice admin — reprend les variables de /assets/style.css, ajoute ce qu'il
   faut pour des formulaires et des listes d'actions. */

.admin-corps { max-width: 56rem; margin: 0 auto; padding: 2.5rem 0 4rem; }

.admin-entete {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: .75rem 1.5rem;
  margin-bottom: 2rem;
}
.admin-entete h1 { margin: 0; font-size: 1.4rem; font-weight: 600; }
.admin-entete .qui {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 0;
  color: var(--texte-doux); font-size: .9rem;
}
.admin-entete .qui a { color: inherit; }
/* Un seul point médian, entre l'identifiant et « mon compte » — les deux
   disent qui l'on est. « Se déconnecter » est un geste, pas une mention : il
   se tient à part, à droite, et un séparateur devant lui n'aurait rien à
   séparer.

   Le point est posé en ::after sur l'élément qui le précède plutôt qu'écrit
   entre les deux : s'il faut passer à la ligne, il part avec son élément au
   lieu de rester seul en bout de ligne. */
.admin-entete .qui > span:first-child::after { content: "\00b7"; margin: 0 .35rem; }
/* Un écart plutôt qu'un point devant « se déconnecter ». En colonne étroite,
   la ligne se coupe ici : la marge disparaît alors d'elle-même, sans laisser
   de blanc pendant en début de ligne. */
.admin-entete .qui > span:last-child { margin-left: 1.5rem; }
.btn-lien {
  padding: 0; border: none; background: none; color: inherit; font: inherit;
  text-decoration: underline; cursor: pointer;
}

.flash {
  border-radius: var(--rayon); padding: .75rem 1rem; margin-bottom: 1.5rem;
  font-size: .92rem; border: 1px solid var(--bord);
}
.flash.ok { background: color-mix(in srgb, #3f8f5f 12%, var(--fond-carte)); border-color: #3f8f5f66; }
.flash.err { background: color-mix(in srgb, #b4483e 12%, var(--fond-carte)); border-color: #b4483e66; }

.groupe-admin { margin-top: 2.25rem; }
.groupe-admin h2 { font-size: 1.05rem; margin: 0 0 .25rem; }
.groupe-admin .sous { color: var(--texte-doux); font-size: .82rem; margin: 0 0 .9rem; text-transform: uppercase; letter-spacing: .06em; }

.ligne-projet {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  background: var(--fond-carte); border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: .8rem 1rem; margin-bottom: .6rem; box-shadow: var(--ombre);
}
.ligne-projet .emoji { font-size: 1.3rem; }
.ligne-projet .info { flex: 1 1 14rem; min-width: 0; }
.ligne-projet .info .titre { font-weight: 600; }
.ligne-projet .info .titre .etat { font-weight: 400; font-size: .78rem; color: var(--texte-doux); margin-left: .4rem; }
.ligne-projet .info .chemin { color: var(--texte-doux); font-size: .8rem; font-family: ui-monospace, monospace; }
.ligne-projet.masque { opacity: .55; }

.actions { display: flex; gap: .4rem; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; gap: .35rem;
  border: 1px solid var(--bord); background: var(--fond-carte); color: var(--texte);
  border-radius: 8px; padding: .4rem .7rem; font-size: .84rem; cursor: pointer;
  text-decoration: none; line-height: 1.2; font-family: inherit;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.actif { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.danger:hover { border-color: #b4483e; color: #b4483e; }
.btn.principal { background: var(--accent); border-color: var(--accent); color: #fff; }

form.inline { display: inline; }

.carte-form {
  background: var(--fond-carte); border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 1.5rem; box-shadow: var(--ombre); max-width: 32rem;
}
.champ-form { margin-bottom: 1.1rem; }
.champ-form label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .3rem; }
.champ-form .aide-champ { font-size: .78rem; color: var(--texte-doux); margin-top: .3rem; }
.champ-form input[type=text], .champ-form input[type=password], .champ-form textarea {
  width: 100%; padding: .55rem .7rem; border: 1px solid var(--bord); border-radius: 8px;
  background: var(--fond); color: var(--texte); font: inherit; box-sizing: border-box;
}
.champ-form textarea { resize: vertical; min-height: 4rem; }

.mot-de-passe-genere {
  font-family: ui-monospace, monospace; background: var(--fond); border: 1px dashed var(--bord);
  border-radius: 8px; padding: .7rem .9rem; font-size: 1rem; user-select: all;
  margin: .8rem 0;
}

.retour { display: inline-block; margin-bottom: 1.5rem; color: var(--texte-doux); font-size: .88rem; }

.login-cadre {
  max-width: 24rem; margin: 4rem auto; background: var(--fond-carte);
  border: 1px solid var(--bord); border-radius: var(--rayon); padding: 2rem;
  box-shadow: var(--ombre);
}
.login-cadre h1 { font-size: 1.2rem; margin: 0 0 1.2rem; }

.liste-versions { list-style: none; margin: 0; padding: 0; }
.liste-versions li {
  display: flex; align-items: center; gap: .8rem;
  border-bottom: 1px solid var(--bord); padding: .6rem 0;
}
.liste-versions li:last-child { border-bottom: none; }
.liste-versions .ver { font-family: ui-monospace, monospace; font-weight: 600; min-width: 3.5rem; }
.liste-versions .desc { flex: 1; color: var(--texte-doux); font-size: .88rem; }
.liste-versions .desc code { font-size: .85em; }
.liste-versions .btn { flex: 0 0 auto; }
/* Une version déclarée au manifeste dont le dossier a disparu : visible,
   grisée, et non sélectionnable — plutôt qu'un 404 le jour où on la choisit. */
.liste-versions li.absente { opacity: .5; }
.liste-versions li.absente em { font-style: normal; }

/* Compteur discret dans un bouton du tableau de bord : « versions 7 »,
   « notes 2/3 ». */
.btn .compte {
  display: inline-block;
  margin-left: .35rem;
  padding: 0 .35rem;
  border-radius: .5rem;
  background: var(--bord);
  font-size: .78em;
  font-variant-numeric: tabular-nums;
}
.btn.actif .compte, .btn.principal .compte { background: rgba(255, 255, 255, .25); }

/* ---- Refonte de la structure (21.08.2026) ---------------------------------
   Le panneau a maintenant deux vues — les fiches et les projets — et le
   tableau des fiches montre l'arbre tel qu'il s'affiche en ligne, avec de quoi
   le réarranger sur place. */

.onglets {
  display: flex; gap: .3rem; flex-wrap: wrap;
  margin: -1rem 0 1.8rem; padding-bottom: .8rem;
  border-bottom: 1px solid var(--bord);
}
.onglets a {
  padding: .4rem .8rem; border-radius: 8px; font-size: .9rem;
  color: var(--texte-doux); text-decoration: none;
}
.onglets a:hover { color: var(--texte); background: var(--fond-carte); }
.onglets a.actif { background: var(--fond-carte); border: 1px solid var(--bord); color: var(--texte); font-weight: 600; }

/* L'intertitre d'un projet dans le tableau des fiches : il porte le nom du
   regroupement et les actions qui valent pour lui seul (sa vitrine), et se
   distingue d'une ligne de fiche par l'absence de cadre. */
.entete-projet {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: .5rem 1rem;
  margin: 1.6rem 0 .7rem;
  padding-top: .8rem;
  border-top: 1px solid var(--bord);
}
.entete-projet h3 { margin: 0; font-size: .95rem; font-weight: 600; }

/* Le chemin d'une fiche est son identité : il ne se modifie nulle part. Le
   dire à l'endroit où l'on modifie tout le reste évite la question. */
.chemin-fixe {
  margin: 0 0 1.2rem;
  color: var(--texte-doux);
  font-family: ui-monospace, monospace;
  font-size: .85rem;
  word-break: break-all;
}
.chemin-fixe span {
  display: block;
  margin-top: .2rem;
  font-family: inherit;
  font-size: .78rem;
  font-style: italic;
  opacity: .8;
}
.carte-form .chemin { margin: 0 0 .4rem; color: var(--texte-doux); font-family: ui-monospace, monospace; font-size: .8rem; }

/* Le menu « déplacer vers » : même hauteur et même dessin que les boutons
   voisins, pour que la ligne d'actions reste une ligne. */
.actions select, .champ-form select {
  border: 1px solid var(--bord); background: var(--fond-carte); color: var(--texte);
  border-radius: 8px; padding: .4rem .5rem; font-size: .84rem; font-family: inherit;
  max-width: 12rem;
}
.champ-form select { width: 100%; max-width: none; padding: .55rem .7rem; background: var(--fond); }
form.inline.deplacer { display: inline-flex; gap: .3rem; }

.btn:disabled { opacity: .3; cursor: default; }
.btn:disabled:hover { border-color: var(--bord); color: var(--texte); }

.radio-ligne { font-weight: 400; display: flex; gap: .4rem; align-items: center; margin-bottom: .4rem; }

/* Une case a cocher dans un champ de formulaire. Le selecteur porte
   .champ-form parce que « .champ-form label » (display:block, gras) l'emporte
   sinon : une classe seule ne bat pas une classe + un element. */
.champ-form label.case {
  display: flex; align-items: center; gap: .55rem;
  font-weight: 400; font-size: .9rem; margin-bottom: 0; cursor: pointer;
}
.champ-form label.case input { margin: 0; flex: none; }

/* Les pages en ligne qui n'ont pas encore de fiche. C'est le défaut que la
   refonte corrige : rien ne doit plus pouvoir rester invisible. */
.bloc-alerte {
  margin-top: 1.5rem; padding: 1.2rem 1.2rem .6rem;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--bord));
  border-radius: var(--rayon);
  background: color-mix(in srgb, var(--accent) 6%, var(--fond-carte));
}
.bloc-alerte h2 { margin: 0 0 .25rem; font-size: 1rem; }
.bloc-alerte .sous {
  margin: 0 0 1rem; color: var(--texte-doux); font-size: .85rem;
  max-width: 44rem; text-transform: none; letter-spacing: 0;
}

/* Les fiches supprimées dont le dossier est encore en ligne (27.08.2026).
   Même bloc, ton neutre : ce n'est pas une anomalie à corriger — c'est un
   ménage à finir, et il peut attendre. La couleur d'accent est réservée à ce
   qui attend une décision, sinon deux blocs d'alerte empilés ne hiérarchisent
   plus rien. */
.bloc-alerte.calme {
  border-color: var(--bord);
  background: var(--fond-carte);
}

/* Le bouton de suppression, au bas de la page d'une fiche : détaché du
   formulaire d'édition par un filet, pour qu'aucun clic ne le confonde avec
   « Enregistrer ». */
.pied-danger {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  margin: 1.6rem 0 0; padding-top: 1.2rem;
  border-top: 1px solid var(--bord);
}
.pied-danger span {
  color: var(--texte-doux); font-size: .82rem; flex: 1 1 14rem; min-width: 0;
}

.carte-form .liste a { background: var(--fond); }
.carte-form .liste .contexte { font-family: ui-monospace, monospace; font-size: .85em; opacity: .8; }