/* Téléphone de démonstration (accueil particuliers et page pro) : un artisan dans un cadre vert, la barre « Je cherche un… »,
   deux autres artisans derrière. Monté par assets/vitrine/telephone.js dans <div class="tel-scene" data-tel="client|pro">. */
.tel-scene{--vert:#467d25;--encre:#0b1f3a;position:relative;width:min(400px,100%);margin:0 auto;aspect-ratio:40/54}
.tel-dos{position:absolute;top:14%;width:36%;height:66%;object-fit:cover;border-radius:10px;box-shadow:0 10px 30px rgba(3,26,50,.14);transition:opacity .5s}
.tel-dos.d1{right:6%;z-index:1}
.tel-dos.d2{right:0;top:20%;height:56%;width:34%;z-index:0}
.tel{position:absolute;left:0;top:0;z-index:2;width:74%;height:100%;padding:9px;background:#e9e9e4;border-radius:38px;box-shadow:0 18px 40px rgba(3,26,50,.18),inset 0 0 0 2px #cfcfc8}
.tel-ecran{position:relative;width:100%;height:100%;border-radius:30px;overflow:hidden;background:#111}
.tel-ecran::before{content:"";position:absolute;z-index:3;top:10px;left:50%;width:34%;height:22px;margin-left:-17%;border-radius:12px;background:#0b0b0b}
.tel-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .5s}
.tel-cadre{position:absolute;z-index:2;left:9%;right:9%;top:13%;bottom:17%;border:4px solid var(--vert);border-top:0;pointer-events:none}
.tel-tag{position:absolute;left:-4px;right:-4px;top:-30px;display:flex;align-items:center;justify-content:center;gap:8px;height:30px;padding:0 10px;background:var(--vert);color:#fff;font-size:14px;font-weight:800;white-space:nowrap}
.tel-note{font-weight:700}
.tel-barre{position:absolute;z-index:3;left:4%;right:4%;bottom:5%;display:flex;align-items:center;gap:4px;min-height:44px;padding:0 3px 0 9px;border:0;border-radius:8px;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.25);font:inherit;font-size:12.5px;color:var(--encre);text-align:left;cursor:pointer}
.tel-txt{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tel-txt b{font-weight:800}
.tel-curseur{display:inline-block;width:2px;height:1.05em;margin-left:1px;vertical-align:-2px;background:var(--vert);animation:telClic 1s steps(1) infinite}
@keyframes telClic{50%{opacity:0}}
.tel-micro{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:6px;background:var(--vert);color:#fff}
.tel-micro svg{width:20px;height:20px}
.tel-exemple{position:absolute;z-index:4;right:0;top:0;padding:5px 10px;border-radius:6px;background:#fff;border:1px solid #e1e6dc;font-size:12px;font-weight:800;color:#3a4a5e}
@media(prefers-reduced-motion:reduce){.tel-dos,.tel-photo{transition:none}.tel-curseur{animation:none}}