@import "fonts.css";
@import "base.css";
@import "header-footer.css";
@import "bricks.css";

/*------------------------*/
/* theme colors
/*------------------------*/

:root {
    --textDarker: #3F3644;
    --textDark: #5A4A62;
    --textMedium: rgba(38, 50, 56, 0.7);
    --borderMedium: rgba(38, 50, 56, 0.2); 
    --borderLight: rgba(38, 50, 56, 0.075);
    --accent: #667E5D;
    --accentDarker: #495744;
    --light: rgba(38, 50, 56, 0.035);
}
/*------------------------*/
/* turn grayscale off
/*------------------------*/

img {filter: grayscale(0);}

/*------------------------*/
/* colorize_image
/*------------------------*/

.colorize_image {filter: contrast(1) sepia(1) hue-rotate(160deg) grayscale(0.8)!important;}

/*------------------------*/
/* black_2_textDark
/*------------------------*/

.map::after, .black_2_textDark {filter: contrast(0.7) sepia(1) hue-rotate(160deg)!important;}

/*------------------------*/
/* black_2_textMedium
/*------------------------*/

.black_2_textMedium {filter: contrast(0.3) sepia(0.3) hue-rotate(160deg) brightness(1.4)!important;}

/*------------------------*/
/* black_2_accent
/*------------------------*/

.black_2_accent {filter: contrast(0.24) sepia(1) hue-rotate(138deg) contrast(6) brightness(1.6) !important;}

/*------------ CSS overrides below --------------*/

.image-gallery {display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-left: 0;}

/*------------ CSS header wide text --------------*/

header > .container > div:first-child {
flex:1.6;
}

header > .container > div {
flex:2.4;
}

/*------------ CSS header wide text --------------*/

footer .container > div:first-child {
	flex:1.6;
}

footer .container > div {
	flex:2.4;
}
/*------------ CSS for KenBurns --------------*/

ken-burns-carousel {
    width: 800px;
    height:500px;
    display:block;
    position:absolute;
    top:0;
    left:0;
}

body.mobilemenu div.innerbody {
	background: none;
}

body.transparent_header header + section.kenburns {
    height:100vh;
}

body.transparent_header header + section.kenburns .container {
    height:100vh;
}

ken-burns-carousel.title3 {
	/* --img-filter: grayscale(100%);*/
    width: 100%;
    height:100vh;
    display:block;
    position:absolute;
    top:0;
    left:0;
    z-index:-1;
}

ken-burns-carousel.title3 + div.overlay {
    height:100vh;
}

section.kenburns {
    position:relative;
}

body:not(.mobilemenu) section > ken-burns-carousel {
    position:absolute;
}

div#svg3 {
    position: absolute;
    bottom: 0;
    left: 0; /* Optionnel, pour aligner à gauche */
    width: 100%; /* Optionnel, pour s'étirer sur toute la largeur */
    margin-bottom:1em;
}

#svg3 svg {
	height: 60px;
    filter: invert(1)!important;
}

#svg3 svg #mouse3_3 {
	-webkit-animation-name: svg3;
	animation-name: svg3;
	-webkit-animation-duration: 5s;
	animation-duration: 5s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}

@-webkit-keyframes svg3 {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	8% {
		-webkit-transform: translateY(50px);
		transform: translateY(50px);
		opacity: 1;
	}
	9% {
		opacity: 0;
	}
	10% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	11% {
		opacity: 1;
	}
	12% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	20% {
		-webkit-transform: translateY(50px);
		transform: translateY(50px);
		opacity: 1;
	}
	21% {
		opacity: 0;
	}
	22% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	23% {
		opacity: 1;
	}
	24% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	34% {
		-webkit-transform: translateY(50px);
		transform: translateY(50px);
		opacity: 1;
	}
	35% {
		opacity: 0;
	}
	36% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	99% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}


/*------------ CSS for full image blog --------------*/

/*------------ CSS non transparent blog header --------------*/

body:not(.transparent_header) header + section.bgimage .blogdetails {padding-top: 1rem!important;padding-bottom: 3rem}
body:not(.transparent_header) header + section.bgimage  .meta {color:white;text-shadow: 1px 1px 5px black;}
body:not(.transparent_header) header + section.bgimage  .meta a {color:white}
body:not(.transparent_header) header + section.bgimage  .meta img {filter: invert(1)!important;}

/*------------ CSS transparent blog header --------------*/

body.transparent_header header + section.bgimage .blogdetails {padding-top: 1rem!important;padding-bottom: 3rem}
.transparent_header header + section.bgimage  .meta {color:white;text-shadow: 1px 1px 5px black;}
.transparent_header header + section.bgimage  .meta a {color:white}
.transparent_header header + section.bgimage  .meta img {filter: invert(1)!important;}

 section.post .container {
    max-width: 84rem;
} 

.image-gallery {
	gap:2rem;
}

.image-gallery li a img {
    width: 100%;
    display: block;
    border-radius: 0.5rem;

	border: 2px solid var(--accent); /* Bordure grise */
    transition: border-color 0.2s ease-in-out; /* Effet fluide */
	padding: 2px;
}

.image-gallery li a img:hover {
    border-color: var(--accentDarker);
}

.button.ghost {
    background: var(--accent);
    color: white;
    box-shadow: none;
}

.button.secondary.ghost {
    background: var(--textDark);
    color: white;
    box-shadow: none;
}