/* ================================================================ TOUT PRÈS DE CHEZ MOI — thème nuit, d'après la maquette de référence Fond bleu nuit, dégradés bleu/violet/rose, cartes à liseré lumineux. ================================================================ */ :root{ --bg:#050E27; --bg-2:#030A1E; --bg-top:#020C24; --card:#0C1730; --card-2:#101D3A; --card-hi:#16243F; --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.13); --ink:#F3F6FF; --ink-2:#9EABC9; --ink-3:#68769A; --pink:#FF3D80; --pink-2:#FC5486; --violet:#8B5CF6; --violet-2:#A855F7; --blue:#3B82F6; --cyan:#22D3EE; --green:#22C55E; --accent:var(--pink); --glow-pink:0 10px 40px rgba(255,61,128,.35); --glow-soft:0 20px 50px rgba(3,8,25,.65); --r-lg:22px; --r-md:18px; --r-sm:14px; --safe-top:env(safe-area-inset-top,0px); --safe-bot:env(safe-area-inset-bottom,0px); --tabbar:calc(64px + var(--safe-bot)); --font:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; } /* Thème clair conservé (réglage existant) */ [data-theme="light"]{ --bg:#F2F4FA; --bg-2:#E9EDF7; --bg-top:#FFFFFF; --card:#FFFFFF; --card-2:#F7F9FE; --card-hi:#EEF2FB; --line:rgba(10,20,50,.09); --line-2:rgba(10,20,50,.16); --ink:#0D1633; --ink-2:#5B6788; --ink-3:#8A95B0; --glow-soft:0 12px 34px rgba(20,30,60,.10); } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{margin:0;height:100%;overscroll-behavior-y:none; /* Aucun défilement horizontal de la page. Sans ce verrou, un enfant plus large que l'écran (les rubriques `.rail`, qui débordent volontairement de 18 px de chaque côté) rend le document plus large que la fenêtre : le doigt fait alors glisser TOUTE l'interface, en-tête et onglets compris. */ width:100%;max-width:100%;overflow-x:hidden;position:relative} @supports (height:100dvh){html,body{height:100dvh}} body{ font-family:var(--font);background:var(--bg);color:var(--ink); font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased; background-image: radial-gradient(900px 520px at 78% -8%, rgba(88,42,168,.42), transparent 62%), radial-gradient(700px 420px at 8% 4%, rgba(23,58,140,.38), transparent 60%), radial-gradient(600px 400px at 50% 108%, rgba(255,61,128,.10), transparent 60%); background-attachment:fixed; } button,input,select{font:inherit;color:inherit} button{background:none;border:0;padding:0;cursor:pointer} a{color:inherit} .ic{display:inline-flex;align-items:center;justify-content:center} .ic svg{width:1em;height:1em;display:block} /* ============================== SPLASH ============================== Reproduction de la maquette : nuit violette, pin lumineux, paysage, quatre étapes, barre de progression. Règle tenue partout : aucune animation en boucle rapide, aucun élément qui apparaît puis disparaît. Tout monte une fois, en douceur. ==================================================================== */ #splash{ position:fixed;inset:0;z-index:300;overflow:hidden; display:flex;flex-direction:column;align-items:center;justify-content:center; padding:calc(env(safe-area-inset-top,0px) + 18px) 18px calc(env(safe-area-inset-bottom,0px) + 14px); background: radial-gradient(58% 34% at 50% 26%, rgba(217,70,239,.24), transparent 66%), radial-gradient(120% 62% at 50% 84%, rgba(109,40,217,.34), transparent 64%), radial-gradient(86% 46% at 50% 96%, rgba(255,45,120,.22), transparent 62%), linear-gradient(180deg,#03020C 0%,#07041A 34%,#0E0730 68%,#190B44 100%); color:#F3F0FF; transition:opacity .8s cubic-bezier(.4,0,.2,1), visibility .8s; will-change:opacity; } #splash.gone{opacity:0;visibility:hidden;pointer-events:none} /* ==================================================================== ÉCRAN D'ENTRÉE (v10.39) Reprend EXACTEMENT le fond, les couleurs et la typographie du splash : même dégradé nocturne, même rose de marque, même police. Il ne s'affiche que là où le navigateur refuse le son sans geste — sur iPhone, donc. Un seul toucher : l'audio se déverrouille et tout démarre ensemble. ==================================================================== */ #entree{ position:fixed;inset:0;z-index:320;overflow:hidden; display:flex;align-items:center;justify-content:center; padding:calc(env(safe-area-inset-top,0px) + 18px) 18px calc(env(safe-area-inset-bottom,0px) + 14px); background:radial-gradient(120% 90% at 50% 0%,#190B44 0%,#0B0725 45%,#03020C 100%); transition:opacity .5s ease, visibility .5s ease} #entree[hidden]{display:none} #entree.sortie{opacity:0;visibility:hidden;pointer-events:none} .ent-sky{opacity:.9} /* La zone touchable occupe tout l'écran : impossible de la manquer. */ .ent-zone{position:absolute;inset:0;width:100%;height:100%; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0; background:none;border:0;color:inherit;font-family:inherit;cursor:pointer; -webkit-tap-highlight-color:transparent} /* Le pin de la marque, repris du splash, en version calme. */ .ent-pin{width:64px;height:86px;flex:none; background:radial-gradient(circle at 50% 34%,#FF2D78 0 32%,rgba(255,45,120,0) 62%), radial-gradient(circle at 50% 38%,rgba(232,62,214,.55) 0 46%,rgba(232,62,214,0) 70%); filter:drop-shadow(0 0 24px rgba(255,45,120,.45)); opacity:0;animation:spIn .9s cubic-bezier(.22,.61,.36,1) .1s both} .ent-nom{margin-top:14px;text-align:center;font-size:clamp(30px,8.4vw,44px); font-weight:800;line-height:1.06;letter-spacing:-.035em;color:#fff; opacity:0;animation:spIn .9s cubic-bezier(.22,.61,.36,1) .26s both} .ent-nom b{font-weight:800;color:#FF2D78;text-shadow:0 0 26px rgba(255,45,120,.45)} .ent-sub{margin-top:12px;text-align:center;color:#B9AEE0; font-size:clamp(13.5px,3.7vw,16px);max-width:30ch; opacity:0;animation:spIn .9s cubic-bezier(.22,.61,.36,1) .42s both} /* Invitation discrète : une onde lente, jamais clignotante. */ .ent-cta{position:relative;margin-top:34px;display:inline-flex;align-items:center;gap:10px; padding:14px 26px;min-height:48px;border-radius:999px; background:rgba(255,255,255,.05);border:1px solid rgba(167,139,250,.35); color:#fff;font-size:15px;font-weight:700;letter-spacing:.01em; opacity:0;animation:spIn .9s cubic-bezier(.22,.61,.36,1) .62s both} .ent-onde{position:relative;width:9px;height:9px;border-radius:50%; background:#FF2D78;box-shadow:0 0 10px rgba(255,45,120,.9)} .ent-onde::after{content:"";position:absolute;inset:-6px;border-radius:50%; border:1px solid rgba(255,45,120,.55);animation:entOnde 2.4s ease-out infinite} @keyframes entOnde{ 0%{transform:scale(.6);opacity:.85} 70%{transform:scale(1.7);opacity:0} 100%{transform:scale(1.7);opacity:0}} .ent-zone:active .ent-cta{transform:scale(.97)} @media (max-width:600px){ .ent-pin{width:56px;height:74px} .ent-cta{margin-top:28px} } /* ---------- ciel ---------- */ .sp-sky{position:absolute;inset:0;pointer-events:none} .sp-sky .star{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff; opacity:0;animation:spFade 1.4s ease both} .star.s1{top:6%;left:12%} .star.s2{top:9%;left:78%;width:3px;height:3px;background:#C4B5FD} .star.s3{top:14%;left:32%} .star.s4{top:4%;left:56%;opacity:.6} .star.s5{top:19%;left:88%} .star.s6{top:24%;left:8%;background:#F9A8D4} .star.s7{top:11%;left:66%;width:1.5px;height:1.5px} .star.s8{top:30%;left:94%} .star.s9{top:33%;left:4%;width:3px;height:3px} .star.s10{top:7%;left:44%} .star.s11{top:21%;left:22%;background:#A78BFA} .star.s12{top:27%;left:72%} .sp-sky .star:nth-child(odd){animation-delay:.2s} .sp-sky .star:nth-child(even){animation-delay:.5s} /* ---------- étoiles filantes (v10.38) ---------- Chaque filante a son point de départ, son angle, sa longueur et son rythme. Les durées de cycle sont PREMIÈRES ENTRE ELLES (7, 9, 11, 13, 17 s) : les départs ne retombent donc jamais ensemble, ce qui évite l'effet mécanique d'une boucle. Le mouvement est porté par `translate3d` — c'est le compositeur graphique qui travaille, pas le processeur. Le halo de tête et la traînée sont dessinés dans le même élément : aucune image, aucun script, aucune boucle JavaScript. */ .sp-sky .shoot{position:absolute;height:2px;border-radius:2px;opacity:0; transform-origin:0 50%;will-change:transform,opacity; background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 55%, rgba(255,255,255,.95) 92%, #fff 100%); box-shadow:0 0 6px 1px rgba(255,255,255,.35)} /* La tête, légèrement teintée des couleurs de la marque. */ .sp-sky .shoot::after{content:"";position:absolute;right:-1px;top:-1.5px; width:5px;height:5px;border-radius:50%;background:#fff; box-shadow:0 0 8px 2px rgba(255,255,255,.55), 0 0 16px 4px rgba(232,62,214,.30)} /* Cinq trajectoires distinctes : position, angle, longueur, durée, retard. */ .shoot.f1{top:8%;left:-8%;width:120px;transform:rotate(18deg); animation:spFilante1 7s ease-in 1.2s infinite} .shoot.f2{top:22%;left:-10%;width:92px;transform:rotate(31deg); animation:spFilante2 11s ease-in 3.7s infinite} .shoot.f3{top:4%;left:-6%;width:150px;transform:rotate(12deg); animation:spFilante3 13s ease-in 6.1s infinite} .shoot.f4{top:30%;left:-9%;width:76px;transform:rotate(24deg); animation:spFilante4 9s ease-in 2.4s infinite} .shoot.f5{top:15%;left:-7%;width:108px;transform:rotate(38deg); animation:spFilante5 17s ease-in 8.9s infinite} /* La filante ne brille que sur une COURTE fraction du cycle : le reste du temps elle est invisible, ce qui espace naturellement les apparitions. Le fondu d'entrée et de sortie évite tout flash. */ @keyframes spFilante1{ 0%{opacity:0;transform:rotate(18deg) translate3d(0,0,0)} 2%{opacity:0} 6%{opacity:.9} 14%{opacity:.85} 20%{opacity:0;transform:rotate(18deg) translate3d(78vw,0,0)} 100%{opacity:0;transform:rotate(18deg) translate3d(78vw,0,0)}} @keyframes spFilante2{ 0%{opacity:0;transform:rotate(31deg) translate3d(0,0,0)} 3%{opacity:0} 7%{opacity:.8} 13%{opacity:.75} 18%{opacity:0;transform:rotate(31deg) translate3d(70vw,0,0)} 100%{opacity:0;transform:rotate(31deg) translate3d(70vw,0,0)}} @keyframes spFilante3{ 0%{opacity:0;transform:rotate(12deg) translate3d(0,0,0)} 2%{opacity:0} 5%{opacity:.95} 11%{opacity:.9} 16%{opacity:0;transform:rotate(12deg) translate3d(86vw,0,0)} 100%{opacity:0;transform:rotate(12deg) translate3d(86vw,0,0)}} @keyframes spFilante4{ 0%{opacity:0;transform:rotate(24deg) translate3d(0,0,0)} 4%{opacity:0} 8%{opacity:.7} 15%{opacity:.65} 21%{opacity:0;transform:rotate(24deg) translate3d(62vw,0,0)} 100%{opacity:0;transform:rotate(24deg) translate3d(62vw,0,0)}} @keyframes spFilante5{ 0%{opacity:0;transform:rotate(38deg) translate3d(0,0,0)} 2%{opacity:0} 6%{opacity:.85} 12%{opacity:.8} 17%{opacity:0;transform:rotate(38deg) translate3d(74vw,0,0)} 100%{opacity:0;transform:rotate(38deg) translate3d(74vw,0,0)}} /* ---------- bouton sons ---------- */ .sp-sound{ position:absolute;top:calc(env(safe-area-inset-top,0px) + 16px);right:16px;z-index:4; display:inline-flex;align-items:center;gap:9px;padding:11px 17px;border-radius:99px; background:rgba(10,6,26,.82);border:1px solid rgba(167,139,250,.26); color:#EDE9FE;font-size:14px;font-weight:600;letter-spacing:-.01em; box-shadow:0 6px 22px rgba(0,0,0,.35);backdrop-filter:blur(10px); opacity:0;animation:spIn .8s cubic-bezier(.22,.61,.36,1) .25s both; transition:border-color .2s, color .2s, background .2s; } .sp-sound .ic svg{width:17px;height:17px} .sp-sound[aria-pressed="false"]{color:#8B85AD;border-color:rgba(139,133,173,.28)} .sp-sound:active{transform:scale(.97)} /* ---------- pin + ondes ---------- */ .sp-stage{position:relative;margin-top:6px;display:flex;flex-direction:column;align-items:center} .sp-pin{position:relative;width:96px;height:128px; opacity:0;transform:translateY(16px) scale(.94); animation:spIn 1.1s cubic-bezier(.22,.61,.36,1) .15s both} /* Le pin flotte en boucle. L'animation d'entrée reste sur .sp-pin (opacité et translation), le vol est porté par l'image elle-même : les deux transforms ne se marchent donc jamais dessus. Cycle de 5,6 s, partagé avec le halo et les ondes pour que l'éclat de « signal » tombe pile au moment où le pin redescend vers les cercles. */ .pin-svg{width:100%;height:100%;display:block;transform-origin:50% 82%; animation:pinVol 1.8s ease-in-out 0s infinite; filter:drop-shadow(0 12px 42px rgba(217,70,239,.75)) drop-shadow(0 0 18px rgba(255,60,140,.6))} @keyframes pinVol{ 0% {transform:translateY(0) rotate(1.6deg); filter:drop-shadow(0 8px 30px rgba(217,70,239,.95)) drop-shadow(0 0 30px rgba(255,60,140,.95))} 50% {transform:translateY(-20px) rotate(-2.4deg); filter:drop-shadow(0 22px 52px rgba(217,70,239,.55)) drop-shadow(0 0 14px rgba(255,60,140,.45))} 100% {transform:translateY(0) rotate(1.6deg); filter:drop-shadow(0 8px 30px rgba(217,70,239,.95)) drop-shadow(0 0 30px rgba(255,60,140,.95))} } /* Le halo respire au même rythme : intensité maximale quand le pin est bas. Le centrage n'utilise plus translate() — il est fait par les marges — pour que l'animation de respiration puisse disposer du transform sans casser la position (même piège que les anneaux). */ .pin-halo{position:absolute;left:50%;top:34%;width:190px;height:190px;margin:-95px 0 0 -95px; border-radius:50%; background:radial-gradient(circle,rgba(232,62,214,.62),rgba(255,45,120,.28) 48%,transparent 70%); filter:blur(18px);z-index:-1;opacity:0; animation:spFade 1.6s ease .3s both, pinSouffle 1.8s ease-in-out 0s infinite} @keyframes pinSouffle{ 0% {opacity:1; transform:scale(1.1)} 50% {opacity:.55; transform:scale(.88)} 100% {opacity:1; transform:scale(1.1)} } /* Les ondes sont centrées par la grille, PAS par un transform. Le centrage reposait sur translate(-50%,-50%) ; dès que ce transform était neutralisé (réglage « réduire les animations », ou fin d'animation), les anneaux se décalaient de la moitié de leur largeur vers la droite et venaient chevaucher le titre. La grille, elle, ne dépend de rien. */ .sp-waves{ display:grid;place-items:center; width:min(340px,88vw);height:78px;margin-top:-6px;pointer-events:none; } /* Émission continue : chaque anneau grandit puis s'efface, décalé d'un quart de cycle. Le départ est calé sur la descente du pin, comme un signal émis. */ .sp-waves span,.sp-waves .wave{ grid-area:1/1; border:1.5px solid rgba(167,139,250,.5);border-radius:50%; opacity:0;animation:spOnde 1.8s ease-out infinite; } .sp-waves span:nth-child(1){width:92px;height:24px;border-color:rgba(255,92,157,.62);animation-delay:0s} .sp-waves span:nth-child(2){width:168px;height:40px;animation-delay:.45s} .sp-waves span:nth-child(3){width:248px;height:56px;animation-delay:.9s} .sp-waves span:nth-child(4){width:330px;height:72px;border-color:rgba(167,139,250,.28);animation-delay:1.35s} @keyframes spOnde{ 0% {opacity:0; transform:scale(.55)} 12% {opacity:.95} 62% {opacity:.35; transform:scale(1.14)} 100% {opacity:0; transform:scale(1.3)} } /* ---------- titre ---------- */ .sp-title{ position:relative;margin:18px 0 0;text-align:center; font-size:clamp(34px,9.4vw,50px);font-weight:800;line-height:1.06;letter-spacing:-.035em; opacity:0;transform:translateY(12px); animation:spIn 1s cubic-bezier(.22,.61,.36,1) .5s both; } .sp-title em{font-style:normal;color:#FF2D78;text-shadow:0 0 26px rgba(255,45,120,.45)} .sp-rule{display:flex;align-items:center;gap:10px;margin:16px 0 0;width:min(300px,72vw); opacity:0;animation:spFade .9s ease .72s both} .sp-rule i{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(167,139,250,.5),transparent)} .sp-rule b{width:7px;height:7px;border-radius:50%;background:#C13BE8;box-shadow:0 0 10px rgba(193,59,232,.9)} .sp-sub{margin:12px 0 0;text-align:center;color:#B9AEE0;font-size:clamp(14px,3.9vw,17px); opacity:0;transform:translateY(8px);animation:spIn .9s cubic-bezier(.22,.61,.36,1) .84s both} /* ---------- paysage ---------- */ /* Le paysage se fond dans le fond. Un seul masque radial : `mask-composite` (deux couches) n'est pas supporté partout et faisait échouer le masque entier, ce qui laissait le rectangle apparent. Le vrai fondu est en plus dessiné DANS le SVG (voir splash.js), donc il fonctionne même sans support CSS des masques. */ .sp-scene{ width:min(700px,120%);margin:6px 0 -10px;position:relative; opacity:0;transform:translateY(14px); animation:spIn 1.2s cubic-bezier(.22,.61,.36,1) .95s both; -webkit-mask-image:radial-gradient(78% 96% at 50% 58%, #000 42%, rgba(0,0,0,.55) 68%, transparent 92%); mask-image:radial-gradient(78% 96% at 50% 58%, #000 42%, rgba(0,0,0,.55) 68%, transparent 92%); } .sp-scene svg{width:100%;height:auto;display:block;background:none;overflow:visible} /* ---------- étapes ---------- */ .sp-steps{ list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:6px; width:min(560px,100%);margin:14px 0 0;padding:0;position:relative; opacity:0;animation:spIn .9s cubic-bezier(.22,.61,.36,1) 1.1s both; } .sp-steps::before{ content:"";position:absolute;left:12.5%;right:12.5%;top:26px;height:1.5px; background:rgba(167,139,250,.22); } .sp-st{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center} .st-ico{ width:52px;height:52px;border-radius:50%;display:grid;place-items:center; border:1.5px solid rgba(167,139,250,.35);background:rgba(16,9,38,.9); color:#8E86B8;position:relative;z-index:1; transition:color .45s ease,border-color .45s ease,box-shadow .45s ease,background .45s ease; } .st-ico svg{width:22px;height:22px} .st-t{font-size:12.5px;font-weight:600;color:#C9BFEC;line-height:1.2} .st-s{font-size:11.5px;color:#7D75A6;line-height:1.2} .st-ok{ width:19px;height:19px;border-radius:50%;margin-top:2px; background:rgba(255,61,128,.16);border:1px solid rgba(255,61,128,.45); opacity:0;transform:scale(.7);transition:opacity .4s ease,transform .4s cubic-bezier(.22,.61,.36,1); position:relative; } .st-ok::after{content:"";position:absolute;left:5px;top:4px;width:5px;height:9px; border:solid #FF7DAE;border-width:0 1.8px 1.8px 0;transform:rotate(45deg)} /* état : en cours */ .sp-st.on .st-ico{color:#F5F0FF;border-color:#C13BE8;background:rgba(60,25,110,.85); box-shadow:0 0 0 4px rgba(193,59,232,.14),0 0 22px rgba(193,59,232,.45)} .sp-st.on .st-t{color:#FFFFFF} /* état : terminé */ .sp-st.done .st-ico{color:#FF9CC4;border-color:rgba(255,61,128,.7);background:rgba(52,14,48,.8); box-shadow:0 0 18px rgba(255,61,128,.30)} .sp-st.done .st-t{color:#F0E9FF} .sp-st.done .st-ok{opacity:1;transform:scale(1)} /* ---------- carte de progression ---------- */ .sp-card{ width:min(560px,100%);margin:18px 0 0;padding:18px 18px 20px;border-radius:22px; background:rgba(11,6,30,.80);border:1px solid rgba(167,139,250,.16); box-shadow:0 18px 46px rgba(0,0,0,.55),0 0 44px rgba(232,62,214,.16);backdrop-filter:blur(10px); position:relative; opacity:0;transform:translateY(12px);animation:spIn .9s cubic-bezier(.22,.61,.36,1) 1.22s both; } .sp-cardline{margin:0 0 15px;display:flex;align-items:center;justify-content:center;gap:9px; font-size:clamp(13px,3.6vw,15.5px);color:#DED6FA;text-align:center;line-height:1.35} .sp-cardline em{font-style:normal;color:#FF5C9D;font-weight:600} .sp-cardline .spark svg{width:16px;height:16px;color:#FF3D80} .sp-bar{ position:relative;height:16px;border-radius:99px;overflow:hidden; background:rgba(255,255,255,.07);border:1px solid rgba(167,139,250,.14); } .sp-fill{ display:block;height:100%;width:0%;border-radius:99px; background:linear-gradient(90deg,#FF2D78 0%,#E83ED6 46%,#4F5BF7 100%); box-shadow:0 0 22px rgba(232,62,214,.75),0 0 40px rgba(255,45,120,.35); transition:width .55s cubic-bezier(.33,.9,.4,1); } .sp-pct{ position:absolute;right:20px;bottom:20px;transform:translateY(-2px); font-size:16px;font-weight:800;color:#FF2D78;font-variant-numeric:tabular-nums; text-shadow:0 0 18px rgba(255,45,120,.5); } @media (min-width:520px){ .sp-bar{margin-right:64px} } @media (max-width:519px){ .sp-pct{position:static;display:block;text-align:right;margin-top:9px} } /* ---------- pied ---------- */ .sp-foot{margin:16px 0 0;display:flex;flex-direction:column;align-items:center;gap:8px; opacity:0;animation:spFade 1s ease 1.4s both} .sp-cup{width:38px;height:38px;border-radius:50%;display:grid;place-items:center; border:1px solid rgba(167,139,250,.25);background:rgba(20,12,44,.7);color:#B9AEE0} .sp-cup svg{width:17px;height:17px} .sp-foot p{margin:0;text-align:center;font-size:12.5px;line-height:1.45;color:#6F679A} .sp-waveline{ position:absolute;left:0;right:0;bottom:0;height:120px;pointer-events:none; background: radial-gradient(60% 100% at 20% 120%, rgba(255,61,128,.12), transparent 60%), radial-gradient(60% 100% at 80% 120%, rgba(124,58,237,.14), transparent 60%); opacity:0;animation:spFade 1.2s ease 1.5s both; } @keyframes spIn{to{opacity:1;transform:none}} @keyframes spFade{to{opacity:1}} /* Écrans courts : on resserre sans rien supprimer */ @media (max-height:760px){ .sp-stage{margin-top:10px}.sp-pin{width:80px;height:106px} .sp-waves{height:44px;margin-top:-12px} .sp-scene{margin-top:6px}.sp-steps{margin-top:6px}.sp-card{margin-top:8px;padding:12px 14px 14px} .sp-foot{margin-top:10px}.sp-rule{margin-top:10px}.sp-sub{margin-top:8px} } @media (max-height:660px){ .sp-scene{display:none} .st-ico{width:44px;height:44px}.st-ico svg{width:19px;height:19px} } /* Accessibilité : sans mouvement, tout apparaît par simple fondu. */ @media (prefers-reduced-motion:reduce){ .sp-sound,.sp-pin,.sp-title,.sp-rule,.sp-sub, .sp-scene,.sp-steps,.sp-card,.sp-foot,.sp-waveline,.sp-sky .star{ animation-name:spFade !important;animation-iteration-count:1 !important; transform:none !important; } /* EXCEPTION VOULUE : le pin, son halo et ses anneaux continuent de bouger. C'est une demande explicite. Les valeurs sont redéclarées en !important car la règle générale `*{animation-duration:.01ms !important}` plus haut réduisait la durée à zéro — c'est précisément ce qui figeait le pin. */ .pin-svg{animation:pinVol 1.8s ease-in-out 0s infinite !important; animation-duration:1.8s !important;transform-origin:50% 82% !important} .pin-halo{animation:pinSouffle 1.8s ease-in-out 0s infinite !important; animation-duration:1.8s !important;opacity:1 !important} .sp-waves span{animation:spOnde 1.8s ease-out infinite !important; animation-duration:1.8s !important} .sp-waves span:nth-child(2){animation-delay:.45s !important} .sp-waves span:nth-child(3){animation-delay:.9s !important} .sp-waves span:nth-child(4){animation-delay:1.35s !important} /* Le halo est recentré par ses marges, donc l'annulation du transform ne déplace rien. Le pin cesse simplement de flotter. */ /* EXCEPTION VOULUE, comme pour le pin : les étoiles filantes sont une demande explicite. Sans ces redéclarations, la règle générale `*{animation-duration:.01ms !important}` ramènerait leur durée à zéro et rien ne traverserait le ciel — exactement le défaut qui avait figé le pin. Le mouvement reste doux et bref, jamais clignotant. */ /* L'onde de l'écran d'entrée reste visible : c'est le seul repère qui indique où toucher. Douce et lente, elle ne clignote pas. */ .ent-onde::after{animation:entOnde 2.4s ease-out infinite !important; animation-duration:2.4s !important} .shoot.f1{animation:spFilante1 7s ease-in 1.2s infinite !important; animation-duration:7s !important} .shoot.f2{animation:spFilante2 11s ease-in 3.7s infinite !important; animation-duration:11s !important} .shoot.f3{animation:spFilante3 13s ease-in 6.1s infinite !important; animation-duration:13s !important} .shoot.f4{animation:spFilante4 9s ease-in 2.4s infinite !important; animation-duration:9s !important} .shoot.f5{animation:spFilante5 17s ease-in 8.9s infinite !important; animation-duration:17s !important} } /* ==================================================================== PROPOSITION D'INSTALLATION (v10.41) Une carte discrète, aux codes existants : fond de carte, arrondis, liseré, accent rose. Elle se ferme et ne revient pas sans cesse. ==================================================================== */ .install{position:relative;display:flex;align-items:center;gap:14px;flex-wrap:wrap; margin:0 0 16px;padding:16px 46px 16px 16px;border-radius:18px; background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.03)); border:1px solid var(--line);overflow:hidden} .install::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px; background:linear-gradient(180deg,#FF2D78,#8B5CF6)} .install .ins-ico{flex:none;display:grid;place-items:center;width:42px;height:42px; border-radius:13px;background:rgba(255,45,120,.12);border:1px solid rgba(255,45,120,.28); color:#FF2D78} .install .ins-ico svg{width:21px;height:21px} .install .ins-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px} .install .ins-txt b{font-size:15.5px;font-weight:800;color:var(--ink);overflow-wrap:anywhere} .install .ins-txt span{font-size:13.5px;line-height:1.45;color:var(--ink-3);overflow-wrap:anywhere} .install .ins-cta{flex:none;min-height:44px;padding:12px 22px;border-radius:999px;border:0; background:linear-gradient(135deg,#FF2D78,#E83ED6);color:#fff; font-family:inherit;font-size:14.5px;font-weight:800;cursor:pointer; box-shadow:0 6px 20px rgba(255,45,120,.30);transition:transform .14s ease} .install .ins-cta:active{transform:scale(.97)} /* Fermeture : discrète, mais assez large pour le doigt. */ .install .ins-x{position:absolute;top:8px;right:8px;width:32px;height:32px; display:grid;place-items:center;border-radius:50%;border:0;background:none; color:var(--ink-3);cursor:pointer;transition:color .2s ease,background .2s ease} .install .ins-x svg{width:15px;height:15px} .install .ins-x:active{background:rgba(255,255,255,.07);color:var(--ink)} /* Guide iPhone : trois étapes numérotées, sur toute la largeur. */ .install--guide{align-items:flex-start} .install--guide .ins-txt{flex:1 1 100%;order:2} .install--guide .ins-ico{order:1} .install .ins-pas{order:3;flex:1 1 100%;list-style:none;margin:12px 0 0;padding:0; display:flex;flex-direction:column;gap:9px} .install .ins-pas li{display:flex;align-items:center;gap:11px;font-size:14px; color:var(--ink-2);min-width:0} .install .ins-pas li i{flex:none;display:grid;place-items:center;width:24px;height:24px; border-radius:50%;font-style:normal;font-size:12.5px;font-weight:800; background:rgba(139,92,246,.16);border:1px solid rgba(139,92,246,.36);color:#C4B5FD} .install .ins-pas li span{min-width:0;overflow-wrap:anywhere} .install .ins-pas li b{color:var(--ink);font-weight:700} .install .ins-pas svg{width:15px;height:15px;vertical-align:-2px;color:#C4B5FD} @media (max-width:600px){ .install{padding:15px 44px 15px 14px;gap:12px} .install .ins-cta{flex:1 1 100%;order:4} } @media (prefers-reduced-motion:reduce){ .install .ins-cta{transition:none} .install .ins-cta:active{transform:none} } /* ==================================================================== PREMIUM (v10.43) Mêmes bleu nuit, rose et violet que le reste. L'or n'intervient qu'en filet, pour distinguer sans changer d'identité. Animations douces. ==================================================================== */ :root{--or:#E8C56A;--or-clair:#F6E3B0} /* ==================================================================== THÈMES PREMIUM (v10.47) Uniquement des VARIABLES redéfinies : aucune règle dupliquée, aucune structure touchée, animations et performances inchangées. Chaque variante reste sombre et contrastée — pas de fond clair agressif. ==================================================================== */ html[data-premium-theme="nuit"]{ --bg:#01060F; --bg-2:#00040A; --bg-top:#010712; --card:#060E1E; --card-2:#0A1628; --card-hi:#0E1D33; --ink:#EEF3FF; --ink-2:#8C9AB8; --ink-3:#5A6784; --line:rgba(255,255,255,.06); --line-2:rgba(255,255,255,.11)} html[data-premium-theme="violet"]{ --bg:#140A2E; --bg-2:#0C0620; --bg-top:#1A0C3A; --card:#1C1040; --card-2:#241551; --card-hi:#2E1B63; --pink:#FF4D95; --pink-2:#FF6BA6; --violet:#A78BFA; --violet-2:#C4B5FD; --ink:#F6F2FF; --ink-2:#B4A6D8; --ink-3:#8A7BB0; --line:rgba(196,181,253,.12); --line-2:rgba(196,181,253,.20)} html[data-premium-theme="dore"]{ --bg:#0C0A14; --bg-2:#07060D; --bg-top:#100C1A; --card:#161222; --card-2:#1D1830; --card-hi:#26203E; --pink:#E8C56A; --pink-2:#F6E3B0; --violet:#C9A961; --violet-2:#E8C56A; --ink:#FBF7EC; --ink-2:#C3B99E; --ink-3:#8C8471; --line:rgba(232,197,106,.14); --line-2:rgba(232,197,106,.24)} /* Le changement se fait en douceur, sans clignotement. */ html{transition:background-color .3s ease} @media (prefers-reduced-motion:reduce){ html{transition:none} } .premium-page{padding-top:6px} .pr-hero--actif{border-color:rgba(232,197,106,.38)} .pr-hero--actif .diamant{margin:0 auto 8px} .pr-statut{margin:12px 0 0} .pr-hero{position:relative;text-align:center;padding:26px 18px 22px;margin-bottom:18px; border-radius:22px;overflow:hidden; background:radial-gradient(120% 100% at 50% 0%,rgba(232,62,214,.20) 0%,rgba(25,11,68,.55) 55%,rgba(3,2,12,.6) 100%); border:1px solid rgba(232,197,106,.24)} .pr-hero::after{content:"";position:absolute;left:0;right:0;top:0;height:1px; background:linear-gradient(90deg,transparent,var(--or),transparent);opacity:.75} .pr-diam{display:block;font-size:34px;line-height:1;margin-bottom:10px; filter:drop-shadow(0 0 18px rgba(232,62,214,.55))} .pr-titre{margin:0;font-size:clamp(26px,7vw,34px);font-weight:800;letter-spacing:-.03em;color:#fff} .pr-titre b{background:linear-gradient(135deg,var(--or-clair),var(--or)); -webkit-background-clip:text;background-clip:text;color:transparent} @supports not ((-webkit-background-clip:text) or (background-clip:text)){ .pr-titre b{color:var(--or)} } .pr-prix{margin:14px 0 0;font-size:15px;color:var(--ink-2)} .pr-prix b{font-size:30px;font-weight:800;color:#fff;letter-spacing:-.02em} .pr-sous{margin:12px auto 0;max-width:36ch;font-size:13.5px;line-height:1.5;color:var(--ink-3)} .pr-phrase{margin:12px 0 0;font-size:15.5px;font-weight:700;color:#F6E3B0} /* Vitrine : deux colonnes sur large écran, une seule sur téléphone. */ .pr-liste{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:11px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr))} .pr-carte{display:flex;align-items:flex-start;gap:12px;padding:14px 15px;border-radius:16px; background:rgba(255,255,255,.04);border:1px solid var(--line);min-width:0; opacity:0;animation:spIn .5s cubic-bezier(.22,.61,.36,1) both} .pr-emo{flex:none;font-size:21px;line-height:1.2} /* Coche lumineuse : la marque visuelle de la référence validée. */ .pr-coche{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:9px; font-size:14px;font-weight:800;color:#fff; background:linear-gradient(135deg,#8B5CF6,#E83ED6); box-shadow:0 0 12px rgba(139,92,246,.5)} .pr-carte.a-venir .pr-coche{background:rgba(255,255,255,.07);color:var(--ink-3);box-shadow:none} /* Le panneau des avantages gagne en profondeur, comme sur la référence. */ /* Bandeau d'accueil de l'abonné, dans l'esprit de la référence. */ .pr-bandeau{display:flex;align-items:center;gap:16px;margin:0 0 16px;padding:16px 18px; border-radius:20px;background:linear-gradient(135deg,rgba(139,92,246,.20),rgba(232,62,214,.12)); border:1px solid rgba(196,181,253,.30);min-width:0} .pr-bandeau .diamant{flex:none} .pb-txt{display:flex;flex-direction:column;gap:3px;min-width:0} .pb-txt b{font-size:16px;font-weight:800;color:var(--ink);overflow-wrap:anywhere} .pb-txt span{font-size:13.5px;line-height:1.45;color:var(--ink-2);overflow-wrap:anywhere} @media (max-width:600px){ .pr-bandeau{gap:12px;padding:14px} } .pr-liste{padding:14px;border-radius:20px; background:linear-gradient(180deg,rgba(139,92,246,.10),rgba(255,255,255,.02)); border:1px solid rgba(196,181,253,.22)} .pr-carte{transition:transform .18s ease,border-color .2s ease} .pr-carte:active{transform:scale(.985);border-color:rgba(196,181,253,.4)} .pr-carte.a-venir{opacity:.9} .pr-soon{display:inline-block;margin-top:6px;padding:3px 9px;border-radius:999px; font-style:normal;font-size:11px;font-weight:800;letter-spacing:.05em; color:#C4B5FD;background:rgba(139,92,246,.14);border:1px solid rgba(139,92,246,.34)} .pr-ico{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:12px; background:rgba(255,45,120,.12);border:1px solid rgba(255,45,120,.26);color:#FF2D78} .pr-ico svg{width:19px;height:19px} .pr-av{display:flex;flex-direction:column;gap:3px;min-width:0} .pr-av b{font-size:15px;font-weight:800;color:var(--ink);overflow-wrap:anywhere} .pr-av span{font-size:13.5px;line-height:1.45;color:var(--ink-3);overflow-wrap:anywhere} .pr-action{text-align:center;padding-bottom:6px} .pr-cta{width:100%;min-height:52px;padding:15px 24px;border:0;border-radius:999px; background:linear-gradient(135deg,#FF2D78,#E83ED6 60%,#8B5CF6);color:#fff; font-family:inherit;font-size:16px;font-weight:800;cursor:pointer; box-shadow:0 10px 30px rgba(255,45,120,.32);transition:transform .15s ease} .pr-cta:active{transform:scale(.98)} .pr-note{margin:11px 0 0;font-size:12.5px;color:var(--ink-3)} .pr-secondaire{margin-top:12px;min-height:46px;padding:13px 22px;border-radius:999px; background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--ink); font-family:inherit;font-size:14.5px;font-weight:700;cursor:pointer} .pr-merci{margin:0;font-size:15px;color:var(--ink)} .pr-essai{margin:14px auto 0;max-width:40ch;padding:10px 14px;border-radius:12px; font-size:12.5px;line-height:1.45;color:#F6E3B0; background:rgba(232,197,106,.10);border:1px solid rgba(232,197,106,.30)} /* Badge : discret, jamais envahissant. */ .set-premium{cursor:pointer} .set-premium .set-fleche{color:var(--ink-3)} .set-premium .set-fleche svg{width:17px;height:17px} /* Badge Développeur : affiché UNIQUEMENT si Supabase confirme le rôle. */ .badge-dev{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px; font-size:10.5px;font-weight:800;letter-spacing:.06em;color:#0B0725; background:linear-gradient(135deg,#C4B5FD,#A78BFA)} .pr-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:999px; font-size:11.5px;font-weight:800;letter-spacing:.08em;color:#1A1206; background:linear-gradient(135deg,var(--or-clair),var(--or)); box-shadow:0 2px 10px rgba(232,197,106,.28)} .pr-badge i{font-style:normal;font-size:11px} /* Verrou : une invitation, jamais un mur. */ .verrou{position:fixed;inset:0;z-index:1500;display:grid;place-items:center;padding:20px; background:rgba(3,2,12,.72);animation:spFade .25s ease both} .vr-carte{position:relative;width:min(420px,100%);padding:30px 24px 24px;border-radius:22px; text-align:center;background:linear-gradient(180deg,#141034,#0B0725); border:1px solid rgba(232,197,106,.26);box-shadow:0 24px 60px rgba(0,0,0,.55); animation:spIn .35s cubic-bezier(.22,.61,.36,1) both} .vr-x{position:absolute;top:10px;right:10px;width:36px;height:36px;display:grid;place-items:center; border:0;border-radius:50%;background:rgba(255,255,255,.05);color:var(--ink-2);cursor:pointer} .vr-x svg{width:15px;height:15px} .vr-diam{display:block;font-size:30px;line-height:1;margin-bottom:10px} .vr-titre{display:block;font-size:19px;font-weight:800;color:var(--ink)} .vr-texte{margin:9px auto 20px;max-width:34ch;font-size:14px;line-height:1.5;color:var(--ink-3)} .vr-cta{width:100%;min-height:50px;border:0;border-radius:999px; background:linear-gradient(135deg,#FF2D78,#E83ED6);color:#fff; font-family:inherit;font-size:15.5px;font-weight:800;cursor:pointer} .vr-plus-tard{margin-top:10px;width:100%;min-height:44px;border:0;background:none; color:var(--ink-3);font-family:inherit;font-size:14px;font-weight:600;cursor:pointer} @media (max-width:600px){ .pr-hero{padding:22px 15px 18px} .pr-liste{grid-template-columns:1fr} .pr-carte{padding:13px 14px} .dm-couronne{font-size:24px} .dm-pilule{font-size:12px;padding:5px 13px} } @media (prefers-reduced-motion:reduce){ .pr-cta{transition:none} .pr-cta:active{transform:none} .pr-carte{animation-name:spFade !important} } /* Retour de la fiche : discret sur ordinateur, indispensable sur mobile où le panneau couvre presque tout l'écran. Mêmes codes que les autres retours de l'application. */ .sh-retour{position:sticky;top:0;z-index:5;display:inline-flex;align-items:center;gap:7px; margin:0 0 2px 16px;padding:9px 15px 9px 11px;min-height:42px;border-radius:999px; background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--ink); font-family:inherit;font-size:14px;font-weight:700;cursor:pointer; -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); transition:transform .14s ease,background .2s ease} .sh-retour svg{width:17px;height:17px} .sh-retour:active{transform:scale(.96);background:rgba(255,255,255,.1)} @media (prefers-reduced-motion:reduce){ .sh-retour{transition:none} .sh-retour:active{transform:none} } /* ============ LISTES, NOTES, RACCOURCIS (v10.48) ============ */ .ml-tete{display:flex;align-items:center;justify-content:space-between;gap:12px; flex-wrap:wrap;margin:0 0 14px} .ml-titre{margin:0;font-size:20px;font-weight:800;color:var(--ink)} .ml-nouv{min-height:44px;padding:11px 18px;border:0;border-radius:999px; background:linear-gradient(135deg,#FF2D78,#E83ED6);color:#fff; font-family:inherit;font-size:14px;font-weight:800;cursor:pointer} .ml-retour{display:inline-flex;align-items:center;gap:7px;margin:0 0 12px; padding:9px 15px 9px 11px;min-height:42px;border-radius:999px; background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--ink); font-family:inherit;font-size:14px;font-weight:700;cursor:pointer} .ml-retour svg{width:17px;height:17px} .ml-liste,.ml-lieux{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .ml-carte,.ml-lieu{display:flex;align-items:center;gap:8px;padding:6px 10px 6px 6px; border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--line);min-width:0} .ml-ouvrir,.ml-l-ouvrir{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px; padding:12px;border:0;background:none;color:inherit;font-family:inherit; text-align:left;cursor:pointer} .ml-nom,.ml-l-nom{font-size:15.5px;font-weight:700;color:var(--ink);overflow-wrap:anywhere} .ml-compte,.ml-l-sans{font-size:12.5px;color:var(--ink-3)} .ml-actions{display:flex;gap:4px;flex:none} .ml-act{width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:12px; background:rgba(255,255,255,.05);color:var(--ink-2);font-size:15px;cursor:pointer} .ml-act:active{background:rgba(255,255,255,.1)} /* Bloc Premium de la fiche : discret, deux boutons, dépliage à la demande. */ .sh-premium{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)} .pf-boutons{display:flex;gap:8px;flex-wrap:wrap} .pf-btn{flex:1 1 auto;min-height:44px;padding:11px 14px;border-radius:13px; background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--ink); font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer} .pf-tag{display:inline-block;margin-top:10px;font-size:13px;color:var(--ink-2);overflow-wrap:anywhere} .pf-note{margin-top:10px;padding:12px 14px;border-radius:13px; background:rgba(139,92,246,.10);border:1px solid rgba(139,92,246,.28)} .pf-note b{font-size:13px;color:#C4B5FD} .pf-note p{margin:5px 0 0;font-size:14px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere} .pf-panneau{margin-top:10px;padding:12px;border-radius:14px; background:rgba(255,255,255,.035);border:1px solid var(--line)} .pf-l{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%; min-height:44px;padding:10px 12px;margin-bottom:6px;border-radius:11px; background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--ink); font-family:inherit;font-size:14px;cursor:pointer;text-align:left} .pf-l.on{border-color:rgba(255,45,120,.45);background:rgba(255,45,120,.10)} .pf-c{flex:none;font-weight:800;color:var(--pink)} .pf-vide{margin:0 0 8px;font-size:13px;color:var(--ink-3)} .pf-creer{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px} .pf-champ,.pf-zone{flex:1 1 160px;min-width:0;padding:11px 13px;border-radius:11px; background:rgba(0,0,0,.28);border:1px solid var(--line);color:var(--ink); font-family:inherit;font-size:15px} .pf-zone{width:100%;flex:1 1 100%;resize:vertical;line-height:1.5} .pf-ok,.pf-sup{flex:none;min-height:44px;padding:11px 18px;border:0;border-radius:11px; font-family:inherit;font-size:14px;font-weight:800;cursor:pointer} .pf-ok{background:linear-gradient(135deg,#FF2D78,#E83ED6);color:#fff} .pf-sup{background:rgba(255,255,255,.06);color:var(--ink-2)} /* Raccourcis */ .rc-aide{margin:0 0 14px;font-size:13.5px;color:var(--ink-3)} .rc-grille{display:grid;gap:9px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} .rc-case{display:flex;align-items:center;justify-content:space-between;gap:8px; min-height:48px;padding:12px 14px;border-radius:13px; background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--ink); font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;text-align:left} .rc-case.on{border-color:rgba(255,45,120,.45);background:rgba(255,45,120,.10)} .rc-case.plein{opacity:.45;cursor:not-allowed} .rc-lbl{min-width:0;overflow-wrap:anywhere} .rc-ok{flex:none;font-weight:800;color:var(--pink)} .raccourcis{margin:0 0 18px} .rc-titre{margin:0 0 9px;font-size:12px;font-weight:800;letter-spacing:.12em; text-transform:uppercase;color:var(--ink-3)} .rc-rail{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px; scrollbar-width:none;-webkit-overflow-scrolling:touch} .rc-rail::-webkit-scrollbar{display:none} .rc-puce{flex:none;display:inline-flex;align-items:center;gap:7px;min-height:42px; padding:10px 15px;border-radius:999px;background:rgba(255,255,255,.05); border:1px solid var(--line);color:var(--ink);font-family:inherit; font-size:13.5px;font-weight:700;cursor:pointer;white-space:nowrap} .rc-p-ico svg{width:16px;height:16px} @media (max-width:600px){ .ml-tete{gap:9px} .ml-nouv{flex:1 1 100%} .rc-grille{grid-template-columns:1fr} .pf-btn{flex:1 1 100%} } /* ============ POUR VOUS (v10.49) — compact et premium ============ */ .pv{margin:0 0 18px;padding:14px;border-radius:18px; background:linear-gradient(180deg,rgba(232,62,214,.10),rgba(255,255,255,.03)); border:1px solid rgba(232,197,106,.20)} .pv-titre{margin:0 0 10px;font-size:12px;font-weight:800;letter-spacing:.12em; text-transform:uppercase;color:#F6E3B0} .pv-duo{display:grid;gap:9px;grid-template-columns:1fr 1fr} .pv-btn{display:flex;align-items:center;gap:9px;min-height:52px;padding:12px 14px; border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--line); color:var(--ink);font-family:inherit;font-size:13.5px;font-weight:700; cursor:pointer;text-align:left;min-width:0;transition:transform .14s ease} .pv-btn:active{transform:scale(.97)} .pv-btn span:last-child{min-width:0;overflow-wrap:anywhere} .pv-emo{flex:none;font-size:18px} .qf-liste,.pm-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .qf-carte,.pm-liste li{min-width:0} .qf-ouvrir{display:flex;flex-direction:column;gap:4px;width:100%;padding:14px 15px; border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--line); color:inherit;font-family:inherit;text-align:left;cursor:pointer;min-width:0} .qf-quoi{font-size:13px;color:var(--ink-3)} .qf-nom{font-size:16px;font-weight:800;color:var(--ink);overflow-wrap:anywhere} .qf-meta{display:flex;gap:10px;align-items:center;font-size:12.5px;color:var(--ink-3)} .qf-ouvert{color:#4ADE80;font-weight:700} .qf-note{margin:14px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-3)} .pm-carte{display:flex;align-items:center;justify-content:space-between;gap:10px; width:100%;min-height:54px;padding:14px 15px;border-radius:16px; background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--ink); font-family:inherit;font-size:15.5px;font-weight:700;cursor:pointer;text-align:left} .pm-lbl{min-width:0;overflow-wrap:anywhere} .pm-fleche{flex:none;color:var(--ink-3)} .pm-fleche svg{width:17px;height:17px} @media (max-width:600px){ .pv-duo{grid-template-columns:1fr} } @media (prefers-reduced-motion:reduce){ .pv-btn{transition:none} .pv-btn:active{transform:none} } /* ============ MISE À JOUR (v10.50) — discret, jamais bloquant ============ */ #majHote{position:fixed;left:0;right:0;z-index:1400;pointer-events:none; top:calc(env(safe-area-inset-top,0px) + 8px);padding:0 12px} #majHote>*{pointer-events:auto} .maj{display:flex;align-items:center;gap:11px;padding:12px 12px 12px 14px; border-radius:16px;background:linear-gradient(180deg,#1C1040,#120B2C); border:1px solid rgba(196,181,253,.30);box-shadow:0 12px 34px rgba(0,0,0,.45); animation:spIn .4s cubic-bezier(.22,.61,.36,1) both} .maj-ico{flex:none;font-size:19px} .maj-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .maj-txt b{font-size:14.5px;font-weight:800;color:var(--ink);overflow-wrap:anywhere} .maj-txt span{font-size:12.5px;line-height:1.4;color:var(--ink-3);overflow-wrap:anywhere} .maj-cta{flex:none;min-height:42px;padding:11px 17px;border:0;border-radius:999px; background:linear-gradient(135deg,#FF2D78,#E83ED6);color:#fff; font-family:inherit;font-size:13.5px;font-weight:800;cursor:pointer} .maj-x{flex:none;width:34px;height:34px;display:grid;place-items:center;border:0; border-radius:50%;background:rgba(255,255,255,.06);color:var(--ink-3);cursor:pointer} .maj-x svg{width:14px;height:14px} @media (max-width:600px){ .maj{flex-wrap:wrap} .maj-cta{flex:1 1 100%;order:3} .maj-x{position:absolute;top:6px;right:16px} } @media (prefers-reduced-motion:reduce){ .maj{animation:spFade .3s ease both} } /* ============ AUTHENTIFICATION (v10.58) ============ Même bleu nuit et mêmes dégradés que le reste. Le fond est peint dès la première image : aucun flash blanc possible. */ .auth{position:fixed;inset:0;z-index:1600;display:grid;place-items:center;overflow-y:auto; padding:calc(env(safe-area-inset-top,0px) + 20px) 18px calc(env(safe-area-inset-bottom,0px) + 20px); background:radial-gradient(120% 90% at 50% 0%,#190B44 0%,#0B0725 45%,#03020C 100%); animation:spFade .35s ease both} .au-ciel{position:absolute;inset:0;pointer-events:none;opacity:.8} .au-carte{position:relative;width:min(420px,100%);padding:26px 22px 24px;border-radius:24px; background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03)); border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.5); animation:spIn .45s cubic-bezier(.22,.61,.36,1) both} .au-marque{display:flex;align-items:center;gap:11px;margin-bottom:20px} .au-pin{flex:none;width:34px;height:44px; background:radial-gradient(circle at 50% 34%,#FF2D78 0 32%,rgba(255,45,120,0) 62%); filter:drop-shadow(0 0 14px rgba(255,45,120,.45))} .au-nom{font-size:17px;font-weight:800;line-height:1.1;color:#fff;letter-spacing:-.02em} .au-nom b{color:#FF2D78} .au-titre{margin:0 0 6px;font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.02em} .au-sous{margin:0 0 18px;font-size:14px;line-height:1.5;color:var(--ink-3);overflow-wrap:anywhere} .au-aide{margin:-8px 0 12px;font-size:12.5px;color:var(--ink-3)} .au-champ{display:block;margin-bottom:14px} .au-champ>span{display:block;margin-bottom:6px;font-size:13px;font-weight:700;color:var(--ink-2)} .au-champ input{width:100%;min-height:50px;padding:13px 15px;border-radius:14px; background:rgba(0,0,0,.30);border:1px solid var(--line);color:var(--ink); font-family:inherit;font-size:16px;transition:border-color .2s ease} .au-champ input:focus{outline:none;border-color:rgba(255,45,120,.55)} .au-mdp-l{position:relative;display:block} .au-mdp-l input{padding-right:52px} .au-oeil{position:absolute;right:6px;top:50%;transform:translateY(-50%); width:42px;height:42px;display:grid;place-items:center;border:0;border-radius:11px; background:none;color:var(--ink-3);font-size:16px;cursor:pointer} .au-cta{width:100%;min-height:52px;margin-top:6px;border:0;border-radius:999px; background:linear-gradient(135deg,#FF2D78,#E83ED6 60%,#8B5CF6);color:#fff; font-family:inherit;font-size:16px;font-weight:800;cursor:pointer; box-shadow:0 10px 28px rgba(255,45,120,.30);transition:transform .15s ease,opacity .2s ease} .au-cta:active{transform:scale(.98)} .au-cta[disabled]{opacity:.6;cursor:default} .au-second{width:100%;min-height:50px;border-radius:999px;background:rgba(255,255,255,.05); border:1px solid var(--line);color:var(--ink);font-family:inherit;font-size:15px; font-weight:700;cursor:pointer} .au-lien{display:block;width:100%;min-height:44px;margin-top:10px;border:0;background:none; color:var(--ink-3);font-family:inherit;font-size:14px;font-weight:600;cursor:pointer} .au-sep{display:flex;align-items:center;gap:12px;margin:16px 0 12px;color:var(--ink-3);font-size:12.5px} .au-sep::before,.au-sep::after{content:"";flex:1;height:1px;background:var(--line)} .au-erreur{margin:2px 0 12px;padding:11px 13px;border-radius:12px;font-size:13.5px;line-height:1.45; color:#FCA5A5;background:rgba(251,113,133,.10);border:1px solid rgba(251,113,133,.32); overflow-wrap:anywhere} .au-info{margin:2px 0 12px;padding:11px 13px;border-radius:12px;font-size:13.5px;line-height:1.45; color:#86EFAC;background:rgba(74,222,128,.10);border:1px solid rgba(74,222,128,.30); overflow-wrap:anywhere} .au-verif{text-align:center} .au-verif .au-emo{display:block;font-size:34px;margin-bottom:10px} @media (max-width:600px){ .au-carte{padding:22px 17px 20px} .au-titre{font-size:20px} } @media (prefers-reduced-motion:reduce){ .auth,.au-carte{animation:spFade .3s ease both} .au-cta{transition:none} .au-cta:active{transform:none} } /* ============ ESPACE DÉVELOPPEUR (v10.66) ============ */ .dv-stats{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px; grid-template-columns:repeat(auto-fit,minmax(140px,1fr))} .dv-carte{display:flex;flex-direction:column;gap:2px;padding:14px;border-radius:16px; background:rgba(255,255,255,.04);border:1px solid var(--line)} .dv-emo{font-size:17px} .dv-val{font-size:24px;font-weight:800;color:var(--ink);letter-spacing:-.02em} .dv-lbl{font-size:12.5px;color:var(--ink-3)} .dv-recherche{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px} .dv-recherche input{flex:1 1 180px;min-width:0;min-height:46px;padding:12px 14px;border-radius:13px; background:rgba(0,0,0,.28);border:1px solid var(--line);color:var(--ink); font-family:inherit;font-size:16px} .dv-btn{flex:none;min-height:46px;padding:12px 18px;border:0;border-radius:13px; background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--ink); font-family:inherit;font-size:14px;font-weight:700;cursor:pointer} .dv-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .dv-compte{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:16px; background:rgba(255,255,255,.04);border:1px solid var(--line);min-width:0} .dv-c-haut{display:flex;align-items:center;justify-content:space-between;gap:10px} .dv-c-haut b{font-size:15.5px;color:var(--ink);overflow-wrap:anywhere} .dv-tag{flex:none;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:800; color:var(--ink-3);background:rgba(255,255,255,.06)} .dv-tag.on{color:#1A1206;background:linear-gradient(135deg,#F6E3B0,#E8C56A)} .dv-c-mail,.dv-c-bas{font-size:12.5px;color:var(--ink-3);overflow-wrap:anywhere} .dv-c-bas{display:flex;gap:12px;flex-wrap:wrap} .dv-c-act{margin-top:4px} .dv-vide{padding:18px;text-align:center;font-size:14px;color:var(--ink-3)} @media (max-width:600px){ .dv-stats{grid-template-columns:1fr 1fr} .dv-btn{flex:1 1 100%} } /* ============ DIAMANT PREMIUM (v10.70) — CSS pur ============ Deux facettes en dégradé, un halo, un reflet qui balaie la pierre, et six étincelles aux rythmes PREMIERS entre eux (5, 7, 11, 13, 17, 19 s) : leurs scintillements ne retombent jamais ensemble. Tout est porté par `transform` et `opacity`, donc par le compositeur graphique — fluide sur téléphone. */ .diamant{position:relative;display:inline-block;flex:none} .dm-grand{width:150px;height:150px} .dm-petit{width:56px;height:56px} .dm-halo{position:absolute;inset:-18%;border-radius:50%; background:radial-gradient(circle,rgba(232,62,214,.42) 0%,rgba(139,92,246,.26) 42%,rgba(255,45,120,0) 70%); filter:blur(6px);animation:dmHalo 6s ease-in-out infinite} @keyframes dmHalo{0%,100%{transform:scale(.94);opacity:.75}50%{transform:scale(1.06);opacity:1}} /* La pierre tourne lentement sur elle-même : une inclinaison, pas un tournoiement. */ .dm-pierre{position:absolute;inset:14%;transform-style:preserve-3d; animation:dmTourne 9s ease-in-out infinite} @keyframes dmTourne{ 0%,100%{transform:rotateY(-14deg) rotateX(4deg)} 50%{transform:rotateY(14deg) rotateX(-3deg)}} /* Facette supérieure : la table du diamant. */ .dm-haut{position:absolute;left:0;right:0;top:6%;height:34%; background:linear-gradient(160deg,#F6E3B0 0%,#C4B5FD 28%,#8B5CF6 62%,#E83ED6 100%); clip-path:polygon(18% 0,82% 0,100% 100%,0 100%); box-shadow:0 0 22px rgba(196,181,253,.55)} /* Facette inférieure : la pointe. */ .dm-bas{position:absolute;left:0;right:0;top:40%;height:54%; background:linear-gradient(200deg,#C4B5FD 0%,#8B5CF6 35%,#FF2D78 78%,#E83ED6 100%); clip-path:polygon(0 0,100% 0,50% 100%); box-shadow:0 8px 26px rgba(255,45,120,.42)} /* Reflet : une bande claire qui traverse la pierre, puis disparaît longuement. */ .dm-reflet{position:absolute;inset:0;overflow:hidden; clip-path:polygon(18% 6%,82% 6%,100% 40%,50% 94%,0 40%)} .dm-reflet::after{content:"";position:absolute;top:-40%;left:-60%;width:44%;height:180%; background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.75),rgba(255,255,255,0)); transform:rotate(18deg);animation:dmReflet 7s ease-in-out infinite} @keyframes dmReflet{ 0%{transform:rotate(18deg) translateX(0);opacity:0} 8%{opacity:.9}22%{opacity:.9} 34%{transform:rotate(18deg) translateX(340%);opacity:0} 100%{transform:rotate(18deg) translateX(340%);opacity:0}} /* Anneau orbital doré : il tourne AUTOUR de la pierre, en perspective. */ .dm-anneau{position:absolute;inset:2% -6%;border-radius:50%; border:2px solid rgba(232,197,106,.55);border-top-color:rgba(246,227,176,.95); border-bottom-color:rgba(232,197,106,.18); transform:rotateX(72deg);animation:dmAnneau 12s linear infinite; box-shadow:0 0 14px rgba(232,197,106,.35)} @keyframes dmAnneau{from{transform:rotateX(72deg) rotate(0)}to{transform:rotateX(72deg) rotate(360deg)}} /* Couronne posée au sommet, en léger flottement. */ .dm-couronne{position:absolute;top:-22%;left:50%;transform:translateX(-50%); font-size:30px;line-height:1;filter:drop-shadow(0 0 10px rgba(232,197,106,.65)); animation:dmCouronne 5s ease-in-out infinite} @keyframes dmCouronne{0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-5px)}} /* Pilule dorée « 💎 Premium », comme sur la référence. */ .dm-pilule{position:absolute;bottom:-14%;left:50%;transform:translateX(-50%); padding:6px 16px;border-radius:999px;white-space:nowrap; font-size:13px;font-weight:800;color:#1A1206; background:linear-gradient(135deg,var(--or-clair),var(--or)); box-shadow:0 4px 16px rgba(232,197,106,.45)} .dm-etincelle{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff; box-shadow:0 0 8px 2px rgba(255,255,255,.8);opacity:0} .dm-etincelle.e1{top:4%;left:22%;animation:dmEtincelle 5s ease-in-out .3s infinite} .dm-etincelle.e2{top:16%;right:8%;animation:dmEtincelle 7s ease-in-out 1.1s infinite} .dm-etincelle.e3{bottom:18%;left:6%;animation:dmEtincelle 11s ease-in-out 2.4s infinite} .dm-etincelle.e4{bottom:6%;right:24%;animation:dmEtincelle 13s ease-in-out 3.7s infinite} .dm-etincelle.e5{top:44%;left:-4%;animation:dmEtincelle 17s ease-in-out 5.2s infinite} .dm-etincelle.e6{top:38%;right:-2%;animation:dmEtincelle 19s ease-in-out 6.8s infinite} @keyframes dmEtincelle{ 0%,100%{transform:scale(0);opacity:0} 6%{transform:scale(1);opacity:1} 14%{transform:scale(.5);opacity:0}} /* Célébration : une fois, en douceur. */ #feteHote{position:relative;z-index:1550} .fete{position:fixed;inset:0;z-index:1550;display:grid;place-items:center;padding:20px; background:rgba(3,2,12,.86);animation:spFade .35s ease both} .ft-carte{width:min(420px,100%);padding:32px 24px 26px;border-radius:24px;text-align:center; background:linear-gradient(180deg,#1C1040,#0B0725); border:1px solid rgba(232,197,106,.28);box-shadow:0 24px 64px rgba(0,0,0,.6); animation:spIn .5s cubic-bezier(.22,.61,.36,1) both} .ft-carte .diamant{margin-bottom:14px} .ft-titre{margin:0 0 10px;font-size:23px;font-weight:800;color:var(--ink);letter-spacing:-.02em} .ft-sous{margin:0 0 22px;font-size:14.5px;line-height:1.55;color:var(--ink-3);overflow-wrap:anywhere} @media (max-width:600px){ .dm-grand{width:120px;height:120px} .ft-carte{padding:26px 18px 22px} } /* Mouvement réduit : la pierre reste belle, mais calme. */ @media (prefers-reduced-motion:reduce){ .dm-pierre,.dm-halo,.dm-anneau,.dm-couronne{animation:none} .pr-carte{transition:none} .pr-carte:active{transform:none} .dm-reflet::after{animation:none;opacity:.35;transform:rotate(18deg) translateX(120%)} .dm-etincelle{animation:none;opacity:.5;transform:scale(.7)} .fete,.ft-carte{animation:spFade .3s ease both} } /* ============ PERSONNALISATION (v10.72) ============ */ .th-liste{list-style:none;margin:0;padding:0;display:grid;gap:11px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} .th-carte{display:flex;flex-direction:column;gap:9px;width:100%;min-height:118px; padding:14px;border-radius:18px;background:rgba(255,255,255,.04); border:1px solid var(--line);color:var(--ink);font-family:inherit; cursor:pointer;text-align:left;min-width:0; transition:border-color .2s ease,transform .16s ease} .th-carte:active{transform:scale(.98)} .th-carte.on{border-color:rgba(255,45,120,.55);background:rgba(255,45,120,.09)} .th-apercu{display:flex;gap:5px;height:34px} .th-apercu span{flex:1;border-radius:9px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)} .th-nom{font-size:14.5px;font-weight:700;overflow-wrap:anywhere} .th-etat{font-size:12.5px;color:var(--ink-3)} .th-carte.on .th-etat{color:var(--pink);font-weight:800} @media (max-width:600px){ .th-liste{grid-template-columns:1fr 1fr} } @media (prefers-reduced-motion:reduce){ .th-carte{transition:none} .th-carte:active{transform:none} } /* ============ BARRE DE FILTRES (v10.73) ============ Compacte : le panneau se déplie SOUS les boutons, sans masquer les résultats. L'utilisateur voit l'effet de son choix immédiatement. */ .barre-filtres{margin:0 0 14px} .bf-tete{display:flex;align-items:center;gap:9px;flex-wrap:wrap} .bf-btn{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:11px 16px; border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line); color:var(--ink);font-family:inherit;font-size:14px;font-weight:700;cursor:pointer} .bf-btn.on{border-color:rgba(255,45,120,.5);background:rgba(255,45,120,.10)} .bf-compte{display:grid;place-items:center;min-width:20px;height:20px;padding:0 6px; border-radius:999px;font-size:11.5px;font-weight:800;color:#fff; background:linear-gradient(135deg,#FF2D78,#E83ED6)} .bf-tri{font-size:13px;color:var(--ink-3);overflow-wrap:anywhere} .bf-raz{margin-left:auto;min-height:40px;padding:9px 14px;border:0;border-radius:999px; background:none;color:var(--ink-3);font-family:inherit;font-size:13.5px; font-weight:700;cursor:pointer} .bf-panneau{margin-top:10px;padding:13px;border-radius:16px; background:rgba(255,255,255,.035);border:1px solid var(--line)} .bf-lbl{margin:0 0 8px;font-size:11.5px;font-weight:800;letter-spacing:.1em; text-transform:uppercase;color:var(--ink-3)} .bf-lbl:not(:first-child){margin-top:14px} .bf-aide{font-style:normal;font-weight:600;text-transform:none;letter-spacing:0;opacity:.75} .bf-puces{display:flex;gap:8px;flex-wrap:wrap} .bf-puce{min-height:40px;padding:9px 14px;border-radius:999px; background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--ink-2); font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer; transition:border-color .18s ease,color .18s ease} .bf-puce.on{border-color:rgba(255,45,120,.55);background:rgba(255,45,120,.12); color:var(--ink);font-weight:800} @media (max-width:600px){ .bf-raz{margin-left:0} } @media (prefers-reduced-motion:reduce){ .bf-puce{transition:none} } /* ============ RECHERCHES SAUVEGARDÉES (v10.74) ============ */ .bf-star{min-height:40px;padding:9px 15px;border-radius:999px; background:rgba(232,197,106,.12);border:1px solid rgba(232,197,106,.32); color:#F6E3B0;font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer; white-space:nowrap} .rs-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .rs-item{display:flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;border-radius:16px; background:rgba(255,255,255,.04);border:1px solid var(--line);min-width:0} .rs-ouvrir{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;padding:12px; border:0;background:none;color:inherit;font-family:inherit;text-align:left;cursor:pointer} .rs-nom{font-size:15.5px;font-weight:700;color:var(--ink);overflow-wrap:anywhere} .rs-criteres{display:flex;gap:6px;flex-wrap:wrap} .rs-criteres i{font-style:normal;padding:3px 9px;border-radius:999px;font-size:11.5px; color:var(--ink-2);background:rgba(255,255,255,.06);border:1px solid var(--line)} .rs-actions{display:flex;gap:4px;flex:none} @media (max-width:600px){ .bf-star{flex:1 1 100%;text-align:center} } /* ============ MES TRANSPORTS (v10.75) ============ */ .tr-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .tr-item{display:flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;border-radius:16px; background:rgba(255,255,255,.04);border:1px solid var(--line);min-width:0} .tr-ouvrir{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:12px; border:0;background:none;color:inherit;font-family:inherit;text-align:left;cursor:pointer} .tr-ico{flex:none;font-size:20px} .tr-txt{display:flex;flex-direction:column;gap:2px;min-width:0} .tr-nom{font-size:15.5px;font-weight:700;color:var(--ink);overflow-wrap:anywhere} .tr-sous{font-size:12.5px;color:var(--ink-3)} .pf-btn.on{border-color:rgba(255,45,120,.5);background:rgba(255,45,120,.10);color:var(--ink)} /* ============ AVATARS ET PROFIL (v10.76) ============ */ .av-pastille{position:relative;display:inline-grid;place-items:center;flex:none; width:var(--av,44px);height:var(--av,44px)} .av-img{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden; box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)} .av-img svg{display:block;width:100%;height:100%} /* Cadre Premium : un anneau doré qui respire lentement, et un petit diamant. Rien de clignotant — le même esprit que le diamant Premium. */ .av-premium .av-img{box-shadow:0 0 0 2px rgba(232,197,106,.85),0 0 16px rgba(232,197,106,.42)} .av-premium::after{content:"";position:absolute;inset:-5px;border-radius:50%; border:1px solid rgba(232,197,106,.45);animation:avHalo 6s ease-in-out infinite} @keyframes avHalo{0%,100%{opacity:.35;transform:scale(.97)}50%{opacity:.9;transform:scale(1.03)}} .av-diam{position:absolute;right:-2px;bottom:-2px;font-size:calc(var(--av,44px) * .26); line-height:1;filter:drop-shadow(0 0 5px rgba(232,197,106,.7))} .pf-tete{display:flex;align-items:center;gap:16px;margin:0 0 18px;padding:16px; border-radius:20px;background:rgba(255,255,255,.04);border:1px solid var(--line);min-width:0} .pf-ident{display:flex;flex-direction:column;gap:4px;min-width:0} .pf-ident b{font-size:18px;font-weight:800;color:var(--ink);overflow-wrap:anywhere} .pf-mail{font-size:13px;color:var(--ink-3);overflow-wrap:anywhere} .set-avatar{flex:none;margin-right:10px} .av-grille{list-style:none;margin:0;padding:0;display:grid;gap:10px; grid-template-columns:repeat(auto-fit,minmax(74px,1fr))} .av-choix{width:100%;aspect-ratio:1;padding:5px;border-radius:50%;background:none; border:2px solid transparent;cursor:pointer;line-height:0; transition:border-color .18s ease,transform .16s ease} .av-choix svg{border-radius:50%;width:100%;height:100%} .av-choix.on{border-color:var(--pink);transform:scale(1.04)} @media (max-width:600px){ .av-grille{grid-template-columns:repeat(4,1fr)} } @media (prefers-reduced-motion:reduce){ .av-premium::after{animation:none;opacity:.6} .av-choix{transition:none} .av-choix.on{transform:none} } /* ============ PHOTO DE PROFIL (v10.77) ============ */ .av-photo{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%} .ph-bloc{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)} .ph-actions{display:flex;gap:9px;flex-wrap:wrap;margin:10px 0} .ph-apercu{width:170px;height:170px;margin:14px auto;border-radius:50%;overflow:hidden; box-shadow:0 0 0 2px rgba(196,181,253,.35),0 12px 32px rgba(0,0,0,.4)} .ph-apercu img{display:block;width:100%;height:100%;object-fit:cover} @media (max-width:600px){ .ph-actions .dv-btn{flex:1 1 100%} .ph-apercu{width:150px;height:150px} } /* ============ CENTRE PREMIUM (v10.78) ============ Des cartes groupées par usage, pour qu'un abonné trouve immédiatement la fonction qu'il vient de débloquer. */ .cp-groupe{margin:0 0 20px} .cp-titre{margin:0 0 10px;font-size:12px;font-weight:800;letter-spacing:.12em; text-transform:uppercase;color:var(--or)} .cp-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .cp-carte{display:flex;align-items:center;gap:13px;padding:14px;border-radius:17px; background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02)); border:1px solid var(--line);min-width:0} .cp-emo{flex:none;font-size:21px;line-height:1.2} .cp-txt{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0} .cp-txt b{font-size:15px;font-weight:700;color:var(--ink);overflow-wrap:anywhere} .cp-desc{font-size:12.5px;line-height:1.45;color:var(--ink-3);overflow-wrap:anywhere} .cp-dispo{margin-top:3px;font-size:11.5px;font-weight:800;color:#86EFAC} .cp-btn{flex:none;min-height:42px;padding:11px 15px;border-radius:999px; background:rgba(255,45,120,.12);border:1px solid rgba(255,45,120,.38); color:var(--ink);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer; white-space:nowrap;transition:background .18s ease} .cp-btn:active{background:rgba(255,45,120,.22)} @media (max-width:600px){ .cp-carte{flex-wrap:wrap} .cp-btn{flex:1 1 100%;margin-top:4px} } @media (prefers-reduced-motion:reduce){ .cp-btn{transition:none} } /* ============ MES NOTES (v10.72) ============ */ .nt-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .nt-item{display:flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;border-radius:16px; background:rgba(255,255,255,.04);border:1px solid var(--line);min-width:0} .nt-ouvrir{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;padding:12px; border:0;background:none;color:inherit;font-family:inherit;text-align:left;cursor:pointer} .nt-ouvrir[disabled]{opacity:.55;cursor:default} .nt-nom{font-size:15.5px;font-weight:700;color:var(--ink);overflow-wrap:anywhere} .nt-txt{font-size:13px;line-height:1.45;color:var(--ink-2);overflow-wrap:anywhere} .nt-vieux{font-size:11.5px;color:var(--ink-3);overflow-wrap:anywhere} /* Mise en évidence brève d'un réglage, quand on y conduit l'utilisateur. */ .row.mise-en-avant{border-radius:14px; box-shadow:0 0 0 2px rgba(255,45,120,.55),0 0 18px rgba(255,45,120,.30); transition:box-shadow .3s ease} @media (prefers-reduced-motion:reduce){ .row.mise-en-avant{transition:none} } /* ============ DÉCOUVERTE PREMIUM SUR L'ACCUEIL (v10.74) ============ Une invitation, pas une réclame : discrète, cliquable en entier, et réservée aux comptes gratuits. */ .dp-carte{display:flex;align-items:center;gap:14px;width:100%;margin:0 0 14px; padding:14px 16px;border-radius:20px;text-align:left;cursor:pointer;min-width:0; background:linear-gradient(135deg,rgba(139,92,246,.18),rgba(232,62,214,.10)); border:1px solid rgba(196,181,253,.28);color:inherit;font-family:inherit; transition:border-color .2s ease,transform .16s ease} .dp-carte:active{transform:scale(.99);border-color:rgba(196,181,253,.5)} /* Flottement très doux : la pierre respire, elle ne clignote pas. */ .dp-diam{flex:none;display:block;animation:dpFlotte 5.5s ease-in-out infinite} @keyframes dpFlotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}} .dp-txt{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0} .dp-txt b{font-size:15.5px;font-weight:800;color:var(--ink);overflow-wrap:anywhere} .dp-txt>span{font-size:12.5px;line-height:1.45;color:var(--ink-3);overflow-wrap:anywhere} .dp-prix{align-self:flex-start;margin-top:4px;padding:3px 11px;border-radius:999px; font-size:12px;font-weight:800;color:#1A1206; background:linear-gradient(135deg,var(--or-clair),var(--or))} .dp-fleche{flex:none;color:var(--ink-3)} .dp-fleche svg{width:18px;height:18px} @media (max-width:600px){ .dp-carte{padding:13px 14px;gap:11px} } @media (prefers-reduced-motion:reduce){ .dp-diam{animation:none} .dp-carte{transition:none} .dp-carte:active{transform:none} } /* La carte reprend la main sur les gestes : déplacement au doigt, pincement pour zoomer. Sans cette exception, `touch-action: pan-y` posé sur `main` l'aurait figée horizontalement. */ .leaflet-container,.leaflet-container *{touch-action:auto} #view-map,#view-map *{touch-action:auto} /* Les bandeaux qui défilent horizontalement gardent aussi leur geste : `pan-x` les autorise sans rouvrir la navigation par glissement. */ .rail,.rc-rail{touch-action:pan-x} /* ============================== SHELL ============================== */ #app{display:none;flex-direction:column;height:100%;width:100%;max-width:100%;overflow-x:hidden} #app.ready{display:flex} .topbar{ position:relative;z-index:1100;background:linear-gradient(180deg,var(--bg-top),rgba(2,12,36,.6)); border-bottom:1px solid var(--line);padding-top:var(--safe-top); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); } .tb-inner{display:flex;align-items:center;gap:12px;padding:11px 16px;max-width:1420px;margin:0 auto} .tb-back{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.06); border:1px solid var(--line);font-size:20px;color:var(--ink);display:grid;place-items:center;flex:none} .tb-back[hidden]{display:none} .brand{display:flex;align-items:center;gap:10px;flex:none;padding-right:14px;border-right:1px solid var(--line)} .brand-mark{font-size:24px;color:var(--pink);display:grid;place-items:center; filter:drop-shadow(0 3px 12px rgba(255,61,128,.55))} .brand-txt{font-size:12.5px;line-height:1.25;color:var(--ink-2);letter-spacing:.01em} .brand-txt b{color:var(--ink);font-weight:700} .city-pill{display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px; background:rgba(255,255,255,.05);border:1px solid var(--line-2); font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase; max-width:210px;transition:border-color .2s,background .2s} .city-pill:active{background:rgba(255,255,255,.1)} .city-pill .cp-ico{font-size:15px;color:var(--pink);flex:none} .city-pill span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .city-pill.dim{opacity:.6} .tb-actions{margin-left:auto;display:flex;gap:8px} .tb-icon{width:40px;height:40px;border-radius:13px;background:rgba(255,255,255,.05); border:1px solid var(--line);font-size:18px;color:var(--ink-2);display:grid;place-items:center;transition:.2s} .tb-icon:active{background:rgba(255,255,255,.1);color:var(--ink)} /* Le navigateur peut interpréter un glissement horizontal comme un retour arrière — d'où l'impression de « changer d'écran au doigt ». On neutralise ce geste sur le contenu, SANS toucher au défilement vertical. La carte n'est pas concernée : elle gère ses propres gestes (voir `.leaflet-container` plus bas), et garde donc son déplacement au doigt. */ /* GESTE HORIZONTAL — la vraie cause du « changement d'écran au doigt ». Chaque écran ouvert empile un état dans l'historique du NAVIGATEUR (c'est ce qui fait fonctionner le bouton Retour). Or un glissement horizontal depuis le bord est, sur Android comme sur iOS, le geste natif de navigation avant/arrière : il ramenait donc aux écrans déjà visités — Favoris, Notes, Listes. `overscroll-behavior-x` ne concerne que le DÉFILEMENT, pas ce geste : il ne pouvait rien y faire. `touch-action: pan-y` dit au navigateur de ne reconnaître QUE le défilement vertical sur cette zone ; les gestes horizontaux ne lui sont plus transmis. La carte n'est pas concernée : elle rétablit ses propres gestes juste après, et garde donc son déplacement au doigt. */ /* `touch-action: pan-y` a été RETIRÉ : le glissement depuis le bord est capté par le système avant d'atteindre la page, aucune règle CSS ne l'intercepte. Le vrai correctif est architectural — une seule entrée d'historique, voir `pileEcrans` dans app.js. `overscroll-behavior-x` reste, il empêche le rebond horizontal du défilement. */ main{overscroll-behavior-x:none; flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch; padding-bottom:calc(var(--tabbar) + 18px);width:100%;max-width:100%} main.nopad{padding-bottom:0;overflow:hidden} .view{display:none} .view.on{display:block;width:100%;max-width:100%;overflow-x:clip} .wrap{max-width:1420px;margin:0 auto;padding:0 18px} /* ================================ HERO ================================ */ .hero{position:relative;overflow:hidden;border-radius:0 0 26px 26px;margin-bottom:6px} .hero-media{position:absolute;inset:0;z-index:0} .hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 40%;opacity:.55} .hero-sky{position:absolute;inset:0; background: radial-gradient(700px 340px at 82% 22%, rgba(124,58,237,.55), transparent 62%), radial-gradient(520px 300px at 96% 60%, rgba(255,61,128,.30), transparent 65%), linear-gradient(180deg,#0A1B4E 0%,#0A143A 55%,var(--bg) 100%);} .hero-city{position:absolute;right:0;bottom:0;width:min(58%,760px);height:78%;opacity:.9; -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%);mask-image:linear-gradient(90deg,transparent,#000 22%)} .hero-veil{position:absolute;inset:0; background:linear-gradient(100deg,var(--bg) 6%,rgba(5,14,39,.82) 38%,rgba(5,14,39,.15) 66%,transparent 100%)} .hero-inner{position:relative;z-index:2;max-width:1420px;margin:0 auto; padding:34px 18px 26px;display:flex;gap:24px;align-items:flex-start} .hero-left{flex:1;min-width:0;max-width:640px} .hero-hi{margin:0;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)} .hero-q{margin:10px 0 0;font-size:clamp(30px,5.6vw,48px);font-weight:800;line-height:1.08;letter-spacing:-.03em} .hero-q em{font-style:normal;background:linear-gradient(96deg,var(--pink),#FF7AB8 60%,var(--violet-2)); -webkit-background-clip:text;background-clip:text;color:transparent} .hero-p{margin:14px 0 0;color:var(--ink-2);font-size:15px;max-width:46ch} /* Barre de recherche */ .searchbar{margin-top:22px;position:relative;display:flex;align-items:center; background:rgba(255,255,255,.05);border:1px solid var(--line-2);border-radius:999px; padding:6px 6px 6px 20px;max-width:720px;box-shadow:var(--glow-soft);transition:border-color .2s,box-shadow .2s} .searchbar:focus-within{border-color:rgba(255,61,128,.55);box-shadow:0 0 0 4px rgba(255,61,128,.10)} .searchbar .s-ico{font-size:19px;color:var(--ink-3);flex:none} .searchbar input{flex:1;min-width:0;background:none;border:0;outline:none;padding:14px 12px;font-size:15px;color:var(--ink)} .searchbar input::placeholder{color:var(--ink-3)} .searchbar .s-clr{display:none;width:32px;height:32px;border-radius:50%;color:var(--ink-3);font-size:16px;place-items:center} .searchbar.filled .s-clr{display:grid} .btn-go{display:flex;align-items:center;gap:9px;padding:13px 22px;border-radius:999px;flex:none; background:linear-gradient(96deg,var(--pink),#FF5C9B);color:#fff;font-weight:700;font-size:14.5px; box-shadow:var(--glow-pink);transition:transform .14s,filter .2s} .btn-go:active{transform:scale(.97)} .btn-go .ic{font-size:17px} /* Filtres */ .chips{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap} .chip{display:flex;align-items:center;gap:9px;padding:10px 17px;border-radius:999px; background:rgba(255,255,255,.045);border:1px solid var(--line-2); font-size:13.5px;color:var(--ink-2);font-weight:500;transition:.2s;white-space:nowrap} .chip:active{background:rgba(255,255,255,.1)} .chip .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(34,197,94,.16)} /* Filtre ACTIF : couleur d'accent de l'application (le rose de la marque), pas un vert discret qu'on pouvait confondre avec un simple survol. L'état doit sauter aux yeux sur PC comme sur mobile. */ .chip.on{background:rgba(255,45,120,.16);border-color:rgba(255,45,120,.55); color:#FFA7C4;font-weight:700;box-shadow:0 0 0 3px rgba(255,45,120,.10)} .chip--filtre .dot{width:8px;height:8px;border-radius:50%;background:var(--line-2);transition:.2s} .chip--filtre.on .dot{background:var(--pink);box-shadow:0 0 8px rgba(255,45,120,.85)} /* L'action rapide de l'accueil reflète le même état, avec le même code couleur. */ .qa.on{border-color:rgba(255,45,120,.55);background:rgba(255,45,120,.13)} .chip select{background:none;border:0;outline:none;font-size:13.5px;color:inherit;font-weight:500} .chip select option{background:#0C1730;color:#F3F6FF} .chip .ic{font-size:16px} /* Carte météo */ .weather{position:absolute;right:26px;top:34px;z-index:3;min-width:172px;padding:16px 18px; border-radius:var(--r-md);background:rgba(10,23,54,.62);border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:var(--glow-soft); animation:rise .6s cubic-bezier(.2,.8,.25,1) both} .weather h4{margin:0;font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase} .weather .w-t{display:flex;align-items:center;gap:9px;margin-top:9px;font-size:21px;font-weight:700} .weather .w-t .ic{font-size:22px;color:#BFD4FF} .weather .w-l{margin:5px 0 0;font-size:12.5px;color:var(--ink-2)} /* ========================== ACTIONS RAPIDES ========================== */ .quick{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px} .qa{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px 20px; border-radius:var(--r-md);background:var(--card);border:1px solid var(--line); text-align:left;position:relative;overflow:hidden;transition:transform .16s,border-color .2s; animation:rise .5s cubic-bezier(.2,.8,.25,1) both} .qa:active{transform:scale(.98)} .qa b{display:block;font-size:17px;font-weight:700;letter-spacing:-.01em} .qa small{display:block;font-size:12.5px;color:var(--ink-2);margin-top:3px} .qa .qa-badge{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:21px;flex:none} .qa--main{background:linear-gradient(100deg,#E0348E 0%,#A22FC0 48%,#5B2BD6 100%);border-color:transparent; box-shadow:0 14px 42px rgba(160,45,180,.42)} .qa--main small{color:rgba(255,255,255,.78)} .qa--main .qa-badge{background:rgba(255,255,255,.18);color:#fff} .qa--open .qa-badge{background:rgba(34,197,94,.14);color:#4ADE80;font-size:15px;font-weight:800;letter-spacing:-.02em} .qa--fav .qa-badge{background:linear-gradient(140deg,rgba(255,61,128,.28),rgba(168,85,247,.2));color:var(--pink)} .qa--recent .qa-badge{background:rgba(59,130,246,.16);color:#7FB2FF} .qa--fav{background:linear-gradient(120deg,rgba(255,61,128,.10),var(--card) 60%)} .qa--recent{background:linear-gradient(120deg,rgba(59,130,246,.10),var(--card) 60%)} .qa--open{background:linear-gradient(120deg,rgba(34,197,94,.08),var(--card) 60%)} /* ============================ CATÉGORIES ============================ */ .sec-title{margin:30px 0 16px;font-size:19px;font-weight:700;letter-spacing:-.01em} .cols{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:22px;align-items:start} /* v10.26 : la grille était figée à 6 colonnes. Avec 6 vignettes c'était parfait ; avec 39 (dépliées), chaque vignette devenait étroite et les noms se coupaient. `auto-fill` + une largeur MINIMALE garantit des vignettes toujours lisibles et une grille qui remplit la largeur disponible. */ .cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:14px} .cat{position:relative;overflow:hidden;border-radius:var(--r-md);padding:22px 10px 16px; background:linear-gradient(170deg,color-mix(in srgb,var(--accent) 13%,var(--card)) 0%,var(--card) 62%); border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:12px; transition:transform .16s,border-color .2s,box-shadow .2s; animation:rise .45s cubic-bezier(.2,.8,.25,1) both} .cat::before{content:"";position:absolute;left:0;right:0;top:0;height:2.5px;background:var(--accent); box-shadow:0 0 16px 1px var(--accent)} .cat:active{transform:scale(.96)} .cat:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent); box-shadow:0 12px 34px color-mix(in srgb,var(--accent) 18%,transparent)} .cat .c-ico{font-size:27px;color:var(--accent);filter:drop-shadow(0 3px 14px color-mix(in srgb,var(--accent) 55%,transparent))} .cat .c-lbl{font-size:13.5px;font-weight:600;letter-spacing:-.01em;text-align:center;line-height:1.2} /* Carte promo */ .promo{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:30px 28px;min-height:100%; background:linear-gradient(155deg,#8A2BAE 0%,#5C2A9E 44%,#231A63 100%); border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 54px rgba(70,25,120,.45); display:flex;flex-direction:column;animation:rise .5s cubic-bezier(.2,.8,.25,1) both} .promo::after{content:"";position:absolute;right:-70px;bottom:-90px;width:320px;height:320px;border-radius:50%; background:radial-gradient(circle,rgba(255,61,128,.42),transparent 66%)} .promo h3{margin:0;font-size:27px;font-weight:800;line-height:1.16;letter-spacing:-.02em;position:relative} .promo h3 em{font-style:normal;display:block; background:linear-gradient(96deg,#FF7AB8,#FFB2D6);-webkit-background-clip:text;background-clip:text;color:transparent} .promo p{margin:14px 0 0;color:rgba(255,255,255,.8);font-size:14.5px;max-width:24ch;position:relative} .promo .btn-go{margin-top:auto;align-self:flex-start;position:relative} .promo-art{position:absolute;right:14px;bottom:10px;width:190px;opacity:.95;pointer-events:none} /* ============================== LISTES ============================== */ .rhead{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:26px 0 4px} .rhead h2{margin:0;font-size:22px;font-weight:800;letter-spacing:-.02em} .rhead .cnt{font-size:13px;color:var(--ink-2);white-space:nowrap} .note{margin:10px 0 0;font-size:12.5px;color:var(--ink-3)} .list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px;margin-top:16px} .place{display:flex;align-items:center;gap:14px;padding:15px 16px;border-radius:var(--r-md); background:var(--card);border:1px solid var(--line);text-align:left;width:100%; transition:transform .15s,border-color .2s,box-shadow .2s;animation:rise .4s cubic-bezier(.2,.8,.25,1) both} .place:active{transform:scale(.985)} .place:hover{border-color:color-mix(in srgb,var(--accent) 40%,transparent)} .p-ico{width:50px;height:50px;border-radius:15px;flex:none;display:grid;place-items:center;font-size:23px; color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent); border:1px solid color-mix(in srgb,var(--accent) 26%,transparent)} .p-body{flex:1;min-width:0} .p-name{margin:0 0 6px;font-size:15.5px;font-weight:700;letter-spacing:-.01em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .p-meta{display:flex;flex-wrap:wrap;gap:5px 12px;align-items:center;font-size:12.5px;color:var(--ink-2)} .p-dist{color:var(--accent);font-weight:700} .badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700} .badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor} .badge.open{color:#4ADE80} .badge.closed{color:#FB7185} /* Horaires absents de la source : dit clairement, jamais masqué. */ .badge.unknown{background:rgba(148,163,184,.14);color:#94A3B8;border-color:rgba(148,163,184,.28)} .p-go{flex:none;font-size:17px;color:var(--ink-3)} .p-go.on{color:var(--pink)} /* Rubriques défilantes */ .taxi-wider{display:flex;flex-direction:column;gap:10px;align-items:center;margin-top:18px} @media (min-width:520px){ .taxi-wider{flex-direction:row;justify-content:center} } /* Commander un trajet (catégorie Taxis) */ .vtc{margin:4px 0 18px;padding:18px;border-radius:var(--r-md); background:linear-gradient(150deg,rgba(245,165,36,.12),rgba(255,45,120,.06)); border:1px solid rgba(245,165,36,.26)} .vtc-head{display:flex;gap:13px;align-items:flex-start;margin-bottom:15px} .vtc-head svg{width:24px;height:24px;color:#F5A524;flex:none;margin-top:2px} .vtc-head h3{margin:0;font-size:15.5px;font-weight:700;letter-spacing:-.01em} .vtc-head p{margin:5px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-2)} .vtc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} .vtc-btn{padding:14px 12px;border-radius:14px;background:var(--card);border:1px solid var(--line); text-align:left;transition:transform .14s,border-color .2s} .vtc-btn:active{transform:scale(.97);border-color:#F5A524} .vtc-btn b{display:block;font-size:14.5px;font-weight:700} .vtc-btn small{display:block;font-size:11.5px;color:var(--ink-2);margin-top:3px} @media (min-width:700px){ .vtc-grid{grid-template-columns:repeat(4,1fr)} } /* Flèches de défilement horizontal (ordinateur uniquement). Elles sont masquées par défaut et révélées par JavaScript seulement lorsqu'il reste réellement du contenu hors écran. */ .rail-wrap{position:relative} .rail-arrow{ position:absolute;top:50%;transform:translateY(-50%);z-index:6; width:40px;height:40px;border-radius:50%;display:grid;place-items:center; background:rgba(12,23,48,.92);border:1px solid var(--line);color:var(--ink); box-shadow:0 8px 24px rgba(0,0,0,.45);backdrop-filter:blur(8px); transition:transform .15s,border-color .2s,opacity .2s; } .rail-arrow[hidden]{display:none} .rail-arrow:hover{border-color:var(--pink)} .rail-arrow:active{transform:translateY(-50%) scale(.94)} .rail-arrow svg{width:19px;height:19px} .rail-arrow.prev{left:-4px} .rail-arrow.prev svg{transform:rotate(180deg)} .rail-arrow.next{right:-4px} .rail.grabbing{cursor:grabbing;scroll-behavior:auto} @media (hover:hover) and (pointer:fine){ .rail{cursor:grab} } /* Sur mobile, jamais de flèches : le doigt suffit et l'écran est précieux. */ @media (max-width:600px){ .rail-arrow{display:none !important} } /* v10.30 : lignes desservant un arrêt, dans la fiche. Une pastille par ligne, la destination en second plan. Aucune couleur nouvelle. */ .lignes{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px} .lignes .ln{display:inline-flex;align-items:baseline;gap:7px;max-width:100%; padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.05); border:1px solid var(--line);font-size:13.5px} .lignes .ln b{font-weight:800;color:var(--accent,var(--pink));white-space:nowrap} .lignes .ln i{font-style:normal;color:var(--ink-2);font-size:12.5px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* v10.31 : les pastilles de ligne deviennent cliquables. Mêmes formes et mêmes couleurs qu'avant — seuls s'ajoutent un état pressé et un panneau dépliant. Aucune identité graphique nouvelle. */ .lignes .ln{cursor:pointer;text-align:left;font-family:inherit; transition:transform .14s ease, border-color .2s ease, background .2s ease} .lignes .ln:active{transform:scale(.96)} .lignes .ln[aria-expanded="true"]{background:rgba(255,45,120,.14); border-color:rgba(255,45,120,.46)} .ln-detail{margin-top:12px;padding:14px 15px;border-radius:14px; background:rgba(255,255,255,.04);border:1px solid var(--line);overflow:hidden} .ln-detail .lnd-tete{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .ln-detail .lnd-tete b{font-size:17px;font-weight:800;color:var(--accent,var(--pink))} .ln-detail .lnd-tete span{font-size:14px;color:var(--ink-2);overflow-wrap:anywhere} .ln-detail .lnd-vide{margin:9px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-3)} @media (max-width:600px){ .lignes .ln{min-height:42px;padding:9px 13px} .ln-detail{padding:13px 13px} } @media (prefers-reduced-motion:reduce){ .lignes .ln{transition:none} .lignes .ln:active{transform:none} } /* v10.32 : vue d'une ligne — retour, horaires, arrêts. Reprend strictement les codes existants : fond sombre, cartes, arrondis, accent de la marque. */ .lnd-barre{margin:-2px 0 10px} .lnd-retour{display:inline-flex;align-items:center;gap:7px;padding:9px 14px 9px 10px; min-height:42px;border-radius:999px;background:rgba(255,255,255,.05); border:1px solid var(--line);color:var(--ink);font-size:14px;font-weight:700; font-family:inherit;cursor:pointer;transition:transform .14s ease, background .2s ease} .lnd-retour svg{width:17px;height:17px} .lnd-retour:active{transform:scale(.96)} .lnd-dest{margin:6px 0 0;font-size:13px;color:var(--ink-3)} .lnd-titre{margin:16px 0 8px;font-size:12px;font-weight:800;letter-spacing:.12em; text-transform:uppercase;color:var(--ink-3)} .lnd-passages{display:flex;flex-direction:column;gap:7px} .lnd-p{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap; padding:11px 13px;border-radius:13px;background:rgba(255,255,255,.04); border:1px solid var(--line)} .lnd-p b{font-size:17px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums} .lnd-p .lnd-dans{font-size:14px;font-weight:700;color:var(--accent,var(--pink))} .lnd-p .lnd-src{margin-left:auto;font-size:11.5px;color:var(--ink-3);white-space:nowrap} /* Liste des arrêts : un trait vertical relie les pastilles, l'arrêt courant est mis en avant. */ .lnd-arrets{list-style:none;margin:0;padding:0} .lnd-arrets li{position:relative;display:flex;align-items:center;gap:11px; padding:8px 0 8px 3px;font-size:14.5px;color:var(--ink-2);min-width:0} .lnd-arrets li .pt{flex:none;width:11px;height:11px;border-radius:50%; background:var(--card);border:2px solid var(--line);z-index:1} .lnd-arrets li::before{content:"";position:absolute;left:8px;top:0;bottom:0; width:2px;background:var(--line)} .lnd-arrets li:first-child::before{top:50%} .lnd-arrets li:last-child::before{bottom:50%} .lnd-arrets li span:last-of-type{overflow-wrap:anywhere;min-width:0} .lnd-arrets li.ici{color:var(--ink);font-weight:700} .lnd-arrets li.ici .pt{background:var(--accent,var(--pink)); border-color:var(--accent,var(--pink));width:13px;height:13px} .lnd-arrets li.ici em{margin-left:auto;font-style:normal;font-size:11.5px; font-weight:700;color:var(--accent,var(--pink));white-space:nowrap} @media (max-width:600px){ .lnd-p b{font-size:16.5px} .lnd-arrets li{font-size:15px;padding:9px 0 9px 3px} } @media (prefers-reduced-motion:reduce){ .lnd-retour{transition:none} .lnd-retour:active{transform:none} } /* v10.33 : distinction temps réel / horaire prévu. Le temps réel prend l'accent vert « ouvert » déjà utilisé par l'application, l'horaire prévu reste discret. Aucune couleur nouvelle. */ .lnd-p .lnd-src.rt{color:#4ADE80;font-weight:700} .lnd-p .lnd-src.rt::before{content:"";display:inline-block;width:6px;height:6px; border-radius:50%;background:currentColor;margin-right:5px;vertical-align:middle} .lnd-p .lnd-retard{font-size:12.5px;font-weight:700;color:var(--ink-2)} .lnd-p.annule{opacity:.75} .lnd-p.annule .lnd-dans{color:#FB7185} /* v10.29 : information utile propre à la catégorie (ligne de tram, mode de réservation…). Discrète, jamais mise en avant plus que la distance. */ .p-info{color:var(--ink-2);font-weight:600;overflow:hidden;text-overflow:ellipsis; white-space:nowrap;max-width:100%} /* ── v10.27 : identité du créateur ──────────────────────────────────────── Une signature sobre, dans les couleurs du thème : aucune police externe, aucun effet, rien qui gêne la navigation. */ .apropos{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md); padding:22px 20px;display:flex;flex-direction:column;gap:9px;overflow:hidden} .apropos .ap-nom{margin:0;font-size:18.5px;font-weight:800;letter-spacing:-.02em; color:var(--ink);overflow-wrap:anywhere} .apropos .ap-txt{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-2);max-width:48ch} .apropos .ap-sig{margin:6px 0 0;padding-top:13px;border-top:1px solid var(--line); font-size:14px;color:var(--ink-3);display:flex;align-items:baseline;gap:7px;flex-wrap:wrap} /* La signature : légèrement distinctive par la GRAISSE, l'italique et un dégradé rose→violet de la marque — pas par une police fantaisie. Elle reste parfaitement lisible, et retombe sur une couleur pleine si le dégradé sur texte n'est pas supporté. */ .signature{font-style:italic;font-weight:800;font-size:16.5px;letter-spacing:.01em; color:var(--pink); background:linear-gradient(95deg,var(--pink) 0%,#E83ED6 55%,#8B5CF6 100%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; white-space:nowrap} @supports not ((-webkit-background-clip:text) or (background-clip:text)){ .signature{background:none;-webkit-text-fill-color:currentColor;color:var(--pink)} } /* Rappel très discret en pied d'application, sous les mentions techniques. Purement décoratif : jamais cliquable, jamais superposé à la navigation. */ .about .sig-pied{display:block;margin-top:10px;font-size:12.5px;color:var(--ink-3)} .about .sig-pied .signature{font-size:14px} @media (max-width:600px){ .apropos{padding:20px 17px} .apropos .ap-nom{font-size:17.5px} .apropos .ap-txt{font-size:15px} .signature{font-size:16px} } /* ── v10.26 : lisibilité des libellés ───────────────────────────────────── Aucun nom ne doit sortir de sa vignette ni de sa carte, sur aucun écran. */ /* Vignettes de catégorie : nom sur deux lignes au maximum, jamais coupé. */ .cat .c-lbl{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;text-align:center;line-height:1.25; overflow-wrap:anywhere;hyphens:auto;max-width:100%} /* Cartes de lieu : les noms longs (écoles, complexes sportifs…) tenaient sur une seule ligne et débordaient. Ils passent à la ligne proprement. */ /* CAUSE du texte encore coupé : la règle d'origine `.p-name` pose `white-space:nowrap`. Sans la neutraliser ici, le texte NE PEUT PAS revenir à la ligne et le clamp sur deux lignes n'a jamais pu s'appliquer — il restait une seule ligne tronquée par l'ellipse. */ .place .p-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; white-space:normal;overflow:hidden;overflow-wrap:anywhere;word-break:break-word; line-height:1.3;text-overflow:clip} .place .p-body{min-width:0} .place .p-meta{min-width:0;flex-wrap:wrap} .place .p-meta > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%} /* Fiche : le titre peut être long, il ne sort jamais du panneau. */ .sh-name{overflow-wrap:anywhere;hyphens:auto} /* Mobile : la carte doit pouvoir se contracter. `.p-ico` est en `flex:none`, `.p-body` prend le reste — encore faut-il que la carte elle-même ne dépasse pas la largeur de l'écran, et que rien ne heurte la flèche de droite. */ @media (max-width:600px){ .place{padding:13px 13px;gap:11px;max-width:100%;overflow:hidden} .place .p-ico{width:44px;height:44px;border-radius:13px} .place .p-body{flex:1 1 auto;min-width:0;max-width:100%} .place .p-name{font-size:15px;-webkit-line-clamp:3;line-height:1.28} .place .p-meta{font-size:12px;row-gap:3px} .place .p-meta > span{max-width:100%} } @media (max-width:380px){ .place .p-name{font-size:14.5px} .place .p-ico{width:40px;height:40px} } @media (max-width:600px){ .cats{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:11px} .cat{padding:18px 8px 14px} .cat .c-lbl{font-size:12px} } @media (min-width:601px) and (max-width:1024px){ .cats{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))} } /* ── v10.25 : expérience générale ───────────────────────────────────────── Accueil, favoris et finitions. Aucune couleur ni police nouvelle : les variables du thème nuit sont réutilisées telles quelles. */ /* Familles de catégories : des respirations dans la grille des 39, au lieu d'un mur de vignettes. Aucune catégorie n'est retirée. */ .fam-title{margin:22px 0 10px;font-size:12px;font-weight:800;letter-spacing:.14em; text-transform:uppercase;color:var(--ink-3)} .fam-title:first-of-type{margin-top:8px} /* Le bouton « Tout voir » annonce combien de catégories il déplie. */ .cat--more{position:relative} .cat--more .c-cnt{position:absolute;top:9px;right:11px;min-width:22px;height:22px; display:inline-flex;align-items:center;justify-content:center;padding:0 6px; border-radius:999px;background:rgba(139,92,246,.22);border:1px solid rgba(139,92,246,.5); font-size:11px;font-weight:800;color:#C9B6FF} /* Retour tactile homogène sur tout ce qui se touche. */ .cat,.chip,.qa,.place,.rp-go,.tab{transition:transform .14s ease, background .2s ease, border-color .2s ease} .cat:active,.qa:active,.place:active,.chip:active{transform:scale(.97)} .tab:active{transform:scale(.94)} /* Page Favoris : en-tête lisible quand la liste s'allonge. */ .rhead{display:flex;align-items:center;gap:12px;margin-bottom:6px} .rhead .cnt{min-width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center; padding:0 9px;border-radius:999px;background:rgba(255,45,120,.16); border:1px solid rgba(255,45,120,.42);font-size:13px;font-weight:800;color:#FFA7C4} /* États vides : centrés, lisibles, jamais un écran nu. */ .state{display:flex;flex-direction:column;align-items:center;text-align:center; padding:52px 26px;gap:12px} .state .s-ico{display:inline-flex;align-items:center;justify-content:center; width:64px;height:64px;border-radius:22px;background:rgba(255,255,255,.05); border:1px solid var(--line)} .state .s-ico svg{width:26px;height:26px;color:var(--ink-3)} .state h3{margin:2px 0 0;font-size:19px;font-weight:800} .state p{margin:0;max-width:34ch;font-size:14.5px;line-height:1.55;color:var(--ink-2)} @media (max-width:600px){ .fam-title{margin:20px 0 9px;font-size:12.5px} .state{padding:44px 20px} .state p{font-size:15px} } /* Le réglage système « réduire les animations » désactive TOUT mouvement ajouté ici ; les informations restent identiques. */ @media (prefers-reduced-motion:reduce){ .cat,.chip,.qa,.place,.rp-go,.tab{transition:none} .cat:active,.qa:active,.place:active,.chip:active,.tab:active{transform:none} } /* ── v10.24 : fiche d'un lieu, présentation ──────────────────────────────── Amélioration de la HIÉRARCHIE et du confort tactile. Aucune couleur, police ni forme nouvelle : on réutilise les variables du thème nuit existant. */ /* Statut ouvert/fermé : la première chose que l'œil doit trouver. */ .sh-statut{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap; margin:8px 0 2px;padding:9px 14px;border-radius:14px;width:fit-content;max-width:100%} .sh-statut .st-mot{font-size:13.5px;font-weight:800;letter-spacing:.06em} .sh-statut .st-quand{font-size:13.5px;color:var(--ink-2)} .sh-statut.open{background:rgba(34,197,94,.14);border:1px solid rgba(34,197,94,.42)} .sh-statut.open .st-mot{color:#8BF0B4} .sh-statut.closed{background:rgba(248,113,113,.13);border:1px solid rgba(248,113,113,.40)} .sh-statut.closed .st-mot{color:#FCA5A5} /* Catégorie et distance sur une seule ligne, sous le statut. */ .sh-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:8px 0 4px} .sh-meta .sh-cat{display:inline-flex;align-items:center;gap:7px; font-size:13.5px;color:var(--ink-2);font-weight:600} .sh-meta .sh-cat svg{width:16px;height:16px;color:var(--accent,var(--pink))} .sh-meta .sh-dist{font-size:14px;font-weight:700;color:var(--ink)} /* Horaires : une ligne par jour, le jour courant mis en avant. */ .hrs{display:flex;flex-direction:column;gap:2px;margin-top:6px} .hr-l{display:flex;justify-content:space-between;gap:14px; padding:5px 0;font-size:14.5px;color:var(--ink-2)} .hr-l .hr-j{white-space:nowrap} .hr-l .hr-p{text-align:right} .hr-today{color:var(--ink);font-weight:700} .hr-today .hr-j{color:var(--accent,var(--pink))} .hrs-none{font-size:14px;color:var(--ink-3)} /* Actions : la principale se distingue, toutes restent atteignables au doigt. */ .acts .act{min-height:64px;transition:transform .14s ease, background .2s ease} .acts .act.primary{background:rgba(255,45,120,.14);border-color:rgba(255,45,120,.46)} .acts .act.primary .a-ico{color:var(--pink)} .acts .act:active{transform:scale(.96)} .acts .act.fav .a-ico{color:var(--pink)} /* Retour visuel discret quand un lieu passe en favori. */ @keyframes tpcm-pulse{0%{transform:scale(1)}45%{transform:scale(1.18)}100%{transform:scale(1)}} .acts .act.fav .a-ico{animation:tpcm-pulse .32s ease} /* Confirmation de partage : une pastille qui s'efface d'elle-même. */ .sh-toast{position:fixed;left:50%;bottom:calc(var(--tabbar) + 28px);transform:translateX(-50%); z-index:1500;background:var(--card);border:1px solid var(--line);border-radius:999px; padding:10px 18px;font-size:13.5px;color:var(--ink);box-shadow:0 12px 32px rgba(0,0,0,.5); animation:tpcm-toast 2.2s ease forwards;pointer-events:none} @keyframes tpcm-toast{0%{opacity:0;transform:translate(-50%,8px)}12%{opacity:1;transform:translate(-50%,0)} 80%{opacity:1}100%{opacity:0;transform:translate(-50%,-4px)}} @media (max-width:600px){ .sh-statut{padding:10px 15px} .sh-statut .st-mot,.sh-statut .st-quand{font-size:14px} .hr-l{font-size:15px;padding:6px 0} .acts .act{min-height:68px} } /* Le système « réduire les animations » est respecté : plus aucun mouvement, les informations restent identiques. */ @media (prefers-reduced-motion:reduce){ .acts .act,.acts .act.fav .a-ico,.sh-toast{animation:none;transition:none} .acts .act:active{transform:none} } /* Panneau des recherches récentes. CAUSE du bug : `.hero` porte `overflow:hidden` (indispensable pour ses coins arrondis et le paysage qui déborde). Le panneau, placé À L'INTÉRIEUR du bandeau, était donc DÉCOUPÉ par lui — aucun z-index ne pouvait l'en sortir. Solution : `position:fixed`, qui échappe à l'overflow de tout ancêtre. Vérifié qu'aucun ancêtre n'a transform / filter / will-change, seules propriétés qui piégeraient un élément fixed. Sa position est calculée en JavaScript d'après la barre de recherche, donc l'alignement reste exact. */ .searchbar{position:relative} .recents-pop{position:fixed;z-index:1300; /* au-dessus de la tabbar (1200) */ background:var(--card);border:1px solid var(--line);border-radius:18px; box-shadow:0 22px 60px rgba(0,0,0,.62);padding:8px; display:flex;flex-direction:column; max-height:min(56vh,420px);overflow:hidden} .recents-pop[hidden]{display:none} .rp-head{display:flex;align-items:center;justify-content:space-between;flex:none; padding:8px 10px 10px;font-size:12.5px;color:var(--ink-3);font-weight:600} .rp-clear{background:none;border:0;color:var(--pink);font-size:12.5px;font-weight:600; padding:6px 8px;border-radius:10px;cursor:pointer;white-space:nowrap} .rp-clear:hover{background:rgba(255,61,128,.12)} /* Seule la LISTE défile : l'en-tête et « Effacer l'historique » restent visibles. */ .rp-list{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch; margin:0 -2px;padding:0 2px} .rp-row{display:flex;align-items:center;gap:4px} .rp-go{flex:1;display:flex;align-items:center;gap:10px;min-height:46px; padding:10px 12px;background:none;border:0;border-radius:12px; color:var(--ink);font-size:15px;text-align:left;cursor:pointer; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rp-go svg{width:17px;height:17px;color:var(--ink-3);flex:none} .rp-go span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rp-go:hover{background:rgba(255,255,255,.06)} .rp-del{width:40px;height:40px;flex:none;background:none;border:0;border-radius:12px; color:var(--ink-3);font-size:15px;cursor:pointer} .rp-del:hover{background:rgba(255,61,128,.14);color:var(--pink)} /* Voile transparent : un clic n'importe où ailleurs referme le panneau. */ .rp-scrim{position:fixed;inset:0;z-index:1299;background:transparent} .rp-scrim[hidden]{display:none} @media (max-width:600px){ .recents-pop{max-height:min(48vh,360px)} .rp-go{font-size:15.5px;min-height:48px} .rp-del{width:44px;height:44px} } /* Recherches récentes */ .rail-clear{font-size:12.5px;color:var(--ink-2);padding:4px 8px;border-radius:8px} .rail-clear:active{opacity:.6} .rail-tags{padding-top:0} .tag{flex:none;display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border-radius:999px; background:var(--card);border:1px solid var(--line);color:var(--ink);font-size:13.5px;font-weight:600; white-space:nowrap;max-width:78vw;transition:transform .14s,border-color .2s} .tag svg{width:15px;height:15px;color:var(--pink);flex:none} .tag span{overflow:hidden;text-overflow:ellipsis} .tag:active{transform:scale(.96);border-color:var(--pink)} .rail-head{display:flex;align-items:baseline;justify-content:space-between;margin:30px 0 14px} .rail-head h3{margin:0;font-size:18px;font-weight:700;letter-spacing:-.01em} .rail{display:flex;gap:13px;overflow-x:auto;padding:2px 18px 6px;margin:0 -18px; /* Le geste reste dans la rubrique : il ne se propage pas à la page. */ overscroll-behavior-x:contain;overscroll-behavior-y:auto;touch-action:pan-x;max-width:100vw; scroll-snap-type:x proximity;scrollbar-width:none} .rail::-webkit-scrollbar{display:none} .mini{flex:none;width:186px;scroll-snap-align:start;padding:16px;border-radius:var(--r-md); background:linear-gradient(165deg,color-mix(in srgb,var(--accent) 12%,var(--card)),var(--card) 66%); border:1px solid var(--line);text-align:left;display:flex;flex-direction:column; position:relative;overflow:hidden;transition:transform .15s;animation:rise .42s cubic-bezier(.2,.8,.25,1) both} .mini::before{content:"";position:absolute;left:0;right:0;top:0;height:2.5px;background:var(--accent); box-shadow:0 0 14px 1px var(--accent)} .mini:active{transform:scale(.965)} .m-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px} .m-ico{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;font-size:20px;color:var(--accent); background:color-mix(in srgb,var(--accent) 15%,transparent)} .m-dot{width:8px;height:8px;border-radius:50%;background:#FB7185} .m-dot.open{background:#4ADE80;box-shadow:0 0 0 4px rgba(74,222,128,.18)} .m-name{font-size:13.5px;font-weight:700;line-height:1.3; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em} .m-meta{margin-top:9px;font-size:11.5px;font-weight:700;color:var(--accent);display:flex;gap:8px;align-items:center} .m-cat{color:var(--ink-3);font-weight:500} /* Squelettes */ .skel{padding:15px 16px;border-radius:var(--r-md);background:var(--card);border:1px solid var(--line); display:flex;gap:14px;align-items:center;animation:rise .4s ease both} .sk{background:linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(255,255,255,.11) 50%,rgba(255,255,255,.05) 75%); background-size:200% 100%;animation:sheen 1.3s linear infinite;border-radius:8px} .sk.ico{width:50px;height:50px;border-radius:15px;flex:none} .sk.l1{height:12px;width:64%;margin-bottom:9px} .sk.l2{height:10px;width:40%} .skel-mini{flex:none;width:186px;flex-direction:column;align-items:stretch;min-height:132px} @keyframes sheen{to{background-position:-200% 0}} /* États */ .state{padding:64px 26px;text-align:center;color:var(--ink-2);max-width:520px;margin:0 auto} .state .s-ico{font-size:34px;color:var(--pink);display:inline-grid;margin-bottom:16px; filter:drop-shadow(0 6px 20px rgba(255,61,128,.45))} .state h3{margin:0 0 10px;font-size:20px;font-weight:800;color:var(--ink);letter-spacing:-.02em} .state p{margin:0 0 20px;font-size:14.5px;line-height:1.55} .btn{display:inline-flex;align-items:center;gap:9px;padding:14px 24px;border-radius:999px;font-weight:700;font-size:15px; background:linear-gradient(96deg,var(--pink),#FF5C9B);color:#fff;box-shadow:var(--glow-pink);transition:transform .14s} .btn:active{transform:scale(.97)} .btn.ghost{background:rgba(255,255,255,.06);border:1px solid var(--line-2);color:var(--ink);box-shadow:none} .btn.block{display:flex;width:100%;justify-content:center} .spin{width:30px;height:30px;border:2.5px solid rgba(255,255,255,.12);border-top-color:var(--pink); border-radius:50%;margin:0 auto 18px;animation:rot .8s linear infinite} @keyframes rot{to{transform:rotate(360deg)}} .field{width:100%;padding:15px 18px;border-radius:16px;border:1px solid var(--line-2); background:rgba(255,255,255,.05);color:var(--ink);font-size:15.5px;outline:none} .field:focus{border-color:rgba(255,61,128,.5)} .field::placeholder{color:var(--ink-3)} /* ============================== CARTE ============================== */ /* Leaflet applique z-index:400 à ses panneaux et 1000 à ses contrôles. Sans contexte d'empilement propre, ils passaient AU-DESSUS de la barre d'onglets (120) et de l'en-tête (20) : plus aucun bouton n'était cliquable, l'utilisateur était prisonnier de la carte. `isolation:isolate` enferme tout ce que dessine Leaflet sous la navigation, quelles que soient ses valeurs internes. */ #view-map{height:100%;position:relative;z-index:0;isolation:isolate} #map{width:100%;height:100%;background:#08102A} .leaflet-container{font-family:var(--font);background:#08102A} .leaflet-tile{filter:brightness(.72) saturate(1.15) hue-rotate(185deg) contrast(1.05)} .mk{width:34px;height:34px;border-radius:50% 50% 50% 4px;transform:rotate(45deg); background:var(--accent,#FF3D80);border:2px solid rgba(255,255,255,.85); box-shadow:0 4px 16px rgba(0,0,0,.55);display:grid;place-items:center} .mk span{transform:rotate(-45deg);font-size:15px} .mk.me{background:linear-gradient(140deg,var(--pink),var(--violet));border-radius:50%;transform:none} .mk.me span{transform:none} /* ============================== FICHE ============================== */ /* La barre du bas est à z-index 1200 depuis la v7.7 (elle devait passer au-dessus de Leaflet). La fiche, restée à 200, se faisait donc recouvrir sur toute sa partie basse : boutons et dernières lignes inatteignables. Elle monte à 1400 — au-dessus de la barre, sous rien d'autre. */ #sheet{position:fixed;inset:0;z-index:1400;display:none} #sheet.on{display:block} .scrim{position:absolute;inset:0;background:rgba(2,7,20,.72);backdrop-filter:blur(3px);opacity:0;transition:opacity .28s} #sheet.in .scrim{opacity:1} .panel{position:absolute;left:0;right:0;bottom:0;max-height:min(94%,100dvh - 24px);background:var(--card); border:1px solid var(--line-2);border-bottom:0;border-radius:26px 26px 0 0; display:flex;flex-direction:column;transform:translateY(100%); transition:transform .32s cubic-bezier(.2,.8,.25,1);box-shadow:0 -20px 60px rgba(0,0,0,.55)} #sheet.in .panel{transform:none} .grab{width:42px;height:4px;border-radius:2px;background:var(--line-2);margin:11px auto 2px;flex:none} /* Réserve sous le dernier élément : hauteur de la barre du bas + encoche + respiration. Sans elle, la fin de la fiche restait sous la navigation. */ .panel-scroll{overflow-y:auto;overscroll-behavior:contain; padding:16px 22px calc(var(--tabbar) + var(--safe-bot) + 32px); -webkit-overflow-scrolling:touch} .sh-photo{width:100%;height:180px;object-fit:cover;border-radius:18px;margin-bottom:16px} .sh-cat{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--accent)} .sh-name{margin:10px 0 13px;font-size:27px;font-weight:800;line-height:1.2;letter-spacing:-.025em} .sh-meta{display:flex;flex-wrap:wrap;gap:7px 16px;font-size:13.5px;color:var(--ink-2);margin-bottom:20px} .acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(76px,1fr));gap:10px;margin-bottom:20px} .act{padding:16px 6px;border-radius:16px;text-align:center;font-size:12.5px;min-height:64px;font-weight:600;color:var(--ink-2); background:rgba(255,255,255,.05);border:1px solid var(--line);transition:.18s} .act .a-ico{display:grid;place-items:center;font-size:21px;margin-bottom:6px} .act.primary{background:linear-gradient(96deg,var(--pink),#FF5C9B);color:#fff;border-color:transparent;box-shadow:var(--glow-pink)} .act.fav{background:linear-gradient(120deg,rgba(255,61,128,.24),rgba(168,85,247,.18));color:var(--pink);border-color:rgba(255,61,128,.34)} .irow{display:flex;gap:15px;padding:17px 0;border-top:1px solid var(--line);font-size:16px;line-height:1.5} .irow .i-ico{font-size:19px;color:var(--ink-3);flex:none} .irow .i-val{flex:1;word-break:break-word} .hrs{font-size:14.5px;line-height:1.6;color:var(--ink-2);white-space:pre-line;margin-top:8px} .src{margin-top:22px;font-size:11.5px;color:var(--ink-3);line-height:1.65} /* ============================= RÉGLAGES ============================= */ .rows{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden} .row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 18px; border-bottom:1px solid var(--line);font-size:15px} .row:last-child{border-bottom:0} .row .sub{font-size:12.5px;color:var(--ink-2);margin-top:4px;line-height:1.5} .row select{background:rgba(255,255,255,.06);border:1px solid var(--line-2);border-radius:12px; padding:9px 12px;font-size:14px;outline:none} .row select option{background:#0C1730;color:#F3F6FF} .label{margin:30px 0 14px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)} .about{padding:22px 4px 0;font-size:11.5px;color:var(--ink-3);line-height:1.8} .foot-note{padding:34px 0 10px;text-align:center;font-size:11.5px;color:var(--ink-3);line-height:1.7} /* ============================== ONGLETS ============================== */ .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:1200;max-width:100%;touch-action:none;height:var(--tabbar);padding-bottom:var(--safe-bot); background:rgba(6,14,38,.86);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr)} [data-theme="light"] .tabbar{background:rgba(255,255,255,.9)} .tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px; color:var(--ink-3);font-size:11px;font-weight:600;transition:color .2s} .tab .t-ico{font-size:22px;transition:transform .2s cubic-bezier(.2,.8,.25,1)} .tab.on{color:var(--pink)} .tab.on .t-ico{transform:translateY(-2px);filter:drop-shadow(0 4px 14px rgba(255,61,128,.6))} /* ============================= RESPONSIVE ============================= */ @media (max-width:1180px){ .cats{grid-template-columns:repeat(4,1fr)} .cols{grid-template-columns:1fr;gap:18px} .promo{min-height:auto} .promo-art{width:150px;opacity:.8} } @media (max-width:860px){ .quick{grid-template-columns:1fr 1fr} .cats{grid-template-columns:repeat(3,1fr)} .weather{position:static;margin-top:20px;width:100%;min-width:0} .hero-inner{flex-direction:column;padding-top:26px} .hero-city{width:100%;opacity:.5;-webkit-mask-image:linear-gradient(180deg,transparent,#000 60%);mask-image:linear-gradient(180deg,transparent,#000 60%)} .hero-veil{background:linear-gradient(180deg,rgba(5,14,39,.55) 0%,rgba(5,14,39,.8) 55%,var(--bg) 100%)} .list{grid-template-columns:1fr} } @media (max-width:560px){ .wrap{padding:0 15px} .hero-inner{padding:22px 15px 20px} .hero-q{font-size:31px} .brand-txt{display:none} .brand{padding-right:0;border-right:0} .city-pill{padding:9px 13px;font-size:11.5px;max-width:150px} .tb-icon{width:38px;height:38px;font-size:17px} .searchbar{padding:5px 5px 5px 16px;border-radius:20px} .searchbar input{padding:12px 10px;font-size:15px} .btn-go{padding:12px 16px;font-size:13.5px} .btn-go .txt{display:none} .cats{grid-template-columns:repeat(3,1fr);gap:11px} .cat{padding:17px 6px 13px;border-radius:16px} .cat .c-ico{font-size:24px} .cat .c-lbl{font-size:11.5px} .quick{gap:11px} .qa{padding:16px 15px;border-radius:16px} .qa b{font-size:15px} .qa .qa-badge{width:44px;height:44px;font-size:18px} .sec-title,.rail-head h3{font-size:17px} .promo{padding:24px 22px} .promo h3{font-size:23px} .promo-art{width:118px;right:6px;bottom:6px;opacity:.55} .mini{width:162px} } @media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms !important;transition-duration:.01ms !important} /* Exception : pour le splash, une coupure nette serait plus agressive qu'un fondu. On garde donc un fondu doux, sans aucun mouvement. */ #splash{transition-duration:.45s !important} .sp-glow,.sp-mark,.sp-title,.sp-sub,.sp-bar,.sp-step,.sp-pct{ animation-name:spFade !important;animation-duration:.45s !important; animation-fill-mode:both !important;transform:none !important; } } :focus-visible{outline:2px solid var(--pink);outline-offset:3px} /* ========================================================================= GARANTIE DE MOUVEMENT DU PIN Placée en toute fin de feuille, après la règle générale `*{animation-duration:.01ms !important}` du mode « mouvement réduit ». Ainsi le pin bouge quels que soient l'ordre des règles et les réglages d'accessibilité du système, comme demandé explicitement. ========================================================================= */ #splash .pin-svg{ animation:pinVol 1.8s ease-in-out 0s infinite !important; animation-duration:1.8s !important; animation-play-state:running !important; transform-origin:50% 82% !important; } #splash .pin-halo{ animation:pinSouffle 1.8s ease-in-out 0s infinite !important; animation-duration:1.8s !important; animation-play-state:running !important; } #splash .sp-waves span,#splash .sp-waves .wave{ animation:spOnde 1.8s ease-out infinite !important; animation-duration:1.8s !important; animation-play-state:running !important; } #splash .sp-waves span:nth-child(2){animation-delay:.45s !important} #splash .sp-waves span:nth-child(3){animation-delay:.9s !important} #splash .sp-waves span:nth-child(4){animation-delay:1.35s !important} /* ========================================================================= MOBILE — ÉCRAN DE DÉMARRAGE Sur téléphone, l'écran était centré verticalement : le pin, son halo (190 px de diamètre, débordant vers le haut) et les 20 px de son flottement sortaient par le haut et se faisaient couper. On repasse en alignement haut, avec une réserve calculée au-dessus du pin : halo + amplitude du vol + barre système. ========================================================================= */ @media (max-width:600px){ /* TOUT DOIT TENIR DANS L'ÉCRAN. Le splash était défilable pour atteindre la barre de progression, plus bas que le viewport. Ce défilement est désormais impossible : l'écran est verrouillé pendant le chargement. On répartit donc le contenu sur la hauteur disponible plutôt que de le laisser déborder — la barre et son pourcentage restent ainsi visibles du début à la fin. */ #splash{ justify-content:space-between; overflow:hidden; padding-top:calc(env(safe-area-inset-top,0px) + 10px); padding-bottom:calc(env(safe-area-inset-bottom,0px) + 14px); } /* Réserve au-dessus du pin : 96 px = 52 (halo au-dessus du pin) + 20 (montée de l'animation) + 24 (marge de confort). */ /* Réserve au-dessus du pin, resserrée : 68 px suffisent au halo et à la montée de l'animation quand l'écran ne peut plus défiler. */ /* COMPACTAGE RÉEL DU HAUT. La capture iPhone (932 px de haut) montrait la carte de progression commencer tout en bas : le masquage de la scène était conditionné à une hauteur ≤ 720 px, il ne s'appliquait donc jamais sur les grands modèles. Sur TOUT mobile, la scène décorative cède la place, et l'animation du pin est nettement resserrée. La barre reste la priorité. */ .sp-stage{margin-top:0;padding-top:28px} .sp-scene{display:none} .sp-title{margin-top:6px;font-size:clamp(26px,7.6vw,36px)} .sp-rule{margin:8px 0 0} .sp-sub{margin-top:6px;font-size:14px} .sp-steps{margin-top:10px} .sp-foot{margin-top:10px} .sp-pin{width:64px;height:86px} .pin-halo{width:120px;height:120px;margin:-60px 0 0 -60px} .sp-waves{height:44px} .sp-sound{top:calc(env(safe-area-inset-top,0px) + 12px);right:12px;padding:9px 14px;font-size:13px} } /* Écrans courts : on resserre encore, et la SCÈNE décorative — la petite ville en fond — cède la place. C'est le seul élément purement ornemental ; titre, étapes, barre et pourcentage restent tous visibles. */ /* Écrans courts : on resserre ENCORE, sans jamais remonter les valeurs du bloc mobile ci-dessus — c'est ce qu'il faisait, et le compactage était annulé sur les grands iPhone comme sur les petits. */ @media (max-width:600px) and (max-height:720px){ .sp-stage{padding-top:18px} .sp-title{margin-top:4px;font-size:clamp(24px,7vw,32px)} .sp-rule{margin:6px 0 0} .sp-sub{margin-top:4px} .sp-steps{margin-top:6px} .sp-card{margin-top:6px} .sp-foot{display:none} } /* Très petits écrans (iPhone SE) : le pied de page décoratif disparaît à son tour, la barre reste la priorité. */ @media (max-width:600px) and (max-height:620px){ .sp-stage{padding-top:10px} .sp-sub{display:none} .sp-foot{display:none} .sp-card{margin-top:4px} }