/*
 * Login screen shell (C1 lot 1).
 *
 * Dresses the NATIVE wp-login.php, never replaces it. This lot is LAYOUT ONLY :
 * no native text, label, link, checkbox or control is touched, nothing native is
 * hidden (p#nav and p#backtoblog keep rendering), and no field anatomy work is
 * done here (that is lot 2a).
 *
 * ACTION NEUTRAL : every rule below targets the page frame (body geometry, the
 * #login column width, the decorative half) and never a form internal, so
 * ?action=lostpassword and ?action=rp keep their own markup and behavior.
 *
 * INTERIM LOGIN EXCLUDED : the :not(.interim-login) guard leaves the small
 * "session expired" iframe WordPress renders inside wp-admin untouched. A 50/50
 * full-viewport split inside that box would be broken by construction.
 *
 * TOKEN BLOCK SPECIFICITY : the token block is declared on .pe-login (0,1,0),
 * the SAME selector the PHP inline style uses, so the configured primary color
 * printed after this sheet wins on source order. This mirrors the canvases
 * exactly (.pe-public in public-shell.css, .pe-extranet in extranet.css). Do NOT
 * raise it to body.pe-login : that would silently pin the color to the default.
 */

.pe-login {
  /* Brand token, copied verbatim from assets/css/front.css :root (front.css
     never loads on this screen). Overridden at runtime by the inline style. */
  --portailetu-primary: #1F82C0;

  /* Spacing scale, copied verbatim from assets/css/front.css :root.
     space-8 = 48px = the charte's 3rem page padding ; space-6 = 24px = its
     1.5rem compact padding. Same values, taken from the scale rather than
     re-typed as literals. */
  --portailetu-space-1: 4px;
  --portailetu-space-2: 8px;
  --portailetu-space-4: 16px;
  --portailetu-space-6: 24px;
  --portailetu-space-8: 48px;

  /* Accent hover, copied verbatim from assets/css/front.css :root. Consumed by
     the CTA pill only. */
  --portailetu-primary-hover: #17669a;

  /* Radius + type scale steps consumed by lot 2a, copied verbatim from
     assets/css/front.css :root. */
  --portailetu-radius-sm: 4px;
  --portailetu-radius-md: 8px;
  --portailetu-radius-pill: 999px;
  --portailetu-text-xl-size: 24px;
  --portailetu-text-xl-line: 32px;
  --portailetu-text-xl-weight: 600;
  --portailetu-text-base-size: 14px;
  --portailetu-text-base-line: 20px;
  --portailetu-text-sm-size: 13px;
  --portailetu-text-xs-size: 12px;
  --portailetu-text-xs-line: 16px;
  --portailetu-text-2xs-size: 11px;
  --portailetu-text-2xs-line: 14px;

  /* Integrated-label field tokens, copied verbatim from assets/css/front.css
     :root. They are the source of truth for the field skin below : the two
     login fields adopt the SAME anatomy as the public application form.
     --portailetu-field-ring-focus is deliberately copied as-is, i.e. pinned to
     the DEFAULT accent rather than derived from --portailetu-primary — exactly
     as front.css declares it. Changing that here would fork the pattern. */
  --portailetu-field-surface: #fff;
  --portailetu-field-border: #dcdcde;
  --portailetu-field-border-locked: #f0f0f1;
  --portailetu-field-label: #646970;
  --portailetu-field-text: #1d2327;
  --portailetu-field-muted: #8c8f94;
  --portailetu-field-error: #b32d2e;
  --portailetu-field-ring-focus: rgba(31, 130, 192, 0.15);
  --portailetu-field-ring-error: rgba(179, 45, 46, 0.12);

  /* Chrome role tokens, copied verbatim from assets/css/public-shell.css
     (.pe-public block), which itself mirrors assets/css/extranet.css. */
  --portailetu-shell-surface: #fff;
  --portailetu-shell-muted: #646970;
  --portailetu-shell-accent: var(--portailetu-primary);

  /* Screen-local geometry (charte écrans validés v1.0 §6). NEW values, not
     copied : no existing token carries them. Same discipline as
     --portailetu-public-rail-w in public-shell.css. */
  --portailetu-login-col-w: 21.25rem;
  --portailetu-login-accent-h: 120px;
}

