/* ============================================================================
   SentinelleFin : Pages d'authentification (connexion et inscription)
   Portage de `_ds/…/ui_kits/app/LoginScreen.jsx` : deux colonnes égales, le
   formulaire sur le blanc, le contenu de réassurance sur le dégradé de marque.
   Le reset et les boutons viennent de base.css.
   ========================================================================== */

.login {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* ------------------------------------------------------------- Colonne gauche */

.login__panel {
  background: var(--canvas);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-section) var(--space-xl);
}

.login__stack {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.login__logo { display: block; width: max-content; }
.login__logo img { height: 56px; width: auto; }

.login__step {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.login__step[hidden] { display: none; }

/* Ecran "content de vous revoir" : s'affiche a la connexion quand une
   inscription est en cours, avec un vrai choix -- pas un compte a
   rebours qui deciderait a la place de la personne (voir js/auth.js). */
.login__step--reprise { min-height: 280px; justify-content: center; }
.reprise-accueil {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
  animation: repriseAccueilEntree .5s var(--ease-standard) both;
}
.reprise-accueil__pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-xs);
  border-radius: 50%;
  background: var(--brand-gradient-diag);
  color: var(--on-dark);
  box-shadow: 0 14px 30px -10px rgba(47, 37, 104, .55);
  animation: repriseAccueilPastille .6s var(--ease-standard) .1s both;
}
.reprise-accueil__detail {
  max-width: 320px;
  margin-bottom: var(--space-xs);
  color: var(--ink-muted-80);
  font-size: var(--text-body-size);
  line-height: 1.5;
}
.reprise-accueil .btn { width: 100%; }
#reprise-recommencer { color: var(--ink-muted-80); }
@keyframes repriseAccueilEntree {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes repriseAccueilPastille {
  from { opacity: 0; transform: scale(.6); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reprise-accueil, .reprise-accueil__pastille { animation: none; }
}

/* Rappel de l'offre choisie, repris du paramètre ?offre= de l'URL. */
.login__offre {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background: var(--action-tint);
  box-shadow: inset 0 0 0 1px var(--action-tint-strong);
}
.login__offre-nom {
  font-size: var(--text-caption-strong-size);
  font-weight: var(--text-caption-strong-weight);
  letter-spacing: var(--text-caption-strong-ls);
  color: var(--action-focus);
}
.login__offre-detail {
  font-size: var(--text-caption-size);
  line-height: 1.45;
  letter-spacing: var(--text-caption-ls);
  color: var(--ink-muted-80);
}

.login__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* minmax(0, 1fr) et pas 1fr : même raison que .parcours__duo, sinon le
   second champ déborde de la carte sur un écran étroit. */
.login__duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-sm);
}

/* ------------------------------------------------ Connexion par un tiers */

.login__federated {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.federated__mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}
/* La pomme est monochrome et suit le texte ; le G de Google garde ses couleurs. */
.federated__mark--apple { color: var(--ink); }
.btn--ghost:hover .federated__mark--apple { color: var(--action-focus); }

/* Mention légale sous les boutons tiers : le parcours Apple / Google n'a pas
   de case à cocher, l'acceptation doit donc être énoncée là. */
.login__note {
  margin-top: var(--space-xxs);
  font-size: var(--text-fine-size);
  line-height: 1.5;
  letter-spacing: var(--text-fine-ls);
  color: var(--ink-muted-48);
}
.login__note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.login__note a:hover { color: var(--action-focus); }

.login__switch {
  font-size: var(--text-caption-size);
  letter-spacing: var(--text-caption-ls);
  color: var(--ink-muted-80);
}
.login__switch a { color: var(--text-link); text-decoration: none; }
.login__switch a:hover { color: var(--action-focus); text-decoration: underline; }

/* Séparateur « ou » : deux filets qui prennent la place restante. */
.login__ou {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: var(--text-caption-size);
  letter-spacing: var(--text-caption-ls);
  color: var(--ink-muted-48);
}
.login__ou::before,
.login__ou::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hairline);
}

.login__title {
  font-family: var(--font-display);
  font-size: var(--text-display-md-size);
  font-weight: var(--text-display-md-weight);
  line-height: 1.15;
  letter-spacing: var(--text-display-md-ls);
  color: var(--ink);
}

.login__lede {
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  letter-spacing: var(--text-body-ls);
  color: var(--ink-muted-80);
}

