/*
Theme Name: BigNeurons New Theme
Author:     Duan
Description: Thème WordPress pour nouvelle version du site Big Neurons.
Version:    1.0.5
*/

@font-face {
    font-family: 'Clash Display';
    src: url('assets/fonts/ClashDisplay-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap; /* Améliore le chargement visuel */
}

@font-face {
    font-family: 'Clash Display';
    src: url('assets/fonts/ClashDisplay-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Clash Display';
    src: url('assets/fonts/ClashDisplay-Semibold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Clash Display';
    src: url('assets/fonts/ClashDisplay-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'Inter', sans-serif;
    padding: 0;
    background-color: #111111;
    overflow-x: clip !important;
    width: calc(100vw - 15px);
    min-height: 100vh;
    padding: 18px 0 0 0;
    font-weight: 400;
    color: white;
}


@media (max-width: 768px) {
    body {
        padding: 0;
        width: 100vw;
    }
}

@media (max-width: 420px) {
    body {
        width: 100vw;
    }
}

.container-fluid {
    padding: 0 30px;
}

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

}

h1,
h2,
h3,
h4 {
    font-family: 'Clash Display Light', sans-serif;
}

p {
    font-weight: 200;
}

.navbar {
    position: sticky;
    top: 0;
    z-index: 10;
    min-height: 70px;
    padding: 0 30px;
    transition:
        background-color 0.3s ease,
        backdrop-filter 0.3s ease;
}

.home-logo-anchor img {
    width: 148px;
}

@media (max-width: 768px) {
    .home-logo-anchor img {
        transform: scale(0.7);
        transform-origin: center;
    }

    .navbar {
        padding: 0;
    }
}

/* Classe appliquée au scroll */
.navbar.glass-effect {
    background-color: rgba(17, 17, 17, 0.6);
    backdrop-filter: blur(40px);
    transition: transform 0.3s ease, backdrop-filter 0.3s ease;
}


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

@media (min-width: 768px) {
    .nav-menu-el-col-5 {
        margin-left: 32px;
    }
}



.navbar-mobile {
    position: sticky;
    top: 70px;
    z-index: 10;
    height: 0;
    transition:
        background-color 0.3s ease,
        backdrop-filter 0.3s ease;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.2s ease;
    display: none;
}

.navbar-mobile.mobile-menu-open {
    height: auto;
    display: flex;
    transform: scaleY(1);
}

.navbar-mobile-el {
    text-align: center;
    padding: 16px;
    margin-top: 0px;
    font-family: 'Clash Display', sans-serif;
    background-color: rgba(17, 17, 17, 0.6);
    backdrop-filter: blur(40px);
    transition: transform 0.3s ease, backdrop-filter 0.3s ease;
}

.bn-bg-purple {
    background-color: #d800ff;
}

.max-row {
    max-width: 1440px;
}

.bn-font {
    font-family: 'Clash Display', sans-serif;
}

.brief-btn {
    font-family: 'Clash Display', sans-serif;
    background-color: #d800ff;
    color: #fff;
    width: fit-content;
    min-width: 102px;
    padding: 6px 12px;
    text-align: center;
    border-radius: 24px;
    transition: background-color 0.4s, color 0.4s;
}

.brief-btn:hover {
    background-color: white;
    color: #111111;
}

.mobile-menu-icon {
    font-family: 'Clash Display', sans-serif;
    font-size: 20px;
    opacity: 0.7;
    transition: color 0.2s ease;
}

.mobile-menu-icon:hover,
.mobile-menu-icon.active {
    cursor: pointer;
    color: #d800ff;
}

.menu-el {
    font-family: 'Clash Display', sans-serif;
    opacity: 0.7;
    font-size: 18px;
}


.inherit-a {
    color: inherit;
    text-decoration: none;
}

footer {
    margin-top: 110px;
}

@media (max-width: 768px) {
    footer {
        margin-top: 10px;
    }
}

.footer-logo {
    margin-bottom: 30px;
}

img.footer-logo {
    width: 175px;
}

.footer-column {
    margin-bottom: 50px;
}

.footer-heading {
    margin-bottom: 16px;
    opacity: 0.3;
    font-weight: light;
}

.footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

/* Comportement mobile spécifique */
@media (max-width: 768px) {
    .footer-column {
        display: grid;
        grid-template-columns: 5fr 7fr;
        /* 50% pour heading, 50% pour la liste */
        gap: 0;
    }

    .footer-heading {
        grid-column: 1;
        margin-bottom: 0;
    }

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

.footer-list li {
    line-height: 1.1;
    font-weight: 300;
    font-size: 14px;
}

.footer-info {
    font-weight: 300;
    font-size: 12px;
    opacity: 0.5;
}

.footer-bottom {
    opacity: 0.7;
    font-weight: 200;
    margin-bottom: 30px;
}

ul.footer-list li a {
    color: inherit;
    text-decoration: none;
}

.banner-media video {
    width: 100%;
    height: auto;
    /* hauteur auto pour conserver le ratio */
    max-height: 100%;
    /* limite la hauteur au conteneur */
    object-fit: cover;
    display: block;
}

.home-banner-text {
    font-size: 32px;
    margin-bottom: 16px;
    line-height: 1;
}

@media (max-width: 768px) {
    .home-banner-text {
        font-size: 18px;
        letter-spacing: 1px;
        line-height: 1.2;
    }

    .home-banner-text p {
        width: 90%;
        margin-top: 36px;
    }
}

.home-section-1-header,
.section-large-title {
    font-size: 50px;
    font-weight: 700;
    margin-bottom: 32px;
}

.home-section-1-cards,
.home-section-4-cards {
    gap: 0 20px;
    margin: 0 !important;
    padding: 0 !important;
}

.home-section-1-cards .col-md-4,
.home-section-4-cards .col-md-4 {
    padding: 0 !important;
}

@media (min-width: 768px) {

    .home-section-1-cards .col-md-4,
    .home-section-4-cards .col-md-4 {
        flex: 0 0 calc((100% - 40px) / 3) !important;
        max-width: calc((100% - 40px) / 3) !important;
    }
}

/* Version Responsive Intelligente */

.home-section-1-card img {
    width: 100%;
    object-fit: cover;
    margin-bottom: 16px;
    
    /* 1. Taille par défaut (Mobile et petites tablettes) */
    height: 250px; 
}

/* 2. Pour les écrans moyens (Tablettes paysage & Petits PC portables 13") */
/* Dès que l'écran dépasse 768px de large */
@media (min-width: 768px) {
    .home-section-1-card img {
        height: 320px; /* On augmente un peu, mais pas trop pour éviter l'effet "gratte-ciel" */
    }
}

/* 3. Pour les grands écrans (Desktop classique 15-16" et +) */
/* Dès que l'écran dépasse 1200px de large */
@media (min-width: 1200px) {
    .home-section-1-card img {
        height: 450px; /* On applique ta hauteur idéale UNIQUEMENT ici */
    }
}

.home-section-1-card-title {
    font-size: 28px;
    opacity: 0.8;
    line-height: 1.2;
}

.home-section-1-card-tags {
    display: flex;
    flex-wrap: wrap;
}

.cards-tag {
    display: inline-block;
    /* peut rester */
    font-family: 'Clash Display', sans-serif;
    padding: 6px 10px;
    font-size: 14px;
    background-color: #5F4576;
    width: fit-content;
    border-radius: 16px;
    margin-right: 6px;
    margin-bottom: 6px;
    white-space: nowrap;
}

.voir-plus-prod-btn {
    font-family: 'Clash Display', sans-serif;
    padding: 8px 24px;
    color: rgba(255, 255, 255, 0.7);
    border: solid 2px rgba(255, 255, 255, 0.7);
    border-radius: 24px;
    width: fit-content;
    font-size: 18px;
    margin-top: 40px;
}

.voir-plus-prod-btn:hover {
    cursor: pointer;
}

/* animation logo companies home  */

.home-section-2-companies {
    overflow: hidden;
    width: 110%;
    padding: 20px 0;
    margin-left: -40px;
}

.companies-scroll-wrapper {
    display: flex;
    width: fit-content;
}

.companies-scroll-group {
    display: flex;
    gap: 40px;
    /* Espace entre les images */
    padding: 0 20px;
}

.company-icon {
    height: auto;
    /* Ajustez selon vos besoins */
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
    scale: 0.8;
    margin-right: 16px;
}

.home-section-3-inner {
    padding-left: 20px;
}

@media (max-width: 768px) {
    .home-section-3-inner {
        padding-left: 0px;
    }
}

.home-section-3-header {
    line-height: 1.2;
    font-size: 50px;
    margin-bottom: 24px;
}

.home-section-3-text {
    padding: 0 50px 0 0;

}

.home-section-3-text p {
    font-weight: 200;
    opacity: 0.8;
}

.agence-section-1-card {
    width: 30%;
}

.agence-section-1-card-name {
    font-size: 28px;
}

@media (max-width: 768px) {
    .agence-section-1-card {
        width: 48%;
    }

    .agence-section-1-card-name {
        font-size: 20px;
        line-height: 1.1;
    }

    .agence-section-1-card-description {
        font-size: 14px;
    }

}

.home-section-3-card-description,
.home-section-4-card-description,
.agence-section-1-card-description {
    opacity: 0.7;
    font-weight: 200;
}

.brief-text {
    font-size: 72px;
    color: #d800ff;
    width: fit-content;
    transition: transform 0.4s ease;
    line-height: 1;
}

.brief-text:hover {
    transform: translateY(-4px);
}

/* Animation */
@keyframes pulse-brief {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

.brief-text-parent {
    margin-bottom: 50px;
    margin-top: 100px;
    width: fit-content;
}

/* Classe qui déclenche l'animation */
.brief-text-parent.animate-pulse {
    animation: pulse-brief 2.5s ease-in-out 0s 2;
}

@media (max-width: 768px) {
    .brief-text-parent {
        margin-top: 0;
        width: 90%;
    }
}

@media(max-width: 768px) {
    .brief-text {
        font-size: 64px;
    }
}

@media(max-width: 420px) {
    .brief-text {
        font-size: 48px;
    }
}


.square-brackets-text {
    font-size: 24px;
    opacity: 0.7;
}

.agence-section-1-header {
    font-size: 48px;
    line-height: 1;
}

@media (max-width: 768px) {
    .agence-section-1-header {
        font-size: 36px;
    }
}

/*=================================
    gestion agence section 1 cards 
==================================*/

.agence-section-1-cards {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 20px 0;
    scroll-behavior: smooth;

    /* Style scrollbar sombre */
    scrollbar-width: thin;
    scrollbar-color: #555 #222;
    width: 100%;
}

/* Webkit scrollbar (Chrome, Safari, Edge) */
.agence-section-1-cards::-webkit-scrollbar {
    height: 10px;
}

.agence-section-1-cards::-webkit-scrollbar-track {
    background: #222;
}

.agence-section-1-cards::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 10px;
}

.agence-section-1-cards::-webkit-scrollbar-thumb:hover {
    background-color: #888;
}

/* Retirer les boutons de flèches */
.agence-section-1-cards::-webkit-scrollbar-button {
    display: none;
}

/* Empêcher les cartes de se rétrécir */
.agence-section-1-card {
    flex-shrink: 0;
    overflow: hidden;
    scroll-snap-align: center;
}

.agence-section-2-text p {
    font-weight: 200;
    opacity: 0.8;
}

/* awards table */

.awards-grid {
    display: grid;
    grid-template-columns: 1fr 3fr 4fr 4fr;
    align-items: center;
    margin: 20px 0;
}

.awards-grid>div {
    padding: 6px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.7);
    font-weight: 200;
}

.awards-grid>div:not(.agence-section-4-grid-header) {
    padding: 24px 10px;
    font-weight: 200;
    min-height: 80px;
}

.awards-grid>div:nth-last-child(-n+4) {
    border-bottom: none;
}

.agence-section-4-grid-header {
    background: none;
    font-size: 14px;
    font-weight: 200;
    opacity: 0.7;
}

/* Masquer la grille desktop sur mobile */
@media (max-width: 767.98px) {
    .awards-grid {
        display: none;
    }
}

/* Awards Mobile - Styles de base (hors media query) */

.awards-mobile {
    flex-direction: column;
    width: 100%;
    gap: 12px;
}

.award-mobile-header {
    display: grid;
    grid-template-columns: 3fr 5fr 4fr;
    font-weight: 200;
    font-size: 14px;
    opacity: 0.7;
    padding: 6px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.7);
    min-height: 40px;
    align-items: center;
}

.award-mobile-item {
    display: grid;
    grid-template-columns: 3fr 5fr 4fr;
    padding: 12px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.7);
    gap: 4px;
    min-height: 40px;
    align-items: center;
    font-size: 16px;
}

.award-mobile-item>div:not(.award-mobile-platform):not(.award-mobile-detail) {
    font-size: 16px;
}

.award-mobile-platform {
    grid-column: 1 / -1;
    font-weight: 200;
    font-size: 14px;
    opacity: 0.8;
    min-height: 30px;
    display: flex;
    align-items: center;
    padding-bottom: 4px;
}

.award-mobile-detail {
    grid-column: 1 / -1;
    font-size: 16px;
    min-height: 40px;
    display: flex;
    align-items: center;
}

/* Media query uniquement pour cacher le grid desktop */

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

.projet-niv-1-header {
    line-height: 1;
}

.projet-niv-1-header-large {
    font-size: 70px;
}

@media (max-width: 768px) {
    .projet-niv-1-header-large {
        font-size: 36px;
    }
}

.project-tags-container {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* scroll fluide sur mobile */
    scrollbar-width: thin;
    /* Firefox */
    scrollbar-color: #7b7c7b #434343;
    /* thumb / track */
}

/* Pour Webkit (Chrome, Edge, Safari) */
.project-tags-container::-webkit-scrollbar {
    height: 6px;
    /* épaisseur de la scrollbar */
}

.project-tags-container::-webkit-scrollbar-track {
    background: #434343;
    /* fond de la scrollbar */
    border-radius: 3px;
}

.project-tags-container::-webkit-scrollbar-thumb {
    background-color: #7b7c7b;
    /* couleur du thumb */
    border-radius: 3px;
    border: 1px solid #434343;
    /* optionnel : léger contour pour séparer */
}

.project-tags-container::-webkit-scrollbar-button {
    display: none;
    /* supprime les flèches */
}

.project-tag.active,
.project-tag:hover {
    color: black;
    background-color: white;
    width: fit-content;
    padding: 2px 16px;
    border-radius: 18px;
    margin-right: 24px;
}

.project-tag {
    width: fit-content;
    padding: 2px 16px;
    border-radius: 18px;
    margin-right: 8px;
    font-size: 200;
    transition: all 0.4s ease;
    margin-bottom: 16px;
    flex: 0 0 auto;
    white-space: nowrap;
}

.project-tag:hover {
    cursor: pointer;
}

.banner-produit {
    width: calc(100% + 40px);
    /* 20px à gauche + 20px à droite */
    margin-left: -20px;
    margin-right: -20px;
    box-sizing: border-box;
    padding-bottom: 41.67%;
}

.projet-niv-2-section-3-text,
.projet-niv-2-section-4-text {
    font-family: 'Clash Display', sans-serif;
    font-size: 36px;
    line-height: 1.2;
}

.projet-niv-2-section-4-card-title {
    font-family: 'Clash Display', sans-serif;
    font-size: 36px;
    line-height: 1.2;
}

.expertise-content> :last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.expertise-heading {
    padding-top: 52px;
}

.expertise-title {
    font-family: 'Clash Display', sans-serif;
    font-size: 70px;
    border-bottom: solid 1px rgba(161, 160, 160, 0.2);
    line-height: 1.2;
    padding-bottom: 46px;
    margin-bottom: 30px;
}

@media (max-width: 768px) {
    .expertise-title {
        font-size: 58px;
        margin-bottom: 40px;
    }

    .expertise-title div {
        padding-top: 10px;
        width: 70%;
        line-height: 0.95;
    }
}

.expertise-card-set-odd,
.expertise-card-set-even {
    padding-bottom: 64px;
    border-bottom: solid 1px rgba(161, 160, 160, 0.2);
    margin-bottom: 30px;
}

@media (max-width: 768px) {

    .expertise-card-set-odd,
    .expertise-card-set-even {
        padding-bottom: 75px;
    }

    .expertise-card-set-odd .col-md-6:first-child,
    .expertise-card-set-even .col-md-6:first-child {
        order: 2;
        /* Le contenu texte passe en second */
    }

    .expertise-card-set-odd .col-md-6:last-child,
    .expertise-card-set-even .col-md-6:last-child {
        order: 1;
        /* L'image passe en premier */
    }
}

.expertise-card-img {
    text-align: end;
}

.expertise-card-set-even .expertise-card-img {
    padding-right: 25px;
}

@media (max-width: 768px) {
    .expertise-card-set-even .expertise-card-img {
        padding-right: 0px;
    }
}

.expertise-title div {
    transform: scaleX(1.01);
    transform-origin: left;
}

.expertise-card-title {
    font-family: 'Clash Display', sans-serif;
    font-size: 48px;
    line-height: 1.3;
    margin-top: -12px;
    margin-bottom: 10px;
    transform: scaleX(1.04);
    transform-origin: left;
}

@media (max-width: 768px) {
    .expertise-card-title {
        font-size: 32px;
        margin-top: 20px;
    }
}

@media (max-width: 420px) {
    .expertise-card-title {
        font-size: 28px;
        margin-top: 20px;
    }
}

.expertise-card-description {
    font-family: 'Clash Display', sans-serif;
    font-size: 22px;
    opacity: 0.6;
    width: 90%;
    line-height: 1;
    margin-bottom: min(40px, 5%);
}

@media (max-width: 768px) {
    .expertise-card-description {
        width: 100%;
        font-size: 20px;
        margin-bottom: 40px;
    }
}

.expertises-container-title {
    opacity: 0.5;
    font-size: 16px;
    margin-bottom: 16px;
}

@media (max-width: 768px) {

    .expertises-container-title {
        font-size: 20px;
        margin-bottom: 24px;
    }
}

.expertise-card-tags {
    margin-bottom: 45px;
}

.expertise-card-source {
    font-size: 16px;
    width: 90%;
    margin-bottom: min(30px, 5%);
    font-size: 200;
    opacity: 0.5;
}

@media (max-width: 768px) {
    .expertise-card-source {
        width: 100%;
    }
}

.expertise-btn {
    font-family: 'Clash Display', sans-serif;
    padding: 8px 24px;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.7);
    border: solid 2px rgba(255, 255, 255, 0.4);
    border-radius: 24px;
    width: fit-content;
}

