/* ========================================================= BARCLAYSE GROUP — Design tokens ========================================================= */ :root{ --navy-950:#060B18; --navy-900:#0A1428; --navy-800:#0F1E3D; --navy-700:#16295C; --blue-600:#1B4DB8; --blue-500:#2B63D9; --gold-300:#FFE18F; --gold-500:#F5B800; --gold-600:#C8930A; --gold-700:#9C6F06; --bg:#F7F9FC; --surface:#FFFFFF; --surface-alt:#F0F3F9; --ink-900:#0B1220; --ink-700:#33415C; --ink-500:#5C6B85; --ink-400:#8291A8; --border:#E3E8F0; --border-strong:#CBD5E1; --success:#16A34A; --radius-sm:10px; --radius-md:16px; --radius-lg:24px; --radius-full:999px; --shadow-sm:0 1px 2px rgba(10,20,40,.06), 0 1px 1px rgba(10,20,40,.04); --shadow-md:0 8px 24px rgba(10,20,40,.08); --shadow-lg:0 24px 48px -12px rgba(10,20,40,.18); --shadow-gold:0 12px 32px -8px rgba(245,184,0,.35); --container-w:1240px; --header-h:76px; --ease-out:cubic-bezier(.16,1,.3,1); --dur-fast:180ms; --dur-base:280ms; } /* Dark theme: applied automatically from the OS preference (prefers-color-scheme), or explicitly when the visitor picks a theme with the header toggle (persisted in localStorage as data-theme="dark"/"light" on ). */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#0A0F1C; --surface:#111B30; --surface-alt:#0D1626; --ink-900:#F3F6FB; --ink-700:#C7D0E0; --ink-500:#8D97B2; --ink-400:#6C7690; --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.18); --shadow-sm:0 1px 2px rgba(0,0,0,.35), 0 1px 1px rgba(0,0,0,.28); --shadow-md:0 8px 24px rgba(0,0,0,.4); --shadow-lg:0 24px 48px -12px rgba(0,0,0,.55); } } :root[data-theme="dark"]{ --bg:#0A0F1C; --surface:#111B30; --surface-alt:#0D1626; --ink-900:#F3F6FB; --ink-700:#C7D0E0; --ink-500:#8D97B2; --ink-400:#6C7690; --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.18); --shadow-sm:0 1px 2px rgba(0,0,0,.35), 0 1px 1px rgba(0,0,0,.28); --shadow-md:0 8px 24px rgba(0,0,0,.4); --shadow-lg:0 24px 48px -12px rgba(0,0,0,.55); } /* ========================================================= Reset ========================================================= */ *,*::before,*::after{box-sizing:border-box;} *{margin:0;} html{scroll-behavior:smooth;} html,body{height:100%;} body{ font-family:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size:16px; line-height:1.6; color:var(--ink-700); background:var(--bg); -webkit-font-smoothing:antialiased; overflow-x:hidden; transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } img,svg{display:block;max-width:100%;} a{color:inherit;text-decoration:none;} ul,ol{list-style:none;padding:0;} button,input,select,textarea{font:inherit;color:inherit;} button{cursor:pointer;background:none;border:none;} h1,h2,h3,h4{color:var(--ink-900);line-height:1.15;font-weight:800;letter-spacing:-0.02em;} :focus-visible{outline:3px solid var(--blue-500);outline-offset:2px;border-radius:4px;} @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;} } .skip-link{ position:fixed;top:-100px;left:12px;z-index:1000; background:var(--navy-900);color:#fff;padding:.8em 1.2em;border-radius:var(--radius-sm); transition:top var(--dur-base) var(--ease-out); } .skip-link:focus{top:12px;} .container{ width:100%;max-width:var(--container-w);margin-inline:auto;padding-inline:24px; } /* ========================================================= Utility: sections / headings ========================================================= */ .section{padding-block:112px;} .section-alt{background:var(--surface-alt);} .section-dark{background:linear-gradient(160deg,var(--navy-950),var(--navy-800));} .section-head{max-width:680px;margin-bottom:56px;} .section-head.center{margin-inline:auto;text-align:center;} .kicker{ font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--gold-600);margin-bottom:12px; } .kicker-light{color:var(--gold-500);} .section-title{font-size:clamp(28px,3.4vw,42px);margin-bottom:16px;} .text-light{color:#fff;} .section-lead{font-size:17px;color:var(--ink-500);max-width:60ch;} .text-gold{color:var(--gold-600);} .check-list{margin-top:24px;display:grid;gap:12px;} .check-list li{ position:relative;padding-left:30px;color:var(--ink-700);font-weight:500; } .check-list li::before{ content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%; background:var(--gold-500); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/70% no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/70% no-repeat; } /* ========================================================= Buttons ========================================================= */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:14px 24px;border-radius:var(--radius-full);font-weight:700;font-size:15px; transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); white-space:nowrap; } .btn:active{transform:translateY(1px);} .btn-primary{ position:relative;overflow:hidden; background:linear-gradient(135deg,var(--gold-500),var(--gold-600)); color:var(--navy-950);box-shadow:var(--shadow-gold); } .btn-primary::after{ content:"";position:absolute;top:0;left:-60%;width:40%;height:100%; background:linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent); transform:skewX(-20deg);transition:left .65s var(--ease-out); } .btn-primary:hover::after{left:130%;} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 36px -10px rgba(245,184,0,.45);} .btn-ghost{ background:rgba(255,255,255,.06);color:#fff;border:1.5px solid rgba(255,255,255,.35); backdrop-filter:blur(6px); } .btn-ghost:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.6);} .btn-lg{padding:16px 30px;font-size:16px;} .btn-sm{padding:10px 18px;font-size:13.5px;} .btn-block{width:100%;} /* ========================================================= Header ========================================================= */ .site-header{ position:fixed;top:0;left:0;right:0;z-index:100; height:var(--header-h);display:flex;align-items:center; background:rgba(6,11,24,0); transition:background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), height var(--dur-base) var(--ease-out); } .site-header.is-scrolled{ background:rgba(8,14,30,.82);backdrop-filter:blur(14px) saturate(140%); box-shadow:0 1px 0 rgba(255,255,255,.06), 0 12px 24px rgba(6,11,24,.25); height:68px; } /* Subpages (catalogue/produit/devis) have light content right under the header with no dark hero behind it — keep the header permanently opaque there so the white nav text stays readable even before the visitor scrolls. */ body.subpage .site-header{ background:rgba(8,14,30,.92);backdrop-filter:blur(14px) saturate(140%); box-shadow:0 1px 0 rgba(255,255,255,.06), 0 12px 24px rgba(6,11,24,.25); } .header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;} .brand{display:flex;align-items:center;gap:12px;flex-shrink:0;} .brand-mark{border-radius:8px;} .brand-word{display:flex;flex-direction:column;line-height:1.05;} .brand-word-top{font-weight:800;font-size:12.6px;letter-spacing:.03em;text-transform:uppercase;color:var(--blue-500);} .brand-word-bottom{font-weight:800;font-size:21px;letter-spacing:0;text-transform:uppercase;color:var(--blue-500);} .main-nav ul{display:flex;gap:30px;} .main-nav a{ font-size:14.5px;font-weight:600;color:rgba(255,255,255,.82);position:relative;padding:6px 0; transition:color var(--dur-fast); } .main-nav a::after{ content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--gold-500); transition:width var(--dur-base) var(--ease-out); } .main-nav a:hover,.main-nav a.is-active{color:#fff;} .main-nav a:hover::after,.main-nav a.is-active::after{width:100%;} .header-actions{display:flex;align-items:center;gap:16px;} .header-phone{ display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.85);font-weight:600;font-size:14px; } .header-phone:hover{color:var(--gold-500);} .theme-toggle{ display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%; color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18); transition:background var(--dur-fast), transform var(--dur-fast);flex-shrink:0; } .theme-toggle:hover{background:rgba(255,255,255,.18);transform:translateY(-1px);} .theme-toggle .icon-moon{display:none;} :root[data-theme="dark"] .theme-toggle .icon-sun{display:none;} :root[data-theme="dark"] .theme-toggle .icon-moon{display:block;} .nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;} .nav-toggle span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:transform var(--dur-base) var(--ease-out), opacity var(--dur-base);} .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);} .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;} .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} /* ========================================================= Hero ========================================================= */ .hero{ position:relative;min-height:100vh;display:flex;align-items:center; padding-top:var(--header-h);overflow:hidden; background:radial-gradient(ellipse 80% 60% at 50% -10%, var(--navy-700), var(--navy-950) 65%); } .hero-bg{position:absolute;inset:0;z-index:0;} .hero-grid{ position:absolute;inset:0; background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size:56px 56px; mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 40%, transparent 85%); } .hero-blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.4;} .hero-blob-gold{width:520px;height:520px;background:var(--gold-600);top:-140px;right:-120px;animation:float-a 16s ease-in-out infinite;} .hero-blob-blue{width:480px;height:480px;background:var(--blue-600);bottom:-180px;left:-140px;animation:float-b 18s ease-in-out infinite;} @keyframes float-a{0%,100%{transform:translate(0,0);}50%{transform:translate(-30px,40px);}} @keyframes float-b{0%,100%{transform:translate(0,0);}50%{transform:translate(30px,-30px);}} .hero-inner{ position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center; padding-block:64px 40px; } .eyebrow{ display:inline-flex;align-items:center;gap:9px;color:var(--gold-300);font-weight:600;font-size:13.5px; letter-spacing:.03em;margin-bottom:22px; } .eyebrow-dot{width:7px;height:7px;border-radius:50%;background:var(--gold-500);box-shadow:0 0 0 4px rgba(245,184,0,.2);} .hero-title{font-size:clamp(34px,4.6vw,58px);color:#fff;margin-bottom:22px;} .hero-lead{font-size:18px;color:rgba(226,232,245,.82);max-width:52ch;margin-bottom:34px;} .hero-cta{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:52px;} .hero-stats{display:flex;gap:36px;flex-wrap:wrap;} .hero-stats li{display:flex;flex-direction:column;} .stat-line{display:flex;align-items:baseline;gap:2px;} .stat-num,.stat-suffix{font-size:32px;font-weight:800;color:#fff;} .stat-suffix{color:var(--gold-500);} .stat-label{font-size:13px;color:rgba(226,232,245,.65);margin-top:2px;} .hero-visual{position:relative;} .hero-panel{ background:rgba(15,26,55,.55);border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-lg);padding:26px;backdrop-filter:blur(18px); box-shadow:var(--shadow-lg); } .hero-panel-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;} .hero-chip{ display:inline-flex;align-items:center;gap:8px;background:rgba(245,184,0,.12);color:var(--gold-300); font-size:12.5px;font-weight:700;padding:7px 12px;border-radius:var(--radius-full);border:1px solid rgba(245,184,0,.28); } .pulse-dot{width:9px;height:9px;border-radius:50%;background:#34D399;position:relative;} .pulse-dot::after{ content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid #34D399;opacity:.6; animation:pulse-ring 2s ease-out infinite; } @keyframes pulse-ring{0%{transform:scale(.6);opacity:.8;}100%{transform:scale(1.6);opacity:0;}} .hero-panel-graph{margin-bottom:18px;} .hero-panel-list{display:grid;gap:11px;} .hero-panel-item{display:flex;align-items:center;gap:10px;font-size:13.5px;color:rgba(226,232,245,.85);} .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;} .dot-ok{background:#34D399;} .hero-badge-float{ position:absolute;left:-22px;bottom:-22px;display:flex;align-items:center;gap:10px; background:#fff;border-radius:var(--radius-md);padding:14px 18px;box-shadow:var(--shadow-lg); animation:float-badge 5s ease-in-out infinite; } .hero-badge-float svg{flex-shrink:0;} .hero-badge-float div{display:flex;flex-direction:column;line-height:1.25;} .hero-badge-float strong{font-size:13px;color:var(--navy-900);} .hero-badge-float span{font-size:11.5px;color:var(--ink-500);} @keyframes float-badge{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}} .scroll-cue{ position:absolute;left:50%;bottom:28px;transform:translateX(-50%); color:rgba(255,255,255,.55);animation:bob 2.2s ease-in-out infinite; } @keyframes bob{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,8px);}} /* ========================================================= Marquee / proof ========================================================= */ .proof{background:var(--navy-900);padding-block:36px;overflow:hidden;} .proof-label{margin-bottom:18px;} .proof-label span{ font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(226,232,245,.5); } .marquee{position:relative;display:flex;} .marquee:focus-within .marquee-track, .marquee:hover .marquee-track{animation-play-state:paused;} .marquee-track{ display:flex;flex-shrink:0;gap:56px;padding-right:56px; animation:marquee-scroll 32s linear infinite; } @keyframes marquee-scroll{from{transform:translateX(0);}to{transform:translateX(-100%);}} .marquee-track span{ white-space:nowrap;font-weight:700;font-size:17px;color:rgba(226,232,245,.55);letter-spacing:.01em; } @media (prefers-reduced-motion: reduce){ .marquee{overflow-x:auto;} .marquee-track{animation:none;} } /* ========================================================= Split layout (about / contact) ========================================================= */ .split-layout{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;} .split-layout-contact{align-items:start;} .stat-card-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;} .stat-card{ background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg); padding:26px;box-shadow:var(--shadow-sm);transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base), border-color var(--dur-base); } .stat-card:hover{transform:translateY(-4px);box-shadow:0 14px 32px -10px rgba(27,77,184,.25);border-color:var(--blue-500);} .stat-card-accent{background:linear-gradient(150deg,var(--navy-900),var(--navy-800));border-color:var(--navy-800);} .stat-card-accent .stat-card-label{color:rgba(226,232,245,.7);} .stat-card-num,.stat-card-suffix{font-size:34px;font-weight:800;color:var(--ink-900);} .stat-card-accent .stat-card-num,.stat-card-accent .stat-card-suffix{color:#fff;} .stat-card-suffix{color:var(--gold-600);} .stat-card-label{display:block;margin-top:8px;font-size:13.5px;color:var(--ink-500);font-weight:600;} /* ========================================================= Feature / solution cards ========================================================= */ .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;} .feature-card{ background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg); padding:32px 28px;transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base), background var(--dur-base); } .feature-card:hover{transform:translateY(-6px);box-shadow:0 16px 36px -10px rgba(27,77,184,.28);border-color:var(--blue-500);} .feature-icon{ display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px; background:linear-gradient(150deg,var(--navy-800),var(--navy-900));color:var(--gold-500);margin-bottom:20px; transition:transform var(--dur-base) var(--ease-out); } .feature-card:hover .feature-icon{transform:rotate(-6deg) scale(1.08);} .feature-card h3{font-size:19px;margin-bottom:10px;} .feature-card p{color:var(--ink-500);font-size:15px;} .solution-card{ background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg); padding:30px 28px;transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base), border-color var(--dur-base); display:flex;flex-direction:column; } .solution-card:hover{transform:translateY(-6px);box-shadow:0 16px 36px -10px rgba(27,77,184,.28);border-color:var(--blue-500);} .solution-icon{ display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px; background:rgba(197,146,10,.12);color:var(--gold-600);margin-bottom:18px; transition:transform var(--dur-base) var(--ease-out), background var(--dur-base), color var(--dur-base); } .solution-card:hover .solution-icon{transform:rotate(6deg) scale(1.08);background:rgba(27,77,184,.14);color:var(--blue-600);} .solution-card h3{font-size:19px;margin-bottom:8px;} .solution-card p{color:var(--ink-500);font-size:14.5px;margin-bottom:16px;} .tag-list{display:grid;gap:8px;margin-bottom:20px;flex-grow:1;} .tag-list li{font-size:13.5px;color:var(--ink-700);font-weight:600;padding-left:18px;position:relative;} .tag-list li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--gold-500);} .card-link{ display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14px;color:var(--blue-600); transition:gap var(--dur-fast) var(--ease-out); } .card-link:hover{gap:10px;color:var(--ink-900);} /* ========================================================= Offer row ========================================================= */ .offer-row{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-bottom:56px;} .offer-item{ border-top:3px solid var(--gold-500);padding-top:20px; } .offer-num{font-size:13px;font-weight:800;color:var(--gold-600);letter-spacing:.08em;} .offer-item h3{font-size:17px;margin:10px 0 8px;} .offer-item p{font-size:13.5px;color:var(--ink-500);} .engagement-strip{ display:flex;flex-wrap:wrap;gap:20px 40px;justify-content:center;padding:24px; background:var(--surface-alt);border-radius:var(--radius-lg); } .engagement-strip div{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px;color:var(--ink-900);} .engagement-strip svg{color:var(--gold-600);flex-shrink:0;} /* ========================================================= Pricing (infogérance) ========================================================= */ .pricing-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;} .pricing-card{ position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg); padding:32px; } .pricing-card h3{font-size:20px;margin-bottom:6px;} .pricing-sub{font-size:13.5px;color:var(--ink-500);margin-bottom:22px;} .pricing-card-accent{background:linear-gradient(160deg,var(--navy-900),var(--navy-800));border-color:var(--navy-800);color:#fff;} .pricing-card-accent h3,.pricing-card-accent .pricing-sub{color:#fff;} .pricing-card-accent .pricing-sub{color:rgba(226,232,245,.65);} .pricing-badge{ position:absolute;top:-13px;right:24px;background:var(--gold-500);color:var(--navy-950); font-size:11.5px;font-weight:800;letter-spacing:.04em;padding:6px 14px;border-radius:var(--radius-full); box-shadow:var(--shadow-gold); } .price-table{width:100%;border-collapse:collapse;margin-bottom:8px;} .price-table th{ text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:700; color:var(--ink-400);padding-bottom:10px;border-bottom:1px solid var(--border); } .pricing-card-accent .price-table th{color:rgba(226,232,245,.5);border-color:rgba(255,255,255,.14);} .price-table td{ padding:11px 0;border-bottom:1px solid var(--border);font-size:14.5px;font-weight:600;color:var(--ink-700); } .pricing-card-accent .price-table td{color:rgba(226,232,245,.92);border-color:rgba(255,255,255,.1);} .price-table td:last-child{text-align:right;font-weight:800;color:var(--ink-900);} .pricing-card-accent .price-table td:last-child{color:var(--gold-500);} .pricing-card .btn{margin-top:20px;} .price-note{margin-top:22px;font-size:13px;color:var(--ink-400);} /* Web packs */ .web-card{ background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg); padding:30px 28px;position:relative;text-align:center;transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base), border-color var(--dur-base); } .web-card:hover{transform:translateY(-6px);box-shadow:0 16px 36px -10px rgba(27,77,184,.25);border-color:var(--blue-500);} .web-card-accent{border:2px solid var(--gold-500);} .web-card h3{font-size:18px;margin-bottom:12px;} .price-tag{font-size:26px;font-weight:800;color:var(--ink-900);margin-bottom:6px;} .price-tag-sm{font-size:15px;font-weight:700;color:var(--gold-600);} .web-card .pricing-sub{margin-bottom:20px;} .web-extra{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;} .web-extra-item{padding:24px;border-radius:var(--radius-md);background:var(--surface);border:1px solid var(--border);} .web-extra-item h4{font-size:16px;margin-bottom:8px;color:var(--ink-900);} .web-extra-item p{font-size:14px;color:var(--ink-500);} /* Audit grid */ .audit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;} .audit-item{ display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:var(--radius-md); background:var(--surface);border:1px solid var(--border);transition:box-shadow var(--dur-base), transform var(--dur-base) var(--ease-out), border-color var(--dur-base); } .audit-item:hover{transform:translateY(-4px);box-shadow:0 14px 32px -10px rgba(27,77,184,.22);border-color:var(--blue-500);} .audit-item h4{font-size:15.5px;color:var(--ink-900);} /* ========================================================= Certifications / badges ========================================================= */ .badge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:44px;} .cert-badge{ display:flex;align-items:center;gap:14px;padding:22px;border-radius:var(--radius-md); background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1); } .cert-badge span{display:flex;flex-direction:column;font-size:13px;color:rgba(226,232,245,.6);} .cert-badge strong{font-size:14.5px;color:#fff;font-weight:700;} .vendor-strip{ display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px; color:rgba(226,232,245,.55);font-weight:700;font-size:14.5px;letter-spacing:.02em; } .vendor-strip span:not([aria-hidden]){color:rgba(226,232,245,.85);} /* ========================================================= References ========================================================= */ .ref-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:14px; } .ref-grid li{ display:flex;align-items:center;justify-content:center;text-align:center; padding:26px 16px;border-radius:var(--radius-md);background:var(--surface);border:1px solid var(--border); font-weight:700;font-size:14.5px;color:var(--ink-700);min-height:88px; transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base), border-color var(--dur-base), color var(--dur-base); } .ref-grid li:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--gold-500);color:var(--ink-900);} /* ========================================================= Contact ========================================================= */ .contact-list{display:grid;gap:20px;margin:32px 0;} .contact-list li{display:flex;gap:14px;align-items:flex-start;} .contact-icon{ display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px; background:var(--surface-alt);color:var(--gold-600);flex-shrink:0; transition:transform var(--dur-base) var(--ease-out), background var(--dur-base), color var(--dur-base); } .contact-list li:hover .contact-icon{transform:scale(1.1) rotate(-4deg);background:rgba(27,77,184,.14);color:var(--blue-600);} .contact-list strong{display:block;font-size:13px;color:var(--ink-900);margin-bottom:2px;} .contact-list span,.contact-list a{font-size:14.5px;color:var(--ink-500);font-weight:500;} .contact-list a:hover{color:var(--blue-600);} .map-embed{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-sm);} .map-embed iframe{width:100%;height:260px;border:0;display:block;} .contact-form{ background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg); padding:36px;box-shadow:var(--shadow-md); } .contact-form h3{font-size:20px;margin-bottom:22px;} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;} .form-field{margin-bottom:18px;} .form-field label{display:block;font-size:13.5px;font-weight:700;color:var(--ink-900);margin-bottom:7px;} .form-field label span{color:var(--gold-600);} .form-field input,.form-field select,.form-field textarea{ width:100%;padding:12px 14px;border-radius:var(--radius-sm);border:1.5px solid var(--border); background:var(--surface);color:var(--ink-700);font-size:14.5px;transition:border-color var(--dur-fast), box-shadow var(--dur-fast); } .form-field input:focus,.form-field select:focus,.form-field textarea:focus{ border-color:var(--blue-500);box-shadow:0 0 0 4px rgba(43,99,217,.12);outline:none; } .form-field textarea{resize:vertical;min-height:110px;} .contact-form .btn{margin-top:6px;position:relative;} .btn-spinner{display:none;animation:spin 0.8s linear infinite;} .contact-form.is-loading .btn-spinner{display:block;} .contact-form.is-loading .btn-label{opacity:.7;} @keyframes spin{to{transform:rotate(360deg);}} .form-status{margin-top:14px;font-size:14px;font-weight:600;min-height:20px;} .form-status.is-success{color:var(--success);} .form-status.is-error{color:#DC2626;} /* ========================================================= Footer ========================================================= */ .site-footer{background:var(--surface);border-top:1px solid var(--border);transition:background var(--dur-base);} .footer-inner{ display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-block:64px; } .footer-brand p{margin-top:16px;font-size:14px;color:var(--ink-500);max-width:32ch;} .footer-links,.footer-contact,.footer-legal{display:flex;flex-direction:column;gap:12px;} .footer-links h4,.footer-contact h4,.footer-legal h4{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-900);margin-bottom:4px;} .footer-links a,.footer-contact p,.footer-contact a,.footer-legal p{font-size:14px;color:var(--ink-500);} .footer-links a:hover,.footer-contact a:hover{color:var(--blue-600);} .footer-bottom{border-top:1px solid var(--border);} .footer-bottom-inner{display:flex;justify-content:space-between;padding-block:20px;font-size:13px;color:var(--ink-400);} /* ========================================================= Floating WhatsApp ========================================================= */ .fab-whatsapp{ position:fixed;right:22px;bottom:22px;z-index:90;width:56px;height:56px;border-radius:50%; background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg); transition:transform var(--dur-base) var(--ease-out); } .fab-whatsapp:hover{transform:scale(1.08);} /* ========================================================= Reveal animation hooks (JS toggles .is-visible) ========================================================= */ .reveal-up{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);} .reveal-up.is-visible{opacity:1;transform:translateY(0);} .reveal-stagger > *{opacity:0;transform:translateY(22px);transition:opacity .55s var(--ease-out), transform .55s var(--ease-out);} .reveal-stagger.is-visible > *{opacity:1;transform:translateY(0);} .reveal-stagger.is-visible > *:nth-child(1){transition-delay:.02s;} .reveal-stagger.is-visible > *:nth-child(2){transition-delay:.08s;} .reveal-stagger.is-visible > *:nth-child(3){transition-delay:.14s;} .reveal-stagger.is-visible > *:nth-child(4){transition-delay:.2s;} .reveal-stagger.is-visible > *:nth-child(5){transition-delay:.26s;} .reveal-stagger.is-visible > *:nth-child(6){transition-delay:.32s;} @media (prefers-reduced-motion: reduce){ .reveal-up,.reveal-stagger > *{opacity:1;transform:none;transition:none;} } /* ========================================================= Responsive ========================================================= */ @media (max-width:1024px){ .hero-inner{grid-template-columns:1fr;} .hero-visual{max-width:460px;margin-inline:auto;} .split-layout{grid-template-columns:1fr;} .grid-3{grid-template-columns:repeat(2,1fr);} .offer-row{grid-template-columns:repeat(3,1fr);} .badge-grid{grid-template-columns:repeat(2,1fr);} .ref-grid{grid-template-columns:repeat(3,1fr);} .pricing-grid{grid-template-columns:1fr;} .audit-grid{grid-template-columns:repeat(2,1fr);} .web-extra{grid-template-columns:1fr;} .footer-inner{grid-template-columns:1fr 1fr;} } @media (max-width:860px){ .main-nav{ position:fixed;inset:68px 0 0 0;background:rgba(8,14,30,.98);backdrop-filter:blur(16px); padding:32px 24px;transform:translateY(-12px);opacity:0;pointer-events:none; transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .main-nav.is-open{opacity:1;transform:translateY(0);pointer-events:auto;} .main-nav ul{flex-direction:column;gap:6px;} .main-nav a{display:block;padding:14px 4px;font-size:17px;border-bottom:1px solid rgba(255,255,255,.08);} .header-phone{display:none;} .nav-toggle{display:flex;} .header-actions .btn-sm{display:none;} } @media (max-width:640px){ .section{padding-block:76px;} .container{padding-inline:20px;} .grid-3{grid-template-columns:1fr;} .offer-row{grid-template-columns:1fr 1fr;} .badge-grid{grid-template-columns:1fr;} .ref-grid{grid-template-columns:1fr 1fr;} .audit-grid{grid-template-columns:1fr;} .form-row{grid-template-columns:1fr;} .footer-inner{grid-template-columns:1fr;} .hero-badge-float{left:50%;transform:translateX(-50%);bottom:-30px;} .hero-stats{gap:24px;} .fab-whatsapp{right:16px;bottom:16px;width:50px;height:50px;} } /* ========================================================= Catalogue / fiche produit / devis (added for dynamic catalog) ========================================================= */ .footer-social{display:flex;gap:12px;margin-top:16px;} .footer-social a{ display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%; background:var(--surface-alt);color:var(--ink-500);transition:background var(--dur-fast), color var(--dur-fast); } .footer-social a:hover{background:var(--blue-600);color:#fff;} .btn-ghost-light{ background:transparent;color:var(--ink-900);border:1.5px solid var(--border-strong); } .btn-ghost-light:hover{background:var(--surface-alt);border-color:var(--ink-500);} .catalog-hero{padding-top:calc(var(--header-h) + 48px);} .catalog-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px;} .filter-chip{ padding:9px 18px;border-radius:var(--radius-full);border:1.5px solid var(--border); font-size:13.5px;font-weight:700;color:var(--ink-700);background:var(--surface); transition:background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); } .filter-chip:hover{border-color:var(--blue-500);color:var(--blue-600);} .filter-chip.is-active{background:var(--blue-600);border-color:var(--blue-600);color:#fff;} .catalog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;} .product-card{ display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border); border-radius:var(--radius-lg);padding:26px;transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base), border-color var(--dur-base); } .product-card:hover{transform:translateY(-5px);box-shadow:0 16px 36px -10px rgba(27,77,184,.25);border-color:var(--blue-500);} .product-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;} .product-vendor{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-600);} .badge-devis{ font-size:11px;font-weight:800;letter-spacing:.04em;padding:4px 10px;border-radius:var(--radius-full); background:rgba(27,77,184,.1);color:var(--blue-600); animation:badge-pulse 2.6s ease-in-out infinite; } @keyframes badge-pulse{ 0%,100%{box-shadow:0 0 0 0 rgba(27,77,184,.35);} 50%{box-shadow:0 0 0 6px rgba(27,77,184,0);} } @media (prefers-reduced-motion: reduce){ .badge-devis{animation:none;} } .product-card h3{font-size:18px;margin-bottom:8px;} .product-card h3 a{color:var(--ink-900);} .product-card h3 a:hover{color:var(--blue-600);} .product-card p{font-size:14px;color:var(--ink-500);flex-grow:1;margin-bottom:18px;} .product-card-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:14px;border-top:1px solid var(--border);} .product-price{font-size:13px;color:var(--ink-500);} .product-price strong{color:var(--ink-900);font-size:14.5px;} .product-price-devis{font-weight:700;color:var(--gold-600);} .breadcrumb{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--ink-400);margin-bottom:28px;flex-wrap:wrap;padding-top:calc(var(--header-h) + 24px);} .breadcrumb a:hover{color:var(--blue-600);} .product-detail .breadcrumb{padding-top:0;} .product-detail{padding-top:calc(var(--header-h) + 48px);} .product-header{max-width:760px;margin-bottom:48px;} .product-subtitle{font-size:19px;color:var(--ink-900);margin:28px 0 14px;} .product-subtitle:first-child{margin-top:0;} .product-price-card{position:sticky;top:calc(var(--header-h) + 24px);} .product-price-card h3{color:#fff;margin-bottom:16px;} .product-price-card .btn{margin-top:18px;} .devis-page{padding-top:calc(var(--header-h) + 48px);} .devis-preselect{ display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:18px 20px;margin:22px 0; background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--radius-md); } .devis-preselect strong{font-size:15.5px;color:var(--ink-900);} .devis-preselect span:last-child{font-size:13px;color:var(--ink-500);} .hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;} @media (max-width:1024px){ .catalog-grid{grid-template-columns:repeat(2,1fr);} .product-price-card{position:static;} } @media (max-width:640px){ .catalog-grid{grid-template-columns:1fr;} }