/* ================================================
   Variables Couleurs
================================================ */
:root { /* Hero & Accueil */
    --hero-text-h: #ffffff;
    /*Style Global*/
    --text-green-pros: #1A6B42;
    --text-red-cons: #C0392B;
    /* Style 1 */
    --S1-bg-color-hero: 0 85 87;
    --S1-text-color-dark: #1E3A5F;
    --S1-text-color-medium: #3C74BE;
    --S1-text-color-light: #fff;
    --S1-bg-color-dark: #1E3A5F;
    --S1-bg-color-medium: #3C74BE;
    --S1-bg-color-light: #D7E4EF;
    --S1-bg-color-very-light: #fff;
    /* Style 1 
    --S1-bg-color-hero: 0 85 87;
    --S1-text-color-dark: #3D514D;
    --S1-text-color-medium: #60807A;
    --S1-text-color-light: #fff;
    --S1-bg-color-dark: #3D514D;
    --S1-bg-color-medium: #60807A;
    --S1-bg-color-light: #E3E3E3;
    --S1-bg-color-very-light: #fff;*/
    /* Style 2 */
    --S2-bg-color-hero: 3 69 58;
    --S2-text-color-dark: #03453A;
    --S2-text-color-medium: #06937B;
    --S2-text-color-light: #fff;
    --S2-bg-color-dark: #03453A;
    --S2-bg-color-medium: #06937B;
    --S2-bg-color-light: #E1FEF9;
    --S2-bg-color-very-light: #fff;
    /* Style 3 */
    --S3-bg-color-hero: 61 81 77;
    --S3-text-color-dark: #3D514D;
    --S3-text-color-medium: #60807A;
    --S3-text-color-light: #fff;
    --S3-bg-color-dark: #3D514D;
    --S3-bg-color-medium: #60807A;
    --S3-bg-color-light: #E8EEEC;
    --S3-bg-color-very-light: #fff;
    /* Style 4 */
    --S4-bg-color-hero: 50 25 77;
    --S4-text-color-dark: #3D514D;
    --S4-text-color-medium: #60807A;
    --S4-text-color-light: #fff;
    --S4-bg-color-dark: #3D514D;
    --S4-bg-color-medium: #60807A;
    --S4-bg-color-light: #E8EEEC;
    --S4-bg-color-very-light: #fff;
    /* cross cluster */
    /* Typographie */
    --h1-size: 2rem;
    --h2-size: 1.0rem;
}


/* ================================================
   Page principle
================================================ */

body {
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
}

.container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1.2rem;
}

a {
    text-decoration: none;
}

.footer a {
    text-decoration: none;
}


/* ================================================
   Logo MonTopChoix
================================================ */
.site-name {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    letter-spacing: 0;
}

.site-mon,.site-choix {
    color: #1E3A5F;
}

.site-top {
    color: #F4B400;

}

.site-fr {
    color: #1E3A5F;
}


/* ================================================
   Navigation Section - Mega menu centré
================================================ */
.mega-menu {
    left: 0;
    right: 0;
}

.dropdown-menu {
    margin-top: 0;
}

.nav-item.dropdown.show .mega-menu {
    display: block;
}

.navbar-brand {
    font-weight: 700;
}

.navbar-nav {
    flex: 1;
    justify-content: center;
}

#mainNavbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    transition: transform .25s ease;
}

.navbar-hidden {
    transform: translateY(-100%);
}




/* ================================================
   Navigation Section - Mega menu centré
================================================ */

/* Structure

.mega-menu {
    left: 0;
    right: 0;
}

.dropdown-menu {
    margin-top: 0;
}

.nav-item.dropdown.show .mega-menu {
    display: block;
}

.navbar-brand {
    font-weight: 700;
}

.navbar-nav {
    flex: 1;
    justify-content: center;
}

#mainNavbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    transition: transform .25s ease;
    background-color: #ffffff !important;
    border-bottom: 1px solid rgba(30, 58, 95, 0.08);
}

.navbar-hidden {
    transform: translateY(-100%);
} */

/* ================================================
   Couleurs & Typographie
================================================ */

/* Liens principaux navbar */

#mainNavbar .nav-link {
    color: #1E3A5F !important;
    font-weight: 500;
    transition: color 0.25s ease, opacity 0.25s ease;
}

/* Hover liens principaux */

#mainNavbar .nav-link:hover,
#mainNavbar .nav-link:focus {
    color: #2E5B8F !important;
}

/* Titres colonnes mega menu */

#mainNavbar h6 {
    color: #1E3A5F;
    font-weight: 700;
}

/* Liens dropdown classiques */

