/* ============================================================
   instanta — les visuels DESSINÉS du site public
   ============================================================
   ⚑ SORTIS DE `vitrine.css`, et pour deux raisons.

   La première est un sujet : ce sont des SCHÉMAS, pas le produit. Ils montrent
   la forme des trois écrans — le téléphone du terrain, l'espace client, le PDF
   — sans prétendre les photographier. De vraies captures viendront quand la
   chaîne du terrain sera stable ; ce jour-là, ce fichier disparaît d'un coup,
   sans toucher à la mise en page du site.

   La seconde est la limite de 300 lignes du dépôt : la feuille réunie en
   faisait 551.

   ⚑ MÊME RÈGLE QU'AILLEURS : aucune couleur en dur, uniquement les alias
   définis dans `vitrine.css` (qui les prend, lui, dans `theme.css`). Un schéma
   doit suivre le thème sombre comme le reste — sinon il devient le seul carré
   clair d'une page sombre.
   ============================================================ */

.visuel { display: grid; place-items: center; }

.tel {
  width: 248px;
  border-radius: var(--rayon-bulle);
  background: var(--v-texte);
  padding: 10px;
  box-shadow: var(--v-ombre-haute);
}
.tel-ecran { background: var(--v-surface); border-radius: var(--rayon); overflow: hidden; }
.tel-haut {
  display: flex; justify-content: space-between;
  padding: 7px 11px; font-size: 10px; color: var(--v-texte-2);
  border-bottom: 1px solid var(--v-bordure);
}
.tel-titre { padding: 11px; display: grid; gap: 2px; }
.tel-titre b { font-size: var(--taille-petit); }
.tel-titre span { font-size: 10px; color: var(--v-texte-2); }

.viseur {
  position: relative;
  margin: 0 11px;
  height: 128px;
  border-radius: var(--rayon-petit);
  background: var(--v-creux);
}
.coin { position: absolute; width: 16px; height: 16px; border: 2px solid var(--v-principale); }
.coin.a { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.coin.b { top: 8px; right: 8px; border-left: 0; border-bottom: 0; }
.coin.c { bottom: 8px; left: 8px; border-right: 0; border-top: 0; }
.coin.d { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
.viseur-etiq {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  padding: 3px 8px; border-radius: var(--rayon-petit);
  background: var(--v-principale); color: var(--v-principale-texte);
  font-size: 9px; white-space: nowrap;
}

.vignettes { display: flex; gap: 5px; padding: 11px; }
.vign { flex: 1; height: 7px; border-radius: var(--rayon-pilule); background: var(--v-bordure); }
.vign.fait { background: var(--couleur-succes); }
.vign.cours { background: var(--v-principale); }

.declencheur { display: grid; place-items: center; padding: 0 0 14px; }
.anneau {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: var(--rayon-pilule);
  border: 2px solid var(--v-principale);
}
.anneau i { width: 26px; height: 26px; border-radius: var(--rayon-pilule); background: var(--v-principale); }

.ecran {
  width: 100%; max-width: 360px;
  background: var(--v-surface);
  border: 1px solid var(--v-bordure);
  border-radius: var(--rayon-bulle);
  box-shadow: var(--v-ombre-haute);
  overflow: hidden;
}
.ecran-barre { display: flex; gap: 6px; padding: 10px 12px; background: var(--v-creux); border-bottom: 1px solid var(--v-bordure); }
.point { width: 8px; height: 8px; border-radius: var(--rayon-pilule); background: var(--v-bordure); }
.ecran-corps { display: grid; grid-template-columns: 54px 1fr; gap: 12px; padding: 14px; }
.ecran-rail { display: grid; gap: 7px; align-content: start; }
.rail-l { height: 8px; border-radius: var(--rayon-pilule); background: var(--v-bordure); }
.rail-l.actif { background: var(--v-principale); }
.ecran-zone { display: grid; gap: 9px; }
.bulle { border: 1px solid var(--v-bordure); border-radius: var(--rayon-petit); padding: 9px; display: grid; gap: 5px; }
.l { height: 7px; border-radius: var(--rayon-pilule); background: var(--v-bordure); }
.l.moyen { width: 68%; }
.l.court { width: 42%; }

.pdf {
  width: 100%; max-width: 330px;
  background: var(--v-surface);
  border: 1px solid var(--v-bordure);
  border-radius: var(--rayon);
  box-shadow: var(--v-ombre-haute);
  padding: 16px;
  display: grid;
  gap: 12px;
}
.pdf-haut { display: flex; justify-content: space-between; gap: 12px; font-size: 10px; color: var(--v-texte-2); border-bottom: 1px solid var(--v-bordure); padding-bottom: 10px; }
.pdf-haut b { font-size: var(--taille-petit); color: var(--v-texte); }
.pdf-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pdf-photo { aspect-ratio: 4 / 3; border-radius: var(--rayon-petit); background: var(--v-creux); }
.pdf-lignes { display: grid; gap: 5px; }
.pdf-lignes i { height: 6px; border-radius: var(--rayon-pilule); background: var(--v-bordure); }
.pdf-lignes i.court { width: 78%; }
.pdf-lignes i.plus-court { width: 56%; }
.pdf-signes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pdf-signe { border: 1px dashed var(--v-bordure); border-radius: var(--rayon-petit); height: 42px; display: grid; place-items: center; font-size: 9px; color: var(--v-texte-2); }
.pdf-sceau {
  border-radius: var(--rayon-petit);
  background: var(--fond-succes);
  color: var(--v-texte);
  font-size: 9px;
  padding: 7px 9px;
  text-align: center;
}