/* GIA EST COMME LE KIOSQUE, MAIS C'EST UN OUTIL TECHNIQUE, DE TRAVAIL (Vhiny, 25/10 ; règles d'e0).
   1. Le Kiosque donne l'IDENTITÉ : la marque, la palette, les polices, les filets, les coins
      des boutons. Il ne donne PAS la densité. Dans l'application (/v2 et modelling), la
      densité d'aujourd'hui reste : panneaux compacts, texte d'interface en Hanken 13 à 14 px
      (pas 15,5), interligne 1,4 à 1,5, nombres en tabular-nums, aucun espace éditorial ajouté.
   2. Le serif (Newsreader, « GIA Titre ») ne sert que pour la marque « GIA », les titres de
      dossier ou de fiche, et les titres de section. Jamais pour les libellés, les boutons,
      les légendes ni les nombres.
   3. Le 15,5 px sur 1,7 du Kiosque ne vaut que pour la prose longue (méthode, réserves,
      « À propos »).
   4. Aucune place utile perdue pour la carte : les barres et les panneaux ne sont pas plus
      hauts ni plus larges qu'aujourd'hui (mesurés avant et après, chiffres aux captures).
   5. La couleur sert à l'état (actif, sélection, focus) et aux actions, jamais à décorer.
   Taille du texte (arbitrage d'e0, 25/10) : texte d'interface en GIA Texte, 13 à 14 px, à
   l'intérieur de /v2 et de modelling ; l'accueil et « À propos » sont des pages à lire : leur
   prose est à 15,5 px sur 1,7, leurs étiquettes et liens à 11 et 13,4 px. */

/* LA MARQUE DE GIA, UNE PLATEFORME HODOLOGIC (v1.6.2 ; e0, Vhiny, 25/10).

   Une seule feuille, lue par les cinq pages pour la marque et le pied, et par
   l'accueil et « À propos » pour leur gabarit (PR 2). Ce qu'elle déclare :

   - les familles « GIA Texte » et « GIA Titre », par leurs variables --gia-texte
     et --gia-titre. Les @font-face qui les servent sont dans css/marque-police.css
     (propriétaire : 6e), qui porte la police de toutes les pages (e0, 25/10).
   - les jetons, préfixés --gia- pour ne heurter aucune variable des pages :
     l'accent bordeaux choisi par Vhiny le 25/10 et les couleurs inchangées
     de la charte. L'intérieur de /v2, de map et de modelling ne les lit pas :
     la rampe d'accès aux soins commence elle aussi par du bordeaux, et le
     basculement de l'application se mesure en v1.7.
   - deux composants : .gia-marque (le logo, « GIA », « une plateforme
     Hodologic », qui mène à l'accueil) et .gia-pied (le pied sombre).

   Contrastes WCAG, calculés le 25/10 : texte du pied 13,74:1, secondaire du
   pied 10,01:1, blanc sur bordeaux 10,20:1 (11,91 au survol), bordeaux sur
   papier 10,20:1, secondaire sur papier 5,48:1. test_marque_hodologic.py les
   recalcule depuis cette feuille. */


