/* L'accueil : le softphone à cliquer (des captures réelles et des zones cliquables), les quatre portes du produit
   et le défilé des intégrations. Chargé par index.html seul. La vitrine ne montre QUE
   des captures réelles : jamais d'écran redessiné, il ne correspondrait pas au produit. */

.softphone { margin-top: 40px; }
.softphone__stage { position: relative; aspect-ratio: 1600 / 1000; }
.softphone__stage img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .25s ease; }
.softphone__stage img.is-shown { opacity: 1; }
/* Une zone cliquable : invisible, elle se teinte au survol, comme un bouton de l'application. */
.softphone__hot {
  position: absolute; padding: 0; border: 0; border-radius: 10px; background: transparent; cursor: pointer;
  transition: background .15s ease;
}
.softphone__hot[hidden] { display: none; }
.softphone__hot:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.softphone__hot:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* L'invitation : une pastille qui bat sur le bouton à essayer (ouvrir un fil, répondre, raccrocher),
   et sur l'icône Appels tant que le visiteur n'a rien touché. Jamais de cadre autour d'une zone :
   un cadre décalé d'un pixel se voit, une pastille non. */
.softphone__hot--cue::after, .softphone__beacon {
  content: ""; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); animation: softphone-beacon 1.6s ease-out infinite;
  pointer-events: none;
}
.softphone__hot--cue::after { top: -3px; right: -3px; }
.softphone__beacon { left: 3.3%; top: 7.4%; }
.softphone.is-touched .softphone__beacon, .softphone.is-touched .softphone__try { display: none; }
@keyframes softphone-beacon {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  100% { box-shadow: 0 0 0 12px transparent; }
}
.softphone__try { margin: 18px 0 0; }
.softphone__try-touch { display: none; }
@media (max-width: 700px) {
  /* Sur téléphone les icônes sont trop petites pour le doigt : toucher l'écran passe à la vue suivante. */
  .softphone__beacon, .softphone__hot--cue::after { display: none; }
  .softphone__try-mouse { display: none; }
  .softphone__try-touch { display: inline; }
  .softphone__stage { cursor: pointer; }
}
.softphone__caption { margin: 8px auto 0; max-width: 42em; font-size: .98rem; color: var(--text-2); min-height: 3em; }

/* ---------- Le produit, en quatre portes ---------- */
.doors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 34px; text-align: left; }
.door {
  display: flex; flex-direction: column; gap: 8px; padding: 22px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); color: var(--text); transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.door:hover { text-decoration: none; color: var(--text); border-color: rgba(91, 84, 232, .45); transform: translateY(-3px); box-shadow: 0 22px 46px -30px rgba(40, 34, 130, .55); }
.door svg { width: 26px; height: 26px; fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 14px; }
.door strong { font-size: 1.14rem; }
.door span { font-size: .92rem; line-height: 1.45; color: var(--text-2); }
.door em { margin-top: auto; padding-top: 12px; font-style: normal; font-size: .88rem; font-weight: 600; color: var(--accent); }
.doors--three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .doors, .doors--three { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .doors, .doors--three { grid-template-columns: 1fr; } }

/* ---------- Le défilé des intégrations ---------- */
.marquee { margin-top: 30px; display: grid; gap: 12px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__row { display: flex; gap: 12px; width: max-content; animation: marquee 70s linear infinite; }
.marquee__row--back { animation-direction: reverse; }
.marquee:hover .marquee__row, .marquee:focus-within .marquee__row { animation-play-state: paused; }
.marquee .tool-tile { flex: none; }
.marquee .tool-tile span { white-space: nowrap; }
@keyframes marquee { to { transform: translateX(calc(-50% - 6px)); } }

@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; }
  .marquee__row { animation: none; }
  .softphone__stage img { transition: none; }
  .softphone__hot--cue::after, .softphone__beacon { animation: none; }
}