/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Template: astra
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 5,700+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try it out on a free dummy site: https://zipwp.org/themes/astra/
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog
Version: 4.8.11.1738525273
Updated: 2025-02-02 19:41:13

*/

        :root {
            --primary-color: #B53B6A;
            --secondary-color: #333;
            --background-color: rgba(239, 239, 239, 0.38);
            --transition-duration: 0.5s;
            --border-radius: 12px;
            --box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }


/* home page + header */
.hero-background {
            width: 100%;
            max-height: 100%;
	        max-width: 100% !important;
            height: 100vw;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
        }

        .main-logo {
            position: absolute;
            top: 21.2%;
            left: 47%;
            transform: translate(-50%, -50%);
            max-width: 380px;
			min-width:180px;
            height: auto;
            transition: opacity var(--transition-duration) ease-in-out, transform var(--transition-duration) ease-in-out;
        }

        #homepage-logo, #navbar-logo {
            transition: opacity var(--transition-duration) ease-in-out, transform var(--transition-duration) ease-in-out;
            will-change: transform, opacity;
            opacity: 1;
        }

#navbar-logo {
			max-width: 100px;
        }


        .primary-navbarHP {
            position: fixed;
            top: 30px;
            left: 50%;
            transform: translateX(-50%);
            width: 870px;
            height: 65px;
            background-color: var(--background-color);
            border-radius: var(--border-radius);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
            transition: background-color var(--transition-duration) ease-in-out, opacity var(--transition-duration) ease-in-out, transform var(--transition-duration) ease-in-out;
            z-index: 100;
        }

        .navbar-brand {
            width: auto;
            height: auto !important;
        }


        .nav-items-navbarre-HP {
            display: flex;
            gap: 25px;
            position: relative;
			padding: 0 30px;
        }

        .nav-items-navbarre-HP a {
            font-size: 15.5px;
            color: #000000;
            text-decoration: none;
            position: relative;
            padding: 5px 0;
        }

        .nav-items-navbarre-HP a.bold {
            font-weight: bold;
        }

        .nav-items-navbarre-HP a.color-333 {
            color: var(--secondary-color);
        }

        .nav-items-navbarre-HP a::before {
            content: "";
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 0;
            height: 2px;
            background-color: var(--primary-color);
            transform: translateX(-50%);
            transition: width 0.3s ease-in-out;
        }

        .nav-items-navbarre-HP a:hover::before {
            width: 100%;
        }

        .arrow-navbarre-HP {
            width: 12px;
            height: 12px;
            margin-left: 5px;
            transition: transform 0.3s ease-in-out;
        }

        .nav-items-navbarre-HP a:hover .arrow-navbarre-HP {
            transform: rotate(180deg);
        }

        .dropdown-menuHP {
            position: absolute;
            top: 60px;
            left: 0;
            width: 120%;
            background-color: #FFFFFF;
            display: none;
            flex-direction: row;
            padding: 20px;
            box-shadow: var(--box-shadow);
            border-radius: var(--border-radius);
            z-index: 110;
            opacity: 0;
            transition: opacity var(--transition-duration) ease-in-out;
            justify-content: flex-start;
        }

        .nav-items-navbarre-HP a:hover + .dropdown-menuHP,
        .dropdown-menuHP:hover {
            display: flex;
            opacity: 1;
        }

        .mega-menu-categoryHP {
            display: flex;
            flex-direction: column;
            gap: 11px;
            align-items: flex-start;
            width: 45%;
            text-align: left;
            padding-right: 20px;
        }

        .mega-menu-categoryHP .category-header {
            font-weight: bold;
            color: var(--secondary-color);
            margin: 10px 0;
        }

        .mega-menu-categoryHP a {
            color: var(--secondary-color);
            text-decoration: none;
            font-size: 15px;
        }

        .iconsHP {
            display: flex;
            align-items: center;
            gap: 15px;
			padding: 0px 0 0 40px;
			line-height: 20px;
        }
