/* ================================================================
   MOXIE HOME — Section « Oyster » (moxiehome/views/templates/sections/oyster.tpl)
   Reprise de la maquette (.tws, CSS l.984-1171), confinée à #moxie-oyster ; animations préfixées moxie-oy-.
   Photos : ../../img/oyster/. Retiré : l'outil « Placer les écouteurs » (réglage de la maquette).
   ================================================================ */
#moxie-oyster { --titre: 'Barlow Condensed', 'Arial Narrow', sans-serif; max-height: none; line-height: 1.5; }
#moxie-oyster *, #moxie-oyster *::before, #moxie-oyster *::after { box-sizing: border-box; }
#moxie-oyster img { max-width: 100%; display: block; }
#moxie-oyster button { font: inherit; }
#moxie-oyster h2 { letter-spacing: normal; }

/* Maquette */
#moxie-oyster { --encre: #1D1D1F; --gris: #6E6E73; --fond: #F5F5F7; --bleu: #0071E3; color: var(--encre); background: #fff; padding: 72px 20px 64px; overflow: hidden; text-align: center; }
#moxie-oyster .tws-cadre { max-width: 1120px; margin: 0 auto; }
#moxie-oyster .tws-sur { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
#moxie-oyster h2 { font-family: var(--titre); font-stretch: 75%; font-weight: 850; text-transform: uppercase; letter-spacing: -.01em; line-height: .92; font-size: clamp(46px, 7vw, 96px); margin: 12px 0 14px; }
#moxie-oyster h2 em { font-style: normal; background: linear-gradient(90deg, #1D1D1F, #5E6B8C 60%, #8A94AE); -webkit-background-clip: text; background-clip: text; color: transparent; }
#moxie-oyster .tws-chapo { max-width: 560px; margin: 0 auto; font-size: clamp(17px, 1.6vw, 21px); color: var(--gris); }
#moxie-oyster .tws-legende { font-family: var(--titre); font-stretch: 75%; font-weight: 850; text-transform: uppercase; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.05; min-height: 1.1em; margin: 34px 0 0; transition: opacity .12s; }
#moxie-oyster .tws-legende.change { opacity: 0; }
#moxie-oyster .tws-etapes { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
#moxie-oyster .tws-etapes i { width: 6px; height: 6px; border-radius: 3px; background: #C7C7CC; transition: width .3s, background .3s; }
#moxie-oyster .tws-etapes i.on { width: 22px; background: var(--encre); }
#moxie-oyster .tws-scene { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; max-width: 900px; margin: 18px auto 0; }
#moxie-oyster .tw-boitier { position: relative; width: min(500px, 100%); justify-self: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#moxie-oyster .tw-b-scene { position: relative; aspect-ratio: 1; perspective: 3000px; perspective-origin: 50% 45%; }
#moxie-oyster .tw-b-scene > img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .6s, transform 1s cubic-bezier(.6,0,.2,1); }
#moxie-oyster .tw-b-cache { position: absolute; left: 0; right: 0; top: 0; height: 35.25%; background: #fff; transition: opacity .12s .85s; }
#moxie-oyster .tw-boitier.ouvert .tw-b-cache { opacity: 0; }
#moxie-oyster .tw-boitier:not(.ouvert) .tw-b-cache { transition: none; }
#moxie-oyster .tw-b-couv { position: absolute; left: 5.5%; top: 35.25%; width: 89%; height: 39.25%; transform-origin: 50% 0; transform-style: preserve-3d; transform: rotateX(0deg); will-change: transform; transition: transform .85s cubic-bezier(.4,0,.2,1); }
#moxie-oyster .tw-boitier.ouvert .tw-b-couv { transform: rotateX(105deg); opacity: 0; transition: transform .85s cubic-bezier(.4,0,.2,1), opacity .12s .85s; }
#moxie-oyster .tw-b-dessus-couv, #moxie-oyster .tw-b-dedans { position: absolute; inset: 0; border-radius: 999px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
#moxie-oyster .tw-b-dessus-couv { background: radial-gradient(110% 150% at 30% 15%, #7A7B80 0%, #4A4B50 45%, #2C2D31 100%); box-shadow: inset 0 3px 1px rgba(255,255,255,.28), inset 0 -10px 18px rgba(0,0,0,.45), inset 0 0 0 2px rgba(0,0,0,.35); display: grid; place-items: center end; padding-right: 13%; }
#moxie-oyster .tw-b-dessus-couv::before { content: ""; position: absolute; inset: 7% 5%; border-radius: 999px; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.12) 45%, transparent 60%); }
#moxie-oyster .tw-b-dessus-couv span { font: 700 clamp(12px, 2vw, 19px)/1 var(--titre); letter-spacing: .12em; color: rgba(255,255,255,.3); }
#moxie-oyster .tw-b-dedans { transform: rotateX(180deg); border-radius: 0; background: url(../../img/oyster/couvercle-dedans.jpg) center / 100% 100% no-repeat; }
#moxie-oyster .tw-b-couv-ombre { position: absolute; left: 5.5%; top: 35.25%; width: 89%; height: 39.25%; border-radius: 999px; box-shadow: 0 14px 26px -8px rgba(0,0,0,.35); transition: opacity .6s; }
#moxie-oyster .tw-boitier.ouvert .tw-b-couv-ombre { opacity: 0; }
#moxie-oyster .tw-b-led { position: absolute; z-index: 3; top: 54.5%; width: 2.8%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: #FF3B30; box-shadow: 0 0 9px 4px rgba(255,50,40,.8); opacity: 0; transition: background .3s, box-shadow .3s; }
#moxie-oyster .tw-b-led.g { left: 22.3%; }
#moxie-oyster .tw-b-led.d { left: 77.8%; }
#moxie-oyster .tw-boitier.appairage .tw-b-led { animation: moxie-oy-clignote .9s ease-in-out infinite; }
#moxie-oyster .tw-boitier.connecte .tw-b-led { opacity: 1; animation: none; background: #fff; box-shadow: 0 0 7px 3px rgba(255,255,255,.95), 0 0 2px 1px rgba(0,0,0,.3); }
@keyframes moxie-oy-clignote { 50% { opacity: 1; } }
#moxie-oyster .tw-b-lang { position: absolute; z-index: 5; top: 54.6%; width: 2.4%; height: 7.5%; translate: -50% -100%; transform-origin: 50% 100%; transform: rotate(var(--r)); border-radius: 4px 4px 1px 1px; background: linear-gradient(180deg, rgba(70,150,255,.95), rgba(25,105,235,.9)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 2px 5px rgba(0,40,120,.3); opacity: 0; cursor: grab; transition: opacity .3s, transform .9s cubic-bezier(.5,0,.7,1); }
#moxie-oyster .tw-b-lang.g { left: 48.1%; --r: -10deg; }
#moxie-oyster .tw-b-lang.d { left: 51.9%; --r: 10deg; }
#moxie-oyster .tw-boitier.ouvert .tw-b-lang { opacity: 1; transition: opacity .2s .7s, transform .6s cubic-bezier(.5,0,.7,1); }
#moxie-oyster .tw-boitier.ouvert.tire .tw-b-lang { opacity: 0; transform: translateY(-160%) rotate(calc(var(--r) * 3)); transition: transform .6s cubic-bezier(.5,0,.7,1), opacity .25s .35s; }
#moxie-oyster .tw-b-sortis { opacity: 0; transform: scale(.92); }
#moxie-oyster .tw-boitier.sortis .tw-b-dessus, #moxie-oyster .tw-boitier.sortis .tw-b-led, #moxie-oyster .tw-boitier.sortis .tw-b-lang { opacity: 0 !important; transition: opacity .5s !important; }
#moxie-oyster .tw-boitier.sortis .tw-b-sortis { opacity: 1; transform: scale(1); }
#moxie-oyster .tw-b-ec { position: absolute; inset: 0; z-index: 4; opacity: 0; pointer-events: none; transition: opacity .3s; }
#moxie-oyster .tw-b-ec img { position: absolute; inset: 0; width: 100%; height: 100%; }
#moxie-oyster .tw-b-ec.g { transform-origin: 50% 55%; }
#moxie-oyster .tw-b-ec.g img { clip-path: polygon(12.50% 52.50%, 14.50% 48.00%, 19.75% 46.25%, 25.50% 48.00%, 29.00% 50.50%, 48.75% 50.25%, 49.38% 54.62%, 48.75% 59.00%, 29.25% 59.00%, 28.25% 65.25%, 24.00% 68.50%, 17.50% 68.50%, 13.50% 64.75%, 12.12% 58.75%); }
#moxie-oyster .tw-b-ec.d { transform-origin: 50% 55%; }
#moxie-oyster .tw-b-ec.d img { clip-path: polygon(87.50% 52.50%, 85.50% 48.00%, 80.25% 46.25%, 74.50% 48.00%, 71.00% 50.50%, 51.25% 50.25%, 50.62% 54.62%, 51.25% 59.00%, 70.75% 59.00%, 71.75% 65.25%, 76.00% 68.50%, 82.50% 68.50%, 86.50% 64.75%, 87.88% 58.75%); }
#moxie-oyster .tw-boitier.aimant .tw-b-ec { opacity: 1; transform: translateY(-2%) scale(1.13); filter: drop-shadow(0 22px 16px rgba(0,0,0,.35)); }
#moxie-oyster .tw-boitier.aimant.clac .tw-b-ec { animation: moxie-oy-clac .5s cubic-bezier(.7,0,1,.6) forwards; }
@keyframes moxie-oy-clac { 0% { transform: translateY(-2%) scale(1.13); filter: drop-shadow(0 22px 16px rgba(0,0,0,.35)); } 70% { transform: scale(.985); filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)); } 85% { transform: scale(1.008); } 100% { transform: none; filter: none; } }
#moxie-oyster .tw-b-vide { position: absolute; inset: 0; z-index: 3; opacity: 0; pointer-events: none; background: radial-gradient(60% 40% at 50% 55%, #2A2A2D, #111113 70%); }
#moxie-oyster .tw-b-vide.g { clip-path: polygon(12.50% 52.50%, 14.50% 48.00%, 19.75% 46.25%, 25.50% 48.00%, 29.00% 50.50%, 48.75% 50.25%, 49.38% 54.62%, 48.75% 59.00%, 29.25% 59.00%, 28.25% 65.25%, 24.00% 68.50%, 17.50% 68.50%, 13.50% 64.75%, 12.12% 58.75%); }
#moxie-oyster .tw-b-vide.d { clip-path: polygon(87.50% 52.50%, 85.50% 48.00%, 80.25% 46.25%, 74.50% 48.00%, 71.00% 50.50%, 51.25% 50.25%, 50.62% 54.62%, 51.25% 59.00%, 70.75% 59.00%, 71.75% 65.25%, 76.00% 68.50%, 82.50% 68.50%, 86.50% 64.75%, 87.88% 58.75%); }
#moxie-oyster .tw-boitier.aimant .tw-b-vide { opacity: 1; transition: opacity .25s; }
#moxie-oyster .tw-boitier.aimant.clac .tw-b-vide { opacity: 0; transition: opacity .08s .34s; }
#moxie-oyster .tw-b-onde { position: absolute; z-index: 5; top: 56.5%; width: 26%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 2px solid rgba(0,113,227,.7); opacity: 0; pointer-events: none; }
#moxie-oyster .tw-b-onde.g { left: 23%; }
#moxie-oyster .tw-b-onde.d { left: 77%; }
#moxie-oyster .tw-boitier.clac .tw-b-onde { animation: moxie-oy-onde .7s .33s ease-out; }
@keyframes moxie-oy-onde { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.25); } }
#moxie-oyster .tw-b-clac { position: absolute; z-index: 5; left: 50%; top: 78%; translate: -50% 0; white-space: nowrap; font: 850 clamp(16px, 2.4vw, 26px)/1 var(--titre); font-stretch: 75%; text-transform: uppercase; color: var(--bleu); opacity: 0; pointer-events: none; }
#moxie-oyster .tw-boitier.clac .tw-b-clac { animation: moxie-oy-mot .9s .33s ease-out; }
@keyframes moxie-oy-mot { 0% { opacity: 0; transform: scale(.6); } 25% { opacity: 1; transform: scale(1.1); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
#moxie-oyster { --taille-ecouteurs: 70; --g-x: 32; --g-y: 100; --d-x: 78; --d-y: 100; }
#moxie-oyster .tw-b-scene > img.tw-b-reel { width: calc(var(--taille-ecouteurs) * 1%); height: auto; }
#moxie-oyster .tw-b-reel { position: absolute; z-index: 1; width: calc(var(--taille-ecouteurs) * 1%); aspect-ratio: 1; mix-blend-mode: multiply; pointer-events: none; }
#moxie-oyster .tw-b-reel.g { left: calc(var(--g-x) * 1% - var(--taille-ecouteurs) * .425%); top: calc(var(--g-y) * 1% - var(--taille-ecouteurs) * .4%); clip-path: polygon(20.62% 52.50%, 21.88% 57.25%, 25.62% 58.75%, 29.75% 56.88%, 39.75% 37.50%, 47.50% 44.00%, 56.88% 44.62%, 62.75% 39.00%, 63.50% 30.00%, 59.00% 23.00%, 50.00% 20.38%, 41.25% 22.25%, 36.25% 28.25%, 33.50% 31.50%); transform-origin: 42.5% 40%; transform: rotate(-48deg); }
#moxie-oyster .tw-b-reel.d { left: calc(var(--d-x) * 1% - var(--taille-ecouteurs) * .425%); top: calc(var(--d-y) * 1% - var(--taille-ecouteurs) * .4%); clip-path: polygon(20.62% 52.50%, 21.88% 57.25%, 25.62% 58.75%, 29.75% 56.88%, 39.75% 37.50%, 47.50% 44.00%, 56.88% 44.62%, 62.75% 39.00%, 63.50% 30.00%, 59.00% 23.00%, 50.00% 20.38%, 41.25% 22.25%, 36.25% 28.25%, 33.50% 31.50%); transform-origin: 42.5% 40%; transform: scaleX(-1) rotate(-48deg); }
#moxie-oyster .tw-boitier { margin-bottom: 16%; }
#moxie-oyster .tw-boitier-ombre { position: absolute; left: 12%; right: 12%; bottom: 22%; height: 22px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.18), transparent); transition: opacity .5s; }
#moxie-oyster .tw-boitier.sortis .tw-boitier-ombre { opacity: 0; }
#moxie-oyster .tw-boitier-indice { position: absolute; z-index: 2; left: 50%; top: 2%; translate: -50% 0; font-size: 13px; font-weight: 600; color: var(--gris); white-space: nowrap; }
#moxie-oyster .tw-iphone { --w: 290px; 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,.45), inset 0 0 0 1.5px #6b6f77, inset 0 0 0 4px #111; }
#moxie-oyster .tw-iphone::before { content: ""; position: absolute; left: -3px; top: 22%; width: 3px; height: 11%; border-radius: 2px; background: #3a3d43; }
#moxie-oyster .tw-ecran { position: relative; height: 100%; border-radius: calc(var(--w) * .135); overflow: hidden; background: #000; }
#moxie-oyster .tw-ios { position: absolute; left: 0; top: 0; width: 390px; height: 844px; transform-origin: 0 0; transform: scale(var(--k, .6)); overflow: hidden; background: #F2F2F7; color: #000; font: 400 17px/1.25 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; letter-spacing: -.01em; text-align: left; -webkit-font-smoothing: antialiased; }
#moxie-oyster .tw-ios-ile { position: absolute; z-index: 30; top: 11px; left: 50%; translate: -50% 0; width: 126px; height: 37px; border-radius: 20px; background: #000; }
#moxie-oyster .tw-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-oyster .tw-ios-statut svg { fill: currentColor; }
#moxie-oyster .tw-ios-statut span:last-child { display: flex; gap: 6px; align-items: center; }
#moxie-oyster .tw-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-oyster .tw-ios.accueil .tw-ios-statut { color: #fff; }
#moxie-oyster .tw-ios.accueil .tw-ios-barre { background: #fff; }
#moxie-oyster .tw-ecr { position: absolute; inset: 0; transition: transform .45s cubic-bezier(.2,.9,.3,1), opacity .35s; }
#moxie-oyster .tw-ecr.droite { transform: translateX(100%); }
#moxie-oyster .tw-ecr.gauche { transform: translateX(-28%); }
#moxie-oyster .tw-s-accueil { background: radial-gradient(120% 70% at 20% 0%, #FF9A6B 0%, transparent 60%), radial-gradient(110% 80% at 100% 100%, #5B3FD9 0%, transparent 60%), linear-gradient(170deg, #E9677A, #6A4BD6); }
#moxie-oyster .tw-s-accueil.zoom { transform: scale(1.12); opacity: 0; }
#moxie-oyster .tw-ios-grille { position: absolute; top: 76px; left: 22px; right: 22px; display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 26px; }
#moxie-oyster .tw-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-oyster .tw-ios-app > i, #moxie-oyster .tw-ios-dock i { width: 62px; height: 62px; border-radius: 14px; overflow: hidden; display: block; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
#moxie-oyster .tw-ios-app svg, #moxie-oyster .tw-ios-dock svg { display: block; width: 100%; height: 100%; }
#moxie-oyster .tw-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-oyster .tw-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-oyster .tw-reg { background: #F2F2F7; padding: 54px 0 0; }
#moxie-oyster .tw-reg-nav { height: 44px; display: flex; align-items: center; padding: 0 8px; color: #007AFF; font-size: 17px; }
#moxie-oyster .tw-reg-nav b { position: absolute; left: 0; right: 0; text-align: center; font-weight: 600; color: #000; pointer-events: none; }
#moxie-oyster .tw-reg-nav span { display: flex; align-items: center; gap: 2px; }
#moxie-oyster .tw-reg h3 { margin: 0; padding: 4px 16px 8px; font-size: 34px; font-weight: 700; letter-spacing: .01em; }
#moxie-oyster .tw-reg-cherche { margin: 0 16px 20px; height: 36px; border-radius: 10px; background: #E3E3E8; color: #8E8E93; display: flex; align-items: center; gap: 6px; padding: 0 8px; font-size: 17px; }
#moxie-oyster .tw-reg-groupe { margin: 0 16px 26px; background: #fff; border-radius: 10px; overflow: hidden; }
#moxie-oyster .tw-reg-titre { margin: 0 32px 6px; font-size: 13px; color: #6D6D72; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
#moxie-oyster .tw-reg-note { margin: -18px 32px 24px; font-size: 13px; color: #6D6D72; line-height: 1.35; }
#moxie-oyster .tw-reg-ligne { position: relative; display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 0 16px; transition: background .2s, opacity .4s, max-height .4s; }
#moxie-oyster .tw-reg-ligne + .tw-reg-ligne::before { content: ""; position: absolute; top: 0; right: 0; left: var(--retrait, 59px); border-top: .5px solid #C6C6C8; }
#moxie-oyster .tw-reg-ligne.tw-sans-icone { --retrait: 16px; }
#moxie-oyster .tw-reg-ligne.presse { background: #D1D1D6; }
#moxie-oyster .tw-reg-ligne i { width: 29px; height: 29px; border-radius: 7px; flex: none; display: grid; place-items: center; }
#moxie-oyster .tw-reg-ligne i svg { display: block; }
#moxie-oyster .tw-reg-ligne .tw-val { margin-left: auto; color: #8E8E93; display: flex; align-items: center; gap: 8px; }
#moxie-oyster .tw-reg-ligne .tw-chev { color: #C4C4C7; font-size: 20px; line-height: 1; }
#moxie-oyster .tw-reg-ligne .tw-info { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #007AFF; color: #007AFF; display: grid; place-items: center; font: italic 700 13px Georgia, serif; }
#moxie-oyster .tw-reg-profil { display: flex; align-items: center; gap: 14px; padding: 10px 16px; }
#moxie-oyster .tw-reg-profil > b { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(160deg, #A6ABB6, #6F7480); color: #fff; display: grid; place-items: center; font-size: 24px; font-weight: 600; }
#moxie-oyster .tw-reg-profil div { display: grid; }
#moxie-oyster .tw-reg-profil strong { font-size: 20px; font-weight: 400; }
#moxie-oyster .tw-reg-profil small { font-size: 13px; color: #000; }
#moxie-oyster .tw-inter { width: 51px; height: 31px; border-radius: 16px; background: #E9E9EA; position: relative; flex: none; margin-left: auto; transition: background .25s; }
#moxie-oyster .tw-inter::after { content: ""; position: absolute; left: 2px; top: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.15), 0 1px 1px rgba(0,0,0,.16); transition: transform .25s; }
#moxie-oyster .tw-inter.on { background: #34C759; }
#moxie-oyster .tw-inter.on::after { transform: translateX(20px); }
#moxie-oyster .tw-roue { width: 20px; height: 20px; border-radius: 50%; background: repeating-conic-gradient(#8E8E93 0 9deg, transparent 9deg 30deg); -webkit-mask: radial-gradient(circle, transparent 0 40%, #000 41%), conic-gradient(#000, rgba(0,0,0,.15)); -webkit-mask-composite: source-in; mask: radial-gradient(circle, transparent 0 40%, #000 41%), conic-gradient(#000, rgba(0,0,0,.15)); mask-composite: intersect; animation: moxie-oy-tourne 1s steps(12) infinite; }
@keyframes moxie-oy-tourne { to { rotate: 360deg; } }
#moxie-oyster .tw-cache { display: none !important; }
#moxie-oyster .tw-apparait { animation: moxie-oy-apparait .45s ease both; }
@keyframes moxie-oy-apparait { from { opacity: 0; transform: translateY(-6px); } }
#moxie-oyster .tw-tap { position: absolute; z-index: 40; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: rgba(120,120,128,.35); border: 2px solid rgba(255,255,255,.7); box-shadow: 0 2px 10px rgba(0,0,0,.2); opacity: 0; transform: scale(1.4); pointer-events: none; }
#moxie-oyster .tw-tap.go { animation: moxie-oy-tap .7s ease forwards; }
@keyframes moxie-oy-tap { 0% { opacity: 0; transform: scale(1.5); } 30% { opacity: 1; transform: scale(1); } 60% { opacity: 1; transform: scale(.85); } 100% { opacity: 0; transform: scale(.85); } }
#moxie-oyster .tws-atouts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 980px; margin: 48px auto 0; text-align: left; }
#moxie-oyster .tws-atouts div { background: var(--fond); border-radius: 22px; padding: 20px 20px 22px; }
#moxie-oyster .tws-atouts b { display: block; font-family: var(--titre); font-stretch: 75%; font-weight: 850; font-size: 34px; line-height: 1; text-transform: uppercase; }
#moxie-oyster .tws-atouts span { display: block; margin-top: 6px; color: var(--gris); font-size: 15px; line-height: 1.35; }
#moxie-oyster .tws-achat { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 18px; margin-top: 36px; }
#moxie-oyster .tws-prix { font-family: var(--titre); font-stretch: 75%; font-weight: 900; font-size: 46px; line-height: 1; }
#moxie-oyster .tws-btn { min-height: 52px; padding: 0 28px; border-radius: 999px; border: 0; background: var(--bleu); color: #fff; font-weight: 700; font-size: 17px; cursor: pointer; }
#moxie-oyster .tws-btn.clair { background: transparent; color: var(--bleu); padding: 0 10px; }
#moxie-oyster .tws-btn.ok { background: #1f9d55; }
#moxie-oyster .tws-mention { margin-top: 26px; font-size: 12px; color: var(--gris); }
@media (max-width: 760px) {
  #moxie-oyster { padding: 52px 16px 48px; }
  #moxie-oyster .tws-scene { grid-template-columns: 1fr 1fr; gap: 8px; }
  #moxie-oyster .tw-iphone { --w: min(200px, 44vw); justify-self: center; }
  #moxie-oyster .tws-atouts { grid-template-columns: 1fr 1fr; }
  #moxie-oyster .tws-atouts b { font-size: 28px; }
  #moxie-oyster .tw-boitier-indice { font-size: 11px; }
}
#moxie-oyster { padding: 56px 20px 52px !important; }
#moxie-oyster .tws-cadre { max-width: 1200px !important; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); column-gap: 36px; align-items: center; text-align: left; }
#moxie-oyster .tws-cadre > * { grid-column: 1; }
#moxie-oyster .tws-cadre > .tws-scene { grid-column: 2; grid-row: 1 / span 7; margin: 0 !important; max-width: none !important; }
#moxie-oyster h2 { font-size: clamp(40px, 5vw, 72px) !important; margin: 10px 0 12px !important; }
#moxie-oyster .tws-chapo { margin: 0 !important; font-size: 17px !important; }
#moxie-oyster .tws-legende { margin: 22px 0 0 !important; font-size: clamp(20px, 2vw, 26px) !important; }
#moxie-oyster .tws-etapes { justify-content: flex-start !important; }
#moxie-oyster .tws-atouts { grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin: 20px 0 0 !important; }
#moxie-oyster .tws-atouts div { padding: 12px 14px !important; border-radius: 16px !important; }
#moxie-oyster .tws-atouts b { font-size: 22px !important; }
#moxie-oyster .tws-atouts span { font-size: 13px !important; margin-top: 3px !important; }
#moxie-oyster .tws-achat { justify-content: flex-start !important; margin-top: 18px !important; }
#moxie-oyster .tws-prix { font-size: 40px !important; }
#moxie-oyster .tw-iphone { --w: 250px; }
#moxie-oyster .tw-boitier { width: min(420px, 100%); }
@media (max-width: 860px) {
  #moxie-oyster .tws-cadre { grid-template-columns: minmax(0, 1fr); }
  #moxie-oyster .tws-cadre > .tws-scene { grid-column: 1; grid-row: auto; margin: 16px 0 0 !important; }
  #moxie-oyster .tw-iphone { --w: min(190px, 44vw); }
  #moxie-oyster .tw-boitier { margin-bottom: 42%; }
}
@media (prefers-reduced-motion: reduce) {
  #moxie-oyster .tw-boitier *, #moxie-oyster .tw-ecr, #moxie-oyster .tw-tap { transition: none !important; animation: none !important; }
}

/* Achat : prix réel + bouton vers le vrai panier (partial bouton-achat.tpl), aux couleurs de la pub */
#moxie-oyster .tws-achat .moxie-home-achat { min-height: 52px; padding: 0 28px; background: var(--bleu); color: #fff; font-size: 17px; }
#moxie-oyster .tws-achat .moxie-home-achat:hover { background: #0077ED; color: #fff; }
#moxie-oyster .tws-achat .moxie-home-achat.is-ajoute { background: #1f9d55; color: #fff; }
#moxie-oyster .tws-achat .moxie-home-achat.is-indisponible { background: #E8E8ED; color: var(--gris); }
#moxie-oyster .tws-achat .moxie-home-achat__fiche { color: var(--bleu); }

/* ---------- Android, à côté de l'iPhone : le même appairage dans Paramètres > Associer un nouvel appareil ---------- */
#moxie-oyster .tws-scene { grid-template-columns: minmax(0, 1fr) auto auto; gap: 18px; }
#moxie-oyster .tw-iphone { --w: 200px; }
#moxie-oyster .tw-android { --w: 196px; position: relative; width: var(--w); aspect-ratio: 412 / 892; border-radius: calc(var(--w) * .1); padding: calc(var(--w) * .03); background: linear-gradient(145deg, #3b3e44, #17181b 40%, #2a2c31 72%, #101113); box-shadow: 0 40px 70px -30px rgba(0,0,0,.45), inset 0 0 0 1.5px #55585f, inset 0 0 0 4px #0c0c0d; margin-top: 0; }
#moxie-oyster .tw-android::before { content: ""; position: absolute; right: -3px; top: 20%; width: 3px; height: 9%; border-radius: 2px; background: #2c2e33; }
#moxie-oyster .tw-android::after { content: ""; position: absolute; right: -3px; top: 33%; width: 3px; height: 15%; border-radius: 2px; background: #2c2e33; }
#moxie-oyster .tw-ecran-a { position: relative; height: 100%; border-radius: calc(var(--w) * .075); overflow: hidden; background: #000; }
#moxie-oyster .tw-and { position: absolute; left: 0; top: 0; width: 412px; height: 892px; transform-origin: 0 0; transform: scale(var(--k, .45)); overflow: hidden; background: #F6F8FC; color: #1B1B1F; font: 400 16px/1.35 "Google Sans", Roboto, "Segoe UI", -apple-system, Arial, sans-serif; text-align: left; -webkit-font-smoothing: antialiased; }
#moxie-oyster .tw-and-statut { position: relative; height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 15px; font-weight: 500; }
#moxie-oyster .tw-and-camera { position: absolute; left: 50%; top: 12px; translate: -50% 0; width: 22px; height: 22px; border-radius: 50%; background: #0b0b0c; box-shadow: inset 0 0 0 4px #1d1f24; }
#moxie-oyster .tw-and-icones { display: flex; gap: 6px; align-items: center; }
#moxie-oyster .tw-and-icones svg { fill: currentColor; }
#moxie-oyster .tw-and-barre { height: 56px; display: flex; align-items: center; padding: 0 16px; font-size: 26px; }
#moxie-oyster .tw-and-titre { margin: 14px 24px 22px; font-size: 32px; font-weight: 400; line-height: 1.2; letter-spacing: 0; font-family: inherit; text-transform: none; }
#moxie-oyster .tw-and-nom { margin: 0 16px 18px; padding: 16px 20px; border-radius: 24px; background: #fff; font-size: 17px; }
#moxie-oyster .tw-and-nom small { display: block; font-size: 13px; color: #44474F; }
#moxie-oyster .tw-and-section { margin: 10px 24px 6px; font-size: 14px; font-weight: 500; color: #0B57D0; }
#moxie-oyster .tw-and-progression { height: 4px; margin: 6px 24px 8px; border-radius: 4px; background: #D3E3FD; overflow: hidden; }
#moxie-oyster .tw-and-progression i { display: block; width: 40%; height: 100%; border-radius: 4px; background: #0B57D0; animation: moxie-oy-and-prog 1.4s ease-in-out infinite; }
#moxie-oyster .tw-and-progression.fini i { animation: none; width: 0; }
@keyframes moxie-oy-and-prog { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
#moxie-oyster .tw-and-ligne { position: relative; display: flex; align-items: center; gap: 18px; margin: 0 16px 4px; padding: 14px 18px; border-radius: 20px; background: #fff; transition: background .2s; }
#moxie-oyster .tw-and-ligne b { display: block; font-size: 17px; font-weight: 500; }
#moxie-oyster .tw-and-ligne small { display: block; font-size: 14px; color: #44474F; }
#moxie-oyster .tw-and-ligne.presse { background: #DDE3EA; }
#moxie-oyster .tw-and-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #E7ECF4; display: grid; place-items: center; }
#moxie-oyster .tw-and-ic svg { width: 22px; height: 22px; fill: #44474F; }
#moxie-oyster .tw-and-ic.on { background: #D3E3FD; } #moxie-oyster .tw-and-ic.on svg { fill: #0B57D0; }
#moxie-oyster .tw-and-reglage { margin-left: auto; font-size: 22px; color: #44474F; }
#moxie-oyster .tw-and-aide { margin: 18px 28px 0; font-size: 14px; color: #44474F; }
#moxie-oyster .tw-and-geste { position: absolute; bottom: 10px; left: 50%; translate: -50% 0; width: 108px; height: 4px; border-radius: 2px; background: #1B1B1F; opacity: .8; }
#moxie-oyster .tw-and-etat-cours { color: #0B57D0 !important; }
@media (max-width: 860px) {
  #moxie-oyster .tws-scene { grid-template-columns: 1fr 1fr; gap: 10px; }
  #moxie-oyster .tw-boitier { grid-column: 1 / -1; }  /* garde sa marge du bas : les écouteurs sortis débordent sous le boîtier */
  #moxie-oyster .tw-iphone, #moxie-oyster .tw-android { --w: min(170px, 42vw); justify-self: center; margin-top: 0; }
}
/* les deux téléphones décalés vers la droite : la scène déborde dans la marge de droite quand l'écran le permet */
@media (min-width: 861px) {
  /* la scène s'étend jusqu'à 16 px du bord droit de l'écran, quelle que soit sa largeur */
  #moxie-oyster .tws-cadre > .tws-scene { margin-right: calc(-1 * (max(0px, (100vw - 1240px) / 2) + 4px)) !important; }
  #moxie-oyster .tw-iphone { margin-left: 28px; }
}
@media (min-width: 861px) { #moxie-oyster .tws-cadre { grid-template-columns: minmax(0, .8fr) minmax(0, 1.35fr); } }
/* le texte collé vers la gauche de l'écran, les téléphones vers la droite : la section occupe toute la largeur */
@media (min-width: 861px) {
  #moxie-oyster .tws-cadre { max-width: none !important; padding-left: clamp(0px, 2vw, 32px); grid-template-columns: minmax(0, min(36vw, 560px)) minmax(0, 1fr); }
  #moxie-oyster .tws-cadre > .tws-scene { margin-right: -4px !important; }
}