/* ==========================================================================
   Intranet CAPiTec — interface téléphone
   --------------------------------------------------------------------------
   Cette feuille est chargée avec  media="screen and (max-width: 767.98px)"
   (voir head.html) : elle ne s'applique donc JAMAIS sur ordinateur.
   Elle se place après Bootstrap 4 et style.css et les surcharge.

   Sommaire
     1. Variables & base
     2. En-tête et menu
     3. Page, titres, pied de page
     4. Boutons
     5. Formulaires
     6. Page de connexion
     7. Accueil (tuiles)
     8. Tableaux -> cartes
     9. Pages "seul" (matériel, rangement, événement…) et cartes
    10. Onglets, pastilles, listes
    11. Fenêtres modales, alertes, divers
    12. Plugins (chosen, datepicker, dropzone, fullcalendar, bootstrap-table)
   ========================================================================== */

/* 1. Variables & base ----------------------------------------------------- */
:root {
    --m-brand: #7194bb;
    --m-brand-dark: #325781;
    --m-ink: #1c2733;
    --m-muted: #667085;
    --m-line: #e3e8ef;
    --m-bg: #f1f4f9;
    --m-card: #ffffff;
    --m-radius: 16px;
    --m-radius-sm: 12px;
    --m-tap: 54px;      /* hauteur minimale d'un élément tactile */
    --m-hdr: 58px;      /* hauteur de la barre du haut */
    --m-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 14px rgba(16, 24, 40, .07);
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--m-hdr) + 12px);
}

body,
body.container-fluid {
    padding: 0 !important;
    background: var(--m-bg);
    color: var(--m-ink);
    font-size: 1rem;
    line-height: 1.5;
    -webkit-tap-highlight-color: rgba(50, 87, 129, .18);
    -webkit-font-smoothing: antialiased;
}

a, button, input, select, textarea, label, .btn { touch-action: manipulation; }

/* Les lignes (.row) posées directement dans <body> ne doivent pas déborder */
body > .row, body > header.row, body > footer.row { margin-left: 0; margin-right: 0; }

/* 2. En-tête et menu ------------------------------------------------------ */
header.row {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: block;
    box-shadow: 0 2px 12px rgba(16, 24, 40, .22);
}

