/* ---------------- Formulaire "Lancer un projet" ----------------
   Consomme uniquement les tokens définis dans :root (style.css).
   --pf-accent est repositionné en JS selon la branche active. */

.pf {
  --pf-accent: var(--violet-light);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100svh;
  min-height: 100vh;
  background: var(--bg);
}

/* ---------------- Fond animé : halos de couleur ---------------- */
.pf__ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.pf__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.55;
  transition: background 1.1s ease, opacity 0.8s ease;
  will-change: transform;
}

.pf__blob--a {
  width: clamp(360px, 46vw, 640px);
  height: clamp(360px, 46vw, 640px);
  top: -12%;
  left: -10%;
  background: var(--pf-accent);
  animation: pf-drift-a 22s ease-in-out infinite;
}

.pf__blob--b {
  width: clamp(280px, 38vw, 520px);
  height: clamp(280px, 38vw, 520px);
  bottom: -14%;
  right: -8%;
  background: var(--violet);
  opacity: 0.4;
  animation: pf-drift-b 26s ease-in-out infinite;
}

@keyframes pf-drift-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(4%, 6%) scale(1.08); }
}
@keyframes pf-drift-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-5%, -4%) scale(1.06); }
}

/* ---------------- Barre supérieure : retour + suivi des grandes étapes ---------------- */
.pf__topbar {
  position: fixed;
  /* La nav mobile est en haut de l'écran (15px + marge 15px + 66px de haut,
     soit ~96px) : la barre de progression se place juste en dessous. */
  top: 108px;
  left: 0;
  right: 0;
  z-index: 20;

  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 0 var(--mobile-padding);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.pf.is-mid-flow .pf__topbar {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.3s ease, visibility 0s;
}

@media (min-width: 1024px) {
  /* Sous la nav fixe (~86px de haut sur desktop) pour ne pas lui disputer les clics */
  .pf__topbar { top: 100px; padding: 0 var(--desktop-padding); }
}

/* ---------------- Bouton retour ---------------- */
.pf__back {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);

  padding: 10px 18px 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));

  color: var(--white);
  font-family: var(--font-base);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  cursor: pointer;

  transition: border-color 0.3s ease, background 0.3s ease;
}

.pf__back:hover {
  border-color: rgba(255, 255, 250, 0.5);
  background: rgba(0, 0, 0, 0.7);
}

.pf__back svg { width: 16px; height: 16px; }

/* ---------------- Suivi des grandes étapes ---------------- */
/* La pastille se dimensionne sur son contenu (pas de flex:1) : elle se centre dans
   l'espace restant à côté du bouton retour, sans s'étirer sur toute la largeur. */
.pf__phases {
  flex: 0 1 auto;
  max-width: 100%;
  margin: 0 auto;

  padding: 10px 20px 12px;
  border-radius: var(--glass-radius);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-shadow);
}

.pf__phases-track {
  display: flex;
  align-items: flex-start;
  list-style: none;
  position: relative;
  gap: 8px;
}

.pf__phase {
  /* Chaque étape se dimensionne sur son propre libellé plutôt que de partager
     une largeur égale : "Contact" et "Votre projet en détail" n'ont pas la même taille. */
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  text-align: center;
}

.pf__phase-dot {
  position: relative;
  z-index: 1;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--text-dim);

  font-family: var(--font-base);
  font-size: 0.75rem;
  font-weight: 700;

  transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

/* Trait de liaison : élément flex à part entière plutôt qu'un pseudo-élément de
   largeur fixe, pour toujours rejoindre le point suivant quelle que soit la largeur
   (variable) de chaque étape. */
.pf__phase-connector {
  flex: 1 1 auto;
  min-width: 12px;
  align-self: flex-start;
  margin-top: 12px;
  height: 2px;
  background: var(--glass-border);
  transition: background 0.4s ease;
}

.pf__phase-connector.is-done {
  background: var(--pf-accent);
}

.pf__phase-check { width: 12px; height: 12px; display: none; }

.pf__phase.is-done .pf__phase-dot {
  background: var(--pf-accent);
  border-color: var(--pf-accent);
  color: var(--white);
}
.pf__phase.is-done .pf__phase-num { display: none; }
.pf__phase.is-done .pf__phase-check { display: block; }

