html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

:root {
    --babylon-height: 100vh;
    --overlay-color: #00e0dc;
    --teal: #1bb3a5; /* flèche */
    --card-bg: #fff;
    --pill-bg: #f5eff5; /* fond des étiquettes */
    --title: #2a0e3f;
    --text: #333;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.section-paragraph {
    font-size: 24px !important;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/*Retire le fond a tout les éléments contenant mud paper 
 permet de faire des animations sur les div en retirant le fond de base*/
.mud-paper {
    background-color: transparent !important;
}

/*
// ===============================================
// DEBUT : Menu.razor (AppBar + Drawer Responsive)
//Doît être dans l'app.css pour fonctionner.
// ===============================================
*/

@media (min-width: 1080px) {
    .desktop-only {
        display: flex !important;
    }

    .mobile-only {
        display: none !important;
    }
}

@media (max-width: 1079px) {
    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: flex !important;
    }
}

.mud-appbar.desktop-only {
    display: flex !important;
}

.mud-appbar.mobile-only {
    display: none !important;
}

@media (max-width: 1079px) {
    .mud-appbar.desktop-only {
        display: none !important;
    }

    .mud-appbar.mobile-only {
        display: flex !important;
    }

    .mud-drawer.desktop-only {
        display: none !important;
    }

    .mud-drawer.mobile-only {
        display: flex !important;
    }
}
/*  formate le texte sur une ligne */
.no-wrap-link {
    white-space: nowrap;
}

.mega-menu {
    border-radius: 0;
    padding: 2rem 0;
    width: 100%;
    box-shadow: none;
    overflow: hidden;
    animation: unfoldMenu 300ms ease-out forwards;
    transform-origin: top center;
    margin-top: 17px !important;
}

/*
// ===============================================
// DEBUT : Menu.razor (MEgamenu)
//Doît être dans l'app.css pour fonctionner.
// ===============================================
*/
/* Grille avec max espace à gauche/droite  correspond au sous menu NOS services*/
.mega-menu-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 6rem; /*  Plus d'espace latéral */
    display: grid;
    grid-template-columns: repeat(3, 1fr); /*  3 colonnes */
    column-gap: 1.5rem; /*  Moins d'espace entre items */
    row-gap: 1.2rem;
}
/* Tout le bloc cliquable  du sous menu */
.mega-link {
    text-decoration: none;
    color: inherit;
    display: block;
    padding: 0.4rem;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}
    /*
// ===============================================
// FIN : Menu.razor (AppBar + Drawer Responsive)
//Doît être dans l'app.css pour fonctionner.
// ===============================================
*/






    .mega-link:hover .mega-title {
        color: var(--mud-palette-primary-dark);
        text-decoration: overline;
    }

/* Icône */
.mega-icon {
    font-size: 2.2rem; /*¨Taille des icones*/
    color: var(--mud-palette-primary);
    margin-right: 0.6rem;
}
/* Bloc interne a droite de l'icone  */
.mega-item {
    display: flex;
    align-items: flex-start;
}
/*  Titre sous menu */
.mega-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
    margin-bottom: 0.1rem;
}

/*  Description sous menu */
.mega-desc {
    font-size: 0.65rem;
    color: var(--mud-palette-text-secondary);
}


/* -----effet  Fade in + décalé pour chaque item ----- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mega-link {
    opacity: 0;
    animation: fadeInUp 400ms ease forwards;
}

    /*  Animation décalée par item */
    .mega-link:nth-child(1) {
        animation-delay: 100ms;
    }

    .mega-link:nth-child(2) {
        animation-delay: 200ms;
    }

    .mega-link:nth-child(3) {
        animation-delay: 300ms;
    }

    .mega-link:nth-child(4) {
        animation-delay: 400ms;
    }

    .mega-link:nth-child(5) {
        animation-delay: 500ms;
    }

    .mega-link:nth-child(6) {
        animation-delay: 600ms;
    }
    /* Animation fadeInUp par item (au-delà de 6) */
    .mega-link:nth-child(7) {
        animation-delay: 700ms;
    }

    .mega-link:nth-child(8) {
        animation-delay: 800ms;
    }

    .mega-link:nth-child(9) {
        animation-delay: 900ms;
    }

    .mega-link:nth-child(10) {
        animation-delay: 1000ms;
    }

    .mega-link:nth-child(11) {
        animation-delay: 1100ms;
    }

    .mega-link:nth-child(12) {
        animation-delay: 1200ms;
    }
/*  Keyframe d'ouverture (déploiement vertical) */
@keyframes unfoldMenu {
    0% {
        opacity: 0;
        transform: scaleY(0);
        transform-origin: top center;
    }

    100% {
        opacity: 1;
        transform: scaleY(1);
        transform-origin: top center;
    }
}

/*  Popover quand ouvert */
.mega-popover.mud-popover-open .mega-menu {
    animation: unfoldMenu 300ms ease-out forwards;
    background-color: white !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    transform-origin: top center;
}

.mud-popover.mud-popover-top-center.mud-popover-anchor-bottom-center {
    left: 0px !important;
}


/*Retire un effet de shadd */
.mega-popover.mud-elevation-8 {
    box-shadow: none !important;
}

.mud-popover.mud-popover-top-center.mud-popover-anchor-bottom-center {
    left: 50% !important; /* Centrer horizontalement */
    transform: translateX(-50%) !important;
    width: 100vw !important; /* Largeur plein écran */
    max-width: 100vw !important;
}

/*Simulation d'une fentre dom qui permet de fermer un menu*/
.menu-overlay {
    position: fixed;
    top: 50px;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1301; /* juste en dessous du menu (1302) */
    background-color: transparent;
    overflow-y: auto; /* scroll possible */
    cursor: default;
}


/*Test le css pour testfluidmenu */

.nav-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    gap: 2rem;
    padding: 0;
}

.nav-item.mud-button-root {
    background-color: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0.5rem 0;
    font-weight: 600;
    font-size: 1rem;
    color: #333;
}


.nav-wrapper {
    position: relative;
}

.nav-wrapper {
    position: relative;
    overflow: visible;
}

.nav-button-wrapper {
    display: inline-block;
    padding: 0 8px;
}

.nav-item {
    font-weight: 500;
    color: white;
}

.nav-wrapper {
    position: relative; /*  Le parent de référence */
}

.nav-underline {
    height: 4px;
    background: red;
    z-index: 2000;
}

/*
// ===============================================
// Debut : slide bouton du menu Menu.razor (AppBar + Drawer Responsive)
//Doît être dans l'app.css pour fonctionner.
// ===============================================
*/
/* ===== Bouton principal ===== */
.slide-button {
    overflow: hidden;
    border-radius: 9999px !important; /* boutons très arrondis */
    height: 30px; /* hauteur d'une ligne */
    line-height: 34px; /* alignement vertical */
    padding: 0 1.5rem; /* augmente de 1rem -> 1.5rem */
    position: relative; /* indispensable pour le z-index */
    z-index: 3000; /* plus haut que l'underline */
    background-color: white; /* couleur normale du bouton au repos */
    transition: background-color 0.6s ease, color 0.3s ease;
}

/* Texte animé dans le bouton */
.slide-inner {
    height: 30px; /* 2 lignes superposées */
    display: flex;
    flex-direction: column;
    transition: transform 0.4s ease-in-out; /* slide vers le haut */
}

/* Style du texte */
.slide-text {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 250 !important;
    font-style: normal;
    height: 60px;
    line-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
    text-transform: uppercase;
    transition: transform 0.5s ease-in-out, opacity 0.9s ease-in-out, color 0.4s ease;
}

@media (min-width: 950px) and (max-width: 1200px) {
    .slide-text {
        font-size: 12px !important;
        line-height: 28px;
        height: 56px;
    }
}

.slide-button {
    color: white !important;
}
    /* Hover et hover forcé : fond noir uniquement */
    .slide-button:hover,
    .slide-button.hover-forced {
        background-color: black !important;
        color: white !important;
        --mud-palette-text-primary: white; /* compat MudBlazor */
    }

/* transitional-button : effet de vague sans forcer le fond noir */
.transitional-button {
    transition: transform 0.6s ease; /* effet vague uniquement */
}

/* Slide vers le haut */
.slide-button:hover .slide-inner,
.slide-button.transitional-button .slide-inner,
.slide-button.hover-forced .slide-inner {
    transform: translateY(-30px);
}

/* Texte sortant : écrasé et atténué */
.slide-button:hover .slide-text:nth-child(1),
.slide-button.transitional-button .slide-text:nth-child(1),
.slide-button.hover-forced .slide-text:nth-child(1) {
    transform: scaleY(0.4);
    opacity: 0.5;
}

/* Texte entrant : taille normale */
.slide-button:hover .slide-text:nth-child(2),
.slide-button.transitional-button .slide-text:nth-child(2),
.slide-button.hover-forced .slide-text:nth-child(2) {
    transform: scaleY(1);
}

.slide-button .mud-button-label,
.slide-button .slide-text {
    transition: color 0.4s ease;
}

/* Quand le bouton est en hover, forcer la couleur teal */
.slide-button:hover .mud-button-label,
.slide-button:hover .slide-text,
.slide-button.hover-forced .mud-button-label,
.slide-button.hover-forced .slide-text {
    color: #0fbdac;
}


/* Neutraliser le label MudButton pour éviter les décalages */
.slide-button .mud-button-label {
    padding: 0 !important;
    margin: 0 !important;
    line-height: normal !important;
    height: 100% !important;
    display: block !important;
}



/* ===== Underline dynamique ===== */
.nav-wrapper {
    position: relative; /* nécessaire pour positionner l'underline */
}

.nav-underline {
    position: absolute;
    /*height: 4px;*/ /* épaisseur de la ligne */
    background-color: #009688 !important; /* couleur teal */
    bottom: 0; /* alignée en bas du wrapper */
    left: 0;
    width: 0;
    border-radius: 9999px;
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1), width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2000; /* doit être en dessous du texte (z-index < slide-button) */
}

/* Animation de couleur */
@keyframes flashTeal {
    0% {
        color: white;
    }

    90% {
        color: white;
    }

    100% {
        color: #009688 !important;
    }
}

/* Applique l’animation à la slide-text entrante */
.slide-button:hover .slide-text:nth-child(2) {
    animation: flashTeal 0.4s forwards;
}

.dropdown-arrow {
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

    .dropdown-arrow.rotated {
        transform: rotate(180deg);
    }

.bounce-up {
    animation: bounceUp 0.4s ease;
}


@keyframes bounceUp {
    0% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-8px);
    }

    60% {
        transform: translateY(4px);
    }

    80% {
        transform: translateY(-2px);
    }

    100% {
        transform: translateY(0);
    }
}
/*
// ===============================================
// Fin : slide bouton du menu Menu.razor (AppBar + Drawer Responsive)
//Doît être dans l'app.css pour fonctionner.
// ===============================================
*/
/*
// ===============================================
// Debut : Menu mobile
//Doît être dans l'app.css pour fonctionner.
// ===============================================
*/

.full-screen-drawer.mud-drawer--open {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    z-index: 1300 !important;
    background-color: white;
    margin-top: 75px;
}

.full-screen-drawer.mud-drawer {
    position: fixed !important;
    top: 64px !important; /* toujours sous l’AppBar */
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: calc(100% - 64px) !important; /* adapte la hauteur au top */
    max-width: 100% !important;
    max-height: calc(100% - 64px) !important;
    border-radius: 0 !important;
    z-index: 1300 !important; /* au-dessus de l’AppBar */
    background-color: white;
    transition: transform 0.5s ease, opacity 0.5s ease !important;
}

.full-screen-drawer.mud-drawer--open {
    top: -10px !important;
}
/* Contenu du drawer : scrollable */
.full-screen-drawer .mud-drawer-content {
    height: 100% !important;
    overflow-y: auto;
}

/* Drawer FERMÉ : translate hors écran + opacité 0 */
.full-screen-drawer:not(.mud-drawer--open) {
    transform: translateX(100%) !important;
    opacity: 0 !important;
}

/* Drawer OUVERT : translate 0 + opacité 1 */
.full-screen-drawer.mud-drawer--open {
    transform: translateX(0) !important;
    opacity: 1 !important;
}

.full-screen-drawer {
    z-index: 1300 !important; /* plus haut que l’overlay de MudBlazor (~1100-1200) */
}

    .full-screen-drawer.mud-drawer--open {
        border: none !important;
        box-shadow: none !important;
    }
/*cSS DU toggle menu */

/*.menu-toggle-button.fixed-top-right {
    position: absolute !important;
    top: 12px !important;*/ /* ajuste selon AppBar */
/*right: 12px !important;
    z-index: 1200;*/ /* > AppBar */
/*width: 100% !important;
}*/
.mud-drawer-open-persistent-right.mud-drawer-right-clipped-never .mud-appbar {
    margin-right: 0 !important;
    width: 100% !important;
}

.burger {
    width: 30px;
    height: 22px;
    top: 23px !important;
    cursor: pointer;
    z-index: 1201; /* s'assurer que c'est au-dessus de l'AppBar */
    position: absolute !important;
    right: 26px !important;
}
    /* START : Icone du menu burger */
    .burger span {
        background-color: white !important;
        display: block;
        height: 4px;
        width: 100%;
        position: absolute;
        left: 0;
        transition: all 0.3s ease;
        border-radius: 2px;
    }

        .burger span:nth-child(1) {
            top: 0;
        }

        .burger span:nth-child(2) {
            top: 10px;
        }

        .burger span:nth-child(3) {
            bottom: -1px;
        }

    .burger.active span {
        background-color: #009688 !important;
    }
        /* ANIMATION ACTIVE */
        .burger.active span:nth-child(1) {
            top: 10px;
            transform: rotate(45deg);
        }

        .burger.active span:nth-child(2) {
            opacity: 0;
            transform: translateX(-20px) scaleX(0.1); /* décale vers la droite pendant la disparition */
        }

        .burger.active span:nth-child(3) {
            bottom: auto;
            top: 10px;
            transform: rotate(-45deg)
        }
/* END : Icone du menu burger */
burger {
    width: 30px;
    height: 22px;
    top: 23px !important;
    right: 26px !important;
    position: absolute !important;
    cursor: pointer;
    z-index: 1201;
    -webkit-tap-highlight-color: transparent; /* confort iOS */
    touch-action: manipulation;
}

/* Zone “tampon” invisible qui capte les clics/touches */
.burger::after {
    content: "";
    position: absolute;
    inset: -25px; /* agrandit de 12px de chaque côté (~44x46) */
    background: transparent;
    pointer-events: auto; /* capte les clics et les fait remonter au parent */
}

/*START : DESIGN menu mobile */
.mobile-menu-link {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200 !important; /* plus fin */
    font-size: 1.1rem; /* légèrement plus grand */
    text-align: left;
    display: block;
    padding: 8px 16px;
    color: black;
    text-decoration: none;
    transition: color 0.3s ease;
}

    .mobile-menu-link:hover {
        color: #009688; /* effet hover teal */
    }

.mobile-menu-title {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 320 !important; /* plus fin que 500 */
    font-size: 1.8rem !important; /* légèrement plus grand */
    cursor: pointer;
    text-align: left;
    padding: 12px 16px;
    text-align: right !important; /* force l’alignement à gauche */
    justify-content: flex-end !important; /* annule alignement MudBlazor */
}
/* Réinitialise le style de MudBlazor pour le texte dans les liens */
.mud-nav-link-text {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300 !important;
    font-style: normal;
    font-size: 1.3rem !important; /* même taille que le titre ou légèrement plus petite */
    text-align: right !important; /* force l’alignement à gauche */
    justify-content: flex-end !important; /* annule alignement MudBlazor */
    display: flex !important;
    width: 100%;
}

.menu-title-text {
    flex: 1; /* prend toute la largeur restante */
}

.menu-toggle-icon {
    color: black;
    transition: transform 0.3s ease;
}

.mobile-submenu {
    padding-left: 16px;
    display: none;
}

    .mobile-submenu.open {
        display: block;
    }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mobile-menu-link {
    opacity: 0;
    animation: fadeInUp 400ms ease forwards;
}
/* Container du menu mobile : prend toute la hauteur disponible et scrollable */
.mobile-only .mud-drawer-content {
    height: calc(100vh - 64px); /* 64px = taille de l'appbar mobile si nécessaire */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* inertie scroll sur iOS */
    background-color: white; /* fond blanc */
    padding: 1rem 0;
}

/* S’assurer que les liens s’affichent bien */
.mobile-menu-link {
    display: block;
    padding: 0.5rem 1.5rem;
    color: #333;
    font-weight: 300 !important;
    text-decoration: none;
}


/* Titre mobile */
.mobile-menu-title {
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    text-transform: uppercase;
}


/* test application web*/

.animated-fade-in {
    animation: fadeIn 0.9s ease-in;
}

.fade-in {
    opacity: 0;
    animation: fadeIn 1s ease-in forwards;
}