.nav-authentication {
    display: flex;
}


 .xoo-el-login-tgr {
    position: relative; /* Nécessaire pour positionner le pseudo-élément */
    background-color: var(--primary-color);
    font-size: 15.5px;
    padding: 8px 15px;
    border-radius: var(--border-radius);
    text-decoration: none;
    overflow: hidden; /* Masque le contenu débordant */
    z-index: 1;
}

        .btn-connectHPNavbarre {
    color: #FFFFFF;
}

 .xoo-el-login-tgr::before {
    content: '';
    position: absolute;
    top: 0;
    left: -20%; /* Débute hors du bouton à gauche */
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3); /* Blanc transparent */
    transform: skewX(-45deg); /* Effet incliné pour un look moderne */
    transition: all 0.4s ease; /* Contrôle la transition */
    z-index: 0; /* Derrière le texte du bouton */
    opacity:0;
}

 .xoo-el-login-tgr:hover::before {
    left: 100%;
    opacity: 1; /* Visible au hover */
}

.btn-connectHPNavbarre:hover {
    color: #FFFFFF; /* Pour s'assurer que le texte reste lisible */
}

        .category-title-mega-menuHP {
            font-weight: bold;
            font-size: 18px;
        }

        .subcategory-item {
            font-size: 14px;
            margin-bottom: 5px;
        }

        .category-header {
            font-weight: bold;
            font-size: 20px;
            margin-bottom: 5px;
            text-decoration: none;
        }

        .category-preview {
            width: 250px;
            height: 290px;
            object-fit: cover;
            border-radius: 8px;
            box-shadow: -11px 7px 8px 2px rgba(0, 0, 0, 0.1);
            transition: opacity 0.3s;
        }

        .tagline-container {
            position: absolute;
            top: 47%;
            margin-left: 31vw;
            transform: translateX(-50%);
            text-align: center;
        }

        .tagline-la {
            font-family: 'Coming Soon', cursive;
            font-size: 6vw;
            letter-spacing: 0.3vw;
            font-weight: 400;
            color: #FFFFFF;
            margin-right: 1.6vw;
        }

        .tagline-new-wave {
            font-family: 'Climate Crisis', cursive;
            font-size: 6vw;
            letter-spacing: 0.3vw;
            text-decoration: underline;
            position: relative;
            color: #FFFFFF;
        }

        .tagline-new-wave-bg {
            font-family: 'Redacted Script', cursive;
            font-size: 9.4vw;
            letter-spacing: 0.5vw;
            position: absolute;
            top: -4vw;
            left: 58%;
            transform: translateX(-50%);
            color: var(--primary-color);
            width: 100%;
        }

        .tagline-au-dela-container {
            display: flex;
            align-items: center;
            position: absolute;
            margin-left: 36vw;
            transform: translateX(-31%);
            white-space: nowrap;
            margin-top: 2vw;
        }

        .tagline-au-dela {
            font-family: 'Coming Soon', cursive;
            font-size: 6vw;
            letter-spacing: 0.3vw;
            color: #FFFFFF;
            margin-right: 1.6vw;
        }

        .tagline-sommets {
            font-family: 'Climate Crisis', cursive;
            font-size: 6vw;
            letter-spacing: 0.3vw;
            color: #FFFFFF;
        }

        .mobile-headerHP {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: rgb(239, 239, 239);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            z-index: 1000;
        }

        .mobile-brand {
            height: 36px;
        }

        .mobile-nav-iconsHP {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .mobile-nav-iconsHP img {
            width: 22px;
            height: 26px;
        }

        .hamburger-menu {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 31px;
            height: 26px;
            border: none;
            background: transparent;
            cursor: pointer;
            position: relative;
        }

        .hamburger-menu .line {
            display: block;
            height: 4px;
            width: 100%;
            background-color: black;
            border-radius: 2px;
            transition: all 0.4s ease;
            transform-origin: center;
        }

        .hamburger-menu .line.short {
            width: 70%;
            margin-left: auto;
        }

        .hamburger-menu.active .line:nth-child(1) {
            transform: rotate(45deg) translate(5px, 10px);
            background-color: #B53B6A;
        }

        .hamburger-menu.active .line.short {
            opacity: 0;
        }

        .hamburger-menu.active .line:nth-child(3) {
            transform: rotate(-45deg) translate(7px, -10px);
            background-color: #B53B6A;
        }

        .hamburger-menu .line {
            transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
        }

        .hamburger-menu.active .line {
            background-color: #B53B6A;
        }

        .mobile-dropdown {
            position: fixed;
            top: 0;
            right: -100%;
            width: 270px;
            height: 100%;
            background-color: #F9F9FC;
            backdrop-filter: blur(15px);
            overflow-y: auto;
            transition: right 0.6s ease;
            z-index: 999;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
            transition: right 0.3s ease-in-out;
        }

        .mobile-dropdown.active {
            right: 0;
        }

        .mobile-dropdown .mobile-menu-list {
            width: 100%;
            margin-top: 65px;
        }

        .mobile-dropdown .mobile-menu-list .menu-item-dropdown-HP {
            position: relative;
            cursor: pointer;
        }

        .mobile-dropdown .mobile-menu-list .menu-item-dropdown-HP a {
            color: #414141;
            font-size: 16px;
            text-decoration: none;
            display: block;
            padding: 5px 30px;
            line-height: 60px;
        }

        .mobile-dropdown .mobile-menu-list .menu-item-dropdown-HP a .dropdown {
            position: absolute;
            right: 0px;
            margin: 0 20px;
            transition: 0.3s ease;
        }

        .mobile-dropdown .mobile-menu-list .menu-item-dropdown-HP .submenu-list {
            background: rgba(181, 59, 106, 0.7);
            display: none;
        }

        .mobile-dropdown .mobile-menu-list .menu-item-dropdown-HP .submenu-list a {
            padding-left: 64px;
            color: #fff;
            font-size: 13px;
        }

        .close-button {
            position: absolute;
            color: #414141;
            width: 20px;
            right: 0;
            margin: 25px;
            cursor: pointer;
        }

        .rotate {
            transform: rotate(90deg);
            transition: transform 0.3s ease;
        }

        .feather-chevron-right {
            transition: transform 0.3s ease;
            transform: rotate(90deg);
        }

        .feather-chevron-right.rotate {
            transform: rotate(0deg);
        }

        /* Mobile menu visible */
#mobileMenu.active {
    display: flex;
}


