/* ============================================================================
   SentinelleFin : le parcours d'inscription, de la carte bancaire au
   tableau de bord.

   Un seul fichier pour les six écrans qui se suivent (paiement, fuites,
   qui protéger, activation, protections, terminé) : ils partagent la même
   grammaire : un écran centré, une barre de progression, des cartes qu'on
   choisit. Les séparer aurait dupliqué les trois quarts des règles.

   Tout vient des tokens du design system. Le mouvement aussi : --dur-base
   et --ease-standard, jamais une durée inventée. Et tout le mouvement
   s'efface d'un bloc si la personne a demandé moins d'animations : sur un
   produit destiné à des gens de 80 ans, ce réglage n'est pas décoratif.
   ========================================================================== */

/* ------------------------------------------------------------ Mouvement */

@keyframes monte {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes gonfle {
  from { opacity: 0; transform: scale(.9); }
  to   { opacity: 1; transform: none; }
}

@keyframes trace {
  from { stroke-dashoffset: 60; }
  to   { stroke-dashoffset: 0; }
}

@keyframes halo-derive {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(0, -18px, 0) scale(1.06); }
}

@keyframes secousse {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}

@keyframes pouls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(115, 111, 182, .38); }
  70%      { box-shadow: 0 0 0 14px rgba(115, 111, 182, 0); }
}

/* ------------------------------------------------------- Écran centré */
/* Le parcours d'inscription n'a PAS la barre latérale de l'application :
   on ne propose pas de naviguer ailleurs tant que la configuration n'est
   pas finie. Même parti pris que les pages de connexion. */

.parcours {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--canvas);
  overflow: clip;
}

/* Deux voiles de marque, très dilués, qui donnent du fond au blanc sans
   jamais passer derrière du texte à lire. Décoratifs : aria-hidden par
   construction, ce sont des pseudo-éléments. */
.parcours::before,
.parcours::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: var(--radius-pill);
  pointer-events: none;
  /* Pas de filtre flou (filter: blur) : le dégradé est déjà doux ; un flou calculé en direct sur une grande surface faisait planter Safari sur iPhone. */
}

.parcours::before {
  top: -160px;
  left: -120px;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(115, 111, 182, .32) 0%, rgba(115, 111, 182, .16) 38%, transparent 72%);
  animation: halo-derive 14s var(--ease-standard) infinite alternate;
}

.parcours::after {
  right: -140px;
  bottom: -180px;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(183, 174, 201, .38) 0%, rgba(183, 174, 201, .18) 38%, transparent 72%);
  animation: halo-derive 18s var(--ease-standard) infinite alternate-reverse;
}

.parcours__entete,
.parcours__corps,
.etapes-barre { position: relative; z-index: 1; }

.parcours__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-xl);
}

.parcours__logo { display: block; width: max-content; }
.parcours__logo img { height: 34px; width: auto; }

.parcours__corps {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl) var(--space-xl) var(--space-section);
  text-align: center;
}

.parcours__bloc {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

/* L'écran entre par le bas, ses éléments l'un après l'autre. Le décalage
   se voit à peine mais donne l'impression d'un contenu qui se pose. */
.parcours__bloc:not([hidden]) > * {
  animation: monte var(--dur-slow) var(--ease-standard) both;
}
.parcours__bloc:not([hidden]) > *:nth-child(2) { animation-delay: 60ms; }
.parcours__bloc:not([hidden]) > *:nth-child(3) { animation-delay: 120ms; }
.parcours__bloc:not([hidden]) > *:nth-child(4) { animation-delay: 180ms; }
.parcours__bloc:not([hidden]) > *:nth-child(5) { animation-delay: 240ms; }

.parcours__titre {
  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);
  text-wrap: balance;
}

/* Le dégradé de marque sur le titre : réservé aux écrans de bascule
   (résultat, félicitations), jamais sur un écran de saisie où il
   volerait l'attention des champs. */
