/* L'enveloppe des deux tableaux, partagée par la console du cabinet et l'espace
   client : titre, cartouches de paramètres, onglets, vignettes de synthèse, cadre
   du tableau, pied de page, impression.

   tableaux.css réunissait déjà la mise en forme des tableaux, tableaux.js leur
   rendu. Restait tout ce qui les entoure, et c'est là que les deux écrans se
   séparaient le plus : la console posait son tableau à plat sur la page, l'espace
   client l'enfermait dans une carte à bord arrondi et à rembourrage ; les vignettes
   n'avaient ni la même taille de titre, ni le même pas de grille, ni le même fond.
   L'utilisateur voyait deux applications là où il n'y a qu'un tableau.

   La console est la référence : ses valeurs sont reprises telles quelles. Comme
   tableaux.css, cette feuille porte ses propres variables, pour être posée dans
   l'une ou l'autre page sans rien y renommer. */

:root{
  --ec-fond:#f6f7f9; --ec-surface:#ffffff; --ec-trait:#d9dde3; --ec-trait-fort:#9aa3ad;
  --ec-texte:#1c2530; --ec-doux:#5d6875; --ec-accent:#1f5fa8; --ec-cumul:#e4e9ef;
  --ec-pos:#0f7a3d; --ec-neg:#b3261e;
}

/* ------------------------------------------------------------- titres
   Une classe propre plutôt que `h1` tout court : les deux pages ont d'autres
   titres (une page de connexion, une fiche de magasin) qui ne sont pas celui-là. */
h1.titre-ecran{font-size:18px;font-weight:700;margin:0 0 2px}
.sous-ecran{color:var(--ec-doux);font-size:12px;margin:0}

/* --------------------------------------------- cartouches de paramètres
   Une case par réglage : l'intitulé en petites capitales, la valeur en gros,
   soulignée. On lit un tableau de bord, pas un formulaire. */
.params{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.param{background:var(--ec-surface);border:1px solid var(--ec-trait);border-radius:6px;
       padding:6px 10px;display:flex;flex-direction:column;gap:2px;min-width:104px}
.param label{font-size:10px;text-transform:uppercase;letter-spacing:.04em;
             color:var(--ec-doux)}
.param input{border:none;border-bottom:1px solid var(--ec-trait);font-size:14px;
             font-weight:600;width:100%;padding:1px 0;background:transparent;
             color:inherit;border-radius:0;font-variant-numeric:tabular-nums}
.param input:focus{outline:none;border-bottom-color:var(--ec-accent)}

/* ------------------------------------------------------------ onglets */
.onglets{display:flex;gap:4px;margin-bottom:-1px;align-items:center}
.onglets button{font:inherit;padding:7px 16px;border:1px solid var(--ec-trait);
  border-bottom:none;border-radius:7px 7px 0 0;background:var(--ec-cumul);
  color:var(--ec-doux);cursor:pointer}
.onglets button[aria-selected="true"]{background:var(--ec-surface);color:var(--ec-texte);
  font-weight:600;box-shadow:inset 0 3px 0 var(--ec-accent)}
.bascule{margin-left:auto;align-self:center;font:inherit;font-size:12px;padding:5px 12px;
         border:1px solid var(--ec-trait);border-radius:6px;background:var(--ec-surface);
         color:var(--ec-texte);cursor:pointer}
.bascule:hover{background:var(--ec-cumul)}

/* ------------------------------------------------- cadre des tableaux
   Le coin haut-gauche reste carré : le cadre est la continuation de l'onglet
   sélectionné, pas une boîte posée en dessous. */
.wrap{overflow:auto;background:var(--ec-surface);border:1px solid var(--ec-trait);
      border-radius:0 8px 8px 8px}

/* -------------------------------------------------------- vignettes
   Des lignes intitulé / valeur, pas de grands nombres : ce sont des rappels que
   l'on vérifie, et le tableau reste la pièce principale. */
.synthese{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
          gap:10px;margin-top:12px}
.synthese.en-tete{margin:0 0 12px}
.synthese .bloc{background:var(--ec-surface);border:1px solid var(--ec-trait);
                border-radius:8px;padding:10px 12px}
.synthese .bloc h3{font-size:11px;text-transform:uppercase;letter-spacing:.05em;
                   color:var(--ec-doux);margin:0 0 6px;font-weight:600}
.synthese .ligne{display:flex;justify-content:space-between;gap:12px;padding:2px 0;
                 font-size:13px}
.synthese .ligne span{color:var(--ec-doux)}
.synthese .ligne b{font-variant-numeric:tabular-nums}
.synthese .ligne b.pos{color:var(--ec-pos)}
.synthese .ligne b.neg{color:var(--ec-neg)}
/* Le bloc des chèques suit les colonnes chèques : masqué des deux côtés. */
.synthese .bloc.cheques{display:none}

/* Les trois colonnes de synthèse du tableau se replient sur demande : sur un
   écran juste, on préfère voir les colonnes de travail. */
body.sans-synthese .g-synth{display:none}

/* ------------------------------------------------------- pied de page */
.legende{margin-top:12px;color:var(--ec-doux);font-size:11px;display:flex;
         gap:12px;flex-wrap:wrap;align-items:center}
button.action, a.action{font:inherit;padding:5px 12px;border:1px solid var(--ec-trait-fort);
  background:var(--ec-surface);color:inherit;border-radius:6px;cursor:pointer;
  text-decoration:none;display:inline-block}
button.action:hover, a.action:hover{background:var(--ec-cumul)}
/* Les deux boutons d'export, au-dessus du tableau. */
.exports{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 8px}
.exports .sous{margin-left:4px}

/* ----------------------------------------------------- périphériques
   Le même resserrement que tableaux.css applique aux colonnes, appliqué ici à la
   page. Les tailles des cellules restent l'affaire de tableaux.css : les écraser
   ici, c'est rouvrir la porte à la divergence. */
@media (max-width:1400px){
  .ecran{font-size:12px}
  .param input{font-size:13px}
  .synthese{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}
  .synthese .ligne{font-size:12px}
}
@media (max-width:640px){
  .params{gap:6px}
  .param{flex:1;min-width:132px}
  .param input{width:100%}
  .onglets{overflow-x:auto;flex-wrap:nowrap}
  .onglets button{white-space:nowrap;padding:7px 12px}
  .synthese{grid-template-columns:1fr}
  /* Une valeur longue (« 18,24 € (obj. 22,75 €) ») se replie au lieu de déborder. */
  .synthese .ligne b{white-space:normal;text-align:right}
}

/* ------------------------------------------------------------ papier
   Sur le papier, on veut la feuille entière : les deux onglets se déplient, et
   tout ce qui sert à naviguer disparaît. Chaque tableau part sur sa propre page,
   et les vignettes ne s'impriment pas — elles poussaient le tableau sur une
   deuxième page alors qu'il tient sur une seule en A4 paysage, et elles ne disent
   rien que le pied du tableau ne dise déjà. */
@media print{
  .onglets, .legende, .exports, .bascule, .retour, .params,
  .reglage, .afaire, #alertes{display:none !important}
  .synthese, .aide-ecran{display:none !important}
  .wrap{overflow:visible;border:0;max-height:none}
  .ecran{padding:0;background:#fff}
}