/* ============================================================ WRAPPED — LE PLAYER. REPRISE À L'IDENTIQUE du CSS de la maquette VALIDÉE design-prototypes/p3-wrapped/_v1-stories.html (section « B. PLAYER »), commentaires d'origine compris. SEULE modification : chaque sélecteur est préfixé par #wrapped, pour que les classes génériques (.card, .kick, .big, .sub, .grid, .stage…) restent enfermées dans l'écran et ne débordent pas sur le reste de l'app. NE PAS REDESSINER ICI : le design change dans la maquette d'abord. ============================================================ */ #wrapped { position: fixed; inset: 0; /* la hauteur DYNAMIQUE du mobile : avec la seule `inset:0`, l'apparition de la barre d'URL repoussait le bas de l'écran hors de la zone visible. */ height: 100dvh; z-index: 9100; overflow: hidden; /* LES TOKENS DE LA MAQUETTE, REPRIS TELS QUELS ET FIGÉS ICI. L'app a des thèmes (Abîme, SYSTEM, peaux d'event) qui redéfinissent --fd, --fb, --paper, --ink… Sans ce verrou, le récap se repeindrait en Orbitron sur fond bleu-noir et ne ressemblerait plus à ce qui a été validé. */ --paper: #FFFEF7; --ink: #0A0A0A; --gray: #C8C8C8; --gray2: #E8E8E8; --magenta: #FF2E93; --yellow: #FFD600; --cyan: #5BD8E5; --green: #5BE885; --red: #FF5252; --orange: #FF9F45; --purple: #9D4EDD; --blue: #4D7CFF; --fd: 'Anton', sans-serif; --fm: 'IBM Plex Mono', monospace; font-family: var(--fm); color: var(--ink); background: var(--ink); } #wrapped * { box-sizing: border-box; margin: 0; padding: 0; } #wrapped[hidden] { display: none; } /* Dans la maquette, .player vit dans `.device` : un conteneur FLEX COLONNE de 390x844. Sa règle est `flex: 1; position: relative`. On reproduit donc le conteneur ici, au lieu de contredire la règle copiée. ⚠ PIÈGE : une surcharge `position:absolute; inset:0` placée AVANT le CSS copié est écrasée par celui-ci — `.player` retombe en `flex:1` sans parent flex, donc à hauteur ZÉRO, et l'écran est entièrement noir. C'est exactement ce qui s'est produit. Le conteneur flex est la seule façon correcte. */ #wrapped { display: flex; flex-direction: column; } /* ⚠ COLLISIONS AVEC proto.css — la cause des aplats noirs. La maquette est auto-portante et utilise des noms de classes génériques (`.card`, `.brand`, `.chip`…). Dans l'app, proto.css donne à plusieurs de ces classes un `::before` = le BLOC NOIR de l'ombre brutaliste, en position absolue. Posé sur une carte plein écran il recouvrait tout le fond ; posé sur le logo de la carte de saison il le rendait noir sur noir. On remet donc TOUS les pseudo-éléments à zéro dans l'écran. Ceux que la maquette déclare elle-même (ex. la flèche ▲ du pic horaire) sont réécrits plus bas par des sélecteurs plus spécifiques, donc ils survivent. */ #wrapped *::before, #wrapped *::after { content: none; } /* ============================================================ B. PLAYER — la séquence de cartes ============================================================ */ #wrapped .player {flex: 1; position: relative; background: var(--ink); overflow: hidden; } /* segments type "stories" */ #wrapped .segs {position: absolute; top: 0; left: 0; right: 0; z-index: 30; display: flex; gap: 4px; padding: 9px 12px 0; } #wrapped .segs .s {flex: 1; height: 4px; background: rgba(255, 254, 247, .3); border: 1.5px solid rgba(10, 10, 10, .5); overflow: hidden; } #wrapped .segs .s i {display: block; height: 100%; width: 0; background: var(--paper); } #wrapped .segs .s.done i {width: 100%; } #wrapped .phead {position: absolute; top: 22px; left: 12px; right: 12px; z-index: 30; display: flex; align-items: center; gap: 8px; } #wrapped .phead .tag {font-family: var(--fd); font-size: 9.5px; letter-spacing: 1.5px; border: 2px solid var(--ink); background: var(--paper); padding: 3px 7px; box-shadow: 2px 2px 0 var(--ink); } #wrapped .phead .sp {flex: 1; } #wrapped .phead .x {width: 26px; height: 26px; border: 2px solid var(--ink); background: var(--paper); box-shadow: 2px 2px 0 var(--ink); font-family: var(--fd); font-size: 14px; display: flex; align-items: center; justify-content: center; cursor: pointer; } /* zones de tap */ #wrapped .taps {position: absolute; inset: 0; z-index: 25; display: flex; } #wrapped .taps .z {flex: 1; cursor: pointer; } #wrapped .taps .z.back {flex: .32; } #wrapped .stage {position: absolute; inset: 0; } #wrapped .card {position: absolute; inset: 0; display: none; flex-direction: column; padding: 62px 22px 26px; overflow: hidden; } #wrapped .card.on {display: flex; } #wrapped .card .bgnoise {position: absolute; inset: 0; background-image: radial-gradient(rgba(10, 10, 10, .1) 1.5px, transparent 1.5px); background-size: 18px 18px; pointer-events: none; } #wrapped .card .grid {position: absolute; inset: 0; background-image: linear-gradient(rgba(10, 10, 10, .1) 2px, transparent 2px), linear-gradient(90deg, rgba(10, 10, 10, .1) 2px, transparent 2px); background-size: 30px 30px; pointer-events: none; } #wrapped .card .ct {position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; } /* ============================================================ SYSTÈME DE FONDS — chaque carte empile des calques géométriques. --lk = la couleur d'encre des calques : sombre sur carte claire, claire sur carte sombre. Aucun dégradé, que des trames et des aplats. RÈGLE : les formes DURES (bandeau, anneaux, confettis) ne vont que dans les respirations, jamais sur une zone de texte. ============================================================ */ #wrapped .bg {position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; --lk: 10, 10, 10; } #wrapped .card.on-dark .bg {--lk: 255, 254, 247; } #wrapped .bg > * {position: absolute; } #wrapped .l-dots {inset: -20px; background-image: radial-gradient(rgba(var(--lk), .16) 2.5px, transparent 2.6px); background-size: 15px 15px; } #wrapped .l-grain {inset: 0; background-image: radial-gradient(rgba(var(--lk), .1) .5px, transparent .6px); background-size: 4px 4px; } #wrapped .l-hatch {left: -60px; right: -60px; height: 250px; top: 30%; transform: rotate(-11deg); background-image: repeating-linear-gradient(90deg, rgba(var(--lk), .1) 0 5px, transparent 5px 17px); } #wrapped .l-ghost {font-family: var(--fd); line-height: .8; color: transparent; white-space: nowrap; -webkit-text-stroke: 4px rgba(var(--lk), .15); letter-spacing: -10px; } #wrapped .l-rays {width: 760px; height: 760px; top: -300px; right: -320px; background: repeating-conic-gradient(from 20deg, rgba(var(--lk), .08) 0 7deg, transparent 7deg 14deg); } #wrapped .l-rings {width: 300px; height: 300px; bottom: -125px; left: -105px; border-radius: 50%; border: 5px solid rgba(var(--lk), .15); box-shadow: 0 0 0 25px rgba(var(--lk), .05), 0 0 0 30px rgba(var(--lk), .15), 0 0 0 55px rgba(var(--lk), .05), 0 0 0 60px rgba(var(--lk), .15); } /* bandeau : TEXTURE et non graphique — le contenu peut passer par-dessus sans devenir illisible (les cartes ont leur contenu centré verticalement). */ #wrapped .l-band {left: -70px; right: -70px; height: 26px; background: rgba(var(--lk), .14); overflow: hidden; display: flex; align-items: center; transform: rotate(-4deg); border-top: 2px solid rgba(var(--lk), .28); border-bottom: 2px solid rgba(var(--lk), .28); } #wrapped .l-band .run {display: flex; white-space: nowrap; font-family: var(--fd); font-size: 12px; letter-spacing: 3px; color: rgba(var(--lk), .45); } #wrapped .l-band .run span {padding-right: 26px; } #wrapped .l-scrap {border: 3px solid rgba(var(--lk), .85); } /* fonds de carte */ #wrapped .bg-mag {background: var(--magenta); } #wrapped .bg-yel {background: var(--yellow); } #wrapped .bg-cya {background: var(--cyan); } #wrapped .bg-grn {background: var(--green); } #wrapped .bg-ink {background: var(--ink); } #wrapped .bg-red {background: var(--red); } #wrapped .bg-pap {background: var(--paper); } #wrapped .bg-pur {background: var(--purple); } #wrapped .bg-ora {background: var(--orange); } #wrapped .on-dark, #wrapped .on-dark .kick, #wrapped .on-dark .big {color: var(--paper); } /* typo de carte */ #wrapped .kick {font-family: var(--fd); font-size: 12px; letter-spacing: 2.5px; } #wrapped .kick .u {border-bottom: 3px solid currentColor; padding-bottom: 2px; } #wrapped .lead {font-family: var(--fd); font-size: 27px; line-height: 1.02; letter-spacing: .5px; } #wrapped .lead.sm {font-size: 21px; } #wrapped .big {font-family: var(--fd); font-size: 92px; line-height: .84; letter-spacing: -2px; } #wrapped .big.xl {font-size: 116px; } #wrapped .big.md {font-size: 66px; } #wrapped .sub {font-weight: 700; font-size: 11.5px; line-height: 1.45; } #wrapped .spacer {flex: 1; } /* fond clair sur carte sombre -> on RESET la couleur de texte (sinon paper sur paper) */ #wrapped .stampbox {display: inline-block; border: 4px solid var(--ink); background: var(--paper); box-shadow: 6px 6px 0 var(--ink); padding: 10px 14px; font-family: var(--fd); letter-spacing: 1px; color: var(--ink); } #wrapped .chipline {display: flex; flex-wrap: wrap; gap: 6px; } #wrapped .chip {font-family: var(--fd); font-size: 12px; letter-spacing: .5px; border: 3px solid var(--ink); background: var(--paper); box-shadow: 3px 3px 0 var(--ink); padding: 5px 9px; line-height: 1; color: var(--ink); } /* « TOUCHE TA RÉPONSE » à 9 px et 50 % d'opacité sur un fond jaune : on ne le lisait pas. C'est pourtant la seule consigne de la carte. */ #wrapped .hint {font-weight: 800; font-size: 11px; letter-spacing: 1.6px; opacity: .78; text-align: center; } /* ---- c2 : grille des parties ---- */ #wrapped .tiles {display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; } #wrapped .tiles i {aspect-ratio: 1; border: 2px solid var(--ink); background: var(--paper); display: block; } #wrapped .tiles i.w {background: var(--green); } /* ---- c3 : histogramme horaire ---- */ #wrapped .hours {display: flex; align-items: flex-end; gap: 3px; height: 176px; border-bottom: 3px solid var(--ink); } #wrapped .hours .h {flex: 1; background: var(--paper); border: 2px solid var(--ink); border-bottom: 0; height: 4px; position: relative; } #wrapped .hours .h.peak {background: var(--magenta); } #wrapped .hours .h.peak::after {content: '▲'; position: absolute; top: -15px; left: 50%; transform: translateX(-50%); font-size: 9px; } #wrapped .hlabels {display: flex; justify-content: space-between; font-weight: 700; font-size: 8px; margin-top: 5px; opacity: .6; } /* ---- c4 : jauge précision ---- */ #wrapped .meter {height: 46px; border: 4px solid var(--ink); background: var(--paper); box-shadow: 5px 5px 0 var(--ink); position: relative; overflow: hidden; } #wrapped .meter .f {height: 100%; width: 0; background: var(--green); border-right: 4px solid var(--ink); } #wrapped .meter .marks {position: absolute; inset: 0; display: flex; } #wrapped .meter .marks span {flex: 1; border-right: 2px dashed rgba(10, 10, 10, .22); } /* ---- c7 : course des modes ---- */ #wrapped .race {display: flex; flex-direction: column; gap: 9px; } #wrapped .race .r {display: flex; align-items: center; gap: 8px; } #wrapped .race .r .n {font-family: var(--fd); font-size: 12px; width: 78px; flex-shrink: 0; letter-spacing: .5px; } #wrapped .race .r .t {flex: 1; height: 26px; border: 3px solid var(--ink); background: rgba(255, 254, 247, .55); position: relative; overflow: hidden; } #wrapped .race .r .t i {display: block; height: 100%; width: 0; background: var(--magenta); border-right: 3px solid var(--ink); } #wrapped .race .r .v {font-family: var(--fd); font-size: 13px; width: 26px; text-align: right; } #wrapped .race .r.win .t i {background: var(--yellow); } /* ---- c10 : nemesis ---- */ #wrapped .clash {display: flex; align-items: center; justify-content: center; gap: 6px; position: relative; } #wrapped .fighter {display: flex; flex-direction: column; align-items: center; gap: 6px; width: 132px; } #wrapped .fighter .av {width: 96px; height: 96px; border: 4px solid var(--ink); background: var(--paper); box-shadow: 5px 5px 0 var(--ink); overflow: hidden; } #wrapped .fighter .av img {width: 100%; height: 100%; display: block; } #wrapped .fighter .nm {font-family: var(--fd); font-size: 17px; letter-spacing: .5px; } #wrapped .fighter .sc {font-family: var(--fd); font-size: 42px; line-height: 1; } #wrapped .vs {font-family: var(--fd); font-size: 30px; color: var(--paper); background: var(--ink); border: 3px solid var(--paper); padding: 4px 7px; transform: rotate(-8deg); box-shadow: 4px 4px 0 rgba(255, 254, 247, .35); } #wrapped .flash {position: absolute; inset: -40px; background: var(--paper); opacity: 0; pointer-events: none; z-index: 9; } /* ---- c11 : podium des potes ---- */ #wrapped .podium {display: flex; align-items: flex-end; justify-content: center; gap: 10px; } #wrapped .pod {display: flex; flex-direction: column; align-items: center; gap: 6px; } #wrapped .pod .av {width: 62px; height: 62px; border: 3px solid var(--ink); background: var(--paper); box-shadow: 4px 4px 0 var(--ink); overflow: hidden; } #wrapped .pod .av img {width: 100%; height: 100%; display: block; } #wrapped .pod .nm {font-family: var(--fd); font-size: 12px; } #wrapped .pod .col {width: 76px; border: 3px solid var(--ink); background: var(--paper); box-shadow: 4px 4px 0 var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 7px; } #wrapped .pod .col .v {font-family: var(--fd); font-size: 20px; line-height: 1; } #wrapped .pod .col .l {font-weight: 700; font-size: 7px; margin-top: 2px; opacity: .6; } #wrapped .pod.p1 .col {height: 104px; background: var(--yellow); } #wrapped .pod.p2 .col {height: 76px; background: var(--gray2); } #wrapped .pod.p3 .col {height: 58px; background: var(--orange); } /* ---- c12 : récompenses ---- */ #wrapped .rays2 {position: absolute; top: 34%; left: 50%; width: 620px; height: 620px; transform: translate(-50%, -50%); background: repeating-conic-gradient(from 0deg, rgba(255, 214, 0, .28) 0deg 11deg, transparent 11deg 22deg); pointer-events: none; } #wrapped .trophy {width: 128px; height: 128px; border: 5px solid var(--ink); background: var(--yellow); box-shadow: 7px 7px 0 var(--ink); display: flex; align-items: center; justify-content: center; margin: 0 auto; } #wrapped .trophy .nemoji {width: 82px; height: 82px; } #wrapped .reward {display: flex; align-items: center; gap: 10px; border: 3px solid var(--ink); background: var(--paper); box-shadow: 4px 4px 0 var(--ink); padding: 9px 11px; color: var(--ink); } #wrapped .reward .nemoji {width: 26px; height: 26px; flex-shrink: 0; } #wrapped .reward .tx {flex: 1; } #wrapped .reward .tx .k {font-weight: 700; font-size: 8px; letter-spacing: 1px; opacity: .6; } #wrapped .reward .tx .v {font-family: var(--fd); font-size: 15px; letter-spacing: .5px; line-height: 1.05; } /* ---- c13 : archétype (carte à collectionner) ---- */ #wrapped .persona {position: relative; width: 244px; margin: 0 auto; perspective: 1000px; } #wrapped .persona .face {border: 5px solid var(--ink); background: var(--paper); box-shadow: 8px 8px 0 var(--ink); padding: 14px; } #wrapped .persona .art {height: 152px; border: 3px solid var(--ink); background: var(--purple); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } #wrapped .persona .art .nemoji {width: 92px; height: 92px; position: relative; } #wrapped .persona .art .rr {position: absolute; width: 400px; height: 400px; background: repeating-conic-gradient(from 0deg, rgba(255, 254, 247, .2) 0deg 14deg, transparent 14deg 28deg); } #wrapped .persona .ttl {font-family: var(--fd); font-size: 27px; letter-spacing: .5px; margin-top: 10px; line-height: 1; } #wrapped .persona .dsc {font-weight: 700; font-size: 9.5px; line-height: 1.4; margin-top: 6px; opacity: .8; } #wrapped .persona .rar {position: absolute; top: -12px; right: -12px; font-family: var(--fd); font-size: 10px; letter-spacing: 1px; border: 3px solid var(--ink); background: var(--magenta); color: var(--paper); box-shadow: 3px 3px 0 var(--ink); padding: 4px 8px; transform: rotate(9deg); } /* ---- c14 : carte de partage ---- */ #wrapped .idcard {border: 4px solid var(--ink); background: var(--paper); box-shadow: 7px 7px 0 var(--ink); padding: 13px; } #wrapped .idcard .hd {display: flex; align-items: center; gap: 10px; border-bottom: 3px solid var(--ink); padding-bottom: 10px; } #wrapped .idcard .hd .av {width: 54px; height: 54px; border: 3px solid var(--ink); background: var(--paper); box-shadow: 3px 3px 0 var(--ink); overflow: hidden; flex-shrink: 0; } #wrapped .idcard .hd .av img {width: 100%; height: 100%; display: block; } #wrapped .idcard .hd .nm {font-family: var(--fd); font-size: 22px; line-height: 1; letter-spacing: .5px; } #wrapped .idcard .hd .rl {font-weight: 700; font-size: 8.5px; letter-spacing: 1px; opacity: .65; margin-top: 3px; } #wrapped .idcard .hd .sn {margin-left: auto; text-align: right; font-family: var(--fd); font-size: 11px; letter-spacing: 1px; } #wrapped .idcard .rows {display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 10px; } #wrapped .idcard .rw {border: 2.5px solid var(--ink); padding: 6px 8px; background: var(--paper); } #wrapped .idcard .rw .k {font-weight: 700; font-size: 7px; letter-spacing: 1px; opacity: .6; } #wrapped .idcard .rw .v {font-family: var(--fd); font-size: 15px; line-height: 1.05; margin-top: 2px; } #wrapped .idcard .rw.y {background: var(--yellow); } #wrapped .idcard .rw.c {background: var(--cyan); } #wrapped .idcard .rw.g {background: var(--green); } #wrapped .idcard .rw.m {background: var(--magenta); color: var(--paper); } #wrapped .idcard .ft {display: flex; align-items: center; gap: 7px; margin-top: 11px; border-top: 3px solid var(--ink); padding-top: 9px; } #wrapped .idcard .ft .brand {font-family: var(--fd); font-size: 13px; letter-spacing: 2px; background: var(--ink); color: var(--paper); padding: 3px 8px; } #wrapped .idcard .ft .code {font-weight: 700; font-size: 8.5px; opacity: .6; } #wrapped .idcard .ft .qr {margin-left: auto; width: 34px; height: 34px; border: 2.5px solid var(--ink); background: repeating-conic-gradient(from 0deg, var(--ink) 0 25%, var(--paper) 0 50%) 0 0/9px 9px; } /* confettis */ #wrapped .conf {position: absolute; inset: 0; pointer-events: none; z-index: 20; overflow: hidden; } #wrapped .conf i {position: absolute; width: 11px; height: 11px; border: 2px solid var(--ink); } /* rideau d'intro */ #wrapped .curtain {position: absolute; inset: 0; z-index: 22; display: flex; pointer-events: none; } #wrapped .curtain i {flex: 1; background: var(--ink); } /* ============================================================ LA PLATINE — hors maquette (ajout demandé) : le récap doit avoir un son. Posée en bas, au-dessus des zones de tap pour rester cliquable, dans la même grammaire que le reste : trait noir, ombre portée, capitales Anton. ============================================================ */ #wrapped .wrmusic { position: absolute; left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 28; display: flex; align-items: center; gap: 10px; border: 3px solid var(--ink); background: var(--paper); box-shadow: 4px 4px 0 var(--ink); padding: 8px 11px; } #wrapped .wrmusic[hidden] { display: none; } #wrapped .wrmusic .bt { width: 30px; height: 30px; flex-shrink: 0; border: 3px solid var(--ink); background: var(--yellow); font-family: var(--fd); font-size: 13px; display: flex; align-items: center; justify-content: center; cursor: pointer; } #wrapped .wrmusic .tx { flex: 1; min-width: 0; } #wrapped .wrmusic .t { font-family: var(--fd); font-size: 13px; letter-spacing: .4px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #wrapped .wrmusic .a { font-weight: 700; font-size: 9px; letter-spacing: .8px; opacity: .6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #wrapped .wrmusic .eq { display: flex; align-items: flex-end; gap: 2px; height: 18px; flex-shrink: 0; } #wrapped .wrmusic .eq i { width: 3px; background: var(--ink); height: 4px; display: block; } #wrapped .wrmusic.on .eq i { animation: wr-eq .9s ease-in-out infinite; } #wrapped .wrmusic.on .eq i:nth-child(2) { animation-delay: .18s; } #wrapped .wrmusic.on .eq i:nth-child(3) { animation-delay: .36s; } #wrapped .wrmusic.on .eq i:nth-child(4) { animation-delay: .54s; } @keyframes wr-eq { 0%, 100% { height: 4px; } 50% { height: 17px; } } @media (prefers-reduced-motion: reduce) { #wrapped .wrmusic.on .eq i { animation: none; height: 11px; } } /* la platine s'efface après s'être annoncée (le son, lui, continue) */ #wrapped .wrmusic { transition: opacity var(--dur-m) var(--ease-out), transform var(--dur-m) var(--ease-out); } #wrapped .wrmusic.parti { opacity: 0; transform: translateY(14px); pointer-events: none; } /* CARTES SOMBRES — la maquette n'énumère que `.on-dark`, `.on-dark .kick` et `.on-dark .big`. Elle est auto-portante, donc tout le reste hérite sans souci. Dans l'app, d'autres textes des cartes sombres retombaient sur l'encre : noir sur noir, les noms de la carte NEMESIS disparaissaient. On pose la couleur sur tout le contenu de la carte ; ce qui a sa propre couleur (chiffres verts/rouges, chips, stampbox) la garde, puisque ces règles-là sont plus spécifiques ou en ligne. */ #wrapped .card.on-dark .ct, #wrapped .card.on-dark .ct .nm, #wrapped .card.on-dark .ct .lead, #wrapped .card.on-dark .ct .sub { color: var(--paper); } /* ⚠ JAMAIS UNE OMBRE NOIRE SUR DU NOIR. L'entête (étiquette de saison, pause, fermer) et la platine sont posés sur .player, dont le fond est var(--ink) — leur ombre var(--ink) était donc noire sur noir et disparaissait dès qu'une carte sombre passait dessous. Ombre magenta, comme .pill.ink dans proto.css. */ #wrapped .phead .tag, #wrapped .phead .x { box-shadow: 2px 2px 0 var(--magenta); } #wrapped .wrmusic { box-shadow: 4px 4px 0 var(--magenta); } /* ⚠ EXCEPTION : la cassette est un OBJET CLAIR posé sur une carte sombre. La règle ci-dessus (1 id + 3 classes) battait `#wrapped .cass { color: var(--ink) }` et repeignait son étiquette jaune en crème — « SAISON 1 · ORIGINES » en blanc sur jaune, contraste 1,41. Même chose pour la platine. */ #wrapped .card.on-dark .ct .cass, #wrapped .card.on-dark .ct .cass .lbl .a, #wrapped .card.on-dark .ct .cass .lbl .b, #wrapped .card.on-dark .ct .cass .scr { color: var(--ink); } /* et l'inverse : sur une carte CLAIRE, le contenu reste à l'encre */ #wrapped .card:not(.on-dark) .ct { color: var(--ink); } /* LE FLARE DERRIÈRE LA COUPE — la maquette le fige à 620x620, taillé pour le cadre 390x844 de son téléphone d'atelier. En plein écran il s'arrêtait en plein milieu. On le dimensionne sur le viewport : il déborde toujours, quelle que soit la taille. */ #wrapped .rays2 { width: 200vmax; height: 200vmax; top: 34%; left: 50%; transform: translate(-50%, -50%); } /* LES BOUTONS PAUSE / FERMER — 26 px dans la maquette, pensés pour une vignette d'atelier. Sur un vrai téléphone c'est sous la cible tactile confortable (44 px) et les deux se touchent presque. On les agrandit, on les écarte, et on les décale sous l'encoche. Le reste de l'en-tête ne bouge pas. */ #wrapped .phead { top: calc(20px + env(safe-area-inset-top)); gap: 10px; } #wrapped .phead .x { width: 40px; height: 40px; font-size: 16px; border-width: 3px; box-shadow: 3px 3px 0 var(--magenta); /* jamais noir sur noir : .player est en var(--ink) */ border-radius: 0; touch-action: manipulation; } #wrapped .phead .x:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); } /* la pastille de pause se distingue de la fermeture : jaune contre rouge */ #wrapped .phead #wrPause { background: var(--yellow); } #wrapped .phead #wrClose { background: var(--red); color: var(--paper); } #wrapped .phead .tag { padding: 6px 10px; font-size: 10.5px; } /* ============================================================ REPRIS DE LA MIXTAPE — design-prototypes/p3-wrapped/wrapped.html. La cassette d'intro et la platine de la carte MUSIQUE viennent de LÀ, à l'identique (seuls les sélecteurs sont préfixés). Le reste de la séquence reste celui de _v1-stories.html. ============================================================ */ #wrapped .sticker { display: inline-block; border: 3px solid var(--ink); background: var(--paper); box-shadow: 4px 4px 0 var(--ink); padding: 7px 10px; font-family: var(--fd); font-size: 12px; letter-spacing: 1px; color: var(--ink); } #wrapped .sticker.y { background: var(--yellow); } #wrapped .sticker.g { background: var(--green); } #wrapped .sticker.c { background: var(--cyan); } #wrapped .sticker.m { background: var(--magenta); color: var(--paper); } #wrapped .cass { width: 300px; height: 200px; border: 5px solid var(--ink); background: var(--paper); box-shadow: 8px 8px 0 var(--ink); padding: 12px 12px 22px; display: flex; flex-direction: column; position: relative; color: var(--ink); } #wrapped .cass .lbl { border: 3px solid var(--ink); background: var(--yellow); padding: 6px 8px; } #wrapped .cass .lbl .a { font-family: var(--fd); font-size: 19px; letter-spacing: 1px; line-height: 1.2; } #wrapped .cass .lbl .b { font-weight: 700; font-size: 8.5px; letter-spacing: 1px; margin-top: 3px; } #wrapped .cass .win { flex: 1; margin-top: 10px; border: 3px solid var(--ink); background: var(--ink); display: flex; align-items: center; justify-content: center; gap: 26px; } #wrapped .reel { width: 54px; height: 54px; border: 4px solid var(--paper); border-radius: 50%; position: relative; background: var(--ink); } #wrapped .reel::before, #wrapped .reel::after { content: ''; position: absolute; inset: 18px; background: var(--paper); } #wrapped .reel::before { clip-path: polygon(50% 0, 58% 50%, 50% 100%, 42% 50%); } #wrapped .reel::after { clip-path: polygon(0 50%, 50% 42%, 100% 50%, 50% 58%); } #wrapped .cass .scr { position: absolute; bottom: 8px; left: 12px; right: 12px; display: flex; justify-content: space-between; font-weight: 700; font-size: 7px; opacity: .5; } #wrapped .plat { width: 208px; height: 208px; border-radius: 50%; border: 5px solid var(--paper); background: var(--ink); position: relative; display: flex; align-items: center; justify-content: center; } #wrapped .plat .art { width: 96px; height: 96px; border: 4px solid var(--paper); overflow: hidden; } #wrapped .plat .art img { width: 100%; height: 100%; display: block; } #wrapped .plat .gr { position: absolute; inset: 8px; border-radius: 50%; background: repeating-radial-gradient(circle, rgba(255, 254, 247, .18) 0 1px, transparent 1px 7px); } /* ---- LA QUESTION POSÉE AU JOUEUR (nouveauté demandée) ---- */ #wrapped .quiz { display: flex; flex-direction: column; gap: 9px; } #wrapped .quiz .opt { display: flex; align-items: center; gap: 10px; border: 3px solid var(--ink); background: var(--paper); box-shadow: 4px 4px 0 var(--ink); padding: 12px 13px; font-family: var(--fd); font-size: 15px; letter-spacing: .4px; color: var(--ink); cursor: pointer; text-align: left; } #wrapped .quiz .opt:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); } #wrapped .quiz .opt .k { width: 26px; height: 26px; flex: none; border: 3px solid var(--ink); display: grid; place-items: center; font-size: 13px; background: var(--yellow); } #wrapped .quiz .opt.bon { background: var(--green); } #wrapped .quiz .opt.rate { background: var(--red); color: var(--paper); } #wrapped .quiz .opt.rate .k { background: var(--paper); } /* Une fois répondu, le panneau ENTIER laisse passer le tap : sinon il reste au-dessus des zones de tap (z-index 26) en plein milieu de l'écran, et on ne peut plus avancer en tapant là. Seules les bordures de l'écran répondaient encore. */ #wrapped .quiz.fini { pointer-events: none; } /* ⚠ LES ZONES DE TAP RECOUVRENT TOUT (.taps, z-index 25) : c'est voulu dans la maquette, où aucune carte n'est interactive — on tape n'importe où pour avancer. Dès qu'une carte a des BOUTONS (la question posée au joueur), ils passent sous ce voile et ne reçoivent jamais le clic. Tout ce qui est cliquable dans une carte doit donc monter AU-DESSUS. */ #wrapped .quiz { position: relative; z-index: 26; } /* ⚠ Le z-index ci-dessus ne suffit pas tout seul : `.ct` est en position:relative AVEC z-index:2, donc il crée son propre contexte d'empilement et enferme tout son contenu sous `.taps` (25). On ne peut pas non plus se contenter d'élever `.ct` : il couvre toute la carte, il passerait alors AU-DESSUS des zones de tap et la carte ne laisserait plus avancer. La bonne façon : retirer le contexte d'empilement de `.ct` sur les cartes interactives (z-index:auto). Seuls les BOUTONS montent alors au-dessus du voile, le reste de la carte laisse passer le tap. */ #wrapped .card.interactif .ct { z-index: auto; } /* la carte ne doit pas passer sous la platine */ #wrapped .card { padding-bottom: 104px; } /* ---- LA PLATINE : le temps qui passe ---- */ #wrapped .wrmusic { flex-wrap: wrap; row-gap: 7px; } #wrapped .wrmusic .bar { flex: 1 0 100%; height: 10px; border: 2px solid var(--ink); background: var(--paper); position: relative; overflow: hidden; } #wrapped .wrmusic .bar > i { display: block; height: 100%; width: 0; background: var(--magenta); border-right: 2px solid var(--ink); } #wrapped .wrmusic .tm { font-weight: 700; font-size: 9px; letter-spacing: .5px; opacity: .65; flex: none; } /* les deux boutons de la carte de saison doivent recevoir le clic, comme le quiz */ #wrapped .card.interactif #c14b1, #wrapped .card.interactif #c14b2 { position: relative; z-index: 26; cursor: pointer; } /* ============================================================ LA CARTE D'ARCHÉTYPE — reprise de la maquette validée brandnew/drafts/_archetypes-partage.html. C'est le MÊME objet que l'image de partage : calques, décalage d'impression, sceau, numéro de série. ============================================================ */ #wrapped .az { position: relative; width: 292px; aspect-ratio: 4/5; border: 5px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); background: var(--az); overflow: hidden; color: var(--ink); --lk: 10, 10, 10; } #wrapped .az.sombre { color: var(--paper); --lk: 255, 254, 247; } #wrapped .az-bg { position: absolute; inset: 0; pointer-events: none; } #wrapped .az-bg > * { position: absolute; } #wrapped .az-bg .d { inset: -20px; background-image: radial-gradient(rgba(var(--lk), .17) 2.5px, transparent 2.6px); background-size: 15px 15px; } #wrapped .az-bg .gr { inset: 0; background-image: radial-gradient(rgba(var(--lk), .1) .5px, transparent .6px); background-size: 4px 4px; } #wrapped .az-bg .ha { left: -60px; right: -60px; height: 170px; top: 47%; transform: rotate(-11deg); background-image: repeating-linear-gradient(90deg, rgba(var(--lk), .11) 0 5px, transparent 5px 17px); } #wrapped .az-bg .ri { width: 230px; height: 230px; bottom: -112px; left: -88px; border-radius: 50%; border: 5px solid rgba(var(--lk), .16); box-shadow: 0 0 0 20px rgba(var(--lk), .05), 0 0 0 25px rgba(var(--lk), .16), 0 0 0 46px rgba(var(--lk), .05); } #wrapped .az-bg .gl { top: -24px; right: -8px; font-family: var(--fd); font-size: 140px; line-height: .8; color: transparent; -webkit-text-stroke: 4px rgba(var(--lk), .2); letter-spacing: -8px; white-space: nowrap; } #wrapped .az-bg .sc { width: 15px; height: 15px; border: 3px solid rgba(var(--lk), .8); } #wrapped .az-band { position: absolute; left: -40px; right: -40px; top: 27%; height: 25px; transform: rotate(-4deg); background: rgba(var(--lk), .14); border-top: 2px solid rgba(var(--lk), .3); border-bottom: 2px solid rgba(var(--lk), .3); display: flex; align-items: center; overflow: hidden; } #wrapped .az-band span { font-family: var(--fd); font-size: 11px; letter-spacing: 3px; color: rgba(var(--lk), .45); white-space: nowrap; } #wrapped .az-in { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; padding: 13px 14px 12px; } #wrapped .az-top { width: 100%; display: flex; justify-content: space-between; align-items: flex-start; } #wrapped .az-num { font-family: var(--fd); font-size: 14px; letter-spacing: 1px; } #wrapped .az-num i { font-style: normal; font-size: 8.5px; opacity: .55; } #wrapped .az-seal { font-family: var(--fd); font-size: 8.5px; letter-spacing: 1.2px; padding: 5px 8px; border: 3px solid var(--ink); background: var(--paper); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); transform: rotate(6deg); } #wrapped .az-seal.rare { background: var(--yellow); } #wrapped .az-seal.epic { background: var(--cyan); } #wrapped .az-seal.lege { background: var(--magenta); color: var(--paper); } #wrapped .az-art { position: relative; z-index: 2; width: 126px; height: 126px; margin-top: 13px; border: 5px solid var(--ink); background: var(--paper); box-shadow: 7px 7px 0 var(--off); display: grid; place-items: center; transform: rotate(-3deg); } #wrapped .az-art img { width: 86px; height: 86px; display: block; } /* ⚠ L'IMAGE MANGEAIT LE NOM. Edwin, deux fois : « le noctambule, l'image cache le texte, on n'arrive pas à bien voir ». Le nom montait sous la photo et son décalage d'impression mordait dessus. On lui donne de l'air et une largeur. */ #wrapped .az-nm { margin-top: 22px !important; max-width: 86%; margin-left: auto; margin-right: auto; } #wrapped .az-art { margin-top: 8px !important; } #wrapped .az-nm { position: relative; font-family: var(--fd); font-size: 31px; line-height: 1.2; letter-spacing: .5px; margin-top: 16px; text-align: center; } /* Le décalage d'impression : le MÊME texte, en couleur, 4 px derrière. ⚠ Il doit avoir la MÊME largeur que le vrai texte. Posé en absolu avec juste left:4px, il se retrouvait 4 px plus étroit : un nom un peu long passait sur deux lignes côté fantôme et sur une seule côté vrai texte — on lisait « LE FLAMBEUR » puis « LE / FLAMBEUR » par-dessus la description. */ #wrapped .az-nm::before { content: attr(data-t); position: absolute; left: 0; top: 0; width: 100%; transform: translate(4px, 4px); color: var(--off); z-index: -1; } #wrapped .az-rule { width: 60px; height: 4px; background: currentColor; margin: 8px 0 7px; opacity: .85; } #wrapped .az-d { font-weight: 600; font-size: 10px; line-height: 1.5; text-align: center; padding: 0 8px; opacity: .85; } #wrapped .az-stats { display: flex; gap: 6px; margin-top: auto; width: 100%; } #wrapped .az-stats div { flex: 1; border: 3px solid var(--ink); background: var(--paper); color: var(--ink); padding: 6px 3px; text-align: center; box-shadow: 3px 3px 0 rgba(10, 10, 10, .28); } #wrapped .az-stats div.acc { background: var(--off); } #wrapped .az-stats b { display: block; font-family: var(--fd); font-size: 16px; line-height: 1.2; } #wrapped .az-stats i { display: block; font-style: normal; font-weight: 700; font-size: 6px; letter-spacing: .5px; opacity: .65; margin-top: 2px; } #wrapped .az-ft { width: 100%; display: flex; align-items: center; gap: 7px; margin-top: 9px; } #wrapped .az-mark { font-family: var(--fd); font-size: 12px; letter-spacing: 2px; background: var(--ink); color: var(--paper); padding: 3px 8px; } #wrapped .az-url { font-weight: 700; font-size: 7.5px; letter-spacing: .5px; opacity: .72; } #wrapped .az-code { margin-left: auto; width: 42px; height: 19px; border: 2px solid rgba(var(--lk), .7); background: repeating-linear-gradient(90deg, rgba(var(--lk), .75) 0 2px, transparent 2px 5px); } /* ---- LA CARTE DE SAISON (dernière carte) : même langage que l'archétype ---- */ #wrapped .c20-id { display: flex; flex-direction: column; align-items: center; margin-top: 14px; } #wrapped .c20-id .av { width: 88px; height: 88px; border: 5px solid var(--ink); background: var(--paper); box-shadow: 6px 6px 0 var(--off); display: grid; place-items: center; overflow: hidden; transform: rotate(-3deg); } #wrapped .c20-id .av > * { width: 100%; height: 100%; display: block; } #wrapped .c20-id .nm { position: relative; font-family: var(--fd); font-size: 34px; line-height: 1.2; letter-spacing: .5px; margin-top: 14px; } #wrapped .c20-id .nm::before { content: attr(data-t); position: absolute; left: 4px; top: 4px; color: var(--off); z-index: -1; } #wrapped .c20-id .rl { font-weight: 700; font-size: 9.5px; letter-spacing: 1.4px; opacity: .7; margin-top: 4px; } #wrapped .c20-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; width: 100%; margin-top: 16px; } #wrapped .c20-grid div { border: 3px solid var(--ink); background: var(--paper); color: var(--ink); padding: 7px 5px; text-align: center; box-shadow: 3px 3px 0 rgba(10, 10, 10, .3); } #wrapped .c20-grid div.acc { background: var(--off); color: var(--paper); } #wrapped .c20-grid b { display: block; font-family: var(--fd); font-size: 17px; line-height: 1.2; } #wrapped .c20-grid i { display: block; font-style: normal; font-weight: 700; font-size: 6.5px; letter-spacing: .5px; opacity: .65; margin-top: 2px; } /* ============================================================ TON QUOTIDIEN — avec un seul compteur, la carte n'était qu'une ligne de texte collée à gauche dans un grand vide. Chaque compteur devient un bloc encadré, centré, avec son chiffre en gros : ça tient aussi bien à un qu'à trois. Même grammaire que le reste du récap (cadre + ombre décalée). ============================================================ */ #wrapped .quot { display: flex; flex-direction: column; gap: 14px; width: 100%; } #wrapped .qb { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; border: 4px solid var(--ink); background: var(--paper); color: var(--ink); box-shadow: 7px 7px 0 var(--ink); padding: 16px 14px 18px; } #wrapped .qb-em { width: 62px; height: 62px; display: grid; place-items: center; margin-bottom: 8px; border: 3px solid var(--ink); background: var(--yellow); box-shadow: 4px 4px 0 var(--ink); transform: rotate(-4deg); } #wrapped .qb-em img { width: 40px; height: 40px; display: block; } #wrapped .qb-v { font-family: var(--fd); font-size: 46px; line-height: 1; } #wrapped .qb-n { font-style: normal; font-family: var(--fd); font-size: 14px; letter-spacing: 1.2px; margin-top: 3px; } #wrapped .qb-d { text-decoration: none; font-weight: 600; font-size: 10.5px; line-height: 1.45; opacity: .7; margin-top: 6px; } /* à deux ou trois, on resserre pour que tout tienne sans défiler */ #wrapped .quot:has(.qb:nth-child(2)) .qb { padding: 11px 12px 13px; } #wrapped .quot:has(.qb:nth-child(2)) .qb-v { font-size: 34px; } #wrapped .quot:has(.qb:nth-child(2)) .qb-em { width: 48px; height: 48px; margin-bottom: 5px; } #wrapped .quot:has(.qb:nth-child(2)) .qb-em img { width: 30px; height: 30px; } /* MUSIQUE SUIVANTE — le second bouton de la platine. Plus petit que PLAY : il ne lui dispute pas la place, il est là quand on en a besoin. */ #wrapped .wrmusic .bt.nx { width: 26px; height: 26px; font-size: 10px; letter-spacing: -1px; background: var(--paper); } #wrapped .wrmusic .bt.nx:active { transform: translate(2px, 2px); } /* ============================================================ ============================================================ WRAPPED v2 — « LA MIXTAPE ». REPRISE À L'IDENTIQUE du bloc