/* =====================================================
   MOBILE-V2.CSS - Version Responsive Optimisée
   Mobile-First Approach avec breakpoints multiples
   ===================================================== */

/* =====================================================
   CONFIGURATION RESPONSIVE
   ===================================================== */

/* 
   Breakpoints utilisés:
   - 320px: Petits téléphones
   - 375px: Téléphones standards (iPhone SE, iPhone 12/13 mini)
   - 414px: Grands téléphones (iPhone 12/13 Pro Max)
   - 768px: Tablettes portrait
   - 1024px: Tablettes paysage (transition vers desktop)
*/

/* =====================================================
   BASE - RESET MOBILE
   ===================================================== */

@media screen and (max-width: 1024px) {
    html {
        font-size: 16px;
        -webkit-text-size-adjust: 100%;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    html, body {
        margin: 0;
        padding: 0;
        width: 100%;
        overflow-x: hidden;
        position: relative;
    }
    
    body {
        background-color: var(--color-cream);
        min-height: 100vh;
    }
    
    /* Amélioration des zones de toucher */
    button, a, input, textarea {
        touch-action: manipulation;
    }
}

/* =====================================================
   NAVIGATION - RESPONSIVE
   ===================================================== */

@media screen and (max-width: 1024px) {
    .navbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        min-width: auto;
        padding: clamp(0.75rem, 2vw, 1rem) clamp(1rem, 4vw, 1.5rem);
        margin: 0;
        transform: none;
        border-radius: 0;
        z-index: 1000;
        background-color: var(--color-white);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
    }
    
    /* Container navbar */
    .container-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        max-width: 100%;
        padding: 0;
        margin: 0;
        gap: 0.5rem;
    }
    
    /* Ordre des éléments sur mobile : Logo - Language - Hamburger */
    .logo {
        order: 1;
    }
    
    .nav-menu {
        order: 4; /* Menu mobile caché par défaut */
    }
    
    .nav-actions {
        order: 2;
        flex: 0 0 auto;
    }
    
    .hamburger {
        order: 3;
        flex: 0 0 auto;
    }
    
    /* Language switcher mobile - AVANT la suppression globale de nav-actions */
    .lang-switcher {
        display: flex;
        align-items: center;
        margin-left: 0;
        margin-right: 0.75rem;
        order: 1;
    }
    
    .lang-btn {
        background: transparent;
        border: 2px solid #272757;
        color: #272757;
        padding: 0.45rem 0.85rem;
        border-radius: 20px;
        font-weight: 600;
        font-size: 0.8rem;
        cursor: pointer;
        transition: all 0.3s ease;
        min-width: 42px;
        text-align: center;
        z-index: 1002;
        position: relative;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }
    
    .lang-btn:hover,
    .lang-btn:active {
        background: #272757;
        color: white;
        transform: scale(0.95);
    }
    
    /* Logo responsive */
    .logo {
        display: flex;
        align-items: center;
        gap: clamp(0.5rem, 2vw, 0.75rem);
        margin-right: auto;
        z-index: 1002;
    }
    
    .logo img {
        height: clamp(2rem, 6vw, 2.5rem);
        width: auto;
        transition: height 0.3s ease;
    }
    
    /* Texte "Une Vie" après le logo */
    .logo::after {
        content: "Une Vie";
        font-family: var(--font-serif);
        font-size: clamp(1rem, 3vw, 1.25rem);
        font-weight: 600;
        color: var(--color-black);
        white-space: nowrap;
    }
    
    /* Cacher uniquement le bouton contact desktop */
    .btn-contact {
        display: none !important;
    }
    
    /* Afficher nav-actions avec le bouton de langue */
    .nav-actions {
        display: flex !important;
        margin-left: auto;
        padding-left: 0.5rem;
    }
    
    /* Menu hamburger */
    .hamburger {
        display: flex !important;
        flex-direction: column;
        justify-content: space-between;
        width: clamp(24px, 6vw, 30px);
        height: clamp(18px, 5vw, 22px);
        cursor: pointer;
        z-index: 1002;
        position: relative;
        padding: 4px;
        background: transparent;
        border: none;
    }
    
    .hamburger span {
        width: 100%;
        height: clamp(2px, 0.5vw, 3px);
        background-color: var(--color-black);
        border-radius: 2px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        transform-origin: center;
    }
    
    /* Animation hamburger → X */
    .hamburger.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    
    .hamburger.active span:nth-child(2) {
        opacity: 0;
        transform: translateX(-20px);
    }
    
    .hamburger.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
    
    /* Menu déroulant mobile */
    .nav-menu {
        display: flex;
        position: fixed;
        top: 0;
        right: -100%;
        width: min(85%, 360px);
        height: 100vh;
        height: 100dvh; /* Dynamic viewport height pour mobile */
        background-color: #FFFFFF;
        flex-direction: column;
        padding: clamp(4rem, 12vh, 6rem) clamp(1.5rem, 5vw, 2rem) 2rem;
        box-shadow: none;
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        align-items: flex-start;
        z-index: 1001;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border: none;
    }
    
    .nav-menu.active {
        right: 0;
    }
    
    /* Overlay supprimé - fond blanc uniquement */
    
    /* Liens de navigation mobile */
    .nav-link {
        margin: 0;
        font-size: clamp(1rem, 3.5vw, 1.125rem);
        width: 100%;
        padding: clamp(0.875rem, 3vw, 1rem) 0;
        transition: all 0.2s ease;
        color: var(--color-black);
        font-weight: 400;
        border: none !important;
        border-bottom: none !important;
    }
    
    .nav-link:active {
        opacity: 0.7;
    }
    
    .nav-link-bold {
        font-weight: 600;
    }
}

