/**
 * Theme Name:     GeneratePress Child
 * Author:         Cindy Flageul
 * Template:       generatepress
 * Text Domain:	   generatepress-child
 * Description:    GeneratePress is a lightweight WordPress theme built with a focus on speed and usability. Performance is important to us, which is why a fresh GeneratePress install adds less than 10kb (gzipped) to your page size. We take full advantage of the block editor (Gutenberg), which gives you more control over creating your content. If you use page builders, GeneratePress is the right theme for you. It is completely compatible with all major page builders, including Beaver Builder and Elementor. Thanks to our emphasis on WordPress coding standards, we can boast full compatibility with all well-coded plugins, including WooCommerce. GeneratePress is fully responsive, uses valid HTML/CSS, and is translated into over 25 languages by our amazing community of users. A few of our many features include 60+ color controls, powerful dynamic typography, 5 navigation locations, 5 sidebar layouts, dropdown menus (click or hover), and 9 widget areas. Learn more and check out our powerful premium version at https://generatepress.com
 */

/*Separateur*/
.separator {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #5A8DFF 50%, transparent 100%);
    margin: auto;
	width:50%;
}
/*********/
/*Grid*/
.grid {
    position: relative;
    clip-path: inset(0);
}

.grid::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(rgba(90, 141, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(90, 141, 255, 0.04) 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: -1;
    pointer-events: none;
}
/**************/
/*FAQ*/
/* Badge style terminal */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #0f0f1a;
    border: 1px solid rgba(90, 141, 255, 0.2);
    padding: 8px 16px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: #5A8DFF;
    margin-bottom: 24px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.badge::before {
    content: '>';
    color: #0000FF;
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* FAQ Items */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.faq-item {
    border: 1px solid rgba(90, 141, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover{
    background: transparent!important;
    border-color: rgba(90, 141, 255, 0.3);
    box-shadow: 0 0 30px rgba(90, 141, 255, 0.08);
}
.faq-question:focus {
    color: #fff;
    background: transparent;
    outline: none;
}

.faq-item.active {
    color: #fff;
    background: transparent;
    border-color: #5A8DFF;
    box-shadow: 0 0 40px rgba(90, 141, 255, 0.15);
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 1.05rem;
    font-weight: 500;
    color: #fff;
    transition: all 0.3s ease;
}

.faq-question:hover {
    color: #fff;
    background: transparent;
}

.faq-item.active .faq-question{
    color: #fff;
	    background: transparent;

}

/* Numéro de question style terminal */
.question-number {
    font-size: 0.7rem;
    color: #fff;
    background: rgba(0, 0, 255, 0.1);
    padding: 4px 8px;
    border-radius: 4px;
    margin-right: 12px;
    flex-shrink: 0;
}

.question-text {
    flex: 1;
}

/* Icon toggle */
.faq-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(90, 141, 255, 0.1);
    border-radius: 4px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.faq-icon svg {
    width: 16px;
    height: 16px;
    stroke: #5a8dff;
    transition: transform 0.3s ease;
}

.faq-item.active .faq-icon {
    background: #0000FF;
}

.faq-item.active .faq-icon svg {
    stroke: #fff;
    transform: rotate(45deg);
}

/* Answer */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
}

.faq-item.active .faq-answer {
    max-height: 500px;
}

.faq-answer-content {
    padding: 0 24px 24px 24px;
    color: #fff;
    line-height: 1.7;
    font-size: 0.95rem;
}

.faq-answer-content p {
    margin-bottom: 12px;
}

.faq-answer-content p:last-child {
    margin-bottom: 0;
}

/* Code inline style */
.faq-answer-content code {
    font-family: 'JetBrains Mono', monospace;
    background: rgba(0, 0, 255, 0.15);
    color: #5A8DFF;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.85em;
}

/* Lien */
.faq-answer-content a {
    color: #5A8DFF;
    text-decoration: none;
    border-bottom: 1px solid rgba(90, 141, 255, 0.3);
    transition: border-color 0.3s ease;
}

.faq-answer-content a:hover {
    border-color: #5A8DFF;
}

/* Divider décoratif */
.divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(90, 141, 255, 0.3) 50%, transparent 100%);
    margin: 24px 0;
}

/* Footer CTA */
.faq-footer {
    text-align: center;
    margin-top: 60px;
    padding: 40px;
    background: #0f0f1a;
    border: 1px solid rgba(90, 141, 255, 0.1);
    border-radius: 8px;
}

.faq-footer p {
    color: #8888aa;
    margin-bottom: 20px;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #0000FF;
    color: #fff;
    padding: 14px 28px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    border: 1px solid #0000FF;
}

.cta-button:hover {
    background: transparent;
    color: #5A8DFF;
    border-color: #5A8DFF;
    box-shadow: 0 0 30px rgba(90, 141, 255, 0.3);
}

.cta-button svg {
    width: 18px;
    height: 18px;
}

/* Responsive */
@media (max-width: 600px) {
    .container {
        padding: 40px 16px;
    }

    .faq-question {
        padding: 20px 16px;
        font-size: 0.95rem;
    }

    .faq-answer-content {
        padding: 0 16px 20px 16px;
    }

    .question-number {
        display: none;
    }
}
/************/
.logo-item {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.logo-item::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #5A8DFF, transparent);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.logo-item:hover::after {
  width: 60%;
}

.logo-item img {
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0.7;
}

.logo-item:hover img {
  transform: scale(1.05);
  opacity: 1;
}

.logo-tooltip {
  position: absolute !important;
  bottom: 100px !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(10px) !important;
  background: #0f0f25 !important;
  border: 1px solid rgba(90, 141, 255, 0.4);
  box-shadow: 0 4px 20px rgba(90, 141, 255, 0.3);
  color: #5A8DFF;
  padding: 18px !important;
  border-radius: 8px;
  font-size: 15px!important;
  text-align: left;
  line-height: 1.6;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  pointer-events: none;
  z-index: 100;
  max-width: 800px !important;
  width: 500px !important;
}

/* Flèche qui pointe vers le bas */
.logo-tooltip::before {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid rgba(90, 141, 255, 0.4);
}

/* Flèche intérieure (même couleur que le fond) */
.logo-tooltip::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 9px solid #0f0f25;
}

