/* Info H'Emploi — administration.
   Reprend les jetons du site public, dans une mise en page dense adaptee a
   la saisie et au suivi des demandes. */

body.admin { background: var(--ivoire-fonce); }

.admin-entete {
  background: var(--nuit); color: #fff; position: sticky; top: 0; z-index: 40;
}
.admin-entete__barre {
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem clamp(1rem, 3vw, 2rem); flex-wrap: wrap;
}
.admin-entete .logo { color: #fff; }
.admin-entete .jeton { background: rgba(255, 255, 255, .12); color: #C8E3DD; }
.admin-entete__droite {
  margin-left: auto; display: flex; align-items: center; gap: 1rem;
  font-size: .9rem; flex-wrap: wrap;
}
.admin-entete__droite a { color: #C8CFE5; text-decoration: none; }
.admin-entete__droite a:hover { color: #fff; }
.admin-entete .btn--contour { border-color: rgba(255, 255, 255, .5); color: #fff; }
.admin-entete .btn--contour:hover { background: #fff; color: var(--nuit); }
.admin-utilisateur { color: #8E97BC; }

.admin-corps { display: grid; grid-template-columns: 250px minmax(0, 1fr); }

.admin-menu {
  background: var(--blanc); border-right: 1px solid var(--bord);
  padding: 1.4rem 1rem; min-height: calc(100vh - 62px);
}
.admin-menu a {
  display: block; padding: .55rem .75rem; border-radius: var(--rayon-s);
  color: var(--nuit); text-decoration: none; font-size: .93rem; font-weight: 500;
  margin-bottom: .15rem;
}
.admin-menu a:hover { background: var(--ivoire-fonce); }
.admin-menu a.actif { background: var(--nuit); color: #fff; }
.admin-menu__titre {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--gris); font-weight: 700; margin: 1.4rem 0 .5rem .75rem;
}

.admin-contenu { padding: clamp(1.2rem, 3vw, 2.4rem); max-width: 1300px;
  min-width: 0; overflow-x: hidden; }
.admin-contenu h1 { font-size: 1.85rem; margin-bottom: 1.4rem; }
.admin-contenu h2 { font-size: 1.25rem; margin-top: 2.2rem; }
.admin-contenu > section { margin-bottom: 2rem; }

.bloc {
  min-width: 0;
  background: var(--blanc); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: 1.4rem;
}
.bloc + .bloc { margin-top: 1.2rem; }
.bloc h2 { margin-top: 0; font-size: 1.15rem; }

.compteurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; }
.compteur {
  background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 1.1rem 1.2rem;
}
.compteur strong {
  display: block; font-family: var(--display); font-size: 2rem; color: var(--nuit);
  line-height: 1.1; font-weight: 600;
}
.compteur span { font-size: .84rem; color: var(--gris); }
.compteur--alerte { border-color: var(--terracotta); background: var(--terracotta-voile); }
.compteur--alerte strong { color: var(--terracotta-fonce); }

.ligne-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: 1.2rem; }
.ligne-actions form { display: inline; }

.etat {
  display: inline-block; padding: .2rem .6rem; border-radius: 999px;
  font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.etat--nouvelle, .etat--demande { background: var(--terracotta-voile); color: var(--terracotta-fonce); }
.etat--confirme, .etat--confirmee { background: var(--eau-clair); color: var(--teal); }
.etat--traitee, .etat--realise { background: #EDF1E9; color: var(--sauge-fonce); }
.etat--annule, .etat--annulee { background: #EFEAE3; color: var(--gris); }

.detail { font-size: .88rem; color: var(--gris); }
.detail dt { font-weight: 700; color: var(--nuit); margin-top: .5rem; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .06em; }
.detail dd { margin: 0; }

details.fiche { border-top: 1px solid var(--bord); padding: .8rem 0; }
details.fiche > summary { cursor: pointer; font-weight: 600; color: var(--nuit); }
details.fiche > summary::marker { color: var(--terracotta); }
details.fiche[open] > summary { margin-bottom: .8rem; }

.mini-formulaire { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .8rem; align-items: end; }
.mini-formulaire .champ { margin: 0; }

.connexion {
  min-height: 100vh; display: grid; place-items: center; padding: 2rem 1.25rem;
  background: var(--nuit);
}
.connexion__carte {
  background: var(--blanc); border-radius: var(--rayon); padding: 2.2rem;
  width: min(100%, 420px); box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .5);
}
.connexion .logo { margin-bottom: 1.4rem; }

@media (max-width: 900px) {
  .admin-corps { grid-template-columns: minmax(0, 1fr); }
  /* Le menu devient une bande horizontale qui defile, plutot que trois lignes
     de liens qui repoussent le contenu hors de l ecran. */
  .admin-menu {
    min-height: 0; border-right: 0; border-bottom: 1px solid var(--bord);
    display: flex; flex-wrap: nowrap; overflow-x: auto; gap: .3rem;
    padding: .7rem .8rem; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .admin-menu::-webkit-scrollbar { display: none; }
  .admin-menu__titre { display: none; }
  .admin-menu a { margin: 0; font-size: .88rem; white-space: nowrap; flex: none; }
}

@media (max-width: 640px) {
  .admin-entete__barre { padding: .6rem .9rem; gap: .6rem; }
  .admin-entete__droite {
    margin-left: 0; width: 100%; justify-content: space-between;
    font-size: .84rem; gap: .5rem;
  }
  .admin-entete .logo__mot { font-size: 1rem; }
  .admin-contenu { padding: 1rem .9rem 2rem; }
  .admin-contenu h1 { font-size: 1.4rem; }
  .admin-contenu h2 { font-size: 1.1rem; }
  .bloc { padding: 1rem .9rem; }

  .compteurs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .compteur { padding: .8rem .9rem; }
  .compteur strong { font-size: 1.6rem; }
  .compteur span { font-size: .78rem; }

  .mini-formulaire { grid-template-columns: minmax(0, 1fr); }
  .ligne-actions { gap: .5rem; }
  .ligne-actions .btn { flex: 1 1 auto; justify-content: center; }

  /* Les cellules d actions cessent d etre insecables : les boutons
     s empilent au lieu d elargir le tableau. */
  .tableau-enveloppe td[style*="nowrap"],
  .tableau-enveloppe th { white-space: normal !important; }
  .tableau-enveloppe { -webkit-overflow-scrolling: touch; }
  table { font-size: .88rem; }
  th, td { padding: .55rem .7rem; }

  details.fiche > summary { font-size: .93rem; line-height: 1.4; }
  .detail dt { font-size: .72rem; }

  /* Tableaux convertis en fiches empilees : chaque cellule porte son intitule. */
  .tableau--cartes table,
  .tableau--cartes tbody,
  .tableau--cartes tr,
  .tableau--cartes td { display: block; width: 100%; }
  .tableau--cartes thead { display: none; }
  .tableau--cartes tr {
    border-bottom: 1px solid var(--bord); padding: .7rem .2rem;
  }
  .tableau--cartes tr:last-child { border-bottom: 0; }
  .tableau--cartes tr:hover { background: none; }
  .tableau--cartes td {
    border: 0; padding: .22rem .8rem; display: flex; gap: 1rem;
    align-items: baseline; justify-content: space-between;
  }
  .tableau--cartes td::before {
    content: attr(data-libelle); flex: none;
    font-size: .7rem; text-transform: uppercase; letter-spacing: .07em;
    color: var(--gris); font-weight: 700;
  }
  .tableau--cartes td > * { text-align: right; }
  .tableau--cartes td:has(form),
  .tableau--cartes td:has(.btn) {
    flex-direction: column; align-items: flex-start; gap: .4rem;
  }
  .tableau--cartes td:has(form) > *,
  .tableau--cartes td:has(.btn) > * { text-align: left; }
  .tableau--cartes td form { display: inline-block; }
  .tableau--cartes td select,
  .tableau--cartes td input[type="text"] { width: auto; max-width: 100%; }
}