.parcours__titre--marque {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.parcours__texte {
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  letter-spacing: var(--text-body-ls);
  color: var(--ink-muted-80);
  max-width: 34em;
  text-wrap: pretty;
}

.parcours__texte strong { font-weight: 600; color: var(--ink); }

.parcours__actions {
  margin-top: var(--space-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  max-width: 320px;
}

/* Lien discret « passer cette étape » : présent, jamais mis en avant. */
.parcours__passer {
  appearance: none;
  border: 0;
  background: transparent;
  padding: var(--space-xs);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-caption-size);
  letter-spacing: var(--text-caption-ls);
  color: var(--ink-muted-48);
  transition: color var(--dur-fast) var(--ease-standard);
}
.parcours__passer:hover { color: var(--action-focus); text-decoration: underline; }

.parcours__illustration {
  margin-bottom: var(--space-xs);
  animation: gonfle var(--dur-slow) var(--ease-standard) both;
}

/* Le trait de la coche se dessine : c'est le seul endroit du parcours où
   le mouvement porte du sens, il confirme que quelque chose est acquis. */
.parcours__illustration [data-trace] {
  stroke-dasharray: 60;
  animation: trace var(--dur-slow) var(--ease-standard) 180ms both;
}

/* retour-banque.html : un arc qui tourne pendant l'echange du code contre
   un jeton (quelques centaines de ms a quelques secondes). Retire des que
   l'etat passe a « reussi » ou « echec » (voir js/retour-banque.js) :
   une attente qui se termine doit le montrer, pas continuer de tourner. */
.retour-banque__anneau {
  color: var(--brand-4);
  animation: tourne 1.1s linear infinite;
}
@keyframes tourne {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .retour-banque__anneau { animation: none; }
}

/* ------------------------------------------------ Barre de progression */
/* Trois étapes nommées, jamais un simple « 2 / 3 » : on dit ce qui reste
   à faire, pas seulement combien. */

.etapes-barre {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border-bottom: 1px solid var(--hairline);
  background: var(--canvas);
}

.etapes-barre__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-sm);
  font-size: var(--text-caption-strong-size);
  font-weight: var(--text-caption-strong-weight);
  letter-spacing: var(--text-caption-strong-ls);
  color: var(--ink-muted-48);
  transition: color var(--dur-base) var(--ease-standard);
}

/* Le remplissage glisse de la gauche vers la droite quand l'étape
   devient active ou faite, au lieu d'apparaître d'un coup. Le dégradé
   distingue l'étape EN COURS (diagonale de marque) de l'étape FAITE
   (couleur unie) : les deux passent en texte blanc, mais ne se
   confondent pas. */
.etapes-barre__item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--brand-gradient-diag);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-standard),
              background var(--dur-base) var(--ease-standard);
}
.etapes-barre__item > * { position: relative; z-index: 1; }

.etapes-barre__item--active { color: var(--on-dark); }
.etapes-barre__item--active::before { transform: scaleX(1); }

.etapes-barre__item--faite { color: var(--on-dark); }
.etapes-barre__item--faite::before {
  background: var(--action-focus);
  transform: scaleX(1);
}

.etapes-barre__puce {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 2px currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-base) var(--ease-standard);
}
.etapes-barre__item--active .etapes-barre__puce { background: var(--on-dark); box-shadow: none; }

/* Une étape faite porte un petit crochet, pas juste un rond plein :
   c'est ce qui la distingue au premier coup d'œil de l'étape en cours. */
.etapes-barre__item--faite .etapes-barre__puce { background: transparent; box-shadow: none; }
.etapes-barre__item--faite .etapes-barre__puce::after {
  content: "";
  width: 7px;
  height: 4px;
  margin-top: -2px;
  border-left: 2px solid var(--on-dark);
  border-bottom: 2px solid var(--on-dark);
  transform: rotate(-45deg);
}
.etapes-barre__item--faite .etapes-barre__puce { background: var(--action-focus); box-shadow: none; }

/* --------------------------------------------------------- Cartes de choix */
/* Sert deux fois : « qui protéger » et « quelle offre ». Une carte cochée
   se voit au liseré ET au fond, jamais à la couleur seule : un écran mal
   calibré ou un daltonien ne doit pas perdre l'information. */