.logo-item:hover .logo-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) !important;
}
/**************/
p{
	font-size:16px;
	font-family: 'Open Sans';
}

/* BADGE */
.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 18px;
    border-radius: 50px;
    background: rgba(90, 141, 255, 0.08);
    border: 1px solid rgba(90, 141, 255, 0.2);
    font-size: 0.8rem;
    font-weight: 600;
    color: #5A8DFF;
    margin-bottom: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hero-tag::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #5A8DFF;
    box-shadow: 0 0 10px #5A8DFF;
    animation: pulse 2s ease-in-out infinite;
}

.container-parent a{
	color:#5a8dff!important;
	text-decoration:none;
}
.site-footer a:hover{
	text-decoration: underline!important;
	color:#5a8dff!important;
}
 a:hover, body a:focus{
	text-decoration: underline;
	color:#5a8dff;
}
/* ==========================================
   SECTION CAROUSEL
========================================== */
.tamper-carousel-section {
    position: relative;
    padding: 45px 2rem;
    overflow: hidden;
}

.carousel-container {
    margin: 0 auto;
}

/* ==========================================
   TITRE PRINCIPAL
========================================== */
.carousel-main-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: #fff;
    text-align: center;
    margin-bottom: 60px;
    line-height: 1.3;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================
   CAROUSEL WRAPPER
========================================== */
.carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
}

/* ==========================================
   SLIDES CONTAINER
========================================== */
.carousel-slides {
    flex: 1;
    overflow: hidden;
    border-radius: 20px;
    margin: 0 auto;
	 max-width: 1000px;
    position: relative;
}

.carousel-track {
	display: flex;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%; /* Ajoute ça aussi */
}

