/* Generated by OrchestKit Claude Plugin - 2026-09-15 */

/* ═══════════════════════════════════════════════════════════════════════
   Hotel229 — les composants partagés
   ═══════════════════════════════════════════════════════════════════════

   POURQUOI CE FICHIER

   Les jetons donnent les valeurs ; il manquait l'endroit où l'on décide
   à quoi ressemble un panneau, un tableau, un champ ou un bouton. Faute
   de cet endroit, chaque écran l'a décidé pour lui-même, dans un
   <style> local.

   Le constat qui a décidé de la forme de ce fichier : sur les deux
   enveloppes qui portent la majorité des écrans — base_form (27) et
   base_table (22) — le bloc {% block stylesheets %} est VIDE. Il écrase
   celui de main.html.twig, qui est le seul à charger dashbord2.css.
   Ces quarante-neuf écrans ne recevaient donc AUCUNE feuille de
   l'application : ils s'affichaient en Bootstrap brut, quand les douze
   autres recevaient la palette bleu-canard de dashbord2.

   Deux familles d'écrans, deux apparences, pour une raison que rien ne
   signalait.

   COMMENT

   Ce fichier est chargé par head-css.html.twig — le seul partiel inclus
   par les DEUX bases, et qu'aucun écran ne peut neutraliser. Il vient
   après Bootstrap (title-meta) et après les jetons, avant le bloc
   stylesheets : il gagne sur Bootstrap, et un écran garde le dernier mot.

   Il s'exprime dans le VOCABULAIRE DÉJÀ ÉCRIT dans les gabarits — .btn,
   .card, .table, .form-control, .badge — plutôt qu'en classes nouvelles.
   C'est délibéré : redessiner ce que le balisage porte déjà touche les
   soixante et un écrans sans en rouvrir un seul. Les rares classes
   --h229 ajoutées ici nomment ce que Bootstrap n'a pas : le chapeau de
   titre et le grand chiffre.

   LA RÈGLE QUI GOUVERNE L'ENSEMBLE, tirée de la maquette approuvée :

       ON TAPE  → encadré. Caisse, check-in, formulaires : le champ a un
                  fond blanc, une bordure franche, 46 px de haut. La
                  cible se voit sans être cherchée.
       ON LIT   → filets. Tableaux de bord, récapitulatifs, tableaux :
                  des traits fins, aucune boîte, aucune ombre portée.

   Le laiton ne sert qu'à UNE action par écran, la plus attendue de la
   journée. Sur un fond laiton le texte reste encre : du blanc n'y
   donnerait qu'un contraste de 2 pour 1.
   ═══════════════════════════════════════════════════════════════════════ */


/* ── LA PAGE ──────────────────────────────────────────────────────────
   Le fond ivoire et les deux familles de caractères. Les gabarits
   déclaraient 'Syne' et 'DM Sans' au petit bonheur ; ici la règle est
   unique : DM Sans pour ce qui se lit, Newsreader pour ce qui se
   compare — les titres et TOUS les chiffres. */

body {
    background: var(--h229-bg);
    color: var(--h229-text);
    font-family: var(--h229-sans);
    font-weight: 400;
    font-size: 15.5px;
    line-height: 1.6;
    /* Pas de -webkit-font-smoothing: antialiased. Il amincit le texte
       clair sur fond sombre, et c'est lui qui rendait grisatres les
       titres blancs des bandeaux bleus. Le rendu par defaut est plus
       epais, donc plus franc. */
}

h1, h2, h3, h4, h5, h6,
.card-title, .table-title, .page-header-title {
    font-family: var(--h229-serif);
    font-weight: 700;
    color: var(--h229-text);
    letter-spacing: -.01em;
}

h1 { font-size: 34px; font-weight: 800; line-height: 1.1; }
h2 { font-size: 26px; }
h3 { font-size: 22px; }
h4, .table-title, .card-title { font-size: 20px; }

a { color: var(--h229-gold-dk); text-decoration: none; }
a:hover { color: var(--h229-text); }

.text-muted { color: var(--h229-muted) !important; }

/* Le chapeau de titre : la petite ligne en capitales au-dessus d'un
   titre, qui dit de quel module on parle. */
.h229-chapeau {
    font-size: 11.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--h229-warning-dk);
    margin: 0 0 8px;
}


/* ── LE PANNEAU ───────────────────────────────────────────────────────
   L'unité de contenu. Un trait, pas une ombre : la maquette tient par
   les filets. L'ombre des jetons reste disponible pour ce qui flotte
   VRAIMENT au-dessus du reste — une modale, un menu déroulant. */

.card,
.dashboard-card,
.table-card-content {
    background: var(--h229-card);
    border: 1px solid var(--h229-border);
    border-radius: var(--h229-radius);
    box-shadow: none;
}

/* dashbord2.css soulève la carte au survol. Sur un tableau de bord où
   dix cartes se touchent, ce mouvement est du bruit : une carte qui
   n'est pas cliquable n'a pas à réagir. */
.card:hover,
.card:active {
    box-shadow: none;
    transform: none;
}

.card-body { padding: 22px 24px; }

.card-header,
.bg-info-header,
.border-bottom-dashed {
    background: transparent;
    border-bottom: 1px solid var(--h229-line);
    padding: 18px 24px;
}

.card-footer {
    background: transparent;
    border-top: 1px solid var(--h229-line-2);
    padding: 16px 24px;
}


/* ── LE TABLEAU ───────────────────────────────────────────────────────
   On le LIT : en-tête en capitales fines, filets horizontaux seuls,
   aucune bordure verticale, aucune zébrure. Les montants alignés en
   chiffres tabulaires — c'est ce qui permet de comparer deux totaux
   d'un coup d'œil sans les lire. */

