/* ============================================================= pc5/css/pc5.css — maquette « shh.video » Repris du dessin fourni : sombre mais chaleureux, rose pastel, titres manuscrits, washi tape, post-it kraft, chats noirs aux yeux roses. Trois colonnes en grand écran, empilées en petit. Tout est local : aucune police distante, aucune image distante. L'écriture manuscrite s'appuie sur les polices déjà installées (Ink Free sur Windows, Bradley Hand sur macOS) avec repli sur une cursive générique — jamais de téléchargement. ============================================================= */ /* ------------------------------------------------------------- 1. Jetons ------------------------------------------------------------- */ :root { --bg: #0b0910; --pan: #16121c; --pan-2: #1b1622; --carte: #191420; --line: rgba(255,255,255,.065); --line-2: rgba(255,255,255,.12); --ink: #ece6f2; /* Remontés le 2026-08-25 : --faint plafonnait à 3:1 de contraste. */ --dim: #a8a0b4; --faint: #837a94; --rose: #e0739f; --rose-2: #c4507f; --rose-3: #f4a6c8; --rose-b: rgba(224,115,159,.14); --kraft: #d8c8a4; --kraft-i: #4a4033; --tape: rgba(216,166,200,.72); --r: 14px; --r-lg: 20px; --side: 220px; --rail: 336px; --gap: 22px; --pad: clamp(14px, 2vw, 24px); --hand: "Ink Free", "Segoe Script", "Bradley Hand", "Chalkboard SE", "Comic Sans MS", cursive; /* Zen Maru Gothic (webfont) : gothique ARRONDI — l'identité bonbon, pour le latin comme pour le japonais. Quicksand : les CHIFFRES ronds (soldes, prix, packs), à la place du mono sec. */ --ui: "Zen Maru Gothic", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; --num: "Quicksand", "Zen Maru Gothic", "Segoe UI", sans-serif; --hand-lh: 1.2; --lh: 1.65; } /* Les polices manuscrites latines (Ink Free, Bradley Hand…) n'ont AUCUN glyphe japonais ni chinois : sans ces piles, tous les titres des trois autres langues retomberaient sur une police système quelconque. On choisit à la place les fontes rondes/manuscrites déjà installées, qui gardent le ton du dessin. Toujours rien à télécharger. */ html:lang(ja) { --hand: "Zen Maru Gothic", "UD Digi Kyokasho N-R", "Hiragino Maru Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif; --ui: "Zen Maru Gothic", "Yu Gothic UI", "Hiragino Sans", Meiryo, system-ui, sans-serif; --hand-lh: 1.45; --lh: 1.8; } /* Typographie japonaise soignée : espacement proportionnel (palt) + un léger tracking — la combinaison classique du web japonais. */ html:lang(ja) body { font-feature-settings: "palt"; letter-spacing: .03em; } html:lang(zh-TW) { --hand: "Hiragino Maru Gothic ProN", "Microsoft JhengHei UI", "PingFang TC", "Microsoft JhengHei", sans-serif; --ui: "Microsoft JhengHei UI", "PingFang TC", system-ui, sans-serif; --hand-lh: 1.5; --lh: 1.8; } html:lang(zh-CN) { --hand: "Hiragino Maru Gothic ProN", "Microsoft YaHei UI", "PingFang SC", "Microsoft YaHei", sans-serif; --ui: "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif; --hand-lh: 1.5; --lh: 1.8; } html:lang(zh-TW) body, html:lang(zh-CN) body { letter-spacing: .02em; } /* ------------------------------------------------------------- 2. Base ------------------------------------------------------------- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; background: var(--bg); } body { margin: 0; /* Fond porté par (2026-08-27) : le body reste transparent pour laisser voir la neige de bonbons (.neige, fixed z-index -1) dans toutes les zones que le contenu ne recouvre pas. */ background: transparent; color: var(--ink); font: 400 15px/var(--lh) var(--ui); overflow-x: hidden; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } h1, h2 { margin: 0; font-weight: 600; } p { margin: 0 0 .8em; } ul { margin: 0; padding: 0; list-style: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } :focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; border-radius: 8px; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .art, .ic { display: block; flex: none; } /* Ruban adhésif : un rectangle rose translucide à pois, posé de travers. Deux exemplaires suffisent à donner le ton « collé ». */ .tape { position: absolute; width: 76px; height: 20px; background: radial-gradient(circle at 6px 6px, rgba(255,255,255,.42) 1.6px, transparent 1.7px) 0 0/13px 11px, var(--tape); opacity: .85; box-shadow: 0 1px 4px rgba(0,0,0,.3); } /* Punaise des post-it */ .pin { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 35% 32%, #ffb3d1, var(--rose-2)); box-shadow: 0 2px 5px rgba(0,0,0,.45); } /* Boutons */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px; font-size: 14px; font-weight: 600; transition: transform .2s, box-shadow .2s, background .2s, border-color .2s; } .btn-rose { background: var(--rose-2); color: #fff; box-shadow: 0 6px 18px -8px rgba(196,80,127,.9); } .btn-rose:hover { background: #d35e8f; transform: translateY(-1px); } .btn-doux { background: rgba(255,255,255,.05); color: var(--dim); border: 1px solid var(--line-2); } .btn-doux:hover { color: var(--ink); border-color: var(--rose); } /* Gribouillis posés à côté des titres */ .doodle { display: inline-flex; gap: 3px; align-items: center; color: var(--rose); opacity: .8; vertical-align: 2px; } .doodle .art { display: inline-block; } .badge { display: inline-block; padding: 3px 8px; border-radius: 6px; background: var(--rose-2); color: #fff; font-size: 9.5px; font-weight: 700; letter-spacing: .05em; font-style: normal; } /* ------------------------------------------------------------- 3. Coque et grille ------------------------------------------------------------- */ .app { max-width: 1560px; margin: 0 auto; padding: 16px var(--pad) 0; } /* minmax(0,1fr) et non 1fr : sans cela une colonne de grille prend la largeur intrinsèque de son contenu, et les pistes horizontales poussent toute la page hors de l'écran en petite largeur. */ .grid { display: grid; gap: var(--gap); align-items: start; grid-template-columns: minmax(0, 1fr); } .grid > * { min-width: 0; } /* ------------------------------------------------------------- 4. Barre du haut ------------------------------------------------------------- */ .top { display: grid; gap: var(--gap); align-items: center; margin-bottom: 16px; grid-template-columns: minmax(0, 1fr); } .top > * { min-width: 0; } .logo { position: relative; display: flex; align-items: flex-end; gap: 2px; } .logo-box { position: relative; padding: 8px 20px 10px; border: 1.6px solid #6d5a4a; border-radius: 4px; background: rgba(255,255,255,.02); transform: rotate(-1.4deg); } .logo-box .tape-a { width: 26px; height: 13px; top: -6px; left: -8px; transform: rotate(-38deg); } .logo-box .tape-b { width: 26px; height: 13px; bottom: -6px; right: -8px; transform: rotate(-38deg); } /* « ichigocandy » est plus long que « shh... » (rebrand 2026-08-25) : un cran plus petit pour tenir dans l'étiquette. */ .logo-t { font: 400 20px/1 var(--hand); color: var(--rose); letter-spacing: .01em; white-space: nowrap; } .logo-t em { font-style: normal; letter-spacing: .12em; } .logo-cat { margin: 0 0 -4px -10px; } .quest { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 8px 9px 14px; background: var(--pan); border: 1px solid var(--line); border-radius: 999px; transition: border-color .2s; } .quest:focus-within { border-color: rgba(224,115,159,.45); } .quest input { flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 14px; padding: 2px 0; } .quest input::placeholder { color: var(--faint); } .quest input:focus { outline: none; } .quest-cat { display: grid; place-items: center; flex: none; opacity: .75; } /* Suggestions de recherche */ .quest { position: relative; } .quest-vide { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; color: var(--faint); transform: rotate(45deg); } .quest-vide[hidden] { display: none; } .quest-vide:hover { color: var(--ink); background: rgba(255,255,255,.06); } .sugg { /* 60 > 55 (.navh sticky) : la liste de suggestions passe DEVANT la barre de navigation quand la page est un peu défilée (2026-08-27) */ position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60; padding: 6px; border-radius: var(--r); background: var(--pan); border: 1px solid var(--line-2); box-shadow: 0 20px 44px -20px rgba(0,0,0,.95); animation: monte .18s cubic-bezier(.22,1,.36,1); } .sugg[hidden] { display: none; } .sugg-i { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; font-size: 13.5px; color: var(--dim); transition: background .14s, color .14s; } .sugg-i:hover, .sugg-i:focus { background: rgba(255,255,255,.05); color: var(--ink); } .sugg-ic { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--rose); opacity: .6; } .quest-go { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--dim); } .quest-go:hover { color: var(--rose); background: var(--rose-b); } .top-r { display: flex; align-items: center; gap: 14px; justify-self: end; } .invite { display: flex; align-items: center; gap: 7px; color: var(--dim); font-size: 13.5px; } .invite .ic { color: var(--rose); } .invite b { font-weight: 500; } .ghost-btn { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--dim); } .ghost-btn:hover { color: var(--ink); background: rgba(255,255,255,.05); } .dot-new { position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--rose); border: 2px solid var(--bg); } /* Le compte, et son menu de langue */ .moi { position: relative; } .me { display: flex; align-items: center; gap: 7px; padding: 6px 11px 6px 7px; border-radius: 999px; color: var(--faint); border: 1px solid transparent; transition: background .18s, border-color .18s, color .18s; } /* Un survol qui se VOIT : fond, liseré, texte qui s'allume (2026-08-25). */ .me:hover, .me[aria-expanded="true"] { background: rgba(255,255,255,.06); border-color: var(--line-2); color: var(--dim); } .me:hover .me-l, .me[aria-expanded="true"] .me-l { color: var(--ink); } .me:hover .me-chev { color: var(--rose); } .me-l { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--dim); white-space: nowrap; } .me-l b { font-weight: 500; } /* Drapeaux dessinés : Windows n'a aucun glyphe d'émoji drapeau et afficherait « JP », « TW »… à la place. */ .dr { display: block; flex: none; border-radius: 3px; } .me-chev { transition: transform .2s; } .me[aria-expanded="true"] .me-chev { transform: rotate(180deg); } .moi-m { position: absolute; top: calc(100% + 8px); right: 0; z-index: 45; min-width: 176px; padding: 10px 8px 8px; background: var(--pan); border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; box-shadow: 0 20px 44px -20px rgba(0,0,0,.95); animation: monte .2s cubic-bezier(.22,1,.36,1); } .moi-m[hidden] { display: none; } .moi-h { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; padding: 0 10px; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); } .moi-h .ic { color: var(--rose); } .moi-l a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 10px; font-size: 13.5px; color: var(--dim); transition: background .16s, color .16s; } .moi-l a:hover { background: rgba(255,255,255,.05); color: var(--ink); } .moi-l a.on { color: var(--rose); font-weight: 600; } .moi-l a i { font-style: normal; font-size: 12px; } .moi-l a span { display: flex; align-items: center; gap: 9px; } .moi-cat { position: absolute; right: 6px; bottom: -6px; opacity: .35; pointer-events: none; } .me-pic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--pan-2); border: 1px solid var(--line-2); } .me:hover .me-pic { border-color: var(--rose); } /* ------------------------------------------------------------- 5. Colonne de gauche ------------------------------------------------------------- */ .side { background: var(--pan); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 12px 16px; } .nav-a { position: relative; display: flex; align-items: center; gap: 12px; margin: 10px 0; padding: 10px 12px; border-radius: 11px; color: var(--dim); font-size: 14px; transition: background .18s, color .18s; } .nav-a:hover { background: rgba(255,255,255,.045); color: var(--ink); } .nav-a.on { background: var(--rose-b); color: var(--rose); font-weight: 600; } .nav-a .ic { opacity: .9; } .nav-doodle { margin-left: auto; display: inline-flex; gap: 2px; color: var(--rose); opacity: .75; } .nav-plus { margin-left: auto; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.07); color: var(--dim); } /* Le trait de séparation est pointillé, comme sur le dessin. */ .cut { height: 1px; margin: 14px 8px; background-image: linear-gradient(to right, var(--line-2) 46%, transparent 0); background-size: 8px 1px; } .side-h { margin: 0 0 6px; padding: 0 12px; display: flex; align-items: center; gap: 6px; color: var(--faint); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .side-h .ic { color: var(--rose); } .nav-2 .nav-a { font-size: 13.5px; padding: 9px 12px; } .postit { position: relative; margin: 18px 6px 14px; padding: 18px 16px 22px; background: linear-gradient(180deg, #e0d1ae, var(--kraft)); color: var(--kraft-i); border-radius: 3px; transform: rotate(-1.2deg); box-shadow: 0 8px 18px -10px rgba(0,0,0,.9); } .postit p { margin: 0; font: 400 14.5px/1.62 var(--hand); } .postit-cat { position: absolute; right: 6px; bottom: -8px; } .side-c { margin: 0; padding: 0 12px; display: flex; align-items: center; gap: 6px; color: var(--faint); font-size: 11.5px; } .side-c i { color: var(--rose); display: inline-flex; } /* ------------------------------------------------------------- 6. Héro ------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; display: grid; align-items: center; background: radial-gradient(90% 120% at 18% 30%, rgba(224,115,159,.09), transparent 60%), var(--pan); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px, 3.4vw, 38px); margin-bottom: 30px; min-height: 300px; } .tape-hero { top: -6px; right: 60px; transform: rotate(9deg); } .hero-art { justify-self: center; } .hero-t { text-align: center; } .hero-t h1 { font: 400 clamp(28px, 4vw, 42px)/1.34 var(--hand); letter-spacing: .005em; } .hero-t mark { background: var(--rose-2); color: #fff; padding: 2px 14px 5px; border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .mk-heart { display: inline-block; vertical-align: -3px; margin-left: 4px; color: #ffdbe9; } .hero-t p { margin: 16px 0 24px; color: var(--dim); font-size: 15.5px; } .btn-hero { padding: 13px 26px; font-size: 15px; } .hero-note { position: absolute; right: 26px; bottom: 30px; padding: 10px 16px 12px; background: linear-gradient(180deg, #e0d1ae, var(--kraft)); color: var(--kraft-i); font: 400 17px/1 var(--hand); border-radius: 3px; transform: rotate(-7deg); box-shadow: 0 8px 16px -9px rgba(0,0,0,.9); display: flex; align-items: center; gap: 4px; } .pin-b { top: -5px; left: 22%; width: 11px; height: 11px; } .hn-cat { display: inline-flex; margin-bottom: -3px; } .hero-doodles { position: absolute; inset: 0; pointer-events: none; color: var(--rose); } .hero-doodles .d { position: absolute; display: block; opacity: .55; } .d1 { top: 14%; left: 21%; } .d2 { top: 9%; left: 34%; opacity: .4 !important; } .d3 { top: 30%; left: 15%; } .d4 { top: 22%; right: 30%; } .d5 { top: 46%; left: 26%; } .d6 { bottom: 22%; left: 32%; } .d7 { top: 58%; right: 26%; } .puces { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; gap: 7px; } .puces i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); } .puces i.on { background: var(--rose); } /* ------------------------------------------------------------- 7. Rangées et pistes ------------------------------------------------------------- */ .rangee { margin-bottom: 30px; } .rang-h { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font: 400 21px/var(--hand-lh) var(--hand); } .rang-s { margin: -8px 0 14px; color: var(--faint); font-size: 12.5px; } .piste-wrap { position: relative; } .piste { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth; scrollbar-width: none; padding: 2px 0 4px; } .piste::-webkit-scrollbar { display: none; } .piste > * { scroll-snap-align: start; flex: none; width: clamp(126px, 34vw, 148px); } .fleche { position: absolute; top: 38%; z-index: 3; display: grid; place-items: center; width: 30px; height: 46px; border-radius: 10px; background: rgba(11,9,16,.78); border: 1px solid var(--line); color: var(--dim); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: color .2s, border-color .2s, opacity .2s; } .fleche:hover { color: var(--rose); border-color: rgba(224,115,159,.4); } .fleche.g { left: -13px; transform: scaleX(-1); } .fleche.d { right: -13px; } /* ------------------------------------------------------------- 8. Cartes de titre — tout vit sur l'image. Le bloc de texte sous la vignette mangeait la moitié de la carte pour deux lignes : titre et durée sont désormais posés SUR l'image, sur un dégradé, et le cœur flotte dans un coin. À surface égale, l'image occupe presque tout. ------------------------------------------------------------- */ .carte { /* Refaite le 2026-08-25 : PORTRAIT 3/4, lift avec anneau rosé, zoom + lumière sur l'image, médaillon lecture au survol. */ position: relative; width: 100%; border-radius: 16px; overflow: hidden; background: #100d15; border: 1px solid var(--line); transition: transform .3s cubic-bezier(.22, 1, .36, 1), border-color .25s, box-shadow .3s; } .carte:hover { transform: translateY(-4px) scale(1.015); border-color: rgba(224,115,159,.55); box-shadow: 0 18px 40px -18px rgba(0,0,0,.9), 0 10px 30px -12px rgba(224,115,159,.28); } .carte-a { position: relative; display: block; aspect-ratio: 3 / 4; } .carte-a img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22, 1, .36, 1), filter .4s; } .carte:hover .carte-a img { transform: scale(1.07); filter: brightness(1.07) saturate(1.06); } .carte.fermee:hover .carte-a img { transform: none; filter: none; } .carte-voile { position: absolute; inset: 0; transition: opacity .3s; background: linear-gradient(to top, rgba(9,7,13,.96) 3%, rgba(9,7,13,.55) 30%, transparent 58%), linear-gradient(to bottom, rgba(9,7,13,.35), transparent 22%); } .carte:hover .carte-voile { opacity: .92; } /* Le médaillon LECTURE : invisible, il jaillit au survol. */ .carte-play { position: absolute; left: 50%; top: 44%; z-index: 2; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(196, 80, 127, .92); box-shadow: 0 8px 24px -6px rgba(196, 80, 127, .8); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transform: scale(.55); transition: opacity .22s, transform .3s cubic-bezier(.34, 1.5, .5, 1); pointer-events: none; } .carte-play .ic { margin-left: 3px; } .carte:hover .carte-play { opacity: 1; transform: scale(1); } @media (hover: none) { .carte-play { display: none; } } .carte-sur { position: absolute; left: 11px; right: 11px; bottom: 10px; z-index: 1; } .carte-t { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; font-weight: 600; line-height: 1.35; text-shadow: 0 1px 3px rgba(0,0,0,.75); } .t-ferme { color: var(--dim); font-weight: 500; } .carte-an { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-style: normal; font-size: 10.5px; color: #cdc4da; } .carte-an::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--rose); flex: none; } /* Le cœur flotte : il ne prend plus de ligne à lui seul. */ .carte .coeur { position: absolute; top: 7px; right: 7px; z-index: 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; background: rgba(12,10,18,.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .18s, background .18s, color .18s; } .carte:hover .coeur, .carte .coeur:focus-visible, .carte .coeur.on { opacity: 1; } .carte .coeur:hover { background: var(--rose-2); } .coeur .c-p { display: none; } .coeur.on { color: var(--rose-3); } .coeur.on .c-o { display: none; } .coeur.on .c-p { display: block; } .carte-neuf { position: absolute; top: 8px; left: 8px; z-index: 2; } .carte-rang { position: absolute; top: 8px; left: 8px; z-index: 2; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center; background: var(--rose-2); color: #fff; font-size: 13px; font-weight: 700; font-style: normal; } .cadenas { position: absolute; inset: 0; display: grid; place-items: center; color: var(--rose-3); opacity: .85; z-index: 1; } .no-hit, .vide { margin-top: 22px; font-size: 12px; color: var(--faint); text-align: center; } /* ------------------------------------------------------------- 9. Collections secrètes ------------------------------------------------------------- */ .piste-coll { gap: 14px; } /* ------------------------------------------------------------- La grille des pages de rubrique. Elle n'existait pas : les pages employaient « .cards » sans qu'aucune règle ne la définisse, si bien que les vignettes s'empilaient en blocs au lieu de se ranger en colonnes. Les colonnes sont calées sur la largeur d'une vignette de rail (~168 px). Au-delà, « auto-fill » fabrique moins de colonnes et chacune s'étire : les vignettes deviennent bien plus grosses que sur l'accueil. ------------------------------------------------------------- */ .cards { display: grid; align-items: stretch; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } @media (min-width: 620px) { .cards { gap: 12px; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); } } @media (min-width: 900px) { .cards { gap: 13px; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); } } @media (min-width: 1280px) { .cards { gap: 14px; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); } } .coll { width: 100%; display: flex; flex-direction: column; align-items: center; padding: 20px 14px 14px; background: var(--carte); border: 1px solid var(--line); border-radius: var(--r); text-align: center; transition: transform .25s, border-color .25s, background .25s; } .coll:hover { transform: translateY(-3px); border-color: rgba(224,115,159,.35); } .coll-art { display: grid; place-items: center; height: 86px; margin-bottom: 12px; } .coll-t { display: block; font-size: 13px; font-weight: 600; line-height: 1.35; margin-bottom: 5px; } .coll-n { display: block; font-size: 11.5px; color: var(--faint); } /* une teinte de fond par collection, très légère */ .c1 { background: linear-gradient(180deg, rgba(150,130,190,.13), transparent 62%), var(--carte); } .c2 { background: linear-gradient(180deg, rgba(190,150,120,.13), transparent 62%), var(--carte); } .c3 { background: linear-gradient(180deg, rgba(190,140,170,.13), transparent 62%), var(--carte); } .c4 { background: linear-gradient(180deg, rgba(210,120,150,.13), transparent 62%), var(--carte); } .c5 { background: linear-gradient(180deg, rgba(130,110,190,.13), transparent 62%), var(--carte); } /* ------------------------------------------------------------- 10. Colonne de droite ------------------------------------------------------------- */ .rail { display: grid; gap: 16px; } .pan { background: var(--pan); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 16px 12px; } .pan-h { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; font: 400 18px/var(--hand-lh) var(--hand); } .pan-ic { color: var(--rose); } .recent li + li { margin-top: 3px; } .recent a { display: grid; grid-template-columns: 56px 1fr auto; gap: 11px; align-items: center; padding: 7px; border-radius: 11px; transition: background .18s; } .recent a:hover { background: rgba(255,255,255,.045); } .recent img { width: 56px; height: 42px; object-fit: cover; border-radius: 7px; } .recent-t { min-width: 0; } .recent-t b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.3; } .recent-t i { font-style: normal; font-size: 11px; color: var(--faint); } .recent-w { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--faint); white-space: nowrap; } .bull { width: 5px; height: 5px; border-radius: 50%; background: var(--rose); } .fils li + li { margin-top: 2px; } .fils a, .fils .fil-a { display: grid; grid-template-columns: 8px 1fr auto; gap: 10px; align-items: start; padding: 9px 7px; border-radius: 11px; transition: background .18s; } .fils a:hover { background: rgba(255,255,255,.045); } /* Les fils sont inertes tant qu'aucun babillard n'existe : pas de curseur « main » qui promettrait une page. */ .fils .fil-a { cursor: default; } .fil-p { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; } .p1 { background: #a67ee0; } .p2 { background: #e0c07e; } .p3 { background: #7ed0a8; } .fil-t b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.35; } .fil-t i { font-style: normal; font-size: 11px; color: var(--faint); } .fil-n { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--faint); } .pan-faux { margin: 10px 7px 0; font-size: 10.5px; line-height: 1.5; color: var(--faint); font-style: italic; } .pan-more { display: flex; align-items: center; justify-content: flex-end; gap: 3px; padding: 8px 4px 2px; color: var(--rose); font-size: 12.5px; font-weight: 600; } .pan-more:hover { gap: 6px; } .pan-vip { position: relative; overflow: hidden; padding-bottom: 20px; } .vip-ic { color: #e0c07e; } .pan-vip p { margin: 0; color: var(--dim); font-size: 12.5px; line-height: 1.65; max-width: 22ch; } .vip-cat { position: absolute; right: 8px; bottom: -6px; opacity: .9; } /* ------------------------------------------------------------- 11. Fiche d'un titre ------------------------------------------------------------- */ .fil-ariane { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 12.5px; color: var(--faint); } .fil-ariane a:hover { color: var(--rose); } .fil-ariane span { color: var(--dim); } .fiche { margin-bottom: 30px; } .fiche-img { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 7; background: #100d15; max-width: 1200px; margin: 0 auto; } .fiche-img img, .fiche-img video { width: 100%; height: 100%; object-fit: cover; } .fiche-voile { position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,9,16,.94) 6%, rgba(11,9,16,.3) 52%, transparent 82%); } .tape-fiche { top: -6px; left: 48px; transform: rotate(-8deg); } .fiche-sur { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(16px, 3vw, 30px); } .fiche-sur h1 { margin: 10px 0 8px; font: 400 clamp(24px, 4vw, 38px)/1.2 var(--hand); } .fiche-m { margin: 0; color: var(--dim); font-size: 13px; } .fiche-m i { font-style: normal; color: var(--faint); margin: 0 4px; } .fiche-b { display: grid; gap: 18px; margin-top: 18px; max-width: 1200px; margin-left: auto; margin-right: auto; } .fiche-p { background: var(--pan); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 30px); } .act { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; } .bloc-h { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; font: 400 18px/var(--hand-lh) var(--hand); } .fiche-note { color: var(--dim); font-size: 14.5px; max-width: 76ch; } .etiq { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; } .etiq li { border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--line); font-size: 12px; color: var(--dim); transition: border-color .16s, color .16s, background .16s; } .etiq li a, .etiq li span { display: inline-block; padding: 5px 12px; } .etiq li:hover { border-color: rgba(224,115,159,.5); color: var(--rose-3); background: var(--rose-b); } /* ------------------------------------------------------------- La colonne d'actions de la fiche (2026-08-25) : les actions vivent dans leur propre panneau .fiche-cote — un panneau TRAVAILLÉ : halo rose en haut, reflet violet en bas (l'écho du bouton télécharger), bordure rosée, ruban adhésif de travers. En étroit il reste empilé sous le bandeau ; dès 1000 px il se place À DROITE de la vidéo, le descriptif reprenant toute la largeur en dessous. Le dessin des rangées .axn et leurs micro-animations vivent en fin de feuille. ------------------------------------------------------------- */ .fiche-cote { position: relative; margin: 18px auto 0; max-width: 1200px; background: radial-gradient(120% 100% at 100% 0%, rgba(224,115,159,.13), transparent 55%), radial-gradient(110% 90% at 0% 100%, rgba(139,123,247,.10), transparent 55%), var(--pan); border-color: rgba(224,115,159,.22); box-shadow: 0 18px 44px -30px rgba(0,0,0,.85); } .tape-cote { top: -7px; right: 36px; width: 56px; height: 17px; transform: rotate(6deg); } .fiche-cote .act-g { margin-bottom: 0; } /* La ligne d'état (solde ou « déjà à vous ») : détachée par un pointillé, comme le bas d'un ticket. */ .fiche-cote .act-note { margin: 2px 0 0; padding-top: 11px; border-top: 1px dashed rgba(255,255,255,.12); } @media (min-width: 1000px) { .fiche { display: grid; grid-template-columns: minmax(0, 1fr) 348px; gap: 18px; align-items: stretch; max-width: 1200px; margin-left: auto; margin-right: auto; } /* aspect-ratio auto : avec align-items stretch, le ratio 16/7 recalculait la LARGEUR depuis la hauteur de rangée et la vidéo débordait SOUS le panneau (constaté le 2026-08-25). Ici elle remplit sa colonne, sa hauteur suit celle du panneau. */ .fiche-img { grid-column: 1; grid-row: 1; max-width: none; margin: 0; aspect-ratio: auto; height: 100%; min-height: 340px; } .fiche-cote { grid-column: 2; grid-row: 1; margin: 0; max-width: none; display: flex; flex-direction: column; justify-content: center; padding: 22px 18px; } .fiche-cote .act-g { align-content: center; } /* En GRID, « margin: auto » fait rétrécir l'élément à son contenu et le centre — le titre et le descriptif flottaient au milieu (constaté le 2026-08-26). Ici : pleine largeur, marges franches. */ /* « .fiche .fiche-titre » : la règle de base est déclarée PLUS BAS dans la feuille et gagnait à l'ordre des sources — la spécificité tranche (2026-08-26). */ .fiche .fiche-titre { grid-column: 1 / -1; max-width: none; margin: 8px 0 0; } .fiche-b { grid-column: 1 / -1; max-width: none; margin: 2px 0 0; } } /* ------------------------------------------------------------- 12. Titre gardé au coin secret ------------------------------------------------------------- */ .ferme-bloc { position: relative; overflow: hidden; text-align: center; background: radial-gradient(80% 100% at 50% 0%, rgba(224,115,159,.1), transparent 62%), var(--pan); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(30px, 5vw, 54px) clamp(20px, 4vw, 48px) clamp(28px, 4vw, 44px); margin-bottom: 30px; } .ferme-cat { display: grid; place-items: center; margin-bottom: 6px; } .ferme-bloc h1 { font: 400 clamp(26px, 4vw, 38px)/1.32 var(--hand); } .ferme-bloc mark { background: var(--rose-2); color: #fff; padding: 2px 12px 5px; border-radius: 4px; } .ferme-l { max-width: 54ch; margin: 18px auto 24px; color: var(--dim); font-size: 14px; } .ferme-a { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } /* ------------------------------------------------------------- 13. Fenêtre du coin secret ------------------------------------------------------------- */ .modale { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: rgba(6,5,9,.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fondu .25s ease; } .modale[hidden] { display: none; } .modale-c { position: relative; width: 100%; max-width: 420px; text-align: center; background: var(--pan); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 34px 26px 26px; animation: monte .3s cubic-bezier(.22,1,.36,1); } .modale-cat { position: absolute; top: -32px; left: 50%; transform: translateX(-50%); } .modale-c h2 { margin: 8px 0 12px; font: 400 21px/1.3 var(--hand); display: flex; align-items: center; justify-content: center; gap: 7px; } .modale-c h2 i { color: var(--rose); display: inline-flex; } .modale-c p { color: var(--dim); font-size: 13.5px; } .modale-a { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; margin-top: 20px; } @keyframes monte { from { transform: translateY(14px); opacity: 0; } } @keyframes fondu { from { opacity: 0; } } /* ------------------------------------------------------------- 13bis. Formules et tunnel d'inscription ------------------------------------------------------------- */ /* Le bouton d'entrée du tunnel, dans la barre du haut */ .btn-join { padding: 9px 17px; border-radius: 999px; background: var(--rose-2); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; box-shadow: 0 6px 16px -8px rgba(196,80,127,.9); transition: background .18s, transform .18s; } .btn-join:hover { background: #d35e8f; transform: translateY(-1px); } /* Le rappel discret sous l'appel principal du héro */ .hero-a { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .hero-plans { display: inline-flex; align-items: center; gap: 3px; color: var(--rose); font-size: 13px; font-weight: 600; } .hero-plans:hover { gap: 7px; } .hero-t .hero-a { justify-content: center; } .plans { /* Plus de panneau (2026-08-25) : le bloc vit à nu sur la page — ni fond, ni bord, ni tape. Les cartes de packs suffisent. */ position: relative; text-align: center; margin: 6px 0 30px; padding: clamp(20px, 4vw, 34px) 0 clamp(16px, 3vw, 26px); } .plans > .tape { display: none; } /* Hors de l'accueil, le bloc vit après la grille, en pleine largeur, juste au-dessus du pied. Le filet .grid > .plans est une ceinture de sécurité : si le bloc retombait un jour dans la grille, il s'étalerait sur toutes les colonnes au lieu de se coincer sous la barre latérale. */ .app > .plans { margin: 30px 0 8px; } .grid > .plans { grid-column: 1 / -1; } .tape-plans { top: -6px; left: 38px; transform: rotate(-7deg); } .plans h2 { font: 400 clamp(21px, 3.4vw, 29px)/var(--hand-lh) var(--hand); } .plans-s { margin: 8px 0 24px; font-size: 13.5px; color: var(--dim); } /* Les trois cartes-bonbons (redessinées le 2026-08-24). */ .plans-g { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); max-width: 660px; margin: 0 auto; align-items: stretch; } .plan { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 14px 18px; border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012) 55%), var(--carte); border: 1px solid var(--line); text-align: center; transition: transform .2s, border-color .2s, box-shadow .2s; } .plan:hover { transform: translateY(-3px); border-color: rgba(224,115,159,.5); box-shadow: 0 14px 30px -18px rgba(224,115,159,.4); } .plan.vedette { border-color: rgba(224,115,159,.55); background: radial-gradient(120% 90% at 50% 0%, rgba(224,115,159,.14), transparent 58%), var(--carte); box-shadow: 0 16px 40px -20px rgba(224,115,159,.5); } .plan-mark { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); padding: 3px 10px; border-radius: 999px; white-space: nowrap; background: var(--rose-2); color: #fff; font-size: 10px; font-weight: 700; font-style: normal; } /* 1, 2 ou 3 bonbons : la taille du pack, d'un coup d'œil. */ .plan-bonbons { display: flex; justify-content: center; align-items: center; height: 52px; margin-bottom: 2px; } .plan-bonbons img { width: 46px; height: auto; } .plan-bonbons img + img { margin-left: -20px; } .plan-bonbons img:nth-child(1) { transform: rotate(-10deg); } .plan-bonbons img:nth-child(2) { transform: rotate(7deg) translateY(-3px); } .plan-bonbons img:nth-child(3) { transform: rotate(-4deg) translateY(2px); } .plan.vedette .plan-bonbons img { width: 52px; } .plan-points { display: flex; align-items: center; gap: 6px; justify-content: center; font-size: 19px; } .plan-points b { font-size: 32px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); font-family: var(--num); } .plan.vedette .plan-points b { color: var(--rose); } .plan-total { font-size: 15px; font-weight: 600; color: var(--dim); } .plan-par { font-size: 11px; color: var(--faint); white-space: nowrap; } .plan-remise { margin-top: 7px; padding: 3px 10px; border-radius: 999px; font-style: normal; background: rgba(224,115,159,.16); color: var(--rose); font-size: 11px; font-weight: 600; } .plan-cta { margin-top: 12px; padding: 9px 20px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid var(--line-2); color: var(--ink); font-size: 13px; font-weight: 600; transition: background .18s, color .18s, border-color .18s; } .plan:hover .plan-cta, .plan.vedette .plan-cta { background: var(--rose-2); border-color: transparent; color: #fff; } .plans-deja { margin: 20px 0 0; font-size: 12.5px; color: var(--faint); } .plans-deja a { color: var(--rose); font-weight: 600; } /* Le tunnel : une feuille montante, comme le menu « Plus » */ .rejoindre { position: fixed; inset: 0; z-index: 95; display: grid; align-items: end; background: rgba(6,5,9,.74); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); animation: fondu .22s ease; } .rejoindre[hidden] { display: none; } .rej-c { position: relative; width: 100%; max-width: 460px; margin: 0 auto; background: var(--pan); border: 1px solid var(--line-2); border-bottom: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 12px 20px calc(22px + env(safe-area-inset-bottom)); max-height: 88vh; overflow-y: auto; animation: monte .3s cubic-bezier(.22,1,.36,1); } .rej-x { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--faint); transform: rotate(45deg); } .rej-x:hover { color: var(--ink); background: rgba(255,255,255,.06); } /* Retour vers la matrice depuis les étapes qui en découlent. */ .rej-retour { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 10px; padding: 5px 10px 5px 4px; border-radius: 999px; color: var(--faint); font-size: 12px; float: left; } .rej-retour .ic { transform: scaleX(-1); } .rej-retour:hover { color: var(--rose); background: rgba(255,255,255,.05); } .rej-e { text-align: center; } .rej-cat { display: grid; place-items: center; margin: 0 auto 8px; } .rej-e h2 { font: 400 20px/var(--hand-lh) var(--hand); margin-bottom: 16px; } .rej-l { display: block; text-align: left; font-size: 11.5px; color: var(--faint); margin: 0 0 5px; } .rej-c input[type="email"], .rej-c input[type="password"], .rej-c input[type="text"] { width: 100%; padding: 12px 14px; margin-bottom: 12px; background: rgba(255,255,255,.045); border: 1px solid var(--line-2); border-radius: 12px; color: var(--ink); font: inherit; font-size: 14.5px; } .rej-c input:focus { outline: none; border-color: rgba(224,115,159,.55); } .rej-err { min-height: 17px; margin: 0 0 8px; font-size: 12px; color: #ff9ec8; } .rej-go { width: 100%; justify-content: center; } .rej-go[disabled] { opacity: .55; cursor: progress; } .rej-p { font-size: 13px; color: var(--dim); text-align: left; } .rej-p b { color: var(--rose); font-size: 15px; } .rej-note { margin: 12px 0 0; font-size: 11px; color: var(--faint); text-align: left; } /* Carte prépayée : les trois étapes, numérotées, avec le lien externe. */ .pp-pas { counter-reset: pp; margin: 0 0 14px; padding: 0; text-align: left; } .pp-pas li { counter-increment: pp; position: relative; padding: 0 0 12px 28px; } .pp-pas li::before { content: counter(pp); position: absolute; left: 0; top: 1px; width: 19px; height: 19px; border-radius: 50%; background: var(--rose-b); color: var(--rose); font-size: 11px; font-weight: 700; line-height: 19px; text-align: center; } .pp-pas p { margin: 0 0 8px; font-size: 13px; color: var(--dim); } .pp-pas p b { color: var(--rose); font-size: 15px; } .pp-lien { display: inline-flex; padding: 8px 14px; font-size: 13px; } .pp-lien .ic { transform: rotate(-45deg); } .rej-e h2.pp-t { min-height: 1em; } .rej-bas { margin: 16px 0 0; font-size: 10.5px; line-height: 1.6; color: var(--faint); text-align: center; } /* La matrice du site : moyens en lignes, durées en colonnes. Le client compare d'un coup d'œil ce que chaque croisement coûte. */ /* --- étape 2 redessinée (2026-08-24) : packs puis moyens --- */ .pk-choix { display: flex; gap: 10px; margin: 8px 0 16px; } .pk { position: relative; flex: 1; display: grid; gap: 3px; justify-items: center; padding: 16px 8px 13px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--line-2); transition: border-color .16s, background .16s, transform .16s; } .pk:hover { transform: translateY(-2px); border-color: rgba(224,115,159,.4); } .pk-n { display: flex; align-items: center; gap: 4px; font-size: 15px; } .pk-n b { font: 700 21px/1 var(--num); letter-spacing: -.01em; color: var(--ink); } .pk-prix { font-size: 11.5px; color: var(--dim); font-weight: 600; } .pk-plus { padding: 1px 7px; border-radius: 999px; font-style: normal; background: rgba(224,115,159,.16); color: var(--rose); font-size: 10px; font-weight: 700; } .pk-mark { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); padding: 2px 8px; border-radius: 999px; white-space: nowrap; background: var(--rose-2); color: #fff; font-size: 9px; font-weight: 700; font-style: normal; } .pk.on { border-color: var(--rose); background: var(--rose-b); box-shadow: 0 10px 26px -16px rgba(224,115,159,.55); } .pk.on .pk-n b { color: var(--rose); } .mo-liste { display: grid; gap: 10px; margin-bottom: 18px; } .mo { position: relative; display: flex; align-items: center; gap: 13px; text-align: left; padding: 13px 15px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--line-2); transition: border-color .16s, background .16s, opacity .16s; } .mo:hover { border-color: rgba(224,115,159,.4); } .mo-logos { display: flex; align-items: center; gap: 7px; flex-shrink: 0; min-width: 96px; } .mo-logos img { height: 19px; width: auto; max-width: 44px; object-fit: contain; } .mo-logos img[src*="paypal"] { height: 24px; } .mo-logos img[src*="logo_sej"] { height: 26px; } .mo-logos img[src*="usdt"] { height: 24px; } .mo-nom { flex: 1; display: grid; gap: 2px; font-size: 14px; font-weight: 600; color: var(--ink); } .mo-note { font-style: normal; font-size: 10.5px; font-weight: 500; color: var(--faint); } .mo-coche { width: 21px; height: 21px; border-radius: 50%; border: 2px solid var(--line-2); flex-shrink: 0; position: relative; transition: border-color .16s, background .16s; } .mo.on { border-color: var(--rose); background: var(--rose-b); } .mo.on .mo-coche { border-color: var(--rose); background: var(--rose-2); } .mo.on .mo-coche::after { content: ""; position: absolute; left: 6px; top: 2.5px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(42deg); } .mo.off { opacity: .35; filter: saturate(.4); } .mo.off:hover { border-color: var(--line-2); } .paytab-w { overflow-x: auto; margin: 0 -4px 16px; padding: 0 4px; } .paytab { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 4px; } /* En « fixed », les colonnes sans largeur se partagent le reste à parts égales : la troisième cessait d'être écrasée hors du cadre. */ .paytab thead td:first-child, .paytab tbody th { width: 96px; } .paytab thead th { padding: 9px 4px; border-radius: 10px 10px 0 0; background: rgba(255,255,255,.035); font-weight: 600; line-height: 1.2; transition: background .16s; } .paytab thead th b { display: block; font-size: 16px; } .paytab thead th span { display: block; margin-top: 1px; font-size: 10px; color: var(--faint); font-weight: 400; } .paytab tbody th { padding: 5px 6px; border-radius: 10px; } /* Sans pastille claire, les logos sombres (Visa marine, PayPal bleu) se fondent dans le fond : on les éclaircit plutôt que de poser une pastille, pour ne pas casser le noir de la maquette. */ .paytab tbody th img { filter: brightness(1.55) saturate(1.15); } .paytab tbody th img { width: 100%; max-width: 82px; height: 34px; object-fit: contain; margin: 0 auto; } /* PayPal et Visa sont dessinés avec beaucoup de marge interne : à hauteur égale ils paraissent deux fois plus petits que Mastercard. */ .paytab tbody th img[src*="paypal"] { height: 44px; max-width: 88px; } /* La ligne « carte / PayPal » : quatre marques dans une seule case. */ .paytab tbody th .marques { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; align-items: center; } .paytab tbody th .marques img { width: 100%; max-width: 40px; height: 16px; margin: 0 auto; } .paytab tbody th .marques img[src*="paypal"] { height: 22px; max-width: 44px; } .paytab tbody th img[src*="visa"] { height: 40px; max-width: 86px; } /* Le logo 7-Eleven (konbini) est coloré avec du blanc : pas de sur-éclaircissement, et un carré un peu plus grand. */ .paytab tbody th img[src*="logo_sej"] { filter: none; height: 40px; max-width: 48px; } .paytab td { padding: 0; } .paytab td.hs { background: rgba(255,255,255,.015); border-radius: 10px; } /* La case elle-même : le rond gris devient une coche rose une fois choisi. */ .paytab input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } .paytab label { position: relative; display: block; height: 46px; border-radius: 10px; background: rgba(255,255,255,.05); cursor: pointer; transition: background .16s, box-shadow .16s; } .paytab label::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--faint); transition: background .16s, transform .16s; } .paytab label:hover { background: rgba(255,255,255,.09); } .paytab input:focus-visible + label { outline: 2px solid var(--rose); outline-offset: 2px; } .paytab input:checked + label { background: var(--rose-2); box-shadow: 0 4px 14px -6px rgba(196,80,127,.9); } .paytab input:checked + label::after { width: 16px; height: 16px; margin: -8px 0 0 -8px; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.5l5 5 10-11' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.5l5 5 10-11' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; border-radius: 0; } /* La formule cliquée sur la page teinte l'en-tête de SA colonne. Un contour sur les cases se lisait à tort comme une case déjà cochée. */ .paytab thead th.vise { background: rgba(224,115,159,.16); } .paytab thead th.vise b { color: var(--rose); } .rej-go[disabled] { opacity: .4; cursor: not-allowed; box-shadow: none; } .coins { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .coin { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); font-size: 13px; font-weight: 600; text-align: left; } .coin img { width: 22px; height: 22px; object-fit: contain; flex: none; } .coin span { display: flex; align-items: baseline; gap: 5px; } .coin i { font-style: normal; font-size: 9.5px; color: var(--faint); font-weight: 400; } .coin:hover { border-color: rgba(224,115,159,.45); background: rgba(255,255,255,.07); } .rej-sortie { margin-top: 14px; font-size: 12.5px; color: var(--dim); } .rej-qr { width: 168px; margin: 0 auto; border-radius: 10px; background: #fff; padding: 6px; } .rej-adr { margin: 10px 0 0; font-size: 11px; word-break: break-all; color: var(--ink); } /* ---- écran de paiement crypto (système local) ------------------ Deux informations doivent être lisibles sans effort et copiables sans erreur : le montant EXACT et l'adresse. Tout le reste est secondaire. D'où la police à chasse fixe, les chiffres bien espacés, et un bouton de copie collé à chaque valeur — recopier une adresse à la main est le meilleur moyen de perdre l'argent. Le réseau est répété deux fois (en tête et en avertissement) : c'est volontaire. Envoyer sur la mauvaise chaîne est la seule erreur vraiment irréversible de tout le parcours. */ .coin[data-local] span { flex-direction: column; gap: 1px; } .coin[data-local] i { font-size: 9px; line-height: 1.25; } /* Une fois la pièce choisie, le menu s'efface. Garder la liste et le titre « quelle monnaie ? » au-dessus de la consigne de paiement, c'était laisser deux écrans se disputer l'attention alors qu'un seul a encore quelque chose à dire. Le bouton « changer » reste : c'est par lui qu'on revient. */ .rej-e.cr-actif > h2, .rej-e.cr-actif > .coins { display: none; } .rej-e.cr-actif .rej-sortie { margin-top: 4px; } /* Refait le 2026-08-27 : « trop de texte, pas droit, pas d'animation ». Le ticket entre en CASCADE (chaque étage arrive avec un léger retard), le QR vit sur une carte blanche portant le badge de la pièce, les deux paragraphes d'avertissement sont devenus deux puces, et le temps restant se voit sur une jauge qui se vide. Tout est centré sur un seul axe — plus rien ne dépasse à gauche ou à droite. */ .cr { display: grid; gap: 14px; text-align: center; justify-items: center; } .cr > * { animation: cr-entre .55s cubic-bezier(.22,.9,.32,1.2) backwards; } .cr > :nth-child(2) { animation-delay: .07s; } .cr > :nth-child(3) { animation-delay: .14s; } .cr > :nth-child(4) { animation-delay: .21s; } .cr > :nth-child(5) { animation-delay: .28s; } .cr > :nth-child(6) { animation-delay: .35s; } @keyframes cr-entre { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .cr > * { animation: none; } } /* ---- en-tête : la chaîne, sans boîte ---- */ .cr-tete { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 9px; margin: 2px 0 0; padding: 0; background: none; border: none; } .cr-tete img { width: 24px; height: 24px; object-fit: contain; flex: none; } .cr-tete i { display: none; } /* « ネットワーク » : redondant, le nom suffit */ .cr-tete b { font-size: 15.5px; font-weight: 700; color: var(--ink); letter-spacing: .01em; } /* ---- le QR : carte blanche + badge de la pièce, léger flottement ---- */ .cr-qrc { position: relative; padding: 10px; border-radius: 18px; background: #fff; box-shadow: 0 6px 24px rgba(224,115,159,.22), 0 2px 8px rgba(0,0,0,.35); } /* la carte fournit déjà le cadre blanc : on retire celui que la règle « polish » de fin de fichier donne au QR nu */ .cr-qrc .cr-qr { display: block; margin: 0; padding: 0; background: none; border-radius: 0; box-shadow: none; animation: none; } .cr-qrc { animation: cr-entre .55s cubic-bezier(.22,.9,.32,1.2) backwards, cr-flotte 4.5s ease-in-out 1s infinite; } /* la cascade nth-child ne doit pas écraser le départ différé du flottement (les délais d'une liste d'animations se recyclent) */ .cr > .cr-qrc { animation-delay: .07s, 1.2s; } .cr-qrb { position: absolute; right: -8px; bottom: -8px; width: 34px; height: 34px; border-radius: 50%; background: var(--nuit, #17131c); border: 2px solid rgba(255,255,255,.9); display: grid; place-items: center; box-shadow: 0 3px 10px rgba(0,0,0,.4); } .cr-qrb img { width: 21px; height: 21px; object-fit: contain; } @keyframes cr-flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @media (prefers-reduced-motion: reduce) { .cr-qrc { animation: none; } } /* ---- les valeurs ---- */ .cr-champ { margin: 0; width: 100%; } .cr-lab { display: block; margin-bottom: 5px; font-size: 11px; letter-spacing: .05em; color: var(--faint); } /* LE MONTANT — la valeur dont une décimale de travers coûte le paiement : la première chose que l'œil attrape. Un reflet glisse dedans en continu : vivant, pas clignotant. */ .cr-bloc-mt .cr-val { display: flex; align-items: baseline; justify-content: center; gap: 9px; padding: 0; background: none; border: none; } /* flex:none + centré : sans ça, le flex:1 hérité de la rangée adresse poussait le montant à gauche et le bouton à droite (2026-08-26). */ .cr-bloc-mt .cr-val code { flex: none; text-align: center; } .cr-mt { font: 700 34px/1.1 var(--num); letter-spacing: .01em; word-break: normal; background: linear-gradient(100deg, var(--rose) 38%, #ffe3ef 50%, var(--rose) 62%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: cr-reflet 3.2s linear infinite; } @keyframes cr-reflet { from { background-position: 125% 0; } to { background-position: -125% 0; } } @media (prefers-reduced-motion: reduce) { .cr-mt { animation: none; color: var(--rose); background: none; } } .cr-bloc-mt .cr-val b { font-size: 13px; color: var(--rose-3); font-weight: 700; } /* L'adresse : la SEULE rangée en chip. */ .cr-val { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.045); border: 1px solid var(--line-2); } .cr-val code { flex: 1; min-width: 0; font-family: ui-monospace, Consolas, monospace; color: var(--ink); word-break: break-all; line-height: 1.5; text-align: left; } .cr-val b { flex: none; font-size: 11px; color: var(--faint); font-weight: 600; } /* Assez petit pour tenir sur UNE ligne (42 caractères 0x…) : une coupure arbitraire laissait un caractère orphelin en ligne 2. */ .cr-ad { font-size: 10.5px; letter-spacing: -.01em; white-space: nowrap; overflow-x: auto; scrollbar-width: none; } .cr-ad::-webkit-scrollbar { display: none; } .cr-cp { flex: none; padding: 7px 13px; border: 0; border-radius: 999px; cursor: pointer; background: rgba(224,115,159,.16); color: var(--rose); font-size: 11.5px; font-weight: 700; white-space: nowrap; transition: background .16s, color .16s, transform .16s; } .cr-cp:hover { background: rgba(224,115,159,.3); } .cr-cp:active { transform: scale(.94); } .cr-cp.ok { background: rgba(126,208,168,.22); color: #8fdcb4; } /* ---- les garde-fous : deux puces, plus de pavés ---- */ .cr-puces { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .cr-puce { padding: 6px 13px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--line-2); font-size: 11px; font-weight: 600; color: var(--dim); white-space: nowrap; } .cr-puce-avert { color: #f0c294; border-color: rgba(229,179,140,.35); background: rgba(229,179,140,.08); } /* ---- le suivi : l'unique surface douce, teintée par l'état. Le point respire (halo qui s'étend) et la jauge se vide avec le temps restant — l'attente se voit, elle ne se lit plus. ---- */ .cr-suivi { width: 100%; margin-top: 2px; padding: 13px 16px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); text-align: center; } .cr-etat { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0; font-size: 13px; color: var(--dim); } .cr-etat::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--rose); animation: cr-onde 1.8s ease-out infinite; } @keyframes cr-onde { 0% { box-shadow: 0 0 0 0 rgba(224,115,159,.45); } 70% { box-shadow: 0 0 0 9px rgba(224,115,159,0); } 100% { box-shadow: 0 0 0 0 rgba(224,115,159,0); } } @media (prefers-reduced-motion: reduce) { .cr-etat::before { animation: none; } } .cr-barre { height: 4px; margin-top: 11px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; } .cr-barre i { display: block; height: 100%; width: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--rose), #ffb3d0); transition: width 1s linear; } .cr-temps { margin: 6px 0 0; font-size: 11px; color: var(--faint); font-family: var(--num); } .cr-vu .cr-suivi { background: rgba(224,115,159,.11); border-color: rgba(224,115,159,.28); } .cr-vu .cr-etat { color: #ffb3d0; } .cr-ok .cr-suivi { background: rgba(126,208,168,.13); border-color: rgba(126,208,168,.32); } .cr-ok .cr-etat { color: #a6e2c2; } .cr-ok .cr-etat::before { background: #7ed0a8; animation: none; } .cr-exp .cr-suivi { background: rgba(255,255,255,.03); } .cr-exp .cr-etat { color: var(--faint); } .cr-exp .cr-etat::before { background: var(--faint); animation: none; } .cr-ok .cr-temps, .cr-exp .cr-temps, .cr-ok .cr-barre, .cr-exp .cr-barre { display: none; } .cr-vu .cr-barre i { background: linear-gradient(90deg, #7ed0a8, #a6e2c2); } @media (min-width: 620px) { .rejoindre { place-items: center; } .rej-c { border-radius: var(--r-lg); border-bottom: 1px solid var(--line-2); padding-bottom: 22px; } } /* ------------------------------------------------------------- 13ter. Pages de rubrique ------------------------------------------------------------- */ /* Le chapeau est un vrai panneau, décoré comme le reste : sans cela une page de liste n'était qu'un titre posé sur un mur de cartes. */ .rub { position: relative; overflow: hidden; margin: 2px 0 14px; padding: clamp(11px, 1.6vw, 15px) clamp(14px, 2vw, 18px); border: 1px solid var(--line); border-radius: var(--r-lg); background: radial-gradient(80% 130% at 12% 0%, rgba(224,115,159,.1), transparent 62%), var(--pan); display: flex; align-items: center; gap: 12px 14px; flex-wrap: wrap; } .tape-rub { top: -7px; left: 34px; width: 62px; height: 17px; transform: rotate(-7deg); } .rub-cat { flex: none; margin-bottom: -6px; } .rub-t { flex: 1 1 200px; min-width: 0; } .rub h1 { font: 400 clamp(23px, 4vw, 33px)/var(--hand-lh) var(--hand); } .rub-s { margin: 5px 0 0; font-size: 12.5px; color: var(--faint); } .rub-c { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .rub-doodles { position: absolute; top: 16px; right: 18px; display: flex; gap: 6px; color: var(--rose); opacity: .5; } /* Étiquettes de tri et de rubrique */ .ch { display: inline-flex; align-items: center; gap: 5px; padding: 7px 13px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--line); font-size: 12.5px; color: var(--dim); white-space: nowrap; transition: border-color .16s, color .16s, background .16s; } .ch:hover { color: var(--ink); border-color: var(--line-2); } .ch.on { background: var(--rose-b); border-color: rgba(224,115,159,.4); color: var(--rose); font-weight: 600; } .ch-x { background: var(--rose-2); border-color: transparent; color: #fff; font-weight: 600; } .ch-x b { font-weight: 700; opacity: .8; } .ch-x:hover { background: #d35e8f; color: #fff; } .ch-sep { width: 1px; height: 18px; background: var(--line-2); margin: 0 4px; } .vide { padding: 40px 0; text-align: center; color: var(--faint); font-size: 13px; } /* ------------------------------------------------------------- Le fil vertical de l'accueil Un écran = un titre. Le conteneur défile à l'intérieur de lui-même avec un accrochage par diapositive ; la page en dessous (formules, pied) reste accessible en faisant défiler la fenêtre elle-même. dvh et non vh : sur mobile, vh compte la barre d'adresse et fait déborder d'autant — c'est le décalage d'un demi-écran classique des fils vidéo mal réglés. ------------------------------------------------------------- */ /* La hauteur écrite ici n'est qu'un REPLI pour navigateur sans JavaScript : la vraie hauteur est mesurée par pc5.js (filTaille), qui soustrait la place réelle de la barre du haut et de la barre d'onglets. Les valeurs en dur se trompaient de 47 px sur mobile — la barre du haut n'a pas la même hauteur selon la largeur. */ .fil { height: calc(100vh - 130px); height: calc(100dvh - 130px); overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y mandatory; border-radius: var(--r-lg); background: #000; scrollbar-width: none; } .fil::-webkit-scrollbar { display: none; } /* Une diapositive = trois plans : 1. le FOND — l'affiche floutée et assombrie, étalée sur tout l'écran. C'est elle qui donne sa couleur à la scène : fini le letterbox noir de part et d'autre d'une vidéo paysage ; 2. le CADRE — la vidéo (ou l'affiche en attendant), nette, en 16/9, coins arrondis, ombre portée, un bout de washi posé de travers — la carte de la maquette, en grand ; 3. la LÉGENDE — titre, durée, bouton, sur un voile en bas. Le cadre est borné DEUX fois : par la largeur disponible et par la hauteur de la diapositive (sinon un écran court le ferait passer sous la légende). */ .fil-s { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; display: grid; place-items: center; padding: 16px clamp(14px, 3vw, 40px) 118px; background: var(--bg); } .fil-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(34px) saturate(1.15) brightness(.34); transform: scale(1.18); /* le flou éclaircit les bords : on les sort de l'écran */ } /* Un souffle de rose sur le fond, pour rester chez shh.video et pas dans un lecteur générique. */ .fil-s::before { content: ''; position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse at 20% 0%, rgba(224,115,159,.14), transparent 55%); pointer-events: none; } /* Le cadre ÉPOUSE la vidéo : chaque extrait a son propre format, et c'est lui qui commande. --rv porte le rapport largeur/hauteur, mesuré sur la vidéo elle-même (loadedmetadata) — 16/9 n'est que le point de départ. La même variable borne la largeur par la hauteur disponible : un portrait donne un cadre étroit et haut, un paysage un cadre large, jamais de rognage ni de bandes. Le cadre ne contient QUE la vidéo. Il porte lui-même les coins, l'ombre et un fond sombre translucide : tant que la vidéo n'est pas prête, c'est un écran éteint — l'affiche nette qu'on y mettait dépassait derrière la vidéo dès que les formats différaient. */ .fil-cadre { position: relative; z-index: 1; width: min(100%, calc((100vh - 330px) * var(--rv, 1.7778))); max-width: 1080px; aspect-ratio: var(--rv, 1.7778); border-radius: 16px; background: rgba(10, 8, 14, .55); box-shadow: 0 26px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255,255,255,.07); } .fil-cadre video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 16px; background: #0b0910; } .tape-fil { position: absolute; top: -11px; left: 26px; z-index: 2; transform: rotate(-5deg); } /* La barre de lecture : fine, au bas du cadre, cliquable pour se déplacer. Le ::after invisible élargit la zone de clic — 4 px nus sont injouables au doigt. */ .fil-prog { position: absolute; left: 12px; right: 12px; bottom: 9px; z-index: 3; height: 4px; border-radius: 999px; background: rgba(255,255,255,.24); cursor: pointer; } .fil-prog::after { content: ''; position: absolute; inset: -9px 0; } .fil-prog i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--rose); transition: width .25s linear; } /* Le « +10s / −10s » d'un double tap : une bulle qui s'efface. */ .fil-saut { position: absolute; top: 50%; z-index: 4; padding: 11px 17px; border-radius: 999px; background: rgba(0, 0, 0, .58); backdrop-filter: blur(4px); font-style: normal; font-size: 14px; font-weight: 700; color: #fff; pointer-events: none; animation: fil-saut .65s ease forwards; } .fil-saut.g { left: 10%; } .fil-saut.d { right: 10%; } @keyframes fil-saut { 0% { opacity: 0; transform: translateY(-50%) scale(.8); } 18% { opacity: 1; transform: translateY(-50%) scale(1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-50%) scale(1.05); } } @media (prefers-reduced-motion: reduce) { .fil-saut { animation-duration: .35s; } } /* La pastille de pause / reprise, au centre du cadre. Les deux barres et le triangle sont DESSINÉS : les caractères ⏸ et ⏵ manquent à plusieurs polices japonaises et s'affichaient en carré vide. */ .fil-etat { position: absolute; top: 50%; left: 50%; z-index: 4; display: grid; grid-auto-flow: column; place-items: center; gap: 6px; width: 64px; height: 64px; border-radius: 50%; background: rgba(0, 0, 0, .55); backdrop-filter: blur(4px); pointer-events: none; animation: fil-etat .62s ease forwards; } .fil-etat b { display: block; width: 7px; height: 24px; border-radius: 2px; background: #fff; } .fil-etat.lire b + b { display: none; } .fil-etat.lire b { width: 0; height: 0; margin-left: 5px; background: none; border-radius: 0; border-left: 21px solid #fff; border-top: 13px solid transparent; border-bottom: 13px solid transparent; } @keyframes fil-etat { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.7); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 60% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.18); } } @media (prefers-reduced-motion: reduce) { .fil-etat { animation-duration: .35s; } } .fil-voile { position: absolute; inset: auto 0 0 0; height: 200px; z-index: 2; background: linear-gradient(180deg, transparent, rgba(8, 6, 12, .88)); pointer-events: none; } .fil-bas { position: absolute; left: clamp(16px, 3vw, 40px); right: 16px; bottom: 20px; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; } .fil-t { max-width: 46ch; font-size: 15.5px; font-weight: 600; line-height: 1.4; text-shadow: 0 1px 4px rgba(0,0,0,.85); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .fil-d { padding: 4px 11px; border-radius: 999px; background: rgba(255,255,255,.1); backdrop-filter: blur(6px); font-size: 11px; color: rgba(255,255,255,.85); } .fil-fiche { margin-top: 3px; padding: 10px 20px; font-size: 13px; } .fil-son { position: absolute; top: 14px; right: 14px; z-index: 3; width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center; background: rgba(0,0,0,.45); color: #fff; backdrop-filter: blur(4px); } .fil-son:hover { background: rgba(0,0,0,.65); } .fil-son span { display: grid; place-items: center; } /* display:grid l'emporte sur l'attribut hidden — sans cette ligne les deux icônes (muet ET sonore) s'affichaient empilées. Même piège déjà payé sur .rej-pas : toute règle display sur un élément que le script masque par [hidden] doit prévoir ce cas. */ .fil-son span[hidden] { display: none; } .fil-astuce { margin: 10px 0 0; text-align: center; font-size: 11.5px; color: var(--faint); } @media (max-width: 760px) { /* Sous la barre du haut et au-dessus de la barre d'onglets. */ .fil { height: calc(100vh - 174px); height: calc(100dvh - 174px); border-radius: var(--r); } .fil-s { padding: 12px 12px 112px; } .tape-fil { left: 16px; width: 62px; } .fil-voile { height: 170px; } } /* ------------------------------------------------------------- Classement — les trois de tête, puis la grille Pas de podium centré : le premier est en TÊTE DE FILE, en haut à gauche, là où la lecture commence. Chercher le vainqueur au milieu d'une rangée est un effort de plus pour rien. Ils sortent tout de même de la grille ordinaire — trois colonnes larges au lieu de six étroites — et portent une médaille posée à cheval sur l'affiche. Sous chaque titre, une barre dit l'écart avec le premier. ------------------------------------------------------------- */ .podium { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 24px; padding: 0; list-style: none; } .pod { display: flex; flex-direction: column; min-width: 0; } .pod-m { position: relative; z-index: 3; align-self: flex-start; width: 34px; height: 34px; margin: 0 0 -17px 10px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--bg); font-size: 16px; font-weight: 800; font-style: normal; color: #2a1520; } .pod-1 .pod-m { background: linear-gradient(160deg, #ffe0a0, #e0a33a); box-shadow: 0 0 0 4px rgba(224,163,58,.16); } .pod-2 .pod-m { background: linear-gradient(160deg, #e6e0ec, #a79db3); } .pod-3 .pod-m { background: linear-gradient(160deg, #ecbb95, #b87d51); } /* Le premier a droit à un liseré : il gagne, ça doit se voir sans avoir à lire le chiffre. */ .pod-1 .carte { border-color: rgba(224,163,58,.45); } .rang-i { display: flex; flex-direction: column; min-width: 0; } .rang-p { margin-top: 7px; } .jauge { display: block; height: 4px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; } .jauge i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--rose-2), var(--rose)); } .pod-1 .jauge i { background: linear-gradient(90deg, #e0a33a, #ffe0a0); } @media (max-width: 460px) { .podium { gap: 8px; } .pod-m { width: 27px; height: 27px; margin: 0 0 -13px 8px; font-size: 13px; } } /* Catégories : des pastilles, comme les étiquettes d'une fiche. */ .chips-g { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .chips-g a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 14px; border-radius: 12px; background: var(--carte); border: 1px solid var(--line); transition: border-color .18s, transform .18s; } .chips-g a:hover { border-color: rgba(224,115,159,.45); transform: translateY(-2px); } /* Une seule ligne par pastille : les noms longs prennent des points de suspension (le nom complet reste dans le title), et toutes les pastilles gardent la même hauteur. */ .chips-g b { font-size: 13.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chips-g i { font-style: normal; font-size: 11px; color: var(--faint); white-space: nowrap; } /* Idols : une pastille de chat, un nom, un compte. */ /* Vignettes d'actrices (refonte 2026-08-23) : le PORTRAIT est la carte — format 3/4, nom posé sur un dégradé, nombre de films en pastille avec l'icône movie rose de l'ancien menu. */ .idols { display: grid; gap: 13px; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); } .idols a { position: relative; display: block; padding: 0; border-radius: 14px; overflow: hidden; background: var(--carte); border: 1px solid var(--line); transition: border-color .2s, transform .2s, box-shadow .2s; } .idols a:hover { border-color: rgba(224,115,159,.55); transform: translateY(-4px); box-shadow: 0 14px 30px -16px rgba(224,115,159,.35); } .idol-f { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 4; background: var(--pan-2); overflow: hidden; } .idol-f > img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: transform .5s; } .idols a:hover .idol-f > img { transform: scale(1.07); } .idol-chat { display: grid; place-items: center; opacity: .45; } .idol-voile { position: absolute; inset: auto 0 0 0; height: 62%; z-index: 2; background: linear-gradient(to top, rgba(9,7,13,.92) 8%, rgba(9,7,13,.42) 55%, transparent 100%); pointer-events: none; } .idol-sur { position: absolute; left: 10px; right: 10px; bottom: 9px; z-index: 3; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .idols b { font-size: 13px; font-weight: 600; line-height: 1.3; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .idol-n { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border-radius: 999px; background: rgba(12,10,18,.62); border: 1px solid rgba(224,115,159,.3); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); font-style: normal; font-size: 11.5px; font-weight: 700; color: #f4a6c8; } .idol-mov { width: 14px; height: 14px; display: block; } /* Pagination */ .pager { display: flex; justify-content: center; gap: 6px; margin: 26px 0 0; flex-wrap: wrap; } .pg { min-width: 36px; height: 36px; padding: 0 10px; border-radius: 10px; display: grid; place-items: center; background: var(--carte); border: 1px solid var(--line); font-size: 13px; color: var(--dim); } .pg:hover { border-color: rgba(224,115,159,.45); color: var(--ink); } .pg.on { background: var(--rose-b); border-color: rgba(224,115,159,.45); color: var(--rose); font-weight: 700; } .pg-f .ic { transform: scaleX(-1); } /* Pages d'information */ .info { max-width: 560px; margin: 0 auto; text-align: center; padding: 10px 0 40px; } .info-ic { display: grid; place-items: center; color: var(--rose); margin-bottom: 16px; } .postit-info { display: inline-block; margin: 0 auto 22px; max-width: 260px; } .info-t { font-size: 13.5px; color: var(--dim); margin-bottom: 20px; } /* ------------------------------------------------------------- 13quater. Pages de texte et formulaires ------------------------------------------------------------- */ .doc { max-width: 74ch; margin: 0 auto; padding: 4px 0 40px; font-size: 14.5px; line-height: 1.85; color: var(--dim); } .doc h1, .doc h2, .doc h3 { margin: 28px 0 10px; color: var(--ink); font: 400 clamp(18px, 2.6vw, 22px)/var(--hand-lh) var(--hand); } .doc p { margin: 0 0 14px; } .doc a { color: var(--rose); text-decoration: underline; text-underline-offset: 2px; } .doc ul, .doc ol { margin: 0 0 14px; padding-left: 20px; } .doc li { margin: 5px 0; list-style: disc; } .doc ol li { list-style: decimal; } .doc img { max-width: 100%; border-radius: var(--r); margin: 12px 0; } .doc table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 13px; } .doc td, .doc th { padding: 8px 10px; border: 1px solid var(--line); text-align: left; } .doc hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; } .doc strong, .doc b { color: var(--ink); } .form-w { position: relative; max-width: 520px; margin: 0 auto; padding: 0 0 46px; } .form-p { background: var(--pan); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(18px, 4vw, 28px); } .form-p label { display: block; margin: 0 0 6px; font-size: 12px; color: var(--faint); } .form-p input, .form-p textarea { width: 100%; margin: 0 0 16px; padding: 12px 14px; background: rgba(255,255,255,.045); border: 1px solid var(--line-2); border-radius: 12px; color: var(--ink); font: inherit; font-size: 14.5px; resize: vertical; } .form-p input:focus, .form-p textarea:focus { outline: none; border-color: rgba(224,115,159,.55); } .form-p .btn { width: 100%; justify-content: center; } .form-note { margin: 0 0 16px; font-size: 12px; line-height: 1.7; color: var(--faint); } .form-note a { color: var(--rose); } .form-liens { margin: 16px 0 0; text-align: center; font-size: 12.5px; color: var(--faint); } .form-liens a { color: var(--rose); } .form-liens i { font-style: normal; margin: 0 8px; opacity: .5; } .form-cat { position: absolute; right: 6px; bottom: -6px; opacity: .5; pointer-events: none; } .msg-ok, .msg-ko { margin: 0 0 14px; padding: 13px 16px; border-radius: 12px; font-size: 13.5px; } .msg-ok { background: rgba(126,208,168,.12); border: 1px solid rgba(126,208,168,.3); color: #a6e2c2; } .msg-ko { background: rgba(224,115,159,.12); border: 1px solid rgba(224,115,159,.32); color: #ff9ec8; } .msg-ko:empty { display: none; padding: 0; margin: 0; border: 0; } /* ------------------------------------------------------------- 14. Navigation du petit écran Reprise du principe de la .tabbar de /pc/ : barre fixe en bas, cinq onglets, masquée au-dessus de 768 px (voir § 16). ------------------------------------------------------------- */ .tabbar { display: none; position: fixed; inset: auto 0 0 0; z-index: 60; background: rgba(11,9,16,.9); border-top: 1px solid var(--line); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); padding: 7px max(6px, env(safe-area-inset-left)) calc(7px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-right)); } .tabbar ul { display: flex; justify-content: space-around; } .tabbar li { flex: 1; } .tabbar a, .tabbar button { position: relative; width: 100%; display: grid; justify-items: center; gap: 3px; padding: 7px 4px 5px; border-radius: 12px; color: var(--faint); font-size: 10px; font-weight: 600; line-height: 1.2; transition: color .16s; } .tabbar a span, .tabbar button span:last-child { white-space: nowrap; } .tabbar a:hover, .tabbar button:hover { color: var(--dim); } /* L'onglet courant reprend la pastille rose de la colonne de gauche. */ .tabbar a[aria-current] { color: var(--rose); } .tabbar a[aria-current]::before { content: ""; position: absolute; top: 3px; left: 50%; transform: translateX(-50%); width: 38px; height: 26px; border-radius: 999px; background: var(--rose-b); } .tabbar a[aria-current] .ic { position: relative; } /* Les SVG roses partagés avec .navh-l (2026-08-24). */ .tabbar .ic-tab, .feuille-n .ic-tab { width: 21px; height: 21px; object-fit: contain; } .feuille-n .ic-tab { width: 19px; height: 19px; } .tab-cat { display: grid; place-items: center; height: 21px; } /* La feuille qui porte le reste du menu */ .feuille { position: fixed; inset: 0; z-index: 75; display: grid; align-items: end; background: rgba(6,5,9,.7); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fondu .22s ease; } .feuille[hidden] { display: none; } .feuille-c { background: var(--pan); border-top: 1px solid var(--line-2); border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 12px 14px calc(18px + env(safe-area-inset-bottom)); max-height: 82vh; overflow-y: auto; animation: monte .28s cubic-bezier(.22,1,.36,1); } .feuille-n a { display: flex; align-items: center; gap: 13px; padding: 12px 12px; border-radius: 12px; color: var(--dim); font-size: 14.5px; } .feuille-n a:hover { background: rgba(255,255,255,.05); color: var(--ink); } .feuille-h { margin: 14px 0 4px; padding: 0 12px; display: flex; align-items: center; gap: 6px; color: var(--faint); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .feuille-h .ic { color: var(--rose); } .feuille-x { width: 100%; justify-content: center; margin-top: 18px; } /* ------------------------------------------------------------- 15. Pied ------------------------------------------------------------- */ .bas { text-align: center; padding: 30px var(--pad) 36px; } .bas-chat { display: block; opacity: .45; margin-bottom: 4px; } .bas-chat svg { margin: 0 auto; } /* Six liens sur une ligne, centrés, en pastilles au survol — le même geste que le menu de l'affiliation. Rien à aligner, rien à titrer : le pied respire au lieu de simuler une grille. */ .bas-liens { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 4px; max-width: 760px; margin: 0 auto 20px; } .bas-liens a { padding: 7px 13px; border-radius: 999px; font-size: 12.5px; color: var(--faint); transition: color .16s, background .16s; } .bas-liens a:hover { color: var(--ink); background: rgba(255,255,255,.05); } .bas-liens a.hors i { font-style: normal; margin-left: 4px; opacity: .55; font-size: 10px; } /* Le filet ne traverse pas toute la page : il souligne la signature, il ne coupe pas le pied en deux. */ .bas-c { max-width: 300px; margin: 0 auto; padding-top: 18px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--faint); } .bas-note { max-width: 66ch; margin: 10px auto 0; font-size: 11.5px; line-height: 1.7; color: #55506a; } /* ------------------------------------------------------------- 16. Largeurs ------------------------------------------------------------- */ @media (min-width: 720px) { .hero { grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); } .hero-t { text-align: left; } .hero-t .hero-a { justify-content: flex-start; } } @media (min-width: 1080px) { .top { grid-template-columns: var(--side) minmax(0, 1fr) auto; } .grid { grid-template-columns: var(--side) minmax(0, 1fr); } .quest { max-width: 660px; } } @media (min-width: 1320px) { .grid { grid-template-columns: var(--side) minmax(0, 1fr) var(--rail); } /* Page de rubrique : la place de la colonne de droite revient à la grille, qui gagne deux vignettes par rangée. */ .grid.sans-rail { grid-template-columns: var(--side) minmax(0, 1fr); } /* Collantes, mais jamais plus hautes que l'écran : sinon le bas de la colonne devient inatteignable, la page défilant sous elle. */ .side, .rail { position: sticky; top: 16px; align-self: start; max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; } .side::-webkit-scrollbar, .rail::-webkit-scrollbar { display: none; } } /* En dessous de 1080 px la colonne de gauche passe en bandeau horizontal : garder un tiroir latéral sur mobile coûterait plus qu'il ne rapporte pour une maquette. */ @media (max-width: 1079px) { .top { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "logo actions" "quest quest"; } .logo { grid-area: logo; } .top-r { grid-area: actions; } .quest { grid-area: quest; } .invite b { display: none; } .btn-join { padding: 8px 13px; font-size: 12.5px; } .me-l { display: none; } /* l'avatar suffit, la barre est étroite */ /* Sur une barre étroite, le chat qui dépasse du logo finit SOUS le bouton « rejoindre » — constaté à 390 px : l'oreille recouvrait le libellé. Il redeviendra visible dès qu'il y a de la place. */ .logo-cat { display: none; } .side { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 10px; } .side .nav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; } .side .nav::-webkit-scrollbar { display: none; } .nav-a { white-space: nowrap; padding: 8px 12px; } .nav-a span { font-size: 13px; } .nav-doodle, .nav-plus { display: none; } .cut, .side-h, .postit, .side-c { display: none; } .nav-2 { display: flex; gap: 4px; } .fleche { display: none; } .hero-note { display: none; } } /* Sous 768 px, la barre du bas remplace la colonne de gauche : garder les deux ferait deux navigations concurrentes à l'écran. */ @media (max-width: 768px) { .tabbar { display: block; } .side { display: none; } body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); } .bas { padding-bottom: 16px; } } @media (max-width: 719px) { .hero-art { transform: scale(.82); margin-bottom: -14px; } .hero-doodles { display: none; } .piste > * { width: clamp(118px, 36vw, 134px); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } .piste { scroll-behavior: auto; } .carte:hover { transform: none; } .carte:hover .carte-a img { transform: none; } } /* ------------------------------------------------------------- Espace membre — mysub / myfavorite / mydownload, et le bouton « ma liste » de la fiche. Même vocabulaire que le reste. ------------------------------------------------------------- */ .mem-note { background: var(--rose-b); border: 1px solid var(--rose-2); color: var(--rose-3); padding: 10px 14px; border-radius: 10px; margin: 0 0 16px; font-size: 13.5px; } .mem-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 4px 0 26px; } .mem-box { background: var(--pan); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; } .mem-l { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); font-weight: 600; } .mem-v { font-size: 18px; font-weight: 700; color: var(--ink); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .mem-v i { font-style: normal; font-size: 13px; color: var(--dim); } .mem-ok { color: #8fe0b0; } .mem-off { color: var(--dim); } .mem-ko { color: #f08a9b; font-size: 12px; } .mem-stop { margin-top: 8px; align-self: flex-start; font-size: 12.5px; } .mem-histo { list-style: none; margin: 8px 0 30px; padding: 0; max-width: 560px; } .mem-histo li { display: flex; justify-content: space-between; gap: 14px; padding: 10px 12px; border-bottom: 1px dashed var(--line-2); font-size: 13.5px; flex-wrap: wrap; } .mem-histo li span { color: var(--dim); white-space: nowrap; } .mem-histo.mem-dl li a { color: var(--rose-3); min-width: 0; overflow-wrap: anywhere; } .mem-sous { color: var(--faint); font-size: 12px; margin: -4px 0 10px; } .mem-vide { text-align: center; padding: 30px 0 10px; } .malist .ml-off, .malist .ml-on { display: inline-flex; align-items: center; gap: 6px; } .malist .ml-on { display: none; color: var(--rose-3); } .malist.on .ml-off { display: none; } .malist.on .ml-on { display: inline-flex; } .moi-compte { margin-bottom: 6px; } @media (max-width: 560px) { .mem-grid { grid-template-columns: 1fr; } } /* ------------------------------------------------------------- Séries — les vraies vignettes du serveur d'images, comme /pc/. Sans vignette (onerror), le dessin pastel reprend sa place. ------------------------------------------------------------- */ .cards-series { grid-template-columns: repeat(auto-fill, minmax(222px, 1fr)); } .serie-c { display: block; background: var(--carte); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; padding-bottom: 11px; transition: border-color .18s, transform .18s; } .serie-c:hover { border-color: rgba(224,115,159,.45); transform: translateY(-2px); } .serie-c img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; margin-bottom: 9px; } .serie-c .serie-art { display: none; } .serie-c.sans-img .serie-art { display: grid; place-items: center; height: 86px; margin-bottom: 6px; } .serie-c .coll-t, .serie-c .coll-n { display: block; padding: 0 12px; } .serie-c .coll-t { font-size: 13px; font-weight: 600; line-height: 1.35; margin-bottom: 4px; } .serie-c .coll-n { font-size: 11.5px; color: var(--faint); } /* Défilement doux vers les ancres (ex. « 掲示板 » -> #plans), sauf si le système demande moins d'animations. */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ------------------------------------------------------------- Rappel du mot de passe — carte centrée, chat qui regarde. ------------------------------------------------------------- */ .remi { display: grid; place-items: center; padding: 64px 0 16px; } .remi-c { position: relative; width: min(430px, 100%); background: var(--pan); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 40px 26px 26px; text-align: center; } .remi-cat { position: absolute; top: -49px; left: 50%; transform: translateX(-50%); } .remi-c h1 { font: 400 25px/1.2 var(--hand); margin: 0 0 10px; } .remi-note { color: var(--dim); font-size: 13px; line-height: 1.55; margin: 8px 0; } .remi-c form { display: grid; gap: 10px; margin: 14px 0 4px; } .remi-c input { padding: 11px 13px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg); color: var(--ink); font: inherit; text-align: center; } .remi-c input:focus { outline: none; border-color: var(--rose); } .remi-ok i { display: block; margin: 6px 0 2px; color: var(--rose-3); } .remi-ok .btn { margin-top: 12px; } .remi-ko { color: #f08a9b; background: rgba(240,138,155,.1); border: 1px solid rgba(240,138,155,.35); padding: 8px 10px; border-radius: 10px; font-size: 13px; margin: 10px 0; } .remi-liens { margin-top: 16px; font-size: 12.5px; color: var(--faint); } .remi-liens a { color: var(--rose-3); } .remi-liens i { font-style: normal; margin: 0 6px; } /* Chapeau d'une liste filtrée par actrice : son portrait en grand. */ .rub-idol { align-items: center; } .rub-photo { flex: none; width: clamp(84px, 14vw, 112px); height: clamp(84px, 14vw, 112px); border-radius: 16px; overflow: hidden; border: 2px solid var(--rose-2); box-shadow: 0 8px 26px rgba(0,0,0,.5); background: var(--pan-2); } .rub-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; } @media (max-width: 560px) { .rub-photo { width: 76px; height: 76px; border-radius: 12px; } } /* ------------------------------------------------------------- Accueil « mur de photos » (2026-08-20, maçonnerie 2026-08-21) — plein d'images de films, aucune étiquette, en VIGNETTES INÉGALES façon gunner (adultdc.com) : colonnes CSS, coins carrés, image nue, voile + rond de lecture au survol. Les vignettes du serveur sont TOUTES en 552×414 : l'inégalité ne peut pas venir des images. On l'obtient par un motif de formats pseudo-aléatoire (périodes 5, 7 et 11 superposées) et le recadrage object-fit — le mur ne se répète qu'au bout de 385 cases, il a l'air naturel. ------------------------------------------------------------- */ .mur { columns: 6 210px; column-gap: 10px; } .mur a { position: relative; display: block; overflow: hidden; margin: 0 0 10px; aspect-ratio: 3 / 4; border-radius: 10px; border: none; /* coins arrondis (2026-08-24) */ background: #100d15; break-inside: avoid; -webkit-column-break-inside: avoid; } /* Le motif qui rend le mur inégal. */ .mur a:nth-child(5n+2) { aspect-ratio: 1 / 1; } .mur a:nth-child(5n+3) { aspect-ratio: 4 / 5; } .mur a:nth-child(5n+4) { aspect-ratio: 4 / 3; } .mur a:nth-child(5n) { aspect-ratio: 2 / 3; } .mur a:nth-child(7n+3) { aspect-ratio: 5 / 6; } .mur a:nth-child(7n+6) { aspect-ratio: 3 / 4; } .mur a:nth-child(11n+5) { aspect-ratio: 3 / 5; } .mur a:nth-child(11n+8) { aspect-ratio: 1 / 1; } .mur img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s; } .mur a:hover img { transform: scale(1.07); } .mur a::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(9,7,13,0); transition: background .25s; } .mur a:hover::before { background: rgba(9,7,13,.45); } .mur a::after { content: ""; position: absolute; top: 50%; left: 50%; z-index: 2; width: 54px; height: 54px; margin: -27px 0 0 -27px; border: 2px solid var(--rose-3); border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.6 5.8 18.4 12l-9.8 6.2z' fill='%23f4a6c8'/%3E%3C/svg%3E") center/24px no-repeat, rgba(12,10,18,.55); transform: scale(0); opacity: 0; transition: transform .25s, opacity .25s; } .mur a:hover::after { transform: scale(1); opacity: 1; } /* Les cases du coin secret, éparpillées : visuel « Locked » du site, et au survol le rond montre un CADENAS, pas la lecture — la case ouvre la fenêtre d'invitation (data-ferme), elle ne lit rien. */ .mur a.verrou::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5.5' y='10.5' width='13' height='9' rx='2' fill='none' stroke='%23f4a6c8' stroke-width='1.8'/%3E%3Cpath d='M8.5 10.5V7.5a3.5 3.5 0 0 1 7 0v3' fill='none' stroke='%23f4a6c8' stroke-width='1.8'/%3E%3C/svg%3E") center/24px no-repeat, rgba(12,10,18,.55); } .mur-plus { text-align: center; margin: 28px 0 8px; } @media (prefers-reduced-motion: reduce) { .mur a:hover img { transform: none; } } /* ------------------------------------------------------------- Refonte 2026-08-21 — la navigation quitte la colonne de gauche pour une rangée DISCRÈTE sous la barre du haut : petits liens, pastille rose sur la rubrique courante, filet fin dessous. Seules les rubriques absentes du pied de page y figurent. ------------------------------------------------------------- */ .navh { position: sticky; top: 0; z-index: 55; display: flex; align-items: center; gap: 14px; margin: 2px calc(-1 * var(--pad)) 18px; padding: 8px var(--pad); border-bottom: 1px solid var(--line); background: transparent; transition: background .35s, border-color .35s, box-shadow .35s, padding .25s; } /* Les LIENS glissent horizontalement quand ça manque de place ; les tiroirs (compte, langue) restent hors du couloir qui défile, sinon leurs menus seraient rognés par l'overflow. */ .navh-l { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .navh-l::-webkit-scrollbar { display: none; } .navh .top-r { flex: none; margin-left: auto; } /* Collée en haut (classe posée par le script) : verre dépoli sombre, filet rose très doux, ombre portée — elle flotte sur le mur. */ .navh.colle { background: rgba(11,9,16,.78); backdrop-filter: blur(16px) saturate(1.35); -webkit-backdrop-filter: blur(16px) saturate(1.35); border-bottom-color: rgba(224,115,159,.22); box-shadow: 0 14px 34px -20px rgba(0,0,0,.85); padding-top: 6px; padding-bottom: 6px; } .navh-l a { position: relative; flex: none; padding: 8px 13px; border-radius: 999px; font-size: 13.5px; color: var(--ink); /* éclairci le 2026-08-25 (était --dim) */ transition: color .18s, background .18s; animation: navh-pose .5s cubic-bezier(.22,1,.36,1) backwards; } /* L'entrée en cascade : chaque lien se pose l'un après l'autre. */ .navh-l a:nth-child(1) { animation-delay: .02s; } .navh-l a:nth-child(2) { animation-delay: .07s; } .navh-l a:nth-child(3) { animation-delay: .12s; } .navh-l a:nth-child(4) { animation-delay: .17s; } .navh-l a:nth-child(5) { animation-delay: .22s; } .navh-l a:nth-child(6) { animation-delay: .27s; } @keyframes navh-pose { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } } /* Le souligné rose qui s'étire depuis le centre au survol. */ .navh-l a::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: 3px; height: 2px; border-radius: 2px; background: var(--rose); opacity: 0; transition: left .24s cubic-bezier(.22,1,.36,1), right .24s cubic-bezier(.22,1,.36,1), opacity .18s; } .navh-l a:hover { color: var(--ink); } .navh-l a:hover::after { left: 13px; right: 13px; opacity: .8; } .navh-l a.on { color: var(--rose); background: var(--rose-b); } .navh-l a.on::after { display: none; } /* Sous 769 px : la tabbar du bas porte la navigation — seuls les LIENS s'effacent, les actions (rejoindre, compte, langue) restent collées en haut. */ @media (max-width: 768px) { .navh-l { display: none; } .navh { gap: 8px; justify-content: flex-end; } } @media (prefers-reduced-motion: reduce) { .navh-l a { animation: none; } } /* Les tiroirs ouverts doivent COUVRIR la page : fond pleinement opaque, rien ne transparaît derrière. */ .navh .moi-m { background: #1d1726; border-color: rgba(224,115,159,.28); box-shadow: 0 24px 54px -18px rgba(0,0,0,.98), 0 0 0 1px rgba(0,0,0,.4); } /* La colonne de gauche n'existe plus : la grille rend sa place. */ .side { display: none !important; } @media (min-width: 1080px) { /* L'en-tête n'a plus que deux enfants : logo puis recherche (les actions vivent dans la barre collante). */ .top { grid-template-columns: auto minmax(0, 1fr); } .grid { grid-template-columns: minmax(0, 1fr); } } @media (min-width: 1320px) { /* Plus de colonne de droite (aside retirée le 2026-08-21) : le contenu garde toute la largeur, partout. */ .grid, .grid.sans-rail { grid-template-columns: minmax(0, 1fr); } } /* Le badge « Invite Only » a disparu du balisage ; ceinture. */ .invite { display: none !important; } /* ------------------------------------------------------------- Barre de défilement assortie (2026-08-21) — fine, sombre, pouce arrondi qui rosit sous la souris. Firefox n'accepte que deux couleurs ; WebKit reçoit le dessin complet. ------------------------------------------------------------- */ html { scrollbar-width: thin; scrollbar-color: #4a3a55 #0d0a12; } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: #0d0a12; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #5a4364, #372b42); border-radius: 999px; border: 2px solid #0d0a12; /* respiration autour du pouce */ } ::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { background: linear-gradient(180deg, var(--rose), var(--rose-2)); } ::-webkit-scrollbar-corner { background: #0d0a12; } /* ------------------------------------------------------------- Guide de paiement (payguide.php, 2026-08-21) + onglet vert du pied de page. Le vert tranche exprès : c'est la porte « aide au paiement », on doit la trouver en une seconde. ------------------------------------------------------------- */ .bas-liens a.vert { background: rgba(126,208,168,.12); color: #7ed0a8; border: 1px solid rgba(126,208,168,.35); font-weight: 600; } .bas-liens a.vert:hover { background: rgba(126,208,168,.22); color: #a6e2c2; } .guide { max-width: 880px; margin: 0 auto; } .g-sec { margin-bottom: 18px; padding: 18px 20px; } .g-p { color: var(--dim); font-size: 14px; line-height: 1.7; margin: 8px 0; } .g-sous { margin: 16px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rose-3); } .g-pas { margin: 8px 0 4px; padding: 0 0 0 4px; counter-reset: pas; list-style: none; } .g-pas li { position: relative; padding: 7px 0 7px 38px; color: var(--ink); font-size: 14px; line-height: 1.6; counter-increment: pas; } .g-pas li::before { content: counter(pas); position: absolute; left: 0; top: 6px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--rose-b); color: var(--rose); font-size: 13px; font-weight: 700; } .g-chaines { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; } .g-chaines li { display: grid; place-items: center; } /* Logos transparents (PNG à fond alpha) : posés à même le panneau sombre, sans tuile blanche — bien plus grands pour être lisibles. */ .g-chaines img { height: 72px; width: auto; display: block; } @media (max-width: 520px) { .g-chaines img { height: 56px; } } .g-photos { display: grid; gap: 8px; margin: 14px 0 6px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .g-photos img { width: 100%; height: auto; display: block; border-radius: 8px; border: 1px solid var(--line); background: #fff; } .g-note { color: var(--faint); font-size: 12.5px; line-height: 1.7; margin: 10px 0 0; } .g-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 26px 0 10px; } .g-cta .lnk-doux { color: var(--dim); font-size: 13px; } .g-cta .lnk-doux:hover { color: var(--rose-3); } .rej-guide { color: #7ed0a8; display: inline-flex; align-items: center; gap: 3px; } .rej-guide:hover { color: #a6e2c2; } /* ------------------------------------------------------------- Points (2026-08-21) — badge de possession, coût, solde. ------------------------------------------------------------- */ .pts-badge { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 999px; font-style: normal; background: rgba(126,208,168,.12); border: 1px solid rgba(126,208,168,.3); color: #7ed0a8; font-size: 12.5px; } .pts-cout { display: inline-flex; align-items: baseline; gap: 7px; font-style: normal; color: var(--dim); font-size: 12.5px; } .pts-cout b { color: var(--rose); font-size: 14px; } .moi-pts { margin: 2px 10px 8px; padding: 7px 10px; border-radius: 8px; background: var(--rose-b); color: var(--rose-3); font-size: 12.5px; } .moi-pts b { color: var(--rose); font-size: 14px; } .bas-legal { max-width: 74ch; } /* ------------------------------------------------------------- Guide de paiement v2 — boutons + fenêtres (2026-08-21). ------------------------------------------------------------- */ .g-grille { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 18px 0 8px; } .g-carte { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px; text-align: left; background: var(--pan); border: 1px solid var(--line); border-radius: var(--r); transition: transform .2s, border-color .2s; cursor: pointer; color: var(--ink); font: inherit; } .g-carte:hover { transform: translateY(-3px); border-color: rgba(0,0,0,.55); } .g-carte .g-logos { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } /* Par défaut : transparent et plus gros (logos konbini à fond alpha). */ .g-carte .g-logos img { height: 44px; width: auto; display: block; } /* Exception cartes : Visa/PayPal sont bleu marine → illisibles sur fond sombre ; on leur laisse une petite pastille claire tenue. */ .g-carte[data-gpop="prepaye"] .g-logos img { height: 34px; background: #fff; border-radius: 6px; padding: 5px 8px; } .g-carte b { font-size: 14.5px; } .g-carte span { color: var(--dim); font-size: 12.5px; line-height: 1.55; } .g-carte i { margin-top: 2px; font-style: normal; color: var(--rose); font-size: 12px; font-weight: 600; } .g-pop { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 18px; background: rgba(6,5,9,.74); backdrop-filter: blur(4px); animation: fondu .2s ease; } .g-pop[hidden] { display: none; } .g-pop-c { position: relative; width: min(680px, 100%); max-height: 86vh; overflow-y: auto; background: #1d1726; border: 1px solid rgba(0,0,0,.55); border-radius: var(--r-lg); padding: 24px 26px; box-shadow: 0 30px 70px -20px rgba(0,0,0,.95); animation: monte .25s cubic-bezier(.22,1,.36,1); } .g-pop-c h2 { font: 400 20px/1.35 var(--hand); margin: 0 34px 12px 0; } .g-pop-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; background: rgba(0,0,0,.25); color: var(--dim); border: none; font-size: 17px; line-height: 1; } .g-pop-x:hover { color: var(--ink); background: rgba(0,0,0,.4); } .g-coins { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin: 10px 0; } .g-coins li { display: flex; align-items: center; gap: 9px; padding: 9px 11px; background: rgba(0,0,0,.18); border: 1px solid var(--line); border-radius: 10px; font-size: 13px; } .g-coins img { width: 24px; height: 24px; display: block; } .g-coins i { font-style: normal; color: var(--faint); font-size: 11px; } /* Petit écran : jamais moins de DEUX colonnes au mur (l'algorithme des colonnes CSS retombait à une seule sur iPhone). */ @media (max-width: 560px) { .mur { columns: 2; column-gap: 7px; } .mur a { margin-bottom: 7px; } } /* ------------------------------------------------------------- Le tiroir « message » (2026-08-21) — l'enveloppe de la barre ouvre un mini-formulaire qui poste vers support.php. ------------------------------------------------------------- */ .moi-msg-m { min-width: 272px; padding: 12px; } .msg-f { display: grid; gap: 8px; } .msg-f input[type="email"], .msg-f input[type="text"], .msg-f textarea { width: 100%; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(0,0,0,.22); color: var(--ink); font: inherit; font-size: 13px; resize: vertical; } .msg-f input:focus, .msg-f textarea:focus { outline: none; border-color: var(--rose); } .msg-f .btn { justify-content: center; } /* ------------------------------------------------------------- FAQ en accordéon (2026-08-21) — une question par ligne, la réponse se déplie au clic. ------------------------------------------------------------- */ /* width:100% : sans elle, dans un parent flex, la colonne se dimensionne sur son CONTENU et s'élargit quand on ouvre une réponse (2026-08-24). */ .faq { width: 100%; max-width: 820px; margin: 0 auto; } .faq-l { display: flex; flex-direction: column; gap: 10px; } .faq-sec { margin: 22px 0 4px; font: 400 clamp(17px,2.6vw,21px)/1.3 var(--hand); color: var(--rose-3); } .faq-sec:first-child { margin-top: 4px; } .faq-q { background: var(--pan); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; transition: border-color .18s; } .faq-q[open] { border-color: rgba(224,115,159,.35); } .faq-q summary { display: flex; align-items: center; gap: 14px; padding: 15px 18px; cursor: pointer; list-style: none; font-size: 15px; font-weight: 600; color: var(--ink); } .faq-q summary::-webkit-details-marker { display: none; } .faq-q summary span { flex: 1; min-width: 0; } .faq-q summary:hover { color: var(--rose-3); } .faq-chev { flex: none; color: var(--rose); display: inline-flex; transition: transform .25s; } .faq-q[open] .faq-chev { transform: rotate(180deg); } .faq-a { padding: 0 18px 16px; color: var(--dim); font-size: 14px; line-height: 1.8; /* l'ouverture est animée en JS (pc5.js) : les
ne se laissent pas animer en CSS seul sur tous les navigateurs. */ } .faq-a a { color: var(--rose-3); } /* L'enveloppe de la barre : elle cumule .me (tiroir) et .ghost-btn — le padding asymétrique de .me décentrait le rond du survol. */ .me.ghost-btn { width: 38px; height: 38px; padding: 0; display: grid; place-items: center; border-radius: 50%; } /* Le formulaire de commande DVD (pc/dvd_order.php) réutilise .msg-f (champs sombres arrondis) ; les inputs s'empilent avec un peu d'air. */ .guide .msg-f { gap: 10px; margin-top: 14px; } .guide .msg-f input { padding: 11px 13px; } /* ------------------------------------------------------------- Fiche-catalogue d'actrice (chapeau /act/{nom}, 2026-08-23) — naissance, ville, hobby en pastilles + réseaux sociaux (nofollow). ------------------------------------------------------------- */ .a-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 6px 0 2px; } .a-faits { display: flex; flex-wrap: wrap; gap: 6px; } .a-fait { display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 11px; border-radius: 999px; background: var(--rose-b); font-size: 12px; color: var(--dim); } .a-fait b { color: var(--rose-3); font-weight: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; } .a-fait i { font-style: normal; color: var(--rose); font-weight: 600; } .a-social { display: inline-flex; gap: 6px; } .a-sn { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 12px; font-weight: 700; color: var(--dim); transition: color .16s, border-color .16s, background .16s; } .a-sn:hover { color: var(--ink); border-color: var(--rose); background: var(--rose-b); } .a-sn-twitter { font-family: system-ui, sans-serif; } /* Prix en yens (Japon) : le repère dollar, discret à côté du total. */ .plan-usd { font-style: normal; color: var(--faint); font-size: 11px; } /* ------------------------------------------------------------- Fiche d'actrice v2 (2026-08-23) — un vrai profil informatif : grand portrait cerclé de rose, nom en avant, pastilles de faits (nombre de films, naissance), boutons réseaux avec logo dessiné et pseudo, bio en dessous. La date de création du film (filmdate) s'affiche sur chaque carte (.carte-date). ------------------------------------------------------------- */ .rub-idol { align-items: flex-start; gap: 20px; } .rub-idol .rub-photo { width: clamp(110px, 16vw, 160px); height: clamp(110px, 16vw, 160px); border-radius: 22px; border: 2px solid var(--rose-2); box-shadow: 0 0 0 5px var(--rose-b), 0 10px 30px rgba(0,0,0,.5); } .rub-idol .rub-t h1 { font-size: clamp(24px, 3.6vw, 34px); } .rub-idol .rub-s { margin-top: 8px; max-width: 68ch; font-size: 12.5px; line-height: 1.7; color: var(--faint); } .a-tete { margin: 10px 0 2px; } .rub-idol .a-fait { padding: 6px 13px; font-size: 12.5px; border: 1px solid rgba(224,115,159,.22); } .rub-idol .a-fait b { font-size: 11px; display: inline-flex; align-items: center; } .a-fait.a-nb { background: rgba(224,115,159,.2); color: var(--ink); } .a-fait.a-nb b { color: var(--rose); } .a-fait.a-nb img { display: inline-block; width: 13px; height: 13px; vertical-align: -2px; } .rub-idol .a-sn { min-width: 0; height: 32px; padding: 0 12px; display: inline-flex; align-items: center; gap: 7px; background: rgba(0,0,0,.22); font-size: 12px; font-weight: 600; } .rub-idol .a-sn svg { flex: none; } .a-sn-twitter:hover { color: #fff; border-color: #8ac4ff; } .a-sn-insta:hover { color: #fff; border-color: #ff9ec8; } .a-sn-fb:hover { color: #fff; border-color: #8aa8ff; } @media (max-width: 640px) { .rub-idol { gap: 14px; } .rub-idol .a-sn span { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* La date de création du film, posée sur la carte à côté de la durée. */ .carte-date { font-weight: 600; color: var(--rose-3); margin-left: 6px; } /* Pastille du solde de points, TOUJOURS visible dans la barre quand connecté (2026-08-23). Accent rose, cliquable vers l'historique. */ .pts-chip { display: inline-flex; align-items: baseline; gap: 3px; flex: none; padding: 6px 12px; border-radius: 999px; background: var(--rose-b); border: 1px solid rgba(224,115,159,.35); color: var(--rose-3); white-space: nowrap; transition: background .16s, border-color .16s; } .pts-chip:hover { background: rgba(224,115,159,.2); border-color: rgba(224,115,159,.55); } .pts-chip b { color: var(--rose); font-size: 14.5px; font-weight: 700; font-family: var(--num); } .pts-chip span { font-size: 11px; opacity: .8; } /* Téléphone : le « pt » reste VISIBLE — sans lui, « 1,000 » ne veut rien dire (demande du 2026-08-23). */ @media (max-width: 520px) { .pts-chip { padding: 5px 9px; gap: 2px; } .pts-chip span { font-size: 10px; } } /* Année de repli (entrée au catalogue) quand la vraie date de création du film n'est pas encore connue : discrète, pour ne pas se faire passer pour une date de production certifiée. */ .carte-date-approx { color: #9c93a8; font-weight: 500; } /* ------------------------------------------------------------- Panier DVD (2026-08-23) — pastille de la barre, bouton des fiches, et la page panier. ------------------------------------------------------------- */ .panier-chip { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,.22); border: 1px solid var(--line-2); color: var(--dim); white-space: nowrap; transition: color .16s, border-color .16s; } .panier-chip:hover { color: var(--ink); border-color: var(--rose); } .panier-chip b { color: var(--rose); font-size: 13.5px; font-weight: 700; font-family: var(--num); } .pan-btn .pan-prix { font-style: normal; opacity: .7; margin-left: 2px; } .pan-btn.on { border-color: var(--rose); color: var(--rose-3); background: var(--rose-b); } .pan-liste { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; } .pan-item { display: flex; align-items: center; gap: 12px; background: var(--pan); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; } /* La VIGNETTE seulement (« > a > img ») : la ligne contient aussi la petite image du bonbon (.candy-i), qui gonflait à 86×64 (2026-08-25). */ .pan-item > a > img { width: 86px; height: 64px; object-fit: cover; border-radius: 8px; display: block; } .pan-item-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .pan-item-t a { color: var(--ink); font-size: 13.5px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pan-item-t a:hover { color: var(--rose-3); } .pan-item-t i { font-style: normal; font-size: 11.5px; color: var(--faint); } .pan-x { flex: none; padding: 7px 12px; border-radius: 999px; cursor: pointer; background: none; border: 1px solid var(--line-2); color: var(--faint); font: inherit; font-size: 12px; transition: color .16s, border-color .16s; } .pan-x:hover { color: #ff9ec8; border-color: rgba(224,115,159,.5); } .pan-total-v { color: var(--rose); font-size: 18px; font-weight: 700; font-family: var(--num); } /* ------------------------------------------------------------- Photos récentes des réseaux de l'actrice (2026-08-23) — une bande qui glisse sous le chapeau /act/{nom}. Chaque photo mène au post d'origine (nofollow). Déposées par le rapatrieur local dans pc/img/social/{id}/ + manifest.json. ------------------------------------------------------------- */ .a-sns-bloc { margin: -12px 0 24px; } .a-sns-t { margin: 0 0 10px; font: 400 17px/1.3 var(--hand); color: var(--rose-3); } .a-sns-strip { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 4px; } .a-sns-strip::-webkit-scrollbar { display: none; } .a-sns-strip a { position: relative; flex: none; width: clamp(150px, 20vw, 210px); aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #100d15; transition: transform .2s, border-color .2s; } .a-sns-strip a:hover { transform: translateY(-3px); border-color: rgba(224,115,159,.45); } .a-sns-strip img { width: 100%; height: 100%; object-fit: cover; display: block; } .a-sns-net { position: absolute; top: 8px; right: 8px; padding: 3px 8px; border-radius: 999px; font-style: normal; background: rgba(12,10,18,.72); color: #fff; font-size: 11px; font-weight: 700; backdrop-filter: blur(4px); } /* ------------------------------------------------------------- La rangée d'actions de la fiche (2026-08-23) — un vrai code couleur : ROSE regarder · BLEU télécharger · CŒUR liste · OR le DVD physique · VERT possédé. Chaque bouton a son relief, son icône et son état. ------------------------------------------------------------- */ .act { gap: 10px; align-items: center; } .act-btn { display: inline-flex; align-items: center; gap: 9px; padding: 12px 20px; border-radius: 999px; font-size: 14px; font-weight: 700; line-height: 1; border: 1px solid transparent; cursor: pointer; font-family: inherit; transition: transform .16s, box-shadow .16s, background .16s, border-color .16s, color .16s, filter .16s; } .act-btn:active { transform: translateY(1px) scale(.985); } .act-btn .ic { flex: none; } /* ROSE — regarder : l'action reine, pleine et lumineuse. */ .act-play { background: linear-gradient(135deg, #e0739f, #c4507f); color: #fff; box-shadow: 0 10px 26px -12px rgba(224,115,159,.75); } .act-play:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 14px 30px -12px rgba(224,115,159,.9); } /* BLEU — télécharger : le fichier qu'on garde. */ .act-dl { background: rgba(126,203,255,.1); border-color: rgba(126,203,255,.4); color: #7ecbff; } .act-dl:hover { background: rgba(126,203,255,.2); border-color: #7ecbff; transform: translateY(-1px); } /* CŒUR — ma liste : discret, s'allume en rose une fois dedans. */ .act-list { background: rgba(0,0,0,.18); border-color: var(--line-2); color: var(--dim); } .act-list:hover { color: var(--ink); border-color: var(--rose); } .act-list.on { background: var(--rose-b); border-color: rgba(224,115,159,.5); color: var(--rose-3); } /* OR — le DVD physique : l'objet précieux. */ .act-dvd { background: rgba(224,192,126,.09); border-color: rgba(224,192,126,.42); color: #e0c07e; } .act-dvd:hover { background: rgba(224,192,126,.18); border-color: #e0c07e; transform: translateY(-1px); } .act-dvd.on { background: rgba(224,192,126,.22); border-color: #e0c07e; box-shadow: inset 0 0 0 1px rgba(224,192,126,.35); } .act-dvd .act-pt { font-style: normal; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: rgba(0,0,0,.28); font-family: var(--num); } /* Petit écran : la rangée respire et les boutons prennent la largeur. */ @media (max-width: 560px) { .act-btn { flex: 1 1 calc(50% - 10px); justify-content: center; padding: 12px 12px; } .act-play { flex-basis: 100%; } } /* L'attribut hidden doit GAGNER sur display:inline-flex : sans ça la pastille panier apparaissait vide avec « 0 ». */ .panier-chip[hidden] { display: none; } /* Chargement des photos SNS : un shimmer rosé anime la case tant que la photo n'est pas là (lazy) ; la photo fond dessus à l'arrivée. Le shimmer vit DERRIÈRE : sans JavaScript, rien ne casse. */ .a-sns-strip a { background: linear-gradient(110deg, #16121c 8%, #2a1f30 18%, #16121c 33%); background-size: 200% 100%; animation: sns-shimmer 1.4s linear infinite; } @keyframes sns-shimmer { to { background-position-x: -200%; } } /* L'image n'apparaît QUE complète (onload) — jamais à moitié téléchargée. L'entrée : le flou se dissipe pendant qu'elle se pose en douceur (zoom + remontée). */ .a-sns-strip img { opacity: 0; transform: scale(.92) translateY(12px); filter: blur(12px); transition: opacity .5s ease, transform .6s cubic-bezier(.22,1,.36,1), filter .55s ease; } .a-sns-strip img.ok { opacity: 1; transform: none; filter: none; } @media (prefers-reduced-motion: reduce) { .a-sns-strip img { transform: none; filter: none; transition: opacity .3s ease; } } /* Les icônes de la nav (2026-08-23) : le glyphe respire à côté du libellé, discret au repos, rose sur l'entrée courante. */ .navh-l a { display: inline-flex; align-items: center; gap: 7px; } .navh-l a .ic { opacity: .55; transition: opacity .18s; } .navh-l a:hover .ic { opacity: .9; } .navh-l a.on .ic { opacity: 1; color: var(--rose); } /* Les icônes SVG (fichiers) de la nav : mêmes états que les glyphes. */ .ic-nav { display: block; opacity: .8; transition: opacity .18s, transform .18s; } .navh-l a:hover .ic-nav { opacity: 1; transform: scale(1.12); } .navh-l a.on .ic-nav { opacity: 1; } /* ------------------------------------------------------------- Le cœur animé « robeen » de l'ancien site (2026-08-23) — cœur qui éclot + cercle + confettis au passage en .on. Les keyframes sont celles d'origine, recolorées. ------------------------------------------------------------- */ /* Centré en ABSOLU (2026-08-25) : le cœur flottait décalé à droite dans sa pastille. inset 0 + margin auto = centre parfait, quelle que soit la taille du bouton ; overflow visible pour les confettis. */ .coeur .coeur-anim { position: absolute; inset: 0; margin: auto; width: 30px; height: 30px; overflow: visible; display: block; } .coeur-anim .heart { transform-origin: center; animation: animateHeartOut .3s linear forwards; fill: #cfc6da; } .coeur-anim .main-circ { transform-origin: 29.5px 29.5px; } .coeur:hover .coeur-anim .heart { fill: var(--rose-3); } .coeur.on .coeur-anim .heart { transform: scale(.2); fill: var(--rose); animation: animateHeart .3s linear forwards .25s; } .coeur.on .coeur-anim .main-circ { transition: all 2s; animation: animateCircle .3s linear forwards; opacity: 1; } .coeur.on .coeur-anim [class^="grp"], .coeur.on .coeur-anim .grp1, .coeur.on .coeur-anim .grp2, .coeur.on .coeur-anim .grp3, .coeur.on .coeur-anim .grp4, .coeur.on .coeur-anim .grp5, .coeur.on .coeur-anim .grp6, .coeur.on .coeur-anim .grp7 { opacity: 1; transition: .1s all .3s; } .coeur.on .coeur-anim .grp1 .oval1 { transform: scale(0) translate(0, -30px); transform-origin: 0 0 0; transition: .5s transform .3s; } .coeur.on .coeur-anim .grp1 .oval2 { transform: scale(0) translate(10px, -50px); transform-origin: 0 0 0; transition: 1.5s transform .3s; } .coeur.on .coeur-anim .grp2 .oval1 { transform: scale(0) translate(30px, -15px); transform-origin: 0 0 0; transition: .5s transform .3s; } .coeur.on .coeur-anim .grp2 .oval2 { transform: scale(0) translate(60px, -15px); transform-origin: 0 0 0; transition: 1.5s transform .3s; } .coeur.on .coeur-anim .grp3 .oval1 { transform: scale(0) translate(30px, 0); transform-origin: 0 0 0; transition: .5s transform .3s; } .coeur.on .coeur-anim .grp3 .oval2 { transform: scale(0) translate(60px, 10px); transform-origin: 0 0 0; transition: 1.5s transform .3s; } .coeur.on .coeur-anim .grp4 .oval1 { transform: scale(0) translate(30px, 15px); transform-origin: 0 0 0; transition: .5s transform .3s; } .coeur.on .coeur-anim .grp4 .oval2 { transform: scale(0) translate(40px, 50px); transform-origin: 0 0 0; transition: 1.5s transform .3s; } .coeur.on .coeur-anim .grp5 .oval1 { transform: scale(0) translate(-10px, 20px); transform-origin: 0 0 0; transition: .5s transform .3s; } .coeur.on .coeur-anim .grp5 .oval2 { transform: scale(0) translate(-60px, 30px); transform-origin: 0 0 0; transition: 1.5s transform .3s; } .coeur.on .coeur-anim .grp6 .oval1 { transform: scale(0) translate(-30px, 0); transform-origin: 0 0 0; transition: .5s transform .3s; } .coeur.on .coeur-anim .grp6 .oval2 { transform: scale(0) translate(-60px, -5px); transform-origin: 0 0 0; transition: 1.5s transform .3s; } .coeur.on .coeur-anim .grp7 .oval1 { transform: scale(0) translate(-30px, -15px); transform-origin: 0 0 0; transition: .5s transform .3s; } .coeur.on .coeur-anim .grp7 .oval2 { transform: scale(0) translate(-55px, -30px); transform-origin: 0 0 0; transition: 1.5s transform .3s; } @keyframes animateCircle { 40% { transform: scale(10); opacity: 1; fill: #dd4688; } 55% { transform: scale(11); opacity: 1; fill: #d46abf; } 65% { transform: scale(12); opacity: 1; fill: #cc8ef5; } 75% { transform: scale(13); opacity: 1; fill: transparent; stroke: #cc8ef5; stroke-width: .5; } 85% { transform: scale(17); opacity: 1; fill: transparent; stroke: #cc8ef5; stroke-width: .2; } 95% { transform: scale(18); opacity: 1; fill: transparent; stroke: #cc8ef5; stroke-width: .1; } 100% { transform: scale(19); opacity: 1; fill: transparent; stroke: #cc8ef5; stroke-width: 0; } } @keyframes animateHeart { 0% { transform: scale(.2); } 40% { transform: scale(1.2); } 100% { transform: scale(1); } } @keyframes animateHeartOut { 0% { transform: scale(1.4); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .coeur-anim .heart, .coeur.on .coeur-anim .main-circ { animation: none; } } /* La pastille des cartes s'agrandit pour loger le cœur animé. */ .carte .coeur { width: 34px; height: 34px; } .carte .coeur .coeur-anim { width: 30px; height: 30px; } /* Calibrage des icônes de la nav : chaque fichier SVG a ses propres marges internes (viewBox 24×24, 48×48, 32×32, 1000×1000…) — on compense pour que les glyphes paraissent TOUS de la même taille. */ .ic-nav { width: 19px; height: 19px; } .ic-idols { width: 20px; height: 20px; } /* viewBox recadré au glyphe */ .ic-series { width: 21px; height: 21px; } /* grille 32, un peu d'air */ .ic-ranking { width: 23px; height: 23px; } /* converti 1000², marges */ .ic-allvideos { width: 19px; height: 19px; } .ic-categories{ width: 19px; height: 19px; } /* Commandes de l'aperçu de fiche (2026-08-23) — les habits du fil, posés sur le bandeau. */ .fiche-img { cursor: pointer; } .fiche-img .fiche-son { position: absolute; top: 12px; right: 12px; z-index: 4; } .fiche-prog { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 4; display: block; height: 4px; border-radius: 999px; background: rgba(255,255,255,.22); cursor: pointer; } .fiche-prog::after { content: ''; position: absolute; inset: -10px 0; } .fiche-prog i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--rose); transition: width .25s linear; } /* ------------------------------------------------------------- Titres de section de la fiche actrice (2026-08-23) — pastille rose à icône, écriture manuscrite, filet dégradé qui court jusqu'au bord, gribouillis. Servent à « SNS の最近の投稿 » et « 出演作品 ». ------------------------------------------------------------- */ .a-sec-t { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 400 clamp(18px, 2.6vw, 22px)/1.3 var(--hand); color: var(--ink); } .a-sec-ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--rose-b); border: 1px solid rgba(224,115,159,.3); color: var(--rose); } .a-sec-ic img, .a-sec-ic svg { display: block; } .a-sec-n { font: 600 12px/1 var(--ui); font-style: normal; padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,.22); border: 1px solid var(--line); color: var(--dim); } .a-sec-t .doodle { margin-left: -2px; } .a-sec-t::after { content: ''; flex: 1; height: 1px; margin-left: 4px; background: linear-gradient(90deg, rgba(224,115,159,.35), transparent 80%); } /* L'ancien titre simple de la bande n'existe plus. */ .a-sns-t { display: none; } .a-sns-bloc { margin: -6px 0 26px; } /* Téléphone : plus de voile bleu au toucher sur le bandeau vidéo (tap-highlight), plus de sélection accidentelle, et surtout plus de ZOOM au double-tap — il sert au ±10 s. */ .fiche-img, .fiche-img * { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; touch-action: manipulation; } /* Même confort sur les surfaces tapables du site. */ .mur a, .coeur, .navh-l a, .tabbar a, .tabbar button, .a-sns-strip a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } /* ------------------------------------------------------------- Bloc d'actions de la fiche, redessiné (2026-08-23) : LIRE en pleine largeur et en dégradé, puis télécharger + liste côte à côte, le DVD dessous, l'état (points/possession) en ligne discrète. Tout à la même hauteur, prix en pastille, zéro retour à la ligne. ------------------------------------------------------------- */ .act-g { /* Barre horizontale pleine largeur (2026-08-25) : LIRE en vedette, puis télécharger / liste / DVD en pilules. Se replie en pile sur petit écran. */ display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; align-items: stretch; } .act-g .act-play { flex: 1 1 300px; justify-content: center; padding: 15px 20px; font-size: 15.5px; background: linear-gradient(120deg, #e0739f, #c4507f 70%); box-shadow: 0 10px 26px -12px rgba(224,115,159,.55); } .act-g .act-play:hover { filter: brightness(1.08); transform: translateY(-1px); } .act-g .act-btn { flex: 0 1 auto; justify-content: center; padding: 12px 18px; white-space: nowrap; font-size: 13.5px; } .act-g .act-btn .ic, .act-g .act-btn .art { flex: none; } .act-g .act-dvd { flex: 0 1 auto; } .act-pt { margin-left: 8px; padding: 2px 9px; border-radius: 999px; font-style: normal; font-size: 11.5px; font-weight: 700; background: var(--rose-b); color: var(--rose-3); border: 1px solid rgba(224,115,159,.3); } .act-pt-or { background: rgba(224,192,126,.12); color: #e0c07e; border-color: rgba(224,192,126,.35); } .act-note { grid-column: 1 / -1; margin: 0; font-size: 12.5px; color: var(--faint); text-align: right; } .act-note b { color: var(--rose-3); } .act-note-ok { color: #7ed0a8; display: flex; align-items: center; justify-content: flex-end; gap: 6px; } @media (max-width: 480px) { .act-g { grid-template-columns: 1fr; } .act-g .act-btn { justify-content: center; } } /* L'étincelle du solde : dit « points » d'un coup d'œil. */ .pts-etincelle { display: inline-flex; align-self: center; color: var(--rose); } /* ------------------------------------------------------------- La monnaie candy (2026-08-24 — remplace les forfaits d'abonnement) L'emoji 🍬 émis par les gabarits est remplacé à la sortie par cette petite image (voir le tampon dans inc/boot.php) : elle se cale sur la taille du texte qui l'entoure. ------------------------------------------------------------- */ .candy-i { display: inline-block; height: 1.1em; width: auto; vertical-align: -.18em; margin-left: 5px; /* un souffle entre le chiffre et le bonbon (2026-08-26) */ /* Taille PLANCHER : dans les petites pastilles (11 px), un bonbon à taille de texte devient une tache — jamais en dessous de 15 px. */ min-height: 15px; } /* Les puces de prix (2026-08-25) : 視聴 1🍬 · ダウンロード 2🍬 · DVD 20🍬. */ /* De l'INFORMATION, pas des boutons : aucun cadre, aucune pastille — une bordure dirait « clique-moi » (2026-08-25). */ .pt-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin: 10px 0; } .pt-chips i { font-style: normal; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--faint); } .pt-chips b { color: var(--rose-3); font-weight: 700; font-family: var(--num); font-size: 12.5px; } /* Les tarifs illustrés de la FAQ (2026-08-24) : des petites cartes au lieu d'une phrase plate. Le HTML vit dans $LANG_qa_content. */ .faq-tarifs { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 4px; } .faq-tarif { flex: 1; min-width: 108px; display: grid; gap: 3px; justify-items: center; padding: 13px 10px 11px; border-radius: 12px; text-align: center; background: rgba(255,255,255,.03); border: 1px solid var(--line-2); } .faq-tarif b { font-size: 11.5px; color: var(--dim); font-weight: 600; } .faq-tarif em { font-style: normal; font: 700 18px/1.2 var(--num); color: var(--rose); } .faq-tarif span { font-size: 11px; color: var(--faint); } .faq-tarif i { font-style: normal; margin-top: 2px; padding: 1px 8px; border-radius: 999px; background: rgba(224,115,159,.16); color: var(--rose); font-size: 10px; font-weight: 700; } /* Le header du tunnel : points en gros, prix en petit. */ .paytab thead th b { display: block; font-size: 14px; } .paytab thead th span { font-size: 11px; color: var(--faint); } /* ------------------------------------------------------------- Portefeuille de 🍬 (mysub, 2026-08-24) — gros solde + racheter. ------------------------------------------------------------- */ .wallet { text-align: center; max-width: 460px; margin: 0 auto 8px; padding: 26px 22px; border-radius: var(--r-lg); background: radial-gradient(90% 120% at 50% 0%, rgba(224,115,159,.12), transparent 60%), var(--pan); border: 1px solid var(--line); } .wallet-solde { display: flex; align-items: baseline; justify-content: center; gap: 6px; } .wallet-n { font: 700 clamp(40px,9vw,64px)/1 var(--num); color: var(--rose); letter-spacing: -.01em; } .wallet-u { font-size: 30px; } .wallet-buy { margin: 18px auto 0; padding: 13px 28px; font-size: 15px; } .wallet-note { margin: 14px auto 0; max-width: 40ch; color: var(--dim); font-size: 12.5px; line-height: 1.6; } /* Zen Maru 400 est un peu maigre en titre : on affirme (2026-08-25). */ html:lang(ja) h1, html:lang(ja) h2 { font-weight: 500; } /* ------------------------------------------------------------- Panneau d'actions de la fiche (2026-08-25) : chaque action est une rangée — médaillon d'icône COLORÉ (rose = regarder, violet = garder, or = DVD), libellé + sous-texte, prix en pastille. ------------------------------------------------------------- */ .fiche-cote .act-g { display: grid; gap: 10px; } .axn { display: flex; align-items: center; gap: 13px; width: 100%; padding: 12px 14px; border-radius: 14px; text-align: left; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); transition: transform .18s, border-color .18s, background .18s, box-shadow .18s, filter .18s; } .axn:hover { transform: translateY(-2px); } .axn:active { transform: scale(.985); } .axn-ic { width: 42px; height: 42px; border-radius: 13px; flex: none; display: grid; place-items: center; transition: transform .18s; } .axn:hover .axn-ic { transform: scale(1.12) rotate(-5deg); } .axn-ic .ic, .axn-ic .art { transition: transform .2s; } .axn-t { flex: 1; min-width: 0; display: grid; gap: 1px; } .axn-t b { font-size: 15px; font-weight: 700; color: var(--ink); } .axn-t small { font-size: 12px; color: var(--dim); } .axn-prix { flex: none; margin-left: 4px; padding: 3px 10px; border-radius: 999px; font-style: normal; font: 700 12.5px var(--num); white-space: nowrap; background: var(--rose-b); color: var(--rose-3); border: 1px solid rgba(224,115,159,.3); } /* Regarder — le bouton roi : plein dégradé rose qui GLISSE au survol, halo qui respire, étincelle qui cligne au coin. */ .axn-voir { /* position + z-index : le bouton devient son propre contexte d'empilement, le halo ::before (z-index -1) se glisse juste derrière LUI — pas derrière le panneau. */ position: relative; z-index: 0; background: linear-gradient(120deg, #e87aa9, #d75e91 45%, #b0416f 90%); background-size: 160% 100%; border-color: transparent; box-shadow: 0 10px 26px -12px rgba(224,115,159,.55); } .axn-voir:hover { filter: brightness(1.06); background-position: 95% 0; box-shadow: 0 16px 32px -13px rgba(224,115,159,.85); } .axn-voir:hover .axn-ic .ic { transform: translateX(2px); } .axn-voir::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: 0 0 28px 6px rgba(224,115,159,.42); animation: axn-respire 3.2s ease-in-out infinite; } .axn-voir::after { content: '✦'; position: absolute; top: 5px; right: 12px; font-size: 11px; color: #ffd9e8; opacity: 0; pointer-events: none; animation: axn-scintille 2.7s ease-in-out infinite .8s; } @keyframes axn-respire { 0%, 100% { opacity: .2; } 50% { opacity: .65; } } @keyframes axn-scintille { 0%, 100% { opacity: 0; transform: scale(.5) rotate(0deg); } 50% { opacity: .95; transform: scale(1) rotate(25deg); } } .axn-voir .axn-ic { background: rgba(255,255,255,.18); color: #fff; } .axn-voir .axn-t b { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.28); } .axn-voir .axn-t small { color: rgba(255,255,255,.95); text-shadow: 0 1px 2px rgba(0,0,0,.3); } .axn-voir .axn-prix { background: rgba(0,0,0,.32); color: #ffd9e8; border-color: transparent; } /* Télécharger — identité VIOLETTE (garder pour soi). */ .axn-dl .axn-ic { background: rgba(139,123,247,.16); color: #a99cff; } .axn-dl:hover { border-color: rgba(139,123,247,.5); background: rgba(139,123,247,.07); } .axn-dl .axn-prix { background: rgba(139,123,247,.14); color: #b9aeff; border-color: rgba(139,123,247,.32); } /* La flèche PLONGE dans le plateau, comme le fichier qu'on range. */ .axn-dl:hover .axn-ic .ic { animation: axn-plonge .55s ease; } @keyframes axn-plonge { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(3px); } } /* Ma liste — cœur rose doux ; « on » = déjà dans la liste. */ .axn-liste .axn-ic { background: var(--rose-b); color: var(--rose); } .axn-liste:hover { border-color: rgba(224,115,159,.45); } .axn-liste.on { border-color: rgba(224,115,159,.5); background: var(--rose-b); } .axn-liste.on .axn-ic { background: rgba(224,115,159,.26); } /* Le cœur BAT quand la souris s'approche. */ .axn-liste:hover .axn-ic .art { animation: axn-bat .55s ease; } @keyframes axn-bat { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.28); } 60% { transform: scale(1.04); } } /* DVD — identité OR (objet physique). */ .axn-dvd .axn-ic { background: rgba(224,192,126,.14); color: #e0c07e; } .axn-dvd:hover { border-color: rgba(224,192,126,.45); background: rgba(224,192,126,.06); } .axn-dvd.on { border-color: rgba(224,192,126,.55); background: rgba(224,192,126,.08); } /* Le disque TOURNE sous la souris, comme dans la platine. */ .axn-dvd:hover .axn-ic .ic { animation: axn-tourne 1.5s linear infinite; } @keyframes axn-tourne { to { transform: rotate(360deg); } } .axn-prix-or { background: rgba(224,192,126,.12); color: #e0c07e; border-color: rgba(224,192,126,.35); } /* Sagesse : aucune animation pour qui n'en veut pas. */ @media (prefers-reduced-motion: reduce) { .axn, .axn-ic, .axn-ic .ic, .axn-ic .art { transition: none; } .axn-voir::before, .axn-voir::after, .axn-ic .ic, .axn-ic .art { animation: none !important; } } /* --- audit 2026-08-25 : rangées de séries égales --- */ .cards-series { align-items: stretch; } .serie-c { display: flex; flex-direction: column; } .serie-c .coll-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .serie-c .coll-n { margin-top: auto; } /* --- panier vide : illustré, avec une sortie --- */ .pan-vide { display: grid; justify-items: center; gap: 14px; padding: 24px 0 8px; text-align: center; color: var(--dim); } .pan-vide[hidden] { display: none; } .pan-vide .btn { padding: 11px 28px; } /* --- payguide : les 4 logos carte tiennent sur UNE ligne --- */ .g-carte[data-gpop="prepaye"] .g-logos { gap: 8px; flex-wrap: nowrap; } .g-carte[data-gpop="prepaye"] .g-logos img { height: 26px; padding: 4px 6px; } /* ------------------------------------------------------------- Polish 2026 (2026-08-25) — micro-interactions, lumière, motion. ------------------------------------------------------------- */ html { -webkit-tap-highlight-color: transparent; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } ::selection { background: rgba(224,115,159,.45); color: #fff; } :root { accent-color: var(--rose); } /* Barres de défilement fines, dans le ton du site. */ * { scrollbar-width: thin; scrollbar-color: rgba(224,115,159,.28) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-thumb { background: rgba(224,115,159,.28); border-radius: 999px; } *::-webkit-scrollbar-thumb:hover { background: rgba(224,115,159,.5); } *::-webkit-scrollbar-track { background: transparent; } /* Une feuille ouverte ne fait pas défiler la page derrière elle. */ .rej-c, .feuille-c, .moi-m, .g-pop-c { overscroll-behavior: contain; } /* Réponse « ressort » homogène au clic. */ .btn, .axn, .plan, .pk, .mo, .g-carte, .pager a { transition-timing-function: cubic-bezier(.34, 1.4, .5, 1); } .btn:active, .plan:active, .pk:active, .mo:active, .g-carte:active, .pager a:active { transform: scale(.96); } /* Champs : le même anneau doux partout. */ input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; border-color: rgba(224,115,159,.6); box-shadow: 0 0 0 3px var(--rose-b); } /* Vignettes : un miroitement discret tant que l'image n'est pas là (une fois chargée, elle le recouvre entièrement). */ @keyframes pc5-mir { to { background-position: -200% 0; } } .mur a, .idols > a, .carte-a { background-image: linear-gradient(110deg, #14101b 40%, #1d1726 50%, #14101b 60%); background-size: 200% 100%; animation: pc5-mir 1.6s linear infinite; } /* Le badge NEW respire, à peine. */ @keyframes pc5-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(224,115,159,.4); } 55% { box-shadow: 0 0 0 6px rgba(224,115,159,0); } } .badge { animation: pc5-pulse 2.6s ease-out infinite; } /* Pagination : le survol répond. */ .pager a:hover { border-color: rgba(224,115,159,.5); color: var(--rose-3); } /* Apparition douce au défilement — pc5.js pose .rvl sous la ligne de flottaison, l'observer déclenche .rvl-in avec un petit escalier. */ .rvl { opacity: 0; transform: translateY(14px) scale(.985); } .rvl-in { opacity: 1; transform: none; transition: opacity .5s ease, transform .55s cubic-bezier(.22, 1, .36, 1); } /* Celles et ceux qui demandent moins de mouvement l'obtiennent. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .rvl { opacity: 1; transform: none; } .mur a, .idols > a, .carte-a, .badge { animation: none; } .axn:hover, .plan:hover, .pk:hover, .mo:hover, .btn:hover { transform: none; } } /* Cartes packs (2026-08-25) : rythme resserré, bonbons qui flottent — et s'excitent au survol. */ .plan { gap: 3px; padding: 24px 14px 18px; } .plan-bonbons { margin-bottom: 5px; animation: pc5-bob 3.4s ease-in-out infinite; } .plan:nth-child(2) .plan-bonbons { animation-delay: -1.7s; } .plan:hover .plan-bonbons { animation-duration: 1.1s; } .plan-total { margin-top: 5px; } .plan-cta { margin-top: 14px; } @keyframes pc5-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } /* ------------------------------------------------------------- Le panier, refait (2026-08-25) : lignes propres, récapitulatif en panneau, formulaire à VRAIS labels. ------------------------------------------------------------- */ .pan-liste { display: grid; gap: 10px; margin: 16px 0; } .pan-item { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--line-2); transition: border-color .18s, background .18s; } .pan-item:hover { border-color: rgba(224,115,159,.35); } .pan-item > a > img { border-radius: 10px; } .pan-item-t a { font-size: 13.5px; font-weight: 600; color: var(--ink); } .pan-item-t a:hover { color: var(--rose-3); } .pan-item-t i { font-size: 11.5px; color: var(--faint); } .pan-x { flex: none; padding: 7px 13px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--dim); border: 1px solid var(--line-2); transition: color .16s, border-color .16s, background .16s; } .pan-x:hover { color: #ff9db4; border-color: rgba(255,120,150,.5); background: rgba(255,120,150,.07); } .pan-resume { margin-top: 16px; padding: 18px; border-radius: var(--r-lg); background: var(--pan); border: 1px solid var(--line); display: grid; gap: 12px; } .pan-total-l { display: flex; justify-content: space-between; align-items: baseline; margin: 0; padding-bottom: 12px; border-bottom: 1px dashed var(--line-2); } .pan-total-l > span { color: var(--dim); font-size: 13px; font-weight: 600; } .pan-resume .pan-total-v { font: 700 22px/1 var(--num); color: var(--rose); } .pan-solde { margin: 0; font-size: 12.5px; color: var(--dim); } .pan-solde b { color: var(--rose-3); font-family: var(--num); } .pan-form { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin: 0; } .pan-l { display: grid; gap: 4px; } .pan-l-full, .pan-form .pan-cta, .pan-form .msg-ko { grid-column: 1 / -1; } .pan-l > span { font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--faint); } .pan-l input { padding: 11px 13px; border-radius: 12px; font: inherit; color: var(--ink); background: rgba(255,255,255,.04); border: 1px solid var(--line-2); transition: border-color .16s, box-shadow .16s; } .pan-cta { width: 100%; justify-content: center; padding: 13px; } @media (prefers-reduced-motion: reduce) { .plan-bonbons { animation: none; } .carte-play { transition: none; } } /* La popup de connexion (2026-08-25). */ #connexion .modale-c { position: relative; text-align: center; } .cx-f { display: grid; gap: 5px; margin-top: 14px; text-align: left; } .cx-f input { padding: 12px 14px; border-radius: 12px; font: inherit; color: var(--ink); background: rgba(255,255,255,.05); border: 1px solid var(--line-2); transition: border-color .16s, box-shadow .16s; } .cx-f .rej-go { margin-top: 12px; width: 100%; justify-content: center; } .cx-liens { display: flex; justify-content: center; gap: 18px; margin: 14px 0 0; font-size: 12.5px; } /* Le bonbon VOLE vers le panier à l'ajout (2026-08-25). */ .vol-panier { position: fixed; z-index: 320; margin: -14px 0 0 -14px; pointer-events: none; transition: transform .62s cubic-bezier(.5, -.15, .75, .45), opacity .62s ease-in; } .vol-panier img { width: 28px; height: auto; filter: drop-shadow(0 4px 12px rgba(224,115,159,.65)); } .panier-chip.pop { animation: pc5-pop .38s cubic-bezier(.34, 1.6, .5, 1); } @keyframes pc5-pop { 0% { transform: scale(1); } 45% { transform: scale(1.28); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .vol-panier { display: none; } .panier-chip.pop { animation: none; } } /* Médaillons SANS fond (2026-08-25) : l'icône seule, colorée — la colonne reste alignée grâce à la largeur fixe. */ .axn .axn-ic { background: transparent !important; border-radius: 0; width: 34px; height: 34px; } .axn-img { display: block; } /* Le titre de la fiche vit SOUS la vidéo (2026-08-25). */ .fiche-titre { max-width: 1200px; margin: 16px auto 0; display: grid; gap: 4px; } .fiche-titre h1 { font-size: clamp(19px, 2.6vw, 26px); font-weight: 700; letter-spacing: .01em; } .fiche-titre .badge { vertical-align: 3px; margin-right: 6px; } .fiche-titre .fiche-m { margin: 0; color: var(--dim); font-size: 12.5px; } .fiche-titre .fiche-m i { color: var(--faint); font-style: normal; } /* Le médaillon play/pause du lecteur d'aperçu (2026-08-25) : apparaît au centre au tap, grossit et s'efface — le retour visuel classique. */ .v-pulse { position: absolute; left: 50%; top: 50%; z-index: 5; width: 64px; height: 64px; margin: -32px 0 0 -32px; display: grid; place-items: center; border-radius: 50%; background: rgba(12, 10, 18, .55); color: #fff; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); pointer-events: none; animation: v-pulse .55s cubic-bezier(.22, 1, .36, 1) forwards; } .v-pulse svg { width: 26px; height: 26px; display: block; } @keyframes v-pulse { 0% { opacity: 0; transform: scale(.5); } 25% { opacity: 1; transform: scale(1); } 70% { opacity: 1; } 100% { opacity: 0; transform: scale(1.4); } } @media (prefers-reduced-motion: reduce) { .v-pulse { animation-duration: .2s; } } /* DVD déjà en panier : le survol prévient que le clic RETIRE (2026-08-25). */ .axn-dvd.on:hover { border-color: rgba(255, 120, 150, .55); background: rgba(255, 120, 150, .07); } .axn-dvd.on:hover .axn-t b { color: #ff9db4; } .axn-dvd.on:hover .axn-prix-or { background: rgba(255, 120, 150, .12); color: #ff9db4; border-color: rgba(255, 120, 150, .4); } /* Film DANS le panier (2026-08-25) : une coche dorée surgit sur le disque — l'état se lit d'un coup d'œil, avant même le libellé. */ .axn-ic { position: relative; } .axn-dvd.on .axn-ic::after { content: '✓'; position: absolute; right: -3px; bottom: -3px; width: 17px; height: 17px; border-radius: 50%; background: #e0c07e; color: #17131e; font-size: 11px; font-weight: 800; line-height: 1; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .45); animation: pc5-coche .32s cubic-bezier(.34, 1.6, .5, 1); } @keyframes pc5-coche { from { transform: scale(0) rotate(-30deg); } to { transform: scale(1) rotate(0); } } /* Et le survol-retrait teinte aussi la coche en rouge-rosé. */ .axn-dvd.on:hover .axn-ic::after { background: #ff9db4; } /* DVD DANS LE PANIER (2026-08-25) : l'état se voit de loin — rangée pleine OR, texte sombre, coche verte sur le disque. */ .axn-dvd.on { background: linear-gradient(120deg, #ecd096, #d2a854 78%); border-color: transparent; box-shadow: 0 10px 26px -12px rgba(224, 192, 126, .65); } .axn-dvd.on .axn-t b { color: #3a2c10; } .axn-dvd.on .axn-t small { color: rgba(58, 44, 16, .75); } .axn-dvd.on .axn-img { filter: brightness(.25); } .axn-dvd.on .axn-prix { background: rgba(0, 0, 0, .28); color: #ffe9b8; border-color: transparent; } .axn-dvd.on .axn-ic { position: relative; } .axn-dvd.on .axn-ic::after { content: '✓'; position: absolute; right: -4px; bottom: -2px; width: 17px; height: 17px; border-radius: 50%; background: #2e9e5b; color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .45); animation: pc5-coche .35s cubic-bezier(.34, 1.6, .5, 1); } @keyframes pc5-coche { 0% { transform: scale(0); } 100% { transform: scale(1); } } /* Le QR de l'étape crypto (2026-08-26) : carte blanche, scannable. */ .cr-qr { display: block; width: 132px; height: 132px; margin: 2px auto 12px; padding: 8px; border-radius: 14px; background: #fff; box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .6); } /* Actrices et série sous le titre de la fiche (2026-08-26) : de vraies pastilles CLIQUABLES — le cadre dit « clique-moi », et il dit vrai. */ .fiche-liens { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; } .fl-carte { display: inline-flex; align-items: center; gap: 11px; padding: 8px 16px 8px 8px; border-radius: 999px; background: var(--carte); border: 1px solid var(--line-2); transition: border-color .16s, background .16s, transform .16s, box-shadow .16s; } .fl-carte:hover { border-color: rgba(224, 115, 159, .55); background: var(--rose-b); transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(224, 115, 159, .5); } /* L'ACTRICE, en grand (2026-08-26) : c'est elle la vedette de la rangée — grand portrait rond liseré rose, nom en 16 px. */ .fl-act { padding: 10px 24px 10px 10px; gap: 15px; } .fl-act .fl-photo { width: 78px; height: 78px; border-radius: 50%; object-fit: cover; object-position: top; flex: none; border: 2px solid rgba(224, 115, 159, .45); box-shadow: 0 6px 18px -8px rgba(224, 115, 159, .5); } .fl-act .fl-t b { font-size: 16px; } .fl-act .fl-t small { font-size: 12px; } /* La série : une pastille discrète, sans vignette. */ .fl-serie { padding: 10px 18px; gap: 9px; } .fl-ic { display: block; width: 17px; height: 17px; flex: none; } .fl-t { display: grid; gap: 2px; min-width: 0; } .fl-t b { font-size: 13.5px; font-weight: 700; color: var(--ink); } .fl-carte:hover .fl-t b { color: var(--rose-3); } .fl-t small { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--dim); } .fl-t small img { display: inline-block; width: 11px; height: 11px; } /* ------------------------------------------------------------- Le panier est une partie SÉRIEUSE (2026-08-26) : polices classiques (Hiragino/Yu Gothic/Segoe), pas de gothique arrondi ni de chiffres fantaisie — dans les trois écritures. ------------------------------------------------------------- */ .pan-page, .pan-page input, .pan-page select, .pan-page button, .pan-page a, .pan-page b { font-family: "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", system-ui, sans-serif; letter-spacing: normal; } .pan-page .pan-total-v { font-family: inherit; font-weight: 800; } /* Formulaire japonais du panier. */ .pan-l select { padding: 11px 13px; border-radius: 12px; font: inherit; color: var(--ink); background: rgba(255,255,255,.04); border: 1px solid var(--line-2); } .pan-l select option { background: #1b1622; color: var(--ink); } .pj-auto { font-style: normal; margin-left: 6px; color: var(--rose); font-weight: 600; font-size: 10px; } /* Le menu compte aussi en écriture NORMALE (2026-08-26) : c'est du fonctionnel (contrat, téléchargements, déconnexion), pas du décor. */ .moi-l.moi-compte, .moi-l.moi-compte a, .moi-l.moi-compte span { font-family: "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", system-ui, sans-serif; letter-spacing: normal; } /* L'en-tête des menus (言語…) : plus présent (2026-08-26). */ .moi-h { font-size: 13.5px; font-weight: 700; color: var(--dim); } /* La confirmation de commande DVD aussi en écriture normale. */ .pan.g-sec, .pan.g-sec h2, .pan.g-sec p, .pan.g-sec b, .pan.g-sec a { font-family: "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", system-ui, sans-serif; letter-spacing: normal; } /* La légende du post sur la bande sociale (2026-08-26). */ .a-sns-txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 10px 9px; background: linear-gradient(to top, rgba(9, 7, 13, .94), transparent); font-size: 10.5px; line-height: 1.45; color: #e8e1f0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 2px rgba(0, 0, 0, .65); } /* ------------------------------------------------------------------- Les photos du film (2026-08-27) — quatre polaroïds scotchés sous la vidéo de la fiche, choisis à la main dans l'admin (studio photos de check_movies.php, stockés dans pc/img/photos/{id}/). Clic = la visionneuse plein écran (.fx-voile, pc5.js). ------------------------------------------------------------------- */ .fiche-photos { max-width: 1200px; margin: 16px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .fiche-photos .fp { position: relative; margin: 0; padding: 7px 7px 10px; background: var(--pan); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 30px -20px rgba(0, 0, 0, .85); cursor: zoom-in; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .fiche-photos .fp:nth-child(odd) { transform: rotate(-1.3deg); } .fiche-photos .fp:nth-child(even) { transform: rotate(1.1deg); } .fiche-photos .fp:hover { transform: rotate(0deg) scale(1.045); z-index: 2; border-color: rgba(224, 115, 159, .5); box-shadow: 0 18px 40px -18px rgba(224, 115, 159, .35); } .fiche-photos .fp img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 7px; display: block; background: #100d15; } .fiche-photos .fp .tape { top: -6px; left: 50%; margin-left: -23px; width: 46px; height: 14px; transform: rotate(-3deg); } .fiche-photos .fp:nth-child(even) .tape { transform: rotate(4deg); } @media (min-width: 1000px) { .fiche .fiche-photos { grid-column: 1 / -1; max-width: none; margin: 0; } } @media (max-width: 640px) { .fiche-photos { grid-template-columns: repeat(2, 1fr); gap: 10px; } } /* la visionneuse : un voile sombre, l'image en grand, flèches discrètes */ .fx-voile { position: fixed; inset: 0; z-index: 320; padding: 4vmin; background: rgba(10, 7, 16, .93); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .22s ease; cursor: zoom-out; } .fx-voile.la { opacity: 1; } .fx-voile img { max-width: 92vw; max-height: 92vh; border-radius: 12px; box-shadow: 0 36px 90px rgba(0, 0, 0, .75); animation: fx-pousse .22s ease; } @keyframes fx-pousse { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } } .fx-fleche { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); background: rgba(20, 15, 28, .7); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, border-color .15s; } .fx-fleche:hover { background: rgba(224, 115, 159, .35); border-color: rgba(224, 115, 159, .6); } .fx-fleche.g { left: 3vmin; } .fx-fleche.d { right: 3vmin; } @media (max-width: 640px) { .fx-fleche { display: none; } } /* ------------------------------------------------------------- Rachat de candy « au bon moment » (2026-08-27) : le petit + à côté du solde sur la fiche, et le bouton qui surgit dans le panier quand le solde ne couvre pas la commande. Tous deux portent data-rachat : la feuille s'ouvre au choix du pack. ------------------------------------------------------------- */ .act-plus { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 7px; padding: 0; border: none; border-radius: 50%; cursor: pointer; background: linear-gradient(45deg, var(--rose-2, #ff6f9c), #c084fc); color: #fff; font-size: 15px; font-weight: 800; line-height: 1; vertical-align: -4px; box-shadow: 0 3px 10px rgba(255, 111, 156, .35); transition: transform .18s, box-shadow .18s; } .act-plus:hover { transform: scale(1.18) rotate(90deg); box-shadow: 0 5px 16px rgba(255, 111, 156, .5); } .pan-buy { width: 100%; margin: 4px 0 10px; animation: pan-buy-nait .3s ease both; } @keyframes pan-buy-nait { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* ------------------------------------------------------------- いちごちゃん — le chat mascotte (2026-08-27). Bouton flottant discret ; la fenêtre ne s'ouvre que sur clic. Sur mobile le bouton vit AU-DESSUS de la tabbar. ------------------------------------------------------------- */ .kawa-btn { position: fixed; right: 16px; bottom: 16px; z-index: 80; width: 60px; height: 60px; border-radius: 50%; border: 0; cursor: pointer; background: linear-gradient(145deg, #2a1f2b, #201722); box-shadow: 0 6px 22px rgba(224,115,159,.35), 0 2px 8px rgba(0,0,0,.5); display: grid; place-items: center; padding: 0; transition: transform .18s cubic-bezier(.2,.9,.3,1.4), box-shadow .18s; animation: kawa-arrive .6s cubic-bezier(.2,.9,.3,1.3) .8s backwards; } .kawa-btn:hover { transform: scale(1.08) rotate(-4deg); box-shadow: 0 8px 28px rgba(224,115,159,.5), 0 2px 8px rgba(0,0,0,.5); } .kawa-btn svg { display: block; } @keyframes kawa-arrive { from { opacity: 0; transform: translateY(26px) scale(.5); } to { opacity: 1; transform: none; } } .kawa-pastille { position: absolute; top: 2px; right: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--rose); border: 2px solid #201722; } @media (max-width: 767px) { .kawa-btn { bottom: calc(74px + env(safe-area-inset-bottom)); right: 12px; } } .kawa { position: fixed; right: 16px; bottom: 88px; z-index: 81; width: min(340px, calc(100vw - 24px)); display: flex; flex-direction: column; max-height: min(480px, calc(100dvh - 120px)); background: var(--pan, #201722); border: 1px solid var(--line-2); border-radius: 18px; overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 4px 14px rgba(224,115,159,.2); animation: kawa-pop .3s cubic-bezier(.2,.9,.3,1.25); transform-origin: bottom right; } @keyframes kawa-pop { from { opacity: 0; transform: scale(.75) translateY(14px); } to { opacity: 1; transform: none; } } /* display:flex écrase le style navigateur de [hidden] : sans cette règle, la fenêtre ne se fermait JAMAIS visuellement (constaté le 2026-08-27 — même piège que .rejoindre[hidden] et .sugg[hidden]). */ .kawa[hidden] { display: none; } @media (max-width: 767px) { .kawa { bottom: calc(142px + env(safe-area-inset-bottom)); right: 12px; } } @media (prefers-reduced-motion: reduce) { .kawa, .kawa-btn { animation: none; } } .kawa-tete { display: flex; align-items: center; gap: 10px; padding: 11px 13px; background: linear-gradient(120deg, rgba(224,115,159,.18), rgba(224,115,159,.05)); border-bottom: 1px solid var(--line-2); } .kawa-av { flex: none; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08); display: grid; place-items: center; } .kawa-qui { min-width: 0; } .kawa-qui b { display: block; font-size: 14px; color: var(--ink); } .kawa-qui i { display: block; font-style: normal; font-size: 11px; color: var(--faint); } .kawa-x { margin-left: auto; flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(255,255,255,.07); color: var(--dim); font-size: 17px; line-height: 1; cursor: pointer; } .kawa-x:hover { background: rgba(255,255,255,.14); color: var(--ink); } .kawa-fil { flex: 1; min-height: 160px; overflow-y: auto; padding: 13px; display: flex; flex-direction: column; gap: 9px; scrollbar-width: thin; } .kawa-m { max-width: 85%; padding: 9px 12px; border-radius: 14px; font-size: 13px; line-height: 1.55; word-break: break-word; animation: kawa-bulle .25s cubic-bezier(.2,.9,.3,1.3) backwards; } @keyframes kawa-bulle { from { opacity: 0; transform: translateY(7px) scale(.92); } to { opacity: 1; transform: none; } } .kawa-m a { color: var(--rose); text-decoration: underline; } .kawa-m.elle { align-self: flex-start; background: rgba(255,255,255,.06); border: 1px solid var(--line-2); border-bottom-left-radius: 5px; color: var(--ink); } .kawa-m.moi { align-self: flex-end; background: rgba(224,115,159,.2); border: 1px solid rgba(224,115,159,.3); border-bottom-right-radius: 5px; color: var(--ink); } .kawa-m.pense { display: inline-flex; gap: 4px; align-items: center; padding: 12px 14px; } .kawa-m.pense i { width: 6px; height: 6px; border-radius: 50%; background: var(--rose); animation: kawa-pense 1.1s ease-in-out infinite; } .kawa-m.pense i:nth-child(2) { animation-delay: .18s; } .kawa-m.pense i:nth-child(3) { animation-delay: .36s; } @keyframes kawa-pense { 0%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } } .kawa-saisie { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line-2); } .kawa-saisie input { flex: 1; min-width: 0; padding: 10px 13px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.05); color: var(--ink); font-size: 13px; } .kawa-saisie input:focus { outline: none; border-color: rgba(224,115,159,.55); } .kawa-saisie input:disabled { opacity: .5; } .kawa-saisie button { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer; background: linear-gradient(45deg, #a8264f, var(--rose)); color: #fff; display: grid; place-items: center; transition: transform .15s, filter .15s; } .kawa-saisie button:hover { filter: brightness(1.15); } .kawa-saisie button:active { transform: scale(.9); } .kawa-saisie button:disabled { filter: grayscale(.6) brightness(.6); cursor: default; } /* ------------------------------------------------------------------- La neige de bonbons (2026-08-27) — une dizaine de candy-mini qui tombent TRÈS discrètement derrière tout le contenu (z-index -1, aucun événement, transforms seuls : rien ne bouge dans la mise en page). pc5.js sème les flocons ; prefers-reduced-motion les coupe. ------------------------------------------------------------------- */ .neige { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .neige i { position: absolute; top: -40px; display: block; animation: neige-tombe linear infinite; will-change: transform; } .neige img { display: block; width: 100%; height: auto; animation: neige-balance ease-in-out infinite alternate; } @keyframes neige-tombe { to { transform: translateY(calc(100vh + 80px)) rotate(200deg); } } @keyframes neige-balance { from { transform: translateX(-14px) rotate(-14deg); } to { transform: translateX(14px) rotate(18deg); } } @media (prefers-reduced-motion: reduce) { .neige { display: none; } } /* La mascotte illustrée (2026-08-27) remplace le SVG dessiné : l'image remplit le bouton rond et l'avatar, cerclés de rose. */ .kawa-btn img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; } .kawa-btn { padding: 0; border: 2px solid rgba(255,157,189,.8); overflow: hidden; } .kawa-av { overflow: hidden; border: 2px solid rgba(255,157,189,.6); background: #fbe4ee; } .kawa-av img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ------------------------------------------------------------- Les sites partenaires (pc/friends.php, 2026-08-28) : la table friends retrouvée — chips lien, deux colonnes souples. ------------------------------------------------------------- */ .amis { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; } .amis-c { display: flex; align-items: center; gap: 10px; padding: 12px 15px; border-radius: 12px; background: rgba(255,255,255,.035); border: 1px solid var(--line-2); color: var(--ink); text-decoration: none; font-size: 13.5px; transition: border-color .15s, background .15s, transform .15s; animation: rvl-in .45s cubic-bezier(.2,.9,.3,1.2) backwards; } .amis-c:nth-child(-n+18) { animation-delay: calc(var(--i, 0) * 0ms); } .amis-c:hover { border-color: rgba(224,115,159,.45); background: rgba(224,115,159,.07); transform: translateY(-2px); } .amis-c i { flex: none; color: var(--rose); display: grid; place-items: center; } .amis-c span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .amis-vide { color: var(--faint); } /* ------------------------------------------------------------- いちごちゃん vivante (2026-08-28) : le bouton respire en permanence pour se faire remarquer sans agresser. · le BOUTON porte le halo rose qui pulse (box-shadow, non coupé par overflow:hidden) ; · l'ILLUSTRATION porte le mouvement — respiration douce, puis un « coucou » (la tête penche) toutes les 7 secondes. Deux éléments séparés : un seul transform peut jouer à la fois, et le survol du bouton garde son propre scale. ------------------------------------------------------------- */ .kawa-btn { animation: kawa-arrive .6s cubic-bezier(.2,.9,.3,1.3) .8s backwards, kawa-halo 2.8s ease-out 1.5s infinite; } @keyframes kawa-halo { 0% { box-shadow: 0 6px 22px rgba(224,115,159,.35), 0 2px 8px rgba(0,0,0,.5), 0 0 0 0 rgba(224,115,159,.5); } 70% { box-shadow: 0 6px 22px rgba(224,115,159,.35), 0 2px 8px rgba(0,0,0,.5), 0 0 0 15px rgba(224,115,159,0); } 100% { box-shadow: 0 6px 22px rgba(224,115,159,.35), 0 2px 8px rgba(0,0,0,.5), 0 0 0 0 rgba(224,115,159,0); } } .kawa-btn img { transform-origin: 50% 88%; /* pivot bas : la tête bouge sur ses épaules */ animation: kawa-vie 7s ease-in-out 1.6s infinite; } @keyframes kawa-vie { 0%, 26%, 100% { transform: none; } 8% { transform: translateY(-2.5px) scale(1.04); } /* inspire */ 18% { transform: translateY(0) scale(1); } /* expire */ 62% { transform: rotate(0) scale(1); } 68% { transform: rotate(-8deg) scale(1.07); } /* coucou ! */ 74% { transform: rotate(7deg) scale(1.07); } 80% { transform: rotate(-4deg) scale(1.04); } 88% { transform: rotate(0) scale(1); } } /* le panneau ouvert : elle se tient tranquille */ .kawa-btn.parle img, .kawa-btn:active img { animation: none; } @media (prefers-reduced-motion: reduce) { .kawa-btn, .kawa-btn img { animation: none; } } /* ------------------------------------------------------------- Les VRAIS logos des réseaux, dans LEURS couleurs (2026-08-28) : pastille noire pour X, dégradé officiel Instagram, bleu Meta pour Facebook. Le glyphe est blanc, posé dans la pastille — c'est la forme sous laquelle le public les reconnaît. ------------------------------------------------------------- */ .a-sns-net { position: absolute; top: 8px; right: 8px; width: 25px; height: 25px; padding: 0; border-radius: 50%; display: grid; place-items: center; font-style: normal; box-shadow: 0 2px 9px rgba(0,0,0,.5); border: 1.5px solid rgba(255,255,255,.9); backdrop-filter: none; } .a-sns-net svg { display: block; } .a-sns-net.x { background: #000; } .a-sns-net.ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); } /* les boutons de profil (pseudo à côté du logo) */ .a-sn-ic { display: grid; place-items: center; flex: none; width: 19px; height: 19px; border-radius: 50%; margin-right: 5px; } .a-sn { display: inline-flex; align-items: center; } .a-sn-twitter .a-sn-ic { background: #000; } .a-sn-insta .a-sn-ic { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); } .a-sn-fb .a-sn-ic { background: #1877f2; } .a-sn-ic svg { width: 12px; height: 12px; display: block; } .a-sn-twitter:hover { border-color: #000; background: rgba(0,0,0,.35); color: var(--ink); } .a-sn-insta:hover { border-color: #d6249f; background: rgba(214,36,159,.14); color: var(--ink); } .a-sn-fb:hover { border-color: #1877f2; background: rgba(24,119,242,.14); color: var(--ink); } /* La PHOTO DE PROFIL du compte, à côté du pseudo (2026-08-28) : l'avatar rond, le logo du réseau en pastille posée dans le coin — la forme que tout le monde reconnaît sur les profils. */ .a-sn.avec-ph { height: auto; padding: 3px 11px 3px 3px; } .a-sn-ph { position: relative; flex: none; width: 27px; height: 27px; margin-right: 7px; } .a-sn-av { width: 27px; height: 27px; border-radius: 50%; object-fit: cover; display: block; background: rgba(255,255,255,.08); } .a-sn-ph .a-sn-ic { position: absolute; right: -3px; bottom: -3px; margin: 0; width: 15px; height: 15px; border: 1.5px solid var(--pan); } .a-sn-ph .a-sn-ic svg { width: 8.5px; height: 8.5px; } /* ------------------------------------------------------------- PUBLICATIONS DES RÉSEAUX (2026-08-28) — de vrais posts, avec la direction artistique de leur réseau. Une RANGÉE PAR RÉSEAU, qui glisse au doigt (scroll tactile + accroche par carte, iPhone compris) ; les anciennes règles .a-sns-* ne servent plus. ------------------------------------------------------------- */ .sns-bloc { margin: 20px 0 26px; display: grid; gap: 20px; } .sns-t { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; font-size: 14px; } .sns-t b { color: var(--ink); font-weight: 800; letter-spacing: .01em; } .sns-ps { margin-left: 2px; color: var(--faint); font-size: 12px; text-decoration: none; } .sns-ps:hover { color: var(--rose); text-decoration: underline; } .sns-mk { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; } .sns-mk.x { background: #000; border: 1px solid rgba(255,255,255,.25); } .sns-mk.ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); } /* la piste qui glisse : doigt sur mobile, molette/traînée au bureau */ .sns-piste { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; /* AUCUNE marge negative (2026-08-28) : elle elargissait le document, la page debordait en largeur sur mobile et emportait la tabbar fixe et la barre collante. La piste reste dans sa colonne. */ padding: 2px 0 10px; margin: 0; max-width: 100%; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; } .sns-piste::-webkit-scrollbar { display: none; } .po { flex: 0 0 auto; width: 290px; scroll-snap-align: start; border-radius: 16px; overflow: hidden; animation: rvl-in .45s cubic-bezier(.2,.9,.3,1.2) backwards; } @media (max-width: 480px) { .po { width: 82vw; max-width: 320px; } } .po-a { display: block; text-decoration: none; height: 100%; } .po-h { display: flex; align-items: center; gap: 9px; padding: 11px 13px 8px; } .po-av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; background: rgba(128,128,128,.25); } .po-qui { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; } .po-qui b { display: flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .po-qui i { font-style: normal; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .po-ok { flex: none; } .po-txt { margin: 0; padding: 0 13px 10px; font-size: 13px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .po-media { position: relative; background: rgba(0,0,0,.35); } .po-media img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; opacity: 0; transition: opacity .35s; } .po-media img.ok { opacity: 1; } .po-act { display: flex; align-items: center; gap: 16px; padding: 9px 13px 4px; } .po-b { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; } .po-b em { font-style: normal; font-variant-numeric: tabular-nums; } .po-fin { margin-left: auto; } .po-likes { margin: 0; padding: 2px 13px 0; font-size: 12.5px; } .po-d { display: block; padding: 4px 13px 12px; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; } /* ---- la DA de X : fond noir, bleu pour le badge, actions grises ---- */ .po-x { background: #000; border: 1px solid #2f3336; } .po-x .po-qui b { color: #e7e9ea; } .po-x .po-qui i, .po-x .po-b { color: #71767b; } .po-x .po-txt { color: #e7e9ea; } .po-x .po-media img { aspect-ratio: 16 / 10; border-top: 1px solid #2f3336; border-bottom: 1px solid #2f3336; } .po-x .po-act { padding-bottom: 11px; } .po-x:hover { border-color: #536471; } .po-x .po-b.vert:hover { color: #00ba7c; } .po-x .po-b.rose:hover { color: #f91880; } /* ---- la DA d'Instagram : carte blanche, texte encre, cœur noir ---- */ .po-insta { background: #fff; border: 1px solid #dbdbdb; } .po-insta .po-qui b { color: #262626; } .po-insta .po-b { color: #262626; } .po-insta .po-txt { color: #262626; } .po-insta .po-txt b { font-weight: 700; margin-right: 4px; } .po-insta .po-likes { color: #262626; font-weight: 400; } .po-insta .po-likes b { font-weight: 700; } .po-insta .po-d { color: #8e8e8e; } .po-insta .po-media img { border-top: 1px solid #efefef; } .po-insta:hover { border-color: #a8a8a8; } @media (prefers-reduced-motion: reduce) { .po { animation: none; } } /* DÉBORDEMENT (2026-08-28) : un enfant de grille/flex a min-width:auto, donc la piste s'étirait à la largeur de TOUTES ses cartes (2418 px sur iPhone) — la page partait en scroll horizontal et emportait la tabbar fixe et la barre collante. minmax(0,1fr) + min-width:0 la remettent dans sa colonne. */ .sns-bloc { grid-template-columns: minmax(0, 1fr); } .sns-rang, .sns-t, .sns-piste { min-width: 0; max-width: 100%; } /* ------------------------------------------------------------- GRILLE OU LISTE (2026-08-28) Les pages de rubrique s'affichent au choix en cartes à vignette ou en lignes compactes — titre à gauche, durée à droite. Un SEUL balisage : ce sont les MÊMES .carte, recomposées ici. La vignette, le voile et le médaillon de lecture disparaissent ; le titre et la durée, qui étaient posés SUR l'image, redeviennent une ligne de texte. Rien n'est dupliqué dans le DOM, aucune URL ne change, la canonique et le JSON-LD sont intacts. La classe « vue-liste » est posée dès le serveur (inc/vue.php lit le cookie) : pas de clignotement. Le clic la bascule en JS. ------------------------------------------------------------- */ /* Le sélecteur : deux boutons soudés, dans le vocabulaire des .ch */ .ch-vues { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--line); } .ch-vue { display: grid; place-items: center; width: 33px; height: 26px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--dim); cursor: pointer; transition: color .18s, background .18s, box-shadow .22s; } .ch-vue:hover { color: var(--ink); background: rgba(255,255,255,.07); } .ch-vue .ic { transition: transform .3s cubic-bezier(.34, 1.5, .5, 1); } .ch-vue:hover .ic { transform: scale(1.12); } .ch-vue[aria-pressed="true"] { background: var(--rose-b); color: var(--rose); box-shadow: inset 0 0 0 1px rgba(224,115,159,.42); } .ch-vue[aria-pressed="true"] .ic { transform: scale(1.06); } .ch-vue:focus-visible { outline: 2px solid var(--rose-3); outline-offset: 2px; } /* la même barrette, seule, hors d'un chapeau de rubrique (mylist) */ .rub-c-seule { margin: -4px 0 14px; justify-content: flex-end; } /* ---- Les rangs ------------------------------------------------ */ .cards.vue-liste { display: block; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.022); overflow: hidden; } .vue-liste .carte { border: 0; border-radius: 0; background: transparent; box-shadow: none; transform: none; border-bottom: 1px solid var(--line); transition: background .2s; } .vue-liste .carte:last-child { border-bottom: 0; } .vue-liste .carte:hover { transform: none; box-shadow: none; border-color: var(--line); background: linear-gradient(90deg, var(--rose-b), transparent 72%); } /* la vignette et sa mise en scène sortent du jeu */ .vue-liste .carte-a img, .vue-liste .carte-voile, .vue-liste .carte-play { display: none; } .vue-liste .carte-a { aspect-ratio: auto; min-height: 46px; display: flex; align-items: center; gap: 10px; padding: 11px 46px 11px 14px; } /* un petit losange rosé tient lieu de repère à la place de l'image */ .vue-liste .carte-a::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 2px; background: var(--rose-2); transform: rotate(45deg); transition: transform .25s cubic-bezier(.34, 1.5, .5, 1), background .2s; } .vue-liste .carte:hover .carte-a::before { background: var(--rose-3); transform: rotate(45deg) scale(1.4); } .vue-liste .carte.fermee .carte-a::before { background: var(--line-2); } /* « center » et pas « baseline » : .carte-t est un bloc overflow:hidden, dont la ligne de base synthétisée est le bord BAS — la durée serait descendue d'une ligne. */ .vue-liste .carte-sur { position: static; left: auto; right: auto; bottom: auto; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; } /* Le titre japonais est long : une seule ligne, coupée proprement. */ .vue-liste .carte-t { display: block; flex: 1 1 auto; min-width: 0; -webkit-line-clamp: none; line-clamp: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; font-weight: 500; text-shadow: none; transition: color .18s; } .vue-liste .carte:hover .carte-t { color: var(--rose-3); } .vue-liste .carte-an { flex: none; margin: 0; gap: 6px; white-space: nowrap; font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; } .vue-liste .carte-an::before { display: none; } .vue-liste .carte-date { margin-left: 0; } /* le badge « nouveau » et le cadenas reprennent leur place EN LIGNE */ .vue-liste .carte-neuf { position: static; top: auto; left: auto; flex: none; padding: 2px 6px; font-size: 8.5px; } .vue-liste .cadenas { position: static; inset: auto; flex: none; width: 16px; height: 16px; opacity: 1; } .vue-liste .cadenas svg { width: 15px; height: 15px; } /* Le cœur reste vivant : même bouton, calé au bout de la ligne. */ .vue-liste .carte .coeur { top: 50%; right: 7px; transform: translateY(-50%); width: 30px; height: 30px; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; opacity: .35; } .vue-liste .carte:hover .coeur { opacity: .85; } .vue-liste .carte .coeur:hover { background: var(--rose-b); opacity: 1; } .vue-liste .carte .coeur.on, .vue-liste .carte .coeur:focus-visible { opacity: 1; } @media (max-width: 560px) { .cards.vue-liste { border-radius: 12px; } .vue-liste .carte-a { gap: 8px; padding: 10px 38px 10px 11px; } .vue-liste .carte-sur { gap: 9px; } .vue-liste .carte-t { font-size: 13px; } .vue-liste .carte-an { font-size: 11px; } .vue-liste .carte .coeur { right: 4px; width: 27px; height: 27px; } .vue-liste .carte .coeur .coeur-anim { width: 23px; height: 23px; } } @media (prefers-reduced-motion: reduce) { .ch-vue .ic, .vue-liste .carte-a::before { transition: none; } } /* La carte crypto du guide montre PLUSIEURS pieces (2026-08-28) : les logos se serrent en ligne, legerement chevauchants, comme une pile de jetons. */ .g-logos-cr { display: inline-flex; align-items: center; } .g-logos-cr img { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.07); padding: 2px; box-sizing: content-box; } .g-logos-cr img + img { margin-left: -8px; } /* Le titre de rangée (X / Instagram) AU-DESSUS des cartes, CENTRÉ et bien en vue (2026-08-28) : c'est lui qui annonce le réseau, il ne doit pas se perdre dans le coin gauche. */ .sns-t { justify-content: center; gap: 10px; margin: 0 0 14px; font-size: 15px; } .sns-t b { font-size: 16.5px; letter-spacing: .015em; } .sns-mk { width: 30px; height: 30px; } .sns-ps { font-size: 12.5px; } @media (max-width: 480px) { .sns-t b { font-size: 15.5px; } }