.fade-in-delay {
    opacity: 0;
    animation: fadeIn 1.5s ease-in forwards;
}

.fade-in-slide {
    opacity: 0;
    transform: translateY(20px);
    animation: slideIn 1s ease-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.text-muted {
    color: #666;
}

.rounded-xl {
    border-radius: 16px;
}

.font-bold {
    font-weight: 700;
}
/* ===========================
   BABYLON - LAYOUT PRINCIPAL
   =========================== */
/* === Container Babylon dans MainLayout (NE PAS mettre de z-index ici) === */
.babylon-container {
    position: relative;
    width: 100%;
    height: var(--babylon-height);
    overflow: hidden;
}

/* Canvas qui remplit le parent */
.babylon-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    border: none;
    background: transparent !important;
    z-index: 0; /* reste derrière le contenu */
}

#antesyConsole[data-docked="1"] {
    visibility: hidden !important;
    pointer-events: none !important;
}

html, body {
    overscroll-behavior-y: contain;
}

#babylonCanvas {
    touch-action: pan-y pinch-zoom; /* ✅ laisse passer le scroll vertical et le pinch */
    -webkit-user-select: none;
    user-select: none;
    width: 100%;
    height: calc(var(--babylon-height) + 10vh); /* +10vh pour dépasser un peu */
    position: absolute; /* rempli le parent et peut dépasser */
    top: -5vh; /* centré avec le dépassement */
    left: 0;
    z-index: 1;
    pointer-events: auto;
    isolation: isolate;
    display: block;
}
/* masquage quand prêt */
.babylon-container.is-ready .babylon-loader {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
/* (optionnel) état shrink si tu l’utilises vraiment */
.babylon-container.shrink {
    height: 50vh !important;
    transition: height 0.5s ease;
}
/* coupe TOUT rendu quand rangé ou docké */
#antesyConsole.is-collapsed,
#antesyConsole[data-docked="1"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
/* Focus canvas (utile si tu tab dessus) */
#babylonCanvas:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* === Pages qui doivent passer AU-DESSUS de Babylon === */
/* Ajoute Class="over-babylon" sur <MudLayout> */
.over-babylon .mud-main-content {
    /* on remonte le contenu pour recouvrir le canvas */
    margin-top: calc(-1 * var(--babylon-height)) !important;
    /* on réserve l’espace pour que le flux reste correct */
    padding-top: var(--babylon-height) !important;
    position: relative; /* crée un contexte propre pour z-index si besoin */
    z-index: 1;
}

/* Héros de tête : assure un minimum de hauteur (lisible/design) */
.hero-over-babylon {
    min-height: var(--babylon-height);
    display: flex;
    align-items: center; /* centrer verticalement si tu veux */
    margin-top: 130px;
}

    .hero-over-babylon.IsInvisible {
        visibility: hidden;
    }

.babylon-loader {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background-color: #353535 !important;
    font: 500 14px/1.2 system-ui,Segoe UI,Roboto,Arial;
    transition: opacity .25s ease;
}
/*CSS très important pour la partie fixed */
#babylonCanvas.canvas-fixed {
    position: fixed;
    top: 0;
    height: 80vh; /* important: conserve toute la scène Babylon */
    pointer-events: none;
    margin-top: -298px !important;
    /**/ z-index: 100 !important;
    overflow: hidden; /* ✅ remplace clip-path */
}
/* Si certains éléments doivent “passer par-dessus” des décorations canvas */
.over-babylon .hero-over-babylon {
    z-index: 2;
    pointer-events: none !important;
    position: relative;
}

/* ===========================
   OVERLAY TEXTE
   =========================== */
.scene-overlay-text {
    position: absolute;
    top: 30px; /* adaptable */
    left: 50%;
    transform: translateX(-50%);
    font-size: 2.4rem;
    font-weight: 600;
    color: #00e0dc;
    font-family: 'Arial', sans-serif;
    pointer-events: none;
    z-index: 10; /* ❓ Ce z-index est inférieur à l'overlay global : peut rester derrière */
    opacity: 1;
    transition: opacity 0.6s ease-in-out;
}

/* Animation */
.fade-in {
    opacity: 1 !important;
}

.fade-out {
    opacity: 0 !important;
}

.mud-appbar.mud-appbar-fixed-top {
    background-color: transparent !important;
    min-height: 70px !important;
}
/* === Reset styles MudBlazor (juste au cas où) === */
.mud-container,
.mud-container-maxwidth-lg,
.mud-container--gutters,
.mud-container-maxwidth-xl,
.mud-container-maxwidth-md,
.mud-container-maxwidth-sm {
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    height: 100%;
    overflow: hidden !important;
}

/*console prompt effet */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

:root {
    --chrome-bg: rgba(10,16,16,0.65);
    --chrome-bg-2: rgba(8,12,12,0.45);
    --stroke: rgba(0,255,204,0.10);
    --ring: 0 20px 60px rgba(0,0,0,.45);
    --accent: #00e7d4;
    --text: #e7fffb;
}

/* Fenêtre type navigateur */
.console-window.browser {
    position: absolute;
    top: 152px;
    right: min(5vw, 48px);
    width: 680px;
    border-radius: 14px;
    overflow: hidden; /* important pour le chrome */
    background: linear-gradient(180deg,var(--chrome-bg),var(--chrome-bg-2));
    border: 1px solid var(--stroke);
    box-shadow: var(--ring);
    font-family: ui-sans-serif, Inter, Roboto, system-ui, -apple-system, "Segoe UI", Arial;
    text-transform: none; /* on quitte le look “cmd” */
    letter-spacing: .2px;
    backdrop-filter: blur(8px) saturate(1.2);
}

/* Barre supérieure = onglet + barre d’adresse */
.console-titlebar {
    display: grid;
    grid-template-columns: auto 1fr 1.6fr;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    height: 50px;
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    border-bottom: 1px solid var(--stroke);
}

/* Boutons “traffic lights” */
.window-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 2px;
}

.wc {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset, 0 0 6px rgba(0,0,0,.25);
    display: inline-block;
}

.wc-close {
    background: #ff5f57;
}

.wc-min {
    background: #febc2e;
}

.wc-max {
    background: #28c840;
}

/* Onglet actif (titre) */
.tab {
    max-width: 100%;
    height: 30px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    border-radius: 8px;
    color: var(--text);
    font-weight: 600;
    font-size: 14px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.06);
    text-shadow: 0 1px 0 rgba(0,0,0,.25);
}

    .tab.active {
        background: rgba(255,255,255,.10);
        border-color: rgba(255,255,255,.12);
    }

/* Omnibox (barre d’adresse) */
.omnibox {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
}

    .omnibox .lock {
        opacity: .9;
        font-size: 14px;
    }

    .omnibox input {
        flex: 1;
        min-width: 0;
        height: 100%;
        background: transparent;
        border: 0;
        outline: 0;
        color: var(--text);
        font-size: 13px;
    }

/* Contenu (comme ta page web “dans le navigateur”) */
.console-content {
    padding: 18px 20px;
    background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.18));
    border-left: 0;
    height: 420px; /* à ajuster selon .compact/.expanded */
}

/* Accentuation subtile uniquement sur le focus/hover */
.console-window.browser:hover {
    border-color: rgba(0,255,204,0.2);
    box-shadow: 0 12px 60px rgba(0,231,212,.12), var(--ring);
}

/* Texte principal : on garde ta vibe teal mais sans glitch agressif */
.prompt-text {
    color: var(--accent);
    font-weight: 600;
    font-size: clamp(14px, 2.2vw, 34px);
    letter-spacing: .3px;
    text-shadow: 0 0 18px rgba(0,231,212,.25);
    animation: colorShift 6s ease-in-out infinite;
}

/* RESPONSIVE */
@media (max-width: 1350px) {

    .console-window.browser {
        left: 60%;
        right: auto;
        transform: translateX(-50%);
        width: min(92vw, 640px);
        top: 100px;
    }

    .console-content {
        height: 380px;
    }
}

@media (max-width: 1080px) {

    .mud-appbar.mud-appbar-fixed-top {
        background-color: transparent !important;
    }

    .console-window.browser {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: min(92vw, 640px);
        top: 100px;
    }
}

@media (max-width: 768px) {

    .console-window.browser:not(.is-wide):not(.is-minimized):not(.is-collapsed) { /*En fonction des boutons maximise etc.*/
        width: 82vw;
        height: 105px !important;
    }

    .console-window.browser.EnlargePrompt {
        height: 60% !important
    }

    .console-titlebar {
        grid-template-columns: auto 1fr;
    }

    .omnibox {
        display: none;
    }
    /* on simplifie sur mobile */
    .console-content {
        height: 56vh;
    }
}

/* Anim existantes conservées mais adoucies */
@keyframes colorShift {
    0%,100% {
        color: #00ffcc;
    }

    50% {
        color: #7fffea;
    }
}


/* ENDING PROMPT EFFECT */
@keyframes closePrompt {
    0% {
        opacity: 1;
        transform: scale(1) translateX(-50%);
    }

    100% {
        opacity: 0;
        transform: scale(0.8) translateX(-50%);
    }
}

/* Lignes de circuit */
.circuit-line {
    position: absolute;
    width: 60px;
    height: 2px;
    background-color: #00ffcc;
    box-shadow: 0 0 6px #00ffcc;
}

/* Orientations des lignes */
.left-line {
    transform: translateX(-100%);
}

.right-line {
    transform: translateX(100%);
}

.top-line {
    height: 60px;
    width: 2px;
    transform: translateY(-100%);
}

.bottom-line {
    height: 60px;
    width: 2px;
    transform: translateY(100%);
}

/* Nœuds */
.circuit-node {
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: #00ffcc;
    border-radius: 50%;
    box-shadow: 0 0 8px #00ffcc;
    z-index: 3;
}


@keyframes glitch {
    0% {
        transform: skew(0.5deg, 0.5deg);
    }

    20% {
        transform: skew(-0.5deg, -0.5deg);
    }

    40% {
        transform: skew(0.5deg, -0.5deg);
    }

    60% {
        transform: skew(-0.5deg, 0.5deg);
    }

    100% {
        transform: skew(0);
    }
}

.form-step {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 1rem;
}
/* Le conteneur reste en flow normal */


/* Canvas normal */

.Under-title-Home {
    font-family: "Intel One Mono", monospace !important;
    font-optical-sizing: auto;
    font-weight: 600 !important;
    font-size: large;
    opacity: 1;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
    position: relative;
    z-index: -100 !important;
    margin-top: 50px !important;
}

.TextAppears {
    height: 400px !important;
    opacity: 1;
    animation-fill-mode: forwards; /* 👈 Garde la fin de l'anim */
    transition: opacity 0.9s ease, transform 0.5s ease;
    opacity: 0;
    padding-right: 2rem;
    padding-left: 2rem;
}

    .TextAppears.Animate {
        opacity: 1;
        animation: slideFadeIn 1.2s, ease-out forwards;
    }

@keyframes slideFadeIn {
    from {
        opacity: 0;
        transform: translateY(-80px);
    }

    to {
        opacity: 1;
        transform: translateY(20px) !important;
    }
}

.console-window {
    position: absolute;
    z-index: 1000;
    pointer-events: auto;
}

.console-texts {
    display: flex;
    flex-direction: row;
    gap: 0.4rem;
    align-items: center;
    z-index: 2;
}

.keyboard-buttons {
    display: flex;
    gap: 1.2rem;
    margin-top: 2rem;
    justify-content: center;
}

/* Style de base */
.glitch-key {
    font-family: 'Courier New', monospace;
    font-weight: bold;
    font-size: 1.1rem;
    border: none;
    padding: 1rem 2rem;
    border-radius: 10px;
    box-shadow: 0 6px 0 #00000044;
    transition: all 0.15s ease-in-out;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    z-index: 2;
    letter-spacing: 1px;
}

    /* Appui visuel */
    .glitch-key:active {
        transform: translateY(4px);
        box-shadow: 0 2px 0 #00000044;
        filter: brightness(0.9);
    }

/* TEAL style */
.glitch-teal {
    background-color: #00ffe7;
    color: #003c3b;
    box-shadow: 0 6px 0 #009b91;
}

/* ORANGE style */
.glitch-orange {
    background-color: #ffb347;
    color: #332100;
    box-shadow: 0 6px 0 #b36b00;
}

/* Glitch effet secondaire */
.glitch-key::before,
.glitch-key::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    pointer-events: none;
    opacity: 0.05;
    text-shadow: 2px 0 red, -2px 0 blue;
}

.glitch-key:hover::before {
    animation: glitch-flicker 1s infinite linear alternate-reverse;
}

@keyframes glitch-flicker {
    0% {
        clip: rect(0, 9999px, 0, 0);
    }

    5% {
        clip: rect(0, 9999px, 100%, 0);
        transform: translate(1px, -1px);
    }

    10% {
        clip: rect(0, 9999px, 20px, 0);
        transform: translate(-1px, 1px);
    }

    15% {
        clip: rect(0, 9999px, 5px, 0);
        transform: translate(0, 0);
    }
}

.keyboard-buttons {
    display: flex;
    gap: 2rem;
    justify-content: center;
    margin-top: 3rem;
}

.keyboard-bottom-bar {
    visibility: visible;
}

    .keyboard-bottom-bar.disapear {
        visibility: hidden !important;
    }
/* Base bouton */
.neon-key {
    font-family: 'Courier New', monospace;
    font-weight: bold;
    font-size: 1.2rem;
    padding: 1.1rem 2.3rem;
    border: none;
    border-radius: 12px;
    text-transform: uppercase;
    position: relative;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
    cursor: pointer;
    letter-spacing: 1px;
    color: #000;
    box-shadow: 0 8px 0 rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 255, 255, 0.2);
    transform-style: preserve-3d;
}

    /* Pressé */
    .neon-key:active {
        transform: translateY(4px);
        box-shadow: 0 4px 0 rgba(0, 0, 0, 0.4);
    }

    /* Glow au survol */
    .neon-key:hover {
        filter: brightness(1.05);
        animation: glow-pulse 2s ease-in-out infinite;
    }

@keyframes glow-pulse {
    0%, 100% {
        box-shadow: 0 8px 0 rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 255, 255, 0.3), 0 0 20px rgba(0, 255, 255, 0.15);
    }

    50% {
        box-shadow: 0 10px 0 rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 255, 255, 0.6), 0 0 30px rgba(0, 255, 255, 0.3);
    }
}

/* Chromatic glitch */
.neon-key::before,
.neon-key::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    opacity: 0.06;
    z-index: -1;
    color: inherit;
    pointer-events: none;
}

.neon-key:hover::before {
    color: cyan;
    transform: translate(-1px, 0);
    animation: chroma-flicker 0.2s infinite alternate;
}

.neon-key:hover::after {
    color: magenta;
    transform: translate(1px, 0);
    animation: chroma-flicker 0.2s infinite alternate-reverse;
}

@keyframes chroma-flicker {
    0% {
        opacity: 0.03;
    }

    100% {
        opacity: 0.07;
    }
}

/* THEMES */
.neon-key.teal {
    background-color: #00ffe0;
    color: #003836;
    box-shadow: 0 8px 0 #00897b, 0 0 10px #00ffe0;
}

.neon-key.orange {
    background-color: #ffc35c;
    color: #4b2a00;
    box-shadow: 0 8px 0 #cc8400, 0 0 10px #ffc35c;
}

.sci-fi-keyboard {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin-top: 3rem;
}

.sci-fi-key {
    font-family: 'Courier New', monospace;
    font-weight: bold;
    font-size: 1.1rem;
    letter-spacing: 1px;
    color: #f9c80e;
    background: rgba(0, 178, 149, 0.08);
    border: 1px solid #00b29555;
    border-radius: 8px;
    padding: 1.2rem 2.2rem;
    backdrop-filter: blur(6px);
    box-shadow: 0 8px 0 #00453f, 0 0 10px rgba(249, 200, 14, 0.1);
    text-shadow: 0 0 6px rgba(249, 200, 14, 0.4);
    transition: all 0.25s ease;
    position: relative;
    z-index: 1;
    cursor: pointer;
}

    .sci-fi-key::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient(45deg, #00b295, #f9c80e);
        opacity: 0;
        z-index: -1;
        transition: opacity 0.3s ease-in-out;
        filter: blur(8px);
    }

    .sci-fi-key:hover {
        color: #ffffff;
        background: rgba(0, 178, 149, 0.15);
        box-shadow: 0 4px 0 #004b42, 0 0 14px #00b295, 0 0 22px #00ffcc, 0 0 30px rgba(0, 255, 255, 0.3);
        text-shadow: 0 0 4px #00f2dc, 0 0 6px #00ffcc;
    }

    .sci-fi-key:active {
        transform: translateY(4px);
        box-shadow: 0 2px 0 #003933;
    }

    .sci-fi-key:hover::before {
        opacity: 0.35;
        animation: flicker 1.5s infinite ease-in-out;
    }

