/* ================================================================
   MOXIE HOME — Section « LiTag » (moxiehome/views/templates/sections/litag.tpl)
   Reprise de la maquette (.mili), confinée à #moxie-litag ; animations préfixées moxie-lt-.
   L'écran d'iPhone est dessiné en 390 × 844 pt puis réduit (variable --k, litag.js).
   ================================================================ */
#moxie-litag { --titre: 'Barlow Condensed', 'Arial Narrow', sans-serif; max-height: none; display: flex; align-items: center; }
#moxie-litag *, #moxie-litag *::before, #moxie-litag *::after { box-sizing: border-box; }
#moxie-litag img { max-width: 100%; display: block; }
#moxie-litag button { font: inherit; color: inherit; }
#moxie-litag .mili-grille { width: 100%; max-width: 1200px; margin: 0 auto; }
#moxie-litag .moxie-lt__surtitre { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--vert-loc); }
#moxie-litag .moxie-lt__soustitre { display: block; margin-top: 4px; }  /* « Localisateur », juste sous « Tag Mili MiTag® Duo » */
#moxie-litag .moxie-lt__titre { font-family: var(--titre); font-weight: 800; text-transform: uppercase; line-height: .92; color: #fff; }
/* achat : prix réel + bouton vers le vrai panier (partial bouton-achat.tpl) */
#moxie-litag .mili-achat .moxie-home-achat { background: var(--vert-loc); color: #0D1A31; }
#moxie-litag .mili-achat .moxie-home-achat:hover { background: #fff; color: #0D1A31; }
#moxie-litag .mili-achat .moxie-home-achat.is-ajoute { background: #fff; }
#moxie-litag .mili-achat .moxie-home-achat.is-indisponible { background: rgba(255,255,255,.14); color: #B4C0D8; }
#moxie-litag .mili-achat .moxie-home-achat__fiche { color: #fff; border-bottom-color: var(--vert-loc); }

#moxie-litag { position: relative; overflow: hidden; padding-block: 40px 30px; background: radial-gradient(70% 90% at 70% 40%, #213A66 0%, #13233F 58%, #0D1A31 100%); scroll-margin-top: 70px; --vert-loc: #BBCF03; --marine: #13233F; --encre: #fff; --gris: #B4C0D8; color: var(--encre); }
#moxie-litag .mili-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 32px; align-items: center; }
#moxie-litag .surtitre { color: var(--vert-loc); }
#moxie-litag h2 { font-size: clamp(48px, 6vw, 84px); margin: 12px 0 16px; }
#moxie-litag h2 em { font-style: normal; color: var(--vert-loc); }
#moxie-litag .mili-legende { font-family: var(--titre); font-stretch: 75%; font-weight: 850; text-transform: uppercase; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.05; margin: 0 0 18px; min-height: 2.1em; transition: opacity .3s; }
#moxie-litag .mili-legende.change { opacity: 0; }
#moxie-litag .mili-points { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 8px; color: var(--gris); font-size: 16px; }
#moxie-litag .mili-points b { color: var(--encre); }
#moxie-litag .mili-achat { display: flex; align-items: center; gap: 16px; }
#moxie-litag .mili-usages { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 20px; font-size: 14px; color: var(--gris); }
#moxie-litag .mili-usages b { padding: 6px 11px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.18); color: var(--encre); font-weight: 700; transition: background .3s, color .3s, border-color .3s, transform .3s; }
#moxie-litag .mili-usages b.on { background: var(--vert-loc); border-color: var(--vert-loc); color: var(--marine); transform: scale(1.06); }
#moxie-litag .mili-couleurs { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 14px; color: var(--gris); }
#moxie-litag .mili-couleurs button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 6px; border-radius: 999px; border: 2px solid rgba(255,255,255,.18); background: rgba(255,255,255,.07); font-weight: 700; color: var(--encre); cursor: pointer; }
#moxie-litag .mili-couleurs button i { width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
#moxie-litag .mili-couleurs button[aria-pressed="true"] { border-color: var(--vert-loc); }
#moxie-litag .mili-couleurs button i { box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
#moxie-litag .mili-achat > b { font-family: var(--titre); font-stretch: 75%; font-weight: 900; font-size: 46px; }
#moxie-litag .mili-acheter { min-height: 54px; padding: 0 26px; border-radius: 999px; border: 0; cursor: pointer; font-weight: 800; font-size: 17px; color: var(--marine); background: var(--vert-loc); box-shadow: 0 10px 30px -10px rgba(187,207,3,.6); }
#moxie-litag .mili-acheter.ok { background: #fff; }
#moxie-litag .mili-scene { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; min-height: 520px; }/* le tag et ses ondes vertes, posé sur un disque blanc (la photo a un fond blanc) */


