/* Téléphone animé « ce soir. » : l’app reproduite en HTML/CSS, pilotée par le défilement.
   Aucune url() ici : les images sont posées par telephone.js (chemins relatifs à v4/),
   les polices League Gothic, Nunito Sans et Fraunces sont déclarées par la page.
   Tout est dessiné dans un écran de 390 × 844 points, mis à l’échelle par le JS. */

.ta-tel{position:relative;width:100%;border-radius:46px;padding:9px;background:#060505;
  box-shadow:0 0 0 1.5px #3a2f35,inset 0 0 0 1px rgba(255,255,255,.05),0 50px 90px -30px rgba(0,0,0,.95)}
.ta-ecran{position:relative;border-radius:37px;overflow:hidden;aspect-ratio:390/844;background:#110D0E;isolation:isolate}
.ta-app{position:absolute;left:0;top:0;width:390px;height:844px;transform-origin:0 0;overflow:hidden;
  font-family:"Nunito Sans",system-ui,sans-serif;color:#F7F2F0;-webkit-font-smoothing:antialiased;
  line-height:1.25;text-align:left;user-select:none;-webkit-user-select:none;pointer-events:none;contain:layout paint}
.ta-app *{box-sizing:border-box;margin:0;padding:0}
.ta-app img{display:block;max-width:none;width:100%;height:100%;object-fit:cover}
.ta-app svg{display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ta-app .ta-plein{fill:currentColor;stroke:none}
.ta-abs{position:absolute}
.ta-gothic{font-family:"League Gothic",sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.005em}

/* Barre d’état et caméra */
.ta-statut{position:absolute;left:0;top:0;width:390px;height:24px;display:flex;align-items:center;justify-content:space-between;padding:0 24px 0 28px;font:700 12.5px/1 "Nunito Sans";color:#F7F2F0;z-index:30}
.ta-statut .ta-icones{display:flex;gap:6px;align-items:center}
.ta-camera{position:absolute;left:189px;top:6px;width:12px;height:12px;border-radius:6px;background:#050404;box-shadow:0 0 0 1.5px #1c1719;z-index:31}

/* Logo */
.ta-logo{position:absolute;left:20px;top:32px;font:800 34px/34px "Fraunces",serif;letter-spacing:-.03em;color:#F7F2F0;white-space:nowrap;z-index:5}
.ta-logo b{color:#A23BE0;font-weight:800}

/* Écrans */
.ta-couche{position:absolute;left:0;top:0;width:390px;height:844px}

/* 1. Accueil */
.ta-titre{position:absolute;left:20px;top:96px;font-size:50px;line-height:50px;letter-spacing:.4px}
.ta-titre span{display:block}
.ta-titre span+span{color:#C77DF2}
.ta-champ{position:absolute;left:20px;top:213px;width:350px;height:56px;border-radius:28px;background:#1A1517;box-shadow:inset 0 0 0 1.5px rgba(247,242,240,.13);
  display:flex;align-items:center;padding-left:21px;font:600 17px/1 "Nunito Sans";color:#A99FA2}
.ta-pyrio{position:absolute;left:20px;top:285px;width:350px;height:65px;border-radius:18px;background:#21162A;box-shadow:inset 0 0 0 1.5px rgba(162,59,224,.55)}
.ta-pyrio img{position:absolute;left:15px;top:11px;width:43px;height:43px;object-fit:contain}
.ta-pyrio strong{position:absolute;left:68px;top:12px;font:800 16.5px/20px "Nunito Sans";color:#F7F2F0}
.ta-pyrio small{position:absolute;left:68px;top:35px;font:600 14px/18px "Nunito Sans";color:#B9AEB2}
.ta-pyrio svg{position:absolute;right:16px;top:22px;width:20px;height:20px;color:#C77DF2}
.ta-moment{position:absolute;left:22px;top:376px;font:800 18px/22px "Nunito Sans"}
.ta-puce{position:absolute;top:412px;height:34px;border-radius:17px;display:flex;align-items:center;justify-content:center;font:800 14.5px/1 "Nunito Sans";background:#1A1517;box-shadow:inset 0 0 0 1.5px rgba(247,242,240,.13)}
.ta-puce.on{background:#A23BE0;box-shadow:none}
.ta-sous{position:absolute;left:22px;top:454px;font:600 13.5px/16px "Nunito Sans";color:#B9AEB2}
.ta-une{position:absolute;left:20px;top:497px;width:350px;height:175px;border-radius:16px;overflow:hidden;background:#241E21}
.ta-une::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,8,8,0) 30%,rgba(10,8,8,.85) 100%)}
.ta-une .ta-badge{position:absolute;left:14px;top:83px;height:21px;padding:0 9px;border-radius:11px;background:#A23BE0;font:800 12px/21px "Nunito Sans";z-index:1}
.ta-une .ta-gothic{position:absolute;left:14px;top:108px;font-size:34px;line-height:34px;z-index:1}
.ta-une small{position:absolute;left:14px;top:146px;font:600 13px/16px "Nunito Sans";color:#E2D9DC;z-index:1}
.ta-mini{position:absolute;top:687px;width:112px;height:130px;border-radius:10px;overflow:hidden;background:#241E21}
.ta-mini i{position:absolute;left:6px;top:6px;width:25px;height:30px;border-radius:7px;background:#A23BE0;font:400 23px/30px "League Gothic";font-style:normal;text-align:center}

/* 2. Recherche */
.ta-champ2{position:absolute;left:20px;top:90px;width:350px;height:67px;border-radius:34px;background:#141011;box-shadow:inset 0 0 0 2.5px #A23BE0}
.ta-champ2 .ta-retour{position:absolute;left:22px;top:23px;width:21px;height:21px;color:#F7F2F0}
.ta-saisie{position:absolute;left:66px;top:0;height:67px;display:flex;align-items:center;font:800 19.5px/1 "Nunito Sans";color:#F7F2F0;white-space:pre}
.ta-saisie span{opacity:0}
.ta-curseur{position:absolute;left:66px;top:21px;width:2px;height:25px;border-radius:1px;background:#C77DF2}
.ta-film{position:absolute;left:235px;top:21px;width:50px;height:26px;border-radius:13px;background:#A23BE0;font:900 12px/26px "Nunito Sans";letter-spacing:.07em;text-align:center}
.ta-champ2 .ta-croix{position:absolute;left:309px;top:24px;width:19px;height:19px;color:#C9C0C3}
.ta-ligne{position:absolute;left:0;width:390px;height:89px}
.ta-ligne .ta-surbrillance{position:absolute;left:8px;top:-6px;width:374px;height:88px;border-radius:14px;background:rgba(247,242,240,.07);opacity:0}
.ta-ligne .ta-aff{position:absolute;left:20px;top:0;width:52px;height:76px;border-radius:8px;overflow:hidden;background:#241E21}
.ta-ligne .ta-txt{position:absolute;left:86px;top:0;width:252px;height:76px;display:flex;flex-direction:column;justify-content:center;gap:6px}
.ta-ligne .ta-nom{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font:800 17px/22px "Nunito Sans"}
.ta-ligne .ta-an{display:inline-block;height:24px;padding:0 9px;border-radius:12px;box-shadow:inset 0 0 0 1.5px rgba(247,242,240,.18);font:800 13px/24px "Nunito Sans"}
.ta-ligne .ta-qui{font:600 14.5px/18px "Nunito Sans";color:#B9AEB2}
.ta-ligne svg{position:absolute;left:344px;top:28px;width:20px;height:20px;color:#B25FE8}
.ta-ligne::after{content:"";position:absolute;left:20px;right:20px;top:88px;height:1px;background:rgba(247,242,240,.09)}

/* 3. Pile */
.ta-entete .ta-vignette{position:absolute;left:20px;top:86px;width:28px;height:40px;border-radius:4px;overflow:hidden}
.ta-entete .ta-esprit{position:absolute;left:58px;top:87px;font:600 13.5px/18px "Nunito Sans";letter-spacing:-.1px;color:#A99FA2}
.ta-entete .ta-de{position:absolute;left:58px;top:108px;font:800 16.5px/20px "Nunito Sans"}
.ta-filtrer{position:absolute;left:156px;top:85px;height:24px;padding:0 10px 0 8px;border-radius:12px;box-shadow:inset 0 0 0 1.5px rgba(247,242,240,.16);display:flex;align-items:center;gap:5px;font:800 13px/1 "Nunito Sans"}
.ta-filtrer svg{width:14px;height:14px}
.ta-entete .ta-chevron{position:absolute;left:244px;top:97px;width:18px;height:18px;color:#A99FA2}
.ta-rond{position:absolute;top:86px;width:40px;height:40px;border-radius:20px;display:grid;place-items:center;background:#1A1517;box-shadow:inset 0 0 0 1.5px rgba(247,242,240,.13)}
.ta-rond svg{width:21px;height:21px}
.ta-rond.terne{background:#151112;color:#6f6669;box-shadow:inset 0 0 0 1.5px rgba(247,242,240,.06)}
.ta-haut{position:absolute;left:0;top:140px;width:390px;display:flex;justify-content:center;align-items:center;gap:6px;color:#F5B65C;font:400 20px/22px "League Gothic";letter-spacing:.07em}
.ta-haut svg{width:15px;height:15px;stroke-width:2.4}

.ta-carte{position:absolute;left:57px;top:170px;width:276px;height:414px;opacity:0}
.ta-face{position:absolute;inset:0;border-radius:20px;overflow:hidden;background:#1B1618;box-shadow:0 18px 36px rgba(0,0,0,.55)}
.ta-face::after{content:"";position:absolute;inset:0;border-radius:20px;box-shadow:inset 0 0 0 1px rgba(247,242,240,.08)}
.ta-lueur{position:absolute;inset:0;border-radius:20px;opacity:0}
.ta-lueur.garder{box-shadow:0 0 26px 3px rgba(162,59,224,.85)}
.ta-lueur.passer{box-shadow:0 0 26px 3px rgba(226,232,240,.6)}
.ta-lueur.dejavu{box-shadow:0 0 30px 4px rgba(245,182,92,.8)}
.ta-sombre{position:absolute;inset:0;background:#000;opacity:0}
.ta-dos{position:absolute;inset:0;border-radius:20px;opacity:0}
.ta-dos.passer{background:rgba(226,232,240,.16);box-shadow:inset 0 0 0 1.5px rgba(226,232,240,.75);color:rgb(226,232,240)}
.ta-dos.garder{background:rgba(162,59,224,.16);box-shadow:inset 0 0 0 1.5px rgba(162,59,224,.75);color:#B25FE8}
.ta-dos svg{position:absolute;top:149px;width:17px;height:17px;stroke-width:2.6}
.ta-dos b{position:absolute;top:195px;width:90px;height:24px;font:400 19px/24px "League Gothic";letter-spacing:1.8px;text-align:center}
.ta-dos.passer svg{left:10px}
.ta-dos.passer b{left:-26px;transform:rotate(-90deg)}
.ta-dos.garder svg{right:10px}
.ta-dos.garder b{right:-26px;transform:rotate(90deg)}
.ta-lumiere{position:absolute;inset:0;border-radius:20px;opacity:0}
.ta-lumiere.garder{background:linear-gradient(90deg,rgba(162,59,224,0) 58%,rgba(162,59,224,.5));box-shadow:inset 0 0 0 3px #A23BE0}
.ta-lumiere.passer{background:linear-gradient(270deg,rgba(226,232,240,0) 58%,rgba(226,232,240,.45));box-shadow:inset 0 0 0 3px rgb(226,232,240)}
.ta-lumiere.dejavu{box-shadow:inset 0 0 0 3px #F5B65C}
.ta-tampon{position:absolute;left:50%;top:16px;transform:translateX(-50%);display:flex;align-items:center;gap:5px;height:32px;padding:0 11px;border-radius:16px;background:rgba(14,12,11,.78);font:900 14.5px/1 "Nunito Sans";white-space:nowrap}
.ta-lumiere.garder .ta-tampon{color:#C77DF2;box-shadow:inset 0 0 0 1px #A23BE0}
.ta-lumiere.passer .ta-tampon{color:rgb(226,232,240);box-shadow:inset 0 0 0 1px rgb(226,232,240)}
.ta-lumiere.dejavu .ta-tampon{color:#F5B65C;box-shadow:inset 0 0 0 1px #F5B65C}
.ta-tampon svg{width:17px;height:17px;stroke-width:2.6}
.ta-tampon .ta-etoile{display:block;width:15px;height:15px;opacity:0}.ta-tampon .ta-etoile svg{width:15px;height:15px}

.ta-jauge{position:absolute;left:336px;top:250px;width:46px;padding:8px 0 6px;border-radius:23px;background:rgba(36,30,33,.94);box-shadow:inset 0 0 0 1px rgba(245,182,92,.5);opacity:0;z-index:60}
.ta-jauge .ta-etoiles{display:flex;flex-direction:column-reverse;align-items:center;gap:7px}
.ta-jauge .ta-et{position:relative;width:24px;height:24px}
.ta-jauge .ta-et svg{position:absolute;inset:0;width:24px;height:24px}
.ta-jauge .ta-et .vide{color:rgba(247,242,240,.5);stroke-width:1.6}
.ta-jauge .ta-plein-et{position:absolute;inset:0;color:#F5B65C;opacity:0}
.ta-jauge .ta-mots{position:relative;height:24px;margin-top:7px}
.ta-jauge .ta-mots span{position:absolute;left:0;right:0;top:0;text-align:center;font:900 10.5px/13px "Nunito Sans";color:#F5B65C;opacity:0}

.ta-infos{position:absolute;left:20px;top:596px;width:350px;text-align:center;opacity:0}
.ta-infos .ta-gothic{font-size:31px;line-height:32px;color:#F7F2F0}
.ta-infos .ta-faits{margin-top:3px;font:600 15px/20px "Nunito Sans";color:#B9AEB2;white-space:nowrap}
.ta-infos .ta-faits b{color:#F7F2F0;font-weight:800}
.ta-infos .ta-raison{position:relative;margin-top:9px;padding:0 6px 0 30px;font:800 14.5px/19px "Nunito Sans";color:#F7F2F0}
.ta-infos .ta-raison em{font-style:normal;font-weight:600;color:#A99FA2}
.ta-infos .ta-raison svg{position:absolute;left:0;top:0;width:19px;height:19px;color:#B25FE8}

.ta-bouton{position:absolute;top:708px;height:47px;border-radius:24px;display:flex;align-items:center;justify-content:center;gap:9px;font:800 17px/1 "Nunito Sans"}
.ta-bouton svg{width:20px;height:20px;stroke-width:2.3}
.ta-bouton.passer{left:20px;width:140px;background:#1A1517;box-shadow:inset 0 0 0 1.5px rgba(247,242,240,.13)}
.ta-bouton.oeil{left:171px;width:47px;color:#F5B65C;background:#17110d;box-shadow:inset 0 0 0 1.5px rgba(245,182,92,.6)}
.ta-bouton.oeil svg{width:22px;height:22px}
.ta-bouton.garder{left:229px;width:141px;background:#A23BE0;box-shadow:0 8px 26px -4px rgba(162,59,224,.55)}
.ta-bouton .ta-eclat{position:absolute;inset:0;border-radius:24px;opacity:0}
.ta-bouton.passer .ta-eclat{background:rgba(226,232,240,.14);box-shadow:inset 0 0 0 1.5px rgba(226,232,240,.7)}
.ta-bouton.oeil .ta-eclat{background:rgba(245,182,92,.22)}
.ta-bouton.garder .ta-eclat{box-shadow:0 0 28px 4px rgba(162,59,224,.75)}
.ta-bouton span,.ta-bouton svg{position:relative}

/* 5. Mes films */
.ta-onglet-liste{position:absolute;top:86px;width:175px;text-align:center;font:800 16.5px/21px "Nunito Sans"}
.ta-onglet-liste.vu{color:#A99FA2;font-weight:700}
.ta-compte{position:relative;display:block;height:20px;margin-top:3px;font:700 15px/20px "Nunito Sans"}
.ta-compte span{position:absolute;left:0;right:0;opacity:0}
.ta-trait{position:absolute;top:133px;width:175px;height:3px;border-radius:2px;background:rgba(247,242,240,.1)}
.ta-trait.on{background:#A23BE0}
.ta-bandeau{position:absolute;left:0;top:148px;width:390px;height:125px;overflow:hidden;background:#1d1519}
.ta-bandeau img{opacity:.6;object-position:70% 35%}
.ta-bandeau::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(17,13,14,.92) 10%,rgba(17,13,14,.2) 70%),linear-gradient(0deg,#110D0E 0,rgba(17,13,14,0) 40%)}
.ta-bandeau small{position:absolute;left:18px;top:63px;font:900 12.5px/16px "Nunito Sans";letter-spacing:.17em;color:#C77DF2;z-index:1}
.ta-bandeau .ta-gothic{position:absolute;left:17px;top:81px;font-size:42px;line-height:40px;z-index:1}
.ta-points{position:absolute;width:36px;height:36px;border-radius:18px;background:rgba(20,16,18,.82);display:grid;place-items:center;z-index:2}
.ta-points svg{width:18px;height:18px}
.ta-tuile{position:absolute;width:112px;opacity:0}
.ta-tuile .ta-aff{position:relative;width:112px;height:168px;border-radius:10px;overflow:hidden;background:#241E21}
.ta-tuile .ta-points{right:6px;top:6px;width:30px;height:30px;left:auto}
.ta-tuile p{margin-top:8px;font:600 15px/20px "Nunito Sans";color:#E4DBDE;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ta-duel{position:absolute;left:143px;top:704px;width:104px;height:48px;border-radius:24px;background:#A23BE0;box-shadow:0 8px 28px -4px rgba(162,59,224,.6);display:flex;align-items:center;justify-content:center;gap:9px;font:900 17px/1 "Nunito Sans";opacity:0}
.ta-duel svg{width:21px;height:21px}

/* Barre d’onglets */
.ta-onglets{position:absolute;left:0;top:788px;width:390px;height:56px;background:#231D20;z-index:40}
.ta-onglets .ta-tab{position:absolute;top:0;width:97.5px;height:56px;color:#A99FA2}
.ta-onglets .ta-tab svg{position:absolute;left:36.75px;top:5px;width:24px;height:24px;stroke-width:1.7}
.ta-onglets .ta-tab .ta-ic{position:absolute;left:0;top:0;width:97.5px;height:30px}
.ta-onglets .ta-tab span:not(.ta-ic){position:absolute;left:0;right:0;top:33px;text-align:center;font:600 14px/17px "Nunito Sans";white-space:nowrap}
.ta-onglets .ta-tab span.on{color:#C77DF2;font-weight:800;opacity:0}
.ta-bulle{position:absolute;left:24.6px;top:-28px;width:48px;height:48px;border-radius:24px;background:#2A1E2E}
.ta-bulle::before{content:"";position:absolute;left:7px;top:7px;width:34px;height:34px;border-radius:17px;background:#A23BE0;box-shadow:0 4px 14px rgba(162,59,224,.45)}
.ta-bulle svg{position:absolute;left:15px;top:15px;width:18px;height:18px;color:#fff}

/* Le doigt */
.ta-doigt{position:absolute;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:22px;background:rgba(247,242,240,.32);box-shadow:0 0 0 2px rgba(247,242,240,.55),0 6px 18px rgba(0,0,0,.35);opacity:0;z-index:80}

/* Quelques couches qui bougent beaucoup ; le reste n’a pas de will-change. */
.ta-carte,.ta-doigt{will-change:transform,opacity}