.pf__phase.is-current .pf__phase-dot {
  border-color: var(--pf-accent);
  color: var(--white);
  box-shadow: 0 0 0 4px rgba(255, 255, 250, 0.08);
}

.pf__phase-label {
  display: none;
  font-family: var(--font-base);
  font-size: 0.72rem;
  color: var(--text-faint);
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.pf__phase.is-current .pf__phase-label { color: var(--white); font-weight: 600; }
.pf__phase.is-done .pf__phase-label { color: var(--text-dim); }

@media (min-width: 640px) {
  .pf__phase-label { display: block; }
}

.pf__phases-current {
  display: block;
  text-align: center;
  margin-top: 8px;
  font-family: var(--font-base);
  font-size: 0.72rem;
  color: var(--text-dim);
}

@media (min-width: 640px) {
  .pf__phases-current { display: none; }
}

/* ---------------- Scène ---------------- */
.pf__stage {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* En haut : nav mobile (~96px) + barre de progression (~72px, à partir de
     108px) = 180px occupés. Le contenu commence après. */
  padding: clamp(204px, 26vh, 240px) var(--mobile-padding) clamp(120px, 16vh, 160px);
}

@media (min-width: 1024px) {
  .pf__stage {
    padding: clamp(170px, 22vh, 210px) var(--desktop-padding) clamp(140px, 16vh, 170px);
  }
}

.pf__step {
  display: none;
  width: 100%;
}

.pf__step.is-active {
  display: block;
  animation: pf-step-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.pf__step.is-active.pf__step--reverse {
  animation-name: pf-step-in-reverse;
}

@keyframes pf-step-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pf-step-in-reverse {
  from { opacity: 0; transform: translateY(-18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.pf__step-inner {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}

.pf__step-inner--wide { max-width: 880px; }
.pf__step-inner--narrow { max-width: 620px; }

/* ---------------- Typo commune ---------------- */

/* Repère de branche, au-dessus de la question.
   Il nomme la section du formulaire où l'on se trouve : Vidéo, Site internet,
   Identité de marque, Graphisme, Projet complet. La barre de progression
   annonce « Étape 2 sur 4 : Votre projet en détail » mais jamais la branche,
   c'est donc la seule information que porte ce libellé.
   La couleur de la branche est portée par la pastille, pas par le texte :
   sur fond noir, trois des cinq accents (#3e00ff, #bc0084, #6743ff) tombent
   entre 2,7 et 3,8:1, sous le minimum WCAG AA de 4,5:1 pour ce corps de
   texte. En pastille, la couleur reste lisible comme repère sans que rien
   d'utile ne dépende d'elle. */
.pf__kicker {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 0.78rem;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: var(--space-2xs);
}
.pf__kicker::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pf-accent);
  flex-shrink: 0;
}

.pf__question {
  font-family: var(--font-base);
  font-weight: var(--fw-heading);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: var(--space-sm);
}

.pf__help {
  font-family: var(--font-base);
  font-weight: var(--fw-body);
  font-size: clamp(0.92rem, 1.4vw, 1.05rem);
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 56ch;
  margin-bottom: var(--space-lg);
}

/* ---------------- Landing ---------------- */
.pf__landing {
  text-align: left;
}

.pf__landing-eyebrow {
  font-family: var(--font-base);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: var(--space-md);
}

.pf__landing-title {
  font-family: var(--font-base);
  font-weight: var(--fw-heading);
  font-size: clamp(2.2rem, 6.5vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--white);
  margin-bottom: var(--space-md);
}

.pf__landing-lead {
  font-family: var(--font-base);
  font-weight: var(--fw-body);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 52ch;
  margin-bottom: var(--space-xl);
}

.pf__landing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
}

/* ---------------- Boutons ---------------- */
.pf__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 16px 32px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: var(--gradient-nebulight);
  background-size: 220% 220%;
  animation: pf-gradient-shift 14s ease infinite;

  color: var(--white);
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;

  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, opacity 0.3s ease, filter 0.3s ease;
}

.pf__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 50px -18px rgba(62, 0, 255, 0.55);
}

