Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="background-block_62a79004b84c7" class="backgroundSwitcher" data-background="--wp--preset--color--vert" data-text="--wp--preset--color--jaune" data-cursor-text="CLICK">
    
    <div id="textScroller-block_62a79023b84c8" class="textScroller">

        <svg class="textScrollerSVG" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1728 307" style="enable-background:new 0 0 1728 307;" xml:space="preserve">
            <style type="text/css">
                .st0 {
                    fill: none;
                }
            </style>
            <path class="st0" id="moverPath" d="M-64.3,93.1 C201.23333,137.33333 466.76667,181.56667 732.3,225.8 930.03333,177.6 1127.76667,129.4 1325.5,81.2 1481.1,107.6 1636.7,134 1792.3,160.4 "></path>
        </svg>

<div class="scrollerContent">
            
                <h3 data-background="--wp--preset--color--vert" data-svgcolor="--wp--preset--color--vert-pale" data-color="--wp--preset--color--rose" data-height="870" data-width="759.9" data-path="M319.653 0C441.208 33.0186 562.763 66.0233 684.305 99.0419C709.503 123.016 734.702 147.004 759.901 170.979C714.443 372.847 668.985 574.716 623.527 776.584C576.636 807.724 529.731 838.865 482.84 870.005C398.797 860.627 314.769 851.248 230.727 841.87C153.822 802.854 76.9043 763.839 0 724.823C19.5078 631.403 39.0157 537.996 58.5235 444.575C121.555 407.438 184.573 370.287 247.605 333.15L252.113 114.807C274.626 76.5286 297.14 38.2643 319.653 0Z">TESTING THIS LINE OF CODE</h3>

            
                <h3 data-background="--wp--preset--color--rouge" data-svgcolor="--wp--preset--color--rose" data-color="--wp--preset--color--vert" data-height="812.72" data-width="649.2" data-path="M572.465 802.016C398.127 805.784 223.805 809.537 49.467 813.305C59.495 603.854 69.5386 394.403 79.5666 184.951C57.0036 141.056 34.425 97.1597 11.8464 53.2638C8.07813 35.6993 4.32542 18.1503 0.557129 0.585693C201.226 1.84698 401.895 3.09269 602.564 4.35398C628.646 89.6698 654.433 211.08 649.029 356.767C646.242 431.992 635.7 498.576 622.838 554.602C606.052 637.083 589.266 719.55 572.465 802.032V802.016Z">WOW COOL TEST</h3>

            
                <h3 data-background="--wp--preset--color--jaune" data-svgcolor="--wp--preset--color--vert-pale" data-color="--wp--preset--color--vert" data-height="870" data-width="759.9" data-path="M319.653 0C441.208 33.0186 562.763 66.0233 684.305 99.0419C709.503 123.016 734.702 147.004 759.901 170.979C714.443 372.847 668.985 574.716 623.527 776.584C576.636 807.724 529.731 838.865 482.84 870.005C398.797 860.626 314.769 851.248 230.727 841.87C153.822 802.854 76.9043 763.839 0 724.823C19.5078 631.402 39.0157 537.996 58.5235 444.575C121.555 407.438 184.573 370.287 247.605 333.15L252.113 114.807C274.626 76.5286 297.14 38.2643 319.653 0Z">ANOTHER LINE I GUESS</h3>

            
                <h3 data-background="--wp--preset--color--vert-pale" data-svgcolor="--wp--preset--color--jaune" data-color="--wp--preset--color--vert" data-height="910.71" data-width="569.86" data-path="M557.144 596.379C542.632 678.253 535.376 719.191 498.035 757.154C495.762 759.458 465.491 781.149 404.98 824.547C349.094 864.612 338.926 871.557 319.275 880.293C309.574 884.606 270.817 899.772 216.784 908.134C187.027 912.728 157.535 912.572 128.26 907.651C65.9125 735.743 10.229 516.451 1.29105 260.363C-1.88552 169.254 1.19762 83.6738 8.31376 4.47752C51.6491 -0.832334 125.38 -4.3359 206.631 22.2445C259.169 39.4354 291.527 62.8704 352.006 102.064C435.625 156.237 475.052 186.165 509.356 237.411C548.705 296.193 556.724 350.708 564.588 404.258C576.406 484.685 566.098 545.772 557.129 596.379H557.144Z">WAY TOO MANY LINES OF TESTS</h3>

            
                <h3 data-background="--wp--preset--color--light-blue" data-svgcolor="--wp--preset--color--rose" data-color="--wp--preset--color--vert" data-height="888.62" data-width="467.09" data-path="M3.5783 846.997L366.986 941.512C404.411 821.881 441.825 702.247 479.251 582.616C476.434 411.497 473.628 240.382 470.807 69.2749C407.349 46.4442 343.885 23.6372 280.424 0.818373C251.053 28.827 218.163 64.5082 186.094 108.8C144.599 166.14 116.756 220.944 97.958 265.728C75.1362 329.207 52.3262 392.689 29.5044 456.168C19.9192 529.404 10.334 602.639 0.751872 675.863C1.69005 732.907 2.63132 789.938 3.5695 846.982L3.5783 846.997Z">COOL</h3>

            
                <h3 data-background="--wp--preset--color--rose" data-svgcolor="--wp--preset--color--light-blue" data-color="--wp--preset--color--rouge" data-height="850.2" data-width="550.94" data-path="M0.701141 47.0689L539.133 0.211636C544.302 51.6553 549.458 103.1 554.627 154.544C533.82 171.301 513.013 188.058 492.204 204.801L506.504 435.163C502.092 496.225 497.679 557.274 493.28 618.335C494.298 658.548 495.316 698.762 496.32 738.977C498.841 778.142 501.375 817.293 503.896 856.458C363.266 866.538 222.636 876.619 82.0074 886.712C74.6552 837.77 67.3031 788.828 59.9509 739.886C52.0103 655.787 44.0827 571.687 36.1431 487.601C36.8149 401.389 37.4987 315.163 38.1705 228.952C28.0984 228.754 18.0382 228.541 7.96607 228.343C5.54841 167.914 3.13076 107.484 0.701141 47.0689Z">OK THIS IS THE LAST ONE, THANKS FOR WATCHING</h3>

            
            <svg data-speed="1.4" width="760" height="871" viewBox="0 0 760 871" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path id="scrollerPath" d="M319.653 0C441.208 33.0186 562.763 66.0233 684.305 99.0419C709.503 123.016 734.702 147.004 759.901 170.979C714.443 372.847 668.985 574.716 623.527 776.584C576.636 807.724 529.731 838.865 482.84 870.005C398.797 860.627 314.769 851.248 230.727 841.87C153.822 802.854 76.9043 763.839 0 724.823C19.5078 631.403 39.0157 537.996 58.5235 444.575C121.555 407.438 184.573 370.287 247.605 333.15L252.113 114.807C274.626 76.5286 297.14 38.2643 319.653 0Z"></path>
            </svg>

        </div>

    </div>



