/* CRM — composants. Aucune couleur ici : uniquement les variables de theme.css
   (vérifié par tests/unitaires/theme.test.js). Guide : docs/DESIGN.md.

   Deux registres :
   - « verre » (cartes translucides, lueurs) : accueil et tableaux de bord (.avec-lueurs, .carte-verre) ;
   - « épuré » (surfaces pleines, très lisibles) : tableaux, formulaires, documents. */

:root {
  --police: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --rayon-petit: 8px;
  --rayon: 12px;
  --rayon-grand: 18px;
  --largeur-menu: 248px;
  --hauteur-onglets: 64px;
  --courbe: cubic-bezier(0.2, 0.7, 0.2, 1);
}

* { box-sizing: border-box; }

/* Un élément masqué (attribut hidden) le reste, même si sa classe lui donne un affichage (bouton…). */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--police);
  font-size: 15px;
  line-height: 1.55;
  color: var(--texte);
  background: var(--fond);
  font-feature-settings: "cv11", "ss01";
  transition: background-color 0.3s, color 0.3s;
}

/* Transition des couleurs, seulement pendant un changement de mode (theme.js). */
.changement-theme *,
.changement-theme *::before,
.changement-theme *::after { transition: background-color 0.3s, border-color 0.3s, color 0.3s, fill 0.3s !important; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

h1 { font-size: 1.65rem; font-weight: 700; letter-spacing: -0.02em; margin: 0; line-height: 1.2; }
h2 { font-size: 1.05rem; font-weight: 650; letter-spacing: -0.01em; margin: 0 0 0.75rem; }
h3 { font-size: 0.95rem; font-weight: 650; margin: 1rem 0 0.25rem; }

pre { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: 0.85rem; font-family: inherit; }
code { font-family: ui-monospace, Consolas, monospace; font-size: 0.92em; }

.icone { width: 18px; height: 18px; flex: none; }

.lien-evitement { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 8px 14px; border-radius: var(--rayon-petit); background: var(--accent); color: var(--sur-accent); }
.lien-evitement:focus { top: 8px; }

/* --- Structure : menu à gauche (ordinateur), barre du bas (téléphone) --- */

.colonne { min-width: 0; }
.avec-menu .colonne { margin-left: var(--largeur-menu); }

.contenu { padding: 8px 28px 32px; max-width: 1320px; min-width: 0; overflow-wrap: anywhere; }
/* Le bouton flottant de l’assistant (en bas à droite) ne doit jamais cacher le bas de la page (pagination, boutons). */
body:has(.assistant-bouton) .contenu { padding-bottom: 104px; }
.sans-menu .contenu { max-width: none; padding: 0; }

.cartouche { display: flex; align-items: center; justify-content: center; background: var(--cartouche); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 8px 10px; }
.cartouche img { display: block; max-width: 100%; height: auto; }

.menu {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--largeur-menu);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 14px;
  overflow-y: auto;
  z-index: 20;
  background: var(--surface-menu);
  border-right: 1px solid var(--bord);
  backdrop-filter: var(--flou);
  -webkit-backdrop-filter: var(--flou);
}
.menu-logo { margin-bottom: 14px; }
.menu-logo img { max-height: 56px; }

.menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

.menu a,
.menu .lien-menu {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 42px;
  padding: 8px 12px;
  border-radius: 11px;
  color: var(--texte-doux);
  font-weight: 550;
  transition: background-color 0.2s, color 0.2s;
}
.menu a:hover,
.menu .lien-menu:hover { color: var(--texte); background: var(--neutre-pale); text-decoration: none; }
.menu a.actif { color: var(--texte); background: var(--accent-pale); box-shadow: inset 0 0 0 1px var(--anneau); }
.menu a.actif .icone { color: var(--accent); }
.menu a small { display: block; color: var(--texte-doux); font-weight: 400; font-size: 0.8rem; line-height: 1.2; }

/* Sections du menu : titre = bouton (petites majuscules discrètes, chevron), corps repliable. */
.menu-section { margin-top: 10px; }
.menu-titre {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  margin: 0 0 2px; padding: 6px 12px; border: 0; border-radius: var(--rayon-petit); background: none;
  font: inherit; font-size: 0.72rem; font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--texte-doux); cursor: pointer; text-align: left;
}
.menu-titre:hover { color: var(--texte); background: var(--neutre-pale); }
.menu-titre:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; color: var(--texte); }
.menu-titre .chevron { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s var(--courbe); }
.menu-section.fermee .menu-titre .chevron { transform: rotate(-90deg); }
.menu-section-corps { display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows 0.22s var(--courbe), opacity 0.22s var(--courbe); }
.menu-section-corps > ul { min-height: 0; overflow: hidden; visibility: visible; transition: visibility 0s; }
/* Replié seulement quand le script est là (sans JavaScript, tout reste ouvert) ; liens retirés du parcours au clavier. */
.js .menu-section.fermee .menu-section-corps { grid-template-rows: 0fr; opacity: 0; }
.js .menu-section.fermee .menu-section-corps > ul { visibility: hidden; transition: visibility 0s linear 0.22s; }

.menu-pied { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--bord); display: flex; flex-direction: column; gap: 8px; }
.menu-pied .segment { align-self: flex-start; margin-left: 6px; }

.entete-appli { display: flex; align-items: center; gap: 12px; padding: 18px 28px 10px; max-width: 1320px; }
.entete-logo { display: none; }

.recherche {
  flex: 1;
  min-width: 0;
  max-width: 560px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-radius: 13px;
  background: var(--surface-pleine);
  border: 1px solid var(--bord);
  color: var(--texte-doux);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.recherche:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--anneau); }
.recherche input { border: 0; background: transparent; min-height: 42px; padding: 0; box-shadow: none; }
.recherche input:focus { outline: none; box-shadow: none; }

.bouton-cloche { margin-left: auto; }
.bouton-cloche + .pastille-utilisateur { margin-left: 0; }
.pastille-utilisateur { margin-left: auto; display: flex; align-items: center; gap: 10px; padding: 4px 14px 4px 4px; border-radius: 999px; background: var(--surface-pleine); border: 1px solid var(--bord); color: var(--texte); font-weight: 550; white-space: nowrap; max-width: 40%; }
.pastille-utilisateur:hover { text-decoration: none; border-color: var(--accent); }
.pastille-utilisateur-nom { overflow: hidden; text-overflow: ellipsis; }
.initiales { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--sur-accent); font-weight: 700; font-size: 0.78rem; }