.carousel-slide {
    min-width: 100%;
	 width: 100%; /* Ajoute ça */
    flex-shrink: 0;
}

.slide-image {
    position: relative;
    width: 100%;
    background: rgba(20, 21, 30, 0.6);
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid rgba(90, 141, 255, 0.15);
    padding: 15px;
}

.slide-image img {
    width: auto;
    object-fit: contain;
    height: auto;
    display: block;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.slide-caption {
    text-align: center;
    color: #fff;
    font-size: 1.2rem;
    margin-top: 30px;
    padding: 0 20px;
}

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

.slide-title {
    font-size: 1.5em;
    color: #fff!important;
    margin-bottom: 12px;
}

.slide-description {
    font-size: 0.95em;
    color: #999!important;
	text-align:left;
    line-height: 1.6;
    max-width: 500px;
    margin: 0 auto;
}
/* ==========================================
   NAVIGATION BUTTONS
========================================== */
.carousel-nav {
    width: 60px;
    height: 60px;
	margin-bottom:15%;
    border-radius: 50%;
    background: rgba(90, 141, 255, 0.1);
    border: 2px solid rgba(90, 141, 255, 0.3);
    color: #5A8DFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.carousel-nav:hover {
    background: rgba(90, 141, 255, 0.2);
    border-color: rgba(90, 141, 255, 0.5);
    transform: scale(1.05);
}

.carousel-nav:active {
    transform: scale(0.95);
}

.carousel-nav svg {
    width: 24px;
    height: 24px;
}

/* ==========================================
   INDICATORS (DOTS)
========================================== */
.carousel-indicators {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
}

.indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(90, 141, 255, 0.2);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.indicator:hover {
    background: rgba(90, 141, 255, 0.4);
    transform: scale(1.2);
}

.indicator.active {
    background: #5A8DFF;
    width: 32px;
    border-radius: 6px;
}

/* ==========================================
   RESPONSIVE - TABLET
========================================== */
@media (max-width: 1024px) {
    .tamper-carousel-section {
        padding: 80px 2rem;
    }
    
    .carousel-main-title {
        font-size: 2rem;
        margin-bottom: 40px;
    }
    
    .carousel-nav {
        width: 50px;
        height: 50px;
    }
    
    .slide-caption {
        font-size: 1.1rem;
        margin-top: 24px;
    }
}

/* ==========================================
   RESPONSIVE - MOBILE
========================================== */
@media (max-width: 768px) {
    .tamper-carousel-section {
        padding: 60px 1rem;
    }
    
    .carousel-main-title {
        font-size: 1.75rem;
        margin-bottom: 30px;
    }
    
    .carousel-wrapper {
        gap: 10px;
    }
    
    .carousel-nav {
        width: 44px;
        height: 44px;
    }
    
    .carousel-nav svg {
        width: 20px;
        height: 20px;
    }
    
    .slide-image {
        padding: 12px;
    }
    
    .slide-caption {
        font-size: 1rem;
        margin-top: 20px;
    }
    
    .carousel-indicators {
        margin-top: 30px;
        gap: 10px;
    }
    
    .indicator {
        width: 10px;
        height: 10px;
    }
    
    .indicator.active {
        width: 28px;
    }
}

/* ==========================================
   RESPONSIVE - SMALL MOBILE
========================================== */
@media (max-width: 480px) {
    .carousel-wrapper {
        flex-direction: column;
        gap: 20px;
    }
    
    .carousel-nav {
        position: absolute;
        z-index: 10;
    }
    
    .carousel-nav.prev {
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
    }
    
    .carousel-nav.next {
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
    }
    
    .slide-caption {
        font-size: 0.95rem;
    }
}


/* 16. PULSE GLOW - Pulsation lumineuse */
.pulse-glow {
    opacity: 0;
    animation: pulseGlow 1.5s ease forwards;
    animation-timeline: view();
    animation-range: entry 0% cover 25%;
}

@keyframes pulseGlow {
    0% {
        opacity: 0;
        box-shadow: 0 0 0 rgba(90, 141, 255, 0);
    }
    50% {
        box-shadow: 0 0 40px rgba(90, 141, 255, 0.6);
    }
    100% {
        opacity: 1;
        box-shadow: 0 0 20px rgba(90, 141, 255, 0.3);
    }
}
/*********************/



/* TEST*/

.stack-scroll-container {
    position: relative;
    padding: 50px 2rem;
	background-color:transparent!important;
}

/* ==========================================
   INTRO SECTION
========================================== */
.section-intro {
    text-align: center;
    max-width: 1100px;
    margin: 0 auto 100px;
}

.hero-tag {
    display: inline-flex;
    align-items: center;
    padding: 10px 24px;
    border-radius: 50px;
    background: rgba(90, 141, 255, 0.08);
    border: 1px solid rgba(90, 141, 255, 0.2);
    font-size: 0.9rem;
    font-weight: 600;
    color: #5A8DFF;
    margin-bottom: 32px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.section-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    color: #fff;
    margin-bottom: 32px;
    line-height: 1.2;
}

.gradient-text {
    background: linear-gradient(135deg, #5A8DFF 0%, #1013C9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-description {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.2rem;
    line-height: 1.8;
    max-width: 900px;
    margin: 0 auto;
}

/* ==========================================
   CARDS EMPILÉES - IMPOSANTES
========================================== */
.stack-card {
    position: sticky;
    max-width: 800px;
    margin: 0 auto 60px;
    padding: 30px 60px;
    border-radius: 16px;
	background: rgba(90, 141, 255, 0.03);
    backdrop-filter: blur(20px);
    border: 2px solid rgba(90, 141, 255, 0.15);
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.stack-card::before {
	content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: radial-gradient(ellipse at center, 
    rgba(90, 141, 255, 0.15) 0%, 
    rgba(90, 141, 255, 0.05) 77%, 
    transparent 100%
  );
  z-index: -2;
}

.stack-card::after{
	  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 2px;
  background: 
    radial-gradient(ellipse at top left, rgba(90, 141, 255, 0.8) 0%, transparent 60%),
    radial-gradient(ellipse at bottom right, rgba(16, 19, 201, 0.8) 0%, transparent 60%);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
}



/* Positions sticky progressives - Les suivantes passent AU-DESSUS */
.card-1 { top: 200px; z-index: 1; }
.card-2 { top: 200px; z-index: 2; }
.card-3 { top: 200px; z-index: 3; }
.card-4 { top: 200px; z-index: 4; }

/* Hover effect */
.stack-card:hover {
	background: rgba(90, 141, 255, 0.08);
    transform: translateY(-10px);
    box-shadow: 0 30px 80px rgba(90, 141, 255, 0.2);
}

/* ==========================================
   CARD CONTENT - GRANDE TAILLE
========================================== */
.card-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 28px 0;
    line-height: 1.3;
}

.card-text {
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    max-width: 900px;
}

/* ==========================================
   RESPONSIVE - TABLET
========================================== */
@media (max-width: 1024px) {
    .stack-scroll-container {
        padding: 100px 2rem;
    }
    
    .section-intro {
        margin-bottom: 80px;
        max-width: 900px;
    }
    
    .section-title {
        font-size: clamp(2rem, 4vw, 3rem);
    }
    
    .section-description {
        font-size: 1.1rem;
    }
    
    .stack-card {
        padding: 50px 60px;
        margin-bottom: 50px;
        min-height: 350px;
    }
    
    .card-1, .card-2, .card-3, .card-4 {
        top: 80px;
    }
    
    .card-title {
        font-size: 1.9rem;
        margin-bottom: 24px;
    }
    
    .card-text {
        font-size: 1.1rem;
    }
}

/* ==========================================
   RESPONSIVE - MOBILE
========================================== */
@media (max-width: 768px) {
    .stack-scroll-container {
        padding: 80px 1.5rem;
    }
    
    .section-intro {
        margin-bottom: 60px;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .section-description {
        font-size: 1rem;
    }
    
    .stack-card {
        padding: 40px 32px;
        margin-bottom: 40px;
        min-height: 300px;
    }
    
    .card-1, .card-2, .card-3, .card-4 {
        top: 60px;
    }
    
    .card-title {
        font-size: 1.6rem;
        margin-bottom: 20px;
    }
    
    .card-text {
        font-size: 1rem;
        line-height: 1.7;
    }
}

/* ==========================================
   RESPONSIVE - SMALL MOBILE
========================================== */
@media (max-width: 480px) {
    .stack-scroll-container {
        padding: 60px 1rem;
    }
    
    .hero-tag {
        padding: 8px 18px;
        font-size: 0.8rem;
    }
    
    .section-intro {
        margin-bottom: 40px;
    }
    
    .stack-card {
        position: relative;
        top: 0 !important;
        margin-bottom: 24px;
        padding: 32px 24px;
        min-height: 250px;
    }
    
    .card-title {
        font-size: 1.4rem;
    }
    
    .card-text {
        font-size: 0.95rem;
    }
}
/**********/
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.6s ease forwards;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/*******/
.faq-container-custom {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 0 ;
}

.faq-tabs-custom {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-container-custom .tab-button-custom {
    position: relative;
    border-radius: 12px;
    background: rgba(90, 141, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: none;
    color: #ffffff;
    padding: 1.75rem 2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
    font-weight: 500;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    isolation: isolate;
}

.faq-container-custom .tab-button-custom::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 1px;
    background: 
        radial-gradient(ellipse at top left, rgba(90, 141, 255, 0.4) 0%, transparent 60%),
        radial-gradient(ellipse at bottom right, rgba(16, 19, 201, 0.4) 0%, transparent 60%);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
    transition: all 0.3s ease;
}

.faq-container-custom .tab-button-custom:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(90, 141, 255, 0.15);
}

.faq-container-custom .tab-button-custom:hover::before {
    background: 
        radial-gradient(ellipse at top left, rgba(90, 141, 255, 0.6) 0%, transparent 60%),
        radial-gradient(ellipse at bottom right, rgba(16, 19, 201, 0.6) 0%, transparent 60%);
}

.faq-container-custom .tab-button-custom:active {
    transform: scale(0.98);
    background: radial-gradient(ellipse at top left,
        rgba(90, 141, 255, 0.4) 0%,
        rgba(33, 33, 81, 0.35) 48%,
        rgba(16, 19, 201, 0.3) 100%
    );
}

.faq-container-custom .tab-button-custom:active::before {
    background: linear-gradient(135deg, 
        #5A8DFF 0%, 
        #1013C9 100%
    );
}

.faq-container-custom .tab-button-custom.active {
    background: radial-gradient(ellipse at top left,
        rgba(37, 37, 38, 0.3) 0%,
        rgba(33, 33, 81, 0.3) 48%,
        rgba(90, 141, 255, 0.3) 100%
    );
    box-shadow: 0 4px 16px rgba(90, 141, 255, 0.2);
}

.faq-container-custom .tab-button-custom.active::before {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0) 0%, 
        #5A8DFF 70%, 
        #1013C9 100%
    );
}

.faq-container-custom .tab-header-custom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-weight: 600;
    font-size: 1.1rem;
    gap: 1rem;
}
.faq-container-custom .tab-text-custom {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.7;
    font-size: 0.95rem;
    font-weight: 400;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    margin-top: 0;
}

