/*
 * Charte graphique alignée sur le site vitrine https://aufildesmarches.com/ :
 * couleurs (marron/brique #672f1e, taupe #5a4a3d, gris texte #4e4e50) et police (Montserrat)
 * extraites du site officiel le 29/08/2026.
 */
:root {
    --afm-brown: #672f1e;
    --afm-brown-dark: #4f2417;
    --afm-taupe: #5a4a3d;
    --afm-text: #4e4e50;
}

body {
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
}

a {
    color: var(--afm-brown);
}

a:hover {
    color: var(--afm-brown-dark);
}

.btn-primary {
    --bs-btn-bg: var(--afm-brown);
    --bs-btn-border-color: var(--afm-brown);
    --bs-btn-hover-bg: var(--afm-brown-dark);
    --bs-btn-hover-border-color: var(--afm-brown-dark);
    --bs-btn-active-bg: var(--afm-brown-dark);
    --bs-btn-active-border-color: var(--afm-brown-dark);
    --bs-btn-disabled-bg: var(--afm-brown);
    --bs-btn-disabled-border-color: var(--afm-brown);
    --bs-btn-focus-shadow-rgb: 103, 47, 30;
}

.btn-outline-primary {
    --bs-btn-color: var(--afm-brown);
    --bs-btn-border-color: var(--afm-brown);
    --bs-btn-hover-bg: var(--afm-brown);
    --bs-btn-hover-border-color: var(--afm-brown);
    --bs-btn-active-bg: var(--afm-brown);
    --bs-btn-active-border-color: var(--afm-brown);
    --bs-btn-focus-shadow-rgb: 103, 47, 30;
}

.form-check-input:checked {
    background-color: var(--afm-brown);
    border-color: var(--afm-brown);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--afm-taupe);
    box-shadow: 0 0 0 .25rem rgba(103, 47, 30, .15);
}

.page-link {
    color: var(--afm-brown);
}

.page-item.active .page-link {
    background-color: var(--afm-brown);
    border-color: var(--afm-brown);
}

/* Bouton icône seule (avec title en infobulle) : taille fixe carrée, indépendante de la largeur
   propre de chaque glyphe Bootstrap Icons (une enveloppe est naturellement plus large qu'un
   crayon dans cette police, ce qui rendait certains boutons plus larges que d'autres). */
.btn-icon {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Les listes restent des tableaux sur ordinateur et deviennent des fiches lisibles au téléphone. */
@media (max-width: 767.98px) {
    body { font-size: .9rem; }
    main { padding: .75rem max(.75rem, env(safe-area-inset-right)) max(.75rem, env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left)) !important; }
    .sidebar { width: min(84vw, 19rem) !important; }
    .navbar { position: sticky; top: 0; z-index: 1020; padding-inline: .75rem !important; }
    .navbar .btn { min-height: 2.5rem; }
    .form-control, .form-select { font-size: 16px; }
    .btn-sm { min-height: 2.5rem; }
    .table-responsive { -webkit-overflow-scrolling: touch; }
    .mobile-actions { flex-direction: column; align-items: stretch !important; }
    .mobile-actions > *, .mobile-actions .btn { width: 100%; }
    .mobile-actions form { display: flex; }
    .mobile-actions form .btn { flex: 1; }
    .card-body { padding: .85rem; }
    .alert { align-items: flex-start !important; }

    .table-responsive:has(.mobile-table) { overflow: visible; }
    table.mobile-table, .mobile-table tbody { display: block; width: 100%; }
    .mobile-table thead { display: none; }
    .mobile-table tr { display: block; margin: .65rem; padding: .35rem .7rem; border: 1px solid var(--bs-border-color); border-radius: .65rem; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
    .mobile-table td { display: grid; grid-template-columns: minmax(6.5rem, 40%) minmax(0, 60%); gap: .65rem; align-items: center; padding: .42rem 0; border-bottom: 1px solid rgba(0,0,0,.07); text-align: right !important; overflow-wrap: anywhere; }
    .mobile-table td:last-child { border-bottom: 0; }
    .mobile-table td::before { content: attr(data-label); color: var(--bs-secondary-color); font-size: .75rem; font-weight: 600; text-align: left; text-transform: uppercase; letter-spacing: .02em; }
    .mobile-table td.mobile-primary { display: block; padding-block: .55rem; font-size: 1rem; font-weight: 600; text-align: left !important; }
    .mobile-table td.mobile-primary::before { display: none; }
    .mobile-table td.mobile-empty { display: block; text-align: center !important; }
    .mobile-table td.mobile-empty::before { display: none; }
    .mobile-table td .btn { min-width: 2.5rem; min-height: 2.5rem; }

    .pagination { flex-wrap: wrap; gap: .2rem; justify-content: center; }
    .pagination .page-link { min-width: 2.4rem; min-height: 2.4rem; display: inline-flex; align-items: center; justify-content: center; border-radius: .35rem !important; }
}