#moxie-litag .mili-tag { position: relative; justify-self: center; width: min(260px, 100%); aspect-ratio: 1; display: grid; place-items: center; }
#moxie-litag .mili-tag::before { content: ""; position: absolute; left: 50%; top: 54%; width: 96%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: #fff; box-shadow: 0 0 0 10px rgba(187,207,3,.14), 0 30px 60px -20px rgba(0,0,0,.6); }
#moxie-litag .mili-tag img { position: relative; width: 100%; mix-blend-mode: multiply; animation: moxie-lt-balance 4s ease-in-out infinite;
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%, 0 28%, 30% 28%); } /* masque les logos du coin de la photo */
@keyframes moxie-lt-balance { 50% { transform: rotate(-4deg) translateY(-4px); } }
#moxie-litag .mili-ondes i { position: absolute; left: 50%; top: 58%; width: 40%; aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--vert-loc); translate: -50% -50%; opacity: 0; animation: moxie-lt-onde-mili 2.4s ease-out infinite; }
#moxie-litag .mili-ondes i:nth-child(2) { animation-delay: .8s; } #moxie-litag .mili-ondes i:nth-child(3) { animation-delay: 1.6s; }
@keyframes moxie-lt-onde-mili { 0% { width: 30%; opacity: .9; } 100% { width: 150%; opacity: 0; } }
#moxie-litag .mili-tag.sonne .mili-ondes i { animation-duration: .9s; border-width: 4px; }
#moxie-litag .mili-tag.sonne img { animation: moxie-lt-vibre .12s linear infinite; }
@keyframes moxie-lt-vibre { 25% { transform: translate(-2px, 1px) rotate(-2deg); } 75% { transform: translate(2px, -1px) rotate(2deg); } }
#moxie-litag .mili-notes { position: absolute; top: 4%; right: 6%; font-size: 30px; color: var(--vert-loc); font-weight: 800; opacity: 0; transition: opacity .3s; }
#moxie-litag .mili-tag.sonne .mili-notes { opacity: 1; animation: moxie-lt-notes 1s ease-in-out infinite; }
@keyframes moxie-lt-notes { 50% { transform: translateY(-8px) rotate(8deg); } }/* l'iPhone */


#moxie-litag .mili-iphone { --w: 270px; position: relative; width: var(--w); aspect-ratio: 390 / 828; border-radius: calc(var(--w) * .17); padding: calc(var(--w) * .036); background: linear-gradient(145deg, #5a5d64, #1d1f23 38%, #2f3238 70%, #15171a); box-shadow: 0 40px 70px -30px rgba(0,0,0,.55), inset 0 0 0 1.5px #6b6f77, inset 0 0 0 4px #111; transform: rotate(4deg); }
#moxie-litag .mili-iphone::before, #moxie-litag .mili-iphone::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #3a3d43; }
#moxie-litag .mili-iphone::before { left: -3px; top: 22%; height: 11%; box-shadow: 0 -9.5% 0 #3a3d43; }
#moxie-litag .mili-iphone::after { right: -3px; top: 27%; height: 15%; }
#moxie-litag .mili-ecran { position: relative; height: 100%; border-radius: calc(var(--w) * .135); overflow: hidden; background: #000; }/* l'écran est dessiné à la taille d'un vrai iPhone (390 × 844 pt) puis réduit par --k */


