/* ═══════════════════════════════════════
   RESPONSIVE.CSS — Connect Landing Page
   Ordre décroissant (max-width)
═══════════════════════════════════════ */

section:not(body > section.hero), .features-pro {
    max-width: 1240px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow-x: hidden !important;
}

/* ─── 1600px ─── */
@media (max-width: 1600px) {

    .hero {
        overflow: hidden;
    }

    .orbit-container {
        width: 380px;
        height: 380px;
    }

    .ring-3 {
        width: 380px !important;
        height: 380px !important;
    }

    .ring-2 {
        width: 300px !important;
        height: 300px !important;
    }

    .ring-1 {
        width: 180px !important;
        height: 180px !important;
    }

    .float-card.top-right {
        right: -80px;
    }

    .float-card.bottom-right {
        right: -60px;
    }
}


/* ─── 1400px ─── */
@media (max-width: 1400px) {

    .orbit-container {
        width: 320px;
        height: 320px;
    }

    .ring-3 {
        width: 320px !important;
        height: 320px !important;
    }

    .ring-2 {
        width: 250px !important;
        height: 250px !important;
    }

    .ring-1 {
        width: 150px !important;
        height: 150px !important;
    }

    .float-card.top-right {
        right: -130px;
    }

    .float-card.bottom-right {
        right: -100px;
        bottom: -150px;
    }

    .float-card.top-left {
        left: -60px;
        top: -80px;
    }

    .float-card.bottom-left {
        left: -100px;
    }

    .hero-right {
        height: 420px;
    }
}


/* ─── 1370px ─── */
@media (max-width: 1370px) {

    .hero-right {
        display: none;
    }

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

    .vr-line {
        display: none;
    }

    .hero {
        flex-direction: column;
        align-items: center;
    }

    .hero-inner {
        width: 100%;
    }

    .hero-left-col {
        flex-direction: row;
    }

    .demo-wrap {
        margin: 0px auto 20px;
        width: 800px;
        max-width: 800px;
    }
}


/* ─── 1300px ─── */
@media (max-width: 1300px) {
    .demo-wrap {
        margin: 0px auto 20px;
        width: 700px !important;
        max-width: 800px;
    }
}


/* ─── 1200px ─── */
@media (max-width: 1200px) {

    .hero-inner {
        margin: 0 15px;
        padding: 40px 24px 10px;
        gap: 30px;
    }

    .orbit-container {
        width: 380px;
        height: 380px;
    }

    .ring-3 {
        width: 380px;
        height: 380px;
    }

    .ring-2 {
        width: 290px;
        height: 290px;
    }

    .ring-1 {
        width: 170px;
        height: 170px;
    }

    .float-card.top-right {
        right: -120px;
    }

    .float-card.top-left {
        left: -80px;
    }

    .float-card.bottom-right {
        right: -80px;
    }

    .float-card.bottom-left {
        left: -80px;
    }

    .features {
        padding: 0px 24px;
    }
    .features-pro {
        padding: 0px 24px;
    }

    .use-cases-grid {
        max-width: 800px;
    }

    .faq-grid {
        max-width: 680px;
    }

    footer {
        padding: 50px 40px 20px;
    }

    .footer-top {
        gap: 32px;
    }

    .demo-wrap {
        margin: 0px auto 20px;
        width: 600px !important;
        max-width: 600px;
    }
}

@media (max-width: 1100px) {
    .hero-left-col {
        text-align: center;
        align-items: center;
        flex-direction: column;
        width: 100%;
    }

    .demo-wrap {
        margin: 0px auto 20px;
        width: 800px;
        max-width: 800px;
    }
    .capabilities-voice {
        display: flex !important;
        flex-direction: column !important;
        gap: 0px !important;
    }
    body > section:nth-child(9) {
        display: none !important;
    }
}

