div#headerBoxes,
#nested,
#chapterPicture,
footer {
display: none;
}
#wrapperInner {
padding-top: 0;
}
#top {
width: 90%;
max-width: 1140px;
margin: 105px auto 105px;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
#top .form {
width: 39.5%;
background: #FFFFFF;
padding: 40px;
box-sizing: border-box;
border-radius: 35px;
box-shadow: 10px 30px 50px rgba(0,0,0,0.05);
position: relative;
top: -20px;
}
#top .titre {
width: 53%;
position: relative;
}
#top .titre svg {
position: absolute;
top: 84px;
left: -15px;
z-index: 1;
}
body:not(.home) h1 {
font-size: 64px;
margin: 90px 0 45px 0;
position: relative;
z-index: 2;
}
header #logo a > img:nth-child(2),
header.scrolled #logo a > img:nth-child(2) {
height: 48px;
margin: 0 0 0 20px;
}
header #logo a > img:nth-child(1),
header.scrolled #logo a > img:nth-child(1) {
height: 75px;
}
#page:before {
content: '';
width: 1070px;
height: 1070px;
background: #003cff14;
border-radius: 50%;
position: absolute;
left: -140px;
top: -230px;
z-index: 2;
pointer-events: none;
}
#wrapper {
background: none;
z-index: 2;
}
#top .form h2 {
font-size: 28px;
font-weight: 700;
}
#wrapper div.wpforms-container-full .wpforms-form .wpforms-field {
padding: 0 0 12px 0;
}
#wrapper input, #wrapper textarea {
border: none;
background: #F7F7F7;
border-radius: 15px;
padding: 12px 18px;
height: auto;
}
body:not(.home) div div.wpforms-container-full .wpforms-form .wpforms-submit-container {
bottom: 150px;
position: absolute;
padding: 0;
left: 0;
}
#wrapper textarea {
min-height: 140px;
margin-bottom: 10px;
}
body:not(.home) #wrapper div div div.wpforms-container-full .wpforms-form button[type=submit] {
background: #FFDD00;
border-radius: 30px;
width: 100%;
text-transform: initial;
font-weight: 600;
}
body:not(.home) #wrapper div div div.wpforms-container-full .wpforms-form button[type=submit]:hover {
background: #21336E;
}
#wrapper input::placeholder,
#wrapper textarea::placeholder {
color: #AAAAAA;
}
header, header.scrolled {
height: 0;
background: none;
box-shadow: none;
position: relative;
}
header.scrolled #logo,
header #logo {
left: 40px;
top: 30px;
}
@media (min-width: 1470px) {
#page:before {
width: 1400px;
height: 1400px;
left: -180px;
top: -470px;
}
}
#wrapper div#wpforms-9127-field_6-container {
padding: 100px 0 0 0;
}
div#wpforms-9127 {
margin-bottom: 0;
}
#wrapper .wpforms-confirmation-container-full {
border-radius: 24px;
padding: 15px 25px;
margin: 0;
}
#wrapper div.wpforms-container-full .wpforms-form .wpforms-submit-spinner {
position: absolute;
right: 20px;
bottom: 15px;
z-index: 10;
filter: brightness(0) invert(1);
pointer-events: none;
}
#contenu_1 {
width: 90%;
max-width: 1140px;
margin: 70px auto 110px;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
#contenu_1 .gauche {
width: 44.5%;
}
#contenu_1 .droite {
width: 49%;
display: flex;
gap: 24px;
}
#contenu_1 .droite > div {
width: 50%;
}
#contenu_1 .droite .droite {
flex-direction: column;
}
#contenu_1 .droite img {
border-radius: 24px;
object-fit: cover;
width: 100%;
}
#contenu_1 .droite .droite > img:nth-child(1) {
height: 280px;
object-position: bottom;
}
#contenu_1 .droite .droite > img:nth-child(2) {
height: 197px;
}
#contenu_1 .droite .gauche img {
height: 500px;
}
#contenu_1 .droite .gauche {
margin-top: 50px;
}
.titre_lp {
position: relative;
}
.titre_lp > p {
font-size: 18px;
letter-spacing: 0.015em;
text-transform: uppercase;
margin: 0 0 25px 0;
}
#contenu_1 .titre_lp > p {
margin-bottom: 35px;
}
#contenu_1 .gauche svg {
height: auto;
width: 330px;
position: absolute;
bottom: -4px;
left: 155px;
z-index: -1;
}
body.page-id-9915 #contenu_1 .gauche svg {
width: 260px;
bottom: 38px;
left: 120px;
}
body.page-id-9591 #contenu_1 .gauche svg {
width: 310px;
bottom: -3px;
left: -8px;
}
#contenu_1 .gauche .titre_lp img {
position: absolute;
right: -20px;
bottom: -85px;
}
#contenu_1 .item {
background: #FFFFFF;
border-radius: 24px;
display: flex;
align-items: center;
justify-content: flex-start;
box-shadow: 4px 10px 30px rgba(0,0,0,0.06);
margin-top: 22px;
box-sizing: border-box;
max-width: 450px;
padding: 25px 36px 25px 0;
min-height: 100px;
}
#contenu_1 .blocs {
margin-top: 50px;
}
#contenu_1 .item .icone {
width: 90px;
text-align: center;
flex-shrink: 0;
}
#contenu_1 .item p {
font-weight: 700;
margin: 0;
line-height: 1.25em;
}
#contenu_2 {
position: relative;
margin-bottom: 70px;
}
#contenu_2 .container {
width: 90%;
max-width: 1140px;
margin: 0 auto;
}
#contenu_2 .icones {
display: flex;
flex-wrap: wrap;
margin: 60px 0 50px 0;
row-gap: 30px;
}
#contenu_2 .icones > div {
width: 33.333%;
display: flex;
gap: 10px;
align-items: center;
line-height: 1;
}
#contenu_2 .icones > div .icone {
width: 60px;
height: 60px;
background: #FFFFFF;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 10px rgba(0,0,0,0.05);
}
#contenu_2:before {
content: '';
width: 1070px;
height: 1070px;
background: #003cff14;
position: absolute;
right: -80px;
top: -350px;
border-radius: 50%;
z-index: -1;
pointer-events: none;
}
.bloc_contact {
border-radius: 48px;
background: #21336E;
color: #FFFFFF;
}
.bloc_contact .haut {
display: flex;
align-items: center;
padding: 65px 50px;
gap: 45px;
justify-content: space-between;
}
.bloc_contact .haut h2 {
color: #FFFFFF;
margin: 0 0 8px 0;
}
.bloc_contact .haut p {
margin: 0;
}
.bloc_contact .haut .txt {
max-width: 490px;
}
.bloc_contact .haut .btn a {
background: url(//www.planete-communication.fr/wp-content/themes/planetecom/lp/white-arrow.svg) no-repeat left 45px top 15px, #FFDD00;
text-decoration: none;
display: inline-block;
padding: 17px 45px 16px 80px;
border: 2px solid #FFDD00;
border-radius: 30px;
font-size: 16px;
font-weight: 600;
transition: 0.3s;
white-space: nowrap;
line-height: 1;
}
.bloc_contact .haut .btn a:hover {
background-color: #FFFFFF;
}
#real_lp {
width: 90%;
max-width: 1140px;
margin: 0 auto 115px;
}
#real_lp > p {
max-width: calc(100% - 200px);
margin-bottom: 0;
}
#real_lp .slick:not(.slick-initialized) {
height: 640px;
overflow: hidden;
}
.real {
height: 300px;
position: relative;
width: 26.4%;
box-shadow: 4px 10px 30px rgba(0,0,0,0.06);
}
.real > img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
border-radius: 24px;
}
#real_lp .slick {
margin: 50px -20px 0 -20px;
position: relative;
pointer-events: none;
}
#real_lp .blocs {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
row-gap: 40px;
height: 100%;
margin: 0 20px;
}
#real_lp .blocs > div:nth-child(3),
#real_lp .blocs > div:nth-child(4) {
width: 40%;
}
.real:after {
content: '';
width: 100%;
height: 50%;
background: linear-gradient(360deg, rgba(0,0,0,0.7), transparent);
position: absolute;
left: 0;
bottom: 0;
border-bottom-left-radius: 24px;
border-bottom-right-radius: 24px;
pointer-events: none;
}
.real span {
font-size: 18px;
color: #FFFFFF;
line-height: 1;
display: block;
position: absolute;
left: 22px;
bottom: 22px;
right: 22px;
z-index: 1;
font-weight: 700;
}
#real_lp .slick-arrow,
#tem .slick-arrow {
top: -100px;
border: 1px solid #21336E;
width: 50px;
height: 50px;
background: none;
right: 20px;
transition: 0.3s;
}
#real_lp .slick-arrow.prev,
#tem .slick-arrow.prev {
right: 90px;
}
#real_lp .slick-arrow path,
#tem .slick-arrow path {
transition: 0.3s;
}
#real_lp .slick-arrow.next svg,
#tem .slick-arrow.next svg {
transform: rotate(180deg);
}
@media (min-width: 1200px) {
#real_lp .slick-arrow:hover,
#tem .slick-arrow:hover {
background: #21336E;
}
#real_lp .slick-arrow:hover path,
#tem .slick-arrow:hover path {
stroke: #FFFFFF;
}
}
#tem {
width: 90%;
max-width: 1140px;
margin: 0 auto 80px;
position: relative;
display: flex;
justify-content: space-between;
}
#tem .droite {
width: 48%;
background: #FFFFFF;
border-radius: 24px;
box-shadow: 4px 10px 30px rgba(0, 0, 0, 0.06);
}
#tem .gauche {
width: 45.5%;
position: relative;
}
#tem .droite:not(.slick-initialized) > div:not(:first-child) {
display: none;
}
#tem .gauche:before {
content: '';
width: 1070px;
height: 1070px;
background: #003cff14;
position: absolute;
left: -1000px;
right: -1000px;
top: 120px;
bottom: 0;
margin: auto;
border-radius: 50%;
z-index: -1;
pointer-events: none;
}
#tem .elem {
background: #FFFFFF;
border-radius: 24px;
padding: 35px 50px 25px 50px;
}
#tem .elem .bottom {
position: relative;
display: flex;
align-items: center;
justify-content: flex-start;
border-top: 1px solid #D4D4D4;
padding-top: 25px;
}
#tem .lettre {
height: 40px;
width: 40px;
background: #B5005D;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 18px;
margin-right: 12px;
line-height: 1;
}
#tem .elem > p {
margin: 22px 0 45px 0;
}
#tem .auteur {
display: flex;
flex-direction: column;
gap: 4px;
}
#tem .auteur > span:first-child {
font-size: 16px;
font-weight: 700;
display: block;
line-height: 1;
}
#tem span.date {
font-size: 13px;
color: #797979;
display: block;
line-height: 1;
}
#tem .elem .bottom img {
position: absolute;
right: 0;
bottom: 0;
top: 35px;
margin: auto;
}
#tem .slick-arrow {
right: auto;
left: 0;
top: 215px;
}
#tem .slick-arrow.next {
left: 70px;
}
#tem .elem2 .lettre {
background: #7b1fa2;
}
#tem .elem3 .lettre {
background: #ec407a;
}
#tem .elem4 .lettre {
background: #ef6c00;
}
#tem .elem5 .lettre {
background: #78909c;
}
#tem .elem6 .lettre {
background: #33691e;
}
#tem .elem7 .lettre {
background: #00897b;
}
#atouts {
width: 90%;
max-width: 1140px;
margin: 0 auto 110px;
}
#atouts .flex {
display: flex;
justify-content: space-between;
margin: 50px 0px 110px 0;
}
#atouts .flex img {
height: 400px;
width: 100%;
object-fit: cover;
border-radius: 24px;
}
#atouts .flex > div:nth-child(1) {
width: 56.7%;
}
#atouts .flex > div:nth-child(2) {
width: 39.5%;
}
#atouts .flex a {
display: block;
position: relative;
}
#atouts .flex a:after {
content: 'Voir sur Google Maps';
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.75);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
pointer-events: none;
transition: 0.3s;
opacity: 0;
color: #FFFFFF;
border-radius: 24px;
}
#atouts .flex a:hover:after {
opacity: 1;
}
.bloc_contact .bas {
margin: 0 60px;
border-top: 1px solid #FFFFFF;
padding: 40px 0;
display: flex;
justify-content: center;
gap: 80px;
}
.bloc_contact .bas > div > p:first-child {
font-family: 'turbinado-pro';
font-weight: 700;
font-size: 64px;
line-height: 0.65em;
font-weight: 700;
height: 84px;
display: flex;
align-items: center;
margin-bottom: 20px;
}
.bloc_contact .bas > div:nth-child(1) {
max-width: 165px;
}
.bloc_contact .bas > div:nth-child(2) {
max-width: 205px;
}
.bloc_contact .bas > div:nth-child(3) {
max-width: 245px;
}
.bloc_contact .bas > div:nth-child(1) > p:first-child {
color: #FFDDDD;
}
.bloc_contact .bas > div:nth-child(2) > p:first-child {
color: #B1FFFE;
}
.bloc_contact .bas > div:nth-child(3) > p:first-child {
color: #E6D9FF;
}
div#contact {
scroll-margin-top: 80px;
}
#footer_like {
width: 90%;
max-width: 800px;
text-align: center;
margin: 0 auto;
font-weight: 700;
}
#footer_like .rs {
display: flex;
justify-content: center;
gap: 12px;
margin-top: 30px;
}
#footer_like img {
transition: 0.2s;
}
#footer_like img:hover {
opacity: 0.7;
}
#avis {
min-height: 395px;
width: 90%;
margin: 0 auto;
}
@media (max-width: 1250px) {
#top .titre {
width: 490px;
}
body:not(.home) h1 {
font-size: 52px;
}
#top .form {
width: calc(100% - 530px);
}
#top .titre svg {
width: auto;
height: 62px;
top: 86px;
}
body:not(.home) div div.wpforms-container-full .wpforms-form .wpforms-submit-container {
bottom: 125px;
}
}
@media (max-width: 1100px) {
#page:before {
display: none;
}
#top {
background: #003cff14;
width: 100%;
box-sizing: border-box;
padding: 70px 5%;
margin: 0;
flex-wrap: wrap;
gap: 50px;
}
#top .titre,
#top .form {
width: 100%;
}
body:not(.home) .wpforms-field-container > div:last-child label {
max-width: 100%;
}
#wrapper div#wpforms-9127-field_6-container {
padding: 0;
}
body:not(.home) div div.wpforms-container-full .wpforms-form .wpforms-submit-container {
position: relative;
bottom: 0;
padding-top: 30px;
}
section#avis {
margin-top: 85px;
}
}
@media (max-width: 650px) {
body:not(.home) h1 {
font-size: 8.2vw;
}
#top .titre svg {
width: auto;
height: 9.6vw;
top: 88px;
left: -10px;
}
body:not(.home) #wrapperInner {
padding-top: 0;
}
}
@media (max-width: 1230px) {
#contenu_1 .gauche .titre_lp img {
display: none;
}
}
@media (max-width: 1160px) {
#contenu_1 {
flex-direction: column;
gap: 60px;
}
#contenu_1 .gauche {
width: 100%;
}
#contenu_1 .item {
max-width: 100%;
}
#contenu_1 .titre_lp h2 {
max-width: 745px;
margin: 0 auto;
text-align: center;
}
#contenu_1 .gauche svg {
display: none;
}
#contenu_1 .titre_lp > p {
margin-bottom: 25px;
text-align: center;
}
#contenu_1 .droite {
width: 100%;
}
}
@media (max-width: 1200px) {
#contenu_2:before {
display: none;
}
#contenu_2 .icones > div {
width: 50%;
}
}
@media (max-width: 770px) {
#contenu_2 .icones > div {
width: 100%;
}
}
@media (max-width: 1050px) {
.bloc_contact .haut img {
display: none;
}
}
@media (max-width: 820px) {
.bloc_contact .haut {
text-align: center;
flex-direction: column;
gap: 30px;
padding: 45px 7.5vw;
}
}
@media (max-width: 1250px) {
#real_lp .slick-arrow {
margin-right: 0;
}
#real_lp .blocs {
width: 1140px;
}
#real_lp .slick {
pointer-events: none;
}
#real_lp .slick {
margin: 40px 0 0 0;
}
#real_lp {
width: 100%;
}
#real_lp > *:not(.slick) {
width: 90%;
margin-left: auto;
margin-right: auto;
}
#real_lp > p {
max-width: 100%;
}
}
@media (max-width: 940px) {
#tem .gauche:before {
display: none;
}
#tem {
flex-direction: column;
gap: 100px;
width: 100%;
background: #003cff14;
box-sizing: border-box;
padding: 80px 5%;
}
#tem .gauche {
width: 100%;
}
#tem .droite {
position: relative;
width: 100%;
}
#tem .slick-arrow {
top: -90px;
}
}
@media (max-width: 900px) {
#atouts .flex {
flex-direction: column;
gap: 30px;
margin-bottom: 85px;
}
#atouts .flex > div:nth-child(1),
#atouts .flex > div:nth-child(2) {
width: 100%;
}
#atouts .flex img {
height: auto;
}
}
@media (max-width: 890px) {
.bloc_contact .bas > div > p:first-child {
font-size: 48px;
height: 63px;
}
.bloc_contact .bas {
gap: 70px;
}
}
@media (max-width: 820px) {
.bloc_contact .bas {
flex-direction: column;
align-items: center;
text-align: center;
gap: 40px;
}
.bloc_contact .bas > div > p:first-child {
justify-content: center;
margin-bottom: 15px;
height: auto;
}
}
body:not(.home) header.scrolled #logo svg {
height: 90px;
}
@media (max-width: 500px) {
header #logo a > img:nth-child(1),
header.scrolled #logo a > img:nth-child(1) {
height: 50px;
}
header #logo a > img:nth-child(2),
header.scrolled #logo a > img:nth-child(2) {
height: 40px;
margin: -3px 0 0 15px;
}
header #logo a {
justify-content: center;
}
header.scrolled #logo, header #logo {
left: 0;
right: 6px;
}
#top {
padding: 75px 7.5% 45px 7.5%;
}
body:not(.home) h1 {
margin-bottom: 20px;
font-size: 7.8vw;
}
#top .form {
padding: 40px 7.5vw;
}
#wrapper textarea {
min-height: 180px;
}
#top .form h2 {
font-size: 24px;
}
#top .titre svg {
height: 9.3vw;
top: 86px;
}
#avis {
margin-top: 60px;
width: 85%;
}
#contenu_1 {
width: 85%;
margin-bottom: 70px;
}
.titre_lp > p, #contenu_1 .titre_lp > p {
font-size: 15px;
margin-bottom: 15px;
}
#contenu_1 .blocs {
margin-top: 35px;
}
#contenu_1 .item .icone img {
width: auto;
height: 22px;
max-width: 25px;
}
#contenu_1 .item .icone {
width: 70px;
}
#contenu_1 .droite .gauche img {
height: 75vw;
}
#contenu_1 .droite .gauche {
margin-top: 40px;
}
#contenu_1 .droite {
gap: 20px;
}
#contenu_1 .droite .droite > img:nth-child(1),
#contenu_1 .droite .droite > img:nth-child(2) {
height: calc(37.5vw - 12px);
}
#contenu_2 .container {
width: 85%;
}
#contenu_2 .icones > div .icone {
width: 40px;
height: 40px;
}
#contenu_2 .icones > div .icone img {
width: auto;
height: auto;
max-width: 18px;
max-height: 16px;
}
#contenu_2 .icones {
margin: 25px 0 40px 0;
row-gap: 15px;
}
.bloc_contact .haut .btn a {
transition: 0.15s;
}
.real span {
font-size: 18px;
}
#real_lp .blocs {
row-gap: 30px;
margin: 0 15px;
}
.real {
width: 27.2%;
}
#real_lp {
margin-bottom: 65px;
}
#tem {
padding: 65px 7.5%;
}
#tem .elem {
padding: 35px 7.5vw 25px 7.5vw;
position: relative;
}
#tem .elem .bottom img {
left: 0;
top: 92px;
}
#tem .elem .bottom {
justify-content: center;
position: initial;
}
#tem .elem > img {
height: 28px;
}
#tem .elem .bottom img {
bottom: auto;
top: 40px;
right: 7.5vw;
}
#atouts .flex {
margin-top: 30px;
margin-bottom: 65px;
gap: 7.5vw;
}
#atouts {
width: 85%;
margin-bottom: 65px;
}
#atouts .flex a:after {
opacity: 0.95;
}
#footer_like {
width: 85%;
}
.bloc_contact .bas > div > p:first-child {
font-size: 42px;
}
.bloc_contact .bas {
gap: 30px;
}
.bloc_contact .haut .btn a {
transition: 0.15s;
font-size: 15px;
background-size: 16px;
padding: 15px 30px 14px 60px;
background-position: left 30px top 16px;
}
body:not(.home) header.scrolled #logo svg {
height: 60px;
}
}