/* ==========================================================================
   components.css — Composants réutilisables du prototype
   --------------------------------------------------------------------------
   Boutons, champs de formulaire, radios, barre de progression, toasts…
   Chaque composant gère ses états : normal / hover / active / focus /
   disabled / erreur, conformément aux contraintes Material + Apple HIG.
   ========================================================================== */

/* ==========================================================================
   Boutons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;          /* cible tactile ≥ 44pt */
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  transition: background var(--t-fast), box-shadow var(--t-fast),
    transform var(--t-fast), opacity var(--t-fast);
  user-select: none;
}

/* Icône de CTA (chevron Lucide « › »), même glyphe que « Renseigner › ». */
.btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.btn:focus-visible {
  box-shadow: var(--focus-ring-blue);
}

/* Retour de pression (feedback tactile) */
.btn:not(:disabled):active {
  transform: scale(.98);
}

.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: .6;
  cursor: not-allowed;
}

/* --- Variante primaire ---------------------------------------------------- */
.btn--primary {
  background: var(--blue-dark);
  color: var(--text-inverse);
}

.btn--primary:not(:disabled):hover {
  background: var(--blue-dark-hover);
}

.btn--primary:not(:disabled):active {
  background: var(--blue-dark-active);
}

/* --- Variante secondaire -------------------------------------------------- */
.btn--secondary {
  background: var(--white);
  color: var(--blue-dark);
  border-color: var(--border-input);
}

.btn--secondary:not(:disabled):hover {
  background: var(--off-white);
}

/* --- Variante fantôme (lien d'action discret, ex. « Retour ») ------------- */
.btn--ghost {
  background: transparent;
  color: var(--blue-dark);
  border-color: transparent;
  padding: 0 10px;
}

.btn--ghost:not(:disabled):hover {
  background: rgba(15, 61, 140, .06);
}

.btn--ghost:not(:disabled):active {
  background: rgba(15, 61, 140, .1);
}

/* --- Variante pleine largeur --------------------------------------------- */
.btn--block {
  width: 100%;
}

/* --- Bouton sur fond FONCÉ (outline clair, hover inversé) -----------------
   Composant autonome (n'hérite pas de .btn) : contour blanc sur panneau
   sombre, texte clair ; au survol, état « inversé » fond clair + texte navy.
   Récurrent : « Se déconnecter » (carte menu / modale compte). */
.btn-on-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--white);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--blue-light);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn-on-dark:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--navy);
  text-decoration: none;
}
.btn-on-dark svg { width: 16px; height: 16px; }

/* --- État chargement : spinner injecté via [data-loading] ---------------- */
.btn[data-loading='true'] {
  pointer-events: none;
  position: relative;
  color: transparent;
}

.btn[data-loading='true']::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--text-inverse);
  animation: btn-spin .6s linear infinite;
}

.btn--secondary[data-loading='true']::after {
  color: var(--blue-dark);
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   Champs de formulaire
   ========================================================================== */
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;                     /* grille 8px : label → champ (réf. boutons « Niveau ») */
  width: 100%;
}

.field__label {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px;              /* léger décalage latéral du bord du champ
                                  (les titres de section, eux, restent flush) */
  font-weight: 600;
  font-size: 14px;
  color: var(--text-muted);
}

/* Marqueur discret « (optionnel) » — seuls les champs facultatifs sont signalés
   (les champs obligatoires ne portent aucun marqueur). */
.field__optional {
  font-weight: 400;
  font-size: 12px;
  color: var(--text-tertiary);
}

.field__help {
  padding: 0 4px;
  font-size: 12px;
  color: var(--text-tertiary);
}

/* --- Wrapper d'input (gère l'icône à gauche + bouton à droite) ----------- */
.input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--input-height);
  background: var(--white);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  /* Transition douce border + halo (~150ms), façon Apple. */
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

/* Focus : bordure accent + halo DOUX et discret (pas d'anneau épais). */
.input-wrap:focus-within {
  border-color: var(--blue-dark);
  box-shadow: var(--focus-halo-blue);
}

/* État rempli : léger renforcement visuel via la valeur saisie (couleur texte) */
.input-wrap input {
  flex: 1;
  height: 100%;
  border: 0;
  background: transparent;
  padding: 0 16px;
  font-size: 14px;
  color: var(--blue-deep);
  border-radius: var(--radius-md);
}

.input-wrap input::placeholder {
  color: var(--text-tertiary);
}

/* Le halo de focus est porté par le wrapper (.input-wrap:focus-within), pas par
   l'input : on neutralise l'outline ET l'anneau global :focus-visible (base.css)
   pour éviter le double contour (anneau bleu de l'input + halo du wrap), qui
   produisait un liseré « bizarre » en focus, pire encore en erreur. */
.input-wrap input:focus,
.input-wrap input:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Neutralise le style « invalide » natif du navigateur (halo rouge/violet de
   Firefox via :-moz-ui-invalid, ombres UA). On pilote l'état erreur nous-mêmes
   via .is-error : jamais de double bordure ni de teinte parasite. */
.input-wrap input:invalid,
.input-wrap input:-moz-ui-invalid {
  box-shadow: none;
}

/* Décalage du padding gauche quand une icône est présente */
.input-wrap--icon input {
  padding-left: 44px;
}

/* Icône d'amorce (gauche) — Lucide, taille standardisée.
   Couleur par défaut des icônes UI : bleu charte (les SVG à fill propre, ex.
   logo LinkedIn, ne sont pas affectés car ils n'héritent pas de currentColor). */
.input-wrap__icon {
  position: absolute;
  left: 14px;
  display: inline-flex;
  width: var(--icon-size);
  height: var(--icon-size);
  pointer-events: none;
  color: var(--blue-dark);
}

.input-wrap__icon svg {
  width: 100%;
  height: 100%;
}

/* Bouton afficher/masquer le mot de passe — sans bordure, icône centrée,
   cible tactile ≥ 44px sans paraître imposant (l'icône reste à 20px). */
.input-wrap__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: 2px;
  border: 0;
  background: transparent;
  color: var(--blue-dark);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color var(--t-fast), background var(--t-fast);
}

.input-wrap__toggle svg {
  width: var(--icon-size);
  height: var(--icon-size);
}

/* Hover discret : très légère teinte, pas d'encadré. */
.input-wrap__toggle:hover {
  color: var(--blue-dark-hover);
  background: rgba(15, 61, 140, .06);
}

.input-wrap__toggle:focus-visible {
  box-shadow: var(--focus-halo-blue);
}

/* Bascule de l'icône œil / œil barré selon l'état pressé (aria-pressed). */
.input-wrap__toggle .icon-eye-off {
  display: none;
}

.input-wrap__toggle[aria-pressed='true'] .icon-eye {
  display: none;
}

.input-wrap__toggle[aria-pressed='true'] .icon-eye-off {
  display: inline-flex;
}

/* --- État erreur (épuré : bordure fine rouge + halo doux, pas de double liseré) */
.input-wrap.is-error {
  border-color: var(--error);
}