.pf__btn:active { transform: translateY(0); }

.pf__btn:disabled,
.pf__btn[aria-disabled="true"] {
  opacity: 0.35;
  filter: grayscale(0.4);
  cursor: default;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

@keyframes pf-gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.pf__btn--ghost {
  background: transparent;
  border: 1px solid var(--glass-border);
  animation: none;
}

.pf__btn--ghost:hover {
  background: rgba(255, 255, 250, 0.06);
  border-color: rgba(255, 255, 250, 0.5);
  box-shadow: none;
}

.pf__btn svg { width: 18px; height: 18px; }

/* ---------------- Grille d'options ---------------- */
.pf__options {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

@media (min-width: 640px) {
  .pf__options--grid2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.pf__option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
  width: 100%;

  padding: 18px 44px 18px 22px;
  border-radius: var(--radius);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));

  color: var(--white);
  font-family: var(--font-base);
  cursor: pointer;

  transition: border-color 0.3s ease, background 0.3s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

.pf__option:hover {
  border-color: rgba(255, 255, 250, 0.45);
  transform: translateY(-2px);
}

.pf__option:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}

.pf__option-title {
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
}

.pf__option-sub {
  font-weight: var(--fw-body);
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--text-dim);
}

.pf__option-check {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.pf__option-check svg {
  width: 12px;
  height: 12px;
  color: var(--white);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.pf__option.is-selected {
  border-color: var(--pf-accent);
  background: rgba(255, 255, 250, 0.08);
  box-shadow: 0 0 0 1px var(--pf-accent), 0 18px 40px -22px var(--pf-accent);
  animation: pf-option-pulse 0.45s ease;
}

.pf__option.is-selected .pf__option-check {
  background: var(--pf-accent);
  border-color: var(--pf-accent);
}

.pf__option.is-selected .pf__option-check svg {
  opacity: 1;
  transform: scale(1);
}

@keyframes pf-option-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.025); }
  100% { transform: scale(1); }
}

.pf__options.has-selection .pf__option:not(.is-selected) {
  opacity: 0.55;
}

.pf__options[data-select="single"].has-selection .pf__option:not(.is-selected) {
  opacity: 0.35;
}

/* ---------------- Champs texte ---------------- */
.pf__fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.pf__fields--row {
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .pf__fields--row {
    grid-template-columns: 1fr 1fr;
  }
}

.pf__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pf__field label {
  font-family: var(--font-base);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}

.pf__field .pf__optional-tag {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-faint);
}

.pf__field input,
.pf__field textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 250, 0.04);

  color: var(--white);
  font-family: var(--font-base);
  font-size: 0.98rem;

  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.pf__field textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.55;
}

.pf__field input::placeholder,
.pf__field textarea::placeholder {
  color: var(--text-faint);
}

.pf__field input:focus,
.pf__field textarea:focus {
  outline: none;
  border-color: var(--pf-accent);
  background: rgba(255, 255, 250, 0.07);
  box-shadow: 0 0 0 3px rgba(255, 255, 250, 0.06);
}

.pf__field.is-invalid input,
.pf__field.is-invalid textarea {
  border-color: #ef1800;
}

/* Le sélecteur natif "mois" rend son icône en noir par défaut : invisible sur fond
   sombre, et seul un clic pile sur cette icône ouvrait le calendrier. On l'éclaircit
   et on laisse le JS ouvrir le picker au clic n'importe où dans le champ. */
.pf__field input[type="month"] {
  color-scheme: dark;
  cursor: pointer;
}

.pf__field input[type="month"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.75;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.pf__field input[type="month"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  background: rgba(255, 255, 250, 0.1);
}

/* ---------------- Case à cocher ---------------- */
.pf__checkbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;

  font-family: var(--font-base);
  font-size: 0.88rem;
  color: var(--text-dim);
  margin-bottom: var(--space-lg);
}

.pf__checkbox input {
  width: 18px;
  height: 18px;
  accent-color: var(--pf-accent);
  cursor: pointer;
}

