/* =============================================================================
   CONFIGURATEUR GUIDÉ — .ct-fit-finder (page /tarifs/)
   -----------------------------------------------------------------------------
   Bloc « Trouver le bon budget » : questionnaire court (5 à 8 écrans selon le
   parcours) qui estime un besoin en crédits, puis réutilise CONFIG.tiers du
   curseur de tarification (js/ct-pricing-configurator.js, exposé en
   `window.ctPricing`) pour le convertir en prix — une seule source de vérité
   tarifaire pour tout le site (voir js/ct-fit-finder.js).

   Ne correspond à aucun des 56 blocs du catalogue `.ct-ui` (assistant
   question-par-question, à embranchements) : construit à partir de primitives
   déjà cataloguées — `<dialog>` natif, `<fieldset>`/`<input>` natifs (bloc 29,
   accessibles nativement au clavier et aux lecteurs d'écran), `.ct-plan` du
   bloc 16 pour les trois résultats, `.ct-alert--info` du bloc 28 pour la note
   commerciale. Voir ECARTS.md pour la décision. Tokens uniquement, aucune
   valeur en dur hors les deux exceptions documentées ci-dessous (barre de
   progression et remplissage du track), au même titre que `--ct-cfg-fill`
   du curseur de tarification.
   ========================================================================== */

.ct-fit-finder {
  width: min(720px, calc(100vw - var(--ct-space-lg) * 2));
  max-height: min(720px, calc(100vh - var(--ct-space-xl) * 2));
  margin: auto;
  padding: 0;
  border: none;
  border-radius: var(--ct-radius-lg);
  background-color: var(--ct-color-bg-alt);
  color: var(--ct-color-text);
  box-shadow: var(--ct-shadow-md);
  overflow: hidden;
}
.ct-fit-finder[open] { display: flex; flex-direction: column; }
/* Convention du projet : aucun reset global `[hidden] { display:none }` — une
   classe de composant qui pose son propre `display` (ex. `.ct-btn`) l'emporte
   sinon sur l'attribut natif. Une seule règle couvre ici tout le bloc plutôt
   qu'une par élément (bouton précédent, étape, erreur, résultat, contact). */
.ct-fit-finder [hidden] { display: none; }
/* Fond du calque natif du <dialog> : reprend la teinte encre de
   --ct-color-primary (#1A1F36) en semi-transparent — `::backdrop` n'hérite
   pas de façon fiable des custom properties dans tous les moteurs, la valeur
   est donc recopiée en dur ici, à dessein, plutôt que dans un token partagé. */
.ct-fit-finder::backdrop { background-color: rgba(26, 31, 54, 0.6); }
@media (prefers-reduced-motion: no-preference) {
  .ct-fit-finder { transition: opacity var(--ct-transition-base), transform var(--ct-transition-base), overlay var(--ct-transition-base) allow-discrete, display var(--ct-transition-base) allow-discrete; }
  .ct-fit-finder[open] { opacity: 1; transform: none; }
  .ct-fit-finder:not([open]) { opacity: 0; transform: translateY(8px); }
  @starting-style { .ct-fit-finder[open] { opacity: 0; transform: translateY(8px); } }
}

.ct-fit-finder__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ct-space-md);
  padding: var(--ct-space-lg) var(--ct-space-lg) var(--ct-space-md);
  border-bottom: 1px solid var(--ct-color-border);
  flex-shrink: 0;
}
.ct-fit-finder__eyebrow { margin: 0 0 var(--ct-space-xs); }
.ct-fit-finder__title { margin: 0; font-size: var(--ct-font-size-lg); font-weight: var(--ct-font-weight-bold); }
.ct-fit-finder__close {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: calc(var(--ct-space-sm) * -1);
  border: none;
  border-radius: var(--ct-radius-md);
  background: transparent;
  color: var(--ct-color-text-light);
  cursor: pointer;
}
.ct-fit-finder__close:hover { background-color: var(--ct-color-surface-hover); color: var(--ct-color-text); }

.ct-fit-finder__progress { padding: var(--ct-space-md) var(--ct-space-lg) 0; flex-shrink: 0; }
.ct-fit-finder__progress-track {
  height: 6px;
  border-radius: var(--ct-radius-pill);
  background-color: var(--ct-color-border);
  overflow: hidden;
}
/* --ct-fit-progress : pourcentage d'avancement, posé en JS sur cet élément.
   Même exception documentée que --ct-cfg-fill (bloc 16) : donnée calculée à
   l'exécution, pas une valeur de design. */
