/* ==========================================================================
   In Pulse - pages/profil.css
   Page « Mon profil dirigeant » : questionnaire-diagnostic + restitution.
   Chargée après app.css. Tout passe par les tokens - aucune couleur en dur.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Écrans (intro / questionnaire / restitution)
   -------------------------------------------------------------------------- */

/* Les écrans peuvent être en display grid/flex : [hidden] doit primer. */
.profil-ecran[hidden] {
  display: none !important;
}

/* ----- En-tête de page ----- */
.profil-entete__titre {
  font-size: var(--taille-2xl);
}

.profil-entete__chapeau {
  margin-top: var(--espace-xs);
  font-size: var(--taille-base);
}

/* --------------------------------------------------------------------------
   2. Écran d'introduction
   -------------------------------------------------------------------------- */
.profil-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--rythme-bloc);
}

.profil-intro__corps {
  display: grid;
  gap: var(--espace-md);
  align-content: start;
}

.profil-promesses {
  display: grid;
  gap: var(--espace-sm);
  font-size: var(--taille-sm);
  color: var(--couleur-texte-secondaire);
}

.profil-promesses li {
  display: flex;
  gap: var(--espace-xs);
}

.profil-promesses li::before {
  content: "-";
  color: var(--couleur-accent);
  flex-shrink: 0;
}

.profil-intro__confidentialite {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--espace-sm);
}

.profil-intro__confidentialite .texte-discret {
  flex: 1;
  min-width: 14rem;
}

/* Colonne de droite : légende des quatre profils */
.profil-intro__cote {
  display: grid;
  gap: var(--espace-md);
  align-content: start;
  padding-left: var(--espace-xl);
  border-left: 1px solid var(--couleur-filet);
}

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

.profil-legende {
  display: grid;
  gap: var(--espace-sm);
}

.profil-legende li {
  display: flex;
  align-items: center;
  gap: var(--espace-xs);
  font-size: var(--taille-sm);
  color: var(--couleur-texte-secondaire);
}

.profil-legende strong {
  color: var(--couleur-encre);
  font-weight: var(--graisse-demi);
}

/* Rangée d'actions, sous les deux colonnes */
.profil-intro__actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espace-sm) var(--espace-md);
  padding-top: var(--espace-lg);
  border-top: 1px solid var(--couleur-filet);
}

/* --------------------------------------------------------------------------
   3. Écran questionnaire
   -------------------------------------------------------------------------- */
.profil-progression {
  display: grid;
  gap: var(--espace-xs);
  margin-bottom: var(--espace-lg);
}

.profil-progression__texte {
  font-size: var(--taille-sm);
  font-weight: var(--graisse-demi);
  color: var(--couleur-texte-secondaire);
}

/* Zone de la question courante : fondu discret entre deux questions */
.profil-question {
  min-height: 19rem;
  opacity: 1;
  transform: none;
  transition: opacity var(--duree-rapide) var(--courbe-standard),
              transform var(--duree-rapide) var(--courbe-standard);
}

.profil-question--masquee {
  opacity: 0;
  transform: translateY(8px);
}

.profil-fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

/* Intitulé de la question (legend, focalisé en JS à chaque changement) */
.profil-question__intitule {
  float: none;
  width: 100%;
  padding: 0;
  margin-bottom: var(--espace-lg);
  font-family: var(--police-titre);
  font-size: var(--taille-lg);
  font-weight: var(--graisse-demi);
  letter-spacing: -0.015em;
  line-height: var(--interligne-titre);
  color: var(--couleur-encre);
  text-wrap: balance;
}

/* Focus programmatique : pas d'anneau (jamais atteint au clavier par Tab) */
.profil-question__intitule:focus {
  outline: none;
}

.carte-option__texte {
  color: var(--couleur-texte);
  line-height: var(--interligne-serre);
}

/* Précédent / Suivant */
.profil-navigation {
  display: flex;
  justify-content: space-between;
  gap: var(--espace-md);
  margin-top: var(--espace-xl);
  padding-top: var(--espace-lg);
  border-top: 1px solid var(--couleur-filet);
}

/* --------------------------------------------------------------------------
   4. Écran de restitution
   -------------------------------------------------------------------------- */
.profil-restitution {
  display: grid;
  gap: var(--rythme-section);
}

/* Carte du profil dominant (le filet haut prend la couleur du profil en JS) */
.profil-dominant__entete {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espace-sm) var(--espace-md);
}

.profil-dominant__nom {
  font-size: var(--taille-2xl);
}

/* Focus programmatique après la 10e réponse : pas d'anneau */
.profil-dominant__nom:focus {
  outline: none;
}

.profil-dominant__devise {
  margin-top: var(--espace-xs);
  font-family: var(--police-titre);
  font-style: italic;
  font-size: var(--taille-md);
  color: var(--couleur-accent-texte);
}

.profil-dominant__description {
  margin-top: var(--espace-sm);
}

/* Rangée radar + répartition */
.profil-resultats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: var(--espace-lg);
  align-items: stretch;
}