:root {
    /* LES JETONS DU KIOSQUE (Vhiny : « l'identité visuelle doit être comme le Kiosque »).
       PROVENANCE : ~/Desktop/hodologic/brand/gia-jetons-kiosque.css (hodologic-27, 25/10),
       recopié valeur pour valeur ; chaque ligne cite le fichier du Kiosque et sa ligne.
       K/ = ~/Desktop/learning/rag/frontend/src/styles/. Les polices font exception : nos
       familles servies s'appellent « GIA Titre » (Newsreader) et « GIA Texte » (Hanken
       Grotesk), déclarées dans css/marque-police.css (6e) ; --gia-titre et --gia-texte les
       nomment, et non Newsreader et Hanken directement. */
    --gia-titre: "GIA Titre", "Iowan Old Style", "Palatino Linotype", Georgia, serif;   /* K/base.css:23 */
    --gia-texte: "GIA Texte", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; /* K/base.css:24 */
    --gia-papier: #FFFFFF;          /* K/base.css:7 */
    --gia-brume: #F4F6F4;           /* K/base.css:8 */
    --gia-encre: #0F2A3A;           /* K/base.css:9 */
    --gia-encre-douce: #34495A;     /* K/base.css:10 */
    --gia-secondaire: #5B6B7A;      /* K/base.css:11 */
    --gia-filet: rgba(15, 42, 58, 0.13);        /* K/base.css:12 */
    --gia-filet-fort: rgba(15, 42, 58, 0.32);   /* K/base.css:13 */
    --gia-sable: #8A6A43;           /* K/base.css:41 */
    --gia-negatif: #A8433A;         /* K/base.css:45 */
    --gia-bordeaux: #7A1F2B;        /* K/accent.css:4, 5, 11, 42 */
    --gia-bordeaux-survol: #681A25; /* K/accent.css:12, 42 */
    --gia-bordeaux-voile: rgba(122, 31, 43, 0.08); /* K/accent.css:13, 42 */
    --gia-bordeaux-pale: #EBDDDF;   /* K/accent.css:6 */
    --gia-teinte: #F6EFF0;          /* K/accent.css:8 */
    --gia-heros: #F8F4F4;           /* K/accent.css:9 */
    --gia-sur-bordeaux: #F8F7F3;    /* K/base.css:17 ; K/accent.css:41 */
    --gia-pied: #3D1017;            /* K/accent.css:15 */
    --gia-pied-texte: #F3E9EA;      /* K/accent.css:16 */
    --gia-pied-second: #DCC5C8;     /* K/accent.css:17 */
    --gia-pied-accent: #C39AA0;     /* K/accent.css:7 */
    --gia-coin-bouton: 10px;        /* K/base.css:96 */
    --gia-coin-champ: 10px;         /* K/base.css:125 */
    --gia-coin-imbrique: 7px;       /* K/accent.css:53 */
    --gia-coin: 4px;                /* K/base.css:50 */
    --gia-coin-petit: 3px;          /* K/base.css:51 */
    --gia-coin-focus: 6px;          /* K/base.css:69 */
    --gia-barre: 68px;              /* K/base.css:25 */
    /* DEUX HAUTEURS D'EN-TÊTE (e0, 25/10) : celle du Kiosque pour les pages à lire, celle de
       l'outil pour l'application, qui rend la place à la carte. */
    --gia-barre-publique: var(--gia-barre);   /* accueil, « À propos » */
    --gia-barre-outil: 48px;                  /* /v2, modelling (map, retirée, avait 49) */
    --gia-largeur: 1240px;          /* K/base.css:74 */
    --gia-marge: clamp(16px, 4vw, 48px); /* K/base.css:74 */
    --gia-lecture: 720px;           /* K/base.css:26 */
    --gia-cible: 44px;              /* K/base.css:96 */
}

/* LA MARQUE. Le logo en SVG (gia-icone-petite.svg sous 48 px, la règle du
   dossier retenu), « GIA » en titre et « une plateforme Hodologic » dessous :
   empilés, ils tiennent en 140 px environ, ce qui laisse sa place à la barre
   à 320 px. Le sous-titre ne se cache à aucune largeur : c'est lui qui dit
   la marque. */
.gia-marque {
    display: inline-flex; align-items: center; gap: 12px;   /* K/base.css:133-134 */
    color: var(--gia-encre); text-decoration: none;
    flex-shrink: 0; min-width: 0;
}
/* Le logo moyen (gia-logo-moyen.svg, tel quel) en 30 × 30, comme le Kiosque (K/base.css:133-134 ;
   e0, 25/10). test_marque_hodologic.py vérifie l'adresse résolue et la taille dessinée. */
.gia-marque-logo { width: 30px; height: 30px; border-radius: 3px; display: block; flex-shrink: 0; }
.gia-marque-texte { display: flex; flex-direction: column; line-height: 1.1; white-space: nowrap; }
/* Le nom : serif 600 1,4 rem, encre, souligné de 2 px bordeaux à 3 px (K/base.css:135). */
.gia-marque-nom { font: 600 1.4rem/1 var(--gia-titre); color: var(--gia-encre);
    text-decoration: underline 2px var(--gia-bordeaux); text-underline-offset: 3px; }
