/* ==========================================================================
   SISPE - Couche responsive (chargée après Bootstrap et les styles de page)
   Points de rupture Bootstrap : 576 / 768 / 992 / 1200
   ========================================================================== */

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, svg, video, canvas { max-width: 100%; height: auto; }
body { overflow-x: hidden; }
pre, code { white-space: pre-wrap; word-break: break-word; }
.table-responsive { -webkit-overflow-scrolling: touch; }

/* Confort tactile : cibles de 44px minimum sur écrans tactiles */
@media (pointer: coarse) {
    .btn:not(.btn-sm):not(.btn-xs),
    .form-control,
    .form-select { min-height: 44px; }
    .btn-sm { min-height: 36px; }
    .form-check-input { width: 1.25em; height: 1.25em; }
}

/* Rangées de boutons d'actions : passage à la ligne quand la largeur manque (tablette) */
.d-flex.d-md-flex, .d-grid.d-md-flex, .btn-toolbar { flex-wrap: wrap; }
.d-grid.d-md-flex > .btn { flex: 0 1 auto; }

/* Focus clavier visible */
:focus-visible { outline: 3px solid rgba(212, 165, 116, 0.75); outline-offset: 2px; }

/* ---------- Tablette et en dessous (< 992px) ---------- */
@media (max-width: 991.98px) {
    .navbar .navbar-collapse {
        background: rgba(0, 0, 0, 0.12);
        border-radius: 10px;
        margin-top: 0.75rem;
        padding: 0.5rem 0.75rem;
    }
    .navbar-nav .nav-link { margin: 0.15rem 0; padding: 0.65rem 0.75rem; }
    .navbar .dropdown-menu { border: 0; box-shadow: none; background: rgba(255, 255, 255, 0.96); }
    .footer-content { gap: 1.5rem; }
    .display-4 { font-size: 2.4rem; }
}

/* ---------- Mobile (< 768px) ---------- */
@media (max-width: 767.98px) {
    /* Espaces : on récupère la largeur perdue dans les conteneurs imbriqués */
    main { padding: 1rem 0; }
    .content-section { padding: 0.75rem; border-radius: 10px; margin-bottom: 1rem; }
    .container, .container-fluid, .container-lg { padding-left: 0.75rem; padding-right: 0.75rem; }
    .content-section .container,
    .content-section .container-fluid,
    .content-section .container-lg { padding-left: 0; padding-right: 0; }
    .card-body { padding: 1rem; }
    .card-header { padding: 0.75rem 1rem; }
    .card-header h5 { font-size: 1.05rem; }

    /* Typographie */
    h1, .h1 { font-size: 1.5rem; }
    h2, .h2 { font-size: 1.3rem; }
    h3, .h3 { font-size: 1.15rem; }
    .display-4 { font-size: 2rem; }
    .lead { font-size: 1.05rem; }

    /* Rangées d'en-tête (titre + boutons) : passage à la ligne */
    .d-flex.justify-content-between { flex-wrap: wrap; gap: 0.75rem; }
    .d-flex.gap-2, .d-flex.gap-3 { flex-wrap: wrap; }
    .d-grid.d-md-flex { display: grid !important; }
    .btn-lg { padding: 0.6rem 1rem; font-size: 1rem; }

    /* Formulaires : boutons d'action en pleine largeur */
    form .d-flex.gap-2 > .btn,
    form .d-flex.gap-2 > a.btn { flex: 1 1 100%; }
    .form-label { margin-bottom: 0.35rem; }

    /* Alertes avec boutons : empilées */
    .alert.d-flex { flex-direction: column; gap: 0.75rem; }
    .alert .d-flex.gap-2 { width: 100%; }
    .alert .d-flex.gap-2 form { flex: 1 1 auto; }
    .alert .d-flex.gap-2 form .btn { width: 100%; }

    /* Cartes de statistiques : plus compactes */
    .card.text-white .card-body h2 { font-size: 1.6rem; }
    .progress { height: 28px !important; }

    /* Pagination compacte */
    .pagination { flex-wrap: wrap; justify-content: center; }
    .page-link { padding: 0.4rem 0.7rem; }

    /* Pied de page */
    .footer-content { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
    footer { padding: 1.5rem 0; }

    /* ----- Tableaux -> cartes empilées (ajoutées par sispe.js : .table-stack) ----- */
    .table-stack thead { display: none; }
    .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
    .table-stack tbody tr {
        margin: 0 0 0.85rem;
        padding: 0.35rem 0.85rem;
        background: #fff;
        border: 1px solid #ece4d6;
        border-radius: 10px;
        box-shadow: 0 1px 4px rgba(139, 111, 71, 0.08);
    }
    .table-stack tbody tr:nth-of-type(odd) > * { background-color: transparent; }
    .table-stack td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: 0.5rem 0;
        border: 0;
        border-bottom: 1px dashed #efe7d8;
        text-align: right;
        font-size: 0.92rem;
    }
    .table-stack td:last-child { border-bottom: 0; }
    .table-stack td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 38%;
        max-width: 42%;
        text-align: left;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.4px;
        text-transform: uppercase;
        color: #8B6F47;
    }
    .table-stack td:not([data-label]) { display: block; text-align: center; }
    .table-stack .td-content { flex: 1 1 auto; min-width: 0; text-align: right; word-break: break-word; }
    .table-stack .td-content > form, .table-stack .td-content > a.btn, .table-stack .td-content > .btn { margin-left: 0.25rem; margin-bottom: 0.25rem; }
    /* Les tableaux empilés n'ont plus besoin de défiler */
    .table-responsive:has(> .table-stack) { overflow: visible; }
    .table-stack.table-hover tbody tr:hover > * { --bs-table-accent-bg: transparent; }
}