#moxie-litag .ios { position: absolute; left: 0; top: 0; width: 390px; height: 844px; transform-origin: 0 0; transform: scale(var(--k, .64)); overflow: hidden; background: #F4F2ED; color: #000; font: 400 17px/1.25 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; font-stretch: normal; letter-spacing: -.01em; text-transform: none; -webkit-font-smoothing: antialiased; }
#moxie-litag .ios * { box-sizing: border-box; }
#moxie-litag .ios-ile { position: absolute; z-index: 30; top: 11px; left: 50%; translate: -50% 0; width: 126px; height: 37px; border-radius: 20px; background: #000; }
#moxie-litag .ios-statut { position: absolute; z-index: 29; top: 0; left: 0; right: 0; height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 6px 30px 0 50px; font-weight: 600; font-size: 17px; color: #000; transition: color .3s; }
#moxie-litag .ios-statut span { display: flex; align-items: center; gap: 6px; }
#moxie-litag .ios-statut svg { fill: currentColor; display: block; }
#moxie-litag .ios-barre { position: absolute; z-index: 29; bottom: 8px; left: 50%; translate: -50% 0; width: 134px; height: 5px; border-radius: 3px; background: #000; transition: background .3s; }
#moxie-litag .ios.accueil .ios-statut { color: #fff; } #moxie-litag .ios.accueil .ios-barre { background: #fff; }/* carte façon Plans */


#moxie-litag .ios-carte { position: absolute; inset: 0; }
#moxie-litag .ios-carte svg { display: block; }
#moxie-litag .ios-ctrl { position: absolute; z-index: 2; right: 12px; top: 62px; width: 44px; border-radius: 10px; background: rgba(255,255,255,.96); box-shadow: 0 2px 10px rgba(0,0,0,.15); display: grid; }
#moxie-litag .ios-ctrl span { height: 44px; display: grid; place-items: center; }
#moxie-litag .ios-ctrl span + span { border-top: .5px solid #D1D1D6; }
#moxie-litag .mili-moi { position: absolute; left: 40%; top: 46%; width: 24px; height: 24px; border-radius: 50%; background: #007AFF; border: 4px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3), 0 0 0 22px rgba(0,122,255,.13); translate: -50% -50%; }
#moxie-litag .mili-moi::before { content: ""; position: absolute; left: 50%; bottom: 50%; width: 70px; height: 70px; translate: -50% 0; background: radial-gradient(circle at 50% 100%, rgba(0,122,255,.35), transparent 70%); clip-path: polygon(50% 100%, 18% 0, 82% 0); z-index: -1; }
#moxie-litag .mili-pin { position: absolute; left: 72%; top: 16%; width: 56px; height: 56px; border-radius: 50%; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.28); translate: -50% -50%; display: grid; place-items: center; font-size: 30px; transition: left 1.2s ease, top 1.2s ease, opacity .3s; z-index: 1; }
#moxie-litag .mili-pin::after { content: ""; position: absolute; left: 50%; bottom: -7px; translate: -50% 0; border: 8px solid transparent; border-bottom: 0; border-top-color: #fff; }
#moxie-litag .mili-radar { position: absolute; left: 72%; top: 16%; width: 60px; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; border: 3px solid var(--vert-loc); animation: moxie-lt-onde-mili 1.8s ease-out infinite; transition: left 1.2s ease, top 1.2s ease, opacity .3s; }/* fiche de l'objet (bas de l'écran) */