/*
 * Page frame : two strict halves. The native stack (div#login, the language
 * switcher, the privacy link when present) lives in the LEFT half and is
 * centered on both axes ; the right half is reserved by padding and painted by
 * the decorative element below, which is out of flow so it can never disturb
 * the native children whatever WordPress adds between them.
 */
body.pe-login:not(.interim-login) {
  box-sizing: border-box;
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--portailetu-space-8);
  /* Right half reserved : half the viewport plus the same 48px page padding. */
  padding-right: calc(50% + var(--portailetu-space-8));
  background: var(--portailetu-shell-surface);
}

/*
 * The form column, forced to a fixed 16.25rem (260px) and centered by the
 * parent's align-items. Only geometry is set : the inner markup WordPress
 * prints inside #login is left exactly as it is. The core padding (8% top) and
 * margin (auto) are zeroed because the centering now belongs to the frame.
 */
body.pe-login:not(.interim-login) #login {
  width: var(--portailetu-login-col-w);
  max-width: 100%;
  padding: 0;
  margin: 0;
}

/*
 * Right accent half. Empty and aria-hidden : decorative only, injected on
 * login_footer (the one hook that fires as a direct child of <body>, after the
 * #login column closes). position: fixed keeps it out of the flex flow.
 * The texture is a fixed-opacity white overlay on the accent, so it holds
 * whatever primary color is configured.
 */
body.pe-login:not(.interim-login) .pe-login__accent {
  position: fixed;
  inset: 0 0 0 50%;
  background-color: var(--portailetu-shell-accent);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.05) 0 12px,
    rgba(255, 255, 255, 0) 12px 24px
  );
}

/*
 * Below 900px the split stops being readable : the accent becomes a 120px band
 * pinned at the top, the form column keeps its 260px and stays centered, and
 * the page padding drops to 24px. The top padding also clears the band, so the
 * centered stack never slides underneath it.
 */
@media (max-width: 899px) {
  body.pe-login:not(.interim-login) {
    padding: var(--portailetu-space-6);
    padding-top: calc(var(--portailetu-login-accent-h) + var(--portailetu-space-6));
  }

  body.pe-login:not(.interim-login) .pe-login__accent {
    inset: 0 0 auto 0;
    height: var(--portailetu-login-accent-h);
  }
}

/* =====================================================================
 * C1 lot 2a — left column anatomy : brand, title block, field skin, CTA.
 *
 * FIELD PATTERN SOURCE : the two login fields adopt the label-INSIDE-the-box
 * anatomy of the public application form (.portailetu-field-box, rendered by
 * Form_Shortcodes and styled in assets/css/front.css lines 195-315). Every
 * geometry, color and state value below is copied from that block — it is the
 * source of truth, not a look-alike. Markup is NOT touched : the native
 * paragraph / .user-pass-wrap becomes the box, the native <label> becomes the
 * small inside label, the native <input> goes borderless. No placeholder, no
 * asterisk, no JS.
 *
 * ACTION NEUTRALITY : the field rules key off structure, never off an action
 * class, so ?action=lostpassword inherits the exact same skin through the same
 * shared markup. p.forgetmenot, p#nav, p#backtoblog, the language switcher and
 * the error rendering are deliberately left alone (later lots).
 * ===================================================================== */

/* --- Brand row -------------------------------------------------------
   Core paints the WordPress mark as a background image on an 84px square with
   text-indent:-9999px and overflow:hidden. Each of those declarations is reset
   here so the anchor can become a real flex row : accent badge + wordmark. The
   wordmark is REAL link text (returned by the login_headertext filter), never
   generated content. */
.pe-login #login h1 {
  text-align: left;
}

.pe-login #login h1 a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* lot 2b : brand scale-up after the PO smoke. 12px gap, 28px below the row. */
  gap: 12px;
  width: auto;
  height: auto;
  margin: 0 0 28px;
  padding: 0;
  overflow: visible;
  text-indent: 0;
  text-decoration: none;
  background-image: none;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* Keyboard focus : core sets outline:none on this anchor. Restored, using the
   same accent the field ring uses. */