.faq-container-custom .tab-button-custom.active .tab-text-custom {
    max-height: 500px;
    margin-top: 0.5rem;
}

.faq-container-custom .arrow-custom {
    font-size: 1rem;
    transition: transform 0.3s ease, color 0.3s ease;
    color: rgba(255, 255, 255, 0.6);
    flex-shrink: 0;
}

.faq-container-custom .tab-button-custom:hover .arrow-custom {
    color: rgba(255, 255, 255, 0.9);
}

.faq-container-custom .tab-button-custom.active .arrow-custom {
    transform: rotate(90deg);
    color: #5A8DFF;
}

@media (max-width: 768px) {
    .faq-container-custom {
        padding: 2rem 1rem;
    }
    
    .faq-container-custom .tab-button-custom {
        padding: 1.5rem 1.25rem;
    }
    
    .faq-container-custom .tab-header-custom {
        font-size: 1rem;
    }
    
    .faq-container-custom .tab-text-custom {
        font-size: 0.9rem;
    }
}

/* Pagination query boucle*/
.page-numbers , .gb-text-0512192e, .gb-text-0948e39e{
	border-radius:6px;
	background-color:#0E1117!important;
	color:#fff!important;
}
.page-numbers:hover,  .gb-text-0512192e:hover, .gb-text-0948e39e:hover {
	border-radius:6px;
	background-color:#111620!important;
	color:#fff!important;
}
.page-numbers.current{
	background-color:#0000FF!important;
	color:#fff!important;
}
/*****************/
/* Soulignement des titres query boucle*/
/*.gb-loop-item a {
    color: #fff;
    text-decoration: none;
    position: relative;
    display: inline-block;
}

.gb-loop-item a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #fff;
    transition: width 0.3s ease;
}

.gb-loop-item a:hover {
    color: #fff;
    text-decoration: none;
}

.gb-loop-item a:hover::after {
    width: 100%;
}*/