@keyframes flicker {
    0%, 100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.55;
    }
}

.keyboard-bottom-bar {
    position: absolute;
    bottom: 200px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 2rem;
    z-index: 1100;
    pointer-events: auto;
}

@media screen and (max-width: 1020px) {


    .Project-txt {
        font-size: 0.8rem;
        width: 200px !important;
    }
}

:root {
    /* Palette console */
    --console-text: #aafdf0;
    --console-glow-1: rgba(64,255,220,.45);
    --console-glow-2: rgba(64,255,220,.25);
    --console-panel: rgba(34, 67, 79, 0.55);
    /* Accents */
    --teal: #00f2dc;
    --teal-2: #00b295;
}
/* Logo : blanc par défaut, découpé par le masque */
.LogoAntesysvg {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: #fff; /* couleur visible via le masque */
    -webkit-mask: url("/images/LogoAsvg.svg") no-repeat center / contain;
    mask: url("/images/LogoAsvg.svg") no-repeat center / contain;
    transition: background-color .25s ease, transform .25s ease;
}

/* Au hover: seul le logo change (pas la “case” du bouton) */
.brand-link:hover .LogoAntesysvg {
    background-color: #00f2dc; /* couleur du logo au survol */
    transform: translateY(-1px); /* petit lift optionnel */
}

/* Pas de fond hover sur le lien lui-même */
.brand-link, .brand-link:hover {
    background-color: transparent !important;
}

/* Accessibilité : pas d’animation si l’utilisateur la réduit */
@media (prefers-reduced-motion: reduce) {
    .LogoAntesysvg {
        transition: none;
    }
}

/* ---- Variables cibles (remplies par JS) ---- */
.console-window {
    --dock-tx: 0px;
    --dock-ty: 0px;
    --dock-sx: .1;
    --dock-sy: .1;
}

    /* Animations shrink/grow vers le bouton de dock */
    .console-window.anim-to-dock {
        animation: antesy-to-dock 420ms cubic-bezier(.22,.61,.36,1) forwards;
    }

    .console-window.anim-from-dock {
        animation: antesy-from-dock 420ms cubic-bezier(.22,.61,.36,1) forwards;
    }

@keyframes antesy-to-dock {
    0% {
        transform: translate(0,0) scale(1);
        opacity: 1;
        filter: blur(0);
    }

    100% {
        transform: translate(var(--dock-tx),var(--dock-ty)) scale(var(--dock-sx),var(--dock-sy));
        opacity: .15;
        filter: blur(2px);
    }
}
/* Logo : blanc par défaut, découpé par le masque */
.LogoAntesysvg {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: #fff; /* couleur visible via le masque */
    -webkit-mask: url("/images/LogoAsvg.svg") no-repeat center / contain;
    mask: url("/images/LogoAsvg.svg") no-repeat center / contain;
    transition: background-color .25s ease, transform .25s ease;
}

/* Survol/clic : seule la couleur du logo change */
.brand-link:hover .LogoAntesysvg,
.brand-link:active .LogoAntesysvg { /* :active pour le “tap” mobile */
    background-color: #009688 !important;
    transform: translateY(-3px); /* petit lift optionnel */
}
/* Limite à ta barre (ex. .appbar) si tu veux */
.mud-nav-link {
    transition: none !important; /* coupe l’anim éventuelle */
}

    .mud-nav-link:active {
        background-color: transparent !important;
        box-shadow: none !important;
        transform: none !important; /* évite un léger “press” */
    }

    /* iOS/Android : retirer le surlignage au tap */
    .mud-nav-link, .mud-nav-link * {
        -webkit-tap-highlight-color: transparent;
    }
/* Pas de fond qui change sur le lien */
.brand-link,
.brand-link:hover,
.brand-link:active {
    background-color: transparent !important;
}

/* Accessibilité : désactive les anims si l’utilisateur les réduit */
@media (prefers-reduced-motion: reduce) {
    .LogoAntesysvg {
        transition: none;
    }
}

@keyframes antesy-from-dock {
    0% {
        transform: translate(var(--dock-tx),var(--dock-ty)) scale(var(--dock-sx),var(--dock-sy));
        opacity: .15;
        filter: blur(2px);
    }

    100% {
        transform: translate(0,0) scale(1);
        opacity: 1;
        filter: blur(0);
    }
}

/* Écran de transition quand SetOverlay est appelé */
.console-flash {
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 120% at 50% 50%, rgba(0,255,220,.18), rgba(0,0,0,.0) 60%), linear-gradient(rgba(0,255,220,.12), rgba(0,0,0,0));
    pointer-events: none;
    z-index: 3;
    animation: flashInOut 260ms ease-out forwards;
}

@keyframes flashInOut {
    0% {
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* =================== DOCK =================== */
/* Barre dock – mêmes vibes que la console */
.dock {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    display: flex; /* (inchangé) */
    gap: .9rem;
    padding: .6rem;
    border-radius: 14px; /* ✅ garde tes coins, pas de pill exagéré */
    background: var(--console-panel);
    border: 1px solid rgba(0,242,220,.14);
    backdrop-filter: saturate(120%) blur(10px);
    box-shadow: 0 18px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05), 0 0 22px rgba(0,242,220,.08);
    z-index: 1100;
    pointer-events: auto;
    isolation: isolate;
    /* ✅ shrink-wrap naturel et transition douce quand les boutons apparaissent/disparaissent */
    width: max-content;
    max-width: 92vw;
    transition: width .18s ease, transform .18s ease;
}

/* Boutons “terminal/glass” */
.key {
    font: 600 14px/1.1 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--console-text);
    border: 1px solid rgba(0,242,220,.32);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(0,178,149,.22), rgba(0,178,149,.06));
    padding: .95rem 1.25rem;
    position: relative;
    transition: transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s;
    box-shadow: 0 0 0 1px rgba(0,242,220,.10) inset, 0 8px 20px rgba(0,0,0,.35), 0 0 16px rgba(0,242,220,.12);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
}

    /* Glow texte identique à la console */
    .key .label, .key .caret {
        text-shadow: 0 0 6px var(--console-glow-1), 0 0 16px var(--console-glow-2);
    }

    .key:hover {
        color: #ffffff;
        background: linear-gradient(180deg, rgba(0,178,149,.28), rgba(0,178,149,.10));
        box-shadow: 0 0 0 1px rgba(0,242,220,.35) inset, 0 12px 24px rgba(0,0,0,.45), 0 0 24px rgba(0,242,220,.25);
    }

    .key:active {
        transform: translateY(2px);
    }

    .key:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px rgba(0,242,220,.70), 0 0 0 4px rgba(0,242,220,.18);
    }

/* CTA principal */
.key--primary {
    padding: 1rem 1.6rem;
}

    .key--primary .caret {
        margin-right: .4rem;
        opacity: .85;
        filter: drop-shadow(0 0 6px var(--console-glow-1));
    }

/* Play minimal (bouton 1) */
.key--ghost {
    width: 3rem;
    aspect-ratio: 1/1;
    display: grid;
    place-items: center;
    background: transparent;
    border-color: rgba(0,242,220,.25);
    box-shadow: 0 0 0 1px rgba(0,242,220,.06) inset;
    font-size: 1.1rem;
    color: var(--console-text);
}

    .key--ghost:hover {
        color: #fff;
    }

    /* ✅ icône play taille stable */
    .key--ghost .ico {
        width: 1.35rem;
        height: 1.35rem;
    }

    .key--ghost svg {
        display: block;
    }
/* évite le shrink inline */

/* Secondaire : fenêtre + (bouton 3) */
.key--secondary {
    color: var(--console-text);
    background: linear-gradient(180deg, rgba(0,178,149,.16), rgba(0,178,149,.05));
    border-color: rgba(0,242,220,.28);
}

    .key--secondary:hover {
        color: #fff;
        background: linear-gradient(180deg, rgba(0,178,149,.24), rgba(0,178,149,.10));
    }

.key .ico {
    display: block;
}

/* === Visibilité liée à l'état du dock (pas de "trous") === */
/* ▶️ Play : toujours visible */
.dock .key--ghost {
    display: grid; /* garde le centrage */
}

/* ➕ Bouton 3 : visible seulement quand le dock est armé */
.dock .key--secondary {
    display: none;
}

.dock.is-armed .key--secondary {
    display: inline-flex;
}