</div>
              
            
!

CSS

              
                body{--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--color--vert: #264338;--wp--preset--color--vert-pale: #95B0AF;--wp--preset--color--rose: #E8CAC8;--wp--preset--color--jaune: #F4E246;--wp--preset--color--rouge: #ED3725;--wp--preset--color--light-blue: #A8B6DE;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--duotone--dark-grayscale: url('#wp-duotone-dark-grayscale');--wp--preset--duotone--grayscale: url('#wp-duotone-grayscale');--wp--preset--duotone--purple-yellow: url('#wp-duotone-purple-yellow');--wp--preset--duotone--blue-red: url('#wp-duotone-blue-red');--wp--preset--duotone--midnight: url('#wp-duotone-midnight');--wp--preset--duotone--magenta-yellow: url('#wp-duotone-magenta-yellow');--wp--preset--duotone--purple-green: url('#wp-duotone-purple-green');--wp--preset--duotone--blue-orange: url('#wp-duotone-blue-orange');--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--font-family--satoshi: Satoshi, sans-serif;--wp--preset--font-family--system-fonts: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;}body { margin: 0; }body{background-color: var(--wp--preset--color--jaune);color: var(--wp--preset--color--vert);font-family: var(--wp--preset--font-family--satoshi);font-size: 1em;margin-top: 0em;margin-right: 0em;margin-bottom: 0em;margin-left: 0em;padding-top: 0em;padding-right: 0em;padding-bottom: 0em;padding-left: 0em;--wp--style--block-gap: 3em;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: var( --wp--style--block-gap ); }h1{font-size: 7em;font-weight: 500;margin-top: 0em;margin-right: 0em;margin-bottom: 1em;margin-left: 0em;text-transform: uppercase;}h2{font-size: 3em;font-weight: 500;margin-top: 0em;margin-right: 0em;margin-bottom: 1em;margin-left: 0em;text-transform: uppercase;}h3{font-size: 1.5em;font-weight: 500;margin-top: 0em;margin-right: 0em;margin-bottom: 1em;margin-left: 0em;text-transform: uppercase;}h4{font-size: 1.4em;font-weight: 500;margin-top: 0em;margin-right: 0em;margin-bottom: 1em;margin-left: 0em;text-transform: uppercase;}h5{font-size: 1.2em;font-weight: 500;margin-top: 0em;margin-right: 0em;margin-bottom: 1em;margin-left: 0em;text-transform: uppercase;}h6{font-size: 1.1em;font-weight: 500;margin-top: 0em;margin-right: 0em;margin-bottom: 1em;margin-left: 0em;text-transform: uppercase;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-vert-color{color: var(--wp--preset--color--vert) !important;}.has-vert-pale-color{color: var(--wp--preset--color--vert-pale) !important;}.has-rose-color{color: var(--wp--preset--color--rose) !important;}.has-jaune-color{color: var(--wp--preset--color--jaune) !important;}.has-rouge-color{color: var(--wp--preset--color--rouge) !important;}.has-light-blue-color{color: var(--wp--preset--color--light-blue) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-vert-background-color{background-color: var(--wp--preset--color--vert) !important;}.has-vert-pale-background-color{background-color: var(--wp--preset--color--vert-pale) !important;}.has-rose-background-color{background-color: var(--wp--preset--color--rose) !important;}.has-jaune-background-color{background-color: var(--wp--preset--color--jaune) !important;}.has-rouge-background-color{background-color: var(--wp--preset--color--rouge) !important;}.has-light-blue-background-color{background-color: var(--wp--preset--color--light-blue) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vert-border-color{border-color: var(--wp--preset--color--vert) !important;}.has-vert-pale-border-color{border-color: var(--wp--preset--color--vert-pale) !important;}.has-rose-border-color{border-color: var(--wp--preset--color--rose) !important;}.has-jaune-border-color{border-color: var(--wp--preset--color--jaune) !important;}.has-rouge-border-color{border-color: var(--wp--preset--color--rouge) !important;}.has-light-blue-border-color{border-color: var(--wp--preset--color--light-blue) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}.has-satoshi-font-family{font-family: var(--wp--preset--font-family--satoshi) !important;}.has-system-fonts-font-family{font-family: var(--wp--preset--font-family--system-fonts) !important;}

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

.otgs-development-site-front-end {
	display: none !important;
}

html {
	font-size: 16px;
	scrollbar-width: none;
}

body {
	transition: 0.3s background ease-in-out, 0.3s color ease-in-out;
	overflow-x: hidden;
	&::-webkit-scrollbar {
		display: none;
	}
}

header.site-header {
	position: fixed;
	width: 100%;
	z-index: 5;
	& + div {
		margin-block-start: 0;
		margin-top: 0;
	}
	& .wp-block-buttons:nth-child(1) {
		margin-right: 2.28em;
		@media (max-width: 700px) {
			display: none;
		}
	}
}

footer.site-footer {
	margin: 0;
	height: auto;
}

.is-style-leftBorder {
	position: relative;
}

.is-style-leftBorder > .leftBorder {
	position: absolute;
	left: -0.97em;
	height: 120%;
	width: 0.67px;
	background-color: var(--wp--preset--color--vert);
}

.is-style-with-arrow .wp-block-button__link {
	position: relative;
	color: var(--wp--preset--color--rouge);
	background-color: transparent;
	padding: 0;
	text-transform: uppercase;
	display: inline-grid;
	gap: 0.75em;
	grid-template-columns: auto 1fr;
	align-items: center;
	& span {
		transition: 0.4s transform ease-in-out;
	}
	&:hover span {
		transform: translateX(10px);
	}
}

.site-header .wp-container-5 {
	position: relative;
	justify-content: flex-end;
	height: 50px;
}

.customCursor {
	pointer-events: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 150;
	contain: layout style size;
	pointer-events: none;
	will-change: transform;
	transition: opacity 0.3s ease-in-out, height 0.4s ease-in-out, width 0.4s ease-in-out;
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background-color: inherit;
	opacity: 0;
	@media (max-width: 1000px) {
		display: none;
	}
	&.visible {
		opacity: 1;
	}
	&.withText {
		width: 5em;
		height: 5em;
		.cursor-text {
			font-size: 0.8em;
			opacity: 1;
		}
	}
	.cursor-text {
		transition: opacity 0.6s ease-in-out, height 0.4s ease-in-out, width 0.4s ease-in-out;
		opacity: 0;
		width: 100%;
		height: 100%;
		display: grid;
		align-items: center;
		justify-content: center;
	}
}

form.wpcf7-form {
	input,
	textarea {
		display: block;
		width: 100%;
		border: none;
		border-bottom: 1px solid;
		margin-bottom: 1em;
		padding: 1em 1em 0.7em 0;
		background: transparent;
		color: inherit;
		&:focus {
			outline: none;
		}
	}
	input.wpcf7-submit {
		background: var(--wp--preset--color--rouge);
		padding: 1em;
		text-transform: uppercase;
		display: inline-block;
		width: auto;
		border: none;
		transition: 0.2s all ease-in-out;
		margin-top: 1em;
		&:hover {
			background: var(--wp--preset--color--vert);
			color: var(--wp--preset--color--jaune);
		}
	}
}

.wp-block-spacer {
	margin: 0 !important;
}

.wp-block-spacer + div {
	margin-top: 0 !important;
}

@media (max-width: 400px) {
	.wp-container-29 h2 {
		font-size: 1.5em;
		margin-bottom: 7em !important;
	}
}

#opportunites-commerciales {
	overflow: hidden;
	@media (min-width: 1000px) {
		h3 br {
			display: none;
		}
	}
	figure.wp-block-image {
		height: 33.1em;
		overflow: hidden;
		@media (max-width: 1024px) and (min-width:900px) {
			height: 21.1em;
		}
		@media (min-width:700px) and (max-width:1024px) {
			height: 21.1em;
		}
	}
	.grid-container {
		padding-left: 7.25390625%;

		@media (min-width: 600px) {
			padding-left: 7.25390625%;
			padding-right: 7.25390625%;
		}
		@media (min-width: 1000px) {
			padding-left: 10.25390625%;
		}
		@media (min-width: 1700px) {
			padding-left: 11.4%;
		}

		& > div {
			@media (min-width: 700px) and (max-width: 1000px) {
				flex-wrap: nowrap !important;
				gap: 2.5em;
			}

			@media (min-width: 1000px) and (max-width: 1440px) {
				gap: 3.5em;
			}

			& > div:first-of-type {
				@media (max-width: 1000px) and (min-width: 700px) {
					flex-basis: 100% !important;
				}

				@media (min-width: 700px) {
					flex: 0 1 100%;
				}

				@media (min-width: 1000px) {
					flex: 0 1 30%;
				}

				@media (min-width: 1700px) {
					flex: 0 1 37.8834%;
				}
			}

			& > div:last-of-type > .wp-block-column {
				@media (min-width: 700px) and (max-width: 1000px) {
					padding-right: 3em !important;
				}

				@media (min-width: 1000px) and (max-width: 1700px) {
					padding-right: 2em !important;
				}

				// @media (min-width: 1700px) {
				// 	flex-basis: 35.7em;
				// }
			}
		}
	}
}

