/*==================================================
ARCHIVES.CSS
2B ÉVÉNEMENT
==================================================*/

:root{

    --primary:#0B3C5D;
    --secondary:#F39C12;
    --light:#f8f9fa;
    --dark:#222;
    --white:#fff;
    --shadow:0 15px 35px rgba(0,0,0,.12);

}

/*==================================================
GENERAL
==================================================*/

body{

    background:#f5f7fa;
    font-family:'Poppins',sans-serif;
    color:#444;

}

section{

    padding:90px 0;

}

.section-title{

    font-size:2.8rem;

    font-weight:700;

    color:var(--primary);

    margin-bottom:20px;

}

.section-subtitle{

    color:#666;

    font-size:1.15rem;

    max-width:800px;

    margin:auto;

}

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

.archive-hero{

    background:linear-gradient(rgba(11,60,93,.80),
                               rgba(11,60,93,.80)),
               url("../images/archive-banner.jpg") center/cover;

    color:#fff;

    text-align:center;

    padding:160px 20px;

}

.archive-hero h1{

    font-size:4rem;

    font-weight:700;

}

.archive-hero p{

    font-size:1.25rem;

    margin:30px auto;

    max-width:850px;

}

.archive-btn{

    background:var(--secondary);

    color:#fff;

    padding:15px 35px;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.archive-btn:hover{

    background:#d98408;

    color:#fff;

    transform:translateY(-3px);

}

/*==================================================
TIMELINE
==================================================*/

.timeline{

    position:relative;

    max-width:900px;

    margin:auto;

}

.timeline::before{

    content:"";

    position:absolute;

    left:50%;

    width:4px;

    top:0;

    bottom:0;

    background:var(--secondary);

    transform:translateX(-50%);

}

.timeline-item{

    width:50%;

    padding:30px;

    position:relative;

}

.timeline-item:nth-child(odd){

    left:0;

    text-align:right;

}

.timeline-item:nth-child(even){

    left:50%;

}

.timeline-content{

    background:#fff;

    border-radius:18px;

    padding:25px;

    box-shadow:var(--shadow);

    transition:.35s;

}

.timeline-content:hover{

    transform:translateY(-8px);

}

.timeline-year{

    color:var(--secondary);

    font-weight:700;

    font-size:1.3rem;

}

/*==================================================
ARCHIVE CARDS
==================================================*/

.archive-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:.35s;

    margin-bottom:40px;

}

.archive-card:hover{

    transform:translateY(-10px);

}

.archive-card img{

    width:100%;

    display:block;

}

.archive-body{

    padding:25px;

}

.archive-body h3{

    color:var(--primary);

    margin-bottom:15px;

}

.archive-body p{

    color:#666;

    line-height:1.7;

}

/*==================================================
SCREENSHOT
==================================================*/

.screenshot{

    border:10px solid white;

    border-radius:20px;

    box-shadow:var(--shadow);

    transition:.35s;

}

.screenshot:hover{

    transform:scale(1.03);

}

.photo-caption{

    text-align:center;

    margin-top:15px;

    color:#777;

    font-style:italic;

}

/*==================================================
COMPARE
==================================================*/

.compare{

    background:white;

    border-radius:20px;

    padding:50px;

    box-shadow:var(--shadow);

}

.compare table{

    width:100%;

}

.compare th{

    background:var(--primary);

    color:white;

    padding:18px;

}

.compare td{

    padding:18px;

    border-bottom:1px solid #eee;

}

/*==================================================
CTA
==================================================*/

.archive-cta{

    text-align:center;

    background:var(--primary);

    color:white;

    border-radius:25px;

    padding:70px 30px;

}

.archive-cta h2{

    color:white;

    margin-bottom:20px;

}

.archive-cta p{

    max-width:700px;

    margin:auto auto 35px;

}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:992px){

.timeline::before{

left:25px;

}

.timeline-item{

width:100%;

left:0!important;

padding-left:70px;

text-align:left!important;

}

.archive-hero h1{

font-size:2.8rem;

}

}

@media(max-width:768px){

.section-title{

font-size:2rem;

}

.archive-hero{

padding:120px 20px;

}

.archive-hero h1{

font-size:2.2rem;

}

.compare{

padding:20px;

overflow:auto;

}

}/*==================================================
INTRO ARCHIVES
==================================================*/

.archive-intro{

    background:white;

}

.section-mini{

    display:inline-block;

    background:#F39C12;

    color:white;

    padding:8px 18px;

    border-radius:50px;

    font-size:.85rem;

    font-weight:600;

    margin-bottom:20px;

}

.archive-intro p{

    color:#666;

    line-height:1.9;

    margin-bottom:18px;

}/*==========================================
FIN DES ARCHIVES
==========================================*/

.archives-ending{

    background:
    linear-gradient(rgba(11,60,93,.90),
    rgba(11,60,93,.90)),
    url("../images/hero.jpg");

    background-size:cover;
    background-position:center;

    padding:140px 20px;

    text-align:center;

    color:white;

}

.archives-ending h2{

    color:white;

    font-family:'Poppins',sans-serif;

    font-size:3rem;

    font-weight:700;

    margin:25px 0;

}

.archives-ending p{

    max-width:900px;

    margin:0 auto 45px;

    font-size:1.2rem;

    line-height:1.9;

    opacity:.95;

}

.archives-buttons{

    display:flex;

    justify-content:center;

    gap:25px;

    flex-wrap:wrap;

}

.archive-btn-secondary{

    color:white;

    border:2px solid white;

}

.archive-btn-secondary:hover{

    background:white;

    color:#0B3C5D;

}

@media(max-width:768px){

    .archives-ending h2{

        font-size:2rem;

    }

}