body.page-home .hero { margin-top: clamp(28px, 6vw, 48px); } /* Source: public/index.php */ /* ==== Neon runner (SVG) — version container: attach to .hero .slide et .media ==== */ .hero .slide, .media{position: relative; overflow: hidden; border-radius: 12px;} /* n'altère pas la taille */ .neon-svg{position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; filter: drop-shadow(0 0 8px rgba(56,189,248,.9)) drop-shadow(0 0 16px rgba(56,189,248,.55)); shape-rendering: geometricPrecision;} .neon-svg rect{fill: none; stroke: rgba(56,189,248,1); stroke-width: 1.2; stroke-linecap: round; vector-effect: non-scaling-stroke; pathLength: 1000; stroke-dasharray: 160 840; stroke-dashoffset: 0; animation: neonStroke 4.2s linear infinite;} @keyframes neonStroke { to {stroke-dashoffset: -1000;} } /* Images conservées telles quelles */ .hero .slide > img, .media > img{display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit;} /* ===== Slider-only overrides (stack absolute + mobile-safe) ===== */ /* 1) Enlever le néon uniquement sur la section HERO */ .hero.neon-border::before{display: none !important;} #heroSlider{background: transparent !important; box-shadow: none !important; border: none !important;} /* === HERO mobile/desktop fixes (arrows z-index, hide on mobile, center image) === */ #heroSlider{position: relative;} #heroSlider .slide-track{z-index: 0;} #heroSlider .slide{z-index: 0;} #heroSlider .nav{z-index: 50 !important; pointer-events: auto !important;} @media (max-width: 860px){ #heroSlider .nav{display: none !important;} /* allow vertical scroll while we capture horizontal swipe */ #heroSlider{touch-action: pan-y;} } /* 2) Une seule image qui prend tout l'espace */ #heroSlider .slide-track{position: absolute !important; inset: 0 !important; display: block !important;} #heroSlider .slide{position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; border-radius: 16px; overflow: hidden; opacity: 0; transition: opacity .4s ease;} #heroSlider .slide.active{opacity: 1 !important;} #heroSlider .slide.left, #heroSlider .slide.right, #heroSlider .slide.far{opacity: 0 !important; pointer-events: none !important;} /* 3) Flèches visibles à gauche/droite, responsive */ #heroSlider .nav{position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 20 !important; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 9999px; background: rgba(15,23,42,.7); border: 1px solid var(--line); backdrop-filter: blur(6px); color: #e5e7eb; cursor: pointer; user-select: none; font-size: 0; line-height: 0; padding: 0;} #heroSlider .nav::before{content:'\2039'; display: grid; place-items: center; font-size: 22px; line-height: 1; transform: translateX(-0.5px);} #heroSlider .nav.next::before{content:'\203A'; transform: translateX(0.5px);} #heroSlider .nav.prev{left: 12px !important;} #heroSlider .nav.next{right: 12px !important;} #heroSlider .nav:hover{filter: brightness(1.1);} /* Mobile: garder les flèches bien dedans */ @media (max-width: 860px){ #heroSlider .nav{width: 38px; height: 38px;} #heroSlider .nav.prev{left: 8px !important; right: auto !important;} #heroSlider .nav.next{right: 8px !important; left: auto !important;} } /* Positionner les contrôles sous le carrousel d'articles (pas sur les cartes) */ #articlesSwiper .swiper-button-prev, #articlesSwiper .swiper-button-next, #articlesSwiper .swiper-pagination{position: static !important; display: inline-block; margin: 10px 8px 0; transform: none !important;} #articlesSwiper{text-align: center;} /* Fix 'bout de vignette' – ARTICLES uniquement */ #articlesSwiper{padding-left: 0!important; padding-right: 0!important; overflow: hidden;} #articlesSwiper .swiper-slide{box-sizing: border-box; padding: 0 14px;} /* === heroSlider: correctifs mobile (full-bleed + centrage image) === */ @media (max-width: 860px){ /* Faire dépasser le slider à la largeur écran même si le parent a du padding */ #heroSlider{width: 100vw !important; margin-left: 50% !important; transform: translateX(-50%) !important;} } /* === heroSlider: correctifs desktop + mobile (full-bleed + centrage image) === */ #heroSlider{width: 100vw !important; margin-left: 50% !important; transform: translateX(-50%) !important;} /* === heroSlider: correctifs spécifiques mobile + suppression espace header === */ @media (max-width: 860px){ #heroSlider{width: 100vw !important; margin: 0 !important; margin-left: 50% !important; transform: translateX(-50%) !important; padding: 0 !important;} } /* === supprime espace entre header et hero === */ /* Empêche un scroll horizontal parasite lié au 100vw */ @media (max-width: 860px){ #heroSlider{overflow: hidden !important;} } /* === heroSlider: correctif mobile (décalage gauche) via calc(50% - 50vw) === */ @media (max-width: 860px){ #heroSlider{width: 100vw !important; max-width: none !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; transform: none !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; box-sizing: border-box !important;} #heroSlider .slide{margin: 0 !important; padding: 0 !important;} } /* === HERO slider (mobile): ne pas couper, hauteur auto et une seule slide dans le flux === */ @media (max-width: 860px){ #heroSlider{ height: auto !important; min-height: 0 !important; } #heroSlider .slide-track{ position: relative !important; inset: auto !important; } #heroSlider .slide{ position: relative !important; inset: auto !important; height: auto !important; opacity: 1 !important; } #heroSlider .slide:not(.active){ display: none !important; } /* évite que les autres slides poussent la mise en page */ #heroSlider .slide > img{ width: 100% !important; height: auto !important; object-fit: contain !important; object-position: center center !important; } #heroSlider .slide::after{ pointer-events: none; } /* garde l'overlay mais ne gêne pas */ } /* === HERO slider (desktop): réduire visuellement l'image de 20% sans déformation === */ @media (min-width: 861px){ #heroSlider .slide > img{ transform: scale(0.8); transform-origin: center center; } } /* Layout */ .home{max-width: 1200px; margin: 0 auto; padding: 12px 16px;} .section{margin: 26px 0;} .section-head{display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;} .link{color: var(--muted); text-decoration: none;} /* Titres néon */ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700..900&display=swap'); .title-neon{font-family: 'Orbitron',sans-serif; letter-spacing: .5px;} .title-neon{animation: neonPulse 2.6s ease-in-out infinite alternate; color: #e6faff; text-shadow: 0 0 6px #67e8f9, 0 0 16px #67e8f9;} @keyframes neonPulse{from{text-shadow: 0 0 6px #67e8f9,0 0 16px #67e8f9;}to{text-shadow: 0 0 4px #a78bfa,0 0 14px #f472b6,0 0 24px #67e8f9;}} /* Cadres néon qui circulent */ .neon-border{position: relative; border-radius: 16px; overflow: hidden;} .neon-border::before{content: ""; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; background: linear-gradient(90deg,#67e8f9,#a78bfa,#f472b6,#67e8f9); background-size: 300% 100%; -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: flow 6s linear infinite; opacity: .75;} @keyframes flow{0%{background-position: 0% 50%;}100%{background-position: 300% 50%;}} /* HERO */ .hero{margin: 4px 0 28px;} .slider{position: relative; height: 60vh; min-height: 420px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: radial-gradient(1200px 600px at 70% -20%,rgba(56,189,248,.12),transparent 60%),radial-gradient(900px 500px at 20% 120%,rgba(167,139,250,.12),transparent 60%);} .slide-track{position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 40px; transform-style: preserve-3d;} .slide{position: relative; width: min(62vw,980px); height: 100%; max-height: 540px; border-radius: 14px; overflow: hidden; background: #0b1220; border: 1px solid var(--line); box-shadow: 0 25px 80px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.03); transition: transform .9s cubic-bezier(.2,.8,.2,1), opacity .6s, filter .6s; transform-style: preserve-3d;} .slide img{width: 100%; height: 100%; object-fit: cover; display: block;} .slide::after{content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(0,0,0,.0),rgba(0,0,0,.15) 55%,rgba(0,0,0,.45) 100%);} .slide figcaption{position: absolute; left: 18px; bottom: 14px; font-weight: 800; letter-spacing: .3px; font-size: 20px; opacity: .95; text-shadow: 0 2px 10px rgba(0,0,0,.45);} .slide.active{transform: translateZ(160px) rotateY(0) scale(1.03); filter: brightness(1.08) saturate(1.05);} .slide.left {transform: translateX(-28%) rotateY(-22deg) translateZ(-40px) scale(.90); opacity: .87; filter: blur(.2px) brightness(.9);} .slide.right{transform: translateX( 28%) rotateY( 22deg) translateZ(-40px) scale(.90); opacity: .87; filter: blur(.2px) brightness(.9);} .slide.far {transform: translateZ(-240px) scale(.82); opacity: .55; filter: blur(.6px) brightness(.8);} .dots{position: absolute; bottom: 16px; left: 0; right: 0; display: flex; justify-content: center; gap: 10px; z-index: 2;} .dots > i{width: 9px; height: 9px; border-radius: 999px; background: #374151; border: 1px solid #4b5563; cursor: pointer;} .dots > i.active{background: var(--brand); box-shadow: 0 0 0 4px rgba(56,189,248,.22);} /* ARTICLES Swiper */ .swiper{background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px;} .article-card{background: #0b1220; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; cursor: pointer; transition: transform .25s, box-shadow .25s;} .article-card:hover{transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,.4), 0 0 18px rgba(103,232,249,.18);} .article-card .media{aspect-ratio: 4/5; background: #0a0f1b;} .article-card .media img{width: 100%; height: 100%; object-fit: cover; display: block;} .article-card .ctxt{padding: 10px;} .article-card h3{margin: 0 0 6px; font-size: 18px; line-height: 1.25;} .article-card p{margin: 0; opacity: .8; font-size: 14px;} .swiper-button-prev, .swiper-button-next{color: #67e8f9;} .swiper-pagination-bullet{background: #3b82f6; opacity: .6;} .swiper-pagination-bullet-active{background: #67e8f9; opacity: 1;} /* CALENDRIER (responsive) */ .calendar{background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px;} .cal-grid{display: grid; grid-template-columns: repeat(7,1fr); gap: 6px;} .cal-head {display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; position: relative; z-index: 2;} .cal-cell{aspect-ratio: 1/1; border: 1px dashed #23304a; border-radius: 10px; display: flex; align-items: flex-start; justify-content: flex-end; padding: 6px; position: relative;} .cal-cell.has{border-style: solid; border-color: #67e8f9;} .cal-cell .dot{position: absolute; left: 6px; bottom: 8px; width: 8px; height: 8px; border-radius: 50%; background: #67e8f9;} .ev-panel{margin-top: 10px; background: #0b1220; border: 1px solid var(--line); border-radius: 10px; padding: 10px;} .ev-panel ul{margin: 0; padding-left: 16px;} #evDate {font-size: 1.2em; font-weight: bold; margin-bottom: 10px;} #evList {list-style: none; padding: 0; margin: 0;} #evList li {margin-bottom: 8px; line-height: 1.4;} #evList a {color: inherit; text-decoration: none; font-weight: 600;} #evList a:hover {color: #ffd700; text-decoration: underline;} /* Responsive */ @media (max-width: 860px){ .slider{height: 48vh; min-height: 320px;} .slide{height: 48vh;} } /* === heroSlider: correctifs mobile (full-bleed + centrage image) === */ @media (max-width: 860px){ /* Faire dépasser le slider à la largeur écran même si le parent a du padding */ #heroSlider{width: 100vw !important; margin-left: 50% !important; transform: translateX(-50%) !important;} } /* === heroSlider: correctifs desktop + mobile (full-bleed + centrage image) === */ #heroSlider{width: 100vw !important; margin-left: 50% !important; transform: translateX(-50%) !important;} /* === heroSlider: correctifs spécifiques mobile + suppression espace header === */ @media (max-width: 860px){ #heroSlider{width: 100vw !important; margin: 0 !important; margin-left: 50% !important; transform: translateX(-50%) !important; padding: 0 !important;} } /* === supprime espace entre header et hero === */ /* Empêche un scroll horizontal parasite lié au 100vw */ @media (max-width: 860px){ #heroSlider{overflow: hidden !important;} } /* === heroSlider: correctif mobile (décalage gauche) via calc(50% - 50vw) === */ @media (max-width: 860px){ #heroSlider{width: 100vw !important; max-width: none !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; transform: none !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; box-sizing: border-box !important;} #heroSlider .slide{margin: 0 !important; padding: 0 !important;} } /* ===== Slider minimal fixes ===== */ /* Si jamais la classe neon-border reste, couper le halo uniquement dans le hero */ .hero.neon-border::before{display: none !important;} /* Corriger les flèches collées à gauche sur mobile (slider uniquement) */ @media (max-width: 860px){ #heroSlider{position: relative;} /* ancrage sûr */ #heroSlider .nav{position: absolute; top: 50%; transform: translateY(-50%); z-index: 20;} #heroSlider .nav.prev{left: 8px !important; right: auto !important;} #heroSlider .nav.next{right: 8px !important; left: auto !important;} } /* === heroSlider: correctifs mobile (full-bleed + centrage image) === */ @media (max-width: 860px){ /* Faire dépasser le slider à la largeur écran même si le parent a du padding */ #heroSlider{width: 100vw !important; margin-left: 50% !important; transform: translateX(-50%) !important;} } /* === heroSlider: correctifs desktop + mobile (full-bleed + centrage image) === */ #heroSlider{width: 100vw !important; margin-left: 50% !important; transform: translateX(-50%) !important;} /* === heroSlider: correctifs spécifiques mobile + suppression espace header === */ @media (max-width: 860px){ #heroSlider{width: 100vw !important; margin: 0 !important; margin-left: 50% !important; transform: translateX(-50%) !important; padding: 0 !important;} } /* === supprime espace entre header et hero === */ /* Empêche un scroll horizontal parasite lié au 100vw */ @media (max-width: 860px){ #heroSlider{overflow: hidden !important;} } /* === heroSlider: correctif mobile (décalage gauche) via calc(50% - 50vw) === */ @media (max-width: 860px){ #heroSlider{width: 100vw !important; max-width: none !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; transform: none !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; box-sizing: border-box !important;} #heroSlider .slide{margin: 0 !important; padding: 0 !important;} } /* === Correctif FINALE flèches ARTICLES (hors des cartes, à gauche/droite) === */ #articlesSwiper {position: relative; padding: 0 56px;} /* Forcer la position absolue pour écraser l'ancien "position: static !important" */ #articlesSwiper .swiper-button-prev, #articlesSwiper .swiper-button-next {position: absolute !important; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; margin: 0; pointer-events: auto; color: inherit !important; z-index: 2;} #articlesSwiper .swiper-button-prev {left: 8px;} #articlesSwiper .swiper-button-next {right: 8px;} /* La pagination peut rester dessous */ #articlesSwiper .swiper-pagination{position: static !important; margin-top: 12px;} /* === heroSlider: correctifs mobile (full-bleed + centrage image) === */ @media (max-width: 860px){ /* Faire dépasser le slider à la largeur écran même si le parent a du padding */ #heroSlider{width: 100vw !important; margin-left: 50% !important; transform: translateX(-50%) !important;} } /* === heroSlider: correctifs desktop + mobile (full-bleed + centrage image) === */ #heroSlider{width: 100vw !important; margin-left: 50% !important; transform: translateX(-50%) !important;} /* === heroSlider: correctifs spécifiques mobile + suppression espace header === */ @media (max-width: 860px){ #heroSlider{width: 100vw !important; margin: 0 !important; margin-left: 50% !important; transform: translateX(-50%) !important; padding: 0 !important;} } /* === supprime espace entre header et hero === */ /* Empêche un scroll horizontal parasite lié au 100vw */ @media (max-width: 860px){ #heroSlider{overflow: hidden !important;} } /* === heroSlider: correctif mobile (décalage gauche) via calc(50% - 50vw) === */ @media (max-width: 860px){ #heroSlider{width: 100vw !important; max-width: none !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; transform: none !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; box-sizing: border-box !important;} #heroSlider .slide{margin: 0 !important; padding: 0 !important;} } /* Override padding reserve for arrows to avoid partial slide */ #articlesSwiper{padding-left: 0!important; padding-right: 0!important;} #articlesSwiper .swiper-slide{box-sizing: border-box; padding: 0 14px;} /* === heroSlider: correctifs mobile (full-bleed + centrage image) === */ @media (max-width: 860px){ /* Faire dépasser le slider à la largeur écran même si le parent a du padding */ #heroSlider{width: 100vw !important; margin-left: 50% !important; transform: translateX(-50%) !important;} } /* === heroSlider: correctifs desktop + mobile (full-bleed + centrage image) === */ #heroSlider{width: 100vw !important; margin-left: 50% !important; transform: translateX(-50%) !important;} /* === heroSlider: correctifs spécifiques mobile + suppression espace header === */ @media (max-width: 860px){ #heroSlider{width: 100vw !important; margin: 0 !important; margin-left: 50% !important; transform: translateX(-50%) !important; padding: 0 !important;} } /* === supprime espace entre header et hero === */ /* Empêche un scroll horizontal parasite lié au 100vw */ @media (max-width: 860px){ #heroSlider{overflow: hidden !important;} } /* === heroSlider: correctif mobile (décalage gauche) via calc(50% - 50vw) === */ @media (max-width: 860px){ #heroSlider{width: 100vw !important; max-width: none !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; transform: none !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; box-sizing: border-box !important;} #heroSlider .slide{margin: 0 !important; padding: 0 !important;} } /* === ARTICLES – flèches: mobile OFF, desktop style = hero === */ /* 1) Style desktop (même style que #heroSlider .nav) */ #articlesSwiper .swiper-button-prev, #articlesSwiper .swiper-button-next{position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 20 !important; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 9999px; background: rgba(15,23,42,.7); border: 1px solid var(--line); backdrop-filter: blur(6px); color: #e5e7eb; margin: 0 !important;} #articlesSwiper .swiper-button-prev{left: 12px !important;} #articlesSwiper .swiper-button-next{right: 12px !important;} /* Icônes Swiper */ #articlesSwiper .swiper-button-prev::after, #articlesSwiper .swiper-button-next::after{font-size: 22px;} /* 2) Cacher complètement les flèches sur mobile */ @media (max-width: 860px){ #articlesSwiper .swiper-button-prev, #articlesSwiper .swiper-button-next{display: none !important;} } /* Boost de lumière pour le halo (scoped ARTICLES) */ #articlesSwiper .neon-svg{filter: drop-shadow(0 0 8px rgb(103 232 249 / .9)) drop-shadow(0 0 18px rgb(167 139 250 / .6)) drop-shadow(0 0 26px rgb(255 255 255 / .4));} /* === heroSlider: correctifs mobile (full-bleed + centrage image) === */ @media (max-width: 860px){ /* Faire dépasser le slider à la largeur écran même si le parent a du padding */ #heroSlider{width: 100vw !important; margin-left: 50% !important; transform: translateX(-50%) !important;} } /* === heroSlider: correctifs desktop + mobile (full-bleed + centrage image) === */ #heroSlider{width: 100vw !important; margin-left: 50% !important; transform: translateX(-50%) !important;} /* === heroSlider: correctifs spécifiques mobile + suppression espace header === */ @media (max-width: 860px){ #heroSlider{width: 100vw !important; margin: 0 !important; margin-left: 50% !important; transform: translateX(-50%) !important; padding: 0 !important;} } /* === supprime espace entre header et hero === */ /* Empêche un scroll horizontal parasite lié au 100vw */ @media (max-width: 860px){ #heroSlider{overflow: hidden !important;} } /* === heroSlider: correctif mobile (décalage gauche) via calc(50% - 50vw) === */ @media (max-width: 860px){ #heroSlider{width: 100vw !important; max-width: none !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; transform: none !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; box-sizing: border-box !important;} #heroSlider .slide{margin: 0 !important; padding: 0 !important;} } @media (min-width: 861px) { #heroSlider .nav.prev { left: 12px !important; } #heroSlider .nav.next { right: 12px !important; } } #heroSlider { margin-top: var(--hero-offset, 0px); } @media (min-width: 861px) { body.page-home #heroSlider { width: 100% !important; margin: 0 auto !important; transform: none !important; } body.page-home #heroSlider .nav.prev { left: 24px !important; right: auto !important; } body.page-home #heroSlider .nav.next { right: 24px !important; left: auto !important; } body.page-home #heroSlider .slide > img { transform: none !important; } } /* ===== Parallax on hero slider (pointer-based) ===== */ #heroSlider { --p-x: 0; --p-y: 0; } #heroSlider .slide.active { /* subtle movement of the whole slide within bounds + scroll parallax */ transform: translate3d( calc(var(--p-x) * 10px), calc(var(--p-y) * 8px + var(--scroll-ty, 0px)), 0 ) scale(var(--scroll-s, 1)); transition: transform 200ms ease; will-change: transform; } #heroSlider .slide.active figcaption { /* counter-move for depth effect (pointer + a bit of scroll) */ transform: translate3d( calc(var(--p-x) * -6px), calc(var(--p-y) * -4px + calc(var(--scroll-ty, 0px) * -0.35)), 0 ); transition: transform 200ms ease; will-change: transform; }