@import url("./_variables.css");
@import url("./layout.css");
@import url("./action.css");
@import url("./colors.css");
@import url("./typography.css");
@import url("./information.css");
@import url("./structure.css");
@import url("./form.css");
@import url("./visual.css");
@import url("./helpers.css");
@import url("./spacing.css");

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

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
    min-height:100vh;
    background: var(--bg-main);
    margin: 0;
}

section,
.container,
.nc-grid,
.nc-grid > div {
    min-width:0;
}

.nc-img-parcours {
   display:block;
    width:100%;
    max-width:100%;
    height:auto;
}

.nc-w-100 {
    width: 100%;
}

.nc-w-mc {
    width: max-content;
}

/* FOOTER */
footer {
  padding:2.5rem 5vw;
  border-top:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:1rem;
}
.nc-footer-brand {
  font-family:var(--font-display);
  font-size:0.95rem; color:var(--cream);
}
.nc-footer-names {
  font-size:0.7rem; letter-spacing:0.15em;
  text-transform:uppercase; color:var(--sage); margin-top:0.2rem;
}
.nc-footer-copy {
  font-size:0.62rem; letter-spacing:0.15em;
  text-transform:uppercase; color:var(--muted);
}
.nc-footer-link {
  font-size:0.62rem; 
  letter-spacing:0.15em; 
  text-transform:uppercase; 
  color:var(--muted); 
  text-decoration:none; 
  transition:color 0.3s;
}

/* ACCUEIL */
.hero-bottom {
      position:absolute; bottom:3rem; right:5vw;
      display:flex; flex-direction:column; align-items:flex-end; gap:1.8rem;
}

.tree-container {
    width:100%;
    display:flex;
    justify-content:center;
    opacity: 0.6;
}

.tree-svg {
    width:100%;
    max-width:500px;
    height:auto;
}
@media (max-width: 767px) { 
    .hero-bottom, .tree-svg, .tree-container { display:none; } 
    .nc-img-parcours {
        max-width: 100%;
        height: auto;
    }
}

/* HEADER */
.nc-header {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 1000;

    background: var(--bg-main);

    backdrop-filter: blur(16px);

    -webkit-backdrop-filter: blur(16px);

    border-bottom: 1px solid rgb(0 0 0 / 0.08);

    transition:
        background .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;

}

.nc-header--scrolled {

    box-shadow:
        0 .5rem 2rem rgb(0 0 0 / .08);

}

/*
|--------------------------------------------------------------------------
| Container
|--------------------------------------------------------------------------
*/

.nc-header__container {

    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 5.5rem;

    gap: 2rem;
    width:100%;
    padding-inline:1.5rem;
}

/*
|--------------------------------------------------------------------------
| Logo
|--------------------------------------------------------------------------
*/

.nc-header__brand {

    display: flex;

    flex-direction: column;

    justify-content: center;

    text-decoration: none;

    color: inherit;

    white-space: nowrap;
    padding-left: 1rem;

}

.nc-header__title {

    font-size: 1.4rem;

    font-weight: 700;

    line-height: 1;

    color: var(--cream);

}

.nc-header__subtitle {

    margin-top: .3rem;

    font-size: .8rem;

    opacity: .7;

    text-transform: uppercase;

    color: var(--sage);

}

/*
|--------------------------------------------------------------------------
| Navigation
|--------------------------------------------------------------------------
*/

.nc-header__navigation {

    display: flex;

    align-items: center;

    gap: 2rem;

    padding-right: 1rem;
}

.nc-header__link {

    position: relative;

    display: inline-flex;

    align-items: center;

    min-height: 2.5rem;

    text-decoration: none;

    color: var(--muted);

    transition: color .25s ease;

}

.nc-header__link::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -.35rem;

    width: 0;

    height: 2px;

    background: currentColor;

    transition: width .25s ease;

}

.nc-header__link:hover::after,

.nc-header__link:focus-visible::after,

.nc-header__link.nc-is-active::after {

    width: 100%;

}

/*
|--------------------------------------------------------------------------
| Bouton Contact
|--------------------------------------------------------------------------
*/

.nc-header__link--primary {

    padding: .75rem 1.25rem;

    border-radius: 999px;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;

}

.nc-header__link--primary:hover {

    transform: translateY(-2px);

}

/*
|--------------------------------------------------------------------------
| Burger
|--------------------------------------------------------------------------
*/

.nc-header__toggle {

    display: none;

    position: relative;

    width: 3rem;

    height: 3rem;

    padding: 0;

    border: 0;

    background: transparent;

    cursor: pointer;

}

.nc-header__toggle span {

    position: absolute;

    left: .5rem;

    width: 2rem;

    height: 2px;

    background: currentColor;

    transition: .3s ease;

}

.nc-header__toggle span:nth-child(1) {

    top: .9rem;

}

.nc-header__toggle span:nth-child(2) {

    top: 1.45rem;

}

.nc-header__toggle span:nth-child(3) {

    top: 2rem;

}

.nc-header__toggle.is-open span:nth-child(1) {

    top: 1.45rem;

    transform: rotate(45deg);

}

.nc-header__toggle.is-open span:nth-child(2) {

    opacity: 0;

}

.nc-header__toggle.is-open span:nth-child(3) {

    top: 1.45rem;

    transform: rotate(-45deg);

}
/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 992px) {

    .nc-header__toggle {

        display: flex;

        align-items: center;

        justify-content: center;

        z-index: 1002;

    }

    .nc-header__navigation {

        position: fixed;

        top: 0;

        right: -100%;

        width: min(24rem, 90vw);

        height: 100vh;

        padding: 7rem 2rem 2rem;

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        justify-content: flex-start;

        gap: 1.25rem;

        background: var(--bg-main);

        backdrop-filter: blur(20px);

        -webkit-backdrop-filter: blur(20px);

        transition: right .35s ease;

        box-shadow:
            -1rem 0 3rem rgb(0 0 0 / .15);

        overflow-y: auto;

    }

    .nc-header__navigation.is-open {

        right: 0;

    }

    .nc-header__link {

        width: 100%;

        padding: .75rem 0;

        font-size: 1.1rem;

    }

    .nc-header__link--primary {

        margin-top: 1rem;

        width: 100%;

        justify-content: center;

    }

}

/*
|--------------------------------------------------------------------------
| Overlay
|--------------------------------------------------------------------------
*/

.nc-header__overlay {

    position: fixed;

    inset: 0;

    background: rgb(0 0 0 / .35);

    backdrop-filter: blur(3px);

    opacity: 0;

    visibility: hidden;

    transition:
        opacity .3s ease,
        visibility .3s ease;

    z-index: 999;

}

.nc-header__overlay.is-visible {

    opacity: 1;

    visibility: visible;

}

@media (max-width:992px){

.nc-header__navigation {

    width:100%;
    max-width:24rem;

    padding:
        7rem 1.5rem 2rem;

}

}

@media (max-width:992px){

.nc-header__navigation {

    width:100%;
    max-width:24rem;

    right:-100%;

    padding:7rem 1.5rem 2rem;

}

.nc-header__container {
    padding-inline:1.5rem;
}

}