@charset "utf-8";
/* ════════════════════════════════════════════════════════════════════════
   DIGITS · SURCHARGES — fichier dédié, imposé par iManage/README.md
   ─────────────────────────────────────────────────────────────────────────
   `app.css` reste du MÉTIER PUR. Ce qui corrige le socle ou Bootstrap vit
   ici, et nulle part ailleurs — pour qu'on sache toujours, d'un coup d'œil,
   ce que le projet contredit et pourquoi.

   Ordre de chargement : bootstrap → composants iManage → override.css → app.css

   Chaque règle porte sa raison. Une surcharge sans justification est une
   dette : au bout de six mois, personne ne sait plus si on peut la retirer.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. Contrôles de session : des BOUTONS, pas des spans ────────────────
   `menu.css` style `.session_controls` en supposant un <span> : il pose la
   taille, l'opacité et la couleur, mais ne neutralise aucun style natif —
   il n'en avait pas besoin.

   DIGITS rend « Recharger » et « Se déconnecter » avec de vrais <button> :
   un <span> cliquable n'est pas atteignable au clavier et n'a pas de nom
   accessible. Le navigateur leur applique alors SON chrome — fond gris,
   bordure, coins arrondis — et les deux icônes apparaissent enfermées dans
   une boîte, à côté du sélecteur de thème resté span et donc nu
   (constaté 06/09/2026).

   On enlève le chrome et on garde le bouton. Le focus reste visible : c'est
   la contrepartie non négociable du passage au <button>. */
button.session_controls {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--text-on-dark);
    border-radius: var(--radius-sm);
}
button.session_controls:focus { outline: none; }
button.session_controls:focus-visible {
    outline: none;
    opacity: 1;
    box-shadow: var(--shadow-focus);
}

/* ── 2. Filtres de l'entête : des listes déroulantes SUR LA RANGÉE ───────
   `.im-page-actions` est une rangée flex, mais le socle ne style que ses
   enfants `.btn` et `.im-cta` — il n'a jamais prévu de `<select>` parmi eux.
   Bootstrap, lui, pose `width: 100%` sur `.form-select` : avec `flex: 0 1 auto`,
   la base de flex vaut cette largeur, et chaque filtre prend la rangée
   entière. Résultat, deux filtres et un bouton s'empilaient en trois barres
   pleine largeur au-dessus du contenu (constaté 06/09/2026).

   RÈGLE DU PROJET : un filtre est TOUJOURS une liste déroulante, et il vit
   sur la rangée de titre, à droite, avant le bouton principal. Cette règle
   tient ici — pas dans chaque écran — pour qu'aucun écran ne puisse y
   échapper par oubli. */
.im-page-actions > .form-select,
.im-page-actions > .form-control,
.im-page-actions > .dg-filtre {
    width: auto;
    flex: 0 0 auto;
}

/* Sous 768px la rangée passe en colonne : les filtres reprennent alors toute
   la largeur, c'est voulu — un menu déroulant étroit se vise mal au doigt. */
@media (max-width: 767.98px) {
    .im-page-actions > .form-select,
    .im-page-actions > .form-control,
    .im-page-actions > .dg-filtre {
        width: 100%;
        flex: 1 1 100%;
    }
}

/* ── 3. Rangée de recherche d'un `tile_view` : la recherche à gauche, les
   filtres de l'écran à droite ─────────────────────────────────────────────
   `tile_view` rend son entête avec un seul bloc `.lv-actions` contenant le
   champ de recherche ; il n'offre aucun point d'insertion pour les filtres de
   l'écran. Ceux-ci y sont déménagés après le montage (cf. `rprt_clients.php`,
   `placerFiltres()`), ce qui suppose que la rangée sache les placer.

   Sans `flex: 1 1 auto`, `.lv-actions` se dimensionne sur son contenu et le
   groupe recherche + filtres se tasse à gauche de la rangée. */
.lv-header > .lv-actions {
    flex: 1 1 auto;
    justify-content: space-between;
}
.lv-header > .lv-actions > .dg-barre-filtres {
    margin-left: auto;
    padding-bottom: 0;
}

/* ── 4. Hauteur unique des boutons : 30px, bordure comprise ───────────────
   Le socle et Bootstrap donnent trois hauteurs de bouton selon la taille et le
   contenu (icône seule, icône + texte, `.btn-sm`). Alignés sur une même rangée,
   ils se décalent de deux ou trois pixels — assez pour que la rangée paraisse
   bancale sans qu'on sache pourquoi.

   `box-sizing: border-box` est ce qui rend la mesure vraie : sans lui, les 30px
   s'entendraient hors bordure et le bouton en ferait 32. `inline-flex` centre le
   contenu quelle que soit la hauteur de ligne de l'icône. */
.btn,
.btn-sm,
.btn-lg {
    box-sizing: border-box;
    height: 30px;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1;
}
/* Un bouton qui ne porte qu'une icône reste carré : un rectangle large autour
   d'un seul glyphe se lit comme un bouton vide. */
.btn > .bi:only-child { margin: 0; }

/* ── 5. Filet sous le fil d'Ariane ────────────────────────────────────────
   Il sépare la navigation du contenu de l'écran. 1px, comme partout. */
#breadcrumb_bar {
    border-bottom: 1px solid var(--border-color);
}

/* ── 6. Fond de page ─────────────────────────────────────────────────────
   Demande du propriétaire (06/09/2026) : `html` porte #FAFAFB, `body` reste
   transparent.

   Le socle tient déjà cette architecture — `imanage.css` pose le fond plein sur
   `html` et laisse `body` transparent pour que son voile deux-tons
   (`body::after`, fixé, 5/12 de la largeur à droite) reste visible. Seule la
   TEINTE change ici : --bg-surface est le blanc pur des cartes, et le porter
   aussi en fond de page effaçait la limite entre la page et ce qui est posé
   dessus. #FAFAFB laisse ce demi-ton d'écart.

   La valeur passe par un jeton : une couleur écrite en dur se retrouve
   dupliquée trois écrans plus loin sans qu'on sache laquelle fait foi. */
html { background: var(--bg-page); }