/* =============================================================
   MM — les écrans d'avant-connexion.

   Ce sont les PREMIERS pixels qu'un membre voit de la coop : avant
   eux, l'app n'a rien dit d'elle-même. D'où une colonne étroite,
   des cibles généreuses et aucune navigation — il n'y a encore ni
   comité à lister ni personne à nommer.

   Mêmes règles dures que app.css : aucun hex, classes sémantiques,
   et toute taille de police sur un CRAN de l'échelle —
   `var(--mil-fs-0…6)`, définis dans `tokens.css`, multiplicateur du
   zoom déjà inclus. Pas de `calc` autour.
   ============================================================= */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--mil-fs-3);
  line-height: 1.55;
  color: var(--c-text);
  background: var(--c-bg);
}

.auth-shell {
  max-width: 420px;
  margin: 0 auto;
  padding: var(--space-7) var(--space-5) var(--space-7);
}

/* ---------------------------------------------------------------
   La porte d'entrée : une colonne AU MILIEU de l'écran
   ---------------------------------------------------------------
   `.auth-gate` ne s'ajoute qu'aux écrans de `layouts/plain` — la
   connexion, le mot de passe oublié, celui qu'on choisit, la coop
   suspendue. Le plan de contrôle partage `.auth-shell` et n'en veut
   pas : sa liste de coops se lit du haut vers le bas, et flotterait
   au milieu d'un écran de bureau.

   ── POURQUOI `margin: auto` ET PAS `justify-content: center` ─────
   Les deux centrent tant que le contenu tient dans la fenêtre. Passé
   cette hauteur — un mot de passe à choisir, deux erreurs de champ,
   ou simplement un zoom à 200 % — `justify-content: center` déborde
   des DEUX côtés et le haut devient inatteignable : rien ne défile
   au-dessus du point de départ du conteneur. Une marge automatique,
   elle, tombe à zéro dès qu'il n'y a plus d'espace libre à
   distribuer. Le formulaire redevient simplement une page qui
   défile.
   --------------------------------------------------------------- */

.auth-gate {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.auth-gate > .auth-column { width: 100%; margin-block: auto; }

/* ---------------------------------------------------------------
   La marque : l'image de la coop, et son nom
   --------------------------------------------------------------- */

.auth-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

/* La marge du bloc est celle de la ligne entière, sinon le nom pousse
   l'image vers le haut de son propre espacement. */
.auth-mark .auth-brand { margin-bottom: 0; }

/* 44 px : la taille du logo dans le rail, et la cible tactile
   minimale — mais rien ici n'est cliquable, c'est une marque, pas un
   lien vers l'accueil d'une coop où on n'est pas encore entré.

   `contain` parce qu'une coop téléverse ce qu'elle veut : un logo
   large ne se fait pas rogner en son milieu. */
.auth-logo {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 8px;                 /* le rayon du rail, au pixel */
}

/* LE MONOGRAMME, EN TEXTE — même arbitrage que `span.coop-mark` dans
   `app.css`, et pour la raison qui se voit ici mieux qu'ailleurs : la
   version image est une tuile BLANCHE opaque (SVG `data:`, couleurs
   en dur), et cet écran-ci a un fond clair. La tuile y disparaissait,
   ne laissant flotter que deux lettres ; en thème sombre elle serait
   restée blanche. Du texte lit les jetons.

   La bordure, elle, n'est pas dans le rail : là-bas le bouton des
   destinations encadre déjà la marque. Ici, sans elle, les initiales
   se lisent comme un mot collé devant le nom de la coop. */
.auth-monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  font-size: var(--mil-fs-4);
  font-weight: 700;
  line-height: 1;
  color: var(--c-text);
}

.auth-brand {
  font-family: 'Arial Black', var(--font);
  font-weight: 900;
  font-size: var(--mil-fs-5);
  letter-spacing: -1px;
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 0 var(--space-6);
}