.contact-form__column {
	.wp-block-group {
		@media (max-width: 1000px) and (min-width: 700px) {
			flex-wrap: nowrap;
			flex-direction: row;
			padding: 0 1.5em;
		}
		h3 {
			@media (max-width: 1000px) {
				flex: 1 0 44.921875%;
			}
		}
	}
}

.wp-container-28 {
	@media (max-width: 781px) {
		gap: 3.125em !important;
		.wp-block-group {
			display: grid;
			grid-template-columns: 1fr 62.852897473997028%;
		}
	}
	@media (max-width: 400px) {
		gap: 3.125em !important;
		.wp-block-group {
			display: block;
		}
	}
}

.site-header .wp-container-5 > svg {
	position: absolute;
	top: 0;
	left: 0;
}

figure {
	margin: 0;
}

p {
	margin: 0 0 1.4em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	z-index: 1;
	position: relative;
}

h1 {
	@media (max-width: 1440px) and (min-width: 1000px) {
		font-size: 5.577777777em;
	}
}

h2 {
	@media (max-width: 1440px) and (min-width: 1000px) {
		font-size: 2.3em;
	}
}

.wp-block-button__link {
	@media (max-width: 1440px) and (min-width: 1000px) {
		font-size: 1em;
	}
}

.wpcf7-form label {
	visibility: hidden;
	position: absolute;
	left: 0;
	top: 0;
}