.ct-fit-finder__progress-fill {
  display: block;
  height: 100%;
  width: var(--ct-fit-progress, 0%);
  background-color: var(--ct-color-secondary);
  border-radius: inherit;
  transition: width var(--ct-transition-base);
}
.ct-fit-finder__progress-text {
  margin: var(--ct-space-sm) 0 0;
  font-size: var(--ct-font-size-xs);
  color: var(--ct-color-text-light);
}

.ct-fit-finder__body { padding: var(--ct-space-lg); overflow-y: auto; flex: 1; }

.ct-fit-finder__step { border: none; margin: 0; padding: 0; }
.ct-fit-finder__legend {
  padding: 0;
  margin: 0 0 var(--ct-space-xs);
  font-size: var(--ct-font-size-lg);
  font-weight: var(--ct-font-weight-bold);
  line-height: var(--ct-line-height-snug);
}
.ct-fit-finder__hint { margin: 0 0 var(--ct-space-lg); color: var(--ct-color-text-light); font-size: var(--ct-font-size-sm); }

.ct-fit-finder__options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ct-space-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}
.ct-fit-finder__options--single-col { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 560px) { .ct-fit-finder__options { grid-template-columns: minmax(0, 1fr); } }

.ct-fit-finder__option { display: block; margin: 0; }
.ct-fit-finder__option-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip-path: inset(50%);
}
.ct-fit-finder__option-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--ct-space-xs);
  min-height: 44px;
  padding: var(--ct-space-sm) var(--ct-space-md);
  border: 1px solid var(--ct-color-border-strong);
  border-radius: var(--ct-radius-md);
  background-color: var(--ct-color-bg-alt);
  cursor: pointer;
  transition: border-color var(--ct-transition-fast), background-color var(--ct-transition-fast), box-shadow var(--ct-transition-fast);
}
.ct-fit-finder__option-input:hover + .ct-fit-finder__option-card { border-color: var(--ct-color-primary); }
/* Suggestion (pas une sélection) : bordure verte fine, jamais bleue —
   réservée au repère « sélectionné » ci-dessous, pour qu'un visiteur ne
   confonde jamais les deux. :checked l'emporte toujours sur --suggested
   en spécificité CSS (3 classes/pseudo-classes contre 2), donc un
   élément suggéré puis coché bascule automatiquement sur le style
   sélectionné, sans état intermédiaire ambigu. */
.ct-fit-finder__option--suggested .ct-fit-finder__option-card { border-color: var(--ct-color-accent-green); }
.ct-fit-finder__option-badge {
  position: absolute;
  top: -9px;
  right: var(--ct-space-sm);
  padding: 1px 7px;
  border-radius: var(--ct-radius-pill);
  /* Variante -ink, pas l'aplat --accent-green de base : du texte blanc
     directement sur #00C896 échoue le contraste AA (≈2,2:1). -ink
     (#008060) donne ≈4,9:1. */
  background-color: var(--ct-color-accent-green-ink);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: var(--ct-font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--ct-tracking-caps);
  line-height: 1.5;
}
.ct-fit-finder__option-input:checked + .ct-fit-finder__option-card {
  border-color: var(--ct-color-secondary);
  background-color: var(--ct-color-secondary-soft);
  box-shadow: inset 0 0 0 1px var(--ct-color-secondary);
}
.ct-fit-finder__option-input:focus-visible + .ct-fit-finder__option-card {
  outline: var(--ct-focus-width) solid var(--ct-color-secondary);
  outline-offset: var(--ct-focus-offset);
}
.ct-fit-finder__option-input:disabled + .ct-fit-finder__option-card { opacity: 0.45; cursor: not-allowed; }
.ct-fit-finder__option-title { font-weight: var(--ct-font-weight-medium); font-size: var(--ct-font-size-sm); }
.ct-fit-finder__option-desc { font-size: var(--ct-font-size-xs); color: var(--ct-color-text-light); }

.ct-fit-finder__error {
  margin: var(--ct-space-sm) 0 0;
  font-size: var(--ct-font-size-sm);
  color: var(--ct-color-accent-red-ink);
}