/* Initial state for burger */
.hamburger-menu {
    cursor: pointer;
    transition: transform 0.3s ease;
}

        /* Nouveau style pour les textes */
        .hero-text {
            text-align: center;
            margin-top: 11%;
        }

        .hero-text .hero-main-text {
            font-family: 'Climate Crisis', cursive;
            font-size: clamp(33px, 5.7vw, 55px);
            letter-spacing: 2px;
            color: #3B3B3B;
            margin-bottom: 4px;
            margin-top: 70px;
            padding: 0 20px;
        }

        .hero-text .hero-sub-text {
            font-family: 'Poppins', sans-serif;
            font-weight: 300;
            font-size: clamp(24px, 4.2vw, 42px);
            letter-spacing: 2px;
            color: #3B3B3B;
			padding: 0 10px;
        }

        /* Styles for the rectangles */
        .featured-items {
            display: flex;
            gap: 30px;
            justify-content: center;
            margin-top: 50px;
            flex-wrap: wrap;
        }

        .featured-item {
            position: relative;
            width: 260px;
            height: 340px;
            min-width: 140px;
            min-height: 195px;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            transition: width 0.3s, height 0.3s;
        }

        .featured-item .item-text-bg {
            position: absolute;
            bottom: 14px;
            right: 13px;
            background-color: rgba(181, 59, 106, 0.81);
            z-index: 1;
            transition: border-radius 0.3s, background-color 0.3s;
        }

        .featured-item .item-text {
            position: absolute;
            bottom: 10px;
            right: 10px;
            font-family: 'Poppins', sans-serif;
            font-weight: 1000;
            color: #ffffff;
            font-size: 25px;
            z-index: 2;
            text-align: right;
            display: flex;
            align-items: center;
        }

        .featured-item .item-text img {
            width: 17px;
            height: 17px;
            margin-left: 10px;
            display: none;
        }

        .featured-item:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

        /* Specific styles for each text-background */
        .item-text-bg-1 {
            width: 7rem;
            height: 19px;
        }

        .item-text-bg-2 {
            width: 8.5rem;
            height: 19px;

        }

        .item-text-bg-3 {
            width: 9rem;
            height: 19px;
        }

        .item-text-bg-4 {
            width: 6.6rem;
            height: 29px;
        }

        /* Blur effect for the "LesCo" image */
        .featured-item.blur {
            filter: blur(4px);
        }

        /* Nouveau style pour le texte "Nos coups de coeur" */
        .favorite-heading {
            font-family: 'Poppins', sans-serif;
            font-weight: 1000;
            color: #333333;
            font-size: clamp(22px, 4vw, 30px);
            opacity: 0.8;
			margin: 100px 0px 30px;
        }

        /* Nouveau style pour le conteneur parent */
        .content-container {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-top: 11%;
            padding: 0 50px;
        }

        /* Nouveau style pour le conteneur de gauche */
        .left-container-assuranceHP {
            flex: 2;
            min-width: 300px; /* Largeur minimum pour la lisibilité */
            margin-right: 50px;
            margin-bottom: 40px; /* Espace en cas de retour à la ligne */
        }

        .left-container-assuranceHP .main-text-hpgarment {
            font-family: 'Poppins', sans-serif;
            font-weight: 500;
    line-height: 65px;
            font-size: clamp(26px, 4.2vw, 53px); /* Taille de police responsive */
            color: #252525;
            margin-bottom: 20px;
        }

        .left-container-assuranceHP .sub-text {
            font-family: 'Inter', sans-serif;
            font-weight: 400;
            font-size: clamp(16px, 2.2vw, 24px); /* Taille de police responsive */
            color: #515151;
            margin-bottom: 20px;
			margin-right: 30px;
        }

        .left-container-assuranceHP .learn-more-button {
    position: relative; /* Nécessaire pour positionner le pseudo-élément */
    background-color: #B53B6A;
    color: #FFFFFF;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: clamp(12.5px, 2vw, 16px);
    padding: 10px 20px;
    border-radius: 12px;
    text-decoration: none !important;
    margin-top: 20px;
    display: inline-block;
    overflow: hidden; /* Empêche le contenu débordant */
    z-index: 1; /* Assure que le texte reste au-dessus */
}