@media (max-width: 768px) {
    .expertise-btn {
        padding: 12px 32px;
        font-size: 24px;
        border: solid 2px rgba(255, 255, 255, 0.7);
        border-radius: 34px;
        width: 100%;
        text-align: center;
        font-weight: 500;
    }
}

@media (max-width: 420px) {
    .expertise-btn {
        font-size: 18px;
    }
}

.immersion-section-6 {
    margin-top: 250px;
}

.immersion-large-text {
    font-size: 42px;
    margin-bottom: 16px;
    font-weight: bold;
    line-height: 1.2;
}

@media (max-width: 768px) {
    .immersion-large-text {
        font-size: 32px;
    }
}

.purple-text {
    font-family: 'Clash Display', sans-serif;
    color: #8a00ff;
}

.immersion-section-1-card {
    font-family: 'Clash Display', sans-serif;
    background-color: #1c191e;
    font-size: 24px;
    height: 290px;
    line-height: 1.2;
    padding: 16px;
}

/* Section 2 - Animation fade-in et bounce */

/* Container principal */
.immersion-section-2 .max-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    position: relative;
}

/* Texte principal au centre */
.immersion-section-2-text {
    font-family: 'Clash Display', sans-serif;
    opacity: 0;
    font-size: 80px;
    text-align: center;
    line-height: 1;
    transition: opacity 0.3s ease-out;
    z-index: 2;
}

