/* La nouvelle présentation GIPS — version 4.000 (24/10/2026).
   Guillaume a validé les maquettes (« oui parfait pour la mise en page ») : menu, fiche Site, liste des sites, Ma journée, Mail —
   page publiée https://claude.ai/artifact/9uwKfBTcu4udo4yjzLPUV8. Ce fichier les applique à tout ERPNext côté GIPS, PAR-DESSUS les
   écrans existants (aucune logique ni aucun droit ne change) :
     1. le menu        : groupes titrés en petites capitales, un pictogramme par entrée, nombres alignés à droite, « + Nouveau » orange
                         et « Rechercher… Ctrl K » en tête, entrée active blanche sur la marine, pied (pastille de version, la personne) ;
     2. les fiches     : le fond de page, chaque partie en CARTE (en-tête titré, filet, contenu) ;
     3. la fiche Site  : l'en-tête en carte avec la ligne de repères, le sous-menu dans sa propre carte, le bandeau unique des
                         consignes provisoires, deux colonnes titrées d'un filet, des cartes « titre · Modifier » ;
     4. les listes     : onglets d'état en segment, recherche et filtres sur une ligne, en-têtes de colonnes en petites capitales,
                         filets entre colonnes, une ligne sur deux teintée, montants alignés à droite ;
     5. Ma journée     : les chiffres en tête séparés par des filets, des cartes à en-tête ;
     6. Mail           : trois colonnes nettes (dossiers nommés, liste avec le site en pastille, mail ouvert avec ses actions en tête).
   Système graphique seulement : les jetons de theme_gips.css (aucune couleur, taille ni arrondi écrits ici). Les écrans gardent leurs
   styles d'origine (dans leur script) ; ces règles sont un peu plus précises (préfixe « body ») pour passer devant, sans !important
   sauf contre un !important de Frappe. Thèmes clair et sombre : tout passe par les jetons, que chaque thème définit. */

/* ===== 0. Le fond de page ================================================================================================== */
body { background: var(--gips-fond-page); }
body .page-container, body .layout-main-section-wrapper { background: transparent; }

/* ===== 1. Le menu ============================================================================================================ */
/* 24/10 au soir (4.000, menu condensé — Guillaume : « condense un peu le menu », option A « Tout visible, lignes serrées » de la page
   « Menu condensé ») : mêmes entrées, même ordre ; la recherche et le « + » sur une ligne, la cloche dans la ligne du titre, la pastille
   de version et la personne sur une ligne au pied (docs/v4/menu-compact.md).
   24/10 dans la nuit (retouche — Guillaume : « un petit peu trop compressé, pas forcément très bien présenté ») : le juste milieu entre
   les 36 px d'avant et les 28 px du menu condensé — lignes de 32 px au texte de 14 px (le corps) et pictogrammes de 16 px, titres de
   groupe en petites capitales de 11 px avec 14 px d'air au-dessus et 4 px dessous, un même pas partout, l'entrée active marquée d'un
   trait orange ; tout tient encore à 1 080 px de haut (mesures : docs/v4/retouches.md). Aucun libellé coupé : un libellé trop long
   pour la largeur passe à la ligne au lieu de finir en « … ». */
/* Sa largeur : celle de la maquette (le menu se redimensionne toujours à la main : Frappe écrit alors sa propre largeur). */
html:root { --sidebar-width: var(--gips-menu-largeur); }

/* La ligne du titre (« Fiche Globale ») : 36 px ; la cloche de Frappe (sa bande « Notifications » sous le titre) y est posée à droite,
   juste avant la flèche du menu du titre, avec son nombre. Menu replié : la cloche reste un pictogramme sous l'emblème. */
body .body-sidebar-container.expanded .body-sidebar { position: relative; }
body .body-sidebar-container.expanded .sidebar-header { height: 34px; margin-top: 2px; margin-bottom: 0; }
body .body-sidebar-container.expanded .sidebar-header .header-logo,
body .body-sidebar-container.expanded .sidebar-header .header-logo img { width: 24px; height: 24px; }
body .body-sidebar-container.expanded .sidebar-header .title-container { margin-right: 64px; min-width: 0; }
body .body-sidebar-container.expanded .standard-items-band { position: absolute; top: 5px; right: 40px; z-index: 2; margin: 0; padding: 0;
	width: auto; display: flex; align-items: center; }
body .body-sidebar-container.expanded .standard-items-band .sidebar-notification .standard-sidebar-item { height: 28px; margin: 0;
	padding: 0; border-radius: var(--gips-r-s); }
