/* Charte OZFOOD (docs/charte) : bleu #004AAD, rouge #FF0000, noir #121212, gris clair #F2F2F3, police League Spartan.
   Les couleurs d'état (vert, orange, rouge foncé) sont fonctionnelles, distinctes de la marque, et toujours
   accompagnées d'un libellé. */
@font-face {
  font-family: "League Spartan"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("../fonts/league-spartan-latin-wght-normal.0a37cd9b7365.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: "League Spartan"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("../fonts/league-spartan-latin-ext-wght-normal.8d2f864920c2.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
:root {
  --marque-bleu: #004AAD; --marque-rouge: #FF0000; --marque-noir: #121212; --marque-gris: #F2F2F3;
  --fond: var(--marque-gris); --carte: #fff; --texte: var(--marque-noir); --discret: #5b6170; --bord: #dcdde3;
  --accent: var(--marque-bleu); --accent-fonce: #003A88; --vert: #166534; --rouge: #b91c1c; --orange: #9a3412;
  --bleu: var(--marque-bleu); --menu: var(--marque-noir);
  --etat-bleu: #1e3a8a; /* couleur d'état, distincte du bleu de marque */
}
* { box-sizing: border-box; }
body { margin: 0; font: 15.5px/1.5 "League Spartan", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--fond); color: var(--texte); }
a { color: var(--bleu); }
h1 { font-size: 1.5rem; margin: 0 0 1rem; overflow-wrap: anywhere; } /* une adresse longue se coupe, jamais de défilement */
h2 { font-size: 1.1rem; margin: 1.2rem 0 .6rem; }
h2:first-child { margin-top: 0; }
.bandeau-simulation { background: #fde68a; color: #78350f; padding: .45rem 1rem; text-align: center; font-weight: 600; font-size: .9rem; }
.mise-en-page { display: flex; min-height: 100vh; }
.menu { width: 250px; flex-shrink: 0; background: var(--menu); color: #e5e7eb; padding: 1rem; display: flex; flex-direction: column; }
.menu .marque { color: #fff; text-decoration: none; margin-bottom: 1rem; display: block; }
.menu .marque img { display: block; width: 170px; height: auto; }
.menu .marque span { display: block; font-weight: 500; font-size: .85rem; color: #c9cbd1; margin-top: .25rem; }
.menu ul { list-style: none; padding: 0; margin: .5rem 0; flex: 1; }
.menu li a { display: block; padding: .5rem .7rem; color: #e5e7eb; text-decoration: none; border-radius: 6px; }
.menu li.sous a { padding-left: 1.6rem; font-size: .92rem; color: #cbd5e1; }
.menu li a:hover { background: #2d3443; }
.menu li.actif a { background: var(--accent); color: #fff; }
.recherche-rapide input { width: 100%; padding: .45rem .6rem; border-radius: 6px; border: 0; }
.pastille { background: var(--rouge); color: #fff; border-radius: 999px; padding: 0 .45rem; font-size: .75rem; margin-left: .3rem; }
.utilisateur { border-top: 1px solid #374151; padding-top: .8rem; font-size: .9rem; display: flex; flex-direction: column; gap: .2rem; }
.utilisateur a, .utilisateur .lien { color: #9ca3af; }
main { flex: 1; padding: 1.5rem 2rem; min-width: 0; }
main.seul { max-width: 420px; margin: 8vh auto; }
.carte { background: var(--carte); border: 1px solid var(--bord); border-radius: 10px; padding: 1.2rem; margin-bottom: 1rem; }
.entete { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.entete h1 { margin: 0; }
.colonnes { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; align-items: start; }
.bouton { display: inline-block; padding: .5rem .9rem; border-radius: 6px; border: 1px solid var(--bord); background: #fff; color: var(--texte); text-decoration: none; cursor: pointer; font: inherit; }
.bouton:hover { border-color: #9ca3af; }
.bouton.principal { background: var(--accent); border-color: var(--accent); color: #fff; }
.bouton.principal:hover { background: var(--accent-fonce); }
.bouton.danger { color: var(--rouge); border-color: var(--rouge); }
.bouton.large { width: 100%; padding: .75rem; font-size: 1.05rem; font-weight: 600; }
.lien { background: none; border: 0; padding: 0; color: var(--bleu); cursor: pointer; font: inherit; text-decoration: underline; }
input, select, textarea { font: inherit; padding: .45rem .55rem; border: 1px solid var(--bord); border-radius: 6px; max-width: 100%; }
textarea { width: 100%; }
.formulaire > div, .formulaire label { display: block; margin-bottom: .7rem; }
.formulaire label, .formulaire > div > label { font-weight: 600; font-size: .9rem; }
.formulaire input:not([type=checkbox]):not([type=radio]), .formulaire select, .formulaire textarea { display: block; width: 100%; margin-top: .2rem; font-weight: 400; }
.formulaire .helptext { color: var(--discret); font-size: .85rem; }
.formulaire ul { list-style: none; padding: 0; margin: .2rem 0; }
.formulaire ul label { font-weight: 400; }
.connexion label { display: block; margin-bottom: .8rem; font-weight: 600; }
.connexion input { display: block; width: 100%; margin-top: .2rem; }
.ligne { display: flex; gap: .5rem; align-items: flex-start; flex-wrap: wrap; margin: .5rem 0; }
.ligne textarea { flex: 1; min-width: 200px; }
.filtres { display: flex; gap: .8rem; align-items: flex-end; flex-wrap: wrap; margin: 0 0 1rem; }
.filtres label { display: flex; flex-direction: column; font-size: .85rem; color: var(--discret); max-width: 100%; }  /* une longue option (article des péremptions) ne déborde jamais au téléphone */
.onglets { display: flex; gap: .3rem; margin-bottom: 1rem; border-bottom: 2px solid var(--bord); flex-wrap: wrap; }
.onglets a { padding: .5rem .9rem; text-decoration: none; color: var(--texte); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.onglets a.actif { border-color: var(--accent); font-weight: 700; }
.onglets a.alerte { color: var(--rouge); font-weight: 700; }
.tableau { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--bord); border-radius: 10px; overflow: hidden; }
.tableau th, .tableau td { padding: .55rem .7rem; text-align: left; border-bottom: 1px solid var(--bord); vertical-align: top; }
.tableau th { background: #f9fafb; font-size: .85rem; color: var(--discret); font-weight: 600; }
.tableau.compact td, .tableau.compact th { padding: .35rem .6rem; }
.tableau tr.retard td { background: #fef2f2; }
.vide { text-align: center; color: var(--discret); padding: 1.5rem !important; }
.etiquette { display: inline-block; font-size: .72rem; font-weight: 700; padding: .05rem .45rem; border-radius: 4px; vertical-align: middle; }
.etiquette.rouge { background: #fee2e2; color: var(--rouge); }
.etiquette.orange { background: #ffedd5; color: #9a3412; }
.etiquette.neutre { background: #e5e7eb; color: #374151; }
.etiquette.fictif { background: #fde68a; color: #78350f; }
.etat { font-size: .85rem; font-weight: 600; white-space: nowrap; }
.etat.grand { font-size: 1rem; padding: .3rem .7rem; border-radius: 6px; background: #e5e7eb; }
.etat-a_faire { color: var(--etat-bleu); } .etat-en_cours { color: var(--orange); } .etat-en_attente { color: #6d28d9; }
.etat-terminee { color: var(--vert); } .etat-annulee { color: var(--discret); text-decoration: line-through; }
.message { padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1rem; border: 1px solid; }
.message.success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.message.error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.message.info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.message.warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.discret { color: var(--discret); }
.ok { color: var(--vert); font-weight: 600; }
.fiche { display: grid; grid-template-columns: 180px 1fr; gap: .4rem 1rem; margin: 0; }
.fiche dt { color: var(--discret); font-size: .9rem; }
.fiche dd { margin: 0; }
.texte { white-space: normal; }
.consigne { border-left: 3px solid var(--orange); background: #fffbeb; padding: .5rem .8rem; margin-bottom: .5rem; border-radius: 0 6px 6px 0; }
.meta { color: var(--discret); font-size: .82rem; }
.actions details { border-top: 1px solid var(--bord); padding: .6rem 0; }
.actions summary { cursor: pointer; font-weight: 600; }
.historique { list-style: none; padding: 0; margin: 0; }
.historique li { padding: .4rem 0; border-bottom: 1px dashed var(--bord); }
.indicateurs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.indicateur { background: #fff; border: 1px solid var(--bord); border-radius: 10px; padding: 1rem; text-decoration: none; color: var(--texte); display: flex; flex-direction: column; }
.indicateur:hover { border-color: #9ca3af; }
.indicateur .valeur { font-size: 2rem; font-weight: 800; }
.indicateur .libelle { color: var(--discret); font-size: .9rem; }
.indicateur.alerte { border-left: 5px solid var(--rouge); }
.indicateur.alerte .valeur { color: var(--rouge); }
.liste-simple { padding-left: 1.1rem; }
.liste-simple li { margin-bottom: .3rem; }
.parametre { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--bord); }
.case { margin-right: .8rem; white-space: nowrap; }
.navigation-periode { display: flex; justify-content: space-between; margin-bottom: .8rem; }
.grille-calendrier { display: grid; grid-template-columns: repeat(7, 1fr); gap: .4rem; }
.jour { background: #fff; border: 1px solid var(--bord); border-radius: 8px; min-height: 120px; padding: .4rem; }
.jour.weekend { background: #f9fafb; }
.jour.aujourdhui { border: 2px solid var(--accent); }
.jour-titre { font-size: .8rem; font-weight: 700; color: var(--discret); text-transform: capitalize; margin-bottom: .3rem; }
.puce { display: block; overflow-wrap: anywhere; font-size: .8rem; background: #eff6ff; border-radius: 4px; padding: .2rem .35rem; margin-bottom: .25rem; text-decoration: none; color: var(--texte); }
.puce small { display: block; color: var(--discret); }
@media (max-width: 900px) {
  .mise-en-page { flex-direction: column; }
  .menu { width: 100%; }
  main { padding: 1rem; }
  .colonnes, .parametre { grid-template-columns: minmax(0, 1fr); }
  .grille-calendrier { grid-template-columns: minmax(0, 1fr); }
  .tableau { display: block; overflow-x: auto; }
  /* Dans un conteneur défilant (atteignable au clavier : tabindex, role="region"), c'est lui qui défile. */
  /* (Sauf le pilotage, dont le tableau défile lui-même pour garder la colonne des noms fixe : revue P3.) */
  .defilement > .tableau:not(.empile):not(.pilotage) { display: table; overflow: visible; }
  .fiche { grid-template-columns: minmax(0, 1fr); }
}
.boutons { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.boutons form { margin: 0; }
.indicateur .valeur.petit { font-size: 1.35rem; }
.indicateur small { margin-top: .3rem; font-size: .78rem; }
.indicateur.attention { border-left: 5px solid var(--orange); }
.nombre { text-align: right !important; white-space: nowrap; }
.defilement { overflow-x: auto; }
.defilement:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.statut-etape { font-size: .78rem; font-weight: 600; white-space: nowrap; }
.statut-planifie { color: var(--etat-bleu); } .statut-envoye { color: var(--vert); } .statut-suspendu { color: var(--orange); }
.statut-exclu { color: #6d28d9; } .statut-echec, .statut-en_cours, .statut-incertain { color: var(--rouge); } .statut-ignore { color: var(--discret); }
.contenu-message { white-space: pre-wrap; overflow-wrap: anywhere; background: #f9fafb; border: 1px solid var(--bord); border-radius: 8px; padding: .8rem; font: inherit; font-size: .92rem; }
tr.inactif td { color: var(--discret); } /* contact plus présent dans Monadem : grisé sans perte de contraste (CP-81) */
.message ul { margin: .3rem 0 0; padding-left: 1.2rem; }
@media (max-width: 900px) {
  .boutons { width: 100%; }
  .indicateurs { grid-template-columns: repeat(2, 1fr); }
  .indicateur .valeur { font-size: 1.5rem; }
  .entete h1 { font-size: 1.25rem; }
  .menu ul { display: flex; flex-wrap: wrap; gap: .2rem; }
  .menu li.sous a { padding-left: .7rem; }
}
.colonnes > *, .indicateurs > * { min-width: 0; }
.tableau td small, .fiche dd { overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .carte { padding: .9rem; }
  .ligne input, .ligne select { min-width: 0; flex: 1 1 140px; }
}
.menu-haut { display: flex; justify-content: space-between; align-items: flex-start; }
.menu-bouton { display: none; }
.menu-bascule { display: none; }
.menu-contenu { display: flex; flex-direction: column; flex: 1; }
@media (max-width: 900px) {
  .menu { padding: .7rem 1rem; }
  .menu .marque { margin-bottom: 0; }
  .menu-bouton { display: inline-block; color: #fff; border: 1px solid #4b5563; border-radius: 6px; padding: .35rem .7rem; cursor: pointer; }
  .menu-contenu { display: none; margin-top: .7rem; }
  /* Case du menu « visuellement cachée » (et non display: none) : atteignable au clavier, Espace ouvre le menu. */
  .menu-bascule { display: block; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
                  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .menu:has(.menu-bascule:focus-visible) .menu-bouton { outline: 2px solid #fff; outline-offset: 2px; }
  .menu-bascule:checked + .menu-contenu { display: flex; }
}
@media (max-width: 900px) {
  .bandeau-simulation { font-size: .78rem; padding: .35rem .7rem; }
}
/* Plans de paiement : états écrits ET colorés */
.etiquette.vert { background: #dcfce7; color: var(--vert); }
.tableau tr.etat-rouge td { background: #fef2f2; }
.tableau tr.etat-vert td:first-child { border-left: 4px solid var(--vert); }
.tableau tr.etat-rouge td:first-child { border-left: 4px solid var(--rouge); }
.tableau tr.etat-neutre td:first-child { border-left: 4px solid #d1d5db; }
.tableau tr.annule td { color: var(--discret); text-decoration: line-through; }
.totaux { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.totaux div { background: #f9fafb; border: 1px solid var(--bord); border-radius: 8px; padding: .6rem .8rem; }
.totaux strong { display: block; font-size: 1.15rem; }
.totaux .rouge strong { color: var(--rouge); }
.texte-rouge { color: var(--rouge); }
.bouton.petit { padding: .2rem .55rem; font-size: .8rem; }

/* Titres et étiquettes de la charte (« text graphic styles ») */
h1, h2 { font-weight: 700; letter-spacing: .01em; }
.titre-marque { display: inline-block; background: var(--marque-bleu); color: #fff; padding: .15rem .6rem; border-radius: 3px; }
.connexion .logo { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto 1rem; }
/* Suivi du client, Ma journée */
.bandeau-suivi { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; align-items: center; background: #fff; border: 1px solid var(--bord); border-left: 4px solid var(--marque-bleu); border-radius: 8px; padding: .6rem .9rem; margin-bottom: 1rem; }
.bandeau-suivi details { flex-basis: 100%; }
.journee { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; align-items: start; }
.journee .carte h2 { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.compteur { background: var(--marque-bleu); color: #fff; border-radius: 999px; padding: 0 .55rem; font-size: .85rem; }
.compteur.zero { background: #d7d9df; color: #3c4150; }
.compteur.alerte { background: var(--rouge); }
.liste-actions { list-style: none; padding: 0; margin: 0; }
.liste-actions li { padding: .45rem 0; border-bottom: 1px solid var(--bord); }
.liste-actions li:last-child { border-bottom: 0; }
.appel-rapide ul { display: flex; flex-wrap: wrap; gap: .2rem 1rem; }
.tableau td.col-suivi { min-width: 12rem; }
/* Texte lu par les lecteurs d'écran, invisible à l'écran (un état n'est jamais signalé par la seule couleur). */
.visuellement-cache { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Valeur à ne jamais couper (date « 07/10/2026 ») ; l'emporte sur `overflow-wrap: anywhere` des petits textes. */
.nowrap { white-space: nowrap; overflow-wrap: normal; }
/* Tableau « empilé » sous 600 px : chaque ligne devient un bloc, chaque cellule affiche l'intitulé de sa colonne
   (attribut data-libelle). Les intitulés restent lus par les lecteurs d'écran. */
@media (max-width: 600px) {
  .tableau.empile, .tableau.empile tbody, .tableau.empile tr, .tableau.empile td { display: block; width: 100%; }
  .tableau.empile { overflow-x: visible; }
  .tableau.empile thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .tableau.empile tr { border-bottom: 1px solid var(--bord); padding: .3rem 0; }
  .tableau.empile tr:last-child { border-bottom: 0; }
  .tableau.empile td { border-bottom: 0; padding: .2rem .7rem; }
  .tableau.empile td[data-libelle]::before { content: attr(data-libelle); display: block; font-size: .78rem; font-weight: 600; color: var(--discret); }
  .tableau.empile td small { overflow-wrap: break-word; }
}
/* Listes filtrées (P3) : filtres appliqués, sous-onglets, pieds de tableau, nombres à zéro (variables existantes). */
.filtres-actifs { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: -.4rem 0 1rem; font-size: .9rem; }
.filtres-actifs .etiquette a { margin-left: .3rem; }
.filtres label.case { flex-direction: row; align-items: center; gap: .3rem; }
.onglets.secondaires { border-bottom-width: 1px; font-size: .9rem; }
.onglets.secondaires a { padding: .3rem .7rem; }
.tableau tfoot td, .tableau tfoot th { font-weight: 700; background: #f9fafb; }
.tableau a.zero { color: var(--discret); }
/* Pilotage de l'équipe (P3) : tableau large qui défile seul (première colonne fixe), cases de synthèse en liens,
   mise en évidence en rouge foncé et en gras (jamais la couleur seule, jamais le rouge de la marque). */
.tableau.pilotage { font-size: .9rem; }
/* La zone qui défile retient les textes cachés des cellules (sinon la page entière défile dans le vide) ; sur PC, c'est
   elle qui défile, pas le tableau, pour que la colonne des noms reste fixe ; bordures séparées : aucun chiffre ne
   transparaît à gauche de la colonne fixe (revue P3). Sur téléphone (900 px et moins), c'est le tableau qui défile : il
   retient lui-même ces textes, sinon la zone autour de lui défile aussi, dans le vide, en emportant la colonne des noms. */
.defilement { position: relative; }
@media (min-width: 901px) { .tableau.pilotage { overflow: visible; border-collapse: separate; border-spacing: 0; } }
@media (max-width: 900px) { .tableau.pilotage { position: relative; } }
.tableau.pilotage td { white-space: nowrap; }
.tableau.pilotage th[scope=row], .tableau.pilotage thead th.col-libelle {
  position: sticky; left: 0; z-index: 1; background: #fff; min-width: 8rem; max-width: 13rem; white-space: normal; }
.tableau.pilotage thead th.col-libelle { background: #f9fafb; }
.tableau.pilotage th[scope=colgroup] { text-align: center; }
.tableau.pilotage .debut-groupe, .tableau.pilotage th[scope=colgroup] { border-left: 1px solid var(--bord); }
.tableau.pilotage th[scope=row] small { display: block; font-weight: 400; color: var(--discret); }
.tableau.pilotage tfoot th, .tableau.pilotage tfoot td { font-weight: 700; background: #f9fafb; border-top: 2px solid var(--bord); }
.tableau.pilotage td a { text-decoration: none; }
.tableau.pilotage td a:hover, .tableau.pilotage td a:focus { text-decoration: underline; }
.tableau.pilotage td a.zero { color: var(--discret); }
.tableau.pilotage td a.en-evidence { color: var(--rouge); font-weight: 700; }
.totaux > a { display: block; background: #f9fafb; border: 1px solid var(--bord); border-radius: 8px; padding: .6rem .8rem;
  text-decoration: none; color: var(--texte); min-width: 0; }
.totaux > a:hover, .totaux > a:focus { border-color: #9ca3af; }
.totaux > a > span { display: block; font-size: .82rem; color: var(--discret); overflow-wrap: anywhere; }
.totaux > a.en-evidence strong { color: var(--rouge); }
.totaux > a.zero strong { color: var(--discret); }
.aide dt { font-weight: 700; margin-top: .5rem; }
.aide dd { margin: 0 0 .3rem; }
.aide summary { cursor: pointer; font-weight: 600; }

/* Messagerie (P6) : conversation en bulles, panneau d'actions d'un message, sous-onglets ; pleine largeur sur téléphone. */
.fil { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .6rem; }
.bulle { max-width: 80%; border: 1px solid var(--bord); border-radius: 10px; padding: .6rem .8rem; background: #fff; }
.bulle.recu { align-self: flex-start; }
.bulle.envoye { align-self: flex-end; background: #eef4ff; }
.bulle.rappel { align-self: flex-end; background: #f3f4f6; }
.bulle .meta { font-size: .8rem; color: var(--discret); display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.bulle .texte { white-space: pre-wrap; overflow-wrap: anywhere; margin: .4rem 0 0; }
.actions-message { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; margin-bottom: .6rem; }
.actions-message form { margin: 0; }
.onglets.secondaires { border-bottom-width: 1px; font-size: .9rem; }
blockquote.contenu-message { margin: 0 0 1rem; }
/* Textes longs sans espace (lien reçu, empreinte SHA-256, objet d'un email) : coupés dans leur cadre, jamais de
   défilement de la page sur téléphone (revue P6). */
.liste-simple small, .historique li { overflow-wrap: anywhere; }
.coupure { overflow-wrap: anywhere; }
@media (max-width: 600px) { .bulle { max-width: 100%; } .actions-message .bouton { width: 100%; } .actions-message form { width: 100%; } }

/* Activité clients (P7) : signaux d'un client (liste et page du client). */
.signaux { margin: 0; padding-left: 1rem; }
.signaux li { margin-bottom: .2rem; }