/* --- css/responsive.css --- */
/*
  Ce fichier contient toutes les requêtes média pour la conception réactive,
  garantissant que la mise en page s'adapte à différentes tailles d'écran.
  Il suit une approche mobile-first, avec des styles pour les grands écrans
  étant progressivement améliorés.
*/

/* Ajustements généraux des requêtes média pour l'espacement et les tailles de police sur tous les appareils */
@media (max-width: 1200px) {
    /* Ajuster le padding des sections sur les écrans moyens à grands */
    .hero-section,
    .second-section,
    .feature-scrolling-section,
    .final-cta-section,
    .how-it-works-section,
    .founder-note-section,
    .waitlist-section {
        padding-left: var(--spacing-lg);
        padding-right: var(--spacing-lg);
    }
    /* Ajuster l'espacement pour les conteneurs sur les écrans moyens à grands */
    .hero-container,
    .second-section-content,
    .feature-scrolling__container,
    .final-cta-content,
    .founder-note-container,
    .waitlist-container,
    .footer-container {
        gap: var(--spacing-md);
    }

    /* Ajuster le padding de l'en-tête pour plus de cohérence */
    .main-header {
        padding: var(--header-padding-y) var(--spacing-lg);
    }
    /* Footer adjustments for wider mobile/tablet screens */
    .main-footer-section {
        padding-left: var(--spacing-lg);
        padding-right: var(--spacing-lg);
    }
}

