/* LE PONT · les pages de l'ancienne coquille dans la nouvelle charte (24/10/2026)

   Chargée par templates/base_charte.html juste après app.css et avant tuiles.css.
   Les pages gardent leurs classes (.panel, .btn, .chip, .rtable…) et leurs
   styles en ligne : on ne réécrit pas cent gabarits, on change les JETONS
   qu'ils lisent. Ils sont redéfinis sur `body.tu`, sous la racine où app.css
   les pose : tout ce qui est dans la page hérite des nouveaux, les deux thèmes
   compris (les --tu-* changent déjà avec le thème).

   Correspondance retenue :
     fond de page ......... --bg            → --tu-fond
     cartes, panneaux ..... --glass(-2)     → --tu-carte
     surfaces internes .... --panel-2, --solid-2 → --tu-fond
     filets ............... --line, --hair  → --tu-trait
     texte ................ --ink, --muted, --dim → --tu-encre, --tu-doux
     accent ............... --teal*         → le bleu de la charte (--tu-y-*)
   Les couleurs de sens (rouge, orange, vert) restent celles d'app.css. */

body.tu{
  --bg:var(--tu-fond);
  --glass:var(--tu-carte); --glass-2:var(--tu-carte); --glass-line:var(--tu-trait);
  --solid:var(--tu-carte); --solid-2:var(--tu-fond); --panel-2:var(--tu-fond); --data:var(--tu-carte);
  --line:var(--tu-trait); --hair:color-mix(in srgb,var(--tu-trait) 75%,transparent);
  --ink:var(--tu-encre); --soft:color-mix(in srgb,var(--tu-encre) 82%,var(--tu-doux));
  --muted:var(--tu-doux); --dim:var(--tu-doux);
  --teal:var(--tu-y-vif); --teal-bright:var(--tu-y-vif); --teal-fg:var(--tu-y-texte);
  --teal-ink:#FFFFFF; --teal-bg:var(--tu-y-doux);
  --chip:var(--tu-n-doux); --ctl-bg:var(--tu-fond);
  --shadow:var(--tu-ombre);
  --radius:18px; --radius-sm:11px;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* Le corps de page garde la taille de texte de l'ancienne coquille : ses
   composants sont dessinés pour 14 px (l'accueil, lui, est à 15). */
body.tu .page{font-size:14px;line-height:1.5}

/* Panneaux : les cartes de la charte, plus arrondies, sans flou. */
body.tu .panel{border-radius:20px;backdrop-filter:none;-webkit-backdrop-filter:none}

/* BOUTONS · des pilules, comme dans la charte. L'action principale est à
   l'encre (noir en clair, blanc en sombre), comme le « + » de l'en-tête ; les
   autres gardent leurs rôles. `:where()` laisse passer devant toute règle
   d'une page qui habille son propre bouton. */
body.tu .btn{border-radius:999px}
body.tu :where(.btn:not(.ghost,.second,.tertiaire,.danger)){background:var(--tu-encre);
  border-color:var(--tu-encre);color:var(--tu-fond)}
body.tu :where(.btn.ghost){background:transparent;border-color:var(--tu-trait);color:var(--tu-encre)}
body.tu :where(.btn.ghost:hover){background:var(--tu-fond);border-color:var(--tu-trait);color:var(--tu-encre)}

/* Titre de page : celui de l'accueil (« Bonjour Romain »), un cran plus bas. */
body.tu .tete-ligne h1{font-size:32px;font-weight:750;letter-spacing:-.03em}
body.tu .tete-page{margin-bottom:18px}
/* LE « i » À CÔTÉ DU TITRE (25/10/2026) · l'aide (_aide.html, bloc `aide`)
   occupait seule une ligne sous le titre. Sur grand écran, la ligne du titre
   devient une grille : fil | titre, « i », actions à droite ; tout autre
   contenu du bloc `aide` (le sujet d'une planche…) reste dessous. */
@media (min-width:861px){
  body.tu .tete-page{grid-template-columns:minmax(0,max-content) auto minmax(0,1fr);
    grid-auto-flow:row dense;align-items:end;column-gap:10px}
  body.tu .tete-page > *{grid-column:1 / -1}
  body.tu .tete-page > .tete-ligne{display:contents}
  body.tu .tete-ligne > h1{grid-column:1}
  body.tu .tete-ligne > .tete-actions{grid-column:3;justify-self:end}
  body.tu .tete-page > .aide{grid-column:2;align-self:center}
}

/* L'espace à onglets (Mail, Documents) occupe la hauteur sous l'en-tête :
   `--top-h` est mesuré par tuiles.js sur le vrai en-tête. */
body.tu .espace{height:calc(calc(100vh / var(--echelle, 1)) - var(--top-h,68px) - 12px);height:calc(calc(100dvh / var(--echelle, 1)) - var(--top-h,68px) - 12px)}
/* Ses bords suivent les marges de l'en-tête (espace.html remet la page à zéro). */
body.tu main.page:has(> .espace){padding:0 max(var(--tu-gouttiere),env(safe-area-inset-right,0px)) 12px
  max(var(--tu-gouttiere),env(safe-area-inset-left,0px))}
body.tu .espace .ongletbar{border-radius:18px 18px 0 0}
@media (max-width:860px){
  body.tu .espace{height:calc(calc(100dvh / var(--echelle, 1)) - var(--top-h,68px) - 70px - max(env(safe-area-inset-bottom),8px))}
}

/* ══ LES COMPOSANTS COMMUNS (25/10/2026) ════════════════════════════════════
   Depuis que toutes les pages passent par la charte, leurs composants les plus
   employés (relevés sur les gabarits : boutons, champs, pastilles, tableaux,
   onglets, états vides) prennent la forme de la charte. Les sélecteurs sont
   tenus au plus bas (`:where`) : la règle d'une page qui habille son propre
   composant passe toujours devant. */
body.tu{--ctl-h:38px}

/* Champs de saisie : le fond de la charte, un arrondi franc, et plus de filet
   gauche de 3 px (l'ancienne marque d'état) ; la main se voit au contour. */
body :where(.tu .page) :where(input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=submit],[type=button]),select,textarea){
  border:1px solid var(--tu-trait);border-left-width:1px;border-radius:12px;background-color:var(--tu-fond);color:var(--tu-encre)}
