/* Employeur — styles locaux (shell = /shared/shell.css). CHARTE densité 1. */

[data-densite='employeur'] { --densite: 1; }

.ecran { padding: var(--esp-4); }

.ecran-accueil {
  max-width: 24rem;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  min-height: 80dvh;
  justify-content: center;
  padding: var(--esp-6);
}

/* Écran dédié (connexion / inscription) — remplace entièrement la vue. */
.ecran-plein:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow-y: auto;
  background: var(--fond-app);
  padding: 0;
  display: flex;
  flex-direction: column;
}

.ecran-plein-entete {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-3) var(--esp-4);
  background: var(--surface);
  border-bottom: 1px solid var(--bordure);
  position: sticky;
  top: 0;
  z-index: 1;
}

.ecran-plein-corps {
  max-width: 28rem;
  width: 100%;
  margin: 0 auto;
  padding: var(--esp-4) var(--esp-4) var(--esp-16);
}

body.route-auth-ouverte {
  overflow: hidden;
}

.bouton-google {
  width: 100%;
  background: var(--surface);
  color: var(--texte-principal);
  border: 1px solid var(--bordure-forte);
  font-weight: var(--g-semi);
}

.bouton-google:hover,
.bouton-google:focus-visible {
  border-color: var(--bordure-active);
  outline: 2px solid var(--bordure-active);
  outline-offset: 0;
}

.separateur-ou {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  color: var(--texte-tertiaire);
  font-size: var(--t-petit);
  width: 100%;
}
.separateur-ou::before,
.separateur-ou::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--bordure);
}

.actions-accueil { display: grid; gap: var(--esp-3); }
.actions-accueil .bouton { width: 100%; }

.lien-retour a,
.lien-bouton {
  color: var(--action);
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  min-height: auto;
}

.bouton {
  min-height: var(--cible);
  min-width: var(--cible);
  padding: var(--esp-2) var(--esp-4);
  background: var(--surface);
  color: var(--action);
  border: 1px solid var(--action);
  border-radius: var(--rayon-controle);
  font: inherit;
  font-weight: var(--g-semi);
  cursor: pointer;
}

.bouton-discret {
  background: var(--surface);
  color: var(--texte-principal);
  border: 1px solid var(--bordure);
}

/* .zone-a-faire : défini dans shell.css (une seule fois). */
.zone-a-faire[hidden] {
  display: none !important;
}

.bloc-details {
  margin: var(--esp-3) var(--esp-4);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-carte);
  background: var(--surface);
}

.bloc-details > summary {
  min-height: var(--cible);
  padding: var(--esp-3) var(--esp-4);
  font-weight: var(--g-semi);
  cursor: pointer;
}

/* Ouverture via le bouton de la bande recherche — summary masqué. */
.bloc-details--creation:not([open]) {
  display: none;
}
.bloc-details--creation[open] {
  display: block;
}
.bloc-details--creation > summary.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.bande-recherche--missions {
  flex-wrap: wrap;
  justify-content: flex-start;
}
#btn-ouvrir-creation-mission {
  flex: 0 0 auto;
  white-space: nowrap;
}

.bloc-details--recherche {
  margin-top: var(--esp-4);
  order: 99;
}
.bloc-details--recherche > summary {
  font-size: var(--t-petit);
  font-weight: var(--g-regulier, 400);
  color: var(--texte-secondaire);
}
.form-recherche-missions {
  padding-top: 0;
}

.carte-personne--focus {
  outline: 2px solid var(--bordure-active);
  outline-offset: 2px;
}


.bloc-details--interne {
  margin: var(--esp-2) 0 0;
  border-style: dashed;
}

.formulaire--compact { padding: 0 var(--esp-4) var(--esp-4); }

.texte-secondaire { color: var(--texte-secondaire); }

