:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-6cd09ea *//* ========================================================= HERO CENTRALE DE PAIEMENT VERSION COMPACTE / PREMIUM / RESPONSIVE ========================================================= */ /* ========================================================= DESKTOP ========================================================= */ @media (min-width: 1101px) { /* HERO GLOBAL */ #sovematic-payment-page #centrale-de-paiement-pour-laverie-encaissez-simplement-pilotez-plus-facilement { min-height: 0 !important; padding: 58px 0 64px !important; } /* ===================================================== GRILLE CORRECTION PRINCIPALE : ON SÉPARE COLUMN-GAP ET ROW-GAP ===================================================== */ #sovematic-payment-page #centrale-de-paiement-pour-laverie-encaissez-simplement-pilotez-plus-facilement > .sove-container { display: grid !important; grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr) !important; column-gap: clamp(42px, 4vw, 72px) !important; row-gap: 8px !important; align-items: center !important; width: min(1420px, calc(100% - 80px)) !important; max-width: 1420px !important; } /* ===================================================== EYEBROW ===================================================== */ #sovematic-payment-page #centrale-de-paiement-pour-laverie-encaissez-simplement-pilotez-plus-facilement .sove-eyebrow { grid-column: 1 !important; width: fit-content !important; margin: 0 0 12px !important; padding: 7px 12px !important; font-size: 9px !important; } /* ===================================================== TITRE ===================================================== */ #sovematic-payment-page #centrale-de-paiement-pour-laverie-encaissez-simplement-pilotez-plus-facilement h1 { grid-column: 1 !important; max-width: 760px !important; margin: 0 0 14px !important; font-size: clamp(3rem, 4vw, 4.65rem) !important; line-height: .96 !important; letter-spacing: -.055em !important; text-wrap: balance !important; } /* ===================================================== PARAGRAPHES ===================================================== */ #sovematic-payment-page #centrale-de-paiement-pour-laverie-encaissez-simplement-pilotez-plus-facilement > .sove-container > p { grid-column: 1 !important; width: 100% !important; max-width: 720px !important; margin: 0 0 8px !important; font-size: 14px !important; line-height: 1.55 !important; } /* INTRO */ #sovematic-payment-page #centrale-de-paiement-pour-laverie-encaissez-simplement-pilotez-plus-facilement > .sove-container > p:nth-of-type(1) { font-size: 16px !important; margin-bottom: 7px !important; } /* PHRASE FORTE */ #sovematic-payment-page #centrale-de-paiement-pour-laverie-encaissez-simplement-pilotez-plus-facilement > .sove-container > p:nth-of-type(3) { margin: 5px 0 10px !important; padding: 13px 15px !important; border-left: 3px solid #DE072D !important; border-radius: 0 14px 14px 0 !important; background: rgba(255,255,255,.055) !important; font-size: 14px !important; line-height: 1.5 !important; } /* DERNIER PARAGRAPHE AVANT CTA */ #sovematic-payment-page #centrale-de-paiement-pour-laverie-encaissez-simplement-pilotez-plus-facilement > .sove-container > p:nth-of-type(6) { margin-bottom: 10px !important; } /* ===================================================== BOUTONS PLUS COMPACTS ===================================================== */ #sovematic-payment-page #centrale-de-paiement-pour-laverie-encaissez-simplement-pilotez-plus-facilement > .sove-container > p:has(.sove-btn) { margin: 0 0 4px !important; } #sovematic-payment-page #centrale-de-paiement-pour-laverie-encaissez-simplement-pilotez-plus-facilement .sove-btn { min-height: 46px !important; padding: 11px 18px !important; margin: 0 !important; font-size: 12px !important; } /* ===================================================== IMAGE DROITE ===================================================== */ #sovematic-payment-page #centrale-de-paiement-pour-laverie-encaissez-simplement-pilotez-plus-facilement .sove-hero-media { grid-column: 2 !important; grid-row: 1 / span 20 !important; align-self: center !important; width: 100% !important; max-width: 560px !important; margin: 0 0 0 auto !important; border-radius: 28px !important; } #sovematic-payment-page #centrale-de-paiement-pour-laverie-encaissez-simplement-pilotez-plus-facilement .sove-hero-media img { width: 100% !important; height: 500px !important; object-fit: cover !important; } /* HR inutile dans le hero */ #sovematic-payment-page #centrale-de-paiement-pour-laverie-encaissez-simplement-pilotez-plus-facilement > .sove-container > hr { display: none !important; } } /* ========================================================= TABLETTE ========================================================= */ @media (min-width: 768px) and (max-width: 1100px) { #sovematic-payment-page #centrale-de-paiement-pour-laverie-encaissez-simplement-pilotez-plus-facilement { padding: 54px 0 58px !important; } #sovematic-payment-page #centrale-de-paiement-pour-laverie-encaissez-simplement-pilotez-plus-facilement > .sove-container { display: flex !important; flex-direction: column !important; gap: 0 !important; width: calc(100% - 48px) !important; } #sovematic-payment-page #centrale-de-paiement-pour-laverie-encaissez-simplement-pilotez-plus-facilement .sove-eyebrow { margin: 0 auto 13px !important; } #sovematic-payment-page #centrale-de-paiement-pour-laverie-encaissez-simplement-pilotez-plus-facilement h1 { max-width: 850px !important; margin: 0 auto 18px !important; text-align: center !important; } #sovematic-payment-page #centrale-de-paiement-pour-laverie-encaissez-simplement-pilotez-plus-facilement > .sove-container > p { max-width: 760px !important; margin: 0 auto 10px !important; text-align: center !important; } #sovematic-payment-page #centrale-de-paiement-pour-laverie-encaissez-simplement-pilotez-plus-facilement > .sove-container > p:nth-of-type(3) { border-left: 0 !important; border-top: 3px solid #DE072D !important; border-radius: 15px !important; padding: 14px 16px !important; } #sovematic-payment-page #centrale-de-paiement-pour-laverie-encaissez-simplement-pilotez-plus-facilement > .sove-container > p:has(.sove-btn) { margin: 2px auto 7px !important; } #sovematic-payment-page #centrale-de-paiement-pour-laverie-encaissez-simplement-pilotez-plus-facilement .sove-hero-media { order: 20 !important; width: min(100%, 760px) !important; margin: 20px auto 0 !important; border-radius: 24px !important; } #sovematic-payment-page #centrale-de-paiement-pour-laverie-encaissez-simplement-pilotez-plus-facilement .sove-hero-media img { height: 390px !important; } #sovematic-payment-page #centrale-de-paiement-pour-laverie-encaissez-simplement-pilotez-plus-facilement hr { display: none !important; } } /* ========================================================= SMARTPHONE ========================================================= */ @media (max-width: 767px) { #sovematic-payment-page #centrale-de-paiement-pour-laverie-encaissez-simplement-pilotez-plus-facilement { padding: 34px 0 42px !important; } #sovematic-payment-page #centrale-de-paiement-pour-laverie-encaissez-simplement-pilotez-plus-facilement > .sove-container { display: flex !important; flex-direction: column !important; gap: 0 !important; width: calc(100% - 28px) !important; } /* badge */ #sovematic-payment-page #centrale-de-paiement-pour-laverie-encaissez-simplement-pilotez-plus-facilement .sove-eyebrow { align-self: center !important; margin: 0 auto 12px !important; padding: 7px 10px !important; font-size: 8px !important; text-align: center !important; } /* titre */ #sovematic-payment-page #centrale-de-paiement-pour-laverie-encaissez-simplement-pilotez-plus-facilement h1 { width: 100% !important; max-width: 100% !important; margin: 0 auto 18px !important; font-size: clamp(2.2rem, 10vw, 3rem) !important; line-height: .98 !important; letter-spacing: -.05em !important; text-align: center !important; text-wrap: balance !important; } /* textes */ #sovematic-payment-page #centrale-de-paiement-pour-laverie-encaissez-simplement-pilotez-plus-facilement > .sove-container > p { width: 100% !important; max-width: 100% !important; margin: 0 0 10px !important; font-size: 13.5px !important; line-height: 1.58 !important; text-align: center !important; } #sovematic-payment-page #centrale-de-paiement-pour-laverie-encaissez-simplement-pilotez-plus-facilement > .sove-container > p:nth-of-type(1) { font-size: 15px !important; } /* phrase forte */ #sovematic-payment-page #centrale-de-paiement-pour-laverie-encaissez-simplement-pilotez-plus-facilement > .sove-container > p:nth-of-type(3) { margin: 5px 0 12px !important; padding: 14px 15px !important; border-top: 3px solid #DE072D !important; border-left: 0 !important; border-radius: 15px !important; background: rgba(255,255,255,.055) !important; } /* boutons */ #sovematic-payment-page #centrale-de-paiement-pour-laverie-encaissez-simplement-pilotez-plus-facilement > .sove-container > p:has(.sove-btn) { margin: 0 0 8px !important; } #sovematic-payment-page #centrale-de-paiement-pour-laverie-encaissez-simplement-pilotez-plus-facilement .sove-btn { width: min(100%, 320px) !important; min-height: 48px !important; margin: 0 auto !important; padding: 12px 17px !important; font-size: 12px !important; } /* image */ #sovematic-payment-page #centrale-de-paiement-pour-laverie-encaissez-simplement-pilotez-plus-facilement .sove-hero-media { order: 30 !important; width: 100% !important; max-width: 100% !important; margin: 14px 0 0 !important; border-radius: 20px !important; } #sovematic-payment-page #centrale-de-paiement-pour-laverie-encaissez-simplement-pilotez-plus-facilement .sove-hero-media img { height: 250px !important; } #sovematic-payment-page #centrale-de-paiement-pour-laverie-encaissez-simplement-pilotez-plus-facilement hr { display: none !important; } }/* ========================================================= CENTRALE DE PAIEMENT EN 30 SECONDES VERSION PREMIUM / RESPONSIVE / SPECTACULAIRE SANS CHANGER LE HTML ========================================================= */ /* ========================================================= SECTION GLOBALE ========================================================= */ #sovematic-payment-page #la-centrale-de-paiement-pour-laverie-en-30-secondes { position: relative !important; overflow: hidden !important; padding: clamp(72px, 8vw, 110px) 0 !important; background: radial-gradient(circle at 0% 0%, rgba(222,7,45,.08), transparent 28%), radial-gradient(circle at 100% 0%, rgba(31,78,95,.10), transparent 30%), linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%) !important; } /* halo très léger */ #sovematic-payment-page #la-centrale-de-paiement-pour-laverie-en-30-secondes::before { content: "" !important; position: absolute !important; inset: 0 !important; background: linear-gradient(rgba(17,18,20,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(17,18,20,.022) 1px, transparent 1px) !important; background-size: 38px 38px !important; opacity: .28 !important; pointer-events: none !important; } #sovematic-payment-page #la-centrale-de-paiement-pour-laverie-en-30-secondes > .sove-container { position: relative !important; z-index: 2 !important; width: min(1320px, calc(100% - 64px)) !important; max-width: 1320px !important; margin: 0 auto !important; } /* ========================================================= TITRE ========================================================= */ #sovematic-payment-page #la-centrale-de-paiement-pour-laverie-en-30-secondes h2 { max-width: 860px !important; margin: 0 auto 28px !important; text-align: center !important; text-wrap: balance !important; font-size: clamp(2.2rem, 4vw, 4rem) !important; line-height: .98 !important; letter-spacing: -.05em !important; } /* ========================================================= TABLE WRAP ========================================================= */ #sovematic-payment-page #la-centrale-de-paiement-pour-laverie-en-30-secondes .sove-table-wrap { overflow: hidden !important; margin: 0 auto 28px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 28px !important; background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,249,251,.98)) !important; box-shadow: 0 24px 70px rgba(17,18,20,.08), 0 8px 24px rgba(17,18,20,.04) !important; } /* ========================================================= TABLEAU DESKTOP ========================================================= */ #sovematic-payment-page #la-centrale-de-paiement-pour-laverie-en-30-secondes .sove-table { width: 100% !important; min-width: 0 !important; border-collapse: separate !important; border-spacing: 0 !important; margin: 0 !important; } /* entête */ #sovematic-payment-page #la-centrale-de-paiement-pour-laverie-en-30-secondes .sove-table th { padding: 20px 24px !important; background: linear-gradient(135deg, #143744, #1F4E5F) !important; color: #FFFFFF !important; font-size: 14px !important; line-height: 1.25 !important; font-weight: 950 !important; letter-spacing: .01em !important; text-align: left !important; border: 0 !important; } #sovematic-payment-page #la-centrale-de-paiement-pour-laverie-en-30-secondes .sove-table th:first-child { border-top-left-radius: 28px !important; } #sovematic-payment-page #la-centrale-de-paiement-pour-laverie-en-30-secondes .sove-table th:last-child { border-top-right-radius: 28px !important; } /* cellules */ #sovematic-payment-page #la-centrale-de-paiement-pour-laverie-en-30-secondes .sove-table td { padding: 18px 24px !important; border-top: 1px solid rgba(17,18,20,.07) !important; vertical-align: middle !important; background: rgba(255,255,255,.94) !important; color: #3E474D !important; font-size: 15px !important; line-height: 1.45 !important; transition: background .2s ease, transform .2s ease !important; } /* première colonne un peu plus forte */ #sovematic-payment-page #la-centrale-de-paiement-pour-laverie-en-30-secondes .sove-table td:first-child { width: 45% !important; font-weight: 850 !important; color: #111214 !important; } /* deuxième colonne plus "solution" */ #sovematic-payment-page #la-centrale-de-paiement-pour-laverie-en-30-secondes .sove-table td:last-child { width: 55% !important; color: #1F4E5F !important; } /* lignes alternées plus premium */ #sovematic-payment-page #la-centrale-de-paiement-pour-laverie-en-30-secondes .sove-table tr:nth-child(even) td { background: rgba(247,249,250,.96) !important; } /* hover desktop */ @media (hover:hover) and (pointer:fine) { #sovematic-payment-page #la-centrale-de-paiement-pour-laverie-en-30-secondes .sove-table tbody tr:hover td { background: #ffffff !important; } } /* ========================================================= BLOC "À RETENIR" ========================================================= */ #sovematic-payment-page #la-centrale-de-paiement-pour-laverie-en-30-secondes section.level3 { max-width: 960px !important; margin: 0 auto !important; padding: 22px 24px 24px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 24px !important; background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,249,251,.98)) !important; box-shadow: 0 18px 44px rgba(17,18,20,.06) !important; text-align: center !important; } #sovematic-payment-page #la-centrale-de-paiement-pour-laverie-en-30-secondes section.level3 h3 { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 auto 12px !important; padding: 9px 14px !important; border-radius: 999px !important; background: rgba(222,7,45,.09) !important; color: #DE072D !important; font-size: 12px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .08em !important; text-transform: uppercase !important; } #sovematic-payment-page #la-centrale-de-paiement-pour-laverie-en-30-secondes section.level3 p { max-width: 760px !important; margin: 0 auto !important; text-align: center !important; font-size: 16px !important; line-height: 1.55 !important; } #sovematic-payment-page #la-centrale-de-paiement-pour-laverie-en-30-secondes section.level3 hr { display: none !important; } /* ========================================================= TABLETTE ON TRANSFORME LE TABLEAU EN CARTES ========================================================= */ @media (min-width: 768px) and (max-width: 1100px) { #sovematic-payment-page #la-centrale-de-paiement-pour-laverie-en-30-secondes > .sove-container { width: calc(100% - 48px) !important; } #sovematic-payment-page #la-centrale-de-paiement-pour-laverie-en-30-secondes h2 { margin-bottom: 24px !important; } #sovematic-payment-page #la-centrale-de-paiement-pour-laverie-en-30-secondes .sove-table-wrap { overflow: visible !important; border: 0 !important; background: transparent !important; box-shadow: none !important; margin-bottom: 26px !important; } #sovematic-payment-page #la-centrale-de-paiement-pour-laverie-en-30-secondes .sove-table { display: block !important; min-width: 0 !important; background: transparent !important; } #sovematic-payment-page #la-centrale-de-paiement-pour-laverie-en-30-secondes .sove-table thead { display: none !important; } #sovematic-payment-page #la-centrale-de-paiement-pour-laverie-en-30-secondes .sove-table tbody { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; counter-reset: sovepay30 !important; } #sovematic-payment-page #la-centrale-de-paiement-pour-laverie-en-30-secondes .sove-table tr { position: relative !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; min-height: 100% !important; padding: 22px 20px 20px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 24px !important; background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,249,250,.98)) !important; box-shadow: 0 18px 42px rgba(17,18,20,.06) !important; counter-increment: sovepay30 !important; overflow: hidden !important; } /* numéro */ #sovematic-payment-page #la-centrale-de-paiement-pour-laverie-en-30-secondes .sove-table tr::before { content: counter(sovepay30, decimal-leading-zero) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 48px !important; height: 48px !important; margin: 0 0 16px !important; border-radius: 14px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #FFFFFF !important; font-size: 12px !important; line-height: 1 !important; font-weight: 950 !important; box-shadow: 0 12px 24px rgba(222,7,45,.18) !important; } /* cellule */ #sovematic-payment-page #la-centrale-de-paiement-pour-laverie-en-30-secondes .sove-table td { display: block !important; width: 100% !important; border: 0 !important; padding: 0 !important; background: transparent !important; } /* besoin */ #sovematic-payment-page #la-centrale-de-paiement-pour-laverie-en-30-secondes .sove-table td:first-child { margin: 0 0 14px !important; font-size: 1.18rem !important; line-height: 1.28 !important; font-weight: 900 !important; color: #111214 !important; } #sovematic-payment-page #la-centrale-de-paiement-pour-laverie-en-30-secondes .sove-table td:first-child::before { content: "Votre besoin" !important; display: block !important; margin: 0 0 8px !important; color: #DE072D !important; font-size: 11px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .08em !important; text-transform: uppercase !important; } /* réponse */ #sovematic-payment-page #la-centrale-de-paiement-pour-laverie-en-30-secondes .sove-table td:last-child { margin: auto 0 0 !important; padding: 14px 16px !important; border-radius: 16px !important; background: linear-gradient(135deg, rgba(31,78,95,.08), rgba(31,78,95,.04)) !important; color: #1F4E5F !important; font-size: 14px !important; line-height: 1.45 !important; font-weight: 700 !important; } #sovematic-payment-page #la-centrale-de-paiement-pour-laverie-en-30-secondes .sove-table td:last-child::before { content: "Ce qu’apporte la centrale" !important; display: block !important; margin: 0 0 8px !important; color: #3E474D !important; font-size: 10px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: .08em !important; text-transform: uppercase !important; } } /* ========================================================= SMARTPHONE MÊME SYSTÈME, EN 1 COLONNE ========================================================= */ @media (max-width: 767px) { #sovematic-payment-page #la-centrale-de-paiement-pour-laverie-en-30-secondes { padding: 52px 0 !important; } #sovematic-payment-page #la-centrale-de-paiement-pour-laverie-en-30-secondes > .sove-container { width: calc(100% - 28px) !important; } #sovematic-payment-page #la-centrale-de-paiement-pour-laverie-en-30-secondes h2 { margin-bottom: 20px !important; font-size: clamp(1.95rem, 8.8vw, 2.8rem) !important; line-height: 1.02 !important; } #sovematic-payment-page #la-centrale-de-paiement-pour-laverie-en-30-secondes .sove-table-wrap { overflow: visible !important; border: 0 !important; background: transparent !important; box-shadow: none !important; margin-bottom: 22px !important; } #sovematic-payment-page #la-centrale-de-paiement-pour-laverie-en-30-secondes .sove-table { display: block !important; min-width: 0 !important; } #sovematic-payment-page #la-centrale-de-paiement-pour-laverie-en-30-secondes .sove-table thead { display: none !important; } #sovematic-payment-page #la-centrale-de-paiement-pour-laverie-en-30-secondes .sove-table tbody { display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; counter-reset: sovepay30mobile !important; } #sovematic-payment-page #la-centrale-de-paiement-pour-laverie-en-30-secondes .sove-table tr { position: relative !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; padding: 20px 18px 18px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 22px !important; background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,249,250,.98)) !important; box-shadow: 0 16px 34px rgba(17,18,20,.055) !important; counter-increment: sovepay30mobile !important; } /* numéro */ #sovematic-payment-page #la-centrale-de-paiement-pour-laverie-en-30-secondes .sove-table tr::before { content: counter(sovepay30mobile, decimal-leading-zero) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 46px !important; height: 46px !important; margin: 0 auto 14px !important; border-radius: 14px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #FFFFFF !important; font-size: 12px !important; line-height: 1 !important; font-weight: 950 !important; box-shadow: 0 10px 22px rgba(222,7,45,.18) !important; } /* cellules */ #sovematic-payment-page #la-centrale-de-paiement-pour-laverie-en-30-secondes .sove-table td { display: block !important; width: 100% !important; padding: 0 !important; border: 0 !important; background: transparent !important; text-align: center !important; } /* besoin */ #sovematic-payment-page #la-centrale-de-paiement-pour-laverie-en-30-secondes .sove-table td:first-child { margin: 0 0 12px !important; font-size: 1.08rem !important; line-height: 1.3 !important; font-weight: 900 !important; color: #111214 !important; } #sovematic-payment-page #la-centrale-de-paiement-pour-laverie-en-30-secondes .sove-table td:first-child::before { content: "Votre besoin" !important; display: block !important; margin: 0 auto 7px !important; color: #DE072D !important; font-size: 10px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .08em !important; text-transform: uppercase !important; text-align: center !important; } /* réponse */ #sovematic-payment-page #la-centrale-de-paiement-pour-laverie-en-30-secondes .sove-table td:last-child { margin: 0 !important; padding: 13px 14px !important; border-radius: 16px !important; background: linear-gradient(135deg, rgba(31,78,95,.08), rgba(31,78,95,.04)) !important; color: #1F4E5F !important; font-size: 13.5px !important; line-height: 1.45 !important; font-weight: 700 !important; text-align: center !important; } #sovematic-payment-page #la-centrale-de-paiement-pour-laverie-en-30-secondes .sove-table td:last-child::before { content: "Ce qu’apporte la centrale" !important; display: block !important; margin: 0 auto 7px !important; color: #3E474D !important; font-size: 10px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: .08em !important; text-transform: uppercase !important; text-align: center !important; } /* bloc à retenir */ #sovematic-payment-page #la-centrale-de-paiement-pour-laverie-en-30-secondes section.level3 { padding: 18px 16px 18px !important; border-radius: 20px !important; } #sovematic-payment-page #la-centrale-de-paiement-pour-laverie-en-30-secondes section.level3 p { font-size: 14px !important; line-height: 1.55 !important; } }/* ========================================================= POURQUOI INSTALLER UNE CENTRALE DE PAIEMENT DANS UNE LAVERIE VERSION PREMIUM / SPECTACULAIRE / RESPONSIVE ========================================================= */ #sovematic-payment-page #pourquoi-installer-une-centrale-de-paiement-dans-une-laverie { position: relative !important; overflow: hidden !important; padding: clamp(78px, 8vw, 118px) 0 !important; background: radial-gradient(circle at 0% 0%, rgba(222,7,45,.06), transparent 28%), radial-gradient(circle at 100% 100%, rgba(31,78,95,.08), transparent 34%), linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%) !important; } #sovematic-payment-page #pourquoi-installer-une-centrale-de-paiement-dans-une-laverie::before { content: "" !important; position: absolute !important; inset: 0 !important; background: linear-gradient(rgba(17,18,20,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(17,18,20,.018) 1px, transparent 1px) !important; background-size: 42px 42px !important; opacity: .35 !important; pointer-events: none !important; } /* ========================================================= CONTENEUR ========================================================= */ #sovematic-payment-page #pourquoi-installer-une-centrale-de-paiement-dans-une-laverie > .sove-container { position: relative !important; z-index: 2 !important; width: min(1320px, calc(100% - 72px)) !important; max-width: 1320px !important; margin: 0 auto !important; } /* ========================================================= DESKTOP ========================================================= */ @media (min-width: 1101px) { #sovematic-payment-page #pourquoi-installer-une-centrale-de-paiement-dans-une-laverie > .sove-container { display: grid !important; grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr) !important; column-gap: clamp(34px, 4vw, 66px) !important; row-gap: 14px !important; align-items: start !important; } /* ===================================================== TITRE ===================================================== */ #sovematic-payment-page #pourquoi-installer-une-centrale-de-paiement-dans-une-laverie h2 { grid-column: 1 / -1 !important; max-width: 900px !important; margin: 0 auto 12px !important; text-align: center !important; font-size: clamp(2.9rem, 4.1vw, 4.8rem) !important; line-height: .95 !important; letter-spacing: -.055em !important; text-wrap: balance !important; } #sovematic-payment-page #pourquoi-installer-une-centrale-de-paiement-dans-une-laverie h2::before { content: "PARCOURS CLIENT • PAIEMENT CENTRALISÉ"; display: table !important; margin: 0 auto 14px !important; padding: 8px 13px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 9px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .11em !important; box-shadow: 0 12px 28px rgba(222,7,45,.20) !important; } /* ===================================================== IMAGE À DROITE ===================================================== */ #sovematic-payment-page #pourquoi-installer-une-centrale-de-paiement-dans-une-laverie .sove-inline-image { grid-column: 2 !important; grid-row: 2 / span 7 !important; align-self: start !important; width: 100% !important; margin: 0 0 0 auto !important; overflow: hidden !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 28px !important; background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,249,250,.98)) !important; box-shadow: 0 24px 64px rgba(17,18,20,.08) !important; } #sovematic-payment-page #pourquoi-installer-une-centrale-de-paiement-dans-une-laverie .sove-inline-image img { display: block !important; width: 100% !important; height: 500px !important; object-fit: cover !important; } #sovematic-payment-page #pourquoi-installer-une-centrale-de-paiement-dans-une-laverie .sove-inline-image figcaption { padding: 12px 16px !important; background: #fff !important; color: #60737B !important; font-size: 11px !important; line-height: 1.4 !important; } /* ===================================================== PARAGRAPHES D'INTRO À GAUCHE ===================================================== */ #sovematic-payment-page #pourquoi-installer-une-centrale-de-paiement-dans-une-laverie > .sove-container > p:nth-of-type(1), #sovematic-payment-page #pourquoi-installer-une-centrale-de-paiement-dans-une-laverie > .sove-container > p:nth-of-type(2), #sovematic-payment-page #pourquoi-installer-une-centrale-de-paiement-dans-une-laverie > .sove-container > p:nth-of-type(3) { grid-column: 1 !important; max-width: 670px !important; margin: 0 0 6px !important; color: #48575E !important; font-size: 15px !important; line-height: 1.62 !important; } #sovematic-payment-page #pourquoi-installer-une-centrale-de-paiement-dans-une-laverie > .sove-container > p:nth-of-type(1) { font-size: 16px !important; color: #111214 !important; font-weight: 760 !important; } /* ===================================================== PETIT SURTITRE AVANT LE PARCOURS ===================================================== */ #sovematic-payment-page #pourquoi-installer-une-centrale-de-paiement-dans-une-laverie > .sove-container > p:nth-of-type(4) { grid-column: 1 !important; width: fit-content !important; margin: 8px 0 4px !important; padding: 8px 12px !important; border-radius: 999px !important; background: rgba(31,78,95,.08) !important; color: #1F4E5F !important; font-size: 10px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .08em !important; text-transform: uppercase !important; } /* ===================================================== BLOC PARCOURS CLIENT CENTRALISÉ ===================================================== */ #sovematic-payment-page #pourquoi-installer-une-centrale-de-paiement-dans-une-laverie > .sove-container > p:nth-of-type(5) { grid-column: 1 !important; max-width: 720px !important; margin: 0 0 10px !important; padding: 26px 26px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 26px !important; background: radial-gradient(circle at 100% 0%, rgba(222,7,45,.14), transparent 34%), radial-gradient(circle at 0% 100%, rgba(31,78,95,.14), transparent 36%), linear-gradient(135deg, #101315, #163947) !important; color: #fff !important; box-shadow: 0 24px 60px rgba(17,18,20,.16) !important; font-size: 18px !important; line-height: 1.7 !important; font-weight: 750 !important; } #sovematic-payment-page #pourquoi-installer-une-centrale-de-paiement-dans-une-laverie > .sove-container > p:nth-of-type(5)::before { content: "PARCOURS UTILISATEUR CENTRALISÉ"; display: table !important; margin: 0 0 14px !important; padding: 7px 11px !important; border-radius: 999px !important; background: rgba(255,255,255,.08) !important; color: #FFB9C5 !important; font-size: 9px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .09em !important; } #sovematic-payment-page #pourquoi-installer-une-centrale-de-paiement-dans-une-laverie > .sove-container > p:nth-of-type(5) strong { color: #fff !important; font-weight: 900 !important; } /* ===================================================== BLOCS DE CONCLUSION ===================================================== */ #sovematic-payment-page #pourquoi-installer-une-centrale-de-paiement-dans-une-laverie > .sove-container > p:nth-of-type(6), #sovematic-payment-page #pourquoi-installer-une-centrale-de-paiement-dans-une-laverie > .sove-container > p:nth-of-type(7) { grid-column: 1 !important; max-width: 690px !important; margin: 0 !important; padding: 18px 20px !important; border-radius: 20px !important; background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,249,250,.98)) !important; border: 1px solid rgba(17,18,20,.07) !important; box-shadow: 0 14px 34px rgba(17,18,20,.05) !important; color: #42545C !important; font-size: 14px !important; line-height: 1.55 !important; } /* ===================================================== HR ===================================================== */ #sovematic-payment-page #pourquoi-installer-une-centrale-de-paiement-dans-une-laverie hr { grid-column: 1 / -1 !important; width: 160px !important; margin: 18px auto 0 !important; border: 0 !important; border-top: 3px solid #DE072D !important; border-radius: 999px !important; } } /* ========================================================= TABLETTE ========================================================= */ @media (min-width: 768px) and (max-width: 1100px) { #sovematic-payment-page #pourquoi-installer-une-centrale-de-paiement-dans-une-laverie > .sove-container { display: flex !important; flex-direction: column !important; width: calc(100% - 48px) !important; } #sovematic-payment-page #pourquoi-installer-une-centrale-de-paiement-dans-une-laverie h2 { max-width: 860px !important; margin: 0 auto 24px !important; text-align: center !important; font-size: clamp(2.35rem, 5.4vw, 3.6rem) !important; line-height: 1 !important; } #sovematic-payment-page #pourquoi-installer-une-centrale-de-paiement-dans-une-laverie h2::before { content: "PARCOURS CLIENT • PAIEMENT CENTRALISÉ"; display: table !important; margin: 0 auto 12px !important; padding: 8px 12px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 8px !important; font-weight: 950 !important; letter-spacing: .1em !important; } #sovematic-payment-page #pourquoi-installer-une-centrale-de-paiement-dans-une-laverie .sove-inline-image { width: 100% !important; max-width: 860px !important; margin: 0 auto 20px !important; overflow: hidden !important; border-radius: 24px !important; border: 1px solid rgba(17,18,20,.08) !important; background: #fff !important; box-shadow: 0 20px 50px rgba(17,18,20,.07) !important; } #sovematic-payment-page #pourquoi-installer-une-centrale-de-paiement-dans-une-laverie .sove-inline-image img { width: 100% !important; height: 400px !important; object-fit: cover !important; } #sovematic-payment-page #pourquoi-installer-une-centrale-de-paiement-dans-une-laverie > .sove-container > p { max-width: 820px !important; margin: 0 auto 10px !important; text-align: center !important; font-size: 15px !important; line-height: 1.6 !important; } #sovematic-payment-page #pourquoi-installer-une-centrale-de-paiement-dans-une-laverie > .sove-container > p:nth-of-type(4) { width: fit-content !important; margin: 8px auto 6px !important; padding: 8px 12px !important; border-radius: 999px !important; background: rgba(31,78,95,.08) !important; color: #1F4E5F !important; font-size: 10px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .08em !important; text-transform: uppercase !important; } #sovematic-payment-page #pourquoi-installer-une-centrale-de-paiement-dans-une-laverie > .sove-container > p:nth-of-type(5) { max-width: 860px !important; margin: 0 auto 14px !important; padding: 22px 20px !important; border-radius: 22px !important; background: radial-gradient(circle at 100% 0%, rgba(222,7,45,.14), transparent 34%), radial-gradient(circle at 0% 100%, rgba(31,78,95,.14), transparent 36%), linear-gradient(135deg, #101315, #163947) !important; color: #fff !important; box-shadow: 0 20px 46px rgba(17,18,20,.14) !important; text-align: center !important; font-size: 17px !important; line-height: 1.65 !important; } #sovematic-payment-page #pourquoi-installer-une-centrale-de-paiement-dans-une-laverie > .sove-container > p:nth-of-type(5)::before { content: "PARCOURS UTILISATEUR CENTRALISÉ"; display: table !important; margin: 0 auto 12px !important; padding: 7px 11px !important; border-radius: 999px !important; background: rgba(255,255,255,.08) !important; color: #FFB9C5 !important; font-size: 8px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .09em !important; } #sovematic-payment-page #pourquoi-installer-une-centrale-de-paiement-dans-une-laverie > .sove-container > p:nth-of-type(6), #sovematic-payment-page #pourquoi-installer-une-centrale-de-paiement-dans-une-laverie > .sove-container > p:nth-of-type(7) { max-width: 860px !important; margin: 0 auto 10px !important; padding: 16px 18px !important; border-radius: 18px !important; background: #fff !important; border: 1px solid rgba(17,18,20,.07) !important; box-shadow: 0 12px 30px rgba(17,18,20,.05) !important; } #sovematic-payment-page #pourquoi-installer-une-centrale-de-paiement-dans-une-laverie hr { width: 130px !important; margin: 16px auto 0 !important; border: 0 !important; border-top: 3px solid #DE072D !important; } } /* ========================================================= SMARTPHONE ========================================================= */ @media (max-width: 767px) { #sovematic-payment-page #pourquoi-installer-une-centrale-de-paiement-dans-une-laverie { padding: 52px 0 !important; } #sovematic-payment-page #pourquoi-installer-une-centrale-de-paiement-dans-une-laverie > .sove-container { width: calc(100% - 28px) !important; } #sovematic-payment-page #pourquoi-installer-une-centrale-de-paiement-dans-une-laverie h2 { margin: 0 auto 18px !important; text-align: center !important; font-size: clamp(2rem, 9vw, 2.85rem) !important; line-height: 1 !important; letter-spacing: -.04em !important; } #sovematic-payment-page #pourquoi-installer-une-centrale-de-paiement-dans-une-laverie h2::before { content: "PARCOURS CLIENT"; display: table !important; margin: 0 auto 10px !important; padding: 7px 11px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 8px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .1em !important; } /* image */ #sovematic-payment-page #pourquoi-installer-une-centrale-de-paiement-dans-une-laverie .sove-inline-image { width: 100% !important; margin: 0 auto 18px !important; overflow: hidden !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 20px !important; background: #fff !important; box-shadow: 0 16px 34px rgba(17,18,20,.06) !important; } #sovematic-payment-page #pourquoi-installer-une-centrale-de-paiement-dans-une-laverie .sove-inline-image img { width: 100% !important; height: 240px !important; object-fit: cover !important; } #sovematic-payment-page #pourquoi-installer-une-centrale-de-paiement-dans-une-laverie .sove-inline-image figcaption { padding: 10px 12px !important; font-size: 10px !important; line-height: 1.4 !important; } /* paragraphes */ #sovematic-payment-page #pourquoi-installer-une-centrale-de-paiement-dans-une-laverie > .sove-container > p { margin: 0 0 10px !important; text-align: center !important; font-size: 14px !important; line-height: 1.58 !important; } #sovematic-payment-page #pourquoi-installer-une-centrale-de-paiement-dans-une-laverie > .sove-container > p:nth-of-type(4) { width: fit-content !important; margin: 8px auto 6px !important; padding: 8px 11px !important; border-radius: 999px !important; background: rgba(31,78,95,.08) !important; color: #1F4E5F !important; font-size: 9px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .08em !important; text-transform: uppercase !important; } /* bloc parcours */ #sovematic-payment-page #pourquoi-installer-une-centrale-de-paiement-dans-une-laverie > .sove-container > p:nth-of-type(5) { margin: 0 0 14px !important; padding: 18px 16px !important; border-radius: 20px !important; background: radial-gradient(circle at 100% 0%, rgba(222,7,45,.14), transparent 34%), radial-gradient(circle at 0% 100%, rgba(31,78,95,.14), transparent 36%), linear-gradient(135deg, #101315, #163947) !important; color: #fff !important; box-shadow: 0 18px 38px rgba(17,18,20,.14) !important; font-size: 15px !important; line-height: 1.7 !important; text-align: center !important; } #sovematic-payment-page #pourquoi-installer-une-centrale-de-paiement-dans-une-laverie > .sove-container > p:nth-of-type(5)::before { content: "PARCOURS CENTRALISÉ"; display: table !important; margin: 0 auto 10px !important; padding: 7px 10px !important; border-radius: 999px !important; background: rgba(255,255,255,.08) !important; color: #FFB9C5 !important; font-size: 8px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .09em !important; } /* blocs finaux */ #sovematic-payment-page #pourquoi-installer-une-centrale-de-paiement-dans-une-laverie > .sove-container > p:nth-of-type(6), #sovematic-payment-page #pourquoi-installer-une-centrale-de-paiement-dans-une-laverie > .sove-container > p:nth-of-type(7) { margin: 0 0 10px !important; padding: 15px 14px !important; border-radius: 16px !important; background: #fff !important; border: 1px solid rgba(17,18,20,.07) !important; box-shadow: 0 12px 28px rgba(17,18,20,.05) !important; text-align: center !important; font-size: 13.5px !important; line-height: 1.55 !important; } #sovematic-payment-page #pourquoi-installer-une-centrale-de-paiement-dans-une-laverie hr { width: 92px !important; margin: 14px auto 0 !important; border: 0 !important; border-top: 3px solid #DE072D !important; border-radius: 999px !important; } }/* ========================================================= CENTRALE DE PAIEMENT OU MONNAYEUR : QUE CHOISIR ? VERSION SPECTACULAIRE / PREMIUM / RESPONSIVE ========================================================= */ #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir { position: relative !important; overflow: hidden !important; padding: clamp(82px, 8vw, 120px) 0 !important; background: radial-gradient(circle at 0% 0%, rgba(222,7,45,.055), transparent 28%), radial-gradient(circle at 100% 100%, rgba(31,78,95,.08), transparent 34%), linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%) !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir::before { content: "" !important; position: absolute !important; inset: 0 !important; background: linear-gradient(rgba(17,18,20,.02) 1px, transparent 1px), linear-gradient(90deg, rgba(17,18,20,.02) 1px, transparent 1px) !important; background-size: 40px 40px !important; opacity: .3 !important; pointer-events: none !important; } /* ========================================================= CONTENEUR ========================================================= */ #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir > .sove-container { position: relative !important; z-index: 2 !important; width: min(1320px, calc(100% - 72px)) !important; max-width: 1320px !important; margin: 0 auto !important; } /* ========================================================= DESKTOP ========================================================= */ @media (min-width: 1101px) { #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir > .sove-container { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(420px, .95fr) !important; column-gap: clamp(34px, 4vw, 64px) !important; row-gap: 16px !important; align-items: start !important; } /* ===================================================== TITRE ===================================================== */ #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir h2 { grid-column: 1 !important; max-width: 700px !important; margin: 0 0 10px !important; font-size: clamp(2.8rem, 3.9vw, 4.6rem) !important; line-height: .95 !important; letter-spacing: -.05em !important; text-wrap: balance !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir h2::before { content: "COMPARATIF ARCHITECTURE DE PAIEMENT"; display: table !important; margin: 0 0 14px !important; padding: 8px 12px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #FFFFFF !important; font-size: 9px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .10em !important; box-shadow: 0 12px 28px rgba(222,7,45,.18) !important; } /* ===================================================== IMAGE ===================================================== */ #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir .sove-inline-image { grid-column: 2 !important; grid-row: 1 / span 3 !important; width: 100% !important; margin: 0 0 0 auto !important; overflow: hidden !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 28px !important; background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,249,251,.98)) !important; box-shadow: 0 24px 60px rgba(17,18,20,.08) !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir .sove-inline-image img { display: block !important; width: 100% !important; height: 440px !important; object-fit: cover !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir .sove-inline-image figcaption { padding: 12px 16px !important; background: #FFFFFF !important; color: #61737C !important; font-size: 11px !important; line-height: 1.4 !important; } /* ===================================================== INTRO ===================================================== */ #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir > .sove-container > p:first-of-type { grid-column: 1 !important; max-width: 640px !important; margin: 0 0 8px !important; color: #47575E !important; font-size: 16px !important; line-height: 1.6 !important; } /* ===================================================== TABLE WRAP ===================================================== */ #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir .sove-table-wrap { grid-column: 1 / -1 !important; overflow: hidden !important; margin: 8px 0 10px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 30px !important; background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,249,250,.98)) !important; box-shadow: 0 26px 70px rgba(17,18,20,.08), 0 8px 24px rgba(17,18,20,.04) !important; } /* ===================================================== TABLE DESKTOP ===================================================== */ #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir .sove-table { width: 100% !important; min-width: 0 !important; border-collapse: separate !important; border-spacing: 0 !important; margin: 0 !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir .sove-table th { padding: 22px 24px !important; color: #FFFFFF !important; font-size: 15px !important; line-height: 1.25 !important; font-weight: 950 !important; letter-spacing: .01em !important; text-align: left !important; border: 0 !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir .sove-table th:first-child { background: linear-gradient(135deg, #101315, #1B2226) !important; border-top-left-radius: 30px !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir .sove-table th:last-child { background: linear-gradient(135deg, #143744, #1F4E5F) !important; border-top-right-radius: 30px !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir .sove-table td { padding: 18px 24px !important; border-top: 1px solid rgba(17,18,20,.07) !important; vertical-align: middle !important; background: rgba(255,255,255,.95) !important; color: #4C5960 !important; font-size: 15px !important; line-height: 1.45 !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir .sove-table td:first-child { color: #111214 !important; font-weight: 800 !important; background: linear-gradient(180deg, rgba(17,18,20,.015), rgba(17,18,20,.03)) !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir .sove-table td:last-child { color: #1F4E5F !important; font-weight: 760 !important; background: linear-gradient(180deg, rgba(31,78,95,.035), rgba(31,78,95,.06)) !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir .sove-table tbody tr:nth-child(even) td:first-child { background: linear-gradient(180deg, rgba(17,18,20,.03), rgba(17,18,20,.04)) !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir .sove-table tbody tr:nth-child(even) td:last-child { background: linear-gradient(180deg, rgba(31,78,95,.05), rgba(31,78,95,.07)) !important; } /* ===================================================== TEXTE APRÈS TABLEAU ===================================================== */ #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir > .sove-container > p:not(:first-of-type) { grid-column: 1 / -1 !important; max-width: 920px !important; margin: 0 auto 10px !important; text-align: center !important; font-size: 15px !important; line-height: 1.58 !important; } /* ===================================================== BLOC "QUELLE SOLUTION PRIVILÉGIER ?" ===================================================== */ #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir section.level3 { grid-column: 1 / -1 !important; max-width: 980px !important; margin: 10px auto 0 !important; padding: 26px 28px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 26px !important; background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,249,251,.98)) !important; box-shadow: 0 20px 48px rgba(17,18,20,.06) !important; text-align: center !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir section.level3 h3 { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 auto 14px !important; padding: 10px 14px !important; border-radius: 999px !important; background: rgba(222,7,45,.09) !important; color: #DE072D !important; font-size: 12px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .08em !important; text-transform: uppercase !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir section.level3 p { max-width: 820px !important; margin: 0 auto 10px !important; text-align: center !important; font-size: 15px !important; line-height: 1.6 !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir section.level3 p:last-of-type { margin-bottom: 0 !important; font-size: 16px !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir section.level3 hr { display: none !important; } } /* ========================================================= TABLETTE ========================================================= */ @media (min-width: 768px) and (max-width: 1100px) { #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir > .sove-container { width: calc(100% - 48px) !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir h2 { max-width: 860px !important; margin: 0 auto 22px !important; text-align: center !important; font-size: clamp(2.3rem, 5.2vw, 3.5rem) !important; line-height: 1 !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir h2::before { content: "COMPARATIF"; display: table !important; margin: 0 auto 12px !important; padding: 8px 12px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #FFFFFF !important; font-size: 8px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .10em !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir .sove-inline-image { width: min(100%, 860px) !important; margin: 0 auto 18px !important; overflow: hidden !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 24px !important; background: #FFFFFF !important; box-shadow: 0 18px 46px rgba(17,18,20,.07) !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir .sove-inline-image img { width: 100% !important; height: 380px !important; object-fit: cover !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir > .sove-container > p:first-of-type { max-width: 780px !important; margin: 0 auto 12px !important; text-align: center !important; font-size: 15px !important; line-height: 1.6 !important; } /* ===================================================== TABLEAU -> CARTES 2 COLONNES ===================================================== */ #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir .sove-table-wrap { overflow: visible !important; border: 0 !important; background: transparent !important; box-shadow: none !important; margin: 18px 0 18px !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir .sove-table { display: block !important; min-width: 0 !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir .sove-table thead { display: none !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir .sove-table tbody { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; counter-reset: sovecomparepay !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir .sove-table tr { position: relative !important; display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; padding: 22px 20px 20px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 24px !important; background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,249,250,.98)) !important; box-shadow: 0 16px 38px rgba(17,18,20,.06) !important; counter-increment: sovecomparepay !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir .sove-table tr::before { content: counter(sovecomparepay, decimal-leading-zero) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 46px !important; height: 46px !important; margin: 0 0 4px !important; border-radius: 14px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #FFFFFF !important; font-size: 12px !important; line-height: 1 !important; font-weight: 950 !important; box-shadow: 0 10px 24px rgba(222,7,45,.18) !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir .sove-table td { display: block !important; width: 100% !important; padding: 0 !important; border: 0 !important; background: transparent !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir .sove-table td:first-child { padding: 16px 16px !important; border-radius: 18px !important; background: linear-gradient(180deg, rgba(17,18,20,.03), rgba(17,18,20,.05)) !important; color: #111214 !important; font-size: 15px !important; line-height: 1.45 !important; font-weight: 850 !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir .sove-table td:first-child::before { content: "Monnayeur individuel" !important; display: block !important; margin: 0 0 8px !important; color: #111214 !important; font-size: 10px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .08em !important; text-transform: uppercase !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir .sove-table td:last-child { padding: 16px 16px !important; border-radius: 18px !important; background: linear-gradient(180deg, rgba(31,78,95,.06), rgba(31,78,95,.09)) !important; color: #1F4E5F !important; font-size: 15px !important; line-height: 1.45 !important; font-weight: 780 !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir .sove-table td:last-child::before { content: "Centrale de paiement" !important; display: block !important; margin: 0 0 8px !important; color: #1F4E5F !important; font-size: 10px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .08em !important; text-transform: uppercase !important; } /* textes bas */ #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir > .sove-container > p:not(:first-of-type) { max-width: 860px !important; margin: 0 auto 10px !important; text-align: center !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir section.level3 { max-width: 860px !important; margin: 10px auto 0 !important; padding: 22px 20px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 22px !important; background: #FFFFFF !important; box-shadow: 0 16px 38px rgba(17,18,20,.05) !important; text-align: center !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir section.level3 h3 { display: inline-flex !important; margin: 0 auto 12px !important; padding: 9px 13px !important; border-radius: 999px !important; background: rgba(222,7,45,.09) !important; color: #DE072D !important; font-size: 11px !important; font-weight: 950 !important; letter-spacing: .08em !important; text-transform: uppercase !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir section.level3 hr { display: none !important; } } /* ========================================================= SMARTPHONE ========================================================= */ @media (max-width: 767px) { #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir { padding: 54px 0 !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir > .sove-container { width: calc(100% - 28px) !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir h2 { margin: 0 auto 18px !important; text-align: center !important; font-size: clamp(2rem, 8.8vw, 2.8rem) !important; line-height: 1 !important; letter-spacing: -.04em !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir h2::before { content: "COMPARATIF"; display: table !important; margin: 0 auto 10px !important; padding: 7px 10px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #FFFFFF !important; font-size: 8px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .10em !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir .sove-inline-image { width: 100% !important; margin: 0 auto 18px !important; overflow: hidden !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 20px !important; background: #FFFFFF !important; box-shadow: 0 16px 34px rgba(17,18,20,.06) !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir .sove-inline-image img { width: 100% !important; height: 230px !important; object-fit: cover !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir .sove-inline-image figcaption { padding: 10px 12px !important; font-size: 10px !important; line-height: 1.4 !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir > .sove-container > p:first-of-type { margin: 0 0 12px !important; text-align: center !important; font-size: 14px !important; line-height: 1.58 !important; } /* ===================================================== TABLEAU -> CARTES VERTICALES ===================================================== */ #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir .sove-table-wrap { overflow: visible !important; border: 0 !important; background: transparent !important; box-shadow: none !important; margin: 18px 0 16px !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir .sove-table { display: block !important; min-width: 0 !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir .sove-table thead { display: none !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir .sove-table tbody { display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; counter-reset: sovecomparepaymobile !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir .sove-table tr { position: relative !important; display: flex !important; flex-direction: column !important; gap: 12px !important; padding: 20px 18px 18px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 22px !important; background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,249,250,.98)) !important; box-shadow: 0 14px 32px rgba(17,18,20,.055) !important; counter-increment: sovecomparepaymobile !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir .sove-table tr::before { content: counter(sovecomparepaymobile, decimal-leading-zero) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; margin: 0 auto 2px !important; border-radius: 14px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #FFFFFF !important; font-size: 12px !important; line-height: 1 !important; font-weight: 950 !important; box-shadow: 0 10px 22px rgba(222,7,45,.18) !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir .sove-table td { display: block !important; width: 100% !important; padding: 0 !important; border: 0 !important; background: transparent !important; text-align: center !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir .sove-table td:first-child { padding: 14px 14px !important; border-radius: 16px !important; background: linear-gradient(180deg, rgba(17,18,20,.03), rgba(17,18,20,.05)) !important; color: #111214 !important; font-size: 14px !important; line-height: 1.45 !important; font-weight: 850 !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir .sove-table td:first-child::before { content: "Monnayeur individuel" !important; display: block !important; margin: 0 auto 8px !important; color: #111214 !important; font-size: 10px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .08em !important; text-transform: uppercase !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir .sove-table td:last-child { padding: 14px 14px !important; border-radius: 16px !important; background: linear-gradient(180deg, rgba(31,78,95,.07), rgba(31,78,95,.10)) !important; color: #1F4E5F !important; font-size: 14px !important; line-height: 1.45 !important; font-weight: 760 !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir .sove-table td:last-child::before { content: "Centrale de paiement" !important; display: block !important; margin: 0 auto 8px !important; color: #1F4E5F !important; font-size: 10px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .08em !important; text-transform: uppercase !important; } /* textes après tableau */ #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir > .sove-container > p:not(:first-of-type) { margin: 0 0 10px !important; text-align: center !important; font-size: 13.5px !important; line-height: 1.58 !important; } /* bloc final */ #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir section.level3 { margin: 10px 0 0 !important; padding: 18px 16px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 20px !important; background: #FFFFFF !important; box-shadow: 0 14px 30px rgba(17,18,20,.05) !important; text-align: center !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir section.level3 h3 { display: inline-flex !important; margin: 0 auto 11px !important; padding: 8px 12px !important; border-radius: 999px !important; background: rgba(222,7,45,.09) !important; color: #DE072D !important; font-size: 10px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .08em !important; text-transform: uppercase !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir section.level3 p { margin: 0 0 10px !important; text-align: center !important; font-size: 13.5px !important; line-height: 1.58 !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir section.level3 p:last-of-type { margin-bottom: 0 !important; } #sovematic-payment-page #centrale-de-paiement-ou-monnayeur-que-choisir section.level3 hr { display: none !important; } }/* ========================================================= TOUCH'N PAY — SECTION PRODUIT PREMIUM SENSATIONNEL / GRAND ART / RESPONSIVE ========================================================= */ #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] { position: relative !important; overflow: hidden !important; padding: clamp(86px, 9vw, 128px) 0 !important; background: radial-gradient(circle at 0% 0%, rgba(222,7,45,.14), transparent 26%), radial-gradient(circle at 100% 0%, rgba(31,78,95,.22), transparent 34%), linear-gradient(135deg, #0E1214 0%, #10242C 45%, #0B2A34 100%) !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"]::before { content: "" !important; position: absolute !important; inset: 0 !important; background: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) !important; background-size: 42px 42px !important; opacity: .18 !important; pointer-events: none !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"]::after { content: "" !important; position: absolute !important; top: -140px !important; right: -120px !important; width: 360px !important; height: 360px !important; border-radius: 50% !important; background: radial-gradient(circle, rgba(222,7,45,.20) 0%, rgba(222,7,45,0) 70%) !important; filter: blur(10px) !important; pointer-events: none !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] > .sove-container { position: relative !important; z-index: 2 !important; width: min(1340px, calc(100% - 72px)) !important; max-width: 1340px !important; margin: 0 auto !important; } /* ========================================================= DESKTOP ========================================================= */ @media (min-width: 1101px) { #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] > .sove-container { display: grid !important; grid-template-columns: minmax(0, 1.02fr) minmax(430px, .98fr) !important; column-gap: clamp(34px, 4vw, 68px) !important; row-gap: 16px !important; align-items: start !important; } /* ===================================================== TITRE ===================================================== */ #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] h2 { grid-column: 1 !important; max-width: 760px !important; margin: 0 0 10px !important; color: #FFFFFF !important; font-size: clamp(3rem, 4.2vw, 5rem) !important; line-height: .94 !important; letter-spacing: -.055em !important; text-wrap: balance !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] h2::before { content: "CENTRALE TACTILE • JUSQU’À 32 MACHINES"; display: table !important; margin: 0 0 14px !important; padding: 9px 13px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #FFFFFF !important; font-size: 9px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .10em !important; box-shadow: 0 14px 30px rgba(222,7,45,.22) !important; } /* ===================================================== IMAGE ===================================================== */ #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] .sove-inline-image { grid-column: 2 !important; grid-row: 1 / span 6 !important; width: 100% !important; margin: 0 0 0 auto !important; overflow: hidden !important; border: 1px solid rgba(255,255,255,.18) !important; border-radius: 30px !important; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)) !important; backdrop-filter: blur(10px) !important; box-shadow: 0 34px 90px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12) !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] .sove-inline-image img { display: block !important; width: 100% !important; height: 500px !important; object-fit: cover !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] .sove-inline-image figcaption { padding: 12px 16px !important; background: rgba(255,255,255,.08) !important; color: rgba(255,255,255,.78) !important; font-size: 11px !important; line-height: 1.4 !important; border-top: 1px solid rgba(255,255,255,.08) !important; } /* ===================================================== PARAGRAPHES INTRO ===================================================== */ #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] > .sove-container > p:nth-of-type(1), #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] > .sove-container > p:nth-of-type(2), #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] > .sove-container > p:nth-of-type(3) { grid-column: 1 !important; max-width: 700px !important; margin: 0 !important; color: rgba(255,255,255,.84) !important; font-size: 15px !important; line-height: 1.62 !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] > .sove-container > p:nth-of-type(1) { font-size: 16px !important; color: #FFFFFF !important; font-weight: 780 !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] > .sove-container > p:nth-of-type(2) { width: fit-content !important; margin-top: 4px !important; padding: 10px 14px !important; border-radius: 16px !important; background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.08) !important; color: #FFFFFF !important; font-size: 14px !important; line-height: 1.45 !important; font-weight: 800 !important; } /* ===================================================== LISTE BÉNÉFICES ===================================================== */ #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] > .sove-container > ul { grid-column: 1 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; width: 100% !important; max-width: 720px !important; margin: 2px 0 2px !important; padding: 0 !important; list-style: none !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] > .sove-container > ul > li { position: relative !important; min-height: 100% !important; margin: 0 !important; padding: 18px 18px 18px 58px !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 22px !important; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04)) !important; color: rgba(255,255,255,.92) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important; font-size: 14px !important; line-height: 1.55 !important; backdrop-filter: blur(8px) !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] > .sove-container > ul > li::before { content: "✓" !important; position: absolute !important; left: 18px !important; top: 18px !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; border-radius: 10px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #FFFFFF !important; font-size: 14px !important; line-height: 1 !important; font-weight: 950 !important; box-shadow: 0 10px 20px rgba(222,7,45,.22) !important; } /* ===================================================== BLOC MULTI-MACHINES ===================================================== */ #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] section.level3.sove-dark-card { grid-column: 1 / -1 !important; display: grid !important; grid-template-columns: minmax(0, .95fr) minmax(360px, .95fr) !important; column-gap: 26px !important; row-gap: 16px !important; align-items: center !important; margin: 18px 0 0 !important; padding: 28px 28px 26px !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 28px !important; background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important; backdrop-filter: blur(12px) !important; box-shadow: 0 28px 72px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.08) !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] section.level3.sove-dark-card h3 { grid-column: 1 / -1 !important; margin: 0 !important; color: #FFFFFF !important; font-size: clamp(1.8rem, 2.2vw, 2.5rem) !important; line-height: 1.05 !important; letter-spacing: -.03em !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] section.level3.sove-dark-card h3::before { content: "ARCHITECTURE CENTRALISÉE"; display: table !important; margin: 0 0 12px !important; padding: 8px 12px !important; border-radius: 999px !important; background: rgba(222,7,45,.14) !important; color: #FFB9C5 !important; font-size: 9px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .10em !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] section.level3.sove-dark-card > p:nth-of-type(1) { margin: 0 !important; color: rgba(255,255,255,.78) !important; font-size: 15px !important; line-height: 1.6 !important; } /* diagramme */ #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] .sove-flow-diagram { margin: 0 !important; padding: 24px 22px !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 22px !important; background: radial-gradient(circle at 100% 0%, rgba(31,78,95,.20), transparent 40%), linear-gradient(135deg, rgba(10,14,16,.90), rgba(18,28,34,.92)) !important; color: #F3F7F9 !important; font-size: 15px !important; line-height: 1.55 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important; overflow: auto !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] .sove-flow-diagram code { display: block !important; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace !important; white-space: pre !important; color: #F3F7F9 !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] section.level3.sove-dark-card > p:nth-of-type(2) { margin: 0 !important; color: rgba(255,255,255,.88) !important; font-size: 15px !important; line-height: 1.55 !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] section.level3.sove-dark-card > p:has(.sove-btn) { grid-column: 1 / -1 !important; margin: 2px 0 0 !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] .sove-btn { min-height: 50px !important; padding: 13px 20px !important; box-shadow: 0 16px 30px rgba(222,7,45,.18) !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] section.level3.sove-dark-card hr { display: none !important; } } /* ========================================================= TABLETTE ========================================================= */ @media (min-width: 768px) and (max-width: 1100px) { #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] { padding: 70px 0 !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] > .sove-container { width: calc(100% - 48px) !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] h2 { margin: 0 auto 20px !important; max-width: 900px !important; text-align: center !important; color: #FFFFFF !important; font-size: clamp(2.5rem, 5.5vw, 3.9rem) !important; line-height: .98 !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] h2::before { content: "CENTRALE TACTILE"; display: table !important; margin: 0 auto 12px !important; padding: 8px 12px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #FFFFFF !important; font-size: 8px !important; font-weight: 950 !important; letter-spacing: .10em !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] .sove-inline-image { width: 100% !important; max-width: 900px !important; margin: 0 auto 18px !important; overflow: hidden !important; border: 1px solid rgba(255,255,255,.16) !important; border-radius: 24px !important; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important; box-shadow: 0 24px 54px rgba(0,0,0,.22) !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] .sove-inline-image img { width: 100% !important; height: 400px !important; object-fit: cover !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] .sove-inline-image figcaption { padding: 11px 14px !important; color: rgba(255,255,255,.78) !important; background: rgba(255,255,255,.08) !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] > .sove-container > p { max-width: 860px !important; margin: 0 auto 10px !important; text-align: center !important; color: rgba(255,255,255,.84) !important; font-size: 15px !important; line-height: 1.6 !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] > .sove-container > p:nth-of-type(2) { width: fit-content !important; margin: 0 auto 12px !important; padding: 10px 14px !important; border-radius: 16px !important; background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.08) !important; color: #FFFFFF !important; font-weight: 800 !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] > .sove-container > ul { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px !important; width: 100% !important; max-width: 860px !important; margin: 0 auto 14px !important; padding: 0 !important; list-style: none !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] > .sove-container > ul > li { position: relative !important; margin: 0 !important; padding: 16px 16px 16px 54px !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 18px !important; background: rgba(255,255,255,.06) !important; color: #FFFFFF !important; text-align: left !important; line-height: 1.55 !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] > .sove-container > ul > li::before { content: "✓" !important; position: absolute !important; left: 16px !important; top: 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 26px !important; height: 26px !important; border-radius: 9px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #FFFFFF !important; font-size: 13px !important; font-weight: 950 !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] section.level3.sove-dark-card { margin: 16px auto 0 !important; padding: 24px 20px !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 24px !important; background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important; box-shadow: 0 22px 52px rgba(0,0,0,.20) !important; text-align: center !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] section.level3.sove-dark-card h3 { margin: 0 0 12px !important; color: #FFFFFF !important; font-size: clamp(1.6rem, 3vw, 2.3rem) !important; line-height: 1.08 !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] section.level3.sove-dark-card h3::before { content: "ARCHITECTURE CENTRALISÉE"; display: table !important; margin: 0 auto 10px !important; padding: 8px 12px !important; border-radius: 999px !important; background: rgba(222,7,45,.14) !important; color: #FFB9C5 !important; font-size: 8px !important; font-weight: 950 !important; letter-spacing: .10em !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] section.level3.sove-dark-card p { color: rgba(255,255,255,.86) !important; text-align: center !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] .sove-flow-diagram { margin: 14px 0 !important; padding: 20px 16px !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 20px !important; background: linear-gradient(135deg, rgba(10,14,16,.92), rgba(18,28,34,.94)) !important; color: #F3F7F9 !important; overflow: auto !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] .sove-btn { width: min(100%, 340px) !important; margin: 6px auto 0 !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] section.level3.sove-dark-card hr { display: none !important; } } /* ========================================================= SMARTPHONE ========================================================= */ @media (max-width: 767px) { #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] { padding: 54px 0 !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] > .sove-container { width: calc(100% - 28px) !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] h2 { margin: 0 auto 18px !important; text-align: center !important; color: #FFFFFF !important; font-size: clamp(2.05rem, 9.2vw, 3rem) !important; line-height: 1 !important; letter-spacing: -.045em !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] h2::before { content: "TOUCH’N PAY"; display: table !important; margin: 0 auto 10px !important; padding: 7px 10px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #FFFFFF !important; font-size: 8px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .10em !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] .sove-inline-image { width: 100% !important; margin: 0 auto 18px !important; overflow: hidden !important; border: 1px solid rgba(255,255,255,.14) !important; border-radius: 20px !important; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important; box-shadow: 0 18px 38px rgba(0,0,0,.22) !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] .sove-inline-image img { width: 100% !important; height: 240px !important; object-fit: cover !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] .sove-inline-image figcaption { padding: 10px 12px !important; color: rgba(255,255,255,.80) !important; background: rgba(255,255,255,.08) !important; font-size: 10px !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] > .sove-container > p { margin: 0 0 10px !important; text-align: center !important; color: rgba(255,255,255,.86) !important; font-size: 14px !important; line-height: 1.58 !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] > .sove-container > p:nth-of-type(2) { margin: 0 auto 12px !important; padding: 12px 14px !important; border-radius: 16px !important; background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.08) !important; color: #FFFFFF !important; font-size: 14px !important; font-weight: 800 !important; } /* bénéfices */ #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] > .sove-container > ul { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; margin: 0 0 14px !important; padding: 0 !important; list-style: none !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] > .sove-container > ul > li { position: relative !important; margin: 0 !important; padding: 16px 16px 16px 52px !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 18px !important; background: rgba(255,255,255,.06) !important; color: #FFFFFF !important; line-height: 1.55 !important; text-align: left !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] > .sove-container > ul > li::before { content: "✓" !important; position: absolute !important; left: 15px !important; top: 15px !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; height: 24px !important; border-radius: 8px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #FFFFFF !important; font-size: 12px !important; font-weight: 950 !important; } /* bloc architecture */ #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] section.level3.sove-dark-card { margin: 16px 0 0 !important; padding: 20px 16px !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 22px !important; background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important; box-shadow: 0 18px 40px rgba(0,0,0,.22) !important; text-align: center !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] section.level3.sove-dark-card h3 { margin: 0 0 10px !important; color: #FFFFFF !important; font-size: clamp(1.45rem, 7vw, 2rem) !important; line-height: 1.08 !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] section.level3.sove-dark-card h3::before { content: "ARCHITECTURE CENTRALISÉE"; display: table !important; margin: 0 auto 10px !important; padding: 7px 10px !important; border-radius: 999px !important; background: rgba(222,7,45,.14) !important; color: #FFB9C5 !important; font-size: 8px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .10em !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] section.level3.sove-dark-card p { color: rgba(255,255,255,.86) !important; text-align: center !important; font-size: 13.5px !important; line-height: 1.58 !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] .sove-flow-diagram { margin: 14px 0 !important; padding: 16px 14px !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 18px !important; background: linear-gradient(135deg, rgba(10,14,16,.92), rgba(18,28,34,.95)) !important; color: #F3F7F9 !important; font-size: 12px !important; line-height: 1.55 !important; overflow: auto !important; text-align: left !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] .sove-flow-diagram code { white-space: pre !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] .sove-btn { width: min(100%, 320px) !important; min-height: 48px !important; margin: 6px auto 0 !important; } #sovematic-payment-page section[id="touchn-pay-la-centrale-tactile-proposée-par-sovematic"] section.level3.sove-dark-card hr { display: none !important; } }/* ========================================================= QUELS MOYENS DE PAIEMENT PEUT ACCEPTER UNE CENTRALE VERSION PREMIUM / SPECTACULAIRE / RESPONSIVE ========================================================= */ #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie { position: relative !important; overflow: hidden !important; padding: clamp(80px, 8vw, 118px) 0 !important; background: radial-gradient(circle at 0% 0%, rgba(222,7,45,.05), transparent 28%), radial-gradient(circle at 100% 100%, rgba(31,78,95,.08), transparent 34%), linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%) !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie::before { content: "" !important; position: absolute !important; inset: 0 !important; background: linear-gradient(rgba(17,18,20,.02) 1px, transparent 1px), linear-gradient(90deg, rgba(17,18,20,.02) 1px, transparent 1px) !important; background-size: 40px 40px !important; opacity: .28 !important; pointer-events: none !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie > .sove-container { position: relative !important; z-index: 2 !important; width: min(1320px, calc(100% - 72px)) !important; max-width: 1320px !important; margin: 0 auto !important; } /* ========================================================= DESKTOP ========================================================= */ @media (min-width: 1101px) { #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie > .sove-container { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)) !important; gap: 18px !important; } /* ===================================================== TITRE ===================================================== */ #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie h2 { grid-column: 1 / -1 !important; max-width: 880px !important; margin: 0 auto 8px !important; text-align: center !important; font-size: clamp(2.9rem, 4vw, 4.8rem) !important; line-height: .95 !important; letter-spacing: -.05em !important; text-wrap: balance !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie h2::before { content: "OPTIONS DE PAIEMENT • EXPÉRIENCE UTILISATEUR"; display: table !important; margin: 0 auto 14px !important; padding: 8px 13px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 9px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .10em !important; box-shadow: 0 12px 28px rgba(222,7,45,.18) !important; } /* intro */ #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie > .sove-container > p:nth-of-type(1), #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie > .sove-container > p:nth-of-type(2), #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie > .sove-container > p:nth-of-type(3), #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie > .sove-container > p:nth-of-type(4) { grid-column: 2 / 12 !important; max-width: 920px !important; margin: 0 auto !important; text-align: center !important; font-size: 15px !important; line-height: 1.62 !important; color: #4E5D64 !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie > .sove-container > p:nth-of-type(1) { font-size: 16px !important; color: #111214 !important; font-weight: 760 !important; } /* ===================================================== LISTE DES MOYENS DE PAIEMENT ===================================================== */ #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie > .sove-container > ul:first-of-type { grid-column: 1 / -1 !important; display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 16px !important; width: 100% !important; max-width: 1240px !important; margin: 8px auto 12px !important; padding: 0 !important; list-style: none !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie > .sove-container > ul:first-of-type > li { position: relative !important; display: flex !important; align-items: flex-end !important; min-height: 170px !important; margin: 0 !important; padding: 24px 18px 20px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 24px !important; background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,249,250,.98)) !important; box-shadow: 0 18px 44px rgba(17,18,20,.06) !important; color: #111214 !important; text-align: left !important; line-height: 1.45 !important; transition: transform .25s ease, box-shadow .25s ease !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie > .sove-container > ul:first-of-type > li:hover { transform: translateY(-4px) !important; box-shadow: 0 24px 56px rgba(17,18,20,.09) !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie > .sove-container > ul:first-of-type > li::before { position: absolute !important; top: 18px !important; left: 18px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 46px !important; height: 46px !important; border-radius: 14px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 18px !important; line-height: 1 !important; font-weight: 900 !important; box-shadow: 0 12px 24px rgba(222,7,45,.18) !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie > .sove-container > ul:first-of-type > li:nth-child(1)::before { content: "€" !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie > .sove-container > ul:first-of-type > li:nth-child(2)::before { content: "₿" !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie > .sove-container > ul:first-of-type > li:nth-child(3)::before { content: "⌁" !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie > .sove-container > ul:first-of-type > li:nth-child(4)::before { content: "◈" !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie > .sove-container > ul:first-of-type > li:nth-child(5)::before { content: "🧾" !important; font-size: 16px !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie > .sove-container > ul:first-of-type > li strong { display: block !important; font-size: 16px !important; line-height: 1.3 !important; font-weight: 900 !important; color: #111214 !important; } /* ===================================================== BLOCS LEVEL3 ===================================================== */ #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie section.level3 { position: relative !important; display: flex !important; flex-direction: column !important; min-height: 100% !important; padding: 28px 24px 24px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 28px !important; background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,249,250,.98)) !important; box-shadow: 0 22px 56px rgba(17,18,20,.06) !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie section.level3:nth-of-type(1) { grid-column: 1 / 5 !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie section.level3:nth-of-type(2) { grid-column: 5 / 9 !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie section.level3:nth-of-type(3) { grid-column: 9 / -1 !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie section.level3::before { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: fit-content !important; margin: 0 0 14px !important; padding: 9px 12px !important; border-radius: 999px !important; font-size: 10px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .08em !important; text-transform: uppercase !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie section.level3:nth-of-type(1)::before { content: "Sans contact" !important; background: rgba(31,78,95,.10) !important; color: #1F4E5F !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie section.level3:nth-of-type(2)::before { content: "Espèces" !important; background: rgba(222,7,45,.08) !important; color: #DE072D !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie section.level3:nth-of-type(3)::before { content: "Utilisateurs réguliers" !important; background: rgba(17,18,20,.06) !important; color: #111214 !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie section.level3 h3 { margin: 0 0 14px !important; color: #111214 !important; font-size: clamp(1.45rem, 1.7vw, 2rem) !important; line-height: 1.08 !important; letter-spacing: -.02em !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie section.level3 p { margin: 0 0 11px !important; color: #4C5C63 !important; font-size: 14px !important; line-height: 1.58 !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie section.level3 p strong { color: #111214 !important; font-weight: 850 !important; } /* parcours mis en valeur */ #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie #paiement-bancaire-sans-contact-limiter-les-frictions > p:nth-of-type(4) { margin: 4px 0 14px !important; padding: 16px 18px !important; border-radius: 18px !important; background: linear-gradient(135deg, #101315, #163947) !important; color: #fff !important; text-align: center !important; box-shadow: 0 18px 36px rgba(17,18,20,.14) !important; } /* liste espèces */ #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie #paiement-en-espèces-pièces-et-billets-restent-possibles ul { display: grid !important; gap: 10px !important; margin: 0 0 14px !important; padding: 0 !important; list-style: none !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie #paiement-en-espèces-pièces-et-billets-restent-possibles ul li { position: relative !important; margin: 0 !important; padding: 14px 14px 14px 42px !important; border-radius: 16px !important; background: rgba(222,7,45,.04) !important; color: #485960 !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie #paiement-en-espèces-pièces-et-billets-restent-possibles ul li::before { content: "•" !important; position: absolute !important; left: 18px !important; top: 50% !important; transform: translateY(-50%) !important; color: #DE072D !important; font-size: 22px !important; line-height: 1 !important; } /* carte abonnement plus forte */ #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie #carte-dabonnement-une-option-intéressante-pour-les-utilisateurs-réguliers { background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(244,247,249,.98)) !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie #carte-dabonnement-une-option-intéressante-pour-les-utilisateurs-réguliers p:last-of-type { margin-top: auto !important; padding: 16px 18px !important; border-radius: 18px !important; background: linear-gradient(135deg, rgba(31,78,95,.08), rgba(31,78,95,.04)) !important; color: #1F4E5F !important; font-weight: 760 !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie section.level3 hr { display: none !important; } } /* ========================================================= TABLETTE ========================================================= */ @media (min-width: 768px) and (max-width: 1100px) { #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie > .sove-container { width: calc(100% - 48px) !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie h2 { max-width: 860px !important; margin: 0 auto 20px !important; text-align: center !important; font-size: clamp(2.35rem, 5.2vw, 3.6rem) !important; line-height: 1 !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie h2::before { content: "OPTIONS DE PAIEMENT"; display: table !important; margin: 0 auto 12px !important; padding: 8px 12px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 8px !important; font-weight: 950 !important; letter-spacing: .10em !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie > .sove-container > p { max-width: 840px !important; margin: 0 auto 10px !important; text-align: center !important; } /* cartes de paiement */ #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie > .sove-container > ul:first-of-type { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; margin: 14px auto !important; padding: 0 !important; list-style: none !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie > .sove-container > ul:first-of-type > li { position: relative !important; min-height: 120px !important; margin: 0 !important; padding: 20px 16px 18px 62px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 20px !important; background: #fff !important; box-shadow: 0 14px 32px rgba(17,18,20,.05) !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie > .sove-container > ul:first-of-type > li::before { position: absolute !important; top: 18px !important; left: 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; border-radius: 12px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-weight: 900 !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie > .sove-container > ul:first-of-type > li:nth-child(1)::before { content: "€" !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie > .sove-container > ul:first-of-type > li:nth-child(2)::before { content: "₿" !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie > .sove-container > ul:first-of-type > li:nth-child(3)::before { content: "⌁" !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie > .sove-container > ul:first-of-type > li:nth-child(4)::before { content: "◈" !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie > .sove-container > ul:first-of-type > li:nth-child(5)::before { content: "🧾" !important; } /* blocs */ #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie section.level3 { margin: 16px 0 0 !important; padding: 22px 18px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 22px !important; background: #fff !important; box-shadow: 0 16px 38px rgba(17,18,20,.05) !important; text-align: center !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie section.level3::before { display: table !important; margin: 0 auto 10px !important; padding: 8px 12px !important; border-radius: 999px !important; font-size: 9px !important; font-weight: 950 !important; letter-spacing: .08em !important; text-transform: uppercase !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie section.level3:nth-of-type(1)::before { content: "Sans contact" !important; background: rgba(31,78,95,.10) !important; color: #1F4E5F !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie section.level3:nth-of-type(2)::before { content: "Espèces" !important; background: rgba(222,7,45,.08) !important; color: #DE072D !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie section.level3:nth-of-type(3)::before { content: "Utilisateurs réguliers" !important; background: rgba(17,18,20,.06) !important; color: #111214 !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie section.level3 h3 { margin: 0 0 12px !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie #paiement-bancaire-sans-contact-limiter-les-frictions > p:nth-of-type(4) { padding: 14px 16px !important; border-radius: 16px !important; background: linear-gradient(135deg, #101315, #163947) !important; color: #fff !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie #paiement-en-espèces-pièces-et-billets-restent-possibles ul { display: grid !important; gap: 10px !important; margin: 0 0 12px !important; padding: 0 !important; list-style: none !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie #paiement-en-espèces-pièces-et-billets-restent-possibles ul li { position: relative !important; padding: 12px 12px 12px 38px !important; border-radius: 14px !important; background: rgba(222,7,45,.04) !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie #paiement-en-espèces-pièces-et-billets-restent-possibles ul li::before { content: "•" !important; position: absolute !important; left: 16px !important; top: 50% !important; transform: translateY(-50%) !important; color: #DE072D !important; font-size: 20px !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie section.level3 hr { display: none !important; } } /* ========================================================= SMARTPHONE ========================================================= */ @media (max-width: 767px) { #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie { padding: 54px 0 !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie > .sove-container { width: calc(100% - 28px) !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie h2 { margin: 0 auto 18px !important; text-align: center !important; font-size: clamp(2rem, 8.9vw, 2.85rem) !important; line-height: 1 !important; letter-spacing: -.04em !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie h2::before { content: "OPTIONS DE PAIEMENT"; display: table !important; margin: 0 auto 10px !important; padding: 7px 10px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 8px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .10em !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie > .sove-container > p { margin: 0 0 10px !important; text-align: center !important; font-size: 14px !important; line-height: 1.58 !important; } /* cartes méthodes */ #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie > .sove-container > ul:first-of-type { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; margin: 14px 0 !important; padding: 0 !important; list-style: none !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie > .sove-container > ul:first-of-type > li { position: relative !important; margin: 0 !important; padding: 16px 14px 16px 56px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 18px !important; background: #fff !important; box-shadow: 0 12px 26px rgba(17,18,20,.05) !important; line-height: 1.5 !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie > .sove-container > ul:first-of-type > li::before { position: absolute !important; top: 14px !important; left: 14px !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; border-radius: 10px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 13px !important; font-weight: 900 !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie > .sove-container > ul:first-of-type > li:nth-child(1)::before { content: "€" !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie > .sove-container > ul:first-of-type > li:nth-child(2)::before { content: "₿" !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie > .sove-container > ul:first-of-type > li:nth-child(3)::before { content: "⌁" !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie > .sove-container > ul:first-of-type > li:nth-child(4)::before { content: "◈" !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie > .sove-container > ul:first-of-type > li:nth-child(5)::before { content: "🧾" !important; font-size: 12px !important; } /* blocs */ #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie section.level3 { margin: 16px 0 0 !important; padding: 18px 14px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 20px !important; background: #fff !important; box-shadow: 0 14px 28px rgba(17,18,20,.05) !important; text-align: center !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie section.level3::before { display: table !important; margin: 0 auto 10px !important; padding: 7px 10px !important; border-radius: 999px !important; font-size: 8px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .08em !important; text-transform: uppercase !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie section.level3:nth-of-type(1)::before { content: "Sans contact" !important; background: rgba(31,78,95,.10) !important; color: #1F4E5F !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie section.level3:nth-of-type(2)::before { content: "Espèces" !important; background: rgba(222,7,45,.08) !important; color: #DE072D !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie section.level3:nth-of-type(3)::before { content: "Abonnement" !important; background: rgba(17,18,20,.06) !important; color: #111214 !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie section.level3 h3 { margin: 0 0 10px !important; font-size: clamp(1.35rem, 7vw, 1.9rem) !important; line-height: 1.08 !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie section.level3 p { text-align: center !important; font-size: 13.5px !important; line-height: 1.58 !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie #paiement-bancaire-sans-contact-limiter-les-frictions > p:nth-of-type(4) { margin: 6px 0 12px !important; padding: 14px 12px !important; border-radius: 16px !important; background: linear-gradient(135deg, #101315, #163947) !important; color: #fff !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie #paiement-en-espèces-pièces-et-billets-restent-possibles ul { display: grid !important; gap: 10px !important; margin: 0 0 12px !important; padding: 0 !important; list-style: none !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie #paiement-en-espèces-pièces-et-billets-restent-possibles ul li { position: relative !important; padding: 12px 12px 12px 34px !important; border-radius: 14px !important; background: rgba(222,7,45,.04) !important; text-align: left !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie #paiement-en-espèces-pièces-et-billets-restent-possibles ul li::before { content: "•" !important; position: absolute !important; left: 14px !important; top: 50% !important; transform: translateY(-50%) !important; color: #DE072D !important; font-size: 18px !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie #carte-dabonnement-une-option-intéressante-pour-les-utilisateurs-réguliers p:last-of-type { padding: 14px 12px !important; border-radius: 16px !important; background: linear-gradient(135deg, rgba(31,78,95,.08), rgba(31,78,95,.04)) !important; color: #1F4E5F !important; font-weight: 760 !important; } #sovematic-payment-page #quels-moyens-de-paiement-peut-accepter-une-centrale-de-laverie section.level3 hr { display: none !important; } }/* ========================================================= CHANGEUR / DISTRIBUTEUR DE JETONS + CENTRALE LAVAGE / SÉCHAGE PATCH PREMIUM / RESPONSIVE / SPECTACULAIRE ========================================================= */ /* ========================================================= 1) CHANGEUR ET DISTRIBUTEUR DE JETONS ========================================================= */ #sovematic-payment-page #changeur-et-distributeur-de-jetons-une-alternative-pour-certaines-installations { position: relative !important; overflow: hidden !important; padding: clamp(76px, 8vw, 118px) 0 !important; background: radial-gradient(circle at 0% 0%, rgba(222,7,45,.05), transparent 26%), radial-gradient(circle at 100% 100%, rgba(31,78,95,.07), transparent 30%), linear-gradient(180deg, #ffffff 0%, #f8f9fb 100%) !important; } #sovematic-payment-page #changeur-et-distributeur-de-jetons-une-alternative-pour-certaines-installations::before { content: "" !important; position: absolute !important; inset: 0 !important; background: linear-gradient(rgba(17,18,20,.02) 1px, transparent 1px), linear-gradient(90deg, rgba(17,18,20,.02) 1px, transparent 1px) !important; background-size: 42px 42px !important; opacity: .28 !important; pointer-events: none !important; } #sovematic-payment-page #changeur-et-distributeur-de-jetons-une-alternative-pour-certaines-installations > .sove-container { position: relative !important; z-index: 2 !important; width: min(1320px, calc(100% - 72px)) !important; max-width: 1320px !important; margin: 0 auto !important; } /* ---------------- DESKTOP ---------------- */ @media (min-width: 1101px) { #sovematic-payment-page #changeur-et-distributeur-de-jetons-une-alternative-pour-certaines-installations > .sove-container { display: grid !important; grid-template-columns: minmax(0, 1.02fr) minmax(380px, .92fr) !important; column-gap: clamp(30px, 4vw, 64px) !important; row-gap: 16px !important; align-items: start !important; } #sovematic-payment-page #changeur-et-distributeur-de-jetons-une-alternative-pour-certaines-installations h2 { grid-column: 1 !important; max-width: 760px !important; margin: 0 0 8px !important; font-size: clamp(3rem, 4.2vw, 5rem) !important; line-height: .95 !important; letter-spacing: -.055em !important; text-wrap: balance !important; } #sovematic-payment-page #changeur-et-distributeur-de-jetons-une-alternative-pour-certaines-installations h2::before { content: "JETONS • CHANGEUR • EXPLOITATION SPÉCIFIQUE"; display: table !important; margin: 0 0 14px !important; padding: 8px 13px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 9px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .10em !important; box-shadow: 0 14px 28px rgba(222,7,45,.18) !important; } #sovematic-payment-page #changeur-et-distributeur-de-jetons-une-alternative-pour-certaines-installations > .sove-container > p { grid-column: 1 !important; max-width: 720px !important; margin: 0 !important; color: #4F5D63 !important; font-size: 15px !important; line-height: 1.65 !important; } #sovematic-payment-page #changeur-et-distributeur-de-jetons-une-alternative-pour-certaines-installations > .sove-container > p strong { color: #111214 !important; } #sovematic-payment-page #changeur-et-distributeur-de-jetons-une-alternative-pour-certaines-installations section.level3#centrale-monnayeur-ou-jetons { grid-column: 2 !important; grid-row: 1 / span 4 !important; position: relative !important; overflow: hidden !important; padding: 28px 26px 24px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 30px !important; background: radial-gradient(circle at 100% 0%, rgba(31,78,95,.18), transparent 38%), linear-gradient(135deg, #111315 0%, #152028 45%, #173847 100%) !important; box-shadow: 0 28px 70px rgba(17,18,20,.18), inset 0 1px 0 rgba(255,255,255,.07) !important; } #sovematic-payment-page #changeur-et-distributeur-de-jetons-une-alternative-pour-certaines-installations section.level3#centrale-monnayeur-ou-jetons::before { content: "MATRICE DE CHOIX"; display: table !important; margin: 0 0 14px !important; padding: 9px 13px !important; border-radius: 999px !important; background: rgba(255,255,255,.08) !important; color: #fff !important; font-size: 9px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .10em !important; text-transform: uppercase !important; } #sovematic-payment-page #changeur-et-distributeur-de-jetons-une-alternative-pour-certaines-installations section.level3#centrale-monnayeur-ou-jetons h3 { margin: 0 0 12px !important; color: #fff !important; font-size: clamp(1.8rem, 2vw, 2.4rem) !important; line-height: 1.08 !important; letter-spacing: -.03em !important; } #sovematic-payment-page #changeur-et-distributeur-de-jetons-une-alternative-pour-certaines-installations section.level3#centrale-monnayeur-ou-jetons p { margin: 0 0 12px !important; color: rgba(255,255,255,.84) !important; font-size: 14px !important; line-height: 1.6 !important; } #sovematic-payment-page #changeur-et-distributeur-de-jetons-une-alternative-pour-certaines-installations section.level3#centrale-monnayeur-ou-jetons ul { display: grid !important; gap: 12px !important; margin: 0 0 16px !important; padding: 0 !important; list-style: none !important; } #sovematic-payment-page #changeur-et-distributeur-de-jetons-une-alternative-pour-certaines-installations section.level3#centrale-monnayeur-ou-jetons ul li { position: relative !important; margin: 0 !important; padding: 14px 14px 14px 46px !important; border-radius: 18px !important; background: rgba(255,255,255,.07) !important; color: #fff !important; line-height: 1.5 !important; border: 1px solid rgba(255,255,255,.07) !important; } #sovematic-payment-page #changeur-et-distributeur-de-jetons-une-alternative-pour-certaines-installations section.level3#centrale-monnayeur-ou-jetons ul li::before { content: "→" !important; position: absolute !important; left: 16px !important; top: 50% !important; transform: translateY(-50%) !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 22px !important; height: 22px !important; border-radius: 8px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 11px !important; line-height: 1 !important; font-weight: 900 !important; } #sovematic-payment-page #changeur-et-distributeur-de-jetons-une-alternative-pour-certaines-installations section.level3#centrale-monnayeur-ou-jetons p:last-of-type { margin-top: 4px !important; padding: 14px 16px !important; border-radius: 18px !important; background: rgba(255,255,255,.06) !important; color: #fff !important; font-weight: 760 !important; } #sovematic-payment-page #changeur-et-distributeur-de-jetons-une-alternative-pour-certaines-installations section.level3#centrale-monnayeur-ou-jetons hr { display: none !important; } } /* ---------------- TABLETTE ---------------- */ @media (min-width: 768px) and (max-width: 1100px) { #sovematic-payment-page #changeur-et-distributeur-de-jetons-une-alternative-pour-certaines-installations > .sove-container { width: calc(100% - 48px) !important; } #sovematic-payment-page #changeur-et-distributeur-de-jetons-une-alternative-pour-certaines-installations h2 { max-width: 880px !important; margin: 0 auto 18px !important; text-align: center !important; font-size: clamp(2.45rem, 5.3vw, 3.8rem) !important; line-height: .98 !important; } #sovematic-payment-page #changeur-et-distributeur-de-jetons-une-alternative-pour-certaines-installations h2::before { content: "JETONS • CHANGEUR"; display: table !important; margin: 0 auto 12px !important; padding: 8px 12px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 8px !important; font-weight: 950 !important; letter-spacing: .10em !important; } #sovematic-payment-page #changeur-et-distributeur-de-jetons-une-alternative-pour-certaines-installations > .sove-container > p { max-width: 860px !important; margin: 0 auto 10px !important; text-align: center !important; color: #4F5D63 !important; } #sovematic-payment-page #changeur-et-distributeur-de-jetons-une-alternative-pour-certaines-installations section.level3#centrale-monnayeur-ou-jetons { margin: 18px auto 0 !important; padding: 24px 20px !important; border-radius: 24px !important; background: radial-gradient(circle at 100% 0%, rgba(31,78,95,.18), transparent 38%), linear-gradient(135deg, #111315 0%, #152028 45%, #173847 100%) !important; box-shadow: 0 22px 52px rgba(17,18,20,.18) !important; text-align: center !important; } #sovematic-payment-page #changeur-et-distributeur-de-jetons-une-alternative-pour-certaines-installations section.level3#centrale-monnayeur-ou-jetons::before { content: "MATRICE DE CHOIX"; display: table !important; margin: 0 auto 10px !important; padding: 8px 12px !important; border-radius: 999px !important; background: rgba(255,255,255,.08) !important; color: #fff !important; font-size: 8px !important; font-weight: 950 !important; letter-spacing: .10em !important; } #sovematic-payment-page #changeur-et-distributeur-de-jetons-une-alternative-pour-certaines-installations section.level3#centrale-monnayeur-ou-jetons h3 { color: #fff !important; margin: 0 0 12px !important; } #sovematic-payment-page #changeur-et-distributeur-de-jetons-une-alternative-pour-certaines-installations section.level3#centrale-monnayeur-ou-jetons p { color: rgba(255,255,255,.86) !important; text-align: center !important; } #sovematic-payment-page #changeur-et-distributeur-de-jetons-une-alternative-pour-certaines-installations section.level3#centrale-monnayeur-ou-jetons ul { display: grid !important; gap: 10px !important; margin: 0 0 14px !important; padding: 0 !important; list-style: none !important; } #sovematic-payment-page #changeur-et-distributeur-de-jetons-une-alternative-pour-certaines-installations section.level3#centrale-monnayeur-ou-jetons ul li { position: relative !important; padding: 13px 13px 13px 42px !important; border-radius: 16px !important; background: rgba(255,255,255,.08) !important; color: #fff !important; text-align: left !important; } #sovematic-payment-page #changeur-et-distributeur-de-jetons-une-alternative-pour-certaines-installations section.level3#centrale-monnayeur-ou-jetons ul li::before { content: "→" !important; position: absolute !important; left: 14px !important; top: 50% !important; transform: translateY(-50%) !important; width: 20px !important; height: 20px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 7px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 10px !important; font-weight: 900 !important; } #sovematic-payment-page #changeur-et-distributeur-de-jetons-une-alternative-pour-certaines-installations section.level3#centrale-monnayeur-ou-jetons p:last-of-type { padding: 13px 14px !important; border-radius: 16px !important; background: rgba(255,255,255,.06) !important; color: #fff !important; font-weight: 760 !important; } #sovematic-payment-page #changeur-et-distributeur-de-jetons-une-alternative-pour-certaines-installations section.level3#centrale-monnayeur-ou-jetons hr { display: none !important; } } /* ---------------- SMARTPHONE ---------------- */ @media (max-width: 767px) { #sovematic-payment-page #changeur-et-distributeur-de-jetons-une-alternative-pour-certaines-installations { padding: 54px 0 !important; } #sovematic-payment-page #changeur-et-distributeur-de-jetons-une-alternative-pour-certaines-installations > .sove-container { width: calc(100% - 28px) !important; } #sovematic-payment-page #changeur-et-distributeur-de-jetons-une-alternative-pour-certaines-installations h2 { margin: 0 auto 16px !important; text-align: center !important; font-size: clamp(2rem, 9vw, 2.9rem) !important; line-height: 1 !important; letter-spacing: -.04em !important; } #sovematic-payment-page #changeur-et-distributeur-de-jetons-une-alternative-pour-certaines-installations h2::before { content: "JETONS • CHANGEUR"; display: table !important; margin: 0 auto 10px !important; padding: 7px 10px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 8px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .10em !important; } #sovematic-payment-page #changeur-et-distributeur-de-jetons-une-alternative-pour-certaines-installations > .sove-container > p { margin: 0 0 10px !important; text-align: center !important; color: #4F5D63 !important; font-size: 14px !important; line-height: 1.58 !important; } #sovematic-payment-page #changeur-et-distributeur-de-jetons-une-alternative-pour-certaines-installations section.level3#centrale-monnayeur-ou-jetons { margin: 16px 0 0 !important; padding: 20px 14px !important; border-radius: 22px !important; background: radial-gradient(circle at 100% 0%, rgba(31,78,95,.18), transparent 38%), linear-gradient(135deg, #111315 0%, #152028 45%, #173847 100%) !important; box-shadow: 0 18px 40px rgba(17,18,20,.18) !important; text-align: center !important; } #sovematic-payment-page #changeur-et-distributeur-de-jetons-une-alternative-pour-certaines-installations section.level3#centrale-monnayeur-ou-jetons::before { content: "MATRICE DE CHOIX"; display: table !important; margin: 0 auto 10px !important; padding: 7px 10px !important; border-radius: 999px !important; background: rgba(255,255,255,.08) !important; color: #fff !important; font-size: 8px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .10em !important; } #sovematic-payment-page #changeur-et-distributeur-de-jetons-une-alternative-pour-certaines-installations section.level3#centrale-monnayeur-ou-jetons h3 { margin: 0 0 10px !important; color: #fff !important; font-size: clamp(1.45rem, 7vw, 2rem) !important; line-height: 1.08 !important; } #sovematic-payment-page #changeur-et-distributeur-de-jetons-une-alternative-pour-certaines-installations section.level3#centrale-monnayeur-ou-jetons p { color: rgba(255,255,255,.86) !important; text-align: center !important; font-size: 13.5px !important; line-height: 1.58 !important; } #sovematic-payment-page #changeur-et-distributeur-de-jetons-une-alternative-pour-certaines-installations section.level3#centrale-monnayeur-ou-jetons ul { display: grid !important; gap: 10px !important; margin: 0 0 12px !important; padding: 0 !important; list-style: none !important; } #sovematic-payment-page #changeur-et-distributeur-de-jetons-une-alternative-pour-certaines-installations section.level3#centrale-monnayeur-ou-jetons ul li { position: relative !important; margin: 0 !important; padding: 12px 12px 12px 36px !important; border-radius: 14px !important; background: rgba(255,255,255,.08) !important; color: #fff !important; text-align: left !important; } #sovematic-payment-page #changeur-et-distributeur-de-jetons-une-alternative-pour-certaines-installations section.level3#centrale-monnayeur-ou-jetons ul li::before { content: "→" !important; position: absolute !important; left: 12px !important; top: 50% !important; transform: translateY(-50%) !important; width: 18px !important; height: 18px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 6px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 9px !important; font-weight: 900 !important; } #sovematic-payment-page #changeur-et-distributeur-de-jetons-une-alternative-pour-certaines-installations section.level3#centrale-monnayeur-ou-jetons p:last-of-type { padding: 12px !important; border-radius: 14px !important; background: rgba(255,255,255,.06) !important; color: #fff !important; font-weight: 760 !important; } #sovematic-payment-page #changeur-et-distributeur-de-jetons-une-alternative-pour-certaines-installations section.level3#centrale-monnayeur-ou-jetons hr { display: none !important; } } /* ========================================================= 2) UNE CENTRALE PEUT-ELLE PILOTER LE LAVAGE ET LE SÉCHAGE ? ========================================================= */ #sovematic-payment-page #une-centrale-peut-elle-piloter-le-lavage-et-le-séchage { position: relative !important; overflow: hidden !important; padding: clamp(80px, 8vw, 124px) 0 !important; background: radial-gradient(circle at 0% 0%, rgba(222,7,45,.12), transparent 24%), radial-gradient(circle at 100% 100%, rgba(31,78,95,.18), transparent 32%), linear-gradient(135deg, #0E1214 0%, #10242C 45%, #0B2A34 100%) !important; } #sovematic-payment-page #une-centrale-peut-elle-piloter-le-lavage-et-le-séchage::before { content: "" !important; position: absolute !important; inset: 0 !important; background: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) !important; background-size: 42px 42px !important; opacity: .18 !important; pointer-events: none !important; } #sovematic-payment-page #une-centrale-peut-elle-piloter-le-lavage-et-le-séchage > .sove-container { position: relative !important; z-index: 2 !important; width: min(1260px, calc(100% - 72px)) !important; max-width: 1260px !important; margin: 0 auto !important; } /* ---------------- DESKTOP ---------------- */ @media (min-width: 1101px) { #sovematic-payment-page #une-centrale-peut-elle-piloter-le-lavage-et-le-séchage > .sove-container { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)) !important; gap: 18px !important; } #sovematic-payment-page #une-centrale-peut-elle-piloter-le-lavage-et-le-séchage h2 { grid-column: 2 / 12 !important; max-width: 940px !important; margin: 0 auto 6px !important; text-align: center !important; color: #fff !important; font-size: clamp(3rem, 4.3vw, 5rem) !important; line-height: .95 !important; letter-spacing: -.055em !important; text-wrap: balance !important; } #sovematic-payment-page #une-centrale-peut-elle-piloter-le-lavage-et-le-séchage h2::before { content: "PARCOURS CENTRALISÉ • LAVAGE + SÉCHAGE"; display: table !important; margin: 0 auto 14px !important; padding: 9px 13px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 9px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .10em !important; box-shadow: 0 14px 30px rgba(222,7,45,.20) !important; } /* Oui. */ #sovematic-payment-page #une-centrale-peut-elle-piloter-le-lavage-et-le-séchage > .sove-container > p:nth-of-type(1) { grid-column: 5 / 9 !important; margin: 0 auto 2px !important; padding: 10px 16px !important; width: fit-content !important; border-radius: 999px !important; background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.10) !important; color: #fff !important; text-align: center !important; font-size: 15px !important; line-height: 1 !important; font-weight: 850 !important; backdrop-filter: blur(8px) !important; } #sovematic-payment-page #une-centrale-peut-elle-piloter-le-lavage-et-le-séchage > .sove-container > p:nth-of-type(2), #sovematic-payment-page #une-centrale-peut-elle-piloter-le-lavage-et-le-séchage > .sove-container > p:nth-of-type(3), #sovematic-payment-page #une-centrale-peut-elle-piloter-le-lavage-et-le-séchage > .sove-container > p:nth-of-type(4), #sovematic-payment-page #une-centrale-peut-elle-piloter-le-lavage-et-le-séchage > .sove-container > p:nth-of-type(5), #sovematic-payment-page #une-centrale-peut-elle-piloter-le-lavage-et-le-séchage > .sove-container > p:nth-of-type(6) { grid-column: 3 / 11 !important; max-width: 900px !important; margin: 0 auto !important; text-align: center !important; color: rgba(255,255,255,.84) !important; font-size: 15px !important; line-height: 1.62 !important; } #sovematic-payment-page #une-centrale-peut-elle-piloter-le-lavage-et-le-séchage > .sove-container > p strong { color: #fff !important; } /* Liste lavage / séchage */ #sovematic-payment-page #une-centrale-peut-elle-piloter-le-lavage-et-le-séchage > .sove-container > ol { grid-column: 3 / 11 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; max-width: 820px !important; width: 100% !important; margin: 8px auto 6px !important; padding: 0 !important; list-style: none !important; counter-reset: sove-steps !important; } #sovematic-payment-page #une-centrale-peut-elle-piloter-le-lavage-et-le-séchage > .sove-container > ol > li { position: relative !important; margin: 0 !important; padding: 18px 18px 18px 62px !important; min-height: 100px !important; border: 1px solid rgba(255,255,255,.09) !important; border-radius: 22px !important; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important; color: #fff !important; line-height: 1.5 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important; backdrop-filter: blur(8px) !important; } #sovematic-payment-page #une-centrale-peut-elle-piloter-le-lavage-et-le-séchage > .sove-container > ol > li::before { counter-increment: sove-steps !important; content: "0" counter(sove-steps) !important; position: absolute !important; left: 18px !important; top: 18px !important; width: 30px !important; height: 30px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 10px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 12px !important; line-height: 1 !important; font-weight: 950 !important; box-shadow: 0 10px 22px rgba(222,7,45,.22) !important; } /* Diagramme */ #sovematic-payment-page #une-centrale-peut-elle-piloter-le-lavage-et-le-séchage .sove-flow-diagram { grid-column: 2 / 12 !important; margin: 12px auto 0 !important; width: 100% !important; max-width: 980px !important; padding: 28px 28px !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 28px !important; background: radial-gradient(circle at 100% 0%, rgba(31,78,95,.18), transparent 38%), linear-gradient(135deg, rgba(10,14,16,.92), rgba(16,31,39,.95)) !important; box-shadow: 0 28px 70px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06) !important; color: #F3F7F9 !important; overflow: auto !important; } #sovematic-payment-page #une-centrale-peut-elle-piloter-le-lavage-et-le-séchage .sove-flow-diagram code { display: block !important; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace !important; white-space: pre !important; color: #F3F7F9 !important; font-size: 16px !important; line-height: 1.7 !important; text-align: center !important; } #sovematic-payment-page #une-centrale-peut-elle-piloter-le-lavage-et-le-séchage > .sove-container > p:last-of-type { grid-column: 3 / 11 !important; margin: 4px auto 0 !important; max-width: 860px !important; padding: 16px 18px !important; border-radius: 20px !important; background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.08) !important; color: #fff !important; text-align: center !important; font-size: 15px !important; line-height: 1.55 !important; font-weight: 760 !important; } #sovematic-payment-page #une-centrale-peut-elle-piloter-le-lavage-et-le-séchage hr { display: none !important; } } /* ---------------- TABLETTE ---------------- */ @media (min-width: 768px) and (max-width: 1100px) { #sovematic-payment-page #une-centrale-peut-elle-piloter-le-lavage-et-le-séchage > .sove-container { width: calc(100% - 48px) !important; } #sovematic-payment-page #une-centrale-peut-elle-piloter-le-lavage-et-le-séchage h2 { max-width: 900px !important; margin: 0 auto 18px !important; text-align: center !important; color: #fff !important; font-size: clamp(2.45rem, 5.5vw, 3.9rem) !important; line-height: .98 !important; } #sovematic-payment-page #une-centrale-peut-elle-piloter-le-lavage-et-le-séchage h2::before { content: "PARCOURS CENTRALISÉ"; display: table !important; margin: 0 auto 12px !important; padding: 8px 12px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 8px !important; font-weight: 950 !important; letter-spacing: .10em !important; } #sovematic-payment-page #une-centrale-peut-elle-piloter-le-lavage-et-le-séchage > .sove-container > p { max-width: 860px !important; margin: 0 auto 10px !important; text-align: center !important; color: rgba(255,255,255,.84) !important; } #sovematic-payment-page #une-centrale-peut-elle-piloter-le-lavage-et-le-séchage > .sove-container > p:nth-of-type(1) { width: fit-content !important; padding: 9px 14px !important; border-radius: 999px !important; background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.10) !important; color: #fff !important; font-weight: 850 !important; } #sovematic-payment-page #une-centrale-peut-elle-piloter-le-lavage-et-le-séchage > .sove-container > ol { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px !important; max-width: 820px !important; margin: 10px auto !important; padding: 0 !important; list-style: none !important; counter-reset: sove-steps !important; } #sovematic-payment-page #une-centrale-peut-elle-piloter-le-lavage-et-le-séchage > .sove-container > ol > li { position: relative !important; margin: 0 !important; padding: 16px 16px 16px 56px !important; min-height: 94px !important; border: 1px solid rgba(255,255,255,.09) !important; border-radius: 18px !important; background: rgba(255,255,255,.07) !important; color: #fff !important; } #sovematic-payment-page #une-centrale-peut-elle-piloter-le-lavage-et-le-séchage > .sove-container > ol > li::before { counter-increment: sove-steps !important; content: "0" counter(sove-steps) !important; position: absolute !important; left: 16px !important; top: 16px !important; width: 28px !important; height: 28px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 9px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 11px !important; font-weight: 950 !important; } #sovematic-payment-page #une-centrale-peut-elle-piloter-le-lavage-et-le-séchage .sove-flow-diagram { max-width: 900px !important; margin: 14px auto 0 !important; padding: 22px 18px !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 22px !important; background: radial-gradient(circle at 100% 0%, rgba(31,78,95,.18), transparent 38%), linear-gradient(135deg, rgba(10,14,16,.92), rgba(16,31,39,.95)) !important; color: #F3F7F9 !important; overflow: auto !important; box-shadow: 0 22px 52px rgba(0,0,0,.22) !important; } #sovematic-payment-page #une-centrale-peut-elle-piloter-le-lavage-et-le-séchage .sove-flow-diagram code { display: block !important; white-space: pre !important; text-align: center !important; font-size: 14px !important; line-height: 1.65 !important; } #sovematic-payment-page #une-centrale-peut-elle-piloter-le-lavage-et-le-séchage > .sove-container > p:last-of-type { max-width: 860px !important; margin: 10px auto 0 !important; padding: 14px 16px !important; border-radius: 18px !important; background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.08) !important; color: #fff !important; text-align: center !important; font-weight: 760 !important; } #sovematic-payment-page #une-centrale-peut-elle-piloter-le-lavage-et-le-séchage hr { display: none !important; } } /* ---------------- SMARTPHONE ---------------- */ @media (max-width: 767px) { #sovematic-payment-page #une-centrale-peut-elle-piloter-le-lavage-et-le-séchage { padding: 56px 0 !important; } #sovematic-payment-page #une-centrale-peut-elle-piloter-le-lavage-et-le-séchage > .sove-container { width: calc(100% - 28px) !important; } #sovematic-payment-page #une-centrale-peut-elle-piloter-le-lavage-et-le-séchage h2 { margin: 0 auto 16px !important; text-align: center !important; color: #fff !important; font-size: clamp(2rem, 8.9vw, 2.9rem) !important; line-height: 1 !important; letter-spacing: -.04em !important; } #sovematic-payment-page #une-centrale-peut-elle-piloter-le-lavage-et-le-séchage h2::before { content: "LAVAGE + SÉCHAGE"; display: table !important; margin: 0 auto 10px !important; padding: 7px 10px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 8px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .10em !important; } #sovematic-payment-page #une-centrale-peut-elle-piloter-le-lavage-et-le-séchage > .sove-container > p { margin: 0 0 10px !important; text-align: center !important; color: rgba(255,255,255,.86) !important; font-size: 14px !important; line-height: 1.58 !important; } #sovematic-payment-page #une-centrale-peut-elle-piloter-le-lavage-et-le-séchage > .sove-container > p:nth-of-type(1) { width: fit-content !important; margin: 0 auto 6px !important; padding: 9px 14px !important; border-radius: 999px !important; background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.10) !important; color: #fff !important; font-weight: 850 !important; } #sovematic-payment-page #une-centrale-peut-elle-piloter-le-lavage-et-le-séchage > .sove-container > ol { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; margin: 10px 0 !important; padding: 0 !important; list-style: none !important; counter-reset: sove-steps !important; } #sovematic-payment-page #une-centrale-peut-elle-piloter-le-lavage-et-le-séchage > .sove-container > ol > li { position: relative !important; margin: 0 !important; padding: 15px 14px 15px 52px !important; border: 1px solid rgba(255,255,255,.09) !important; border-radius: 18px !important; background: rgba(255,255,255,.07) !important; color: #fff !important; text-align: left !important; line-height: 1.52 !important; } #sovematic-payment-page #une-centrale-peut-elle-piloter-le-lavage-et-le-séchage > .sove-container > ol > li::before { counter-increment: sove-steps !important; content: "0" counter(sove-steps) !important; position: absolute !important; left: 14px !important; top: 14px !important; width: 26px !important; height: 26px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 8px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 10px !important; font-weight: 950 !important; } #sovematic-payment-page #une-centrale-peut-elle-piloter-le-lavage-et-le-séchage .sove-flow-diagram { margin: 12px 0 0 !important; padding: 16px 12px !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 18px !important; background: radial-gradient(circle at 100% 0%, rgba(31,78,95,.18), transparent 38%), linear-gradient(135deg, rgba(10,14,16,.92), rgba(16,31,39,.95)) !important; color: #F3F7F9 !important; overflow: auto !important; box-shadow: 0 18px 42px rgba(0,0,0,.22) !important; } #sovematic-payment-page #une-centrale-peut-elle-piloter-le-lavage-et-le-séchage .sove-flow-diagram code { display: block !important; white-space: pre !important; text-align: left !important; font-size: 11.5px !important; line-height: 1.6 !important; } #sovematic-payment-page #une-centrale-peut-elle-piloter-le-lavage-et-le-séchage > .sove-container > p:last-of-type { margin: 10px 0 0 !important; padding: 13px 12px !important; border-radius: 16px !important; background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.08) !important; color: #fff !important; text-align: center !important; font-size: 13.5px !important; line-height: 1.56 !important; font-weight: 760 !important; } #sovematic-payment-page #une-centrale-peut-elle-piloter-le-lavage-et-le-séchage hr { display: none !important; } }/* ========================================================= GESTION À DISTANCE — VERSION PREMIUM SUR FOND CLAIR SPECTACULAIRE / RESPONSIVE / SANS CHANGER LE HTML ========================================================= */ #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement { position: relative !important; overflow: hidden !important; padding: clamp(82px, 8vw, 124px) 0 !important; background: radial-gradient(circle at 0% 0%, rgba(222,7,45,.05), transparent 25%), radial-gradient(circle at 100% 100%, rgba(31,78,95,.07), transparent 30%), linear-gradient(180deg, #ffffff 0%, #f7f9fb 100%) !important; } #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement::before { content: "" !important; position: absolute !important; inset: 0 !important; background: linear-gradient(rgba(17,18,20,.02) 1px, transparent 1px), linear-gradient(90deg, rgba(17,18,20,.02) 1px, transparent 1px) !important; background-size: 42px 42px !important; opacity: .28 !important; pointer-events: none !important; } #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement > .sove-container { position: relative !important; z-index: 2 !important; width: min(1320px, calc(100% - 72px)) !important; max-width: 1320px !important; margin: 0 auto !important; } /* ========================================================= IMAGE ========================================================= */ #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement .sove-inline-image { position: relative !important; overflow: hidden !important; margin: 0 !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 30px !important; background: linear-gradient(135deg, #fdfdfd 0%, #f5f8fa 100%) !important; box-shadow: 0 28px 70px rgba(17,18,20,.08), inset 0 1px 0 rgba(255,255,255,.65) !important; } #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement .sove-inline-image img { display: block !important; width: 100% !important; aspect-ratio: 16 / 10 !important; object-fit: cover !important; border-radius: 30px 30px 0 0 !important; } #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement .sove-inline-image figcaption { margin: 0 !important; padding: 12px 16px !important; border-top: 1px solid rgba(17,18,20,.06) !important; background: rgba(255,255,255,.8) !important; color: #687780 !important; font-size: 12px !important; line-height: 1.4 !important; } /* ========================================================= DESKTOP ========================================================= */ @media (min-width: 1101px) { #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement > .sove-container { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)) !important; gap: 18px !important; align-items: start !important; } /* titre */ #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement h2 { grid-column: 1 / 7 !important; max-width: 720px !important; margin: 0 0 8px !important; color: #111214 !important; font-size: clamp(3rem, 4.1vw, 4.9rem) !important; line-height: .95 !important; letter-spacing: -.055em !important; text-wrap: balance !important; } #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement h2::before { content: "EXPLOITATION • GESTION À DISTANCE"; display: table !important; margin: 0 0 14px !important; padding: 8px 13px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 9px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .10em !important; box-shadow: 0 14px 28px rgba(222,7,45,.18) !important; } /* image */ #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement .sove-inline-image { grid-column: 8 / -1 !important; grid-row: 1 / span 6 !important; align-self: start !important; } /* paragraphs d'intro */ #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement > .sove-container > p:nth-of-type(1), #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement > .sove-container > p:nth-of-type(2), #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement > .sove-container > p:nth-of-type(3), #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement > .sove-container > p:nth-of-type(4) { grid-column: 1 / 7 !important; max-width: 700px !important; margin: 0 !important; color: #4E5D64 !important; font-size: 15px !important; line-height: 1.68 !important; } #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement > .sove-container > p strong { color: #111214 !important; } /* liste fonctionnalités */ #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement > .sove-container > ul:first-of-type { grid-column: 1 / 7 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; width: 100% !important; max-width: 720px !important; margin: 6px 0 0 !important; padding: 0 !important; list-style: none !important; } #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement > .sove-container > ul:first-of-type > li { position: relative !important; display: flex !important; align-items: center !important; min-height: 92px !important; margin: 0 !important; padding: 18px 16px 18px 58px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 22px !important; background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,248,250,.98)) !important; box-shadow: 0 18px 40px rgba(17,18,20,.05) !important; color: #203138 !important; line-height: 1.5 !important; } #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement > .sove-container > ul:first-of-type > li::before { content: "✓" !important; position: absolute !important; left: 18px !important; top: 50% !important; transform: translateY(-50%) !important; width: 28px !important; height: 28px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 10px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 12px !important; line-height: 1 !important; font-weight: 950 !important; box-shadow: 0 10px 22px rgba(222,7,45,.18) !important; } /* bloc "ce que cela change" */ #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement section.level3#ce-que-cela-change-concrètement { grid-column: 1 / -1 !important; display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)) !important; gap: 16px !important; margin-top: 18px !important; padding: 30px 28px 26px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 32px !important; background: radial-gradient(circle at 100% 0%, rgba(31,78,95,.09), transparent 28%), linear-gradient(180deg, #ffffff 0%, #f5f8fa 100%) !important; box-shadow: 0 24px 60px rgba(17,18,20,.07), inset 0 1px 0 rgba(255,255,255,.7) !important; } #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement section.level3#ce-que-cela-change-concrètement h3 { grid-column: 1 / -1 !important; margin: 0 0 4px !important; text-align: center !important; color: #111214 !important; font-size: clamp(2rem, 2.4vw, 2.8rem) !important; line-height: 1.04 !important; letter-spacing: -.03em !important; } /* label AVANT */ #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement section.level3#ce-que-cela-change-concrètement > p:nth-of-type(1) { grid-column: 1 / 7 !important; margin: 0 !important; padding: 10px 14px !important; width: fit-content !important; border-radius: 999px !important; background: rgba(17,18,20,.06) !important; color: #111214 !important; font-size: 10px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .08em !important; text-transform: uppercase !important; } /* bloc AVANT */ #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement section.level3#ce-que-cela-change-concrètement > p:nth-of-type(2) { grid-column: 1 / 7 !important; margin: 0 !important; padding: 28px 24px !important; border-radius: 24px !important; background: linear-gradient(135deg, #111315, #1B2328) !important; color: #fff !important; font-size: 19px !important; line-height: 1.5 !important; font-weight: 850 !important; text-align: center !important; box-shadow: 0 20px 45px rgba(17,18,20,.16) !important; } /* label APRES */ #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement section.level3#ce-que-cela-change-concrètement > p:nth-of-type(3) { grid-column: 7 / -1 !important; margin: 0 !important; justify-self: start !important; padding: 10px 14px !important; width: fit-content !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 10px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .08em !important; text-transform: uppercase !important; box-shadow: 0 12px 24px rgba(222,7,45,.18) !important; } /* bloc APRES */ #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement section.level3#ce-que-cela-change-concrètement > p:nth-of-type(4) { grid-column: 7 / -1 !important; margin: 0 !important; padding: 28px 24px !important; border-radius: 24px !important; background: radial-gradient(circle at 100% 0%, rgba(31,78,95,.18), transparent 40%), linear-gradient(135deg, #ffffff 0%, #eef5f7 100%) !important; border: 1px solid rgba(31,78,95,.10) !important; color: #153847 !important; font-size: 19px !important; line-height: 1.5 !important; font-weight: 850 !important; text-align: center !important; box-shadow: 0 20px 45px rgba(17,18,20,.06) !important; } /* conclusion */ #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement section.level3#ce-que-cela-change-concrètement > p:nth-of-type(5) { grid-column: 2 / 12 !important; margin: 4px auto 0 !important; max-width: 900px !important; text-align: center !important; color: #4E5D64 !important; font-size: 15px !important; line-height: 1.62 !important; } #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement section.level3#ce-que-cela-change-concrètement > p:nth-of-type(6) { grid-column: 2 / 12 !important; margin: 0 auto !important; max-width: 940px !important; padding: 16px 18px !important; border-radius: 20px !important; background: rgba(31,78,95,.07) !important; color: #1F4E5F !important; text-align: center !important; font-size: 15px !important; line-height: 1.58 !important; font-weight: 760 !important; } #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement section.level3#ce-que-cela-change-concrètement hr { display: none !important; } } /* ========================================================= TABLETTE ========================================================= */ @media (min-width: 768px) and (max-width: 1100px) { #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement > .sove-container { width: calc(100% - 48px) !important; } #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement h2 { max-width: 900px !important; margin: 0 auto 18px !important; text-align: center !important; color: #111214 !important; font-size: clamp(2.45rem, 5.2vw, 3.8rem) !important; line-height: .98 !important; } #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement h2::before { content: "EXPLOITATION • GESTION À DISTANCE"; display: table !important; margin: 0 auto 12px !important; padding: 8px 12px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 8px !important; font-weight: 950 !important; letter-spacing: .10em !important; } #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement .sove-inline-image { margin: 0 auto 18px !important; max-width: 920px !important; } #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement > .sove-container > p { max-width: 860px !important; margin: 0 auto 10px !important; text-align: center !important; color: #4E5D64 !important; } #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement > .sove-container > ul:first-of-type { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; max-width: 920px !important; margin: 14px auto 0 !important; padding: 0 !important; list-style: none !important; } #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement > .sove-container > ul:first-of-type > li { position: relative !important; min-height: 88px !important; margin: 0 !important; padding: 16px 14px 16px 52px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 18px !important; background: #fff !important; box-shadow: 0 14px 32px rgba(17,18,20,.05) !important; } #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement > .sove-container > ul:first-of-type > li::before { content: "✓" !important; position: absolute !important; left: 14px !important; top: 50% !important; transform: translateY(-50%) !important; width: 26px !important; height: 26px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 9px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 11px !important; font-weight: 950 !important; } #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement section.level3#ce-que-cela-change-concrètement { margin: 18px auto 0 !important; padding: 24px 18px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 26px !important; background: radial-gradient(circle at 100% 0%, rgba(31,78,95,.09), transparent 28%), linear-gradient(180deg, #ffffff 0%, #f5f8fa 100%) !important; box-shadow: 0 20px 48px rgba(17,18,20,.06) !important; } #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement section.level3#ce-que-cela-change-concrètement h3 { margin: 0 0 16px !important; text-align: center !important; color: #111214 !important; } #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement section.level3#ce-que-cela-change-concrètement > p:nth-of-type(1), #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement section.level3#ce-que-cela-change-concrètement > p:nth-of-type(3) { width: fit-content !important; margin: 0 auto 10px !important; padding: 9px 12px !important; border-radius: 999px !important; font-size: 9px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .08em !important; text-transform: uppercase !important; } #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement section.level3#ce-que-cela-change-concrètement > p:nth-of-type(1) { background: rgba(17,18,20,.06) !important; color: #111214 !important; } #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement section.level3#ce-que-cela-change-concrètement > p:nth-of-type(3) { background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; } #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement section.level3#ce-que-cela-change-concrètement > p:nth-of-type(2), #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement section.level3#ce-que-cela-change-concrètement > p:nth-of-type(4) { margin: 0 0 14px !important; padding: 20px 16px !important; border-radius: 20px !important; text-align: center !important; font-size: 17px !important; line-height: 1.52 !important; font-weight: 850 !important; } #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement section.level3#ce-que-cela-change-concrètement > p:nth-of-type(2) { background: linear-gradient(135deg, #111315, #1B2328) !important; color: #fff !important; box-shadow: 0 18px 38px rgba(17,18,20,.14) !important; } #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement section.level3#ce-que-cela-change-concrètement > p:nth-of-type(4) { background: linear-gradient(135deg, #ffffff 0%, #eef5f7 100%) !important; border: 1px solid rgba(31,78,95,.10) !important; color: #153847 !important; box-shadow: 0 18px 38px rgba(17,18,20,.05) !important; } #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement section.level3#ce-que-cela-change-concrètement > p:nth-of-type(5) { margin: 0 0 10px !important; text-align: center !important; color: #4E5D64 !important; } #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement section.level3#ce-que-cela-change-concrètement > p:nth-of-type(6) { margin: 0 !important; padding: 14px 14px !important; border-radius: 18px !important; background: rgba(31,78,95,.07) !important; color: #1F4E5F !important; text-align: center !important; font-weight: 760 !important; } #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement section.level3#ce-que-cela-change-concrètement hr { display: none !important; } } /* ========================================================= SMARTPHONE ========================================================= */ @media (max-width: 767px) { #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement { padding: 56px 0 !important; } #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement > .sove-container { width: calc(100% - 28px) !important; } #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement h2 { margin: 0 auto 16px !important; text-align: center !important; color: #111214 !important; font-size: clamp(2rem, 8.8vw, 2.9rem) !important; line-height: 1 !important; letter-spacing: -.04em !important; } #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement h2::before { content: "GESTION À DISTANCE"; display: table !important; margin: 0 auto 10px !important; padding: 7px 10px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 8px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .10em !important; } #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement .sove-inline-image { margin: 0 0 16px !important; border-radius: 22px !important; } #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement .sove-inline-image img { border-radius: 22px 22px 0 0 !important; } #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement > .sove-container > p { margin: 0 0 10px !important; text-align: center !important; color: #4E5D64 !important; font-size: 14px !important; line-height: 1.58 !important; } #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement > .sove-container > ul:first-of-type { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; margin: 14px 0 0 !important; padding: 0 !important; list-style: none !important; } #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement > .sove-container > ul:first-of-type > li { position: relative !important; margin: 0 !important; padding: 15px 12px 15px 48px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 16px !important; background: #fff !important; box-shadow: 0 12px 26px rgba(17,18,20,.05) !important; text-align: left !important; line-height: 1.5 !important; } #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement > .sove-container > ul:first-of-type > li::before { content: "✓" !important; position: absolute !important; left: 12px !important; top: 50% !important; transform: translateY(-50%) !important; width: 24px !important; height: 24px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 8px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 10px !important; font-weight: 950 !important; } #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement section.level3#ce-que-cela-change-concrètement { margin: 18px 0 0 !important; padding: 20px 14px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 22px !important; background: radial-gradient(circle at 100% 0%, rgba(31,78,95,.09), transparent 28%), linear-gradient(180deg, #ffffff 0%, #f5f8fa 100%) !important; box-shadow: 0 18px 40px rgba(17,18,20,.06) !important; } #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement section.level3#ce-que-cela-change-concrètement h3 { margin: 0 0 14px !important; text-align: center !important; color: #111214 !important; font-size: clamp(1.55rem, 7vw, 2.1rem) !important; line-height: 1.08 !important; } #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement section.level3#ce-que-cela-change-concrètement > p:nth-of-type(1), #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement section.level3#ce-que-cela-change-concrètement > p:nth-of-type(3) { width: fit-content !important; margin: 0 auto 10px !important; padding: 8px 10px !important; border-radius: 999px !important; font-size: 8px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .08em !important; text-transform: uppercase !important; } #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement section.level3#ce-que-cela-change-concrètement > p:nth-of-type(1) { background: rgba(17,18,20,.06) !important; color: #111214 !important; } #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement section.level3#ce-que-cela-change-concrètement > p:nth-of-type(3) { background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; } #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement section.level3#ce-que-cela-change-concrètement > p:nth-of-type(2), #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement section.level3#ce-que-cela-change-concrètement > p:nth-of-type(4) { margin: 0 0 12px !important; padding: 18px 14px !important; border-radius: 18px !important; text-align: center !important; font-size: 15px !important; line-height: 1.56 !important; font-weight: 850 !important; } #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement section.level3#ce-que-cela-change-concrètement > p:nth-of-type(2) { background: linear-gradient(135deg, #111315, #1B2328) !important; color: #fff !important; box-shadow: 0 16px 34px rgba(17,18,20,.14) !important; } #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement section.level3#ce-que-cela-change-concrètement > p:nth-of-type(4) { background: linear-gradient(135deg, #ffffff 0%, #eef5f7 100%) !important; border: 1px solid rgba(31,78,95,.10) !important; color: #153847 !important; box-shadow: 0 16px 34px rgba(17,18,20,.05) !important; } #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement section.level3#ce-que-cela-change-concrètement > p:nth-of-type(5) { margin: 0 0 10px !important; text-align: center !important; color: #4E5D64 !important; font-size: 13.5px !important; line-height: 1.56 !important; } #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement section.level3#ce-que-cela-change-concrètement > p:nth-of-type(6) { margin: 0 !important; padding: 13px 12px !important; border-radius: 16px !important; background: rgba(31,78,95,.07) !important; color: #1F4E5F !important; text-align: center !important; font-size: 13.5px !important; line-height: 1.56 !important; font-weight: 760 !important; } #sovematic-payment-page #gestion-à-distance-pilotez-votre-laverie-plus-facilement section.level3#ce-que-cela-change-concrètement hr { display: none !important; } }/* ========================================================= SUIVRE L’ACTIVITÉ DE VOTRE LAVERIE VERSION PREMIUM / FOND CLAIR / RESPONSIVE ========================================================= */ #sovematic-payment-page #suivre-lactivité-de-votre-laverie { position: relative !important; overflow: hidden !important; padding: clamp(82px, 8vw, 124px) 0 !important; background: radial-gradient(circle at 0% 0%, rgba(222,7,45,.045), transparent 24%), radial-gradient(circle at 100% 100%, rgba(31,78,95,.07), transparent 30%), linear-gradient(180deg, #ffffff 0%, #f7f9fb 100%) !important; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie::before { content: "" !important; position: absolute !important; inset: 0 !important; background: linear-gradient(rgba(17,18,20,.02) 1px, transparent 1px), linear-gradient(90deg, rgba(17,18,20,.02) 1px, transparent 1px) !important; background-size: 42px 42px !important; opacity: .24 !important; pointer-events: none !important; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container { position: relative !important; z-index: 2 !important; width: min(1320px, calc(100% - 72px)) !important; max-width: 1320px !important; margin: 0 auto !important; } /* ========================================================= IMAGE ========================================================= */ #sovematic-payment-page #suivre-lactivité-de-votre-laverie .sove-inline-image { position: relative !important; overflow: hidden !important; margin: 0 !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 30px !important; background: linear-gradient(135deg, #ffffff 0%, #f5f8fa 100%) !important; box-shadow: 0 26px 64px rgba(17,18,20,.08), inset 0 1px 0 rgba(255,255,255,.7) !important; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie .sove-inline-image img { display: block !important; width: 100% !important; aspect-ratio: 16 / 10 !important; object-fit: cover !important; border-radius: 30px 30px 0 0 !important; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie .sove-inline-image figcaption { margin: 0 !important; padding: 12px 16px !important; border-top: 1px solid rgba(17,18,20,.06) !important; background: rgba(255,255,255,.82) !important; color: #687780 !important; font-size: 12px !important; line-height: 1.4 !important; } /* ========================================================= DESKTOP ========================================================= */ @media (min-width: 1101px) { #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)) !important; gap: 18px !important; align-items: start !important; } /* titre */ #sovematic-payment-page #suivre-lactivité-de-votre-laverie h2 { grid-column: 1 / 7 !important; max-width: 760px !important; margin: 0 0 8px !important; color: #111214 !important; font-size: clamp(3rem, 4.2vw, 5rem) !important; line-height: .95 !important; letter-spacing: -.055em !important; text-wrap: balance !important; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie h2::before { content: "AUDIT • STATISTIQUES • PILOTAGE"; display: table !important; margin: 0 0 14px !important; padding: 8px 13px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 9px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .10em !important; box-shadow: 0 14px 28px rgba(222,7,45,.18) !important; } /* image */ #sovematic-payment-page #suivre-lactivité-de-votre-laverie .sove-inline-image { grid-column: 8 / -1 !important; grid-row: 1 / span 5 !important; align-self: start !important; } /* intro */ #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container > p:nth-of-type(1), #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container > p:nth-of-type(2), #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container > p:nth-of-type(3) { grid-column: 1 / 7 !important; max-width: 700px !important; margin: 0 !important; color: #4E5D64 !important; font-size: 15px !important; line-height: 1.68 !important; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container > p strong { color: #111214 !important; } /* LISTE 1 : fonctions */ #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container > ul:first-of-type { grid-column: 1 / 7 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; max-width: 720px !important; margin: 6px 0 0 !important; padding: 0 !important; list-style: none !important; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container > ul:first-of-type > li { position: relative !important; margin: 0 !important; min-height: 108px !important; padding: 18px 16px 16px 18px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 24px !important; background: radial-gradient(circle at 100% 0%, rgba(31,78,95,.08), transparent 42%), linear-gradient(180deg, #ffffff 0%, #f8fbfc 100%) !important; box-shadow: 0 16px 38px rgba(17,18,20,.05), inset 0 1px 0 rgba(255,255,255,.7) !important; color: #203138 !important; line-height: 1.5 !important; font-weight: 650 !important; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container > ul:first-of-type > li::before { display: block !important; margin: 0 0 14px !important; padding: 8px 11px !important; width: fit-content !important; border-radius: 999px !important; background: rgba(31,78,95,.08) !important; color: #1F4E5F !important; font-size: 10px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .08em !important; text-transform: uppercase !important; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container > ul:first-of-type > li:nth-child(1)::before { content: "WEB"; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container > ul:first-of-type > li:nth-child(2)::before { content: "FINANCE"; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container > ul:first-of-type > li:nth-child(3)::before { content: "STATISTIQUES"; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container > ul:first-of-type > li:nth-child(4)::before { content: "ALERTES"; } /* sous-titre */ #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container > p:nth-of-type(4) { grid-column: 1 / -1 !important; margin: 18px 0 4px !important; text-align: center !important; color: #111214 !important; font-size: clamp(1.6rem, 2vw, 2.15rem) !important; line-height: 1.08 !important; letter-spacing: -.025em !important; font-weight: 900 !important; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container > p:nth-of-type(4)::before { content: "CE QUE VOUS POUVEZ LIRE"; display: table !important; margin: 0 auto 10px !important; padding: 8px 12px !important; border-radius: 999px !important; background: rgba(17,18,20,.06) !important; color: #111214 !important; font-size: 9px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .09em !important; } /* LISTE 2 : bénéfices / lectures */ #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container > ul:last-of-type { grid-column: 2 / 12 !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 14px !important; max-width: 1080px !important; width: 100% !important; margin: 0 auto !important; padding: 0 !important; list-style: none !important; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container > ul:last-of-type > li { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; min-height: 180px !important; margin: 0 !important; padding: 22px 18px !important; text-align: center !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 26px !important; background: radial-gradient(circle at 100% 0%, rgba(222,7,45,.05), transparent 36%), linear-gradient(180deg, #ffffff 0%, #f6f9fb 100%) !important; box-shadow: 0 22px 50px rgba(17,18,20,.06), inset 0 1px 0 rgba(255,255,255,.8) !important; color: #173847 !important; font-size: 17px !important; line-height: 1.45 !important; font-weight: 760 !important; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container > ul:last-of-type > li::before { content: "" !important; position: absolute !important; top: 18px !important; left: 50% !important; transform: translateX(-50%) !important; width: 42px !important; height: 4px !important; border-radius: 999px !important; background: linear-gradient(90deg, #DE072D 0%, #1F4E5F 100%) !important; } /* conclusion */ #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container > p:last-of-type { grid-column: 2 / 12 !important; margin: 8px auto 0 !important; max-width: 980px !important; padding: 18px 20px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 22px !important; background: radial-gradient(circle at 100% 0%, rgba(31,78,95,.10), transparent 34%), linear-gradient(135deg, #111315 0%, #183441 100%) !important; color: #fff !important; text-align: center !important; font-size: 15px !important; line-height: 1.58 !important; font-weight: 760 !important; box-shadow: 0 22px 52px rgba(17,18,20,.14) !important; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container > p:last-of-type strong { color: #fff !important; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie hr { display: none !important; } } /* ========================================================= TABLETTE ========================================================= */ @media (min-width: 768px) and (max-width: 1100px) { #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container { width: calc(100% - 48px) !important; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie h2 { max-width: 900px !important; margin: 0 auto 18px !important; text-align: center !important; color: #111214 !important; font-size: clamp(2.45rem, 5.2vw, 3.8rem) !important; line-height: .98 !important; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie h2::before { content: "AUDIT • STATISTIQUES • PILOTAGE"; display: table !important; margin: 0 auto 12px !important; padding: 8px 12px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 8px !important; font-weight: 950 !important; letter-spacing: .10em !important; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie .sove-inline-image { max-width: 920px !important; margin: 0 auto 18px !important; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container > p { max-width: 860px !important; margin: 0 auto 10px !important; text-align: center !important; color: #4E5D64 !important; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container > ul:first-of-type { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; max-width: 920px !important; margin: 14px auto 0 !important; padding: 0 !important; list-style: none !important; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container > ul:first-of-type > li { margin: 0 !important; min-height: 100px !important; padding: 16px 14px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 20px !important; background: #fff !important; box-shadow: 0 14px 32px rgba(17,18,20,.05) !important; text-align: center !important; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container > ul:first-of-type > li::before { display: table !important; margin: 0 auto 12px !important; padding: 8px 11px !important; border-radius: 999px !important; background: rgba(31,78,95,.08) !important; color: #1F4E5F !important; font-size: 9px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .08em !important; text-transform: uppercase !important; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container > ul:first-of-type > li:nth-child(1)::before { content: "WEB"; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container > ul:first-of-type > li:nth-child(2)::before { content: "FINANCE"; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container > ul:first-of-type > li:nth-child(3)::before { content: "STATISTIQUES"; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container > ul:first-of-type > li:nth-child(4)::before { content: "ALERTES"; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container > p:nth-of-type(4) { margin: 18px auto 10px !important; text-align: center !important; color: #111214 !important; font-size: clamp(1.5rem, 3.4vw, 2rem) !important; font-weight: 900 !important; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container > p:nth-of-type(4)::before { content: "CE QUE VOUS POUVEZ LIRE"; display: table !important; margin: 0 auto 10px !important; padding: 8px 12px !important; border-radius: 999px !important; background: rgba(17,18,20,.06) !important; color: #111214 !important; font-size: 8px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .09em !important; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container > ul:last-of-type { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; max-width: 920px !important; margin: 0 auto !important; padding: 0 !important; list-style: none !important; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container > ul:last-of-type > li { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; min-height: 150px !important; margin: 0 !important; padding: 22px 16px !important; text-align: center !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 22px !important; background: linear-gradient(180deg, #ffffff 0%, #f6f9fb 100%) !important; box-shadow: 0 18px 40px rgba(17,18,20,.05) !important; color: #173847 !important; font-size: 16px !important; line-height: 1.45 !important; font-weight: 760 !important; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container > ul:last-of-type > li::before { content: "" !important; position: absolute !important; top: 16px !important; left: 50% !important; transform: translateX(-50%) !important; width: 40px !important; height: 4px !important; border-radius: 999px !important; background: linear-gradient(90deg, #DE072D 0%, #1F4E5F 100%) !important; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container > p:last-of-type { max-width: 920px !important; margin: 12px auto 0 !important; padding: 16px 16px !important; border-radius: 20px !important; background: linear-gradient(135deg, #111315 0%, #183441 100%) !important; color: #fff !important; text-align: center !important; font-weight: 760 !important; box-shadow: 0 20px 46px rgba(17,18,20,.12) !important; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie hr { display: none !important; } } /* ========================================================= SMARTPHONE ========================================================= */ @media (max-width: 767px) { #sovematic-payment-page #suivre-lactivité-de-votre-laverie { padding: 56px 0 !important; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container { width: calc(100% - 28px) !important; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie h2 { margin: 0 auto 16px !important; text-align: center !important; color: #111214 !important; font-size: clamp(2rem, 8.8vw, 2.9rem) !important; line-height: 1 !important; letter-spacing: -.04em !important; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie h2::before { content: "PILOTAGE • ACTIVITÉ"; display: table !important; margin: 0 auto 10px !important; padding: 7px 10px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 8px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .10em !important; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie .sove-inline-image { margin: 0 0 16px !important; border-radius: 22px !important; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie .sove-inline-image img { border-radius: 22px 22px 0 0 !important; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container > p { margin: 0 0 10px !important; text-align: center !important; color: #4E5D64 !important; font-size: 14px !important; line-height: 1.58 !important; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container > ul:first-of-type { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; margin: 14px 0 0 !important; padding: 0 !important; list-style: none !important; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container > ul:first-of-type > li { margin: 0 !important; padding: 15px 12px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 16px !important; background: #fff !important; box-shadow: 0 12px 26px rgba(17,18,20,.05) !important; text-align: center !important; line-height: 1.5 !important; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container > ul:first-of-type > li::before { display: table !important; margin: 0 auto 10px !important; padding: 7px 10px !important; border-radius: 999px !important; background: rgba(31,78,95,.08) !important; color: #1F4E5F !important; font-size: 8px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .08em !important; text-transform: uppercase !important; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container > ul:first-of-type > li:nth-child(1)::before { content: "WEB"; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container > ul:first-of-type > li:nth-child(2)::before { content: "FINANCE"; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container > ul:first-of-type > li:nth-child(3)::before { content: "STATISTIQUES"; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container > ul:first-of-type > li:nth-child(4)::before { content: "ALERTES"; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container > p:nth-of-type(4) { margin: 18px auto 10px !important; text-align: center !important; color: #111214 !important; font-size: clamp(1.45rem, 7vw, 2rem) !important; line-height: 1.08 !important; font-weight: 900 !important; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container > p:nth-of-type(4)::before { content: "CE QUE VOUS POUVEZ LIRE"; display: table !important; margin: 0 auto 10px !important; padding: 7px 10px !important; border-radius: 999px !important; background: rgba(17,18,20,.06) !important; color: #111214 !important; font-size: 8px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .09em !important; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container > ul:last-of-type { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container > ul:last-of-type > li { position: relative !important; margin: 0 !important; padding: 20px 14px !important; text-align: center !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 18px !important; background: linear-gradient(180deg, #ffffff 0%, #f6f9fb 100%) !important; box-shadow: 0 14px 30px rgba(17,18,20,.05) !important; color: #173847 !important; font-size: 15px !important; line-height: 1.5 !important; font-weight: 760 !important; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container > ul:last-of-type > li::before { content: "" !important; display: block !important; width: 38px !important; height: 4px !important; margin: 0 auto 12px !important; border-radius: 999px !important; background: linear-gradient(90deg, #DE072D 0%, #1F4E5F 100%) !important; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie > .sove-container > p:last-of-type { margin: 12px 0 0 !important; padding: 14px 12px !important; border-radius: 16px !important; background: linear-gradient(135deg, #111315 0%, #183441 100%) !important; color: #fff !important; text-align: center !important; font-size: 13.5px !important; line-height: 1.56 !important; font-weight: 760 !important; box-shadow: 0 18px 40px rgba(17,18,20,.12) !important; } #sovematic-payment-page #suivre-lactivité-de-votre-laverie hr { display: none !important; } }/* ========================================================= JUSQU’À COMBIEN DE MACHINES UNE CENTRALE TOUCH'N PAY PEUT-ELLE PILOTER ? VERSION PREMIUM / FOND CLAIR / RESPONSIVE ========================================================= */ #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter { position: relative !important; overflow: hidden !important; padding: clamp(82px, 8vw, 118px) 0 !important; background: radial-gradient(circle at 0% 0%, rgba(222,7,45,.045), transparent 24%), radial-gradient(circle at 100% 100%, rgba(31,78,95,.07), transparent 30%), linear-gradient(180deg, #ffffff 0%, #f7f9fb 100%) !important; } #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter::before { content: "" !important; position: absolute !important; inset: 0 !important; background: linear-gradient(rgba(17,18,20,.02) 1px, transparent 1px), linear-gradient(90deg, rgba(17,18,20,.02) 1px, transparent 1px) !important; background-size: 42px 42px !important; opacity: .24 !important; pointer-events: none !important; } #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter > .sove-container { position: relative !important; z-index: 2 !important; width: min(1320px, calc(100% - 72px)) !important; max-width: 1320px !important; margin: 0 auto !important; } /* ========================================================= DESKTOP ========================================================= */ @media (min-width: 1101px) { #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter > .sove-container { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)) !important; gap: 18px !important; align-items: start !important; } /* titre */ #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter h2 { grid-column: 1 / 8 !important; max-width: 820px !important; margin: 0 !important; color: #111214 !important; font-size: clamp(3rem, 4.1vw, 4.85rem) !important; line-height: .95 !important; letter-spacing: -.055em !important; text-wrap: balance !important; } #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter h2::before { content: "CAPACITÉ • ÉVOLUTIVITÉ • ANTICIPATION"; display: table !important; margin: 0 0 14px !important; padding: 8px 13px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 9px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .10em !important; box-shadow: 0 14px 28px rgba(222,7,45,.18) !important; } /* carte KPI : jusqu’à 32 machines */ #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter > .sove-container > p:nth-of-type(1) { grid-column: 8 / -1 !important; grid-row: 1 / span 2 !important; position: relative !important; display: flex !important; flex-direction: column !important; justify-content: center !important; min-height: 320px !important; margin: 0 !important; padding: 34px 30px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 32px !important; background: radial-gradient(circle at 100% 0%, rgba(31,78,95,.16), transparent 40%), linear-gradient(135deg, #111315 0%, #183441 100%) !important; box-shadow: 0 28px 68px rgba(17,18,20,.16), inset 0 1px 0 rgba(255,255,255,.06) !important; color: rgba(255,255,255,.88) !important; font-size: 15px !important; line-height: 1.6 !important; } #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter > .sove-container > p:nth-of-type(1)::before { content: "CAPACITÉ MAXIMALE INDICATIVE"; display: table !important; margin: 0 0 16px !important; padding: 9px 12px !important; border-radius: 999px !important; background: rgba(255,255,255,.08) !important; color: #fff !important; font-size: 9px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .10em !important; } #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter > .sove-container > p:nth-of-type(1) strong { display: block !important; margin: 6px 0 10px !important; color: #fff !important; font-size: clamp(4rem, 6vw, 5.8rem) !important; line-height: .92 !important; letter-spacing: -.055em !important; font-weight: 950 !important; } #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter > .sove-container > p:nth-of-type(1)::after { content: "machines" !important; display: block !important; margin-top: 2px !important; color: rgba(255,255,255,.74) !important; font-size: 15px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; } /* paragraphes intro */ #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter > .sove-container > p:nth-of-type(2), #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter > .sove-container > p:nth-of-type(3) { grid-column: 1 / 8 !important; max-width: 760px !important; margin: 0 !important; color: #4E5D64 !important; font-size: 16px !important; line-height: 1.72 !important; } #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter > .sove-container > p:nth-of-type(2) strong, #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter > .sove-container > p:nth-of-type(3) strong { color: #111214 !important; } /* label exemple */ #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter > .sove-container > p:nth-of-type(4) { grid-column: 1 / -1 !important; margin: 10px 0 -4px !important; text-align: center !important; color: #111214 !important; font-size: 1rem !important; line-height: 1.2 !important; font-weight: 850 !important; } #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter > .sove-container > p:nth-of-type(4)::before { content: "EXEMPLE D’ÉVOLUTION"; display: table !important; margin: 0 auto 10px !important; padding: 8px 12px !important; border-radius: 999px !important; background: rgba(17,18,20,.06) !important; color: #111214 !important; font-size: 9px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .09em !important; } /* carte évolution */ #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter > .sove-container > p:nth-of-type(5) { grid-column: 2 / 12 !important; position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; min-height: 190px !important; margin: 0 auto !important; padding: 30px 26px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 32px !important; background: radial-gradient(circle at 0% 0%, rgba(222,7,45,.05), transparent 26%), radial-gradient(circle at 100% 100%, rgba(31,78,95,.09), transparent 34%), linear-gradient(180deg, #ffffff 0%, #f6f9fb 100%) !important; box-shadow: 0 24px 58px rgba(17,18,20,.07), inset 0 1px 0 rgba(255,255,255,.8) !important; text-align: center !important; } #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter > .sove-container > p:nth-of-type(5) strong { display: block !important; color: #111214 !important; font-size: clamp(2rem, 2.8vw, 3rem) !important; line-height: 1.08 !important; letter-spacing: -.04em !important; font-weight: 950 !important; } /* conclusion */ #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter > .sove-container > p:nth-of-type(6) { grid-column: 2 / 12 !important; margin: 0 auto !important; max-width: 980px !important; padding: 18px 20px !important; border-radius: 22px !important; background: rgba(31,78,95,.07) !important; color: #1F4E5F !important; text-align: center !important; font-size: 15px !important; line-height: 1.62 !important; font-weight: 760 !important; } #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter hr { display: none !important; } } /* ========================================================= TABLETTE ========================================================= */ @media (min-width: 768px) and (max-width: 1100px) { #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter > .sove-container { width: calc(100% - 48px) !important; } #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter h2 { max-width: 920px !important; margin: 0 auto 18px !important; text-align: center !important; color: #111214 !important; font-size: clamp(2.45rem, 5.2vw, 3.8rem) !important; line-height: .98 !important; } #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter h2::before { content: "CAPACITÉ • ÉVOLUTIVITÉ • ANTICIPATION"; display: table !important; margin: 0 auto 12px !important; padding: 8px 12px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 8px !important; font-weight: 950 !important; letter-spacing: .10em !important; } #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter > .sove-container > p:nth-of-type(1) { max-width: 920px !important; min-height: 250px !important; margin: 0 auto 16px !important; padding: 28px 24px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 26px !important; background: linear-gradient(135deg, #111315 0%, #183441 100%) !important; box-shadow: 0 24px 56px rgba(17,18,20,.14) !important; color: rgba(255,255,255,.88) !important; text-align: center !important; } #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter > .sove-container > p:nth-of-type(1)::before { content: "CAPACITÉ MAXIMALE INDICATIVE"; display: table !important; margin: 0 auto 16px !important; padding: 8px 11px !important; border-radius: 999px !important; background: rgba(255,255,255,.08) !important; color: #fff !important; font-size: 8px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .10em !important; } #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter > .sove-container > p:nth-of-type(1) strong { display: block !important; margin: 8px 0 10px !important; color: #fff !important; font-size: clamp(3.2rem, 9vw, 5rem) !important; line-height: .92 !important; letter-spacing: -.05em !important; } #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter > .sove-container > p:nth-of-type(1)::after { content: "machines"; display: block !important; margin-top: 2px !important; color: rgba(255,255,255,.74) !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; } #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter > .sove-container > p:nth-of-type(2), #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter > .sove-container > p:nth-of-type(3), #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter > .sove-container > p:nth-of-type(6) { max-width: 880px !important; margin: 0 auto 10px !important; text-align: center !important; color: #4E5D64 !important; font-size: 15px !important; line-height: 1.66 !important; } #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter > .sove-container > p:nth-of-type(4) { margin: 16px auto 10px !important; text-align: center !important; color: #111214 !important; font-weight: 850 !important; } #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter > .sove-container > p:nth-of-type(4)::before { content: "EXEMPLE D’ÉVOLUTION"; display: table !important; margin: 0 auto 10px !important; padding: 8px 12px !important; border-radius: 999px !important; background: rgba(17,18,20,.06) !important; color: #111214 !important; font-size: 8px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .09em !important; } #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter > .sove-container > p:nth-of-type(5) { max-width: 920px !important; margin: 0 auto 12px !important; padding: 24px 20px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 24px !important; background: linear-gradient(180deg, #ffffff 0%, #f6f9fb 100%) !important; box-shadow: 0 20px 48px rgba(17,18,20,.07) !important; text-align: center !important; } #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter > .sove-container > p:nth-of-type(5) strong { display: block !important; color: #111214 !important; font-size: clamp(1.8rem, 5vw, 2.5rem) !important; line-height: 1.12 !important; letter-spacing: -.04em !important; font-weight: 950 !important; } #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter > .sove-container > p:nth-of-type(6) { margin-top: 0 !important; padding: 16px 16px !important; border-radius: 18px !important; background: rgba(31,78,95,.07) !important; color: #1F4E5F !important; font-weight: 760 !important; } #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter hr { display: none !important; } } /* ========================================================= SMARTPHONE ========================================================= */ @media (max-width: 767px) { #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter { padding: 56px 0 !important; } #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter > .sove-container { width: calc(100% - 28px) !important; } #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter h2 { margin: 0 auto 16px !important; text-align: center !important; color: #111214 !important; font-size: clamp(2rem, 8.8vw, 2.9rem) !important; line-height: 1 !important; letter-spacing: -.04em !important; } #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter h2::before { content: "ÉVOLUTIVITÉ"; display: table !important; margin: 0 auto 10px !important; padding: 7px 10px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 8px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .10em !important; } #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter > .sove-container > p:nth-of-type(1) { margin: 0 0 14px !important; padding: 22px 16px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 20px !important; background: linear-gradient(135deg, #111315 0%, #183441 100%) !important; box-shadow: 0 18px 40px rgba(17,18,20,.14) !important; color: rgba(255,255,255,.88) !important; text-align: center !important; } #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter > .sove-container > p:nth-of-type(1)::before { content: "CAPACITÉ MAXIMALE INDICATIVE"; display: table !important; margin: 0 auto 14px !important; padding: 7px 10px !important; border-radius: 999px !important; background: rgba(255,255,255,.08) !important; color: #fff !important; font-size: 8px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .10em !important; } #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter > .sove-container > p:nth-of-type(1) strong { display: block !important; margin: 8px 0 8px !important; color: #fff !important; font-size: clamp(2.8rem, 14vw, 4.6rem) !important; line-height: .92 !important; letter-spacing: -.05em !important; font-weight: 950 !important; } #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter > .sove-container > p:nth-of-type(1)::after { content: "machines"; display: block !important; margin-top: 2px !important; color: rgba(255,255,255,.74) !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; } #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter > .sove-container > p:nth-of-type(2), #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter > .sove-container > p:nth-of-type(3), #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter > .sove-container > p:nth-of-type(6) { margin: 0 0 10px !important; text-align: center !important; color: #4E5D64 !important; font-size: 14px !important; line-height: 1.58 !important; } #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter > .sove-container > p:nth-of-type(4) { margin: 16px 0 10px !important; text-align: center !important; color: #111214 !important; font-size: 14px !important; font-weight: 850 !important; } #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter > .sove-container > p:nth-of-type(4)::before { content: "EXEMPLE D’ÉVOLUTION"; display: table !important; margin: 0 auto 10px !important; padding: 7px 10px !important; border-radius: 999px !important; background: rgba(17,18,20,.06) !important; color: #111214 !important; font-size: 8px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .09em !important; } #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter > .sove-container > p:nth-of-type(5) { margin: 0 0 12px !important; padding: 20px 14px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 18px !important; background: linear-gradient(180deg, #ffffff 0%, #f6f9fb 100%) !important; box-shadow: 0 16px 34px rgba(17,18,20,.07) !important; text-align: center !important; } #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter > .sove-container > p:nth-of-type(5) strong { display: block !important; color: #111214 !important; font-size: clamp(1.6rem, 8vw, 2.2rem) !important; line-height: 1.14 !important; letter-spacing: -.04em !important; font-weight: 950 !important; } #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter > .sove-container > p:nth-of-type(6) { margin-bottom: 0 !important; padding: 14px 12px !important; border-radius: 16px !important; background: rgba(31,78,95,.07) !important; color: #1F4E5F !important; font-size: 13.5px !important; line-height: 1.56 !important; font-weight: 760 !important; } #sovematic-payment-page #jusquà-combien-de-machines-une-centrale-touchn-pay-peut-elle-piloter hr { display: none !important; } }/* ========================================================= CENTRALE DE PAIEMENT POUR CAMPING RENDRE LA LAVERIE PLUS AUTONOME VERSION PREMIUM / FOND CLAIR / RESPONSIVE ========================================================= */ #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] { position: relative !important; overflow: hidden !important; padding: clamp(82px, 8vw, 122px) 0 !important; background: radial-gradient(circle at 0% 0%, rgba(222,7,45,.05), transparent 24%), radial-gradient(circle at 100% 100%, rgba(31,78,95,.07), transparent 30%), linear-gradient(180deg, #ffffff 0%, #f7f9fb 100%) !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"]::before { content: "" !important; position: absolute !important; inset: 0 !important; background: linear-gradient(rgba(17,18,20,.02) 1px, transparent 1px), linear-gradient(90deg, rgba(17,18,20,.02) 1px, transparent 1px) !important; background-size: 42px 42px !important; opacity: .24 !important; pointer-events: none !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] > .sove-container { position: relative !important; z-index: 2 !important; width: min(1320px, calc(100% - 72px)) !important; max-width: 1320px !important; margin: 0 auto !important; } /* ========================================================= IMAGE ========================================================= */ #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] .sove-inline-image { position: relative !important; overflow: hidden !important; margin: 0 !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 30px !important; background: linear-gradient(135deg, #ffffff 0%, #f5f8fa 100%) !important; box-shadow: 0 28px 68px rgba(17,18,20,.08), inset 0 1px 0 rgba(255,255,255,.7) !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] .sove-inline-image img { display: block !important; width: 100% !important; aspect-ratio: 16 / 10 !important; object-fit: cover !important; border-radius: 30px 30px 0 0 !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] .sove-inline-image figcaption { margin: 0 !important; padding: 12px 16px !important; border-top: 1px solid rgba(17,18,20,.06) !important; background: rgba(255,255,255,.84) !important; color: #687780 !important; font-size: 12px !important; line-height: 1.4 !important; } /* ========================================================= DESKTOP ========================================================= */ @media (min-width: 1101px) { #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] > .sove-container { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)) !important; gap: 18px !important; align-items: start !important; } /* titre */ #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] h2 { grid-column: 1 / 7 !important; max-width: 760px !important; margin: 0 0 8px !important; color: #111214 !important; font-size: clamp(3rem, 4.1vw, 4.9rem) !important; line-height: .95 !important; letter-spacing: -.055em !important; text-wrap: balance !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] h2::before { content: "CAMPING • LIBRE-SERVICE • AUTONOMIE"; display: table !important; margin: 0 0 14px !important; padding: 8px 13px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 9px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .10em !important; box-shadow: 0 14px 28px rgba(222,7,45,.18) !important; } /* image à droite */ #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] .sove-inline-image { grid-column: 8 / -1 !important; grid-row: 1 / span 4 !important; align-self: start !important; } /* intro */ #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] > .sove-container > p:nth-of-type(1), #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] > .sove-container > p:nth-of-type(2) { grid-column: 1 / 7 !important; max-width: 700px !important; margin: 0 !important; color: #4E5D64 !important; font-size: 15px !important; line-height: 1.7 !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] > .sove-container > p:nth-of-type(3) { grid-column: 1 / 7 !important; margin: 6px 0 0 !important; padding: 18px 18px !important; border: 1px solid rgba(31,78,95,.10) !important; border-radius: 22px !important; background: radial-gradient(circle at 100% 0%, rgba(31,78,95,.09), transparent 34%), linear-gradient(180deg, #ffffff 0%, #f4f8fa 100%) !important; color: #1F4E5F !important; font-size: 15px !important; line-height: 1.62 !important; font-weight: 760 !important; box-shadow: 0 16px 38px rgba(17,18,20,.05) !important; } /* bloc critères */ #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] section.level3[id="quels-critères-prendre-en-compte-dans-un-camping"] { grid-column: 1 / -1 !important; margin-top: 18px !important; padding: 30px 28px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 32px !important; background: radial-gradient(circle at 100% 0%, rgba(31,78,95,.08), transparent 30%), linear-gradient(180deg, #ffffff 0%, #f7f9fb 100%) !important; box-shadow: 0 24px 60px rgba(17,18,20,.06), inset 0 1px 0 rgba(255,255,255,.7) !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] section.level3[id="quels-critères-prendre-en-compte-dans-un-camping"] h3 { margin: 0 0 10px !important; text-align: center !important; color: #111214 !important; font-size: clamp(2rem, 2.4vw, 2.8rem) !important; line-height: 1.04 !important; letter-spacing: -.03em !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] section.level3[id="quels-critères-prendre-en-compte-dans-un-camping"] h3::before { content: "DIMENSIONNEMENT CAMPING"; display: table !important; margin: 0 auto 12px !important; padding: 8px 12px !important; border-radius: 999px !important; background: rgba(17,18,20,.06) !important; color: #111214 !important; font-size: 9px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .09em !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] section.level3[id="quels-critères-prendre-en-compte-dans-un-camping"] > p:nth-of-type(1) { max-width: 920px !important; margin: 0 auto 18px !important; text-align: center !important; color: #4E5D64 !important; font-size: 15px !important; line-height: 1.66 !important; } /* grille des critères */ #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] section.level3[id="quels-critères-prendre-en-compte-dans-un-camping"] > ul { counter-reset: camping-criteria !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 14px !important; max-width: 1180px !important; margin: 0 auto 20px !important; padding: 0 !important; list-style: none !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] section.level3[id="quels-critères-prendre-en-compte-dans-un-camping"] > ul > li { counter-increment: camping-criteria !important; position: relative !important; min-height: 142px !important; margin: 0 !important; padding: 22px 18px 18px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 24px !important; background: radial-gradient(circle at 100% 0%, rgba(222,7,45,.05), transparent 34%), linear-gradient(180deg, #ffffff 0%, #f6f9fb 100%) !important; box-shadow: 0 18px 42px rgba(17,18,20,.05), inset 0 1px 0 rgba(255,255,255,.75) !important; color: #203138 !important; font-size: 15px !important; line-height: 1.54 !important; font-weight: 680 !important; text-align: left !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] section.level3[id="quels-critères-prendre-en-compte-dans-un-camping"] > ul > li::before { content: counter(camping-criteria, decimal-leading-zero) !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; margin: 0 0 16px !important; border-radius: 16px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 13px !important; line-height: 1 !important; font-weight: 950 !important; box-shadow: 0 12px 24px rgba(222,7,45,.18) !important; } /* principe */ #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] section.level3[id="quels-critères-prendre-en-compte-dans-un-camping"] > p:nth-of-type(2) { margin: 0 auto 10px !important; text-align: center !important; color: #111214 !important; font-size: 1rem !important; line-height: 1.3 !important; font-weight: 850 !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] section.level3[id="quels-critères-prendre-en-compte-dans-un-camping"] > p:nth-of-type(3) { max-width: 980px !important; margin: 0 auto 18px !important; padding: 22px 22px !important; border-radius: 24px !important; background: radial-gradient(circle at 100% 0%, rgba(31,78,95,.14), transparent 40%), linear-gradient(135deg, #111315 0%, #183441 100%) !important; color: #fff !important; text-align: center !important; font-size: 18px !important; line-height: 1.55 !important; font-weight: 850 !important; box-shadow: 0 22px 52px rgba(17,18,20,.14) !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] section.level3[id="quels-critères-prendre-en-compte-dans-un-camping"] > p:nth-of-type(3) strong { color: #fff !important; } /* CTA */ #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] .sove-text-link { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; margin: 0 auto !important; padding: 16px 26px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 15px !important; line-height: 1 !important; font-weight: 900 !important; text-decoration: none !important; box-shadow: 0 18px 36px rgba(222,7,45,.24) !important; transition: transform .25s ease, box-shadow .25s ease !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] .sove-text-link:hover { transform: translateY(-2px) !important; box-shadow: 0 24px 44px rgba(222,7,45,.28) !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] section.level3[id="quels-critères-prendre-en-compte-dans-un-camping"] > p:nth-of-type(4) { margin: 0 !important; text-align: center !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] hr, #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] section.level3[id="quels-critères-prendre-en-compte-dans-un-camping"] hr { display: none !important; } } /* ========================================================= TABLETTE ========================================================= */ @media (min-width: 768px) and (max-width: 1100px) { #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] > .sove-container { width: calc(100% - 48px) !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] h2 { max-width: 920px !important; margin: 0 auto 18px !important; text-align: center !important; color: #111214 !important; font-size: clamp(2.45rem, 5.2vw, 3.8rem) !important; line-height: .98 !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] h2::before { content: "CAMPING • LIBRE-SERVICE • AUTONOMIE"; display: table !important; margin: 0 auto 12px !important; padding: 8px 12px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 8px !important; font-weight: 950 !important; letter-spacing: .10em !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] .sove-inline-image { max-width: 920px !important; margin: 0 auto 18px !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] > .sove-container > p:nth-of-type(1), #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] > .sove-container > p:nth-of-type(2) { max-width: 860px !important; margin: 0 auto 10px !important; text-align: center !important; color: #4E5D64 !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] > .sove-container > p:nth-of-type(3) { max-width: 900px !important; margin: 6px auto 0 !important; padding: 16px 16px !important; border-radius: 20px !important; background: linear-gradient(180deg, #ffffff 0%, #f4f8fa 100%) !important; border: 1px solid rgba(31,78,95,.10) !important; color: #1F4E5F !important; text-align: center !important; font-weight: 760 !important; box-shadow: 0 16px 34px rgba(17,18,20,.05) !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] section.level3[id="quels-critères-prendre-en-compte-dans-un-camping"] { margin: 18px auto 0 !important; padding: 24px 18px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 26px !important; background: linear-gradient(180deg, #ffffff 0%, #f7f9fb 100%) !important; box-shadow: 0 20px 48px rgba(17,18,20,.06) !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] section.level3[id="quels-critères-prendre-en-compte-dans-un-camping"] h3 { margin: 0 0 10px !important; text-align: center !important; color: #111214 !important; font-size: clamp(1.8rem, 3.6vw, 2.4rem) !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] section.level3[id="quels-critères-prendre-en-compte-dans-un-camping"] h3::before { content: "DIMENSIONNEMENT CAMPING"; display: table !important; margin: 0 auto 10px !important; padding: 8px 12px !important; border-radius: 999px !important; background: rgba(17,18,20,.06) !important; color: #111214 !important; font-size: 8px !important; font-weight: 950 !important; letter-spacing: .09em !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] section.level3[id="quels-critères-prendre-en-compte-dans-un-camping"] > p:nth-of-type(1) { margin: 0 auto 16px !important; text-align: center !important; color: #4E5D64 !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] section.level3[id="quels-critères-prendre-en-compte-dans-un-camping"] > ul { counter-reset: camping-criteria !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; margin: 0 auto 18px !important; padding: 0 !important; list-style: none !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] section.level3[id="quels-critères-prendre-en-compte-dans-un-camping"] > ul > li { counter-increment: camping-criteria !important; margin: 0 !important; min-height: 126px !important; padding: 18px 16px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 20px !important; background: #fff !important; box-shadow: 0 14px 34px rgba(17,18,20,.05) !important; color: #203138 !important; font-weight: 680 !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] section.level3[id="quels-critères-prendre-en-compte-dans-un-camping"] > ul > li::before { content: counter(camping-criteria, decimal-leading-zero) !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; margin: 0 0 14px !important; border-radius: 14px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 12px !important; line-height: 1 !important; font-weight: 950 !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] section.level3[id="quels-critères-prendre-en-compte-dans-un-camping"] > p:nth-of-type(2) { margin: 0 0 10px !important; text-align: center !important; color: #111214 !important; font-weight: 850 !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] section.level3[id="quels-critères-prendre-en-compte-dans-un-camping"] > p:nth-of-type(3) { margin: 0 auto 16px !important; padding: 18px 16px !important; border-radius: 20px !important; background: linear-gradient(135deg, #111315 0%, #183441 100%) !important; color: #fff !important; text-align: center !important; font-size: 16px !important; line-height: 1.56 !important; font-weight: 820 !important; box-shadow: 0 18px 40px rgba(17,18,20,.12) !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] section.level3[id="quels-critères-prendre-en-compte-dans-un-camping"] > p:nth-of-type(4) { text-align: center !important; margin: 0 !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] .sove-text-link { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 14px 24px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-weight: 900 !important; text-decoration: none !important; box-shadow: 0 16px 32px rgba(222,7,45,.22) !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] hr, #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] section.level3[id="quels-critères-prendre-en-compte-dans-un-camping"] hr { display: none !important; } } /* ========================================================= SMARTPHONE ========================================================= */ @media (max-width: 767px) { #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] { padding: 56px 0 !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] > .sove-container { width: calc(100% - 28px) !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] h2 { margin: 0 auto 16px !important; text-align: center !important; color: #111214 !important; font-size: clamp(2rem, 8.8vw, 2.9rem) !important; line-height: 1 !important; letter-spacing: -.04em !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] h2::before { content: "AUTONOMIE CAMPING"; display: table !important; margin: 0 auto 10px !important; padding: 7px 10px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 8px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .10em !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] .sove-inline-image { margin: 0 0 16px !important; border-radius: 22px !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] .sove-inline-image img { border-radius: 22px 22px 0 0 !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] > .sove-container > p:nth-of-type(1), #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] > .sove-container > p:nth-of-type(2) { margin: 0 0 10px !important; text-align: center !important; color: #4E5D64 !important; font-size: 14px !important; line-height: 1.58 !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] > .sove-container > p:nth-of-type(3) { margin: 6px 0 0 !important; padding: 14px 14px !important; border-radius: 18px !important; background: linear-gradient(180deg, #ffffff 0%, #f4f8fa 100%) !important; border: 1px solid rgba(31,78,95,.10) !important; color: #1F4E5F !important; text-align: center !important; font-size: 14px !important; line-height: 1.55 !important; font-weight: 760 !important; box-shadow: 0 14px 30px rgba(17,18,20,.05) !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] section.level3[id="quels-critères-prendre-en-compte-dans-un-camping"] { margin: 18px 0 0 !important; padding: 20px 14px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 22px !important; background: linear-gradient(180deg, #ffffff 0%, #f7f9fb 100%) !important; box-shadow: 0 18px 40px rgba(17,18,20,.06) !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] section.level3[id="quels-critères-prendre-en-compte-dans-un-camping"] h3 { margin: 0 0 10px !important; text-align: center !important; color: #111214 !important; font-size: clamp(1.55rem, 7vw, 2.1rem) !important; line-height: 1.08 !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] section.level3[id="quels-critères-prendre-en-compte-dans-un-camping"] h3::before { content: "DIMENSIONNEMENT CAMPING"; display: table !important; margin: 0 auto 10px !important; padding: 7px 10px !important; border-radius: 999px !important; background: rgba(17,18,20,.06) !important; color: #111214 !important; font-size: 8px !important; font-weight: 950 !important; letter-spacing: .09em !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] section.level3[id="quels-critères-prendre-en-compte-dans-un-camping"] > p:nth-of-type(1) { margin: 0 0 14px !important; text-align: center !important; color: #4E5D64 !important; font-size: 14px !important; line-height: 1.56 !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] section.level3[id="quels-critères-prendre-en-compte-dans-un-camping"] > ul { counter-reset: camping-criteria !important; display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; margin: 0 0 16px !important; padding: 0 !important; list-style: none !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] section.level3[id="quels-critères-prendre-en-compte-dans-un-camping"] > ul > li { counter-increment: camping-criteria !important; margin: 0 !important; padding: 16px 14px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 18px !important; background: #fff !important; box-shadow: 0 12px 26px rgba(17,18,20,.05) !important; color: #203138 !important; font-size: 14px !important; line-height: 1.52 !important; font-weight: 680 !important; text-align: center !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] section.level3[id="quels-critères-prendre-en-compte-dans-un-camping"] > ul > li::before { content: counter(camping-criteria, decimal-leading-zero) !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; height: 38px !important; margin: 0 auto 12px !important; border-radius: 13px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 11px !important; line-height: 1 !important; font-weight: 950 !important; box-shadow: 0 10px 20px rgba(222,7,45,.18) !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] section.level3[id="quels-critères-prendre-en-compte-dans-un-camping"] > p:nth-of-type(2) { margin: 0 0 10px !important; text-align: center !important; color: #111214 !important; font-size: 14px !important; font-weight: 850 !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] section.level3[id="quels-critères-prendre-en-compte-dans-un-camping"] > p:nth-of-type(3) { margin: 0 0 14px !important; padding: 16px 14px !important; border-radius: 18px !important; background: linear-gradient(135deg, #111315 0%, #183441 100%) !important; color: #fff !important; text-align: center !important; font-size: 15px !important; line-height: 1.56 !important; font-weight: 820 !important; box-shadow: 0 16px 34px rgba(17,18,20,.12) !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] section.level3[id="quels-critères-prendre-en-compte-dans-un-camping"] > p:nth-of-type(4) { margin: 0 !important; text-align: center !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] .sove-text-link { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 320px !important; padding: 14px 18px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 14px !important; line-height: 1.1 !important; font-weight: 900 !important; text-decoration: none !important; box-shadow: 0 16px 30px rgba(222,7,45,.22) !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] hr, #sovematic-payment-page [id="centrale-de-paiement-pour-camping-rendre-la-laverie-plus-autonome"] section.level3[id="quels-critères-prendre-en-compte-dans-un-camping"] hr { display: none !important; } }/* ========================================================= CENTRALE DE PAIEMENT POUR RÉSIDENCE ÉTUDIANTE OU COLLECTIVE VERSION PREMIUM / FOND CLAIR / RESPONSIVE ========================================================= */ #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] { position: relative !important; overflow: hidden !important; padding: clamp(82px, 8vw, 122px) 0 !important; background: radial-gradient(circle at 0% 0%, rgba(222,7,45,.05), transparent 24%), radial-gradient(circle at 100% 100%, rgba(31,78,95,.07), transparent 30%), linear-gradient(180deg, #ffffff 0%, #f7f9fb 100%) !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"]::before { content: "" !important; position: absolute !important; inset: 0 !important; background: linear-gradient(rgba(17,18,20,.02) 1px, transparent 1px), linear-gradient(90deg, rgba(17,18,20,.02) 1px, transparent 1px) !important; background-size: 42px 42px !important; opacity: .24 !important; pointer-events: none !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] > .sove-container { position: relative !important; z-index: 2 !important; width: min(1320px, calc(100% - 72px)) !important; max-width: 1320px !important; margin: 0 auto !important; } /* ========================================================= IMAGE ========================================================= */ #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] .sove-inline-image { position: relative !important; overflow: hidden !important; margin: 0 !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 30px !important; background: linear-gradient(135deg, #ffffff 0%, #f5f8fa 100%) !important; box-shadow: 0 28px 68px rgba(17,18,20,.08), inset 0 1px 0 rgba(255,255,255,.7) !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] .sove-inline-image img { display: block !important; width: 100% !important; aspect-ratio: 16 / 10 !important; object-fit: cover !important; border-radius: 30px 30px 0 0 !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] .sove-inline-image figcaption { margin: 0 !important; padding: 12px 16px !important; border-top: 1px solid rgba(17,18,20,.06) !important; background: rgba(255,255,255,.84) !important; color: #687780 !important; font-size: 12px !important; line-height: 1.4 !important; } /* ========================================================= DESKTOP ========================================================= */ @media (min-width: 1101px) { #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] > .sove-container { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)) !important; gap: 18px !important; align-items: start !important; } /* titre */ #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] h2 { grid-column: 1 / 7 !important; max-width: 760px !important; margin: 0 0 8px !important; color: #111214 !important; font-size: clamp(3rem, 4.1vw, 4.9rem) !important; line-height: .95 !important; letter-spacing: -.055em !important; text-wrap: balance !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] h2::before { content: "RÉSIDENCE • COLLECTIF • ABONNEMENT"; display: table !important; margin: 0 0 14px !important; padding: 8px 13px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 9px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .10em !important; box-shadow: 0 14px 28px rgba(222,7,45,.18) !important; } /* image à droite */ #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] .sove-inline-image { grid-column: 8 / -1 !important; grid-row: 1 / span 5 !important; align-self: start !important; } /* paragraphes intro */ #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] > .sove-container > p:nth-of-type(1), #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] > .sove-container > p:nth-of-type(2) { grid-column: 1 / 7 !important; max-width: 700px !important; margin: 0 !important; color: #4E5D64 !important; font-size: 15px !important; line-height: 1.7 !important; } /* mise en avant abonnement */ #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] > .sove-container > p:nth-of-type(3), #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] > .sove-container > p:nth-of-type(4) { grid-column: 1 / 7 !important; margin: 0 !important; color: #4E5D64 !important; font-size: 15px !important; line-height: 1.68 !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] > .sove-container > p:nth-of-type(4) strong { color: #111214 !important; } /* carte parcours */ #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] > .sove-container > p:nth-of-type(5) { grid-column: 1 / -1 !important; position: relative !important; margin: 16px 0 0 !important; padding: 28px 24px !important; border-radius: 30px !important; background: radial-gradient(circle at 100% 0%, rgba(31,78,95,.15), transparent 38%), linear-gradient(135deg, #111315 0%, #183441 100%) !important; color: #fff !important; text-align: center !important; font-size: 18px !important; line-height: 1.6 !important; font-weight: 800 !important; box-shadow: 0 24px 58px rgba(17,18,20,.14) !important; border: 1px solid rgba(255,255,255,.06) !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] > .sove-container > p:nth-of-type(5)::before { content: "PARCOURS UTILISATEUR"; display: table !important; margin: 0 auto 14px !important; padding: 8px 12px !important; border-radius: 999px !important; background: rgba(255,255,255,.08) !important; color: #fff !important; font-size: 9px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .09em !important; } /* intro liste */ #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] > .sove-container > p:nth-of-type(6) { grid-column: 1 / -1 !important; margin: 18px 0 6px !important; text-align: center !important; color: #111214 !important; font-size: 1rem !important; line-height: 1.2 !important; font-weight: 850 !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] > .sove-container > p:nth-of-type(6)::before { content: "POINTS À DIMENSIONNER"; display: table !important; margin: 0 auto 10px !important; padding: 8px 12px !important; border-radius: 999px !important; background: rgba(17,18,20,.06) !important; color: #111214 !important; font-size: 9px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .09em !important; } /* liste transformée en cartes */ #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] > .sove-container > ul { counter-reset: residence-points !important; grid-column: 2 / 12 !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 14px !important; max-width: 1080px !important; width: 100% !important; margin: 0 auto 18px !important; padding: 0 !important; list-style: none !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] > .sove-container > ul > li { counter-increment: residence-points !important; position: relative !important; min-height: 160px !important; margin: 0 !important; padding: 22px 18px 18px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 24px !important; background: radial-gradient(circle at 100% 0%, rgba(222,7,45,.05), transparent 34%), linear-gradient(180deg, #ffffff 0%, #f6f9fb 100%) !important; box-shadow: 0 18px 42px rgba(17,18,20,.05), inset 0 1px 0 rgba(255,255,255,.75) !important; color: #203138 !important; font-size: 15px !important; line-height: 1.54 !important; font-weight: 680 !important; text-align: left !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] > .sove-container > ul > li::before { content: counter(residence-points, decimal-leading-zero) !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; margin: 0 0 16px !important; border-radius: 16px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 13px !important; line-height: 1 !important; font-weight: 950 !important; box-shadow: 0 12px 24px rgba(222,7,45,.18) !important; } /* lien interne / CTA */ #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] > .sove-container > p:last-of-type { grid-column: 2 / 12 !important; margin: 0 auto !important; text-align: center !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] > .sove-container > p:last-of-type a, #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] .sove-text-link { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; margin: 0 auto !important; padding: 16px 26px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 15px !important; line-height: 1 !important; font-weight: 900 !important; text-decoration: none !important; box-shadow: 0 18px 36px rgba(222,7,45,.24) !important; transition: transform .25s ease, box-shadow .25s ease !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] > .sove-container > p:last-of-type a:hover, #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] .sove-text-link:hover { transform: translateY(-2px) !important; box-shadow: 0 24px 44px rgba(222,7,45,.28) !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] hr { display: none !important; } } /* ========================================================= TABLETTE ========================================================= */ @media (min-width: 768px) and (max-width: 1100px) { #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] > .sove-container { width: calc(100% - 48px) !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] h2 { max-width: 920px !important; margin: 0 auto 18px !important; text-align: center !important; color: #111214 !important; font-size: clamp(2.45rem, 5.2vw, 3.8rem) !important; line-height: .98 !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] h2::before { content: "RÉSIDENCE • COLLECTIF • ABONNEMENT"; display: table !important; margin: 0 auto 12px !important; padding: 8px 12px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 8px !important; font-weight: 950 !important; letter-spacing: .10em !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] .sove-inline-image { max-width: 920px !important; margin: 0 auto 18px !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] > .sove-container > p:nth-of-type(1), #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] > .sove-container > p:nth-of-type(2), #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] > .sove-container > p:nth-of-type(3), #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] > .sove-container > p:nth-of-type(4) { max-width: 860px !important; margin: 0 auto 10px !important; text-align: center !important; color: #4E5D64 !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] > .sove-container > p:nth-of-type(5) { max-width: 920px !important; margin: 16px auto 12px !important; padding: 22px 18px !important; border-radius: 24px !important; background: linear-gradient(135deg, #111315 0%, #183441 100%) !important; color: #fff !important; text-align: center !important; font-size: 16px !important; line-height: 1.58 !important; font-weight: 820 !important; box-shadow: 0 20px 48px rgba(17,18,20,.13) !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] > .sove-container > p:nth-of-type(5)::before { content: "PARCOURS UTILISATEUR"; display: table !important; margin: 0 auto 12px !important; padding: 8px 12px !important; border-radius: 999px !important; background: rgba(255,255,255,.08) !important; color: #fff !important; font-size: 8px !important; font-weight: 950 !important; letter-spacing: .09em !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] > .sove-container > p:nth-of-type(6) { margin: 16px 0 10px !important; text-align: center !important; color: #111214 !important; font-weight: 850 !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] > .sove-container > p:nth-of-type(6)::before { content: "POINTS À DIMENSIONNER"; display: table !important; margin: 0 auto 10px !important; padding: 8px 12px !important; border-radius: 999px !important; background: rgba(17,18,20,.06) !important; color: #111214 !important; font-size: 8px !important; font-weight: 950 !important; letter-spacing: .09em !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] > .sove-container > ul { counter-reset: residence-points !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; max-width: 920px !important; margin: 0 auto 18px !important; padding: 0 !important; list-style: none !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] > .sove-container > ul > li { counter-increment: residence-points !important; margin: 0 !important; min-height: 130px !important; padding: 18px 16px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 20px !important; background: #fff !important; box-shadow: 0 14px 34px rgba(17,18,20,.05) !important; color: #203138 !important; font-weight: 680 !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] > .sove-container > ul > li::before { content: counter(residence-points, decimal-leading-zero) !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; margin: 0 0 14px !important; border-radius: 14px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 12px !important; font-weight: 950 !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] > .sove-container > p:last-of-type { text-align: center !important; margin: 0 !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] > .sove-container > p:last-of-type a, #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] .sove-text-link { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 14px 24px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-weight: 900 !important; text-decoration: none !important; box-shadow: 0 16px 32px rgba(222,7,45,.22) !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] hr { display: none !important; } } /* ========================================================= SMARTPHONE ========================================================= */ @media (max-width: 767px) { #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] { padding: 56px 0 !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] > .sove-container { width: calc(100% - 28px) !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] h2 { margin: 0 auto 16px !important; text-align: center !important; color: #111214 !important; font-size: clamp(2rem, 8.8vw, 2.9rem) !important; line-height: 1 !important; letter-spacing: -.04em !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] h2::before { content: "RÉSIDENCE COLLECTIVE"; display: table !important; margin: 0 auto 10px !important; padding: 7px 10px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 8px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .10em !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] .sove-inline-image { margin: 0 0 16px !important; border-radius: 22px !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] .sove-inline-image img { border-radius: 22px 22px 0 0 !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] > .sove-container > p:nth-of-type(1), #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] > .sove-container > p:nth-of-type(2), #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] > .sove-container > p:nth-of-type(3), #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] > .sove-container > p:nth-of-type(4) { margin: 0 0 10px !important; text-align: center !important; color: #4E5D64 !important; font-size: 14px !important; line-height: 1.58 !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] > .sove-container > p:nth-of-type(5) { margin: 16px 0 12px !important; padding: 18px 14px !important; border-radius: 20px !important; background: linear-gradient(135deg, #111315 0%, #183441 100%) !important; color: #fff !important; text-align: center !important; font-size: 15px !important; line-height: 1.56 !important; font-weight: 820 !important; box-shadow: 0 18px 40px rgba(17,18,20,.12) !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] > .sove-container > p:nth-of-type(5)::before { content: "PARCOURS UTILISATEUR"; display: table !important; margin: 0 auto 10px !important; padding: 7px 10px !important; border-radius: 999px !important; background: rgba(255,255,255,.08) !important; color: #fff !important; font-size: 8px !important; font-weight: 950 !important; letter-spacing: .09em !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] > .sove-container > p:nth-of-type(6) { margin: 16px 0 10px !important; text-align: center !important; color: #111214 !important; font-size: 14px !important; font-weight: 850 !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] > .sove-container > p:nth-of-type(6)::before { content: "POINTS À DIMENSIONNER"; display: table !important; margin: 0 auto 10px !important; padding: 7px 10px !important; border-radius: 999px !important; background: rgba(17,18,20,.06) !important; color: #111214 !important; font-size: 8px !important; font-weight: 950 !important; letter-spacing: .09em !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] > .sove-container > ul { counter-reset: residence-points !important; display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; margin: 0 0 16px !important; padding: 0 !important; list-style: none !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] > .sove-container > ul > li { counter-increment: residence-points !important; margin: 0 !important; padding: 16px 14px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 18px !important; background: #fff !important; box-shadow: 0 12px 26px rgba(17,18,20,.05) !important; color: #203138 !important; font-size: 14px !important; line-height: 1.52 !important; font-weight: 680 !important; text-align: center !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] > .sove-container > ul > li::before { content: counter(residence-points, decimal-leading-zero) !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; height: 38px !important; margin: 0 auto 12px !important; border-radius: 13px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 11px !important; line-height: 1 !important; font-weight: 950 !important; box-shadow: 0 10px 20px rgba(222,7,45,.18) !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] > .sove-container > p:last-of-type { margin: 0 !important; text-align: center !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] > .sove-container > p:last-of-type a, #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] .sove-text-link { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 320px !important; padding: 14px 18px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 14px !important; line-height: 1.1 !important; font-weight: 900 !important; text-decoration: none !important; box-shadow: 0 16px 30px rgba(222,7,45,.22) !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-résidence-étudiante-ou-collective"] hr { display: none !important; } }/* ========================================================= CENTRALE DE PAIEMENT POUR LAVERIE LIBRE-SERVICE VERSION PREMIUM / FOND CLAIR / RESPONSIVE ========================================================= */ #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] { position: relative !important; overflow: hidden !important; padding: clamp(82px, 8vw, 122px) 0 !important; background: radial-gradient(circle at 0% 0%, rgba(222,7,45,.05), transparent 24%), radial-gradient(circle at 100% 100%, rgba(31,78,95,.08), transparent 30%), linear-gradient(180deg, #ffffff 0%, #f7f9fb 100%) !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"]::before { content: "" !important; position: absolute !important; inset: 0 !important; background: linear-gradient(rgba(17,18,20,.02) 1px, transparent 1px), linear-gradient(90deg, rgba(17,18,20,.02) 1px, transparent 1px) !important; background-size: 42px 42px !important; opacity: .24 !important; pointer-events: none !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container { position: relative !important; z-index: 2 !important; width: min(1320px, calc(100% - 72px)) !important; max-width: 1320px !important; margin: 0 auto !important; } /* ========================================================= IMAGE ========================================================= */ #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] .sove-inline-image { position: relative !important; overflow: hidden !important; margin: 0 !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 30px !important; background: linear-gradient(135deg, #ffffff 0%, #f5f8fa 100%) !important; box-shadow: 0 28px 68px rgba(17,18,20,.08), inset 0 1px 0 rgba(255,255,255,.7) !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] .sove-inline-image img { display: block !important; width: 100% !important; aspect-ratio: 16 / 10 !important; object-fit: cover !important; border-radius: 30px 30px 0 0 !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] .sove-inline-image figcaption { margin: 0 !important; padding: 12px 16px !important; border-top: 1px solid rgba(17,18,20,.06) !important; background: rgba(255,255,255,.84) !important; color: #687780 !important; font-size: 12px !important; line-height: 1.4 !important; } /* ========================================================= DESKTOP ========================================================= */ @media (min-width: 1101px) { #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)) !important; gap: 18px !important; align-items: start !important; } /* titre */ #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] h2 { grid-column: 1 / 7 !important; max-width: 760px !important; margin: 0 0 8px !important; color: #111214 !important; font-size: clamp(3rem, 4.1vw, 4.9rem) !important; line-height: .95 !important; letter-spacing: -.055em !important; text-wrap: balance !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] h2::before { content: "LIBRE-SERVICE • PARCOURS CLIENT • INTERFACE"; display: table !important; margin: 0 0 14px !important; padding: 8px 13px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 9px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .10em !important; box-shadow: 0 14px 28px rgba(222,7,45,.18) !important; } /* image */ #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] .sove-inline-image { grid-column: 8 / -1 !important; grid-row: 1 / span 4 !important; align-self: start !important; } /* intro */ #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(1), #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(2) { grid-column: 1 / 7 !important; max-width: 700px !important; margin: 0 !important; color: #4E5D64 !important; font-size: 15px !important; line-height: 1.7 !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(2) { margin-top: 6px !important; padding: 16px 18px !important; border: 1px solid rgba(31,78,95,.10) !important; border-radius: 20px !important; background: radial-gradient(circle at 100% 0%, rgba(31,78,95,.08), transparent 34%), linear-gradient(180deg, #ffffff 0%, #f4f8fa 100%) !important; color: #1F4E5F !important; font-weight: 760 !important; box-shadow: 0 16px 38px rgba(17,18,20,.05) !important; } /* 3 questions */ #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > h3 { position: relative !important; margin: 0 !important; padding: 22px 18px 14px !important; border: 1px solid rgba(17,18,20,.08) !important; border-bottom: 0 !important; border-radius: 24px 24px 0 0 !important; background: radial-gradient(circle at 100% 0%, rgba(222,7,45,.05), transparent 34%), linear-gradient(180deg, #ffffff 0%, #f7f9fb 100%) !important; color: #111214 !important; font-size: 1.35rem !important; line-height: 1.14 !important; font-weight: 900 !important; box-shadow: 0 18px 42px rgba(17,18,20,.05), inset 0 1px 0 rgba(255,255,255,.8) !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > h3::before { display: table !important; margin: 0 0 14px !important; padding: 7px 10px !important; border-radius: 999px !important; background: rgba(17,18,20,.06) !important; color: #111214 !important; font-size: 9px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .09em !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > h3:nth-of-type(1) { grid-column: 1 / 5 !important; margin-top: 18px !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > h3:nth-of-type(1)::before { content: "QUESTION 01"; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > h3:nth-of-type(2) { grid-column: 5 / 9 !important; margin-top: 18px !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > h3:nth-of-type(2)::before { content: "QUESTION 02"; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > h3:nth-of-type(3) { grid-column: 9 / -1 !important; margin-top: 18px !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > h3:nth-of-type(3)::before { content: "QUESTION 03"; } /* réponses des 3 questions */ #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(3), #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(4), #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(5) { margin: 0 !important; padding: 0 18px 20px !important; border: 1px solid rgba(17,18,20,.08) !important; border-top: 0 !important; border-radius: 0 0 24px 24px !important; background: linear-gradient(180deg, #ffffff 0%, #f7f9fb 100%) !important; color: #4E5D64 !important; font-size: 15px !important; line-height: 1.65 !important; box-shadow: 0 18px 42px rgba(17,18,20,.05), inset 0 1px 0 rgba(255,255,255,.6) !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(3) { grid-column: 1 / 5 !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(4) { grid-column: 5 / 9 !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(5) { grid-column: 9 / -1 !important; } /* mise en avant Touch'N Pay */ #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(6) { grid-column: 2 / 12 !important; margin: 18px auto 0 !important; padding: 24px 24px !important; border-radius: 28px !important; background: radial-gradient(circle at 100% 0%, rgba(31,78,95,.14), transparent 40%), linear-gradient(135deg, #111315 0%, #183441 100%) !important; color: #fff !important; text-align: center !important; font-size: 18px !important; line-height: 1.58 !important; font-weight: 820 !important; box-shadow: 0 24px 58px rgba(17,18,20,.14) !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(6) strong { color: #fff !important; } /* conclusion */ #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(7) { grid-column: 2 / 12 !important; margin: 0 auto !important; max-width: 980px !important; padding: 18px 20px !important; border-radius: 22px !important; background: rgba(31,78,95,.07) !important; color: #1F4E5F !important; text-align: center !important; font-size: 15px !important; line-height: 1.62 !important; font-weight: 760 !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] hr { display: none !important; } } /* ========================================================= TABLETTE ========================================================= */ @media (min-width: 768px) and (max-width: 1100px) { #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container { width: calc(100% - 48px) !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] h2 { grid-column: 1 / -1 !important; max-width: 920px !important; margin: 0 auto 6px !important; text-align: center !important; color: #111214 !important; font-size: clamp(2.45rem, 5.2vw, 3.8rem) !important; line-height: .98 !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] h2::before { content: "LIBRE-SERVICE • PARCOURS CLIENT • INTERFACE"; display: table !important; margin: 0 auto 12px !important; padding: 8px 12px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 8px !important; font-weight: 950 !important; letter-spacing: .10em !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] .sove-inline-image { grid-column: 1 / -1 !important; max-width: 920px !important; margin: 0 auto 6px !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(1), #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(2) { grid-column: 1 / -1 !important; max-width: 860px !important; margin: 0 auto !important; text-align: center !important; color: #4E5D64 !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(2) { margin-top: 4px !important; padding: 14px 16px !important; border-radius: 18px !important; background: linear-gradient(180deg, #ffffff 0%, #f4f8fa 100%) !important; border: 1px solid rgba(31,78,95,.10) !important; color: #1F4E5F !important; font-weight: 760 !important; box-shadow: 0 16px 34px rgba(17,18,20,.05) !important; } /* cartes questions */ #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > h3 { margin: 10px 0 0 !important; padding: 18px 16px 12px !important; border: 1px solid rgba(17,18,20,.08) !important; border-bottom: 0 !important; border-radius: 20px 20px 0 0 !important; background: #fff !important; color: #111214 !important; font-size: 1.2rem !important; line-height: 1.14 !important; font-weight: 900 !important; box-shadow: 0 14px 34px rgba(17,18,20,.05) !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > h3::before { display: table !important; margin: 0 0 12px !important; padding: 7px 10px !important; border-radius: 999px !important; background: rgba(17,18,20,.06) !important; color: #111214 !important; font-size: 8px !important; font-weight: 950 !important; letter-spacing: .09em !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > h3:nth-of-type(1)::before { content: "QUESTION 01"; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > h3:nth-of-type(2)::before { content: "QUESTION 02"; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > h3:nth-of-type(3)::before { content: "QUESTION 03"; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(3), #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(4), #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(5) { margin: 0 !important; padding: 0 16px 18px !important; border: 1px solid rgba(17,18,20,.08) !important; border-top: 0 !important; border-radius: 0 0 20px 20px !important; background: #fff !important; color: #4E5D64 !important; line-height: 1.62 !important; box-shadow: 0 14px 34px rgba(17,18,20,.05) !important; } /* le 3e bloc sur toute la largeur */ #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > h3:nth-of-type(3), #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(5) { grid-column: 1 / -1 !important; } /* mise en avant */ #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(6) { grid-column: 1 / -1 !important; margin: 10px 0 0 !important; padding: 20px 18px !important; border-radius: 22px !important; background: linear-gradient(135deg, #111315 0%, #183441 100%) !important; color: #fff !important; text-align: center !important; font-size: 16px !important; line-height: 1.58 !important; font-weight: 820 !important; box-shadow: 0 18px 40px rgba(17,18,20,.12) !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(7) { grid-column: 1 / -1 !important; margin: 0 !important; padding: 16px 16px !important; border-radius: 18px !important; background: rgba(31,78,95,.07) !important; color: #1F4E5F !important; text-align: center !important; font-weight: 760 !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] hr { display: none !important; } } /* ========================================================= SMARTPHONE ========================================================= */ @media (max-width: 767px) { #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] { padding: 56px 0 !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container { width: calc(100% - 28px) !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] h2 { margin: 0 auto 16px !important; text-align: center !important; color: #111214 !important; font-size: clamp(2rem, 8.8vw, 2.9rem) !important; line-height: 1 !important; letter-spacing: -.04em !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] h2::before { content: "LAVERIE LIBRE-SERVICE"; display: table !important; margin: 0 auto 10px !important; padding: 7px 10px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 8px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .10em !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] .sove-inline-image { margin: 0 0 16px !important; border-radius: 22px !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] .sove-inline-image img { border-radius: 22px 22px 0 0 !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(1), #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(2) { margin: 0 0 10px !important; text-align: center !important; color: #4E5D64 !important; font-size: 14px !important; line-height: 1.58 !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(2) { padding: 14px 14px !important; border-radius: 18px !important; background: linear-gradient(180deg, #ffffff 0%, #f4f8fa 100%) !important; border: 1px solid rgba(31,78,95,.10) !important; color: #1F4E5F !important; font-size: 14px !important; line-height: 1.55 !important; font-weight: 760 !important; box-shadow: 0 14px 30px rgba(17,18,20,.05) !important; } /* questions */ #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > h3 { margin: 12px 0 0 !important; padding: 16px 14px 12px !important; border: 1px solid rgba(17,18,20,.08) !important; border-bottom: 0 !important; border-radius: 18px 18px 0 0 !important; background: #fff !important; color: #111214 !important; text-align: center !important; font-size: 1.12rem !important; line-height: 1.16 !important; font-weight: 900 !important; box-shadow: 0 12px 26px rgba(17,18,20,.05) !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > h3::before { display: table !important; margin: 0 auto 12px !important; padding: 7px 10px !important; border-radius: 999px !important; background: rgba(17,18,20,.06) !important; color: #111214 !important; font-size: 8px !important; font-weight: 950 !important; letter-spacing: .09em !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > h3:nth-of-type(1)::before { content: "QUESTION 01"; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > h3:nth-of-type(2)::before { content: "QUESTION 02"; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > h3:nth-of-type(3)::before { content: "QUESTION 03"; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(3), #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(4), #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(5) { margin: 0 0 2px !important; padding: 0 14px 16px !important; border: 1px solid rgba(17,18,20,.08) !important; border-top: 0 !important; border-radius: 0 0 18px 18px !important; background: #fff !important; color: #4E5D64 !important; text-align: center !important; font-size: 14px !important; line-height: 1.56 !important; box-shadow: 0 12px 26px rgba(17,18,20,.05) !important; } /* mise en avant */ #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(6) { margin: 14px 0 12px !important; padding: 18px 14px !important; border-radius: 20px !important; background: linear-gradient(135deg, #111315 0%, #183441 100%) !important; color: #fff !important; text-align: center !important; font-size: 15px !important; line-height: 1.56 !important; font-weight: 820 !important; box-shadow: 0 18px 40px rgba(17,18,20,.12) !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(6) strong { color: #fff !important; } /* conclusion */ #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(7) { margin: 0 !important; padding: 14px 12px !important; border-radius: 16px !important; background: rgba(31,78,95,.07) !important; color: #1F4E5F !important; text-align: center !important; font-size: 13.5px !important; line-height: 1.56 !important; font-weight: 760 !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] hr { display: none !important; } }/* ========================================================= PATCH CORRECTIF FINAL CENTRALE DE PAIEMENT POUR LAVERIE LIBRE-SERVICE CORRIGE LA MAUVAISE GRILLE DU PATCH PRÉCÉDENT ========================================================= */ /* ========================================================= DESKTOP TITRE + IMAGE PLEINE LARGEUR 3 GRANDES CARTES EN DESSOUS ========================================================= */ @media (min-width: 1101px) { #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; column-gap: 18px !important; row-gap: 0 !important; align-items: stretch !important; width: min(1280px, calc(100% - 72px)) !important; max-width: 1280px !important; margin: 0 auto !important; } /* ===================================================== TITRE ===================================================== */ #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] h2 { grid-column: 1 / -1 !important; grid-row: auto !important; width: 100% !important; max-width: 900px !important; margin: 0 auto 28px !important; text-align: center !important; color: #111214 !important; font-size: clamp(3rem, 4vw, 4.8rem) !important; line-height: .96 !important; letter-spacing: -.055em !important; text-wrap: balance !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] h2::before { content: "LAVERIE LIBRE-SERVICE • PARCOURS CLIENT"; display: table !important; margin: 0 auto 14px !important; padding: 8px 13px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #FFFFFF !important; font-size: 9px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .1em !important; box-shadow: 0 12px 26px rgba(222,7,45,.18) !important; } /* ===================================================== IMAGE ON LA RECENTRE EN GRAND ===================================================== */ #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] .sove-inline-image { grid-column: 1 / -1 !important; grid-row: auto !important; width: min(100%, 980px) !important; max-width: 980px !important; margin: 0 auto 28px !important; overflow: hidden !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 30px !important; background: #FFFFFF !important; box-shadow: 0 28px 70px rgba(17,18,20,.09) !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] .sove-inline-image img { display: block !important; width: 100% !important; height: 460px !important; aspect-ratio: auto !important; object-fit: cover !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] .sove-inline-image figcaption { padding: 12px 16px !important; background: #FFFFFF !important; color: #65747B !important; font-size: 11px !important; } /* ===================================================== INTRO ===================================================== */ #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(1) { grid-column: 1 / -1 !important; grid-row: auto !important; width: 100% !important; max-width: 900px !important; margin: 0 auto 12px !important; text-align: center !important; color: #4E5D64 !important; font-size: 16px !important; line-height: 1.65 !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(2) { grid-column: 1 / -1 !important; grid-row: auto !important; width: min(100%, 900px) !important; max-width: 900px !important; margin: 0 auto 30px !important; padding: 15px 18px !important; border: 1px solid rgba(31,78,95,.10) !important; border-radius: 18px !important; background: linear-gradient( 135deg, rgba(31,78,95,.06), rgba(255,255,255,.96) ) !important; color: #1F4E5F !important; text-align: center !important; font-size: 14px !important; line-height: 1.55 !important; font-weight: 800 !important; box-shadow: 0 12px 30px rgba(17,18,20,.04) !important; } /* ===================================================== LES 3 QUESTIONS UNE VRAIE COLONNE PAR CARTE ===================================================== */ #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > h3 { position: relative !important; grid-row: auto !important; width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 24px 22px 14px !important; border: 1px solid rgba(17,18,20,.08) !important; border-bottom: 0 !important; border-radius: 26px 26px 0 0 !important; background: linear-gradient( 180deg, #FFFFFF, #F8FAFB ) !important; color: #111214 !important; text-align: left !important; font-size: clamp(1.25rem, 1.5vw, 1.65rem) !important; line-height: 1.12 !important; font-weight: 950 !important; letter-spacing: -.025em !important; box-shadow: 0 20px 48px rgba(17,18,20,.055) !important; } /* QUESTION 1 */ #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > h3:nth-of-type(1) { grid-column: 1 !important; } /* QUESTION 2 */ #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > h3:nth-of-type(2) { grid-column: 2 !important; } /* QUESTION 3 */ #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > h3:nth-of-type(3) { grid-column: 3 !important; } /* numéros */ #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > h3::before { display: flex !important; align-items: center !important; justify-content: center !important; width: 48px !important; height: 48px !important; margin: 0 0 18px !important; padding: 0 !important; border-radius: 15px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #FFFFFF !important; font-size: 11px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .04em !important; box-shadow: 0 12px 24px rgba(222,7,45,.18) !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > h3:nth-of-type(1)::before { content: "01" !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > h3:nth-of-type(2)::before { content: "02" !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > h3:nth-of-type(3)::before { content: "03" !important; } /* ===================================================== RÉPONSES SOUS LES QUESTIONS ===================================================== */ #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(3), #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(4), #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(5) { grid-row: auto !important; width: 100% !important; min-width: 0 !important; max-width: none !important; min-height: 150px !important; margin: 0 0 26px !important; padding: 0 22px 24px !important; border: 1px solid rgba(17,18,20,.08) !important; border-top: 0 !important; border-radius: 0 0 26px 26px !important; background: linear-gradient( 180deg, #F8FAFB, #FFFFFF ) !important; color: #4E5D64 !important; text-align: left !important; font-size: 14px !important; line-height: 1.6 !important; box-shadow: 0 20px 48px rgba(17,18,20,.055) !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(3) { grid-column: 1 !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(4) { grid-column: 2 !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(5) { grid-column: 3 !important; } /* ===================================================== TOUCH'N PAY ===================================================== */ #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(6) { grid-column: 1 / -1 !important; width: min(100%, 1040px) !important; max-width: 1040px !important; margin: 0 auto 14px !important; padding: 24px 26px !important; border-radius: 26px !important; background: radial-gradient( circle at 100% 0%, rgba(31,78,95,.18), transparent 38% ), linear-gradient( 135deg, #111315, #183441 ) !important; color: #FFFFFF !important; text-align: center !important; font-size: 17px !important; line-height: 1.58 !important; font-weight: 800 !important; box-shadow: 0 22px 52px rgba(17,18,20,.15) !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(6) strong { color: #FFFFFF !important; } /* conclusion */ #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(7) { grid-column: 1 / -1 !important; width: min(100%, 1040px) !important; max-width: 1040px !important; margin: 0 auto !important; padding: 16px 18px !important; border-radius: 20px !important; background: rgba(31,78,95,.07) !important; color: #1F4E5F !important; text-align: center !important; font-size: 14px !important; line-height: 1.6 !important; font-weight: 760 !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] hr { display: none !important; } } /* ========================================================= TABLETTE PLUS DE GRILLE COMPLEXE CARTES EMPILÉES PROPREMENT ========================================================= */ @media (min-width: 768px) and (max-width: 1100px) { #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container { display: block !important; width: calc(100% - 48px) !important; max-width: 900px !important; margin: 0 auto !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] h2 { max-width: 820px !important; margin: 0 auto 22px !important; text-align: center !important; font-size: clamp(2.4rem, 5.4vw, 3.7rem) !important; line-height: 1 !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] h2::before { content: "LAVERIE LIBRE-SERVICE"; display: table !important; margin: 0 auto 12px !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] .sove-inline-image { width: 100% !important; max-width: 820px !important; margin: 0 auto 20px !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] .sove-inline-image img { height: 380px !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(1), #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(2) { width: 100% !important; max-width: 820px !important; margin: 0 auto 12px !important; text-align: center !important; } /* CARTES QUESTIONS */ #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > h3 { width: 100% !important; max-width: 820px !important; margin: 18px auto 0 !important; padding: 20px 18px 12px !important; border: 1px solid rgba(17,18,20,.08) !important; border-bottom: 0 !important; border-radius: 22px 22px 0 0 !important; background: #FFFFFF !important; text-align: center !important; font-size: 1.35rem !important; line-height: 1.15 !important; box-shadow: 0 16px 38px rgba(17,18,20,.055) !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > h3::before { display: flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; margin: 0 auto 14px !important; padding: 0 !important; border-radius: 14px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #FFFFFF !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > h3:nth-of-type(1)::before { content: "01" !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > h3:nth-of-type(2)::before { content: "02" !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > h3:nth-of-type(3)::before { content: "03" !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(3), #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(4), #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(5) { width: 100% !important; max-width: 820px !important; margin: 0 auto !important; padding: 0 18px 20px !important; border: 1px solid rgba(17,18,20,.08) !important; border-top: 0 !important; border-radius: 0 0 22px 22px !important; background: #FFFFFF !important; color: #4E5D64 !important; text-align: center !important; line-height: 1.6 !important; box-shadow: 0 16px 38px rgba(17,18,20,.055) !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(6), #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(7) { width: 100% !important; max-width: 820px !important; margin-left: auto !important; margin-right: auto !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(6) { margin-top: 20px !important; } } /* ========================================================= SMARTPHONE ========================================================= */ @media (max-width: 767px) { #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] { padding: 52px 0 !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container { display: block !important; width: calc(100% - 28px) !important; max-width: none !important; margin: 0 auto !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] h2 { width: 100% !important; max-width: 100% !important; margin: 0 auto 18px !important; text-align: center !important; font-size: clamp(2rem, 9vw, 2.8rem) !important; line-height: 1 !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] h2::before { content: "LAVERIE LIBRE-SERVICE"; display: table !important; margin: 0 auto 10px !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] .sove-inline-image { width: 100% !important; max-width: 100% !important; margin: 0 0 16px !important; border-radius: 20px !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] .sove-inline-image img { width: 100% !important; height: 240px !important; object-fit: cover !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(1), #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(2) { width: 100% !important; max-width: 100% !important; margin: 0 0 10px !important; text-align: center !important; font-size: 14px !important; line-height: 1.58 !important; } /* ===================================================== QUESTIONS MOBILE ===================================================== */ #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > h3 { width: 100% !important; max-width: 100% !important; margin: 14px 0 0 !important; padding: 18px 14px 12px !important; border: 1px solid rgba(17,18,20,.08) !important; border-bottom: 0 !important; border-radius: 20px 20px 0 0 !important; background: #FFFFFF !important; color: #111214 !important; text-align: center !important; font-size: 1.18rem !important; line-height: 1.16 !important; font-weight: 950 !important; box-shadow: 0 14px 30px rgba(17,18,20,.05) !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > h3::before { display: flex !important; align-items: center !important; justify-content: center !important; width: 42px !important; height: 42px !important; margin: 0 auto 12px !important; padding: 0 !important; border-radius: 13px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #FFFFFF !important; font-size: 10px !important; line-height: 1 !important; font-weight: 950 !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > h3:nth-of-type(1)::before { content: "01" !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > h3:nth-of-type(2)::before { content: "02" !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > h3:nth-of-type(3)::before { content: "03" !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(3), #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(4), #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(5) { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 14px 18px !important; border: 1px solid rgba(17,18,20,.08) !important; border-top: 0 !important; border-radius: 0 0 20px 20px !important; background: #FFFFFF !important; color: #4E5D64 !important; text-align: center !important; font-size: 14px !important; line-height: 1.58 !important; box-shadow: 0 14px 30px rgba(17,18,20,.05) !important; } /* TOUCH'N PAY */ #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(6) { width: 100% !important; max-width: 100% !important; margin: 18px 0 12px !important; padding: 18px 14px !important; border-radius: 20px !important; background: linear-gradient( 135deg, #111315, #183441 ) !important; color: #FFFFFF !important; text-align: center !important; font-size: 15px !important; line-height: 1.56 !important; font-weight: 800 !important; box-shadow: 0 18px 38px rgba(17,18,20,.13) !important; } #sovematic-payment-page [id="centrale-de-paiement-pour-laverie-libre-service"] > .sove-container > p:nth-of-type(7) { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 14px 12px !important; border-radius: 16px !important; background: rgba(31,78,95,.07) !important; color: #1F4E5F !important; text-align: center !important; font-size: 13.5px !important; line-height: 1.56 !important; font-weight: 760 !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-5872c5c *//* ========================================================= ÉCRAN TACTILE — PATCH CORRECTIF PREMIUM HTML INCHANGÉ ========================================================= */ #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] { position: relative !important; overflow: hidden !important; padding: clamp(72px, 7vw, 110px) 0 !important; background: radial-gradient(circle at 0% 0%, rgba(222,7,45,.055), transparent 28%), radial-gradient(circle at 100% 100%, rgba(31,78,95,.08), transparent 32%), linear-gradient(180deg, #ffffff 0%, #f7f9fa 100%) !important; } #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"]::before { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; background: linear-gradient(rgba(17,18,20,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(17,18,20,.018) 1px, transparent 1px) !important; background-size: 42px 42px !important; } /* ========================================================= CONTENEUR ========================================================= */ #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] > .sove-container { position: relative !important; z-index: 2 !important; width: min(1260px, calc(100% - 64px)) !important; max-width: 1260px !important; margin: 0 auto !important; } /* ========================================================= DESKTOP ========================================================= */ @media (min-width: 1101px) { #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] > .sove-container { display: grid !important; grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr) !important; column-gap: clamp(38px, 5vw, 76px) !important; row-gap: 14px !important; align-items: start !important; } /* ===================================================== TITRE ===================================================== */ #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] h2 { grid-column: 1 !important; max-width: 760px !important; margin: 0 0 10px !important; color: #111214 !important; font-size: clamp(3rem, 4.15vw, 4.9rem) !important; line-height: .94 !important; letter-spacing: -.055em !important; text-wrap: balance !important; } #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] h2::before { content: "TOUCH’N PAY • EXPÉRIENCE UTILISATEUR"; display: table !important; margin: 0 0 14px !important; padding: 8px 13px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 9px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .11em !important; box-shadow: 0 12px 28px rgba(222,7,45,.18) !important; } /* ===================================================== GROS BLOC TECHNIQUE À DROITE ===================================================== */ #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] > .sove-container::after { content: "10,1″\AÉCRAN TACTILE\A\A800 × 1280\ARÉSOLUTION\A\AInterface client"; white-space: pre-line !important; grid-column: 2 !important; grid-row: 1 / span 5 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; min-height: 410px !important; padding: 38px 34px !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 34px !important; background: radial-gradient(circle at 100% 0%, rgba(31,78,95,.26), transparent 42%), linear-gradient(145deg, #101315 0%, #173541 100%) !important; color: #fff !important; font-size: 18px !important; line-height: 1.55 !important; font-weight: 850 !important; letter-spacing: -.01em !important; box-shadow: 0 34px 80px rgba(17,18,20,.18), inset 0 1px 0 rgba(255,255,255,.08) !important; } /* ===================================================== TEXTE INTRO ===================================================== */ #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] > .sove-container > p:nth-of-type(1) { grid-column: 1 !important; max-width: 730px !important; margin: 0 !important; color: #4E5D64 !important; font-size: 16px !important; line-height: 1.7 !important; } #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] > .sove-container > p:nth-of-type(1) strong { color: #111214 !important; font-weight: 900 !important; } /* Pourquoi est-ce important ? */ #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] > .sove-container > p:nth-of-type(2) { grid-column: 1 !important; width: fit-content !important; margin: 6px 0 0 !important; padding: 9px 13px !important; border-radius: 999px !important; background: rgba(17,18,20,.055) !important; color: #111214 !important; font-size: 11px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .075em !important; text-transform: uppercase !important; } #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] > .sove-container > p:nth-of-type(3) { grid-column: 1 !important; margin: 0 !important; color: #4E5D64 !important; font-size: 15px !important; line-height: 1.65 !important; } /* Phrase clé */ #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] > .sove-container > p:nth-of-type(4) { grid-column: 1 !important; position: relative !important; margin: 4px 0 0 !important; padding: 22px 22px 22px 28px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 22px !important; background: linear-gradient(135deg, #fff, #f5f8fa) !important; color: #111214 !important; font-size: 18px !important; line-height: 1.45 !important; box-shadow: 0 16px 38px rgba(17,18,20,.055) !important; } #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] > .sove-container > p:nth-of-type(4)::before { content: "" !important; position: absolute !important; left: 0 !important; top: 18px !important; bottom: 18px !important; width: 4px !important; border-radius: 999px !important; background: linear-gradient(180deg, #DE072D, #1F4E5F) !important; } /* ===================================================== "SI L'UTILISATEUR NE COMPREND PAS" ===================================================== */ #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] > .sove-container > p:nth-of-type(5) { grid-column: 1 / -1 !important; margin: 32px 0 4px !important; text-align: center !important; color: #111214 !important; font-size: clamp(1.45rem, 2vw, 2rem) !important; line-height: 1.1 !important; font-weight: 950 !important; letter-spacing: -.025em !important; } #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] > .sove-container > p:nth-of-type(5)::before { content: "3 QUESTIONS ESSENTIELLES"; display: table !important; margin: 0 auto 10px !important; padding: 8px 12px !important; border-radius: 999px !important; background: rgba(222,7,45,.08) !important; color: #DE072D !important; font-size: 9px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .1em !important; } /* ===================================================== LES 3 CARTES ===================================================== */ #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] > .sove-container > ul { counter-reset: tactile-ui !important; grid-column: 1 / -1 !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 16px !important; width: 100% !important; margin: 10px 0 18px !important; padding: 0 !important; list-style: none !important; } #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] > .sove-container > ul > li { counter-increment: tactile-ui !important; position: relative !important; display: flex !important; flex-direction: column !important; min-width: 0 !important; min-height: 190px !important; margin: 0 !important; padding: 24px 20px 20px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 26px !important; background: radial-gradient(circle at 100% 0%, rgba(31,78,95,.08), transparent 40%), linear-gradient(180deg, #fff 0%, #f7f9fb 100%) !important; color: #24373F !important; font-size: 16px !important; line-height: 1.5 !important; font-weight: 760 !important; box-shadow: 0 20px 46px rgba(17,18,20,.06), inset 0 1px 0 rgba(255,255,255,.8) !important; } #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] > .sove-container > ul > li::before { content: counter(tactile-ui, decimal-leading-zero) !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 46px !important; height: 46px !important; margin: 0 0 20px !important; border-radius: 15px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 12px !important; line-height: 1 !important; font-weight: 950 !important; box-shadow: 0 12px 24px rgba(222,7,45,.20) !important; } /* ===================================================== CONSÉQUENCE ===================================================== */ #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] > .sove-container > p:nth-of-type(6) { grid-column: 1 / 2 !important; margin: 0 !important; padding: 24px 22px !important; border-radius: 26px !important; background: linear-gradient(135deg, #111315, #183441) !important; color: #fff !important; text-align: center !important; font-size: 17px !important; line-height: 1.58 !important; font-weight: 820 !important; box-shadow: 0 22px 50px rgba(17,18,20,.14) !important; } /* conclusion */ #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] > .sove-container > p:nth-of-type(7) { grid-column: 2 / 3 !important; margin: 0 !important; padding: 24px 22px !important; border: 1px solid rgba(31,78,95,.10) !important; border-radius: 26px !important; background: linear-gradient(135deg, #fff, #edf5f7) !important; color: #1F4E5F !important; text-align: center !important; font-size: 16px !important; line-height: 1.6 !important; font-weight: 760 !important; box-shadow: 0 18px 42px rgba(17,18,20,.055) !important; } #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] hr { display: none !important; } } /* ========================================================= TABLETTE ========================================================= */ @media (min-width: 768px) and (max-width: 1100px) { #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] > .sove-container { display: block !important; width: calc(100% - 48px) !important; max-width: 900px !important; } #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] h2 { max-width: 820px !important; margin: 0 auto 18px !important; text-align: center !important; font-size: clamp(2.45rem, 5.2vw, 3.8rem) !important; line-height: .98 !important; } #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] h2::before { content: "TOUCH’N PAY • INTERFACE CLIENT"; display: table !important; margin: 0 auto 12px !important; } #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] > .sove-container::after { content: "10,1″ • 800 × 1280 • ÉCRAN TACTILE"; display: flex !important; align-items: center !important; justify-content: center !important; min-height: 150px !important; margin: 0 0 20px !important; padding: 20px !important; border-radius: 24px !important; background: linear-gradient(135deg, #111315, #183441) !important; color: #fff !important; text-align: center !important; font-size: 18px !important; line-height: 1.4 !important; font-weight: 850 !important; box-shadow: 0 20px 46px rgba(17,18,20,.14) !important; } #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] > .sove-container > p { max-width: 820px !important; margin-left: auto !important; margin-right: auto !important; } #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] > .sove-container > p:nth-of-type(1), #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] > .sove-container > p:nth-of-type(3), #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] > .sove-container > p:nth-of-type(4) { text-align: center !important; color: #4E5D64 !important; line-height: 1.62 !important; } #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] > .sove-container > p:nth-of-type(2) { display: table !important; margin: 10px auto !important; padding: 9px 13px !important; border-radius: 999px !important; background: rgba(17,18,20,.055) !important; color: #111214 !important; font-size: 10px !important; font-weight: 950 !important; text-transform: uppercase !important; } #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] > .sove-container > p:nth-of-type(4) { padding: 18px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 20px !important; background: #fff !important; box-shadow: 0 16px 36px rgba(17,18,20,.05) !important; } #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] > .sove-container > p:nth-of-type(5) { margin-top: 28px !important; text-align: center !important; color: #111214 !important; font-size: 1.5rem !important; line-height: 1.1 !important; font-weight: 950 !important; } #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] > .sove-container > ul { counter-reset: tactile-ui !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; margin: 14px 0 18px !important; padding: 0 !important; list-style: none !important; } #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] > .sove-container > ul > li { counter-increment: tactile-ui !important; min-width: 0 !important; min-height: 160px !important; margin: 0 !important; padding: 18px 14px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 20px !important; background: #fff !important; color: #24373F !important; text-align: center !important; font-size: 14px !important; line-height: 1.5 !important; font-weight: 700 !important; box-shadow: 0 14px 32px rgba(17,18,20,.05) !important; } #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] > .sove-container > ul > li::before { content: counter(tactile-ui, decimal-leading-zero) !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; margin: 0 auto 12px !important; border-radius: 13px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 11px !important; font-weight: 950 !important; } #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] > .sove-container > p:nth-of-type(6), #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] > .sove-container > p:nth-of-type(7) { margin-bottom: 12px !important; padding: 18px !important; border-radius: 20px !important; text-align: center !important; } #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] > .sove-container > p:nth-of-type(6) { background: linear-gradient(135deg, #111315, #183441) !important; color: #fff !important; } #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] > .sove-container > p:nth-of-type(7) { background: rgba(31,78,95,.07) !important; color: #1F4E5F !important; } #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] hr { display: none !important; } } /* ========================================================= SMARTPHONE ========================================================= */ @media (max-width: 767px) { #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] { padding: 52px 0 !important; } #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] > .sove-container { display: block !important; width: calc(100% - 28px) !important; } #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] h2 { margin: 0 auto 16px !important; text-align: center !important; font-size: clamp(2rem, 9vw, 2.85rem) !important; line-height: 1 !important; letter-spacing: -.04em !important; } #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] h2::before { content: "ÉCRAN TACTILE"; display: table !important; margin: 0 auto 10px !important; } #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] > .sove-container::after { content: "10,1″\A800 × 1280\AInterface tactile"; white-space: pre-line !important; display: flex !important; align-items: center !important; justify-content: center !important; min-height: 150px !important; margin: 0 0 16px !important; padding: 18px 14px !important; border-radius: 22px !important; background: linear-gradient(135deg, #111315, #183441) !important; color: #fff !important; text-align: center !important; font-size: 16px !important; line-height: 1.55 !important; font-weight: 850 !important; box-shadow: 0 18px 40px rgba(17,18,20,.13) !important; } #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] > .sove-container > p { margin: 0 0 10px !important; text-align: center !important; font-size: 14px !important; line-height: 1.58 !important; color: #4E5D64 !important; } #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] > .sove-container > p:nth-of-type(2) { display: table !important; margin: 12px auto !important; padding: 8px 11px !important; border-radius: 999px !important; background: rgba(17,18,20,.055) !important; color: #111214 !important; font-size: 9px !important; line-height: 1 !important; font-weight: 950 !important; text-transform: uppercase !important; } #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] > .sove-container > p:nth-of-type(4) { padding: 16px 14px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 18px !important; background: #fff !important; color: #111214 !important; font-weight: 800 !important; box-shadow: 0 14px 30px rgba(17,18,20,.05) !important; } #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] > .sove-container > p:nth-of-type(5) { margin-top: 22px !important; color: #111214 !important; font-size: 1.35rem !important; line-height: 1.1 !important; font-weight: 950 !important; } /* cartes */ #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] > .sove-container > ul { counter-reset: tactile-ui !important; display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; margin: 14px 0 16px !important; padding: 0 !important; list-style: none !important; } #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] > .sove-container > ul > li { counter-increment: tactile-ui !important; margin: 0 !important; padding: 16px 14px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 18px !important; background: #fff !important; color: #24373F !important; text-align: center !important; font-size: 14px !important; line-height: 1.5 !important; font-weight: 700 !important; box-shadow: 0 12px 26px rgba(17,18,20,.05) !important; } #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] > .sove-container > ul > li::before { content: counter(tactile-ui, decimal-leading-zero) !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; height: 38px !important; margin: 0 auto 12px !important; border-radius: 13px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 11px !important; font-weight: 950 !important; } #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] > .sove-container > p:nth-of-type(6) { margin: 0 0 10px !important; padding: 17px 14px !important; border-radius: 18px !important; background: linear-gradient(135deg, #111315, #183441) !important; color: #fff !important; font-weight: 800 !important; box-shadow: 0 16px 34px rgba(17,18,20,.13) !important; } #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] > .sove-container > p:nth-of-type(7) { margin: 0 !important; padding: 14px 12px !important; border-radius: 16px !important; background: rgba(31,78,95,.07) !important; color: #1F4E5F !important; font-weight: 760 !important; } #sovematic-payment-page section.sove-section[id*="linterface-fait-partie"] hr { display: none !important; } }/* ========================================================= UNE BORNE CONÇUE POUR UN ENVIRONNEMENT ACCESSIBLE AU PUBLIC PATCH PREMIUM / RESPONSIVE / HTML INCHANGÉ ========================================================= */ #sovematic-payment-page section.sove-section[id*="borne"][id*="accessible"] { position: relative !important; overflow: hidden !important; padding: clamp(72px, 7vw, 116px) 0 !important; background: radial-gradient(circle at 0% 0%, rgba(222,7,45,.05), transparent 26%), radial-gradient(circle at 100% 100%, rgba(31,78,95,.08), transparent 34%), linear-gradient(180deg, #ffffff 0%, #f7f9fb 100%) !important; } #sovematic-payment-page section.sove-section[id*="borne"][id*="accessible"]::before { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; background: linear-gradient(rgba(17,18,20,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(17,18,20,.018) 1px, transparent 1px) !important; background-size: 42px 42px !important; opacity: .5 !important; } #sovematic-payment-page section.sove-section[id*="borne"][id*="accessible"] > .sove-container { position: relative !important; z-index: 2 !important; width: min(1260px, calc(100% - 64px)) !important; max-width: 1260px !important; margin: 0 auto !important; } /* ========================================================= DESKTOP ========================================================= */ @media (min-width: 1101px) { #sovematic-payment-page section.sove-section[id*="borne"][id*="accessible"] > .sove-container { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(420px, .95fr) !important; column-gap: clamp(38px, 5vw, 74px) !important; row-gap: 14px !important; align-items: start !important; } /* ===================================================== TITRE ===================================================== */ #sovematic-payment-page section.sove-section[id*="borne"][id*="accessible"] h2 { grid-column: 1 !important; max-width: 760px !important; margin: 0 0 10px !important; color: #111214 !important; font-size: clamp(3rem, 4.05vw, 4.8rem) !important; line-height: .95 !important; letter-spacing: -.055em !important; text-wrap: balance !important; } #sovematic-payment-page section.sove-section[id*="borne"][id*="accessible"] h2::before { content: "BORNE TACTILE • ENVIRONNEMENT COLLECTIF"; display: table !important; margin: 0 0 14px !important; padding: 8px 13px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 9px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .11em !important; box-shadow: 0 12px 28px rgba(222,7,45,.18) !important; } /* ===================================================== IMAGE À DROITE ===================================================== */ #sovematic-payment-page section.sove-section[id*="borne"][id*="accessible"] .sove-inline-image { grid-column: 2 !important; grid-row: 1 / span 6 !important; width: 100% !important; max-width: none !important; margin: 0 !important; overflow: hidden !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 34px !important; background: radial-gradient(circle at 100% 0%, rgba(31,78,95,.22), transparent 38%), linear-gradient(145deg, #101315 0%, #173541 100%) !important; box-shadow: 0 34px 80px rgba(17,18,20,.16), inset 0 1px 0 rgba(255,255,255,.07) !important; } #sovematic-payment-page section.sove-section[id*="borne"][id*="accessible"] .sove-inline-image img { display: block !important; width: 100% !important; height: 430px !important; object-fit: cover !important; } #sovematic-payment-page section.sove-section[id*="borne"][id*="accessible"] .sove-inline-image figcaption { padding: 12px 16px !important; background: rgba(255,255,255,.96) !important; color: #65747B !important; font-size: 11px !important; line-height: 1.4 !important; } /* ===================================================== INTRO ===================================================== */ #sovematic-payment-page section.sove-section[id*="borne"][id*="accessible"] > .sove-container > p:nth-of-type(1) { grid-column: 1 !important; max-width: 720px !important; margin: 0 !important; color: #4E5D64 !important; font-size: 16px !important; line-height: 1.72 !important; } #sovematic-payment-page section.sove-section[id*="borne"][id*="accessible"] > .sove-container > p:nth-of-type(2) { grid-column: 1 !important; margin: 4px 0 0 !important; padding: 18px 20px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 22px !important; background: linear-gradient(135deg, #ffffff, #f4f8fa) !important; color: #111214 !important; font-size: 15px !important; line-height: 1.62 !important; font-weight: 760 !important; box-shadow: 0 16px 36px rgba(17,18,20,.05) !important; } #sovematic-payment-page section.sove-section[id*="borne"][id*="accessible"] > .sove-container > p:nth-of-type(2)::before { content: "CARACTÉRISTIQUES CLÉS"; display: table !important; margin: 0 0 12px !important; padding: 7px 10px !important; border-radius: 999px !important; background: rgba(31,78,95,.08) !important; color: #1F4E5F !important; font-size: 9px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .10em !important; } /* ===================================================== LISTE → 2x2 CARTES ===================================================== */ #sovematic-payment-page section.sove-section[id*="borne"][id*="accessible"] > .sove-container > ul { counter-reset: borne-tech !important; grid-column: 1 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; width: 100% !important; max-width: 760px !important; margin: 10px 0 4px !important; padding: 0 !important; list-style: none !important; } #sovematic-payment-page section.sove-section[id*="borne"][id*="accessible"] > .sove-container > ul > li { counter-increment: borne-tech !important; position: relative !important; min-height: 126px !important; margin: 0 !important; padding: 20px 18px 18px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 24px !important; background: radial-gradient(circle at 100% 0%, rgba(31,78,95,.08), transparent 40%), linear-gradient(180deg, #ffffff 0%, #f7f9fb 100%) !important; box-shadow: 0 18px 40px rgba(17,18,20,.05), inset 0 1px 0 rgba(255,255,255,.8) !important; color: #24373F !important; font-size: 15px !important; line-height: 1.5 !important; font-weight: 760 !important; } #sovematic-payment-page section.sove-section[id*="borne"][id*="accessible"] > .sove-container > ul > li::before { content: counter(borne-tech, decimal-leading-zero) !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 42px !important; height: 42px !important; margin: 0 0 16px !important; border-radius: 14px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 11px !important; line-height: 1 !important; font-weight: 950 !important; box-shadow: 0 12px 24px rgba(222,7,45,.18) !important; } /* ===================================================== CONCLUSION ===================================================== */ #sovematic-payment-page section.sove-section[id*="borne"][id*="accessible"] > .sove-container > p:nth-of-type(3) { grid-column: 1 / -1 !important; width: min(100%, 1120px) !important; max-width: 1120px !important; margin: 18px auto 0 !important; padding: 22px 24px !important; border-radius: 26px !important; background: linear-gradient(135deg, #111315, #183441) !important; color: #fff !important; text-align: center !important; font-size: 17px !important; line-height: 1.58 !important; font-weight: 820 !important; box-shadow: 0 24px 54px rgba(17,18,20,.14) !important; } #sovematic-payment-page section.sove-section[id*="borne"][id*="accessible"] hr { display: none !important; } } /* ========================================================= TABLETTE ========================================================= */ @media (min-width: 768px) and (max-width: 1100px) { #sovematic-payment-page section.sove-section[id*="borne"][id*="accessible"] > .sove-container { display: block !important; width: calc(100% - 48px) !important; max-width: 920px !important; } #sovematic-payment-page section.sove-section[id*="borne"][id*="accessible"] h2 { max-width: 820px !important; margin: 0 auto 18px !important; text-align: center !important; font-size: clamp(2.45rem, 5.2vw, 3.8rem) !important; line-height: .98 !important; } #sovematic-payment-page section.sove-section[id*="borne"][id*="accessible"] h2::before { content: "BORNE TACTILE • ROBUSTESSE"; display: table !important; margin: 0 auto 12px !important; padding: 8px 12px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 8px !important; font-weight: 950 !important; letter-spacing: .10em !important; } #sovematic-payment-page section.sove-section[id*="borne"][id*="accessible"] .sove-inline-image { width: 100% !important; max-width: 820px !important; margin: 0 auto 18px !important; overflow: hidden !important; border-radius: 26px !important; background: linear-gradient(135deg, #111315, #183441) !important; box-shadow: 0 22px 50px rgba(17,18,20,.14) !important; } #sovematic-payment-page section.sove-section[id*="borne"][id*="accessible"] .sove-inline-image img { width: 100% !important; height: 360px !important; object-fit: cover !important; } #sovematic-payment-page section.sove-section[id*="borne"][id*="accessible"] > .sove-container > p:nth-of-type(1), #sovematic-payment-page section.sove-section[id*="borne"][id*="accessible"] > .sove-container > p:nth-of-type(2), #sovematic-payment-page section.sove-section[id*="borne"][id*="accessible"] > .sove-container > p:nth-of-type(3) { max-width: 820px !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; } #sovematic-payment-page section.sove-section[id*="borne"][id*="accessible"] > .sove-container > p:nth-of-type(1) { color: #4E5D64 !important; line-height: 1.62 !important; } #sovematic-payment-page section.sove-section[id*="borne"][id*="accessible"] > .sove-container > p:nth-of-type(2) { margin-top: 0 !important; margin-bottom: 14px !important; padding: 18px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 20px !important; background: #fff !important; color: #111214 !important; box-shadow: 0 16px 36px rgba(17,18,20,.05) !important; } #sovematic-payment-page section.sove-section[id*="borne"][id*="accessible"] > .sove-container > ul { counter-reset: borne-tech !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; max-width: 820px !important; margin: 0 auto 16px !important; padding: 0 !important; list-style: none !important; } #sovematic-payment-page section.sove-section[id*="borne"][id*="accessible"] > .sove-container > ul > li { counter-increment: borne-tech !important; min-height: 144px !important; margin: 0 !important; padding: 18px 16px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 20px !important; background: #fff !important; box-shadow: 0 14px 34px rgba(17,18,20,.05) !important; color: #24373F !important; text-align: center !important; font-size: 14px !important; line-height: 1.5 !important; font-weight: 700 !important; } #sovematic-payment-page section.sove-section[id*="borne"][id*="accessible"] > .sove-container > ul > li::before { content: counter(borne-tech, decimal-leading-zero) !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; margin: 0 auto 12px !important; border-radius: 13px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 11px !important; font-weight: 950 !important; } #sovematic-payment-page section.sove-section[id*="borne"][id*="accessible"] > .sove-container > p:nth-of-type(3) { margin-top: 0 !important; padding: 20px 18px !important; border-radius: 22px !important; background: linear-gradient(135deg, #111315, #183441) !important; color: #fff !important; font-size: 16px !important; line-height: 1.58 !important; font-weight: 820 !important; box-shadow: 0 18px 40px rgba(17,18,20,.12) !important; } #sovematic-payment-page section.sove-section[id*="borne"][id*="accessible"] hr { display: none !important; } } /* ========================================================= SMARTPHONE ========================================================= */ @media (max-width: 767px) { #sovematic-payment-page section.sove-section[id*="borne"][id*="accessible"] { padding: 52px 0 !important; } #sovematic-payment-page section.sove-section[id*="borne"][id*="accessible"] > .sove-container { display: block !important; width: calc(100% - 28px) !important; } #sovematic-payment-page section.sove-section[id*="borne"][id*="accessible"] h2 { margin: 0 auto 16px !important; text-align: center !important; font-size: clamp(2rem, 8.8vw, 2.85rem) !important; line-height: 1 !important; letter-spacing: -.04em !important; } #sovematic-payment-page section.sove-section[id*="borne"][id*="accessible"] h2::before { content: "BORNE ROBUSTE"; display: table !important; margin: 0 auto 10px !important; padding: 7px 10px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 8px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .10em !important; } #sovematic-payment-page section.sove-section[id*="borne"][id*="accessible"] .sove-inline-image { width: 100% !important; margin: 0 0 16px !important; overflow: hidden !important; border-radius: 22px !important; background: linear-gradient(135deg, #111315, #183441) !important; box-shadow: 0 18px 40px rgba(17,18,20,.12) !important; } #sovematic-payment-page section.sove-section[id*="borne"][id*="accessible"] .sove-inline-image img { width: 100% !important; height: 240px !important; object-fit: cover !important; } #sovematic-payment-page section.sove-section[id*="borne"][id*="accessible"] > .sove-container > p:nth-of-type(1), #sovematic-payment-page section.sove-section[id*="borne"][id*="accessible"] > .sove-container > p:nth-of-type(2), #sovematic-payment-page section.sove-section[id*="borne"][id*="accessible"] > .sove-container > p:nth-of-type(3) { text-align: center !important; } #sovematic-payment-page section.sove-section[id*="borne"][id*="accessible"] > .sove-container > p:nth-of-type(1) { margin: 0 0 10px !important; color: #4E5D64 !important; font-size: 14px !important; line-height: 1.58 !important; } #sovematic-payment-page section.sove-section[id*="borne"][id*="accessible"] > .sove-container > p:nth-of-type(2) { margin: 0 0 14px !important; padding: 16px 14px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 18px !important; background: #fff !important; color: #111214 !important; font-size: 14px !important; line-height: 1.56 !important; font-weight: 760 !important; box-shadow: 0 14px 30px rgba(17,18,20,.05) !important; } #sovematic-payment-page section.sove-section[id*="borne"][id*="accessible"] > .sove-container > p:nth-of-type(2)::before { content: "POINTS DE ROBUSTESSE"; display: table !important; margin: 0 auto 10px !important; padding: 7px 10px !important; border-radius: 999px !important; background: rgba(31,78,95,.08) !important; color: #1F4E5F !important; font-size: 8px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .10em !important; } #sovematic-payment-page section.sove-section[id*="borne"][id*="accessible"] > .sove-container > ul { counter-reset: borne-tech !important; display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; margin: 0 0 14px !important; padding: 0 !important; list-style: none !important; } #sovematic-payment-page section.sove-section[id*="borne"][id*="accessible"] > .sove-container > ul > li { counter-increment: borne-tech !important; margin: 0 !important; padding: 16px 14px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 18px !important; background: #fff !important; box-shadow: 0 12px 26px rgba(17,18,20,.05) !important; color: #24373F !important; text-align: center !important; font-size: 14px !important; line-height: 1.5 !important; font-weight: 700 !important; } #sovematic-payment-page section.sove-section[id*="borne"][id*="accessible"] > .sove-container > ul > li::before { content: counter(borne-tech, decimal-leading-zero) !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; height: 38px !important; margin: 0 auto 12px !important; border-radius: 13px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 11px !important; line-height: 1 !important; font-weight: 950 !important; box-shadow: 0 10px 20px rgba(222,7,45,.18) !important; } #sovematic-payment-page section.sove-section[id*="borne"][id*="accessible"] > .sove-container > p:nth-of-type(3) { margin: 0 !important; padding: 17px 14px !important; border-radius: 18px !important; background: linear-gradient(135deg, #111315, #183441) !important; color: #fff !important; font-size: 15px !important; line-height: 1.56 !important; font-weight: 820 !important; box-shadow: 0 16px 34px rgba(17,18,20,.13) !important; } #sovematic-payment-page section.sove-section[id*="borne"][id*="accessible"] hr { display: none !important; } }/* ========================================================= COMMENT DIMENSIONNER UNE CENTRALE DE PAIEMENT ? VERSION FOND SOMBRE / PREMIUM / RESPONSIVE HTML INCHANGÉ ========================================================= */ #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] { position: relative !important; overflow: hidden !important; padding: clamp(72px, 7vw, 110px) 0 !important; background: radial-gradient(circle at 0% 0%, rgba(222,7,45,.14), transparent 28%), radial-gradient(circle at 100% 100%, rgba(31,78,95,.18), transparent 32%), linear-gradient(135deg, #0b1014 0%, #10232c 50%, #0d1820 100%) !important; } #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"]::before { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; background: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) !important; background-size: 38px 38px !important; opacity: .22 !important; } #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] > .sove-container { position: relative !important; z-index: 2 !important; width: min(1240px, calc(100% - 56px)) !important; max-width: 1240px !important; margin: 0 auto !important; } /* ========================================================= TITRE + INTRO ========================================================= */ #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] h2 { max-width: 860px !important; margin: 0 0 14px !important; color: #ffffff !important; font-size: clamp(2.4rem, 4vw, 4.7rem) !important; line-height: .96 !important; letter-spacing: -.05em !important; text-wrap: balance !important; } #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] h2::before { content: "MÉTHODE DE DIMENSIONNEMENT"; display: table !important; margin: 0 0 14px !important; padding: 8px 13px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 9px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .11em !important; box-shadow: 0 12px 28px rgba(222,7,45,.22) !important; } #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] > .sove-container > p:first-of-type { max-width: 760px !important; margin: 0 0 26px !important; color: rgba(255,255,255,.74) !important; font-size: 15px !important; line-height: 1.72 !important; } /* ========================================================= WRAPPER DES CARTES (plusieurs variantes de sélecteurs au cas où) ========================================================= */ #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-grid, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-cards, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-steps, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-cards-grid, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-step-grid, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] > .sove-container > div:has(> div:nth-child(2)) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px !important; width: 100% !important; margin-top: 12px !important; } /* ========================================================= CARTES ========================================================= */ #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-grid > div, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-cards > div, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-steps > div, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-cards-grid > div, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-step-grid > div, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] > .sove-container > div:has(> div:nth-child(2)) > div { position: relative !important; min-width: 0 !important; min-height: 210px !important; margin: 0 !important; padding: 24px 22px 22px !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 22px !important; background: radial-gradient(circle at 100% 0%, rgba(31,78,95,.16), transparent 42%), linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.03) 100%) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; box-shadow: 0 20px 46px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06) !important; color: #fff !important; } /* petit numéro / badge si aucun vrai badge n'est bien stylé */ #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-grid > div::before, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-cards > div::before, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-steps > div::before, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-cards-grid > div::before, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-step-grid > div::before, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] > .sove-container > div:has(> div:nth-child(2)) > div::before { content: ""; position: absolute !important; inset: auto 0 0 0 !important; height: 4px !important; border-radius: 999px !important; background: linear-gradient(90deg, #DE072D 0%, #A92B59 52%, #2C6175 100%) !important; } /* ========================================================= CONTENU INTERNE DES CARTES ========================================================= */ #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-grid > div h3, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-grid > div h4, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-cards > div h3, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-cards > div h4, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-steps > div h3, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-steps > div h4, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-cards-grid > div h3, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-cards-grid > div h4, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-step-grid > div h3, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-step-grid > div h4, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] > .sove-container > div:has(> div:nth-child(2)) > div h3, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] > .sove-container > div:has(> div:nth-child(2)) > div h4 { margin: 0 0 12px !important; color: #ffffff !important; font-size: 19px !important; line-height: 1.24 !important; font-weight: 900 !important; letter-spacing: -.02em !important; } #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-grid > div p, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-cards > div p, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-steps > div p, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-cards-grid > div p, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-step-grid > div p, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] > .sove-container > div:has(> div:nth-child(2)) > div p { margin: 0 0 10px !important; color: rgba(255,255,255,.78) !important; font-size: 14px !important; line-height: 1.62 !important; } #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-grid > div ul, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-cards > div ul, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-steps > div ul, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-cards-grid > div ul, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-step-grid > div ul, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] > .sove-container > div:has(> div:nth-child(2)) > div ul { margin: 10px 0 0 !important; padding: 0 !important; list-style: none !important; } #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-grid > div ul li, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-cards > div ul li, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-steps > div ul li, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-cards-grid > div ul li, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-step-grid > div ul li, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] > .sove-container > div:has(> div:nth-child(2)) > div ul li { position: relative !important; margin: 0 0 8px !important; padding-left: 18px !important; color: rgba(255,255,255,.8) !important; font-size: 14px !important; line-height: 1.5 !important; } #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-grid > div ul li::before, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-cards > div ul li::before, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-steps > div ul li::before, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-cards-grid > div ul li::before, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-step-grid > div ul li::before, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] > .sove-container > div:has(> div:nth-child(2)) > div ul li::before { content: "" !important; position: absolute !important; left: 0 !important; top: .62em !important; width: 8px !important; height: 8px !important; border-radius: 50% !important; background: #DE072D !important; box-shadow: 0 0 0 5px rgba(222,7,45,.14) !important; } /* ========================================================= 5e carte plus large si possible ========================================================= */ @media (min-width: 1101px) { #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-grid > div:last-child, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-cards > div:last-child, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-steps > div:last-child, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-cards-grid > div:last-child, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-step-grid > div:last-child, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] > .sove-container > div:has(> div:nth-child(2)) > div:last-child { grid-column: 1 / 2 !important; } } /* ========================================================= TABLETTE ========================================================= */ @media (min-width: 768px) and (max-width: 1100px) { #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] > .sove-container { width: calc(100% - 40px) !important; } #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] h2 { text-align: center !important; margin: 0 auto 14px !important; font-size: clamp(2.25rem, 5vw, 3.5rem) !important; } #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] h2::before { margin: 0 auto 12px !important; } #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] > .sove-container > p:first-of-type { margin: 0 auto 22px !important; text-align: center !important; } #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-grid, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-cards, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-steps, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-cards-grid, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-step-grid, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] > .sove-container > div:has(> div:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; } #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-grid > div, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-cards > div, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-steps > div, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-cards-grid > div, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-step-grid > div, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] > .sove-container > div:has(> div:nth-child(2)) > div { min-height: 190px !important; padding: 20px 18px !important; } #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-grid > div h3, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-grid > div h4, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-cards > div h3, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-cards > div h4, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-steps > div h3, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-steps > div h4, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-cards-grid > div h3, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-cards-grid > div h4, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-step-grid > div h3, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-step-grid > div h4, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] > .sove-container > div:has(> div:nth-child(2)) > div h3, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] > .sove-container > div:has(> div:nth-child(2)) > div h4 { font-size: 17px !important; } } /* ========================================================= SMARTPHONE ========================================================= */ @media (max-width: 767px) { #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] { padding: 52px 0 !important; } #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] > .sove-container { width: calc(100% - 24px) !important; } #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] h2 { margin: 0 auto 14px !important; text-align: center !important; font-size: clamp(2rem, 9vw, 2.8rem) !important; line-height: 1 !important; } #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] h2::before { margin: 0 auto 10px !important; font-size: 8px !important; } #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] > .sove-container > p:first-of-type { margin: 0 auto 18px !important; text-align: center !important; font-size: 14px !important; line-height: 1.58 !important; } #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-grid, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-cards, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-steps, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-cards-grid, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-step-grid, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] > .sove-container > div:has(> div:nth-child(2)) { grid-template-columns: 1fr !important; gap: 10px !important; } #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-grid > div, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-cards > div, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-steps > div, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-cards-grid > div, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-step-grid > div, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] > .sove-container > div:has(> div:nth-child(2)) > div { min-height: auto !important; padding: 18px 16px !important; border-radius: 18px !important; } #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-grid > div h3, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-grid > div h4, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-cards > div h3, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-cards > div h4, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-steps > div h3, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-steps > div h4, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-cards-grid > div h3, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-cards-grid > div h4, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-step-grid > div h3, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-step-grid > div h4, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] > .sove-container > div:has(> div:nth-child(2)) > div h3, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] > .sove-container > div:has(> div:nth-child(2)) > div h4 { font-size: 18px !important; text-align: center !important; } #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-grid > div p, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-cards > div p, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-steps > div p, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-cards-grid > div p, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-step-grid > div p, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] > .sove-container > div:has(> div:nth-child(2)) > div p { text-align: center !important; font-size: 14px !important; } #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-grid > div ul li, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-cards > div ul li, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-steps > div ul li, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-cards-grid > div ul li, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] .sove-step-grid > div ul li, #sovematic-payment-page section.sove-section[id*="dimensionner"][id*="centrale"] > .sove-container > div:has(> div:nth-child(2)) > div ul li { text-align: left !important; } }/* ========================================================= LES INFORMATIONS À PRÉPARER AVANT DE DEMANDER UN DEVIS VERSION FOND SOMBRE / PREMIUM / RESPONSIVE HTML INCHANGÉ ========================================================= */ #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) { position: relative !important; overflow: hidden !important; padding: clamp(72px, 7vw, 112px) 0 !important; background: radial-gradient(circle at 0% 0%, rgba(222,7,45,.16), transparent 28%), radial-gradient(circle at 100% 100%, rgba(31,78,95,.20), transparent 34%), linear-gradient(135deg, #0b1014 0%, #10222b 52%, #0d1820 100%) !important; } #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] )::before { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; background: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) !important; background-size: 38px 38px !important; opacity: .20 !important; } #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) > .sove-container { position: relative !important; z-index: 2 !important; width: min(1240px, calc(100% - 56px)) !important; max-width: 1240px !important; margin: 0 auto !important; } /* ========================================================= TITRE + INTRO ========================================================= */ #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) h2 { max-width: 860px !important; margin: 0 0 14px !important; color: #ffffff !important; font-size: clamp(2.55rem, 4vw, 4.7rem) !important; line-height: .96 !important; letter-spacing: -.05em !important; text-wrap: balance !important; } #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) h2::before { content: "PRÉPARATION DU PROJET"; display: table !important; margin: 0 0 14px !important; padding: 8px 13px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 9px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .11em !important; box-shadow: 0 12px 28px rgba(222,7,45,.22) !important; } #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) > .sove-container > p:first-of-type { max-width: 760px !important; margin: 0 0 24px !important; color: rgba(255,255,255,.74) !important; font-size: 15px !important; line-height: 1.72 !important; } /* ========================================================= TABLEAU PREMIUM ========================================================= */ #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table { display: block !important; width: 100% !important; overflow-x: auto !important; border-collapse: separate !important; border-spacing: 0 !important; margin: 0 0 22px !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 24px !important; background: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.02) 100%) !important; box-shadow: 0 24px 60px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.05) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table thead, #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table tbody { width: 100% !important; } #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table tr { background: transparent !important; } #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table thead th { padding: 18px 18px !important; border: 0 !important; background: linear-gradient(135deg, #163847 0%, #1F4E5F 100%) !important; color: #ffffff !important; font-size: 13px !important; line-height: 1.3 !important; font-weight: 900 !important; text-align: left !important; vertical-align: middle !important; } #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table thead th:first-child { border-top-left-radius: 22px !important; } #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table thead th:last-child { border-top-right-radius: 22px !important; } #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table tbody td { padding: 16px 18px !important; border-top: 1px solid rgba(255,255,255,.08) !important; border-right: 1px solid rgba(255,255,255,.06) !important; background: transparent !important; color: rgba(255,255,255,.84) !important; font-size: 14px !important; line-height: 1.5 !important; vertical-align: middle !important; } #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table tbody td:last-child, #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table thead th:last-child { border-right: 0 !important; } #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table tbody tr:nth-child(even) td { background: rgba(255,255,255,.015) !important; } #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table tbody tr:hover td { background: rgba(255,255,255,.035) !important; } /* première colonne plus marquée */ #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table tbody td:first-child { color: #ffffff !important; font-weight: 800 !important; } /* ========================================================= TEXTE APRÈS TABLEAU ========================================================= */ #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) > .sove-container > p:not(:first-of-type) { max-width: 860px !important; margin: 0 0 18px !important; color: rgba(255,255,255,.78) !important; font-size: 15px !important; line-height: 1.68 !important; } #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) > .sove-container > p:not(:first-of-type) strong { color: #ffffff !important; } /* ========================================================= CTA ========================================================= */ #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) a.sove-btn, #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) a[class*="btn"], #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) .wp-block-button__link { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; min-height: 54px !important; padding: 15px 26px !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 14px !important; line-height: 1.2 !important; font-weight: 900 !important; text-decoration: none !important; box-shadow: 0 16px 34px rgba(222,7,45,.26), inset 0 1px 0 rgba(255,255,255,.12) !important; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease !important; } #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) a.sove-btn:hover, #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) a[class*="btn"]:hover, #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) .wp-block-button__link:hover { transform: translateY(-2px) !important; box-shadow: 0 20px 40px rgba(222,7,45,.32), inset 0 1px 0 rgba(255,255,255,.12) !important; filter: brightness(1.04) !important; } /* ========================================================= HR ========================================================= */ #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) hr { display: none !important; } /* ========================================================= TABLETTE ========================================================= */ @media (min-width: 768px) and (max-width: 1100px) { #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) > .sove-container { width: calc(100% - 40px) !important; } #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) h2 { text-align: center !important; margin: 0 auto 14px !important; font-size: clamp(2.2rem, 5vw, 3.6rem) !important; } #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) h2::before { margin: 0 auto 12px !important; } #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) > .sove-container > p:first-of-type, #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) > .sove-container > p:not(:first-of-type) { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table thead th, #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table tbody td { padding: 14px 14px !important; font-size: 13px !important; } } /* ========================================================= SMARTPHONE ========================================================= */ @media (max-width: 767px) { #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) { padding: 52px 0 !important; } #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) > .sove-container { width: calc(100% - 24px) !important; } #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) h2 { margin: 0 auto 14px !important; text-align: center !important; font-size: clamp(2rem, 9vw, 2.8rem) !important; line-height: 1 !important; } #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) h2::before { margin: 0 auto 10px !important; font-size: 8px !important; } #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) > .sove-container > p:first-of-type, #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) > .sove-container > p:not(:first-of-type) { text-align: center !important; font-size: 14px !important; line-height: 1.58 !important; } #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table { border-radius: 18px !important; margin-bottom: 18px !important; } #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table thead th, #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table tbody td { padding: 13px 12px !important; font-size: 13px !important; min-width: 170px !important; } #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) a.sove-btn, #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) a[class*="btn"], #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) .wp-block-button__link { width: 100% !important; justify-content: center !important; padding: 15px 18px !important; font-size: 14px !important; } }/* ========================================================= CORRECTIF TABLEAU — INFORMATIONS AVANT DEVIS À COLLER APRÈS LE PATCH PRÉCÉDENT ========================================================= */ /* ========================================================= DESKTOP + TABLETTE ========================================================= */ @media (min-width: 768px) { #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table { /* IMPORTANT : on annule le display:block précédent */ display: table !important; width: 100% !important; min-width: 0 !important; max-width: none !important; table-layout: fixed !important; border-collapse: separate !important; border-spacing: 0 !important; overflow: visible !important; margin: 8px 0 24px !important; border: 1px solid rgba(255,255,255,.11) !important; border-radius: 24px !important; background: linear-gradient( 180deg, rgba(255,255,255,.065), rgba(255,255,255,.028) ) !important; box-shadow: 0 26px 64px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.055) !important; overflow: hidden !important; } /* RESTAURE LE COMPORTEMENT NORMAL DU TABLEAU */ #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table thead { display: table-header-group !important; } #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table tbody { display: table-row-group !important; } #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table tr { display: table-row !important; } #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table th, #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table td { display: table-cell !important; width: auto !important; min-width: 0 !important; } /* ===================================================== LARGEUR DES 2 COLONNES ===================================================== */ #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table th:first-child, #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table td:first-child { width: 42% !important; } #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table th:last-child, #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table td:last-child { width: 58% !important; } /* ===================================================== HEADER ===================================================== */ #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table thead th { padding: 18px 20px !important; border: 0 !important; border-right: 1px solid rgba(255,255,255,.10) !important; background: linear-gradient( 135deg, #163846 0%, #205468 100% ) !important; color: #fff !important; text-align: left !important; font-size: 12px !important; line-height: 1.3 !important; font-weight: 950 !important; letter-spacing: .04em !important; text-transform: uppercase !important; } #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table thead th:last-child { border-right: 0 !important; } /* ===================================================== CELLULES ===================================================== */ #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table tbody td { padding: 17px 20px !important; border: 0 !important; border-top: 1px solid rgba(255,255,255,.075) !important; border-right: 1px solid rgba(255,255,255,.055) !important; background: rgba(255,255,255,.018) !important; color: rgba(255,255,255,.76) !important; font-size: 14px !important; line-height: 1.5 !important; vertical-align: middle !important; overflow-wrap: anywhere !important; } #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table tbody td:first-child { color: #fff !important; font-weight: 820 !important; } #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table tbody td:last-child { border-right: 0 !important; } /* légère alternance */ #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table tbody tr:nth-child(even) td { background: rgba(255,255,255,.035) !important; } /* hover desktop */ #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table tbody tr { transition: background .2s ease !important; } #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table tbody tr:hover td { background: rgba(31,78,95,.17) !important; } } /* ========================================================= DESKTOP — UN PEU PLUS DE PRÉSENCE ========================================================= */ @media (min-width: 1101px) { #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) > .sove-container { width: min(1180px, calc(100% - 72px)) !important; } #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table { width: 100% !important; } } /* ========================================================= SMARTPHONE ON ABANDONNE LE TABLEAU HORIZONTAL → CHAQUE LIGNE DEVIENT UNE CARTE ========================================================= */ @media (max-width: 767px) { #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table { display: block !important; width: 100% !important; margin: 6px 0 20px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; } /* masque le header, les cartes suffisent */ #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table thead { display: none !important; } #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table tbody { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; width: 100% !important; } /* une ligne = une carte */ #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table tbody tr { display: grid !important; grid-template-columns: 1fr !important; width: 100% !important; overflow: hidden !important; border: 1px solid rgba(255,255,255,.09) !important; border-radius: 18px !important; background: linear-gradient( 145deg, rgba(255,255,255,.07), rgba(255,255,255,.025) ) !important; box-shadow: 0 12px 28px rgba(0,0,0,.14) !important; } #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table tbody td { display: block !important; width: 100% !important; min-width: 0 !important; border: 0 !important; text-align: center !important; overflow-wrap: anywhere !important; } /* Information */ #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table tbody td:first-child { padding: 15px 14px 7px !important; background: transparent !important; color: #fff !important; font-size: 15px !important; line-height: 1.3 !important; font-weight: 900 !important; } /* Exemple */ #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table tbody td:last-child { position: relative !important; padding: 7px 14px 16px !important; background: transparent !important; color: rgba(255,255,255,.70) !important; font-size: 13.5px !important; line-height: 1.5 !important; } #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table tbody td:last-child::before { content: "EXEMPLE"; display: table !important; margin: 0 auto 7px !important; padding: 6px 9px !important; border-radius: 999px !important; background: rgba(31,78,95,.20) !important; color: #BFD6DF !important; font-size: 7px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .1em !important; } }/* ========================================================= CORRECTIF TEXTE TABLEAU FOND BLANC = TEXTE SOMBRE ========================================================= */ #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table tbody td { background: #ffffff !important; color: #42545d !important; font-size: 14px !important; line-height: 1.5 !important; } /* première colonne plus forte */ #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table tbody td:first-child { color: #111214 !important; font-weight: 800 !important; } /* lignes alternées très légèrement grisées */ #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table tbody tr:nth-child(even) td { background: #f7f9fa !important; } /* séparateurs adaptés au fond clair */ #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table tbody td { border-top: 1px solid rgba(17,18,20,.10) !important; border-right: 1px solid rgba(17,18,20,.08) !important; } #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table tbody td:last-child { border-right: 0 !important; } /* hover élégant sur ordinateur */ @media (min-width: 768px) { #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table tbody tr:hover td { background: #edf4f6 !important; color: #183642 !important; } } /* ========================================================= MOBILE Les cartes restent sombres → texte blanc ========================================================= */ @media (max-width: 767px) { #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table tbody td { background: transparent !important; } #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table tbody td:first-child { color: #ffffff !important; } #sovematic-payment-page section.sove-section:is( [id*="informations"][id*="devis"], [id*="preparer"][id*="devis"], [id*="demander-un-devis"], [id*="devis"][id*="preparer"] ) table tbody td:last-child { color: rgba(255,255,255,.72) !important; } }/* ========================================================= CENTRALE DE PAIEMENT ET MACHINES : VÉRIFIEZ LA COMPATIBILITÉ VERSION FOND CLAIR / PREMIUM / RESPONSIVE HTML INCHANGÉ ========================================================= */ #sovematic-payment-page section.sove-section:is( [id*="compatibilite"], [id*="centrale"][id*="machines"], [id*="paiement"][id*="machines"] ) { position: relative !important; overflow: hidden !important; padding: clamp(72px, 7vw, 110px) 0 !important; background: radial-gradient(circle at 0% 0%, rgba(222,7,45,.06), transparent 22%), radial-gradient(circle at 100% 100%, rgba(31,78,95,.08), transparent 30%), linear-gradient(180deg, #f8fafb 0%, #f2f5f7 100%) !important; } #sovematic-payment-page section.sove-section:is( [id*="compatibilite"], [id*="centrale"][id*="machines"], [id*="paiement"][id*="machines"] )::before { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; background: linear-gradient(rgba(17,18,20,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(17,18,20,.025) 1px, transparent 1px) !important; background-size: 36px 36px !important; opacity: .45 !important; } #sovematic-payment-page section.sove-section:is( [id*="compatibilite"], [id*="centrale"][id*="machines"], [id*="paiement"][id*="machines"] ) > .sove-container { position: relative !important; z-index: 2 !important; width: min(1120px, calc(100% - 56px)) !important; max-width: 1120px !important; margin: 0 auto !important; } /* ========================================================= TITRE ========================================================= */ #sovematic-payment-page section.sove-section:is( [id*="compatibilite"], [id*="centrale"][id*="machines"], [id*="paiement"][id*="machines"] ) h2 { max-width: 760px !important; margin: 0 0 18px !important; color: #111214 !important; font-size: clamp(2.35rem, 4vw, 4.2rem) !important; line-height: .96 !important; letter-spacing: -.05em !important; text-wrap: balance !important; } #sovematic-payment-page section.sove-section:is( [id*="compatibilite"], [id*="centrale"][id*="machines"], [id*="paiement"][id*="machines"] ) h2::before { content: "ARCHITECTURE DE L’INSTALLATION"; display: table !important; margin: 0 0 14px !important; padding: 8px 13px !important; border-radius: 999px !important; background: rgba(222,7,45,.10) !important; color: #DE072D !important; font-size: 9px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .11em !important; } /* ========================================================= PARAGRAPHES INTRO ========================================================= */ #sovematic-payment-page section.sove-section:is( [id*="compatibilite"], [id*="centrale"][id*="machines"], [id*="paiement"][id*="machines"] ) > .sove-container > p { max-width: 760px !important; margin: 0 0 12px !important; color: #4b5c64 !important; font-size: 15px !important; line-height: 1.72 !important; } #sovematic-payment-page section.sove-section:is( [id*="compatibilite"], [id*="centrale"][id*="machines"], [id*="paiement"][id*="machines"] ) > .sove-container > p strong { color: #111214 !important; } /* ========================================================= PREMIÈRE LISTE (puces de compatibilité) ========================================================= */ #sovematic-payment-page section.sove-section:is( [id*="compatibilite"], [id*="centrale"][id*="machines"], [id*="paiement"][id*="machines"] ) > .sove-container > ul { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; max-width: 760px !important; margin: 18px 0 28px !important; padding: 0 !important; list-style: none !important; } #sovematic-payment-page section.sove-section:is( [id*="compatibilite"], [id*="centrale"][id*="machines"], [id*="paiement"][id*="machines"] ) > .sove-container > ul > li { position: relative !important; margin: 0 !important; padding: 16px 18px 16px 54px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 18px !important; background: rgba(255,255,255,.82) !important; box-shadow: 0 14px 30px rgba(17,18,20,.05) !important; color: #31444d !important; font-size: 14px !important; line-height: 1.55 !important; } #sovematic-payment-page section.sove-section:is( [id*="compatibilite"], [id*="centrale"][id*="machines"], [id*="paiement"][id*="machines"] ) > .sove-container > ul > li::before { content: "" !important; position: absolute !important; left: 18px !important; top: 50% !important; transform: translateY(-50%) !important; width: 22px !important; height: 22px !important; border-radius: 50% !important; background: radial-gradient(circle at center, #DE072D 0 42%, transparent 44%), rgba(222,7,45,.10) !important; box-shadow: 0 0 0 7px rgba(222,7,45,.08) !important; } /* ========================================================= SOUS-TITRE QUESTION ========================================================= */ #sovematic-payment-page section.sove-section:is( [id*="compatibilite"], [id*="centrale"][id*="machines"], [id*="paiement"][id*="machines"] ) h3 { display: inline-block !important; margin: 8px 0 16px !important; padding: 14px 20px !important; border-left: 4px solid #DE072D !important; border-radius: 14px !important; background: linear-gradient(90deg, rgba(222,7,45,.06), rgba(255,255,255,0)) !important; color: #111214 !important; font-size: clamp(1.35rem, 2vw, 1.75rem) !important; line-height: 1.2 !important; font-weight: 900 !important; } /* ========================================================= LISTE ORDONNÉE = 4 ÉTAPES PREMIUM ========================================================= */ #sovematic-payment-page section.sove-section:is( [id*="compatibilite"], [id*="centrale"][id*="machines"], [id*="paiement"][id*="machines"] ) ol { counter-reset: compat-steps !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; max-width: 980px !important; margin: 18px 0 24px !important; padding: 0 !important; list-style: none !important; } #sovematic-payment-page section.sove-section:is( [id*="compatibilite"], [id*="centrale"][id*="machines"], [id*="paiement"][id*="machines"] ) ol > li { counter-increment: compat-steps !important; position: relative !important; min-width: 0 !important; margin: 0 !important; padding: 86px 22px 22px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 22px !important; background: radial-gradient(circle at 100% 0%, rgba(31,78,95,.08), transparent 40%), linear-gradient(180deg, #ffffff 0%, #f8fbfc 100%) !important; box-shadow: 0 18px 34px rgba(17,18,20,.06), inset 0 1px 0 rgba(255,255,255,.9) !important; color: #2f434c !important; font-size: 15px !important; line-height: 1.6 !important; font-weight: 700 !important; } #sovematic-payment-page section.sove-section:is( [id*="compatibilite"], [id*="centrale"][id*="machines"], [id*="paiement"][id*="machines"] ) ol > li::before { content: "0" counter(compat-steps) !important; position: absolute !important; left: 22px !important; top: 20px !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 52px !important; height: 52px !important; border-radius: 18px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 16px !important; line-height: 1 !important; font-weight: 950 !important; box-shadow: 0 14px 28px rgba(222,7,45,.22) !important; } #sovematic-payment-page section.sove-section:is( [id*="compatibilite"], [id*="centrale"][id*="machines"], [id*="paiement"][id*="machines"] ) ol > li::after { content: "" !important; position: absolute !important; left: 22px !important; right: 22px !important; bottom: 0 !important; height: 4px !important; border-radius: 999px !important; background: linear-gradient(90deg, #DE072D 0%, #B33660 50%, #2C6175 100%) !important; } /* ========================================================= CONCLUSION FINALE ========================================================= */ #sovematic-payment-page section.sove-section:is( [id*="compatibilite"], [id*="centrale"][id*="machines"], [id*="paiement"][id*="machines"] ) ol + p { max-width: 920px !important; margin: 22px 0 0 !important; padding: 20px 22px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 20px !important; background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(243,247,249,.92)) !important; box-shadow: 0 18px 36px rgba(17,18,20,.05) !important; color: #24363f !important; font-size: 15px !important; line-height: 1.7 !important; } #sovematic-payment-page section.sove-section:is( [id*="compatibilite"], [id*="centrale"][id*="machines"], [id*="paiement"][id*="machines"] ) ol + p strong { color: #111214 !important; } /* ========================================================= HR ========================================================= */ #sovematic-payment-page section.sove-section:is( [id*="compatibilite"], [id*="centrale"][id*="machines"], [id*="paiement"][id*="machines"] ) hr { display: none !important; } /* ========================================================= TABLETTE ========================================================= */ @media (min-width: 768px) and (max-width: 1100px) { #sovematic-payment-page section.sove-section:is( [id*="compatibilite"], [id*="centrale"][id*="machines"], [id*="paiement"][id*="machines"] ) > .sove-container { width: calc(100% - 40px) !important; } #sovematic-payment-page section.sove-section:is( [id*="compatibilite"], [id*="centrale"][id*="machines"], [id*="paiement"][id*="machines"] ) h2 { font-size: clamp(2.2rem, 5vw, 3.4rem) !important; } #sovematic-payment-page section.sove-section:is( [id*="compatibilite"], [id*="centrale"][id*="machines"], [id*="paiement"][id*="machines"] ) ol { grid-template-columns: 1fr 1fr !important; gap: 14px !important; } #sovematic-payment-page section.sove-section:is( [id*="compatibilite"], [id*="centrale"][id*="machines"], [id*="paiement"][id*="machines"] ) ol > li { padding: 78px 18px 20px !important; } } /* ========================================================= SMARTPHONE ========================================================= */ @media (max-width: 767px) { #sovematic-payment-page section.sove-section:is( [id*="compatibilite"], [id*="centrale"][id*="machines"], [id*="paiement"][id*="machines"] ) { padding: 52px 0 !important; } #sovematic-payment-page section.sove-section:is( [id*="compatibilite"], [id*="centrale"][id*="machines"], [id*="paiement"][id*="machines"] ) > .sove-container { width: calc(100% - 24px) !important; } #sovematic-payment-page section.sove-section:is( [id*="compatibilite"], [id*="centrale"][id*="machines"], [id*="paiement"][id*="machines"] ) h2 { margin: 0 auto 16px !important; text-align: center !important; font-size: clamp(2rem, 9vw, 2.8rem) !important; line-height: 1 !important; } #sovematic-payment-page section.sove-section:is( [id*="compatibilite"], [id*="centrale"][id*="machines"], [id*="paiement"][id*="machines"] ) h2::before { margin: 0 auto 10px !important; } #sovematic-payment-page section.sove-section:is( [id*="compatibilite"], [id*="centrale"][id*="machines"], [id*="paiement"][id*="machines"] ) > .sove-container > p { text-align: center !important; font-size: 14px !important; line-height: 1.6 !important; } #sovematic-payment-page section.sove-section:is( [id*="compatibilite"], [id*="centrale"][id*="machines"], [id*="paiement"][id*="machines"] ) > .sove-container > ul { margin: 16px 0 24px !important; } #sovematic-payment-page section.sove-section:is( [id*="compatibilite"], [id*="centrale"][id*="machines"], [id*="paiement"][id*="machines"] ) > .sove-container > ul > li { padding: 15px 16px 15px 48px !important; text-align: left !important; } #sovematic-payment-page section.sove-section:is( [id*="compatibilite"], [id*="centrale"][id*="machines"], [id*="paiement"][id*="machines"] ) h3 { display: block !important; margin: 2px 0 14px !important; text-align: center !important; font-size: 1.2rem !important; } #sovematic-payment-page section.sove-section:is( [id*="compatibilite"], [id*="centrale"][id*="machines"], [id*="paiement"][id*="machines"] ) ol { grid-template-columns: 1fr !important; gap: 10px !important; margin: 16px 0 20px !important; } #sovematic-payment-page section.sove-section:is( [id*="compatibilite"], [id*="centrale"][id*="machines"], [id*="paiement"][id*="machines"] ) ol > li { padding: 76px 16px 18px !important; text-align: center !important; font-size: 14px !important; } #sovematic-payment-page section.sove-section:is( [id*="compatibilite"], [id*="centrale"][id*="machines"], [id*="paiement"][id*="machines"] ) ol > li::before { left: 50% !important; transform: translateX(-50%) !important; top: 16px !important; } #sovematic-payment-page section.sove-section:is( [id*="compatibilite"], [id*="centrale"][id*="machines"], [id*="paiement"][id*="machines"] ) ol + p { padding: 18px 16px !important; text-align: center !important; font-size: 14px !important; } }/* ========================================================= CRÉER UNE NOUVELLE LAVERIE : INTÉGRER LE PAIEMENT AU PLAN VERSION PREMIUM / FOND CLAIR / RESPONSIVE HTML INCHANGÉ ========================================================= */ #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] ) { position: relative !important; overflow: hidden !important; padding: clamp(80px, 7vw, 118px) 0 !important; background: radial-gradient(circle at 0% 0%, rgba(222,7,45,.06), transparent 22%), radial-gradient(circle at 100% 100%, rgba(31,78,95,.08), transparent 28%), linear-gradient(180deg, #f8fafb 0%, #f2f5f7 100%) !important; } #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] )::before { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; background: linear-gradient(rgba(17,18,20,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(17,18,20,.022) 1px, transparent 1px) !important; background-size: 36px 36px !important; opacity: .48 !important; } #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] ) > .sove-container { position: relative !important; z-index: 2 !important; width: min(1120px, calc(100% - 56px)) !important; max-width: 1120px !important; margin: 0 auto !important; } /* ========================================================= TITRE ========================================================= */ #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] ) h2 { max-width: 820px !important; margin: 0 0 22px !important; color: #111214 !important; font-size: clamp(2.45rem, 4vw, 4.5rem) !important; line-height: .96 !important; letter-spacing: -.05em !important; text-wrap: balance !important; } #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] ) h2::before { content: "CONCEPTION DE LAVERIE"; display: table !important; margin: 0 0 14px !important; padding: 8px 13px !important; border-radius: 999px !important; background: rgba(222,7,45,.10) !important; color: #DE072D !important; font-size: 9px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .11em !important; } /* ========================================================= BLOC VISUEL ========================================================= */ #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] ) figure, #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] ) .wp-block-image, #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] ) .sove-media, #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] ) .sove-visual { position: relative !important; overflow: hidden !important; margin: 0 0 28px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 28px !important; background: radial-gradient(circle at 100% 0%, rgba(31,78,95,.08), transparent 38%), linear-gradient(180deg, #ffffff 0%, #f7fafb 100%) !important; box-shadow: 0 24px 60px rgba(17,18,20,.08), inset 0 1px 0 rgba(255,255,255,.9) !important; } #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] ) figure::before, #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] ) .wp-block-image::before, #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] ) .sove-media::before, #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] ) .sove-visual::before { content: "PLANIFICATION • MACHINES • PAIEMENT"; position: absolute !important; left: 20px !important; top: 20px !important; z-index: 3 !important; display: inline-flex !important; align-items: center !important; min-height: 34px !important; padding: 8px 14px !important; border-radius: 999px !important; background: rgba(17,18,20,.82) !important; color: #ffffff !important; font-size: 10px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: .08em !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] ) figure img, #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] ) .wp-block-image img, #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] ) .sove-media img, #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] ) .sove-visual img { display: block !important; width: 100% !important; border-radius: 28px !important; } /* ========================================================= TEXTE INTRO ========================================================= */ #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] ) > .sove-container > p { max-width: 820px !important; margin: 0 0 12px !important; color: #4b5c64 !important; font-size: 15px !important; line-height: 1.72 !important; } #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] ) > .sove-container > p strong { color: #111214 !important; } /* ========================================================= PETITE MISE EN VALEUR DE LA PHRASE "IL INFLUENCE..." ========================================================= */ #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] ) > .sove-container > p:nth-of-type(2) { display: inline-block !important; margin: 8px 0 18px !important; padding: 14px 18px !important; border-left: 4px solid #DE072D !important; border-radius: 14px !important; background: linear-gradient(90deg, rgba(222,7,45,.06), rgba(255,255,255,0)) !important; color: #22343d !important; font-weight: 700 !important; } /* ========================================================= LISTE EN CARTES ========================================================= */ #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] ) ul { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; max-width: 980px !important; margin: 16px 0 26px !important; padding: 0 !important; list-style: none !important; } #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] ) ul > li { position: relative !important; min-width: 0 !important; margin: 0 !important; padding: 20px 18px 20px 56px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 20px !important; background: radial-gradient(circle at 100% 0%, rgba(31,78,95,.07), transparent 40%), linear-gradient(180deg, #ffffff 0%, #f8fbfc 100%) !important; box-shadow: 0 16px 32px rgba(17,18,20,.05), inset 0 1px 0 rgba(255,255,255,.88) !important; color: #2e414a !important; font-size: 14px !important; line-height: 1.55 !important; font-weight: 700 !important; } #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] ) ul > li::before { content: "" !important; position: absolute !important; left: 18px !important; top: 20px !important; width: 22px !important; height: 22px !important; border-radius: 50% !important; background: radial-gradient(circle at center, #DE072D 0 42%, transparent 44%), rgba(222,7,45,.10) !important; box-shadow: 0 0 0 7px rgba(222,7,45,.08) !important; } /* ========================================================= DERNIER PARAGRAPHE = BLOC CONCLUSION ========================================================= */ #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] ) ul + p { max-width: 920px !important; margin: 10px 0 20px !important; padding: 20px 22px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 20px !important; background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(243,247,249,.92)) !important; box-shadow: 0 18px 36px rgba(17,18,20,.05) !important; color: #24363f !important; font-size: 15px !important; line-height: 1.72 !important; } /* ========================================================= CTA ========================================================= */ #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] ) a.sove-btn, #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] ) a[class*="btn"], #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] ) .wp-block-button__link { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; min-height: 56px !important; padding: 16px 26px !important; border: 1px solid rgba(222,7,45,.12) !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.2 !important; font-weight: 900 !important; text-decoration: none !important; box-shadow: 0 16px 34px rgba(222,7,45,.22), inset 0 1px 0 rgba(255,255,255,.14) !important; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease !important; } #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] ) a.sove-btn:hover, #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] ) a[class*="btn"]:hover, #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] ) .wp-block-button__link:hover { transform: translateY(-2px) !important; box-shadow: 0 20px 40px rgba(222,7,45,.28), inset 0 1px 0 rgba(255,255,255,.14) !important; filter: brightness(1.03) !important; } /* ========================================================= HR ========================================================= */ #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] ) hr { display: none !important; } /* ========================================================= TABLETTE ========================================================= */ @media (min-width: 768px) and (max-width: 1100px) { #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] ) > .sove-container { width: calc(100% - 40px) !important; } #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] ) h2 { font-size: clamp(2.2rem, 5vw, 3.5rem) !important; } #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] ) ul { grid-template-columns: 1fr 1fr !important; gap: 12px !important; } } /* ========================================================= SMARTPHONE ========================================================= */ @media (max-width: 767px) { #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] ) { padding: 54px 0 !important; } #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] ) > .sove-container { width: calc(100% - 24px) !important; } #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] ) h2 { margin: 0 auto 16px !important; text-align: center !important; font-size: clamp(2rem, 9vw, 2.8rem) !important; line-height: 1 !important; } #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] ) h2::before { margin: 0 auto 10px !important; } #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] ) figure::before, #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] ) .wp-block-image::before, #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] ) .sove-media::before, #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] ) .sove-visual::before { left: 50% !important; transform: translateX(-50%) !important; top: 14px !important; text-align: center !important; white-space: nowrap !important; max-width: calc(100% - 28px) !important; } #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] ) > .sove-container > p { text-align: center !important; font-size: 14px !important; line-height: 1.62 !important; } #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] ) > .sove-container > p:nth-of-type(2) { display: block !important; text-align: center !important; } #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] ) ul { grid-template-columns: 1fr !important; gap: 10px !important; } #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] ) ul > li { padding: 18px 14px 18px 46px !important; text-align: left !important; } #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] ) ul + p { padding: 18px 16px !important; text-align: center !important; font-size: 14px !important; } #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] ) a.sove-btn, #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] ) a[class*="btn"], #sovematic-payment-page section.sove-section:is( [id*="creer"][id*="laverie"], [id*="nouvelle-laverie"], [id*="integrer"][id*="paiement"], [id*="paiement"][id*="plan"] ) .wp-block-button__link { width: 100% !important; padding: 15px 18px !important; } }/* ========================================================= MODERNISER UNE LAVERIE EXISTANTE : FAUT-IL REMPLACER LES MONNAYEURS ? VERSION PREMIUM / FOND CLAIR / RESPONSIVE HTML INCHANGÉ ========================================================= */ #sovematic-payment-page section.sove-section:is( [id*="moderniser"], [id*="monnayeur"], [id*="monnayeurs"], [id*="laverie-existante"], [id*="remplacer"][id*="monnayeur"] ) { position: relative !important; overflow: hidden !important; padding: clamp(78px, 7vw, 114px) 0 !important; background: radial-gradient(circle at 0% 0%, rgba(222,7,45,.055), transparent 22%), radial-gradient(circle at 100% 100%, rgba(31,78,95,.07), transparent 28%), linear-gradient(180deg, #f8fafb 0%, #f2f5f7 100%) !important; } #sovematic-payment-page section.sove-section:is( [id*="moderniser"], [id*="monnayeur"], [id*="monnayeurs"], [id*="laverie-existante"], [id*="remplacer"][id*="monnayeur"] )::before { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; background: linear-gradient(rgba(17,18,20,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(17,18,20,.022) 1px, transparent 1px) !important; background-size: 36px 36px !important; opacity: .46 !important; } #sovematic-payment-page section.sove-section:is( [id*="moderniser"], [id*="monnayeur"], [id*="monnayeurs"], [id*="laverie-existante"], [id*="remplacer"][id*="monnayeur"] ) > .sove-container { position: relative !important; z-index: 2 !important; width: min(1120px, calc(100% - 56px)) !important; max-width: 1120px !important; margin: 0 auto !important; } /* ========================================================= TITRE ========================================================= */ #sovematic-payment-page section.sove-section:is( [id*="moderniser"], [id*="monnayeur"], [id*="monnayeurs"], [id*="laverie-existante"], [id*="remplacer"][id*="monnayeur"] ) h2 { max-width: 820px !important; margin: 0 0 18px !important; color: #111214 !important; font-size: clamp(2.45rem, 4vw, 4.5rem) !important; line-height: .96 !important; letter-spacing: -.05em !important; text-wrap: balance !important; } #sovematic-payment-page section.sove-section:is( [id*="moderniser"], [id*="monnayeur"], [id*="monnayeurs"], [id*="laverie-existante"], [id*="remplacer"][id*="monnayeur"] ) h2::before { content: "AUDIT DE MODERNISATION"; display: table !important; margin: 0 0 14px !important; padding: 8px 13px !important; border-radius: 999px !important; background: rgba(222,7,45,.10) !important; color: #DE072D !important; font-size: 9px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .11em !important; } /* ========================================================= PARAGRAPHES INTRO ========================================================= */ #sovematic-payment-page section.sove-section:is( [id*="moderniser"], [id*="monnayeur"], [id*="monnayeurs"], [id*="laverie-existante"], [id*="remplacer"][id*="monnayeur"] ) > .sove-container > p { max-width: 830px !important; margin: 0 0 12px !important; color: #4b5c64 !important; font-size: 15px !important; line-height: 1.72 !important; } #sovematic-payment-page section.sove-section:is( [id*="moderniser"], [id*="monnayeur"], [id*="monnayeurs"], [id*="laverie-existante"], [id*="remplacer"][id*="monnayeur"] ) > .sove-container > p strong { color: #111214 !important; } /* petit bloc accent sur la phrase pivot */ #sovematic-payment-page section.sove-section:is( [id*="moderniser"], [id*="monnayeur"], [id*="monnayeurs"], [id*="laverie-existante"], [id*="remplacer"][id*="monnayeur"] ) > .sove-container > p:nth-of-type(3) { display: inline-block !important; margin: 8px 0 18px !important; padding: 14px 18px !important; border-left: 4px solid #DE072D !important; border-radius: 14px !important; background: linear-gradient(90deg, rgba(222,7,45,.06), rgba(255,255,255,0)) !important; color: #22343d !important; font-weight: 700 !important; } /* ========================================================= LISTE DE QUESTIONS -> CARTES DE DÉCISION ========================================================= */ #sovematic-payment-page section.sove-section:is( [id*="moderniser"], [id*="monnayeur"], [id*="monnayeurs"], [id*="laverie-existante"], [id*="remplacer"][id*="monnayeur"] ) ul { counter-reset: modernisation-points !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; max-width: 980px !important; margin: 18px 0 26px !important; padding: 0 !important; list-style: none !important; } #sovematic-payment-page section.sove-section:is( [id*="moderniser"], [id*="monnayeur"], [id*="monnayeurs"], [id*="laverie-existante"], [id*="remplacer"][id*="monnayeur"] ) ul > li { counter-increment: modernisation-points !important; position: relative !important; min-width: 0 !important; margin: 0 !important; padding: 78px 18px 20px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 22px !important; background: radial-gradient(circle at 100% 0%, rgba(31,78,95,.07), transparent 42%), linear-gradient(180deg, #ffffff 0%, #f8fbfc 100%) !important; box-shadow: 0 16px 32px rgba(17,18,20,.05), inset 0 1px 0 rgba(255,255,255,.88) !important; color: #2d4049 !important; font-size: 14px !important; line-height: 1.58 !important; font-weight: 700 !important; overflow-wrap: anywhere !important; } #sovematic-payment-page section.sove-section:is( [id*="moderniser"], [id*="monnayeur"], [id*="monnayeurs"], [id*="laverie-existante"], [id*="remplacer"][id*="monnayeur"] ) ul > li::before { content: "0" counter(modernisation-points) !important; position: absolute !important; left: 18px !important; top: 18px !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 48px !important; height: 48px !important; border-radius: 16px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 15px !important; line-height: 1 !important; font-weight: 950 !important; box-shadow: 0 14px 28px rgba(222,7,45,.20) !important; } #sovematic-payment-page section.sove-section:is( [id*="moderniser"], [id*="monnayeur"], [id*="monnayeurs"], [id*="laverie-existante"], [id*="remplacer"][id*="monnayeur"] ) ul > li::after { content: "QUESTION À ÉVALUER" !important; position: absolute !important; left: 78px !important; top: 24px !important; color: #7a8b93 !important; font-size: 9px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: .11em !important; } /* ========================================================= CONCLUSION / BLOC DE RECOMMANDATION ========================================================= */ #sovematic-payment-page section.sove-section:is( [id*="moderniser"], [id*="monnayeur"], [id*="monnayeurs"], [id*="laverie-existante"], [id*="remplacer"][id*="monnayeur"] ) ul + p { max-width: 920px !important; margin: 8px 0 0 !important; padding: 22px 24px !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 22px !important; background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(243,247,249,.92)) !important; box-shadow: 0 18px 36px rgba(17,18,20,.05), inset 0 1px 0 rgba(255,255,255,.9) !important; color: #24363f !important; font-size: 15px !important; line-height: 1.72 !important; } #sovematic-payment-page section.sove-section:is( [id*="moderniser"], [id*="monnayeur"], [id*="monnayeurs"], [id*="laverie-existante"], [id*="remplacer"][id*="monnayeur"] ) ul + p::before { content: "RECOMMANDATION"; display: table !important; margin: 0 0 12px !important; padding: 7px 11px !important; border-radius: 999px !important; background: rgba(31,78,95,.10) !important; color: #1F4E5F !important; font-size: 9px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .1em !important; } /* ========================================================= HR ========================================================= */ #sovematic-payment-page section.sove-section:is( [id*="moderniser"], [id*="monnayeur"], [id*="monnayeurs"], [id*="laverie-existante"], [id*="remplacer"][id*="monnayeur"] ) hr { display: none !important; } /* ========================================================= TABLETTE ========================================================= */ @media (min-width: 768px) and (max-width: 1100px) { #sovematic-payment-page section.sove-section:is( [id*="moderniser"], [id*="monnayeur"], [id*="monnayeurs"], [id*="laverie-existante"], [id*="remplacer"][id*="monnayeur"] ) > .sove-container { width: calc(100% - 40px) !important; } #sovematic-payment-page section.sove-section:is( [id*="moderniser"], [id*="monnayeur"], [id*="monnayeurs"], [id*="laverie-existante"], [id*="remplacer"][id*="monnayeur"] ) h2 { font-size: clamp(2.2rem, 5vw, 3.4rem) !important; } #sovematic-payment-page section.sove-section:is( [id*="moderniser"], [id*="monnayeur"], [id*="monnayeurs"], [id*="laverie-existante"], [id*="remplacer"][id*="monnayeur"] ) ul { grid-template-columns: 1fr 1fr !important; gap: 12px !important; } } /* ========================================================= SMARTPHONE ========================================================= */ @media (max-width: 767px) { #sovematic-payment-page section.sove-section:is( [id*="moderniser"], [id*="monnayeur"], [id*="monnayeurs"], [id*="laverie-existante"], [id*="remplacer"][id*="monnayeur"] ) { padding: 54px 0 !important; } #sovematic-payment-page section.sove-section:is( [id*="moderniser"], [id*="monnayeur"], [id*="monnayeurs"], [id*="laverie-existante"], [id*="remplacer"][id*="monnayeur"] ) > .sove-container { width: calc(100% - 24px) !important; } #sovematic-payment-page section.sove-section:is( [id*="moderniser"], [id*="monnayeur"], [id*="monnayeurs"], [id*="laverie-existante"], [id*="remplacer"][id*="monnayeur"] ) h2 { margin: 0 auto 16px !important; text-align: center !important; font-size: clamp(2rem, 9vw, 2.8rem) !important; line-height: 1 !important; } #sovematic-payment-page section.sove-section:is( [id*="moderniser"], [id*="monnayeur"], [id*="monnayeurs"], [id*="laverie-existante"], [id*="remplacer"][id*="monnayeur"] ) h2::before { margin: 0 auto 10px !important; } #sovematic-payment-page section.sove-section:is( [id*="moderniser"], [id*="monnayeur"], [id*="monnayeurs"], [id*="laverie-existante"], [id*="remplacer"][id*="monnayeur"] ) > .sove-container > p { text-align: center !important; font-size: 14px !important; line-height: 1.62 !important; } #sovematic-payment-page section.sove-section:is( [id*="moderniser"], [id*="monnayeur"], [id*="monnayeurs"], [id*="laverie-existante"], [id*="remplacer"][id*="monnayeur"] ) > .sove-container > p:nth-of-type(3) { display: block !important; text-align: center !important; } #sovematic-payment-page section.sove-section:is( [id*="moderniser"], [id*="monnayeur"], [id*="monnayeurs"], [id*="laverie-existante"], [id*="remplacer"][id*="monnayeur"] ) ul { grid-template-columns: 1fr !important; gap: 10px !important; margin: 16px 0 20px !important; } #sovematic-payment-page section.sove-section:is( [id*="moderniser"], [id*="monnayeur"], [id*="monnayeurs"], [id*="laverie-existante"], [id*="remplacer"][id*="monnayeur"] ) ul > li { padding: 76px 14px 18px !important; text-align: center !important; } #sovematic-payment-page section.sove-section:is( [id*="moderniser"], [id*="monnayeur"], [id*="monnayeurs"], [id*="laverie-existante"], [id*="remplacer"][id*="monnayeur"] ) ul > li::before { left: 50% !important; transform: translateX(-50%) !important; top: 16px !important; } #sovematic-payment-page section.sove-section:is( [id*="moderniser"], [id*="monnayeur"], [id*="monnayeurs"], [id*="laverie-existante"], [id*="remplacer"][id*="monnayeur"] ) ul > li::after { left: 50% !important; top: 72px !important; transform: translateX(-50%) !important; width: max-content !important; } #sovematic-payment-page section.sove-section:is( [id*="moderniser"], [id*="monnayeur"], [id*="monnayeurs"], [id*="laverie-existante"], [id*="remplacer"][id*="monnayeur"] ) ul + p { padding: 18px 16px !important; text-align: center !important; font-size: 14px !important; } #sovematic-payment-page section.sove-section:is( [id*="moderniser"], [id*="monnayeur"], [id*="monnayeurs"], [id*="laverie-existante"], [id*="remplacer"][id*="monnayeur"] ) ul + p::before { margin: 0 auto 10px !important; } }/* ========================================================= CORRECTIF FINAL LA MÉTHODE POUR DÉFINIR VOTRE SYSTÈME DE PAIEMENT CIBLE EXACTEMENT LE HTML EXISTANT ========================================================= */ #sovematic-payment-page section#la-méthode-pour-définir-votre-système-de-paiement { position: relative !important; overflow: hidden !important; padding: clamp(72px, 7vw, 112px) 0 !important; background: radial-gradient(circle at 0% 0%, rgba(222, 7, 45, .15), transparent 27%), radial-gradient(circle at 100% 100%, rgba(31, 78, 95, .20), transparent 32%), linear-gradient(135deg, #0c1115 0%, #10232c 52%, #0d1920 100%) !important; } #sovematic-payment-page section#la-méthode-pour-définir-votre-système-de-paiement::before { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; background: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) !important; background-size: 40px 40px !important; opacity: .22 !important; } /* ========================================================= CONTENEUR ========================================================= */ #sovematic-payment-page section#la-méthode-pour-définir-votre-système-de-paiement > .sove-container { position: relative !important; z-index: 2 !important; width: min(1180px, calc(100% - 56px)) !important; max-width: 1180px !important; margin: 0 auto !important; } /* ========================================================= TITRE ========================================================= */ #sovematic-payment-page section#la-méthode-pour-définir-votre-système-de-paiement h2 { width: 100% !important; max-width: 820px !important; margin: 0 0 30px !important; color: #fff !important; font-size: clamp(2.6rem, 4vw, 4.6rem) !important; line-height: .96 !important; letter-spacing: -.055em !important; text-wrap: balance !important; } #sovematic-payment-page section#la-méthode-pour-définir-votre-système-de-paiement h2::before { content: "MÉTHODE SOVEMATIC • 7 ÉTAPES"; display: table !important; margin: 0 0 14px !important; padding: 8px 13px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 9px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .11em !important; box-shadow: 0 12px 28px rgba(222,7,45,.22) !important; } /* ========================================================= GRILLE IMPORTANT : annule les anciennes contraintes ========================================================= */ #sovematic-payment-page section#la-méthode-pour-définir-votre-système-de-paiement .sove-method-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; align-items: stretch !important; } /* ========================================================= CARTES RÉINITIALISATION COMPLÈTE DE LA MAUVAISE MISE EN PAGE ========================================================= */ #sovematic-payment-page section#la-méthode-pour-définir-votre-système-de-paiement .sove-method-card { position: relative !important; display: block !important; grid-template-columns: none !important; grid-template-rows: none !important; width: 100% !important; min-width: 0 !important; max-width: none !important; min-height: 230px !important; margin: 0 !important; padding: 28px 26px 26px !important; overflow: hidden !important; border: 1px solid rgba(255,255,255,.11) !important; border-radius: 26px !important; background: radial-gradient( circle at 100% 0%, rgba(31,78,95,.17), transparent 42% ), linear-gradient( 180deg, rgba(255,255,255,.065) 0%, rgba(255,255,255,.028) 100% ) !important; box-shadow: 0 22px 52px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.065) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } /* ========================================================= NUMÉRO ========================================================= */ #sovematic-payment-page section#la-méthode-pour-définir-votre-système-de-paiement .sove-method-num { position: static !important; display: flex !important; align-items: center !important; justify-content: center !important; float: none !important; width: 48px !important; min-width: 48px !important; max-width: 48px !important; height: 48px !important; min-height: 48px !important; margin: 0 0 18px !important; padding: 0 !important; border-radius: 15px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 12px !important; line-height: 1 !important; font-weight: 950 !important; box-shadow: 0 12px 24px rgba(222,7,45,.22) !important; } /* ========================================================= TITRES DES CARTES ========================================================= */ #sovematic-payment-page section#la-méthode-pour-définir-votre-système-de-paiement .sove-method-card h3 { display: block !important; width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 0 14px !important; padding: 0 !important; color: #fff !important; font-size: clamp(1.25rem, 1.65vw, 1.55rem) !important; line-height: 1.18 !important; font-weight: 900 !important; letter-spacing: -.025em !important; overflow-wrap: normal !important; word-break: normal !important; white-space: normal !important; } /* ========================================================= PARAGRAPHES ========================================================= */ #sovematic-payment-page section#la-méthode-pour-définir-votre-système-de-paiement .sove-method-card p { display: block !important; width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 0 10px !important; padding: 0 !important; color: rgba(255,255,255,.74) !important; font-size: 14px !important; line-height: 1.62 !important; overflow-wrap: normal !important; word-break: normal !important; white-space: normal !important; } /* supprime marges sur dernier paragraphe */ #sovematic-payment-page section#la-méthode-pour-définir-votre-système-de-paiement .sove-method-card p:last-child { margin-bottom: 0 !important; } /* ========================================================= LIENS TEXTE ========================================================= */ #sovematic-payment-page section#la-méthode-pour-définir-votre-système-de-paiement .sove-text-link { display: inline-flex !important; align-items: center !important; width: auto !important; max-width: 100% !important; margin: 2px 0 0 !important; padding: 7px 10px !important; border-radius: 999px !important; background: rgba(222,7,45,.11) !important; color: #ff5471 !important; font-size: 12px !important; line-height: 1.2 !important; font-weight: 850 !important; text-decoration: none !important; overflow-wrap: normal !important; word-break: normal !important; } #sovematic-payment-page section#la-méthode-pour-définir-votre-système-de-paiement .sove-text-link:hover { background: rgba(222,7,45,.19) !important; color: #fff !important; } /* ========================================================= PETITE BARRE BAS DE CARTE ========================================================= */ #sovematic-payment-page section#la-méthode-pour-définir-votre-système-de-paiement .sove-method-card::after { content: "" !important; position: absolute !important; left: 26px !important; right: 26px !important; bottom: 0 !important; height: 4px !important; border-radius: 999px 999px 0 0 !important; background: linear-gradient( 90deg, #DE072D 0%, #A22E59 48%, #2B6174 100% ) !important; opacity: .86 !important; } /* ========================================================= ÉTAPE 7 : CARTE FINALE PLEINE LARGEUR ========================================================= */ #sovematic-payment-page section#la-méthode-pour-définir-votre-système-de-paiement #étape-7-vérifier-la-compatibilité { grid-column: 1 / -1 !important; min-height: 0 !important; padding: 30px !important; background: radial-gradient( circle at 100% 0%, rgba(222,7,45,.15), transparent 38% ), radial-gradient( circle at 0% 100%, rgba(31,78,95,.22), transparent 42% ), linear-gradient( 135deg, rgba(255,255,255,.075), rgba(255,255,255,.025) ) !important; } /* texte résultat étape 7 */ #sovematic-payment-page section#la-méthode-pour-définir-votre-système-de-paiement #étape-7-vérifier-la-compatibilité strong { color: #fff !important; font-weight: 850 !important; } /* ========================================================= CTA FINAL ========================================================= */ #sovematic-payment-page section#la-méthode-pour-définir-votre-système-de-paiement #étape-7-vérifier-la-compatibilité .sove-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; max-width: 100% !important; min-height: 52px !important; margin-top: 8px !important; padding: 15px 24px !important; border: 0 !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 14px !important; line-height: 1.2 !important; font-weight: 900 !important; text-decoration: none !important; box-shadow: 0 16px 34px rgba(222,7,45,.25) !important; } /* cache le HR */ #sovematic-payment-page section#la-méthode-pour-définir-votre-système-de-paiement hr { display: none !important; } /* ========================================================= TABLETTE ========================================================= */ @media (min-width: 768px) and (max-width: 1000px) { #sovematic-payment-page section#la-méthode-pour-définir-votre-système-de-paiement > .sove-container { width: calc(100% - 40px) !important; } #sovematic-payment-page section#la-méthode-pour-définir-votre-système-de-paiement h2 { margin-left: auto !important; margin-right: auto !important; text-align: center !important; font-size: clamp(2.3rem, 5vw, 3.6rem) !important; } #sovematic-payment-page section#la-méthode-pour-définir-votre-système-de-paiement h2::before { margin-left: auto !important; margin-right: auto !important; } #sovematic-payment-page section#la-méthode-pour-définir-votre-système-de-paiement .sove-method-grid { grid-template-columns: 1fr !important; gap: 12px !important; } #sovematic-payment-page section#la-méthode-pour-définir-votre-système-de-paiement .sove-method-card { min-height: 0 !important; padding: 24px 22px !important; } } /* ========================================================= SMARTPHONE ========================================================= */ @media (max-width: 767px) { #sovematic-payment-page section#la-méthode-pour-définir-votre-système-de-paiement { padding: 52px 0 !important; } #sovematic-payment-page section#la-méthode-pour-définir-votre-système-de-paiement > .sove-container { width: calc(100% - 24px) !important; } #sovematic-payment-page section#la-méthode-pour-définir-votre-système-de-paiement h2 { margin: 0 auto 20px !important; text-align: center !important; font-size: clamp(2rem, 9vw, 2.8rem) !important; line-height: 1 !important; } #sovematic-payment-page section#la-méthode-pour-définir-votre-système-de-paiement h2::before { margin: 0 auto 10px !important; } #sovematic-payment-page section#la-méthode-pour-définir-votre-système-de-paiement .sove-method-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; width: 100% !important; } #sovematic-payment-page section#la-méthode-pour-définir-votre-système-de-paiement .sove-method-card { display: block !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important; padding: 22px 16px 20px !important; border-radius: 20px !important; } #sovematic-payment-page section#la-méthode-pour-définir-votre-système-de-paiement .sove-method-num { width: 44px !important; min-width: 44px !important; height: 44px !important; margin: 0 auto 14px !important; border-radius: 14px !important; } #sovematic-payment-page section#la-méthode-pour-définir-votre-système-de-paiement .sove-method-card h3 { width: 100% !important; margin: 0 0 12px !important; text-align: center !important; font-size: 1.2rem !important; line-height: 1.2 !important; word-break: normal !important; overflow-wrap: normal !important; } #sovematic-payment-page section#la-méthode-pour-définir-votre-système-de-paiement .sove-method-card p { width: 100% !important; text-align: center !important; font-size: 14px !important; line-height: 1.58 !important; word-break: normal !important; overflow-wrap: break-word !important; } #sovematic-payment-page section#la-méthode-pour-définir-votre-système-de-paiement .sove-text-link { display: inline-flex !important; margin: 3px auto !important; } #sovematic-payment-page section#la-méthode-pour-définir-votre-système-de-paiement #étape-7-vérifier-la-compatibilité { grid-column: auto !important; padding: 22px 16px !important; } #sovematic-payment-page section#la-méthode-pour-définir-votre-système-de-paiement #étape-7-vérifier-la-compatibilité .sove-btn { width: 100% !important; margin-top: 8px !important; } }/* ========================================================= FAQ — CENTRALE DE PAIEMENT POUR LAVERIE VERSION PREMIUM / FOND CLAIR / RESPONSIVE HTML INCHANGÉ ========================================================= */ #sovematic-payment-page section.sove-section:is( [id*="faq"], [id*="questions"], [id*="question-frequente"], [id*="questions-frequentes"] ) { position: relative !important; overflow: hidden !important; padding: clamp(72px, 7vw, 110px) 0 !important; background: radial-gradient(circle at 0% 0%, rgba(222,7,45,.06), transparent 22%), radial-gradient(circle at 100% 100%, rgba(31,78,95,.08), transparent 28%), linear-gradient(180deg, #f8fafb 0%, #f2f5f7 100%) !important; } #sovematic-payment-page section.sove-section:is( [id*="faq"], [id*="questions"], [id*="question-frequente"], [id*="questions-frequentes"] )::before { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; background: linear-gradient(rgba(17,18,20,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(17,18,20,.022) 1px, transparent 1px) !important; background-size: 36px 36px !important; opacity: .42 !important; } #sovematic-payment-page section.sove-section:is( [id*="faq"], [id*="questions"], [id*="question-frequente"], [id*="questions-frequentes"] ) > .sove-container { position: relative !important; z-index: 2 !important; width: min(1120px, calc(100% - 56px)) !important; max-width: 1120px !important; margin: 0 auto !important; } /* ========================================================= TITRE ========================================================= */ #sovematic-payment-page section.sove-section:is( [id*="faq"], [id*="questions"], [id*="question-frequente"], [id*="questions-frequentes"] ) h2 { max-width: 840px !important; margin: 0 0 30px !important; color: #111214 !important; font-size: clamp(2.4rem, 4vw, 4.2rem) !important; line-height: .96 !important; letter-spacing: -.05em !important; text-wrap: balance !important; } #sovematic-payment-page section.sove-section:is( [id*="faq"], [id*="questions"], [id*="question-frequente"], [id*="questions-frequentes"] ) h2::before { content: "QUESTIONS FRÉQUENTES"; display: table !important; margin: 0 0 14px !important; padding: 8px 13px !important; border-radius: 999px !important; background: rgba(222,7,45,.10) !important; color: #DE072D !important; font-size: 9px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .11em !important; } /* ========================================================= CONTENEUR FAQ ========================================================= */ #sovematic-payment-page section.sove-section:is( [id*="faq"], [id*="questions"], [id*="question-frequente"], [id*="questions-frequentes"] ) :is( .faq-list, .sove-faq, .faq-wrapper, .accordion, .accordion-list ) { display: grid !important; gap: 12px !important; } /* ========================================================= ITEM FAQ ========================================================= */ #sovematic-payment-page section.sove-section:is( [id*="faq"], [id*="questions"], [id*="question-frequente"], [id*="questions-frequentes"] ) :is( details, .faq-item, .accordion-item ) { position: relative !important; overflow: hidden !important; margin: 0 !important; border: 1px solid rgba(17,18,20,.08) !important; border-radius: 18px !important; background: radial-gradient(circle at 100% 0%, rgba(31,78,95,.05), transparent 42%), linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,252,.94)) !important; box-shadow: 0 10px 24px rgba(17,18,20,.05), inset 0 1px 0 rgba(255,255,255,.92) !important; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease !important; } #sovematic-payment-page section.sove-section:is( [id*="faq"], [id*="questions"], [id*="question-frequente"], [id*="questions-frequentes"] ) :is( details:hover, .faq-item:hover, .accordion-item:hover ) { transform: translateY(-1px) !important; border-color: rgba(222,7,45,.12) !important; box-shadow: 0 16px 32px rgba(17,18,20,.07), 0 0 0 1px rgba(222,7,45,.04) !important; } /* ========================================================= QUESTION / TRIGGER ========================================================= */ #sovematic-payment-page section.sove-section:is( [id*="faq"], [id*="questions"], [id*="question-frequente"], [id*="questions-frequentes"] ) :is( summary, .faq-question, .accordion-trigger, button[aria-expanded] ) { position: relative !important; display: flex !important; align-items: center !important; width: 100% !important; min-height: 68px !important; margin: 0 !important; padding: 20px 68px 20px 22px !important; border: 0 !important; background: transparent !important; color: #111214 !important; font-size: 15px !important; line-height: 1.45 !important; font-weight: 850 !important; text-align: left !important; cursor: pointer !important; list-style: none !important; box-shadow: none !important; text-decoration: none !important; appearance: none !important; -webkit-appearance: none !important; } #sovematic-payment-page section.sove-section:is( [id*="faq"], [id*="questions"], [id*="question-frequente"], [id*="questions-frequentes"] ) summary::-webkit-details-marker { display: none !important; } /* icône + */ #sovematic-payment-page section.sove-section:is( [id*="faq"], [id*="questions"], [id*="question-frequente"], [id*="questions-frequentes"] ) :is( summary, .faq-question, .accordion-trigger, button[aria-expanded] )::after { content: "+" !important; position: absolute !important; right: 18px !important; top: 50% !important; transform: translateY(-50%) !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; border-radius: 50% !important; background: rgba(222,7,45,.10) !important; color: #DE072D !important; font-size: 18px !important; line-height: 1 !important; font-weight: 900 !important; box-shadow: inset 0 0 0 1px rgba(222,7,45,.08) !important; transition: transform .2s ease, background .2s ease, color .2s ease !important; } /* ========================================================= ÉTAT OUVERT ========================================================= */ #sovematic-payment-page section.sove-section:is( [id*="faq"], [id*="questions"], [id*="question-frequente"], [id*="questions-frequentes"] ) :is( details[open], .faq-item.is-open, .accordion-item.is-open, .accordion-item[open] ) { border-color: rgba(222,7,45,.16) !important; background: radial-gradient(circle at 100% 0%, rgba(222,7,45,.05), transparent 36%), linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%) !important; box-shadow: 0 18px 36px rgba(17,18,20,.07), 0 0 0 1px rgba(222,7,45,.04) !important; } #sovematic-payment-page section.sove-section:is( [id*="faq"], [id*="questions"], [id*="question-frequente"], [id*="questions-frequentes"] ) details[open] > summary::after, #sovematic-payment-page section.sove-section:is( [id*="faq"], [id*="questions"], [id*="question-frequente"], [id*="questions-frequentes"] ) .faq-item.is-open > .faq-question::after, #sovematic-payment-page section.sove-section:is( [id*="faq"], [id*="questions"], [id*="question-frequente"], [id*="questions-frequentes"] ) .accordion-item.is-open > .accordion-trigger::after, #sovematic-payment-page section.sove-section:is( [id*="faq"], [id*="questions"], [id*="question-frequente"], [id*="questions-frequentes"] ) button[aria-expanded="true"]::after { content: "−" !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; } /* ========================================================= RÉPONSE ========================================================= */ #sovematic-payment-page section.sove-section:is( [id*="faq"], [id*="questions"], [id*="question-frequente"], [id*="questions-frequentes"] ) details > *:not(summary), #sovematic-payment-page section.sove-section:is( [id*="faq"], [id*="questions"], [id*="question-frequente"], [id*="questions-frequentes"] ) :is( .faq-answer, .accordion-content, .answer ) { margin: 0 !important; padding: 0 22px 22px 22px !important; color: #4b5c64 !important; font-size: 14px !important; line-height: 1.72 !important; } #sovematic-payment-page section.sove-section:is( [id*="faq"], [id*="questions"], [id*="question-frequente"], [id*="questions-frequentes"] ) details > *:not(summary) p, #sovematic-payment-page section.sove-section:is( [id*="faq"], [id*="questions"], [id*="question-frequente"], [id*="questions-frequentes"] ) :is( .faq-answer, .accordion-content, .answer ) p { margin: 0 0 12px !important; color: #4b5c64 !important; } #sovematic-payment-page section.sove-section:is( [id*="faq"], [id*="questions"], [id*="question-frequente"], [id*="questions-frequentes"] ) details > *:not(summary) p:last-child, #sovematic-payment-page section.sove-section:is( [id*="faq"], [id*="questions"], [id*="question-frequente"], [id*="questions-frequentes"] ) :is( .faq-answer, .accordion-content, .answer ) p:last-child { margin-bottom: 0 !important; } /* petite séparation élégante entre question et réponse */ #sovematic-payment-page section.sove-section:is( [id*="faq"], [id*="questions"], [id*="question-frequente"], [id*="questions-frequentes"] ) details[open] > *:not(summary):first-child, #sovematic-payment-page section.sove-section:is( [id*="faq"], [id*="questions"], [id*="question-frequente"], [id*="questions-frequentes"] ) .faq-item.is-open .faq-answer, #sovematic-payment-page section.sove-section:is( [id*="faq"], [id*="questions"], [id*="question-frequente"], [id*="questions-frequentes"] ) .accordion-item.is-open .accordion-content { position: relative !important; margin-top: -2px !important; padding-top: 18px !important; } #sovematic-payment-page section.sove-section:is( [id*="faq"], [id*="questions"], [id*="question-frequente"], [id*="questions-frequentes"] ) details[open] > *:not(summary):first-child::before, #sovematic-payment-page section.sove-section:is( [id*="faq"], [id*="questions"], [id*="question-frequente"], [id*="questions-frequentes"] ) .faq-item.is-open .faq-answer::before, #sovematic-payment-page section.sove-section:is( [id*="faq"], [id*="questions"], [id*="question-frequente"], [id*="questions-frequentes"] ) .accordion-item.is-open .accordion-content::before { content: "" !important; display: block !important; width: 100% !important; height: 1px !important; margin-bottom: 16px !important; background: linear-gradient(90deg, rgba(222,7,45,.18), rgba(31,78,95,.12)) !important; } /* ========================================================= TABLETTE ========================================================= */ @media (min-width: 768px) and (max-width: 1100px) { #sovematic-payment-page section.sove-section:is( [id*="faq"], [id*="questions"], [id*="question-frequente"], [id*="questions-frequentes"] ) > .sove-container { width: calc(100% - 40px) !important; } #sovematic-payment-page section.sove-section:is( [id*="faq"], [id*="questions"], [id*="question-frequente"], [id*="questions-frequentes"] ) h2 { font-size: clamp(2.2rem, 5vw, 3.4rem) !important; } } /* ========================================================= SMARTPHONE ========================================================= */ @media (max-width: 767px) { #sovematic-payment-page section.sove-section:is( [id*="faq"], [id*="questions"], [id*="question-frequente"], [id*="questions-frequentes"] ) { padding: 52px 0 !important; } #sovematic-payment-page section.sove-section:is( [id*="faq"], [id*="questions"], [id*="question-frequente"], [id*="questions-frequentes"] ) > .sove-container { width: calc(100% - 24px) !important; } #sovematic-payment-page section.sove-section:is( [id*="faq"], [id*="questions"], [id*="question-frequente"], [id*="questions-frequentes"] ) h2 { margin: 0 auto 20px !important; text-align: center !important; font-size: clamp(2rem, 9vw, 2.8rem) !important; line-height: 1 !important; } #sovematic-payment-page section.sove-section:is( [id*="faq"], [id*="questions"], [id*="question-frequente"], [id*="questions-frequentes"] ) h2::before { margin: 0 auto 10px !important; } #sovematic-payment-page section.sove-section:is( [id*="faq"], [id*="questions"], [id*="question-frequente"], [id*="questions-frequentes"] ) :is( summary, .faq-question, .accordion-trigger, button[aria-expanded] ) { min-height: 64px !important; padding: 18px 56px 18px 16px !important; font-size: 14px !important; line-height: 1.45 !important; } #sovematic-payment-page section.sove-section:is( [id*="faq"], [id*="questions"], [id*="question-frequente"], [id*="questions-frequentes"] ) :is( summary, .faq-question, .accordion-trigger, button[aria-expanded] )::after { right: 14px !important; width: 28px !important; height: 28px !important; font-size: 16px !important; } #sovematic-payment-page section.sove-section:is( [id*="faq"], [id*="questions"], [id*="question-frequente"], [id*="questions-frequentes"] ) details > *:not(summary), #sovematic-payment-page section.sove-section:is( [id*="faq"], [id*="questions"], [id*="question-frequente"], [id*="questions-frequentes"] ) :is( .faq-answer, .accordion-content, .answer ) { padding: 0 16px 18px 16px !important; font-size: 14px !important; } }/* ========================================================= HERO / BLOC FINAL — SYSTÈME DE PAIEMENT FOND SOMBRE • CONTENU CENTRÉ • 2 CTA ALIGNÉS SUR ORDI HTML INCHANGÉ ========================================================= */ #sovematic-payment-page section.sove-section:is( [id*="vos-clients"], [id*="paiement-ne-devrait"], [id*="partie-compliquee"], [id*="systeme-de-paiement"], [id*="faire-dimensionner-votre-systeme"], [id*="dimensionner-votre-systeme"] ) { position: relative !important; overflow: hidden !important; padding: clamp(82px, 8vw, 126px) 0 !important; background: radial-gradient(circle at 0% 0%, rgba(222,7,45,.18), transparent 24%), radial-gradient(circle at 100% 100%, rgba(31,78,95,.24), transparent 30%), linear-gradient(135deg, #0a0f13 0%, #0d1d25 52%, #0a151b 100%) !important; } #sovematic-payment-page section.sove-section:is( [id*="vos-clients"], [id*="paiement-ne-devrait"], [id*="partie-compliquee"], [id*="systeme-de-paiement"], [id*="faire-dimensionner-votre-systeme"], [id*="dimensionner-votre-systeme"] )::before { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; background: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) !important; background-size: 40px 40px !important; opacity: .22 !important; } /* ========================================================= CONTENEUR CENTRÉ ========================================================= */ #sovematic-payment-page section.sove-section:is( [id*="vos-clients"], [id*="paiement-ne-devrait"], [id*="partie-compliquee"], [id*="systeme-de-paiement"], [id*="faire-dimensionner-votre-systeme"], [id*="dimensionner-votre-systeme"] ) > .sove-container { position: relative !important; z-index: 2 !important; width: min(980px, calc(100% - 56px)) !important; max-width: 980px !important; margin: 0 auto !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; } /* ========================================================= TITRE ========================================================= */ #sovematic-payment-page section.sove-section:is( [id*="vos-clients"], [id*="paiement-ne-devrait"], [id*="partie-compliquee"], [id*="systeme-de-paiement"], [id*="faire-dimensionner-votre-systeme"], [id*="dimensionner-votre-systeme"] ) h2 { width: 100% !important; max-width: 880px !important; margin: 0 auto 24px !important; color: #ffffff !important; font-size: clamp(2.6rem, 4.4vw, 5rem) !important; line-height: .95 !important; letter-spacing: -.055em !important; text-wrap: balance !important; } #sovematic-payment-page section.sove-section:is( [id*="vos-clients"], [id*="paiement-ne-devrait"], [id*="partie-compliquee"], [id*="systeme-de-paiement"], [id*="faire-dimensionner-votre-systeme"], [id*="dimensionner-votre-systeme"] ) h2::before { content: "PARCOURS CLIENT • PAIEMENT"; display: table !important; margin: 0 auto 14px !important; padding: 8px 14px !important; border-radius: 999px !important; background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; font-size: 9px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .11em !important; box-shadow: 0 14px 28px rgba(222,7,45,.22) !important; } /* ========================================================= TEXTES ========================================================= */ #sovematic-payment-page section.sove-section:is( [id*="vos-clients"], [id*="paiement-ne-devrait"], [id*="partie-compliquee"], [id*="systeme-de-paiement"], [id*="faire-dimensionner-votre-systeme"], [id*="dimensionner-votre-systeme"] ) > .sove-container > p { width: 100% !important; max-width: 780px !important; margin: 0 auto 12px !important; color: rgba(255,255,255,.76) !important; font-size: 15px !important; line-height: 1.72 !important; text-align: center !important; } #sovematic-payment-page section.sove-section:is( [id*="vos-clients"], [id*="paiement-ne-devrait"], [id*="partie-compliquee"], [id*="systeme-de-paiement"], [id*="faire-dimensionner-votre-systeme"], [id*="dimensionner-votre-systeme"] ) > .sove-container > p strong { color: #ffffff !important; font-weight: 850 !important; } /* petit texte d’accroche plus lisible */ #sovematic-payment-page section.sove-section:is( [id*="vos-clients"], [id*="paiement-ne-devrait"], [id*="partie-compliquee"], [id*="systeme-de-paiement"], [id*="faire-dimensionner-votre-systeme"], [id*="dimensionner-votre-systeme"] ) > .sove-container > p:nth-of-type(1) { max-width: 720px !important; color: rgba(255,255,255,.68) !important; } /* ========================================================= BLOC DES QUESTIONS / DÉCISIONS ========================================================= */ #sovematic-payment-page section.sove-section:is( [id*="vos-clients"], [id*="paiement-ne-devrait"], [id*="partie-compliquee"], [id*="systeme-de-paiement"], [id*="faire-dimensionner-votre-systeme"], [id*="dimensionner-votre-systeme"] ) ul { list-style: none !important; padding: 0 !important; margin: 22px auto 28px !important; width: 100% !important; max-width: 860px !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; } #sovematic-payment-page section.sove-section:is( [id*="vos-clients"], [id*="paiement-ne-devrait"], [id*="partie-compliquee"], [id*="systeme-de-paiement"], [id*="faire-dimensionner-votre-systeme"], [id*="dimensionner-votre-systeme"] ) ul > li { position: relative !important; margin: 0 !important; padding: 18px 18px 18px 52px !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 18px !important; background: radial-gradient(circle at 100% 0%, rgba(31,78,95,.18), transparent 40%), linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.028)) !important; box-shadow: 0 16px 36px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.06) !important; color: rgba(255,255,255,.84) !important; font-size: 14px !important; line-height: 1.52 !important; font-weight: 700 !important; text-align: left !important; } #sovematic-payment-page section.sove-section:is( [id*="vos-clients"], [id*="paiement-ne-devrait"], [id*="partie-compliquee"], [id*="systeme-de-paiement"], [id*="faire-dimensionner-votre-systeme"], [id*="dimensionner-votre-systeme"] ) ul > li::before { content: "" !important; position: absolute !important; left: 18px !important; top: 20px !important; width: 18px !important; height: 18px !important; border-radius: 50% !important; background: radial-gradient(circle at center, #DE072D 0 42%, transparent 44%), rgba(222,7,45,.10) !important; box-shadow: 0 0 0 6px rgba(222,7,45,.10) !important; } /* ========================================================= SOUS-BLOCS "VOUS CRÉEZ..." / "VOUS MODERNISEZ..." ========================================================= */ #sovematic-payment-page section.sove-section:is( [id*="vos-clients"], [id*="paiement-ne-devrait"], [id*="partie-compliquee"], [id*="systeme-de-paiement"], [id*="faire-dimensionner-votre-systeme"], [id*="dimensionner-votre-systeme"] ) h3, #sovematic-payment-page section.sove-section:is( [id*="vos-clients"], [id*="paiement-ne-devrait"], [id*="partie-compliquee"], [id*="systeme-de-paiement"], [id*="faire-dimensionner-votre-systeme"], [id*="dimensionner-votre-systeme"] ) h4 { width: 100% !important; max-width: 760px !important; margin: 18px auto 8px !important; color: #ffffff !important; font-size: clamp(1.2rem, 1.7vw, 1.45rem) !important; line-height: 1.2 !important; font-weight: 900 !important; text-align: center !important; } /* ========================================================= ZONE CTA ========================================================= */ /* cas où les boutons sont dans un wrapper */ #sovematic-payment-page section.sove-section:is( [id*="vos-clients"], [id*="paiement-ne-devrait"], [id*="partie-compliquee"], [id*="systeme-de-paiement"], [id*="faire-dimensionner-votre-systeme"], [id*="dimensionner-votre-systeme"] ) :is( .wp-block-buttons, .sove-cta-group, .cta-group, .buttons-group ) { display: flex !important; justify-content: center !important; align-items: center !important; gap: 14px !important; flex-wrap: wrap !important; width: 100% !important; margin: 30px auto 0 !important; } /* cas où les deux boutons sont simplement à la suite */ #sovematic-payment-page section.sove-section:is( [id*="vos-clients"], [id*="paiement-ne-devrait"], [id*="partie-compliquee"], [id*="systeme-de-paiement"], [id*="faire-dimensionner-votre-systeme"], [id*="dimensionner-votre-systeme"] ) a.sove-btn, #sovematic-payment-page section.sove-section:is( [id*="vos-clients"], [id*="paiement-ne-devrait"], [id*="partie-compliquee"], [id*="systeme-de-paiement"], [id*="faire-dimensionner-votre-systeme"], [id*="dimensionner-votre-systeme"] ) a[class*="btn"], #sovematic-payment-page section.sove-section:is( [id*="vos-clients"], [id*="paiement-ne-devrait"], [id*="partie-compliquee"], [id*="systeme-de-paiement"], [id*="faire-dimensionner-votre-systeme"], [id*="dimensionner-votre-systeme"] ) .wp-block-button__link { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 56px !important; padding: 16px 24px !important; border-radius: 999px !important; font-size: 14px !important; line-height: 1.2 !important; font-weight: 900 !important; text-decoration: none !important; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease !important; } /* bouton principal */ #sovematic-payment-page section.sove-section:is( [id*="vos-clients"], [id*="paiement-ne-devrait"], [id*="partie-compliquee"], [id*="systeme-de-paiement"], [id*="faire-dimensionner-votre-systeme"], [id*="dimensionner-votre-systeme"] ) a.sove-btn:first-of-type, #sovematic-payment-page section.sove-section:is( [id*="vos-clients"], [id*="paiement-ne-devrait"], [id*="partie-compliquee"], [id*="systeme-de-paiement"], [id*="faire-dimensionner-votre-systeme"], [id*="dimensionner-votre-systeme"] ) a[class*="btn"]:first-of-type, #sovematic-payment-page section.sove-section:is( [id*="vos-clients"], [id*="paiement-ne-devrait"], [id*="partie-compliquee"], [id*="systeme-de-paiement"], [id*="faire-dimensionner-votre-systeme"], [id*="dimensionner-votre-systeme"] ) .wp-block-button:first-child .wp-block-button__link { background: linear-gradient(135deg, #DE072D, #B80627) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.08) !important; box-shadow: 0 16px 34px rgba(222,7,45,.24), inset 0 1px 0 rgba(255,255,255,.12) !important; } /* bouton secondaire */ #sovematic-payment-page section.sove-section:is( [id*="vos-clients"], [id*="paiement-ne-devrait"], [id*="partie-compliquee"], [id*="systeme-de-paiement"], [id*="faire-dimensionner-votre-systeme"], [id*="dimensionner-votre-systeme"] ) a.sove-btn:last-of-type, #sovematic-payment-page section.sove-section:is( [id*="vos-clients"], [id*="paiement-ne-devrait"], [id*="partie-compliquee"], [id*="systeme-de-paiement"], [id*="faire-dimensionner-votre-systeme"], [id*="dimensionner-votre-systeme"] ) a[class*="btn"]:last-of-type, #sovematic-payment-page section.sove-section:is( [id*="vos-clients"], [id*="paiement-ne-devrait"], [id*="partie-compliquee"], [id*="systeme-de-paiement"], [id*="faire-dimensionner-votre-systeme"], [id*="dimensionner-votre-systeme"] ) .wp-block-button:last-child .wp-block-button__link { background: rgba(255,255,255,.06) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,.18) !important; box-shadow: 0 12px 24px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.06) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } #sovematic-payment-page section.sove-section:is( [id*="vos-clients"], [id*="paiement-ne-devrait"], [id*="partie-compliquee"], [id*="systeme-de-paiement"], [id*="faire-dimensionner-votre-systeme"], [id*="dimensionner-votre-systeme"] ) a.sove-btn:hover, #sovematic-payment-page section.sove-section:is( [id*="vos-clients"], [id*="paiement-ne-devrait"], [id*="partie-compliquee"], [id*="systeme-de-paiement"], [id*="faire-dimensionner-votre-systeme"], [id*="dimensionner-votre-systeme"] ) a[class*="btn"]:hover, #sovematic-payment-page section.sove-section:is( [id*="vos-clients"], [id*="paiement-ne-devrait"], [id*="partie-compliquee"], [id*="systeme-de-paiement"], [id*="faire-dimensionner-votre-systeme"], [id*="dimensionner-votre-systeme"] ) .wp-block-button__link:hover { transform: translateY(-2px) !important; filter: brightness(1.03) !important; } /* si les boutons sont directement l’un sous l’autre dans le flux */ @media (min-width: 768px) { #sovematic-payment-page section.sove-section:is( [id*="vos-clients"], [id*="paiement-ne-devrait"], [id*="partie-compliquee"], [id*="systeme-de-paiement"], [id*="faire-dimensionner-votre-systeme"], [id*="dimensionner-votre-systeme"] ) > .sove-container > a.sove-btn, #sovematic-payment-page section.sove-section:is( [id*="vos-clients"], [id*="paiement-ne-devrait"], [id*="partie-compliquee"], [id*="systeme-de-paiement"], [id*="faire-dimensionner-votre-systeme"], [id*="dimensionner-votre-systeme"] ) > .sove-container > a[class*="btn"] { margin: 30px 7px 0 !important; } } /* ========================================================= HR ========================================================= */ #sovematic-payment-page section.sove-section:is( [id*="vos-clients"], [id*="paiement-ne-devrait"], [id*="partie-compliquee"], [id*="systeme-de-paiement"], [id*="faire-dimensionner-votre-systeme"], [id*="dimensionner-votre-systeme"] ) hr { display: none !important; } /* ========================================================= TABLETTE ========================================================= */ @media (min-width: 768px) and (max-width: 1100px) { #sovematic-payment-page section.sove-section:is( [id*="vos-clients"], [id*="paiement-ne-devrait"], [id*="partie-compliquee"], [id*="systeme-de-paiement"], [id*="faire-dimensionner-votre-systeme"], [id*="dimensionner-votre-systeme"] ) > .sove-container { width: calc(100% - 40px) !important; } #sovematic-payment-page section.sove-section:is( [id*="vos-clients"], [id*="paiement-ne-devrait"], [id*="partie-compliquee"], [id*="systeme-de-paiement"], [id*="faire-dimensionner-votre-systeme"], [id*="dimensionner-votre-systeme"] ) ul { grid-template-columns: 1fr !important; } } /* ========================================================= SMARTPHONE ========================================================= */ @media (max-width: 767px) { #sovematic-payment-page section.sove-section:is( [id*="vos-clients"], [id*="paiement-ne-devrait"], [id*="partie-compliquee"], [id*="systeme-de-paiement"], [id*="faire-dimensionner-votre-systeme"], [id*="dimensionner-votre-systeme"] ) { padding: 54px 0 !important; } #sovematic-payment-page section.sove-section:is( [id*="vos-clients"], [id*="paiement-ne-devrait"], [id*="partie-compliquee"], [id*="systeme-de-paiement"], [id*="faire-dimensionner-votre-systeme"], [id*="dimensionner-votre-systeme"] ) > .sove-container { width: calc(100% - 24px) !important; } #sovematic-payment-page section.sove-section:is( [id*="vos-clients"], [id*="paiement-ne-devrait"], [id*="partie-compliquee"], [id*="systeme-de-paiement"], [id*="faire-dimensionner-votre-systeme"], [id*="dimensionner-votre-systeme"] ) h2 { font-size: clamp(2rem, 9vw, 2.8rem) !important; line-height: 1 !important; } #sovematic-payment-page section.sove-section:is( [id*="vos-clients"], [id*="paiement-ne-devrait"], [id*="partie-compliquee"], [id*="systeme-de-paiement"], [id*="faire-dimensionner-votre-systeme"], [id*="dimensionner-votre-systeme"] ) ul { grid-template-columns: 1fr !important; gap: 10px !important; } #sovematic-payment-page section.sove-section:is( [id*="vos-clients"], [id*="paiement-ne-devrait"], [id*="partie-compliquee"], [id*="systeme-de-paiement"], [id*="faire-dimensionner-votre-systeme"], [id*="dimensionner-votre-systeme"] ) ul > li { padding: 16px 14px 16px 44px !important; font-size: 14px !important; } #sovematic-payment-page section.sove-section:is( [id*="vos-clients"], [id*="paiement-ne-devrait"], [id*="partie-compliquee"], [id*="systeme-de-paiement"], [id*="faire-dimensionner-votre-systeme"], [id*="dimensionner-votre-systeme"] ) :is(.wp-block-buttons, .sove-cta-group, .cta-group, .buttons-group) { flex-direction: column !important; gap: 10px !important; } #sovematic-payment-page section.sove-section:is( [id*="vos-clients"], [id*="paiement-ne-devrait"], [id*="partie-compliquee"], [id*="systeme-de-paiement"], [id*="faire-dimensionner-votre-systeme"], [id*="dimensionner-votre-systeme"] ) a.sove-btn, #sovematic-payment-page section.sove-section:is( [id*="vos-clients"], [id*="paiement-ne-devrait"], [id*="partie-compliquee"], [id*="systeme-de-paiement"], [id*="faire-dimensionner-votre-systeme"], [id*="dimensionner-votre-systeme"] ) a[class*="btn"], #sovematic-payment-page section.sove-section:is( [id*="vos-clients"], [id*="paiement-ne-devrait"], [id*="partie-compliquee"], [id*="systeme-de-paiement"], [id*="faire-dimensionner-votre-systeme"], [id*="dimensionner-votre-systeme"] ) .wp-block-button__link { width: 100% !important; } #sovematic-payment-page section.sove-section:is( [id*="vos-clients"], [id*="paiement-ne-devrait"], [id*="partie-compliquee"], [id*="systeme-de-paiement"], [id*="faire-dimensionner-votre-systeme"], [id*="dimensionner-votre-systeme"] ) > .sove-container > a.sove-btn, #sovematic-payment-page section.sove-section:is( [id*="vos-clients"], [id*="paiement-ne-devrait"], [id*="partie-compliquee"], [id*="systeme-de-paiement"], [id*="faire-dimensionner-votre-systeme"], [id*="dimensionner-votre-systeme"] ) > .sove-container > a[class*="btn"] { display: flex !important; width: 100% !important; margin: 10px 0 0 !important; } }/* End custom CSS */