/* ── Targa'micale · l'écran de connexion ─────────────────────────────────────
   wp-login.php, brought onto the brand.

   Why this surface and not a template of our own: every screen the club has
   added to the login flow — le lien par courriel and its confirmation, the
   enrolment TOTP, les codes de secours, la demande de code, le bouton clé
   d'accès — is drawn through login_header() / login_footer(), as are
   WordPress's own « mot de passe oublié » and « réinitialiser ». Styling here
   brings all eight onto the brand at once. A bespoke page would have dressed
   one and left seven looking like stock WordPress.

   Everything is tokens. The plugin's own blocks on this page read the same
   custom properties, with hard-coded fallbacks, so switching the theme off
   leaves them plain rather than broken.
   ────────────────────────────────────────────────────────────────────────── */

body.login {
  background: var(--paper-100);
  color: var(--ink-700);
  font-family: var(--font-body);
  /* WordPress centres by padding the body; the card is placed properly instead. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 32px 16px;
  margin: 0;
}

/* La colonne : la carte, et rien d'autre. « Pas encore membre ? » et le
   sélecteur de langue de WordPress sont partis — voir `inc/login.php` — donc il
   n'y a plus d'ordre à rétablir. */
body.login #login { width: 100%; max-width: 25rem; padding: 0; margin: 0; }

/* ── The navy band, and the logo standing on it ───────────────────────────── */

/* WordPress's h1 holds the W logo as a background image on an anchor. Both are
   replaced: the mark becomes the club's, and the heading becomes the band. */
body.login h1.wp-login-logo,
body.login #login h1 {
  background: var(--navy-800);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  margin: 0;
  padding: 26px 30px;
  /* Flex, not text-align: an inline-flex anchor sits on a text baseline and
     carries a descender's worth of navy under it that no padding explains. */
  display: flex;
  justify-content: center;
  line-height: 0;
}

body.login #login h1 a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  /* The logo sits on a paper chip, as the design kit draws it: the mark is
     navy and gold, and neither reads on a navy ground. */
  padding: 12px 18px;
  background: var(--paper-0);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  background-image: none;
  text-indent: 0;
  overflow: visible;
  font-size: 0;
  line-height: 0;
  /* WordPress pose `margin: 0 auto 25px` sur ce lien : sans ce zéro le bandeau
     portait 24 px de plus sous le cadre qu'au-dessus, et le logo paraissait
     collé en haut. Trouvé 2026-09-27. */
  margin: 0;
}

/* Un logo clair se pose sans pastille, comme dans le tiroir. */
body.login.tgc-login-logo-bare #login h1 a {
  padding: 0;
  background: none;
  box-shadow: none;
}

body.login #login h1 a::after {
  content: '';
  display: block;
  /* The mark is all but square (1500 × 1302), so it is sized on its height
     rather than given a wordmark's letterbox. */
  width: 84px;
  height: 73px;
  background: var(--tgc-login-logo) center / contain no-repeat;
}

/* When the welcome follows, the band is one block and the mark should sit
   closer to its line than to the card below. Without a welcome the padding
   stays even, which is why this is a :has() and not a smaller default. */
body.login #login h1:has(+ .tgc-login-welcome) { padding-bottom: 16px; }

/* « Bienvenue à bord ». Printed by the theme into the band, so it belongs to
   the navy rather than floating above the fields. */
body.login .tgc-login-welcome {
  background: var(--navy-800);
  margin: 0;
  padding: 0 30px 24px;
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--navy-200);
}

/* ── The card ─────────────────────────────────────────────────────────────── */

/* `#login > form` and not `form`: the club's own screens put a form *inside*
   their block, and carding every form on the page drew a second white box with
   its own shadow around the one button in it. */
body.login #login > form,
body.login #login > .tgc-2fa {
  background: var(--surface-card, var(--paper-0));
  border: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-lg);
  margin: 0 0 20px;
  padding: 26px 30px 30px;
}

/* Anything nested inside is part of that card, not another one. */
body.login .tgc-2fa form {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  padding: 0;
}

