/* ==========================================================================
   THÈME ATELIER — utilitaires Bootstrap laissés en arrière
   --------------------------------------------------------------------------
   Le thème redéfinit les COMPOSANTS de Bootstrap — cartes, tableaux, boutons,
   pastilles — mais pas ses classes UTILITAIRES. Or les gabarits en sont
   truffés, et chacune remet une valeur d'origine par-dessus le thème :

     .bg-white     38 emplois, dont 26 sur des en-têtes de carte, qui perdaient
                   ainsi le fond chaud --at-surface-alt voulu par le contrat et
                   redevenaient blancs et plats ;
     .table-light  39 emplois, surtout sur des <tfoot> que le thème ne stylise
                   pas : gris froid #f8f9fa sous un tableau beige ;
     .text-dark    14 emplois : #212529, un noir froid, à côté de --at-ink ;
     .bg-body      le fond de page de Bootstrap, pas celui du contrat.

   Aucune de ces corrections ne touche au balisage : ce sont les mêmes classes,
   rebranchées sur les jetons. Retrait : supprimer l'import dans app.js.

   Le !important n'est pas un raccourci : les utilitaires de Bootstrap le
   portent eux-mêmes, on ne peut pas les reprendre autrement.
   ========================================================================== */

/* ── Surfaces ───────────────────────────────────────────────────────────── */

/* Sur un en-tête de carte, .bg-white annulait le fond chaud du thème. */
.card-header.bg-white,
.card-header.bg-body,
.card-header.bg-light {
  background-color: var(--at-surface-alt) !important;
}

.bg-white,
.bg-body { background-color: var(--at-surface) !important; }

/* ── Encres ─────────────────────────────────────────────────────────────── */
.text-dark  { color: var(--at-ink) !important; }
.text-black { color: var(--at-ink) !important; }

/* ── Pieds et en-têtes de tableau ───────────────────────────────────────── */

/* Le thème stylise les <th> d'en-tête, pas les pieds de tableau. Sans cette
   règle, un <tfoot class="table-light"> — il y en a huit, tous porteurs de
   totaux — restait en gris froid sous un tableau beige. */
.table > tfoot > tr > td,
.table > tfoot > tr > th {
  background-color: var(--at-surface-alt);
  border-top: 1px solid var(--at-line);
  color: var(--at-ink);
  padding: 11px 16px;
}

/* .table-dark posait un en-tête noir sur le seul écran de mise à jour des
   prix, alors que toute l'application a des en-têtes clairs. On le ramène
   au même traitement que les autres plutôt que de l'interdire. */
.table > thead.table-dark > tr > th {
  background-color: var(--at-surface-alt);
  color: var(--at-ink-2);
}

/* ── Traits d'accentuation ──────────────────────────────────────────────── */

/* Les bordures de champ qui signalent une colonne : elles reprenaient le bleu
   et le jaune de Bootstrap, étrangers à la palette. */
.border-info    { border-color: var(--at-accent) !important; }
.border-warning { border-color: var(--at-accent-warm) !important; }
.border-success { border-color: var(--at-success) !important; }
.border-danger  { border-color: var(--at-danger) !important; }