.wp-block-contact-form-7-contact-form-selector {
	width: 100%;
	display: block;
}

form.wpcf7-form .subscribeForm {
	position: relative;
	button {
		position: absolute;
		right: 0;
		background: transparent;
		border: none;
		-webkit-appearance: none;
		padding: 0;
		right: 1.007em;
		top: 50%;
		transform: translateY(-50%);
		line-height: 0;
	}
	input {
		color: inherit;
		width: 100%;
		border: 1px solid;
		padding: 1.375em 1.007em;
		border-radius: 0;
		background: transparent;
		margin: 0;
	}
}

/* WebKit, Edge */
::-webkit-input-placeholder {
	color: inherit;
}
/* Firefox 4-18 */
:-moz-placeholder {
	color: inherit;
	opacity: 1;
}
/* Firefox 19+ */
::-moz-placeholder {
	color: inherit;
	opacity: 1;
}
/* IE 10-11 */
:-ms-input-placeholder {
	color: inherit;
}
/* Edge */
::-ms-input-placeholder {
	color: inherit;
}
/* MODERN BROWSER */
::placeholder {
	color: inherit;
}

.middleFont {
	font-size: 1.5em;
}

.smallDroit {
	font-size: 0.7em;
}

@media screen and (min-width: 960px) {
	button.menu-toggle {
		display: none;
	}
}

