/* ============================================================ HOME TMTL — assets/css/home.css Chargé dans via home_config.hookHead() — persistant après navigation AJAX (jamais écrasé par le remplacement main) Scopé sous .hm-page pour zéro collision. ============================================================ */ /* ── Masquage éléments par défaut ── */ .hm-page .page-title, .hm-page .page-content:empty { display: none; } /* ── Container commun ── */ .hm-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; } /* ══ 1. HERO ══════════════════════════════════════════════════ */ .hm-hero { padding: 2px 20px 20px; max-width: 1120px; margin: 0 auto; text-align: center; } .hm-hero-eyebrow { display: inline-flex; align-items: center; gap: 7px; padding: 5px 16px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--theme-accent) 30%, transparent); background: color-mix(in srgb, var(--theme-accent) 8%, transparent); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--theme-accent-soft) 90%, white); margin-bottom: 20px; } .hm-hero-title { font-family: 'moonbeam', system-ui, sans-serif; font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 400; line-height: 1.05; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 12px; color: var(--theme-text); } .hm-hero-title span { color: var(--theme-accent); } .hm-hero-title .hm-hero-sub-line { font-size: clamp(1.4rem, 3vw, 2.4rem) !important; font-weight: 400; letter-spacing: .06em; text-transform: none; display: block; margin-top: 6px; color: var(--theme-text); } .hm-hero-sub { font-size: .88rem; color: rgba(255,255,255,.35); line-height: 1.65; max-width: 500px; margin: 0 auto 10px; } @media (min-width: 600px) { .hm-hero-sub { white-space: nowrap; max-width: none; } } .hm-hero-ctas { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 32px; } .hm-btn-p { display: inline-flex; align-items: center; gap: 7px; padding: 11px 26px; border-radius: 999px; background: linear-gradient(135deg, var(--theme-accent), var(--theme-accent-soft)); color: #050018; font-weight: 700; font-size: .92rem; text-decoration: none; border: none; transition: filter .15s, transform .14s; } .hm-btn-p:hover { filter: brightness(1.1); transform: translateY(-1px); text-decoration: none; color: #050018; } .hm-btn-s { display: inline-flex; align-items: center; gap: 7px; padding: 11px 26px; border-radius: 999px; background: rgba(255,255,255,.06); color: var(--theme-text); font-weight: 600; font-size: .92rem; text-decoration: none; border: 1px solid rgba(255,255,255,.14); transition: background .15s, transform .14s; } .hm-btn-s:hover { background: rgba(255,255,255,.1); transform: translateY(-1px); text-decoration: none; color: var(--theme-text); } .hm-stats { display: inline-flex; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; overflow: hidden; } .hm-stat { padding: 12px 22px; text-align: center; border-right: 1px solid rgba(255,255,255,.07); } .hm-stat:last-child { border-right: none; } .hm-stat-val { font-size: 1.6rem; font-weight: 900; line-height: 1; color: var(--theme-accent); font-variant-numeric: tabular-nums; } .hm-stat-lab { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--theme-muted); margin-top: 3px; } /* ══ 2. SLIDER ════════════════════════════════════════════════ */ .hm-slider-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px 14px; } .hm-page .hero-slider { width: 100% !important; border-radius: var(--theme-radius) !important; overflow: hidden; margin-top: 0 !important; } .hm-page .hero-slider-track { height: 320px !important; min-height: 320px !important; } .hm-page .hero-slide, .hm-page .hero-slide-link { height: 320px !important; min-height: 320px !important; } .hm-page .hero-slide img, .hm-page .hero-slide-link img { width: 100%; height: 100%; object-fit: cover; object-position: center; animation: hmKenBurns 14s ease-in-out infinite alternate; } @keyframes hmKenBurns { from { transform: scale(1.02); } to { transform: scale(1.08); } } .hm-page .hero-slider::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 100px; background: linear-gradient(to top, color-mix(in srgb, var(--theme-bg) 65%, transparent), transparent); pointer-events: none; z-index: 5; border-radius: 0 0 var(--theme-radius) var(--theme-radius); } .hm-page .hero-slider-dot { background: rgba(255,255,255,.3); } .hm-page .hero-slider-dot.is-active { background: var(--theme-accent); width: 18px; } /* ══ 3. TICKER ════════════════════════════════════════════════ */ .hm-ticker-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; } .hm-ticker { display: flex; align-items: center; height: 32px; overflow: hidden; background: color-mix(in srgb, var(--theme-bg-alt) 80%, var(--theme-bg)); border: 1px solid rgba(255,255,255,.06); border-radius: 4px; } .hm-ticker-badge { flex-shrink: 0; display: flex; align-items: center; height: 100%; padding: 0 14px; font-size: 9px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--theme-accent); background: color-mix(in srgb, var(--theme-bg) 90%, transparent); border-right: 1px solid rgba(255,255,255,.08); white-space: nowrap; } .hm-ticker-badge:last-child { border-right: none; border-left: 1px solid rgba(255,255,255,.08); } .hm-ticker-vp { flex: 1; overflow: hidden; } .hm-ticker-track { display: flex; align-items: center; animation: hmTicker 34s linear infinite; width: max-content; white-space: nowrap; } .hm-ticker-track:hover { animation-play-state: paused; } @keyframes hmTicker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .hm-ticker-item { display: inline-flex; align-items: center; padding: 0 22px; font-size: 12px; font-weight: 500; color: color-mix(in srgb, var(--theme-text) 75%, transparent); gap: 8px; } .hm-ticker-item a { color: inherit; text-decoration: none; } .hm-ticker-item a:hover { color: var(--theme-accent-soft); } .hm-ticker-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--theme-accent); opacity: .4; flex-shrink: 0; } /* ══ 4. SECTION HEADERS ═══════════════════════════════════════ */ .hm-news { padding: 20px 20px 6px; max-width: 1120px; margin: 0 auto; } .hm-events { padding: 16px 20px 20px; max-width: 1120px; margin: 0 auto; } .hm-section-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; } .hm-section-label { font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--theme-accent); margin-bottom: 4px; } .hm-section-title { font-family: 'moonbeam', system-ui, sans-serif; font-size: clamp(.95rem, 2vw, 1.2rem); font-weight: 400; letter-spacing: .05em; text-transform: uppercase; color: var(--theme-text); margin: 0; } .hm-section-more { font-size: 11px; font-weight: 600; color: color-mix(in srgb, var(--theme-accent) 80%, transparent); text-decoration: none; white-space: nowrap; } .hm-section-more:hover { color: var(--theme-accent); text-decoration: none; } /* ══ 4. NEWSFEED — overrides visuels UNIQUEMENT ═══════════════ RÈGLE : jamais column-count, display, height, overlay de clic. nf-mm (visionneuse) et nf-ls (like/share) : intacts. ═══════════════════════════════════════════════════════════════ */ .hm-page .newsfeed { margin: 0; } .hm-page .newsfeed__title { display: none; } .hm-page .newsfeed__item { background: color-mix(in srgb, var(--theme-bg-alt) 50%, transparent); border-color: rgba(255,255,255,.07); transition: transform .18s, border-color .18s, box-shadow .18s; } .hm-page .newsfeed__item:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--theme-accent) 28%, transparent); box-shadow: 0 8px 28px color-mix(in srgb, var(--theme-accent) 6%, transparent); } .hm-page .newsfeed__h3 { color: var(--theme-text); font-size: .92rem; font-weight: 700; } .hm-page .newsfeed__content { font-size: .83rem; color: rgba(245,224,244,.55); line-height: 1.55; } .hm-page .newsfeed__date { font-size: .78em; opacity: .55; white-space: nowrap; } /* Footer : fix débordement colonnes étroites sans casser la structure grid */ .hm-page .newsfeed__footer { gap: 6px 8px; } .hm-page .newsfeed__actions { min-width: 0; } .hm-page .newsfeed__cta { min-width: 0; overflow: hidden; } .hm-page .newsfeed__btn { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: rgba(245,224,244,.75); font-size: .82em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .hm-page .newsfeed__btn:hover { background: rgba(255,255,255,.14); color: var(--theme-text); text-decoration: none; } .hm-page .nf-act { font-size: .82em; padding: .3rem .45rem; } /* Menu partage : z-index élevé + card hôte remontée au-dessus des voisines */ .hm-page .nf-share-menu { z-index: 500; } .hm-page .newsfeed__item:has(.nf-share-menu.is-open) { position: relative; z-index: 200; } /* Image unique cliquable : cursor pointer ajouté par home-init.js */ .hm-page .newsfeed__media > img { cursor: pointer; } /* ══ 5. ÉVÉNEMENTS ═══════════════════════════════════════════ */ .hm-ev-list { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; } .hm-ev { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-radius: 12px; border: 1px solid rgba(255,255,255,.07); background: color-mix(in srgb, var(--theme-bg-alt) 35%, transparent); text-decoration: none; color: inherit; transition: border-color .15s, background .15s, transform .15s; } .hm-ev:hover { border-color: color-mix(in srgb, var(--theme-accent) 30%, transparent); background: color-mix(in srgb, var(--theme-bg-alt) 55%, transparent); transform: translateX(3px); text-decoration: none; color: inherit; } .hm-ev-date { display: flex; flex-direction: column; align-items: center; min-width: 40px; flex-shrink: 0; } .hm-ev-day { font-size: 1.4rem; font-weight: 900; line-height: 1; color: var(--theme-text); } .hm-ev-mon { font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--theme-accent); } .hm-ev-line { width: 1px; height: 34px; background: rgba(255,255,255,.1); flex-shrink: 0; } .hm-ev-info { flex: 1; min-width: 0; } .hm-ev-name { font-weight: 600; font-size: .92rem; margin: 0 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hm-ev-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--theme-muted); flex-wrap: wrap; } .hm-ev-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .hm-ev-arrow { color: var(--theme-muted); opacity: .4; font-size: 1.1rem; flex-shrink: 0; } /* ══ 6. PARTENAIRES ══════════════════════════════════════════ */ .hm-partners { padding: 16px 20px 14px; max-width: 1120px; margin: 0 auto; } /* Conteneur carousel */ .hm-partners-grid { display: flex; flex-wrap: nowrap; gap: 10px; margin-top: 10px; justify-content: center; overflow: hidden; padding: 6px 0 10px; /* espace pour bordure hover + glow */ margin-left: -4px; margin-right: -4px; /* compense le padding horizontal */ } /* Mode carousel actif (JS ajoute .is-carousel) */ .hm-partners-grid.is-carousel { justify-content: flex-start; cursor: grab; } .hm-partners-grid.is-carousel .hm-partners-track { display: flex; flex-wrap: nowrap; gap: 10px; animation: hmPartners var(--hm-partners-duration, 20s) linear infinite; width: max-content; } .hm-partners-grid.is-carousel:hover .hm-partners-track { animation-play-state: paused; } @keyframes hmPartners { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .hm-partner { display: flex; align-items: center; justify-content: center; min-width: 120px; height: 70px; padding: 0 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,.07); background: color-mix(in srgb, var(--theme-bg-alt) 40%, transparent); text-decoration: none; color: var(--theme-muted); font-size: .82rem; font-weight: 600; transition: border-color .2s, background .2s, transform .18s, box-shadow .2s; position: relative; overflow: hidden; } .hm-partner::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, color-mix(in srgb, var(--theme-partner-hover, #ff00ff) 12%, transparent), transparent 60%); opacity: 0; transition: opacity .2s; } .hm-partner:hover { border-color: var(--theme-partner-hover, #ff00ff); border-width: 2px; background: color-mix(in srgb, var(--theme-bg-alt) 65%, transparent); transform: translateY(-3px); box-shadow: 0 0 18px color-mix(in srgb, var(--theme-partner-hover, #ff00ff) 45%, transparent), 0 10px 28px color-mix(in srgb, var(--theme-partner-hover, #ff00ff) 20%, transparent); text-decoration: none; color: var(--theme-text); } .hm-partner:hover::before { opacity: 1; } .hm-partner img { max-width: calc(100% - 4px); max-height: 64px; width: 100%; object-fit: contain; filter: grayscale(1) brightness(1.4); transition: filter .2s; position: relative; z-index: 1; } .hm-partner:hover img { filter: grayscale(0) brightness(1); } .hm-partner-name { position: relative; z-index: 1; } /* ══ RESPONSIVE ══════════════════════════════════════════════ */ @media (max-width: 560px) { .hm-hero { padding: 32px 16px 24px; } .hm-hero-title { font-size: clamp(1.8rem, 8vw, 2.4rem); } .hm-stats { flex-wrap: wrap; border: none; gap: 8px; } .hm-stat { border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 10px 14px; } .hm-slider-wrap { padding: 0 12px 20px; } .hm-page .hero-slider-track { height: 220px !important; min-height: 220px !important; } .hm-page .hero-slide, .hm-page .hero-slide-link { height: 220px !important; } .hm-news, .hm-events, .hm-partners { padding-left: 12px; padding-right: 12px; } } /* ══ COUNTDOWN ════════════════════════════════════════════════════ */ .hm-countdown { display: inline-flex; flex-direction: row; align-items: center; gap: 14px; margin-top: 14px; padding: 10px 24px; border-radius: 4px; border: 1px solid color-mix(in srgb, var(--theme-accent) 22%, transparent); background: color-mix(in srgb, var(--theme-accent) 5%, transparent); } .hm-cd-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--theme-accent-soft) 80%, white); white-space: nowrap; } .hm-cd-units { display: flex; align-items: center; gap: 4px; } .hm-cd-unit { display: flex; flex-direction: row; align-items: baseline; gap: 2px; } .hm-cd-val { font-size: 1.3rem; font-weight: 800; line-height: 1; color: var(--theme-accent); font-variant-numeric: tabular-nums; } .hm-cd-leg { font-size: 9px; font-weight: 500; color: var(--theme-muted); } .hm-cd-sep { font-size: .85rem; font-weight: 700; color: var(--theme-accent); opacity: .35; padding: 0 1px; } /* ══ ÉVÉNEMENTS CAROUSEL ═════════════════════════════════════════ */ .hm-ev-carousel-wrap { position: relative; overflow: hidden; border-radius: 12px; } .hm-ev-carousel-wrap.hm-ev-multi .hm-ev-track { display: flex; transition: transform .4s cubic-bezier(.4,0,.2,1); } .hm-ev-carousel-wrap.hm-ev-multi .hm-ev { flex: 0 0 100%; } .hm-ev-carousel-wrap:not(.hm-ev-multi) .hm-ev-track { display: flex; flex-direction: column; gap: 8px; } .hm-ev-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--theme-bg-alt) 90%, transparent); border: 1px solid rgba(255,255,255,.12); color: var(--theme-text); font-size: 1.4rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; z-index: 2; } .hm-ev-prev { left: 8px; } .hm-ev-next { right: 8px; } .hm-ev-nav:hover { background: color-mix(in srgb, var(--theme-accent) 20%, var(--theme-bg-alt)); } .hm-ev-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; } .hm-ev-dot-btn { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.2); cursor: pointer; transition: background .2s, width .2s; } .hm-ev-dot-btn.is-active { background: var(--theme-accent); width: 18px; border-radius: 4px; } @media (max-width: 560px) { .hm-cd-val { font-size: 1.5rem; } .hm-cd-unit { min-width: 40px; } .hm-countdown { padding: 8px 14px; flex-wrap: wrap; justify-content: center; gap: 8px; border-radius: 4px; width: calc(100% - 40px); } .hm-cd-label { text-align: center; width: 100%; } }