/* =====================================================
   RESPONSIVE.CSS — Tous les breakpoints centralisés
   À inclure EN DERNIER dans le HTML, après tous les
   autres fichiers CSS.

   Breakpoints utilisés :
   - Desktop large  : max-width 1100px
   - Tablette large : max-width 992px
   - Tablette       : max-width 900px
   - Tablette small : max-width 768px
   - Mobile         : max-width 600px
   - Mobile small   : max-width 550px
   - Mobile xs      : max-width 480px
   ===================================================== */

   /* ── Entre 1100px et 1580px : cartes en 2 colonnes ── */
@media (min-width: 1101px) and (max-width: 1850px) {
    .items-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem;
    }
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }

    .item-card .bien-actions,
    .item-card .card-actions,
    .item-card .btn-group,
    .card-footer,
    .item-actions {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 0.4rem !important;
        width: 100% !important;
    }

    .item-card .bien-actions .btn-action,
    .item-card .card-actions .btn-action,
    .item-card .bien-actions a,
    .item-card .bien-actions button,
    .item-card .bien-actions form,
    .item-card .bien-actions form button,
    .card-footer a,
    .card-footer button,
    .card-footer form button,
    .item-actions a,
    .item-actions button,
    .item-actions form button {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 1100px) {

    .items-grid {
        grid-template-columns: 1fr !important;
        gap: 0.85rem;
    }
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .item-card .bien-actions,
    .item-card .card-actions,
    .item-card .btn-group,
    .card-footer,
    .item-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.4rem !important;
        width: 100% !important;
    }

    .item-card .bien-actions .btn-action,
    .item-card .card-actions .btn-action,
    .item-card .bien-actions a,
    .item-card .bien-actions button,
    .item-card .bien-actions form,
    .item-card .bien-actions form button,
    .card-footer a,
    .card-footer button,
    .card-footer form,
    .card-footer form button,
    .item-actions a,
    .item-actions button,
    .item-actions form,
    .item-actions form button {
        width: 100% !important;
        flex: unset !important;
        justify-content: center !important;
        text-align: center !important;
        margin: 0 !important;
    }

}

