@import "../composants_custom/aside_custom/style/style.css";
@import "../composants_custom/contact_custom/style/style.css";
@import "../composants_custom/dyna_map_custom/style/style.css";

:root {
    --bg-color: rgba(255, 255,255, 0.7);
    --text-color: #7f2538;
    --link-color: #green;
    --hover-link-color: hsl(var(--second-color), 35%, 25%);
}

body {
	background-image: url("../imgs_custom/fond_site_mobile.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	margin: 0;
}

p, b, a, li {
    font-size: 18px;
    color: black;
    text-align: justify;
}

a, h1, h2, h3, h4 {
    color: green;
    text-align: center;
}

h1, h2, h3, h4{
    margin: 1vw;
}

h2, h2 a {
    font-size: 26px;
}

h3 {
    font-size: 28px;
}

h4 {
    font-size: 22px;
}

#page {
    display: block;
    width: 100vw;
    font-family: "calibri";
}

header {
    grid-row: 1 / 2;
    grid-column: 1 / 3;
}

aside {
    grid-row: 2 / 4;
    grid-column: 1 / 2;
}

main {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
}

footer {
    grid-row: 3 / 4;
    grid-column: 2 / 3;
}

figure.image, figure.video {
    width: 80%;
    margin: auto;
}

figure.video {
    aspect-ratio: 16 / 9;
}

img, video {
    width: 100%;
    height: 100%;
}

.web-content figure.file {
    display: inline-block;
    margin: .8em;
}

.web-content figure.file > a {
    background: #ddd;
    display: block;
    border-radius: .5rem;
    overflow: hidden;
    text-align: center;
    transition: background-color .2s, color .2s;
    text-decoration: none;
}

.web-content figure.file img {
    border-radius: .3rem;
    margin-top: .5rem;
}

.web-content figure.file small {
    display: block;
    background: no-repeat .5em center;
    background-image: url('data:image/svg+xml;utf8,<svg width="20" height="20px" version="1.1" viewBox="0 0 33.87 33.87" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-45.16 -132.5)"><path d="m46.87 166.3c-1.895-0.8504-2.04-3.422-1.368-5.124 0.4287-0.9042 1.363-1.675 2.405-1.471h29.27c1.387 0.5818 2.074 2.134 1.853 3.586 0.137 1.429-0.8551 3.219-2.472 3.059-8.696 0.1509-17.4 0.0429-26.09 0.0478-1.196-0.027-2.4 0.0278-3.591-0.0985zm14.74-10.2c-2.695-3.234-5.319-6.532-7.861-9.888-0.6409-1.955 1.712-1.953 2.991-1.809h1.863c5.01e-4 -3.406 1e-3 -6.812 0.0015-10.22 0.3553-1.875 2.409-1.689 3.866-1.626 1.341-0.2301 3.068 0.2243 3.15 1.818 4.92e-4 3.342 9.83e-4 6.684 0.0015 10.03 1.442 0.0378 2.903-0.0975 4.331 0.1108 1.533 1.159-0.2458 2.66-0.9956 3.69-2.104 2.658-4.17 5.352-6.377 7.926-0.2941 0.1659-0.6875 0.1582-0.9702-0.0291z" fill="%23666"/></g></svg>');
    padding-left: 32px;
    font-size: .9em;
}

.web-content figure.file figcaption {
    display: block;
    text-decoration: none;
    padding: .5rem;
    font-style: normal;
    color: darkblue;
}

.web-content figure.file a b {
    font-size: 1.2em;
    text-decoration: underline;
}

.web-content figure.file a:hover {
    background-color: #ccc;
}

.web-content figure.file a:hover figcaption {
    color: darkred;
}

.flyer p, .flyer a {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}

.flyer_shadows ~ figure.image img{
    box-shadow: 5px 5px 5px black;
}

@media screen and (min-width: 981px) {
	body {
		background-image: url("../imgs_custom/fond_site_4'3.jpg");
	}
	
	#page {
    display: grid;
    width: 80vw;
    margin: auto;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto auto auto;
    grid-gap: 2vw 2vw;
}
}

@media screen and (min-width: 1920px) {
	body {
		background-image: url("../imgs_custom/fond_site.jpg");
	}
}