/* ==========================================================================
   In Pulse - pages/cercle.css
   Espace Cercle (vue interne : associés + experts).
   À charger APRÈS app.css : on réutilise toute la coquille .app-* et les
   composants de components.css ; on n'ajoute ici que le strict nécessaire.
   Aucune couleur en dur : tout passe par les tokens.
   ========================================================================== */

/* La bascule d'espace (.bascule-espace) est partagée par les deux espaces :
   ses styles vivent dans app.css (chargé côté dirigeant ET côté Cercle). */

/* En-tête de l'Espace Cercle : badge « vue interne » à la place du circuit
   fermé client. On réutilise .badge-circuit (pilule + icône). */
.app-entete__focus {
  font-size: var(--taille-xs);
  color: var(--couleur-texte-secondaire);
}

/* Rangée de raccourcis (boutons qui passent à la ligne sur petit écran). */
.tdb-raccourcis {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-sm);
  margin-top: var(--espace-md);
}

/* --------------------------------------------------------------------------
   Annuaire : barre de filtres + grille de cartes acteurs.
   -------------------------------------------------------------------------- */
.annuaire-filtres {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--espace-md) var(--espace-lg);
}

.annuaire-segments {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-xs);
}

.annuaire-filtres .champ {
  min-width: 13rem;
  flex: 1 1 13rem;
}

.annuaire-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--espace-lg);
}

/* La carte est un lien : on neutralise la décoration et on étire en colonne. */
.annuaire-carte {
  display: flex;
  flex-direction: column;
  gap: var(--espace-sm);
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.annuaire-carte:hover {
  text-decoration: none;
}

.annuaire-carte__tags {
  margin-top: var(--espace-2xs);
}

.annuaire-carte__pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-sm);
  margin-top: auto;
  padding-top: var(--espace-sm);
  border-top: 1px solid var(--couleur-filet);
}

/* --------------------------------------------------------------------------
   Fiche détaillée (expert / partenaire / client).
   -------------------------------------------------------------------------- */
.fiche-retour {
  justify-self: start;
}

.fiche-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--espace-lg);
}

.fiche-entete__corps {
  flex: 1 1 16rem;
  min-width: 0;
}

.fiche-entete__nom {
  font-size: var(--taille-2xl);
  margin-bottom: var(--espace-2xs);
}

.liste-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-xs);
  margin-top: var(--espace-sm);
}

.fiche-entete .liste-tags {
  margin-top: var(--espace-sm);
}

.fiche-sous-titre {
  font-family: var(--police-titre);
  font-size: var(--taille-base);
  font-weight: var(--graisse-demi);
  margin-top: var(--espace-md);
  margin-bottom: var(--espace-xs);
}

.fiche-liste {
  list-style: none;
  display: grid;
  gap: var(--espace-xs);
}

.fiche-liste li {
  position: relative;
  padding-left: var(--espace-lg);
}

.fiche-liste li::before {
  content: "";
  position: absolute;
  left: var(--espace-xs);
  top: 0.6em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: var(--rayon-rond);
  background-color: var(--couleur-accent);
}

.fiche-competences {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--espace-md) var(--espace-xl);
}

/* Bloc interne « Conditions & rentabilité » : signalé visuellement. */
.fiche-conditions {
  border-left: 3px solid var(--couleur-danger);
}

.encart-confidentiel {
  margin-top: var(--espace-md);
  padding: var(--espace-md);
  background-color: var(--couleur-surface-2);
  border-left: 3px solid var(--couleur-danger);
  border-radius: var(--rayon-sm);
  font-size: var(--taille-sm);
  color: var(--couleur-texte-secondaire);
}

/* --------------------------------------------------------------------------
   Tableau d'alertes (grille CSS, repli en cartes sous 1100px).
   -------------------------------------------------------------------------- */
.tableau-cercle {
  display: grid;
  gap: var(--espace-2xs);
}

.tableau-cercle__entete,
.tableau-cercle__ligne {
  display: grid;
  grid-template-columns:
    minmax(7rem, 0.8fr)
    minmax(11rem, 1.4fr)
    minmax(8rem, 0.9fr)
    minmax(10rem, 1.3fr)
    minmax(4.5rem, auto)
    minmax(9rem, 1fr)
    minmax(9rem, 1.1fr);
  gap: var(--espace-md);
  align-items: start;
  padding: var(--espace-sm) var(--espace-md);
}

.tableau-cercle__entete {
  background-color: var(--couleur-surface-2);
  border: 1px solid var(--couleur-filet);
  border-radius: var(--rayon-sm);
  font-size: var(--taille-xs);
  font-weight: var(--graisse-demi);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--couleur-texte-discret);
}

.tableau-cercle__ligne {
  background-color: var(--couleur-surface);
  border: 1px solid var(--couleur-filet);
  border-radius: var(--rayon-md);
  font-size: var(--taille-sm);
  transition: border-color var(--duree-rapide) var(--courbe-standard),
              box-shadow var(--duree-rapide) var(--courbe-standard);
}

.tableau-cercle__ligne:hover {
  border-color: var(--couleur-filet-fort);
  box-shadow: var(--ombre-douce);
}

