/* ================================================================ GLOBAL CS-CI — Design System Sectoriel Unifié v2 Feuille de style commune aux 9 livrables sectoriels ---------------------------------------------------------------- Secteurs couverts : 01 · Commerce & Distribution 02 · BTP / Construction / Immobilier 03 · Microfinance / Banque / Assurance 04 · Santé / Cliniques 05 · Agro-industrie / Négoce 06 · Cabinets professionnels 07 · Transport / Logistique / Transit 08 · Services publics 09 · Fintech ---------------------------------------------------------------- Charte : #8CBF44 (vert) · #242E3D (navy) · #B7B7B7 (gris) · #E5E5E5 (gris clair) Police : Montserrat 400 / 500 / 600 / 700 / 800 ---------------------------------------------------------------- Usage : ---------------------------------------------------------------- CORRECTIONS v2 — Conflits résolus vs 00index.css : 1. body — overflow-x isolé via .secteur-page 2. .hero::before — dots pattern isolé vs glow radial d'index 3. .hero-in — layout block isolé vs grid 2col d'index 4. .hero h1 em — var(--g) unifié 5. .hero-btns — gap et margin-top protégés 6. .cta-in — layout centré isolé vs grid d'index 7. .sh — clamp, line-height, margin-bottom protégés 8. .cap-grid — grille 2col protégée vs @media index 9. section{} — padding sectoriel protégé 10. nav{} — z-index et border protégés via .secteur-page nav 11. footer{} — background et padding protégés 12. footer p,a — liens footer protégés ================================================================ TABLE DES MATIÈRES ───────────────────────────────────────────────────────────── 00 · Tokens (variables CSS — hors .secteur-page car :root global) 01 · Scope racine .secteur-page (reset, body, html) 02 · Navigation principale 03 · Barre de navigation briques 04 · Héro 05 · KPIs héro 06 · Contexte sectoriel 07 · Boutons 08 · Sections briques (alternées) 09 · Cartes fonctionnalités 10 · KPIs panneaux 11 · Section capacités étendues 12 · Cartes capacités 13 · Section CTA finale 14 · Footer 15 · Utilitaires 16 · Animations & reveal 17 · Responsive (900px · 540px) ================================================================ */ /* ───────────────────────────────────────────────────────────────── 00 · TOKENS — Variables CSS globales (déclarées sur :root pour compatibilité maximale) ───────────────────────────────────────────────────────────────── */ :root { /* Palette principale */ --g: #8CBF44; /* vert marque */ --g2: #9DD050; /* vert hover */ --gdk: #5A8F1F; /* vert foncé */ --gsft: #EEF7DE; /* vert très pâle */ --gsft2:#E3F2CC; /* vert pâle alt */ /* Navy */ --n: #242E3D; /* navy principal */ --n2: #1A222E; /* navy profond */ --nlt: #3A475A; /* navy clair */ --nmid: #2E3C50; /* navy intermédiaire*/ /* Neutres */ --gr: #B7B7B7; /* gris texte */ --lt: #E5E5E5; /* bordures */ --xlt: #F7F8FA; /* fond alterné */ --w: #fff; /* Typographie */ --F: "Montserrat", sans-serif; } /* ───────────────────────────────────────────────────────────────── 01 · SCOPE RACINE — Isolation via .secteur-page Tous les styles suivants sont préfixés par .secteur-page pour éviter tout conflit avec 00index.css chargé en parallèle. ───────────────────────────────────────────────────────────────── */ /* Reset base propre au scope sectoriel */ .secteur-page *, .secteur-page *::before, .secteur-page *::after { box-sizing: border-box; } /* Corps de page — neutralise les conflits body{} d'index */ body.secteur-page { font-family: var(--F); background: var(--w); color: var(--n); -webkit-font-smoothing: antialiased; overflow-x: hidden; /* manquant dans index */ margin: 0; padding: 0; } /* Section générique — neutralise section{padding:80px 0} d'index */ .secteur-page section { padding: 0; /* le padding est géré par chaque classe spécifique */ } /* ───────────────────────────────────────────────────────────────── 02 · NAVIGATION PRINCIPALE Conflict résolu : nav{z-index:100;border-bottom:2px} d'index → .secteur-page nav est plus spécifique ───────────────────────────────────────────────────────────────── */ .secteur-page nav.nav { position: sticky; top: 0; z-index: 200; /* 200 vs 100 dans index — protégé */ background: rgba(26,34,46,.97); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(140,191,68,.15); /* 1px vs 2px dans index */ margin: 0; padding: 0; } .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 .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 { /* nom unique pour éviter conflit avec @keyframes pulse d'index */ 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); } /* ───────────────────────────────────────────────────────────────── 03 · BARRE NAVIGATION BRIQUES (scroll horizontal) ───────────────────────────────────────────────────────────────── */ .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: 0; } .secteur-page .nav-brique { flex: 0 0 auto; padding: 12px 20px; font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,.38); text-decoration: none; border-bottom: 2px solid transparent; transition: all .2s; white-space: nowrap; display: flex; align-items: center; gap: 6px; font-family: var(--F); } .secteur-page .nav-brique:hover { color: rgba(255,255,255,.8); background: rgba(255,255,255,.04); } .secteur-page .nav-brique.active { color: var(--w); border-bottom-color: var(--g); } /* ───────────────────────────────────────────────────────────────── 04 · HÉRO Conflicts résolus : - .hero::before : dots pattern vs glow radial d'index - .hero-in : layout block vs grid 2col d'index - .hero h1 : font-size protégé ───────────────────────────────────────────────────────────────── */ .secteur-page .hero { background: var(--n2); padding: 64px 0 52px; position: relative; overflow: hidden; /* annule les propriétés d'index : min-height, display:flex, align-items, gradient */ min-height: unset; display: block; align-items: unset; } /* Dots pattern — remplace le glow radial d'index */ .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; /* annule les propriétés conflictuelles d'index */ top: 0; right: 0; width: 100%; height: 100%; } /* Glow sectoriel — remplace le ::before d'index sur ce pseudo-élément */ .secteur-page .hero::after { content: ""; position: absolute; top: -10%; right: -8%; width: 55%; height: 120%; background: radial-gradient(ellipse, rgba(140,191,68,.10) 0%, transparent 65%); pointer-events: none; } .secteur-page .hero-in { max-width: 1280px; margin: 0 auto; padding: 0 5%; position: relative; z-index: 1; /* annule grid 2col d'index */ display: block; grid-template-columns: unset; gap: unset; } .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; } /* h1 — font-size protégé vs index (clamp 30→54 vs 32→64) */ .secteur-page .hero h1 { font-size: clamp(32px, 5vw, 64px); font-weight: 800; line-height: 1.05; letter-spacing: -.8px; color: var(--w); margin-bottom: 16px; /* annule .hero h1 d'index */ font-family: var(--F); } .secteur-page .hero h1 em { color: var(--g); font-style: normal; display: block; } /* .hero p d'index (font-size:16px) est neutralisé par la règle plus spécifique */ .secteur-page .hero p { font-size: inherit; color: inherit; line-height: inherit; margin-bottom: 0; max-width: unset; } .secteur-page .hero-sub { font-size: clamp(14px, 1.5vw, 17px); color: rgba(255,255,255,.58); line-height: 1.72; max-width: 700px; margin-bottom: 32px; } /* hero-btns — gap:12px protégé vs gap:13px d'index · margin-top ajouté */ .secteur-page .hero-btns { display: flex; gap: 12px; /* 12px sectoriel vs 13px index */ flex-wrap: wrap; margin-top: 28px; /* manquant dans index */ } /* ───────────────────────────────────────────────────────────────── 05 · KPIs HÉRO ───────────────────────────────────────────────────────────────── */ .secteur-page .hkpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 800px; margin-bottom: 36px; } .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); /* annule le ::before dots du hero — ce ::before est sur .hkp, pas .hero */ background-image: none; background-size: auto; inset: unset; pointer-events: auto; width: auto; } .secteur-page .hkp .v { font-size: 26px; 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,.45); font-weight: 500; line-height: 1.4; } /* ───────────────────────────────────────────────────────────────── 06 · CONTEXTE SECTORIEL ───────────────────────────────────────────────────────────────── */ .secteur-page .hero-ctx { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-left: 3px solid var(--g); border-radius: 8px; padding: 18px 22px; max-width: 800px; font-size: 14px; color: rgba(255,255,255,.65); line-height: 1.72; } /* ───────────────────────────────────────────────────────────────── 07 · 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,.70); 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,.60); } /* ───────────────────────────────────────────────────────────────── 08 · SECTIONS BRIQUES Conflict résolu : section{padding:80px 0} d'index → .secteur-page section remet padding:0, puis chaque classe le redéfinit ───────────────────────────────────────────────────────────────── */ .secteur-page .brique-sec { padding: 72px 0; border-bottom: 1px solid var(--lt); } .secteur-page .brique-sec:nth-child(even) { background: var(--xlt); } .secteur-page .wrap { max-width: 1280px; margin: 0 auto; padding: 0 5%; } .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(--g); 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; } /* ───────────────────────────────────────────────────────────────── 09 · CARTES FONCTIONNALITÉS ───────────────────────────────────────────────────────────────── */ .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 .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; } /* ───────────────────────────────────────────────────────────────── 10 · KPIs PANNEAUX ───────────────────────────────────────────────────────────────── */ .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,.40); line-height: 1.35; font-weight: 500; } /* ───────────────────────────────────────────────────────────────── 11 · SECTION CAPACITÉS ÉTENDUES ───────────────────────────────────────────────────────────────── */ .secteur-page .cap-sec { background: var(--n); padding: 72px 0; } .secteur-page .cap-sec .sh { color: var(--w); } .secteur-page .cap-sec .ss { color: rgba(255,255,255,.55); } /* ───────────────────────────────────────────────────────────────── 12 · CARTES CAPACITÉS Conflict résolu : .cap-grid{grid-template-columns:1fr} @media index → spécificité .secteur-page .cap-grid > .cap-grid (0-2-0 > 0-1-0) ───────────────────────────────────────────────────────────────── */ .secteur-page .cap-grid { display: grid; grid-template-columns: 1fr 1fr; /* protégé vs 1fr du @media index */ 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: 26px; 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: 12.5px; color: rgba(255,255,255,.50); line-height: 1.6; } /* ───────────────────────────────────────────────────────────────── 13 · SECTION CTA FINALE Conflict résolu : .cta-in{grid 1fr 400px} d'index ───────────────────────────────────────────────────────────────── */ .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,.10), transparent 55%); pointer-events: none; /* annule la règle .hero::before qui pourrait s'appliquer via héritage */ background-image: radial-gradient(ellipse at 50% 100%, rgba(140,191,68,.10), transparent 55%); background-size: auto; background-position: center; } /* cta-in centré — annule grid 2col d'index */ .secteur-page .cta-in { max-width: 700px; margin: 0 auto; padding: 0 5%; position: relative; z-index: 1; /* annule grid d'index */ display: block; grid-template-columns: unset; gap: unset; align-items: unset; } .secteur-page .cta-in h2 { font-size: clamp(26px, 4vw, 52px); font-weight: 800; color: var(--w); line-height: 1.05; letter-spacing: -1.5px; margin-bottom: 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-bottom: 36px; max-width: unset; } .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,.38); text-decoration: none; transition: color .2s; } .secteur-page .cta-meta a:hover { color: var(--g); } /* ───────────────────────────────────────────────────────────────── 14 · FOOTER Conflicts résolus : - footer{background:#121820} d'index → #0F1620 - footer{padding:44px} d'index → 32px - footer{border-top: green} d'index → blanc très transparent - footer p, footer a d'index → redéfinis ici ───────────────────────────────────────────────────────────────── */ .secteur-page footer { background: #0F1620; /* #121820 dans index */ padding: 32px 0 18px; /* 44px dans index */ border-top: 1px solid rgba(255,255,255,.05); /* vert dans index */ margin: 0; } /* Neutraliser footer p, footer a d'index */ .secteur-page footer p, .secteur-page footer a { font-size: inherit; color: inherit; text-decoration: none; display: inline; margin-bottom: 0; line-height: inherit; } .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,.30); text-decoration: none; display: inline; margin: 0; } .secteur-page .fb span { color: var(--g); } .secteur-page .fls { display: flex; gap: 16px; } .secteur-page .fls a { font-size: 12px; color: rgba(255,255,255,.28); text-decoration: none; display: inline; transition: color .2s; margin: 0; line-height: normal; } .secteur-page .fls a:hover { color: var(--g); } .secteur-page .fc2 { font-size: 12px; color: rgba(255,255,255,.18); } .secteur-page .fback { font-size: 12px; color: rgba(255,255,255,.28); text-decoration: none; display: inline; transition: color .2s; } .secteur-page .fback:hover { color: var(--g); } /* ───────────────────────────────────────────────────────────────── 15 · UTILITAIRES Conflict résolu : .sh{clamp 3.2vw/40px;line-height:1.18;mb:16px} d'index ───────────────────────────────────────────────────────────────── */ .secteur-page .ey { font-size: 10.5px; font-weight: 800; letter-spacing: 3.5px; text-transform: uppercase; color: var(--gdk); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; } .secteur-page .ey::before { content: ""; width: 26px; height: 2px; background: var(--g); border-radius: 2px; flex-shrink: 0; } .secteur-page .ey.w { color: var(--g); } .secteur-page .ey.w::before { background: var(--g); } /* .sh — spécificité .secteur-page .sh > .sh d'index */ .secteur-page .sh { font-size: clamp(24px, 3vw, 38px); /* 3.2vw/40px dans index */ font-weight: 800; color: var(--n); line-height: 1.1; /* 1.18 dans index */ letter-spacing: -.8px; /* absent dans index */ margin-bottom: 12px; /* 16px dans index */ } .secteur-page .ss { font-size: 15px; color: var(--nlt); line-height: 1.7; max-width: 660px; margin-bottom: 36px; } /* ───────────────────────────────────────────────────────────────── 16 · ANIMATIONS & REVEAL AU SCROLL Nom unique sp-pu déjà défini en §02 pour éviter conflit avec @keyframes pulse d'index ───────────────────────────────────────────────────────────────── */ .secteur-page .rv { opacity: 0; transform: translateY(22px); transition: opacity .55s ease, transform .55s ease; } .secteur-page .rv.in { opacity: 1; transform: translateY(0); } .secteur-page .d1 { transition-delay: .1s; } .secteur-page .d2 { transition-delay: .2s; } .secteur-page .d3 { transition-delay: .3s; } .secteur-page .d4 { transition-delay: .4s; } /* ───────────────────────────────────────────────────────────────── 17 · RESPONSIVE Conflict résolu : - .cap-grid dans @media(1024px) d'index écrase notre 2col → .secteur-page .cap-grid a spécificité supérieure même en @media ───────────────────────────────────────────────────────────────── */ @media (max-width: 900px) { .secteur-page .brique-inner { grid-template-columns: 1fr; } .secteur-page .brique-left { position: static; } /* .cap-grid reste 2 colonnes jusqu'à 540px */ .secteur-page .hkpis { grid-template-columns: repeat(2, 1fr); } .secteur-page .tkpis { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { .secteur-page .cap-grid { grid-template-columns: 1fr; /* passe à 1 col seulement à 720px, pas à 1024px comme index */ } } @media (max-width: 540px) { .secteur-page .hkpis { grid-template-columns: 1fr 1fr; } .secteur-page .brique-nav-inner { gap: 0; } .secteur-page .cta-btns { flex-direction: column; align-items: center; } }