.tel-zone{ background: transparent; overflow: visible; }
.tel{ position: absolute; inset: 0; container-type: size; display: grid; place-items: center; }
.tel-telephone{ --h: min(100cqh, 720px); height: var(--h); width: calc(var(--h) * 0.49); max-width: 100%; font-size: clamp(13px, calc(var(--h) / 41), 16px); position: relative; background: #0A2A23; border-radius: 2.6em; padding: 0.55em; box-shadow: 0 0 0 0.12em rgba(185, 198, 163, 0.6), 0 2em 3.6em -1.2em rgba(0, 0, 0, 0.65); color: var(--foret); font-family: var(--corps, system-ui, sans-serif); }
.tel-ecran{ position: relative; height: 100%; background: var(--ivoire, #F1F0DF); border-radius: 2.1em; overflow: hidden; display: flex; flex-direction: column; }
.tel-encoche{ position: absolute; top: 0.55em; left: 50%; width: 5.2em; height: 1.3em; margin-left: -2.6em; background: #0A2A23; border-radius: 1em; z-index: 2; }
.tel-barre{ display: flex; justify-content: space-between; padding: 0.95em 1.9em 0.5em; font-weight: 600; font-size: 0.85em; line-height: 1.2; }
.tel-contenu{ flex: 1; min-height: 0; padding: 0.2em 1.2em 0; display: flex; flex-direction: column; }
.tel-accueil{ position: absolute; bottom: 0.55em; left: 50%; width: 7em; height: 0.3em; margin-left: -3.5em; border-radius: 0.2em; background: rgba(16, 60, 50, 0.55); }
.tel-type{ display: grid; margin: 0 0 0.3em; font-size: 0.95em; font-weight: 600; line-height: 1.3; }
.tel-type span{ grid-area: 1 / 1; opacity: 0; transition: opacity 0.3s ease; }
.tel[data-etat="0"] .tel-type [data-e="0"], .tel[data-etat="1"] .tel-type [data-e="1"], .tel[data-etat="2"] .tel-type [data-e="2"]{ opacity: 1; }
.tel h4{ margin: 0; font: 400 1.75em/1.1 var(--titre, Georgia, serif); }
.tel-adresse{ margin: 0.15em 0 0.7em; font-size: 0.95em; line-height: 1.3; }
.tel-plan{ display: block; width: 100%; height: auto; flex: none; }
.tel-sol{ fill: rgba(185, 198, 163, 0.28); }
.tel-rue{ stroke: #B9C6A3; stroke-width: 22; opacity: 0.7; fill: none; }
.tel-parcelle{ fill: rgba(185, 198, 163, 0.55); stroke: #103C32; stroke-width: 2; }
.tel-maison{ fill: #103C32; }
.tel-piscine{ fill: #F1F0DF; stroke: #103C32; stroke-width: 2; }
.tel-terrasse{ fill: rgba(16, 60, 50, 0.12); stroke: #103C32; stroke-width: 2; }
.tel-cote{ fill: none; stroke: #103C32; stroke-width: 2; stroke-linecap: round; }
.tel-abri{ fill: none; stroke: #103C32; stroke-width: 2; stroke-dasharray: 5 4; }
.tel-plan text{ fill: #103C32; font: 17px var(--corps, system-ui, sans-serif); }
.tel-plan .tel-sur-maison{ fill: #F1F0DF; }
.tel-p1, .tel-p2{ opacity: 0; transition: opacity 0.4s ease; }
.tel[data-etat="1"] .tel-p1, .tel[data-etat="2"] .tel-p1, .tel[data-etat="2"] .tel-p2{ opacity: 1; }
.tel-corps{ position: relative; display: grid; margin-top: 0.7em; padding: 0.15em 0.55em 0.5em; }
.tel-cadre{ position: absolute; inset: 0; border: 2px solid #103C32; background: rgba(185, 198, 163, 0.22); pointer-events: none; }
.tel-etat{ grid-area: 1 / 1; position: relative; opacity: 0; transform: translateY(0.5em); transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; }
.tel[data-etat="0"] .tel-etat[data-e="0"], .tel[data-etat="1"] .tel-etat[data-e="1"], .tel[data-etat="2"] .tel-etat[data-e="2"]{ opacity: 1; transform: none; pointer-events: auto; }
.tel-bloc{ padding: 0.5em 0 0.4em; border-top: 1px solid rgba(16, 60, 50, 0.35); }
.tel-bloc:first-child{ border-top: 0; }
.tel-bloc h5{ margin: 0 0 0.1em; font: 600 0.9em/1.3 var(--corps, system-ui, sans-serif); }
.tel-bloc p{ margin: 0; font-size: 1em; line-height: 1.35; }
.tel-bloc mark{ background: rgba(185, 198, 163, 0.75); color: inherit; padding: 0 0.15em; }
.tel-qui{ list-style: none; margin: 0.5em 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4em; }
.tel-qui li{ display: inline-flex; align-items: center; gap: 0.35em; padding: 0.15em 0.6em; border: 1px solid #103C32; background: #F1F0DF; font-size: 0.9em; line-height: 1.4; }
.tel-qui svg{ flex: none; width: 1.1em; height: 1.1em; }
@media (prefers-reduced-motion: reduce){.tel-type span, .tel-p1, .tel-p2, .tel-etat{ transition: none; }
}
.scene--tel[data-mode="empile"] .scene-panneau-in{ display: flex; flex-direction: column; }
.scene--tel[data-mode="empile"] .scene-etape-visuel{ order: -1; margin-bottom: 18px; }
.scene--tel[data-mode="empile"] .scene-etape-visuel .scene-visuel{ height: min(125vw, 560px); min-height: 0; }