/* =========================
   BANNER CATALOGUE
========================= */


.catalogue-banner{

height:450px;

background:
linear-gradient(
rgba(0,0,0,.55),
rgba(0,0,0,.55)
),
url("../images/catalogue-banner.jpg");

background-size:cover;

background-position:center;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

color:white;

}



.catalogue-banner span{

color:#ffccd5;

font-size:18px;

letter-spacing:2px;

text-transform:uppercase;

}



.catalogue-banner h1{

font-family:'Playfair Display',serif;

font-size:70px;

margin:20px 0;

}



.catalogue-banner p{

font-size:20px;

}









/* =========================
   INTRODUCTION CATALOGUE
========================= */


.catalogue-intro{

padding:100px 7%;

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}



.catalogue-text span{

color:var(--red);

font-weight:700;

text-transform:uppercase;

}



.catalogue-text h2{

font-family:'Playfair Display',serif;

font-size:45px;

margin:20px 0;

}



.catalogue-text p{

color:#666;

line-height:1.9;

margin-bottom:20px;

}



.catalogue-cover{

position:relative;

}



.catalogue-cover img{

height:600px;

object-fit:cover;

border-radius:30px;

box-shadow:

20px 20px 0 var(--green),
var(--shadow);

transition:.5s;

}



.catalogue-cover:hover img{

transform:translateY(-10px);

}









/* =========================
   VISIONNEUSE PDF
========================= */


.catalogue-viewer{

padding:100px 7%;

background:#fafafa;

}



.pdf-container{

background:white;

padding:25px;

border-radius:30px;

box-shadow:var(--shadow);

overflow:hidden;

}



.pdf-container iframe{

border:none;

border-radius:20px;

}









/* =========================
   ACTIONS CATALOGUE
========================= */


.catalogue-actions{

padding:80px 7%;

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}



.action-card{

background:white;

padding:40px 30px;

border-radius:30px;

text-align:center;

box-shadow:var(--shadow);

transition:.4s;

}



.action-card:hover{

transform:translateY(-12px);

}



.action-card i{

font-size:45px;

color:var(--green);

margin-bottom:20px;

}



.action-card h3{

font-size:25px;

margin-bottom:15px;

font-family:'Playfair Display',serif;

}



.action-card p{

color:#666;

line-height:1.7;

margin-bottom:25px;

}



.action-card a{

display:inline-block;

background:var(--green);

color:white;

padding:12px 30px;

border-radius:50px;

transition:.3s;

}



.action-card a:hover{

background:var(--red);

}









/* =========================
   CATEGORIES CATALOGUE
========================= */


.catalogue-categories{

padding:100px 7%;

}



.catalogue-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

}



.catalogue-card{

position:relative;

height:420px;

overflow:hidden;

border-radius:25px;

box-shadow:var(--shadow);

}



.catalogue-card img{

height:100%;

object-fit:cover;

transition:.6s;

}



.catalogue-card:hover img{

transform:scale(1.15);

}



.catalogue-card::after{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(
transparent,
rgba(0,0,0,.8)
);

}



.catalogue-card h3{

position:absolute;

bottom:80px;

left:25px;

color:white;

font-family:'Playfair Display',serif;

font-size:25px;

z-index:2;

}



.catalogue-card a{

position:absolute;

bottom:30px;

left:25px;

z-index:2;

color:white;

border-bottom:2px solid var(--red);

font-weight:600;

}









/* =========================
   ANIMATION
========================= */


.catalogue-card,
.action-card,
.catalogue-cover{

animation:fadeUp .8s ease;

}



@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}


to{

opacity:1;

transform:translateY(0);

}

}









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


@media(max-width:1100px){


.catalogue-grid{

grid-template-columns:repeat(2,1fr);

}



.catalogue-actions{

grid-template-columns:1fr;

}


}





@media(max-width:800px){


.catalogue-banner h1{

font-size:45px;

}



.catalogue-intro{

grid-template-columns:1fr;

}



.catalogue-cover img{

height:450px;

}



.catalogue-grid{

grid-template-columns:1fr;

}


}

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

footer{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 80px;
    flex-wrap: wrap;
    text-align: center;
    padding: 60px 20px;
}

footer div{
    display: flex;
    flex-direction: column;
    align-items: center;
}

footer h3,
footer h4{
    margin-bottom: 15px;
}

footer p,
footer a{
    text-align: center;
}

footer a{
    text-decoration: none;
    margin: 5px 0;
}

.copyright{
    text-align: center;
    padding: 20px;
}