.cartes {
  display: grid;
  gap: var(--space-md);
  width: 100%;
  text-align: left;
}
.cartes--deux { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.carte-choix {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--canvas);
  box-shadow: var(--ring-hairline);
  cursor: pointer;
  font: inherit;
  text-align: left;
  overflow: hidden;
  transition: box-shadow var(--dur-base) var(--ease-standard),
              background var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard);
}

/* Un filet de marque monte du bas au survol : la couleur arrive par
   l'interaction, pas par défaut. */
.carte-choix::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--brand-gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-standard);
}

.carte-choix:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px var(--action-tint-strong),
              0 10px 26px -18px rgba(66, 55, 122, .55);
}
.carte-choix:hover::after { transform: scaleX(1); }
.carte-choix:focus-visible { outline: 2px solid var(--action-focus); outline-offset: 2px; }
.carte-choix:active { transform: scale(var(--press-scale)); }

.carte-choix--active {
  background: var(--action-tint);
  box-shadow: inset 0 0 0 2px var(--action-focus);
}
.carte-choix--active::after { transform: scaleX(1); }

.carte-choix__titre {
  font-size: var(--text-body-strong-size);
  font-weight: var(--text-body-strong-weight);
  letter-spacing: var(--text-body-strong-ls);
  color: var(--ink);
}

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

.carte-choix__prix {
  margin-top: var(--space-xxs);
  font-family: var(--font-display);
  font-size: var(--text-lead-size);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.3px;
  color: var(--ink);
}
.carte-choix__prix span {
  font-family: inherit;
  font-size: var(--text-caption-size);
  font-weight: 400;
  color: var(--ink-muted-48);
}

.carte-choix__remise {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  padding: 3px var(--space-xs);
  border-radius: var(--radius-pill);
  background: var(--signal-sur-tint);
  font-size: var(--text-fine-size);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--signal-sur);
}

/* ---------------------------------------------------- Cartes de personnes */
/* Reprend la grille de cartes, mais pour des gens : une place occupée
   porte les initiales, une place libre porte un plus. */

.places {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
  width: 100%;
}

.place {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: 190px;
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--canvas);
  box-shadow: var(--ring-hairline);
  font: inherit;
  text-align: center;
  animation: gonfle var(--dur-base) var(--ease-standard) both;
}

/* Une place occupée porte un liseré de marque sur la gauche : elle se
   distingue d'une place libre même en noir et blanc. */
.place:not(.place--vide) {
  background:
    linear-gradient(var(--canvas), var(--canvas)) padding-box,
    var(--brand-gradient) border-box;
  border: 2px solid transparent;
}

.place--vide {
  background: var(--surface-deep);
  box-shadow: none;
  color: var(--on-dark);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.place--vide:hover {
  background: var(--brand-3);
  transform: translateY(-3px);
  box-shadow: 0 16px 34px -20px rgba(25, 20, 62, .8);
}
.place--vide:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.place--vide:active { transform: scale(var(--press-scale)); }

.place__pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-pill);
  background: var(--brand-gradient-diag);
  font-size: var(--text-body-strong-size);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--on-dark);
  transition: transform var(--dur-base) var(--ease-standard);
}
.place--vide .place__pastille {
  background: rgba(255, 255, 255, .16);
  color: var(--on-dark);
}
.place--vide:hover .place__pastille { transform: scale(1.08) rotate(90deg); }

.place__nom {
  font-size: var(--text-body-strong-size);
  font-weight: var(--text-body-strong-weight);
  letter-spacing: var(--text-body-strong-ls);
  color: inherit;
}

.place__role {
  font-size: var(--text-caption-size);
  letter-spacing: var(--text-caption-ls);
  color: var(--ink-muted-48);
}
.place--vide .place__role { color: var(--on-dark-muted); }

/* --------------------------------------------------------------- Rappel */
/* Récapitulatif en lecture seule : ce qu'on sait déjà de la personne,
   pour ne jamais redemander deux fois la même chose. */

.recap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm) var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--canvas-parchment);
}

.recap__item { display: flex; flex-direction: column; gap: 2px; }

