/* ══════════════════════════════════════════════════════════════════════════
   Espace « Comptes » et pages de connexion des salariées (refonte du 09/10).
   Charte « Le cahier d'atelier » : papier, encre, un seul trait rouge par en-tête,
   Inter 400 et 500, liens sans soulignement, aucun cadre ajouté. Jetons de app.css.
   ══════════════════════════════════════════════════════════════════════════ */

.comptes-page { max-width: 54rem; }
.comptes-page--etroit { max-width: 36rem; }
.retour { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; color: var(--muted); font-size: 13px; font-weight: 500; }
.retour::before { content: "\2039"; font-size: 18px; line-height: 1; }
.np-main .retour:hover { color: var(--ink); }

/* ── En-tête de page ─────────────────────────────────────────────────────── */
.tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 8px; }
.tete .tete__phrase { margin: 6px 0 0; color: var(--muted); font-size: 15px; }
.tete__phrase span:not(:last-child)::after { content: "\00a0· "; }
.tete__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tete--fiche { margin-bottom: 20px; }
.tete--fiche .fiche__qui { margin: 6px 0 0; color: var(--ink); font-size: 15px; }
.tete--fiche .fiche__etat { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.tete--fiche .fiche__ecart { margin: 2px 0 0; color: var(--warn); font-size: 13px; }

/* ── Liste : une ligne par personne, toute la ligne est le lien ──────────── */
.personnes { margin: 20px 0 0; padding: 0; list-style: none; }
.personnes > li { border-top: 1px solid var(--ink-15); }
.personnes > li:last-child { border-bottom: 1px solid var(--ink-15); }
.personne {
  display: grid; grid-template-columns: 10rem minmax(0, 1fr) auto 1.25rem;
  grid-template-areas: "id corps profil fleche"; align-items: center; gap: 4px 16px; padding: 16px 12px;
  color: var(--ink);
}
.np-main a.personne:hover { background: var(--paper); color: var(--ink); }
.np-main a.personne:hover .personne__id { color: var(--rouge-ink); }
.np-main a.personne:focus-visible { outline-offset: -2px; border-radius: 6px; }
.personne__id { grid-area: id; font-size: 15px; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; transition: color 0.18s ease; }
.personne__corps { grid-area: corps; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.personne__nom { font-size: 15px; font-weight: 500; }
.personne__etat { color: var(--muted); font-size: 14px; }
.personne__etat.est-a-faire, .tete--fiche .fiche__etat.est-a-faire { color: var(--warn); font-weight: 500; }
.personne__ecart { color: var(--warn); font-size: 13px; }
.personne__profil { grid-area: profil; color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
.personne__fleche { grid-area: fleche; color: var(--ink-60); text-align: right; }
.personne__fleche::before { content: "\203A"; font-size: 22px; line-height: 1; }
/* Adresse e-mail en identifiant : même grille, coupure propre avant « @ » (jamais au milieu d'un mot court). */
.personne__id--adresse { font-size: 13px; font-weight: 500; line-height: 1.3; letter-spacing: 0; overflow-wrap: anywhere; }
.personne__id--adresse + .personne__corps { min-width: 0; }
.personne--simple { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: none; cursor: default; }
.personne--simple .personne__corps { grid-area: auto; }
.personne--simple .personne__nom { overflow-wrap: anywhere; }
.personne--simple form { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.personne--simple form { margin: 0; }
.repli { margin-top: 28px; }
.repli > summary { cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 500; }
.repli > summary:hover { color: var(--ink); }
.repli > summary:focus-visible { outline: 2px solid var(--rouge); outline-offset: 2px; border-radius: 2px; }
.repli[open] > summary { margin-bottom: -4px; }

/* ── Fiche : blocs à plat, séparés par des filets ────────────────────────── */
.bloc { scroll-margin-top: calc(var(--np-header-height) + 16px); display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 8px 40px; padding: 28px 0; border-top: 1px solid var(--ink-15); }
.bloc--fin { margin-top: 20px; }
.bloc__titre h2 { margin: 0; font-size: 16px; }
.bloc__titre p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.bloc__corps p { margin: 0 0 12px; max-width: 62ch; }
.bloc__corps > :last-child { margin-bottom: 0; }
.bloc__corps form { margin: 0; }
.bloc__sous { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--ink-15); }
.confirmation { margin: 4px 0 0; padding: 14px 16px; border: 1px solid var(--ink-15); border-radius: 12px; background: var(--paper); }
.confirmation p { margin: 0 0 12px; }
.confirmation form { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Lecture de l'identité (fiche) ───────────────────────────────────────── */
.lecture { margin: 0 0 16px; }
.lecture > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); align-items: baseline; gap: 4px 16px; padding: 7px 0; }
.lecture dt { color: var(--muted); font-size: 13px; }
.lecture dd { margin: 0; overflow-wrap: anywhere; }
.lecture__aide { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; }
.fiche__ecart { color: var(--warn); font-size: 14px; }
.raison-bouton { color: var(--muted); font-size: 12.5px; }
.gele { min-width: 0; margin: 0; padding: 0; border: 0; }
.gele:disabled .raison-bouton { color: var(--muted); }

/* ── Champs ──────────────────────────────────────────────────────────────── */
.champs { display: grid; gap: 18px; max-width: 26rem; }
.champ { display: grid; gap: 6px; }
.champ__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.champ input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { width: 100%; }
.champ small, .champ__aide { margin: 0; color: var(--muted); font-size: 12.5px; }
.champ small.ok { color: var(--ok); }
.champ small.champ__erreur, .choix .champ__erreur { color: var(--rouge); font-size: 13px; }
.np-main input[aria-invalid="true"] { border-color: rgba(200, 48, 42, 0.55); }
.np-main button.danger, .button.danger { border-color: rgba(200, 48, 42, 0.35); background: var(--paper); color: var(--rouge); }
.np-main button.danger:hover, .button.danger:hover { background: var(--paper-deep); border-color: var(--rouge); color: var(--rouge-ink); }
.nowrap { white-space: nowrap; }
.champ small { text-wrap: pretty; }
.facultatif { color: var(--muted); font-weight: 400; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.choix { display: grid; gap: 2px; }
.choix legend { margin: 0 0 4px; color: var(--ink); font-size: 13px; letter-spacing: 0; text-transform: none; }
.choix__option { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 8px 0; cursor: pointer; }
.np-main .choix__option input { margin: 4px 0 0; }
.choix__nom { display: block; font-size: 14px; font-weight: 500; }
.choix__option small { display: block; margin-top: 1px; font-weight: 400; }
.np-main .case { display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 400; cursor: pointer; }
.np-main button.lien-bouton {
  min-height: 0; padding: 4px 0; border: 0; background: none; color: var(--muted); font-size: 13px;
}
.np-main button.lien-bouton:hover { background: none; color: var(--ink); }

/* Le focus posé à l'ouverture de la page (autofocus) n'a pas l'air d'une erreur : anneau encre ; au clavier, anneau de la charte. */
.np-main input[autofocus]:focus:not(:focus-visible), .np-main input[autofocus]:focus { box-shadow: 0 0 0 2px rgba(30, 42, 74, 0.32); }
.np-main input[autofocus][aria-invalid="true"]:focus { box-shadow: 0 0 0 2px rgba(200, 48, 42, 0.45); }

/* ── Page du code à dicter ───────────────────────────────────────────────── */
.code { margin: 28px 0 8px; color: var(--ink); font-size: 3.5rem; font-weight: 500; line-height: 1; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.code__note { max-width: 46ch; margin: 0 0 8px; color: var(--muted); font-size: 14px; }
.bloc--dicter { display: block; margin-top: 16px; padding-bottom: 8px; }
.bloc--dicter .actions { margin-top: 8px; }
.bloc--dicter h2 { margin: 0 0 12px; font-size: 16px; }
.dicter { margin: 0 0 16px; padding-left: 1.4rem; font-size: 16px; line-height: 1.5; }
.dicter li { margin-bottom: 10px; padding-left: 4px; }

/* ── Journal ─────────────────────────────────────────────────────────────── */
.filtre { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 8px; margin: 20px 0 8px; }
.filtre label { flex: 1 0 100%; }
.filtre select { min-width: 14rem; }
.jour h2 { margin: 28px 0 4px; font-size: 15px; }
.evenements { margin: 0; padding: 0; list-style: none; }
.evenements li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--ink-15); font-size: 14.5px; }
.evenements__heure { color: var(--muted); font-variant-numeric: tabular-nums; }
.vide { margin: 28px 0; color: var(--muted); }

/* ── Pages centrées : connexion et première connexion ────────────────────── */
.auth { max-width: 27rem; margin: 5vh auto 0; padding: 28px; border: 1px solid var(--ink-15); border-radius: 14px; background: var(--paper); }
.auth h1 + p { margin: 8px 0 22px; }
.auth .champs { max-width: none; gap: 20px; }
.auth .form-error { margin: 14px 0; }
.auth__lien { margin: 22px 0 0; font-size: 13.5px; }
.auth h1 + .form-error, .auth h1 + .source-note, .auth h1 + .champs { margin-top: 22px; }
.auth__suite { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--ink-15); }
.auth__suite .button { width: 100%; justify-content: center; min-height: 42px; }
.auth__suite p { margin: 14px 0 0; color: var(--muted); font-size: 13.5px; }
.auth .source-note { margin: 0 0 16px; }
.is-plain .np-main { margin-inline: auto; }
.is-plain .np-brand__word { font-size: 11px; }
.comptes-page p + .champs { margin-top: 22px; }
.auth__lien a { color: var(--muted); font-weight: 500; }
.auth .actions .primary { width: 100%; justify-content: center; min-height: 42px; }
.etape h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 15px; }
.etape + .etape { padding-top: 20px; border-top: 1px solid var(--ink-15); }
.etape .champs, .etape .champ + .champ { margin-top: 14px; }
.etape__n {
  display: grid; flex: 0 0 auto; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink); color: var(--paper); font-size: 12px; font-weight: 500; line-height: 1;
}
.np-main input.champ__code {
  padding: 12px; font-size: 26px; font-weight: 500; letter-spacing: 0.16em; text-align: center; font-variant-numeric: tabular-nums;
}
.np-main input.champ__code::placeholder { letter-spacing: 0.16em; font-weight: 400; }

