/* Comptes : composition seulement. Verre, champs, boutons et palettes viennent du socle. */
#hors-application {
  min-height: 100svh; display: flex; align-items: center;
  padding: var(--espace-5) max(var(--espace-2), calc((100vw - 1160px) / 2));
}
#hors-application > .plateau {
  width: 440px; max-width: 100%; padding: var(--espace-5);
  display: flex; flex-direction: column; gap: var(--espace-3);
}
#hors-application .case { min-width: 0; }
#hors-application h1 { font-size: var(--t-titre-vue); line-height: var(--i-titre-vue); font-weight: var(--g-gras); }
#hors-application h2 { font-size: var(--t-titre-case); line-height: var(--i-titre-case); font-weight: var(--g-gras); margin-bottom: var(--espace-4); }
#hors-application header p { margin-top: var(--espace-1); }
#hors-application form { display: flex; flex-direction: column; gap: var(--espace-4); }
#hors-application form > .bouton { width: 100%; }
#hors-application a { align-self: flex-start; }
#hors-application aside { font-size: var(--t-aide); line-height: var(--i-aide); }
#hors-application :is(.champ__aide, [data-erreur]):empty { display: none; }
#hors-application [data-panne] { display: flex; flex-direction: column; gap: var(--espace-3); }
#hors-application [data-panne] h2 { margin: 0; }
#hors-application [data-panne] .bouton { width: 100%; }
@media (max-width: 640px) {
  #hors-application { padding: var(--espace-3) var(--espace-2); }
  #hors-application > .plateau { padding: var(--espace-3); width: 100%; }
}

/* E1, E3–E6 : même composition hors application. */
#hors-application > [data-compte-ecran="installation"] { width: 620px; }
[data-compte-ecran="installation"] form { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-compte-ecran="installation"] form > :not(.champ) { grid-column: 1 / -1; }
#hors-application section > :is(p, code, a) + :is(p, code, a) { margin-top: var(--espace-4); }
#hors-application code { display: block; overflow-wrap: anywhere; }
#hors-application .paire { margin: 0; }

/* E7 : le rail garde son bouton ; le menu s'ouvre près de lui. */
#employe { position: relative; }
#compte-menu { margin: 0; color: var(--text-primary); position: fixed; inset: auto auto var(--espace-5) calc(2 * var(--controle-h) + var(--espace-4)); width: 300px; max-width: calc(100vw - var(--espace-5)); padding: var(--espace-2); z-index: 30; }
#compte-menu .case { display: flex; flex-direction: column; gap: var(--espace-1); padding: var(--espace-3); }
#compte-menu p:not(:first-child) { font-size: var(--t-aide); line-height: var(--i-aide); }
#compte-menu nav { display: flex; flex-direction: column; align-items: stretch; gap: var(--espace-2); margin-top: var(--espace-3); }
#compte-menu a { padding: var(--espace-3); }

