/* MYDITEK — plateforme client. Maquettes du 08/09/2026 : menu latéral, sobre et dense. */
:root {
  --navy:#1C2D4F; --green:#1E7A52; --gold:#B8862F; --red:#C0392B; --blue:#2E6FB5;
  --ink:#1F2733; --muted:#6B7686; --line:#D8DEE7; --line2:#EDF0F4; --bg:#F6F7F9; --panel:#FFFFFF;
  --sidebar:226px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin:0; font-family:"IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif; font-size:13px; line-height:1.35; color:var(--ink); background:var(--bg); }
a { color:var(--navy); text-decoration:none; } a:hover { color:var(--green); }
h1 { font-size:15px; font-weight:600; margin:0; }
h2 { font-size:13px; font-weight:600; margin:0; }
button { font:inherit; }
.muted { color:var(--muted); } .small { font-size:12px; } .nowrap { white-space:nowrap; }
.num { text-align:center; font-variant-numeric:tabular-nums; }
.ok { color:var(--green); } .warn { color:var(--gold); } .bad { color:var(--red); }

/* Coque : menu latéral + contenu */
.shell { display:flex; min-height:100vh; }
.sidebar { display:flex; flex-direction:column; width:var(--sidebar); flex-shrink:0; background:var(--navy); color:#fff; position:sticky; top:0; height:100vh; }
.sidebar .brand { padding:18px 18px 14px; display:flex; align-items:center; justify-content:space-between; }
.sidebar .brand img { height:24px; display:block; }
.sidebar nav { display:flex; flex-direction:column; gap:2px; padding:6px 10px; }
.sidebar nav a, .sidebar nav span.item { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:6px; color:rgba(255,255,255,.78); font-size:13px; }
.sidebar nav a:hover { background:rgba(255,255,255,.08); color:#fff; }
.sidebar nav a.on { background:rgba(255,255,255,.12); color:#fff; font-weight:500; }
.sidebar nav span.item { color:rgba(255,255,255,.4); cursor:default; }
.sidebar nav svg { width:16px; height:16px; flex-shrink:0; }
/* Le libellé cède la place, la pastille non : un libellé long (« Collaborateurs ») se coupe en points de suspension
   au lieu de pousser « activer » ou le compteur hors de la colonne — toutes les pastilles s'alignent à droite. */
.sidebar nav a > span:first-of-type, .sidebar nav span.item > span:first-of-type { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar nav .count, .sidebar nav .pill, .sidebar nav .soon { flex-shrink:0; }
.sidebar nav .count { margin-left:auto; font-size:11px; opacity:.7; }
.sidebar nav .pill { margin-left:auto; font-size:11px; background:var(--gold); color:var(--navy); padding:0 6px; border-radius:8px; font-weight:600; }
.sidebar nav .soon { margin-left:auto; font-size:10px; text-transform:uppercase; letter-spacing:.04em; opacity:.5; }
/* Module hors formule : l'entrée reste, grisée, et « activer » en or dit qu'elle s'ouvre — pas qu'elle n'existe pas. */
.sidebar nav a.locked { color:rgba(255,255,255,.42); }
.sidebar nav a.locked:hover { color:rgba(255,255,255,.7); }
.sidebar nav .soon.lock { opacity:1; color:var(--gold); border:1px solid rgba(184,134,47,.55); border-radius:4px; padding:1px 4px; font-size:9px; letter-spacing:.02em; }   /* assez étroit pour que « Collaborateurs » tienne entier à côté */
.sidebar .section { margin:10px 18px 0; border-top:1px solid rgba(255,255,255,.12); padding-top:10px; font-size:11px; color:rgba(255,255,255,.5); letter-spacing:.04em; text-transform:uppercase; }
.sidebar .who { margin-top:auto; padding:14px 18px; border-top:1px solid rgba(255,255,255,.12); display:flex; flex-direction:column; gap:2px; }
.sidebar .who b { font-size:12.5px; font-weight:500; }
.sidebar .who span { font-size:11px; color:rgba(255,255,255,.55); }
.sidebar .who form { margin-top:6px; } .sidebar .who button { background:none; border:0; padding:0; color:rgba(255,255,255,.7); font-size:11px; cursor:pointer; text-decoration:underline; }
.sidebar .burger { display:none; background:none; border:0; color:#fff; padding:4px; cursor:pointer; }
main.content { flex-grow:1; min-width:0; display:flex; flex-direction:column; }
.topbar { display:flex; align-items:center; gap:14px; min-height:52px; padding:8px 24px; background:var(--panel); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.topbar .spacer { margin-left:auto; }
/* Le bloc de titre cède la place plutôt que de renvoyer les boutons à la ligne. Une barre à enroulement place
   d'abord, réduit ensuite : tant que le bloc réclamait la largeur de son sous-titre — sept cents pixels —, le
   sélecteur et le bouton n'y tenaient plus et tombaient sous le titre, alignés à gauche, comme s'ils
   appartenaient à la page. Avec une base modeste, il s'étire sur ce qui reste. */
.topbar > div:first-child { flex:1 1 280px; min-width:0; }

/* Retour à la liste, sur toutes les pages de détail.
   Un lien, pas un bouton ni une pastille : il se repère à sa couleur et à son chevron, sans concurrencer le titre
   qu'il surplombe. Le fil d'Ariane gris essayé d'abord était invisible ; la pastille bordée ensuite était lourde. */
.back { display:inline-flex; align-items:center; gap:3px; margin:0 0 1px -3px; padding:2px 3px; border-radius:4px;
        font-size:12px; font-weight:500; line-height:1.2; color:var(--navy); }
.back svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.back:hover { color:var(--green); text-decoration:underline; text-underline-offset:2px; }
.back:focus-visible { outline:2px solid #C7D7EE; }
.page { padding:14px 24px 24px; display:flex; flex-direction:column; gap:12px; }

/* Contrôles */
.btn { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px; border:1px solid var(--line); border-radius:6px; background:var(--panel); font-size:12.5px; font-weight:500; color:var(--ink); cursor:pointer; white-space:nowrap; }
.btn.primary { background:var(--green); border-color:var(--green); color:#fff; }
.btn.primary:hover { color:#fff; background:#19684A; }
.btn[aria-disabled="true"], .btn:disabled { opacity:.5; cursor:default; }
.search { display:flex; align-items:center; gap:8px; width:260px; max-width:100%; height:30px; padding:0 10px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--muted); }
.search input { border:0; background:none; font:inherit; flex:1 1 0; min-width:0; outline:none; color:var(--ink); }
/* `flex:1 1 0` et non `width:100%` : le champ partage la ligne avec la loupe. Avec une largeur de 100 %
   il la reprenait entiere, et dans un conteneur qui autorise le retour a la ligne — `.topbar .spacer`
   en dessous de 900 px — il passait sous l'icone : la bordure restait vide et l'invite tombait dehors. */
.filters { display:flex; align-items:center; flex-wrap:wrap; gap:8px 18px; padding:10px 24px; background:var(--panel); border-bottom:1px solid var(--line); }
.chips { display:flex; gap:4px; flex-wrap:wrap; }
.chip-btn { display:inline-flex; align-items:center; white-space:nowrap; height:26px; padding:0 10px; border:0; border-radius:5px; background:#EEF1F5; font-size:12px; color:var(--ink); cursor:pointer; }
.chip-btn:hover { background:#E3E8EF; }
.chip-btn.on { background:var(--navy); color:#fff; }
.chip-btn .n { margin-left:4px; opacity:.65; }
.vsep { width:1px; height:18px; background:var(--line); align-self:center; }
/* Dans une rangée de pastilles, l'écart entre deux pastilles est de 4 px : un trait posé au même écart ne sépare
   rien, il se colle à la pastille de gauche et se lit comme sa bordure. Il lui faut plus d'air que les éléments
   qu'il sépare, sinon il n'est qu'un trait de plus dans la rangée. */
.chips .vsep { margin:0 10px; }
/* Un groupe de pastilles qui ne filtre pas la même chose que le précédent s'annonce. Sans cela, « Jean-Marc
   Édouard » se lisait comme un cinquième statut, après « Toutes », « À faire », « En cours » et « Faites ». */
.chips .etiquette { align-self:center; margin:0 2px 0 0; font-size:11px; text-transform:uppercase;
  letter-spacing:.03em; color:var(--muted); }
.chip-btn.late { background:#FBE3E0; color:var(--red); }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:1px; background:#A5AEBB; }
.dot.active { background:var(--green); } .dot.silent { background:var(--gold); } .dot.dead { background:var(--red); } .dot.never, .dot.legacy, .dot.unknown { background:#A5AEBB; }
.chip { display:inline-block; font-size:11px; padding:1px 7px; border-radius:3px; background:#E8EEF7; color:var(--navy); font-weight:500; white-space:nowrap; }
.chip.t-csa { background:#EEE6D6; color:#6B4E12; } .chip.t-capbat, .chip.t-vcce { background:#E6EFEA; color:var(--green); }
.chip.t-caa, .chip.t-bir, .chip.t-eva, .chip.t-gce, .chip.t-sca, .chip.t-sae, .chip.t-rucheconnectee, .chip.t-mydicam { background:#ECEEF2; color:#4B5563; }
.tag { display:inline-block; white-space:nowrap; font-size:11px; padding:1px 6px; border-radius:3px; background:#FBEFD9; color:#7A4B00; margin:1px 2px 1px 0; }
.tag.red { background:#FBE3E0; color:#9E2A1D; } .tag.grey { background:#EEF1F5; color:#4B5563; }
.src { display:inline-block; max-width:100%; font-size:10.5px; padding:0 5px; border-radius:3px; background:#EEF1F5; color:#4B5563; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:bottom; }
.src.ref { background:#FBEFD9; color:#7A4B00; } .src.calc { background:#E6EFEA; color:var(--green); }
.bar { display:inline-block; height:6px; width:44px; background:#E4E8EE; border-radius:3px; vertical-align:middle; margin-right:6px; overflow:hidden; }
.bar i { display:block; height:100%; background:var(--green); } .bar i.w { background:var(--gold); } .bar i.b { background:var(--red); }
.alert { background:#FBE3E0; color:var(--red); padding:8px 10px; border-radius:6px; }
.seg { display:inline-flex; border:1px solid var(--line); border-radius:5px; overflow:hidden; background:var(--panel); }
.seg button { padding:4px 10px; font-size:12px; border:0; border-right:1px solid var(--line); background:none; cursor:pointer; white-space:nowrap; color:var(--ink); }
.seg button:last-child { border-right:0; } .seg button.on { background:var(--navy); color:#fff; }
.leg { display:inline-flex; align-items:center; gap:6px; font-size:12px; white-space:nowrap; cursor:pointer; color:var(--muted); }
.leg i { display:inline-block; width:14px; height:3px; border-radius:2px; background:#C9D0DA; }
.leg.on { color:var(--ink); }
.leg input { display:none; }
.toggle { display:inline-flex; align-items:center; gap:6px; font-size:12px; cursor:pointer; white-space:nowrap; }
.toggle input { display:none; }
.toggle .sw { display:inline-block; width:26px; height:14px; border-radius:7px; background:#C9D0DA; position:relative; transition:background .15s; }
.toggle .sw::after { content:""; position:absolute; top:2px; left:2px; width:10px; height:10px; border-radius:50%; background:#fff; transition:left .15s; }
.toggle input:checked + .sw { background:var(--green); } .toggle input:checked + .sw::after { left:14px; }

/* Panneaux et tableaux */
.panel { background:var(--panel); border:1px solid var(--line); border-radius:6px; overflow:hidden; min-width:0; }
/* `min-width:0` : dans une rangee en flex ou une grille, un panneau qui contient un large tableau se faisait
   aussi large que ce tableau et poussait la page hors de l'ecran sur telephone. Le tableau, lui, a toujours
   son `.tablewrap` pour defiler. */
.panel .head { display:flex; align-items:center; gap:10px; padding:8px 12px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.panel .head .spacer { margin-left:auto; }
.panel .foot { display:flex; align-items:center; gap:12px; padding:8px 12px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); }
table.dense { border-collapse:collapse; width:100%; font-variant-numeric:tabular-nums; }
table.dense th { text-align:center; font-weight:500; color:var(--muted); font-size:11.5px; letter-spacing:.02em; text-transform:uppercase; padding:8px 8px; border-bottom:1px solid var(--line); background:var(--panel); white-space:nowrap; }
table.dense td { text-align:center; padding:7px 8px; border-bottom:1px solid var(--line2); white-space:nowrap; vertical-align:middle; }
table.dense tr:last-child td { border-bottom:0; }
table.dense th:first-child, table.dense td:first-child, table.dense th.left, table.dense td.left { text-align:left; }
table.dense tbody tr:hover td { background:#F9FAFC; }
table.dense tr[data-href] { cursor:pointer; }
table.dense tr[data-href]:hover td { background:#F1F5FA; }
table.dense td.wrap { white-space:normal; line-height:1.6; }
table.dense a.row-link { font-weight:500; }
.tablewrap { overflow-x:auto; min-width:0; }
.note { font-size:11.5px; color:var(--muted); }

/* KPI */
.kpis { display:grid; grid-template-columns:repeat(8, minmax(0, 1fr)); gap:10px; }
.kpi { display:flex; flex-direction:column; gap:2px; padding:10px 12px; background:var(--panel); border:1px solid var(--line); border-radius:6px; min-width:0; }
.kpi .k { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.02em; }
.kpi .v { white-space:nowrap; font-size:18px; font-weight:600; font-variant-numeric:tabular-nums; line-height:1.1; }
.kpi .s { font-size:11px; color:var(--muted); line-height:1.3; }
.kv { display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px solid var(--line2); font-size:12.5px; }
.kv:last-child { border-bottom:0; }
.cols-2-1 { display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 1fr); gap:12px; }

/* Graphe */
.chartbar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:10px 14px 0; }
.chartbar .legs { display:flex; gap:12px; flex-wrap:wrap; }
.chartbar .right { margin-left:auto; display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.chart { height:max(360px, min(680px, calc(100vh - 590px))); padding:0 6px; }   /* le graphe prend la hauteur disponible de l'écran */
/* Deux panneaux côte à côte, qui repassent l'un sous l'autre quand la place manque. Défini ici et non dans un
   gabarit : deux écrans s'en servent, et une mise en page qui n'existe que dans l'un des deux finit par manquer
   dans l'autre — c'est ce qui venait d'arriver aux graphes du tableau de bord. */
/* --------------------------------------------------------------------- la ligne d'indicateurs
   Quatre gabarits en portaient chacun leur copie, avec quatre largeurs et deux tailles de chiffre : les mêmes
   indicateurs ne se lisaient pas pareil d'un écran à l'autre, et un cinquième écran qui l'employait sans la
   redéclarer — les registres — la voyait s'effondrer en texte courant. Comme .grid2, elle appartient à la feuille
   commune. */
/* La phrase sous un graphe : ce qu'il faut savoir pour le lire sans se tromper. */
.note-graph { font-size:11.5px; color:var(--muted); margin:0; padding:0 14px 12px; line-height:1.45 }

/* Une grille laisse ses cases vides quand le compte ne tombe pas juste : six chiffres sur une rangée de cinq,
   et le sixième est suivi de quatre cases grises — le fond du séparateur qui se voit en grand. Une rangée
   souple étire ce qui reste au lieu de laisser un trou, et la base de 150 px fait tenir six chiffres sur une
   largeur d'écran ordinaire plutôt que cinq. */
.kpirow { display:flex; flex-wrap:wrap; gap:1px; background:var(--line) }
.kpirow > div { background:var(--panel); padding:12px 14px; min-width:0; flex:1 1 150px }
.kpirow .wide { flex-basis:320px }
@media (max-width: 760px) { .kpirow .wide { flex-basis:150px } }
.kpirow .k { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.02em;
  display:block; margin-bottom:3px }
.kpirow .v { font-size:20px; font-weight:700; line-height:1.15; font-variant-numeric:tabular-nums }
.kpirow .s { font-size:11.5px; color:var(--muted); margin-top:2px; display:block }

.grid2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap:12px; margin-bottom:12px }
/* Une case de grille ne se retrecit pas en dessous de son contenu tant qu'on ne le lui dit pas : un large
   tableau a l'interieur imposait sa largeur a la colonne, et la fiche d'un atelier debordait de 400 px sur
   telephone — la page entiere defilait de cote. `min-width:0` rend la case retrecissable ; le tableau, lui,
   defile dans son propre `.tablewrap`, ou il a toujours ete prevu qu'il defile. */
.grid2 > *, .cols-2-1 > * { min-width:0 }
/* Quatre graphes sur une page se lisent d'un coup d'œil ou pas du tout : à 600 px de haut chacun, il faut
   dérouler deux écrans et demi pour les voir tous, et la comparaison — qui est tout l'intérêt — devient
   impossible. Sur une page qui en aligne plusieurs, ils sont plus courts. */
.grid2 .chart { height:300px }
.grid2 .chart.tall { height:340px }
.chartnote { display:flex; gap:14px; flex-wrap:wrap; align-items:center; padding:0 14px 10px; font-size:11.5px; color:var(--muted); }

/* Connexion */
.login { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg); }
.login .box { width:380px; max-width:92vw; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:28px 28px 24px; }
.login .box img { height:36px; display:block; margin:0 auto 18px; }
.login label { display:block; margin:10px 0; font-size:12.5px; }
.login input { width:100%; margin-top:4px; padding:8px 10px; border:1px solid var(--line); border-radius:6px; font:inherit; }
.login button { width:100%; margin-top:14px; height:36px; border:0; border-radius:6px; background:var(--green); color:#fff; font-weight:500; cursor:pointer; }


/* Tablette en paysage et petits portables (901–1240 px) */
@media (min-width: 901px) and (max-width: 1240px) {
  /* 184 px etait dix pixels trop etroit : « Collaborateurs », « Productions », « L'Essentiel », « Documents »,
     « Financements » et « Marketplace » se coupaient en « Collabo… » des qu'une pastille « ACTIVER » ou « EN TEST »
     les accompagnait — six entrees sur treize illisibles sur un portable ordinaire (recette du 19/09/2026, vue a
     l'ecran, pas devinee). Le nom de la rubrique passe avant les seize pixels gagnes sur le contenu. */
  :root { --sidebar:208px; }
  .sidebar nav a, .sidebar nav span.item { gap:8px; padding-left:8px; padding-right:8px; }
  .sidebar nav .soon.lock { font-size:8.5px; padding:1px 3px; }
  .kpis { grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .cols-2-1 { grid-template-columns:minmax(0, 1fr); }
  .topbar, .filters { padding-left:16px; padding-right:16px; } .page { padding-left:16px; padding-right:16px; }
  .search { width:200px; }
}
/* Grands écrans : largeur fluide, tout l'écran est utilisé (demande de Sébastien, 08/09/2026) */

/* Téléphone / tablette en portrait */
@media (max-width: 900px) {
  .shell { flex-direction:column; }
  .sidebar { position:static; height:auto; width:auto; }
  .sidebar .brand { padding:12px 14px; } .sidebar .brand img { height:20px; }
  .sidebar .burger { display:inline-flex; }
  .sidebar nav, .sidebar .section, .sidebar .who { display:none; }
  .sidebar.open nav, .sidebar.open .section, .sidebar.open .who { display:flex; }
  .sidebar.open .who { margin-top:0; }
  .topbar, .filters { padding:8px 14px; } .page { padding:12px 14px 20px; }
  .kpis { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
  .cols-2-1 { grid-template-columns:minmax(0, 1fr); }
  .search { width:100%; }
  /* Les panneaux portent souvent un `min-width` en dur, pose pour que deux colonnes tiennent cote a cote sur un
     ordinateur. En dessous de 900 px il n'y a plus qu'une colonne : ce plancher ne peut plus rien tenir, il ne
     peut que pousser la page hors de l'ecran. Il est donc leve ici — `!important` parce que ces largeurs sont
     ecrites dans l'attribut `style` des gabarits, ou aucune feuille ne les atteint autrement. */
  .panel { min-width:0 !important; }
  .btn, .seg button { min-height:40px; }
  .chart { height:360px; }
  .chartbar .right { margin-left:0; }
  table.dense th, table.dense td { padding:8px 6px; }
  /* Barre d'actions d'une fiche (Données détaillées, Récaps, Exports…) : elle passe à la ligne au lieu d'élargir la page (téléphone, 09/09/2026) */
  .topbar .spacer { margin-left:0; width:100%; flex-wrap:wrap; }
  .panel .head .spacer { margin-left:0; }
  /* Un formulaire en ligne (arroser maintenant, activer le programme) se replie plutôt que de déborder */
  .form-inline { flex-wrap:wrap; }
}

/* Formulaires (fiche équipement réseau, création) */
/* Onglets d'un module (Production, Terrain). Un onglet dit « je change de page » ; une pastille dit « je filtre
   une liste ». Le repère visuel doit correspondre à ce que fait le clic. */
.onglets { display:flex; gap:2px; align-items:flex-end; flex-wrap:wrap; padding:0 14px; margin:0 0 14px;
           border-bottom:1px solid var(--line); background:transparent; }
.onglets a { padding:8px 12px 7px; font-size:13px; color:var(--muted); border-bottom:2px solid transparent;
             margin-bottom:-1px; white-space:nowrap; }
.onglets a:hover { color:var(--ink); background:#F4F6F9; border-radius:5px 5px 0 0; }
.onglets a.on { color:var(--navy); font-weight:600; border-bottom-color:var(--navy); background:transparent; }
/* Le compteur de l'onglet actif : « Registres 30 ». Il ne se pose que là — une rangée de nombres se lit comme un
   tableau, pas comme une navigation. */
.onglets a b { display:inline-block; margin-left:6px; font-weight:600; font-size:11px; line-height:16px;
  padding:0 6px; border-radius:9px; background:var(--navy); color:#fff; vertical-align:1px; }
@media (max-width: 760px) {
  .onglets { padding:0 8px; overflow-x:auto; flex-wrap:nowrap; }
  .onglets a { padding:10px 10px 9px; }
}

.form-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap:10px 14px; }
.form-grid label { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); }
.form-grid label.wide, .form-grid .wide { grid-column:1 / -1; }
.form-grid label.check { flex-direction:row; align-items:center; gap:8px; grid-column:1 / -1; color:var(--ink); }
.form-grid input, .form-grid select, .form-grid textarea, .form-inline select { font:inherit; font-size:13px; color:var(--ink); padding:6px 8px; border:1px solid var(--line); border-radius:6px; background:var(--panel); min-width:0; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus, .form-inline select:focus { outline:2px solid #C7D7EE; border-color:var(--blue); }
.form-grid .actions { grid-column:1 / -1; display:flex; gap:8px; justify-content:flex-end; }
.form-inline { display:flex; gap:6px; align-items:center; }

/* ------------------------------------------------------------------------- une fiche de saisie
   Un formulaire étalé sur toute la largeur d'un écran de bureau ne se lit plus : les champs font quatre cents
   pixels pour huit caractères de date, et l'œil perd la ligne entre l'intitulé et le champ qu'il commande.

   Trois règles suffisent. Une largeur de lecture. Des champs alignés sur une même ligne de fond, quel que soit
   le nombre de lignes que prend leur intitulé — sans quoi une mention « facultatif » décale le champ d'un cran
   et la rangée paraît cassée. Et une largeur propre aux champs courts : une date, un nombre, un prix ne
   gagnent rien à s'étirer. */
.fiche { max-width:1060px; }
.fiche > .form-grid > label { justify-content:flex-end; }
.fiche .form-grid input[type="date"] { max-width:190px; }
.fiche .form-grid input[type="number"] { max-width:150px; }
/* Une case à cocher et son libellé sont une même chose : ils vont côte à côte, pas l'un sous l'autre — ce que
   la colonne de `.form-grid label` imposait à toute étiquette, si profondément nichée soit-elle. */
.fiche .cases { display:flex; flex-wrap:wrap; gap:7px 20px; max-height:168px; overflow-y:auto;
  padding:2px 2px 2px 0; }
.fiche .cases label { flex-direction:row; align-items:center; gap:7px; font-size:13px; color:var(--ink); }
.fiche .cases input { margin:0; }
.fiche .section { grid-column:1 / -1; border-top:1px solid var(--line); padding-top:12px; }
.fiche .section > .quoi { font-size:12px; color:var(--muted); margin-bottom:9px; max-width:70ch; }
.hint { font-size:11.5px; color:var(--muted); font-weight:400; }
.form-inline select { flex:1; min-width:0; }
.chip.t-gateway, .chip.t-modem_4g, .chip.t-modem_wifi, .chip.t-wifi_repeater { background:#E9E4F3; color:#4A3B7A; }

/* Carte */
/* Fond sombre sous une carte satellite : le gris clair d'avant faisait un éclair blanc à chaque ouverture. */
.map { height:max(420px, calc(100vh - 215px)); width:100%; background:#26313D; }
/* `body` en tête pour passer devant la règle de Leaflet, chargée après app.css dans le bloc `head` des pages. */
body .leaflet-container { background:#26313D; }

/* Ligne de seuil que l'exploitant lit sans pouvoir la régler : MYDITEK s'en occupe. Assez lisible pour informer,
   assez discrète pour qu'on comprenne d'un coup d'œil que ce n'est pas à soi de la toucher. */
tr.lock > td { background:var(--bg); color:var(--muted); }
tr.lock > td:nth-child(2) { color:var(--ink); }
.leaflet-popup-content { font:12.5px/1.45 "IBM Plex Sans", system-ui, sans-serif; margin:10px 12px; }
.leaflet-popup-content .pop a { display:inline-block; margin-top:4px; font-weight:500; }
.leaflet-container a.leaflet-popup-close-button { color:var(--muted); }
@media (max-width:900px) { .map { height:calc(100vh - 260px); } }
/* « Voir comme » : bandeau d'un administrateur qui consulte la plateforme sous l'identité d'un client */
.impersonation { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:8px 16px; background:#FBEFD9; color:#7A4B00; border-bottom:1px solid #EAD3A6; font-size:12.5px; }
.impersonation .btn { background:#7A4B00; color:#fff; border-color:#7A4B00; }

/* --------------------------------------------------------------------- pagination des tableaux longs
   Barre discrète sous le tableau : d'où à où, sur combien, et de quoi changer de page. Elle est posée par
   assets/js/table.js et n'apparaît que là où le nombre de lignes le justifie. */
.pager { display:flex; align-items:center; gap:14px; padding:8px 14px; border-top:1px solid var(--line);
         font-size:12.5px; color:var(--muted); background:#FBFCFD }
.pager-compte { font-variant-numeric:tabular-nums }
.pager-nav { display:flex; align-items:center; gap:6px; margin-left:auto }
.pager-nav .btn { height:26px; min-width:28px; padding:0 8px; line-height:1; font-size:14px }
.pager-nav .btn[disabled] { opacity:.35; cursor:default }
.pager-page { font-variant-numeric:tabular-nums; min-width:52px; text-align:center }
.pager-taille { display:flex; align-items:center; gap:6px }
.pager-taille select { height:26px; padding:0 4px; font-size:12.5px; border:1px solid var(--line);
                       border-radius:4px; background:#fff; color:var(--ink) }
@media (max-width: 640px) { .pager { flex-wrap:wrap; gap:8px } .pager-nav { margin-left:0 } }


/* --------------------------------------------------------------------- l'impression
   Une page imprimee n'est pas la page a l'ecran en noir et blanc : le menu, les boutons et les filtres n'y servent
   a rien et mangeaient un tiers de la largeur. Pour les registres, la feuille de papier n'est pas un agrement —
   l'arrete du 5 juin 2000 n'admet la tenue informatique qu'assortie d'une edition papier periodique — donc elle
   doit tenir en largeur et se lire seule. La regle vaut pour toute la plateforme : rien de ce qui sert a naviguer
   ne s'imprime. */
@media print {
  .sidebar, .burger, .brand, .tabs, .btn, button { display:none !important }
  .shell { display:block !important }
  .shell > main, main { margin:0 !important; padding:0 !important; width:auto !important; max-width:none !important }
  body { background:#fff !important; color:#000 }
  .panel { break-inside:auto }
}

/* ============================================================ choisir ce qu'on regarde : une seule famille

   Un bouton (`.btn`), une recherche (`.search`), une liste déroulante, un champ de date : tous font le même
   geste — changer ce que la page montre — et tous doivent donc se ressembler. Ils ne se ressemblaient pas.
   Quatre listes portaient `chip-btn`, c'est-à-dire l'habit d'un filtre à pastille, avec une hauteur forcée
   dans l'attribut `style` ; quatre autres n'avaient aucun style et affichaient la flèche du système
   d'exploitation ; trois gabarits redessinaient leurs propres champs dans leur bloc `head`.

   Un seul repère, celui qui existait déjà : 30 px de haut, 6 px de rayon, la bordure `--line`, le fond du
   panneau — c'est `.btn` et c'est `.search`. Tout s'y aligne, et rien ne se redessine ailleurs. */
.selecteur, .fswitch.champ .fswitch-b,
/* `input:not([type])` compte autant que `input[type="text"]` : un champ sans attribut `type` EST un champ
   texte pour le navigateur, mais aucun selecteur d'attribut ne l'atteint. Oublie ici, il restait la boite grise
   du navigateur au milieu de barres de filtres dessinees — c'etait le cas du destinataire, sur Ventes et sorties. */
.filtres select, .filtres input[type="date"], .filtres input[type="search"], .filtres input[type="text"],
.filtres input[type="number"], .filtres input:not([type]), .filters select, .filters input[type="date"],
.filters input[type="search"], .filters input[type="number"], .filters input:not([type]) {
  display:inline-flex; align-items:center; box-sizing:border-box; height:30px; padding:0 11px;
  border:1px solid var(--line); border-radius:6px; background:var(--panel); color:var(--ink);
  font:500 12.5px/1.2 'IBM Plex Sans', system-ui, sans-serif; cursor:pointer }
.selecteur:hover, .selecteur:focus, .fswitch.champ .fswitch-b:hover, .fswitch.champ .fswitch-b[aria-expanded="true"],
.filtres select:hover, .filtres input:hover, .filtres select:focus, .filtres input:focus,
.filters select:hover, .filters select:focus, .filters input:hover, .filters input:focus {
  border-color:var(--navy) }
.selecteur:focus, .filtres select:focus, .filtres input:focus, .filters select:focus { outline:none }
/* Un champ de saisie n'est pas un choix : le curseur y est un curseur de texte, et sa valeur n'est pas en gras. */
.filtres input[type="date"], .filtres input[type="search"], .filtres input[type="text"],
.filtres input[type="number"], .filtres input:not([type]), .filters input { cursor:auto; font-weight:400 }

/* Le chevron est celui du sélecteur d'exploitation, au même endroit et de la même couleur ; la flèche native de
   chaque système d'exploitation ne l'est pas, d'où `appearance:none`. */
input.selecteur { cursor:auto; font-weight:400 }
select.selecteur { max-width:100% }   /* un nom de station long poussait la page de 2 px hors de l'ecran */
select.selecteur, .filtres select, .filters select { appearance:none; -webkit-appearance:none; padding-right:27px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%236B7686' stroke-width='1.6'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:9px }
select.selecteur:hover, .filtres select:hover, .filters select:hover {
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%231C2D4F' stroke-width='1.6'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E") }

/* ------------------------------------------------------------------- le sélecteur d'exploitation
   Dans un titre, il n'a pas de bordure : le nom de l'exploitation s'y lisait déjà, et l'encadrer ferait une
   deuxième boîte dans la phrase. Le pointillé dit qu'on peut cliquer sans crier qu'il faut le faire. */
.fswitch { position:relative; display:inline-block }
.fswitch-b { font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer;
  border-bottom:1px dashed var(--line); line-height:inherit; text-align:left }
.fswitch-b:hover, .fswitch-b[aria-expanded="true"] { border-bottom-color:var(--navy) }
.fswitch-b svg { width:.62em; height:.62em; margin-left:.28em; color:var(--muted); vertical-align:baseline }
.fswitch-b:hover svg { color:var(--navy) }

.fswitch.champ .fswitch-b svg { width:9px; height:9px; margin-left:7px }
.fswitch.champ .fswitch-p { left:auto; right:0 }
.fswitch-p { position:absolute; top:calc(100% + 6px); left:0; z-index:60; min-width:262px;
  max-width:min(92vw, 380px); background:var(--panel); border:1px solid var(--line); border-radius:8px;
  box-shadow:0 12px 30px rgba(28,45,79,.17); padding:6px;
  font:400 13px/1.45 'IBM Plex Sans', system-ui, sans-serif; color:var(--ink); letter-spacing:normal }
.fswitch-p input { width:100%; box-sizing:border-box; margin-bottom:5px; padding:6px 9px; font:inherit;
  border:1px solid var(--line); border-radius:5px; background:var(--bg); height:auto; cursor:auto }
.fswitch-p input:focus { outline:none; border-color:var(--navy); background:var(--panel) }
.fswitch-p ul { list-style:none; margin:0; padding:0; max-height:min(52vh, 340px); overflow-y:auto }
.fswitch-p li a { display:block; padding:6px 9px; border-radius:5px; color:var(--ink); text-decoration:none }
.fswitch-p li a span { display:block; font-size:11.5px; color:var(--muted) }
.fswitch-p li a:hover, .fswitch-p li a:focus { background:var(--line2); outline:none }
.fswitch-p li a.on { background:var(--navy); color:#fff }
.fswitch-p li a.on span { color:rgba(255,255,255,.72) }
.fswitch-v { margin:6px 9px 4px; color:var(--muted); font-size:12px }
@media print { .fswitch-b { border-bottom:0 } .fswitch-b svg, .fswitch-p { display:none } }

/* ------------------------------------------------- une barre de filtres à intitulés, quand les pastilles ne suffisent plus
   Les pastilles (`.chips`) suffisent quand le choix se compte sur les doigts. Dès qu'il faut une date ou une
   liste d'ateliers, il faut des champs — et l'intitulé se pose alors au-dessus, en petites capitales : « Du »,
   « Au », « Atelier » se lisent d'un coup d'œil sans concurrencer la valeur. */
.filtres { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; padding:10px 14px;
  border-bottom:1px solid var(--line2); background:var(--bg) }
.filtres label { display:flex; flex-direction:column; gap:4px; font-size:11px; color:var(--muted);
  text-transform:uppercase; letter-spacing:.03em }
.filtres .raz { font-size:12px; color:var(--muted); align-self:flex-end; padding-bottom:7px }

/* ── Abonnement : formule + ajustements (_abonnement-form.twig) ───────────────────────────────────────────────── */
.abo { padding:12px }
.abo select, .abo input[type=text] { font:inherit; font-size:13px; color:var(--ink); background:var(--panel); border:1px solid var(--line); border-radius:6px; height:30px; padding:0 8px }
[x-cloak] { display:none !important }
.abo-head { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end }
.abo-head label { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted) }
.abo-head input[type=date] { height:30px; border:1px solid var(--line); border-radius:6px; padding:0 8px; font:inherit; font-size:13px; background:var(--panel) }
.abo-cat { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:18px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line2) }
.abo-col h3 { margin:0 0 8px; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); display:flex; align-items:center; justify-content:space-between; gap:8px }
.abo-case { display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:6px; font-size:13px; cursor:pointer; border:1px solid transparent }
.abo-case:hover { background:var(--line2) }
.abo-case em { margin-left:auto; font-style:normal; font-size:11px; text-transform:uppercase; letter-spacing:.03em }
.abo-case.plus { border-color:rgba(30,122,82,.35); background:#E6EFEA } .abo-case.plus em { color:var(--green) }
.abo-case.moins { border-color:rgba(192,57,43,.3); background:#F7E8E6; text-decoration:line-through } .abo-case.moins em { color:var(--red); text-decoration:none }
.abo-case:not(.formule):not(.plus):not(.moins) span { color:var(--muted) }
.abo-lim { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); margin-bottom:8px }
.abo-lim-in { display:flex; align-items:center; gap:6px } .abo-lim-in input { width:120px; height:30px; border:1px solid var(--line); border-radius:6px; padding:0 8px; font:inherit; font-size:13px }
.abo textarea { width:100%; border:1px solid var(--line); border-radius:6px; padding:6px 8px; font:inherit; font-size:13px; resize:vertical; box-sizing:border-box }
.abo-foot { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line2) }
/* ── Formules (Supervision) et Mon abonnement : la grille comparée ─────────────────────────────────────────────── */
.plans { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:12px }
.plan { border:1px solid var(--line); border-radius:8px; padding:14px; background:var(--panel); display:flex; flex-direction:column; gap:8px }
.plan.mine { border-color:var(--gold); box-shadow:0 0 0 2px rgba(184,134,47,.18) }
.plan.off { opacity:.55 }
.plan h3 { margin:0; font-size:16px; display:flex; align-items:baseline; justify-content:space-between; gap:8px } .plan h3 small { font-size:12px; color:var(--muted); font-weight:400 }
.plan .tag-mine { font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--gold); border:1px solid rgba(184,134,47,.55); border-radius:4px; padding:1px 5px }
.plan .price { font-size:13px; color:var(--navy); font-weight:500 }
.plan .tagline { font-size:12px; color:var(--muted); margin:0 }
.plan ul { list-style:none; margin:4px 0 0; padding:0; font-size:12.5px; display:flex; flex-direction:column; gap:3px }
.plan li { display:flex; gap:6px; align-items:baseline } .plan li.no { color:var(--muted); opacity:.6 } .plan li::before { content:'✓'; color:var(--green); font-size:11px } .plan li.no::before { content:'–'; color:var(--muted) }
.plan .lims { font-size:12px; color:var(--muted); border-top:1px solid var(--line2); padding-top:8px; margin-top:auto }
.plan-buy { display:flex; gap:6px; margin-top:8px } .plan-buy .btn { flex:1 }

/* ── Mon abonnement : la grille comparée (abonnement.twig) ────────────────────────────────────────────────────── */
.cmp { width:100%; border-collapse:separate; border-spacing:0; background:var(--panel); border:1px solid var(--line); border-radius:8px; overflow:hidden; table-layout:fixed }
.cmp th, .cmp td { padding:7px 12px; border-bottom:1px solid var(--line2); font-size:13px; text-align:center; vertical-align:middle }
.cmp th:first-child, .cmp td:first-child { text-align:left; width:34% }
.cmp tbody tr:last-child td { border-bottom:0 }
.cmp thead th { vertical-align:top; padding:14px 12px 12px; border-bottom:1px solid var(--line); font-weight:400 }
.cmp thead th.mine { box-shadow:inset 0 3px 0 var(--gold) }
.cmp td.mine { background:#FBF8F1 }
.cmp .pname { display:block; font-size:16px; font-weight:600; color:var(--navy) }
.cmp .pprice { display:block; font-size:12.5px; color:var(--navy); margin:3px 0 4px }
.cmp .ptag { display:block; font-size:11.5px; color:var(--muted); line-height:1.35; margin-bottom:10px; min-height:2.7em }
.cmp .tag-mine { display:inline-block; font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--gold); border:1px solid rgba(184,134,47,.55); border-radius:4px; padding:2px 6px }
.cmp .sec td { background:var(--line2); font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:5px 12px; text-align:left }
.cmp .yes { color:var(--green); font-weight:700 } .cmp .no { color:var(--muted); opacity:.45 }
.cmp .lim { font-size:12.5px; color:var(--ink) }
.cmp tr.want td:first-child { font-weight:600; color:var(--gold) }
.cmp tbody tr:not(.sec):hover td { background:#F5F7FA } .cmp tbody tr:not(.sec):hover td.mine { background:#F6F1E4 }
/* Étroit : la grille garde sa largeur et glisse dans .tablewrap plutôt que d'écraser ses colonnes. */
@media (max-width: 760px) { .cmp { min-width:640px } .cmp .ptag { display:none } }

/* ── Ventes : actions de ligne, sélection multiple, chiffres ───────────────────────────────────────────────────
   Les gabarits de ce module portaient leurs styles en attribut `style`, ce qui donnait des boutons de 30 px de
   haut dans des lignes de tableau de 28, des grilles de vignettes qui écrasaient `.kpis`, et autant de variantes
   qu'il y a de pages. Tout ce qui suit remplace ces styles en ligne. */

/* Deux tailles de bouton sous celle du bandeau : une ligne de tableau ne supporte pas un bouton pleine hauteur. */
.btn.small { height:24px; padding:0 9px; font-size:12px; border-radius:5px }
.btn.mini  { height:21px; padding:0 7px; font-size:11.5px; border-radius:4px }
.btn.danger { border-color:#E1B4AD; color:#9E2A1D }
.btn.danger:hover { background:#FDF6F5; color:#9E2A1D }

/* La colonne d'actions : collée à droite, jamais coupée, et discrète tant qu'on ne survole pas la ligne. */
table.dense td.actions, table.dense th.actions { text-align:right; white-space:nowrap; width:1% }
table.dense td.actions form { display:inline }
table.dense td.actions > * + * { margin-left:4px }
table.dense td.actions .btn { opacity:.72; transition:opacity .12s }
table.dense tbody tr:hover td.actions .btn, table.dense td.actions .btn:focus { opacity:1 }

/* La case à cocher de sélection. Largeur fixe : sans elle la colonne prend le tiers du tableau sur mobile. */
table.dense th.pick, table.dense td.pick { width:28px; padding-left:10px; padding-right:0; text-align:left }
table.dense input[type=checkbox] { width:14px; height:14px; accent-color:var(--navy); cursor:pointer; margin:0 }
table.dense tr.picked td { background:#F1F5FA }

/* La barre d'actions groupées. Elle ne s'affiche que lorsqu'une ligne est cochée : une barre toujours présente
   mais désactivée occupe la place sans rien offrir. */
.lot { display:none; align-items:center; gap:8px; flex-wrap:wrap; padding:8px 12px; background:#F1F5FA;
       border-bottom:1px solid var(--line); font-size:12.5px }
.lot.on { display:flex }
.lot .compte { font-weight:600; color:var(--navy); white-space:nowrap }
.lot form { display:inline-flex; gap:6px; align-items:center }
.lot .sep { margin-left:auto }

/* Les vignettes de chiffres. `.kpis` est une grille de huit colonnes ; sur ces pages il en faut de deux à six
   selon la largeur, et les montants doivent rester lisibles au lieu de se couper. */
.kpis.ventes { grid-template-columns:repeat(auto-fit, minmax(168px, 1fr)) }
.kpi.up .v { color:var(--green) } .kpi.down .v { color:var(--red) } .kpi.warn .v { color:var(--gold) }
.kpi .s { font-size:11px; color:var(--muted); line-height:1.35 }

/* Une barre de proportion, pour un exercice ou un dispositif de financement. */
.jauge { height:7px; border-radius:4px; background:var(--line2); overflow:hidden; min-width:60px }
.jauge > i { display:block; height:100%; background:var(--navy) }
.jauge.vert > i { background:var(--green) }

/* Un bandeau de constat en tête de page : fraîcheur des données, résultat d'une action, divergence. */
.avis { padding:10px 14px; font-size:13px; line-height:1.55; border-radius:6px; border:1px solid var(--line);
        background:var(--panel); margin-bottom:12px }
.avis.ok { border-color:#A8CFB9; background:#F3FAF6 }
.avis.ko { border-color:#E9B8B1; background:#FDF6F5; color:#7E2016 }
.avis.attention { border-color:#EBD9B4; background:#FDF7EC }