/*
Theme Name: Netfusion Child
Theme URI: https://netfusion.themeearth.com/
Author: ThemeEarth
Author URI: https://themeforest.net/user/themeearth/portfolio
Description: Thème enfant de Netfusion
Version: 1.0.0
Template: netfusion
Text Domain: netfusion-child
*/

:root {
    --brand-color: #c93c36;
}

body {
    height:auto;
    background: #000 !important;
}

@font-face {
    font-family: 'GC Vank';
    src: url('./fonts/GC Vank.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'GC Vank', sans-serif !important;
}

.footer.style-2,
.te-header-menu-area.te-sticky_menu {
    background: #060606 !important;
}

.te-footer-widget-wrapper::before {
    background: linear-gradient(98deg, rgba(201, 60, 54, 0.4) -7.42%, rgba(201, 60, 54, 0) 75.72%);
    right: 15px;
}

.te-footer-widget.widget_nav_menu li {
    padding-bottom: 10px !important;
}

.footer_social_link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(280.36deg, transparent 20.42%, rgba(201, 60, 54, 0.4) 84.24%), linear-gradient(0deg, transparent, transparent);
}

.footer_social_link img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.te-footer-widget-title {
    letter-spacing: 1px !important;
}

.counter-card::before {
  background: linear-gradient(280.36deg, transparent 20.42%, rgba(201, 60, 54, 0.4) 84.24%), linear-gradient(0deg, transparent, transparent);
  -webkit-mask: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff)) content-box, -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff)) content-box, -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff));
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude; 
}

.banner-info-card.style-3 {
    background: linear-gradient(98deg, rgba(201, 60, 54, 0.2) -7.42%, rgba(201, 60, 54, 0) 75.72%)
}

.te-info-card {
    background: -webkit-gradient(linear, left top, right top, from(#060606), to(#060606)), -webkit-gradient(linear, left top, right top, from(rgba(201, 60, 54, 0.4)), to(#060606));
    background: linear-gradient(to right, #060606, #060606), linear-gradient(to right, rgba(201, 60, 54, 0.4), #060606);
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
}

.te-info-card:hover {
    -webkit-box-shadow: 0 0 15px rgba(201, 60, 54, 0.45);
    box-shadow: 0 0 15px rgba(201, 60, 54, 0.45);
    -webkit-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}

.te-info-card .te-title-wrapper .icon {
    background: linear-gradient(280.36deg, transparent 20.42%, rgba(201, 60, 54, 0.4) 84.24%), linear-gradient(0deg, transparent, transparent);
}

.price-card .price-label::before {
    background-image: linear-gradient(280.36deg, transparent 20.42%, rgba(201, 60, 54, 0.4) 84.24%), linear-gradient(0deg, transparent, transparent);
}

.te-section-title .title,
.te-info-card .te-title-wrapper .title {
    letter-spacing: 0 !important;
}

.te-info-card .icon img {
    width: 75%;
}

/* #home_porque .elementor-column:first-child .icon img {
    margin-top: 14px;
} */

#home_nextdrop_title .title {
    font-size: 75px;
    margin-top: 14px;
}

.accordion-wrapper .te-accordion-list-item .te-accordion-head .te-accordion-title {
    font-size: 22px;
    line-height: 28px;
    letter-spacing: 1px;
}

.te-header-menu-area .te-logo img {
    max-width: 150px;
}

.te-header-btn {
    margin-left: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.header-area.style-2 .te-header-btn .te-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
}

/* Cacher le bouton Inscription pour les abonnés actifs */
.cvc-subscriber-active .te-header-btn .te-cta-btn-wrapper {
    display: none !important;
}

/* ── Widget panier header ─────────────────────────────────────────────────── */
#cvc-header-cart {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50px;
    color: #e8e8e8;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    transition: border-color 0.22s ease, background 0.22s ease;
    position: relative;
}

#cvc-header-cart:hover {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    text-decoration: none !important;
}

#cvc-header-cart .cvc-header-cart__icon {
    display: flex;
    align-items: center;
    line-height: 1;
    font-size: 20px;
}

#cvc-header-cart .cvc-header-cart__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: #c93c36;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 50px;
    line-height: 1;
}

#cvc-header-cart .cvc-header-cart__total {
    color: #e8e8e8;
    font-size: 13px;
    font-weight: 600;
}

