/*--------------------------------------------------------------------- File Name: style.css Project : Feeling Dance Author : A.B Web Style Mix #3 (warm + modern) - Rounded + soft gradients - Glass surfaces - Subtle textures - Micro-interactions ---------------------------------------------------------------------*/ html { overflow-y: hidden; } /* on garde la correction double scroll */ body { overflow-y: auto; scroll-behavior: smooth; /* âœ… smooth scroll sur le bon scroller */ -webkit-overflow-scrolling: touch; } /* =============================== Imports (template dependencies) =============================== */ @import url(animate.min.css); @import url(normalize.css); @import url(icomoon.css); @import url(css/font-awesome.min.css); @import url(meanmenu.css); @import url(owl.carousel.min.css); @import url(swiper.min.css); @import url(slick.css); @import url(jquery.fancybox.min.css); @import url(jquery-ui.css); @import url(nice-select.css); /* =============================== Design tokens =============================== */ :root{ /* Brand (warm mix) */ --brand-1:#e85a5a; /* coral */ --brand-2:#f4a07a; /* peach */ --brand-3:#f6c38a; /* honey */ --brand-4:#b38bff; /* lilac accent */ --ink:#1f1f23; --muted:#5f5a57; --paper:#ffffff; --bg-page: linear-gradient(180deg, #ffffff 0%, #fff6f4 45%, #f6f2ff 100%); --bg-soft: linear-gradient(180deg, #ffffff 0%, #fff4f2 45%, #f6f2ff 100%); --surface: rgba(255,255,255,.78); --surface-2: rgba(255,255,255,.92); --border: rgba(0,0,0,.08); --shadow: 0 18px 55px rgba(0,0,0,.12); --shadow-soft: 0 12px 28px rgba(0,0,0,.10); --radius-xl: 28px; --radius-lg: 22px; --radius-md: 16px; --header-h: 84px; /* sert Ã compenser le header fixed */ } /* =============================== Base / Reset =============================== */ *{ box-sizing:border-box; } /* Fix "double scrollbar" issues: When both and end up scrollable, some browsers show 2 vertical scrollbars (and the scroll can feel "buggy"). We force the scroll container to be only. */ html, body{ height: 100%; } html{ scroll-behavior:smooth; overflow-x:hidden; overflow-y:hidden; /* prevent from scrolling */ /* Compense le header fixed pour les ancres (#cours, #contact, etc.) */ scroll-padding-top: calc(var(--header-h) + 12px); } body{ margin:0; padding-top: var(--header-h); font-family:'Roboto', sans-serif; font-size: 15px; line-height: 1.75; color: var(--muted); background: var(--bg-page); overflow-x:hidden; overflow-y:auto; /* single scrollbar here */ -webkit-overflow-scrolling: touch; padding-top: 55px; } img{ max-width:100%; height:auto; } a{ color:inherit; text-decoration:none !important; } a:hover{ color: var(--brand-1); } button:focus{ outline:none; } /* Bootstrap container: keep it readable (NOT full width) */ .container{ max-width: 1300px; } /* Section spacing */ .layout_padding{ padding: 84px 0; } @media (max-width: 768px){ :root{ --header-h: 78px; } .layout_padding{ padding: 64px 0; } } /* Titles (template compatibility) */ h1,h2,h3,h4,h5,h6{ margin:0; color: var(--ink); font-family:'Poppins', sans-serif; } /* Small utility */ .full{ width:100%; float:left; } /* =============================== Reveal on scroll (IntersectionObserver) =============================== */ .reveal{ opacity:0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; } .reveal--left{ transform: translateX(-18px); } .reveal--right{ transform: translateX(18px); } .reveal--scale{ transform: scale(.97); } .reveal.is-visible{ opacity:1; transform:none; } @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1 !important; transform:none !important; transition:none !important; } *{ scroll-behavior:auto !important; } } /* ===================================================================== DÃ‰BUT HEADER / NAVBAR ===================================================================== */ .header_section{ position: fixed; top:0; left:0; right:0; z-index: 9999; } .header_section > .container-fluid{ padding-left: 0; padding-right: 0; } .header_section .navbar{ background: linear-gradient(180deg, rgba(255,245,238,.93), rgba(255,238,229,.86)) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(232,90,90,.18); box-shadow: 0 10px 28px rgba(17,17,17,.08), inset 0 1px 0 rgba(255,255,255,.8); padding: 12px 0; transition: background .25s ease, box-shadow .25s ease, border-color .25s ease; } .header_section.is-scrolled .navbar{ background: linear-gradient(180deg, rgba(255,239,230,.88), rgba(255,232,220,.8)) !important; box-shadow: 0 14px 34px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.72); } .navbar-brand img{ height: 42px; width:auto; display:block; object-fit:contain; } .navbar-light .navbar-nav .nav-link{ position: relative; font-weight: 700; letter-spacing: .025em; text-transform: uppercase; font-size: 13px; padding: .58rem .95rem; border-radius: 999px; color: rgba(17,17,17,.84); border: 1px solid transparent; transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease; } .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .active > .nav-link{ background: rgba(255,255,255,.78); border-color: rgba(0,0,0,.08); box-shadow: 0 8px 18px rgba(0,0,0,.08); color: var(--ink); transform: translateY(-1px); } .navbar-light .navbar-nav .nav-link::after{ content:""; position:absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 999px; background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); opacity: 0; transform: scaleX(.3); transition: opacity .2s ease, transform .2s ease; } .navbar-light .navbar-nav .nav-link:hover::after, .navbar-light .navbar-nav .active > .nav-link::after{ opacity: .95; transform: scaleX(1); } .navbar-toggler{ border:none; } .navbar-toggler-icon{ filter: brightness(.2); } @media (min-width: 992px){ .fd-navbar .navbar-collapse{ display: flex !important; align-items: center; width: 100%; } .fd-navbar .navbar-nav{ flex: 1 1 auto; width: 100%; margin-right: 0 !important; justify-content: space-evenly; align-items: center; } } /* Floating social icons */ .floating_social{ position: fixed; right: 18px; bottom: 18px; z-index: 9998; display: flex; flex-direction: column; gap: 10px; } .floating_social a.social{ width: 48px; height: 48px; border-radius: 999px; display:grid; place-items:center; color:#fff !important; box-shadow: 0 12px 28px rgba(0,0,0,.18); transition: transform .18s ease, filter .18s ease; animation: socialFloat 3.2s ease-in-out infinite; } .floating_social a.social:hover{ transform: translateY(-2px) scale(1.03); filter: brightness(1.02); } .floating_social a.facebook{ animation-delay: .3s; } .floating_social a.instagram{ background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); } .floating_social a.facebook{ background:#1877F2; } @keyframes socialFloat{ 0%, 100%{ transform: translateY(0); } 50%{ transform: translateY(-3px); } } @media (prefers-reduced-motion: reduce){ .floating_social a.social{ animation: none; } } .theme_toggle{ position: relative; z-index: 2; height: 42px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(17,17,17,.14); background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(245,245,250,.9)); color: #1f1f23; display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 12px; letter-spacing: .02em; box-shadow: 0 10px 20px rgba(0,0,0,.12); transition: transform .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease; } .theme_toggle:hover{ transform: translateY(-1px); box-shadow: 0 14px 24px rgba(0,0,0,.16); } .theme_toggle__icon{ font-size: 14px; line-height: 1; } @media (min-width: 992px){ .theme_toggle{ margin-left: 10px; flex: 0 0 auto; } } @media (max-width: 991.98px){ .navbar-collapse{ gap: 10px; } .fd-navbar .navbar-collapse{ margin-top: 10px; padding: 10px; border-radius: 16px; background: rgba(255,243,235,.9); border: 1px solid rgba(232,90,90,.18); box-shadow: 0 12px 24px rgba(0,0,0,.1); } .fd-navbar .navbar-nav .nav-link{ text-align: center; } .theme_toggle{ margin-top: 10px; width: 100%; justify-content: center; } } @media (max-width: 768px){ .navbar-brand img{ height: 34px; } .floating_social{ right: 12px; bottom: 12px; gap: 8px; } .floating_social a.social{ width: 44px; height: 44px; } .theme_toggle{ height: 38px; padding: 0 10px; font-size: 11px; margin-top: 10px; width: 100%; justify-content: center; } } html[data-theme="dark"]{ color-scheme: dark; --ink:#f4f4f7; --muted:#c8c9d6; --paper:#12131a; --bg-page: linear-gradient(180deg, #11121a 0%, #171a24 45%, #181426 100%); --bg-soft: linear-gradient(180deg, #131621 0%, #191827 45%, #1d1830 100%); --surface: rgba(24,26,36,.78); --surface-2: rgba(26,28,39,.9); --border: rgba(255,255,255,.12); --shadow: 0 20px 60px rgba(0,0,0,.45); --shadow-soft: 0 12px 30px rgba(0,0,0,.38); } html[data-theme="dark"] .header_section .navbar{ background: rgba(16,18,27,.88) !important; border-bottom: 1px solid rgba(255,255,255,.1); } html[data-theme="dark"] .header_section.is-scrolled .navbar{ background: rgba(16,18,27,.78) !important; } html[data-theme="dark"] .navbar-light .navbar-nav .nav-link{ color: rgba(244,244,247,.86); } html[data-theme="dark"] .navbar-light .navbar-nav .nav-link:hover, html[data-theme="dark"] .navbar-light .navbar-nav .active > .nav-link{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); box-shadow: 0 10px 20px rgba(0,0,0,.26); color: #fff; } html[data-theme="dark"] .navbar-light .navbar-nav .nav-link::after{ background: linear-gradient(135deg, #ff6f4d, #ff2f7d); } @media (max-width: 991.98px){ html[data-theme="dark"] .fd-navbar .navbar-collapse{ background: rgba(24,27,39,.92); border-color: rgba(255,255,255,.14); box-shadow: 0 14px 30px rgba(0,0,0,.35); } } html[data-theme="dark"] .navbar-toggler-icon{ filter: brightness(4); } html[data-theme="dark"] .course_card, html[data-theme="dark"] .trainer_card, html[data-theme="dark"] .about_card, html[data-theme="dark"] .fd-event, html[data-theme="dark"] .fd-event-item__card, html[data-theme="dark"] .contact_main{ background: rgba(24,26,36,.85); border-color: rgba(255,255,255,.14); } html[data-theme="dark"] .course_panel{ background: rgba(17,19,28,.78); border-color: rgba(255,255,255,.12); } html[data-theme="dark"] .course_meta, html[data-theme="dark"] .trainer_desc, html[data-theme="dark"] .fd-event__desc, html[data-theme="dark"] .fd-event-item__card p{ color: rgba(229,229,239,.8); } html[data-theme="dark"] .fd-mini{ color: rgba(229,229,239,.72); } html[data-theme="dark"] .section_subtitle, html[data-theme="dark"] .about_lead, html[data-theme="dark"] .course_list li, html[data-theme="dark"] .course_meta, html[data-theme="dark"] .trainer_tag, html[data-theme="dark"] .chip{ color: rgba(236,236,245,.86); } html[data-theme="dark"] p, html[data-theme="dark"] li, html[data-theme="dark"] .point p, html[data-theme="dark"] .fd-events__subtitle{ color: rgba(232,233,242,.86); } html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6{ color: #f7f7fb; } html[data-theme="dark"] .point_icon{ background: rgba(255,255,255,.12); color: rgba(255,255,255,.92); } html[data-theme="dark"] .fd-event__date, html[data-theme="dark"] .fd-event-item__top time{ color: #f5f5fb; } html[data-theme="dark"] .fd-pill{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); color: rgba(243,243,250,.92); } html[data-theme="dark"] .fd-pill i{ color: rgba(243,243,250,.78); } html[data-theme="dark"] .fd-badge--alt{ background: rgba(255,255,255,.14); color: #fff; } html[data-theme="dark"] .fd-badge--hot{ background: linear-gradient(135deg, #ff6f4d, #ff2f7d); color:#fff; } html[data-theme="dark"] .fd-link{ color: #f8b2ce !important; } html[data-theme="dark"] .fd-link:hover{ color: #ffd2e4 !important; } html[data-theme="dark"] .course_more{ border-color: rgba(255,255,255,.2); box-shadow: 0 10px 20px rgba(0,0,0,.35); } html[data-theme="dark"] .cs_btn, html[data-theme="dark"] .ts_btn{ background: rgba(32,35,48,.95); color: #f3f3fb; border-color: rgba(255,255,255,.22); } html[data-theme="dark"] .cs_dot, html[data-theme="dark"] .ts_dot{ background: rgba(255,255,255,.28); border-color: rgba(255,255,255,.35); } html[data-theme="dark"] .cs_dot.is-active, html[data-theme="dark"] .ts_dot.is-active{ background: linear-gradient(130deg, #ff6f4d, #ff2f7d); border-color: rgba(255,255,255,.6); } html[data-theme="dark"] .trainer_avatar{ border-color: rgba(255,255,255,.3); } html[data-theme="dark"] .contact_taital, html[data-theme="dark"] .service_taital, html[data-theme="dark"] .about_title, html[data-theme="dark"] .section_title, html[data-theme="dark"] .fd-events__title{ color: #ffffff; } html[data-theme="dark"] .email-bt, html[data-theme="dark"] .massage-bt{ background: rgba(18,20,29,.96) !important; color: #f7f7fc !important; border: 1px solid rgba(255,255,255,.26) !important; caret-color: #ffffff; } html[data-theme="dark"] .email-bt::placeholder, html[data-theme="dark"] .massage-bt::placeholder{ color: rgba(226,226,238,.72); } html[data-theme="dark"] .email-bt:focus, html[data-theme="dark"] .massage-bt:focus{ border-color: rgba(255,111,77,.72) !important; box-shadow: 0 0 0 3px rgba(255,111,77,.18); } html[data-theme="dark"] .hero_btn_ghost{ background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.34); color: #ffffff !important; box-shadow: 0 10px 20px rgba(0,0,0,.28); } html[data-theme="dark"] .hero_btn_ghost:hover{ background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.48); } html[data-theme="dark"] .theme_toggle{ background: linear-gradient(135deg, rgba(33,36,48,.96), rgba(24,26,36,.96)); color: #f4f4f7; border-color: rgba(255,255,255,.28); box-shadow: 0 12px 24px rgba(0,0,0,.35); } /* ===================================================================== FIN HEADER / NAVBAR ===================================================================== */ /* ===================================================================== DÃ‰BUT HERO ===================================================================== */ .banner_section.hero_banner{ position: relative; overflow:hidden; padding: 34px 0 38px; } .banner_section.hero_banner .hero_bg{ position:absolute; inset:-180px; background: radial-gradient(900px 520px at 18% 35%, rgba(232,90,90,.16), transparent 60%), radial-gradient(850px 520px at 82% 20%, rgba(179,139,255,.14), transparent 60%), radial-gradient(700px 420px at 78% 78%, rgba(246,195,138,.14), transparent 60%), linear-gradient(180deg, #ffffff 0%, rgba(250,246,242,.72) 100%); z-index:0; } .banner_section.hero_banner .hero_bg::after{ content:""; position:absolute; inset:0; background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.02) 0, rgba(0,0,0,.02) 1px, transparent 1px, transparent 4px); opacity:.32; pointer-events:none; } .banner_section.hero_banner .container{ position:relative; z-index:1; } .hero_inner{ display:grid; grid-template-columns: 1fr 460px; gap: 38px; align-items:center; } .hero_copy .hero_title{ font-weight: 900; font-size: clamp(34px, 4.2vw, 56px); line-height: 1.05; letter-spacing: -0.02em; } .hero_copy .hero_subtitle{ margin: 14px 0 0; font-size: 17px; color: rgba(17,17,17,.70); } .hero_actions{ display:flex; gap: 12px; flex-wrap:wrap; margin-top: 20px; } .hero_btn{ height: 46px; padding: 0 18px; border-radius: 999px; display:inline-flex; align-items:center; justify-content:center; font-family:'Poppins', sans-serif; font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; transition: transform .16s ease, filter .16s ease; } .hero_btn_primary{ color:#fff !important; background: linear-gradient(135deg, var(--brand-1), var(--brand-2), var(--brand-3)); box-shadow: 0 16px 30px rgba(232,90,90,.18); } .hero_btn_primary:hover{ transform: translateY(-1px); filter: brightness(1.02); } .hero_btn_ghost{ color: var(--ink) !important; background: rgba(255,255,255,.86); border: 1px solid rgba(0,0,0,.10); } .hero_btn_ghost:hover{ transform: translateY(-1px); } .hero_visual{ display:flex; justify-content:center; } .hero_card{ position:relative; } .hero_card::before{ content:""; position:absolute; inset:-22px; border-radius: 34px; background: radial-gradient(60% 60% at 30% 35%, rgba(232,90,90,.18), transparent 70%), radial-gradient(60% 60% at 75% 70%, rgba(179,139,255,.20), transparent 72%); filter: blur(14px); opacity: .55; z-index:-1; } .hero_img{ width:100%; display:block; border-radius: var(--radius-xl); filter: drop-shadow(0 18px 44px rgba(0,0,0,.18)); animation: fdFloat 3.6s ease-in-out infinite; transform-origin: 50% 60%; } .hero_visual:hover .hero_img{ animation-play-state: paused; transform: translateY(-6px) rotate(-0.6deg) scale(1.03); filter: drop-shadow(0 22px 54px rgba(0,0,0,.20)); } @keyframes fdFloat{ 0% { transform: translateY(0) rotate(-0.5deg) scale(1); } 50% { transform: translateY(-22px) rotate(1.1deg) scale(1.04); } 100% { transform: translateY(0) rotate(-0.5deg) scale(1); } } @media (max-width: 992px){ .hero_inner{ grid-template-columns: 1fr 380px; } } @media (max-width: 768px){ .banner_section.hero_banner{ padding: 42px 0 28px; } .hero_inner{ grid-template-columns: 1fr; text-align:center; justify-items:center; } .hero_actions{ justify-content:center; } .hero_img{ max-width: 560px; } } /* ===================================================================== FIN HERO ===================================================================== */ /* ===================================================================== DÃ‰BUT SECTION COURS ===================================================================== */ .service_section{ position: relative; background: var(--bg-soft); overflow:hidden; } .service_section::before{ content:""; position:absolute; inset:-220px; background: radial-gradient(900px 520px at 20% 20%, rgba(232,90,90,.10), transparent 60%), radial-gradient(820px 500px at 80% 30%, rgba(179,139,255,.10), transparent 60%), radial-gradient(700px 420px at 60% 85%, rgba(246,195,138,.12), transparent 60%); pointer-events:none; } .service_section > .container{ position:relative; z-index:1; } .service_taital{ text-align:center; font-size: clamp(26px, 3.2vw, 44px); font-weight: 900; letter-spacing: .02em; text-transform: uppercase; } /* Course slider layout */ .course_slider{ --gap: 16px; --radius: 22px; --per-page: 1; position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin-top: 20px; } @media (min-width: 700px){ .course_slider{ --per-page: 2; } } @media (min-width: 1200px){ .course_slider{ --per-page: 3; } } .cs_viewport{ overflow:hidden; border-radius: calc(var(--radius) + 4px); outline:none; perspective: 1200px; } .cs_viewport:focus{ box-shadow: 0 0 0 3px rgba(232,90,90,.28); } .cs_track{ display:flex; gap: var(--gap); padding: 12px 10px; align-items: flex-start; transition: transform 720ms cubic-bezier(0.2,0.8,0.2,1); will-change: transform; } .course_card{ flex: 0 0 calc((100% - (var(--gap) * (var(--per-page) - 1))) / var(--per-page)); background: linear-gradient(160deg, rgba(255,255,255,.96), rgba(255,255,255,.84)), radial-gradient(120% 100% at 0% 0%, rgba(232,90,90,.10), transparent 62%); border: 1px solid rgba(255,255,255,.7); border-radius: var(--radius-xl); box-shadow: 0 14px 34px rgba(16,16,18,.12), inset 0 1px 0 rgba(255,255,255,.75); padding: 18px; transform-style: preserve-3d; transform: translateZ(var(--z, 0px)) rotateY(var(--r, 0deg)) scale(var(--s, 1)); opacity: var(--o, 1); transition: transform 720ms cubic-bezier(0.2,0.8,0.2,1), box-shadow 720ms ease, opacity 720ms ease, border-color 240ms ease; backface-visibility: hidden; display:flex; flex-direction:column; height: 100%; } .course_card:hover{ border-color: rgba(232,90,90,.35); box-shadow: 0 22px 44px rgba(16,16,18,.16), 0 0 0 1px rgba(232,90,90,.15); } .course_avatar{ width: 118px; aspect-ratio: 1 / 1; border-radius: 999px; overflow:hidden; margin: 0 auto 14px; border: 4px solid rgba(255,255,255,.9); box-shadow: 0 10px 24px rgba(232,90,90,.24); background: #f5f5f5; } .course_avatar img{ width:100%; height:100%; object-fit: cover; display:block; } .course_title{ text-align:center; font-size: clamp(20px, 2.6vw, 24px); font-weight: 900; letter-spacing: .01em; margin: 2px 0 6px; } .course_meta{ text-align:center; margin:0 0 14px; color: rgba(17,17,17,.70); font-weight: 700; } .course_more{ width: 100%; border: 1px solid rgba(232,90,90,.35); border-radius: 14px; padding: 11px 14px; font-weight: 900; letter-spacing: .02em; background: linear-gradient(130deg, #e85a5a, #f19f6f); color: #fff; box-shadow: 0 10px 20px rgba(232,90,90,.22); transition: transform .2s ease, filter .2s ease, box-shadow .2s ease; } .course_more:hover{ transform: translateY(-2px); filter: saturate(1.08); box-shadow: 0 14px 24px rgba(232,90,90,.28); } .course_more[aria-expanded="true"]{ background: linear-gradient(130deg, #1a1a1a, #3a3a3a); border-color: rgba(17,17,17,.42); box-shadow: 0 10px 20px rgba(0,0,0,.18); } .course_panel{ margin-top: 14px; padding: 12px 14px; border: 1px solid rgba(0,0,0,.08); border-radius: 14px; background: rgba(255,255,255,.68); backdrop-filter: blur(6px); } .course_list{ margin:0; padding-left: 18px; } .course_list li{ margin: 6px 0; } .cs_btn{ width: 48px; height: 48px; border-radius: 999px; border: 1px solid rgba(255,255,255,.78); background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.86)); color: #1b1b1b; font-size: 24px; font-weight: 900; line-height: 1; display: grid; place-items: center; box-shadow: 0 12px 26px rgba(0,0,0,.14); cursor: pointer; transition: transform 160ms ease, background 160ms ease, opacity 160ms ease, box-shadow 160ms ease; } .cs_btn:hover{ transform: translateY(-2px); background: #fff; box-shadow: 0 15px 28px rgba(0,0,0,.18); } .cs_btn:active{ transform: translateY(0) scale(.98); } .cs_btn:disabled{ opacity: .45; cursor:not-allowed; } .cs_dots{ display:flex; justify-content:center; gap: 9px; margin-top: 16px; } .cs_dot{ width: 10px; height: 10px; border-radius: 999px; border: 1px solid rgba(17,17,17,.16); background: rgba(17,17,17,.14); cursor:pointer; transition: width 180ms ease, background 180ms ease, transform 180ms ease; } .cs_dot:hover{ transform: translateY(-1px); } .cs_dot.is-active{ background: linear-gradient(130deg, #e85a5a, #f19f6f); border-color: rgba(232,90,90,.68); width: 24px; } /* Mobile: hide arrows, allow swipe */ @media (max-width: 575.98px){ .course_slider{ grid-template-columns: 1fr; } .cs_btn{ display:none; } .cs_viewport{ overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling: touch; } .cs_track{ transition:none; } .course_card{ scroll-snap-align:start; } } /* ===================================================================== FIN SECTION COURS ===================================================================== */ /* ===================================================================== DÃ‰BUT SECTION Ã€ PROPOS ===================================================================== */ .about_section.about_modern{ position: relative; overflow:hidden; background: transparent; } .about_section.about_modern::before{ content:""; position:absolute; inset:-200px; background: radial-gradient(900px 520px at 15% 30%, rgba(232,90,90,.07), transparent 60%), radial-gradient(900px 520px at 85% 20%, rgba(179,139,255,.10), transparent 60%), radial-gradient(700px 420px at 70% 80%, rgba(246,195,138,.12), transparent 60%); pointer-events:none; } .about_modern .container{ position:relative; z-index:1; } .about_head{ text-align:center; max-width: 860px; margin: 0 auto 34px; } .about_kicker{ display:inline-flex; align-items:center; gap:8px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; font-size:12px; color: var(--brand-1); background: rgba(232,90,90,.06); border: 1px solid rgba(232,90,90,.12); padding: 8px 12px; border-radius: 999px; } .about_title{ margin-top: 14px; font-weight: 900; letter-spacing: -0.02em; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.1; } .about_lead{ margin: 12px auto 0; font-size: 16px; color: rgba(17,17,17,.70); } .about_grid{ display:grid; grid-template-columns: 440px 1fr; gap: 28px; align-items:center; } .about_visual_card{ border-radius: var(--radius-xl); overflow:hidden; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); } .about_visual_card.about_slider{ position:relative; height: 420px; } .about_visual_img{ position:absolute; inset:0; width:100%; height:100%; object-fit: cover; opacity:0; transform: scale(1.02); transition: opacity .8s ease, transform 1.2s ease; } .about_visual_img.is-active{ opacity:1; transform: scale(1); } .about_card{ border-radius: var(--radius-xl); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); padding: 26px; backdrop-filter: blur(10px); } .about_chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom: 16px; } .chip{ display:inline-flex; align-items:center; height: 34px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 800; color: rgba(17,17,17,.82); background: rgba(179,139,255,.10); border: 1px solid rgba(179,139,255,.16); } .about_points{ display:grid; gap: 12px; margin-top: 10px; } .point{ display:flex; gap: 12px; padding: 14px; border-radius: 18px; background: rgba(255,255,255,.68); border: 1px solid rgba(0,0,0,.06); } .point_icon{ width: 42px; height: 42px; border-radius: 16px; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, rgba(232,90,90,.16), rgba(179,139,255,.16)); flex: 0 0 auto; font-size: 18px; } .point h3{ margin: 0 0 4px; font-size: 16px; font-weight: 900; } .point p{ margin:0; color: rgba(17,17,17,.70); line-height: 1.6; } .about_actions{ display:flex; gap: 12px; flex-wrap:wrap; margin-top: 18px; } .about_btn{ height: 46px; padding: 0 18px; border-radius: 999px; display:inline-flex; align-items:center; justify-content:center; font-family:'Poppins', sans-serif; font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; border: 1px solid transparent; transition: transform .16s ease, filter .16s ease; } .about_btn_primary{ color:#fff !important; background: linear-gradient(135deg, var(--brand-1), var(--brand-2), var(--brand-3)); box-shadow: 0 16px 30px rgba(232,90,90,.14); } .about_btn_primary:hover{ transform: translateY(-1px); filter: brightness(1.02); } .about_btn_ghost{ color: var(--ink) !important; background: rgba(255,255,255,.86); border-color: rgba(0,0,0,.10); } .about_btn_ghost:hover{ transform: translateY(-1px); } @media (max-width: 992px){ .about_grid{ grid-template-columns: 1fr; } .about_visual_card.about_slider{ height: 360px; } .about_actions{ justify-content:center; } } @media (max-width: 768px){ .about_head{ margin-bottom: 18px; } .about_card{ padding: 18px; } .about_visual_card.about_slider{ height: 300px; } } /* ===================================================================== FIN SECTION Ã€ PROPOS ===================================================================== */ /* ===================================================================== DÃ‰BUT SECTION Ã‰VÃ‰NEMENTS (moderne) ===================================================================== */ .fd-events{ position: relative; overflow:hidden; padding: 84px 0; } /* Zone mÃ©dia avec hauteur fixe */ .fd-event__media--img{ height: 240px; /* ajuste 200-280 si tu veux */ overflow: hidden; background: #000; } /* Image = remplit, crop intelligent */ .fd-event__media--img img{ width: 100%; height: 100%; object-fit: cover; /* IMPORTANT */ object-position: center; /* ou "center 35%" si tu veux remonter un peu */ display: block; } .fd-events::before{ content:""; position:absolute; inset:-200px; background: radial-gradient(900px 520px at 18% 30%, rgba(232,90,90,.10), transparent 60%), radial-gradient(850px 520px at 85% 65%, rgba(246,195,138,.12), transparent 60%), radial-gradient(820px 520px at 70% 20%, rgba(179,139,255,.10), transparent 60%), linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(250,246,242,.70) 100%); pointer-events:none; } .fd-events .container{ position:relative; z-index:1; } .fd-events__head{ text-align:center; max-width: 860px; margin: 0 auto 28px; } .fd-events__kicker{ display:inline-flex; align-items:center; gap:8px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; font-size:12px; color: var(--brand-4); background: rgba(179,139,255,.10); border: 1px solid rgba(179,139,255,.18); padding: 8px 12px; border-radius: 999px; } .fd-events__title{ margin: 12px 0 6px; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(28px, 3.2vw, 44px); } .fd-events__subtitle{ margin: 0 auto; max-width: 760px; color: rgba(17,17,17,.70); font-size: 16px; } .fd-events__layout{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 20px; align-items:start; } @media (max-width: 992px){ .fd-events__layout{ grid-template-columns: 1fr; } } .fd-badge{ font-size: 12px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); color: #fff; } .fd-badge--alt{ background: #111; } .fd-badge--hot{ background: linear-gradient(135deg, #111, var(--brand-1)); } .fd-pill{ display:inline-flex; align-items:center; gap:8px; padding: 8px 10px; border-radius: 999px; font-size: 13px; background: rgba(255,255,255,.78); border: 1px solid var(--border); color: rgba(17,17,17,.78); } .fd-pill i{ color: rgba(17,17,17,.55); } .fd-btn{ height: 46px; padding: 0 16px; border-radius: 999px; display:inline-flex; align-items:center; justify-content:center; font-family:'Poppins', sans-serif; font-weight: 900; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; border: 1px solid transparent; transition: transform .16s ease, filter .16s ease; } .fd-btn--primary{ color:#fff !important; background: linear-gradient(135deg, var(--brand-1), var(--brand-2), var(--brand-3)); box-shadow: 0 16px 32px rgba(232,90,90,.14); } .fd-btn--primary:hover{ transform: translateY(-1px); filter: brightness(1.02); } .fd-btn--ghost{ color: var(--ink) !important; background: rgba(255,255,255,.86); border-color: rgba(0,0,0,.10); } .fd-btn--ghost:hover{ transform: translateY(-1px); } .fd-event{ border-radius: var(--radius-xl); overflow:hidden; border: 1px solid var(--border); background: var(--surface); backdrop-filter: blur(10px); box-shadow: var(--shadow); } .fd-event__media{ height: 190px; background: radial-gradient(600px 220px at 30% 25%, rgba(232,90,90,.38), transparent 60%), radial-gradient(520px 220px at 80% 70%, rgba(179,139,255,.32), transparent 65%), linear-gradient(135deg, rgba(0,0,0,.86), rgba(0,0,0,.30)); } .fd-event__content{ padding: 18px 18px 16px; } .fd-event__top{ display:flex; align-items:center; justify-content:space-between; gap: 10px; margin-bottom: 12px; } .fd-event__date{ color: rgb(0, 0, 0); font-weight: 900; font-size: 23px; white-space:nowrap; } .fd-event__name{ margin: 0 0 10px; font-size: 22px; font-weight: 900; color: var(--ink); } .fd-event__meta{ display:flex; flex-wrap:wrap; gap: 10px; margin-bottom: 12px; } .fd-event__desc{ margin: 0 0 14px; color: rgba(17,17,17,.74); } .fd-event__actions{ display:flex; gap: 10px; flex-wrap:wrap; } /* Timeline */ .fd-events__list{ position:relative; padding-left: 22px; } .fd-events__list::before{ content:""; position:absolute; left: 9px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, rgba(232,90,90,.55), rgba(179,139,255,.55)); border-radius: 999px; } .fd-event-item{ position:relative; display:grid; grid-template-columns: 20px 1fr; gap: 14px; margin-bottom: 16px; } .fd-event-item__dot{ width: 18px; height: 18px; border-radius: 999px; background: #fff; border: 3px solid rgba(232,90,90,.55); box-shadow: 0 10px 20px rgba(0,0,0,.10); margin-top: 14px; } .fd-event-item__card{ border-radius: var(--radius-lg); background: var(--surface); backdrop-filter: blur(10px); border: 1px solid var(--border); box-shadow: var(--shadow-soft); padding: 14px 14px 12px; transition: transform .18s ease, box-shadow .18s ease; } .fd-event-item__card:hover{ transform: translateY(-2px); box-shadow: var(--shadow); } .fd-event-item__top{ display:flex; align-items:center; justify-content:space-between; gap: 10px; margin-bottom: 8px; } .fd-event-item__top time{ font-weight: 900; font-size: 22px; color: rgb(17, 17, 17); white-space:nowrap; } .fd-event-item__card h4{ margin: 0 0 6px; font-size: 18px; font-weight: 900; } .fd-event-item__card p{ margin: 0 0 10px; color: rgba(17,17,17,.72); line-height: 1.6; } .fd-event-item__footer{ display:flex; align-items:center; justify-content:space-between; gap: 10px; flex-wrap:wrap; } .fd-mini{ font-size: 12.5px; color: rgba(17,17,17,.60); font-weight: 900; display:inline-flex; align-items:center; gap: 8px; } .fd-link{ font-weight: 900; color: var(--ink) !important; } .fd-link:hover{ color: var(--brand-1) !important; } @media (max-width: 575px){ .fd-events{ padding: 64px 0; } .fd-event__media{ height: 150px; } .fd-event__media--img{ height: 180px; } .fd-events__list{ padding-left: 18px; } .fd-event__top, .fd-event-item__top{ flex-direction: column; align-items: flex-start; } .fd-event__date, .fd-event-item__top time{ font-size: 18px; white-space: normal; line-height: 1.25; } .fd-event__name{ font-size: 20px; } .fd-pill{ font-size: 12px; padding: 7px 9px; } } /* ===================================================================== FIN SECTION Ã‰VÃ‰NEMENTS ===================================================================== */ /* ===================================================================== DÃ‰BUT SECTION ANIMATRICES (slider) ===================================================================== */ .trainers{ width: 100%; float:left; padding: 84px 0; background: linear-gradient(180deg, rgba(232,90,90,0.06), rgba(179,139,255,0.04)); border-top: 1px solid rgba(0,0,0,.06); border-bottom: 1px solid rgba(0,0,0,.06); } .trainers .section_head{ max-width: 760px; margin: 0 auto 28px; text-align:center; } .trainers .section_title{ font-size: clamp(26px, 3.2vw, 44px); font-weight: 900; text-transform: uppercase; } .trainers .section_subtitle{ margin: 10px 0 0; font-size: 16px; color: rgba(17,17,17,.72); } .trainer_slider{ --gap: 18px; --radius: 22px; --per-page: 1; position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; } @media (min-width: 700px){ .trainer_slider{ --per-page: 2; } } @media (min-width: 1400px){ .trainer_slider{ --per-page: 3; } } .ts_viewport{ overflow:hidden; border-radius: var(--radius); outline:none; perspective: 1200px; } .ts_viewport:focus{ box-shadow: 0 0 0 3px rgba(179,139,255,.24); } .ts_track{ display:flex; gap: var(--gap); padding: 8px; transition: transform 720ms cubic-bezier(0.2,0.8,0.2,1); will-change: transform; } .trainer_card{ flex: 0 0 calc((100% - (var(--gap) * (var(--per-page) - 1))) / var(--per-page)); background: rgba(255,255,255,.92); border-radius: var(--radius-xl); padding: 18px 18px 16px; box-shadow: var(--shadow-soft); border: 1px solid var(--border); transform-style: preserve-3d; transform: translateZ(0); transition: transform 720ms cubic-bezier(0.2,0.8,0.2,1), box-shadow 720ms ease; height: 100%; display:flex; flex-direction: column; } .trainer_card:hover{ transform: translateY(-2px); box-shadow: 0 18px 34px rgba(0,0,0,.14); } @media (prefers-reduced-motion: reduce){ .cs_track, .ts_track, .course_card, .trainer_card{ transition: none !important; } } .trainer_top{ display:flex; gap: 14px; align-items:center; } .trainer_avatar{ width: 78px; height: 78px; border-radius: 999px; overflow:hidden; flex: 0 0 auto; border: 3px solid rgba(179,139,255,.26); background: #f6f6f6; } .trainer_avatar img{ width:100%; height:100%; object-fit:cover; display:block; } .trainer_name{ margin:0; font-size: 20px; font-weight: 900; color: var(--ink); line-height: 1.1; } .trainer_tag{ margin: 6px 0 0; font-size: 13px; color: var(--brand-1); font-weight: 900; } .trainer_desc{ margin: 14px 0 16px; color: rgba(17,17,17,.76); font-size: 14.5px; line-height: 1.65; flex: 1 1 auto; } .trainer_actions{ display:flex; gap: 10px; flex-wrap: wrap; margin-top: auto; } .trainer_btn{ display:inline-flex; align-items:center; justify-content:center; padding: 10px 14px; border-radius: 999px; font-weight: 900; font-size: 13px; text-transform: uppercase; letter-spacing: 0.4px; background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); color:#fff !important; border: 1px solid transparent; transition: transform .16s ease, box-shadow .16s ease; } .trainer_btn:hover{ transform: translateY(-1px); box-shadow: 0 12px 24px rgba(232,90,90,.18); } .trainer_btn--ghost{ background: rgba(255,255,255,.86); color: var(--ink) !important; border: 1px solid rgba(0,0,0,.14); } .trainer_btn--ghost:hover{ box-shadow: 0 12px 24px rgba(0,0,0,.10); } .trainer_btn--courses{ background: linear-gradient(135deg, #ff6b3d, #ff2f7d); color: #fff !important; border: 1px solid rgba(255,255,255,.45); box-shadow: 0 12px 24px rgba(255,47,125,.28); } .trainer_btn--courses:hover{ transform: translateY(-2px); box-shadow: 0 16px 28px rgba(255,47,125,.34); filter: saturate(1.08); } .trainer_btn--courses:active{ transform: translateY(0) scale(.99); } .ts_btn{ width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(0,0,0,.12); background: rgba(17,17,17,.92); color: #fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition: transform 160ms ease, opacity 160ms ease; } .ts_btn span{ font-size: 28px; line-height: 1; } .ts_btn:hover{ transform: translateY(-1px); opacity: .98; } .ts_btn:disabled{ opacity: .35; cursor:not-allowed; transform:none; } .ts_dots{ width:100%; display:flex; justify-content:center; gap: 8px; margin-top: 14px; } .ts_dot{ width: 10px; height: 10px; border-radius: 999px; border: 1px solid rgba(0,0,0,.25); background: rgba(0,0,0,.08); cursor:pointer; } .ts_dot.is-active{ background: rgba(179,139,255,1); border-color: rgba(179,139,255,1); } @media (max-width: 480px){ .trainer_slider{ grid-template-columns: 1fr; gap: 10px; } .ts_btn{ width: 48px; height: 48px; margin: 0 auto; } .trainer_slider .ts_prev{ order: 2; } .trainer_slider .ts_viewport{ order: 1; } .trainer_slider .ts_next{ order: 3; } .trainer_top{ align-items: flex-start; } .trainer_meta{ min-width: 0; } .trainer_name{ font-size: 18px; } .trainer_desc{ font-size: 14px; } } /* ===================================================================== FIN SECTION ANIMATRICES ===================================================================== */ /* ===================================================================== DÃ‰BUT CONTACT ===================================================================== */ .contact_section{ padding: 84px 0; } .contact_taital{ text-align:center; font-size: clamp(26px, 3.2vw, 44px); font-weight: 900; text-transform: uppercase; } .contact_main{ width: min(720px, 100%); margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow); padding: 24px; backdrop-filter: blur(10px); } .form-group{ margin-bottom: 16px; } .email-bt, .massage-bt{ width: 100%; font-size: 16px; padding: 12px 16px; background: rgba(255,255,255,.9) !important; border: 1px solid rgba(0,0,0,.12) !important; border-radius: 14px; } .massage-bt{ min-height: 130px; resize: vertical; } .send_bt{ padding-top: 6px; } .send_bt button{ width: 100%; border: 0; height: 48px; border-radius: 999px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; color: #fff; background: linear-gradient(135deg, var(--brand-1), var(--brand-2), var(--brand-3)); box-shadow: 0 16px 32px rgba(232,90,90,.14); transition: transform .16s ease, filter .16s ease; } .send_bt button:hover{ transform: translateY(-1px); filter: brightness(1.02); } /* =============================== Bouton Envoyer â€“ Style Premium =============================== */ .fd-submit{ position: relative; width: 100%; height: 54px; border: 0; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: 'Poppins', sans-serif; font-weight: 900; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: linear-gradient( 135deg, var(--brand-1), var(--brand-2), var(--brand-3) ); box-shadow: 0 16px 32px rgba(232,90,90,.25), inset 0 -2px 0 rgba(0,0,0,.15); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; overflow: hidden; } /* Glow subtil */ .fd-submit::before{ content:""; position:absolute; inset:-40%; background: radial-gradient( circle at 30% 30%, rgba(255,255,255,.35), transparent 60% ); opacity: .45; transition: opacity .3s ease; } /* Hover */ .fd-submit:hover{ transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 22px 46px rgba(232,90,90,.35), inset 0 -2px 0 rgba(0,0,0,.18); } .fd-submit:hover::before{ opacity: .75; } /* Click */ .fd-submit:active{ transform: translateY(0) scale(.98); } /* Texte & icÃ´ne */ .fd-submit__text{ position: relative; z-index: 1; } .fd-submit__icon{ position: relative; z-index: 1; font-size: 16px; transition: transform .25s ease; } .fd-submit:hover .fd-submit__icon{ transform: translateX(4px) rotate(-6deg); } /* AccessibilitÃ© */ .fd-submit:focus-visible{ outline: none; box-shadow: 0 0 0 4px rgba(232,90,90,.35), 0 22px 46px rgba(232,90,90,.35); } .fd-submit.is-loading{ pointer-events: none; filter: saturate(.85); } .fd-submit.is-loading::after{ content: ""; position: absolute; right: 18px; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: fdSpin .8s linear infinite; } .contact_feedback{ margin-top: 14px; padding: 12px 14px; border-radius: 12px; font-weight: 600; border: 1px solid transparent; animation: fdFeedbackIn .25s ease both; } .contact_feedback.is-loading{ background: rgba(46, 137, 255, .12); border-color: rgba(46, 137, 255, .3); color: #0f4a90; } .contact_feedback.is-success{ background: rgba(12, 166, 120, .12); border-color: rgba(12, 166, 120, .32); color: #0b5a43; } .contact_feedback.is-error{ background: rgba(232, 90, 90, .12); border-color: rgba(232, 90, 90, .35); color: #8f2323; } @keyframes fdSpin{ to{ transform: rotate(360deg); } } @keyframes fdFeedbackIn{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: translateY(0); } } /* Mobile */ @media (max-width: 480px){ .fd-submit{ height: 50px; font-size: 13px; } } /* ===================================================================== FIN CONTACT ===================================================================== */ /* ===================================================================== DÃ‰BUT FOOTER ===================================================================== */ .footer_section{ padding: 18px 0 0; } .location_bg{ background: rgba(17,17,17,.92); color: #fff; } .location_main ul{ margin:0; padding: 18px 0; display:flex; justify-content:center; gap: 22px; flex-wrap:wrap; } .location_main li{ font-size: 15px; } .location_main a{ color:#fff; } .location_main a:hover{ color: var(--brand-3); } .location_main img{ margin-right: 8px; } .copyright_section{ background: linear-gradient(135deg, var(--brand-1), var(--brand-2), var(--brand-4)); } .copyright_text{ color:#fff; text-align:center; margin: 0; padding: 16px 0; font-size: 14px; } /* ===================================================================== FIN FOOTER ===================================================================== */