.recap__label {
  font-size: var(--text-fine-size);
  letter-spacing: var(--text-fine-ls);
  color: var(--ink-muted-48);
}

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

/* ------------------------------------------------------ Carte formulaire */

.parcours__carte {
  width: 100%;
  max-width: 460px;
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  background: var(--canvas);
  box-shadow: 0 18px 44px -28px rgba(66, 55, 122, .55), var(--ring-hairline);
  text-align: left;
}

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

/* ------------------------------------------------------- Menu déroulant */
/* Un <select> natif ouvre une liste que le navigateur dessine lui-même :
   police système, pas de dégradé, aucune prise possible dessus. Ce menu
   la remplace par des <li> ordinaires, entièrement à nous. La valeur
   vit dans un input caché (data-erreur dessus), lu et validé par le
   même valider()/marquer() que les autres champs -- rien de spécifique
   à écrire pour ce formulaire-ci. */

.menu-champ { position: relative; }

.menu-champ__bouton {
  width: 100%;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  position: relative;
}
.menu-champ__bouton::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 2px solid var(--ink-muted-48);
  border-bottom: 2px solid var(--ink-muted-48);
  transform: rotate(45deg);
  transition: transform var(--dur-fast) var(--ease-standard);
  pointer-events: none;
}
.menu-champ__bouton[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: -2px; }

.menu-champ__valeur { color: var(--ink-muted-48); }
.menu-champ__bouton--rempli .menu-champ__valeur { color: var(--ink); }

.menu-champ__liste {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: 280px;
  overflow-y: auto;
  margin: 0;
  padding: var(--space-xs) 0;
  list-style: none;
  background: var(--canvas);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 44px -22px rgba(25, 20, 62, .5), var(--ring-hairline);
  animation: monte var(--dur-fast) var(--ease-standard) both;
}
.menu-champ__liste[hidden] { display: none; }

.menu-champ__liste li {
  padding: 11px 20px;
  font-size: var(--text-body-size);
  letter-spacing: var(--text-body-ls);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
}
.menu-champ__liste li:hover,
.menu-champ__liste li[aria-selected="true"] {
  background: var(--action-tint);
  color: var(--action-focus);
}

/* minmax(0, 1fr) et pas 1fr : sans ça une grille refuse de réduire ses
   colonnes sous la largeur du contenu, et le second champ débordait de
   la carte. */
.parcours__duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-sm);
}

/* Champ fautif : le rouge arrive AVEC une secousse. La couleur seule ne
   suffit pas à attirer l'œil de quelqu'un qui lit lentement. */
.field--fautif .field__box { animation: secousse var(--dur-slow) var(--ease-standard); }
.field--fautif .field__label { color: var(--signal-critique); }

/* Bandeau d'erreur au-dessus du formulaire, quand on tente de passer une
   étape obligatoire. */
.parcours__alerte {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background: var(--signal-critique-tint);
  box-shadow: inset 0 0 0 1px rgba(210, 38, 79, .22);
  font-size: var(--text-caption-size);
  line-height: 1.45;
  letter-spacing: var(--text-caption-ls);
  color: var(--signal-critique);
  text-align: left;
  animation: monte var(--dur-base) var(--ease-standard) both;
}
.parcours__alerte svg { flex: 0 0 auto; margin-top: 2px; }
.parcours__alerte[hidden] { display: none; }

/* Balayage du radar de l'ecran « la surveillance est en place » : le
   seul mouvement de cet ecran, et il dit quelque chose de vrai (une
   vérification qui tourne), il ne décore pas. */
.radar {
  transform-origin: 84px 64px;
  animation: balayage 4s linear infinite;
}
@keyframes balayage {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------- Modale */
/* Le « passer » de l'étape bancaire ouvre une question, pas un mur : on
   demande pourquoi, et la réponse ne bloque jamais le passage. */

.modale[hidden] { display: none; }

.modale {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  background: rgba(25, 20, 62, .5);
  backdrop-filter: blur(3px);
  animation: gonfle var(--dur-fast) var(--ease-standard);
}

.modale__boite {
  position: relative;
  width: 100%;
  max-width: 440px;
  padding: var(--space-xxl) var(--space-xl) var(--space-xl);
  border-radius: var(--radius-lg);
  background: var(--canvas);
  box-shadow: var(--shadow-subject);
  text-align: left;
  animation: monte var(--dur-base) var(--ease-standard) both;
}

/* Le dégradé de marque en tête de modale : c'est le seul rappel de
   couleur, la boîte reste blanche pour que le texte prime. */
.modale__boite::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--brand-gradient);
}