.barre-onglets { display: none; }
.voile { display: none; }

/* Commutateur à segments (mode d'affichage). */
.segment { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--neutre-pale); }
.segment button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--texte-doux); font: inherit; font-weight: 550; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.segment button:hover { color: var(--texte); }
.segment button[aria-pressed="true"] { background: var(--surface-pleine); color: var(--texte); box-shadow: var(--ombre-legere); }
.segment button[aria-pressed="true"] .icone { color: var(--accent); }
.segment-libelles button { padding: 8px 14px; }

/* Lueurs de fond (accueil, tableaux de bord) : dégradés, sans filtre coûteux. */
.avec-lueurs::before,
.avec-lueurs::after { content: ""; position: fixed; z-index: -1; pointer-events: none; border-radius: 50%; }
.avec-lueurs::before { width: 720px; height: 720px; right: -220px; top: -260px; background: radial-gradient(closest-side, var(--lueur-1), transparent); }
.avec-lueurs::after { width: 640px; height: 640px; left: 140px; bottom: -300px; background: radial-gradient(closest-side, var(--lueur-2), transparent); }
.avec-lueurs { isolation: isolate; }

/* --- Téléphone et petite tablette --- */

@media (max-width: 900px) {
  body { font-size: 16px; }
  .avec-menu .colonne { margin-left: 0; }
  .contenu { padding: 4px 16px calc(var(--hauteur-onglets) + 28px + env(safe-area-inset-bottom, 0px)); }
  body:has(.assistant-bouton) .contenu { padding-bottom: calc(var(--hauteur-onglets) + 92px + env(safe-area-inset-bottom, 0px)); }

  .entete-appli { padding: 12px 16px 8px; gap: 10px; position: sticky; top: 0; z-index: 10; background: var(--fond); }
  .entete-logo { display: flex; padding: 4px 8px; border-radius: 10px; flex: none; }
  .entete-logo img { height: 30px; width: auto; }
  .recherche { padding: 0 10px; }
  .pastille-utilisateur { padding: 3px; max-width: none; }
  .pastille-utilisateur-nom { display: none; }

  .menu { width: min(300px, 86vw); transform: translateX(-100%); transition: transform 0.25s var(--courbe); background: var(--surface-pleine); z-index: 40; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  .menu-ouvert .menu { transform: none; box-shadow: var(--ombre-forte); }
  .menu-ouvert .voile { display: block; position: fixed; inset: 0; background: var(--voile); z-index: 35; }

  .barre-onglets {
    display: flex;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 30;
    justify-content: space-around;
    min-height: var(--hauteur-onglets);
    padding: 6px 6px env(safe-area-inset-bottom, 0px);
    background: var(--surface-pleine);
    border-top: 1px solid var(--bord);
  }
  .barre-onglets a,
  .barre-onglets button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 52px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--texte-doux);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
  }
  .barre-onglets .icone { width: 22px; height: 22px; }
  .barre-onglets a:hover { text-decoration: none; }
  .barre-onglets a.actif { color: var(--accent); }

  h1 { font-size: 1.4rem; }
}

/* --- Blocs --- */

.entete-page { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 6px 0 18px; }
.entete-section { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 0.75rem; }
.entete-section h2 { margin: 0; }

.surtitre { margin: 0 0 4px; color: var(--texte-doux); font-weight: 550; font-size: 0.9rem; }

.carte {
  background: var(--surface-pleine);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-grand);
  box-shadow: var(--ombre-legere);
  padding: 20px 22px;
  margin-bottom: 16px;
}
.carte-verre { background: var(--surface-verre); backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou); box-shadow: var(--ombre); }
.carte-etroite { max-width: 560px; margin: 48px auto; }
.carte.vide { color: var(--texte-doux); text-align: center; }
.carte.vide p { margin: 0; }

.grille-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; margin-bottom: 16px; }
.grille-2 > .carte { margin-bottom: 0; }
.pile > .carte { margin-bottom: 16px; }
@media (max-width: 1000px) { .grille-2 { grid-template-columns: 1fr; } }

.tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-bottom: 16px; }
.tuile {
  background: var(--surface-pleine);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-grand);
  box-shadow: var(--ombre-legere);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--texte);
  transition: transform 0.25s var(--courbe), border-color 0.25s;
}
a.tuile:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--accent); }
.tuile-nombre { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; color: var(--texte); line-height: 1.2; font-variant-numeric: tabular-nums; }
.tuile-libelle { color: var(--texte-doux); font-size: 0.9rem; }
.tuile-alerte .tuile-nombre { color: var(--erreur); }
.avec-lueurs .tuile { background: var(--surface-verre); backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou); }