/* LA MARQUE QUAND ELLE EST UNE ADRESSE — la racine de la plateforme, qui
   se nomme par l'hôte demandé plutôt que par le nom du produit.

   Trois règles, et chacune répond à ce que cette page-ci a de différent :

   · la casse. « COOP MIL » est un wordmark ; « TOU.SKI » serait une adresse
     qu'on crie, et personne n'écrit son domaine ainsi. Le reste du traitement
     — Arial Black, l'accent — RESTE : c'est lui qui la rend fière, et le
     rendre discret serait répondre à côté ;
   · l'alignement. Sur les écrans de `layouts/plain`, la marque ouvre un
     formulaire aligné à gauche et se pose sur son bord. Ici il n'y a pas de
     formulaire : sous elle, `.auth-panel.is-centered` centre déjà la liste des
     portes, et une marque à gauche au-dessus d'une colonne centrée se lit
     comme un décalage, pas comme un choix ;
   · la taille, du cran 5 au cran 6. Le cran 5 est celui d'un titre d'écran
     SECONDAIRE, et il tient ailleurs parce que la marque y voisine un logo de
     44 px et surmonte un formulaire qui remplit la colonne. Ici elle est seule
     sur une page vide, où 20 px se lisent comme une mention plutôt que comme
     un nom. Le cran 6 est « titre d'écran » — ce que cette ligne est devenue
     en devenant le `<h1>` — et c'est le HAUT de l'échelle : au-delà on
     inventerait une taille hors des jetons pour une seule page. */

.auth-brand.is-adresse {
  font-size: var(--mil-fs-6);
  text-align: center;
  text-transform: none;
}

.auth-brand .auth-coop {
  font-family: var(--font);
  font-weight: 400;
  font-size: var(--mil-fs-1);
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-text-muted);
}

/* 24 → 26 px, le cran 6. Les crans voisins sont 20 (« titre d'écran
   secondaire ») et 26 (« titre d'écran »), et `.auth-title` est toujours le
   `<h1>` de sa page — les six gabarits qui l'emploient le posent tous ainsi.
   26 est aussi la valeur du `h1` d'`app.css` : le titre de « Connexion » et
   celui de « Les comités » sont la même chose, et se lisaient jusqu'ici à deux
   pixels d'écart pour la seule raison que les deux feuilles ne se relisaient
   pas ensemble. */
.auth-title {
  font-size: var(--mil-fs-6);
  font-weight: 700;
  letter-spacing: -.4px;
  margin: 0 0 var(--space-2);
}

.auth-lead {
  color: var(--c-text-mid);
  margin: 0 0 var(--space-5);
}

/* DIT SANS ÊTRE MONTRÉ.

   Le titre de « Connexion » ne se dessine plus — la coop et son image le
   remplacent — mais le plan du document, lui, ne suit pas ce qui est joli :
   un écran sans le moindre `<h1>` n'a plus de sommet pour qui navigue aux
   titres. Le `<h1>` reste, en 1 px écrêté.

   ── UN JUMEAU ASSUMÉ, ET IL NE PEUT PAS EN ÊTRE AUTREMENT ────────────────
   `app.css` porte la même recette, avec son raisonnement complet (pourquoi ni
   `display: none` ni `visibility: hidden`, pourquoi `nowrap`). Ce n'est PAS le
   doublon que la disparition de `.flash` reprochait plus bas : ces deux
   feuilles ne sont jamais chargées ensemble — `layouts/plain` prend celle-ci,
   `layouts/app` prend l'autre — et le seul fichier commun, `tokens.css`, ne
   contient par contrat aucun sélecteur. Il n'y a donc pas d'endroit unique où
   la poser. La recette, elle, est figée depuis vingt ans : elle ne dérive pas,
   contrairement à un message éclair dont chaque côté ajustait la taille. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.auth-panel {
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface);
  padding: var(--space-5);
}

/* La carte qui ne porte qu'une phrase et un bouton (« ta coop se
   connecte par le Hub », « tu es déjà connecté·e »). Jamais celle qui
   porte des champs : une étiquette centrée au-dessus de son champ se
   lit mal, et le regard perd le bord gauche commun. */
.auth-panel.is-centered { text-align: center; }

/* ---------------------------------------------------------------
   Champs
   --------------------------------------------------------------- */

.field { margin-top: var(--space-4); }
.field:first-child { margin-top: 0; }

.field > label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--mil-fs-2);
}

.field input {
  width: 100%;
  min-height: 44px;                 /* cible tactile (§0, règle 9) */
  font: inherit;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  color: var(--c-text);
  transition: border-color var(--t-base), box-shadow var(--t-base);
}

