/* ============================================================ Greenkub Maisons — gabarit fiche + hub Palette = design system Greenkub (vert primaire) + accents jaune #FEDD63 (eyebrow, filets H2, CTA hero, n° étapes, icônes garanties, coches, pricebox, pastille active nuancier). Mobile-first. Tout est scopé sous .gkm. ============================================================ */ .gkm { --gk-green: rgb(65, 184, 131); --gk-green-sub: #fff8e0; --gk-green-soft: rgb(196, 245, 226); --gk-rose: rgb(255, 119, 169); --gk-yellow: #FEDD63; --gk-yellow-soft: #FFF8E0; --gk-yellow-border: #F4D86A; --gk-black-1: rgb(22, 22, 22); --gk-black-2: rgb(47, 47, 47); --gk-black-3: rgb(74, 74, 74); --gk-grey-4: rgb(107, 107, 107); --gk-grey-5: rgb(154, 154, 154); --gk-grey-6: rgb(200, 200, 200); --gk-grey-7: rgb(235, 235, 235); --gk-off-white: rgb(250, 250, 250); --gk-white: #fff; --gk-trustpilot-green: rgb(0, 182, 122); --border-subtle: rgba(154, 154, 154, 0.25); --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px; --shadow-card: 0 8px 20px rgba(154,154,154,0.18); --shadow-card-soft: 0 4px 12px rgba(28,28,28,0.06); --shadow-cta: 0 3px 10px rgba(22,22,22,0.18); --font-display: 'Sora', system-ui, sans-serif; --font-body: 'Mulish', system-ui, sans-serif; --gkm-max: 1280px; --gkm-pad: clamp(20px, 5vw, 80px); --gkm-header-h: 96px; /* écrasé par JS (hauteur réelle du header du thème) */ font-family: var(--font-body); color: var(--gk-black-1); background: var(--gk-white); line-height: 1.5; } .gkm *, .gkm *::before, .gkm *::after { box-sizing: border-box; } .gkm img { max-width: 100%; } .gkm-wrap { max-width: var(--gkm-max); margin: 0 auto; } .gkm-section { padding: clamp(60px, 8vw, 116px) var(--gkm-pad); border-top: 1px solid var(--border-subtle); background: var(--gk-white); } .gkm-section--soft { background: var(--gk-off-white); } .gkm-section--yellow { background: var(--gk-yellow-soft); } .gkm-section--mint { background: var(--gk-green-sub); border-top: none; } /* ---- Typo ---- */ .gkm-h2 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 4vw, 50px); line-height: 1.08; letter-spacing: -0.01em; color: var(--gk-black-1); text-wrap: balance; } .gkm-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 40px; max-width: 680px; } .gkm-head .gkm-h2::after { content: ""; display: block; width: 56px; height: 4px; border-radius: 2px; background: var(--gk-yellow); margin-top: 18px; } .gkm-head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; max-width: none; } .gkm-lede { margin: 0; font-family: var(--font-body); font-weight: 350; font-size: clamp(15.5px, 1.4vw, 16.5px); line-height: 1.62; color: var(--gk-black-3); } .gkm-note { margin: 18px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--gk-grey-4); } /* eyebrow = pastille (dot) jaune + texte majuscule */ .gkm-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; color: var(--gk-black-1); } .gkm-eyebrow::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--gk-yellow); flex-shrink: 0; } .gkm-eyebrow.on-dark { color: #fff; } /* ---- Buttons ---- */ .gkm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 15.5px; line-height: 1; padding: 15px 22px; border-radius: var(--radius-sm); border: none; cursor: pointer; text-decoration: none; transition: transform 120ms ease, box-shadow 140ms ease, background 140ms ease; } .gkm-btn:hover { transform: translateY(-1px); } .gkm-btn--dark { background: var(--gk-black-1); color: #fff; box-shadow: var(--shadow-cta); } .gkm-btn--dark:hover { box-shadow: 0 8px 20px rgba(0,0,0,0.28); } .gkm-btn--yellow { background: var(--gk-yellow); color: var(--gk-black-1); box-shadow: 0 3px 12px rgba(0,0,0,0.22); } .gkm-btn--yellow:hover { box-shadow: 0 8px 20px rgba(254,221,99,0.6); } .gkm-btn--light { background: rgba(255,255,255,0.92); color: var(--gk-black-1); } .gkm-btn--green { background: var(--gk-green); color: #fff; } .gkm-btn--block { width: 100%; } /* ---- Hero (le subnav est à l'intérieur, en overlay non-sticky) ---- */ .gkm-hero { position: relative; overflow: hidden; min-height: clamp(620px, 100vh, 1000px); display: flex; align-items: flex-end; background: var(--gk-grey-7); } .gkm-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .gkm-hero-grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(12,12,12,0.86) 0%, rgba(12,12,12,0.52) 24%, rgba(12,12,12,0.14) 46%, rgba(12,12,12,0) 62%), linear-gradient(100deg, rgba(12,12,12,0.5) 0%, rgba(12,12,12,0.16) 28%, rgba(12,12,12,0) 48%); } /* sous-nav : overlay centré sous le header fixe du thème, scrolle avec le hero */ .gkm-subnav { position: absolute; top: var(--gkm-header-h); left: 0; right: 0; z-index: 6; display: flex; justify-content: center; padding: 12px var(--gkm-pad) 0; pointer-events: none; } .gkm-subnav-inner { pointer-events: auto; display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 6px 8px 6px 16px; background: rgba(255,255,255,0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); box-shadow: var(--shadow-card-soft); overflow-x: auto; scrollbar-width: none; } .gkm-subnav-inner::-webkit-scrollbar { display: none; } .gkm-subnav-ref { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.02em; color: var(--gk-black-1); margin-right: 4px; white-space: nowrap; } .gkm-subnav-anchors { display: inline-flex; align-items: center; gap: 4px; } .gkm-subnav .gkm-subnav-anchors a { color: #161616 !important; } .gkm-subnav a { font-family: var(--font-body); font-weight: 500; font-size: 13px; color: var(--gk-black-3); text-decoration: none; padding: 7px 11px; border-radius: var(--radius-pill); white-space: nowrap; transition: background 140ms ease, color 140ms ease; } .gkm-subnav a:hover { background: var(--gk-yellow-soft); color: var(--gk-black-1); } .gkm-subnav-sep { width: 1px; height: 18px; background: var(--border-subtle); margin: 0 6px; } .gkm-subnav-price { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--gk-black-1); background: var(--gk-yellow-soft); border: 1px solid var(--gk-yellow-border); border-radius: var(--radius-pill); padding: 3px 11px; white-space: nowrap; } .gkm-hero-inner { position: relative; z-index: 1; width: 100%; max-width: var(--gkm-max); margin: 0 auto; padding: clamp(40px, 6vw, 96px) var(--gkm-pad); display: flex; flex-direction: column; gap: 22px; } .gkm-hero-top { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; } .gkm-ref-chip { display: inline-flex; align-items: center; padding: 5px 12px; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.28); border-radius: var(--radius-pill); font-family: var(--font-body); font-weight: 600; font-size: 12.5px; letter-spacing: 0.04em; color: rgba(255,255,255,0.95); } .gkm-hero-h1 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 5.4vw, 78px); line-height: 0.98; letter-spacing: -0.025em; color: #fff; max-width: 16ch; text-shadow: 0 2px 24px rgba(0,0,0,0.5); text-wrap: balance; } .gkm-hero-sub { margin: 0; font-weight: 350; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.6; color: rgba(255,255,255,0.96); max-width: 540px; text-shadow: 0 1px 14px rgba(0,0,0,0.55); } .gkm-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; margin-top: 4px; } .gkm-hero-price { display: flex; flex-direction: column; gap: 1px; border-left: 4px solid var(--gk-yellow); padding-left: 14px; } .gkm-hero-price-lbl { font-weight: 500; font-size: 13px; color: rgba(255,255,255,0.78); text-transform: uppercase; letter-spacing: 0.07em; } .gkm-hero-price-val { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 3vw, 42px); line-height: 1; color: #fff; letter-spacing: -0.02em; } .gkm-hero-price-note { font-weight: 500; font-size: 14px; color: rgba(255,255,255,0.85); margin-top: 3px; } .gkm-hero-btns { display: flex; flex-wrap: wrap; gap: 12px; } .gkm-hero-reassurance { font-weight: 350; font-size: 14px; color: rgba(255,255,255,0.85); } /* ---- Stats ---- */ .gkm-stats-wrap { padding: clamp(24px, 3vw, 40px) var(--gkm-pad) clamp(48px, 5vw, 72px); background: var(--gk-white); } .gkm-stats { max-width: var(--gkm-max); margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; } .gkm-stat { background: var(--gk-white); padding: 22px 20px; display: flex; flex-direction: column; gap: 4px; } .gkm-stat-v { font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -0.01em; color: var(--gk-black-1); } .gkm-stat:nth-child(odd) .gkm-stat-v { color: var(--gk-yellow); } .gkm-stat-l { font-weight: 600; font-size: 14px; color: var(--gk-black-3); } /* ---- Preuve sociale ---- */ .gkm-proof { background: var(--gk-off-white); padding: clamp(56px, 7vw, 96px) var(--gkm-pad); border-top: 1px solid var(--border-subtle); } .gkm-proof-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 40px; margin-bottom: 44px; border-bottom: 1px solid var(--border-subtle); } .gkm-proof-rating { display: flex; align-items: center; gap: 16px; } .gkm-proof-rating > div { display: flex; flex-direction: column; } .gkm-proof-score { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--gk-black-1); line-height: 1; } .gkm-proof-score span { font-size: 15px; color: var(--gk-grey-4); font-weight: 600; } .gkm-proof-sub { font-weight: 500; font-size: 13.5px; color: var(--gk-grey-4); } .gkm-proof-kpis { display: flex; flex-wrap: wrap; gap: 36px 48px; } .gkm-proof-kpis > div { display: flex; flex-direction: column; } .gkm-kpi { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 3vw, 38px); line-height: 1; letter-spacing: -0.01em; color: var(--gk-black-1); } .gkm-proof-kpis > div:nth-child(odd) .gkm-kpi { color: var(--gk-yellow); } .gkm-kpi-l { font-weight: 500; font-size: 13.5px; color: var(--gk-grey-4); margin-top: 4px; } .gkm-stars { display: inline-flex; gap: 2px; } .gkm-stars svg { width: 17px; height: 17px; fill: var(--gk-trustpilot-green); } .gkm-proof-rating .gkm-stars svg { width: 32px; height: 32px; } .gkm-proof-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } .gkm-testi { margin: 0; background: var(--gk-white); border: 1px solid var(--gk-grey-6); border-radius: var(--radius-lg); padding: 28px; display: flex; flex-direction: column; gap: 14px; } .gkm-testi blockquote { margin: 0; font-weight: 350; font-size: 16px; line-height: 1.6; color: var(--gk-black-2); } .gkm-testi figcaption { font-size: 14px; color: var(--gk-grey-4); } .gkm-testi figcaption strong { font-weight: 700; color: var(--gk-black-1); } /* ---- Galerie bento ---- */ .gkm-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(150px, 17vw, 212px); gap: 14px; } .gkm-bento-tile { position: relative; border: none; padding: 0; cursor: zoom-in; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-card-soft); background: var(--gk-grey-7); } .gkm-bento-tile .gkm-bento-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 650ms ease; } .gkm-bento-tile:hover .gkm-bento-img { transform: scale(1.06); } .gkm-bento-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 44px 24px 20px; background: linear-gradient(to top, rgba(22,22,22,0.65), rgba(22,22,22,0)); text-align: left; pointer-events: none; } .gkm-bento-cap span { font-family: var(--font-display); font-weight: 600; font-size: 19px; color: #fff; } .gkm-bento-tile.t-big { grid-column: span 2; grid-row: span 2; box-shadow: var(--shadow-card); } .gkm-bento-tile.t-wide { grid-column: span 2; grid-row: span 1; } .gkm-bento-tile.t-small { grid-column: span 1; grid-row: span 1; } /* ---- Bardage ---- */ .gkm-brd { display: grid; grid-template-columns: 1fr; gap: 22px; } .gkm-brd-viewer { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); background: var(--gk-grey-7); cursor: zoom-in; } .gkm-brd-layer { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 220ms ease; } .gkm-brd-layer.is-on { opacity: 1; } .gkm-brd-zoom { position: absolute; top: 16px; right: 16px; z-index: 3; width: 42px; height: 42px; border: none; border-radius: 50%; background: rgba(255,255,255,0.92); backdrop-filter: blur(6px); box-shadow: var(--shadow-card-soft); cursor: zoom-in; display: flex; align-items: center; justify-content: center; } .gkm-brd-label { position: absolute; left: 18px; bottom: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; background: rgba(255,255,255,0.92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: var(--radius-pill); box-shadow: var(--shadow-card-soft); } .gkm-brd-label span:last-child { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--gk-black-1); } .gkm-brd-dot { width: 13px; height: 13px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12); } .gkm-brd-swatches { display: flex; flex-wrap: wrap; gap: 12px; } .gkm-brd-sw { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 9px 16px 9px 10px; border-radius: var(--radius-pill); cursor: pointer; background: var(--gk-white); border: 1.5px solid var(--gk-grey-6); transition: border-color 140ms ease, box-shadow 140ms ease; } .gkm-brd-sw span:last-child { font-weight: 600; font-size: 14px; color: var(--gk-black-1); } .gkm-brd-sw:hover { border-color: var(--gk-grey-4); } .gkm-brd-sw.is-active { border-color: #E8B800; box-shadow: 0 0 0 3px #FFE9A6; } .gkm-brd-swdot { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.14); } /* ---- Cards (arguments / garanties) ---- */ .gkm-cards { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 40px; } .gkm-card { background: var(--gk-white); border: 1px solid var(--gk-grey-6); border-radius: var(--radius-lg); padding: 26px; display: flex; flex-direction: column; gap: 11px; } .gkm-card h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--gk-black-1); } .gkm-card p { margin: 0; font-weight: 350; font-size: 14.5px; line-height: 1.55; color: var(--gk-black-3); } .gkm-card-ico { width: 26px; height: 26px; stroke: var(--gk-green); } .gkm-gicon { width: 44px; height: 44px; padding: 8px; border-radius: 10px; background: var(--gk-yellow-soft); stroke: var(--gk-black-1); } /* ---- 2 colonnes ---- */ .gkm-2col { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; } .gkm-cible-img, .gkm-agp-img { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); } .gkm-cible-img { min-height: clamp(320px, 40vw, 480px); position: relative; } .gkm-cible-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .gkm-agp-img { background: var(--gk-off-white); border: 1px solid var(--border-subtle); padding: 18px; } .gkm-agp-img img { display: block; width: 100%; height: clamp(320px, 38vw, 520px); object-fit: contain; cursor: zoom-in; } .gkm-bullets { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; } .gkm-bullets li { list-style: none; display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.5; color: var(--gk-black-2); } .gkm-bullets li svg { flex-shrink: 0; width: 24px; height: 24px; margin-top: 1px; padding: 4px; border-radius: 50%; background: var(--gk-yellow); stroke: var(--gk-black-1); box-sizing: border-box; } .gkm-bullets strong { font-weight: 700; color: var(--gk-black-1); } .gkm-bullets ul { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } /* ---- Specrows ---- */ .gkm-specrows { margin-top: 2px; } .gkm-specrow { display: flex; align-items: baseline; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--border-subtle); } .gkm-specrow:last-child { border-bottom: none; } .gkm-specrow .l { flex: 1; font-weight: 350; font-size: 15.5px; color: var(--gk-grey-4); } .gkm-specrow .v { font-weight: 700; font-size: 15.5px; color: var(--gk-black-1); text-align: right; } .gkm-specrow.is-hl .v { color: var(--gk-yellow); } /* ---- Plan ---- */ .gkm-plan-legend { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--gk-grey-4); } .gkm-plan-legend::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--gk-green); } .gkm-plan-grid { display: grid; grid-template-columns: 1fr; gap: 18px; } .gkm-plan-fig { margin: 0; } .gkm-plan-fig figcaption { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--gk-black-1); margin-bottom: 10px; } .gkm-plan-card { position: relative; border-radius: var(--radius-lg); background: var(--gk-white); box-shadow: var(--shadow-card-soft); padding: clamp(16px, 2.5vw, 40px); border: 1px solid var(--border-subtle); } .gkm-plan-card img { display: block; width: 100%; height: auto; object-fit: contain; cursor: zoom-in; } .gkm-plan-zoom { position: absolute; top: 16px; right: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border: none; border-radius: var(--radius-pill); background: var(--gk-black-1); color: #fff; cursor: zoom-in; font-family: var(--font-display); font-weight: 700; font-size: 13px; } /* ---- Fiche technique ---- */ .gkm-tech { display: grid; grid-template-columns: 1fr; gap: clamp(36px, 5vw, 72px); } .gkm-tech-col { display: flex; flex-direction: column; gap: 36px; } .gkm-spectitle { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--gk-black-1); margin: 0 0 6px; } .gkm-spectitle svg { width: 18px; height: 18px; stroke: var(--gk-green); } .gkm-prixbox-wrap { background: var(--gk-off-white); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 26px; display: flex; flex-direction: column; gap: 14px; } .gkm-pricebox { display: inline-flex; align-items: baseline; gap: 10px; background: var(--gk-yellow-soft); border: 1px solid var(--gk-yellow-border); border-left: 4px solid var(--gk-yellow); border-radius: var(--radius-sm); padding: 12px 16px; } .gkm-pricebox .p { font-family: var(--font-display); font-weight: 800; font-size: 30px; color: var(--gk-black-1); letter-spacing: -0.02em; } .gkm-pricebox .s { font-size: 14px; color: var(--gk-grey-4); } .gkm-prixbox-wrap p { margin: 0; font-weight: 350; font-size: 14.5px; line-height: 1.55; color: var(--gk-black-3); } .gkm-prixbox-wrap p strong { font-weight: 700; color: var(--gk-black-1); } /* ---- Process ---- */ .gkm-tl { position: relative; margin-top: 8px; } .gkm-tl-line { position: absolute; top: 32px; left: 10%; right: 10%; height: 2px; background: var(--gk-green-sub); } .gkm-tl-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 22px; } .gkm-tl-item { display: flex; align-items: center; gap: 16px; } .gkm-tl-num { flex-shrink: 0; width: 64px; height: 64px; border-radius: 50%; background: var(--gk-yellow); color: var(--gk-black-1); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 26px; box-shadow: 0 0 0 8px var(--gk-off-white); } .gkm-tl-item span:last-child { font-weight: 500; font-size: 15px; line-height: 1.45; color: var(--gk-black-1); } /* ---- FAQ ---- */ .gkm-faq-wrap { align-items: start; } .gkm-faq-aside { display: flex; flex-direction: column; gap: 18px; } .gkm-contact-card { background: var(--gk-white); border: 1px solid var(--gk-grey-6); border-radius: var(--radius-lg); padding: 26px; display: flex; flex-direction: column; gap: 14px; } .gkm-contact-card h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.35; color: var(--gk-black-1); } .gkm-contact-card p { margin: 0; font-weight: 350; font-size: 15px; line-height: 1.55; color: var(--gk-black-3); } .gkm-faq { margin: 0; border-bottom: 1px solid var(--border-subtle); } .gkm-faq > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 4px; font-family: var(--font-display); font-weight: 600; font-size: clamp(16px, 1.6vw, 19px); color: var(--gk-black-1); } .gkm-faq > summary::-webkit-details-marker { display: none; } .gkm-faq-plus { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--gk-green-sub); color: var(--gk-green); display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; transition: transform 200ms ease; } .gkm-faq[open] .gkm-faq-plus { transform: rotate(45deg); } .gkm-faq > div { padding: 0 4px 24px; font-weight: 350; font-size: 16px; line-height: 1.62; color: var(--gk-black-3); max-width: 760px; } /* ---- Final CTA band (jaune, calqué sur la CTASection du modèle) ---- */ .gkm-ctaband { background: var(--gk-yellow); color: var(--gk-black-1); padding: clamp(64px, 8vw, 120px) var(--gkm-pad); overflow: hidden; } .gkm-ctaband-in { max-width: var(--gkm-max); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 40px; } .gkm-ctaband-txt { display: flex; flex-direction: column; gap: 26px; } .gkm-ctaband .gkm-eyebrow { color: var(--gk-black-1); } .gkm-ctaband .gkm-eyebrow::before { background: var(--gk-black-1); } .gkm-ctaband h2 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(44px, 8vw, 104px); line-height: 0.92; letter-spacing: -0.03em; color: var(--gk-black-1); } .gkm-ctaband-badge { flex-shrink: 0; width: clamp(196px, 22vw, 256px); height: clamp(196px, 22vw, 256px); border-radius: 50%; background: var(--gk-black-1); color: #fff; transform: rotate(-4deg); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; padding: 18px; } .gkm-ctaband-badge strong { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 2.6vw, 33px); line-height: 1.02; } .gkm-ctaband-badge span { font-style: italic; font-size: 14px; color: rgba(255,255,255,0.9); } /* ---- Modale ---- */ .gkm-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; } .gkm-modal[hidden] { display: none; } .gkm-modal-overlay { position: absolute; inset: 0; background: rgba(22,22,22,0.55); } .gkm-modal-box { position: relative; width: 100%; max-width: 480px; background: var(--gk-white); border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(0,0,0,0.3); overflow: hidden; max-height: 92vh; overflow-y: auto; } .gkm-modal-head { background: var(--gk-green); padding: 26px 30px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .gkm-modal-title { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: #fff; line-height: 1.15; } .gkm-modal-sub { font-weight: 350; font-size: 14px; color: rgba(255,255,255,0.9); margin-top: 4px; } .gkm-modal-x { flex-shrink: 0; width: 36px; height: 36px; border: none; border-radius: 50%; background: rgba(255,255,255,0.2); color: #fff; cursor: pointer; font-size: 18px; } .gkm-modal-form { padding: 28px 30px; display: flex; flex-direction: column; gap: 14px; } .gkm-input { width: 100%; font-family: var(--font-body); font-size: 16px; padding: 14px 16px; border-radius: var(--radius-sm); border: 1.5px solid var(--gk-grey-6); background: var(--gk-white); color: var(--gk-black-1); outline: none; transition: border-color 140ms ease; } .gkm-input:focus { border-color: var(--gk-green); } .gkm-modal-legal { margin: 2px 0 0; font-size: 12px; line-height: 1.5; color: var(--gk-grey-4); text-align: center; } .gkm-modal-merci { padding: 40px 30px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; } .gkm-modal-merci p { margin: 0; font-weight: 350; font-size: 16px; line-height: 1.55; color: var(--gk-black-3); } .gkm-modal-check { width: 64px; height: 64px; border-radius: 50%; background: var(--gk-green-sub); color: var(--gk-green); display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 800; } /* ---- Lightbox (zoom plan + galerie) ---- */ .gkm-lightbox { position: fixed; inset: 0; z-index: 1100; background: rgba(14,14,14,0.92); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: clamp(20px,4vw,56px); overflow: auto; } .gkm-lightbox[hidden] { display: none; } .gkm-lightbox img { max-width: 100%; max-height: 82vh; width: auto; height: auto; cursor: grab; transition: transform 160ms ease; transform-origin: center center; } .gkm-lb-cap { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: rgba(255,255,255,0.92); } .gkm-lb-x { position: fixed; top: 22px; right: 22px; width: 46px; height: 46px; border: none; border-radius: 50%; background: rgba(255,255,255,0.16); color: #fff; font-size: 20px; cursor: pointer; z-index: 1101; } /* ============================================================ HUB ============================================================ */ .gkm-hub { padding: clamp(40px, 5vw, 72px) var(--gkm-pad); } .gkm-hub-filters { display: flex; flex-wrap: wrap; gap: 18px 28px; padding: 22px 0; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); margin-bottom: 18px; } .gkm-filter { display: flex; flex-direction: column; gap: 8px; } .gkm-filter > label { font-family: var(--font-display); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gk-grey-4); } .gkm-chips { display: flex; flex-wrap: wrap; gap: 7px; } .gkm-chip { font-family: var(--font-body); font-weight: 600; font-size: 13.5px; padding: 8px 14px; border-radius: var(--radius-pill); border: 1.5px solid var(--gk-grey-6); background: var(--gk-white); color: var(--gk-black-2); cursor: pointer; transition: all 140ms ease; } .gkm-chip:hover { border-color: var(--gk-grey-4); } .gkm-chip.is-active { background: var(--gk-black-1); border-color: var(--gk-black-1); color: #fff; } .gkm-select { font-family: var(--font-body); font-size: 14px; padding: 9px 13px; border-radius: var(--radius-sm); border: 1.5px solid var(--gk-grey-6); background: var(--gk-white); color: var(--gk-black-1); } .gkm-hub-meta { display: flex; align-items: center; gap: 14px; font-weight: 600; font-size: 14px; color: var(--gk-grey-4); margin-bottom: 22px; } .gkm-hub-meta [data-gkm-count] { font-family: var(--font-display); font-weight: 800; color: var(--gk-black-1); } .gkm-reset { background: none; border: none; color: var(--gk-black-1); font-weight: 700; font-size: 13.5px; cursor: pointer; text-decoration: underline; text-decoration-color: var(--gk-yellow); text-decoration-thickness: 2px; } .gkm-hub-grid { display: grid; grid-template-columns: 1fr; gap: 18px; } .gkm-hcard { display: flex; flex-direction: column; background: var(--gk-white); border: 1px solid var(--gk-grey-6); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: inherit; transition: transform 160ms ease, box-shadow 160ms ease; } .gkm-hcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); } .gkm-hcard-img { position: relative; aspect-ratio: 4/3; background: var(--gk-off-white) center/cover no-repeat; } .gkm-hcard-badge { position: absolute; top: 12px; left: 12px; font-family: var(--font-display); font-weight: 800; font-size: 12.5px; color: var(--gk-black-1); background: var(--gk-yellow); padding: 5px 11px; border-radius: var(--radius-pill); } .gkm-hcard-badge--lvl { left: auto; right: 12px; background: var(--gk-black-1); color: #fff; } .gkm-hcard-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 5px; } .gkm-hcard-form { font-weight: 600; font-size: 13px; color: var(--gk-grey-4); } .gkm-hcard-title { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--gk-black-1); } .gkm-hcard-price { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--gk-black-1); margin-top: 2px; } .gkm-hcard-price small { font-weight: 600; font-size: 11px; color: var(--gk-grey-4); } .gkm-hcard.is-hidden { display: none; } .gkm-hub-empty { padding: 40px 0; text-align: center; color: var(--gk-grey-4); } /* ============================================================ RESPONSIVE ============================================================ */ @media (min-width: 600px) { .gkm-bento { grid-template-columns: repeat(4, 1fr); } .gkm-hub-grid { grid-template-columns: repeat(2, 1fr); } .gkm-cards { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 880px) { .gkm-stats { grid-template-columns: repeat(6, 1fr); } .gkm-proof-grid { grid-template-columns: repeat(2, 1fr); } .gkm-2col { grid-template-columns: 1fr 1fr; } .gkm-cible .gkm-2col { grid-template-columns: 1.05fr 1fr; } .gkm-tech { grid-template-columns: 1fr 1fr; } .gkm-tl-grid { grid-template-columns: repeat(5, 1fr); } .gkm-tl-item { flex-direction: column; align-items: center; text-align: center; gap: 18px; } .gkm-tl-item span:last-child { max-width: 190px; } .gkm-cards--4 { grid-template-columns: repeat(3, 1fr); } .gkm-plan-grid.is-two { grid-template-columns: repeat(2, 1fr); } .gkm-faq-wrap { grid-template-columns: 0.85fr 1.4fr; } .gkm-faq-aside { position: sticky; top: calc(var(--gkm-header-h) + 12px); } .gkm-proof-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 880px) { .gkm-subnav-anchors, .gkm-subnav-sep { display: none; } .gkm-tl-line { display: none; } } @media (min-width: 1100px) { .gkm-cards { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .gkm-hero-cta { flex-direction: column; align-items: stretch; } .gkm-hero-btns { width: 100%; flex-direction: column; } .gkm-hero-btns .gkm-btn { width: 100%; } .gkm-proof-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin: 0 calc(-1 * var(--gkm-pad)); padding: 0 var(--gkm-pad) 10px; } .gkm-testi { scroll-snap-align: start; flex: 0 0 84%; } .gkm-modal-box { max-width: none; height: 100dvh; max-height: none; border-radius: 0; } } @media (max-width: 560px) { .gkm-bento { grid-template-columns: 1fr; grid-auto-rows: 220px; } .gkm-bento-tile.t-big, .gkm-bento-tile.t-wide, .gkm-bento-tile.t-small { grid-column: span 1; grid-row: span 1; } .gkm-bento-cap { padding: 30px 16px 14px; } .gkm-bento-cap span { font-size: 15px; line-height: 1.25; } } /* ============================================================ Défense contre les styles globaux du thème (boutons rose, bordures/outlines sur