/* ============================================================ PALETTE OFFICIELLE 2026 #dc4f0a orange compétition (primary action) #76685f taupe classique (brand) #3d3630 brun profond (dark / textes forts) ============================================================ */ :root { --orange: #dc4f0a; --orange-dark: #b63e07; --orange-light: rgba(220,79,10,.08); --taupe: #76685f; --taupe-dark: #3d3630; --taupe-light: #f5f1ee; --taupe-border: #ddd5cf; --surface: #fcfbf9; --white: #ffffff; --live-red: #e53935; --live-red-dark: #c62828; } *, *::before, *::after { box-sizing: border-box; } body { font-family: 'Barlow Condensed', sans-serif; background: var(--surface); color: var(--taupe-dark); overflow-x: hidden; } h1,h2,h3,h4,.headline { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; } /* ── OVERRIDES BOOTSTRAP ────────────────── */ .text-primary { color: var(--taupe) !important; } .bg-primary { background: var(--taupe) !important; } .text-secondary { color: var(--orange) !important; } .bg-secondary { background: var(--orange) !important; } .border-secondary { border-color: var(--orange) !important; } .btn-secondary { background: var(--orange); border: none; color: #fff; font-weight: 700; border-radius: .5rem; padding: .5rem 1.5rem; } .btn-secondary:hover { background: var(--orange-dark); color: #fff; } .btn-outline-primary { border: 2px solid var(--taupe); color: var(--taupe); font-weight: 700; border-radius: .5rem; } .btn-outline-primary:hover { background: rgba(118,104,95,.06); color: var(--taupe); } /* ── REMIXICON ───────────────────────────── */ /* loaded via CDN in */ /* ── HEADER ─────────────────────────────── */ header.chi-header { background: #fff; position: sticky; top: 0; z-index: 1050; width: 100%; overflow: visible; } .chi-mainbar { display: flex; align-items: center; justify-content: space-between; padding: 0 2.5rem; height: 82px; gap: 24px; position: relative; overflow: visible; } /* ── LOGO BUBBLE ────────────────────────── */ /* Anchor: left side of mainbar, overflows below the header */ .logo-bubble-anchor { flex-shrink: 0; position: relative; transition: all 250ms ease; /* we need this element to be positioned so the bubble can overflow */ } .logo-bubble { position: absolute; top: -14px; left: 0; display: flex; flex-direction: column; align-items: center; gap: 0; background: #fff; border-radius: 0 0 60px 60px; box-shadow: 0 12px 48px rgba(61,54,48,.13), 0 2px 8px rgba(61,54,48,.06); padding: 10px 22px 22px; min-width: 148px; z-index: 0; transition: box-shadow .3s; text-decoration: none; border-top: 3px solid var(--orange); } .logo-bubble:hover { box-shadow: 0 18px 56px rgba(61,54,48,.18), 0 2px 8px rgba(61,54,48,.08); } /* Rolex logo — prominent */ .bubble-rolex { height: 38px; width: auto; opacity: .9; margin-bottom: 4px; display: block; } /* "présente" label — below Rolex */ .bubble-presents { font-family: 'Barlow Condensed', sans-serif; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .22em; color: var(--taupe); opacity: .5; margin-bottom: 12px; display: block; } /* CHI logo */ .bubble-chi { height: 90px; width: auto; display: block; } .header-actions { display: flex; align-items: center; gap: 2rem; flex-shrink: 0; height: 100%; } .ubs-img { height: 22px; opacity: .65; } /* langue dropdown */ .lang-wrap { position: relative; } .lang-dropdown { position: absolute; top: calc(100% + 8px); right: 0; background: rgba(255,255,255,.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 12px; box-shadow: 0 8px 32px rgba(61,54,48,.14); min-width: 80px; overflow: hidden; opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity .2s, transform .2s; z-index: 200; } .lang-dropdown.is-open { opacity: 1; pointer-events: all; transform: translateY(0); } .lang-opt { display: block; padding: 9px 18px; font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--taupe-dark); text-decoration: none; transition: color .15s, background .15s; } .lang-opt:hover, .lang-opt.active { color: var(--orange); background: var(--orange-light); } body.menu-open .logo-bubble-anchor { opacity: 0; pointer-events: none; } /* icon button générique */ .icon-btn { width: 38px; height: 38px; border-radius: 50%; background: rgba(118,104,95,.08); border: none; display: flex; align-items: center; justify-content: center; color: var(--taupe); font-size: 18px; cursor: pointer; transition: background .2s, color .2s; } .icon-btn:hover { background: rgba(118,104,95,.16); color: var(--taupe-dark); } /* billetterie */ .btn-tickets { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .07em; color: #fff; background: var(--orange); border: none; padding: 9px 20px; border-radius: 5px; cursor: pointer; display: flex; align-items: center; gap: 7px; white-space: nowrap; text-decoration: none; transition: background .2s; } .btn-tickets:hover { background: var(--orange-dark); color: #fff; } .btn-tickets i { font-size: 16px; } .btn-100 { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .07em; color: var(--orange); border: 1px solid var(--orange); padding: 9px 20px; border-radius: 5px; cursor: pointer; display: flex; align-items: center; gap: 7px; white-space: nowrap; text-decoration: none; transition: all .2s ease; } .btn-100:hover { background: var(--orange-dark); color: #fff; } .btn-100 i { font-size: 16px; } /* Résultats & départs — même format que la billetterie, teinte taupe */ .btn-results { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .07em; color: #fff; background: var(--taupe-dark); border: none; padding: 9px 20px; border-radius: 5px; cursor: pointer; display: flex; align-items: center; gap: 7px; white-space: nowrap; text-decoration: none; transition: background .2s; } .btn-results:hover { background: #2a241f; color: #fff; } .btn-results i { font-size: 16px; } .btn-live { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .07em; color: #fff; background: var(--live-red); border: none; padding: 9px 20px; border-radius: 5px; cursor: pointer; display: flex; align-items: center; gap: 7px; white-space: nowrap; text-decoration: none; transition: background .2s ease, transform .15s ease; } .btn-live:hover { background: var(--live-red-dark); transform: translateY(-1px); } .btn-live i { font-size: 16px; } .btn-exposant { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .07em; color: var(--orange); background: var(--orange-light); border: 1px solid rgba(220,79,10,.25); padding: 9px 20px; border-radius: 5px; cursor: pointer; display: flex; align-items: center; gap: 7px; white-space: nowrap; text-decoration: none; transition: all .2s ease; } .btn-exposant:hover { background: var(--orange); color: #fff; border-color: var(--orange); } .btn-exposant i { font-size: 16px; } /* Horloge Rolex — carte flottante sous le header (langage visuel de la bulle-logo) */ .rolex-clock-slot { position: relative; align-self: stretch; width: 260px; /* empreinte de l'horloge dans le header */ flex-shrink: 0; } .rolex-clock-card { width: 260px; height: 82px; /* …et déborde sous le header (header overflow: visible) */ background: var(--taupe-dark); /* fond sombre, cohérent avec l'horloge Rolex */ overflow: hidden; transition: box-shadow .3s, transform .3s; } .rolex-clock-card iframe { display: block; border: 0; width: 260px; height: 82px; } /* burger */ .burger-btn { width: 42px; height: 42px; border: none; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; padding: 0; border-radius: 4px; transition: background .2s; } .burger-btn:hover { background: var(--taupe-light); } .burger-line { display: block; width: 22px; height: 2px; background: var(--taupe-dark); transition: transform .35s cubic-bezier(.23,1,.32,1), opacity .25s, width .3s; transform-origin: center; } /* burger → X */ .burger-btn.is-open .burger-line:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .burger-btn.is-open .burger-line:nth-child(2) { opacity: 0; width: 0; } .burger-btn.is-open .burger-line:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } .wrap-logos, .wrap-utils { display: flex; align-items: center; gap: 8px; height: 100%; } .wrap-btns { display: flex; align-items: center; gap: 6px; height: 100%; flex-wrap: nowrap; overflow: hidden; } .wrap-btns .btn-tickets, .wrap-btns .btn-100, .wrap-btns .btn-results, .wrap-btns .btn-live, .wrap-btns .btn-exposant { padding: 6px 10px; font-size: 11px; letter-spacing: .05em; } /* ── MEGA MENU PLEIN ÉCRAN ──────────────── */ .mega-menu { position: fixed; inset: 0; z-index: 1049; background: var(--taupe-dark); display: flex; flex-direction: column; pointer-events: none; clip-path: inset(0 0 100% 0); transition: clip-path .55s cubic-bezier(.77,0,.18,1); top: 82px; } .mega-menu.is-open { pointer-events: all; clip-path: inset(0 0 0% 0); } .mega-inner { display: flex; flex-direction: column; height: 100%; padding: 0 2.5rem; max-width: 1400px; margin: 0 auto; width: 100%; } /* NAV — drill-down slider (2 niveaux) */ .mega-nav { flex: 1; display: block; padding: 2.5rem 0; overflow-y: auto; overflow-x: hidden; } .mega-drill { position: relative; overflow: hidden; transition: height .45s cubic-bezier(.5,0,.12,1); } .mega-panel { position: absolute; top: 0; left: 0; width: 100%; transition: transform .45s cubic-bezier(.5,0,.12,1), opacity .35s ease; } .mega-level-1 { transform: translateX(0); opacity: 1; } .mega-level-2 { transform: translateX(100%); opacity: 0; visibility: hidden; } .mega-drill.show-2 .mega-level-1 { transform: translateX(-12%); opacity: 0; visibility: hidden; } .mega-drill.show-2 .mega-level-2 { transform: translateX(0); opacity: 1; visibility: visible; } /* Niveau 1 : catégories */ .mega-cats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .mega-cat { width: 100%; background: none; border: 0; cursor: pointer; text-align: left; display: flex; align-items: center; gap: 18px; padding: 18px 6px; border-bottom: 1px solid rgba(255,255,255,.09); font-family: 'Barlow Condensed', sans-serif; font-size: clamp(1.5rem, 3.4vw, 2.3rem); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #fff; transition: color .2s, padding-left .25s; } .mega-cat:hover, .mega-cat:focus-visible { color: var(--orange); padding-left: 16px; outline: none; } .mega-cat-ico { display: flex; font-size: 1.35rem; color: var(--orange); opacity: .85; } .mega-cat-label { flex: 1; } .mega-cat-arrow { font-size: 1.5rem; opacity: .45; transition: transform .25s, opacity .2s; } .mega-cat:hover .mega-cat-arrow { opacity: 1; transform: translateX(5px); } /* Niveau 2 : sous-liens */ .mega-back { background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--orange); padding: 4px 2px; margin-bottom: 1.75rem; transition: gap .2s; } .mega-back:hover { gap: 13px; } .mega-back i { font-size: 20px; } /* quand un 3e niveau est ouvert dans un sub, on masque le retour global (un seul retour) */ .mega-drill.face-open #megaBack { display: none; } .mega-sub { display: none; } .mega-sub.active { display: block; animation: megaSubIn .45s ease; } @keyframes megaSubIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .mega-sub-head { display: flex; align-items: center; gap: 12px; font-family: 'Barlow Condensed', sans-serif; font-size: clamp(1.3rem, 3vw, 1.9rem); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #fff; margin-bottom: 1.5rem; } .mega-sub-head i { color: var(--orange); font-size: 1.15rem; } .mega-sub .mega-links li a { font-size: 1.15rem; } /* Drill INTERNE à un sub : la colonne concernée glisse vers ses sous-items */ .mega-sub-stage { position: relative; overflow: hidden; } .mega-sub-face { position: absolute; top: 0; left: 0; width: 100%; transform: translateX(100%); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .42s cubic-bezier(.5,0,.12,1), opacity .3s ease; } /* la face affichée passe en flux → la scène prend sa hauteur automatiquement */ .mega-sub-face.is-shown { position: relative; transform: translateX(0); opacity: 1; visibility: visible; pointer-events: auto; } .mega-sub-face.is-out { transform: translateX(-100%); opacity: 0; visibility: hidden; pointer-events: none; } /* Item de 2e niveau qui ouvre un 3e niveau (bouton + chevron) */ .mega-l2 { width: 100%; background: none; border: 0; cursor: pointer; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0; color: rgba(255,255,255,.78); font-family: inherit; font-size: 1.15rem; line-height: 1.9; transition: color .2s, padding-left .2s; } .mega-l2:hover, .mega-l2:focus-visible { color: #fff; padding-left: 6px; outline: none; } .mega-l2 i { font-size: 1.2rem; color: var(--orange); opacity: .6; transition: transform .2s, opacity .2s; } .mega-l2:hover i { opacity: 1; transform: translateX(4px); } /* Bouton Retour interne au sub (visible desktop ET mobile) */ .mega-back-sub { background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--orange); padding: 0 0 .25rem; margin-bottom: 1rem; transition: gap .2s; } .mega-back-sub:hover { gap: 12px; } .mega-back-sub i { font-size: 18px; } /* Tête de la face 3e niveau (= le "bouton" parent, ex. VIP) */ .mega-sub3-head { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: 'Barlow Condensed', sans-serif; font-size: clamp(1.3rem, 3vw, 1.9rem); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #fff; margin-bottom: 1.5rem; transition: color .2s; } .mega-sub3-head:hover { color: var(--orange); } .mega-sub3-head i { color: var(--orange); font-size: 1.15rem; } .mobile {display:block !important;} .desktop {display:none !important;} /* DESKTOP : 4 colonnes ouvertes (niveaux 1 + 2 visibles), le drill ne sert plus qu'au 3e niveau. Le mode drill complet reste actif en mobile (≤900px). */ @media (min-width: 901px) { .mega-nav { padding: 3rem 0; } .mega-drill { height: auto !important; overflow: visible; } .mega-level-1 { display: none; } /* pas d'écran "catégories" en desktop */ .mega-level-2 { position: static; transform: none !important; opacity: 1 !important; visibility: visible !important; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 2.5rem; } .mega-back { display: none; } /* le bouton Retour global n'a pas lieu d'être */ .mega-sub { display: block !important; animation: none !important; } .mega-sub-head { font-size: 16px; font-weight: 700; letter-spacing: .14em; color: var(--orange); margin-bottom: 1.5rem; padding-bottom: .75rem; } .mega-sub-head i { font-size: 1.6rem;font-weight: 500; } .mega-sub .mega-links li a, .mega-l2 { font-size: 1.05rem; } .mega-l2 i { font-size: 1.05rem; } .mega-sub3-head { font-size: 1.4rem; margin-bottom: 1.1rem; } .mega-sub3-head i { font-size: 1.1rem; } .mobile {display:none !important;} .desktop {display:block !important;} } .mega-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .mega-links li a { font-family: 'Barlow Condensed', sans-serif; font-size: 1.05rem; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: rgba(255,255,255,.65); text-decoration: none; padding: 7px 0; display: flex; align-items: center; gap: 8px; position: relative; transition: color .2s; } .mega-links li a::after { content: ''; position: absolute; bottom: 4px; left: 0; width: 0; height: 1px; background: var(--orange); transition: width .25s cubic-bezier(.23,1,.32,1); } .mega-links li a:hover { color: #fff; } .mega-links li a:hover::after { width: 100%; } .mega-links li a i { font-size: 15px; opacity: .7; } .mega-link-accent { color: rgba(220,79,10,.9) !important; } .mega-link-accent:hover { color: var(--orange) !important; } /* extra col styling */ .mega-col-extra .mega-links li a { font-size: .95rem; } /* BOTTOM */ .mega-bottom { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 0; box-shadow: 0 -1px 0 rgba(255,255,255,.06); flex-shrink: 0; } /* Liens rapides déroulés — mobile uniquement (caché en desktop) */ .mega-quick { display: none; flex-shrink: 0; padding: 1.25rem 0 .5rem; } .mega-quick-head { display: flex; align-items: center; gap: 10px; font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--orange); margin-bottom: 1rem; } .mega-quick-head i { font-size: 16px; } .mega-quick .mega-links { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem 1.5rem; } .mega-quick .mega-links li a { font-size: 1.15rem; } .mega-socials { display: flex; align-items: center; gap: 12px; } .social-link { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.55); font-size: 16px; text-decoration: none; transition: background .2s, color .2s; } .social-link:hover { background: var(--orange); color: #fff; } .mega-partners { display: flex; align-items: center; gap: 28px; } .partner-img { height: 20px; filter: brightness(0) invert(1); opacity: .35; } /* Sélecteur de langue dans le menu — affiché en mobile uniquement */ .mega-lang { display: none; align-items: center; gap: 8px; } .mega-lang-opt { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); text-decoration: none; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); transition: color .2s, background .2s, border-color .2s; } .mega-lang-opt:hover { color: #fff; border-color: rgba(255,255,255,.45); } .mega-lang-opt.active { color: var(--taupe-dark); background: #fff; border-color: #fff; } .mega-copy { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; color: rgba(255,255,255,.25); letter-spacing: .05em; } /* overlay */ .menu-overlay { position: fixed; inset: 0; z-index: 1048; background: rgba(61,54,48,.6); opacity: 0; pointer-events: none; transition: opacity .4s; } .menu-overlay.is-open { opacity: 1; pointer-events: all; } /* body scroll lock */ body.menu-open { overflow: hidden; } /* ── RESPONSIVE ─────────────────────────── */ /* ── Sous 1300px (desktop étroit) : TOUS les boutons header en icon-only ── */ @media (max-width: 1300px) and (min-width: 901px) { .chi-mainbar { padding: 0 1.4rem; gap: 14px; } .header-actions { gap: 1rem; } .wrap-btns { gap: 8px; } .wrap-btns .btn-tickets, .wrap-btns .btn-results, .wrap-btns .btn-100, .wrap-btns .btn-live, .wrap-btns .btn-exposant { width: 42px; height: 42px; padding: 0; justify-content: center; border-radius: 0.5rem; gap: 0; } .wrap-btns .btn-tickets span, .wrap-btns .btn-results span, .wrap-btns .btn-100 span, .wrap-btns .btn-live span, .wrap-btns .btn-exposant span { display: none; } .wrap-btns .btn-tickets i, .wrap-btns .btn-results i, .wrap-btns .btn-100 i, .wrap-btns .btn-live i, .wrap-btns .btn-exposant i { font-size: 18px; } } @media (max-width: 900px) { .header-rolex { display: none; } .chi-mainbar { padding: 0 .5rem; gap: 6px; } /* Logo : sorti de la barre, présenté en bulle flottante CENTRÉE sous le header */ .logo-bubble-anchor { position: static; } .logo-bubble { top: 100%; left: 50%; right: auto; transform: translateX(-50%); flex-direction: row; align-items: center; gap: 8px; min-width: 0; padding: 8px 5px 13px 5px; border-radius: 0 0 26px 26px; transition: transform .35s ease, opacity .3s ease, box-shadow .3s; } /* se rétracte vers le haut au scroll vers le bas, revient au scroll vers le haut */ .chi-header.bubble-retracted .logo-bubble { transform: translateX(-50%) translateY(-190%); opacity: 0; pointer-events: none; } .bubble-rolex { height: 30px; margin-bottom: 0;min-width: 100px; } .bubble-presents { display: none; } .bubble-chi { height: 64px; } body.menu-open .logo-bubble { display: none; } /* La barre n'a plus que les actions, étalées */ .header-actions { flex: 1; justify-content: space-between; gap: 8px; } .wrap-btns { display: none; } /* CTAs accessibles dans le menu burger */ .wrap-logos { display: flex; align-items: center; gap: 10px; } /* UBS : toujours visible, 22px */ .ubs-img { display: block; height: 22px; opacity: .7; } /* Horloge Rolex : pleine taille (100 % de la hauteur), non rognée */ .rolex-clock-slot { display: block; width: 260px; height: 82px; overflow: visible; } .rolex-clock-card { transform: none; } /* Langue : retirée du header (bouton), présentée dans le menu ouvert */ .lang-wrap { display: none; } .mega-lang { display: flex; } /* Liens rapides : déroulés au-dessus du mega-bottom, et retirés du drill L1 */ .mega-quick { display: block; } .mega-cat[data-target="sub-quick"] { display: none; } .mega-nav { padding: 1.5rem 0; } .mega-inner { padding: 0 1.25rem; } } @media (max-width: 560px) { /* horloge Rolex toujours pleine taille (100 % hauteur) et UBS 22px, même sur petit écran */ .rolex-clock-slot { width: 260px; height: 82px; } .rolex-clock-card { transform: none; } .ubs-img { display: block; height: 22px; } .bubble-chi { height: 64px; } .bubble-rolex { height: 30px; } /* ── MEGA MENU : bas de menu empilé et centré (sinon déborde) ── */ .mega-bottom { flex-direction: column; align-items: center; text-align: center; gap: 1.1rem; padding: 1.1rem 0 1.4rem; } .mega-lang { order: -1; } /* langue en premier */ .mega-socials { gap: 10px; flex-wrap: wrap; justify-content: center; } /* Liens rapides : 1 colonne pleine largeur, bien lisibles */ .mega-quick .mega-links { grid-template-columns: 1fr; gap: .15rem; } .mega-quick { padding: 1rem 0 .25rem; } } /* ── MEGA MENU : compactage fin sous 400px ── */ @media (max-width: 400px) { .mega-inner { padding: 0 1rem; } .mega-nav { padding: 1rem 0; } .mega-logo { height: 40px; } /* Catégories niveau 1 plus compactes */ .mega-cat { font-size: 1.35rem; padding: 14px 2px; gap: 12px; } .mega-cat-ico { font-size: 1.1rem; } .mega-cat-arrow { font-size: 1.2rem; } /* Niveaux 2 / 3 */ .mega-back, .mega-back-sub { margin-bottom: 1.1rem; } .mega-sub-head { font-size: 1.25rem; margin-bottom: 1rem; gap: 8px; } .mega-sub-head i { font-size: 1rem; } .mega-sub3-head { font-size: 1.2rem; margin-bottom: 1rem; } .mega-sub .mega-links li a, .mega-l2, .mega-quick .mega-links li a { font-size: 1rem; } .mega-l2 i { font-size: 1.05rem; } /* Liens rapides + bas de menu */ .mega-quick-head { font-size: 10px; margin-bottom: .75rem; } .social-link { width: 34px; height: 34px; font-size: 15px; } .mega-lang-opt { padding: 6px 18px; } .mega-copy { font-size: 10px; } } /* ═══════════════════════════════════════ SECTION VIDÉOS À LA UNE ═══════════════════════════════════════ */ .videos-section { padding: clamp(3.5rem, 7vw, 5.5rem) 0; background: var(--surface); } .videos-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2.25rem; flex-wrap: wrap; } .videos-eyebrow { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .22em; color: var(--orange); margin-bottom: .5rem; } .videos-title { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(1.7rem, 3.3vw, 2.3rem); font-weight: 700; line-height: 1.1; margin: 0; color: var(--taupe-dark); letter-spacing: -.01em; } .videos-all { display: inline-flex; align-items: center; gap: .5rem; font-family: 'Barlow Condensed', sans-serif; font-size: .9rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--taupe-dark); padding-bottom: 4px; border-bottom: 2px solid var(--orange); transition: color .2s, gap .2s; } .videos-all:hover { color: var(--orange); gap: .8rem; } .videos-all i { font-size: 1rem; } .videos-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .video-card { text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: transform .35s cubic-bezier(.2,.8,.2,1); } .video-card:hover { transform: translateY(-4px); } .video-thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 0.5rem; background: var(--taupe-light); box-shadow: 0 4px 16px rgba(61,54,48,.08); } .video-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .3s ease; } .video-card:hover .video-thumb img { transform: scale(1.06); filter: brightness(.85); } .video-thumb::after { content: ""; position: absolute; inset: auto 0 0 0; height: 55%; background: linear-gradient(to top, rgba(61,54,48,.78) 0%, transparent 100%); pointer-events: none; } .video-play { position: absolute; top: 50%; left: 50%; width: 56px; height: 56px; transform: translate(-50%, -50%) scale(.85); background: var(--orange); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; line-height: 1; box-shadow: 0 6px 22px rgba(220,79,10,.45); opacity: 1; transition: opacity .25s, transform .35s cubic-bezier(.2,.8,.2,1); z-index: 2; } .video-card:hover .video-play { opacity: 1; transform: translate(-50%, -50%) scale(1); } .video-duration { position: absolute; bottom: 12px; right: 12px; background: rgba(0,0,0,.65); color: #fff; font-family: 'Barlow Condensed', sans-serif; font-size: .82rem; font-weight: 600; letter-spacing: .04em; padding: 3px 8px; border-radius: 4px; z-index: 2; } .video-cat { position: absolute; bottom: 12px; left: 12px; font-family: 'Barlow Condensed', sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; padding: 4px 10px; border: 1px solid rgba(255,255,255,.5); border-radius: 0.5rem; backdrop-filter: blur(6px); background: rgba(255,255,255,.08); z-index: 2; } .video-meta { padding: 1rem .1rem 0; } .video-name { font-family: 'Barlow Condensed', sans-serif; font-size: 1.1rem; font-weight: 600; line-height: 1.3; color: var(--taupe-dark); margin: 0 0 .35rem; transition: color .2s; } .video-card:hover .video-name { color: var(--orange); } .video-info { font-family: 'Barlow Condensed', sans-serif; font-size: .85rem; color: var(--taupe); margin: 0; letter-spacing: .04em; } @media (max-width: 1100px) { .videos-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } } @media (max-width: 560px) { .videos-grid { grid-template-columns: 1fr; } .videos-head { align-items: flex-start; } .video-thumb { aspect-ratio: 16 / 9; } } /* ── HERO ───────────────────────────────── */ .hero-section { height: 870px; position: relative; overflow: hidden; } .hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(61,54,48,.75) 0%, rgba(61,54,48,.1) 55%, transparent 100%); z-index: 1; } .hero-stripe { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--orange); z-index: 3; } .hero-content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 5rem; } .glass-panel { background: rgba(255,255,255,.10); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.15); border-radius: 1.25rem; } .badge-100 { display: inline-flex; align-items: center; gap: 8px; background: var(--orange); color: #fff; padding: 5px 14px; border-radius: 4px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1rem; } .text-gradient { background: linear-gradient(135deg, var(--orange) 0%, var(--taupe) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* ── NEWS CARDS ─────────────────────────── */ .news-card { border: none; border-radius: 1rem; overflow: hidden; background: #fff; box-shadow: 0 4px 12px rgba(61,54,48,.08); transition: transform .3s, box-shadow .3s; } .news-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(61,54,48,.12); } .news-card-img { height: 220px; overflow: hidden; } .news-card img { width: 100%; height: 220px; object-fit: cover; transition: transform .5s; } .news-card:hover img { transform: scale(1.05); } .news-card h3 { transition: color .2s; } .news-card:hover h3 { color: var(--orange); } /* ── PROMO BLOCKS ───────────────────────── */ .promo-card { height: 460px; position: relative; border-radius: 1rem; overflow: hidden; cursor: pointer; } .promo-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; } .promo-card:hover img { transform: scale(1.08); } .promo-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(61,54,48,.92) 0%, rgba(61,54,48,.25) 55%, transparent 100%); padding: 3rem; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; } .promo-card.magazine .promo-overlay { background: linear-gradient(to top, rgba(220,79,10,.92) 0%, rgba(220,79,10,.25) 55%, transparent 100%); } /* ── NEWSLETTER ─────────────────────────── */ .section-newsletter { background: var(--taupe-dark); } .section-newsletter .form-control { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: #fff; } .section-newsletter .form-control::placeholder { color: rgba(255,255,255,.5); } .section-newsletter .form-control:focus { box-shadow: none; border-color: var(--orange); } /* ── FOOTER ─────────────────────────────── */ footer { background: #fff; border-top: 1px solid var(--taupe-border); } /* ── UTILS ───────────────────────────────── */ .max-container { max-width: 1280px; margin: 0 auto; } .section-padding { padding: 5rem 0; } .rounded-xl { border-radius: 1rem !important; } .ls-wide { letter-spacing: .1em; } .heritage-quote { border-left: 4px solid var(--orange) !important; background: rgba(220,79,10,.04) !important; } .section-title-line { width: 56px; height: 3px; background: var(--orange); border-radius: 2px; } .partner-logo { filter: grayscale(1) opacity(.5); max-height: 38px; object-fit: contain; transition: filter .3s; } .partner-logo:hover { filter: grayscale(0) opacity(1); } /* ── SPONSORS (logos animés) ─────────────── */ .sponsors { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.75rem 2.5rem; min-height: 84px; } .sponsors a { display: none; align-items: center; justify-content: center; width: 150px; height: 64px; /* boîte uniforme pour chaque logo */ padding: 6px 10px; opacity: 0; transition: opacity .8s ease; flex: 0 0 auto; } .sponsors a.is-active { display: flex; } .sponsors a.is-visible { opacity: 1; } .sponsors a img { max-height: 100% !important; max-width: 100% !important; width: auto !important; height: auto !important; padding: 0 !important; margin: 0 !important; object-fit: contain; filter: grayscale(1) opacity(.6); transition: filter .3s, opacity .3s; } .sponsors a:hover img { filter: grayscale(0) opacity(1); } @media (max-width: 560px) { .sponsors { gap: 1.25rem 1.75rem; min-height: 60px; } .sponsors a { width: 112px; height: 48px; } } /* ════════════════════════════════════════════════════════════ MEGA-MENU MOBILE : COMPACTAGE VERTICAL AGRESSIF ════════════════════════════════════════════════════════════ Sur iPhone, tout doit tenir dans un seul écran (sans scroll) pour que les catégories L1 ET les liens utiles soient visibles. */ @media (max-width: 900px) { .mega-top { height: 56px !important; } .close-btn { width: 40px !important; height: 40px !important; font-size: 19px !important; } .mega-nav { padding: .75rem 0 !important; } .mega-inner { padding: 0 1.1rem !important; } .mega-cat { font-size: 1.45rem !important; padding: 12px 4px !important; gap: 14px !important; letter-spacing: .02em !important; } .mega-cat-ico { font-size: 1.15rem !important; } .mega-cat-arrow { font-size: 1.2rem !important; } .mega-sub-head { font-size: 1.2rem !important; margin-bottom: .85rem !important; gap: 8px !important; } .mega-sub-head i { font-size: 1.05rem !important; } .mega-back { margin-bottom: 1rem !important; font-size: 12px !important; } .mega-sub .mega-links li a { font-size: 1rem !important; padding: 7px 0 !important; } .mega-quick { padding: .75rem 0 .25rem !important; } .mega-quick-head { font-size: 11px !important; letter-spacing: .14em !important; margin-bottom: .35rem !important; } .mega-quick .mega-links { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: .1rem .9rem !important; } .mega-quick .mega-links li a { padding: 5px 0 !important; font-size: .88rem !important; letter-spacing: 0 !important; } .mega-bottom { padding: .75rem 0 1rem !important; gap: .65rem !important; } .mega-socials a { width: 36px !important; height: 36px !important; font-size: 16px !important; } .mega-lang { gap: 4px !important; } .mega-lang-opt { padding: 5px 10px !important; font-size: 12px !important; } } @media (max-width: 560px) { .mega-top { height: 52px !important; } .mega-nav { padding: .5rem 0 !important; } .mega-cat { font-size: 1.3rem !important; padding: 10px 4px !important; gap: 12px !important; } .mega-cat-ico { font-size: 1.05rem !important; } .mega-sub-head { font-size: 1.1rem !important; margin-bottom: .65rem !important; } .mega-back { margin-bottom: .65rem !important; } .mega-sub .mega-links li a { font-size: .95rem !important; padding: 6px 0 !important; } .mega-quick-head { margin-bottom: .25rem !important; } .mega-bottom { padding: .5rem 0 .85rem !important; gap: .5rem !important; } } @media (max-width: 400px) { .mega-top { height: 48px !important; } .close-btn { width: 36px !important; height: 36px !important; font-size: 17px !important; } .mega-nav { padding: .35rem 0 !important; } .mega-inner { padding: 0 .9rem !important; } .mega-cat { font-size: 1.18rem !important; padding: 9px 4px !important; gap: 10px !important; } .mega-cat-ico { font-size: 1rem !important; } .mega-cat-arrow { font-size: 1.05rem !important; } .mega-sub-head { font-size: 1rem !important; } .mega-sub .mega-links li a { font-size: .9rem !important; padding: 5px 0 !important; } .mega-quick .mega-links { gap: .05rem .65rem !important; } .mega-quick .mega-links li a { font-size: .8rem !important; padding: 4px 0 !important; } .mega-socials a { width: 32px !important; height: 32px !important; font-size: 15px !important; } } /* ════════════════════════════════════════════════════════════ POPUP BILLETTERIE ════════════════════════════════════════════════════════════ */ .ticketing-popup-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(61,54,48,.7); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 1.5rem; opacity: 0; pointer-events: none; transition: opacity .3s ease; } .ticketing-popup-overlay.is-open { opacity: 1; pointer-events: all; } .ticketing-popup { position: relative; background: #fff; border-radius: 1rem; border-top: 4px solid var(--orange); padding: 2.5rem 2rem; max-width: 420px; width: 100%; text-align: center; box-shadow: 0 24px 64px rgba(61,54,48,.3); transform: translateY(16px); transition: transform .3s ease; font-family: 'Barlow Condensed', sans-serif; } .ticketing-popup-overlay.is-open .ticketing-popup { transform: translateY(0); } .ticketing-popup-close { position: absolute; top: 1rem; right: 1rem; width: 36px; height: 36px; border: none; background: var(--taupe-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: var(--taupe); cursor: pointer; transition: background .2s, color .2s; } .ticketing-popup-close:hover { background: var(--taupe); color: #fff; } .ticketing-popup-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--orange-light); color: var(--orange); font-size: 1.8rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; } .ticketing-popup-label { font-size: .78rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--orange); margin-bottom: .35rem; } .ticketing-popup-title { font-family: 'Barlow Condensed', sans-serif; font-size: 1.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--taupe-dark); margin-bottom: .75rem; } .ticketing-popup-msg { font-size: 1rem; color: var(--taupe); margin-bottom: .75rem; } .ticketing-popup-date { background: var(--taupe-light); border-radius: .5rem; padding: 1rem 1.5rem; margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap; } .ticketing-popup-datevalue { font-size: 1.1rem; font-weight: 700; color: var(--taupe-dark); text-transform: capitalize; } .ticketing-popup-at { font-size: .9rem; color: var(--taupe); } .ticketing-popup-timevalue { font-size: 1.1rem; font-weight: 700; color: var(--orange); } .ticketing-popup-notify { display: inline-flex; align-items: center; gap: .5rem; background: var(--orange); color: #fff; border-radius: .5rem; padding: .7rem 1.5rem; font-size: .9rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; transition: background .2s; } .ticketing-popup-notify:hover { background: var(--orange-dark); color: #fff; } /* ════════════════════════════════════════════════════════════ INDICATEUR DE SCROLL dans le mega-menu mobile Élément
injecté par JS en dernier enfant de .mega-nav. Fond opaque pour masquer complètement le contenu qui passerait derrière, box-shadow vers le haut pour une transition douce. ════════════════════════════════════════════════════════════ */ .mega-scroll-hint { position: sticky; bottom: -0.5rem; left: 0; right: 0; width: 100%; height: 44px; margin-top: -44px; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 5; background: var(--taupe-dark); border-top: 1px solid rgba(255, 255, 255, .06); box-shadow: 0 -10px 16px -6px var(--taupe-dark); color: var(--orange); font-size: 1.4rem; opacity: 0; transition: opacity .2s ease; } .mega-scroll-hint i { display: block; line-height: 1; animation: megaScrollBob 1.4s ease-in-out infinite; } .mega-nav.has-scroll:not(.at-bottom) .mega-scroll-hint { opacity: 1; } @keyframes megaScrollBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @media (prefers-reduced-motion: reduce) { .mega-scroll-hint i { animation: none; } }