/* ==========================================================================
   In Pulse - feuille-route.css
   Styles partagés du générateur de feuille de route (cercle/feuille-route.html)
   et de la consultation côté dirigeant (app/feuille-route.html).
   Préfixe .fdr- ; tout passe par les tokens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Formulaire court du générateur (« peu d'infos »)
   -------------------------------------------------------------------------- */
.fdr-form {
  display: grid;
  gap: var(--espace-lg);
}

.fdr-form__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--espace-sm) var(--espace-md);
}

.fdr-form__ambition {
  grid-column: 1 / -1;
}

.fdr-fieldset {
  border: 0;
  padding: 0;
  display: grid;
  gap: var(--espace-sm);
}

.fdr-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--espace-sm);
}

.fdr-note {
  font-weight: var(--graisse-normale);
  text-transform: none;
  letter-spacing: 0;
  color: var(--couleur-texte-discret);
}

.fdr-form .bouton {
  justify-self: start;
}

/* --------------------------------------------------------------------------
   2. Aperçu généré / consultation
   -------------------------------------------------------------------------- */
.fdr-apercu {
  display: grid;
  gap: var(--espace-lg);
}

.fdr-entete__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-sm);
  margin-top: var(--espace-xs);
}

.fdr-ambition {
  font-family: var(--police-titre);
  font-size: var(--taille-lg);
  color: var(--couleur-encre);
  max-width: 60ch;
}

/* Item du cap : badge urgence + tag domaine + expert + échéance. */
.fdr-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-xs);
  margin-top: var(--espace-2xs);
  font-size: var(--taille-sm);
  color: var(--couleur-texte-secondaire);
}

.fdr-item__echeance {
  color: var(--couleur-texte-discret);
}

/* Actions de publication sous l'aperçu. */
.fdr-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-sm);
}

.fdr-confirmation {
  color: var(--couleur-succes);
  font-size: var(--taille-sm);
  font-weight: var(--graisse-demi);
}

/* --------------------------------------------------------------------------
   3. Liste des feuilles existantes
   -------------------------------------------------------------------------- */
.fdr-liste {
  display: grid;
  gap: var(--espace-sm);
}

.fdr-liste__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-sm);
  padding: var(--espace-md);
  border: 1px solid var(--couleur-filet);
  border-radius: var(--rayon-md);
  background-color: var(--couleur-surface);
}

.fdr-liste__client {
  font-weight: var(--graisse-demi);
  color: var(--couleur-encre);
}

.fdr-liste__meta {
  font-size: var(--taille-sm);
  color: var(--couleur-texte-secondaire);
}

/* --------------------------------------------------------------------------
   4. Historique : sessions dépliables (résumés cliquables)
   -------------------------------------------------------------------------- */
.fdr-session__resume {
  cursor: pointer;
  display: grid;
  gap: var(--espace-2xs);
  list-style: none;
}

.fdr-session__resume::-webkit-details-marker {
  display: none;
}

.fdr-session__resume:focus-visible {
  outline: 2px solid var(--couleur-accent);
  outline-offset: 3px;
  border-radius: var(--rayon-xs);
}

.fdr-session__titre {
  font-weight: var(--graisse-demi);
  color: var(--couleur-encre);
}

.fdr-session__resume::after {
  content: "Déplier le résumé ▾";
  font-size: var(--taille-xs);
  color: var(--couleur-texte-discret);
}

.fdr-session[open] .fdr-session__resume::after {
  content: "Replier ▴";
}

.fdr-session__corps {
  margin-top: var(--espace-sm);
  display: grid;
  gap: var(--espace-sm);
}

.fdr-session__sous-titre {
  font-size: var(--taille-xs);
  font-weight: var(--graisse-demi);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--couleur-texte-discret);
}

/* --------------------------------------------------------------------------
   5. Suivi client & recommandation commerciale (pages cercle/)
   -------------------------------------------------------------------------- */
.suivi-selecteur {
  max-width: 24rem;
  margin-top: var(--espace-md);
}

.suivi-entete__ligne {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espace-md);
}

.suivi-entete__ligne .badge {
  margin-left: auto;
}

.reco-panel {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--espace-sm);
}