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

@font-face {
    font-family: 'Seismic Aftershock Medium';
    src: url('../fonts/SeismicAftershock-Medium.woff2') format('woff2'),
        url('../fonts/SeismicAftershock-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

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

body {
	font-family: Arial;
    font-weight: normal;
    font-style: normal;
	background-color:#eaf5ef;
	color:#703ee6;
	font-size:18px; 
	line-height:22px; 
}
main { margin-top:-850px; margin-top:0; }
pre { font-family: 'Seismic Aftershock'; font-size: 80px; font-weight:normal; line-height: 75px; color:#703ee6; border:none; overflow:hidden; margin-top:200px; padding-bottom:100px; text-wrap-mode: wrap; }
h1 { font-family: 'Seismic Aftershock'; font-size: 50px; font-weight:normal; line-height: 50px; margin-bottom:25px; }
h2 { font-family: 'Seismic Aftershock Medium'; font-size: 26px; font-weight:normal; line-height:32px; }
h3 { font-family: arial; font-size: 30px; font-weight:normal; line-height:28px; margin-bottom:15px; }
h4 { font-family: arial; font-size: 20px; font-weight:bold; line-height: 28px; }
h5 { font-family: arial; font-weight:normal; font-size:15px; }
.col-md-5 h5 { display:block; }
.col-md-7 h5 { display:none; }

s { text-decoration:none; color:#703ee6; }
hr { border-top:1px solid #703ee6; }
p { margin-bottom:30px; }

.ocre { background-color:#b79f46; color:#fff; } .ocre hr { border-top:1px solid #fff; }
.rose { background-color:#ec8b83; color:#fff; } .rose hr { border-top:1px solid #fff; }
.vert { background-color:#64b79e; color:#fff; } .vert hr { border-top:1px solid #fff; }
.gris { background-color:#eaf5ef; color:#703ee6;}
.visuel { background-image:url("/docs/files/visuels/marion-fond-0.png"); background-size: contain; background-repeat: no-repeat; background-size: 100% auto; }

.navbar { font-family: 'Seismic Aftershock Medium'; background-color:#eaf5ef; padding-right:35px; padding-top:25px; }
a.navbar-brand { color:#703ee6; line-height:110%; font-weight:700; }
a.nav-link { color:#703ee6; display:inline-block; margin-right:10px; border-bottom:none; line-height:110%; padding-left:0!important; padding-right:30px!important;  }
a.nav-link:hover, .active a.nav-link { font-weight:900; color:#703ee6; }
.reseaux { display:none; 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; }
.dropdown-toggle::after { display:none; }
.calage-target { scroll-margin-top: 150px; scroll-behavior: smooth; }

/********************************
 Liens, boutons et survol
 - couleurs
 - effets au survol
********************************/
b, strong { font-weight:bold; }
main a { color:#b79f46; font-weight:bold; border-bottom:1px solid #b79f46; }
.bouton, .btn-primary { background-color:transparent; background-image:url("/images/fond-bouton.png"); background-size: contain; background-repeat: no-repeat; background-size: 100% 100%; border:none;  color:#fff; padding:15px 30px 20px 30px; font-family: 'Seismic Aftershock Medium';  }
.ocre .bouton, .ocre .btn-primary { background-color:transparent; background-image:url("/images/fond-bouton-blanc.png"); background-size: contain; background-repeat: no-repeat; background-size: 100% 100%; border:none;  color:#b79f46; }
.bouton:hover, .bouton:focus, .btn-primary:hover, .btn-primary:focus { background-color:transparent; background-image:url("/images/fond-bouton.png"); background-size: contain; background-repeat: no-repeat; background-size: 100% 100%; border:none; }
.form-control, .input-group-text { background-color:transparent; color:#703ee6; border:none; border-bottom:1px solid #fff; }
.ocre .form-control, .ocre .input-group-text { background-color:transparent; color:#fff; border:none; border-bottom:1px solid #fff; }

.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, .form-control { background-color:transparent;  }
a:hover { color:#b79f46; 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; border:none; background-color:transparent; }
.navbar-expand-lg .navbar-nav .dropdown-menu { margin:0; }
.dropdown-item { background-color:transparent; color:#703ee6; border-bottom:2px solid #703ee6; font-size:90%; padding:0; line-height:140%; }
.dropdown-item:hover, .dropdown-item:focus, .dropdown-item.active { font-weight:bold; font-size:90%; color:#703ee6; background-color:transparent; border-bottom:2px solid #703ee6;  }
.back-to-top { cursor: pointer; position: fixed; bottom: 50px; right: 20px; display: none; }
.back-to-top img { width:70px; 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: 1050px; }
.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); }


/*******************************
 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 { background-color:#703ee6 ; padding: 50px 0; color:#fff!important; }
.footer p img { max-width:unset; width:30px; }
.footer .reseaux-footer img { width:30px; margin-left:10px; margin-top:20px; float:left; }
.footer p { font-size:65%; line-height:110%; }
.footer h2 { font-size:90%; line-height:80%; }
.footer .petit { font-size:70%;}
.footer a { color:#fff; text-decoration:none; }
.footer a:hover { color:#b79f46; text-decoration:none; }

.footer table, table tr, table td { margin:0; border:0; }

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


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

@media (max-width: 992px) {
	.container-fluid .container { padding-left:0; padding-right:0; }
	.navbar { font-family: 'Seismic Aftershock Medium'; background-color:#eaf5ef; padding-right:0px; padding-top:15px; padding-left:0; }
	.navbar-toggler { background-color:#fff; margin-top:-10px; padding:4px; margin-right:30px; }
	.navbar-toggler .icon-bar { width:30px; height: 3px; border-radius: 2px; background-color:#703ee6; display:block; margin:5px 0; }
	pre { font-size: 52px; font-weight:normal; line-height: 50px; color:#703ee6; border:none; overflow:hidden; margin-top:100px; padding-bottom:10px; text-wrap-mode: wrap; }
	h1 { font-family: 'Seismic Aftershock'; font-size: 40px; font-weight:normal; line-height: 45px; }
	.footer p { font-size:65%; line-height:110%; padding:10px; }
}

@media (max-width: 768px) {	
	main table, footer table { margin:0; border:0; }
	main table td, footer table td { width:100%!important; display:block; padding:0; border:0; }
	main table td:first-child, footer table td:first-child { padding-left:0px; margin-left:0px; }
	main table td:last-child, footer 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; }
	.col-md-5 h5 { display:none; }
	.col-md-7 h5 { display:block; }
}

@media (max-width: 480px) {
	.calage-menu-haut-fixe { padding-top: 0px; }
	.calage-target { scroll-margin-top: 170px; scroll-behavior: smooth; }
}
