/* ========================================================= Nava Widgets — base (fond de page en mode RED, transitions) ========================================================= */ /* Le widget Reformer ajoute cette classe au quand le toggle est sur RED. Seul le fond de page change : header, footer et hero gardent leur propre fond. Pour faire réagir un autre élément : body.nava-red-active .mon-element { … } */ /* ---- Mode RED : fond garanti (bat le dégradé du kit Elementor et tout ancien style résiduel) ---- */ body.nava-red-active{background-color:#080304 !important;background-image:none !important;transition:background-color .6s ease;} .nava-red-dark{background-color:#080304 !important;background-image:none !important;transition:background-color .6s ease;} .rfr.rfr--red{background:#080304 !important;background-image:none !important;} .rfr:not(.rfr--red){background:#FFEFEF !important;} /* ---- BLINDAGE contre le theme / kit Elementor (meme contenu que nava-fix.css) ---- */ /* ---------- RESETS COMMUNS ---------- */ .rfr, .rrm, .rx { font-family: 'Outfit', sans-serif !important; } .rfr *, .rrm *, .rx * { box-sizing: border-box !important; } .rfr h2, .rfr h3, .rrm h2, .rrm h3, .rx h2, .rx h3 { font-family: 'Outfit', sans-serif !important; color: inherit !important; margin: 0 !important; padding: 0 !important; letter-spacing: -.01em !important; text-transform: uppercase !important; } .rfr p, .rrm p, .rx p { margin: 0 !important; padding: 0 !important; font-family: 'Outfit', sans-serif !important; } .rfr span, .rrm span, .rx span, .rfr li, .rrm li, .rx li, .rfr b, .rrm b, .rx b, .rfr button, .rrm button, .rx button { font-family: 'Outfit', sans-serif !important; font-size: inherit; line-height: inherit; } .rfr .rfr-benefit__t { font-size: .98rem !important; font-weight: 400 !important; line-height: 1.45 !important; color: var(--ink) !important; } .rrm .rrm-benefit__t { font-size: .94rem !important; font-weight: 400 !important; line-height: 1.35 !important; color: #f6f2f2 !important; } .rfr .rfr-hint { font-size: .95rem !important; font-weight: 300 !important; color: var(--muted) !important; } .rfr .rfr-hint span { font-size: .95rem !important; } .rfr .rfr-hint b { color: var(--ink) !important; font-weight: 500 !important; } .rrm .rrm-meter__label { font-size: .66rem !important; text-transform: uppercase !important; letter-spacing: .15em !important; color: #b6a2a4 !important; } .rrm .rrm-meter__val { font-size: .82rem !important; font-weight: 600 !important; color: #ff4a4a !important; letter-spacing: .02em !important; } .rrm .rrm-bars span { display: inline-block !important; width: 22px !important; height: 5px !important; padding: 0 !important; border-radius: 3px !important; font-size: 0 !important; } .rfr .rfr-vs__badge, .rrm .rrm-vs__badge, .rx .rx-card__badge { display: inline-block !important; font-size: .64rem !important; font-weight: 600 !important; letter-spacing: .18em !important; text-transform: uppercase !important; line-height: 1.3 !important; padding: 5px 12px !important; border-radius: 999px !important; } .rx .rx-card__badge { font-size: .66rem !important; } .rfr .rfr-vs__here, .rrm .rrm-vs__here { font-size: .74rem !important; letter-spacing: .14em !important; text-transform: uppercase !important; font-weight: 600 !important; } .rfr .rfr-vs__here { color: var(--accent) !important; } .rrm .rrm-vs__here { color: #ff2626 !important; } .rfr .rfr-toggle__opt span, .rfr .rfr-btn span, .rrm .rrm-btn span, .rx .rx-card__btn span { font-size: inherit !important; } .rfr ul, .rrm ul, .rx ul { list-style: none !important; margin: 0 !important; padding: 0 !important; } .rfr li, .rrm li, .rx li { list-style: none !important; margin: 0 !important; padding: 0 !important; } .rfr a, .rrm a, .rx a { text-decoration: none !important; box-shadow: none !important; } .rfr a:hover, .rrm a:hover, .rx a:hover, .rfr a:focus, .rrm a:focus, .rx a:focus { text-decoration: none !important; } .rfr svg, .rrm svg, .rx svg { display: inline-block !important; vertical-align: middle !important; } .rfr img, .rrm img, .rx img, .rfr video, .rrm video, .rx video { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* Titres — tailles/couleurs (le kit Elementor force souvent color + font-family sur h2/h3) */ .rfr .rfr-title, .rrm .rrm-title, .rx .rx__title { font-size: clamp(2rem, 6vw, 3.4rem) !important; font-weight: 800 !important; line-height: 1.05 !important; color: var(--ink) !important; margin-bottom: 14px !important; } .rx .rx__title { font-size: clamp(2.1rem, 6vw, 3.7rem) !important; margin-bottom: 22px !important; } .rrm .rrm-title { font-size: clamp(2rem, 6vw, 3.6rem) !important; margin-bottom: 16px !important; } .rfr .rfr-title b, .rfr .rfr-cta__title b { color: var(--accent) !important; font-weight: 800 !important; } .rrm .rrm-cta__title b { color: var(--red) !important; font-weight: 800 !important; } .rfr .rfr-title i, .rfr .rfr-vs__name i, .rrm .rrm-title i, .rrm .rrm-vs__name i, .rx .rx__title i { font-family: 'Playfair Display', serif !important; font-style: italic !important; font-weight: 500 !important; text-transform: none !important; } .rfr .rfr-title i, .rfr .rfr-vs__name i { color: var(--accent) !important; } .rrm .rrm-title i, .rrm .rrm-vs__name i { color: #ff2626 !important; } .rx .rx__title i, .rx .rx__title b { color: var(--accent) !important; } .rfr .rfr-course__name, .rrm .rrm-course__name { font-size: 1.25rem !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: .01em !important; color: var(--ink) !important; } .rrm .rrm-course__name { font-size: 1.35rem !important; } .rx .rx-card__name { font-size: clamp(1.4rem, 2.6vw, 1.7rem) !important; font-weight: 700 !important; letter-spacing: .01em !important; color: var(--ink) !important; } .rfr .rfr-vs__name, .rrm .rrm-vs__name { font-size: clamp(1.25rem, 2.4vw, 1.5rem) !important; font-weight: 700 !important; color: var(--ink) !important; } .rfr .rfr-info__title { font-size: clamp(1.1rem, 2.2vw, 1.4rem) !important; font-weight: 700 !important; line-height: 1.15 !important; color: var(--ink) !important; } .rfr .rfr-cta__title, .rrm .rrm-cta__title { font-size: clamp(1.7rem, 5vw, 2.8rem) !important; font-weight: 800 !important; line-height: 1.05 !important; color: var(--ink) !important; margin-bottom: 10px !important; } /* Surtitres */ .rfr .rfr-eyebrow, .rfr .rfr-toggle-eyebrow, .rrm .rrm-eyebrow, .rx .rx__eyebrow { font-size: clamp(.72rem, 1.6vw, .82rem) !important; font-weight: 600 !important; letter-spacing: .32em !important; text-transform: uppercase !important; line-height: 1.4 !important; margin-bottom: 14px !important; } .rfr .rfr-eyebrow, .rfr .rfr-toggle-eyebrow { color: var(--accent) !important; } .rrm .rrm-eyebrow { color: #ff2626 !important; } .rx .rx__eyebrow { color: var(--accent) !important; } .rfr .rfr-eyebrow { margin-bottom: 14px !important; } /* Paragraphes */ .rfr .rfr-lead, .rrm .rrm-text { color: var(--muted) !important; font-weight: 300 !important; font-size: clamp(1rem, 2vw, 1.1rem) !important; line-height: 1.7 !important; margin-top: 8px !important; } .rrm .rrm-text { margin-top: 14px !important; } .rfr .rfr-lead b, .rrm .rrm-text b { color: var(--ink) !important; font-weight: 500 !important; } .rfr .rfr-concept, .rrm .rrm-lead, .rx .rx__concept { font-family: 'Playfair Display', serif !important; font-style: italic !important; font-weight: 500 !important; line-height: 1.5 !important; } .rfr .rfr-concept { font-size: clamp(1rem, 2.2vw, 1.2rem) !important; margin: 18px auto 0 !important; max-width: 600px !important; color: var(--quote) !important; } .rrm .rrm-lead { font-size: clamp(1.1rem, 2.4vw, 1.4rem) !important; color: #e9dede !important; max-width: 600px !important; } .rx .rx__concept { font-size: clamp(1.15rem, 2.6vw, 1.5rem) !important; color: var(--quote) !important; margin: 0 auto clamp(40px, 6vw, 60px) !important; max-width: 620px !important; } .rfr .rfr-course__desc, .rrm .rrm-course__desc, .rx .rx-card__desc { color: var(--muted) !important; font-weight: 300 !important; font-size: .92rem !important; line-height: 1.6 !important; } .rx .rx-card__desc { font-size: .96rem !important; color: var(--muted) !important; } .rfr .rfr-info__text { color: var(--muted) !important; font-weight: 300 !important; font-size: clamp(.95rem, 1.8vw, 1.04rem) !important; line-height: 1.7 !important; } .rfr .rfr-info__text b { color: var(--ink) !important; font-weight: 600 !important; } .rfr .rfr-cta__sub { color: var(--muted) !important; font-weight: 300 !important; line-height: 1.6 !important; margin: 0 auto 26px !important; max-width: 460px !important; } .rfr .rfr-cta__tag, .rrm .rrm-cta__tag, .rx .rx__tagline { font-weight: 600 !important; letter-spacing: .4em !important; text-transform: uppercase !important; } .rfr .rfr-cta__tag { color: var(--accent) !important; margin-bottom: 18px !important; } .rrm .rrm-cta__tag { color: #ff2626 !important; margin-bottom: 24px !important; } .rx .rx__tagline { color: var(--accent) !important; margin-top: clamp(44px, 6vw, 64px) !important; } .rfr .rfr-course__plan { font-size: .72rem !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: var(--muted) !important; line-height: 1.4 !important; } .rfr .rfr-course__plan b { display: block !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--ink) !important; font-weight: 500 !important; font-size: .84rem !important; } .rrm .rrm-course__tag { font-family: 'Playfair Display', serif !important; font-style: italic !important; font-size: 1rem !important; color: #ff4a4a !important; margin-top: -6px !important; } .rfr .rfr-sub { font-size: clamp(.72rem, 1.6vw, .8rem) !important; font-weight: 600 !important; letter-spacing: .22em !important; text-transform: uppercase !important; color: var(--accent) !important; margin-bottom: 6px !important; } .rfr .rfr-sub__note { color: var(--muted) !important; font-weight: 300 !important; font-size: .95rem !important; margin-bottom: 4px !important; } .rx .rx-card__sub { margin: -10px 0 0 !important; font-size: .7rem !important; font-weight: 600 !important; letter-spacing: .2em !important; text-transform: uppercase !important; color: var(--muted) !important; } .rx .rx-card--red .rx-card__sub { color: var(--accent-bright) !important; } .rx .rx-card__label { font-size: .68rem !important; text-transform: uppercase !important; letter-spacing: .18em !important; color: var(--muted) !important; margin: 2px 0 -6px !important; } /* Listes à puces des cartes */ .rfr .rfr-vs__list li, .rrm .rrm-vs__list li, .rx .rx-card__courses li { display: flex !important; align-items: center !important; gap: 9px !important; font-size: .92rem !important; font-weight: 300 !important; line-height: 1.4 !important; } .rfr .rfr-vs__list li, .rrm .rrm-vs__list li { color: var(--ink) !important; } .rx .rx-card__courses li { color: var(--li) !important; } /* Pastilles / tags */ .rfr .rfr-lvl, .rfr .rfr-course__meta span, .rfr .rfr-tags span, .rrm .rrm-course__meta span, .rrm .rrm-tags span, .rx .rx-card__meta span { display: inline-block !important; font-size: .72rem !important; font-weight: 500 !important; letter-spacing: .03em !important; line-height: 1.3 !important; padding: 5px 11px !important; border-radius: 999px !important; text-transform: none !important; } /* ---------- TOGGLE Classique / RED ---------- */ .rfr .rfr-toggle-wrap { text-align: center !important; } .rfr .rfr-toggle { display: inline-flex !important; align-items: center !important; gap: 4px !important; padding: 5px !important; margin: 0 !important; border-radius: 999px !important; background: var(--glass) !important; border: 1px solid var(--gborder) !important; -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important; box-shadow: none !important; } .rfr .rfr-toggle__opt, .rfr .rfr-toggle__opt:hover, .rfr .rfr-toggle__opt:focus { -webkit-appearance: none !important; appearance: none !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; width: auto !important; height: auto !important; min-height: 0 !important; min-width: 0 !important; margin: 0 !important; padding: 10px 22px !important; border: 0 !important; border-radius: 999px !important; outline: none !important; background: transparent !important; color: var(--muted) !important; box-shadow: none !important; text-shadow: none !important; font-family: 'Outfit', sans-serif !important; font-weight: 600 !important; font-size: .86rem !important; line-height: 1.2 !important; letter-spacing: .02em !important; text-transform: none !important; cursor: pointer !important; transition: color .3s ease !important; } .rfr .rfr-toggle__opt.is-on, .rfr .rfr-toggle__opt.is-on:hover, .rfr .rfr-toggle__opt.is-on:focus { color: #fff !important; background: var(--accent-grad) !important; box-shadow: 0 8px 20px -8px var(--sh) !important; } .rfr .rfr-dot { display: inline-block !important; width: 8px !important; height: 8px !important; border-radius: 50% !important; background: #ff2626 !important; box-shadow: 0 0 8px rgba(255,40,40,.9) !important; } .rfr .rfr-toggle__opt.is-on .rfr-dot { background: #fff !important; box-shadow: 0 0 10px rgba(255,255,255,.9) !important; } /* ---------- BOUTONS ---------- */ /* Reformer */ .rfr .rfr-btn, .rfr .rfr-btn:hover, .rfr .rfr-btn:focus, .rfr .rfr-btn:visited { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important; width: auto !important; min-height: 0 !important; margin: 0 !important; padding: 13px 26px !important; border: 0 !important; border-radius: 999px !important; color: #fff !important; background: var(--accent-grad) !important; font-family: 'Outfit', sans-serif !important; font-weight: 600 !important; font-size: .92rem !important; line-height: 1.2 !important; letter-spacing: .02em !important; text-transform: none !important; box-shadow: 0 10px 26px -8px var(--sh), 0 0 0 1px rgba(255,255,255,.24) inset !important; text-decoration: none !important; } .rfr .rfr-btn:hover { transform: translateY(-2px) !important; box-shadow: 0 16px 34px -8px var(--sh), 0 0 0 1px rgba(255,255,255,.32) inset !important; } .rfr .rfr-btn--sm, .rfr .rfr-btn--sm:hover { padding: 10px 20px !important; font-size: .86rem !important; } .rfr .rfr-course__btn { margin-top: auto !important; } .rfr .rfr-btn--ghost, .rfr .rfr-btn--ghost:visited { background: transparent !important; color: var(--ink) !important; border: 1.5px solid rgba(255,255,255,.35) !important; box-shadow: none !important; } .rfr .rfr-btn--ghost:hover { background: #fff !important; color: #0a0305 !important; box-shadow: none !important; } .rfr .rfr-btn svg { width: 16px !important; height: 16px !important; } .rfr .rfr-link, .rfr .rfr-link:hover, .rfr .rfr-link:focus { -webkit-appearance: none !important; appearance: none !important; display: inline-flex !important; align-items: center !important; gap: 7px !important; width: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; color: var(--accent) !important; font-family: 'Outfit', sans-serif !important; font-weight: 600 !important; font-size: .9rem !important; line-height: 1.2 !important; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer !important; } .rfr .rfr-link:hover { gap: 11px !important; } .rfr .rfr-link svg { width: 15px !important; height: 15px !important; } /* Red Room (bouton verre rouge lumineux) */ .rrm .rrm-btn, .rrm .rrm-btn:visited, .rrm .rrm-btn:focus { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important; width: auto !important; min-height: 0 !important; margin: 0 !important; padding: 13px 26px !important; border-radius: 999px !important; color: #fff !important; background: rgba(255,30,30,.14) !important; border: 1px solid rgba(255,70,70,.4) !important; -webkit-backdrop-filter: blur(12px) saturate(150%) !important; backdrop-filter: blur(12px) saturate(150%) !important; font-family: 'Outfit', sans-serif !important; font-weight: 600 !important; font-size: .92rem !important; line-height: 1.2 !important; letter-spacing: 0 !important; text-transform: none !important; box-shadow: 0 0 22px rgba(255,30,30,.24), inset 0 1px 0 rgba(255,160,160,.2) !important; text-decoration: none !important; } .rrm .rrm-btn:hover { transform: translateY(-2px) scale(1.02) !important; background: rgba(255,30,30,.22) !important; border-color: rgba(255,90,90,.7) !important; box-shadow: 0 16px 40px rgba(220,8,8,.45), 0 0 38px rgba(255,40,40,.45), inset 0 0 0 1px rgba(255,120,120,.4) !important; color: #fff !important; } .rrm .rrm-btn--sm, .rrm .rrm-btn--sm:hover { padding: 11px 22px !important; font-size: .88rem !important; } .rrm .rrm-course__btn { margin-top: auto !important; } .rrm .rrm-btn--ghost, .rrm .rrm-btn--ghost:visited { background: transparent !important; border: 1.5px solid rgba(255,255,255,.35) !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .rrm .rrm-btn--ghost:hover { background: #fff !important; color: #0a0305 !important; border-color: #fff !important; box-shadow: none !important; transform: translateY(-2px) !important; } .rrm .rrm-btn svg { width: 16px !important; height: 16px !important; } /* Chooser */ .rx .rx-card__btn, .rx .rx-card__btn:visited, .rx .rx-card__btn:focus { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: auto !important; min-height: 0 !important; margin-top: auto !important; padding: 13px 22px !important; border-radius: 999px !important; font-family: 'Outfit', sans-serif !important; font-weight: 600 !important; font-size: .9rem !important; line-height: 1.2 !important; letter-spacing: 0 !important; text-transform: none !important; text-decoration: none !important; } .rx .rx-card--red .rx-card__btn, .rx .rx-card--red .rx-card__btn:visited { color: #fff !important; border: 0 !important; background: var(--accent-grad) !important; box-shadow: 0 12px 26px -10px var(--sh) !important; } .rx .rx-card--red .rx-card__btn:hover { transform: translateY(-2px) !important; box-shadow: 0 18px 34px -10px var(--sh) !important; color: #fff !important; } .rx .rx-card--neutral .rx-card__btn, .rx .rx-card--neutral .rx-card__btn:visited { color: var(--nbtn-c) !important; background: transparent !important; border: 1.5px solid var(--nbtn-bd) !important; box-shadow: none !important; } .rx .rx-card--neutral .rx-card__btn:hover { background: var(--nbtn-hover-bg) !important; color: var(--nbtn-hover-c) !important; transform: translateY(-2px) !important; } .rx .rx-card__btn svg { width: 15px !important; height: 15px !important; } /* ---------- ICÔNES ---------- */ .rfr .rfr-course__ic svg, .rrm .rrm-course__ic svg { width: 27px !important; height: 27px !important; } .rrm .rrm-course__ic svg { width: 29px !important; height: 29px !important; } .rfr .rfr-ic svg { width: 23px !important; height: 23px !important; } .rrm .rrm-ic svg { width: 21px !important; height: 21px !important; } .rfr .rfr-course__ic, .rrm .rrm-course__ic { color: #fff !important; } /* ---------- MÉDIAS (image / vidéo dans les cartes) ---------- */ .rfr .rfr-course__media img, .rfr .rfr-course__media video, .rrm .rrm-course__media img, .rrm .rrm-course__media video, .rx .rx-card__media img, .rx .rx-card__media video { display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; margin: 0 !important; } /* ---- Mode RED : fond garanti (bat le dégradé du kit Elementor et tout ancien style résiduel) ---- */ body.nava-red-active{background-color:#080304 !important;background-image:none !important;transition:background-color .6s ease;} .nava-red-dark{background-color:#080304 !important;background-image:none !important;transition:background-color .6s ease;} .rfr.rfr--red{background:#080304 !important;background-image:none !important;} .rfr:not(.rfr--red){background:#FFEFEF !important;} /* ---- Chooser : photos sous la phrase ---- */ .rx .rx__photos { display: grid !important; grid-template-columns: repeat(var(--n,3), minmax(0,1fr)) !important; gap: clamp(10px,2vw,18px) !important; } .rx .rx__photo img, .rx .rx__photo video { display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; margin: 0 !important; border-radius: 0 !important; }