.pe-login #login h1 a:focus-visible {
  outline: 2px solid var(--portailetu-primary);
  outline-offset: 2px;
  border-radius: var(--portailetu-radius-sm);
}

/* Default mark : accent badge with a white sigle. Same role as the public
   shell's .pe-public__logo (accent square, radius-md). lot 2b raises it to 40px
   to match the image branch ; the sigle follows at the same half-of-badge ratio
   the 28px version had (14/28 becomes 20/40), the radius stays on the token. */
.pe-login #login h1 a .pe-login__logo {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--portailetu-radius-md);
  background: var(--portailetu-shell-accent);
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
}

/* Configured logo variant, copied verbatim from .pe-public__logo--image
   (assets/css/public-shell.css), height re-pinned to the 40px badge. */
.pe-login #login h1 a .pe-login__logo--image {
  width: auto;
  height: 40px;
  max-width: 150px;
  border-radius: 0;
  background: none;
  object-fit: contain;
}

.pe-login #login h1 a .pe-login__brand-name {
  min-width: 0;
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  color: var(--portailetu-field-text);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color 0.12s ease;
}

/* The native :hover/:focus rule only recolors the <a>, which the wordmark
   overrides — the affordance is re-declared on the wordmark itself. lot 3 :
   repointed to the accent, the resting color having become the text color in
   lot 2b, which left this rule visually inert. */
.pe-login #login h1 a:hover .pe-login__brand-name,
.pe-login #login h1 a:focus .pe-login__brand-name {
  color: var(--portailetu-primary);
}

/* --- Title block -----------------------------------------------------
   Prepended to the native login message by the login_message filter, on the
   login action only. Its 24px bottom margin collapses with the form's own 24px
   top margin, so the rhythm matches the brand-to-form gap exactly. */
.pe-login #login .pe-login__head {
  display: flex;
  flex-direction: column;
  gap: var(--portailetu-space-1);
  margin: 0 0 var(--portailetu-space-6);
}

.pe-login #login .pe-login__title {
  margin: 0;
  padding: 0;
  font-size: var(--portailetu-text-xl-size);
  line-height: var(--portailetu-text-xl-line);
  font-weight: var(--portailetu-text-xl-weight);
  color: var(--portailetu-field-text);
}

.pe-login #login .pe-login__subtitle {
  margin: 0;
  padding: 0;
  font-size: var(--portailetu-text-base-size);
  line-height: var(--portailetu-text-base-line);
  font-weight: 400;
  color: var(--portailetu-shell-muted);
}

/* --- Field box (rest state) ------------------------------------------
   The two wrappers that become boxes :
     - the paragraph holding a <label> immediately followed by input.input
       (username on the login form AND on the lostpassword form),
     - div.user-pass-wrap (password).
   p.forgetmenot is excluded by construction : it prints the input BEFORE its
   label, so the `label + input.input` sequence never matches. p.submit and
   p#nav carry no labelled input at all.
   The :is() wrapper is a forgiving selector list : on an engine without :has()
   the password half still resolves instead of the whole rule dying. */
.pe-login #login form :is(p:has(> label + input.input), .user-pass-wrap) {
  display: block;
  box-sizing: border-box;
  width: 100%;
  /* lot 2b : roomier variant of the site pattern. Only the padding and the type
     sizes grow ; surface, border, radius, hover and focus ring stay the copied
     values. 14px is the gap between the two boxes. */
  margin: 0 0 14px;
  padding: 12px 14px;
  background: var(--portailetu-field-surface);
  border: 1px solid var(--portailetu-field-border);
  border-radius: var(--portailetu-radius-md);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

/* The native label becomes the small label INSIDE the box. */
.pe-login #login form :is(p:has(> label + input.input), .user-pass-wrap) > label {
  display: block;
  margin: 0;
  padding: 0;
  font-size: var(--portailetu-text-xs-size);
  line-height: var(--portailetu-text-xs-line);
  font-weight: 400;
  color: var(--portailetu-field-label);
  transition: color 0.12s ease;
}

