:root {
    --mid : #D9d9d9;
    --white : #FAFAFA;
    --dark : #061A1F;
    --accent : #FD0000;
    --contour : 2pt;
}

@font-face {
    font-family: 'Akzidenz-Grotesk BQ Extra Alt';
    src: url('fonts/AkzidenzGrotesk-ExtraBoldAlt.otf') format('otf');
}

*, *:after, *:before {
    box-sizing: border-box;
    width: auto;
    height: auto;
    position: relative;
    transition: .3s ease-in-out;
    color: inherit;
    font-family: inherit;
    z-index: 9;
}

.fg {
    z-index: 90;
}

.bg {
    z-index: 5;
}

::placeholder {
    opacity: .45;
    font-style: italic;
}

.talc {
    text-align: center;
}

img.fill {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

img.fill.float {
    position: absolute;
}

img.fit {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.no {
    display: none !important;
}

ul:not(.list) {
    padding: 0;
    list-style: none;
    margin: 0;
}


h1, h2, h3, h4, h5, h6 {
    font-weight: 800;
    margin: 0;
    line-height: 1.1;
    text-transform: uppercase;
}
h1, h2, h7 {
    font-family: 'Akzidenz-Grotesk BQ Extra Alt';
}
h1 {
    font-size: 2vmax;
    line-height: 1.2;
}
h2 {
    font-size: 3.5em;
    line-height: 1;
}

h3 {
    font-size: 2em;
}

h4 {
    font-size: 1.85em;
}

h5 {
    font-size: 1.25em;
    margin: 0 0 1vmax;
}

h6 {
    font-size: 1.25em;
    font-weight: 600;
    margin: 0.25em 0 0;
}

p {
    line-height: 1.35;
    font-size: .9em;
}

a {
    text-decoration: none;
}

*[class*="flex"] {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.flex-wr {
    flex-wrap: wrap;
}

.all-cen {
    align-items: center;
    justify-content: center;
}

.a-end {
    align-items: flex-end;
}

.a-cen {
    align-items: center;
}

.a-nor {
    align-items: normal;
}

.jst-sb {
    justify-content: space-between;
}

.jst-cen {
    justify-content: center;
}

.jst-end {
    justify-content: end;
}


.cont-wide {
    width: 85%;
    margin: 15vh auto;
}

/*  Grid Parametres  */

*[class*="grid"] {
    display: grid;
}

.v-col {
    grid-template-columns: repeat(5, 1fr);
}

.iv-col {
    grid-template-columns: repeat(4, 1fr);
}

.iii-col {
    grid-template-columns: repeat(3, 1fr);
}

.ii-col {
    grid-template-columns: repeat(2, 1fr);
}

.span-all {
    grid-column: 1 / -1;
}
.span-ii {
    grid-column: span 2;
}
.span-iii {
    grid-column: span 3;
}
.span-iv {
    grid-column: span 4;
}
.span-v {
    grid-column: span 5;
}
.span-vi {
    grid-column: span 6;
}


button {
    cursor: pointer;
    border:none;
}

.gpone {
    gap: 1vmax;
}

.gptwo {
    gap: 2vmax;
}

.gpthree {
    gap: 4vmax;
}

.gpfour {
    gap: 7vmax;
}

.bg-dk {
    background: var(--dark);
    color: var(--white);
    border: solid var(--contour) var(--dark);
}
a.bg-dk:hover,
button.bg-dk:hover,
a.bg-dk:focus,
button.bg-dk:focus {
    background: var(--accent);
    color: var(--white);
    border: solid var(--contour) var(--accent);
}

.bg-wh {
    background: var(--white);
    color: var(--dark);
    border: solid var(--contour) var(--white);
}
a.bg-wh:hover,
a.bg-wh:focus,
button.bg-wh:focus,
button.bg-wh:hover {
    background: var(--accent);
    color: var(--white);
    border: solid var(--contour) var(--accent);
}

.bg-acc {
    background: var(--accent);
    color: var(--white);
    border: solid var(--contour) var(--accent);
}

a.bg-acc:hover,
a.bg-acc:focus,
button.bg-acc:focus,
button.bg-acc:hover {
    background: var(--white);
    color: var(--dark);
    border: solid var(--contour) var(--white);
}

.bg-off {
    background: var(--mid);
    color: var(--dark);
    border: solid var(--contour) var(--mid);
}
button.bg-off:hover {
    background: var(--mid);
    color: var(--white);
    border: solid var(--contour) var(--mid);
}


.cl-dk {
    color: var(--dark);
}
.cl-wh {
    color: var(--white);
}
.cl-dim {
    color: var(--mid);
}
.cl-acc {
    color: var(--accent);
}

*[class*="-sh"] {
    box-shadow: 0.25vmin .35vmin .75vmin rgba(0 0 0 / .15);
}

*[class^="butt-link"] {
    width: fit-content;
    white-space: nowrap;
    border-radius: .75em;
    font-weight: 800;
    text-transform: uppercase;
    padding: 1.5vmin 1.50vmax;
    display: inline-flex;
    align-items: center;
}

a[class*="bord"],
button[class*="bord"] {
    background: transparent;
    border: solid var(--contour);
    font-weight: 800;
}

.butt-link img {
    display: inline-block;
    margin: 0 1em 0 0;
    vertical-align: middle;
    height: 2vmin;
}

button[class^="butt-link"] {
    padding: 2vmin 2vmax;
    width: max-content;
}

a[class*="bord"]:hover,
button[class*="bord"]:hover {
    color: var(--accent);
}


/*      Font Sizes      */


.font-xxxl {
    font-size: 3rem;
    font-size: xxx-large;
}

.font-xxl {
    font-size: xx-large;
}

.font-xl  {
    font-size: x-large;
}

.font-l {
    font-size: large;
}

.font-m  {
    font-size : medium;
}

.font-s,
a[class^="butt-link"],
button[class^="butt-link"] {
    font-size: small !important;
}

.font-sm {
    font-size: smaller;
}

.font-ss {
    font-size: small;
}



html body {
    font-family: 'inter', 'poppins', 'arial', sans-serif;
    margin: 0;
    padding: 0;
    border: none !important;
    overflow-x: hidden;
    color: var(--dark);
}

header#header > a img {
    height: 12.5vh;
}

header#header {
    width: 85%;
    margin: 5vh auto 10vh;
}

section#splash {
    margin: 0 0 25vh;
}

