/*
  Thème de connexion UGPTN (doc 21, ADR-012) : jumeau de l'écran de connexion de la console
  ugptn.cd. Jetons Carbon habillés UGPTN, IBM Plex servi depuis le thème (aucune ressource
  tierce), angles droits, aucune ombre. Seule exception, consentie par l'ADR-032 : le halo
  radial du panneau de marque, en `::before` de `.auth-brand`.
  Les noms de classes « kc* » de theme.properties pointent ici.
*/

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/IBMPlexSans-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/IBMPlexSans-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/IBMPlexSans-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/IBMPlexMono-Regular.woff2') format('woff2');
}

:root {
  --ac: #0f62fe;
  --acd: #0043ce;
  --ac-light: #78a9ff;
  --ac-line: #d0e2ff;
  --c-black: #161616;
  --c-90: #262626;
  --c-80: #393939;
  --c-70: #525252;
  --c-60: #6f6f6f;
  --c-50: #8d8d8d;
  --c-40: #a8a8a8;
  --c-30: #c6c6c6;
  --c-20: #e0e0e0;
  --c-10: #f4f4f4;
  --red: #da1e28;
  --red-bg: #fff1f1;
  --red-fg: #a2191f;
  --ok-bg: #defbe6;
  --ok-bd: #a7d4b4;
  --ok-fg: #0e6027;
  --info-bg: #edf5ff;
  --info-bd: #d0e2ff;
  --info-fg: #0043ce;
  --warn-bg: #fcf4d6;
  --warn-bd: #e0c25a;
  --warn-fg: #684e00;
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  min-height: 100%;
}
body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-black);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a {
  color: var(--ac);
  text-decoration: underline;
  text-underline-offset: 3px;
}
a:hover {
  color: var(--acd);
}
img {
  display: block;
  max-width: 100%;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
:focus-visible {
  outline: 2px solid var(--ac);
  outline-offset: 2px;
}
::selection {
  background: var(--ac);
  color: #fff;
}
p {
  margin: 0;
}

/* ---------- Deux panneaux ---------- */
.auth-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100svh;
}

.auth-brand {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: clamp(28px, 4vw, 56px);
  background: var(--c-black);
  color: #fff;
}
/* Halo d'accent : seule exception au bannissement des dégradés (ADR-032). */
.auth-brand::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 88% 8%, rgba(15, 98, 254, 0.34), transparent 55%);
}
.auth-brand > * {
  position: relative;
}
.auth-brand__logo img {
  height: 36px;
  width: auto;
}
.auth-brand__kicker {
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ac-light);
}
.auth-brand__title {
  margin: 0;
  max-width: 17ch;
  font-weight: 600;
  font-size: clamp(23px, 2.7vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.auth-brand__benefits {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.auth-brand__benefits li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--c-30);
}
.auth-brand__check {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--c-80);
  color: var(--ac-light);
}
.auth-brand__note {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-50);
}

.auth-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: auto;
  padding: clamp(26px, 4vw, 52px);
  background: #fff;
}
.auth-form__inner {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}
.auth-form__head {
  margin-bottom: 26px;
}
.auth-form__title {
  margin: 0;
  font-weight: 600;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.auth-form__lead {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-60);
}
.auth-form__locale {
  margin-top: 18px;
}
.auth-form__required {
  margin: -10px 0 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-60);
}
.instruction {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-70);
}
.content-wrap {
  margin-bottom: 18px;
}
.mt {
  margin-top: 14px;
}

/* ---------- Formulaire ---------- */
.form {
  width: 100%;
}
.form-group {
  margin-bottom: 18px;
}
.form-group__label {
  display: block;
}
.label-mono {
  display: block;
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* Gris 60 et non 50 : à 11 px, le contraste AA (4,5:1) l'exige sur fond blanc. */
  color: var(--c-60);
}
.required-mark {
  color: var(--red);
  margin-left: 2px;
}

