/* ==========================================================================
   THÈME ATELIER — surcharge de Bootstrap 5
   --------------------------------------------------------------------------
   Application : Gestion des Heures & Chantiers
   Contrat source : contracts/design/tokens.md

   POSE — assets/app.js, juste après la feuille app.css :

            import './styles/theme-atelier.css';

   L'ordre compte : ce fichier doit être chargé APRÈS Bootstrap et après
   app.css pour gagner sur eux. AssetMapper pose alors son <link> à la suite.

   Le contrat proposait un « @ import » en fin de app.css. Deux raisons de ne
   pas le suivre : un import placé après d'autres règles est ignoré par les
   navigateurs (il doit précéder toute règle), et la ligne d'exemple écrite
   ici en commentaire suffisait à déclencher une référence circulaire à la
   compilation — le détecteur de commentaires d'AssetMapper laisse passer le
   tout premier bloc du fichier. D'où l'espace dans « @ import » ci-dessus.

   RETRAIT : supprimer cette ligne de app.js. Aucun gabarit n'est modifié.
   --------------------------------------------------------------------------
   Ce fichier ne change que des couleurs, des polices, des rayons et de la
   densité. Il ne déplace aucun élément et ne masque rien.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. POLICES — embarquées, servies par l'application
   Le contrat laissait le choix entre Google Fonts et l'embarquement. On
   embarque, pour deux raisons.

   1. La CSP de l'application n'autorise pas les domaines de Google, ni pour
      la feuille de style ni pour les fichiers de police. Un import distant
      serait BLOQUÉ, et silencieusement : le thème s'appliquerait en polices
      système, sans la moindre erreur visible. Élargir la CSP pour du décor
      serait payer cher une dépendance dont on n'a pas besoin.
   2. L'atelier n'a pas toujours le réseau. Ce que la page ne porte pas
      elle-meme risque de ne pas s'afficher.

   Sous-ensemble « latin » uniquement : il couvre les 110 caractères
   distincts du catalogue, Ø et ² compris. latin-ext, cyrillique et grec
   n'apportaient rien et doublaient le poids.

   7 fichiers, 232 Ko au total, dans assets/fonts/. AssetMapper réécrit les
   url() relatives ci-dessous vers les chemins digérés.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Archivo-eYWgLOH.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Archivo-eYWgLOH.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/IBMPlexMono-500-QJNNIVc.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/IBMPlexMono-600-uhfYm1a.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/IBMPlexSans-RssxsJZ.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/IBMPlexSans-RssxsJZ.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/IBMPlexSans-RssxsJZ.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* --------------------------------------------------------------------------
   2. JETONS
   Les variables --at-* sont la source. Les variables --bs-* qui suivent les
   rebranchent sur Bootstrap, ce qui suffit déjà pour une bonne partie des
   composants sans écrire de règle supplémentaire.
   -------------------------------------------------------------------------- */
:root {
  /* Neutres */
  --at-ground:       #F6F4F0;
  --at-surface:      #FFFFFF;
  --at-surface-alt:  #FAF8F5;
  --at-line:         #E2DED6;
  --at-line-soft:    #F0EDE7;
  --at-ink:          #1A1A18;
  --at-ink-2:        #55514A;
  --at-ink-3:        #8C877D;

  /* Accents porteurs de sens */
  --at-accent:       #1F4E6B;
  --at-accent-dark:  #14364A;
  --at-accent-warm:  #B4551E;
  --at-success:      #2E6B4F;
  --at-warning:      #9A6407;
  --at-danger:       #A32B22;

  /* Formes */
  --at-radius-card:  10px;
  --at-radius-ctrl:  8px;
  --at-shadow-card:  0 1px 2px rgba(26, 26, 24, .06);

  /* Polices */
  --at-font-title: 'Archivo', system-ui, sans-serif;
  --at-font-body:  'IBM Plex Sans', system-ui, sans-serif;
  --at-font-mono:  'IBM Plex Mono', ui-monospace, monospace;

  /* Rebranchement sur Bootstrap.
     --bs-*-rgb sert aux utilitaires d'opacité de Bootstrap : les redéfinir
     évite qu'un text-primary ou un bg-primary-subtle reste en bleu d'origine. */
  --bs-primary:        #1F4E6B;
  --bs-primary-rgb:    31, 78, 107;
  --bs-success:        #2E6B4F;
  --bs-success-rgb:    46, 107, 79;
  --bs-warning:        #9A6407;
  --bs-warning-rgb:    154, 100, 7;
  --bs-danger:         #A32B22;
  --bs-danger-rgb:     163, 43, 34;
  --bs-secondary:      #55514A;
  --bs-secondary-rgb:  85, 81, 74;
  --bs-dark:           #1A1A18;
  --bs-dark-rgb:       26, 26, 24;

  --bs-body-bg:        #F6F4F0;
  --bs-body-color:     #1A1A18;
  --bs-border-color:   #E2DED6;
  --bs-border-radius:  8px;

  --bs-body-font-family: 'IBM Plex Sans', system-ui, sans-serif;
  --bs-body-font-size:   14px;

  --bs-link-color:       #1F4E6B;
  --bs-link-hover-color: #14364A;
}


