/* L'ECRAN DE CONNEXION — le theme clair de PVOS Pro, 19/09/2026.
 *
 * Il remplace la colonne encre d'« Encre & Menthe » : meme theme que le
 * bureau, memes jetons (`pvos-jetons.css`, charge juste avant cette feuille
 * par `web_include_css`), memes composants — fond de page clair, une carte
 * blanche, le logotype sur fond clair, Inter (servie par le paquet du site du
 * cadre), des champs a bord lisible et une action principale sarcelle.
 *
 * Ce fichier part avec `web_include_css` : il est servi sur TOUTES les pages du
 * SITE (pas le bureau). Chaque regle est donc cantonnee a `data-path="login"`
 * — l'attribut que le cadre pose lui-meme sur le corps de la page de connexion.
 *
 * L'ATTRIBUT EST REPETE TROIS FOIS, ET CE N'EST PAS UNE COQUILLE. Mesure du
 * 17/09/2026 : `login.bundle.css` du cadre ecrit
 * `.for-login .page-card .page-card-actions .btn-login` — QUATRE classes — et
 * il est charge APRES cette feuille. Trois repetitions portent la garde a
 * (0,3,1) : toute regle de ce fichier passe devant le cadre sans `!important`.
 *
 * /update-password porte un AUTRE `data-path` : il n'est pas touche.
 *
 * LES CIBLES FONT 44 px, A TOUTES LES LARGEURS. Au bureau les champs font 32 :
 * ici l'ecran ne porte que deux champs et deux gestes, on le tape parfois au
 * telephone, et 44 est le jeton `--pv-touch` — aucune valeur nouvelle.
 */

body[data-path="login"][data-path="login"][data-path="login"] {
  margin: 0;
  background: var(--pv-canvas);
  font-family: var(--pv-font);
  font-size: var(--pv-fs-body);
  line-height: var(--pv-lh-body);
  font-weight: 400;
  color: var(--pv-text);
  letter-spacing: 0;
}

/* Le chrome du site (fil, en-tete, pied) n'a rien a faire sur cet ecran. */
body[data-path="login"][data-path="login"][data-path="login"] .page-breadcrumbs,
body[data-path="login"][data-path="login"][data-path="login"] .page-header-wrapper,
body[data-path="login"][data-path="login"][data-path="login"] footer,
body[data-path="login"][data-path="login"][data-path="login"] .web-footer { display: none; }

body[data-path="login"][data-path="login"][data-path="login"] .page-content-wrapper,
body[data-path="login"][data-path="login"][data-path="login"] main.container,
body[data-path="login"][data-path="login"][data-path="login"] .page_content {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* La page : la marque, puis la carte, centrees sur le fond clair. */
body[data-path="login"][data-path="login"][data-path="login"] .page_content > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--pv-6);
  min-height: 100vh;
  padding: var(--pv-8) var(--pv-4);
  box-sizing: border-box;
}

/* La marque — le logotype sur fond CLAIR (charte § 4.6) et la signature. */
body[data-path="login"][data-path="login"][data-path="login"] .pvos-cx-marque {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pv-2);
  padding: 0;
  background: transparent;
}
/* ★ 72 px, ET LE CHIFFRE VIENT DE LA SECONDE LIGNE — 22/09/2026.
   La piece est le LOCKUP ENDOSSE (`pvos-lockup-endosse-v3.svg`), pas le mot seul :
   viewBox 5637,125 x 1718,25, rapport 3,28, capitale 725. Les 28 px d'avant
   mesuraient une boite QUI ETAIT la capitale ; ici la capitale n'en est que
   0,422, et « BY H2A GROUP » 0,111. A 28 px l'endossement ferait 3,1 px.
   A 72 px : capitale 30,4 px, endossement 8,0 px, largeur 236 px — la carte
   de connexion en offre 400. `max-width` borne malgre tout, pour le telephone
   en paysage, et `object-fit: contain` interdit l'etirement (§ 4.7). */
body[data-path="login"][data-path="login"][data-path="login"] .pvos-cx-logo--bandeau {
  display: block;
  height: 72px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
body[data-path="login"][data-path="login"][data-path="login"] .pvos-cx-signature {
  margin: 0;
  font: 400 var(--pv-fs-dense)/var(--pv-lh-dense) var(--pv-font);
  color: var(--pv-text-3);
  text-align: center;
}
body[data-path="login"][data-path="login"][data-path="login"] .pvos-cx-point { color: var(--pv-brand); font-weight: 600; }

/* La carte. Les sections soeurs (mot de passe oublie, lien par courriel)
   vivent dans la meme page, cachees par le cadre : elles prennent la meme. */
body[data-path="login"][data-path="login"][data-path="login"] section[class^="for-"],
body[data-path="login"][data-path="login"][data-path="login"] section[class*=" for-"] {
  width: 100%;
  max-width: 400px;
  padding: 0;
  background: transparent;
  box-sizing: border-box;
}
/* Le cadre cache une section par un style EN LIGNE ; une regle de feuille ne
   bat un style en ligne qu'avec `!important`. */
body[data-path="login"][data-path="login"][data-path="login"] section[style*="display: none"] { display: none !important; }
body[data-path="login"][data-path="login"][data-path="login"] .login-content.page-card {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: var(--pv-8);
  box-sizing: border-box;
  background: var(--pv-surface);
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius-lg);
  box-shadow: none;
}