.gia-marque-sous { font: 500 10.5px/1.2 var(--gia-texte); color: var(--gia-secondaire); letter-spacing: .01em; }
.gia-marque:hover .gia-marque-nom { color: var(--gia-bordeaux); }
.gia-marque .gia-marque-sous { margin-top: 4px; }
.gia-marque:focus-visible { outline: 2px solid var(--gia-bordeaux); outline-offset: 3px; border-radius: var(--gia-coin-focus); }
/* Sur un fond sombre (la barre de map et de modelling). */
.gia-marque.sur-sombre { color: #FFFFFF; }
.gia-marque.sur-sombre .gia-marque-sous { color: var(--gia-pied-second); }
.gia-marque.sur-sombre:hover .gia-marque-nom { color: var(--gia-pied-second); }

/* LA BARRE DE map ET DE modelling AU TÉLÉPHONE (e0, 25/10). La marque complète y
   demande 179 px : à 320 px, « Se connecter » de map finissait à 380 (coupé par la
   barre, sans défilement) ; à 390 px, le menu de modelling finissait à 401, même
   avec un nom court. Sous 400 px le sous-titre cède, comme dans la barre de /v2 ;
   « GIA » et le logo restent (73 px environ), et le nom du lien porte la marque
   entière. test_marque_hodologic.py mesure le bord droit de chaque élément. */
@media (max-width: 400px) {
    /* Et l'en-tête des pages publiques : à 320 et 390, « Ouvrir la carte » finissait à 415
       (mesuré par 96 sur la PR 2, 25/10). */
    .navbar .gia-marque-sous, header.gia-entete .gia-marque-sous { display: none; }
    .navbar .gia-marque { gap: 7px; }
}

/* L'EN-TÊTE UNIQUE DES CINQ PAGES (e0, retour de hodologic-27 et de Vhiny, 25/10).
   À gauche la marque ; puis la navigation (Carte, Dossiers, Modélisation, À propos), la
   page en cours soulignée de 2 px bordeaux ; un seul bouton bordeaux à droite. Chaque page
   garde son conteneur d'en-tête et ses identifiants (ses scripts les lisent) ; ce qui est
   commun est ici. Sous 900 px, la navigation passe dans un menu (js/entete.js). */
.gia-nav { display: flex; align-items: center; gap: 1.8rem; margin: 0 0 0 2rem; padding: 0; list-style: none; } /* K/base.css:136 */
.gia-nav a {
    font: 500 0.86rem/1 var(--gia-texte); color: var(--gia-encre-douce); text-decoration: none;  /* K/base.css:137 */
    padding: 6px 0; white-space: nowrap;
    background: linear-gradient(var(--gia-bordeaux), var(--gia-bordeaux)) 0 100% / 0 2px no-repeat;
    transition: background-size .25s, color .2s;
}
.gia-nav a:hover { color: var(--gia-encre); background-size: 100% 2px; }
.gia-nav a[aria-current="page"] { color: var(--gia-encre); background-size: 100% 2px; }
.gia-nav a:focus-visible { outline: 2px solid var(--gia-bordeaux); outline-offset: 3px; border-radius: var(--gia-coin-focus); }
/* « PREMIUM » : une étiquette neutre, pas un badge de couleur. */
.gia-etiquette {
    font: 500 10px/1 var(--gia-texte); letter-spacing: .06em; text-transform: uppercase;
    color: var(--gia-secondaire); border: 1px solid var(--gia-filet-fort); border-radius: 3px;
    padding: 2px 4px; margin-left: 6px; vertical-align: 1px;
}
.gia-menu-bouton {
    display: none; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0;
    height: 38px; min-width: 38px; padding: 0 12px; margin: 0;
    font: 500 0.84rem/1 var(--gia-texte); color: var(--gia-encre); background: transparent;
    border: 1px solid var(--gia-filet-fort); border-radius: var(--gia-coin-bouton); cursor: pointer;
}
.gia-menu-bouton:focus-visible { outline: 2px solid var(--gia-bordeaux); outline-offset: 2px; }
/* LES BOUTONS DE L'HABILLAGE : un principal bordeaux, un secondaire neutre contour encre. */
/* K/base.css:96-97 (44 px, .75rem 1.1rem, coin 10 px, 500 .9rem) ; K/accent.css:43-44. */
.gia-bouton-principal {
    /* L'outil de travail (règle 1) : 36 px et 14 px dans l'application, pas les 44 et 14,4 du Kiosque. */
    display: inline-flex; align-items: center; justify-content: center; min-height: 36px;
    font: 500 0.875rem/1 var(--gia-texte); color: var(--gia-sur-bordeaux); background: var(--gia-bordeaux);
    border: 1px solid var(--gia-bordeaux); border-radius: var(--gia-coin-bouton); padding: 0.55rem 1rem;
    cursor: pointer; white-space: nowrap; text-decoration: none; box-sizing: border-box;
}
.gia-bouton-principal:hover { background: var(--gia-bordeaux-survol); border-color: var(--gia-bordeaux-survol); }
.gia-bouton-principal:focus-visible, .gia-bouton-secondaire:focus-visible { outline: 2px solid var(--gia-bordeaux); outline-offset: 3px; }
.gia-bouton-secondaire {
    display: inline-flex; align-items: center; justify-content: center; min-height: 36px;
    font: 500 0.875rem/1 var(--gia-texte); color: var(--gia-encre); background: transparent;
    border: 1px solid var(--gia-filet-fort); border-radius: var(--gia-coin-bouton); padding: 0.55rem 1rem;
    cursor: pointer; white-space: nowrap; text-decoration: none; box-sizing: border-box;
}
/* LE BOUTON D'ACTION DE L'EN-TÊTE : 38 px, .6rem .95rem, .84rem (K/base.css:150). */
.gia-entete-action, .navbar .gia-bouton-principal.gia-entete-action {
    min-height: 38px; padding: 0.6rem 0.95rem; font-size: 0.84rem;
}
.gia-bouton-secondaire:hover { border-color: var(--gia-encre); }
@media (max-width: 900px) {
    .gia-menu-bouton { display: inline-flex; }
    .gia-nav { display: none; }
    .gia-nav.ouverte {
        display: flex; flex-direction: column; align-items: stretch; gap: 0;
        position: fixed; left: 0; right: 0; top: var(--gia-entete-h, 56px); margin: 0;
        padding: 8px 16px 12px; background: var(--gia-papier);
        border-bottom: 1px solid var(--gia-filet); box-shadow: 0 8px 18px rgba(15, 42, 58, .08);
        z-index: 3000;
    }
    .gia-nav.ouverte a { padding: 12px 0; font-size: 15px; border-bottom: 1px solid var(--gia-filet); background: none; }
    .gia-nav.ouverte a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--gia-bordeaux); padding-left: 10px; }
}

