/** * Composant « carte de révision » — recto, format 85/55. * * Extrait de 3-sections/cards.css pour avoir UNE seule source : le tableau * de bord et la page Fonctionnalités affichent la meme carte. Une copie * dessinee a la main aurait diverge au premier changement. * * Le verso, le deck face cachee et toute la section Revisions restent dans * 3-sections/cards.css : la vitrine n'en a pas besoin. */ /* ════════════════════════════════════════════════════════════════════ LOOT CARDS — recto / verso premium (palette V5, format 85/55) ════════════════════════════════════════════════════════════════════ */ /* La modale d'ouverture est re-parentee sur pour echapper au containing block : elle sort donc du reset `.d314-dashboard-container *` qui impose border-box. Sans ca, `.lc-recto { height: 100% }` s'ajoute a ses paddings et le pied de carte deborde, coupe par overflow:hidden. Le composant se suffit a lui-meme, ou qu'il vive. */ .lc-card, .lc-card *, .lc-card *::before, .lc-card *::after { box-sizing: border-box; } .lc-card { width: 100%; aspect-ratio: 85 / 55; border-radius: 14px; background: var(--surface-card); border: 1px solid rgba(255,255,255,0.10); box-shadow: 0 16px 48px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,0.04) inset; position: relative; overflow: hidden; color: var(--text-primary); transform-style: preserve-3d; transition: transform 0.55s cubic-bezier(0.23, 1, 0.32, 1); } /* ── ÉVOLUTION LEITNER ───────────────────────────────────────── L'apparence d'une carte n'est pas une rareté fixe : elle évolue avec la progression dans la boîte de Leitner. nouvelle (hors Leitner ou J1) → en cours (J3-J15) → avancée (J30-J60) → maîtrisée (7 passages réussis). */ .lc-card.lc-ev-encours { box-shadow: 0 16px 48px rgba(0,0,0,.6), 0 0 0 1px rgba(226,169,74,0.22) inset; } .lc-card.lc-ev-avancee { box-shadow: 0 16px 48px rgba(226,169,74,0.18), 0 0 0 1px rgba(226,169,74,0.35) inset; } .lc-card.lc-ev-maitrisee { box-shadow: 0 16px 50px rgba(245,158,11,0.35), 0 0 0 1px rgba(245,158,11,0.45) inset; } /* Stripe d'évolution en haut */ .lc-stripe { position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 14px 14px 0 0; z-index: 5; } .lc-card.lc-ev-nouvelle .lc-stripe { background: rgba(255,255,255,0.14); } .lc-card.lc-ev-encours .lc-stripe { background: linear-gradient(90deg, var(--primary-dark), var(--primary-color)); } .lc-card.lc-ev-avancee .lc-stripe { background: linear-gradient(90deg, var(--primary-color), var(--primary-hover)); } .lc-card.lc-ev-maitrisee .lc-stripe { background: linear-gradient(90deg, var(--gold-color), var(--primary-hover), var(--gold-color)); background-size: 200% 100%; animation: lc-stripe-shimmer 3s linear infinite; } @keyframes lc-stripe-shimmer { 0% { background-position: 0 0; } 100% { background-position: 200% 0; } } /* Foil holographique : réservé aux cartes maîtrisées (récompense gagnée) */ .lc-card.lc-ev-maitrisee::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.06) 47%, rgba(245,158,11,0.14) 50%, rgba(240,197,111,0.12) 53%, rgba(226, 169, 74,0.10) 56%, transparent 65%); background-size: 250% 100%; animation: lc-foil 4s linear infinite; pointer-events: none; border-radius: 14px; mix-blend-mode: overlay; z-index: 4; } @keyframes lc-foil { 0% { background-position: 200% 0; } 100% { background-position: -50% 0; } } /* Watermark π / λ */ /* ─── RECTO ─── */ .lc-recto { padding: 14px 18px 12px; display: flex; flex-direction: column; height: 100%; position: relative; z-index: 2; gap: 8px; } .lc-head { display: flex; align-items: center; gap: 8px; } .lc-logo { font-family: var(--font-family-mono); font-size: 11px; font-weight: 900; color: var(--text-primary); letter-spacing: 1.5px; padding: 3px 8px; border: 1px solid rgba(255,255,255,0.12); border-radius: 4px; background: rgba(255,255,255,0.03); } .lc-badges { display: flex; gap: 6px; margin-left: auto; align-items: center; } .lc-badge-type { font-family: var(--font-family-mono); font-size: 9.5px; font-weight: 700; padding: 4px 9px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-primary); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); } .lc-gem { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 -2px 4px rgba(0,0,0,0.4), inset 0 2px 3px rgba(255,255,255,0.4), 0 0 0 1.5px rgba(255,255,255,0.08); } .lc-card.lc-ev-nouvelle .lc-gem { background: radial-gradient(circle at 35% 30%, #8c8d98, var(--text-muted)); } .lc-card.lc-ev-encours .lc-gem { background: radial-gradient(circle at 35% 30%, #f0c56f, var(--primary-color)); } .lc-card.lc-ev-avancee .lc-gem { background: radial-gradient(circle at 35% 30%, #f0c56f, var(--primary-color)); box-shadow: inset 0 -2px 4px rgba(0,0,0,0.4), inset 0 2px 3px rgba(255,255,255,0.5), 0 0 8px rgba(226,169,74,0.5); } .lc-card.lc-ev-maitrisee .lc-gem { background: radial-gradient(circle at 35% 30%, #fcd870, var(--gold-color)); box-shadow: inset 0 -2px 4px rgba(0,0,0,0.4), inset 0 2px 3px rgba(255,255,255,0.5), 0 0 12px rgba(245,158,11,0.7); } .lc-hero { flex: 1; display: flex; align-items: center; justify-content: flex-start; padding: 0 4px; } .lc-title { font-family: var(--font-family-primary); font-size: 22px; font-weight: 900; color: var(--text-primary); line-height: 1.12; letter-spacing: -0.4px; text-align: left; text-shadow: 0 1px 2px rgba(0,0,0,0.4); /* 70 % laissait 159 px là où « trigonométriques » en demande 189 à cette graisse : le mot se coupait en deux. 88 % lui laisse de la marge sans recouvrir tout le filigrane. */ max-width: 88%; } .lc-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.06); font-family: var(--font-family-mono); font-size: 9px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.8px; gap: 8px; } /* Le pied tient sur une ligne, toujours. « Langage mathématique, raisonnements, sommations » le faisait passer à deux, ce qui volait au titre la moitié de sa place et décalait le numéro de la carte. Le nom complet reste accessible en survol. */ .lc-foot > span:first-child { min-width: 0; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .lc-foot .lc-lvl { font-weight: 800; } .lc-card.lc-math .lc-foot .lc-lvl { color: var(--primary-hover); } .lc-card.lc-phys .lc-foot .lc-lvl { color: var(--accent-phys); } .lc-foot .lc-chap { color: var(--text-primary); } .lc-foot .lc-num { color: var(--text-muted); margin-left: auto; flex: none; } /* Un titre long ne doit ni déborder ni pousser le pied : au-delà de trois lignes il se coupe. « Raisonnement par analyse et synthèse » en tient trois. */ .lc-title { overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ─── VERSO ─── */ .lc-verso { padding: 14px 18px 12px; display: flex; flex-direction: column; height: 100%; gap: 8px; position: relative; z-index: 2; } .lc-verso .lc-head { justify-content: space-between; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,0.08); } .lc-verso-label { font-family: var(--font-family-mono); font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; } .lc-card .lc-verso-label { color: var(--primary-hover); } .lc-card.lc-ev-maitrisee .lc-verso-label { color: var(--gold-color); } .lc-verso-body { flex: 1; font-family: var(--font-family-primary); font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; } .lc-verso-body em { font-family: 'Computer Modern', 'Latin Modern Math', Georgia, serif; font-style: italic; color: var(--text-primary); font-size: 13.5px; } .lc-verso-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.06); font-family: var(--font-family-mono); font-size: 9px; font-weight: 700; color: var(--text-muted); letter-spacing: 1px; text-transform: uppercase; } .lc-verso-title { font-weight: 700; color: var(--primary-hover); } .lc-card.lc-ev-maitrisee .lc-verso-title { color: var(--gold-color); } /* ════════════════════════════════════════════════════════════ RETOURNEMENT Le verso existait en CSS depuis le debut mais n'avait jamais ete branche : aucun rotateY nulle part. La carte est un