.left-container-assuranceHP .learn-more-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -110%; /* Commence hors du bouton à gauche */
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3); /* Blanc transparent */
    transform: skewX(-45deg); /* Effet incliné */
    transition: all 0.4s ease; /* Animation fluide */
    z-index: 0; /* Derrière le texte */
}

.left-container-assuranceHP .learn-more-button:hover::before {
    left: 100%; /* Balayage vers la droite */
}

.left-container-assuranceHP .learn-more-button:hover {
    color: #FFFFFF; /* Maintient le texte visible pendant l'animation */
}

        /* Modification du right-container-assuranceHP */
.right-container-assuranceHP {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin: 0;
    min-width: 250px; /* Largeur minimum pour les images */
    right: 11%;
    bottom: 55px;
}

.right-container-assuranceHP img {
    width: 21vw;
    max-width: 250px;
    height: auto;
}

.right-container-assuranceHP .overlay-image {
    position: absolute;
    bottom: -39%; /* Position relative en pourcentage */
    right: -27%; /* Position relative en pourcentage */
    width: 21vw;
    max-width: 250px;
}

        /* Conteneur Principal */
.flow-follow-section {
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
    width: 86%;
    border-radius: 12px;
    background-color: #252C32;
    display: flex;
    gap: 50px;
    justify-content: space-between;
    padding: 30px;
    flex-wrap: wrap;
}

/* Contenu du Conteneur */
.flow-follow-section .flow-follow-part {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px;
}

/* Pictogramme */
.flow-follow-section .flow-follow-part .flow-follow-pictogram {
    max-width: 50px;
    max-height: 50px;
    align-self: flex-start;
    margin-bottom: 15px;
}

/* Titre */
.flow-follow-section .flow-follow-part .flow-follow-title {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(17px, 3vw, 25px);
    color: #FFFFFF;
    line-height: 35px;
    margin-bottom: 10px;
	text-wrap: balance;
}

