/*
Theme Name: CP Fibratek
Theme URI: https://cpfibratek.ch/
Description: Thème enfant Hello Elementor pour CP Fibratek.
Author: CP Fibratek
Template: hello-elementor
Version: 1.0.0
Text Domain: cpfibratek
*/

:root { --cpf-navy:#071a2f; --cpf-navy-2:#0d2946; --cpf-ink:#10243a; --cpf-cyan:#19cbe1; --cpf-aqua:#75f0d0; --cpf-snow:#f4f8fb; --cpf-line:#d8e4ec; --cpf-muted:#557086; --cpf-white:#fff; --cpf-radius:18px; --cpf-shadow:0 18px 50px rgba(7,26,47,.13); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--cpf-ink); background:var(--cpf-white); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.6; }
a { color:inherit; text-decoration:none; }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:3px solid var(--cpf-cyan); outline-offset:3px; }
.cpf-container { width:min(1180px,calc(100% - 40px)); margin-inline:auto; }
.cpf-skip-link { position:absolute; left:-9999px; top:0; z-index:100; background:var(--cpf-white); padding:.8rem 1rem; } .cpf-skip-link:focus { left:1rem; top:1rem; }
.cpf-site-header { position:sticky; top:0; z-index:50; background:rgba(7,26,47,.96); color:var(--cpf-white); border-bottom:1px solid rgba(255,255,255,.1); backdrop-filter:blur(12px); }
.cpf-header-inner { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.cpf-brand { display:flex; align-items:center; flex:0 0 auto; } .cpf-brand-logo { display:block; width:min(235px,22vw); height:auto; max-height:46px; object-fit:contain; }
.cpf-primary-menu { display:flex; align-items:center; gap:1.15rem; list-style:none; padding:0; margin:0; font-size:.86rem; font-weight:650; } .cpf-primary-menu a { color:#dce9f2; } .cpf-primary-menu a:hover,.cpf-primary-menu .current-menu-item>a { color:var(--cpf-aqua); }
.cpf-header-actions { display:flex; align-items:center; gap:.8rem; } .cpf-language { border:1px solid rgba(255,255,255,.25); color:#dce9f2; border-radius:999px; padding:.34rem .65rem; font-size:.75rem; font-weight:700; }
.cpf-menu-toggle { display:none; border:0; background:transparent; color:var(--cpf-white); font:inherit; font-weight:700; }
.cpf-button { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:.72rem 1.1rem; border-radius:999px; background:var(--cpf-cyan); color:var(--cpf-navy); font-weight:800; font-size:.9rem; border:1px solid var(--cpf-cyan); transition:transform .2s,background .2s; } .cpf-button:hover { transform:translateY(-2px); background:var(--cpf-aqua); } .cpf-button--ghost { background:transparent; color:var(--cpf-white); border-color:rgba(255,255,255,.45); } .cpf-button--ghost:hover { background:var(--cpf-white); color:var(--cpf-navy); }
.cpf-hero { min-height:min(740px,calc(100vh - 76px)); color:var(--cpf-white); display:flex; align-items:center; position:relative; overflow:hidden; background:var(--cpf-navy); isolation:isolate; } .cpf-hero::before { content:""; position:absolute; inset:0; z-index:-3; background:linear-gradient(90deg,rgba(4,18,34,.95) 0%,rgba(4,18,34,.82) 42%,rgba(4,18,34,.25) 100%),url('assets/images/fibre-hero-placeholder.png') center/cover; } .cpf-hero::after { content:""; position:absolute; right:-10%; bottom:-35%; z-index:-2; width:72%; height:90%; background:radial-gradient(ellipse at 55% 65%,rgba(20,210,236,.18),transparent 58%); filter:blur(8px); }
.cpf-fibre-flow { position:absolute; z-index:-1; left:-22%; bottom:-7%; width:84%; height:104%; overflow:visible; opacity:1; pointer-events:none; mix-blend-mode:screen; transform:scaleX(-1); transform-origin:center; } .cpf-fibre-lines path { stroke-width:3.6; opacity:.88; filter:drop-shadow(0 0 4px rgba(42,223,255,.98)); } .cpf-fibre-lines path:nth-child(3n) { stroke-width:5.2; opacity:.72; } .cpf-fibre-nodes circle { filter:drop-shadow(0 0 10px #58edff); }
.cpf-hero-content { position:relative; z-index:1; width:min(1180px,calc(100% - 40px)); max-width:none; padding:7.5rem 0; } .cpf-eyebrow { margin:0 0 1rem; color:var(--cpf-aqua); font-size:.78rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; } h1,h2,h3 { color:inherit; line-height:1.08; letter-spacing:-.035em; } .cpf-hero h1 { margin:0; font-size:clamp(2.8rem,6vw,5.6rem); max-width:14ch; } .cpf-hero-lead { max-width:56ch; margin:1.6rem 0 2rem; color:#d8e7f0; font-size:1.12rem; } .cpf-hero-actions { display:flex; flex-wrap:wrap; gap:.8rem; }
.cpf-trust-bar { background:var(--cpf-navy-2); color:#dce9f2; } .cpf-trust-grid { display:grid; grid-template-columns:repeat(3,1fr); padding:1.25rem 0; gap:1rem; } .cpf-trust-grid div { border-left:1px solid rgba(117,240,208,.4); padding-left:1rem; font-size:.88rem; } .cpf-trust-grid strong { display:block; color:var(--cpf-aqua); font-size:.77rem; letter-spacing:.09em; text-transform:uppercase; }
.cpf-section { padding:clamp(4rem,8vw,7rem) 0; } .cpf-section--soft { background:var(--cpf-snow); } .cpf-section--dark { background:var(--cpf-navy); color:var(--cpf-white); } .cpf-section-heading { max-width:700px; margin-bottom:2.5rem; } .cpf-section-heading h2 { margin:.35rem 0 .9rem; font-size:clamp(2rem,4vw,3.5rem); } .cpf-section-heading p { margin:0; color:var(--cpf-muted); } .cpf-section--dark .cpf-section-heading p { color:#b8cfdf; }
.cpf-grid { display:grid; gap:1.2rem; } .cpf-grid--services { grid-template-columns:repeat(4,1fr); } .cpf-grid--two { grid-template-columns:repeat(2,1fr); } .cpf-card { padding:1.6rem; background:var(--cpf-white); border:1px solid var(--cpf-line); border-radius:var(--cpf-radius); box-shadow:0 2px 0 rgba(7,26,47,.02); } .cpf-card:hover { box-shadow:var(--cpf-shadow); transform:translateY(-3px); transition:transform .2s,box-shadow .2s; } .cpf-card-number { color:var(--cpf-cyan); font-weight:800; font-size:.8rem; letter-spacing:.1em; } .cpf-card h3 { margin:.75rem 0 .6rem; font-size:1.25rem; color:var(--cpf-navy); } .cpf-card p { color:var(--cpf-muted); margin:0 0 1rem; font-size:.94rem; } .cpf-link { color:#087f96; font-weight:800; font-size:.9rem; } .cpf-link::after { content:' →'; }
.cpf-process { counter-reset:step; display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.cpf-process article { position:relative; min-height:178px; padding:1.45rem 1.5rem 1.55rem; background:rgba(255,255,255,.72); border:1px solid #d2e1e8; border-radius:14px; box-shadow:0 8px 22px rgba(7,26,47,.055); transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; }
.cpf-process article::before { counter-increment:step; content:'0' counter(step); display:inline-flex; align-items:center; justify-content:center; min-width:2.75rem; height:1.65rem; padding:0 .55rem; border-radius:999px; background:#d8f8ef; color:#086b62; font-size:.76rem; font-weight:850; letter-spacing:.12em; }
.cpf-process h3 { margin:.9rem 0 .45rem; color:var(--cpf-navy); font-size:1.24rem; }
.cpf-process p { color:#36566e; margin:0; font-size:.96rem; line-height:1.62; }
.cpf-process article:hover { transform:translateY(-4px); border-color:#8edbcb; box-shadow:0 16px 32px rgba(7,26,47,.11); }
.cpf-sector { padding:1.2rem 0; border-bottom:1px solid var(--cpf-line); display:grid; grid-template-columns:190px 1fr; gap:1rem; } .cpf-sector strong { color:var(--cpf-navy); } .cpf-sector p { color:var(--cpf-muted); margin:0; }
.cpf-cta-panel { border-radius:var(--cpf-radius); padding:clamp(2rem,5vw,4rem); background:linear-gradient(130deg,#0d2946,#102f51); color:var(--cpf-white); box-shadow:var(--cpf-shadow); display:flex; align-items:end; justify-content:space-between; gap:1.5rem; } .cpf-cta-panel h2 { margin:0; font-size:clamp(2rem,4vw,3.25rem); max-width:15ch; } .cpf-cta-panel p { color:#bfdae4; max-width:47ch; }
.cpf-page-hero { background:linear-gradient(115deg,var(--cpf-navy),var(--cpf-navy-2)); color:var(--cpf-white); padding:5rem 0 4rem; } .cpf-page-hero h1 { margin:.3rem 0; max-width:18ch; font-size:clamp(2.6rem,5vw,4.5rem); }
.cpf-breadcrumb { display:flex; align-items:center; gap:.55rem; max-width:100%; margin:0 0 1.45rem; color:#b9cfde; font-size:.86rem; } .cpf-breadcrumb a { color:var(--cpf-aqua); font-weight:750; } .cpf-breadcrumb a:hover { color:var(--cpf-white); } .cpf-breadcrumb span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cpf-page-content { max-width:860px; padding:4.5rem 0 6rem; }
.cpf-page-content--wide { max-width:1180px; }
.cpf-page-content > p:first-of-type { max-width:700px; margin-top:0; color:#294a63; font-size:clamp(1.12rem,1.55vw,1.3rem); line-height:1.65; }
.cpf-page-content h2 { position:relative; margin:3.35rem 0 1rem; padding-top:1.2rem; color:var(--cpf-navy); font-size:clamp(1.75rem,3vw,2.35rem); line-height:1.16; letter-spacing:-.03em; }
.cpf-page-content h2::before { content:''; position:absolute; top:0; left:0; width:3.25rem; height:3px; border-radius:999px; background:var(--cpf-cyan); }
.cpf-page-content h3 { margin:2.1rem 0 .65rem; color:#123956; font-size:clamp(1.2rem,2vw,1.45rem); line-height:1.25; letter-spacing:-.02em; }
.cpf-page-content h4,.cpf-page-content h5,.cpf-page-content h6 { margin:1.6rem 0 .5rem; color:var(--cpf-navy); font-size:1.05rem; line-height:1.35; }
.cpf-page-content p,.cpf-page-content li { color:#456278; } .cpf-page-content p { margin:0 0 1.2rem; }
.cpf-page-content ul,.cpf-page-content ol { margin:1.35rem 0 1.7rem; padding:1.25rem 1.4rem 1.25rem 2.8rem; border-left:3px solid #9be7d5; background:#f0f8fa; border-radius:0 12px 12px 0; } .cpf-page-content li + li { margin-top:.45rem; } .cpf-page-content strong { color:var(--cpf-navy); }
.cpf-page-content .cpf-content-cta { margin:1.8rem 0 2.6rem; } .cpf-page-content .cpf-content-callout { margin:3rem 0; padding:clamp(1.45rem,3vw,2rem); border:1px solid #b7dce2; border-radius:14px; background:linear-gradient(135deg,#ecf9fa,#f7fcfc); } .cpf-page-content .cpf-content-callout h2 { margin-top:0; padding-top:0; font-size:clamp(1.45rem,2.5vw,1.9rem); } .cpf-page-content .cpf-content-callout h2::before { display:none; } .cpf-page-content .cpf-content-callout p:last-child { margin-bottom:0; }
.cpf-form { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; } .cpf-form label { display:grid; gap:.4rem; color:var(--cpf-navy); font-size:.86rem; font-weight:750; } .cpf-form input,.cpf-form select,.cpf-form textarea { width:100%; border:1px solid #b9cad6; border-radius:8px; padding:.75rem .8rem; color:var(--cpf-ink); font:inherit; background:#fff; } .cpf-form textarea,.cpf-form .cpf-full { grid-column:1/-1; } .cpf-form label.cpf-consent { display:flex; align-items:flex-start; gap:.65rem; } .cpf-form label.cpf-consent input[type="checkbox"] { width:1rem; height:1rem; flex:0 0 1rem; margin:.06rem 0 0; padding:0; accent-color:var(--cpf-cyan); } .cpf-form small { color:var(--cpf-muted); font-weight:400; } .cpf-form-message { grid-column:1/-1; padding:.8rem 1rem; border-radius:8px; background:#e7f9f5; color:#075c55; }
.cpf-site-footer { background:#061421; color:#b9cfde; padding:3.5rem 0 1.5rem; } .cpf-footer-grid { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:2rem; } .cpf-footer-grid:has(.cpf-footer-social) { grid-template-columns:1.3fr 1fr 1fr 1fr; } .cpf-footer-title { color:var(--cpf-white); font-weight:800; margin:0 0 .7rem; } .cpf-footer-logo { display:block; width:min(168px,100%); margin:0 0 1rem; } .cpf-footer-logo img { display:block; width:100%; height:30px; object-fit:contain; object-position:left center; } .cpf-site-footer a:hover { color:var(--cpf-aqua); } .cpf-footer-contact { display:grid; gap:.55rem; } .cpf-footer-contact>a,.cpf-footer-contact>span { display:flex; align-items:center; gap:.55rem; } .cpf-footer-contact svg { width:1rem; height:1rem; flex:0 0 1rem; fill:none; stroke:var(--cpf-aqua); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .cpf-footer-bottom { border-top:1px solid rgba(255,255,255,.12); margin-top:2.5rem; padding-top:1.2rem; font-size:.8rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.cpf-portfolio-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; } .cpf-portfolio-card { overflow:hidden; border:1px solid var(--cpf-line); border-radius:8px; background:#fff; } .cpf-portfolio-card__image { display:block; height:220px; background:linear-gradient(135deg,var(--cpf-navy),#155779); } .cpf-portfolio-card__image img { display:block; width:100%; height:100%; object-fit:cover; } .cpf-portfolio-card__image--empty { min-height:190px; } .cpf-portfolio-card__body { padding:1.3rem; } .cpf-portfolio-card__body h2 { font-size:1.25rem; color:var(--cpf-navy); margin:.2rem 0 .6rem; }
.cpf-realisation__intro { max-width:720px; margin-bottom:2.4rem !important; color:#294a63 !important; font-size:clamp(1.12rem,1.55vw,1.3rem); line-height:1.65; }
.cpf-realisation__content { max-width:760px; }
.cpf-realisation__gallery { margin-top:3.5rem; }
.cpf-gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.cpf-gallery-grid__item { min-height:220px; padding:0; overflow:hidden; border:1px solid var(--cpf-line); border-radius:6px; background:#e8f1f5; cursor:zoom-in; }
.cpf-gallery-grid__item img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .25s ease; }
.cpf-gallery-grid__item:hover img { transform:scale(1.035); }
.cpf-lightbox[hidden] { display:none; }
.cpf-lightbox-open { overflow:hidden; }
.cpf-lightbox { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:2rem; }
.cpf-lightbox__backdrop { position:absolute; inset:0; border:0; background:rgba(3,12,23,.9); cursor:zoom-out; }
.cpf-lightbox__backdrop:hover,.cpf-lightbox__backdrop:focus { background:rgba(3,12,23,.9); }
.cpf-lightbox__dialog { position:relative; z-index:1; display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-rows:minmax(0,1fr) auto; align-items:center; width:min(1100px,100%); max-height:calc(100vh - 4rem); }
.cpf-lightbox__image { grid-column:2; grid-row:1; display:block; max-width:100%; max-height:calc(100vh - 8rem); margin:auto; object-fit:contain; box-shadow:0 16px 55px rgba(0,0,0,.4); }
.cpf-lightbox__close,.cpf-lightbox__previous,.cpf-lightbox__next { position:relative; z-index:2; border:0; color:#fff; background:rgba(7,26,47,.8); font:inherit; cursor:pointer; }
.cpf-lightbox__close { position:absolute; top:-.5rem; right:-.5rem; display:flex; align-items:center; justify-content:center; width:2.5rem; height:2.5rem; padding:0; border-radius:50%; font-size:2rem; line-height:1; }
.cpf-lightbox__close:focus { background:rgba(7,26,47,.8) !important; color:#fff; }
.cpf-lightbox__close:hover { background:#c36 !important; color:#fff; }
.cpf-lightbox__previous,.cpf-lightbox__next { display:flex; align-items:center; justify-content:center; width:2.8rem; height:3.5rem; margin:.6rem; padding:0; font-size:3rem; line-height:1; }
.cpf-lightbox__count { grid-column:1 / -1; margin:.85rem 0 0; color:#fff; text-align:center; font-size:.9rem; }
@media (max-width:900px) { .cpf-grid--services { grid-template-columns:repeat(2,1fr); } .cpf-process { grid-template-columns:repeat(2,1fr); } .cpf-portfolio-grid,.cpf-gallery-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:700px) { .cpf-header-inner { min-height:68px; } .cpf-brand-logo { width:185px; max-height:38px; } .cpf-menu-toggle { display:block; } .cpf-primary-menu { display:none; position:absolute; top:68px; left:0; right:0; background:var(--cpf-navy); padding:1.2rem 20px 1.5rem; flex-direction:column; align-items:flex-start; } .cpf-primary-menu.is-open { display:flex; } .cpf-header-actions .cpf-button { display:none; } .cpf-grid--services,.cpf-grid--two,.cpf-process,.cpf-portfolio-grid,.cpf-gallery-grid { grid-template-columns:1fr; } .cpf-gallery-grid__item { min-height:250px; } .cpf-trust-grid { grid-template-columns:1fr; } .cpf-sector { grid-template-columns:1fr; gap:.2rem; } .cpf-cta-panel { align-items:flex-start; flex-direction:column; } .cpf-footer-grid,.cpf-footer-grid:has(.cpf-footer-social) { grid-template-columns:1fr; } .cpf-form { grid-template-columns:1fr; } .cpf-form textarea,.cpf-form .cpf-full { grid-column:auto; } .cpf-hero-content { padding:6rem 0; } .cpf-fibre-flow { left:-45%; width:130%; opacity:.48; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; } .cpf-fibre-flow { display:none; } }