/* ---------- Petit mobile (< 576px) ---------- */
@media (max-width: 575.98px) {
    .footer-content { grid-template-columns: 1fr; }
    .navbar-brand { font-size: 1.2rem; }
    .navbar-brand span { max-width: 55vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .modal-dialog { margin: 0.5rem; }
}

/* ---------- Bouton « retour en haut » (sispe.js) ---------- */
#backToTop {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    background: linear-gradient(135deg, #8B6F47 0%, #6B5538 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1040;
    cursor: pointer;
}
#backToTop:hover { background: linear-gradient(135deg, #A0826D 0%, #8B6F47 100%); }

/* ---------- Indicateur d'envoi de formulaire ---------- */
.btn-loading { pointer-events: none; opacity: 0.85; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

@media print {
    #backToTop, .navbar, footer { display: none !important; }
    body { background: #fff; }
}

/* ---------- Icônes de titres (Font Awesome) ---------- */
h1 > .fas:first-child, h2 > .fas:first-child { color: #8B6F47; margin-right: 0.25rem; }

/* ---------- Couleur principale de l'application (remplace le bleu Bootstrap) ---------- */
:root {
    --bs-primary: #8B6F47;
    --bs-primary-rgb: 139, 111, 71;
    --bs-primary-text-emphasis: #4F3F28;
    --bs-primary-bg-subtle: #F0E6D2;
    --bs-primary-border-subtle: #D4A574;
    --bs-link-color: #8B6F47;
    --bs-link-color-rgb: 139, 111, 71;
    --bs-link-hover-color: #6B5538;
    --bs-link-hover-color-rgb: 107, 85, 56;
}
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #8B6F47;
    --bs-btn-border-color: #8B6F47;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #6B5538;
    --bs-btn-hover-border-color: #6B5538;
    --bs-btn-focus-shadow-rgb: 139, 111, 71;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #5A4529;
    --bs-btn-active-border-color: #5A4529;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #8B6F47;
    --bs-btn-disabled-border-color: #8B6F47;
}
.btn-outline-primary {
    --bs-btn-color: #8B6F47;
    --bs-btn-border-color: #8B6F47;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #8B6F47;
    --bs-btn-hover-border-color: #8B6F47;
    --bs-btn-focus-shadow-rgb: 139, 111, 71;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #6B5538;
    --bs-btn-active-border-color: #6B5538;
    --bs-btn-disabled-color: #8B6F47;
    --bs-btn-disabled-border-color: #8B6F47;
}
.form-control:focus, .form-select:focus {
    border-color: #D4A574;
    box-shadow: 0 0 0 0.25rem rgba(139, 111, 71, 0.2);
}
.form-check-input:checked { background-color: #8B6F47; border-color: #8B6F47; }
.form-check-input:focus { border-color: #D4A574; box-shadow: 0 0 0 0.25rem rgba(139, 111, 71, 0.2); }
.page-link { color: #8B6F47; }
.page-link:hover { color: #6B5538; background-color: #FFF9F5; }
.page-link:focus { box-shadow: 0 0 0 0.25rem rgba(139, 111, 71, 0.2); }
.page-item.active .page-link { background-color: #8B6F47; border-color: #8B6F47; color: #fff; }
.progress-bar { background-color: #8B6F47; }
.alert-primary { --bs-alert-color: #4F3F28; --bs-alert-bg: #F7EFE0; --bs-alert-border-color: #E4D3B5; }
.alert-primary .alert-link { color: #4F3F28; }

/* ---------- Tuiles d'indicateurs (KPI) compactes sur petit mobile ---------- */
@media (max-width: 575.98px) {
    [class*="-kpi"] { padding: 0.7rem 0.8rem !important; border-radius: 10px; }
    [class*="-kpi"] small { font-size: 0.74rem; line-height: 1.25; display: block; }
    [class*="-kpi"] small .fas { font-size: 0.8rem; }
    [class*="-kpi"] h3, [class*="-kpi"] .h3 { font-size: 1.2rem; margin: 0.15rem 0; line-height: 1.2; }
    .row.g-3 { --bs-gutter-x: 0.6rem; --bs-gutter-y: 0.6rem; }
}