/* ==========================================================================
 * MIAB — couleurs du template TICKETWIFI / MikroTunnel (consigne 2026-11-09_12)
 *
 * Chargé APRÈS styles.css (thème du back-office copié de MikroTunnel), comme mikro-theme.css : remplace les
 * variables Bootstrap du thème Blue_Theme par la palette du logo MIAB (bleu nuit #13264A, or #C9971C, teintes de la
 * maquette A). Polices hébergées sur le site (aucun appel à Google).
 * ========================================================================== */
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url(../fonts/inter/inter-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url(../fonts/inter/inter-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url(../fonts/inter/inter-latin-600-normal.woff2) format("woff2"); }

:root {
    --brand-dark: #0A1630;
    --brand: #13264A;
    --brand-light: #2A4A80;
    --brand-gold: #C9971C;
    --brand-gold-light: #F0D27A;
    --brand-gold-text: #8A6410;
    --brand-bg: #F3ECDD;
    --brand-ivory: #FBF8F1;
    --brand-grad: linear-gradient(135deg, #0A1630 0%, #13264A 55%, #2A4A80 100%);
}
[data-color-theme=Blue_Theme]:root,
[data-bs-theme=light][data-color-theme=Blue_Theme]:root {
    --bs-primary: #13264A;
    --bs-primary-rgb: 19, 38, 74;
    --bs-light-primary: rgba(19, 38, 74, .08);
    --bs-primary-bg-subtle: #EEF1F7;
    --bs-primary-text-emphasis: #0A1630;
    --bs-secondary: #8A6410;
    --bs-secondary-rgb: 138, 100, 16;
    --bs-secondary-bg-subtle: #F7EEDB;
    --bs-success: #13264A;
    --bs-success-rgb: 19, 38, 74;
    --bs-success-bg-subtle: #EEF1F7;
    --bs-warning: #C9971C;
    --bs-warning-rgb: 201, 151, 28;
    --bs-warning-bg-subtle: #FBF3DF;
    --bs-link-color: #13264A;
    --bs-link-color-rgb: 19, 38, 74;
    --bs-link-hover-color: #8A6410;
    --bs-body-font-family: Inter, system-ui, sans-serif;
    --bs-body-bg: #F6F4EE;
}
[data-bs-theme=dark][data-color-theme=Blue_Theme]:root {
    --bs-primary: #F0D27A;
    --bs-primary-rgb: 240, 210, 122;
    --bs-light-primary: rgba(240, 210, 122, .1);
    --bs-primary-bg-subtle: rgba(240, 210, 122, .12);
    --bs-link-color: #F0D27A;
}
/* Même précision que les règles du thème (:root + 2 attributs), chargées après : elles l'emportent. */
:root[data-bs-theme][data-color-theme=Blue_Theme] .btn-primary {
    --bs-btn-bg: #13264A; --bs-btn-border-color: #13264A; --bs-btn-hover-bg: #0A1630; --bs-btn-hover-border-color: #0A1630;
    --bs-btn-active-bg: #0A1630; --bs-btn-active-border-color: #0A1630; --bs-btn-disabled-bg: #13264A; --bs-btn-disabled-border-color: #13264A;
}
[data-bs-theme=dark]/* Même précision que les règles du thème (:root + 2 attributs), chargées après : elles l'emportent. */
:root[data-bs-theme][data-color-theme=Blue_Theme] .btn-primary { --bs-btn-bg: #C9971C; --bs-btn-border-color: #C9971C; --bs-btn-color: #0A1630; --bs-btn-hover-bg: #F0D27A; --bs-btn-hover-color: #0A1630; }
:root[data-bs-theme][data-color-theme=Blue_Theme] .btn-outline-primary { --bs-btn-color: #13264A; --bs-btn-border-color: #13264A; --bs-btn-hover-bg: #13264A; --bs-btn-hover-border-color: #13264A; }
:root[data-bs-theme][data-color-theme=Blue_Theme] .alert-success { --bs-alert-color: #13264A; --bs-alert-bg: #EEF1F7; --bs-alert-border-color: #C9D2E3; }
:root[data-bs-theme][data-color-theme=Blue_Theme] .alert-danger { --bs-alert-color: #B42318; --bs-alert-bg: #FDECEC; --bs-alert-border-color: #F5C2C0; }

/* Menu de gauche : fond bleu nuit, actif or (palette du logo). */
.left-sidebar { background: var(--brand-grad) !important; border-right: 0 !important; }
.left-sidebar .sidebar-nav ul .sidebar-item .sidebar-link { color: #D6DCE8; }
.left-sidebar .sidebar-nav ul .sidebar-item .sidebar-link:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.left-sidebar .sidebar-nav ul .sidebar-item .sidebar-link.active,
.left-sidebar .sidebar-nav ul .sidebar-item > .sidebar-link.active { background: rgba(240, 210, 122, .16) !important; color: #F0D27A !important; }
.left-sidebar .sidebar-nav ul .sidebar-item .first-level .sidebar-link.active { background: transparent !important; color: #F0D27A !important; font-weight: 600; }
.left-sidebar .sidebar-nav ul .sidebar-item .sidebar-link i { font-size: 1.3rem; }
.left-sidebar .sidebar-divider { background: rgba(240, 210, 122, .25) !important; }
.left-sidebar .sidebar-nav ul .sidebar-item .sidebar-link.has-arrow::after { border-color: #D6DCE8; }
.brand-logo { padding: 14px 18px; min-height: 76px; }
.miab-logo { height: 46px; width: auto; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); }
.miab-logo-mark { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: 10px; background: #C9971C; color: #0A1630; font-size: 1.2rem; }
.miab-wordmark { display: flex; flex-direction: column; line-height: 1.1; color: #fff; }
.miab-wordmark b { font-size: 1.35rem; letter-spacing: .06em; }
.miab-wordmark small { font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: #F0D27A; }
.mini-sidebar .miab-wordmark { display: none; }
.miab-avatar { padding: 0 !important; line-height: 1; width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--brand-grad); color: #F0D27A; font-weight: 700; }
.miab-switch select { min-width: 220px; max-width: 46vw; border-radius: 16px; }
.miab-crumb { background: #F3ECDD !important; border-left: 4px solid #C9971C !important; }
[data-bs-theme=dark] .miab-crumb { background: rgba(240, 210, 122, .08) !important; }
.miab-footer a { color: inherit; font-weight: 600; }
.container-fluid { max-width: 100% !important; }

/* Tableaux : en-têtes au dégradé de marque (comme data-thead-gradient de MikroTunnel). */
.miab-page .table thead th { background: var(--brand-grad); color: #fff; border: 0; font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; padding: .6rem .55rem; white-space: nowrap; }
.miab-page .table thead th:first-child { border-top-left-radius: 8px; }
.miab-page .table thead th:last-child { border-top-right-radius: 8px; }

/* ---------- Compatibilité : les écrans existants gardent leurs classes, rendues dans le thème ---------- */
.miab-page > h1, .miab-page h1 { font-size: 1.45rem; font-weight: 700; margin: 0 0 .5rem; }
.miab-page h2 { font-size: 1.08rem; font-weight: 600; margin: 0 0 .8rem; }
.miab-page .card:not(:has(> .card-body)) { padding: 1.4rem 1.5rem; margin-bottom: 1.25rem; border: 0; box-shadow: 0 1px 4px rgba(19, 38, 74, .06), 0 10px 28px -18px rgba(19, 38, 74, .25); border-radius: 14px; }
.miab-page .muted { color: var(--bs-secondary-color, #5B6478); }
.miab-page .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin: 1rem 0 1.25rem; }
.miab-page .tile { display: grid; gap: 4px; background: var(--bs-body-bg-2, #fff); border-radius: 14px; padding: 18px 20px; text-decoration: none; color: inherit; box-shadow: 0 1px 4px rgba(19, 38, 74, .06), 0 10px 28px -18px rgba(19, 38, 74, .25); border-left: 4px solid #C9971C; transition: transform .2s; }
.miab-page .tile:hover { transform: translateY(-3px); }
.miab-page .tile strong { font-size: 1.35rem; color: var(--bs-primary); }
.miab-page .tag { display: inline-block; background: var(--bs-primary-bg-subtle); color: var(--bs-primary); border-radius: 999px; padding: 2px 10px; font-size: .74rem; font-weight: 600; }
.miab-page .btn-ghost { background: transparent; border: 1px solid var(--bs-primary); color: var(--bs-primary); }
.miab-page .btn-ghost:hover { background: var(--bs-primary); color: #fff; }
.miab-page .alert-ok { background: #EEF1F7; color: #13264A; }
.miab-page .alert-error { background: #FDECEC; color: #B42318; }
.miab-page .form label { display: block; font-weight: 600; margin: .8rem 0 .3rem; font-size: .88rem; }
.miab-page .form input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=color]),
.miab-page .form select, .miab-page .form textarea,
.miab-page .filters input:not([type=checkbox]):not([type=radio]), .miab-page .filters select {
    display: block; width: 100%; padding: .55rem .8rem; font-size: .92rem; border: 1px solid var(--bs-border-color, #DFE5EF); border-radius: 8px; background: var(--bs-body-bg-2, #fff); color: inherit;
}
.miab-page .form input:focus, .miab-page .form select:focus, .miab-page .form textarea:focus { outline: 0; border-color: #C9971C; box-shadow: 0 0 0 3px rgba(201, 151, 28, .2); }
.miab-page .form .check { font-weight: 400; display: flex; gap: 8px; align-items: center; }
.miab-page .form.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.miab-page .form.filters input, .miab-page .form.filters select { width: auto; flex: 0 1 auto; }
.miab-page .form button[type=submit] { margin-top: .9rem; }
.miab-page .form.filters button[type=submit] { margin-top: 0; }
.miab-page .list li { border-color: var(--bs-border-color, #DFE5EF); }

/* Fenêtre de confirmation au design de l'application (jamais de confirm()). */
.modal-miab { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; background: rgba(10, 22, 48, .55); padding: 16px; }
.modal-miab[hidden] { display: none; }
.modal-miab .modal-box { background: var(--bs-body-bg, #fff); border-radius: 16px; padding: 22px; max-width: 420px; width: 100%; box-shadow: 0 30px 60px rgba(0, 0, 0, .3); }
.modal-miab .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
@media (max-width: 991px) { .miab-switch select { min-width: 0; max-width: 52vw; } .miab-unit { display: none; } }
:root[data-bs-theme][data-color-theme=Blue_Theme] .btn-secondary { --bs-btn-bg: #C9971C; --bs-btn-border-color: #C9971C; --bs-btn-color: #0A1630; --bs-btn-hover-bg: #8A6410; --bs-btn-hover-border-color: #8A6410; --bs-btn-hover-color: #fff; }
.left-sidebar .sidebar-nav ul .sidebar-item .sidebar-link .hide-menu { white-space: normal; line-height: 1.25; padding-right: 14px; }
/* Survol et rubrique sélectionnée (repliée) : le thème d'origine met un fond clair ; ici, palette du menu sombre. */
.left-sidebar .sidebar-nav ul .sidebar-item .sidebar-link:hover,
.left-sidebar .sidebar-nav ul .sidebar-item .first-level .sidebar-link:hover { color: #fff !important; background: rgba(255, 255, 255, .06) !important; }
.left-sidebar .sidebar-nav ul .sidebar-item.selected > .sidebar-link,
.left-sidebar .sidebar-nav ul .sidebar-item.selected > .sidebar-link.active { background: rgba(240, 210, 122, .16) !important; color: #F0D27A !important; }
.left-sidebar .sidebar-nav ul .sidebar-item.selected > .sidebar-link i { color: #F0D27A !important; }
/* Filtres posés sur une carte : Bootstrap met .card en colonne ; ici, une ligne qui passe à la ligne. */
.miab-page .form.filters.card { flex-direction: row; align-items: center; }
.miab-page .form.filters input:not([type=checkbox]):not([type=radio]) { min-width: 0; }
/* En-tête : toujours sur une seule ligne ; sur téléphone, le choix de l'unité se réduit au lieu de passer dessous. */
.topbar .navbar { flex-wrap: nowrap; }
.miab-switch { min-width: 0; flex: 0 1 auto; }
@media (max-width: 991px) {
    .miab-switch select { width: 100%; max-width: 100%; font-size: .8rem; padding-right: 1.8rem; text-overflow: ellipsis; }
    .topbar .navbar-nav .nav-link { padding-left: .3rem !important; padding-right: .3rem !important; }
}

/* Consigne 10_03 : « Changer la photo » sur place (gros boutons, photo actuelle bien visible, dépôt de fichiers). */
.photo-place { margin: 1rem 0; padding: 1rem; border: 1px dashed var(--bs-border-color, #DFE5EF); border-radius: 14px; }
.photo-titre { font-weight: 600; margin: 0 0 .5rem; }
.photo-actuelle { margin-bottom: .75rem; }
.photo-actuelle img { display: block; max-width: 320px; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 6px 20px -10px rgba(19, 38, 74, .4); }
.photo-vide, .photo-vide-grande { display: inline-flex; align-items: center; gap: 8px; padding: 1.2rem 1.4rem; border-radius: 12px; background: var(--bs-primary-bg-subtle); color: var(--bs-secondary-color, #5B6478); }
.photo-vide-grande { width: 100%; justify-content: center; min-height: 140px; font-size: 1rem; }
.btn-photo { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.btn-photo:focus-within, .depot:focus-within .btn { outline: 3px solid #C9971C; outline-offset: 2px; }
.photo-deja { margin-top: .75rem; }
.photo-deja summary { cursor: pointer; color: var(--bs-secondary-color, #5B6478); font-size: .9rem; }
.photos-place { display: grid; grid-template-columns: minmax(0, 420px); gap: 14px; margin: .8rem 0 1rem; }
.photos-place.plusieurs { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.photo-carte { margin: 0; background: var(--bs-body-bg-2, #fff); border-radius: 14px; overflow: hidden; box-shadow: 0 1px 4px rgba(19, 38, 74, .08), 0 10px 24px -16px rgba(19, 38, 74, .35); }
.photo-carte img { display: block; width: 100%; height: auto; aspect-ratio: auto; }
.photo-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; }
.photo-actions .inline { display: inline; }
.depot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 1rem 1.2rem; border: 2px dashed rgba(201, 151, 28, .55); border-radius: 14px; cursor: pointer; transition: background .2s, border-color .2s; }
.depot:hover, .depot.survol { background: rgba(240, 210, 122, .14); border-color: #C9971C; }
.depot .btn-lg { font-size: 1.05rem; padding: .7rem 1.3rem; }
.envoi-en-cours { margin: .6rem 0 0; font-weight: 600; color: #8A6410; }
form.envoi .depot { opacity: .6; pointer-events: none; }

/* Consigne 10_10 : photo d'une section, sur place (Textes du site et Photos du site). */
.photo-section { margin: .4rem 0 1.4rem; padding: 1rem 1.1rem; border: 1px solid rgba(19, 38, 74, .1); border-radius: 16px; background: rgba(240, 210, 122, .06); }
.photo-section.manquante { border-color: rgba(201, 151, 28, .7); background: rgba(240, 210, 122, .16); }
.photo-section-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: .2rem; }
.badge-manquante { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: #B54708; color: #fff; font-size: .8rem; font-weight: 600; }
.photo-section .photos-place { grid-template-columns: minmax(0, 260px); }
.photo-section .photos-place.plusieurs { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.miab-manquantes { border-left: 4px solid #B54708; }