#cvc-header-cart .cvc-header-cart__total .amount {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

/* ── Widget budget header ─────────────────────────────────────────────────── */
#cvc-header-budget {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50px;
    line-height: 1;
    white-space: nowrap;
    min-height: 38px;
    text-decoration: none !important;
    color: inherit;
    transition: border-color 0.22s ease, background 0.22s ease;
}

#cvc-header-budget:hover {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.05);
    text-decoration: none !important;
}

#cvc-header-budget .cvc-header-budget__track {
    width: 60px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    flex-shrink: 0;
}

#cvc-header-budget .cvc-header-budget__fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #c93c36 0%, #e04540 100%);
    box-shadow: 0 0 8px rgba(201, 60, 54, 0.6);
    min-width: 4px;
    position: relative;
    overflow: hidden;
}

#cvc-header-budget .cvc-header-budget__fill::after {
    content: '';
    position: absolute;
    top: 0; left: -60%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%);
    animation: cvc-shimmer 2.4s ease-in-out infinite;
}

#cvc-header-budget .cvc-header-budget__badge {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.07);
    border-radius: 20px;
    padding: 2px 8px;
    white-space: nowrap;
}

/* Budget illimité — variante header */
#cvc-header-budget.cvc-header-budget--unlimited .cvc-header-budget__infinity {
    font-size: 15px;
    color: var(--cvc-accent);
}
#cvc-header-budget.cvc-header-budget--unlimited .cvc-header-budget__badge {
    color: var(--cvc-accent);
    background: var(--cvc-accent-soft);
}

.page-breadcrumb-area {
    background-color: #000 !important;
    padding-top: 150px;
    padding-bottom: 70px;
}

.te-breadcrumb-list {
    display:none !important;
}

.page-area {
    padding-top: 50px;
}

.te-page-heading .te-page-title {
    font-size: 70px;
    text-transform: uppercase;
}

/* ─────────────────────────────────────────────────────────────────────────
   Banner Style 3 — layout 3 zones : titre / image / cartes
   Inspired by Dlora (glassmorphism + z-index depth + perspective)
───────────────────────────────────────────────────────────────────────── */
.banner-area.style-3 {
    position: relative;
    background: #000;
    padding: 200px 0 150px;
    overflow-x: clip;
    overflow-y: visible;
}

/* cercles de halo */
.banner-area.style-3 .s3-circle-top {
    background-color: #c93c36;
    top: -15%;
    left: 40%;
    z-index: 0;
    opacity: 0.4;
}

.banner-area.style-3 .s3-circle-bottom {
    background-color: #c93c36;
    bottom: 20%;
    right: 22%;
    z-index: 5;
    opacity: 6;
}

.banner-s3-inner {
    position: relative;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    /*
     * 3 colonnes : col 1 = titre, col 2 = zone overlap, col 3 = image
     * Row 1 : titre (col 1+2) chevauche image (col 2+3)
     * Row 2 : cartes côte à côte (col 1+3)
     */
    grid-template-columns: 42fr 6fr 52fr;
    grid-template-rows: auto auto;
    align-items: center;
    min-height: unset;
    z-index: 1;
    row-gap: 40px;
}

/* ── Titre ───────────────────────────────────────────────────────────── */
.banner-s3-title {
    grid-column: 1 / 3;
    grid-row: 1;
    /* pas de z-index ici : chaque ligne a le sien */
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: visible;
    min-width: 0;
    padding-bottom: 40px;
}

.banner-s3-line {
    font-family: 'GC Vank', sans-serif;
    font-size: clamp(38px, 5.2vw, 84px);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: 1px;
    color: #ffffff;
    text-transform: uppercase;
    margin: 0;
    position: relative; /* nécessaire pour z-index */
    white-space: nowrap;
    overflow: visible;
    margin-bottom: 20px;
}