.field input[readonly] { background: var(--c-surface-2); color: var(--c-text-mid); }

/* L'anneau de focus signature (§0, règle 7). */
.field input:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-soft);
}

.field-help {
  margin: var(--space-1) 0 0;
  font-size: var(--mil-fs-2);
  color: var(--c-text-mid);
}

.check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  margin-top: var(--space-2);
  font-size: var(--mil-fs-2);
  cursor: pointer;
}

.check input { width: 18px; height: 18px; accent-color: var(--c-accent); }

/* ---------------------------------------------------------------
   Actions
   --------------------------------------------------------------- */

/* Un SEUL primaire par zone d'action (§4). Ici c'est toujours celui-ci. */
.auth-submit,
.auth-cta {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-4);
  font: inherit;
  font-size: var(--mil-fs-3);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--c-accent);
  border-radius: var(--radius-sm);
  background: var(--c-accent);
  color: var(--c-on-accent);
  cursor: pointer;
  transition: background var(--t-fast);
}

.auth-submit:hover,
.auth-cta:hover { background: var(--c-accent-dark); border-color: var(--c-accent-dark); }

.auth-submit:focus-visible,
.auth-cta:focus-visible,
.auth-links a:focus-visible,
.auth-foot a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--c-accent-soft);
}

/* Press tactile (§2, mouvement). */
.auth-submit:active,
.auth-cta:active { transform: scale(0.98); }

.auth-links {
  margin: var(--space-4) 0 0;
  font-size: var(--mil-fs-2);
}

/* ---------------------------------------------------------------
   Les comptes externes (Google, Apple, Microsoft)
   ---------------------------------------------------------------
   Des SECONDAIRES, exprès : « Entrer » garde seul le dessin
   primaire (§4, un seul par zone), et ces boutons-ci empruntent la
   surface et la bordure d'un champ. Le logo est monochrome et suit
   `currentColor` — voir `partials/marques` pour la décision.

   Le séparateur écrit « ou » entre deux filets : sans lui, trois
   boutons sous un formulaire se lisent comme trois étapes de plus,
   pas comme un autre chemin vers la même porte.
   --------------------------------------------------------------- */

.auth-sso-sep {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
  font-size: var(--mil-fs-2);
  color: var(--c-text-mid);
}

.auth-sso-sep::before,
.auth-sso-sep::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--c-border);
}

.auth-sso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 44px;                 /* cible tactile (§0, règle 9) */
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-4);
  font: inherit;
  font-size: var(--mil-fs-3);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  color: var(--c-text);
  transition: background var(--t-fast);
}

.auth-sso:hover { background: var(--c-surface-2); }

.auth-sso:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--c-accent-soft);
}

/* Press tactile (§2, mouvement) — le même que les primaires. */
.auth-sso:active { transform: scale(0.98); }

.auth-sso svg { flex: 0 0 auto; }

.auth-links a {
  display: inline-block;
  padding: var(--space-2) 0;        /* de quoi viser au doigt */
  color: var(--c-accent);
}

/* ---------------------------------------------------------------
   Le pied de la porte
   ---------------------------------------------------------------
   La politique de confidentialité, et pour l'instant elle seule. Elle
   portait `class="muted"` — une classe d'`app.css`, que ces écrans-ci
   ne chargent pas : elle se dessinait donc en lien ordinaire, à la
   taille du texte courant, c'est-à-dire aussi appuyée que le bouton
   d'entrée juste au-dessus. Elle doit être lisible et trouvable, pas
   concurrente : c'est une chose qu'on lit AVANT d'entrer, pas la
   raison d'être de l'écran.

   L'accent est refusé exprès (§4 : un seul primaire par zone). Le
   soulignement porte donc seul le fait que c'est un lien — la couleur
   ne suffit jamais (§0, règle 8), et ici elle ne dit rien du tout.

   ── ET C'EST `--c-text-mid`, PAS `--c-text-muted` ────────────────
   Le jeton « estompé » est à 2,5:1 sur le fond de cet écran : c'est
   la teinte d'une mention qui accompagne un texte lisible ailleurs,
   pas celle d'un texte qu'on doit pouvoir lire seul. Un lien sous le
   plancher de 4,5:1 (WCAG 1.4.3 AA, §5) sur le seul document qu'on
   consulte AVANT de consentir serait une discrétion qui se retourne
   en obstacle. `--c-text-mid` tient 5,6:1 et se lit toujours comme
   un pied de page.
   --------------------------------------------------------------- */