/****************/
/* Mise en page Etude de cas */
   .container-parent {
        display: flex;
        gap: 20px; /* Espace entre les colonnes */
        align-items: flex-start; /* Important ! */
    }
    
    .colonne-gauche {
        flex: 1;
        /* C'est elle qui définit la hauteur */
    }
    
    .colonne-droite {
        position: sticky;
        top: 120px; /* Hauteur header + marge */
        align-self: flex-start;
    }
ul{
	margin:0 0 1.5em 2em;
}
/**************/
/* Header fixe */

.site-header {
  position: fixed !important;
 
  width: 100%;
  z-index: 9999;
  background: transparent;
  transition: all 0.3s ease;
}



/* Largeur normale par défaut */
.inside-header {
  margin: 0 auto;
  padding: 0 40px;
	width:70%;
  transition: all 0.3s ease;
}

/* Au scroll : fond + pleine largeur */
.site-header.scrolled {

	backdrop-filter: blur(10px);
}

/* Au scroll : inside-header en pleine largeur */
.site-header.scrolled .inside-header {
  max-width: 100% !important;
  min-width: 70% !important;
  padding: 0 60px;
}

.site-footer, .site-footer a {
	color:#fff;
	
}
.site-footer{
	border-top: 1px solid #fff;
}
.site-footer a{
	text-decoration:none;
}
.site-footer a:hover {
	cursor:pointer;
}
h1, h2 ,h3, h4{
	font-family:bc-barell;
}

