/* =============================================
   RESPONSIVE — Mobile-first adaptations
   Toutes les règles ci-dessous s'appliquent
   UNIQUEMENT aux petits écrans (≤ 768px).
   Le design bureau reste intouché.
   ============================================= */

/* ─── BREAKPOINT TABLET / GRAND PHONE (≤ 900px) ─── */
@media (max-width: 900px) {
    .hero,
    .about-container,
    .contact-container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .hero {
        text-align: center;
        padding-top: 2rem;
    }

    .hero p {
        margin: 0 auto 2.5rem;
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero h1 {
        font-size: 2.8rem;
    }
}


/* ─── BREAKPOINT MOBILE (≤ 768px) ─── */
@media (max-width: 768px) {

    /* ── BODY overflow protection ── */
    body {
        overflow-x: hidden;
        overscroll-behavior-y: none; /* Prevent rubber-banding which cuts fixed content */
    }

    /* ═══════════════════════════════
       NAVIGATION — Drawer latéral
       ═══════════════════════════════ */

    /* Overlay flou derrière le drawer */
    .nav-links::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        z-index: -1;
        opacity: 0;
        transition: opacity 0.35s ease;
        pointer-events: none;
    }

    .nav-links.active::before {
        opacity: 1;
        pointer-events: all;
    }

    .nav-links {
        /* Drawer depuis la droite */
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: 0;
        width: min(80vw, 300px);
        height: 100dvh;
        background: linear-gradient(
            160deg,
            rgba(18, 10, 35, 0.97) 0%,
            rgba(8, 8, 20, 0.99) 100%
        );
        backdrop-filter: blur(32px);
        -webkit-backdrop-filter: blur(32px);
        border-left: 1px solid rgba(107, 33, 214, 0.25);
        box-shadow: -8px 0 48px rgba(0, 0, 0, 0.6), -1px 0 0 rgba(107, 33, 214, 0.15);
        align-items: flex-start;
        justify-content: flex-start;
        padding: 6rem 0 2rem;
        gap: 0;
        z-index: 999;

        /* État fermé */
        opacity: 0;
        pointer-events: none;
        transform: translateX(100%);
        transition: opacity 0.3s ease, transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .nav-links.active {
        opacity: 1;
        pointer-events: all;
        transform: translateX(0);
    }

    /* Ligne décorative en haut du drawer */
    .nav-links::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, transparent, rgba(107, 33, 214, 0.8), rgba(76, 130, 250, 0.6), transparent);
    }

    /* Liens du menu mobile */
    .nav-links li {
        width: 100%;
        text-align: left;
        opacity: 0;
        transform: translateX(20px);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    /* Staggered animation quand actif */
    .nav-links.active li:nth-child(1) { opacity: 1; transform: translateX(0); transition-delay: 0.08s; }
    .nav-links.active li:nth-child(2) { opacity: 1; transform: translateX(0); transition-delay: 0.14s; }
    .nav-links.active li:nth-child(3) { opacity: 1; transform: translateX(0); transition-delay: 0.20s; }
    .nav-links.active li:nth-child(4) { opacity: 1; transform: translateX(0); transition-delay: 0.26s; }

    .nav-links li a {
        display: flex;
        align-items: center;
        gap: 0.85rem;
        padding: 1rem 1.75rem;
        font-size: 1.05rem;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.75);
        letter-spacing: 0.01em;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        transition: color 0.22s ease, background 0.22s ease, padding-left 0.22s ease;
        position: relative;
    }

    /* Barre de gauche sur hover */
    .nav-links li a::before {
        content: '';
        position: absolute;
        left: 0;
        top: 20%;
        bottom: 20%;
        width: 3px;
        border-radius: 0 2px 2px 0;
        background: linear-gradient(180deg, #6b21d6, #4c82fa);
        opacity: 0;
        transform: scaleY(0);
        transition: opacity 0.22s ease, transform 0.22s ease;
    }

    .nav-links li a:hover::before,
    .nav-links li a.active::before {
        opacity: 1;
        transform: scaleY(1);
    }

    .nav-links li a:hover,
    .nav-links li a.active {
        color: var(--white);
        background: rgba(107, 33, 214, 0.1);
        padding-left: 2.1rem;
    }

    /* Icônes SVG dans les liens */
    .nav-links li a svg {
        display: block;
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        opacity: 0.6;
        transition: opacity 0.22s ease;
    }

    .nav-links li a:hover svg,
    .nav-links li a.active svg {
        opacity: 1;
    }

    /* Indicateur actif — on garde la barre */
    .nav-links a::after {
        display: none;
    }

    /* Icône hamburger */
    .mobile-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        cursor: pointer;
        color: var(--white);
        position: relative;
        z-index: 1000;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        transition: background 0.2s ease, border-color 0.2s ease;
    }

    .mobile-menu-toggle:active {
        background: rgba(107, 33, 214, 0.25);
        border-color: rgba(107, 33, 214, 0.4);
    }

    /* Bouton de langue — visible mais compact */
    #lang-toggle {
        padding: 0.4rem 0.7rem;
        font-size: 0.85rem;
        z-index: 1000;
        position: relative;
    }

    /* Ajustement de la barre de nav */
    .nav-container {
        padding: 0.85rem 1.25rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Actions du header (lang + hamburger) alignés ensemble */
    .header-actions {
        display: flex;
        gap: 0.6rem;
        align-items: center;
        z-index: 1000;
        position: relative;
    }


    /* ═══════════════════════════════
       TYPOGRAPHIE
       ═══════════════════════════════ */
    .section-header h2 {
        font-size: 1.9rem;
        line-height: 1.2;
    }

    .section-header p {
        font-size: 1rem;
    }

    .video-overlay-content h1 {
        font-size: 2.2rem;
        line-height: 1.15;
    }

    .video-overlay-content p {
        font-size: 1rem;
    }


    /* ═══════════════════════════════
       HERO SCROLL-VIDEO (index.html)
       ═══════════════════════════════ */
    .scroll-sequence {
        /* Réduire la hauteur de défilement sur mobile pour ne pas forcer
           un scroll interminable */
        height: 250vh;
    }

    .video-overlay-content {
        width: 92%;
        padding: 0 0.5rem;
        /* Texte ancré en haut de l'écran (sous le bouton EN) pour laisser
           la place au logo/wordmark en bas, sans se chevaucher */
        top: 12%;
        transform: translateX(-50%);
    }

    /* Logo (bouclier + wordmark) rapproché du bas de l'écran quand le texte
       du hero est visible, pour que tout rentre dans la hauteur de l'écran */
    .sticky-container.split-layout #fraytech-anim-container {
        transform: translateY(28vh);
    }

    #fraytech-anim-svg {
        max-width: 26vw !important;
        max-height: 18vh !important;
    }

    /* Cacher le badge pour gagner de la place sur mobile */
    .video-overlay-content .badge {
        display: none;
    }

    /* Le bouton CTA prend toute la largeur sur mobile */
    .hero-buttons .btn-primary {
        width: 100%;
        justify-content: center;
        padding: 0.9rem 1.5rem;
        font-size: 1.05rem;
    }


    /* ═══════════════════════════════
       SLIDER HORIZONTAL → VERTICAL
       ═══════════════════════════════ */
    #horizontal-slider-container {
        overflow: visible;
    }

    .slider-track {
        /* Désactiver le slide horizontal : empiler les sections */
        display: block;
        width: 100%;
        transform: none !important;
        transition: none;
    }

    .slider-track > section {
        width: 100%;
    }

    /* Cacher les boutons de navigation du slider */
    .slider-next-btn,
    .slider-prev-btn {
        display: none;
    }

    /* Repositionner le bouton "continuer" en bas au centre sur mobile */
    .solution-continue-btn {
        top: auto;
        bottom: 30px;
        left: 50%;
        right: auto;
        transform: translateX(-50%) translateY(20px);
        width: max-content;
    }
    
    .solution-continue-btn.is-visible {
        transform: translateX(-50%) translateY(0);
    }

    .solution-continue-btn:active,
    .solution-continue-btn:hover {
        transform: translateX(-50%) translateY(0) scale(1.05);
    }


    /* ═══════════════════════════════
       SECTION GÉNÉRALE
       ═══════════════════════════════ */
    section {
        padding: 3.5rem 1.25rem;
    }

    .section-header {
        margin-bottom: 2.5rem;
    }


    /* ═══════════════════════════════
       ORBITAL (Notre Concept)
       ═══════════════════════════════ */
    .orbital-section {
        padding: 3rem 1.25rem 5rem;
        overflow-x: hidden;
    }

    .orbital-section .section-header {
        margin-bottom: 2.5rem;
    }

    /* Retirer le décalage horizontal qui fait déborder le composant */
    .orbital-wrapper {
        flex-direction: column;
        gap: 2rem;
        transform: none !important;
        max-width: 100%;
    }

    .orbital-wrapper.has-active {
        transform: none !important;
    }

    /* Stage : réduit pour tenir dans l'écran */
    .orbital-stage {
        width: 300px;
        height: 300px;
    }

    .orbit-ring-1 {
        width: 248px;
        height: 248px;
    }

    .orbit-ring-2 {
        width: 168px;
        height: 168px;
    }

    /* Carte de détail : pleine largeur */
    .orbital-detail {
        width: 100%;
        max-width: 100%;
        transform: translateY(10px) scale(0.97);
    }

    .orbital-detail.is-visible {
        transform: translateY(0) scale(1);
    }

    /* Connexion verticale entre orbe et carte */
    .connection-line {
        width: 2px;
        height: 0;
        transform: translateX(-50%);
        background: linear-gradient(180deg, rgba(107, 33, 214, 0.8), rgba(26, 111, 232, 0.8));
    }

    .orbital-node.is-docked .connection-line {
        width: 2px;
        height: 64px;
    }


    /* ═══════════════════════════════
       PROCESSUS — Cartes en fan
       ═══════════════════════════════ */
    .processus-stage {
        height: 400px;
    }

    .processus-inner {
        padding: 0 1.25rem;
    }

    .proc-card {
        width: 260px;
        height: 320px;
        margin-left: -130px;
        margin-top: -160px;
    }

    /* Navigation du processus bien visible */
    .proc-nav {
        bottom: -48px;
    }

    /* Swipe hint margin override pour mobile */
    .proc-swipe-hint {
        display: block;
        margin-top: 12px;
    }

    /* Réduire l'espace vide sous les cartes sur mobile, mais laisser de la place au bouton */
    #notre-processus {
        padding-bottom: 80px;
    }


    /* Désactiver hover translateY sur tactile */
    .team-card:hover {
        transform: none;
    }


    /* ═══════════════════════════════
       SECTION ABOUT / ÉQUIPE
       ═══════════════════════════════ */
    .about-text h2 {
        font-size: 2rem;
    }

    .team-cards {
        flex-direction: column;
    }

    .team-card {
        min-width: 0;
        width: 100%;
    }

    /* Panneau de stats */
    .glass-panel {
        padding: 2rem 1.25rem;
    }

    .stat-value {
        font-size: 2.2rem;
        min-width: 90px;
    }

    .stat-label {
        font-size: 0.95rem;
    }


    /* ═══════════════════════════════
       CONTACT
       ═══════════════════════════════ */
    .contact-container {
        grid-template-columns: 1fr;
        padding: 2rem 1.25rem;
        gap: 2.5rem;
    }

    .contact-info h3 {
        font-size: 1.7rem;
    }

    /* Champs de formulaire : hauteur tactile confortable */
    .form-group input,
    .form-group textarea {
        font-size: 1rem;
        padding: 0.85rem 1rem;
        -webkit-appearance: none; /* supprime le style natif iOS */
    }

    .btn-submit {
        padding: 0.9rem 1.5rem;
        font-size: 1rem;
    }

    /* Carte d'info contact : texte ne déborde pas */
    .info-value {
        font-size: 0.9rem;
    }


    /* ═══════════════════════════════
       FOOTER
       ═══════════════════════════════ */
    .footer-content {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
    }

    .footer-links {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }

    footer {
        padding: 3rem 1.25rem 2rem;
    }


    /* ═══════════════════════════════
       BOUTON LANGUE FIXE (index.html)
       ═══════════════════════════════ */
    /* Le bouton de langue flottant de index.html */
    body > div[style*="position: fixed"] {
        top: 0.85rem !important;
        right: 1.25rem !important;
    }
}


