/* ========================================================= G2SI — ÉTAPE 3 V2 Nouvelle feuille autonome pour la partie basse de l'index. IMPORTANT : - charger ce fichier EN DERNIER dans - ne pas conserver l'ancien style-etape3.css ========================================================= */ /* ========================================================= 1. RÉASSURANCE : 3 ÉLÉMENTS SUR UNE LIGNE ========================================================= */ body .section2.container { width: 100% !important; max-width: 1180px !important; margin: 70px auto !important; padding-right: 24px !important; padding-left: 24px !important; } /* On remplace totalement la grille Bootstrap pour cette zone */ body .section2 .row.picto-reassurce, body .section2 .row.point-cles { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 28px !important; width: 100% !important; margin: 0 !important; } /* Neutralisation complète des colonnes Bootstrap */ body .section2 .row.picto-reassurce > div, body .section2 .row.point-cles > div { float: none !important; flex: none !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* ---------- Première ligne : cartes sobres ---------- */ body .section2 .row.picto-reassurce > div { display: flex !important; min-height: 190px !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 30px 24px !important; background: #ffffff !important; border: 1px solid #e4e7ec !important; border-radius: 16px !important; box-shadow: 0 9px 24px rgba(30, 36, 50, 0.07) !important; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important; } body .section2 .row.picto-reassurce > div:hover { transform: translateY(-4px) !important; border-color: rgba(57, 52, 103, 0.18) !important; box-shadow: 0 14px 32px rgba(30, 36, 50, 0.11) !important; } body .section2 .picto-reassurce img { display: block !important; width: auto !important; max-width: 90px !important; height: auto !important; max-height: 78px !important; margin: 0 auto 20px !important; object-fit: contain !important; } body .section2 .picto-reassurce p { width: 100% !important; max-width: 300px !important; margin: 0 auto !important; color: #4f5560 !important; font-size: 1.05rem !important; line-height: 1.55 !important; text-align: center !important; } body .section2 .picto-reassurce strong { color: #292d39 !important; font-weight: 700 !important; } body .section2 .picto-reassurce .tiny-font { font-size: 0.9rem !important; } /* ---------- Séparateur ---------- */ body .section2 .trait { display: block !important; width: 72% !important; max-width: 720px !important; height: 1px !important; margin: 42px auto !important; background: #e2e5ea !important; border: 0 !important; } /* ========================================================= 2. CHIFFRES CLÉS : MÊME DISPOSITION, SANS CARTES ========================================================= */ body .section2 .row.point-cles { align-items: stretch !important; } body .section2 .row.point-cles > div { position: relative !important; display: flex !important; min-height: 165px !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 20px 28px !important; overflow: visible !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; } /* Supprime les liserés colorés et autres pseudo-éléments précédents */ body .section2 .row.point-cles > div::before { display: none !important; } /* Séparateurs verticaux discrets */ body .section2 .row.point-cles > div:not(:last-child)::after { content: "" !important; position: absolute !important; top: 18% !important; right: -14px !important; display: block !important; width: 1px !important; height: 64% !important; background: #e1e4e9 !important; } body .section2 .point-cles img { display: block !important; width: auto !important; max-width: 125px !important; height: auto !important; max-height: 84px !important; margin: 0 auto 15px !important; object-fit: contain !important; } body .section2 .point-cles p { width: 100% !important; max-width: 245px !important; margin: 0 auto !important; color: #4f5560 !important; font-size: 1.06rem !important; line-height: 1.5 !important; text-align: center !important; } /* Objectif qualité et Datadock côte à côte */ body .section2 .row.point-cles > div:last-child { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-content: center !important; justify-content: center !important; gap: 15px 20px !important; } body .section2 .row.point-cles > div:last-child img { display: inline-block !important; width: auto !important; max-width: 105px !important; height: auto !important; max-height: 82px !important; margin: 0 !important; } /* ========================================================= 3. LE GROUPE G2SI ========================================================= */ body .section3 { margin: 0 !important; padding: 72px 5% !important; background: #f6f7f9 !important; } body .section3 > .row { display: flex !important; flex-wrap: wrap !important; align-items: center !important; max-width: 1180px !important; margin-right: auto !important; margin-left: auto !important; } body .section3 .g2si-block { padding: 18px 36px !important; } body .section3 .g2si-block h3 { margin-bottom: 27px !important; color: #292d39 !important; font-size: clamp(1.85rem, 2.4vw, 2.4rem) !important; font-weight: 700 !important; letter-spacing: -0.02em !important; } body .section3 .g2si-block h3::after, body .entreprises h3::after { content: "" !important; display: block !important; width: 52px !important; height: 4px !important; margin-top: 15px !important; border-radius: 999px !important; background: #393467 !important; } body .section3 .g2si-block > ul { margin: 0 !important; padding: 0 !important; list-style: none !important; } body .section3 .g2si-block > ul > li { position: relative !important; margin-bottom: 13px !important; padding-left: 29px !important; color: #505661 !important; font-size: 1.05rem !important; line-height: 1.6 !important; } body .section3 .g2si-block > ul > li::before { content: "✓" !important; position: absolute !important; top: 0 !important; left: 0 !important; color: #393467 !important; font-weight: 800 !important; } body .section3 .carte { display: block !important; width: 100% !important; max-width: 610px !important; height: auto !important; margin: 0 auto !important; filter: drop-shadow(0 12px 22px rgba(29, 34, 47, 0.10)) !important; } /* ---------- Légende ---------- */ body .section3 .legende-carte { margin-top: 31px !important; } body .section3 .legende-carte p { margin: 0 0 12px !important; color: #343945 !important; font-size: 0.96rem !important; font-weight: 700 !important; } body .section3 .legende-carte ul { display: flex !important; flex-wrap: wrap !important; gap: 10px 18px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } body .section3 .legende-carte ul li { position: relative !important; margin: 0 !important; padding-left: 17px !important; color: #5a606b !important; font-size: 0.92rem !important; } body .section3 .legende-carte ul li::before { content: "" !important; position: absolute !important; top: 50% !important; left: 0 !important; width: 9px !important; height: 9px !important; margin: 0 !important; border-radius: 50% !important; background: #ec660a !important; transform: translateY(-50%) !important; } body .section3 .legende-carte ul li:nth-child(2)::before { background: #be216c !important; } body .section3 .legende-carte ul li:nth-child(3)::before { background: #c52018 !important; } body .section3 .legende-carte ul li:nth-child(4)::before { background: #93c022 !important; } /* ========================================================= 4. LOGOS CLIENTS ========================================================= */ body .entreprises { margin: 0 !important; padding: 70px 5% 76px !important; background: #ffffff !important; } body .entreprises > div { max-width: 1180px !important; margin-right: auto !important; margin-left: auto !important; } body .entreprises h3 { margin-bottom: 35px !important; color: #292d39 !important; font-size: clamp(1.85rem, 2.4vw, 2.4rem) !important; font-weight: 700 !important; letter-spacing: -0.02em !important; } body .entreprises h3::after { margin-right: auto !important; margin-left: auto !important; } body .entreprises .owl-carousel { padding: 20px 0 !important; border-top: 1px solid #eceef1 !important; border-bottom: 1px solid #eceef1 !important; } body .entreprises .owl-stage { display: flex !important; align-items: center !important; } body .entreprises .owl-item { display: flex !important; align-items: center !important; justify-content: center !important; } body .entreprises .item { display: flex !important; min-height: 126px !important; align-items: center !important; justify-content: center !important; padding: 18px 22px !important; } body .entreprises .item img { display: block !important; width: auto !important; max-width: 210px !important; height: auto !important; /* max-height: 82px !important;*/ margin: 0 auto !important; object-fit: contain !important; filter: grayscale(100%) !important; opacity: 0.78 !important; transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease !important; } body .entreprises .item:hover img { filter: grayscale(0%) !important; opacity: 1 !important; transform: scale(1.06) !important; } /* ========================================================= 5. RESPONSIVE ========================================================= */ @media (max-width: 767px) { body .section2.container { margin: 52px auto !important; padding-right: 16px !important; padding-left: 16px !important; } body .section2 .row.picto-reassurce, body .section2 .row.point-cles { grid-template-columns: 1fr !important; gap: 18px !important; } body .section2 .row.picto-reassurce > div { min-height: 175px !important; } body .section2 .row.point-cles > div { min-height: 140px !important; } body .section2 .row.point-cles > div:not(:last-child)::after { top: auto !important; right: 15% !important; bottom: -9px !important; width: 70% !important; height: 1px !important; } body .section2 .trait { width: 100% !important; margin: 28px auto 32px !important; } body .section3 { padding: 48px 16px !important; } body .section3 .g2si-block { margin-bottom: 31px !important; padding: 10px 12px !important; } body .entreprises { padding: 50px 16px 58px !important; } } /* ========================================================= Ils nous font confiance ========================================================= */ .entreprises{ padding:70px 0; } .entreprises h3{ margin-bottom:50px; } .logos-confiance{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:15px 20px; align-items:center; justify-items:center; width:100%; margin-top:10px; } .logos-confiance div{ min-height:75px; } .logos-confiance img{ max-height:90px; max-width:240px; width:auto; height:auto; opacity:.80; transition:.25s; filter:grayscale(100%); } .logos-confiance img:hover{ opacity:1; filter:none; transform:scale(1.05); } @media(max-width:768px){ .logos-confiance{ grid-template-columns:repeat(2,1fr); gap:25px; } }