.table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: var(--h229-hover);
    color: var(--h229-text);
    font-size: 15.5px;
    margin-bottom: 0;
}

.table > thead th,
.table tr > th {
    font-family: var(--h229-sans);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--h229-muted);
    background: transparent;
    border-bottom: 1px solid var(--h229-border);
    padding: 14px 18px;
    white-space: nowrap;
}

.table > tbody td {
    font-weight: 400;
    border-bottom: 1px solid var(--h229-line-2);
    border-top: none;
    padding: 14px 18px;
    vertical-align: middle;
}

.table > tbody tr:last-child td { border-bottom: none; }

.table-light,
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background: transparent;
    --bs-table-accent-bg: transparent;
}

/* Tout ce qui est un nombre s'aligne. */
.table .num, .table .text-end, .table .text-right,
.kpi-val, .info-value, .h229-chiffre b {
    font-variant-numeric: tabular-nums;
}


/* ── LE CHIFFRE ───────────────────────────────────────────────────────
   Le total d'un récapitulatif, la valeur d'un indicateur. Newsreader
   fin et grand, l'unité en petit à côté : c'est ce qu'on vient
   chercher sur l'écran, et rien d'autre ne doit lui disputer la place.
   .kpi-val et .info-value existaient déjà dans les gabarits — elles
   reçoivent le même traitement plutôt qu'un nom de plus. */

.h229-chiffre, .kpi-val {
    font-family: var(--h229-serif);
    font-weight: 800;
    font-size: 30px;
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--h229-text);
}

.h229-chiffre .unite {
    font-family: var(--h229-sans);
    font-size: 13px;
    font-weight: 400;
    color: var(--h229-muted);
    margin-left: 6px;
}

.kpi-label, .info-label, .form-label {
    font-family: var(--h229-sans);
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--h229-muted);
    margin-bottom: 7px;
}


/* ── LE CHAMP ─────────────────────────────────────────────────────────
   ON TAPE : encadré, fond blanc, 46 px. L'anneau de focus ACCOMPAGNE
   le changement de bordure, il ne le remplace pas — l'indicateur qui
   compte pour l'accessibilité reste l'outline, plus bas. */

.form-control,
.form-select,
.input-group-text {
    height: 46px;
    background: var(--h229-card);
    border: 1px solid var(--h229-line);
    border-radius: var(--h229-radius);
    padding: 0 14px;
    font-family: var(--h229-sans);
    font-size: 16px;
    font-weight: 400;
    color: var(--h229-text);
    box-shadow: none;
}

textarea.form-control { height: auto; min-height: 92px; padding: 12px 14px; }

.form-control-sm, .form-select-sm { height: 40px; font-size: 15px; }

.form-control:focus,
.form-select:focus {
    border-color: var(--h229-navy);
    box-shadow: var(--h229-ring);
    background: var(--h229-card);
}

.form-control::placeholder { color: var(--h229-placeholder); font-weight: 400; }

.form-check-input:checked {
    background-color: var(--h229-navy);
    border-color: var(--h229-navy);
}
.form-check-input:focus { box-shadow: var(--h229-ring); border-color: var(--h229-navy); }
.form-check-label { font-weight: 400; }


/* ── LES BOUTONS ──────────────────────────────────────────────────────
   Une seule action principale par écran, en laiton plein. Tout le
   reste en contour fin : jamais deux boutons pleins côte à côte, sans
   quoi l'écran ne dit plus ce qu'il attend. */

.btn {
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: var(--h229-radius);
    font-family: var(--h229-sans);
    font-size: 15px;
    font-weight: 500;
    padding: 0 20px;
    box-shadow: none;
    transition: background-color .12s, border-color .12s, color .12s;
}

.btn-sm { height: 38px; font-size: 14px; padding: 0 15px; }

/* L'action attendue. Texte encre : sur ce laiton, du blanc ne donnerait
   qu'un contraste de 2 pour 1. */
.btn.btn-primary,
.btn-pos, .btn-hb, .btn-custom {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--h229-navy);
    --bs-btn-border-color: var(--h229-navy);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--h229-navy-2);
    --bs-btn-hover-border-color: var(--h229-navy-2);
    --bs-btn-active-bg: var(--h229-navy-3);
    --bs-btn-active-border-color: var(--h229-navy-3);
    background: var(--h229-navy);
    border-color: var(--h229-navy);
    color: #ffffff;
    font-weight: 600;
}
.btn.btn-primary:hover,
.btn-pos:hover, .btn-hb:hover, .btn-custom:hover {
    background: var(--h229-navy-2);
    border-color: var(--h229-navy-2);
    color: #ffffff;
}

/* Tout le reste : un contour. */
.btn.btn-secondary,
.btn-outline-primary, .btn-outline-secondary, .btn-pos-outline {
    --bs-btn-color: var(--h229-navy);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--h229-line);
    --bs-btn-hover-color: var(--h229-text);
    --bs-btn-hover-bg: var(--h229-hover);
    --bs-btn-hover-border-color: var(--h229-navy);
    background: transparent;
    border: 1px solid var(--h229-line);
    color: var(--h229-navy);
}
.btn.btn-secondary:hover,
.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-pos-outline:hover {
    background: var(--h229-hover);
    border-color: var(--h229-navy);
    color: var(--h229-text);
}

/* Les boutons d'état gardent leur couleur — elle dit ce que l'action
   fait — mais passent au contour : une suppression n'est jamais
   l'action principale d'un écran. */
