/* ----------------------------- Noctambus Landing Page ----------------------------- */

@font-face {
    font-family: 'Bespoke-slab';
    src: url(webfonts/BespokeSlab-Variable.woff2) format('woff2');
    font-weight: 400;
  }

body {
    margin: 0;
    font-family: "Lato", sans-serif;
    font-weight: 400;
    background-color: #01011D;
    overflow-x: hidden;
    position: relative;
}

/*  ombre gauche  */

body::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(1, 1, 1, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
    width: 10%;
    height: 100%;
    z-index: 5;
}

/*  ombre droite  */

body::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(90deg, rgba(1, 1, 29, 0) 0%, rgba(1, 1, 1, 0.8) 100%);
    width: 10%;
    
    z-index: 3;
}

/* ----------------------------- TYPOGRAPHIE ----------------------------- */

h1,h2,h3,h4,p {
    color: white;
    margin: 0;
}

h1 {
    font-family: "Bespoke-slab";
    font-size: 4em;
    font-weight: 300;
    letter-spacing: -0.05em;
}

h2 {
    font-family: "Bespoke-slab";
    font-size: 2em;
    line-height: 0.8em;
}

.logo {
    font-family: "Bespoke-slab";
    font-size: 1.5em;
}

h4 {
    font-size: 1.2em;
    padding: 0;
    font-weight: 400;
}

p {
    font-size: 18px;
    font-weight: 100;
}

/* ----------------------------- HEADER ----------------------------- */

header {
    background: #01011D;
    background: linear-gradient(180deg, rgba(1, 1, 29, 1) 10%, rgba(255, 255, 255, 0) 100%);
    position: fixed;
    width: 100%;
    height: 80px;
    display: flex;
    z-index: 100;
    padding-top: 5px;
}

header .inner {
    display: flex;
    width: 90%;
    margin: 0 auto;
    justify-content: space-between;
    align-items: center;
}

header ul {
    display: flex;
    justify-content: space-between;
    width: 400px;
}

header li {
    list-style: none;
}

header a {
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-weight: 300;
}

header h3 {
    color: white;
}

/* ----------------------------- CTA ----------------------------- */

button {
    background-color: #01011D;
    color: #fff;
    border: none;
    border-radius: 30px;
    padding: 10px 20px;
    font-size: 15px;
    cursor: pointer;
    transition: 0.3s;
}

/*  bouton hover  */

button:hover {
    background-color: #fff;
    color: #01011D;
}


/* ----------------------------- DISPLAY ----------------------------- */

.display {
    height: 90vh;
    background-image: url(img/arret-bus.png);
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    margin-bottom: 100px;
}

.display .text {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.display p {
    width: 400px;
    text-align: center;
}

.display h2 {
    text-align: center;
}

.display button {
    margin-top: 10px;
}

/*  Bus  */

.display .bus {
    position: absolute;
    bottom: -80px;
    min-width: 100%;
    left: -10%;
}


/* ----------------------------- SERVICE ----------------------------- */

.service {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 4;
}

.service p, .service h2 {
    color: #01011D;
}

.service h2 {
    width: 90%;
}

.service p {
    margin-top: 30px;
    width: 80%;
}

.service .inner {
    position: relative;
    width: fit-content;
    margin: auto;
}

.portes {
    display: flex;
    position: relative;
    z-index: 2;
}

.portes img {
    display: block;
    height: 70vh;
    width: auto;
    margin-top: -2px;
    margin-bottom: -2px;
}

.service .text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3rem;
    text-align: center;
    background: #F1DCFF;
}

/*  Pour enlever espace entre les portes  */

.porte-gauche {
    margin-right: -3px;
}

.porte-droite {
    margin-left: -3px;
}

/*  degradé  */

.service::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -150px;
    width: 100%;
    height: 200px;
    background: #01011D;
    background: linear-gradient(180deg,rgba(1, 1, 29, 1) 25%, rgba(255, 255, 255, 0) 90%);
    pointer-events: none;
    z-index: 5;
}

/* ----------------------------- LIGNES ----------------------------- */

.lignes-section {
    height: 100vh;
    position: relative;
    background: #073770;
    background-image: url(img/fenetre.png);
    background-repeat: no-repeat;
    background-size: auto 90%;
    background-position: center top;
    z-index: 3;
}

/*  bulle  */

.ligne {
    background-color: #5A1E82;
    padding: 10px 30px;
    border-radius: 35px;
    text-align: center;
}

/*  couleurs  */

#rouge {
    background-color: #E2001D;
}

#jaune {
    background-color: #D2DB4A;
}

#rose-fonce {
    background-color: #B82F89;
}

#bleu-clair {
    background-color: #00ACE7;
}

#bleu-fonce {
    background-color: #008CBE;
}

