@charset "UTF-8";
/* CSS Document */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Georgia, serif;
    background:#ececec;
    color:#111;
    overflow-x:hidden;
}

/* ==========================================
   HEADER
========================================== */

.top-bar{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:70px;
    background:#000;
    z-index:9999;

    display:flex;
    justify-content:center;
    align-items:center;

    animation:slideDown .8s ease forwards;
}

.top-bar img:first-child{
    height:30px;
    margin-right:20px;
}

/*.top-bar img:last-child{
    height:18px;
    width:auto;
}*/

/*.top-bar img:last-child{
    width:90px;
    height:auto;
}*/

@keyframes slideDown{
    from{
        transform:translateY(-100%);
    }
    to{
        transform:translateY(0);
    }
}

.logo-kia{
    width:95px;
    height:auto;
}

/* ==========================================
   HERO
========================================== */

.article-hero{
    height:65vh;
    min-height:500px;
    overflow:hidden;
}

.article-hero img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* ==========================================
   WRAPPER
========================================== */

.article-wrapper{
    padding:0 20px 100px;
}

/* ==========================================
   BLOC BLANC
========================================== */

.article-card{

    position:relative;

    max-width:1100px;

    margin:-160px auto 0;

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(8px);

    padding:
        70px
        60px
        90px;

    box-shadow:
        0 15px 40px rgba(0,0,0,.08);
	
	background:rgba(255,255,255,.82);
backdrop-filter:blur(12px);
	
}

/* ==========================================
   IMAGE ARTICLE
========================================== */

.article-image{

    display:flex;
    justify-content:center;

    margin-bottom:60px;
}

.article-image img{

    width:100%;
    max-width:700px;

    display:block;
}

/* ==========================================
   CONTENU
========================================== */

.article-content{

    max-width:700px;
    margin:auto;

    font-size:1.2rem;
    line-height:1.2;
}

.article-content h1{

    font-family:Arial, Helvetica, sans-serif;

    font-size:2.5rem;
    line-height:1.15;

    margin-bottom:30px;
}
	
	.article-content h2{

    font-family:Arial, Helvetica, sans-serif;

    font-size:1.8rem;
    line-height:1.15;

    margin-bottom:15px;
}

.article-content p{
    margin-bottom:30px;
}

.article-content p:first-of-type{

    font-size:1.3rem;
    font-weight:bold;

    line-height:1.2;
}
	
	.CTA_article {
		display: block;
		background-color: #000000;
		padding: 4%;
		color: #FFFFFF;
		font-weight: bold;
		font-style: italic;
	}



	
	.CTA_article a {
		color: #FFFFFF;
	}

/* ==========================================
   FOOTER
========================================== */

footer{

    background:#000;

    text-align:center;

    padding:60px 20px;
}

footer img{

    width:120px;

    margin-bottom:25px;
}

footer p{

    color:#ccc;

    max-width:900px;

    margin:auto;

    line-height:1.7;
}

.mentions{
    margin-top:20px;
    font-size:.85rem;
}

/* ==========================================
   MOBILE
========================================== */

@media(max-width:768px){

    .top-bar{
        height:60px;
    }

    .top-bar img:first-child{
        height:24px;
    }

    .top-bar img:last-child{
        width:70px;
    }

    .article-hero{
        min-height:320px;
        height:45vh;
    }

    .article-card{

        margin-top:-60px;

        padding:
            25px
            20px
            50px;
    }

    .article-image{
        margin-bottom:30px;
    }

    .article-content{

        font-size:1.05rem;
    }

    .article-content h1{

        font-size:2rem;
    }
	
	.article-content h2{

        font-size:1.2rem;
    }

    .article-content p:first-of-type{

        font-size:1.15rem;
    }
	
	.logo-kia{
    width:55px;
}
}
	
	/* ==========================
   PARALLAX HERO
========================== */

.article-hero img{
    will-change:transform;
}

/* ==========================
   SLIDE LEFT IMAGES
========================== */

.article-image{
    opacity:0;
    transform:translateX(80px);
    transition:
        opacity .9s ease,
        transform .9s ease;
}

.article-image.is-visible{
    opacity:1;
    transform:translateX(0);
}


/* ==========================
   BOUTON ACCUEIL
========================== */

.home-btn{
    position:absolute;
    right:25px;
    top:50%;
    transform:translateY(-50%);

    color:#fff;
    text-decoration:none;

    font-size:24px;
    line-height:1;

    transition:opacity .3s ease;
}

.home-btn:hover{
    opacity:.7;
}


/* ==========================
   PROMO POPUP
========================== */

.promo-popup{

    position:fixed;

    top:100px;
    right:0px;

    width:320px;

    background:#333;

    padding:35px;

    z-index:9998;

    box-shadow:
        0 12px 35px rgba(0,0,0,.18);

    transform:translateX(120%);
    animation:popupSlideIn .8s ease forwards;
    animation-delay:1s;
}

@keyframes popupSlideIn{

    to{
        transform:translateX(0);
    }
}

.promo-content p{

    color:#fff;

    font-family:Georgia, serif;

    font-size:1.4rem;

    line-height:1.2;

    margin-bottom:40px;
}

.promo-link{

    color:#fff;

    text-decoration:none;

    font-family:Georgia, serif;

    font-size:1.2rem;

    font-weight:bold;

    display:inline-flex;
    align-items:center;
    gap:10px;
}

.promo-link span{

    width:38px;
    height:38px;

    border-radius:50%;

    background:#fff;
    color:#333;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:20px;
}

.promo-close{

    position:absolute;

    top:12px;
    right:12px;

    width:30px;
    height:30px;

    border:none;

    border-radius:50%;

    background:#fff;

    color:#333;

    cursor:pointer;

    font-size:24px;
    line-height:1;
}

@media(max-width:768px){

    .promo-popup{

        width:calc(100% - 30px);

        right:15px;
        top:75px;

        padding:25px;
    }

    .promo-content p{

        font-size:1.5rem;
        margin-bottom:25px;
    }
}

/* CORRECTION MOBILE POPUP + DÉCALAGE */

html,
body{
    width:100%;
    overflow-x:hidden;
}

@media(max-width:768px){

    .top-bar{
        left:0;
        right:0;
        width:auto;
    }

    .promo-popup{
        left:15px;
        right:15px;
        width:auto;
        max-width:none;

        top:75px;

        padding:30px 25px;

        transform:translateX(120%);
    }

    .promo-content p{
        font-size:1.8rem;
        line-height:1.15;
    }

    .promo-link{
        font-size:1.35rem;
    }

    .promo-close{
        right:12px;
        top:12px;
    }
}