/* ===============================
   CONTAINER
================================= */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

img {
    width: 100%;
    height: auto;
    display: block;
}
    
/* ================================================
   Hero Section
================================================ */
.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 2rem;
    background: url('/assets/images/home/hero.png') no-repeat center center/cover;
    color: var(--hero-text-h);
}

.hero h1 {
    font-size: var(--h1-size);
    margin-bottom: 20px;
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

.hero p {
    font-size: 1.2rem;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* ===============================
   PRESENTATION
================================= */
/* -- Common style ------------------------------*/
.presentation {
    margin: 10px 0 60px;
    text-align: center;
    padding: 30px 20px;
    border-radius: 14px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.04);
    background: rgb(245, 245, 245);
    color: rgb(60, 60, 60);
}

.presentation h2 {
    font-size: 1.5rem;
    margin-bottom: 10px;

}

.presentation p {
    max-width: 700px;
    margin: 0 auto;
}



/* ===============================
   UNIVERS
================================= */
/* -- Common style ------------------------------*/

.univers {
    margin: 70px 0;
}

.univers h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    font-size: 1.6rem;
    margin-bottom: 35px;
    font-weight: 600;
}

.univers h2::before,
.univers h2::after {
    content: "";
    flex: 1;
    height: 1px;
    opacity: 0.5;
}

.univers h2 span {
    padding: 8px 20px;
    border-radius: 999px;
}

/* -- taylor style 1 -----------------------------*/
.univers.style1 h2 {
    color: var(--S1-text-color-dark);
}

.univers.style1 h2::before,
.univers.style1 h2::after {
    background: linear-gradient( 90deg, transparent, var(--S1-text-color-medium), transparent );
}

.univers.style1 h2 span {
    background: var(--S1-bg-color-light);
}

/* -- taylor style 2 -----------------------------*/
.univers.style2 h2 {
    color: var(--S2-text-color-dark);
}

.univers.style2 h2::before,
.univers.style2 h2::after {
    background: linear-gradient( 90deg, transparent, var(--S2-text-color-medium), transparent );
}

.univers.style2 h2 span {
    background: var(--S2-bg-color-light);
}

/* -- taylor style 3 -----------------------------*/
.univers.style3 h2 {
    color: var(--S3-text-color-dark);
}

.univers.style3 h2::before,
.univers.style3 h2::after {
    background: linear-gradient( 90deg, transparent, var(--S3-text-color-medium), transparent );
}

.univers.style3 h2 span {
    background: var(--S3-bg-color-light);
}

/* -- taylor style 4 -----------------------------*/
.univers.style4 h2 {
    color: var(--S4-text-color-dark);
}

.univers.style4 h2::before,
.univers.style4 h2::after {
    background: linear-gradient( 90deg, transparent, var(--S4-text-color-medium), transparent );
}

.univers.style4 h2 span {
    background: var(--S4-bg-color-light);
}



/* ===============================
   GRID CLUSTERS
================================= */
.clusters {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

/* ===============================
   CARD
================================= */
/* -- Common style ------------------------------*/
.cluster-card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cluster-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.cluster-card img {
    height: 160px;
    object-fit: cover;
}

.cluster-card h3 {
    font-size: 1.2rem;
    padding: 15px 15px 5px;
}

.cluster-card p {
    font-size: 0.95rem;
    padding: 0 15px 10px;
}

/* -- taylor style 1 ------------------------------*/
.cluster-card.style1 {
    background: var(--S1-bg-color-light);  
}
.cluster-card.style1 h3 {
    color: var(--S1-text-color-dark);  
}
.cluster-card.style1 p {
    color: var(--S1-text-color-dark);  
}
/* -- taylor style 2 ------------------------------*/
.cluster-card.style2 {
    background: var(--S2-bg-color-light);  
}

.cluster-card.style2 h3 {
    color: var(--S2-text-color-dark);  
}

.cluster-card.style2 p {
    color: var(--S2-text-color-dark);  
}
/* -- taylor style 3 ------------------------------*/
.cluster-card.style3 {
    background: var(--S3-bg-color-light);  
}

.cluster-card.style3 h3 {
    color: var(--S3-text-color-dark);  
}

.cluster-card.style3 p {
    color: var(--S3-text-color-dark);  
}
/* -- taylor style 4 ------------------------------*/
.cluster-card.style4 {
    background: var(--S4-bg-color-light);  
}

.cluster-card.style4 h3 {
    color: var(--S4-text-color-dark);  
}

.cluster-card.style4 p {
    color: var(--S4-text-color-dark);  
}

/* ===============================
   LINKS PRODUITS
================================= */
/* -- Common style ------------------------------*/
.links {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 15px 15px;
}

.links a {
    font-size: 0.9rem;
    text-decoration: none;
}

.links a:hover {
    text-decoration: underline;
}

/* -- taylor style 1 ------------------------------*/
.links.style1 a {
    color: var(--S1-text-color-medium);  
}
/* -- taylor style 2 ------------------------------*/
.links.style2 a {
    color: var(--S2-text-color-medium);  
}
/* -- taylor style 3 ------------------------------*/
.links.style3 a {
    color: var(--S3-text-color-medium);  
}
/* -- taylor style 4 ------------------------------*/
.links.style4 a {
    color: var(--S4-text-color-medium);  
}


/* ===============================
   BUTTON
================================= */
/* -- Common style ------------------------------*/
.btn-secondary {
    display: block;
    margin: 0 15px 15px;
    padding: 10px;
    text-align: center;
    border-radius: 8px;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background 0.2s ease;
}


/* -- taylor style 1 ------------------------------*/
.btn-secondary.style1 {
    background-color: var(--S1-bg-color-dark);  
    color: var(--S1-text-color-light);  
}

.btn-secondary.style1:hover {
    background-color: var(--S1-text-color-medium);  
}
/* -- taylor style 2 ------------------------------*/
.btn-secondary.style2 {
    background-color: var(--S2-bg-color-dark);
    color: var(--S2-text-color-light);
}

.btn-secondary.style2:hover {
    background-color: var(--S2-text-color-medium);
}
/* -- taylor style 3 ------------------------------*/
.btn-secondary.style3 {
    background-color: var(--S3-bg-color-dark);
    color: var(--S3-text-color-light);
}

.btn-secondary.style3:hover {
    background-color: var(--S3-text-color-medium);
}
/* -- taylor style 4 ------------------------------*/
.btn-secondary.style4 {
    background-color: var(--S4-bg-color-dark);
    color: var(--S4-text-color-light);
}

.btn-secondary.style4:hover {
    background-color: var(--S4-text-color-medium);
}



/* ===============================
   TABLET (≥ 768px)
================================= */
@media (min-width: 768px) {

    .hero h1 {
        font-size: 2.4rem;
    }

    .presentation h2 {
        font-size: 1.8rem;
    }

    .clusters {
        grid-template-columns: repeat(2, 1fr);
    }

    .cluster-card img {
        height: 180px;
    }
}

/* ===============================
   DESKTOP (≥ 1024px)
================================= */
@media (min-width: 1024px) {

    .hero {
        padding: 80px 20px;
    }

        .hero h1 {
            font-size: 2.8rem;
        }

    .univers h2 {
        font-size: 2rem;
    }

    .clusters {
        grid-template-columns: repeat(3, 1fr);
    }

    .cluster-card img {
        height: 200px;
    }

    .cluster-card h3 {
        font-size: 1.3rem;
    }

    .cluster-card p {
        font-size: 1rem;
    }
}