@media screen and (min-width: 1000px) {
	html {
		/* font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width]))); */
		font-size: calc(15.863px + 4 * ((100vw - 1000px) / 700));
	}
}

@media (max-width: 1000px) {
	.contact-columns {
		gap: 3em !important;
	}
}

@media screen and (max-width: 700px) {
	.wp-container-40.wp-block-group.alignwide.footer-bottom {
		justify-content: center;
		margin-top: 3em !important;
	}

	.footer-bottom .wp-container-39.wp-block-group {
		align-items: center;
	}

	.footer-bottom .wp-container-38.wp-block-buttons {
		flex-direction: column;
	}

	footer {
		text-align: center;
		figure {
			text-align: center;
		}
		.wp-container-35 {
			justify-content: center;
		}
		.wp-container-41 {
			display: grid;
			justify-content: center;
			text-align: center;
		}
		.wp-container-34 {
			justify-content: center;
		}
		.wp-container-40 {
			align-items: center;
			flex-wrap: wrap;
		}
	}

	.alignwide {
		max-width: calc(100vw - 42px) !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	button.sendSubscribe {
		width: 2em;
		height: 1.313em;
	}

	button.sendSubscribe svg {
		width: 100%;
		height: 100%;
	}

	.wp-block-spacer {
		font-size: 9px;
		margin: 0;
	}

	#opportunites-commerciales .grid-container {
		padding: 0 5.6%;
	}

	.grid-container > div {
		gap: 3em;
	}

	#opportunites-commerciales figure.wp-block-image {
		height: 20em !important;
		width: calc(33.3333%) !important;
	}

	#tns1 {
		width: 240% !important;
	}

	div#tns1-ow > button,
	div#tns1-ow > .tns-liveregion {
		display: none;
	}
}

