/* Les écrans des modules : liste, page, table, volet de geste (commun/ecran/).
   Réutilisé tel quel, sans le redéfinir : .page, h1 .cpt, .sub, .card.tbl, td.num,
   tr[data-go], .ong-doc.liste-taches, .btn, .btn.primary, .btn.pt, .kpi, .avert,
   .filtres .filtre, .vide, .small, .muted, et pour la pastille d'état .badge .b-lo,
   .b-md, .b-hi, .etiq et .etiq.expert (assets/style.css, assets/tri.css).
   commun/coque/coque.css ne porte que la colonne de gauche, la conclusion d'un dossier et
   ses états : rien à reprendre ici, rien n'y est doublé.
   Ici, seulement ce qui manque : la ligne du titre, l'entête bornée, le pied de la table,
   la tête d'une page, le volet. */

/* ---- Liste ---- */
.ec-titre { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.ec-titre h1 { flex:1 1 auto; min-width:0; }
.ec-liste .sub { margin:4px 0 12px; }
/* L'entête d'une liste (quelques chiffres, un petit graphique) ne mange pas l'écran. */
.ec-entete { max-height:180px; overflow:hidden; margin:0 0 10px; }
/* La barre de filtres d'une liste, entre les onglets et la table (ecListe, option barre, 12-10). */
.ec-barre { margin:0 0 10px; }

/* ---- Table ----
   En colonne, le pied poussé en bas : la table garde la hauteur que tableau.js lui note
   (min-height) avant de tourner la page, et les flèches restent sous le curseur. */
.ec-table { display:flex; flex-direction:column; padding:0 0 4px; }
.ec-table tbody tr[hidden] { display:none; }
.ec-table tbody tr[data-go]:focus-visible { outline:2px solid var(--primary); outline-offset:-2px; }
.ec-pied { display:flex; align-items:center; gap:6px; padding:8px 12px 4px; margin-top:auto; }
.ec-pied .muted { margin-right:auto; font-variant-numeric:tabular-nums; }
/* Une table tient dans sa carte. Au-delà de 1000 px la carte ne défile plus (assets/style.css :
   ce sont les cellules de texte qui passent à la ligne), mais les noms de colonnes, eux, ne
   passaient pas à la ligne : « Marge sur services contractuels », « Besoin global de
   solvabilité » poussaient la dernière colonne hors de la vue (IFRS 17 de 186 px, traités de
   65 px, ORSA de 56 px à 1440 px ; relecture des lots L13, L14 et L18, 09-10). Le nom d'une
   colonne passe à la ligne ; le contenu garde ses règles. */
@media (min-width:1001px){ .ec-table th { white-space:normal; vertical-align:bottom; } }
/* Le nom d'une colonne trie (tableau.js) : un bouton qui garde l'allure de l'en-tête, la flèche dit
   le sens ; 40 px de haut au doigt. */
.ec-table th:has(> .ec-th) { padding-top:0; padding-bottom:0; }
.ec-th { display:inline-flex; align-items:center; gap:4px; min-height:34px; padding:0; border:0; background:none; font:inherit;
  letter-spacing:inherit; text-transform:inherit; color:inherit; text-align:inherit; cursor:pointer; }
.ec-th:hover, .ec-th.on { color:var(--primary); }
.ec-th:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.ec-th::after { content:"↕"; font-size:11px; opacity:.5; } .ec-th[data-sens="asc"]::after { content:"↑"; opacity:1; }
.ec-th[data-sens="desc"]::after { content:"↓"; opacity:1; }
.ec-table th.num .ec-th { flex-direction:row-reverse; }
@media (max-width:1180px){ .ec-th { min-height:40px; } }
/* La ligne de total (tableau.js, option total) : en pied, hors du tri et de la pagination. */
.ec-table tfoot td { font-weight:700; color:var(--ink); background:var(--surface-2); border-top:2px solid var(--line); border-bottom:0; white-space:nowrap; }

/* ---- Page : la tête hors des onglets ---- */
.ec-tete { display:flex; align-items:flex-start; gap:20px; margin-bottom:12px; }
.ec-tete-g { flex:1 1 auto; min-width:0; }
.ec-tete .sub { margin:4px 0 6px; }
.ec-tete .frise-ligne { margin:0 0 6px; }
.ec-mention { margin:8px 0 0; }
.ec-gestes { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.ec-chiffre { flex:0 0 auto; min-width:200px; max-width:300px; }
.ec-chiffre .l { margin:0 0 4px; }
.ec-refus { margin:0 0 12px; }
.ec-corps > p:first-child { margin-top:0; }

/* ---- Volet d'un geste, sous la tête ---- */
.ec-volet { border-left:3px solid var(--primary); }
.ec-volet h2 { margin-bottom:10px; }
.ec-choix { margin-bottom:10px; }
.ec-champs { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:10px; margin-bottom:10px; }
.ec-champ { display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:var(--ink-soft); }
.ec-champ input[type="text"], .ec-champ input[type="date"] { border:1px solid var(--line); border-radius:8px; padding:6px 9px;
  font:inherit; font-size:13px; color:var(--ink); background:var(--surface); }
.ec-champ input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 2px var(--primary-weak); }
.ec-case { flex-direction:row; align-items:center; gap:8px; }
.ec-motif input { width:100%; }
.ec-volet-pied { display:flex; align-items:center; gap:8px; margin-top:12px; }
.ec-volet-msg { color:var(--hi); font-size:12.5px; }

@media (max-width:900px){
  .ec-tete { flex-direction:column; gap:10px; }
  .ec-chiffre { max-width:none; width:100%; }
}

/* ---- Au téléphone, une liste ne garde que ce qui sert à choisir une ligne ----
   La première colonne, « État » et les colonnes marquées etroit (tableau.js, ec-garde) ; la
   table prend la largeur de sa carte et le texte passe à la ligne, au lieu de pousser l'état
   hors de la carte. Seulement les tables qui y gardent au moins deux colonnes
   (ec-etroite, posée par tableau.js) : une liste réduite à son nom défile comme avant. */
@media (max-width:700px){
  .ec-liste .ec-table.ec-etroite table { min-width:0; width:100%; }   /* assets/style.css : max-content partout ailleurs */
  .ec-liste .ec-table.ec-etroite th:not(.ec-garde), .ec-liste .ec-table.ec-etroite td:not(.ec-garde) { display:none; }
  /* plus précis que « tbody tr[data-go] td:first-child { nowrap } » d'assets/style.css */
  .ec-liste .ec-table.ec-etroite > table > thead > tr > th, .ec-liste .ec-table.ec-etroite > table > tbody > tr > td:not(.num),
  .ec-liste .ec-table.ec-etroite > table > tbody > tr > td:not(.num) * { white-space:normal; }   /* une pastille d'état aussi, sur deux lignes */
  .ec-liste .ec-table.ec-etroite td:first-child { min-width:7em; }
  /* une pastille d'état moins large : « Remis le 04/08/2026 » face à « d'informations » poussait
     la table de 3 px hors de sa carte (#/reporting?vol=remis, 10-10) */
  .ec-liste .ec-table.ec-etroite td .badge, .ec-liste .ec-table.ec-etroite td .etiq { padding-left:6px; padding-right:6px; }
  .ec-liste .ec-table.ec-etroite > table > thead > tr > th, .ec-liste .ec-table.ec-etroite > table > tbody > tr > td { padding-left:6px; padding-right:6px; }
  /* une largeur minimale posée dans la cellule pour 1440 px (le nom sur deux lignes) */
  .ec-liste .ec-table.ec-etroite td > div[style*="min-width"] { min-width:0 !important; }
}

/* ---- Au téléphone, une table de page s'empile ----
   Chaque ligne devient une carte, chaque case dit sa colonne (data-nom, posé par page.js après le
   dessin), comme les tables des sinistres des grands comptes (.gs-pile). Avant, la table gardait
   ses colonnes et défilait dans sa carte : le texte était coupé au bord, la dernière colonne hors
   de la vue (#/lbc, #/plan-controle, #/gamme, #/tarifs... à 390 px, 10-10). Seulement les tables
   du corps d'une page faites par ecTable : une liste garde ses règles (plus haut), un triangle ou
   une matrice dessinés à part gardent leur défilement. */
@media (max-width:700px){
  .ec-page .ec-corps .ec-table { overflow:visible; }
  .ec-page .ec-corps .ec-table > table { min-width:0; width:100%; }
  .ec-page .ec-corps .ec-table > table, .ec-page .ec-corps .ec-table > table > tbody,
  .ec-page .ec-corps .ec-table > table > tbody > tr > td { display:block; }
  .ec-page .ec-corps .ec-table > table > thead { display:none; }
  .ec-page .ec-corps .ec-table > table > tbody > tr:not([hidden]) { display:block; padding:8px 12px; border-bottom:1px solid var(--line); }
  .ec-page .ec-corps .ec-table > table > tbody > tr > td { border:0; padding:2px 0; text-align:left; white-space:normal; overflow-wrap:anywhere; }
  .ec-page .ec-corps .ec-table > table > tbody > tr > td * { white-space:normal; }
  .ec-page .ec-corps .ec-table > table > tbody > tr > td[data-nom]::before { content:attr(data-nom) " : "; color:var(--muted); font-size:11.5px; }
  .ec-page .ec-corps .ec-table > table > tbody > tr > td:empty { display:none; }
  .ec-page .ec-corps .ec-table > table > tbody > tr > td:first-child { font-weight:600; }
  /* La ligne de total s'empile comme les autres, en dernière carte. */
  .ec-page .ec-corps .ec-table > table > tfoot, .ec-page .ec-corps .ec-table > table > tfoot > tr { display:block; }
  .ec-page .ec-corps .ec-table > table > tfoot > tr { padding:8px 12px; background:var(--surface-2); }
  .ec-page .ec-corps .ec-table > table > tfoot > tr > td { display:block; border:0; padding:2px 0; text-align:left; white-space:normal; background:none; }
  .ec-page .ec-corps .ec-table > table > tfoot > tr > td[data-nom]::before { content:attr(data-nom) " : "; color:var(--muted); font-size:11.5px; font-weight:400; }
  .ec-page .ec-corps .ec-table > table > tfoot > tr > td:empty { display:none; }
  /* une largeur minimale posée dans la cellule pour 1440 px (le nom sur deux lignes) */
  .ec-page .ec-corps .ec-table td > div[style*="min-width"] { min-width:0 !important; }
}

/* ---- Les vues d'une table (ecVues, tableau.js, 10-10) ----
   Une rangée de boutons, un par groupe de colonnes, qui passe à la ligne sur un écran étroit ;
   dans la grille, le bouton « Colonnes » sur la même ligne, à droite. Au doigt (tablette,
   téléphone), chaque cible fait 40 px ; sur un téléphone, le menu des colonnes est une feuille
   du bas, avec son titre et « Fermer ». */
.ec-vues { display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-width:0; }
.ec-vues-lab { font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600; margin-right:2px; }
.ec-vue { border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); border-radius:999px; padding:5px 13px; font:inherit; font-size:12.5px; line-height:1.3; cursor:pointer; min-height:32px; }
.ec-vue:hover { border-color:var(--primary); color:var(--primary); }
.ec-vue.on { background:var(--primary-weak); border-color:var(--primary); color:var(--primary); font-weight:600; }
.ec-vues + .ec-table { margin-top:10px; }
/* Sous « Toutes les colonnes », une table qui ne tient pas défile dans sa carte, à toute largeur
   (tableau.js, ec-toutes) : toutes les colonnes de la table des méthodes des provisions poussaient
   #main de 400 px à 1271 px (12-10). Les vues nommées, elles, tiennent dans la carte. */