.input-wrap.is-error:focus-within {
  box-shadow: var(--focus-halo-error);
}

.field__error {
  padding: 0 4px;
  font-size: 12px;
  color: var(--error);
  min-height: 0;
}

/* Message de confirmation (ex. vérification LinkedIn) — vert sémantique. */
.field__success {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
  font-size: 12.2px;
  color: var(--success);
}

.field__success svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

/* ==========================================================================
   Groupe de sélection unique stylé en boutons (« Niveau hiérarchique »)
   --------------------------------------------------------------------------
   Radios natifs (single-select + clavier accessibles) masqués, rendus comme
   des boutons en grille. Sélectionné = plein bleu charte ; focus clavier =
   halo doux cohérent avec les autres champs.
   ========================================================================== */
.select-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  width: 100%;
}

.select-group__option {
  position: relative;
  display: flex;
}

/* Radio natif masqué visuellement mais focusable. */
.select-group__option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  outline: none;
}

.select-group__btn {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 56px;          /* chips plus hautes (padding vertical interne accru) */
  padding: 12px 12px;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast),
    color var(--t-fast), box-shadow var(--t-fast);
}

/* Hover (non sélectionné) : légère teinte. */
.select-group__option input:not(:checked) + .select-group__btn:hover {
  border-color: var(--blue-dark);
  background: var(--off-white);
  color: var(--blue-dark);
}

/* Sélectionné : plein bleu charte, texte blanc. */
.select-group__option input:checked + .select-group__btn {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
  color: var(--text-inverse);
}

/* Focus clavier : halo doux custom (cohérent avec champs/radios). */
.select-group__option input:focus-visible + .select-group__btn {
  border-color: var(--blue-dark);
  box-shadow: var(--focus-halo-blue);
}

/* Variante chip sur deux lignes : libellé principal + parenthèse à la ligne,
   plus petite et atténuée (ex. type de compte « BRAND / (Marque) »). */
.select-group__btn--stack {
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}

.select-group__sub {
  font-size: 12px;
  font-weight: 500;
  opacity: .72;               /* atténué (lisible sur fond clair comme sélectionné) */
}

/* --- Variante MULTI-select + layout fluide -------------------------------
   Le rendu sélectionné (input:checked) est partagé : pour la sélection
   multiple, on utilise des <input type="checkbox"> (au lieu de radios). La
   variante --wrap fait des chips à largeur auto qui s'enroulent (utile pour
   les longues listes : secteurs, périmètre, priorités…). */
.select-group--wrap {
  display: flex;
  flex-wrap: wrap;
}

.select-group--wrap .select-group__option {
  flex: 0 0 auto;
}

.select-group--wrap .select-group__btn {
  min-height: 48px;          /* chips plus hautes (cohérent avec la base) */
  padding: 12px 16px;
}

/* Chip désactivé (ex. quota MULTI atteint « max 3 »). */
.select-group__option input:disabled + .select-group__btn {
  opacity: .45;
  cursor: not-allowed;
}

.select-group__option input:disabled:checked + .select-group__btn {
  opacity: 1;                /* un chip sélectionné reste lisible même si figé */
}

/* ==========================================================================
   En-tête de groupe (sous-section de formulaire)
   --------------------------------------------------------------------------
   Titre + indication, pour structurer un écran dense en sous-sections claires
   (ex. « Marché », « Dimension », « Finances »).
   ========================================================================== */
.section-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.section-head__title {
  font-family: var(--font-body);
  font-weight: 600;               /* semibold : net, jamais fade */
  font-size: 18px;
  letter-spacing: -0.1px;
  color: var(--blue-dark);        /* bleu charte */
}

.section-head__hint {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-tertiary);
}

/* ==========================================================================
   Encart d'information (callout discret, ex. « Strictement confidentiel »)
   ========================================================================== */
.callout {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--off-white);
}

.callout__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--blue-dark);
}

.callout__icon svg {
  width: 100%;
  height: 100%;
}

.callout__text {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-soft);
}

.callout__text strong {
  font-weight: 700;
  color: var(--text-primary);
}

/* ==========================================================================
   Dropdown (select natif stylé dans notre design system)
   --------------------------------------------------------------------------
   <select> avec apparence retirée, chevron à droite, placeholder « Sélectionnez… »
   (option vide sélectionnée → texte gris tertiaire). Mêmes hauteur/bordure/halo
   que les champs texte.
   ========================================================================== */
.select-wrap {
  position: relative;
  width: 100%;
}

.select {
  width: 100%;
  height: var(--input-height);
  padding: 0 40px 0 16px;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  background: var(--white);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--blue-deep);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

/* Survol (fermé) → bordure plus marquée. */
.select:hover {
  border-color: var(--text-tertiary);
}

/* Focus ≈ ouvert (la liste native est rendue par l'OS). */
.select:focus,
.select:focus-visible {
  outline: none;
  border-color: var(--blue-dark);
  box-shadow: var(--focus-halo-blue);
}

/* Désactivé. */
.select:disabled {
  background: var(--surface-alt);
  color: var(--text-tertiary);
  cursor: not-allowed;
}
.select:disabled ~ .select-wrap__chevron { opacity: .45; }

/* État « ouvert » : focus du select OU modifieur .is-open (pilotage/illustration)
   → bordure accent + halo + chevron pivoté. */
.select-wrap.is-open .select {
  border-color: var(--blue-dark);
  box-shadow: var(--focus-halo-blue);
}
.select-wrap:focus-within .select-wrap__chevron,
.select-wrap.is-open .select-wrap__chevron {
  transform: translateY(-50%) rotate(180deg);
}

/* Placeholder (option vide sélectionnée) → gris tertiaire. */
.select-wrap:has(option[value=""]:checked) .select {
  color: var(--text-tertiary);
}

/* Chevron (Lucide « chevron-down »), non interactif. */
.select-wrap__chevron {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  width: var(--icon-size);
  height: var(--icon-size);
  color: var(--text-subtle);
  pointer-events: none;
  transition: transform var(--t-fast);
}

.select-wrap__chevron svg {
  width: 100%;
  height: 100%;
}

/* État erreur (piloté via .is-error sur le wrapper). */
.select-wrap.is-error .select {
  border-color: var(--error);
}

.select-wrap.is-error:focus-within .select {
  box-shadow: var(--focus-halo-error);
}

/* ==========================================================================
   Tag-selector (sélection multiple, max N) + modale de choix
   --------------------------------------------------------------------------
   Le champ affiche les tags choisis (chip + croix de suppression) et un bouton
   « Ajouter » qui ouvre une modale listant les options en chips-filtres. La
   source de vérité est un <select multiple> masqué (accessibilité + état) ;
   piloté par js/tag-selector.js.
   ========================================================================== */
.tag-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Un tag choisi. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 6px 0 12px;
  border: 1px solid var(--blue-dark);
  border-radius: var(--radius-pill);
  background: rgba(15, 61, 140, .06);
  color: var(--blue-dark);
  font-size: 13px;
  font-weight: 600;
}

