/* ════════════════════════════════════════════════════════════════
 * TECHMO — Thème visuel unifié (refonte 2026-07-05)
 * ════════════════════════════════════════════════════════════════
 * Langage graphique transposé des pages du site (TECHAPP / TECHMO-USB) :
 *   - Raleway pour les titres (300 léger sur les grands, 600-700 sur les petits)
 *   - Calibri / Segoe UI pour le corps
 *   - Inconsolata (monospace) pour les kickers, badges et labels techniques
 *   - palette marine sobre, sauge en accent doux, zéro couleur clinquante
 *   - cartes blanches, bordures bleutées translucides, ombres douces et larges
 *   - fond gris perle avec texture architecturale discrète
 * Chargée sur TOUTES les pages, APRÈS Bootstrap et les styles de page :
 * à spécificité égale, la dernière règle gagne.
 * ════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700;800&family=Inconsolata:wght@400;500;600;700;800&display=swap');

:root {
    --tm-blue:   #122c54;
    --tm-blue-2: #1f3b6f;
    --tm-ink:    #1c2833;
    --tm-text:   #44515f;
    --tm-muted:  #6a7480;
    --tm-bg:     #f4f6f7;
    --tm-white:  #ffffff;
    --tm-sage:   #DCE3CC;
    --tm-sage-2: #BCC8A4;
    --tm-cream:  #FBFAF5;
    --tm-border: rgba(18, 44, 84, .13);
    --tm-border-soft: rgba(18, 44, 84, .09);
    --tm-shadow: 0 18px 48px rgba(18, 44, 84, .10);
    --tm-shadow-card: 0 2px 6px rgba(18, 44, 84, .04), 0 14px 36px rgba(18, 44, 84, .07);
    --tm-radius: 18px;
    --tm-font-title: 'Raleway', Calibri, sans-serif;
    --tm-font-body: Calibri, 'Segoe UI', 'Roboto', sans-serif;
    --tm-font-mono: 'Inconsolata', 'Cascadia Code', monospace;
}

/* ── Fond et corps ─────────────────────────────────────────────── */
body {
    font-family: var(--tm-font-body);
    color: var(--tm-text);
    background-color: var(--tm-bg);
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: url("fond-techmo.png") left center / cover fixed no-repeat;
    opacity: .06;
    filter: grayscale(1) contrast(.82) brightness(1.55);
    pointer-events: none;
}

/* ── Typographie ───────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.modal-title, .card-title {
    font-family: var(--tm-font-title);
    color: var(--tm-ink);
}
h1 { font-weight: 300; letter-spacing: -.02em; }
h2 { font-weight: 300; }
h3 { font-weight: 600; }
h4, h5, h6 { font-weight: 700; }

/* Labels de formulaires : petits, nets */
label, .form-label {
    font-family: var(--tm-font-body);
    color: #51606e;
    font-weight: 600;
}

/* Badges et pastilles : la signature Inconsolata du site */
.badge,
.tool-badge, .tm-kicker, .dev-badge {
    font-family: var(--tm-font-mono) !important;
    font-weight: 800 !important;
    letter-spacing: .07em;
    text-transform: uppercase;
    border-radius: 999px;
}

/* ── Largeur d'affichage cohérente ─────────────────────────────── */
.content {
    max-width: 1500px;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100%;
}

/* ── Cartes : un seul langage ──────────────────────────────────── */
.card, .glass-card, .section-card,
.fiche-card, .db-card {
    background: var(--tm-white);
    border: 1px solid var(--tm-border-soft);
    border-radius: var(--tm-radius);
    box-shadow: var(--tm-shadow-card);
}
.card:hover, .glass-card:hover { border-color: var(--tm-border); }

.card-header {
    background: var(--tm-cream);
    border-bottom: 1px solid var(--tm-border-soft);
    font-family: var(--tm-font-title);
    font-weight: 600;
    color: var(--tm-ink);
    border-radius: var(--tm-radius) var(--tm-radius) 0 0 !important;
}

/* Barres de titre de sections internes des modules */
.section-title-bar {
    background: var(--tm-white);
    border: 1px solid var(--tm-border-soft);
    border-left: 4px solid var(--tm-blue);
    border-radius: 12px;
    box-shadow: none;
    color: var(--tm-ink);
}
.section-title-bar h2, .section-title-bar h3 {
    font-family: var(--tm-font-title);
    font-weight: 600;
    color: var(--tm-ink);
}

