.container {
    width: 100%;
    max-width: 100%;
    height: max-content;
    max-width: 100%;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center;
    margin-bottom: 30px;
    background-color: white;
    border: 1px solid #e5e7eb;
    padding: 15px;
    border-radius: 18px;
    gap: 20px;
}

/* Columns */
.columns {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 600px;
}

.column {
    flex: 1;
    border-radius: 1rem;
    padding: 15px;
    padding-top: 10px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.columns-learn {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    margin: 0px;
    background-color: #bdcee159;
    border-radius: 20px;
    height: stretch;
    padding-left: 5px;
    transition: background-color 0.2s ease-in-out;
}

.columns-learn > .learn-more-icon {
    margin: 20px 20px 0px 18px;
    width: 40px;
    height: 40px;
    stroke: #848d97;
}
.columns-learn .head-learn {
    font-size: 1.2rem;
    font-weight: normal;
    margin: 5px 20px;
    color: #757d85;
}

.columns-learn h3 {
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0px 20px 10px 20px;
    color: #636363df;
}
.columns-learn .learn-more-caption {
    font-size: 0.9rem;
    font-style: italic;
    margin: auto 20px 20px 20px;
    color: #6b7280;
}

/* Streaming → ton bleu principal */
.column-streaming {
    background: rgba(63, 81, 181, 0.15);
    border: 1px solid rgba(63, 81, 181, 0.2);
    width: 605px;
}

/* Instant → un vert doux qui reste dans ton univers */
.column-instant {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.2);
    width: 605px;
}

.column-title {
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 10px;
    align-self: center;
}

.column-streaming .column-title {
    color: var(--blue);
    /* #3f51b5 */
}

.column-instant .column-title {
    color: #16a34a;
    /* vert lisible sur fond clair */
}

/* Text Blocks */
.column-streaming .text-block {
    background: rgba(63, 81, 181, 0.300);
    border: 1px solid rgba(63, 81, 181, 0.35);
    width: stretch;    
}

.column-instant .text-block {
    background: rgba(22, 163, 74, 0.30);
    border: 1px solid rgba(22, 163, 74, 0.35);
    width: stretch;
}

.text-block {
    border-radius: 8px;
    width: 90px;
    height: 30px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Delay badge → orange reste lisible sur fond clair */
.delay-badge {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90px !important;
    height: 30px !important;
    font-family: monospace;
    font-size: 0.85rem;
    color: #ea580c;
    /* orange foncé lisible */
    background: rgba(234, 88, 12, 0.15);
    padding: 0px 15px;
    border-radius: 8px;
}

/* Blocks send/receive → fond neutre clair */
.blocks-send {
    background: rgba(63, 81, 181, 0.2);
    padding: 5px 50px 5px 5px;
    overflow: hidden;
    display: flex;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    width: 100%;
}

.blocks-send .text-block {
    
}

.blocks-receive {
    background: rgba(63, 81, 181, 0.20);
    border-radius: 0px;
    padding: 5px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    width: 100%;
}

.column-streaming .blocks-send {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    border-radius: 0px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    width: 100%;
    color: #303e8b;
}
.column-streaming .blocks-receive .text-block {
    background-color: #3f51b5;
    color: white;
}
.column-instant .blocks-receive .text-block {
    background-color: #16a34a;
    color: white;
}

body > section:nth-child(6) > section:nth-child(2) > div.container > div.columns > div.column.column-streaming > div.blocks-receive > i {
    margin-right: 15px;
}
.column-instant .blocks-send {
    background: rgba(22, 163, 74, 0.20);
    padding-right: 50%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    border-radius: 0px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    width: 100%;
    color: #0f6d31;
}

.column-instant .blocks-receive {
    background: rgba(22, 163, 74, 0.20);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 5px;
    gap: 5px;
    border-radius: 0px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    width: 100%;
}

/* Icône éclair → garde le jaune mais plus discret sur fond clair */
.blocks-receive i {
    margin: 0 5px;
    color: #ca8a04;
    /* jaune foncé lisible */
    animation: pulse 2s ease-in-out infinite;
    filter: drop-shadow(0 0 6px rgba(202, 138, 4, 0.4));
}

.column-instant .blocks-send div {
    padding: 0 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.column-instant .blocks-receive .text-block {
    width: stretch !important;
    display: flex;
    justify-content: center !important;
    align-items: center !important;
    font-size: 0.9rem;
}

.column-instant .blocks-receive .delay-badge {
    font-size: 0.9rem;
    margin-right: 0;
    width: 50% !important;
    min-width: 50% !important;
}

.delay-badge {
    background: repeating-linear-gradient(
        -45deg,
        rgba(234, 88, 12, 0.15),
        rgba(234, 88, 12, 0.15) 2px,
        transparent 4px,
        transparent 10px
    );
    color: #ea580c;
    border: 1px solid rgba(234, 88, 12, 0.3);
    padding: 2px 5px;
    font-size: 0.75rem;
}

.column-instant .blocks-receive i {
    margin: 0 10px;
}

/* Spark */
.spark {
    position: absolute;
    top: 50%;
    left: 70%;
    transform: translate(-50%, -50%);
    color: #ca8a04;
    font-size: 1rem;
    animation: pulse 2s ease-in-out infinite;
    filter: drop-shadow(0 0 6px rgba(202, 138, 4, 0.5));
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Caption */
.caption {
    color: var(--muted);
    /* #6b7280 */
    font-size: 1rem;
    font-style: italic;
    margin-top: 5px;
    align-self: center;
}

@media (max-width: 1260px) {

    /* 1. Le container ne doit plus contraindre la largeur */
    .container {
        width: 100%;
        max-width: 100%;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center;
        overflow: visible;
    }

    /* 2. C'est .columns qui gère le scroll horizontal */
    .columns {
        width: 100%;
        overflow-x: scroll;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 0 ;
    }

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

    /* 3. Chaque colonne = une "page" */
    .column {
        width: 100% !important;
        max-height: none !important;
        height: auto !important;
        scroll-snap-align: start;
        flex-shrink: 0;
    }

    /* 4. Les parents de .container ne doivent pas bloquer l'overflow */
    .features-pro {
        overflow: visible;
    }

    .columns-wrapper {
        position: relative;
    }
}