@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;
}

.page .subcategories .tab_cat_custom{
    display: grid;
    grid-template: none;
    grid-gap: 2rem;
    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:active {
        box-shadow: 2px 2px 1px rgba( 128, 128, 128, 0.8);
    }

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

    section.page .cat_name {
        font-size: 1.8rem;
        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;
    }
    
    section.page h1 {
        font-size: 2.8rem;
        margin-bottom: 0;
        padding-block: 2vh;
    }


/*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 {
    	    background-color: var(--bg-color);
    	    position: sticky;
    	    top: 0px;
    	    padding: 0vw 1vw 1vw 1vw;
    	    border-radius: 0rem 0rem 0.5rem 0.5rem;
        }
    
        .col_left .contacts {
            margin-bottom: 1em;
        }
    
        .logo_container {
            width: 100%;
            max-height: 300px;
        }
    
        header.main h1 a {
            background-color: rgba(255, 255, 255, 0);
            border-radius: 0px;
            padding: 1vw 0vw 0vw 0vw;
        }
    
        header.main h1 a img {
            max-width: none;
            width: 100%;
            box-shadow: 4px 10px 4px rgba( 0, 0, 0, 0.5);
        animation: logo_shake_init 1000ms ease-in-out;
        }
    
        .booking-btn a {
            
            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:active {
            box-shadow: .5px 1px 2px rgba( 0, 0, 0, 0.5);
        }
        
        .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);
        }
   
    }

    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 du footer*/

    @media screen 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%, 5%, 15px);
        }
        40%{
            transform: perspective(100px) translate3d(0%, 5%, 15px) rotate(2deg);
        }
        50%{
            transform: perspective(100px) translate3d(0%, 5%, 15px) rotate(-2deg);
        }
        60%{
            transform: perspective(100px) translate3d(0%, 5%, 15px) rotate(2deg);
        }
        70%{
            transform: perspective(100px) translate3d(0%, 5%, 15px) rotate(-2deg);
        }
    }
        

/*fin des modifications pour grands écrans*/


    /*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 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;
    }

    .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;
    }


/*fin des modification des vidéos*/

    .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 {
        width: 530px;
        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: 1vh;
        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;
    }