/* ── Boutons : marine sobre ────────────────────────────────────── */
.btn { border-radius: 10px; font-weight: 600; }
.btn-primary {
    background: var(--tm-blue);
    border-color: var(--tm-blue);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--tm-blue-2);
    border-color: var(--tm-blue-2);
}
.btn-outline-primary {
    color: var(--tm-blue);
    border-color: var(--tm-blue);
}
.btn-outline-primary:hover {
    background: var(--tm-blue);
    border-color: var(--tm-blue);
}
.btn-success { background: #3d5a3d; border-color: #3d5a3d; }
.btn-success:hover { background: #2f4a2f; border-color: #2f4a2f; }
.btn-danger { background: #a63d3d; border-color: #a63d3d; }
.btn-danger:hover { background: #8f3030; border-color: #8f3030; }
.btn-warning { background: #b98737; border-color: #b98737; color: #fff; }
.btn-warning:hover { background: #a3752c; border-color: #a3752c; color: #fff; }
.btn-info { background: #33647e; border-color: #33647e; color: #fff; }
.btn-info:hover { background: #2a5165; border-color: #2a5165; color: #fff; }

/* ── Formulaires ───────────────────────────────────────────────── */
.form-control, .form-select {
    border-color: #d5dbe3;
    border-radius: 10px;
    color: var(--tm-ink);
}
.form-control:focus, .form-select:focus {
    border-color: var(--tm-blue);
    box-shadow: 0 0 0 .2rem rgba(18, 44, 84, .10);
}
.input-group-text {
    background: var(--tm-cream);
    border-color: #d5dbe3;
    color: var(--tm-muted);
    font-family: var(--tm-font-mono);
    font-size: .8rem;
}

/* ── Tableaux ──────────────────────────────────────────────────── */
.table thead th {
    font-family: var(--tm-font-mono);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tm-blue);
    background: var(--tm-cream);
    border-bottom: 2px solid var(--tm-border);
}
.table tbody td { color: var(--tm-text); }
.table-hover tbody tr:hover { background: rgba(18, 44, 84, .03); }

/* ── Modales ───────────────────────────────────────────────────── */
.modal-content {
    border: 1px solid var(--tm-border-soft);
    border-radius: 22px;
    box-shadow: var(--tm-shadow);
}
.modal-header {
    background: var(--tm-cream);
    border-bottom: 1px solid var(--tm-border-soft);
    border-radius: 22px 22px 0 0;
}

/* ── Nav-tabs et onglets ───────────────────────────────────────── */
.nav-tabs .nav-link {
    font-family: var(--tm-font-title);
    font-weight: 600;
    color: var(--tm-muted);
    border-radius: 10px 10px 0 0;
}
.nav-tabs .nav-link.active {
    color: var(--tm-blue);
    border-color: var(--tm-border) var(--tm-border) #fff;
}

/* ── Alertes / encadrés : tons feutrés ─────────────────────────── */
.alert { border-radius: 14px; }
.alert-info { background: #eef3f6; border-color: #cfdde6; color: #33647e; }
.alert-warning { background: #faf4e6; border-color: #ecdcb8; color: #8a6420; }
.alert-success { background: #eef3ea; border-color: var(--tm-sage); color: #3d5a3d; }
.alert-danger { background: #f8eeee; border-color: #e5c8c8; color: #8f3030; }

/* ── Scrollbars fines ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(18, 44, 84, .18);
    border-radius: 99px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(18, 44, 84, .32); }

/* ── En-tête de module unifié (rendu par sidebar.js) ───────────── */
.tm-module-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 8px 30px 7px;   /* compact (2026-07-08) */
    padding-right: 30px;
    min-height: 0;
}
/* (2026-07-06) Le sélecteur d'affaire vit désormais dans l'étoile de la
   sidebar : plus de pastille flottante, la colonne d'actions remonte. */
.tm-module-header > .d-flex.flex-column { margin-top: 0; }
.tm-module-header-nochip > .d-flex.flex-column { margin-top: 0; }
.tm-module-header {
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid var(--tm-border-soft);
    box-shadow: 0 6px 18px rgba(18, 44, 84, .05);
    position: relative;
}
.tm-module-header::after {
    content: "";
    position: absolute;
    left: 0; right: auto; bottom: -1px;
    width: 220px; height: 3px;
    background: linear-gradient(90deg, var(--tm-mod-color, var(--tm-blue)), transparent);
}
.tm-module-id {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}
.tm-module-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    color: var(--tm-mod-color, var(--tm-blue));
    background: color-mix(in srgb, var(--tm-mod-color, var(--tm-blue)) 11%, transparent);
    border: 1px solid color-mix(in srgb, var(--tm-mod-color, var(--tm-blue)) 18%, transparent);
}
.tm-module-kicker {
    font-family: var(--tm-font-mono);
    font-weight: 800;
    font-size: .6rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--tm-mod-color, var(--tm-blue));
    margin: 0;
}
.tm-module-title {
    font-family: var(--tm-font-title);
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.12;
    color: var(--tm-ink);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tm-module-subtitle {
    font-size: .72rem;
    color: var(--tm-muted);
    margin: 1px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Boutons d'action de l'en-tête : plus discrets */
.ts-hdr-btn { border-radius: 10px !important; }

/* ── Puce d'affaire et badges flottants : accordés au thème ────── */
#techmo-aff-chip { font-family: var(--tm-font-mono) !important; }

/* ── Impression : le thème ne doit rien changer sur papier ─────── */
@media print {
    body::before { display: none; }
    body { background: #fff; }
}

/* ── Rail d'outils : icônes neutres, la couleur ne vient qu'au survol ── */
.ts-rail-btn { color: #8fa3c4 !important; transition: color .2s ease, background .2s ease; }
.ts-rail-btn:hover, .ts-rail-btn.active { color: #ffffff !important; }


/* ── En-tête compact : actions hiérarchisées (2026-07-08) ────────
   Tous les boutons de l'en-tête adoptent la même taille réduite ;
   l'action principale (1er bouton) garde son accent, les suivantes
   passent en feutré — cohérent d'un module à l'autre. */
.tm-module-header .btn,
.tm-module-header button:not(.ta-toggle):not(.btn-close) {
    padding: 4px 11px !important;
    font-size: .72rem !important;
    border-radius: 9px !important;
    line-height: 1.25 !important;
}
.tm-module-header .btn i { font-size: .72rem; }
.tm-module-header > .d-flex.flex-column { gap: 4px !important; }
.tm-module-header .d-flex.gap-2 { gap: .35rem !important; flex-wrap: wrap; justify-content: flex-end; }
.tm-module-header .ts-hdr-btn { width: auto !important; }
.tm-module-header > .d-flex.flex-column { flex: 0 0 auto; }
.tm-module-id { flex: 1 1 auto; }
.tm-module-header .ts-hdr-export-wrapper { width: auto !important; }
@media (max-width: 1100px) {
    .tm-module-subtitle { display: none; }
}