/* Tablettes et petits ordinateurs portables (max-width: 992px) */
@media (max-width: 992px) {
    /* --- General adjustments for smaller screens --- */
    /* Further reduce padding for most sections */
    .hero-section,
    .second-section,
    .feature-scrolling-section,
    .final-cta-section,
    .how-it-works-section,
    .founder-note-section,
    .waitlist-section {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
    /* Ensure header padding is consistent */
    .main-header {
        padding: var(--header-padding-y) var(--spacing-md);
    }

    /* Mobile Menu Styling */
    .main-nav {
        /* Initially hidden */
        display: none;
        flex-direction: column; /* Stack items vertically */
        position: fixed; /* Overlay the content */
        top: var(--header-height); /* Start below the header */
        left: 0;
        width: 100%;
        height: calc(100vh - var(--header-height)); /* Full viewport height minus header */
        background-color: var(--header-bg-color); /* Match header background */
        z-index: 999; /* Below header, above content */
        overflow-y: auto; /* Enable scrolling for long menus */
        justify-content: flex-start; /* Align items to the top */
        padding-top: var(--spacing-md); /* Add some padding at the top */
        transform: translateX(100%); /* Start off-screen to the right */
        transition: transform 0.3s ease-out; /* Smooth transition */
    }

    .main-nav.open {
        display: flex; /* Show the menu when 'open' class is active */
        transform: translateX(0); /* Slide into view */
    }

    .main-nav__list {
        flex-direction: column; /* Stack list items vertically */
        width: 100%; /* Take full width of the menu */
        align-items: center; /* Center list items horizontally */
        padding: 0; /* Reset padding */
        gap: var(--spacing-md); /* Increase gap between menu items */
    }

    .main-nav__item {
        width: 100%; /* Make each item take full width */
        text-align: center; /* Center text within each item */
    }

    .main-nav__link,
    .main-nav__item .button--primary { /* Style both link and button in mobile menu */
        width: 90%; /* Ensure links/buttons take up a good width */
        max-width: 300px; /* Prevent them from getting too wide on tablets */
        display: block; /* Make them block-level to take full width */
        padding: var(--spacing-sm) var(--spacing-md); /* Adjust padding */
        margin: 0 auto; /* Center buttons/links */
        border-radius: var(--button-radius); /* Maintain button radius */
        font-size: clamp(1rem, 3vw, 1.1rem); /* Fluid font size for menu items */
    }

    .main-nav__item .button--primary {
        margin-top: var(--spacing-lg); /* Add space above the button in menu */
    }

    /* Hide the desktop "Get started today" button and show burger menu */
    .main-header__right-side > .button { /* Target the button directly in the header, not inside nav */
        display: none; /* Hide the desktop button */
    }
    .menu-toggle {
        display: block; /* Show the hamburger menu icon */
    }
    
    /* Adjust overall font sizes using clamp for fluid typography */
    body {
        font-size: clamp(15px, 1.5vw, 16px);
    }
    h1, .title-hero {
        font-size: clamp(2.5rem, 6vw, 3rem); /* Smaller on smaller screens */
    }
    h2, .title-section-white, .title-section-gradient-alpha, .title-section-gradient-green, .title-section-gradient-blue-green {
        font-size: clamp(2rem, 5vw, 2.25rem); /* Smaller on smaller screens */
    }
    p {
        font-size: clamp(0.95rem, 2.2vw, 1rem);
    }

    /* --- Section Hero --- */
    .hero-container {
        flex-direction: column; /* Stack content vertically */
        text-align: center; /* Center align text */
        gap: var(--spacing-lg);
    }
    .hero-left-content {
        flex: none; /* Reset flex properties */
        max-width: 100%; /* Take full width */
        padding-right: 0; /* Remove specific padding */
    }
    .hero-right-illustration {
        position: relative; /* Change to relative to flow with content */
        top: auto;
        right: auto;
        transform: none; /* Remove previous transforms */
        width: 80%; /* Adjust width to fit better */
        margin: var(--spacing-md) auto 0 auto; /* Center it with top margin */
        min-height: 250px; /* Ensure a minimum height */
        max-width: 400px; /* Limit max width */
    }
    /* Adjust animated shape positions for tablet */
    .animated-shape {
        transform: scale(0.8) !important;
    }
    .shape-circle-1 { top: 15%; left: 8%; }
    .shape-square-2 { top: 55%; right: 10%; }

    /* --- Deuxième Section --- */
    .second-section-content {
        flex-direction: column; /* Empiler le contenu verticalement */
        align-items: center;
        text-align: center;
        min-height: auto;
        padding-top: var(--spacing-md);
        gap: var(--spacing-lg);
    }
    .second-section-left {
        flex: none;
        width: 100%;
        padding-right: var(--spacing-md);
        padding-left: var(--spacing-md);
        margin-bottom: var(--spacing-md);
    }
    .we-heard-you-title-container {
        justify-content: center; /* Centrer le titre et le conteneur d'icônes */
    }
    .we-heard-you-icon {
        position: absolute;
        top: -60px; /* Ajuster la position verticale */
        left: 50%; /* Centrer horizontalement */
        width: 100px;
        transform: translateX(-50%) rotate(-10deg); /* Centrer et faire pivoter */
    }
    .second-section-description {
        max-width: none; /* Autoriser la pleine largeur */
    }
    .testimonials-right-content {
        width: 100%;
        padding-left: 0;
        align-items: center;
    }
    .testimonials-carousel-container {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
        gap: var(--spacing-sm);
        flex-wrap: nowrap; /* Assurer le défilement horizontal */
    }
    .testimonial-card {
        flex: 0 0 calc(80% - var(--spacing-sm) / 1.2); /* Les cartes occupent 80% de la largeur */
        min-height: 160px;
        padding: var(--spacing-md);
        text-align: left; /* Garder le texte aligné à gauche dans les cartes */
    }
    .carousel-dots-container {
        margin-top: var(--spacing-md);
    }

    /* --- Séparateurs inclinés --- */
    .slant-divider {
        height: 15px;
    }
    .slant-divider--section-top-white {
        top: 13px;
    }
    .slant-divider--section-top-dark-green {
        top: 28px;
    }

    /* --- Section de défilement des fonctionnalités --- */
    .feature-scrolling__container {
        flex-direction: column; /* Empiler le contenu verticalement */
    }
    .feature-scrolling__left-content,
    .feature-scrolling__right-images {
        max-width: 100%; /* Occuper toute la largeur */
        flex: none; /* Réinitialiser les propriétés flex */
    }
    .feature-scrolling__right-images {
        position: static; /* Supprimer le comportement sticky sur les petits écrans */
        height: auto;
        min-height: 400px;
        margin-top: var(--spacing-md);
    }
    .feature-text-block {
        min-height: auto;
        padding-bottom: var(--spacing-lg);
        text-align: center; /* Centrer les blocs de texte */
    }
    .feature-tag,
    .feature-text-block p {
        margin-left: auto; /* Centrer ces éléments */
        margin-right: auto;
    }

    /* --- Section CTA finale --- */
    .final-cta-content {
        flex-direction: column; /* Empiler le contenu verticalement */
        text-align: center;
        gap: var(--spacing-md);
    }
    .release-icon {
        margin-right: 0;
        margin-bottom: var(--spacing-md);
    }
    .release-text {
        text-align: center;
    }
    .release-text h1 {
        font-size: var(--font-size-h2); /* Ajuster la taille de police pour les petits écrans */
    }
    .release-text p {
        max-width: none; /* Autoriser la pleine largeur */
    }

    /* --- Section "Comment ça marche" --- */
   
    .how-it-works-left,
    .how-it-works-right {
        width: 100%; /* Les deux colonnes occupent toute la largeur */
        position: static; /* Empiler naturellement */
        clip-path: none; /* Supprimer la forme oblique */
        margin-right: 0;
        padding-right: var(--spacing-md);
        padding-left: var(--spacing-md);
    }
    .how-it-works-left::before,
    .how-it-works-left::after {
        display: none; /* Cacher les bandes décoratives */
    }
    .how-it-works-right {
        min-height: 300px; /* Assurer une certaine hauteur à la vidéo */
    }
    .steps-list {
        max-width: 100%; /* Autoriser la liste des étapes à occuper toute la largeur */
        align-items: center; /* Centrer les éléments d'étape en colonne */
    }
    .step-item {
        flex-direction: column; /* Empiler le numéro et le texte verticalement */
        text-align: center;
        align-items: center;
        gap: var(--spacing-xs);
    }

    /* --- Section Note du Fondateur --- */
    .founder-note-container {
        flex-direction: column; /* Empiler le contenu verticalement */
        text-align: center;
    }
    .founder-photo {
        width: 150px;
        height: 150px;
        margin: 0 auto var(--spacing-sm) auto; /* Centrer la photo */
    }
    .founder-text blockquote {
        padding: 0;
        border-left: none; /* Supprimer la bordure */
    }
    .founder-info {
        padding-left: 0;
    }

    /* --- Section Liste d'attente --- */
    .waitlist-container {
        flex-direction: column; /* Empiler le contenu verticalement */
        text-align: center;
    }
    .waitlist-text-content p {
        margin-left: auto; /* Centrer les paragraphes */
        margin-right: auto;
    }

    /* --- Pied de page simple --- */
    .footer-container {
        flex-direction: column; /* Empiler le contenu verticalement */
        justify-content: center;
        gap: var(--spacing-md);
    }
    /* S'assurer que les éléments du pied de page sont centrés sur mobile */
    .footer-logo,
    .footer-copyright,
    .footer-socials {
        width: 100%;
        text-align: center;
        display: flex;
        justify-content: center;
    }
    .footer-logo img {
        margin-bottom: var(--spacing-sm); /* Maintenir une certaine marge sous le logo */
    }
    .footer-socials {
        margin-top: var(--spacing-sm); /* Ajouter une marge au-dessus des icônes sociales sur mobile */
    }
}

/* Mobiles (max-width: 768px) */
@media (max-width: 768px) {
    /* --- Général --- */
    body {
        font-size: 14px; /* Police de base légèrement plus petite */
    }
    .hero-section,
    .second-section,
    .feature-scrolling-section,
    .final-cta-section,
    .how-it-works-section,
    .founder-note-section,
    .waitlist-section {
        padding: var(--spacing-md) var(--spacing-sm); /* Padding plus réduit */
    }
    .main-header {
        padding: var(--header-padding-y) var(--spacing-sm);
    }
    .hero-container,
    .second-section-content,
    .feature-scrolling__container,
    .final-cta-content,
    .founder-note-container,
    .waitlist-container,
    .footer-container {
        gap: var(--spacing-sm); /* Espacement réduit */
    }

    /* --- Section Hero --- */
    .title-hero {
        font-size: clamp(1.8rem, 8vw, 2.5rem); /* Réduction supplémentaire avec clamp */
        line-height: 1.2;
        margin-bottom: var(--spacing-sm);
    }
    .hero-description {
        font-size: clamp(0.9rem, 2.5vw, 1rem); /* Taille de police fluide */
    }
    .hero-right-illustration {
        min-height: 180px;
    }
    .animated-shape {
        transform: scale(0.6) !important; /* Formes animées plus petites */
    }
    .shape-circle-1 { top: 5%; left: 0%; }
    .shape-square-2 { top: 65%; right: 0%; }

    /* --- Deuxième Section --- */
    .second-section-content {
        padding-top: var(--spacing-md);
        gap: var(--spacing-md);
    }
    .second-section-left {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
    .we-heard-you-icon {
        top: -40px;
        width: 80px;
        transform: translateX(-50%) rotate(-5deg);
    }
    .testimonials-carousel-container {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
        gap: var(--spacing-sm);
    }
    .testimonial-card {
        flex: 0 0 calc(90% - var(--spacing-sm)); /* Les cartes occupent 90% de la largeur */
        min-height: 120px;
        padding: var(--spacing-md);
    }

    /* --- Séparateurs inclinés --- */
    .slant-divider {
        height: 10px;
    }
    .slant-divider--section-top-white {
        top: 8px;
    }
    .slant-divider--section-top-dark-green {
        top: 18px;
    }

    /* --- Section "Comment ça marche" --- */
    .how-it-works-left,
    .how-it-works-right {
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }

    /* --- Section Liste d'attente --- */
    .waitlist-form input,
    .waitlist-form textarea {
        font-size: 15px; /* Police des champs de saisie légèrement plus petite */
        padding: 10px 12px;
    }
    /* Ajustements du pied de page pour les petits écrans mobiles */
    .main-footer-section {
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }
    .footer-logo img {
        width: 120px; /* Logo plus petit sur les petits téléphones */
        margin-bottom: var(--spacing-xs); /* Réduction de la marge pour un pied de page plus compact */
    }
    .footer-copyright {
        font-size: 14px; /* Police plus petite pour le copyright */
        text-align: center; /* Assurer que c'est centré */
        order: 2; /* Pour que le copyright apparaisse après le logo et les réseaux sociaux */
    }
    .socials-label {
        font-size: 14px; /* Police plus petite pour le label social */
    }
    .footer-socials {
        gap: var(--spacing-xs); /* Réduire l'espace entre les icônes */
        margin-top: var(--spacing-xs); /* Réduire la marge au-dessus des réseaux sociaux */
        order: 1; /* Pour que les réseaux sociaux apparaissent avant le copyright */
    }
    .footer-socials svg {
        width: 22px; /* Icônes SVG plus petites sur les petits téléphones */
        height: 22px;
    }
}

/* Très petits mobiles (max-width: 480px) */
@media (max-width: 480px) {
    /* --- Général --- */
    .hero-section,
    .second-section,
    .feature-scrolling-section,
    .final-cta-section,
    .how-it-works-section,
    .founder-note-section,
    .waitlist-section {
        padding: var(--spacing-md) var(--spacing-xs); /* Padding le plus réduit */
    }
    .main-header {
        padding: var(--header-padding-y) var(--spacing-xs);
    }
    .hero-container,
    .second-section-content,
    .feature-scrolling__container,
    .final-cta-content,
    .founder-note-container,
    .waitlist-container,
    .footer-container {
        gap: var(--spacing-xs); /* Plus petit espacement */
    }
    /* Tailles de police plus petites pour les très petits écrans */
    h1, .title-hero {
        font-size: clamp(1.5rem, 9vw, 1.8rem);
    }
    h2, .title-section-white, .title-section-gradient-alpha, .title-section-gradient-green, .title-section-gradient-blue-green {
        font-size: clamp(1.6rem, 7vw, 2rem);
    }

    /* --- Section Hero --- */
    .hero-right-illustration {
        min-height: 120px;
    }
    .animated-shape {
        transform: scale(0.4) !important; /* Formes animées les plus petites */
    }
    .shape-circle-1 { top: -5%; left: -10%; }
    .shape-square-2 { top: 75%; right: -10%; }

    /* --- Deuxième Section --- */
    .second-section-content {
        gap: var(--spacing-sm);
    }
    .second-section-left {
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }
    .we-heard-you-icon {
        top: -30px;
        width: 60px;
        transform: translateX(-50%) rotate(0deg);
    }
    .testimonials-carousel-container {
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
        gap: var(--spacing-xs);
    }
    .testimonial-card {
        flex: 0 0 calc(95% - var(--spacing-xs)); /* Presque pleine largeur */
        min-height: 100px;
        padding: var(--spacing-sm);
    }

    /* --- Séparateurs inclinés --- */
    .slant-divider {
        height: 8px;
    }
    .slant-divider--section-top-white {
        top: 7px;
    }
    .slant-divider--section-top-dark-green {
        top: 15px;
    }

    /* --- Section "Comment ça marche" --- */
    .steps-list {
        max-width: 100%;
        align-items: center;
    }
    .step-item {
        flex-direction: column;
        text-align: center;
        align-items: center;
        gap: var(--spacing-xs);
    }
    .step-number {
        font-size: 30px; /* Numéros d'étape légèrement plus petits */
    }
    /* Ajustements du pied de page pour les très petits écrans mobiles */
    .main-footer-section {
        padding-left: var(--spacing-xs);
        padding-right: var(--spacing-xs);
    }
    .footer-logo img {
        width: 90px; /* Logo encore plus petit */
    }
    .footer-copyright {
        font-size: 12px; /* Police la plus petite pour le copyright */
    }
    .socials-label {
        font-size: 12px; /* Police la plus petite pour le label social */
    }
    .footer-socials svg {
        width: 16px; /* Icônes SVG les plus petites */
        height: 16px;
    }
}