/* ================================================================ GLOBAL CS-CI — globalcsci-capacites.css Feuille de style commune aux 6 livrables Capacités étendues ---------------------------------------------------------------- Capacités couvertes : 01 · GED & Archivage 02 · Mobilité & Accès Multi-sites 03 · WhatsApp Business API 04 · Direct Routing Microsoft Teams 05 · Knowledge Base — Gestion des connaissances 06 · Campagnes & Sondages ---------------------------------------------------------------- Charte : #8CBF44 (vert) · #242E3D (navy) · #B7B7B7 (gris) · #E5E5E5 (gris clair) Police : Montserrat 400 / 500 / 600 / 700 / 800 ---------------------------------------------------------------- Usage : Ajouter class="capacite-page" sur le de chaque page. ---------------------------------------------------------------- CONFLITS RÉSOLUS vs 00index.css (15 au total) : Directs (11) : 1. body — overflow-x:hidden ajouté, color via scope 2. .hero — min-height/flex/gradient annulés 3. .hero::before — dots pattern protégé vs glow radial index 4. .hero-in — layout block protégé vs grid 2col index 5. .hero h1 em — var(--g) unifié, display:block préservé 6. .hero-btns — gap:12px + margin-top:28px protégés 7. .sh — clamp/line-height/letter-spacing protégés 8. .cta-in — max-width centré protégé vs grid index 9. footer — bg, padding, border protégés 10. @keyframes — renommés cp-pu / cp-rv pour éviter conflit 11. html — identique, pas d'action requise Induits (4) : 12. nav{} — .capacite-page nav.nav z-index:200, border:1px 13. section{} — .capacite-page section { padding:0 } 14. footer p, a — neutralisés et redéfinis sous .capacite-page 15. footer h6 — neutralisé sous .capacite-page ================================================================ TABLE DES MATIÈRES ───────────────────────────────────────────────────────────── 00 · Tokens (:root — couleurs, police, rayon, ombres) 01 · Scope racine .capacite-page (reset, body, section) 02 · Variables dynamiques de couleur par capacité 03 · Navigation principale 04 · Héro (background, dots pattern, layout, textes) 05 · KPIs héro 06 · Boutons 07 · Section modules (grille 3×2) 08 · Bandeau chiffres 09 · Grille secteurs (9 secteurs) 10 · Grille intégrations 11 · Section différenciation 12 · Section CTA finale 13 · Footer 14 · Utilitaires (wrap, ey, sh, ss) 15 · Animations & reveal (noms préfixés cp-) 16 · Responsive (1100px · 768px) ================================================================ */ /* ───────────────────────────────────────────────────────────────── 00 · TOKENS — Variables globales (:root pour compatibilité max) ───────────────────────────────────────────────────────────────── */ :root { /* Palette principale */ --g: #8CBF44; --g2: #9DD050; --gdk: #5A8F1F; --gsft: #EEF7DE; /* Navy */ --n: #242E3D; --n2: #1A222E; --nlt: #3A475A; --nmid: #2E3C50; /* Neutres */ --gr: #B7B7B7; --lt: #E5E5E5; --xlt: #F7F8FA; --w: #fff; /* Typographie */ --F: "Montserrat", sans-serif; /* Variables couleur capacité (défaut = vert marque) Chaque page surcharge --c et --cs via style inline sur */ --c: #8CBF44; --cs: rgba(140,191,68,.10); } /* ───────────────────────────────────────────────────────────────── 01 · SCOPE RACINE — Isolation complète via .capacite-page Tous les sélecteurs ci-dessous sont préfixés .capacite-page → spécificité (0,2,x) > (0,1,x) de 00index.css et (0,0,x) des éléments HTML → Les styles du présent fichier l'emportent toujours dans la cascade ───────────────────────────────────────────────────────────────── */ /* Reset propre au scope */ .capacite-page *, .capacite-page *::before, .capacite-page *::after { box-sizing: border-box; } /* Corps — conflit #1 résolu index : color:var(--navy), pas de overflow-x ici : color:var(--n), overflow-x:hidden ajouté */ body.capacite-page { font-family: var(--F); background: var(--w); color: var(--n); -webkit-font-smoothing: antialiased; overflow-x: hidden; /* manquant dans 00index */ margin: 0; padding: 0; } /* Section générique — conflit #13 résolu index : section { padding:80px 0 } écrase les paddings spécifiques ici : on neutralise, chaque classe repose sur son propre padding */ .capacite-page section { padding: 0; } /* ───────────────────────────────────────────────────────────────── 02 · VARIABLES COULEUR PAR CAPACITÉ Chaque page définit --c et --cs sur Exemple GED : Exemple WA : Le CSS utilise var(--c) et var(--cs) partout — aucun fichier CSS spécifique par capacité. ───────────────────────────────────────────────────────────────── */ /* Palette par capacité (documentation) : 📁 GED --c:#3B82F6 --cs:rgba(59,130,246,.10) 📱 Mobilité --c:#10B981 --cs:rgba(16,185,129,.10) 💬 WhatsApp --c:#25D366 --cs:rgba(37,211,102,.10) 🟦 Teams --c:#6264A7 --cs:rgba(98,100,167,.10) 🧠 Knowledge Base --c:#8B5CF6 --cs:rgba(139,92,246,.10) 📣 Campagnes --c:#F59E0B --cs:rgba(245,158,11,.10) */ /* ───────────────────────────────────────────────────────────────── 03 · NAVIGATION PRINCIPALE Conflit #12 résolu : nav{z-index:100; border-bottom:2px solid var(--green)} → .capacite-page nav.nav a une spécificité (0,2,1) > nav{} (0,0,1) → z-index:200 et border:1px protégés ───────────────────────────────────────────────────────────────── */ .capacite-page nav.nav { position: sticky; top: 0; z-index: 200; /* 100 dans 00index → protégé */ background: rgba(26,34,46,.97); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(140,191,68,.15); /* 2px vert dans index → protégé */ margin: 0; padding: 0; } .capacite-page .nv { max-width: 1280px; margin: 0 auto; padding: 0 5%; height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .capacite-page .brd { display: flex; align-items: center; gap: 9px; text-decoration: none; } .capacite-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; } .capacite-page .btx { font-size: 14px; font-weight: 800; color: var(--w); } .capacite-page .btx span { color: var(--g); } /* Badge capacité dans la nav */ .capacite-page .cap-badge { display: inline-flex; align-items: center; gap: 7px; background: var(--cs); border: 1px solid var(--c); border-radius: 20px; padding: 4px 13px 4px 8px; font-size: 11px; font-weight: 700; color: var(--c); } /* Conflit #10 résolu : @keyframes renommé cp-pu (vs pu / pulse dans index) scale(.7) capacité vs scale(.75) index → noms différents, pas de conflit */ .capacite-page .cap-badge::before { content: ""; width: 6px; height: 6px; background: var(--c); border-radius: 50%; animation: cp-pu 2s infinite; } @keyframes cp-pu { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } } .capacite-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; font-family: var(--F); } .capacite-page .ncta:hover { background: var(--g2); } /* ───────────────────────────────────────────────────────────────── 04 · HÉRO Conflits #2, #3, #4, #5, #6 résolus : #2 .hero — min-height:88vh / display:flex / gradient index annulés #3 .hero::before — dots pattern vs glow radial index #4 .hero-in — grid 2col index annulé → block #5 .hero h1 em — var(--g) unifié + display:block préservé #6 .hero-btns — gap:12px + margin-top:28px protégés (gap:13px / pas de margin index) ───────────────────────────────────────────────────────────────── */ .capacite-page .hero { background: var(--n2); padding: 72px 0 60px; position: relative; overflow: hidden; /* Annule les valeurs de 00index.css */ min-height: unset; display: block; align-items: unset; } /* Dots pattern — conflit #3 index : glow radial (top:-10%, right:-5%, width:50%, height:120%) ici : pattern de points discrets couvrant tout le fond */ .capacite-page .hero::before { content: ""; position: absolute; inset: 0; /* annule top/right/width/height de index */ top: 0; right: 0; /* reset explicite */ width: 100%; height: 100%; background-image: radial-gradient(circle, rgba(140,191,68,.08) 1px, transparent 1px); background-size: 36px 36px; background: radial-gradient(circle, rgba(140,191,68,.08) 1px, transparent 1px) 0 0 / 36px 36px; pointer-events: none; } /* Glow coloré par capacité — ::after (non en conflit avec index) */ .capacite-page .hero::after { content: ""; position: absolute; top: -10%; right: -8%; width: 55%; height: 120%; background: radial-gradient(ellipse, var(--cs), transparent 65%); pointer-events: none; } /* hero-in — conflit #4 index : display:grid; grid-template-columns:1fr 400px ici : block, centré */ .capacite-page .hero-in { max-width: 1280px; margin: 0 auto; padding: 0 5%; position: relative; z-index: 1; display: block; /* annule grid de index */ grid-template-columns: unset; gap: unset; align-items: unset; } .capacite-page .hero-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; } .capacite-page .hero-tag::before { content: ""; width: 28px; height: 2px; background: var(--g); flex-shrink: 0; } .capacite-page .hero-ico { font-size: 56px; margin-bottom: 18px; display: block; filter: drop-shadow(0 4px 24px color-mix(in srgb, var(--c) 40%, transparent)); } /* h1 — annule hero h1 de index (font-size:clamp(30px,4.2vw,54px)) */ .capacite-page .hero h1 { font-size: clamp(30px, 4.5vw, 60px); font-weight: 800; line-height: 1.05; letter-spacing: -.8px; color: var(--w); margin-bottom: 12px; font-family: var(--F); } /* hero h1 em — conflit #5 index : color:var(--green) → valeur identique à var(--g), mais var différente ici : var(--g) + display:block ajouté */ .capacite-page .hero h1 em { color: var(--g); font-style: normal; display: block; /* absent dans index — protégé */ } /* .hero p de index (font-size:16px, max-width:540px) → neutralisé */ .capacite-page .hero p { font-size: inherit; color: inherit; line-height: inherit; margin-bottom: 0; max-width: unset; } .capacite-page .hero-tagline { font-size: clamp(15px, 1.8vw, 19px); font-weight: 600; color: rgba(255,255,255,.75); margin-bottom: 16px; max-width: 700px; line-height: 1.5; font-family: var(--F); } .capacite-page .hero-sub { font-size: clamp(13px, 1.4vw, 15px); color: rgba(255,255,255,.55); line-height: 1.72; max-width: 700px; margin-bottom: 36px; } /* hero-btns — conflit #6 index : gap:13px, pas de margin-top ici : gap:12px + margin-top:28px (intentionnels) */ .capacite-page .hero-btns { display: flex; gap: 12px; /* 13px dans index → protégé */ flex-wrap: wrap; margin-top: 0; /* hbtns est déjà séparé du .hero-sub par margin-bottom */ } /* ───────────────────────────────────────────────────────────────── 05 · KPIs HÉRO ───────────────────────────────────────────────────────────────── */ .capacite-page .hkpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 900px; margin-bottom: 36px; } .capacite-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; } .capacite-page .hkp::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2.5px; background: var(--c); /* Reset des valeurs héritées du ::before hero */ inset: unset; top: 0; left: 0; right: 0; width: auto; height: 2.5px; background-image: none; background-size: auto; pointer-events: auto; } .capacite-page .hkp-v { font-size: 24px; font-weight: 800; color: var(--c); line-height: 1; margin-bottom: 5px; letter-spacing: -1px; } .capacite-page .hkp-l { font-size: 10.5px; color: rgba(255,255,255,.45); font-weight: 500; line-height: 1.4; } /* ───────────────────────────────────────────────────────────────── 06 · BOUTONS ───────────────────────────────────────────────────────────────── */ .capacite-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; } .capacite-page .bp:hover { background: var(--g2); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(140,191,68,.30); } .capacite-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; } .capacite-page .bo:hover { color: var(--w); border-color: rgba(255,255,255,.60); } /* ───────────────────────────────────────────────────────────────── 07 · SECTION MODULES (6 modules, grille 3×2) Conflit #13 résolu : section{padding:80px 0} neutralisé en §01 ───────────────────────────────────────────────────────────────── */ .capacite-page .mod-sec { background: var(--xlt); padding: 80px 0; } .capacite-page .wrap { max-width: 1280px; margin: 0 auto; padding: 0 5%; } .capacite-page .mod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .capacite-page .mod-card { background: var(--w); border-radius: 14px; padding: 28px; border: 1px solid var(--lt); transition: all .25s; position: relative; overflow: hidden; } .capacite-page .mod-card:hover { box-shadow: 0 12px 36px rgba(36,46,61,.10); transform: translateY(-3px); border-color: rgba(140,191,68,.25); } .capacite-page .mod-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform .3s; /* Reset inset hérité du ::before global */ inset: unset; width: auto; background-image: none; background-size: auto; pointer-events: auto; } .capacite-page .mod-card:hover::before { transform: scaleX(1); } .capacite-page .mod-ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; margin-bottom: 16px; flex-shrink: 0; /* couleur définie inline via style="background:…;color:…" sur chaque carte */ } .capacite-page .mod-title { font-size: 16px; font-weight: 700; color: var(--n); margin-bottom: 8px; line-height: 1.3; } .capacite-page .mod-desc { font-size: 13px; color: var(--nlt); line-height: 1.65; } /* ───────────────────────────────────────────────────────────────── 08 · BANDEAU CHIFFRES CLÉS (fond vert) ───────────────────────────────────────────────────────────────── */ .capacite-page .ch-sec { background: var(--g); padding: 0; overflow: hidden; position: relative; } .capacite-page .ch-sec::before { position: absolute; right: -1%; top: 50%; transform: translateY(-50%); font-size: 260px; opacity: .08; pointer-events: none; line-height: 1; /* Le contenu (icône) est défini inline : style="content:'📁'" — pas possible en CSS On utilisera un pseudo-element avec font-size et opacity via la classe .ch-sec */ } .capacite-page .chg { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1280px; margin: 0 auto; padding: 0 5%; position: relative; z-index: 1; } .capacite-page .chi { padding: 42px 20px; text-align: center; position: relative; } .capacite-page .chi:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 20%; height: 60%; width: 1px; background: rgba(36,46,61,.12); } .capacite-page .chi .cv { font-size: 48px; font-weight: 800; color: var(--n); line-height: 1; letter-spacing: -2px; margin-bottom: 0; } .capacite-page .chi .cl { font-size: 13px; color: rgba(36,46,61,.65); font-weight: 600; margin-top: 8px; line-height: 1.4; } /* ───────────────────────────────────────────────────────────────── 09 · GRILLE SECTEURS (9 secteurs, fond navy) ───────────────────────────────────────────────────────────────── */ .capacite-page .sec-sec { background: var(--n); padding: 80px 0; } .capacite-page .sec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; } .capacite-page .sec-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; } .capacite-page .sec-item:hover { border-color: rgba(140,191,68,.25); background: rgba(140,191,68,.06); } .capacite-page .sec-ico { font-size: 24px; flex-shrink: 0; width: 44px; height: 44px; background: rgba(255,255,255,.06); border-radius: 10px; display: grid; place-items: center; } .capacite-page .sec-name { font-size: 14px; font-weight: 700; color: var(--w); margin-bottom: 6px; } .capacite-page .sec-desc { font-size: 12.5px; color: rgba(255,255,255,.50); line-height: 1.60; } /* ───────────────────────────────────────────────────────────────── 10 · GRILLE INTÉGRATIONS ───────────────────────────────────────────────────────────────── */ .capacite-page .int-sec { background: var(--xlt); padding: 80px 0; } .capacite-page .int-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; } .capacite-page .ic { background: var(--w); border-radius: 12px; padding: 24px; border: 1px solid var(--lt); display: flex; align-items: flex-start; gap: 14px; transition: all .25s; position: relative; overflow: hidden; } .capacite-page .ic::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; background: var(--c); height: auto; inset: unset; top: 0; left: 0; bottom: 0; right: auto; background-image: none; background-size: auto; } .capacite-page .ic:hover { box-shadow: 0 10px 32px rgba(36,46,61,.09); transform: translateY(-3px); } .capacite-page .ic-ico { font-size: 24px; flex-shrink: 0; width: 42px; height: 42px; background: var(--cs); border-radius: 10px; display: grid; place-items: center; } .capacite-page .ic-title { font-size: 15px; font-weight: 700; color: var(--n); margin-bottom: 5px; } .capacite-page .ic-desc { font-size: 12.5px; color: var(--nlt); line-height: 1.60; } /* ───────────────────────────────────────────────────────────────── 11 · SECTION DIFFÉRENCIATION ───────────────────────────────────────────────────────────────── */ .capacite-page .diff-sec { background: var(--w); padding: 80px 0; } .capacite-page .diff-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .capacite-page .dc { background: var(--n); border-radius: 14px; padding: 28px; transition: all .25s; position: relative; overflow: hidden; } .capacite-page .dc:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(36,46,61,.25); } .capacite-page .dc-ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; margin-bottom: 14px; /* couleur définie inline via style="background:…;color:…" */ } .capacite-page .dc-title { font-size: 15px; font-weight: 700; color: var(--w); margin-bottom: 8px; } .capacite-page .dc-desc { font-size: 12.5px; color: rgba(255,255,255,.55); line-height: 1.60; } /* ───────────────────────────────────────────────────────────────── 12 · SECTION CTA FINALE Conflit #8 résolu : .cta-in{grid 2col} index annulé → centré max-width ───────────────────────────────────────────────────────────────── */ .capacite-page .cta-sec { background: var(--n2); padding: 100px 0; position: relative; overflow: hidden; text-align: center; } .capacite-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; background-image: radial-gradient(ellipse at 50% 100%, rgba(140,191,68,.10), transparent 55%); background-size: auto; } /* cta-in centré — conflit #8 index : display:grid; grid-template-columns:1fr 400px; gap:52px ici : block centré avec max-width */ .capacite-page .cta-in { max-width: 720px; margin: 0 auto; padding: 0 5%; position: relative; z-index: 1; display: block; grid-template-columns: unset; gap: unset; align-items: unset; } .capacite-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); } .capacite-page .cta-in h2 span { color: var(--g); } .capacite-page .cta-in p { font-size: 16px; color: rgba(255,255,255,.55); line-height: 1.72; margin-bottom: 36px; max-width: unset; } .capacite-page .cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .capacite-page .cta-meta { display: flex; gap: 24px; justify-content: center; margin-top: 28px; flex-wrap: wrap; } .capacite-page .cta-meta a { font-size: 13px; color: rgba(255,255,255,.38); text-decoration: none; transition: color .2s; display: inline; } .capacite-page .cta-meta a:hover { color: var(--g); } /* ───────────────────────────────────────────────────────────────── 13 · FOOTER Conflits #9, #14, #15 résolus : #9 footer — bg:#121820 index → #0F1620, padding 44px → 32px, border vert → blanc #14 footer p,a — styles génériques de index neutralisés et redéfinis #15 footer h6 — style index neutralisé ───────────────────────────────────────────────────────────────── */ .capacite-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 et footer a de index — conflit #14 */ .capacite-page footer p, .capacite-page footer a { font-size: inherit; color: inherit; text-decoration: none; display: inline; margin-bottom: 0; line-height: inherit; } /* Neutraliser footer h6 de index — conflit #15 */ .capacite-page footer h6 { font-size: inherit; font-weight: inherit; color: inherit; letter-spacing: normal; text-transform: none; margin-bottom: 0; } .capacite-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; } .capacite-page .fb { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.30); display: inline; margin: 0; } .capacite-page .fb span { color: var(--g); } .capacite-page .fls { display: flex; gap: 16px; flex-wrap: wrap; } .capacite-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; } .capacite-page .fls a:hover { color: var(--g); } .capacite-page .fc2 { font-size: 12px; color: rgba(255,255,255,.18); } .capacite-page .fback { font-size: 12px; color: rgba(255,255,255,.28); text-decoration: none; display: inline; transition: color .2s; } .capacite-page .fback:hover { color: var(--g); } /* ───────────────────────────────────────────────────────────────── 14 · UTILITAIRES Conflit #7 résolu : .sh{clamp 3.2vw/40px; line-height:1.18; mb:16px} index → .capacite-page .sh a spécificité (0,2,0) > .sh (0,1,0) ───────────────────────────────────────────────────────────────── */ .capacite-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; } .capacite-page .ey::before { content: ""; width: 26px; height: 2px; background: var(--g); border-radius: 2px; flex-shrink: 0; } .capacite-page .ey.w { color: var(--g); } .capacite-page .ey.w::before { background: var(--g); } /* .sh — conflit #7 protégé */ .capacite-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 */ } .capacite-page .sh.w { color: var(--w); } .capacite-page .ss { font-size: 15px; color: var(--nlt); line-height: 1.70; max-width: 660px; margin-bottom: 48px; } .capacite-page .ss.w { color: rgba(255,255,255,.55); } /* ───────────────────────────────────────────────────────────────── 15 · ANIMATIONS & REVEAL Conflit #10 résolu : - @keyframes cp-pu au lieu de pu/pulse (scale .7 vs .75 dans index) - @keyframes cp-rv pour le reveal (nom unique — pas de conflit) ───────────────────────────────────────────────────────────────── */ /* Reveal au scroll */ .capacite-page .rv { opacity: 0; transform: translateY(22px); transition: opacity .55s ease, transform .55s ease; animation: none; /* annule toute animation héritée */ } .capacite-page .rv.in { opacity: 1; transform: translateY(0); } /* Délais cascade */ .capacite-page .d1 { transition-delay: .10s; } .capacite-page .d2 { transition-delay: .20s; } .capacite-page .d3 { transition-delay: .30s; } .capacite-page .d4 { transition-delay: .40s; } .capacite-page .d5 { transition-delay: .50s; } /* ───────────────────────────────────────────────────────────────── 16 · RESPONSIVE ───────────────────────────────────────────────────────────────── */ @media (max-width: 1100px) { .capacite-page .hkpis { grid-template-columns: repeat(2, 1fr); } .capacite-page .mod-grid { grid-template-columns: 1fr 1fr; } .capacite-page .sec-grid { grid-template-columns: 1fr 1fr; } .capacite-page .int-grid { grid-template-columns: 1fr 1fr; } .capacite-page .diff-grid { grid-template-columns: 1fr 1fr; } .capacite-page .chg { grid-template-columns: 1fr 1fr; } .capacite-page .chi:nth-child(2)::after { display: none; } } @media (max-width: 768px) { .capacite-page .mod-grid, .capacite-page .sec-grid, .capacite-page .int-grid, .capacite-page .diff-grid { grid-template-columns: 1fr; } .capacite-page .hkpis { grid-template-columns: 1fr 1fr; } .capacite-page .cta-btns { flex-direction: column; align-items: center; } }