/* E8–E12 : piles de cases dans le panneau fourni par Paramètres. */
.panneau[data-comptes], #profil-contenu, [data-employes] { display: flex; flex-direction: column; gap: var(--espace-3); min-width: 0; }
:is(.panneau[data-comptes], dialog[data-comptes]) .case { min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: var(--espace-4); }
:is(.panneau[data-comptes], dialog[data-comptes]) :is(h2, h3, h4) { font-size: var(--t-titre-case); line-height: var(--i-titre-case); font-weight: var(--g-gras); }
:is(.panneau[data-comptes], dialog[data-comptes]) :is(form, fieldset) { display: flex; flex-direction: column; gap: var(--espace-4); min-width: 0; }
:is(.panneau[data-comptes], dialog[data-comptes]) fieldset { border: 0; padding: 0; margin: 0; }
:is(.panneau[data-comptes], dialog[data-comptes]) legend { margin-bottom: var(--espace-3); font-weight: var(--g-moyen); }
:is(.panneau[data-comptes], dialog[data-comptes]) fieldset label { display: flex; align-items: center; gap: var(--espace-2); min-height: var(--cible-min); }
:is(.panneau[data-comptes], dialog[data-comptes]) :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--accent); flex: none; }
:is(.panneau[data-comptes], dialog[data-comptes]) :is(.bouton, .pastille) { align-self: flex-start; white-space: normal; }
:is(.panneau[data-comptes], dialog[data-comptes]) :is(pre, code, dd, p) { overflow-wrap: anywhere; }
:is(.panneau[data-comptes], dialog[data-comptes]) pre { white-space: pre-wrap; font-size: var(--t-aide); line-height: var(--i-texte); }
:is(.panneau[data-comptes], dialog[data-comptes]) :is(ul, ol) { padding-left: var(--espace-5); }
:is(.panneau[data-comptes], dialog[data-comptes]) li + li { margin-top: var(--espace-2); }
:is(.panneau[data-comptes], dialog[data-comptes]) :is([data-erreur], .champ__aide, [data-detail], [data-resultat], [data-activation]):empty { display: none; }
[data-comptes] .paire dt { font-size: var(--t-aide); color: var(--text-secondary); }
[data-comptes] .paire dd { margin: 0; }
[data-comptes] [data-qr] { width: 180px; height: 180px; max-width: 100%; }
[data-comptes] .onglets { flex-direction: row; flex-wrap: wrap; gap: var(--espace-3); padding-block: var(--espace-2); }
[data-comptes] [data-detail]:not(:empty), [data-comptes] [data-resultat]:not(:empty) { display: flex; flex-direction: column; align-items: flex-start; gap: var(--espace-4); }
[data-comptes] [data-detail] > form { width: 100%; }
[data-comptes] .ligne { justify-content: space-between; flex-wrap: wrap; padding: 0; }
[data-comptes] .ligne > div { flex: 1; min-width: 0; }
[data-comptes] .ligne p { margin-top: var(--espace-1); }
[data-comptes] .tableau { overflow-x: auto; }
[data-comptes] .tableau table { width: 100%; border-collapse: collapse; }
[data-comptes] [data-filtres] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; align-items: end; }
[data-comptes] [data-filtres] [data-erreur] { grid-column: 1 / -1; }
[data-comptes] [data-filtres] > button { align-self: end; }
[data-comptes] [data-evenements] { display: flex; flex-direction: column; gap: var(--espace-4); min-width: 0; }

/* Le dialogue natif assure Échap, focus captif et restitution du focus. */
dialog[data-comptes] { position: fixed; inset: 0; margin: auto; max-width: calc(100vw - var(--espace-5)); max-height: calc(100svh - var(--espace-5)); color: var(--text-primary); }
dialog[data-comptes]::backdrop { background: var(--dialogue-voile); }
@media (max-width: 640px) {
  #hors-application > [data-compte-ecran="installation"] { width: 100%; }
  [data-compte-ecran="installation"] form, [data-comptes] [data-filtres] { grid-template-columns: minmax(0, 1fr); }
  :is(.panneau[data-comptes], dialog[data-comptes]) .case { padding: var(--espace-4); }
  dialog[data-comptes] { padding: var(--espace-3); }
  #compte-menu { inset: auto auto var(--espace-3) var(--espace-3); }
  [data-comptes] .paire { grid-template-columns: minmax(0, 1fr); }
  [data-comptes] .paire dd + dt { margin-top: var(--espace-2); }
}

[data-chiffres] { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--espace-2); max-width: 360px; }
[data-chiffres] input { text-align: center; padding-inline: var(--espace-1); font-size: var(--t-titre-vue); font-weight: var(--g-gras); }

/* Placement du titre de la coquille au-dessus du menu et du panneau des comptes. */
.settings:has([data-comptes]) > .vue-tete { grid-column: 1 / -1; margin-bottom: var(--espace-4); }
.settings:has([data-comptes]) > .vue-tete h1 { margin: 0; }
[data-comptes] > .onglets > .onglet { flex: none; width: auto; }
dialog[data-comptes] { border: 0; }
.panneau[data-comptes] > .onglets { flex-direction: row; align-items: center; }
.settings:has([data-comptes]) { padding: var(--espace-5) var(--espace-4); max-width: none; }
.chat[data-view="settings"] .settings:has([data-comptes]) { column-gap: var(--espace-5); }
.panneau[data-comptes="employes"] > .case { flex-direction: row; align-items: center; flex-wrap: wrap; justify-content: space-between; }
@media (max-width: 640px) {
  .settings:has([data-comptes]) { padding: var(--espace-3); }
}

