/* Hallmark · shape: app screen · theme: Rim, night (the dashboard's own tokens) · scope: the sign-in page of the hosted dashboard
 * one panel on the night paper: the dashboard's name as in its top bar, two fields, one orange action; the error said in words beside the fields, never in a modal
 * answered "stay signed in" · a native checkbox tinted with the accent, checked by default (the director's own computer), one quiet line under it for a shared computer; no toggle switch, no tooltip
 * the page is served without a session: it carries its own copy of the tokens (style.css stays behind the sign-in)
 * added the group's logo above the name, 64 px high, its night version (grey type re-inked to --encre); served without a session like the fonts
 * lifted the selection fill into --accent-pale, the token style.css already names (sloplint 48)
 * added the personal link page (/acces/…) on the same panel: « Bonjour », the account's address in full ink, one orange action, one quiet line under it; a stale link said in words, the password way as a quiet outlined button
 * answered invitation-only access (06/11/2026) · the form gives way to one sentence in full ink, « Accès sur invitation : demandez votre lien à l'administrateur. »; the password form and the stale link's password button come back only if the owner reopens that way; the foot says the visits are logged for 12 months */

/* Polices libres (licence OFL), servies par le tableau de bord : voir archivo-OFL.txt. */
@font-face {
  font-family: "Archivo";
  src: url("archivo.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap;
}

:root {
  color-scheme: dark;
  /* Rim, la nuit : les jetons de style.css, ceux dont cette page se sert */
  --fond: oklch(9% 0.008 75);
  --surface: oklch(12.5% 0.009 75);
  --creux: oklch(6.5% 0.007 75);
  --encre: oklch(94% 0.01 80);
  --encre-2: oklch(84% 0.011 80);
  --encre-3: oklch(68% 0.012 80);
  --encre-4: oklch(52% 0.01 80);
  --trait: oklch(25% 0.01 78);
  --trait-fort: oklch(36% 0.011 78);
  --accent: oklch(72% 0.17 45);
  --accent-fort: oklch(79% 0.14 45);
  --accent-pale: oklch(21% 0.045 45);
  --accent-encre: oklch(10% 0.02 45);
  --focus: oklch(78% 0.15 45);
  --mauvais-texte: oklch(72% 0.13 27);
  --mauvais-trait: oklch(52% 0.14 24);
  --police: "Archivo", "Segoe UI", system-ui, sans-serif;
  --texte-xs: 0.75rem;
  --texte-sm: 0.875rem;
  --texte-md: 1rem;
  --texte-lg: 1.2rem;
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px;
  --space-lg: 24px; --space-xl: 40px;
  --rayon: 0;
  --duree-micro: 120ms;
  --duree-courte: 220ms;
  --sortie: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
body {
  margin: 0; min-height: 100dvh; display: grid; place-items: center;
  background: var(--fond); color: var(--encre);
  font: 400 var(--texte-md)/1.5 var(--police); font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
h1 { margin: 0; font-weight: 500; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
button, input { font: inherit; color: inherit; }
input { caret-color: var(--accent); }
::selection { background: var(--accent-pale); color: var(--encre); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }

/* Une colonne de 26rem au plus, 16 px de marge sur un téléphone. */
.connexion { width: min(26rem, 100% - 2 * var(--space-md)); padding-block: var(--space-xl); }
.cadre { background: var(--surface); border: 1px solid var(--trait); padding: var(--space-xl) var(--space-lg) var(--space-lg); }
/* Le logo du groupe au-dessus du nom, plus grand que dans la barre du tableau
   de bord : 64 px de haut, la moitié de son fichier (340 × 128 px). */
.cadre .logo { display: block; width: auto; height: 64px; margin-bottom: var(--space-lg); }
.cadre h1 { font-size: var(--texte-lg); line-height: 1.15; letter-spacing: -0.02em; color: var(--encre); }
.cadre .h1-suite { display: block; margin-top: var(--space-3xs); font-size: var(--texte-sm); letter-spacing: 0; line-height: 1.3; }
.intro { margin-top: var(--space-md); font-size: var(--texte-sm); color: var(--encre-2); }
/* Accès sur invitation (le réglage par défaut) : une phrase à la place du formulaire. */
.intro.invitation { margin-top: var(--space-lg); font-size: var(--texte-md); color: var(--encre); }

.formulaire { display: grid; gap: var(--space-md); margin-top: var(--space-lg); }
.champ { display: grid; gap: var(--space-2xs); }
.champ label { font-size: var(--texte-sm); font-weight: 500; color: var(--encre-3); }
.champ input {
  height: 40px; width: 100%; min-width: 0; padding: 0 var(--space-sm);
  border: 1px solid var(--encre-4); border-radius: var(--rayon); background: var(--fond); color: var(--encre);
  font-size: var(--texte-md); outline: 2px solid transparent; outline-offset: -3px;
  transition: border-color var(--duree-micro) var(--sortie);
}
.champ input:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; }
/* Le remplissage automatique du navigateur garde l'encre et le fond de la nuit. */
.champ input:-webkit-autofill {
  -webkit-text-fill-color: var(--encre); caret-color: var(--accent);
  box-shadow: inset 0 0 0 40px var(--fond); transition: background-color 600000s 0s;
}
.saisie-secrete { display: flex; min-width: 0; }
.saisie-secrete input { flex: 1 1 auto; }
.montrer {
  appearance: none; flex: 0 0 auto; height: 40px; padding: 0 var(--space-sm); cursor: pointer;
  border: 1px solid var(--encre-4); border-left: 0; border-radius: var(--rayon); background: var(--fond);
  color: var(--encre-2); font-size: var(--texte-sm);
  transition: color var(--duree-micro) var(--sortie), border-color var(--duree-micro) var(--sortie);
}
.montrer:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; }
.montrer[aria-pressed="true"] { color: var(--encre); }

/* « Se souvenir de moi » : la case native aux couleurs de la nuit, la phrase d'aide sous le libellé. */
.souvenir { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: var(--space-xs); row-gap: var(--space-3xs); }
.souvenir input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.souvenir input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.souvenir label { display: flex; align-items: center; min-height: 32px; font-size: var(--texte-sm); color: var(--encre-2); cursor: pointer; }
.souvenir .aide { grid-column: 2; font-size: var(--texte-xs); color: var(--encre-3); }

.message {
  padding-left: var(--space-xs); border-left: 2px solid var(--mauvais-trait);
  font-size: var(--texte-sm); color: var(--mauvais-texte);
}

.bouton {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 40px; width: 100%; padding: 0 var(--space-md); border: 1px solid var(--trait-fort); border-radius: var(--rayon);
  background: transparent; color: var(--encre); font-size: var(--texte-sm); font-weight: 500; line-height: 1;
  white-space: nowrap; cursor: pointer;
  transition: background-color var(--duree-courte) var(--sortie), border-color var(--duree-courte) var(--sortie), transform var(--duree-micro) var(--sortie);
}
.bouton:active { transform: translateY(1px); }
.bouton:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bouton.principal { background: var(--accent); border-color: var(--accent); color: var(--accent-encre); }
.bouton:disabled { cursor: progress; transform: none; }
.bouton.principal:disabled { background: transparent; border-color: var(--trait-fort); color: var(--encre-3); }

.pied { margin-top: var(--space-md); font-size: var(--texte-xs); color: var(--encre-3); }

/* Le lien de connexion personnel (/acces/…) : « Bonjour », l'adresse du compte, une action. */
.acces .compte { margin-top: var(--space-3xs); font-size: var(--texte-md); font-weight: 500; color: var(--encre); overflow-wrap: anywhere; }
.acces .message-lien { color: var(--encre); }
.acces .action { display: grid; gap: var(--space-sm); margin-top: var(--space-lg); }
.acces .aide { font-size: var(--texte-xs); color: var(--encre-3); }
a.bouton { text-decoration: none; }

@media (hover: hover) {
  .champ input:hover, .montrer:hover { border-color: var(--encre-3); }
  .montrer:hover { color: var(--encre); }
  .bouton.principal:not(:disabled):hover { background: var(--accent-fort); border-color: var(--accent-fort); }
  .bouton:not(.principal):hover { border-color: var(--encre-3); }
}
@media (max-width: 40rem) {
  .cadre { padding: var(--space-lg) var(--space-md) var(--space-md); }
}
@media (prefers-reduced-motion: reduce) {
  .champ input, .montrer, .bouton { transition: none; }
  .bouton:active { transform: none; }
}