/* Variante mini (chip statique, sans croix — ex. tag « Outil » sur partner-card). */
.tag--mini {
  height: 22px;
  padding: 0 8px;
  font-size: 11px;
}

.tag__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--blue-dark);
  cursor: pointer;
  transition: background var(--t-fast);
}

.tag__remove:hover {
  background: rgba(15, 61, 140, .14);
}

.tag__remove svg {
  width: 14px;
  height: 14px;
}

/* Bouton « Ajouter » (déclenche la modale). */
.tag-selector__add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border: 1px dashed var(--border-input);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--blue-dark);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}

.tag-selector__add:hover {
  background: var(--off-white);
  border-color: var(--blue-dark);
}

.tag-selector__add:focus-visible {
  outline: none;
  box-shadow: var(--focus-halo-blue);
  border-color: var(--blue-dark);
}

.tag-selector__add svg {
  width: 16px;
  height: 16px;
}

/* Champ tag-selector en erreur (bouton « Ajouter » souligné en rouge). */
.tag-selector.is-error .tag-selector__add {
  border-color: var(--error);
  border-style: solid;
}

/* ==========================================================================
   Modale générique (réutilisée : choix de tags ET édition de section)
   --------------------------------------------------------------------------
   Overlay + dialogue. Bottom-sheet sur mobile, boîte centrée sur desktop.
   Variantes de corps : __body (liste défilante) ; __body--fields (champs
   empilés pour l'édition de section).
   ========================================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: rgba(10, 22, 40, .5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-normal);
}

.modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.modal__dialog {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 90vh;
  background: var(--white);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: var(--shadow-lg);
  transform: translateY(16px);
  transition: transform var(--t-normal);
}

.modal.is-open .modal__dialog {
  transform: none;
}

.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 20px 12px;
}

.modal__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  color: var(--text-primary);
}

.modal__count {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
}

.modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin: -4px -4px 0 0;
  border: 0;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--t-fast), color var(--t-fast);
}

.modal__close:hover {
  background: var(--surface-alt);
  color: var(--text-primary);
}

.modal__close svg {
  width: 20px;
  height: 20px;
}

.modal__body {
  overflow-y: auto;
  padding: 4px 20px 20px;
}

/* Corps « champs empilés » (modale d'édition de section). */
.modal__body--fields {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.modal__footer {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid var(--border-default);
}

.modal__footer .btn {
  flex: 1;
}

/* Desktop : la modale devient une boîte centrée. */
@media (min-width: 700px) {
  .modal {
    align-items: center;
    padding: 24px;
  }

  .modal__dialog {
    max-width: 520px;
    border-radius: var(--radius-xl);
  }
}

/* ==========================================================================
   Summary card (carte de section : résumé + état, édition en modale)
   --------------------------------------------------------------------------
   Vide : sous-titre (le « pourquoi ») + action « Renseigner ».
   Rempli : résumé compact des valeurs + checkmark ✓ + action « Modifier ».
   Toute la carte est cliquable (ouvre la modale d'édition de la section).
   ========================================================================== */
.summary-cards {
  display: grid;
  grid-template-columns: 1fr;   /* 1 colonne en mobile */
  gap: 8px;                     /* gap de grille harmonisé (réf. boutons « Niveau ») */
}

/* Desktop (au-delà du split) : grille 2×2. */
@media (min-width: 900px) {
  .summary-cards {
    grid-template-columns: 1fr 1fr;
  }
}

.summary-card {
  display: flex;
  flex-direction: column;       /* pile verticale : titre → résumé → rangée action/✓ */
  gap: 12px;
  width: 100%;
  min-width: 0;                 /* autorise la carte à rétrécir sous la grille
                                   (sinon le résumé nowrap force la piste à s'élargir) */
  padding: 16px 18px;
  text-align: left;
  background: var(--white);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-lg);
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.summary-card:hover {
  border-color: var(--blue-dark);
  box-shadow: var(--shadow-sm);
}

.summary-card:focus-visible {
  outline: none;
  border-color: var(--blue-dark);
  box-shadow: var(--focus-halo-blue);
}

.summary-card__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.summary-card__title {
  font-weight: 600;
  font-size: 15px;
  color: var(--text-primary);
  /* Titre pleine largeur ; tronque « … » s'il dépasse. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.summary-card__subtitle {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-tertiary);
}

.summary-card__summary {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--blue-dark);
  /* État rempli : résumé sur UNE seule ligne, tronqué « … » si trop long. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Rangée du bas : action « Modifier › » à gauche, badge ✓ à droite. */
.summary-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Badge ✓ (état rempli) : en bas à droite de la carte, sur les 2 layouts. */
.summary-card__check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--text-inverse);
}

/* L'attribut [hidden] doit l'emporter sur display:inline-flex ci-dessus. */
.summary-card__check[hidden] {
  display: none;
}

.summary-card__check svg {
  width: 15px;
  height: 15px;
}

.summary-card__action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--blue-dark);
  white-space: nowrap;
}

.summary-card__action svg {
  width: 16px;
  height: 16px;
}

/* État erreur : carte requise vide à la tentative de validation. */
.summary-card.is-error {
  border-color: var(--error);
}

.summary-card.is-error .summary-card__subtitle {
  color: var(--error);
}

/* ==========================================================================
   Accordéon (catégories repliables — ex. Stack technique)
   --------------------------------------------------------------------------
   En-tête cliquable (libellé + compteur + chevron) ; panneau ouvert = champ
   d'ajout libre + tags supprimables (réutilise .tag). Piloté en JS via la
   classe .is-open sur .accordion__item.
   ========================================================================== */
.accordion {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.accordion__item + .accordion__item {
  border-top: 1px solid var(--border-default);
}

.accordion__header {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast);
}

.accordion__header:hover {
  background: var(--off-white);
}

.accordion__header:focus-visible {
  outline: none;
  box-shadow: var(--focus-halo-blue);
}

.accordion__title {
  flex: 1;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
}

/* Compteur d'outils — masqué quand vide (.is-visible ajouté en JS si > 0). */
.accordion__count {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: var(--radius-pill);
  background: rgba(15, 61, 140, .08);
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 700;
}

.accordion__count.is-visible {
  display: inline-flex;
}

.accordion__chevron {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--text-tertiary);
  transition: transform var(--t-fast);
}

.accordion__item.is-open .accordion__chevron {
  transform: rotate(180deg);
}

.accordion__panel {
  display: none;
  padding: 4px 16px 16px;
}

.accordion__item.is-open .accordion__panel {
  display: block;
}

/* Tags des outils saisis (réutilise .tag / .tag__remove). */
.accordion__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.accordion__tools:not(:empty) {
  margin-bottom: 10px;
}

/* ==========================================================================
   Combobox (champ de recherche + autocomplétion — ex. Stack technique)
   --------------------------------------------------------------------------
   Champ texte (réutilise .input-wrap--icon) surmonté d'un panneau de
   suggestions filtrées en absolu. Navigation clavier (↑ ↓ Entrée Échap) gérée
   en JS via .is-active sur l'option courante. Le terme saisi est surligné.
   ========================================================================== */
.combobox {
  position: relative;
  width: 100%;
}

