@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); /* ══════════════════════════════════════════════════════════════════════════ SYSTÈME DE THÈMES ───────────────────────────────────────────────────────────────────────── • Définir un nouveau thème : ajouter un bloc html[data-theme="xxx"] {} avec les variables ci-dessous, puis poser data-theme="xxx" sur . • Pour forcer le contexte sombre à l'intérieur d'un thème clair (ex : player vidéo, hero sur image), utiliser la classe .on-dark. ══════════════════════════════════════════════════════════════════════════ */ /* ── Thème dark (défaut / fallback) ─────────────────────────────────────── */ html, html[data-theme="dark"] { --badge-dub-bg: rgba(251,191,36,.14); --badge-dub-fg: #fbbf24; --badge-vo-bg: rgba(161,161,170,.14); --badge-vo-fg: #a1a1aa; --badge-sub-bg: rgba(129,140,248,.14); --badge-sub-fg: #818cf8; --bg-base: #0d0d0d; --bg-surface: #18181b; --bg-elevated: #27272a; --text-primary: #f2f2f7; --text-secondary: #d4d4d8; --text-muted: #71717a; --border: #27272a; --accent: #7c3aed; --accent-hover: #6d28d9; --accent-shadow: rgba(124,58,237,.4); --nav-bg: rgba(13,13,13,.95); --nav-border: #27272a; --nav-hover-bg: rgba(255,255,255,.08); --nav-text: #a1a1aa; --nav-text-active: #ffffff; --search-bg: #18181b; --search-border: #3f3f46; --btn-bg: #18181b; --btn-text: #d4d4d8; --btn-hover: #27272a; --card-shadow: rgba(0,0,0,.6); --ep-row-hover: rgba(255,255,255,.05); --ep-active-bg: rgba(124,58,237,.2); --ep-active-border: #7c3aed; } /* ── Thème light (inspiré de l'ancien NFP : amber nav + violet accent) ──── */ html[data-theme="light"] { --badge-dub-bg: rgba(180,83,9,.10); --badge-dub-fg: #92400e; --badge-vo-bg: rgba(120,113,108,.10); --badge-vo-fg: #78716c; --badge-sub-bg: rgba(67,56,202,.09); --badge-sub-fg: #4338ca; --bg-base: #fdfaf3; --bg-surface: #f5eddb; --bg-elevated: #ecdfc8; --text-primary: #1a1000; --text-secondary: #3d2b00; --text-muted: #7a6045; /* contrast 5:1 sur --bg-base ✓ */ --border: #d9c99a; --accent: #8e44ad; /* violet de l'ancien site */ --accent-hover: #7d3b9a; --accent-shadow: rgba(142,68,173,.2); --nav-bg: #f7ae2f; /* amber doré de l'ancien site */ --nav-border: #fa8202; --nav-hover-bg: #ffbd4a; /* hover de l'ancien site */ --nav-text: #111827; --nav-text-active: #1F2937; --search-bg: #f5eddb; --search-border: #d9c99a; --btn-bg: #f5eddb; --btn-text: #3d2b00; --btn-hover: #ecdfc8; --card-shadow: rgba(0,0,0,.10); --ep-row-hover: rgba(247,174,47,.10); --ep-active-bg: rgba(142,68,173,.08); --ep-active-border: #8e44ad; } /* ── Contexte sombre local (.on-dark) ─────────────────────────────────────── Redéfinit les variables pour la zone couverte, quel que soit le thème. Usage : hero sur image, player vidéo, overlays sombres. ─────────────────────────────────────────────────────────────────────────── */ .on-dark { --bg-base: #141414; --bg-surface: #1c1c1c; --bg-elevated: #262626; --text-primary: #f2f2f7; --text-secondary: #d4d4d8; --text-muted: #71717a; --border: #2e2e2e; --ep-row-hover: rgba(255,255,255,.05); --ep-active-bg: rgba(124,58,237,.2); --ep-active-border: #7c3aed; color: var(--text-primary); background: var(--bg-base); } /* ── Base ────────────────────────────────────────────────────────────────── */ html, body { /* Garde-fou : un enfant trop large (ex: nav) ne doit jamais élargir la page ni provoquer de scroll horizontal, surtout en mobile. */ overflow-x: hidden; max-width: 100vw; } body { font-family: 'Inter', sans-serif; background: var(--bg-base); color: var(--text-primary); } /* ── Nav ─────────────────────────────────────────────────────────────────── */ .nfp-nav { background: var(--nav-bg) !important; border-color: var(--nav-border) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .nfp-nav-link { color: var(--nav-text); transition: color .15s, background .15s; padding: .25rem .5rem; border-radius: .375rem; } .nfp-nav-link:hover { color: var(--nav-text-active); background: var(--nav-hover-bg); } .nfp-nav-active { color: var(--nav-text-active) !important; font-weight: 700; border-bottom: 2px solid var(--nav-border); } /* ── Cards ───────────────────────────────────────────────────────────────── */ .card-hover { transition: transform .25s ease, box-shadow .25s ease; } .card-hover:hover { transform: scale(1.04); box-shadow: 0 8px 32px var(--card-shadow); } /* ══════════════════════════════════════════════════════════════════════════ COMPOSANTS RÉUTILISABLES — catalogues / affiches Factorisent le markup Tailwind dupliqué entre index / series / movies / comics / series-detail. Les bindings Alpine (x-text/x-show) restent inline. ══════════════════════════════════════════════════════════════════════════ */ /* Grille responsive d'affiches (3→7 colonnes) */ .card-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (min-width: 640px) { .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 768px) { .card-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (min-width: 1024px) { .card-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } } @media (min-width: 1280px) { .card-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } } /* Rangée à défilement horizontal — barre de scroll visible (fine, thème violet) pour signaler clairement qu'il y a plus de contenu à droite. Associer à .scroll-hide pour la masquer (cas où on ne veut pas l'indice visuel). */ .scroll-row { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .75rem; scrollbar-width: thin; scrollbar-color: var(--accent, #8b5cf6) var(--bg-surface, #27272a); } .scroll-row::-webkit-scrollbar { height: 6px; } .scroll-row::-webkit-scrollbar-track { background: var(--bg-surface, #27272a); border-radius: 3px; } .scroll-row::-webkit-scrollbar-thumb { background: var(--accent, #8b5cf6); border-radius: 3px; } .scroll-row::-webkit-scrollbar-thumb:hover { background: var(--accent-hover, #7c3aed); } /* Affiche (cover) — ratio 2:3 par défaut, 16:9 pour les vignettes d'épisode */ .poster { position: relative; border-radius: .75rem; overflow: hidden; background: var(--bg-surface); aspect-ratio: 2 / 3; } .poster--video { aspect-ratio: 16 / 9; } .poster--booru { aspect-ratio: 4 / 3; border-radius: 1rem; transition: transform .2s ease, box-shadow .2s ease; } .poster--booru:hover { transform: scale(1.03); box-shadow: 0 8px 24px rgba(0,0,0,.4); } .poster__img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Fallback dégradé quand l'image est absente (variante de teinte via modifier) */ .poster__fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-image: linear-gradient(to bottom right, var(--ph-from, #4c1d95), var(--ph-to, #18181b)); } .poster__fallback--blue { --ph-from: #1e3a8a; } .poster__fallback--emerald { --ph-from: #064e3b; } .poster__fallback--rose { --ph-from: #881337; } .poster__letter { font-size: 1.875rem; font-weight: 900; color: rgba(255, 255, 255, .2); } /* Overlay « play » au survol de la carte (.group requis sur le parent) */ .play-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0); transition: background .25s; } .group:hover .play-overlay { background: rgba(0, 0, 0, .4); } .play-overlay__btn { width: 3rem; height: 3rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0); opacity: 0; transform: scale(.85); transition: opacity .25s, transform .25s, background .25s; } .group:hover .play-overlay__btn { opacity: 1; transform: scale(1); background: rgba(255, 255, 255, .2); } .play-overlay--sm .play-overlay__btn { width: 2.5rem; height: 2.5rem; } .play-overlay--accent .play-overlay__btn { background: var(--accent); } .group:hover .play-overlay--accent .play-overlay__btn { background: var(--accent); } .play-overlay__icon { width: 1.5rem; height: 1.5rem; color: #fff; margin-left: 2px; } .play-overlay--sm .play-overlay__icon { width: 1.25rem; height: 1.25rem; } /* Skeletons de chargement (indépendants de Tailwind animate-pulse) */ @keyframes nfp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } } .skeleton { background: var(--bg-surface); border-radius: .75rem; animation: nfp-pulse 1.5s ease-in-out infinite; } .skeleton-cell { aspect-ratio: 2 / 3; } /* Spinner unique (taille via --spin-size ou modifier) */ @keyframes nfp-spin { to { transform: rotate(360deg); } } .nfp-spinner { width: var(--spin-size, 2rem); height: var(--spin-size, 2rem); border: 2px solid var(--accent); border-top-color: transparent; border-radius: 9999px; animation: nfp-spin .8s linear infinite; } .nfp-spinner--lg { --spin-size: 2.5rem; } /* État vide générique */ .empty-state { text-align: center; color: var(--text-muted); padding: 5rem 0; } /* Titre animé NFPBooru */ @keyframes nfp-gradient-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .nfp-booru-title { background: linear-gradient(90deg, #8b5cf6, #ec4899, #f59e0b, #8b5cf6); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: nfp-gradient-shift 6s ease infinite; font-weight: 800; } /* ── Hero gradients (toujours sombres — superposés sur une image) ────────── */ .hero-grad-h { background: linear-gradient(to right, rgba(13,13,13,.95) 0%, rgba(13,13,13,.70) 50%, transparent 100% ); } .hero-grad-v { background: linear-gradient(to top, rgba(13,13,13,1.00) 0%, transparent 60%, rgba(13,13,13,.20) 100% ); } /* ── Scrollbar ───────────────────────────────────────────────────────────── */ .scroll-hide { scrollbar-width: none; -ms-overflow-style: none; } .scroll-hide::-webkit-scrollbar { display: none; } /* ── Text clamping ───────────────────────────────────────────────────────── */ .line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .line-clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .line-clamp-4 { display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; } /* ── Episode rows ────────────────────────────────────────────────────────── */ .ep-row { transition: background .15s; } .ep-row:hover { background: var(--ep-row-hover); } /* ── Watch sidebar ───────────────────────────────────────────────────────── */ .ep-item { transition: background .15s; border-left: 2px solid transparent; } .ep-item:hover:not(.unavailable) { background: var(--ep-row-hover); } .ep-item.active { background: var(--ep-active-bg); border-left-color: var(--ep-active-border); } .ep-item.unavailable { opacity: .35; cursor: not-allowed; } /* ── Commentaires — zébrage léger sur la surface du thème (pas de zinc brut, sinon ça tranche sur le thème clair crème) + hover cohérent avec les lignes d'épisode. ────────────────────────────────────────────────────── */ .comment-row { border-radius: .75rem; padding: .75rem; transition: background-color .2s ease; margin-left: calc(var(--cd, 0) * 22px); max-width: 100%; } .comment-row--alt { background: var(--bg-surface); } .comment-row:hover { background: var(--ep-row-hover); } .comment-row[data-nested] { border-left: 2px solid hsl(258 30% calc(34% - var(--cd, 0) * 4%)); padding-left: 10px; } /* Mobile : pas plus de ~36px d'indentation cumulée même à profondeur max, sinon le texte des réponses se retrouve écrasé sur une bande étroite. */ @media (max-width: 640px) { .comment-row { margin-left: calc(var(--cd, 0) * 9px); } .comment-row[data-nested] { padding-left: 6px; } .comment-row .comment-avatar { width: 1.5rem !important; height: 1.5rem !important; } } /* ── Plyr — design inspiré YouTube ──────────────────────────────────────── */ .plyr { --plyr-color-main: var(--accent); --plyr-range-track-height: 4px; --plyr-range-thumb-height: 13px; --plyr-range-thumb-width: 13px; --plyr-control-spacing: 12px; --plyr-font-size-time: 13px; --plyr-control-icon-size: 18px; --plyr-video-controls-background: linear-gradient(transparent, rgba(0,0,0,.4) 50%, rgba(0,0,0,.8)); border-radius: 12px; overflow: hidden; } /* Scrubber sur sa propre ligne, pleine largeur, au-dessus des boutons (YouTube) */ .plyr--video .plyr__controls { flex-wrap: wrap; align-items: center; padding-top: 26px; } .plyr--video .plyr__progress__container { order: -1; flex: 0 0 100%; width: 100%; margin: 0 0 4px; padding: 4px 0; /* zone tactile plus haute autour de la barre */ } .plyr--video .plyr__progress { margin: 0; } .plyr--video .plyr__progress input[type='range'] { width: 100%; } /* Barre qui grossit au survol / focus / lecture tactile (feedback YouTube) */ .plyr--video .plyr__progress__container:hover, .plyr--video .plyr__progress__container:focus-within { --plyr-range-track-height: 6px; } /* ── Mobile : contrôles plus compacts mais scrubber bien visible ─────────── */ @media (max-width: 768px) { .plyr { --plyr-control-spacing: 8px; --plyr-range-track-height: 5px; --plyr-range-thumb-height: 16px; --plyr-range-thumb-width: 16px; --plyr-control-icon-size: 17px; --plyr-font-size-time: 12px; } /* Forcer les contrôles toujours visibles (override auto-hide Plyr) */ .plyr--video .plyr__controls { flex-wrap: wrap !important; padding-top: 22px; } .plyr.plyr--hide-controls .plyr__controls { opacity: 1 !important; pointer-events: auto !important; } /* Passer les contrôles Plyr au-dessus de l'overlay tactile (z-10) */ .plyr__controls { position: relative; z-index: 20 !important; } /* Masquer volume (géré par hardware), pip (rarement supporté) et play-large (remplacé par overlay) */ .plyr--video .plyr__volume, .plyr--video [data-plyr="pip"], .plyr__control--overlaid { display: none !important; } .plyr--video .plyr__progress__container { --plyr-range-track-height: 7px; padding: 6px 0; } /* Le thumb reste visible en permanence sur tactile (pas de hover possible) */ .plyr--video .plyr__progress input[type='range']::-webkit-slider-thumb { opacity: 1; } .plyr--video .plyr__progress input[type='range']::-moz-range-thumb { opacity: 1; } } /* Flash play/pause au centre (YouTube-style) */ .plyr-flash { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 20; } .plyr-flash__icon { width: 64px; height: 64px; background: rgba(0,0,0,.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; opacity: 0; transition: opacity .15s; } .plyr-flash__icon.visible { opacity: 1; } .plyr-flash__icon.fade { opacity: 0; transition: opacity .4s; } /* ── Sous-titres — style piloté par CSS custom properties ───────────────── */ /* Les valeurs par défaut sont écrasées dynamiquement via JS (watchPage.applySubStyle) */ :root { --sub-color: #FFD700; --sub-size: 1.4em; --sub-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000; --sub-bg: transparent; --sub-padding: 0; --sub-radius: 0; } /* Plyr injecte les cues dans .plyr__captions > span.plyr__caption */ .plyr__captions { background: transparent !important; pointer-events: none; } .plyr__captions .plyr__caption { display: inline-block; color: var(--sub-color) !important; font-size: var(--sub-size) !important; text-shadow: var(--sub-shadow) !important; background: var(--sub-bg) !important; padding: var(--sub-padding) !important; border-radius:var(--sub-radius) !important; font-weight: 600; line-height: 1.3; white-space: pre-wrap; } /* ── Contrôles recherche / filtres ──────────────────────────────────────── */ .search-input { background: var(--search-bg); border: 1px solid var(--search-border); border-radius: .5rem; padding: .625rem 1rem; font-size: .875rem; color: var(--text-primary); outline: none; transition: border-color .15s; display: block; } .search-input:focus { border-color: var(--accent); } .search-input::placeholder { color: var(--text-muted); } .btn { background: var(--btn-bg); color: var(--btn-text); border-radius: .5rem; } .btn:hover { background: var(--btn-hover); } .btn-active { background: var(--accent); color: #fff; } /* ── Badges audio / sous-titres ──────────────────────────────────────────── */ .ep-badge { display:inline-flex; align-items:center; padding:1px 4px; font-size:9px; font-weight:800; border-radius:3px; letter-spacing:.04em; line-height:1.5; } .ep-badge-dub { background: var(--badge-dub-bg); color: var(--badge-dub-fg); } .ep-badge-vo { background: var(--badge-vo-bg); color: var(--badge-vo-fg); } .ep-badge-sub { background: var(--badge-sub-bg); color: var(--badge-sub-fg); } /* ── Actualités ──────────────────────────────────────────────────────────── */ /* Theme-aware (adapte automatiquement light / dark via les variables) */ .news-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: .75rem; transition: border-color .15s ease, box-shadow .15s ease; } .news-card:hover { border-color: var(--accent); box-shadow: 0 6px 20px var(--card-shadow); } .news-toggle { border-radius: .75rem; } .news-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .news-pin { color: var(--accent); } .news-title { color: var(--text-primary); } .news-preview { color: var(--text-secondary); } .news-body { color: var(--text-secondary); } .news-meta, .news-chevron { color: var(--text-muted); } .news-link { color: var(--accent); transition: opacity .15s; } .news-link:hover { opacity: .75; } .news-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: .375rem; } .news-badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 9999px; font-size: 11px; font-weight: 700; line-height: 1.4; border: 1px solid transparent; white-space: nowrap; } /* Pastilles teintées, lisibles sur fond clair comme sombre */ .news-badge-annonce { background: rgba(142,68,173,.14); color: #8e44ad; border-color: rgba(142,68,173,.32); } .news-badge-update { background: rgba(37,99,235,.13); color: #2563eb; border-color: rgba(37,99,235,.30); } .news-badge-maintenance { background: rgba(217,119,6,.15); color: #b45309; border-color: rgba(217,119,6,.32); } .news-badge-event { background: rgba(5,150,105,.14); color: #047857; border-color: rgba(5,150,105,.30); } .news-badge-content { background: rgba(219,39,119,.13); color: #db2777; border-color: rgba(219,39,119,.30); } .news-badge-default { background: rgba(120,113,108,.14); color: var(--text-muted); border-color: var(--border); } /* Légère remontée des couleurs de texte des pastilles en thème sombre */ html[data-theme="dark"] .news-badge-annonce, html[data-theme="oled"] .news-badge-annonce { color: #c084fc; } html[data-theme="dark"] .news-badge-update, html[data-theme="oled"] .news-badge-update { color: #60a5fa; } html[data-theme="dark"] .news-badge-maintenance, html[data-theme="oled"] .news-badge-maintenance { color: #fbbf24; } html[data-theme="dark"] .news-badge-event, html[data-theme="oled"] .news-badge-event { color: #34d399; } html[data-theme="dark"] .news-badge-content, html[data-theme="oled"] .news-badge-content { color: #f472b6; } /* ══════════════════════════════════════════════════════════════════════════ OVERRIDES TAILWIND — THÈME LIGHT UNIQUEMENT Exclus des zones .on-dark (CSS Selectors Level 4 :not() complex) ══════════════════════════════════════════════════════════════════════════ */ html[data-theme="light"] .bg-zinc-950:not(.on-dark):not(.on-dark *) { background-color: var(--bg-base) !important; } html[data-theme="light"] .bg-zinc-900:not(.on-dark):not(.on-dark *) { background-color: var(--bg-surface) !important; } html[data-theme="light"] .bg-zinc-800:not(.on-dark):not(.on-dark *) { background-color: var(--bg-elevated) !important; } html[data-theme="light"] .bg-zinc-700:not(.on-dark):not(.on-dark *) { background-color: var(--bg-elevated) !important; } html[data-theme="light"] .bg-zinc-900\/50:not(.on-dark):not(.on-dark *) { background-color: color-mix(in srgb, var(--bg-surface) 50%, transparent) !important; } html[data-theme="light"] .bg-zinc-900\/60:not(.on-dark):not(.on-dark *) { background-color: color-mix(in srgb, var(--bg-surface) 60%, transparent) !important; } html[data-theme="light"] .bg-zinc-900\/70:not(.on-dark):not(.on-dark *) { background-color: color-mix(in srgb, var(--bg-surface) 70%, transparent) !important; } html[data-theme="light"] .bg-zinc-900\/80:not(.on-dark):not(.on-dark *) { background-color: color-mix(in srgb, var(--bg-surface) 80%, transparent) !important; } /* Violet Tailwind brut trop clair sur fond crème : mapper sur --accent du thème */ html[data-theme="light"] .text-violet-300:not(.on-dark):not(.on-dark *), html[data-theme="light"] .text-violet-400:not(.on-dark):not(.on-dark *) { color: var(--accent) !important; } html[data-theme="light"] .text-zinc-100:not(.on-dark):not(.on-dark *), html[data-theme="light"] .text-zinc-200:not(.on-dark):not(.on-dark *) { color: var(--text-primary) !important; } html[data-theme="light"] .text-zinc-300:not(.on-dark):not(.on-dark *) { color: var(--text-secondary) !important; } html[data-theme="light"] .text-zinc-400:not(.on-dark):not(.on-dark *) { color: var(--text-muted) !important; } html[data-theme="light"] .text-zinc-500:not(.on-dark):not(.on-dark *), html[data-theme="light"] .text-zinc-600:not(.on-dark):not(.on-dark *) { color: var(--text-muted) !important; } html[data-theme="light"] .border-zinc-900:not(.on-dark):not(.on-dark *), html[data-theme="light"] .border-zinc-800:not(.on-dark):not(.on-dark *), html[data-theme="light"] .border-zinc-700:not(.on-dark):not(.on-dark *) { border-color: var(--border) !important; } html[data-theme="light"] footer { border-color: var(--border); color: var(--text-muted); } /* ── Badge horodatage (reprise, durée…) — teinté accent, lisible dark/light ── */ .time-badge { display: inline-block; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; padding: .1rem .4rem; border-radius: .25rem; } /* ── Panneau "prochain épisode" — s'adapte aux deux thèmes via variables ──── */ .next-ep-card { background: var(--bg-elevated); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent), 0 1px 6px rgba(0,0,0,.06); } /* ══════════════════════════════════════════════════════════════════════════ HEADER — EFFET HOVER + LOGO FP ══════════════════════════════════════════════════════════════════════════ */ /* Hauteur responsive : suit le ratio naturel (1196×200) jusqu'à sa taille max, jamais plus grand que le pixel-perfect natif sur grands écrans. Pas de plancher min-height : un plancher casserait le ratio sur mobile (largeur trop petite pour l'atteindre) et créerait des bandes vides au-dessus/dessous via object-contain. */ .nfp-header-wrap { height: min(calc(100vw / 5.98), 200px); } /* Overlay shimmer qui traverse le header au hover */ .nfp-header-wrap .nfp-header-shimmer { position: absolute; inset: 0; z-index: 20; pointer-events: none; background: linear-gradient( 105deg, transparent 35%, rgba(255,255,255,.07) 50%, transparent 65% ); background-size: 250% 100%; background-position: -100% 0; transition: background-position .9s cubic-bezier(.25,.46,.45,.94); } .nfp-header-wrap:hover .nfp-header-shimmer { background-position: 150% 0; } /* Légère lueur violette sur tout le header au hover */ .nfp-header-wrap::after { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; box-shadow: inset 0 0 0 0 rgba(124,58,237,0); transition: box-shadow .4s ease; } .nfp-header-wrap:hover::after { box-shadow: inset 0 0 80px rgba(124,58,237,.12); } /* Logo FrancoPonies — positionné en bas-droite du header */ .nfp-fp-logo { position: absolute; bottom: 4px; right: 20px; z-index: 30; display: flex; flex-direction: column; align-items: flex-end; text-decoration: none; } .nfp-fp-logo img { height: 52px; width: auto; display: block; filter: drop-shadow(0 2px 8px rgba(0,0,0,.6)); transition: transform .35s cubic-bezier(.34,1.56,.64,1), filter .35s ease; } .nfp-fp-logo:hover img { transform: scale(1.12) rotate(-4deg); filter: drop-shadow(0 6px 20px rgba(124,58,237,.75)) brightness(1.1); } /* Tooltip au hover du logo FP */ .nfp-fp-tooltip { font-size: 10px; font-weight: 700; color: #fff; background: rgba(124,58,237,.85); padding: 2px 8px; border-radius: 99px; white-space: nowrap; margin-top: 4px; opacity: 0; transform: translateY(4px); transition: opacity .2s ease, transform .2s ease; pointer-events: none; letter-spacing: .03em; } .nfp-fp-logo:hover .nfp-fp-tooltip { opacity: 1; transform: translateY(0); } /* ══════════════════════════════════════════════════════════════════════════ FOOTER ══════════════════════════════════════════════════════════════════════════ */ .nfp-footer { background: var(--bg-base); } /* Lien social */ .nfp-social-link { display: flex; align-items: center; gap: 7px; text-decoration: none; color: var(--text-muted); font-size: .75rem; font-weight: 600; transition: color .2s ease, transform .2s ease; } .nfp-social-link:hover { color: var(--text-primary); transform: translateY(-2px); } .nfp-social-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--bg-elevated); color: var(--text-muted); transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; flex-shrink: 0; } .nfp-social-link:hover .nfp-social-icon { transform: scale(1.1); } /* Twitter/X — hover bleu-noir */ .nfp-social-link:hover .nfp-social-icon:not(.nfp-social-paypal):not(.nfp-social-discord) { background: #1d9bf0; color: #fff; box-shadow: 0 4px 14px rgba(29,155,240,.35); } /* PayPal — hover bleu PayPal */ .nfp-social-paypal { } .nfp-social-link:hover .nfp-social-paypal { background: #003087; color: #fff; box-shadow: 0 4px 14px rgba(0,48,135,.4); } /* Discord / FrancoPonies — hover indigo */ .nfp-social-discord { } .nfp-social-link:hover .nfp-social-discord { background: #5865f2; color: #fff; box-shadow: 0 4px 14px rgba(88,101,242,.4); } .nfp-social-label { display: none; } @media (min-width: 640px) { .nfp-social-label { display: inline; } }