.formulaire { display: grid; gap: var(--esp-3); padding: var(--esp-4); }
.formulaire label {
  display: grid;
  gap: var(--esp-1);
  font-size: var(--t-petit);
  color: var(--texte-secondaire);
}
.formulaire input,
.formulaire textarea {
  min-height: var(--cible);
  padding: var(--esp-2);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-controle);
  font: inherit;
  background: var(--surface);
  color: var(--texte-principal);
}
.formulaire fieldset {
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-carte);
  padding: var(--esp-3);
  display: grid;
  gap: var(--esp-3);
  margin: 0;
}

.champ-case {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: var(--esp-2);
}

.grille-fiches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--esp-3);
  padding: var(--esp-4);
}

.fiche {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  padding: var(--esp-3);
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-carte);
  min-height: var(--cible);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.fiche--selectionnee {
  border-color: var(--bordure-active);
  background: var(--surface-selection);
}
.fiche-photo {
  width: var(--esp-12);
  height: var(--esp-12);
  border-radius: var(--rayon-photo);
  background: var(--surface-discrete);
  border: none;
  padding: 0;
  align-self: center;
}
.fiche-nom { font-weight: var(--g-semi); margin: 0; }
.fiche-meta { margin: 0; font-size: var(--t-petit); color: var(--texte-secondaire); }
.etiquette-selection {
  font-size: var(--t-etiquette);
  letter-spacing: var(--interlettrage-etiquette);
  text-transform: uppercase;
  color: var(--etat-ok-texte);
  background: var(--etat-ok-fond);
  border-radius: var(--rayon-etiquette);
  padding: var(--esp-1) var(--esp-2);
  align-self: flex-start;
}

.panneau-diffusion {
  border: none;
  border-radius: var(--rayon-carte) var(--rayon-carte) 0 0;
  padding: 0;
  width: min(100%, 40rem);
  max-height: 90dvh;
  box-shadow: var(--ombre-panneau);
}
.panneau-diffusion::backdrop { background: var(--texte-principal); opacity: 0.4; }
.diffusion-entete, .diffusion-pied { padding: var(--esp-4); }
.diffusion-choix { display: grid; gap: var(--esp-3); padding: var(--esp-4); }
.diffusion-pied { display: flex; gap: var(--esp-3); justify-content: flex-end; }
.compteur {
  font-family: var(--police-donnees);
  font-size: var(--t-montant-l);
  margin: var(--esp-2) 0 0;
}
.champ-filtre { display: block; margin: var(--esp-2) 0; }
.champ-filtre input { width: 100%; min-height: var(--cible); }

#dialogue-invitation-directe .champ {
  display: block;
  padding: 0 var(--esp-4);
}
#dialogue-invitation-directe textarea {
  width: 100%;
  min-height: 8rem;
  margin-top: var(--esp-2);
}
.liste-resultats-invitation {
  padding: var(--esp-3) var(--esp-4);
  display: grid;
  gap: var(--esp-2);
}
.resultat-invitation-ligne {
  margin: 0;
  font-size: var(--t-corps-s);
  color: var(--texte-secondaire);
}