.one-container .site-content{
	padding:0;
}
.btn-primary {
  background-color: #0000FF;
  color: #fff;
	text-decoration:none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  isolation: isolate;
  position: relative;
  padding: 12px 24px;
}

.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  padding: 2px;
  background: linear-gradient(135deg, transparent, #5A8DFF);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
  opacity: 1;
  transition: opacity 0.6s ease;
}

.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  padding: 2px;
  background: linear-gradient(90deg, transparent, #5A8DFF);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.btn-primary:hover::before {
  opacity: 0;
}

.btn-primary:hover::after {
  opacity: 1;
}

.btn-secondary {
  background-color: transparent;
  color: #fff;
  text-decoration: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  isolation: isolate;
  position: relative;
  padding: 12px 24px;
  transition: padding 0.3s ease, box-shadow 0.3s ease;
}

.btn-secondary::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  padding: 2px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), #0000FF);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
  opacity: 1;
  transition: opacity 0.6s ease;
}

.btn-secondary::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  padding: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.3), #0000FF);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.btn-secondary:hover::before {
  opacity: 0;
}

.btn-secondary:hover::after {
  opacity: 1;
}
  z-index: -1;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.btn-secondary:hover::before {
  opacity: 0;
}

.btn-secondary:hover::after {
  opacity: 1;
}