.tableau-cercle__symptomes {
  color: var(--couleur-texte-secondaire);
}

.tableau-cercle__tri {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-2xs);
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  color: inherit;
  cursor: pointer;
}

.tableau-cercle__tri:hover { color: var(--couleur-encre); }

.tableau-cercle__fleche {
  font-size: 0.7em;
  opacity: 0.25;
  transition: transform var(--duree-rapide) var(--courbe-standard);
}

[aria-sort="ascending"] .tableau-cercle__fleche { opacity: 1; }
[aria-sort="descending"] .tableau-cercle__fleche { opacity: 1; transform: rotate(180deg); }

/* Repli en cartes empilées sur écran étroit. */
@media (max-width: 1100px) {
  .tableau-cercle__entete { display: none; }

  .tableau-cercle__ligne {
    grid-template-columns: 1fr;
    gap: var(--espace-xs);
    padding: var(--espace-md);
  }

  .tableau-cercle__cellule::before {
    content: attr(data-cle);
    display: block;
    font-size: var(--taille-xs);
    font-weight: var(--graisse-demi);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--couleur-texte-discret);
    margin-bottom: var(--espace-2xs);
  }
}

/* --------------------------------------------------------------------------
   Référentiel : heatmap de synthèse (matrice domaine × urgence) + cartes.
   Intensité encodée par un voile d'accent ; le texte reste en encre/ivoire
   (jamais couleur seule) et chaque case garde son nombre (tiret si zéro).
   -------------------------------------------------------------------------- */
.heatmap {
  display: grid;
  grid-template-columns: minmax(10rem, 1.7fr) repeat(5, minmax(3rem, 1fr));
  gap: 2px;
  margin-top: var(--espace-md);
}

.heatmap__cellule {
  padding: var(--espace-sm) var(--espace-xs);
  text-align: center;
  border-radius: var(--rayon-xs);
  background-color: var(--couleur-surface);
  color: var(--couleur-texte);
  font-size: var(--taille-sm);
  font-variant-numeric: tabular-nums;
}

.heatmap__entete {
  font-size: var(--taille-xs);
  font-weight: var(--graisse-demi);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--couleur-texte-discret);
  background-color: var(--couleur-surface-2);
}

.heatmap__domaine {
  text-align: left;
  color: var(--couleur-texte);
  background-color: var(--couleur-surface-2);
}

.heatmap__cellule--n1 { background-color: var(--couleur-accent-fond); }
.heatmap__cellule--n2 {
  background-color: var(--couleur-accent-fond);
  background-color: color-mix(in srgb, var(--couleur-accent) 26%, var(--couleur-surface));
}
.heatmap__cellule--n3 {
  background-color: var(--couleur-accent-fond);
  background-color: color-mix(in srgb, var(--couleur-accent) 44%, var(--couleur-surface));
}
.heatmap__cellule--total {
  font-weight: var(--graisse-demi);
  background-color: var(--couleur-surface-2);
}

/* Cartes du référentiel */
.ref-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: var(--espace-lg);
  margin-top: var(--espace-md);
}

.ref-carte {
  display: flex;
  flex-direction: column;
  gap: var(--espace-sm);
}

.ref-carte__entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--espace-sm);
}

.ref-carte__titre {
  font-family: var(--police-titre);
  font-size: var(--taille-lg);
  font-weight: var(--graisse-demi);
}

.ref-carte__ligne {
  font-size: var(--taille-sm);
}

.ref-carte__expert {
  margin-top: var(--espace-2xs);
}

/* --------------------------------------------------------------------------
   Suivi business : tableau numérique générique + barres de contribution.
   -------------------------------------------------------------------------- */
.tableau-defilement {
  overflow-x: auto;
  margin-top: var(--espace-md);
  /* Ombres de défilement : signalent qu'une partie du tableau dépasse,
     et s'effacent en atteignant le bord (background-attachment: local). */
  background:
    linear-gradient(to right, var(--couleur-surface) 30%, rgba(255, 255, 255, 0)) left / 40px 100%,
    linear-gradient(to left, var(--couleur-surface) 30%, rgba(255, 255, 255, 0)) right / 40px 100%,
    radial-gradient(farthest-side at 0 50%, rgba(27, 42, 65, 0.16), transparent) left / 14px 100%,
    radial-gradient(farthest-side at 100% 50%, rgba(27, 42, 65, 0.16), transparent) right / 14px 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}

.tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--taille-sm);
}

.tableau th,
.tableau td {
  padding: var(--espace-sm) var(--espace-md);
  text-align: left;
  border-bottom: 1px solid var(--couleur-filet);
  white-space: nowrap;
}

.tableau thead th {
  background-color: var(--couleur-surface-2);
  font-size: var(--taille-xs);
  font-weight: var(--graisse-demi);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--couleur-texte-discret);
}

.tableau tbody th[scope="row"] {
  font-weight: var(--graisse-demi);
  color: var(--couleur-encre);
}

.tableau tbody tr:hover {
  background-color: var(--couleur-surface-2);
}