/* Petits écrans - optimisations supplémentaires */
@media screen and (max-width: 375px) {
    .navbar {
        padding: 0.75rem 1rem;
    }
    
    .logo::after {
        font-size: 1rem;
    }
    
    .nav-menu {
        width: 90%;
    }
}

/* =====================================================
   HERO SECTION - RESPONSIVE FULLSCREEN
   ===================================================== */

@media screen and (max-width: 1024px) {
    .hero {
        width: 100%;
        min-height: 100vh;
        height: 100vh;
        height: 100dvh; /* Dynamic viewport height */
        margin: 0;
        padding: 0;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Background fullscreen */
    .hero-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    
    .hero-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    
    /* Overlay amélioré */
    .hero-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.3) 0%,
            rgba(0, 0, 0, 0.5) 100%
        );
    }
    
    /* Container hero */
    .hero .container {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0;
        padding: clamp(1rem, 4vw, 2rem);
        padding-top: clamp(5rem, 15vh, 8rem);
        padding-bottom: clamp(3rem, 8vh, 5rem);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    
    .hero-content {
        width: 100%;
        max-width: 100%;
    }
    
    /* Titre hero - typographie fluide */
    .hero-title {
        font-family: var(--font-serif);
        font-size: clamp(1.75rem, 7vw, 3rem);
        line-height: 1.2;
        margin-bottom: clamp(0.75rem, 3vh, 1.5rem);
        color: var(--color-white);
        font-weight: 600;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }
    
    /* Sous-titre hero */
    .hero-subtitle {
        font-size: clamp(0.938rem, 4vw, 1.25rem);
        line-height: 1.5;
        margin-bottom: clamp(1.25rem, 4vh, 2rem);
        color: var(--color-white);
        font-weight: 300;
        text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
        padding: 0 clamp(0.5rem, 2vw, 1rem);
    }
    
    /* Tags hero - empilés sur petits écrans */
    .hero-tags {
        display: flex;
        flex-direction: column;
        gap: clamp(0.625rem, 2vw, 0.875rem);
        margin-bottom: clamp(1.5rem, 5vh, 2.5rem);
        width: 100%;
        padding: 0 clamp(0.5rem, 2vw, 1rem);
    }
    
    .hero-tag {
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
        text-align: center;
        padding: clamp(0.625rem, 2.5vw, 0.875rem) clamp(1rem, 3vw, 1.5rem);
        font-size: clamp(0.813rem, 3.5vw, 1rem);
        background-color: rgba(255, 255, 255, 0.15);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 25px;
        backdrop-filter: blur(10px);
        transition: none !important; /* Pas d'animation sur mobile */
        transform: none !important; /* Pas de transformation */
        opacity: 1 !important; /* Toujours visible */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .hero-tag-active {
        background-color: var(--color-white);
        color: var(--color-black);
        border-color: var(--color-white);
        font-weight: 500;
    }
    
    /* Bouton hero */
    .btn-hero {
        display: inline-block;
        padding: clamp(0.875rem, 3vw, 1.125rem) clamp(2rem, 8vw, 3rem);
        font-size: clamp(0.938rem, 4vw, 1.125rem);
        background-color: transparent;
        color: var(--color-white);
        border: 2px solid var(--color-white);
        border-radius: 30px;
        font-weight: 500;
        transition: all 0.3s ease;
        text-transform: none;
        letter-spacing: 0.5px;
        min-height: 48px; /* Touch target */
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    .btn-hero:active {
        transform: scale(0.98);
        background-color: var(--color-white);
        color: var(--color-black);
    }
}

/* Tablettes en mode paysage */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .hero-tags {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .hero-tag {
        width: auto;
        min-width: 180px;
    }
}

/* =====================================================
   SECTIONS GÉNÉRALES - RESPONSIVE
   ===================================================== */

@media screen and (max-width: 1024px) {
    .section {
        width: 100%;
        margin: 0;
        padding: clamp(2.5rem, 8vw, 4rem) 0;
    }
    
    .container,
    .container-wide {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0 clamp(1rem, 4vw, 2rem);
    }
    
    /* Titres de section responsive */
    .section-title {
        font-family: var(--font-serif);
        font-size: clamp(1.75rem, 6vw, 2.5rem);
        text-align: center;
        margin-bottom: clamp(0.5rem, 2vh, 0.75rem);
        font-weight: 600;
        line-height: 1.2;
    }
    
    /* Divider responsive */
    .section-divider {
        width: clamp(50px, 15vw, 80px);
        height: 2px;
        background-color: var(--color-black);
        margin: 0 auto clamp(1rem, 3vh, 2rem);
    }
    
    /* Intro responsive */
    .section-intro {
        text-align: center;
        font-size: clamp(0.938rem, 4vw, 1.125rem);
        line-height: 1.6;
        color: var(--color-gray);
        margin-bottom: clamp(1.25rem, 4vh, 2rem);
        padding: 0 clamp(0.5rem, 2vw, 1rem);
    }
}

/* =====================================================
   UNE VIE SECTION - RESPONSIVE
   ===================================================== */

@media screen and (max-width: 1024px) {
    .section-unevie {
        width: 100%;
        margin: 0;
        padding: clamp(2.5rem, 8vw, 4rem) 0;
        background-color: var(--color-cream);
    }
    
    /* Container empilé */
    .unevie-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 0;
        padding: 0;
        gap: 0;
    }
    
    /* Image cachée sur mobile, visible sur tablette */
    .unevie-image {
        display: none;
    }
    
    /* Contenu dans un bloc blanc */
    .unevie-content {
        width: calc(100% - clamp(2rem, 8vw, 4rem));
        max-width: 600px;
        order: 1;
        padding: clamp(1.5rem, 5vw, 2.5rem);
        background-color: var(--color-white);
        margin: clamp(1rem, 3vw, 2rem) auto;
        border-radius: clamp(12px, 3vw, 20px);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    }
    
    /* Titre dans le bloc */
    .unevie-content .section-title {
        font-size: clamp(1.5rem, 5vw, 2rem);
        margin-bottom: clamp(0.5rem, 2vh, 1rem);
        text-align: left;
        font-weight: 600;
        color: var(--color-black);
    }
    
    /* Pas de divider sur mobile */
    .unevie-content .section-divider {
        display: none;
    }
    
    /* Liste cachée sur mobile */
    .unevie-list {
        display: none !important;
    }
    
    /* Texte unique responsive */
    .unevie-content::after {
        content: "Une Vie est un service de réalisation de films documentaires familiaux dédié à la transmission.\A\AIl consiste à recueillir la parole, les souvenirs et les silences de ceux qui ont traversé le temps, afin d'en préserver l'essentiel.\A\A Chaque film raconte une existence singulière et la transforme en héritage vivant, destiné aux enfants, petits-enfants et générations futures.\A\APlus qu'un souvenir, c'est une mémoire incarnée, faite de mots, d'émotions et d'histoires vraies, pensée pour traverser le temps et créer un lien durable entre les générations.";
        display: block;
        font-size: clamp(0.875rem, 3.5vw, 1rem);
        line-height: 1.7;
        color: var(--color-text);
        margin-top: clamp(0.75rem, 2vh, 1.25rem);
        white-space: pre-line;
    }
}

/* Tablette - afficher l'image */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .unevie-image {
        display: block;
        width: 100%;
        max-width: 600px;
        margin: 0 auto clamp(1.5rem, 3vw, 2rem);
        border-radius: clamp(12px, 2vw, 16px);
        overflow: hidden;
    }
    
    .unevie-image img {
        width: 100%;
        height: auto;
        display: block;
    }
    
    .unevie-content {
        max-width: 700px;
    }
}