/* ─── 900px ─── */
@media (max-width: 900px) {

    .nav-links {
        display: none;
    }

    .hero {
        flex-direction: column;
        align-items: center;
    }

    .hero-inner {
        width: 100%;
        margin: 0;
        padding: 40px 24px 10px;
        flex-direction: column;
        align-items: center;
        min-height: unset;
    }

    .hero-left-col {
        align-items: center;
        text-align: center;
    }

    .hero-subtitle {
        margin: 0 auto 26px;
    }

    .hero-form {
        max-width: 380px;
    }

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

    .vr-line {
        display: none;
    }

    .logos-bar {
        flex-wrap: wrap;
        gap: 12px;
        padding: 16px 20px;
    }

    .stat-divider {
        display: none;
    }

    .stat-item {
        padding: 0 12px;
    }

    .features {
        padding: 0px 20px;
    }
    .features-pro {
        padding: 0px 20px;
    }
    .et-inner {
        display: flex !important;
        flex-direction: column-reverse !important;
        gap: 10px !important;
    }
    body > section.features > div.et-wrap > div > div.et-right {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-direction: column !important;
    }
    .et-right p {
        text-align: center !important;
    }
    .direction-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }
    .direction-grid article, .columns-learn {
        width: 100% !important;
        max-width: 100% !important;
    }

    .audio-routing {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }
    .audio-routing .routing-card {
        width: 100% !important;
        max-width: 100% !important;
    }
    .audio-routing article{
        display: flex;
        flex-direction: column !important;
    }

    .use-cases-grid {
        grid-template-columns: 1fr 1fr;
    }

    .testimonials-grid {
        grid-template-columns: 1fr 1fr;
    }

    .faq-grid {
        max-width: 100%;
    }

    footer {
        padding: 40px 24px 20px;
    }

    .footer-top {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 24px;
        justify-items: center;
        text-align: center;
        width: 100%;
    }

    .footer-brand {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-brand>p {
        max-width: 100%;
    }

    .footer-platforms {
        justify-content: center;
    }

    .footer-socials {
        justify-content: center;
    }

    .footer-links-group {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: center;
        gap: 8px;
        text-align: center;
        margin: 0 auto;
    }

    .footer-langs {
        margin-left: 0;
    }
}

@media (max-width: 680px) {
    .demo-wrap {
        margin: 0px auto 20px;
        width: 500px !important;
        max-width: 800px;
    }
}

/* ─── 600px ─── */
@media (max-width: 600px) {

    nav {
        padding: 0 12px;
    }

    .btn-ghost {
        display: none;
    }

    .hero-form {
        flex-direction: column;
    }

    .hero-form input,
    .btn-cta {
        width: 100%;
    }

    .logos-bar {
        gap: 8px;
        padding: 12px 16px;
    }

    .stat-item {
        font-size: 0.78rem;
        padding: 0 8px;
    }

    .features {
        padding: 0px 16px;
    }
    .features-pro {
        padding: 0px 16px;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .text-block {
        font-size: 0.78rem;
    }

    .simple-stepper {
        height: 70px;
        margin: 5px 0 20px;
    }

    .direction-grid,
    .audio-routing,
    .use-cases-grid,
    .testimonials-grid,
    .faq-grid {
        grid-template-columns: 1fr;
    }

    .cta-banner {
        margin: 0 16px 48px;
        padding: 36px 20px;
    }

    footer {
        padding: 32px 16px 16px;
    }

    .footer-top {
        display: flex;
        flex-direction: column;
        gap: 28px;
        justify-items: center;
        text-align: center;
    }

    .footer-brand {
        grid-column: 1 / -1;
        align-items: center;
    }

    .footer-links-group:last-child {
        grid-column: 1 / -1;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: center;
        gap: 8px;
        text-align: center;
    }

    .demo-wrap {
        margin: 0px auto 0px;
        width: 800px;
        max-width: 800px;
    }

    .page {
        padding: 15px 10px;
        overflow: visible;
    }

    .page .stage {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        gap: 10px;
        margin-top: 30px;
    }

    .page .col-btns.left,
    .page .col-btns.right {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        padding: 0 10px !important;
    }

    /* Force exactement 2 par ligne */
    .page .col-btns.left .lang-btn,
    .page .col-btns.right .lang-btn {
        width: calc(50% - 4px) !important;
        transform: none !important;
        justify-content: flex-start !important;
        box-sizing: border-box !important;
    }

    /* Annule les nth-child translateX */
    .page .col-btns.left .lang-btn:nth-child(1),
    .page .col-btns.left .lang-btn:nth-child(2),
    .page .col-btns.left .lang-btn:nth-child(3),
    .page .col-btns.left .lang-btn:nth-child(4),
    .page .col-btns.right .lang-btn:nth-child(1),
    .page .col-btns.right .lang-btn:nth-child(2),
    .page .col-btns.right .lang-btn:nth-child(3),
    .page .col-btns.right .lang-btn:nth-child(4) {
        transform: none !important;
    }

    /* Globe centré */
    .page #chartdiv {
        width: 280px !important;
        height: 240px !important;
        margin: 0 auto;
    }
}