.login__link {
  display: inline-block;
  padding: 12px 0;       /* zone cliquable de 44 px, sans bouger la mise en page */
  margin: -12px 0;
  width: max-content;
  font-size: var(--text-caption-size);
  letter-spacing: var(--text-caption-ls);
  color: var(--text-link);
  text-decoration: none;
}
.login__link:hover { color: var(--action-focus); text-decoration: underline; }

.login__back {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  width: max-content;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-caption-size);
  letter-spacing: var(--text-caption-ls);
  color: var(--action);
  text-align: left;
}
.login__back:hover { color: var(--action-focus); text-decoration: underline; }

/* Mention légale sous le bouton de création de compte. */
.login__legal {
  font-size: var(--text-caption-size);
  line-height: 1.5;
  letter-spacing: var(--text-caption-ls);
  color: var(--ink-muted-48);
  text-wrap: pretty;
}
.login__legal a {
  color: var(--text-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.login__legal a:hover { color: var(--action-focus); }

/* Passage d'une page d'authentification à l'autre. */
.login__switch {
  font-size: var(--text-caption-size);
  letter-spacing: var(--text-caption-ls);
  color: var(--ink-muted-80);
}
.login__switch a {
  font-weight: 600;
  color: var(--text-link);
  text-decoration: none;
}
.login__switch a:hover { color: var(--action-focus); text-decoration: underline; }

.login__seal {
  margin-top: var(--space-sm);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-fine-size);
  line-height: 1.4;
  letter-spacing: var(--text-fine-ls);
  color: var(--ink-muted-48);
}
.login__seal svg { flex: 0 0 auto; }

/* ------------------------------------------------------------------- Champs */
/* Reproduit SentinelleFinDesignSystem.Input, forme pilule. */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.field__label {
  font-size: var(--text-caption-strong-size);
  font-weight: var(--text-caption-strong-weight);
  letter-spacing: var(--text-caption-strong-ls);
  color: var(--ink);
}

.field__box {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--control-height);
  padding: 0 20px;
  background: var(--canvas);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--border-input);
  transition: box-shadow var(--dur-fast) var(--ease-standard);
}
.field__box:focus-within { box-shadow: inset 0 0 0 2px var(--action-focus); }
.field:has(.field__input[aria-invalid="true"]) .field__box { box-shadow: inset 0 0 0 2px var(--signal-critique); }

.field__input {
  flex: 1;
  min-width: 0;
  appearance: none;
  border: 0;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: var(--text-body-size);
  letter-spacing: var(--text-body-ls);
  color: var(--ink);
}
.field__input::placeholder { color: var(--ink-muted-48); }
/* Le champ porte déjà l’anneau de focus du groupe. */
.field__input:focus-visible { box-shadow: none; }

.field__reveal {
  appearance: none;
  border: 0;
  background: transparent;
  /* Zone cliquable de 45 px (l'icône en fait 17) sans bouger la mise en page : marge
     négative égale au remplissage. WCAG 2.5.8 demande 24 px au minimum, et un doigt
     de 70 ans plus. */
  padding: 14px;
  margin: -14px;
  flex: 0 0 auto;
  display: inline-flex;
  cursor: pointer;
  color: var(--ink-muted-48);
  transition: color var(--dur-fast) var(--ease-standard);
}
.field__reveal:hover { color: var(--action-focus); }

.field__hint {
  font-size: var(--text-caption-size);
  line-height: 1.45;
  letter-spacing: var(--text-caption-ls);
  color: var(--ink-muted-48);
}

.field__error {
  font-size: var(--text-caption-size);
  letter-spacing: var(--text-caption-ls);
  color: var(--signal-critique);
}

.field__hint {
  font-size: var(--text-caption-size);
  line-height: 1.45;
  letter-spacing: var(--text-caption-ls);
  color: var(--ink-muted-48);
}
/* Quand une erreur s'affiche, elle remplace l'indication. */
.field:has(.field__error:not([hidden])) .field__hint { display: none; }

/* ------------------------------------------------------------------- Case */
/* Reproduit SentinelleFinDesignSystem.Checkbox. */

.check {
  display: flex;
  gap: var(--space-sm);
  /* Le libellé peut passer sur deux lignes : la case s'aligne sur la première,
     pas sur le centre du bloc. */
  align-items: flex-start;
  cursor: pointer;
}