.modale__fermer {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--canvas-parchment);
  cursor: pointer;
  color: var(--ink-muted-48);
  transition: color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.modale__fermer:hover { color: var(--ink); background: var(--action-tint); }

.modale__titre {
  font-family: var(--font-display);
  font-size: var(--text-lead-size);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.3px;
  color: var(--ink);
}

.modale__texte {
  margin-top: var(--space-sm);
  font-size: var(--text-caption-size);
  line-height: 1.55;
  letter-spacing: var(--text-caption-ls);
  color: var(--ink-muted-80);
}

.modale__choix {
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.modale__raison {
  width: 100%;
  padding: var(--space-md);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--canvas);
  box-shadow: inset 0 0 0 1px var(--action-tint-strong);
  cursor: pointer;
  font: inherit;
  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);
  text-align: center;
  transition: background var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.modale__raison:hover {
  background: var(--action-tint);
  box-shadow: inset 0 0 0 1px var(--action);
  transform: translateY(-1px);
}
.modale__raison:active { transform: scale(var(--press-scale)); }

/* ------------------------------------------------------------- Rappels */
/* La liste « ce qu'il vous faut » de l'écran d'activation. */

.besoins {
  margin: 0;
  padding: var(--space-lg);
  list-style: none;
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, var(--action-tint), var(--canvas-parchment));
  box-shadow: inset 0 0 0 1px var(--action-tint-strong);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  text-align: left;
  width: 100%;
}

.besoin {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  animation: monte var(--dur-base) var(--ease-standard) both;
}
.besoin:nth-child(2) { animation-delay: 90ms; }
.besoin:nth-child(3) { animation-delay: 180ms; }

.besoin__texte {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

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

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

.besoin__icone {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--canvas);
  box-shadow: 0 4px 10px -6px rgba(66, 55, 122, .5);
  color: var(--action-focus);
}

/* Mention de chiffrement sous la liste : une promesse, pas une décoration. */
.parcours__sceau {
  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);
}

/* ------------------------------------------------------- Écran de fin */

.parcours--fin { background: var(--brand-gradient-diag); }
.parcours--fin::before,
.parcours--fin::after { background: radial-gradient(circle, rgba(255, 255, 255, .18), transparent 70%); }
.parcours--fin .parcours__titre { color: var(--on-dark); }
.parcours--fin .parcours__texte { color: rgba(255, 255, 255, .88); }
.parcours--fin .parcours__passer { color: rgba(255, 255, 255, .85); text-decoration: none; }
.parcours--fin .parcours__passer:hover { color: var(--on-dark); }

/* Bouton posé sur le dégradé : l'inverse du bouton d'action habituel.
   Le contraste vient du blanc plein, jamais d'un contour seul. */
.btn--clair {
  background: var(--canvas);
  color: var(--brand-1);
  animation: pouls 2.6s var(--ease-standard) 600ms 3;
}
.btn--clair:hover { background: var(--action-tint); color: var(--brand-1); }

/* ------------------------------------------------------------ Adaptatif */

@media (max-width: 640px) {
  .parcours__entete { padding: var(--space-md) var(--space-md); }
  .parcours__corps { padding: var(--space-lg) var(--space-md) var(--space-xxl); }
  .parcours__titre { font-size: var(--text-lead-size); }
  .parcours__carte { padding: var(--space-lg); }
  .parcours__duo { grid-template-columns: minmax(0, 1fr); }
  .recap { grid-template-columns: minmax(0, 1fr); }
  .etapes-barre__item span:not(.etapes-barre__puce) { display: none; }
}