body[data-path="login"][data-path="login"][data-path="login"] .page-card-head .app-logo { display: none; }
body[data-path="login"][data-path="login"][data-path="login"] .page-card-head { margin: 0 0 var(--pv-6); padding: 0; text-align: left; }
body[data-path="login"][data-path="login"][data-path="login"] .page-card-head-text { margin: 0; }
body[data-path="login"][data-path="login"][data-path="login"] .page-card-head h4 {
  margin: 0;
  font: 600 var(--pv-fs-title)/var(--pv-lh-title) var(--pv-font);
  letter-spacing: 0;
  color: var(--pv-text);
}
body[data-path="login"][data-path="login"][data-path="login"] .page-card-subtitle {
  margin: var(--pv-1) 0 0;
  font: 400 var(--pv-fs-body)/var(--pv-lh-body) var(--pv-font);
  color: var(--pv-text-2);
}
body[data-path="login"][data-path="login"][data-path="login"] .page-card-body { padding: 0; }

/* Les champs — ceux du bureau : bord lisible (3,15:1), anneau de marque.
   `input.form-control` et non `.form-control` : `login.bundle.css` (charge
   APRES) ecrit `.for-login .page-card .page-card-body input[type="text"]` et
   `.email-field input` — (0,4,1), le poids exact de la garde triple ; a
   egalite, le dernier gagne, et les champs restaient a 28 px, retires de
   38 px pour une icone cachee (mesure du 19/09/2026). L'element ajoute
   porte la garde a (0,4,2). */
body[data-path="login"][data-path="login"][data-path="login"] .form-group { margin: 0 0 var(--pv-4); }
body[data-path="login"][data-path="login"][data-path="login"] .form-label {
  display: block;
  margin: 0 0 6px;
  font: 500 var(--pv-fs-dense)/var(--pv-lh-dense) var(--pv-font);
  color: var(--pv-text-2);
}
body[data-path="login"][data-path="login"][data-path="login"] .email-field,
body[data-path="login"][data-path="login"][data-path="login"] .password-field { position: relative; }
body[data-path="login"][data-path="login"][data-path="login"] .field-icon.email-icon,
body[data-path="login"][data-path="login"][data-path="login"] .field-icon.password-icon { display: none; }
body[data-path="login"][data-path="login"][data-path="login"] input.form-control {
  width: 100%;
  height: var(--pv-touch);
  padding: 0 12px;
  box-sizing: border-box;
  border: 1px solid var(--pv-border-input);
  border-radius: var(--pv-radius-sm);
  background: var(--pv-surface);
  font: 400 var(--pv-fs-body)/var(--pv-lh-body) var(--pv-font);
  color: var(--pv-text);
  box-shadow: none;
  transition: border-color var(--pv-motion) var(--pv-ease), box-shadow var(--pv-motion) var(--pv-ease);
}
body[data-path="login"][data-path="login"][data-path="login"] .password-field input.form-control { padding-right: var(--pv-touch); }
body[data-path="login"][data-path="login"][data-path="login"] input.form-control::placeholder { color: var(--pv-text-3); opacity: 1; }
body[data-path="login"][data-path="login"][data-path="login"] input.form-control:hover { border-color: #6b737d; }
body[data-path="login"][data-path="login"][data-path="login"] input.form-control:focus,
body[data-path="login"][data-path="login"][data-path="login"] input.form-control:focus-visible {
  outline: none;
  border-color: var(--pv-focus);
  box-shadow: 0 0 0 1px var(--pv-focus);
}
/* L'oeil du mot de passe : une cible de 44 px, dessinee en 16. */
body[data-path="login"][data-path="login"][data-path="login"] .toggle-password {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--pv-text-3);
  cursor: pointer;
}
body[data-path="login"][data-path="login"][data-path="login"] .field-error {
  margin: var(--pv-1) 0 0;
  font: 400 var(--pv-fs-small)/var(--pv-lh-small) var(--pv-font);
  color: var(--pv-danger);
}