/* --------------------------------------------------------------------------
   3. FOND DE PAGE
   Le gabarit porte la classe bg-light sur le body : on la neutralise ici
   plutôt que d'ouvrir le template.
   -------------------------------------------------------------------------- */
body,
body.bg-light {
  background-color: var(--at-ground);
  color: var(--at-ink);
  font-family: var(--at-font-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}


/* --------------------------------------------------------------------------
   4. TITRES
   Archivo uniquement sur les titres. Le corps reste en Plex Sans.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.card-title,
.navbar-brand {
  font-family: var(--at-font-title);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--at-ink);
}

h1, .h1 { font-size: 26px; }
h2, .h2 { font-size: 21px; }
h3, .h3 { font-size: 17px; }
h4, .h4,
.card-title { font-size: 16px; }

/* Texte secondaire : le gris Bootstrap par défaut ne passe pas le contraste. */
.text-muted { color: var(--at-ink-2) !important; }


/* --------------------------------------------------------------------------
   5. CHIFFRES EN CHASSE FIXE
   C'est ce qui aligne les colonnes de montants et d'heures.
   Les classes Bootstrap ci-dessous sont celles qui portent aujourd'hui les
   grands nombres du tableau de bord et des fiches.
   Pour un ciblage plus fin, ajouter une classe .at-num dans les gabarits
   au lot 2 et la traiter ici.
   -------------------------------------------------------------------------- */
.display-1, .display-2, .display-3,
.display-4, .display-5, .display-6,
.fs-1, .fs-2, .fs-3,
td.text-end,
th.text-end,
.at-num {
  font-family: var(--at-font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.01em;
}


/* --------------------------------------------------------------------------
   6. BARRE DE NAVIGATION
   Passage du bleu marine à l'encre. L'entrée active se distingue par un fond
   translucide plutôt que par une nuance de bleu peu lisible.
   -------------------------------------------------------------------------- */
.navbar,
.navbar.bg-dark,
.navbar.bg-primary,
.navbar-dark {
  background-color: var(--at-ink) !important;
  border-bottom: none;
  padding-top: .5rem;
  padding-bottom: .5rem;
}

.navbar .navbar-brand {
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
}

.navbar .nav-link {
  font-size: 13.5px;
  color: #B5B0A7;
  border-radius: 7px;
  padding: 7px 11px;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: #FFFFFF;
  background-color: rgba(255, 255, 255, .08);
}

.navbar .nav-link.active {
  color: #FFFFFF;
  font-weight: 600;
  background-color: rgba(255, 255, 255, .12);
}

.navbar .dropdown-menu {
  border: 1px solid var(--at-line);
  border-radius: var(--at-radius-ctrl);
  box-shadow: 0 6px 20px rgba(26, 26, 24, .10);
  padding: 6px;
}

.navbar .dropdown-item {
  border-radius: 6px;
  font-size: 13.5px;
  padding: 8px 12px;
}


/* --------------------------------------------------------------------------
   7. CARTES
   Trait fin et ombre discrète, à la place de la bordure franche d'origine.
   -------------------------------------------------------------------------- */
.card {
  background-color: var(--at-surface);
  border: 1px solid var(--at-line);
  border-radius: var(--at-radius-card);
  box-shadow: var(--at-shadow-card);
}

.card-header {
  background-color: var(--at-surface-alt);
  border-bottom: 1px solid var(--at-line);
  font-family: var(--at-font-title);
  font-weight: 700;
  font-size: 16px;
  padding: 14px 18px;
}

.card-body   { padding: 16px 18px; }
.card-footer {
  background-color: var(--at-surface-alt);
  border-top: 1px solid var(--at-line);
  padding: 12px 18px;
}


/* --------------------------------------------------------------------------
   8. TABLEAUX
   En-têtes en petites capitales grises, séparateurs plus fins, lignes plus
   aérées. Le survol est adouci : le gris Bootstrap est trop marqué sur un
   fond chaud.
   -------------------------------------------------------------------------- */
.table {
  --bs-table-bg:          var(--at-surface);
  --bs-table-border-color: var(--at-line-soft);
  --bs-table-hover-bg:     var(--at-surface-alt);
  margin-bottom: 0;
  color: var(--at-ink);
}

.table > thead > tr > th {
  background-color: var(--at-surface-alt);
  border-bottom: 1px solid var(--at-line);
  font-family: var(--at-font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--at-ink-2);
  padding: 11px 16px;
  white-space: nowrap;
}

.table > tbody > tr > td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--at-line-soft);
  vertical-align: middle;
}

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