/* ------------------------------------------------- Mouvement en moins */
/* Réglage système, pas une préférence esthétique : vertiges, migraines,
   troubles vestibulaires. On coupe tout, y compris les halos de fond. */

@media (prefers-reduced-motion: reduce) {
  .parcours::before,
  .parcours::after,
  .parcours__bloc:not([hidden]) > *,
  .parcours__illustration,
  .parcours__illustration [data-trace],
  .place,
  .besoin,
  .modale,
  .modale__boite,
  .parcours__alerte,
  .field--fautif .field__box,
  .menu-champ__liste,
  .btn--clair,
  .radar {
    animation: none !important;
  }
  .carte-choix,
  .carte-choix::after,
  .place--vide,
  .place__pastille,
  .etapes-barre__item::before,
  .modale__raison {
    transition: none !important;
  }
  .carte-choix:hover,
  .place--vide:hover { transform: none; }
}

/* ═════════════ Dossier immobilier du parcours (protections.html, étape Logement) ═════════════
   Les mêmes champs que « Faire suivre un bien » (immobilier.html), en clair : le parcours est sur fond blanc. */
.parcours__carte--large { max-width: 560px; }
.immo-dossier { gap: var(--space-sm); }
.immo-dossier .field { margin: 0; }
.immo-dossier__section { margin: var(--space-md) 0 0; font-size: var(--text-body-strong-size, 1.0625rem); font-weight: 600; color: var(--brand-1); }
.immo-dossier__section:first-child { margin-top: 0; }
.immo-dossier__note { margin: 0; font-size: var(--text-caption-size); line-height: 1.5; color: var(--ink-muted-80); }
.immo-dossier__separateur { width: 100%; margin: var(--space-md) 0; border: 0; border-top: 1px solid var(--hairline-alpha, rgba(66, 55, 122, .14)); }

.immo-dossier__choix { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.immo-dossier__choix label {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; min-height: 40px;
  border: 1.5px solid var(--hairline-alpha, rgba(66, 55, 122, .22)); border-radius: 999px;
  font-size: var(--text-caption-size); color: var(--ink); cursor: pointer; background: var(--canvas);
}
.immo-dossier__choix label:has(input:checked) { border-color: var(--action); background: var(--action-tint); color: var(--brand-1); font-weight: 600; }
.immo-dossier__choix input { accent-color: var(--action); }
.immo-dossier__choix--petit label { padding: 6px 12px; min-height: 34px; }

.immo-dossier__proprio {
  display: flex; flex-direction: column; gap: var(--space-sm); margin: 0 0 var(--space-sm);
  padding: var(--space-md); border-radius: var(--radius-md, 14px); background: var(--action-tint);
}
.immo-dossier__proprio-entete { display: flex; align-items: center; justify-content: space-between; }
.immo-dossier__proprio-numero { font-size: var(--text-caption-size); font-weight: 600; color: var(--brand-1); }
.immo-dossier__retirer {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border: 1px solid var(--hairline-alpha, rgba(66, 55, 122, .22)); border-radius: 50%; background: var(--canvas);
  color: var(--ink-muted-80); cursor: pointer;
}
.immo-dossier__retirer:hover { border-color: var(--signal-critique); color: var(--signal-critique); }
.immo-dossier__retirer:focus-visible, .immo-dossier__ajouter:focus-visible { outline: 2px solid var(--action-focus); outline-offset: 2px; }
.immo-dossier__ajouter {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; align-self: flex-start;
  padding: 9px 16px; min-height: 40px; border: 1.5px dashed var(--action); border-radius: 999px;
  background: none; color: var(--action); font: inherit; font-size: var(--text-caption-size); font-weight: 600; cursor: pointer;
}
.immo-dossier__ajouter:hover { background: var(--action-tint); }
.immo-dossier .check__label { font-size: var(--text-caption-size); line-height: 1.5; }
@media (max-width: 560px) {
  .immo-dossier__ajouter { width: 100%; }
  .immo-dossier__retirer { width: 40px; height: 40px; }
}

/* Une personne de confiance déjà ajoutée reste modifiable : la carte est un bouton. */
.place--modifiable { cursor: pointer; border-width: 2px; transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); }
.place--modifiable:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -22px rgba(66, 55, 122, .6); }
.place--modifiable:focus-visible { outline: 2px solid var(--action-focus); outline-offset: 2px; }
.place--modifiable:active { transform: scale(var(--press-scale)); }
.place__modifier { margin-top: 2px; font-size: var(--text-caption-size); font-weight: 600; color: var(--action); text-decoration: underline; text-underline-offset: 3px; }
.parcours__passer--danger { color: var(--signal-critique); }
@media (prefers-reduced-motion: reduce) { .place--modifiable:hover { transform: none; } }