/* =====================================================
   PROJETS SECTION - RESPONSIVE
   ===================================================== */

@media screen and (max-width: 1024px) {
    .section-projets {
        width: 100%;
        padding: clamp(2.5rem, 8vw, 4rem) 0;
        background-color: var(--color-cream);
    }
    
    .section-projets .container {
        width: 100%;
        max-width: 100%;
        padding: 0 clamp(1rem, 4vw, 2rem);
    }
    
    /* Container empilé */
    .projets-content {
        display: flex;
        flex-direction: column;
        gap: clamp(1.25rem, 4vw, 2rem);
        width: 100%;
        margin-top: clamp(1.5rem, 4vh, 2.5rem);
    }
    
    /* Vidéo responsive */
    .projets-video {
        width: 100%;
        order: 1;
        position: relative;
        padding-bottom: 56.25%; /* 16:9 */
        height: 0;
        overflow: hidden;
        border-radius: clamp(8px, 2vw, 12px);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }
    
    .projets-video iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: inherit;
    }
    
    /* Texte dans un bloc */
    .projets-text {
        width: 100%;
        order: 2;
        background-color: var(--color-white);
        padding: clamp(1.25rem, 4vw, 2rem);
        border-radius: clamp(12px, 3vw, 16px);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    }
    
    .projets-text p {
        font-size: clamp(0.875rem, 3.5vw, 1rem);
        line-height: 1.7;
        margin-bottom: clamp(0.875rem, 3vh, 1.25rem);
        color: var(--color-text);
    }
    
    .projets-text p:last-child {
        margin-bottom: 0;
    }
}