/* Sous-titre */
.flow-follow-section .flow-follow-part .flow-follow-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: clamp(14px, 2.3vw, 20px);
    color: rgba(255, 255, 255, 0.6);
    margin-top: 5px;
    line-height: 1.35;
}

       /* Nouveau style pour le conteneur dec_ose_part */
       .container-Déc-Ose-Part {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 90px;
            font-family: 'Inter', sans-serif;
        }

        .left-column-Déc-Ose-Part, .right-column-Déc-Ose-Part {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .left-column-Déc-Ose-Part {
            font-family: 'Climate Crisis', sans-serif;
            letter-spacing: 3px;
        }

        .left-column-Déc-Ose-Part div {
            font-size: clamp(25px, 4vw, 52px);
            margin: 5px 0;
        }

        .left-column-Déc-Ose-Part .word-1-découvre, .left-column-Déc-Ose-Part .word-3-partage {
            color: #B53B6A;
        }

        .left-column-Déc-Ose-Part .word-2-ose {
            color: #333333;
        }

        .right-column-Déc-Ose-Part p {
            font-size: clamp(15px, 2vw, 23px);
            text-align: center;
            min-width: 49vw;
            text-wrap: balance;
        }

        .right-column-Déc-Ose-Part p .underline {
            text-decoration: underline;
            text-decoration-color: #B53B6A;
            text-decoration-thickness: 2px;
        }


        .reseau-sociaux {
            display: flex;
            justify-content: center;
            margin-top: 40px;
            margin-bottom: 40px;
            gap: 40px;
            
        }

        .icone-reseau {
            position: relative;
            width: 40px;
            height: 40px;
            margin: 0 10px;
        }

        .icone-reseau img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transition: opacity 0.3s ease;
        }

        .icone-reseau img.hover-icon {
            opacity: 0;
        }

        .icone-reseau:hover img.default-icon {
            opacity: 0;
        }

        .icone-reseau:hover img.hover-icon {
            opacity: 1;
        }


        .section-reassurance-HP_down {
    margin-top: 11%;
    background-color: #333;
    display: flex;
    flex-wrap: wrap; /* Autorise le retour à la ligne */
    justify-content: space-around;
    align-items: center;
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
	max-width : 100% !important;
}

.reassurance-card-HP {
    display: flex;
    align-items: center;
    text-align: left;
	margin-left:30px;
}

.icon-reassurance{
    width: 40px;
    height: auto;
    margin-right: 15px;
    transition: all 0.3s ease; /* Ajoute une transition fluide pour le redimensionnement */
}

.content-reassurance {
    display: flex;
    flex-direction: column;
}

.title-reassurance {
    font-family: 'Poppins', sans-serif !important;
    font-size: clamp(15px, 2vw, 20px) !important;
    color: #ffffff !important;
    margin: 0 !important;
}

.description-reassurance {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(13px, 1.6vw, 15px) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    margin: 5px 5px 0 0 !important;
	text-wrap: balance;
}


/* Footer */
footer {
    background-color: rgb(239, 239, 239);
    padding: 40px 20px 20px 20px;
    color: #333333;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.footer-left, .footer-right {
    width: 100%;
    text-align: center;
}

.footer-left img {
    max-width: 220px;
    height: auto;
    margin: 20px 0 8% 0;
}

.footer-text {
    font-size: clamp(18px, 4vw, 28px);
    margin: 0 0 5px 0;
    font-weight: bold;
}

.highlight {
    color: #B53B6A;
}

.footer-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-block {
    width: 100%;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.block-title {
    font-size: clamp(16px, 3vw, 18px);
    color: #B53B6A;
    margin-bottom: 0;
}

.footer-block ul {
    list-style: none;
    padding: 0;
	margin:0;
}

.footer-block ul li {
    margin: 7px 0;
}

.footer-block ul li a {
    text-decoration: none;
    color: #333333;
    font-size: clamp(14px, 2.6vw, 15px);
    position: relative;
    display: inline-block; /* Nécessaire pour positionner l'élément */
}

/* Effet au survol (hover) des liens */
.footer-block ul li a::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2.5px;
    background-color: var(--primary-color); /* Remplace par ta couleur principale */
    transform: translateX(-50%);
    transition: width 0.3s ease-in-out;
}

/* L'effet hover qui étend la ligne sous le lien */
.footer-block ul li a:hover::before {
    width: 100%;
}

.footer-email {
    font-size: clamp(12px, 2.6vw, 14px);
    width: fit-content;
    border-bottom: 1px solid #ccc;
    margin: 40px 0;
}