.fiche-mission-detail {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  margin-top: var(--esp-1);
  padding: 0 var(--esp-3);
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}
.fiche-mission-detail--compact {
  gap: var(--esp-1);
}
.fiche-mission-detail h2 {
  margin: 0;
  font-family: var(--police-titre);
  font-size: clamp(1.05rem, 4vw, 1.35rem);
  overflow-wrap: anywhere;
}
.fiche-mission-detail p,
.fiche-bloc p {
  margin: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.fiche-mission-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin-top: var(--esp-1);
}
.fiche-blocs {
  display: grid;
  gap: var(--esp-2);
  padding: 0 var(--esp-3);
  max-width: 100%;
  box-sizing: border-box;
}
.fiche-bloc {
  padding: var(--esp-2) var(--esp-3);
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-carte);
  max-width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
}
.fiche-bloc--jours {
  padding-left: 0;
  padding-right: 0;
  border: none;
  background: transparent;
}
.fiche-bloc--jours > h3 {
  padding: 0 var(--esp-3);
}
.fiche-bloc--secondaire {
  padding: var(--esp-2) var(--esp-3);
}
.fiche-bloc--secondaire summary {
  cursor: pointer;
  font-size: var(--t-petit);
  text-transform: uppercase;
  letter-spacing: var(--interlettrage-etiquette);
  color: var(--texte-secondaire);
}
#contenu-fiche-mission {
  max-width: 100%;
  overflow-x: hidden;
  padding-top: 0;
  padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0));
}
#panneau-fiche-mission > .lien-bouton {
  margin: var(--esp-1) var(--esp-3);
}
.fiche-bloc h3 {
  margin: 0 0 var(--esp-2);
  font-size: var(--t-petit);
  text-transform: uppercase;
  letter-spacing: var(--interlettrage-etiquette);
  color: var(--texte-secondaire);
}
.fiche-jours-rail {
  align-items: flex-start;
  padding-top: var(--esp-1);
}
.fiche-jour-col {
  flex: 0 0 min(15.5rem, calc(100vw - 4.5rem));
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  scroll-snap-align: start;
}
.fiche-jour-carte {
  flex: none;
  width: 100%;
  box-sizing: border-box;
}
.fiche-jour-carte .etiquette {
  margin-top: var(--esp-1);
  display: inline-flex;
}
.fiche-jour-personnes {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}
.fiche-resume-carac {
  list-style: none;
  margin: var(--esp-2) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-1) var(--esp-3);
}
.fiche-resume-carac li {
  margin: 0;
  font-size: var(--t-petit);
  color: var(--texte-secondaire, inherit);
}
.fiche-jour-vide {
  margin: 0;
  padding: 0 var(--esp-1);
  font-size: var(--t-petit);
}
.cartes-mini {
  display: flex;
  flex-direction: row;
  gap: var(--esp-3);
  overflow-x: auto;
  padding-bottom: var(--esp-2);
}
.carte-mini {
  flex: 0 0 12rem;
  padding: var(--esp-3);
  background: var(--surface-discrete);
  border-radius: var(--rayon-carte);
  border: 1px solid var(--bordure);
}
.carte-mini-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin-top: var(--esp-2);
}
.bouton-compact {
  padding: var(--esp-1) var(--esp-2);
  font-size: var(--t-petit);
}
.zone-a-faire--rail {
  padding-left: 0;
  padding-right: 0;
}
.zone-a-faire-rail {
  margin: 0;
}
.zone-a-faire-carte {
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: inherit;
}
.zone-a-faire-carte strong {
  display: block;
  margin-bottom: var(--esp-1);
}

.etiquette-selection {
  /* reste local ; .etiquette vit dans design-tokens */
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  font-size: var(--t-etiquette);
}
.carte-meta {
  margin: 0;
  font-size: var(--t-petit);
  color: var(--texte-secondaire);
}
.heure {
  font-family: var(--police-donnees);
  font-weight: var(--g-semi);
}

/* Inscription en étapes (REQ-ONB-003b) */
.progression-inscription {
  font-size: var(--t-petit);
  color: var(--texte-secondaire);
  margin: 0 0 var(--esp-2);
}
.etapes-inscription {
  display: flex;
  gap: var(--esp-2);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--esp-4);
}
.etape-inscription {
  width: var(--esp-6);
  height: var(--esp-6);
  border-radius: var(--rayon-photo);
  border: 1px solid var(--bordure);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-petit);
  color: var(--texte-tertiaire);
}
.etape-inscription--active {
  background: var(--action);
  color: var(--action-texte);
  border-color: var(--action);
}
.etape-inscription--faite {
  background: var(--etat-ok-fond);
  color: var(--etat-ok-texte);
  border-color: var(--etat-ok-texte);
}
.recap-inscription {
  background: var(--surface-discrete);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-carte);
  padding: var(--esp-3);
  font-size: var(--t-petit);
  line-height: var(--i-petit);
}
.recap-inscription p { margin: 0 0 var(--esp-2); }
.t-titre-3 {
  font-size: var(--t-titre-3);
  line-height: var(--i-titre-3);
  margin: 0 0 var(--esp-2);
}