body :where(.tu .page) :where(input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file]),select,textarea):focus{
  border-color:var(--tu-y-vif);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--tu-y-vif) 18%,transparent)}
body :where(.tu .page) :where(input,select,textarea):hover:not(:disabled):not([readonly]):not(:focus){border-left-color:var(--tu-trait)}
body :where(.tu .page) label{color:var(--tu-doux)}

/* Tableaux : l'en-tête colle au haut de la fenêtre (l'en-tête de la charte ne
   colle pas, lui), sur le fond de la carte. */
body.tu thead th{top:0;background:var(--tu-carte);color:var(--tu-doux);font-weight:700;letter-spacing:.06em}
body.tu tbody tr{border-bottom-color:var(--tu-trait)}
body.tu tbody tr:hover{background:var(--tu-fond)}

/* Pastilles (.chip) : sans contour, sur l'aplat neutre de la charte. */
body.tu :where(.chip){border-color:transparent;background:var(--tu-n-doux);color:var(--tu-n-texte);font-weight:600}
body.tu :where(.chip.teal){background:var(--tu-y-doux);color:var(--tu-y-texte)}

/* Onglets segmentés : la bascule de la charte (Mail | Messagerie). */
body.tu :where(.segmented){border:0;border-radius:999px;padding:3px;background:var(--tu-fond);gap:2px}
body.tu :where(.segmented .seg){border-radius:999px;padding:6px 14px;color:var(--tu-encre)}
body.tu :where(.segmented .seg + .seg){border-left:0}
body.tu :where(.segmented .seg.on){background:var(--tu-carte);color:var(--tu-encre);font-weight:700;box-shadow:var(--tu-ombre)}
body.tu :where(.segmented.glissant > .pouce){border-radius:999px;background:var(--tu-carte);box-shadow:var(--tu-ombre)}

