/* ============================================================================
   Cosmeek V2 — « Tout se joue sur trois niveaux »
   Nodes 3232:22856 (section), 3336:25434 et 3336:25475 (états au clic).

   Deux colonnes de 656 séparées de 16. À droite, un radar triangulaire dont
   les trois sommets SONT les commandes : on clique le sommet, il passe en
   orange, et sa définition se déroule sous lui.
   ========================================================================= */


.trio__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-16);
}

/* ── Colonne de gauche ──────────────────────────────────────────────────── */
.trio__intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  gap: var(--sp-48);
}

.trio__head {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--sp-32);
}

/* Le titre et son chapô sont plus serrés que le reste de la colonne : 24
   entre eux, 32 après la pastille, 48 avant le bouton. */
.trio__mots {
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
}

.trio__title {
  margin: 0;
}

.trio__baseline {
  max-inline-size: 428px;
  margin: 0;
  color: var(--c-ink-2);
}

/* ── Colonne de droite ──────────────────────────────────────────────────── */
.trio__viz {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

/* La maquette fige le cartouche à 507 de haut alors que son contenu s'arrête
   à 470 : une queue de 37 px, sans objet, qui ne se voit pas dans Figma parce
   que le graphique y fait toujours 592 de large. Dans une page, lui suit la
   colonne : à 1100 il ne fait plus que 249 de haut, et la hauteur figée
   ouvrait un trou de 168 px sous le triangle. La carte épouse donc son
   contenu — 32 de marge sous le graphique, à toute largeur. */
.trio__panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-48);
  padding: var(--sp-32);
  border-radius: var(--r-lg);
  background: var(--c-cream-deep);
  overflow: clip; /* comme la maquette : rien ne sort du cartouche */
}

.trio__legend {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--c-label);
}

.trio__legend > span:first-of-type {
  margin-inline-end: var(--sp-2);
}

/* Le pourcentage de cohérence : étiquette orange, comme dans la maquette. */
.trio__pct {
  padding: 2px 3px;
  background: var(--c-orange);
  color: var(--c-cream);
  font-variant-numeric: tabular-nums;
}

.trio__legend img {
  inline-size: 12.578px; /* cote exacte du symbole */
  block-size: 9.36px;
  rotate: 180deg; /* la maquette pose la marque retournée */
}

/* ── Radar ──────────────────────────────────────────────────────────────
   La scène superpose deux couches de même boîte : le graphique et, par
   dessus, les définitions. Les séparer permet au repli étroit de faire
   redescendre les secondes sous le premier sans toucher à sa géométrie. */
.trio__scene {
  position: relative;
}

/* La zone de tracé garde le rapport de la maquette : les sommets sont placés
   en pourcentage, ils suivent donc l'échelle sans se recaler. */
.trio__chart {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 592 / 349;
}

.trio__chart svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
}

/* Paliers du radar — ici des triangles. Le trait est le Border/Primaire du
   projet : Figma l'exporte aplati en #ddd9d2, qui est exactement ce que donne
   var(--c-border) posé sur la crème foncée. */
.trio__ring {
  fill: none;
  stroke: var(--c-border);
}

/* Rayons prolongés au-delà du dernier palier, jusque sous les sommets. */
.trio__ray {
  stroke: var(--c-ink-2);
  stroke-dasharray: 2 2;
}

.trio__area {
  fill: rgb(var(--c-orange-rgb) / 0.4);
  stroke: var(--c-orange);
  stroke-linejoin: round;
}

/* ── Les sommets, qui sont les commandes ────────────────────────────────── */
.trio__pole {
  position: absolute;
  padding: var(--sp-8);
  border: 0;
  background: var(--c-label-deep);
  color: var(--c-cream);
  font-family: var(--ff-mono);
  font-weight: 300;
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--d-micro) var(--e-inout);
}

/* Le survol ne s'applique qu'aux sommets en veille : assombrir celui qui est
   déjà orange le ferait reculer alors qu'il est le sujet. */
.trio__pole:not([aria-pressed="true"]):hover {
  background: var(--c-brown);
}

.trio__pole[aria-pressed="true"] {
  background: var(--c-orange);
}

/* Appel discret : tant que personne n'a touché au diagramme, les sommets en
   veille émettent de loin en loin un halo d'un pixel de large qui s'étend de
   7 px et s'efface. Il ne dit rien de plus que « ça se clique ». Le premier
   clic (data-touche, posé par js/trio.js) l'éteint pour de bon ; le survol
   aussi, le temps qu'on y est. Humain démarre après Marque : les deux ne
   battent pas ensemble. */
[data-trio]:not([data-touche]) .trio__pole[aria-pressed="false"]:not(:hover, :focus-visible) {
  animation: trio-appel 4s var(--e-out) 1.2s infinite;
}

[data-trio]:not([data-touche]) .trio__pole--humain[aria-pressed="false"]:not(:hover, :focus-visible) {
  animation-delay: 3.2s;
}

@keyframes trio-appel {
  0% {
    box-shadow: 0 0 0 0 rgb(var(--c-brown-rgb) / 0.22);
  }
  40%,
  100% {
    box-shadow: 0 0 0 7px rgb(var(--c-brown-rgb) / 0);
  }
}

.trio__pole:focus-visible {
  outline: 2px solid var(--c-brown);
  outline-offset: 2px;
}