.btn-success, .btn-outline-success {
    background: transparent;
    border: 1px solid var(--h229-success);
    color: var(--h229-success);
}
.btn-success:hover, .btn-outline-success:hover {
    background: var(--h229-success-pale);
    border-color: var(--h229-success);
    color: var(--h229-success-dk);
}

.btn-danger, .btn-outline-danger {
    background: transparent;
    border: 1px solid var(--h229-danger);
    color: var(--h229-danger);
}
.btn-danger:hover, .btn-outline-danger:hover {
    background: var(--h229-danger-pale);
    border-color: var(--h229-danger);
    color: var(--h229-danger-dk);
}


/* ── LA PASTILLE ──────────────────────────────────────────────────────
   Elle porte un ÉTAT — payée, en cours, en rupture — jamais une
   décoration. Fond pâle et texte foncé : lisible sans crier. */

.badge {
    font-family: var(--h229-sans);
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: .02em;
    border-radius: var(--h229-radius-sm);
    padding: 5px 10px;
}

.badge.bg-success, .bg-success-subtle { background: var(--h229-success-pale) !important; color: var(--h229-success-dk) !important; }
.badge.bg-danger,  .bg-danger-subtle  { background: var(--h229-danger-pale)  !important; color: var(--h229-danger-dk)  !important; }
.badge.bg-warning, .bg-warning-subtle { background: var(--h229-warning-pale) !important; color: var(--h229-warning-dk) !important; }
.badge.bg-primary, .bg-primary-subtle { background: var(--h229-info-pale)    !important; color: var(--h229-info)       !important; }
.badge.bg-secondary, .bg-light        { background: var(--h229-bg)           !important; color: var(--h229-muted)      !important; }


/* ── LA FENÊTRE ET LES ONGLETS ────────────────────────────────────────
   Ce qui flotte au-dessus du reste est le seul endroit où l'ombre
   longue des jetons est justifiée. */

.modal-content {
    background: var(--h229-card);
    border: 1px solid var(--h229-border);
    border-radius: var(--h229-radius-lg);
    box-shadow: var(--h229-shadow-lg);
}
.modal-header, .modal-footer { border-color: var(--h229-line-2); padding: 18px 24px; }
.modal-body { padding: 22px 24px; }
.modal-title { font-family: var(--h229-serif); font-weight: 400; font-size: 20px; }

.nav-tabs { border-bottom: 1px solid var(--h229-border); }
.nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--h229-muted);
    font-size: 14px;
    font-weight: 400;
    padding: 11px 16px;
}
.nav-tabs .nav-link.active {
    background: transparent;
    color: var(--h229-text);
    border-bottom-color: var(--h229-gold);
}


/* ── L'ALERTE ─────────────────────────────────────────────────────────
   Les messages flash.

   Ils portaient d'abord un liséré de couleur sur le bord gauche. Retiré :
   l'état est DÉJÀ dit deux fois, par le fond pâle et par la couleur du
   texte. Un troisième marquage n'ajoute pas de lisibilité, et ce rail
   latéral est le tic le plus reconnaissable des interfaces dessinées à
   la va-vite. La bordure fait le tour, comme sur tout le reste. */

.alert {
    border: 1px solid var(--h229-border);
    border-radius: var(--h229-radius);
    font-size: 15px;
    font-weight: 400;
    padding: 14px 17px;
}
.alert-success { background: var(--h229-success-pale); border-color: var(--h229-success-line); color: var(--h229-success-dk); }
.alert-danger  { background: var(--h229-danger-pale);  border-color: var(--h229-danger-line); color: var(--h229-danger-dk); }
.alert-warning { background: var(--h229-warning-pale); border-color: var(--h229-warning-line); color: var(--h229-warning-dk); }
.alert-info    { background: var(--h229-info-pale);    border-color: var(--h229-info-line); color: var(--h229-text); }


/* ── L'ACCESSIBILITÉ ──────────────────────────────────────────────────
   Un seul indicateur de focus pour toute l'application, visible sur
   l'ivoire comme sur le blanc. Il était absent de la plupart des
   écrans : au clavier, on ne savait pas où l'on était. */

:focus-visible {
    outline: 2px solid var(--h229-navy-2);
    outline-offset: 2px;
    border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}


/* ── LA COQUILLE ──────────────────────────────────────────────────────
   La colonne de navigation, l'en-tête, le corps de page.

   Elle n'était décrite que dans dashbord2.css, donc uniquement sur les
   douze écrans qui chargent cette feuille. Sur les quarante-neuf autres
   la colonne s'affichait sans fond ni largeur : une liste de liens
   empilée sur l'ivoire. C'est la rupture la plus voyante de
   l'application, et la raison pour laquelle la coquille descend ici —
   elle appartient à tous les écrans, pas à une mise en page.

   Ardoise pleine, pas de dégradé : le dégradé bleu-canard de
   dashbord2 ne survit pas à la direction retenue. */

#header {
    height: 60px;
    background: var(--h229-card);
    border-bottom: 1px solid var(--h229-border);
    box-shadow: none;
    padding: 0;
}
#header .logo-text {
    font-family: var(--h229-serif);
    font-weight: 400;
    font-size: 19px;
    letter-spacing: 0;
    text-transform: none !important;
    color: var(--h229-text) !important;
}

.sidebar {
    width: var(--sidebar-width, 250px);
    position: fixed;
    top: 60px;
    left: 0;
    height: calc(100% - 60px);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    overflow: auto;
    background: var(--h229-menu);
    padding: 18px 0 22px;
}