/* Sécurité : si un script met .hidden/hidden, on supprime la place occupée */
.key.is-hidden,
.key[hidden] {
    display: none !important;
}
/* Neutralise tout background au survol / focus / actif pour les liens de nav */
.mud-nav-link:hover,
.mud-nav-link:focus,
.mud-nav-link:active {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* (Optionnel) si tu utilises une classe dédiée pour la marque */
.brand-link:hover,
.brand-link:focus,
.brand-link:active {
    background-color: transparent !important;
}

.LogoAntesysvg2 {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-top: 13px;
    background-color: #fff; /* couleur visible via le masque */
    -webkit-mask: url("/images/LogoAsvg.svg") no-repeat center / contain;
    mask: url("/images/LogoAsvg.svg") no-repeat center / contain;
    transition: background-color .25s ease, transform .25s ease;
}
/* Sur tablette & mobile (≤ md : 960px), on passe le logo en noir */
@media (max-width: 960px) {
    .TextAppears {
        height: 600px !important;
        margin-top:-30px; 
    }
  
}
/* ============== Responsive ============== */
/* Mobile (<1020px) : bloc 40px plus haut, police + petite */
@media (max-width: 1020px) {
    .dock {
        bottom: 45px;
        padding: .3rem;
        gap: .6rem;
        /* Optionnel : autoriser le wrap si 3 boutons ne tiennent pas */
        flex-wrap: wrap;
        justify-content: center;
    }

    .key {
        font-size: .78rem;
        padding: .6rem .85rem;
    }

    .key--ghost {
        width: 2.7rem;
    }

    .key--primary .label {
        display: inline-block;
        max-width: 46vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Fullscreen (≥1600px) : plus grands */
@media (min-width: 1600px) {
    .dock {
        padding: .75rem;
        gap: 1.1rem;
    }

    .key {
        font-size: 16px;
        padding: 1.1rem 1.55rem;
    }

    .key--ghost {
        width: 3.4rem;
    }
}

/* ==== Divers (inchangé) ==== */
.hidden {
    opacity: 0;
}

.visible {
    opacity: 1;
}

.console-window {
    transition: transform 0.6s ease, opacity 0.6s ease;
    transform: translateY(0);
    opacity: 1;
}

/* Apparition "vers le haut" */
.scroll-in {
    transform: translateY(0);
    opacity: 1;
}

/* Disparition "vers le bas" */
.scroll-out {
    transform: translateY(40px);
    opacity: 0;
    pointer-events: none;
}
/* Masquage "vers le haut" : dock + console */
.dock.is-scroll-hidden {
    opacity: 0;
    transform: translate(-50%, -14px); /* ✅ garde X = -50%, slide ↑ en Y */
    pointer-events: none;
    transition: opacity .18s ease, transform .20s ease;
}

.console-window.is-scroll-hidden {
    opacity: 0;
    transform: translateY(-24px); /* slide ↑ strictement vertical */
    pointer-events: none;
    transition: opacity .18s ease, transform .22s ease;
    will-change: opacity, transform;
}

/* Accessibilité : pas d’anim si l’utilisateur réduit les mouvements */
@media (prefers-reduced-motion: reduce) {
    .dock.is-scroll-hidden,
    .console-window.is-scroll-hidden {
        transition: none;
        transform: none;
    }
}

/* base: même timing/ease pour dock + console */
/* ⚠️ Sépare dock/console pour ne pas écraser le centrage du dock */
.dock {
    transform: translate(-50%, 0); /* ✅ conserve le centrage horizontal */
    opacity: 1;
    transition: transform .22s ease-out, opacity .22s ease-out;
    will-change: transform, opacity;
}

.console-window {
    transform: translateY(0); /* Y neutre */
    opacity: 1;
    transition: transform .22s ease-out, opacity .22s ease-out;
    will-change: transform, opacity;
}

/* hide vers le haut — on force la priorité sur la console si d'autres classes agissent */
#antesyConsole.is-scroll-hidden,
#antesyConsole.is-scroll-hidden.scroll-in,
#antesyConsole.is-scroll-hidden.scroll-out {
    transform: translateY(-20px) !important; /* strictement vertical */
    opacity: 0 !important;
    pointer-events: none;
}

/* dock en synchro (version sans décalage horizontal) */
.dock.is-scroll-hidden {
    transform: translate(-50%, -20px) !important; /* ✅ pas de décalage X */
    opacity: 0 !important;
    pointer-events: none;
}

.mud-input-control-input-container {
    z-index: 0 !important;
}

.form-wizard {
    position: relative;
    overflow: hidden;
    height: 80%;
    z-index: 1;
    clip-path: inset(0 0 0 0); /* force le clipping même pendant l’animation */
}

.hidden {
    opacity: 0;
}

.visible {
    opacity: 1;
}

.console-window {
    transition: transform 0.6s ease, opacity 0.6s ease;
    transform: translateY(0);
    opacity: 1;
}

/* Apparition "vers le haut" */
.scroll-in {
    transform: translateY(0);
    opacity: 1;
}

/* Disparition "vers le bas" */
.scroll-out {
    transform: translateY(40px);
    opacity: 0;
    pointer-events: none;
}

.mud-input-control-input-container {
    z-index: 0 !important;
}

.form-wizard {
    position: relative;
    overflow: hidden;
    height: 80%;
    z-index: 1;
    clip-path: inset(0 0 0 0); /* force le clipping même pendant l’animation */
}

.step-container {
    display: flex;
    flex-direction: column;
    transition: transform 0.6s ease-in-out;
    will-change: transform;
}

.step-1 {
    transform: translateY(0);
}

.step-2 {
    transform: translateY(-60vh);
}

.step-3 {
    transform: translateY(-120vh);
}

.oscillating-timeline {
    width: 100%;
    font-family: 'Roboto', sans-serif;
    position: relative;
    height: 600px !important;
}

.timeline-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.timeline-graphic {
    position: relative;
    width: 120%;
    max-width: 800px;
    overflow: visible !important;
}

.timeline-text {
    width: 40%;
    min-width: 200px;
    padding: 1rem;
}




    .timeline-text p {
        font-size: 1rem;
        color: #555;
    }

/* ================= CURVES ================= */

.timeline-curve {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible !important;
}

.curve-bg {
    fill: none;
    stroke: #444;
    stroke-width: 3;
}


.curve-fill {
    fill: none;
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s ease;
    visibility: hidden;
}

    .curve-fill.visible {
        visibility: visible;
    }

    .curve-fill.visible {
        visibility: visible;
    }

.teal-fill {
    stroke: #00ffcc;
}

.curve-bg {
    fill: none;
    stroke: #444;
    stroke-width: 3;
}
/* ================= DOTS ================= */

.timeline-dot {
    position: absolute;
    width: 13px;
    height: 13px;
    background-color: #222;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    transition: background-color 0.3s ease;
}

.step-node {
    cursor: pointer;
}

.timeline-graphic svg .dot {
    fill: #14b8a6;
    opacity: .5;
}

.timeline-dot {
    position: absolute;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: black; /* neutre, pas noir */
    transition: background-color .3s, box-shadow .3s;
    z-index: 2;
}

    .timeline-dot.past {
        background: #00ffcc;
    }
    /* bleu */
    .timeline-dot.active {
        background: #00ffc3;
    }
/* ================= LABELS ================= */

.step-node {
    position: absolute;
    transform: translateX(-50%);
    font-size: 0.75rem;
    text-align: center;
    white-space: nowrap;
    color: #888;
    transition: all 0.3s ease;
}

    .step-node.past {
        font-weight: 300 !important;
    }

    .step-node.active.current {
        font-weight: bold;
        color: #00ffcc;
    }

/* ================= CONTROLS ================= */

.timeline-controls {
    text-align: center;
    margin-top: 1rem;
}

.nav-arrow {
    font-size: 2rem;
    color: #00ffcc;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 1rem;
    transition: transform 0.3s ease;
}

    .nav-arrow:hover {
        transform: scale(1.1);
    }

/* ================= RESPONSIVE ================= */
@media (max-width: 1399px) {
    .oscillating-timeline {
        height: 700px !important;
    }

    .timeline-flex {
        padding: auto !important;
        margin: auto !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
}

.oscillating-timeline {
    margin-top: 100px !important;
}

@media (max-width: 768px) {
    .Under-title-Home {
        /*  min-height: 800px !important;*/
    }

    .legals {
        margin-left: -30px !important;
    }

    .expertise-bloc {
        max-width: 310px !important;
    }

    .exp-tags {
        margin-left: 0 !important;
    }

    .footer-slogan {
        font-size: 58px !important;
    }

    .timeline-flex {
        flex-direction: column;
        text-align: center;
    }

    .timeline-text h2 {
        font-size: 1.5rem;
    }

    .timeline-text p {
        font-size: 0.9rem;
    }

    .CurveMainTitle {
        font-size: 19px !important;
    }

    .oscillating-timeline {
        height: 800px !important;
    }

    .timeline-text {
        padding-right: 1rem !important;
    }

    .AdaptStepTitle {
        font-size: 27px !important;
    }

    .timeline-graphic {
        margin-top: 50px !important;
    }

    .timeline-text-wrapper {
        width: 300px !important;
    }
}


/* ================= FORM CONTEXT (si utilisé ailleurs) ================= */

.form-step {
    height: 60vh;
    flex-shrink: 0;
    padding-bottom: 2rem;
    box-sizing: border-box;
    z-index: 2;
}

.form-wrapper {
    display: flex;
    flex-direction: column;
    height: 105%;
    overflow: hidden;
}

.form-wizard {
    flex-grow: 1;
    overflow: hidden;
    position: relative;
}

.form-navigation {
    padding-top: 1rem;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

.SecondaryColor {
    color: #f9c80e !important;
}

.mud-input-root input,
.my-custom-input .mud-input-root input {
    color: #ffffff !important;
}

.SecondaryColor input,
.SecondaryColor label,
.SecondaryColor .mud-input-label {
    color: #f9c80e !important;
}



/* === TITRE DU TEXTE === */
.timeline-text h2 {
    margin-bottom: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.6rem;
    min-height: 3.6rem;
}

/* === Layout général === */
.timeline-flex {
    display: flex;
    gap: 2rem;
    justify-content: space-between;
    align-items: flex-start;
    margin-inline: auto;
    width: 100%;
    overflow-x: visible;
    padding-left: 3rem !important;
}

/* === Bloc graphique (svg) === */
.timeline-graphic {
    flex: 1 1 60%;
    min-width: 0;
    width: 100%;
    margin-top: 200px;
    position: relative;
    overflow: visible;
    margin-left: auto;
    margin-right: auto
}

/* === Texte + flèches === */
.timeline-text-wrapper {
    flex: 1 1 40%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    position: relative;
    z-index: 1000;
    width: 100%;
    padding: 3rem;
}

/* === BLOC DE TEXTE À DROITE === */
.timeline-text {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: justify;
    opacity: 1;
    transform: translateX(0);
    transition: none;
    max-width: 150%;
    width: auto !important;
    padding-right: 5rem;
}

    /* === ANIMATIONS ENTRÉES === */
    .timeline-text.forward {
        animation: slideInFromRight 0.4s ease forwards;
    }

    .timeline-text.backward {
        animation: slideInFromLeft 0.4s ease forwards;
    }

/* === ANIMATIONS === */
@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* === LABELS SUR LA COURBE === */
.Title-Curve {
    font-size: 22px;
}

/* === FLÈCHES === */
.timeline-controls {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

.nav-arrow:disabled {
    opacity: 0.2;
    cursor: not-allowed;
    pointer-events: none;
    color: gray;
}

/* === RESPONSIVE === */
@media (max-width: 1199.98px) {
    .div7 {
        margin-top: 0px !important;
    }

    .div8 {
        margin-top: 0px !important;
    }

    .timeline-flex {
        flex-direction: column;
        align-items: center;
        padding: 0rem !important;
    }

    .timeline-text.forward {
        padding-right: 0.5rem !important;
    }

    .timeline-graphic,
    .timeline-text-wrapper {
        width: 100%;
        margin-top: 100px !important;
    }

    .timeline-text-wrapper {
        align-items: center;
        text-align: center;
        margin-top: 1rem;
    }
}

@media (min-width: 955px) {
    .div7 {
        margin-top: -500px !important;

    }

    .div8 {
        margin-top: -500px !important;
    }
}

.step-node.pad-left {
    padding-left: 1rem;
}

.step-node.pad-right {
    padding-right: 1rem;
}

@media (max-width: 768px) {

    .div7 > .ResponsiveLottiePlayer {
        transform: translate(-22%, 10px);
    }
    .div8 > .ResponsiveLottiePlayer {
        transform: translate(-22%, 10px);
    }
    .timeline-graphic,
    .timeline-text-wrapper {
        width: 90% !important;
    }
    .expertises-container{
        padding-top:0rem !important;
    }
    .TextAppears {
        margin-top: 20px !important;
    }
    .punch-text {
        margin-top: 25px !important;
        margin-bottom: 25px !important;
    }
    .Title-Curve {
        font-size: 0.9rem;
    }

    .timeline-text p {
        text-align: justify;
        font-size: 0.95rem;
        line-height: 1.5;
    }

    .timeline-controls {
        margin-top: -6rem;
    }

    .timeline-text h2 {
        font-size: 1.2rem;
    }

    .timeline-text {
        width: 300px !important;
    }
}

}

/* === DOTS EDGES === */
.edge-dots {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 4px;
    z-index: 2;
}

    .edge-dots span {
        width: 4px;
        height: 4px;
        background-color: #444;
        border-radius: 50%;
        opacity: 0.6;
    }

.left-dots {
    left: -12px;
}

.right-dots {
    right: -12px;
}

.timeline-curve .dot {
    fill: #999;
    opacity: 0.6;
    transition: all 0.3s ease;
}

.svg-fade-overlay {
    position: absolute;
    top: -120px;
    left: -2px;
    width: 101%;
    height: 413%;
    pointer-events: none;
    z-index: 10;
    background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 1));
}

.no-scroll {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
}
/* S’il y a un style global qui met .no-scroll partout, on le neutralise en mobile, par sécurité */
@media (pointer: coarse) {
    .no-scroll {
        overflow: auto !important;
        position: static !important;
        width: auto !important;
    }
}

.card-hover:hover {
    box-shadow: 0px 4px 14px rgba(0,0,0,0.1);
    transform: translateY(-4px);
    transition: 0.3s ease;
}

.section1-homepage {
    font-size: 1.1rem;
    text-align: justify;
    max-width: 800px;
    margin: 0 auto;
}

/*CSS CARD*/
.card-container {
    border-radius: 20px;
    overflow: hidden;
    background-color: white;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0 auto;
}

.card-header {
    background-color: white;
    padding: 1rem;
}

.card-title {
    font-weight: 600;
    font-size: 1.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-arrow {
    color: #ff6600;
    font-size: 1.2rem;
    font-weight: bold;
}

.card-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-bottom: 1px solid #eee;
}

.card-content {
    padding: 1.2rem;
    flex-grow: 1;
}

.card-description {
    font-size: 0.95rem;
    text-align: justify;
}

/* INSIGHTS MAIN PAGE : */
.insights-hero {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.hero-title {
    font-size: 3rem;
    font-weight: 700;
    margin: 0;
    color: white;
}

.insights-description {
    font-size: 1.25rem;
    color: white;
}

.hero-section {
    position: relative;
    height: 300px !important;
}
/* === Container principal de l'article === */
.insight-article {
    position: relative;
    z-index: 1;
    background-color: #fff;
    color: #333;
    font-family: 'Inter', sans-serif;
}

/* === Section HERO === */
.hero-section {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    box-sizing: border-box;
}

.hero-title {
    color: white;
    font-size: 2.5rem;
    font-weight: 600;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}

/* === Carrousel Section === */
.carousel-section {
    background-color: #f9f9f9;
    padding: 2rem 0;
}

.carousel-image {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 8px;
}

/* === Contenu Section === */
.content-section {
    background-color: #fff;
    padding-top: 2rem;
}

    .content-section p {
        font-size: 1.1rem;
        line-height: 1.6;
        margin-bottom: 1rem;
        color: #444;
    }

    .content-section .mud-typography-h5 {
        margin-top: 1.5rem;
        font-weight: 600;
        color: #222;
    }

/* === Technologies Chips === */
.mud-chip {
    font-size: 0.85rem;
    font-weight: 500;
    background-color: #E0F2F1 !important;
    color: #00695C !important;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
}

/* === Responsive Hero Title === */
@media screen and (max-width: 768px) {
    .hero-title {
        font-size: 1.8rem;
    }

    .carousel-image {
        height: 250px;
    }
}

/* ===========================
   STRUCTURE EN GRID
=========================== */
.section-grid {
    display: grid;
    grid-template-columns: 0.3fr repeat(4, 1fr) 0.3fr;
    grid-template-rows: 0.3fr repeat(6, auto) 0.3fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    position: relative;
    width: 100%;
    min-height: 80vh;
}

/* Zones titre */
.div1 {
    grid-area: 2 / 2 / 3 / 6;
}
/* texte gauche*/
.div2 {
    grid-area: 3 / 2 / 6 / 4;
}
/* svg */
.div3 {
    grid-area: 3 / 2 / 6 / 6;
}
/* texte a droite */
.div4 {
    grid-area: 3 / 4 / 6 / 6;
}

.div5 {
    grid-area: 2 / 4 / 3 / 6;
}

.div6 {
    grid-area: 2 / 2 / 3 / 4;
}

.div7 {
    /*grid-area: 5 / 2 / 8 / 4;*/
    grid-area: 5 / 8 / 8 / 4;
    margin: auto;
    margin-top: -130px;
}

.div8 {
    /*grid-area: 5 / 2 / 8 / 4;*/
    grid-area: 5 / 1 / 8 / 4;
    margin: auto;
    margin-top: -130px;
}

@media screen and (max-width: 768px) {
    .section-subtitle {
        margin-bottom: 80px !important;
    }
    .div2 {
        grid-area: 3 / 2 / 6 / 6;
    }

    .div4 {
        grid-area: 3 / 2 / 6 / 6;
    }

    .div5 {
        grid-area: 2 / 2 / 3 / 6;
    }

    .div6 {
        width: 150%;
        text-align: start;
    }
}

@media screen and (max-width: 768px) {
    .div2 {
        grid-area: 3 / 2 / 6 / 6;
    }

    .div4 {
        grid-area: 3 / 2 / 6 / 6;
    }

    .div5 {
        grid-area: 2 / 2 / 3 / 6;
    }

    .section-title {
        font-size: 48px !important;
    }
}

/* SVG ou fond de section */

.section-background {
    background-color: red; /* Debug temporaire */
    z-index: 0;
}

/* ===========================
   TYPOGRAPHIE
=========================== */
.section-title {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 700;
    margin: 0;
    color: black;
    z-index: 1;
}

.section-subtitle {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 1rem;
    z-index: 1;
}

.section-content {
    font-size: 1.1rem;
    line-height: 1.6;
    text-align: justify;
    z-index: 1;
}

/* ===========================
   SVG STYLES (si réactivé)
=========================== */
.cls-1, .cls-2, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8 {
    fill: none;
    stroke: #a9d5e0;
    stroke-linecap: round;
    stroke-miterlimit: 10;
    stroke-width: 3px;
}

.cls-1 {
    stroke-dasharray: 39 39;
}

.cls-2 {
    stroke-dasharray: 45.49 45.49;
}

.cls-3 {
    stroke-dasharray: 40.83 40.83;
}

.cls-4 {
    stroke-dasharray: 48.21 48.21;
}

.cls-5 {
    stroke-dasharray: 24.2 24.2;
}

.cls-6 {
    stroke-dasharray: 38.73 38.73;
}

.cls-8 {
    stroke-dasharray: 30.81 30.81;
}

/* Animation SVG (si activée) */
polygon.anim-stroke {
    stroke-dasharray: 20 10;
    stroke-width: 1.5;
    stroke: #1d1d1b;
    animation: none;
    transition: all 0.3s ease;
}

g:hover polygon.anim-stroke {
    animation: dashmove 2s linear infinite;
}

@keyframes dashmove {
    to {
        stroke-dashoffset: -60;
    }
}


@font-face {
    font-family: 'Geist';
    src: url('/fonts/Geist-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

.section-title {
    margin-bottom: 20px !important;
    font-family: 'Geist', sans-serif;
    font-size: 67px;
    font-weight: 700 !important;
}

.section-placeholder {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100px !important;
    width: 100% !important;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
}
/* == Svg style: 
       /* Définir les styles de base */
.cls-1 {
    stroke-dasharray: 39 39;
}

.cls-1, .cls-2, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8 {
    fill: none;
    stroke: black;
    stroke-linecap: round;
    stroke-miterlimit: 10;
    stroke-width: 3px;
    opacity: 0.1;
}

.cls-2 {
    stroke-dasharray: 45.49 45.49;
}

.cls-3 {
    stroke-dasharray: 40.83 40.83;
}

.cls-4 {
    stroke-dasharray: 48.21 48.21;
}

.cls-5 {
    stroke-dasharray: 24.2 24.2;
}

.cls-6 {
    stroke-dasharray: 38.73 38.73;
}

.cls-8 {
    stroke-dasharray: 30.81 30.81;
}

/* Ajoute le dasharray + animation à tous les polygones de fond */
polygon.anim-stroke {
    stroke-dasharray: 20 10;
    stroke-width: 1.5;
    stroke: #1d1d1b;
    animation: none;
    transition: all 0.3s ease;
}

/* Animation au survol */
g:hover polygon.anim-stroke {
    animation: dashmove 2s linear infinite;
}

@keyframes dashmove {
    to {
        stroke-dashoffset: -60;
    }
}

.section-title {
    font-size: 28px !important;
}


.section-subtitle {
    margin-bottom: 6px;
    font-weight: 400 !important;
}

.justify-one-line {
    text-align: justify;
    display: block;
    width: 100%;
}

    .justify-one-line::after {
        content: '';
        display: inline-block;
        width: 100%;
    }



@font-face {
    font-family: 'Geist';
    src: url('/fonts/Geist-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

.section-title {
    margin-bottom: 20px !important;
    font-family: 'Geist', sans-serif;
    font-size: 67px;
    font-weight: 700 !important;
}

@media screen and (min-width: 1500px) {
    .section-title {
        font-size: 48px !important;
    }
}

/* === Partie formulaire*/
.form-container {
    min-height: 650px;
    max-width: 900px;
    margin: 2rem auto;
    padding: 1rem;
    background-color: transparent;
}

.mud-input {
    background-color: #f9f2f2;
    border-radius: 0;
    border: none;
    font-family: 'Inter', sans-serif;
}

.mud-input-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: #4a0028;
}

.mud-input-input {
    padding: 0.9rem;
    font-size: 1rem;
}

.mud-button.form-submit {
    padding-inline: 2rem;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.95rem;
    background-color: #ff3c00;
    color: white;
}

    .mud-button.form-submit:hover {
        background-color: #e42f00;
    }

@media (max-width: 768px) {
    .form-container {
        margin: 1rem;
        padding: 1rem 0.5rem;
    }

    .form-wrapper {
        padding: 0rem !important;
    }

    .choice {
        font-size: smaller !important;
    }

    h1.mud-typography.mud-typography-h1.footer-slogan {
        font-size: 43px !important;
    }

    .punch-text {
        font-size: 30px !important;
    }
}

/*Pour les listes de sélections: permet un background blanc au mieux de transparent.*/
.mud-list {
    background-color: white !important;
}

.mud-input {
    background-color: rgba(0, 128, 128, 0.1); /* teal clair, 20% d'opacité */
}


.form-wrapper {
    /*    border: 1px solid #ddd;*/
    padding: 2rem;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: -27px;
    /*    border-radius: 12px;
    background-color: #fff;*/
    transition: all 0.4s ease-in-out;
}

.animated-form {
    animation: fadeIn 0.4s ease-in;
}

.confirmation-wrapper {
    text-align: center;
    animation: slideFadeIn 0.5s ease-in-out;
    padding: 2rem 1rem;
}

.success-circle {
    width: 80px;
    height: 80px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background-color: #26a69a; /* teal */
    display: flex;
    align-items: center;
    justify-content: center;
    animation: popScale 0.6s ease-out;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

    .success-circle::after {
        content: "";
        position: absolute;
        top: 25px;
        left: 200px;
        width: 20px;
        height: 35px;
        border-right: 4px solid white;
        border-bottom: 4px solid white;
        transform: rotate(45deg);
        animation: drawCheck 0.4s 0.2s ease forwards;
        opacity: 0;
    }

.checkmark {
    font-size: 2.5rem;
    color: white;
    animation: fadeInCheck 0.4s ease 0.3s forwards;
    opacity: 0;
}


@keyframes fadeInCheck {
    from {
        transform: scale(0.7);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes slideFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes popScale {
    0% {
        transform: scale(0.6);
        opacity: 0;
    }

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

@keyframes drawCheck {
    to {
        opacity: 1;
    }
}
/*Fixe les inputs sur homes page du formulaire afin qu'il ne soit pas sous le babyloncanvas.*/
.mud-input {
    z-index: 1000;
}

/* Regle pour le over du babylon */

.TextOverBabylon {
    color: #00ffcc;
}
/*Texte tjrs au dessus de babylon.*/
.MaintTitleTextOverBabylon {
    color: #00ffcc !important;
}

.mud-grid, .mud-main-content, .mud-container {
    z-index: auto !important; /* empêche la création de contexte */
}
/* ===== Marquee – conteneur ===== */
.marquee {
    width: 100%;
    overflow: hidden;
    padding: var(--pad, 2.5rem 0);
    /* fondu discret sur les bords */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--edge, 64px), #000 calc(100% - var(--edge, 64px)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--edge, 64px), #000 calc(100% - var(--edge, 64px)), transparent 100%);
}

/* ===== Piste animée ===== */
.marquee__track {
    display: flex;
    align-items: center;
    gap: var(--gap,56px);
    /* Astuce: deux groupes identiques, on translate de 50% => boucle parfaite */
    animation: marquee var(--speed,28s) linear infinite;
    animation-delay: var(--delay, 0s);
    will-change: transform;
}

    .marquee__track.reverse {
        animation-direction: reverse;
    }

.pause-on-hover:hover {
    animation-play-state: paused;
}

/* ===== Groupes (contenus dupliqués) ===== */
.marquee__group {
    display: flex;
    align-items: center;
    gap: var(--gap,56px);
    flex-shrink: 0; /* évite le rétrécissement et assure la largeur naturelle */
}

/* ===== Icônes ===== */
.marquee__item {
    height: var(--item-h,56px);
    width: auto;
    display: block;
    user-select: none;
    pointer-events: none;
    filter: saturate(.9) opacity(.92);
    transition: transform .2s ease, filter .2s ease, opacity .2s ease;
}

    .marquee__item:hover {
        transform: translateY(-2px) scale(1.04);
        filter: none;
        opacity: 1;
    }

/* ===== Animation ===== */
@keyframes marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
    /* -50% = largeur d’un groupe => seamless */
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .marquee {
        padding: 2rem 0;
    }

    .marquee__track, .marquee__group {
        gap: 40px;
    }

    .marquee__item {
        height: 44px;
    }
}

@media (max-width: 640px) {
    .marquee {
        padding: 1.5rem 0;
    }

    .marquee__track, .marquee__group {
        gap: 28px;
    }

    .marquee__item {
        height: 34px;
    }
    .confirmation-wrapper {
        margin-top: 150px;
    }
}

.icon-bands {
    margin-right: 140px !important;
    margin-left: 140px !important;
    height: 480px !important;
}

/* Sous 1000px : marges réduites + hauteur plus basse */
@media (max-width: 1000px) {
    .icon-bands {
        margin-left: 40px !important;
        margin-right: 40px !important;
        height: 240px !important;
    }
}

/* Motion friendly */
@media (prefers-reduced-motion: reduce) {
    .marquee__track {
        animation-duration: calc(var(--speed,28s)*2);
    }
}

/* ===== Expertises blocks ===== */
.expertises-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem; /* plus d'espace entre les cartes */
    padding: 3rem 0; /* plus d'espace autour */
    margin: 28px;
}

@media (max-width: 1024px) {
    .expertises-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .expertises-container {
        grid-template-columns: 1fr;
    }
}

/* ===== Carte ===== */
.expertise-bloc {
    background: #fff;
    border-radius: 12px;
    padding: 2rem; /* plus d'air dans la carte */
    box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
    transition: transform .2s ease, box-shadow .2s ease;
}

    .expertise-bloc:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 18px rgba(0, 0, 0, .12);
    }

/* ===== Titre + flèche ===== */
.exp-head {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: .6rem;
    align-items: center; /* centre flèche verticalement */
    margin-bottom: .5rem;
}

.exp-arrow {
    color: #1bb3a5; /* teal */
    font-weight: 700;
    line-height: 1;
    transform: translateY(1px); /* ajustement optique */
}

.exp-title {
    margin: 0;
    font-size: 1.6rem;
    line-height: 1.25; /* gère un titre sur 2 lignes élégant */
    color: #23123a;
}

/* ===== Intro ===== */
.exp-intro {
    margin: .35rem 0 1.25rem 1.6rem; /* alignée avec les tags */
    color: #444;
}

/* ===== Tags (pills) ===== */
.exp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem; /* espace plus grand entre les tags */
    margin-left: 1.6rem;
}

.tag {
    border: 1px solid #eee;
    background: #f7f3f7;
    color: #2b1c33;
    padding: .38rem .65rem; /* plus compact */
    border-radius: 12px;
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .06em;
    white-space: nowrap;
    user-select: none;
}

/* ===========================
   Carrousel (Services)
   =========================== */
.feature-section {
    position: relative;
    padding-block: 2rem; /* réduit la hauteur perçue */
}

/* conteneur des flèches + piste */
.feature-wrap {
    position: relative;
}

/* Nav latérale (flèches) */
.feature-nav {
    position: absolute;
    inset-block: 0; /* top:0; bottom:0 */
    display: flex;
    align-items: center;
    pointer-events: none; /* ne bloque pas le drag tactile */
}

    .feature-nav > * {
        pointer-events: auto;
    }

.feature-nav--prev {
    left: -0.25rem;
}

.feature-nav--next {
    right: -0.25rem;
}

@media (min-width: 900px) {
    .feature-nav--prev {
        left: -0.75rem;
    }

    .feature-nav--next {
        right: -0.75rem;
    }
}

/* En-tête optionnel */
.feature-header {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    align-items: flex-start;
}

.feature-eyebrow {
    color: #6b7280;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 600;
}

.feature-title {
    font-weight: 700;
}

.feature-subtitle {
    max-width: 72ch;
    color: #111827;
    opacity: .9;
}

/* Piste */
.feature-carousel {
    margin-top: 1rem;
    min-height: 250px !important;
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: .5rem .25rem 1rem;
    scroll-padding-inline: .5rem;
}

    .feature-carousel:focus {
        outline: none;
    }

    /* Scrollbar discrète (sans tout cacher) */
    .feature-carousel::-webkit-scrollbar {
        height: 8px;
    }

    .feature-carousel::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,.15);
        border-radius: 999px;
    }

.feature-carousel {
    scrollbar-color: rgba(0,0,0,.15) transparent;
    scrollbar-width: thin;
}

/* Cartes */
.feature-card {
    scroll-snap-align: start;
    flex: 0 0 85%;
    max-width: 85%;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: #fff;
    border-radius: 1rem;
    padding: 1rem 1.1rem;
    box-shadow: 0 2px 14px rgba(0,0,0,.06);
    border: 1px solid rgba(0,0,0,.06);
    min-height: 152px; /* hauteur cohérente */
}

    .feature-card:focus {
        outline: 3px solid rgba(59,130,246,.45);
        outline-offset: 2px;
    }

.feature-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(17,24,39,.05);
}

.feature-content {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.feature-card-title {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.35;
    font-weight: 700;
    /* évite 3 lignes en mobile */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.feature-card-text {
    margin: 0;
    color: #111827;
    opacity: .9;
    line-height: 1.45;
    min-height: 130px !important;
    /* limite à 3 lignes en mobile */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.feature-card-text {
    white-space: normal !important; /* autorise les retours à la ligne */
    overflow: visible !important; /* pas de rognage */
    text-overflow: clip !important; /* supprime l'ellipsis */
    display: block !important; /* neutralise un éventuel -webkit-box */
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    overflow-wrap: anywhere; /* casse les longs mots/URLs si besoin */
    word-break: normal;
    hyphens: auto; /* optionnel : césure élégante */
    max-width: 100% !important;
}

/* 2) Évite le rognage en flex (sinon le navigateur peut “clipper”) */
.feature-card,
.feature-content {
    min-width: 0 !important;
}

/* 3) Ne force pas une petite largeur sur mobile */
@media (max-width: 900px) {
    .feature-card-text {
        width: auto !important; /* supprime le width:200px */
        font-size: 15px;
    }
  /*  .ResponsiveLottiePlayer {
        transform: translate(-22%, 10px);
    }*/
}
.cmd-curve{
    position:absolute;
    bottom:10px !important;
}
/* ≥ 900px : 2 cartes par “vue” */
@media (min-width: 900px) {
    .feature-card {
        flex-basis: 44%;
        max-width: 80%;
        min-height: 164px;
    }

    .feature-card-title {
        font-size: 1.35rem;
    }
}

/* ≥ 1200px : 3 cartes par “vue” */
@media (min-width: 1200px) {
    .feature-card {
        flex-basis: 31.5%;
        max-width: 31.5%;
    }
}

/* Respect du prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .feature-carousel {
        scroll-behavior: auto;
    }
}

/* À mettre dans ta feuille CSS */
.split-flex {
    display: flex;
    align-items: center;
    gap: 2rem;
    /* évite que ça colle aux bords sur petits écrans si besoin */
}

.split-media {
    flex: 1 1 48%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Contraintes souples pour Lottie */
    max-width: 800px; /* adapte si tu veux */
}

.split-copy {
    flex: 1 1 52%;
    min-width: 280px;
}

@media (max-width: 992px) {
    .split-flex {
        flex-direction: column; /* pile sur mobile/tablette */
        align-items: stretch;
    }

    .split-media, .split-copy {
        flex: 1 1 auto;
        max-width: 100%;
        padding: 2rem;
    }
}

/*Section FULLSCREEN lottiPlayer*/
/* Section full-width qui sort du container pour prendre toute la largeur de l’écran */
/* Quand la section NE contient PAS d’enfant .LottieFull */
.fullbleed-lottie:not(:has(.LottieFull)) {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

    .fullbleed-lottie:not(:has(.LottieFull)) .lottie-canvas {
        width: 100%;
        height: clamp(360px, 60vh, 920px);
        display: flex;
        align-items: center;
        justify-content: center;
    }

        /* Les enfants remplissent la zone uniquement quand il n’y a PAS de .LottieFull */
        .fullbleed-lottie:not(:has(.LottieFull)) .lottie-canvas > * {
            width: 100%;
            height: 100%;
        }

/* Réserve de l’espace pour les flèches (pas de chevauchement) */
.feature-carousel {
    /* ancien: padding: .5rem .25rem 1rem; */
    padding: .5rem 3.75rem 1rem; /* espace à gauche/droite pour les flèches */
    scroll-padding-inline: 3.75rem; /* alignement au snap en tenant compte de l’espace */
}

/* Boutons en latéral sans bloquer les interactions */
.feature-wrap {
    position: relative;
}

.feature-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.12));
    z-index: 2;
    pointer-events: none; /* évite de “couvrir” le carrousel */
}

    .feature-nav .mud-button-root,
    .feature-nav button {
        pointer-events: auto;
    }

.feature-nav--prev {
    left: .5rem;
}

.feature-nav--next {
    right: .5rem;
}

.is-hidden,
.is-hidden .mud-button-root {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) scale(.98);
}

/* Cartes un peu plus petites, responsive via variable */
.feature-carousel {
    --card-basis: 82%;
}
/* mobile */
.feature-card {
    flex: 0 0 var(--card-basis);
    max-width: var(--card-basis);
    margin: .125rem 0; /* micro marge additionnelle */
}

@media (max-width: 700px) {
    .cmd-curve {
        position: absolute;
        bottom: 100px !important;
        margin:auto;
        left:0px !important;
    }
    .feature-carousel {
        --card-basis: 40%;
        height: 400px !important;
        width: 100% !important;
    }

    .feature-card {
        height: 350px !important;
    }

    .feature-card-text {
        overflow: visible;
        font-size: 15px;
        width: 200px !important;
    }

    .feature-carousel {
        height: 500px !important;
    }
    /* avant 44% */
}

.feature-card-text {
}

@media (max-width: 700px) {
    .feature-card {
        height: auto !important;
        min-height: 250px !important;
        max-width: calc((80% - (var(--gap) * (var(--visible) - 1))) / var(--visible));
    }

    .feature-card-title {
        font-size: 18px !important;
    }

    .feature-card-text {
        overflow: visible;
        font-size: 15px;
        width: 100% !important;
    }

    .feature-carousel {
        width: 100% !important;
        padding: 0rem !important;
        height: auto !important;
    }
    /* avant 44% */
}

@media (min-width: 1200px) {
    .feature-carousel {
        --card-basis: 30%;
    }
    /* avant 32% */
}

/* Si tu veux encore plus d’air entre cartes : augmente le gap du carrousel */
.feature-carousel {
    gap: 1.25rem;
}
/* avant 1rem */

/* Ajuste la taille des icônes des flèches si tu les veux plus petites */
.feature-nav .mud-button-root .mud-svg-icon,
.feature-nav .mud-button-root svg {
    width: 28px;
    height: 28px;
}
/* ex. légèrement plus petit */

/* Le conteneur qui englobe carrousel + flèches */
.feature-wrap {
    position: relative;
    overflow: hidden; /* ✅ masque tout ce qui dépasse latéralement */
    padding: 0; /* pas de padding ajouté ici */
}

/* Rail du carrousel : on garde l’espace intérieur pour les flèches */
.feature-carousel {
    padding: .5rem 3.75rem 1rem;
    scroll-padding-inline: 3.75rem;
    gap: 1.25rem;
}

/* Boutons latéraux centrés, maintenant contenus dans .feature-wrap */
.feature-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.12));
    pointer-events: none;
}

    .feature-nav .mud-button-root,
    .feature-nav button {
        pointer-events: auto;
    }