/* ---------------- Budget : curseur + saisie manuelle ---------------- */
.pf__budget {
  margin-bottom: var(--space-md);
}

.pf__budget-display {
  text-align: center;
  margin-bottom: var(--space-sm);
}

.pf__budget-value {
  font-family: var(--font-base);
  font-weight: var(--fw-heading);
  font-size: clamp(2rem, 5vw, 2.75rem);
  letter-spacing: -0.02em;
  color: var(--white);
  transition: color 0.3s ease;
}

.pf__budget.is-unknown .pf__budget-value {
  color: var(--text-dim);
}

.pf__budget-slider {
  --pf-range-fill: 30%;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(to right,
    var(--pf-accent) 0%, var(--pf-accent) var(--pf-range-fill),
    rgba(255, 255, 250, 0.12) var(--pf-range-fill), rgba(255, 255, 250, 0.12) 100%);
  outline: none;
  cursor: pointer;
  margin: var(--space-md) 0 var(--space-xs);
  transition: opacity 0.3s ease;
}

.pf__budget-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--pf-accent);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: transform 0.2s ease;
}
.pf__budget-slider::-webkit-slider-thumb:hover { transform: scale(1.12); }

.pf__budget-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--pf-accent);
  cursor: pointer;
}
.pf__budget-slider::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 250, 0.12);
}
.pf__budget-slider::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--pf-accent);
}

.pf__budget-slider:disabled {
  opacity: 0.35;
  cursor: default;
}

.pf__budget-scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-base);
  font-size: 0.75rem;
  color: var(--text-faint);
  margin-bottom: var(--space-md);
}

.pf__budget-manual {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.pf__budget-manual label {
  font-family: var(--font-base);
  font-size: 0.8rem;
  color: var(--text-dim);
}

.pf__budget-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 250, 0.04);
  transition: border-color 0.3s ease, background 0.3s ease;
}

.pf__budget-input-wrap:focus-within {
  border-color: var(--pf-accent);
  background: rgba(255, 255, 250, 0.07);
}

.pf__budget-input-wrap input {
  width: 110px;
  border: none;
  background: transparent;
  color: var(--white);
  font-family: var(--font-base);
  font-size: 0.95rem;
  outline: none;
}

.pf__budget-input-wrap span {
  color: var(--text-dim);
  font-family: var(--font-base);
  font-size: 0.9rem;
}

.pf__budget.is-unknown .pf__budget-slider,
.pf__budget.is-unknown .pf__budget-manual {
  opacity: 0.35;
  pointer-events: none;
}

/* ---------------- Bloc budget : ordres de grandeur ---------------- */
.pf__budget-helper {
  border-radius: var(--radius);
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 250, 0.035);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
}

.pf__budget-helper h3 {
  font-family: var(--font-base);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: var(--space-xs);
}

.pf__budget-ranges {
  display: grid;
  gap: 6px;
  margin-bottom: var(--space-sm);
}

.pf__budget-ranges div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  font-family: var(--font-base);
  font-size: 0.86rem;
  color: var(--text-dim);
  padding: 6px 0;
  border-bottom: 1px dashed var(--border);
}

.pf__budget-ranges div:last-child { border-bottom: none; }

.pf__budget-ranges strong {
  color: var(--white);
  font-weight: 600;
  white-space: nowrap;
}

.pf__budget-note {
  font-family: var(--font-base);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-faint);
}

/* ---------------- Bandeau de suggestion (réaiguillage) ---------------- */
.pf__hint-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);

  border-radius: var(--radius);
  border: 1px solid var(--glass-border);
  background: rgba(188, 0, 132, 0.08);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-lg);

  font-family: var(--font-base);
  font-size: 0.86rem;
  color: var(--text-dim);

  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.35s ease, max-height 0.35s ease, margin 0.35s ease, padding 0.35s ease;
}

.pf__hint-banner.is-visible {
  opacity: 1;
  max-height: 200px;
}

.pf__hint-banner button {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--white);
  font-family: var(--font-base);
  font-size: 0.8rem;
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.pf__hint-banner button:hover {
  background: rgba(255, 255, 250, 0.08);
  border-color: rgba(255, 255, 250, 0.5);
}

