@import "./composants_custom/nav_custom/style/style.css";


/*Modifications de l'affichage général*/

:root {
    --bg-color: rgba(255, 255,255, 0.7);
    --text-color: #7f2538;
    --link-color: #7f2538;
    --hover-link-color: #e08711;
}

/*fin des modifications*/


/*Modifications pour les grands écrans*/

@media screen and (min-width: 981px) {
	main {
		width: 75%;
	}
	
	.layout-wide main {
		max-width: 1600px;
		grid-template-columns: 2fr 6fr;
		grid-gap: 1em 3em;
	}
	
	.col_left {
    	position: sticky;
    	top: 0px;
    }
    
    .col_left .contacts {
        margin-bottom: 1em;
    }
    
    .logo_container {
        width: 100%;
        max-height: 300px;
    }
    
    header.main h1 a img {
        max-width: none;
        width: 100%;
        box-shadow: 4px 10px 4px rgba( 0, 0, 0, 0.5);
        transform: perspective(100px) translate3d(0%, 0%, 0px);
        animation: logo_shake_init 1000ms ease-in-out;
    }
    
    .booking-btn {
        padding: 0;
        margin: 0 0 1rem 0; 
    }
    
    .booking-btn a {
        border-radius: .5rem;
        padding: 1rem;
        text-decoration: none;
        box-shadow: 2px 4px 4px rgba( 0, 0, 0, 0.5);
        transition: transform 200ms ease-in-out;
    }
    
    .booking-btn a:hover {
        box-shadow: 2px 4px 4px rgba( 0, 0, 0, 0.5);
        color: #fff;
        background: #29562c;
        transform: perspective(50px) translate3d(0, 0, 3px);
    }
    
    .booking-btn a:active {
        box-shadow: .5px 1px 2px rgba( 0, 0, 0, 0.5);
    }   
}