/* L'écran « compte bancaire connecté » prend la place des blocs de l'étape argent : ses enfants se rangent comme les leurs. */
#argent-connecte:not([hidden]) { display: contents; }

/* ═════════════ Le rail violet (à droite) ═════════════
   Tout le parcours partage la même mise en page : un rail violet permanent à droite (le logo, la liste des étapes quand il y en a,
   un rappel de confiance), un fond gris très clair à gauche pour le travail. Même violet que l'écran de fin, et même côté que la
   colonne violette de la page d'inscription : la personne ne change pas de monde en passant de l'une à l'autre.
   Le rail est posé par js/parcours-rail.js ; sans lui, l'écran garde sa mise en page centrée d'avant.
   Un seul rail pour tous les écrans : les étapes (`.etapes-barre`) n'y sont que déplacées, js/protections.js continue de les piloter. */

.parcours--rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(340px, 32vw, 440px);
  grid-template-rows: auto 1fr;
  background: var(--canvas-parchment);
}
.parcours--rail::before,
.parcours--rail::after { display: none; }
.parcours--rail > .parcours__entete { grid-column: 1; grid-row: 1; }
.parcours--rail > .parcours__corps { grid-column: 1; grid-row: 2; }
.parcours--rail > .parcours__rail { grid-column: 2; grid-row: 1 / span 2; }

/* Le logo est dans le rail : l'en-tête ne garde que « Retour », « Passer » et « Se déconnecter », et disparaît s'il n'a rien d'autre. */
.parcours--rail .parcours__entete .parcours__logo { display: none; }
.parcours--rail .parcours__entete { display: none; justify-content: flex-end; padding: var(--space-lg) var(--space-xxl) 0; }
.parcours--rail .parcours__entete:has(.parcours__passer:not([hidden])) { display: flex; }
.parcours--rail #retour { margin-right: auto; }
.parcours--rail .parcours__corps { padding-left: var(--space-xxl); padding-right: var(--space-xxl); }

.parcours__rail {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  height: 100svh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 40px 44px 36px;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(900px 600px at 92% 100%, rgba(183, 174, 201, .38), transparent 62%),
    linear-gradient(150deg, var(--brand-1) 0%, var(--brand-3) 46%, #6862ab 100%);
}
/* La marque, très pâle, en bas à droite : un repère, jamais du texte à lire par-dessus. */
.parcours__rail::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -70px;
  bottom: 40px;
  width: 340px;
  height: 340px;
  background: url("../assets/brand/icone-blanc-256.png") center / contain no-repeat;
  opacity: .06;
  pointer-events: none;
}
.parcours__rail-logo { display: block; width: max-content; }
.parcours__rail-logo img { display: block; height: 36px; width: auto; }