.immersion-section-2-text.visible {
    opacity: 1;
}

/* Ligne de logos du haut - coins supérieurs gauche et droit */
.immersion-section-2-logos-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 900px;
    padding: 0 40px;
}

/* Ligne de logos du bas - coins inférieurs gauche et droit */
.immersion-section-2-logos-bottom {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 900px;
    padding: 0 40px;
}

/* Styles individuels des logos */
.parallax-logo {
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    flex-shrink: 0;
}

.parallax-logo img {
    display: block;
    max-width: 150px;
    height: auto;
}

.parallax-logo.bounce-in {
    opacity: 1;
    transform: scale(1);
}

/* Délais pour apparition séquentielle */
.logo-1 { transition-delay: 0.2s; }
.logo-2 { transition-delay: 0.4s; }
.logo-3 { transition-delay: 0.6s; }
.logo-4 { transition-delay: 0.8s; }

/* Responsive mobile */
@media (max-width: 768px) {
    .immersion-section-2-text {
        font-size: 48px;
    }

    .immersion-section-2-logos-top,
    .immersion-section-2-logos-bottom {
        max-width: 100%;
        padding: 0 20px;
    }

    .parallax-logo img {
        max-width: 100px;
    }
}

@media (max-width: 420px) {
    .immersion-section-2-text {
        font-size: 40px;
    }

    .parallax-logo img {
        max-width: 80px;
    }
}