@media screen and (max-width: 600px) {
	h1 {
		font-size: 3.125em;
	}

	.desktop-only {
		display: none !important;
	}

	h2 {
		font-size: 1.875em;
	}
}

@media screen and (min-width: 600px) and (max-width: 1000px) {
	footer .wp-container-36 {
		flex-wrap: nowrap !important;
		gap: 1em;
	}

	h1 {
		font-size: 3.75em;
	}

	h2 {
		font-size: 1.875em;
	}

	h3 {
		font-size: 1.25em;
	}

	.site-footer .wp-block-button__link {
		font-size: 1em;
	}

	.middleFont {
		font-size: 1.375em;
	}
}

p.has-text-align-center.has-jaune-color.has-text-color.middleFont {
	margin: 0;
}
@media screen and (min-width: 1000px) and (max-width: 1440px) {
	.site-header .wp-block-button__link {
		font-size: 1.25em;
	}
	h1 {
		font-size: 5.625em;
	}
	h2 {
		font-size: 2.5em;
	}
	h3 {
		font-size: 1.375em;
	}
	.site-header .is-style-leftBorder .wp-block-button__link {
		font-size: 0.83375em;
	}
	.is-style-leftBorder > .leftBorder {
		height: 2.299375em;
	}
	.middleFont {
		font-size: 1.375em;
	}
	.site-footer .wp-block-social-links.is-style-logos-only .wp-social-link svg {
		width: 1.65em;
		height: 1.65em;
	}
	.smallDroit {
		font-size: 0.875em;
	}
	.site-footer .wp-block-button__link {
		font-size: 1.25em;
	}
}

@media screen and (min-width: 1700px) {
	html {
		font-size: 20px;
	}
}