#moxie-litag .ios-fiche { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 340px; background: #F2F2F7; border-radius: 38px 38px 0 0; padding: 8px 16px 0; box-shadow: 0 -2px 18px rgba(0,0,0,.12); transition: opacity .35s, transform .35s; }
#moxie-litag .ios-poignee { display: block; width: 36px; height: 5px; border-radius: 3px; background: #C7C7CC; margin: 0 auto 14px; }
#moxie-litag .ios-tete { display: flex; align-items: flex-start; justify-content: space-between; padding: 0 4px; }
#moxie-litag .ios-tete b { display: block; font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
#moxie-litag .ios-tete small { display: block; margin-top: 2px; font-size: 15px; color: #8E8E93; }
#moxie-litag .ios-fermer { width: 30px; height: 30px; flex: none; border-radius: 50%; background: #E3E3E8; color: #8E8E93; display: grid; place-items: center; font-size: 14px; font-weight: 700; }
#moxie-litag .ios-tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
#moxie-litag .ios-tuile { background: #fff; border-radius: 14px; padding: 12px 14px 14px; display: grid; gap: 2px; transition: background .3s; }
#moxie-litag .ios-tuile b { margin-top: 8px; font-size: 16px; font-weight: 600; }
#moxie-litag .ios-tuile small { font-size: 14px; color: #8E8E93; }
#moxie-litag .ios-rond { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; }
#moxie-litag .ios-rond svg { fill: #fff; }
#moxie-litag .ios-rond.violet { background: #AF52DE; } #moxie-litag .ios-rond.bleu { background: #007AFF; } #moxie-litag .ios-rond.rouge { background: #FF3B30; }
#moxie-litag .ios-tuile .on { display: none; }
#moxie-litag .ios-tuile.actif { background: #F4E9FB; } #moxie-litag .ios-tuile.actif .on { display: inline; color: #AF52DE; font-weight: 600; } #moxie-litag .ios-tuile.actif .off { display: none; }
#moxie-litag .ios-tuile.actif .ios-rond { animation: moxie-lt-appui-mili .6s ease-in-out infinite; }
@keyframes moxie-lt-appui-mili { 50% { transform: scale(.88); } }
#moxie-litag .ios-ligne { display: flex; align-items: center; gap: 12px; margin-top: 10px; background: #fff; border-radius: 14px; padding: 11px 14px; font-size: 16px; font-weight: 600; }
#moxie-litag .ios-ligne i { margin-left: auto; color: #C7C7CC; font-style: normal; font-size: 22px; font-weight: 400; }
#moxie-litag .ios.en-ajout .ios-fiche { opacity: 0; transform: translateY(40px); }
#moxie-litag .ios.en-ajout .mili-pin, #moxie-litag .ios.en-ajout .mili-radar { opacity: 0; }/* écrans de la mise en service */


#moxie-litag .mili-ajout { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
#moxie-litag .mili-ajout section { position: absolute; inset: 0; opacity: 0; transition: opacity .4s; }
#moxie-litag .mili-ajout section.vu, #moxie-litag .ios.objets .mili-ajout .s-objets { opacity: 1; }
#moxie-litag .tape { transition: background .15s; }
#moxie-litag .mili-ajout section.vu .tape { animation: moxie-lt-tape .45s ease-in-out 1.2s 2; }
@keyframes moxie-lt-tape { 50% { transform: scale(.95); filter: brightness(.85); } }/* écran d'accueil */


#moxie-litag .s-accueil { background: radial-gradient(120% 60% at 0% 0%, #3A6FE8 0%, transparent 60%), radial-gradient(90% 55% at 100% 35%, #9257E6 0%, transparent 65%), radial-gradient(110% 60% at 40% 100%, #FF8B5E 0%, transparent 62%), #23307A; }
#moxie-litag .s-accueil.vu { transition: opacity .4s, transform .5s; }
#moxie-litag .ios-grille { position: absolute; top: 72px; left: 27px; right: 27px; display: grid; grid-template-columns: repeat(4, 62px); justify-content: space-between; row-gap: 22px; }
#moxie-litag .ios-app { display: grid; justify-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.25); white-space: nowrap; letter-spacing: 0; }
#moxie-litag .ios-app > i, #moxie-litag .ios-dock i { position: relative; width: 62px; height: 62px; border-radius: 14px; overflow: hidden; display: block; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
#moxie-litag .ios-app > i svg, #moxie-litag .ios-dock i svg { width: 100%; height: 100%; display: block; }
#moxie-litag .ios-widget { grid-column: span 2; grid-row: span 2; height: 170px; border-radius: 22px; padding: 14px 16px; color: #fff; background: linear-gradient(170deg, #2E7FE0, #5CB1F6); box-shadow: 0 1px 3px rgba(0,0,0,.18); display: flex; flex-direction: column; }
#moxie-litag .ios-widget b { font-size: 15px; font-weight: 600; } #moxie-litag .ios-widget strong { font-size: 44px; font-weight: 300; line-height: 1.05; }
#moxie-litag .ios-widget small { margin-top: auto; font-size: 13px; font-weight: 600; line-height: 1.3; }
#moxie-litag .ios-cal { background: #fff; display: grid !important; place-items: center; align-content: center; color: #000; text-shadow: none; }
#moxie-litag .ios-cal small { font-size: 10px; font-weight: 600; color: #FF3B30; letter-spacing: .02em; } #moxie-litag .ios-cal b { font-size: 32px; font-weight: 300; line-height: 1; }
#moxie-litag .ios-recherche { position: absolute; left: 50%; bottom: 128px; translate: -50% 0; padding: 6px 14px; border-radius: 16px; background: rgba(255,255,255,.28); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: #fff; font-size: 13px; font-weight: 600; }
#moxie-litag .ios-dock { position: absolute; left: 12px; right: 12px; bottom: 20px; height: 92px; border-radius: 34px; background: rgba(255,255,255,.3); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); display: flex; align-items: center; justify-content: space-around; padding: 0 12px; }
#moxie-litag .mili-ajout section.vu .ios-loc { animation: moxie-lt-halo-loc 1.1s ease-out .3s 2, moxie-lt-tape .45s ease-in-out 1.6s 1; }
@keyframes moxie-lt-halo-loc { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.9); } 100% { box-shadow: 0 0 0 16px rgba(255,255,255,0); } }/* onglet Objets de Localiser */