.immersion-larger-text-mobile {
    font-size: 52px;
    color: #ede8d8;
}


.immersion-larger-text {
    margin-bottom: 150px;
    font-weight: bold;
    opacity: 0;
    font-size: 68px;
    line-height: 1;
}

/* immersion css */

.immersion-section-3-cards {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;

    /* Pour Firefox */
    scrollbar-width: thin;
    scrollbar-color: #555 #222;
}

/* Styler la scrollbar - style sombre */
.immersion-section-3-cards::-webkit-scrollbar {
    height: 10px;
}

.immersion-section-3-cards::-webkit-scrollbar-track {
    background: #222;
}

.immersion-section-3-cards::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 10px;
}

.immersion-section-3-cards::-webkit-scrollbar-thumb:hover {
    background-color: #888;
}

/* Retirer les boutons de flèches */
.immersion-section-3-cards::-webkit-scrollbar-button {
    display: none;
}

.immersion-section-card {
    width: 30%;
    min-width: 30%;
    min-width: 320px !important;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 5px;
    margin-right: 16px;
    scroll-snap-align: center;
    margin-bottom: 16px;
}

@media (max-width: 768px) {
    .immersion-section-card {
        width: 50%;
        min-width: 50%;
    }
}

.immersion-section-card-img {
    height: 195px;
}

.immersion-section-card-content {
    color: #111111;
    background-color: white;
    min-height: 390px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.immersion-section-card-content.active {
    color: rgba(255, 255, 255, 0.7);
    background-color: #1c191e;
    font-weight: 200;
}

.step-tag {
    font-family: 'Clash Display', sans-serif;
    padding: 6px 18px;
    font-size: 14px;
    background-color: #5f4576;
    width: fit-content;
    border-radius: 16px;
    margin-right: 6px;
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.step-tag:hover {
    cursor: pointer;
}

.immersion-section-card-title {
    font-family: 'Clash Display', sans-serif;
    font-size: 20px;
    line-height: 1.2;
}

.immersion-section-card-description {
    font-size: 14px;
    flex: 1;
}

.immersion-section-card-description li {
    line-height: 1.3;
    margin-top: 16px;
}

@media(max-width: 768px) {

    .immersion-section-card-content {
        min-height: 375px;
    }

    .immersion-section-card-description li {
        font-size: 12px;
    }
}


.immersion-section-card-duree {
    font-family: 'Clash Display', sans-serif;
    text-align: end;
    margin-top: auto;
}

.immersion-customer-card {
    width: 32%;
    min-width: 32%;
    min-width: 320px !important;
    flex-shrink: 0;
    overflow: hidden;
    margin-right: 16px;
    scroll-snap-align: center;
    margin-bottom: 16px;
    margin-left: -12px;
}

.immersion-customer-card-img {
    width: 100%;
}

@media (max-width: 768px) {
    .immersion-section-card {
        width: 50%;
        min-width: 50%;
    }
}

/* immersion customer cards */

.immersion-customers-cards {
    display: flex;
    flex-direction: row;
    gap: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 10px;
    scroll-behavior: smooth;

    /* Style scrollbar sombre */
    scrollbar-width: thin;
    scrollbar-color: #555 #222;
}

/* Webkit scrollbar (Chrome, Safari, Edge) */
.immersion-customers-cards::-webkit-scrollbar {
    height: 10px;
}

.immersion-customers-cards::-webkit-scrollbar-track {
    background: #222;
}

.immersion-customers-cards::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 10px;
}

.immersion-customers-cards::-webkit-scrollbar-thumb:hover {
    background-color: #888;
}

.immersion-customers-cards::-webkit-scrollbar-button {
    display: none;
}

.immersion-customer-card {
    min-width: 30%;
    flex-shrink: 0;
}

.immersion-customer-card-feedback {
    font-size: 20px;
    font-weight: 200;
    text-align: justify;
}

.immersion-customer-card-name {
    font-family: 'Clash Display', sans-serif;
}

.immersion-customer-card-role {
    font-size: 12px;
    opacity: 0.8;
    font-weight: 200;
}

/* Scrollbar cachée UNIQUEMENT quand il y a 3 cards ou moins */
@media (min-width: 768px) {
    .immersion-customers-cards.hide-scrollbar {
        scrollbar-width: none;
        /* Firefox */
    }

    .immersion-customers-cards.hide-scrollbar::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari, Edge */
    }
}

