/*
 * GF Tronics : thème de l'interface, posé sur Bootstrap 5.
 * Back-office de travail : clair, aéré mais dense, chiffres alignés. Chaque ligne métier a sa couleur (--domain).
 */

@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("../vendor/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url("../vendor/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("../vendor/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-display: swap; src: url("../vendor/fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("../vendor/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("../vendor/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

:root {
    --ink: #101828;
    --ink-2: #475467;
    --ink-3: #8a94a6;
    --canvas: #f4f6f8;
    --surface: #ffffff;
    --surface-2: #f9fafb;
    --line: #e5e8ec;
    --line-strong: #cfd5dd;
    --radius: .6rem;
    --radius-sm: .4rem;
    --shadow: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow-md: 0 4px 12px -2px rgba(16, 24, 40, .08), 0 2px 4px -2px rgba(16, 24, 40, .04);

    --gf: #1f66c1;
    --repair: #d4570d;
    --kef: #7046c4;
    --peppol: #0b8a78;
    --domain: var(--gf);
    --domain-soft: color-mix(in srgb, var(--domain) 9%, #fff);
    --domain-ink: color-mix(in srgb, var(--domain) 80%, #000);

    --bs-body-font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --bs-body-font-size: .875rem;
    --bs-body-line-height: 1.5;
    --bs-body-color: var(--ink);
    --bs-body-bg: var(--surface);
    --bs-secondary-color: var(--ink-2);
    --bs-tertiary-bg: var(--surface-2);
    --bs-border-color: var(--line);
    --bs-link-color: var(--domain-ink);
    --bs-link-color-rgb: 24, 80, 150;
    --bs-link-hover-color: var(--domain);
    --bs-border-radius: var(--radius-sm);
    --bs-border-radius-sm: .35rem;
    --bs-border-radius-lg: var(--radius);
    --bs-primary: var(--domain);
}

body.domain-repair { --domain: var(--repair); --bs-link-color-rgb: 150, 62, 10; }
body.domain-kef { --domain: var(--kef); --bs-link-color-rgb: 88, 55, 155; }
body.domain-peppol { --domain: var(--peppol); --bs-link-color-rgb: 8, 110, 96; }

body { min-height: 100vh; background: var(--canvas); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
a { color: var(--domain-ink); text-decoration: none; }
a:hover { color: var(--domain); text-decoration: underline; text-underline-offset: 2px; }
code, kbd, pre, .font-monospace { font-family: "IBM Plex Mono", ui-monospace, monospace; }
:focus-visible { outline: 2px solid var(--domain); outline-offset: 1px; }
::selection { background: color-mix(in srgb, var(--domain) 20%, #fff); }

/* ---------- Cadre : barre latérale + contenu ---------- */
.app-shell { display: flex; min-height: 100vh; }

.app-rail {
    width: 248px;
    flex: 0 0 248px;
    background: var(--surface);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    scrollbar-width: thin;
}
.app-brand { display: block; padding: 1.1rem 1.4rem 1rem; border-bottom: 1px solid var(--line); margin-bottom: .35rem; }
.app-brand img { display: block; width: 100%; max-width: 190px; height: auto; margin: 0 auto; }
.app-brand:hover img { opacity: .85; }

.rail-group { padding: .15rem .6rem; }
.rail-group + .rail-group { border-top: 1px solid var(--line); padding-top: .35rem; margin-top: .2rem; }
/* En-tête de ligne métier : le nom mène à l'accueil de la ligne, la flèche déplie le sous-menu */
.rail-domain { display: flex; align-items: center; gap: .15rem; }
.rail-domain-link {
    flex: 1;
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .55rem;
    border-radius: var(--radius-sm);
    color: var(--ink-2);
    font-weight: 600;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.rail-domain-link:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.rail-group.is-current .rail-domain-link { color: var(--ink); }
.rail-domain-link.active, .rail-group.is-current .rail-domain-link.active { color: var(--domain-ink); background: var(--domain-soft); }
.rail-domain-toggle { border: 0; background: none; padding: .5rem .6rem; border-radius: var(--radius-sm); color: var(--ink-3); line-height: 1; }
.rail-domain-toggle:hover { background: var(--surface-2); color: var(--ink); }
.rail-domain-toggle .chev { display: block; font-size: .65rem; transition: transform .15s; }
.rail-domain-toggle[aria-expanded="true"] .chev { transform: rotate(90deg); }
.rail-group .dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--group-color); flex: none; }
.rail-group[data-domain="gf"] { --group-color: var(--gf); }
.rail-group[data-domain="repair"] { --group-color: var(--repair); }
.rail-group[data-domain="kef"] { --group-color: var(--kef); }
.rail-group[data-domain="peppol"] { --group-color: var(--peppol); }

.rail-links { list-style: none; margin: .1rem 0 .45rem; padding: 0; }
.rail-links a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .34rem .55rem;
    border-radius: var(--radius-sm);
    color: var(--ink-2);
    font-size: .84rem;
    line-height: 1.3;
}
.rail-links a .bi { font-size: .95rem; color: var(--ink-3); width: 1rem; text-align: center; flex: none; }
.rail-links a:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; }
.rail-links a:hover .bi { color: var(--ink-2); }
.rail-links a.active { color: var(--domain-ink); background: var(--domain-soft); font-weight: 500; }
.rail-links a.active .bi { color: var(--domain); }

.rail-foot { margin-top: auto; border-top: 1px solid var(--line); padding: .75rem 1rem; display: flex; align-items: center; gap: .6rem; }
.rail-foot .who { flex: 1; min-width: 0; color: var(--ink); font-weight: 500; font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-foot .who:hover { color: var(--domain); }
.rail-foot .avatar { width: 2rem; height: 2rem; border-radius: 50%; background: var(--domain-soft); color: var(--domain-ink); display: grid; place-items: center; font-size: .72rem; font-weight: 600; flex: none; }
.rail-foot .out { color: var(--ink-3); font-size: 1rem; padding: .25rem; border-radius: var(--radius-sm); }
.rail-foot .out:hover { color: #b42318; background: #fef3f2; text-decoration: none; }

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-top {
    background: color-mix(in srgb, var(--canvas) 85%, transparent);
    backdrop-filter: blur(8px);
    padding: .6rem 1.75rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 3rem;
    position: sticky;
    top: 0;
    z-index: 1020;
}
.app-top .breadcrumb { font-size: .8rem; margin: 0; --bs-breadcrumb-divider-color: var(--line-strong); --bs-breadcrumb-item-padding-x: .45rem; }
.app-top .breadcrumb a { color: var(--ink-3); }
.app-top .breadcrumb a:hover { color: var(--ink); text-decoration: none; }
.app-top .breadcrumb-item.active, .app-top .breadcrumb-item:last-child a { color: var(--ink-2); }
.rail-toggle { display: none; border: 0; background: none; font-size: 1.35rem; color: var(--ink); padding: 0; }

.app-content { padding: .5rem 1.75rem 2.5rem; flex: 1; width: 100%; max-width: 1680px; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; margin-bottom: 1.25rem; }
.page-title { flex: 1 1 auto; min-width: 14rem; }
.page-overline { font-size: .75rem; font-weight: 500; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .2rem; }
.page-head h1 { font-size: 1.55rem; line-height: 1.2; font-weight: 650; margin: 0; letter-spacing: -.02em; }
.page-head h1 a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.page-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.app-foot { padding: 1rem 1.75rem; color: var(--ink-3); font-size: .75rem; display: flex; justify-content: space-between; gap: 1rem; }
.app-foot a { color: inherit; }

#flash:empty { display: none; }

/* ---------- Boutons ---------- */
.btn {
    --bs-btn-font-size: .84rem;
    --bs-btn-font-weight: 500;
    --bs-btn-padding-y: .4rem;
    --bs-btn-padding-x: .8rem;
    --bs-btn-border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    white-space: nowrap;
}
.btn-sm { --bs-btn-font-size: .8rem; --bs-btn-padding-y: .3rem; --bs-btn-padding-x: .6rem; --bs-btn-border-radius: var(--radius-sm); }
.btn[class*="bi-"]::before { line-height: 1; font-size: 1.05em; }
.btn[class*="bi-"]:empty { padding-left: .5rem; padding-right: .5rem; }
.btn-primary {
    --bs-btn-bg: var(--domain);
    --bs-btn-border-color: var(--domain);
    --bs-btn-hover-bg: color-mix(in srgb, var(--domain) 86%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--domain) 86%, #000);
    --bs-btn-active-bg: color-mix(in srgb, var(--domain) 76%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--domain) 76%, #000);
    --bs-btn-disabled-bg: var(--domain);
    --bs-btn-disabled-border-color: var(--domain);
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.btn-outline-secondary, .btn-secondary, .btn-light {
    --bs-btn-color: var(--ink);
    --bs-btn-bg: var(--surface);
    --bs-btn-border-color: var(--line-strong);
    --bs-btn-hover-color: var(--ink);
    --bs-btn-hover-bg: var(--surface-2);
    --bs-btn-hover-border-color: #b8c0cb;
    --bs-btn-active-color: var(--ink);
    --bs-btn-active-bg: #eef1f4;
    --bs-btn-active-border-color: #b8c0cb;
    box-shadow: var(--shadow);
}
.btn-outline-secondary[class*="bi-"]::before { color: var(--ink-2); }
.btn-outline-danger {
    --bs-btn-color: #b42318;
    --bs-btn-bg: var(--surface);
    --bs-btn-border-color: var(--line-strong);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #d92d20;
    --bs-btn-hover-border-color: #d92d20;
    box-shadow: var(--shadow);
}
.btn-danger { --bs-btn-bg: #d92d20; --bs-btn-border-color: #d92d20; }
.btn-success { --bs-btn-bg: #12805c; --bs-btn-border-color: #12805c; }
.btn-warning { --bs-btn-bg: #f79009; --bs-btn-border-color: #f79009; --bs-btn-color: #fff; }

/* Les groupes de boutons d'en-tête deviennent des boutons séparés, plus lisibles */
.page-actions .btn-group { gap: .5rem; flex-wrap: wrap; }
.page-actions .btn-group > .btn, .page-actions .btn-group > .btn-group > .btn { border-radius: var(--radius-sm) !important; margin-left: 0 !important; }
.btn-group { flex-wrap: nowrap; }

/* ---------- Cartes : fiches, formulaires, panneaux ---------- */
.view, .form, .form-panel, .card-panel, .card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem 1.4rem;
    margin-bottom: 1.25rem;
}
.card { padding: 0; }
.view > hr, .view hr { border: 0; border-top: 1px solid var(--line); opacity: 1; margin: 1.1rem -1.4rem; }
.view h2, .view h3 { font-size: 1.05rem; }
.view h4, .view h5, .card-panel h3, .card-panel h4, .related h4 { font-size: .95rem; }
.subheader { color: var(--ink-3); font-size: .74rem; font-weight: 500; letter-spacing: .01em; }
.view .row > [class*="col-"] { margin-bottom: .2rem; }
.related { margin-top: 1rem; }

/* Faits d'une fiche : libellé au-dessus de la valeur, en grille */
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem 1.75rem; }
.fact { min-width: 0; }
.fact > .subheader { display: block; margin-bottom: .15rem; text-transform: uppercase; letter-spacing: .05em; font-size: .68rem; font-weight: 600; }
.fact-value { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.fact-value:empty::before { content: "—"; color: var(--line-strong); font-weight: 400; }
.fact-value p:last-child { margin-bottom: 0; }
.fact-value .form-switch { min-height: 0; margin: 0; }
.fact-wide { grid-column: 1 / -1; }
.fact-wide .fact-value { font-weight: 400; }
/* Faits empilés hors grille (colonnes composées à la main) */
:not(.facts) > .fact + .fact { margin-top: .9rem; }
.row > .fact { width: 100%; }

/* ---------- Panneaux repliables : filtres et listes liées ---------- */
details.filter-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 1.25rem;
    overflow: hidden;
}
.view details.filter-panel { box-shadow: none; margin: 1rem 0; }
details.filter-panel > summary {
    list-style: none;
    padding: .7rem 1rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: .5rem;
    user-select: none;
}
details.filter-panel > summary::-webkit-details-marker { display: none; }
details.filter-panel > summary::before { color: var(--ink-3); }
details.filter-panel > summary::after { content: "\F282"; font-family: "bootstrap-icons"; font-size: .75rem; margin-left: auto; color: var(--ink-3); transition: transform .15s; }
details.filter-panel[open] > summary::after { transform: rotate(180deg); }
details.filter-panel > summary:hover { background: var(--surface-2); }
details.filter-panel[open] > summary { border-bottom: 1px solid var(--line); }
details.filter-panel > .filter-body { padding: 1rem; }
details.filter-panel > .filter-body:has(> .table-responsive:only-child) { padding: 0; }
details.filter-panel > .filter-body > .table-responsive { border: 0; border-radius: 0; box-shadow: none; margin: 0; }
/* Listes liées d'une fiche : le tableau occupe tout le panneau, sans second cadre */
.view details.filter-panel > .filter-body:has(.table-responsive) { padding: 0; }
.view details.filter-panel > .filter-body > .row { --bs-gutter-x: 0; margin: 0; }
.view details.filter-panel .table-responsive { border: 0; border-radius: 0; box-shadow: none; margin: 0; }
details.filter-panel.is-filter > summary { font-weight: 500; color: var(--ink-2); }

/* Filtres : champs en grille, libellé au-dessus */
details.filter-panel.is-filter > .filter-body > form { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: .1rem 1rem; align-items: end; }
details.filter-panel.is-filter > .filter-body > form > div[style*="display:none"] { display: none; }
details.filter-panel.is-filter > .filter-body > form > :not(.row):not(.btn):not(button):not(div[style]) { grid-column: 1 / -1; }
details.filter-panel.is-filter .row.mb-2 { display: block; margin: 0 0 .6rem; }
details.filter-panel.is-filter .row.mb-2 > [class*="col-"] { width: auto; margin-left: 0; padding: 0; }
details.filter-panel.is-filter .col-form-label { padding: 0 0 .2rem; }
details.filter-panel.is-filter > .filter-body > form > .btn, details.filter-panel.is-filter > .filter-body > form > button { float: none; margin: 0 0 .6rem; justify-self: start; }

/* ---------- Tableaux ---------- */
.table-responsive { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 1.25rem; }
.view .table-responsive, .card-panel .table-responsive { box-shadow: none; }
.table { --bs-table-bg: transparent; --bs-table-hover-bg: var(--surface-2); --bs-table-striped-bg: var(--surface-2); margin-bottom: 0; font-size: .84rem; }
.table > :not(caption) > * > * { padding: .6rem .75rem; }
.table > thead > tr > th, .table > tbody > tr > th {
    background: var(--surface-2);
    color: var(--ink-3);
    font-weight: 600;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
    vertical-align: middle;
}
.table > thead > tr:first-child > th:first-child { border-top-left-radius: var(--radius); }
.table > thead > tr:first-child > th:last-child { border-top-right-radius: var(--radius); }
.table > thead a { color: inherit; }
.table > thead a:hover { color: var(--domain); text-decoration: none; }
.table > thead a.sort.asc::after { content: " \2191"; color: var(--domain); }
.table > thead a.sort.desc::after { content: " \2193"; color: var(--domain); }
.table > tbody > tr > td { vertical-align: middle; border-color: #eef0f3; }
.table > tbody > tr:last-child > td { border-bottom: 0; }
.table td.actions, .table th.actions { text-align: right; white-space: nowrap; width: 1%; }
.table .numbers, .table td.num, .numbers { text-align: right; font-variant-numeric: tabular-nums; }
.table .strings { text-align: left; }
tr.clickrow { cursor: pointer; }
tr.emptyrow td { border: 0; }
tr.highrow > td { background: var(--surface-2); font-weight: 600; }
.table tfoot td, .table tfoot th { border-top: 1px solid var(--line); font-weight: 600; }

/* Boutons des lignes : discrets */
.table td.actions .btn-group { gap: .15rem; }
.table td.actions .btn { --bs-btn-padding-y: .25rem; --bs-btn-padding-x: .4rem; box-shadow: none; border-color: transparent; background: transparent; border-radius: var(--radius-sm) !important; }
.table td.actions .btn::before { color: var(--ink-3); }
.table td.actions .btn:hover { background: #eef1f4; }
.table td.actions .btn:hover::before { color: var(--ink); }
.table td.actions .btn-outline-danger:hover { background: #fef3f2; }
.table td.actions .btn-outline-danger:hover::before { color: #d92d20; }
.table td.actions .btn-primary { background: var(--domain-soft); }
.table td.actions .btn-primary::before { color: var(--domain); }

.paginator { display: flex; justify-content: flex-end; }
.pagination {
    --bs-pagination-font-size: .8rem;
    --bs-pagination-padding-y: .28rem;
    --bs-pagination-padding-x: .62rem;
    --bs-pagination-color: var(--ink-2);
    --bs-pagination-bg: var(--surface);
    --bs-pagination-border-color: var(--line);
    --bs-pagination-hover-color: var(--ink);
    --bs-pagination-hover-bg: var(--surface-2);
    --bs-pagination-hover-border-color: var(--line);
    --bs-pagination-active-bg: var(--domain);
    --bs-pagination-active-border-color: var(--domain);
    --bs-pagination-disabled-color: var(--line-strong);
    --bs-pagination-disabled-bg: var(--surface);
    --bs-pagination-border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    box-shadow: var(--shadow);
    border-radius: var(--radius-sm);
}
.pagination .page-link { font-variant-numeric: tabular-nums; }

/* ---------- Formulaires ---------- */
fieldset { margin-bottom: .5rem; min-width: 0; }
legend { font-size: 1.05rem; font-weight: 600; margin-bottom: 1rem; }
.col-form-label { font-size: .8rem; font-weight: 500; color: var(--ink-2); padding-top: .45rem; padding-bottom: .2rem; }
.form-control, .form-select {
    font-size: .875rem;
    padding: .42rem .65rem;
    background-color: var(--surface);
    border-color: var(--line-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    color: var(--ink);
}
.form-select { padding-right: 2rem; }
.form-control::placeholder { color: var(--ink-3); }
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--surface-2); color: var(--ink-2); box-shadow: none; }
.form-control:focus, .form-select:focus { border-color: var(--domain); box-shadow: 0 0 0 3px color-mix(in srgb, var(--domain) 18%, transparent); }
.form-check-input { border-color: var(--line-strong); }
.form-check-input:checked { background-color: var(--domain); border-color: var(--domain); }
.form-check-input:focus { border-color: var(--domain); box-shadow: 0 0 0 3px color-mix(in srgb, var(--domain) 18%, transparent); }
.form-check-label { font-size: .86rem; }
.required .col-form-label::after { content: " *"; color: #d92d20; }
.has-error .form-control, .has-error .form-select { border-color: #d92d20; }
.invalid-feedback { font-size: .78rem; }
.form-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .6rem; }
form > .btn[type="submit"], form > button.btn { float: right; margin-top: .6rem; }
form::after { content: ""; display: block; clear: both; }

/* Formulaires principaux : libellé au-dessus du champ, deux colonnes sur grand écran */
@media (min-width: 992px) {
    .form fieldset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; align-items: start; }
    .form fieldset > * { grid-column: 1 / -1; }
    .form fieldset > .row.mb-2 { grid-column: auto; }
    .form fieldset > .row.mb-2.form-row-textarea, .form fieldset > .row.mb-2:has(.chosen-container-multi, select[multiple], table) { grid-column: 1 / -1; }
}
.form .row.mb-2[class*="form-row-"] { display: block; margin: 0 0 .85rem; }
.form .row.mb-2[class*="form-row-"] > [class*="col-"] { width: auto; margin-left: 0; padding: 0; }
.form .row.mb-2[class*="form-row-"] > .col-sm-3 > .col-form-label { padding: 0 0 .3rem; }
.form fieldset > .row.mb-2.form-row-checkbox { align-self: end; padding-bottom: .1rem; }
/* Champ sans libellé (liste à côté de son champ de recherche) : aligné sur le champ voisin */
.form fieldset > .row.mb-2:not(:has(label)) { align-self: end; }
.form fieldset > .row.mb-2 > .invalid-feedback { margin-left: 0; }

/* ---------- États ---------- */
.badge { font-weight: 500; font-size: .72rem; padding: .3em .6em; border-radius: 999px; }
.progress { --bs-progress-bar-bg: var(--domain); --bs-progress-bg: #eef0f3; --bs-progress-height: .5rem; border-radius: 999px; }
.text-bg-warning { color: #3f2a00 !important; }
.alert { --bs-alert-padding-y: .65rem; --bs-alert-padding-x: 1rem; --bs-alert-margin-bottom: 1rem; --bs-alert-border-radius: var(--radius); font-size: .86rem; box-shadow: var(--shadow); }
.alert-success { --bs-alert-color: #085d3a; --bs-alert-bg: #ecfdf3; --bs-alert-border-color: #abefc6; }
.alert-danger { --bs-alert-color: #912018; --bs-alert-bg: #fef3f2; --bs-alert-border-color: #fecdca; }
.alert-warning { --bs-alert-color: #93370d; --bs-alert-bg: #fffaeb; --bs-alert-border-color: #fedf89; }
.alert-info { --bs-alert-color: #1849a9; --bs-alert-bg: #eff8ff; --bs-alert-border-color: #b2ddff; }
.alert .btn-close { padding: .85rem 1rem; font-size: .7rem; }
.red { color: #d92d20; }
.green { color: #12805c; }
.no-margin { margin: 0 !important; }

/* ---------- Accueil et menus ---------- */
.menu-section { margin-bottom: 1.75rem; }
.menu-section > h2, .menu-section > h4 { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin-bottom: .6rem; display: flex; align-items: center; gap: .5rem; }
.menu-section > h4::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--section-color, var(--domain)); }
.menu-section[data-domain="gf"] { --section-color: var(--gf); }
.menu-section[data-domain="repair"] { --section-color: var(--repair); }
.menu-section[data-domain="kef"] { --section-color: var(--kef); }
.menu-section[data-domain="peppol"] { --section-color: var(--peppol); }
.card-panel:has(> .menu-grid:only-child) { background: none; border: 0; box-shadow: none; padding: 0; }
.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: .65rem; list-style: none; padding: 0; margin: 0; }
.menu-grid .btn {
    width: 100%;
    justify-content: flex-start;
    gap: .7rem;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink);
    padding: .75rem .85rem;
    text-align: left;
    font-weight: 500;
    font-size: .875rem;
    box-shadow: var(--shadow);
    border-radius: var(--radius);
    white-space: normal;
    transition: border-color .12s, box-shadow .12s, transform .12s;
}
.menu-grid .btn .bi, .menu-grid .btn > i {
    width: 2rem;
    height: 2rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: .45rem;
    background: color-mix(in srgb, var(--section-color, var(--domain)) 10%, #fff);
    color: var(--section-color, var(--domain));
    font-size: 1rem;
}
.menu-grid .btn:hover { border-color: color-mix(in srgb, var(--section-color, var(--domain)) 45%, #fff); color: var(--ink); box-shadow: var(--shadow-md); text-decoration: none; transform: translateY(-1px); }

/* Barre d'actions sur documents (PDF, UBL, rappels…) dans une fiche */
.view .menu-grid { display: flex; flex-wrap: wrap; gap: .5rem; }
.view .menu-grid .btn { width: auto; padding: .4rem .75rem; font-size: .82rem; border-color: var(--line-strong); border-radius: var(--radius-sm); }
.view .menu-grid .btn > i { width: auto; height: auto; background: none; color: var(--ink-2); font-size: 1em; display: inline; }
.view .menu-grid .btn:hover { transform: none; box-shadow: var(--shadow); background: var(--surface-2); }


/* ---------- Connexion : pages d'accès (layout/auth.php) ----------
   Téléphone : carte seule sur fond clair, logo en tête. Grand écran : bandeau de marque bleu à gauche
   (logo blanc, lignes métier), formulaire sur fond blanc à droite. Champs à 16 px : iOS ne zoome pas. */
.auth-page { background: var(--canvas); }
.auth-shell { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); }
.auth-brand { display: none; }
.auth-panel {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem;
    padding: 2.5rem 1rem 1.25rem;
    background: radial-gradient(120% 60% at 50% -10%, color-mix(in srgb, var(--gf) 16%, transparent) 0, transparent 60%), var(--canvas);
}
.auth-card {
    width: 100%; max-width: 410px; background: var(--surface); border: 1px solid var(--line); border-radius: 1rem;
    box-shadow: 0 18px 40px -18px rgba(16, 24, 40, .22), 0 2px 6px -2px rgba(16, 24, 40, .06);
    padding: 2rem 1.5rem 1.6rem;
}
.auth-logo { display: block; width: 176px; height: auto; margin: 0 auto 1.75rem; }
.auth-title { font-size: 1.55rem; font-weight: 600; letter-spacing: -.015em; margin: 0 0 .35rem; }
.auth-lead { color: var(--ink-2); font-size: .9rem; margin: 0 0 1.5rem; }
.auth-flash .alert { margin-bottom: 1.1rem; box-shadow: none; font-size: .84rem; }
.auth-form { display: grid; gap: 1.1rem; }
.auth-field label { display: block; font-size: .8rem; font-weight: 600; color: var(--ink-2); margin-bottom: .4rem; }
.auth-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.auth-input { position: relative; }
.auth-input > .bi { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-size: 1rem; pointer-events: none; transition: color .15s; }
.auth-input .form-control {
    height: 3rem; padding: 0 .9rem 0 2.65rem; font-size: 1rem; border-radius: .65rem;
    border-color: var(--line-strong); background: var(--surface); box-shadow: none;
}
.auth-input .form-control::placeholder { color: #b3bbc8; }
.auth-input .form-control:focus { border-color: var(--gf); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gf) 15%, transparent); }
.auth-input:focus-within > .bi { color: var(--gf); }
.auth-input:has(.auth-reveal) .form-control { padding-right: 3rem; }
.auth-reveal {
    position: absolute; right: .3rem; top: 50%; transform: translateY(-50%); width: 2.4rem; height: 2.4rem;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: .5rem; background: none; color: var(--ink-3); font-size: 1.05rem;
}
.auth-reveal:hover { color: var(--ink); background: var(--surface-2); }
.auth-link { font-size: .8rem; font-weight: 500; color: var(--gf); text-decoration: none; }
.auth-link:hover { color: var(--domain-ink); text-decoration: underline; }
.auth-submit {
    --bs-btn-bg: var(--gf); --bs-btn-border-color: var(--gf);
    height: 3rem; width: 100%; margin-top: .35rem; border-radius: .65rem; font-size: .95rem; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--gf) 70%, transparent);
}
.auth-help { display: flex; gap: .55rem; margin: 1.5rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: .78rem; color: var(--ink-3); }
.auth-back { margin: 1.4rem 0 0; text-align: center; }
.auth-back .auth-link { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; }
.auth-foot { margin: 0; font-size: .75rem; color: var(--ink-3); text-align: center; }
.auth-foot a { color: inherit; }
@media (min-width: 992px) {
    .auth-shell { grid-template-columns: minmax(400px, 5fr) 7fr; }
    .auth-brand {
        display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem;
        position: relative; overflow: hidden; padding: 3rem 3.5rem; color: #fff;
        background:
            radial-gradient(circle at 88% 8%, rgba(255, 255, 255, .16) 0, rgba(255, 255, 255, 0) 36%),
            radial-gradient(circle at 5% 100%, rgba(120, 180, 255, .38) 0, rgba(120, 180, 255, 0) 46%),
            linear-gradient(155deg, #1f66c1 0%, #17519d 50%, #0c3263 100%);
    }
    /* Quadrillage discret, estompé vers les bords. */
    .auth-brand::after {
        content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .1;
        background-image: linear-gradient(rgba(255, 255, 255, .7) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, .7) 1px, transparent 1px);
        background-size: 44px 44px;
        -webkit-mask-image: radial-gradient(ellipse at 75% 25%, #000 0, transparent 70%);
        mask-image: radial-gradient(ellipse at 75% 25%, #000 0, transparent 70%);
    }
    .auth-brand > * { position: relative; z-index: 1; }
    .auth-brand-logo { width: 220px; height: auto; }
    .auth-brand h2 { font-size: 2.1rem; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; margin: 0 0 .85rem; max-width: 18ch; }
    .auth-brand-body > p { color: rgba(255, 255, 255, .78); font-size: .95rem; max-width: 40ch; margin: 0; }
    .auth-lines { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: .6rem; max-width: 26rem; }
    .auth-lines li {
        display: flex; align-items: center; gap: .85rem; padding: .65rem .85rem; border-radius: .75rem;
        background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .13); font-size: .88rem; color: rgba(255, 255, 255, .8);
    }
    .auth-lines .bi {
        flex: none; width: 2.1rem; height: 2.1rem; display: inline-flex; align-items: center; justify-content: center;
        border-radius: .55rem; background: rgba(255, 255, 255, .15); color: #fff; font-size: 1.05rem;
    }
    .auth-lines strong { display: block; color: #fff; font-weight: 600; font-size: .9rem; }
    .auth-brand-foot { margin: 0; font-size: .78rem; color: rgba(255, 255, 255, .6); }
    .auth-panel { background: var(--surface); padding: 3rem; }
    .auth-card { max-width: 380px; padding: 0; border: 0; box-shadow: none; background: none; }
    .auth-logo { display: none; }
    .auth-title { font-size: 1.85rem; }
}

/* ---------- Remarques : « Une remarque ? », fenêtre d'envoi, suivi (docs/remarques.md) ---------- */
.app-top-actions { margin-left: auto; display: flex; align-items: center; gap: .4rem; flex: none; }
.feedback-list-link { color: var(--ink-2); display: inline-flex; align-items: center; gap: .35rem; }
.feedback-list-link:hover { color: var(--ink); background: var(--surface); }
.feedback-list-link .badge { font-size: .68rem; }
[data-feedback-open] { position: relative; display: inline-flex; align-items: center; gap: .35rem; }
.feedback-open-busy { display: none; }
[data-feedback-open].is-busy { pointer-events: none; }
[data-feedback-open].is-busy > .bi { display: none; }
[data-feedback-open].is-busy > .feedback-open-busy { display: inline-block; width: .85rem; height: .85rem; border-width: .15em; }

.feedback-modal .modal-dialog { max-width: 600px; }
.feedback-modal .modal-content { border: 0; border-radius: var(--radius); box-shadow: var(--shadow-md); }
.feedback-modal .modal-title { font-size: 1.05rem; font-weight: 600; margin: 0; }
.feedback-modal-lead { margin: .15rem 0 0; font-size: .8rem; color: var(--ink-3); }
.feedback-natures { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; padding: 0; border: 0; }
.feedback-natures .btn { display: inline-flex; align-items: center; gap: .4rem; }
.feedback-natures .btn-check:checked + .btn { background: var(--ink); border-color: var(--ink); color: #fff; }
.feedback-natures .btn-check:checked + .btn .bi { color: #fff; }
.feedback-capture { display: flex; align-items: center; gap: .9rem; margin-top: .9rem; padding: .6rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.feedback-capture img { flex: none; width: 176px; max-height: 120px; object-fit: cover; object-position: top left; border: 1px solid var(--line); border-radius: .3rem; background: #fff; transition: opacity .15s, filter .15s; }
.feedback-capture.is-off img { opacity: .35; filter: grayscale(1); }
.feedback-capture .form-check { margin: 0; }
.feedback-nocapture { display: flex; gap: .5rem; margin: .9rem 0 0; font-size: .8rem; color: #93370d; }
.feedback-context { margin: .75rem 0 0; font-size: .74rem; color: var(--ink-3); overflow-wrap: anywhere; }
.feedback-state { margin: .35rem 0 0; font-size: .8rem; font-weight: 600; color: #b42318; }
.feedback-state:empty { display: none; }
.feedback-toasts { z-index: 1090; }

.feedback-intro { color: var(--ink-2); max-width: 60rem; }
.feedback-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: .75rem; }
.feedback-filters { display: flex; flex-wrap: wrap; gap: .35rem; }
.feedback-cell-message { min-width: 16rem; max-width: 40rem; }
.feedback-cell-title { color: var(--ink); font-weight: 500; }
.feedback-table .badge .bi { margin-right: .15rem; }
.feedback-empty { text-align: center; padding: 2.5rem 1rem !important; color: var(--ink-2); }
.feedback-empty .bi { display: block; font-size: 1.6rem; color: var(--ink-3); margin-bottom: .35rem; }
.feedback-empty span { display: block; margin-top: .25rem; color: var(--ink-3); }

.feedback-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.feedback-main { display: grid; gap: 1.25rem; min-width: 0; }
.feedback-layout .view { margin-bottom: 0; }
@media (min-width: 1200px) {
    .feedback-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
}
.feedback-card-title { font-size: .95rem !important; font-weight: 600; margin: 0 0 1rem; display: flex; align-items: center; gap: .45rem; }
.feedback-card-title .bi { color: var(--ink-3); }
.feedback-steps { display: flex; gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.feedback-steps > li { flex: 1 1 0; min-width: 0; padding-top: .55rem; border-top: 4px solid var(--line); font-size: .8rem; color: var(--ink-3); }
.feedback-steps > li.is-done { border-top-color: #17b26a; color: var(--ink); }
.feedback-steps > li.is-current { border-top-color: var(--domain); color: var(--ink); }
.feedback-step-label { display: block; font-weight: 600; }
.feedback-step-date { display: block; font-size: .74rem; color: var(--ink-3); }
.feedback-reply { padding: .85rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.feedback-reply.is-new { border-color: #fecdca; background: #fef3f2; }
.feedback-reply-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.feedback-reply-head .avatar { width: 1.75rem; height: 1.75rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--domain-soft); color: var(--domain-ink); font-size: .68rem; font-weight: 700; }
.feedback-reply-date { margin-left: auto; font-size: .74rem; color: var(--ink-3); }
.feedback-reply-text p:last-child, .feedback-message p:last-child { margin-bottom: 0; }
.feedback-message { font-size: .92rem; white-space: normal; overflow-wrap: anywhere; }
.feedback-synced { margin: .85rem 0 0; font-size: .74rem; color: var(--ink-3); }
.feedback-error { margin: 0; font-size: .8rem; color: #b42318; overflow-wrap: anywhere; }
.feedback-shot-link { display: block; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--canvas); }
.feedback-shot-link img { display: block; width: 100%; height: auto; }
.page-title h1 .badge { font-size: .72rem; vertical-align: middle; margin-left: .35rem; }
@media (max-width: 575.98px) {
    .feedback-capture { flex-direction: column; align-items: stretch; }
    .feedback-capture img { width: 100%; max-height: 160px; }
    .feedback-steps { flex-direction: column; }
}

/* ---------- Plugins : chosen, select2, jQuery UI ---------- */
.chosen-container { font-size: .875rem !important; width: 100% !important; }
.chosen-container-single .chosen-single {
    height: auto;
    padding: .38rem .65rem;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    color: var(--ink);
    line-height: 1.5;
}
.chosen-container-single .chosen-single div b { background-position: 0 6px; }
.chosen-container-active .chosen-single, .chosen-container-active .chosen-choices { border-color: var(--domain); box-shadow: 0 0 0 3px color-mix(in srgb, var(--domain) 18%, transparent); }
.chosen-container .chosen-drop { border-color: var(--line-strong); border-radius: 0 0 var(--radius-sm) var(--radius-sm); box-shadow: var(--shadow-md); }
.chosen-container .chosen-results li.highlighted { background: var(--domain); }
.chosen-container-multi .chosen-choices { border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow); padding: .15rem .3rem; min-height: 2.3rem; }
.chosen-container-multi .chosen-choices li.search-choice { background: var(--domain-soft); border: 1px solid color-mix(in srgb, var(--domain) 25%, #fff); box-shadow: none; border-radius: .3rem; color: var(--domain-ink); }
.select2-container { width: 100% !important; font-size: .875rem; }
.select2-container .select2-selection--single { height: auto; padding: .3rem .25rem; border-color: var(--line-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--domain); }
.ui-datepicker { font-size: .8rem; z-index: 1060 !important; border-radius: var(--radius-sm); box-shadow: var(--shadow-md); }

/* ---------- Petits écrans ---------- */
@media (max-width: 991.98px) {
    .app-rail { position: fixed; z-index: 1040; left: 0; transform: translateX(-100%); transition: transform .18s; }
    body.rail-open .app-rail { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, .25); }
    .rail-toggle { display: inline-flex; }
    .app-top { padding: .6rem 1rem; }
    .app-content { padding: .5rem 1rem 2rem; }
    .view, .form, .form-panel, .card-panel { padding: 1rem; }
    .view hr { margin-left: -1rem; margin-right: -1rem; }
}
@media (max-width: 575.98px) {
    .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1rem; }
    .page-head h1 { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}