@media (max-width: 760px) {
  .bloc { grid-template-columns: 1fr; gap: 12px; padding: 24px 0; }
  .personne { grid-template-columns: 6.5rem minmax(0, 1fr) 1rem; grid-template-areas: "id corps fleche" "id profil fleche"; padding: 14px 8px; gap: 2px 12px; }
  .personne__id--adresse { font-size: 13px; }
  .personne--simple { grid-template-columns: 1fr; gap: 8px; }
  .code { font-size: 3rem; }
}
@media (min-width: 761px) {
  .code { font-size: 5.5rem; }
}
@media (max-width: 480px) {
  /* Identifiant long : il passe au-dessus, sur toute la largeur. */
  .personne--long { grid-template-columns: minmax(0, 1fr) 1rem; grid-template-areas: "id fleche" "corps fleche" "profil fleche"; row-gap: 4px; }
  .personne--long .personne__id { font-size: 15px; letter-spacing: 0; }
  .auth { margin-top: 2vh; padding: 22px 18px; }
  .champ input:not([type="checkbox"]):not([type="radio"]), .champ select, .filtre select { font-size: 16px; }
  .np-main input.champ__code { font-size: 24px; }
  .evenements li { grid-template-columns: 3.75rem minmax(0, 1fr); gap: 8px; }
  .tete__actions .button, .tete__actions button { flex: 1 1 auto; justify-content: center; }
}
@media (pointer: coarse) {
  .comptes-page .button, .comptes-page button, .auth button, .auth .button { min-height: 44px; }
  .np-main button.lien-bouton { padding: 12px 0; }
}