/* Mire d'authentification — UNE feuille pour le carnet (app/index.html) et
   Studio (app/studio/index.html), servie à côté de politique-mot-de-passe.js
   et chargée de la même façon (`mire-auth.css` / `../mire-auth.css`).

   Décision produit (recette post-production du 2026-10-10) : la mire est la
   même dans les deux surfaces — marque, Google, séparateur, champs, bouton
   principal, « Mot de passe oublié ? », états, écran « Récupérer l'accès »,
   écran du nouveau mot de passe. Seul le CONTENEUR diffère : une page dans
   Studio, un calque modal dans le carnet (.mire-calque, en fin de fichier).

   Ses jetons sont les siens, posés sur .mire et non hérités de la page : le
   carnet prête ses variables au thème du voyage (--paper, --ink…), Studio a
   les siennes, et la mire ne doit dépendre d'aucune des deux. Les valeurs
   sont celles de DESIGN.md (Studio), clair et sombre ; rayons PP-UX-8 :
   3 px pour boutons et champs, 6 px pour la carte et les messages. Les polices Petrona et
   Archivo sont déclarées (@font-face) par les deux pages.

   Sélecteurs préfixés par `.mire` : les feuilles des pages ont des règles
   d'élément (input[type=email], h1, button…) qui l'emporteraient sinon. */

.mire,.mire-calque{
  --mire-paper:#F5F0E6; --mire-surface:#FCFAF5; --mire-ink:#15130F; --mire-ink-muted:#5C5749;
  --mire-line:#E2DAC9; --mire-line-fort:#948357; --mire-accent:#1F3A5F;
  --mire-fd:'Petrona',Georgia,serif;
  --mire-fb:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
}
@media (prefers-color-scheme:dark){
  .mire,.mire-calque{
    --mire-paper:#17150F; --mire-surface:#211E17; --mire-ink:#F3EFE5; --mire-ink-muted:#A09A89;
    --mire-line:#332F25; --mire-line-fort:#6E6754; --mire-accent:#9DB6D4;
  }
}

.mire{
  box-sizing:border-box;width:100%;max-width:380px;margin:0;padding:28px;
  display:flex;flex-direction:column;gap:14px;
  background:var(--mire-surface);color:var(--mire-ink);
  border:1px solid var(--mire-line);border-radius:6px;
  font-family:var(--mire-fb);font-size:15px;font-weight:400;line-height:1.5;text-align:left;
}
.mire *,.mire *::before,.mire *::after{box-sizing:border-box}
.mire [hidden]{display:none!important}
/* Ni la police ni la taille d'un contrôle ne viennent du navigateur : sans
   cela, un bouton sans règle propre (l'œil) passe en Arial 13 px. */
.mire button,.mire input{font-family:inherit;font-size:inherit}

.mire .mire-marque{
  margin:0;font-family:var(--mire-fd);font-size:22px;font-weight:600;line-height:1.25;
  letter-spacing:-.006em;text-align:center;color:var(--mire-ink);
}
.mire .mire-intro{margin:0;color:var(--mire-ink-muted);font-size:13px;font-weight:500;text-align:center}

.mire .mire-google{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  min-height:44px;margin:0;padding:0 18px;
  background:var(--mire-surface);color:var(--mire-ink);
  border:1px solid var(--mire-line-fort);border-radius:3px;
  font-family:var(--mire-fb);font-size:15px;font-weight:600;cursor:pointer;
}
.mire .mire-separateur{
  display:flex;align-items:center;gap:10px;margin:0;
  color:var(--mire-ink-muted);font-size:12px;font-weight:600;
}
.mire .mire-separateur::before,.mire .mire-separateur::after{content:"";flex:1;height:1px;background:var(--mire-line)}

.mire .mire-champ{display:flex;flex-direction:column;gap:5px;margin:0}
.mire .mire-champ label{font-family:var(--mire-fb);font-size:12px;font-weight:600;color:var(--mire-ink-muted)}
.mire .mire-cadre{position:relative;display:flex}
/* 16 px : en dessous, Safari iOS zoome au focus et garde le zoom ensuite. */
.mire .mire-saisie{
  display:block;width:100%;min-height:44px;margin:0;padding:0 12px;
  background:var(--mire-surface);color:var(--mire-ink);
  border:1px solid var(--mire-line-fort);border-radius:3px;box-shadow:none;
  -webkit-appearance:none;appearance:none;
  font-family:var(--mire-fb);font-size:16px;font-weight:400;line-height:1.3;
}
.mire .mire-cadre .mire-saisie{padding-right:48px}
.mire .mire-saisie::placeholder{color:var(--mire-ink-muted);opacity:1}
.mire .mire-saisie:focus{border-color:var(--mire-accent)}
.mire .mire-oeil{
  position:absolute;top:0;right:0;width:44px;height:44px;margin:0;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:none;border:0;border-radius:3px;color:var(--mire-ink-muted);cursor:pointer;
}
.mire .mire-oeil svg{width:18px;height:18px}
.mire .mire-oeil[aria-pressed="true"]{color:var(--mire-accent)}

.mire .mire-aide{margin:0;color:var(--mire-ink-muted);font-size:13px;font-weight:500}
/* Erreur comme succès : traitement neutre, le sens est porté par le texte
   (même règle que Studio, WCAG 3.3.1). */
.mire .mire-message{
  margin:0;padding:10px 12px;font-size:13px;font-weight:600;color:var(--mire-ink);
  background:var(--mire-surface);border:1px solid var(--mire-line);border-radius:6px;
}

.mire .mire-principal{
  width:100%;min-height:44px;margin:0;padding:0 18px;
  background:var(--mire-accent);color:var(--mire-paper);border:0;border-radius:3px;
  font-family:var(--mire-fb);font-size:15px;font-weight:600;cursor:pointer;
}
.mire .mire-lien{
  align-self:center;min-height:44px;margin:-6px 0 -10px;padding:0 8px;
  background:none;border:0;color:var(--mire-ink-muted);
  font-family:var(--mire-fb);font-size:13px;font-weight:500;
  text-decoration:underline;text-underline-offset:2px;cursor:pointer;
}
.mire button:disabled{opacity:.55;cursor:default}

.mire :focus-visible{outline:2px solid var(--mire-accent);outline-offset:2px}
.mire .mire-principal:focus-visible{outline-color:var(--mire-paper);outline-offset:-4px}

/* --- Conteneur du carnet : la mire dans un calque modal ------------------
   Studio la pose dans sa page (#ecran-connexion) ; le carnet l'ouvre
   par-dessus le voyage. Seul ce cadre, et le bouton de fermeture, diffèrent. */
.mire-calque{
  position:fixed;inset:0;z-index:60;overflow-y:auto;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(21,19,15,.45);
}
.mire-calque .mire-boite{position:relative;width:100%;max-width:380px;margin:auto}
.mire-calque .mire{box-shadow:0 8px 24px rgba(21,19,15,.2)}
.mire-calque .mire-fermer{
  position:absolute;top:6px;right:6px;z-index:1;width:44px;height:44px;margin:0;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:none;border:0;border-radius:3px;color:var(--mire-ink-muted);cursor:pointer;
}
.mire-calque .mire-fermer svg{width:16px;height:16px}
.mire-calque .mire-fermer:focus-visible{outline:2px solid var(--mire-accent);outline-offset:-2px}