.sidebar .nav-link,
.sidebar .navbar-nav .nav-link {
    display: flex;
    align-items: center;
    color: #ffffff;
    font-family: var(--h229-sans);
    font-size: 15.5px;
    font-weight: 500;
    padding: 10px 20px;
    margin: 0;
    border-radius: 0;
    transition: background-color .12s;
}
.sidebar .nav-link i { color: #ffffff; margin-right: .55rem; font-size: 1.05rem; opacity: .85; }
.sidebar .nav-link:hover { background: rgba(255, 255, 255, .09); }

/* L'écran courant : un filet de laiton en bordure interne plutôt qu'un
   pavé clair. La colonne reste d'une seule teinte, et l'œil trouve
   quand même où il est. */
.sidebar a.nav-link.menu-link.active,
.sidebar a.nav-link.active {
    background: var(--h229-menu-actif);
    box-shadow: inset 3px 0 0 #ffffff;
    color: #ffffff;
    font-weight: 500;
    border-radius: 0;
    margin-right: 0;
}
.sidebar a.nav-link.menu-link.active i { color: #ffffff; opacity: 1; }

/* Les intertitres de la colonne : ils séparent les métiers. */
.sidebar .menu-title,
.sidebar .nav-item.line-section {
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--h229-sur-ardoise);
    opacity: 1;
    padding: 20px 20px 8px;
}

.sidebar .menu-dropdown .nav-link {
    padding-left: 3rem;
    font-size: 15px;
    color: #ffffff;
}
.sidebar .menu-dropdown .nav-link i { display: none; }

/* Le champ de recherche de la colonne : sur l'ardoise, la bordure
   claire du champ standard disparaîtrait. */
.sidebar-header .form-control {
    height: 36px;
    background: rgba(255, 255, 255, .12);
    border: none;
    color: #ffffff;
    font-size: 13.5px;
}
.sidebar-header .form-control::placeholder { color: #ffffff; }
.sidebar-header .btn { height: 36px; background: rgba(255, 255, 255, .12); border: none; color: #ffffff; }

.main-content { margin-left: var(--sidebar-width, 250px); padding-top: 60px; }
.page-content { padding: 24px 28px 40px; background: var(--h229-bg); }

/* Le titre de page. Un seul h1 par écran, au-dessus d'un filet. */
.page-header-title {
    font-family: var(--h229-serif);
    font-weight: 700;
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: -.01em;
    color: var(--h229-text);
}
.page-content .border-bottom { border-color: var(--h229-line) !important; }

.footer { background: transparent; border-top: 1px solid var(--h229-border); color: var(--h229-muted); font-size: 13px; }

@media (max-width: 991px) {
    .sidebar { transform: translateX(-100%); transition: transform .2s; }
    .sidebar.show { transform: none; }
    .main-content { margin-left: 0; }
    .page-content { padding: 18px 16px 32px; }
}


/* ── LE CHAMP SELECT2 ─────────────────────────────────────────────────
   La recherche de client, de produit, de chambre. C'est un CHAMP : il
   suit donc la meme regle que les autres — fond blanc au repos, 46 px,
   bordure franche.

   Il etait decrit dans un seul gabarit, le check-in, avec un fond
   ivoire au repos qui ne passait au blanc qu'au focus : l'inverse de
   la regle, et le champ se confondait avec la page. Partout ailleurs
   Select2 gardait son apparence d'origine, sans rapport avec le reste
   de l'application. */

.select2-container--default .select2-selection--single {
    height: 46px;
    background: var(--h229-card);
    border: 1px solid var(--h229-line);
    border-radius: var(--h229-radius);
    display: flex;
    align-items: center;
}
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--h229-navy);
    box-shadow: var(--h229-ring);
    background: var(--h229-card);
    outline: none;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    font-family: var(--h229-sans);
    font-size: 15px;
    font-weight: 400;
    color: var(--h229-text);
    line-height: 44px;
    padding-left: 14px;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #767a82;
    font-weight: 400;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px; right: 10px; }
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--h229-muted) transparent transparent transparent;
}

.select2-dropdown {
    border: 1px solid var(--h229-border);
    border-radius: var(--h229-radius);
    box-shadow: var(--h229-shadow-lg);
    overflow: hidden;
    font-family: var(--h229-sans);
}
.select2-container--default .select2-results__option { font-size: 14.5px; font-weight: 400; padding: 10px 14px; }
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--h229-hover);
    color: var(--h229-text);
}


/* ── LES TABLEAUX DATATABLES ──────────────────────────────────────────
   Quatre ecrans — services, employes, postes, types d'hebergement — les
   affichaient dans l'habillage d'origine de la bibliotheque : pagination
   bleu vif, zebrure grise, champ de recherche etranger au reste. C'est
   la rupture la plus voyante de l'application, parce qu'elle occupe tout
   l'ecran et qu'elle ne ressemble a rien d'autre.

   Rien ici ne change le comportement du tableau : seulement ce que la
   bibliotheque dessine autour. */

.dataTables_wrapper { font-family: var(--h229-sans); font-size: 15px; }

.dataTables_length,
.dataTables_filter,
.dataTables_info,
.dataTables_paginate {
    color: var(--h229-muted);
    font-size: 14px;
    padding: 12px 0;
}

.dataTables_length select,
.dataTables_filter input {
    height: 38px;
    background: var(--h229-card);
    border: 1px solid var(--h229-line);
    border-radius: var(--h229-radius);
    padding: 0 12px;
    margin: 0 8px;
    font-family: var(--h229-sans);
    font-size: 14px;
    color: var(--h229-text);
}
.dataTables_filter input:focus,
.dataTables_length select:focus {
    border-color: var(--h229-navy);
    box-shadow: var(--h229-ring);
    outline: none;
}