/* Surtitres, pastilles de compte, états vides. */
body.tu :where(.eyebrow){letter-spacing:.08em;font-weight:700;color:var(--tu-doux)}
body.tu :where(.nbadge){background:var(--tu-y-vif);color:#FFFFFF}
body.tu :where(.vide){border-radius:20px}
body.tu :where(.vide .rond){background:var(--tu-y-doux);color:var(--tu-y-texte)}

/* Tuiles et outils (pages d'espace) : des cartes de la charte. */
body.tu :where(.tile,.tool){border-radius:20px;border-color:transparent;background:var(--tu-carte);box-shadow:var(--tu-ombre)}
body.tu :where(.tile .ic){border-radius:12px}

/* Les titres de panneaux, à la graisse de la charte. */
body.tu :where(.panel) > :where(h2,h3):first-child{font-weight:700;letter-spacing:-.01em}

/* LES SURTITRES FIXES (25/10/2026) · « Administration · Navigation »,
   « Outils · Budget »… : l'ancien en-tête de page les posait sous le titre. Dans
   la charte, le fil au-dessus du titre dit déjà où l'on est (table du menu, ou
   emplacement dans les onglets) ; le surtitre ne se montre plus que sur une
   page sans fil. Les surtitres qui portent une donnée (nom du projet, compte)
   n'ont pas la classe et restent. */
body.tu:has(.tete-fil) :where(.mh-id) > .surtitre{display:none}

/* LES PAGES PLEINE HAUTEUR (25/10/2026) · éditeurs OnlyOffice, support PDF
   projeté, Chat. Ce qu'elles affichent (une iframe) ne remplit que si la
   hauteur est définie jusqu'à lui. L'ancienne coquille la donnait (.content à
   100vh, .page en flex) ; dans la charte, main n'en avait pas, et l'éditeur
   s'écrasait sous sa barre d'outils.
   La page porte la classe `pleine-hauteur` (bloc `classe_page`) : on ne peut
   pas se fier à #ooeditor, qu'OnlyOffice REMPLACE par son iframe
   (`frameEditor`) en démarrant. Elle prend la hauteur sous l'en-tête, avec
   les marges de l'en-tête (leur « .page{padding:0} » collait le contenu au
   bord gauche) ; son titre géant s'efface, le nom est dans sa barre. */
body.tu main.pleine-hauteur{display:flex;flex-direction:column;max-width:none;margin:0;
  height:calc(calc(100vh / var(--echelle, 1)) - var(--top-h,68px) - 12px);height:calc(calc(100dvh / var(--echelle, 1)) - var(--top-h,68px) - 12px);
  padding:0 max(var(--tu-gouttiere),env(safe-area-inset-right,0px)) 12px max(var(--tu-gouttiere),env(safe-area-inset-left,0px))}
body.tu main.pleine-hauteur > .tete-page{display:none}
body.tu main.pleine-hauteur > :is(#ooeditor,iframe,#chatframe){flex:1 1 0;min-height:0;height:auto;width:100%;
  border:0;border-radius:16px;overflow:hidden;box-shadow:var(--tu-ombre);display:block}
body.tu main.pleine-hauteur > :is(.sup-bar,.chatbar){border:0;background:var(--tu-carte);border-radius:16px;
  box-shadow:var(--tu-ombre);margin-bottom:10px;flex:none}
html.embarque body.tu main.pleine-hauteur{height:calc(100vh / var(--echelle, 1));height:calc(100dvh / var(--echelle, 1));padding:0}
html.embarque body.tu main.pleine-hauteur > :is(#ooeditor,iframe,#chatframe){border-radius:0;box-shadow:none}
@media (max-width:860px){
  body.tu main.pleine-hauteur{padding-bottom:0;
    height:calc(calc(100dvh / var(--echelle, 1)) - var(--top-h,68px) - 84px - max(env(safe-area-inset-bottom),8px))}
}

/* UN MOT TROP LONG NE POUSSE PLUS LA PAGE (25/10/2026, revue mobile) · une
   adresse ou un message d'erreur sans espace élargissait l'écran du téléphone.
   `break-word` ne coupe qu'en dernier recours et ne change pas la mise en
   page (la largeur minimale des blocs reste la même). */
body.tu main.page{overflow-wrap:break-word}

/* LES TUILES DE CHIFFRES PARTAGÉES (25/10/2026) · « .fr-card » et ses
   cousines (Devis & factures, Revenus, Banques, Abonnements, Emploi du
   temps…) : la carte de la charte, avec le liseré de couleur à gauche qui
   dit l'état ; la valeur en grand. Les variantes de couleur d'app.css
   (.orange, .red…) gardent la main sur le liseré. */
body.tu :is(.fr-card,.fd-tuile,.af-tcard,.pp-tuile,.edt-tuile,.ev-stat,.bu-stat,.mg-tuile,
.ga-card,.lg-tuile,.px-stat,.qr-stat,.sd-stat,.cg-tuile,.bl-stat,.sim-chiffre,.ab-stats .ab-tile,.bq-tot .tcard){
  border-top:0;border-right:0;border-bottom:0;border-left-width:4px;border-radius:20px;
  background:var(--tu-carte);box-shadow:var(--tu-ombre);padding:15px 18px}
body.tu :is(.fr-val,.fd-tuile .val,.af-tcard .val,.ga-card .val,.sd-stat .val,.bl-stat .val,
.ev-stat .val,.bu-stat .val,.mg-tuile .val,.pp-tuile .v,.edt-tuile .v,.lg-tuile .v,.cg-tuile .v,.qr-stat .v,
.px-stat .n,.sim-chiffre .sim-v,.ab-stats .big,.bq-tot .tcard .val){font-size:24px;font-weight:750;letter-spacing:-.025em}

/* LES CARTES « .panel » (25/10/2026) · l'ombre de la charte suffit à les
   détacher du fond : la bordure fine en plus alourdissait chaque page. */
body.tu .panel{border-color:transparent;border-radius:24px}

/* LES CAPSULES D'ONGLETS (25/10/2026) · l'onglet actif est rendu par un
   curseur qui glisse dessous (_js_ui, « .pouce »). Dans la charte, curseur et
   texte de l'onglet actif étaient tous deux blancs : « Répertoire » disparaissait
   dans Contacts. Le curseur prend l'encre, comme les onglets de l'en-tête ; les
   autres onglets restent à l'encre, sans le bleu des liens du thème clair. */
body.tu .capsule.capsule{background:var(--tu-carte);border:0;box-shadow:var(--tu-ombre);padding:4px}
body.tu .capsule.glissant > .pouce{background:var(--tu-encre);box-shadow:none}
body.tu .capsule > a:not(.pouce),body.tu .capsule > button:not(.pouce){color:var(--tu-encre) !important}
body.tu .capsule > :is(.on,.actif,.active,.sb-mode.active,.seg.on){color:var(--tu-fond) !important;font-weight:700}

/* LES BOUTONS « RETOUR » VERS LES ANCIENNES PAGES-RELAIS (25/10/2026) · Budget,
   Collections, Web & cloud, Outils, « Hub d'outils » : dans la charte, l'en-tête
   et le fil d'Ariane les remplacent. Ils restent dans l'ancienne coquille. */
body.tu .retour-hub{display:none}

/* LES MESSAGES DANS LE FLUX (25/10/2026) · app.css fait de #msgs une pile
   flottante calée sous l'ancienne barre du haut (--top-h) : dans la charte, le
   message se posait sur l'en-tête et y restait (Feuille de service). Ici il
   s'affiche en tête de page, comme le prévoit tuiles.css (.tu-messages). */
body.tu #msgs{position:static;width:auto;pointer-events:auto;top:auto;right:auto;left:auto}

/* LES BARRES DE SECTION (25/10/2026) · « Retour au budget | Pilotage revenus |
   description » : dans la charte, le nom répète le titre, la description est
   passée sous le « i » et le bouton Retour mène à une page-relais. Il ne reste
   que les boutons d'action, alignés à droite ; sans eux, la barre disparaît.
   « .etat-section » : une information vivante (synchro Discogs) qui reste. */
body.tu .barre-section{background:none;box-shadow:none;border:0;padding:0;margin:0 0 14px;justify-content:flex-end}
body.tu .barre-section > :is(.retour-hub,h2,.muted:not(.etat-section)){display:none}
body.tu .barre-section:not(:has(> :not(.retour-hub):not(h2):not(.muted):not(.spacer):not([style*="flex:1"]))){display:none}

/* LE GARDE-FOU DES TABLEAUX AU TÉLÉPHONE (25/10/2026) · un tableau aux cellules
   insécables (codes, modèles, pastilles) élargissait toute la page, et le banc,
   faute de vraies données, ne le voyait pas (Consommation IA). Une carte qui
   porte directement un tableau le fait défiler dans son cadre. */
@media (max-width:860px){
  body.tu .panel:has(> table){overflow-x:auto}
}

/* LES CHAMPS NE FONT PLUS DÉBORDER LA PAGE (25/10/2026) · une liste déroulante
   prend la largeur de sa plus longue option : avec de vrais dossiers, celle de
   la fiche d'un document élargissait toute la page au téléphone (Romain). Un
   champ ne dépasse plus son conteneur, et peut rétrécir dans une rangée. */
body.tu main :is(select,input,textarea){max-width:100%}
body.tu main :is(select,input[type=file]){min-width:0}