/* ==========================================================================
   Kawann Supply — page de connexion
   Deux panneaux dans une même carte : bienvenue à gauche, formulaire à droite.
   ========================================================================== */
.kawann-connexion {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: stretch;
  margin: 8px 0 40px;
  border: 1px solid var(--kawann-border);
  border-radius: 18px;
  background: var(--kawann-blanc);
  overflow: hidden;
}

/* --- Volet de bienvenue --- */
.kawann-connexion__accueil {
  padding: 36px 34px;
  background: #fdf8ef;
}

.kawann-connexion__bienvenue {
  margin: 0 0 8px;
  /* Le logo a été retiré : c'est ce titre qui ouvre le volet. Le logo reste
     présent dans l'en-tête du site, juste au-dessus — il y faisait doublon. */
  font-size: 1.25rem;
  font-weight: var(--kawann-weight-title);
  color: var(--kawann-marine);
}

/* Le texte occupe toute la largeur du volet. Le filet orange, lui, reste
   court : porté par un pseudo-élément de largeur fixe plutôt que par la
   bordure du paragraphe, il ne suit plus la largeur du texte. */
.kawann-connexion__accroche {
  position: relative;
  margin: 0 0 22px;
  padding-bottom: 22px;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--kawann-text-muted);
}

.kawann-connexion__accroche::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 96px;
  height: 3px;
  border-radius: 2px;
  background: var(--kawann-soleil);
}

.kawann-connexion__atouts {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kawann-connexion__atouts li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.kawann-connexion__atout-icone {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fdf0d8;
  color: var(--kawann-marine);
}

.kawann-connexion__atout-icone svg { width: 20px; height: 20px; }

.kawann-connexion__atouts strong {
  display: block;
  margin-bottom: 2px;
  font-size: 0.8125rem;
  font-weight: var(--kawann-weight-bold);
  color: var(--kawann-marine);
}

.kawann-connexion__atouts span span {
  display: block;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--kawann-text-muted);
}

/* --- Formulaire --- */
.kawann-connexion__form { padding: 36px 40px; }

.kawann-connexion__titre {
  position: relative;
  margin: 0 0 26px;
  padding-bottom: 12px;
  font-size: 1.5rem;
  font-weight: var(--kawann-weight-title);
  color: var(--kawann-marine);
}

.kawann-connexion__titre::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 3px;
  border-radius: 2px;
  background: var(--kawann-soleil);
}

.kawann-connexion__form .form-label,
.kawann-connexion__form label {
  font-size: 0.8125rem;
  font-weight: var(--kawann-weight-bold);
  color: var(--kawann-marine);
}

.kawann-connexion__form .form-control {
  padding: 12px 14px;
  min-height: 48px;
  border: 1px solid var(--kawann-border);
  border-radius: 10px;
  font-size: 0.875rem;
  color: var(--kawann-marine);
}

.kawann-connexion__form .form-control:focus {
  border-color: var(--kawann-marine);
  box-shadow: none;
}

/* Bouton « afficher le mot de passe » : marine plein, collé au champ. */
.kawann-connexion__form .password-field .btn {
  width: auto;
  min-height: 48px;
  padding: 0 16px;
  border: 0;
  border-radius: 0 10px 10px 0;
  background: var(--kawann-marine);
  color: var(--kawann-blanc);
}

.kawann-connexion__form .password-field .btn:hover { background: var(--kawann-marine-clair); }

/* Mot de passe oublié à gauche, connexion à droite. */
.kawann-connexion__form .buttons-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
}

.kawann-connexion__form .buttons-wrapper .btn-basic,
.kawann-connexion__form .buttons-wrapper a:not(.btn-primary) {
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 0.8125rem;
  color: var(--kawann-lien);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kawann-connexion__form .buttons-wrapper [type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  min-height: 50px;
  border: 0;
  border-radius: 10px;
  background: var(--kawann-marine);
  font-size: 0.9375rem;
  font-weight: var(--kawann-weight-bold);
  color: var(--kawann-blanc);
}

.kawann-connexion__form .buttons-wrapper [type="submit"]:hover {
  background: var(--kawann-marine-clair);
  color: var(--kawann-blanc);
}

/* --- Séparateur « ou » --- */
.kawann-connexion__ou {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 30px 0 24px;
  color: var(--kawann-text-muted);
}

.kawann-connexion__ou::before,
.kawann-connexion__ou::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--kawann-border);
}

.kawann-connexion__ou span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--kawann-border);
  border-radius: 50%;
  font-size: 0.75rem;
  background: var(--kawann-blanc);
}

/* --- Création de compte --- */
.kawann-connexion__inscription h2 {
  margin: 0 0 14px;
  font-size: 1.0625rem;
  font-weight: var(--kawann-weight-title);
  color: var(--kawann-marine);
}

.kawann-connexion__creer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 20px;
  min-height: 52px;
  border: 1px solid var(--kawann-border);
  border-radius: 10px;
  background: transparent;
  font-size: 0.9375rem;
  font-weight: var(--kawann-weight-bold);
  color: var(--kawann-marine);
  text-decoration: none;
}

.kawann-connexion__creer svg { width: 19px; height: 19px; }