/* Ligne 1 : DEVANT l'image */
.banner-s3-line.line-1 {
    z-index: 3;
    font-size: 80px;
    margin-left: -140px;
    background: linear-gradient(
        to right,
        #461b1a 0%,
        #fff 18%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Ligne 2 : DERRIÈRE l'image */
.banner-s3-line.line-2 {
    z-index: 3;
    margin-left: 150px;
    font-size: 86px;
}

/* Ligne 3 : DERRIÈRE l'image, encore plus estompée */
.banner-s3-line.line-3 {
    z-index: 0;
    font-size: 80px;
    background: linear-gradient(
        to right,
        #511d1c 0%,
        #fff 30%,
        #fff 73%,
        #461b1a 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-left: -60px;
}

/* ── Image centrale ──────────────────────────────────────────────────── */
.banner-s3-image {
    grid-column: 2 / 4;
    grid-row: 1;
    z-index: 2;
    display: flex;
    align-items: stretch;
}

.banner-s3-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 12px !important;
    border: 1px solid #777 !important;
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.75),
        0 4px 20px rgba(201, 60, 54, 0.2);
    transform: perspective(1200px) rotateY(-3deg);
    transition: transform 0.4s ease;
    -webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent 92%);
    mask-image: linear-gradient(to bottom, #000 75%, transparent 92%);
}

.banner-s3-image img:hover {
    transform: perspective(1200px) rotateY(-1deg) scale(1.01);
}

/* ── Cartes en bas ───────────────────────────────────────────────────── */
.banner-s3-cards {
    grid-column: 1 / 4;
    grid-row: 2;
    z-index: 3;
    display: flex;
    flex-direction: row;
    gap: 20px;
    padding-left: 0;
    justify-content: center;
}

.banner-s3-card {
    flex: 0 1 380px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.banner-s3-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 20px 52px rgba(0, 0, 0, 0.55),
        0 0 20px rgba(201, 60, 54, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.banner-s3-card .card-image {
    margin-bottom: 12px;
}

.banner-s3-card .card-image img {
    width: 100%;
    border-radius: 10px;
    max-height: 130px;
    object-fit: cover;
}

.banner-s3-card .card-title {
    font-size: 22px !important;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 6px;
    letter-spacing: 0.3px;
}

.banner-s3-card .card-desc {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 10px;
}

.banner-s3-card .btn-wrapper a {
    display: block;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    padding: 12px 20px;
    margin-top: 16px;
    text-align: center;
    color: #ffffff;
    text-decoration: none;
    position: relative;
    transition: background-color 0.5s ease-out, color 0.5s ease-out;
}

/* Bordure dégradée via mask (même technique que .price-label::before) */
.banner-s3-card .btn-wrapper a::before {
    position: absolute;
    content: '';
    inset: 0;
    padding: 2px;
    border-radius: 50px;
    background-image: linear-gradient(280.36deg, transparent 20.42%, rgba(201, 60, 54, 0.6) 84.24%), linear-gradient(0deg, transparent, transparent);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.banner-s3-card .btn-wrapper a:hover {
    background-color: #c93c36;
    color: #ffffff;
}

/* ── Animations d'entrée ─────────────────────────────────────────────── */

@keyframes s3-slide-in-left {
    from {
        opacity: 0;
        transform: translateX(-60px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes s3-slide-in-right {
    from {
        opacity: 0;
        transform: translateX(60px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes s3-fade-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Lignes de titre : depuis la gauche, décalées */
/* Les animations ne se déclenchent qu'après ajout de .s3-ready par JS (post-loader) */
.banner-area.style-3:not(.s3-ready) .banner-s3-line,
.banner-area.style-3:not(.s3-ready) .banner-s3-image,
.banner-area.style-3:not(.s3-ready) .banner-s3-card {
    opacity: 0;
}

/* Dans l'éditeur Elementor : tout visible sans animation */
.elementor-editor-active .banner-area.style-3:not(.s3-ready) .banner-s3-line,
.elementor-editor-active .banner-area.style-3:not(.s3-ready) .banner-s3-image,
.elementor-editor-active .banner-area.style-3:not(.s3-ready) .banner-s3-card {
    opacity: 1;
}

.banner-area.style-3.s3-ready .banner-s3-line.line-1 {
    animation: s3-slide-in-left 1.2s cubic-bezier(0.4, 0, 0.2, 1) both;
    animation-delay: 0s;
}

.banner-area.style-3.s3-ready .banner-s3-line.line-2 {
    animation: s3-slide-in-left 1.2s cubic-bezier(0.4, 0, 0.2, 1) both;
    animation-delay: 0.2s;
}

.banner-area.style-3.s3-ready .banner-s3-line.line-3 {
    animation: s3-slide-in-left 1.2s cubic-bezier(0.4, 0, 0.2, 1) both;
    animation-delay: 0.4s;
}

/* Image : depuis la droite */
.banner-area.style-3.s3-ready .banner-s3-image {
    animation: s3-slide-in-right 1.4s cubic-bezier(0.4, 0, 0.2, 1) both;
    animation-delay: 0.1s;
}

/* Cartes : depuis le bas, en dernier */
.banner-area.style-3.s3-ready .banner-s3-card.card-one {
    animation: s3-fade-up 1.0s cubic-bezier(0.4, 0, 0.2, 1) both;
    animation-delay: 0.8s;
}

.banner-area.style-3.s3-ready .banner-s3-card.card-two {
    animation: s3-fade-up 1.0s cubic-bezier(0.4, 0, 0.2, 1) both;
    animation-delay: 1.0s;
}

/* ─────────────────────────────────────────────────────────────────────────
   Fin Banner Style 3
───────────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────────
   Banner Style 4 — variante du style 3 : titres AU-DESSUS de l'image, centrés
───────────────────────────────────────────────────────────────────────── */

.banner-area.style-4 {
    position: relative;
    background: #000;
    padding: 200px 0 150px;
    overflow-x: clip;
    overflow-y: visible;
}

#banner_area_club .banner-area.style-4 {
    padding: 200px 0 0;
}

.banner-area.style-4 .s3-circle-top {
    background-color: #c93c36;
    top: -15%;
    left: 40%;
    z-index: 0;
    opacity: 0.4;
}

.banner-area.style-4 .s3-circle-bottom {
    background-color: #c93c36;
    bottom: 20%;
    right: 22%;
    z-index: 5;
    opacity: 0.6;
}

/* Layout vertical : titre → image → cartes, tout centré */
.banner-area.style-4 .banner-s3-inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    justify-items: center;
    row-gap: 40px;
}

.banner-area.style-4 .banner-s3-title {
    grid-column: 1;
    grid-row: 1;
    text-align: center;
    align-items: center;
    padding-bottom: 0;
}

.banner-area.style-4 .banner-s3-image {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    max-width: 900px;
}

.banner-area.style-4 .banner-s3-cards {
    grid-column: 1;
    grid-row: 3;
}

/* Reset des marges négatives et effets de fondu du style 3 */
.banner-area.style-4 .banner-s3-line.line-1 {
    margin-left: 0;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: #ffffff;
    background-clip: unset;
}

.banner-area.style-4 .banner-s3-line.line-2 {
    margin-left: 0;
}

.banner-area.style-4 .banner-s3-line.line-3 {
    margin-left: 0;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: #ffffff;
    background-clip: unset;
}

/* Animations style 4 — tout monte depuis le bas */
.banner-area.style-4:not(.s3-ready) .banner-s3-line,
.banner-area.style-4:not(.s3-ready) .banner-s3-image,
.banner-area.style-4:not(.s3-ready) .banner-s3-card {
    opacity: 0;
}

.elementor-editor-active .banner-area.style-4:not(.s3-ready) .banner-s3-line,
.elementor-editor-active .banner-area.style-4:not(.s3-ready) .banner-s3-image,
.elementor-editor-active .banner-area.style-4:not(.s3-ready) .banner-s3-card {
    opacity: 1;
}

.banner-area.style-4.s3-ready .banner-s3-line.line-1 {
    animation: s3-fade-up 1.2s cubic-bezier(0.4, 0, 0.2, 1) both;
    animation-delay: 0s;
}

.banner-area.style-4.s3-ready .banner-s3-line.line-2 {
    animation: s3-fade-up 1.2s cubic-bezier(0.4, 0, 0.2, 1) both;
    animation-delay: 0.2s;
}

.banner-area.style-4.s3-ready .banner-s3-line.line-3 {
    animation: s3-fade-up 1.2s cubic-bezier(0.4, 0, 0.2, 1) both;
    animation-delay: 0.4s;
    color: var(--brand-color);
}

.banner-area.style-4.s3-ready .banner-s3-image {
    animation: s3-fade-up 1.4s cubic-bezier(0.4, 0, 0.2, 1) both;
    animation-delay: 0.5s;
}

.banner-area.style-4.s3-ready .banner-s3-card.card-one {
    animation: s3-fade-up 1.0s cubic-bezier(0.4, 0, 0.2, 1) both;
    animation-delay: 0.9s;
}

.banner-area.style-4.s3-ready .banner-s3-card.card-two {
    animation: s3-fade-up 1.0s cubic-bezier(0.4, 0, 0.2, 1) both;
    animation-delay: 1.1s;
}

/* ── Bloc hero info (Card One simple, centré) ────────────────────────── */
.banner-s4-hero-info {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    margin: 0 auto;
}

.banner-s4-hero-info .s4-hero-img {
    max-width: 200px;
    border-radius: 8px;
    object-fit: cover;
}

.banner-s4-hero-info .s4-hero-title {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

.banner-s4-hero-info .s4-hero-desc {
    font-size: 17px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
}

.banner-s4-hero-info .s4-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    padding: 12px 20px;
    text-align: center;
    color: #ffffff;
    text-decoration: none;
    position: relative;
    transition: background-color 0.5s ease-out, color 0.5s ease-out;
    margin-top: 8px;
}

.banner-s4-hero-info .s4-hero-btn::before {
    position: absolute;
    content: '';
    inset: 0;
    padding: 2px;
    border-radius: 50px;
    background-image: linear-gradient(280.36deg, transparent 20.42%, rgba(201, 60, 54, 0.6) 84.24%), linear-gradient(0deg, transparent, transparent);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.banner-s4-hero-info .s4-hero-btn:hover {
    background-color: #c93c36;
    color: #ffffff;
}

/* Réajustement des grid-rows avec le nouveau bloc hero info */
.banner-area.style-4 .banner-s3-image {
    grid-row: 3;
}

.banner-area.style-4 .banner-s3-cards {
    grid-row: 4;
}

/* Animation entrée pour le bloc hero info */
.banner-area.style-4:not(.s3-ready) .banner-s4-hero-info {
    opacity: 0;
}

.elementor-editor-active .banner-area.style-4:not(.s3-ready) .banner-s4-hero-info {
    opacity: 1;
}

.banner-area.style-4.s3-ready .banner-s4-hero-info {
    animation: s3-fade-up 1.2s cubic-bezier(0.4, 0, 0.2, 1) both;
    animation-delay: 0.5s;
}

/* ── Cartes : style 4 n'a plus qu'une card (card-two) ───────────────── */
.banner-area.style-4 .banner-s3-cards {
    justify-content: center;
}

/* ── Social Proof bloc ───────────────────────────────────────────────── */
.s4-social-proof {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
}

.s4-social-proof-avatars {
    display: flex;
    flex-direction: row;
}

.s4-social-proof-avatars img {
    width: 36px;
    height: 36px;
    border-radius: 50% !important;
    object-fit: cover;
    border: 2px solid #1a1a1a;
    margin-left: -10px;
}

.s4-social-proof-avatars img:first-child {
    margin-left: 0;
}



.s4-social-proof-right {
    display: contents;
}

.s4-social-proof-stars {
    display: flex;
    gap: 3px;
}

.s4-social-proof-stars i {
    color: #f5a623;
    font-size: 13px;
}

.s4-social-proof-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    line-height: 1.3;
}

/* ─────────────────────────────────────────────────────────────────────────
   Fin Banner Style 4
───────────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────────
   Classe utilitaire : cards de hauteur égale
   Usage Elementor : saisir "cvc-equal-cards" dans Avancé > CSS Classes
   sur la section/container qui contient les colonnes de cards
───────────────────────────────────────────────────────────────────────── */
/* Propagation flex:1 sur toute la chaîne pour que .te-info-card
   remplisse toujours la hauteur de la colonne la plus haute */
.cvc-equal-cards .elementor-column {
    display: flex;
    flex-direction: column;
}
.cvc-equal-cards .elementor-widget-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}
.cvc-equal-cards .elementor-widget-wrap > .elementor-element {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.cvc-equal-cards .elementor-widget-container {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.cvc-equal-cards .te-info-card,
.cvc-equal-cards .te-info-card-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ─────────────────────────────────────────────────────────────────────────
   Classe utilitaire : bouton bordure dégradée rouge
   Usage Elementor : saisir "cvc-btn-gradient" dans Avancé > CSS Classes
───────────────────────────────────────────────────────────────────────── */
.cvc-btn-gradient .elementor-button {
    border-radius: 50px !important;
    border: none !important;
    font-size: 15px;
    font-weight: 600 !important;
    color: #ffffff !important;
    text-decoration: none;
    position: relative;
    background: transparent !important;
    transition: background-color 0.5s ease-out, color 0.5s ease-out;
    padding: 16px 24px;
}

.cvc-btn-gradient .elementor-button::before {
    position: absolute;
    content: '';
    inset: 0;
    padding: 2px;
    border-radius: 50px;
    background-image: linear-gradient(280.36deg, transparent 20.42%, rgba(201, 60, 54, 0.6) 84.24%), linear-gradient(0deg, transparent, transparent);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.cvc-btn-gradient .elementor-button:hover {
    background-color: #c93c36 !important;
    color: #ffffff !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   Formulaire de contact : bouton "Send a message" — style identique ATC
───────────────────────────────────────────────────────────────────────── */

.comment-respond,
.te-contact-info-wrapper .te-contact-info {
    background-color: #060606 !important;
    border-radius: 10px !important;
    border: 1px solid #272727 !important;
}

.comment-respond input, .comment-respond select {
    background: #000 !important;
    font-size: 15px !important;
    color: white !important;
    font-weight: 400 !important;
    padding: 11px 14px;
}
.comment-respond textarea {
    background: #000 !important;
    font-size: 15px !important;
    color: white !important;
    font-weight: 400 !important;
}

.comment-respond input::placeholder,
.comment-respond textarea::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

.comment-respond .title,
.te-contact-info-wrapper .te-contact-info .single-contact-info .contact-info-inner .title-wrapper .title {
    letter-spacing: 1px !important;
}

.nice-select {
    border: none;
    background: black;
    color: white;
}

.wpcf7-spinner.position-absolute {
    display:none !important;
}

.wpcf7 form .wpcf7-response-output {
    border-radius: 999px;
}

.wpcf7 form.invalid .wpcf7-response-output, 
.wpcf7 form.unaccepted .wpcf7-response-output, 
.wpcf7 form.payment-required .wpcf7-response-output {
    border-color: #c93c36 !important;
}

.wpcf7 form.sent .wpcf7-response-output {
    border-color: #2ecc71 !important;
}

.comment-respond .wpcf7-submit {
    min-height: 50px;
    padding: 0 28px;
    background: var(--cvc-accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: .02em;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: background var(--cvc-transition), transform var(--cvc-transition), box-shadow var(--cvc-transition) !important;
    box-shadow: 0 4px 20px rgba(201, 60, 54, .35);
    text-decoration: none;
    white-space: nowrap;
}

.comment-respond .wpcf7-submit:hover {
    background: var(--cvc-accent-h) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 24px rgba(201, 60, 54, .5) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   Formulaire de contact : bordures dégradées rouges (override thème parent)
───────────────────────────────────────────────────────────────────────── */
.comment-respond input,
.comment-respond select {
    background-image: linear-gradient(#121212, #121212), linear-gradient(to right, rgba(201, 60, 54, 0.4), transparent);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.comment-respond textarea {
    background-image: linear-gradient(#121212, #121212), linear-gradient(to right, rgba(201, 60, 54, 0.4), transparent);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.comment-respond input:focus,
.comment-respond textarea:focus,
.comment-respond .form-select:focus {
    border-color: #c93c36 !important;
}

.page-overlay {
    background-color: unset !important;
}

.elementor-counter .elementor-counter-title,
.elementor-counter .elementor-counter-number {
    font-family: 'GC Vank', sans-serif !important;
}

/* ─────────────────────────────────────────────────────────────────────────    
   CSS commun pour les pages de contenus "légaux" : mentions légales, etc...
───────────────────────────────────────────────────────────────────────── */

.legal_content_text_block hr {
    margin: 40px auto !important;
}

.legal_content_text_block h2 ,
.legal_content_text_block h3 {
    letter-spacing: 1px !important;
}

.legal_content_text_block p {
    font-size: 16px !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   Cookies overview (plugin Complianz — #cmplz-cookies-overview)
   Overrides agressifs car le plugin injecte son propre CSS avec !important
───────────────────────────────────────────────────────────────────────── */

#cmplz-cookies-overview {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

/* ── Bloc service (details) ─────────────────────────────────────────── */
#cmplz-cookies-overview details.cmplz-dropdown {
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    background: #0d0d0d !important;
    overflow: hidden !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ── Header service (summary) ───────────────────────────────────────── */
#cmplz-cookies-overview summary.cmplz-service-header {
    padding: 14px 40px 14px 20px !important;
    cursor: pointer !important;
    list-style: none !important;
    background: #161616 !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
}

#cmplz-cookies-overview summary.cmplz-service-header::-webkit-details-marker { display: none !important; }

#cmplz-cookies-overview summary.cmplz-service-header > div {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

#cmplz-cookies-overview summary.cmplz-service-header::after {
    content: '›' !important;
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) rotate(90deg) !important;
    font-size: 22px !important;
    color: rgba(255, 255, 255, 0.3) !important;
    transition: transform 0.2s ease !important;
    line-height: 1 !important;
}

#cmplz-cookies-overview details[open] > summary.cmplz-service-header::after {
    transform: translateY(-50%) rotate(-90deg) !important;
}

#cmplz-cookies-overview summary.cmplz-service-header h3 {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin: 0 !important;
    letter-spacing: 0 !important;
    background: transparent !important;
}

#cmplz-cookies-overview summary.cmplz-service-header p {
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.4) !important;
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.07) !important;
    border-radius: 20px !important;
    padding: 2px 10px !important;
}

/* ── Description & partage de données ──────────────────────────────── */
#cmplz-cookies-overview .cmplz-service-description,
#cmplz-cookies-overview .cmplz-sharing-data {
    padding: 10px 20px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    background: #0d0d0d !important;
    display: grid !important;
    grid-template-columns: 110px 1fr !important;
    align-items: baseline !important;
    gap: 8px !important;
}

#cmplz-cookies-overview .cmplz-service-description h4,
#cmplz-cookies-overview .cmplz-sharing-data h4 {
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: rgba(255, 255, 255, 0.25) !important;
    margin: 0 !important;
    font-weight: 700 !important;
    font-family: 'Inter', sans-serif !important;
    background: transparent !important;
}

#cmplz-cookies-overview .cmplz-service-description p,
#cmplz-cookies-overview .cmplz-sharing-data p {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.55) !important;
    margin: 0 !important;
    background: transparent !important;
    line-height: 1.5 !important;
}

#cmplz-cookies-overview .cmplz-service-description a,
#cmplz-cookies-overview .cmplz-sharing-data a {
    color: #c93c36 !important;
    text-decoration: none !important;
}

/* ── Tableau cookies par catégorie ──────────────────────────────────── */
#cmplz-cookies-overview .cookies-per-purpose {
    background: #0d0d0d !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 12px 20px 16px !important;
    display: grid !important;
    grid-template-columns: 2fr 1fr 3fr !important;
    column-gap: 16px !important;
    row-gap: 0 !important;
}

/* Forcer fond transparent sur tous les enfants directs */
#cmplz-cookies-overview .cookies-per-purpose > div {
    background: transparent !important;
}

/* Catégorie — pleine largeur */
#cmplz-cookies-overview .cookies-per-purpose .purpose {
    grid-column: 1 / -1 !important;
    padding: 0 0 8px !important;
}

#cmplz-cookies-overview .cookies-per-purpose .purpose h4 {
    font-size: 9px !important;
    text-transform: uppercase !important;
    letter-spacing: 2.5px !important;
    color: #c93c36 !important;
    margin: 0 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 800 !important;
    background: transparent !important;
}

/* Assignation colonnes */
#cmplz-cookies-overview .cookies-per-purpose .name-header,
#cmplz-cookies-overview .cookies-per-purpose .name {
    grid-column: 1 !important;
}

#cmplz-cookies-overview .cookies-per-purpose .retention-header,
#cmplz-cookies-overview .cookies-per-purpose .retention {
    grid-column: 2 !important;
}

