/** * FKP Services Hub — CSS principal * * Les variables CSS sont injectées en inline via fkpsh_render_custom_styles() * dans le de chaque page FKP. Ce fichier définit la structure visuelle. */ /* ══════════════════════════════════════════════════════════════ * RESET LÉGER ET NORMALISATION * ══════════════════════════════════════════════════════════════ */ body.fkp-services-active { font-family: var(--fkpsh-body-font); font-size: var(--fkpsh-body-size); color: var(--fkpsh-text); line-height: 1.65; } body.fkp-services-active .fkpsh-page * { box-sizing: border-box; } body.fkp-services-active .fkpsh-page h1, body.fkp-services-active .fkpsh-page h2, body.fkp-services-active .fkpsh-page h3 { font-family: var(--fkpsh-title-font); margin: 0 0 0.6em; font-weight: 600; line-height: 1.2; } body.fkp-services-active .fkpsh-page h1, body.fkp-services-active .fkpsh-h1 { color: var(--fkpsh-h1-color); } body.fkp-services-active .fkpsh-page h2, body.fkp-services-active .fkpsh-h2 { color: var(--fkpsh-h2-color); } body.fkp-services-active .fkpsh-page h3, body.fkp-services-active .fkpsh-h3 { color: var(--fkpsh-h3-color); } body.fkp-services-active .fkpsh-h1 { font-size: var(--fkpsh-h1-size); line-height: 1.1; } body.fkp-services-active .fkpsh-h2 { font-size: var(--fkpsh-h2-size); line-height: 1.2; } body.fkp-services-active .fkpsh-h3 { font-size: var(--fkpsh-h3-size); line-height: 1.3; } body.fkp-services-active .fkpsh-page p { margin: 0 0 1em; color: var(--fkpsh-text-soft); } body.fkp-services-active .fkpsh-entry-content a { color: var(--fkpsh-link); text-decoration: underline; } /* Eyebrow */ body.fkp-services-active .fkpsh-eyebrow { font-family: var(--fkpsh-eyebrow-font); font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--fkpsh-eyebrow); margin: 0 0 16px; font-weight: 500; } /* Accent italique teal */ body.fkp-services-active .fkpsh-accent { color: var(--fkpsh-title-accent); font-style: italic; } /* ══════════════════════════════════════════════════════════════ * CONTENEURS * ══════════════════════════════════════════════════════════════ */ body.fkp-services-active .fkpsh-container { max-width: 1240px; margin: 0 auto; padding: 0 32px; } body.fkp-services-active .fkpsh-container-narrow { max-width: 820px; margin: 0 auto; padding: 0 32px; text-align: center; } /* ══════════════════════════════════════════════════════════════ * HERO * ══════════════════════════════════════════════════════════════ */ body.fkp-services-active .fkpsh-hero { background: var(--fkpsh-hero-bg); color: var(--fkpsh-hero-text); padding: 120px 0 100px; position: relative; overflow: hidden; } body.fkp-services-active .fkpsh-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--fkpsh-teal) 0%, var(--fkpsh-blue) 50%, var(--fkpsh-violet) 100%); z-index: 3; } /* ─── Média hero (image ou vidéo en fond) ─────────────────── */ body.fkp-services-active .fkpsh-hero-media { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; overflow: hidden; pointer-events: none; } body.fkp-services-active .fkpsh-hero-media img, body.fkp-services-active .fkpsh-hero-media video { width: 100%; height: 100%; display: block; transform-origin: center center; } body.fkp-services-active .fkpsh-hero-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none; background: var(--fkpsh-hero-bg); } body.fkp-services-active .fkpsh-hero-inner { position: relative; z-index: 2; } body.fkp-services-active .fkpsh-hero .fkpsh-h1 { color: var(--fkpsh-hero-text); max-width: 900px; margin-bottom: 24px; } body.fkp-services-active .fkpsh-hero .fkpsh-lead { font-size: 20px; line-height: 1.5; color: var(--fkpsh-hero-text); opacity: 0.9; max-width: 780px; font-style: italic; margin-bottom: 24px; } body.fkp-services-active .fkpsh-hero .fkpsh-para { font-size: 16px; line-height: 1.7; color: var(--fkpsh-hero-text); opacity: 0.85; max-width: 780px; text-align: justify; margin-bottom: 36px; } body.fkp-services-active .fkpsh-hero .fkpsh-eyebrow { color: var(--fkpsh-teal); } /* ══════════════════════════════════════════════════════════════ * BOUTONS * ══════════════════════════════════════════════════════════════ */ body.fkp-services-active .fkpsh-btns { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 24px; } body.fkp-services-active .fkpsh-btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; border-radius: 0; font-family: var(--fkpsh-eyebrow-font); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; text-decoration: none; border: 2px solid transparent; transition: transform 0.2s, background 0.2s, border-color 0.2s; cursor: pointer; } body.fkp-services-active .fkpsh-btn-primary { background: var(--fkpsh-btn-bg); color: var(--fkpsh-btn-text); } body.fkp-services-active .fkpsh-btn-primary:hover { background: var(--fkpsh-btn-hover-bg); color: var(--fkpsh-btn-hover-text); } body.fkp-services-active .fkpsh-btn-outline { background: transparent; color: var(--fkpsh-btn-outline-color); border-color: var(--fkpsh-btn-outline-border); } body.fkp-services-active .fkpsh-btn-outline:hover { background: var(--fkpsh-btn-outline-color); color: var(--fkpsh-hero-bg); } body.fkp-services-active .fkpsh-btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); } body.fkp-services-active .fkpsh-btn-outline-light:hover { background: rgba(255,255,255,0.1); border-color: #fff; } /* ══════════════════════════════════════════════════════════════ * SECTIONS GÉNÉRIQUES * ══════════════════════════════════════════════════════════════ */ body.fkp-services-active .fkpsh-section { padding: 100px 0; background: var(--fkpsh-section-bg); } body.fkp-services-active .fkpsh-section-alt { background: var(--fkpsh-section-alt); } body.fkp-services-active .fkpsh-sec-head { max-width: 820px; margin: 0 auto 56px; text-align: center; } body.fkp-services-active .fkpsh-sec-head .fkpsh-h2 { margin-bottom: 20px; } body.fkp-services-active .fkpsh-sec-intro { font-size: 18px; line-height: 1.6; color: var(--fkpsh-text-soft); } /* ══════════════════════════════════════════════════════════════ * PRÉOCCUPATIONS (accueil) * ══════════════════════════════════════════════════════════════ */ body.fkp-services-active .fkpsh-preocs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; max-width: 1000px; margin: 0 auto; } body.fkp-services-active .fkpsh-preoc { background: var(--fkpsh-card-bg); padding: 32px; border-left: 3px solid var(--fkpsh-teal); display: flex; gap: 20px; align-items: flex-start; } body.fkp-services-active .fkpsh-preoc-num { font-family: var(--fkpsh-title-font); font-size: 36px; color: var(--fkpsh-teal); line-height: 1; font-weight: 500; flex-shrink: 0; } body.fkp-services-active .fkpsh-preoc p { margin: 0; color: var(--fkpsh-text); line-height: 1.6; } /* ══════════════════════════════════════════════════════════════ * GRILLE AUDIENCES (accueil) * ══════════════════════════════════════════════════════════════ */ body.fkp-services-active .fkpsh-aud-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } body.fkp-services-active .fkpsh-aud-card { background: var(--fkpsh-card-bg); padding: 32px 28px; border: 1px solid var(--fkpsh-card-border); transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; display: flex; flex-direction: column; text-decoration: none; color: var(--fkpsh-text); } body.fkp-services-active .fkpsh-aud-card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0,0,0,0.08); border-color: var(--fkpsh-teal); } body.fkp-services-active .fkpsh-aud-card h3 { font-size: 20px; margin-bottom: 12px; } body.fkp-services-active .fkpsh-aud-card p { font-size: 14px; line-height: 1.55; color: var(--fkpsh-text-soft); margin-bottom: 20px; flex-grow: 1; } body.fkp-services-active .fkpsh-card-arrow { font-family: var(--fkpsh-eyebrow-font); font-size: 12px; color: var(--fkpsh-teal); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; } /* ══════════════════════════════════════════════════════════════ * ÉDITORIAL (accueil) * ══════════════════════════════════════════════════════════════ */ body.fkp-services-active .fkpsh-edito-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; max-width: 1000px; margin: 0 auto; } body.fkp-services-active .fkpsh-edito-card { background: var(--fkpsh-card-bg); padding: 40px 36px; border: 1px solid var(--fkpsh-card-border); text-decoration: none; color: var(--fkpsh-text); transition: transform 0.2s, border-color 0.2s; } body.fkp-services-active .fkpsh-edito-card:hover { transform: translateY(-4px); border-color: var(--fkpsh-blue); } body.fkp-services-active .fkpsh-edito-card h3 { font-size: 24px; color: var(--fkpsh-text); margin-bottom: 14px; } body.fkp-services-active .fkpsh-edito-card p { margin-bottom: 20px; line-height: 1.6; } body.fkp-services-active .fkpsh-refs-intro { text-align: center; font-size: 17px; line-height: 1.65; color: var(--fkpsh-text-soft); max-width: 900px; margin: 0 auto; } /* ══════════════════════════════════════════════════════════════ * ENJEUX (service) * ══════════════════════════════════════════════════════════════ */ body.fkp-services-active .fkpsh-enjeux { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } body.fkp-services-active .fkpsh-enjeu { background: var(--fkpsh-card-bg); padding: 36px; border-top: 4px solid var(--fkpsh-teal); } body.fkp-services-active .fkpsh-enjeu.fkpsh-accent-blue { border-top-color: var(--fkpsh-blue); } body.fkp-services-active .fkpsh-enjeu.fkpsh-accent-violet { border-top-color: var(--fkpsh-violet); } body.fkp-services-active .fkpsh-enjeu h3 { font-size: 22px; margin-bottom: 20px; } body.fkp-services-active .fkpsh-enjeu ul { list-style: none; padding: 0; margin: 0; } body.fkp-services-active .fkpsh-enjeu li { padding: 10px 0 10px 20px; color: var(--fkpsh-text-soft); position: relative; border-bottom: 1px solid var(--fkpsh-card-border); line-height: 1.5; } body.fkp-services-active .fkpsh-enjeu li:last-child { border-bottom: none; } body.fkp-services-active .fkpsh-enjeu li::before { content: '→'; position: absolute; left: 0; color: var(--fkpsh-teal); font-weight: 600; } /* ══════════════════════════════════════════════════════════════ * SERVICES (service) * ══════════════════════════════════════════════════════════════ */ body.fkp-services-active .fkpsh-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } body.fkp-services-active .fkpsh-services:has(.fkpsh-service-item:nth-child(4)) { grid-template-columns: repeat(4, 1fr); } body.fkp-services-active .fkpsh-service-item { padding: 32px 0; border-top: 1px solid var(--fkpsh-card-border); } body.fkp-services-active .fkpsh-service-num { display: inline-block; font-family: var(--fkpsh-title-font); font-size: 42px; color: var(--fkpsh-teal); line-height: 1; font-weight: 500; margin-bottom: 16px; font-style: italic; } body.fkp-services-active .fkpsh-service-item h3 { font-size: 20px; margin-bottom: 14px; } body.fkp-services-active .fkpsh-service-item p { font-size: 15px; line-height: 1.6; } /* ══════════════════════════════════════════════════════════════ * CAS * ══════════════════════════════════════════════════════════════ */ body.fkp-services-active .fkpsh-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } body.fkp-services-active .fkpsh-case { background: var(--fkpsh-card-bg); padding: 36px 32px; border: 1px solid var(--fkpsh-card-border); } body.fkp-services-active .fkpsh-case-tag { display: inline-block; font-family: var(--fkpsh-eyebrow-font); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fkpsh-tag-text); background: var(--fkpsh-tag-bg); padding: 5px 10px; margin-bottom: 16px; font-weight: 500; } body.fkp-services-active .fkpsh-case h3 { font-size: 19px; margin-bottom: 14px; } body.fkp-services-active .fkpsh-case p { font-size: 15px; line-height: 1.6; } /* ══════════════════════════════════════════════════════════════ * ZONE CONTENU LIBRE (the_content) * ══════════════════════════════════════════════════════════════ */ body.fkp-services-active .fkpsh-section-content { padding: 80px 0; } body.fkp-services-active .fkpsh-entry-content { max-width: 820px; margin: 0 auto; font-size: 17px; line-height: 1.75; } body.fkp-services-active .fkpsh-entry-content h2 { font-size: 32px; margin-top: 1.5em; margin-bottom: 0.7em; } body.fkp-services-active .fkpsh-entry-content h3 { font-size: 22px; margin-top: 1.4em; margin-bottom: 0.6em; } body.fkp-services-active .fkpsh-entry-content p { margin-bottom: 1.2em; } /* ══════════════════════════════════════════════════════════════ * CTA FINAL * ══════════════════════════════════════════════════════════════ */ body.fkp-services-active .fkpsh-cta { background: var(--fkpsh-cta-bg); color: var(--fkpsh-cta-text); padding: 100px 0; position: relative; overflow: hidden; } body.fkp-services-active .fkpsh-cta::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--fkpsh-teal) 0%, var(--fkpsh-blue) 50%, var(--fkpsh-violet) 100%); } body.fkp-services-active .fkpsh-cta .fkpsh-h2 { color: var(--fkpsh-cta-text); margin-bottom: 20px; } body.fkp-services-active .fkpsh-cta p { color: var(--fkpsh-cta-text); opacity: 0.85; font-size: 17px; line-height: 1.6; margin-bottom: 36px; } body.fkp-services-active .fkpsh-trust { font-style: italic; font-size: 15px !important; max-width: 720px; margin: 0 auto 40px !important; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.15); opacity: 0.75 !important; } body.fkp-services-active .fkpsh-cta .fkpsh-btns { justify-content: center; } /* ══════════════════════════════════════════════════════════════ * RESPONSIVE * ══════════════════════════════════════════════════════════════ */ @media (max-width: 992px) { body.fkp-services-active .fkpsh-aud-grid { grid-template-columns: repeat(2, 1fr); } body.fkp-services-active .fkpsh-services, body.fkp-services-active .fkpsh-cases { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { body.fkp-services-active .fkpsh-hero { padding: 80px 0 70px; } body.fkp-services-active .fkpsh-section, body.fkp-services-active .fkpsh-cta { padding: 70px 0; } body.fkp-services-active .fkpsh-h1 { font-size: calc(var(--fkpsh-h1-size) * 0.65); } body.fkp-services-active .fkpsh-h2 { font-size: calc(var(--fkpsh-h2-size) * 0.75); } body.fkp-services-active .fkpsh-preocs, body.fkp-services-active .fkpsh-aud-grid, body.fkp-services-active .fkpsh-edito-grid, body.fkp-services-active .fkpsh-enjeux, body.fkp-services-active .fkpsh-services, body.fkp-services-active .fkpsh-cases { grid-template-columns: 1fr; } }