/* ---------------- Actions bas de step ---------------- */
.pf__actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.pf__actions-note {
  font-family: var(--font-base);
  font-size: 0.8rem;
  color: var(--text-faint);
}

/* Bouton "Passer" : discret, pour les questions non indispensables */
.pf__skip {
  padding: 8px 2px;
  border: none;
  background: none;
  color: var(--text-faint);
  font-family: var(--font-base);
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.25s ease;
}

.pf__skip:hover {
  color: var(--text-dim);
}

.pf__actions--skip-only {
  margin-top: calc(-1 * var(--space-sm));
}

/* ---------------- Récapitulatif ---------------- */
.pf__recap-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--border);
  margin-bottom: var(--space-lg);
}

.pf__recap-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

@media (min-width: 640px) {
  .pf__recap-row {
    grid-template-columns: minmax(160px, 34%) 1fr;
    align-items: start;
    gap: var(--space-md);
  }
}

.pf__recap-label {
  display: block;
  font-family: var(--font-base);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-dim);
  padding-top: 10px;
}

.pf__recap-input {
  width: 100%;
  padding: 9px 14px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 250, 0.04);

  color: var(--white);
  font-family: var(--font-base);
  font-size: 0.92rem;
  line-height: 1.5;

  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

textarea.pf__recap-input {
  min-height: 64px;
  resize: vertical;
}

.pf__recap-input:focus {
  outline: none;
  border-color: var(--pf-accent);
  background: rgba(255, 255, 250, 0.07);
  box-shadow: 0 0 0 3px rgba(255, 255, 250, 0.06);
}

/* ---------------- Merci ---------------- */
.pf__thanks {
  text-align: left;
}

.pf__thanks-star {
  width: 68px;
  height: auto;
  color: var(--white);
  margin-bottom: var(--space-lg);
  animation: pf-thanks-breathe 3.4s ease-in-out infinite;
  filter: drop-shadow(0 0 40px rgba(103, 67, 255, 0.5));
}

@keyframes pf-thanks-breathe {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(1.08) rotate(6deg); }
}

/* ---------------- Divers ---------------- */
@media (max-width: 639px) {
  .pf__landing-actions { flex-direction: column; align-items: stretch; }
  .pf__btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .pf__blob,
  .pf__btn,
  .pf__step,
  .pf__thanks-star,
  .pf__option {
    animation: none !important;
  }
}

/* ═══════════ Ajouts rédactionnels ═══════════ */
.pf__landing-note{
  margin-top:1.4rem;
  font-size:.82rem;
  letter-spacing:.01em;
  color:rgba(255,255,255,.42);
  max-width:34ch;
}
.pf__privacy{
  margin-top:1.1rem;
  font-size:.8rem;
  line-height:1.55;
  color:rgba(255,255,255,.40);
  max-width:52ch;
}
.pf__help a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:.18em;
}

/* ── Piège à robots : masqué visuellement, jamais lu par un lecteur d'écran ── */
.pf__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ── Message d'échec d'envoi ── */
.pf__send-error {
  margin-top: 0.85rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #ffac0e;
}
.pf__send-error a { color: inherit; }

/* ── Bouton d'envoi pendant la requête ── */
.pf__btn[aria-busy="true"] {
  opacity: 0.6;
  pointer-events: none;
}

/* ---------------- Barre supérieure sur petit écran ----------------
   Avec la nav en haut, cette barre est désormais bien visible sous elle.
   Sur 375 px, le bouton « Retour » et la pastille de progression ne tenaient
   pas sur la ligne : la pastille débordait de 10 px à droite. Le bouton se
   réduit au chevron (son aria-label conserve le libellé), la pastille prend
   la place libérée et son texte peut passer à la ligne. */
@media (max-width: 639px) {
  .pf__topbar {
    gap: var(--space-xs);
    padding: 0 var(--space-sm);
  }
  .pf__back {
    padding: 10px 12px;
  }
  .pf__back span {
    display: none;
  }
  .pf__phases {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 8px 14px 10px;
  }
  .pf__phases-current {
    white-space: normal;
  }
}