.textScroller {
	height: 70vh;
	width: 100%;
	overflow: hidden;
	position: relative;
	@media (min-width: 700px) {
		height: 100vh;
	}
	@media (min-width: 700px) and (min-height: 900px) {
		margin-top: -10em;
	}
	.textScrollerSVG {
		width: 100%;
		height: auto;
		@media (max-width: 600px) {
			width: 110%;
		}
	}
	& svg {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		& path {
			transition: 1s fill;
		}
	}
	& .motionPathSvg {
		height: 100%;
		width: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 1;
		transform: translate(-50%, -50%);
	}
	& .scrollerContent {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		display: grid;
		grid-template-rows: 1fr;
		justify-content: stretch;
		align-items: center;
		& h3 {
			width: auto;
			margin: 0;
			opacity: 0;
			grid-row: 1/2;
			position: absolute;
			font-size: 3.125em;
			white-space: nowrap;
			@media (min-width: 700px) {
				font-size: 5.6em;
			}
			@media (min-width: 1700px) {
				font-size: 7em;
			}
		}

		& > svg {
			@media (max-width: 600px) {
				width: 100%;
				height: 26em;
			}
			@media (min-width: 600px) and (max-width: 1000px) {
				height: 50em;
				width: 43.79em;
			}
			@media (min-width: 600px) and (max-width: 1000px) and (min-height: 400px) {
				height: 100vh;
				width: 35.79em;
			}
			@media (min-width: 1000px) and (max-width: 1400px) {
				height: 40em;
				width: 32.5em;
			}
		}
	}
}

              
            
!

JS

              
                gsap.registerPlugin(ScrollTrigger, MorphSVGPlugin, MotionPathPlugin, SplitText);

function BackgroundSwitcher() {
	let i = 1;
	gsap.utils.toArray(".backgroundSwitcher").forEach(function (elem) {
		var backgroundColor = elem.getAttribute("data-background");
		var textColor = elem.getAttribute("data-text");
		ScrollTrigger.create({
			id: "switcher-" + i,
			trigger: elem,
			start: "top 30%",
			end: "bottom 30%",
			onEnter: () => setColor(backgroundColor, textColor),
			onEnterBack: () => setColor(backgroundColor, textColor),
		});
		i += 1;
	});
}

function setColor(backgroundColor, textColor) {
	gsap.set("body", {
		backgroundColor: "var(" + backgroundColor + ")",
		color: "var(" + textColor + ")",
	});
}

function reinitSwitcher() {
	let i = 1;
	gsap.utils.toArray(".backgroundSwitcher").forEach(function (elem) {
		ScrollTrigger.getById("switcher-" + i).kill(false, true);
		i += 1;
	});
	BackgroundSwitcher();
}