/* Les étapes, à la verticale : rond numéroté, fil qui les relie, étape en cours entourée d'un halo. */
.parcours__rail .etapes-barre {
  display: grid;
  grid-auto-flow: row;
  grid-auto-columns: auto;
  margin-top: clamp(32px, 9vh, 72px);
  border: 0;
  background: none;
  counter-reset: pas;
}
.parcours__rail .etapes-barre__item {
  counter-increment: pas;
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  justify-content: start;
  gap: 16px;
  padding: 0 0 28px;
  text-align: left;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
  color: rgba(255, 255, 255, .72);
}
.parcours__rail .etapes-barre__item:last-child { padding-bottom: 0; }
.parcours__rail .etapes-barre__item--active,
.parcours__rail .etapes-barre__item--faite { color: #fff; }

/* Le fil entre deux ronds (l'ancien remplissage horizontal n'existe plus). */
.parcours__rail .etapes-barre__item::before,
.parcours__rail .etapes-barre__item--active::before,
.parcours__rail .etapes-barre__item--faite::before {
  inset: auto;
  left: 16px;
  top: 38px;
  bottom: 4px;
  width: 2px;
  transform: none;
  background: rgba(255, 255, 255, .25);
}
.parcours__rail .etapes-barre__item--faite::before { background: rgba(255, 255, 255, .7); }
.parcours__rail .etapes-barre__item:last-child::before { display: none; }

.parcours__rail .etapes-barre__puce,
.parcours__rail .etapes-barre__item--active .etapes-barre__puce,
.parcours__rail .etapes-barre__item--faite .etapes-barre__puce {
  width: 34px;
  height: 34px;
  background: transparent;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .4);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}
.parcours__rail .etapes-barre__puce::before { content: counter(pas); }
.parcours__rail .etapes-barre__item--active .etapes-barre__puce {
  background: #fff;
  color: var(--brand-2);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .18);
}
.parcours__rail .etapes-barre__item--faite .etapes-barre__puce { background: rgba(255, 255, 255, .92); box-shadow: none; }
.parcours__rail .etapes-barre__item--faite .etapes-barre__puce::before { content: ""; }
.parcours__rail .etapes-barre__item--faite .etapes-barre__puce::after {
  width: 12px;
  height: 6px;
  margin-top: -3px;
  border-left: 2.5px solid var(--brand-2);
  border-bottom: 2.5px solid var(--brand-2);
}

.parcours__rail-note {
  margin: auto 0 0;
  padding: 18px 20px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  font-size: 14px;
  line-height: 1.55;
  text-wrap: pretty;
}

/* Écrans bas : on resserre les étapes pour qu'elles tiennent sans défiler. */
@media (min-width: 960px) and (max-height: 760px) {
  .parcours__rail { padding-top: 28px; padding-bottom: 24px; }
  .parcours__rail .etapes-barre { margin-top: 24px; }
  .parcours__rail .etapes-barre__item { padding-bottom: 18px; }
  .parcours__rail .etapes-barre__item::before { top: 36px; }
}

/* Téléphone et tablette : le rail devient un bandeau violet en haut, les étapes une fine barre segmentée avec leur nom dessous. */
@media (max-width: 959px) {
  .parcours--rail { display: flex; flex-direction: column; }
  .parcours__rail { position: static; align-self: stretch; height: auto; padding: 16px 18px 14px; gap: 14px; }
  .parcours__rail::after,
  .parcours__rail-note { display: none; }
  .parcours__rail-logo img { height: 28px; }
  .parcours__rail .etapes-barre { margin-top: 0; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
  .parcours__rail .etapes-barre__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 0;
    font-size: 11.5px;
    color: rgba(255, 255, 255, .62);
  }
  .parcours__rail .etapes-barre__item--active,
  .parcours__rail .etapes-barre__item--faite { color: #fff; }
  .parcours__rail .etapes-barre__item::before,
  .parcours__rail .etapes-barre__item--active::before,
  .parcours__rail .etapes-barre__item--faite::before,
  .parcours__rail .etapes-barre__item:last-child::before {
    position: static;
    display: block;
    width: auto;
    height: 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .28);
  }
  .parcours__rail .etapes-barre__item--active::before,
  .parcours__rail .etapes-barre__item--faite::before { background: #fff; }
  .parcours__rail .etapes-barre__puce { display: none; }
  .parcours__rail .etapes-barre__item span:not(.etapes-barre__puce) { display: block; }
  .parcours--rail .parcours__entete { padding: var(--space-sm) var(--space-md) 0; }
  .parcours--rail .parcours__corps { padding-left: var(--space-md); padding-right: var(--space-md); }
}

/* Le lien d'évitement garde son ombre quand il apparaît (au clavier) ; caché au-dessus de l'écran, son ombre ne doit pas déborder sur la page. */
.skip-link:not(:focus-visible) { box-shadow: none; }