.check__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.check__box {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: var(--radius-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--canvas);
  box-shadow: inset 0 0 0 1px var(--hairline);
  color: var(--on-action);
  transition: background var(--dur-fast) var(--ease-standard);
}
.check__box svg { opacity: 0; transition: opacity var(--dur-fast) var(--ease-standard); }

.check__input:checked + .check__box { background: var(--action); box-shadow: none; }
.check__input:checked + .check__box svg { opacity: 1; }
.check__input:focus-visible + .check__box { box-shadow: var(--ring-focus); }

.check__input[aria-invalid="true"] + .check__box { box-shadow: inset 0 0 0 2px var(--signal-critique); }

.check__label {
  font-size: var(--text-body-size);
  line-height: 1.45;
  letter-spacing: var(--text-body-ls);
  color: var(--ink);
}
.check__label a { color: var(--text-link); text-decoration: underline; text-underline-offset: 2px; }
.check__label a:hover { color: var(--action-focus); }

/* -------------------------------------------------------- Code à six chiffres */

.otp {
  display: flex;
  gap: 10px;
}

.otp__digit {
  width: 52px;
  height: 60px;
  min-width: 0;
  flex: 1 1 52px;
  appearance: none;
  border: 0;
  outline: none;
  border-radius: var(--radius-md);
  background: var(--canvas);
  box-shadow: inset 0 0 0 1px var(--border-input);
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-lead-size);
  font-weight: 600;
  color: var(--ink);
  transition: box-shadow var(--dur-fast) var(--ease-standard);
}
.otp__digit:focus,
.otp__digit:focus-visible { box-shadow: inset 0 0 0 2px var(--action-focus); }

/* ------------------------------------------------------------- Colonne droite */

.login__aside {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(150deg,
    var(--brand-3) 0%,
    var(--action-focus) 38%,
    var(--brand-5) 72%,
    var(--brand-6) 100%);
}

.login__quote,
.login__promesse { padding: var(--space-xxl); }

.login__promesse-titre {
  font-family: var(--font-display);
  font-size: var(--text-lead-size);
  font-weight: 600;
  line-height: var(--text-lead-lh);
  letter-spacing: var(--text-lead-ls);
  color: var(--on-dark);
  /* La césure est portée par un <br> dans le balisage : la ligne de marque est
     faite de deux phrases, elle doit casser entre elles et nulle part ailleurs. */
  max-width: 18em;
}

.login__promesse-titre > span { display: block; }

.login__points {
  margin: var(--space-lg) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 30em;
}
.login__points li {
  position: relative;
  padding-left: var(--space-lg);
  font-size: var(--text-caption-size);
  line-height: 1.55;
  letter-spacing: var(--text-caption-ls);
  color: rgba(255, 255, 255, .85);
  text-wrap: pretty;
}
.login__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .6);
}

.login__quote { padding: var(--space-xxl); }

.login__quote blockquote p {
  font-family: var(--font-display);
  font-size: var(--text-lead-size);
  font-weight: var(--text-lead-weight);
  line-height: var(--text-lead-lh);
  letter-spacing: var(--text-lead-ls);
  color: var(--on-dark);
  max-width: 18em;
  text-wrap: pretty;
}

.login__quote figcaption {
  margin-top: var(--space-md);
  font-size: var(--text-caption-size);
  letter-spacing: var(--text-caption-ls);
  color: rgba(255, 255, 255, .85);
}

/* Colonne droite de l'inscription : ce qui se passe après la création du compte.
   Le design system n'a pas d'écran d'inscription : ces trois étapes reprennent
   mot pour mot les promesses déjà faites sur la landing. */
.login__promesse { padding: var(--space-xxl); }

.login__promesse-titre {
  font-family: var(--font-display);
  font-size: var(--text-lead-size);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.3px;
  color: var(--on-dark);
  text-wrap: pretty;
}

.etapes {
  margin: var(--space-xl) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 26em;
}

.etape {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: var(--text-caption-size);
  line-height: 1.55;
  letter-spacing: var(--text-caption-ls);
  color: rgba(255, 255, 255, .88);
  text-wrap: pretty;
}

.etape__num {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .16);
  font-size: var(--text-fine-size);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--on-dark);
}

/* ============================================================================
   Adaptatif : la maquette est dessinée en deux colonnes égales.
   ========================================================================== */

@media (max-width: 1100px) {
  .login { grid-template-columns: 1fr minmax(320px, 460px); }
  .login__quote,
  .login__promesse { padding: var(--space-xl); }
}