body.bg-white {
	background-image: url("imgs_custom/fond_site_mobile.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    --bg-color: rgba(255, 255,255, 0.7);
}
.layout-wide section.page {
    background-color:  var(--bg-color);
} 


/*Modifications du footer*/

.bloc_perso {
    background-color: rgba(255, 255,255, 0.7);
	display: flex;
	flex-direction: column;
	width: 75%;
	border-radius: .5em;
	margin-bottom: 1em;
	padding: .1em;
}

.bloc_perso .map div {
    display: flex;
    justify-content: center;
    align-items: center;
}

.bloc_perso .map span {
    text-align: center;
}

.bloc_perso .map svg {
    fill: hsl(var(--second-color), 60%, 40%);
    background: hsl(var(--first-color), 50%, 90%);
    padding: .25em;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    margin-inline-start: 0.5em;
    transition: transform 400ms ease-in-out;
}

.bloc_perso .map:hover svg{
    transform: scale(1.20);
}

/*fin des modification*/

@media screen and (min-width: 981px) and (max-width: 1920px) {
    body.bg-white {
        background-image: url("imgs_custom/fond_site_4'3.jpg");
    }
    
    .bloc_info {
        width: 35%;
    }
    
    .bloc_perso {
        width: 45%;
        padding: .5em;
    }
}

@media screen and (min-width: 1920px) {
    body.bg-white {
        background-image: url("imgs_custom/fond_site.jpg");
    }
    
    .bloc_info {
        width: 35%;
    }
    
    .bloc_perso {
        width: 45%;
        padding: .5em;
    }
}

@keyframes logo_shake {
    95%{
        transform: perspective(100px) translate3d(0%, 0%, 0px);
    }
    96.5%{
        transform: perspective(100px) translate3d(0%, 10%, 10px);
    }
    97%{
        transform: perspective(100px) translate3d(0%, 10%, 10px) rotate(2deg);
    }
    97.5%{
        transform: perspective(100px) translate3d(0%, 10%, 10px) rotate(-2deg);
    }
    98%{
        transform: perspective(100px) translate3d(0%, 10%, 10px) rotate(2deg);
    }
    98.5%{
        transform: perspective(100px) translate3d(0%, 10%, 10px) rotate(-2deg);
    }
}

@keyframes logo_shake_init {
    30%{
        transform: perspective(100px) translate3d(0%, 10%, 10px);
    }
    40%{
        transform: perspective(100px) translate3d(0%, 10%, 10px) rotate(2deg);
    }
    50%{
        transform: perspective(100px) translate3d(0%, 10%, 10px) rotate(-2deg);
    }
    60%{
        transform: perspective(100px) translate3d(0%, 10%, 10px) rotate(2deg);
    }
    70%{
        transform: perspective(100px) translate3d(0%, 10%, 10px) rotate(-2deg);
    }
}
        

/*fin des modifications*/



/*Modifications du corps*/

body {
	background: white;
}


/*fin des modifications*/



/*Modifications de l'en_tête*/

header.main .contacts {
	justify-content: center;
}

/*fin des modifications*/



/*Modifications de la liste des catégories racines*/

.parent_cat article {
    display: none;
}

.subcategories li {
	font-size: 1.5em;
}

.subcategories li a {
    text-decoration: none;
}

section.page .subcategories li a:hover, nav.main .subcategories li a:hover {
    color: var(--hover-link-color);
    background-color: var(--bg-color);
} 

/*fin des modifications*/



/*Modifications du pied de page*/

footer.main {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 5px;
}

/*fin des modifications*/



/*Modifications du contenu de l'article'*/

article > h4 {
	color: #7f2538;
}

.web-content {
	font-size: 20px;
    text-align: justify;
}

/*fin des modifications*/



/*Modification des catégories custom*/

.liste_perso li {
    font-size: 22px;
    margin-bottom: 20px;
}

.img_lien {
    width: 100%;
    vertical-align: middle;   
}

section.page .subcategories{
    margin: 0px;
    padding: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: none;
}

section.page .no_style {
    margin: 0px;
    padding: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
}

.page .subcategories .tab_cat_custom{
    display: grid;
    grid-template: none / minmax(0, 0.8fr) minmax(0, 0.8fr);
    grid-gap: 1rem;
    margin-bottom: 1rem;
}

.page .subcategories .img_bouton{
    color: #7f2538;
    margin-bottom: 3%;
    display: flex;
    flex-direction: column;
    position: relative;
    width: 75%;
    max-width: 400px;
    padding: 5px;
    background-color: rgb(242, 242, 242);
    box-shadow: 8px 8px 4px rgba( 128, 128, 128, 0.8);
    transition: transform 360ms ease, color 240ms ease 120ms;
}

.page .subcategories .img_bouton:hover {
    transform: scale(1.06);
    color: var(--hover-link-color);
}


.page .subcategories .img_bouton:active {
    box-shadow: 2px 2px 1px rgba( 128, 128, 128, 0.8);
}

.page .subcategories .no_style:hover {
    background: none;
}

.cat_name {
    font-size: 20px;
    position: absolute;
    width: 70%;
    bottom: 5%;
    align-self: center;
    margin: 0px;
    padding: 5px 7px;
    text-align: center;
    background-color: rgba( 255, 255, 255, 0.6);
    border-radius: 5px;
}

.note {
    font-size: 18px;
    font-style: italic;
}

.liste_partenaire{
    font-size: 24px;
}

.liste_partenaire li{
    margin: 5% 5% 5% 5%;
}

.liste_partenaire a{
    color: green;
}

.liste_partenaire a:hover{
    color: var(--hover-link-color);
}

.img_perso img{
    width: 75%;   
}

.nav_programme p{
    display: flex;
    justify-content: center;
}

.nav_programme p, .nav_programme p a{
    color: green;
    margin: 0px 20px;
    text-decoration: underline;
}

.nav_programme p strong{
    font-size: 21px;
}

.nav_programme p a:hover{
    color: var(--hover-link-color);
}

.tab_programme figure a img{
    width: 70%;
    border: 10px solid rgb(242, 242, 242);
    margin-bottom: 3%;
    cursor: pointer;
    transition: all 450ms ease;
}

.tab_programme figure a img:hover{
    transform: scale(1.15);
    box-shadow: 10px 10px 5px rgba( 128, 128, 128, 0.8);
}

/*fin des modifications*/



/*Modification des vidéos*/

.video_custom .video {
    display: flex;
    width: 100%;
    justify-content: center;
}

.video_custom .video video{
    width: 400px;
}

.banner_news {
    position: relative;
    display: flex;
    width: 100%;
    height: 250px;
    display: inline-block;
    overflow: hidden;
    margin-bottom: 5%;
}

.news {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 250px;
    font-size: 50px;
    transform: translateX(100%);
}

.news a {
    width: 100%;
}

.news a img {
    width: 100%;
}

.actualite {
    margin: 20% 0%;
}

.ital {
    font-style: italic;
}

.iframe_custom {
    width: 600px;
    height: 349px;
}

.effet_ressort img {
    cursor: pointer;
    box-shadow: 8px 8px 16px #494949;
    animation: ressort ease-in-out;
    animation-timeline: view();
    animation-range-start: cover 0%;
    animation-range-end: contain 75%;
}

.image_en_tête img {
    cursor: pointer;
    margin-top: 10vh;
    box-shadow: 8px 8px 16px #494949;
    animation: ressort 800ms ease-in-out both;
}

.image_en_tête {
    transition: transform 400ms ease-in-out;
}

.image_en_tête:hover {
    transform: scale(1.10);
}

.image_en_tête img:active {
    box-shadow: 2px 2px 4px #494949;
}


.effet_ressort {
    transition: transform 400ms ease-in-out;
}

.effet_ressort:hover {
    transform: scale(1.10);
}

.effet_ressort img:active {
    box-shadow: 2px 2px 4px #494949;
}


@keyframes ressort {
    0%{
        opacity: 0;
    }
    60%{
        opacity: 1;
        transform: scale(1.05);
    }
    100%{
        opacity: 1;
        transform: scale(1);
    }
}

.space {
    height: 20vh;
}