.panneau-filtres {
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-carte);
  padding: var(--esp-4);
  max-width: min(22rem, 92vw);
  background: var(--surface);
  color: var(--texte-principal);
  box-shadow: var(--ombre-panneau);
}
.panneau-filtres::backdrop {
  background: color-mix(in srgb, var(--texte-principal) 40%, transparent);
}
.panneau-filtres h2 {
  margin: 0 0 var(--esp-2);
  font-size: var(--t-titre-3);
  line-height: var(--i-titre-3);
}
.actions-filtres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin-top: var(--esp-4);
}
.btn-filtre {
  position: relative;
}
.badge-filtre {
  position: absolute;
  top: 0;
  right: 0;
  min-width: var(--esp-4);
  height: var(--esp-4);
  padding: 0 var(--esp-1);
  border-radius: var(--rayon-etiquette);
  background: var(--action);
  color: var(--action-texte);
  font-size: var(--t-etiquette);
  line-height: var(--esp-4);
  text-align: center;
  font-weight: var(--g-semi);
}


/* B6.7 — parcours paie employeur */
.paie-section {
  margin-block: var(--esp-5);
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
}
.paie-liste-parametres {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
}
.paie-groupe-parametres {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}
.paie-groupe-titre {
  margin: var(--esp-2) 0 0;
  font-size: var(--t-corps-s);
  font-weight: 600;
  color: var(--texte-secondaire);
}
.paie-param-ligne {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto minmax(7rem, 9rem) auto;
  gap: var(--esp-2);
  align-items: center;
  padding: var(--esp-2) 0;
  border-bottom: 1px solid var(--bordure);
}
.paie-param-cle {
  font-size: var(--t-corps-s);
  word-break: break-word;
}
.paie-param-libelle {
  display: block;
  font-weight: 500;
}
.paie-param-cle-tech {
  display: block;
  font-size: var(--t-legende, 0.75rem);
  color: var(--texte-secondaire);
}
.paie-param-input {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--esp-2);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-champ, 4px);
  background: var(--surface);
  color: var(--texte-principal);
  font: inherit;
  text-align: right;
}
.paie-param-unite {
  font-size: var(--t-corps-s);
  color: var(--texte-secondaire);
  min-width: 2rem;
}
.paie-actions-parametres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin-top: var(--esp-2);
}
.paie-form-parametres {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
}
.paie-import-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
}
.paie-import-fichier {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.paie-import-json {
  width: 100%;
  min-height: 10rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--t-corps-s);
  padding: var(--esp-2);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-champ, 4px);
  background: var(--surface);
  color: var(--texte-principal);
  resize: vertical;
}
.paie-liste-periodes {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
}
.carte-paie-periode {
  cursor: pointer;
  padding: var(--esp-3);
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-carte);
}
.paie-alerte--bloquant { color: var(--alerte); }
.paie-alerte--attention { color: var(--texte-principal); }
.paie-alerte--info { color: var(--texte-secondaire); }
.paie-actions-detail {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
}
.paie-resultat {
  white-space: pre-wrap;
  font-size: var(--t-corps-s);
  background: var(--surface);
  padding: var(--esp-3);
  border-radius: var(--rayon-carte);
  overflow-x: auto;
}
.paie-bulletin-ligne {
  display: flex;
  justify-content: space-between;
  gap: var(--esp-3);
  padding: var(--esp-1) 0;
}

/* D-84 Lot 6B — pilote Chantier */
.chantier-section {
  margin-top: var(--esp-5);
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
}
.chantier-liste {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
}
.chantier-carte,
.chantier-ligne-terrain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-2);
  padding: var(--esp-3);
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-carte);
}
.chantier-carte {
  flex-direction: column;
  align-items: stretch;
}
.chantier-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
}
.chantier-bandeau {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-4);
  padding: var(--esp-3);
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-carte);
}
.chantier-actif-courant {
  font-weight: 600;
}
.chantier-agregat-liste {
  margin: 0;
  padding-left: var(--esp-4);
}
.chantier-form-creer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  align-items: flex-end;
}