#compte-menu { border: 0; }
:is(.panneau[data-comptes], dialog[data-comptes]) ul { list-style: disc; }
dialog[data-comptes]:not([open]) { display: none; }
/* Résultats délivrés : lien et copie ensemble, explication sur sa propre ligne. */
[data-comptes] .lien-delivre { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
[data-comptes] .lien-delivre > [data-lien] { grid-column: 1; grid-row: 1; }
[data-comptes] .lien-delivre > [data-action="copier"] { grid-column: 2; grid-row: 1; }
[data-comptes] .lien-delivre > p:not([data-lien]) { grid-column: 1 / -1; }
[data-comptes] .lien-delivre:has([data-codes]) { display: flex; flex-wrap: wrap; align-items: flex-start; }
[data-comptes] .lien-delivre > [data-codes] { order: 1; flex: 0 0 100%; column-count: 5; column-gap: var(--espace-3); margin-block: var(--espace-3); }
[data-comptes] .lien-delivre:has([data-codes]) > p { flex: 0 0 100%; font-family: inherit; }
[data-comptes] .lien-delivre:has([data-codes]) > button { order: 2; }
.panneau[data-comptes] form[data-filtres] { display: grid; }
@media (max-width: 640px) {
  [data-comptes] .lien-delivre { grid-template-columns: minmax(0, 1fr); }
  [data-comptes] .lien-delivre > [data-action="copier"] { grid-column: 1; grid-row: auto; }
  [data-comptes] .lien-delivre > [data-codes] { column-count: 2; }
}

/* Appareils : une carte par clé ; sous 640 px, l'action passe sous le texte. */
.panneau[data-comptes="appareils"] { display: flex; flex-direction: column; gap: var(--espace-3); min-width: 0; }
[data-comptes] [data-appareils] { display: flex; flex-direction: column; gap: var(--espace-3); min-width: 0; }
[data-comptes] [data-cle] .ligne { align-items: flex-start; gap: var(--espace-3); }
[data-comptes] [data-cle] .ligne > .bouton { align-self: flex-start; }
:is(.panneau[data-comptes], dialog[data-comptes]) label:has(> input[type="checkbox"]) { display: flex; align-items: center; gap: var(--espace-2); min-height: var(--cible-min); }
[data-comptes] [data-cle-service] { display: flex; flex-direction: column; gap: var(--espace-4); }
@media (max-width: 640px) {
  [data-comptes] [data-cle] .ligne { flex-direction: column; }
  [data-comptes] [data-cle] .ligne > .bouton { width: 100%; }
}

/* Connexion unique : le bouton de l'annuaire est le seul bouton plein, la connexion locale reste repliée dessous. */
#hors-application [data-sso-connexion] { align-self: stretch; width: 100%; display: flex; justify-content: center; align-items: center; text-align: center; text-decoration: none; margin-bottom: var(--espace-3); }
#hors-application details[data-connexion-locale] { display: flex; flex-direction: column; gap: var(--espace-3); }
#hors-application details[data-connexion-locale] > summary { cursor: pointer; min-height: var(--cible-min); display: flex; align-items: center; color: var(--text-primary); text-decoration: underline; }
#hors-application details[data-connexion-locale][open] > summary { margin-bottom: var(--espace-3); }
#hors-application summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--rayon-controle); }
#hors-application [data-erreur] { overflow-wrap: anywhere; }

/* Liaisons et accès perdus : une carte par personne, sans bouton plein. */
[data-comptes] [data-liaison] { display: flex; flex-direction: column; gap: var(--espace-3); min-width: 0; padding: var(--espace-3) var(--espace-4); border: 1px solid var(--border-subtle); border-radius: var(--rayon-controle); background: var(--bg-hover); }
[data-comptes] [data-liaison] .ligne { justify-content: flex-start; gap: var(--espace-3); }
[data-comptes] [data-acces-perdu] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-2); }
[data-comptes] [data-mode-direct] label { display: flex; align-items: center; gap: var(--espace-2); min-height: var(--cible-min); }

/* Une pastille dont le texte est une phrase peut passer à la ligne (390 px) au lieu de déborder de son fond. */
.pastille--long { white-space: normal; padding-block: var(--espace-1); }