section#splash > aside {
    left: 30%;
    height: 65vh;
    width: 70%;
    border: none;
}

section#splash > main {
    width: 45%;
    background: white;
    padding: 2.2vmax;
    left: 5%;
    position: absolute;
    z-index: 999;
    bottom: 0;
    transform: translateY(10%);
}


div#book-pres article {
    overflow: hidden;
    max-height: 0vh;
    padding: 0vh 0;
    opacity: 0;
    filter: blur(10px);
    order: 2;
}
div#book-pres h5 {
    font-size: 3.25em;
    font-weight: 600;
}
div#book-pres article.active {
    max-height: 50vh;
    padding: 2vh 0;
    opacity: 1;
    filter: blur(0);
    order: 1;
}


section#book > aside {
    width: 45%;
    height: 65vh;
    overflow: hidden;
    margin-right: 5vw;
}
section#book > aside img#book {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 40vh;
    width: auto;
    transform: translate(-50%, -50%);
    filter: drop-shadow(1vmin 1vmin 1vmax);
}
section#book {
    width: 70%;
    margin: 5vh auto;
}
section#book > main {
    align-items: end;
    text-align: right;
    width: 60%;
    padding-bottom: 5vh;
}

div#book-pres nav {
    position: absolute;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 1vmax;
    transform: translate(4vw, -50%);
    top: 50%;
}
div#book-pres nav div {
    aspect-ratio: 1;
    width: .75em;
    background: var(--mid);
    border-radius: 50%;
}
div#book-pres nav div.active {
    background: var(--dark);
}   



section#vision {
    width: 85%;
    margin: 15vh auto;
}
section#vision h6 {
    font-weight: 900;
}
section#vision h4 {
    margin: 1vh 0 5vh;
    line-height: 1.2;
}
section#vision > footer footer {
    padding: 3vh 10% 0;
}
section#vision h7 {
    text-transform: uppercase;
    font-size: 1.75em;
}
section#vision > footer > * {
    width: 100%;
}
section#vision > footer > * > div {
    height: 30vh;
}
section#vision > header {
    width: 80%;
}


section#experience {
    border: none;
    margin: 25vh 0;
    min-height: 95vh;
    display: flex;
    align-items: end;
}
section#experience > img {
    opacity: .35;
}
section#experience > main {
    margin: 0;
    width: 100%;
    vertical-align: bottom;
    padding: 6em 7.5% 3em;
    background: linear-gradient(0deg, var(--dark) 20%, transparent);
}
section#experience > main > ul {
    column-count: 3;
    line-height: 2;
    margin: 0 0 5vh;
}




section#ecosystem hr {
    height: 2pt;
    width: 20pt;
    border: none;
    background: var(--dark);
    overflow: visible;
    margin: 0;
}
section#ecosystem > ul > li {
    padding: 1.25em;
    border-bottom: solid;
    margin: 0 0 2vh;
}
section#ecosystem li header {
    width: 100%;
    align-items: center;
}
section#ecosystem hr::after {
    content: '';
    position: absolute;
    border-top: solid var(--dark) 2.25pt;
    width: 50%;
    rotate: 45deg;
    aspect-ratio: 1;
    transform: translateY(-50%);
    left: 35%;
    top: 0%;
    border-right: solid var(--dark) 2.25pt;
}
section#ecosystem hr::before {
    content: '';
    position: absolute;
    width: 0%;
    transform: translate(0, -50%) rotate(45deg);
    aspect-ratio: 1;
    left: 0;
    top: 60%;
}
section#ecosystem li.active hr::before {
    width: 50%;
    border-left: solid var(--dark) 2.25pt;
    border-bottom: solid var(--dark) 2.25pt;
    left: 108%;
}
section#ecosystem li.active hr {
    background: transparent;
}
.cont-wide .cont-wide {
    width: 95%;
    margin: 5vh auto;
}


