/* CSS Document */
.wide-container {height:70vh; width:100%; overflow:hidden; position:relative}
.wide-container, #slides {overflow:hidden}
#slides, #slides li, #slides img {width:100%; height:100%}
#slides img {object-fit:cover; object-position:center center}

.news {position:relative; border-bottom:1px solid #f5bfb5; padding-bottom:20px; overflow:hidden}
.news > h2 {color:#f5bfb5; font-size:36px; line-height:44px; text-align:center; position:relative; z-index:1}
.news > h2 span {background:#FFF; padding:0 15px}
.news:before {content:""; position:absolute; width:100%; border-top:1px solid #f5bfb5; top:25px; z-index:0}
.bloc-agenda {width:100%; display:grid; grid-template-columns: 250px auto; margin:0 auto; right:-100%}
.no-col {grid-template-columns: 1fr}
.bloc-agenda {background:#FFF; position:relative; padding:5px; z-index:0}
.bloc-agenda:before, .bloc-agenda:after {content:""; display:block; width:25px; height:25px; background:#f5bfb5; position:absolute; transition:all 0.25s ease-out}
.bloc-agenda:before {left:5px; top:5px; z-index:-1}
.bloc-agenda:after {right:5px; bottom:5px; z-index:-2}
.bloc-agenda .mask {position:absolute; background:#FFF; left:5px; top:5px; width:calc(100% - 10px); height:calc(100% - 10px); z-index:0}
.bloc-agenda .image {overflow:hidden; position:relative; border:5px solid #FFF; background:#FFF; width:250px}
.bloc-agenda .image:after {content:""; display:block; padding-bottom:100%}
.bloc-agenda img {width:100%; height:100%; object-fit:cover; object-position:center center; position:absolute; transition:all 1s ease-in-out;}
.bloc-agenda .texte {padding:10px 20px; z-index:1; display:block; position:relative}
.bloc-agenda .date {width:110px}
.bloc-agenda .date, .bloc-agenda .date div {border-right:10px solid transparent; height:0}
.bloc-agenda .date {border-bottom:20px solid #f5bfb5; position:relative}
.bloc-agenda .date > div {border-bottom:20px solid #e69381}
.bloc-agenda .date span {display:block; padding-left:7px; color:#FFF; font-size:14px; position:absolute}
.bloc-agenda .texte p {text-align:justify}
.bloc-agenda a {color:#b52505}
.bloc-agenda a:hover {text-decoration:underline}
.bloc-agenda h2 {margin-top:10px; color:#b52505; font-size:24px; line-height:24px; text-transform: uppercase}
.bloc-agenda.alaune {animation: agenda-right 0.5s 0.5s ease-in-out both}
@keyframes agenda-right {0%{right:-100%} 100%{right:0}}
.bloc-agenda.alaune:before {left:0; top:0; transition:all 0.25s 2s ease-in-out}
.bloc-agenda.alaune:after {right:0; bottom:0; transition:all 0.25s 2s ease-in-out}
.bloc-agenda.alaune .texte > div {position:relative; animation: agenda-right 0.5s 0.5s ease-in-out both}
.bloc-agenda.alaune .texte > h2 {position:relative; animation: agenda-right 0.5s 0.75s ease-in-out both}
.bloc-agenda.alaune .texte > p {margin-top:15px}
.bloc-agenda.alaune .texte .corps {position:relative;animation: agenda-right 0.5s 1s ease-in-out both}
.bloc-agenda .texte li {list-style-type: disc; margin-left:15px}

.activite {bottom:0; z-index:1; color:#FFF; font-size:24px; width:300px; text-align:center}
.activite, .activite div {position:absolute; right:0; border-left:25px solid transparent; height:0}
.activite div {width:100%; top:0}
.activite {border-bottom:50px solid #f5bfb5}
.activite > div {border-bottom:50px solid #e69381}
.activite > div > div {border-bottom:50px solid #b52505}
.activite span {display:block;padding-top:7px}
.col2 {column-gap:100px; grid-row-gap:100px}
.col1, .col2 {margin-top:100px} 
.bloc-activite > .col2 {margin-top:0}
.page.accueil {max-width:1200px; margin:0 auto; padding:50px 0}
.texte-introduction h1 {color:#b52505; text-align:center; font-size:48px; line-height:52px}
.texte-introduction p {text-align:center; font-size:24px; margin-top:10px}
.texte-introduction {margin-bottom:50px}

.bloc-activite {position:relative}
.bloc-activite h2, .bloc-activite h3 {font-family:'RobotoCondensed-Light', Arial, Helvetica, sans-serif; font-size:24px; line-height:24px}
.bloc-activite h2 {color:#FFF; background:#b52505; height:45px; display:flex; align-items:center; justify-content:center; position:relative; transition:all 0.25s ease-out}

.bloc-activite h2:before, .bloc-activite h2:after, .bloc-activite h2 span:before {content:""; position:absolute; border-left:25px solid transparent}
.bloc-activite h2:before {border-bottom:45px solid #f5bfb5; height:0; left:0; bottom:0; width:10px}
.bloc-activite h2:after {border-bottom:45px solid #e69381; height:0; left:10px; bottom:0; width:10px}
.bloc-activite h2 span {z-index:1}
.bloc-activite h2 span:before {border-bottom:45px solid #b52505; height:0; left:20px; bottom:0; width:1px; z-index:-1}
.bloc-activite h2:before, .bloc-activite h2:after {z-index:0}

.bloc-activite h2, .bloc-activite .infos {text-transform:uppercase}
.bloc-activite h3 {margin-top:25px; margin-bottom:15px}
.bloc-activite .image {position:relative; display:flex; align-items:center; overflow:hidden}
.bloc-activite .image p {position:absolute; z-index:1; padding-left:30px;  color:#FFF; font-size:48px; line-height:48px; transition:all 0.25s ease-out}
.bloc-activite:nth-of-type(4) .image p {right:0; padding-right:30px; padding-left:0; text-align:right} 
.bloc-activite .image p span {display:block; position:relative; left:-300px}
.bloc-activite:nth-of-type(4) .image p span {right:-300px; left:inherit}
.bloc-activite .image img {object-fit:cover; object-position:center center; width:100%; height:100%; transition:all 1s ease-in-out}
.bloc-activite:hover img {transform: scale(1.25, 1.25)}
.bloc-activite .texte {padding-bottom:70px; padding-left:15px; padding-right:15px; font-size:16px}
.bloc-activite .infos {font-size:14px; width:100%; position:absolute; left:0; bottom:0; padding-left:15px}
.bloc-activite .lien {position:absolute; right:0; bottom:0; z-index:0}
.bloc-activite .lien a {display:block; border-bottom:35px solid #b52505; height:0; border-left:15px solid transparent; color:#FFF; padding-left:10px; padding-right:10px; position:relative}
.bloc-activite .lien a span {display:block; padding-top:7px}
.bloc-activite .lien a:before, .bloc-activite .lien a:after {content:""; position:absolute; border-left:15px solid transparent; ; top:0; width:25px; z-index:-1; transition:all 0.5s ease-out}
.bloc-activite .lien a:before {border-bottom:35px solid #f5bfb5; height:0; left:0}
.bloc-activite .lien a:after {border-bottom:35px solid #e69381; height:0; left:0}
.bloc-activite .lien a:hover:before {left:-35px}
.bloc-activite .lien a:hover:after {left:-25px}

.bloc-activite.large {margin-top:100px; padding:0}
.bloc-activite.large .col2 {column-gap:0; grid-row-gap:0}
.bloc-activite.large .texte {padding-bottom:70px; padding-left:30px; position:relative}
.bloc-activite.large .infos {padding-left:30px}

.saison {background:/*#efd0c9*/#ffe7d9; text-align:center}
.saison h1 {background:#b52505; padding:30px 50px; color:#FFF; font-size:48px; line-height:48px}
.saison > div {padding:0 50px}
.saison > div > div {max-width:1200px; margin:0 auto; padding:30px 0}
.saison h3 {font-size:24px; line-height:24px}
.saison p {margin-top:10px; margin-bottom:25px}
.saison .ico-activite {display:flex; justify-content:center; margin:0 auto; width:400px; position:relative}
.saison .ico-activite > div {position:relative}
.saison .ico-activite img {object-fit:contain; width:100%; height:100%}

@media screen and (max-width:359px) {
.section-1 {padding:0 20px}
.bloc-activite .infos ul {font-size:12px}
}
@media screen and (max-width:479px) {
.texte-introduction h1 {font-size:30px; line-height:34px}
.texte-introduction p {font-size:20px; line-height:23px}
.news > h2 {font-size:24px}
.bloc-activite h2 {font-size:16px; line-height:18px}
.bloc-activite h3 {font-size:18px; line-height:21px}
.saison .ico-activite {width:100%}
}
@media screen and (min-width:360px) and (max-width:639px) {
.col1, .col2 {margin-top: 75px}
.section-1 {padding:0 30px}
}
@media screen and (min-width:480px) and (max-width:639px) {
.texte-introduction h1 {font-size:36px}
.texte-introduction p {font-size:21px}
.bloc-activite h2, .bloc-activite h3 {font-size:18px; line-height:21px}
}
@media screen and (max-width:639px) {
.wide-container {height:60vh; width:100%}
.saison > div {padding:0 30px}
.saison h1 {padding:30px 30px}
.bloc-activite {margin-top:50px}
.bloc-activite .col {display:inherit}
.bloc-activite .image {height:170px}
.bloc-activite .image p {font-size:24px; line-height:24px; padding-left:15px; max-width:130px}
.bloc-activite:nth-of-type(4) .image p {padding-right:15px}
.bloc-activite .texte, .bloc-activite.large .texte {padding-left:5px; padding-right:5px; padding-bottom: 100px}
.bloc-activite .infos, .bloc-activite.large .infos {padding-left:5px; height: 80px}
}
@media screen and (min-width:640px) and (max-width:799px) {
.texte-introduction h1 {font-size:40px; line-height:44px}
.texte-introduction p {font-size:21px}
.saison h1 {padding:30px 40px}
.saison > div {padding:0 40px}
.section-1 {padding:0 40px}
}
@media screen and (max-width:799px) {
.bloc-agenda {grid-template-columns: 1fr}
.bloc-agenda .image:after {content:""; display:block; padding-bottom:75%}
.bloc-agenda .image {width:100%}
}
@media screen and (min-width:640px) and (max-width:899px) {
.bloc-activite {padding:0; margin-top:50px}
.bloc-activite .image {min-height:300px}
.bloc-activite .image p {font-size:36px; line-height:36px; padding-left:15px; max-width:200px}
.bloc-activite:nth-of-type(4) .image p {padding-right:15px}
.bloc-activite .col2 {column-gap:0; grid-row-gap:0}
.bloc-activite .texte {position:relative; padding-bottom:120px}
.bloc-activite.large .texte {padding-left:15px; padding-bottom:120px}
.bloc-activite .infos {height:100px}
.bloc-activite .infos, .bloc-activite.large .infos {padding-left:15px}
.bloc-activite .infos ul li:nth-of-type(1) {padding-right:0}
}
@media screen and (max-width:899px) {
.accueil > .col {display:inherit}
}
@media screen and (min-width:800px) {
.section-1 {padding:0 50px}
}
@media screen and (min-width:900px) {
.bloc-activite .col {display:inherit}
.bloc-activite.large .col {display:grid}
.bloc-activite .image {height:300px}
.bloc-activite .infos ul li:nth-of-type(2) {padding-right:160px}
}
@media screen and (min-width:900px) and (max-width:1199px) {
.col2 {column-gap:50px; grid-row-gap:50px}
.bloc-activite .image p {font-size:36px; line-height:36px; padding-left:15px; max-width:200px}
.bloc-activite:nth-of-type(4) .image p {padding-right:15px}
}
@media screen and (max-width:1199px) {
.bloc-activite.large {margin-top:50px}
}
@media screen and (max-width:1200px) {
.image.anim img {animation:animimgz 5s 0s both}
@keyframes animimgz {0% {transform: scale(1, 1)} 100% {transform: scale(1.25, 1.25)}}
.image.anim p span:nth-of-type(1) {animation: slide-left 0.25s 0.5s both}
.image.anim p span:nth-of-type(2) {animation: slide-left 0.25s 0.6s both}
.image.anim p span:nth-of-type(3) {animation: slide-left 0.25s 0.7s both}
@keyframes slide-left {0% {left:-300px} 100% {left:0}}
.bloc-activite:nth-of-type(4) .image.anim p span:nth-of-type(1) {animation: slide-right 0.25s 0.5s both}
.bloc-activite:nth-of-type(4) .image.anim p span:nth-of-type(2) {animation: slide-right 0.25s 0.6s both}
.bloc-activite:nth-of-type(4) .image.anim p span:nth-of-type(3) {animation: slide-right 0.25s 0.7s both}
@keyframes slide-right {0% {right:-300px} 100% {right:0}}
}
@media screen and (min-width:1201px) {
.bloc-activite .image img {transition:all 1s ease-in-out}
.bloc-activite:hover img {transform: scale(1.25, 1.25)}
.bloc-activite .image p span:nth-of-type(1) {transition:all 0.25s 0s ease-out}
.bloc-activite .image p span:nth-of-type(2) {transition:all 0.25s 0.1s ease-out}
.bloc-activite .image p span:nth-of-type(3) {transition:all 0.25s 0.2s ease-out}
.bloc-activite:hover .image p span:nth-of-type(1) {transition:all 0.25s 0.5s ease-out}
.bloc-activite:hover .image p span:nth-of-type(2) {transition:all 0.25s 0.6s ease-out}
.bloc-activite:hover .image p span:nth-of-type(3) {transition:all 0.25s 0.7s ease-out}
.bloc-activite:hover .image p span:nth-of-type(1), .bloc-activite:hover .image p span:nth-of-type(2), .bloc-activite:hover .image p span:nth-of-type(3) {left:0}
.bloc-activite:nth-of-type(4):hover .image p span {right:0; left:inherit}
}