/* Tablette - layout optimisé */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .projets-content {
        max-width: 750px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* =====================================================
   TÉMOIGNAGES - GRILLE RESPONSIVE
   ===================================================== */

@media screen and (max-width: 1024px) {
    .section-temoignages {
        width: 100%;
        padding: clamp(2.5rem, 8vw, 4rem) 0;
        background-color: var(--color-cream);
    }
    
    .section-temoignages .container {
        width: 100%;
        max-width: 100%;
        padding: 0 clamp(1.5rem, 5vw, 2.5rem);
    }
    
    /* Grille responsive - 2 colonnes sur mobile, 2x2 sur tablette */
    .temoignages-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: clamp(1.5rem, 5vw, 2.5rem);
        row-gap: clamp(2.5rem, 8vw, 4rem);
        width: 100%;
        margin-top: clamp(1.5rem, 5vh, 2.5rem);
    }
    
    /* Carte témoignage responsive */
    .temoignage-card {
        background-color: var(--color-white);
        padding: clamp(1.25rem, 4vw, 2rem) clamp(0.875rem, 3vw, 1.5rem);
        border-radius: clamp(12px, 3vw, 16px);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        min-height: clamp(200px, 50vw, 280px);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .temoignage-card:active {
        transform: scale(0.98);
    }
    
    /* Avatar responsive */
    .temoignage-avatar {
        width: clamp(45px, 12vw, 70px);
        height: clamp(45px, 12vw, 70px);
        margin-bottom: clamp(0.625rem, 2vh, 1rem);
        border-radius: 50%;
        overflow: hidden;
        border: 2px solid var(--color-cream);
    }
    
    .temoignage-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    
    /* Nom responsive */
    .temoignage-name {
        font-family: var(--font-serif);
        font-size: clamp(0.875rem, 3.5vw, 1.125rem);
        font-weight: 600;
        color: var(--color-black);
        margin-bottom: clamp(0.5rem, 2vh, 0.75rem);
    }
    
    /* Texte témoignage responsive */
    .temoignage-text {
        font-size: clamp(0.75rem, 3vw, 0.938rem);
        line-height: 1.5;
        color: var(--color-text);
        margin: 0;
        font-style: italic;
    }
}

/* Très petits écrans - 1 colonne */
@media screen and (max-width: 374px) {
    .temoignages-grid {
        grid-template-columns: 1fr;
        row-gap: clamp(1.5rem, 5vw, 2rem);
    }
    
    .temoignage-card {
        min-height: auto;
    }
}

/* Tablette - grille 4 colonnes si assez large */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .temoignages-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: clamp(1.5rem, 3vw, 2.5rem);
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* =====================================================
   QUI SOMMES-NOUS - CACHÉ SUR MOBILE
   ===================================================== */

@media screen and (max-width: 768px) {
    .section-quisommesnous {
        display: none !important;
    }
    
    /* Cacher aussi le lien dans le menu mobile */
    .nav-link[href="#qui-sommes-nous"] {
        display: none !important;
    }
}

/* Tablette - afficher en version simplifiée */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .section-quisommesnous {
        padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 4vw, 2.5rem);
    }
    
    .qui-sommes-nous-container {
        display: flex;
        flex-direction: column;
        max-width: 750px;
        margin: 0 auto;
        height: auto;
        gap: clamp(1.5rem, 3vw, 2rem);
    }
    
    .qui-sommes-nous-image {
        width: 100%;
        height: auto;
        border-radius: clamp(12px, 2vw, 16px);
    }
    
    .qui-sommes-nous-image img {
        width: 100%;
        height: auto;
        max-height: 400px;
        object-fit: cover;
    }
    
    .qui-sommes-nous-content {
        width: 100%;
        height: auto;
        border-radius: clamp(12px, 2vw, 16px);
        padding: clamp(1.5rem, 4vw, 2.5rem);
    }
    
    .qui-sommes-nous-content p {
        font-size: clamp(0.875rem, 2vw, 1rem);
    }
}

