/* Bamako.space — styles propres aux écrans de l'administrateur : à valider, revue, chantiers, chantier admin, comptes (app/js/views/admin.js).
   Ce fichier appartient au module de ces écrans ; il est chargé après app/css/app.css.
   Le système de design commun (jetons :root, boutons, cartes, badges, formulaires, listes,
   dialogues, toasts, visionneuse) est dans app/css/app.css : réutilisez ses classes et ne les
   redéfinissez pas ici. Préfixez les nouvelles classes par le nom de l'écran.
   Mobile d'abord (360 px) ; sur ordinateur, les pages s'élargissent (.page-large) et les
   formulaires passent sur deux colonnes. */

/* ─── Onglets « À valider · Chantiers · Comptes » ─── */
.admin-onglets{align-self:stretch;overflow-x:auto;scrollbar-width:none}
@media(min-width:720px){.admin-onglets{align-self:flex-start}}
.admin-onglets .onglet{flex:1 0 auto}
@media(max-width:380px){
  .admin-onglets .onglet{gap:6px;padding:8px 10px;font-size:14px}
  .admin-onglets .onglet .ico{display:none}
}

/* ─── Sections (cartes avec un titre h2) ─── */
.admin-section{display:flex;flex-direction:column;gap:14px}
.admin-section > .liste{margin:0 -4px}
.admin-section-titre{font-size:19px;line-height:1.3;color:var(--texte);scroll-margin-top:calc(var(--hauteur-entete) + 16px)}
.admin-section-titre:focus{outline:none}
.admin-section-titre:focus-visible{outline:2px solid var(--or);outline-offset:4px;border-radius:6px}
.admin-sous-titre{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;line-height:1.35;color:var(--texte-3);margin-bottom:6px}
.admin-bloc{min-width:0}

/* Listes de cartes (À valider, Chantiers) */
.admin-liste-cartes > li{min-width:0}
.admin-liste-cartes .carte-lien{height:100%}
.admin-liste-cartes .carte-meta{margin-top:8px}
.admin-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ligne .admin-badges{margin-top:0}

/* ─── Encadrés avec icône (bilan de publication, état du rapport) ─── */
.admin-encadre{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;row-gap:8px;align-items:start}
.admin-encadre > *{grid-column:2;margin-top:0}
:is(.boite-info,.boite-alerte).admin-encadre > .ico:first-child{grid-column:1;grid-row:1 / span 6;margin:2px 0 0;display:block}
.admin-encadre > .actions{margin-top:4px}
.admin-bilan:focus{outline:none}
.admin-bilan:focus-visible{outline:2px solid var(--or);outline-offset:3px}
.admin-citation{padding:10px 14px;border-left:3px solid rgba(206,17,38,.6);border-radius:0 10px 10px 0;
  background:rgba(206,17,38,.05);color:var(--texte-2)}
.admin-decision > p{color:var(--texte-3)}

/* ─── Métadonnées du rapport (libellé / valeur) ─── */
.admin-infos{display:grid;grid-template-columns:1fr;gap:12px 24px}
@media(min-width:640px){.admin-infos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:960px){.admin-infos{grid-template-columns:repeat(3,minmax(0,1fr))}}
.admin-info{min-width:0}
.admin-info dt{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gris-2);margin-bottom:3px}
.admin-info dd{font-size:15.5px;color:var(--texte-2);overflow-wrap:anywhere}
.admin-info dd a{color:var(--or-texte);text-decoration:underline;text-underline-offset:3px}
.admin-info dd .badge{vertical-align:middle}