#cmplz-cookies-overview .cookies-per-purpose .function-header,
#cmplz-cookies-overview .cookies-per-purpose .function {
    grid-column: 3 !important;
}

/* Cellules header (libellés colonnes) */
#cmplz-cookies-overview .cookies-per-purpose .name-header,
#cmplz-cookies-overview .cookies-per-purpose .retention-header,
#cmplz-cookies-overview .cookies-per-purpose .function-header {
    padding: 12px 0 3px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

#cmplz-cookies-overview .cookies-per-purpose .name-header h5,
#cmplz-cookies-overview .cookies-per-purpose .retention-header h5,
#cmplz-cookies-overview .cookies-per-purpose .function-header h5 {
    font-size: 9px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: rgba(255, 255, 255, 0.2) !important;
    margin: 0 !important;
    font-weight: 600 !important;
    font-family: 'Inter', sans-serif !important;
    background: transparent !important;
}

/* Cellules valeurs */
#cmplz-cookies-overview .cookies-per-purpose .name,
#cmplz-cookies-overview .cookies-per-purpose .retention,
#cmplz-cookies-overview .cookies-per-purpose .function {
    padding: 3px 0 6px !important;
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    line-height: 1.5 !important;
    background: transparent !important;
}

/* Nom du cookie : monospace sur fond sombre */
#cmplz-cookies-overview .cookies-per-purpose .name a {
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none !important;
    font-family: 'Courier New', monospace !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    background: rgba(255, 255, 255, 0.06) !important;
    padding: 2px 7px !important;
    border-radius: 4px !important;
    display: inline-block !important;
    line-height: 1.6 !important;
}

