:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-7a66763 *//* TABLEAU SOLUTIONS — HOVER MODERNE */ #sovematic-solutions-page .sove-table--clickable td{ padding:0; position:relative; transition: background-color .25s ease, box-shadow .25s ease; } #sovematic-solutions-page .sove-table--clickable td > a{ display:block; width:100%; height:100%; padding:1.1rem 1.2rem; color:inherit; text-decoration:none; transition: transform .25s cubic-bezier(.2,.8,.2,1), color .25s ease; } /* Cellule solution */ #sovematic-solutions-page .sove-table--clickable td:last-child > a{ position:relative; padding-right:3.4rem; } /* Flèche minimaliste */ #sovematic-solutions-page .sove-table--clickable td:last-child > a::after{ content:"→"; position:absolute; right:1.3rem; top:50%; transform:translate(-4px,-50%); color:var(--sove-grey); font-size:1.05rem; font-weight:700; opacity:.45; transition: transform .25s cubic-bezier(.2,.8,.2,1), opacity .25s ease, color .25s ease; } /* Effet général sur la ligne */ #sovematic-solutions-page .sove-table--clickable tbody tr{ transition:filter .25s ease; } #sovematic-solutions-page .sove-table--clickable tbody tr:hover td{ background: linear-gradient( 90deg, rgba(31,78,95,.045) 0%, rgba(31,78,95,.018) 55%, rgba(222,7,45,.025) 100% ); } /* Petit accent moderne à gauche */ #sovematic-solutions-page .sove-table--clickable tbody tr:hover td:first-child{ box-shadow:inset 3px 0 0 var(--sove-red); } /* Mouvement très léger du contenu */ #sovematic-solutions-page .sove-table--clickable tbody tr:hover td > a{ transform:translateX(3px); } /* La solution ressort davantage */ #sovematic-solutions-page .sove-table--clickable tbody tr:hover td:last-child strong{ color:var(--sove-red); } /* Flèche animée */ #sovematic-solutions-page .sove-table--clickable tbody tr:hover td:last-child > a::after{ transform:translate(2px,-50%); color:var(--sove-red); opacity:1; } /* Navigation clavier */ #sovematic-solutions-page .sove-table--clickable td > a:focus-visible{ outline:2px solid var(--sove-red); outline-offset:-3px; } /* Défilement doux vers les H2 */ #sovematic-solutions-page h2[id]{ scroll-margin-top:110px; } html{ scroll-behavior:smooth; }/* ========================================================= FIX CONTRÔLE D'ACCÈS TEXTE BLANC DANS LES BLOCS PÉTROLE ========================================================= */ @media (min-width: 1101px) { /* Bloc "Définissez qui peut entrer..." */ #sovematic-solutions-page .sove-section:nth-of-type(8) h2 + h3, #sovematic-solutions-page .sove-section:nth-of-type(8) h2 + h3 strong, #sovematic-solutions-page .sove-section:nth-of-type(8) h2 + h3 b { color: #fff !important; } /* Bloc "Qui ? Où ? Quand ? Avec quels droits ?" */ #sovematic-solutions-page .sove-section:nth-of-type(8) p:nth-of-type(4), #sovematic-solutions-page .sove-section:nth-of-type(8) p:nth-of-type(4) strong, #sovematic-solutions-page .sove-section:nth-of-type(8) p:nth-of-type(4) b, #sovematic-solutions-page .sove-section:nth-of-type(8) p:nth-of-type(4) a { color: #fff !important; } /* Sécurité : texte des cartes technologies */ #sovematic-solutions-page .sove-section:nth-of-type(8) ul li, #sovematic-solutions-page .sove-section:nth-of-type(8) ul li strong, #sovematic-solutions-page .sove-section:nth-of-type(8) ul li b, #sovematic-solutions-page .sove-section:nth-of-type(8) ul li a { color: #fff !important; } }/* ========================================================= FIX — "SIX SOLUTIONS, UN MÊME PRINCIPE" TEXTE BLANC DANS LE BLOC PÉTROLE ========================================================= */ @media (min-width: 1101px) { #sovematic-solutions-page > .sove-section:nth-of-type(9) p:nth-of-type(4), #sovematic-solutions-page > .sove-section:nth-of-type(9) p:nth-of-type(4) strong, #sovematic-solutions-page > .sove-section:nth-of-type(9) p:nth-of-type(4) b, #sovematic-solutions-page > .sove-section:nth-of-type(9) p:nth-of-type(4) a { color: #fff !important; } }/* ========================================================= FIX RÉEL — BLOC "C'EST SUFFISANT POUR COMMENCER" ========================================================= */ /* Titre gauche */ .sove-need-finder .sove-need-finder__resolution .sove-need-finder__resolution-copy h3, .sove-need-finder .sove-need-finder__resolution .sove-need-finder__resolution-copy h3 strong, .sove-need-finder .sove-need-finder__resolution .sove-need-finder__resolution-copy h3 b { color: #fff !important; } /* Texte explicatif gauche */ .sove-need-finder .sove-need-finder__resolution .sove-need-finder__resolution-copy > p, .sove-need-finder .sove-need-finder__resolution .sove-need-finder__resolution-copy > p strong, .sove-need-finder .sove-need-finder__resolution .sove-need-finder__resolution-copy > p b { color: rgba(255,255,255,.72) !important; } /* Titre de la carte droite */ .sove-need-finder .sove-need-finder__resolution .sove-need-finder__action strong, .sove-need-finder .sove-need-finder__resolution .sove-need-finder__action b { color: #fff !important; } /* Petit libellé "VOTRE POINT DE DÉPART" */ .sove-need-finder .sove-need-finder__resolution .sove-need-finder__action-label { color: rgba(255,255,255,.58) !important; } /* Pastilles du bas */ .sove-need-finder .sove-need-finder__resolution .sove-need-finder__criteria span, .sove-need-finder .sove-need-finder__resolution .sove-need-finder__criteria span strong, .sove-need-finder .sove-need-finder__resolution .sove-need-finder__criteria span b { color: #fff !important; } /* Bouton : toujours blanc */ .sove-need-finder .sove-need-finder__resolution .sove-need-finder__btn, .sove-need-finder .sove-need-finder__resolution .sove-need-finder__btn:visited, .sove-need-finder .sove-need-finder__resolution .sove-need-finder__btn:hover { color: #fff !important; }/* ========================================================= FIX HOVER — CTA FINAL SOVEMATIC ========================================================= */ /* Base commune */ html body .sove-final-cta .sove-final-cta__btn { transition: transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease !important; } /* ========================================================= BOUTON ROUGE ========================================================= */ html body .sove-final-cta .sove-final-cta__btn--primary, html body .sove-final-cta .sove-final-cta__btn--primary:visited { color: #fff !important; -webkit-text-fill-color: #fff !important; } /* hover propre */ html body .sove-final-cta .sove-final-cta__btn--primary:hover, html body .sove-final-cta .sove-final-cta__btn--primary:focus { color: #fff !important; -webkit-text-fill-color: #fff !important; background: linear-gradient( 135deg, #C9062A 0%, #A90524 100% ) !important; transform: translateY(-3px) !important; box-shadow: 0 15px 30px rgba(222,7,45,.28) !important; } /* flèche */ html body .sove-final-cta .sove-final-cta__btn--primary::after { color: #fff !important; -webkit-text-fill-color: #fff !important; transition: transform .22s ease !important; } html body .sove-final-cta .sove-final-cta__btn--primary:hover::after { transform: translateX(5px) !important; } /* ========================================================= BOUTON SECONDAIRE ========================================================= */ html body .sove-final-cta .sove-final-cta__btn--secondary, html body .sove-final-cta .sove-final-cta__btn--secondary:visited { color: #fff !important; -webkit-text-fill-color: #fff !important; } /* hover secondaire */ html body .sove-final-cta .sove-final-cta__btn--secondary:hover, html body .sove-final-cta .sove-final-cta__btn--secondary:focus { color: #fff !important; -webkit-text-fill-color: #fff !important; border-color: rgba(255,255,255,.32) !important; background: rgba(255,255,255,.09) !important; transform: translateY(-3px) !important; box-shadow: 0 12px 28px rgba(0,0,0,.18) !important; } /* flèche secondaire */ html body .sove-final-cta .sove-final-cta__btn--secondary::after { color: #fff !important; -webkit-text-fill-color: #fff !important; } html body .sove-final-cta .sove-final-cta__btn--secondary:hover::after { transform: translateX(5px) !important; } /* évite le changement de couleur imposé par le thème */ html body .sove-final-cta a:hover, html body .sove-final-cta a:focus { text-decoration: none !important; }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-57cf732 *//* ========================================================= RETOUR AU SOMMAIRE — BOUTON FLOTTANT ========================================================= */ html { scroll-behavior: smooth; } .sove-back-sommaire { position: fixed !important; right: 24px !important; bottom: 24px !important; z-index: 999999 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 56px !important; height: 56px !important; padding: 0 !important; margin: 0 !important; border: 1px solid rgba(255,255,255,.16) !important; border-radius: 50% !important; background: linear-gradient( 135deg, #DE072D, #B80627 ) !important; color: #fff !important; text-decoration: none !important; box-shadow: 0 14px 32px rgba(222,7,45,.30), 0 6px 18px rgba(17,18,20,.18) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translateY(16px) scale(.88) !important; transition: opacity .25s ease, transform .25s ease, visibility .25s ease !important; } /* visible */ .sove-back-sommaire.is-visible { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateY(0) scale(1) !important; } /* flèche */ .sove-back-sommaire span { display: block !important; margin: 0 !important; padding: 0 !important; color: #fff !important; font-size: 25px !important; line-height: 1 !important; font-weight: 700 !important; transform: translateY(-2px) !important; } /* hover desktop */ .sove-back-sommaire:hover { background: linear-gradient( 135deg, #C9062B, #9F051F ) !important; transform: translateY(-3px) scale(1.04) !important; box-shadow: 0 18px 38px rgba(222,7,45,.36), 0 8px 22px rgba(17,18,20,.20) !important; } /* ========================================================= TABLETTE ========================================================= */ @media (min-width: 768px) and (max-width: 1100px) { .sove-back-sommaire { right: 18px !important; bottom: 18px !important; width: 50px !important; height: 50px !important; } .sove-back-sommaire span { font-size: 22px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .sove-back-sommaire { right: 12px !important; bottom: 14px !important; width: 44px !important; height: 44px !important; box-shadow: 0 10px 24px rgba(222,7,45,.26), 0 5px 14px rgba(17,18,20,.15) !important; } .sove-back-sommaire span { font-size: 19px !important; transform: translateY(-1px) !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-8d4be4a *//* ========================================================= TABLETTE — CENTRER LES BOUTONS DU HERO 768px → 1100px ========================================================= */ @media (min-width: 768px) and (max-width: 1100px) { #sovematic-solutions-page .sove-hero .sove-actions { width: 100% !important; display: flex !important; justify-content: center !important; align-items: center !important; gap: 16px !important; margin: 28px auto 0 !important; } #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table tbody tr { text-align: center !important; align-items: center !important; } }/* ========================================================= TABLETTE — REWORK VISUEL SECTION 01 : LAVE-LINGE & SÈCHE-LINGE 768px → 1100px ========================================================= */ @media (min-width: 768px) and (max-width: 1100px) { /* ----------------------------------------------------- SECTION GLOBALE ----------------------------------------------------- */ #sovematic-solutions-page .sove-section:nth-of-type(3) { padding: 42px 0 !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) > .sove-container { display: flex !important; flex-direction: column !important; width: calc(100% - 32px) !important; max-width: 920px !important; margin: 0 auto !important; padding: 22px !important; border: 1px solid rgba(17,18,20,.07) !important; border-radius: 28px !important; background: radial-gradient(circle at top right, rgba(222,7,45,.05), transparent 28%), linear-gradient(145deg, #ffffff 0%, #f6f8f8 100%) !important; box-shadow: 0 20px 55px rgba(17,18,20,.08) !important; overflow: hidden !important; position: relative !important; } /* petit accent haut */ #sovematic-solutions-page .sove-section:nth-of-type(3) > .sove-container::before { content: ""; position: absolute; top: 0; left: 22px; width: 84px; height: 4px; border-radius: 0 0 999px 999px; background: linear-gradient(90deg, #DE072D, #1F4E5F); z-index: 3; } /* ----------------------------------------------------- ORDRE DES BLOCS ----------------------------------------------------- */ #sovematic-solutions-page .sove-section:nth-of-type(3) h2 { order: 1 !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-inline-image { order: 2 !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) h2 + h3 { order: 3 !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) h2 + h3 + p { order: 4 !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-container > p { order: 5 !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) h3:not(:first-of-type):not(:last-of-type) { order: 6 !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) ul { order: 7 !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-actions { order: 8 !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) h3:last-of-type { order: 9 !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-text-link { order: 10 !important; } /* ----------------------------------------------------- H2 ----------------------------------------------------- */ #sovematic-solutions-page .sove-section:nth-of-type(3) h2 { position: relative !important; margin: 4px 0 18px !important; padding-right: 72px !important; font-size: clamp(2.1rem, 5.7vw, 3.25rem) !important; line-height: .95 !important; letter-spacing: -.055em !important; text-wrap: balance !important; } /* on neutralise les anciens badges éventuels */ #sovematic-solutions-page .sove-section:nth-of-type(3) h2::before { content: none !important; display: none !important; } /* gros numéro graphique */ #sovematic-solutions-page .sove-section:nth-of-type(3) h2::after { content: "01"; position: absolute; right: 0; top: -4px; font-size: 54px; line-height: 1; font-weight: 950; letter-spacing: -.08em; color: rgba(31,78,95,.11); } /* ----------------------------------------------------- IMAGE HERO ----------------------------------------------------- */ #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-inline-image { position: relative !important; width: calc(100% + 44px) !important; height: 300px !important; margin: 0 -22px 0 !important; overflow: hidden !important; border: 0 !important; border-radius: 0 !important; background: #111214 !important; box-shadow: none !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-inline-image img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; } /* overlay image */ #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-inline-image::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(17,18,20,.56), transparent 48%); z-index: 1; pointer-events: none; } #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-inline-image figcaption { position: absolute !important; left: 16px !important; bottom: 16px !important; z-index: 2 !important; width: auto !important; max-width: calc(100% - 32px) !important; margin: 0 !important; padding: 8px 12px !important; border-radius: 999px !important; background: rgba(17,18,20,.62) !important; color: rgba(255,255,255,.88) !important; font-size: 11px !important; line-height: 1.3 !important; backdrop-filter: blur(10px); } /* ----------------------------------------------------- CARTOUCHE FLOTTANT ----------------------------------------------------- */ #sovematic-solutions-page .sove-section:nth-of-type(3) h2 + h3 { position: relative !important; z-index: 5 !important; margin: -24px 10px 16px !important; padding: 14px 16px 14px 18px !important; border: 1px solid rgba(17,18,20,.07) !important; border-left: 4px solid #DE072D !important; border-radius: 16px !important; background: rgba(255,255,255,.96) !important; color: #1F4E5F !important; font-size: 17px !important; line-height: 1.35 !important; box-shadow: 0 16px 38px rgba(17,18,20,.12) !important; } /* ----------------------------------------------------- BLOC MESSAGE CLÉ ----------------------------------------------------- */ #sovematic-solutions-page .sove-section:nth-of-type(3) h2 + h3 + p { margin: 0 0 16px !important; padding: 16px 18px !important; border-radius: 18px !important; background: linear-gradient(145deg, #111214 0%, #163E4D 100%) !important; color: rgba(255,255,255,.76) !important; box-shadow: 0 16px 34px rgba(17,18,20,.14) !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) h2 + h3 + p strong, #sovematic-solutions-page .sove-section:nth-of-type(3) h2 + h3 + p b { color: #fff !important; font-weight: 800 !important; } /* ----------------------------------------------------- PARAGRAPHES ----------------------------------------------------- */ #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-container > p { max-width: none !important; margin-bottom: 12px !important; font-size: 15px !important; line-height: 1.65 !important; color: #526069 !important; } /* on resserre un peu le rythme visuel */ #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-container > p + p { margin-top: 0 !important; } /* ----------------------------------------------------- TITRE "USAGES" ----------------------------------------------------- */ #sovematic-solutions-page .sove-section:nth-of-type(3) h3:not(:first-of-type):not(:last-of-type) { margin: 22px 0 12px !important; font-size: 21px !important; line-height: 1.25 !important; color: #111214 !important; position: relative !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) h3:not(:first-of-type):not(:last-of-type)::before { content: "POUR QUELS USAGES ?"; display: inline-block; margin-bottom: 10px; padding: 6px 10px; border-radius: 999px; background: rgba(222,7,45,.08); color: #DE072D; font-size: 10px; font-weight: 800; letter-spacing: .08em; } /* ----------------------------------------------------- LISTE EN CARTES ----------------------------------------------------- */ #sovematic-solutions-page .sove-section:nth-of-type(3) ul { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; width: 100% !important; max-width: none !important; margin: 0 0 20px !important; padding: 0 !important; list-style: none !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) ul li { position: relative !important; display: flex !important; align-items: center !important; min-height: 66px !important; margin: 0 !important; padding: 14px 16px 14px 46px !important; border: 1px solid rgba(17,18,20,.07) !important; border-radius: 18px !important; background: linear-gradient(145deg, #ffffff 0%, #f8fafb 100%) !important; color: #4D5961 !important; font-size: 14px !important; line-height: 1.45 !important; box-shadow: 0 10px 24px rgba(17,18,20,.05) !important; } /* check */ #sovematic-solutions-page .sove-section:nth-of-type(3) ul li::before { content: "✓" !important; position: absolute !important; left: 15px !important; top: 50% !important; transform: translateY(-50%) !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 20px !important; height: 20px !important; border-radius: 50% !important; background: rgba(222,7,45,.10) !important; color: #DE072D !important; font-size: 10px !important; font-weight: 900 !important; } /* petit accent bas */ #sovematic-solutions-page .sove-section:nth-of-type(3) ul li::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 3px; border-radius: 999px; background: linear-gradient(90deg, rgba(222,7,45,.75), rgba(31,78,95,.15)); } /* ----------------------------------------------------- CTA ----------------------------------------------------- */ #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-actions { width: 100% !important; margin: 0 0 20px !important; position: static !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-actions .sove-btn { width: 100% !important; justify-content: center !important; text-align: center !important; min-height: 54px !important; padding: 14px 20px !important; border-radius: 999px !important; font-size: 14px !important; box-shadow: 0 14px 30px rgba(222,7,45,.23) !important; } /* ----------------------------------------------------- ALLER PLUS LOIN ----------------------------------------------------- */ #sovematic-solutions-page .sove-section:nth-of-type(3) h3:last-of-type { margin: 0 0 12px !important; font-size: 20px !important; line-height: 1.2 !important; color: #111214 !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-text-link { display: inline-flex !important; align-items: center !important; width: auto !important; min-height: 38px !important; margin: 0 8px 8px 0 !important; padding: 8px 12px !important; border: 1px solid rgba(31,78,95,.11) !important; border-radius: 999px !important; background: rgba(31,78,95,.055) !important; color: #1F4E5F !important; font-size: 12px !important; text-decoration: none !important; white-space: nowrap !important; } } /* ========================================================= TABLETTE PLUS LARGE — 2 COLONNES POUR LES USAGES ========================================================= */ @media (min-width: 900px) and (max-width: 1100px) { #sovematic-solutions-page .sove-section:nth-of-type(3) ul { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }/* ========================================================= ========================================================= SOVEMATIC — TABLETTE VISUELLE V4 BUANDERIES → CONTRÔLE D'ACCÈS 768px → 1100px À COLLER TOUT À LA FIN ========================================================= ========================================================= */ @media (min-width:768px) and (max-width:1100px) { /* ========================================================= BASE COMMUNE — SECTIONS 02 → 06 ========================================================= */ #sovematic-solutions-page .sove-section:nth-of-type(n+4):nth-of-type(-n+8){ padding:44px 0 !important; } #sovematic-solutions-page .sove-section:nth-of-type(n+4):nth-of-type(-n+8) > .sove-container{ position:relative !important; display:flex !important; flex-direction:column !important; width:calc(100% - 36px) !important; max-width:960px !important; margin:0 auto !important; padding:26px !important; overflow:hidden !important; border:1px solid rgba(17,18,20,.075) !important; border-radius:30px !important; background: linear-gradient( 145deg, #fff, #F6F8F8 ) !important; box-shadow: 0 24px 60px rgba(17,18,20,.10) !important; } /* sections pétrole */ #sovematic-solutions-page .sove-section--petrol:nth-of-type(n+4):nth-of-type(-n+8) > .sove-container{ border-color:rgba(255,255,255,.11) !important; background: radial-gradient( circle at 100% 0, rgba(222,7,45,.16), transparent 30% ), linear-gradient( 145deg, #111214, #143744 ) !important; box-shadow: 0 28px 65px rgba(0,0,0,.23) !important; } /* ========================================================= TITRES + NUMÉROTATION ========================================================= */ #sovematic-solutions-page .sove-section:nth-of-type(n+4):nth-of-type(-n+8) h2{ order:1 !important; position:relative !important; width:100% !important; max-width:none !important; margin:3px 0 20px !important; padding-right:72px !important; font-size: clamp(2.3rem,5.7vw,3.35rem) !important; line-height:.97 !important; letter-spacing:-.055em !important; text-wrap:balance; } /* supprime anciens labels */ #sovematic-solutions-page .sove-section:nth-of-type(n+4):nth-of-type(-n+8) h2::before{ content:none !important; display:none !important; } /* numéro */ #sovematic-solutions-page .sove-section:nth-of-type(n+4):nth-of-type(-n+8) h2::after{ position:absolute; right:0; top:-5px; font-size:56px; line-height:1; font-weight:950; letter-spacing:-.08em; color:rgba(31,78,95,.10); } #sovematic-solutions-page .sove-section:nth-of-type(4) h2::after{ content:"02"; } #sovematic-solutions-page .sove-section:nth-of-type(5) h2::after{ content:"03"; } #sovematic-solutions-page .sove-section:nth-of-type(6) h2::after{ content:"04"; } #sovematic-solutions-page .sove-section:nth-of-type(7) h2::after{ content:"05"; } #sovematic-solutions-page .sove-section:nth-of-type(8) h2::after{ content:"06"; } #sovematic-solutions-page .sove-section--petrol h2::after{ color:rgba(255,255,255,.08) !important; } /* ========================================================= IMAGE COMMUNE juste sous le titre ========================================================= */ #sovematic-solutions-page .sove-section:nth-of-type(n+4):nth-of-type(-n+8) .sove-inline-image{ order:2 !important; position:relative !important; top:auto !important; left:auto !important; right:auto !important; width:calc(100% + 52px) !important; height:320px !important; margin: 0 -26px 0 !important; overflow:hidden !important; border:0 !important; border-radius:0 !important; background:#111214 !important; box-shadow:none !important; } #sovematic-solutions-page .sove-section:nth-of-type(n+4):nth-of-type(-n+8) .sove-inline-image img{ display:block !important; width:100% !important; height:100% !important; object-fit:cover !important; } /* overlay */ #sovematic-solutions-page .sove-section:nth-of-type(n+4):nth-of-type(-n+8) .sove-inline-image::after{ content:""; position:absolute; inset:0; background: linear-gradient( to top, rgba(17,18,20,.60), transparent 52% ); pointer-events:none; } /* légende */ #sovematic-solutions-page .sove-section:nth-of-type(n+4):nth-of-type(-n+8) .sove-inline-image figcaption{ position:absolute !important; z-index:3; left:17px !important; bottom:16px !important; width:auto !important; max-width:calc(100% - 34px) !important; margin:0 !important; padding:8px 11px !important; border:1px solid rgba(255,255,255,.14) !important; border-radius:999px !important; background:rgba(17,18,20,.60) !important; color:rgba(255,255,255,.88) !important; font-size:10.5px !important; backdrop-filter:blur(10px); } /* tout le contenu après image */ #sovematic-solutions-page .sove-section:nth-of-type(n+4):nth-of-type(-n+8) .sove-container > :not(h2):not(.sove-inline-image){ order:3 !important; } /* ========================================================= PREMIER H3 = CARTOUCHE FLOTTANT ========================================================= */ #sovematic-solutions-page .sove-section:nth-of-type(n+4):nth-of-type(-n+8) h2 + h3{ position:relative !important; z-index:5 !important; margin: -27px 8px 18px !important; padding: 16px 19px 16px 22px !important; border: 1px solid rgba(17,18,20,.07) !important; border-left: 4px solid #DE072D !important; border-radius: 17px !important; background: rgba(255,255,255,.97) !important; color: #1F4E5F !important; font-size: 18px !important; line-height: 1.3 !important; box-shadow: 0 16px 38px rgba(17,18,20,.12) !important; } /* pétrole */ #sovematic-solutions-page .sove-section--petrol h2 + h3{ border-color: rgba(255,255,255,.10) !important; border-left-color: #DE072D !important; background: linear-gradient( 145deg, #20272B, #183844 ) !important; color:#fff !important; box-shadow: 0 18px 40px rgba(0,0,0,.22) !important; } /* ========================================================= PREMIER ARGUMENT = BANDEAU PREMIUM ========================================================= */ #sovematic-solutions-page .sove-section:nth-of-type(n+4):nth-of-type(-n+8) h2 + h3 + p{ margin: 0 0 17px !important; padding: 17px 19px !important; border-radius: 18px !important; background: linear-gradient( 145deg, #111214, #173D4B ) !important; color: rgba(255,255,255,.78) !important; box-shadow: 0 15px 32px rgba(17,18,20,.13) !important; } #sovematic-solutions-page .sove-section:nth-of-type(n+4):nth-of-type(-n+8) h2 + h3 + p strong{ color: #fff !important; font-weight: 800 !important; } /* texte général */ #sovematic-solutions-page .sove-section:nth-of-type(n+4):nth-of-type(-n+8) .sove-container > p{ max-width:none !important; margin-bottom: 12px !important; font-size: 14.5px !important; line-height: 1.62 !important; } /* ========================================================= ========================================================= 02 — BUANDERIES STYLE : PROCESS / CHAÎNE DE PRODUCTION ========================================================= ========================================================= */ /* "Il faut réfléchir..." */ #sovematic-solutions-page .sove-section:nth-of-type(4) p:nth-of-type(3){ margin: 15px 0 7px !important; color: #DE072D !important; font-size: 10px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: .09em !important; text-transform: uppercase; } /* chaîne lavage */ #sovematic-solutions-page .sove-section:nth-of-type(4) p:nth-of-type(4){ padding: 18px 17px !important; border-radius: 17px !important; background: linear-gradient( 135deg, #143744, #1F4E5F ) !important; text-align: center !important; box-shadow: 0 14px 30px rgba(31,78,95,.18) !important; } #sovematic-solutions-page .sove-section:nth-of-type(4) p:nth-of-type(4) strong{ color:#fff !important; font-size: 15px !important; line-height: 1.65 !important; } /* "Puis la confronter..." */ #sovematic-solutions-page .sove-section:nth-of-type(4) p:nth-of-type(5){ margin: 17px 0 7px !important; color: #DE072D !important; font-size: 10px !important; font-weight: 900 !important; letter-spacing: .09em !important; text-transform: uppercase; } /* questions kilos / cycles */ #sovematic-solutions-page .sove-section:nth-of-type(4) p:nth-of-type(6){ padding: 16px 18px !important; border: 1px solid rgba(222,7,45,.12) !important; border-radius: 17px !important; background: rgba(222,7,45,.045) !important; } #sovematic-solutions-page .sove-section:nth-of-type(4) p:nth-of-type(6) strong{ color: #111214 !important; font-size: 14px !important; } /* titre critères */ #sovematic-solutions-page .sove-section:nth-of-type(4) h3:nth-of-type(2){ margin: 23px 0 12px !important; font-size: 20px !important; } /* critères = vraie grille */ #sovematic-solutions-page .sove-section:nth-of-type(4) ul{ display:grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 9px !important; padding: 0 !important; list-style: none !important; } #sovematic-solutions-page .sove-section:nth-of-type(4) ul li{ position:relative; min-height: 62px; margin: 0 !important; padding: 13px 13px 13px 41px !important; border: 1px solid rgba(17,18,20,.07) !important; border-radius: 15px !important; background: #fff !important; box-shadow: 0 8px 20px rgba(17,18,20,.045) !important; } #sovematic-solutions-page .sove-section:nth-of-type(4) ul li::before{ content:""; position:absolute; left:15px; top:50%; transform: translateY(-50%); width: 10px; height: 10px; border: 3px solid rgba(222,7,45,.22); border-radius: 50%; background: #DE072D; } /* conclusion */ #sovematic-solutions-page .sove-section:nth-of-type(4) p:last-of-type{ margin-top: 18px !important; padding: 16px 18px !important; border-left: 4px solid #DE072D !important; border-radius: 0 15px 15px 0 !important; background: rgba(31,78,95,.06) !important; color: #111214 !important; font-weight: 700 !important; } /* ========================================================= ========================================================= 03 — CENTRALE DE PAIEMENT STYLE : INTERFACE / PARCOURS UTILISATEUR ========================================================= ========================================================= */ /* intro parcours */ #sovematic-solutions-page .sove-section:nth-of-type(5) p:nth-of-type(2){ margin-bottom: 7px !important; color: rgba(255,255,255,.55) !important; font-size: 10px !important; font-weight: 900 !important; letter-spacing: .09em !important; text-transform: uppercase; } /* choisir → payer → laver → sécher */ #sovematic-solutions-page .sove-section:nth-of-type(5) p:nth-of-type(3){ position:relative; padding: 18px 15px !important; border: 1px solid rgba(255,255,255,.13) !important; border-radius: 18px !important; background: linear-gradient( 135deg, rgba(255,255,255,.10), rgba(255,255,255,.045) ) !important; text-align: center !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important; } #sovematic-solutions-page .sove-section:nth-of-type(5) p:nth-of-type(3) strong{ color:#fff !important; font-size: 17px !important; letter-spacing: .02em !important; } /* questions exploitant */ #sovematic-solutions-page .sove-section:nth-of-type(5) p:nth-of-type(4){ margin: 20px 0 9px !important; color: #ff4968 !important; font-size: 10px !important; font-weight: 900 !important; letter-spacing: .08em !important; text-transform: uppercase; } #sovematic-solutions-page .sove-section:nth-of-type(5) ul{ display:grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 9px !important; padding: 0 !important; list-style: none !important; } #sovematic-solutions-page .sove-section:nth-of-type(5) ul li{ position:relative; min-height: 68px; margin: 0 !important; padding: 14px 14px 14px 42px !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 15px !important; background: rgba(255,255,255,.055) !important; color: rgba(255,255,255,.82) !important; } #sovematic-solutions-page .sove-section:nth-of-type(5) ul li::before{ content:"?"; position:absolute; left:13px; top:50%; transform: translateY(-50%); display:flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius: 7px; background: rgba(222,7,45,.18); color: #ff4968; font-weight: 950; } /* POUR UTILISATEUR / EXPLOITANT */ #sovematic-solutions-page .sove-section:nth-of-type(5) h3:nth-of-type(2), #sovematic-solutions-page .sove-section:nth-of-type(5) h3:nth-of-type(3){ display:inline-flex !important; width:max-content !important; margin: 20px 0 6px !important; padding: 7px 10px !important; border-radius: 999px !important; background: rgba(222,7,45,.15) !important; color: #ff5572 !important; font-size: 10px !important; letter-spacing: .07em !important; text-transform: uppercase; } #sovematic-solutions-page .sove-section:nth-of-type(5) h3:nth-of-type(2) + p, #sovematic-solutions-page .sove-section:nth-of-type(5) h3:nth-of-type(3) + p{ padding: 14px 17px !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 15px !important; background: rgba(255,255,255,.055) !important; color: #fff !important; font-weight: 700 !important; } /* ========================================================= ========================================================= 04 — GESTION DES DOUCHES STYLE : AVANT / APRÈS ========================================================= ========================================================= */ #sovematic-solutions-page .sove-section:nth-of-type(6) h3:nth-of-type(2){ margin: 24px 0 14px !important; font-size: 21px !important; } /* "Passer de :" */ #sovematic-solutions-page .sove-section:nth-of-type(6) p:nth-of-type(6), #sovematic-solutions-page .sove-section:nth-of-type(6) p:nth-of-type(8){ width:max-content !important; margin: 12px 0 7px !important; padding: 6px 9px !important; border-radius: 999px !important; background: rgba(17,18,20,.06) !important; color: #65727A !important; font-size: 10px !important; line-height: 1 !important; font-weight: 900 !important; text-transform: uppercase; } /* AVANT */ #sovematic-solutions-page .sove-section:nth-of-type(6) p:nth-of-type(7){ position:relative; padding: 19px !important; border: 1px solid rgba(222,7,45,.12) !important; border-radius: 18px !important; background: linear-gradient( 135deg, rgba(222,7,45,.09), rgba(222,7,45,.035) ) !important; } #sovematic-solutions-page .sove-section:nth-of-type(6) p:nth-of-type(7)::before{ content:"AVANT"; display:block; margin-bottom: 8px; color: #DE072D; font-size: 9px; font-weight: 950; letter-spacing: .10em; } #sovematic-solutions-page .sove-section:nth-of-type(6) p:nth-of-type(7) strong{ color: #111214 !important; font-size: 16px !important; } /* APRÈS */ #sovematic-solutions-page .sove-section:nth-of-type(6) p:nth-of-type(9){ position:relative; padding: 19px !important; border-radius: 18px !important; background: linear-gradient( 135deg, #143744, #1F4E5F ) !important; box-shadow: 0 15px 32px rgba(31,78,95,.16) !important; } #sovematic-solutions-page .sove-section:nth-of-type(6) p:nth-of-type(9)::before{ content:"APRÈS"; display:block; margin-bottom: 8px; color: #ff4665; font-size: 9px; font-weight: 950; letter-spacing: .10em; } #sovematic-solutions-page .sove-section:nth-of-type(6) p:nth-of-type(9) strong{ color: #fff !important; font-size: 16px !important; } /* ========================================================= ========================================================= 05 — BARRIÈRES AUTOMATIQUES STYLE : INDUSTRIEL / ACCÈS ========================================================= ========================================================= */ /* "dimensionnée selon" */ #sovematic-solutions-page .sove-section:nth-of-type(7) p:nth-of-type(3){ margin: 18px 0 7px !important; color: #ff4968 !important; font-size: 10px !important; font-weight: 900 !important; letter-spacing: .09em !important; text-transform: uppercase; } /* critères dimensionnement */ #sovematic-solutions-page .sove-section:nth-of-type(7) p:nth-of-type(4){ padding: 18px !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 18px !important; background: linear-gradient( 135deg, rgba(255,255,255,.10), rgba(255,255,255,.04) ) !important; } #sovematic-solutions-page .sove-section:nth-of-type(7) p:nth-of-type(4) strong{ color:#fff !important; font-size: 15px !important; line-height: 1.6 !important; } /* Badge / Code / Plaque / Interphone */ #sovematic-solutions-page .sove-section:nth-of-type(7) p:nth-of-type(9){ position:relative; margin: 20px 0 !important; padding: 20px 16px !important; border: 1px solid rgba(222,7,45,.24) !important; border-radius: 18px !important; background: radial-gradient( circle at 0 50%, rgba(222,7,45,.18), transparent 28% ), rgba(0,0,0,.18) !important; text-align: center !important; } #sovematic-solutions-page .sove-section:nth-of-type(7) p:nth-of-type(9)::before{ content:"MODES D'IDENTIFICATION"; display:block; margin-bottom: 10px; color: #ff4c6b; font-size: 9px; font-weight: 950; letter-spacing: .10em; } #sovematic-solutions-page .sove-section:nth-of-type(7) p:nth-of-type(9) strong{ color: #fff !important; font-size: 16px !important; line-height: 1.7 !important; letter-spacing: .02em !important; } /* ========================================================= ========================================================= 06 — CONTRÔLE D'ACCÈS STYLE : MATRICE DE DÉCISION ========================================================= ========================================================= */ /* intro aux 4 questions */ #sovematic-solutions-page .sove-section:nth-of-type(8) p:nth-of-type(3){ margin: 18px 0 8px !important; color: #DE072D !important; font-size: 10px !important; font-weight: 900 !important; letter-spacing: .09em !important; text-transform: uppercase; } /* QUI ? OÙ ? QUAND ? */ #sovematic-solutions-page .sove-section:nth-of-type(8) p:nth-of-type(4){ padding: 21px 16px !important; border-radius: 19px !important; background: linear-gradient( 135deg, #111214, #143744 ) !important; text-align: center !important; box-shadow: 0 15px 32px rgba(17,18,20,.14) !important; } #sovematic-solutions-page .sove-section:nth-of-type(8) p:nth-of-type(4) strong{ color:#fff !important; font-size: clamp(17px,2.5vw,22px) !important; line-height: 1.5 !important; letter-spacing: .015em !important; } /* technologies */ #sovematic-solutions-page .sove-section:nth-of-type(8) p:nth-of-type(5){ margin: 21px 0 10px !important; color: #1F4E5F !important; font-weight: 800 !important; } #sovematic-solutions-page .sove-section:nth-of-type(8) ul{ display:grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 9px !important; padding: 0 !important; list-style: none !important; } #sovematic-solutions-page .sove-section:nth-of-type(8) ul li{ position:relative; min-height: 66px; margin: 0 !important; padding: 13px 14px 13px 43px !important; border: 1px solid rgba(31,78,95,.10) !important; border-radius: 15px !important; background: linear-gradient( 145deg, #fff, #F2F7F8 ) !important; color: #3E4B52 !important; box-shadow: 0 8px 20px rgba(17,18,20,.045) !important; } #sovematic-solutions-page .sove-section:nth-of-type(8) ul li::before{ content:""; position:absolute; left:15px; top:50%; transform: translateY(-50%); width: 17px; height: 17px; border-radius: 5px; background: linear-gradient( 135deg, #DE072D, #B80627 ); box-shadow: 0 6px 12px rgba(222,7,45,.18); } /* phrase obstacle / décision */ #sovematic-solutions-page .sove-section:nth-of-type(8) p:last-of-type{ margin-top: 20px !important; padding: 19px !important; border: 1px solid rgba(31,78,95,.10) !important; border-radius: 18px !important; background: linear-gradient( 135deg, rgba(31,78,95,.08), rgba(31,78,95,.025) ) !important; } #sovematic-solutions-page .sove-section:nth-of-type(8) p:last-of-type strong{ color: #111214 !important; font-size: 15px !important; } /* ========================================================= CTA DES 5 SECTIONS ========================================================= */ #sovematic-solutions-page .sove-section:nth-of-type(n+4):nth-of-type(-n+8) .sove-actions{ position:static !important; width:100% !important; margin: 22px 0 0 !important; } #sovematic-solutions-page .sove-section:nth-of-type(n+4):nth-of-type(-n+8) .sove-actions .sove-btn{ width:100% !important; min-height: 54px !important; padding: 14px 20px !important; justify-content: center !important; border-radius: 999px !important; text-align: center !important; font-size: 14px !important; box-shadow: 0 15px 32px rgba(222,7,45,.24) !important; } /* ========================================================= PÉTROLE — SÉCURITÉ COULEURS ========================================================= */ #sovematic-solutions-page .sove-section--petrol:nth-of-type(n+4):nth-of-type(-n+8) h2, #sovematic-solutions-page .sove-section--petrol:nth-of-type(n+4):nth-of-type(-n+8) strong{ color:#fff !important; } #sovematic-solutions-page .sove-section--petrol:nth-of-type(n+4):nth-of-type(-n+8) p{ color: rgba(255,255,255,.74) !important; } } /* ========================================================= TABLETTE PAYSAGE 920 → 1100px IMAGE ET CONTENU EN SPLIT, MAIS ON GARDE LES BLOCS GRAPHIQUES CI-DESSUS ========================================================= */ @media (min-width:920px) and (max-width:1100px){ #sovematic-solutions-page .sove-section:nth-of-type(n+4):nth-of-type(-n+8) > .sove-container{ display:grid !important; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr) !important; column-gap: 30px !important; align-items:start !important; } /* tout le contenu dans colonne droite */ #sovematic-solutions-page .sove-section:nth-of-type(n+4):nth-of-type(-n+8) .sove-container > :not(.sove-inline-image){ grid-column: 2 !important; } /* image verticale gauche */ #sovematic-solutions-page .sove-section:nth-of-type(n+4):nth-of-type(-n+8) .sove-inline-image{ grid-column: 1 !important; grid-row: 1 / span 40 !important; align-self: stretch !important; width: 100% !important; height: 100% !important; min-height: 540px !important; margin: 0 !important; border-radius: 23px !important; } /* plus besoin de chevauchement */ #sovematic-solutions-page .sove-section:nth-of-type(n+4):nth-of-type(-n+8) h2 + h3{ margin: 0 0 17px !important; } /* alternance : paiement + barrières image à droite */ #sovematic-solutions-page .sove-section:nth-of-type(5) .sove-inline-image, #sovematic-solutions-page .sove-section:nth-of-type(7) .sove-inline-image{ grid-column: 2 !important; } #sovematic-solutions-page .sove-section:nth-of-type(5) .sove-container > :not(.sove-inline-image), #sovematic-solutions-page .sove-section:nth-of-type(7) .sove-container > :not(.sove-inline-image){ grid-column: 1 !important; } }/* ========================================================= TABLETTE — CENTRER LE TITRE "QUELLE SOLUTION..." 768px → 1100px ========================================================= */ @media (min-width: 768px) and (max-width: 1100px) { #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-container > h2 { text-align: center !important; margin-left: auto !important; margin-right: auto !important; max-width: 900px !important; text-wrap: balance; } }/* ========================================================= TABLETTE — CENTRAGE COMPLET LAVE-LINGE & SÈCHE-LINGE 768px → 1100px ========================================================= */ @media (min-width: 768px) and (max-width: 1100px) { /* ===================================================== TITRE PRINCIPAL ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(3) h2 { text-align: center !important; margin-left: auto !important; margin-right: auto !important; padding-left: 65px !important; padding-right: 65px !important; max-width: 900px !important; } /* numéro 01 : on le repositionne en déco centrée */ #sovematic-solutions-page .sove-section:nth-of-type(3) h2::after { position: relative !important; display: block !important; top: auto !important; right: auto !important; width: max-content !important; margin: 14px auto 0 !important; font-size: 42px !important; text-align: center !important; } /* ===================================================== SOUS-TITRES ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(3) h3 { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } /* cartouche principal */ #sovematic-solutions-page .sove-section:nth-of-type(3) h2 + h3 { text-align: center !important; padding-left: 20px !important; padding-right: 20px !important; } /* ===================================================== PARAGRAPHES ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-container > p { margin-left: auto !important; margin-right: auto !important; text-align: center !important; } /* ===================================================== TITRE "CETTE SOLUTION EST..." ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(3) h3:not(:first-of-type):not(:last-of-type) { text-align: center !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) h3:not(:first-of-type):not(:last-of-type)::before { display: table !important; margin: 0 auto 12px !important; text-align: center !important; } /* ===================================================== CARTES USAGES ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(3) ul { width: 100% !important; margin-left: auto !important; margin-right: auto !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) ul li { display: flex !important; align-items: center !important; justify-content: center !important; gap: 11px !important; padding: 16px 22px !important; text-align: center !important; } /* coche intégrée dans le centrage */ #sovematic-solutions-page .sove-section:nth-of-type(3) ul li::before { position: static !important; flex: 0 0 20px !important; transform: none !important; margin: 0 !important; } /* barre décorative centrée */ #sovematic-solutions-page .sove-section:nth-of-type(3) ul li::after { left: 12% !important; right: 12% !important; } /* ===================================================== CTA PRINCIPAL ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-actions { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-actions .sove-btn { width: auto !important; min-width: 300px !important; justify-content: center !important; text-align: center !important; } /* ===================================================== "ALLER PLUS LOIN" ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(3) h3:last-of-type { width: 100% !important; margin: 28px auto 16px !important; text-align: center !important; } /* ===================================================== 3 LIENS ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-text-link { align-self: center !important; display: flex !important; align-items: center !important; justify-content: center !important; width: min(100%, 680px) !important; min-height: 52px !important; margin: 0 auto 10px !important; padding: 12px 20px !important; text-align: center !important; } }/* ========================================================= TABLETTE — RESTAURER LES PARAGRAPHES À GAUCHE LAVE-LINGE & SÈCHE-LINGE ========================================================= */ @media (min-width: 768px) and (max-width: 1100px) { #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-container > p { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; } /* bloc d'accroche principal également aligné à gauche */ #sovematic-solutions-page .sove-section:nth-of-type(3) h2 + h3 + p { text-align: left !important; } } #sovematic-solutions-page .sove-section:nth-of-type(4) ul li { text-align: left !important; } #sovematic-solutions-page .sove-section:nth-of-type(4) ul li::before { left: 15px !important; top: 50% !important; transform: translateY(-50%) !important; } /* ========================================================= TABLETTE — BUANDERIES CENTRER LE BLOC "LE DIMENSIONNEMENT..." 768px → 1100px ========================================================= */ @media (min-width: 768px) and (max-width: 1100px) { /* ===================================================== TITRE "Le dimensionnement peut notamment..." ===================================================== */ #sovematic-solutions-page #buanderies-professionnelles ~ h3 { width: 100% !important; max-width: none !important; margin: 28px auto 22px !important; text-align: center !important; } /* ===================================================== GRILLE SITUÉE JUSTE APRÈS LE H3 ===================================================== */ #sovematic-solutions-page #buanderies-professionnelles ~ h3 + ul { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; width: 100% !important; max-width: 1000px !important; margin: 0 auto 26px !important; padding: 0 !important; list-style: none !important; } /* ===================================================== CHAQUE CARTE ===================================================== */ #sovematic-solutions-page #buanderies-professionnelles ~ h3 + ul > li { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 13px !important; width: 100% !important; min-height: 86px !important; margin: 0 !important; padding: 18px 22px !important; text-align: center !important; border: 1px solid rgba(17, 18, 20, 0.07) !important; border-radius: 20px !important; background: #fff !important; box-shadow: 0 12px 28px rgba(17, 18, 20, 0.055) !important; } /* ===================================================== POINT ROUGE ===================================================== */ #sovematic-solutions-page #buanderies-professionnelles ~ h3 + ul > li::before { content: "" !important; position: static !important; flex: 0 0 12px !important; width: 12px !important; height: 12px !important; margin: 0 !important; transform: none !important; border: 0 !important; border-radius: 50% !important; background: #DE072D !important; box-shadow: 0 0 0 6px rgba(222, 7, 45, 0.075) !important; } }/* ========================================================= TABLETTE — FIX DÉFINITIF TITRE BUANDERIES 768px → 1100px ========================================================= */ @media (min-width: 768px) and (max-width: 1100px) { html body #sovematic-solutions-page h2#buanderies-professionnelles { /* prend réellement toute la largeur */ display: block !important; width: 100% !important; max-width: none !important; /* si un ancien layout grid est encore actif */ grid-column: 1 / -1 !important; grid-row: auto !important; /* si un ancien layout flex est encore actif */ align-self: stretch !important; /* CENTRAGE */ margin: 0 auto 28px !important; padding: 0 30px !important; text-align: center !important; /* titre */ font-size: clamp(2.4rem, 5.4vw, 3.5rem) !important; line-height: 1 !important; text-wrap: balance !important; } /* supprime définitivement le 02 + tout ancien badge */ html body #sovematic-solutions-page h2#buanderies-professionnelles::before, html body #sovematic-solutions-page h2#buanderies-professionnelles::after { content: none !important; display: none !important; position: static !important; } }/* ========================================================= TABLETTE — CENTRER "CENTRALES DE PAIEMENT" 768px → 1100px ========================================================= */ @media (min-width: 768px) and (max-width: 1100px) { html body #sovematic-solutions-page h2#centrales-paiement { display: block !important; width: 100% !important; max-width: none !important; grid-column: 1 / -1 !important; grid-row: auto !important; align-self: stretch !important; margin: 0 auto 28px !important; padding: 0 30px !important; text-align: center !important; font-size: clamp(2.4rem, 5.4vw, 3.5rem) !important; line-height: 1 !important; text-wrap: balance !important; } /* suppression du 03 + anciens pseudo-éléments */ html body #sovematic-solutions-page h2#centrales-paiement::before, html body #sovematic-solutions-page h2#centrales-paiement::after { content: none !important; display: none !important; } }/* ========================================================= TABLETTE — CENTRALES DE PAIEMENT CENTRER "POUR L’UTILISATEUR" / "POUR L’EXPLOITANT" + LE TEXTE DES ENCADRÉS 768px → 1100px ========================================================= */ @media (min-width: 768px) and (max-width: 1100px) { /* ===================================================== PETITES PASTILLES "POUR L’UTILISATEUR" "POUR L’EXPLOITANT" ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(5) h3:nth-of-type(2), #sovematic-solutions-page .sove-section:nth-of-type(5) h3:nth-of-type(3) { display: table !important; width: auto !important; max-width: max-content !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; } /* ===================================================== GRANDS ENCADRÉS SOUS LES PASTILLES ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(5) h3:nth-of-type(2) + p, #sovematic-solutions-page .sove-section:nth-of-type(5) h3:nth-of-type(3) + p { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; padding-left: 28px !important; padding-right: 28px !important; text-align: center !important; } }/* ========================================================= TABLETTE — CENTRER "GESTION DES DOUCHES" 768px → 1100px ========================================================= */ @media (min-width: 768px) and (max-width: 1100px) { html body #sovematic-solutions-page h2#gestion-douches { display: block !important; width: 100% !important; max-width: none !important; grid-column: 1 / -1 !important; grid-row: auto !important; align-self: stretch !important; margin: 0 auto 28px !important; padding: 0 30px !important; text-align: center !important; font-size: clamp(2.4rem, 5.4vw, 3.5rem) !important; line-height: 1 !important; text-wrap: balance !important; } /* suppression du 04 + anciens pseudo-éléments */ html body #sovematic-solutions-page h2#gestion-douches::before, html body #sovematic-solutions-page h2#gestion-douches::after { content: none !important; display: none !important; } }/* ========================================================= TABLETTE — CENTRER LE BLOC "L'OBJECTIF" GESTION DES DOUCHES 768px → 1100px ========================================================= */ @media (min-width: 768px) and (max-width: 1100px) { /* titre "L'objectif" */ #sovematic-solutions-page .sove-section:nth-of-type(6) h3:nth-of-type(2) { width: 100% !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; } /* "PASSER DE :" et "À :" */ #sovematic-solutions-page .sove-section:nth-of-type(6) p:nth-of-type(6), #sovematic-solutions-page .sove-section:nth-of-type(6) p:nth-of-type(8) { width: max-content !important; margin: 14px auto 10px !important; text-align: center !important; } /* cartes AVANT / APRÈS */ #sovematic-solutions-page .sove-section:nth-of-type(6) p:nth-of-type(7), #sovematic-solutions-page .sove-section:nth-of-type(6) p:nth-of-type(9) { width: 100% !important; max-width: 900px !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; } /* libellés AVANT / APRÈS */ #sovematic-solutions-page .sove-section:nth-of-type(6) p:nth-of-type(7)::before, #sovematic-solutions-page .sove-section:nth-of-type(6) p:nth-of-type(9)::before { text-align: center !important; } /* texte fort dans les cartes */ #sovematic-solutions-page .sove-section:nth-of-type(6) p:nth-of-type(7) strong, #sovematic-solutions-page .sove-section:nth-of-type(6) p:nth-of-type(9) strong { display: block !important; text-align: center !important; } }/* ========================================================= TABLETTE — CENTRER "BARRIÈRES AUTOMATIQUES" 768px → 1100px ========================================================= */ @media (min-width: 768px) and (max-width: 1100px) { html body #sovematic-solutions-page h2#barrieres-automatiques { display: block !important; width: 100% !important; max-width: none !important; grid-column: 1 / -1 !important; grid-row: auto !important; align-self: stretch !important; margin: 0 auto 28px !important; padding: 0 30px !important; text-align: center !important; font-size: clamp(2.4rem, 5.4vw, 3.5rem) !important; line-height: 1 !important; text-wrap: balance !important; } /* suppression du 05 + anciens pseudo-éléments */ html body #sovematic-solutions-page h2#barrieres-automatiques::before, html body #sovematic-solutions-page h2#barrieres-automatiques::after { content: none !important; display: none !important; } }/* ========================================================= TABLETTE — CONTRÔLE D’ACCÈS CENTRER LE TITRE ========================================================= */ @media (min-width: 768px) and (max-width: 1100px) { #sovematic-solutions-page #controle-acces { width: 100% !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; } }/* ========================================================= TABLETTE — PLUSIEURS SOLUTIONS PEUVENT FONCTIONNER ENSEMBLE CENTRER "CAMPING" ========================================================= */ @media (min-width: 768px) and (max-width: 1100px) { html body #sovematic-solutions-page .sove-camping-combo .sove-ecosystem-top { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; } html body #sovematic-solutions-page .sove-camping-combo .sove-ecosystem-top h3 { width: fit-content !important; max-width: max-content !important; margin-left: auto !important; margin-right: auto !important; align-self: center !important; text-align: center !important; } }/* ========================================================= TABLETTE — RÉSIDENCE CENTRER LA CARTE "LAVERIE" 768px → 1100px ========================================================= */ @media (min-width: 768px) and (max-width: 1100px) { /* carte */ .sove-residence-example .sove-ecosystem-residence .sove-ecosystem-card { text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; max-width: 520px !important; margin-left: auto !important; margin-right: auto !important; padding: 28px 28px 30px !important; } /* numéro 01 */ .sove-residence-example .sove-ecosystem-card .sove-ecosystem-number { display: flex !important; margin: 0 auto 20px !important; align-items: center !important; justify-content: center !important; } /* titre "Laverie" */ .sove-residence-example .sove-ecosystem-card h5 { width: 100% !important; margin: 0 auto 20px !important; text-align: center !important; } /* liste */ .sove-residence-example .sove-ecosystem-card ul { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; margin: 0 auto !important; padding: 0 !important; } /* chaque ligne */ .sove-residence-example .sove-ecosystem-card ul li { display: flex !important; align-items: center !important; justify-content: center !important; gap: 11px !important; width: auto !important; margin: 0 auto 12px !important; padding: 0 !important; text-align: center !important; } /* puce rouge intégrée au centrage */ .sove-residence-example .sove-ecosystem-card ul li::before { content: "" !important; position: static !important; flex: 0 0 9px !important; width: 9px !important; height: 9px !important; margin: 0 !important; transform: none !important; border-radius: 50% !important; background: #DE072D !important; box-shadow: 0 0 0 5px rgba(222,7,45,.12) !important; } }/* ========================================================= TABLETTE — CENTRER LE CTA PARKING / SITES CONTRÔLÉS 768px → 1100px ========================================================= */ @media (min-width: 768px) and (max-width: 1100px) { #sovematic-solutions-page .sove-parking-example + .sove-actions, #sovematic-solutions-page .sove-parking-summary + .sove-actions { width: 100% !important; display: flex !important; justify-content: center !important; align-items: center !important; margin: 28px auto 0 !important; text-align: center !important; } #sovematic-solutions-page .sove-parking-example + .sove-actions .sove-btn, #sovematic-solutions-page .sove-parking-summary + .sove-actions .sove-btn { width: auto !important; min-width: 420px !important; max-width: 720px !important; margin: 0 auto !important; justify-content: center !important; text-align: center !important; } }/* ========================================================= TABLETTE — MÉTHODE SOVEMATIC CENTRER L'ÉTAPE 03 "DIMENSIONNER LA SOLUTION" 768px → 1100px ========================================================= */ @media (min-width: 768px) and (max-width: 1100px) { /* Ensemble 03 + titre */ .sove-method-premium .sove-method-card-premium--main .sove-method-card-premium__head { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; gap: 14px !important; text-align: center !important; } /* Numéro 03 */ .sove-method-premium .sove-method-card-premium--main .sove-method-card-premium__number { margin: 0 auto !important; align-self: center !important; } /* Bloc texte */ .sove-method-premium .sove-method-card-premium--main .sove-method-card-premium__title { width: 100% !important; text-align: center !important; } /* "LE CŒUR DE L'ÉTUDE" */ .sove-method-premium .sove-method-card-premium--main .sove-method-card-premium__title small { display: block !important; width: 100% !important; margin: 0 auto 8px !important; text-align: center !important; } /* "Dimensionner la solution" */ .sove-method-premium .sove-method-card-premium--main .sove-method-card-premium__title h3 { width: 100% !important; margin: 0 auto !important; text-align: center !important; } }/* ========================================================= TABLETTE — CENTRER LES 4 PREUVES "DES PREUVES PLUTÔT QUE DES PROMESSES" 768px → 1100px ========================================================= */ @media (min-width: 768px) and (max-width: 1100px) { /* grille */ .sove-proof-section .sove-proof-stats { align-items: stretch !important; } /* cartes */ .sove-proof-section .sove-proof-stat { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; min-height: 220px !important; padding: 26px 24px !important; text-align: center !important; } /* DEPUIS / IMPLANTATIONS / etc. */ .sove-proof-section .sove-proof-stat__label { width: 100% !important; margin: 0 auto 16px !important; text-align: center !important; } /* 1998 / 3 / ≈80 / 4 étapes */ .sove-proof-section .sove-proof-stat strong { width: 100% !important; margin: 0 auto 10px !important; text-align: center !important; } /* descriptions */ .sove-proof-section .sove-proof-stat p { width: 100% !important; max-width: 360px !important; margin: 0 auto !important; text-align: center !important; line-height: 1.55 !important; } }/* ========================================================= TABLETTE — "DES PREUVES PLUTÔT QUE DES PROMESSES" CENTRER LE BLOC "NOTRE MÉTIER" + 4 PREUVES 768px → 1100px ========================================================= */ @media (min-width: 768px) and (max-width: 1100px) { /* ===================================================== PANNEAU GLOBAL ===================================================== */ .sove-proof-section .sove-proof-panel { text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; } /* ===================================================== BADGE "NOTRE MÉTIER" ===================================================== */ .sove-proof-section .sove-proof-panel__badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: max-content !important; margin: 0 auto 20px !important; text-align: center !important; } /* ===================================================== TITRE ===================================================== */ .sove-proof-section .sove-proof-panel > h3 { width: 100% !important; max-width: 760px !important; margin: 0 auto 16px !important; text-align: center !important; text-wrap: balance; } /* ===================================================== TEXTE INTRO ===================================================== */ .sove-proof-section .sove-proof-panel > p { width: 100% !important; max-width: 720px !important; margin: 0 auto 26px !important; text-align: center !important; } /* ===================================================== LISTE DES 4 PREUVES ===================================================== */ .sove-proof-section .sove-proof-list { width: 100% !important; display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; } /* ===================================================== CHAQUE CARTE ===================================================== */ .sove-proof-section .sove-proof-list__item { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 14px !important; width: 100% !important; min-height: 150px !important; padding: 22px 24px !important; text-align: center !important; } /* ===================================================== NUMÉROS 01 / 02 / 03 / 04 ===================================================== */ .sove-proof-section .sove-proof-list__number { margin: 0 auto !important; align-self: center !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* ===================================================== CONTENU ===================================================== */ .sove-proof-section .sove-proof-list__content { width: 100% !important; text-align: center !important; } .sove-proof-section .sove-proof-list__content strong { display: block !important; width: 100% !important; margin: 0 auto 8px !important; text-align: center !important; } .sove-proof-section .sove-proof-list__content p { width: 100% !important; max-width: 680px !important; margin: 0 auto !important; text-align: center !important; } }/* ========================================================= TABLETTE — "VOTRE PROJET COMMENCE ICI" CENTRAGE DU BLOC BESOIN 768px → 1100px ========================================================= */ @media (min-width: 768px) and (max-width: 1100px) { /* ===================================================== EN-TÊTE ===================================================== */ .sove-final-cta .sove-final-cta__needs-head { width: 100% !important; text-align: center !important; } .sove-final-cta .sove-final-cta__needs-head > span { display: block !important; width: max-content !important; margin: 0 auto 12px !important; text-align: center !important; } .sove-final-cta .sove-final-cta__needs-head h3 { width: 100% !important; max-width: 780px !important; margin: 0 auto 14px !important; text-align: center !important; text-wrap: balance; } .sove-final-cta .sove-final-cta__needs-head p { width: 100% !important; max-width: 720px !important; margin: 0 auto 28px !important; text-align: center !important; } /* ===================================================== LISTE DES 5 BESOINS ===================================================== */ .sove-final-cta .sove-final-cta__need-list { width: 100% !important; display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; margin-left: auto !important; margin-right: auto !important; } /* ===================================================== CHAQUE CARTE ===================================================== */ .sove-final-cta .sove-final-cta__need { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 10px !important; width: 100% !important; min-height: 150px !important; padding: 20px 24px !important; text-align: center !important; } /* ===================================================== NUMÉROS 01 → 05 ===================================================== */ .sove-final-cta .sove-final-cta__need-number { margin: 0 auto 4px !important; align-self: center !important; } /* ===================================================== CONTENU TEXTE ===================================================== */ .sove-final-cta .sove-final-cta__need > div { width: 100% !important; text-align: center !important; } .sove-final-cta .sove-final-cta__need strong { display: block !important; width: 100% !important; margin: 0 auto 5px !important; text-align: center !important; } .sove-final-cta .sove-final-cta__need small { display: block !important; width: 100% !important; margin: 0 auto !important; text-align: center !important; } /* ===================================================== FLÈCHE ===================================================== */ .sove-final-cta .sove-final-cta__need-arrow { position: static !important; display: block !important; margin: 4px auto 0 !important; transform: none !important; text-align: center !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-1180f96 *//* ========================================================= MOBILE — HERO SOVEMATIC VERSION PROPRE / CENTRÉE / RESPONSIVE 0 → 767px ========================================================= */ @media (max-width: 767px) { /* ===================================================== HERO GLOBAL ===================================================== */ #sovematic-solutions-page .sove-hero { min-height: 0 !important; padding: 42px 0 46px !important; overflow: hidden !important; } /* ===================================================== CONTAINER ===================================================== */ #sovematic-solutions-page .sove-hero .sove-container { position: relative !important; top: auto !important; left: auto !important; right: auto !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 0 !important; width: calc(100% - 32px) !important; max-width: 560px !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; } /* ===================================================== COLONNE TEXTE ===================================================== */ #sovematic-solutions-page .sove-hero .sove-container > div:first-child { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; max-width: 100% !important; margin: 0 auto !important; text-align: center !important; } /* ===================================================== H1 — PLUS PETIT ET PLUS RESPIRANT ===================================================== */ #sovematic-solutions-page .sove-hero h1 { width: 100% !important; max-width: 500px !important; margin: 0 auto 20px !important; padding: 0 !important; font-size: clamp(2rem, 9vw, 2.65rem) !important; line-height: .98 !important; letter-spacing: -.045em !important; text-align: center !important; text-wrap: balance !important; overflow-wrap: normal !important; word-break: normal !important; } /* ===================================================== INTRO — PLUS PETITE ===================================================== */ #sovematic-solutions-page .sove-hero .sove-container > div:first-child > p { width: 100% !important; max-width: 470px !important; margin: 0 auto 13px !important; padding: 0 !important; color: rgba(255,255,255,.75) !important; font-size: 13px !important; line-height: 1.6 !important; text-align: center !important; } /* première phrase = vraie intro, encore plus discrète */ #sovematic-solutions-page .sove-hero .sove-container > div:first-child > p:first-of-type { max-width: 390px !important; margin-bottom: 16px !important; color: rgba(255,255,255,.62) !important; font-size: 12.5px !important; line-height: 1.55 !important; } /* paragraphe principal Sovematic */ #sovematic-solutions-page .sove-hero .sove-container > div:first-child > p:nth-of-type(2) { max-width: 460px !important; font-size: 13px !important; line-height: 1.62 !important; } /* dernière phrase */ #sovematic-solutions-page .sove-hero .sove-container > div:first-child > p:nth-of-type(3) { max-width: 410px !important; margin-bottom: 0 !important; color: rgba(255,255,255,.68) !important; font-size: 12.5px !important; } /* mots importants */ #sovematic-solutions-page .sove-hero strong { color: #fff !important; font-weight: 800 !important; } /* ===================================================== BOUTONS ===================================================== */ #sovematic-solutions-page .sove-hero .sove-actions { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 10px !important; width: 100% !important; margin: 24px auto 0 !important; } #sovematic-solutions-page .sove-hero .sove-actions .sove-btn { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 340px !important; min-width: 0 !important; min-height: 52px !important; margin: 0 auto !important; padding: 12px 17px !important; border-radius: 999px !important; font-size: 12.5px !important; line-height: 1.25 !important; text-align: center !important; white-space: normal !important; } /* ===================================================== IMAGE HERO ===================================================== */ #sovematic-solutions-page .sove-hero-media { position: relative !important; grid-column: auto !important; grid-row: auto !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; width: 100% !important; max-width: 500px !important; margin: 30px auto 0 !important; border-radius: 22px !important; overflow: hidden !important; transform: none !important; } #sovematic-solutions-page .sove-hero-media img { display: block !important; width: 100% !important; height: clamp(230px, 80vw, 340px) !important; object-fit: cover !important; } /* légende plus discrète */ #sovematic-solutions-page .sove-hero-media figcaption { left: 50% !important; right: auto !important; bottom: 12px !important; transform: translateX(-50%) !important; width: max-content !important; max-width: calc(100% - 24px) !important; padding: 6px 9px !important; font-size: 9px !important; text-align: center !important; } } /* ========================================================= TRÈS PETITS TÉLÉPHONES ≤ 380px ========================================================= */ @media (max-width: 380px) { #sovematic-solutions-page .sove-hero .sove-container { width: calc(100% - 24px) !important; } #sovematic-solutions-page .sove-hero h1 { font-size: clamp(1.85rem, 9.3vw, 2.2rem) !important; line-height: 1 !important; } #sovematic-solutions-page .sove-hero .sove-container > div:first-child > p { font-size: 12px !important; } #sovematic-solutions-page .sove-hero .sove-actions .sove-btn { max-width: 100% !important; font-size: 12px !important; } }/* ========================================================= MOBILE — CARTES "QUELLE SOLUTION ?" 2 colonnes / 3 colonnes compactes + centrées ========================================================= */ @media (max-width: 767px) { /* enlève le comportement tableau */ #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table-wrap { width: 100% !important; overflow: visible !important; margin: 24px auto 28px !important; border: 0 !important; background: transparent !important; } #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table { display: block !important; width: 100% !important; min-width: 0 !important; border: 0 !important; background: transparent !important; } /* cache l'entête */ #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table thead { display: none !important; } /* ===================================================== GRILLE : 2 CARTES PAR LIGNE ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table tbody { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; width: 100% !important; } /* ===================================================== CARTE ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table tbody tr { position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 9px !important; width: 100% !important; min-width: 0 !important; min-height: 190px !important; margin: 0 !important; padding: 15px 10px 17px !important; border: 1px solid rgba(17,18,20,.075) !important; border-radius: 19px !important; background: linear-gradient( 145deg, #fff, #F8FAFA ) !important; box-shadow: 0 10px 24px rgba(17,18,20,.06) !important; text-align: center !important; overflow: hidden !important; } /* ===================================================== NUMÉROS 01 → 06 ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table tbody tr::before { position: static !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; margin: 0 auto 7px !important; border-radius: 12px !important; background: rgba(222,7,45,.10) !important; color: #DE072D !important; font-size: 12px !important; font-weight: 950 !important; line-height: 1 !important; transform: none !important; box-shadow: none !important; } #sovematic-solutions-page .sove-table tbody tr:nth-child(1)::before { content: "01" !important; } #sovematic-solutions-page .sove-table tbody tr:nth-child(2)::before { content: "02" !important; } #sovematic-solutions-page .sove-table tbody tr:nth-child(3)::before { content: "03" !important; } #sovematic-solutions-page .sove-table tbody tr:nth-child(4)::before { content: "04" !important; } #sovematic-solutions-page .sove-table tbody tr:nth-child(5)::before { content: "05" !important; } #sovematic-solutions-page .sove-table tbody tr:nth-child(6)::before { content: "06" !important; } /* ===================================================== CELLULES ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table tbody td { display: block !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; text-align: center !important; } /* liens */ #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table tbody td > a { display: block !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; text-align: center !important; transform: none !important; white-space: normal !important; } /* ===================================================== BESOIN — TEXTE DU HAUT ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table tbody td:first-child > a { color: #65727A !important; font-size: 11.5px !important; line-height: 1.35 !important; font-weight: 500 !important; } /* ===================================================== SOLUTION — TITRE PRINCIPAL ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table tbody td:last-child > a { padding-right: 0 !important; color: #111214 !important; font-size: 13px !important; line-height: 1.25 !important; font-weight: 900 !important; } #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table tbody td:last-child strong { display: block !important; width: 100% !important; color: #111214 !important; font-size: 13px !important; line-height: 1.25 !important; font-weight: 900 !important; text-align: center !important; } /* ===================================================== SUPPRESSION DE L'ANCIENNE FLÈCHE LATÉRALE ===================================================== */ #sovematic-solutions-page .sove-table--clickable td:last-child > a::after { display: none !important; content: none !important; } /* ===================================================== PETITE FLÈCHE CENTRÉE EN BAS ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table tbody tr::after { content: "→"; display: block; margin: 2px auto 0; color: #DE072D; font-size: 16px; line-height: 1; font-weight: 800; } /* ===================================================== ACCENT BAS ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table tbody tr { background-image: linear-gradient( 90deg, rgba(222,7,45,.85), rgba(31,78,95,.85) ), linear-gradient( 145deg, #fff, #F8FAFA ) !important; background-size: calc(100% - 26px) 3px, 100% 100% !important; background-position: center bottom, center !important; background-repeat: no-repeat !important; } } /* ========================================================= GRAND TÉLÉPHONE / PAYSAGE 600px → 767px 3 CARTES PAR LIGNE ========================================================= */ @media (min-width: 600px) and (max-width: 767px) { #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table tbody { grid-template-columns: repeat(3, minmax(0,1fr)) !important; } #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table tbody tr { min-height: 185px !important; padding: 14px 9px 15px !important; } #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table tbody td:first-child > a { font-size: 11px !important; } #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table tbody td:last-child strong { font-size: 12.5px !important; } } /* ========================================================= PETIT TÉLÉPHONE ≤ 360px ========================================================= */ @media (max-width: 360px) { #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table tbody { gap: 8px !important; } #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table tbody tr { min-height: 175px !important; padding: 13px 8px 14px !important; border-radius: 17px !important; } #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table tbody tr::before { width: 36px !important; height: 36px !important; font-size: 11px !important; } #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table tbody td:first-child > a { font-size: 10.5px !important; } #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table tbody td:last-child strong { font-size: 12px !important; } }/* ========================================================= MOBILE — LAVE-LINGE & SÈCHE-LINGE DESIGN PREMIUM / CENTRÉ / RESPONSIVE 0 → 767px ========================================================= */ @media (max-width: 767px) { /* ===================================================== SECTION ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(3) { padding: 34px 0 !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) > .sove-container { display: flex !important; flex-direction: column !important; align-items: center !important; width: calc(100% - 18px) !important; max-width: 540px !important; margin: 0 auto !important; padding: 20px 14px 24px !important; border: 1px solid rgba(17,18,20,.07) !important; border-radius: 24px !important; background: radial-gradient( circle at 100% 0, rgba(222,7,45,.055), transparent 30% ), linear-gradient( 145deg, #fff, #F7F9F9 ) !important; box-shadow: 0 18px 42px rgba(17,18,20,.08) !important; overflow: hidden !important; } /* ===================================================== ORDRE MOBILE ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(3) #lavage-sechage { order: 1 !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-inline-image { order: 2 !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) #lavage-sechage + h3 { order: 3 !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) #lavage-sechage + h3 + p { order: 4 !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-container > p { order: 5 !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) h3:nth-of-type(2) { order: 6 !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) ul { order: 7 !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-actions { order: 8 !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) h3:last-of-type { order: 9 !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-text-link { order: 10 !important; } /* ===================================================== H2 ===================================================== */ #sovematic-solutions-page h2#lavage-sechage { width: 100% !important; max-width: 460px !important; margin: 0 auto 18px !important; padding: 0 !important; font-size: clamp(1.85rem, 8.5vw, 2.45rem) !important; line-height: .98 !important; letter-spacing: -.045em !important; text-align: center !important; text-wrap: balance !important; overflow-wrap: normal !important; } /* enlève les anciens traits / numéros / badges */ #sovematic-solutions-page h2#lavage-sechage::before, #sovematic-solutions-page h2#lavage-sechage::after { content: none !important; display: none !important; } /* ===================================================== IMAGE — JUSTE APRÈS LE TITRE ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-inline-image { position: relative !important; width: calc(100% + 28px) !important; height: clamp(210px, 62vw, 285px) !important; margin: 0 -14px !important; border: 0 !important; border-radius: 0 !important; overflow: hidden !important; background: #111214 !important; box-shadow: none !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-inline-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; } /* overlay */ #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-inline-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to top, rgba(17,18,20,.58), transparent 50% ); pointer-events: none; } /* légende */ #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-inline-image figcaption { position: absolute !important; z-index: 3; left: 50% !important; right: auto !important; bottom: 12px !important; transform: translateX(-50%) !important; width: max-content !important; max-width: calc(100% - 24px) !important; margin: 0 !important; padding: 6px 9px !important; border-radius: 999px !important; background: rgba(17,18,20,.62) !important; color: rgba(255,255,255,.86) !important; font-size: 8.5px !important; line-height: 1.25 !important; text-align: center !important; backdrop-filter: blur(9px); } /* ===================================================== CARTOUCHE FLOTTANT ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(3) #lavage-sechage + h3 { position: relative !important; z-index: 5 !important; width: calc(100% - 18px) !important; margin: -21px auto 16px !important; padding: 12px 14px !important; border: 1px solid rgba(17,18,20,.07) !important; border-top: 3px solid #DE072D !important; border-radius: 15px !important; background: rgba(255,255,255,.97) !important; color: #1F4E5F !important; font-size: 13px !important; line-height: 1.3 !important; text-align: center !important; box-shadow: 0 13px 30px rgba(17,18,20,.11) !important; } /* ===================================================== MESSAGE CLÉ ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(3) #lavage-sechage + h3 + p { width: 100% !important; margin: 0 auto 16px !important; padding: 15px 14px !important; border-radius: 16px !important; background: linear-gradient( 145deg, #111214, #143744 ) !important; color: rgba(255,255,255,.78) !important; font-size: 12.5px !important; line-height: 1.55 !important; text-align: center !important; box-shadow: 0 12px 28px rgba(17,18,20,.12) !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) #lavage-sechage + h3 + p strong { color: #fff !important; font-size: 12.5px !important; line-height: 1.55 !important; } /* ===================================================== PARAGRAPHES INTRO plus petits car intro ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-container > p:not(#lavage-sechage + h3 + p) { width: 100% !important; max-width: 430px !important; margin: 0 auto 11px !important; padding: 0 !important; color: #5B6870 !important; font-size: 12.5px !important; line-height: 1.58 !important; text-align: center !important; } /* ===================================================== TITRE USAGES ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(3) h3:nth-of-type(2) { width: 100% !important; max-width: 420px !important; margin: 22px auto 14px !important; color: #111214 !important; font-size: 16px !important; line-height: 1.25 !important; text-align: center !important; } /* badge usages */ #sovematic-solutions-page .sove-section:nth-of-type(3) h3:nth-of-type(2)::before { content: "POUR QUELS USAGES ?" !important; display: table !important; width: max-content !important; margin: 0 auto 10px !important; padding: 6px 9px !important; border-radius: 999px !important; background: rgba(222,7,45,.09) !important; color: #DE072D !important; font-size: 8.5px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: .07em !important; } /* ===================================================== USAGES ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(3) ul { display: grid !important; grid-template-columns: 1fr !important; gap: 9px !important; width: 100% !important; max-width: 430px !important; margin: 0 auto 20px !important; padding: 0 !important; list-style: none !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) ul li { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important; width: 100% !important; min-height: 54px !important; margin: 0 !important; padding: 12px 13px !important; border: 1px solid rgba(17,18,20,.07) !important; border-radius: 15px !important; background: linear-gradient( 145deg, #fff, #F8FAFA ) !important; color: #4F5B63 !important; font-size: 12px !important; line-height: 1.35 !important; text-align: center !important; box-shadow: 0 7px 18px rgba(17,18,20,.045) !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) ul li::before { content: "✓" !important; position: static !important; display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 18px !important; width: 18px !important; height: 18px !important; margin: 0 !important; transform: none !important; border: 0 !important; border-radius: 50% !important; background: rgba(222,7,45,.10) !important; color: #DE072D !important; font-size: 9px !important; font-weight: 950 !important; box-shadow: none !important; } /* petite barre esthétique */ #sovematic-solutions-page .sove-section:nth-of-type(3) ul li::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 0; height: 2px; border-radius: 999px; background: linear-gradient( 90deg, rgba(222,7,45,.60), rgba(31,78,95,.14) ); } /* ===================================================== CTA ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-actions { display: flex !important; justify-content: center !important; width: 100% !important; margin: 0 auto 22px !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-actions .sove-btn { width: min(100%, 330px) !important; min-width: 0 !important; min-height: 50px !important; margin: 0 auto !important; padding: 12px 16px !important; justify-content: center !important; border-radius: 999px !important; font-size: 12px !important; line-height: 1.2 !important; text-align: center !important; white-space: normal !important; } /* ===================================================== ALLER PLUS LOIN ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(3) h3:last-of-type { width: 100% !important; margin: 0 auto 13px !important; color: #111214 !important; font-size: 17px !important; text-align: center !important; } /* ===================================================== LIENS ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-text-link { display: flex !important; align-items: center !important; justify-content: center !important; width: min(100%, 350px) !important; min-height: 42px !important; margin: 0 auto 8px !important; padding: 9px 13px !important; border: 1px solid rgba(31,78,95,.11) !important; border-radius: 999px !important; background: rgba(31,78,95,.055) !important; color: #1F4E5F !important; font-size: 11px !important; line-height: 1.3 !important; font-weight: 800 !important; text-align: center !important; text-decoration: none !important; white-space: normal !important; } } /* ========================================================= PETITS TÉLÉPHONES ≤ 360px ========================================================= */ @media (max-width: 360px) { #sovematic-solutions-page .sove-section:nth-of-type(3) > .sove-container { width: calc(100% - 12px) !important; padding: 18px 12px 22px !important; border-radius: 21px !important; } #sovematic-solutions-page h2#lavage-sechage { font-size: clamp(1.65rem, 8.7vw, 2rem) !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-inline-image { width: calc(100% + 24px) !important; margin: 0 -12px !important; height: 205px !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-container > p, #sovematic-solutions-page .sove-section:nth-of-type(3) #lavage-sechage + h3 + p { font-size: 12px !important; } }/* ========================================================= MOBILE — BUANDERIES PROFESSIONNELLES PREMIUM / CENTRÉ / RESPONSIVE 0 → 767px ========================================================= */ @media (max-width: 767px) { /* ===================================================== SECTION ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(4) { padding: 34px 0 !important; } #sovematic-solutions-page .sove-section:nth-of-type(4) > .sove-container { display: flex !important; flex-direction: column !important; align-items: center !important; width: calc(100% - 18px) !important; max-width: 540px !important; margin: 0 auto !important; padding: 20px 14px 24px !important; border: 1px solid rgba(17,18,20,.07) !important; border-radius: 24px !important; background: radial-gradient( circle at 100% 0, rgba(31,78,95,.06), transparent 30% ), linear-gradient( 145deg, #FFFFFF, #F5F8F8 ) !important; box-shadow: 0 18px 42px rgba(17,18,20,.08) !important; overflow: hidden !important; } /* ===================================================== ORDRE MOBILE titre → image → accroche → contenu → critères → CTA ===================================================== */ #sovematic-solutions-page #buanderies-professionnelles { order: 1 !important; } #sovematic-solutions-page .sove-section:nth-of-type(4) .sove-inline-image { order: 2 !important; } #sovematic-solutions-page .sove-section:nth-of-type(4) #buanderies-professionnelles + h3 { order: 3 !important; } #sovematic-solutions-page .sove-section:nth-of-type(4) #buanderies-professionnelles + h3 + p { order: 4 !important; } /* paragraphes intermédiaires */ #sovematic-solutions-page .sove-section:nth-of-type(4) .sove-container > p { order: 5 !important; } /* titre dimensionnement */ #sovematic-solutions-page .sove-section:nth-of-type(4) h3:nth-of-type(2) { order: 6 !important; } #sovematic-solutions-page .sove-section:nth-of-type(4) ul { order: 7 !important; } /* conclusion après la liste */ #sovematic-solutions-page .sove-section:nth-of-type(4) ul + p { order: 8 !important; } #sovematic-solutions-page .sove-section:nth-of-type(4) .sove-actions { order: 9 !important; } /* ===================================================== TITRE PRINCIPAL ===================================================== */ html body #sovematic-solutions-page h2#buanderies-professionnelles { display: block !important; width: 100% !important; max-width: 470px !important; margin: 0 auto 18px !important; padding: 0 !important; grid-column: 1 / -1 !important; font-size: clamp(1.85rem, 8.5vw, 2.45rem) !important; line-height: .98 !important; letter-spacing: -.045em !important; text-align: center !important; text-wrap: balance !important; } /* supprime anciens badges / 02 */ html body #sovematic-solutions-page h2#buanderies-professionnelles::before, html body #sovematic-solutions-page h2#buanderies-professionnelles::after { content: none !important; display: none !important; } /* ===================================================== IMAGE HERO BUANDERIE ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(4) .sove-inline-image { position: relative !important; top: auto !important; left: auto !important; right: auto !important; width: calc(100% + 28px) !important; height: clamp(210px, 62vw, 285px) !important; margin: 0 -14px !important; border: 0 !important; border-radius: 0 !important; overflow: hidden !important; background: #111214 !important; box-shadow: none !important; } #sovematic-solutions-page .sove-section:nth-of-type(4) .sove-inline-image img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; } /* dégradé photo */ #sovematic-solutions-page .sove-section:nth-of-type(4) .sove-inline-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to top, rgba(17,18,20,.60), transparent 52% ); pointer-events: none; } /* légende */ #sovematic-solutions-page .sove-section:nth-of-type(4) .sove-inline-image figcaption { position: absolute !important; z-index: 3; left: 50% !important; right: auto !important; bottom: 12px !important; transform: translateX(-50%) !important; width: max-content !important; max-width: calc(100% - 24px) !important; margin: 0 !important; padding: 6px 9px !important; border-radius: 999px !important; background: rgba(17,18,20,.64) !important; color: rgba(255,255,255,.88) !important; font-size: 8.5px !important; line-height: 1.25 !important; text-align: center !important; backdrop-filter: blur(9px); } /* ===================================================== ACCROCHE FLOTTANTE ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(4) #buanderies-professionnelles + h3 { position: relative !important; z-index: 5 !important; width: calc(100% - 18px) !important; margin: -21px auto 16px !important; padding: 13px 14px !important; border: 1px solid rgba(17,18,20,.07) !important; border-top: 3px solid #DE072D !important; border-left: 1px solid rgba(17,18,20,.07) !important; border-radius: 15px !important; background: rgba(255,255,255,.97) !important; color: #1F4E5F !important; font-size: 13px !important; line-height: 1.35 !important; text-align: center !important; box-shadow: 0 13px 30px rgba(17,18,20,.11) !important; } /* ===================================================== MESSAGE CLÉ ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(4) #buanderies-professionnelles + h3 + p { width: 100% !important; margin: 0 auto 16px !important; padding: 15px 14px !important; border-radius: 16px !important; background: linear-gradient( 145deg, #111214, #143744 ) !important; color: rgba(255,255,255,.79) !important; font-size: 12.5px !important; line-height: 1.55 !important; text-align: center !important; box-shadow: 0 12px 28px rgba(17,18,20,.12) !important; } #sovematic-solutions-page .sove-section:nth-of-type(4) #buanderies-professionnelles + h3 + p strong { color: #fff !important; } /* ===================================================== TEXTE INTRO plus petit / secondaire ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(4) p:nth-of-type(2), #sovematic-solutions-page .sove-section:nth-of-type(4) p:nth-of-type(7) { width: 100% !important; max-width: 430px !important; margin: 0 auto 13px !important; padding: 0 !important; color: #5C6971 !important; font-size: 12.5px !important; line-height: 1.6 !important; text-align: center !important; } /* ===================================================== "IL FAUT RÉFLÉCHIR..." PETIT LABEL ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(4) p:nth-of-type(3) { width: 100% !important; margin: 18px auto 9px !important; color: #DE072D !important; font-size: 9.5px !important; line-height: 1.25 !important; font-weight: 900 !important; letter-spacing: .07em !important; text-transform: uppercase !important; text-align: center !important; } /* ===================================================== CHAÎNE DE TRAITEMENT ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(4) p:nth-of-type(4) { width: 100% !important; margin: 0 auto 18px !important; padding: 17px 13px !important; border-radius: 17px !important; background: linear-gradient( 135deg, #143744, #1F4E5F ) !important; color: #fff !important; text-align: center !important; box-shadow: 0 14px 30px rgba(31,78,95,.17) !important; } #sovematic-solutions-page .sove-section:nth-of-type(4) p:nth-of-type(4) strong { color: #fff !important; font-size: 12.5px !important; line-height: 1.8 !important; } /* ===================================================== "PUIS LA CONFRONTER..." ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(4) p:nth-of-type(5) { width: 100% !important; margin: 0 auto 9px !important; color: #DE072D !important; font-size: 9.5px !important; line-height: 1.25 !important; font-weight: 900 !important; letter-spacing: .07em !important; text-transform: uppercase !important; text-align: center !important; } /* ===================================================== QUESTIONS DE DIMENSIONNEMENT ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(4) p:nth-of-type(6) { width: 100% !important; margin: 0 auto 18px !important; padding: 15px 13px !important; border: 1px solid rgba(222,7,45,.15) !important; border-radius: 16px !important; background: linear-gradient( 145deg, rgba(222,7,45,.065), rgba(222,7,45,.025) ) !important; color: #111214 !important; text-align: center !important; } #sovematic-solutions-page .sove-section:nth-of-type(4) p:nth-of-type(6) strong { color: #111214 !important; font-size: 12.5px !important; line-height: 1.65 !important; } /* ===================================================== TITRE DIMENSIONNEMENT ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(4) h3:nth-of-type(2) { width: 100% !important; max-width: 430px !important; margin: 24px auto 15px !important; padding: 0 !important; color: #111214 !important; font-size: 16px !important; line-height: 1.25 !important; text-align: center !important; } #sovematic-solutions-page .sove-section:nth-of-type(4) h3:nth-of-type(2)::before { content: "À DIMENSIONNER" !important; display: table !important; width: max-content !important; margin: 0 auto 10px !important; padding: 6px 9px !important; border-radius: 999px !important; background: rgba(31,78,95,.075) !important; color: #1F4E5F !important; font-size: 8.5px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: .07em !important; } /* ===================================================== 8 CRITÈRES ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(4) ul { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 8px !important; width: 100% !important; margin: 0 auto 20px !important; padding: 0 !important; list-style: none !important; } #sovematic-solutions-page .sove-section:nth-of-type(4) ul li { position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 8px !important; min-width: 0 !important; min-height: 105px !important; margin: 0 !important; padding: 13px 9px !important; border: 1px solid rgba(17,18,20,.07) !important; border-radius: 15px !important; background: linear-gradient( 145deg, #fff, #F8FAFA ) !important; color: #4D5961 !important; font-size: 11.5px !important; line-height: 1.35 !important; text-align: center !important; box-shadow: 0 7px 18px rgba(17,18,20,.045) !important; } /* point rouge */ #sovematic-solutions-page .sove-section:nth-of-type(4) ul li::before { content: "" !important; position: static !important; flex: 0 0 10px !important; width: 10px !important; height: 10px !important; margin: 0 !important; transform: none !important; border: 0 !important; border-radius: 50% !important; background: #DE072D !important; box-shadow: 0 0 0 5px rgba(222,7,45,.075) !important; } /* petite ligne décorative */ #sovematic-solutions-page .sove-section:nth-of-type(4) ul li::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: 0; height: 2px; border-radius: 999px; background: linear-gradient( 90deg, rgba(222,7,45,.65), rgba(31,78,95,.18) ); } /* ===================================================== CONCLUSION ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(4) ul + p { width: 100% !important; max-width: 430px !important; margin: 2px auto 18px !important; padding: 14px 15px !important; border-left: 0 !important; border-top: 3px solid #DE072D !important; border-radius: 15px !important; background: rgba(31,78,95,.055) !important; color: #34434A !important; font-size: 12px !important; line-height: 1.5 !important; font-weight: 700 !important; text-align: center !important; } /* ===================================================== CTA ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(4) .sove-actions { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; margin: 0 auto !important; } #sovematic-solutions-page .sove-section:nth-of-type(4) .sove-actions .sove-btn { width: min(100%, 340px) !important; min-width: 0 !important; min-height: 50px !important; margin: 0 auto !important; padding: 12px 15px !important; justify-content: center !important; border-radius: 999px !important; font-size: 11.5px !important; line-height: 1.25 !important; text-align: center !important; white-space: normal !important; box-shadow: 0 13px 28px rgba(222,7,45,.22) !important; } } /* ========================================================= PETITS TÉLÉPHONES ≤ 390px LES CRITÈRES REPASSENT SUR 1 COLONNE ========================================================= */ @media (max-width: 390px) { #sovematic-solutions-page .sove-section:nth-of-type(4) > .sove-container { width: calc(100% - 12px) !important; padding: 18px 12px 22px !important; border-radius: 21px !important; } #sovematic-solutions-page h2#buanderies-professionnelles { font-size: clamp(1.65rem, 8.7vw, 2.05rem) !important; } #sovematic-solutions-page .sove-section:nth-of-type(4) .sove-inline-image { width: calc(100% + 24px) !important; margin: 0 -12px !important; height: 205px !important; } /* 1 colonne pour garder une vraie lisibilité */ #sovematic-solutions-page .sove-section:nth-of-type(4) ul { grid-template-columns: 1fr !important; } #sovematic-solutions-page .sove-section:nth-of-type(4) ul li { flex-direction: row !important; min-height: 52px !important; padding: 11px 13px !important; font-size: 11.5px !important; } #sovematic-solutions-page .sove-section:nth-of-type(4) p { font-size: 12px !important; } /* ========================================================= MOBILE — CENTRALES DE PAIEMENT PREMIUM / CENTRÉ / RESPONSIVE 0 → 767px ========================================================= */ @media (max-width: 767px) { /* ===================================================== SECTION ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(5) { padding: 34px 0 !important; } #sovematic-solutions-page .sove-section:nth-of-type(5) > .sove-container { display: flex !important; flex-direction: column !important; align-items: center !important; width: calc(100% - 18px) !important; max-width: 540px !important; margin: 0 auto !important; padding: 20px 14px 24px !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 24px !important; background: radial-gradient( circle at 100% 0, rgba(222,7,45,.16), transparent 30% ), linear-gradient( 145deg, #111214, #143744 ) !important; box-shadow: 0 20px 48px rgba(0,0,0,.21) !important; overflow: hidden !important; } /* ===================================================== ORDRE MOBILE ===================================================== */ #sovematic-solutions-page #centrales-paiement { order: 1 !important; } #sovematic-solutions-page .sove-section:nth-of-type(5) .sove-inline-image { order: 2 !important; } #sovematic-solutions-page .sove-section:nth-of-type(5) .sove-container > :not(#centrales-paiement):not(.sove-inline-image) { order: 3 !important; } /* ===================================================== TITRE ===================================================== */ html body #sovematic-solutions-page h2#centrales-paiement { display: block !important; width: 100% !important; max-width: 470px !important; margin: 0 auto 18px !important; padding: 0 !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: clamp(1.9rem, 8.5vw, 2.5rem) !important; line-height: .98 !important; letter-spacing: -.045em !important; text-align: center !important; text-wrap: balance !important; } /* supprime anciens badges / 03 */ html body #sovematic-solutions-page h2#centrales-paiement::before, html body #sovematic-solutions-page h2#centrales-paiement::after { content: none !important; display: none !important; } /* ===================================================== IMAGE ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(5) .sove-inline-image { position: relative !important; top: auto !important; left: auto !important; right: auto !important; width: calc(100% + 28px) !important; height: clamp(215px, 63vw, 290px) !important; margin: 0 -14px !important; border: 0 !important; border-radius: 0 !important; overflow: hidden !important; background: #0C1012 !important; box-shadow: none !important; } #sovematic-solutions-page .sove-section:nth-of-type(5) .sove-inline-image img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; } /* overlay */ #sovematic-solutions-page .sove-section:nth-of-type(5) .sove-inline-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to top, rgba(12,16,18,.72), transparent 54% ); pointer-events: none; } /* légende */ #sovematic-solutions-page .sove-section:nth-of-type(5) .sove-inline-image figcaption { position: absolute !important; z-index: 3; left: 50% !important; right: auto !important; bottom: 12px !important; transform: translateX(-50%) !important; width: max-content !important; max-width: calc(100% - 24px) !important; margin: 0 !important; padding: 6px 9px !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 999px !important; background: rgba(17,18,20,.65) !important; color: rgba(255,255,255,.88) !important; font-size: 8.5px !important; line-height: 1.25 !important; text-align: center !important; backdrop-filter: blur(9px); } /* ===================================================== ACCROCHE FLOTTANTE ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(5) #centrales-paiement + h3 { position: relative !important; z-index: 5 !important; width: calc(100% - 18px) !important; margin: -21px auto 16px !important; padding: 13px 14px !important; border: 1px solid rgba(255,255,255,.10) !important; border-top: 3px solid #DE072D !important; border-radius: 15px !important; background: linear-gradient( 145deg, #20272B, #173946 ) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: 13px !important; line-height: 1.35 !important; text-align: center !important; box-shadow: 0 15px 34px rgba(0,0,0,.22) !important; } /* ===================================================== MESSAGE CLÉ ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(5) #centrales-paiement + h3 + p { width: 100% !important; margin: 0 auto 16px !important; padding: 15px 14px !important; border: 1px solid rgba(255,255,255,.09) !important; border-radius: 16px !important; background: rgba(255,255,255,.065) !important; color: rgba(255,255,255,.80) !important; -webkit-text-fill-color: rgba(255,255,255,.80) !important; font-size: 12.5px !important; line-height: 1.55 !important; text-align: center !important; } #sovematic-solutions-page .sove-section:nth-of-type(5) #centrales-paiement + h3 + p strong { color: #fff !important; -webkit-text-fill-color: #fff !important; } /* ===================================================== INTRO PARCOURS ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(5) p:nth-of-type(2) { width: 100% !important; max-width: 420px !important; margin: 0 auto 9px !important; color: rgba(255,255,255,.58) !important; -webkit-text-fill-color: rgba(255,255,255,.58) !important; font-size: 9.5px !important; font-weight: 900 !important; line-height: 1.25 !important; letter-spacing: .07em !important; text-transform: uppercase !important; text-align: center !important; } /* label parcours */ #sovematic-solutions-page .sove-section:nth-of-type(5) p:nth-of-type(2)::before { content: "PARCOURS UTILISATEUR"; display: table; margin: 0 auto 8px; padding: 6px 9px; border-radius: 999px; background: rgba(222,7,45,.16); color: #ff4d6c; font-size: 8px; font-weight: 900; letter-spacing: .07em; } /* ===================================================== CHOISIR → PAYER → LAVER → SÉCHER ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(5) p:nth-of-type(3) { width: 100% !important; margin: 0 auto 18px !important; padding: 18px 12px !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 17px !important; background: linear-gradient( 135deg, rgba(255,255,255,.105), rgba(255,255,255,.045) ) !important; text-align: center !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important; } #sovematic-solutions-page .sove-section:nth-of-type(5) p:nth-of-type(3) strong { color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: 14px !important; line-height: 1.7 !important; letter-spacing: .01em !important; } /* ===================================================== TITRE QUESTIONS EXPLOITANT ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(5) p:nth-of-type(4) { width: 100% !important; max-width: 430px !important; margin: 20px auto 12px !important; color: #ff5572 !important; -webkit-text-fill-color: #ff5572 !important; font-size: 10px !important; line-height: 1.35 !important; font-weight: 900 !important; letter-spacing: .065em !important; text-transform: uppercase !important; text-align: center !important; } /* ===================================================== QUESTIONS EN CARTES ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(5) ul { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px !important; width: 100% !important; margin: 0 auto 20px !important; padding: 0 !important; list-style: none !important; } #sovematic-solutions-page .sove-section:nth-of-type(5) ul li { position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 8px !important; min-width: 0 !important; min-height: 112px !important; margin: 0 !important; padding: 13px 9px !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 15px !important; background: rgba(255,255,255,.055) !important; color: rgba(255,255,255,.79) !important; -webkit-text-fill-color: rgba(255,255,255,.79) !important; font-size: 11px !important; line-height: 1.35 !important; text-align: center !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important; } /* ? visuel */ #sovematic-solutions-page .sove-section:nth-of-type(5) ul li::before { content: "?" !important; position: static !important; display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 24px !important; width: 24px !important; height: 24px !important; margin: 0 !important; transform: none !important; border: 0 !important; border-radius: 8px !important; background: rgba(222,7,45,.18) !important; color: #ff5471 !important; -webkit-text-fill-color: #ff5471 !important; font-size: 11px !important; font-weight: 950 !important; box-shadow: none !important; } /* ===================================================== TEXTES TOUCH'N PAY ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(5) p:nth-of-type(5), #sovematic-solutions-page .sove-section:nth-of-type(5) p:nth-of-type(6) { width: 100% !important; max-width: 430px !important; margin: 0 auto 12px !important; padding: 0 !important; color: rgba(255,255,255,.68) !important; -webkit-text-fill-color: rgba(255,255,255,.68) !important; font-size: 12px !important; line-height: 1.58 !important; text-align: center !important; } #sovematic-solutions-page .sove-section:nth-of-type(5) p:nth-of-type(5) strong { color: #fff !important; -webkit-text-fill-color: #fff !important; } /* ===================================================== POUR L'UTILISATEUR / POUR L'EXPLOITANT ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(5) h3:nth-of-type(2), #sovematic-solutions-page .sove-section:nth-of-type(5) h3:nth-of-type(3) { display: table !important; width: max-content !important; margin: 20px auto 8px !important; padding: 7px 10px !important; border-radius: 999px !important; background: rgba(222,7,45,.16) !important; color: #ff5572 !important; -webkit-text-fill-color: #ff5572 !important; font-size: 9px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: .07em !important; text-transform: uppercase !important; text-align: center !important; } /* cartes bénéfices */ #sovematic-solutions-page .sove-section:nth-of-type(5) h3:nth-of-type(2) + p, #sovematic-solutions-page .sove-section:nth-of-type(5) h3:nth-of-type(3) + p { width: 100% !important; max-width: 430px !important; margin: 0 auto 10px !important; padding: 14px 13px !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 15px !important; background: rgba(255,255,255,.06) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: 12px !important; line-height: 1.45 !important; font-weight: 700 !important; text-align: center !important; } /* ===================================================== CTA ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(5) .sove-actions { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; margin: 22px auto 0 !important; } #sovematic-solutions-page .sove-section:nth-of-type(5) .sove-actions .sove-btn { width: min(100%,340px) !important; min-width: 0 !important; min-height: 50px !important; margin: 0 auto !important; padding: 12px 15px !important; justify-content: center !important; border-radius: 999px !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: 11.5px !important; line-height: 1.25 !important; text-align: center !important; white-space: normal !important; box-shadow: 0 13px 30px rgba(222,7,45,.25) !important; } } /* ========================================================= PETITS TÉLÉPHONES ≤ 390px ========================================================= */ @media (max-width: 390px) { #sovematic-solutions-page .sove-section:nth-of-type(5) > .sove-container { width: calc(100% - 12px) !important; padding: 18px 12px 22px !important; border-radius: 21px !important; } #sovematic-solutions-page h2#centrales-paiement { font-size: clamp(1.7rem,8.8vw,2.1rem) !important; } #sovematic-solutions-page .sove-section:nth-of-type(5) .sove-inline-image { width: calc(100% + 24px) !important; margin: 0 -12px !important; height: 205px !important; } /* questions en 1 colonne sur écran étroit */ #sovematic-solutions-page .sove-section:nth-of-type(5) ul { grid-template-columns: 1fr !important; } #sovematic-solutions-page .sove-section:nth-of-type(5) ul li { flex-direction: row !important; min-height: 54px !important; padding: 11px 13px !important; font-size: 11px !important; } } }/* ========================================================= MOBILE — GESTION DES DOUCHES PREMIUM / CENTRÉ / RESPONSIVE 0 → 767px ========================================================= */ @media (max-width: 767px) { /* ===================================================== SECTION ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(6) { padding: 34px 0 !important; } #sovematic-solutions-page .sove-section:nth-of-type(6) > .sove-container { display: flex !important; flex-direction: column !important; align-items: center !important; width: calc(100% - 18px) !important; max-width: 540px !important; margin: 0 auto !important; padding: 20px 14px 24px !important; border: 1px solid rgba(17,18,20,.07) !important; border-radius: 24px !important; background: radial-gradient( circle at 100% 0, rgba(31,78,95,.06), transparent 30% ), linear-gradient( 145deg, #FFFFFF, #F5F8F8 ) !important; box-shadow: 0 18px 42px rgba(17,18,20,.08) !important; overflow: hidden !important; } /* ===================================================== ORDRE MOBILE ===================================================== */ #sovematic-solutions-page #gestion-douches { order: 1 !important; } #sovematic-solutions-page .sove-section:nth-of-type(6) .sove-inline-image { order: 2 !important; } #sovematic-solutions-page .sove-section:nth-of-type(6) #gestion-douches + h3 { order: 3 !important; } #sovematic-solutions-page .sove-section:nth-of-type(6) #gestion-douches + h3 + p { order: 4 !important; } #sovematic-solutions-page .sove-section:nth-of-type(6) .sove-container > p { order: 5 !important; } #sovematic-solutions-page .sove-section:nth-of-type(6) h3:nth-of-type(2) { order: 6 !important; } #sovematic-solutions-page .sove-section:nth-of-type(6) p:nth-of-type(6) { order: 7 !important; } #sovematic-solutions-page .sove-section:nth-of-type(6) p:nth-of-type(7) { order: 8 !important; } #sovematic-solutions-page .sove-section:nth-of-type(6) p:nth-of-type(8) { order: 9 !important; } #sovematic-solutions-page .sove-section:nth-of-type(6) p:nth-of-type(9) { order: 10 !important; } #sovematic-solutions-page .sove-section:nth-of-type(6) p:nth-of-type(10) { order: 11 !important; } #sovematic-solutions-page .sove-section:nth-of-type(6) .sove-actions { order: 12 !important; } /* ===================================================== TITRE PRINCIPAL ===================================================== */ html body #sovematic-solutions-page h2#gestion-douches { display: block !important; width: 100% !important; max-width: 470px !important; margin: 0 auto 18px !important; padding: 0 !important; grid-column: 1 / -1 !important; color: #111214 !important; font-size: clamp(1.9rem, 8.6vw, 2.5rem) !important; line-height: .98 !important; letter-spacing: -.045em !important; text-align: center !important; text-wrap: balance !important; } /* supprime ancien 04 / badges */ html body #sovematic-solutions-page h2#gestion-douches::before, html body #sovematic-solutions-page h2#gestion-douches::after { content: none !important; display: none !important; } /* ===================================================== IMAGE ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(6) .sove-inline-image { position: relative !important; top: auto !important; left: auto !important; right: auto !important; width: calc(100% + 28px) !important; height: clamp(215px, 63vw, 290px) !important; margin: 0 -14px !important; border: 0 !important; border-radius: 0 !important; overflow: hidden !important; background: #111214 !important; box-shadow: none !important; } #sovematic-solutions-page .sove-section:nth-of-type(6) .sove-inline-image img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; } /* overlay */ #sovematic-solutions-page .sove-section:nth-of-type(6) .sove-inline-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to top, rgba(17,18,20,.60), transparent 52% ); pointer-events: none; } /* légende */ #sovematic-solutions-page .sove-section:nth-of-type(6) .sove-inline-image figcaption { position: absolute !important; z-index: 3; left: 50% !important; right: auto !important; bottom: 12px !important; transform: translateX(-50%) !important; width: max-content !important; max-width: calc(100% - 24px) !important; margin: 0 !important; padding: 6px 9px !important; border-radius: 999px !important; background: rgba(17,18,20,.64) !important; color: rgba(255,255,255,.88) !important; font-size: 8.5px !important; line-height: 1.25 !important; text-align: center !important; backdrop-filter: blur(9px); } /* ===================================================== ACCROCHE FLOTTANTE ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(6) #gestion-douches + h3 { position: relative !important; z-index: 5 !important; width: calc(100% - 18px) !important; margin: -21px auto 16px !important; padding: 13px 14px !important; border: 1px solid rgba(17,18,20,.07) !important; border-top: 3px solid #DE072D !important; border-radius: 15px !important; background: rgba(255,255,255,.97) !important; color: #1F4E5F !important; font-size: 13px !important; line-height: 1.35 !important; text-align: center !important; box-shadow: 0 13px 30px rgba(17,18,20,.11) !important; } /* ===================================================== MESSAGE CLÉ ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(6) #gestion-douches + h3 + p { width: 100% !important; margin: 0 auto 16px !important; padding: 15px 14px !important; border-radius: 16px !important; background: linear-gradient( 145deg, #111214, #143744 ) !important; color: rgba(255,255,255,.78) !important; font-size: 12.5px !important; line-height: 1.55 !important; text-align: center !important; box-shadow: 0 12px 28px rgba(17,18,20,.12) !important; } #sovematic-solutions-page .sove-section:nth-of-type(6) #gestion-douches + h3 + p strong { color: #fff !important; -webkit-text-fill-color: #fff !important; } /* ===================================================== PARAGRAPHES INTRO PETITS / CENTRÉS ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(6) p:nth-of-type(2), #sovematic-solutions-page .sove-section:nth-of-type(6) p:nth-of-type(3), #sovematic-solutions-page .sove-section:nth-of-type(6) p:nth-of-type(4), #sovematic-solutions-page .sove-section:nth-of-type(6) p:nth-of-type(5) { width: 100% !important; max-width: 430px !important; margin: 0 auto 11px !important; padding: 0 !important; color: #5B6870 !important; font-size: 12.5px !important; line-height: 1.58 !important; text-align: center !important; } /* ===================================================== TITRE "L'OBJECTIF" ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(6) h3:nth-of-type(2) { width: 100% !important; margin: 24px auto 15px !important; color: #111214 !important; font-size: 17px !important; line-height: 1.2 !important; text-align: center !important; } #sovematic-solutions-page .sove-section:nth-of-type(6) h3:nth-of-type(2)::before { content: "MAÎTRISER L'USAGE"; display: table; width: max-content; margin: 0 auto 10px; padding: 6px 9px; border-radius: 999px; background: rgba(31,78,95,.08); color: #1F4E5F; font-size: 8.5px; line-height: 1; font-weight: 900; letter-spacing: .07em; } /* ===================================================== "PASSER DE :" ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(6) p:nth-of-type(6) { display: table !important; width: max-content !important; margin: 0 auto 9px !important; padding: 7px 11px !important; border-radius: 999px !important; background: rgba(17,18,20,.055) !important; color: #65727A !important; font-size: 9.5px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: .06em !important; text-transform: uppercase !important; text-align: center !important; } /* ===================================================== AVANT ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(6) p:nth-of-type(7) { position: relative !important; width: 100% !important; margin: 0 auto 14px !important; padding: 18px 14px !important; border: 1px solid rgba(222,7,45,.16) !important; border-radius: 17px !important; background: linear-gradient( 145deg, rgba(222,7,45,.085), rgba(222,7,45,.025) ) !important; text-align: center !important; } #sovematic-solutions-page .sove-section:nth-of-type(6) p:nth-of-type(7)::before { content: "AVANT" !important; display: table !important; margin: 0 auto 8px !important; color: #DE072D !important; font-size: 8.5px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .10em !important; text-align: center !important; } #sovematic-solutions-page .sove-section:nth-of-type(6) p:nth-of-type(7) strong { display: block !important; color: #111214 !important; font-size: 14px !important; line-height: 1.45 !important; text-align: center !important; } /* ===================================================== "À :" ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(6) p:nth-of-type(8) { display: table !important; width: max-content !important; margin: 2px auto 9px !important; padding: 7px 11px !important; border-radius: 999px !important; background: rgba(31,78,95,.08) !important; color: #1F4E5F !important; font-size: 9.5px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: .06em !important; text-transform: uppercase !important; text-align: center !important; } /* ===================================================== APRÈS ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(6) p:nth-of-type(9) { position: relative !important; width: 100% !important; margin: 0 auto 17px !important; padding: 18px 14px !important; border: 1px solid rgba(31,78,95,.16) !important; border-radius: 17px !important; background: linear-gradient( 145deg, #143744, #1F4E5F ) !important; color: #fff !important; box-shadow: 0 14px 30px rgba(31,78,95,.17) !important; text-align: center !important; } #sovematic-solutions-page .sove-section:nth-of-type(6) p:nth-of-type(9)::before { content: "APRÈS" !important; display: table !important; margin: 0 auto 8px !important; color: #ff4d6c !important; font-size: 8.5px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .10em !important; text-align: center !important; } #sovematic-solutions-page .sove-section:nth-of-type(6) p:nth-of-type(9) strong { display: block !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: 14px !important; line-height: 1.45 !important; text-align: center !important; } /* ===================================================== CONCLUSION ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(6) p:nth-of-type(10) { width: 100% !important; max-width: 430px !important; margin: 0 auto 18px !important; padding: 14px 15px !important; border-top: 3px solid #DE072D !important; border-radius: 15px !important; background: rgba(31,78,95,.055) !important; color: #425159 !important; font-size: 12px !important; line-height: 1.5 !important; text-align: center !important; } /* ===================================================== CTA ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(6) .sove-actions { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; margin: 0 auto !important; } #sovematic-solutions-page .sove-section:nth-of-type(6) .sove-actions .sove-btn { width: min(100%, 340px) !important; min-width: 0 !important; min-height: 50px !important; margin: 0 auto !important; padding: 12px 15px !important; justify-content: center !important; border-radius: 999px !important; font-size: 11.5px !important; line-height: 1.25 !important; text-align: center !important; white-space: normal !important; box-shadow: 0 13px 28px rgba(222,7,45,.22) !important; } } /* ========================================================= PETITS TÉLÉPHONES ≤ 390px ========================================================= */ @media (max-width: 390px) { #sovematic-solutions-page .sove-section:nth-of-type(6) > .sove-container { width: calc(100% - 12px) !important; padding: 18px 12px 22px !important; border-radius: 21px !important; } #sovematic-solutions-page h2#gestion-douches { font-size: clamp(1.7rem, 8.8vw, 2.1rem) !important; } #sovematic-solutions-page .sove-section:nth-of-type(6) .sove-inline-image { width: calc(100% + 24px) !important; margin: 0 -12px !important; height: 205px !important; } #sovematic-solutions-page .sove-section:nth-of-type(6) p { font-size: 12px !important; } #sovematic-solutions-page .sove-section:nth-of-type(6) p:nth-of-type(7) strong, #sovematic-solutions-page .sove-section:nth-of-type(6) p:nth-of-type(9) strong { font-size: 13px !important; } }/* ========================================================= MOBILE — BARRIÈRES AUTOMATIQUES PREMIUM / CENTRÉ / RESPONSIVE 0 → 767px ========================================================= */ @media (max-width: 767px) { /* ===================================================== SECTION ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(7) { padding: 34px 0 !important; } #sovematic-solutions-page .sove-section:nth-of-type(7) > .sove-container { display: flex !important; flex-direction: column !important; align-items: center !important; width: calc(100% - 18px) !important; max-width: 540px !important; margin: 0 auto !important; padding: 20px 14px 24px !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 24px !important; background: radial-gradient( circle at 100% 0, rgba(222,7,45,.17), transparent 30% ), linear-gradient( 145deg, #111214, #143744 ) !important; box-shadow: 0 20px 48px rgba(0,0,0,.22) !important; overflow: hidden !important; } /* ===================================================== ORDRE MOBILE ===================================================== */ #sovematic-solutions-page #barrieres-automatiques { order: 1 !important; } #sovematic-solutions-page .sove-section:nth-of-type(7) .sove-inline-image { order: 2 !important; } #sovematic-solutions-page .sove-section:nth-of-type(7) #barrieres-automatiques + h3 { order: 3 !important; } #sovematic-solutions-page .sove-section:nth-of-type(7) #barrieres-automatiques + h3 + p { order: 4 !important; } #sovematic-solutions-page .sove-section:nth-of-type(7) .sove-container > p { order: 5 !important; } #sovematic-solutions-page .sove-section:nth-of-type(7) .sove-actions { order: 6 !important; } /* ===================================================== TITRE PRINCIPAL ===================================================== */ html body #sovematic-solutions-page h2#barrieres-automatiques { display: block !important; width: 100% !important; max-width: 470px !important; margin: 0 auto 18px !important; padding: 0 !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: clamp(1.9rem, 8.5vw, 2.5rem) !important; line-height: .98 !important; letter-spacing: -.045em !important; text-align: center !important; text-wrap: balance !important; } /* supprime ancien 05 / badges */ html body #sovematic-solutions-page h2#barrieres-automatiques::before, html body #sovematic-solutions-page h2#barrieres-automatiques::after { content: none !important; display: none !important; } /* ===================================================== IMAGE ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(7) .sove-inline-image { position: relative !important; top: auto !important; left: auto !important; right: auto !important; width: calc(100% + 28px) !important; height: clamp(215px, 63vw, 290px) !important; margin: 0 -14px !important; border: 0 !important; border-radius: 0 !important; overflow: hidden !important; background: #0C1012 !important; box-shadow: none !important; } #sovematic-solutions-page .sove-section:nth-of-type(7) .sove-inline-image img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; } /* overlay */ #sovematic-solutions-page .sove-section:nth-of-type(7) .sove-inline-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to top, rgba(10,14,16,.72), transparent 54% ); pointer-events: none; } /* légende */ #sovematic-solutions-page .sove-section:nth-of-type(7) .sove-inline-image figcaption { position: absolute !important; z-index: 3; left: 50% !important; right: auto !important; bottom: 12px !important; transform: translateX(-50%) !important; width: max-content !important; max-width: calc(100% - 24px) !important; margin: 0 !important; padding: 6px 9px !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 999px !important; background: rgba(17,18,20,.66) !important; color: rgba(255,255,255,.88) !important; font-size: 8.5px !important; line-height: 1.25 !important; text-align: center !important; backdrop-filter: blur(9px); } /* ===================================================== ACCROCHE FLOTTANTE ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(7) #barrieres-automatiques + h3 { position: relative !important; z-index: 5 !important; width: calc(100% - 18px) !important; margin: -21px auto 16px !important; padding: 13px 14px !important; border: 1px solid rgba(255,255,255,.10) !important; border-top: 3px solid #DE072D !important; border-radius: 15px !important; background: linear-gradient( 145deg, #20272B, #173946 ) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: 13px !important; line-height: 1.35 !important; text-align: center !important; box-shadow: 0 15px 34px rgba(0,0,0,.22) !important; } /* ===================================================== MESSAGE CLÉ ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(7) #barrieres-automatiques + h3 + p { width: 100% !important; margin: 0 auto 17px !important; padding: 15px 14px !important; border: 1px solid rgba(255,255,255,.09) !important; border-radius: 16px !important; background: rgba(255,255,255,.06) !important; color: rgba(255,255,255,.80) !important; -webkit-text-fill-color: rgba(255,255,255,.80) !important; font-size: 12.5px !important; line-height: 1.55 !important; text-align: center !important; } #sovematic-solutions-page .sove-section:nth-of-type(7) #barrieres-automatiques + h3 + p strong { color: #fff !important; -webkit-text-fill-color: #fff !important; } /* ===================================================== INTRO "UNE BARRIÈRE..." ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(7) p:nth-of-type(2), #sovematic-solutions-page .sove-section:nth-of-type(7) p:nth-of-type(5), #sovematic-solutions-page .sove-section:nth-of-type(7) p:nth-of-type(6), #sovematic-solutions-page .sove-section:nth-of-type(7) p:nth-of-type(7), #sovematic-solutions-page .sove-section:nth-of-type(7) p:nth-of-type(8), #sovematic-solutions-page .sove-section:nth-of-type(7) p:nth-of-type(10) { width: 100% !important; max-width: 430px !important; margin: 0 auto 11px !important; padding: 0 !important; color: rgba(255,255,255,.68) !important; -webkit-text-fill-color: rgba(255,255,255,.68) !important; font-size: 12px !important; line-height: 1.58 !important; text-align: center !important; } /* liens / strong dans ces paragraphes */ #sovematic-solutions-page .sove-section:nth-of-type(7) p strong { color: #fff !important; -webkit-text-fill-color: #fff !important; } /* ===================================================== "ELLE DOIT ÊTRE DIMENSIONNÉE SELON" ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(7) p:nth-of-type(3) { width: 100% !important; margin: 20px auto 9px !important; color: #ff5572 !important; -webkit-text-fill-color: #ff5572 !important; font-size: 9.5px !important; line-height: 1.25 !important; font-weight: 900 !important; letter-spacing: .07em !important; text-transform: uppercase !important; text-align: center !important; } #sovematic-solutions-page .sove-section:nth-of-type(7) p:nth-of-type(3)::before { content: "DIMENSIONNEMENT"; display: table; width: max-content; margin: 0 auto 8px; padding: 6px 9px; border-radius: 999px; background: rgba(222,7,45,.16); color: #ff5572; font-size: 8px; font-weight: 900; letter-spacing: .07em; } /* ===================================================== CRITÈRES DE DIMENSIONNEMENT ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(7) p:nth-of-type(4) { width: 100% !important; margin: 0 auto 18px !important; padding: 17px 14px !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 17px !important; background: linear-gradient( 135deg, rgba(255,255,255,.10), rgba(255,255,255,.045) ) !important; color: #fff !important; text-align: center !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important; } #sovematic-solutions-page .sove-section:nth-of-type(7) p:nth-of-type(4) strong { display: block !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: 12.5px !important; line-height: 1.6 !important; text-align: center !important; } /* ===================================================== "OBSTACLE PHYSIQUE" ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(7) p:nth-of-type(7) { margin-top: 7px !important; padding: 13px 14px !important; border-left: 0 !important; border-top: 3px solid #DE072D !important; border-radius: 15px !important; background: rgba(255,255,255,.05) !important; } /* ===================================================== MODES D'IDENTIFICATION BADGE / CODE / PLAQUE / INTERPHONE ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(7) p:nth-of-type(9) { position: relative !important; width: 100% !important; margin: 18px auto !important; padding: 19px 14px !important; border: 1px solid rgba(222,7,45,.24) !important; border-radius: 18px !important; background: radial-gradient( circle at 50% 0, rgba(222,7,45,.18), transparent 55% ), rgba(0,0,0,.18) !important; text-align: center !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important; } #sovematic-solutions-page .sove-section:nth-of-type(7) p:nth-of-type(9)::before { content: "MODES D'IDENTIFICATION" !important; display: table !important; margin: 0 auto 11px !important; padding: 6px 9px !important; border-radius: 999px !important; background: rgba(222,7,45,.15) !important; color: #ff5572 !important; font-size: 8px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .09em !important; } #sovematic-solutions-page .sove-section:nth-of-type(7) p:nth-of-type(9) strong { display: block !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: 14px !important; line-height: 1.8 !important; letter-spacing: .01em !important; text-align: center !important; } /* ===================================================== CONCLUSION ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(7) p:nth-of-type(10) { margin-bottom: 19px !important; padding: 14px 15px !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 15px !important; background: rgba(255,255,255,.045) !important; } /* ===================================================== CTA ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(7) .sove-actions { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; margin: 0 auto !important; } #sovematic-solutions-page .sove-section:nth-of-type(7) .sove-actions .sove-btn { width: min(100%, 340px) !important; min-width: 0 !important; min-height: 50px !important; margin: 0 auto !important; padding: 12px 15px !important; justify-content: center !important; border-radius: 999px !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: 11.5px !important; line-height: 1.25 !important; text-align: center !important; white-space: normal !important; box-shadow: 0 13px 30px rgba(222,7,45,.25) !important; } } /* ========================================================= PETITS TÉLÉPHONES ≤ 390px ========================================================= */ @media (max-width: 390px) { #sovematic-solutions-page .sove-section:nth-of-type(7) > .sove-container { width: calc(100% - 12px) !important; padding: 18px 12px 22px !important; border-radius: 21px !important; } #sovematic-solutions-page h2#barrieres-automatiques { font-size: clamp(1.7rem, 8.8vw, 2.1rem) !important; } #sovematic-solutions-page .sove-section:nth-of-type(7) .sove-inline-image { width: calc(100% + 24px) !important; margin: 0 -12px !important; height: 205px !important; } #sovematic-solutions-page .sove-section:nth-of-type(7) p { font-size: 12px !important; } #sovematic-solutions-page .sove-section:nth-of-type(7) p:nth-of-type(9) strong { font-size: 13px !important; line-height: 1.7 !important; } }/* ========================================================= MOBILE — CONTRÔLE D'ACCÈS PREMIUM / CENTRÉ / RESPONSIVE 0 → 767px ========================================================= */ @media (max-width: 767px) { /* ===================================================== SECTION ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(8) { padding: 34px 0 !important; } #sovematic-solutions-page .sove-section:nth-of-type(8) > .sove-container { display: flex !important; flex-direction: column !important; align-items: center !important; width: calc(100% - 18px) !important; max-width: 540px !important; margin: 0 auto !important; padding: 20px 14px 24px !important; border: 1px solid rgba(17,18,20,.07) !important; border-radius: 24px !important; background: radial-gradient( circle at 100% 0, rgba(31,78,95,.07), transparent 30% ), linear-gradient( 145deg, #FFFFFF, #F5F8F8 ) !important; box-shadow: 0 18px 42px rgba(17,18,20,.08) !important; overflow: hidden !important; } /* ===================================================== ORDRE MOBILE titre → image → accroche → contenu ===================================================== */ #sovematic-solutions-page h2#controle-acces { order: 1 !important; } #sovematic-solutions-page .sove-section:nth-of-type(8) .sove-inline-image { order: 2 !important; } #sovematic-solutions-page .sove-section:nth-of-type(8) .sove-container > :not(#controle-acces):not(.sove-inline-image) { order: 3 !important; } /* ===================================================== TITRE PRINCIPAL ===================================================== */ html body #sovematic-solutions-page h2#controle-acces { display: block !important; width: 100% !important; max-width: 470px !important; margin: 0 auto 18px !important; padding: 0 !important; color: #111214 !important; font-size: clamp(1.9rem, 8.5vw, 2.5rem) !important; line-height: .98 !important; letter-spacing: -.045em !important; text-align: center !important; text-wrap: balance !important; } /* supprime ancien 06 / badges */ html body #sovematic-solutions-page h2#controle-acces::before, html body #sovematic-solutions-page h2#controle-acces::after { content: none !important; display: none !important; } /* ===================================================== IMAGE ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(8) .sove-inline-image { position: relative !important; top: auto !important; left: auto !important; right: auto !important; width: calc(100% + 28px) !important; height: clamp(215px, 63vw, 290px) !important; margin: 0 -14px !important; border: 0 !important; border-radius: 0 !important; overflow: hidden !important; background: #111214 !important; box-shadow: none !important; } #sovematic-solutions-page .sove-section:nth-of-type(8) .sove-inline-image img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; } #sovematic-solutions-page .sove-section:nth-of-type(8) .sove-inline-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to top, rgba(17,18,20,.62), transparent 52% ); pointer-events: none; } /* légende */ #sovematic-solutions-page .sove-section:nth-of-type(8) .sove-inline-image figcaption { position: absolute !important; z-index: 3; left: 50% !important; right: auto !important; bottom: 12px !important; transform: translateX(-50%) !important; width: max-content !important; max-width: calc(100% - 24px) !important; margin: 0 !important; padding: 6px 9px !important; border-radius: 999px !important; background: rgba(17,18,20,.64) !important; color: rgba(255,255,255,.88) !important; font-size: 8.5px !important; line-height: 1.25 !important; text-align: center !important; backdrop-filter: blur(9px); } /* ===================================================== ACCROCHE FLOTTANTE ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(8) #controle-acces + h3 { position: relative !important; z-index: 5 !important; width: calc(100% - 18px) !important; margin: -21px auto 16px !important; padding: 13px 14px !important; border: 1px solid rgba(17,18,20,.07) !important; border-top: 3px solid #DE072D !important; border-radius: 15px !important; background: rgba(255,255,255,.97) !important; color: #1F4E5F !important; font-size: 13px !important; line-height: 1.35 !important; text-align: center !important; box-shadow: 0 13px 30px rgba(17,18,20,.11) !important; } /* ===================================================== MESSAGE CLÉ ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(8) #controle-acces + h3 + p { width: 100% !important; margin: 0 auto 17px !important; padding: 15px 14px !important; border-radius: 16px !important; background: linear-gradient( 145deg, #111214, #143744 ) !important; color: rgba(255,255,255,.80) !important; font-size: 12.5px !important; line-height: 1.55 !important; text-align: center !important; box-shadow: 0 12px 28px rgba(17,18,20,.12) !important; } #sovematic-solutions-page .sove-section:nth-of-type(8) #controle-acces + h3 + p strong { color: #fff !important; -webkit-text-fill-color: #fff !important; } /* ===================================================== INTRO UTILISATEURS ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(8) p:nth-of-type(2), #sovematic-solutions-page .sove-section:nth-of-type(8) p:nth-of-type(6) { width: 100% !important; max-width: 430px !important; margin: 0 auto 12px !important; padding: 0 !important; color: #5B6870 !important; font-size: 12px !important; line-height: 1.58 !important; text-align: center !important; } /* ===================================================== INTRO 4 QUESTIONS ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(8) p:nth-of-type(3) { width: 100% !important; margin: 20px auto 10px !important; color: #DE072D !important; font-size: 9.5px !important; line-height: 1.25 !important; font-weight: 900 !important; letter-spacing: .07em !important; text-transform: uppercase !important; text-align: center !important; } #sovematic-solutions-page .sove-section:nth-of-type(8) p:nth-of-type(3)::before { content: "RÈGLES D'ACCÈS"; display: table; width: max-content; margin: 0 auto 8px; padding: 6px 9px; border-radius: 999px; background: rgba(222,7,45,.09); color: #DE072D; font-size: 8px; font-weight: 900; letter-spacing: .08em; } /* ===================================================== QUI ? OÙ ? QUAND ? AVEC QUELS DROITS ? ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(8) p:nth-of-type(4) { position: relative !important; width: 100% !important; margin: 0 auto 20px !important; padding: 19px 14px !important; border-radius: 18px !important; background: radial-gradient( circle at 50% 0, rgba(222,7,45,.15), transparent 60% ), linear-gradient( 145deg, #111214, #143744 ) !important; text-align: center !important; box-shadow: 0 14px 32px rgba(17,18,20,.14) !important; } #sovematic-solutions-page .sove-section:nth-of-type(8) p:nth-of-type(4) strong { display: block !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: 14px !important; line-height: 1.75 !important; letter-spacing: .015em !important; text-align: center !important; } /* ===================================================== INTRO TECHNOLOGIES ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(8) p:nth-of-type(5) { width: 100% !important; max-width: 430px !important; margin: 0 auto 13px !important; color: #1F4E5F !important; font-size: 10px !important; line-height: 1.4 !important; font-weight: 900 !important; letter-spacing: .055em !important; text-transform: uppercase !important; text-align: center !important; } #sovematic-solutions-page .sove-section:nth-of-type(8) p:nth-of-type(5)::before { content: "TECHNOLOGIES"; display: table; margin: 0 auto 9px; padding: 6px 9px; border-radius: 999px; background: rgba(31,78,95,.08); color: #1F4E5F; font-size: 8px; font-weight: 900; letter-spacing: .08em; } /* ===================================================== TECHNOLOGIES EN CARTES ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(8) ul { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px !important; width: 100% !important; margin: 0 auto 20px !important; padding: 0 !important; list-style: none !important; } #sovematic-solutions-page .sove-section:nth-of-type(8) ul li { position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 8px !important; min-width: 0 !important; min-height: 102px !important; margin: 0 !important; padding: 12px 9px !important; border: 1px solid rgba(31,78,95,.10) !important; border-radius: 15px !important; background: linear-gradient( 145deg, #fff, #F1F6F7 ) !important; color: #425159 !important; font-size: 11px !important; line-height: 1.35 !important; text-align: center !important; box-shadow: 0 7px 18px rgba(17,18,20,.045) !important; } /* dernier élément plus large */ #sovematic-solutions-page .sove-section:nth-of-type(8) ul li:last-child { grid-column: 1 / -1 !important; min-height: 82px !important; } /* carré rouge = accès / validation */ #sovematic-solutions-page .sove-section:nth-of-type(8) ul li::before { content: "" !important; position: static !important; flex: 0 0 20px !important; width: 20px !important; height: 20px !important; margin: 0 !important; transform: none !important; border: 0 !important; border-radius: 6px !important; background: linear-gradient( 135deg, #DE072D, #B80627 ) !important; box-shadow: 0 6px 14px rgba(222,7,45,.20) !important; } /* ===================================================== CONCLUSION INTERMÉDIAIRE ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(8) p:nth-of-type(6) { margin-bottom: 18px !important; } /* ===================================================== PRINCIPE FINAL OBSTACLE PHYSIQUE / DÉCISION ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(8) p:nth-of-type(7) { position: relative !important; width: 100% !important; margin: 0 auto 20px !important; padding: 18px 14px !important; border: 1px solid rgba(31,78,95,.11) !important; border-top: 3px solid #DE072D !important; border-radius: 17px !important; background: linear-gradient( 145deg, rgba(31,78,95,.09), rgba(31,78,95,.025) ) !important; color: #111214 !important; text-align: center !important; } #sovematic-solutions-page .sove-section:nth-of-type(8) p:nth-of-type(7)::before { content: "PRINCIPE À RETENIR"; display: table; margin: 0 auto 10px; padding: 6px 9px; border-radius: 999px; background: rgba(222,7,45,.09); color: #DE072D; font-size: 8px; line-height: 1; font-weight: 900; letter-spacing: .08em; } #sovematic-solutions-page .sove-section:nth-of-type(8) p:nth-of-type(7) strong { display: block !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; font-size: 12.5px !important; line-height: 1.55 !important; text-align: center !important; } /* ===================================================== CTA ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(8) .sove-actions { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; margin: 0 auto !important; } #sovematic-solutions-page .sove-section:nth-of-type(8) .sove-actions .sove-btn { width: min(100%, 350px) !important; min-width: 0 !important; min-height: 50px !important; margin: 0 auto !important; padding: 12px 15px !important; justify-content: center !important; border-radius: 999px !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: 11.5px !important; line-height: 1.25 !important; text-align: center !important; white-space: normal !important; box-shadow: 0 13px 28px rgba(222,7,45,.22) !important; } } /* ========================================================= PETITS TÉLÉPHONES ≤ 390px ========================================================= */ @media (max-width: 390px) { #sovematic-solutions-page .sove-section:nth-of-type(8) > .sove-container { width: calc(100% - 12px) !important; padding: 18px 12px 22px !important; border-radius: 21px !important; } #sovematic-solutions-page h2#controle-acces { font-size: clamp(1.7rem,8.8vw,2.1rem) !important; } #sovematic-solutions-page .sove-section:nth-of-type(8) .sove-inline-image { width: calc(100% + 24px) !important; margin: 0 -12px !important; height: 205px !important; } /* technologies : 1 colonne */ #sovematic-solutions-page .sove-section:nth-of-type(8) ul { grid-template-columns: 1fr !important; } #sovematic-solutions-page .sove-section:nth-of-type(8) ul li, #sovematic-solutions-page .sove-section:nth-of-type(8) ul li:last-child { grid-column: auto !important; flex-direction: row !important; min-height: 54px !important; padding: 11px 13px !important; } #sovematic-solutions-page .sove-section:nth-of-type(8) p { font-size: 12px !important; } }/* ========================================================= ========================================================= MOBILE — "PLUSIEURS SOLUTIONS PEUVENT FONCTIONNER ENSEMBLE" CAMPING / RÉSIDENCE / HÔTEL / PARKING 0 → 767px ========================================================= ========================================================= */ @media (max-width: 767px) { /* ===================================================== 01 — SECTION GLOBALE ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(10) { padding: 46px 0 !important; overflow: hidden !important; } #sovematic-solutions-page .sove-section:nth-of-type(10) > .sove-container { display: flex !important; flex-direction: column !important; align-items: center !important; width: calc(100% - 18px) !important; max-width: 560px !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; } /* titre principal */ #sovematic-solutions-page .sove-section:nth-of-type(10) > .sove-container > h2 { width: 100% !important; max-width: 500px !important; margin: 0 auto 16px !important; padding: 0 !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: clamp(2rem, 9vw, 2.6rem) !important; line-height: .98 !important; letter-spacing: -.045em !important; text-align: center !important; text-wrap: balance !important; } /* intro */ #sovematic-solutions-page .sove-section:nth-of-type(10) > .sove-container > h2 + p { width: 100% !important; max-width: 430px !important; margin: 0 auto 28px !important; color: rgba(255,255,255,.68) !important; -webkit-text-fill-color: rgba(255,255,255,.68) !important; font-size: 12.5px !important; line-height: 1.6 !important; text-align: center !important; } /* ===================================================== ===================================================== 02 — CAMPING ===================================================== ===================================================== */ .sove-camping-combo { width: 100% !important; max-width: 100% !important; margin: 26px auto 34px !important; text-align: center !important; } .sove-camping-combo__grid { display: grid !important; grid-template-columns: 1fr !important; gap: 16px !important; width: 100% !important; } /* bloc écosystème */ .sove-camping-combo .sove-ecosystem-camping { width: 100% !important; margin: 0 auto !important; padding: 22px 14px !important; border-radius: 22px !important; text-align: center !important; } /* entête */ .sove-camping-combo .sove-ecosystem-top { width: 100% !important; margin: 0 auto 22px !important; text-align: center !important; } .sove-camping-combo .sove-ecosystem-badge { margin: 0 auto 12px !important; } .sove-camping-combo .sove-ecosystem-top h3 { width: max-content !important; max-width: 100% !important; margin: 0 auto 11px !important; padding: 8px 13px !important; font-size: 16px !important; text-align: center !important; } .sove-camping-combo .sove-ecosystem-top p { width: 100% !important; max-width: 390px !important; margin: 0 auto !important; font-size: 12px !important; line-height: 1.55 !important; text-align: center !important; } /* cartes camping */ .sove-camping-combo .sove-ecosystem-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; width: 100% !important; } .sove-camping-combo .sove-ecosystem-card { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; min-height: 0 !important; width: 100% !important; padding: 18px 14px !important; border-radius: 17px !important; text-align: center !important; } /* numéro */ .sove-camping-combo .sove-ecosystem-number { margin: 0 auto 12px !important; } .sove-camping-combo .sove-ecosystem-card h4 { width: 100% !important; margin: 0 auto 12px !important; text-align: center !important; } /* liste centrée */ .sove-camping-combo .sove-ecosystem-card ul { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; margin: 0 auto !important; padding: 0 !important; } .sove-camping-combo .sove-ecosystem-card ul li { display: flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important; width: auto !important; margin: 0 auto 8px !important; padding: 0 !important; text-align: center !important; } .sove-camping-combo .sove-ecosystem-card ul li::before { position: static !important; flex: 0 0 8px !important; margin: 0 !important; transform: none !important; } /* ===================================================== CAMPING — LOGIQUE D'ENSEMBLE ===================================================== */ .sove-camping-combo__right { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; padding: 22px 15px !important; border-radius: 22px !important; text-align: center !important; } .sove-camping-combo__right-badge { margin: 0 auto 13px !important; } .sove-camping-combo__lead { width: 100% !important; max-width: 390px !important; margin: 0 auto 13px !important; font-size: 12px !important; line-height: 1.55 !important; text-align: center !important; } .sove-camping-combo__right h3 { width: 100% !important; max-width: 390px !important; margin: 0 auto 17px !important; font-size: 18px !important; line-height: 1.15 !important; text-align: center !important; } /* parcours client */ .sove-camping-path { width: 100% !important; margin: 0 auto 16px !important; padding: 16px 12px !important; border-radius: 17px !important; text-align: center !important; } .sove-camping-path__badge { display: table !important; margin: 0 auto 9px !important; } .sove-camping-path p { margin: 0 auto !important; font-size: 12px !important; line-height: 1.65 !important; text-align: center !important; } .sove-camping-combo__explanation { max-width: 400px !important; margin: 0 auto 18px !important; font-size: 12px !important; line-height: 1.55 !important; text-align: center !important; } /* ===================================================== ===================================================== 03 — RÉSIDENCE ===================================================== ===================================================== */ .sove-residence-example { width: 100% !important; max-width: 100% !important; margin: 34px auto !important; text-align: center !important; } .sove-residence-head { width: 100% !important; margin: 0 auto 20px !important; text-align: center !important; } .sove-residence-head h3 { width: 100% !important; max-width: 440px !important; margin: 0 auto 12px !important; font-size: 19px !important; line-height: 1.15 !important; text-align: center !important; } .sove-residence-head p { max-width: 390px !important; margin: 0 auto !important; font-size: 12px !important; line-height: 1.55 !important; text-align: center !important; } /* écosystème résidence */ .sove-ecosystem-residence { width: 100% !important; max-width: none !important; margin: 0 auto 18px !important; padding: 22px 14px !important; border-radius: 22px !important; text-align: center !important; } .sove-residence-example .sove-ecosystem-top { text-align: center !important; } .sove-residence-example .sove-ecosystem-badge { margin: 0 auto 12px !important; } .sove-residence-example .sove-ecosystem-top h4 { text-align: center !important; } .sove-residence-example .sove-ecosystem-top p { max-width: 390px !important; margin: 0 auto !important; font-size: 12px !important; text-align: center !important; } .sove-residence-example .sove-ecosystem-grid--single { display: grid !important; grid-template-columns: 1fr !important; width: 100% !important; max-width: 390px !important; margin: 0 auto !important; } .sove-residence-example .sove-ecosystem-card { display: flex !important; flex-direction: column !important; align-items: center !important; min-height: 0 !important; padding: 20px 15px !important; text-align: center !important; } .sove-residence-example .sove-ecosystem-number { margin: 0 auto 12px !important; } .sove-residence-example .sove-ecosystem-card h5 { width: 100% !important; text-align: center !important; } .sove-residence-example .sove-ecosystem-card ul { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; } .sove-residence-example .sove-ecosystem-card ul li { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: auto !important; margin: 0 auto 8px !important; padding: 0 !important; text-align: center !important; } .sove-residence-example .sove-ecosystem-card ul li::before { position: static !important; margin: 0 !important; transform: none !important; } /* problème / réponse */ .sove-residence-problem { width: 100% !important; text-align: center !important; } .sove-residence-problem-intro { max-width: 390px !important; margin: 0 auto 12px !important; font-size: 12px !important; text-align: center !important; } .sove-residence-problem-card, .sove-residence-answer-card { width: 100% !important; max-width: 430px !important; margin: 0 auto 10px !important; padding: 18px 14px !important; border-radius: 17px !important; text-align: center !important; } .sove-residence-problem-badge { display: table !important; margin: 0 auto 10px !important; } .sove-residence-problem-card p, .sove-residence-answer-card p { margin: 0 auto !important; font-size: 12px !important; line-height: 1.55 !important; text-align: center !important; } /* ===================================================== ===================================================== 04 — HÔTEL / HÉBERGEMENT ===================================================== ===================================================== */ .sove-hotel-combo { width: 100% !important; max-width: 100% !important; margin: 34px auto !important; text-align: center !important; } .sove-hotel-combo__grid { display: grid !important; grid-template-columns: 1fr !important; gap: 16px !important; } .sove-hotel-combo__left, .sove-hotel-combo__right { width: 100% !important; padding: 22px 14px !important; border-radius: 22px !important; text-align: center !important; } /* intro hôtel */ .sove-hotel-combo__head { width: 100% !important; margin: 0 auto 22px !important; text-align: center !important; } .sove-hotel-combo__kicker { margin: 0 auto 12px !important; } .sove-hotel-combo__head h3 { width: 100% !important; max-width: 430px !important; margin: 0 auto 12px !important; font-size: 20px !important; line-height: 1.05 !important; text-align: center !important; } .sove-hotel-combo__head > p { max-width: 390px !important; margin: 0 auto !important; font-size: 12px !important; line-height: 1.55 !important; text-align: center !important; } /* sous-entête écosystème */ .sove-hotel-combo__ecosystem-head { width: 100% !important; margin: 0 auto 18px !important; text-align: center !important; } .sove-hotel-combo__ecosystem-badge { margin: 0 auto 10px !important; } /* flow hôtel */ .sove-hotel-combo__flow { display: grid !important; grid-template-columns: 1fr !important; gap: 9px !important; width: 100% !important; } .sove-hotel-combo__step { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; min-height: 0 !important; padding: 15px 12px !important; border-radius: 16px !important; text-align: center !important; } .sove-hotel-combo__step-number { margin: 0 auto 8px !important; } .sove-hotel-combo__step strong, .sove-hotel-combo__step small { display: block !important; width: 100% !important; text-align: center !important; } /* droite hôtel */ .sove-hotel-combo__right { display: flex !important; flex-direction: column !important; align-items: center !important; } .sove-hotel-combo__right-badge { margin: 0 auto 12px !important; } .sove-hotel-combo__right h3 { width: 100% !important; max-width: 410px !important; margin: 0 auto 13px !important; font-size: 18px !important; line-height: 1.15 !important; text-align: center !important; } .sove-hotel-combo__lead { max-width: 390px !important; margin: 0 auto 16px !important; font-size: 12px !important; line-height: 1.55 !important; text-align: center !important; } /* objectif */ .sove-hotel-combo__objective { width: 100% !important; margin: 0 auto 16px !important; padding: 16px 13px !important; border-radius: 17px !important; text-align: center !important; } .sove-hotel-combo__objective-badge { display: table !important; margin: 0 auto 9px !important; } .sove-hotel-combo__objective p { margin: 0 auto !important; font-size: 12px !important; line-height: 1.55 !important; text-align: center !important; } /* points */ .sove-hotel-combo__points { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; width: 100% !important; margin: 0 auto 18px !important; } .sove-hotel-combo__point { width: 100% !important; padding: 13px 12px !important; border-radius: 14px !important; font-size: 11.5px !important; line-height: 1.4 !important; text-align: center !important; } /* ===================================================== ===================================================== 05 — PARKING / SITE CONTRÔLÉ ===================================================== ===================================================== */ .sove-parking-example { width: 100% !important; max-width: 100% !important; margin: 34px auto 22px !important; text-align: center !important; } .sove-parking-head { width: 100% !important; margin: 0 auto 20px !important; text-align: center !important; } .sove-parking-kicker { display: table !important; margin: 0 auto 11px !important; } .sove-parking-head h3 { width: 100% !important; max-width: 430px !important; margin: 0 auto 11px !important; font-size: 19px !important; line-height: 1.15 !important; text-align: center !important; } .sove-parking-head p { max-width: 390px !important; margin: 0 auto !important; font-size: 12px !important; line-height: 1.55 !important; text-align: center !important; } /* écosystème parking */ .sove-parking-ecosystem { width: 100% !important; padding: 22px 14px !important; border-radius: 22px !important; text-align: center !important; } .sove-parking-top { width: 100% !important; text-align: center !important; } .sove-parking-top > span { display: table !important; margin: 0 auto 10px !important; } .sove-parking-top h4 { width: 100% !important; text-align: center !important; } .sove-parking-top p { max-width: 390px !important; margin: 0 auto 18px !important; font-size: 12px !important; text-align: center !important; } /* flow parking */ .sove-parking-flow { display: grid !important; grid-template-columns: 1fr !important; gap: 9px !important; width: 100% !important; } /* supprime les flèches intermédiaires */ .sove-parking-arrow { display: none !important; } .sove-parking-step { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 0 !important; padding: 15px 12px !important; border-radius: 16px !important; text-align: center !important; } .sove-parking-step > span { margin: 0 auto 8px !important; } .sove-parking-step strong, .sove-parking-step small { display: block !important; width: 100% !important; text-align: center !important; } /* résumé */ .sove-parking-summary { width: 100% !important; margin: 18px auto 0 !important; text-align: center !important; } .sove-parking-summary-intro { max-width: 390px !important; margin: 0 auto 13px !important; font-size: 12px !important; text-align: center !important; } .sove-parking-summary-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; width: 100% !important; } .sove-parking-summary-card { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 0 !important; padding: 18px 14px !important; border-radius: 17px !important; text-align: center !important; } .sove-parking-summary-card > span { margin: 0 auto 9px !important; } .sove-parking-summary-card strong, .sove-parking-summary-card p { width: 100% !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; } .sove-parking-summary-card p { font-size: 12px !important; line-height: 1.5 !important; } /* ===================================================== 06 — TOUS LES CTA DE CETTE PARTIE ===================================================== */ .sove-camping-combo .sove-actions, .sove-hotel-combo .sove-actions, #sovematic-solutions-page .sove-parking-example + .sove-actions { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; margin: 20px auto 0 !important; } .sove-camping-combo .sove-actions .sove-btn, .sove-hotel-combo .sove-actions .sove-btn, #sovematic-solutions-page .sove-parking-example + .sove-actions .sove-btn { width: min(100%, 350px) !important; min-width: 0 !important; min-height: 50px !important; margin: 0 auto !important; padding: 12px 15px !important; justify-content: center !important; border-radius: 999px !important; font-size: 11px !important; line-height: 1.3 !important; text-align: center !important; white-space: normal !important; } /* ===================================================== IMAGE FINALE DE LA SECTION ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(10) > .sove-container > .sove-inline-image { position: relative !important; width: 100% !important; max-width: 500px !important; height: clamp(220px, 65vw, 300px) !important; margin: 30px auto 0 !important; border-radius: 20px !important; overflow: hidden !important; } #sovematic-solutions-page .sove-section:nth-of-type(10) > .sove-container > .sove-inline-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; } #sovematic-solutions-page .sove-section:nth-of-type(10) > .sove-container > .sove-inline-image figcaption { left: 50% !important; bottom: 12px !important; transform: translateX(-50%) !important; width: max-content !important; max-width: calc(100% - 24px) !important; font-size: 8.5px !important; text-align: center !important; } } /* ========================================================= MOBILE LARGE 480px → 767px On exploite mieux la largeur ========================================================= */ @media (min-width: 480px) and (max-width: 767px) { /* CAMPING : 2 cartes puis dernière pleine largeur */ .sove-camping-combo .sove-ecosystem-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } .sove-camping-combo .sove-ecosystem-card:last-child { grid-column: 1 / -1 !important; } /* HÔTEL : parcours en 2 colonnes */ .sove-hotel-combo__flow { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } .sove-hotel-combo__step:last-child { grid-column: 1 / -1 !important; } /* PARKING : parcours 2 colonnes */ .sove-parking-flow { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } .sove-parking-step:last-child { grid-column: 1 / -1 !important; } /* résumé parking : 2 colonnes */ .sove-parking-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } } /* ========================================================= PETITS TÉLÉPHONES ≤ 390px ========================================================= */ @media (max-width: 390px) { .sove-camping-combo, .sove-residence-example, .sove-hotel-combo, .sove-parking-example { width: 100% !important; max-width: 100% !important; } .sove-camping-combo .sove-ecosystem-camping, .sove-camping-combo__right, .sove-ecosystem-residence, .sove-hotel-combo__left, .sove-hotel-combo__right, .sove-parking-ecosystem { padding: 18px 11px !important; border-radius: 19px !important; } .sove-camping-combo .sove-ecosystem-card, .sove-hotel-combo__step, .sove-parking-step, .sove-parking-summary-card { border-radius: 14px !important; } .sove-camping-combo p, .sove-residence-example p, .sove-hotel-combo p, .sove-parking-example p { font-size: 11.5px !important; } }/* ========================================================= MOBILE — DES PREUVES PLUTÔT QUE DES PROMESSES PREMIUM / CENTRÉ / RESPONSIVE 0 → 767px ========================================================= */ @media (max-width: 767px) { /* ===================================================== SECTION ===================================================== */ .sove-proof-section { padding: 46px 0 !important; overflow: hidden !important; } .sove-proof-section__inner { width: calc(100% - 18px) !important; max-width: 560px !important; margin: 0 auto !important; } /* ===================================================== HEADER ===================================================== */ .sove-proof-section__head { width: 100% !important; max-width: 500px !important; margin: 0 auto 28px !important; text-align: center !important; } .sove-proof-section__kicker { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 auto 12px !important; padding: 7px 10px !important; font-size: 8.5px !important; text-align: center !important; } .sove-proof-section__head h2 { width: 100% !important; max-width: 480px !important; margin: 0 auto 14px !important; font-size: clamp(2rem, 9vw, 2.65rem) !important; line-height: .98 !important; letter-spacing: -.045em !important; text-align: center !important; text-wrap: balance !important; } /* intro plus discrète */ .sove-proof-section__head p { width: 100% !important; max-width: 410px !important; margin: 0 auto !important; color: #65727A !important; font-size: 12.5px !important; line-height: 1.58 !important; text-align: center !important; } /* ===================================================== 4 PREUVES CHIFFRÉES 2 CARTES PAR LIGNE ===================================================== */ .sove-proof-stats { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 9px !important; width: 100% !important; margin: 0 auto 26px !important; } .sove-proof-stat { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; min-width: 0 !important; min-height: 155px !important; padding: 16px 10px !important; border-radius: 17px !important; text-align: center !important; } .sove-proof-stat__label { display: block !important; width: 100% !important; margin: 0 auto 10px !important; font-size: 8.5px !important; line-height: 1 !important; text-align: center !important; } .sove-proof-stat strong { display: block !important; width: 100% !important; margin: 0 auto 7px !important; font-size: clamp(1.6rem, 8vw, 2.15rem) !important; line-height: 1 !important; text-align: center !important; } .sove-proof-stat p { width: 100% !important; max-width: 180px !important; margin: 0 auto !important; font-size: 10.5px !important; line-height: 1.4 !important; text-align: center !important; } /* ===================================================== PANNEAU + IMAGE ===================================================== */ .sove-proof-main { display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; width: 100% !important; margin: 0 auto !important; } /* ===================================================== PANNEAU "NOTRE MÉTIER" ===================================================== */ .sove-proof-panel { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; padding: 22px 14px !important; border-radius: 22px !important; text-align: center !important; } .sove-proof-panel__badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: max-content !important; margin: 0 auto 12px !important; font-size: 8.5px !important; text-align: center !important; } .sove-proof-panel > h3 { width: 100% !important; max-width: 430px !important; margin: 0 auto 12px !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: 19px !important; line-height: 1.12 !important; text-align: center !important; text-wrap: balance !important; } .sove-proof-panel > p { width: 100% !important; max-width: 390px !important; margin: 0 auto 20px !important; color: rgba(255,255,255,.68) !important; -webkit-text-fill-color: rgba(255,255,255,.68) !important; font-size: 11.5px !important; line-height: 1.55 !important; text-align: center !important; } /* ===================================================== 4 PREUVES MÉTIER ===================================================== */ .sove-proof-list { display: grid !important; grid-template-columns: 1fr !important; gap: 9px !important; width: 100% !important; margin: 0 auto !important; } .sove-proof-list__item { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 9px !important; width: 100% !important; min-height: 0 !important; padding: 15px 12px !important; border-radius: 15px !important; text-align: center !important; } .sove-proof-list__number { display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 auto !important; align-self: center !important; } .sove-proof-list__content { width: 100% !important; text-align: center !important; } .sove-proof-list__content strong { display: block !important; width: 100% !important; margin: 0 auto 5px !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: 12.5px !important; line-height: 1.3 !important; text-align: center !important; } .sove-proof-list__content p { width: 100% !important; margin: 0 auto !important; color: rgba(255,255,255,.65) !important; -webkit-text-fill-color: rgba(255,255,255,.65) !important; font-size: 10.5px !important; line-height: 1.4 !important; text-align: center !important; } /* ===================================================== IMAGE TERRAIN ===================================================== */ .sove-proof-media { position: relative !important; width: 100% !important; min-height: 0 !important; height: clamp(300px, 88vw, 420px) !important; margin: 0 auto !important; border-radius: 22px !important; overflow: hidden !important; } .sove-proof-media img { display: block !important; width: 100% !important; height: 100% !important; min-height: 0 !important; object-fit: cover !important; } /* ===================================================== TEXTE SUR IMAGE ===================================================== */ .sove-proof-media__content { position: absolute !important; left: 12px !important; right: 12px !important; bottom: 12px !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 15px 13px !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 16px !important; background: rgba(17,18,20,.73) !important; backdrop-filter: blur(12px); text-align: center !important; } .sove-proof-media__content > span { display: table !important; margin: 0 auto 8px !important; font-size: 8px !important; text-align: center !important; } .sove-proof-media__content h3 { width: 100% !important; margin: 0 auto 7px !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: 15px !important; line-height: 1.2 !important; text-align: center !important; } .sove-proof-media__content p { width: 100% !important; margin: 0 auto !important; color: rgba(255,255,255,.72) !important; -webkit-text-fill-color: rgba(255,255,255,.72) !important; font-size: 10.5px !important; line-height: 1.45 !important; text-align: center !important; } /* ===================================================== CONCLUSION ===================================================== */ .sove-proof-conclusion { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 14px !important; width: 100% !important; margin: 18px auto 0 !important; padding: 20px 15px !important; border-radius: 20px !important; text-align: center !important; } /* icône au-dessus */ .sove-proof-conclusion__icon { display: flex !important; align-items: center !important; justify-content: center !important; order: -1 !important; margin: 0 auto !important; flex: none !important; } .sove-proof-conclusion__copy { width: 100% !important; text-align: center !important; } .sove-proof-conclusion__copy > span { display: table !important; margin: 0 auto 9px !important; text-align: center !important; } .sove-proof-conclusion__copy h3 { width: 100% !important; max-width: 410px !important; margin: 0 auto 9px !important; font-size: 18px !important; line-height: 1.15 !important; text-align: center !important; } .sove-proof-conclusion__copy p { width: 100% !important; max-width: 400px !important; margin: 0 auto !important; font-size: 11.5px !important; line-height: 1.55 !important; text-align: center !important; } } /* ========================================================= MOBILE PLUS LARGE 480px → 767px ========================================================= */ @media (min-width: 480px) and (max-width: 767px) { /* les stats restent en 2 x 2 */ .sove-proof-stats { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } /* les preuves métier peuvent passer en 2 colonnes */ .sove-proof-list { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } .sove-proof-list__item { min-height: 145px !important; } } /* ========================================================= PETITS TÉLÉPHONES ≤ 390px ========================================================= */ @media (max-width: 390px) { .sove-proof-section__inner { width: calc(100% - 12px) !important; } .sove-proof-section__head h2 { font-size: clamp(1.85rem, 9.4vw, 2.25rem) !important; } /* sur écran vraiment étroit : une seule carte par ligne */ .sove-proof-stats { grid-template-columns: 1fr !important; } .sove-proof-stat { min-height: 130px !important; } .sove-proof-panel { padding: 18px 11px !important; border-radius: 19px !important; } .sove-proof-media { height: 330px !important; border-radius: 19px !important; } .sove-proof-media__content { left: 9px !important; right: 9px !important; bottom: 9px !important; padding: 13px 11px !important; } .sove-proof-conclusion { padding: 18px 12px !important; border-radius: 18px !important; } }/* ========================================================= MOBILE — QUELLE SOLUTION SELON VOTRE ÉTABLISSEMENT ? PREMIUM / CENTRÉ / RESPONSIVE 0 → 767px ========================================================= */ @media (max-width: 767px) { /* ===================================================== SECTION ===================================================== */ .sove-establishment { padding: 46px 0 !important; overflow: hidden !important; } .sove-establishment__inner { width: calc(100% - 18px) !important; max-width: 560px !important; margin: 0 auto !important; } /* ===================================================== INTRO ===================================================== */ .sove-establishment__head { width: 100% !important; max-width: 500px !important; margin: 0 auto 28px !important; text-align: center !important; } .sove-establishment__kicker { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 auto 12px !important; padding: 7px 10px !important; font-size: 8.5px !important; text-align: center !important; } .sove-establishment__head h2 { width: 100% !important; max-width: 480px !important; margin: 0 auto 14px !important; font-size: clamp(2rem, 9vw, 2.65rem) !important; line-height: .98 !important; letter-spacing: -.045em !important; text-align: center !important; text-wrap: balance !important; } /* intro volontairement plus petite */ .sove-establishment__head p { width: 100% !important; max-width: 410px !important; margin: 0 auto !important; color: #65727A !important; font-size: 12px !important; line-height: 1.55 !important; text-align: center !important; } /* ===================================================== GRILLE 1 COLONNE PAR DÉFAUT ===================================================== */ .sove-establishment__grid { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; width: 100% !important; } /* ===================================================== CARTES ===================================================== */ .sove-establishment-card { position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important; padding: 18px 14px 20px !important; border-radius: 18px !important; text-align: center !important; box-shadow: 0 10px 26px rgba(17,18,20,.055) !important; transform: none !important; } .sove-establishment-card:hover { transform: none !important; } /* ligne décorative du bas */ .sove-establishment-card::after { height: 3px !important; background: linear-gradient( 90deg, transparent, #DE072D, #1F4E5F, transparent ) !important; } /* ===================================================== HAUT DE CARTE ===================================================== */ .sove-establishment-card__top { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: 100% !important; margin: 0 auto 14px !important; } /* numéro */ .sove-establishment-card__number { display: flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; height: 38px !important; margin: 0 auto !important; border-radius: 11px !important; font-size: 9.5px !important; } /* type */ .sove-establishment-card__type { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: max-content !important; max-width: 100% !important; margin: 0 auto !important; padding: 6px 9px !important; font-size: 8px !important; line-height: 1 !important; text-align: center !important; } /* ===================================================== TITRE DE CARTE ===================================================== */ .sove-establishment-card h3 { width: 100% !important; max-width: 390px !important; margin: 0 auto 7px !important; color: #111214 !important; font-size: 16px !important; line-height: 1.15 !important; letter-spacing: -.02em !important; text-align: center !important; text-wrap: balance !important; } /* description */ .sove-establishment-card__label { width: 100% !important; max-width: 360px !important; margin: 0 auto 14px !important; color: #65727A !important; font-size: 10.5px !important; line-height: 1.45 !important; text-align: center !important; } /* ===================================================== TAGS SOLUTIONS ===================================================== */ .sove-establishment-card__solutions { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 6px !important; width: 100% !important; margin: 0 auto !important; } .sove-establishment-card__solutions span { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 0 !important; max-width: 100% !important; padding: 7px 9px !important; border-radius: 999px !important; font-size: 9.5px !important; line-height: 1.2 !important; text-align: center !important; white-space: normal !important; } .sove-establishment-card__solutions span::before { flex: 0 0 5px !important; width: 5px !important; height: 5px !important; margin-right: 5px !important; } /* ===================================================== BLOC "À RETENIR" ===================================================== */ .sove-establishment__notice { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 13px !important; width: 100% !important; margin: 18px auto 0 !important; padding: 20px 14px !important; border-radius: 20px !important; text-align: center !important; } /* icône ! */ .sove-establishment__notice-icon { display: flex !important; align-items: center !important; justify-content: center !important; width: 48px !important; height: 48px !important; margin: 0 auto !important; border-radius: 14px !important; font-size: 18px !important; } .sove-establishment__notice-copy { width: 100% !important; text-align: center !important; } .sove-establishment__notice-copy > span { display: table !important; width: max-content !important; margin: 0 auto 8px !important; font-size: 8px !important; text-align: center !important; } .sove-establishment__notice-copy > h3 { width: 100% !important; max-width: 420px !important; margin: 0 auto 8px !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: 17px !important; line-height: 1.18 !important; text-align: center !important; } .sove-establishment__notice-copy > p { width: 100% !important; max-width: 400px !important; margin: 0 auto !important; color: rgba(255,255,255,.70) !important; -webkit-text-fill-color: rgba(255,255,255,.70) !important; font-size: 11px !important; line-height: 1.5 !important; text-align: center !important; } } /* ========================================================= TÉLÉPHONES LARGES 480px → 767px 2 CARTES PAR LIGNE ========================================================= */ @media (min-width: 480px) and (max-width: 767px) { .sove-establishment__grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 9px !important; } .sove-establishment-card { min-height: 230px !important; padding: 16px 10px 18px !important; } .sove-establishment-card h3 { font-size: 14px !important; } .sove-establishment-card__label { font-size: 10px !important; } .sove-establishment-card__solutions span { padding: 6px 7px !important; font-size: 8.5px !important; } } /* ========================================================= PETITS TÉLÉPHONES ≤ 390px ========================================================= */ @media (max-width: 390px) { .sove-establishment__inner { width: calc(100% - 12px) !important; } .sove-establishment__head h2 { font-size: clamp(1.85rem, 9.2vw, 2.25rem) !important; } .sove-establishment-card { padding: 17px 12px 19px !important; border-radius: 16px !important; } .sove-establishment-card__top { margin-bottom: 12px !important; } .sove-establishment-card h3 { font-size: 15px !important; } .sove-establishment__notice { padding: 18px 12px !important; border-radius: 18px !important; } }/* ========================================================= MOBILE — FAQ SOVEMATIC PREMIUM / CENTRÉ / RESPONSIVE 0 → 767px ========================================================= */ @media (max-width: 767px) { /* ===================================================== SECTION ===================================================== */ .sove-faq-premium { padding: 46px 0 !important; overflow: hidden !important; } .sove-faq-premium__inner { width: calc(100% - 18px) !important; max-width: 560px !important; margin: 0 auto !important; } /* ===================================================== HEADER ===================================================== */ .sove-faq-premium__head { width: 100% !important; max-width: 500px !important; margin: 0 auto 28px !important; text-align: center !important; } .sove-faq-premium__kicker { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 auto 12px !important; padding: 7px 10px !important; font-size: 8.5px !important; text-align: center !important; } .sove-faq-premium__head h2 { width: 100% !important; max-width: 480px !important; margin: 0 auto 14px !important; font-size: clamp(2rem, 9vw, 2.65rem) !important; line-height: .98 !important; letter-spacing: -.045em !important; text-align: center !important; text-wrap: balance !important; } /* intro plus petite */ .sove-faq-premium__head p { width: 100% !important; max-width: 410px !important; margin: 0 auto !important; color: #65727A !important; font-size: 12px !important; line-height: 1.55 !important; text-align: center !important; } /* ===================================================== LAYOUT ===================================================== */ .sove-faq-premium__grid { display: grid !important; grid-template-columns: 1fr !important; gap: 18px !important; width: 100% !important; } /* ===================================================== BLOC CONSEIL ===================================================== */ .sove-faq-premium__aside { position: static !important; top: auto !important; width: 100% !important; } .sove-faq-premium__card { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; padding: 22px 14px !important; border-radius: 22px !important; text-align: center !important; } /* badge */ .sove-faq-premium__card-badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: max-content !important; margin: 0 auto 12px !important; padding: 7px 10px !important; font-size: 8px !important; text-align: center !important; } /* titre */ .sove-faq-premium__card h3 { width: 100% !important; max-width: 410px !important; margin: 0 auto 12px !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: 19px !important; line-height: 1.12 !important; text-align: center !important; text-wrap: balance !important; } /* texte */ .sove-faq-premium__card > p { width: 100% !important; max-width: 390px !important; margin: 0 auto 18px !important; color: rgba(255,255,255,.68) !important; -webkit-text-fill-color: rgba(255,255,255,.68) !important; font-size: 11.5px !important; line-height: 1.55 !important; text-align: center !important; } /* ===================================================== 3 POINTS ===================================================== */ .sove-faq-premium__points { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; width: 100% !important; margin: 0 auto 18px !important; } .sove-faq-premium__point { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 8px !important; min-height: 76px !important; padding: 12px 12px !important; border-radius: 14px !important; color: rgba(255,255,255,.80) !important; -webkit-text-fill-color: rgba(255,255,255,.80) !important; font-size: 11px !important; line-height: 1.4 !important; text-align: center !important; } /* coche centrée */ .sove-faq-premium__point::before { content: "✓" !important; position: static !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 20px !important; height: 20px !important; margin: 0 auto !important; transform: none !important; flex: 0 0 20px !important; } /* ===================================================== CTA ===================================================== */ .sove-faq-premium__cta { display: flex !important; align-items: center !important; justify-content: center !important; width: min(100%, 340px) !important; min-width: 0 !important; min-height: 50px !important; margin: 0 auto !important; padding: 12px 15px !important; font-size: 11.5px !important; line-height: 1.25 !important; text-align: center !important; white-space: normal !important; } .sove-faq-premium__cta::after { flex: 0 0 auto !important; margin-left: 7px !important; } /* ===================================================== LISTE FAQ ===================================================== */ .sove-faq-premium__list { display: grid !important; grid-template-columns: 1fr !important; gap: 9px !important; width: 100% !important; } /* ===================================================== ITEM ===================================================== */ .sove-faq-item { width: 100% !important; min-width: 0 !important; border-radius: 17px !important; overflow: hidden !important; box-shadow: 0 8px 22px rgba(17,18,20,.045) !important; } /* ===================================================== BOUTON QUESTION numéro → question → + ===================================================== */ .sove-faq-item__button { position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 9px !important; width: 100% !important; min-height: 128px !important; padding: 15px 13px !important; text-align: center !important; } /* ===================================================== NUMÉRO ===================================================== */ .sove-faq-item__number { display: flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; margin: 0 auto !important; border-radius: 11px !important; flex: 0 0 36px !important; font-size: 9px !important; line-height: 1 !important; } /* ===================================================== QUESTION ===================================================== */ .sove-faq-item__question { display: block !important; width: 100% !important; max-width: 410px !important; margin: 0 auto !important; color: #111214 !important; font-size: 12.5px !important; line-height: 1.35 !important; font-weight: 850 !important; text-align: center !important; text-wrap: balance !important; } /* ===================================================== ICÔNE + / - ===================================================== */ .sove-faq-item__icon { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; margin: 1px auto 0 !important; flex: 0 0 28px !important; border-radius: 50% !important; background: rgba(31,78,95,.07) !important; } /* évite tout déplacement latéral */ .sove-faq-item__icon::before, .sove-faq-item__icon::after { left: 50% !important; top: 50% !important; transform-origin: center !important; } /* ===================================================== ÉTAT OUVERT ===================================================== */ .sove-faq-item.is-open { border-color: rgba(222,7,45,.16) !important; box-shadow: 0 12px 30px rgba(17,18,20,.07) !important; } .sove-faq-item.is-open .sove-faq-item__button { background: linear-gradient( 180deg, rgba(222,7,45,.035), rgba(255,255,255,0) ) !important; } /* ===================================================== RÉPONSE ===================================================== */ .sove-faq-item__content { width: 100% !important; margin: 0 !important; padding: 0 !important; } .sove-faq-item__content-inner { width: calc(100% - 20px) !important; margin: 0 auto 10px !important; padding: 14px 12px !important; border: 1px solid rgba(31,78,95,.08) !important; border-radius: 14px !important; background: linear-gradient( 145deg, rgba(31,78,95,.055), rgba(31,78,95,.018) ) !important; text-align: center !important; } .sove-faq-item__content-inner p { width: 100% !important; max-width: 430px !important; margin: 0 auto 9px !important; color: #59666E !important; font-size: 11px !important; line-height: 1.55 !important; text-align: center !important; } .sove-faq-item__content-inner p:last-child { margin-bottom: 0 !important; } .sove-faq-item__content-inner strong { color: #1F4E5F !important; font-weight: 850 !important; } } /* ========================================================= TÉLÉPHONES PLUS LARGES 480px → 767px ========================================================= */ @media (min-width: 480px) and (max-width: 767px) { /* points conseil plus compacts */ .sove-faq-premium__points { grid-template-columns: repeat(3,minmax(0,1fr)) !important; } .sove-faq-premium__point { min-height: 108px !important; padding: 12px 8px !important; font-size: 10px !important; } /* questions légèrement moins hautes */ .sove-faq-item__button { min-height: 116px !important; } } /* ========================================================= PETITS TÉLÉPHONES ≤ 390px ========================================================= */ @media (max-width: 390px) { .sove-faq-premium__inner { width: calc(100% - 12px) !important; } .sove-faq-premium__head h2 { font-size: clamp(1.85rem, 9.2vw, 2.25rem) !important; } .sove-faq-premium__card { padding: 18px 11px !important; border-radius: 19px !important; } .sove-faq-premium__card h3 { font-size: 17px !important; } .sove-faq-item { border-radius: 15px !important; } .sove-faq-item__button { min-height: 118px !important; padding: 14px 10px !important; } .sove-faq-item__question { font-size: 12px !important; } .sove-faq-item__content-inner { width: calc(100% - 16px) !important; padding: 13px 10px !important; } }/* End custom CSS */ /* Start custom CSS *//* ========================================================= PATCH HERO SOVEMATIC — DESKTOP Corrige : - image qui descend en bas - énorme espace vide - titre trop comprimé - colonnes mal proportionnées ========================================================= */ @media (min-width: 1101px) { /* Structure générale du hero */ [id^="sovematic-"][id$="-page"] .sove-hero .sove-container { display: grid !important; grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr) !important; gap: clamp(40px, 5vw, 80px) !important; align-items: center !important; min-height: auto !important; } /* Colonne texte */ [id^="sovematic-"][id$="-page"] .sove-hero .sove-container > div:first-child { grid-column: 1 !important; grid-row: 1 !important; min-width: 0 !important; max-width: 820px !important; align-self: center !important; } /* CORRECTION PRINCIPALE : suppression du grid-row: 1 / span 30 */ [id^="sovematic-"][id$="-page"] .sove-hero-media { grid-column: 2 !important; grid-row: 1 !important; align-self: center !important; width: 100% !important; max-width: 620px !important; margin: 0 !important; position: relative !important; top: auto !important; bottom: auto !important; transform: none !important; } /* Image du hero */ [id^="sovematic-"][id$="-page"] .sove-hero-media img { display: block !important; width: 100% !important; height: clamp(430px, 38vw, 570px) !important; object-fit: cover !important; } /* Hero moins inutilement haut */ [id^="sovematic-"][id$="-page"] .sove-hero { min-height: auto !important; padding-top: clamp(70px, 7vw, 105px) !important; padding-bottom: clamp(70px, 7vw, 105px) !important; } /* H1 plus équilibré */ [id^="sovematic-"][id$="-page"] .sove-hero h1 { max-width: 820px !important; font-size: clamp(3rem, 4.15vw, 4.65rem) !important; line-height: .98 !important; text-wrap: balance; } /* Paragraphes moins étroits */ [id^="sovematic-"][id$="-page"] .sove-hero p { max-width: 760px !important; } } /* ========================================================= TABLETTE / PETIT ÉCRAN ORDINATEUR ========================================================= */ @media (min-width: 768px) and (max-width: 1100px) { [id^="sovematic-"][id$="-page"] .sove-hero .sove-container { display: grid !important; grid-template-columns: 1fr !important; gap: 40px !important; } [id^="sovematic-"][id$="-page"] .sove-hero .sove-container > div:first-child { grid-column: 1 !important; grid-row: auto !important; max-width: 850px !important; } [id^="sovematic-"][id$="-page"] .sove-hero-media { grid-column: 1 !important; grid-row: auto !important; width: 100% !important; max-width: 850px !important; margin: 0 !important; } [id^="sovematic-"][id$="-page"] .sove-hero-media img { height: 460px !important; } [id^="sovematic-"][id$="-page"] .sove-hero h1 { max-width: 850px !important; font-size: clamp(2.8rem, 7vw, 4.2rem) !important; text-wrap: balance; } }/* ========================================================= PATCH — REMONTER RÉELLEMENT TOUT LE HERO ========================================================= */ @media (min-width: 300px) { #sovematic-solutions-page .sove-hero .sove-container { position: relative !important; top: -40px !important; } /* Compense l'espace créé en bas */ #sovematic-solutions-page .sove-hero { padding-bottom: 50px !important; } }/* ========================================================= NOS SOLUTIONS — TRANSFORMER LE TABLEAU EN CARTES ========================================================= */ #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table-wrap { overflow: visible !important; margin-top: 38px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } /* TABLE */ #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table { display: block !important; width: 100% !important; min-width: 0 !important; border: 0 !important; } /* On masque l'ancien header */ #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table thead { display: none !important; } /* Grille 3 x 2 */ #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table tbody { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 18px !important; counter-reset: solution-card; } /* Chaque ligne devient une carte */ #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table tbody tr { position: relative; display: flex !important; flex-direction: column !important; min-height: 190px; padding: 28px 26px 24px !important; overflow: hidden; border: 1px solid rgba(17, 18, 20, .09) !important; border-radius: 24px !important; background: linear-gradient( 145deg, #ffffff 0%, #fbfbfa 100% ) !important; box-shadow: 0 14px 38px rgba(17, 18, 20, .06) !important; counter-increment: solution-card; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } /* Fine barre décorative */ #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table tbody tr::after { content: ""; position: absolute; left: 26px; right: 26px; bottom: 0; height: 3px; border-radius: 999px 999px 0 0; background: linear-gradient( 90deg, #DE072D, #1F4E5F ); } /* Numéro de la solution */ #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table tbody tr::before { content: "0" counter(solution-card); display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-bottom: 24px; border-radius: 14px; background: rgba(222, 7, 45, .10); color: #DE072D; font-size: 12px; font-weight: 900; letter-spacing: .04em; } /* Suppression apparence cellules */ #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table tbody td { display: block !important; width: 100% !important; padding: 0 !important; border: 0 !important; background: transparent !important; } /* BESOIN */ #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table tbody td:first-child { margin-bottom: 12px; color: #6F7C85 !important; font-size: 15px !important; line-height: 1.45 !important; } /* SOLUTION */ #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table tbody td:last-child { margin-top: auto; color: #111214 !important; font-size: 19px !important; font-weight: 900 !important; line-height: 1.2 !important; } /* Petite flèche à droite */ #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table tbody td:last-child::after { content: " →"; color: #DE072D; font-weight: 900; } /* Hover */ #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table tbody tr:hover { transform: translateY(-5px); border-color: rgba(222, 7, 45, .18) !important; box-shadow: 0 22px 55px rgba(17, 18, 20, .11) !important; } /* TABLETTE */ @media (max-width: 1100px) { #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table tbody { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* MOBILE */ @media (max-width: 650px) { #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table tbody { grid-template-columns: 1fr !important; gap: 14px !important; } #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table tbody tr { min-height: 0; padding: 22px !important; } }/* ========================================================= NOS SOLUTIONS — TEXTE À GAUCHE / CARTES À DROITE ========================================================= */ @media (min-width: 1101px) { /* La section devient une grille */ #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-container { display: grid !important; grid-template-columns: minmax(300px, .68fr) minmax(0, 1.55fr) !important; column-gap: 48px !important; row-gap: 0 !important; align-items: start !important; } /* Le gros titre reste sur toute la largeur */ #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-container > h2 { grid-column: 1 / -1 !important; margin-bottom: 42px !important; } /* ===================================================== TABLEAU / CARTES À DROITE ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table-wrap { grid-column: 2 !important; grid-row: 2 / span 10 !important; width: 100% !important; margin-top: 0 !important; } /* ===================================================== TEXTE "VOUS AVEZ PLUSIEURS BESOINS ?" À GAUCHE ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table-wrap + h3 { grid-column: 1 !important; grid-row: 2 !important; margin: 0 0 18px !important; font-size: 28px !important; line-height: 1.08 !important; color: #111214 !important; } /* Tous les paragraphes suivant ce H3 restent à gauche */ #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table-wrap + h3 ~ p { grid-column: 1 !important; max-width: 390px !important; margin: 0 0 18px !important; font-size: 16px !important; line-height: 1.6 !important; color: #56626A !important; } /* Dernier paragraphe / conclusion plus forte */ #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table-wrap + h3 ~ p:last-of-type { margin-top: 8px !important; color: #111214 !important; } }/* ========================================================= BLOC "VOUS AVEZ PLUSIEURS BESOINS ?" + ORDRE TABLETTE / MOBILE ========================================================= */ /* ========================================================= DESKTOP — TRANSFORMER LE TEXTE DE GAUCHE EN VRAI ENCART ========================================================= */ @media (min-width: 1101px) { /* Titre du bloc */ #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table-wrap + h3 { position: relative !important; margin: 0 !important; padding: 76px 30px 16px !important; border: 1px solid rgba(17, 18, 20, .08) !important; border-bottom: 0 !important; border-radius: 26px 26px 0 0 !important; background: linear-gradient( 145deg, #ffffff 0%, #f8faf9 100% ) !important; box-shadow: -10px 16px 40px rgba(17, 18, 20, .055) !important; font-size: 27px !important; line-height: 1.12 !important; color: #111214 !important; } /* Petit label rouge au-dessus du titre */ #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table-wrap + h3::before { content: "PROJET MULTI-SOLUTIONS"; position: absolute; top: 28px; left: 30px; padding: 7px 10px; border-radius: 999px; background: rgba(222, 7, 45, .10); color: #DE072D; font-size: 10px; line-height: 1; font-weight: 900; letter-spacing: .08em; } /* Paragraphes du bloc */ #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table-wrap + h3 ~ p { position: relative !important; z-index: 1; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 8px 30px 14px !important; border-left: 1px solid rgba(17, 18, 20, .08) !important; border-right: 1px solid rgba(17, 18, 20, .08) !important; background: linear-gradient( 145deg, #ffffff 0%, #f8faf9 100% ) !important; color: #56626A !important; font-size: 15.5px !important; line-height: 1.58 !important; } /* Dernière phrase = conclusion visuelle */ #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table-wrap + h3 ~ p:last-of-type { padding: 22px 30px 28px !important; border-bottom: 1px solid rgba(17, 18, 20, .08) !important; border-radius: 0 0 26px 26px !important; background: linear-gradient( 145deg, #ffffff 0%, #f3f7f6 100% ) !important; color: #111214 !important; box-shadow: -10px 20px 40px rgba(17, 18, 20, .055) !important; } /* Trait rouge avant la conclusion */ #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table-wrap + h3 ~ p:last-of-type::before { content: ""; display: block; width: 52px; height: 3px; margin-bottom: 18px; border-radius: 999px; background: #DE072D; } #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table-wrap + h3 ~ p:last-of-type strong { color: #111214 !important; font-weight: 900 !important; } } /* ========================================================= TABLETTE + MOBILE ORDRE : 1. TITRE 2. BLOC "PLUSIEURS BESOINS" 3. CARTES SOLUTIONS ========================================================= */ @media (max-width: 1100px) { #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-container { display: flex !important; flex-direction: column !important; align-items: stretch !important; } /* H2 principal */ #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-container > h2 { order: 1 !important; width: 100% !important; margin-bottom: 28px !important; } /* Bloc éditorial AVANT les cartes */ #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table-wrap + h3 { order: 2 !important; position: relative !important; width: 100% !important; margin: 0 !important; padding: 70px 26px 14px !important; border: 1px solid rgba(17, 18, 20, .08) !important; border-bottom: 0 !important; border-radius: 24px 24px 0 0 !important; background: linear-gradient( 145deg, #ffffff, #f7f9f8 ) !important; font-size: 25px !important; line-height: 1.12 !important; box-shadow: 0 16px 40px rgba(17, 18, 20, .06) !important; } /* Label */ #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table-wrap + h3::before { content: "PROJET MULTI-SOLUTIONS"; position: absolute; top: 26px; left: 26px; padding: 7px 10px; border-radius: 999px; background: rgba(222, 7, 45, .10); color: #DE072D; font-size: 10px; line-height: 1; font-weight: 900; letter-spacing: .07em; } /* Tous les paragraphes passent également avant les cartes */ #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table-wrap + h3 ~ p { order: 2 !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 7px 26px 14px !important; border-left: 1px solid rgba(17, 18, 20, .08) !important; border-right: 1px solid rgba(17, 18, 20, .08) !important; background: linear-gradient( 145deg, #ffffff, #f7f9f8 ) !important; color: #56626A !important; font-size: 15.5px !important; line-height: 1.6 !important; } /* Conclusion */ #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table-wrap + h3 ~ p:last-of-type { padding-top: 20px !important; padding-bottom: 26px !important; border-bottom: 1px solid rgba(17, 18, 20, .08) !important; border-radius: 0 0 24px 24px !important; color: #111214 !important; box-shadow: 0 18px 40px rgba(17, 18, 20, .06) !important; } #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table-wrap + h3 ~ p:last-of-type::before { content: ""; display: block; width: 48px; height: 3px; margin-bottom: 17px; border-radius: 999px; background: #DE072D; } /* Les cartes passent APRÈS le bloc texte */ #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table-wrap { order: 3 !important; width: 100% !important; margin-top: 28px !important; } /* Si la grille additionnelle de solutions est présente */ #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-solution-grid { order: 4 !important; width: 100% !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 650px) { #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table-wrap + h3 { padding: 65px 21px 13px !important; border-radius: 20px 20px 0 0 !important; font-size: 22px !important; } #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table-wrap + h3::before { top: 23px; left: 21px; } #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table-wrap + h3 ~ p { padding: 6px 21px 13px !important; font-size: 15px !important; } #sovematic-solutions-page .sove-section:nth-of-type(2) .sove-table-wrap + h3 ~ p:last-of-type { padding: 18px 21px 23px !important; border-radius: 0 0 20px 20px !important; } }/* ========================================================= NOS SOLUTIONS BLOC LAVAGE & SÉCHAGE — REDESIGN ========================================================= */ @media (min-width: 1101px) { /* La section Lavage & Séchage */ #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-container { position: relative !important; min-height: 620px !important; padding-right: 51% !important; } /* Titre principal */ #sovematic-solutions-page .sove-section:nth-of-type(3) h2 { position: relative; margin-bottom: 28px !important; font-size: clamp(2.5rem, 3.4vw, 4rem) !important; line-height: 1.02 !important; max-width: 720px !important; } /* Petit repère graphique */ #sovematic-solutions-page .sove-section:nth-of-type(3) h2::before { content: "LAVAGE & SÉCHAGE"; display: block; width: max-content; margin-bottom: 16px; padding: 7px 10px; border-radius: 999px; background: rgba(222, 7, 45, .10); color: #DE072D; font-size: 10px; line-height: 1; font-weight: 900; letter-spacing: .08em; } /* Premier sous-titre */ #sovematic-solutions-page .sove-section:nth-of-type(3) h2 + h3 { margin-top: 0 !important; font-size: 20px !important; line-height: 1.25 !important; color: #1F4E5F !important; } /* Texte un peu plus lisible */ #sovematic-solutions-page .sove-section:nth-of-type(3) p { max-width: 700px !important; font-size: 16px !important; line-height: 1.65 !important; color: #59666E !important; } /* Sous-titre "Cette solution..." */ #sovematic-solutions-page .sove-section:nth-of-type(3) h3 { margin-top: 27px !important; font-size: 19px !important; } /* ===================================================== LISTE DES USAGES -> PETITES CARTES ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(3) ul { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; max-width: 700px !important; margin: 18px 0 28px !important; padding: 0 !important; list-style: none !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) ul li { position: relative; margin: 0 !important; padding: 13px 15px 13px 39px !important; border: 1px solid rgba(17, 18, 20, .08); border-radius: 14px; background: #fff; color: #465159; font-size: 13.5px; line-height: 1.35; box-shadow: 0 8px 22px rgba(17, 18, 20, .045); } /* Check rouge */ #sovematic-solutions-page .sove-section:nth-of-type(3) ul li::before { content: "✓"; position: absolute; left: 14px; top: 12px; display: flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; background: rgba(222, 7, 45, .10); color: #DE072D; font-size: 10px; font-weight: 900; } /* ===================================================== IMAGE À DROITE ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-inline-image { position: absolute !important; top: 18px !important; right: 0 !important; width: 45% !important; max-width: none !important; margin: 0 !important; overflow: hidden !important; border: 1px solid rgba(17, 18, 20, .08) !important; border-radius: 30px !important; box-shadow: 0 28px 70px rgba(17, 18, 20, .13) !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-inline-image img { width: 100% !important; height: 540px !important; object-fit: cover !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-inline-image figcaption { padding: 12px 16px !important; background: #fff !important; color: #7A858B !important; font-size: 11px !important; } /* ===================================================== "ALLER PLUS LOIN" ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(3) h3:last-of-type { margin-top: 28px !important; margin-bottom: 11px !important; } /* Liens secondaires sous forme de pills */ #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-text-link { margin: 0 7px 7px 0 !important; padding: 8px 12px !important; border: 1px solid rgba(31, 78, 95, .13) !important; border-radius: 999px !important; background: rgba(31, 78, 95, .055) !important; color: #1F4E5F !important; font-size: 12px !important; font-weight: 800 !important; text-decoration: none !important; transition: background .2s ease, transform .2s ease; } #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-text-link:hover { background: rgba(31, 78, 95, .11) !important; transform: translateY(-2px); } } /* ========================================================= TABLETTE TEXTE PUIS IMAGE ========================================================= */ @media (min-width: 651px) and (max-width: 1100px) { #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-container { padding-right: 0 !important; min-height: 0 !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) ul { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; padding: 0 !important; list-style: none !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) ul li { padding: 13px 15px !important; border: 1px solid rgba(17, 18, 20, .08); border-radius: 14px; background: #fff; } #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-inline-image { position: relative !important; top: auto !important; right: auto !important; width: 100% !important; max-width: none !important; margin-top: 32px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 650px) { #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-container { padding-right: 0 !important; min-height: 0 !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) h2 { font-size: clamp(2rem, 9vw, 2.8rem) !important; margin-bottom: 22px !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) ul { display: grid !important; grid-template-columns: 1fr !important; gap: 9px !important; padding: 0 !important; list-style: none !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) ul li { padding: 12px 14px !important; border: 1px solid rgba(17, 18, 20, .08); border-radius: 13px; background: #fff; } #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-inline-image { position: relative !important; top: auto !important; right: auto !important; width: 100% !important; margin-top: 28px !important; border-radius: 20px !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-inline-image img { height: 330px !important; } }/* ========================================================= LAVAGE & SÉCHAGE CTA + ALLER PLUS LOIN SOUS L'IMAGE — DESKTOP ========================================================= */ @media (min-width: 1101px) { /* On abandonne le positionnement absolu précédent */ #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-container { display: grid !important; /* Colonne gauche = contenu Colonne vide = séparation 3 colonnes à droite = permettent d'aligner les 3 boutons sous l'image */ grid-template-columns: minmax(0, 1.12fr) 38px repeat(3, minmax(0, .34fr)) !important; column-gap: 12px !important; padding-right: 0 !important; min-height: 0 !important; align-items: start !important; } /* Par défaut tout le contenu éditorial reste à gauche */ #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-container > * { grid-column: 1 !important; } /* ===================================================== IMAGE À DROITE ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-inline-image { grid-column: 3 / 6 !important; grid-row: 1 / span 9 !important; position: relative !important; top: auto !important; right: auto !important; align-self: stretch !important; width: 100% !important; max-width: none !important; margin: 0 !important; border-radius: 30px !important; overflow: hidden !important; box-shadow: 0 28px 70px rgba(17, 18, 20, .13) !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-inline-image img { width: 100% !important; height: 500px !important; object-fit: cover !important; } /* ===================================================== CTA PRINCIPAL SOUS L'IMAGE ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-actions { grid-column: 3 / 6 !important; grid-row: 10 !important; margin: 24px 0 0 !important; justify-content: flex-start !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-actions .sove-btn { min-height: 54px !important; padding: 14px 22px !important; font-size: 15px !important; } /* ===================================================== "ALLER PLUS LOIN" ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(3) h3:last-of-type { grid-column: 3 / 6 !important; grid-row: 11 !important; margin: 27px 0 12px !important; font-size: 19px !important; line-height: 1.2 !important; color: #111214 !important; } /* ===================================================== LES 3 LIENS SUR UNE MÊME LIGNE ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-text-link { grid-row: 12 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 44px !important; margin: 0 !important; padding: 9px 12px !important; border: 1px solid rgba(31, 78, 95, .15) !important; border-radius: 999px !important; background: linear-gradient( 145deg, #ffffff, #F3F7F8 ) !important; color: #1F4E5F !important; font-size: 12px !important; line-height: 1.25 !important; font-weight: 850 !important; text-align: center !important; text-decoration: none !important; box-shadow: 0 7px 20px rgba(17, 18, 20, .04) !important; transition: transform .2s ease, border-color .2s ease, background .2s ease; } /* Bouton 1 */ #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-text-link:nth-of-type(1) { grid-column: 3 !important; } /* Bouton 2 */ #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-text-link:nth-of-type(2) { grid-column: 4 !important; } /* Bouton 3 */ #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-text-link:nth-of-type(3) { grid-column: 5 !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-text-link:hover { transform: translateY(-3px); border-color: rgba(222, 7, 45, .20) !important; background: #ffffff !important; color: #DE072D !important; } }/* ========================================================= FIX IMAGE — SUPPRIMER LE GRAND CADRE BLANC ========================================================= */ @media (min-width: 1101px) { #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-inline-image { /* IMPORTANT : ne plus étirer le bloc */ align-self: start !important; height: fit-content !important; min-height: 0 !important; background: transparent !important; /* garde l'image en haut de la colonne droite */ grid-column: 3 / 6 !important; grid-row: 1 / span 9 !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-inline-image img { display: block !important; width: 100% !important; height: 500px !important; object-fit: cover !important; } /* Légende directement collée à l'image */ #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-inline-image figcaption { display: block !important; margin: 0 !important; padding: 9px 14px !important; background: #fff !important; } }/* ========================================================= FIX FINAL — COLONNE DROITE INDÉPENDANTE Image + CTA + Aller plus loin + liens ========================================================= */ @media (min-width: 1101px) { #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-container { position: relative !important; display: block !important; /* réserve la place de la colonne droite */ padding-right: 51% !important; /* évite que la section soit plus courte que le bloc droit */ min-height: 700px !important; } /* ===================================================== IMAGE ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-inline-image { position: absolute !important; top: 0 !important; right: 0 !important; width: 46% !important; height: auto !important; margin: 0 !important; border-radius: 28px !important; overflow: hidden !important; background: #fff !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-inline-image img { display: block !important; width: 100% !important; height: 430px !important; object-fit: cover !important; } /* ===================================================== CTA JUSTE SOUS L'IMAGE ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-actions { position: absolute !important; top: 480px !important; right: 0 !important; width: 46% !important; margin: 0 !important; display: flex !important; justify-content: flex-start !important; } /* ===================================================== ALLER PLUS LOIN ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(3) h3:last-of-type { position: absolute !important; top: 555px !important; right: 0 !important; width: 46% !important; margin: 0 !important; font-size: 19px !important; } /* ===================================================== 3 LIENS SOUS LE TITRE ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-text-link { position: absolute !important; top: 600px !important; width: calc((46% - 20px) / 3) !important; min-height: 44px !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 9px 10px !important; text-align: center !important; border-radius: 999px !important; white-space: normal !important; } /* lien 1 */ #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-text-link:nth-of-type(1) { right: calc(30.666% + 20px) !important; } /* lien 2 */ #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-text-link:nth-of-type(2) { right: calc(15.333% + 10px) !important; } /* lien 3 */ #sovematic-solutions-page .sove-section:nth-of-type(3) .sove-text-link:nth-of-type(3) { right: 0 !important; } }/* ========================================================= NOS SOLUTIONS — BLOC BUANDERIES IMAGE + CTA À GAUCHE / TEXTE À DROITE (DESKTOP) Si besoin, remplace nth-of-type(4) par le bon index ========================================================= */ @media (min-width: 1101px) { /* Structure générale */ #sovematic-solutions-page .sove-section:nth-of-type(4) .sove-container { position: relative !important; display: block !important; /* on réserve la place à gauche pour l'image */ padding-left: 51% !important; padding-right: 0 !important; min-height: 760px !important; } /* ----------------------------------------------------- Tout le contenu éditorial passe à droite ----------------------------------------------------- */ #sovematic-solutions-page .sove-section:nth-of-type(4) .sove-container > h2, #sovematic-solutions-page .sove-section:nth-of-type(4) .sove-container > h3, #sovematic-solutions-page .sove-section:nth-of-type(4) .sove-container > h4, #sovematic-solutions-page .sove-section:nth-of-type(4) .sove-container > p, #sovematic-solutions-page .sove-section:nth-of-type(4) .sove-container > ul, #sovematic-solutions-page .sove-section:nth-of-type(4) .sove-container > ol, #sovematic-solutions-page .sove-section:nth-of-type(4) .sove-container > blockquote, #sovematic-solutions-page .sove-section:nth-of-type(4) .sove-container > .sove-table-wrap, #sovematic-solutions-page .sove-section:nth-of-type(4) .sove-container > .sove-flow-diagram { max-width: none !important; } #sovematic-solutions-page .sove-section:nth-of-type(4) h2 { margin-bottom: 28px !important; font-size: clamp(2.5rem, 3.4vw, 4rem) !important; line-height: 1.02 !important; } #sovematic-solutions-page .sove-section:nth-of-type(4) h2::before { content: "BUANDERIES"; display: block; width: max-content; margin-bottom: 16px; padding: 7px 10px; border-radius: 999px; background: rgba(222, 7, 45, .10); color: #DE072D; font-size: 10px; line-height: 1; font-weight: 900; letter-spacing: .08em; } #sovematic-solutions-page .sove-section:nth-of-type(4) p { font-size: 16px !important; line-height: 1.65 !important; color: #59666E !important; } /* Liste un peu plus jolie */ #sovematic-solutions-page .sove-section:nth-of-type(4) ul { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; padding: 0 !important; list-style: none !important; } #sovematic-solutions-page .sove-section:nth-of-type(4) ul li { position: relative; margin: 0 !important; padding: 13px 15px 13px 39px !important; border: 1px solid rgba(17, 18, 20, .08); border-radius: 14px; background: #fff; color: #465159; font-size: 13.5px; line-height: 1.35; box-shadow: 0 8px 22px rgba(17, 18, 20, .045); } #sovematic-solutions-page .sove-section:nth-of-type(4) ul li::before { content: "✓"; position: absolute; left: 14px; top: 12px; display: flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; background: rgba(222, 7, 45, .10); color: #DE072D; font-size: 10px; font-weight: 900; } /* ----------------------------------------------------- IMAGE À GAUCHE ----------------------------------------------------- */ #sovematic-solutions-page .sove-section:nth-of-type(4) .sove-inline-image { position: absolute !important; top: 0 !important; left: 0 !important; width: 46% !important; height: auto !important; margin: 0 !important; overflow: hidden !important; border: 1px solid rgba(17, 18, 20, .08) !important; border-radius: 28px !important; background: #fff !important; box-shadow: 0 28px 70px rgba(17, 18, 20, .13) !important; } #sovematic-solutions-page .sove-section:nth-of-type(4) .sove-inline-image img { display: block !important; width: 100% !important; height: 430px !important; object-fit: cover !important; } #sovematic-solutions-page .sove-section:nth-of-type(4) .sove-inline-image figcaption { padding: 9px 14px !important; background: #fff !important; color: #7A858B !important; font-size: 11px !important; } /* ----------------------------------------------------- CTA SOUS L'IMAGE ----------------------------------------------------- */ #sovematic-solutions-page .sove-section:nth-of-type(4) .sove-actions { position: absolute !important; top: 480px !important; left: 0 !important; width: 46% !important; margin: 0 !important; display: flex !important; justify-content: flex-start !important; } #sovematic-solutions-page .sove-section:nth-of-type(4) .sove-actions .sove-btn { min-height: 54px !important; padding: 14px 22px !important; font-size: 15px !important; } /* ----------------------------------------------------- ALLER PLUS LOIN SOUS LE CTA ----------------------------------------------------- */ #sovematic-solutions-page .sove-section:nth-of-type(4) h3:last-of-type { position: absolute !important; top: 555px !important; left: 0 !important; width: 46% !important; margin: 0 !important; font-size: 19px !important; line-height: 1.2 !important; color: #111214 !important; } /* 3 liens sous le titre */ #sovematic-solutions-page .sove-section:nth-of-type(4) .sove-text-link { position: absolute !important; top: 600px !important; width: calc((46% - 20px) / 3) !important; min-height: 44px !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 9px 10px !important; border: 1px solid rgba(31, 78, 95, .15) !important; border-radius: 999px !important; background: linear-gradient(145deg, #ffffff, #F3F7F8) !important; color: #1F4E5F !important; font-size: 12px !important; line-height: 1.25 !important; font-weight: 850 !important; text-align: center !important; text-decoration: none !important; box-shadow: 0 7px 20px rgba(17, 18, 20, .04) !important; white-space: normal !important; transition: transform .2s ease, border-color .2s ease, background .2s ease; } #sovematic-solutions-page .sove-section:nth-of-type(4) .sove-text-link:nth-of-type(1) { left: 0 !important; } #sovematic-solutions-page .sove-section:nth-of-type(4) .sove-text-link:nth-of-type(2) { left: calc(15.333% + 10px) !important; } #sovematic-solutions-page .sove-section:nth-of-type(4) .sove-text-link:nth-of-type(3) { left: calc(30.666% + 20px) !important; } #sovematic-solutions-page .sove-section:nth-of-type(4) .sove-text-link:hover { transform: translateY(-3px); border-color: rgba(222, 7, 45, .20) !important; background: #ffffff !important; color: #DE072D !important; } }/* ========================================================= FIX BUANDERIES — NE PAS DÉPLACER LE DERNIER H3 ========================================================= */ @media (min-width: 1101px) { /* On annule le positionnement absolu du dernier H3 */ #sovematic-solutions-page .sove-section:nth-of-type(4) h3:last-of-type { position: static !important; top: auto !important; left: auto !important; right: auto !important; width: auto !important; margin: 30px 0 16px !important; color: #111214 !important; font-size: 20px !important; line-height: 1.25 !important; } /* La liste reste bien à droite sous ce H3 */ #sovematic-solutions-page .sove-section:nth-of-type(4) h3:last-of-type + ul { position: static !important; width: 100% !important; margin: 0 0 26px !important; } /* Et le paragraphe final reste lui aussi à droite */ #sovematic-solutions-page .sove-section:nth-of-type(4) h3:last-of-type + ul + p { position: static !important; width: 100% !important; margin: 18px 0 0 !important; } /* ========================================================= NOS SOLUTIONS — CENTRALES DE PAIEMENT TEXTE À GAUCHE / IMAGE + CTA À DROITE DESKTOP UNIQUEMENT ========================================================= */ @media (min-width: 1101px) { /* ===================================================== STRUCTURE GÉNÉRALE ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(5) .sove-container { position: relative !important; display: block !important; /* réserve l'espace pour l'image à droite */ padding-right: 51% !important; padding-left: 0 !important; min-height: 690px !important; } /* ===================================================== CONTENU TEXTE À GAUCHE ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(5) h2 { max-width: none !important; margin-bottom: 28px !important; font-size: clamp(2.5rem, 3.4vw, 4rem) !important; line-height: 1.02 !important; color: #fff !important; } /* Petit badge au-dessus du H2 */ #sovematic-solutions-page .sove-section:nth-of-type(5) h2::before { content: "PAIEMENT"; display: block; width: max-content; margin-bottom: 16px; padding: 7px 10px; border-radius: 999px; background: rgba(222, 7, 45, .16); color: #fff; font-size: 10px; line-height: 1; font-weight: 900; letter-spacing: .08em; } #sovematic-solutions-page .sove-section:nth-of-type(5) h3 { max-width: 720px !important; font-size: 20px !important; line-height: 1.3 !important; color: #fff !important; } #sovematic-solutions-page .sove-section:nth-of-type(5) p { max-width: 720px !important; font-size: 16px !important; line-height: 1.65 !important; color: rgba(255,255,255,.74) !important; } #sovematic-solutions-page .sove-section:nth-of-type(5) strong { color: #fff !important; } /* ===================================================== LISTE -> CARTES PLUS PROPRES ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(5) ul { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; max-width: 720px !important; margin: 22px 0 28px !important; padding: 0 !important; list-style: none !important; } #sovematic-solutions-page .sove-section:nth-of-type(5) ul li { position: relative; margin: 0 !important; padding: 13px 14px 13px 39px !important; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(255,255,255,.055); color: rgba(255,255,255,.80); font-size: 13.5px; line-height: 1.4; } /* Check rouge */ #sovematic-solutions-page .sove-section:nth-of-type(5) ul li::before { content: "✓"; position: absolute; left: 14px; top: 12px; display: flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; background: rgba(222,7,45,.20); color: #fff; font-size: 10px; font-weight: 900; } /* ===================================================== IMAGE À DROITE ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(5) .sove-inline-image { position: absolute !important; top: 0 !important; right: 0 !important; width: 46% !important; height: auto !important; margin: 0 !important; overflow: hidden !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 28px !important; background: rgba(255,255,255,.06) !important; box-shadow: 0 30px 75px rgba(0,0,0,.28) !important; } #sovematic-solutions-page .sove-section:nth-of-type(5) .sove-inline-image img { display: block !important; width: 100% !important; height: 430px !important; object-fit: cover !important; } #sovematic-solutions-page .sove-section:nth-of-type(5) .sove-inline-image figcaption { margin: 0 !important; padding: 9px 14px !important; background: rgba(255,255,255,.96) !important; color: #6F7C85 !important; font-size: 11px !important; } /* ===================================================== CTA SOUS L'IMAGE ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(5) .sove-actions { position: absolute !important; top: 480px !important; right: 0 !important; width: 46% !important; margin: 0 !important; display: flex !important; justify-content: flex-start !important; align-items: center !important; } #sovematic-solutions-page .sove-section:nth-of-type(5) .sove-actions .sove-btn { min-height: 54px !important; padding: 14px 22px !important; font-size: 15px !important; box-shadow: 0 14px 32px rgba(222,7,45,.28) !important; } } }/* ========================================================= NOS SOLUTIONS — GESTION DES DOUCHES TEXTE À GAUCHE / IMAGE + CTA À DROITE DESKTOP UNIQUEMENT ========================================================= */ @media (min-width: 1101px) { /* STRUCTURE */ #sovematic-solutions-page .sove-section:nth-of-type(6) .sove-container { position: relative !important; display: block !important; padding-right: 51% !important; padding-left: 0 !important; min-height: 650px !important; } /* TITRE */ #sovematic-solutions-page .sove-section:nth-of-type(6) h2 { max-width: none !important; margin-bottom: 26px !important; font-size: clamp(2.5rem, 3.4vw, 4rem) !important; line-height: 1.02 !important; } #sovematic-solutions-page .sove-section:nth-of-type(6) h2::before { content: "GESTION DES DOUCHES"; display: block; width: max-content; margin-bottom: 16px; padding: 7px 10px; border-radius: 999px; background: rgba(222, 7, 45, .10); color: #DE072D; font-size: 10px; line-height: 1; font-weight: 900; letter-spacing: .08em; } /* TEXTE */ #sovematic-solutions-page .sove-section:nth-of-type(6) h3 { max-width: 720px !important; font-size: 20px !important; line-height: 1.28 !important; } #sovematic-solutions-page .sove-section:nth-of-type(6) p { max-width: 720px !important; font-size: 16px !important; line-height: 1.65 !important; color: #59666E !important; } #sovematic-solutions-page .sove-section:nth-of-type(6) strong { color: #111214 !important; } /* IMAGE À DROITE */ #sovematic-solutions-page .sove-section:nth-of-type(6) .sove-inline-image { position: absolute !important; top: 0 !important; right: 0 !important; width: 46% !important; height: auto !important; margin: 0 !important; overflow: hidden !important; border: 1px solid rgba(17, 18, 20, .08) !important; border-radius: 28px !important; background: #fff !important; box-shadow: 0 28px 70px rgba(17, 18, 20, .13) !important; } #sovematic-solutions-page .sove-section:nth-of-type(6) .sove-inline-image img { display: block !important; width: 100% !important; height: 430px !important; object-fit: cover !important; } #sovematic-solutions-page .sove-section:nth-of-type(6) .sove-inline-image figcaption { margin: 0 !important; padding: 9px 14px !important; background: #fff !important; color: #7A858B !important; font-size: 11px !important; } /* CTA SOUS L'IMAGE */ #sovematic-solutions-page .sove-section:nth-of-type(6) .sove-actions { position: absolute !important; top: 480px !important; right: 0 !important; width: 46% !important; margin: 0 !important; display: flex !important; justify-content: flex-start !important; align-items: center !important; } #sovematic-solutions-page .sove-section:nth-of-type(6) .sove-actions .sove-btn { min-height: 54px !important; padding: 14px 22px !important; font-size: 15px !important; box-shadow: 0 14px 32px rgba(222, 7, 45, .22) !important; } }/* ========================================================= FIX — GESTION DES DOUCHES IMAGE + CTA À GAUCHE / TEXTE À DROITE DESKTOP UNIQUEMENT ========================================================= */ @media (min-width: 1101px) { /* Structure : on réserve la colonne gauche */ #sovematic-solutions-page .sove-section:nth-of-type(6) .sove-container { position: relative !important; display: block !important; padding-left: 51% !important; padding-right: 0 !important; min-height: 650px !important; } /* Texte à droite */ #sovematic-solutions-page .sove-section:nth-of-type(6) h2, #sovematic-solutions-page .sove-section:nth-of-type(6) h3, #sovematic-solutions-page .sove-section:nth-of-type(6) p, #sovematic-solutions-page .sove-section:nth-of-type(6) ul, #sovematic-solutions-page .sove-section:nth-of-type(6) ol, #sovematic-solutions-page .sove-section:nth-of-type(6) blockquote { max-width: none !important; } /* IMAGE À GAUCHE */ #sovematic-solutions-page .sove-section:nth-of-type(6) .sove-inline-image { position: absolute !important; top: 0 !important; left: 0 !important; right: auto !important; width: 46% !important; height: auto !important; margin: 0 !important; overflow: hidden !important; border: 1px solid rgba(17, 18, 20, .08) !important; border-radius: 28px !important; background: #fff !important; box-shadow: 0 28px 70px rgba(17, 18, 20, .13) !important; } #sovematic-solutions-page .sove-section:nth-of-type(6) .sove-inline-image img { display: block !important; width: 100% !important; height: 430px !important; object-fit: cover !important; } #sovematic-solutions-page .sove-section:nth-of-type(6) .sove-inline-image figcaption { margin: 0 !important; padding: 9px 14px !important; background: #fff !important; color: #7A858B !important; font-size: 11px !important; } /* CTA SOUS L'IMAGE */ #sovematic-solutions-page .sove-section:nth-of-type(6) .sove-actions { position: absolute !important; top: 480px !important; left: 0 !important; right: auto !important; width: 46% !important; margin: 0 !important; display: flex !important; justify-content: flex-start !important; align-items: center !important; } #sovematic-solutions-page .sove-section:nth-of-type(6) .sove-actions .sove-btn { min-height: 54px !important; padding: 14px 22px !important; font-size: 15px !important; } }/* ========================================================= NOS SOLUTIONS — BARRIÈRES AUTOMATIQUES TEXTE À GAUCHE / IMAGE + CTA À DROITE DESKTOP UNIQUEMENT ========================================================= */ @media (min-width: 1101px) { /* STRUCTURE */ #sovematic-solutions-page .sove-section:nth-of-type(7) .sove-container { position: relative !important; display: block !important; padding-left: 0 !important; padding-right: 51% !important; min-height: 660px !important; } /* TITRE */ #sovematic-solutions-page .sove-section:nth-of-type(7) h2 { max-width: none !important; margin-bottom: 26px !important; font-size: clamp(2.5rem, 3.4vw, 4rem) !important; line-height: 1.02 !important; color: #fff !important; } /* Petit label */ #sovematic-solutions-page .sove-section:nth-of-type(7) h2::before { content: "ACCÈS VÉHICULES"; display: block; width: max-content; margin-bottom: 16px; padding: 7px 10px; border-radius: 999px; background: rgba(222, 7, 45, .18); color: #fff; font-size: 10px; line-height: 1; font-weight: 900; letter-spacing: .08em; } /* TEXTE À GAUCHE */ #sovematic-solutions-page .sove-section:nth-of-type(7) h3 { max-width: 720px !important; font-size: 20px !important; line-height: 1.3 !important; color: #fff !important; } #sovematic-solutions-page .sove-section:nth-of-type(7) p { max-width: 720px !important; font-size: 16px !important; line-height: 1.65 !important; color: rgba(255, 255, 255, .74) !important; } #sovematic-solutions-page .sove-section:nth-of-type(7) strong { color: #fff !important; } /* ===================================================== IMAGE À DROITE ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(7) .sove-inline-image { position: absolute !important; top: 0 !important; right: 0 !important; left: auto !important; width: 46% !important; height: auto !important; margin: 0 !important; overflow: hidden !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 28px !important; background: rgba(255,255,255,.06) !important; box-shadow: 0 30px 75px rgba(0,0,0,.28) !important; } #sovematic-solutions-page .sove-section:nth-of-type(7) .sove-inline-image img { display: block !important; width: 100% !important; height: 430px !important; object-fit: cover !important; } #sovematic-solutions-page .sove-section:nth-of-type(7) .sove-inline-image figcaption { margin: 0 !important; padding: 9px 14px !important; background: #fff !important; color: #6F7C85 !important; font-size: 11px !important; } /* ===================================================== CTA JUSTE SOUS L'IMAGE ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(7) .sove-actions { position: absolute !important; top: 480px !important; right: 0 !important; left: auto !important; width: 46% !important; margin: 0 !important; display: flex !important; justify-content: flex-start !important; align-items: center !important; } #sovematic-solutions-page .sove-section:nth-of-type(7) .sove-actions .sove-btn { min-height: 54px !important; padding: 14px 22px !important; font-size: 15px !important; box-shadow: 0 14px 32px rgba(222, 7, 45, .28) !important; } }/* ========================================================= NOS SOLUTIONS — CONTRÔLE D’ACCÈS IMAGE + CTA À GAUCHE / TEXTE À DROITE DESKTOP UNIQUEMENT ========================================================= */ @media (min-width: 1101px) { /* STRUCTURE GÉNÉRALE */ #sovematic-solutions-page .sove-section:nth-of-type(8) .sove-container { position: relative !important; display: block !important; /* réserve la place à gauche pour image + CTA */ padding-left: 51% !important; padding-right: 0 !important; min-height: 690px !important; } /* TEXTE À DROITE */ #sovematic-solutions-page .sove-section:nth-of-type(8) h2, #sovematic-solutions-page .sove-section:nth-of-type(8) h3, #sovematic-solutions-page .sove-section:nth-of-type(8) h4, #sovematic-solutions-page .sove-section:nth-of-type(8) p, #sovematic-solutions-page .sove-section:nth-of-type(8) ul, #sovematic-solutions-page .sove-section:nth-of-type(8) ol, #sovematic-solutions-page .sove-section:nth-of-type(8) blockquote, #sovematic-solutions-page .sove-section:nth-of-type(8) .sove-table-wrap, #sovematic-solutions-page .sove-section:nth-of-type(8) .sove-flow-diagram { max-width: none !important; } /* TITRE */ #sovematic-solutions-page .sove-section:nth-of-type(8) h2 { margin-bottom: 26px !important; font-size: clamp(2.5rem, 3.4vw, 4rem) !important; line-height: 1.02 !important; } #sovematic-solutions-page .sove-section:nth-of-type(8) h2::before { content: "CONTRÔLE D’ACCÈS"; display: block; width: max-content; margin-bottom: 16px; padding: 7px 10px; border-radius: 999px; background: rgba(222, 7, 45, .10); color: #DE072D; font-size: 10px; line-height: 1; font-weight: 900; letter-spacing: .08em; } /* SOUS-TITRE */ #sovematic-solutions-page .sove-section:nth-of-type(8) h3 { max-width: 720px !important; font-size: 20px !important; line-height: 1.28 !important; } /* PARAGRAPHES */ #sovematic-solutions-page .sove-section:nth-of-type(8) p { max-width: 720px !important; font-size: 16px !important; line-height: 1.65 !important; color: #59666E !important; } #sovematic-solutions-page .sove-section:nth-of-type(8) strong { color: #111214 !important; } /* LISTE PLUS PROPRE */ #sovematic-solutions-page .sove-section:nth-of-type(8) ul { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; margin: 20px 0 0 !important; padding: 0 !important; list-style: none !important; } #sovematic-solutions-page .sove-section:nth-of-type(8) ul li { position: relative; margin: 0 !important; padding: 13px 15px 13px 39px !important; border: 1px solid rgba(17, 18, 20, .08); border-radius: 14px; background: #fff; color: #465159; font-size: 13.5px; line-height: 1.35; box-shadow: 0 8px 22px rgba(17, 18, 20, .045); } #sovematic-solutions-page .sove-section:nth-of-type(8) ul li::before { content: "✓"; position: absolute; left: 14px; top: 12px; display: flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; background: rgba(222, 7, 45, .10); color: #DE072D; font-size: 10px; font-weight: 900; } /* IMAGE À GAUCHE */ #sovematic-solutions-page .sove-section:nth-of-type(8) .sove-inline-image { position: absolute !important; top: 0 !important; left: 0 !important; right: auto !important; width: 46% !important; height: auto !important; margin: 0 !important; overflow: hidden !important; border: 1px solid rgba(17, 18, 20, .08) !important; border-radius: 28px !important; background: #fff !important; box-shadow: 0 28px 70px rgba(17, 18, 20, .13) !important; } #sovematic-solutions-page .sove-section:nth-of-type(8) .sove-inline-image img { display: block !important; width: 100% !important; height: 430px !important; object-fit: cover !important; } #sovematic-solutions-page .sove-section:nth-of-type(8) .sove-inline-image figcaption { margin: 0 !important; padding: 9px 14px !important; background: #fff !important; color: #7A858B !important; font-size: 11px !important; } /* CTA SOUS L’IMAGE */ #sovematic-solutions-page .sove-section:nth-of-type(8) .sove-actions { position: absolute !important; top: 480px !important; left: 0 !important; right: auto !important; width: 46% !important; margin: 0 !important; display: flex !important; justify-content: flex-start !important; align-items: center !important; } #sovematic-solutions-page .sove-section:nth-of-type(8) .sove-actions .sove-btn { min-height: 54px !important; padding: 14px 22px !important; font-size: 15px !important; box-shadow: 0 14px 32px rgba(222, 7, 45, .22) !important; } }/* ========================================================= REDESIGN PREMIUM — LAVAGE & SÉCHAGE IMAGE 1 + IMAGE 2 ========================================================= */ #sovematic-solutions-page .sove-section:nth-of-type(3) { position: relative; overflow: visible; } /* --------------------------------------------------------- TITRE / INTRO --------------------------------------------------------- */ #sovematic-solutions-page .sove-section:nth-of-type(3) h2 { max-width: 760px !important; margin-bottom: 28px !important; font-size: clamp(2.9rem, 4.2vw, 5rem) !important; line-height: .94 !important; letter-spacing: -.045em !important; text-wrap: balance; } #sovematic-solutions-page .sove-section:nth-of-type(3) h2::before { content: "LAVAGE & SÉCHAGE"; display: inline-flex; align-items: center; margin-bottom: 18px; padding: 8px 13px; border-radius: 999px; background: linear-gradient(145deg, #F9E7EC, #F4DCE3); color: #DE072D; font-size: 11px; line-height: 1; font-weight: 900; letter-spacing: .08em; } #sovematic-solutions-page .sove-section:nth-of-type(3) h2::after { content: ""; display: block; width: 88px; height: 4px; margin-top: 18px; border-radius: 999px; background: linear-gradient(90deg, #DE072D, #1F4E5F); } /* Sous-titre */ #sovematic-solutions-page .sove-section:nth-of-type(3) h2 + h3 { display: inline-flex; margin: 0 0 18px !important; padding: 10px 16px; border-radius: 14px; background: rgba(31, 78, 95, .08); color: #1F4E5F !important; font-size: 1.05rem !important; line-height: 1.2 !important; font-weight: 900 !important; } /* Premier paragraphe après le sous-titre = lead */ #sovematic-solutions-page .sove-section:nth-of-type(3) h2 + h3 + p { max-width: 820px !important; margin-bottom: 18px !important; color: #111214 !important; font-size: clamp(1.08rem, 1.22vw, 1.26rem) !important; line-height: 1.58 !important; font-weight: 700 !important; } /* Paragraphes généraux */ #sovematic-solutions-page .sove-section:nth-of-type(3) p { max-width: 790px !important; color: #59666E !important; font-size: 1.02rem !important; line-height: 1.75 !important; } /* --------------------------------------------------------- TITRE DU BLOC USAGES --------------------------------------------------------- */ #sovematic-solutions-page .sove-section:nth-of-type(3) ul { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; max-width: 950px !important; margin: 26px 0 0 !important; padding: 0 !important; list-style: none !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) ul::before { content: "POUR QUELS USAGES ?"; grid-column: 1 / -1; display: inline-flex; align-items: center; width: max-content; margin-bottom: 6px; padding: 7px 11px; border-radius: 999px; background: rgba(222, 7, 45, .08); color: #DE072D; font-size: 10px; line-height: 1; font-weight: 900; letter-spacing: .08em; } #sovematic-solutions-page .sove-section:nth-of-type(3) ul::after { content: ""; display: none; } /* --------------------------------------------------------- CARTES LISTE --------------------------------------------------------- */ #sovematic-solutions-page .sove-section:nth-of-type(3) ul li { position: relative; display: flex; align-items: flex-start; min-height: 92px; margin: 0 !important; padding: 22px 22px 20px 62px !important; border: 1px solid rgba(17, 18, 20, .07); border-radius: 18px; background: linear-gradient(145deg, #FFFFFF 0%, #F9FBFB 100%); color: #34414A !important; font-size: 1rem !important; line-height: 1.45 !important; box-shadow: 0 10px 26px rgba(17, 18, 20, .045); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease; } /* Icône check */ #sovematic-solutions-page .sove-section:nth-of-type(3) ul li::before { content: "✓"; position: absolute; left: 20px; top: 20px; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(145deg, rgba(222, 7, 45, .12), rgba(222, 7, 45, .20)); color: #DE072D; font-size: 13px; font-weight: 900; box-shadow: inset 0 1px 0 rgba(255,255,255,.6); } /* Fine barre en bas */ #sovematic-solutions-page .sove-section:nth-of-type(3) ul li::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: 0; height: 3px; border-radius: 999px 999px 0 0; background: linear-gradient(90deg, #DE072D, #1F4E5F); opacity: .18; transition: opacity .22s ease; } /* Hover */ #sovematic-solutions-page .sove-section:nth-of-type(3) ul li:hover { transform: translateY(-4px); border-color: rgba(222, 7, 45, .12); background: linear-gradient(145deg, #FFFFFF 0%, #F5FAFB 100%); box-shadow: 0 18px 38px rgba(17, 18, 20, .08); } #sovematic-solutions-page .sove-section:nth-of-type(3) ul li:hover::after { opacity: .7; } /* --------------------------------------------------------- RESPONSIVE --------------------------------------------------------- */ @media (max-width: 900px) { #sovematic-solutions-page .sove-section:nth-of-type(3) ul { grid-template-columns: 1fr !important; } } @media (max-width: 650px) { #sovematic-solutions-page .sove-section:nth-of-type(3) h2 { font-size: clamp(2.3rem, 10vw, 3.3rem) !important; line-height: .98 !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) h2 + h3 { font-size: .96rem !important; padding: 9px 13px; } #sovematic-solutions-page .sove-section:nth-of-type(3) h2 + h3 + p { font-size: 1.02rem !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) ul li { min-height: 0; padding: 18px 18px 17px 54px !important; border-radius: 16px; } #sovematic-solutions-page .sove-section:nth-of-type(3) ul li::before { left: 17px; top: 17px; width: 24px; height: 24px; } }/* ========================================================= LAVAGE & SÉCHAGE — VERSION PLUS FORTE / PLUS PREMIUM Remplace le rendu trop fade précédent ========================================================= */ @media (min-width: 1101px) { /* ----------------------------------------------------- TITRE ----------------------------------------------------- */ #sovematic-solutions-page .sove-section:nth-of-type(3) h2 { max-width: 760px !important; margin-bottom: 26px !important; font-size: clamp(3rem, 4.25vw, 4.9rem) !important; line-height: .95 !important; letter-spacing: -.055em !important; } /* On garde le petit badge rouge */ #sovematic-solutions-page .sove-section:nth-of-type(3) h2::before { content: "LAVAGE & SÉCHAGE"; display: inline-flex; margin-bottom: 18px; padding: 8px 12px; border-radius: 999px; background: #DE072D !important; color: #fff !important; font-size: 10px !important; font-weight: 900 !important; letter-spacing: .08em; } /* On supprime le petit trait fade précédent */ #sovematic-solutions-page .sove-section:nth-of-type(3) h2::after { display: none !important; } /* ----------------------------------------------------- SOUS-TITRE = VRAI BLOC FORT ----------------------------------------------------- */ #sovematic-solutions-page .sove-section:nth-of-type(3) h2 + h3 { display: block !important; max-width: 720px !important; margin: 0 0 20px !important; padding: 18px 22px !important; border-left: 5px solid #DE072D !important; border-radius: 0 18px 18px 0 !important; background: linear-gradient( 135deg, #143744 0%, #1F4E5F 100% ) !important; color: #fff !important; font-size: 20px !important; line-height: 1.25 !important; font-weight: 900 !important; box-shadow: 0 18px 40px rgba(20,55,68,.16) !important; } /* ----------------------------------------------------- PREMIER PARAGRAPHE : PLUS IMPACTANT ----------------------------------------------------- */ #sovematic-solutions-page .sove-section:nth-of-type(3) h2 + h3 + p { max-width: 720px !important; margin-bottom: 22px !important; padding-left: 18px !important; border-left: 2px solid rgba(31,78,95,.18); color: #111214 !important; font-size: 17px !important; line-height: 1.62 !important; font-weight: 750 !important; } /* Paragraphes courants */ #sovematic-solutions-page .sove-section:nth-of-type(3) p { max-width: 720px !important; color: #59666E !important; font-size: 15.5px !important; line-height: 1.68 !important; } /* ----------------------------------------------------- TITRE "CETTE SOLUTION..." ----------------------------------------------------- */ #sovematic-solutions-page .sove-section:nth-of-type(3) h3:not(:first-of-type) { margin-top: 32px !important; margin-bottom: 16px !important; font-size: 20px !important; line-height: 1.2 !important; } /* ----------------------------------------------------- CARTES USAGES — PLUS VISUELLES ----------------------------------------------------- */ #sovematic-solutions-page .sove-section:nth-of-type(3) ul { counter-reset: sove-benefit; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; max-width: 720px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } /* Désactive l'ancien faux titre */ #sovematic-solutions-page .sove-section:nth-of-type(3) ul::before { display: none !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) ul li { counter-increment: sove-benefit; position: relative; display: flex !important; align-items: center !important; min-height: 82px !important; margin: 0 !important; padding: 18px 18px 18px 64px !important; overflow: hidden; border: 1px solid rgba(31,78,95,.12) !important; border-radius: 18px !important; background: linear-gradient( 145deg, #143744 0%, #1F4E5F 100% ) !important; color: #fff !important; font-size: 14px !important; line-height: 1.4 !important; font-weight: 750 !important; box-shadow: 0 14px 30px rgba(20,55,68,.13) !important; transition: transform .2s ease, box-shadow .2s ease !important; } /* Numéro rouge */ #sovematic-solutions-page .sove-section:nth-of-type(3) ul li::before { content: "0" counter(sove-benefit) !important; position: absolute !important; left: 17px !important; top: 50% !important; transform: translateY(-50%) !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 34px !important; height: 34px !important; border-radius: 11px !important; background: #DE072D !important; color: #fff !important; font-size: 10px !important; font-weight: 950 !important; box-shadow: 0 8px 18px rgba(222,7,45,.30) !important; } /* Accent inférieur */ #sovematic-solutions-page .sove-section:nth-of-type(3) ul li::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: linear-gradient( 90deg, #DE072D 0%, #DE072D 25%, transparent 70% ); opacity: .9; } /* Dernier élément : prend toute la largeur */ #sovematic-solutions-page .sove-section:nth-of-type(3) ul li:last-child { grid-column: 1 / -1 !important; } /* Hover */ #sovematic-solutions-page .sove-section:nth-of-type(3) ul li:hover { transform: translateY(-4px); box-shadow: 0 22px 42px rgba(20,55,68,.20) !important; } } /* ========================================================= MOBILE / TABLETTE ========================================================= */ @media (max-width: 1100px) { #sovematic-solutions-page .sove-section:nth-of-type(3) ul { grid-template-columns: 1fr !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) ul li:last-child { grid-column: auto !important; } #sovematic-solutions-page .sove-section:nth-of-type(3) ul li { min-height: 72px !important; padding: 16px 16px 16px 60px !important; } }/* ========================================================= LAVAGE & SÉCHAGE — CENTRER LE BLOC DES CARTES SUR ORDI ========================================================= */ @media (min-width: 1101px) { /* Le titre du bloc reste centré dans la même largeur */ #sovematic-solutions-page .sove-section:nth-of-type(3) h3:not(:first-of-type) { max-width: 720px !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; } /* La grille est centrée */ #sovematic-solutions-page .sove-section:nth-of-type(3) ul { max-width: 980px !important; margin-left: auto !important; margin-right: auto !important; justify-content: center !important; } /* Les cartes restent bien au centre visuellement */ #sovematic-solutions-page .sove-section:nth-of-type(3) ul li { text-align: left !important; } }/* ========================================================= LAVAGE & SÉCHAGE — CENTRAGE RÉEL DU BLOC USAGES DESKTOP UNIQUEMENT ========================================================= */ @media (min-width: 1101px) { /* Titre du bloc */ #sovematic-solutions-page .sove-section:nth-of-type(3) h3:nth-of-type(2) { width: 86% !important; max-width: 620px !important; margin: 34px auto 18px !important; text-align: center !important; } /* Grille */ #sovematic-solutions-page .sove-section:nth-of-type(3) h3:nth-of-type(2) + ul { width: 86% !important; max-width: 620px !important; margin-left: auto !important; margin-right: auto !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* Cartes légèrement plus compactes */ #sovematic-solutions-page .sove-section:nth-of-type(3) h3:nth-of-type(2) + ul li { min-height: 78px !important; padding: 17px 17px 17px 62px !important; } /* Dernière carte centrée, au lieu de prendre toute la largeur */ #sovematic-solutions-page .sove-section:nth-of-type(3) h3:nth-of-type(2) + ul li:last-child { grid-column: 1 / -1 !important; width: calc(50% - 6px) !important; justify-self: center !important; } }/* ========================================================= FIX FINAL — CARTES USAGES CENTRÉES SUR TOUTE LA PAGE DESKTOP UNIQUEMENT ========================================================= */ @media (min-width: 1101px) { /* ----------------------------------------------------- TITRE "Cette solution..." Il sort de la colonne gauche et reprend toute la largeur ----------------------------------------------------- */ #sovematic-solutions-page .sove-section:nth-of-type(3) h3:nth-of-type(2) { position: relative !important; /* La colonne texte = 49% du conteneur. 204.082% permet donc de retrouver ~100% du conteneur. */ width: 204.082% !important; max-width: none !important; margin: 70px 0 20px !important; text-align: center !important; } /* ----------------------------------------------------- GRILLE DES 5 CARTES ----------------------------------------------------- */ #sovematic-solutions-page .sove-section:nth-of-type(3) h3:nth-of-type(2) + ul { width: 204.082% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; display: grid !important; /* Cartes volontairement limitées en largeur */ grid-template-columns: repeat(2, minmax(280px, 350px)) !important; justify-content: center !important; gap: 12px !important; list-style: none !important; } /* ----------------------------------------------------- CARTES ----------------------------------------------------- */ #sovematic-solutions-page .sove-section:nth-of-type(3) h3:nth-of-type(2) + ul > li { width: 100% !important; min-height: 78px !important; margin: 0 !important; } /* ----------------------------------------------------- 5e CARTE SEULE AU CENTRE ----------------------------------------------------- */ #sovematic-solutions-page .sove-section:nth-of-type(3) h3:nth-of-type(2) + ul > li:last-child { grid-column: 1 / -1 !important; width: 350px !important; justify-self: center !important; } /* ========================================================= BUANDERIES — MÊME DESIGN QUE LAVAGE & SÉCHAGE SECTION 4 ========================================================= */ @media (min-width: 1101px) { /* ===================================================== TITRE PRINCIPAL ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(4) h2 { max-width: 760px !important; margin-bottom: 26px !important; font-size: clamp(3rem, 4.25vw, 4.9rem) !important; line-height: .95 !important; letter-spacing: -.055em !important; } /* Badge rouge */ #sovematic-solutions-page .sove-section:nth-of-type(4) h2::before { content: "BUANDERIES"; display: inline-flex; width: max-content; margin-bottom: 18px; padding: 8px 12px; border-radius: 999px; background: #DE072D !important; color: #fff !important; font-size: 10px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: .08em; } /* ===================================================== SOUS-TITRE ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(4) h2 + h3 { display: block !important; max-width: 720px !important; margin: 0 0 20px !important; padding: 18px 22px !important; border-left: 5px solid #DE072D !important; border-radius: 0 18px 18px 0 !important; background: linear-gradient( 135deg, #143744 0%, #1F4E5F 100% ) !important; color: #fff !important; font-size: 20px !important; line-height: 1.25 !important; font-weight: 900 !important; box-shadow: 0 18px 40px rgba(20,55,68,.16) !important; } /* Premier paragraphe fort */ #sovematic-solutions-page .sove-section:nth-of-type(4) h2 + h3 + p { max-width: 720px !important; margin-bottom: 22px !important; padding-left: 18px !important; border-left: 2px solid rgba(31,78,95,.18); color: #111214 !important; font-size: 17px !important; line-height: 1.62 !important; font-weight: 750 !important; } /* Paragraphes */ #sovematic-solutions-page .sove-section:nth-of-type(4) p { max-width: 720px !important; color: #59666E !important; font-size: 15.5px !important; line-height: 1.68 !important; } /* ===================================================== DIMENSIONNEMENT SORT DE LA COLONNE DROITE ET PREND TOUTE LA LARGEUR ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(4) h3:nth-of-type(2) { position: relative !important; /* La partie texte représente 49 % du conteneur. On récupère ici toute la largeur. */ width: 204.082% !important; max-width: none !important; margin: 80px 0 22px -104.082% !important; padding: 0 !important; color: #111214 !important; font-size: 22px !important; line-height: 1.2 !important; text-align: center !important; } /* Petit label au-dessus */ #sovematic-solutions-page .sove-section:nth-of-type(4) h3:nth-of-type(2)::before { content: "DIMENSIONNEMENT"; display: block; width: max-content; margin: 0 auto 12px; padding: 7px 11px; border-radius: 999px; background: rgba(222,7,45,.09); color: #DE072D; font-size: 10px; line-height: 1; font-weight: 900; letter-spacing: .08em; } /* ===================================================== GRILLE DE 8 CARTES ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(4) h3:nth-of-type(2) + ul { counter-reset: sove-buanderie; width: 204.082% !important; max-width: none !important; margin: 0 0 0 -104.082% !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(2, minmax(300px, 420px)) !important; justify-content: center !important; gap: 12px !important; list-style: none !important; } /* Carte */ #sovematic-solutions-page .sove-section:nth-of-type(4) h3:nth-of-type(2) + ul > li { counter-increment: sove-buanderie; position: relative; display: flex !important; align-items: center !important; width: 100% !important; min-height: 78px !important; margin: 0 !important; padding: 18px 18px 18px 66px !important; overflow: hidden; border: 1px solid rgba(31,78,95,.12) !important; border-radius: 18px !important; background: linear-gradient( 145deg, #143744 0%, #1F4E5F 100% ) !important; color: #fff !important; font-size: 14px !important; line-height: 1.4 !important; font-weight: 750 !important; box-shadow: 0 14px 30px rgba(20,55,68,.13) !important; transition: transform .2s ease, box-shadow .2s ease !important; } /* Numéro rouge */ #sovematic-solutions-page .sove-section:nth-of-type(4) h3:nth-of-type(2) + ul > li::before { content: "0" counter(sove-buanderie) !important; position: absolute !important; left: 18px !important; top: 50% !important; transform: translateY(-50%) !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 35px !important; height: 35px !important; border-radius: 11px !important; background: #DE072D !important; color: #fff !important; font-size: 10px !important; font-weight: 950 !important; box-shadow: 0 8px 18px rgba(222,7,45,.30) !important; } /* Accent rouge inférieur */ #sovematic-solutions-page .sove-section:nth-of-type(4) h3:nth-of-type(2) + ul > li::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: linear-gradient( 90deg, #DE072D 0%, #DE072D 25%, transparent 70% ); } /* Hover */ #sovematic-solutions-page .sove-section:nth-of-type(4) h3:nth-of-type(2) + ul > li:hover { transform: translateY(-4px); box-shadow: 0 22px 42px rgba(20,55,68,.20) !important; } /* ===================================================== TEXTE FINAL SOUS LES CARTES ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(4) h3:nth-of-type(2) + ul + p { width: 204.082% !important; max-width: none !important; margin: 28px 0 0 -104.082% !important; padding: 0 20% !important; color: #59666E !important; font-size: 15px !important; text-align: center !important; } } }/* ========================================================= CENTRALES DE PAIEMENT — VERSION PREMIUM Même logique visuelle que les blocs précédents SECTION 5 ========================================================= */ @media (min-width: 1101px) { /* ----------------------------------------------------- TITRE ----------------------------------------------------- */ #sovematic-solutions-page .sove-section:nth-of-type(5) h2 { max-width: 760px !important; margin-bottom: 26px !important; font-size: clamp(3rem, 4.25vw, 4.9rem) !important; line-height: .95 !important; letter-spacing: -.055em !important; color: #fff !important; } #sovematic-solutions-page .sove-section:nth-of-type(5) h2::before { content: "PAIEMENT"; display: inline-flex; width: max-content; margin-bottom: 18px; padding: 8px 12px; border-radius: 999px; background: #DE072D !important; color: #fff !important; font-size: 10px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: .08em; } /* ----------------------------------------------------- SOUS-TITRE EN BLOC ----------------------------------------------------- */ #sovematic-solutions-page .sove-section:nth-of-type(5) h2 + h3 { display: block !important; max-width: 720px !important; margin: 0 0 20px !important; padding: 18px 22px !important; border-left: 5px solid #DE072D !important; border-radius: 0 18px 18px 0 !important; background: linear-gradient( 135deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.04) 100% ) !important; color: #fff !important; font-size: 20px !important; line-height: 1.25 !important; font-weight: 900 !important; box-shadow: 0 18px 40px rgba(0,0,0,.18) !important; } /* ----------------------------------------------------- PREMIER PARAGRAPHE FORT ----------------------------------------------------- */ #sovematic-solutions-page .sove-section:nth-of-type(5) h2 + h3 + p { max-width: 720px !important; margin-bottom: 22px !important; padding-left: 18px !important; border-left: 2px solid rgba(255,255,255,.16); color: #fff !important; font-size: 17px !important; line-height: 1.62 !important; font-weight: 750 !important; } /* Paragraphes généraux */ #sovematic-solutions-page .sove-section:nth-of-type(5) p { max-width: 720px !important; color: rgba(255,255,255,.78) !important; font-size: 15.5px !important; line-height: 1.68 !important; } #sovematic-solutions-page .sove-section:nth-of-type(5) strong { color: #fff !important; } /* ----------------------------------------------------- PHRASE "choisir → payer → laver → sécher" ----------------------------------------------------- */ #sovematic-solutions-page .sove-section:nth-of-type(5) p strong { font-weight: 900 !important; } /* ----------------------------------------------------- LISTE DES QUESTIONS → CARTES PREMIUM ----------------------------------------------------- */ #sovematic-solutions-page .sove-section:nth-of-type(5) ul { counter-reset: sove-pay; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; max-width: 720px !important; margin: 18px 0 28px !important; padding: 0 !important; list-style: none !important; } #sovematic-solutions-page .sove-section:nth-of-type(5) ul li { counter-increment: sove-pay; position: relative; display: flex !important; align-items: center !important; min-height: 78px !important; margin: 0 !important; padding: 18px 18px 18px 64px !important; overflow: hidden; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 18px !important; background: linear-gradient( 145deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.04) 100% ) !important; color: #fff !important; font-size: 14px !important; line-height: 1.4 !important; font-weight: 750 !important; box-shadow: 0 14px 30px rgba(0,0,0,.18) !important; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important; } /* pastille numérotée rouge */ #sovematic-solutions-page .sove-section:nth-of-type(5) ul li::before { content: "0" counter(sove-pay) !important; position: absolute !important; left: 18px !important; top: 50% !important; transform: translateY(-50%) !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 35px !important; height: 35px !important; border-radius: 11px !important; background: #DE072D !important; color: #fff !important; font-size: 10px !important; font-weight: 950 !important; box-shadow: 0 8px 18px rgba(222,7,45,.30) !important; } /* accent bas */ #sovematic-solutions-page .sove-section:nth-of-type(5) ul li::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: linear-gradient( 90deg, #DE072D 0%, #DE072D 25%, transparent 70% ); } #sovematic-solutions-page .sove-section:nth-of-type(5) ul li:last-child { grid-column: 1 / -1 !important; } #sovematic-solutions-page .sove-section:nth-of-type(5) ul li:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.18) !important; box-shadow: 0 22px 42px rgba(0,0,0,.24) !important; } /* ----------------------------------------------------- BLOCS "POUR L’UTILISATEUR" / "POUR L’EXPLOITANT" ----------------------------------------------------- */ /* 2e et 3e H3 */ #sovematic-solutions-page .sove-section:nth-of-type(5) h3:nth-of-type(2), #sovematic-solutions-page .sove-section:nth-of-type(5) h3:nth-of-type(3) { max-width: 720px !important; margin: 26px 0 10px !important; padding: 16px 18px 14px !important; border-left: 4px solid #DE072D !important; border-radius: 0 16px 16px 0 !important; background: rgba(255,255,255,.06) !important; color: #fff !important; font-size: 18px !important; line-height: 1.2 !important; box-shadow: 0 10px 24px rgba(0,0,0,.12) !important; } /* Paragraphe juste après ces H3 */ #sovematic-solutions-page .sove-section:nth-of-type(5) h3:nth-of-type(2) + p, #sovematic-solutions-page .sove-section:nth-of-type(5) h3:nth-of-type(3) + p { max-width: 720px !important; margin: 0 0 10px !important; padding: 0 0 0 18px !important; border-left: 2px solid rgba(255,255,255,.12) !important; color: rgba(255,255,255,.80) !important; font-size: 15.5px !important; line-height: 1.65 !important; } } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1100px) { #sovematic-solutions-page .sove-section:nth-of-type(5) ul { grid-template-columns: 1fr !important; } #sovematic-solutions-page .sove-section:nth-of-type(5) ul li:last-child { grid-column: auto !important; } #sovematic-solutions-page .sove-section:nth-of-type(5) ul li { min-height: 72px !important; padding: 16px 16px 16px 60px !important; } }/* ========================================================= CENTRALES DE PAIEMENT RECENTRER TOUT LE BLOC INFÉRIEUR à partir de "Sovematic propose..." ========================================================= */ @media (min-width: 1101px) { /* * La colonne texte fait environ 49 % de la largeur. * width:120% + margin-left:42.04% * replace réellement ce bloc au centre de la section. */ /* "Sovematic propose notamment..." */ #sovematic-solutions-page .sove-section:nth-of-type(5) p:nth-of-type(5), /* "La centrale devient particulièrement pertinente..." */ #sovematic-solutions-page .sove-section:nth-of-type(5) p:nth-of-type(6), /* Pour l'utilisateur */ #sovematic-solutions-page .sove-section:nth-of-type(5) h3:nth-of-type(2), /* Texte utilisateur */ #sovematic-solutions-page .sove-section:nth-of-type(5) h3:nth-of-type(2) + p, /* Pour l'exploitant */ #sovematic-solutions-page .sove-section:nth-of-type(5) h3:nth-of-type(3), /* Texte exploitant */ #sovematic-solutions-page .sove-section:nth-of-type(5) h3:nth-of-type(3) + p { width: 120% !important; max-width: none !important; margin-left: 42.04% !important; margin-right: 0 !important; box-sizing: border-box !important; } /* ===================================================== DÉBUT DU BLOC ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(5) p:nth-of-type(5) { margin-top: 70px !important; margin-bottom: 16px !important; text-align: center !important; font-size: 16px !important; line-height: 1.7 !important; } #sovematic-solutions-page .sove-section:nth-of-type(5) p:nth-of-type(6) { margin-top: 0 !important; margin-bottom: 32px !important; text-align: center !important; color: rgba(255,255,255,.72) !important; } /* ===================================================== POUR L'UTILISATEUR / POUR L'EXPLOITANT ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(5) h3:nth-of-type(2), #sovematic-solutions-page .sove-section:nth-of-type(5) h3:nth-of-type(3) { padding: 16px 22px !important; border-left: 0 !important; border-bottom: 3px solid #DE072D !important; border-radius: 16px !important; background: linear-gradient( 135deg, rgba(255,255,255,.10), rgba(255,255,255,.055) ) !important; text-align: center !important; color: #fff !important; } #sovematic-solutions-page .sove-section:nth-of-type(5) h3:nth-of-type(2) { margin-top: 0 !important; margin-bottom: 8px !important; } #sovematic-solutions-page .sove-section:nth-of-type(5) h3:nth-of-type(3) { margin-top: 30px !important; margin-bottom: 8px !important; } /* Textes sous les deux cartes */ #sovematic-solutions-page .sove-section:nth-of-type(5) h3:nth-of-type(2) + p, #sovematic-solutions-page .sove-section:nth-of-type(5) h3:nth-of-type(3) + p { padding: 8px 20px !important; border-left: 0 !important; text-align: center !important; color: rgba(255,255,255,.80) !important; } }/* ========================================================= GESTION DES DOUCHES — VERSION PREMIUM Même logique visuelle que les autres blocs SECTION 6 ========================================================= */ @media (min-width: 1101px) { /* ----------------------------------------------------- TITRE ----------------------------------------------------- */ #sovematic-solutions-page .sove-section:nth-of-type(6) h2 { max-width: 760px !important; margin-bottom: 26px !important; font-size: clamp(3rem, 4.25vw, 4.9rem) !important; line-height: .95 !important; letter-spacing: -.055em !important; } #sovematic-solutions-page .sove-section:nth-of-type(6) h2::before { content: "GESTION DES DOUCHES"; display: inline-flex; width: max-content; margin-bottom: 18px; padding: 8px 12px; border-radius: 999px; background: #DE072D !important; color: #fff !important; font-size: 10px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: .08em; } /* ----------------------------------------------------- SOUS-TITRE EN BLOC ----------------------------------------------------- */ #sovematic-solutions-page .sove-section:nth-of-type(6) h2 + h3 { display: block !important; max-width: 720px !important; margin: 0 0 20px !important; padding: 18px 22px !important; border-left: 5px solid #DE072D !important; border-radius: 0 18px 18px 0 !important; background: linear-gradient( 135deg, #143744 0%, #1F4E5F 100% ) !important; color: #fff !important; font-size: 20px !important; line-height: 1.25 !important; font-weight: 900 !important; box-shadow: 0 18px 40px rgba(20,55,68,.16) !important; } /* Premier paragraphe fort */ #sovematic-solutions-page .sove-section:nth-of-type(6) h2 + h3 + p { max-width: 720px !important; margin-bottom: 22px !important; padding-left: 18px !important; border-left: 2px solid rgba(31,78,95,.18); color: #111214 !important; font-size: 17px !important; line-height: 1.62 !important; font-weight: 750 !important; } /* Paragraphes généraux */ #sovematic-solutions-page .sove-section:nth-of-type(6) p { max-width: 720px !important; color: #59666E !important; font-size: 15.5px !important; line-height: 1.68 !important; } #sovematic-solutions-page .sove-section:nth-of-type(6) strong { color: #111214 !important; } /* ----------------------------------------------------- BLOC "L'OBJECTIF" sort de la colonne droite et prend toute la largeur ----------------------------------------------------- */ #sovematic-solutions-page .sove-section:nth-of-type(6) h3:nth-of-type(2) { position: relative !important; width: 204.082% !important; max-width: none !important; margin: 80px 0 18px -104.082% !important; text-align: center !important; color: #111214 !important; font-size: 22px !important; line-height: 1.2 !important; } #sovematic-solutions-page .sove-section:nth-of-type(6) h3:nth-of-type(2)::before { content: "RÉSULTAT VISÉ"; display: block; width: max-content; margin: 0 auto 12px; padding: 7px 11px; border-radius: 999px; background: rgba(222,7,45,.09); color: #DE072D; font-size: 10px; line-height: 1; font-weight: 900; letter-spacing: .08em; } /* ----------------------------------------------------- TEXTE DU BLOC OBJECTIF ----------------------------------------------------- */ /* "Passer de :" */ #sovematic-solutions-page .sove-section:nth-of-type(6) h3:nth-of-type(2) + p { width: 204.082% !important; max-width: none !important; margin: 0 0 14px -104.082% !important; text-align: center !important; color: #6A7680 !important; font-size: 18px !important; } /* "douche libre → durée inconnue" */ #sovematic-solutions-page .sove-section:nth-of-type(6) h3:nth-of-type(2) + p + p { width: 204.082% !important; max-width: none !important; margin: 0 0 18px -104.082% !important; display: flex !important; justify-content: center !important; align-items: center !important; text-align: center !important; font-size: 28px !important; line-height: 1.22 !important; font-weight: 900 !important; color: #111214 !important; } /* "à :" */ #sovematic-solutions-page .sove-section:nth-of-type(6) h3:nth-of-type(2) + p + p + p { width: 204.082% !important; max-width: none !important; margin: 0 0 14px -104.082% !important; text-align: center !important; color: #6A7680 !important; font-size: 18px !important; } /* "utilisateur autorisé..." => carte premium */ #sovematic-solutions-page .sove-section:nth-of-type(6) h3:nth-of-type(2) + p + p + p + p { width: 204.082% !important; max-width: none !important; margin: 0 0 24px -104.082% !important; display: flex !important; justify-content: center !important; } #sovematic-solutions-page .sove-section:nth-of-type(6) h3:nth-of-type(2) + p + p + p + p { position: relative !important; padding: 0 !important; } #sovematic-solutions-page .sove-section:nth-of-type(6) h3:nth-of-type(2) + p + p + p + p::before { content: "APRÈS"; position: absolute; top: -14px; left: 50%; transform: translateX(-50%); padding: 6px 10px; border-radius: 999px; background: #DE072D; color: #fff; font-size: 10px; line-height: 1; font-weight: 900; letter-spacing: .08em; } /* Le texte interne de la carte */ #sovematic-solutions-page .sove-section:nth-of-type(6) h3:nth-of-type(2) + p + p + p + p { text-align: center !important; color: transparent !important; } #sovematic-solutions-page .sove-section:nth-of-type(6) h3:nth-of-type(2) + p + p + p + p { background: none !important; } /* On recrée le contenu visuellement */ #sovematic-solutions-page .sove-section:nth-of-type(6) h3:nth-of-type(2) + p + p + p + p strong, #sovematic-solutions-page .sove-section:nth-of-type(6) h3:nth-of-type(2) + p + p + p + p b { color: inherit !important; } #sovematic-solutions-page .sove-section:nth-of-type(6) h3:nth-of-type(2) + p + p + p + p { font-size: 0 !important; } #sovematic-solutions-page .sove-section:nth-of-type(6) h3:nth-of-type(2) + p + p + p + p::after { content: "utilisateur autorisé → règle définie → utilisation maîtrisée"; display: inline-block; min-width: 760px; max-width: 980px; padding: 28px 34px 24px; border: 1px solid rgba(31,78,95,.12); border-radius: 22px; background: linear-gradient( 145deg, #143744 0%, #1F4E5F 100% ); color: #fff; font-size: 20px; line-height: 1.35; font-weight: 850; box-shadow: 0 20px 48px rgba(20,55,68,.18); } /* Dernier texte de conclusion */ #sovematic-solutions-page .sove-section:nth-of-type(6) h3:nth-of-type(2) + p + p + p + p + p { width: 204.082% !important; max-width: none !important; margin: 0 0 0 -104.082% !important; padding: 0 18% !important; text-align: center !important; color: #59666E !important; font-size: 15.5px !important; } }/* ========================================================= BARRIÈRES AUTOMATIQUES — VERSION PREMIUM SECTION 7 Conserve image + CTA à droite ========================================================= */ @media (min-width: 1101px) { /* ===================================================== TITRE ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(7) h2 { max-width: 760px !important; margin-bottom: 26px !important; font-size: clamp(3rem, 4.25vw, 4.9rem) !important; line-height: .95 !important; letter-spacing: -.055em !important; color: #fff !important; } /* Badge */ #sovematic-solutions-page .sove-section:nth-of-type(7) h2::before { content: "ACCÈS VÉHICULES"; display: inline-flex; width: max-content; margin-bottom: 18px; padding: 8px 12px; border-radius: 999px; background: #DE072D !important; color: #fff !important; font-size: 10px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: .08em; } /* ===================================================== SOUS-TITRE ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(7) h2 + h3 { display: block !important; max-width: 720px !important; margin: 0 0 20px !important; padding: 18px 22px !important; border-left: 5px solid #DE072D !important; border-radius: 0 18px 18px 0 !important; background: linear-gradient( 135deg, rgba(255,255,255,.09), rgba(255,255,255,.04) ) !important; color: #fff !important; font-size: 20px !important; line-height: 1.25 !important; font-weight: 900 !important; box-shadow: 0 18px 40px rgba(0,0,0,.18) !important; } /* ===================================================== PREMIER PARAGRAPHE FORT ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(7) h2 + h3 + p { max-width: 720px !important; margin-bottom: 24px !important; padding-left: 18px !important; border-left: 2px solid rgba(255,255,255,.18); color: #fff !important; font-size: 17px !important; line-height: 1.62 !important; font-weight: 750 !important; } /* Paragraphes */ #sovematic-solutions-page .sove-section:nth-of-type(7) p { max-width: 720px !important; color: rgba(255,255,255,.76) !important; font-size: 15.5px !important; line-height: 1.68 !important; } #sovematic-solutions-page .sove-section:nth-of-type(7) strong { color: #fff !important; } /* ===================================================== "ELLE DOIT ÊTRE DIMENSIONNÉE SELON" ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(7) p:nth-of-type(3) { margin: 28px 0 9px !important; color: rgba(255,255,255,.62) !important; font-size: 13px !important; font-weight: 850 !important; text-transform: uppercase; letter-spacing: .06em; } /* phrase largeur + véhicules + fréquence... */ #sovematic-solutions-page .sove-section:nth-of-type(7) p:nth-of-type(4) { position: relative; margin: 0 0 26px !important; padding: 21px 22px 21px 65px !important; overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 18px; background: linear-gradient( 135deg, rgba(255,255,255,.09), rgba(255,255,255,.045) ); color: #fff !important; box-shadow: 0 16px 32px rgba(0,0,0,.16); } #sovematic-solutions-page .sove-section:nth-of-type(7) p:nth-of-type(4)::before { content: "01"; position: absolute; left: 18px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 11px; background: #DE072D; color: #fff; font-size: 10px; font-weight: 950; box-shadow: 0 8px 18px rgba(222,7,45,.28); } #sovematic-solutions-page .sove-section:nth-of-type(7) p:nth-of-type(4)::after { content: ""; position: absolute; left: 0; bottom: 0; width: 45%; height: 3px; background: linear-gradient( 90deg, #DE072D, transparent ); } /* ===================================================== BLOC BAS : "Mais la barrière constitue..." ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(7) p:nth-of-type(7) { margin-top: 32px !important; padding-top: 24px !important; border-top: 1px solid rgba(255,255,255,.10); color: #fff !important; font-size: 17px !important; } /* Phrase expliquant le contrôle d'accès */ #sovematic-solutions-page .sove-section:nth-of-type(7) p:nth-of-type(8) { margin-bottom: 18px !important; } /* ===================================================== BADGE · CODE · PLAQUE · INTERPHONE ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(7) p:nth-of-type(9) { position: relative; margin: 22px 0 !important; padding: 22px 24px !important; border: 1px solid rgba(222,7,45,.25); border-radius: 18px; background: linear-gradient( 135deg, rgba(222,7,45,.13), rgba(255,255,255,.045) ); color: #fff !important; text-align: center; font-size: 16px !important; font-weight: 900 !important; letter-spacing: .015em; box-shadow: 0 14px 32px rgba(0,0,0,.15); } #sovematic-solutions-page .sove-section:nth-of-type(7) p:nth-of-type(9)::before { content: "MODES D’IDENTIFICATION"; display: block; width: max-content; margin: 0 auto 12px; padding: 6px 9px; border-radius: 999px; background: #DE072D; color: #fff; font-size: 9px; font-weight: 900; letter-spacing: .08em; } /* Dernière phrase */ #sovematic-solutions-page .sove-section:nth-of-type(7) p:nth-of-type(10) { padding-left: 18px !important; border-left: 2px solid rgba(255,255,255,.13); color: rgba(255,255,255,.70) !important; } }/* ========================================================= BARRIÈRES AUTOMATIQUES CENTRER LE BLOC "MODES D’IDENTIFICATION" + LE TEXTE JUSTE EN DESSOUS DESKTOP UNIQUEMENT ========================================================= */ @media (min-width: 1101px) { /* Carte "Modes d’identification" */ #sovematic-solutions-page .sove-section:nth-of-type(7) p:nth-of-type(9) { width: 82% !important; max-width: 760px !important; margin: 22px auto !important; text-align: center !important; } /* Texte sous la carte */ #sovematic-solutions-page .sove-section:nth-of-type(7) p:nth-of-type(10) { width: 82% !important; max-width: 760px !important; margin: 0 auto !important; padding: 0 0 0 18px !important; text-align: center !important; border-left: 0 !important; } }/* ========================================================= BARRIÈRES AUTOMATIQUES CENTRAGE DE TOUT LE BLOC BAS À PARTIR DE LA BARRE HORIZONTALE ========================================================= */ @media (min-width: 1101px) { /* ===================================================== RESET DES ANCIENS DÉPLACEMENTS ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(7) p:nth-of-type(7), #sovematic-solutions-page .sove-section:nth-of-type(7) p:nth-of-type(8), #sovematic-solutions-page .sove-section:nth-of-type(7) p:nth-of-type(9), #sovematic-solutions-page .sove-section:nth-of-type(7) p:nth-of-type(10) { left: auto !important; right: auto !important; transform: none !important; } /* ===================================================== BLOC 1 BARRE + "Mais la barrière constitue..." ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(7) p:nth-of-type(7) { position: relative !important; /* on récupère toute la largeur de la section */ width: 204.082% !important; max-width: none !important; margin: 52px 0 20px !important; padding: 38px 15% 0 !important; border-top: 0 !important; text-align: center !important; color: #fff !important; font-size: 17px !important; line-height: 1.6 !important; } /* BARRE HORIZONTALE CENTRÉE */ #sovematic-solutions-page .sove-section:nth-of-type(7) p:nth-of-type(7)::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 72%; height: 1px; background: rgba(255,255,255,.14); } /* ===================================================== "Elle doit souvent fonctionner..." ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(7) p:nth-of-type(8) { width: 204.082% !important; max-width: none !important; margin: 0 0 28px !important; padding: 0 18% !important; text-align: center !important; color: rgba(255,255,255,.76) !important; font-size: 15.5px !important; line-height: 1.65 !important; } /* ===================================================== MODES D'IDENTIFICATION ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(7) p:nth-of-type(9) { position: relative !important; width: 150% !important; max-width: 900px !important; margin: 0 0 24px !important; /* centre réel par rapport à toute la section */ left: 102.04% !important; transform: translateX(-50%) !important; padding: 25px 30px !important; text-align: center !important; } /* ===================================================== PHRASE FINALE ===================================================== */ #sovematic-solutions-page .sove-section:nth-of-type(7) p:nth-of-type(10) { position: relative !important; width: 145% !important; max-width: 820px !important; margin: 0 !important; left: 102.04% !important; transform: translateX(-50%) !important; padding: 0 !important; border-left: 0 !important; text-align: center !important; color: rgba(255,255,255,.70) !important; line-height: 1.65 !important; } }/* ========================================================= CONTRÔLE D’ACCÈS — VERSION PREMIUM SECTION 8 Image + CTA à gauche / texte à droite conservés ========================================================= */ @media (min-width: 1101px) { /* ----------------------------------------------------- TITRE ----------------------------------------------------- */ #sovematic-solutions-page .sove-section:nth-of-type(8) h2 { max-width: 760px !important; margin-bottom: 26px !important; font-size: clamp(3rem, 4.25vw, 4.9rem) !important; line-height: .95 !important; letter-spacing: -.055em !important; } #sovematic-solutions-page .sove-section:nth-of-type(8) h2::before { content: "CONTRÔLE D’ACCÈS"; display: inline-flex; width: max-content; margin-bottom: 18px; padding: 8px 12px; border-radius: 999px; background: #DE072D !important; color: #fff !important; font-size: 10px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: .08em; } /* ----------------------------------------------------- SOUS-TITRE EN BLOC ----------------------------------------------------- */ #sovematic-solutions-page .sove-section:nth-of-type(8) h2 + h3 { display: block !important; max-width: 720px !important; margin: 0 0 20px !important; padding: 18px 22px !important; border-left: 5px solid #DE072D !important; border-radius: 0 18px 18px 0 !important; background: linear-gradient( 135deg, #143744 0%, #1F4E5F 100% ) !important; color: #fff !important; font-size: 20px !important; line-height: 1.25 !important; font-weight: 900 !important; box-shadow: 0 18px 40px rgba(20,55,68,.16) !important; } /* ----------------------------------------------------- PREMIER PARAGRAPHE FORT ----------------------------------------------------- */ #sovematic-solutions-page .sove-section:nth-of-type(8) h2 + h3 + p { max-width: 720px !important; margin-bottom: 22px !important; padding-left: 18px !important; border-left: 2px solid rgba(31,78,95,.18); color: #111214 !important; font-size: 17px !important; line-height: 1.62 !important; font-weight: 750 !important; } /* Paragraphes généraux */ #sovematic-solutions-page .sove-section:nth-of-type(8) p { max-width: 720px !important; color: #59666E !important; font-size: 15.5px !important; line-height: 1.68 !important; } #sovematic-solutions-page .sove-section:nth-of-type(8) strong { color: #111214 !important; } /* ----------------------------------------------------- "UN SYSTÈME DE CONTRÔLE..." ----------------------------------------------------- */ #sovematic-solutions-page .sove-section:nth-of-type(8) p:nth-of-type(3) { margin-top: 26px !important; margin-bottom: 12px !important; color: #59666E !important; } /* ----------------------------------------------------- "QUI ? OÙ ? QUAND ? AVEC QUELS DROITS ?" ----------------------------------------------------- */ #sovematic-solutions-page .sove-section:nth-of-type(8) p:nth-of-type(4) { position: relative; margin: 0 0 28px !important; padding: 20px 22px 20px 64px !important; border: 1px solid rgba(31,78,95,.12); border-radius: 18px; background: linear-gradient( 145deg, #143744 0%, #1F4E5F 100% ); color: #fff !important; font-size: 18px !important; line-height: 1.45 !important; font-weight: 850 !important; box-shadow: 0 16px 34px rgba(20,55,68,.14); } #sovematic-solutions-page .sove-section:nth-of-type(8) p:nth-of-type(4)::before { content: "01"; position: absolute; left: 18px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 11px; background: #DE072D; color: #fff; font-size: 10px; font-weight: 950; box-shadow: 0 8px 18px rgba(222,7,45,.28); } #sovematic-solutions-page .sove-section:nth-of-type(8) p:nth-of-type(4)::after { content: ""; position: absolute; left: 0; bottom: 0; width: 42%; height: 3px; background: linear-gradient( 90deg, #DE072D, transparent ); } /* ----------------------------------------------------- INTRO DE LA LISTE ----------------------------------------------------- */ #sovematic-solutions-page .sove-section:nth-of-type(8) p:nth-of-type(5) { margin: 0 0 16px !important; color: #59666E !important; font-size: 13px !important; font-weight: 850 !important; text-transform: uppercase; letter-spacing: .06em; } /* ----------------------------------------------------- LISTE DES TECHNOLOGIES -> CARTES PREMIUM ----------------------------------------------------- */ #sovematic-solutions-page .sove-section:nth-of-type(8) ul { counter-reset: sove-access; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; max-width: 720px !important; margin: 0 0 26px !important; padding: 0 !important; list-style: none !important; } #sovematic-solutions-page .sove-section:nth-of-type(8) ul li { counter-increment: sove-access; position: relative; display: flex !important; align-items: center !important; min-height: 78px !important; margin: 0 !important; padding: 18px 18px 18px 64px !important; overflow: hidden; border: 1px solid rgba(31,78,95,.10) !important; border-radius: 18px !important; background: linear-gradient( 145deg, #143744 0%, #1F4E5F 100% ) !important; color: #fff !important; font-size: 14px !important; line-height: 1.4 !important; font-weight: 750 !important; box-shadow: 0 14px 30px rgba(20,55,68,.13) !important; transition: transform .2s ease, box-shadow .2s ease !important; } #sovematic-solutions-page .sove-section:nth-of-type(8) ul li::before { content: "0" counter(sove-access) !important; position: absolute !important; left: 18px !important; top: 50% !important; transform: translateY(-50%) !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 35px !important; height: 35px !important; border-radius: 11px !important; background: #DE072D !important; color: #fff !important; font-size: 10px !important; font-weight: 950 !important; box-shadow: 0 8px 18px rgba(222,7,45,.30) !important; } #sovematic-solutions-page .sove-section:nth-of-type(8) ul li::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: linear-gradient( 90deg, #DE072D 0%, #DE072D 25%, transparent 70% ); } #sovematic-solutions-page .sove-section:nth-of-type(8) ul li:last-child { grid-column: 1 / -1 !important; } #sovematic-solutions-page .sove-section:nth-of-type(8) ul li:hover { transform: translateY(-4px); box-shadow: 0 22px 42px rgba(20,55,68,.20) !important; } /* ----------------------------------------------------- PHRASE "SELON LA CONFIGURATION..." ----------------------------------------------------- */ #sovematic-solutions-page .sove-section:nth-of-type(8) p:nth-of-type(6) { padding-left: 18px !important; border-left: 2px solid rgba(31,78,95,.13); color: #59666E !important; } /* ----------------------------------------------------- PHRASE FINALE ----------------------------------------------------- */ #sovematic-solutions-page .sove-section:nth-of-type(8) p:nth-of-type(7) { margin-top: 28px !important; padding: 20px 22px !important; border: 1px solid rgba(222,7,45,.13); border-radius: 18px; background: linear-gradient( 145deg, rgba(222,7,45,.05), rgba(31,78,95,.05) ); color: #111214 !important; font-size: 17px !important; line-height: 1.6 !important; font-weight: 850 !important; box-shadow: 0 12px 28px rgba(17,18,20,.05); } } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1100px) { #sovematic-solutions-page .sove-section:nth-of-type(8) ul { grid-template-columns: 1fr !important; } #sovematic-solutions-page .sove-section:nth-of-type(8) ul li:last-child { grid-column: auto !important; } #sovematic-solutions-page .sove-section:nth-of-type(8) ul li { min-height: 72px !important; padding: 16px 16px 16px 60px !important; } }/* ========================================================= CONTRÔLE D’ACCÈS CENTRER TOUT LE BLOC BAS "SOVEMATIC PROPOSE..." + CARTES + TEXTES ========================================================= */ @media (min-width: 1101px) { /* ----------------------------------------------------- 1) TITRE D’INTRO DU BLOC "SOVEMATIC PROPOSE..." ----------------------------------------------------- */ #sovematic-solutions-page .sove-section:nth-of-type(8) p:nth-of-type(5) { width: 204.082% !important; max-width: none !important; margin: 42px 0 18px -104.082% !important; padding: 0 15% !important; text-align: center !important; font-size: 13px !important; line-height: 1.45 !important; } /* ----------------------------------------------------- 2) GRILLE DES CARTES ----------------------------------------------------- */ #sovematic-solutions-page .sove-section:nth-of-type(8) ul { width: 204.082% !important; max-width: none !important; margin: 0 0 22px -104.082% !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(2, minmax(280px, 360px)) !important; justify-content: center !important; gap: 12px !important; } /* cartes */ #sovematic-solutions-page .sove-section:nth-of-type(8) ul li { width: 100% !important; min-height: 78px !important; margin: 0 !important; } /* dernière carte centrée seule */ #sovematic-solutions-page .sove-section:nth-of-type(8) ul li:last-child { grid-column: 1 / -1 !important; width: 360px !important; justify-self: center !important; } /* ----------------------------------------------------- 3) PHRASE "SELON LA CONFIGURATION..." ----------------------------------------------------- */ #sovematic-solutions-page .sove-section:nth-of-type(8) p:nth-of-type(6) { width: 204.082% !important; max-width: none !important; margin: 0 0 26px -104.082% !important; padding: 0 17% !important; text-align: center !important; border-left: 0 !important; } /* ----------------------------------------------------- 4) BLOC FINAL ROSE ----------------------------------------------------- */ #sovematic-solutions-page .sove-section:nth-of-type(8) p:nth-of-type(7) { width: 204.082% !important; max-width: none !important; margin: 0 0 0 -104.082% !important; display: flex !important; justify-content: center !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; } /* on recrée un vrai bloc centré plus compact */ #sovematic-solutions-page .sove-section:nth-of-type(8) p:nth-of-type(7) > * { all: unset; } #sovematic-solutions-page .sove-section:nth-of-type(8) p:nth-of-type(7) { color: transparent !important; font-size: 0 !important; } #sovematic-solutions-page .sove-section:nth-of-type(8) p:nth-of-type(7)::after { content: "La barrière, le portail ou la porte constitue l’obstacle physique. Le contrôle d’accès décide si cet obstacle doit s’ouvrir."; display: block; width: min(820px, 78%); padding: 22px 26px !important; border: 1px solid rgba(222, 7, 45, .16); border-radius: 18px; background: linear-gradient( 145deg, rgba(222,7,45,.05), rgba(31,78,95,.05) ); color: #111214 !important; font-size: 17px !important; line-height: 1.6 !important; font-weight: 850 !important; text-align: center !important; box-shadow: 0 12px 28px rgba(17,18,20,.05); } }/* ========================================================= CONTRÔLE D’ACCÈS DESCENDRE LÉGÈREMENT LE BLOC CENTRÉ ========================================================= */ @media (min-width: 1101px) { /* Titre intro du bloc */ #sovematic-solutions-page .sove-section:nth-of-type(8) p:nth-of-type(5) { margin-top: 70px !important; } }/* ========================================================= SIX SOLUTIONS — DESIGN CENTRÉ BON CIBLAGE = SECTION 9 ========================================================= */ @media (min-width: 1101px) { /* SECTION */ #sovematic-solutions-page > .sove-section:nth-of-type(9) { padding: 100px 0 !important; background: radial-gradient( circle at 15% 20%, rgba(222, 7, 45, .06), transparent 30% ), radial-gradient( circle at 85% 70%, rgba(31, 78, 95, .07), transparent 32% ), #F7F7F5 !important; } /* CONTENEUR */ #sovematic-solutions-page > .sove-section:nth-of-type(9) > .sove-container { display: flex !important; flex-direction: column !important; align-items: center !important; width: calc(100% - 80px) !important; max-width: 1100px !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; } /* ===================================================== TITRE ===================================================== */ #sovematic-solutions-page > .sove-section:nth-of-type(9) h2 { max-width: 980px !important; margin: 0 auto 38px !important; font-size: clamp(3rem, 4.4vw, 5rem) !important; line-height: .96 !important; letter-spacing: -.055em !important; text-align: center !important; text-wrap: balance; } /* Badge */ #sovematic-solutions-page > .sove-section:nth-of-type(9) h2::before { content: "NOTRE APPROCHE"; display: block; width: max-content; margin: 0 auto 20px; padding: 8px 12px; border-radius: 999px; background: #DE072D; color: #fff; font-size: 10px; line-height: 1; font-weight: 900; letter-spacing: .09em; } /* Trait décoratif */ #sovematic-solutions-page > .sove-section:nth-of-type(9) h2::after { content: ""; display: block; width: 90px; height: 4px; margin: 22px auto 0; border-radius: 999px; background: linear-gradient( 90deg, #DE072D, #1F4E5F ); } /* ===================================================== 3 PREMIÈRES PHRASES ===================================================== */ #sovematic-solutions-page > .sove-section:nth-of-type(9) p:nth-of-type(1), #sovematic-solutions-page > .sove-section:nth-of-type(9) p:nth-of-type(2), #sovematic-solutions-page > .sove-section:nth-of-type(9) p:nth-of-type(3) { width: 100% !important; max-width: 780px !important; margin: 0 auto 13px !important; color: #59666E !important; font-size: 17px !important; line-height: 1.65 !important; text-align: center !important; } /* ===================================================== PHRASE CLÉ ===================================================== */ #sovematic-solutions-page > .sove-section:nth-of-type(9) p:nth-of-type(4) { position: relative; width: 100% !important; max-width: 820px !important; margin: 34px auto 34px !important; padding: 30px 38px !important; overflow: hidden; border: 1px solid rgba(31,78,95,.12); border-radius: 24px; background: linear-gradient( 135deg, #143744, #1F4E5F ) !important; color: #fff !important; font-size: 22px !important; line-height: 1.4 !important; font-weight: 900 !important; text-align: center !important; box-shadow: 0 22px 50px rgba(20,55,68,.16); } /* petit label du bloc */ #sovematic-solutions-page > .sove-section:nth-of-type(9) p:nth-of-type(4)::before { content: "LE PRINCIPE"; display: block; width: max-content; margin: 0 auto 16px; padding: 7px 11px; border-radius: 999px; background: #DE072D; color: #fff; font-size: 9px; line-height: 1; font-weight: 900; letter-spacing: .08em; } /* accent bas */ #sovematic-solutions-page > .sove-section:nth-of-type(9) p:nth-of-type(4)::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 210px; height: 4px; background: linear-gradient( 90deg, #DE072D, rgba(222,7,45,0) ); } /* ===================================================== TEXTE EXPLICATIF ===================================================== */ #sovematic-solutions-page > .sove-section:nth-of-type(9) p:nth-of-type(5) { width: 100% !important; max-width: 850px !important; margin: 0 auto 26px !important; color: #465159 !important; font-size: 17px !important; line-height: 1.75 !important; text-align: center !important; } /* ===================================================== CONCLUSION ===================================================== */ #sovematic-solutions-page > .sove-section:nth-of-type(9) p:nth-of-type(6) { width: 100% !important; max-width: 800px !important; margin: 0 auto !important; padding: 20px 26px !important; border: 1px solid rgba(31,78,95,.10); border-radius: 18px; background: rgba(31,78,95,.055) !important; color: #1F4E5F !important; font-size: 16px !important; line-height: 1.7 !important; font-weight: 700 !important; text-align: center !important; } }/* ========================================================= PLUSIEURS SOLUTIONS PEUVENT FONCTIONNER ENSEMBLE REDESIGN PREMIUM — SECTION 10 ========================================================= */ @media (min-width: 1101px) { /* ===================================================== SECTION ===================================================== */ #sovematic-solutions-page > .sove-section:nth-of-type(10) { position: relative; overflow: hidden; padding: 105px 0 115px !important; background: radial-gradient( circle at 10% 5%, rgba(222,7,45,.22), transparent 30% ), radial-gradient( circle at 90% 80%, rgba(31,78,95,.35), transparent 38% ), linear-gradient( 145deg, #111214 0%, #102731 100% ) !important; } /* grille décorative discrète */ #sovematic-solutions-page > .sove-section:nth-of-type(10)::before { content: ""; position: absolute; inset: 0; opacity: .22; background-image: linear-gradient( rgba(255,255,255,.04) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.04) 1px, transparent 1px ); background-size: 48px 48px; pointer-events: none; } /* ===================================================== CONTENEUR ===================================================== */ #sovematic-solutions-page > .sove-section:nth-of-type(10) > .sove-container { width: calc(100% - 80px) !important; max-width: 1240px !important; margin: 0 auto !important; text-align: center !important; } /* ===================================================== GROS TITRE ===================================================== */ #sovematic-solutions-page > .sove-section:nth-of-type(10) h2 { max-width: 920px !important; margin: 0 auto 24px !important; color: #fff !important; font-size: clamp(3.1rem, 4.8vw, 5.4rem) !important; line-height: .94 !important; letter-spacing: -.055em !important; text-align: center !important; text-wrap: balance; } /* badge */ #sovematic-solutions-page > .sove-section:nth-of-type(10) h2::before { content: "SOLUTIONS COMBINÉES"; display: block; width: max-content; margin: 0 auto 20px; padding: 8px 12px; border-radius: 999px; background: #DE072D; color: #fff; font-size: 10px; line-height: 1; font-weight: 900; letter-spacing: .09em; } #sovematic-solutions-page > .sove-section:nth-of-type(10) h2::after { content: ""; display: block; width: 100px; height: 4px; margin: 22px auto 0; border-radius: 999px; background: linear-gradient( 90deg, #DE072D, #4A8397 ); } /* intro */ #sovematic-solutions-page > .sove-section:nth-of-type(10) h2 + p { max-width: 760px !important; margin: 0 auto 55px !important; color: rgba(255,255,255,.68) !important; font-size: 17px !important; line-height: 1.7 !important; text-align: center !important; } /* ===================================================== EXEMPLE CAMPING ===================================================== */ #sovematic-solutions-page > .sove-section:nth-of-type(10) h3:nth-of-type(1) { width: max-content; margin: 0 auto 14px !important; padding: 9px 14px !important; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: #fff !important; font-size: 16px !important; font-weight: 900 !important; letter-spacing: .01em; } /* Intro camping */ #sovematic-solutions-page > .sove-section:nth-of-type(10) h3:nth-of-type(1) + p { max-width: 720px !important; margin: 0 auto 24px !important; color: rgba(255,255,255,.68) !important; text-align: center !important; } /* ===================================================== SCHÉMA CAMPING ===================================================== */ #sovematic-solutions-page > .sove-section:nth-of-type(10) .sove-flow-diagram { position: relative; width: min(920px, 100%) !important; max-width: 920px !important; margin: 0 auto 34px !important; padding: 34px 40px !important; overflow: hidden; border: 1px solid rgba(255,255,255,.13) !important; border-radius: 28px !important; background: linear-gradient( 145deg, rgba(255,255,255,.075), rgba(255,255,255,.035) ) !important; color: #fff !important; text-align: left !important; font-size: 14px !important; line-height: 1.8 !important; box-shadow: 0 30px 70px rgba(0,0,0,.24) !important; backdrop-filter: blur(8px); } /* accent rouge haut du schéma */ #sovematic-solutions-page > .sove-section:nth-of-type(10) .sove-flow-diagram::before { content: "ÉCOSYSTÈME CAMPING"; display: block; width: max-content; margin: 0 0 22px; padding: 7px 10px; border-radius: 999px; background: #DE072D; color: #fff; font-family: Roboto, Arial, sans-serif; font-size: 9px; line-height: 1; font-weight: 900; letter-spacing: .08em; } /* ===================================================== TEXTE EXPLICATIF SOUS LE SCHÉMA ===================================================== */ #sovematic-solutions-page > .sove-section:nth-of-type(10) .sove-flow-diagram + p { max-width: 780px !important; margin: 0 auto 12px !important; color: rgba(255,255,255,.70) !important; text-align: center !important; } /* "Il possède un parcours client..." */ #sovematic-solutions-page > .sove-section:nth-of-type(10) .sove-flow-diagram + p + p { max-width: 760px !important; margin: 28px auto 12px !important; color: rgba(255,255,255,.62) !important; text-align: center !important; font-size: 13px !important; font-weight: 850 !important; text-transform: uppercase; letter-spacing: .06em; } /* ===================================================== PARCOURS CLIENT ===================================================== */ #sovematic-solutions-page > .sove-section:nth-of-type(10) .sove-flow-diagram + p + p + p { position: relative; max-width: 900px !important; margin: 0 auto 28px !important; padding: 22px 30px !important; border: 1px solid rgba(222,7,45,.22); border-radius: 20px; background: linear-gradient( 135deg, rgba(222,7,45,.13), rgba(255,255,255,.04) ); color: #fff !important; text-align: center !important; font-size: 18px !important; line-height: 1.5 !important; font-weight: 900 !important; box-shadow: 0 18px 38px rgba(0,0,0,.16); } #sovematic-solutions-page > .sove-section:nth-of-type(10) .sove-flow-diagram + p + p + p::before { content: "PARCOURS CLIENT"; display: block; width: max-content; margin: 0 auto 14px; padding: 6px 9px; border-radius: 999px; background: #DE072D; color: #fff; font-size: 9px; line-height: 1; font-weight: 900; letter-spacing: .08em; } /* paragraphe final camping */ #sovematic-solutions-page > .sove-section:nth-of-type(10) .sove-flow-diagram + p + p + p + p { max-width: 820px !important; margin: 0 auto 28px !important; color: rgba(255,255,255,.68) !important; text-align: center !important; line-height: 1.7 !important; } /* ===================================================== CTA CAMPING ===================================================== */ #sovematic-solutions-page > .sove-section:nth-of-type(10) .sove-actions { justify-content: center !important; margin: 30px auto 0 !important; } #sovematic-solutions-page > .sove-section:nth-of-type(10) .sove-actions .sove-btn { min-height: 56px !important; padding: 15px 24px !important; box-shadow: 0 18px 38px rgba(222,7,45,.30) !important; } }/* ========================================================= ÉCOSYSTÈME CAMPING — VERSION PLUS ESTHÉTIQUE ========================================================= */ .sove-ecosystem-camping { position: relative; overflow: hidden; max-width: 980px; margin: 0 auto 34px; padding: 34px 34px 36px; border: 1px solid rgba(255,255,255,.12); border-radius: 28px; background: radial-gradient(circle at 10% 10%, rgba(222,7,45,.12), transparent 28%), radial-gradient(circle at 90% 85%, rgba(31,78,95,.20), transparent 30%), linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.025)); box-shadow: 0 26px 60px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05); backdrop-filter: blur(8px); } .sove-ecosystem-top { text-align: center; margin-bottom: 28px; } .sove-ecosystem-badge { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; padding: 8px 12px; border-radius: 999px; background: #DE072D; color: #fff; font-size: 10px; font-weight: 900; line-height: 1; letter-spacing: .08em; } .sove-ecosystem-top h4 { margin: 0 0 10px; color: #fff; font-size: clamp(1.8rem, 2.5vw, 2.5rem); line-height: 1; letter-spacing: -.03em; } .sove-ecosystem-top p { max-width: 640px; margin: 0 auto; color: rgba(255,255,255,.70); font-size: 15px; line-height: 1.65; } .sove-ecosystem-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .sove-ecosystem-card { position: relative; overflow: hidden; min-height: 220px; padding: 24px 22px 22px; border: 1px solid rgba(255,255,255,.10); border-radius: 22px; background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); box-shadow: 0 14px 32px rgba(0,0,0,.16); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .sove-ecosystem-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.16); box-shadow: 0 22px 44px rgba(0,0,0,.22); } .sove-ecosystem-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, #DE072D, rgba(222,7,45,0)); } .sove-ecosystem-number { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-bottom: 16px; border-radius: 12px; background: #DE072D; color: #fff; font-size: 11px; font-weight: 950; line-height: 1; box-shadow: 0 10px 22px rgba(222,7,45,.28); } .sove-ecosystem-card h5 { margin: 0 0 14px; color: #fff; font-size: 1.22rem; line-height: 1.2; font-weight: 900; } .sove-ecosystem-card ul { margin: 0; padding: 0; list-style: none; } .sove-ecosystem-card ul li { position: relative; padding-left: 18px; margin-bottom: 10px; color: rgba(255,255,255,.82); font-size: 15px; line-height: 1.55; } .sove-ecosystem-card ul li:last-child { margin-bottom: 0; } .sove-ecosystem-card ul li::before { content: ""; position: absolute; left: 0; top: .65em; width: 8px; height: 8px; border-radius: 50%; background: #DE072D; box-shadow: 0 0 0 4px rgba(222,7,45,.12); } /* Responsive */ @media (max-width: 980px) { .sove-ecosystem-grid { grid-template-columns: 1fr; } .sove-ecosystem-card { min-height: 0; } } @media (max-width: 640px) { .sove-ecosystem-camping { padding: 24px 18px 24px; border-radius: 22px; } .sove-ecosystem-top { margin-bottom: 22px; } .sove-ecosystem-card { padding: 20px 18px; border-radius: 18px; } }/* ========================================================= EXEMPLE RÉSIDENCE — DESIGN PREMIUM ========================================================= */ .sove-residence-example { max-width: 1100px; margin: 0 auto; text-align: center; } .sove-residence-head { margin-bottom: 28px; } .sove-residence-head h3 { margin: 0 0 14px; color: #fff; font-size: clamp(2rem, 3vw, 3rem); line-height: 1.05; font-weight: 900; letter-spacing: -.03em; } .sove-residence-head p { max-width: 820px; margin: 0 auto; color: rgba(255,255,255,.72); font-size: 17px; line-height: 1.7; } /* ========================================================= ÉCOSYSTÈME RÉSIDENCE ========================================================= */ .sove-ecosystem-residence { position: relative; overflow: hidden; max-width: 980px; margin: 0 auto 42px; padding: 34px 34px 38px; border: 1px solid rgba(255,255,255,.12); border-radius: 28px; background: radial-gradient(circle at 10% 10%, rgba(222,7,45,.12), transparent 30%), radial-gradient(circle at 90% 85%, rgba(31,78,95,.22), transparent 34%), linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.025)); box-shadow: 0 26px 60px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04); backdrop-filter: blur(8px); } .sove-ecosystem-top { text-align: center; margin-bottom: 28px; } .sove-ecosystem-badge { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; padding: 8px 12px; border-radius: 999px; background: #DE072D; color: #fff; font-size: 10px; font-weight: 900; line-height: 1; letter-spacing: .08em; } .sove-ecosystem-top h4 { margin: 0 0 10px; color: #fff; font-size: clamp(1.8rem, 2.5vw, 2.5rem); line-height: 1; letter-spacing: -.03em; } .sove-ecosystem-top p { max-width: 680px; margin: 0 auto; color: rgba(255,255,255,.70); font-size: 15px; line-height: 1.65; } .sove-ecosystem-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .sove-ecosystem-grid--single { grid-template-columns: minmax(320px, 420px); justify-content: center; } .sove-ecosystem-card { position: relative; overflow: hidden; min-height: 220px; padding: 24px 22px 22px; border: 1px solid rgba(255,255,255,.10); border-radius: 22px; background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); box-shadow: 0 14px 32px rgba(0,0,0,.16); text-align: left; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .sove-ecosystem-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.16); box-shadow: 0 22px 44px rgba(0,0,0,.22); } .sove-ecosystem-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, #DE072D, rgba(222,7,45,0)); } .sove-ecosystem-number { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-bottom: 16px; border-radius: 12px; background: #DE072D; color: #fff; font-size: 11px; font-weight: 950; line-height: 1; box-shadow: 0 10px 22px rgba(222,7,45,.28); } .sove-ecosystem-card h5 { margin: 0 0 14px; color: #fff; font-size: 1.22rem; line-height: 1.2; font-weight: 900; } .sove-ecosystem-card ul { margin: 0; padding: 0; list-style: none; } .sove-ecosystem-card ul li { position: relative; padding-left: 18px; margin-bottom: 10px; color: rgba(255,255,255,.82); font-size: 15px; line-height: 1.55; } .sove-ecosystem-card ul li:last-child { margin-bottom: 0; } .sove-ecosystem-card ul li::before { content: ""; position: absolute; left: 0; top: .65em; width: 8px; height: 8px; border-radius: 50%; background: #DE072D; box-shadow: 0 0 0 4px rgba(222,7,45,.12); } /* ========================================================= BLOC PROBLÈME / RÉPONSE ========================================================= */ .sove-residence-problem { max-width: 980px; margin: 0 auto; } .sove-residence-problem-intro { margin: 0 0 18px; color: rgba(255,255,255,.76); font-size: 17px; line-height: 1.6; } .sove-residence-problem-card, .sove-residence-answer-card { position: relative; overflow: hidden; max-width: 900px; margin: 0 auto 18px; padding: 26px 28px; border-radius: 22px; text-align: center; } .sove-residence-problem-card { border: 1px solid rgba(255,255,255,.12); background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.025)); box-shadow: 0 18px 38px rgba(0,0,0,.16); } .sove-residence-answer-card { border: 1px solid rgba(222,7,45,.20); background: linear-gradient(135deg, rgba(222,7,45,.12), rgba(255,255,255,.04)); box-shadow: 0 20px 42px rgba(0,0,0,.18); } .sove-residence-problem-badge { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; padding: 8px 12px; border-radius: 999px; background: #DE072D; color: #fff; font-size: 10px; line-height: 1; font-weight: 900; letter-spacing: .08em; } .sove-residence-problem-card p, .sove-residence-answer-card p { margin: 0; color: #fff; font-size: clamp(1.18rem, 2vw, 1.8rem); line-height: 1.45; font-weight: 900; } .sove-residence-answer-card p { max-width: 760px; margin: 0 auto; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 980px) { .sove-ecosystem-grid--single { grid-template-columns: 1fr; } } @media (max-width: 640px) { .sove-residence-head h3 { font-size: clamp(1.7rem, 8vw, 2.4rem); } .sove-ecosystem-residence { padding: 24px 18px 24px; border-radius: 22px; } .sove-ecosystem-card { min-height: 0; padding: 20px 18px; border-radius: 18px; } .sove-residence-problem-card, .sove-residence-answer-card { padding: 20px 18px; border-radius: 18px; } .sove-residence-problem-card p, .sove-residence-answer-card p { font-size: 1.06rem; } }/* ========================================================= EXEMPLE HÔTEL / HÉBERGEMENT ========================================================= */ .sove-hotel-example { max-width: 1180px; margin: 0 auto; text-align: center; } /* INTRO */ .sove-hotel-head { max-width: 850px; margin: 0 auto 30px; } .sove-hotel-kicker { display: inline-flex; margin-bottom: 15px; padding: 8px 12px; border-radius: 999px; background: #DE072D; color: #fff; font-size: 10px; line-height: 1; font-weight: 900; letter-spacing: .08em; } .sove-hotel-head h3 { margin: 0 0 14px; color: #fff; font-size: clamp(2.1rem, 3.2vw, 3.4rem); line-height: 1; letter-spacing: -.04em; } .sove-hotel-head p { max-width: 760px; margin: 0 auto; color: rgba(255,255,255,.70); font-size: 16px; line-height: 1.7; } /* GROS BLOC */ .sove-hotel-ecosystem { position: relative; overflow: hidden; padding: 34px; border: 1px solid rgba(255,255,255,.11); border-radius: 30px; background: radial-gradient( circle at 8% 5%, rgba(222,7,45,.15), transparent 30% ), radial-gradient( circle at 92% 100%, rgba(31,78,95,.30), transparent 34% ), linear-gradient( 145deg, rgba(255,255,255,.07), rgba(255,255,255,.025) ); box-shadow: 0 30px 70px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05); } /* ENTÊTE INTERNE */ .sove-hotel-top { max-width: 720px; margin: 0 auto 34px; } .sove-hotel-top > span { display: inline-flex; margin-bottom: 14px; padding: 7px 11px; border-radius: 999px; background: rgba(222,7,45,.16); color: #ff3658; font-size: 10px; font-weight: 900; letter-spacing: .08em; } .sove-hotel-top h4 { margin: 0 0 10px; color: #fff; font-size: clamp(1.7rem, 2.5vw, 2.4rem); line-height: 1; } .sove-hotel-top p { margin: 0; color: rgba(255,255,255,.68); font-size: 15px; line-height: 1.65; } /* PARCOURS */ .sove-hotel-flow { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); gap: 10px; align-items: center; margin-bottom: 30px; } .sove-hotel-step { position: relative; min-height: 155px; padding: 22px 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.10); border-radius: 20px; background: linear-gradient( 160deg, rgba(255,255,255,.085), rgba(255,255,255,.035) ); box-shadow: 0 14px 30px rgba(0,0,0,.14); } .sove-hotel-step span { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-bottom: 13px; border-radius: 11px; background: #DE072D; color: #fff; font-size: 10px; font-weight: 950; box-shadow: 0 9px 20px rgba(222,7,45,.27); } .sove-hotel-step strong { margin-bottom: 6px; color: #fff; font-size: 15px; line-height: 1.25; } .sove-hotel-step small { color: rgba(255,255,255,.58); font-size: 11px; line-height: 1.4; } .sove-hotel-arrow { color: #DE072D; font-size: 24px; font-weight: 900; } /* OBJECTIF */ .sove-hotel-conclusion { max-width: 830px; margin: 0 auto; padding: 22px 28px; border: 1px solid rgba(222,7,45,.20); border-radius: 20px; background: linear-gradient( 135deg, rgba(222,7,45,.12), rgba(255,255,255,.035) ); } .sove-hotel-conclusion span { display: inline-flex; margin-bottom: 10px; padding: 6px 9px; border-radius: 999px; background: #DE072D; color: #fff; font-size: 9px; line-height: 1; font-weight: 900; letter-spacing: .08em; } .sove-hotel-conclusion p { margin: 0; color: rgba(255,255,255,.78); font-size: 16px; line-height: 1.6; } .sove-hotel-conclusion strong { color: #fff; } /* CTA */ .sove-hotel-actions { display: flex; justify-content: center; margin-top: 30px; } .sove-hotel-actions .sove-btn { min-height: 56px; padding: 15px 25px; box-shadow: 0 18px 38px rgba(222,7,45,.30); } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1000px) { .sove-hotel-flow { grid-template-columns: repeat(5, 1fr); gap: 10px; } .sove-hotel-arrow { display: none; } } @media (max-width: 760px) { .sove-hotel-ecosystem { padding: 24px 18px; border-radius: 22px; } .sove-hotel-flow { grid-template-columns: 1fr; } .sove-hotel-step { min-height: 0; padding: 18px; flex-direction: row; justify-content: flex-start; text-align: left; } .sove-hotel-step span { flex: 0 0 auto; margin: 0 14px 0 0; } .sove-hotel-step strong { margin: 0; } .sove-hotel-step small { margin-left: auto; } .sove-hotel-conclusion { padding: 20px 18px; } }/* ========================================================= EXEMPLE PARKING / SITE CONTRÔLÉ — DESIGN PREMIUM ========================================================= */ .sove-parking-example { max-width: 1180px; margin: 0 auto; text-align: center; } /* --------------------------------------------------------- INTRO --------------------------------------------------------- */ .sove-parking-head { max-width: 850px; margin: 0 auto 30px; } .sove-parking-kicker { display: inline-flex; margin-bottom: 15px; padding: 8px 12px; border-radius: 999px; background: #DE072D; color: #fff; font-size: 10px; line-height: 1; font-weight: 900; letter-spacing: .08em; } .sove-parking-head h3 { margin: 0 0 14px; color: #fff; font-size: clamp(2.1rem, 3.2vw, 3.4rem); line-height: 1; letter-spacing: -.04em; } .sove-parking-head p { max-width: 760px; margin: 0 auto; color: rgba(255,255,255,.72); font-size: 16px; line-height: 1.7; } /* --------------------------------------------------------- BLOC PRINCIPAL --------------------------------------------------------- */ .sove-parking-ecosystem { position: relative; overflow: hidden; padding: 34px; border: 1px solid rgba(255,255,255,.11); border-radius: 30px; background: radial-gradient(circle at 8% 5%, rgba(222,7,45,.15), transparent 30%), radial-gradient(circle at 92% 100%, rgba(31,78,95,.30), transparent 34%), linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); box-shadow: 0 30px 70px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05); } /* --------------------------------------------------------- ENTÊTE INTERNE --------------------------------------------------------- */ .sove-parking-top { max-width: 760px; margin: 0 auto 34px; } .sove-parking-top > span { display: inline-flex; margin-bottom: 14px; padding: 7px 11px; border-radius: 999px; background: rgba(222,7,45,.16); color: #ff3658; font-size: 10px; font-weight: 900; letter-spacing: .08em; } .sove-parking-top h4 { margin: 0 0 10px; color: #fff; font-size: clamp(1.7rem, 2.5vw, 2.4rem); line-height: 1; } .sove-parking-top p { margin: 0; color: rgba(255,255,255,.68); font-size: 15px; line-height: 1.65; } /* --------------------------------------------------------- FLUX PRINCIPAL --------------------------------------------------------- */ .sove-parking-flow { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); gap: 10px; align-items: center; } .sove-parking-step { position: relative; min-height: 165px; padding: 22px 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.10); border-radius: 20px; background: linear-gradient(160deg, rgba(255,255,255,.085), rgba(255,255,255,.035)); box-shadow: 0 14px 30px rgba(0,0,0,.14); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .sove-parking-step:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.15); box-shadow: 0 20px 40px rgba(0,0,0,.20); } .sove-parking-step::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, #DE072D, rgba(222,7,45,0)); } .sove-parking-step span { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-bottom: 13px; border-radius: 11px; background: #DE072D; color: #fff; font-size: 10px; font-weight: 950; box-shadow: 0 9px 20px rgba(222,7,45,.27); } .sove-parking-step strong { margin-bottom: 6px; color: #fff; font-size: 15px; line-height: 1.25; } .sove-parking-step small { color: rgba(255,255,255,.58); font-size: 11px; line-height: 1.45; } .sove-parking-arrow { color: #DE072D; font-size: 24px; font-weight: 900; } /* --------------------------------------------------------- BLOC SYNTHÈSE --------------------------------------------------------- */ .sove-parking-summary { max-width: 1100px; margin: 34px auto 0; } .sove-parking-summary-intro { margin: 0 0 18px; color: rgba(255,255,255,.76); font-size: 17px; line-height: 1.6; } .sove-parking-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .sove-parking-summary-card { position: relative; overflow: hidden; padding: 26px 24px 24px; border: 1px solid rgba(222,7,45,.18); border-radius: 22px; background: linear-gradient(135deg, rgba(222,7,45,.12), rgba(255,255,255,.04)); box-shadow: 0 20px 42px rgba(0,0,0,.18); text-align: center; } .sove-parking-summary-card span { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-bottom: 14px; border-radius: 11px; background: #DE072D; color: #fff; font-size: 10px; font-weight: 950; box-shadow: 0 9px 20px rgba(222,7,45,.27); } .sove-parking-summary-card strong { display: block; margin-bottom: 10px; color: #fff; font-size: 1.2rem; line-height: 1.4; font-weight: 900; } .sove-parking-summary-card p { margin: 0; color: rgba(255,255,255,.72); font-size: 15px; line-height: 1.65; } /* --------------------------------------------------------- RESPONSIVE --------------------------------------------------------- */ @media (max-width: 1000px) { .sove-parking-flow { grid-template-columns: repeat(5, 1fr); gap: 10px; } .sove-parking-arrow { display: none; } .sove-parking-summary-grid { grid-template-columns: 1fr; } } @media (max-width: 760px) { .sove-parking-ecosystem { padding: 24px 18px; border-radius: 22px; } .sove-parking-flow { grid-template-columns: 1fr; } .sove-parking-step { min-height: 0; padding: 18px; flex-direction: row; justify-content: flex-start; text-align: left; } .sove-parking-step span { flex: 0 0 auto; margin: 0 14px 0 0; } .sove-parking-step strong { margin: 0; } .sove-parking-step small { margin-left: auto; text-align: right; } .sove-parking-summary-card { padding: 20px 18px; border-radius: 18px; } .sove-parking-summary-card strong { font-size: 1.05rem; } }/* ========================================================= SUPPRESSION DES BADGES GÉNÉRÉS AVANT LES H2 ========================================================= */ #sovematic-solutions-page .sove-section:nth-of-type(3) h2::before, #sovematic-solutions-page .sove-section:nth-of-type(4) h2::before, #sovematic-solutions-page .sove-section:nth-of-type(5) h2::before, #sovematic-solutions-page .sove-section:nth-of-type(6) h2::before, #sovematic-solutions-page .sove-section:nth-of-type(7) h2::before, #sovematic-solutions-page .sove-section:nth-of-type(8) h2::before { content: none !important; display: none !important; }/* End custom CSS */