/* ─── Aperçu « Ce que verra le client » ─── */
.admin-apercu{display:flex;flex-direction:column;gap:16px;border-color:rgba(176,122,30,.30)}
.admin-apercu-entete{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.admin-apercu-date{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:700;color:var(--texte)}
.admin-apercu-date .ico{color:var(--or-ico)}
.admin-points .admin-sous-titre{color:var(--rouge-texte)}
.admin-points .admin-sous-titre .ico{color:var(--rouge-ico)}

/* ─── Fichiers du rapport (retrait avant publication) ─── */
.admin-media{flex-wrap:nowrap}
.admin-media-apercu{flex:none;width:56px;height:56px;border-radius:12px;object-fit:cover;background:var(--fond-2);
  border:1px solid var(--bordure)}
.admin-media-symbole{display:grid;place-items:center;color:var(--or-ico)}
.admin-media-nom{flex:1 1 auto;display:flex;flex-direction:column;min-width:0;font-weight:600;color:var(--texte)}
.admin-media .actions{margin-left:auto;flex:none}

/* ─── Formulaires ─── */
.admin-formulaire{gap:16px}
.admin-grille-champs{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:720px){.admin-grille-champs{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}}
@media(min-width:720px){
  .admin-formulaire-ligne{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:0 16px}
  .admin-formulaire-ligne > .erreur{grid-column:1 / -1;margin-bottom:12px}
  .admin-formulaire-ligne > .actions{margin-top:29px}
}

/* Formulaire repliable « Nouveau chantier » */
.admin-repliable{padding:0}
.admin-repliable-titre{display:flex;align-items:center;gap:10px;min-height:64px;padding:16px 20px;cursor:pointer;
  font-size:17px;font-weight:700;color:var(--texte);list-style:none;border-radius:var(--rayon)}
.admin-repliable-titre::-webkit-details-marker{display:none}
.admin-repliable-titre .ico{color:var(--or-ico);transition:transform .2s}
.admin-repliable[open] > .admin-repliable-titre .ico{transform:rotate(45deg)}
.admin-repliable-titre:hover{background:rgba(212,175,55,.06)}
.admin-repliable-titre:focus-visible{outline:2px solid var(--or);outline-offset:-3px}
.admin-repliable > .formulaire{padding:4px 20px 22px}
@media(min-width:640px){
  .admin-repliable-titre{padding:18px 24px}
  .admin-repliable > .formulaire{padding:4px 24px 26px}
}

/* Choix du rôle (boutons radio en cartes) */
.admin-roles{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:720px){.admin-roles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.admin-roles > legend{grid-column:1 / -1}
.admin-roles > .champ-erreur{grid-column:1 / -1}
.admin-radio{display:flex;align-items:flex-start;gap:12px;min-height:56px;padding:14px;border-radius:var(--rayon-moyen);
  border:1px solid var(--champ-bordure);background:var(--champ-fond);cursor:pointer;transition:border-color .2s,background-color .2s}
.admin-radio:hover{border-color:rgba(176,122,30,.45)}
.admin-radio:has(input:checked){border-color:rgba(176,122,30,.75);background:#fbf5e6}
.admin-radio-textes{display:flex;flex-direction:column;gap:2px;min-width:0}
.admin-radio-libelle{font-weight:700;color:var(--texte)}

/* ─── Étapes du chantier ─── */
.admin-etape{flex-wrap:nowrap;align-items:center;padding:12px 14px}
.admin-numero{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-size:14px;font-weight:700;
  color:var(--or-texte);background:rgba(212,175,55,.14);border:1px solid rgba(176,122,30,.30)}
.admin-etape-corps{flex:1 1 auto;display:flex;flex-direction:column;min-width:0}
.admin-etape-nom{font-weight:600;color:var(--texte);overflow-wrap:anywhere}
.admin-etape-corps .carte-meta{margin-top:4px;font-size:13.5px}
.admin-etape-actions{flex:none;flex-wrap:nowrap;gap:2px;margin-left:auto}
/* Sous 480 px, les quatre boutons passent sous le nom de l'étape. */
@media(max-width:479px){
  .admin-etape{flex-wrap:wrap}
  .admin-etape-corps{flex-basis:calc(100% - 50px)}
  .admin-etape-actions{width:100%;justify-content:flex-end}
}
.admin .btn-icone .btn-libelle{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.admin .btn-icone[aria-busy="true"] .ico{display:none}
.admin-bouton-danger{color:var(--rouge-texte)}
.admin-bouton-danger:hover{color:var(--rouge-texte);background:rgba(206,17,38,.08)}

/* ─── Comptes et agents ─── */
.admin-compte-textes,.admin-rapport-textes{display:flex;flex-direction:column;flex:1 1 220px;min-width:0}
.admin-compte-nom{font-weight:700;color:var(--texte);overflow-wrap:anywhere}
.admin-compte-textes .carte-meta,.admin-rapport-textes .carte-meta{margin-top:3px;font-size:13.5px}
.admin-compte-textes .carte-meta > *{overflow-wrap:anywhere}
.admin-compte-ligne > .actions,.admin-compte-court > .actions{flex-wrap:wrap}
@media(max-width:559px){
  .admin-compte-ligne > .actions{margin-left:0;width:100%}
  .admin-compte-ligne > .actions > .btn{flex:1 1 auto}
}
.admin-compte > .admin-edition,.admin-compte > .admin-partage{margin:0 18px 18px}
.admin-edition{padding:16px;border-radius:var(--rayon-moyen);border:1px solid var(--bordure);background:var(--fond)}
.admin-rapport-ligne{align-items:center}
.admin-rapport-ligne .admin-badges{margin-left:auto}

/* ─── Panneau de partage d'un lien ─── */
.admin-partage{display:flex;flex-direction:column;gap:12px;margin-top:6px;padding:16px;border-radius:var(--rayon-moyen);
  background:#fbf5e6;border:1px solid rgba(176,122,30,.30)}
.admin-partage:focus{outline:none}
.admin-partage:focus-visible{outline:2px solid var(--or);outline-offset:3px}
.admin-partage-titre{display:flex;align-items:flex-start;gap:10px;color:var(--texte-2);overflow-wrap:anywhere}
.admin-partage-titre .ico{flex:none;margin-top:2px;color:var(--mali-vert)}
.admin-partage-lien{display:flex;gap:8px;min-width:0}
.admin-partage-lien input{flex:1 1 auto;min-width:0;font-size:14px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--texte-3);text-overflow:ellipsis}
.admin-partage-lien .btn{flex:none}
@media(max-width:399px){
  .admin-partage-lien{flex-direction:column}
  .admin-partage-lien .btn{width:100%}
}
.admin-partage .actions > .btn{flex:1 1 auto}
@media(min-width:560px){.admin-partage .actions > .btn{flex:0 1 auto}}

@media(prefers-reduced-motion:reduce){
  .admin-repliable-titre .ico,.admin-radio{transition:none}
}