@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@300;400;500;600&display=swap');

:root{

    --blue-night:#17263B;
    --blue:#243B5A;
    --gold:#D7B77A;
    --ivory:#F7F3EA;
    --text:#455367;
}
/* RESET */
*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Inter",sans-serif;

    background:var(--ivory);

    color:var(--text);

    line-height:1.7;

}

.container{

    width:min(1062px,92%);

    margin:auto;
}
/* PAGE */
#archives-page{

    padding:126px 0 45px;
}
/* HEADER */
.page-header{

    text-align:center;

    margin-bottom:49.5px;

}

.page-header h1{

    font-family:"Cormorant Garamond",serif;

    font-size:clamp(2.34rem,5vw,3.42rem);

    font-weight:600;

    color:var(--blue-night);

    line-height:1.1;

    margin-top:18px;

    margin-bottom:18px;

}

.title-divider{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:16.2px;

}

.title-divider span{

    width:81px;

    height:0.9px;

    background:rgba(215,183,122,.6);

}

.ornament{

    color:var(--gold);
}
/* OUTILS */
.archives-tools{

    margin-bottom:40.5px;

}

.search input{

    width:100%;

    height:46.8px;

    padding:0 21.6px;

    border-radius:27px;

    border:0.9px solid rgba(215,183,122,.3);

    background:white;

    font-family:"Inter",sans-serif;

    outline:none;

    transition:.3s;

}

.search input:focus{

    border-color:var(--gold);

    box-shadow:
    0 0 0 2.7px rgba(215,183,122,.12);
}
/* ANNEES */
.annees{

    display:flex;

    flex-wrap:wrap;

    gap:9px;

    margin-top:18px;

}

.annees button{

    padding:7.2px 18px;

    border-radius:899.1px;

    border:0.9px solid rgba(215,183,122,.4);

    background:transparent;

    color:var(--blue);

    cursor:pointer;

    transition:.25s;

}

.annees button:hover{

    background:var(--gold);

    color:white;

}

.annees button.active{

    background:var(--blue-night);

    color:white;

    border-color:var(--blue-night);
}
/* ANNEE */
.year-section{

    margin-bottom:54px;

    animation:fadeUp .6s ease both;

}

.year-title{

    display:flex;

    align-items:center;

    gap:22.5px;

    margin-bottom:31.5px;

}

.year-title h2{

    font-family:"Cormorant Garamond",serif;

    font-size:2.52rem;

    color:var(--blue-night);

    font-weight:600;

}

.year-title span{

    flex:1;

    height:0.9px;

    background:rgba(215,183,122,.4);
}
/* TIMELINE */
.timeline{

    position:relative;

    padding-left:58.5px;

}

.timeline::before{

    content:"";

    position:absolute;

    left:9px;

    top:0;

    bottom:0;

    width:1.8px;

    background:

    linear-gradient(

        to bottom,

        rgba(215,183,122,.15),

        rgba(215,183,122,.75),

        rgba(215,183,122,.15)

    );
}
/* ARCHIVE */
.archive{

    position:relative;

    width:100%;

    margin-bottom:25.2px;

}

.timeline-dot{

    position:absolute;

    left:-55.8px;

    top:25.2px;

    width:13.5px;

    height:13.5px;

    background:var(--gold);

    border-radius:50%;

    border:3.6px solid var(--ivory);

    box-shadow:

    0 0 0 1.8px rgba(215,183,122,.45);

    transition:.3s;

}

.archive:hover .timeline-dot{

    transform:scale(1.15);

}

/* CONTENU ARCHIVE */

.archive-card{

    width:100%;

    padding:25.2px 31.5px;

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

    border:0.9px solid rgba(215,183,122,.22);

    border-radius:12.6px;

    box-shadow:

    0 7.2px 22.5px rgba(23,38,59,.04);

    transition:.3s;

}

.archive-card:hover{

    background:white;

    transform:translateX(5.4px);

    border-color:rgba(215,183,122,.5);

    box-shadow:

    0 13.5px 31.5px rgba(23,38,59,.08);

}

.archive-date{

    color:var(--gold);

    font-size:0.765rem;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:0.072em;

    margin-bottom:10.8px;

}

.archive-card h3{

    font-family:"Cormorant Garamond",serif;

    font-size:1.8rem;

    color:var(--blue-night);

    font-weight:600;

    line-height:1.2;

    margin-bottom:10.8px;

}

.card-divider{

    width:45px;

    height:1.8px;

    background:var(--gold);

    margin-bottom:13.5px;

}

.archive-card p{

    max-width:720px;

    font-size:0.855rem;

}

/* ANIMATION */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(18px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

/* TABLETTE */

@media(max-width:810px){

    #archives-page{

        padding:90px 0 54px;

    }

    .timeline{

        padding-left:40.5px;

    }

    .timeline-dot{

        left:-37.8px;

    }

}

/* MOBILE */

@media(max-width:585px){

    .page-header h1{

        font-size:2.07rem;

    }

    .title-divider span{

        width:45px;

    }

    .year-title h2{

        font-size:1.98rem;

    }

    .timeline{

        padding-left:27px;

    }

    .timeline::before{

        left:0;

    }

    .timeline-dot{

        left:-6.3px;

        width:11.7px;

        height:11.7px;

    }

    .archive-card{

        padding:19.8px;

    }

    .archive-card h3{

        font-size:1.44rem;

    }

}