/*
 * LPL login theme, layered on keycloak.v2. Values mirror
 * lpl-frontend/assets/styles/element-plus-theme.css.
 *
 * Selectors target PatternFly v5 only: docker-compose pins Keycloak 26.6.2 and the deployed
 * host must match. Each one was checked against the markup this version renders.
 */


@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wdth,wght@12..96,80,200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500&display=swap');

:root {
  --lpl-primary: #00cfb3;
  --lpl-primary-light-3: #8effe8;
  --lpl-primary-light-9: #eefffb;
  --lpl-tertiary: #00cfb3;
  --lpl-contrast: #101010;
  --lpl-danger:#EB5729;
  --lpl-text: #101010;
  --lpl-text-secondary: var(--lpl-text-secondary);
  --lpl-fill: #eeeeee;
  --lpl-border: #cccccc;

  --lpl-font-title: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  --lpl-font-text: 'Source Sans 3', system-ui, -apple-system, sans-serif;
  --lpl-font-mono: 'DM Mono', system-ui, -apple-system, monospace;
  --lpl-font-sans: 'Archivo', system-ui, -apple-system, sans-serif;
  --lpl-radius: 6px;
  --lpl-radius-sm: 3px;
}

/* ---------- Page frame ---------- */

/* keycloak.v2 paints Keycloak's own polygon artwork (`keycloak-bg-darken.svg`) over the whole
   page and accents the card with PatternFly blue. Both are its branding, not ours. */
#keycloak-bg {
  background: var(--lpl-fill);
  font-family: var(--lpl-font-text);
  color: var(--lpl-text);
}

.pf-v5-c-login {
  background-color: #00cfb3;
}
.pf-v5-c-login .instruction{
  text-align:center;
}
.pf-v5-c-login__main-header {
  border-top: 0;
  grid-template-columns: unset !important;
}

.pf-v5-c-login__main {
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  border: none !important;
  border-radius: 0.75rem !important;
  max-width: 536px !important;
  background: #ffffff;
}

/* ---------- Brand ---------- */

/* The realm display name stays as the accessible name, with the front's mark above it. */
#kc-header-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 0 0 1.5rem;
  font-size: 0 !important;
}

#kc-header-wrapper::before {
  content: '';
  width: 64px;
  height: 61px;
  background: unset !important;
}

#kc-header-wrapper strong {
  font-family: var(--lpl-font-title);
  font-weight: 700;
  font-size: 21px;
  color: var(--lpl-text);
}

#kc-page-title {
  font-weight: 700;
  font-size: 1.5rem !important;
  font-family: var(--lpl-font-title);
  text-align:center;
}

#kc-page-title::before {
  content: '';
  display: block;
  height: 48px;
  background: url('../img/logo-la-presse-libre-horizontal-menta.svg') center / contain no-repeat;
  margin-bottom: 20px;
}

/* ---------- Fields ---------- */

/* The class sits on a wrapper <span>, and PatternFly draws its border on ::before rather than
   on the element. Adding a border here without neutralising that one stacks two rings, and the
   inner <input> keeps its own focus outline at -2px, which drew a third box inside them. */
.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after {
  border: 0;
}

.pf-v5-c-form-control {
  font-family: var(--lpl-font-text);
  font-size: 17px;
  border: 1px solid var(--lpl-border);
  border-radius: var(--lpl-radius-sm);
  background: #ffffff;
  color: var(--lpl-text);
  box-shadow: none;
}

.pf-v5-c-form-control > :is(input, select, textarea) {
  padding: 0.75em 1em;
  color: var(--lpl-text);
}

.pf-v5-c-form-control > :is(input, select, textarea):focus {
  outline: none;
}

.pf-v5-c-form-control:focus,
.pf-v5-c-form-control:focus-within {
  outline: none;
  border-color: #00cfb3;
}

/* The password field wraps the input and its reveal button in an input group. Border the group
   so the two read as one control, the way the front's el-input append does. */
.pf-v5-c-input-group {
  border: 1px solid var(--lpl-border);
  border-radius: var(--lpl-radius-sm);
  background: #ffffff;
}

.pf-v5-c-input-group:focus-within {
  border-color: var(--lpl-primary);
  box-shadow: 0 0 0 3px var(--lpl-primary-light-9);
}

