/* =========================================================================
   Login page (Figma "Compte — Se connecter", 1139:10000)
   ========================================================================= */
/* No hero photo here, so the header gets the design's solid band. */
.site-header--solid {
  position: relative;
  background: #17341f;
}

.page--auth { background: #f4f8f5; }
/* The card carries the title and the tabs. */
.page--auth #block-syngenta-theme-page-title,
.page--auth #block-syngenta-theme-primary-local-tasks,
.page--auth #block-syngenta-theme-secondary-local-tasks { display: none; }
.page--auth [data-drupal-messages] {
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin: 32px auto 0;
  padding-inline: var(--gutter);
  font-size: 0.875rem;
  color: #17341f;
}
.page--auth [data-drupal-messages] > div {
  padding: 14px 18px;
  border: 1px solid #cfe3d5;
  border-radius: var(--r-sm);
  background: #fff;
}
.page--auth [data-drupal-messages] [role="alert"] { color: #a4260a; }
.page--auth [data-drupal-messages] > div:has([role="alert"]) { border-color: #f0c4b6; background: #fff6f3; }

.auth { padding-block: 48px 80px; }
.auth__breadcrumb {
  display: flex;
  gap: 8px;
  margin-bottom: 40px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 17px;
  text-transform: uppercase;
  color: #748379;
}
.auth__breadcrumb a { color: inherit; }

.auth__card {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  min-height: 700px;
  border: 1px solid #dce7df;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 14px 17px rgba(20, 46, 28, 0.08);
}

.auth__panel {
  display: flex;
  flex-direction: column;
  margin-block: -1px; margin-inline: -1px 0;
  padding-block: 42px 63px; padding-inline: 40px 50px;
  border-radius: 22px;
  background: #17341f;
  color: #fff;
}
.auth__accent {
  display: block;
  width: 64px; height: 5px;
  margin-bottom: 37px;
  border-radius: 3px;
  background: #e98a15;
}
.auth__panel-eyebrow {
  margin: 0 0 23px;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 17px;
  text-transform: uppercase;
  color: #82d39a;
}
.auth__panel-title {
  margin: 0 0 28px;
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 3vw, 2.375rem);
  font-weight: 600;
  line-height: 1.24;
}
.auth__panel-text { margin: 0; font-size: 0.9375rem; line-height: 25px; color: #d7e7dc; }
.auth__badge {
  margin-top: auto;
  padding: 14px 17px 16px;
  border: 1px solid #315f3c;
  border-radius: 14px;
  background: #214b2e;
}
.auth__badge-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 9px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 20px;
}
.auth__badge-text { margin: 0; font-size: 0.75rem; line-height: 19px; color: #c7dccb; }

.auth__main { padding-block: 42px 56px; padding-inline: 60px 70px; }
.auth__eyebrow {
  margin: 0 0 18px;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 16px;
  text-transform: uppercase;
  color: var(--syn-green-500);
}
.auth__tabs {
  display: flex;
  gap: 8px 40px;
  flex-wrap: wrap;
  margin-bottom: 36px;
  padding-inline-start: 12px;
  border-bottom: 1px solid #e2e9e4;
}
.auth__tab {
  position: relative;
  padding: 0 14px 19px;
  font-size: 0.8125rem;
  line-height: 20px;
  color: #6a7a70;
}
.auth__tab:hover { color: #17341f; text-decoration: none; }
.auth__tab.is-active { font-weight: 600; color: #17341f; }
.auth__tab.is-active::after {
  content: "";
  position: absolute;
  inset-inline-start: 0; inset-inline-end: 0; bottom: 8px;
  height: 3px;
  border-radius: 2px;
  background: var(--syn-green-500);
}
.auth__title {
  margin: 0 0 9px;
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 39px;
  color: #17341f;
}
.auth__intro { margin: 0 0 35px; font-size: 0.875rem; line-height: 22px; color: #66766d; }

.auth-form { display: grid; gap: 20px; }
.auth-form .form-item { margin: 0; }
.auth-form label {
  display: block;
  margin-bottom: 7px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 18px;
  color: #304a39;
}
.auth-form .form-required::after { content: " *"; }
.auth-form input[type="text"],
.auth-form input[type="password"] {
  width: 100%;
  height: 56px;
  padding: 0 15px;
  border: 1px solid #cedbd2;
  border-radius: var(--r-sm);
  background: #fff;
  font: inherit;
  font-size: 0.875rem;
  color: #17341f;
}
.auth-form ::placeholder { color: #87968d; opacity: 1; }
.auth-form input:focus {
  outline: none;
  border-color: var(--syn-green-500);
  box-shadow: 0 0 0 3px rgba(0, 153, 51, 0.12);
}
.auth-form input.error { border-color: #d0492a; }

/* Show/hide password: the design's ring-and-pupil eye, added by auth.js. */
.auth-form__password { position: relative; }
.auth-form__password input { padding-inline-end: 50px; }
.auth-form__reveal {
  position: absolute;
  inset-inline-end: 14px;
  /* Label (18px) + gap (7px) + half of the 56px box, less half the button. */
  top: 39px;
  width: 28px; height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: url("../../images/icon-auth-eye.svg") center / 18px no-repeat;
  cursor: pointer;
}
.auth-form__reveal::after {
  content: "";
  position: absolute;
  top: 12px; inset-inline-start: 12px;
  width: 4px; height: 4px;
  background: url("../../images/icon-auth-pupil.svg") center / contain no-repeat;
}
.auth-form__reveal[aria-pressed="true"]::before {
  content: "";
  position: absolute;
  top: 13px; inset-inline-start: 4px;
  width: 20px; height: 1.5px;
  background: #73847a;
  transform: rotate(-45deg);
}
.auth-form__reveal:focus-visible { outline: 2px solid var(--syn-green-500); outline-offset: 2px; }

.auth-form__options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 7px;
}
.auth-form__options .form-type-checkbox { display: flex; align-items: center; gap: 11px; }
.auth-form__options .form-type-checkbox label {
  margin: 0;
  font-weight: 400;
  line-height: 20px;
  color: #64756b;
  cursor: pointer;
}
.auth-form input[type="checkbox"] {
  flex: none;
  width: 18px; height: 18px;
  margin: 0;
  border: 1px solid #a9bab0;
  border-radius: 4px;
  background: #fff center / 12px no-repeat;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.auth-form input[type="checkbox"]:checked {
  border-color: var(--syn-green-500);
  background-color: var(--syn-green-500);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E");
}
.auth-form input[type="checkbox"]:focus-visible { outline: 2px solid var(--syn-green-500); outline-offset: 2px; }
.auth-form__forgot { font-size: 0.75rem; font-weight: 600; line-height: 20px; color: #007a33; }

.auth-form .form-actions { margin: 9px 0 0; }
.auth-form__submit {
  min-width: 220px;
  height: 50px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--syn-green-500);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.auth-form__submit:hover,
.auth-form__submit:focus-visible { background: var(--syn-green-600); }

.auth__switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 60px;
  margin: 29px 0 0;
  font-size: 0.8125rem;
  line-height: 20px;
  color: #66766d;
}
.auth__switch a { font-weight: 600; color: #007a33; }
.auth__switch--back { margin-top: 34px; }

/* Sign-up (1139:10108): name and e-mail, then the two passwords, side by
   side. Drupal nests them in wrappers, which step aside for the grid. */
.auth--register .auth__title { margin-top: -6px; }
.auth--register .auth__intro { margin-bottom: 30px; }
.auth-form--register {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.auth-form--register > .form-wrapper:not(.form-actions),
.auth-form--register .form-type-password-confirm { display: contents; }
.auth-form--register .auth-form__full-name .form-item { order: 1; }
.auth-form--register .form-item-mail { order: 2; }
.auth-form--register .form-item-pass-pass1 { order: 3; }
.auth-form--register .form-item-pass-pass2 { order: 4; }
.auth-form--register .password-suggestions { order: 5; grid-column: 1 / -1; }
.auth-form--register .form-item-consent { order: 6; grid-column: 1 / -1; margin-top: 10px; }
.auth-form--register .form-actions { order: 7; grid-column: 1 / -1; margin-top: 22px; }
.auth-form--register .form-type-password-confirm > .description { display: none; }

/* Core's password helpers: a strength bar under "Mot de passe", the match
   note under "Confirmer", and the tips (shown while the password is weak)
   in a tinted box under both. */
.auth-form .password-strength { margin-top: 8px; }
.auth-form .password-strength__meter {
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: #e2e9e4;
}
.auth-form .password-strength__indicator {
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: #d0492a;
  transition: width 0.2s ease, background-color 0.2s ease;
}
.auth-form .password-strength__indicator.is-fair { background: var(--syn-orange); }
.auth-form .password-strength__indicator.is-good { background: #7cb342; }
.auth-form .password-strength__indicator.is-strong { background: var(--syn-green-500); }
.auth-form .password-strength__title,
.auth-form .password-confirm-message {
  margin-top: 6px;
  font-size: 0.75rem;
  line-height: 18px;
  color: #66766d;
}
.auth-form .password-confirm-message .ok { color: var(--syn-green-500); font-weight: 600; }
.auth-form .password-confirm-message .error { color: #d0492a; font-weight: 600; }
.auth-form .password-suggestions {
  padding: 14px 17px;
  border: 1px solid #d5e5d9;
  border-radius: 14px;
  background: #f0f7f2;
  font-size: 0.75rem;
  line-height: 19px;
  color: #17341f;
  font-weight: 600;
}
.auth-form .password-suggestions:empty,
.auth-form--register:not(.is-typing-password) .password-suggestions { display: none !important; }
.auth-form--register:not(.has-password) .password-strength { display: none; }
.auth-form--register:not(.is-typing-confirm) .password-confirm-message { display: none; }
.auth-form .password-suggestions ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin-top: 6px;
  font-weight: 400;
  color: #65766c;
}
.auth-form .password-suggestions li { position: relative; padding-inline-start: 12px; }
.auth-form .password-suggestions li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0; top: 8px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--syn-orange);
}
.auth-form input[type="email"] {
  width: 100%;
  height: 56px;
  padding: 0 15px;
  border: 1px solid #cedbd2;
  border-radius: var(--r-sm);
  background: #fff;
  font: inherit;
  font-size: 0.875rem;
  color: #17341f;
}
.auth-form .form-item-consent { display: flex; align-items: center; gap: 11px; }
.auth-form .form-item-consent label {
  margin: 0;
  font-weight: 400;
  line-height: 20px;
  color: #64756b;
  cursor: pointer;
}
.auth-form .form-item-consent .form-required::after { content: none; }

/* Password request (1139:10223). */
.auth--password .auth__intro { max-width: 620px; margin-bottom: 56px; }
.auth-form--password { gap: 25px; }
.auth-form__help {
  margin-top: 5px;
  padding: 15px 17px 16px;
  border: 1px solid #d5e5d9;
  border-radius: 14px;
  background: #f0f7f2;
}
.auth-form__help-title { margin: 0 0 7px; font-size: 0.8125rem; font-weight: 600; line-height: 20px; color: #17341f; }
.auth-form__help-text { margin: 0; font-size: 0.75rem; line-height: 19px; color: #65766c; }

/* Recette: panel and form side by side on tablets, the form wider. */
@media (max-width: 1024px) {
  .auth__card { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); min-height: 0; }
  .auth__panel { padding: 36px 28px; }
  .auth__main { padding: 36px 32px 44px; }
  .auth-form--register { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .auth__card { grid-template-columns: minmax(0, 1fr); }
  .auth__panel { margin: -1px -1px 0; padding: 32px 32px 28px; }
  .auth__badge { margin-top: 28px; }
}
@media (max-width: 720px) {
  .auth { padding-block: 28px 56px; }
  .auth__breadcrumb { margin-bottom: 24px; }
  .auth__main { padding: 28px 20px 36px; }
  .auth__panel { padding: 28px 20px 24px; }
  .auth__tabs { gap: 4px 12px; padding-inline-start: 0; }
  .auth__tab { padding-inline: 4px; }
  .auth-form__submit { width: 100%; }
  .auth-form--register { grid-template-columns: minmax(0, 1fr); }
  .auth--password .auth__intro { margin-bottom: 32px; }
}

/* Text arrows beside the tab links; they point the reading way. */
.auth-arrow--next::before { content: "\00a0\00a0→"; }
.auth-arrow--back::before { content: "←\00a0\00a0"; }