.kawann-connexion__creer:hover {
  border-color: var(--kawann-marine);
  background: var(--kawann-surface);
  color: var(--kawann-marine);
}

.kawann-connexion__creer:focus-visible {
  outline: 2px solid var(--kawann-marine);
  outline-offset: 2px;
}

/* --- Sous 992px les deux panneaux s'empilent --- */
@media (max-width: 991.98px) {
  .kawann-connexion { grid-template-columns: minmax(0, 1fr); }
  .kawann-connexion__accueil { padding: 28px 24px; }
  .kawann-connexion__form { padding: 28px 24px; }
}

@media (max-width: 575.98px) {
  .kawann-connexion__form .buttons-wrapper { flex-direction: column-reverse; align-items: stretch; }
  .kawann-connexion__form .buttons-wrapper [type="submit"] { justify-content: center; }
  .kawann-connexion__form .buttons-wrapper a { text-align: center; }
}

/* Le titre de la page ferait doublon avec celui du panneau de droite. On le
   masque en CSS plutôt que de vider le bloc d'en-tête du gabarit parent :
   celui-ci contient le bloc de titre, et neutraliser un bloc englobant tout en
   surchargeant un bloc qu'il contient s'est déjà révélé fragile ailleurs.
   Le titre reste dans le flux pour les lecteurs d'écran ? Non : il serait
   annoncé deux fois. On le retire vraiment, le <h1> du panneau prend le relais. */
body#authentication .page-header,
.page-authentication .page-header {
  display: none;
}

/* --- Encart d'aide en pied du volet ---
   Le volet est en colonne et l'encart repoussé en bas : il reste ancré au pied
   du panneau, dont la hauteur est dictée par le formulaire à droite. */
.kawann-connexion__accueil {
  display: flex;
  flex-direction: column;
}

.kawann-connexion__aide {
  /* flex: 0 0 auto — l'encart vient d'un contexte en ligne où il portait
     « flex: 0 1 340px ». Dans ce volet en colonne, cette base s'appliquait à
     la hauteur et l'étirait sur 340px. */
  flex: 0 0 auto;
  margin-top: auto;
  padding: 12px 14px;
  background: var(--kawann-blanc);
}

/* Sur écran étroit les volets s'empilent : l'encart n'a plus de hauteur à
   rattraper, on lui rend une marge normale. */
@media (max-width: 991.98px) {
  .kawann-connexion__aide { margin-top: 24px; }
}

/* ==========================================================================
   Page de création de compte
   Elle réutilise la carte à deux volets de la connexion ; seules les
   particularités du formulaire d'inscription sont traitées ici.
   ========================================================================== */
body#registration .page-header,
.page-registration .page-header {
  display: none;
}

/* Consignes de saisie : discrètes, elles accompagnent le champ sans le
   dominer. */
.register-form .form-text,
.register-form small {
  display: block;
  margin-top: 4px;
  font-size: 0.6875rem;
  line-height: 1.45;
  color: var(--kawann-text-muted);
}

/* Cases à cocher — newsletter, RGPD, conditions générales. */
.register-form .form-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  padding: 0;
}

.register-form .form-check-input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  border-color: var(--kawann-border);
}

.register-form .form-check-input:checked {
  background-color: var(--kawann-marine);
  border-color: var(--kawann-marine);
}

.register-form .form-check-label {
  font-size: 0.8125rem;
  font-weight: var(--kawann-weight-text);
  line-height: 1.5;
  color: var(--kawann-marine);
}

.register-form .form-check-label em,
.register-form .form-check-label small,
.register-form .form-check-label p {
  display: block;
  margin: 3px 0 0;
  font-size: 0.6875rem;
  font-style: normal;
  line-height: 1.5;
  color: var(--kawann-text-muted);
}

.register-form .form-check-label a {
  color: var(--kawann-lien);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Bouton de validation aligné à droite, comme sur la maquette. */
.register-form .buttons-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--kawann-border-clair, #efeae2);
}

.register-form .buttons-wrapper [type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  min-height: 50px;
  border: 0;
  border-radius: 10px;
  background: var(--kawann-marine);
  font-size: 0.9375rem;
  font-weight: var(--kawann-weight-bold);
  color: var(--kawann-blanc);
}

.register-form .buttons-wrapper [type="submit"]:hover {
  background: var(--kawann-marine-clair);
  color: var(--kawann-blanc);
}

/* Le champ mot de passe abrite un bouton « afficher » qui porte lui aussi
   .btn-primary : on ne peint que le bouton de validation. */
.register-form .password-field .btn {
  width: auto;
  min-height: 48px;
  padding: 0 16px;
  border: 0;
  border-radius: 0 10px 10px 0;
  background: var(--kawann-marine);
  color: var(--kawann-blanc);
}

.register-form .password-field .btn:hover { background: var(--kawann-marine-clair); }

.kawann-connexion__deja {
  margin: 0;
  font-size: 0.875rem;
  color: var(--kawann-text-muted);
}

.kawann-connexion__deja a {
  font-weight: var(--kawann-weight-bold);
  color: var(--kawann-lien);
  text-decoration: underline;
  text-underline-offset: 3px;
}