.card.tbl.ec-table.ec-toutes { overflow-x:auto; }
/* une ligne reste sur une ligne : ses cases ne passent pas à la ligne pour tenir, les noms de colonnes
   si (au téléphone, la table de page s'empile, plus bas) */
@media (min-width:701px){ .card.tbl.ec-table.ec-toutes > table > tbody > tr > td { white-space:nowrap; } }
.grille .g-barre { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:12px 14px 4px; }
.grille .g-barre .g-cols { padding:0; margin-left:auto; }
.grille .g-vue-vide { margin:6px 14px 2px; font-size:12.5px; color:var(--muted); }
.cols-tete { display:none; }
@media (hover:none), (max-width:1180px){
  .ec-vue, .grille .g-barre .g-cols .filtre { min-height:40px; }
  .cols-menu label { min-height:40px; }
}
@media (max-width:700px){
  .grille .g-barre { padding:10px 10px 4px; }
  .cols-menu { position:fixed; left:0; right:0; top:auto; bottom:0; z-index:1000; min-width:0; max-height:72vh;
    border-radius:16px 16px 0 0; padding:8px 12px calc(14px + env(safe-area-inset-bottom)); box-shadow:0 -10px 30px rgba(20,38,59,.22); }
  .cols-tete { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 7px 8px; border-bottom:1px solid var(--line-soft); margin-bottom:6px; }
  .cols-tete .lien { width:auto; margin:0; min-height:40px; font-size:13px; }
  .cols-menu label { min-height:44px; font-size:14px; }
}