.details { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.details dt { color: var(--texte-doux); }
.details dd { margin: 0; word-break: break-word; }
.texte-grand { font-size: 1.15rem; }

.liste-simple { list-style: none; margin: 0; padding: 0; }
.liste-simple li { padding: 10px 0; border-bottom: 1px solid var(--bord); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.liste-simple li:last-child { border-bottom: 0; }

.discret { color: var(--texte-doux); font-size: 0.9rem; }
.texte-libre { white-space: pre-wrap; }
.inactif { opacity: 0.6; }

.sommaire { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.sommaire a { padding: 6px 12px; border-radius: 999px; background: var(--surface-pleine); border: 1px solid var(--bord); font-size: 0.9rem; font-weight: 550; }
.sommaire a:hover { border-color: var(--accent); text-decoration: none; }

/* --- Pastilles d'état et alertes --- */

.pastille { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; vertical-align: middle; white-space: nowrap; }
.pastille-bleue { background: var(--accent-pale); color: var(--accent); }
.pastille-grise { background: var(--neutre-pale); color: var(--texte-doux); }
.pastille-verte { background: var(--ok-pale); color: var(--ok); }
.pastille-rouge { background: var(--erreur-pale); color: var(--erreur); }
.pastille-ambre { background: var(--attention-pale); color: var(--attention); }

.alerte { padding: 12px 16px; border-radius: var(--rayon); margin: 0 0 16px; border: 1px solid transparent; }
.alerte-succes { background: var(--ok-pale); border-color: color-mix(in srgb, var(--ok) 30%, transparent); color: var(--ok); }
.alerte-erreur { background: var(--erreur-pale); border-color: color-mix(in srgb, var(--erreur) 30%, transparent); color: var(--erreur); }
.alerte-info { background: var(--attention-pale); border-color: color-mix(in srgb, var(--attention) 30%, transparent); color: var(--attention); }
.alerte a { color: inherit; text-decoration: underline; }

/* --- Formulaires --- */

fieldset { border: 0; margin: 0 0 20px; padding: 0; min-width: 0; }
legend { font-weight: 650; font-size: 1.02rem; margin-bottom: 8px; padding: 0; }

.grille-champs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 16px; }
.grille-champs .large { grid-column: span 2; }
@media (max-width: 600px) { .grille-champs { grid-template-columns: 1fr 1fr; } .grille-champs .champ { grid-column: span 2; } .grille-champs .etroit { grid-column: span 1; } }

.champ { display: flex; flex-direction: column; margin-bottom: 14px; min-width: 0; }
.champ label { font-weight: 600; font-size: 0.9rem; margin-bottom: 4px; }
.requis { color: var(--erreur); }

input,
select,
textarea {
  font: inherit;
  color: inherit;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--bord-champ);
  border-radius: 10px;
  background: var(--surface-pleine);
  width: 100%;
  max-width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}
/* Cases à cocher et boutons radio : petite taille fixe, jamais étirés comme un champ de saisie. */
input[type="checkbox"],
input[type="radio"] { width: 20px; height: 20px; min-height: 0; padding: 0; margin: 0; flex: 0 0 auto; accent-color: var(--accent); }
input[type="file"] { padding: 8px; }
textarea { resize: vertical; }
input:focus,
select:focus,
textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--anneau); }
input:disabled,
select:disabled,
textarea:disabled { background: var(--fond-2); color: var(--texte-doux); }

.en-erreur input,
.en-erreur select,
.en-erreur textarea,
input.en-erreur { border-color: var(--erreur); }
.erreur { color: var(--erreur); margin-top: 4px; }
.aide { color: var(--texte-doux); font-size: 0.85rem; margin-top: 4px; }
p.aide { margin: 0 0 12px; }

.cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 16px; }
.case { display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-height: 44px; cursor: pointer; text-align: left; }

.filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.filtres input[type="search"] { flex: 1 1 260px; width: auto; }
.filtres select,
.filtres input:not([type="search"]) { width: auto; }

.formulaire-ligne { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.formulaire-ligne input { flex: 1 1 160px; width: auto; }
.choix-annee select { width: auto; flex: 0 0 auto; }
.formulaire-ligne .champ-court,
.champ-court { flex: 0 0 90px; width: 90px; }
.formulaire-bouton { display: inline; margin: 0; }

.liste-editable { display: flex; flex-direction: column; gap: 8px; }
.ligne-editable { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-bottom: 8px; border-bottom: 1px solid var(--bord); }
.ligne-editable .formulaire-ligne { flex: 1 1 auto; }
.ligne-ajout { padding-top: 8px; }

.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.actions-collantes { position: sticky; bottom: 0; padding: 12px 0; background: linear-gradient(to top, var(--fond) 70%, transparent); margin-bottom: 16px; }
@media (max-width: 900px) { .actions-collantes { bottom: calc(var(--hauteur-onglets) + env(safe-area-inset-bottom, 0px)); } }

/* Le logo reste toujours sur un cartouche blanc, y compris en mode sombre. */
.logo-apercu { padding: 16px; border: 1px dashed var(--bord-champ); border-radius: var(--rayon); margin-bottom: 8px; background: var(--cartouche); text-align: center; }
.logo-apercu img { max-width: 100%; max-height: 120px; }

/* Choix de la palette (Paramètres) : chaque échantillon porte data-palette, donc ses propres teintes. */
.echantillons { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 4px 0 14px; }
.echantillon { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-weight: 550; }
.echantillon input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.echantillon-pastille { width: 34px; height: 34px; border-radius: 50%; background: var(--p-vif); box-shadow: inset 0 0 0 1px var(--bord); transition: transform 0.2s var(--courbe), box-shadow 0.2s; }
.echantillon:hover .echantillon-pastille { transform: scale(1.08); }
.echantillon input:checked + .echantillon-pastille { box-shadow: 0 0 0 2px var(--surface-pleine), 0 0 0 4px var(--p-vif); }
.echantillon input:focus-visible + .echantillon-pastille { outline: 2px solid var(--accent); outline-offset: 5px; }

/* --- Boutons --- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 18px;
  border-radius: var(--rayon);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.2s var(--courbe), box-shadow 0.2s;
}
.bouton:hover { text-decoration: none; }
.bouton:disabled { opacity: 0.55; cursor: default; }
.bouton-principal { background: var(--accent); color: var(--sur-accent); box-shadow: 0 8px 20px -10px var(--accent); }
.bouton-principal:hover { background: var(--accent-survol); transform: translateY(-1px); }
.bouton-secondaire { background: var(--surface-pleine); color: var(--accent); border-color: var(--bord-champ); }
.bouton-secondaire:hover { border-color: var(--accent); background: var(--accent-pale); }
.bouton-danger { background: var(--surface-pleine); color: var(--erreur); border-color: color-mix(in srgb, var(--erreur) 45%, transparent); }
.bouton-danger:hover { background: var(--erreur-pale); }
.bouton-discret { background: transparent; color: var(--texte-doux); }
.bouton-discret:hover { color: var(--texte); background: var(--neutre-pale); }
.bouton-large { width: 100%; }

.lien { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; width: 100%; text-align: left; }

/* --- Tableaux (registre épuré) --- */

.tableau-defilant { overflow-x: auto; max-width: 100%; background: var(--surface-pleine); border: 1px solid var(--bord); border-radius: var(--rayon-grand); box-shadow: var(--ombre-legere); margin-bottom: 16px; }
.tableau { width: 100%; border-collapse: collapse; }
.tableau th,
.tableau td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--bord); vertical-align: top; }
.tableau th { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; color: var(--texte-doux); background: var(--fond-2); white-space: nowrap; }
.tableau tbody tr:last-child td { border-bottom: 0; }
.tableau .nombre { text-align: right; }
.tableau tbody tr { transition: background-color 0.15s; }
.tableau tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.tableau-journal pre { max-width: 320px; }