/* A message or an error takes the top of the card, so the band stays whole. */
body.login #login .message,
body.login #login .success,
body.login #login #login_error {
  background: var(--paper-50);
  border: 0;
  border-left: 3px solid var(--navy-600);
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  padding: 14px 30px;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ink-700);
}

body.login #login #login_error {
  border-left-color: var(--gold-500);
  background: var(--gold-100);
  color: var(--navy-800);
}

/* The band, any notice and the card are one stack: no gaps between them, or a
   notice reads as a slab floating above a separate card. */
body.login #login .message + form,
body.login #login .message + .tgc-2fa,
body.login #login .success + form,
body.login #login #login_error + form,
body.login #login #login_error + .tgc-2fa {
  margin-top: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ── Fields ───────────────────────────────────────────────────────────────── */

body.login label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-500);
}

body.login input[type='text'],
body.login input[type='email'],
body.login input[type='password'],
body.login input[type='tel'] {
  width: 100%;
  padding: 11px 13px;
  background: var(--paper-0);
  border: 1px solid var(--paper-300);
  border-radius: var(--radius-sm);
  box-shadow: none;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink-900);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

body.login input[type='text']:focus,
body.login input[type='email']:focus,
body.login input[type='password']:focus,
body.login input[type='tel']:focus {
  border-color: var(--navy-600);
  box-shadow: 0 0 0 3px var(--navy-100);
  outline: none;
}

/* Voir la règle du thème : un texte indicatif se lit. */
body.login input::placeholder { color: var(--ink-500); }

body.login .login .password-input-wrapper { display: block; }

/* Inside the field, not beside it: it is a control on the input, and a box of
   its own reads as a second button competing with the one below. */
body.login .wp-hide-pw {
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--ink-500);
  right: 2px;
  height: 100%;
}

body.login .wp-hide-pw:hover,
body.login .wp-hide-pw:focus { color: var(--navy-700); }

/* `#login` in the selector, not for tidiness: WordPress styles these as
   `#login form p`, and an id beats any number of classes. Without it the
   paragraph margins here compute to zero and every field touches the next. */
body.login #login .forgetmenot { margin: 18px 0 0; }

body.login .forgetmenot label {
  display: inline-block;
  margin: 0 0 0 6px;
  font-size: 0.85rem;
  color: var(--ink-500);
}

/* Fields need air between them; WordPress relies on its own <p> margins and
   the card's padding, both of which have been replaced. */
body.login #login form > p { margin: 0 0 18px; }
body.login #login form > p:last-child { margin-bottom: 0; }

body.login input[type='checkbox'] {
  border: 1px solid var(--paper-400);
  border-radius: var(--radius-xs);
  background: var(--paper-0);
  width: 17px;
  height: 17px;
}

body.login input[type='checkbox']:checked {
  background: var(--navy-800);
  border-color: var(--navy-800);
}

