/* =========================================================================
   Points cliquables — styles du modèle.
   Ne lit que des variables --pc-*, qui retombent sur les --m-* de
   l'habillage. Aucune couleur de marque ici : le modèle est neutre.
   Sans script, tout est OUVERT : l'image, puis la liste complète des fiches.
   Le script pose data-pc-etat="actif" ; alors seulement les points
   apparaissent et une seule fiche reste visible.
   ========================================================================= */

.pc {
  --pc-accent: var(--m-accent, #d0d3d8);
  --pc-surface: var(--m-surface, #1f2226);
  --pc-encre: var(--m-encre, #e6e7e9);
  --pc-encre-titre: var(--m-encre, #e6e7e9);
  --pc-encre-douce: var(--m-encre-douce, #aeb2b8);
  --pc-filet-fiche: var(--m-filet, rgba(230, 231, 233, 0.16));
  --pc-halo: color-mix(in srgb, var(--m-fond, #16181b) 62%, transparent);
  --pc-fond-mention: var(--m-fond, #16181b);
  --pc-encre-mention: var(--m-encre, #e6e7e9);
  --pc-police-titre: var(--m-police-titre, system-ui, sans-serif);
  --pc-police-texte: var(--m-police-texte, system-ui, sans-serif);
  --pc-graisse-titre: 500;
  --pc-relevement-titre: 1;
  --pc-rayon: var(--m-rayon, 0px);
  --pc-duree-trace: var(--m-duree, 0.55s);
  --pc-duree-ouverture: var(--m-duree-courte, 0.25s);
  --pc-decalage-ouverture: 0.22s;
  --pc-courbe-trace: var(--m-courbe-sortie, cubic-bezier(0.16, 1, 0.3, 1));
  --pc-courbe-ouverture: var(--m-courbe, cubic-bezier(0.4, 0, 0.2, 1));
  --pc-courbe-ui: var(--m-courbe, cubic-bezier(0.4, 0, 0.2, 1));
  --pc-largeur-image: 36rem;
  --pc-largeur-fiche: 22rem;
  --pc-ecart: clamp(1.5rem, 4vw, 3.5rem);
  --pc-cible: 44px;
  --pc-anneau: 20px;
  --pc-trait: 1.5px;

  container-type: inline-size;
  container-name: pc;
  margin: 0;
}

.pc [hidden] {
  display: none !important;
}

.pc-cadre {
  position: relative;
}

/* ---- l'image et ses points ------------------------------------------- */

/* La scène a les proportions de l'image ; la mention y est le seul élément
   en flux, collée au bas (sticky) : elle reste à l'écran tant qu'un morceau
   de l'image y est. */
.pc-scene {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
}

.pc-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--pc-rayon);
}

.pc-point {
  display: none; /* sans script, un bouton ne ferait rien : on ne le montre pas */
  position: absolute;
  z-index: 4;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: var(--pc-cible);
  height: var(--pc-cible);
  margin: calc(var(--pc-cible) / -2) 0 0 calc(var(--pc-cible) / -2);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  place-items: center;
  -webkit-tap-highlight-color: transparent;
}

.pc[data-pc-etat="actif"] .pc-point {
  display: grid;
}

.pc-anneau {
  position: relative;
  width: var(--pc-anneau);
  height: var(--pc-anneau);
  border: var(--pc-trait) solid var(--pc-accent);
  border-radius: 50%;
  /* un liseré sombre de part et d'autre : l'anneau reste lisible sur un clair */
  box-shadow: 0 0 0 1px var(--pc-halo), inset 0 0 0 1px var(--pc-halo);
}

.pc-anneau::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: var(--pc-accent);
  box-shadow: 0 0 0 1px var(--pc-halo);
  transition: transform 0.18s var(--pc-courbe-ui);
}

@media (hover: hover) {
  .pc-point:hover .pc-anneau::after {
    transform: scale(1.5);
  }
}

.pc-point[aria-expanded="true"] .pc-anneau::after {
  transform: scale(1.75);
}

.pc-point:focus-visible {
  outline: 1px solid var(--pc-accent);
  outline-offset: -6px;
}

.pc-mention {
  position: sticky;
  z-index: 3; /* au-dessus du filet : jamais couverte */
  bottom: 0;
  align-self: flex-start;
  margin: 0;
  padding: 0.3rem 0.6rem 0.32rem;
  background: var(--pc-fond-mention);
  color: var(--pc-encre-mention);
  font-family: var(--pc-police-texte);
  font-size: max(11px, 0.75rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

/* ---- le filet qui relie le point à sa fiche --------------------------- */

.pc-filet {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 0;
  height: 1px;
  background: var(--pc-accent);
  pointer-events: none;
}

/* ---- les fiches ------------------------------------------------------- */

.pc-colonne {
  position: relative;
  margin-top: 0.875rem;
}

.pc-liste {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pc-fiche {
  margin: 0;
  padding: 1.05rem 1.25rem 1.15rem;
  background: var(--pc-surface);
  color: var(--pc-encre);
  border: 1px solid var(--pc-filet-fiche);
  border-radius: var(--pc-rayon);
}

.pc-titre {
  margin: 0 0 0.45rem;
  font-family: var(--pc-police-titre);
  font-weight: var(--pc-graisse-titre);
  font-size: calc(1.25rem * var(--pc-relevement-titre));
  line-height: 1.15;
  color: var(--pc-encre-titre);
}

.pc-texte {
  margin: 0;
  font-family: var(--pc-police-texte);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.pc-note {
  margin: 0.7rem 0 0;
  font-family: var(--pc-police-texte);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--pc-encre-douce);
}

.pc-a-fournir {
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.05em 0.45em;
  border: 1px dashed currentColor;
  font-family: var(--pc-police-texte);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.5;
  vertical-align: 0.2em;
  color: var(--pc-encre-douce);
}

.pc-consigne {
  margin: 0;
  font-family: var(--pc-police-texte);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--pc-encre-douce);
}

.pc-legende {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--pc-encre-douce);
}

.pc-invisible {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- ordinateur : l'image, puis une colonne où la fiche se pose -------- */

@container pc (min-width: 44rem) {
  .pc-cadre {
    display: grid;
    grid-template-columns: minmax(0, var(--pc-largeur-image)) minmax(15rem, var(--pc-largeur-fiche));
    column-gap: var(--pc-ecart);
  }

  .pc[data-pc-cote="gauche"] .pc-cadre {
    grid-template-columns: minmax(15rem, var(--pc-largeur-fiche)) minmax(0, var(--pc-largeur-image));
    justify-content: end;
  }

  .pc[data-pc-cote="gauche"] .pc-colonne {
    order: -1;
  }

  .pc-colonne {
    margin-top: 0;
  }

  .pc[data-pc-etat="actif"] .pc-fiche {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
  }
}

/* ---- mouvement réduit : la fiche apparaît d'un coup, rien ne se trace --- */

@media (prefers-reduced-motion: reduce) {
  .pc-anneau::after {
    transition: none;
  }
}