.ctn-glass {
  position: relative;
  border-radius: 16px;
  background: rgba(90, 141, 255, 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Dégradé radial en fill (fond) */
.ctn-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: radial-gradient(ellipse at center, 
    rgba(90, 141, 255, 0.15) 0%, 
    rgba(90, 141, 255, 0.05) 77%, 
    transparent 100%
  );
  z-index: -2;
}


/* Border avec double dégradé radial - bleu clair top-left, bleu foncé bottom-right */
.ctn-glass::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 2px;
  background: 
    radial-gradient(ellipse at top left, rgba(90, 141, 255, 0.8) 0%, transparent 60%),
    radial-gradient(ellipse at bottom right, rgba(16, 19, 201, 0.8) 0%, transparent 60%);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
}

.ctn-glass-2 {
  position: relative;
  border-radius: 16px;
	padding: 32px;
	color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Premier fill : gradient linear diagonal - blanc top-left → bleu clair → bleu foncé bottom-right - 10% opacité */
.ctn-glass-2::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(310deg, 
    rgba(255, 255, 255, 0) 0%, 
    rgba(90, 141, 255, 0) 57%, 
    rgba(16, 19, 201, 0) 100%
  );
  z-index: -3;
}

/* Deuxième fill : radial gradient top-left - noir → bleu violet → bleu clair - 20% opacité */
.ctn-glass-2 {
  background: radial-gradient(ellipse at top left,
    rgba(37, 37, 38, 0.2) 0%,
    rgba(33, 33, 81, 0.2) 48%,
    rgba(90, 141, 255, 0.2) 100%
  );
}

/* Border : gradient linear diagonal - blanc transparent top-left → bleu clair → bleu foncé bottom-right - 100% opacité */
.ctn-glass-2::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0) 0%, 
    #5A8DFF 70%, 
    #1013C9 100%
  );
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
}

.has-inline-color{
  background: linear-gradient(135deg, 
    #FFFFFF 9%, 
    #5A8DFF 72%, 
    #1013C9 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/******************/

.comparison-table {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 12px;
  max-width: 1000px;
  margin: 0 auto;
}

.table-cell {
  padding: 20px;
  text-align: center;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.table-cell.header {
  min-height: 90px;
  padding: 24px;
  position: relative;
}

.table-cell.header img {
  max-width: 150px;
  height: auto;
}

.table-cell.label {
  text-align: left;
  justify-content: flex-start;
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Highlight subtil colonne Tamper */
.table-cell.tamper-col {
  background: radial-gradient(ellipse at top left,
    rgba(90, 141, 255, 0.25) 0%,
    rgba(33, 33, 81, 0.2) 48%,
    rgba(90, 141, 255, 0.2) 100%
  );
}

.table-cell.tamper-col.header {
  border: 1.5px solid rgba(90, 141, 255, 0.5);
  box-shadow: 0 0 15px rgba(90, 141, 255, 0.25);
}

/* Badge "Notre solution" */
.badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #5A8DFF, #1013C9);
  color: white;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(90, 141, 255, 0.5);
  white-space: nowrap;
}

/* Mise en avant du prix */
.price-highlight {
  flex-direction: column;
}

.price-label {
  font-size: 0.75rem;
  opacity: 0.8;
  margin-bottom: 4px;
}

.price-value {
  font-size: 1.6rem;
  font-weight: 700;
  background: linear-gradient(135deg, #FFFFFF 9%, #5A8DFF 72%, #1013C9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
}

.price-value span {
  font-size: 1rem;
}

.price-savings {
  font-size: 0.75rem;
  color: #5A8DFF;
  margin-top: 4px;
  font-weight: 600;
}

/* Animation hover sur colonne Tamper */
.table-cell.tamper-col:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(90, 141, 255, 0.25);
}