/* La pagination : le bleu vif de la bibliotheque devient de l'ardoise,
   et la page courante se marque par un aplat, pas par une couleur
   etrangere a la palette. */
.dataTables_paginate .paginate_button,
.pagination .page-link {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: var(--h229-radius-sm) !important;
    color: var(--h229-navy) !important;
    padding: 6px 12px !important;
    margin: 0 2px;
    font-size: 13px;
}
.dataTables_paginate .paginate_button:hover,
.pagination .page-link:hover {
    background: var(--h229-hover) !important;
    border-color: var(--h229-line) !important;
    color: var(--h229-text) !important;
}
.dataTables_paginate .paginate_button.current,
.pagination .page-item.active .page-link {
    background: var(--h229-navy) !important;
    border-color: var(--h229-navy) !important;
    color: #ffffff !important;
}
.dataTables_paginate .paginate_button.disabled,
.pagination .page-item.disabled .page-link {
    color: var(--h229-muted) !important;
    opacity: .5;
}

/* Les fleches de tri : des reperes, pas des images bleues. */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    color: var(--h229-muted);
    border-bottom: 1px solid var(--h229-border);
}
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc { color: var(--h229-text); }


/* ── LES ICONES D'ACTION D'UNE LIGNE ──────────────────────────────────
   Voir, modifier, supprimer. Elles etaient en vert, bleu et rouge vifs —
   trois couleurs saturees par ligne, repetees sur vingt lignes, qui
   crient plus fort que les donnees qu'elles accompagnent.

   Elles passent en ardoise ; seule la suppression garde sa couleur, et
   seulement au survol : c'est la seule des trois qu'on ne peut pas
   defaire. */

.action-icons a,
.action-icons i,
td .action-icons a i {
    color: var(--h229-navy);
    font-size: 1.05rem;
    text-decoration: none;
    transition: color .12s;
}
.action-icons a:hover i { color: var(--h229-text); }
.action-icons a.text-danger i,
.action-icons .ri-delete-bin-line { color: var(--h229-muted); }
.action-icons a.text-danger:hover i,
.action-icons .ri-delete-bin-line:hover { color: var(--h229-danger); }

/* Le meme motif, ecrit autrement : douze ecrans posent les trois actions
   dans une <ul class="list-inline"> et les colorent avec les utilitaires
   Bootstrap — text-success pour voir, text-primary pour modifier,
   text-danger pour supprimer. Trois couleurs saturees par ligne.

   On ne les neutralise que DANS UNE CELLULE : ailleurs, text-success sur
   un montant ou text-danger sur une alerte veut dire quelque chose. */
td .list-inline-item a.text-success i,
td .list-inline-item a.text-primary i,
td .list-inline-item a.text-info i {
    color: var(--h229-navy);
}
td .list-inline-item a:hover i { color: var(--h229-text); }
td .list-inline-item a.text-danger i { color: var(--h229-muted); }
td .list-inline-item a.text-danger:hover i { color: var(--h229-danger); }
td .list-inline-item a i { font-size: 1rem; transition: color .12s; }

/* UNE SEULE CIBLE POUR UNE ACTION DE LIGNE.

   Douze ecrans posaient l'icone nue, huit la posaient dans un bouton
   encadre. Ni l'un ni l'autre n'etait majoritaire, et les deux se
   croisaient d'un ecran a l'autre.

   L'encadre l'emporte pour une raison qui n'est pas de gout : une icone
   nue de 16 px est une cible de 16 px. Encadree, elle en fait 32 — et
   ces trois actions sont ce qu'on clique le plus dans l'application.

   C'est fait ICI plutot que dans les douze gabarits : une regle a
   relire, et rien a defaire ailleurs si la decision change. */
td .list-inline-item,
td .action-icons li {
    margin-right: 4px;
}
td .list-inline-item a,
td .action-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--h229-line);
    border-radius: var(--h229-radius-sm);
    background: var(--h229-card);
    transition: background-color .12s, border-color .12s;
}
td .list-inline-item a:hover,
td .action-icons a:hover {
    background: var(--h229-hover);
    border-color: var(--h229-navy);
}
td .list-inline-item a.text-danger:hover,
td .action-icons a.text-danger:hover {
    background: var(--h229-danger-pale);
    border-color: var(--h229-danger);
}

/* Les classes de taille posees au coup par coup — fs-16, fs-5, fs-18,
   fs-1, fs-2 — donnaient cinq corps differents dans la meme colonne.
   Dans une cellule d'action, la taille est celle du bouton. */
td .list-inline-item a i,
td .action-icons a i,
td .list-inline-item a i.fs-16,
td .list-inline-item a i.fs-5,
td .list-inline-item a i.fs-18 {
    font-size: 1rem;
    line-height: 1;
}


/* ── LA COULEUR SECONDAIRE ────────────────────────────────────────────
   #29abe2 accompagne le bleu de base sans jamais porter de texte : elle
   n'atteint que 2,62:1 contre le blanc, dans les deux sens.

   Elle sert donc a MARQUER, pas a ecrire : le filet sous un bandeau,
   l'indicateur de l'ecran courant, la barre d'un graphique, le fond
   d'une pastille dont le texte est en encre. */

/* Le filet sous les bandeaux d'en-tete. Il etait en laiton. */
.bg-info-header,
.card-header {
    border-bottom-color: var(--h229-border);
}

