/*
 * COLONIAL CLUB — Responsive Mobile Global V1.0.0
 * Chargé après app.css.
 * Toutes les règles sont limitées à .cc-responsive et aux petits écrans.
 */

.cc-responsive,
.cc-responsive body {
    max-width: 100%;
}

.cc-responsive body {
    overflow-x: hidden;
}

.cc-responsive img,
.cc-responsive svg,
.cc-responsive video,
.cc-responsive canvas {
    max-width: 100%;
    height: auto;
}

.cc-responsive input,
.cc-responsive select,
.cc-responsive textarea,
.cc-responsive button {
    max-width: 100%;
    box-sizing: border-box;
}

.cc-responsive input,
.cc-responsive select,
.cc-responsive textarea {
    min-width: 0;
}

.cc-responsive .table-wrapper,
.cc-responsive .table-scroll,
.cc-responsive .table-responsive,
.cc-responsive .participant-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ==========================================================
   TABLETTE
   ========================================================== */
@media (max-width: 1100px) {
    .cc-responsive main,
    .cc-responsive .container,
    .cc-responsive .page-container,
    .cc-responsive .content,
    .cc-responsive .content-shell {
        max-width: 100%;
    }

    .cc-responsive .two-column-layout,
    .cc-responsive .three-column-layout,
    .cc-responsive .dashboard-grid,
    .cc-responsive .card-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* ==========================================================
   MOBILE
   ========================================================== */
@media (max-width: 760px) {
    .cc-responsive body {
        font-size: 16px;
    }

    .cc-responsive main,
    .cc-responsive .container,
    .cc-responsive .page-container,
    .cc-responsive .content,
    .cc-responsive .content-shell {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }

    /* En-tête et navigation */
    .cc-responsive .topbar,
    .cc-responsive .site-header,
    .cc-responsive .main-header,
    .cc-responsive header.site-header,
    .cc-responsive header.topbar {
        width: 100%;
        max-width: 100%;
        padding-left: 12px !important;
        padding-right: 12px !important;
        box-sizing: border-box;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .cc-responsive .main-nav,
    .cc-responsive .site-nav,
    .cc-responsive .nav-links,
    .cc-responsive .topbar nav,
    .cc-responsive header nav {
        width: 100%;
        max-width: 100%;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        overflow: visible !important;
    }

    .cc-responsive .main-nav a,
    .cc-responsive .site-nav a,
    .cc-responsive .nav-links a,
    .cc-responsive .topbar nav a,
    .cc-responsive header nav a {
        min-width: 0 !important;
        padding: 9px 11px !important;
        font-size: .92rem !important;
        white-space: nowrap;
        flex: 0 1 auto;
    }

    /* Titres */
    .cc-responsive h1 {
        font-size: clamp(1.75rem, 8vw, 2.45rem) !important;
        line-height: 1.05 !important;
        overflow-wrap: anywhere;
    }

    .cc-responsive h2 {
        font-size: clamp(1.3rem, 6vw, 1.8rem) !important;
        line-height: 1.12 !important;
        overflow-wrap: anywhere;
    }

    .cc-responsive .page-heading,
    .cc-responsive .page-header,
    .cc-responsive .section-heading {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .cc-responsive .page-heading > *,
    .cc-responsive .page-header > *,
    .cc-responsive .section-heading > * {
        min-width: 0;
        max-width: 100%;
    }

    /* Cartes */
    .cc-responsive .form-card,
    .cc-responsive .panel-card,
    .cc-responsive .public-status-card,
    .cc-responsive .section-block,
    .cc-responsive .choice-panel,
    .cc-responsive .card,
    .cc-responsive .panel {
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
        border-radius: 18px !important;
    }

    /* Grilles et formulaires */
    .cc-responsive .form-grid,
    .cc-responsive .form-grid.two-columns,
    .cc-responsive .form-grid.three-columns,
    .cc-responsive .two-columns,
    .cc-responsive .three-columns,
    .cc-responsive .two-column-layout,
    .cc-responsive .three-column-layout,
    .cc-responsive .dashboard-grid,
    .cc-responsive .need-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    .cc-responsive form,
    .cc-responsive fieldset,
    .cc-responsive label {
        min-width: 0;
        max-width: 100%;
    }

    .cc-responsive input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    .cc-responsive select,
    .cc-responsive textarea {
        width: 100% !important;
        min-width: 0 !important;
        font-size: 16px !important;
    }

    .cc-responsive textarea {
        resize: vertical;
    }

    .cc-responsive .button,
    .cc-responsive button,
    .cc-responsive input[type="submit"] {
        touch-action: manipulation;
    }

    .cc-responsive .form-stack > .button,
    .cc-responsive .form-card > .button,
    .cc-responsive .public-action-panel > .button,
    .cc-responsive .page-heading > .button,
    .cc-responsive .page-header > .button {
        width: 100% !important;
        justify-content: center !important;
        text-align: center;
    }

    /* Détails */
    .cc-responsive .detail-list > div,
    .cc-responsive dl.detail-list > div {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 3px !important;
    }

    .cc-responsive .detail-list dd {
        margin-left: 0 !important;
        overflow-wrap: anywhere;
    }

    /* Tableaux : scroll interne, jamais toute la page */
    .cc-responsive main table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: .88rem;
    }

    .cc-responsive main th,
    .cc-responsive main td {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* Fichiers */
    .cc-responsive input[type="file"] {
        width: 100% !important;
    }

    /* ======================================================
       CALENDRIER PUBLIC DE LOCATION
       7 colonnes toujours visibles, sans scroll horizontal
       ====================================================== */
    .cc-responsive #rental-availability-calendar {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box;
    }

    .cc-responsive #rental-availability-calendar [data-calendar-grid] {
        display: grid !important;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        gap: 4px !important;
        overflow: visible !important;
        padding: 0 !important;
        box-sizing: border-box;
    }

    .cc-responsive #rental-availability-calendar .rental-calendar-weekday {
        min-width: 0 !important;
        width: auto !important;
        padding: 6px 0 !important;
        text-align: center !important;
        font-size: .68rem !important;
        line-height: 1 !important;
        letter-spacing: .02em !important;
        overflow: hidden;
    }

    .cc-responsive #rental-availability-calendar .rental-calendar-blank {
        min-width: 0 !important;
        width: auto !important;
        min-height: 48px !important;
    }

    .cc-responsive #rental-availability-calendar .rental-calendar-day {
        position: relative;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 52px !important;
        height: 52px !important;
        aspect-ratio: auto !important;
        padding: 5px !important;
        margin: 0 !important;
        border-radius: 10px !important;
        box-sizing: border-box;
        overflow: hidden !important;
        text-align: left !important;
    }

    .cc-responsive #rental-availability-calendar .rental-calendar-day-number {
        display: block;
        font-size: 1rem !important;
        line-height: 1 !important;
        font-weight: 800 !important;
    }

    .cc-responsive #rental-availability-calendar .rental-calendar-day-events {
        display: none !important;
    }

    .cc-responsive #rental-availability-calendar .rental-calendar-event,
    .cc-responsive #rental-availability-calendar .rental-calendar-more {
        display: none !important;
    }

    .cc-responsive #rental-availability-calendar [data-calendar-previous],
    .cc-responsive #rental-availability-calendar [data-calendar-next] {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        border-radius: 12px !important;
        flex: 0 0 44px !important;
    }

    .cc-responsive #rental-availability-calendar [data-calendar-title] {
        min-width: 0 !important;
        font-size: 1.15rem !important;
        line-height: 1.1 !important;
        text-align: center !important;
    }

    .cc-responsive #rental-availability-calendar .rental-calendar-toolbar,
    .cc-responsive #rental-availability-calendar .calendar-toolbar,
    .cc-responsive #rental-availability-calendar [class*="calendar-navigation"] {
        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr) 44px !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .cc-responsive #rental-availability-calendar .rental-calendar-legend,
    .cc-responsive #rental-availability-calendar [class*="calendar-legend"] {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px 10px !important;
        font-size: .82rem !important;
    }

    .cc-responsive #rental-availability-calendar .rental-calendar-selection {
        font-size: .92rem !important;
    }
}

/* ==========================================================
   PETITS MOBILES
   ========================================================== */
@media (max-width: 430px) {
    .cc-responsive main,
    .cc-responsive .container,
    .cc-responsive .page-container,
    .cc-responsive .content,
    .cc-responsive .content-shell {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .cc-responsive .form-card,
    .cc-responsive .panel-card,
    .cc-responsive .public-status-card,
    .cc-responsive .section-block,
    .cc-responsive .choice-panel,
    .cc-responsive .card,
    .cc-responsive .panel {
        padding: 13px !important;
        border-radius: 15px !important;
    }

    .cc-responsive #rental-availability-calendar [data-calendar-grid] {
        gap: 3px !important;
    }

    .cc-responsive #rental-availability-calendar .rental-calendar-day {
        height: 47px !important;
        min-height: 47px !important;
        padding: 4px !important;
        border-radius: 8px !important;
    }

    .cc-responsive #rental-availability-calendar .rental-calendar-blank {
        min-height: 47px !important;
    }

    .cc-responsive #rental-availability-calendar .rental-calendar-day-number {
        font-size: .92rem !important;
    }

    .cc-responsive #rental-availability-calendar .rental-calendar-weekday {
        font-size: .62rem !important;
    }
}