.combobox__panel {
  position: absolute;
  z-index: 50;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  max-height: 264px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.combobox__panel[hidden] {
  display: none;
}

.combobox__option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
}

.combobox__option:hover,
.combobox__option.is-active {
  background: var(--off-white);
}

/* Terme recherché surligné dans le libellé. */
.combobox__option mark {
  background: transparent;
  color: var(--blue-dark);
  font-weight: 700;
}

/* Option « Ajouter “…” » (ajout libre d'un outil hors liste). */
.combobox__option--add {
  color: var(--blue-dark);
  font-weight: 600;
}

.combobox__option--add svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Message « aucun résultat » (non sélectionnable). */
.combobox__option--empty {
  color: var(--text-tertiary);
  cursor: default;
}

.combobox__option--empty:hover {
  background: transparent;
}

/* ==========================================================================
   Suggestions (chips d'ajout 1 clic) + bloc des outils choisis
   --------------------------------------------------------------------------
   Réutilisés par l'étape « Stack technique » : une rangée de chips suggérés
   (ajout en un clic) et la liste des tags choisis (réutilise .tag).
   ========================================================================== */
.suggest,
.picked {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* [hidden] doit l'emporter sur display:flex ci-dessus (bloc masqué quand vide). */
.suggest[hidden],
.picked[hidden] {
  display: none;
}

.suggest__label,
.picked__label {
  padding: 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
}

.suggest__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Chip suggéré : pill pointillée avec « + », vire au plein au survol. */
.suggest-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border: 1px dashed var(--border-input);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--blue-dark);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}

.suggest-chip:hover {
  background: var(--off-white);
  border-color: var(--blue-dark);
}

.suggest-chip:focus-visible {
  outline: none;
  border-color: var(--blue-dark);
  box-shadow: var(--focus-halo-blue);
}

.suggest-chip svg {
  width: 14px;
  height: 14px;
}

/* Les tags choisis réutilisent .tag-selector / .tag (cf. plus haut). */

/* ==========================================================================
   Radio-card (choix unique présenté en carte : titre + sous-titre)
   ========================================================================== */
.radio-card-group {
  display: flex;
  flex-direction: column;
  gap: 8px;                     /* grille 8px : options d'un même groupe (intra-groupe) */
}

.radio-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}

.radio-card:hover {
  border-color: var(--blue-dark);
}

.radio-card input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.radio-card__mark {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 1.5px solid var(--border-input);
  border-radius: 50%;
  transition: border-color var(--t-fast);
}

.radio-card__mark::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--blue-dark);
  transform: scale(0);
  transition: transform var(--t-fast);
}

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

.radio-card__title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
}

.radio-card__subtitle {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-tertiary);
}

/* Sélectionné (via :has) : bordure accent + pastille remplie + léger fond. */
.radio-card:has(input:checked) {
  border-color: var(--blue-dark);
  background: rgba(15, 61, 140, .04);
}

.radio-card:has(input:checked) .radio-card__mark {
  border-color: var(--blue-dark);
}

.radio-card:has(input:checked) .radio-card__mark::after {
  transform: scale(1);
}

.radio-card:has(input:focus-visible) {
  border-color: var(--blue-dark);
  box-shadow: var(--focus-halo-blue);
}

/* ==========================================================================
   Checkbox formalisée (case + libellé)
   ========================================================================== */
.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.checkbox input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.checkbox__box {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 1.5px solid var(--border-input);
  border-radius: 6px;
  background: var(--white);      /* fond blanc à l'état non coché */
  color: var(--text-inverse);
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}

.checkbox__box svg {
  width: 13px;
  height: 13px;
  opacity: 0;
  transform: scale(.6);
  transition: opacity var(--t-fast), transform var(--t-fast);
}

.checkbox:has(input:checked) .checkbox__box {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
}

.checkbox:has(input:checked) .checkbox__box svg {
  opacity: 1;
  transform: none;
}

.checkbox:has(input:focus-visible) .checkbox__box {
  border-color: var(--blue-dark);
  box-shadow: var(--focus-halo-blue);
}

.checkbox__label {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-soft);
}

.checkbox__label a {
  font-weight: 600;
}

/* Groupe de checkboxes (horizontal par défaut, --stack pour empiler). */
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.checkbox-group--stack {
  flex-direction: column;
  gap: 16px;                    /* grille 8px : consentements empilés */
}

/* ==========================================================================
   Boutons radio personnalisés (souscription BRAND / PARTNER)
   ========================================================================== */
.radio {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;       /* hauteur de ligne ≥ cible tactile confortable */
  min-height: 32px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--t-fast);
}

/* Sélectionné : fond très léger pour appuyer l'état (sans surcharge). */
.radio:has(input:checked) {
  background: rgba(15, 61, 140, .04);
}

/* Input natif masqué visuellement mais focusable (on neutralise tout outline
   navigateur : on gère le focus nous-mêmes sur la pastille). */
.radio input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  outline: none;
}

.radio__mark {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--border-input);   /* défaut : liseré fin neutre */
  border-radius: 50%;
  background: var(--white);                   /* fond blanc à l'état non coché */
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.radio__mark::after {
  content: '';
  position: absolute;
  inset: 3.5px;
  background: var(--blue-dark);
  border-radius: 50%;
  transform: scale(0);
  transition: transform var(--t-fast);
}

/* Sélectionné : bordure accent + pastille remplie. */
.radio input:checked + .radio__mark {
  border-color: var(--blue-dark);
}

.radio input:checked + .radio__mark::after {
  transform: scale(1);
}

/* Focus clavier : halo doux custom, cohérent avec les champs. */
.radio input:focus-visible + .radio__mark {
  box-shadow: var(--focus-halo-blue);
}

.radio__label {
  font-size: 14px;
  color: var(--text-soft);
  transition: color var(--t-fast);
}

.radio input:checked ~ .radio__label {
  color: var(--text-primary);
}

/* Rangée de radios compacts (label seul) — ex. « Contact des autres membres ».
   Aligne le 1er radio sur le bord du label de champ (compense son padding). */
.radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: -8px;
}

/* ==========================================================================
   Pied de formulaire réutilisable (étapes 1/5 → 5/5)
   --------------------------------------------------------------------------
   Ligne d'actions en PLEINE LARGEUR du formulaire : le CTA occupe toute la
   largeur (= largeur des champs) ; s'il y a deux boutons (ex. « Passer » +
   « Valider »), ils se partagent la largeur. Le « Retour » vit dans l'en-tête.
   ========================================================================== */
.form-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-footer__actions {
  display: flex;
  gap: 12px;
}

/* Chaque bouton s'étire : un seul = pleine largeur ; deux = largeur partagée. */
.form-footer__actions .btn {
  flex: 1;
}