#mainNavbar .dropdown-item {
    color: #1E3A5F;
    transition: color 0.2s ease, background-color 0.2s ease;
    border-radius: 8px;
}

/* Hover dropdown */

#mainNavbar .dropdown-item:hover {
    background-color: rgba(30, 58, 95, 0.05);
    color: #1E3A5F;
}

/* Liens "Voir tous les produits" */

#mainNavbar .dropdown-item.fw-bold {
    color: #4A7DB8 !important;
    font-weight: 700;
}

/* Hover liens importants */

#mainNavbar .dropdown-item.fw-bold:hover {
    color: #2E5B8F !important;
    background-color: rgba(74, 125, 184, 0.08);
}










/* ================================================
   Hero Section
================================================ */
/* -- Common style ------------------------------*/
.hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 2rem;
    min-height: 320px;
    color: var(--hero-text-h);
    overflow: hidden;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
}

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

/* -- taylor style - Univers : Bien-être & relaxation -----------------*/
.hero.univers1 {
    background: url('/assets/images/global/hero_univers1.png') no-repeat center center/cover;
}

.hero.style1::before {
    background: linear-gradient( to right, rgb(var(--S1-bg-color-hero) / 0.30) 0%, rgb(var(--S1-bg-color-hero) / 0.70) 50%, rgb(var(--S1-bg-color-hero) / 0.30) 100% );
}

/* -- taylor style - Univers : XXX -----------------*/
.hero.univers2 {
    background: url('/assets/images/cluster_sommeil_relaxation/hero.png') no-repeat center center/cover;
}

.hero.style2::before {
    background: linear-gradient( to right, rgb(var(--S2-bg-color-hero) / 0.30) 0%, rgb(var(--S2-bg-color-hero) / 0.70) 50%, rgb(var(--S2-bg-color-hero) / 0.30) 100% );
}

/* -- taylor style - Univers : XXX -----------------*/
.hero.univers3 {
    background: url('/assets/images/cluster_confort_ergonomie_maison/hero.png') no-repeat center center/cover;
}

.hero.style3::before {
    background: linear-gradient( to right, rgb(var(--S3-bg-color-hero) / 0.30) 0%, rgb(var(--S3-bg-color-hero) / 0.70) 50%, rgb(var(--S3-bg-color-hero) / 0.30) 100% );
}

/* -- taylor style - Univers : XXX -----------------*/
.hero.univers4 {
    background: url('/assets/images/cluster_atmosphere_sensorielle_maison/hero.png') no-repeat center center/cover;
}

.hero.style4::before {
    background: linear-gradient( to right, rgb(var(--C4-bg-color-hero) / 0.30) 0%, rgb(var(--C4-bg-color-hero) / 0.70) 50%, rgb(var(--C4-bg-color-hero) / 0.30) 100% );
}




/* ||||||||||||||||||||||||||- header |||||||||||||||||||||||||||||||||||||||||||||||||||-*/
.page-header {
    padding: 50px 20px 35px;
    text-align: center;
    border-radius: 0px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04), 0 12px 30px rgba(0,0,0,0.06);
}

/* Titre */
.page-header h1 {
    margin: 0;
    font-size: clamp(1.7rem, 3.5vw, 2.5rem);
    line-height: 1.2;
    letter-spacing: -0.5px;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0,0,0,0.10);
}

/* -- taylor style home : ----------------------------------------------*/
.page-header.styleHome {
    background: linear-gradient( 135deg, #1E3A5F 0%, #294B77 100% );
    color: #FFFFFF;
}

/* -- taylor style 1 : ------------------------------------------------*/
.page-header.style1 {
    background: linear-gradient( 135deg, var(--S1-bg-color-dark) 0%, var(--S1-bg-color-medium) 100% );
    color: #FFFFFF;
}


/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||-*/


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

footer {
    background-color: var(--S1-bg-color-dark);
    color: var(--S1-text-color-light);
    text-align: center;
    padding: 30px 20px;
}

footer div {
    max-width: 1200px;
    margin: 0 auto;
}

footer nav {
    margin-bottom: 15px;
    font-size: 15px;
    line-height: 1.8;
}

footer a {
    color: #fff;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

footer a:hover {
    opacity: 0.7;
    text-decoration: underline;
}

footer p {
    margin: 0;
    font-size: 14px;
    color: #fff;
}

/* Desktop */
@media (min-width: 992px) {
    .mega-menu {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .mega-menu {
        position: static;
        width: 100%;
    }

    .navbar-collapse {
        max-height: 80vh;
        overflow: auto;
    }

    #mainNavbar {
        position: sticky;
        transform: none !important;
    }
    body {
        line-height: 1;
        font-size: 0.9rem;
    }

}