/* immersion section 5 grid */

.immersion-section-5-table {
    display: grid;
    grid-auto-rows: auto;
    color: white;
    font-weight: 200;
    font-size: 14px;
}

.immersion-section-5-row {
    display: grid;
    grid-template-columns: 0.25fr 0.75fr;
    /* même proportion que col-3 / col-9 */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 4px 0;
    align-items: start;
    /* comme tr/td classiques */
}

.immersion-section-5-cell-num,
.immersion-section-5-cell-text {
    padding: 12px 0;
}

@media (min-width: 768px) {
    .immersion-section-5-row {
        grid-template-columns: 0.33fr 0.67fr;
        /* col-md-4 / col-md-8 */
    }
}

.immersion-section-5 {
    position: relative;
    max-width: 1240px;
    overflow: hidden;
}

.immersion-section-5-logo {
    position: absolute;
    top: 20%;
    /* ajuste selon ton design */
    right: 15%;
    /* ajuste aussi si besoin */
    width: 160px;
    z-index: 2;
}

.immersion-section-5-logo img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 1091px) {
    .immersion-section-5-logo {
        display: none;
    }
}

.no-circle-overlap {
    top: 90px;
}

.immersion-circle {
    width: 580px;
    height: 580px;
    border-radius: 50%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border: solid 1px rgba(194, 194, 194, 0.3);
}

@media (min-width: 768px) {
    .lean-right {
        margin-right: -15px;
    }

    .lean-left {
        margin-left: -15px;
    }
}

@media (max-width: 768px) {
.lean-right {
    margin-right: 0px;
}

.lean-left {
    margin-left: 0px;
}
}


.immersion-circle-large-text {
    font-family: 'Clash Display', sans-serif;
    font-size: 48px;
    line-height: 1;
    margin-bottom: 8px;
}

.immersion-circle-small-text {
    font-weight: 200;
    font-size: 22px;
}

.grey-text {
    opacity: 0.7;
}

@media (max-width: 768px) {
    .immersion-circle-large-text {
    font-size: 28px;
}

.immersion-circle-small-text {
    font-weight: 200;
    font-size: 16px;
}
}

/* immersion mobile version */


.immersion-larger-text-mobile {
    font-size: 36px;
    margin-bottom: 16px;
    font-weight: bold;
    line-height: 1.2;
    color: #ede8d8;
}

.immersion-circle-mobile {
    width: 320px;
    height: 320px;
    border-radius: 50%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    top: 220px;
    border: solid 1px rgba(194, 194, 194, 0.3);
}

.immersion-circle-content-mobile {
    scale: 0.9;
}

.contact-large-text {
    font-size: 52px;
}

.contact-banner-small-text {
    font-weight: 200;
    opacity: 0.8;
}

@media (max-width: 768px) {
    .contact-banner-small-text {
        font-size: 14px;
    }
}

.contact-btn {
    padding: 10px 24px;
    font-family: 'Clash Display', sans-serif;
    color: rgba(255, 255, 255, 0.7);
    border: solid 2px rgba(255, 255, 255, 0.7);
    border-radius: 24px;
    width: fit-content;
}

.contact-form-header {
    font-size: 42px;
    line-height: 1;
}

.form-input-el {
    background-color: #272727;
    font-weight: 200;
    opacity: 0.7;
    font-size: 14px;
    padding: 8px;
    margin-bottom: 12px;
}

.textarea-el {
    min-height: 100px;
}

.data-compliance-check {
    font-weight: 200;
    opacity: 0.7;
    font-size: 14px;
}

.more-letter-space {
    letter-spacing: 0.5px;
}

@media (min-width: 768px) {
    .home-logo-anchor {
        margin-left: -12px;
    }
}

.prod-page-title {
    font-family: 'Clash Display', sans-serif;
    font-size: 36px;
    line-height: 1.2;
}

.projet-niv-1-card,
.projet-niv-1-card-img {
    aspect-ratio: 31 / 18;
}

#cases-container {
    gap: 20px;
}

.case-col {
    width: calc(50% - 10px);
}

@media (max-width: 768px) {

    .case-col {
        width: 100%;
    }

}

.projet-niv-1-card-title {
    font-family: 'Clash Display', sans-serif;
    font-size: 32px;
    color: white;
    position: absolute;
    bottom: 20px;
    left: 32px;
    line-height: 1.2;
}

a.projet-niv-1-card-title {
    text-decoration: none;
    line-height: 1.2;
}

@media (max-width: 911px) {

    .projet-niv-1-card-title {
        font-size: 24px;
    }

}

@media (max-width: 768px) {

    .projet-niv-1-card-title {
        font-size: 32px;
        bottom: 8px;
        left: 16px;
    }

}

@media (max-width: 630px) {

    .projet-niv-1-card-title {
        font-size: 24px;
    }

}

/* pagination page big prod */

.projet-niv-1-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 20px 0;
    font-family: 'Clash Display', sans-serif;
    color: white;
    padding: 20px;
}

