/* Téléphone photoréaliste — composant commun (site + questionnaire).
   Structure :
     <div class="tel [tel--34]">
       <div class="tel-screen">… écran HTML vivant …</div>
       <img class="tel-frame" src="/img/phone-front.webp" [data-src-34="/img/phone-34.webp"] alt="" width="682" height="1400">
     </div>
   Le cadre (image détourée, écran = trou transparent) est posé AU-DESSUS de l'écran et ne capte aucun clic.
   --tw : largeur du cadre (une longueur). --tz : zoom du contenu de l'écran (1 = taille réelle).
   --tel-safe : marge haute à laisser dans l'écran pour passer sous l'encoche.

   Vue par défaut : DE FACE, calée en simples pourcentages du cadre (aucune fonction trigonométrique, aucun JS).
   Vue trois-quarts (.tel--34) : seulement sur écran large, activée par /js/tel.js qui pose la classe .is-34,
   charge le cadre trois-quarts et calcule la projection de l'écran en px. Sans JS ou sur téléphone : vue de face. */
.tel {
  --tw: 200px; --tz: 1;
  --tel-safe: calc(var(--tw) * .13 / var(--tz));
  position: relative; flex: none; width: var(--tw); aspect-ratio: 682 / 1400; margin: 0 auto;
}
@supports not (aspect-ratio: 1) { .tel { height: calc(var(--tw) * 2.0528); } }
/* Ombre portée douce : le même cadre, sous l'écran, pour que l'ombre ne tombe jamais sur l'écran */
.tel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url(/img/phone-front.webp) center / 100% 100% no-repeat;
  filter: drop-shadow(0 calc(var(--tw) * .09) calc(var(--tw) * .1) rgb(11 11 15 / .2)) drop-shadow(0 calc(var(--tw) * .015) calc(var(--tw) * .03) rgb(11 11 15 / .14));
}
/* Écran : déborde très légèrement sous le cadre (aucun liseré), coins arrondis comme la dalle.
   Tout est en % du cadre : l'écran suit le cadre quelle que soit sa taille. */
.tel-screen {
  position: absolute; left: 3.9%; top: 1.5%;
  width: calc(92.2% / var(--tz)); height: calc(97.1% / var(--tz));
  border-radius: 14.5% / 6.7%; overflow: hidden;
  transform-origin: 0 0; transform: scale(var(--tz));
  background: #fff;
}
.tel-frame {
  position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%; max-width: none;
  pointer-events: none; user-select: none; -webkit-user-select: none;
}

/* ---------- Vue trois-quarts (posée par /js/tel.js, écran large uniquement) ----------
   L'écran garde sa taille logique (en % du cadre) ; le JS le projette sur le quadrilatère de la dalle
   avec une matrice calculée en px (style.transform), recalculée à chaque changement de taille. */
.tel.is-34 { aspect-ratio: 574 / 1400; --tel-safe: calc(var(--tw) * .14 / var(--tz)); }
@supports not (aspect-ratio: 1) { .tel.is-34 { height: calc(var(--tw) * 2.439); } }
.tel.is-34::before { background-image: url(/img/phone-34.webp); }
.tel.is-34 .tel-screen {
  left: 0; top: 0;
  width: calc(107.1% / var(--tz)); height: calc(94.46% / var(--tz));
  border-radius: 14.5% / 6.7%;
}