/* ── Séparateurs ────────────────────────────────────────────────────────── */
.border,
.border-top,
.border-bottom,
.border-start,
.border-end { border-color: var(--at-line) !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   Tableaux quadrillés.

   Le contrat ne prévoit qu'un filet entre les lignes, dans --at-line-soft.
   Quatre écrans utilisent encore la grille complète de Bootstrap (import de
   clients, tableau de bord, planning, édition d'inventaire) : la grille reste,
   elle cesse d'être tracée dans le gris froid d'origine.
────────────────────────────────────────────────────────────────────────────── */
.table-bordered > :not(caption) > * > * { border-color: var(--at-line-soft); }
.table-bordered > thead > tr > th        { border-color: var(--at-line); }

/* ─────────────────────────────────────────────────────────────────────────────
   Le fond de page.

   base.html.twig porte `class="bg-light"` sur le <body> depuis l'origine. Le
   thème posait bien son beige sur `body`, mais l'utilitaire de Bootstrap, en
   !important, le recouvrait : toute l'application s'affichait sur le gris
   froid #f8f9fa, et le beige du contrat ne se voyait nulle part.
────────────────────────────────────────────────────────────────────────────── */
body.bg-light { background-color: var(--at-ground) !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   Le code en ligne.

   Bootstrap écrit <code> en rose #d63384. L'écran d'import des clients en
   affiche douze — les en-têtes de colonne attendus — et c'est la seule
   couleur de ce genre dans toute l'application.
────────────────────────────────────────────────────────────────────────────── */
code { color: var(--at-accent); }

/* ─────────────────────────────────────────────────────────────────────────────
   La grammaire des boutons.

   Le contrat en pose déjà les trois temps : l'accent plein pour l'action
   principale, le contour neutre pour les autres, le rouge jamais plein pour
   ce qui détruit. Mais il ne couvre que les variantes pleines et le contour
   neutre. Les trois variantes de CONTOUR restées de côté tombaient sur
   Bootstrap : un « + Saisie heures » bleu, un « Export CSV » vert, un
   « Importer matériaux » jaune — trois couleurs pour trois actions du même
   rang, sur des écrans voisins.

   Elles rejoignent ici le rang qui leur revient : neutre, sauf le contour
   chaud qui garde le sens que le contrat lui donne — « action à conséquence,
   facturer, relancer ».
────────────────────────────────────────────────────────────────────────────── */

.btn-outline-primary,
.btn-outline-success,
.btn-outline-info,
.btn-outline-light,
.btn-outline-dark,
.btn-light,
.btn-dark {
  background-color: var(--at-surface);
  border-color: #CFCABF;
  color: var(--at-ink);
}
.btn-outline-primary:hover,
.btn-outline-success:hover,
.btn-outline-info:hover,
.btn-outline-light:hover,
.btn-outline-dark:hover,
.btn-light:hover,
.btn-dark:hover {
  background-color: #F1EEE8;
  border-color: #BDB7AB;
  color: var(--at-ink);
}

/* Le contour chaud : même sens que .btn-warning, même apparence. */
.btn-outline-warning {
  background-color: var(--at-surface);
  border-color: #E6C9B5;
  color: var(--at-accent-warm);
}
.btn-outline-warning:hover {
  background-color: #FBF1EC;
  border-color: #D9B49A;
  color: var(--at-accent-warm);
}

/* Une seule apparence pour l'action principale. .btn-success remplissait en
   vert ce que .btn-primary remplit en accent : deux « boutons principaux »
   d'aspect différent d'un écran à l'autre, pour le même geste — « Ajouter »
   était vert sur le devis et chaud sur la fiche chantier. */
.btn-success {
  background-color: var(--at-accent);
  border-color: var(--at-accent);
  color: #FFFFFF;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
  background-color: var(--at-accent-dark);
  border-color: var(--at-accent-dark);
  color: #FFFFFF;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Le bleu de Bootstrap sur les chiffres.

   .text-primary n'était repris nulle part : l'indigo #0d6efd s'affichait sur
   le Total HT d'un devis (deux fois), le compteur de fournitures d'un
   chantier et le bloc « à facturer » du tableau de bord — précisément les
   nombres qu'on vient chercher sur ces écrans.
────────────────────────────────────────────────────────────────────────────── */
.text-primary { color: var(--at-accent) !important; }

/* Un bouton désactivé.

   Bootstrap repeint le fond avec la couleur pleine de la variante dès que
   l'état `disabled` s'applique, et sa règle l'emporte sur celle du thème.
   Résultat : le « + Ajouter » de la fiche chantier, désactivé tant qu'aucun
   matériau n'est choisi, s'affichait en jaune vif — plus voyant que les
   boutons actifs de la même page. Un bouton qu'on ne peut pas actionner doit
   être le plus discret de l'écran, pas le plus criard. */
.btn:disabled,
.btn.disabled,
fieldset:disabled .btn {
  background-color: var(--at-surface);
  border-color: var(--at-line);
  color: var(--at-ink-3);
  opacity: 1;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Les sélecteurs à segments (btn-group + btn-check).

   Sur la fiche devis, les deux onglets « Matériau catalogue » et « Heures /
   Main-d'œuvre » étaient écrits avec deux variantes différentes : le premier
   sortait en bleu Bootstrap une fois coché, le second en ocre. Deux options
   du MÊME choix ne doivent pas avoir deux couleurs — c'est la sélection qui
   se signale, pas l'option.

   Bootstrap peint l'option cochée avec une règle plus spécifique que celle du
   thème : il faut la reprendre variante par variante pour la dépasser.
────────────────────────────────────────────────────────────────────────────── */

/* Option non retenue : toutes pareilles, quelle que soit la variante écrite. */
.btn-check + .btn {
  background-color: var(--at-surface);
  border-color: #CFCABF;
  color: var(--at-ink);
}

/* Option retenue : l'accent, et lui seul. */
.btn-check:checked + .btn-outline-primary,
.btn-check:checked + .btn-outline-secondary,
.btn-check:checked + .btn-outline-success,
.btn-check:checked + .btn-outline-warning,
.btn-check:checked + .btn-outline-danger,
.btn-check:checked + .btn-primary,
.btn-check:checked + .btn-secondary {
  background-color: var(--at-accent);
  border-color: var(--at-accent);
  color: #FFFFFF;
}

/* Cases à cocher et interrupteurs.

   Bootstrap les coche en #0d6efd. Six dans l'application — « Estimé » sur un
   achat, les sélections de lot du catalogue, l'interrupteur d'activité — et
   c'est le dernier endroit où son bleu apparaissait. */
.form-check-input:checked {
  background-color: var(--at-accent);
  border-color: var(--at-accent);
}
.form-check-input:focus {
  border-color: var(--at-accent);
  box-shadow: 0 0 0 .2rem rgba(31, 78, 107, .2);
}