#cmplz-cookies-overview .cookies-per-purpose .name a:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Nom sans lien (cas "Divers") */
#cmplz-cookies-overview .cookies-per-purpose .name:not(:has(a)) {
    font-family: 'Courier New', monospace !important;
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

/* ─── Info Card Style 5 — Alignement bouton en bas ──────────────────────────── */

.te-info-card.cvc-has-panel .te-info-card-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.te-info-card.cvc-has-panel .te-content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.te-info-card.cvc-has-panel .content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.te-info-card.cvc-has-panel .cvc-ic-toggle-wrap,
.te-info-card.cvc-has-panel .cvc-ic-toggle-btn {
    margin-top: auto;
}

/* ─── Info Card Style 5 — Bouton "En savoir plus" ───────────────────────────── */

.cvc-ic-toggle-wrap {
    margin-top: 14px;
}

.cvc-ic-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid var(--brand-color);
    color: var(--brand-color);
    padding: 6px 16px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, gap 0.2s ease;
}

.cvc-ic-toggle-btn:hover {
    background: var(--brand-color);
    color: #fff;
}

.cvc-ic-toggle-btn .fa-arrow-right {
    font-size: 0.75rem;
    transition: transform 0.3s ease;
}

.cvc-ic-toggle-btn:hover .fa-arrow-right {
    transform: translateX(3px);
}