.auth-foot {
  margin: var(--space-5) 0 0;
  text-align: center;
  font-size: var(--mil-fs-2);
  color: var(--c-text-mid);
}

.auth-foot a {
  display: inline-block;
  padding: var(--space-2);          /* de quoi viser au doigt */
  border-radius: var(--radius-sm);
  color: inherit;
}

.auth-foot a:hover { color: var(--c-text); }

/* ---------------------------------------------------------------
   Messages
   ---------------------------------------------------------------
   Jamais la couleur seule (§0, règle 8) : chaque état porte un signe,
   lisible en daltonien comme en niveaux de gris.
   --------------------------------------------------------------- */

/* `.flash` A VÉCU ICI, et sa disparition est le point de la tranche.

   C'était la DEUXIÈME copie de la même chose : `app.css` en portait une autre,
   et les deux avaient dérivé — celle-ci avait le cran 3 et `white-space:
   pre-line`, l'autre ni l'un ni l'autre. Le même message ne se lisait donc pas
   pareil selon qu'on était avant ou après la connexion, ce que personne ne
   pouvait voir puisque personne ne regarde les deux écrans côte à côte.

   Les deux arbitrages qu'elle portait ne sont pas perdus, ils ont déménagé
   dans `.toast-body` (`toasts.css`) avec leur raison : le cran 3 parce que sur
   un écran d'avant-connexion le message EST la page, et `pre-line` parce que
   certains messages portent une marche à suivre sur plusieurs lignes.

   Ce qui reste ici est `.field-errors`, qui n'a jamais été un message éclair :
   c'est ce qu'il faut corriger pour entrer. */

.field-errors {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-6);
  border: 1px solid var(--c-danger);
  border-radius: var(--radius);
  background: var(--c-danger-soft);
  color: var(--c-danger-text);
  /* 15 → 16 px, cran 3, même arbitrage que `.flash` : ce qu'on doit corriger
     pour entrer ne se lit pas plus petit que le formulaire à corriger. */
  font-size: var(--mil-fs-3);
}

.field-errors li + li { margin-top: var(--space-1); }

/* ---------------------------------------------------------------
   Le plan de contrôle
   ---------------------------------------------------------------
   CE QUI EN RESTE ICI : le jeton d'état d'une coop, l'indice sous un
   champ et l'horloge de la loi 25 — trois choses que la console et la
   PORTE de la console (`controlplane/login`, qui vit sur ce gabarit)
   emploient toutes les deux. La coquille de la console, ses cartes et
   sa barre sont dans `controlplane.css` depuis le 2026-08-19.

   L'état d'une coop ne passe JAMAIS par la couleur seule (§0, règle 8) :
   « suspendue » s'écrit en toutes lettres avec sa date, et la teinte ne
   fait que confirmer ce que le texte dit déjà.
   --------------------------------------------------------------- */

.cp-tag {
  display: inline-block;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius);
  padding: 0 var(--space-2);
  margin-left: var(--space-2);
  font-size: var(--mil-fs-1);
  font-weight: 400;
  color: var(--c-text-mid);
  vertical-align: middle;
}

.cp-tag.is-warn {
  border-color: var(--c-warning);
  background: var(--c-warning-soft);
  color: var(--c-warning-text);
}

.cp-hint {
  font-size: var(--mil-fs-1);
  color: var(--c-text-muted);
  margin-top: var(--space-2);
}

/* L'horloge de la loi 25. Sans date, ce n'est pas une ligne de plus dans la
   fiche : c'est un état, et il se lit comme tel. Le fond `warning` ne PORTE pas
   l'information (charte, règle 6) — la phrase le fait, et dit aussi la
   conséquence. */
.cp-clock {
  font-size: var(--mil-fs-1);
  color: var(--c-text-mid);
}

.cp-clock:has(strong) {
  border-left: 3px solid var(--c-warning);
  background: var(--c-warning-soft);
  color: var(--c-warning-text);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}

.cp-clock-why { display: block; margin-top: var(--space-1); }