/* The control loses every chrome it had : the box is the only chrome. Core's
   40px min-height, 24px font size, 16px bottom margin and 2.5rem right padding
   (the reserved slot for the absolutely positioned eye) are all reset. */
.pe-login #login form :is(p:has(> label + input.input), .user-pass-wrap) input.input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  outline: none;
  /* lot 2b : 15px/22px value line. font-family is forced back to the inherited
     stack so input.password-input drops the core Consolas/Monaco monospace and
     matches the other field, exactly as the site pattern input does. */
  font-family: inherit;
  font-size: 15px;
  line-height: 22px;
  color: var(--portailetu-field-text);
  caret-color: var(--portailetu-primary);
}

/* lot 2b : the webkit autofill yellow ignores background:transparent. It is
   overpainted with the box surface through the inset-shadow technique, and the
   background transition is parked far enough away that the UA cannot animate
   its own color back in. */
.pe-login #login form input.input:-webkit-autofill,
.pe-login #login form input.input:-webkit-autofill:hover,
.pe-login #login form input.input:-webkit-autofill:focus,
.pe-login #login form input.input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--portailetu-field-surface) inset;
  box-shadow: 0 0 0 1000px var(--portailetu-field-surface) inset;
  -webkit-text-fill-color: var(--portailetu-field-text);
  caret-color: var(--portailetu-primary);
  transition: background-color 100000s ease-in-out 0s;
}

/* --- Hover / focus, copied from the source pattern -------------------
   The ring is carried by the BOX and driven by :focus-within, so it lights up
   from the input AND from the eye button. */
.pe-login #login form :is(p:has(> label + input.input), .user-pass-wrap):hover {
  border-color: var(--portailetu-field-muted);
}

.pe-login #login form :is(p:has(> label + input.input), .user-pass-wrap):focus-within {
  border-color: var(--portailetu-primary);
  box-shadow: 0 0 0 3px var(--portailetu-field-ring-focus);
}

.pe-login #login form :is(p:has(> label + input.input), .user-pass-wrap):focus-within > label {
  color: var(--portailetu-primary);
}

/* --- Password row : the native eye stays, inside the box -------------
   Core pins .wp-hide-pw absolutely at the wrapper's top-right in a 40px square,
   which would overflow a 48px box and collide with the label. The row becomes a
   flex line instead and the button a static item sized to the value line. The
   button keeps its markup, its class, its data-toggle and its aria-label, so
   user-profile.js keeps driving it untouched. */
.pe-login #login form .wp-pwd {
  display: flex;
  align-items: center;
  gap: var(--portailetu-space-2);
}

.pe-login #login form .wp-pwd input.input {
  flex: 1 1 auto;
  min-width: 0;
}

.pe-login #login form .wp-pwd .button.wp-hide-pw {
  position: static;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--portailetu-radius-sm);
  background: transparent;
  box-shadow: none;
  color: var(--portailetu-field-label);
  line-height: 1;
}

.pe-login #login form .wp-pwd .button.wp-hide-pw:hover {
  color: var(--portailetu-primary);
}

.pe-login #login form .wp-pwd .button.wp-hide-pw:focus {
  border: none;
  box-shadow: none;
  outline: 2px solid var(--portailetu-primary);
  outline-offset: 2px;
}

.pe-login #login form .wp-pwd .button.wp-hide-pw .dashicons {
  width: 20px;
  height: 20px;
  font-size: 20px;
  top: 0;
}

/* --- CTA pill --------------------------------------------------------
   lot 2b turns #loginform into a flex column (see the lot 2b block below), so
   the remember-me row no longer floats and the float clearance lot 2a needed is
   gone. The 20px top margin is the remember-row-to-CTA step ; on the
   lostpassword form, which keeps block flow, it collapses with the field box's
   own 14px bottom margin and yields the same 20px. */
.pe-login #login form p.submit {
  clear: both;
  margin: 20px 0 0;
  padding: 0;
}

/* The arrow is an inline lucide `arrow-right` (the geometry stored in
   Pe_Icons::PATHS) as a data URI, stroked white because a background image
   cannot inherit currentColor. The glyph itself is unchanged since lot 2a ; its
   inset follows the widened 24px padding, and the right padding reserves
   24 + 16 + 8. */