/* ==========================================================================
   En-tête de navigation (barre haute réutilisable)
   --------------------------------------------------------------------------
   Reprise du Figma (nav bar) : fond blanc, ombre douce, logo FitPartners
   centré et un lien « ‹ Retour » optionnel à gauche. Présent sur le tunnel
   d'inscription et la connexion produit ; se place AU-DESSUS du bandeau
   « Création de compte X/5 ». Hauteur ~80px (--header-h).
   Grille 3 colonnes (1fr · auto · 1fr) : le logo reste centré quelle que soit
   la largeur du « Retour ». Sur les écrans sans retour, la 1re cellule reste
   vide (un <span> placeholder) pour conserver le logo au centre.
   ========================================================================== */
.app-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  min-height: var(--header-h);
  padding: 16px 20px;
  background: var(--white);
  /* Reste collé en haut au défilement (tous les écrans produit) avec une ombre
     douce, discrète et légèrement bleutée (token d'ombre bleu). */
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}

@media (min-width: 900px) {
  .app-header {
    padding: 16px 80px;             /* espacement horizontal Figma (px-80) */
  }
}

/* Lien « ‹ Retour » (chevron + libellé), calé à gauche. Stylise <a> et
   <button> de la même façon (selon que l'écran a une logique de saisie). */
.app-header__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  margin-left: -8px;                /* compense le padding sans décaler le texte */
  padding: 6px 8px;
  border: 0;
  background: transparent;
  color: var(--text-soft);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color var(--t-fast), background var(--t-fast);
}

.app-header__back:hover {
  color: var(--blue-dark);
  background: rgba(15, 61, 140, .06);
  text-decoration: none;
}

.app-header__back:focus-visible {
  box-shadow: var(--focus-ring-blue);
}

.app-header__back svg {
  width: 16px;
  height: 16px;
}

/* Logo FitPartners — cellule centrale de la grille (toujours centré). */
.app-header__logo {
  justify-self: center;
  width: 150px;
  height: auto;
}

/* ==========================================================================
   Pied de page (liens discrets : Aide · Confidentialité)
   --------------------------------------------------------------------------
   Présent sur le tunnel d'inscription et la connexion produit. Sobre : posé
   sur le fond clair de page, liens en gris tertiaire (hover bleu charte),
   séparés par un point médian. Hauteur ~56px (--footer-h).
   ========================================================================== */
.site-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--footer-h);
  padding: 12px 20px;
  font-size: 13px;
  color: var(--text-tertiary);
}

.site-footer a {
  color: var(--text-tertiary);
  font-weight: 600;
}

.site-footer a:hover {
  color: var(--blue-dark);
  text-decoration: none;
}

.site-footer__sep {
  color: var(--border-default);
  user-select: none;
}

/* Variante « sur image » (connexion / création) : liens blancs atténués, posés
   directement sur l'image de fond, sans bande claire ni hauteur de bande. */
.site-footer--on-image {
  min-height: 0;
  padding: 0;
}

.site-footer--on-image a {
  color: rgba(255, 255, 255, .85);
}

.site-footer--on-image a:hover {
  color: var(--text-inverse);
  text-decoration: underline;
}

.site-footer--on-image .site-footer__sep {
  color: rgba(255, 255, 255, .5);
}

/* ==========================================================================
   Eyebrow + barre de progression (bandeau « Création de compte »)
   --------------------------------------------------------------------------
   Barre simple : libellé à gauche, compteur d'étape à droite, jauge de
   remplissage. Appliquée sur tous les écrans du tunnel.
   ========================================================================== */
.stepbar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.stepbar__row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10.4px;
  letter-spacing: 1.04px;
  text-transform: uppercase;
  color: var(--teal-eyebrow);
}

.stepbar__track {
  width: 100%;
  height: 3px;
  background: var(--white);
  border-radius: 2px;
  overflow: hidden;
}

.stepbar__fill {
  height: 100%;
  background: var(--teal);
  border-radius: 2px;
  transition: width var(--t-slow);
}

/* ==========================================================================
   Toast (notification éphémère « écran à venir »)
   ========================================================================== */
.toast {
  position: fixed;
  left: 50%;
  bottom: 88px;
  transform: translateX(-50%) translateY(12px);
  z-index: 1000;
  max-width: calc(100% - 32px);
  padding: 12px 18px;
  background: var(--dark);
  color: var(--text-inverse);
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-normal), transform var(--t-normal);
}

.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ==========================================================================
   Carte d'authentification (connexion produit + création de compte)
   --------------------------------------------------------------------------
   Carte blanche centrée sur fond dégradé. Composant partagé par index.html
   (connexion) et inscription/compte.html (entrée du tunnel) pour la cohérence.
   ========================================================================== */
.login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--header-h) - var(--footer-h));
  padding: 32px 20px 96px;
  /* Fond image (même visuel que les heros) : image fondue en multiply sur le
     bleu charte ; la carte blanche par-dessus reste parfaitement lisible. */
  background-color: var(--blue-dark);
  background-image: url('/assets/hero.png');
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
}

/* Variante empilée : carte + pied de page centrés en colonne (le pied se pose
   sous la carte, sur l'image, au lieu d'une bande en bas de page). Le pattern
   couvre tout l'écran sous l'en-tête (full-bleed, jusqu'au bord bas — plus de
   bande claire résiduelle). */
.login--stack {
  flex-direction: column;
  gap: 16px;
  min-height: calc(100dvh - var(--header-h));
}

/* Mobile : contenu aligné en haut → la carte puis les liens (juste après le CTA)
   suivent le flux sous l'en-tête, posés sur le pattern, sans être collés en bas
   du viewport (limite le scroll). Desktop : reste centré (ci-dessus). */
@media (max-width: 899.98px) {
  .login--stack {
    justify-content: flex-start;
  }
}

.login__card {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px 24px;
  background: var(--white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
}

.login__heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.login__title {
  font-weight: 900;
  font-size: 25px;
  letter-spacing: -0.45px;
}

.login__subtitle {
  font-size: 14px;
  color: var(--text-soft);
}

.login__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Légende d'un groupe dans la carte (ex. « Souscrire en tant que »). */
.login__legend {
  display: block;               /* sinon margin-bottom ignoré (span inline) */
  margin-bottom: 8px;           /* = écart label → champ (.field gap), cf. « Email » */
  font-weight: 600;
  font-size: 14px;
  color: var(--text-muted);
}

.login__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}

.login__divider {
  text-align: center;
  font-size: 14px;
  color: var(--text-soft);
}

.login__divider a {
  font-weight: 700;
}

/* Variante centrée (écran de confirmation) + badge de succès. */
.login__card--center {
  align-items: center;
  text-align: center;
}

.login__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--text-inverse);
}

.login__badge svg {
  width: 32px;
  height: 32px;
}

/* ==========================================================================
   Partner card (variante sponsorisée — pixel-perfect maquette « AB Tasty »)
   --------------------------------------------------------------------------
   Carte vitrine d'un PARTNER posée sur le hero. Inerte en proto. Badge Fit
   Score collé au coin haut-droit, boîte logo (placeholder géométrique) + tag,
   nom + note, descriptif tronqué, stats, pied 2 icônes + CTA « Voir la fiche ».
   ========================================================================== */
.partner-card {
  position: relative;
  width: 394px;
  max-width: 100%;
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;            /* le badge épouse le coin arrondi 12px de la carte */
  box-shadow: var(--shadow-md);
}