/* L'EN-TÊTE DES PAGES PUBLIQUES (accueil, « À propos ») : celui du Kiosque. Collant, papier à
   90 % flouté, filet bas 1 px, 68 px, écart 2 rem (K/base.css:131-132). Il remplace l'en-tête
   sombre posé sur la photo ; le corps de ces pages est à la PR 2 (96). */
header.gia-entete {
    position: sticky !important; top: 0 !important; left: auto !important; right: auto !important;
    z-index: 1000 !important; display: flex !important; align-items: center !important; gap: 2rem !important;
    height: var(--gia-barre-publique) !important; box-sizing: border-box !important; width: 100% !important;
    padding: 0 var(--gia-marge) !important; margin: 0 !important;
    background: color-mix(in srgb, var(--gia-papier) 90%, transparent) !important;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--gia-filet) !important; box-shadow: none !important;
}
header.gia-entete .gia-nav { margin: 0 auto 0 0; }
@media (max-width: 900px) { header.gia-entete { gap: 12px !important; } header.gia-entete .gia-menu-bouton { margin-left: auto; } }

/* MAP : la recherche devient une commande sur la carte (e0, 25/10). Elle était dans la barre ;
   css/02-layout.css la pose en static !important : ces règles, plus précises, l'emportent.
   body est une grille : en absolu, la recherche n'y prend aucune case. */