.pe-login #login #wp-submit {
  display: block;
  float: none;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 12px 48px 12px 24px;
  border: none;
  border-radius: var(--portailetu-radius-pill);
  background-color: var(--portailetu-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 24px center;
  background-size: 16px 16px;
  box-shadow: none;
  text-shadow: none;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.12s ease, box-shadow 0.12s ease;
}

.pe-login #login #wp-submit:hover,
.pe-login #login #wp-submit:active {
  background-color: var(--portailetu-primary-hover);
  border-color: transparent;
  box-shadow: none;
  color: #fff;
  transform: none;
}

/* Focus ring identical to the field ring : one focus language on the screen. */
.pe-login #login #wp-submit:focus {
  background-color: var(--portailetu-primary-hover);
  border-color: transparent;
  box-shadow: 0 0 0 3px var(--portailetu-field-ring-focus);
  outline: 2px solid transparent;
  color: #fff;
}

/* =====================================================================
 * C1 lot 2b — flat column, remember + forgot row, column footer.
 *
 * FLAT : the native form card (white surface, 1px border, drop shadow, 26/24
 * padding) is dissolved. Everything in the column sits directly on the white
 * left half. Core is overridden by scope, never edited.
 *
 * LAYOUT : #loginform becomes a wrapping flex column. That is what lets the
 * native remember-me paragraph and the plugin-injected forgot link share ONE
 * row without a wrapper element — the login_form action fires between the
 * password field and p.forgetmenot, so no hook can wrap the two of them. Every
 * child is given an explicit order, and every vertical step is an item margin
 * (flex item margins never collapse, so the rhythm is exact).
 *
 * The remember checkbox itself is untouched : same input, same name, same
 * checked() state, same label. Its native float simply goes inert once the
 * parent is a flex container.
 *
 * ACTION SCOPE : the flex layout and the row are scoped to #loginform, so the
 * lostpassword form keeps its block flow and its own submit rhythm.
 * ===================================================================== */

/* --- Flat form -------------------------------------------------------
   Both forms. The 24px top margin is the subtitle-to-first-field step ; it
   collapses with the title block's own 24px bottom margin. */
.pe-login #login form {
  margin: var(--portailetu-space-6) 0 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

/* --- Login form column ----------------------------------------------- */
.pe-login #login form#loginform {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.pe-login #login form#loginform > p:has(> label + input.input) {
  order: 1;
}

.pe-login #login form#loginform > .user-pass-wrap {
  order: 2;
  /* fields to remember row */
  margin-bottom: var(--portailetu-space-4);
}

.pe-login #login form#loginform > p.forgetmenot {
  order: 3;
}

.pe-login #login form#loginform > .pe-login__forgot {
  order: 4;
}

.pe-login #login form#loginform > p.submit {
  order: 5;
  width: 100%;
}

/* --- Remember + forgot row -------------------------------------------
   Two flex items on one line : the native paragraph keeps the left, the
   injected link is pushed to the right by an auto margin. */
.pe-login #login form p.forgetmenot {
  display: flex;
  align-items: center;
  gap: var(--portailetu-space-2);
  float: none;
  margin: 0;
  padding: 0;
  font-weight: 400;
}

.pe-login #login form p.forgetmenot label {
  display: inline;
  margin: 0;
  padding: 0;
  font-size: var(--portailetu-text-base-size);
  line-height: var(--portailetu-text-base-line);
  color: var(--portailetu-field-text);
}

.pe-login #login form .pe-login__forgot {
  margin-left: auto;
  font-size: var(--portailetu-text-sm-size);
  line-height: 18px;
  color: var(--portailetu-primary);
  text-decoration: none;
}

.pe-login #login form .pe-login__forgot:hover,
.pe-login #login form .pe-login__forgot:focus {
  color: var(--portailetu-primary-hover);
  text-decoration: underline;
}

/* --- Native leftovers -------------------------------------------------
   p#nav on the LOGIN action only : its two entries are replaced by the forgot
   link inside the form and by the column footer below. On every other action
   (lostpassword first of all) it carries the way back to the login screen and
   MUST stay — it is only restyled. p#backtoblog goes on every action : the
   brand row is already the way out of the screen. */