body .body-sidebar-container.expanded .standard-items-band .sidebar-notification .item-anchor { gap: 2px; padding: 0 6px; }
body .body-sidebar-container.expanded .standard-items-band .sidebar-notification .sidebar-item-label { position: absolute; width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body .body-sidebar-container.expanded .standard-items-band .notification-count { min-width: 18px; height: 18px; padding: 0 5px;
	display: inline-flex; align-items: center; justify-content: center; border-radius: var(--gips-r-pilule); font-size: var(--gips-t-xs);
	font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
[data-gips-theme] body .body-sidebar .standard-items-band .notification-count { background: var(--gips-bleu); color: var(--gips-sur-couleur); }

/* La tête : la recherche (32 px) et, à côté, le « + » carré orange de « Nouveau » (theme_gips.css, .gips-tete-menu), sans trait dessous. */
body .body-sidebar-container.expanded .body-sidebar-top { padding: 0 8px 1px; }
body .body-sidebar-container.expanded .gips-tete-menu { gap: 6px; padding: 1px 0 5px; margin-bottom: 0; border-bottom: 0;
	align-self: stretch; box-sizing: border-box; }
body .body-sidebar-container.expanded .gips-tete-menu .gips-nouveau { width: 32px; height: 32px; border-radius: var(--gips-r-s);
	font-size: var(--gips-t-l); }
body .body-sidebar-container.expanded .gips-tete-menu .gips-rechercher { height: 32px; padding: 0 8px; border-radius: var(--gips-r-s);
	font-size: var(--gips-t-s); }
[data-gips-theme] body .body-sidebar .gips-rechercher { background: var(--gips-menu-champ); border-color: transparent; color: var(--gips-menu-doux); }
[data-gips-theme] body .body-sidebar .gips-rechercher:hover,
[data-gips-theme] body .body-sidebar .gips-rechercher:focus-visible { border-color: var(--gips-menu-filet); }
[data-gips-theme] body .body-sidebar .gips-rechercher kbd { border-color: var(--gips-menu-filet); color: var(--gips-menu-doux); }

/* Les groupes : un titre en petites capitales (11 px, le minimum de la charte, un peu d'interlettrage), sans pictogramme, 14 px d'air
   au-dessus et 4 px dessous — le groupe se lit d'un coup d'œil (le pictogramme du groupe ne sert que menu replié, menu_gips.js) ; la
   flèche qui replie le groupe ne se montre qu'au survol. */
body .body-sidebar-container.expanded .sidebar-items > .sidebar-item-container.section-item { margin-top: 14px; }
body .body-sidebar-container.expanded .section-item > .standard-sidebar-item { height: auto; min-height: 13px; margin: 0; background: transparent !important;
	box-shadow: none; }
body .body-sidebar-container.expanded .section-item > .standard-sidebar-item .item-anchor { height: auto; padding: 0 10px 4px; min-height: 13px; }
body .body-sidebar-container.expanded .section-item > .standard-sidebar-item .sidebar-item-icon { display: none !important; }
body .body-sidebar-container.expanded .section-item > .standard-sidebar-item .sidebar-item-label { font-size: var(--gips-t-xs); line-height: 13px;
	letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--text-muted); }
[data-gips-theme] body .body-sidebar-container.expanded .section-item > .standard-sidebar-item .sidebar-item-label { color: var(--gips-menu-doux) !important; }
body .body-sidebar-container.expanded .section-item > .standard-sidebar-item .sidebar-item-control,
body .body-sidebar-container.expanded .section-item > .standard-sidebar-item .drop-icon { height: 13px; }
body .body-sidebar-container.expanded .section-item > .standard-sidebar-item .drop-icon { opacity: 0; transition: opacity .15s; }
body .body-sidebar-container.expanded .section-item > .standard-sidebar-item:hover .drop-icon,
body .body-sidebar-container.expanded .section-item > .standard-sidebar-item .drop-icon:focus-visible { opacity: .8; }
/* Les entrées d'un groupe au même alignement que les autres : ni retrait ni trait vertical. */
body .body-sidebar-container.expanded .section-item > .nested-container { margin-left: 0; border-left: 0; padding-left: 0; }

/* Les entrées : 32 px, un pas régulier (aucun écart entre elles), un pictogramme de 16 px chacune (aussi menu ouvert), le texte en 14 px
   (le corps), le nombre au bout de la ligne. Le libellé n'est jamais coupé : s'il ne tient pas (menu rétréci à la main), il passe à la
   ligne et l'entrée grandit. */
body .body-sidebar-container.expanded .sidebar-items .sidebar-item-container:not(.section-item) > .standard-sidebar-item { height: auto;
	min-height: 32px; margin: 0; border-radius: var(--gips-r-s); }
body .body-sidebar-container.expanded .sidebar-items .sidebar-item-container:not(.section-item) > .standard-sidebar-item .item-anchor {
	gap: 10px; padding: 0 10px; min-height: 32px; font-size: var(--gips-t-corps); }
body .body-sidebar-container.expanded .sidebar-items .sidebar-item-container:not(.section-item) .sidebar-item-label { font-size: var(--gips-t-corps);
	margin-left: 0; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; padding: 5px 0; }
body .body-sidebar-container.expanded .sidebar-items .sidebar-item-container:not(.section-item) .sidebar-item-icon,
body .body-sidebar-container.expanded .sidebar-items .sidebar-item-container:not(.section-item) .sidebar-item-icon svg { width: 16px; height: 16px; flex: none; }
body .body-sidebar-container.expanded .body-sidebar .nested-container .gips-icone-ajoutee { display: inline-flex; }
[data-gips-theme] body .body-sidebar .sidebar-items .sidebar-item-container:not(.section-item) > .standard-sidebar-item:not(.active-sidebar) .item-anchor {
	color: var(--gips-menu-texte); }
[data-gips-theme] body .body-sidebar .sidebar-items .sidebar-item-container:not(.section-item) > .standard-sidebar-item:not(.active-sidebar):hover {
	background: var(--gips-menu-survol); }
/* L'entrée active : blanche sur la marine (theme_gips.css), texte en gras, et un trait orange à gauche — elle se repère d'un coup d'œil. */
[data-gips-theme] body .body-sidebar-container.expanded .sidebar-items .sidebar-item-container:not(.section-item) > .standard-sidebar-item.active-sidebar {
	box-shadow: inset 3px 0 0 var(--gips-orange); }
/* « Paramètres », au pied de la liste : un filet, un peu d'air de part et d'autre. */
body .body-sidebar-container.expanded .body-sidebar .gips-pied-menu { margin-top: 6px; padding-top: 4px; }
/* Les nombres : pastilles de 20 px (11 px), alignées à droite ; l'orange porte le texte marine (lisible), comme les boutons. */
body .body-sidebar-container.expanded .body-sidebar .gips-compteur-menu { min-width: 20px; height: 20px; padding: 0 6px; }
[data-gips-theme] body .body-sidebar .gips-compteur.orange { color: var(--gips-bouton-texte, var(--gips-sur-couleur)); }

/* Le pied, sur une ligne : la pastille de version (plus petite : « DEV v4.000 · Revenir en PROD ») puis la personne (son avatar ; son
   nom et son adresse dans l'infobulle et dans son menu). Sans pastille (PROD), la personne garde son nom.
   Au téléphone (tiroir), le pied garde ses deux lignes : la place ne manque pas. */
[data-gips-theme] body .body-sidebar #gips-env-bascule.dev.dans-menu { background: var(--gips-menu-env-fond); color: var(--gips-menu-env-texte);
	border-radius: var(--gips-r-s); box-shadow: none; }