.feature-nav--prev {
    left: .5rem;
}

.feature-nav--next {
    right: .5rem;
}

.is-hidden,
.is-hidden .mud-button-root {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) scale(.98);
}
/* Conteneur global : coupe ce qui dépasse (flèches incluses) */
.feature-wrap {
    position: relative;
    overflow: hidden; /* masque tout en dehors du cadre */
}

/* Rail du carrousel : calcule pour faire rentrer N cartes exactement */
.feature-carousel {
    --gap: 1.25rem; /* espace entre cartes */
    --visible: 3; /* nb de cartes visibles sur desktop */

    margin-top: 1.25rem;
    display: flex;
    gap: var(--gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 3.75rem; /* aligne avec le padding ci-dessous */
    -webkit-overflow-scrolling: touch;
    padding: .5rem 3.75rem 1rem; /* espace interne pour les flèches */
}

/* Chaque carte prend exactement 1/--visible de la largeur disponible (moins les gaps) */
.feature-card {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    /* >>> calcule pour 1/N carte(s) visibles sans dépassement */
    flex: 0 0 calc((100% - (var(--gap) * (var(--visible) - 1))) / var(--visible));
    max-width: calc((100% - (var(--gap) * (var(--visible) - 1))) / var(--visible));
    margin: 0; /* pas de marge latérale inutile */
}

/* Responsive : 1 carte sur mobile, 2 sur tablette, 3 sur desktop */
@media (max-width: 899.98px) {
    .feature-carousel {
        --visible: 1;
    }
}

@media (min-width: 900px) and (max-width: 1199.98px) {
    .feature-carousel {
        --visible: 2;
    }
}

@media (min-width: 1200px) {
    .feature-carousel {
        --visible: 3;
    }
}

/* Boutons latéraux à l’intérieur du wrap (donc masqués si ça dépasse) */
.feature-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.12));
    pointer-events: none; /* ne bloque pas le scroll/drag */
}

    .feature-nav .mud-button-root,
    .feature-nav button {
        pointer-events: auto;
    }

.feature-nav--prev {
    left: .5rem;
}

.feature-nav--next {
    right: .5rem;
}

.is-hidden,
.is-hidden .mud-button-root {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) scale(.98);
}

/* La colonne devient le référentiel du positionnement */
.slogan-col {
    position: relative;
    /* On réserve de la place à gauche pour le SVG (varie avec la largeur écran) */
    padding-left: clamp(80px, 9vw, 180px);
}

/* Le SVG décoratif, empilé à gauche, hors flux */
.slogan-mark {
    position: absolute;
    left: 0;
    top: 22px;
    /* Hauteur calée sur la zone du slogan (ajuste si besoin) */
    height: 87%;
    /* Garde les proportions du viewBox du SVG */
    aspect-ratio: 319.4 / 354.74;
    /* Ne capte pas la souris */
    pointer-events: none;
    /* Derrière le texte si besoin */
    z-index: 0;
    /* Optionnel : léger flou ou opacité si tu veux adoucir encore */
    /* opacity: .85;  // le SVG a déjà son opacité interne */
}

/* Le texte passe au-dessus naturellement (z-index > 0 si nécessaire) */
.footer-slogan {
    position: relative;
    z-index: 1;
}

/* Mobile : on masque l’élément et on retire l’indentation */
@media (max-width: 900px) {
    .slogan-col {
        padding-left: 0;
    }
}

/* ====== Cadre général ====== */
.antesy-footer {
    background: radial-gradient(1200px 600px at 10% -10%, rgba(255,255,255,0.06), transparent), linear-gradient(180deg, var(--mud-palette-background) 0%, var(--mud-palette-surface) 100%);
    color: var(--mud-palette-text-primary);
    padding-top: 2rem;
}

/* Légèrement plus à gauche pour le slogan */
.container-frame {
    padding: 3.25rem 2rem 2.25rem 1rem; /* top right bottom left */
}