header div.barre_haut {
    height: var(--m-hdr);
    display: flex;
    align-items: center;
    padding: 0 76px 0 14px;
    background: linear-gradient(180deg, #7b9ec4 0%, var(--m-brand) 100%);
    color: #0f1f33;
}
header div.barre_haut > .row {
    margin: 0 !important;
    width: 100%;
    flex-wrap: nowrap;
}
header div.barre_haut .col-lg-12 {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    padding: 0;
}
header div.barre_haut img {
    float: none;
    width: 38px;
    height: 38px;
    margin: 0 12px 0 0;
    flex: none;
}
header div.barre_haut h1 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Page de connexion : pas de bouton menu, on centre le titre */
header.row:not(:has(nav)) div.barre_haut { padding: 0 14px; justify-content: center; }
header.row:not(:has(nav)) div.barre_haut .col-lg-12 { justify-content: center; flex: 0 1 auto; }

header nav.navbar {
    position: static;
    display: block;
    padding: 0;
    background: #fff !important;
    margin: 0 !important;
}

/* Bouton menu : grand carré en haut à droite */
header .navbar-toggler {
    position: absolute;
    top: 0;
    right: 0;
    width: 68px;
    height: var(--m-hdr);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, .22);
    color: #0f1f33;
    font-size: 1.45rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
header .navbar-toggler:focus { outline: none; }
header .navbar-toggler:active { background: rgba(255, 255, 255, .4); }
header .navbar-toggler:not(.collapsed) { background: var(--m-brand-dark); color: #fff; }
.m-toggler-ico { position: relative; display: inline-flex; width: 1.4em; justify-content: center; }
.m-ico-close { display: none; }
.navbar-toggler:not(.collapsed) .m-ico-open { display: none; }
.navbar-toggler:not(.collapsed) .m-ico-close { display: inline-block; }

/* Panneau du menu */
header .navbar-collapse {
    background: #fff;
    max-height: calc(100vh - var(--m-hdr));
    max-height: calc(100dvh - var(--m-hdr));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid var(--m-line);
}
header .navbar-nav { padding: 10px 12px 18px; margin: 0; }
header .navbar-nav > li.nav-item { margin: 0 0 4px; }

header .navbar li a { padding: 0; font-size: 1.05rem; }            /* annule style.css */
header .navbar.navbar-light .navbar-nav > li > a.nav-link {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 58px;
    padding: 0 14px !important;
    border-radius: var(--m-radius-sm);
    font-weight: 700;
    color: var(--m-ink);
    background: #f6f8fb;
}
header .navbar.navbar-light .navbar-nav > li > a.nav-link:active { background: #e8eef6; }
.m-nav-ico { width: 26px; text-align: center; font-size: 1.2rem; color: var(--m-brand-dark); flex: none; }

/* Flèche des sous-menus à droite, qui pivote à l'ouverture */
header .navbar-nav .dropdown-toggle::after {
    margin-left: auto;
    border: 0;
    width: 12px;
    height: 12px;
    border-right: 3px solid var(--m-muted);
    border-bottom: 3px solid var(--m-muted);
    transform: rotate(45deg) translate(-3px, -3px);
    transition: transform .2s ease;
}
header .navbar-nav .dropdown.show > .dropdown-toggle::after { transform: rotate(-135deg) translate(-3px, -3px); }
header .navbar.navbar-light .navbar-nav .dropdown.show > a.nav-link { background: #e8eef6; }
header .caret { display: none; }

/* Sous-menus : déroulés dans la page (pas de survol, pas de flottant) */
header .navbar-nav .dropdown-menu {
    position: static;
    float: none;
    margin: 6px 0 4px 18px;
    padding: 4px 0 4px 14px;
    border: 0;
    border-left: 3px solid var(--m-brand);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
header .navbar-nav .dropdown-menu.show { animation: m-slide-down .18s ease-out; }
@keyframes m-slide-down { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
header .navbar li.dropdown-item { padding: 0; background: transparent; }
header .navbar li.dropdown-item > a {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 12px;
    border-radius: 10px;
    font-weight: 600;
    color: var(--m-ink);
}
header .navbar li.dropdown-item > a:active { background: #e8eef6; }

/* Compte / déconnexion en bas du menu */
header .navbar-nav > li.m-nav-account { order: 99; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--m-line); }
header .navbar-nav > li.m-nav-logout { order: 100; margin-top: 4px; }
header .navbar.navbar-light .navbar-nav > li.m-nav-account > a.nav-link { background: transparent; padding-left: 4px !important; }
header .navbar-nav > li.m-nav-account .m-nav-ico { font-size: 2rem; width: 36px; color: var(--m-brand); }
.m-nav-account-text { display: flex; flex-direction: column; line-height: 1.2; }
.m-nav-account-text small { font-weight: 500; color: var(--m-muted); font-size: .85rem; }
header .navbar.navbar-light .navbar-nav > li.m-nav-logout > a.nav-link { background: #fdecec; color: #b42318; }
header .navbar-nav > li.m-nav-logout .m-nav-ico { color: #b42318; }
header .navbar-nav { display: flex; flex-direction: column; }

/* L'aside (colonne de gauche) n'existe pas sur téléphone */
aside { display: none !important; }

/* 3. Page, titres, pied de page ------------------------------------------- */
#page,
div#page {
    padding: 18px 16px 32px;
    min-height: 62vh;
    width: 100%;
    max-width: none;
    flex: none;
}
#page h2 {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -.015em;
    line-height: 1.2;
    margin: 2px 0 8px;
}
#page > hr { margin: 6px 0 18px; border-top: 2px solid var(--m-line); }
#page h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: .75rem; }
#page h4 { font-size: 1.15rem; }
#page p { font-size: 1.02rem; }
#page ul:not([class]) { padding-left: 1.25rem; }

/* Le bouton "plein écran" n'a pas d'intérêt sur téléphone */
#screen_buttons { display: none !important; }

footer.row { margin: 0; }
footer.bottom.section-padding { padding: 22px 0 calc(22px + env(safe-area-inset-bottom)); }
footer.bottom p { line-height: 1.6; font-size: .9rem; }

/* 4. Boutons -------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: var(--m-tap);
    padding: .7rem 1.2rem;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    border-radius: var(--m-radius-sm);
    transition: transform .08s ease, box-shadow .15s ease, background-color .15s;
}
.btn:active { transform: scale(.975); }
.btn i, .btn .fas, .btn .far { font-size: 1.15em; }
.btn-sm, .btn-group-sm > .btn { min-height: 46px; padding: .5rem 1rem; font-size: 1rem; border-radius: 10px; }
.btn-lg, .btn-group-lg > .btn { min-height: 62px; padding: .8rem 1.4rem; font-size: 1.15rem; border-radius: 14px; }
.btn-block { display: flex; width: 100%; }
.btn:focus, .btn.focus { box-shadow: 0 0 0 4px rgba(113, 148, 187, .35); }
.btn-primary, .btn-success, .btn-danger, .btn-info, .btn-warning { box-shadow: 0 2px 6px rgba(16, 24, 40, .16); }

/* Libellé automatique des boutons "icône seule" (texte fourni par mobile.js depuis title) */
.btn[data-mobile-label]::after { content: attr(data-mobile-label); }

/* Bouton d'action principal en haut de page (Nouveau, Créer, Retour…) : pleine largeur */
#page > .row:has(> a.btn:only-child),
#page > div:not([class]) > a.btn:only-child,
#page > .button_area,
#page > #toolbar-listes,
#page > div[style*="padding-bottom"] { display: block; margin: 0 0 14px; }
#page > .row:has(> a.btn:only-child) { margin-left: 0; margin-right: 0; }
#page > .row > a.btn:only-child,
#page > .button_area > a.btn,
#page > #toolbar-listes > a.btn,
#page > div[style*="padding-bottom"] > a.btn { display: flex; width: 100%; justify-content: flex-start; }
#page > .row > a.btn-primary:only-child,
#page > .row > a.btn.btn-primary[href]:only-child { background: #fff; color: var(--m-brand-dark); border: 1.5px solid #cfd8e6; box-shadow: none; justify-content: flex-start; }
#page > .button_area + br, #page > #toolbar-listes + br { display: none; }

/* Boutons d'export */
.table-btn.dropdown { padding: 0; margin-bottom: 10px; }
.table-btn { display: flex; justify-content: flex-end; }
.table-btn .btn-export { float: none !important; min-height: 46px; padding: .45rem 1rem; font-size: .98rem; background: #fff; }
.table-btn .dropdown-menu { min-width: 10rem; }

/* Menus déroulants génériques */
.dropdown-menu {
    border: 0;
    border-radius: 14px;
    padding: 6px;
    font-size: 1.05rem;
    max-width: calc(100vw - 32px);
    box-shadow: 0 10px 30px rgba(16, 24, 40, .22), 0 0 0 1px rgba(16, 24, 40, .05);
}
.dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 50px;
    padding: .6rem 1rem;
    border-radius: 10px;
    white-space: normal;
}
.dropdown-divider { margin: 4px 0; }

/* 5. Formulaires ---------------------------------------------------------- */
.form-group { margin-bottom: 1.4rem; }
label, .col-form-label { font-weight: 700; font-size: .98rem; margin-bottom: .5rem; color: var(--m-ink); }
label.required:after { color: #d92d20; }
small.form-text, .form-text { font-size: .9rem; }

/* 16 px minimum : évite le zoom automatique d'iOS quand on touche un champ */
.form-control,
.custom-select,
input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="url"], input[type="tel"], input[type="search"], input[type="date"], input[type="time"],
textarea, select {
    font-size: 16px;
}
.form-control, .custom-select {
    height: var(--m-tap);
    padding: .75rem 1rem;
    border: 1.5px solid #c9d2df;
    border-radius: var(--m-radius-sm);
    background-color: #fff;
    color: var(--m-ink);
    box-shadow: none;
}
.form-control::placeholder { color: #98a2b3; }
.form-control:focus, .custom-select:focus {
    border-color: var(--m-brand-dark);
    box-shadow: 0 0 0 4px rgba(113, 148, 187, .30);
    background-color: #fff;
}
.form-control:disabled, .form-control[readonly] { background-color: #eef1f6; }
textarea.form-control { height: auto; min-height: 128px; line-height: 1.45; resize: vertical; }
select.form-control, select.custom-select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 3rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5l5.5 5.5 5.5-5.5' fill='none' stroke='%23325781' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.1rem center;
    background-size: 14px 9px;
}
select[multiple].form-control, select[size].form-control { height: auto; background-image: none; padding-right: 1rem; }
input[type="file"].form-control, input[type="file"] { font-size: 1rem; padding-top: .9rem; height: auto; min-height: var(--m-tap); }

.input-group > .form-control, .input-group > .custom-select { height: var(--m-tap); }
.input-group-text {
    padding: 0 1rem;
    font-size: 1rem;
    min-height: var(--m-tap);
    border: 1.5px solid #c9d2df;
    background: #eef1f6;
}
.input-group > .input-group-prepend > .input-group-text { border-radius: var(--m-radius-sm) 0 0 var(--m-radius-sm); }
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-append > .btn { border-radius: 0 var(--m-radius-sm) var(--m-radius-sm) 0; }
.input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group-append .btn, .input-group-prepend .btn { min-height: var(--m-tap); }

/* Colonnes sans taille (.col) dans un formulaire : on empile */
#page form .row > .col,
#page form .form-row > .col { flex: 0 0 100%; max-width: 100%; }

/* Cases à cocher / boutons radio : ligne entière tactile */
input[type="checkbox"], input[type="radio"] { width: 26px; height: 26px; accent-color: var(--m-brand-dark); flex: none; }
.form-group:has(> input[type="checkbox"]),
.form-group:has(> input[type="radio"]) {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 0 16px;
    background: #fff;
    border: 1.5px solid #c9d2df;
    border-radius: var(--m-radius-sm);
}
.form-group:has(> input[type="checkbox"]) > label,
.form-group:has(> input[type="radio"]) > label { flex: 1; margin: 0; padding: 16px 0; }
.form-group:has(> input[type="checkbox"]) > input { order: 2; }
.form-check { padding: 0; }
.form-check-input { position: static; margin: 0 12px 0 0; }
.form-check-label { display: inline-flex; align-items: center; min-height: 48px; }

/* Colonnes à largeur fixe sans point de rupture : on les empile sur téléphone */
#page .col-8.offset-2, #page .col-10.offset-1 { flex: 0 0 100%; max-width: 100%; margin-left: 0; }
.card-body .row > .col { flex: 0 0 100%; max-width: 100%; }

/* Formulaires de page = carte blanche (classe m-form ajoutée par mobile.js) */
.m-form {
    background: var(--m-card);
    border-radius: 20px;
    padding: 20px 16px 22px;
    box-shadow: var(--m-shadow);
}
.m-form .text-center { margin-top: 8px; }
.m-form .text-center > .btn,
.m-form > .btn[type="submit"] { display: flex; width: 100%; margin: 10px 0 0; min-height: 58px; font-size: 1.1rem; }
.m-form .text-center > .btn + .btn { margin-top: 12px; }

/* Formulaire déjà placé dans une carte : pas de carte dans la carte */
.card .m-form, .modal .m-form { background: transparent; box-shadow: none; border-radius: 0; padding: 0; }
/* ...sauf quand le formulaire EST le corps de la carte (ex. modifier_evenement.php) : on garde de vraies marges */
.card > form.card-body.m-form, .card > form.card-body { padding: 22px 20px 26px; }
.card > form.card-body h3 { margin-top: 6px; }

/* Listes de contenu modifiables (rangement) : [matériel][ × ] */
ul.liste_contenu_modif { padding: 0 !important; }
ul.liste_contenu_modif > li { display: flex; align-items: stretch; gap: 8px; padding: 0; margin-bottom: 8px; }
ul.liste_contenu_modif > li > a { flex: 1 1 auto; order: 1; padding-right: 14px !important; }
ul.liste_contenu_modif > li > a::after { display: none; }
ul.liste_contenu_modif > li > .btn { order: 2; flex: 0 0 58px; min-height: 58px; padding: 0; font-size: 1.15rem !important; color: #b42318; border-color: #f0c4c0; background: #fff; }
ul.liste_contenu_modif > li.can-split { display: block; }
select[multiple].form-control, select[multiple] { min-height: 190px; font-size: 16px; }

/* Édition de la liste de matériel d'un événement : colonnes empilées */
.jumbotron[class*="col-"], #liste_kit, #liste_kit_evenement { flex: 0 0 100%; max-width: 100%; }
.jumbotron { padding: 12px; margin-bottom: 14px; background: #e8edf4; border-radius: 16px; }
.jumbotron .nav-pills.flex-column { flex-direction: row !important; margin: 0; padding: 2px 0 6px; }
.jumbotron .nav-pills .nav-link i.float-right { float: none !important; margin-left: .5rem; }
#liste_kit, #liste_kit_evenement { margin-bottom: 18px; }
#liste_kit h3, #liste_kit_evenement h3 { margin-top: 6px; }

/* 6. Page de connexion ---------------------------------------------------- */
body:has(form.form-signin) { background: linear-gradient(180deg, #dbe6f3 0%, var(--m-bg) 55%); }
body:has(form.form-signin) { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body:has(form.form-signin) #page { padding: 22px 16px 28px; min-height: 0; background: transparent; flex: 1 0 auto; }
body:has(form.form-signin) footer.row { margin-top: auto; }
body:has(form.form-signin) #page > h2 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--m-muted);
    line-height: 1.4;
    margin: 6px auto 0;
    max-width: 22rem;
}
body:has(form.form-signin) #page > hr,
body:has(form.form-signin) #page > br { display: none; }
form.form-signin {
    width: 100%;
    max-width: 26rem;
    margin: 18px auto 0 !important;
    padding: 28px 20px 24px !important;
    background: var(--m-card);
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(16, 24, 40, .12);
    text-align: left;
    float: none;
    flex: none;
}
form.form-signin h1 { font-size: 1.7rem; font-weight: 800 !important; text-align: center; margin-bottom: 1.4rem !important; }
form.form-signin .form-control { height: 58px; border-radius: var(--m-radius-sm) !important; }
form.form-signin br { display: none; }
form.form-signin .form-control + .form-control { margin-top: 0; }
form.form-signin label.sr-only { position: static; width: auto; height: auto; margin: 0 0 .4rem; clip: auto; overflow: visible; white-space: normal; }
form.form-signin .field + .field, form.form-signin .m-field + .m-field { margin-top: 16px; }
form.form-signin .checkbox { text-align: center; margin: 14px 0 18px !important; }
form.form-signin .checkbox a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 12px; color: var(--m-brand-dark); font-weight: 600; text-decoration: underline; }
form.form-signin .btn-block { min-height: 60px; font-size: 1.15rem; }
form.form-signin > p { margin: 18px 0 0; padding: 14px; background: #fdecec; color: #b42318 !important; border-radius: var(--m-radius-sm); text-align: center; font-weight: 600; }
/* Bouton "afficher le mot de passe" (ajouté par mobile.js) */
.m-field { position: relative; }
.m-field .m-eye {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--m-muted);
    font-size: 1.2rem;
}
.m-field .m-eye:active { color: var(--m-brand-dark); }
.m-field input[type="password"], .m-field input.m-pwd { padding-right: 58px; }

/* Récupération du mot de passe */
#page > .col-12.col-lg-4.offset-lg-4 { padding: 0; margin: 0; max-width: none; }
form.form_connexion { background: var(--m-card); border-radius: 20px; padding: 22px 16px; box-shadow: var(--m-shadow); }

/* 7. Accueil : tuiles carrées -------------------------------------------- */
#page > h4 { font-size: 1.2rem; font-weight: 600; line-height: 1.35; margin: 8px 0 20px; }
#page > br { display: none; }
#page .row.center { margin: 0; text-align: left; }
#page .row.center > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    margin-left: 0;
    padding: 0;
    margin-top: 0 !important;
    margin-bottom: 22px;
}
#page .row.center > [class*="col-"] > h3 {
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--m-muted);
    font-weight: 800;
    margin: 0 0 10px 4px;
}
#page .row.center > [class*="col-"] > .list-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
#page .row.center .list-group-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 116px;
    padding: 14px 10px;
    border: 0 !important;
    border-radius: var(--m-radius) !important;
    background: var(--m-card);
    box-shadow: var(--m-shadow);
    text-align: center;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--m-ink);
}
#page .row.center .list-group-item i[class*="fa-"] { font-size: 1.9rem; color: var(--m-brand-dark); }
#page .row.center .list-group-item:active { transform: scale(.97); background: #eaf0f8; }
#page .row.center .list-group-item.disabled { opacity: .45; box-shadow: none; background: #e8ecf2; }
/* nombre impair : la dernière tuile prend toute la largeur */
#page .row.center .list-group > .list-group-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    flex-direction: row;
    min-height: 74px;
    gap: 14px;
}
#page .row.center .list-group > .list-group-item:last-child:nth-child(odd) i[class*="fa-"] { font-size: 1.6rem; }
#page > p.text-center { font-size: .95rem; color: var(--m-muted); line-height: 1.7; }
#page > p.text-center a { color: var(--m-brand-dark) !important; font-weight: 700; text-decoration: underline; }

/* 8. Tableaux -------------------------------------------------------------- */

/* 8a. Liste du matériel (tableau avec rowspan, géré en CSS pur) */
.table_search, .table_search tbody { display: block; width: 100%; border: 0; }
.table_search thead { display: none; }
.table_search tr { display: block; height: auto !important; border: 0; }
.table_search td, .table_search th { border: 0 !important; padding: 0; }

/* Titre de section = rangement (reste collé sous la barre du haut) */
.table_search tr:has(> td.td-rangement) {
    position: sticky;
    top: var(--m-hdr);
    z-index: 4;
    margin: 20px -16px 6px;
    padding: 0 16px;
    background: linear-gradient(180deg, var(--m-bg) 80%, rgba(241, 244, 249, 0));
}
.table_search td.td-rangement {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 12px 4px 10px !important;
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -.005em;
}
.table_search td.td-rangement::before { content: "\f187"; font: 900 1rem "Font Awesome 5 Free"; color: #a14a4a; }
.table_search td.td-rangement br { display: none; }
.table_search td.td-rangement a { display: inline; }

/* Une ligne de matériel = une carte */
.table_search tr:has(> td:nth-child(3)) {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 14px;
    align-items: center;
    margin: 0 0 10px;
    padding: 14px 16px;
    min-height: 74px;
    background: var(--m-card);
    border-radius: 14px;
    box-shadow: var(--m-shadow);
}
.table_search tr:has(> td:nth-child(3)):active { background: #eef3f9; }
.table_search tr > td:nth-child(1) {
    grid-column: 1 / -1;
    grid-row: 1;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.3;
    word-break: break-word;
}
.table_search tr > td:nth-child(2) { grid-column: 1; grid-row: 2; margin-top: 4px; font-size: .95rem; color: var(--m-muted); }
.table_search tr > td:nth-child(3) { grid-column: 2; grid-row: 2; font-size: 1.25rem; color: var(--m-brand-dark); margin-top: 4px; }
.table_search tr > td:nth-child(n+4) { display: none; }
.table_search tr > td:empty { display: none; }
/* toute la carte est cliquable */
.table_search tr > td:nth-child(1) a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.table_search tr > td a { color: inherit; }
/* lignes regroupées ("x3") : on touche pour déplier */
.table_search td.merged-tr::after { content: "\f078"; font: 900 .8rem "Font Awesome 5 Free"; margin-left: .6rem; color: var(--m-muted); }
.table_search span.nombre {
    display: inline-block;
    min-width: 2.2em;
    padding: 1px 9px;
    border-radius: 999px;
    background: #e3ebf6;
    color: var(--m-brand-dark);
    font-size: .9rem;
    font-weight: 800;
    text-align: center;
}
.table_search tr:has(> td:nth-child(1):only-child:not(.td-rangement)) { display: block; text-align: center; color: var(--m-muted); }
.table_search + script + br { display: none; }

/* 8b. Autres tableaux : chaque ligne devient une carte (classe mobile-cards ajoutée par mobile.js) */
table.mobile-cards,
table.mobile-cards > tbody,
table.mobile-cards > tfoot,
table.mobile-cards > tbody > tr,
table.mobile-cards > tfoot > tr { display: block; width: 100%; }
table.mobile-cards { border: 0 !important; background: transparent; margin-bottom: 8px; }
table.mobile-cards > thead { display: none !important; }
table.mobile-cards > tbody { font-size: 1rem !important; }
table.mobile-cards > tbody > tr {
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 0 0 12px;
    padding: 4px 16px;
    background: var(--m-card);
    border: 0;
    border-radius: 14px;
    box-shadow: var(--m-shadow);
}
table.mobile-cards > tbody > tr > td,
table.mobile-cards > tbody > tr > th {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    padding: 11px 0;
    border: 0 !important;
    border-bottom: 1px solid var(--m-line) !important;
    text-align: right;
    font-size: 1.02rem;
    word-break: break-word;
}
table.mobile-cards > tbody > tr > td:last-child { border-bottom: 0 !important; }
table.mobile-cards > tbody > tr > td.m-td-title { border-bottom: 1px solid var(--m-line) !important; }
table.mobile-cards > tbody > tr > td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    max-width: 46%;
    text-align: left;
    color: var(--m-muted);
    font-size: .76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}
/* cellule titre de la carte (première cellule qui n'est pas une cellule de boutons ; posée par mobile.js) */
table.mobile-cards > tbody > tr > td.m-td-title {
    order: -1;
    display: block;
    padding: 13px 0 12px;
    text-align: left;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.3;
}
table.mobile-cards > tbody > tr > td.m-td-title::before { display: none; }
table.mobile-cards > tbody > tr > td[data-label=""]::before,
table.mobile-cards > tbody > tr > td:not([data-label])::before { display: none; }
table.mobile-cards > tbody > tr > td[colspan] { display: block; text-align: center; color: var(--m-muted); font-weight: 400; font-size: 1rem; }
table.mobile-cards > tbody > tr > td[colspan]::before { display: none; }
table.mobile-cards a { color: inherit; }
table.mobile-cards a:not(.btn) { text-decoration: none; }
/* carte entièrement cliquable quand elle ne contient ni champ ni bouton (classe m-linkable) */
table.mobile-cards.m-linkable > tbody > tr > td.m-td-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 14px; }
table.mobile-cards.m-linkable > tbody > tr:active { background: #eef3f9; }
table.mobile-cards.m-linkable > tbody > tr > td.m-td-title a::before { content: "\f054"; font: 900 .85rem "Font Awesome 5 Free"; float: right; margin: .3rem 0 0 .6rem; color: #98a2b3; }
/* cellule d'actions (boutons) */
table.mobile-cards > tbody > tr > td.m-td-actions { order: 90; display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 0 10px; text-align: center; }
table.mobile-cards > tbody > tr > td.m-td-actions .btn-group { display: contents; }
table.mobile-cards > tbody > tr > td.m-td-actions::before { display: none; }
table.mobile-cards > tbody > tr > td.m-td-actions .btn { flex: 1 1 auto; padding-left: .8rem; padding-right: .8rem; white-space: nowrap; min-height: 54px; position: relative; z-index: 2; font-size: 1rem !important; }
/* coloration des lignes bootstrap */
table.mobile-cards > tbody > tr.table-success { background: #f0faf2; box-shadow: inset 5px 0 0 #28a745, var(--m-shadow); }
table.mobile-cards > tbody > tr.table-active { background: #f4f5f7; opacity: .75; }
table.mobile-cards > tbody > tr.table-active > td, table.mobile-cards > tbody > tr.table-success > td, table.mobile-cards > tbody > tr.table-default > td { background: transparent; }
/* pied de tableau (totaux) */
table.mobile-cards > tfoot > tr { background: #eaf0f8; border-radius: 14px; padding: 10px 16px; }
table.mobile-cards > tfoot > tr > td { display: flex; justify-content: space-between; border: 0; padding: 4px 0; font-weight: 800; }
table.mobile-cards > tfoot > tr > td:empty { display: none; }
table.mobile-cards input:not([type="checkbox"]):not([type="radio"]), table.mobile-cards textarea, table.mobile-cards select { width: 100%; }
table.mobile-cards td textarea { min-height: 84px; font-size: 16px; padding: .6rem .8rem; border: 1.5px solid #c9d2df; border-radius: 10px; }
table.mobile-cards td input[type="number"] { text-align: center; }
table.mobile-cards td.m-td-actions + td { border-top: 0; }

/* Tableau des utilisateurs : "Prénom Nom" en titre */
table.mobile-users > tbody > tr { flex-direction: row; flex-wrap: wrap; align-items: baseline; }
table.mobile-users > tbody > tr > td { order: 5; }
table.mobile-users > tbody > tr > td:nth-child(2) { order: 1; width: auto; padding-right: .35em; border: 0 !important; display: block; font-size: 1.15rem; font-weight: 800; text-align: left; }
table.mobile-users > tbody > tr > td:nth-child(1) { order: 2; width: auto; flex: 1 1 0; border: 0 !important; font-size: 1.15rem; }
table.mobile-users > tbody > tr > td:nth-child(2)::before { display: none; }
table.mobile-users > tbody > tr > td:nth-child(2) + td { }
table.mobile-users > tbody > tr::after { content: ""; order: 3; flex: 0 0 100%; height: 1px; background: var(--m-line); }
table.mobile-users > tbody > tr > td:nth-child(n+3) { order: 5; }
table.mobile-users > tbody > tr > td.m-td-actions { order: 9; flex: 0 0 100%; }

/* Tableaux "simples" restants (paramètres…) : défilement horizontal plutôt que débordement */
.m-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 9. Pages "seul" et cartes ------------------------------------------------ */
.card {
    border: 0 !important;
    border-radius: 20px !important;
    overflow: hidden;
    background: var(--m-card);
    box-shadow: var(--m-shadow) !important;
}
.materiel-card, .rangement-card, .evenement-card, .utilisateur-card, .liste-card, .kit-card, .demande-card { border-radius: 20px; }
.card-header { padding: 18px 18px 16px; border: 0; }
.card-header .card-title, .card-title, .modal-title { font-size: 1.45rem; font-weight: 800; line-height: 1.25; margin: 0; letter-spacing: -.01em; word-break: break-word; }
.card-body { padding: 18px 18px 8px; font-size: 1.05rem; }
.card-body h3 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.15rem;
    font-weight: 800;
    margin: 6px 0 4px;
    padding: 10px 0;
    border-bottom: 2px solid var(--m-line);
}
/* l'icône +/- ouvre/ferme la section : toute la ligne devient cliquable */
/* le carré +/- du bureau devient une pastille avec chevron : ouvert = flèche vers le bas, fermé = flèche vers la droite */
.card-body h3 > i.fa-minus-square, .card-body h3 > i.fa-plus-square, #page h3 > i.fa-minus-square, #page h3 > i.fa-plus-square {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; margin-left: 12px;
    border-radius: 50%;
    background: #e9eff7;
    color: var(--m-brand-dark);
    font-size: 0;                         /* masque le glyphe carré d'origine */
    transition: background-color .15s;
}
.card-body h3 > i.fa-minus-square::before, .card-body h3 > i.fa-plus-square::before,
#page h3 > i.fa-minus-square::before, #page h3 > i.fa-plus-square::before {
    content: "\f078";                    /* chevron vers le bas */
    font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 1rem; line-height: 1;
    transition: transform .2s;
}
#page h3 > i.fa-plus-square::before, .card-body h3 > i.fa-plus-square::before { transform: rotate(-90deg); }
#page h3:has(> i.fa-minus-square), #page h3:has(> i.fa-plus-square) { cursor: pointer; -webkit-tap-highlight-color: transparent; }
#page h3:has(> i.fa-minus-square):active > i, #page h3:has(> i.fa-plus-square):active > i { background: #d6e1f0; }
#page h3 > i.fa-minus-square::after, #page h3 > i.fa-plus-square::after { content: ""; position: absolute; inset: 0; }
#page h3 { position: relative; }

/* Listes d'informations : libellé au-dessus, valeur en grand */
.card-body ul, .modal-body ul { list-style: none; padding: 0 !important; margin: 0 0 8px; }
.card-body ul > li, .modal-body ul > li { padding: 12px 0; border-bottom: 1px solid var(--m-line); font-size: 1.08rem; line-height: 1.4; word-break: break-word; }
.card-body ul > li:last-child, .modal-body ul > li:last-child { border-bottom: 0; }
.card-body ul > li > b:first-child, .modal-body ul > li > b:first-child {
    display: block;
    margin-bottom: 2px;
    color: var(--m-muted);
    font-size: .76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.card-body ul > br, .modal-body ul > br { display: none; }
.card-body ul > li a { color: var(--m-brand-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.card-body img.img-fluid, .card-body img.img_descriptive { border-radius: 14px; margin-top: 6px; }
.card-body .text-muted small, .card-body small.text-muted { font-size: .85rem; }

/* Contenu d'un rangement : chaque matériel = ligne tactile */
ul#liste_contenu_rangement { margin-top: 10px; }
ul#liste_contenu_rangement > li { padding: 0; border: 0; margin-bottom: 8px; }
ul#liste_contenu_rangement > li > a {
    display: flex;
    align-items: center;
    min-height: 58px;
    padding: 10px 40px 10px 14px;
    position: relative;
    background: #f4f7fb;
    border-radius: 12px;
    color: var(--m-ink);
    font-weight: 600;
    font-size: 1.02rem;
    text-decoration: none;
    line-height: 1.3;
}
ul#liste_contenu_rangement > li > a::after { content: "\f054"; font: 900 .85rem "Font Awesome 5 Free"; position: absolute; right: 16px; color: #98a2b3; }
ul#liste_contenu_rangement > li.can-split { display: block; min-height: 58px; padding: 16px 40px 16px 14px; position: relative; background: #f4f7fb; border-radius: 12px; font-weight: 600; line-height: 1.3; }
ul#liste_contenu_rangement > li.can-split::after { content: "\f078"; font: 900 .8rem "Font Awesome 5 Free"; position: absolute; right: 16px; top: 50%; margin-top: -.5em; color: #98a2b3; }
ul#liste_contenu_rangement .nombre { margin-left: .4rem; }
.card-body .btn-group[role="group"] { display: flex; width: 100%; margin-bottom: 12px; }
.card-body .btn-group[role="group"] > .btn { flex: 1; }
.card-body .text-center > a.btn-success[href*="modifier_contenu"] { display: flex; width: 100%; margin-top: 8px; }

/* Barre d'actions en bas des cartes : grandes tuiles carrées */
.card-footer { background: transparent; border: 0; padding: 12px 16px 18px; }
.card-footer > .row.center,
.card-footer > .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.card-footer > .row > .col { flex: none; max-width: none; width: auto; padding: 0; }
.card-footer .btn {
    flex-direction: column;
    width: 100%;
    min-height: 108px;
    gap: .6rem;
    padding: .8rem .5rem;
    border-radius: var(--m-radius);
    font-size: 1rem;
    text-align: center;
    line-height: 1.2;
}
.card-footer .btn i { font-size: 2rem; }
.card-footer > .row > .col:last-child:nth-child(odd) { grid-column: 1 / -1; }
.card-footer > .row > .col:last-child:nth-child(odd) .btn { flex-direction: row; min-height: 72px; gap: .8rem; }
.card-footer > .row > .col:last-child:nth-child(odd) .btn i { font-size: 1.5rem; }
.card-footer > .row > .col:only-child .btn { min-height: 72px; flex-direction: row; }
.card-footer .btn-group .btn { min-height: 54px; flex-direction: row; }

/* Image descriptive : bouton d'ajout bien visible */
.btn-img.btn-outline-primary { width: 100%; min-height: 76px; border-style: dashed; border-width: 2px; background: #f4f8fd; }
.btn-img.btn-outline-primary::after { content: "Ajouter une image"; }
.btn-img-group:not(.d-none) { position: static !important; display: flex !important; margin-top: 10px; }
.btn-img-group .btn { flex: 1; min-height: 52px; }
.btn-img-group .btn[data-mobile-label]::after { content: none; }
.col-10.offset-1.text-center, .col-md-6.offset-md-3.col-10.offset-1 { flex: 0 0 100%; max-width: 100%; margin-left: 0; }

/* Page "événement" : titre de la liste de matériel + bouton Modifier */
#page > .col-12 > h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 26px; }
#page > .col-12 > .row, #page > .col-12 > .row > [class*="col-"] { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
#page > .col-12 > h3 > a.btn { flex: 1 0 100%; order: 3; }
.col-12 > .row > .col-md-11 { padding: 0; }
#page > .col-12, #page > .col-12.col-md-8 { padding-left: 0; padding-right: 0; }

/* Utilisateur : informations de contact cliquables */
.card-body li a[href^="tel"], .card-body li a[href^="mailto"] { display: inline-block; padding: 4px 0; }

/* 10. Onglets, pastilles, listes ------------------------------------------ */
.nav-tabs { display: flex; flex-wrap: nowrap; padding: 4px; margin-bottom: 4px; background: #e8edf4; border: 0; border-radius: 14px; }
.nav-tabs .nav-item { flex: 1; margin: 0; }
.nav-tabs .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 48px;
    padding: 0 .75rem;
    border: 0 !important;
    border-radius: 10px;
    font-weight: 700;
    color: var(--m-muted);
}
.nav-tabs .nav-link.active { background: #fff; color: var(--m-brand-dark); box-shadow: 0 1px 4px rgba(16, 24, 40, .14); }
.nav-tabs a.nav-item.nav-link { flex: 1; }

/* Pastilles : défilement horizontal (onglets de catégories d'un événement) */
.nav-pills { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start !important; gap: 8px; padding: 4px 2px 10px; margin: 0 0 10px; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity; }
.nav-pills::-webkit-scrollbar { display: none; }
.nav-pills .nav-item { flex: none; scroll-snap-align: start; }
.nav-pills .nav-link { display: flex; align-items: center; gap: .45rem; min-height: 48px; padding: 0 1.1rem; border-radius: 999px; background: #fff; box-shadow: var(--m-shadow); font-weight: 700; white-space: nowrap; }
.nav-pills .nav-link.active { background: var(--m-brand-dark); color: #fff; box-shadow: 0 2px 8px rgba(50, 87, 129, .4); }

/* Catégories du matériel : grille 2 colonnes (les sous-menus restent visibles, pas de défilement qui les couperait) */
.choix_categorie.nav-pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; overflow: visible; margin: 0 0 14px; padding: 0; scroll-snap-type: none; }
.choix_categorie.nav-pills .nav-item { min-width: 0; }
.choix_categorie.nav-pills .nav-link { width: 100%; min-height: 54px; justify-content: flex-start; padding: 0 14px; white-space: normal; line-height: 1.2; }
.choix_categorie.nav-pills .nav-item:first-child { grid-column: 1 / -1; }
.choix_categorie.nav-pills .nav-item:first-child .nav-link { justify-content: center; }
.choix_categorie.nav-pills .dropdown-toggle::after { margin-left: auto; }
.choix_categorie .dropdown-menu { min-width: 14rem; }
.text-center:has(> .choix_categorie) { text-align: left !important; }

/* Barre de recherche */
.barre_rechercher { margin: 0 0 14px !important; }
.barre_rechercher .input-group { flex: 0 0 100%; max-width: 100%; margin: 0; padding: 0; }
.barre_rechercher .input-group-text { min-height: 58px; font-size: 1.1rem; border-radius: var(--m-radius-sm) 0 0 var(--m-radius-sm); background: #fff; color: var(--m-brand-dark); }
.barre_rechercher .form-control { height: 58px; }
.barre_rechercher + br { display: none; }

/* Listes (list-group) hors accueil */
.list-group-item { padding: 1rem 1.1rem; min-height: var(--m-tap); }

/* Pagination / recherche de bootstrap-table */
.bootstrap-table .fixed-table-toolbar { padding: 0; }
.bootstrap-table .fixed-table-toolbar .search, .bootstrap-table .fixed-table-toolbar .float-left.search, .bootstrap-table .fixed-table-toolbar .pull-left.search { float: none !important; width: 100%; margin: 0 0 14px; }
.bootstrap-table .fixed-table-toolbar .search input { height: 58px; width: 100%; }
.bootstrap-table .fixed-table-toolbar .columns, .bootstrap-table .fixed-table-toolbar .bs-bars { margin: 0 0 12px; float: none; }
.bootstrap-table .fixed-table-container { border: 0 !important; background: transparent; }
.bootstrap-table .fixed-table-container .table thead th { border: 0; }
.bootstrap-table .fixed-table-pagination { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4px 0 0; }
.bootstrap-table .fixed-table-pagination > .float-left, .bootstrap-table .fixed-table-pagination > .float-right,
.bootstrap-table .fixed-table-pagination > .pull-left, .bootstrap-table .fixed-table-pagination > .pull-right { float: none !important; margin: 0; }
.bootstrap-table .fixed-table-pagination .pagination-detail { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; color: var(--m-muted); font-size: .95rem; }
.bootstrap-table .page-list .btn { min-height: 44px; font-size: .95rem; }
.pagination { flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; }
.pagination .page-link { display: flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; padding: 0 12px; border-radius: 12px !important; border: 0; background: #fff; box-shadow: var(--m-shadow); font-weight: 700; color: var(--m-brand-dark); }
.pagination .page-item.active .page-link { background: var(--m-brand-dark); color: #fff; }
.pagination .page-item.disabled .page-link { opacity: .45; box-shadow: none; }
.bootstrap-table .fixed-table-body { overflow: visible; }
.bootstrap-table .fixed-table-footer { display: none !important; }   /* remplacé par le bandeau .m-table-total (mobile.js) */
.bootstrap-table table.mobile-cards > tfoot { display: none !important; }   /* le vrai <tfoot> de bootstrap-table : repris dans le bandeau .m-table-total */
.m-table-total { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 14px; padding: 14px 16px; background: #e3ebf6; border-radius: 14px; color: var(--m-brand-dark); }
.m-table-total span { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.m-table-total strong { font-size: 1.35rem; font-weight: 800; }
.bootstrap-table .fixed-table-header { display: none !important; }
.bootstrap-table .fixed-table-body .no-records-found td { text-align: center !important; }

/* 11. Fenêtres modales, alertes, divers ----------------------------------- */
.modal-dialog { margin: 12px; max-width: none; }
.modal-dialog-centered { min-height: calc(100% - 24px); }
.modal-content { border: 0; border-radius: 22px; box-shadow: 0 20px 60px rgba(16, 24, 40, .35); overflow: hidden; }
.modal-header { padding: 16px 18px; align-items: center; border-bottom: 1px solid var(--m-line); }
.modal-header .close { width: 48px; height: 48px; margin: -8px -10px -8px 0; padding: 0; font-size: 2rem; display: flex; align-items: center; justify-content: center; opacity: .6; }
.modal-body { padding: 16px 18px; font-size: 1.05rem; }
.modal-footer { padding: 12px 18px 18px; border: 0; flex-direction: column-reverse; gap: 10px; }
.modal-footer > .btn, .modal-footer > * { width: 100%; margin: 0; }
.modal .card { box-shadow: none !important; }
.modal .card-footer .btn { min-height: 76px; }

/* Messages (alert_box) : bandeau fixe sous la barre du haut */
.alert {
    border: 0;
    border-radius: 14px;
    padding: 16px 52px 16px 16px;
    font-size: 1.02rem;
    font-weight: 600;
    box-shadow: 0 6px 24px rgba(16, 24, 40, .22);
}
#page > .alert, #page > .col-xs-12 > .alert {
    position: fixed !important;
    top: calc(var(--m-hdr) + 10px);
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    margin: 0 !important;
    z-index: 1060;
}
#page > .col-xs-12 { position: static; }
.alert .close { top: 0; right: 0; width: 48px; height: 100%; display: flex; align-items: center; justify-content: center; padding: 0; font-size: 1.7rem; }
p.message_erreur, .message_erreur { padding: 14px 16px; background: #fdecec; color: #b42318; border-radius: 12px; font-weight: 600; }

/* Pastilles de prix, badges */
.badge { font-size: .95rem; padding: .4em .8em; }
.badge-pill { border-radius: 999px; }
hr { margin: 1rem 0; }

/* Images et médias */
img { max-width: 100%; height: auto; }

/* 12. Plugins -------------------------------------------------------------- */
/* chosen (listes avec recherche) */
.chosen-container { width: 100% !important; font-size: 16px; }
.chosen-container-single .chosen-single {
    height: var(--m-tap);
    line-height: calc(var(--m-tap) - 4px);
    padding: 0 16px;
    border: 1.5px solid #c9d2df;
    border-radius: var(--m-radius-sm);
    background: #fff;
    box-shadow: none;
    font-size: 16px;
}
.chosen-container-single .chosen-single div { width: 44px; }
.chosen-container-single .chosen-single div b { background-position: 0 14px; }
.chosen-container .chosen-drop { border: 1.5px solid #c9d2df; border-radius: 0 0 var(--m-radius-sm) var(--m-radius-sm); }
.chosen-container .chosen-results { max-height: 46vh; }
.chosen-container .chosen-results li { padding: 14px 16px; font-size: 16px; line-height: 1.3; }
.chosen-container-single .chosen-search input[type="text"] { height: 48px; font-size: 16px; padding: 0 14px; border-radius: 10px; background-position: right 12px center; }
.chosen-container-multi .chosen-choices { min-height: var(--m-tap); padding: 6px 10px !important; border-radius: var(--m-radius-sm) !important; border: 1.5px solid #c9d2df !important; }
.chosen-container-multi .chosen-choices li.search-field input[type="text"] { height: 40px; font-size: 16px; margin: 0; }
.chosen-container-multi .chosen-choices li.search-choice { padding: 10px 28px 10px 12px; margin: 4px 6px 4px 0; font-size: 15px; border-radius: 10px; line-height: 1.2; }
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close { top: 11px; right: 8px; }

/* air-datepicker (choix de date et d'heure) */
.datepicker { width: min(94vw, 360px); font-size: 16px; border-radius: 16px; border: 0; box-shadow: 0 14px 44px rgba(16, 24, 40, .35); z-index: 2000 !important; }
.datepicker--nav { min-height: 56px; }
.datepicker--nav-title { font-size: 1.1rem; font-weight: 700; padding: 0 12px; }
.datepicker--nav-action { width: 52px; }
.datepicker--days-names { margin: 10px 0 4px; }
.datepicker--day-name { font-size: .85rem; }
.datepicker--cell { height: 46px; font-size: 1.05rem; border-radius: 12px; }
.datepicker--cell-day { width: 14.2857%; }
.datepicker--cell-month, .datepicker--cell-year { height: 56px; }
.datepicker--time { padding: 12px 14px; }
.datepicker--time-current { font-size: 1.3rem; }
.datepicker--time-row input[type="range"] { height: 34px; }
.datepicker--buttons { padding: 8px; }
.datepicker--button { height: 48px; font-size: 1rem; border-radius: 10px; }

/* Dropzone (dépôt d'images) */
.dropzone { min-height: 150px; padding: 18px; border: 2px dashed #9db6d6; border-radius: 16px; background: #f4f8fd; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; }
.dropzone .dz-message { margin: 1rem 0; font-size: 1.1rem; font-weight: 700; color: var(--m-brand-dark); text-align: center; width: 100%; }
.dropzone .dz-preview { margin: 6px; }
.dropzone .dz-fallback input[type="file"] { width: 100%; }

/* FullCalendar : barre d'outils sur 2 lignes, cases plus hautes, vue liste lisible */
#calendrier { flex: 0 0 100%; max-width: 100%; margin: 0 !important; padding: 0; }
.fc { font-size: 1rem; }
.fc .fc-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.fc .fc-toolbar .fc-center { order: -1; flex: 0 0 100%; text-align: center; }
.fc .fc-toolbar h2 { font-size: 1.4rem; text-transform: capitalize; margin: 0; }
.fc .fc-toolbar .fc-left, .fc .fc-toolbar .fc-right { float: none; display: flex; flex-wrap: wrap; gap: 8px; }
.fc .fc-toolbar .fc-left:empty { display: none; }
.fc .fc-toolbar .fc-right { flex: 0 0 100%; justify-content: space-between; }
.fc .btn, .fc .fc-button { min-height: 48px; min-width: 48px; font-size: 1rem; padding: 0 1rem; border-radius: 12px; }
.fc .btn-group { display: inline-flex; gap: 6px; }
.fc .btn-group > .btn { border-radius: 12px !important; }
.fc-view-container { background: var(--m-card); border-radius: 16px; padding: 6px; box-shadow: var(--m-shadow); overflow: hidden; }
.fc-unthemed td, .fc-unthemed th, .fc td.fc-widget-content, .fc th.fc-widget-header { border-color: var(--m-line); }
.fc-day-header { font-size: .78rem; padding: 8px 0 !important; text-transform: uppercase; }
.fc-day-top { padding: 3px 4px 0 !important; font-size: .9rem; }
.fc-event { font-size: .72rem; padding: 2px 3px; border-radius: 4px; }
.fc-list-view { border: 0 !important; }
.fc-list-heading td { padding: 12px 14px; font-size: 1rem; }
.fc-list-item td { padding: 16px 14px; font-size: 1.05rem; }
.fc-list-empty { padding: 36px 14px; font-size: 1.05rem; }

/* ---------- Finitions : boutons d'envoi hors .m-form, listes à choix multiples ---------- */
#page form .text-center > .btn[type="submit"], #page form .text-center > input[type="submit"] { width: 100%; min-height: 58px; margin-top: 10px; }
#page select[multiple] { width: 100%; }

/* Listes déroulantes "nues" (sans classe Bootstrap), ex. rangement dans modifier_materiel.php */
#page select.input_text:not(.form-control):not([multiple]) {
    display: block; width: 100%; min-height: 56px; margin-top: 6px; padding: .6rem 3rem .6rem 1rem;
    font-size: 16px; color: #212529; background-color: #fff; border: 1px solid #ced4da; border-radius: 12px;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5l5.5 5.5 5.5-5.5' fill='none' stroke='%23325781' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 1.1rem center; background-size: 14px 9px;
}

/* Sécurité : une ligne dépliée garde son aspect de carte même si un ancien search.js (en cache) force "table-row" */
.table_search tr[style*="table-row"] { display: grid !important; }
.table_search tr[style*="table-row"]:has(> td:nth-child(3)) { grid-template-columns: minmax(0, 1fr) auto; }


/* ---------- Liste du matériel : rangements bien distincts ---------- */
.table_search tr.m-rg-head { margin-top: 22px; }
.table_search tr.m-rg-head > td.td-rangement {
    gap: 10px; padding: 8px 8px 8px 14px !important; min-height: 60px;
    background: #f3dedb; color: #8a3b3b !important; border-radius: 16px; cursor: pointer;
    box-shadow: 0 2px 0 rgba(138, 59, 59, .10);
    -webkit-tap-highlight-color: transparent;
}
.table_search tr.m-rg-head > td.td-rangement::before { content: "\f187"; color: #a14a4a; font-size: 1.1rem; }
.table_search tr.m-rg-head > td.td-rangement > a:not(.m-rg-link) { flex: 1 1 auto; min-width: 0; color: inherit !important; line-height: 1.25; pointer-events: none; }
.m-rg-count {
    flex: 0 0 auto; min-width: 28px; padding: 2px 9px; border-radius: 999px; text-align: center;
    background: rgba(255, 255, 255, .75); color: #8a3b3b; font-size: .85rem; font-weight: 800;
}
.table_search td.td-rangement a.m-rg-link {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px;
    border-radius: 12px; background: #fff; color: #8a3b3b !important; font-size: 1rem; text-decoration: none !important; box-shadow: var(--m-shadow);
}
.table_search td.td-rangement a::after { content: none !important; }   /* pas de zone cliquable étendue dans les bandeaux de rangement */
.table_search td.td-rangement a.m-rg-link:active { background: #fbeceb; }
.m-rg-chev { flex: 0 0 auto; width: 28px; text-align: center; font-size: .95rem; color: #a14a4a; transition: transform .2s; }
.table_search tr.m-rg-closed .m-rg-chev { transform: rotate(-90deg); }

/* cartes du rangement : fond chaud léger + rail coloré à gauche, reliées au bandeau */
.table_search tr.m-rg-item:has(> td:nth-child(3)) {
    margin-left: 10px; background: #fff9f7; border-radius: 6px 14px 14px 6px;
    box-shadow: inset 5px 0 0 #d9a3a0, var(--m-shadow);
    padding-left: 22px;
}
.table_search tr.m-rg-item:has(> td:nth-child(3)):active { background: #f8ece8; }
.table_search tr.m-rg-item + tr.m-rg-head { margin-top: 26px; }

/* rangement "Sans rangement" : teinte neutre */
.table_search tr.m-rg-none > td.td-rangement { background: #e6ebf2; color: var(--m-brand-dark) !important; box-shadow: 0 2px 0 rgba(50, 87, 129, .10); }
.table_search tr.m-rg-none > td.td-rangement::before { color: var(--m-brand-dark); }
.table_search tr.m-rg-none .m-rg-count, .table_search tr.m-rg-none .m-rg-chev { color: var(--m-brand-dark); }
.table_search tr.m-rg-none.m-rg-item:has(> td:nth-child(3)) { background: #f8fafc; box-shadow: inset 5px 0 0 #b4c4d8, var(--m-shadow); }

/* replié / masqué */
.table_search tr.m-rg-collapsed { display: none !important; }
.table_search tr.m-rg-empty .m-rg-chev { display: none; }


/* Formulaires : les lignes/colonnes Bootstrap n'ont plus de marges négatives (champs et cases alignés) */
.m-form .row, form.card-body .row { margin-left: 0; margin-right: 0; }
.m-form .row > [class*="col"]:not(:has(> input[type="checkbox"])), form.card-body .row > [class*="col"]:not(:has(> input[type="checkbox"])) { padding-left: 0; padding-right: 0; }
/* un peu d'air entre le bandeau de titre et le formulaire */
.card > .card-header + form.m-form { padding: 18px 18px 22px; }