/* =====================================================================
   Masciin IT — Intranet
   Charte graphique reprise du modèle "Mode opératoire" (couleurs,
   typographie), UX/UI propre à l'intranet (connexion + shell applicatif).
   ===================================================================== */
:root {
  --vert-masciin: #6DBE45;
  --vert-fonce:   #4A7A2E;
  --vert-pale:    #EAF5E3;
  --anthracite:   #2B2B2B;
  --gris:         #666666;
  --gris-clair:   #F2F2F2;
  --blanc:        #FFFFFF;
  --rouge:        #C0392B;
  --orange:       #D68910;
  --police: 'Calibri', 'Segoe UI', -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--police);
  font-size: 15px;
  line-height: 1.5;
  color: var(--anthracite);
  background: var(--gris-clair);
}

button, input, select { font-family: inherit; font-size: inherit; }

/* ---------- Bandeau supérieur ---------- */
header.bandeau {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 24px;
  background: var(--blanc);
  border-bottom: 2px solid var(--vert-masciin);
  position: sticky; top: 0; z-index: 20;
}
header.bandeau .logo-pastille {
  width: 30px; height: 30px; border-radius: 6px;
  background: var(--vert-masciin);
  display: flex; align-items: center; justify-content: center;
  color: var(--blanc); font-weight: bold; font-size: 14px;
}
header.bandeau .societe { font-weight: bold; font-size: 14px; }
header.bandeau .app-nom { color: var(--gris); font-size: 13px; flex: 1; }
header.bandeau .utilisateur { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--gris); }
header.bandeau .utilisateur button {
  border: 1px solid var(--gris-clair); background: var(--blanc); color: var(--gris);
  border-radius: 6px; padding: 5px 10px; cursor: pointer;
}
header.bandeau .utilisateur button:hover { border-color: var(--vert-masciin); color: var(--vert-fonce); }

