instead (below). */ background: var(--black); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Prevent horizontal sway while scrolling: any oversized element (large titles, wide images) gets visually clipped to the viewport instead of forcing a horizontal scroll. `clip` avoids creating a scroll container, so `position: fixed` children (e.g. the mobile dock) still anchor to the viewport. */ overflow-x: clip; } html { overflow-x: clip; } /* Carries the white page background (body is black for the iOS strip). */ main { background: var(--white); } img { max-width: 100%; display: block; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; margin: 0; color: var(--text-dark); letter-spacing: -0.01em; } p { margin: 0; } [hidden] { display: none !important; } /* ---------- LAYOUT ---------- */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; } @media (min-width: 768px) { .container { padding: 0 40px; } } /* Wider container variant used by the products section so a 4th card can fit on a single row at very wide viewports without squishing the original three. Below the wide breakpoint it behaves like .container. */ .container--wide-products { max-width: var(--container); } @media (min-width: 1700px) { .container--wide-products { max-width: 1680px; } } .section { padding: var(--section-y) 0; } .section--dark { background: var(--black); color: var(--white); } .section--dark h1, .section--dark h2, .section--dark h3 { color: var(--white); } .section--light { background: var(--bg-light); } .section--gold { background: var(--gold); color: var(--white); } .section--gold h1, .section--gold h2 { color: var(--white); } /* ---------- TYPOGRAPHY ---------- */ .eyebrow { font-family: var(--font-body); font-weight: 600; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-gold-text); margin: 0 0 16px 0; } /* Preserve the bright gold for eyebrows on dark sections (passes AA on black). */ .section--dark .eyebrow, .section--gold .eyebrow, .calc-section .eyebrow { color: var(--gold); } .h2 { font-size: 28px; font-family: var(--font-display); font-weight: 700; margin: 0; } @media (min-width: 768px) { .h2 { font-size: 40px; } } .gold-rule { width: 0; height: 2px; background: var(--gold); margin: 24px 0 0; border: 0; transition: width 0.8s var(--easing) 0.15s; } .gold-rule.is-visible { width: 56px; } .section__head { margin-bottom: 56px; } .section__head--center { text-align: center; max-width: 760px; margin-left: auto; margin-right: auto; } .section__head--center .gold-rule { margin-left: auto; margin-right: auto; } .section__intro { font-size: 20px; color: var(--text-mid); max-width: 600px; margin: 24px auto 0; text-align: center; } .section--dark .section__intro { color: rgba(255, 255, 255, 0.65); } .br-mobile { display: none; } @media (max-width: 767px) { .br-mobile { display: inline; } } /* ---------- BUTTONS ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 32px; font-family: var(--font-body); font-weight: 600; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 3px; transition: all 0.25s var(--easing); cursor: pointer; white-space: nowrap; border: 2px solid transparent; } .btn--primary { background: var(--gold); color: var(--white); } @media (hover: hover) { .btn--primary:hover { background: var(--gold-dark); } } .btn--outline-white { border-color: var(--white); color: var(--white); background: transparent; } @media (hover: hover) { .btn--outline-white:hover { background: var(--white); color: var(--black); } } .btn--outline-gold { border-color: var(--gold); color: var(--gold); background: transparent; } @media (hover: hover) { .btn--outline-gold:hover { background: var(--gold); color: var(--white); } } .btn--white { background: var(--white); color: var(--gold-dark); } @media (hover: hover) { .btn--white:hover { background: var(--bg-light); transform: translateY(-1px); } } /* ========================================================= HEADER ========================================================= */ /* Old fixed-header rules removed header is now controlled by hero-atelier.css */ .header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 24px; } .logo { display: inline-flex; flex-direction: column; line-height: 1; text-decoration: none; } .logo__primary { font-family: var(--font-body); font-weight: 700; font-size: 24px; color: var(--white); letter-spacing: 0.04em; } .logo__secondary { font-family: var(--font-body); font-weight: 600; font-size: 12px; color: var(--gold); letter-spacing: 0.24em; margin-top: 4px; text-transform: uppercase; } /* Desktop nav */ .nav { display: none; } @media (min-width: 1024px) { .nav { display: flex; align-items: center; gap: 32px; margin: 0 auto; } } .nav__item { position: relative; } .nav__link { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-body); font-weight: 600; font-size: 15px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--white); padding: 8px 0; transition: color 0.2s ease; } @media (hover: hover) { .nav__link:hover { color: var(--gold); } } .nav__caret { width: 10px; height: 10px; opacity: 0.7; } .dropdown { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(8px); min-width: 220px; background: rgba(13, 13, 13, 0.98); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 6px; padding: 8px; opacity: 0; pointer-events: none; transition: all 0.25s var(--easing); box-shadow: var(--shadow-md); } /* Invisible hover bridge: keeps the dropdown open while the cursor crosses the gap between the nav link and the menu. */ .dropdown::before { content: ''; position: absolute; left: 0; right: 0; top: -16px; height: 16px; } .nav__item:focus-within .dropdown { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } @media (hover: hover) { .nav__item:hover .dropdown { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } } .dropdown a { display: block; padding: 10px 14px; font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.85); border-radius: 4px; transition: all 0.15s ease; } @media (hover: hover) { .dropdown a:hover { background: rgba(190, 142, 72, 0.12); color: var(--gold); } } /* Header right */ .header-right { display: flex; align-items: center; gap: 16px; } .header-phone { display: none; font-family: var(--font-body); font-weight: 600; font-size: 16px; color: var(--white); letter-spacing: 0.02em; } @media (hover: hover) { .header-phone:hover { color: var(--gold); } } @media (min-width: 1280px) { .header-phone { display: inline-flex; align-items: center; gap: 6px; } } .header-cta { display: none; padding: 12px 22px; font-size: 14px; } @media (min-width: 1024px) { .header-cta { display: inline-flex; } } .lang-toggle { position: relative; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-weight: 600; font-size: 14px; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.7); } .lang-toggle button { width: 24px; padding: 6px 0; text-align: center; color: rgba(255, 255, 255, 0.6); font-weight: 600; font-size: 14px; letter-spacing: 0.08em; transition: color 0.25s ease; border: 0; background: transparent; position: relative; z-index: 1; line-height: 1; } @media (hover: hover) { .lang-toggle button:hover { color: var(--white); } } .lang-toggle button.is-active { color: var(--gold); } .lang-toggle button::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: center; transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1); } .lang-toggle button.is-active::after { transform: scaleX(1); } .lang-sep { color: rgba(255, 255, 255, 0.25); } /* Hamburger */ .hamburger { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; width: 40px; height: 40px; gap: 5px; } .hamburger span { display: block; width: 22px; height: 2px; background: var(--white); transition: all 0.3s var(--easing); } @media (min-width: 1024px) { .hamburger { display: none; } } body.menu-open .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.menu-open .hamburger span:nth-child(2) { opacity: 0; } body.menu-open .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile menu */ .mobile-menu { position: fixed; inset: 0; background: var(--black); z-index: 99; display: flex; flex-direction: column; padding: calc(var(--header-h) + 32px) 24px 32px; opacity: 0; pointer-events: none; transform: translateY(-12px); transition: all 0.3s var(--easing); overflow-y: auto; } body.menu-open .mobile-menu { opacity: 1; pointer-events: auto; transform: translateY(0); } .mobile-menu__list { list-style: none; padding: 0; margin: 0 0 32px 0; display: flex; flex-direction: column; gap: 4px; } .mobile-menu__list a { display: block; padding: 16px 0; font-family: var(--font-display); font-size: 28px; color: var(--white); font-weight: 700; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } @media (hover: hover) { .mobile-menu__list a:hover { color: var(--gold); } } .mobile-menu__sub { list-style: none; padding-left: 16px; margin: 0; border-left: 2px solid rgba(190, 142, 72, 0.4); } .mobile-menu__sub a { font-family: var(--font-body); font-size: 18px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04); } .mobile-menu__cta { margin-top: auto; display: flex; flex-direction: column; gap: 16px; padding-top: 24px; } .mobile-menu__phone { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--gold); text-align: center; display: block; padding: 12px 0; } @media (min-width: 1024px) { .mobile-menu { display: none; } } /* ========================================================= MOBILE DOCK (wide bottom bar, icon-over-label, < 1024px only) ========================================================= */ .vz-dock { position: fixed; left: 50vw; bottom: max(12px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: calc(100vw - 24px); max-width: 520px; z-index: 90; pointer-events: none; will-change: transform; } /* Initial off-screen state. Removed by JS once the user scrolls past the hero (or past ~70% of the first viewport on hero-less pages). The transition only applies while the dock is hidden or in mid-reveal so it never interferes with the per-frame translate updates performed by initDockScroll() after activation. */ .vz-dock.vz-dock--hidden-initial, .vz-dock.vz-dock--revealing { transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1); } .vz-dock.vz-dock--hidden-initial { transform: translate3d(-50%, calc(100% + 48px), 0); } .vz-dock__inner { pointer-events: auto; display: flex; align-items: stretch; gap: 0; padding: 6px 4px; border-radius: 20px; background: rgba(13, 13, 13, 0.84); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(190, 142, 72, 0.3); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.38), 0 2px 8px rgba(0, 0, 0, 0.22); } .vz-dock__btn { position: relative; flex: 1 1 0; min-width: 0; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 0 6px; border-radius: 14px; color: rgba(248, 244, 235, 0.78); background: transparent; font-family: var(--font-body); -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background-color 0.2s var(--easing), color 0.2s var(--easing), transform 0.15s var(--easing); } .vz-dock__btn:focus-visible { background: rgba(190, 142, 72, 0.14); color: var(--white); } @media (hover: hover) { .vz-dock__btn:hover { background: rgba(190, 142, 72, 0.14); color: var(--white); } } .vz-dock__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .vz-dock__btn:active { transform: scale(0.96); } .vz-dock__btn.is-active { color: var(--gold); background: rgba(190, 142, 72, 0.16); } .vz-dock__btn i, .vz-dock__btn svg { width: 22px; height: 22px; stroke-width: 2; flex: 0 0 auto; } .vz-dock__label { font-size: clamp(10px, 3vw, 12px); font-weight: 600; letter-spacing: 0; line-height: 1.1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* Hide on desktop and when the fullscreen mobile menu is open. */ @media (min-width: 1024px) { .vz-dock { display: none; } } body.menu-open .vz-dock { opacity: 0; pointer-events: none; transition: opacity 0.2s var(--easing); } /* ========================================================= HERO ========================================================= */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; color: var(--white); overflow: hidden; padding-top: var(--header-h); } .hero__bg { position: absolute; inset: 0; background-image: url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=1600'); background-size: cover; background-position: center; z-index: 0; } .hero__overlay { position: absolute; inset: 0; background: linear-gradient( to right, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.55) 50%, rgba(0, 0, 0, 0.4) 100% ); z-index: 1; } .hero__inner { position: relative; z-index: 2; width: 100%; } .hero__content { max-width: 720px; } .hero__h1 { font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 1.05; letter-spacing: -0.02em; color: var(--white); } @media (min-width: 768px) { .hero__h1 { font-size: 56px; } } @media (min-width: 1024px) { .hero__h1 { font-size: 64px; } } .hero__h1 em { font-style: italic; color: var(--gold); font-weight: 700; } .hero__subtitle { margin-top: 24px; max-width: 540px; font-size: 19px; line-height: 1.65; color: rgba(255, 255, 255, 0.85); } @media (min-width: 768px) { .hero__subtitle { font-size: 20px; } } .hero__ctas { display: flex; flex-direction: column; gap: 16px; margin-top: 40px; } @media (min-width: 640px) { .hero__ctas { flex-direction: row; flex-wrap: wrap; } } .hero__scroll { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 2; width: 24px; height: 40px; border: 2px solid rgba(255, 255, 255, 0.4); border-radius: 12px; display: none; } .hero__scroll::before { content: ''; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 4px; height: 8px; background: var(--white); border-radius: 2px; animation: scrollDot 2s ease-in-out infinite; } @keyframes scrollDot { 0%, 100% { transform: translate(-50%, 0); opacity: 1; } 50% { transform: translate(-50%, 12px); opacity: 0.4; } } @media (min-width: 1024px) { .hero__scroll { display: block; } } /* ========================================================= TRUST BAR ========================================================= */ .trust-bar { background: var(--black); padding: 24px 0; border-top: 1px solid rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .trust-bar__inner { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 12px; } @media (min-width: 640px) { .trust-bar__inner { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1024px) { .trust-bar__inner { grid-template-columns: repeat(7, 1fr); gap: 0; } } .trust-item { text-align: center; position: relative; padding: 0 8px; } @media (min-width: 1024px) { .trust-item:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 36px; background: #333; } } .trust-item__label { font-family: var(--font-body); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); margin-bottom: 6px; } @media (min-width: 1024px) { .trust-item__label { font-size: 13px; } } .trust-item__value { font-family: var(--font-body); font-weight: 400; font-size: 14px; color: rgba(255, 255, 255, 0.7); line-height: 1.3; } @media (min-width: 1024px) { .trust-item__value { font-size: 15px; } } /* ========================================================= PRODUCTS ========================================================= */ .products-grid { display: grid; grid-template-columns: 1fr; gap: 24px; } /* Tablet 768-1023: 2x2 grid (services becomes a regular card on the left). */ @media (min-width: 768px) { .products-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; } } /* Desktop ≥1024: 3-col grid, one card per column. */ @media (min-width: 1024px) { .products-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; } } .products__more { display: block; text-align: center; margin: 40px auto 0; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 14px; letter-spacing: 1.8px; text-transform: uppercase; color: #9a7234; text-decoration: none; transition: color 0.3s var(--easing); } @media (hover: hover) { .products__more:hover { color: var(--color-gold-text); } } .product-card { position: relative; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: all 0.35s var(--easing); display: flex; flex-direction: column; } @media (hover: hover) { .product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); } } .product-card__media { height: 240px; overflow: hidden; background: var(--bg-light); position: relative; } .product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--easing); } /* For catalog product shots (transparent / white-bg renders) show the full product centered, no cropping, with a soft gradient backdrop. */ .product-card__media--product { background: radial-gradient(ellipse at center, #ffffff 0%, var(--bg-light) 100%); padding: 16px; } .product-card__media--product img { object-fit: contain; mix-blend-mode: multiply; } @media (hover: hover) { .product-card:hover .product-card__media img { transform: scale(1.05); } } @media (hover: hover) { .product-card:hover .product-card__media--product img { transform: scale(1.04); } } /* Per-product tuning: the door render is portrait-tall, so it reads small under contain-fit. Drop the padding, anchor the image to the bottom of its box, and scale it up from that bottom edge the door now fills the card vertically and sits visually grounded. */ .product-card__media--door { padding: 0; } .product-card__media--door img { object-position: center bottom; transform: translateY(-15px) scale(0.85); transform-origin: center bottom; } @media (hover: hover) { .product-card:hover .product-card__media--door img { transform: translateY(-15px) scale(0.88); } } .product-card__media--patio img { transform: scale(1.07); } @media (hover: hover) { .product-card:hover .product-card__media--patio img { transform: scale(1.11); } } .product-card__media--bathroom { padding: 10px; background: radial-gradient(ellipse at center, #ffffff 0%, var(--bg-light) 100%); } .product-card__media--bathroom img { object-fit: contain; } @media (hover: hover) { .product-card:hover .product-card__media--bathroom img { transform: scale(1.04); } } /* "Autres services" card icon-based media area, no product photo. */ .product-card__media--services { display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(ellipse at center, #ffffff 0%, var(--bg-light) 100%); } .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: 100%; max-width: 320px; } .services-grid > div { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 8px 4px; } .services-grid svg { width: 32px; height: 32px; color: var(--gold); stroke-width: 1.5; transition: transform 0.3s var(--easing); } @media (hover: hover) { .product-card:hover .services-grid svg { transform: translateY(-3px); } } .services-grid span { font-family: var(--font-body); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-mid); line-height: 1.3; } .product-card__body { padding: 32px; display: flex; flex-direction: column; flex: 1; gap: 12px; } .product-card__tag { font-family: var(--font-body); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-gold-text); } .product-card__h3 { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.2; color: var(--text-dark); } .product-card__text { font-size: 18px; color: var(--text-mid); line-height: 1.65; flex: 1; } .badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; background: var(--gold); color: var(--white); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; padding: 6px 12px; border-radius: 3px; margin-top: 4px; } .product-card__link { margin-top: 8px; color: var(--color-gold-text); font-family: var(--font-body); font-weight: 600; font-size: 16px; text-transform: uppercase; letter-spacing: 0.08em; display: inline-flex; align-items: center; gap: 8px; transition: gap 0.25s var(--easing); } .product-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; } @media (hover: hover) { .product-card__link:hover { gap: 14px; color: var(--gold-dark); } } /* ========================================================= POURQUOI / 4 BLOCKS ========================================================= */ .feature-grid { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 768px) { .feature-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; } } .feature-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 40px; transition: all 0.3s var(--easing); } @media (hover: hover) { .feature-card:hover { border-color: rgba(190, 142, 72, 0.4); transform: translateY(-2px); box-shadow: var(--shadow-sm); } } .feature-card__icon { width: 56px; height: 56px; border-radius: 12px; background: rgba(190, 142, 72, 0.1); color: var(--gold); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 24px; } .feature-card__icon svg { width: 28px; height: 28px; stroke: currentColor; } .feature-card__title { font-family: var(--font-display); font-weight: 700; font-size: 24px; margin-bottom: 12px; color: var(--text-dark); } .feature-card__text { color: var(--text-mid); font-size: 18px; line-height: 1.65; } /* ========================================================= PROCESSUS ========================================================= */ .process { display: grid; grid-template-columns: 1fr; gap: 48px; position: relative; } @media (min-width: 768px) { .process { grid-template-columns: repeat(3, 1fr); gap: 32px; } } .process__step { position: relative; text-align: center; padding: 0 16px; } .process__num { font-family: var(--font-display); font-weight: 700; font-style: italic; font-size: 80px; color: var(--gold); opacity: 0.18; line-height: 1; display: block; margin-bottom: -32px; } .process__circle { position: relative; width: 64px; height: 64px; border-radius: 50%; background: var(--white); border: 2px solid var(--gold); color: var(--color-gold-text); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 24px; margin: 0 auto 24px; z-index: 2; } .process__title { font-family: var(--font-display); font-weight: 600; font-size: 24px; margin-bottom: 12px; } .process__text { color: var(--text-mid); font-size: 18px; line-height: 1.65; max-width: 320px; margin: 0 auto; } @media (min-width: 768px) { .process__step:not(:last-child)::after { content: ''; position: absolute; top: 96px; left: calc(50% + 50px); right: calc(-50% + 50px); height: 2px; background-image: linear-gradient(to right, var(--gold) 50%, transparent 50%); background-size: 12px 2px; background-repeat: repeat-x; opacity: 0.5; } } .process-cta { text-align: center; margin-top: 64px; } /* ========================================================= GARANTIES ========================================================= */ .warranty-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 16px; margin-top: 8px; } @media (min-width: 640px) { .warranty-grid { grid-template-columns: repeat(5, 1fr); } } .warranty-stat { text-align: center; } .warranty-stat__num { font-family: var(--font-display); font-weight: 700; font-size: 40px; color: var(--gold); line-height: 1; letter-spacing: -0.02em; } @media (min-width: 768px) { .warranty-stat__num { font-size: 56px; } } .warranty-stat__label { font-family: var(--font-body); font-weight: 400; font-size: 15px; color: rgba(255, 255, 255, 0.7); margin-top: 12px; line-height: 1.4; } @media (min-width: 768px) { .warranty-stat__label { font-size: 16px; } } .warranty-footnote { text-align: center; margin-top: 56px; color: rgba(255, 255, 255, 0.4); font-size: 15px; font-family: var(--font-body); } /* ========================================================= RÉNOCLIMAT TEASER ========================================================= */ .renoclimat { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; } @media (min-width: 1024px) { .renoclimat { grid-template-columns: 60fr 40fr; gap: 64px; } } .renoclimat__card { background: var(--black); color: var(--white); border-radius: 12px; padding: 40px; } .renoclimat__check-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 20px; } .renoclimat__check-list li { display: flex; align-items: flex-start; gap: 16px; font-size: 18px; line-height: 1.4; color: rgba(255, 255, 255, 0.92); font-weight: 500; } .renoclimat__check-list svg { flex-shrink: 0; width: 24px; height: 24px; color: var(--gold); margin-top: 2px; } /* ========================================================= TÉMOIGNAGES ========================================================= */ .testimonials { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 768px) { .testimonials { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .testimonials { grid-template-columns: repeat(3, 1fr); gap: 32px; } } .testimonial { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 36px; transition: all 0.3s var(--easing); display: flex; flex-direction: column; gap: 20px; } @media (hover: hover) { .testimonial:hover { box-shadow: var(--shadow-sm); border-color: rgba(190, 142, 72, 0.3); } } .testimonial__stars { color: var(--gold); font-size: 20px; letter-spacing: 2px; } .testimonial__quote { font-family: var(--font-display); font-style: italic; font-size: 19px; line-height: 1.55; color: var(--text-dark); flex: 1; } .testimonial__author { display: flex; align-items: center; gap: 14px; margin-top: auto; } .avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--gold); color: var(--white); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); font-weight: 600; font-size: 16px; letter-spacing: 0.04em; flex-shrink: 0; } .testimonial__name { font-family: var(--font-body); font-weight: 600; font-size: 16px; color: var(--text-dark); } .testimonial__location { font-family: var(--font-body); font-weight: 400; font-size: 15px; color: var(--text-mid); } .testimonials-footer { text-align: center; margin-top: 48px; font-family: var(--font-body); font-weight: 600; font-size: 16px; color: var(--text-mid); } .testimonials-footer span { color: var(--color-gold-text); margin-right: 4px; } /* ========================================================= À PROPOS BREF ========================================================= */ .about-brief { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; } @media (min-width: 1024px) { .about-brief { grid-template-columns: 1fr 1fr; gap: 64px; } } .about-brief__media { background: var(--text-dark); border-radius: var(--radius); height: 360px; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.4); font-family: var(--font-display); font-style: italic; font-size: 18px; text-align: center; padding: 24px; background-image: linear-gradient(135deg, rgba(190, 142, 72, 0.06) 0%, transparent 60%), linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)); background-color: var(--text-dark); } .about-brief__body p { margin-bottom: 16px; color: var(--text-mid); font-size: 19px; line-height: 1.7; } .about-brief__cta { margin-top: 24px; display: inline-flex; } .section--narrow { padding: 64px 0; } /* ========================================================= FOOTER ========================================================= */ .site-footer { background: var(--black); color: rgba(255, 255, 255, 0.7); padding: 80px 0 32px; } .footer-grid { display: grid; grid-template-columns: 1fr; gap: 48px; } @media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1.2fr 1fr; gap: 56px; } } .footer-col__title { font-family: var(--font-body); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold); margin-bottom: 20px; } .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .footer-col a { color: rgba(255, 255, 255, 0.7); font-size: 17px; transition: color 0.2s ease; } @media (hover: hover) { .footer-col a:hover { color: var(--gold); } } .footer-col p { font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, 0.7); } .footer-brand .logo { margin-bottom: 16px; } .footer-brand .logo img { display: block; width: 220px; height: auto; max-width: 100%; margin-left: -28px; object-fit: contain; } .footer-brand p { color: rgba(255, 255, 255, 0.5); font-size: 16px; margin-bottom: 24px; max-width: 300px; } .footer-social { display: flex; gap: 12px; } .footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(190, 142, 72, 0.4); color: var(--gold); transition: all 0.25s var(--easing); } @media (hover: hover) { .footer-social a:hover { background: var(--gold); color: var(--black); border-color: var(--gold); } } .footer-social svg { width: 18px; height: 18px; } .footer-contact ul li { display: flex; align-items: flex-start; gap: 10px; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, 0.7); } .footer-contact ul li strong { color: var(--white); font-weight: 400; } .footer-contact ul li.fr, .footer-contact ul li.en { white-space: nowrap; font-size: 16px; } .footer-cert ul li { display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, 0.7); font-size: 16px; } .footer-cert ul li::before { content: '✓'; color: var(--gold); font-weight: 700; } .footer-bottom { margin-top: 64px; padding-top: 24px; border-top: 1px solid #222; display: flex; flex-direction: column; gap: 12px; font-size: 15px; color: rgba(255, 255, 255, 0.4); font-family: var(--font-body); } @media (min-width: 768px) { .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; } } .footer-credit { margin-top: 24px; text-align: center; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.35); font-family: var(--font-body); } .footer-credit a { color: inherit; text-decoration: none; transition: color 0.2s ease; } @media (hover: hover) { .footer-credit a:hover { color: var(--gold); } } /* ========================================================= SHELL PAGES ========================================================= */ .shell-main { min-height: 60vh; display: flex; align-items: center; justify-content: center; padding-top: var(--header-h); } .shell-main p { color: var(--text-mid); font-family: var(--font-body); font-size: 20px; } /* ========================================================= REVEAL ON SCROLL ========================================================= */ [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--easing), transform 0.7s var(--easing); will-change: opacity, transform; } [data-reveal].is-visible { opacity: 1; transform: translateY(0); } [data-reveal-stagger] > * { opacity: 0; transform: translateY(20px); transition: opacity 0.6s var(--easing), transform 0.6s var(--easing); } [data-reveal-stagger].is-visible > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0s; } [data-reveal-stagger].is-visible > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.08s; } [data-reveal-stagger].is-visible > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.16s; } [data-reveal-stagger].is-visible > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.24s; } [data-reveal-stagger].is-visible > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.32s; } [data-reveal-stagger].is-visible > *:nth-child(6) { opacity: 1; transform: none; transition-delay: 0.40s; } [data-reveal-stagger].is-visible > *:nth-child(7) { opacity: 1; transform: none; transition-delay: 0.48s; } /* ========================================================= UTILITIES ========================================================= */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } /* Skip-to-content link: off-screen until keyboard-focused. */ .vz-skip { position: absolute; left: 12px; top: -64px; z-index: 2000; display: inline-block; padding: 12px 20px; background: #0d0d0d; color: #f7f6f4; font-family: Inter, sans-serif; font-size: 16px; font-weight: 600; text-decoration: none; border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,0.3); transition: top 0.18s ease; } .vz-skip:focus { top: 12px; outline: 2px solid var(--gold); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } html.smooth-scroll { scroll-behavior: auto; } [data-reveal], [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; } .gold-rule { width: 56px !important; } } /* === Process v2 === */ .process-v2 { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 64px; } .process-v2__arrow { position: absolute; top: 100px; width: 120px; height: 22px; margin-left: -60px; transform: translateY(-50%); pointer-events: none; z-index: 0; } .process-v2__arrow--1 { left: 33.3333%; } .process-v2__arrow--2 { left: 66.6666%; } .process-v2__step { padding: 0 28px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 32px; position: relative; } .process-v2__num { font-family: 'Fraunces', Georgia, serif; font-size: 96px; line-height: 0.85; font-style: italic; font-weight: 320; color: #e8d4a8; letter-spacing: -3px; font-variation-settings: "opsz" 144, "SOFT" 60; } .process-v2__node { width: 56px; height: 56px; border-radius: 50%; background: #fff; border: 1px solid #be8e48; display: flex; align-items: center; justify-content: center; margin-top: -16px; margin-bottom: 4px; box-shadow: 0 0 0 6px #fff; position: relative; z-index: 1; } .process-v2__pill { display: inline-flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12.5px; letter-spacing: 1.5px; text-transform: uppercase; color: #9a7234; background: rgba(190,142,72,0.08); padding: 6px 12px; border: 1px solid rgba(190,142,72,0.3); } .process-v2__pill i { width: 6px; height: 6px; background: #be8e48; border-radius: 50%; } .process-v2__title { margin: 0; font-family: 'Fraunces', Georgia, serif; font-size: 28px; line-height: 1.15; font-weight: 400; letter-spacing: -0.4px; max-width: 320px; } .process-v2__title em { font-style: italic; color: #9a7234; font-weight: 400; } .process-v2__text { margin: 0; font-size: 16.5px; line-height: 1.6; color: rgba(10,10,10,0.65); max-width: 320px; flex: 1 0 auto; } .process-v2__list { list-style: none; padding: 18px 0 0; margin: 4px 0 0; border-top: 1px solid rgba(10,10,10,0.10); width: 100%; text-align: left; display: flex; flex-direction: column; gap: 8px; } .process-v2__list li { font-size: 15px; color: rgba(10,10,10,0.75); display: flex; align-items: center; gap: 10px; } .process-v2__list li::before { content: ''; width: 12px; height: 12px; background-image: url("data:image/svg+xml;utf8,"); flex-shrink: 0; } .process-v2__recap { margin-top: 64px; background: #f5efe5; padding: 32px 40px; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; } .process-v2__recap-left { display: flex; align-items: center; gap: 16px; } .process-v2__recap-mark { width: 44px; height: 44px; border-radius: 50%; background: #be8e48; color: #0a0a0a; display: flex; align-items: center; justify-content: center; font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 24px; font-weight: 500; } .process-v2__recap-title { margin: 0; font-family: 'Fraunces', Georgia, serif; font-size: 19px; font-style: italic; font-weight: 420; color: #0a0a0a; } .process-v2__recap-sub { margin: 2px 0 0; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; letter-spacing: 1.5px; color: rgba(10,10,10,0.55); text-transform: uppercase; } /* === Process v2 hover & motion === */ .process-v2__step { transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); cursor: default; } @media (hover: hover) { .process-v2__step:hover { transform: translateY(-3px); } } .process-v2__num { transition: color 0.6s ease; } @media (hover: hover) { .process-v2__step:hover .process-v2__num { color: #d4a86a; } } .process-v2__node { transition: background 0.45s ease, border-color 0.45s ease, transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.45s ease; } .process-v2__node svg { transition: stroke 0.45s ease; } @media (hover: hover) { .process-v2__step:hover .process-v2__node { background: #be8e48; border-color: #be8e48; transform: scale(1.04); box-shadow: 0 0 0 6px #fff, 0 6px 14px -8px rgba(190,142,72,0.4); } } @media (hover: hover) { .process-v2__step:hover .process-v2__node svg { stroke: #fff; } } .process-v2__pill { transition: background 0.4s ease, border-color 0.4s ease, color 0.4s ease; } .process-v2__pill i { transition: transform 0.4s ease; } @media (hover: hover) { .process-v2__step:hover .process-v2__pill { background: rgba(190,142,72,0.14); border-color: rgba(190,142,72,0.45); } } @media (hover: hover) { .process-v2__step:hover .process-v2__pill i { transform: scale(1.2); } } .process-v2__title em { background-image: linear-gradient(#9a7234, #9a7234); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1.5px; padding-bottom: 3px; transition: background-size 0.55s cubic-bezier(0.2, 0.8, 0.2, 1); } @media (hover: hover) { .process-v2__step:hover .process-v2__title em { background-size: 100% 1.5px; } } .process-v2__list li { transition: color 0.3s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); } .process-v2__list li::before { transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); } @media (hover: hover) { .process-v2__step:hover .process-v2__list li { color: rgba(10,10,10,0.85); } } @media (hover: hover) { .process-v2__step:hover .process-v2__list li::before { transform: scale(1.08); } } @media (hover: hover) { .process-v2__list li:hover { transform: translateX(2px); } } /* Flow continu sur les pointillés des flèches */ @keyframes process-v2-flow { to { stroke-dashoffset: -12; } } .process-v2__arrow line[stroke-dasharray] { animation: process-v2-flow 1.6s linear infinite; } @media (hover: hover) { .process-v2:hover .process-v2__arrow line:not([stroke-dasharray]), .process-v2:hover .process-v2__arrow path { stroke: #9a7234; transition: stroke 0.5s ease; } } /* Respecte prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { .process-v2__arrow line[stroke-dasharray] { animation: none; } .process-v2__step, .process-v2__node { transform: none !important; } @media (hover: hover) { .process-v2__step:hover, .process-v2__step:hover .process-v2__node { transform: none !important; } } } /* Responsive */ @media (max-width: 900px) { .process-v2 { grid-template-columns: 1fr; gap: 56px; } .process-v2__arrow { display: none; } .process-v2__recap { grid-template-columns: 1fr; text-align: left; } } @media (max-width: 600px) { .process-v2__recap { margin-top: 44px; padding: 24px 22px; gap: 18px; } .process-v2__recap-left { gap: 12px; } .process-v2__recap-title { font-size: 18px; } .process-v2__recap-sub { font-size: 12px; } .process-v2__recap .btn { width: 100%; justify-content: center; } } /* === Garanties === */ .section--warranties { background: var(--bg-light); } .warranty__title { line-height: 1.3; max-width: 1100px; margin-inline: auto; } .warranty__title em { font-style: italic; color: #be8e48; font-weight: inherit; } .warranty__lead { margin: 36px auto 0; font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 24px; line-height: 1.35; font-weight: 380; color: rgba(10,10,10,0.55); max-width: 640px; text-wrap: balance; text-align: center; } .warranty__grid { margin-top: 80px; display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid rgba(10,10,10,0.18); background: #fff; } .warranty__cell { padding: 36px 24px 32px; display: flex; flex-direction: column; gap: 20px; border-left: 1px solid rgba(10,10,10,0.14); position: relative; transition: background-color 0.6s var(--easing, cubic-bezier(0.2, 0.8, 0.2, 1)), opacity 0.6s var(--easing), transform 0.6s var(--easing); } .warranty__cell:first-child { border-left: none; } .warranty__cell::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; background: #be8e48; transform: scaleX(0); transform-origin: left center; transition: transform 0.7s var(--easing, cubic-bezier(0.2, 0.8, 0.2, 1)); pointer-events: none; } @media (hover: hover) { .warranty__cell:hover { background-color: #fbf7ef; } } @media (hover: hover) { .warranty__cell:hover::before { transform: scaleX(1); } } .warranty__label { margin: 0; font-family: 'Fraunces', Georgia, serif; font-size: 26px; line-height: 1.18; letter-spacing: -0.5px; font-weight: 400; color: #0a0a0a; text-wrap: balance; min-height: 2.36em; transition: color 0.6s ease; } .warranty__foot { padding-top: 18px; border-top: 1px solid rgba(10,10,10,0.12); display: flex; align-items: baseline; justify-content: space-between; transition: border-color 0.6s ease; } @media (hover: hover) { .warranty__cell:hover .warranty__foot { border-top-color: rgba(190,142,72,0.45); } } .warranty__caption { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 2px; color: rgba(10,10,10,0.5); text-transform: uppercase; transition: color 0.6s ease; } @media (hover: hover) { .warranty__cell:hover .warranty__caption { color: #9a7234; } } .warranty__years { font-family: 'Fraunces', Georgia, serif; font-size: 24px; line-height: 1; font-weight: 420; color: #0a0a0a; letter-spacing: -0.4px; transition: color 0.6s ease; } .warranty__years i { font-style: italic; color: rgba(10,10,10,0.55); font-weight: 380; transition: color 0.6s ease; } @media (hover: hover) { .warranty__cell:hover .warranty__years { color: #be8e48; } } @media (hover: hover) { .warranty__cell:hover .warranty__years i { color: rgba(190,142,72,0.65); } } /* Respecte prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { .warranty__cell::before { transition: none; } } /* Responsive */ @media (min-width: 601px) and (max-width: 1100px) { .warranty__grid { grid-template-columns: repeat(2, 1fr); } .warranty__cell { border-left: none; border-top: 1px solid rgba(10,10,10,0.14); } .warranty__cell:nth-child(odd) { border-right: 1px solid rgba(10,10,10,0.14); } .warranty__cell:nth-child(-n+2) { border-top: none; } } @media (max-width: 600px) { .warranty__grid { grid-template-columns: 1fr; } .warranty__cell, .warranty__cell:nth-child(odd) { border: none; border-top: 1px solid rgba(10,10,10,0.14); } .warranty__cell:first-child { border-top: none; } .warranty__label { min-height: 0; } } /* === Subventions === */ .section--grants { background: var(--bg-light); } .grants__layout { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: flex-start; } .grants__left { display: flex; flex-direction: column; gap: 32px; padding-right: 40px; border-right: 1px solid rgba(10,10,10,0.12); } .grants__title { margin: 0; font-family: 'Fraunces', Georgia, serif; font-size: clamp(30px, 8vw, 56px); line-height: 1.1; letter-spacing: -1.4px; font-weight: 320; color: #0a0a0a; text-wrap: balance; word-break: break-word; overflow-wrap: anywhere; font-variation-settings: "opsz" 144, "SOFT" 30; } .grants__title em { font-style: italic; color: #be8e48; font-weight: inherit; } .grants__body { margin: 0; font-family: 'Fraunces', Georgia, serif; font-size: 21px; line-height: 1.55; font-weight: 400; color: rgba(10,10,10,0.75); max-width: 480px; } .grants__lead { margin: 0; font-family: 'Fraunces', Georgia, serif; font-size: 21px; line-height: 1.55; font-style: italic; font-weight: 400; color: rgba(10,10,10,0.75); max-width: 480px; } .grants__cta { margin-top: 12px; align-self: flex-start; transition: transform 0.5s var(--easing, cubic-bezier(0.2, 0.8, 0.2, 1)), box-shadow 0.5s ease; } @media (hover: hover) { .grants__cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(190,142,72,0.55); } } .grants__args { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .grants__arg { padding: 28px 0; display: grid; grid-template-columns: 60px 1fr; gap: 24px; align-items: baseline; border-bottom: 1px solid rgba(10,10,10,0.12); position: relative; transition: padding-left 0.6s var(--easing, cubic-bezier(0.2, 0.8, 0.2, 1)); } .grants__arg:last-child { border-bottom: none; } .grants__arg::before { content: ''; position: absolute; left: 0; top: 28px; bottom: 28px; width: 2px; background: #be8e48; transform: scaleY(0); transform-origin: top center; transition: transform 0.7s var(--easing, cubic-bezier(0.2, 0.8, 0.2, 1)); } @media (hover: hover) { .grants__arg:hover { padding-left: 18px; } } @media (hover: hover) { .grants__arg:hover::before { transform: scaleY(1); } } .grants__num { font-family: 'Fraunces', Georgia, serif; font-size: 36px; font-style: italic; font-weight: 320; color: var(--color-gold-text); letter-spacing: -1px; line-height: 1; transition: color 0.5s ease, transform 0.6s var(--easing, cubic-bezier(0.2, 0.8, 0.2, 1)); } @media (hover: hover) { .grants__arg:hover .grants__num { color: #9a7234; transform: translateX(-2px); } } .grants__arg-body { display: flex; flex-direction: column; gap: 8px; } .grants__arg-title { margin: 0; font-family: 'Fraunces', Georgia, serif; font-size: 24px; line-height: 1.2; font-weight: 420; letter-spacing: -0.3px; color: #0a0a0a; transition: color 0.5s ease; } @media (hover: hover) { .grants__arg:hover .grants__arg-title { color: #1a1a1a; } } .grants__arg-sub { margin: 0; font-size: 16.5px; line-height: 1.55; color: rgba(10,10,10,0.62); transition: color 0.5s ease; } @media (hover: hover) { .grants__arg:hover .grants__arg-sub { color: rgba(10,10,10,0.78); } } /* Respecte prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { .grants__arg, .grants__num, .grants__cta { transform: none !important; padding-left: 0 !important; } @media (hover: hover) { .grants__arg:hover, .grants__arg:hover .grants__num, .grants__cta:hover { transform: none !important; padding-left: 0 !important; } } .grants__arg::before { transition: none; } } /* Responsive */ @media (max-width: 900px) { .grants__layout { grid-template-columns: 1fr; gap: 56px; } .grants__left { padding-right: 0; border-right: none; padding-bottom: 40px; border-bottom: 1px solid rgba(10,10,10,0.12); } } /* ─── TESTIMONIALS (from Template) ─── */ #testimonials-v2 { --light: #F5F2EE; --white: #FFFFFF; --text: #0D0D0D; --muted: #666666; --border: #E0DDD8; --gold: #C8922A; --shadow: 0 2px 12px rgba(0,0,0,0.08); --shadow-hover: 0 4px 24px rgba(0,0,0,0.14); background: var(--light); padding: 96px 0; overflow: hidden; } .testi-header { display: flex; flex-direction: column; align-items: center; max-width: 540px; margin: 0 auto 64px; text-align: center; padding: 0 24px; } .testi-title { font-size: 2rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--text); margin-bottom: 16px; } .testi-title em { font-style: italic; color: #be8e48; font-weight: inherit; } .testi-sub { color: var(--muted); font-size: 1.125rem; line-height: 1.65; } .testi-columns { display: flex; gap: 20px; justify-content: center; max-height: 720px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent); mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent); padding: 0 24px; } .testi-col { flex-shrink: 0; width: 300px; } .testi-col:nth-child(2) { display: none; } .testi-col:nth-child(3) { display: none; } .testi-col:nth-child(4) { display: none; } .testi-col:nth-child(5) { display: none; } .testi-col-inner { display: flex; flex-direction: column; gap: 20px; } @keyframes scrollTesti { from { transform: translateY(0); } to { transform: translateY(calc(-1 * var(--loop-h, 50%))); } } .testi-card { background: var(--white); border: 1px solid var(--border); border-radius: 20px; padding: 24px; box-shadow: var(--shadow); transition: transform 0.25s, box-shadow 0.25s; cursor: default; } @media (hover: hover) { .testi-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); } } .testi-stars { display: flex; gap: 2px; margin-bottom: 12px; } .testi-stars svg { width: 14px; height: 14px; fill: var(--gold); } .testi-text { font-size: 1.05rem; color: #555; line-height: 1.7; margin-bottom: 18px; } .testi-footer { display: flex; align-items: center; gap: 10px; } .testi-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); flex-shrink: 0; } .testi-name { font-weight: 700; font-size: 1rem; color: var(--text); line-height: 1.3; } .testi-role { font-size: 0.9rem; color: var(--muted); margin-top: 1px; } @media (min-width: 768px) { .testi-col:nth-child(2) { display: block; } .testi-col:nth-child(3) { display: block; } .testi-col { width: 260px; } } @media (min-width: 1024px) { .testi-col:nth-child(4) { display: block; } .testi-col { width: 250px; } } @media (min-width: 1280px) { .testi-col:nth-child(5) { display: block; } .testi-col { width: 260px; } } #testimonials-v2 .t-en { display: none; } html[lang^="en"] #testimonials-v2 .t-fr { display: none; } html[lang^="en"] #testimonials-v2 .t-en { display: inline; } /* === À propos === */ .section--about { background: var(--white); } .about__block { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 32px; padding: 40px 0; } .about__title { margin: 0; font-family: 'Fraunces', Georgia, serif; font-size: 56px; line-height: 1.1; letter-spacing: -1.4px; font-weight: 320; color: #0a0a0a; text-wrap: balance; font-variation-settings: "opsz" 144, "SOFT" 30; } .about__title em { font-style: italic; color: #be8e48; font-weight: inherit; } .about__p { margin: 0; font-family: 'Fraunces', Georgia, serif; font-size: 24px; line-height: 1.55; font-weight: 400; color: rgba(10,10,10,0.82); } .about__p--italic { font-style: italic; color: rgba(10,10,10,0.6); } .about__subtitle { margin: -20px 0 0 0; font-family: 'Fraunces', Georgia, serif; font-size: 20px; line-height: 1.4; font-weight: 400; font-style: italic; color: rgba(10,10,10,0.55); letter-spacing: 0.2px; } .about__cta { margin-top: 16px; transition: background 0.4s var(--easing), transform 0.4s var(--easing), box-shadow 0.4s var(--easing); } @media (hover: hover) { .about__cta:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(190, 142, 72, 0.18); } } @media (max-width: 700px) { .about__title { font-size: 40px; } .about__p { font-size: 21px; } .about__subtitle { font-size: 18px; margin-top: -16px; } .about__block { gap: 24px; } } /* Soft, posed reveal scoped to À propos Slower transitions, gentler offset, calm cascade across the children. FR/EN pairs share the same delay so toggling language preserves the cadence. */ .about__block[data-reveal-stagger] > * { opacity: 0; transform: translateY(14px); transition: opacity 0.9s var(--easing), transform 0.9s var(--easing); } .about__block[data-reveal-stagger].is-visible > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0s; } .about__block[data-reveal-stagger].is-visible > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.08s; } .about__block[data-reveal-stagger].is-visible > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.14s; } .about__block[data-reveal-stagger].is-visible > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.14s; } .about__block[data-reveal-stagger].is-visible > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.20s; } .about__block[data-reveal-stagger].is-visible > *:nth-child(6) { opacity: 1; transform: none; transition-delay: 0.20s; } .about__block[data-reveal-stagger].is-visible > *:nth-child(7) { opacity: 1; transform: none; transition-delay: 0.26s; } .about__block[data-reveal-stagger].is-visible > *:nth-child(8) { opacity: 1; transform: none; transition-delay: 0.26s; } .about__block[data-reveal-stagger].is-visible > *:nth-child(9) { opacity: 1; transform: none; transition-delay: 0.32s; } .about__block[data-reveal-stagger].is-visible > *:nth-child(10) { opacity: 1; transform: none; transition-delay: 0.32s; } .about__block[data-reveal-stagger].is-visible > *:nth-child(11) { opacity: 1; transform: none; transition-delay: 0.38s; } .about__block[data-reveal-stagger].is-visible > *:nth-child(12) { opacity: 1; transform: none; transition-delay: 0.38s; } .about__block[data-reveal-stagger].is-visible > *:nth-child(13) { opacity: 1; transform: none; transition-delay: 0.44s; } .about__block[data-reveal-stagger].is-visible > *:nth-child(14) { opacity: 1; transform: none; transition-delay: 0.44s; } .about__block[data-reveal-stagger].is-visible > *:nth-child(15) { opacity: 1; transform: none; transition-delay: 0.52s; } /* === CTA final === */ .cta-final { display: grid; grid-template-columns: 1.1fr 1px 1fr; max-width: 1180px; margin: 0 auto; } .cta-final__left { padding-right: 64px; } .cta-final__divider { background: rgba(10,10,10,0.14); min-height: 380px; } .cta-final__right { padding-left: 64px; display: flex; flex-direction: column; gap: 36px; } .eyebrow--gold { display: inline-flex; align-items: center; gap: 12px; } .cta-final__rule { display: inline-block; width: 24px; height: 1px; background: #be8e48; } .cta-final__title { margin: 32px 0 0; font-family: 'Fraunces', Georgia, serif; font-size: 64px; line-height: 1.02; letter-spacing: -1.6px; font-weight: 300; color: #0a0a0a; text-wrap: balance; font-variation-settings: "opsz" 144, "SOFT" 30; } .cta-final__title em { font-style: italic; color: #be8e48; font-weight: inherit; } .cta-final__lead { margin: 28px 0 0; font-family: 'Fraunces', Georgia, serif; font-size: 22px; line-height: 1.5; color: rgba(10,10,10,0.7); font-style: italic; font-weight: 380; max-width: 460px; } .cta-final__btn { margin-top: 44px; align-self: flex-start; } .cta-final__phone-block { display: flex; flex-direction: column; gap: 0; } .cta-final__caption { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 15px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(10,10,10,0.6); margin-bottom: 14px; } .cta-final__phone { font-family: 'Fraunces', Georgia, serif; font-size: 44px; line-height: 1; letter-spacing: -1px; font-weight: 380; color: #0a0a0a; text-decoration: none; display: block; } .cta-final__status { margin-top: 12px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12.5px; letter-spacing: 0.8px; text-transform: uppercase; color: #9a7234; display: inline-flex; align-items: center; gap: 8px; } .cta-final__status i { width: 6px; height: 6px; border-radius: 50%; background: #be8e48; } .cta-final__specs { list-style: none; margin: 0; padding: 28px 0 0; border-top: 1px solid rgba(10,10,10,0.12); display: flex; flex-direction: column; gap: 16px; } .cta-final__specs li { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; } .cta-final__spec-key { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 1.8px; text-transform: uppercase; color: rgba(10,10,10,0.5); } .cta-final__spec-val { font-family: 'Fraunces', Georgia, serif; font-size: 17px; font-weight: 420; color: rgba(10,10,10,0.8); } .cta-final__connexes { max-width: 1180px; margin: 64px auto 0; display: flex; justify-content: space-between; align-items: center; padding-top: 32px; border-top: 1px solid rgba(10,10,10,0.12); font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 19px; color: rgba(10,10,10,0.65); } .cta-final__connexes a { font-family: 'JetBrains Mono', ui-monospace, monospace; font-style: normal; font-size: 13px; letter-spacing: 1.8px; text-transform: uppercase; color: #9a7234; text-decoration: none; } /* Responsive */ @media (max-width: 900px) { .cta-final { grid-template-columns: 1fr; gap: 56px; } .cta-final__left { padding-right: 0; } .cta-final__right { padding-left: 0; padding-top: 56px; border-top: 1px solid rgba(10,10,10,0.14); } .cta-final__divider { display: none; } .cta-final__title { font-size: 44px; } .cta-final__connexes { flex-direction: column; gap: 16px; align-items: flex-start; } } /* Soft, posed hovers Discreet only, nothing bouncy */ .cta-final__btn { transition: background 0.4s var(--easing), transform 0.4s var(--easing), box-shadow 0.4s var(--easing); } @media (hover: hover) { .cta-final__btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(190, 142, 72, 0.18); } } .cta-final__phone { position: relative; transition: color 0.5s var(--easing); } @media (hover: hover) { .cta-final__phone:hover { color: #9a7234; } } .cta-final__status i { animation: ctaFinalPulse 2.4s var(--easing) infinite; } @keyframes ctaFinalPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.85); } } .cta-final__connexes a { display: inline-flex; align-items: center; gap: 6px; transition: color 0.4s var(--easing), gap 0.4s var(--easing); } @media (hover: hover) { .cta-final__connexes a:hover { color: #be8e48; gap: 10px; } } /* Scoped soft stagger for the CTA grid (3 direct children) */ .cta-final[data-reveal-stagger] > * { opacity: 0; transform: translateY(14px); transition: opacity 0.9s var(--easing), transform 0.9s var(--easing); } .cta-final[data-reveal-stagger].is-visible > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0s; } .cta-final[data-reveal-stagger].is-visible > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.10s; } .cta-final[data-reveal-stagger].is-visible > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.20s; } @media (prefers-reduced-motion: reduce) { .cta-final__status i { animation: none; } } /* ========================================================= CALCULATEUR + FORMULAIRE (Rénoclimat estimator) ========================================================= */ .calc-section { background: var(--black); color: var(--white); } .calc-section .h2, .calc-section h3 { color: var(--white); } .calc-section .section__intro { color: rgba(255, 255, 255, 0.65); } .calc-section .gold-rule { background: var(--gold); } /* ---- Grid des cartes ---- */ .calc-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 8px; } @media (min-width: 768px) { .calc-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; } } .calc-card { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 18px; transition: border-color 0.18s var(--easing), background 0.18s var(--easing), transform 0.18s var(--easing); } @media (hover: hover) { .calc-card:hover { border-color: rgba(190, 142, 72, 0.5); background: rgba(255, 255, 255, 0.06); transform: translateY(-3px); } } .calc-card__media { width: 100%; height: 160px; border-radius: 6px; overflow: hidden; background: radial-gradient(ellipse at center, #ffffff 0%, var(--bg-light) 100%); display: flex; align-items: center; justify-content: center; padding: 12px; } .calc-card__media img { max-height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply; } .calc-card__media--door img { transform: translateY(2px) scale(0.9); transform-origin: center bottom; } .calc-card__media--patio img { transform: scale(1.05); } .calc-card__title { font-family: 'Fraunces', Georgia, serif; font-size: 24px; font-weight: 420; letter-spacing: -0.3px; margin: 0; text-align: center; } .calc-counter { display: flex; align-items: center; gap: 14px; } .calc-counter__btn { width: 44px; height: 44px; min-width: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.18); background: transparent; color: var(--white); font-size: 24px; font-weight: 500; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: border-color 0.2s var(--easing), color 0.2s var(--easing), background 0.2s var(--easing), transform 0.1s ease; } @media (hover: hover) { .calc-counter__btn:hover { border-color: var(--gold); color: var(--gold); background: rgba(190, 142, 72, 0.08); } } .calc-counter__btn:active { transform: scale(0.96); } .calc-counter__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .calc-counter__value { font-family: 'Fraunces', Georgia, serif; font-size: 32px; font-weight: 320; letter-spacing: -0.5px; min-width: 56px; text-align: center; color: var(--white); font-variant-numeric: tabular-nums; } /* ---- Total ---- */ .calc-total { text-align: center; padding: 40px 24px; border-top: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.08); margin: 40px 0 24px; } .calc-total__label { font-family: var(--font-body); font-weight: 600; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin: 0 0 14px; } .calc-total__amount { font-family: 'Fraunces', Georgia, serif; font-size: 56px; line-height: 1.05; letter-spacing: -1.4px; font-weight: 320; color: var(--white); font-variant-numeric: tabular-nums; transition: color 0.25s ease; } @media (min-width: 768px) { .calc-total__amount { font-size: 72px; } } /* ---- Disclaimer ---- */ .calc-disclaimer { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.45); max-width: 760px; margin: 0 auto 36px; text-align: center; } /* ---- Actions ---- */ .calc-actions { display: flex; justify-content: center; } .calc-continue:disabled, .calc-continue[disabled] { opacity: 0.5; cursor: not-allowed; } @media (hover: hover) { .calc-continue:disabled:hover, .calc-continue[disabled]:hover { transform: none; background: var(--gold); box-shadow: none; } } /* ---- Recap (étape 2) ---- */ .calc-recap { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0 auto 48px; padding: 20px 24px; border: 1px solid rgba(190, 142, 72, 0.28); border-radius: var(--radius); background: rgba(190, 142, 72, 0.06); text-align: center; max-width: 720px; } @media (min-width: 768px) { .calc-recap { flex-direction: row; justify-content: space-between; text-align: left; } } .calc-recap__line { font-family: 'Fraunces', Georgia, serif; font-size: 21px; line-height: 1.4; color: var(--white); margin: 0; } .calc-recap__back { font-family: var(--font-body); font-weight: 600; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); background: transparent; border: 0; padding: 6px 0; cursor: pointer; transition: color 0.2s ease; } @media (hover: hover) { .calc-recap__back:hover { color: var(--gold-dark); } } /* ---- Form ---- */ .calc-form { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; } .calc-form__row { display: grid; grid-template-columns: 1fr; gap: 20px; } @media (min-width: 640px) { .calc-form__row { grid-template-columns: 1fr 1fr; } } .calc-form__field { display: flex; flex-direction: column; gap: 8px; } .calc-form__label { font-family: var(--font-body); font-weight: 600; font-size: 14px; letter-spacing: 0.10em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); } .calc-form__field input, .calc-form__field textarea { font: inherit; font-size: 17px; color: var(--white); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 6px; padding: 14px 16px; transition: border-color 0.2s ease, background 0.2s ease; font-family: inherit; width: 100%; } .calc-form__field input:focus, .calc-form__field textarea:focus { outline: none; border-color: var(--gold); background: rgba(255, 255, 255, 0.06); box-shadow: 0 0 0 3px rgba(190, 142, 72, 0.15); } .calc-form__field input::placeholder, .calc-form__field textarea::placeholder { color: rgba(255, 255, 255, 0.32); } .calc-form__field input:invalid:not(:placeholder-shown) { border-color: rgba(220, 80, 80, 0.55); } .calc-form__field textarea { resize: vertical; min-height: 110px; line-height: 1.55; } .calc-form__actions { display: flex; justify-content: center; margin-top: 8px; } .calc-form__submit { min-width: 280px; } .calc-form__submit:disabled { opacity: 0.7; cursor: wait; } .calc-form__error { text-align: center; font-size: 16px; color: #f3c977; margin: 4px 0 0; } .calc-form__error a { color: var(--gold); text-decoration: underline; } /* ---- Success ---- */ .calc-success { max-width: 600px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 24px 16px; } .calc-success__icon { color: var(--gold); display: inline-flex; animation: calcCheckPop 0.5s var(--easing) both; } .calc-success__title { font-family: 'Fraunces', Georgia, serif; font-size: 32px; line-height: 1.15; letter-spacing: -0.5px; font-weight: 360; color: var(--white); margin: 0; } @media (min-width: 768px) { .calc-success__title { font-size: 40px; } } .calc-success__text { font-size: 19px; line-height: 1.6; color: rgba(255, 255, 255, 0.7); margin: 0; max-width: 520px; } /* ---- Step transitions ---- */ .calc__step { animation: calcFadeIn 0.3s ease both; } @keyframes calcFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes calcCheckPop { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .calc__step, .calc-success__icon { animation: none; } } /* ========================================================= FENETRES PAGE (scoped via fen- prefix) Reuses tokens: --gold, --gold-dark, --text-dark, --text-mid, --bg-light, --border, --font-body. Display type is Fraunces (loaded at weights 300-600, upright + italic in fenetres.html) for a lighter, more refined editorial look than Playfair. ========================================================= */ /* Page padding under the fixed site-header */ .fen-main { padding-top: 76px; } @media (min-width: 768px) { .fen-main { padding-top: 90px; } } /* Display type used across this page */ .fen-page-head h1, .fen-mat-intro h2, .fen-mat-card__h3, .fen-styles-head h2, .fen-styles-head .fen-styles-index, .fen-featured__name, .fen-style-rail .name, .fen-energy-copy h2, .fen-reno-card__amount, .fen-thermo-head__h2, .fen-thermo-opt__title, .fen-cta-band__title { font-family: 'Fraunces', Georgia, serif; } /* 1. PAGE HEAD ----------------------------------------------- */ .fen-page-head { padding: 64px 0 48px; border-bottom: 1px solid var(--border); background: var(--white); } @media (min-width: 768px) { .fen-page-head { padding: 96px 0 64px; } } .fen-page-head .fen-crumb { font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-mid); margin-bottom: 24px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .fen-page-head .fen-crumb a { color: var(--text-mid); transition: color 0.2s; } @media (hover: hover) { .fen-page-head .fen-crumb a:hover { color: var(--color-gold-text); } } .fen-page-head .fen-crumb .sep { opacity: 0.5; } .fen-h1 { margin: 0; font-weight: 300; font-size: clamp(40px, 6.5vw, 88px); line-height: 1.08; letter-spacing: -0.025em; color: var(--text-dark); max-width: 14ch; } .fen-h1 em { color: var(--gold); font-weight: 300; font-style: italic; } .fen-lede { margin: 24px 0 0; font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 400; font-size: clamp(19px, 1.4vw, 23px); line-height: 1.5; color: var(--text-mid); max-width: 56ch; } .fen-meta-line { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 18px 24px; font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-mid); } .fen-meta-line .sep { color: var(--gold); opacity: 0.85; } .fen-meta-line > span:not(.sep) { display: inline-block; transition: color 0.35s var(--easing), transform 0.35s var(--easing); } @media (hover: hover) { .fen-meta-line > span:not(.sep):hover { color: var(--color-gold-text); transform: translateY(-1px); } } /* 2. MATERIALS ----------------------------------------------- */ .fen-materials { padding: 72px 0 64px; background: var(--white); } @media (min-width: 768px) { .fen-materials { padding: 96px 0 80px; } } .fen-mat-intro { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: end; margin-bottom: 48px; } @media (min-width: 900px) { .fen-mat-intro { grid-template-columns: 1fr 1.4fr; gap: 56px; } } .fen-mat-intro h2 { margin: 12px 0 0; font-family: 'Playfair Display', Georgia, serif; font-weight: 400; font-size: clamp(28px, 2.9vw, 42px); line-height: 1.1; letter-spacing: -0.02em; color: var(--text-dark); max-width: 26ch; } .fen-mat-intro h2 em { color: var(--gold); font-weight: 400; font-style: italic; } .fen-mat-intro p { margin: 0; padding-bottom: 6px; font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 400; font-size: 20px; line-height: 1.55; color: var(--text-mid); max-width: 48ch; } .fen-mat-grid { display: grid; grid-template-columns: 1fr; gap: 20px; } @media (min-width: 900px) { .fen-mat-grid { grid-template-columns: 1fr 1fr; gap: 28px; } } .fen-mat-card { position: relative; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: opacity 0.7s var(--easing), transform 0.7s var(--easing), box-shadow 0.25s var(--easing), border-color 0.25s var(--easing); } @media (hover: hover) { .fen-mat-card:hover { box-shadow: var(--shadow-sm); border-color: #d8d0c2; } } .fen-mat-card.is-popular::before { content: "Le plus choisi"; position: absolute; top: 16px; right: 16px; z-index: 2; font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-dark); background: rgba(255, 255, 255, 0.94); padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; } html[lang="en"] .fen-mat-card.is-popular::before { content: "Most chosen"; } .fen-mat-img { aspect-ratio: 16 / 10; background: var(--bg-light); border-bottom: 1px solid var(--border); overflow: hidden; } .fen-mat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--easing); will-change: transform; backface-visibility: hidden; transform: translateZ(0); image-rendering: -webkit-optimize-contrast; } @media (hover: hover) { .fen-mat-card:hover .fen-mat-img img { transform: translateZ(0) scale(1.03); } } .fen-mat-card__tag { margin: 32px 32px 12px; font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-dark); } .fen-mat-card__h3 { margin: 0 32px 16px; font-weight: 300; font-size: 28px; line-height: 1.1; letter-spacing: -0.015em; color: var(--text-dark); } @media (min-width: 768px) { .fen-mat-card__h3 { font-size: 30px; } } .fen-mat-card__body { margin: 0 32px 24px; font-size: 17.5px; line-height: 1.6; color: var(--text-mid); max-width: 44ch; } .fen-mat-specs { margin: 0 32px 32px; padding: 22px 0 0; border-top: 1px solid var(--border); list-style: none; display: flex; flex-direction: column; gap: 12px; } .fen-mat-specs li { display: flex; align-items: flex-start; gap: 12px; font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 1.45; color: var(--text-dark); } .fen-mat-specs li::before { content: ""; width: 12px; height: 1px; background: var(--gold); flex: 0 0 auto; margin-top: 0.65em; } /* 3. STYLES (rail + featured) -------------------------------- */ .fen-styles { padding: 80px 0 88px; background: linear-gradient(180deg, var(--white) 0%, var(--bg-light) 100%); border-top: 1px solid var(--border); position: relative; } @media (min-width: 768px) { .fen-styles { padding: 112px 0 120px; } } .fen-styles::before { content: ""; position: absolute; top: 0; right: 0; width: 480px; height: 480px; background: radial-gradient(circle at top right, rgba(190, 142, 72, 0.14), transparent 70%); pointer-events: none; } .fen-styles-head { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; margin-bottom: 48px; position: relative; } @media (min-width: 768px) { .fen-styles-head { grid-template-columns: 1fr auto; column-gap: 48px; margin-bottom: 56px; } } .fen-styles-head .eyebrow { margin-bottom: 0; } .fen-styles-head h2 { grid-column: 1; margin: 12px 0 0; font-weight: 300; font-size: clamp(34px, 5vw, 68px); line-height: 1.05; letter-spacing: -0.025em; color: var(--text-dark); max-width: 18ch; } .fen-styles-head h2 em { color: var(--gold-dark); font-weight: 300; font-style: italic; } .fen-styles-head .fen-styles-index { display: none; } @media (min-width: 768px) { .fen-styles-head .fen-styles-index { display: flex; align-items: baseline; gap: 10px; grid-column: 2; grid-row: 1 / span 2; align-self: end; padding-bottom: 8px; font-weight: 300; font-size: clamp(60px, 7vw, 104px); line-height: 0.85; letter-spacing: -0.035em; color: var(--gold-dark); } .fen-styles-head .fen-styles-index span { font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-mid); } } .fen-styles-head .fen-styles-both { grid-column: 1 / -1; margin: 4px 0 0; padding-top: 18px; border-top: 1px solid var(--border); font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-mid); } .fen-styles-stage { display: grid; grid-template-columns: 1fr; gap: 28px; } @media (min-width: 1024px) { .fen-styles-stage { grid-template-columns: 1fr 340px; gap: 48px; } } .fen-featured { position: relative; border: 1px solid var(--border); background: var(--white); display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: var(--radius); } @media (min-width: 1024px) { .fen-featured { min-height: 540px; } } .fen-featured__photo { position: relative; overflow: hidden; background: var(--bg-light); aspect-ratio: 4 / 3; } @media (min-width: 1024px) { .fen-featured__photo { aspect-ratio: auto; } .fen-featured { grid-template-rows: 1fr auto; } } .fen-featured__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 24px; transition: opacity 0.4s var(--easing); } @media (min-width: 768px) { .fen-featured__photo img { padding: 40px; } } .fen-featured__num { position: absolute; top: 20px; left: 22px; font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-dark); background: rgba(255, 255, 255, 0.94); padding: 7px 13px; border: 1px solid var(--border); border-radius: 3px; } .fen-featured__info { padding: 28px 28px 32px; border-top: 1px solid var(--border); } @media (min-width: 768px) { .fen-featured__info { padding: 36px 40px 40px; } } .fen-featured__name { margin: 0; font-weight: 300; font-size: clamp(30px, 3.4vw, 52px); line-height: 1; letter-spacing: -0.025em; color: var(--text-dark); } .fen-featured__desc { margin: 18px 0 0; font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 400; font-size: 20px; line-height: 1.55; color: var(--text-mid); max-width: 52ch; } .fen-featured__ideal { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; } .fen-featured__ideal .fen-key { font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-dark); } .fen-featured__ideal .fen-val { font-size: 17px; color: var(--text-dark); } .fen-style-rail { display: flex; flex-direction: column; border-top: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--white); } @media (min-width: 1024px) { .fen-style-rail { background: transparent; border-radius: 0; } } .fen-style-rail button { all: unset; cursor: pointer; display: grid; grid-template-columns: 46px 1fr 18px; align-items: center; gap: 14px; padding: 18px 16px; border-bottom: 1px solid var(--border); transition: background 0.25s var(--easing), padding 0.25s var(--easing); box-sizing: border-box; } .fen-style-rail button:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; } @media (hover: hover) { .fen-style-rail button:hover { background: rgba(190, 142, 72, 0.06); padding-left: 20px; } } .fen-style-rail button.is-active { background: rgba(190, 142, 72, 0.10); border-left: 2px solid var(--gold); padding-left: 18px; } .fen-style-rail .num { font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: 0.2em; color: var(--text-mid); } .fen-style-rail button.is-active .num { color: var(--color-gold-text); } .fen-style-rail .name { font-weight: 300; font-size: 24px; line-height: 1; letter-spacing: -0.01em; color: var(--text-dark); } .fen-style-rail button.is-active .name { color: var(--gold-dark); font-style: italic; } .fen-style-rail .arrow { font-family: var(--font-body); font-weight: 600; font-size: 16px; color: var(--text-mid); text-align: right; opacity: 0; transition: opacity 0.25s var(--easing); } .fen-style-rail button.is-active .arrow { opacity: 1; color: var(--gold-dark); } @media (hover: hover) { .fen-style-rail button:hover .arrow { opacity: 1; color: var(--gold-dark); } } /* Mobile: replace the style rail with left/right arrows overlaid on the featured window card. */ .fen-arrow { display: none; } @media (max-width: 767px) { .fen-style-rail { display: none; } .fen-arrow { display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.94); color: var(--gold-dark); box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16); z-index: 3; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.15s var(--easing), background-color 0.15s var(--easing); } .fen-arrow--prev { left: 12px; } .fen-arrow--next { right: 12px; } .fen-arrow svg { width: 20px; height: 20px; } .fen-arrow:active { transform: translateY(-50%) scale(0.9); background: #fff; } } /* 4. ENERGY + RÉNOCLIMAT ------------------------------------ */ .fen-energy { padding: 80px 0; background: var(--white); border-top: 1px solid var(--border); } @media (min-width: 768px) { .fen-energy { padding: 112px 0; } } .fen-energy-grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: start; } @media (min-width: 1024px) { .fen-energy-grid { grid-template-columns: 1.4fr 1fr; gap: 80px; } } .fen-energy-copy .eyebrow { margin-bottom: 18px; } .fen-energy-copy h2 { margin: 0 0 28px; font-weight: 300; font-size: clamp(34px, 5vw, 68px); line-height: 1.02; letter-spacing: -0.03em; color: var(--text-dark); max-width: 14ch; } .fen-energy-copy h2 em { color: var(--gold); font-weight: 300; font-style: italic; } .fen-energy-copy p { margin: 0 0 20px; font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: 20px; line-height: 1.6; color: var(--text-mid); max-width: 58ch; } .fen-energy-copy p:last-child { margin-bottom: 0; } .fen-energy-copy p strong { color: var(--text-dark); font-weight: 600; } .fen-reno-card { position: relative; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 28px 28px; box-shadow: var(--shadow-sm); transition: opacity 0.7s var(--easing), transform 0.5s var(--easing), box-shadow 0.3s var(--easing); } @media (hover: hover) { .fen-reno-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } } @media (min-width: 1024px) { .fen-reno-card { padding: 36px 36px 32px; position: sticky; top: 100px; } } .fen-reno-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--gold); border-radius: var(--radius) var(--radius) 0 0; transform: scaleX(0); transform-origin: left center; transition: transform 0.9s var(--easing) 0.2s; } [data-reveal].is-visible.fen-reno-card::before { transform: scaleX(1); } .fen-reno-card__label { font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 14px; } .fen-reno-card__upto { font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-mid); margin-bottom: 6px; } .fen-reno-card__amount { font-weight: 300; font-size: 76px; line-height: 1; letter-spacing: -0.035em; color: var(--text-dark); display: flex; align-items: baseline; gap: 6px; } @media (min-width: 768px) { .fen-reno-card__amount { font-size: 88px; } } .fen-reno-card__amount .currency { font-size: 34px; color: var(--gold-dark); font-weight: 400; } .fen-reno-card__amount .per { font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-mid); margin-left: 8px; } .fen-reno-card__desc { margin: 20px 0 24px; font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 400; font-size: 18px; line-height: 1.55; color: var(--text-mid); } .fen-reno-card__row { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 12px 0; border-top: 1px solid var(--border); font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; } .fen-reno-card__row .k { color: var(--text-mid); flex: 0 0 auto; } .fen-reno-card__row .v { color: var(--text-dark); text-align: right; flex: 1 1 auto; } .fen-reno-card__cta { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 22px; padding: 14px 18px; background: var(--gold); color: var(--white); font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid var(--gold); border-radius: 3px; transition: background 0.25s var(--easing), transform 0.25s var(--easing); } @media (hover: hover) { .fen-reno-card__cta:hover { background: var(--gold-dark); border-color: var(--gold-dark); transform: translateY(-1px); } } .fen-warranty-line { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 20px 32px; font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-mid); } .fen-warranty-line .w { display: flex; align-items: baseline; gap: 8px; } .fen-warranty-line .w .y { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 400; font-size: 18px; letter-spacing: -0.01em; color: var(--gold-dark); text-transform: none; } /* 5. THERMO COMPARE ------------------------------------------ */ .fen-thermo-section { padding: 80px 0 96px; background: var(--bg-light); border-top: 1px solid var(--border); } @media (min-width: 768px) { .fen-thermo-section { padding: 112px 0 128px; } } .fen-thermo-head { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: end; margin-bottom: 40px; padding-bottom: 32px; border-bottom: 1px solid var(--border); } @media (min-width: 900px) { .fen-thermo-head { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; margin-bottom: 48px; } } .fen-thermo-head .eyebrow { grid-column: 1 / -1; margin: 0 0 4px; } .fen-thermo-head__h2 { margin: 0; font-weight: 300; font-size: clamp(30px, 4.2vw, 52px); line-height: 1.04; letter-spacing: -0.02em; color: var(--text-dark); max-width: 16ch; } .fen-thermo-head__h2 em { color: var(--gold); font-weight: 300; font-style: italic; } .fen-thermo-head__lede { margin: 0; padding-bottom: 4px; font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 400; font-size: 20px; line-height: 1.55; color: var(--text-mid); max-width: 42ch; } .fen-thermo-compare { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 900px) { .fen-thermo-compare { grid-template-columns: 1fr 1fr; gap: 24px; } } .fen-thermo-opt { position: relative; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 36px 30px 32px; display: flex; flex-direction: column; transition: opacity 0.6s var(--easing), transform 0.5s var(--easing), box-shadow 0.3s var(--easing), border-color 0.3s var(--easing); } @media (min-width: 768px) { .fen-thermo-opt { padding: 40px 40px 36px; } } @media (hover: hover) { .fen-thermo-opt:hover { border-color: #d8d0c2; box-shadow: var(--shadow-sm); transform: translateY(-2px); } } .fen-thermo-opt.is-recommended { border-color: rgba(190, 142, 72, 0.45); background: linear-gradient(180deg, rgba(190, 142, 72, 0.045) 0%, rgba(190, 142, 72, 0) 50%), var(--white); } .fen-thermo-opt__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .fen-thermo-opt__title { margin: 0; font-weight: 300; font-size: 28px; line-height: 1.05; letter-spacing: -0.015em; color: var(--text-dark); } @media (min-width: 768px) { .fen-thermo-opt__title { font-size: 32px; } } .fen-thermo-opt__tag { flex-shrink: 0; font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-dark); white-space: nowrap; } .fen-thermo-opt__lede { margin: 0 0 26px; padding-bottom: 24px; border-bottom: 1px solid var(--border); font-size: 17px; line-height: 1.6; color: var(--text-mid); max-width: 44ch; } .fen-thermo-specs { margin: 0; padding: 0; display: grid; grid-template-columns: 110px 1fr; row-gap: 14px; column-gap: 20px; } .fen-thermo-specs .row { display: contents; } .fen-thermo-specs dt { font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-dark); padding-top: 4px; } .fen-thermo-specs dd { margin: 0; display: flex; align-items: baseline; gap: 10px; font-size: 17px; line-height: 1.45; color: var(--text-dark); } .fen-thermo-specs dd.is-muted { color: var(--text-mid); font-family: 'Fraunces', Georgia, serif; font-style: italic; } .fen-thermo-specs dd.is-accent { color: var(--gold-dark); font-weight: 500; } .fen-thermo-foot { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--border); display: grid; grid-template-columns: 1fr; gap: 18px; align-items: center; } @media (min-width: 768px) { .fen-thermo-foot { grid-template-columns: 1fr auto; gap: 40px; } } .fen-thermo-foot__copy { margin: 0; font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 400; font-size: 19px; line-height: 1.5; color: var(--text-mid); max-width: 58ch; } .fen-thermo-foot__cta { justify-self: start; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-dark); border-bottom: 1px solid rgba(190, 142, 72, 0.5); padding-bottom: 6px; transition: gap 0.25s var(--easing), border-color 0.25s var(--easing); } @media (min-width: 768px) { .fen-thermo-foot__cta { justify-self: end; } } @media (hover: hover) { .fen-thermo-foot__cta:hover { gap: 16px; border-bottom-color: var(--gold-dark); } } /* 6. CTA BAND ------------------------------------------------ */ .fen-cta-band { padding: 40px 0; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); background: linear-gradient(90deg, rgba(190, 142, 72, 0.10), rgba(190, 142, 72, 0) 60%), var(--white); } @media (min-width: 768px) { .fen-cta-band { padding: 56px 0; } } .fen-cta-band__row { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: center; } @media (min-width: 900px) { .fen-cta-band__row { grid-template-columns: minmax(max-content, 1fr) auto auto; gap: 40px; } } .fen-cta-band__title { font-weight: 300; font-size: clamp(24px, 2.4vw, 36px); line-height: 1.1; letter-spacing: -0.02em; color: var(--text-dark); } @media (min-width: 900px) { .fen-cta-band__title { white-space: nowrap; } } .fen-cta-band__title em { color: var(--gold); font-weight: 300; font-style: italic; } .fen-cta-band__phone { text-align: left; } @media (min-width: 900px) { .fen-cta-band__phone { text-align: right; } } .fen-cta-band__phone .lbl { display: block; font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-mid); margin-bottom: 4px; white-space: nowrap; } .fen-cta-band__phone a { font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: 26px; letter-spacing: -0.015em; color: var(--text-dark); transition: color 0.2s; white-space: nowrap; } @media (hover: hover) { .fen-cta-band__phone a:hover { color: var(--gold-dark); } } /* 6b. CTA BAND — FEATURE VARIANT (cross-CTA with product photo) */ .fen-cta-band--feature { padding: 72px 0; } @media (min-width: 768px) { .fen-cta-band--feature { padding: 96px 0; } } .fen-cta-band__row--feature { grid-template-columns: 1fr; gap: 32px; text-align: center; } .fen-cta-band__row--feature .fen-cta-band__text > p { margin-top: 14px; font-size: 17px; line-height: 1.55; color: var(--text-mid); max-width: 56ch; margin-left: auto; margin-right: auto; } .fen-cta-band__row--feature .fen-cta-band__title { font-size: clamp(32px, 4.2vw, 56px); line-height: 1.05; } @media (min-width: 900px) { .fen-cta-band__row--feature { grid-template-columns: 1fr auto; gap: 64px; text-align: left; align-items: center; } .fen-cta-band__row--feature .fen-cta-band__text > p { margin-left: 0; margin-right: 0; } .fen-cta-band__row--feature .fen-cta-band__title { white-space: normal; } } .fen-cta-band__btn { margin-top: 28px; } .fen-cta-band__action { display: flex; justify-content: center; position: relative; } .fen-cta-band__action::before { content: ""; position: absolute; inset: 50% 50% auto auto; width: 78%; aspect-ratio: 1 / 1; transform: translate(50%, -50%) scale(0.86); background: radial-gradient(closest-side, rgba(190, 142, 72, 0.22), rgba(190, 142, 72, 0) 72%); opacity: 0; transition: opacity 0.6s var(--easing), transform 0.8s var(--easing); pointer-events: none; z-index: 0; } .fen-cta-band__img { position: relative; z-index: 1; display: block; width: clamp(160px, 22vw, 240px); height: auto; filter: drop-shadow(0 18px 32px rgba(40, 28, 10, 0.18)); transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: transform, filter; } .fen-cta-band__img--lg { width: clamp(240px, 33vw, 360px); } .fen-cta-band__row--feature .fen-cta-band__title em { position: relative; background-image: linear-gradient(var(--gold), var(--gold)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px; padding-bottom: 0.06em; transition: background-size 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); } @media (hover: hover) { .fen-cta-band__row--feature:hover .fen-cta-band__img { transform: translateY(-8px) scale(1.04); filter: drop-shadow(0 28px 44px rgba(40, 28, 10, 0.26)); } .fen-cta-band__row--feature:hover .fen-cta-band__action::before { opacity: 1; transform: translate(50%, -50%) scale(1); } .fen-cta-band__row--feature:hover .fen-cta-band__title em { background-size: 100% 1px; } } @media (prefers-reduced-motion: reduce) { .fen-cta-band__img, .fen-cta-band__action::before, .fen-cta-band__row--feature .fen-cta-band__title em { transition: none !important; } .fen-cta-band__row--feature:hover .fen-cta-band__img { transform: none; filter: drop-shadow(0 18px 32px rgba(40, 28, 10, 0.18)); } } /* ========================================================= FENETRES · SECTION DIVIDERS Stronger hairline between sections, slightly darker than --border so the rhythm of the page reads clearly. ========================================================= */ .fen-page-head { border-bottom-color: #cdc3b0; } .fen-styles, .fen-energy, .fen-thermo-section { border-top-color: #cdc3b0; } /* ========================================================= FENETRES · PREMIUM MICRO-ANIMATIONS ========================================================= */ /* Editorial underline draw under italic gold accents (page-head h1, thermo-head h2). Uses background-image so the line wraps with the text across multiple lines. */ .fen-h1 em, .fen-thermo-head__h2 em { background-image: linear-gradient(var(--gold), var(--gold)); background-position: 0 calc(100% - 0.04em); background-repeat: no-repeat; background-size: 0% 2px; transition: background-size 1.1s var(--easing) 0.55s; } [data-reveal-stagger].is-visible > .fen-h1 em, .fen-thermo-head.is-visible .fen-thermo-head__h2 em { background-size: 100% 2px; } /* Featured style photo eases in with a hint of zoom-out when first revealed, then crossfades on tab change (opacity handled by JS). */ .fen-featured__photo img { transform: scale(1.025); transition: opacity 0.45s var(--easing), transform 1.6s var(--easing); } .fen-featured.is-visible .fen-featured__photo img { transform: scale(1); } /* Style rail buttons: smoother color/number transition on activation. */ .fen-style-rail button .num, .fen-style-rail button .name { transition: color 0.3s var(--easing); } /* The shared reveal-stagger pattern sets transition-delay per nth-child on each button. Because the shorthand transition-delay applies to ALL transitioning properties, it would also delay subsequent hover transitions (background, padding) — so buttons further down the list would feel progressively laggier on hover. Switching the rail's entrance to a CSS animation isolates the delay to the reveal and leaves hover transitions instant. */ @keyframes fenRailFadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Rail buttons inherit a transition for opacity/transform from the generic [data-reveal-stagger] > * rule. Combined with the staggered animation below, both fire on the same properties when .is-visible is added: the transition tries to fade all buttons in together, then the animation's backwards-fill snaps buttons 2-5 back to 0 to stagger in — visible as a "flash then refresh". Disable the transition here so only the animation drives the reveal. */ .fen-style-rail[data-reveal-stagger] > *, .fen-style-rail[data-reveal-stagger].is-visible > * { transition: none; } .fen-style-rail[data-reveal-stagger].is-visible > * { animation: fenRailFadeIn 0.6s var(--easing) both; } .fen-style-rail[data-reveal-stagger].is-visible > *:nth-child(1) { animation-delay: 0s; } .fen-style-rail[data-reveal-stagger].is-visible > *:nth-child(2) { animation-delay: 0.08s; } .fen-style-rail[data-reveal-stagger].is-visible > *:nth-child(3) { animation-delay: 0.16s; } .fen-style-rail[data-reveal-stagger].is-visible > *:nth-child(4) { animation-delay: 0.24s; } .fen-style-rail[data-reveal-stagger].is-visible > *:nth-child(5) { animation-delay: 0.32s; } @media (prefers-reduced-motion: reduce) { .fen-style-rail[data-reveal-stagger].is-visible > * { animation: none; } } /* CTA band gets a faint gold sweep when its row enters view — subtle, behind the content. */ .fen-cta-band { position: relative; overflow: hidden; } .fen-cta-band__row { position: relative; } .fen-cta-band__row::before { content: ""; position: absolute; /* Stretch well past the row so the sweep always covers the full section height — otherwise the white section background shows through as thin strips above and below the sweep on the right. */ top: -200%; bottom: -200%; left: 0; width: 140%; transform: translateX(-110%); background: linear-gradient(90deg, rgba(190, 142, 72, 0) 0%, rgba(190, 142, 72, 0.10) 50%, rgba(190, 142, 72, 0) 100%); pointer-events: none; z-index: 0; transition: transform 1.8s var(--easing) 0.25s; } .fen-cta-band__row.is-visible::before { transform: translateX(40%); } .fen-cta-band__row > * { position: relative; z-index: 1; } @media (hover: hover) { /* ========================================================= FENETRES · HOVER POLISH Cleaner, more responsive hover states across the page. ========================================================= */ /* Material card — soft gold-tinted shadow + heading nudge */ .fen-mat-card:hover { box-shadow: 0 14px 38px rgba(190, 142, 72, 0.12); border-color: rgba(190, 142, 72, 0.35); } } .fen-mat-card__h3 { transition: transform 0.45s var(--easing); } @media (hover: hover) { .fen-mat-card:hover .fen-mat-card__h3 { transform: translateX(4px); } } /* Material card spec items — per-row interaction */ .fen-mat-specs li { transition: transform 0.3s var(--easing), color 0.3s var(--easing); } .fen-mat-specs li::before { transition: width 0.3s var(--easing), background-color 0.3s var(--easing); } @media (hover: hover) { .fen-mat-specs li:hover { transform: translateX(4px); } } @media (hover: hover) { .fen-mat-specs li:hover::before { width: 20px; background-color: var(--gold-dark); } } /* Featured style photo — gentle scale on hover. The selector is chained with .fen-featured.is-visible so it matches the specificity of the earlier scale-on-reveal rule. */ .fen-featured__photo { overflow: hidden; } .fen-featured__photo img { transition: opacity 0.45s var(--easing), transform 1.4s var(--easing); } @media (hover: hover) { .fen-featured.is-visible .fen-featured__photo:hover img, .fen-featured__photo:hover img { transform: scale(1.025); } } /* Reno-card amount lifts subtly when the card is hovered */ .fen-reno-card__amount { display: inline-block; transform-origin: left center; transition: transform 0.5s var(--easing); } @media (hover: hover) { .fen-reno-card:hover .fen-reno-card__amount { transform: scale(1.025); } } /* Reno-card spec rows — key + value shift to gold on row hover */ .fen-reno-card__row .k, .fen-reno-card__row .v { transition: color 0.3s var(--easing); } @media (hover: hover) { .fen-reno-card__row:hover .k, .fen-reno-card__row:hover .v { color: var(--gold-dark); } } /* Thermo opt card — title nudges on hover */ .fen-thermo-opt__title { transition: transform 0.4s var(--easing); } @media (hover: hover) { .fen-thermo-opt:hover .fen-thermo-opt__title { transform: translateX(3px); } } /* Thermo opt spec values — subtle shift on row hover via dd */ .fen-thermo-specs dd { transition: transform 0.3s var(--easing), color 0.3s var(--easing); } @media (hover: hover) { .fen-thermo-specs dd:hover { transform: translateX(3px); color: var(--gold-dark); } } /* CTA band phone link — animated gold underline grow */ .fen-cta-band__phone a { position: relative; display: inline-block; } /* Reduced-motion: snap to final state, no transitions */ @media (prefers-reduced-motion: reduce) { .fen-h1 em, .fen-thermo-head__h2 em { background-size: 100% 2px !important; transition: none !important; } .fen-reno-card::before { transform: none !important; transition: none !important; } .fen-cta-band__row::before { display: none; } .fen-featured__photo img { transform: none !important; transition: none !important; } .fen-cta-band::after { display: none; } .fen-mat-card__h3, .fen-mat-specs li, .fen-mat-specs li::before, .fen-reno-card__amount, .fen-thermo-opt__title, .fen-thermo-specs dd, } /* ========================================================= ZONES DESSERVIES ========================================================= */ /* Section--zones uses default (white) bg so it alternates with Garanties (light). */ /* Search */ .zones__search-wrap { max-width: 460px; margin: -16px auto 56px; } .zones__search { position: relative; display: flex; align-items: center; gap: 12px; background: var(--bg-light); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 999px; padding: 14px 20px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .zones__search:focus-within { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(190, 142, 72, 0.12); } .zones__search-field { display: contents; } .zones__search-icon { color: var(--gold); flex-shrink: 0; } .zones__search-input { flex: 1; border: 0; outline: 0; background: transparent; font-family: var(--font-body); font-size: 17px; color: var(--black); min-width: 0; } .zones__search-input::-webkit-search-cancel-button, .zones__search-input::-webkit-search-decoration { -webkit-appearance: none; } .zones__search-input::placeholder { color: rgba(0, 0, 0, 0.4); } .zones__search-clear { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.06); color: var(--text-mid); cursor: pointer; padding: 0; flex-shrink: 0; transition: background 0.2s ease, color 0.2s ease; } @media (hover: hover) { .zones__search-clear:hover { background: var(--gold); color: #fff; } } /* Grid + columns */ .zones__grid { display: grid; grid-template-columns: 1fr; gap: 40px; } @media (min-width: 768px) { .zones__grid { grid-template-columns: repeat(3, 1fr); gap: 48px; } } .zones__col { transition: opacity 0.6s var(--easing), transform 0.6s var(--easing); } .zones__col.is-empty { opacity: 0.35; } .zones__col-head { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .zones__icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex-shrink: 0; background: rgba(190, 142, 72, 0.1); border-radius: 50%; color: var(--gold); } .zones__title { font-family: var(--font-body); font-weight: 600; font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--black); margin: 0; } .zones__count { display: block; margin-top: 4px; font-family: var(--font-body); font-size: 14px; color: var(--text-mid); } /* City pills */ .zones__cities { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; } .zones__city { transition: opacity 0.2s ease, transform 0.2s ease; } .zones__city.is-hidden { display: none; } .zones__city a { display: inline-flex; align-items: center; padding: 8px 14px; background: var(--bg-light); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 999px; font-size: 16px; color: var(--text-mid); text-decoration: none; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } @media (hover: hover) { .zones__city a:hover { background: rgba(190, 142, 72, 0.1); border-color: var(--gold); color: var(--gold-dark); transform: translateY(-1px); } } .zones__city.is-match a { background: var(--gold); border-color: var(--gold); color: #fff; } /* Empty state */ .zones__empty { max-width: 560px; margin: 40px auto 0; padding: 20px 24px; text-align: center; background: var(--bg-light); border: 1px dashed rgba(0, 0, 0, 0.12); border-radius: 8px; font-size: 17px; color: var(--text-mid); } .zones__empty a { color: var(--color-gold-text); font-weight: 600; text-decoration: none; } @media (hover: hover) { .zones__empty a:hover { text-decoration: underline; } } /* CTA below */ .zones__cta { text-align: center; margin: 48px 0 0; font-size: 17px; color: var(--text-mid); } .zones__cta a { color: var(--color-gold-text); font-weight: 600; text-decoration: none; } @media (hover: hover) { .zones__cta a:hover { text-decoration: underline; } } .zones__cta-call { display: inline; } @media (max-width: 600px) { .zones__cta-call { display: block; margin-top: 4px; } } /* ========================================================= FAQ (home) ========================================================= */ .section--faq { background: var(--bg-light); padding-bottom: calc(var(--section-y) * 1.5); } .faq__list { max-width: 820px; margin: 0 auto; } .faq__item { border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .faq__item:first-child { border-top: 1px solid rgba(0, 0, 0, 0.1); } .faq__q { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 4px; cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--black); list-style: none; } .faq__q::-webkit-details-marker { display: none; } @media (hover: hover) { .faq__q:hover { color: var(--color-gold-text); } } .faq__q-text { flex: 1; } .faq__icon { flex-shrink: 0; width: 14px; height: 14px; position: relative; } .faq__icon::before, .faq__icon::after { content: ''; position: absolute; background: var(--gold); top: 50%; left: 50%; transform: translate(-50%, -50%); transition: transform 0.25s ease; } .faq__icon::before { width: 14px; height: 2px; } .faq__icon::after { width: 2px; height: 14px; } .faq__item[open] .faq__icon::after { transform: translate(-50%, -50%) scaleY(0); } .faq__a { padding: 0 4px 22px; font-size: 18px; line-height: 1.65; color: var(--text-mid); } .faq__a p { margin: 0; } .faq__a p + p { margin-top: 14px; } .faq__a a { color: var(--color-gold-text); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(190, 142, 72, 0.4); text-underline-offset: 3px; transition: color 0.2s ease, text-decoration-color 0.2s ease; } @media (hover: hover) { .faq__a a:hover { color: var(--gold-dark); text-decoration-color: var(--gold-dark); } } .faq__link-anchor { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; margin-top: 4px; background: rgba(190, 142, 72, 0.08); border: 1px solid rgba(190, 142, 72, 0.25); border-radius: 999px; color: var(--gold-dark) !important; text-decoration: none !important; font-size: 16px; font-weight: 600; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } @media (hover: hover) { .faq__link-anchor:hover { background: rgba(190, 142, 72, 0.16); border-color: var(--gold); transform: translateY(-1px); } } .faq__link-anchor svg { flex-shrink: 0; transition: transform 0.25s ease; } @media (hover: hover) { .faq__link-anchor:hover svg { transform: translateY(-2px); } } /* ========================================================================== Portes d'entrée — "Sur mesure" step-by-step flow ========================================================================== */ .pe-flow { padding: 80px 0 88px; background: var(--white); border-top: 1px solid var(--border); position: relative; overflow: hidden; } @media (min-width: 768px) { .pe-flow { padding: 112px 0 120px; } } .pe-flow::before { content: ""; position: absolute; top: -120px; left: -120px; width: 420px; height: 420px; background: radial-gradient(circle, rgba(190, 142, 72, 0.10), transparent 70%); pointer-events: none; } .pe-flow-head { max-width: 720px; margin: 0 0 48px; position: relative; } @media (min-width: 768px) { .pe-flow-head { margin-bottom: 72px; } } .pe-flow-head .eyebrow { margin-bottom: 0; } .pe-flow-head h2 { margin: 14px 0 0; font-family: 'Fraunces', Georgia, serif; font-weight: 300; font-size: clamp(34px, 5vw, 64px); line-height: 1.05; letter-spacing: -0.025em; color: var(--text-dark); } .pe-flow-head h2 em { color: var(--gold-dark); font-style: italic; font-weight: 300; } .pe-flow-head__lede { margin: 18px 0 0; font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 400; font-size: 20px; line-height: 1.55; color: var(--text-mid); max-width: 56ch; } .pe-flow-steps { list-style: none; padding: 0; margin: 0; position: relative; } .pe-step { display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding: 0 0 40px 0; position: relative; } @media (min-width: 768px) { .pe-step { grid-template-columns: 140px 1fr; gap: 56px; padding-bottom: 56px; } } .pe-step:last-child { padding-bottom: 0; } .pe-step__num { position: relative; display: flex; align-items: flex-start; justify-content: center; font-family: 'Fraunces', Georgia, serif; font-weight: 300; font-style: italic; font-size: 44px; line-height: 0.9; color: var(--color-gold-text); letter-spacing: -0.02em; } @media (min-width: 768px) { .pe-step__num { font-size: 96px; justify-content: flex-end; padding-right: 8px; } } .pe-step__num span { position: relative; display: inline-block; } .pe-step__num span::after { content: ""; position: absolute; left: 50%; top: calc(100% + 12px); width: 1px; height: calc(100vh + 60px); max-height: 220px; background: linear-gradient(180deg, var(--gold) 0%, var(--border) 60%, transparent 100%); transform: translateX(-50%); } @media (min-width: 768px) { .pe-step__num span::after { top: calc(100% + 14px); max-height: 260px; } } .pe-step:last-child .pe-step__num span::after { display: none; } .pe-step__body { padding-top: 6px; } @media (min-width: 768px) { .pe-step__body { padding-top: 22px; } } .pe-step__kicker { margin: 0 0 8px; font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-dark); } .pe-step__title { display: inline-block; margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: clamp(26px, 2.8vw, 38px); line-height: 1.1; letter-spacing: -0.015em; color: var(--text-dark); } .pe-step__desc { margin: 14px 0 0; font-size: 18px; line-height: 1.65; color: var(--text-mid); max-width: 60ch; } .pe-step__chip { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; padding: 9px 16px 9px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-light); font-family: var(--font-body); font-weight: 600; font-size: 14px; letter-spacing: 0.04em; color: var(--gold-dark); } .pe-step__chip::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex-shrink: 0; } /* ---- Step reveal & hover animations ---- */ /* Each .pe-step reveals individually as it scrolls into view (data-reveal on the

), so a long flow doesn't burn through every animation while only step 1 is visible. */ .pe-step[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--easing), transform 0.7s var(--easing); } .pe-step[data-reveal].is-visible { opacity: 1; transform: translateY(0); } /* Inner cascade per step: number → kicker → title → desc → chip rise in sequence. Uses @keyframes (not transitions) so the reveal delay/duration doesn't bleed into hover transitions on the same elements. */ .pe-step[data-reveal] .pe-step__num span, .pe-step[data-reveal] .pe-step__kicker, .pe-step[data-reveal] .pe-step__title, .pe-step[data-reveal] .pe-step__desc, .pe-step[data-reveal] .pe-step__chip { opacity: 0; transform: translateY(10px); } .pe-step[data-reveal].is-visible .pe-step__num span { animation: peFadeUp 0.55s var(--easing) 120ms forwards; } .pe-step[data-reveal].is-visible .pe-step__kicker { animation: peFadeUp 0.55s var(--easing) 200ms forwards; } .pe-step[data-reveal].is-visible .pe-step__title { animation: peFadeUp 0.55s var(--easing) 260ms forwards; } .pe-step[data-reveal].is-visible .pe-step__desc { animation: peFadeUp 0.55s var(--easing) 340ms forwards; } .pe-step[data-reveal].is-visible .pe-step__chip { animation: peFadeUp 0.55s var(--easing) 420ms forwards; } @keyframes peFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Connector line draws downward after the step itself reveals */ .pe-step__num span::after { transform: translateX(-50%) scaleY(0); transform-origin: top center; transition: transform 0.85s var(--easing); } .pe-step[data-reveal].is-visible .pe-step__num span::after { transition-delay: 480ms; transform: translateX(-50%) scaleY(1); } /* Hover: snappy lift + accent shift. Deceleration curve (starts at full velocity) so the change is felt immediately rather than ramping in slowly like a default ease-out. */ .pe-step__num, .pe-step__title, .pe-step__chip { transition: transform 0.25s cubic-bezier(0, 0, 0.2, 1), color 0.25s cubic-bezier(0, 0, 0.2, 1), background-color 0.25s cubic-bezier(0, 0, 0.2, 1), border-color 0.25s cubic-bezier(0, 0, 0.2, 1); } @media (hover: hover) { .pe-step__num:hover { transform: translateY(-3px); color: var(--gold-dark); } } @media (min-width: 768px) { @media (hover: hover) { .pe-step__num:hover { transform: translate(4px, -3px); } } } @media (hover: hover) { .pe-step__title:hover { color: var(--gold-dark); } } @media (hover: hover) { .pe-step__chip:hover { background-color: var(--white); border-color: var(--gold); transform: translateY(-1px); } } @media (prefers-reduced-motion: reduce) { .pe-step[data-reveal], .pe-step[data-reveal] .pe-step__num span, .pe-step[data-reveal] .pe-step__kicker, .pe-step[data-reveal] .pe-step__title, .pe-step[data-reveal] .pe-step__desc, .pe-step[data-reveal] .pe-step__chip { opacity: 1 !important; transform: none !important; transition: none !important; } .pe-step__num span::after { transform: translateX(-50%) scaleY(1) !important; } } /* ========================================================================== Hub Rénoclimat band — editorial layout (shared with portes.html) ========================================================================== */ .hub-reno { background: var(--white); padding: var(--section-y) 0; color: var(--text-dark); } .hub-reno__grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: start; } @media (min-width: 1024px) { .hub-reno__grid { grid-template-columns: 1.25fr 1fr; gap: 64px; } } .hub-reno__title { font-family: var(--font-display); font-weight: 400; font-size: 38px; line-height: 1.1; color: var(--text-dark); letter-spacing: -0.015em; margin: 14px 0 0; } @media (min-width: 768px) { .hub-reno__title { font-size: 52px; } } @media (min-width: 1280px) { .hub-reno__title { font-size: 58px; } } .hub-reno__title em { font-style: italic; font-weight: 400; color: var(--gold); } .hub-reno__lede { margin-top: 28px; font-size: 18px; line-height: 1.75; color: var(--text-mid); max-width: 640px; } .hub-reno__lede strong { font-weight: 600; font-style: italic; color: var(--text-dark); } .hub-reno .eyebrow { color: var(--color-gold-text); } .hub-reno .gold-rule { background: var(--border); margin-top: 28px; width: 56px; height: 1px; border: 0; } .hub-reno__cta { margin-top: 36px; display: inline-flex; align-items: center; gap: 12px; padding: 16px 28px; background: var(--gold); color: #fff; font-family: var(--font-body); font-weight: 600; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; border-radius: 2px; transition: all 0.25s var(--easing); box-shadow: 0 2px 8px -2px rgba(190, 142, 72, 0); } @media (hover: hover) { .hub-reno__cta:hover { background: var(--gold-dark); color: #fff; } } .hub-reno__cta svg { transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); } @media (hover: hover) { .hub-reno__cta:hover svg { transform: translateX(3px); } } .hub-reno__inclus { background: var(--bg-light); border: 1px solid var(--border); border-top: 2px solid var(--gold); border-radius: 4px; padding: 32px 36px 12px; transition: transform 0.55s var(--easing), box-shadow 0.55s var(--easing); } @media (hover: hover) { .hub-reno__inclus:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(26, 26, 26, 0.18); } } .hub-reno__inclus-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 22px; margin-bottom: 0; border-bottom: 1px solid var(--border); font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-gold-text); } .hub-reno__inclus-counter { color: rgba(26, 26, 26, 0.4); font-weight: 500; } .hub-reno__inclus-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; } .hub-reno__inclus-list li { display: grid; grid-template-columns: 48px 1fr; gap: 18px; align-items: start; padding: 22px 0; border-bottom: 1px solid var(--border); position: relative; transition: padding-left 0.4s var(--easing); } .hub-reno__inclus-list li:last-child { border-bottom: 0; } .hub-reno__inclus-list li::before { content: ""; position: absolute; left: -8px; top: 50%; width: 2px; height: 0; background: var(--gold); transform: translateY(-50%); transition: height 0.35s var(--easing); } @media (hover: hover) { .hub-reno__inclus-list li:hover::before { height: 60%; } } .hub-reno__inclus-list .num { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 30px; color: var(--color-gold-text); line-height: 1; padding-top: 2px; transition: transform 0.4s var(--easing); } @media (hover: hover) { .hub-reno__inclus-list li:hover .num { transform: translateX(4px); } } .hub-reno__inclus-list h3 { font-family: var(--font-body); font-weight: 600; font-size: 17px; line-height: 1.4; color: var(--text-dark); margin: 0 0 6px; letter-spacing: -0.005em; } .hub-reno__inclus-list p { font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 1.55; color: var(--text-mid); margin: 0; } .autres-services { max-width: 100%; margin: -30px auto 0; padding: 0 16px 48px; text-align: center; } .autres-services__text { font-family: Inter, sans-serif; font-size: clamp(14px, 3.7vw, 17px); color: var(--text-mid); line-height: 1.7; margin: 0 0 12px; text-wrap: balance; white-space: nowrap; } .autres-services__main { display: inline; } .autres-services__text a { color: var(--color-gold-text); text-decoration: none; font-weight: 600; transition: color 0.2s var(--easing); } .autres-services__text a:focus-visible { color: var(--gold-dark); } @media (hover: hover) { .autres-services__text a:hover { color: var(--gold-dark); } } .autres-services__ask { display: block; margin-top: 10px; font-size: 18px; } /* ---------- PARTENAIRES & CERTIFICATIONS (STRIP) ---------- */ /* Same treatment as .fen-cta-band: white base with a soft gold wash from the left, hairline gold dividers above and below. */ .partners-strip { padding: 32px 0; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); background: linear-gradient(90deg, rgba(190, 142, 72, 0.10), rgba(190, 142, 72, 0) 60%), var(--white); } @media (min-width: 768px) { .partners-strip { padding: 44px 0; } } .partners-strip__title { font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-mid); text-align: center; margin: 0 0 22px; } .partners-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 12px; } .partner-chip { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; min-height: 42px; background: var(--white); border: 1px solid var(--border); border-radius: 8px; transition: border-color 0.25s var(--easing), transform 0.25s var(--easing), box-shadow 0.25s var(--easing); } .partner-chip__icon { flex-shrink: 0; width: 16px; height: 16px; color: var(--gold); stroke-width: 1.7; } .partner-chip__name { font-family: var(--font-body); font-weight: 600; font-size: 15px; letter-spacing: 0.03em; color: var(--text-dark); white-space: nowrap; } @media (hover: hover) { .partner-chip:hover { border-color: var(--gold); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); } } @media (prefers-reduced-motion: reduce) { .partner-chip { transition: none; } .partner-chip:hover { transform: none; } } /* ========================================================= BUTTON CONSISTENCY Every gold "box" button has the exact same hover as the hero CTA (.vc-cta): the background + border darken to gold-dark, and the arrow drifts 3px to the right over 0.45s. No lift, no shadow. Only each button's shape (padding / font-size) differs. ========================================================= */ .btn--primary { background: var(--gold); border: 2px solid var(--gold); color: var(--white); } /* .btn.btn--primary out-specifies the [data-reveal-stagger] reveal rules so the staggered entrance delay never leaks into the hover — the darken starts the instant the pointer lands, same as .vc-cta. */ .btn.btn--primary { transition: all 0.25s var(--easing); transition-delay: 0s; } @media (hover: hover) { .btn--primary:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: var(--white); transform: none; box-shadow: none; } } .btn--primary svg { transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); } @media (hover: hover) { .btn--primary:hover svg { transform: translateX(3px); } } @media (prefers-reduced-motion: reduce) { .btn--primary svg { transition: none; } @media (hover: hover) { .btn--primary:hover svg { transform: none; } } } /* ========================================================= HOVER-ON-SCROLL (mobile/tablet) Touch devices can't hover. JS adds `.in-view` to each card as it crosses the middle of the viewport; these rules mirror the desktop :hover states. Scoped under max-width:1023px so desktop is untouched. ========================================================= */ @media (max-width: 1023px) { .product-card.in-view { box-shadow: var(--shadow-md); transform: translateY(-4px); } .product-card.in-view .product-card__media img { transform: scale(1.05); } .product-card.in-view .product-card__media--product img { transform: scale(1.04); } .product-card.in-view .product-card__media--door img { transform: translateY(-15px) scale(0.88); } .product-card.in-view .product-card__media--patio img { transform: scale(1.11); } .product-card.in-view .product-card__media--bathroom img { transform: scale(1.04); } .product-card.in-view .services-grid svg { transform: translateY(-3px); } .feature-card.in-view { border-color: rgba(190, 142, 72, 0.4); transform: translateY(-2px); box-shadow: var(--shadow-sm); } .process-v2__step.in-view { transform: translateY(-3px); } .process-v2__step.in-view .process-v2__num { color: #d4a86a; } .process-v2__step.in-view .process-v2__node { background: #be8e48; border-color: #be8e48; transform: scale(1.04); box-shadow: 0 0 0 6px #fff, 0 6px 14px -8px rgba(190, 142, 72, 0.4); } .process-v2__step.in-view .process-v2__node svg { stroke: #fff; } .process-v2__step.in-view .process-v2__pill { background: rgba(190, 142, 72, 0.14); border-color: rgba(190, 142, 72, 0.45); } .process-v2__step.in-view .process-v2__pill i { transform: scale(1.2); } .process-v2__step.in-view .process-v2__title em { background-size: 100% 1.5px; } .process-v2__step.in-view .process-v2__list li { color: rgba(10, 10, 10, 0.85); } .process-v2__step.in-view .process-v2__list li::before { transform: scale(1.08); } } @media (max-width: 1023px) and (prefers-reduced-motion: reduce) { .product-card.in-view, .feature-card.in-view, .process-v2__step.in-view, .process-v2__step.in-view .process-v2__node { transform: none; } } /* Touch devices: every `:hover` rule across the stylesheets is wrapped in `@media (hover: hover)` so hover styles only apply to mouse/trackpad devices and never fire on a tap. Scroll-triggered `.in-view` animations still provide the motion on mobile. */ /* Narrow screens: staggered children reveal individually as each scrolls into view (JS observes the children, not the container) — so items low in a tall single-column section still animate. */ @media (max-width: 1023px) { [data-reveal-stagger] > *.is-visible { opacity: 1; transform: none; transition-delay: 0s; } } /* Playfair Display renders "Quebec" poorly at heading sizes; swap to Fraunces for the English variant only. */ .font-fraunces, .font-fraunces em { font-family: 'Fraunces', Georgia, serif; }