/* ====== Grille principale ====== */
.footer-grid {
    --col-gap: clamp(1.25rem, 10vw, 8.25rem); /* adaptatif */
    display: grid;
    grid-template-columns: minmax(0, 3fr) auto minmax(0, 2fr);
    column-gap: var(--col-gap);
}

/* ====== Slogan ====== */
.footer-slogan {
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    font-size: clamp(44px, 8.2vw, 130px);
    margin: 0;
}
/* ===== Carrousel - page services ===== */

.feature-section {
    position: relative;
}

.feature-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
}

.feature-eyebrow {
    color: #6b7280;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 600;
}

.feature-title {
    font-weight: 700;
}

.feature-subtitle {
    max-width: 72ch;
    color: #111827;
    opacity: .9;
}

/* Wrap = cadre qui masque tout dépassement (cartes & flèches) */
.feature-wrap {
    position: relative;
    overflow: hidden;
}

/* Rail du carrousel : 3 cartes visibles (desktop), snap horizontal */
.feature-carousel {
    --gap: 1.25rem; /* espacement entre cartes */
    --visible: 3; /* nombre de cartes visibles desktop */

    margin-top: 1.25rem;
    display: flex;
    gap: var(--gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: .5rem 3.75rem 1rem; /* réserve pour les flèches */
    scroll-padding-inline: 3.75rem; /* aligne le snap avec la réserve */
}

    .feature-carousel:focus {
        outline: none;
    }

/* Chaque carte prend exactement 1/--visible sans dépasser */
.feature-card {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    flex: 0 0 calc((100% - (var(--gap) * (var(--visible) - 1))) / var(--visible));
    max-width: calc((100% - (var(--gap) * (var(--visible) - 1))) / var(--visible));
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: #ffffff;
    border-radius: 1rem; /* 16px */
    padding: 1.25rem 1.25rem;
    box-shadow: 0 2px 16px rgba(0,0,0,.06);
    border: 1px solid rgba(0,0,0,.06);
}

    .feature-card:focus {
        outline: 3px solid rgba(59,130,246,.45);
        outline-offset: 2px;
    }

.feature-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(17,24,39,.04);
}

.feature-card-title {
    margin: 0;
    font-size: 1.525rem;
    line-height: 1.5rem;
    font-weight: 700;
}

.feature-card-text {
    margin: .35rem 0 0;
    color: #111827;
    opacity: .9;
}

/* Flèches latérales à l’intérieur du wrap (donc masquées si ça dépasse) */
.feature-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.12));
    pointer-events: none; /* ne bloque pas le drag/scroll */
}

    .feature-nav .mud-button-root,
    .feature-nav button {
        pointer-events: auto;
    }

.feature-nav--prev {
    left: .5rem;
}

.feature-nav--next {
    right: .5rem;
}

.is-hidden,
.is-hidden .mud-button-root {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) scale(.98);
}

/* Option : taille légère des icônes des flèches */
.feature-nav .mud-button-root .mud-svg-icon,
.feature-nav .mud-button-root svg {
    width: 28px;
    height: 28px;
}

/* Responsive : 1 carte mobile, 2 tablette, 3 desktop */
@media (max-width: 899.98px) {
    .feature-carousel {
        --visible: 1;
    }
}

@media (min-width: 900px) and (max-width: 1199.98px) {
    .feature-carousel {
        --visible: 2;
    }
}

@media (min-width: 1200px) {
    .feature-carousel {
        --visible: 3;
    }
}


/* ===== Split section (Lottie + texte) ===== */

.split-flex {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding-right: 2rem;
}

.split-flex2 {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-direction: row-reverse !important;
    padding-left: 2rem;
}

.split-media {
    flex: 1 1 48%;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 800px;
}

.split-copy {
    flex: 1 1 52%;
    min-width: 280px;
    flex-wrap: wrap;
}

@media (max-width: 992px) {
    .split-flex {
        flex-direction: column;
        align-items: stretch;
    }

    .split-flex2 {
        align-items: stretch;
        flex-direction: column;
    }

    .split-media, .split-copy {
        flex: 1 1 auto;
        max-width: 100%;
        padding: 2rem;
    }
}


/* ===== Section FULLSCREEN Lottie ===== */

.fullbleed-lottie {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

    .fullbleed-lottie .lottie-canvas:not(:has(.LottieFull)) {
        width: 100%;
        height: clamp(360px, 60vh, 920px);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .fullbleed-lottie .lottie-canvas > * {
        width: 100%;
        height: 100%;
    }


/* ===== Footer ===== */

.antesy-footer {
    background: radial-gradient(1200px 600px at 10% -10%, rgba(255,255,255,0.06), transparent), linear-gradient(180deg, var(--mud-palette-background) 0%, var(--mud-palette-surface) 100%);
    color: var(--mud-palette-text-primary);
    padding-top: 2rem;
}

/* ====== Slash géant — taille calée sur la hauteur de la ligne grid ======
   On dessine une barre inclinée via ::before, haute à 100% (donc = hauteur du slogan),
   on la décale un peu vers la gauche pour équilibrer les vides. */
.giant-slash {
    position: relative;
    width: clamp(18px, 2vw, 28px);
    /* centré dans le gap : on le décale de -50% du gap */
    margin-left: calc(var(--col-gap) * -0.5);
    margin-right: calc(var(--col-gap) * -0.5);
    align-self: stretch; /* prend toute la hauteur du track (celle du slogan) */
    display: block;
    margin-top: 16px;
    margin-bottom: 17px;
}

    .giant-slash::before {
        content: "";
        position: absolute;
        inset: 0;
        background: currentColor;
        opacity: .12;
        transform: skewX(-18deg);
        border-radius: 2px;
    }

/* ====== Colonne droite ====== */
.right-col {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    margin-left: -41px;
}

/* 2 colonnes (pages / social) */
.columns-wrapper {
    margin-top: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem 2.25rem;
    margin-bottom: auto; /* pousse le CTA en bas */
}

/* Titres plus grands (et uppercase) */
.column-title {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 1.05rem; /* un cran au-dessus du h6 visuel */
    margin-bottom: .6rem;
    white-space: nowrap;
}

/* Liens strictement en colonne */
.link-list-col {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    align-items: flex-start;
}

.footer-link {
    text-decoration: none;
}

    .footer-link:hover {
        text-decoration: underline;
    }

/* Icônes sobres (monochrome) */
.icon-neutral {
    color: currentColor;
    opacity: .9;
    font-size: 1.05rem;
}

/* CTA : bord droit aligné avec les colonnes droites (desktop),
   en mobile il revient à gauche */
.cta-row {
    margin-top: 33px;
    margin-bottom: 23px;
    display: flex;
    justify-content: flex-end;
    padding-top: 1.75rem;
    width: 100%;
    padding-inline: clamp(2rem, 5vw, 4rem);
}

.cta-btn {
    padding-inline: 1.25rem;
    border-radius: 9999px;
    box-shadow: 0 6px 24px rgba(0,0,0,.14);
}

/* ====== Séparateur ====== */
.footer-separator {
    margin: 2.25rem 0 1.25rem 0;
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,.12), transparent);
}

/* ====== Ligne du bas ====== */
.bottom-area {
    display: grid;
    grid-template-columns: auto 1fr auto; /* brand | legals | year */
    align-items: center; /* vertical align identique pour tout */
    gap: .75rem;
    padding: 2rem;
    padding-top: 0rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.brand-icon {
    opacity: .9;
}

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

.legals {
    display: inline-flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    justify-self: center;
    align-items: center;
    line-height: 1.2;
}

.legal-link {
    text-decoration: none;
    white-space: nowrap;
}

    .legal-link:hover {
        text-decoration: underline;
    }

.year {
    opacity: .75;
    white-space: nowrap;
    justify-self: end;
}

@media(max-width : 1190px) {
    .footer-slogan {
        font-size: 90px !important;
    }
}


.LottieFull {
    margin-left: 0 !important;
    margin-top: 0px !important;
    width: 100% !important;
}

.ResponsiveLottiePlayer {
    width: 800px !important;
    height: 800px !important;
    margin-top: 300px !important;
}

.responviseLottieForconsole {
    margin-top: 0px !important;
    height: 400px;
    width: auto;
}

.responviseLottieForconsolesMALLER {
    margin-top: 0px !important;
    height: 250px;
    width: auto;
    margin: auto !important;
}

.margin-lottie {
    margin-top: -150px !important;
}
/* ====== Responsive ====== */
@media (max-width: 959.98px) {
    .feature-nav--prev{
        margin-top:90px !important;
    }
    .feature-nav--next {
        margin-top: 90px !important;
    }
 
    .section-grid {
        display: flex;
        flex-direction: column;
        padding: 3rem;
    }

    .WidthLargerLOttie {
        width: 180% !important;
    }

    .ResponsiveLottiePlayer {
        width: 500px !important;
        height: 200px !important;
        margin-top: 50px !important;
    }
    #scrollAnimAI {
        width: 100% !important;
        margin-top: -240px !important;
        height: 400px !important;
    }
    .margin-lottie {
        margin-top: -50px !important;
    }

    .column {
        padding: 2rem;
    }

    .footer-grid {
        grid-template-columns: 1fr; /* empile tout */
        row-gap: 1.25rem;
    }

    .footer-slogan {
        text-align: center;
    }

    /* disparaît sur mobile */
    .columns-wrapper {
        gap: 0rem;
        grid-template-columns: 2fr 1fr;
    }

    .section-content {
        margin-top: -50px !important;
        padding: 0.9rem !important;
    }

    .cta-row {
        justify-content: flex-end;
        padding-inline: clamp(2rem, 5vw, 4rem);
        margin: auto;
        padding-right: 3rem;
        margin-left: 0px !important;
    }

    .right-col {
        margin-left: 0px !important;
    }
    /* bouton à gauche en mobile */
    .container-frame {
        padding: 2.5rem 1rem 1.75rem 1rem;
    }

    .footer-slogan {
        font-size: clamp(36px, 9vw, 64px);
    }
    /* évite tout dépassement */
    .bottom-area {
        justify-items: start;
        gap: 3.5rem;
    }

    .year {
        justify-self: start;
    }
}

/* Un poil plus à gauche sur très grands écrans pour équilibrer visuellement */
@media (min-width: 1280px) {
    .container-frame {
        padding-left: .75rem;
    }
}

.slogan-col {
    margin-left: 40px;
}
/* ========== TIMELINE VERTICALE ========== */
.vt-container {
    --vt-bg: #e5e7eb;
    --vt-fill: #10b981;
    --vt-card-bg: #fff;
    --vt-card-fg: #0f172a;
    --vt-img-bg: #0b0b0b;
    position: relative;
    width: 100%;
    min-height: 70vh;
    margin: 5rem 0;
    overflow-x: hidden;
    touch-action: pan-y;
}

/* encore plus smooth */
.vt-stage {
    position: absolute;
    inset: 0;
    will-change: transform;
    transition: transform .56s cubic-bezier(.16,1,.3,1); /* easeOutQuint */
}


.vt-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

.vt-line-bg, .vt-line-fill {
    stroke-linecap: round
}

.vt-line-bg {
    stroke: var(--vt-bg);
    stroke-width: 4
}

.vt-line-fill {
    stroke: var(--vt-fill);
    stroke-width: 6;
    transition: y2 .25s ease
}

.vt-dots {
    position: absolute;
    inset: 0;
    pointer-events: none
}

.vt-dot {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: var(--vt-bg);
    transform: translate(-50%,-50%);
    transition: background .18s, box-shadow .18s, opacity .18s;
    opacity: .95
}

    .vt-dot.current {
        background: var(--vt-fill);
        box-shadow: 0 0 0 8px rgba(16,185,129,.16), 0 0 28px rgba(16,185,129,.35);
        opacity: 1
    }

.vt-cards {
    position: absolute;
    inset: 0;
    pointer-events: none
}

.vt-card {
    position: absolute;
    display: grid;
    grid-template-columns: 240px minmax(360px,1fr);
    gap: 20px;
    width: clamp(420px,46vw,820px);
    color: var(--vt-card-fg);
    background: var(--vt-card-bg);
    border-radius: 18px;
    padding: 20px 22px;
    box-shadow: 0 14px 38px rgba(2,6,23,.10), 0 1px 0 rgba(2,6,23,.05);
    opacity: 0;
    transition: opacity .16s ease;
    pointer-events: none;
    overflow: hidden;
}

    .vt-card.show {
        opacity: 1;
        pointer-events: auto
    }

    .vt-card.v-left {
        right: calc(50% + 36px)
    }

    .vt-card.v-right {
        left: calc(50% + 36px)
    }

.vt-img {
    width: 100%;
    height: 220px;
    background: var(--vt-img-bg);
    border-radius: 14px
}

.vt-meta {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.vt-subtitle {
    color: #64748b;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .04em
}

.vt-title {
    font-weight: 800;
    font-size: 1.45rem;
    line-height: 1.25
}

.vt-text {
    color: #334155;
    font-size: 1.08rem;
    line-height: 1.65
}

/* Mobile */
@media (max-width:1300px) {
    .vt-card {
        width: min(86vw,580px);
        grid-template-columns: 1fr 1fr;
        gap: 14px
    }

    .vt-stage {
        transition-duration: .64s;
    }

    .vt-card.v-left {
        right: calc(50% + 14px)
    }

    .vt-card.v-right {
        left: calc(50% + 14px)
    }

    .vt-img {
        height: 170px
    }
}

@media (max-width:820px) {
    .vt-card {
        grid-template-columns: 1fr
    }

    .vt-img {
        height: 150px
    }

    .vt-title {
        font-size: 1.25rem
    }

    .vt-text {
        font-size: 1rem
    }
}

@media (prefers-reduced-motion: reduce) {
    .vt-stage {
        transition: none;
    }
}
/* =========================
   Expertises (2 colonnes)
   ========================= */
.expertises-wrap {
    padding: 2.5rem 0;
}

.expertises-grid {
    max-width: 960px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 4rem;
    row-gap: 0.75rem;
}

.expertise-row {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    white-space: nowrap;
    padding: .9rem 1.1rem;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.08);
    transition: background-color .15s ease, box-shadow .15s ease, border-color .15s ease, transform .06s ease;
}

/* texte */
.expertise-label {
    font-size: 1.06rem;
    line-height: 1.6rem;
    color: #1a1a1a;
    font-weight: 500;
}

/* flèche */
.expertise-row .chev {
    width: 18px;
    height: 18px;
    stroke: #ff3d00;
    stroke-width: 2;
    fill: none;
    position: relative;
    top: 1px;
    transition: transform .25s ease;
}

/* hover */
.expertise-row:hover {
    background: rgba(0,0,0,.035);
    border-color: rgba(0,0,0,.12);
}

    .expertise-row:hover .chev {
        transform: translateX(4px) rotate(180deg);
    }

/* état actif (NavLink actif) */
.expertise-row.active {
    background: color-mix(in srgb, #ff3d00 12%, transparent);
    border-color: #ff3d00;
    box-shadow: 0 0 0 3px color-mix(in srgb, #ff3d00 25%, transparent);
}

/* mobile : une seule colonne */
@media (max-width: 1024px) {
    .expertises-grid {
        grid-template-columns: 1fr;
        column-gap: 0;
    }
}

/* =========================
   Boutons "assistant" choix
   ========================= */
.choice {
    --ring: color-mix(in srgb, var(--mud-palette-primary) 28%, transparent);
    --bg: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    border: 1.5px solid rgba(255,255,255,.35);
    background: transparent;
    transition: transform .06s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
    border-radius: 12px;
    padding-inline: 1.25rem;
    margin-bottom: .5rem;
}

    /* survol simple */
    .choice:hover {
        border-color: rgba(255,255,255,.6);
        transform: translateY(-1px);
    }

    /* focus clavier accessible */
    .choice:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px var(--ring);
    }

    /* état sélectionné */
    .choice.is-selected {
        border-color: var(--mud-palette-primary);
        background: var(--bg);
        box-shadow: 0 0 0 4px var(--ring);
        transform: none;
    }
/* =========================
   Divers utilitaires
   ========================= */
.tracking-wide {
    font-size: large !important;
}

/* ---- Palette / variables ---- */
:root {
    --accent: #7af8e8; /* teal Antesy */
    --accent-weak: rgba(122,248,232,.35);
    --line-off: rgba(255,255,255,.18);
    --text-dim: rgba(255,255,255,.7);
}

/* ==== Console look ===== */
.console-window.browser .console-content {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: clamp(16px, 2.2vw, 28px);
    line-height: 1.35;
    color: #aafdf0;
    text-shadow: 0 0 6px rgba(64,255,220,.45), 0 0 16px rgba(64,255,220,.25);
    display: flex;
    flex-direction: column;
    gap: .5rem;
    position: relative;
    padding: 20px;
    background: rgba(34, 67, 79, 0.55);
}

    /* Fond CRT très léger + scanlines */
    .console-window.browser .console-content::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(120% 100% at 50% 0%, rgba(0,0,0,.0), rgba(0,0,0,.2)), linear-gradient(180deg, rgba(122,248,232,.06), rgba(0,0,0,0) 40%);
        pointer-events: none;
    }

    .console-window.browser .console-content::after {
        content: "";
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(to bottom, rgba(255,255,255,.03) 0 2px, rgba(0,0,0,0) 2px 4px);
        mix-blend-mode: overlay;
        opacity: .25;
        animation: scan 8s linear infinite;
        pointer-events: none;
    }