[data-gips-theme] body .body-sidebar-container:not(.expanded) .body-sidebar #gips-env-bascule.dev.dans-menu { margin: 6px 4px; padding: 4px 2px; }
@media (min-width: 768px) {
	body .body-sidebar-container.expanded .body-sidebar-bottom { display: flex; align-items: center; gap: 6px; padding: 2px 8px 2px;
		border-top: 1px solid var(--gips-filet); }
	[data-gips-theme] body .body-sidebar-container.expanded .body-sidebar-bottom { border-top-color: var(--gips-menu-filet); }
	body .body-sidebar-container.expanded .body-sidebar-bottom > .promotional-banners { display: none; }

	body .body-sidebar-container.expanded .body-sidebar #gips-env-bascule.dans-menu { flex: 1; min-width: 0; order: 1; margin: 0; padding: 3px 8px;
		gap: 4px; flex-wrap: nowrap; justify-content: flex-start; font-size: var(--gips-t-xs); line-height: 1.3; white-space: nowrap; }
	body .body-sidebar-container.expanded .body-sidebar #gips-env-bascule.dans-menu .fx-plein { display: none; }
	body .body-sidebar-container.expanded .body-sidebar #gips-env-bascule.dans-menu .fx-court { display: inline; }
	body .body-sidebar-container.expanded .body-sidebar #gips-env-bascule.dans-menu .fx-lien { margin-left: auto; }
	body .body-sidebar-container.expanded .body-sidebar-bottom .dropdown-navbar-user { order: 2; flex: 1; min-width: 0; margin: 0 !important; padding: 0; border-top: 0; }
	body .body-sidebar-container.expanded .body-sidebar-bottom #gips-env-bascule ~ .dropdown-navbar-user { flex: none; }
	body .body-sidebar-container.expanded .body-sidebar-bottom #gips-env-bascule ~ .dropdown-navbar-user .avatar-name-email { display: none; }
	body .body-sidebar-container.expanded .body-sidebar-bottom .dropdown-navbar-user .sidebar-user-button { min-height: 30px !important; }
}
[data-gips-theme] body .body-sidebar .dropdown-navbar-user .d-block + .d-block { color: var(--gips-menu-doux) !important; }

