/* ════════════════════════════════════════════════════════ LANDING.CSS — Tokens DA Phase 2 (LANDING UNIQUEMENT) MateXP · Source unique des tokens de la nouvelle direction artistique de la page d'accueil. Scopés à .lp (sur ) → n'écrasent JAMAIS les tokens de l'app (tokens.css partagé). Chargé en DERNIER, sur index.html SEULEMENT. ⚠️ Tout changement ici doit être miroité dans le CSS critique inline de index.html (sous-bloc .lp) pour le premier paint. ════════════════════════════════════════════════════════ */ .lp { /* Fond & surfaces (neutres teintés violet) */ --bg: #0A0A0F; --surface-1: #131220; --surface-2: #1B1A2B; --border: rgba(255,255,255,.08); --border-strong: rgba(255,255,255,.14); /* Texte */ --text: #F2F1F7; --text-secondary: #B2AFC4; --text-muted: #74728A; /* Marque */ --indigo: #7C5CFC; --rose: #FF6B9D; --orange: #FF8A5B; /* Sémantiques (scopées → n'écrasent pas l'app) */ --success: #34D399; --error: #F43F5E; --warning: #FBBF24; /* Écho or (bloc 8 Fondateur) : SEUL or autorisé hors carte — filet de la lettre. --pc-gold est scopé .pcard.pc-xp (player-card.css) → mini-token local. Usage sous le fold uniquement → PAS de miroir dans l'inline critique (le miroir ne couvre que le premier paint). */ --gold-echo: rgba(245, 196, 81, .35); /* Dégradés des moments forts — ANGLE ALIGNÉ sur --grad-brand (95°, socle DA tokens.css, canon carte) : plus AUCUN 135° de marque. --grad-warm dormant (non consommé), aligné par hygiène. Miroir inline index à garder en phase. */ --grad-strong: linear-gradient(95deg, #7C5CFC 0%, #FF6B9D 100%); --grad-warm: linear-gradient(95deg, #7C5CFC 0%, #FF8A5B 100%); /* Rayons */ --radius-sm: 8px; --radius: 12px; --radius-lg: 20px; --radius-pill: 999px; /* Ombres & halos (glow, pas drop-shadow lourd) */ --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.3); --glow-indigo: 0 0 90px rgba(124,92,252,.28); --glow-rose: 0 0 90px rgba(255,107,157,.22); --glow-orange: 0 0 90px rgba(255,138,91,.22); /* Typo — ALIAS des familles de l'app (une seule source : si l'app change de police, la landing suit sans dériver) */ --font-title: var(--font-display); --font-sign: var(--font-script); /* --font-body : déjà fourni identiquement par l'app, non redéclaré */ } /* Fond & couleur de texte de base de la landing (gagne sur reset.css body{background:var(--bg-1)} : .lp chargé en dernier + spécificité 0,1,1). */ body.lp { background: var(--bg); color: var(--text); } /* Hero — trio éventail : révélation anti-flash + entrée. Cette feuille charge en DERNIER des async → player-card.css (demandée avant) est arrivée quand elle s'applique. TRANSITION et pas animation : un .hero-up en animation-fill écraserait la garde opacity:0 de l'inline. Même courbe/durée que heroFadeUp, délai .55s calé sur l'étagement du hero. */ .lp .hero-fan { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.16,1,.3,1) .55s, transform .7s cubic-bezier(.16,1,.3,1) .55s; } @media (prefers-reduced-motion: reduce) { .lp .hero-fan { transition: none; } } /* ══════════════════════════════════════════════ SECTION 1bis · HERO SHOT — le dashboard EN GRAND, juste après le hero (pièce maîtresse, montrée tôt). Réutilise la capture du bento (#feed). Desktop : pleine largeur 2.5:1 + halo indigo (écho de l'aurora hero). Mobile : le 2.5:1 entier deviendrait illisible (~150px) → crop PROPRE sidebar + filtres + 1re carte ENTIÈRE (coupe nette dans le gap Nael|Sylva, mesuré à 45 % → AR 1.125 + object-position left ; jamais de demi-carte). En-tête 3 étages standard (.lp-head : eyebrow + .lp-h2 + .lp-intro), identique aux autres sections. Seul dégradé = liseré --grad-brand. */ .hs { position: relative; margin: var(--sp-10) 0 0; } .hs-glow { position: absolute; left: 50%; top: -8%; width: 88%; height: 70%; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(124,92,252,.28), rgba(124,92,252,.06) 55%, transparent 75%); filter: blur(20px); pointer-events: none; z-index: 0; } .hs-shot { position: relative; z-index: 1; aspect-ratio: 2880 / 1152; overflow: hidden; background: var(--bg-0); border: .5px solid var(--border-1); border-radius: var(--r-lg); box-shadow: var(--shadow-card); } .hs-shot::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--grad-brand); z-index: 2; } .hs-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 759px) { /* Crop propre : coupe dans le gap après la 1re carte (45 % de la capture → AR 1.125). object-position left = sidebar + filtres + Nael entière. */ .hs-shot { aspect-ratio: 1.125; } .hs-shot img { object-position: left center; } } /* CTA « Essayer la démo » — entre l'en-tête et le dashboard. Verre NEUTRE (aucun dégradé plein) → n'entre pas en concurrence avec le CTA hero. */ .hs-try-row { display: flex; justify-content: center; margin-top: var(--sp-2); } .hs-try { display: inline-flex; align-items: center; gap: .5em; text-decoration: none; cursor: pointer; padding: .7em 1.4em; font-family: var(--font-body); font-weight: 500; font-size: 1rem; line-height: 1; color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); border: .5px solid var(--border-1); border-radius: var(--r-full); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .hs-try i { font-size: 1.15em; color: var(--indigo); } .hs-try:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--text) 9%, transparent); border-color: color-mix(in srgb, var(--indigo) 55%, transparent); } .hs-try:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .hs-try:hover { transform: none; } } /* ════════════════════════════════════════════════════════ SYSTÈME DE SECTION (DA Phase 2) — vocabulaire réutilisable par les blocs 2→11 de la landing. Sections transparentes (laissent voir --bg → porte ouverte à un fond animé futur). ════════════════════════════════════════════════════════ */ .lp-section { max-width: 1100px; margin-inline: auto; padding-inline: var(--sp-5); padding-block: var(--sp-20); } /* En-tête de section : eyebrow + H2 + intro, centré */ .lp-head { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); text-align: center; margin-bottom: var(--sp-10); } .lp-eyebrow { font-family: var(--font-body); font-weight: 500; font-size: .875rem; letter-spacing: .04em; text-transform: uppercase; color: var(--indigo); } .lp-h2 { font-family: var(--font-title); font-weight: 600; font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.15; letter-spacing: -.01em; color: var(--text); max-width: 20ch; } .lp-intro { font-family: var(--font-body); font-weight: 400; font-size: clamp(1.06rem, 2vw, 1.25rem); line-height: 1.6; color: var(--text-secondary); max-width: 60ch; } /* Grille responsive (1 → 2/3 colonnes via data-cols) */ .lp-grid { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; } @media (min-width: 640px) { .lp-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 880px) { .lp-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); } } /* Carte simple partagée (étapes + piliers) — surface plate + ombre, PAS de glow */ .lp-card { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-6); background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); transition: border-color .18s ease, translate .18s ease; } .lp-card:hover { border-color: var(--border-strong); translate: 0 -2px; } /* ── FIX GLOBAL fondu des .lp-card (généralisé 08/07, ex-scopé #how — les 9 cartes du site : #how ×3, #features ×4, #trust ×2, toutes porteuses de .reveal). DÉCOUVERTE : la transition hover de .lp-card écrasait la transition .reveal de motion.css (même spécificité, landing.css chargée APRÈS) → l'opacité SAUTAIT au reveal depuis toujours. Fix : liste COMBINÉE matière reveal (expo) + hover (crisp) ; le lift hover vit sur TRANSLATE (propriété séparée, rendu identique au pixel), le reveal garde TRANSFORM pour lui seul. ⚠️ Les transition-delay par section (#how, #features) mappent leurs 4 valeurs sur l'ordre de CETTE liste. */ .lp-card.reveal { transition: opacity var(--dur-enter) var(--ease-expo), transform var(--dur-enter) var(--ease-expo), border-color var(--dur-fast) var(--ease-out), translate var(--dur-fast) var(--ease-out); } .lp-card-h3 { font-family: var(--font-title); font-weight: 600; font-size: 1.375rem; line-height: 1.3; color: var(--text); } .lp-card-p { font-family: var(--font-body); font-weight: 400; font-size: 1rem; line-height: 1.6; color: var(--text-secondary); } /* Puce d'icône = chrome du kicker hero (cohérence, pas un nouveau token) */ .lp-card-ico { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius); background: rgba(124, 92, 252, .10); border: 1px solid rgba(124, 92, 252, .28); color: var(--indigo); font-size: 24px; flex: none; } /* Numéro d'étape (bloc 3) */ .lp-step-num { font-family: var(--font-title); font-weight: 700; font-size: 3rem; line-height: 1; color: var(--indigo); } /* ── #how · délais de la cascade des 3 étapes (matière/hover : voir FIX GLOBAL .lp-card.reveal plus haut). Option A device-validée : délais COURTS, le pop GSAP des numéros (déclenché au scroll, indépendant du délai CSS) tombe après la visibilité de sa carte. ⚠️ 4 valeurs = ordre de la liste du fix global (reveal délayé, hover 0s). ≥880 seulement (vague = phénomène de RANGÉE ; mobile empilé = séquence naturelle). Sélecteur resserré sur le OL : le UL triptyque (chute d6-d8) ne doit PAS hériter ces délais. */ @media (min-width: 880px) { #how ol.lp-grid > li:nth-child(1) { transition-delay: 40ms, 40ms, 0s, 0s; } #how ol.lp-grid > li:nth-child(2) { transition-delay: 80ms, 80ms, 0s, 0s; } #how ol.lp-grid > li:nth-child(3) { transition-delay: 120ms, 120ms, 0s, 0s; } } /* Hover : le numéro répond au survol de SA carte — TEINTE seule, indigo→rose (écho du duo de marque, aucun nouveau token). PAS de scale : le pop GSAP (motion.js) laisse un transform INLINE sur le span (gsap.from sans clearProps) qui écraserait tout scale hover de la feuille — et une transition:transform interférerait avec ses frames pendant le pop. Scopé hover:hover : aucun hover tactile collant sur mobile. */ .lp-step-num { transition: color var(--dur-fast) var(--ease-out); } @media (hover: hover) { .lp-card:hover .lp-step-num { color: var(--rose); } } /* Carte « élue » (pilier gratuité) : bordure dégradée indigo→rose, fond sombre CONSERVÉ. background-clip double-fond (padding-box --surface-1 + border-box dégradé sous bordure transparente) : respecte le radius, zéro pseudo-élément, contraste du texte inchangé. S'illumine sur le CONTOUR, pas en surface → ne concurrence pas l'aplat plein du CTA. */ .lp-card-elu { border: 1.5px solid transparent; background: linear-gradient(var(--surface-1), var(--surface-1)) padding-box, var(--grad-strong) border-box; } .lp-card-elu:hover { border-color: transparent; } /* Micro-renfort : le glyphe gift en dégradé (la puce garde son fond violet subtil) */ .lp-card-elu .lp-card-ico i { background: var(--grad-strong); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ── #features · cascade PAR RANGÉE (2×2, breakpoint de rangée = 640 ici, pas 880) : rangée haute ensemble (40ms), rangée basse ensemble (120ms). 4 valeurs = ordre de la liste du fix global (reveal délayé, hover 0s). <640 : empilé, séquence naturelle du scroll, pas de délais. L'élue ne reçoit AUCUN traitement temporel dédié (déjà la plus accentuée). */ @media (min-width: 640px) { #features .lp-grid > article:nth-child(-n+2) { transition-delay: 40ms, 40ms, 0s, 0s; } #features .lp-grid > article:nth-child(n+3) { transition-delay: 120ms, 120ms, 0s, 0s; } } /* Hover : la puce répond au survol de SA carte — teinte indigo→rose + léger scale (POSSIBLE ici : aucun transform inline GSAP sur ces puces, contrairement aux numéros #how ; la puce n'est ni .reveal ni choréographiée). ⚠️ L'icône de l'ÉLUE (gift, clip-text dégradé, text-fill transparent) ne prend PAS la teinte — scale seul sur elle, assumé. Scopé #features (extension à #trust à SA passe) + hover:hover (pas de tactile collant). */ #features .lp-card-ico { transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } @media (hover: hover) { #features .lp-card:hover .lp-card-ico { color: var(--rose); transform: scale(1.06); } } /* Triptyque « 3 principes » (remplace l'ex-bandeau pilule .lp-strip, glow compris — le verre EST la matière, pas de glow de conteneur). Badge = géométrie SEULE : matière + anneau viennent de .av-ring (components.css, brique partagée — jumeau 44px des badges #beta). L'icône hérite #e7ddff + text-shadow du verre (pattern .fmed). */ .lp-trio { margin-top: var(--sp-8); } .lp-trio-item { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); text-align: center; } .lp-trio-badge { flex: none; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .lp-trio-badge i { font-size: 20px; line-height: 1; } .lp-trio-label { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-secondary); } /* CTA intermédiaire = recette du CTA hero (dégradé plein + halo) */ .lp-cta-wrap { text-align: center; padding-block: var(--sp-10); } .lp-cta { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-6); min-height: 48px; border-radius: var(--radius-pill); font-family: var(--font-body); font-weight: 600; font-size: var(--text-md); color: #fff; background: var(--grad-strong); box-shadow: 0 8px 28px -8px rgba(124, 92, 252, .6); transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s ease; } .lp-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 34px -8px rgba(124, 92, 252, .7); } .lp-cta .cta-arrow { display: inline-block; transition: transform .2s cubic-bezier(0, 0, .2, 1); } .lp-cta:hover .cta-arrow { transform: translateX(3px); } /* Bloc 2 « Le problème » : texte sobre + clause finale accentuée */ .lp-problem-text { font-family: var(--font-body); font-size: clamp(1.06rem, 2vw, 1.25rem); line-height: 1.7; color: var(--text-secondary); max-width: 60ch; margin-inline: auto; text-align: center; } .lp-emph { color: var(--text); font-weight: 500; } /* Punch « Pire : » — le span est un .reveal opacity-only : il reste INLINE (le flux de lecture/retours à la ligne du paragraphe ne bougent pas ; un transform est sans effet sur un inline non-remplacé, annulé ici EXPLICITEMENT pour l'intention — et la robustesse si display change). */ .lp-emph.reveal { transform: none; } /* ════════════════════════════════════════════════════════ BLOC 5 · CONFIANCE & SÉCURITÉ Démo Riot ID (toggle JS inline : #demo-card / .pcx-flip / .is-flipped / aria-pressed — FLIP 3D) + 3 garanties. Carte démo = composant PARTAGÉ .pcard.pc-xp (player-card.css), surcharges scopées .lp — sa base n'est JAMAIS touchée, donc l'app (dashboard / player / aperçus) reste intacte. ════════════════════════════════════════════════════════ */ /* Garantie 1 : copy | carte démo, réempile en 1 colonne sous 760px */ .lp-trust-demo { display: grid; grid-template-columns: 1fr; gap: var(--sp-8); align-items: center; } @media (min-width: 760px) { .lp-trust-demo { grid-template-columns: 1fr 1fr; gap: var(--sp-12); } } .lp-trust-copy { display: flex; flex-direction: column; gap: var(--sp-3); } /* Hint « retourner » = PASTILLE indigo discrète (l'ancien petit texte gris se ratait au scan). Reste à sa place (colonne .lp-trust-copy, sous le paragraphe). */ .lp-trust-hint { display: inline-flex; align-items: center; align-self: flex-start; gap: var(--sp-2); margin-top: var(--sp-2); padding: 9px 15px; border-radius: 999px; background: rgba(124,92,252,.12); border: .5px solid rgba(124,92,252,.35); font-family: var(--font-body); font-size: 13.5px; font-weight: 600; color: #B8A5FF; } .lp-trust-hint i { color: var(--indigo); font-size: 16px; flex: none; } /* Garanties 2 & 3 : décalage sous la démo (ex-style inline retiré) */ .lp-trust-guarantees { margin-top: var(--sp-8); } /* Carte démo = VRAI composant .pcard.pc-xp AVEC le châssis de FLIP 3D partagé (.pcx-flip / .pcx-back, player-card.css — déjà chargé, RÉUTILISÉ tel quel, jamais modifié). Le toggle inline (fin de body) bascule .is-flipped sur .pcx-flip → rotateY 180° ; le verso factice (Riot ID + Discord en dur, aucune injection : c'est une démo) réutilise les classes .pcx-back* du composant. Le cadenas .pcx-lock reste sur le recto (face « verrouillée ») et flippe hors-vue avec la carte (backface). */ /* Surcharges .lp du #demo-card (scopées → les vraies cartes de l'app NE SONT PAS touchées) : 1) VERSO : contenu aligné en HAUT (flex-start au lieu du center du composant) → sceau + Riot ID + Discord en haut ; le footer provenance (.pcx-prov, position:absolute en bas) reste ancré en bas → marge nette, ZÉRO nombre magique. Le recto PLEIN pilote la hauteur (~228px), le verso s'y loge sans chevauchement. 2) FOOT RECTO : même disposition UNE LIGNE que les cartes du hero (N° série à GAUCHE, pastille SAISON 1 à DROITE) — réplique de la règle .hero-fan (index inline) que la démo, hors .hero-fan, n'héritait pas ; elle tombait sur la base .pcx-cf-left (column = empilé). L'ID #demo-card bat la base. Markup identique au hero, seule la règle manquait. */ .lp #demo-card .pcx-back { justify-content: flex-start; } .lp #demo-card .pcx-cf-left { flex-direction: row-reverse; justify-content: space-between; align-items: center; flex: 1; } /* ── #trust · FIX reveal REMAPPÉ sur la coque .pcard (4e instance de la famille « porteur de reveal + transition propre » — base carte : transform/box-shadow/border-color .28s + hover lift translateY(-3px)). Lift migré transform→translate (pattern #how/#features) : transform reste au SEUL reveal → glissé reveal-right 540ms expo, opacité qui ne saute pas. Hover natifs (glow coque, foil, holo) intacts. ⚠️ Les 5 valeurs de délai mappent sur l'ordre de CETTE liste. cursor : l'article carte n'est pas cliquable nativement. */ .lp #demo-card { cursor: pointer; transition: opacity var(--dur-enter) var(--ease-expo), transform var(--dur-enter) var(--ease-expo), box-shadow .28s, border-color .28s, translate .28s; } .lp #demo-card:hover { transform: none; translate: 0 -3px; } /* Cascade interne de la démo ≥760 (breakpoint de CETTE grille .lp-trust-demo) : la copy (gauche, reveal sans délai) puis la carte (droite) — lecture→objet. <760 : empilé, séquence naturelle du scroll. */ @media (min-width: 760px) { .lp #demo-card { transition-delay: 160ms, 160ms, 0s, 0s, 0s; } } /* Chute des 2 garanties ≥640 (breakpoint de CETTE grille data-cols=2 — deux breakpoints coexistent dans la section, chaque MQ calée sur SA grille) : les 2 ENSEMBLE (grammaire rangée) en ponctuation de fin de section, 240ms = zone de chute (arrive APRÈS la carte démo à 160 même si toute la section entre d'un coup dans le viewport). Mapping = liste GLOBALE .lp-card.reveal (opacity, transform, border-color, translate). */ @media (min-width: 640px) { #trust .lp-trust-guarantees > article { transition-delay: 240ms, 240ms, 0s, 0s; } } /* Hover : la puce répond au survol de SA carte — recette #features (teinte --rose + scale 1.06 ; aucune choréo GSAP ici, scale sûr). SCOPÉ #trust (polish se scope, doctrine 3/7) ET scopé .lp-card : la puce eye-off de la COPY (hors carte — un bloc de lecture n'est pas une affordance) n'est matchée par AUCUNE de ces règles, elle reste calme. */ #trust .lp-card .lp-card-ico { transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } @media (hover: hover) { #trust .lp-card:hover .lp-card-ico { color: var(--rose); transform: scale(1.06); } } /* ════════════════════════════════════════════════════════ BLOC 6 · MATEXP VS LE RESTE — comparatif DA. Migré de l'inline critique vers .lp. Desktop : 3 colonnes, lane MateXP teintée indigo. Mobile : réempilement PAR CRITÈRE (carte/ligne), thead masqué, data-label = colonne → AUCUN scroll horizontal. Vert (--success) RÉSERVÉ au bloc 7 : ici, indigo/neutre only. ════════════════════════════════════════════════════════ */ .lp .vs-table { width: 100%; max-width: 840px; margin-inline: auto; border-collapse: separate; border-spacing: 0; font-family: var(--font-body); } .lp .vs-table th, .lp .vs-table td { padding: var(--sp-4) var(--sp-5); text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); } /* En-têtes de colonne */ .lp .vs-table thead th { font-family: var(--font-title); font-weight: 600; font-size: 1.05rem; } .lp .vs-table thead th:nth-child(2) { color: var(--text-muted); } .lp .vs-table thead th:last-child span { color: var(--indigo); background: var(--grad-strong); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Critère (col. 1) + valeurs */ .lp .vs-table tbody th[scope="row"] { font-family: var(--font-body); font-weight: 600; font-size: .95rem; color: var(--text); } .lp .vs-table tbody td { font-size: .95rem; line-height: 1.45; } .lp .vs-table tbody td:nth-child(2) { color: var(--text-muted); } .lp .vs-table tbody td:last-child { color: var(--text-secondary); } /* Marqueurs ✓ indigo / – neutre (jamais de croix rouge, jamais de vert) */ .lp .vs-table .vs-ok, .lp .vs-table .vs-x { font-size: 16px; margin-right: 7px; vertical-align: -2px; flex: none; } .lp .vs-table .vs-ok { color: var(--indigo); } .lp .vs-table .vs-x { color: var(--text-muted); } /* Hover desktop : la coche répond au survol de SA LIGNE (le tr = le duel — l'équivalent de « SA carte » aux passes #features/#trust) — teinte --rose, la même que les puces .lp-card-ico. hover:hover : rien au tactile ; hors MQ ≤759 : le hover est un comportement d'APPAREIL, pas de largeur, et il n'écrit que la couleur de l'icône (zéro interférence réempilement). */ .lp .vs-table .vs-ok { transition: color var(--dur-fast) var(--ease-out); } @media (hover: hover) { .lp .vs-table tbody tr:hover .vs-ok { color: var(--rose); } } /* Lane MateXP (dernière colonne) = teinte indigo + coins arrondis */ .lp .vs-table th:last-child, .lp .vs-table td:last-child { background: rgba(124, 92, 252, .07); } .lp .vs-table thead th:last-child { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); } .lp .vs-table tbody tr:last-child td:last-child { border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); } .lp .vs-table tbody tr:last-child th, .lp .vs-table tbody tr:last-child td { border-bottom: 0; } /* Phrase-choc = moment fort : titre dégradé + phrase de soutien */ .lp-vs-line { max-width: 62ch; margin: var(--sp-10) auto 0; text-align: center; font-family: var(--font-body); font-size: clamp(1.05rem, 2vw, 1.2rem); line-height: 1.7; color: var(--text-secondary); } .lp-vs-line strong { display: block; margin-bottom: var(--sp-3); font-family: var(--font-title); font-weight: 600; font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.2; color: var(--indigo); background: var(--grad-strong); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Objet mobile natif (option A, deux structures) : masqué par défaut — la bascule complète vit dans la MQ ≤759. Seule règle du chantier vue par le desktop (inerte : elle masque un bloc qu'il ne montre jamais). */ .lp .vs-cards { display: none; } /* ─── Mobile (<760px) : réempilement par critère, ZÉRO scroll horizontal ─── */ @media (max-width: 759px) { /* Bascule OPTION A : le tableau desktop disparaît (display:none = hors arbre d'accessibilité, zéro lecture en double), l'objet mobile NATIF prend le relais. Les anciennes règles de REPLI du tableau (tr-cartes, étiquettes ::before, ligne gagnante) sont MORTES avec la bascule — retirées. */ .lp .vs-table { display: none; } .lp .vs-cards { display: block; margin: 0; padding: 0; } /* Carte-critère : le vocabulaire des cartes de la page */ .vsc-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-5); margin-bottom: var(--sp-4); box-shadow: var(--shadow-card); } .vsc-title { display: block; font-family: var(--font-title); font-weight: 600; font-size: 1.15rem; color: var(--text); padding-bottom: var(--sp-3); margin-bottom: var(--sp-3); border-bottom: 1px solid var(--border); } /* Camp Ailleurs : ligne discrète, tout en retrait (--text-muted) */ .vsc-lose { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-muted); font-size: .95rem; line-height: 1.45; margin: 0 0 var(--sp-3); } .vsc-lose i { font-size: 14px; flex: none; } .vsc-tag { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; flex: none; } /* Camp MateXP : panneau GAGNANT vertical — fond/bordure de la ligne gagnante validée (.12/.34) + stries 52° et lèvre de l'encadré 500 (recettes EXISTANTES, zéro nouvelle matière). Texte pleine largeur SOUS la ligne badge+étiquette : le grief « 2 lignes » réglé. */ .vsc-win { background-color: rgba(124, 92, 252, .12); background-image: repeating-linear-gradient(52deg, rgba(255,255,255,.04) 0 1px, transparent 1px 6px); border: 1px solid rgba(124, 92, 252, .34); border-radius: var(--radius-sm); padding: var(--sp-3); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); } .vsc-win-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); } .vsc-win .vsc-tag { color: var(--indigo); font-weight: 700; font-size: .75rem; } /* Badge coche : rond --grad-brand (micro-badge dégradé — précédent VALIDÉ : check-badge .pre-chip, index :370 ; le punch strong reste le moment dégradé PLEIN de l'écran). ✓ blanc ; la croix Ailleurs reste GRISE, le perdant ne se réchauffe pas. */ .vsc-badge { width: 22px; height: 22px; border-radius: 50%; background: var(--grad-brand); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; } .vsc-badge i { font-size: 12px; line-height: 1; } .vsc-win-text { margin: 0; color: var(--text); font-weight: 500; font-size: .95rem; line-height: 1.5; } /* Punch = plaque-verdict (validée device) — SURVIVANTE, au caractère près : chute commune aux deux structures. */ .lp-vs-line { margin-top: var(--sp-12); padding: var(--sp-6) var(--sp-5); background: rgba(124, 92, 252, .07); border: 1px solid rgba(124, 92, 252, .28); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); } } /* ══════════════════════════════════════════════ BLOC 7 · APERÇU PRODUIT — bento : la vraie app en captures. Chaque tuile (capture d'un vrai écran) porte SA légende bénéfice juste dessous (unité .fb-item, gap serré) → le lien image/sens est explicite. Bande dashboard (hero, liseré --grad-brand) + carte | fiabilité/ambiance. ══════════════════════════════════════════════ */ .feed-bento { display: flex; flex-direction: column; gap: var(--sp-6); margin-top: var(--sp-8); } /* Unité tuile + légende : gap SERRÉ → la légende est rattachée à SON image. */ .fb-item { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); } .fb-cap { margin: 0; font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 1.4; color: var(--text-secondary); text-align: center; } .fb-tile { position: relative; min-width: 0; background: var(--bg-0); border: .5px solid var(--border-1); border-radius: var(--r-lg); overflow: hidden; } /* img absolue → n'impose pas sa largeur intrinsèque (la tuile tire sa hauteur de l'aspect-ratio). */ .fb-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* Bande dashboard : pleine largeur, aspect EXACT (sidebar + feed + peek). */ .fb-dash { aspect-ratio: 2880 / 1152; } /* Le SEUL moment gradient : fin liseré --grad-brand en haut de la bande hero. */ .fb-dash::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--grad-brand); z-index: 3; } /* Rangée basse : carte (colonne étroite) | fiabilité + ambiance empilées. Chaque tuile prend sa hauteur de son aspect-ratio ; colonnes ~équilibrées (carte ≈ 2 bandeaux + leurs légendes), hauts alignés. */ .fb-row { display: grid; grid-template-columns: clamp(190px, 24%, 255px) 1fr; gap: var(--sp-4); align-items: start; } .fb-card { aspect-ratio: 760 / 1300; } .fb-right { min-width: 0; display: grid; gap: var(--sp-4); } .fb-reliab { aspect-ratio: 1520 / 360; } .fb-ambiance { aspect-ratio: 1520 / 412; } /* Mobile : tout s'empile — dashboard → carte → fiabilité → ambiance, chacun sa légende. */ @media (max-width: 759px) { .fb-row { grid-template-columns: 1fr; } } } /* ════════════════════════════════════════════════════════ BLOC 8 · FONDATEUR — lettre + carte ÉDITION FONDATEUR figée (snapshot card-full.js, même méthode que le bloc 7). L'or vit dans la CARTE (player-card.css .fnd/--pc-gold) — AUCUNE règle or ici : chrome de section = système .lp (indigo/neutre). ════════════════════════════════════════════════════════ */ /* LETTRE ASSUMÉE (09/07 — la version carte collector a été DÉMONTÉE le jour même, trop hybride ; il n'en survit que le bloc-signature). Texte NU en flux, largeur de lecture 68ch ; UN SEUL objet encadré : la plaque signature (stries 52° recette encadré 500, alphas indigo doux .06/.22 — valeurs maquette) + rond glass SE (.av-ring) + badge année (esprit .pcx-edpill : stries .16/5px sur var(--grad-brand), token global — composant app intouché). Le filet doré ne revient pas (--gold-echo orphelin, l'or vit au 500/#beta). */ .lp-founder { display: grid; grid-template-columns: 1fr; gap: var(--sp-10); align-items: start; } .fnd-letter { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 68ch; margin-inline: auto; } /* p : cible directe pour battre la règle p globale de typography.css. */ .fnd-letter > p { font-family: var(--font-body); font-size: 1.05rem; font-weight: 400; line-height: 1.7; color: var(--text); } .fnd-letter > p:first-of-type { font-size: 1.15rem; } .fnd-sign { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-4); padding: var(--sp-4) var(--sp-5); background-color: rgba(124,92,252,.06); background-image: repeating-linear-gradient(52deg, rgba(255,255,255,.04) 0 1px, transparent 1px 6px); border: 1px solid rgba(124,92,252,.22); border-radius: var(--radius); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); } /* lèvre de lumière (recette encadré 500) — ajoutée sur retour device : plaque jugée plate sans */ .fnd-av { flex: none; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 14px; } .lp-founder-name { font-family: var(--font-sign); font-weight: 700; font-size: clamp(2rem, 6vw, 2.6rem); line-height: 1; color: var(--text); } /* Badge année : pill façon Saison, poussé à droite (margin-left:auto) ; si l'espace manque il passe PROPREMENT dessous, aligné droite (flex-wrap). */ .fnd-year { margin-left: auto; display: inline-flex; align-items: center; flex: none; font-family: var(--font-display); font-weight: 800; font-size: 10px; letter-spacing: .8px; line-height: 1; padding: 4px 10px; border-radius: 999px; background: repeating-linear-gradient(52deg, rgba(255,255,255,.16) 0 1px, transparent 1px 5px), var(--grad-brand); color: rgba(9,6,20,.62); text-shadow: 0 1px 0 rgba(255,255,255,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.35); } /* Légende honnêteté — consommée par #beta (la carte et ses légendes ont migré ; .lp-founder-rarity est MORTE et purgée, message 500 à UN endroit). */ .lp-founder-note { margin-top: var(--sp-2); text-align: center; font-family: var(--font-body); font-size: .8rem; color: var(--text-muted); }