.pe-login.login-action-login #login #nav {
  display: none;
}

.pe-login #login #nav {
  margin: var(--portailetu-space-6) 0 0;
  padding: 0;
  font-size: var(--portailetu-text-sm-size);
  line-height: 18px;
}

.pe-login #login #nav a {
  font-size: var(--portailetu-text-sm-size);
  line-height: 18px;
  color: var(--portailetu-primary);
  text-decoration: none;
}

.pe-login #login #nav a:hover,
.pe-login #login #nav a:focus {
  color: var(--portailetu-primary-hover);
  text-decoration: underline;
}

.pe-login #login #backtoblog {
  display: none;
}

/* --- Column footer ----------------------------------------------------
   Emitted on login_footer, which fires as a direct child of <body> AFTER the
   #login column closes : the block is a sibling of #login and rides the same
   centered flex column, so it needs no positioning of its own — only the column
   width, which it takes from the same token #login uses. */
.pe-login .pe-login__footer {
  box-sizing: border-box;
  width: var(--portailetu-login-col-w);
  max-width: 100%;
  margin: var(--portailetu-space-6) 0 0;
  padding: var(--portailetu-space-4) 0 0;
  border-top: 1px solid var(--portailetu-field-border-locked);
  text-align: center;
  font-size: var(--portailetu-text-sm-size);
  line-height: 18px;
  color: var(--portailetu-shell-muted);
}

.pe-login .pe-login__footer-link {
  color: var(--portailetu-primary);
  text-decoration: none;
}

.pe-login .pe-login__footer-link:hover,
.pe-login .pe-login__footer-link:focus {
  color: var(--portailetu-primary-hover);
  text-decoration: underline;
}

/* =====================================================================
 * C1 lot 3 — configurable slogan on the accent panel.
 *
 * The block is emitted only when at least one of the two options carries a
 * value (see portailetu_render_login_accent_panel), so these rules never apply
 * to the empty decorative panel of lot 1.
 *
 * The panel is position:fixed, which makes it the containing block for its
 * absolutely positioned child : the slogan is pinned to the panel's own bottom
 * corner, not to the viewport, and it stays out of the flow so it can never
 * push the decorative half around.
 * ===================================================================== */

.pe-login .pe-login__slogan {
  position: absolute;
  inset: auto 2rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  gap: var(--portailetu-space-2);
}

.pe-login .pe-login__slogan-title {
  margin: 0;
  padding: 0;
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
  color: #fff;
}

.pe-login .pe-login__slogan-text {
  margin: 0;
  padding: 0;
  font-size: var(--portailetu-text-base-size);
  line-height: var(--portailetu-text-base-line);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
}

/* Below 900px the accent half collapses into a 120px band (lot 1). A slogan has
   no room left there, so it is dropped rather than squeezed. */
@media (max-width: 899px) {
  .pe-login .pe-login__slogan {
    display: none;
  }
}

/* =====================================================================
 * C1 lot 4 — error presentation, loading state, finishing touches.
 *
 * NATIVE FLOW KEPT : core prints, inside #login and in this order, the brand
 * h1 (wp-login.php:222), then the login_message output (our title block), then
 * the error container (wp-login.php:240-290), then the form. Nothing here
 * reorders that : the alert renders between the title block and the form. See
 * the report — repositioning it above the title block would mean turning
 * #login into a flex column, which this lot does not do.
 *
 * RED FIELDS : driven by the body class .pe-login-identity-error, raised in PHP
 * only when the generic identification message is displayed. Empty-field errors
 * never raise it, so an empty password never paints both boxes red.
 * ===================================================================== */

/* --- Error alert ------------------------------------------------------
   Core gives the container a fixed id and a 4px left rule on a white surface.
   Everything is replaced by the C1 alert. The left padding is widened to
   12 + 16 + 8 to reserve the icon slot, the same discipline the CTA arrow uses.
   The glyph is a lucide `triangle-alert` (Pe_Icons geometry) as a data URI,
   stroked in the error hue because a background image cannot inherit color. */
