/** PRESENTATION **/
main .presentation {
    display: flex;
    justify-content: start;
    gap: 40px;
    max-width: 1400px;
    margin-inline: auto;
    font-family: 'Supermolot Neue Trial Bold';
}

main .presentation .comparaison {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

main .presentation .comparaison .texte {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

main .presentation .comparaison .texte h2 {
    font-size: clamp(1.8rem, 3.5vw + .2rem, 2.5rem);
    color: #5F36F5;
}

main .presentation .comparaison .texte p {
    font-size: clamp(0.9rem, 1.5vw + .2rem, 1rem);
    color: #767676;
}

main .presentation .comparaison .before-after {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 15px;
    background-image: linear-gradient(to right bottom, #190d47, #29176f, #3a219a, #4c2bc6, #5f36f5);
    color: white;
    box-shadow: inset -50px -20px 100px 0 #6B4ED6;
    border-radius: 25px;
    padding: 25px;
    margin-bottom: 20px;
}

main .presentation .comparaison .before-after .before {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 20px;
}

main .presentation .comparaison .before-after .before .preview-before {
    position: relative;
    height: 170px; width: 312px;
    background-color: black;
    border-radius: 10px;
    overflow: hidden;
}

main .presentation .comparaison .before-after .before .preview-before p {
    position: absolute;
    top: 65%; left: 5%;
    font-family: 'Supermolot Neue Trial Demi Bold';
    font-size: 2.5rem;
}

main .presentation .comparaison .before-after .before .button {
    position: relative;
    cursor: pointer;
}

main .presentation .comparaison .before-after .before .button p {
    position: absolute;
    top: 50%; left: 50%;
    font-size: 1.1rem;
    transform: translate(-50%, -50%);
}

main .presentation .comparaison .before-after .after  {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

main .presentation .comparaison .before-after .after .preview-after {
    height: 191px; width: 349px;
    background-color: black;
    border-radius: 10px;
}

main .presentation .comparaison .before-after .after p {
    font-family: 'Supermolot Neue Trial Demi Bold';
    font-size: 2.5rem;
    color: #DBFE75;
}

main .presentation .comparaison .before-after .arrow {
    position: absolute;
    top: 100px;
    left: 47%;
    transform: translate(-50%, -50%);
    background-color: #3f21ac;
    border: 3px solid #5F36F5;
    border-radius: 50%;
    height: 60px;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

main .presentation .comparaison .before-after .arrow:hover {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

main .presentation .comparaison .before-after .arrow img {
    width: 30px;
    height: 30px;
    transform: rotate(-90deg);
    filter: brightness(0) invert(1);
    margin-top: 5px;
}

main .presentation .chat-example  {
    display: flex;
    flex-direction: column;
    margin-top: 40px;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

main .presentation .chat-example .line  {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: visible;
    animation: fadeInUp 0.4s ease-out forwards;
    opacity: 0;
}

main .presentation .chat-example .line.A { animation-delay: 0.1s; }
main .presentation .chat-example .line.B { animation-delay: 0.2s; }
main .presentation .chat-example .line.C { animation-delay: 0.3s; }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

main .presentation .chat-example .line .cercle {
    height: 50px; width: 50px;
    border-radius: 50%;
    background-color: black;
}

main .presentation .chat-example .line.B .cercle {
    background: none;
}

main .presentation .chat-example .line.A {
    flex-direction: row-reverse;
}

main .presentation .chat-example .line.A .bulle {
    transform: rotate(-5deg);
    background-color: #5F36F5;
    box-shadow:
        inset 6px 6px 10px 0 rgba(255, 255, 255, 0.25),
        inset -6px -6px 10px 0 rgba(0, 0, 0, 0.25),
        -3px 7px 15px 0 #5F36F5;         
    color: rgb(229, 229, 229);
    margin-top: 15px;
    margin-bottom: 15px;
}

main .presentation .chat-example .line.B,
main .presentation .chat-example .line.C {
    margin-right: 90px;
    margin-top: 15px;
}

main .presentation .chat-example .line.C {
    margin-bottom: 15px;
}

main .presentation .chat-example .line .bulle {
    background-color: #FFFFFF;
    width: 220px;
    border-radius: 10px;
    padding: 15px 11px;
    box-shadow:
        inset -6px -6px 10px 0 rgba(0, 0, 0, 0.25), 
        3px 3px 13px 0 #C7C7C7; 
}

main .presentation .chat-example .chatting .bulle.A {
    transform: rotate(-10deg);
}

main .presentation .chat-example .chatting .bulle p {
    padding-right: 20px;
}

/* Cartes vidéo avant/après : ratio constant 16 / 9 */
.preview-before,
.preview-after {
    aspect-ratio: 16 / 9;
    width: clamp(240px, 45vw, 349px);  /* 45 vw max pour rester lisible */
    height: auto;                      /* géré par aspect-ratio */
}

/* Bouton “Je veux le même” — empêche qu’il dépasse en mobile */
#ToConnect2.button {
    width: clamp(200px, 55vw, 304px);
    height: clamp(60px, 18vw, 91px);
}

/* ------------------------------------------------------------------
   Breakpoint ≤ 1024 px — tablette paysage
------------------------------------------------------------------- */
@media (max-width: 1024px) {
    main .presentation { gap: 28px; }
    main .presentation .comparaison .before-after { padding: 20px; }
    #ToConnect2.button { transform: none; }        /* pas de “lift” sur touch */
}

/* -----------------------------------------------------------------
   Breakpoint ≤ 768 px — tablette portrait
------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* La section passe en colonne : comparaison au-dessus, chat dessous */
    main .presentation {
        flex-direction: column;
        align-items: center;
        gap: 48px;
    }

    /* Bloc avant/après vertical : on empile “Avant” → flèche → “Après” */
    main .presentation .comparaison .before-after {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    main .presentation .comparaison .before-after .arrow {
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        margin: 15px 0;
    }

    main .presentation .comparaison .before-after .arrow:hover {
        transform: scale(1.1);
    }

    /* Chat : marges allégées */
    main .presentation .chat-example {
        margin-top: 30px;
        width: 100%;
    }
}

/* ------------------------------------------------------------------
   Breakpoint ≤ 576 px — smartphone
------------------------------------------------------------------- */
@media (max-width: 576px) {
    main .presentation { gap: 36px; }

    /* Titres & bulles encore plus compacts */
    main .presentation .comparaison .texte h2 { font-size: 1.6rem; }
    main .presentation .comparaison .texte p  { font-size: 0.95rem; }

    /* Width maximale des bulles de chat (90 % écran) */
    main .presentation .chat-example .line .bulle {
        width: 90%;
        max-width: 280px;
    }

    /* Réduction des cercles avatars */
    main .presentation .chat-example .line .cercle {
        width: 38px;
        height: 38px;
    }
}

/* ------------------------------------------------------------------
   Breakpoint ≤ 400 px — smartphone étroit
------------------------------------------------------------------- */
@media (max-width: 400px) {
    /* Gap et padding minimalistes pour gagner quelques pixels */
    main .presentation { gap: 28px; }
    main .presentation .comparaison .before-after { padding: 16px; }

    /* Texte boutons & flèche légèrement plus petits */
    #ToConnect2.button p { font-size: 0.95rem; }
    main .presentation .comparaison .before-after .arrow {
        height: 38px;
        width: 38px;
    }
}

/* ------------------------------------------------------------------
   Breakpoint ≤ 400 px — smartphone étroit
------------------------------------------------------------------- */
@media (max-width: 400px) {
    /* Gap et padding minimalistes pour gagner quelques pixels */
    main .presentation { gap: 28px; }
    main .presentation .comparaison .before-after { padding: 16px; }

    /* Texte boutons & flèche légèrement plus petits */
    #ToConnect2.button p { font-size: 0.95rem; }
    main .presentation .comparaison .before-after .arrow {
        height: 38px;
        width: 38px;
    }
}