.tableau__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tableau__or {
  color: var(--couleur-accent-texte);
  font-weight: var(--graisse-demi);
}

.business-repartition__ligne {
  display: grid;
  gap: var(--espace-2xs);
  margin-top: var(--espace-md);
}

/* --------------------------------------------------------------------------
   Nav groupée de l'Espace Expert : petit libellé de section dans la barre
   latérale (Clients / Outils / In Pulse).
   -------------------------------------------------------------------------- */
.app-nav__groupe {
  margin: var(--espace-md) 0 var(--espace-2xs);
  padding-left: var(--espace-sm);
  font-size: var(--taille-xs);
  font-weight: var(--graisse-demi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--couleur-texte-discret);
}

/* Enveloppe sémantique des groupes (role="group") : transparente pour la mise
   en page — les liens restent des enfants directs de la colonne de nav. */
.app-nav__section {
  display: contents;
}

/* Colonne empilée dans la rangée haute du tableau de bord interne */
.tdb-colonne {
  display: grid;
  gap: var(--rythme-bloc);
  align-content: start;
}

/* Indice de défilement horizontal d'un tableau large */
.tableau-indice {
  margin-top: var(--espace-xs);
  font-size: var(--taille-xs);
}

/* Fiche client : niveaux du profil personnel partagés par le dirigeant. */
.fiche-perso__ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-sm);
  padding-block: var(--espace-2xs);
  border-bottom: 1px solid var(--couleur-filet);
}

.fiche-perso__ligne:last-of-type {
  border-bottom: 0;
}

/* --------------------------------------------------------------------------
   Écosystème : schéma trois colonnes (grid pur, thémable, responsive).
   -------------------------------------------------------------------------- */
.ecosysteme-schema {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--espace-sm) var(--espace-md);
  align-items: start;
}

/* Bandeau de marque : coiffe les colonnes In Pulse + Experts. */
.ecosysteme-marque {
  grid-column: 1 / 3;
  text-align: center;
  padding: var(--espace-sm) var(--espace-md);
  border: 1px solid var(--couleur-accent);
  border-radius: var(--rayon-md);
  background-color: var(--couleur-accent-fond);
  color: var(--couleur-encre);
}

.ecosysteme-flux {
  grid-column: 3;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--espace-2xs);
  font-size: var(--taille-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--couleur-texte-discret);
}

.ecosysteme-liste {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--espace-xs);
}

.ecosysteme-liste .ligne-expert {
  text-decoration: none;
  color: inherit;
}

.ecosysteme-regles {
  list-style: none;
  padding: 0;
  margin-top: var(--espace-md);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--espace-lg);
}

.ecosysteme-regles li {
  border-left: 2px solid var(--couleur-accent);
  padding-left: var(--espace-md);
  display: grid;
  align-content: start;
  gap: var(--espace-2xs);
}

.ecosysteme-regles strong {
  color: var(--couleur-encre);
}

.ecosysteme-regles span {
  color: var(--couleur-texte-secondaire);
  font-size: var(--taille-sm);
}

.eco-oui {
  font-weight: var(--graisse-demi);
  color: var(--couleur-succes);
}

.eco-non {
  color: var(--couleur-texte-discret);
}

@media (max-width: 920px) {
  .ecosysteme-schema {
    grid-template-columns: 1fr;
  }

  .ecosysteme-marque,
  .ecosysteme-flux {
    grid-column: 1;
  }
}

/* --------------------------------------------------------------------------
   Cartographie SI : outils par domaine, flux, scénarios.
   -------------------------------------------------------------------------- */
#carto-contenu {
  display: grid;
  gap: var(--espace-lg);
}

.carto-domaines {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: var(--espace-md);
}

.carto-outil {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--espace-2xs) var(--espace-sm);
  padding-block: var(--espace-sm);
  border-bottom: 1px solid var(--couleur-filet);
}

.carto-outil:last-child {
  border-bottom: 0;
}

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

.carto-outil__commentaire {
  grid-column: 1 / -1;
  font-size: var(--taille-sm);
  color: var(--couleur-texte-secondaire);
}

/* --------------------------------------------------------------------------
   Notre board : objectifs en jauges, chantiers internes, standards.
   -------------------------------------------------------------------------- */
.board-objectifs {
  display: grid;
  gap: var(--espace-lg);
}

.board-objectif {
  display: grid;
  gap: var(--espace-2xs);
}

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

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

.board-objectif__valeur {
  font-family: var(--police-titre);
  font-weight: var(--graisse-demi);
  color: var(--couleur-accent-texte);
}

.board-chantiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: var(--espace-md);
}

.board-chantier {
  display: grid;
  gap: var(--espace-sm);
  align-content: start;
}

.board-standards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--espace-md);
  margin-top: var(--espace-md);
}

.board-standard {
  display: grid;
  gap: var(--espace-2xs);
  align-content: start;
}

.board-standard__titre {
  font-size: var(--taille-base);
  color: var(--couleur-encre);
}

.board-standard__cadence {
  font-size: var(--taille-xs);
  font-weight: var(--graisse-demi);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--couleur-accent-texte);
}