.ct-fit-finder__nav {
  display: flex;
  align-items: center;
  gap: var(--ct-space-md);
  padding: var(--ct-space-md) var(--ct-space-lg);
  border-top: 1px solid var(--ct-color-border);
  flex-shrink: 0;
}
/* Marge auto plutôt que justify-content: space-between (retiré ci-dessus) :
   à l'étape 1, #ct-fit-back est masqué (hidden), donc « Suivant » devient
   le seul enfant flex — space-between le place alors à gauche plutôt qu'à
   droite. La marge auto pousse toujours Suivant à droite, que Précédent
   soit visible ou non, sans dépendre du nombre d'enfants présents. */
#ct-fit-next { margin-inline-start: auto; }

/* ---- Résultat -------------------------------------------------------------- */
.ct-fit-finder__result-lead { margin: 0 0 var(--ct-space-lg); }
.ct-fit-finder__result-title { margin: 0 0 var(--ct-space-xs); font-size: var(--ct-font-size-lg); font-weight: var(--ct-font-weight-bold); }
.ct-fit-finder__result-explain { margin: 0; color: var(--ct-color-text-light); font-size: var(--ct-font-size-sm); line-height: var(--ct-line-height-relaxed); }

.ct-fit-finder__plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ct-space-md);
  margin-bottom: var(--ct-space-lg);
}
@media (max-width: 620px) { .ct-fit-finder__plans { grid-template-columns: minmax(0, 1fr); } }
.ct-fit-finder__plans .ct-plan { gap: var(--ct-space-xs); cursor: pointer; transition: border-color var(--ct-transition-fast), box-shadow var(--ct-transition-fast); }

/* Sélection du budget à appliquer : radio masqué (même patron que
   .ct-fit-finder__option-input des questions) + fond teinté sur la carte
   choisie. Volontairement un fond, pas une bordure : .ct-plan--featured
   pose déjà une bordure bleue permanente sur « Recommandé » (c'est notre
   avis éditorial) — un second indicateur de sélection sur la même
   couleur/bordure serait ambigu si l'utilisateur choisit une autre carte.
   Le fond reste lisible qu'il coïncide avec la carte recommandée ou non. */
.ct-fit-finder__plan-option { display: block; margin: 0; }
.ct-fit-finder__plan-option .ct-fit-finder__option-input:hover + .ct-plan { border-color: var(--ct-color-primary); }
.ct-fit-finder__plan-option .ct-fit-finder__option-input:checked + .ct-plan { background-color: var(--ct-color-secondary-soft); }
.ct-fit-finder__plan-option .ct-fit-finder__option-input:focus-visible + .ct-plan {
  outline: var(--ct-focus-width) solid var(--ct-color-secondary);
  outline-offset: var(--ct-focus-offset);
}
.ct-fit-finder__plan-badge {
  align-self: flex-start;
  padding: 2px var(--ct-space-sm);
  border-radius: var(--ct-radius-pill);
  background-color: var(--ct-color-secondary-soft);
  color: var(--ct-color-secondary-aaa);
  font-size: var(--ct-font-size-xs);
  font-weight: var(--ct-font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--ct-tracking-caps);
}
.ct-fit-finder__plan-margin { margin-top: var(--ct-space-xs); font-size: var(--ct-font-size-xs); color: var(--ct-color-text-light); }

.ct-fit-finder__notice { margin-bottom: var(--ct-space-lg); }

.ct-fit-finder__actions { display: flex; flex-wrap: wrap; gap: var(--ct-space-md); }

.ct-fit-finder__contact-title { margin: 0 0 var(--ct-space-sm); font-size: var(--ct-font-size-lg); font-weight: var(--ct-font-weight-bold); }
.ct-fit-finder__contact-text { margin: 0 0 var(--ct-space-lg); color: var(--ct-color-text-light); line-height: var(--ct-line-height-relaxed); }
.ct-fit-finder__contact-direct {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: calc(-1 * var(--ct-space-md)) 0 var(--ct-space-lg);
  font-size: var(--ct-font-size-sm);
  color: var(--ct-color-text-light);
}
.ct-fit-finder__contact-direct .ct-email,
.ct-fit-finder__contact-direct .ct-link { font-weight: var(--ct-font-weight-medium); }
.ct-fit-finder__contact-phone { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }

@media (max-width: 560px) {
  .ct-fit-finder__header,
  .ct-fit-finder__body,
  .ct-fit-finder__nav { padding-left: var(--ct-space-md); padding-right: var(--ct-space-md); }
  .ct-fit-finder__nav { flex-direction: column-reverse; align-items: stretch; }
}