/* ─── BREAKPOINT PETIT TÉLÉPHONE (≤ 480px) ─── */
@media (max-width: 480px) {

    .nav-container {
        padding: 0.75rem 1rem;
    }

    .logo-text {
        font-size: 1.25rem;
    }

    .logo-shield-img {
        width: 26px;
        height: 26px;
    }

    .video-overlay-content h1 {
        font-size: 1.85rem;
    }

    .section-header h2 {
        font-size: 1.65rem;
    }

    /* Orbital encore plus petit sur iPhone SE (375px) */
    .orbital-stage {
        width: 270px;
        height: 270px;
    }

    .orbit-ring-1 {
        width: 224px;
        height: 224px;
    }

    .orbit-ring-2 {
        width: 152px;
        height: 152px;
    }

    .orbital-section {
        padding: 2.5rem 1rem 4rem;
    }

    /* Cartes processus encore plus compactes */
    .proc-card {
        width: 230px;
        height: 295px;
        margin-left: -115px;
        margin-top: -147px;
    }

    .processus-stage {
        height: 360px;
    }

    .stat-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .stat-value {
        min-width: 0;
    }

    section {
        padding: 3rem 1rem;
    }

    .solution {
        padding: 3rem 1rem;
    }

    .contact-container {
        padding: 1.75rem 1rem;
    }
}