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>

        </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 textScroller() {
	const textScroller = document.querySelector(".textScroller");
	const textScrollerSlides = gsap.utils.toArray(".textScroller h3");
	let totalScrollerSlides = textScrollerSlides.length;
	let currentIndex = 0;

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

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();
              
            
!
999px

Console