/* ===== 2. Les fiches : chaque partie en carte ================================================================================ */
/* Le fond de la fiche est celui de la page ; chaque partie (section de Frappe) est une carte : son titre en tête, un filet, son
   contenu. Une partie sans titre reste une carte. Les fiches gardent leurs onglets, leurs champs et leurs gestes. */
body[data-route^="Form/"] .form-layout, body[data-route^="Form/"] .form-page { background: transparent; }
body[data-route^="Form/"] .form-layout { padding-top: 4px; }
body[data-route^="Form/"] .form-page .form-section.card-section.visible-section {
	background: var(--card-bg); border: 1px solid var(--gips-filet); border-radius: var(--gips-r-l); margin: 0 0 18px;
	box-shadow: none; overflow: visible; }
body[data-route^="Form/"] .form-page .form-section.card-section.empty-section { border: 0; margin: 0; }
body[data-route^="Form/"] .form-page .form-section.card-section > .section-head { margin: 0; padding: 14px 18px;
	border-bottom: 1px solid var(--gips-filet-doux); font-size: var(--gips-t-l); font-weight: 400; color: var(--gips-texte-fort);
	display: flex; align-items: center; gap: 8px; }
body[data-route^="Form/"] .form-page .form-section.card-section > .section-head.collapsed { border-bottom: 0; }
body[data-route^="Form/"] .form-page .form-section.card-section > .section-body { padding: 14px 18px 8px; margin: 0; }
body[data-route^="Form/"] .form-page .form-section.card-section > .form-section-description { padding: 10px 18px 0; }
/* Au téléphone : les cartes prennent toute la largeur, leur contenu garde sa place (pas de retrait sur retrait). */
@media (max-width: 767px) {
	body[data-route^="Form/"] .form-page .form-section.card-section > .section-head { padding: 12px 12px; }
	body[data-route^="Form/"] .form-page .form-section.card-section > .section-body { padding: 8px 4px 4px; }
	body[data-route^="Form/"] .form-page .form-section.card-section.visible-section { margin-bottom: 12px; }
}
/* Les titres de champ de la carte : la petite capitale de la maquette, en gris. */
body[data-route^="Form/"] .form-page .form-section .frappe-control > .form-group > .control-label,
body[data-route^="Form/"] .form-page .form-section .frappe-control .clearfix > .control-label { color: var(--text-muted); }
/* Les onglets de la fiche : soulignés, sur le fond de la page (pas de bande de couleur). */
body[data-route^="Form/"] .form-tabs-list { background: transparent; border-bottom: 1px solid var(--gips-filet); }
/* La barre du haut (fil d'Ariane, titre, gestes) : blanche, un filet dessous — comme sur la maquette. */
body .page-head { background: var(--card-bg); border-bottom: 1px solid var(--gips-filet); }

/* Les en-têtes des fiches GIPS (Client, Ticket… : leurs scripts) : la carte de la maquette — filet, grand arrondi, pas d'ombre. */
body .fgcf, body .fg-tk-entete { border-color: var(--gips-filet); border-radius: var(--gips-r-l); box-shadow: none; }

/* ===== 3. La fiche Site ====================================================================================================== */
/* L'en-tête : une carte — 1re ligne le nom (24 px), l'état, les codes, les gestes ; 2e ligne les REPÈRES (client, adresse, station,
   contrat, suivi) séparés par des filets verticaux (fg_site.js, render_entete_site). La 1re ligne reste collée en haut au défilement. */
/* 24/10 (4.000, par métier) : 260 px — les libellés de télésurveillance (« Télésurveilleur et raccordement ») tiennent sur une ligne. */
body .fgsm-fiche { --fgsm-largeur: 260px; }
body .fgse { border-color: var(--gips-filet); border-radius: var(--gips-r-l); box-shadow: none; padding: 14px 22px; margin: 0;
	min-height: 64px; }
body .fgse:has(+ .fgse-reperes) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: transparent; }
body .fgse .fgse-nom { font-size: var(--gips-t-titre); font-weight: 400; color: var(--gips-texte-fort); }
body .fgse-reperes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 0 0 22px; padding: 2px 22px 18px;
	background: var(--card-bg); border: 1px solid var(--gips-filet); border-top: 0; border-radius: 0 0 var(--gips-r-l) var(--gips-r-l); }