#map > .geocoder-wrap {
    /* Dans #map, au niveau des commandes de Leaflet (1000), SOUS les panneaux de map (1100),
       qui vivent dans le même conteneur : posée dans body, elle couvrait la liste du panneau
       de comparaison (test_ecran_390, 25/10). */
    position: absolute !important; z-index: 1000 !important;
    top: 10px !important; left: 50% !important; transform: translateX(-50%) !important;
    width: min(380px, calc(100% - 140px)) !important; max-width: none !important; margin: 0 !important;
}
#map > .geocoder-wrap .geocoder-inner {
    background: var(--gia-papier) !important; border: 1px solid var(--gia-filet-fort) !important;
    border-radius: var(--gia-coin-champ) !important; box-shadow: 0 2px 8px rgba(15, 42, 58, .10) !important;
}

/* La barre de map et de modelling : le bouton de connexion prend le bordeaux, la marge de
   la navigation ne pousse pas le bouton hors du cadre. */
.navbar .gia-bouton-principal { background: var(--gia-bordeaux) !important; color: var(--gia-sur-bordeaux) !important;
    border: 1px solid var(--gia-bordeaux) !important; border-radius: var(--gia-coin-bouton) !important;
    font: 500 0.84rem/1 var(--gia-texte) !important; min-height: 38px !important;
    padding: 0.6rem 0.95rem !important; box-shadow: none !important; }
.navbar .gia-bouton-principal:hover { background: var(--gia-bordeaux-survol) !important; border-color: var(--gia-bordeaux-survol) !important; }
.navbar .gia-nav { margin-right: auto; }

/* L'HABILLAGE DE map ET DE modelling (e0, 25/10) : en bordeaux ou en neutre ; les données gardent
   leurs couleurs. Les deux pages lisent les mêmes variables (css/01-theme.css, l'en-tête de
   modelling.html) : html:root, plus précis que :root, les remappe quel que soit l'ordre des
   feuilles. Les couleurs des couches (--station-color, --powerline-color, --pylon-color...)
   NE sont PAS touchées. Les écarts restants ont été relevés par test_marque_rendu.py, élément
   par élément, le 25/10. */
html:root {
    --text-primary: var(--gia-encre);
    --text-secondary: var(--gia-encre-douce);
    --accent-color: var(--gia-bordeaux);
    --accent-hover: var(--gia-bordeaux-survol);
    --bg-panel: var(--gia-brume);
    --border-color: var(--gia-filet);
}
/* Les titres, les valeurs et les nombres : l'encre. */
html body .panel-title, html body #dock-panel-title, html body .dock-panel h2, html body .group-title,
html body [id^="ap-"]:not(#ap-link):not(#ap-origin):not(#ap-icao), html body #user-name-display,
html body .footer-toggle-text, html body #footerToggleIcon, html body #pareto-km, html body #pareto-percent,
html body [id^="stat-"], html body .modelling-info-panel .panel-header, html body .modelling-info-panel strong,
html body .modelling-info-panel .panel-header span {
    color: var(--gia-encre) !important;
}
html body .modelling-info-panel .panel-header i { color: var(--gia-secondaire) !important; }
/* Le texte courant des panneaux : l'encre douce. */
html body .layer-label, html body .modelling-info-panel .panel-content p, html body .colorbar-label { color: var(--gia-encre-douce) !important; }
html body .dock-btn span { color: var(--gia-secondaire) !important; }
/* Les étiquettes et petits textes : le secondaire. */
html body .lbl, html body .panel-close, html body #ap-origin, html body #ap-icao, html body .ss-lbl,
html body .pareto-label, html body #pareto-total, html body .pareto-divider,
html body .modelling-info-panel .panel-content span { color: var(--gia-secondaire) !important; }
/* Les liens et les commandes discrètes : le bordeaux. */
html body .group-action-btn, html body #ap-link, html body .alerts-trends-link { color: var(--gia-bordeaux) !important; }
html body .group-action-btn:hover, html body #ap-link:hover, html body .alerts-trends-link:hover { color: var(--gia-bordeaux-survol) !important; }
/* Le dock de map : l'onglet actif en bordeaux voilé, pas en bleu ciel. */
html body .dock-btn.active, html body .dock-btn[aria-pressed="true"] {
    background: var(--gia-bordeaux-voile) !important; color: var(--gia-bordeaux) !important;
}
html body .dock-btn.active span, html body .dock-btn.active i { color: var(--gia-bordeaux) !important; }
/* LES BOUTONS POSÉS SUR LA CARTE : neutres, fond blanc et icône à l'encre, PAS bordeaux, pour
   qu'aucun ne se lise comme la rampe d'accès aux soins (e0, 25/10). */
html body .mobile-dock-fab button, html body .map-action-btn, html body #sidebarToggle {
    background: var(--gia-papier) !important; color: var(--gia-encre) !important;
    border: 1px solid var(--gia-filet-fort) !important; box-shadow: 0 2px 6px rgba(15, 42, 58, .12) !important;
}
html body .mobile-dock-fab button i, html body .map-action-btn i, html body #sidebarToggle i { color: var(--gia-encre) !important; }
/* L'attribution de la carte : un lien de l'habillage, à l'encre douce. */
html body .leaflet-control-attribution a { color: var(--gia-encre-douce) !important; }
/* LES FENÊTRES (connexion, contact, compte) de map, de modelling, de l'accueil et d'« À propos » :
   l'action principale en bordeaux, l'onglet actif en bordeaux, les libellés à l'encre
   (relevé de test_marque_rendu.py, fenêtres ouvertes, 25/10). */
