* {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
     }

     ::-webkit-scrollbar {
         display: none;
     }

     html {
         scrollbar-width: none;
     }

     body {
         font-family: 'Geist', sans-serif;
     }

     section {
         /* background-color: hsl(248, 81%, 13%); */
         position: relative;
         width: 100%;
         min-height: 100vh;
         overflow: hidden;
         padding: 0;

     }

     .container {
         /* border-top: 2px solid var(--line); */
         background-color: rgba(19, 25, 49);
         position: relative;
         width: 100%;
         min-height: 100vh;
         padding: 4vw;
         /* padding-top: clamp(2rem, 8vw, 4vw); */
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         gap: 1.5rem;
         transform-origin: bottom left;
         will-change: transform;
     }

     .container-light {
         color: rgba(19, 25, 49);
         background-color: rgba(247, 247, 239);
     }

     .container-light p,
     .container-light li {
         color: rgba(19, 25, 49);
     }

     /* .container-light .cr-word-text {
         color: rgba(247, 247, 239);
     } */

     .container-light .split-panel .panel-note p {
         color: rgba(247, 247, 239);
     }

     .container-light .split-content .eyebrow {
         color: rgba(19, 25, 49);

     }

     .container-light .cta span {
         background-color: rgba(19, 25, 49);
         /* border: 1px solid white; */
     }

     .container-light .cta-text-box {
         border: 1px solid white;
     }

     .container-light .cta-arrow-box {
         border: 1px solid rgba(19, 25, 49);

     }

     .container-light .cta-grid {
        display: none;
         background-image: linear-gradient(rgba(19, 25, 49) 1px, transparent 1px), linear-gradient(90deg, var(--mute) 1px, transparent 1px);
     }
     
     .hero-video{
        height: fit-content;
     }
@media (max-width:520px) {

    video{
        /* width: 320px; */
        height: 400px;
        background-size: cover;
     }
     .hero-video{
        height: fit-content;
     }
 }
 video{
        /* width: 320px; */
        height: 400px;
        /* filter: blur(5px);
        transition: filter .5s ease-out; */
     }
     /* video[readyState]{
        filter: blur(0);
     } */
     .videos{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
     }

     
     /* Le conteneur doit être en position relative pour contenir l'indicateur */
.hero-testi-card-media {
    position: relative;
    cursor: pointer; /* Indique que la vidéo est cliquable */
    overflow: hidden;
    border-radius: 16px; /* Optionnel, selon ton design */
}

/* L'indicateur au centre */
.video-state-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4); /* Fond sombre semi-transparent */
    backdrop-filter: blur(8px); /* Effet de flou d'arrière-plan (Glassmorphism) */
    color: #ffffff;
    pointer-events: none; /* Permet au clic de traverser l'indicateur pour atteindre la vidéo */
    opacity: 0; /* Caché par défaut */
    z-index: 2;
}

/* Gestion de l'affichage des icônes */
.video-state-indicator .icon-play {
    display: none;
    margin-left: 4px; /* Correction optique pour l'icône play */
}
.video-state-indicator .icon-pause {
    display: block;
}

/* Petit effet au survol de la vidéo pour inciter au clic */
.hero-testi-card-media:hover .hero-video {
    filter: brightness(0.9);
    transition: filter 0.3s ease;
}