/* =====================================================
   FAQ - RESPONSIVE
   ===================================================== */

@media screen and (max-width: 1024px) {
    .section-faq {
        width: 100%;
        padding: clamp(2.5rem, 8vw, 4rem) 0;
        background-color: var(--color-cream);
    }
    
    .section-faq .container-wide {
        width: 100%;
        max-width: 100%;
        padding: 0 clamp(1rem, 4vw, 2rem);
    }
    
    /* Wrapper simplifié */
    .faq-wrapper {
        display: block;
        width: 100%;
    }
    
    /* Images cachées sur mobile */
    .faq-images-left,
    .faq-images-right {
        display: none !important;
    }
    
    /* Container des questions */
    .faq-container {
        width: 100%;
        max-width: 100%;
    }
    
    /* Item FAQ responsive */
    .faq-item {
        margin-bottom: clamp(0.75rem, 2vw, 1.25rem);
        border-radius: clamp(8px, 2vw, 12px);
        overflow: hidden;
        background-color: var(--color-white);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }
    
    /* Question responsive */
    .faq-question {
        width: 100%;
        padding: clamp(1rem, 3vw, 1.5rem);
        font-family: var(--font-serif);
        font-size: clamp(0.938rem, 4vw, 1.125rem);
        text-align: left;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: var(--color-white);
        transition: background-color 0.2s ease;
        cursor: pointer;
        border: none;
        color: var(--color-black);
        line-height: 1.3;
        gap: clamp(0.75rem, 3vw, 1.25rem);
    }
    
    .faq-question:active {
        background-color: var(--color-cream);
    }
    
    .faq-question span:first-child {
        flex: 1;
        text-align: left;
    }
    
    /* Icône FAQ */
    .faq-icon {
        font-size: clamp(1.5rem, 5vw, 2rem);
        font-weight: 300;
        transition: transform 0.3s ease;
        flex-shrink: 0;
        color: var(--color-black);
    }
    
    .faq-item.active .faq-icon {
        transform: rotate(45deg);
    }
    
    /* Réponse responsive */
    .faq-answer {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    
    .faq-item.active .faq-answer {
        max-height: 600px;
    }
    
    .faq-answer p {
        padding: 0 clamp(1rem, 3vw, 1.5rem) clamp(1rem, 3vw, 1.5rem);
        font-size: clamp(0.875rem, 3.5vw, 1rem);
        line-height: 1.7;
        color: var(--color-text);
    }
}

/* Tablette - afficher les images si souhaité */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .faq-wrapper {
        max-width: 750px;
        margin: 0 auto;
    }
}