@media (max-width: 550px) {
    .demo-wrap {
        margin: 0px auto 20px;
        width: 400px !important;
        max-width: 500px;
    }
    .card-wrap .nav-btn {
        display: none !important;
    }
    .card-wrap, .vp-wrap {
        height: max-content !important;
    }
}

@media (max-width: 450px) {
    .demo-wrap {
        margin: 0px auto 20px;
        width: stretch !important;
        max-width: 400px;
    }
}

/* ─── 400px ─── */
@media (max-width: 400px) {

    .hero-badge {
        font-size: 0.7rem;
    }

    .btn-primary {
        padding: 9px 14px;
        font-size: 0.82rem;
    }

    .feature-card {
        padding: 16px;
    }

    .use-case-card {
        flex-direction: column;
    }

    .footer-top {
        grid-template-columns: 1fr;
        justify-items: center;
    }
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .nav-links,
    .nav-actions {
        display: none !important;
    }
    .nav-burger {
        display: flex;
    }
}

/* ════════════════════════════════════════════════
   CONTACT PAGE — Responsive patch
   Colle à la fin de contact.css
   (remplace le bloc @media 860px existant)
════════════════════════════════════════════════ */

/* ─── 860px — stack vertical ─── */
@media (max-width: 860px) {

    /* Layout */
    .contact-wrap {
        grid-template-columns: 1fr;
        min-height: unset;
    }

    /* Panel gauche */
    .contact-left {
        padding: 48px 28px 40px;
    }

    .contact-left > .contact-left-content > p {
        margin-bottom: 36px;
    }

    .contact-methods {
        margin-bottom: 36px;
    }

    /* Panel droit */
    .contact-right {
        padding: 48px 28px 60px;
        justify-content: flex-start;
    }

    .form-header {
        margin-bottom: 28px;
    }

    /* Nav */
    nav {
        padding: 0 16px;
    }
}