/* L'ecran courant dans la colonne : un trait franc du secondaire. */
.sidebar a.nav-link.menu-link.active,
.sidebar a.nav-link.active {
    box-shadow: inset 3px 0 0 var(--h229-secondary);
}

/* Une pastille du secondaire porte de l'encre, jamais du blanc. */
.h229-pastille-secondaire {
    background: var(--h229-secondary);
    color: var(--h229-secondary-ink);
    border-radius: var(--h229-radius-sm);
    padding: 5px 10px;
    font-size: 12.5px;
    font-weight: 500;
}

/* Quand le secondaire doit PORTER du blanc ou se lire SUR du blanc,
   c'est la declinaison sombre qui sert : 4,56:1 dans les deux sens. */
.h229-lien-secondaire { color: var(--h229-secondary-dk); }
.btn-secondaire {
    background: var(--h229-secondary-dk);
    border-color: var(--h229-secondary-dk);
    color: #ffffff;
}

/* Le survol d'une ligne et les liserés d'information prennent sa
   nuance pale : la couleur se reconnait, le texte reste lisible. */
.table > tbody tr:hover > * { background: var(--h229-secondary-pale); }
.alert-info { background: var(--h229-secondary-pale); border-left-color: var(--h229-secondary); }

/* ── L'AGENCE DANS L'EN-TÊTE ──────────────────────────────────────────
   Un employé lit le nom de son agence ; la direction de groupe le
   choisit. Même pastille dans les deux cas : c'est la même information,
   seule la main qui la change diffère. */
.agence-selecteur {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 2px 4px 2px 10px;
    border: 1px solid var(--h229-border);
    border-radius: var(--h229-radius);
    color: var(--h229-navy);
    font-size: .85rem;
    white-space: nowrap;
}
.agence-selecteur--fixe { padding: 5px 12px; color: var(--h229-text); }
.agence-selecteur .form-select {
    border: 0;
    background-color: transparent;
    color: var(--h229-text);
    font-size: .85rem;
    max-width: 240px;
    box-shadow: none;
}
.agence-selecteur .form-select:focus-visible { outline: 2px solid var(--h229-navy); outline-offset: 1px; }


/* ═══════════════════════════════════════════════════════════════════════
   LE PATRON DES ÉCRANS (audit design du 28/10/2026)
   Extrait des écrans refaits d'après les maquettes : blocs blancs posés
   sur le fond, en-tête teinté, fil d'Ariane, titre serif, barre d'actions.
   Les couleurs viennent toutes des jetons : un thème d'établissement
   (tokens.css, data-etablissement) les change sans toucher aux gabarits.
   ═══════════════════════════════════════════════════════════════════════ */

/* La page : pas de panneau englobant, contenu centré. Posée sur #card-body
   ou #main-body par {% block page_class %} — un écran l'adopte, les autres
   gardent leur panneau tant qu'ils n'ont pas de blocs propres. */
.h229-page {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    max-width: 1180px;
    width: 100%;
    margin-inline: auto !important;
    display: grid;
    gap: 18px;
}
.h229-page > * { min-width: 0; }

.h229-ariane { font-size: 13px; color: var(--h229-muted); display: flex; flex-wrap: wrap; gap: 6px; }
.h229-ariane a { color: var(--h229-muted); text-decoration: none; }
.h229-ariane a:hover { color: var(--h229-accent); }
.h229-ariane [aria-current] { color: var(--h229-text); font-weight: 500; }

.h229-entete { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.h229-entete h1 { font-family: var(--h229-serif); font-weight: 600; font-size: 28px; line-height: 1.15; margin: 0 0 4px; color: var(--h229-text); }
.h229-entete .h229-phrase { color: var(--h229-muted); margin: 0; max-width: 70ch; }
.h229-entete__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Le bloc, et toute .card : bordure fine, rayon 16, sans ombre. */
.h229-bloc,
.card {
    --bs-card-border-radius: var(--h229-radius-bloc);
    --bs-card-inner-border-radius: calc(var(--h229-radius-bloc) - 1px);
    background: var(--h229-card);
    border: 1px solid var(--h229-border);
    border-radius: var(--h229-radius-bloc);
    min-width: 0;
}
/* Pas de overflow:hidden sur .card : il couperait les menus déroulants. */
.h229-bloc { overflow: hidden; }
.card > .card-header:first-child { border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0; }
.h229-bloc__tete,
.card-header {
    background: var(--h229-tete-bloc);
    border-bottom: 2px solid var(--h229-accent);
    padding: 12px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--h229-tete-encre);
}
.h229-bloc__tete h2,
.h229-bloc__tete h3,
.card-header .card-title,
.card-header h4,
.card-header h5 {
    font-family: var(--h229-sans);
    font-size: 15px;
    font-weight: 600;
    color: var(--h229-tete-encre);
    margin: 0;
}
.h229-bloc__corps { padding: 18px; display: grid; gap: 14px; }

.h229-note { font-size: 12.5px; color: var(--h229-muted); }

.h229-tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.h229-tuile { background: var(--h229-card); border: 1px solid var(--h229-border); border-radius: var(--h229-radius-bloc); padding: 14px 16px; }

.h229-vide { text-align: center; color: var(--h229-muted); padding: 28px 16px; }
.h229-vide strong { display: block; color: var(--h229-text); font-weight: 600; margin-bottom: 4px; }

/* La barre d'actions à plat, au pied du formulaire. */
.h229-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 18px; border-top: 1px solid var(--h229-border); }