/* Une table posée dans une carte ne doit pas doubler les bordures. */
.card > .table,
.card > .table-responsive > .table { border: none; }


/* --------------------------------------------------------------------------
   9. PASTILLES DE STATUT
   Fond teinté clair et texte foncé, à la place des badges pleins.
   Les badges de l'application utilisent les classes de couleur Bootstrap :
   on les redéfinit sans toucher au balisage.
   -------------------------------------------------------------------------- */
.badge {
  font-family: var(--at-font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0;
  border-radius: 999px;
  padding: 4px 11px;
  line-height: 1.45;
}

.badge.bg-warning,
.badge.text-bg-warning   { background-color: #FBF0D9 !important; color: #7A4E00 !important; }

.badge.bg-secondary,
.badge.text-bg-secondary { background-color: #EAE7E1 !important; color: #46423B !important; }

.badge.bg-success,
.badge.text-bg-success   { background-color: #DDEDE3 !important; color: #1F5840 !important; }

.badge.bg-primary,
.badge.bg-info,
.badge.text-bg-primary,
.badge.text-bg-info      { background-color: #DCE7F0 !important; color: #1B4560 !important; }

.badge.bg-danger,
.badge.text-bg-danger    { background-color: #F7E0DC !important; color: #8C2018 !important; }

.badge.bg-light,
.badge.text-bg-light     { background-color: #EDEAE3 !important; color: var(--at-ink-2) !important; }

.badge.bg-dark,
.badge.text-bg-dark      { background-color: var(--at-ink) !important; color: #FFFFFF !important; }


/* --------------------------------------------------------------------------
   10. BOUTONS
   Hauteur minimale de 44 px : la même interface sert au bureau et sur le
   chantier, au doigt.
   -------------------------------------------------------------------------- */
.btn {
  font-family: var(--at-font-body);
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--at-radius-ctrl);
  padding: 10px 18px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.btn-sm {
  font-size: 13px;
  padding: 7px 13px;
  min-height: 38px;
}

.btn-primary {
  background-color: var(--at-accent);
  border-color: var(--at-accent);
  color: #FFFFFF;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--at-accent-dark);
  border-color: var(--at-accent-dark);
}

/* Contour neutre : le gris Bootstrap disparaît sur fond chaud. */
.btn-outline-secondary,
.btn-secondary {
  background-color: var(--at-surface);
  border-color: #CFCABF;
  color: var(--at-ink);
}
.btn-outline-secondary:hover,
.btn-secondary:hover {
  background-color: #F1EEE8;
  border-color: #BDB7AB;
  color: var(--at-ink);
}

/* Action à conséquence : facturer, relancer. Chaude mais pas destructive. */
.btn-warning {
  background-color: var(--at-surface);
  border-color: #E6C9B5;
  color: var(--at-accent-warm);
}
.btn-warning:hover {
  background-color: #FBF1EC;
  border-color: #D9B49A;
  color: var(--at-accent-warm);
}

/* Destructif : jamais plein, jamais mis en avant. */
.btn-danger,
.btn-outline-danger {
  background-color: var(--at-surface);
  border-color: #E3BEB9;
  color: var(--at-danger);
}
.btn-danger:hover,
.btn-outline-danger:hover {
  background-color: #F9EBE9;
  border-color: #D3A49E;
  color: var(--at-danger);
}

.btn-success {
  background-color: var(--at-success);
  border-color: var(--at-success);
  color: #FFFFFF;
}

.btn:focus-visible {
  outline: 2px solid var(--at-accent);
  outline-offset: 2px;
  box-shadow: none;
}


/* --------------------------------------------------------------------------
   11. FORMULAIRES
   -------------------------------------------------------------------------- */
.form-label {
  font-size: 12.5px;
  font-weight: 600;
  color: #46423B;
  margin-bottom: 5px;
}

.form-control,
.form-select {
  font-family: var(--at-font-body);
  font-size: 15px;
  color: var(--at-ink);
  background-color: var(--at-surface);
  border: 1px solid #CFCABF;
  border-radius: var(--at-radius-ctrl);
  padding: 10px 13px;
  min-height: 44px;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--at-accent);
  box-shadow: 0 0 0 3px rgba(31, 78, 107, .14);
}

.form-control::placeholder { color: var(--at-ink-3); }

.form-text { font-size: 12px; color: var(--at-ink-2); }

textarea.form-control { min-height: 80px; }


/* --------------------------------------------------------------------------
   12. ALERTES
   -------------------------------------------------------------------------- */
.alert {
  border-radius: var(--at-radius-card);
  border-width: 1px;
  font-size: 14px;
  padding: 13px 16px;
}

.alert-info    { background-color: #EAF1F6; border-color: #C2D6E3; color: #1B4560; }
.alert-warning { background-color: #FBF1EC; border-color: #E8CBBA; color: #7A3A12; }
.alert-success { background-color: #DDEDE3; border-color: #B7D6C4; color: #1F5840; }
.alert-danger  { background-color: #F7E0DC; border-color: #E3BEB9; color: #8C2018; }


/* --------------------------------------------------------------------------
   13. DIVERS
   -------------------------------------------------------------------------- */
a { color: var(--at-accent); text-decoration: none; }
a:hover { color: var(--at-accent-dark); text-decoration: underline; }

hr { border-color: var(--at-line); opacity: 1; }

.breadcrumb { font-size: 13px; margin-bottom: 8px; }
.breadcrumb-item + .breadcrumb-item::before { color: #B0ABA2; }

.progress { background-color: #EDEAE3; border-radius: 999px; height: 7px; }
.progress-bar { background-color: var(--at-accent); }

.pagination .page-link {
  color: var(--at-ink);
  border-color: var(--at-line);
  font-size: 13px;
}
.pagination .page-item.active .page-link {
  background-color: var(--at-accent);
  border-color: var(--at-accent);
}


/* --------------------------------------------------------------------------
   14. MOBILE
   Sous 768 px, les tableaux larges deviennent des cartes empilées.
   Cette règle suppose que chaque cellule porte un attribut data-label repris
   du titre de colonne. Tant que cet attribut n'existe pas dans les gabarits,
   laisser ce bloc commenté : sans lui, les lignes perdent leurs libellés.
   L'ajout des data-label est une tâche du lot 2.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

  /* Confort de saisie au doigt, sans condition préalable. */
  .form-control,
  .form-select,
  .btn {
    min-height: 48px;
    font-size: 16px; /* 16 px empêche le zoom automatique sur iOS */
  }

  .card-body { padding: 14px; }

  /*
  .table-cards thead { display: none; }
  .table-cards tbody tr {
    display: block;
    background: var(--at-surface);
    border: 1px solid var(--at-line);
    border-radius: var(--at-radius-card);
    margin-bottom: 10px;
    padding: 4px 12px;
  }
  .table-cards tbody td {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    border: none;
    border-bottom: 1px solid var(--at-line-soft);
    padding: 9px 0;
  }
  .table-cards tbody tr td:last-child { border-bottom: none; }
  .table-cards tbody td::before {
    content: attr(data-label);
    font-size: 12px;
    font-weight: 600;
    color: var(--at-ink-2);
  }
  */
}


/* --------------------------------------------------------------------------
   15. IMPRESSION
   Les documents imprimés sortent en noir sur blanc, sans fond coloré.
   -------------------------------------------------------------------------- */
@media print {
  body { background: #FFFFFF; font-size: 11pt; }
  .navbar, .btn, .pagination { display: none !important; }
  .card { border: 1px solid #999999; box-shadow: none; }
  .badge { border: 1px solid #999999; color: #000000 !important; background: none !important; }
}