/* ─── Card active ─────────────────────────────────────────────────────────── */

/* Transition sur les cards avec panel pour animer le passage actif/inactif */
.te-info-card.cvc-has-panel {
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.4s ease;
}

/* Card active : élévation + glow + gradient border plus vif */
.te-info-card.cvc-ic-active {
    transform: translateY(-5px);
    box-shadow: 0 12px 36px rgba(201, 60, 54, 0.40);
    background:
        linear-gradient(to right, #111111, #111111),
        linear-gradient(to bottom right, rgba(201, 60, 54, 0.90), rgba(201, 60, 54, 0.10));
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
}

.te-info-card.cvc-ic-active .cvc-ic-toggle-btn {
    background: var(--brand-color);
    color: #fff;
}

.te-info-card.cvc-ic-active .cvc-ic-toggle-btn .fa-arrow-right {
    transform: rotate(90deg);
}

/* ─── Panel partagé sous la section ──────────────────────────────────────── */

.cvc-ic-data-store {
    display: none !important;
}

.cvc-ic-panel-wrap {
    display: none !important;
}

.cvc-shared-detail {
    width: 100%;
    max-width: 1330px;
    margin: 0 auto;
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    box-sizing: border-box;
    transition: max-height 0.45s ease, opacity 0.3s ease, padding 0.3s ease, margin 0.3s ease;
}

.cvc-shared-detail.cvc-is-open {
    margin-top: 28px;
    padding-bottom: 38px;
    max-height: 1200px;
    opacity: 1;
}

.cvc-shared-detail-inner {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(201, 60, 54, 0.35);
    border-radius: 8px;
    padding: 28px 36px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    line-height: 1.75;
}

/* En-tête injecté dans le panel (icône + titre de la card) */
.cvc-panel-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(201, 60, 54, 0.25);
}

.cvc-panel-header .cvc-panel-icon img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.cvc-panel-header .cvc-panel-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0;
}

.cvc-shared-detail-inner p:last-child,
.cvc-shared-detail-inner ul:last-child,
.cvc-shared-detail-inner ol:last-child {
    margin-bottom: 0;
}

#politique_html_content h2,
#politique_html_content h3 {
    letter-spacing: 1px !important;
}

#politique_html_content hr {
    margin: 40px 0 !important;
}