/* Démo autonome de l'ERP — mêmes couleurs que l'application. */
:root {
  --fond: #f6f6f4;
  --surface: #ffffff;
  --bord: #e4e3df;
  --encre: #0b0b0b;
  --encre-2: #52514e;
  --encre-3: #7a7974;
  --accent: #2a78d6;
  --accent-clair: #cde2fb;
  --succes: #0ca30c;
  --attention: #fab219;
  --serieux: #ec835a;
  --danger: #d03b3b;
  --menu: #26262a;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fond); color: var(--encre); }
body { font: 14px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
.chiffres { font-variant-numeric: tabular-nums; }
.cache { display: none !important; }

/* Mise en page */
.appli { display: flex; min-height: 100dvh; }
.menu { position: sticky; top: 0; height: 100dvh; width: 232px; flex-shrink: 0; background: var(--menu); color: #fff; padding: 16px; display: flex; flex-direction: column; }
.menu .marque { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; font-weight: 600; }
.logo { width: 32px; height: 32px; border-radius: 8px; background: var(--accent); display: grid; place-items: center; font-weight: 700; color: #fff; }
.menu nav a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; color: #d6d3d1; font-weight: 500; margin-bottom: 2px; }
.menu nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.menu nav a.actif { background: var(--accent); color: #fff; }
.menu .moi { margin-top: auto; border-top: 1px solid rgba(255,255,255,.1); padding-top: 14px; font-size: 13px; }
.menu .moi small { display: block; color: #a8a29e; margin-bottom: 8px; }
.lien-discret { background: none; border: 0; padding: 0; cursor: pointer; color: #d6d3d1; font-size: 12px; }
.lien-discret:hover { color: #fff; }
.contenu { flex: 1; min-width: 0; padding: 24px 32px 48px; }
.page { max-width: 1240px; margin: 0 auto; }
.entete-mobile, .barre-mobile { display: none; }

/* Éléments */
.carte { background: var(--surface); border: 1px solid var(--bord); border-radius: 12px; }
.carte-tete { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--bord); font-weight: 600; }
.carte-tete a { font-size: 12px; font-weight: 500; color: var(--accent); }
.titre-page { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 20px; }
.titre-page h1 { font-size: 24px; font-weight: 600; letter-spacing: -.01em; }
.sous-titre { color: var(--encre-2); margin-top: 4px; }
.champ { display: block; width: 100%; border: 1px solid var(--bord); border-radius: 8px; background: var(--surface); padding: 8px 12px; outline: none; }
.champ:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-clair); }
label.etiquette { display: block; font-weight: 500; color: var(--encre-2); }
label.etiquette > .champ { margin-top: 4px; }
.bouton, .bouton-principal { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 8px; padding: 8px 14px; font-weight: 500; cursor: pointer; border: 1px solid var(--bord); background: var(--surface); }
.bouton:hover { background: var(--fond); }
.bouton-principal { background: var(--accent); border-color: var(--accent); color: #fff; }
.bouton-principal:hover { filter: brightness(1.1); }
.segments { display: inline-flex; border: 1px solid var(--bord); background: var(--surface); border-radius: 8px; padding: 2px; }
.segments a { padding: 5px 12px; border-radius: 6px; font-weight: 500; color: var(--encre-2); }
.segments a.actif { background: var(--accent); color: #fff; }
.vide { padding: 32px 16px; text-align: center; color: var(--encre-3); }
.liste { list-style: none; margin: 0; padding: 0; }
.liste > li + li { border-top: 1px solid var(--bord); }
.ligne { display: block; padding: 12px 16px; }
a.ligne:hover { background: var(--fond); }
.meta { font-size: 12px; color: var(--encre-2); }
.meta-3 { font-size: 12px; color: var(--encre-3); }
.tronque { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rangee { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.grille-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.grille-tdb { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.pile > * + * { margin-top: 24px; }
.pile-s > * + * { margin-top: 12px; }

/* Badges : couleur + symbole + libellé */
.badge { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; border: 1px solid; border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 500; }
.badge::before { font-size: 10px; }
.ton-neutre { background: #f5f5f4; color: var(--encre-2); border-color: #e7e5e4; }
.ton-neutre::before { content: "○"; }
.ton-info { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
.ton-info::before { content: "ⓘ"; }
.ton-succes { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.ton-succes::before { content: "✓"; }
.ton-attention { background: #fffbeb; color: #78350f; border-color: #fde68a; }
.ton-attention::before { content: "△"; }
.ton-danger { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.ton-danger::before { content: "✕"; }
.societe { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--encre-2); }
.societe i, .pastille { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* Tableau de bord */
.alerte { display: block; padding: 16px; border-left: 4px solid var(--succes); }
.alerte:hover { box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.alerte .nombre { display: flex; justify-content: space-between; align-items: flex-start; font-size: 30px; font-weight: 600; }
.alerte .nombre span { font-size: 18px; }
.alerte.critique { border-left-color: var(--danger); } .alerte.critique .nombre span { color: var(--danger); }
.alerte.serieux { border-left-color: var(--serieux); } .alerte.serieux .nombre span { color: var(--serieux); }
.alerte.attention { border-left-color: var(--attention); } .alerte.attention .nombre span { color: #d97706; }
.alerte.ok .nombre span { color: var(--succes); }
.indicateur { padding: 16px; }
.indicateur strong { display: block; font-size: 24px; font-weight: 600; margin-top: 4px; }
.voyants { display: flex; gap: 4px; }
.voyant { width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.v-termine { background: var(--succes); color: #fff; }
.v-retard { background: var(--danger); color: #fff; }
.v-en_cours { background: var(--accent-clair); color: #1e3a8a; }
.v-a_venir { background: #f5f5f4; color: var(--encre-3); }
.legende { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 12px 16px; border-top: 1px solid var(--bord); font-size: 12px; color: var(--encre-2); }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.legende i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.dossier-tdb { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.barres { list-style: none; margin: 0; padding: 16px; }
.barres li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 2rem; align-items: center; gap: 8px; margin-bottom: 8px; }
.barres .piste { height: 12px; background: var(--accent-clair); border-radius: 0 4px 4px 0; }
.barres .piste i { display: block; height: 100%; background: var(--accent); border-radius: 0 4px 4px 0; }
.barres .valeur { text-align: right; color: var(--encre-2); }
.pied-carte { border-top: 1px solid var(--bord); padding: 12px 16px; font-size: 12px; color: var(--encre-2); }

/* Avancement */
.avancement { display: inline-flex; align-items: center; gap: 8px; }
.avancement .piste { width: 80px; height: 6px; border-radius: 99px; background: var(--accent-clair); overflow: hidden; }
.avancement .piste i { display: block; height: 100%; background: var(--accent); }

/* Listes de dossiers */
.filtres { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 10px; padding: 12px; margin-bottom: 16px; }
.filtres .actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filtres .actions a.droite { margin-left: auto; color: var(--accent); font-weight: 500; }
table.tableau { width: 100%; border-collapse: collapse; }
.tableau th { text-align: left; font-size: 12px; font-weight: 500; color: var(--encre-2); background: var(--fond); padding: 8px 16px; border-bottom: 1px solid var(--bord); }
.tableau td { padding: 12px 16px; border-top: 1px solid var(--bord); vertical-align: middle; }
.tableau tbody tr { cursor: pointer; }
.tableau tbody tr:hover { background: var(--fond); }
.pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }

/* Fiche dossier */
.retour { color: var(--encre-2); }
.retour:hover { color: var(--encre); }
.fiche-tete { margin: 8px 0 24px; }
.fiche-tete h1 { font-size: 24px; font-weight: 600; margin: 8px 0; }
.onglets { display: flex; gap: 4px; border-bottom: 1px solid var(--bord); margin-bottom: 16px; overflow-x: auto; }
.onglets a { padding: 8px 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; font-weight: 500; color: var(--encre-2); white-space: nowrap; }
.onglets a.actif { border-color: var(--accent); color: var(--accent); }
details.carte > summary { cursor: pointer; padding: 14px 16px; font-weight: 500; }
details.carte > div { padding: 0 16px 16px; }
.section-tete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 10px 16px; background: var(--fond); border-bottom: 1px solid var(--bord); font-weight: 600; border-radius: 12px 12px 0 0; }
.tache { display: flex; gap: 12px; padding: 10px 16px; }
.tache.faite { background: #fafaf9; }
.tache.faite .libelle { color: var(--encre-3); text-decoration: line-through; text-decoration-color: #d6d3d1; }
.case { width: 24px; height: 24px; flex-shrink: 0; border-radius: 6px; border: 1px solid #d6d3d1; background: var(--surface); cursor: pointer; display: grid; place-items: center; color: transparent; font-weight: 700; }
.case:hover { border-color: var(--accent); color: var(--accent-clair); }
.case.cochee { background: var(--succes); border-color: var(--succes); color: #fff; }
.tache .corps { flex: 1; min-width: 0; }
.en-retard { color: var(--danger); font-weight: 500; }
.icone-bouton { background: none; border: 0; border-radius: 6px; padding: 4px 6px; cursor: pointer; color: var(--encre-3); font-size: 12px; }
.icone-bouton:hover { background: var(--fond); color: var(--encre); }
.edition-tache { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 8px; align-items: end; padding: 0 16px 12px 52px; }
.formulaire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.formulaire .large { grid-column: 1 / -1; }
.formulaire fieldset { border: 0; padding: 0; margin: 0; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; min-width: 0; }
.formulaire legend { font-weight: 600; margin-bottom: 8px; }
.message-ok { color: var(--succes); }
.message-erreur { color: var(--danger); }
.etape-modele { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) 11rem 11rem 5rem auto; gap: 8px; align-items: center; padding: 8px 16px; }

/* Connexion */
.connexion { min-height: 100dvh; display: grid; place-items: center; padding: 16px; }
.connexion .carte { width: 100%; max-width: 380px; padding: 32px; }
.bandeau-demo { background: #fffbeb; border: 1px solid #fde68a; color: #78350f; border-radius: 8px; padding: 10px 12px; font-size: 12px; margin-bottom: 16px; }

/* Compléments : grilles, liens, boutons */
@media (max-width: 1399px) { .grille-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.grille-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grille-6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.lien { color: var(--accent); font-weight: 500; }
.lien:hover { text-decoration: underline; }
.lien-bloc { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; font: inherit; }
.lien-bloc:hover { background: var(--fond); }
.icone { display: inline-block; width: 18px; text-align: center; }
.indicateur.alerte-texte strong { color: var(--danger); }
.champ.nombre { text-align: right; font-variant-numeric: tabular-nums; }
.bouton.grand, .bouton-principal.grand { padding: 12px 16px; font-size: 15px; }
.formulaire.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.voyants .separateur { width: 8px; }
.a-completer { color: var(--serieux); font-style: italic; }

/* Histogramme du chiffre d'affaires : une seule teinte, mois courant accentué */
.histogramme { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; height: 180px; align-items: end; }
.histogramme .colonne { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 4px; min-width: 0; }
.histogramme .barre { width: 100%; max-width: 40px; background: var(--accent-clair); border-radius: 4px 4px 0 0; }
.histogramme .colonne:hover .barre { background: #86b6ef; }
.histogramme .barre.courante { background: var(--accent); }
.histogramme .mois { font-size: 11px; color: var(--encre-3); }
.histogramme .valeur-barre { font-size: 11px; color: var(--encre-2); white-space: nowrap; min-height: 14px; }
.donnees-graphique { margin-top: 12px; font-size: 12px; color: var(--encre-2); }
.donnees-graphique summary { cursor: pointer; }

/* Grilles jour par jour (disponibilités, planning) */
.grille-dispo { border-collapse: collapse; width: 100%; font-size: 12px; }
.grille-dispo th, .grille-dispo td { border-bottom: 1px solid var(--bord); padding: 6px 4px; text-align: center; white-space: nowrap; }
.grille-dispo thead th { background: var(--fond); font-weight: 500; color: var(--encre-2); position: sticky; top: 0; }
.grille-dispo tbody th { text-align: left; font-weight: 500; padding-left: 16px; min-width: 220px; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.grille-dispo th.aujourdhui { color: var(--accent); box-shadow: inset 0 -2px var(--accent); }
.grille-dispo td { font-variant-numeric: tabular-nums; color: var(--encre-3); min-width: 38px; }
.grille-dispo td.pris { background: #eef5fd; color: var(--encre); }
.grille-dispo td.manque { background: #fde8e8; color: var(--danger); font-weight: 600; }
.grille-dispo td.couvert { background: #e9f8e9; color: #166534; }
.grille-dispo td.conge { background: #f5f5f4; color: var(--encre-3); font-style: italic; }
.grille-dispo tr.groupe th { background: var(--fond); text-transform: uppercase; font-size: 11px; letter-spacing: .04em; color: var(--encre-3); padding: 8px 16px; }
.planning .bloc { display: inline-block; min-width: 30px; border-radius: 4px; color: #fff; font-weight: 600; padding: 2px 4px; }
.planning .bloc.attente { opacity: .55; outline: 2px dashed rgba(0,0,0,.35); outline-offset: -2px; }
.legende i.c-pris { background: #eef5fd; } .legende i.c-manque { background: #fde8e8; } .legende i.c-couvert { background: #e9f8e9; }
.legende i.c-conge { background: #f5f5f4; } .legende i.c-attente { background: #9ec5f4; outline: 2px dashed rgba(0,0,0,.35); outline-offset: -2px; }
.barres-jours { display: grid; grid-template-columns: repeat(21, minmax(0, 1fr)); gap: 4px; height: 120px; padding: 16px; align-items: end; }
.barres-jours div { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 4px; }
.barres-jours span { width: 100%; background: var(--accent); border-radius: 3px 3px 0 0; }
.barres-jours span.manque { background: var(--danger); }
.barres-jours small { font-size: 10px; color: var(--encre-3); }

/* Entrepôt */
.kanban { display: grid; grid-template-columns: repeat(5, minmax(200px, 1fr)); gap: 12px; overflow-x: auto; }
.colonne-kanban { background: var(--fond); }
.carte-kanban { background: var(--surface); border: 1px solid var(--bord); border-radius: 10px; margin: 8px; padding: 10px; display: grid; gap: 4px; }
.carte-kanban .bouton { margin-top: 6px; font-size: 12px; padding: 6px 10px; }

/* Documents (devis, factures, bons) */
.document { background: #fff; border: 1px solid var(--bord); border-radius: 12px; padding: 32px; color: #111; }
.document-tete { display: flex; justify-content: space-between; gap: 16px; border-bottom: 2px solid #111; padding-bottom: 16px; margin-bottom: 16px; }
.document-tete h2 { font-size: 20px; letter-spacing: .06em; }
.document-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 16px; }
.document-lignes th, .document-lignes td { padding: 8px; }
.document-lignes td:nth-child(n+2), .document-lignes th:nth-child(n+2) { text-align: right; }
.document-totaux { margin: 16px 0 16px auto; max-width: 320px; }
.document-totaux p { display: flex; justify-content: space-between; padding: 4px 0; }
.document-totaux .total { border-top: 2px solid #111; font-weight: 700; font-size: 16px; margin-top: 4px; padding-top: 8px; }
.document-lettres { margin: 12px 0; }
.document-pied { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--bord); font-size: 11px; color: var(--encre-2); }
.edition-lignes td { padding: 6px 8px; }
.edition-lignes input[name^="designation"] { min-width: 220px; }
.edition-lignes .nombre { width: 90px; }

/* Terrain (téléphone) */
.terrain { max-width: 560px; margin: 0 auto; }
.terrain .invitation { border-color: var(--attention); box-shadow: 0 0 0 3px #fff3cd; }
.terrain .choisie { background: #eef5fd; }
.case-ligne { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; font: inherit; padding: 14px 16px; }
.case-ligne:hover { background: var(--fond); }
.case-ligne.faite { color: var(--encre-3); }
.vignettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.vignettes figure { margin: 0; }
.vignettes img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; }

/* Notifications et confirmations intégrées à la page */
.notification { position: fixed; top: calc(16px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 60; max-width: min(520px, calc(100vw - 32px)); border-radius: 10px; padding: 10px 16px; box-shadow: 0 8px 24px rgba(0,0,0,.15); font-weight: 500; }
.a-confirmer { background: #fef2f2 !important; border-color: var(--danger) !important; color: #991b1b !important; }
.groupe-acompte { display: inline-flex; gap: 4px; }
.groupe-acompte .champ { width: auto; }

/* Visite guidée */
.bouton-visite { margin-top: 12px; width: 100%; border: 1px dashed rgba(255,255,255,.35); background: rgba(255,255,255,.06); color: #fff; border-radius: 8px; padding: 8px 12px; font-weight: 500; cursor: pointer; text-align: left; }
.bouton-visite:hover { background: rgba(255,255,255,.14); }
.visite { position: fixed; right: 20px; bottom: 20px; z-index: 50; width: 400px; max-width: calc(100vw - 32px); background: var(--surface); border: 1px solid var(--bord); border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.18); display: flex; flex-direction: column; max-height: 70vh; }
.visite-tete { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 10px 16px; background: var(--menu); color: #fff; border-radius: 13px 13px 0 0; }
.visite-tete .icone-bouton { color: #d6d3d1; }
.visite-tete .icone-bouton:hover { background: rgba(255,255,255,.1); color: #fff; }
.visite-compteur { font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.visite-corps { padding: 14px 16px; overflow-y: auto; }
.visite-corps h3 { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.visite-dire { margin-bottom: 10px; line-height: 1.5; }
.visite-montrer-titre { font-weight: 600; font-size: 13px; color: var(--accent); }
.visite-corps ul { margin: 4px 0 0; padding-left: 18px; color: var(--encre-2); }
.visite-corps li { margin: 3px 0; }
.visite-pied { padding: 10px 16px 14px; border-top: 1px solid var(--bord); }
.visite-progression { height: 4px; background: var(--accent-clair); border-radius: 99px; margin-bottom: 10px; overflow: hidden; }
.visite-progression i { display: block; height: 100%; background: var(--accent); }
.visite.reduite .visite-corps { display: none; }
.visite-corps ol { margin: 4px 0 0; padding-left: 20px; color: var(--encre-2); }
.visite-corps ol li { margin: 4px 0; }
.visite-liste { list-style: none; margin: 6px 0 10px; padding: 0; display: grid; gap: 6px; }
.visite-choix { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; background: var(--fond); border: 1px solid var(--bord); border-radius: 10px; padding: 10px 12px; cursor: pointer; font: inherit; color: var(--encre); }
.visite-choix:hover { border-color: var(--accent); background: #eef5fd; }
.visite-pastille { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.visite-badge { display: inline-block; color: #fff; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 10px; }
.visite-badge-clair { background: var(--accent-clair); color: #1e3a8a; }
.visite button[disabled] { opacity: .4; cursor: default; }
.surbrillance { outline: 3px solid var(--attention); outline-offset: 4px; border-radius: 12px; animation: pulsation 1.6s ease-in-out 3; }
@keyframes pulsation { 50% { outline-color: rgba(250, 178, 25, .25); } }
@media (max-width: 1023px) {
  .visite { left: 8px; right: 8px; bottom: calc(64px + env(safe-area-inset-bottom)); width: auto; max-width: none; max-height: 48vh; }
  .visite-corps h3 { font-size: 15px; }
}

/* Impression : seul le document sort sur papier */
@media print {
  body { background: #fff; }
  .menu, .entete-mobile, .barre-mobile, .visite, .pas-imprime, .retour, .titre-page, .bandeau-demo, form[data-form="devis"], .grille-tdb > .carte { display: none !important; }
  .contenu { padding: 0; }
  .grille-tdb { display: block; }
  .document { border: 0; padding: 0; }
}

/* Téléphone */
@media (max-width: 1023px) {
  .menu { display: none; }
  .entete-mobile { display: flex; position: sticky; top: 0; z-index: 20; justify-content: space-between; align-items: center; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--bord); font-weight: 600; }
  .entete-mobile .marque { display: flex; align-items: center; gap: 8px; }
  .entete-mobile .lien-discret { color: var(--encre-2); }
  .appli { display: block; }
  .contenu { padding: 20px 16px 96px; }
  .barre-mobile { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; inset: auto 0 0 0; z-index: 30; background: var(--surface); border-top: 1px solid var(--bord); padding-bottom: env(safe-area-inset-bottom); }
  .barre-mobile a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0; font-size: 11px; font-weight: 500; color: var(--encre-3); }
  .barre-mobile a.actif { color: var(--accent); }
  .barre-mobile a span { font-size: 18px; line-height: 1; }
  .grille-4, .grille-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille-2, .document-parties, .formulaire.trois { grid-template-columns: minmax(0, 1fr); }
  .document { padding: 16px; }
  .document-tete { flex-direction: column; }
  .document-tete > div:last-child { text-align: left !important; }
  .document-lignes { font-size: 12px; }
  .grille-dispo tbody th { min-width: 150px; max-width: 170px; padding-left: 8px; }
  .barres-jours { grid-template-columns: repeat(21, minmax(10px, 1fr)); gap: 2px; padding: 12px 8px; }
  .barres-jours small { display: none; }
  .histogramme .valeur-barre { display: none; }
  .grille-tdb { grid-template-columns: minmax(0, 1fr); }
  .dossier-tdb { grid-template-columns: minmax(0, 1fr); }
  .filtres { grid-template-columns: minmax(0, 1fr); }
  .formulaire, .formulaire fieldset { grid-template-columns: minmax(0, 1fr); }
  .edition-tache { grid-template-columns: minmax(0, 1fr); padding-left: 16px; }
  .etape-modele { grid-template-columns: 2rem minmax(0, 1fr); }
  .etape-modele > :nth-child(n+3) { grid-column: 2; }
  .tableau thead { display: none; }
  .tableau, .tableau tbody, .tableau tr, .tableau td { display: block; }
  .tableau td { border: 0; padding: 2px 16px; }
  .tableau tr { border-top: 1px solid var(--bord); padding: 10px 0; }
  .alerte .nombre { font-size: 26px; }
}