/* ========================================================================== RAYAN GORI — THEME STUDIO v1.6.3 Interface unifiée claire / sombre pour rayangori.ch ========================================================================== */ /* CLAIR — palette validée */ :is(html[data-rg-theme="light"],html[data-rg-theme="auto-light"]) { color-scheme: light; --rg-bg:#FFFFFF; --rg-bg-soft:#F7F7F4; --rg-surface:#FFFFFF; --rg-surface-2:#EAF4F7; --rg-surface-glass:rgba(255,255,255,.98); --rg-text:#25343A; --rg-muted:#607984; --rg-primary:#5B9DB3; --rg-primary-hover:#4B8CA3; --rg-deep:#3F7F95; --rg-light:#EAF4F7; --rg-border:rgba(63,127,149,.18); --rg-border-strong:rgba(63,127,149,.34); --rg-shadow-rgb:37,52,58; --rg-primary-rgb:91,157,179; --rg-deep-rgb:63,127,149; --rg-on-brand:#FFFFFF; } /* SOMBRE — palette issue de la maquette sombre validée */ :is(html[data-rg-theme="dark"],html[data-rg-theme="auto-dark"]) { color-scheme: dark; --rg-bg:#18262C; --rg-bg-soft:#1C2E36; --rg-surface:#21343C; --rg-surface-2:#28434E; --rg-surface-glass:rgba(24,38,44,.98); --rg-text:#E6EEF2; --rg-muted:#A7BAC3; --rg-primary:#72B3C7; --rg-primary-hover:#86C1D2; --rg-deep:#4D8EA5; --rg-light:#A9CBD6; --rg-border:rgba(169,203,214,.17); --rg-border-strong:rgba(169,203,214,.30); --rg-shadow-rgb:0,0,0; --rg-primary-rgb:114,179,199; --rg-deep-rgb:77,142,165; --rg-on-brand:#FFFFFF; } html[data-rg-theme] body, html[data-rg-theme] #page, html[data-rg-theme] .site, html[data-rg-theme] .site-content, html[data-rg-theme] main { background-color:var(--rg-bg) !important; color:var(--rg-text); } html[data-rg-theme] body { transition:background-color .2s ease,color .2s ease; } html[data-rg-theme] :is(h1,h2,h3,h4,h5,h6,p,li,label,legend,strong,small){color:inherit} html[data-rg-theme] a:not(.elementor-button):not(.rg-header-nav__item):not(.rg-bottom-nav__button):not(.rg-drawer-nav__link){color:var(--rg-deep)} :is(html[data-rg-theme="dark"],html[data-rg-theme="auto-dark"]) a:not(.elementor-button):not(.rg-header-nav__item):not(.rg-bottom-nav__button):not(.rg-drawer-nav__link){color:var(--rg-primary)} /* ========================================================================== HEADER — exactement la même logique visuelle que le footer ========================================================================== */ .rg-site-header{position:relative;z-index:99990;width:100%;isolation:isolate} .rg-site-header--sticky{position:sticky;top:0} body.admin-bar .rg-site-header--sticky{top:32px} /* Règles volontairement spécifiques + !important : Elementor/thème ne doit plus pouvoir laisser le header sombre lorsque le mode clair est actif. */ :is(html[data-rg-theme="light"],html[data-rg-theme="auto-light"]) .rg-site-header .rg-header-nav{ background:#FFFFFF !important; color:#25343A !important; border-bottom:1px solid rgba(63,127,149,.18) !important; box-shadow:0 7px 24px rgba(37,52,58,.08) !important; } :is(html[data-rg-theme="dark"],html[data-rg-theme="auto-dark"]) .rg-site-header .rg-header-nav{ background:#18262C !important; color:#E6EEF2 !important; border-bottom:1px solid rgba(169,203,214,.17) !important; box-shadow:0 8px 28px rgba(0,0,0,.22) !important; } .rg-header-nav{width:100%;-webkit-backdrop-filter:blur(16px) saturate(120%);backdrop-filter:blur(16px) saturate(120%)} .rg-header-nav__inner{width:min(100%,980px);margin:0 auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:7px max(10px,env(safe-area-inset-right)) 7px max(10px,env(safe-area-inset-left))} .rg-header-nav__item{position:relative;min-width:0;min-height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px 5px;border:1px solid transparent;border-radius:13px;color:var(--rg-muted)!important;background:transparent!important;text-decoration:none!important;-webkit-tap-highlight-color:transparent;transition:.18s ease} .rg-header-nav__item:not(:last-child)::after{content:"";position:absolute;top:18%;right:-4px;width:1px;height:64%;background:linear-gradient(transparent,var(--rg-border),transparent)} .rg-header-nav__icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--rg-deep)} :is(html[data-rg-theme="dark"],html[data-rg-theme="auto-dark"]) .rg-header-nav__icon{color:var(--rg-primary)} .rg-header-nav__icon svg{display:block!important;width:24px!important;height:24px!important;max-width:24px!important;max-height:24px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.65!important;stroke-linecap:round!important;stroke-linejoin:round!important} .rg-header-nav__icon svg *{fill:none!important;stroke:currentColor!important;vector-effect:non-scaling-stroke} .rg-header-nav__label{display:block;width:100%;min-width:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:11.5px;font-weight:600;line-height:1.1;letter-spacing:-.01em;text-align:center;overflow-wrap:anywhere} .rg-header-nav__item:hover,.rg-header-nav__item:focus-visible{color:var(--rg-deep)!important;background:rgba(var(--rg-primary-rgb),.09)!important;border-color:rgba(var(--rg-primary-rgb),.14)!important} :is(html[data-rg-theme="dark"],html[data-rg-theme="auto-dark"]) .rg-header-nav__item:hover,:is(html[data-rg-theme="dark"],html[data-rg-theme="auto-dark"]) .rg-header-nav__item:focus-visible{color:var(--rg-text)!important} .rg-header-nav__item.is-active{color:#fff!important;background:linear-gradient(145deg,var(--rg-primary) 0%,var(--rg-deep) 100%)!important;border-color:rgba(var(--rg-primary-rgb),.40)!important;box-shadow:0 5px 15px rgba(var(--rg-deep-rgb),.20)!important} .rg-header-nav__item.is-active .rg-header-nav__icon{color:#fff!important} .rg-header-nav__item.is-active::after,.rg-header-nav__item:has(+ .is-active)::after{opacity:0} .rg-header-nav__item:focus-visible{outline:3px solid rgba(var(--rg-primary-rgb),.25);outline-offset:2px} /* Bouton temporaire thème */ .rg-theme-quick-toggle{all:unset;box-sizing:border-box;position:fixed;z-index:100000;top:86px;right:max(14px,env(safe-area-inset-right));width:42px;height:42px;display:flex;align-items:center;justify-content:center;color:var(--rg-deep);background:var(--rg-surface-glass);border:1px solid var(--rg-border-strong);border-radius:999px;box-shadow:0 8px 24px rgba(var(--rg-shadow-rgb),.14);cursor:pointer;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} body.admin-bar .rg-theme-quick-toggle{top:118px} .rg-theme-quick-toggle__icon{width:22px;height:22px;display:none} .rg-theme-quick-toggle__icon svg{display:block;width:100%!important;height:100%!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important} :is(html[data-rg-theme="light"],html[data-rg-theme="auto-light"]) .rg-theme-quick-toggle__moon{display:block} :is(html[data-rg-theme="dark"],html[data-rg-theme="auto-dark"]) .rg-theme-quick-toggle__sun{display:block} :is(html[data-rg-theme="dark"],html[data-rg-theme="auto-dark"]) .rg-theme-quick-toggle{color:var(--rg-primary)} .rg-theme-quick-toggle:focus-visible{outline:3px solid rgba(var(--rg-primary-rgb),.25);outline-offset:2px} .rg-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} @media(max-width:767px){ body.admin-bar .rg-site-header--sticky{top:46px} .rg-header-nav__inner{width:100%;gap:2px;padding:5px max(3px,env(safe-area-inset-right)) 5px max(3px,env(safe-area-inset-left))} .rg-header-nav__item{min-height:58px;padding:5px 2px;border-radius:11px;gap:3px} .rg-header-nav__icon{width:22px;height:22px} .rg-header-nav__icon svg{width:22px!important;height:22px!important;max-width:22px!important;max-height:22px!important} .rg-header-nav__label{font-size:clamp(9px,2.45vw,10.5px);line-height:1.06} .rg-theme-quick-toggle{top:74px;right:max(9px,env(safe-area-inset-right));width:38px;height:38px} body.admin-bar .rg-theme-quick-toggle{top:120px} } @media(max-width:380px){.rg-header-nav__label{font-size:9px}.rg-header-nav__icon,.rg-header-nav__icon svg{width:20px!important;height:20px!important;max-width:20px!important;max-height:20px!important}} @media(prefers-reduced-motion:reduce){html[data-rg-theme] body,.rg-header-nav__item,.rg-theme-quick-toggle{transition:none!important}} /* ========================================================================== ACCUEIL V4 — RAYAN GORI Intégration Theme Studio : Clair / Sombre / Auto -------------------------------------------------------------------------- La page conserve son HTML/CSS actuel. Cette couche, volontairement plus spécifique, adapte uniquement la palette et les images au thème résolu. ========================================================================== */ /* -------------------------------------------------------------------------- Images de la page d'accueil Clair + Auto clair -------------------------------------------------------------------------- */ :is(html[data-rg-theme="light"],html[data-rg-theme="auto-light"]) .rg-home { --rg-text:#25343A !important; --rg-text-soft:#607984 !important; --rg-primary:#5B9DB3 !important; --rg-primary-light:#3F7F95 !important; --rg-border:rgba(63,127,149,.18) !important; --rg-border-strong:rgba(63,127,149,.34) !important; --rg-icon-accompagnement:url("https://rayangori.ch/wp-content/uploads/2026/08/icone1_coeur-avec-gents_transparent_120px_clair.png") !important; --rg-icon-famille:url("https://rayangori.ch/wp-content/uploads/2026/08/icone4_instritution_transparent_120px_clair-1.png") !important; --rg-icon-social:url("https://rayangori.ch/wp-content/uploads/2026/08/icone6_reseauxsocial_transparent_120px_clair.png") !important; --rg-icon-collaboration:url("https://rayangori.ch/wp-content/uploads/2026/08/icone7_collaboration_transparent_120px_clair.png") !important; } /* -------------------------------------------------------------------------- Images de la page d'accueil Sombre + Auto sombre Le rendu sombre reste la référence visuelle actuelle. -------------------------------------------------------------------------- */ :is(html[data-rg-theme="dark"],html[data-rg-theme="auto-dark"]) .rg-home { --rg-text:#F2F8FA !important; --rg-text-soft:#C2D1D7 !important; --rg-primary:#68B5D2 !important; --rg-primary-light:#8ED3EB !important; --rg-border:rgba(145,205,225,.17) !important; --rg-border-strong:rgba(145,205,225,.32) !important; --rg-icon-accompagnement:url("https://rayangori.ch/wp-content/uploads/2026/08/icone1_coeur-avec-gents_transparent_120px_sombre.png") !important; --rg-icon-famille:url("https://rayangori.ch/wp-content/uploads/2026/08/icone4_instritution_transparent_120px_sombre-1.png") !important; --rg-icon-social:url("https://rayangori.ch/wp-content/uploads/2026/08/icone6_reseauxsocial_transparent_120px_sombre.png") !important; --rg-icon-collaboration:url("https://rayangori.ch/wp-content/uploads/2026/08/icone7_collaboration_transparent_120px_sombre.png") !important; } /* -------------------------------------------------------------------------- HERO — mode clair -------------------------------------------------------------------------- */ :is(html[data-rg-theme="light"],html[data-rg-theme="auto-light"]) .rg-home .rg-hero { border-color:rgba(63,127,149,.22) !important; background: radial-gradient(circle at 50% -10%,rgba(91,157,179,.16),transparent 43%), linear-gradient(145deg,#FCFEFE 0%,#F2F8FA 52%,#EAF4F7 100%) !important; box-shadow: 0 20px 46px rgba(37,52,58,.10), 0 4px 12px rgba(37,52,58,.06), inset 0 1px 0 rgba(255,255,255,.96) !important; } :is(html[data-rg-theme="light"],html[data-rg-theme="auto-light"]) .rg-home .rg-hero::before { background: linear-gradient(180deg,rgba(255,255,255,.82),transparent 22%,transparent 78%,rgba(63,127,149,.035)) !important; box-shadow: inset 0 1px 1px rgba(255,255,255,.96), inset 0 -30px 60px rgba(63,127,149,.025) !important; } :is(html[data-rg-theme="light"],html[data-rg-theme="auto-light"]) .rg-home .rg-hero::after { background: radial-gradient(ellipse,rgba(91,157,179,.13),rgba(91,157,179,.035) 45%,transparent 72%) !important; } :is(html[data-rg-theme="light"],html[data-rg-theme="auto-light"]) .rg-home .rg-hero-glow-1 { background:radial-gradient(circle,rgba(91,157,179,.14),transparent 70%) !important; } :is(html[data-rg-theme="light"],html[data-rg-theme="auto-light"]) .rg-home .rg-hero-glow-2 { background:radial-gradient(circle,rgba(91,157,179,.12),transparent 70%) !important; } /* -------------------------------------------------------------------------- LOGO — mode clair Même image, habillage lumineux adapté à la DA. -------------------------------------------------------------------------- */ :is(html[data-rg-theme="light"],html[data-rg-theme="auto-light"]) .rg-home .rg-brand-box { border-color:rgba(63,127,149,.24) !important; background: linear-gradient(105deg,rgba(224,240,245,.98) 0%,rgba(235,246,249,.98) 38%,rgba(246,251,252,.99) 72%,rgba(255,255,255,1) 100%) !important; box-shadow: 0 13px 28px rgba(37,52,58,.10), 0 3px 8px rgba(37,52,58,.055), inset 0 1px 0 rgba(255,255,255,.98), inset 0 -1px 0 rgba(63,127,149,.08) !important; } :is(html[data-rg-theme="light"],html[data-rg-theme="auto-light"]) .rg-home .rg-brand-box::after { background:radial-gradient(ellipse at 75% 45%,rgba(255,255,255,.72),transparent 70%) !important; } :is(html[data-rg-theme="light"],html[data-rg-theme="auto-light"]) .rg-home .rg-brand-inner { border-color:rgba(255,255,255,.88) !important; background: linear-gradient(105deg,rgba(214,235,241,.30),rgba(241,248,250,.36) 50%,rgba(255,255,255,.76)) !important; box-shadow: inset 2px 2px 7px rgba(255,255,255,.76), inset -3px -3px 8px rgba(63,127,149,.055) !important; } :is(html[data-rg-theme="light"],html[data-rg-theme="auto-light"]) .rg-home .rg-brand-inner::before { background:linear-gradient(180deg,rgba(255,255,255,.68),transparent) !important; } :is(html[data-rg-theme="light"],html[data-rg-theme="auto-light"]) .rg-home .rg-brand-logo { filter: brightness(1.01) contrast(1.03) drop-shadow(0 2px 4px rgba(37,52,58,.08)) !important; } /* -------------------------------------------------------------------------- TYPO + BOUTONS — mode clair -------------------------------------------------------------------------- */ :is(html[data-rg-theme="light"],html[data-rg-theme="auto-light"]) .rg-home .rg-hero h1 { color:#25343A !important; } :is(html[data-rg-theme="light"],html[data-rg-theme="auto-light"]) .rg-home .rg-hero h1 span { color:#3F7F95 !important; } :is(html[data-rg-theme="light"],html[data-rg-theme="auto-light"]) .rg-home .rg-intro { color:#607984 !important; } :is(html[data-rg-theme="light"],html[data-rg-theme="auto-light"]) .rg-home .rg-button-primary { color:#FFFFFF !important; border-color:rgba(255,255,255,.54) !important; background:linear-gradient(135deg,#6AAFC7,#4B8CA3) !important; box-shadow: 0 8px 19px rgba(63,127,149,.20), inset 0 1px 0 rgba(255,255,255,.34) !important; } :is(html[data-rg-theme="light"],html[data-rg-theme="auto-light"]) .rg-home .rg-button-secondary { color:#3F7F95 !important; border-color:rgba(63,127,149,.20) !important; background: linear-gradient(145deg,rgba(255,255,255,.90),rgba(234,244,247,.82)) !important; box-shadow: 0 5px 14px rgba(37,52,58,.055), inset 0 1px 0 rgba(255,255,255,.95) !important; } /* -------------------------------------------------------------------------- LINE ART — même fichier fourni pour les deux thèmes. On ajuste seulement son rendu optique en clair. -------------------------------------------------------------------------- */ :is(html[data-rg-theme="light"],html[data-rg-theme="auto-light"]) .rg-home .rg-hero-art img { filter: brightness(.82) contrast(1.07) saturate(.90) drop-shadow(0 15px 22px rgba(37,52,58,.07)) !important; } :is(html[data-rg-theme="light"],html[data-rg-theme="auto-light"]) .rg-home .rg-art-halo { background: radial-gradient(circle,rgba(91,157,179,.10),rgba(91,157,179,.035) 48%,transparent 73%) !important; } /* -------------------------------------------------------------------------- CARTES SERVICES — mode clair -------------------------------------------------------------------------- */ :is(html[data-rg-theme="light"],html[data-rg-theme="auto-light"]) .rg-home .rg-service-card { color:#25343A !important; border-color:rgba(63,127,149,.16) !important; background: linear-gradient(145deg,rgba(255,255,255,.99),rgba(242,248,250,.98)) !important; box-shadow: 0 9px 22px rgba(37,52,58,.075), inset 0 1px 0 rgba(255,255,255,.98) !important; } :is(html[data-rg-theme="light"],html[data-rg-theme="auto-light"]) .rg-home .rg-service-card::before { background:radial-gradient(circle,rgba(91,157,179,.11),transparent 70%) !important; } :is(html[data-rg-theme="light"],html[data-rg-theme="auto-light"]) .rg-home .rg-service-card::after { background:linear-gradient(90deg,transparent,#5B9DB3,transparent) !important; } :is(html[data-rg-theme="light"],html[data-rg-theme="auto-light"]) .rg-home .rg-service-card:hover { border-color:rgba(63,127,149,.28) !important; box-shadow: 0 15px 30px rgba(37,52,58,.11), inset 0 1px 0 rgba(255,255,255,1) !important; } :is(html[data-rg-theme="light"],html[data-rg-theme="auto-light"]) .rg-home .rg-icon-shell { border-color:rgba(63,127,149,.20) !important; background: linear-gradient(145deg,rgba(234,244,247,.96),rgba(219,237,243,.82)) !important; box-shadow: 0 6px 14px rgba(37,52,58,.075), inset 0 1px 0 rgba(255,255,255,.98), inset 0 0 12px rgba(91,157,179,.055) !important; } :is(html[data-rg-theme="light"],html[data-rg-theme="auto-light"]) .rg-home .rg-theme-icon { filter:drop-shadow(0 3px 5px rgba(37,52,58,.08)) !important; } :is(html[data-rg-theme="light"],html[data-rg-theme="auto-light"]) .rg-home .rg-card-number { color:rgba(63,127,149,.34) !important; } :is(html[data-rg-theme="light"],html[data-rg-theme="auto-light"]) .rg-home .rg-service-card h3 { color:#25343A !important; } :is(html[data-rg-theme="light"],html[data-rg-theme="auto-light"]) .rg-home .rg-service-card p { color:#607984 !important; } :is(html[data-rg-theme="light"],html[data-rg-theme="auto-light"]) .rg-home .rg-card-link { color:#3F7F95 !important; } /* -------------------------------------------------------------------------- Sombre : verrouillage des éléments que le thème global pourrait modifier. Cela garantit que la V4 sombre reste identique à la version fournie. -------------------------------------------------------------------------- */ :is(html[data-rg-theme="dark"],html[data-rg-theme="auto-dark"]) .rg-home .rg-hero h1 { color:#F2F8FA !important; } :is(html[data-rg-theme="dark"],html[data-rg-theme="auto-dark"]) .rg-home .rg-hero h1 span { color:#8ED3EB !important; } :is(html[data-rg-theme="dark"],html[data-rg-theme="auto-dark"]) .rg-home .rg-intro { color:#C2D1D7 !important; } :is(html[data-rg-theme="dark"],html[data-rg-theme="auto-dark"]) .rg-home .rg-service-card { color:#F2F8FA !important; } :is(html[data-rg-theme="dark"],html[data-rg-theme="auto-dark"]) .rg-home .rg-service-card h3 { color:#F2F8FA !important; } :is(html[data-rg-theme="dark"],html[data-rg-theme="auto-dark"]) .rg-home .rg-service-card p { color:#C2D1D7 !important; } :is(html[data-rg-theme="dark"],html[data-rg-theme="auto-dark"]) .rg-home .rg-card-link { color:#8ED3EB !important; }