/* Les boutons : UNE action principale pleine, le reste bordé de la couleur. */
.btn.btn-primary,
.btn-pos, .btn-hb, .btn-custom {
    --bs-btn-bg: var(--h229-primaire);
    --bs-btn-border-color: var(--h229-primaire);
    --bs-btn-hover-bg: var(--h229-primaire-survol);
    --bs-btn-hover-border-color: var(--h229-primaire-survol);
    background: var(--h229-primaire);
    border-color: var(--h229-primaire);
    box-shadow: 0 2px 6px -2px color-mix(in srgb, var(--h229-primaire-survol) 60%, transparent);
}
.btn.btn-primary:hover,
.btn-pos:hover, .btn-hb:hover, .btn-custom:hover {
    background: var(--h229-primaire-survol);
    border-color: var(--h229-primaire-survol);
}
.btn.btn-secondary,
.btn-outline-primary, .btn-outline-secondary, .btn-pos-outline, .btn-light {
    background: var(--h229-accent-pale);
    border: 1.5px solid var(--h229-accent);
    color: var(--h229-tete-encre);
    font-weight: 600;
}
.btn.btn-secondary:hover,
.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-pos-outline:hover, .btn-light:hover {
    background: var(--h229-tete-bloc);
    border-color: var(--h229-accent);
    color: var(--h229-tete-encre);
}