#vert-clair {
    background-color: #00A828;
}

#vert-fonce {
    background-color: #006E3D;
}

#brown {
    background-color: #84471C;
}

#jaune-fonce {
    background-color: #F5A300;
}

#teal {
    background-color: #00B0A4;
}

#teal-fonce {
    background-color: #005F61;
}

#teal-clair {
    background-color: #89CBBE;
}

#rose {
    background-color: #EC619F;
}

#rose-clair {
    background-color: #FF9BAA;
}

#orange {
    background-color: #FF7E00;
}

/*  Sections  */

.urbaines, .regional, .trains, .lignes-section .text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100vw;
}

.lignes-section .container {
    display: flex;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 400vw;
}

.urbaines h2, .regional h2, .trains h2 {
    margin-bottom: 20px;
}

/* liste bulles */

.liste-urbaine, .liste-regionale {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.liste-trains {
    display: flex;
    justify-content: center;
    gap: 5px;
}

/* decor */
.lignes-section .homme {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 80%;
    z-index: 3;
}

.lignes-section .poteau {
    position: absolute;
    bottom: 0;
    right: 5%;
    height: 100%;
    z-index: 3;
}

/*  degradé  */

.lignes-section::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -100px;
    width: 100%;
    height: 200px;
    background: #ffffff;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(7, 55, 112, 1) 40%, rgba(7, 55, 112, 1) 70%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 5;
}

/* ----------------------------- DECOUVRIR ----------------------------- */

.decouvrir {
    background: #004DCC;
    background: radial-gradient(circle, rgb(5, 70, 175) 0%, rgba(11, 59, 127, 1) 50%);
    height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
}

.decouvrir .inner {
    width: 80%;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.decouvrir .text {
    width: 50%;
    max-width: 500px;
}

.decouvrir h2,
.decouvrir p {
    text-align: center;
}

.decouvrir p {
    margin-top: 50px;
}

/*  video  */

.decouvrir .vid-generale {
    position: relative;
    width: 60%;
}

/*  main  */

.decouvrir img {
    width: 100%;
    display: block;
}

.vid-generale .video-main {
    width: 100%;
    display: block;
}

.decouvrir .vid-generale .video-main {
    position: absolute;
    top: 16%;
    left: 9%;
    width: 59%;
    height: auto;
    z-index: 2;
    object-fit: cover;
}

/* Degrade */

.decouvrir::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -150px;
    width: 100%;
    height: 250px;
    background: #ffffff;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(6, 16, 29, 1) 40%, rgba(6, 16, 29, 1) 70%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 2;
}


/* ----------------------------- AVANTAGES ----------------------------- */

.avantages {
    background: #070772;
    background: radial-gradient(circle, rgb(3, 3, 93) 0%, rgba(6, 16, 29, 1) 50%);
    height: 100vh;
    position: relative;
    z-index: 1;
}

.avantages .inner {
    width: 100%;
    height: 100%;
    position: relative;
}

.avantage {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    margin: auto;
    opacity: 1;
}

.avantage.active {
    opacity: 1;
}

/* gauche */

.composition {
    position: relative;
    width: 600px;
    height: 408px;
}

/* Video*/

.capsule {
    width: 100%;
    height: 100%;
}

/* personnage */

.personnage {
    position: absolute;
    left: 0;
    bottom: -10;
    width: 300px;
    z-index: 2;
    pointer-events: none;
}

/* droite */

.avantage .text {
    width: 30%;
    padding: 0 100px;
}

.avantage .text h2 {
    width: 100%;
    text-align: center;
}

.avantage .text p {
    width: 100%;
    text-align: center;
    margin-top: 50px;
}

/*  degradé  */

.avantages::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -150px;
    width: 100%;
    height: 400px;
    background: #ffffff;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(6, 16, 29, 1) 30%, rgba(6, 16, 29, 1) 70%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 2;
}

/* ----------------------------- TPG + ----------------------------- */

.app {
    background: #061651;
    background: radial-gradient(circle,rgb(21, 44, 126) 0%, rgba(17, 59, 184, 1) 45%);
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 100px;
}

.app .bus {
    width: 800px;
}

.app .fleche {
    width: 30px;
}

.app .inner {
    display: flex;
    flex-direction: column;
    position: absolute;
    justify-content: center;
    align-items: center;
}

.app p {
    width: 60%;
    text-align: center;
    margin: 40px 0;
}

/* ----------------------------- FOOTER ----------------------------- */

footer {
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

footer .inner {
    display: flex;
    flex-direction: column;
    position: absolute;
    justify-content: center;
    align-items: center;
}

footer p {
    text-align: center;
}

footer .logos {
    display: flex;
    justify-content: space-around;
}

footer h2 {
    text-align: center;
}

footer .fin {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
}