@keyframes scan {
    from {
        background-position: 0 0
    }

    to {
        background-position: 0 100px
    }
}

/* Slogan / Status */
.cmd-headline {
    font-family: inherit;
    color: #aafdf0;
}

.cmd-status {
    margin-top: .25rem;
    font-family: inherit;
    color: #aafdf0;
}

/* Lignes */
.cmd-line {
    display: flex;
    gap: .6rem;
    align-items: baseline;
    margin: .35rem 0;
}

    .cmd-line .ps {
        opacity: .7;
    }

    .cmd-line.snap {
        scroll-snap-align: end;
    }

.cursor {
    display: inline-block;
    width: .6ch;
    text-align: center;
}

/* Mini loader "..." */
.mini-loader {
    margin-left: .6rem;
}

    .mini-loader span {
        animation: dot 1s infinite steps(1,end);
        opacity: .35;
    }

        .mini-loader span:nth-child(2) {
            animation-delay: .15s
        }

        .mini-loader span:nth-child(3) {
            animation-delay: .3s
        }

@keyframes dot {
    0%,20% {
        opacity: .15
    }

    50% {
        opacity: 1
    }

    100% {
        opacity: .15
    }
}

/* Détails (zone scrollable au centre) */
.cmd-step-details {
    max-height: 28vh;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    padding-right: .25rem;
}

/* ===== Courbe – ancien système (non aplatie) ===== */
.cmd-curve {
    width: 100%;
    max-width: 900px;
    margin-top: auto; /* pousse la courbe en bas */
    padding-top: .25rem;
    padding-bottom:70px ;
}
.mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text.mud-input-text-with-label{
    margin-top:0px !important;
}

.cmd-curve svg {
    width: 100%;
    height: auto;
    display: block; /* conserve l’aspect-ratio naturel du viewBox */
}
@media (max-width: 600px) {
    #antesyDock .label {
        white-space: normal; /* autorise le retour à la ligne */
        text-align: center; /* optionnel, pour un centrage propre */
        display: inline-block; /* garantit le wrapping */
        max-width: 120px; /* à ajuster selon le rendu */
        line-height: 1.3; /* améliore la lisibilité */
    }
}
.curve-base {
    fill: none;
    stroke: rgba(255,255,255,.18);
    stroke-width: 10;
    stroke-linecap: round;
}

.curve-progress {
    fill: none;
    stroke: var(--accent);
    stroke-width: 10;
    stroke-linecap: round;
    filter: drop-shadow(0 0 10px var(--accent-weak)) drop-shadow(0 0 24px var(--accent-weak));
    pathLength: 100;
    stroke-dasharray: 100;
    stroke-dashoffset: calc(100 - (var(--progress,0) * 100));
    transition: stroke-dashoffset .55s cubic-bezier(.22,.61,.36,1);
}

.node {
    stroke: #0d0f12;
    stroke-width: 3;
    r: 10;
    fill: rgba(255,255,255,.18);
    transition: .25s;
}

    .node.done {
        fill: var(--accent);
        filter: drop-shadow(0 0 8px var(--accent-weak));
        transform: scale(1.06);
    }

    .node.current {
        fill: #0d0f12;
        stroke: var(--accent);
        r: 12;
    }

/* Glitch fort pour le slogan */
.glitch {
    position: relative;
    display: inline-block;
    text-shadow: 0 0 6px rgba(64,255,220,.45), 0 0 18px rgba(64,255,220,.25);
    animation: glowPulse 3s ease-in-out infinite;
}

    .glitch::before, .glitch::after {
        content: attr(data-text);
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: .26;
        mix-blend-mode: screen;
    }

    .glitch::before {
        color: #00ffd0;
        transform: translate(1px,0);
        animation: gSlice 2.8s steps(18) infinite;
    }

    .glitch::after {
        color: #00a7ff;
        transform: translate(-1px,0);
        animation: gSlice 3.2s steps(20) infinite reverse;
    }

@keyframes gSlice {
    0% {
        clip-path: inset(0 0 80% 0)
    }

    10% {
        clip-path: inset(65% 0 0 0)
    }

    20% {
        clip-path: inset(0 0 60% 0)
    }

    30% {
        clip-path: inset(50% 0 0 0)
    }

    40% {
        clip-path: inset(0 0 70% 0)
    }

    60% {
        clip-path: inset(30% 0 0 0)
    }

    80% {
        clip-path: inset(0 0 40% 0)
    }

    100% {
        clip-path: inset(0 0 80% 0)
    }
}

@keyframes glowPulse {
    0%,100% {
        opacity: 1
    }

    50% {
        opacity: .96
    }
}

/* Glitch soft pour le status */
.glitch-soft {
    position: relative;
    display: inline-block;
}

    .glitch-soft::before, .glitch-soft::after {
        content: attr(data-text);
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: .16;
    }

    .glitch-soft::before {
        color: #00ffd0;
        transform: translate(.6px,0);
    }

    .glitch-soft::after {
        color: #00a7ff;
        transform: translate(-.6px,0);
    }

/* Pile base + overlay */
.content-stack {
    position: relative;
    isolation: isolate;
}

/* panneau de base */
.pane-base {
    transition: filter .25s ease, opacity .25s ease;
}

    .pane-base.is-dimmed {
        filter: blur(.6px) brightness(.96);
    }

/* panneau overlay (absolu, animé) */
.pane-overlay {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(8px) scale(.992);
    transition: opacity .26s cubic-bezier(.22,.61,.36,1), transform .26s cubic-bezier(.22,.61,.36,1);
    pointer-events: none;
}

    .pane-overlay.is-in {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    .pane-overlay.is-out {
        opacity: 0;
        transform: translateY(8px) scale(.992);
        pointer-events: none;
    }

/* ---- Fenêtre : transitions générales ---- */
.console-window {
    transition: transform .35s ease, opacity .35s ease, height .35s ease, margin .35s ease;
    transform-origin: top left;
    overflow: clip; /* évite le débordement pendant l’anim */
}
    /* Base */
    .console-window.browser {
        transition: transform .35s ease, opacity .35s ease, height .35s ease, width .35s ease, margin .35s ease;
        transform-origin: top left;
        overflow: clip;
    }

.console-content {
    transition: height .35s ease, width .35s ease, max-width .35s ease, padding .25s ease;
}

/* Final state AFTER the shrink animation finished */
.console-window.is-collapsed {
    opacity: 0; /* keep it invisible */
    visibility: hidden; /* not tabbable */
    pointer-events: none; /* no clicks */
    /* ❌ don't force height:0 / margin:0 / transform here */
}

/* While animating, force it visible so the animation can play */
.console-window.anim-to-dock,
.console-window.anim-from-dock {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    will-change: transform, opacity;
    z-index: 1200;
}

/* Optional: if you really want the old collapsed rules, guard them so they
   don't run during the animation */
.console-window.is-collapsed:not(.anim-to-dock) {
    /* old styles could go here, but better to keep them off */
}
/* 3rd button only when armed */
.dock .key--secondary {
    opacity: 0;
    transform: scale(.92);
    pointer-events: none;
    transition: opacity .18s, transform .18s;
}

.dock.is-armed .key--secondary {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.slogan-mark {
    color: #007f4f; /* => devient le fill des paths via currentColor */
    opacity: .29;
}

.console-window.is-minimized {
    height: 51px !important; /* hauteur titlebar */
}

    .console-window.is-minimized .console-content {
        display: none !important;
        height: 0 !important;
    }

/* --- État WIDE --- */
/* 1) Règle demandée: quand wide -> .console-content height: 77% !important */
.console-window.browser.is-wide .console-content {
    height: 93% !important;
}

/* ───────── Fenêtre console (inchangé, on garde tes règles) ───────── */
.console-window.browser.fade-in.is-wide {
    height: 63% !important;
    width: 92vw !important;
}

/* ===== Base couleurs (cohérent avec ton thème) ===== */
:root {
    --ink: #0c1213;
    --teal: #00f2dc;
    --teal-2: #00b295;
    --glass: white;
    --text: #eaf8f6;
}

/* ===== HERO (on complète seulement, on ne casse rien) ===== */
.about-hero {
    padding-top: clamp(48px, 8vw, 110px);
}

.about-hero-inner {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: clamp(16px,3vw,28px);
    align-items: center;
}

.about-title-xl {
    margin: 4px 0 10px 0;
}

.about-hero-intro {
    color: var(--text);
    max-width: 58ch;
    opacity: .92;
}

.about-hero-cta {
    margin-top: 1rem;
}

.btn-teal {
    display: inline-block;
    padding: .8rem 1.2rem;
    border-radius: 10px;
    color: #001e1b;
    background: var(--teal);
    text-decoration: none;
    font-weight: 700;
    box-shadow: 0 10px 30px rgba(0,242,220,.25);
}

    .btn-teal:hover {
        filter: brightness(1.05);
    }

.btn-ghost {
    display: inline-block;
    padding: .75rem 1.1rem;
    border-radius: 10px;
    text-decoration: none;
    color: #b8fff6;
    background: rgba(0,242,220,.06);
    border: 1px solid rgba(0,242,220,.3);
}

.about-hero-card {
    background: linear-gradient(180deg, rgba(0,178,149,.18), rgba(0,178,149,.06));
    border: 1px solid rgba(0,242,220,.18);
    border-radius: 16px;
    padding: 18px 18px;
    box-shadow: 0 18px 40px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
    color: #dff;
}

.ah-line {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem 0;
}

    .ah-line .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--teal);
        box-shadow: 0 0 10px var(--teal);
        display: inline-block;
    }

/* ===== Sections génériques ===== */
.about-section {
    padding: clamp(28px,5vw,64px) 0;
}

.about-h2 {
    color: #b8fff6;
    font-weight: 300 !important;
    text-shadow: 0 0 10px rgba(0,242,220,.18);
    margin-bottom: clamp(14px,2.8vw,20px);
}

/* ===== ADN : grilles “glass” ===== */
.about-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: clamp(12px,2vw,18px);
}

.about-card {
    background: var(--glass);
    border: 1px solid rgba(0,242,220,.18);
    border-radius: 16px;
    padding: clamp(16px,2.8vw,22px);
    color: var(--text);
    box-shadow: 0 14px 36px rgba(0,0,0,.28);
    transition: transform .18s ease, box-shadow .25s ease, border-color .2s ease;
}

    .about-card:hover {
        transform: translateY(-3px);
        border-color: rgba(0,242,220,.35);
        box-shadow: 0 18px 44px rgba(0,0,0,.34), 0 0 20px rgba(0,242,220,.12);
    }

    .about-card h3 {
        margin: 0 0 .35rem 0;
        color: black;
        font-weight: 700;
    }

    .about-card p {
        margin: 0;
        opacity: .9;
        color: black;
        line-height: 1.6;
    }

/* ===== Parcours : rail fixe à gauche, cartes à droite (statique) ===== */
.rail-grid {
    /* 2 colonnes : rail étroit + contenu fluide */
    display: grid;
    grid-template-columns: 56px minmax(0,1fr);
    row-gap: 18px;
    column-gap: 16px;
    position: relative;
    padding-left: 0; /* pas besoin d’offset */
}

    /* Ligne verticale (une seule, sur toute la hauteur) */
    .rail-grid::before {
        content: "";
        position: absolute;
        left: 28px; /* centre du rail (56px / 2) */
        top: 0;
        bottom: 0;
        width: 3px;
        background: linear-gradient(180deg, rgba(0,242,220,.35), rgba(0,242,220,.05));
    }

/* Point pour chaque ligne (1er col) */
.rail-dot {
    position: relative;
    width: 56px;
    height: 100%;
}

    .rail-dot::before {
        content: "";
        position: absolute;
        left: 28px; /* sur la ligne */
        top: 14px; /* à peu près au début du bloc de droite */
        transform: translate(-50%, -50%);
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: var(--teal);
        box-shadow: 0 0 12px rgba(0,242,220,.55);
    }

/* Carte à droite (2e col) */
.rail-card {
    background: rgba(6,20,24,.6);
    border: 1px solid rgba(0,242,220,.18);
    border-radius: 14px;
    padding: 14px 16px;
    color: #dff;
    box-shadow: 0 14px 36px rgba(0,0,0,.24);
}



/* ===== Pills & Tech ===== */
.pill-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    padding-bottom: 2rem;
    padding-left:1rem;
}

.pill {
    padding: .55rem .9rem;
    border-radius: 999px;
    border: 1px solid rgba(0,242,220,.24);
    font-size: .95rem;
    box-shadow: 0 6px 20px rgba(0,0,0,.20);
}

.tech-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.tech {
    padding: .45rem .7rem;
    border-radius: 8px;
    background: rgba(0,242,220,.08);
    border: 1px solid rgba(0,242,220,.18);
    color: #cffff9;
    font-size: .9rem;
}

/* ===== CTA ===== */
.about-cta {
    text-align: center;
    margin: clamp(6px,3vw,18px) auto clamp(28px,6vw,50px) auto;
    background: linear-gradient(180deg, rgba(0,178,149,.18), rgba(0,178,149,.06));
    border: 1px solid rgba(0,242,220,.18);
    border-radius: 18px;
    padding: clamp(18px,3.6vw,28px);
    box-shadow: 0 18px 40px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.05);
}

.about-cta-title {
    color: #b8fff6;
    text-shadow: 0 0 10px rgba(0,242,220,.22);
    margin: 0;
}

.about-cta-text {
    color: #e9fffb;
    opacity: .92;
    margin: .35rem 0 1rem 0;
}

.about-cta-actions {
    display: flex;
    gap: .8rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ===== Responsive ===== */
@media (max-width: 1100px) {
    .about-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 900px) {
    .about-hero-inner {
        grid-template-columns: 1fr;
    }
  
}

@media (max-width: 720px) {
    .about-grid {
        grid-template-columns: 1fr;
    }

    .rail-grid {
        grid-template-columns: 48px minmax(0,1fr);
    }

        .rail-grid::before {
            left: 24px;
        }

    .rail-dot {
        width: 48px;
    }

        .rail-dot::before {
            left: 24px;
            width: 12px;
            height: 12px;
        }
}

/* ===== CONTEXTE PAGE ===== */
.page-about {
    --glass: rgba(10,22,22,.42);
    --mint: #00f2dc;
    --text: #EAF8F6;
    color: var(--text);
}

    .page-about .about-kicker .about-overline {
        color: #8adad0 !important
    }

    .page-about .about-kicker .about-h3 {
        color: #b8fff6
    }

    .page-about .about-kicker .about-kicker-sub {
        color: #e9fffb !important;
        opacity: .9 !important
    }

    .page-about .about-section {
        padding: clamp(26px,5vw,64px) 0
    }

    .page-about .about-section-title {
        color: #b8fff6;
        font-weight: 300 !important;
        margin: 0 0 clamp(14px,2.2vw,24px) 0;
        text-shadow: 0 0 10px rgba(0,242,220,.2)
    }

/* ===== PATH + BULLES ===== */
.about-path {
    padding: clamp(18px,4vw,40px) 0;
    position: relative;
}

.tl {
    position: relative;
}

.tl-svg {
    width: 100%;
    height: 340px;
    display: block;
}

.tl-base {
    fill: none;
    stroke: rgba(0,242,220,.18);
    stroke-width: 5;
    stroke-linecap: round;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
}

.tl-progress {
    fill: none;
    stroke: var(--mint);
    stroke-width: 5;
    stroke-linecap: round;
    filter: drop-shadow(0 0 10px rgba(0,242,220,.55));
    stroke-dasharray: 0 1; /* sera set par JS (total length) */
    stroke-dashoffset: 0;
}

/* bulles */
.tl-bubbles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.bubble {
    position: absolute;
    width: min(360px, 44vw);
    background: linear-gradient(180deg, rgba(0,178,149,.18), rgba(0,178,149,.06));
    border: 1px solid rgba(0,242,220,.18);
    border-radius: 14px;
    padding: .9rem 1.1rem;
    pointer-events: auto;
    box-shadow: 0 16px 36px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.05);
    transform: translate(-50%,-50%) translateY(14px);
    opacity: 0;
    transition: transform .35s ease, opacity .35s ease;
}

    .bubble h4 {
        margin: 0 0 .25rem 0;
        color: #dbfffb;
        font-weight: 600;
    }

    .bubble p {
        margin: 0;
        opacity: .92;
        line-height: 1.55;
    }

.bubble--left {
    text-align: left
}

.bubble--right {
    text-align: left
}