@media (max-width: 899.98px) {
  .partner-card { width: 335px; }
}

/* --- Badge Fit Score (haut-droite, collé au coin) ----------------------- */
.partner-card__fit {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 16px;
  background: var(--green-light);
  color: var(--green);
  border-bottom-left-radius: 8px;
}

.partner-card__fit-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
}

.partner-card__fit-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.5px;
}

/* --- Détails ------------------------------------------------------------ */
.partner-card__details {
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Marge haute au-dessus du logo/titre. Le badge Fit Score est en absolu
     (top:0 right:0) → il reste flush, indépendant de ce padding. */
  padding: 16px 12px 12px;
}

/* Variante sans Fit Score (ex. Agence) : pas de badge → padding haut normal
   (12px) au lieu de la réserve de 16px réservée à la sponsorisée. */
.partner-card--noscore .partner-card__details {
  padding-top: 12px;
}

/* Row logo + meta */
.partner-card__row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Bloc logo (boîte + tag empilés, largeur 70px) */
.partner-card__logobox {
  display: flex;
  flex-direction: column;
  width: 70px;
  flex-shrink: 0;
}

/* Boîte logo : navy, coins HAUT arrondis, marque lime (placeholder géo). */
.partner-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 7px 8px;
  background: var(--navy);
  border-radius: 8px 8px 0 0;
  color: var(--lime);
}

.partner-card__logo svg {
  width: 100%;
  height: 100%;
}

/* Tag « Outil » : coins BAS arrondis, fond clair, texte bleu centré. */
.partner-card__tag {
  padding: 4px 12px;
  background: var(--surface-bg-alt);
  border-radius: 0 0 8px 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  color: var(--blue);
  text-align: center;
}

/* Meta : nom + note */
.partner-card__meta {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.partner-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  color: var(--ink);
}

.partner-card__rating {
  display: flex;
  align-items: center;
  gap: 4px;
}

.partner-card__star {
  width: 12px;
  height: 12px;
  color: var(--amber);
  flex-shrink: 0;
}

.partner-card__score {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
}

.partner-card__reviews {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  color: var(--text-secondary);
}

/* Bloc descriptif + stats */
.partner-card__descwrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.partner-card__desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.partner-card__stats {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  color: var(--ink);
}

.partner-card__stats-sep {
  color: var(--text-tertiary);
  font-weight: 400;
  user-select: none;
}

/* --- Pied : 2 boutons-icônes (fond gris) + CTA -------------------------- */
.partner-card__footer {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
}

.partner-card__iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 56px;
  height: 44px;
  border: 0;
  border-radius: 8px;
  background: var(--surface-bg);
  color: var(--blue);
  cursor: pointer;
  transition: background var(--t-fast);
}

.partner-card__iconbtn:hover {
  background: var(--surface-bg-alt);
}

.partner-card__iconbtn:focus-visible {
  outline: none;
  box-shadow: var(--focus-halo-blue);
}

.partner-card__iconbtn svg {
  width: 18px;
  height: 18px;
}

.partner-card__footer .btn {
  flex: 1;
  height: 44px;
}

/* ==========================================================================
   Use-case card (carte « cas / REX » — pixel-perfect maquette)
   --------------------------------------------------------------------------
   Composant produit (hors tunnel). Inerte en proto. Logo + « outil × marque »,
   titre du cas, descriptif tronqué, tags, lien « Voir le cas ».
   ========================================================================== */
.usecase-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 394px;
  max-width: 100%;
  padding: 17px;
  background: var(--white);
  border: 1px solid var(--surface-bg-alt);
  border-radius: 12px;
}

@media (max-width: 899.98px) {
  .usecase-card { width: 335px; }
}

/* Row 1 : boîte logo + « outil × marque » */
.usecase-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.usecase-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--navy);
  color: var(--lime);
}

.usecase-card__logo svg {
  width: 20px;
  height: 20px;
}

.usecase-card__pair {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.usecase-card__tool {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
}

.usecase-card__x {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  color: var(--text-tertiary);
}

.usecase-card__brand {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  color: var(--text-secondary);
}

/* Titre du cas */
.usecase-card__title {
  font-family: var(--font-display);
  font-weight: 800;            /* ExtraBold */
  font-size: 16px;
  line-height: 22px;
  color: var(--ink);
}

/* Descriptif (tronqué) */
.usecase-card__desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Tags */
.usecase-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.usecase-card__tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 12px;             /* hauteur fixée à 24px (padding vertical absorbé) */
  border-radius: 6px;
  background: var(--surface-bg-alt);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  color: var(--text-secondary);
}

/* Pied : lien « Voir le cas » (style lien, sans fond) */
.usecase-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 8px 0;
  font-family: var(--font-body);
  font-weight: 600;            /* SemiBold */
  font-size: 14px;
  color: var(--blue);
}

.usecase-card__link:hover {
  text-decoration: underline;
}

.usecase-card__link svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

/* ==========================================================================
   Brand card (carte d'identité d'une BRAND — pixel-perfect maquette, hero étape 2)
   --------------------------------------------------------------------------
   Aperçu « voici comment vous serez vu » : logo placeholder + nom, tags secteur
   verts, lien « Voir la marque ». Centré, inerte en proto.
   ========================================================================== */
.brand-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 394px;
  max-width: 100%;
  padding: 17px;
  background: var(--white);
  border: 1px solid var(--surface-bg-alt);
  border-radius: 12px;
}

@media (max-width: 899.98px) {
  .brand-card { width: 335px; }
}

/* Header : logo + nom, empilés et centrés */
.brand-card__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* Logo marque 82×40 (object-contain) — PLACEHOLDER proto. */
.brand-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 82px;
  height: 40px;
}

.brand-card__logo svg,
.brand-card__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  text-align: center;
}

/* Tags secteur (verts) */
.brand-card__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.brand-card__tag {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 6px;
  /* Pastille vert pâle — fallback littéral si le token n'est pas résolu. */
  background: var(--green-tint, rgba(12, 107, 74, .16));
  color: var(--green);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  line-height: 1;
}

/* Lien « Voir la marque » (texte + arrow-right après) */
.brand-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--blue);
}

.brand-card__link:hover {
  text-decoration: underline;
}

.brand-card__link svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ==========================================================================
   Tag « soft » (chip gris) — partagé (community, discussion…)
   --------------------------------------------------------------------------
   Le `.tag` historique est bleu/pill ; ce chip gris reprend le style des tags
   secteur de la maquette (fond --surface-bg-alt, texte --text-secondary).
   ========================================================================== */
.tag-soft {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 12px;
  border-radius: 6px;
  background: var(--surface-bg-alt);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  color: var(--text-secondary);
}

/* ==========================================================================
   Ligne meta « N membres · 🔥🔥🔥 Très active » — partagée (community, discussion)
   ========================================================================== */
.card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-secondary);
}

.card-meta__members strong {
  font-weight: 700;
  color: var(--ink);
}

.card-meta__dot {
  flex-shrink: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-secondary);
}