/* Les gestes : l'action principale sarcelle, la seconde blanche. */
body[data-path="login"][data-path="login"][data-path="login"] .page-card-actions {
  display: flex;
  flex-direction: column;
  gap: var(--pv-3);
  margin: var(--pv-6) 0 0;
  padding: 0;
}
body[data-path="login"][data-path="login"][data-path="login"] .page-card-actions .btn,
body[data-path="login"][data-path="login"][data-path="login"] .sign-up-message .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--pv-touch);
  padding: 0 var(--pv-4);
  margin: 0;
  box-sizing: border-box;
  border-radius: var(--pv-radius-sm);
  font: 500 var(--pv-fs-body)/20px var(--pv-font);
  letter-spacing: 0;
  text-decoration: none;
  box-shadow: none;
  transition: background-color var(--pv-motion) var(--pv-ease), border-color var(--pv-motion) var(--pv-ease);
}
body[data-path="login"][data-path="login"][data-path="login"] .btn-login,
body[data-path="login"][data-path="login"][data-path="login"] .page-card-actions .btn-primary {
  border: 1px solid var(--pv-brand);
  background: var(--pv-brand);
  color: #ffffff;
}
body[data-path="login"][data-path="login"][data-path="login"] .btn-login:hover,
body[data-path="login"][data-path="login"][data-path="login"] .page-card-actions .btn-primary:hover {
  border-color: var(--pv-brand-hover);
  background: var(--pv-brand-hover);
  color: #ffffff;
}
body[data-path="login"][data-path="login"][data-path="login"] .btn-login-option,
body[data-path="login"][data-path="login"][data-path="login"] .page-card-actions .btn-default:not(.btn-login),
body[data-path="login"][data-path="login"][data-path="login"] .sign-up-message .btn {
  border: 1px solid var(--pv-border-strong);
  background: var(--pv-surface);
  color: var(--pv-text);
}
body[data-path="login"][data-path="login"][data-path="login"] .btn-login-option:hover,
body[data-path="login"][data-path="login"][data-path="login"] .page-card-actions .btn-default:not(.btn-login):hover,
body[data-path="login"][data-path="login"][data-path="login"] .sign-up-message .btn:hover {
  border-color: #b9c0c8;
  background: var(--pv-surface-3);
  color: var(--pv-text);
}
body[data-path="login"][data-path="login"][data-path="login"] .page-card-actions .btn:focus-visible,
body[data-path="login"][data-path="login"][data-path="login"] .sign-up-message .btn:focus-visible {
  outline: 2px solid var(--pv-focus);
  outline-offset: 2px;
}
body[data-path="login"][data-path="login"][data-path="login"] .page-card-actions .btn[disabled] { opacity: .5; }

/* Les liens : sarcelle fonce, soulignes. */
body[data-path="login"][data-path="login"][data-path="login"] .forgot-password-message { margin: var(--pv-2) 0 0; text-align: right; }
body[data-path="login"][data-path="login"][data-path="login"] .forgot-password-message a,
body[data-path="login"][data-path="login"][data-path="login"] .sign-up-message a:not(.btn),
body[data-path="login"][data-path="login"][data-path="login"] .page-card-body a {
  display: inline-block;
  padding: 12px 0;
  margin: -12px 0;
  font: 400 var(--pv-fs-dense)/var(--pv-lh-dense) var(--pv-font);
  color: var(--pv-brand-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
body[data-path="login"][data-path="login"][data-path="login"] .forgot-password-message a:focus-visible,
body[data-path="login"][data-path="login"][data-path="login"] .page-card-body a:focus-visible {
  outline: 2px solid var(--pv-focus);
  outline-offset: 2px;
  border-radius: 2px;
}
body[data-path="login"][data-path="login"][data-path="login"] .sign-up-message {
  margin: var(--pv-4) 0 0;
  text-align: center;
  font: 400 var(--pv-fs-dense)/var(--pv-lh-dense) var(--pv-font);
  color: var(--pv-text-2);
}

/* Les messages : un fond pastel et le mot, comme les etats du bureau. */
body[data-path="login"][data-path="login"][data-path="login"] .login-error-banner {
  display: none;
  align-items: flex-start;
  gap: var(--pv-2);
  margin: 0 0 var(--pv-4);
  padding: var(--pv-2) var(--pv-3);
  border: 1px solid #f6c7c1;
  border-radius: var(--pv-radius-md);
  background: var(--pv-danger-soft);
  font: 400 var(--pv-fs-dense)/var(--pv-lh-dense) var(--pv-font);
  color: var(--pv-danger);
}
/* Le cadre montre la banniere par un style EN LIGNE (`display: flex|block`). */
body[data-path="login"][data-path="login"][data-path="login"] .login-error-banner[style*="flex"],
body[data-path="login"][data-path="login"][data-path="login"] .login-error-banner[style*="block"] { display: flex !important; }
body[data-path="login"][data-path="login"][data-path="login"] .login-success-banner {
  align-items: flex-start;
  gap: var(--pv-2);
  margin: 0 0 var(--pv-4);
  padding: var(--pv-2) var(--pv-3);
  border: 1px solid #c4e5cf;
  border-radius: var(--pv-radius-md);
  background: var(--pv-success-soft);
  font: 400 var(--pv-fs-dense)/var(--pv-lh-dense) var(--pv-font);
  color: var(--pv-text);
}
body[data-path="login"][data-path="login"][data-path="login"] .signup-disabled-message .indicator {
  font: 500 var(--pv-fs-small)/var(--pv-lh-small) var(--pv-font);
  color: var(--pv-text);
}

@media (max-width: 767.98px) {
  body[data-path="login"][data-path="login"][data-path="login"] .page_content > div { justify-content: flex-start; padding-top: var(--pv-8); }
  body[data-path="login"][data-path="login"][data-path="login"] .login-content.page-card { padding: var(--pv-6) var(--pv-4); }
}

@media (prefers-reduced-motion: reduce) {
  body[data-path="login"][data-path="login"][data-path="login"] * { transition: none !important; }
}