function textScroller() {
	const textScroller = document.querySelector(".textScroller");
	const textScrollerSlides = gsap.utils.toArray(".textScroller h3");
	const textScrollerPaths = gsap.utils.toArray(
		".textScroller .svgPaths svg path"
	);
	let totalScrollerSlides = textScrollerSlides.length;
	let currentIndex = 0;

	gsap.set(textScrollerSlides[0], {
		opacity: 1,
	});

	gsap.set("#scrollerPath", {
		fill: "var(" + textScrollerSlides[0].dataset.svgcolor + ")",
	});

MotionPathPlugin.convertToPath("polyline#moverPath");

	let letterSpaces = { I: "0.3", ",": "0.3", "'": "0.3", "’": "0.3", W: "0.6" };
	let originalPosition = "0.45";
	let wordSpacer = "0.65";

	if (window.innerWidth < 1250 && window.innerWidth > 900) {
		letterSpaces = { I: "0.4", ",": "0.4", "'": "0.4", "’": "0.4", W: "0.7" };
		originalPosition = "0.6";
		wordSpacer = "0.85";
	} else if (window.innerWidth < 900 && window.innerWidth > 700) {
		letterSpaces = { I: "0.5", ",": "0.5", "'": "0.5", "’": "0.5", W: "0.8" };
		originalPosition = "0.75";
		wordSpacer = "1";
	} else if (window.innerWidth < 660 && window.innerWidth > 500) {
		letterSpaces = {
			I: "0.16",
			",": "0.16",
			"'": "0.16",
			"’": "0.16",
			W: "0.3",
		};
		originalPosition = "0.24";
		wordSpacer = "0.34";
	} else if (window.innerWidth < 500 && window.innerWidth > 400) {
		letterSpaces = { I: "0.2", ",": "0.2", "'": "0.2", "’": "0.2", W: "0.34" };
		originalPosition = "0.3";
		wordSpacer = "0.4";
	} else if (window.innerWidth < 400) {
		letterSpaces = {
			I: "0.24",
			",": "0.24",
			"'": "0.24",
			"’": "0.24",
			W: "0.42",
		};
		originalPosition = "0.38";
		wordSpacer = "0.48";
	}

	const splitTexts = [];
	const timelines = [];

	for (let slide of textScrollerSlides) {
		const splitText = new SplitText(slide, {
			type: "words,chars",
			position: "absolute",
		});
		splitText.words.reverse();
		splitTexts.push(splitText);
		let slideTimeline = setupSlide(splitText);
		timelines.push(slideTimeline);
	}

	function setupSlide(splitText) {
		let tl = gsap.timeline({
			defaults: { ease: "none" },
			onReverseComplete: () => tl.reverse(0),
			paused: true,
		});

		let position = originalPosition;

		for (let word of splitText.words) {
			for (let i = word.children.length - 1; i >= 0; i--) {
				tl.to(
					word.children[i],
					{
						motionPath: {
							path: "path#moverPath",
							align: "path#moverPath",
							alignOrigin: [0.5, 0.5],
							autoRotate: true,
						},
						duration: window.innerWidth < 600 ? 4 : 10,
					},
					word.children.length - 1 === i
						? "<" + wordSpacer
						: letterSpaces.hasOwnProperty(word.children[i].innerHTML)
						? "<" + letterSpaces[word.children[i].innerHTML]
						: "<" + position
				);
				if (letterSpaces.hasOwnProperty(word.children[i].innerHTML)) {
					position = letterSpaces[word.children[i].innerHTML];
				} else {
					position = originalPosition;
				}
			}
		}

		tl.reverse(0);

		return tl;
	}

	function resizeCheck() {
		let i = 0;

		for (let tl of timelines) {
			var progress = tl.progress(); //record the progress so that we can match it with the new tween (jump to the same spot)
			tl.kill(); //rewind and kill the original tween.
			let splitText = splitTexts[i];
			setupSlide(splitText);
			i++;
		}
		timelines.length = 0;
	}

	window.addEventListener("resize", resizeCheck);

	textScroller.addEventListener("click", function () {
		if (currentIndex == totalScrollerSlides - 1) {
			currentIndex = 0;
		} else {
			currentIndex++;
		}
		let prevSlide =
			currentIndex != 0 ? currentIndex - 1 : totalScrollerSlides - 1;

		gsap.to(textScroller.closest(".backgroundSwitcher"), {
			attr: {
				"data-background": textScrollerSlides[currentIndex].dataset.background,
				"data-text": textScrollerSlides[currentIndex].dataset.color,
			},
			duration: 0,
		});

		reinitSwitcher();

		gsap.to("#scrollerPath", {
			morphSVG: textScrollerSlides[currentIndex].dataset.path,
			duration: 1,
		});

		gsap.set("#scrollerPath", {
			fill: "var(" + textScrollerSlides[currentIndex].dataset.svgcolor + ")",
		});

		gsap.to(textScroller.querySelector("svg"), {
			duration: 1,
			attr: {
				viewBox:
					"0 0 " +
					textScrollerSlides[currentIndex].dataset.width +
					" " +
					textScrollerSlides[currentIndex].dataset.height,
				width: textScrollerSlides[currentIndex].dataset.width,
				height: textScrollerSlides[currentIndex].dataset.height,
			},
		});
		gsap.to(textScrollerSlides, {
			opacity: 0,
			onComplete: () => {
				gsap.to(textScrollerSlides[prevSlide], {
					opacity: 0,
				});
				gsap.to(textScrollerSlides[currentIndex], {
					opacity: 1,
					duration: 1,
				});
			},
		});
	});
}

BackgroundSwitcher();
textScroller();
              
            
!
999px

Console