section#ecosystem > ul > li main {
    overflow: hidden;
    max-height: 0;
}
section#ecosystem > ul > li.active main {
    max-height: 100vh;
    transition: .6s ease-in;
}


ul.bloc {
    margin: 6.5vh 0 0;
}

ul.bloc li {
    padding: 1.5em 1.5em .5em;
    border: solid 1pt var(--mid);
    border-radius: 1em;
}



main#spaces {
    width: 60%;
    left: 40%;
    display: inline-block;
    white-space: nowrap;
}

main#spaces article {
    height: 70vh;
    overflow: hidden;
    display: inline-flex;
    align-items: end;
    padding: 4em;
    background: var(--mid);
    width: 40vw;
    margin: 0 1em 0 0;
    color: var(--dark);
    white-space: break-spaces;
}
main#spaces article footer {
    z-index: 999;
}
main#spaces article footer h5 {
    margin: 0;
}
main#spaces article::after {
    z-index: 9;
    content: "";
    width: 100%;
    position: absolute;
    height: 70%;
    background: linear-gradient(0deg, white 15%, transparent);
    bottom: 0;
    left: 0;
}
main#spaces article img {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
section#espaces {
    padding: 10vh 0;
}
section#espaces aside {
    position: absolute;
    top: 50%;
    width: 20%;
    left: 10%;
    transform: translateY(-50%);
}
section#espaces ul {
    margin: 2.5vh 0 0 0;
}
section#espaces aside li {
    text-transform: uppercase;
    padding: .5em;
    font-size: 1.25em;
    font-weight: 600;
    border-bottom: solid 1.5pt;
    margin: 1vh 0 0;
}
section#confiance h7 {
    font-size: 2em;
    text-transform: uppercase;
}


section#cta {
    padding: 7.5vw;
}
section#cta h2 {
    max-width: 75%;
}
section#cta button.butt-link {
    font-size: 1.25em !important;
    padding: 1.75vmax 3vmax;
}


#spaces {
    overflow: hidden;
    white-space: nowrap;
}

#spaces > article {
    display: inline-block;
    vertical-align: top;

    /* largeur du slide */
    width: 100%;
    white-space: normal;
    transition: transform .8s ease;
}


footer#footer aside {
    padding: 1em 2%;
    border-top: solid 1pt;
}
footer#footer main img {
    width: 30%;
}
footer#footer main p img {
    height: 1.5vh;
    display: inline-block;
    vertical-align: middle;
    width: min-content;
    margin: 0 1.5vmin 0 0;
}
footer#footer main a, 
footer#footer main p {
    display: block;
    margin: 1.5vh 0 0;
    font-weight: 700;
    font-size: small;
    white-space: nowrap;
}
footer#footer main a {
    text-transform: uppercase;
}
footer#footer main li {
    margin: 0 0 0 3vw;
}



@media only screen and (max-width: 600px) and (orientation: portrait) {
    .flex-mc{
    flex-direction: column;
}
    footer#logos img {
    height: 8vh;
    margin: 2vh 3vh 0 0;
}
    *[class*="grid"] {
    display: flex;
    flex-direction: column;
}
    .moboff{
    display: none;
}
h1 {
    font-size: 3vmax;
}
h2 {
    font-size: 2.0em;
}
h3 {
    font-size: 1.25em;
}
h4 {
    font-size: 1.25em;
}
section#espaces aside {
    position: relative;
    top: 0%;
    width: 80%;
    left: 10%;
    transform: translateY(0%);
}
main#spaces {
    width: 90%;
    left: 10%;
    display: block;
    overflow: hidden;
}

main#spaces article {
    height: 50vh;
    padding: 2em;
    background: var(--mid);
    width: 75vw;
    margin: 0 1em 0 0;
    color: var(--dark);
}
section#ecosystem > ul > li:hover main {
    max-height: 300vh;
    transition: .6s ease-in;
}
section#experience > main > ul {
    column-count: 1;
}
section#book > main {
    text-align: CENTER;
    width: 100%;
    padding-bottom: 5vh;
}
div#book-pres nav {
    position: absolute;
    right: 50%;
    flex-direction: row;
    transform: translate(50%, -175%);
    top: 0%;
}
*[class^="butt-link"] {
    padding: 3.5vmin 2.5vmax;
}
section#book > main > a {
    align-self: center;
}
section#book > aside {
    width: 100%;
    height: 45vh;
    margin: 0 auto 5vh;
}
section#splash > main {
    width: 75%;
    bottom: -10%;
}
footer#footer main img {
    width: 100%;
    margin: 0 0 10vh;
}
footer#footer main ul {
    gap: 6vh;
margin: 0 0 10vh;
}
section#cta h2 {
    max-width: 100%;
    font-size: xxx-large;
    margin: 10vh 0 7vh;
}
    div#book-pres h5 {
        font-size: 1.80em;
        font-weight: 600;
        margin: 2.5vh 0;
    }
    section#vision > header {
    width: 100%;
}
}