/* Le tableau d'un bloc : en-têtes 12 px en casse normale, filets seuls. */
.h229-bloc .table > thead th,
.h229-bloc .table tr > th {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

/* DataTables dans un bloc : ses contrôles prennent la place d'un en-tête,
   pas d'une ligne de texte brut au-dessus du tableau. */
.h229-bloc .dataTables_wrapper .row:first-child,
.h229-bloc .dt-container .dt-layout-row:first-child { padding: 12px 18px 0; margin: 0; }
.h229-bloc .dataTables_wrapper .row:last-child,
.h229-bloc .dt-container .dt-layout-row:last-child { padding: 0 18px 12px; margin: 0; }
.h229-bloc .dataTables_filter input,
.h229-bloc .dt-search input,
.h229-bloc .dataTables_length select,
.h229-bloc .dt-length select { height: 38px; border: 1px solid var(--h229-border); border-radius: var(--h229-radius); }

@media (max-width: 575.98px) {
    .h229-entete h1 { font-size: 24px; }
    .h229-bloc__tete, .h229-bloc__corps, .h229-actions { padding-left: 14px; padding-right: 14px; }
}

/* dashbord2.css, chargé APRÈS cette feuille par les écrans de base.html, repeint
   la colonne avec son dégradé : l'identifiant reprend la main. */
#sidebar.sidebar { background: var(--h229-menu); }

/* Le fil d'Ariane des écrans pas encore au patron : au-dessus de leur titre, aligné sur leur contenu. */
.h229-ariane-bandeau { margin: 0 0 10px; }

/* Mobile : #card-body est un flex (dashbord2.css). Sans min-width:0, un enfant s'élargit à son contenu le plus
   large (un tableau de 900 px) et toute la page part de côté au lieu que le tableau défile dans son cadre. */
#card-body, #main-body, #card-body > *, #main-body > * { min-width: 0; max-width: 100%; }

/* Le bloc d'un formulaire garde la hauteur de son contenu (dashbord2.css lui imposait 70vh). */
.h229-page .dashboard-card { min-height: 0 !important; }

/* La ligne ouverte dans le formulaire voisin (listes avec formulaire sur la même page). */
.h229-ligne-active > td { background: var(--h229-accent-pale) !important; }

/* Un peu d'air entre le fil d'Ariane et le titre, hors de la grille de .h229-page (qui a déjà son espacement). */
.h229-ariane { margin-bottom: 8px; }
.h229-page > .h229-ariane { margin-bottom: 0; }


/* ── LOT 5 : LES BANDEAUX DEVIENNENT DES EN-TÊTES ──────────────────────
   Chaque module s'était dessiné un bandeau bleu dégradé (titre blanc, boutons
   blancs, cercles décoratifs). Plutôt que de réécrire 25 gabarits, on les
   ramène ici au patron : fond transparent, titre serif sombre, phrase atone.
   L'identifiant de la zone de contenu donne la priorité sur le <style> de
   chaque écran, chargé après cette feuille. */
:is(#card-body, #main-body) :is(.page-header, .page-hero, .dash-hero, .fi-hero, .rg-hero, .ca-hero,
    .cmd-header, .hist-header, .dem-header, .ds-header, .lv-header, .mrg-header, .mvt-header,
    .assoc-header, .pps-header, .ps-header, .ag-hero) {
    background: none !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 0 4px !important;
    margin: 0 0 16px !important;
    color: var(--h229-text) !important;
    min-height: 0 !important;
}
:is(#card-body, #main-body) :is(.page-header, .page-hero, .dash-hero, .fi-hero, .rg-hero, .ca-hero, .cmd-header, .hist-header,
    .dem-header, .ds-header, .lv-header, .mrg-header, .mvt-header, .assoc-header, .pps-header, .ps-header, .ag-hero)::before,
:is(#card-body, #main-body) :is(.page-header, .page-hero, .dash-hero, .fi-hero, .rg-hero, .ca-hero, .cmd-header, .hist-header,
    .dem-header, .ds-header, .lv-header, .mrg-header, .mvt-header, .assoc-header, .pps-header, .ps-header, .ag-hero)::after { display: none !important; }
/* Le texte : titre serif sombre, le reste atone ; les pastilles et boutons gardent leur style. */
:is(#card-body, #main-body) :is(.page-header, .page-hero, .dash-hero, .fi-hero, .rg-hero, .ca-hero, .cmd-header, .hist-header,
    .dem-header, .ds-header, .lv-header, .mrg-header, .mvt-header, .assoc-header, .pps-header, .ps-header, .ag-hero)
    :where(h1, h2, h3, h4, h5, h6) {
    font-family: var(--h229-serif) !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    color: var(--h229-text) !important;
    margin: 0 0 4px !important;
}
:is(#card-body, #main-body) :is(.page-header, .page-hero, .dash-hero, .fi-hero, .rg-hero, .ca-hero, .cmd-header, .hist-header,
    .dem-header, .ds-header, .lv-header, .mrg-header, .mvt-header, .assoc-header, .pps-header, .ps-header, .ag-hero)
    :where(p, small, span, div):not(.btn):not(.badge):not([class*="pill"]):not([class*="badge"]) {
    color: var(--h229-muted) !important;
}
/* Les icônes décoratives à côté du titre (carré blanc translucide) disparaissent. */
:is(#card-body, #main-body) :is(.page-header, .page-hero, .dash-hero, .fi-hero, .rg-hero, .ca-hero, .cmd-header, .hist-header,
    .dem-header, .ds-header, .lv-header, .mrg-header, .mvt-header, .assoc-header, .pps-header, .ps-header, .ag-hero)
    :where(h1, h2, h3, h4, h5, h6) > i:first-child { display: none; }
/* Les liens et boutons maison du bandeau (blancs sur bleu) prennent le style du bouton secondaire. */
:is(#card-body, #main-body) :is(.page-header, .page-hero, .dash-hero, .fi-hero, .rg-hero, .ca-hero, .cmd-header, .hist-header,
    .dem-header, .ds-header, .lv-header, .mrg-header, .mvt-header, .assoc-header, .pps-header, .ps-header, .ag-hero)
    :is(a, button):not(.btn-primary):not(.btn-pos-gold):not(.btn-hb-gold):not(.btn-primary-e):not(.btn-hdr-primary):not(.btn-hdr-teal):not(.btn-add-link) {
    background: var(--h229-accent-pale) !important;
    border: 1.5px solid var(--h229-accent) !important;
    color: var(--h229-tete-encre) !important;
}
:is(#card-body, #main-body) :is(.page-header, .page-hero, .dash-hero, .fi-hero, .rg-hero, .ca-hero, .cmd-header, .hist-header,
    .dem-header, .ds-header, .lv-header, .mrg-header, .mvt-header, .assoc-header, .pps-header, .ps-header, .ag-hero)
    :is(.btn-primary, .btn-pos-gold, .btn-hb-gold, .btn-primary-e, .btn-hdr-primary, .btn-hdr-teal, .btn-add-link) {
    background: var(--h229-primaire) !important;
    border-color: var(--h229-primaire) !important;
    color: #fff !important;
}

/* Agences, Réglages fiscaux, Factures à régulariser : la base affiche déjà le titre ; le bandeau ne garde que sa phrase et ses actions. */
:is(#card-body, #main-body) :is(.ag-hero, .fi-hero, .rg-hero) :is(h1, h2, h3, h4, h5, .ag-hero-tag, .fi-hero-tag, .rg-hero-tag) { display: none !important; }

/* Lot 6 : un filtre ou une pastille de période n'est pas l'action principale de l'écran. Bordés, pas pleins. */
:is(#card-body, #main-body) :is(.btn-filter, .mois-pill.active, .mois-pill:hover, .hb-filter-btn.active) {
    background: var(--h229-accent-pale) !important;
    border: 1.5px solid var(--h229-accent) !important;
    color: var(--h229-tete-encre) !important;
}

/* Lot 6 : l'action principale prend la couleur d'action principale, plus le laiton (boutons maison des modules). */
:is(#card-body, #main-body) :is(.btn-pos-gold, .btn-hb-gold, .btn-save):not(:disabled) {
    background: var(--h229-primaire) !important;
    border-color: var(--h229-primaire) !important;
    color: #fff !important;
}
:is(#card-body, #main-body) :is(.btn-pos-gold, .btn-hb-gold, .btn-save):not(:disabled):hover {
    background: var(--h229-primaire-survol) !important;
    border-color: var(--h229-primaire-survol) !important;
}


/* ── LES EN-TÊTES DE PANNEAU PLEINS ───────────────────────────────────
   Barres de couleur pleine (chiffre d'affaires, produits, fiche chambre,
   étapes de l'association produits-services) : elles prennent l'en-tête de
   bloc du patron, teinté et souligné, comme .h229-bloc__tete et .card-header. */
:is(#card-body, #main-body) :is(.ca-filter-head, .ca-section-head, .card-head, .section-head, .step-bar, .hb-section-head) {
    background: var(--h229-tete-bloc) !important;
    background-image: none !important;
    border-bottom: 2px solid var(--h229-accent) !important;
    color: var(--h229-tete-encre) !important;
}
:is(#card-body, #main-body) :is(.ca-filter-head, .ca-section-head, .card-head, .section-head, .step-bar, .hb-section-head)
    :where(h1, h2, h3, h4, h5, h6, span, i, div, label, small, strong):not(.badge):not([class*="pill"]):not([class*="num"]) {
    color: var(--h229-tete-encre) !important;
}
/* Les compteurs à droite de ces en-têtes (« 1 produit ») : pastille claire lisible sur le fond teinté. */
:is(#card-body, #main-body) :is(.ca-section-head, .card-head, .section-head, .hb-section-head) :is(.badge, [class*="pill"], [class*="count"]) {
    background: var(--h229-card) !important;
    color: var(--h229-tete-encre) !important;
    border: 1px solid var(--h229-border) !important;
}