@charset "utf-8";

:root {
--noir: #000;
--blanc: #fff;
}

* { margin:0px; padding:0px; box-sizing: border-box; }

@font-face {
    font-family: 'suisseintl-book';
    src: url('../fonts/suisseintl-book-webfont.woff2') format('woff2'),
         url('../fonts/suisseintl-book-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


body{
padding: 15px 0;
font-family: "suisseintl-book", Arial, sans-serif; 
font-size:16px;
line-height:1.2em;
color: var(--blanc);
background:var(--noir);
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
scroll-behavior:smooth;
}

@media only screen and (min-width: 768px)	{ body { font-size: 18px; padding: 20px } }
@media only screen and (min-width: 990px)	{ body { font-size: 20px; padding: 40px } }
@media only screen and (min-width: 1200px)	{ body { font-size: 26px; } }




*:focus{outline:none;}
a, a:visited{ color: var(--blanc); text-decoration:underline;  }
a:hover, a:visited:hover{ text-decoration: none; }
.nb { white-space: nowrap; }
img, a img { object-fit: cover!important; border:none;}
p {padding:0 0 30px 0; margin:0px;}
ul, ol { margin:15px 0 30px 15px; padding:0px; list-style: none; }
ul.dash { position: relative;}
ul.dash li:before { content: "–"; position: absolute; left: -15px; }
p + ul,
p + ol { margin-top: 0px;}
sup { position: absolute; margin-top: -4px; font-size: 0.65em;}

h1, h2, h3, h4 {font-size: 1em; font-weight: normal; margin-bottom: 30px;}
h2 { text-decoration: underline;}
.small {font-size: 0.8em; line-height: 1.666em;}

.pad-top { padding-top:40px;}
.pad-pad-top { padding-top:80px;}
.pad-bot { padding-bottom:40px;}
.pad-pad-bot { padding-bottom:80px;}

.border-bot { border-bottom-width: 2px; border-bottom-style:solid; border-bottom-color: inherit; }

#header{ min-height: 80vh; }
#projects{ min-height: 50vh; }

@media only screen and (max-width: 989px)	{
.projet { margin-bottom: 1rem; padding-bottom: 1rem; }
}
.projet { border-bottom: 1px solid var(--blanc); }
.projet .row .image {
	user-select: none;
    display:block;
    position:fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80vw;
    z-index:-1;
    opacity: 0;
	visibility: hidden;
    transition: opacity 0.5s ease;
}


@media only screen and (min-width: 1600px)	{ .projet .row .image{ width: 55vw; }}

.projet .row:hover > .image {
	opacity: 1;	
	visibility: visible
}