.projet-niv-1-pagination-btn {
    padding: 6px 12px;
    border: 2px solid white;
    background: none;
    cursor: pointer;
    border-radius: 4px;
    min-width: 32px;
    text-align: center;
    color: white;
}

.projet-niv-1-pagination-btn:hover:not(.disabled):not(.active) {
    opacity: 0.7;
}

.projet-niv-1-page-num.active {
    border-color: white;
    font-weight: bold;
}

.projet-niv-1-pagination-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.projet-niv-1-pagination-ellipsis {
    padding: 6px 12px;
    color: white;
}

/* Styling des champs CF7 pour matcher ton design */
.wpcf7-form p {
    margin-bottom: 12px;
}

/* Styling des inputs/textarea */
.wpcf7-form input.form-input-el,
.wpcf7-form textarea.form-input-el {
    background-color: #272727;
    font-weight: 200;
    opacity: 0.7;
    font-size: 14px;
    padding: 8px;
    margin-bottom: 12px;
    width: 100%;
    border: none;
    color: #fff;
}

.wpcf7-form textarea.textarea-el {
    height: 100px;
    resize: vertical;
}

/* Placeholder styling */
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
    color: #fff;
    opacity: 0.7;
}

/* Checkbox compliance */
.wpcf7-form .data-compliance-check {
    font-weight: 200;
    opacity: 0.7;
    font-size: 14px;
}

.wpcf7-submit.contact-btn {
    padding: 10px 24px;
    background: none;
    font-family: 'Clash Display', sans-serif;
    color: rgba(255, 255, 255, 0.7);
    border: solid 2px rgba(255, 255, 255, 0.7);
    border-radius: 24px;
    width: fit-content;
}

.niv-2-col {
    width: calc(50% - 10px) !important;
}

.niv-2-col-half {
    width: calc(25% - 10px) !important;
}

@media (max-width: 768px) {

    .niv-2-col,
    .niv-2-col-half {
        width: 100% !important;
    }

}

/* gestion section vidéos portrait */

.projet-niv-2-section-carousel-portrait {
    display: flex;
    flex-wrap: nowrap;
    /* empêcher le wrapping */
    overflow-x: auto;
    /* scroll horizontal si nécessaire */
    gap: 16px;
    /* espace entre les vidéos */
    padding-bottom: 8px;
    /* optionnel pour scroll plus propre */
    scroll-behavior: smooth;
    /* scroll fluide */
    scroll-snap-type: x mandatory;
    /* snap horizontal obligatoire */
    -webkit-overflow-scrolling: touch;
    /* scroll fluide sur iOS */
}

.projet-niv-2-section-carousel-portrait {
    cursor: grab;
}

.projet-niv-2-section-carousel-portrait:active {
    cursor: grabbing;
}


/* Chaque div devient un “snap item” */
.section-carousel-portrait-div {
    flex: 0 0 auto;
    /* empêche la div de rétrécir */
    width: 23%;
    /* peut ajuster selon besoin */
    aspect-ratio: 9/16;
    position: relative;
    overflow: hidden;
    scroll-snap-align: start;
    /* snap au début de chaque div */
}

.section-carousel-portrait-div video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Scrollbar personnalisée */

/* Chrome, Edge, Safari */
.projet-niv-2-section-carousel-portrait::-webkit-scrollbar {
    height: 10px;
}

.projet-niv-2-section-carousel-portrait::-webkit-scrollbar-track {
    background: #333;
    transition: background-color 0.3s ease;
}

.projet-niv-2-section-carousel-portrait::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.projet-niv-2-section-carousel-portrait::-webkit-scrollbar-thumb:hover {
    background-color: #777;
}

/* Firefox */
.projet-niv-2-section-carousel-portrait {
    scrollbar-width: thin;
    scrollbar-color: #555 #333;
}

/* Pour tablettes et petits écrans */
@media (max-width: 768px) {
    .section-carousel-portrait-div {
        width: 48%;
        /* chaque vidéo occupe moitié de l'écran */
    }
}

/* Pour mobiles très petits */
@media (max-width: 420px) {
    .section-carousel-portrait-div {
        width: 100%;
        /* chaque vidéo occupe tout l'écran */
    }
}

ul.footer-list li a {
    color: inherit;
    text-decoration: none;
}

.menu-item {
    width: fit-content;
    transition: transform 0.4s ease;
}

.menu-item:hover {
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .h-100 {
        height: auto !important;
    }
}

input[name="acceptance-consent"] {
  accent-color: #d800ff;
}

/* =========================================
   ANIMATION 404 - VERSION "CONTACT INTENSE"
   ========================================= */

/* --- 1. LE BOUTON ROSE --- */
.btn-pink {
    background-color: #d800ff !important;
    border: 2px solid #d800ff !important;
    color: white !important;
    padding: 12px 32px;
    border-radius: 30px;
    font-size: 1.2rem;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
    margin-top: 20px;
}

.btn-pink:hover {
    background-color: transparent !important;
    color: #d800ff !important;
    transform: scale(1.05);
    cursor: pointer;
}

/* --- 2. CONTENEUR --- */
.main-404-wrapper {
    position: relative;
    z-index: 1; 
    min-height: 60vh;
    overflow: hidden;
}

.animated-404-container {
    perspective: 1000px;
    font-size: 10rem;
    font-weight: 900;
    line-height: 1;
    color: #d800ff;
    display: flex;
    justify-content: center;
    align-items: center;
    /* On les colle au maximum */
    gap: 0px; 
    position: relative;
    cursor: pointer; 
}

.animated-404-container .digit {
    display: inline-block;
    position: relative;
    transform-origin: center bottom;
}

/* --- 3. LES ACTEURS (RÉGLAGE DE PRÉCISION) --- */

/* LE "0" (La victime) */
.zero {
    z-index: 10;
    animation: 
        leanOnLeft 1.5s ease-in-out 1 forwards,
        impactReaction 0.4s ease-in-out 1.5s infinite alternate;
}

@keyframes leanOnLeft {
    0%   { transform: rotate(0deg) translateX(0); }
    /* CORRECTION : On passe à -16deg (au lieu de -22deg) pour éviter le chevauchement */
    100% { transform: rotate(-16deg) translateX(-4px); }
}

