@font-face {
    font-family: 'Treteau La Nuit_font';
    src: url('../fonts/TreteauLaNuit_font-Regular.woff2') format('woff2'),
        url('../fonts/TreteauLaNuit_font-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



@font-face {
    font-family: 'Urbanist';
    src: url('../fonts/Urbanist-Regular.woff2') format('woff2'),
        url('../fonts/Urbanist-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/********************************
 Parametres generaux : 
********************************/

body {
	font-family: 'Urbanist';
    font-weight: normal;
    font-style: normal;
	background-color:#3F43F3;
	color:#fff;
}
main { margin-top:110px; }
h1, .navbar, h3 { 
	font-family: 'Treteau La Nuit_font';
    font-weight: normal;
    font-style: normal;
	letter-spacing:-0.05em;
	text-transform:uppercase;
}
h2 { font-size: 2em; font-weight:normal; }
h2 strong { font-weight: 900; }
h4 { font-size: 1.2em; font-weight:900; }
s { text-decoration:none; color:#3F43F3; }

.navbar { background-color:transparent; padding-right:35px; }
a.navbar-brand img {width:150px; height:auto; }
a.nav-link { color:#fff; display:inline-block; margin-right:10px; background-image:url("/images/fond-rubrique-bleu.png"); background-size: contain; background-repeat: no-repeat; background-size: 100% 100%; border-bottom:none; }
a.nav-link:hover { color:#ff7c7c; color:#fff;  }
a.nav-link::before {
	content: url("/docs/files/pictos/etoiles/etoile-bleue.png") ;
	display: inline-block;
}
a.nav-link:hover::before, li.active a.nav-link::before {
	content: url("/docs/files/pictos/etoiles/etoile-orange.png") ;
	display: inline-block;
}
.reseaux { margin-left:100px; }
.reseaux a img { width:25px; height: auto; margin-left:5px; }
.carousel-control-next-icon { background-image: url("/docs/files/pictos/fleche-droite-rose.png"); height: 40px; }
.carousel-control-prev-icon { background-image: url("/docs/files/pictos/fleche-gauche-rose.png"); height: 40px; }

/********************************
 Liens, boutons et survol
 - couleurs
 - effets au survol
********************************/
b, strong { font-weight:bold; }
main a { color:#ff7c7c; font-weight:bold; border-bottom:1px solid #ff7c7c; }
.bouton, .btn-primary { background-color:transparent; background-image:url("/images/fond-rubrique-rose.png"); background-size: contain; background-repeat: no-repeat; background-size: 100% 100%; border:none;  color:#fff; }
.bouton:hover, .bouton:focus, .btn-primary:hover, .btn-primary:focus { background-color:transparent; background-image:url("/images/fond-rubrique-rose.png"); background-size: contain; background-repeat: no-repeat; background-size: 100% 100%; border:none; }
.input-group>.input-group-append:last-child>.btn:not(:last-child):not(.dropdown-toggle), .input-group>.input-group-append:last-child>.input-group-text:not(:last-child), .input-group>.input-group-append:not(:last-child)>.btn, .input-group>.input-group-append:not(:last-child)>.input-group-text, .input-group>.input-group-prepend>.btn, .input-group>.input-group-prepend>.input-group-text { background-color:#fff;  }
a:hover, p strong { color:#ff7c7c; text-decoration:none; border-bottom:none;  }
a, button, .btn { -webkit-transition: all .2s ease-in; -moz-transition: all .2s ease-in; -o-transition: all .2s ease-in; transition: all .2s ease-in; }
hover, button:hover, .btn:hover { -webkit-transition: all .1s ease-in; -moz-transition: all .1s ease-in; -o-transition: all .1s ease-in; transition: all .1s ease-in; }
.dropdown:hover .dropdown-menu { display:block; }
.dropdown-item { color:#000; }
.dropdown-item:hover, .dropdown-item:focus, .dropdown-item.active {background-color:#ff7c7c; color:#fff; }
.back-to-top { cursor: pointer; position: fixed; bottom: 50px; right: 20px; display: none; }
.back-to-top img { width:18px; height:auto; }
.breadcrumb li+li:before { content:" > "; margin-left:8px; }
.breadcrumb { display:none; }

/********************************
 Carousel, 
 - calage haut pour le menu fixe
 - réglages pour les images 100%
 - réglages pour les légendes
********************************/
.carousel { margin-bottom: -85px; }
.carousel-vide { margin-bottom: 85px; }
.calage-menu-haut-fixe { padding-top: 86px; padding-top: 0px; }
.carousel-caption { bottom: 3rem; z-index: 10; }
.carousel-item { height: 45rem; }
.carousel-item > img { position: absolute; top: 0; left: 0; min-width: 100%; height:auto!important; }
.carousel h1 { 
	font-family: 'Urbanist';
    font-weight: normal;
    font-style: normal;
	letter-spacing : normal;
	text-transform:none; 
}
.carousel h1 a { color:#fff; }

/*******************************
 Gestion des images
*******************************/
.container p img, td img { max-width:100%; height:auto!important; }
.container .bloc-galerie { display:flex; flex-direction: row; flex-wrap: wrap; }
.container .bloc-galerie img { box-shadow: 3px 3px 5px #aaa, -0.02rem -0.02rem 1px #aaa; width:225px; margin:20px 20px 0 0; padding:5px; height:auto!important; filter: brightness(1); }
.container .bloc-galerie img:hover { box-shadow: 3px 3px 5px #333, -0.02rem -0.02rem 1px #333; filter: brightness(1.25); }

/*******************************
 projets
*******************************/
.margebassemini {
	padding-bottom:10px;
}
.margebasse {
	padding-bottom:30px;
}
ul.listeCategories { padding-bottom:30px; padding-top:10px; margin:auto; }
.listeCategories li {
	display:inline;
	list-style:none;
	padding-right: 20px; 
}
.listeCategories li a { padding:5px 15px; color:#fff; background-image:url("/images/fond-rubrique-rose.png"); background-size: contain; background-repeat: no-repeat; background-size: 100% 100%; border-bottom:none; }
.listeCategories li a.select, .listeCategories li a:hover { color:#fff; background-image:url("/images/fond-rubrique-vert.png"); background-size: contain; background-repeat: no-repeat; background-size: 100% 100%; }
img.couleur { width:100%!important; height: auto!important ;}
.loaderVignette {
	z-index: 9999;
	/*background : url('/docs/files/loader-anime.gif') 50% 50% no-repeat;*/
	height : 224px;
	width : 100%;
	background-color:#ff7c7c; 
}
.loaderVignette:hover img { display:none; }
.loaderVignette2 {
	width : 100%;
	height : auto;
}
.fond-blanc {
	z-index: 9999;
	background-image : url('/docs/files/projets/fond plan projet.png'); background-size: contain; background-repeat: no-repeat; background-size: 100% ;
	/*height : 468px;*/
	width : 100%;
}
.grange-en-feu-cestquoi {
	z-index: 9999;
	background-image : url('/docs/files/grange en feu/flammes.png'); background-size: contain; background-repeat: repeat-y; background-size: 100% ;
	/*height : 468px;*/
	width : 100%;
}
.grange-en-feu {
	z-index: 9999;
	background-image : url('/docs/files/grange en feu/flammes-blanches.png'); background-size: contain; background-repeat: repeat-y; background-size: 100% ;
	/*height : 468px;*/
	width : 100%;
}
.fond-blanc p { color:#3F43F3; }
.loaderGrandeVignette {
	z-index: 9999;
	background : url('/docs/files/loader-anime.gif') 50% 50% no-repeat;
	/*height : 468px;*/
	width : 100%;
}
.boite468 { display:flex; height:260px; }
.boite468 a { border-bottom:none;  }
.boite240 { display:flex; height:240px; }
.titreVignette {
	font-family: 'Urbanist';
    font-weight: normal;
    font-style: normal;
	position:relative;
	bottom:60%;
	width:75%;
	font-size:200%;
	font-weight:bold;
	margin: auto;
	text-align:center;
	color:#fff;
	line-height:110%; 
	height:auto;
}

/*******************************
 gestion des blocs
*******************************/
table { width:100%!important; display:block; border-spacing : 0; border:1px solid #ccc; margin-top:10px; }
main table { border:none; margin-top:0; }
table td { padding-left:15px; padding-right:15px; border:1px solid #ccc; vertical-align:top;}
main table td { float:left; border:none; }
main table td:first-child { padding-left:15px; margin-left:-15px; }
main table td:last-child { padding-right:15px; }

/*******************************
 modale
****************************/
.overlay { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100vw; height: 100vh; overflow: hidden; background-color: rgba(0,0,0,0.4); }
.modale { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; max-width: 750px; text-align: center; position: relative }
.close { color: black; float: right; font-size: 20px; font-weight: bold; opacity: .5; position: absolute; right: 20px }
.close:hover { color: black; text-decoration: none; cursor: pointer; }

/*******************************
 footer
****************************/
.footer { padding: 20px 0; color:#fff!important; }
.footer img { width:150px; float:right; }
.footer .reseaux-footer img { width:30px; margin-left:10px; margin-top:20px; float:left; }
.footer p { line-height:110%; }
.footer .petit { font-size:70%;}
.footer a { color:#fff; text-decoration:none; }
.footer a:hover { color:#ff7c7c; text-decoration:none; }


/********************************
RESPONSIVE CSS - MEDIA QUERIES
********************************/


@media (max-width: 1200px) {	
}

@media (max-width: 992px) {
	.carousel-item { height: 20rem; }
	.reseaux { display:none; }
	.navbar-toggler { background-color:#fff; margin-top:-45px; }
}

@media (max-width: 768px) {	
	main table { margin:0; border:0; }
	main table td { width:100%!important; display:block; padding:0; border:0; }
	main table td:first-child { padding-left:0px; margin-left:0px; }
	main table td:last-child { padding-right:0px; }
	.back-to-top { display:none!important; }
	.footer { text-align:center; }
	.footer .reseaux-footer { text-align:center;  }
	.footer img, .footer .reseaux-footer img  { float:unset; }
}

@media (max-width: 480px) {
	.calage-menu-haut-fixe { padding-top: 0px; }	
	.carousel-item { height: 14rem; }
	ul.listeCategories { padding:20px;}
	.listeCategories li { display:inline-grid; padding:0; }
}