/* ─── 600px — mobile ─── */
@media (max-width: 600px) {

    /* Panel gauche compact */
    .contact-left {
        padding: 36px 20px 32px;
    }


    .contact-left-content .hero-eyebrow {
        font-size: 0.7rem;
        padding: 4px 10px;
        margin-bottom: 16px;
    }

    .contact-left > .contact-left-content > p {
        margin-bottom: 28px;
    }

    .contact-methods {
        margin-bottom: 28px;
    }

    .contact-method {
        padding: 14px 0;
        gap: 12px;
    }

    .cm-icon {
        width: 34px;
        height: 34px;
    }

    .cm-text strong {
        font-size: 0.78rem;
    }

    .cm-text span {
        font-size: 0.74rem;
    }

    /* Formulaire */
    .contact-right {
        padding: 32px 20px 48px;
    }

    .form-header h2 {
        font-size: 1.3rem;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .submit-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .btn-submit {
        width: 100%;
        justify-content: center;
    }

    .submit-note {
        font-size: 0.72rem;
    }

    /* Footer */
    footer {
        flex-direction: column;
        gap: 10px;
        padding: 20px 16px;
        text-align: center;
    }
}

/* ─── 400px — très petit ─── */
@media (max-width: 400px) {

    .contact-left {
        padding: 28px 16px 28px;
    }

    .contact-right {
        padding: 28px 16px 40px;
    }

    .form-header h2 {
        font-size: 1.15rem;
    }

    .field input,
    .field select,
    .field textarea {
        font-size: 0.85rem;
        padding: 10px 12px;
    }
}


/* ════════════════════════════════════════════════
   ABOUT PAGE — Responsive patch
   Colle à la fin de about.css
   (remplace les blocs @media 860px et 560px existants)
════════════════════════════════════════════════ */

/* ─── 860px — tablet ─── */
@media (max-width: 860px) {

    /* Hero */
    .about-hero {
        width: 100%;
        padding: 100px 32px 48px;
    }

    /* Origin */
    .origin {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 40px 32px;
    }

    /* Mission */
    .mission {
        padding: 40px 32px;
    }

    .mission-inner {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .mission-statement {
        font-size: 1.3rem;
    }

    /* Numbers */
    .numbers {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
        padding: 40px 32px;
    }

    .number-item {
        border-right: none;
        padding: 0;
    }

    .number-val {
        font-size: 2.2rem;
    }

    /* Values */
    .values {
        padding: 40px 32px;
    }

    .values-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Founder */
    .founder {
        padding: 40px 32px;
    }

    .founder-inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .founder-right p {
        font-size: 1rem;
    }

    /* CTA */
    .about-cta {
        padding: 60px 32px;
    }

    .cta-actions {
        flex-direction: column;
        align-items: stretch;
        max-width: 400px;
        margin: 0 auto;
    }

    .hero-form {
        flex-direction: column;
        max-width: 100%;
    }

    .hero-form input {
        width: 100%;
    }

    .btn-cta,
    .btn-ghost-white {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* Footer */
    footer {
        padding: 20px 24px;
    }
}

/* ─── 600px — mobile ─── */
@media (max-width: 600px) {

    .about-hero {
        padding: 100px 20px 40px;
    }

    .origin {
        padding: 32px 20px;
    }

    .origin-text h2 {
        font-size: 1.4rem;
    }

    .origin-text p {
        font-size: 1rem;
    }

    .origin-card {
        padding: 24px 20px;
    }

    .oc-quote {
        font-size: 1rem;
    }

    .mission {
        padding: 32px 20px;
    }

    .mission-statement {
        font-size: 1.1rem;
    }

    .numbers {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        padding: 32px 20px;
    }

    .number-val {
        font-size: 1.9rem;
    }

    .number-label {
        font-size: 0.85rem;
    }

    .values {
        padding: 32px 20px;
    }

    .values-grid {
        grid-template-columns: 1fr;
    }

    .value-item {
        padding: 24px 20px;
    }

    .founder {
        padding: 32px 20px;
    }

    .founder-right p {
        font-size: 0.95rem;
    }

    .about-cta {
        padding: 48px 20px;
    }

    .about-cta h2 {
        font-size: 1.6rem;
    }

    .about-cta p {
        font-size: 0.95rem;
    }

    footer {
        flex-direction: column;
        gap: 10px;
        padding: 20px 16px;
        text-align: center;
    }
}

/* ─── 400px — très petit ─── */
@media (max-width: 400px) {

    .numbers {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .number-val {
        font-size: 1.6rem;
    }

    .values-header h2 {
        font-size: 1.2rem;
    }

    .mission-statement {
        font-size: 1rem;
    }
}


/* ════════════════════════════════════════════════
   USAGE PAGE — Responsive patch
   Remplace les blocs @media existants dans usage.css
════════════════════════════════════════════════ */

/* ─── 860px — tablet ─── */
@media (max-width: 860px) {

    nav { padding: 0 20px; }

    /* Hero */
    .hero-about {
        padding: 100px 24px 48px;
    }

    /* Section */
    .section {
        padding: 0 24px 60px;
    }

    /* OS Tabs */
    .os-tab-content {
        padding: 24px 20px;
    }

    /* Mode selector — 1 colonne */
    .mode-selector {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 28px;
    }

    /* Routing diagram — vertical */
    .routing-diagram {
        flex-direction: column;
        gap: 0;
    }

    .routing-arrow {
        transform: rotate(90deg);
        padding: 4px 0;
        align-self: center;
    }

    .routing-node { padding: 16px; }

    /* Config grid — 2 colonnes */
    .config-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    /* Feature split */
    .feature-split {
        grid-template-columns: 1fr;
    }

    .feature-panel-body {
        flex-direction: column;
        gap: 16px;
    }

    /* Voice creation */
    .voice-creation-grid {
        grid-template-columns: 1fr;
    }

    /* CTA */
    .footer-cta {
        padding: 60px 24px;
    }

    .footer-cta .cta-actions {
        flex-direction: column;
        align-items: stretch;
        max-width: 400px;
        margin: 0 auto;
    }

    .footer-cta .hero-form {
        flex-direction: column;
        max-width: 100%;
    }

    .footer-cta .hero-form input { width: 100%; }

    .footer-cta .btn-cta,
    .footer-cta .btn-ghost-white {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* Footer */
    footer { padding: 20px 24px; }
}

/* ─── 600px — mobile ─── */
@media (max-width: 600px) {

    /* Hero */
    .hero-about {
        padding: 100px 16px 40px;
    }

    .hero-os-badges {
        gap: 8px;
    }

    .os-badge {
        padding: 7px 14px;
        font-size: 0.8rem;
    }

    /* Section */
    .section { padding: 0 16px 48px; }

    /* OS Tab header */
    .os-tab-btn {
        font-size: 0.78rem;
        padding: 14px 8px;
        gap: 5px;
    }

    .os-tab-content { padding: 20px 16px; }

    /* Steps */
    .step {
        grid-template-columns: 40px 1fr;
        gap: 14px;
    }

    .step-num {
        width: 40px;
        height: 40px;
        font-size: 0.9rem;
    }

    .step:not(:last-child)::before {
        left: 19px;
    }

    /* Sim controls — scale down */
    .sim-controls {
        transform: scale(0.88);
        transform-origin: center;
    }

    /* Config grid — 1 colonne */
    .config-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .config-card { padding: 18px; }

    /* Feature panel */
    .feature-panel-header { padding: 16px 20px 12px; }
    .feature-panel-body   { padding: 16px 20px; }

    /* Voice cards */
    .vc-card { padding: 18px; }

    .vc-card-header { gap: 10px; }

    .vc-desc { font-size: 0.9rem; }

    /* CTA */
    .footer-cta { padding: 48px 16px; }
    .footer-cta h2 { font-size: 1.6rem; }
    .footer-cta p  { font-size: 0.95rem; }

    /* Footer */
    footer {
        flex-direction: column;
        gap: 10px;
        padding: 20px 16px;
        text-align: center;
    }
}

/* ─── 400px — très petit ─── */
@media (max-width: 400px) {

    .os-tab-btn {
        font-size: 0.72rem;
        padding: 12px 6px;
    }

    .os-tab-btn .os-dot {
        display: none;
    }

    .config-card h4 { font-size: 0.95rem; }

    .sim-controls {
        transform: scale(0.78);
    }

    .vc-footer-btns .vc-btn-sec,
    .vc-footer-btns .vc-btn-pri {
        font-size: 0.7rem;
    }
}

@media (max-width: 880px) {
    .plans-grid {
        grid-template-columns: 1fr;
    }

    .enterprise-card {
        grid-template-columns: 1fr;
    }

    .ent-left {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .ent-right {
        grid-template-columns: 1fr 1fr;
    }

    .credits-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .result-breakdown {
        grid-template-columns: 1fr 1fr;
    }

    nav {
        padding: 0 20px;
    }

    .nav-links,
    .nav-actions {
        display: none;
    }

    .nav-burger {
        display: flex;
    }
}

@media (max-width: 540px) {
    .credits-grid {
        grid-template-columns: 1fr;
    }

    .calc-result {
        grid-template-columns: 1fr;
    }

    .result-divider {
        display: none;
    }

    .result-breakdown {
        grid-template-columns: 1fr 1fr;
        padding: 16px 20px;
    }

    .faq-teaser {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 860px) {
    .pc-credits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .pc-credits-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .pricing-card:first-child,
    .pricing-card:last-child {
        border-radius: 14px;
        border: 1px solid #e5e7eb;
    }

    .pricing-card-featured {
        margin: 0;
        border-radius: 14px !important;
    }

    .pricing-enterprise {
        grid-template-columns: 1fr;
    }

    .pe-left {
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
    }

    .pe-features {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 520px) {
    .pe-features {
        grid-template-columns: 1fr;
    }

    .pricing-section {
        padding: 60px 20px;
    }
}