@keyframes impactReaction {
    /* Position repos (doit être identique à la fin de leanOnLeft) */
    0% { transform: rotate(-18deg) translateX(-4px) scale(1); }
    
    /* Position impact : On pousse, mais on reste propre */
    100% { 
        transform: rotate(-24deg) translateX(-12px) scaleX(0.85) scaleY(1.05); 
    }
}

/* LE "4" DE DROITE (L'Actif) */
.four-2-tapper {
    z-index: 5;
    margin-left: -15px; 
    transform-origin: center center;
    
    animation: 
        slowTurn 1.5s ease-in-out 1 forwards,
        precisionThrust 0.4s ease-in-out 1.5s infinite alternate;
}

@keyframes slowTurn {
    0%   { transform: rotateY(0deg); }
    100% { transform: rotateY(180deg); }
}

@keyframes precisionThrust {
    0%   { transform: rotateY(180deg) translateX(0); }
    /* On garde 55px, c'est la bonne profondeur */
    100% { transform: rotateY(180deg) translateX(55px); }
}

/* LE "4" DE GAUCHE (Le Support) */
.four-1 {
    z-index: 5;
    animation: supportReaction 0.4s ease-in-out 1.5s infinite alternate;
}

@keyframes supportReaction {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-5px); }
}

/* LE "4" DE DROITE (L'Actif) */
.four-2-tapper {
    z-index: 5; /* Derrière le 0 */
    margin-left: -15px; /* Déjà très proche au départ */
    transform-origin: center center;
    
    animation: 
        slowTurn 1.5s ease-in-out 1 forwards,
        precisionThrust 0.4s ease-in-out 1.5s infinite alternate;
}

@keyframes slowTurn {
    0%   { transform: rotateY(0deg); }
    100% { transform: rotateY(180deg); }
}

@keyframes precisionThrust {
    0%   { transform: rotateY(180deg) translateX(0); }
    /* 55px : On va chercher plus loin car le 0 s'est éloigné vers la gauche */
    100% { transform: rotateY(180deg) translateX(55px); }
}

/* LE "4" DE GAUCHE (Le Support) */
.four-1 {
    z-index: 5;
    /* Il recule légèrement sous le poids du 0 */
    animation: supportReaction 0.4s ease-in-out 1.5s infinite alternate;
}

@keyframes supportReaction {
    0%   { transform: translateX(0); }
    /* Il encaisse le choc */
    100% { transform: translateX(-5px); }
}


/* --- 4. FINAL (EXPLOSION) --- */
.splatter-overlay {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 9000;
    display: none;
    pointer-events: none;
    background-image: url('http://stg-bigneurons-preprod.kinsta.cloud/wp-content/uploads/2025/12/splatter-removebg-preview.png');
    background-size: cover;
    background-position: center;
    animation: splatterAppear 0.3s ease-out forwards;
}

@keyframes splatterAppear {
    0% { opacity: 0; transform: scale(0.9); }
    100% { opacity: 0.95; transform: scale(1); }
}

.zero.exploded {
    animation: zeroGoBoom 0.3s ease-out forwards !important; 
}

@keyframes zeroGoBoom {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(3); opacity: 0; filter: blur(20px); }
}

.main-404-wrapper.final-state {
    z-index: 9999 !important;
}
.main-404-wrapper.final-state .text-center span {
    color: white !important;
    font-weight: bold;
    font-size: 1.2rem !important;
}

/* Responsive Mobile */
@media (max-width: 768px) {
    .animated-404-container { font-size: 6rem; }
    
    /* Ajustement des angles sur mobile */
    @keyframes leanOnLeft {
        100% { transform: rotate(-18deg) translateX(-4px); }
    }
    @keyframes impactReaction {
        0% { transform: rotate(-18deg) translateX(-4px) scale(1); }
        100% { transform: rotate(-24deg) translateX(-10px) scaleX(0.9) scaleY(1.05); }
    }
    @keyframes precisionThrust { 
        100% { transform: rotateY(180deg) translateX(35px); } 
    }
}

/* ================================================= */
/* PAGE CONTACT - STYLE GLOBAL (V3 FINAL CORRIGÉ) */
/* ================================================= */

/* --- 1. LES BOUTONS D'ACTION (STYLE MASTER HEADER) --- */

/* Style commun pour le bouton Calendly ET le bouton Envoyer */
.contact-cta-button,
.wpcf7 input[type="submit"] {
    /* 1. LA BASE */
    background-color: #d800ff !important; /* COULEUR MASTER */
    color: #fff !important;
    border: 1px solid #d800ff !important; /* Bordure fine 1px comme le header */
    border-radius: 50px !important;
    
    /* 2. LA TYPO (IDENTIQUE HEADER) */
    font-family: inherit !important; /* Prend la font du site */
    font-weight: 400 !important;     /* Normal (pas gras) */
    letter-spacing: 1px !important;  /* Espacement lettres */
    text-transform: uppercase !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    
    /* 3. TAILLE & ALIGNEMENT */
    display: inline-block;
    padding: 18px 40px !important;   /* Padding symétrique */
    font-size: 18px !important;
    text-align: center !important;   /* Force le centrage du texte */
    vertical-align: middle !important;
    
    /* 4. RESET NAVIGATEUR (Pour centrer le bouton formulaire) */
    appearance: none !important;
    -webkit-appearance: none !important;
    box-shadow: none !important;     /* Pas d'ombre (Flat) */
    transform: none !important;
    opacity: 1 !important;
    cursor: pointer !important;
    margin: 0 !important;            /* Reset marges */
}

/* Specificité pour le bouton envoyer (pleine largeur + marge top) */
.wpcf7 input[type="submit"] {
    width: 100% !important;
    margin-top: 20px !important;
    display: block !important;       /* Assure le comportement bloc */
}

