/* Saira */
@import url('https://fonts.googleapis.com/css2?family=Saira:wght@400;500;700&display=swap');

/* Heebo */
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;700&family=Saira:wght@300;500;700&display=swap');

.c-css {
}

html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    -webkit-font-smoothing: antialiased;
    font-family: 'Saira', Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.5rem;    /* 24px */
}

/*
 Safari for iOS has issues with `background-size: cover;`
 and `background-attachment: fixed`.
 See https://caniuse.com/background-attachment for reference.

 To workaround this, we use a pseudo-element.
 Also, we don't set the background-image via Javascript, because it's not
 possible to target a pseudo-element with JS. Instead we have to build a
 class for each image and use JS to set a random classname.

 Hopefully we'll be able to ditch this soon. (we are in 2021).
*/
body:after {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    content: "";
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
}

body.p01:after {
    background-image: url('/home/01.jpg');
}

body.p02:after {
    background-image: url('/home/02.jpg');
}

body.p03:after {
    background-image: url('/home/03.jpg');
}

body.p04:after {
    background-image: url('/home/04.jpg');
}

body.p05:after {
    background-image: url('/home/05.jpg');
}

body.p06:after {
    background-image: url('/home/06.jpg');
}

body.p07:after {
    background-image: url('/home/07.jpg');
}

body.p08:after {
    background-image: url('/home/08.jpg');
}

body.p09:after {
    background-image: url('/home/09.jpg');
}

body.p10:after {
    background-image: url('/home/10.jpg');
}

body.p11:after {
    background-image: url('/home/11.jpg');
}

body.p12:after {
    background-image: url('/home/12.jpg');
}

body.p13:after {
    background-image: url('/home/13.jpg');
}

body.p14:after {
    background-image: url('/home/14.jpg');
}

body.p15:after {
    background-image: url('/home/15.jpg');
}

body.p16:after {
    background-image: url('/home/16.jpg');
}

body.p17:after {
    background-image: url('/home/17.jpg');
}


p {
    margin: 1.5rem 0;
}

svg {
    fill: currentColor;
    vertical-align: middle;
}

.devgrid {
    background:
        linear-gradient(-90deg, rgba(0,0,0,.05) 1px, transparent 1px),
        linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px),
        linear-gradient(-90deg, rgba(0, 0, 0, .04) 1px, transparent 1px),
        linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px),
        linear-gradient(transparent 12px, #f2f2f2 12px, #f2f2f2 84px, transparent 84px),
        linear-gradient(-90deg, #aaa 1px, transparent 1px),
        linear-gradient(-90deg, transparent 12px, #f2f2f2 12px, #f2f2f2 84px, transparent 84px),
        linear-gradient(#aaa 1px, transparent 1px),
        #f2f2f2;
    background-size:
        24px 24px,
        24px 24px,
        96px 96px,
        96px 96px,
        96px 96px,
        96px 96px,
        96px 96px,
        96px 96px;
}

.ff-saira {
    font-family: 'Saira', Arial, Helvetica, sans-serif;
}

.ff-heebo {
    font-family: 'Heebo', Arial, Helvetica, sans-serif;
}

/* TITLES */
h1,
h2,
h3,
h4 {
    font-family: "Saira", Arial, Helvetica, sans-serif;
    font-weight: 400;
    text-transform: uppercase;
}

h1 {
    margin: 0;
}

h4 {
    font-size: 1rem;
    line-height: 1.5em;
}

h3 {
    font-size: 1.25rem;     /* 20px */
    line-height: 1.2em;
}

h2,
blockquote {
    font-size: 1.875rem;    /* 30px */
    line-height: 1.2em;
}

h2 span {
    text-transform: none;
}

/* LAYOUTS */
.lh-6 {
    line-height: 1.5rem;
}

@media (min-width: 1024px) {
    .l:\push {
        margin-left: auto;
    }
}

@media (min-width:768px) {
    .m\:col-2 {
        columns: 2 auto;
    }
}

@media (min-width: 1280px) {
    .x\:col-3 {
        columns: 3 auto;
    }
}

[id="projet"] {
    margin-top: -1.5rem;
}

/* MENU */
[id="menu_btn"] {
    z-index: 900;
}

[id="nav"] {
    z-index: 800;
}

[id="nav"] a {
    font-weight: 500;
    letter-spacing: 3px;
}

@media (min-width: 768px) {
    .m\:static {
        position: static;
    }
}

/* ICONS */
.icon {
    background-size: cover;
    display: block;
    height: 24px;
    width: 24px;
}

@media (min-width: 1024px) {
    .icon {
        height: 12px;
        width: 12px;
    }
}

.icon:hover {
    filter: invert(60%);
}

.icon-facebook {
    background-image: url("../../facebook.svg");
}

.icon-instagram {
    background-image: url("../../instagram.svg");
}

.icon-pinterest {
    background-image: url("../../pinterest.svg");
}

/* COLORS */
@media (min-width: 1024px) {
    .l\:bg-white {
        background-color: #FFF;
    }
}

/* EMPHASIS */
blockquote {
    font-family: 'Saira', Arial, Helvetica, sans-serif;
    font-style: normal;
    margin: 0;
    padding: 1.5rem 0;
    text-transform: uppercase;
}

[id="agence"] blockquote {
    padding: 1.5rem 0 0 0;
}

[id="approche"] blockquote {
    padding: 0;
}

/* LISTS */
ul {
    list-style-type: none;
    margin: 0 1.5rem 1.5rem 0;
}

ul,
li {
    padding: 0;
}


/* LINKS */
a {
    color: #000;
}

/* HR */
hr {
    background: #EEE;
    border: 0;
    clear: both;
    display: block;
    height: 1px;
    margin-bottom: 3rem;
    margin-top: 3rem;
}

/* CURSORS */
.c-not-allowed {
    cursor: not-allowed;
}

/* HOMEPAGE */
.homepage {
    background-attachment: fixed;
    background-color: #222;
    background-size: cover;
}

.h-screen > div {
    top: 35%;
}

/* APPROCHE > VALEURS */
.values {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
}

/* PROJETS */
.projets {
    margin-left: -0.75rem;
    margin-right: -0.75rem;
}

.projets a div {
    transition: opacity 0.25s ease;
}

.projets a:hover div {
    transition: opacity 0.25s ease;
}

/* PROJET */
.toggler {
    transition: all 0.2s;
}

.toggler:before {
    content: "+ ";
}

.toggler_on {
    background-color: #000;
    color: #FFF;
}

[id="description"],
[id="details"] {
    height: auto;
    opacity: 1;
    transition: height 0ms 600ms, opacity 800ms ease 0ms;
}

.hidden {
    /* display: none; */
    visibility: hidden;
}

@media (min-width: 768px) {
    .m\:hidden {
        display: none;
    }

    .m\:show {
        visibility: visible;
    }
}

.hidden2 {
    /* Allows to somehow animate */
    overflow: hidden;
    height: 0;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0;
    transition: opacity 800ms ease 0, height 0 ease 900ms;
}

/* RESET */
img {
    vertical-align: middle;
}

/* OVERRIDES */
.hover\:o-90:hover {
    opacity: .9;
}

.o-0 {
    opacity: 0;
}