/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE.CSS — Compagnons Associés
   Corrections et améliorations responsive pour tous les devices
   Breakpoints : 1200px | 991px | 768px | 576px | 480px | 360px
═══════════════════════════════════════════════════════════════ */

/* ─── GLOBAL ──────────────────────────────────────────────── */
img, video, embed, object {
    max-width: 100%;
}

/* Evite les débordements horizontaux */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Tables responsives */
.post-body table,
.page-content table,
.project-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

/* Iframes responsives */
.map-responsive {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
}
.map-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ─── PROGRESS-WRAP (scroll-to-top button) ─────────────────── */
.progress-wrap {
    bottom: 25px;
    right: 25px;
}

/* ─── WHATSAPP FLOATING BUTTON ─────────────────────────────── */
a.chat__trigger-quin.logo-chat {
    right: 20px;
    bottom: 80px;
}

/* ═══════════════════════════════════════════════════════════════
   TABLET — 1200px
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {

    /* Footer left - réduire le padding excessif */
    .footer-section .footer-left {
        padding: 80px 60px 70px;
    }

    .footer-section .footer-right {
        padding: 70px 50px 100px 60px;
    }

    .footer-section .inner h4 {
        font-size: 58px;
        line-height: 68px;
    }

    /* Header */
    .header__content__venor {
        padding: 35px 60px 0px 40px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   TABLET — 991px
═══════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {

    /* Footer */
    .footer-section .footer-left {
        padding: 60px 40px 50px;
    }

    .footer-section .footer-right {
        padding: 50px 40px 80px 40px;
    }

    .footer-section .inner h4 {
        font-size: 48px;
        line-height: 58px;
    }

    /* Blog home - cards en colonnes de 2 */
    .blog-section .row > .col-md-4 {
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 30px;
    }

    /* About section - images */
    .item-about-row {
        flex-wrap: wrap;
    }

    .item-about-img1 {
        width: 55%;
    }

    .item-about-img2 {
        width: 45%;
    }

    /* Cookie banner - taille texte */
    #cookie-banner > div > div {
        gap: 15px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE — 768px
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── Fix background-attachment: fixed pour iOS Safari ── */
    .devenir-membre-page,
    .hero-devenir,
    .contact-page,
    .banner-section,
    .breadcrumb-area {
        background-attachment: scroll !important;
    }

    /* ── Header ── */
    .header__content__venor {
        padding: 15px 55px 15px 15px !important;
    }

    /* ── About section images (home) ── */
    .item-about-row {
        flex-direction: column;
        align-items: center;
    }

    .item-about-img1,
    .item-about-img2 {
        width: 100%;
        float: none;
        padding: 0 5px;
        text-align: center;
    }

    .item-about-img2 {
        margin-bottom: 10px;
    }

    .about-img1 img,
    .about-img2 img,
    .about-img3 img {
        max-height: none;
        width: 100%;
        max-width: 260px;
    }

    /* ── Footer ── */
    .footer-section .footer-left {
        padding: 50px 20px;
    }

    .footer-section .footer-right {
        padding: 40px 20px 60px;
        padding-left: 20px;
    }

    .footer-section .inner h4 {
        font-size: 36px;
        line-height: 44px;
    }

    .footer-section .copyright-text {
        position: static;
        margin-top: 25px;
    }

    /* ── Blog home - 1 colonne ── */
    .blog-section .row > .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* ── Typed section ── */
    .typed-section .col-md-8 {
        text-align: center;
    }

    .typed-section {
        padding: 30px 0;
    }

    /* ── Cookie banner ── */
    #cookie-banner {
        padding: 16px 16px;
    }

    #cookie-banner > div > div:first-child {
        min-width: 0;
        width: 100%;
    }

    #cookie-banner > div > div:last-child {
        width: 100%;
        justify-content: center;
    }

    /* ── Tables ── */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ── Prevent wide embeds from overflowing ── */
    iframe,
    .wp-has-aspect-ratio iframe {
        max-width: 100%;
    }

    /* ── Search results ── */
    .search-result-grid {
        grid-template-columns: 1fr !important;
    }

    /* ── Pricing boxes ── */
    .venor-price-box {
        max-width: 100%;
    }

    /* ── WhatsApp button ── */
    a.chat__trigger-quin.logo-chat {
        right: 15px;
        bottom: 75px;
        width: 50px;
        height: 50px;
    }

    a.chat__trigger-quin.logo-chat img {
        width: 50px;
        height: 50px;
    }

    /* ── Progress wrap ── */
    .progress-wrap {
        bottom: 20px;
        right: 15px;
        width: 38px;
        height: 38px;
    }

    /* ── Services slider cards ── */
    .card-inner-row {
        flex-direction: column;
    }

    /* ── Banner section ── */
    .banner-section {
        padding: 100px 0 60px;
        background-size: cover;
        background-position: center center;
    }

    h1.banner-title {
        font-size: 32px;
        line-height: 42px;
    }

    /* ── Portfolio slider nav arrows ── */
    .portfolio-slider .owl-nav button.owl-prev {
        left: 0;
    }

    .portfolio-slider .owl-nav button.owl-next {
        right: 0;
    }

    /* ── Fun facts col-md-3 ── */
    .row.fun-facts-timer > .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* ── Members grid ── */
    .members-section .col-md-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* ── Post body images ── */
    .post-body img {
        max-width: 100%;
        height: auto;
    }
}