/* --- ETAT SURVOL (HOVER MASTER FORCE) --- */
.contact-cta-button:hover,
.wpcf7 input[type="submit"]:hover,
.brief-btn:hover {  /* J'ajoute la classe du header ici aussi */
    background-color: #fff !important; /* Fond BLANC pur */
    color: #111111 !important;         /* Texte NOIR profond (code du thème) */
    border: 1px solid #111111 !important;         /* Bordure noire */
    
    /* Reset total des effets */
    transform: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

/* --- 2. L'IMAGE GAMIFIÉE & STICKER --- */

/* Animation de flottement pour le sticker */
@keyframes floatSticker {
    0% { transform: rotate(6deg) translateY(0px); }
    50% { transform: rotate(6deg) translateY(-10px); }
    100% { transform: rotate(6deg) translateY(0px); }
}

/* Le Sticker "Réponse < 24h" */
.priority-sticker {
    position: absolute;
    bottom: 40px;
    left: -30px; /* Déborde sur la gauche */
    background: #fff;
    color: #000;
    padding: 15px 25px;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 18px;
    line-height: 1.1;
    text-align: center;
    border: 3px solid #000; /* Bordure épaisse */
    box-shadow: 5px 5px 0px #000; /* Ombre dure */
    z-index: 20;
    animation: floatSticker 4s ease-in-out infinite;
}

/* Le cadre de l'image (pour gérer le zoom) */
.contact-image-wrapper {
    overflow: hidden; 
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
}

/* L'image elle-même (transition fluide) */
.contact-image-hover {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Effet au survol de la souris sur le bloc image */
.contact-image-wrapper:hover .contact-image-hover {
    transform: scale(1.05); /* Zoom in */
}

/* Mobile */
@media (max-width: 768px) {
    .priority-sticker {
        left: 10px;
        bottom: 10px;
        transform: rotate(0deg);
        animation: none;
        box-shadow: 3px 3px 0px #000;
        font-size: 14px;
    }
}

/* --- 3. LE DESIGN DU FORMULAIRE --- */

/* Labels (Le texte "Nom", "Email") */
.wpcf7 label {
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    display: block;
    color: inherit; 
}

/* --- 4. CORRECTION VISIBILITÉ TEXTE (FOND CLAIR / TEXTE NOIR) --- */

/* Les Champs (Input / Textarea) */
.wpcf7-form-control-wrap input,
.wpcf7-form-control-wrap textarea {
    background-color: #f0f0f0 !important; /* Gris clair */
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 15px 20px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    
    /* FORCE LE TEXTE EN NOIR */
    color: #000 !important; 
    -webkit-text-fill-color: #000 !important;
    
    width: 100%;
    margin-bottom: 5px;
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);
}

/* Quand on clique dans le champ (Focus) */
.wpcf7-form-control-wrap input:focus,
.wpcf7-form-control-wrap textarea:focus {
    outline: none;
    background-color: #fff !important; /* Fond Blanc */
    border-color: #BD00FF;
    
    /* FORCE LE TEXTE EN NOIR AUSSI AU FOCUS */
    color: #000 !important; 
    -webkit-text-fill-color: #000 !important;
    
    box-shadow: 0 0 0 4px rgba(189, 0, 255, 0.1);
}

/* Ajustement espacement global formulaire */
.contact-form-div {
    padding: 20px;
    border-radius: 15px;
}

/* --- 5. CORRECTION DES PLACEHOLDERS (TEXTES D'EXEMPLE) --- */

/* On force la couleur du texte "fantôme" pour qu'il soit visible */
.wpcf7-form-control-wrap input::placeholder,
.wpcf7-form-control-wrap textarea::placeholder {
    color: #666 !important; /* Gris foncé lisible */
    opacity: 1 !important; 
    font-weight: 400; 
    font-style: italic;
}

/* Compatibilité navigateurs */
.wpcf7-form-control-wrap input::-webkit-input-placeholder,
.wpcf7-form-control-wrap textarea::-webkit-input-placeholder {
    color: #666 !important;
}
.wpcf7-form-control-wrap input::-moz-placeholder,
.wpcf7-form-control-wrap textarea::-moz-placeholder {
    color: #666 !important;
    opacity: 1 !important;
}

/* --- Espacement Tags Big Prod --- */
.home-section-1-card-tags {
    margin-bottom: 40px !important; /* Ajoute de l'air sous les tags */
    padding-bottom: 10px; /* Une petite sécurité supplémentaire */
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Espace entre les tags eux-mêmes si besoin */
}

/* --- Texte Politique de confidentialité (Contact) --- */
.wpcf7-acceptance .wpcf7-list-item-label,
.wpcf7-acceptance label {
    font-size: 12px !important; /* Taille réduite (ajuste selon ton goût : 10px, 11px...) */
    line-height: 1.4 !important; /* Interligne plus serré pour faire propre */
    color: #ffffff; /* S'assure que c'est bien blanc (ou ta couleur de texte) */
    opacity: 0.8; /* Optionnel : rend le texte un peu moins agressif visuellement */
}

/* Remplace '.classe-de-ton-menu-mobile' par la vraie classe de ton menu */
.classe-de-ton-menu-mobile {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* Toute la hauteur de l'écran */
    background-color: #000; /* Fond noir pour cacher la vidéo */
    z-index: 999999 !important;
    display: flex;       /* Pour centrer le contenu si besoin */
    flex-direction: column;
    justify-content: center; /* Centre verticalement */
}
/* Ciblage générique si on a pas l'ID */
nav, .menu, .navigation, [class*="menu-mobile"], [class*="nav-"] {
    position: relative; /* On tente de réinitialiser le contexte */
    z-index: 999999 !important;
}

/* 1. On force le menu à être au premier plan */
#fix-menu-mobile {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;      /* Prend tout l'écran */
    z-index: 2147483647 !important; /* Le maximum possible en CSS */
    background: #000;   /* Fond noir pour ne pas voir la vidéo par transparence */
    display: flex;      /* Optionnel : pour centrer le contenu */
    flex-direction: column;
    justify-content: center;
}

/* 2. Sécurité supplémentaire : On force le header global à être au-dessus */
header {
    position: relative;
    z-index: 999999 !important;
}

/* 3. On force la vidéo (et les iframes Youtube/Vimeo) à rester derrière */
video, iframe, .video-container, .hero-video {
    position: relative; 
    z-index: 1 !important; /* Z-index très bas */
}


/* =========================================
   FIX CHROME AUTOFILL (FOND BLANC)
   ========================================= */
/* On force le fond sombre même quand Chrome remplit tout seul */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px #111111 inset !important; /* Couleur de ton fond body */
    -webkit-text-fill-color: white !important;
    transition: background-color 5000s ease-in-out 0s;
}