.footer-separator {
    border: none;
    border-top: 1px solid rgb(200, 200, 200);
    margin: 20px 0;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    gap: 10px;
}

.footer-legal {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #464646;
}

.payment-icons {
    display: flex;
    gap: 10px;
    justify-content:center;
}

.payment-icons img {
    max-width: 15%;
    height: auto;

}

/* container page caté*/

.ast-woocommerce-container {
    margin: 8vw 4vw;
}

@media (min-width: 768px) {
    .footer-content {
        flex-direction: row;
        justify-content: space-between;
    }

    .footer-left, .footer-right {
        text-align: left;
    }

    .footer-left img {
    max-width: 280px;
    margin: 20px 0 5% 25px;
}

    .footer-text {
    margin: 0 0 5px 50px;
}
    .footer-right {
        flex-direction: row;
        gap: 20%;
    }
    .footer-block ul li {
    margin: 10px 0;
}
    .block-title {
    margin-bottom: 10px;
}
    .footer-block {
        width: auto;
        align-items: flex-start;
    }

    .footer-bottom {
        flex-direction: row;
    }
    .payment-icons {
    display: flex;
    justify-content: flex-end;
    margin-right :70px;
}
}

@media (max-width: 1200px) {
    .featured-item {
                width: 200px;
                height: 260px;
            }

            .flow-follow-section .flow-follow-part {
            min-width: 27.2%;
            text-wrap: balance;
}
}
@media (max-width: 992px) {

    .left-container-assuranceHP {
        margin-right: 0;
        margin-bottom: 60px;
    }
    .featured-item {
                width: 150px;
                height: 200px;
            }
            .featured-item .item-text {
                font-size:18px;
            }
	    .section-reassurance-HP_down {
        display: grid;
        padding: 20px 20px 5px 20px;
		gap:14px;
    }
	    .reassurance-card-HP{
        width: 100%; /* Les cartes occupent toute la largeur */
        margin-bottom: 15px;
    }

    .icon-reassurance {
        width: 35px; /* Réduit davantage la taille des icônes */
    }
	.iconsHP {
    padding: 0px 30px 0 0;
}
	     /* Specific styles for each text-background */
        .item-text-bg-1 {
            width: 5rem;
			height: 15px;
        }

        .item-text-bg-2 {
            width: 6.5rem;
			height: 15px;
        }

        .item-text-bg-3 {
            width: 6.5rem;
			height: 15px;
        }

        .item-text-bg-4 {
            width: 5.2rem;
			height: 30px;
        }
}