.profil-radar canvas {
  display: block;
  width: 100%;
  max-width: 22.5rem;
  height: auto;
  margin: var(--espace-sm) auto 0;
}

.profil-repartition__listes,
#liste-repartition {
  display: grid;
  gap: var(--espace-md);
  margin-top: var(--espace-md);
}

.ligne-axe {
  display: grid;
  gap: var(--espace-xs);
}

.ligne-axe__entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espace-sm);
}

.ligne-axe__nom {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-xs);
  font-size: var(--taille-sm);
  font-weight: var(--graisse-moyenne);
  color: var(--couleur-texte);
}

.ligne-axe__valeur {
  font-family: var(--police-titre);
  font-size: var(--taille-base);
  font-weight: var(--graisse-demi);
  color: var(--couleur-encre);
}

/* Forces et points de vigilance */
.profil-lecture {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--espace-lg);
}

.profil-liste {
  display: grid;
  gap: var(--espace-sm);
  margin-top: var(--espace-md);
  font-size: var(--taille-sm);
  color: var(--couleur-texte-secondaire);
}

.profil-liste li {
  display: flex;
  gap: var(--espace-xs);
}

.profil-liste--forces li::before {
  content: "-";
  color: var(--couleur-succes);
  flex-shrink: 0;
}

.profil-liste--vigilances li::before {
  content: "-";
  color: var(--couleur-attention);
  flex-shrink: 0;
}

/* Actions recommandées (liste numérotée .etapes, version compacte) */
.profil-actions-reco .etapes {
  margin-top: var(--espace-lg);
  gap: var(--espace-lg);
}

.profil-actions-reco .etapes__item {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: var(--taille-sm);
  color: var(--couleur-texte-secondaire);
}

/* Partager / refaire */
.profil-partage {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espace-sm) var(--espace-md);
}

.profil-partage__confirmation {
  width: 100%;
  display: flex;
  gap: var(--espace-xs);
  font-size: var(--taille-sm);
  font-weight: var(--graisse-moyenne);
  color: var(--couleur-succes);
}

.profil-partage__confirmation:empty {
  display: none;
}

/* --------------------------------------------------------------------------
   5. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .profil-intro {
    grid-template-columns: 1fr;
  }

  .profil-intro__cote {
    padding-left: 0;
    padding-top: var(--espace-lg);
    border-left: none;
    border-top: 1px solid var(--couleur-filet);
  }

  .profil-question {
    min-height: 0;
  }
}

@media (max-width: 540px) {
  .profil-navigation {
    flex-direction: column-reverse;
  }

  .profil-navigation .bouton,
  .profil-intro__actions .bouton,
  .profil-partage .bouton {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Hub « Mes profils » : renvois vers le volet personnel (et la météo papier)
   depuis l'écran d'introduction du diagnostic dirigeant.
   -------------------------------------------------------------------------- */
.profil-hub {
  grid-column: 1 / -1;
  margin-top: var(--espace-lg);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--espace-sm);
}

.profil-hub__carte {
  display: grid;
  align-content: start;
  gap: var(--espace-2xs);
  text-decoration: none;
  color: inherit;
}

.profil-hub__carte:hover,
.profil-hub__carte:focus-visible {
  border-color: var(--couleur-accent);
}

/* Appel à l'action des cartes du hub : la carte s'annonce cliquable */
.profil-hub__appel {
  margin-top: var(--espace-xs);
  font-size: var(--taille-sm);
  font-weight: var(--graisse-moyenne);
  color: var(--couleur-accent-texte);
}

.profil-hub__carte:hover .profil-hub__appel {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Restitution du profil personnel : 4 jauges d'état (pas de dominant).
   -------------------------------------------------------------------------- */
.pp-jauges {
  display: grid;
  gap: var(--espace-xl);
}

.pp-jauge {
  display: grid;
  gap: var(--espace-2xs);
}

.pp-jauge__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espace-sm);
}

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

.pp-jauge__texte {
  color: var(--couleur-texte-secondaire);
  font-size: var(--taille-sm);
  max-width: 70ch;
}

.pp-jauge__conseil {
  color: var(--couleur-texte-discret);
  font-size: var(--taille-sm);
  max-width: 70ch;
}

/* --------------------------------------------------------------------------
   Évolution : deltas par axe + frise des diagnostics datés.
   -------------------------------------------------------------------------- */
.profil-evolution__deltas {
  display: grid;
  gap: var(--espace-sm);
  margin-block: var(--espace-md);
}

.profil-evolution__ligne {
  display: flex;
  align-items: center;
  gap: var(--espace-sm);
}

.profil-evolution__nom {
  font-weight: var(--graisse-demi);
  color: var(--couleur-encre);
  min-width: 7.5rem;
}

.profil-evolution__valeurs {
  color: var(--couleur-texte-secondaire);
}

.profil-evolution__sous-titre {
  font-size: var(--taille-xs);
  font-weight: var(--graisse-demi);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--couleur-texte-discret);
  margin-bottom: var(--espace-sm);
}