body .fgse-reperes > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px 0;
	border-top: 1px solid var(--gips-filet-doux); border-left: 1px solid var(--gips-filet-doux); }
body .fgse-reperes > div:first-child { border-left: 0; padding-left: 0; }
body .fgse-reperes dt { font-size: var(--gips-t-xs); font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
body .fgse-reperes dd { margin: 0; font-size: var(--gips-t-corps); overflow-wrap: anywhere; }
body .fgse-reperes dd .fgse-doux { color: var(--text-muted); }
@media (max-width: 767px) {
	body .fgse { padding: 14px 16px; }
	body .fgse-reperes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; padding: 0 16px 14px; }
	body .fgse-reperes > div { border-left: 0; padding: 12px 0 0; }
}
body .fgse-reperes dd .icon { margin: 0 4px 0 0 !important; vertical-align: -2px; }

/* Le sous-menu : sa propre colonne, en carte ; ses groupes séparés par un filet ; l'entrée ouverte sur fond orange doux. */
@media (min-width: 768px) { body .fgsm-pane { padding-left: calc(var(--fgsm-largeur, 260px) + 22px); } }
body .fgsm .fgsm-liste { background: var(--card-bg); border: 1px solid var(--gips-filet); border-radius: var(--gips-r-l);
	padding: 12px 8px; gap: 2px; }
body .fgsm .fgsm-g { margin: 12px 0 4px; padding: 12px 10px 4px; border-top: 1px solid var(--gips-filet-doux); letter-spacing: .09em;
	font-weight: 400; }
body .fgsm .fgsm-g:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
body .fgsm .fgsm-e { min-height: 34px; padding: 6px 10px; font-size: var(--gips-t-corps); }
body .fgsm .fgsm-e.actif { font-weight: 700; }

/* « Synthèse » (ex-« L'essentiel ») : le bandeau UNIQUE des consignes provisoires (une carte, une ligne par consigne : en tête son état, sa nature et sa
   période sur un fond de couleur ; dessous son texte, où en est la station, ses gestes). */
body .fg-bref-bandeaux { margin: 0 0 18px; background: var(--card-bg); border: 1px solid var(--gips-filet); border-radius: var(--gips-r-l);
	overflow: hidden; }
body .fg-bref-bandeaux.rouge { border-color: color-mix(in srgb, var(--gips-rouge) 30%, var(--gips-filet)); }
body .fg-bref-bandeaux .fg-bref-bandeau { display: block; margin: 0; padding: 0; border-radius: 0; background: transparent; color: var(--text-color); }
body .fg-bref-bandeaux .fg-bref-bandeau + .fg-bref-bandeau { border-top: 1px solid var(--gips-filet-doux); }
body .fg-bref-bandeau .fg-bref-bt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 12px 16px;
	background: var(--gips-fond-orange); color: var(--gips-orange-texte); }