#moxie-litag .ios-feuille { position: absolute; left: 0; right: 0; bottom: 83px; height: 440px; background: #F2F2F7; border-radius: 38px 38px 0 0; padding: 8px 20px 0; box-shadow: 0 -2px 18px rgba(0,0,0,.12); }
#moxie-litag .ios-feuille h5 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
#moxie-litag .ios-vide { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 46px 20px 30px; }
#moxie-litag .ios-vide svg { fill: #C7C7CC; margin-bottom: 6px; }
#moxie-litag .ios-vide b { font-size: 20px; font-weight: 600; } #moxie-litag .ios-vide p { margin: 0; font-size: 15px; color: #8E8E93; }
#moxie-litag .ios-rang { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 12px; padding: 14px 16px; color: #007AFF; font-size: 17px; }
#moxie-litag .ios-rang b { width: 26px; height: 26px; border-radius: 50%; background: #007AFF; color: #fff; display: grid; place-items: center; font-size: 20px; font-weight: 500; line-height: 1; }
#moxie-litag .ios-onglets { position: absolute; left: 0; right: 0; bottom: 0; height: 83px; background: rgba(249,249,249,.96); border-top: .5px solid #C6C6C8; display: flex; justify-content: space-around; padding-top: 7px; }
#moxie-litag .ios-onglets span { display: grid; justify-items: center; gap: 2px; width: 80px; font-size: 10px; font-weight: 500; color: #8E8E93; letter-spacing: 0; }
#moxie-litag .ios-onglets svg { fill: currentColor; }
#moxie-litag .ios-onglets .on { color: #007AFF; }/* fenêtres d'ajout (cartes) */


#moxie-litag .s-carte { background: rgba(0,0,0,.32); }
#moxie-litag .ios-fenetre { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 500px; background: #fff; border-radius: 46px; padding: 28px 26px 30px; display: flex; flex-direction: column; align-items: center; text-align: center; transform: translateY(40px); transition: transform .45s cubic-bezier(.2,.9,.3,1); }
#moxie-litag .s-carte.vu .ios-fenetre { transform: none; }
#moxie-litag .ios-fenetre .ios-fermer { position: absolute; top: 20px; right: 20px; }
#moxie-litag .ios-fenetre h5 { margin: 18px 0 6px; font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
#moxie-litag .ios-fenetre p { margin: 0; font-size: 16px; color: #8E8E93; line-height: 1.35; }
#moxie-litag .ios-photo { position: relative; width: 170px; height: 170px; margin-top: 18px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
#moxie-litag .ios-photo-in { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
#moxie-litag .ios-photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.6) translate(-6%, -6%); }/* recadré pour écarter les logos du coin */
 