/* Le conteneur « field-wrap » enveloppe l'entrée ; les champs du profil le portent aussi. */
span.field-wrap,
div.field-wrap {
  position: relative;
  display: block;
}
.field-wrap > input,
.field-wrap > select,
.field-wrap > textarea,
input.field-wrap,
.field {
  display: block;
  width: 100%;
  margin: 0;
  padding: 13px 14px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--c-black);
  background: var(--c-10);
  border: 1px solid var(--c-20);
  border-radius: 0;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.field-wrap > select {
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23525252' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.field-wrap > textarea {
  min-height: 96px;
  resize: vertical;
}
.field-wrap > input::placeholder,
.field-wrap > textarea::placeholder {
  color: var(--c-50);
}
.field-wrap > input:focus,
.field-wrap > select:focus,
.field-wrap > textarea:focus,
input.field-wrap:focus {
  border-color: var(--ac);
  outline: 2px solid var(--ac);
  outline-offset: -2px;
}
.field-wrap.is-error > input,
.field-wrap > input[aria-invalid='true'],
.field-wrap > select[aria-invalid='true'],
.field-wrap > textarea[aria-invalid='true'] {
  border-color: var(--red);
}
.field-wrap.is-readonly > input,
.field-wrap > input[readonly] {
  color: var(--c-70);
  background: #fff;
}
.field-wrap > input:disabled,
.field-wrap > select:disabled {
  color: var(--c-60);
  cursor: not-allowed;
}
.field-util {
  display: none;
}

/* Mot de passe : champ et bouton d'affichage d'un seul tenant. */
.input-group {
  display: flex;
  align-items: stretch;
}
.input-group__item--fill {
  flex: 1 1 auto;
  min-width: 0;
}
.field-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-width: 46px;
  padding: 0 12px;
  background: var(--c-10);
  border: 1px solid var(--c-20);
  border-left: 0;
  border-radius: 0;
  color: var(--c-70);
  cursor: pointer;
}
.field-toggle:hover {
  background: var(--c-20);
  color: var(--c-black);
}
.field-toggle:focus-visible {
  outline-offset: -2px;
}
.field-toggle--text {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Aides, liens sous le champ (mot de passe oublié) */
.helper {
  margin-top: 8px;
}
.helper__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 14px;
}
.helper__item {
  font-size: 12.5px;
  color: var(--c-60);
}
.helper__text {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--c-60);
}
.helper__item.is-error {
  flex: 1 1 100%;
}

/* Cases à cocher et boutons radio */
.check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 13.5px;
  color: var(--c-70);
  cursor: pointer;
}
.check + .check {
  margin-top: 10px;
}
.check__input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--ac);
}
.check__label {
  line-height: 1.4;
}
.check__label.is-disabled {
  color: var(--c-50);
}
.form-options {
  margin: 0;
}

/* Boutons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 24px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--c-black);
  background: #fff;
  border: 1px solid transparent;
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s;
}
.btn .arrow {
  font-family: var(--font-mono);
}
.btn--primary {
  color: #fff;
  background: var(--ac);
}
.btn--primary:hover {
  background: var(--acd);
  color: #fff;
}
.btn--outline {
  color: var(--c-black);
  border-color: var(--c-black);
}
.btn--outline:hover {
  color: #fff;
  background: var(--c-black);
}
.btn--link {
  padding: 0;
  color: var(--ac);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.btn--block {
  width: 100%;
}
.btn:disabled,
.btn.is-disabled,
.btn[aria-disabled='true'] {
  cursor: progress;
  opacity: 0.55;
}
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}
.form-actions > .btn,
.form-actions > form {
  flex: 1 1 160px;
}
.form-actions > form > .btn {
  width: 100%;
}

/* Alertes et erreurs : cadre à filet gauche de 3 px */
.auth-alert,
.auth-error {
  display: block;
  margin: 0 0 18px;
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--red-fg);
  background: var(--red-bg);
  border: 1px solid var(--red);
  border-left-width: 3px;
}
ul.auth-error {
  padding-left: 30px;
}
.helper .auth-error {
  margin: 8px 0 0;
}
.auth-alert--success {
  color: var(--ok-fg);
  background: var(--ok-bg);
  border-color: var(--ok-bd);
  border-left-color: var(--ok-fg);
}
.auth-alert--info {
  color: var(--info-fg);
  background: var(--info-bg);
  border-color: var(--info-bd);
  border-left-color: var(--ac);
}
.auth-alert--warning {
  color: var(--warn-fg);
  background: var(--warn-bg);
  border-color: var(--warn-bd);
  border-left-color: var(--warn-fg);
}
.auth-alert__icon {
  display: none;
}
.auth-alert__title {
  font-weight: 400;
}