body.login input[type='checkbox']:checked::before {
  content: '';
  display: block;
  margin: 3px 0 0 1px;
  width: 12px;
  height: 12px;
  background: none;
  border-right: 2px solid var(--paper-0);
  border-bottom: 2px solid var(--paper-0);
  transform: rotate(45deg) scale(0.62);
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */

/* Gold is the single accent, so exactly one button carries it: the highest
   intent on whatever screen this is. Everything else is an outline. */
body.login .button-primary {
  width: 100%;
  float: none;
  display: block;
  padding: 12px 20px;
  background: var(--gold-500);
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  /* Navy on gold: gold does not carry white text at this size. */
  color: var(--navy-800);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  text-shadow: none;
  transition: background-color 120ms ease, transform 120ms ease;
}

body.login .button-primary:hover,
body.login .button-primary:focus {
  background: var(--gold-400);
  color: var(--navy-800);
  box-shadow: var(--shadow-md);
}

body.login .button-primary:active { transform: translateY(1px); }

body.login #login .submit,
body.login #login p.submit { margin: 18px 0 0; padding: 0; }

/* The passkey button and the language switcher's « Modifier »: outlined, so
   the gold above them stays the one thing being pointed at. */
body.login .button:not(.button-primary):not(.wp-hide-pw) {
  padding: 11px 18px;
  background: var(--paper-0);
  border: 1px solid var(--navy-800);
  border-radius: var(--radius-sm);
  box-shadow: none;
  color: var(--navy-800);
  font-family: var(--font-body);
  font-weight: 600;
  line-height: 1.2;
  height: auto;
}

body.login .button:not(.button-primary):not(.wp-hide-pw):hover,
body.login .button:not(.button-primary):not(.wp-hide-pw):focus {
  background: var(--navy-50);
  border-color: var(--navy-700);
  color: var(--navy-800);
}

/* ── La clé d'accès, sous le bouton du lien ──────────────────────────────── */

body.login .tgc-passkey { border-top-color: var(--paper-300); }

/* `--danger-600` n'existe pas ; le rouge posé sur du clair est `--red-700`. */
body.login .tgc-passkey__msg { color: var(--red-700, #A93226); }

/* ── Under the card ───────────────────────────────────────────────────────── */

body.login #nav,
body.login #backtoblog {
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 0.82rem;
}

body.login #nav { margin-bottom: 8px; }
body.login #backtoblog { margin-bottom: 18px; }

body.login #nav a,
body.login #backtoblog a {
  color: var(--ink-500);
  text-decoration: none;
}

body.login #nav a:hover,
body.login #nav a:focus,
body.login #backtoblog a:hover,
body.login #backtoblog a:focus {
  color: var(--navy-700);
  text-decoration: underline;
}


/* ── The club's own screens ───────────────────────────────────────────────── */

/* The second factor prints its own layout; only its surface needs bringing
   over, and it carries token fallbacks of its own. It sets a top margin for
   the unstyled case, which here would open a seam under the notice. */
body.login .tgc-2fa { margin-top: 0; color: var(--ink-700); }

body.login .tgc-2fa__steps li { color: var(--ink-700); }
body.login .tgc-2fa__manual { color: var(--ink-500); }
body.login .tgc-2fa__manual code {
  font-family: var(--font-mono);
  color: var(--navy-800);
}

body.login .tgc-2fa__codes {
  font-family: var(--font-mono);
  color: var(--navy-800);
}

body.login .tgc-2fa__qr svg { border-radius: var(--radius-sm); }

body.login #tgc_code {
  font-family: var(--font-mono);
  color: var(--navy-800);
}

/* ── Interim login: WordPress reuses this screen inside a small popup ─────── */

body.login.interim-login {
  display: block;
  min-height: 0;
  padding: 0;
}

body.login.interim-login #login { max-width: none; }

/* ── Narrow screens ───────────────────────────────────────────────────────── */

@media (max-width: 30rem) {
  body.login { padding: 0; justify-content: flex-start; }
  body.login #login { max-width: none; }
  body.login #login h1,
  body.login .tgc-login-welcome { border-radius: 0; }
  body.login #login > form,
  body.login #login > .tgc-2fa { border-radius: 0; padding: 22px 20px 26px; }
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  body.login .button-primary,
  body.login input { transition: none; }
  body.login .button-primary:active { transform: none; }
}

/* ── Maintenance ─────────────────────────────────────────────────────────────
 *
 * Le club annonce ses travaux **avant** qu'on essaie. La règle « les gardes
 * tournent à l'usage, pas à la demande » existe pour ne pas répondre « cette
 * adresse est-elle du club ? » ; ici la réponse est la même pour tout le monde,
 * donc l'annoncer ne distingue personne.
 *
 * `#login` dans le sélecteur : WordPress habille cet écran par identifiant, et
 * une classe seule y perd — c'est le piège que ce fichier documente déjà.
 */
#login .tgc-login-notice {
  margin: 0 0 20px;
  padding: 14px 16px;
  border-radius: var(--radius-md, 10px);
  background: var(--gold-100);
  border-left: 3px solid var(--gold-500);
}

#login .tgc-login-notice p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--navy-900);
}

#login .tgc-login-notice p + p {
  margin-top: 5px;
  color: var(--ink-700);
}