/* ==========================================================================
   LA BOITE DE PHOTOS — cadres autour des visages
   Un rectangle par tete, avec le nom dessous. Discret par defaut : on
   regarde d'abord la photo, pas la grille de cadres.

   Les positions sont posees en pixels par _js/visages.js (la CSP interdit
   l'attribut style en dur cote serveur, et le calcul depend de la place
   reellement occupee par la photo dans son element).
   ========================================================================== */

.visages-scene {
  position: relative;
  display: block;
}

.visages-couche {
  position: absolute;
  inset: 0;
  /* En lecture, la couche laisse passer le clic : un appui sur la photo
     doit toujours ouvrir la visionneuse. */
  pointer-events: none;
}

.visage {
  position: absolute;
  display: block;
  border: 2px solid var(--c-genre, var(--c-accent));
  border-radius: var(--rayon-s);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 60%);
  opacity: 0;
  transition: opacity var(--transition);
}

.visage-nom {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  max-width: 12rem;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: var(--rayon-s);
  background: var(--c-genre, var(--c-texte));
  color: var(--c-surface);
  font-size: 0.8rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Reveler : au survol sur ordinateur, par le bouton sur telephone. */
.visages-scene:hover .visage,
.visages-scene:focus-within .visage,
.visages-scene.montre-visages .visage,
.visages-scene[data-edition] .visage { opacity: 1; }

/* --- Ecran de placement --------------------------------------------------- */

.visages-scene[data-edition] img {
  display: block;
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  background: var(--c-surface-douce);
  border: 1px solid var(--c-bordure);
  border-radius: var(--rayon);
}

.visages-scene[data-edition] .visages-couche {
  pointer-events: auto;
  cursor: crosshair;
  /* Le doigt trace un rectangle : il ne doit pas faire defiler la page. */
  touch-action: none;
}

.visage-actif { border-width: 3px; }

.visage-trace {
  border-style: dashed;
  border-color: var(--c-primaire);
  background: rgb(164 85 47 / 12%);
}

.visage-trace .visage-nom { background: var(--c-primaire); }

.visage[hidden] { display: none; }

.visages-choix {
  margin: var(--pad-s) 0 0;
  padding: 0;
  border: 0;
}

.visages-choix legend {
  padding: 0;
  font-family: var(--f-titre);
  font-size: 1.05rem;
}

.tag-place {
  margin-left: 6px;
  color: var(--c-succes);
}

.visages-etat {
  min-height: 1.4em;
  margin: 8px 0 0;
  color: var(--c-texte-doux);
}

/* --- Propositions de l'assistant ------------------------------------------
   En pointille, dans une autre couleur : on ne doit jamais confondre une
   proposition avec un visage confirme par la famille.
   -------------------------------------------------------------------------- */
.visage-propose {
  border-style: dashed;
  border-color: var(--c-accent);
  opacity: 1;
}

.visage-propose .visage-nom { background: var(--c-accent); }

.ressemblances {
  margin-block: var(--pad-s);
  padding: var(--pad-s);
  border: 1px solid var(--c-bordure);
  border-radius: var(--rayon);
  background: var(--c-fond);
}

.liste-propositions {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.proposition {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--c-bordure);
}

.proposition-nom { flex: 1 1 auto; font-weight: 600; }

.proposition-doute {
  flex: 0 0 auto;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--c-texte-doux);
}

/* --- Liste des cadres poses ---------------------------------------------- */

.liste-cadres {
  list-style: none;
  margin: 0;
  padding: 0;
}

.liste-cadres > li {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--c-bordure);
}

.liste-cadres form { margin: 0; }

.btn-petit {
  padding: 6px 12px;
  font-size: 0.9rem;
}

/* --- Impression ----------------------------------------------------------- */

@media print {
  .visage { display: none; }
}