/* ODYSSÉE ACADEMY — Landing V2 (site CLIENT 656d8c1f5769cff94fc94c69) CSS de PAGE (page 6a8af4395217eb84bea0cbf2 uniquement). Reconstruit à partir de inline-styles.css (oda2026 publié), filtré aux SEULES classes utilisées par la landing (classes.json / style-map.json), sélecteurs réécrits avec les slugs finaux v2- (collision avec le design system déjà présent sur le site client). Tout ce qui concerne des pages/fonctionnalités absentes de cette landing a été jeté : slider coachs, panneaux disciplines, FAQ WhatsApp, mega menus S'entrainer/Boutique, accordéon de sous-menu burger, Splide — aucun de ces éléments n'existe dans fragments/pw-02-navbar.html ni dans classes.json (vérifié avant de jeter). Pas de règle scrollbar/texture trouvée dans les sources : rien à porter sur ce point. */ /* ============================================================ A.1 — SYSTÈME FLUIDE (identique sur tous les projets MuratDesigns) Règles body/html : posées ici en code de PAGE, ne fuient pas sur le reste du site. ============================================================ */ body { font-size: 0.9656004828002414vw; /* Regles body d'oda2026 jamais portees (constat 23/08) : sans elles la page heritait du body du site CLIENT (fond blanc → barre Safari blanche, texte #1d1d1b → footer illisible, police du site client). Valeurs verbatim de la feuille publiee oda2026 (--dark: #181719, --white: white). */ background-color: #181719; color: #fff; cursor: default; font-family: bebas-neue-pro-expanded, sans-serif; font-weight: 500; line-height: 1.2; } @media screen and (min-width: 1770px) { body { font-size: 17.09112854556427px; } } /* Redondance défensive avec V2 Container (même valeur, cf. rules.json) : la garder ici protège d'une éventuelle "règle fantôme" côté store de styles, non vérifiable sans publier — coût nul, sécurité en plus. */ .v2-container { max-width: 1770px; } /* ============================================================ A.2 — GLOBAL CSS (embed "Global CSS" d'oda2026, part page-scopée) .splide__sr jeté : aucun Splide dans la landing. ============================================================ */ .v2-page-wrapper { overflow: clip; } section { position: relative; } a { color: inherit; text-decoration: none; } /* ============================================================ A.3 — ANIMATIONS AU SURVOL (embed "ODYSSEE ACADEMY - Animations au survol") Filtré aux classes réellement présentes dans la landing. ============================================================ */ :root { --oda-ease: cubic-bezier(0.16,1,0.3,1); --oda-fast: 440ms; --oda-slow: 920ms; } .v2-main-button,.v2-button-outline,.v2-text-button,.v2-text-button-icon,.v2-button-icon, .v2-nav-link,.v2-event-item,.v2-social-link { transition: transform var(--oda-fast) var(--oda-ease), opacity var(--oda-fast) var(--oda-ease), border-color var(--oda-fast) var(--oda-ease), background-color var(--oda-fast) var(--oda-ease), box-shadow var(--oda-fast) var(--oda-ease), filter var(--oda-fast) var(--oda-ease); } .v2-button-icon,.v2-text-button-label,.v2-event-item-arrow { transition: transform var(--oda-fast) var(--oda-ease), opacity var(--oda-fast) var(--oda-ease), border-color var(--oda-fast) var(--oda-ease); } @media (hover:hover) and (pointer:fine) { .v2-main-button:hover { transform: translateY(-2px); filter: brightness(1.12); box-shadow: 0 0.7em 1.6em rgba(213,25,25,.28); } .v2-main-button:active { transform: translateY(0); } .v2-button-outline:hover { background-color: rgba(213,25,25,.12); border-color: #d51919; transform: translateY(-2px); } .v2-main-button.v2-dark:hover { background-color: #1e1e20; border-color: #d51919; filter: none; } .v2-main-button:hover .v2-button-icon,.v2-button-outline:hover .v2-button-icon { transform: translateX(4px); } .v2-text-button:hover .v2-text-button-label { opacity: .75; } .v2-text-button:hover .v2-text-button-icon { transform: translateX(4px); } .v2-nav-link:hover { opacity: .65; } .v2-social-link:hover { border-color: #d51919; transform: translateY(-2px); } } @media (prefers-reduced-motion:reduce) { * { transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* ============================================================ A.4 — POP-UPS DE RÉSERVATION (système data-booking / data-booking-popup) Les sélecteurs d'attribut [data-booking]/[data-booking-popup] restent inchangés. ============================================================ */ .v2-booking-popup.is-open { display: flex; } .v2-booking-popup-title { -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } html.booking-popup-open, html.booking-popup-open body { overflow: hidden; } .v2-booking-popup.is-open .v2-booking-popup-overlay { animation: odaPopupFade .32s var(--oda-ease) both; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .v2-booking-popup.is-open .v2-booking-popup-card { animation: odaPopupRise .42s var(--oda-ease) both; } @keyframes odaPopupFade { from { opacity: 0; } to { opacity: 1; } } @keyframes odaPopupRise { from { opacity: 0; transform: translateY(1.2em) scale(.985); } to { opacity: 1; transform: none; } } .v2-booking-popup-close { transition: border-color var(--oda-fast) var(--oda-ease), background-color var(--oda-fast) var(--oda-ease); } .v2-booking-popup-close:focus-visible { outline: none; border-color: #d51919; box-shadow: 0 0 0 2px rgba(213,25,25,.45); } .v2-booking-popup:focus { outline: none; } @media (hover:hover) and (pointer:fine) { .v2-booking-popup-close:hover { border-color: #d51919; background-color: rgba(213,25,25,.12); } } /* ============================================================ A.5 — EFFET MÉTALLISÉ : CTA principaux rouges (s'inscrire au prochain event...) Les data-booking="essai" ont été retirés (CTA re-câblés vers l'évènement) : l'effet suit désormais tous les main-button non .v2-dark de la page. ============================================================ */ .v2-main-button:not(.v2-dark) { position: relative; overflow: hidden; } .v2-main-button:not(.v2-dark) .v2-button-text, .v2-main-button:not(.v2-dark) .v2-button-icon { position: relative; z-index: 2; } .v2-main-button:not(.v2-dark):before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; animation: odaCtaGlow 2.2s ease-in-out infinite; } .v2-main-button:not(.v2-dark):after { content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; pointer-events: none; z-index: 1; background-image: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.38) 50%, rgba(255,255,255,0) 100%); transform: skewX(-18deg); animation: odaCtaSweep 2.6s ease-in-out infinite; } @keyframes odaCtaGlow { 0%,100% { box-shadow: 0 0 0 rgba(213,25,25,0); } 50% { box-shadow: 0 0 1.4em rgba(213,25,25,.5), 0 0 3em rgba(213,25,25,.25); } } @keyframes odaCtaSweep { 0% { left: -70%; } 55%,100% { left: 130%; } } @media (prefers-reduced-motion:reduce) { .v2-main-button:not(.v2-dark):before { animation: none; box-shadow: 0 0 1.2em rgba(213,25,25,.42); } .v2-main-button:not(.v2-dark):after { display: none; } } /* ============================================================ A.6 — BURGER MENU MOBILE (navbar) Pas de mega menu dans cette navbar (pw-02-navbar.html vérifié : aucun [data-mega], aucun .nav-dropdown-toggle) : le bloc "sous-menus en accordéon" d'oda2026 est jeté en entier, seul le burger simple (liste plate de 3 liens) est repris. ============================================================ */ .v2-nav-burger[aria-expanded="true"] .v2-nav-burger-line:nth-child(1) { transform: translateY(.62em) rotate(45deg); } .v2-nav-burger[aria-expanded="true"] .v2-nav-burger-line:nth-child(2) { opacity: 0; } .v2-nav-burger[aria-expanded="true"] .v2-nav-burger-line:nth-child(3) { transform: translateY(-.62em) rotate(-45deg); } .v2-nav-burger:focus-visible { outline: none; } .v2-nav-burger:focus-visible .v2-nav-burger-line { background-color: #d51919; } .v2-nav-menu-close:focus-visible { outline: none; border-color: #d51919; } @media screen and (max-width: 991px) { .v2-nav-menu.is-open { display: flex !important; position: fixed; inset: 0; z-index: 9990; flex-direction: column; align-items: center; justify-content: center; grid-row-gap: 1.3em; background-color: rgba(12,12,13,.98); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 6em 2em 3em; overflow-y: auto; } html.nav-open, html.nav-open body { overflow: hidden; } } @media screen and (max-width: 767px) { .v2-nav-menu.is-open { padding: 5.5em 1.2em 2.4em; grid-row-gap: 1.05em; } } @media (prefers-reduced-motion:reduce) { .v2-nav-burger-line { transition: none; } } /* ============================================================ A.7 — WIDGET INSTAGRAM ELFSIGHT (footer) Shadow root fermé : seul le conteneur côté host est corrigeable. ============================================================ */ .v2-footer-instafeed { max-width: 100%; overflow: hidden; } .v2-footer-instafeed .v2-code-embed { max-width: 100%; overflow: hidden; } .v2-footer-instafeed iframe { max-width: 100% !important; } /* ============================================================ A.8 — TITRES : contour blanc "inside" + accents rouges sans halo silver Filtré aux classes de titre réellement présentes dans la landing. ============================================================ */ .v2-h1-line,.v2-h2-classic,.v2-pillar-card-title { -webkit-text-stroke-width: .8px; -webkit-text-stroke-color: rgba(255,255,255,.45); } .v2-h3-classic,.v2-event-item-title,.v2-booking-popup-title { -webkit-text-stroke-width: .5px; -webkit-text-stroke-color: rgba(255,255,255,.45); } .v2-h1-line.v2-accent,.v2-h2-accent { -webkit-text-stroke-width: 0; } .v2-h2-accent { background-image: linear-gradient(180deg,#d51919,#6f0d0d), linear-gradient(180deg,#d51919,#6f0d0d), linear-gradient(180deg,#d51919,#6f0d0d), linear-gradient(180deg,#d51919,#6f0d0d), linear-gradient(180deg,#d51919,#6f0d0d), linear-gradient(180deg,#d51919,#6f0d0d), linear-gradient(180deg,#d51919,#6f0d0d), linear-gradient(180deg,#d51919,#6f0d0d); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ============================================================ B — CSS RÉSIDUEL (css-residuel.css, repris tel quel — slugs déjà en v2-) ============================================================ */ .v2-nav-link:hover { background-image: linear-gradient(#d51919, #6f0d0d); } .v2-event-item-arrow:hover { transform: translateX(.3em); } /* ============================================================ C — COMPAT : préfixes -webkit- retirés par l'API de styles (styles-NOTES.md §5) -webkit-background-clip:text (15 classes) — background-clip:text seul est déjà posé nativement sur ces classes, on ne réinjecte que le préfixe manquant. ============================================================ */ .v2-booking-popup-title, .v2-button-text, .v2-event-item-title, .v2-h1-line, .v2-h2-accent, .v2-h2-classic, .v2-h2-surtitle, .v2-h3-classic, .v2-nav-link, .v2-pillar-card-title, .v2-stats-label, .v2-stats-number, .v2-tag-text, .v2-text-button-label, .v2-tag-text.v2-tag-text-red { -webkit-background-clip: text; } /* -webkit-backdrop-filter (3 classes) — valeurs reprises de rules.json */ .v2-about-video-play-pill { -webkit-backdrop-filter: blur(4px); } .v2-event-feature-tag { -webkit-backdrop-filter: blur(6px); } .v2-hero-tags { -webkit-backdrop-filter: blur(1px); } /* ============================================================ D — MOUNT VIDÉO (contrat fixe avec l'agent DOM) L'agent qui construit le DOM de la page pose un div.v2-video-mount vide (avec data-video-src / data-video-poster) là où une vidéo doit apparaître (ex. fond du hero, où l'original oda2026 utilisait le widget natif w-background-video non reproductible par API — cf. .hero-background-video dans rules.json : position absolute/inset 0/object-fit cover/z-index 0/pointer-events none, repris ici). landing-v2.js injecte le