/* ================================================================ GLOBAL CS-CI — Landing sectorielle « Industrie & Process » Feuille de style autonome, conforme au Design System Sectoriel v2 ---------------------------------------------------------------- Charte : #8CBF44 (vert) · #242E3D (navy) · #B7B7B7 (gris) Police : Montserrat 400 / 500 / 600 / 700 / 800 Accents filières : agro / extractif / chimie / matériaux / pharma / cosméto Usage : + ================================================================ */ /* 00 · TOKENS ------------------------------------------------------ */ :root{ --g:#8CBF44; --g2:#9DD050; --gdk:#5A8F1F; --gsft:#EEF7DE; --gsft2:#E3F2CC; --n:#242E3D; --n2:#1A222E; --nlt:#3A475A; --nmid:#2E3C50; --gr:#B7B7B7; --lt:#E5E5E5; --xlt:#F7F8FA; --w:#fff; --F:"Montserrat",sans-serif; /* Accent industriel + couleurs filières */ --ind:#C8862A; --ind-sft:#FBEFE4; --f-agro:#5A8F1F; --f-extr:#C8862A; --f-chim:#0BA8C8; --f-mat:#516072; --f-pharma:#7C3AED; --f-cosm:#C2185B; --r-sm:6px; --r:10px; --r-lg:16px; --sh-sm:0 2px 8px rgba(36,46,61,.06); --sh-md:0 8px 28px rgba(36,46,61,.10); --sh-lg:0 20px 60px rgba(36,46,61,.10),0 2px 8px rgba(36,46,61,.05); } /* 01 · RESET / BASE ----------------------------------------------- */ .secteur-page *,.secteur-page *::before,.secteur-page *::after{box-sizing:border-box} body.secteur-page{ font-family:var(--F); background:var(--w); color:var(--n); -webkit-font-smoothing:antialiased; overflow-x:hidden; margin:0; padding:0; line-height:1.6; } .secteur-page section{padding:0} .secteur-page img{max-width:100%; display:block} .secteur-page .wrap{max-width:1280px; margin:0 auto; padding:0 5%} /* En-têtes de section communs */ .secteur-page .sec-head{max-width:760px; margin:0 auto 8px} .secteur-page .sec-tag{ display:inline-flex; align-items:center; gap:8px; font-size:10.5px; font-weight:800; letter-spacing:3.5px; text-transform:uppercase; color:var(--gdk); margin-bottom:14px; } .secteur-page .sec-tag::before{content:""; width:28px; height:2px; background:var(--g); flex-shrink:0} .secteur-page .sh{ font-size:clamp(24px,3.4vw,38px); font-weight:800; letter-spacing:-.6px; line-height:1.12; color:var(--n); margin:0 0 12px; } .secteur-page .ss{font-size:15px; color:var(--nlt); line-height:1.7; margin:0} /* 02 · NAVIGATION ------------------------------------------------- */ .secteur-page nav.nav{ position:sticky; top:0; z-index:200; background:rgba(26,34,46,.97); backdrop-filter:blur(12px); border-bottom:1px solid rgba(140,191,68,.15); } .secteur-page .nv{ max-width:1280px; margin:0 auto; padding:0 5%; height:60px; display:flex; align-items:center; justify-content:space-between; gap:16px; } .secteur-page .brd{display:flex; align-items:center; gap:9px; text-decoration:none} .secteur-page .bsq{ width:30px; height:30px; background:var(--g); display:grid; place-items:center; font-size:13px; font-weight:800; color:var(--n); border-radius:4px; flex-shrink:0; } .secteur-page .btx{font-size:14px; font-weight:800; color:var(--w)} .secteur-page .btx span{color:var(--g)} .secteur-page .nav-right{display:flex; align-items:center; gap:16px} .secteur-page .sector-badge{ display:inline-flex; align-items:center; gap:6px; background:rgba(140,191,68,.12); border:1px solid rgba(140,191,68,.25); border-radius:20px; padding:4px 12px 4px 8px; font-size:11px; font-weight:700; color:var(--g); } .secteur-page .sector-badge::before{ content:""; width:6px; height:6px; background:var(--g); border-radius:50%; animation:sp-pu 2s infinite; } @keyframes sp-pu{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.4; transform:scale(.7)}} .secteur-page .ncta{ font-size:13px; font-weight:700; color:var(--n); background:var(--g); padding:8px 18px; border-radius:6px; text-decoration:none; transition:all .2s; white-space:nowrap; } .secteur-page .ncta:hover{background:var(--g2)} /* Barre d'ancres piliers */ .secteur-page .brique-nav{background:var(--n); border-bottom:1px solid rgba(255,255,255,.06); overflow-x:auto; scrollbar-width:none} .secteur-page .brique-nav::-webkit-scrollbar{display:none} .secteur-page .brique-nav-inner{max-width:1280px; margin:0 auto; padding:0 5%; display:flex; gap:4px; white-space:nowrap} .secteur-page .nav-brique{ padding:13px 16px; font-size:12px; font-weight:600; color:rgba(255,255,255,.55); text-decoration:none; border-bottom:2px solid transparent; transition:all .2s; font-family:var(--F); } .secteur-page .nav-brique:hover{color:rgba(255,255,255,.85); background:rgba(255,255,255,.04)} /* 03 · HÉRO ------------------------------------------------------- */ .secteur-page .hero{background:var(--n2); padding:64px 0 56px; position:relative; overflow:hidden} .secteur-page .hero::before{ content:""; position:absolute; inset:0; background-image:radial-gradient(circle,rgba(140,191,68,.08) 1px,transparent 1px); background-size:36px 36px; pointer-events:none; } .secteur-page .hero::after{ content:""; position:absolute; top:-10%; right:-8%; width:55%; height:120%; background:radial-gradient(ellipse,rgba(200,134,42,.12) 0%,transparent 65%); pointer-events:none; } .secteur-page .hero-in{max-width:1280px; margin:0 auto; padding:0 5%; position:relative; z-index:1} .secteur-page .hero-sector-tag{ display:inline-flex; align-items:center; gap:8px; font-size:10.5px; font-weight:800; letter-spacing:3.5px; text-transform:uppercase; color:var(--g); margin-bottom:18px; } .secteur-page .hero-sector-tag::before{content:""; width:28px; height:2px; background:var(--g); flex-shrink:0} .secteur-page .hero h1{ font-size:clamp(32px,5vw,62px); font-weight:800; line-height:1.05; letter-spacing:-.8px; color:var(--w); margin:0 0 16px; font-family:var(--F); } .secteur-page .hero h1 em{color:var(--g); font-style:normal; display:block} .secteur-page .hero-sub{ font-size:clamp(14px,1.5vw,17px); color:rgba(255,255,255,.6); line-height:1.72; max-width:720px; margin:0 0 30px; } .secteur-page .hkpis{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; max-width:820px; margin-bottom:30px} .secteur-page .hkp{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:18px 14px; text-align:center; position:relative; overflow:hidden; } .secteur-page .hkp::before{content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--g)} .secteur-page .hkp .v{font-size:25px; font-weight:800; color:var(--g); line-height:1; margin-bottom:5px; letter-spacing:-1px} .secteur-page .hkp .l{font-size:10.5px; color:rgba(255,255,255,.5); font-weight:500; line-height:1.4} .secteur-page .hero-ctx{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); border-left:3px solid var(--ind); border-radius:8px; padding:16px 20px; max-width:820px; font-size:14px; color:rgba(255,255,255,.7); line-height:1.7; margin-bottom:28px; } .secteur-page .hero-ctx b{color:var(--w); font-weight:700} .secteur-page .hero-btns{display:flex; gap:12px; flex-wrap:wrap} /* 04 · BOUTONS ---------------------------------------------------- */ .secteur-page .bp{ font-family:var(--F); font-size:14px; font-weight:700; color:var(--n); background:var(--g); padding:13px 26px; border-radius:8px; text-decoration:none; display:inline-flex; align-items:center; gap:7px; transition:all .2s; border:0; cursor:pointer; } .secteur-page .bp:hover{background:var(--g2); transform:translateY(-2px); box-shadow:0 12px 28px rgba(140,191,68,.30)} .secteur-page .bo{ font-family:var(--F); font-size:14px; font-weight:600; color:rgba(255,255,255,.7); border:1.5px solid rgba(255,255,255,.25); padding:13px 26px; border-radius:8px; text-decoration:none; display:inline-flex; align-items:center; gap:7px; transition:all .2s; background:transparent; } .secteur-page .bo:hover{color:var(--w); border-color:rgba(255,255,255,.6)} /* 05 · SECTION DOULEURS / COÛT ------------------------------------ */ .secteur-page .cost-sec{padding:72px 0; background:var(--w); border-bottom:1px solid var(--lt)} .secteur-page .cost-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:36px} .secteur-page .cost-card{ background:var(--xlt); border:1px solid var(--lt); border-left:3px solid var(--ind); border-radius:10px; padding:20px 22px; transition:all .2s; } .secteur-page .cost-card:hover{border-color:rgba(200,134,42,.4); box-shadow:var(--sh-sm); transform:translateY(-2px)} .secteur-page .cost-pain{font-size:14px; font-weight:700; color:var(--n); line-height:1.4; margin-bottom:8px; display:flex; gap:9px; align-items:flex-start} .secteur-page .cost-pain .ci{flex-shrink:0; font-size:16px} .secteur-page .cost-amt{font-size:12.5px; color:var(--nlt); line-height:1.6} .secteur-page .cost-amt b{color:var(--ind); font-weight:800} .secteur-page .cost-note{ margin-top:30px; background:var(--ind-sft); border-left:4px solid var(--ind); border-radius:10px; padding:22px 26px; display:flex; gap:16px; align-items:flex-start; } .secteur-page .cost-note .nh{font-size:16px; font-weight:800; color:var(--n); margin-bottom:6px} .secteur-page .cost-note p{font-size:13.5px; color:var(--nlt); line-height:1.7; margin:0} .secteur-page .cost-note .ni{font-size:28px; flex-shrink:0; line-height:1} /* 06 · SECTION FILIÈRES ------------------------------------------- */ .secteur-page .fil-sec{padding:72px 0; background:var(--xlt); border-bottom:1px solid var(--lt)} .secteur-page .fil-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:36px} .secteur-page .fil-card{ background:var(--w); border:1px solid var(--lt); border-top:3px solid var(--accent,#8CBF44); border-radius:12px; padding:22px 20px; transition:all .25s; position:relative; } .secteur-page .fil-card:hover{transform:translateY(-4px); box-shadow:var(--sh-md)} .secteur-page .fil-ico{font-size:30px; margin-bottom:12px; display:block} .secteur-page .fil-name{font-size:15px; font-weight:800; color:var(--n); line-height:1.25; margin-bottom:12px; letter-spacing:-.2px} .secteur-page .fil-lbl{font-size:9px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--accent,#5A8F1F); margin-bottom:4px} .secteur-page .fil-pain{font-size:12.5px; color:var(--nlt); line-height:1.6; margin:0 0 14px} .secteur-page .fil-declic{font-size:12.5px; color:var(--n); line-height:1.6; font-style:italic; margin:0; padding-top:12px; border-top:1px dashed var(--lt)} .secteur-page .fil-card.agro{--accent:var(--f-agro)} .secteur-page .fil-card.extr{--accent:var(--f-extr)} .secteur-page .fil-card.chim{--accent:var(--f-chim)} .secteur-page .fil-card.mat{--accent:var(--f-mat)} .secteur-page .fil-card.pharma{--accent:var(--f-pharma)} .secteur-page .fil-card.cosm{--accent:var(--f-cosm)} /* 07 · SECTIONS PILIERS ------------------------------------------- */ .secteur-page .brique-sec{padding:72px 0; border-bottom:1px solid var(--lt)} .secteur-page .brique-sec:nth-of-type(even){background:var(--xlt)} .secteur-page .brique-inner{display:grid; grid-template-columns:320px 1fr; gap:52px; align-items:start} .secteur-page .brique-left{position:sticky; top:80px} .secteur-page .brique-num-badge{ font-size:10px; font-weight:800; letter-spacing:3px; text-transform:uppercase; color:var(--gdk); background:var(--gsft); padding:4px 10px; border-radius:10px; width:fit-content; margin-bottom:16px; display:inline-block; } .secteur-page .brique-ico-big{font-size:48px; margin-bottom:14px; display:block} .secteur-page .brique-name{font-size:22px; font-weight:800; color:var(--n); margin-bottom:10px; letter-spacing:-.3px; line-height:1.2} .secteur-page .brique-uc{font-size:12.5px; font-weight:700; color:var(--gdk); margin-bottom:12px; line-height:1.5; text-transform:uppercase; letter-spacing:.5px} .secteur-page .brique-desc{font-size:13.5px; color:var(--nlt); line-height:1.68} .secteur-page .brique-feats-lbl{font-size:9.5px; font-weight:800; letter-spacing:2.5px; text-transform:uppercase; color:var(--gdk); margin-bottom:14px; display:flex; align-items:center; gap:8px} .secteur-page .brique-feats-lbl::before{content:""; width:16px; height:2px; background:var(--g); border-radius:2px; flex-shrink:0} .secteur-page .ufs{display:flex; flex-direction:column; gap:12px; margin-bottom:22px} .secteur-page .uf{background:var(--xlt); border:1px solid var(--lt); border-radius:10px; padding:16px 18px; display:flex; align-items:flex-start; gap:13px; transition:all .2s} .secteur-page .brique-sec:nth-of-type(even) .uf{background:var(--w)} .secteur-page .uf:hover{border-color:rgba(140,191,68,.35); background:var(--gsft); transform:translateX(4px)} .secteur-page .ufi{width:34px; height:34px; background:var(--gsft); border-radius:8px; display:grid; place-items:center; font-size:16px; flex-shrink:0} .secteur-page .uf .ft{font-size:13px; font-weight:700; color:var(--n); margin-bottom:4px; line-height:1.3} .secteur-page .uf .fd{font-size:12px; color:var(--nlt); line-height:1.55} .secteur-page .tkpis{display:grid; grid-template-columns:repeat(3,1fr); gap:10px} .secteur-page .tkpi{background:var(--n); border-radius:9px; padding:16px 12px; text-align:center} .secteur-page .tkpi .kv{font-size:20px; font-weight:800; color:var(--g); line-height:1; letter-spacing:-.5px; margin-bottom:5px} .secteur-page .tkpi .kl{font-size:10px; color:rgba(255,255,255,.45); line-height:1.35; font-weight:500} /* 08 · CAPACITÉS ÉTENDUES ----------------------------------------- */ .secteur-page .cap-sec{background:var(--n); padding:72px 0} .secteur-page .cap-sec .sec-tag,.secteur-page .cap-sec .fil-lbl{color:var(--g)} .secteur-page .cap-sec .sh{color:var(--w)} .secteur-page .cap-sec .ss{color:rgba(255,255,255,.55)} .secteur-page .cap-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; margin-top:36px} .secteur-page .cap-item{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); border-radius:12px; padding:22px 20px; display:flex; align-items:flex-start; gap:14px; transition:all .2s} .secteur-page .cap-item:hover{border-color:rgba(140,191,68,.25); background:rgba(140,191,68,.06)} .secteur-page .cap-item-ico{font-size:24px; flex-shrink:0; width:44px; height:44px; background:rgba(140,191,68,.12); border-radius:10px; display:grid; place-items:center} .secteur-page .cap-item-name{font-size:14px; font-weight:700; color:var(--w); margin-bottom:6px} .secteur-page .cap-item-desc{font-size:12px; color:rgba(255,255,255,.5); line-height:1.6} /* 09 · DÉPLOIEMENT (cloud / on-premise / hybride) ----------------- */ .secteur-page .dep-sec{padding:72px 0; background:var(--w); border-bottom:1px solid var(--lt)} .secteur-page .dep-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:36px} .secteur-page .dep-card{background:var(--xlt); border:1px solid var(--lt); border-radius:14px; padding:26px 24px; position:relative; transition:all .25s} .secteur-page .dep-card:hover{transform:translateY(-4px); box-shadow:var(--sh-md)} .secteur-page .dep-card.reco{background:var(--n); border-color:var(--n)} .secteur-page .dep-flag{ position:absolute; top:-11px; left:24px; background:var(--g); color:var(--n); font-size:9.5px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; padding:4px 12px; border-radius:20px; } .secteur-page .dep-ico{font-size:30px; margin-bottom:12px} .secteur-page .dep-name{font-size:18px; font-weight:800; color:var(--n); margin-bottom:6px; letter-spacing:-.3px} .secteur-page .dep-card.reco .dep-name{color:var(--w)} .secteur-page .dep-tag{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--gdk); margin-bottom:16px} .secteur-page .dep-card.reco .dep-tag{color:var(--g)} .secteur-page .dep-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px} .secteur-page .dep-list li{font-size:12.5px; color:var(--nlt); line-height:1.5; padding-left:22px; position:relative} .secteur-page .dep-card.reco .dep-list li{color:rgba(255,255,255,.7)} .secteur-page .dep-list li::before{content:"▸"; position:absolute; left:2px; top:0; color:var(--g); font-weight:800} .secteur-page .dep-list li b{color:var(--n); font-weight:700} .secteur-page .dep-card.reco .dep-list li b{color:var(--w)} .secteur-page .dep-foot{margin-top:28px; font-size:12.5px; color:var(--gr); font-style:italic; text-align:center; line-height:1.7} /* 10 · POURQUOI --------------------------------------------------- */ .secteur-page .why-sec{padding:72px 0; background:var(--xlt); border-bottom:1px solid var(--lt)} .secteur-page .why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:36px} .secteur-page .why-card{background:var(--w); border:1px solid var(--lt); border-radius:12px; padding:24px 22px; transition:all .2s} .secteur-page .why-card:hover{border-color:rgba(140,191,68,.35); box-shadow:var(--sh-sm); transform:translateY(-2px)} .secteur-page .why-ico{width:42px; height:42px; background:var(--gsft); border-radius:10px; display:grid; place-items:center; font-size:20px; margin-bottom:14px} .secteur-page .why-name{font-size:15px; font-weight:800; color:var(--n); margin-bottom:8px; letter-spacing:-.2px} .secteur-page .why-desc{font-size:12.5px; color:var(--nlt); line-height:1.65} /* 11 · CTA FINALE ------------------------------------------------- */ .secteur-page .cta-sec{background:var(--n2); padding:88px 0; position:relative; overflow:hidden; text-align:center} .secteur-page .cta-sec::before{content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 100%,rgba(140,191,68,.12),transparent 55%); pointer-events:none} .secteur-page .cta-in{max-width:720px; margin:0 auto; padding:0 5%; position:relative; z-index:1} .secteur-page .cta-in h2{font-size:clamp(26px,4vw,50px); font-weight:800; color:var(--w); line-height:1.05; letter-spacing:-1.5px; margin:0 0 14px; font-family:var(--F)} .secteur-page .cta-in h2 span{color:var(--g)} .secteur-page .cta-in p{font-size:16px; color:rgba(255,255,255,.55); line-height:1.72; margin:0 0 36px} .secteur-page .cta-btns{display:flex; gap:12px; justify-content:center; flex-wrap:wrap} .secteur-page .cta-meta{display:flex; gap:24px; justify-content:center; margin-top:28px; flex-wrap:wrap} .secteur-page .cta-meta a{font-size:13px; color:rgba(255,255,255,.45); text-decoration:none; transition:color .2s} .secteur-page .cta-meta a:hover{color:var(--g)} /* 12 · FOOTER ----------------------------------------------------- */ .secteur-page footer{background:#0F1620; padding:32px 0 18px; border-top:1px solid rgba(255,255,255,.05)} .secteur-page .fi{max-width:1280px; margin:0 auto; padding:0 5%; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px} .secteur-page .fb{font-size:13px; font-weight:700; color:rgba(255,255,255,.3); text-decoration:none} .secteur-page .fb span{color:var(--g)} .secteur-page .fls{display:flex; gap:16px; flex-wrap:wrap} .secteur-page .fls a{font-size:12px; color:rgba(255,255,255,.28); text-decoration:none; transition:color .2s} .secteur-page .fls a:hover{color:var(--g)} .secteur-page .fc2{font-size:11px; color:rgba(255,255,255,.22); text-align:center; margin-top:18px; padding-top:14px; border-top:1px solid rgba(255,255,255,.04); line-height:1.6} /* 13 · ANIMATIONS / REVEAL ---------------------------------------- */ .secteur-page .reveal{opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease,cubic-bezier(.16,1,.3,1)),transform .6s var(--ease,cubic-bezier(.16,1,.3,1))} .secteur-page .reveal.in{opacity:1; transform:none} .secteur-page .hero h1{animation:fadeUp .7s both} .secteur-page .hero-sub{animation:fadeUp .7s .08s both} .secteur-page .hkpis{animation:fadeUp .7s .16s both} .secteur-page .hero-ctx{animation:fadeUp .7s .24s both} .secteur-page .hero-btns{animation:fadeUp .7s .32s both} @keyframes fadeUp{from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:none}} @media (prefers-reduced-motion:reduce){ .secteur-page .reveal{opacity:1; transform:none; transition:none} .secteur-page .hero h1,.secteur-page .hero-sub,.secteur-page .hkpis,.secteur-page .hero-ctx,.secteur-page .hero-btns{animation:none} } /* 14 · RESPONSIVE ------------------------------------------------- */ @media (max-width:980px){ .secteur-page .brique-inner{grid-template-columns:1fr; gap:28px} .secteur-page .brique-left{position:static} .secteur-page .fil-grid,.secteur-page .cap-grid,.secteur-page .dep-grid,.secteur-page .why-grid{grid-template-columns:1fr 1fr} } @media (max-width:680px){ .secteur-page .hkpis{grid-template-columns:1fr 1fr} .secteur-page .cost-grid,.secteur-page .fil-grid,.secteur-page .cap-grid,.secteur-page .dep-grid,.secteur-page .why-grid{grid-template-columns:1fr} .secteur-page .nav-right .sector-badge{display:none} .secteur-page .hero{padding:48px 0 40px} .secteur-page .brique-sec,.secteur-page .cost-sec,.secteur-page .fil-sec,.secteur-page .cap-sec,.secteur-page .dep-sec,.secteur-page .why-sec{padding:52px 0} }