@media (max-width: 860px) {
  .login {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .login__panel {
    min-height: 100svh;
    padding: var(--space-xxl) var(--space-lg);
  }
  .login__aside { min-height: 320px; }
  .login__quote,
  .login__promesse { padding: var(--space-xl) var(--space-lg); }
  .login__quote blockquote p { font-size: var(--text-lead-airy-size); }
}

@media (max-width: 420px) {
  .login__panel { padding: var(--space-xl) var(--space-md); }
  .login__logo img { height: 44px; }
  .otp { gap: 6px; }
  .otp__digit { height: 54px; font-size: var(--text-display-md-size); }
  .login__duo { grid-template-columns: minmax(0, 1fr); }
}

/* Message d'erreur portant sur le formulaire entier, pas sur un champ.
   Volontairement sobre : « Adresse e-mail ou mot de passe incorrect »
   ne dit jamais laquelle des deux est fausse : la difference indiquerait
   a un inconnu quelles adresses ont un compte chez nous. */
.login__avis {
  margin: var(--space-sm) 0 0;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  background: var(--signal-critique-tint);
  color: var(--ink-muted-80);
  font-size: var(--text-caption-size);
  line-height: 1.45;
}

/* Boutons de connexion tierce. Le conteneur reste vide (donc invisible)
   tant qu'aucun fournisseur n'est configure : c'est ce qui garantit qu'on
   n'affiche jamais un bouton qui ne fait rien. */
.fournisseurs:empty { display: none; }
.fournisseurs {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.fournisseurs .btn { gap: var(--space-xs); }
.fournisseurs__ou {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: var(--space-xs) 0 0;
  font-size: var(--text-caption-size);
  color: var(--ink-muted-80);
}
.fournisseurs__ou::before,
.fournisseurs__ou::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hairline);
}


/* ============================================================================
   Mot de passe oublié : confirmation d'envoi
   ========================================================================== */