@media (max-width: 768px) {
    .content-container {
        padding: 0 20px;
    }

    .right-container-assuranceHP {
    display: none;
    }

    /* Ajouter l'image au-dessus du texte .main-text-hpgarment */
    .left-container-assuranceHP .mobile-image {
        width: 100vw;
        height: 100vw;
        max-height: 440px;
        background-image: url('https://www.toppsummit.fr/wp-content/uploads/2025/02/MobileHPassurance2.webp');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        margin-bottom: 50px;
        margin-left:-20px;
    }

    .flow-follow-section {
        gap: 20px;
        flex-direction: column;
        margin-top: 10px;
    }
     /* container hp déc-ose-part */

     .container-Déc-Ose-Part {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .left-column-Déc-Ose-Part {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
        flex-direction: row;
    }

    .left-column-Déc-Ose-Part div {
        font-size: clamp(24px, 4.5vw, 35px);
    }

    .right-column-Déc-Ose-Part p {
        font-size: clamp(16px, 3vw, 20px);
        text-align: center;
		width:90%;
    }

    .container-Déc-Ose-Part {
        margin: 90px 50px;
    }
    .container-Déc-Ose-Part {
        margin: 60px 32px;
    }

	    /*titre page caté */
h1.woocommerce-products-header__title.page-title {
    font-size: 40px;
}

}

@media (max-width: 538px) {
            .hero-background {
                max-height: 1000%;
                height: 90vh;
            }
            .featured-item {
                width: 35vw;
                height: 4vw;
            }
            .featured-item .item-text {
                font-size:17px;
            }
            .left-container-assuranceHP .mobile-image {
                max-height: 300px;
            }
    .flow-follow-section{
        padding: 20px;
    }
    .flow-follow-section .flow-follow-part {
        padding: 15px 5px;
    }
    .flow-follow-section .flow-follow-part .flow-follow-title {
    margin-bottom: 0px;
}
    .flow-follow-section .flow-follow-part .flow-follow-subtitle {
    margin-top: 0px;
}

.left-column-Déc-Ose-Part {
        flex-direction: column;
        gap:0px;
    }

    .reseau-sociaux {
        justify-content: space-evenly; /* Répartir uniformément les icônes */
        gap: 0px;
    }

    .icone-reseau {
        max-width: calc(50% - 20px);
        box-sizing: border-box; /* Inclure les marges dans le calcul de largeur */
    }
    .icone-reseau img {
    width: 90%;
    height: 90%;
}
	
	.favorite-heading {
    display:flex; 
    padding: 0 34px;
	justify-content: center;
}
	.tagline-container {
    margin-left: 36vw;
}
	 .tagline-la {
            font-size: 7vw;
        }

        .tagline-new-wave {
            font-size: 7vw;
        }

        .tagline-new-wave-bg {
            font-size: 10.4vw;
        }
.tagline-au-dela-container {
    margin-left: 28vw;
}
        .tagline-au-dela {
            font-size: 7vw;
        }

        .tagline-sommets {
            font-size: 7vw;
        }
        }

@media (max-width: 330px) {
		.iconsHP {
    padding: 0px 15px;
}
}	

         @media (min-width: 835px) {
            .mobile-headerHP {
                display: none;
            }

            .primary-navbarHP {
                display: flex;
            }
        }

        @media (max-width: 835px) {

    .primary-navbarHP {
                display: none;
            }

            .mobile-headerHP {
                display: flex;
            }
#mobileLogoNavbar {
    max-width: 72.5px;
}
			.hero-background {
    margin-top: 50px;
}
 }


/*bouton connexion */

.nav-authentication img {
  width:25px;
}

svg.dgwt-wcas-ico-magnifier-handler {
	height:25px;
	max-width:24px;
	width:23px;
}


/* Menu dropdown user connecté */
.user-menu-container {
  position: relative;
  display: inline-block;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.user-menu {
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px);
  position: absolute;
  top: 160%;
  transform: translateX(-70%) translateY(-10px); /* Centrer le menu sous l'image */
  background-color: #F9F9FC;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1); /* Ombre plus douce */
  border-radius: 10px;
  padding: 10px;
  z-index: 1000;
  min-width: 200px; /* Ajuste cette valeur en fonction de la taille que tu souhaites pour le menu */
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.user-menu-container:hover .user-menu {
  visibility: visible;
  opacity: 1;
  transform: translateX(-70%) translateY(0); /* Effet fluide pour l'affichage du menu */
}

.user-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.user-menu ul li {
  padding: 2px 0;
	margin-bottom: 10px !important;
}

.user-menu ul li a {
  color: black;
  text-decoration: none;
  position: relative;
  padding-bottom: 3px;
}

.user-menu ul li a:hover {
  padding: 5px;
}

.user-menu ul li a::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: rgba(181, 59, 106);
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.user-menu ul li a:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.user-menu.active {
  visibility: visible;
  opacity: 1;
  transform: translateX(-70%) translateY(0);
}

/* Sous-menu */
.submenu {
    margin-top: 5px !important;
    padding-left: 15px !important;
  font-size: 14px; /* Plus petit que le menu principal */
}

.submenu li {
  padding: 4px 0; /* Moins d'espace pour les sous-éléments */
}

.submenu li a {
    color: rgba(181, 59, 106) !important;
}

.submenu li a:hover {
  color: #2f9419; /* Effet hover pour les sous-liens */
}


/* Affichage deuxième image sur les produits en hover */

/* Empêcher l'image secondaire de s'afficher normalement */
.product img {
    transition: opacity 0.3s ease-in-out;
}

.product .secondary-image {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* Afficher la seconde image lors du hover */
.product:hover .secondary-image {
    opacity: 1;
}

.product:hover img:first-child {
    opacity: 0;
}
/* titre produit FP */
h2.product-title {
    text-wrap: balance;
}
/* guide de taille FP */
.single_variation_wrap {
    display: grid;
    gap: 19px;
}