.card-meta__activity {
  font-weight: 600;
  font-size: 11px;
  color: var(--amber);
}

/* ==========================================================================
   Community card (carte communauté — pixel-perfect maquette, produit)
   --------------------------------------------------------------------------
   Pastille initiales + titre + meta, tags gris, descriptif, lien « Découvrir ».
   Inerte en proto (styleguide / page « Ma communauté »).
   ========================================================================== */
.community-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 394px;
  max-width: 100%;
  padding: 17px;
  background: var(--white);
  border: 1px solid var(--surface-bg-alt);
  border-radius: 12px;
}

@media (max-width: 899.98px) {
  .community-card { width: 335px; }
}

.community-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Pastille initiales 40×40, fond teal. */
.community-card__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--teal);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  color: var(--ink);
}

.community-card__id {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.community-card__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  line-height: 22px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.community-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.community-card__desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.community-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 8px 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--blue);
}

.community-card__link:hover {
  text-decoration: underline;
}

.community-card__link svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ==========================================================================
   Discussion card (topic — pixel-perfect maquette, produit)
   --------------------------------------------------------------------------
   Titre + meta (sans icône), tags gris, descriptif, bouton plein « Voir le
   détail » (œil). Inerte en proto (styleguide / page « Ma communauté »).
   ========================================================================== */
.discussion-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 394px;
  max-width: 100%;
  padding: 17px;
  background: var(--white);
  border: 1px solid var(--blue-light);
  border-radius: 12px;
}

@media (max-width: 899.98px) {
  .discussion-card { width: 335px; }
}

/* Header : titre + meta, sans icône */
.discussion-card__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.discussion-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.discussion-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.discussion-card__desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Pied : bouton plein « Voir le détail » (œil) */
.discussion-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 44px;
  border: 0;
  border-radius: 8px;
  background: var(--blue);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background var(--t-fast);
}

.discussion-card__cta:hover {
  background: var(--blue-dark-hover);
}

.discussion-card__cta svg {
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   Fit Score card (pixel-perfect maquette — hero étape 4)
   --------------------------------------------------------------------------
   Carte vert clair : anneau (dégradé sombre) avec score + arc de progression
   SVG vert vif, bloc texte vert, bouton « Demander une démo ». Inerte en proto.
   ========================================================================== */
.fitscore-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 360px;
  max-width: 100%;
  min-height: 235px;           /* card plus aérée (cf. maquette) */
  padding: 24px;
  background: var(--green-light);
  border-radius: 14px;
}

@media (max-width: 899.98px) {
  .fitscore-card { width: 335px; min-height: 154px; padding: 8px; }
}

/* Row : anneau + texte, centrés H ; flex-1 → centré V (espace au-dessus de l'anneau). */
.fitscore-card__row {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Anneau 64×64 : centre navy dégradé → jauge → fin liseré sombre extérieur. */
.fitscore-ring {
  position: relative;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0a1628 0%, #1f2937 100%);
  border: 2px solid #081120;   /* contour sombre sur le bord extérieur */
}

/* Arc de progression : track discret + arc, départ en haut. */
.fitscore-ring__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.fitscore-ring__svg circle {
  fill: none;
  stroke-width: 5;
}

.fitscore-ring__track {
  stroke: rgba(255, 255, 255, .16);   /* segment gris discret (portion non remplie) */
}

.fitscore-ring__arc {
  stroke: #22c55e;             /* arc — couleur pilotée par le score (data-score) */
  stroke-linecap: round;
  stroke-dasharray: 165 186;   /* défaut ≈ 89 % ; recalculé par fitscore.js */
}

.fitscore-ring__num {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 28px;
  line-height: 1;              /* centrage optique : la line-height ne décale plus */
  letter-spacing: -0.56px;
  color: var(--white);
}

.fitscore-card__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  color: var(--green);
}

.fitscore-card__label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.6px;
}

.fitscore-card__verdict {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
}

/* Bouton « Demander une démo » (inerte) */
.fitscore-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  border: 0;
  border-radius: 8px;
  background: var(--blue);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background var(--t-fast);
}

.fitscore-card__cta:hover {
  background: var(--blue-dark-hover);
}

/* ==========================================================================
   Réassurance (3 points confidentialité / vérification — hero étape 5)
   --------------------------------------------------------------------------
   Picto Lucide (cercle teal) + titre court + ligne, empilés et centrés. Posé
   sur l'image de fond du hero (texte clair). Inerte en proto.
   ========================================================================== */
.reassure {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;                    /* rythme rééquilibré (picto + titre seuls) */
  width: 100%;
  max-width: 320px;
}

.reassure__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;                    /* picto → titre (sans sous-texte) */
  text-align: center;
}

.reassure__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(40, 180, 180, .18);
  color: var(--teal-light);
}

.reassure__icon svg {
  width: 22px;
  height: 22px;
}

.reassure__title {
  font-weight: 700;
  font-size: 15px;
  color: var(--text-inverse);
}

.reassure__text {
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .82);
}

/* ==========================================================================
   .post-card — carte de publication du feed « Mes communautés » (Figma 544:16324)
   --------------------------------------------------------------------------
   Composant produit, inerte (proto). Largeur = colonne. Trois zones : bandeau
   communauté, corps (auteur + titre optionnel + texte), barre d'actions.
   ========================================================================== */
.post-card {
  width: 100%;
  background: var(--white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* 1) Bandeau communauté ---------------------------------------------------- */
.post-card__community {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: rgba(206, 220, 238, .5);
}
.post-card__community-avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--blue-light);
  border: 1px solid var(--blue);
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 9px;
  line-height: 1;
}
.post-card__community-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  color: var(--text-primary);
}
.post-card__sep-dot {
  flex: 0 0 auto;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-tertiary);
}
.post-card__members {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-secondary);
}
.post-card__members b { font-weight: 700; color: var(--text-primary); }
.post-card__community-arrow {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 11px;
  background: var(--off-white);
  color: var(--blue);
}
.post-card__community-arrow svg { width: 11px; height: 11px; }

/* 2) Corps ----------------------------------------------------------------- */
.post-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}
.post-card__author { display: flex; align-items: flex-start; gap: 12px; }
.post-card__avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--blue-light);
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
}
.post-card__author-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.post-card__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -.09px;
  color: var(--text-primary);
}
.post-card__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.post-card__role {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-tertiary);
}
.post-card__time {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-secondary);
}
.post-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -.09px;
  color: var(--text-primary);
}
.post-card__text {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-secondary);
}

/* Tags mono (outil/marque = teal ; Partner = bleu). Le token #c3efef est
   --teal-pale (le brief l'appelle « --teal-light », déjà pris par #33c9dc). */
.post-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--teal-pale);
  color: var(--teal-dark);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}
.post-tag--partner { background: var(--blue-medium); color: var(--white); }

/* 3) Actions --------------------------------------------------------------- */
.post-card__actions {
  display: flex;
  border-top: 0.5px solid var(--text-on-dark);
}
.post-card__action {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--blue);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
  transition: color .15s ease, background var(--t-fast);
}
.post-card__action:hover { background: var(--off-white); text-decoration: none; }
.post-card__action svg { width: 16px; height: 16px; }