body .fg-bref-bandeau.rouge .fg-bref-bt { background: var(--gips-rouge-fond); color: var(--gips-rouge-texte); }
body .fg-bref-bandeau.bleu .fg-bref-bt { background: var(--gips-bleu-fond); color: var(--gips-bleu-texte); }
body .fg-bref-bandeau .fg-bref-bt .icon { margin: 0 !important; flex: none; }
body .fg-bref-bt .fg-bref-etat { font-size: var(--gips-t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
body .fg-bref-bt b { flex: 1 1 280px; font-size: var(--gips-t-corps); }
body .fg-bref-bt .fg-bref-periode { font-size: var(--gips-t-m); color: var(--text-muted); }
body .fg-bref-bandeau .fg-bref-bc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px; font-size: var(--gips-t-m); }
body .fg-bref-bc .fg-bref-texte { flex: 1 1 340px; margin: 0; line-height: 1.5; min-width: 0; }
body .fg-bref-bc .fg-bref-prol { flex-basis: 100%; }
body .fg-bref-bc .fg-bref-prol:empty { display: none; }
body .fg-bref-bc .fg-bref-voir { color: var(--gips-lien-fort); font-weight: 400; }

/* Les deux colonnes titrées (« Qui appeler, qui intervient » · « Le site et ses réglages ») : un titre en petites capitales suivi d'un
   filet, puis des cartes. */
body .fg-bref { gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
body .fg-bref-col { gap: 18px; }
body .fg-bref-titre { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--gips-t-s); font-weight: 400;
	letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
body .fg-bref-titre::after { content: ""; flex: 1; height: 1px; background: var(--gips-filet); }
/* Une carte : en-tête (titre 16 px · « Modifier » à droite), filet, contenu. */
body .fg-bref-b { padding: 0; border-color: var(--gips-filet); border-radius: var(--gips-r-l); font-size: var(--gips-t-m); }
body .fg-bref-b > .fg-bref-h { margin: 0; padding: 14px 18px; border-bottom: 1px solid var(--gips-filet-doux); font-size: var(--gips-t-l);
	text-transform: none; letter-spacing: 0; color: var(--gips-texte-fort); }
body .fg-bref-b > .fg-bref-h > .icon { display: none; }
body .fg-bref-b > .fg-bref-h .fg-bref-m { font-size: var(--gips-t-m); color: var(--gips-lien-fort); white-space: nowrap; }
body .fg-bref-b > .fg-bref-corps { padding: 12px 18px 14px; }
body .fg-bref-b .fg-bref-l { padding: 10px 0; border-top-color: var(--gips-filet-doux); align-items: center; }
body .fg-bref-b .fg-bref-corps > .fg-bref-l:first-child { padding-top: 0; }
body .fg-bref-b .fg-bref-n { width: 24px; height: 24px; background: var(--gips-bleu-fond); color: var(--gips-bleu-texte); }
body .fg-bref-b .fg-bref-c b { font-weight: 400; font-size: var(--gips-t-corps); }
body .fg-bref-b .fg-bref-kv { gap: 6px 12px; }
body .fg-bref-b .fg-bref-kv > span:nth-child(odd) { font-size: var(--gips-t-m); }
@media (max-width: 900px) { body .fg-bref { grid-template-columns: 1fr; } }

/* Les autres entrées du sous-menu (sections de la fiche) : des cartes comme en 2. — sans le titre répété du sous-menu. */
body .fgsm-fiche .form-page .form-section.card-section.visible-section { margin-bottom: 18px; }
/* L'essentiel est déjà fait de cartes : sa partie n'en est pas une (pas de carte dans la carte). */
body .fgsm-fiche .form-page .form-section.card-section.visible-section:has([data-fieldname="en_bref_html"]) { background: transparent;
	border: 0; }
body .fgsm-fiche .form-page .form-section.card-section:has([data-fieldname="en_bref_html"]) > .section-body { padding: 0; }
body .fgsm-fiche .form-page .form-section.card-section:has([data-fieldname="en_bref_html"]) .form-column { padding-left: 0; padding-right: 0; }

/* ===== 4. Les listes ========================================================================================================== */
/* La barre de recherche et de filtres sur le fond de la page ; le champ en 40 px, filet et grand arrondi. */
body[data-route^="List/"] .page-form { background: transparent; border: 0; }
@media (min-width: 768px) { body[data-route^="List/"] .page-form { padding: 14px 0 8px; gap: 8px; align-items: center; } }
body[data-route^="List/"] .fg-recherche input[type="search"] { height: 40px; border: 1px solid var(--gips-filet); border-radius: var(--gips-r-m);
	background: var(--card-bg); font-size: var(--gips-t-m); }
body[data-route^="List/"] .page-form .filter-section .btn, body[data-route^="List/"] .page-form .sort-selector .btn { height: 40px;
	border: 1px solid var(--gips-filet); background: var(--card-bg); }
body[data-route^="List/"] .page-form .filter-section .btn-group > .btn:first-child:not(:last-child),
body[data-route^="List/"] .page-form .sort-selector .btn-group > .btn:first-child:not(:last-child) { border-top-left-radius: var(--gips-r-m);
	border-bottom-left-radius: var(--gips-r-m); }
body[data-route^="List/"] .page-form .filter-section .btn-group > .btn:last-child,
body[data-route^="List/"] .page-form .sort-selector .btn-group > .btn:last-child { border-top-right-radius: var(--gips-r-m);
	border-bottom-right-radius: var(--gips-r-m); }
/* Les onglets d'état (filtres rapides) : un SEGMENT — une carte, l'onglet choisi en marine. */
body .fg-puces { display: flex; width: fit-content; max-width: 100%; gap: 4px; padding: 4px; margin: 4px 0 14px; background: var(--card-bg);
	border: 1px solid var(--gips-filet); border-radius: var(--gips-r-m); }
body .fg-puces .gips-onglet { height: 30px; padding: 0 12px; border: 0; border-radius: var(--gips-r-s); font-size: var(--gips-t-m);
	color: var(--text-color); background: transparent; }
body .fg-puces .gips-onglet:hover { background: var(--control-bg); }
body .fg-puces .gips-onglet.actif { background: var(--gips-menu-fond); color: var(--gips-sur-couleur); font-weight: 400; }
body .fg-puces .gips-onglet.actif .gips-compteur.gris { background: var(--gips-menu-champ); color: var(--gips-sur-couleur); }
/* Le tableau : une carte ; en-têtes de colonnes en petites capitales sur un fond teinté ; un filet entre les colonnes ; une ligne sur
   deux teintée ; les nombres en chiffres de même largeur (montants alignés à droite, comme Frappe les pose). */
body .frappe-list .result { background: var(--card-bg); border: 1px solid var(--gips-filet); border-radius: var(--gips-r-l); }
@media (min-width: 768px) { body .frappe-list .result { overflow: hidden; } }
body .frappe-list .result .list-row-head { background: var(--gips-tete-tableau); border-bottom: 1px solid var(--gips-filet); min-height: 42px;
	height: auto; padding-top: 0; padding-bottom: 0; }
body .frappe-list .result .list-row-head .list-row-col,
body .frappe-list .result .list-row-head .level-item,
body .frappe-list .result .list-row-head .list-subject span:not(.list-count) { font-size: var(--gips-t-xs); letter-spacing: .08em;
	text-transform: uppercase; color: var(--text-muted); font-weight: 400; }
body .frappe-list .result .list-row-head .list-count, body .frappe-list .result .list-row-head .list-count span { text-transform: none; letter-spacing: 0; }
body .frappe-list .result .list-row .level-left, body .frappe-list .result .list-row-head .level-left { align-self: stretch; align-items: stretch; }
body .frappe-list .result .list-row-col { align-self: stretch; display: flex; align-items: center; }
body .frappe-list .result .list-row-col + .list-row-col:not(.hide):not(.tag-col) { border-left: 1px solid var(--gips-filet-doux);
	padding-left: 14px; }
body .frappe-list .result .list-row-head .list-row-col + .list-row-col:not(.hide):not(.tag-col) { border-left-color: var(--gips-filet); }
body .frappe-list .result .list-row { border-bottom-color: var(--gips-filet-doux); font-size: var(--gips-t-m); font-variant-numeric: tabular-nums; }
body .frappe-list .result .list-row-container:nth-child(odd) > .list-row:not(.list-row-head) { background: var(--gips-ligne-alternee); }
body .frappe-list .result .list-row-container > .list-row:not(.list-row-head):hover { background: var(--control-bg); }
body .frappe-list .result .list-row-col.text-right { justify-content: flex-end; }
body .frappe-list .result .list-row .level-right, body .frappe-list .result .list-row-head .level-right { background: transparent; }
body .frappe-list .result .list-row .list-subject a { color: var(--gips-lien-fort); }
@media (max-width: 767px) {
	body .frappe-list .result .list-row-col + .list-row-col { border-left: 0; padding-left: 0; }
	body .fg-puces { width: auto; margin: 4px 0 10px; }
}

/* ===== 5. Ma journée ========================================================================================================== */
/* Le titre (« Bonjour … », la date au-dessus), les chiffres du jour en UNE bande séparée par des filets, des cartes à en-tête. */
body .fg-journee .fj-tete { flex-direction: column-reverse; align-items: flex-start; gap: 4px; margin: 10px 0 16px; }
body .fg-journee .fj-tete h3 { font-size: var(--gips-t-titre); font-weight: 400; color: var(--gips-texte-fort); }
body .fg-journee .fj-tete .fj-date { font-size: var(--gips-t-m); }
body .fg-journee .fj-cherche { border-color: var(--gips-filet); border-radius: var(--gips-r-m); height: 44px; }
body .fg-journee .fj-ind { gap: 0; background: var(--gips-tete-tableau); border: 1px solid var(--gips-filet-doux); border-radius: var(--gips-r-m);
	overflow: hidden; margin-bottom: 18px; }
body .fg-journee .fj-ind .fj-i { border: 0; border-radius: 0; background: transparent; padding: 10px 18px; box-shadow: inset 1px 0 0 var(--gips-filet-doux); }
body .fg-journee .fj-ind .fj-i:hover { background: var(--control-bg); }
body .fg-journee .fj-ind .fj-i:first-child { box-shadow: none; }
body .fg-journee .fj-ind .fj-i b { font-size: var(--gips-t-xl); font-weight: 400; color: var(--gips-texte-fort); }
body .fg-journee .fj-ind .fj-i.rouge b { color: var(--gips-rouge-texte); }
body .fg-journee .fj-ind .fj-i.orange b { color: var(--gips-orange-texte); }
body .fg-journee .fj-ind .fj-i small { font-size: var(--gips-t-s); }
body .fg-journee .fj-carte { border-color: var(--gips-filet); border-radius: var(--gips-r-l); margin-bottom: 18px; }
body .fg-journee .fj-carte > .fj-ch { padding: 14px 18px; border-bottom-color: var(--gips-filet-doux); font-size: var(--gips-t-l); font-weight: 400;
	color: var(--gips-texte-fort); }
body .fg-journee .fj-point { border-left-width: 1px; }
body .fg-journee .fj-mail { border-radius: var(--gips-r-l); margin-bottom: 18px; }
body .fg-journee .fj-prov { border-radius: var(--gips-r-l); margin-bottom: 18px; }
body .fg-journee .fj-g, body .fg-journee .fj-t, body .fg-journee .fj-dec, body .fg-journee .fj-tout, body .fg-journee .fj-rub {
	border-top-color: var(--gips-filet-doux); }
body .fg-journee .fj-g { padding: 12px 18px; }
body .fg-journee .fj-corps { padding: 12px 18px; }
/* Les rendez-vous du jour : l'heure, le site et l'objet, puis « Itinéraire · Appeler · Terminer » (Terminer en marine). */
body .fg-journee .fj-rdv-gestes .btn, body .fg-journee .fj-rdv-gestes a { border-radius: var(--gips-r-s); }

/* ===== 6. Mail ================================================================================================================ */
/* Trois colonnes nettes : les dossiers (nommés sur grand écran) sur un fond à peine teinté, la liste, le mail ouvert ; filets entre les
   colonnes ; le cadre est une carte. */
body .bcx .bcx-cadre { border-color: var(--gips-filet); border-radius: var(--gips-r-l); }
body .bcx .bcx-rail { background: var(--gips-tete-tableau); border-right-color: var(--gips-filet); }
body .bcx .bcx-centre { border-right-color: var(--gips-filet); }
body .bcx .bcx-entete { padding: 14px 16px; border-bottom-color: var(--gips-filet-doux); }
body .bcx .bcx-entete h3 { font-size: var(--gips-t-xl); font-weight: 400; color: var(--gips-texte-fort); }
body .bcx .bcx-recherche input { border-radius: var(--gips-r-s); border: 1px solid var(--gips-filet); }
body .bcx .bcx-ligne { padding: 12px 16px; border-bottom-color: var(--gips-filet-doux); }
body .bcx .bcx-ligne.non-lu { background: var(--gips-fond-orange); box-shadow: inset 3px 0 0 var(--gips-orange); }
body .bcx .bcx-ligne.non-lu::before { display: none; }
body .bcx .bcx-ligne.ouvert { box-shadow: inset 3px 0 0 var(--gips-orange); }
body .bcx .bcx-site { background: var(--gips-bleu-fond); color: var(--gips-bleu-texte); }
/* Le dossier ouvert (colonne nommée) : la carte blanche à filet de la maquette ; les titres de groupe en petites capitales. */
@media (min-width: 768px) {
	body .bcx .bcx-cadre.deplie .bcx-r { border-radius: var(--gips-r-s); border: 1px solid transparent; }
	body .bcx .bcx-cadre.deplie .bcx-r.actif { background: var(--card-bg); border-color: var(--gips-filet); color: var(--gips-texte-fort); font-weight: 700; }
	body .bcx .bcx-cadre.deplie .bcx-r.actif svg { stroke: var(--gips-texte-fort); }
	body .bcx .bcx-cadre.deplie .bcx-sec { font-weight: 400; letter-spacing: .09em; margin-top: 14px; padding-top: 12px;
		border-top: 1px solid var(--gips-filet-doux); }
}
/* Le mail ouvert : ses actions EN TÊTE (avant l'objet), puis l'objet, puis qui écrit et le site. */
body .bcx .bcx-doc { display: flex; flex-direction: column; padding: 18px 24px; }
body .bcx .bcx-doc > .bcx-barre { order: -1; margin: 0 0 12px; padding: 0 0 12px; border-top: 0; border-bottom-color: var(--gips-filet-doux); }
body .bcx .bcx-sujet { font-size: var(--gips-t-xl); font-weight: 400; color: var(--gips-texte-fort); }
/* 31/10 : le raccourci « Ctrl K » ne sert à rien sur un écran tactile (et se coupait sur deux lignes au téléphone). */
@media (hover: none), (max-width: 767px) { body .gips-rechercher kbd.gips-libelle { display: none; } }
/* 31/10 : les délais du ticket (« Première réponse au client : en retard… ») passent à la ligne au lieu de sortir de l'écran. */
body .form-message .indicator.whitespace-nowrap { white-space: normal; height: auto; }
body .form-message .row { margin-left: 0; margin-right: 0; }
body .form-message .row > [class*="col-"] { padding-left: 0; padding-right: 24px; }   /* la place de la croix */
/* 31/10 : un numéro de téléphone ne se coupe jamais en deux (« 02 35 00 01 / 01 » dans les correspondants de la fiche Site). */
body .fg-bref-tel a[href^="tel:"], body a[href^="tel:"] { white-space: nowrap; }