/* Sur téléphone, les lignes des listes deviennent des cartes. */
@media (max-width: 700px) {
  .tableau-defilant:has(.tableau-cartes) { background: transparent; border: 0; box-shadow: none; overflow: visible; }
  .tableau-cartes thead { display: none; }
  .tableau-cartes,
  .tableau-cartes tbody,
  .tableau-cartes tr,
  .tableau-cartes td { display: block; width: 100%; }
  .tableau-cartes tr { background: var(--surface-pleine); border: 1px solid var(--bord); border-radius: var(--rayon); margin-bottom: 10px; padding: 8px 4px; box-shadow: var(--ombre-legere); }
  .tableau-cartes td { border: 0; padding: 4px 12px; }
  .tableau-cartes td.nombre { text-align: left; }
  .tableau-cartes td[data-libelle]:empty { display: none; }
  .tableau-cartes td[data-libelle]::before { content: attr(data-libelle); display: block; font-size: 0.75rem; color: var(--texte-doux); font-weight: 600; }
}

.pagination { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; color: var(--texte-doux); }
.pagination-liens { display: flex; align-items: center; gap: 8px; }

/* --- Connexion --- */

.connexion { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.connexion-carte { width: 100%; max-width: 400px; margin: 0; padding: 28px; box-shadow: var(--ombre); }
.connexion-logo { display: block; max-width: 220px; max-height: 90px; margin: 0 auto 18px; }
.connexion-carte .cartouche { margin: 0 auto 18px; width: fit-content; }
.connexion-carte .cartouche .connexion-logo { margin: 0; }
.connexion-carte h1 { text-align: center; margin-bottom: 18px; font-size: 1.3rem; }

/* --- Documents (phase 2) --- */

.nombre { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

.onglets { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--bord); }
.onglets a { padding: 10px 14px; color: var(--texte-doux); border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 600; }
.onglets a:hover { color: var(--texte); text-decoration: none; }
.onglets a.actif { color: var(--accent); border-bottom-color: var(--accent); }

.carte-etroite-gauche { max-width: 720px; }
.carte-info { background: var(--accent-pale); border-color: var(--anneau); }
.liste-compacte { margin: 6px 0 0; padding-left: 20px; }
.details-marge { margin-top: 12px; }
.legende-petite { font-size: 0.95rem; }
.titre-marge { margin-top: 20px; }
.cases-colonne { grid-template-columns: 1fr; }

.grille-document { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; margin-bottom: 16px; }
.grille-document > .carte { margin-bottom: 0; }
@media (max-width: 1000px) { .grille-document { grid-template-columns: 1fr; } }

.totaux { width: 100%; border-collapse: collapse; }
.totaux th { text-align: left; font-weight: 400; padding: 5px 0; color: var(--texte-doux); }
.totaux td { text-align: right; padding: 5px 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.totaux tr.fort th,
.totaux tr.fort td { font-weight: 700; color: var(--texte); border-top: 1px solid var(--bord); font-size: 1.05rem; }

.tableau-lignes { box-shadow: none; }
.editeur-lignes { width: 100%; border-collapse: collapse; min-width: 900px; }
.editeur-lignes th { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; color: var(--texte-doux); text-align: left; padding: 8px 6px; background: var(--fond-2); border-bottom: 1px solid var(--bord); }
.editeur-lignes td { padding: 6px; border-bottom: 1px solid var(--bord); vertical-align: top; }
.editeur-lignes input,
.editeur-lignes select,
.editeur-lignes textarea { min-height: 40px; padding: 6px 8px; }
.editeur-lignes .col-designation { min-width: 260px; }
.editeur-lignes .col-nombre { width: 90px; }
.editeur-lignes .col-nombre input { text-align: right; }
.editeur-lignes .col-unite { width: 90px; }
.editeur-lignes .col-tva { width: 90px; }
.editeur-lignes .col-remise { width: 150px; }
.editeur-lignes .col-total { width: 110px; padding-top: 16px; font-weight: 600; }
.editeur-lignes .ligne-titre textarea { font-weight: 700; background: var(--accent-pale); }
.editeur-lignes .ligne-texte textarea { font-style: italic; }
.ligne-outils { width: 44px; white-space: nowrap; display: table-cell; }
.bouton-icone { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--bord-champ); border-radius: var(--rayon-petit); background: var(--surface-pleine); color: var(--texte-doux); cursor: pointer; font-size: 0.85rem; margin: 0 1px 2px 0; }
.bouton-icone:hover { color: var(--texte); border-color: var(--accent); }
.bouton-icone-danger:hover { color: var(--erreur); border-color: var(--erreur); }
.tableau .ligne-titre td { font-weight: 700; background: var(--fond-2); }

.remise { display: flex; gap: 4px; }
.remise input { flex: 1 1 60px; min-width: 0; text-align: right; }
.remise select { flex: 0 0 64px; width: 64px; padding-left: 6px; padding-right: 6px; }
.remise-globale { max-width: 260px; }
.editeur-lignes .ligne-soustotal td { background: var(--fond-2); }
.editeur-lignes .ligne-soustotal input[name="l_designation"] { font-weight: 700; text-align: right; }
.editeur-lignes .ligne-soustotal .col-total { font-weight: 700; }
.tableau .ligne-soustotal td { font-weight: 700; background: var(--fond-2); text-align: right; }

/* --- Comptabilité (phase 3) --- */

.champ-court-large { flex: 0 0 130px; width: 130px; text-align: right; }
.marge-haut { margin-top: 12px; }
.ecriture-lignes { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.ecriture-lignes td { padding: 2px 6px; border: 0; }
.chiffre-afc { font-variant-numeric: tabular-nums; color: var(--texte-doux); width: 60px; }
.tableau .fort td,
.tableau .fort th { font-weight: 700; }
.grille-tva { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .grille-tva { grid-template-columns: 1fr; } }
.officielle { border-color: var(--accent); box-shadow: 0 0 0 2px var(--anneau); }
.ligne-intermediaire td { background: var(--fond-2); }
.ligne-resultat td { background: var(--accent); color: var(--sur-accent); }
.ligne-resultat td a { color: var(--sur-accent); }

/* --- Dépenses (phase 4) --- */

.scan { max-width: 560px; }
.bouton-scan { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 180px; margin: 8px 0 16px; border: 2px dashed var(--accent); border-radius: var(--rayon-grand); background: var(--accent-pale); color: var(--accent); font-weight: 700; font-size: 1.15rem; cursor: pointer; text-align: center; padding: 16px; transition: background-color 0.2s; }
.bouton-scan input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.bouton-scan small { font-weight: 400; color: var(--texte-doux); font-size: 0.85rem; }
.bouton-scan-icone { font-size: 2.6rem; line-height: 1; }
.bouton-scan.choisi { border-style: solid; border-color: var(--ok); background: var(--ok-pale); color: var(--ok); }
.choix-scan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 8px 0 16px; }
.choix-scan .bouton-scan { margin: 0; min-height: 160px; }
.choix-scan[hidden] { display: none; }
.bouton-scan-fichier { border-style: solid; border-color: var(--bord-champ); background: var(--surface-pleine); }
@media (max-width: 420px) { .choix-scan { grid-template-columns: 1fr; } .choix-scan .bouton-scan { min-height: 120px; } }

/* Nettoyage d'une photo : image, cadre vert et 4 poignées déplaçables (positions posées par scan.js). */
.nettoyage[hidden] { display: none; }
.nettoyage-cadre { position: relative; width: fit-content; max-width: 100%; margin: 8px 0 12px; touch-action: none; user-select: none; }
.nettoyage-cadre canvas { display: block; max-width: 100%; border-radius: var(--rayon-petit); }
.nettoyage-contour { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.nettoyage-contour polygon { fill: color-mix(in srgb, var(--ok) 14%, transparent); stroke: var(--ok); stroke-width: 2; }
.nettoyage-poignee {
  position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; padding: 0;
  transform: translate(var(--x, 0), var(--y, 0));
  border: 3px solid var(--ok); border-radius: 50%; background: color-mix(in srgb, var(--surface-pleine) 70%, transparent);
  box-shadow: var(--ombre-legere); cursor: grab; touch-action: none;
}
.nettoyage-poignee:active { cursor: grabbing; }
.nettoyage-poignee:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.scan-attente { text-align: center; color: var(--accent); font-weight: 600; margin-top: 12px; }
.grille-depense { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; align-items: start; margin-bottom: 16px; }
.grille-depense > .carte { margin-bottom: 0; }
@media (max-width: 1000px) { .grille-depense { grid-template-columns: 1fr; } }
.justificatif img { width: 100%; height: auto; border: 1px solid var(--bord); border-radius: var(--rayon-petit); }
.lecture-brute { max-height: 320px; overflow: auto; background: var(--fond-2); padding: 8px; border-radius: var(--rayon-petit); font-family: ui-monospace, Consolas, monospace; font-size: 0.78rem; }
.editeur-compact { min-width: 0; }
.editeur-lignes .col-article { min-width: 200px; }
.moins-cher { background: var(--ok-pale); font-weight: 700; }
.marge-bas { margin-bottom: 16px; }
@media (max-width: 700px) { .bouton-scan-accueil { width: 100%; min-height: 64px; font-size: 1.1rem; } }

/* --- Banque (phase 6) --- */

.import-releve { flex: 0 1 520px; }
.import-releve input[type="file"] { flex: 1 1 220px; min-width: 0; width: auto; }
.sans-retour { white-space: nowrap; }
.montant-entree { color: var(--ok); font-weight: 650; }
.montant-sortie { color: var(--texte); }
.montant-titre { margin: 0; font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.montant-titre small { font-size: 0.85rem; color: var(--texte-doux); }
.cellule-action { text-align: right; white-space: nowrap; }
@media (max-width: 700px) { .cellule-action { text-align: left; } }

/* --- Planning (phase 7) --- */

.planning-grille { min-width: 980px; }
.planning-grille th,
.planning-grille td { padding: 8px; vertical-align: top; }
.planning-grille td { min-width: 112px; }
.planning-grille .planning-personne { white-space: nowrap; font-size: 0.9rem; text-transform: none; letter-spacing: 0; color: var(--texte); background: transparent; }
.planning-aujourdhui { background: var(--accent-pale); }
.creneau { display: flex; flex-direction: column; gap: 0; margin-bottom: 6px; padding: 6px 8px; border-radius: var(--rayon-petit); border-left: 3px solid var(--accent); background: var(--surface-pleine); box-shadow: var(--ombre-legere); font-size: 0.82rem; line-height: 1.3; color: var(--texte); }
a.creneau:hover { text-decoration: none; border-left-color: var(--accent-survol); box-shadow: var(--ombre); }
.creneau strong { font-size: 0.85rem; }
.creneau-vacances, .creneau-ferie { border-left-color: var(--ok); }
.creneau-maladie, .creneau-accident { border-left-color: var(--erreur); }
.creneau-formation { border-left-color: var(--attention); }
.creneau-sous-traitant { border-left: 3px dashed var(--attention); background: var(--attention-pale); }
.creneau-ajouter { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px dashed var(--bord-champ); border-radius: var(--rayon-petit); color: var(--texte-doux); font-weight: 700; }
.creneau-ajouter:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }
.heures-groupe th[scope="row"] { text-transform: none; letter-spacing: 0; font-size: 0.95rem; color: var(--texte); background: transparent; }
.formulaire-compact { max-width: 640px; }
.titre-mois { margin: 14px 0 4px; font-size: 1rem; color: var(--texte-doux); }
.titre-mois:first-of-type { margin-top: 4px; }
/* Suggestions du catalogue sous le champ « Désignation ». */
.suggestions { position: fixed; z-index: 60; margin: 0; padding: 4px; list-style: none; max-height: 18rem; overflow-y: auto; background: var(--surface-pleine); border: 1px solid var(--bord); border-radius: var(--rayon-petit); box-shadow: var(--ombre); }
.suggestions li { display: grid; gap: 2px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.suggestions li[aria-selected="true"], .suggestions li:hover { background: var(--accent-pale); }
.suggestions .suggestion-prix { color: var(--accent); font-weight: 600; }
.suggestions small { color: var(--texte-doux); }

/* Éditeur des lignes d’une soumission : la désignation prend la place, les autres colonnes restent étroites. */
.editeur-soumission { min-width: 760px; table-layout: fixed; }
.editeur-soumission th:nth-child(1) { width: 7.5rem; }
.editeur-soumission th:nth-child(3) { width: 7rem; }
.editeur-soumission th:nth-child(4) { width: 5.5rem; }
.editeur-soumission th:nth-child(5) { width: 9rem; }
.editeur-soumission input { width: 100%; }

/* Pièces du chantier : formulaire d’ajout sur toute la largeur une fois ouvert, pièces désactivées atténuées. */
.ajout-piece { margin: 0; }
.ajout-piece > summary { list-style: none; }
.ajout-piece[open] { flex-basis: 100%; order: 3; }
.ajout-piece > summary::-webkit-details-marker { display: none; }
.ligne-inactive { opacity: 0.6; }

/* Bons de régie : cadre de signature (toujours clair, comme sur papier) et aperçu. */
.signature-zone { border: 2px dashed var(--bord-champ); border-radius: var(--rayon); background: var(--cartouche); overflow: hidden; margin-bottom: 8px; touch-action: none; }
.signature-zone canvas { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; cursor: crosshair; touch-action: none; }
.signature-apercu { background: var(--cartouche); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 8px; }
.signature-apercu img { display: block; width: 100%; height: auto; }
/* Calendrier de chantier : étapes, cloche des notifications. */
.liste-etapes { list-style: none; margin: 0; padding: 0; counter-reset: etape; }
.etape { counter-increment: etape; position: relative; padding: 10px 0 10px 40px; border-bottom: 1px solid var(--bord); }
.etape:last-child { border-bottom: 0; }
.etape::before { content: counter(etape); position: absolute; left: 0; top: 10px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 0.85rem; background: var(--neutre-pale); color: var(--texte-doux); }
.etape-en_cours::before { background: var(--accent-pale); color: var(--accent); }
.etape-termine::before { background: var(--ok-pale); color: var(--ok); }
.etape-resume { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.etape-modifier { margin-top: 6px; }
.etape-modifier summary, details > summary { color: var(--accent); font-weight: 600; }
.bouton-cloche { position: relative; display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--surface-pleine); border: 1px solid var(--bord); color: var(--texte); }
.bouton-cloche:hover { border-color: var(--accent); text-decoration: none; }
.compteur-cloche { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--erreur); color: var(--sur-accent); font-size: 0.72rem; font-weight: 700; display: grid; place-items: center; }
.notification-lue { opacity: 0.7; }
@media (max-width: 600px) { .liste-notifications .discret { flex-basis: 100%; padding-left: 19px; } }
.notification-texte { flex: 1; min-width: 0; }
.champ-date { flex: 0 0 160px; width: 160px; }
/* Calendrier d'un chantier : semaine, mois, frise (SVG), liste sur téléphone. */
.segment-lien { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 14px; border-radius: 9px; color: var(--texte-doux); font-weight: 550; }
.segment-lien:hover { color: var(--texte); text-decoration: none; }
.segment-lien.actif { background: var(--surface-pleine); color: var(--texte); box-shadow: var(--ombre-legere); }
.cal-titre-mois { text-transform: capitalize; padding: 0 8px; }
.cal-grille { display: grid; gap: 8px; margin-bottom: 16px; }
.cal-semaine { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-jour { background: var(--surface-pleine); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 8px; min-height: 160px; min-width: 0; }
.cal-jour-titre { font-size: 0.85rem; margin: 0 0 6px; text-transform: capitalize; }
.cal-non-travaille { background: var(--fond-2); }
.cal-aujourdhui { border-color: var(--accent); box-shadow: 0 0 0 2px var(--anneau); }
.cal-raison { margin: 0 0 6px; font-size: 0.75rem; color: var(--texte-doux); }
.cal-etape { display: block; margin: 0 0 4px; padding: 2px 6px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; background: var(--neutre-pale); color: var(--texte-doux); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-etape-en_cours { background: var(--accent-pale); color: var(--accent); }
.cal-etape-termine { background: var(--ok-pale); color: var(--ok); }
.cal-affectations { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cal-affectations li { display: flex; flex-direction: column; padding: 4px 6px; border-left: 3px solid var(--accent); border-radius: 4px; background: var(--fond); font-size: 0.8rem; line-height: 1.3; }
.cal-affectations li.conflit-attention, .liste-simple li.conflit-attention { border-left: 3px solid var(--attention); }
.cal-affectations li.conflit-erreur, .liste-simple li.conflit-erreur { border-left: 3px solid var(--erreur); }
.cal-affectations li.cal-sous-traitant { border-left: 3px dashed var(--attention); }
.liste-simple li.cal-sous-traitant { border-left: 3px dashed var(--attention); padding-left: 8px; }
.liste-simple li.conflit-attention, .liste-simple li.conflit-erreur { padding-left: 8px; }
.cal-conflit { display: block; font-size: 0.72rem; font-weight: 600; color: var(--attention); }
.conflit-erreur .cal-conflit { color: var(--erreur); }
.cal-mois { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-mois-entete { font-size: 0.75rem; font-weight: 600; color: var(--texte-doux); text-align: center; text-transform: capitalize; }
.cal-case { display: flex; flex-direction: column; gap: 2px; min-height: 92px; min-width: 0; padding: 6px; border: 1px solid var(--bord); border-radius: var(--rayon-petit); background: var(--surface-pleine); color: var(--texte); }
.cal-case:hover { border-color: var(--accent); text-decoration: none; }
.cal-hors-mois { opacity: 0.45; }
.cal-case.cal-non-travaille { background: var(--fond-2); }
.cal-case.cal-aujourdhui { border-color: var(--accent); box-shadow: 0 0 0 2px var(--anneau); }
.cal-numero { font-weight: 700; font-size: 0.85rem; }
.cal-compte { font-size: 0.72rem; color: var(--texte-doux); }
.cal-alerte { color: var(--attention); font-weight: 700; }
.frise { display: block; max-width: none; }
.frise text { font-size: 11px; fill: var(--texte-doux); font-family: var(--police); }
.frise .frise-nom { fill: var(--texte); font-weight: 600; }
.frise-non-travaille { fill: var(--fond-2); }
.frise-trait { stroke: var(--bord); stroke-width: 1; }
.frise-aujourdhui { stroke: var(--accent); stroke-width: 2; }
.frise-barre { fill: var(--neutre-pale); stroke: var(--bord-champ); stroke-width: 1; }
.frise-en_cours { fill: var(--accent-pale); stroke: var(--accent); }
.frise-termine { fill: var(--ok-pale); stroke: var(--ok); }
.frise-retard { fill: var(--erreur-pale); stroke: var(--erreur); }
.frise-sous-traitant { fill: var(--attention-pale); stroke: var(--attention); }
.frise-evenement { fill: var(--accent); stroke: var(--surface-pleine); stroke-width: 1.5; }
.cal-evenement { display: block; margin: 4px 0; padding: 4px 6px; border-radius: 4px; background: var(--accent-pale); color: var(--texte); font-size: 0.8rem; line-height: 1.3; border-left: 3px solid var(--accent); }
.cal-evenement:hover { text-decoration: none; box-shadow: inset 0 0 0 1px var(--accent); }
.cal-evenement-annule { opacity: 0.6; text-decoration: line-through; }
.cal-compte-evenement { color: var(--accent); }
.frise .frise-nom-st { font-style: italic; }
.etape-actions { margin-top: 6px; }
.cal-liste { display: none; }
@media (max-width: 800px) {
  .cal-grille, .cal-nav { display: none; }
  .cal-liste { display: block; }
}
.titre-repli { display: inline; margin: 0; }
details > summary { cursor: pointer; }
details[open] > summary { margin-bottom: 12px; }
.cases-jours { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.heure-24 { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.heure-24-listes { display: flex; align-items: center; gap: 6px; }
.heure-24-listes select { width: auto; min-width: 76px; font-variant-numeric: tabular-nums; }
.champ-titre { font-weight: 600; font-size: 0.9rem; margin-bottom: 4px; }
.jour-aujourdhui { border-color: var(--accent); box-shadow: 0 0 0 2px var(--anneau); }
.signaler { margin-top: 8px; }
.signaler summary { color: var(--accent); font-weight: 600; }

/* --- Graphiques : mêmes variables que les pastilles d'état --- */

.courbe { width: 100%; height: auto; max-height: 320px; }
.courbe text { font-size: 11px; fill: var(--texte-doux); }
.courbe .axe { stroke: var(--bord-champ); stroke-width: 1; }
.legende-courbe { display: flex; flex-wrap: wrap; gap: 12px; font-size: 0.9rem; }
.legende-courbe svg { vertical-align: -1px; }
.serie-1 { stroke: var(--serie-1); fill: var(--serie-1); }
.serie-2 { stroke: var(--serie-2); fill: var(--serie-2); }
.serie-3 { stroke: var(--serie-3); fill: var(--serie-3); }
.serie-4 { stroke: var(--serie-4); fill: var(--serie-4); }
.serie-5 { stroke: var(--serie-5); fill: var(--serie-5); }
.serie-6 { stroke: var(--serie-6); fill: var(--serie-6); }
polyline[class^="serie-"] { fill: none; }

/* Mini-courbe des tuiles de l'accueil. */
.courbe-mini { display: block; width: 100%; height: 38px; margin-top: 8px; }
.courbe-mini polyline { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.courbe-mini polygon { fill: var(--accent); opacity: 0.12; }

/* Les colonnes des grilles ne s'élargissent jamais à cause de leur contenu (tableau large, longue
   adresse) : sur téléphone, c'est le tableau qui défile dans sa carte, pas la page qui déborde. */
.grille-2 > *,
.grille-document > *,
.grille-depense > *,
.grille-tva > *,
.grille-champs > * { min-width: 0; }
@media (max-width: 700px) {
  .carte { padding: 16px; }
  .editeur-lignes { min-width: 760px; }
}

/* --- Accueil (registre « verre ») --- */

.accueil-entete { align-items: center; }
.accueil-date { margin: 4px 0 0; }
.tuiles-accueil { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tuile-nombre small { font-size: 0.8rem; font-weight: 550; color: var(--texte-doux); letter-spacing: 0; }
.tuile-detail { font-size: 0.82rem; font-weight: 550; color: var(--texte-doux); }
.tuile-alerte .tuile-detail { color: var(--erreur); }
.grille-accueil { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 16px; }
.grille-accueil > .carte { margin-bottom: 0; }
.tableau-souple { overflow-x: auto; }
.tableau-leger th { background: transparent; padding-top: 0; }
.tableau-leger td { border-bottom: 0; border-top: 1px solid var(--bord); }
.tableau-leger th:first-child,
.tableau-leger td:first-child { padding-left: 0; }
.tableau-leger th:last-child,
.tableau-leger td:last-child { padding-right: 0; }
.sous-ligne { display: block; font-size: 0.82rem; color: var(--texte-doux); }
.tableau-leger td:first-child strong { white-space: nowrap; }
.point-etat { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--texte-doux); }
.point-etat.etat-attention { background: var(--attention); box-shadow: 0 0 0 4px var(--attention-pale); }
.point-etat.etat-erreur { background: var(--erreur); box-shadow: 0 0 0 4px var(--erreur-pale); }
.point-etat.etat-ok { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-pale); }
.point-etat.etat-accent { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-pale); }
.carte-assistant { display: flex; align-items: center; gap: 14px; background: linear-gradient(110deg, var(--accent-pale), var(--surface-verre) 65%); }
.carte-assistant-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; }
@media (max-width: 1000px) {
  .tuiles-accueil { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille-accueil { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .tuiles-accueil { gap: 10px; }
  .tuiles-accueil .tuile { padding: 14px; }
  .tuiles-accueil .tuile-nombre { font-size: 1.25rem; }
  .carte-assistant { flex-wrap: wrap; }
  .tableau-leger th:nth-child(3),
  .tableau-leger td:nth-child(3) { display: none; }
  .carte-assistant .bouton { width: 100%; }
}

/* --- Apparition douce, une seule fois à l'ouverture d'une page --- */

@keyframes apparition { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.contenu { animation: apparition 0.4s var(--courbe) both; }
.avec-lueurs .tuiles > * { animation: apparition 0.5s var(--courbe) both; }
.avec-lueurs .tuiles > :nth-child(2) { animation-delay: 0.05s; }
.avec-lueurs .tuiles > :nth-child(3) { animation-delay: 0.1s; }
.avec-lueurs .tuiles > :nth-child(4) { animation-delay: 0.15s; }
.avec-lueurs .tuiles > :nth-child(n + 5) { animation-delay: 0.2s; }

/* --- Assistant (phase 5) : l'avatar et la fenêtre suivent la couleur du thème --- */

.avatar-assistant { flex: none; }
.avatar-assistant .avatar-fond,
.avatar-assistant .avatar-point { fill: var(--accent); }
.avatar-assistant .avatar-bulle { fill: var(--avatar-bulle); }
.avatar-assistant .avatar-losange { fill: color-mix(in srgb, var(--accent-vif) 55%, var(--avatar-bulle)); stroke: var(--avatar-bulle); stroke-width: 1.5; }

.assistant-bouton { position: fixed; right: 20px; bottom: 20px; z-index: 30; display: flex; align-items: center; gap: 8px; padding: 4px 16px 4px 4px; border: 1px solid var(--bord); border-radius: 999px; background: var(--surface-pleine); box-shadow: var(--ombre); cursor: pointer; font: inherit; font-weight: 700; color: var(--accent); transition: transform 0.2s var(--courbe), box-shadow 0.2s; }
.assistant-bouton:hover { transform: translateY(-2px); box-shadow: var(--ombre-forte); }
.assistant-ouvert .assistant-bouton { display: none; }
.assistant-panneau { position: fixed; right: 20px; bottom: 20px; z-index: 45; width: 420px; max-width: calc(100vw - 32px); height: min(680px, calc(100vh - 40px)); display: flex; flex-direction: column; background: var(--surface-pleine); border: 1px solid var(--bord); border-radius: var(--rayon-grand); box-shadow: var(--ombre-forte); overflow: hidden; animation: apparition 0.25s var(--courbe) both; }
.assistant-panneau[hidden] { display: none; }
.assistant-entete { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--bord); background: var(--accent-pale); }
.assistant-titre { flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.assistant-titre small { color: var(--texte-doux); }
.assistant-historique { padding: 8px 14px; border-bottom: 1px solid var(--bord); }
.assistant-historique select { min-height: 36px; padding: 4px 8px; font-size: 0.9rem; }
.assistant-messages { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--fond); }
.assistant-accueil p { margin: 0 0 8px; }
.assistant-message { display: flex; flex-direction: column; max-width: 88%; }
.assistant-moi { align-self: flex-end; align-items: flex-end; }
.assistant-reponse { align-self: flex-start; }
.assistant-bulle { padding: 10px 12px; border-radius: 14px; overflow-wrap: anywhere; }
.assistant-moi .assistant-bulle { background: var(--accent); color: var(--sur-accent); border-bottom-right-radius: 4px; }
.assistant-reponse .assistant-bulle { background: var(--surface-pleine); border: 1px solid var(--bord); border-bottom-left-radius: 4px; }
.assistant-attente .assistant-bulle { color: var(--texte-doux); font-style: italic; }
.assistant-erreur .assistant-bulle { border-color: color-mix(in srgb, var(--erreur) 30%, transparent); background: var(--erreur-pale); color: var(--erreur); }
.assistant-liens { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.assistant-liens .bouton { min-height: 34px; padding: 4px 10px; font-size: 0.85rem; }
.assistant-saisie { padding: 10px 14px; border-top: 1px solid var(--bord); display: flex; flex-direction: column; gap: 6px; }
.assistant-saisie textarea { min-height: 52px; max-height: 160px; }
.assistant-actions { display: flex; gap: 8px; justify-content: flex-end; }
.assistant-micro { min-width: 52px; font-size: 1.2rem; }
.assistant-micro-actif { background: var(--erreur-pale); border-color: var(--erreur); color: var(--erreur); }
.assistant-etat:empty { display: none; }
@media (max-width: 900px) {
  .assistant-bouton { right: 12px; bottom: calc(var(--hauteur-onglets) + 12px + env(safe-area-inset-bottom, 0px)); padding: 4px; }
  .assistant-bouton-texte { display: none; }
  .assistant-bouton .avatar-assistant { width: 46px; height: 46px; }
  .assistant-panneau { inset: 0; width: 100%; max-width: none; height: 100%; border-radius: 0; z-index: 50; }
}

/* --- Réduire les animations : demandé par l'appareil, tout s'arrête --- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* --- Impression --- */

@media print {
  .menu, .barre-onglets, .entete-appli, .voile, .filtres, .actions, .sommaire, .onglets, form, .assistant-bouton, .assistant-panneau, .lien-evitement { display: none !important; }
  .avec-menu .colonne { margin-left: 0; }
  .contenu { padding: 0; max-width: none; animation: none; }
  .carte, .tableau-defilant { box-shadow: none; break-inside: avoid; }
  .avec-lueurs::before, .avec-lueurs::after { display: none; }
}

/* Vue d'ensemble du calendrier (partie 8b) : chantiers en lignes, jours en colonnes. */
.ensemble-semaine th, .ensemble-semaine td { vertical-align: top; min-width: 112px; }
.ensemble-semaine .ensemble-chantier { min-width: 170px; text-align: left; text-transform: none; letter-spacing: normal; font-size: 0.9rem; font-weight: 400; color: var(--texte); background: var(--surface-pleine); }
.ensemble-semaine .ensemble-chantier .sous-ligne { color: var(--texte-doux); }
.ensemble-semaine .ensemble-chantier .pastille { margin-top: 4px; }
.ensemble-non-travaille { background: var(--fond-2); }
.cal-etape-retard { background: var(--erreur-pale); color: var(--erreur); }
.frise .frise-nom-retard { fill: var(--erreur); }

.champ-lien { width: 100%; font-family: ui-monospace, monospace; font-size: 0.8rem; margin-top: 6px; }

.liste-etapes { margin: 8px 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }

.connexion-pied { margin: 18px 0 0; text-align: center; font-size: 0.875rem; }
.page-publique { max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; }
.page-publique .cartouche { margin-bottom: 20px; width: fit-content; }
.page-publique h2 { margin-top: 28px; }
.page-publique li { margin-bottom: 4px; }
.texte-politique { width: 100%; min-height: 60vh; font-family: inherit; line-height: 1.5; }

.bandeau-entrainement { margin: 0 0 14px; padding: 8px 12px; border: 1px dashed var(--attention); border-radius: 8px; background: var(--attention-pale); color: var(--attention); font-size: 0.875rem; }

.bouton-remarque { margin-left: auto; }
.bouton-remarque + .bouton-cloche { margin-left: 8px; }
.capture-remarque { max-width: 100%; max-height: 480px; border: 1px solid var(--bord); border-radius: 8px; }