/* Pied de formulaire : infos, retour */
.footer-band {
  margin-top: 22px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--c-60);
}
.footer-band + .footer-band {
  margin-top: 12px;
}
#kc-registration-container {
  display: none;
}
.divider {
  margin: 22px 0;
  border: 0;
  border-top: 1px solid var(--c-20);
}

/* Icônes dessinées en CSS (remplacent Font Awesome du thème parent) */
.ugptn-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.ugptn-icon--show {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M30.94 15.66A16.69 16.69 0 0 0 16 5 16.69 16.69 0 0 0 1.06 15.66a1 1 0 0 0 0 .68A16.69 16.69 0 0 0 16 27a16.69 16.69 0 0 0 14.94-10.66 1 1 0 0 0 0-.68ZM16 25c-5.3 0-10.9-3.93-12.93-9C5.1 10.93 10.7 7 16 7s10.9 3.93 12.93 9C26.9 21.07 21.3 25 16 25Z'/%3E%3Cpath d='M16 10a6 6 0 1 0 6 6 6 6 0 0 0-6-6Zm0 10a4 4 0 1 1 4-4 4 4 0 0 1-4 4Z'/%3E%3C/svg%3E");
}
.ugptn-icon--hide {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M5.24 22.51l1.43-1.42A14.06 14.06 0 0 1 3.07 16C5.1 10.93 10.7 7 16 7a12.38 12.38 0 0 1 4 .72l1.55-1.56A14.72 14.72 0 0 0 16 5 16.69 16.69 0 0 0 1.06 15.66a1 1 0 0 0 0 .68 16 16 0 0 0 4.18 6.17Z'/%3E%3Cpath d='M12 15.73a4 4 0 0 1 3.7-3.7l1.81-1.82a6 6 0 0 0-7.33 7.33ZM30.94 15.66A16.4 16.4 0 0 0 25.2 8.22L30 3.41 28.59 2 2 28.59 3.41 30l5.1-5.1A15.29 15.29 0 0 0 16 27a16.69 16.69 0 0 0 14.94-10.66 1 1 0 0 0 0-.68ZM20 16a4 4 0 0 1-6 3.44L19.44 14a4 4 0 0 1 .56 2Zm-4 9a13.05 13.05 0 0 1-6-1.58l2.54-2.54a6 6 0 0 0 8.35-8.35l2.87-2.87A14.54 14.54 0 0 1 28.93 16C26.9 21.07 21.3 25 16 25Z'/%3E%3C/svg%3E");
}
.ugptn-icon--arrow {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z'/%3E%3C/svg%3E");
}
.ugptn-icon--down {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z'/%3E%3C/svg%3E");
}
.ugptn-icon--check {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M13 24 4 15l1.4-1.4 7.6 7.6L26.6 5.6 28 7z'/%3E%3C/svg%3E");
}
.ugptn-icon--copy {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z'/%3E%3Cpath d='M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z'/%3E%3C/svg%3E");
}
.ugptn-icon--key {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M21 2a9 9 0 0 0-9 9 8.87 8.87 0 0 0 .39 2.61L2 24v6h6l10.39-10.39A9 9 0 1 0 21 2Zm0 16a7 7 0 0 1-2.17-.35l-.63-.2-.47.47L15.4 20.24 13.16 18l-1.42 1.41L14 21.66 12.66 23l-2.24-2.24-1.42 1.41L11.25 24 7.17 28H4v-3.17l10.08-10.08.47-.47-.2-.63A7 7 0 1 1 21 18Z'/%3E%3Ccircle cx='22' cy='10' r='2'/%3E%3C/svg%3E");
}
.ugptn-icon--lock {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M24 14h-2V8a6 6 0 0 0-12 0v6H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V16a2 2 0 0 0-2-2ZM12 8a4 4 0 0 1 8 0v6h-8Zm12 20H8V16h16Z'/%3E%3C/svg%3E");
}
.ugptn-icon--device {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M22 2H10a2 2 0 0 0-2 2v24a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2Zm0 26H10V4h12Z'/%3E%3Ccircle cx='16' cy='25' r='1.5'/%3E%3C/svg%3E");
}
.ugptn-icon--list {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M10 6h18v2H10zM4 5h4v4H4zM10 15h18v2H10zM4 14h4v4H4zM10 24h18v2H10zM4 23h4v4H4z'/%3E%3C/svg%3E");
}
.ugptn-icon--error,
.ugptn-icon--warning,
.ugptn-icon--success,
.ugptn-icon--info {
  display: none;
}

