# Only the main Sass file needs front matter (the dashes are enough)


@charset “utf-8”;

// Import partials from `sass_dir` (defaults to `_sass`) @import “knacss”;

$brandcolor :purple; $greylight: eee; $grey: bababa; $greydark: aaa; $black: #181818; $white: fefefe; $box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2);

/* General */ body {background:#e8e8e8;color:#4e4852;/*ratio 7.22*/font-size:1.6rem;}

/* Typographie */ body {font-family: -apple-system,

BlinkMacSystemFont, 
"Segoe UI", 
Roboto, 
Oxygen,
Ubuntu,
Cantarell,
"Open Sans",
"Helvetica Neue", 
sans-serif; /* font stack from Medium */

} a {color:$brandcolor;} a:hover, a:focus {background:$brandcolor;color:#fff;} article {padding:10rem 6rem;margin-bottom:8rem;background:$white;box-shadow:$box-shadow;

h1,
h2,
h3,
h4 {text-transform:uppercase;} 
p,li,q,blockquote {font-size:2rem;}
blockquote:before {top:2rem;left:1.5rem;}
blockquote {padding:3rem 4rem 3rem 6rem;background:$greylight;border-radius:3px;}
img {margin:4rem 0;box-shadow:$box-shadow;}
ul,
ol {margin:4rem 0;}
ul ul,
ul ol,
ol ul,
ol ol  {margin-bottom:0;}
dl {margin-bottom:4rem;}
dt {font-weight:bold;}
dd {padding-left:2rem;border-left:2px solid $greylight;}

} @media (max-width: $small + 1) {

article {padding:4rem 1rem;}
p,li,q,blockquote {font-size:1.4rem}

}

/* Header */ .skiplink {display:block;background:#131313;color:#fff;text-decoration:none;}

.site-header {background:#fff;border-bottom:2px solid #131313;

img {margin:20px 0;}

} .site-title {margin:auto;font-size:2em;} @media (max-width: $small + 1) {

.site-header {padding:0 2rem 1rem;}
.site-logo {text-align:center;}

}

/* Navigation Responsive */ .navigation {display:flex;flex-direction:row;margin-left:auto;} .navigation > a {padding:10px;color:$brandcolor;margin:auto;} .navigation > a:hover, .navigation > a:focus, .navigation > a:active {background:#555;color:#fff;} .nav-button {display:none; /* no button by default */ position:absolute;top:1rem;right:1rem;padding:1rem;background:#141414;color:#fff;border:none;cursor:pointer;} @media (max-width: $small + 1) {

.js-enabled html,
.js-enabled body {overflow-x:hidden; /* you shall not pass! */ } 
.js-enabled .nav-button {display: inline-block; }
.js-enabled .navigation {position:absolute;width:60vw;top:0;bottom:0;left:0;z-index:0;background:#141414; /* will be under everything */flex-direction:column;transform:translateX(-60vw); }
.js-enabled .navigation a {margin:0;color:#fff;}
/* styling opened nav */
/*.js-enabled  {position: relative;  will-change: transform; min-height: 100vh; } */
.js-enabled .navigation.is-opened {transform:translateX(0);transition: transform .25s;}

}

/* Footer */ .site-footer {padding:8rem 0;font-size:1.3rem;background:$grey;color:#000;

h1,
h2 {font-size:1.6rem;text-transform:uppercase;}
ul {list-style:none;padding:0;}
li a {display:block;padding:2rem 1.5rem;text-transform:uppercase;border-bottom:1px solid $greylight;text-decoration:none; }
> .flex-container {flex-direction:row;justify-content:center;margin-top:6rem;
  li a {border:none;text-transform:none;}
}

} @media (max-width: $small + 1) {

.site-footer {padding:2rem;
  .w33 {width:auto;}
}

}

/* MAIN */ .main {min-height:100vh;padding:4rem 0;

h1,
h2 {font-weight:300;}

} .grid-images {

figure {position:relative;z-index:-1;}
a {color:$black;text-decoration:none;}
img {border-radius:2px 2px 0 0;}
a:hover,
a:focus {opacity:.8;}
figcaption {padding:1.5rem 1.2rem;background:$greydark;border-radius:0 0 2px 2px;font-style:italic;text-decoration:none;}
figcaption:hover,
figcaption:focus {background:$white;}

} @media (max-width: $small + 1) {

.main {padding:2rem;}

}

/* FORM */ form {max-width:800px;margin:8rem 0;} .mention {text-align:right;} .block-form {margin:2rem 0;display:flex;flex-wrap:wrap;align-items:center;} fieldset {width:100% !important;display:flex;align-items:center;}

legend {margin-bottom:2rem;font-size:2rem;text-transform:uppercase;} label, select, input {margin:0;font-size:1.4rem;letter-spacing: 0.03em;cursor:pointer;overflow:hidden;} label {margin-right:5px;font-size:1.8rem;text-align:right;} input {padding:1.5rem;} input:not():not():not():not() {flex:1;border:none;width:100%;} label input:not():not():not():not() {width:auto;} span {font-style:italic}

select, input, button {padding:1.5rem;position:relative;-moz-user-select:none;background-color:#fff;border:none;border-radius:2px;color:rgba(0, 0, 0, 0.87);text-align:center;transition:all 0.2s ease-in-out 0s;vertical-align:middle;box-shadow:$box-shadow;} select:hover, input:hover, button:hover, select:focus, input:focus, button:focus, select:active, input:active, button:active {background-color:$greylight;color:rgba(0, 0, 0, 0.87);} textarea {padding:1.5rem;min-height:15em;flex:1;border:none;}

input, button {display:flex;margin:4rem 0 0 auto;} fieldset input {margin-right:2rem;}

.block-form-fieldset

fieldset {margin:0;
label {margin-left:1rem;}
ul {list-style:none;border-left:2px solid $greylight;}
input[type="radio"],
input[type="checkbox"] {vertical-align:middle;margin-right:0;}

} /* Search */ .search {background:$grey;border-bottom:2px solid $greydark;padding:4rem 0;

form {margin:auto;display:flex;flex-direction:row;}
label {font-size:1.6rem;margin-top:.8rem;}
input[type="text"] {flex:1;padding:0 1.5rem;margin:0;}
input[type="submit"] {margin:0;}

} @media (max-width: $small + 1) {

fieldset input {margin-right:0;}
.block-form {flex-direction:column;align-items:start;
  label {text-align:left;}
  span {display:block;font-style:italic;}
  label input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):not([type="submit"]) {width:100%;}
  fieldset > * {display:flex;flex-direction:column;align-items:start ;}
  textarea {width:100%;}
}
.search {
  form {flex-direction:column;padding:0 2rem;}
  label {text-align:left;}
  input[type="text"] {padding:1.5rem;}
  input[type="submit"] {width:auto;margin:.5rem 0 auto auto;}
}

}