/***** banner *****/ .banner { width: 90vw; max-width: var(--maxWidthWrapperLarge); margin: 0 auto; position: relative; margin-top: 140px;} .banner::before { width: 200vw; height: calc(50% + 60px); background: linear-gradient(to bottom, #110f0f 0%, var(--bgColorDark) 100%); position: absolute; left: -50vw; top: -140px; content: ""; z-index: -1;} .banner picture { display: block; height: 75vh; max-height: 850px; min-height: 350px; width: 100%; object-fit: cover; filter: brightness(0.8); border-radius: var(--allImgBR); overflow: hidden;} .banner picture img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.6);} .banner .content { position: absolute; left: 80px; top: 80px; z-index: 10; padding-right: 80px; } .banner .titre_main { font: 500 40px/50px "Comfortaa"; color: #fff} #gallery .banner picture { height: 60vh; max-height: 650px;} #gallery .banner picture img { filter: blur(5px) brightness(0.65); transform: scale(1.1); object-position: 50% 50%;} #contact .banner picture { height: 60vh; max-height: 650px;} @media (max-width:1200px) { .banner picture { height: 60vh; max-height: 650px;} .banner .titre_main { font: 500 35px/45px "Comfortaa";} } @media (max-width:1000px) { .banner picture { height: 50vh; max-height: 650px;} .banner .titre_main { font: 500 25px/35px "Comfortaa";} } @media (max-width:800px) { .banner picture { height: 40vh; max-height: 650px;} .banner .content { left: 40px; top: 40px; padding-right: 40px; } } /***** breadcrumb *****/ .breadcrumb { font-size: 16px; line-height: 30px; color: var(--mainColor1); margin: 0 0 20px 0; display: inline-block; background-color: #fff; padding: 6px 20px; border-radius: 25em} .breadcrumb a, .breadcrumb span { color: var(--mainColor1);} .breadcrumb a.active { color: var(--mainColor1);} .breadcrumb li { display: inline-block; font-size: 12px; line-height: 20px; letter-spacing: 0.4px; margin-right: 26px; position: relative;} .breadcrumb li:after { width: 1px; height: 10px; position: absolute; right: -15px; top: 5px; background: var(--mainColor1); content: "";} .breadcrumb li:last-child:after { display: none;} .breadcrumb li:last-child { margin-right: 0;} .breadcrumb li:last-child a, .breadcrumb li:last-child span { color: #91c447;} @media (min-width:1201px) { .breadcrumb li a:hover { color:#91c447;} } @media (max-width:1000px) { .breadcrumb { display: none;} } /***** chapo *****/ .bloc-chapo { width: 90vw; max-width: var(--maxWidthWrapperLarge); position: relative; margin: -90px auto 0 auto; z-index: 10; } .bloc-chapo p { padding: 30px; position: relative; background: linear-gradient(to top, #110f0f 0%, var(--bgColorDark) 100%); border-radius: var(--allImgBR); box-shadow: var(--box-shadow); width: 80%; max-width: 1000px; font: 500 18px / 30px "Comfortaa"; color: #ffffff; margin-bottom: 0; left: 80px;} @media (max-width:800px) { .bloc-chapo p { left: inherit; margin: 0 auto; font: 500 16px / 28px "Comfortaa"; width: 90%;} } @media (max-width:500px) { .bloc-chapo p { font: 500 14px / 28px "Comfortaa";} } /***** bloc *****/ .bloc-text { width: 90vw; max-width: var(--maxWidthWrapper); margin: var(--marginTB); display: block; } .bloc-text .intro { max-width: 560px; padding: 40px 0;} .bloc-grid { width: 90vw; max-width: var(--maxWidthWrapper); margin: var(--marginTB); display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; grid-gap: 40px 80px; position: relative;} .bloc-grid.align_top { align-items: start;} .bloc-grid.full { width: 90vw; max-width: var(--maxWidthWrapperLarge); } .bloc-grid.full .texte { padding-right: 0; padding-left: 0;} .bloc-grid.full .photo img { width: 100%; height: auto; border-radius: var(--allImgBR);} .bloc-grid.reverse .texte { order: 1; padding-left: 0; padding-right: 0;} .bloc-grid.reverse .photo { order: 2;} .bloc-grid .texte :last-child { margin-bottom: 0;} .bloc-grid-info { width: 90vw; max-width: var(--maxWidthWrapperSmall); gap: 0 40px; margin: var(--marginTB); display: grid; grid-template-columns: repeat(2, 1fr);} .bloc-grid-info .item { overflow: hidden; background: var(--bgColorLight); border-radius: var(--allImgBR);} .bloc-grid-info .item img { max-width: 100%; height: auto;} .bloc-grid-info .item .sous_titre { padding: 30px 30px 0 30px; font: 400 22px / 24px "Outfit";} .bloc-grid-info .item p { padding: 10px 30px 30px 30px;} .bloc-info { width: 90vw; max-width: var(--maxWidthWrapperSmall); margin: var(--marginTB); display: block; background: var(--mainColor2); color: #ffffff; padding: 60px; text-align: center; border-radius: var(--allImgBR);} .bloc-info :last-child { margin-bottom: 0;} .bloc-info p a { color: #ffffff; border-bottom-color: #ffffff;} .bloc-info p a:hover { border-bottom-color: #ffffff00;} .bloc-texte { width: 90vw; max-width: var(--maxWidthWrapper); margin: var(--marginTB); display: block; } .bloc-texte.small { width: 90vw; max-width: var(--maxWidthWrapperSmall); margin: var(--marginTB); display: block; } .bloc-texte ul.ul_check { margin: 40px 0;} .item.center { text-align: center;} .bloc-grid .photo { position: relative;} .bloc-grid .photo .tag { position: absolute; top: 20px; left: 20px; background: var(--mainColor1); padding: 10px 20px; display: block; font-size: 12px; text-transform: uppercase; border-radius: 5px; color: #ffffff; font-weight: 600; z-index: 10;} .intro { font: 400 30px / 40px "EB Garamond";} @media (max-width:1366px) { .bloc-grid { align-items: start;} } @media (max-width:1200px) { .bloc-intro p { padding: 50px; width: 100%; max-width: 600px; font: 600 22px / 34px "Comfortaa";} .bloc-grid { grid-gap: 40px 40px;} .bloc-grid.full .texte, .bloc-grid.reverse .texte { padding-right: 0; padding-left: 0;} .bloc-info { font: 400 18px / 26px "Outfit";} } @media (max-width:1000px) { .bloc-intro p { padding: 40px; width: 100%; max-width: 600px; font: 600 20px / 30px "Comfortaa";} .bloc-grid { grid-template-columns:1fr; } .bloc-grid.reverse .texte { order: 2;} .bloc-grid.reverse .photo { order: 1;} .bloc-grid.first .texte { order: 1;} .bloc-grid.first .photo { order: 2;} .bloc-grid.full .photo img { height: 50vw; object-fit: cover;} .bloc-grid-info { grid-template-columns: 1fr;} .bloc-grid:before { content: none;} .bloc-grid-info .item img { height: 50vw; object-fit: cover;} .intro { font: 400 25px / 35px "EB Garamond";} } @media (max-width:800px) { .bloc-info { padding: 40px;} .bloc-grid .intro { font-size: 20px; line-height: 38px;} } @media (max-width:600px) { .bloc-grid .intro { font-size: 18px; line-height: 34px;} } /***** blog *****/ .blog { width: 90vw; max-width: var(--maxWidthWrapperLarge); margin: var(--marginTB); display: grid; grid-template-columns: repeat(3, 1fr); gap : 40px 40px;} .blog .item { overflow: hidden; background: var(--mainColor1); border-radius: var(--allImgBR); transition: all 300ms ease-in-out;} .blog .item .photo { overflow: hidden; line-height: 0;} .blog .item .photo img { max-width: 100%; height: auto; object-fit: cover; transition: all 300ms ease-in-out;} .blog .item .photo .date { width: 100px; height: 35px; text-align: center; font-size: 12px; line-height: 34px; border-radius: 0; background: #fff; position: absolute; right: 15px; top: 15px; z-index: 10; border-radius: var(--linkRadius); color: #222222;} .blog .item .sous_titre { padding: 30px 30px 30px 30px; font: 600 16px / 24px "DM Sans"; margin: 0;} .blog .item .link_arrow { width: 34px; height: 34px; position: absolute; left: 50%; bottom: -17px; transform: translateX(-50%); background-position: -3px 50%;} .bloc-text.dynamique img { border-radius: var(--allImgBR); margin: 60px auto; max-width: 100%; height: auto; display: block; } .bloc-text.dynamique h2, .bloc-text.dynamique h3, .bloc-text.dynamique h4, .bloc-text.dynamique h5, .bloc-text.dynamique h6 { font: 600 25px / 32px "DM Sans"; position: relative; margin-top: 40px; margin-bottom: 20px; color: var(--mainColor1); display: block;} .bloc-text.dynamique p { margin-bottom: 30px;} .bloc-text.dynamique ul { margin-bottom: 40px; list-style-type: none;} .bloc-text.dynamique ul li { position: relative; padding-left: 35px; line-height: 25px; margin-bottom: 12px;} .bloc-text.dynamique ul li:before { width: 23px; height: 23px; position: absolute; left: 0; top: 5px; background: url(../images/check.svg) 0 0 / contain no-repeat; content: "";} @media (min-width:1201px) { .blog .item:hover .photo img { transform: scale(1.1);} .blog .item:hover { background: #222222;} } @media (max-width:1200px) { .blog { grid-template-columns: repeat(2, 1fr); } } @media (max-width:800px) { .blog { grid-template-columns: 1fr; } .blog .item .photo img { height: 50vw;} } @media (max-width:700px) { .bloc-text.dynamique { margin-top: 80px;} } .bloc-grid.full .photo img { transition: all 300ms ease-in-out; } @media (min-width:1201px) { .bloc-grid.full .photo a:hover img { transform: scale(1.1); } } .first { margin-top: 50px;} /***** moving LOGO *****/ .moving_img-logo { position: relative; overflow: hidden; margin-top: -40px;} .moving_img-logo .row { width: auto; display: flex;} .moving_img-logo .row .grid { width: auto; display: flex; animation: moving_img-logo 800s linear infinite;} .moving_img-logo .row .grid div { padding: 0 10px;} .moving_img-logo .row .grid img { width: auto; height: 120px; display: block; border-radius: var(--allImgBR); object-fit: cover; transition: all 300ms ease-in-out;} @keyframes moving_img-logo { 0% { transform: translate(0, 0);} 100% { transform: translate(-100%, 0);} } @media (max-width:1200px) { .moving_img-logo .row .grid div { padding: 0 10px;} } @media (max-width:700px) { .moving_img-logo { margin-top: initial;} .moving_img-logo .row .grid div { padding: 0 5px;} .moving_img-logo .row .grid img { height: 80px;} }