/* ═══════════════════════════════════════════════════════════════
   SMALL MOBILE — 576px
═══════════════════════════════════════════════════════════════ */
@media (max-width: 576px) {

    /* ── Container padding ── */
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* ── About images ── */
    .about-img1 img,
    .about-img2 img,
    .about-img3 img {
        max-width: 200px;
    }

    /* ── Blog home articles ── */
    .blog-section article.blog-single-post {
        margin-bottom: 20px;
    }

    /* ── Fun facts 1 col ── */
    .row.fun-facts-timer > .col-md-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* ── Members grid 1 col ── */
    .members-section .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* ── Footer ── */
    .footer-section .inner h4 {
        font-size: 30px;
        line-height: 38px;
    }

    /* ── Slider content ── */
    .slider-content {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* ── Cookie banner ── */
    #cookie-banner > div > div > div:first-child {
        gap: 10px;
    }

    /* ── Portfolio slider ── */
    .portfolio-slider .owl-nav button {
        display: none;
    }

    /* ── Blog sidebar ── */
    .blog-page-section .col-md-4 {
        margin-top: 30px;
    }

    /* ── Headings ── */
    .about-heading2-home {
        font-size: 32px;
        line-height: 40px;
    }

    h3.fun-facts-heading1 {
        font-size: 30px;
        line-height: 38px;
    }

    .testimonial-section .container > h3 {
        font-size: 30px;
        line-height: 38px;
    }

    /* ── Blog list page ── */
    .blog-page-section .col-md-8,
    .blog-page-section .col-md-4 {
        padding-right: 15px !important;
        padding-left: 15px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   VERY SMALL — 480px
═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

    /* ── Header padding ── */
    .header__content__venor {
        padding: 12px 50px 12px 12px !important;
    }

    /* ── Logo ── */
    .header__logo img {
        height: 32px;
    }

    /* ── Sidebar menu ── */
    .fixed-sidebar-menu,
    .header7 .fixed-sidebar-menu {
        width: 100% !important;
        right: -100% !important;
    }

    .menu-open .header7 .fixed-sidebar-menu {
        right: 0 !important;
    }

    .fixed-sidebar-menu.open {
        width: 100% !important;
    }

    /* ── Footer ── */
    .footer-section .footer-left {
        padding: 40px 15px;
    }

    .footer-section .footer-right {
        padding: 30px 15px 50px;
        padding-left: 15px;
    }

    .footer-section .inner h4 {
        font-size: 26px;
        line-height: 34px;
    }

    .footer-widget {
        margin-bottom: 30px;
    }

    /* ── Typed section ── */
    .typed-section h4 {
        font-size: 22px;
        line-height: 30px;
    }

    /* ── Action buttons ── */
    .header__action-btn--start-project {
        display: none;
    }

    /* ── About images ── */
    .item-about-img1,
    .item-about-img2 {
        display: flex;
        justify-content: center;
    }

    /* ── Banner ── */
    h1.banner-title {
        font-size: 26px;
        line-height: 36px;
    }

    .banner-desc {
        font-size: 14px;
    }

    /* ── Breadcrumb ── */
    .breadcrumb-area {
        padding: 40px 0;
    }

    /* ── Blog ── */
    .blog-page-section {
        padding: 60px 0 20px;
    }

    /* ── Testimonial ── */
    .testimonial-section {
        padding: 40px 0;
    }
}

/* ═══════════════════════════════════════════════════════════════
   EXTRA SMALL — 360px
═══════════════════════════════════════════════════════════════ */
@media (max-width: 360px) {

    /* ── Logo ── */
    .header__logo img {
        height: 28px;
    }

    /* ── Header ── */
    .header__content__venor {
        padding: 10px 48px 10px 10px !important;
    }

    /* ── Slider ── */
    .slider-content h1 {
        font-size: 28px !important;
        line-height: 36px !important;
    }

    .slider-content h2 {
        font-size: 24px !important;
        line-height: 32px !important;
    }

    /* ── Footer ── */
    .footer-section .inner h4 {
        font-size: 22px;
        line-height: 30px;
    }

    /* ── Cookie banner ── */
    #cookie-banner {
        padding: 12px;
    }

    #cookie-banner p {
        font-size: 12px !important;
    }

    /* ── Typed section ── */
    .typed-section h4 {
        font-size: 18px;
        line-height: 26px;
    }

    /* ── About headings ── */
    .about-heading2-home {
        font-size: 28px;
        line-height: 36px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   UTILITIES — impression mobile-friendly
═══════════════════════════════════════════════════════════════ */

/* Évite que les boutons débordent */
@media (max-width: 400px) {
    .btn,
    a.btn,
    button.btn {
        white-space: normal;
        word-break: break-word;
    }

    .cta-reseau-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .cta-reseau-buttons a {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

/* ═══════════════════════════════════════════════════════════════
   PAGES LÉGALES — corrections 412px
   (CGU, CGS, RGPD, Informations Légales)
═══════════════════════════════════════════════════════════════ */

/* ── Badges / pills longs dans les heroes ────────────────────
   Problem: display:inline-flex + letter-spacing:2px + long text
   → width can exceed 380px on a 412px screen               */
@media (max-width: 480px) {

    /* Hero badge — CGU / CGS / IL */
    .cgu-hero-badge,
    .cgs-hero-badge,
    .il-hero-badge {
        white-space: normal;
        text-align: center;
        justify-content: center;
        flex-wrap: wrap;
        letter-spacing: 1px;
        font-size: 0.68rem;
        padding: 6px 14px;
        max-width: 100%;
    }

    /* Hero eyebrow — RGPD */
    .rgpd-hero-eyebrow {
        white-space: normal;
        text-align: center;
        justify-content: center;
        flex-wrap: wrap;
        letter-spacing: 1px;
        font-size: 0.68rem;
        padding: 5px 12px;
        max-width: 100%;
    }

    /* ── RGPD hero inner padding ── */
    .rgpd-hero-inner {
        padding: 0 15px;
    }

    /* ── RGPD hero icon ── */
    .rgpd-hero-icon-wrap {
        width: 75px;
        height: 75px;
        font-size: 2rem;
        border-radius: 20px;
    }

    /* ── RGPD hero title ── */
    .rgpd-hero-title {
        font-size: 2rem !important;
    }

    /* ── RGPD layout inner padding ── */
    .rgpd-layout {
        padding: 30px 15px 60px !important;
    }

    /* ── RGPD contact section ── */
    .rgpd-contact-inner {
        padding: 0 15px !important;
    }
    .rgpd-contact-title {
        font-size: 1.8rem !important;
    }
    .rgpd-contact-grid {
        grid-template-columns: 1fr !important;
    }

    /* ── RGPD droits & def grids → 1 col ── */
    .rgpd-droits-grid {
        grid-template-columns: 1fr !important;
    }
    .rgpd-def-grid {
        grid-template-columns: 1fr !important;
    }

    /* ── IL — marques grid → 1 col ── */
    .il-marques-grid {
        grid-template-columns: 1fr !important;
    }

    /* ── IL — domain items flex ── */
    .il-domain-item {
        gap: 10px;
    }
    .il-domain-url {
        word-break: break-all;
        overflow-wrap: break-word;
    }

    /* ── Section headers — reduce icon size ── */
    .cgu-section-num,
    .cgs-section-num,
    .rgpd-section-num {
        width: 38px;
        height: 38px;
        font-size: 0.85rem;
        flex-shrink: 0;
    }

    /* ── Section header gaps ── */
    .cgu-section-header,
    .cgs-section-header,
    .rgpd-section-header {
        gap: 12px;
    }

    /* ── Word-break on all legal page content ── */
    /* min-width:0 fixes CSS Grid item expanding beyond 1fr due to min-width:auto */
    .cgu-content,
    .cgs-content,
    .il-main,
    .rgpd-content {
        word-break: break-word;
        overflow-wrap: break-word;
        min-width: 0;
    }

    /* ── Zero commission bloc (CGS) ── */
    .cgs-zero-commission {
        flex-direction: column;
        text-align: center;
        gap: 14px;
    }

    /* ── Hero meta items → column ── */
    .cgu-hero-meta,
    .cgs-hero-meta,
    .il-hero-meta {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
}

/* ── Extra small (412px and below) ──────────────────────────── */
@media (max-width: 412px) {

    /* ── Reduce hero padding ── */
    .cgu-hero,
    .cgs-hero {
        padding: 80px 12px 40px !important;
    }

    .il-hero {
        padding: 80px 12px 40px !important;
    }

    .rgpd-hero {
        padding: 80px 0 50px !important;
    }

    /* ── RGPD hero inner ── */
    .rgpd-hero-inner {
        padding: 0 12px;
    }

    /* ── IL layout wrapper ── */
    .il-layout {
        padding: 0 12px !important;
    }

    /* ── CGU / CGS content ── */
    .cgu-content {
        padding: 20px 12px 40px !important;
    }
    .cgs-content {
        padding: 20px 12px 40px !important;
    }

    /* ── RGPD layout ── */
    .rgpd-layout {
        padding: 24px 12px 48px !important;
    }

    /* ── Hero titles ── */
    .cgu-hero h1,
    .cgs-hero h1 {
        font-size: 1.4rem !important;
        line-height: 1.3 !important;
    }

    .il-hero h1 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }

    .rgpd-hero-title {
        font-size: 1.75rem !important;
    }

    /* ── Hero sub-text ── */
    .cgu-hero-sub,
    .cgs-hero-sub,
    .il-hero-sub {
        font-size: 0.85rem !important;
    }

    /* ── Hero badge further reduce ── */
    .cgu-hero-badge,
    .cgs-hero-badge {
        font-size: 0.62rem !important;
        letter-spacing: 0.5px !important;
        padding: 5px 10px !important;
    }

    /* ── IL section num ── */
    .rgpd-section-num {
        width: 34px;
        height: 34px;
        font-size: 1rem;
    }

    /* ── RGPD section title ── */
    .rgpd-section-title {
        font-size: 1.3rem !important;
    }

    /* ── IL section title ── */
    .il-section-title {
        font-size: 1.2rem !important;
    }

    /* ── Card paddings ── */
    .rgpd-card {
        padding: 16px 14px;
    }
    .il-card {
        padding: 16px 16px;
    }
    .cgu-callout,
    .cgs-callout {
        padding: 12px 14px;
        gap: 10px;
    }

    /* ── RGPD toc card ── */
    .rgpd-toc-card {
        padding: 16px 14px;
    }
    .rgpd-toc-list {
        display: flex !important;
        flex-direction: column !important;
    }

    /* ── Footer legal info ── */
    .il-footer-legal,
    .cgu-footer-legal,
    .cgs-footer-legal {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
}