html body .submit-btn, html body #login-btn, html body #signup-btn {
    background: var(--gia-bordeaux) !important; color: var(--gia-sur-bordeaux) !important;
    border: 1px solid var(--gia-bordeaux) !important; border-radius: var(--gia-coin-bouton) !important;
    font-family: var(--gia-texte); font-weight: 500;
}
html body .submit-btn:hover, html body #login-btn:hover, html body #signup-btn:hover { background: var(--gia-bordeaux-survol) !important; border-color: var(--gia-bordeaux-survol) !important; }
html body .tab-btn { color: var(--gia-encre-douce) !important; background: transparent !important; }
html body .tab-btn.active { color: var(--gia-sur-bordeaux) !important; background: var(--gia-bordeaux) !important; border-color: var(--gia-bordeaux) !important; }
html body #forgot-password-link, html body .modal-content a:not(.gia-bouton-principal) { color: var(--gia-bordeaux) !important; }
html body .modal-content h2, html body .modal-content h3 { color: var(--gia-encre) !important; }
html body .modal-content label { color: var(--gia-encre-douce) !important; }
html body #profile-role { color: var(--gia-encre) !important; background: var(--gia-brume) !important; }
html body #request-admin-btn {
    background: transparent !important; color: var(--gia-encre) !important;
    border: 1px solid var(--gia-filet-fort) !important; border-radius: var(--gia-coin-bouton) !important;
}

/* MODELLING DANS LE LANGAGE DE /v2 (e0, après Vhiny, 25/10 : « ni le Kiosque ni /v2, un tableau
   de bord SaaS »). CSS seulement, aucune fonction touchée ; body.gia-modelling borne ces règles à
   la page (map porte aussi .sidebar et .group-title). Les mesures de place sont les mêmes avant et
   après (la colonne garde ses 320 px ; la carte est dessous). */
@media (min-width: 769px) {
    /* La colonne : comme la pile de /v2, papier, collée au bord, un filet à droite. */
    body.gia-modelling .sidebar {
        margin: 0 !important; height: 100% !important; border-radius: 0 !important;
        border: 0 !important; border-right: 1px solid var(--gia-filet) !important;
    }
}
body.gia-modelling .sidebar {
    background: var(--gia-papier) !important; box-shadow: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding: 16px !important;
}
/* L'EN-TÊTE DE L'OUTIL : 48 px comme /v2, et non 64 (e0, 25/10) ; les 16 px vont à la carte.
   modelling écrit 64 px en dur à quatre endroits : la grille, la colonne et la carte au téléphone. */