/* Pages secondaires du thème parent (choix d'une méthode, OTP, codes de secours) */
.select-auth {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--c-20);
}
.select-auth__item {
  border-bottom: 1px solid var(--c-20);
}
.select-auth__row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 4px;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}
.select-auth__row:hover {
  background: var(--c-10);
}
.select-auth__icon {
  color: var(--ac);
}
.select-auth__body {
  flex: 1 1 auto;
}
.select-auth__heading {
  font-weight: 500;
  font-size: 14px;
}
.select-auth__description,
.select-auth__subtitle {
  font-size: 12.5px;
  color: var(--c-60);
}
.select-auth__action {
  color: var(--c-50);
}
.tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--c-20);
  background: var(--c-10);
  cursor: pointer;
}
.tile + .tile {
  margin-top: 8px;
}
.tile.is-selected {
  border-color: var(--ac);
  outline: 1px solid var(--ac);
}
.tile__header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tile__title {
  font-size: 14px;
}
.panel {
  border: 1px solid var(--c-20);
  background: var(--c-10);
}
.panel__body {
  padding: 14px;
}
.list {
  margin: 0;
  padding-left: 20px;
}
#kc-recovery-codes-list {
  columns: 2;
  font-family: var(--font-mono);
}
.clipboard__content {
  margin-top: 8px;
}
.clipboard__content pre {
  margin: 0;
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--c-10);
  border: 1px solid var(--c-20);
  white-space: pre-wrap;
  word-break: break-all;
}
.qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 14px 0;
}
.qr__title {
  font-weight: 500;
}
#kc-code pre code,
#certificate_subjectDN {
  overflow-wrap: anywhere;
}
.social {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.social__item + .social__item {
  margin-top: 10px;
}
.social--grid {
  display: grid;
  gap: 10px;
}

/* ---------- Une colonne sous 900 px : bandeau noir réduit en haut ---------- */
@media (max-width: 900px) {
  .auth-split {
    grid-template-columns: 1fr;
    /* Le bandeau garde sa hauteur propre ; le formulaire prend le reste de l'écran. */
    grid-template-rows: auto 1fr;
  }
  .auth-brand {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
  }
  .auth-brand__logo img {
    height: 28px;
  }
  .auth-brand__pitch {
    text-align: right;
  }
  .auth-brand__kicker {
    margin: 0;
  }
  .auth-brand__title,
  .auth-brand__benefits,
  .auth-brand__note {
    display: none;
  }
  .auth-form {
    justify-content: flex-start;
    padding: 28px 16px 40px;
  }
  /* 16 px : empêche le zoom automatique d'iOS au focus. */
  .field-wrap > input,
  .field-wrap > select,
  .field-wrap > textarea,
  input.field-wrap {
    font-size: 16px;
  }
  .btn {
    min-height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}