/* ===================== EN-TÊTE 2 ÉTATS ===================== */ header:not(.scrolled){padding-top:0px;position:absolute} .topbar-secondary{position:absolute;top:14px;left:40vw;right:28px;display:flex;align-items:center;justify-content:flex-end;gap:22px;z-index:101; font-family:'Manrope',sans-serif;font-weight:600;font-size:14px;transition:opacity .3s ease} .topbar-secondary a{color:#fff;text-decoration:none;text-shadow:0 1px 10px rgba(20,12,8,.6);transition:opacity .2s ease} .topbar-secondary a:hover{opacity:.72} .topbar-secondary .tb-sep{color:rgba(255,255,255,.55)} .topbar-secondary .tb-tel{display:inline-flex;align-items:center;gap:7px;font-weight:700} header.scrolled .topbar-secondary{opacity:0;pointer-events:none} header:not(.scrolled) .header-inner{justify-content:flex-end;position:static}header:not(.scrolled) .nav-bar{position:absolute;top:48px;right:28px;left:auto;transform:scale(0.82);transform-origin:top right} header.scrolled .header-inner{justify-content:center} header:not(.scrolled) .nav-bar .logo{display:none} /* tagline + label MENU (en-tete mobile haut de page) — masques par defaut */ .mt-tagline{display:none;font-family:'Manrope',sans-serif;font-weight:600;font-size:8px;color:#1c1a18;letter-spacing:-.01em;white-space:nowrap;margin-top:1px;line-height:1} .burger-label{display:none;font-family:'Sora',sans-serif;font-weight:700;font-size:14px;letter-spacing:.09em;color:var(--bleu-nuit);margin-right:10px} /* --- Responsive --- */ @media (prefers-reduced-motion: reduce){ .hero-cards-track{animation:none} } /* ===================== EN-TETE MOBILE 2 ETATS (<=1100px OU tactile) ===================== */ @media (max-width:1100px), (hover:none) and (pointer:coarse){ .topbar-secondary{display:none !important} .nav-links-desktop{display:none !important} .nav-bar > .btn-contact{display:none !important} .nav-burger{display:flex !important} .mobile-menu{display:flex !important} /* HAUT de page (non scrolle) : barre FLOTTANTE transparente pleine largeur, hors flux → le fond/l'image du hero remonte jusqu'en haut derrière l'en-tête (logo+tagline a gauche, MENU+burger a droite) */ header:not(.scrolled){position:absolute !important;top:0 !important;left:0 !important;right:0 !important;padding-top:0 !important;z-index:100 !important} header:not(.scrolled) .header-inner{padding:18px clamp(22px,4.2vw,60px) 8px !important;justify-content:space-between !important;position:relative !important} header:not(.scrolled) .nav-bar{ position:static !important;transform:none !important;top:auto !important;right:auto !important;left:auto !important; width:100% !important;max-width:none !important;justify-content:space-between !important;align-items:center; background:transparent !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important; box-shadow:none !important;border:none !important;border-radius:0 !important;padding:4px 2px !important; } header:not(.scrolled) .nav-bar .logo{display:flex !important;flex-direction:column;align-items:flex-start;gap:0;margin:0} header:not(.scrolled) .logo-img{height:42px} header:not(.scrolled) .mt-tagline{display:block} header:not(.scrolled) .nav-burger .burger-label{display:inline} /* SCROLLE : pave flottant compact (logo + burger) */ header.scrolled{position:fixed} header.scrolled .header-inner{justify-content:center !important;padding:14px clamp(16px,3vw,40px)} header.scrolled .nav-bar{ position:static;transform:none;width:100%;max-width:430px;justify-content:space-between;align-items:center; background:rgba(255,255,255,0.9);backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%); box-shadow:0 12px 38px rgba(20,12,8,.14);border:1px solid rgba(255,255,255,.6); border-radius:18px;padding:8px 8px 8px 16px; } header.scrolled .nav-bar .logo{display:flex !important;flex-direction:row;align-items:center;margin:0} header.scrolled .logo-img{height:30px} header.scrolled .mt-tagline{display:none} header.scrolled .nav-burger .burger-label{display:none} /* menu ouvert : masque tagline + label (le burger devient X) */ body.menu-open .mt-tagline{display:none} body.menu-open .nav-burger .burger-label{display:none} /* hero : 1 colonne, photo masquee, retrait lateral. padding-top = hauteur de l'en-tête flottant (~107px) + respiration → le contenu (logo, tirets, titre) ne passe plus derriere la barre. */ .hero,.hero-grid,.hero-right{min-height:auto} .hero-grid{grid-template-columns:1fr !important} .hero-photo{display:none !important} .hero-text{padding-top:clamp(140px,17vw,152px) !important;padding-left:clamp(22px,4.2vw,60px) !important;padding-right:clamp(22px,4.2vw,60px) !important} body.royslug-contact .ct-hero{ padding-top:clamp(140px,17vw,152px) !important; } .hero-headline .hh-line2{white-space:normal} .hero-logo{width:210px;height:96px} } @media (max-width:968px){ .hero-right{overflow:visible} .hero-photo{display:none !important} .hero-cards{position:static;left:0;right:0;padding:0;margin-top:18px;bottom:auto;overflow-x:auto;-webkit-overflow-scrolling:touch} .hero-cards-track{width:max-content;gap:12px} .hc-card{flex:0 0 auto;width:clamp(220px,70vw,300px);height:170px} .roy-rotator{gap:6px;margin-top:56px} .roy-rotator .rr-ico{width:46px;height:46px} .roy-rotator .rr-ico svg{width:24px;height:24px} .roy-rotator .rr-line{width:24px} .roy-rotator .rr-item.actif .rr-line{width:64px} } /* ===================== MENU MOBILE — style plein écran (façon fiche) ===================== */ @media (max-width:1100px), (hover:none) and (pointer:coarse){ .mobile-menu{ position:fixed; inset:0; z-index:90; margin:0 !important; padding:152px 30px 34px !important; background:#fbfaf8 !important; border:none !important; border-radius:0 !important; box-shadow:none !important; max-height:none !important; height:100dvh; overflow-y:auto; display:flex !important; flex-direction:column; gap:0 !important; opacity:0; transform:translateY(-6px); pointer-events:none; visibility:hidden; transition:opacity .28s ease, transform .28s ease, visibility .28s ease; } .mobile-menu.open{ opacity:1 !important; transform:none !important; pointer-events:auto !important; visibility:visible !important; } /* CLÉ : ne jamais comprimer les enfants. Le menu est en hauteur fixe (100dvh) et flex colonne ; sans ça, un sous-menu ouvert se fait écraser par flex-shrink (au lieu de pousser le reste + scroller) → items coupés qui chevauchent les suivants. */ .mobile-menu > *{ flex:0 0 auto; } /* garder la pastille du haut (logo + X) au-dessus du menu plein écran */ #header .header-inner, #header .nav-bar{ position:relative; z-index:100; } /* tirets colorés */ .mm-dashes{ display:flex; gap:9px; margin-bottom:24px; position:relative; z-index:2; } .mm-dashes span{ width:34px; height:5px; border-radius:3px; } .mm-dashes span:nth-child(1){ background:#F2B705; } .mm-dashes span:nth-child(2){ background:#E85D2F; } .mm-dashes span:nth-child(3){ background:#2C6FA6; } .mm-dashes span:nth-child(4){ background:#4F8A1E; } /* liens à plat, grands */ .mobile-menu .mobile-link{ font-family:'Sora',sans-serif; font-size:23px !important; font-weight:500 !important; line-height:1.12; color:#1c1a18 !important; padding:13px 0 !important; margin:0 !important; border-radius:0 !important; background:none !important; text-align:left !important; position:relative; z-index:2; width:max-content; max-width:100%; } /* survol/appui = NEUTRE (plus de orange) ; la couleur est réservée à l'item sélectionné */ .mobile-menu .mobile-link:hover, .mobile-menu .mobile-link:active{ background:rgba(43,36,32,0.05) !important; color:#1c1a18 !important; } /* ligne accordéon : label cliquable (→ page principale) à gauche + chevron toggle à droite */ .mobile-menu .mobile-acc-head{ display:flex !important; align-items:center; justify-content:space-between; width:100%; gap:8px; flex:0 0 auto; } .mobile-menu .mobile-acc-label{ flex:0 1 auto; } .mobile-menu .mobile-acc-btn{ display:flex !important; align-items:center; justify-content:flex-end; flex:0 0 auto; width:auto !important; max-width:none !important; padding:13px 2px 13px 26px !important; margin:0 !important; border-radius:12px !important; border:none; background:none !important; cursor:pointer; -webkit-appearance:none; appearance:none; touch-action:manipulation; -webkit-tap-highlight-color:transparent; z-index:3; } .mobile-menu .mobile-chev{ width:21px !important; height:21px !important; opacity:.4; flex-shrink:0; transition:transform .3s ease; } .mobile-menu .mobile-acc-btn.open .mobile-chev{ transform:rotate(180deg); opacity:.75; } .mobile-menu .mobile-acc-btn[data-acc="acc-pv"].open{ color:#4F8A1E !important; } .mobile-menu .mobile-acc-btn[data-acc="acc-elec"].open{ color:#B47C06 !important; } .mobile-menu .mobile-acc-btn[data-acc="acc-plomb"].open{ color:#2C6FA6 !important; } .mobile-menu .mobile-acc-btn[data-acc="acc-chauf"].open{ color:#B83719 !important; } /* sous-menu deplie : badges colores + surlignement (style desktop) */ .mobile-menu .mobile-sub{ position:relative; z-index:2; } .mobile-menu .mobile-sub.open{ max-height:760px !important; } .mobile-menu .mobile-sub-inner{ padding:4px 0 14px 2px !important; gap:4px !important; } .mobile-menu .mobile-sublink{ font-family:'Manrope',sans-serif !important; font-size:16px !important; font-weight:600 !important; color:#23201d !important; padding:11px 14px !important; border-radius:14px !important; gap:14px !important; background:none !important; } .mobile-menu .msl-ic{ width:40px !important; height:40px !important; border-radius:12px !important; font-size:19px !important; flex-shrink:0; } /* survol/appui sous-lien = neutre ; pastel métier réservé à la SÉLECTION (.active) */ .mobile-menu .mobile-sublink:hover, .mobile-menu .mobile-sublink:active{ background:rgba(43,36,32,0.05) !important; } #acc-pv .mobile-sublink.active{ background:rgba(79,138,30,0.14) !important; color:#4F8A1E !important; } #acc-elec .mobile-sublink.active{ background:rgba(180,124,6,0.16) !important; color:#B47C06 !important; } #acc-plomb .mobile-sublink.active{ background:rgba(44,111,166,0.14) !important; color:#2C6FA6 !important; } #acc-chauf .mobile-sublink.active{ background:rgba(184,55,25,0.14) !important; color:#B83719 !important; } /* téléphone */ .mm-tel{ margin-top:30px; display:inline-flex; align-items:center; gap:13px; font-family:'Sora',sans-serif; font-size:23px; font-weight:700; color:#1c1a18; text-decoration:none; position:relative; z-index:2; width:max-content; } /* filigrane O (forme reelle du logo, gris tres clair) — ancre a GAUCHE, moitie droite visible */ .mm-watermark{ position:fixed; left:0; bottom:9vh; transform:translateX(-50%); width:84vw; height:95vw; max-width:420px; max-height:474px; background:url(../img/o-watermark.png) center/contain no-repeat; opacity:0.05; z-index:0; pointer-events:none; } } /* badges colores par metier (desktop + mobile) — bulles manquantes pv/elec/chauf */ .ndi-ic.pv-ic, .msl-ic.pv-ic { background:linear-gradient(135deg,#8BC34A,#4F8A1E) !important; color:#fff !important; } .ndi-ic.elec-ic, .msl-ic.elec-ic { background:linear-gradient(135deg,#F2C94C,#B47C06) !important; color:#fff !important; } .ndi-ic.plomb-ic, .msl-ic.plomb-ic{ background:linear-gradient(135deg,#6FB4E7,#2C6FA6) !important; color:#fff !important; } .ndi-ic.chauf-ic, .msl-ic.chauf-ic{ background:linear-gradient(135deg,#F0894B,#B83719) !important; color:#fff !important; } /* icones SVG (ligne) dans les bulles du menu — remplacent les anciens emojis */ .ndi-ic svg, .msl-ic svg{ width:54%; height:54%; display:block; } .ndi-ic svg{ stroke-width:1.9; } .msl-ic svg{ stroke-width:2; } /* ===== Filigrane O derriere le hero — PAGES PRINCIPALES uniquement ===== */ /* (l'element .hero-o-watermark n'est present que dans les heros des pages principales) */ .hero{ position:relative; } .hero > .container{ position:relative; z-index:2; } .hero-o-watermark{ position:absolute; top:0; left:0; z-index:0; pointer-events:none; width:min(660px,138vw); aspect-ratio:738/834; background:url(../img/o-watermark.png) center/contain no-repeat; transform:translateX(-44%) rotate(15deg); opacity:0.05; } @media (max-width:1100px), (hover:none) and (pointer:coarse){ .hero-o-watermark{ width:min(560px,150vw); transform:translateX(-46%) rotate(15deg); top:96px; } } /* ===== Burger MENU : forcer le bon layout (16 sous-pages ont un header CSS herite en colonne) ===== */ .nav-bar .nav-burger{ width:auto !important; height:46px !important; flex-direction:row !important; align-items:center !important; justify-content:center !important; gap:0 !important; padding:0 4px !important; } .nav-bar .nav-burger .burger-ico{ display:flex !important; flex-direction:column !important; align-items:flex-end !important; justify-content:center !important; gap:5px !important; width:auto !important; height:auto !important; background:none !important; } .nav-bar .nav-burger .burger-ico span{ display:block !important; width:26px !important; min-width:26px !important; height:2.6px !important; background:var(--bleu-nuit) !important; border-radius:2px !important; transition:all .3s; } .nav-bar .nav-burger.open .burger-ico span:nth-child(1){ transform:translateY(7.6px) rotate(45deg) !important; } .nav-bar .nav-burger.open .burger-ico span:nth-child(2){ opacity:0 !important; } .nav-bar .nav-burger.open .burger-ico span:nth-child(3){ transform:translateY(-7.6px) rotate(-45deg) !important; } .nav-bar .nav-burger .burger-label{ display:none; width:auto !important; height:auto !important; min-width:0 !important; background:none !important; } @media (max-width:1100px), (hover:none) and (pointer:coarse){ header:not(.scrolled) .nav-bar .nav-burger .burger-label{ display:inline !important; } header.scrolled .nav-bar .nav-burger .burger-label{ display:none !important; } body.menu-open .nav-bar .nav-burger .burger-label{ display:none !important; } } /* ============================================================ Header par-dessus le hero-image en MOBILE (pas de barre blanche) Pages concernées : Nos réalisations (hero sombre) + Blog (hero clair) ============================================================ */ @media (max-width:1100px), (hover:none) and (pointer:coarse){ body.royslug-nos-realisations header:not(.scrolled), body.blog header:not(.scrolled), body.royslug-blog header:not(.scrolled){ position:absolute !important; left:0; right:0; top:0; background:transparent !important; box-shadow:none !important; } /* Nos réalisations : image sombre -> logo + menu en blanc pour le contraste */ body.royslug-nos-realisations header:not(.scrolled) .logo-img{ filter:brightness(0) invert(1); } body.royslug-nos-realisations header:not(.scrolled) .mt-tagline, body.royslug-nos-realisations header:not(.scrolled) .burger-label{ color:#fff !important; } body.royslug-nos-realisations header:not(.scrolled) .burger-ico span{ background:#fff !important; } body.royslug-nos-realisations .hero-logo-sa{ filter:brightness(0) invert(1); } } /* ============================================================ Logo "petit" en haut à gauche du hero des pages AUTONOMES (qui n'avaient pas de hero-logo). Caché en mobile (déjà dans le header). ============================================================ */ .hero-logo-sa{ display:block; width:120px; height:46px; vertical-align:top; background:url(../img/logo-roy.png) left center/contain no-repeat; margin:-14px 0 42px; } /* Heros CENTRES (depannage, aides) : logo sur sa propre ligne, en haut a GAUCHE, plus petit */ .dep-hero-grid .hero-logo-sa{ display:block; width:118px; height:46px; background-position:left center; margin:0 auto 16px 0; } .aid-hero-inner .hero-logo-sa{ display:block; width:100px; height:38px; background-position:left center; margin:-16px auto 60px 0; } @media (max-width:1100px), (hover:none) and (pointer:coarse){ .hero-logo-sa{ display:none; } } /* Effet manuscrit "marque deux-sevrienne" (dispo sur toutes les pages) */ .hero-secondary .hs-hand{ font-family:'Caveat',cursive; font-weight:700; font-size:clamp(25px,2.5vw,35px); line-height:1; color:#1c1a18; white-space:nowrap; padding:0 .06em; letter-spacing:.2px; } /* "La marque deux-sévrienne" reste insécable -> phrase sur 2 lignes à toutes les largeurs */ .hero-secondary .hs-l1{ white-space:nowrap; } .hero-secondary .hs-l2{ display:inline; } /* ============================================================ Emblèmes des QUALIFICATIONS = vrais logos (PNG transparents) Tuile claire + repli propre tant que le fichier n'est pas en ligne. Fichiers attendus : /wp-content/uploads/2026/06/.png ============================================================ */ .certs .cert-emblem{ background:transparent !important; padding:0 !important; overflow:visible; } .certs .cert-emblem img{ width:auto !important; height:auto !important; max-width:100% !important; max-height:clamp(72px,8.5vw,90px) !important; object-fit:contain !important; } .cert-emblem img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; } .cert-emblem.is-empty{ background:linear-gradient(135deg,#EEF1F4,#E2E6EA) !important; } .cert-emblem.is-empty::after{ content:attr(data-fb); font-family:'Sora',sans-serif; font-weight:800; font-size:12px; line-height:1.05; letter-spacing:.01em; color:#8A9099; text-align:center; padding:0 4px; } .el-qb-em{ background:#fff !important; padding:3px; overflow:hidden; } .el-qb-em img{ max-width:100%; max-height:100%; object-fit:contain; display:block; } .el-qb-em.is-empty{ background:linear-gradient(135deg,#EEF1F4,#E2E6EA) !important; } .el-qb-em.is-empty::after{ content:attr(data-fb); font-family:'Sora',sans-serif; font-weight:800; font-size:8px; color:#8A9099; } /* Pages a fond clair (blog + 4 pages Aides) : barre du haut en NOIR (blanc illisible) */ body.blog .topbar-secondary a, body.royslug-contact .topbar-secondary a, body.royslug-aides-chauffage .topbar-secondary a, body.royslug-aides-electricite .topbar-secondary a, body.royslug-aides-photovoltaique .topbar-secondary a, body.royslug-aides-sanitaire .topbar-secondary a{ color:#1A1410; text-shadow:none; } body.blog .topbar-secondary .tb-sep, body.royslug-contact .topbar-secondary .tb-sep, body.royslug-aides-chauffage .topbar-secondary .tb-sep, body.royslug-aides-electricite .topbar-secondary .tb-sep, body.royslug-aides-photovoltaique .topbar-secondary .tb-sep, body.royslug-aides-sanitaire .topbar-secondary .tb-sep{ color:rgba(26,20,16,.32); } /* ════════════════════════════════════════════════════════════════ v1.8.4 — AMBIANCE « page contact » sur tout le site. Fond globalement BLANC + quelques taches de couleur douces réparties ici et là (façon blobs de la page contact) -> aéré, dynamique, sans teinter l'ensemble. La zone HAUT-GAUCHE (où vit le filigrane O) reste quasi neutre pour que le O ne soit jamais happé. EXCEPTION : les pages "aides" (déjà colorées) sont exclues. ════════════════════════════════════════════════════════════════ */ body:not([class*="aides"]){ /* v1.9.3 — fond de page CLAIR & AÉRÉ conservé (l'effet verre est contenu dans les fenêtres). Blobs colorés très discrets sur base blanche. */ background: radial-gradient(40% 34% at 99% 2%, rgba(63,163,220,.13), rgba(63,163,220,0) 70%), /* bleu haut-droite */ radial-gradient(34% 28% at 62% -4%, rgba(245,197,24,.10), rgba(245,197,24,0) 70%), /* or haut-centre */ radial-gradient(38% 34% at 99% 52%, rgba(255,170,92,.115), rgba(255,170,92,0) 70%), /* orange droite */ radial-gradient(36% 32% at 1% 86%, rgba(120,178,43,.11), rgba(120,178,43,0) 70%), /* vert bas-gauche */ radial-gradient(40% 34% at 88% 98%, rgba(255,140,66,.10), rgba(255,140,66,0) 70%), /* chaud bas-droite */ radial-gradient(26% 22% at 5% 7%, rgba(255,178,107,.045),rgba(255,178,107,0) 70%), /* haut-gauche très discret */ #FFFFFF !important; background-attachment: fixed !important; } /* FONDU : sur les pages concernées (hors aides), les sections CLAIRES deviennent transparentes -> le fond blanc + blobs circule sans délimitation. Les sections SOMBRES (texte blanc) gardent leur fond. Les cartes sombres internes ne sont pas des sections -> intactes. */ body:not([class*="aides"]) main > section:not(.zone):not(.real):not(.el-articles):not(.cta-band):not(.dep-redflags):not(.sim-intro):not(.ap-brand):not(.ct-hero){ background-color: transparent !important; } body:not([class*="aides"]) .hero{ background: transparent !important; } /* Plus de filets « qui coupent » entre sections alternées */ .sec-alt::before, .sec-alt::after{ display: none !important; } /* ════════════════════════════════════════════════════════════════ v1.8.0 — Lisibilité sur le fond atmosphérique. ════════════════════════════════════════════════════════════════ */ /* Encadré métier du hero (mot pivotant) : contour net + légère ombre, teinté selon le métier -> contraste franc sur n'importe quel fond. */ .word-rotate .wr-word{ border:1px solid rgba(43,36,32,.08); box-shadow:0 2px 10px rgba(43,36,32,.06); } .word-rotate .wr-word.m-chauf{ border-color:rgba(184,55,25,.30); } .word-rotate .wr-word.m-plomb{ border-color:rgba(44,111,166,.32); } .word-rotate .wr-word.m-pv{ border-color:rgba(79,138,30,.32); } .word-rotate .wr-word.m-elec{ border-color:rgba(180,124,6,.34); } /* Filigrane O : reste un repère NEUTRE et discret, jamais teinté par les halos (on le pose sur un léger plan crème opaque, et il passe devant). */ .hero-o-watermark{ z-index:1 !important; opacity:.055 !important; } /* ════════════════════════════════════════════════════════════════ v2.0 — LIQUID GLASS — verre clair brillant, couleurs de marque VIVES, translucide + flou de réfraction (backdrop-filter blur + distorsion SVG), halo coloré flottant, PARALLAXE DOUCE au scroll (--par, JS). La carte CTA noire .cta-projet-card est EXCLUE -> garde son design d'origine (#0A0A0A, défini dans base.css), juste avant le pied de page. ════════════════════════════════════════════════════════════════ */ .sim-card, .el-estim-card, .bat-curve-verdict, .pv-battery-card, .aid-local-card, .art-calc, .art-sidecta, body.royslug-contact .ct-info-card{ /* défaut : BLEU plomberie (vif) */ --base:#2090e2; --light:#7ccbff; --deep:#143a5e; --aura:#2086d8; --glow:rgba(32,144,226,.42); --par:0px; position: relative; isolation: isolate; overflow: hidden; border: 0 !important; background: linear-gradient(158deg, rgba(5,10,16,.40) 0%, rgba(5,10,16,.10) 30%, transparent 52%), /* protection texte (haut-gauche) */ radial-gradient(132% 152% at 50% -8%, color-mix(in srgb, var(--light) 82%, transparent) 0%, color-mix(in srgb, var(--base) 86%, transparent) 34%, color-mix(in srgb, var(--deep) 92%, transparent) 100%) !important; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px) url(#royliq); backdrop-filter: blur(5px) url(#royliq); box-shadow: 0 40px 66px -26px var(--glow), /* halo coloré = flotte */ 0 14px 30px -12px rgba(12,24,16,.18), 0 6px 14px -8px rgba(0,0,0,.12), inset 0 0 0 1px rgba(255,255,255,.55), /* filet d'arête */ inset 0 6px 4px -3px rgba(255,255,255,.9), /* lèvre haute brillante */ inset 0 -16px 24px -14px color-mix(in srgb, var(--light) 55%, transparent), inset 0 -3px 2px -2px color-mix(in srgb, var(--deep) 70%, transparent) !important; } /* ::before — éclat de couleur interne (profondeur, côté droit) + parallaxe douce */ .sim-card::before, .el-estim-card::before, .bat-curve-verdict::before, .pv-battery-card::before, .aid-local-card::before, .art-calc::before, .art-sidecta::before, body.royslug-contact .ct-info-card::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(56% 70% at 80% 16%, color-mix(in srgb, var(--light) 48%, transparent), transparent 66%); transform: translate3d(0, calc(var(--par) * 0.5), 0); will-change: transform; } /* ::after — reflet diagonal fin (brillance, pas de halo blanc) + parallaxe contre-mouvement */ .sim-card::after, .el-estim-card::after, .bat-curve-verdict::after, .pv-battery-card::after, .aid-local-card::after, .art-calc::after, .art-sidecta::after, body.royslug-contact .ct-info-card::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:inherit; background: linear-gradient(116deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.04) 7%, transparent 16%); transform: translate3d(0, calc(var(--par) * -0.35), 0); will-change: transform; } /* COULEURS MÉTIER (vives, style marque) */ body.royslug-photovoltaique .sim-card, .bat-curve-verdict, body.royslug-aides-photovoltaique .aid-local-card{ --base:#63bd1c; --light:#c0f25f; --deep:#274a10; --aura:#57b015; --glow:rgba(99,189,28,.42); } /* Option stockage (PV toiture) : BLEU roy-solaire (roy-solaire.fr/collections/batteries) */ .pv-battery-card{ --base:#1d6dd8; --light:#7cb6ff; --deep:#1450a8; --aura:#1d6dd8; --glow:rgba(29,109,216,.42); } /* Cartes 'artisan de confiance' (pages aides) : photo du siège + liquid glass fumé noir */ .aid-local-card{ background: linear-gradient(155deg, rgba(10,12,16,.82) 0%, rgba(12,14,18,.64) 58%, rgba(14,16,20,.60) 100%), url('/wp-content/uploads/2026/06/281f189b085a414fcccb63066d2406155ce2f5a3.jpg') center/cover no-repeat !important; box-shadow:0 32px 64px -28px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.16), inset 0 6px 4px -3px rgba(255,255,255,.20) !important; } .aid-local-card::before{ background:none !important; } body.royslug-chauffage .sim-card{ --base:#e83c0f; --light:#ff7a44; --deep:#5a1a0a; --aura:#dc380f; --glow:rgba(232,60,15,.42); } body.royslug-electricite .sim-card, .el-estim-card, body.royslug-contact .ct-info-card{ --base:#e29a00; --light:#ffdb4d; --deep:#5a3c04; --aura:#d29200; --glow:rgba(226,154,0,.42); } .art-calc, .art-sidecta, .aid-local-card{ --base:#e85a17; --light:#ff9a55; --deep:#5e2208; --aura:#dc5512; --glow:rgba(232,90,23,.42); } /* ACCENT du titre forcé en CLAIR (contraste) — .cta-projet-card EXCLUE */ .sim-card [class*="hl-"], .el-estim-card [class*="hl-"], .bat-curve-verdict [class*="hl-"], .pv-battery-card [class*="hl-"], .aid-local-card [class*="hl-"], .art-calc [class*="hl-"], .art-sidecta [class*="hl-"], body.royslug-contact .ct-info-card [class*="hl-"]{ color:#fff !important; -webkit-text-fill-color:#fff !important; background:none !important; -webkit-background-clip:border-box !important; text-shadow:0 1px 12px rgba(0,0,0,.4) !important; animation:none !important; } /* CHAUFFAGE — petites fenêtres internes (.sim-item) lisibles sur le verre */ .sim-card .sim-item{ background: rgba(255,255,255,.16) !important; border: 1px solid rgba(255,255,255,.26) !important; -webkit-backdrop-filter: blur(6px) saturate(1.2); backdrop-filter: blur(6px) saturate(1.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 10px 24px -12px rgba(0,0,0,.34) !important; } .sim-card .sim-item:hover{ background: rgba(255,255,255,.24) !important; } .sim-card .sim-meta{ color: rgba(255,255,255,.85) !important; } /* v2.0 — lisibilité du texte secondaire sur le verre vif */ .sim-card .section-eyebrow, .el-estim-card .section-eyebrow, .bat-curve-verdict .section-eyebrow, .pv-battery-card .section-eyebrow, .aid-local-card .section-eyebrow, body.royslug-contact .ct-info-card .section-eyebrow{ color: rgba(255,255,255,.9) !important; -webkit-text-fill-color: rgba(255,255,255,.9) !important; opacity:1 !important; } .sim-card .sim-intro p, .el-estim-card .sim-intro p, .el-estim-card > p, .bat-curve-verdict p, .pv-battery-card p, .aid-local-card p, body.royslug-contact .ct-info-card p{ color: rgba(255,255,255,.92) !important; } /* ════════════════════════════════════════════════════════════════ v2.1 — (1) bordure design des images internes du simulateur, (2) LIQUID GLASS GRIS (façon iOS) pour les cartes claires, (3) images du haut en léger retrait. ════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════ v3.12.16 — Cartes simulateur : refonte "widget verre + ambiance" Photo floutée derrière un voile fumé chaud + halo couleur métier, badge outil à point pulsant, barre d'action vitrée. Accent vert (PV) par défaut, bleu sur la plomberie. (Pas d'arête colorée.) ════════════════════════════════════════════════════════════════ */ .sim-card .feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px} .sim-card .feat-card{ --acc:#5FB033; --acc2:#3B7A18; --glow:rgba(95,176,51,.5); position:relative; display:flex; flex-direction:column; justify-content:flex-start; text-decoration:none; min-height:320px; overflow:hidden; isolation:isolate; padding:22px 24px 20px; border-radius:24px !important; background:#161109 !important; border:1px solid rgba(255,255,255,.10) !important; box-shadow:0 20px 60px rgba(43,24,18,.3), inset 0 1px 0 rgba(255,255,255,.10) !important; transition:transform .55s cubic-bezier(.22,1,.36,1), box-shadow .55s cubic-bezier(.22,1,.36,1); } body.royslug-plomberie .sim-card .feat-card{ --acc:#4FA0E0; --acc2:#2C6FA6; --glow:rgba(79,160,224,.5); } .sim-card .feat-card::after{ content:none !important; } /* neutralise l'ancien voile dégradé */ .sim-card .feat-photo{position:absolute;inset:-12%;z-index:0;background-size:cover;background-position:center; filter:blur(5px) saturate(.86) brightness(.7);transform:scale(1.06); transition:transform 1.2s cubic-bezier(.22,1,.36,1), filter .6s ease} .sim-card .feat-halo{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:.5; background:radial-gradient(58% 48% at 84% 6%, color-mix(in srgb,var(--acc) 58%, transparent), transparent 72%); transition:opacity .6s ease} .sim-card .feat-veil{position:absolute;inset:0;z-index:1;pointer-events:none; background:radial-gradient(130% 80% at 14% -14%, rgba(255,255,255,.09), transparent 46%), linear-gradient(170deg, rgba(16,11,7,.12) 0%, rgba(15,11,7,.38) 46%, rgba(11,8,5,.86) 100%)} .sim-card .feat-top{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:10px 12px} .sim-card .feat-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:var(--acc); background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06)); border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.26), 0 10px 22px -12px rgba(0,0,0,.6); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:box-shadow .5s ease} .sim-card .feat-icon svg{width:24px;height:24px} .sim-card .feat-meta{display:inline-flex;align-items:center;gap:7px;padding:6px 11px 6px 9px;border-radius:999px; font-family:'Manrope',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:#F7F3EE; background:rgba(20,14,9,.32);border:1px solid rgba(255,255,255,.18); -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);box-shadow:inset 0 1px 0 rgba(255,255,255,.16)} .sim-card .feat-dot{width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 8px var(--glow);animation:featpulse 2.2s infinite} @keyframes featpulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--acc) 55%, transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}} .sim-card .feat-body{position:relative;z-index:2;margin-top:auto;padding:26px 0 0 !important} .sim-card .feat-name{font-family:'Sora',sans-serif;font-weight:800;font-size:22px;line-height:1.15;margin:0 0 8px;letter-spacing:-.01em;color:#FCFAF8;text-shadow:0 2px 18px rgba(0,0,0,.6)} .sim-card .feat-desc{color:rgba(249,245,241,.82);font-size:13px;line-height:1.5;margin:0 0 18px;text-shadow:0 1px 14px rgba(0,0,0,.6); display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .sim-card .feat-go{display:flex;align-items:center;justify-content:space-between;gap:14px; padding:9px 9px 9px 17px;border-radius:15px; background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); box-shadow:inset 0 1px 0 rgba(255,255,255,.20), 0 8px 22px -14px rgba(0,0,0,.7); transition:background .45s ease, border-color .45s ease, box-shadow .45s ease} .sim-card .feat-go-lab{font-family:'Sora',sans-serif;font-weight:700;font-size:13.5px;color:#FCFAF8} .sim-card .feat-go-arr{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#161109; background:linear-gradient(135deg, var(--acc), var(--acc2));box-shadow:0 8px 18px -8px var(--glow); transition:transform .45s cubic-bezier(.22,1,.36,1)} .sim-card .feat-go-arr svg{width:17px;height:17px;transition:transform .45s cubic-bezier(.22,1,.36,1)} .sim-card .feat-card:hover{transform:translateY(-7px);box-shadow:0 34px 70px -28px rgba(20,12,8,.72), inset 0 1px 0 rgba(255,255,255,.14) !important} .sim-card .feat-card:hover .feat-photo{transform:scale(1.12);filter:blur(3px) saturate(.92) brightness(.76)} .sim-card .feat-card:hover .feat-halo{opacity:.7} .sim-card .feat-card:hover .feat-icon{box-shadow:inset 0 1px 0 rgba(255,255,255,.24), 0 12px 26px -10px var(--glow)} .sim-card .feat-card:hover .feat-go{background:linear-gradient(180deg, color-mix(in srgb,var(--acc) 16%, rgba(255,255,255,.07)), rgba(255,255,255,.045));border-color:color-mix(in srgb,var(--acc) 40%, rgba(255,255,255,.2))} .sim-card .feat-card:hover .feat-go-arr{transform:scale(1.06)} .sim-card .feat-card:hover .feat-go-arr svg{transform:translateX(2px)} @media(prefers-reduced-motion:reduce){ .sim-card .feat-card,.sim-card .feat-photo,.sim-card .feat-go-arr,.sim-card .feat-dot{transition:none;animation:none} .sim-card .feat-card:hover{transform:none} .sim-card .feat-card:hover .feat-photo{transform:scale(1.06)} } @media(max-width:860px){ .sim-card .feat-grid{grid-template-columns:1fr} } /* (2) LIQUID GLASS GRIS iOS — cartes claires (service + qualif), sur toutes les pages */ .el-serv-card, .el-qualif-card{ background: linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(236,240,246,.46) 100%) !important; -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4) !important; border: 1px solid rgba(255,255,255,.75) !important; box-shadow: 0 22px 48px -24px rgba(18,30,52,.24), 0 5px 14px -8px rgba(18,30,52,.12), inset 0 1px 0 rgba(255,255,255,.85), inset 0 0 0 1px rgba(255,255,255,.22) !important; isolation: isolate; } /* léger reflet diagonal (brillance iOS) */ .el-serv-card::after{ content:""; position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:inherit; background: linear-gradient(118deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,.05) 6%, transparent 15%); } /* (3) Image du haut en RETRAIT (le fond gris de la carte respire autour) */ .el-serv-card .el-serv-img{ margin: 10px 10px 0 !important; border-radius: 15px !important; height: 168px; box-shadow: 0 6px 16px -8px rgba(18,30,52,.3); } .el-serv-card .el-serv-img::after{ border-radius: 15px !important; background: linear-gradient(180deg, transparent 58%, rgba(12,7,4,.22) 100%) !important; } /* PV 4 colonnes : image un peu plus basse */ body.royslug-photovoltaique .el-serv-card .el-serv-img{ height: 138px; } /* ════════════════════════════════════════════════════════════════ v2.2 — LIQUID GLASS GRIS (iOS) généralisé à toutes les cartes claires pertinentes, sur toutes les pages. Exclus : .chart-box (graphiques), .cta-block (bloc coloré), et les fenêtres en verre coloré (déjà traitées). Texte sombre conservé (lisible sur gris). ════════════════════════════════════════════════════════════════ */ .aid-card, .aid-tl-card, .ap-blog-card, .ap-on-card, .ap-rev-card, .ap-soc-card, .ap-tl-card, .art-authorbox, .art-relcard, .avis-card, .revx-card, .el-rev-card, .bat-faq-item, .ct-faq-item, .dep-acc-item, .blog-card, .blog-eco-card, .cert-card, .cons-card, .dep-card, .dep-trust-card, .el-art-card, .el-why-item, .elec-work-card, .hc-card, .prix-card, .pv-house-card, .pv-sim-card, .result-reco-box, .tool-card, .upgrade-card, .vsf-panel, .zone2-card, .ct-form-card{ background: linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(236,240,246,.46) 100%) !important; -webkit-backdrop-filter: blur(15px) saturate(1.4); backdrop-filter: blur(15px) saturate(1.4) !important; border: 1px solid rgba(255,255,255,.75) !important; box-shadow: 0 16px 38px -20px rgba(18,30,52,.22), 0 4px 12px -7px rgba(18,30,52,.11), inset 0 1px 0 rgba(255,255,255,.85), inset 0 0 0 1px rgba(255,255,255,.22) !important; isolation: isolate; } /* Images du haut en RETRAIT (le fond gris respire autour) — cartes à image */ .el-art-card .el-art-img, .cons-card .cons-card-img{ margin: 10px 10px 0 !important; border-radius: 15px !important; box-shadow: 0 6px 16px -8px rgba(18,30,52,.3); } .el-art-card .el-art-img::after, .cons-card .cons-card-img::after{ border-radius: 15px !important; } /* Retrait des images (wrappers ) pour les cartes blog / articles liés */ .ap-blog-card .ap-blog-img, .blog-card .blog-card-img, .art-relcard .art-relcard-img, .blog-eco-card .blog-feat-img{ margin: 10px 10px 0 !important; border-radius: 15px !important; box-shadow: 0 6px 16px -8px rgba(18,30,52,.3); } /* ════════════════════════════════════════════════════════════════ v2.3 — Affinages liquid glass (demande Vicenté, captures 17/06) (1) Cartes vitrées posées sur FOND SOMBRE -> reviennent en BLANC CASSÉ plein (le verre gris translucide devenait terne/grisâtre). (2) Cartes claires (verre gris iOS) -> un peu plus MATES + arête renforcée pour mieux se détacher du fond clair. (3) Carte coordonnées contact -> verre GRAPHITE (fin de l'or jaune). (4) Badges catégorie des photos de chantier -> liquid glass propre, teinté de la couleur LÉGÈRE du métier. ════════════════════════════════════════════════════════════════ */ /* ---------- (2) CARTES CLAIRES : plus mates + arête nette ---------- S'applique à tout le verre gris iOS (v2.1 + v2.2). Les cartes sur fond sombre sont re-corrigées juste après (spécificité supérieure). */ .el-serv-card, .el-qualif-card, .aid-card, .aid-tl-card, .ap-blog-card, .ap-on-card, .ap-rev-card, .ap-soc-card, .ap-tl-card, .art-authorbox, .art-relcard, .avis-card, .revx-card, .el-rev-card, .bat-faq-item, .ct-faq-item, .dep-acc-item, .blog-card, .blog-eco-card, .cert-card, .cons-card, .dep-card, .dep-trust-card, .el-art-card, .el-why-item, .elec-work-card, .hc-card, .prix-card, .pv-house-card, .pv-sim-card, .result-reco-box, .tool-card, .upgrade-card, .vsf-panel, .zone2-card, .ct-form-card{ /* +opacité = plus mat ; dégradé un poil plus dense */ background: linear-gradient(180deg, rgba(255,255,255,.80) 0%, rgba(233,238,245,.66) 100%) !important; border: 1px solid rgba(255,255,255,.92) !important; box-shadow: 0 0 0 1px rgba(18,30,52,.06), /* arête : fin liseré sombre = détachement net */ 0 18px 40px -20px rgba(18,30,52,.26), 0 4px 12px -7px rgba(18,30,52,.12), inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.3) !important; } /* ---------- (1) FOND SOMBRE : retour au BLANC CASSÉ plein ---------- Conseils (.el-articles #0E0F14) + zone d'intervention accueil (.zone #0f0a07). Plein, sans flou, ombre portée marquée pour flotter. */ .el-articles .el-art-card, .zone .zone2-card, .ap-brand .ap-rev-card{ background:#FFFFFF !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; border:1px solid rgba(255,255,255,.55) !important; box-shadow: 0 28px 56px -22px rgba(0,0,0,.62), 0 10px 22px -10px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.95) !important; } /* coupe le reflet diagonal éventuel sur ces cartes redevenues opaques */ .el-articles .el-art-card::after{ display:none !important; } /* ---------- (3) CONTACT : carte coordonnées en VERRE GRAPHITE ------ On neutralise l'or (jaune) en redéfinissant les variables du verre après la règle métier v2.0. Texte blanc conservé (déjà géré). */ body.royslug-contact .ct-info-card{ --base:#3b4250; --light:#727b8d; --deep:#0e1116; --aura:#2c313c; --glow:rgba(10,13,18,.5); } /* ---------- (4) BADGES PHOTOS DE CHANTIER : liquid glass métier ----- Socle verre commun + teinte légère par métier. Texte blanc lisible sur photo. S'applique aux 3 familles : .realz-tag (accueil), .real-tag (sous-pages), .rea-pill (page réalisations). */ .realz-tag, .real-tag{ display:inline-flex !important; align-items:center; gap:6px; background:rgba(255,255,255,.16) !important; -webkit-backdrop-filter:blur(10px) saturate(1.3); backdrop-filter:blur(10px) saturate(1.3) !important; border:1px solid rgba(255,255,255,.34) !important; color:#fff !important; box-shadow:0 8px 18px -10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.42) !important; } /* teintes métier (couleur légère = translucide + claire) */ .realz-tag.pv, body.royslug-photovoltaique-toiture .real-tag{ background:color-mix(in srgb,#5FA32B 44%,transparent) !important; border-color:rgba(192,242,95,.5) !important; } .realz-tag.elec, body.royslug-borne-de-recharge .real-tag{ background:color-mix(in srgb,#D8A21B 46%,transparent) !important; border-color:rgba(255,219,77,.52) !important; } .realz-tag.chauf, body.royslug-climatisation .real-tag, body.royslug-gainable .real-tag, body.royslug-pompe-a-chaleur .real-tag, body.royslug-chaudiere .real-tag, body.royslug-vmc .real-tag{ background:color-mix(in srgb,#CC4A28 48%,transparent) !important; border-color:rgba(255,140,90,.5) !important; } .realz-tag.plomb, body.royslug-salle-de-bain .real-tag{ background:color-mix(in srgb,#3E85C0 44%,transparent) !important; border-color:rgba(124,203,255,.5) !important; } /* .rea-pill (page réalisations) : déjà teinté — on harmonise le verre (un peu plus propre : reflet d'arête + ombre douce) */ .rea-pill{ -webkit-backdrop-filter:blur(10px) saturate(1.3); backdrop-filter:blur(10px) saturate(1.3) !important; border:1px solid rgba(255,255,255,.36) !important; box-shadow:0 8px 18px -10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.4) !important; } .rea-pill.pv{ background:color-mix(in srgb,#5FA32B 46%,transparent) !important; } .rea-pill.elec{ background:color-mix(in srgb,#D8A21B 46%,transparent) !important; } .rea-pill.chauf{ background:color-mix(in srgb,#CC4A28 50%,transparent) !important; } .rea-pill.plomb{ background:color-mix(in srgb,#3E85C0 46%,transparent) !important; } /* ════════════════════════════════════════════════════════════════ v2.5 — (demande Vicenté, captures 17/06 #2) (1) FENÊTRES SCHÉMA « .how-panel » (espace chauffage & co) : le fond brun (--grad-dark) devient un VERRE LIQUIDE coloré de la couleur du métier. Texte + schéma rendus bien lisibles devant. (2) CARTES SERVICES « .sol-card » (toutes pages) : on retire le voile brun ; verre GRIS neutre qui laisse passer davantage la photo, tout en gardant le contenu de devant bien lisible. (Ne touche pas aux affinages v2.3 ni à la page mentions légales.) ════════════════════════════════════════════════════════════════ */ /* ---------- (1) .how-panel : verre liquide métier ---------- */ .how-panel{ /* défaut : ROUGE chauffage */ --hp-base:#e83c0f; --hp-light:#ff7a44; --hp-deep:#5a1a0a; --hp-glow:rgba(232,60,15,.42); background: linear-gradient(158deg, rgba(6,10,16,.42) 0%, rgba(6,10,16,.12) 26%, transparent 48%), radial-gradient(125% 150% at 50% -10%, color-mix(in srgb, var(--hp-light) 80%, transparent) 0%, color-mix(in srgb, var(--hp-base) 88%, transparent) 38%, color-mix(in srgb, var(--hp-deep) 95%, transparent) 100%) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px) url(#royliq); backdrop-filter: blur(6px) url(#royliq); border:1px solid rgba(255,255,255,.42) !important; box-shadow: 0 44px 84px -32px var(--hp-glow), 0 16px 38px -16px rgba(8,14,22,.40), inset 0 0 0 1px rgba(255,255,255,.5), inset 0 7px 6px -4px rgba(255,255,255,.55) !important; } /* couleur du métier par page */ body.royslug-ballon-eau-chaude .how-panel{ --hp-base:#2090e2; --hp-light:#7ccbff; --hp-deep:#143a5e; --hp-glow:rgba(32,144,226,.42); } body.royslug-borne-de-recharge .how-panel{ --hp-base:#e29a00; --hp-light:#ffdb4d; --hp-deep:#5a3c04; --hp-glow:rgba(226,154,0,.42); } /* chaudiere · climatisation · gainable · pompe-a-chaleur · vmc -> rouge (défaut) */ /* les halos d'angle suivent le métier (au lieu de rester orange) */ .how-panel::before{ background:radial-gradient(circle, color-mix(in srgb,var(--hp-light) 30%, transparent) 0%, transparent 70%) !important; } .how-panel::after { background:radial-gradient(circle, color-mix(in srgb,var(--hp-light) 16%, transparent) 0%, transparent 70%) !important; } /* canevas interne légèrement assombri -> tracés et textes du schéma bien voyants */ .how-panel .how-schema{ background:rgba(6,9,14,.16) !important; border-color:rgba(255,255,255,.18) !important; } .how-panel .how2-figure{ background:rgba(6,9,14,.28) !important; border-color:rgba(255,255,255,.20) !important; } /* renfort de lisibilité du texte de légende sous le schéma */ .how-panel .how2-cap-t{ color:rgba(255,255,255,.92) !important; } .how-panel .how-schema-sub{ color:rgba(255,255,255,.82) !important; } /* ---------- (2) .sol-card : verre gris qui révèle la photo ---------- */ /* image moins assombrie / moins floutée -> on voit mieux la photo */ .sol-bg{ filter: blur(1px) brightness(0.96) saturate(1.07) !important; } /* voile : BRUN -> GRIS neutre, léger en haut (photo visible), dégradé en bas pour la lisibilité du contenu. Léger effet verre. */ .sol-filter, .sol-filter.is-combo{ background: linear-gradient(180deg, rgba(18,20,26,.10) 0%, rgba(16,18,24,.20) 34%, rgba(12,14,18,.62) 66%, rgba(8,10,14,.86) 100%) !important; -webkit-backdrop-filter: blur(1.5px) saturate(1.05); backdrop-filter: blur(1.5px) saturate(1.05); } /* contenu de devant : on garde une ombre portée nette pour le détachement */ .sol-title{ text-shadow:0 2px 18px rgba(0,0,0,.62), 0 1px 3px rgba(0,0,0,.5) !important; } .sol-reason{ text-shadow:0 1px 10px rgba(0,0,0,.6) !important; } .sol-badge{ background:rgba(255,255,255,.18) !important; border-color:rgba(255,255,255,.34) !important; } /* ════════════════════════════════════════════════════════════════ v2.6 — (demande Vicenté, captures 17/06 #3) (1) Section AVIS : les 4 cartes d'avis (droite) prennent une TEINTE LÉGÈRE du métier (= couleur de la carte score de gauche), mais bien plus claire qu'elle. La couleur suit la page via --elec-soft. (2) Cartes conseils sur fond sombre -> BLANC franc (géré plus haut, #F4F6F9 -> #FFFFFF). (3) Barres colorées (.zone2-dashes) trop collées au bord supérieur : on agrandit le padding-haut des sections concernées. ════════════════════════════════════════════════════════════════ */ /* (1) cartes d'avis -> teinte métier très légère (plus claire que la carte score) */ .revx-card{ background:linear-gradient(165deg, #FFFFFF 0%, color-mix(in srgb, var(--elec-soft, #F6F8FB) 52%, #FFFFFF) 100%) !important; border:1px solid color-mix(in srgb, var(--elec, #E4E1DD) 24%, var(--gris-bord, #E4E1DD)) !important; } /* la barre latérale d'accent au survol reste celle du métier (déjà gérée par la page) */ /* (3) plus d'air au-dessus des barres colorées sur les sections à fond marqué. .el-articles (conseils, fond sombre) débute par .zone2-dashes avec seulement 18px en haut -> on agrandit la section. */ .el-articles{ padding-top:60px !important; } /* ════════════════════════════════════════════════════════════════ v2.7 — (demande Vicenté, captures 17/06 #4) B .how-panel : UN SEUL niveau de couleur (schéma à plat sur le verre) C countup hero : ne fait plus bouger l'image (grille figée) D ruban .hero-spec : verre unique de la couleur du métier E contact « Nos coordonnées » : VERRE BLANC (au lieu du graphite) F contact FAQ : moins gris / moins détaché du fond H mentions légales : sommaire gauche (barre mobile) I mentions légales : barre du haut en noir + fond standard ════════════════════════════════════════════════════════════════ */ /* ---------- B : how-panel à plat (un seul rouge) ---------- */ .how-panel .how-schema{ background:transparent !important; border-color:transparent !important; } .how-panel .how2-figure{ background:transparent !important; border-color:transparent !important; } /* ---------- C : countup ne déplace plus rien ---------- */ /* (ratio desktop uniquement — ≤1100 le hero se replie en 1 colonne, cf. responsive) */ @media (min-width:1101px){ .hero-grid{ grid-template-columns:minmax(0,0.78fr) minmax(0,1.22fr) !important; } } .hero-stats{ grid-template-columns:repeat(3, minmax(0,1fr)) !important; } .hero-stat-num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; } /* ---------- D : ruban hero-spec = verre unique du métier ---------- */ .hero-spec{ --sp:#e8501f; /* rouge chauffage par défaut */ background:linear-gradient(165deg, color-mix(in srgb, var(--sp) 26%, rgba(255,255,255,.16)) 0%, color-mix(in srgb, var(--sp) 14%, rgba(255,255,255,.08)) 100%) !important; border:1px solid rgba(255,255,255,.30) !important; box-shadow:0 14px 40px rgba(0,0,0,.26), inset 0 1px 1px rgba(255,255,255,.34) !important; } body.royslug-ballon-eau-chaude .hero-spec{ --sp:#2090e2; } body.royslug-borne-de-recharge .hero-spec{ --sp:#e29a00; } .hero-spec-tag{ background:color-mix(in srgb, var(--sp) 82%, #000 6%) !important; } .hero-spec-icon{ background:rgba(255,255,255,.17) !important; border-color:rgba(255,255,255,.28) !important; } /* [MAJ] cartes du carrousel = liquid glass CLASSIQUE (sans teinte metier) — pages ciblees */ body.royslug-chaudiere .hero-spec, body.royslug-gainable .hero-spec, body.royslug-pompe-a-chaleur .hero-spec, body.royslug-climatisation .hero-spec, body.royslug-photovoltaique-toiture .hero-spec, body.royslug-salle-de-bain .hero-spec, body.royslug-ballon-eau-chaude .hero-spec, body.royslug-renovation-electrique .hero-spec, body.royslug-borne-de-recharge .hero-spec, body.royslug-vmc .hero-spec, body.royslug-batterie-solaire .hero-spec{ background:linear-gradient(165deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.09) 100%) !important; } body.royslug-chaudiere .hero-spec-tag, body.royslug-gainable .hero-spec-tag, body.royslug-pompe-a-chaleur .hero-spec-tag, body.royslug-climatisation .hero-spec-tag, body.royslug-photovoltaique-toiture .hero-spec-tag, body.royslug-salle-de-bain .hero-spec-tag, body.royslug-ballon-eau-chaude .hero-spec-tag, body.royslug-renovation-electrique .hero-spec-tag, body.royslug-borne-de-recharge .hero-spec-tag, body.royslug-vmc .hero-spec-tag, body.royslug-batterie-solaire .hero-spec-tag{ background:rgba(28,30,36,.50) !important; } /* ---------- E : contact « Nos coordonnées » en VERRE BLANC ---------- */ body.royslug-contact .ct-info-card{ background:linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(236,240,246,.72) 100%) !important; -webkit-backdrop-filter:blur(16px) saturate(1.25); backdrop-filter:blur(16px) saturate(1.25) !important; border:1px solid rgba(255,255,255,.9) !important; box-shadow:0 0 0 1px rgba(18,30,52,.05), 0 24px 50px -26px rgba(18,30,52,.26), inset 0 1px 0 rgba(255,255,255,.9) !important; } body.royslug-contact .ct-info-card::before, body.royslug-contact .ct-info-card::after{ display:none !important; } body.royslug-contact .ct-info-card h3{ color:var(--bleu-nuit) !important; -webkit-text-fill-color:var(--bleu-nuit) !important; } body.royslug-contact .ct-info-card .section-eyebrow{ color:var(--orange-dark) !important; } body.royslug-contact .ct-info-card [class*="hl-"]{ color:var(--orange-dark) !important; -webkit-text-fill-color:var(--orange-dark) !important; } body.royslug-contact .ct-info-card p{ color:var(--gris-texte) !important; } body.royslug-contact .ct-line{ color:var(--bleu-nuit) !important; border-bottom-color:rgba(18,30,52,.08) !important; } body.royslug-contact .ct-line:hover{ color:var(--orange-dark) !important; } body.royslug-contact .ct-ic{ background:rgba(232,93,47,.12) !important; border:1px solid rgba(232,93,47,.22) !important; color:var(--orange-dark) !important; } body.royslug-contact .ct-hours{ background:rgba(248,249,251,.82) !important; border:1px solid rgba(18,30,52,.08) !important; } body.royslug-contact .ct-hours-head{ color:var(--bleu-nuit) !important; } body.royslug-contact .ct-hours li{ color:var(--gris-texte) !important; } body.royslug-contact .ct-hours li b{ color:var(--bleu-nuit) !important; } body.royslug-contact .ct-hours li.off, body.royslug-contact .ct-hours li.off b{ color:rgba(18,30,52,.42) !important; } body.royslug-contact .ct-hours li.today{ background:rgba(232,93,47,.10) !important; border-color:rgba(232,93,47,.28) !important; } body.royslug-contact .ct-hours li.today span, body.royslug-contact .ct-hours li.today b{ color:var(--bleu-nuit) !important; } body.royslug-contact .ct-hours li.today>span::after{ color:var(--orange-dark) !important; } body.royslug-contact .ct-hours-note{ color:rgba(18,30,52,.5) !important; } /* ---------- F : contact FAQ moins gris / moins détaché ---------- */ body.royslug-contact .ct-faq-item{ background:linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(245,247,250,.4) 100%) !important; border:1px solid rgba(18,30,52,.05) !important; box-shadow:0 6px 18px -13px rgba(18,30,52,.14) !important; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px) !important; } /* ---------- I : mentions légales — barre du haut en noir ---------- */ body.royslug-mentions-legales .topbar-secondary a{ color:#1A1410 !important; text-shadow:none !important; } body.royslug-mentions-legales .topbar-secondary .tb-sep{ color:rgba(26,20,16,.32) !important; } /* fond standard (comme les autres pages) : on retire le dégradé rouge + les blobs maison */ body.royslug-mentions-legales .ml-hero{ background:transparent !important; } body.royslug-mentions-legales .ml-blob{ display:none !important; } /* ---------- H : sommaire mentions légales (gauche, barre mobile) ---------- */ .ml-layout{ display:grid; grid-template-columns:230px 1fr; gap:50px; align-items:start; } .ml-toc{ position:sticky; top:122px; align-self:start; } .ml-toc-inner{ position:relative; display:flex; flex-direction:column; gap:1px; padding-left:18px; border-left:2px solid rgba(18,30,52,.10); } .ml-toc-bar{ position:absolute; left:-2px; top:0; width:2px; height:34px; border-radius:3px; background:linear-gradient(180deg,#FF8C42,#E85D2F); transition:transform .32s cubic-bezier(.4,0,.2,1), height .32s cubic-bezier(.4,0,.2,1); } .ml-toc-link{ display:block; padding:9px 0; font-size:13.5px; font-weight:600; line-height:1.3; color:var(--gris-texte); text-decoration:none; transition:color .2s ease; } .ml-toc-link:hover{ color:var(--bleu-nuit); } .ml-toc-link.active{ color:var(--orange-dark); } .ml-subh{ font-family:'Sora',sans-serif; font-weight:800; font-size:15px; color:var(--bleu-nuit); margin:26px 0 14px; } .ml-subh:first-of-type{ margin-top:18px; } .ml-subh span{ font-family:'Manrope',sans-serif; font-weight:600; font-size:12.5px; color:var(--gris-texte); } @media(max-width:980px){ .ml-layout{ grid-template-columns:1fr; gap:0; } .ml-toc{ display:none; } } /* ════════════════════════════════════════════════════════════════ v2.8 — page Politique de confidentialité (/donnees-personnelles) Même traitement d'en-tête que les mentions légales : barre du haut en noir + fond standard (pas de dégradé). Sommaire géré par .ml-toc. ════════════════════════════════════════════════════════════════ */ body.royslug-donnees-personnelles .topbar-secondary a{ color:#1A1410 !important; text-shadow:none !important; } body.royslug-donnees-personnelles .topbar-secondary .tb-sep{ color:rgba(26,20,16,.32) !important; } body.royslug-donnees-personnelles .ml-hero{ background:transparent !important; } body.royslug-donnees-personnelles .ml-blob{ display:none !important; } /* ════════════════════════════════════════════════════════════════ v2.9 — (captures 17/06 #5) A scroll fluide : supprime background-attachment:fixed (repaint) B pied de page : retire le trait vertical à gauche du filigrane O C salle de bain : grande fenêtre how-panel en BLEU (pas rouge) ════════════════════════════════════════════════════════════════ */ /* ---------- A : scroll fluide (plus de bg fixed) ---------- */ .cta-band, .eligi { background-attachment: scroll !important; } /* ---------- B : retire la barre à gauche du O (fond noir CTA) ---------- */ .cta-projet-bg{ -webkit-mask-image: linear-gradient(to right, transparent 0, #000 13%, #000 87%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 13%, #000 87%, transparent 100%); } /* ---------- C : salle de bain — how-panel BLEU ---------- */ body.royslug-salle-de-bain .how-panel{ --hp-base:#2090e2; --hp-light:#7ccbff; --hp-deep:#143a5e; --hp-glow:rgba(32,144,226,.42); } /* ---------- D : accent "vert" -> couleur du métier (cohérence) ---------- (les coches ✓ / pastilles utilisaient #3FA34D ; PV garde le vert, légitime) */ body.royslug-salle-de-bain, body.royslug-ballon-eau-chaude{ --vert:#2C6FA6; } body.royslug-pompe-a-chaleur, body.royslug-chaudiere, body.royslug-climatisation, body.royslug-gainable, body.royslug-vmc{ --vert:#B83719; } body.royslug-borne-de-recharge, body.royslug-renovation-electrique, body.royslug-depannage-electrique{ --vert:#B47C06; } /* ---------- E : section "Quel projet…" (.eligi) — retire le filtre BLEU ---------- On garde la photo + un voile sombre NEUTRE (lisibilité) au lieu du bleu nuit. */ body.royslug-salle-de-bain .eligi, body.royslug-ballon-eau-chaude .eligi{ background: linear-gradient(135deg, rgba(26,20,16,.84) 0%, rgba(26,20,16,.60) 100%), var(--img-eligi), #1A1410 !important; background-size:cover !important; background-position:center !important; background-attachment:scroll !important; } /* ---------- F : hero batterie — texte plus large (moins de marge) ---------- */ body.royslug-batterie-solaire .hero-subtitle{ max-width:600px !important; } /* ---------- G : pages AIDES — cohérence des sections (plus de bleu qui jure) ---------- .aid-sec.tint était bleu (--cool-mist) ; on passe sur un voile neutre chaud, cohérent avec les autres sections (cream/orange), sans surcharger de rouge. */ body[class*="aides"] .aid-sec.tint{ background:#F6F3EF !important; } /* ---------- H : ballon — fenêtre how-panel plus profonde + texte lisible ---------- */ body.royslug-ballon-eau-chaude .how-panel{ --hp-base:#1f74b8; --hp-light:#5fb0ec; --hp-deep:#0f3a60; --hp-glow:rgba(31,116,184,.40); } body.royslug-ballon-eau-chaude .how-schema-title{ text-shadow:0 2px 16px rgba(8,30,52,.55); } body.royslug-ballon-eau-chaude .how-schema-sub{ color:rgba(255,255,255,.86) !important; text-shadow:0 1px 12px rgba(8,30,52,.45); } /* ════════════════════════════════════════════════════════════════ v3.0 — (captures 17/06 #6) I pied de page : trait DES DEUX CÔTÉS du O retiré (mask 13%/87%) J hero : bloc texte décalé à gauche (plus de place, plus naturel) sur TOUTES les pages "split" SAUF accueil et photovoltaïque de base (qui sont déjà bien réglées). On s'aligne sur le réglage PV de base. ════════════════════════════════════════════════════════════════ */ @media (min-width:1101px){ body:not(.home):not(.royslug-photovoltaique) .hero-text{ padding-left: clamp(44px, 5.2vw, 92px) !important; } } /* ════════════════════════════════════════════════════════════════ v3.1 — RESPONSIVE : système HERO unifié (hors accueil) But : supprimer la zone intermédiaire cassée (texte tassé à gauche, colonne image vide) entre mobile et desktop. Breakpoint unique 1024px. ≥1024 (iPad Pro portrait + desktop) : 2 colonnes, photo visible. ≤1023 (tablette + mobile) : 1 colonne pleine largeur, photo masquée, titre fluide, largeur de lecture maîtrisée. ════════════════════════════════════════════════════════════════ */ @media (min-width:1024px){ body:not(.home) .hero-photo, body:not(.home) .hero-right{ display:block !important; } } @media (max-width:1023px){ body:not(.home) .hero-grid{ grid-template-columns:1fr !important; min-height:auto !important; gap:0 !important; } body:not(.home) .hero-photo, body:not(.home) .hero-right{ display:none !important; } body:not(.home) .hero-text{ max-width:760px !important; padding:clamp(104px,14vw,128px) clamp(24px,5vw,46px) 40px !important; } body:not(.home) .hero-text h1{ font-size:clamp(30px,5.6vw,46px) !important; line-height:1.08 !important; } } /* ════════════════════════════════════════════════════════════════ v3.2 — Menu (FERMER + filigrane O) & hero tablette pages principales ════════════════════════════════════════════════════════════════ */ /* (a) Label burger : VISIBLE + DROIT quand le menu est ouvert → affiche « FERMER » (le texte est permuté par nav-extras.js). Aucune rotation, jamais. */ body.menu-open .nav-burger .burger-label, body.menu-open .nav-bar .nav-burger .burger-label{ display:inline !important; transform:none !important; rotate:0deg !important; } .nav-burger .burger-label{ transform:none !important; rotate:0deg !important; } /* (b) Filigrane O du drawer (mobile + tablette) : tourné pour voir la pointe + agrandi — même esprit que le O des heros des pages principales. */ .mm-watermark{ transform:translateX(-46%) rotate(15deg) !important; width:96vw !important; height:108vw !important; max-width:520px !important; max-height:586px !important; opacity:0.06 !important; } /* (c) HERO PAGES PRINCIPALES (chauffage, plomberie, électricité, photovoltaïque) — tablette/mobile (≤1100) : 1 colonne, texte pleine largeur (titre sur 2 lignes), image/cartes EN DESSOUS, boutons sur 1 ligne. */ @media (max-width:1100px){ body.royslug-chauffage .hero-grid, body.royslug-plomberie .hero-grid, body.royslug-electricite .hero-grid, body.royslug-photovoltaique .hero-grid{ grid-template-columns:1fr !important; min-height:auto !important; gap:0 !important; } body.royslug-chauffage .hero-text, body.royslug-plomberie .hero-text, body.royslug-electricite .hero-text, body.royslug-photovoltaique .hero-text{ order:1 !important; max-width:none !important; padding:clamp(140px,17vw,152px) clamp(24px,5vw,46px) 0 !important; } body.royslug-chauffage .hero-right, body.royslug-plomberie .hero-right, body.royslug-electricite .hero-right, body.royslug-photovoltaique .hero-right{ display:block !important; order:2 !important; width:100% !important; margin-top:26px !important; min-height:0 !important; height:auto !important; } /* titre : pleine largeur → « Votre expert » / « en X » sur 2 lignes */ body.royslug-chauffage .hero-headline, body.royslug-plomberie .hero-headline, body.royslug-electricite .hero-headline, body.royslug-photovoltaique .hero-headline{ font-size:clamp(34px,5.6vw,50px) !important; line-height:1.1 !important; } body.royslug-chauffage .hero-headline .hh-lead, body.royslug-plomberie .hero-headline .hh-lead, body.royslug-electricite .hero-headline .hh-lead, body.royslug-photovoltaique .hero-headline .hh-lead{ white-space:nowrap !important; } /* boutons CTA : 1 ligne chacun (pas de retour de la flèche) */ body.royslug-chauffage .hero-ctas, body.royslug-plomberie .hero-ctas, body.royslug-electricite .hero-ctas, body.royslug-photovoltaique .hero-ctas{ display:flex !important; flex-wrap:wrap !important; gap:12px !important; } body.royslug-chauffage .hero-ctas > a, body.royslug-plomberie .hero-ctas > a, body.royslug-electricite .hero-ctas > a, body.royslug-photovoltaique .hero-ctas > a{ white-space:nowrap !important; width:auto !important; } } /* ════════════════════════════════════════════════════════════════ v3.2 — Correctifs contenu tablette : stats, titre mobile, carte, cartes ════════════════════════════════════════════════════════════════ */ /* (d) Stats hero (« 20 ans / NF C 15-100 / 100% ») : ne JAMAIS se chevaucher. minmax(0,1fr) autorise les colonnes à rétrécir + police fluide ≤1200. */ .hero-stats{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; } .hero-stat-num{ overflow-wrap:break-word; } @media (max-width:1200px){ .hero-stats{ gap:16px !important; } .hero-stat-num{ font-size:clamp(18px,2.05vw,30px) !important; white-space:normal !important; } } @media (max-width:560px){ .hero-stats{ grid-template-columns:1fr !important; gap:18px !important; } .hero-stat-num{ font-size:24px !important; } } /* (e) Mobile : titre des pages principales un peu plus gros (lisibilité). */ @media (max-width:560px){ body.royslug-chauffage .hero-headline, body.royslug-plomberie .hero-headline, body.royslug-electricite .hero-headline, body.royslug-photovoltaique .hero-headline{ font-size:clamp(37px,10vw,50px) !important; line-height:1.08 !important; } } /* (f) Carte Deux-Sèvres (zone2) : collée au bord DROIT (plus de coupure visible) + légèrement agrandie. Desktop : ancrée à droite. Tablette : pleine largeur. */ @media (min-width:1025px){ .zone2-map{ left:auto !important; right:0 !important; width:57vw !important; max-width:1120px !important; } } @media (max-width:1024px){ .zone2-map{ left:auto !important; right:auto !important; width:100% !important; max-width:840px !important; margin-left:auto !important; margin-right:auto !important; } } /* (g) Cartes de contenu (« conseils »/« solutions »/« outils ») : sur tablette, éviter l'empilement absolu qui se chevauche → grille en flux. Le deck animé (cartes superposées façon « Uno ») reste réservé au mobile (≤560). */ @media (min-width:561px) and (max-width:1100px){ .solutions-grid{ display:grid !important; grid-template-columns:repeat(2,1fr) !important; height:auto !important; position:static !important; gap:20px !important; } .tools-grid{ display:grid !important; grid-template-columns:repeat(2,1fr) !important; height:auto !important; position:static !important; gap:22px !important; } .solutions-grid .card-stack-item, .tools-grid .card-stack-item{ position:static !important; width:auto !important; transform:none !important; left:auto !important; top:auto !important; } .swipe-hint{ display:none !important; } } /* ════════════════════════════════════════════════════════════════ v3.3 — En-tête flottant tablette + bento conseils + O menu ════════════════════════════════════════════════════════════════ */ /* (h) Conseils accueil (bento) : sur tablette, grille propre sans chevauchement. La carte vedette passe en pleine largeur, le reste en 2 colonnes. */ @media (min-width:561px) and (max-width:1100px){ .conseils-bento{ display:grid !important; grid-template-columns:1fr 1fr !important; grid-auto-rows:auto !important; gap:16px !important; } .conseils-bento > *{ grid-column:auto !important; grid-row:auto !important; min-height:232px; } .conseils-bento > .cb-feature{ grid-column:1 / -1 !important; min-height:300px; } } @media (max-width:560px){ .conseils-bento{ display:flex !important; flex-direction:column !important; gap:14px !important; } .conseils-bento > *{ width:100% !important; grid-column:auto !important; grid-row:auto !important; min-height:210px; } } /* (i) Note Google (accueil) : alignée à droite, sous le menu (desktop) — position d'origine. (Le centrage horizontal précédent a été retiré à la demande : la note reprend right:28px.) */ /* (v3.4) Cohérence : sous l'en-tête flottant, le contenu de TOUS les heros démarre ~145px (≈ hauteur barre + respiration). a-propos en 1 colonne (≤980) inclus. NB : a-propos en 2 colonnes (981-1100) garde padding:0 → l'image monte jusqu'en haut. */ @media (max-width:980px){ body.royslug-a-propos .ap-hero{ padding-top:clamp(140px,17vw,152px) !important; } } /* ════════════════════════════════════════════════════════════════ v3.5 — Tablette / téléphone PAYSAGE (tactile) : layout mobile à TOUTE largeur ════════════════════════════════════════════════════════════════ Sur un appareil tactile large (>1100px, ex. iPad paysage), les règles desktop @media(min-width:1101px) se déclenchaient EN MÊME TEMPS que les règles tactiles → hero 2 colonnes + photo absolue visible → les boutons passaient hors écran / derrière la photo → AUCUN clic possible. Ce bloc (placé en dernier, condition tactile) gagne la cascade à toute largeur et rétablit le layout mobile 1 colonne propre. */ @media (hover:none) and (pointer:coarse){ .hero, .hero-grid, .hero-right{ min-height:auto !important; } .hero-grid, body.royslug-chauffage .hero-grid, body.royslug-plomberie .hero-grid, body.royslug-electricite .hero-grid, body.royslug-photovoltaique .hero-grid{ grid-template-columns:1fr !important; gap:0 !important; } .hero-photo, #hero-visual{ display:none !important; } .hero-stats{ grid-template-columns:1fr 1fr !important; } } /* ════════════════════════════════════════════════════════════════ v3.6 — État ACTIF du menu mobile : "vous êtes ici" Survol = NEUTRE. Sélection = pastille pastel (métier pour les pages métier, neutre pour Accueil/A propos/Contact…) + barre-curseur à gauche. ════════════════════════════════════════════════════════════════ */ @media (max-width:1100px), (hover:none) and (pointer:coarse){ .mobile-menu .mobile-link, .mobile-menu .mobile-sublink, .mobile-menu .mobile-acc-head{ position:relative; } /* page de 1er niveau active (Accueil, Nos conseils, A propos, Contact…) : pastille NEUTRE */ .mobile-menu .mobile-link.active:not(.mobile-acc-label){ background:rgba(43,36,32,0.07) !important; color:#1c1a18 !important; padding:13px 18px 13px 22px !important; border-radius:13px !important; width:auto !important; align-self:flex-start; overflow:hidden; } /* page métier principale active (label /electricite, /plomberie…) : pastille MÉTIER pastel */ .mobile-menu .mobile-acc-label.active{ padding:13px 16px 13px 20px !important; border-radius:13px !important; overflow:hidden; } .mobile-menu .mobile-acc-label[data-dom="pv"].active{ background:rgba(79,138,30,0.14) !important; color:#4F8A1E !important; } .mobile-menu .mobile-acc-label[data-dom="elec"].active{ background:rgba(180,124,6,0.16) !important; color:#B47C06 !important; } .mobile-menu .mobile-acc-label[data-dom="plomb"].active{ background:rgba(44,111,166,0.14) !important; color:#2C6FA6 !important; } .mobile-menu .mobile-acc-label[data-dom="chauf"].active{ background:rgba(184,55,25,0.14) !important; color:#B83719 !important; } /* sous-lien actif : pastille métier (posée plus haut) + retrait pour la barre */ .mobile-menu .mobile-sublink.active{ padding-left:20px !important; overflow:hidden; } /* section active (on est sur une sous-page) : label métier coloré, sans pastille */ .mobile-menu .mobile-acc-label[data-dom="pv"].is-active{ color:#4F8A1E !important; } .mobile-menu .mobile-acc-label[data-dom="elec"].is-active{ color:#B47C06 !important; } .mobile-menu .mobile-acc-label[data-dom="plomb"].is-active{ color:#2C6FA6 !important; } .mobile-menu .mobile-acc-label[data-dom="chauf"].is-active{ color:#B83719 !important; } /* barre-curseur à gauche de la pastille (couleur = couleur du texte actif) */ .mobile-menu .mobile-link.active:not(.mobile-acc-label)::before, .mobile-menu .mobile-acc-label.active::before, .mobile-menu .mobile-sublink.active::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:5px; background:currentColor; } } /* ===== v3.8 — Vidéo de fond du hero (remplace l'image, cadre & proportions inchangés) ===== */ .hero-photo .hero-bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;border:0;margin:0;padding:0;pointer-events:none;background:#0c0704} /* ===== Bouton Contact : couleur du métier de la page (noir si pas de métier) ===== */ body.royslug-photovoltaique .btn-contact, body.royslug-photovoltaique-toiture .btn-contact, body.royslug-batterie-solaire .btn-contact, body.royslug-aides-photovoltaique .btn-contact, body.royslug-simulateur-solaire .btn-contact{ background:#4F8A1E; } body.royslug-electricite .btn-contact, body.royslug-renovation-electrique .btn-contact, body.royslug-depannage-electrique .btn-contact, body.royslug-borne-de-recharge .btn-contact, body.royslug-vmc .btn-contact, body.royslug-aides-electricite .btn-contact{ background:#B47C06; } body.royslug-plomberie .btn-contact, body.royslug-salle-de-bain .btn-contact, body.royslug-ballon-eau-chaude .btn-contact, body.royslug-aides-sanitaire .btn-contact{ background:#2C6FA6; } body.royslug-chauffage .btn-contact, body.royslug-climatisation .btn-contact, body.royslug-gainable .btn-contact, body.royslug-chaudiere .btn-contact, body.royslug-pompe-a-chaleur .btn-contact, body.royslug-simulateur-chauffage .btn-contact, body.royslug-aides-chauffage .btn-contact{ background:#B83719; } /* hover : même teinte, légèrement éclaircie (pas d'orange générique) */ body[class*="royslug-photovoltaique"] .btn-contact:hover, body.royslug-batterie-solaire .btn-contact:hover, body.royslug-simulateur-solaire .btn-contact:hover{ background:#5FA32B; } body.royslug-electricite .btn-contact:hover, body.royslug-renovation-electrique .btn-contact:hover, body.royslug-depannage-electrique .btn-contact:hover, body.royslug-borne-de-recharge .btn-contact:hover, body.royslug-vmc .btn-contact:hover, body.royslug-aides-electricite .btn-contact:hover{ background:#D8A21B; } body.royslug-plomberie .btn-contact:hover, body.royslug-salle-de-bain .btn-contact:hover, body.royslug-ballon-eau-chaude .btn-contact:hover, body.royslug-aides-sanitaire .btn-contact:hover{ background:#3E85C0; } body.royslug-chauffage .btn-contact:hover, body.royslug-climatisation .btn-contact:hover, body.royslug-gainable .btn-contact:hover, body.royslug-chaudiere .btn-contact:hover, body.royslug-pompe-a-chaleur .btn-contact:hover, body.royslug-simulateur-chauffage .btn-contact:hover, body.royslug-aides-chauffage .btn-contact:hover{ background:#D24B26; } /* ===== Cartes flottantes sur l'image/vidéo : tag en glass sombre premium (pas de couleur métier) ===== */ .hero-spec-tag{ background: rgba(15,18,24,.46) !important; -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border: 1px solid rgba(255,255,255,.26) !important; color: #fff !important; box-shadow: 0 6px 18px rgba(0,0,0,.28); } /* ════════════════════════════════════════════════════════════════ v3.12.17 — Conteneur des simulateurs : refonte "perle / verre liquide" Cible UNIQUEMENT les .sim-card qui contiennent les cartes (PV + plomberie) via :has(.feat-grid) — les autres .sim-card (sim-item/sim-grid) ne bougent pas. Couleur pilotée par page : vert (PV, défaut) / bleu (plomberie). ════════════════════════════════════════════════════════════════ */ .sim-card:has(.feat-grid){ --acc:#5FB033; --acc2:#3B7A18; --m:#4F9A26; --mglow:rgba(95,176,51,.34); border-radius:32px !important; padding:50px 46px 46px !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; border:1px solid rgba(255,255,255,.9) !important; background: radial-gradient(86% 66% at 88% -14%, color-mix(in srgb, var(--acc) 22%, transparent) 0%, color-mix(in srgb, var(--acc) 6%, transparent) 38%, transparent 66%), radial-gradient(70% 62% at 8% 114%, color-mix(in srgb, var(--acc) 12%, transparent), transparent 58%), linear-gradient(168deg, #FFFFFF 0%, #F1F4EF 100%) !important; box-shadow: 0 50px 100px -56px var(--mglow), 0 36px 80px -36px rgba(26,20,16,.16), 0 10px 26px -14px rgba(26,20,16,.07), inset 0 1px 0 rgba(255,255,255,1), inset 0 0 0 1px rgba(255,255,255,.5) !important; } body.royslug-plomberie .sim-card:has(.feat-grid){ --acc:#4FA0E0; --acc2:#2C6FA6; --m:#2C6FA6; --mglow:rgba(79,160,224,.32); } /* ::before — texture de points en filigrane (remplace l'éclat coloré interne) */ .sim-card:has(.feat-grid)::before{ z-index:0 !important; transform:none !important; opacity:.7; background:none !important; background-image:radial-gradient(rgba(26,20,16,.05) 1px, transparent 1.5px) !important; background-size:24px 24px !important; -webkit-mask-image:radial-gradient(130% 96% at 50% -8%, #000 0%, rgba(0,0,0,.5) 42%, transparent 74%); mask-image:radial-gradient(130% 96% at 50% -8%, #000 0%, rgba(0,0,0,.5) 42%, transparent 74%); } /* ::after — reflet de verre (lumière haute + sheen) */ .sim-card:has(.feat-grid)::after{ z-index:0 !important; transform:none !important; background: radial-gradient(120% 42% at 50% -4%, rgba(255,255,255,.7), transparent 72%), linear-gradient(122deg, rgba(255,255,255,.65) 0%, rgba(255,255,255,.12) 6%, transparent 15%) !important; } /* contenu au-dessus des décorations */ .sim-card:has(.feat-grid) > .sim-intro, .sim-card:has(.feat-grid) > .feat-grid{ position:relative; z-index:1; } /* textes : passage du blanc (sur verre vif) vers encre / accent métier */ .sim-card:has(.feat-grid) .section-eyebrow{ display:inline-flex; align-items:center; gap:10px; color:var(--m) !important; -webkit-text-fill-color:var(--m) !important; opacity:1 !important; } .sim-card:has(.feat-grid) .section-eyebrow::before{ content:''; width:24px; height:2px; border-radius:2px; flex:0 0 auto; background:linear-gradient(90deg, var(--acc), var(--acc2)); } .sim-card:has(.feat-grid) .sim-intro h2{ color:#1A1410 !important; font-size:clamp(28px,3.4vw,40px) !important; letter-spacing:-.015em; } .sim-card:has(.feat-grid) .sim-intro h2 [class*="hl-"]{ color:transparent !important; -webkit-text-fill-color:transparent !important; background:linear-gradient(116deg, var(--acc), var(--acc2)) !important; -webkit-background-clip:text !important; background-clip:text !important; text-shadow:none !important; animation:none !important; } .sim-card:has(.feat-grid) .sim-intro > p{ color:#6B6157 !important; } @media(max-width:860px){ .sim-card:has(.feat-grid){ padding:34px 22px 30px !important; border-radius:26px !important; } } /* ════════════════════════════════════════════════════════════════ v3.12.19 — ARTICLE (single) : 3 ajustements 1) Sidebar (sommaire + CTA + "Continuer à lire") qui SUIT le scroll puis s'arrête à la fin de la colonne d'article (avant "Pour aller plus loin"). Le sticky était cassé par body{overflow-x:hidden} (-> body devient conteneur de défilement). overflow-x:clip corrige sans réintroduire de scroll horizontal. Filet de sécurité ici. 2) Encart ".art-sidecta" : fond PHOTO du dépôt (Parthenay) + écran fumé noir premium, pour une carte sobre et lisible (texte/boutons). 3) En-tête replié au scroll (logo seul) : légèrement abaissé pour ne plus être collé à la barre du haut. ════════════════════════════════════════════════════════════════ */ /* 1 — Sticky robuste de la colonne latérale ------------------------ */ body.single-post{ overflow-x:clip; } body.single-post .art-side{ position:sticky; top:96px; align-self:start; } /* 2 — Encart CTA latéral : photo + verre fumé noir premium --------- */ .art-sidecta{ background: linear-gradient(165deg, rgba(8,10,13,.90) 0%, rgba(10,12,16,.72) 44%, rgba(7,9,12,.88) 100%), url('/wp-content/uploads/2026/06/roy-habitat-parthenay-copie.jpg') center/cover no-repeat !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; box-shadow: 0 34px 66px -28px rgba(0,0,0,.58), inset 0 0 0 1px rgba(255,255,255,.16), inset 0 6px 4px -3px rgba(255,255,255,.20) !important; } /* on neutralise le halo coloré interne (carte = verre fumé neutre) */ .art-sidecta::before{ background:none !important; } /* lisibilité fine du texte sur la photo assombrie */ .art-sidecta strong{ text-shadow:0 1px 14px rgba(0,0,0,.55); } .art-sidecta p{ color:rgba(255,255,255,.74) !important; } /* bouton secondaire = pastille verre dépoli (lisible sur photo) */ .art-sidecta-b a.s{ background:rgba(255,255,255,.12) !important; border-color:rgba(255,255,255,.30) !important; -webkit-backdrop-filter:blur(6px) saturate(1.1); backdrop-filter:blur(6px) saturate(1.1); } .art-sidecta-b a.s:hover{ background:rgba(255,255,255,.20) !important; } /* 3 — En-tête replié (logo seul) légèrement descendu --------------- */ body.single-post #header.nav-collapsed{ padding-top:16px !important; }