/* =====================================================
   FORMULAIRE - RESPONSIVE
   ===================================================== */

@media screen and (max-width: 1024px) {
    .section-formulaire {
        width: 100%;
        padding: clamp(2.5rem, 8vw, 4rem) 0;
        background-color: var(--color-cream);
    }
    
    .section-formulaire .container {
        width: 100%;
        max-width: 100%;
        padding: 0 clamp(1rem, 4vw, 2rem);
    }
    
    /* Modifier le texte d'intro sur mobile */
    .section-formulaire .section-intro {
        font-size: clamp(0.875rem, 3.5vw, 1rem);
        text-align: center;
        margin-bottom: clamp(1.5rem, 4vh, 2rem);
        line-height: 1.6;
    }
    
    /* Wrapper formulaire */
    .formulaire-wrapper {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding: 0;
    }
    
    /* Formulaire dans un bloc blanc */
    .contact-form-centered {
        background-color: var(--color-white);
        padding: clamp(1.5rem, 5vw, 2.5rem);
        border-radius: clamp(12px, 3vw, 20px);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        width: 100%;
        max-width: 100%;
    }
    
    /* Ligne de formulaire - empilé sur mobile */
    .form-row {
        display: flex;
        flex-direction: column;
        gap: clamp(0.875rem, 3vw, 1.25rem);
        margin-bottom: clamp(0.875rem, 3vw, 1.25rem);
        width: 100%;
    }
    
    /* Groupe de formulaire */
    .form-group {
        width: 100%;
    }
    
    /* Label responsive */
    .form-label {
        font-size: clamp(0.875rem, 3.5vw, 1rem);
        margin-bottom: clamp(0.375rem, 1.5vw, 0.625rem);
        display: block;
        font-weight: 600;
        color: var(--color-black);
    }
    
    /* Input et textarea responsive */
    .form-input,
    .form-textarea {
        width: 100%;
        max-width: 100%;
        padding: clamp(0.875rem, 3vw, 1.125rem);
        font-size: clamp(0.75rem, 3vw, 0.875rem);
        border-radius: clamp(6px, 2vw, 10px);
        border: 2px solid transparent;
        background-color: #f8f8f6;
        box-sizing: border-box;
        font-family: var(--font-sans);
        color: var(--color-black);
        transition: all 0.3s ease;
        -webkit-appearance: none;
        appearance: none;
    }
    
    .form-input:focus,
    .form-textarea:focus {
        outline: none;
        background-color: var(--color-white);
        border-color: var(--color-gold);
    }
    
    .form-textarea {
        min-height: clamp(140px, 40vw, 180px);
        resize: vertical;
        margin-bottom: clamp(0.75rem, 2vw, 1.25rem);
    }
    
    /* Bouton submit responsive */
    .btn-submit {
        width: 100%;
        padding: clamp(0.875rem, 3vw, 1.125rem);
        font-size: clamp(0.938rem, 4vw, 1.063rem);
        border-radius: clamp(25px, 6vw, 30px);
        background-color: var(--color-black);
        color: var(--color-white);
        border: none;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        cursor: pointer;
        transition: all 0.3s ease;
        min-height: 48px; /* Touch target */
        font-family: var(--font-sans);
    }
    
    .btn-submit:active {
        transform: scale(0.98);
        background-color: var(--color-gold);
    }
}