/* ---------- Écran de connexion ---------- */
.ecran-connexion {
  min-height: calc(100vh - 54px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.carte-connexion {
  background: var(--blanc);
  border-radius: 10px;
  border-top: 4px solid var(--vert-masciin);
  box-shadow: 0 2px 18px rgba(0,0,0,0.08);
  padding: 40px 36px;
  max-width: 380px; width: 100%;
  text-align: center;
}
.carte-connexion h1 { font-size: 20px; margin: 4px 0 6px; }
.carte-connexion p.sous-titre { color: var(--gris); font-size: 13.5px; margin: 0 0 26px; }
.bouton-microsoft {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 11px 16px;
  background: var(--anthracite); color: var(--blanc);
  border: none; border-radius: 6px; font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.bouton-microsoft:hover { background: #111; }
.bouton-microsoft:disabled { opacity: .6; cursor: wait; }
.message-erreur {
  margin-top: 16px; padding: 10px 12px; border-radius: 6px;
  background: #F9E4E1; color: var(--rouge); font-size: 13px; text-align: left;
}

/* ---------- Écran de configuration initiale ---------- */
.carte-setup { max-width: 460px; }
.carte-setup .encadre {
  text-align: left; margin: 18px 0; padding: 12px 14px; border-radius: 6px;
  background: var(--vert-pale); border: 1px solid var(--vert-masciin);
  color: var(--vert-fonce); font-size: 13px;
}
.champ { text-align: left; margin: 14px 0; }
.champ label { display: block; font-size: 12.5px; font-weight: bold; color: var(--gris); margin-bottom: 5px; }
.champ select, .champ input[type=text] {
  width: 100%; padding: 9px 10px; border: 1px solid #DDDDDD; border-radius: 6px;
}
.bouton-primaire {
  width: 100%; padding: 11px 16px; margin-top: 8px;
  background: var(--vert-masciin); color: var(--blanc);
  border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.bouton-primaire:hover { background: var(--vert-fonce); }
.bouton-primaire:disabled { opacity: .6; cursor: wait; }

/* ---------- Shell applicatif (sidebar + contenu) ---------- */
.shell { display: flex; min-height: calc(100vh - 54px); }
nav.sidebar {
  flex: 0 0 230px;
  background: var(--blanc);
  border-right: 1px solid #E4E4E4;
  padding: 18px 0;
  transition: flex-basis .15s ease, width .15s ease;
}
nav.sidebar.repliee { flex-basis: 60px; }
nav.sidebar .bouton-repli {
  border: none; background: none; color: var(--gris); cursor: pointer;
  padding: 4px 20px 14px; font-size: 13px;
}
nav.sidebar .section-titre {
  text-transform: uppercase; letter-spacing: .05em; font-size: 11px;
  color: var(--gris); font-weight: bold; padding: 4px 20px; margin-top: 10px;
}
nav.sidebar a, nav.sidebar .module-vide {
  display: block; padding: 9px 20px; color: var(--anthracite); text-decoration: none;
  font-size: 14px; border-left: 3px solid transparent;
}
nav.sidebar a:hover { background: var(--vert-pale); }
nav.sidebar a.actif { border-left-color: var(--vert-masciin); background: var(--vert-pale); color: var(--vert-fonce); font-weight: 600; }
nav.sidebar .module-vide { color: var(--gris); font-style: italic; font-size: 13px; }
nav.sidebar.repliee .libelle { display: none; }

main.contenu { flex: 1; padding: 32px; min-width: 0; }
main.contenu h1 { font-size: 24px; margin: 0 0 6px; }
main.contenu p.sous-titre { color: var(--gris); margin: 0 0 24px; }

.pastille-admin {
  display: inline-block; padding: 2px 10px; border-radius: 99px;
  background: var(--vert-fonce); color: var(--vert-pale);
  font-size: 11px; font-weight: bold; margin-left: 8px;
}

/* ---------- Modules ---------- */
.tuile-module {
  width: min(420px, 100%); display: flex; align-items: center; gap: 16px;
  padding: 18px; border: 1px solid #E0E0E0; border-radius: 10px;
  background: var(--blanc); color: var(--anthracite); text-align: left; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.tuile-module:hover { border-color: var(--vert-masciin); box-shadow: 0 4px 14px rgba(74,122,46,.12); }
.tuile-module-icone {
  display: grid; place-items: center; flex: 0 0 46px; height: 46px;
  border-radius: 9px; background: var(--vert-pale); color: var(--vert-fonce);
  font-size: 11px; font-weight: 800; letter-spacing: .05em;
}
.tuile-module strong, .tuile-module small { display: block; }
.tuile-module strong { font-size: 16px; margin-bottom: 3px; }
.tuile-module small { color: var(--gris); font-size: 13px; }

.entete-module { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.bouton-secondaire {
  border: 1px solid var(--vert-masciin); border-radius: 6px; padding: 8px 14px;
  color: var(--vert-fonce); background: var(--blanc); font-weight: 600; cursor: pointer;
}
.bouton-secondaire:hover { background: var(--vert-pale); }
.bouton-secondaire:disabled { opacity: .55; cursor: wait; }
.etat-module {
  padding: 28px; border: 1px dashed #D5D5D5; border-radius: 8px;
  background: rgba(255,255,255,.65); color: var(--gris); text-align: center;
}
.org-resume { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.org-resume > div {
  padding: 16px 18px; background: var(--blanc); border: 1px solid #E4E4E4;
  border-radius: 8px; border-top: 3px solid var(--vert-masciin);
}
.org-resume strong { display: block; font-size: 21px; color: var(--vert-fonce); line-height: 1.2; }
.org-resume span { display: block; color: var(--gris); font-size: 12px; margin-top: 3px; }
.org-avertissements {
  margin-top: 18px; padding: 12px 14px; border-radius: 6px;
  border-left: 3px solid var(--orange); background: #FFF8E8;
  color: #795600; font-size: 12px;
}
.org-avertissements strong { display: block; margin-bottom: 3px; }
.org-avertissements p { margin: 0; }
.barre-module {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 16px; padding: 8px; background: var(--blanc);
  border: 1px solid #E4E4E4; border-radius: 8px;
}
.onglets { display: flex; gap: 4px; }
.onglets button {
  border: 0; border-radius: 6px; padding: 8px 13px; background: transparent;
  color: var(--gris); cursor: pointer; font-weight: 600;
}
.onglets button.actif { color: var(--vert-fonce); background: var(--vert-pale); }
.recherche-org { flex: 0 1 330px; }
.recherche-org input {
  width: 100%; padding: 8px 11px; border: 1px solid #D8D8D8; border-radius: 6px;
}
.cache-visuelle {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Arbre hiérarchique */
.vue-org { min-height: 200px; }
.org-arbre {
  overflow: auto; padding: 22px; background: var(--blanc);
  border: 1px solid #E4E4E4; border-radius: 8px;
}
.org-foret, .org-enfants {
  display: flex; align-items: flex-start; justify-content: center; gap: 22px;
  width: max-content; min-width: 100%; margin: 0; padding: 0; list-style: none;
}
.org-branche { display: flex; flex-direction: column; align-items: center; position: relative; }
.org-enfants { position: relative; margin-top: 26px; min-width: 0; }
.org-enfants::before {
  content: ""; position: absolute; top: -13px; left: 50%; width: 1px; height: 13px;
  background: #BFC8BA;
}
.org-enfants > .org-branche::before {
  content: ""; position: absolute; top: -13px; left: 50%; width: 1px; height: 13px;
  background: #BFC8BA;
}
.org-enfants > .org-branche:not(:only-child)::after {
  content: ""; position: absolute; top: -13px; height: 1px; background: #BFC8BA;
}
.org-enfants > .org-branche:first-child:not(:only-child)::after { left: 50%; width: calc(50% + 11px); }
.org-enfants > .org-branche:last-child:not(:only-child)::after { right: 50%; width: calc(50% + 11px); }
.org-enfants > .org-branche:not(:first-child):not(:last-child)::after { left: -11px; right: -11px; }
.fiche-personne {
  width: 220px; min-height: 112px; padding: 13px; border: 1px solid #DCDCDC;
  border-top: 3px solid var(--vert-masciin); border-radius: 8px;
  background: var(--blanc); box-shadow: 0 2px 8px rgba(0,0,0,.06); text-align: center;
}
.avatar-initiales {
  display: grid; place-items: center; width: 36px; height: 36px; margin: -31px auto 7px;
  border: 3px solid var(--blanc); border-radius: 50%; background: var(--vert-fonce);
  color: var(--blanc); font-size: 12px; font-weight: 700;
}
.fiche-personne strong, .fiche-personne span { display: block; }
.fiche-personne strong { font-size: 14px; }
.fiche-personne .poste { min-height: 20px; color: var(--vert-fonce); font-size: 12.5px; }
.fiche-personne .details-personne { margin-top: 4px; color: var(--gris); font-size: 11.5px; }
.fiche-personne a { color: var(--gris); font-size: 11px; text-decoration: none; word-break: break-all; }
.fiche-personne a:hover { color: var(--vert-fonce); text-decoration: underline; }

/* Groupes */
.grille-groupes { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.carte-groupe {
  background: var(--blanc); border: 1px solid #E0E0E0; border-radius: 8px;
  overflow: hidden; box-shadow: 0 2px 7px rgba(0,0,0,.035);
}
.carte-groupe summary { padding: 15px; cursor: pointer; list-style: none; }
.carte-groupe summary::-webkit-details-marker { display: none; }
.carte-groupe summary::after { content: "+"; float: right; color: var(--vert-fonce); font-size: 19px; line-height: 1; }
.carte-groupe[open] summary::after { content: "−"; }
.carte-groupe h2 { margin: 0 22px 2px 0; font-size: 15px; }
.carte-groupe .meta-groupe { display: block; color: var(--gris); font-size: 12px; }
.carte-groupe .description-groupe { margin: 8px 0 0; color: var(--gris); font-size: 12px; }
.membres-groupe { border-top: 1px solid #ECECEC; padding: 8px 15px 14px; }
.membre-groupe { display: flex; align-items: center; gap: 9px; padding: 7px 0; }
.membre-groupe + .membre-groupe { border-top: 1px solid #F0F0F0; }
.membre-groupe .avatar-initiales { width: 28px; height: 28px; margin: 0; border: 0; font-size: 10px; }
.membre-groupe strong, .membre-groupe span { display: block; }
.membre-groupe strong { font-size: 12.5px; }
.membre-groupe span, .groupe-vide { color: var(--gris); font-size: 11.5px; }

/* Administration */
.admin-droits { display: grid; gap: 18px; }
.encart-confirmation {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-left: 3px solid var(--orange); border-radius: 6px;
  background: #FFF8E8; color: #795600; font-size: 13px;
}
.encart-confirmation strong { white-space: nowrap; }
.bloc-admin-droits {
  background: var(--blanc); border: 1px solid #E4E4E4; border-radius: 8px;
  padding: 18px;
}
.bloc-admin-entete {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  margin-bottom: 14px;
}
.bloc-admin-entete h2 { margin: 0 0 3px; font-size: 18px; }
.bloc-admin-entete p { margin: 0; color: var(--gris); font-size: 13px; }
.ajout-droit, .module-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ajout-droit select, .module-actions select {
  min-width: 160px; padding: 8px 10px; border: 1px solid #D8D8D8; border-radius: 6px;
  background: var(--blanc);
}
.bouton-primaire.compact {
  width: auto; margin-top: 0; padding: 8px 12px;
}
.liste-droits { display: grid; gap: 8px; }
.ligne-droit {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border: 1px solid #ECECEC; border-radius: 6px;
  background: #FCFCFC;
}
.ligne-droit strong, .ligne-droit span { display: block; }
.ligne-droit span { color: var(--gris); font-size: 12px; }
.badge-sujet {
  display: inline-block; min-width: 78px; margin-right: 8px; padding: 2px 8px;
  border-radius: 99px; background: var(--vert-pale); color: var(--vert-fonce);
  font-size: 11px; font-weight: bold; text-align: center;
}
.bouton-danger {
  border: 1px solid #E2B5AF; border-radius: 6px; padding: 7px 10px;
  background: #FFF7F6; color: var(--rouge); cursor: pointer; font-weight: 600;
}
.bouton-danger:hover { background: #F9E4E1; }
.modules-droits { display: grid; gap: 12px; }
.module-droit {
  border: 1px solid #ECECEC; border-radius: 8px; padding: 14px;
}
.module-droit-entete {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px;
}
.module-droit-entete h3 { margin: 0; font-size: 16px; }
.choix-acces {
  display: inline-flex; align-items: center; gap: 7px; color: var(--gris); font-size: 13px;
}
.module-selection { display: grid; gap: 10px; }
.module-selection.cache { display: none !important; }
.module-selection .liste-droits { margin-top: 2px; }
.etat-vide { color: var(--gris); font-size: 13px; margin: 0; }

@media (max-width: 760px) {
  main.contenu { padding: 20px 14px; }
  nav.sidebar { flex-basis: 60px; }
  nav.sidebar .libelle { display: none; }
  .entete-module, .barre-module { align-items: stretch; flex-direction: column; }
  .bloc-admin-entete, .module-droit-entete { align-items: stretch; flex-direction: column; }
  .ajout-droit select, .module-actions select, .ajout-droit button, .module-actions button { width: 100%; }
  .encart-confirmation, .ligne-droit { align-items: stretch; flex-direction: column; }
  .recherche-org { flex-basis: auto; }
  .org-resume { grid-template-columns: 1fr; }
}

.cache { display: none !important; }