.login__envoye { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); text-align: center; padding: var(--space-md) 0 var(--space-xs); }
.login__envoye[hidden] { display: none; }
.login__envoye-pastille {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: var(--action-focus);
  background: linear-gradient(145deg, color-mix(in srgb, var(--action) 24%, #fff), color-mix(in srgb, var(--action) 8%, #fff));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--action) 38%, transparent), 0 14px 26px -14px color-mix(in srgb, var(--action) 80%, transparent);
}
.login__envoye-titre { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--ink); }
.login__envoye .login__link { margin-top: var(--space-xs); }

/* ============================================================================
   Connexion et inscription : même format qu'avant (le formulaire d'abord, la promesse de la marque ensuite), mieux fini.
   Champs plus ronds avec leur icône, « Mot de passe oublié ? » sur la ligne du mot de passe, bouton avec une flèche, et les trois
   points de la promesse dans des pastilles à icône. Le fond de la promesse est le dégradé de la marque (indigo vers violet), avec
   des ondes de sonar en filigrane. Tout est limité à `.login--soigne` : les autres pages qui utilisent ce fichier ne bougent pas.
   Les icônes sont des masques SVG : elles prennent la couleur du texte, sans image à charger.
   ========================================================================== */
.login--soigne {
  --i-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='m4 8 8 5.5L20 8'/%3E%3C/svg%3E");
  --i-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='9' rx='2.5'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
  --i-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='2.5' width='10' height='19' rx='2.6'/%3E%3Cpath d='M11 18.5h2'/%3E%3C/svg%3E");
  --i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-5-5 5 5-5 5'/%3E%3C/svg%3E");
  --i-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4.5 6v5.5c0 4.4 3.1 8.1 7.5 9.5 4.4-1.4 7.5-5.1 7.5-9.5V6Z'/%3E%3Cpath d='m9 12 2.2 2.2L15.5 10'/%3E%3C/svg%3E");
  --i-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9a6 6 0 1 1 12 0c0 6 2.5 7.5 2.5 7.5h-17S6 15 6 9Z'/%3E%3Cpath d='M10 20a2 2 0 0 0 4 0'/%3E%3C/svg%3E");
  --i-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='m11 12 8-8m-3 3 3 3'/%3E%3C/svg%3E");
  --i-ban: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m5.6 5.6 12.8 12.8'/%3E%3C/svg%3E");
  --i-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  /* Le dégradé de la marque tel qu'il est depuis toujours côté ordinateur : indigo, violet, puis lavande en bas à droite. */
  --soigne-fond: linear-gradient(150deg, var(--brand-3) 0%, var(--action-focus) 38%, var(--brand-5) 72%, var(--brand-6) 100%);
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --i-croix: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
  --soigne-bord: #ddd8ef;
  --soigne-icone: #8a84b3;
}

/* Deux colonnes : le formulaire prend 65 %, la promesse 35 %. */
.login--soigne { grid-template-columns: minmax(0, 65fr) minmax(0, 35fr); }

/* Côté formulaire : le blanc de toujours, avec une lumière douce dans les coins. */
.login--soigne .login__panel {
  background:
    radial-gradient(640px 420px at 6% 0%, #e9e4fb 0%, transparent 70%),
    radial-gradient(520px 380px at 100% 100%, #f1ecfc 0%, transparent 70%),
    var(--canvas);
}
.login--soigne .login__stack { max-width: 410px; gap: 16px; }
.login--soigne .login__step { gap: 16px; }
.login--soigne .login__title { font-size: 32px; font-weight: 700; letter-spacing: -.015em; line-height: 1.15; color: var(--brand-1); }
/* Trois niveaux, pas un seul rythme de 16 px : la marque est discrète et isolée au-dessus (logo plus petit,
   40 px d'air dessous), le titre s'appuie sur le formulaire qu'il annonce (26 px dessous). */
.login--soigne .login__logo { margin-bottom: 24px; }
.login--soigne .login__logo img { height: 40px; }
.login--soigne .login__title { margin-bottom: 10px; }

/* Champs : coins arrondis, anneau net, léger relief, icône à gauche. */
.login--soigne .field { gap: 8px; }
.login--soigne .field__label { font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--brand-1); }
.login--soigne .field__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.login--soigne .field__row .login__link { padding: 10px 0; margin: -10px 0; font-size: 12.5px; font-weight: 600; letter-spacing: 0; color: var(--action-focus); }
.login--soigne .field__box {
  height: 54px; padding: 0 16px; gap: 12px; border-radius: 16px;
  box-shadow: inset 0 0 0 1.5px var(--soigne-bord), 0 10px 22px -18px rgba(45, 33, 92, .6);
}
.login--soigne .field__box:focus-within { box-shadow: inset 0 0 0 2px var(--action-focus), 0 10px 22px -16px rgba(66, 55, 122, .7); }
.login--soigne .field:has(.field__input[aria-invalid="true"]) .field__box { box-shadow: inset 0 0 0 2px var(--signal-critique); }
.login--soigne .field__input { font-size: 15px; }
.login--soigne .field__box:has(> .field__input[type="email"])::before,
.login--soigne .field__box:has(> .field__input[autocomplete$="password"])::before,
.login--soigne .field__box:has(> .field__input[type="tel"])::before {
  content: ""; flex: 0 0 19px; width: 19px; height: 19px; background: var(--soigne-icone);
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.login--soigne .field__box:has(> .field__input[type="email"])::before { --ico: var(--i-mail); }
.login--soigne .field__box:has(> .field__input[autocomplete$="password"])::before { --ico: var(--i-lock); }
.login--soigne .field__box:has(> .field__input[type="tel"])::before { --ico: var(--i-phone); }
.login--soigne .field__box:focus-within::before { background: var(--action-focus); }

.login--soigne .check__box { border-radius: 7px; box-shadow: inset 0 0 0 1.5px #bdb6d9; }
.login--soigne .check__input:checked + .check__box { box-shadow: none; }
.login--soigne .check__label { font-size: 14px; color: #3a3560; }

/* Bouton : dégradé de la marque, relief, flèche. */
.login--soigne .btn--large.btn--action {
  height: 56px; border-radius: 16px; font-size: 16px; font-weight: 600; gap: 10px;
  background: linear-gradient(135deg, var(--brand-2), var(--action-focus) 60%, var(--brand-5));
  box-shadow: 0 20px 32px -16px rgba(66, 55, 122, .9);
}
.login--soigne .btn--large.btn--action:hover { filter: brightness(1.07); }
.login--soigne .btn--large.btn--action::after {
  content: ""; width: 19px; height: 19px; background: currentColor;
  -webkit-mask: var(--i-arrow) center / contain no-repeat; mask: var(--i-arrow) center / contain no-repeat;
}

.login--soigne .login__switch { text-align: center; font-size: 14px; color: #4a4170; }
.login--soigne .login__switch a { white-space: nowrap; }
.login--soigne .login__seal { justify-content: center; margin-top: 0; }

/* Côté promesse : le dégradé de la marque, les ondes, et les trois points dans des cartes à icône. */
.login--soigne .login__aside {
  background: var(--soigne-fond);
}
.login--soigne .login__aside::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-radial-gradient(circle at 92% 8%, rgba(255, 255, 255, .11) 0 1.5px, transparent 1.5px 52px);
  -webkit-mask: radial-gradient(circle at 92% 8%, #000, transparent 72%); mask: radial-gradient(circle at 92% 8%, #000, transparent 72%);
}
.login--soigne .login__promesse { position: relative; width: 100%; max-width: 620px; padding: 56px 40px; }
.login--soigne .login__promesse-titre { font-size: clamp(23px, 2.1vw, 30px); font-weight: 700; line-height: 1.3; max-width: none; text-shadow: 0 2px 22px rgba(25, 20, 62, .35); }
.login--soigne .login__promesse-titre > span { text-wrap: balance; }
.login--soigne .login__points { margin-top: 28px; gap: 14px; max-width: none; }
.login--soigne .login__points li {
  position: relative; min-height: 72px; padding: 16px 18px 16px 76px; border-radius: 20px;
  font-size: 14.5px; line-height: 1.5; letter-spacing: 0; color: rgba(255, 255, 255, .94);
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 18px 30px -24px rgba(25, 20, 62, .5);
}
.login--soigne .login__points li::before {
  content: ""; position: absolute; left: 18px; top: 16px; width: 40px; height: 40px; border-radius: 13px;
  background: rgba(255, 255, 255, .18); box-shadow: none;
}
.login--soigne .login__points li::after {
  content: ""; position: absolute; left: 28px; top: 26px; width: 20px; height: 20px; background: #fff;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.login--soigne .login__points li[data-icone="shield"] { --ico: var(--i-shield); }
.login--soigne .login__points li[data-icone="bell"] { --ico: var(--i-bell); }
.login--soigne .login__points li[data-icone="key"] { --ico: var(--i-key); }
.login--soigne .login__points li[data-icone="ban"] { --ico: var(--i-ban); }
.login--soigne .login__points li[data-icone="clock"] { --ico: var(--i-clock); }

@media (max-width: 1100px) {
  .login--soigne { grid-template-columns: minmax(0, 1fr) minmax(340px, 40%); }
  .login--soigne .login__promesse { padding: 48px 32px; }
}

/* ----------------------------------------------------------------- Téléphone */
/* Marges de 22 px de chaque côté, rythme de 16 px. Le formulaire d'abord ; dessous, la promesse dans une carte arrondie en dégradé,
   qui garde les mêmes marges que les champs (elle ne touche plus les bords de l'écran). */
@media (max-width: 860px) {
  .login--soigne {
    display: flex; flex-direction: column; min-height: 100svh;
    background:
      radial-gradient(640px 420px at 6% 0%, #e9e4fb 0%, transparent 70%),
      radial-gradient(520px 380px at 100% 100%, #f1ecfc 0%, transparent 70%),
      var(--canvas);
  }

  .login--soigne .login__panel { flex: 0 0 auto; min-height: 0; align-items: flex-start; padding: 28px 22px 26px; background: none; }
  .login--soigne .login__stack { max-width: none; }
  .login--soigne .login__logo { margin-bottom: 14px; }
  .login--soigne .login__logo img { height: 32px; }
  .login--soigne .login__title { font-size: 28px; margin-bottom: 6px; }

  .login--soigne .login__aside {
    flex: 0 0 auto; min-height: 0; justify-content: center; align-items: flex-start;
    margin: 0 22px calc(22px + env(safe-area-inset-bottom, 0px)); border-radius: 28px;
    box-shadow: 0 26px 40px -28px rgba(45, 33, 92, .7);
  }
  .login--soigne .login__aside::before {
    background: repeating-radial-gradient(circle at 104% 108%, transparent 0 38px, rgba(255, 255, 255, .075) 38px 39px);
    -webkit-mask: none; mask: none;
  }
  .login--soigne .login__promesse { max-width: none; padding: 26px 22px 8px; }
  .login--soigne .login__promesse-titre { font-size: clamp(17px, 5.1vw, 21px); line-height: 1.25; }
  .login--soigne .login__promesse-titre > span { text-wrap: balance; }
  .login--soigne .login__points { margin-top: 14px; gap: 0; }
  .login--soigne .login__points li {
    min-height: 0; padding: 16px 0 16px 52px; border-radius: 0; background: none; box-shadow: none;
    border-top: 1px solid rgba(255, 255, 255, .22); font-size: 14px;
  }
  .login--soigne .login__points li::before { left: 0; top: 13px; width: 36px; height: 36px; border-radius: 12px; }
  .login--soigne .login__points li::after { left: 8px; top: 21px; width: 20px; height: 20px; }
}
/* Prénom et nom côte à côte dès 361 px (en dessous, l'un au-dessus de l'autre, comme avant). */
@media (max-width: 860px) and (min-width: 361px) {
  .login--soigne .login__duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ============================================================================
   Inscription en deux étapes : l'offre, puis le compte (avec le panier).
   ========================================================================== */
.login--soigne .login__etape {
  font-size: 12px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; color: var(--action-focus);
}
.login--soigne .login__lede strong { color: var(--brand-1); font-weight: 600; }

/* Étape 1 : deux cartes à cocher. L'entrée est cachée, la carte (le label) la remplace : tout reste utilisable au clavier. */
.choix-offre { display: grid; gap: 12px; }
.choix-offre__item { position: relative; }
.choix-offre__radio { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.choix-offre__carte {
  position: relative; display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 16px; border-radius: 20px;
  background: #fff; box-shadow: inset 0 0 0 1.5px var(--soigne-bord), 0 12px 26px -20px rgba(45, 33, 92, .6);
  transition: box-shadow var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.choix-offre__radio:hover + .choix-offre__carte { box-shadow: inset 0 0 0 1.5px var(--brand-5), 0 12px 26px -20px rgba(45, 33, 92, .6); }
.choix-offre__radio:checked + .choix-offre__carte {
  background: linear-gradient(160deg, #fff 0%, var(--action-tint) 100%);
  box-shadow: inset 0 0 0 2px var(--action-focus), 0 18px 32px -22px rgba(66, 55, 122, .8);
}
.choix-offre__radio:focus-visible + .choix-offre__carte { outline: 3px solid color-mix(in srgb, var(--action-focus) 45%, transparent); outline-offset: 2px; }
.choix-offre__tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.choix-offre__nom { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--brand-1); }
.choix-offre__essai {
  padding: 4px 11px; border-radius: 999px; background: var(--action-tint-strong); color: var(--action-focus);
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.choix-offre__ruban {
  position: absolute; top: -10px; right: 16px; padding: 3px 10px; border-radius: 999px; background: var(--brand-1); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
}
.choix-offre__prix { font-size: 14px; color: var(--ink-muted-80); }
.choix-offre__prix b { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--brand-1); }
.choix-offre__point { position: relative; padding-left: 26px; font-size: 14px; line-height: 1.45; color: #3a3560; }
.choix-offre__point--cle { font-weight: 600; color: var(--brand-1); }
.choix-offre__point::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 17px; height: 17px; background: var(--action-focus);
  -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat;
}
.choix-offre__point--non { color: var(--ink-muted-48); }
.choix-offre__point--non::before {
  background: var(--ink-muted-48);
  -webkit-mask: var(--i-croix) center / contain no-repeat; mask: var(--i-croix) center / contain no-repeat;
}

/* Étape 2 : le rappel de l'offre (téléphone) et le panier (colonne de droite, ordinateur). */
.login--soigne .login__offre { gap: 4px; padding: 14px 16px; border-radius: 16px; }
.login--soigne .login__offre-modifier { width: max-content; font-size: 13px; font-weight: 600; color: var(--action-focus); }
.panier {
  margin-bottom: 30px; padding: 22px; border-radius: 22px; background: #fff; color: var(--ink);
  box-shadow: 0 26px 44px -30px rgba(25, 20, 62, .75);
}
.panier__titre { margin: 0 0 12px; font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--brand-1); }
.panier__ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 11px 0; border-top: 1px solid #ece9f6; font-size: 14px; }
.panier__ligne b { font-weight: 700; white-space: nowrap; color: var(--brand-1); }
.panier__ligne--offre p { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.panier__ligne--offre b { font-size: 15px; }
.panier__ligne--offre span { font-size: 13px; color: var(--ink-muted-80); }
.panier__ligne--offre a { font-size: 13px; font-weight: 600; color: var(--action-focus); }
.panier__total { display: flex; justify-content: space-between; align-items: baseline; margin: 4px 0 0; padding: 14px 0 2px; border-top: 2px solid var(--brand-1); font-size: 15px; font-weight: 600; }
.panier__total b { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--brand-1); }
.panier__note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-muted-80); }
@media (max-width: 860px) {
  .panier { display: none; }                       /* sur téléphone : le rappel au-dessus du formulaire suffit */
}
@media (min-width: 861px) {
  .login--soigne .login__offre { display: none; }  /* sur ordinateur : le panier est dans la colonne de droite */
  .login--soigne.login--paiement .login__offre { display: flex; }  /* l'écran de paiement n'a pas de panier à droite : le rappel de l'offre reste dans la carte */
}

/* Rythme de paiement (étape 1) : Mensuel / Annuel, comme sur la page Tarifs. */
.choix-rythme {
  display: inline-flex; align-self: flex-start; gap: 4px; padding: 4px; border-radius: 999px; background: var(--action-tint);
  box-shadow: inset 0 0 0 1px var(--action-tint-strong);
}
.choix-rythme__bouton {
  appearance: none; border: 0; background: transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-muted-80);
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.choix-rythme__bouton.is-active { background: #fff; color: var(--brand-1); box-shadow: 0 6px 14px -8px rgba(45, 33, 92, .55); }
.choix-rythme__bouton:focus-visible { outline: 3px solid color-mix(in srgb, var(--action-focus) 45%, transparent); outline-offset: 2px; }
.choix-rythme__remise { padding: 2px 8px; border-radius: 999px; background: var(--action-tint-strong); color: var(--action-focus); font-size: 12px; font-weight: 700; }
.choix-offre__equiv { margin-top: -4px; font-size: 13px; color: var(--ink-muted-80); }

/* ---- Connexion en carte (même esprit que Carefull) ---------------------------------------------------------
   Colonne de gauche : le logo centré au-dessus d'une carte blanche arrondie sur un fond lilas très doux ; titre
   centré, champs, bouton, lien de création de compte et mention de sécurité dessous. Seule la page de connexion
   (login--carte) ; la colonne de promesse à droite et les champs ne changent pas. Les étapes « mot de passe
   oublié » et « reprise d'inscription » prennent la même carte. */
.login--carte .login__panel {
  background:
    radial-gradient(560px 360px at 8% 0%, #e9e4fb 0%, transparent 70%),
    radial-gradient(480px 340px at 100% 100%, #e6e0f8 0%, transparent 70%),
    #f4f2fa;
}
.login--carte .login__stack { max-width: 456px; gap: 0; }
.login--carte .login__logo { margin: 0 auto 26px; }
.login--carte .login__logo img { height: 40px; }
.login--carte .login__step {
  gap: 20px;
  padding: 36px 36px 30px;
  background: var(--canvas);
  border: 1px solid #e8e3f6;
  border-radius: 24px;
  box-shadow: 0 1px 2px rgba(45, 33, 92, .05), 0 28px 50px -30px rgba(45, 33, 92, .38);
}
.login--carte .login__title { margin: 0 0 4px; text-align: center; font-size: 28px; }
.login--carte .login__seal { margin-top: 22px; justify-content: center; text-align: center; }
/* Les étapes annexes suivent le titre centré : phrase d'explication et lien de retour au milieu. */
.login--carte .login__lede { text-align: center; }
.login--carte .login__form > .login__link { align-self: center; }

@media (max-width: 900px) {
  /* En colonne, c'est la page entière qui porte le lilas (la colonne de gauche n'a plus de fond propre). */
  .login--carte { background: radial-gradient(560px 360px at 8% 0%, #e9e4fb 0%, transparent 70%), #f4f2fa; }
  .login--carte .login__panel { padding: 26px 16px 22px; background: none; }
  .login--carte .login__stack { max-width: none; }
  .login--carte .login__logo { margin-bottom: 20px; }
  .login--carte .login__logo img { height: 32px; }
  .login--carte .login__step { padding: 26px 20px 22px; gap: 18px; border-radius: 22px; }
  .login--carte .login__title { font-size: 25px; }
}

/* Les liens dans un avis de formulaire (par exemple « adresse déjà associée à un compte » : se connecter, réinitialiser). */
.login__avis a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }