@font-face { font-family: "TT Norms Pro"; src: url("../fonts/TTNormsPro-Rg.woff2") format("woff2"), url("../fonts/TTNormsPro-Rg.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("../fonts/TTNormsPro-Md.woff2") format("woff2"), url("../fonts/TTNormsPro-Md.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; } body { padding: 0; margin: 0; font-family: "TT Norms Pro", sans-serif; font-optical-sizing: auto; font-size: 14px; line-height: 18px; color: #1b2c2b; background: #fff; position: relative; width: 100%; } body *, body *:before, body *:after { box-sizing: border-box; } body h1, body h2, body h3, body h4, body h5, body h6 { margin: 0; font-weight: normal; } body img { max-width: 100%; height: auto; display: block; } body a { text-decoration: none; } body a:hover, body a:focus, body a:active { outline: none; text-decoration: none; box-shadow: none; } body p, body ul, body ol { margin: 0; } body .btn { display: flex; justify-content: center; align-items: center; background: rgba(232, 198, 160, 0.7); font-size: 24px; line-height: 24px; margin: 0 auto; line-height: 100%; text-decoration: none; text-align: center; padding: 18px 12px; font-weight: 500; font-family: "TT Norms Pro", sans-serif; border-radius: 100px; color: #1b2c2b; transition: all 0.45s ease-in-out; min-width: 300px; width: -moz-fit-content; width: fit-content; } body .btn:hover, body .btn:focus, body .btn:active { background: #e8c6a0; } body .mobile { display: flex; } body .desk { display: none; } @media (min-width: 768px) { body { font-size: 20px; line-height: 28px; } body .mobile { display: none; } body .desk { display: flex; } } #footer { padding: 57px 30px; max-width: 1440px; margin: 0 auto; } #footer .contenu { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 57px; } #footer .contenu p { font-size: 12px; line-height: 16px; text-align: justify; max-width: 1129px; margin: 0 auto; } @media (min-width: 768px) { #footer { padding: 96px 30px; } #footer .contenu { gap: 134px; } } main .fade-in { opacity: 0; transition: all 0.45s ease-in-out; transform: translateY(20px); } main .fade-in.active { opacity: 1; transform: translateY(0); } main .fade-in-left { opacity: 0; transition: all 0.45s ease-in-out; transform: translateX(-20px); } main .fade-in-left.active { opacity: 1; transform: translateX(0); } main aside { position: fixed; top: 20px; right: 14px; z-index: 100; rotate: -90deg; transform-origin: right; } main aside .btn { width: -moz-fit-content; width: fit-content; min-width: 0; display: flex; justify-content: center; align-items: center; background: #e8c6a0; color: #1a2141; font-size: 14px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: 20px; border-top-right-radius: 20px; padding: 10px 14px; text-transform: none; transition: all 0.45s ease-in-out; } main aside .btn:hover, main aside .btn:focus, main aside .btn:active { background: #1a2141; color: #e8c6a0; } main #illustration { display: flex; flex-direction: column; justify-content: center; align-items: stretch; max-width: 500px; margin: 0 auto; } main #illustration .illustration { width: 100%; position: relative; aspect-ratio: 872/935; } main #illustration .illustration .logo { position: relative; z-index: 2; } main #illustration .illustration .logo img { max-width: 50vw; margin: 0 auto; display: block; } main #illustration .illustration .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; z-index: 1; } main #illustration #formulaire { width: 100%; display: flex; flex-direction: column; gap: 20px; background: #e8c6a0; padding: 30px 20px; color: #1a2141; font-family: "Red Hat Text", sans-serif; } main #illustration #formulaire h2 { text-align: center; text-transform: uppercase; font-size: 24px; line-height: 28px; font-family: "Cormorant SC", serif; } main #illustration #formulaire h1 { text-align: center; text-transform: uppercase; font-size: 30px; line-height: 28px; font-weight: bold; font-family: "Cormorant SC", serif; } main #illustration #formulaire .intro { max-width: 346px; margin: 0 auto; font-size: 14px; line-height: 18px; max-width: 100%; } main #illustration #formulaire form { display: flex; flex-direction: column; justify-content: center; gap: 20px; width: 100%; margin: 0 auto; } main #illustration #formulaire form .form-group { display: flex; flex-direction: column; justify-content: center; gap: 20px; width: 100%; max-width: 303px; margin: 0 auto; } main #illustration #formulaire form .form-champ { display: flex; flex-direction: column; justify-content: center; gap: 9px; width: 100%; max-width: 303px; margin: 0 auto; } main #illustration #formulaire form .form-champ label { font-size: 14px; line-height: 16px; } main #illustration #formulaire form .form-champ .champ { width: 100%; height: 38px; background: rgba(255, 255, 255, 0.5); border: none; border-radius: 4px; padding: 0 10px; font-size: 14px; line-height: 16px; font-family: "Red Hat Text", sans-serif; color: #1a2141; outline: none; transition: all 0.45s ease-in-out; } main #illustration #formulaire form .form-champ .champ:hover, main #illustration #formulaire form .form-champ .champ:focus, main #illustration #formulaire form .form-champ .champ:active { background: rgba(255, 255, 255, 0.7); } main #illustration #formulaire form .form-champ .champ::-moz-placeholder { color: rgba(26, 33, 65, 0.5); } main #illustration #formulaire form .form-champ .champ::placeholder { color: rgba(26, 33, 65, 0.5); } main #illustration #formulaire form button { background: #1a2141; color: #e8c6a0; font-size: 16px; line-height: 20px; font-family: "Red Hat Text", sans-serif; border: none; border-radius: 4px; padding: 0; outline: none; font-weight: 500; display: flex; justify-content: center; align-items: center; min-height: 50px; text-transform: uppercase; width: 100%; max-width: 387px; margin: 16px auto; transition: all 0.45s ease-in-out; cursor: pointer; } main #illustration #formulaire form button:hover, main #illustration #formulaire form button:focus, main #illustration #formulaire form button:active { background: rgba(26, 33, 65, 0.7); } main #illustration #formulaire form .form-checkbox { display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 387px; margin: 0 auto; font-size: 16px; line-height: 20px; } main #illustration #formulaire form .form-checkbox .checkbox { display: flex; justify-content: center; gap: 9px; } main #illustration #formulaire form .form-checkbox .checkbox input { width: 20px; min-width: 20px; height: 20px; min-height: 20px; border: none; border-radius: 4px; padding: 0; outline: none; transition: all 0.45s ease-in-out; background: rgba(255, 255, 255, 0.5); -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; margin: 0; } main #illustration #formulaire form .form-checkbox .checkbox input:checked { background: #1a2141; } main #illustration #formulaire form .form-checkbox .checkbox label { cursor: pointer; } main #illustration #formulaire .legend { font-size: 12px; line-height: 16px; max-width: 387px; margin: 0 auto; } main #illustration #formulaire .legend a { color: inherit; text-decoration: underline; transition: all 0.45s ease-in-out; } main #illustration #formulaire .legend a:hover, main #illustration #formulaire .legend a:focus, main #illustration #formulaire .legend a:active { color: rgba(26, 33, 65, 0.5); } main .section { display: flex; flex-direction: column; gap: 40px; padding: 30px 0; position: relative; z-index: 1; background: #fff; max-width: 1440px; margin: 0 auto; } main .section h2 { text-transform: uppercase; font-size: 32px; line-height: 110%; font-family: "Cormorant SC", serif; font-weight: 300; padding: 0 30px; color: #e8c6a0; } main .section h2 span { font-size: 46px; display: block; line-height: 100%; } main .section .group { display: flex; flex-direction: column; gap: 40px; max-width: 1175px; margin: 0 auto; align-items: flex-end; } main .section .group .col { display: flex; flex-direction: column; gap: 32px; } main .section .group .col p { padding: 0 30px; } main #section-2 .group { gap: 0; } main #section-2 .group .col:first-child img { height: 100%; -o-object-fit: cover; object-fit: cover; } main #section-2 .group .col:last-child { padding-top: 40px; padding-bottom: 65px; background: rgba(233, 220, 194, 0.3); } main #section-3 .group { gap: 0; position: relative; padding-bottom: 100px; } main #section-3 .group .btn { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } main #section-3 .group .col:first-child p { max-width: 335px; } main #section-3 .group .col:last-child { padding-top: 40px; } main #section-3 .group .col:last-child img { height: 100%; -o-object-fit: cover; object-fit: cover; } main #section-4 { background: url(../img/pattern.svg) no-repeat center center/cover; } main #section-4 .group { gap: 20px; } main .parallax { height: 40vh; position: relative; overflow: hidden; } main .parallax img { width: 100%; height: 130%; -o-object-fit: cover; object-fit: cover; position: absolute; top: 0; left: 0; z-index: -1; will-change: transform; transition: none; } @media (min-width: 1024px) { main aside { right: 20px; } main aside .btn { font-size: 20px; line-height: 24px; padding: 18px 24px; } main #illustration { flex-direction: row; max-width: 1440px; margin: 0 auto; } main #illustration .illustration { width: calc(100% - 568px); } main #illustration .illustration h1 { height: 100%; } main #illustration .illustration h1 img { max-width: 338px; } main #illustration #formulaire { width: 568px; padding: 50px; gap: 30px; } main #illustration #formulaire h2 { font-size: 27px; line-height: 31px; text-align: left; } main #illustration #formulaire h1 { font-size: 30px; line-height: 31px; text-align: left; } main #illustration #formulaire .intro { font-size: 16px; line-height: 24px; } main #illustration #formulaire form .form-group { max-width: 100%; flex-direction: row; gap: 40px; } main #illustration #formulaire form .form-champ { max-width: 100%; } main #illustration #formulaire form > .form-champ { max-width: calc(50% - 20px); margin: 0; } main #illustration #formulaire form .form-checkbox { max-width: 100%; } main #illustration #formulaire .legend { max-width: 100%; } main .section h2 { font-size: 64px; padding: 0; } main .section h2 span { font-size: 88px; } main .section .group { flex-direction: row; } main .section .group .col { max-width: 50%; } main .section .group .col p { padding: 0; } main #section-1 { position: relative; padding-top: 77px; padding-bottom: 165px; } main #section-1 h2 { width: 100%; max-width: 1175px; margin: 0 auto; } main #section-1 .btn { position: absolute; bottom: 40px; left: 50%; transform: translateX(calc(-50% - 20px)); } main #section-1 .btn.active { transform: translateX(-50%); } main #section-2 h2 { width: 100%; max-width: 1175px; margin: 0 auto; } main #section-2 .group { align-items: stretch; max-width: 100%; width: 100%; } main #section-2 .group .col:first-child { width: calc(100% - 543px); max-width: 100%; } main #section-2 .group .col:last-child { width: 543px; min-width: 543px; padding: 90px 70px; } main #section-2 .group .col:last-child p { width: 331px; } main #section-2 .group .col:last-child .btn { margin: 0; } main #section-3 h2 { width: 100%; max-width: 1175px; margin: 0 auto; } main #section-3 .group { align-items: stretch; max-width: 100%; width: 100%; gap: 84px; padding-bottom: 0; padding-left: 125px; } main #section-3 .group .col:first-child { width: 335px; } main #section-3 .group .col:last-child { width: calc(100% - 335px); max-width: 100%; padding-top: 0; } main #section-3 .group .btn { position: static; transform: translateX(-20px); margin: 0; } main #section-3 .group .btn.active { transform: translateX(0); } main #section-4 img, main #section-4 h2 { width: 100%; max-width: 1198px; margin: 0 auto; } main #section-4 .group { align-items: flex-start; gap: 60px; max-width: 1122px; } main #section-4 .group .col { flex: 1; } main .parallax { height: 60vh; } }