/* Tablette - layout optimisé */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .formulaire-wrapper {
        max-width: 700px;
        margin: 0 auto;
    }
    
    .form-row {
        flex-direction: row;
        gap: clamp(1rem, 2vw, 1.5rem);
    }
}

/* =====================================================
   BANNIÈRE CONTACT BAS - CACHÉE SUR MOBILE
   ===================================================== */

@media screen and (max-width: 768px) {
    .section-contact {
        display: none !important;
    }
}

/* Tablette - version simplifiée */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .section-contact {
        min-height: 25vh;
        padding: clamp(2rem, 5vw, 3rem);
    }
    
    .contact-content {
        bottom: clamp(2rem, 5vw, 3rem);
        left: clamp(2rem, 5vw, 3rem);
    }
}

/* =====================================================
   FOOTER - RESPONSIVE
   ===================================================== */

@media screen and (max-width: 1024px) {
    .footer {
        background-color: #4a4a48;
        color: var(--color-white);
        padding: clamp(2rem, 6vw, 3rem) clamp(1rem, 4vw, 2rem);
        text-align: center;
    }
    
    .footer-text {
        font-size: clamp(0.875rem, 3.5vw, 1rem);
        opacity: 0.9;
        margin-bottom: clamp(0.25rem, 1vh, 0.5rem);
    }
    
    /* Ajouter le style pour l'email dans le footer */
    .footer-text + p,
    .footer-email {
        font-size: clamp(0.813rem, 3.2vw, 0.938rem);
        opacity: 0.85;
        margin-bottom: clamp(0.75rem, 3vh, 1rem);
        color: var(--color-white);
    }
    
    .footer-copyright {
        font-size: clamp(0.75rem, 3vw, 0.875rem);
        opacity: 0.7;
        margin-top: clamp(0.5rem, 2vh, 0.75rem);
    }
}

/* =====================================================
   UTILITAIRES MOBILE
   ===================================================== */

@media screen and (max-width: 1024px) {
    /* Scroll smooth optimisé */
    html {
        scroll-padding-top: 70px;
    }
    
    /* Empêcher le zoom sur les inputs iOS - réduit encore */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea {
        font-size: 13px !important;
    }
    
    /* Améliorer les performances d'animation */
    * {
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Masquer le scrollbar sur mobile (optionnel) */
    ::-webkit-scrollbar {
        display: none;
    }
    
    /* Support du mode sombre (optionnel) */
    @media (prefers-color-scheme: dark) {
        /* Ajuster les couleurs si besoin */
    }
    
    /* Support des préférences de mouvement réduit */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}

/* =====================================================
   ORIENTATION PAYSAGE - OPTIMISATIONS
   ===================================================== */

@media screen and (max-width: 1024px) and (orientation: landscape) {
    /* Hero en mode paysage */
    .hero {
        min-height: 100vh;
    }
    
    .hero .container {
        padding-top: clamp(4rem, 10vh, 6rem);
        padding-bottom: clamp(2rem, 5vh, 3rem);
    }
    
    .hero-title {
        font-size: clamp(1.5rem, 5vh, 2.5rem);
    }
    
    .hero-subtitle {
        font-size: clamp(0.875rem, 3vh, 1.125rem);
    }
    
    /* Tags en ligne en mode paysage */
    .hero-tags {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .hero-tag {
        width: auto;
        min-width: 150px;
        max-width: 200px;
    }
}

/* =====================================================
   PERFORMANCES - OPTIMISATIONS
   ===================================================== */

@media screen and (max-width: 1024px) {
    /* GPU acceleration pour les animations */
    .navbar,
    .nav-menu,
    .hamburger span,
    .hero,
    .btn-hero,
    .temoignage-card {
        will-change: transform;
    }
    
    /* Optimiser le rendu des images */
    img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
    
    /* Lazy loading natif */
    img[loading="lazy"] {
        content-visibility: auto;
    }
}

/* =====================================================
   FIN MOBILE-V2.CSS
   ===================================================== */