/* Ancrages relevés dans la zone de tracé de 592 × 349.
   « Marque » est centré sur son axe ; « entreprise » est calé par son bord
   gauche ; « humain » par son bord DROIT, car sa définition partage ce bord
   avec lui dans la maquette — et parce qu'un ancrage à gauche le pousserait
   hors du cartouche dès que la colonne se resserre. */
.trio__pole--marque {
  inset-inline-start: 50%;
  inset-block-start: 0.7564%;
  translate: -50% 0;
}

.trio__pole--entreprise {
  inset-inline-start: 8.9527%;
  inset-block-start: 77.8339%;
}

.trio__pole--humain {
  inset-inline-end: 14.1892%;
  inset-block-start: 77.8339%;
}

/* ── Les définitions ────────────────────────────────────────────────────
   Une seule est lisible à la fois. Elle se DÉROULE depuis le bord par lequel
   son sommet est ancré — au centre pour « marque », vers la droite pour
   « entreprise », vers la gauche pour « humain » — plutôt que d'apparaître en
   fondu : le texte ne se déforme pas, et le mouvement dit d'où il vient.

   Le rythme est en deux temps. Celle qui part se referme vite et sans retard
   pour libérer la place ; celle qui arrive prend son temps, et démarre une
   fois l'autre partie. Les deux additionnées font --d-enter. */
.trio__defs {
  position: absolute;
  inset: 0;
  pointer-events: none;

  /* Hauteur d'un sommet, déduite des jetons plutôt que relevée : deux fois la
     marge intérieure, plus la boîte de texte. C'est ce qui permet de poser le
     cartouche sous son label sans dépendre de l'échelle.

     Sans elle, le décalage de 31 px de la maquette devenait un pourcentage de
     la hauteur du graphique — donc 31 px à 1440, mais 27 px à 1280, où le
     label de 28,6 recouvrait le cartouche. */
  --h-sommet: calc(2 * var(--sp-8) + var(--fs-sm) * var(--lh-tight));
}

.trio__def {
  position: absolute;
  margin: 0;
  padding: var(--sp-8);
  background: var(--c-label-deep);
  color: var(--c-cream);
  white-space: normal;
  transition: clip-path var(--d-micro) var(--e-inout);
}

.trio__def[data-actif] {
  clip-path: inset(0);
  transition: clip-path var(--d-acc) var(--e-out) var(--d-micro);
}

/* Chaque définition partage l'ancrage de son sommet, et son bord de départ. */
.trio__def--marque {
  inset-inline-start: 50%;
  inset-block-start: calc(0.7564% + var(--h-sommet) + var(--sp-2));
  translate: -50% 0;
  clip-path: inset(0 50% 0 50%);
}

/* Les trois définitions peuvent être ouvertes ensemble : « entreprise » reste
   sur une ligne (comme la maquette) et « humain », plus longue, se replie sur
   le tiers de droite pour ne pas la recouvrir. */
.trio__def--entreprise {
  white-space: nowrap;
}

.trio__def--humain {
  max-inline-size: 33%;
}

.trio__def--marque {
  max-inline-size: 60%;
}

.trio__def--entreprise {
  inset-inline-start: 8.9527%;
  inset-block-start: calc(77.8339% + var(--h-sommet) + var(--sp-2));
  clip-path: inset(0 100% 0 0);
}

.trio__def--humain {
  inset-inline-end: 14.1892%;
  inset-block-start: calc(77.8339% + var(--h-sommet) + var(--sp-2));
  clip-path: inset(0 0 0 100%);
}

/* ── Encart de bas de colonne ───────────────────────────────────────────── */
.trio__note {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  padding-inline: var(--sp-16);
}

.trio__note p {
  margin: 0;
  color: var(--c-ink-2);
}

.trio__disc {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  border-radius: var(--r-pill);
  background: var(--c-brown);
}

/* ── Repli ──────────────────────────────────────────────────────────────
   Sous 1024, les deux colonnes s'empilent : à 460 de large le radar
   deviendrait illisible et le titre de 56 ne tiendrait plus en deux lignes. */
@media (width < 1024px) {
  .trio__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-48);
  }

  .trio__panel {
    gap: var(--sp-32);
  }
}

/* Sous 720, les définitions ne tiennent plus en travers du graphique : une
   ligne de 343 dans un cartouche qui en fait autant déborderait. Elles
   quittent la superposition et redescendent sous le radar, empilées dans la
   même cellule pour que la hauteur ne saute pas d'une définition à l'autre.
   Le déroulé, lui, reste — il part de la gauche pour les trois. */
@media (width < 720px) {
  .trio__scene {
    display: flex;
    flex-direction: column;
    gap: var(--sp-16);
  }

  .trio__defs {
    position: static;
    display: grid;
    gap: var(--sp-8);
    pointer-events: auto;
  }

  .trio__def {
    position: static;
    translate: none;
    max-inline-size: none;
    clip-path: inset(0 100% 0 0);
  }

  .trio__def:not([data-actif]) {
    display: none;
  }

  .trio__def[data-actif] {
    clip-path: inset(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .trio__pole {
    transition-duration: 120ms;
  }

  [data-trio]:not([data-touche]) .trio__pole[aria-pressed="false"]:not(:hover, :focus-visible) {
    animation: none;
  }

  /* Le déroulé disparaît : la définition est là ou elle n'est pas. */
  .trio__def,
  .trio__def[data-actif] {
    transition: none;
  }
}