/* ACCUEIL (proposition A, validée le 08/10) — le téléphone de l'accueil en 3D (three.js, assets/vendor/three.min.js déjà dans le site).
   Le téléphone en HTML (.day) reste la version de base : il s'affiche tant que la 3D n'est pas prête,
   et pour toujours si WebGL manque ou si « réduire les animations » est demandé. */
.tel3d{position:relative;width:100%;max-width:520px;margin:0 auto;aspect-ratio:5/8;max-height:min(860px,92vh);cursor:pointer;
  opacity:0;transition:opacity .9s ease;touch-action:pan-y}
.tel3d canvas{display:block;width:100%;height:100%}
.dayzone.t3-on .tel3d{opacity:1}
/* le téléphone HTML reste lisible des lecteurs d'écran et de Google, mais n'occupe plus de place */
.dayzone.t3-on .day{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0);clip-path:inset(50%);padding:0!important;margin:0!important;box-shadow:none!important}
.dayzone:not(.t3-on) .tel3d{position:absolute;inset:0 0 auto;pointer-events:none}
.t3-points{display:flex;justify-content:center;gap:8px;margin:6px 0 0}
.t3-points button{width:8px;height:8px;padding:0;border:0;border-radius:99px;background:color-mix(in srgb,var(--fond) 70%,#8a7a60);cursor:pointer;transition:width .35s ease,background .35s ease}
.t3-points button[aria-current="true"]{width:24px;background:var(--blue,#1466b8)}
.dayzone:not(.t3-on) .t3-points{display:none}
@media(max-width:560px){.tel3d{aspect-ratio:9/15}}
/* glow up (08/10) : les halos derrière suivent un peu le téléphone (propriété translate : s'ajoute à l'animation « halo ») */
.dayzone.t3-on::before{translate:var(--t3x,0) var(--t3y,0)}
/* HYBRIDE (08/10) : la mini-appli HTML posée sur la vitre du téléphone 3D (voir tel3d.js) */
.t3h-calque{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.t3h-cam{position:absolute;inset:0;pointer-events:none}
body.apercu-appli .t3h-ecran{position:absolute!important;left:0;top:0;max-width:none!important;border-radius:52px!important;pointer-events:auto;
  cursor:auto;transform-origin:0 0;-webkit-font-smoothing:antialiased}
.t3h-demo .tel-defile{overflow:hidden!important}   /* démo : le doigt fait défiler la PAGE, pas l'écran */
.t3h-demo{cursor:pointer!important}
.t3h-reflet{position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.10) 48%,rgba(255,255,255,.05) 54%,rgba(255,255,255,.07) 60%,rgba(255,255,255,0) 70%);
  background-size:260% 100%;background-position:var(--t3h-reflet,50%) 0;mix-blend-mode:screen}
.t3h-entre{position:absolute!important;left:0;right:0;top:0;z-index:2;background:var(--fond);box-shadow:-24px 0 40px rgba(40,30,15,.14);
  animation:t3h-entre .8s cubic-bezier(.65,0,.35,1) both}
.t3h-sort{animation:t3h-sort .8s cubic-bezier(.65,0,.35,1) both}
@keyframes t3h-entre{from{transform:translateX(100%)}to{transform:none}}
@keyframes t3h-sort{to{transform:translateX(-35%);opacity:.45}}
.t3h-indice{margin:4px 0 0;text-align:center;font:600 13px/1.3 Arial,Helvetica,sans-serif;letter-spacing:.02em;color:var(--steel,#6b6358);transition:opacity .6s ease}
.t3h-indice.vu{opacity:0}
.dayzone:not(.t3-on) .t3h-indice{display:none}
/* MYELY (08/10) : la vraie appli en iframe sur la vitre.
   Safari iOS (Damien 08/10) : border-radius + overflow:hidden ne découpent pas une iframe dans un parent transformé en 3D ;
   triple découpe : masque SVG arrondi sur le conteneur, clip-path arrondi sur l'iframe, et arrondi DANS la page /vitrine */
.t3h-myely{position:absolute;left:0;top:0;overflow:hidden;border-radius:56px;background:var(--fond,#F6F3EE);transform-origin:0 0;pointer-events:auto}
.t3h-myely iframe{display:block;width:100%;height:100%;border:0;background:var(--fond,#F6F3EE)}
.t3h-ile{position:absolute;left:50%;top:calc(12px*var(--t3h-z,1));width:calc(110px*var(--t3h-z,1));height:calc(32px*var(--t3h-z,1));margin-left:calc(-55px*var(--t3h-z,1));border-radius:calc(20px*var(--t3h-z,1));background:#0b0a09;z-index:4;pointer-events:none}
.t3h-capte{position:absolute;inset:0;z-index:3;cursor:pointer}
.t3h-myely:not(.t3h-demo) .t3h-capte{display:none}
.t3h-myely{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 845' preserveAspectRatio='none'%3E%3Crect width='390' height='845' rx='56' ry='56'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 845' preserveAspectRatio='none'%3E%3Crect width='390' height='845' rx='56' ry='56'/%3E%3C/svg%3E");-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;isolation:isolate}
.t3h-myely iframe{border-radius:var(--t3h-r,56px);-webkit-clip-path:inset(0 round var(--t3h-r,56px));clip-path:inset(0 round var(--t3h-r,56px));background:transparent}
.t3h-ecran{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 780' preserveAspectRatio='none'%3E%3Crect width='360' height='780' rx='52' ry='52'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 780' preserveAspectRatio='none'%3E%3Crect width='360' height='780' rx='52' ry='52'/%3E%3C/svg%3E");-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-clip-path:inset(0 round 52px);clip-path:inset(0 round 52px);isolation:isolate}
/* Safari / Chrome iOS (Dimitri 08/10) : overflow + border-radius ne découpent pas un enfant composé dans un parent en matrix3d ;
   le masque (et le clip-path) découpent aussi les écrans qui glissent pendant les transitions */
/* pendant un glissement, l'écran qui sort disparaît en fondu au lieu de rester à moitié visible ; hors glissement il est caché */
.t3h-sort{animation:t3h-sort .8s cubic-bezier(.65,0,.35,1) both!important}
@keyframes t3h-sort{to{transform:translateX(-35%);opacity:0}}