/* ═══════════════════════════════════════════════════════════════
   992px — SIDEBAR (base.css)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
    .items-grid {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }
    .sidebar {
        position: fixed;
        left: -260px;
        top: 0;
        width: 260px;
        height: 100dvh;
        z-index: 1000;
        transition: left 0.3s ease;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .sidebar.open {
        left: 0;
    }

    .sidebar-overlay {
        display: block;
    }
}

@media (min-width: 993px) {
    .sidebar-toggle {
        display: none;
    }

    .sidebar-overlay {
        display: none !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   900px — PAGES / LISTES / EDL / FORMULAIRES
═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

    .item-card .bien-actions,
    .item-card .card-actions,
    .item-card .btn-group,
    .card-footer,
    .item-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.4rem !important;
        width: 100% !important;
    }

    .item-card .bien-actions .btn-action,
    .item-card .card-actions .btn-action,
    .item-card .bien-actions a,
    .item-card .bien-actions button,
    .item-card .bien-actions form,
    .item-card .bien-actions form button,
    .card-footer a,
    .card-footer button,
    .card-footer form,
    .card-footer form button,
    .item-actions a,
    .item-actions button,
    .item-actions form,
    .item-actions form button {
        width: 100% !important;
        flex: unset !important;
        justify-content: center !important;
        text-align: center !important;
        margin: 0 !important;
    }

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

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

    .detail-actions {
        flex-wrap: wrap;
    }

    /* ── pages.css ── */
    .items-grid {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .page-header .btn-action {
        width: 100%;
        justify-content: center;
    }

    /* ── form.css ── */
    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-panel.full-width {
        grid-column: 1;
    }

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

    .form-row-grid.col-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .form-group.span-2 {
        grid-column: span 1;
    }

    /* ── edl.css ── */
    .edl-items-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

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

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


/* ═══════════════════════════════════════════════════════════════
   768px — AUTH / EDL RECAP TABLE
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .welcome-banner { flex-direction: column; text-align: center; }

    /* ── auth.css ── */
    .login-wrapper {
        flex-direction: column;
        overflow-y: auto;
        height: auto;
    }

    .login-left {
        flex: none;
        min-height: 240px;
        padding: 2rem;
        order: 2;
    }

    .left-content {
        padding: 1rem;
        text-align: center;
    }

    .left-content h1 {
        font-size: 1.8rem;
    }

    .brand-logo {
        margin: 0 auto 1rem;
    }

    .features {
        align-items: center;
    }

    .login-right {
        flex: none;
        padding: 2.5rem 1.5rem;
        min-height: auto;
        order: 1;
    }

    /* ── edl.css — tableau récap ── */
    .recap-table thead th:last-child,
    .recap-table tbody td:last-child,
    .recap-table tfoot td:last-child {
        display: none;
    }
}


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

    /* ════════════════════════════
       base.css — Layout général
    ════════════════════════════ */
    .main-content {
        padding: 1rem 0.75rem;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
        margin-bottom: 1.25rem;
    }

    .page-header .btn-action {
        width: 100%;
        justify-content: center;
    }

    /* ════════════════════════════
       pages.css — Listes & Cards
    ════════════════════════════ */
    .items-grid {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }

    .item-card .bien-actions,
    .item-card .card-actions,
    .item-card .btn-group,
    .card-footer,
    .item-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.4rem !important;
        width: 100% !important;
    }

    .item-card .bien-actions .btn-action,
    .item-card .card-actions .btn-action,
    .item-card .bien-actions a,
    .item-card .bien-actions button,
    .item-card .bien-actions form,
    .item-card .bien-actions form button,
    .card-footer a,
    .card-footer button,
    .card-footer form,
    .card-footer form button,
    .item-actions a,
    .item-actions button,
    .item-actions form,
    .item-actions form button {
        width: 100% !important;
        flex: unset !important;
        justify-content: center !important;
        text-align: center !important;
        margin: 0 !important;
    }

    /* Search bar */
    .search-bar {
        flex-direction: column;
        gap: 0.5rem;
    }

    .search-wrapper {
        width: 100%;
    }

    .search-input {
        width: 100%;
        font-size: 1rem; /* évite le zoom iOS */
    }

    /* Filtres secondaires */
    .search-filters {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .search-select,
    .search-select-sm {
        max-width: 100%;
        width: 100%;
        font-size: 1rem; /* évite le zoom iOS */
    }

    /* Surface min/max */
    .search-surface {
        width: 100%;
        justify-content: space-between;
    }

    .search-input-sm {
        flex: 1;
        width: auto;
        font-size: 1rem; /* évite le zoom iOS */
    }

    /* Pagination */
    .pagination {
        flex-wrap: wrap;
        gap: 0.3rem;
        justify-content: center;
    }

    .page-btn {
        min-width: 32px;
        height: 32px;
        font-size: 0.8rem;
        padding: 0 0.4rem;
    }

    /* ════════════════════════════
       detail.css — Détail fiche
    ════════════════════════════ */

    .detail-panel {
        padding: 1rem;
    }

    .detail-actions {
        width: 100%;
    }

    .detail-actions .btn-action {
        flex: 1;
        justify-content: center;
        font-size: 0.8rem;
        padding: 0.5rem 0.75rem;
    }

    .edl-card {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.75rem;
    }

    .edl-type-badge {
        align-items: center;
    }

    .edl-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }

    .edl-actions {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .btn-edl-view,
    .btn-edl-edit {
        flex: 1;
        justify-content: center;
        padding: 0.45rem 0.5rem;
    }

    /* Info rows */
    .info-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
        padding: 0.5rem 0;
    }

    .info-value {
        text-align: left;
        word-break: break-word;
        overflow-wrap: break-word;
        white-space: pre-wrap;
    }

    /* Biens associés */
    .bien-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .bien-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        font-size: 1rem;
    }

    .bien-infos {
        width: 100%;
    }

    .bien-adresse {
        white-space: normal;
        overflow-wrap: break-word;
    }

    .bien-actions {
        width: 100%;
        display: flex;
        gap: 0.5rem;
    }

    .bien-actions .btn-action,
    .bien-actions form button {
        flex: 1;
        justify-content: center;
        text-align: center;
    }

    /* Association form */
    .association-form {
        flex-direction: column;
        align-items: stretch;
    }

    .association-select {
        min-width: unset;
        width: 100%;
    }

    /* ════════════════════════════
       edl.css — EDL
    ════════════════════════════ */
    .edl-items-grid {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }

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

    /* Header EDL */
    .edl-header {
        padding: 1.5rem 1rem;
        margin-bottom: 1rem;
    }

    .edl-header h1 {
        font-size: 1.6rem;
    }

    /* Form rows dans EDL */
    .form-row-3,
    .form-row-2 {
        grid-template-columns: 1fr;
    }

    /* Observations */
    .observation-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .obs-fields {
        flex-direction: column;
        gap: 0.5rem;
    }

    /* Progress wizard */
    .progress-wizard {
        padding: 1rem 0.75rem;
        gap: 0;
    }

    .progress-step {
        min-width: 48px;
    }

    .progress-step span {
        font-size: 0.65rem;
    }

    .step-circle {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    .progress-line {
        min-width: 12px;
    }

    /* Signatures */
    .signature-badge i {
        font-size: 1.2rem;
    }

    .btn-group-actions {
        display: flex;
        gap: 0.75rem;
        flex-wrap: wrap;
    }

    .action-buttons {
        display: flex;
        gap: 0.75rem;
        margin-top: 1.5rem;
        flex-wrap: wrap;
    }

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

    /* Recap grid */
    .recap-grid {
        grid-template-columns: 1fr;
    }

    /* ════════════════════════════
       dev.css — Debug
    ════════════════════════════ */
    .dev-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .dev-filters-row {
        flex-direction: column;
        align-items: stretch;
    }

    .dev-header {
        flex-direction: column;
        gap: 0.75rem;
    }
}


/* ═══════════════════════════════════════════════════════════════
   550px — FORMULAIRES PETITS ÉCRANS (form.css)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 550px) {
    .form-row-grid.col-2,
    .form-row-grid.col-3 {
        grid-template-columns: 1fr;
    }

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


/* ═══════════════════════════════════════════════════════════════
   480px — PAGES ERREUR (errors.css)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .error-card {
        padding: 2rem 1.5rem;
    }

    .error-code {
        font-size: 3rem;
    }

    .error-actions {
        flex-direction: column;
        width: 100%;
    }

    .error-btn {
        justify-content: center;
    }
}