.pf-v5-c-input-group .pf-v5-c-form-control,
.pf-v5-c-input-group .pf-v5-c-form-control:focus-within {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.pf-v5-c-button.pf-m-control,
.pf-v5-c-button.pf-m-control:hover,
.pf-v5-c-button.pf-m-control:focus {
  background: transparent;
  color: var(--lpl-text-secondary);
  padding-inline: 1em;
  cursor: pointer;
}

.pf-v5-c-button.pf-m-control::after {
  border: 0;
}

.pf-v5-c-button.pf-m-control:hover {
  color: var(--lpl-text);
}

/* Field labels only — deliberately not `label`, which would also bold the "Rester connecté"
   checkbox. */
.pf-v5-c-form__label-text {
  font-family: var(--lpl-font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  color: var(--lpl-text-secondary);
}

/* PatternFly's default gutter leaves the fields tighter than the front's forms. */
.pf-v5-c-form {
  --pf-v5-c-form--GridGap: 1.35rem;
}

/* Keycloak puts the "remember me" row and the reset link in the field's helper-text slot, so
   without this they sit flush against the input above. */
.pf-v5-c-form__helper-text {
  margin-block-start: 0.5rem;
}

.pf-v5-c-check__label {
  font-family: var(--lpl-font-sans);
  color: var(--lpl-text);
  font-size:0.875rem;
  margin-top: 2px;
}

/* ---------- Buttons ---------- */

.pf-v5-c-button.pf-m-primary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500 !important;
  transition: background-color 150ms ease-in-out, color 150ms ease-in-out;
  border-radius: 0.5rem;
  padding: 1rem 2rem;
  font-size: 1.25rem !important;
  line-height: 1.75rem;
  gap: 0.25rem;
  background-color: #003432 !important;
  color: #ffffff !important;
  justify-self: stretch;
  border: none;
  font-family: var(--lpl-font-sans) !important;
}

.pf-v5-c-button.pf-m-primary:hover {
  background-color: #08675f;
}

.pf-v5-c-button.pf-m-primary:active {
  background-color: #0f172a;
}

.pf-v5-c-button.pf-m-primary:disabled {
  background-color: #f5f5f5;
  color: #999999;
  cursor: not-allowed;
  opacity: 0.6;
}

.pf-v5-c-button.pf-m-primary:focus {
  background-color: #08675f;
}

.pf-v5-c-button.pf-m-secondary {
  background: transparent;
  border: 0px solid var(--lpl-contrast) !important;
  border-radius: var(--lpl-radius);
  color: var(--lpl-text);
  font-family: var(--lpl-font-sans);
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

.pf-v5-c-button.pf-m-secondary:hover {
  color:#000;
  text-decoration: underline;
  text-underline-offset:4px;
}
.pf-v5-c-button.pf-m-secondary::after{
  border: 0px solid var(--lpl-contrast) !important;
}

.pf-v5-c-login__main-body {
  padding: 2rem;
}

/* ---------- Links ---------- */

.pf-v5-c-login__main a {
  color: var(--lpl-contrast);
  text-decoration: underline;
  text-underline-offset: 4px;
  font-family: var(--lpl-font-sans);
}

.pf-v5-c-login__main a:hover {
  color: var(--lpl-primary);
}

/* ---------- Feedback ---------- */
.pf-v5-c-alert {
  font-family: var(--lpl-font-sans);
  font-weight:normal;
}
.pf-v5-c-alert__title{
  font-family: var(--lpl-font-sans);
  font-weight: normal;
}
.pf-v5-c-alert.pf-m-danger {
  background: #ffffff;
  color: #EB5729;
  border-radius: 8px;
  border: 1px solid #EB5729;
  background: #FDEAE3;
}
.pf-v5-c-alert.pf-m-warning {
  background: #FEF3E6;
  color: #FF8A3B;
  border-radius: 8px;
  border: 1px solid #FF8A3B;
} 
.pf-v5-c-alert.pf-m-success {
  color: #5BBF23;
  border-radius: 8px;
  border: 1px solid #5BBF23;
  background: #EDF8E2;
}

.pf-v5-c-helper-text__item-text a{
  font-family: var(--lpl-font-sans);
}
.pf-v5-c-helper-text__item-text.pf-m-error {
  color: var(--lpl-danger);
}

/* ---------- Secondary text ---------- */

#kc-info-message,
.pf-v5-c-login__main-footer-band {
  color: var(--lpl-text-secondary);
  font-family: var(--lpl-font-sans);
  text-align:center;
}

#kc-info-wrapper {
  font-family: var(--lpl-font-sans);
  line-height:1.2;
}

#kc-info-message a{
  display:inline-block;
  margin-top:1rem;
  border-radius: 8px;
  border:1px solid #00A492;
  background: rgba(0, 0, 0, 0.00);
  color: var(--accent-950, #003432);
  padding:0.8rem 2rem;
  font-family: var(--lpl-font-sans);
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: var(--Letter-spacing-lg, 0);
  text-decoration:none;
}