/* Mobile étroit (<768) : actions en icône seule (les libellés ne tiennent pas
   sur une ligne en 375 ; footer icône-forward comme la maquette mobile). */
@media (max-width: 767.98px) {
  .post-card__action { font-size: 0; gap: 0; }
  .post-card__action svg { width: 18px; height: 18px; }
}

/* Bouton « Commentaires » actif (thread ouvert) = teal. */
.post-card__action.is-active { color: var(--teal); }

/* ==========================================================================
   .post-thread — bloc de commentaires déplié sous les actions (Figma 547:16737)
   --------------------------------------------------------------------------
   Composer + tri + réponses + « voir plus ». Fond --blue-light, épouse les
   coins bas arrondis de la carte (overflow:hidden sur .post-card). Inerte.
   ========================================================================== */
/* Animation d'ouverture/fermeture : grille 0fr → 1fr (hauteur auto sans
   max-height en dur) + fondu, ~220ms. L'inner porte le fond/padding pour que
   rien ne dépasse à l'état fermé. prefers-reduced-motion neutralise la
   transition (règle globale base.css) → affichage direct. */
.post-thread {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .22s ease, opacity .22s ease;
}
.post-card--comments-open .post-thread {
  grid-template-rows: 1fr;
  opacity: 1;
}
.post-thread__inner {
  min-height: 0;
  overflow: hidden;
}
.post-thread__body {
  padding: 0 16px 8px;
  background: var(--blue-light);
}

/* Avatars du thread (générique). */
.post-thread__avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
}
.post-thread__avatar--me {
  width: 32px;
  height: 32px;
  background: var(--blue-light);
  border: 2px solid rgba(255, 255, 255, .4);
  color: var(--navy);
  font-size: 16px;
}

/* 1) Composer -------------------------------------------------------------- */
.post-thread__composer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 16px;
}
.post-thread__field {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 15px;
  background: var(--white);
  border: 1px solid var(--text-on-dark);
  border-radius: var(--radius-sm);
}
.post-thread__field input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-primary);
}
.post-thread__field input::placeholder { color: var(--text-tertiary); }
.post-thread__field input:focus { outline: none; }
.post-thread__tools { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6.4px; }
.post-thread__tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
}
.post-thread__tool svg { width: 16px; height: 16px; }
.post-thread__send {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  cursor: pointer;
}
.post-thread__send svg { width: 16px; height: 16px; }

/* 2) Tri ------------------------------------------------------------------- */
.post-thread__sort {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  height: 40px;
}
.post-thread__sort-label { font-family: var(--font-body); font-weight: 500; font-size: 12px; color: var(--text-primary); }
.post-thread__sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  color: var(--text-primary);
  cursor: pointer;
}
.post-thread__sort-btn svg { width: 14px; height: 14px; opacity: .4; }

/* 3) Réponses -------------------------------------------------------------- */
.reply {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 0;
  border-top: 1px solid var(--text-on-dark);
}
.reply__head { display: flex; align-items: center; gap: 12px; }
.reply__avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 33px;
  height: 33px;
  border-radius: 50%;
  background: var(--teal);
  border: 1px solid var(--text-on-dark);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}
.reply__name { font-family: var(--font-display); font-weight: 700; font-size: 14px; line-height: 18px; color: var(--text-primary); }
.reply__tags { display: inline-flex; align-items: center; gap: 8px; }
.reply__partner {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--blue-medium);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 10px;
  white-space: nowrap;
}
.reply__time { margin-left: auto; font-family: var(--font-body); font-size: 12px; color: var(--text-secondary); }
.reply__text { margin: 0; font-family: var(--font-body); font-size: 14px; line-height: 1.4; color: var(--text-secondary); }
.reply__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.reply__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-secondary);
}
.reply__action svg { width: 16px; height: 16px; }
.reply__action b { font-weight: 700; color: var(--text-primary); }
.reply__sep-dot { flex: 0 0 auto; width: 3px; height: 3px; border-radius: 50%; background: var(--text-tertiary); }

/* 4) Voir plus ------------------------------------------------------------- */
.post-thread__more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 16px;
  border: 0;
  border-top: 1px solid var(--text-on-dark);
  background: transparent;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  color: var(--blue);
  cursor: pointer;
}
.post-thread__more svg { width: 16px; height: 16px; }

/* ==========================================================================
   Tunnel d'inscription — panneau droit ADAPTATIF BRAND / PARTNER (proto)
   --------------------------------------------------------------------------
   Le même tunnel sert les deux types de compte (choix fait dans compte.html,
   mémorisé en sessionStorage → appliqué sur <body data-account>). Le panneau
   droit (.signup__hero) contient les DEUX variantes ; on n'affiche que celle
   du compte courant. Défaut = BRAND (panneaux existants inchangés).
   Spécificité volontairement portée par « .signup__hero … » pour primer sur
   les règles page-local (.fit-hero / .reassure) chargées après components.css.
   ========================================================================== */
.signup__hero .acct-only--partner { display: none; }
[data-account="partner"] .signup__hero .acct-only--brand { display: none; }
[data-account="partner"] .signup__hero .acct-only--partner { display: flex; }

/* 1/5 — Preuve sociale sous la signature (« When strategy meets Fit »).
   ⚠️ Chiffres PLACEHOLDER (à confirmer) — cf. commentaire HTML. */
.signup-proof {
  list-style: none;
  display: flex;
  gap: clamp(20px, 3vw, 40px);
  margin: 0;
  padding: 0;
}
.signup-proof li { display: flex; flex-direction: column; gap: 2px; }
.signup-proof b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1;
  color: var(--text-inverse);
}
.signup-proof span {
  font-size: 11px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text-on-dark);
}

/* 3/5 — Mini « résultats de recherche » : le PARTNER ressort en tête. */
.fit-rank { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 320px; }
.fit-rank__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-md);
  text-align: left;
}
.fit-rank__row--top { outline: 2px solid var(--teal); outline-offset: 0; }
.fit-rank__row--muted { background: var(--surface-bg-alt); box-shadow: none; }
.fit-rank__logo {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  background: var(--blue-light);
  color: var(--blue);
}
.fit-rank__row--muted .fit-rank__logo { background: #e1e6f0; color: var(--text-tertiary); }
.fit-rank__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fit-rank__name { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--text-primary); }
.fit-rank__row--muted .fit-rank__name { color: var(--text-tertiary); }
.fit-rank__sub { font-size: 11px; color: var(--text-tertiary); }
.fit-rank__score {
  margin-left: auto;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  color: var(--green);
  text-align: right;
}
.fit-rank__row--muted .fit-rank__score { color: var(--text-tertiary); }
.fit-rank__score small {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* 4/5 — Titre fort + sous-texte (pas de carte). */
.fit-lede {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.08;
  letter-spacing: -.5px;
  color: var(--text-inverse);
  text-align: center;
}
.fit-subtext {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-on-dark);
  text-align: center;
  max-width: 34ch;
}