body.gia-modelling { grid-template-rows: var(--gia-barre-outil) 1fr !important; }
body.gia-modelling .navbar { height: var(--gia-barre-outil) !important; min-height: 0 !important; box-sizing: border-box !important; }
@media (max-width: 768px) {
    body.gia-modelling .sidebar { top: var(--gia-barre-outil) !important; height: calc(100% - var(--gia-barre-outil)) !important; }
    body.gia-modelling #map { height: calc(100vh - var(--gia-barre-outil)) !important; }
}
/* Les titres de groupe : les étiquettes de /v2 (« DOSSIERS », « PILE DES COUCHES »). */
body.gia-modelling .group-title {
    font: 500 11px/1.2 var(--gia-texte) !important; letter-spacing: 0.1em !important;
    text-transform: uppercase; color: var(--gia-encre-douce) !important;
}
/* « Tout / Aucun » : des liens discrets ; le bordeaux reste à l'état. */
body.gia-modelling .group-action-btn {
    color: var(--gia-encre-douce) !important; font: 400 11px/1.2 var(--gia-texte) !important;
    background: none !important; padding: 2px 4px !important;
}
body.gia-modelling .group-action-btn:hover { text-decoration: underline; text-underline-offset: 2px; color: var(--gia-encre) !important; background: none !important; }
/* Les quatre actions de la colonne en SECONDAIRE : pas de pavés bordeaux empilés. */
body.gia-modelling #btn-estimate-pop, body.gia-modelling #btn-analyze-density, body.gia-modelling #btn-print {
    background: transparent !important; color: var(--gia-encre) !important;
    border: 1px solid var(--gia-filet-fort) !important; border-radius: var(--gia-coin-bouton) !important;
    font: 500 14px/1.2 var(--gia-texte) !important; min-height: 36px !important; box-shadow: none !important;
}
body.gia-modelling #btn-estimate-pop:hover, body.gia-modelling #btn-analyze-density:hover, body.gia-modelling #btn-print:hover { border-color: var(--gia-encre) !important; }
body.gia-modelling #btn-estimate-pop i, body.gia-modelling #btn-analyze-density i, body.gia-modelling #btn-print i { color: var(--gia-encre-douce) !important; }
/* La carte d'information et le bandeau du bas : papier, filet, coins de 4 px, sans ombre. */
body.gia-modelling .modelling-info-panel, body.gia-modelling .footer-stats {
    background: var(--gia-papier) !important; color: var(--gia-encre) !important;
    border: 1px solid var(--gia-filet) !important; border-radius: var(--gia-coin) !important;
    box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
/* Les chiffres du bandeau : tabulaires, 20 px au plus, à l'encre ; ils ne dominent plus. */
body.gia-modelling .pareto-value {
    font: 600 20px/1.1 var(--gia-texte) !important; font-variant-numeric: tabular-nums;
    color: var(--gia-encre) !important;
}

/* LE PIED des pages publiques : une marque, une ligne, un lien.
   Positionné, au-dessus du fond : « À propos » de main pose un fond fixe en
   z-index 0, qui recouvrait un pied resté dans le flux (mesuré le 25/10). */
.gia-pied {
    position: relative; z-index: 1;
    /* CLAIR, comme le Kiosque (K/base.css:155 ; e0, 25/10) : brume et filet en haut. */
    background: var(--gia-brume); color: var(--gia-encre); border-top: 1px solid var(--gia-filet);
    font: 400 14px/1.5 var(--gia-texte);
    padding: 32px clamp(16px, 4vw, 48px);
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px;
}
.gia-pied-marque { display: flex; align-items: center; gap: 10px; margin: 0; }
.gia-pied-marque img { width: 32px; height: 32px; border-radius: 3px; display: block; }
.gia-pied-nom { font: 600 1.4rem/1 var(--gia-titre); color: var(--gia-encre); text-decoration: underline 2px var(--gia-bordeaux); text-underline-offset: 3px; }
.gia-pied-ligne { margin: 0; flex: 1 1 260px; min-width: 0; }
.gia-pied-liens { margin: 0; color: var(--gia-secondaire); }
.gia-pied a { color: var(--gia-encre-douce); text-decoration: underline; text-underline-offset: 3px; }
.gia-pied a:hover { color: var(--gia-bordeaux); }
.gia-pied a:focus-visible { outline: 2px solid var(--gia-bordeaux); outline-offset: 3px; border-radius: var(--gia-coin-focus); }

/* LE LIEN DE LA MARQUE dans un pied d'application (le #pied de /v2, la
   fenêtre Contact de map et de modelling) : une ligne, pas une barre. */
.gia-lien-marque { font: 500 12px/1.4 var(--gia-texte); color: var(--gia-secondaire); }
.gia-lien-marque a { color: var(--gia-bordeaux); text-underline-offset: 2px; }