#moxie-litag .ios-photo i { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--vert-loc); animation: moxie-lt-onde-carte 2s ease-out infinite; }
#moxie-litag .ios-photo i + i { animation-delay: 1s; }
@keyframes moxie-lt-onde-carte { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
#moxie-litag .ios-roue { width: 34px; height: 34px; margin-top: auto; border-radius: 50%; background: repeating-conic-gradient(#8E8E93 0 9deg, transparent 9deg 30deg); -webkit-mask: radial-gradient(circle, transparent 0 43%, #000 44%), conic-gradient(#000, rgba(0,0,0,.15)); -webkit-mask-composite: source-in; mask: radial-gradient(circle, transparent 0 43%, #000 44%), conic-gradient(#000, rgba(0,0,0,.15)); mask-composite: intersect; animation: moxie-lt-tourne 1s steps(12) infinite; }
@keyframes moxie-lt-tourne { to { rotate: 360deg; } }
#moxie-litag .ios-bouton { margin-top: auto; width: 100%; height: 52px; border-radius: 14px; background: #007AFF; color: #fff; display: grid; place-items: center; font-size: 17px; font-weight: 600; }
#moxie-litag .ios-noms { width: 100%; margin-top: 18px; background: #F2F2F7; border-radius: 12px; text-align: left; overflow: hidden; }
#moxie-litag .ios-noms span { display: flex; justify-content: space-between; align-items: center; height: 48px; padding: 0 16px; font-size: 17px; }
#moxie-litag .ios-noms span + span { border-top: .5px solid #D1D1D6; }
#moxie-litag .ios-noms .choisi::after { content: "✓"; color: #007AFF; font-weight: 700; }
#moxie-litag .ios-coche { width: 96px; height: 96px; margin-top: 40px; border-radius: 50%; background: var(--vert-loc); display: grid; place-items: center; }
#moxie-litag .s-carte.vu .ios-coche { animation: moxie-lt-pop-coche .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes moxie-lt-pop-coche { from { transform: scale(.3); } }
#moxie-litag .mili-boutons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
#moxie-litag .mili-essayer { min-height: 48px; padding: 0 22px; border-radius: 999px; border: 2px solid #fff; background: transparent; color: #fff; font-weight: 800; cursor: pointer; transition: background .2s, color .2s; }
#moxie-litag .mili-essayer:hover { background: #fff; color: var(--marine); }/* mise en service : tag éteint (pas d'ondes), puis appui long avec anneau qui se remplit */


#moxie-litag .mili-tag { cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; }
#moxie-litag .mili-tag.eteint .mili-ondes { opacity: 0; }
#moxie-litag .mili-anneau { position: absolute; left: 50%; top: 58%; width: 52%; aspect-ratio: 1; translate: -50% -50%; rotate: -90deg; opacity: 0; transition: opacity .2s; pointer-events: none; }
#moxie-litag .mili-anneau circle { fill: none; stroke-width: 6; }
#moxie-litag .mili-anneau .fond { stroke: rgba(187,207,3,.22); }
#moxie-litag .mili-anneau .plein { stroke: var(--vert-loc); stroke-linecap: round; stroke-dasharray: 289; stroke-dashoffset: 289; }
#moxie-litag .mili-tag.appui .mili-anneau { opacity: 1; }
#moxie-litag .mili-tag.appui .mili-anneau .plein { animation: moxie-lt-remplir var(--duree-appui, 2.2s) linear forwards; }
@keyframes moxie-lt-remplir { to { stroke-dashoffset: 0; } }
#moxie-litag .mili-doigt { position: absolute; left: 56%; top: 62%; font-size: 46px; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; filter: drop-shadow(0 6px 8px rgba(0,0,0,.25)); }
#moxie-litag .mili-tag.appui .mili-doigt { opacity: 1; transform: scale(.9); }
#moxie-litag .mili-astuce { position: absolute; left: 50%; bottom: -6px; translate: -50% 0; white-space: nowrap; font-size: 13px; font-weight: 800; color: var(--marine); background: var(--vert-loc); border-radius: 999px; padding: 5px 12px; box-shadow: 0 4px 12px rgba(0,0,0,.08); opacity: 0; transition: opacity .3s; }
#moxie-litag .mili-tag.eteint .mili-astuce { opacity: 1; }/* languette isolante : suit le balancement de la photo, on la tire pour mettre la pile en contact */


#moxie-litag .mili-zone-languette { position: absolute; inset: 0; animation: moxie-lt-balance 4s ease-in-out infinite; pointer-events: none; }
#moxie-litag .mili-languette { position: absolute; left: 80%; top: 57%; width: 30%; height: 8%; transform-origin: 0 50%; rotate: 62deg; display: grid; place-items: center end; padding-right: 8%; border-radius: 3px 10px 10px 3px; background: linear-gradient(90deg, rgba(210,232,250,0) 0%, rgba(210,232,250,.85) 28%, rgba(235,245,255,.95)); border: 1px solid rgba(120,160,200,.45); border-left: 0; box-shadow: 0 3px 8px rgba(30,60,90,.18); color: #2D5F8A; font-size: 10px; font-weight: 900; letter-spacing: .08em; opacity: 0; pointer-events: auto; cursor: grab; transition: opacity .3s, translate .9s cubic-bezier(.5,0,.7,1); }
#moxie-litag .mili-tag.avec-languette .mili-languette { opacity: 1; }
#moxie-litag .mili-tag.avec-languette.tire .mili-languette { translate: 0 0; animation: moxie-lt-tirer-languette 1.1s cubic-bezier(.5,0,.7,1) forwards; }
@keyframes moxie-lt-tirer-languette { 0% { transform: none; opacity: 1; } 25% { transform: translateX(-4%); } 80% { opacity: 1; } 100% { transform: translateX(170%); opacity: 0; } }
#moxie-litag .mili-tag.avec-languette.tire .mili-doigt { opacity: 1; left: 89%; top: 74%; }
@media (max-width: 860px) {
  #moxie-litag .mili-grille { grid-template-columns: minmax(0, 1fr); }
  #moxie-litag .mili-scene { min-height: 0; grid-template-columns: 1fr 1fr; }
  #moxie-litag .mili-iphone { --w: min(220px, 48vw); justify-self: center; }
}
@media (max-width: 480px) {
  #moxie-litag .mili-tag::before { width: 88%; box-shadow: 0 0 0 6px rgba(187,207,3,.14), 0 20px 40px -16px rgba(0,0,0,.6); }
  #moxie-litag .mili-doigt { font-size: 32px; } #moxie-litag .mili-astuce { font-size: 11px; } #moxie-litag .mili-languette { font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) { #moxie-litag .mili-tag img, #moxie-litag .mili-ondes i, #moxie-litag .mili-radar, #moxie-litag .mili-notes { animation: none !important; } }

/* ---------- Moxie : la section tient sur un écran ----------
   L'iPhone est dimensionné sur la hauteur disponible (écran − en-tête/bandeau − titre, boutons et marges). */
#moxie-litag { padding-top: clamp(18px, 3vh, 40px); padding-bottom: clamp(16px, 2.5vh, 30px); flex-direction: column; justify-content: center; }
#moxie-litag h2 { font-size: clamp(40px, 5vw, 72px); margin: 10px 0 12px; }
#moxie-litag .mili-scene { min-height: 0; }
#moxie-litag .mili-iphone { --w: min(270px, calc((100vh - var(--moxie-home-entete) - 140px) * 390 / 828)); }
@supports (height: 100svh) {
  #moxie-litag .mili-iphone { --w: min(270px, calc((100svh - var(--moxie-home-entete) - 140px) * 390 / 828)); }
}
#moxie-litag .mili-boutons { margin-top: 12px; }
#moxie-litag .mili-boutons { width: 100%; }

@media (max-width: 860px) {
  #moxie-litag { justify-content: flex-start; }
  #moxie-litag .mili-grille { gap: 12px; }
  #moxie-litag h2 { font-size: clamp(32px, 9vw, 42px); margin: 6px 0 8px; }
  #moxie-litag .mili-legende { font-size: 19px; margin-bottom: 8px; }
  #moxie-litag .mili-points, #moxie-litag .mili-usages { display: none; }
  #moxie-litag .mili-achat b { font-size: 28px; }
  #moxie-litag .mili-iphone { --w: min(48vw, 220px, calc((100vh - var(--moxie-home-entete) - 330px) * 390 / 828)); }
  #moxie-litag .mili-boutons { gap: 6px; margin-top: 8px; flex-wrap: nowrap; }
  #moxie-litag .mili-essayer { font-size: 12px; padding: 0 12px; min-height: 40px; white-space: nowrap; }
}
@supports (height: 100svh) {
  @media (max-width: 860px) {
    #moxie-litag .mili-iphone { --w: min(48vw, 220px, calc((100svh - var(--moxie-home-entete) - 330px) * 390 / 828)); }
  }
}