.bubble.is-visible {
    opacity: 1;
    transform: translate(-50%,-50%)
}

/* ===== ADN (cartes) ===== */
.about-cards {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: clamp(12px,2vw,18px)
}

@media (max-width: 900px) {
    .about-cards {
        grid-template-columns: 1fr
    }
}

.about-card {
    background: var(--glass);
    border: 1px solid rgba(0,242,220,.16);
    border-radius: 16px;
    padding: clamp(16px,2.6vw,22px);
    box-shadow: 0 14px 36px rgba(0,0,0,.28);
    transition: transform .2s,box-shadow .3s,border-color .2s
}

    .about-card:hover {
        transform: translateY(-3px);
        border-color: teal;
        box-shadow: 0 18px 44px rgba(0,0,0,.36),0 0 22px rgba(0,242,220,.12)
    }

    .about-card h4 {
        margin: 0 0 .35rem 0;
        font-weight: 600;
        color: black !important;
    }

    .about-card p {
        margin: 0;
        opacity: .86
    }

.mud-appbar.desktop-only.at-top {
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
/* ===== Pills ===== */
.about-pill-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem
}

.about-pill {
    padding: .55rem .9rem;
    border-radius: 999px;
    background: rgba(0,242,220,.10);
    border: 1px solid rgba(0,242,220,.24);
    color: #d4fffb;
    box-shadow: 0 6px 20px rgba(0,0,0,.25)
}

/* ===== CTA ===== */
.about-cta {
    margin: clamp(14px,3vw,28px) auto clamp(32px,6vw,64px) auto;
    text-align: center;
    background: linear-gradient(180deg, rgba(0,178,149,.18), rgba(0,178,149,.06));
    border: 1px solid rgba(0,242,220,.18);
    border-radius: 18px;
    padding: clamp(18px,3.6vw,30px);
    box-shadow: 0 18px 40px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.05)
}

.about-cta-title {
    color: #b8fff6;
    text-shadow: 0 0 10px rgba(0,242,220,.22)
}

.about-cta-text {
    opacity: .9;
    margin: .35rem 0 1rem 0
}

.about-cta-actions {
    display: flex;
    gap: .8rem;
    justify-content: center;
    flex-wrap: wrap
}

/* ===== Boutons (cohérents avec ton thème) ===== */
.btn-teal {
    display: inline-block;
    padding: .85rem 1.2rem;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(0,178,149,.32), rgba(0,178,149,.12));
    border: 1px solid rgba(0,242,220,.35);
    color: #eafffb;
    text-decoration: none;
    box-shadow: 0 10px 28px rgba(0,0,0,.32),0 0 16px rgba(0,242,220,.18);
    transition: transform .15s ease, box-shadow .25s ease, border-color .2s;
}

    .btn-teal:hover {
        transform: translateY(-2px);
        border-color: rgba(0,242,220,.6);
        box-shadow: 0 16px 36px rgba(0,0,0,.38),0 0 22px rgba(0,242,220,.28)
    }

.btn-ghost {
    display: inline-block;
    padding: .85rem 1.1rem;
    border-radius: 12px;
    border: 1px solid rgba(0,242,220,.28);
    color: #cffff9;
    text-decoration: none;
    background: transparent;
    backdrop-filter: saturate(120%) blur(2px);
}

    .btn-ghost:hover {
        border-color: rgba(0,242,220,.5)
    }

/* =========================
   RAIL + CARTES (progress + reveal)
   ========================= */

/* conteneur semantic pour pouvoir cibler au JS */
.rail-section {
    --rail-width: 3px;
    --rail-x: 28px; /* centre du rail (56/2) */
    --rail-grey: rgba(0,242,220,.16);
    --rail-teal: #00f2dc;
    --rail-progress: 0%; /* sera mis à jour par JS */
    position: relative;
}

/* grille : 56px pour la colonne du rail/points + contenu */
.rail-grid {
    display: grid;
    grid-template-columns: 56px minmax(0,1fr);
    column-gap: 16px;
    row-gap: 18px;
    position: relative;
    padding-bottom: 2rem;
}

/* la ligne vivante (au lieu d'un ::before non contrôlable) */
/* rail line: now uses --rail-top / --rail-height so it never overlaps the title */
.rail-line {
    position: absolute;
    top: var(--rail-top, 0px);
    height: var(--rail-height, 100%);
    left: var(--rail-x);
    width: var(--rail-width);
    transform: translateX(-50%);
    background: linear-gradient( to bottom, var(--rail-teal) 0, var(--rail-teal) var(--rail-progress, 0%), var(--rail-grey) var(--rail-progress, 0%), var(--rail-grey) 100% );
    border-radius: 999px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.12) inset, 0 0 12px rgba(0,242,220,.10);
    pointer-events: none;
    z-index: 0; /* stays behind content */
}

/* keep the title stacked above just in case */
.rail-section h2, .rail-section .MudStack {
    position: relative;
    z-index: 1;
}


/* points : gris par défaut, teal + glow quand “actifs” */
.rail-dot {
    position: relative;
    width: 56px;
    min-height: 48px; /* assure une hauteur minimale par rangée */
}

    .rail-dot::before {
        content: "";
        position: absolute;
        left: var(--rail-x);
        top: 16px;
        transform: translate(-50%, -50%);
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: var(--rail-grey);
        box-shadow: 0 0 0 1px rgba(0,0,0,.18) inset;
        transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease;
    }

    .rail-dot.is-active::before {
        background: var(--rail-teal);
        box-shadow: 0 0 12px rgba(0,242,220,.55), 0 0 0 1px rgba(0,242,220,.28) inset;
        transform: translate(-50%, -50%) scale(1.05);
    }

/* cartes à droite */
.rail-card {
    background: white;
    border: 1px solid rgba(0,242,220,.18);
    border-radius: 14px;
    padding: 16px 18px;
    color: #dff;
    box-shadow: 0 14px 36px rgba(0,0,0,.24);
    /* état initial (avant reveal) */
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity .45s ease, transform .45s ease, border-color .2s ease, box-shadow .25s ease;
}

    .rail-card.revealed {
        opacity: 1;
        transform: none;
    }

    .rail-card:hover {
        border-color: rgba(0,242,220,.35);
        box-shadow: 0 18px 44px rgba(0,0,0,.34), 0 0 20px rgba(0,242,220,.12);
    }

.rc-title {
    color: black;
    margin: 0 0 6px 0;
    font-weight: 700;
}

.rc-text {
    color: black;
    opacity: .93;
    margin: 0;
    line-height: 1.6;
}

/* responsive */
@media (max-width:720px) {
    .rail-grid {
        grid-template-columns: 48px minmax(0,1fr);
    }

    .rail-section {
        --rail-x: 24px;
    }

    .rail-dot::before {
        width: 12px;
        height: 12px;
    }
}

/*Page error 404*/
 .error-page {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        height: 100vh;
        background: radial-gradient(circle at center, #111 0%, #000 100%);
        color: #fff;
        font-family: 'Inter', sans-serif;
        overflow: hidden;
    }

    .error-content h1 {
        font-size: 10rem;
        font-weight: 800;
        margin: 0;
        background: linear-gradient(90deg, #00ffff, #ff00ff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: glitch 1.5s infinite;
    }

    .error-content h2 {
        font-size: 2rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

    .error-content p {
        margin-bottom: 2rem;
        opacity: 0.8;
    }

    .btn-home {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background-color: #00ffff;
        color: #000;
        text-decoration: none;
        font-weight: 600;
        padding: 0.8rem 1.6rem;
        border-radius: 50px;
        transition: background 0.3s, transform 0.3s;
    }

        .btn-home:hover {
            background-color: #00bfff;
            transform: scale(1.05);
        }

    @keyframes glitch {
        0%

    {
        text-shadow: 0.05em 0 red, -0.05em 0 cyan;
    }

    25% {
        text-shadow: -0.05em 0 red, 0.05em 0 cyan;
    }

    50% {
        text-shadow: 0.05em 0.03em red, -0.05em -0.03em cyan;
    }

    75% {
        text-shadow: -0.05em 0.02em red, 0.05em -0.02em cyan;
    }

    100% {
        text-shadow: 0.05em 0 red, -0.05em 0 cyan;
    }

    }

/*Page error 404 FIN*/
.reconnect-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    color: white;
    font-family: 'Inter', sans-serif;
    backdrop-filter: blur(8px);
    transition: opacity 0.3s ease;
}

.reconnect-loader .spinner {
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top: 4px solid #00fff0;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
    margin-bottom: 12px;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
/* ---- Scope : uniquement le form overlay ---- */
.antesy-contact-wizard {
    position: relative;
    z-index: 5;
    pointer-events: auto;
    backdrop-filter: none;
}

    .antesy-contact-wizard * {
        pointer-events: auto;
    }

    /* ---- Titre plus haut, impactant ---- */
    .antesy-contact-wizard .wizard-title {
        margin-top: 2px !important;
        margin-bottom: 8px !important;
        text-transform: uppercase;
        letter-spacing: .08em;
        font-weight: 600;
        font-size: clamp(18px,2.1vw,24px);
        color: #eaffff;
    }

    /* ---- Compact + suppression padding MudGrid localement ---- */
    .antesy-contact-wizard .no-pad-grid {
        padding: 0 !important;
    }

    .antesy-contact-wizard .mud-grid {
        max-width: 980px;
        margin: 0 auto;
        padding-bottom: 72px;
    }
    /* espace pour la barre sticky */
    .antesy-contact-wizard .mud-grid-spacing-xs-6 > .mud-grid-item {
        padding-left: 0 !important;
        padding-top: 0 !important;
    }

    .antesy-contact-wizard .mud-item {
        padding-left: .35rem !important;
        padding-right: .35rem !important;
    }

    /* ---- Teal clair (presque blanc) sur TOUS les inputs (outlined + dense) ---- */
    .antesy-contact-wizard
    .mud-input-root.mud-input-outlined.mud-input-root-margin-dense .mud-input-input,
    .antesy-contact-wizard
    .mud-input-root.mud-input-outlined.mud-input-root-margin-dense .mud-select-input,
    .antesy-contact-wizard .mud-input-label,
    .antesy-contact-wizard .mud-typography,
    .antesy-contact-wizard .mud-checkbox .mud-button-label,
    .antesy-contact-wizard .mud-button {
        color: #e8ffff !important; /* teal very light */
    }

    .antesy-contact-wizard .mud-input-root input::placeholder,
    .antesy-contact-wizard textarea::placeholder {
        color: rgba(232,255,255,.70) !important;
    }

    .antesy-contact-wizard .mud-input-root .mud-input-input {
        caret-color: #3cf2f2;
    }

    /* Bordures / focus lisibles */
    .antesy-contact-wizard .mud-input-outlined .mud-input-outlined-border {
        border-color: rgba(232,255,255,.45) !important;
    }

    .antesy-contact-wizard .mud-input-outlined.mud-input-focused .mud-input-outlined-border {
        border-color: #3cf2f2 !important;
        box-shadow: 0 0 0 2px rgba(60,242,242,.18);
    }

    /* Menu des selects en sombre lisible */
    .antesy-contact-wizard .mud-popover .mud-list {
        background: rgba(0,0,0,.60);
        color: #e8ffff;
    }

    /* ---- Boutons : largeur auto, pas énormes. ---- */
    .antesy-contact-wizard .mud-button {
        min-width: auto;
        letter-spacing: .02em;
    }

    /* ---- Barre d’actions STICKY en bas ---- */
    .antesy-contact-wizard .wizard-actions {
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
        padding: 10px 12px;
        margin-top: 6px;
        z-index: 6;
        backdrop-filter: blur(2px);
    }

    /* Checkboxes couleur teal */
    .antesy-contact-wizard .mud-checkbox input:checked + .mud-button-root {
        color: #3cf2f2 !important;
    }

/* ---- Mobile tweaks ---- */
@media (max-width:599.98px) {
    .antesy-contact-wizard .mud-grid {
        padding-bottom: 88px;
    }

    .antesy-contact-wizard .mud-button {
        width: 100%;
    }
}
/* Texte saisi dans TextField */
.antesy-contact-wizard .mud-input-root .mud-input-input {
    color: #E8FFFF !important; /* teal très clair */
    caret-color: #3CF2F2; /* curseur */
}

/* Libellé (label) et placeholders */
.antesy-contact-wizard .mud-input-label {
    color: #E8FFFF !important;
}

.antesy-contact-wizard input::placeholder,
.antesy-contact-wizard textarea::placeholder {
    color: rgba(232,255,255,.7) !important;
}

/* Texte affiché par MudSelect (ton <div … mud-select-input>) */
.antesy-contact-wizard .mud-input-root .mud-select-input,
.antesy-contact-wizard .mud-input-root.mud-select-input {
    color: #E8FFFF !important;
}

/* Bordures outlined (repos / hover / focus) */
.antesy-contact-wizard .mud-input-outlined .mud-input-outlined-border {
    border-color: rgba(232,255,255,.45) !important;
}

.antesy-contact-wizard .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: rgba(232,255,255,.6) !important;
}

.antesy-contact-wizard .mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: #3CF2F2 !important;
    box-shadow: 0 0 0 2px rgba(60,242,242,.18);
}

/* Menu déroulant du Select */
.antesy-contact-wizard .mud-popover .mud-list {
    background: rgba(0,0,0,.6);
    color: #E8FFFF;
}

.antesy-contact-wizard .mud-popover .mud-list-item:hover {
    background: rgba(60,242,242,.15);
}
/* ---- Barre d’actions fixée en bas, scope au wizard ---- */
.antesy-contact-wizard .fixed-bottom-actions {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 14px;
    width: min(880px, calc(100% - 32px));
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
    padding: .6rem .8rem;
    z-index: 9999; /* devant le contenu de l’overlay */
    pointer-events: auto;
    color:white !important;
}

/* Évite que la barre ne recouvre les champs du bas */
.antesy-contact-wizard .form-container {
    padding-bottom: 100px !important;
}
button.mud-button-root.mud-button.mud-button-outlined.mud-button-outlined-secondary.mud-button-outlined-size-medium.mud-ripple.text-white {
    color: white !important;
}
mud-button-root mud-button mud-button-filled mud-button-filled-primary mud-button-filled-size-medium mud-ripple text-white > span{
    color : white !important;
}
/* Sur mobile: boutons plein largeur, empilés */
@media (max-width: 600px) {
    .antesy-contact-wizard .fixed-bottom-actions {
        width: calc(100% - 20px);
        bottom: 10px;
        gap: .5rem;
        padding: .5rem .6rem;
    }

        .antesy-contact-wizard .fixed-bottom-actions .mud-button-root {
            flex: 1 1 auto; /* full width */
        }
    .console-window.browser.fade-in.is-wide {
        height: 68% !important;
    }
}

#select21xesrli .mud-select {
    margin-top: 40% !important;
}
/* Neutralise tout “tick” ajouté par des styles globaux */
.antesy-contact-wizard .confirmation-wrapper .success-circle::before,
.antesy-contact-wizard .confirmation-wrapper .success-circle::after,
.antesy-contact-wizard .confirmation-wrapper .checkmark::before,
.antesy-contact-wizard .confirmation-wrapper .checkmark::after {
    content: none !important;
}

/* Styles propres au tick du cercle vert */
.antesy-contact-wizard .confirmation-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 52vh;
    gap: 16px;
}

.antesy-contact-wizard .success-circle {
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: 999px;
    background: #19B39C;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(25,179,156,.35);
}

.antesy-contact-wizard .confirm-check {
    color: #fff;
    font-size: 40px;
    line-height: 1;
    margin: 0;
}
.color-white{
    color:white !important;
}

.confirmation-wrapper {
    margin-top: -15px !important;
}
.InputMargin {
    margin-top: 50px !important;
}

.mud-input-label mud-input-label-animated mud-input-label-outlined mud-input-label-margin-dense mud-input-label-inputcontrol{
    color :white !important;
}
.menu-title-text{
    font-size:22px !important;
}
/* Scope to this overlay only */
.antesy-contact-wizard input.mud-input-root,
.antesy-contact-wizard input.mud-input-input,
.antesy-contact-wizard .mud-input-root input {
    color: #EAFDFB !important; /* near-white teal */
    caret-color: #EAFDFB !important;
}

/* placeholder too (optional) */
.antesy-contact-wizard ::placeholder {
    color: rgba(234,253,251,.75) !important;
}

/* Chrome autofill keeps same color */
.antesy-contact-wizard input:-webkit-autofill {
    -webkit-text-fill-color: #EAFDFB !important;
}
textarea#mudinputxe1j86ub {
color:white !important;
}

/* RESPONSIVE */
@media (max-width: 1450px) {

    .hero-over-babylon{
        margin-top:200px !important;
    }
}
@media (max-width: 900px) {

    .hero-over-babylon {
        margin-top: 0px !important;
    }
}
#featureNextBtn {
    background-color: skyblue;
}
#featurePrevBtn {
    background-color: skyblue;
}