.pe-login #login #login_error {
  margin: 0 0 var(--portailetu-space-4);
  padding: 8px 12px 8px 36px;
  border: 0;
  border-radius: var(--portailetu-radius-md);
  background-color: #fdecea;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b32d2e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px 9px;
  background-size: 16px 16px;
  box-shadow: none;
  color: var(--portailetu-field-error);
  font-size: var(--portailetu-text-sm-size);
  line-height: 18px;
}

.pe-login #login #login_error p,
.pe-login #login #login_error li {
  margin: 0;
  padding: 0;
  color: var(--portailetu-field-error);
  font-size: var(--portailetu-text-sm-size);
  line-height: 18px;
}

.pe-login #login #login_error .login-error-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pe-login #login #login_error a {
  color: var(--portailetu-field-error);
  text-decoration: underline;
}

/* --- Red fields, generic identification error only --------------------
   Both rules out-specify their lot 2a counterparts on class count alone, so
   the cascade never depends on source order : the error state beats the rest
   and hover states, and the focus ring beats the error state while typing. */
.pe-login.pe-login-identity-error #login form :is(p:has(> label + input.input), .user-pass-wrap) {
  border-color: var(--portailetu-field-error);
  box-shadow: 0 0 0 3px var(--portailetu-field-ring-error);
}

.pe-login.pe-login-identity-error #login form :is(p:has(> label + input.input), .user-pass-wrap):focus-within {
  border-color: var(--portailetu-primary);
  box-shadow: 0 0 0 3px var(--portailetu-field-ring-focus);
}

/* --- Submit busy state (assets/js/login.js) --------------------------- */
.pe-login #login #wp-submit.pe-login__submit--busy {
  opacity: 0.7;
  cursor: default;
}

/* --- Informational containers ----------------------------------------
   .message and .success keep their native wording ; only the chrome is
   harmonized with the plugin tokens. .notice is deliberately NOT listed : the
   error container is a .notice and already has its own rule above. */
.pe-login #login .message,
.pe-login #login .success {
  margin: 0 0 var(--portailetu-space-4);
  padding: 8px 12px;
  border: 1px solid var(--portailetu-field-border);
  border-left: 3px solid var(--portailetu-primary);
  border-radius: var(--portailetu-radius-md);
  background-color: var(--portailetu-field-surface);
  box-shadow: none;
  color: var(--portailetu-field-text);
  font-size: var(--portailetu-text-sm-size);
  line-height: 18px;
}

.pe-login #login .message p,
.pe-login #login .success p {
  margin: 0;
  padding: 0;
  font-size: var(--portailetu-text-sm-size);
  line-height: 18px;
}

/* --- Privacy policy link ----------------------------------------------
   Rendered by core inside #login only when a privacy page is configured. None
   is configured on this install, so this block is DEFENSIVE : it keeps the
   column sane the day the client sets one, instead of the native 3em/2em
   margins landing in the middle of the layout. */
.pe-login #login .privacy-policy-page-link {
  width: 100%;
  margin: var(--portailetu-space-6) 0 0;
  padding: 0;
  text-align: center;
  font-size: var(--portailetu-text-sm-size);
  line-height: 18px;
  color: var(--portailetu-shell-muted);
}

.pe-login #login .privacy-policy-page-link a {
  color: var(--portailetu-shell-muted);
  text-decoration: none;
}

.pe-login #login .privacy-policy-page-link a:hover,
.pe-login #login .privacy-policy-page-link a:focus {
  color: var(--portailetu-primary);
  text-decoration: underline;
}

/* --- Lostpassword form spacing ----------------------------------------
   Same MECHANISM as the login form, same value. lot 2b left this form in block
   flow, where the 20px field-to-button gap came out of a margin collapse
   between the box and the submit ; here it becomes a flex column like
   #loginform, the box drops its bottom margin, and the gap is the submit's own
   20px item margin. Identical construction on both forms, unchanged pixels. */
.pe-login #login form#lostpasswordform {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.pe-login #login form#lostpasswordform > p:has(> label + input.input) {
  order: 1;
  margin-bottom: 0;
}

.pe-login #login form#lostpasswordform > p.submit {
  order: 2;
  width: 100%;
}