/* ============================================================
   geostudio.css — Lémap (nom affiché : PB.geostudio.NOM), socle et lot 1. 20/10/2026.
   Apparence = la maquette v7 validée par Mika (colonne des modules, carte + panneau, cartons, barres, étiquettes).
   Couleurs : UNIQUEMENT celles du HUB (css/style.css, css/geomarketing.css). Classes préfixées « gs- » : elles marchent aussi
   HORS de la page (les Fenêtres du Deck recopient les blocs dans .pb-fen), d'où les variables posées sur :root.
   ============================================================ */
:root {
  --gs-logo-k: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADkAAAA4CAMAAABwmqASAAAASFBMVEUJATQAAAD09fP39/crJUzx8fBUUGzt7O50cIeUkaKXlp+em6yop7NCPWBfW3OAfI9xcXB4dIy3tcE5OV2BfZK5uMOxr8FWU2hD7rpaAAAAGHRSTlP+ABld+pnu2vXfM55W9ZmjBbCkCOjNdmG9iBxDAAADGklEQVR42p1X6XqjMAy0JctHDDRH233/N90RBCyzJSWrf/bnQbc0OL8IJ5liDEZiLElYOJXlProqOBORJ0W4GUfEOQS3l1AkRXsRv1K64vWCxEeIy7+wBbu/iImBU6iDbuHozktRe6+KhAT3jkQ4D7DzO1dOSGCGvdBZ3LsSBVAnEt5Gzr46fl8l7B2EnA1PyGWVz9juQyx/PsoYOnthbbDmk+dVZA1cZhKksF2oJHLFJFm0Nh6Px/VBFzyNT5+WzEsXy5zcZ7MdtbQpTMxU9bqyOD1p6ZiYhORyS7CnVMst3yBVCDbCkUyEOq8of0AvtBkcqkUSNacDsccpDDBVxmdQiOr2YOp0+lbhWieMU4GdYYsnt0/n3tpLQwrNSFfKuN7d4Wr8Gel/QHaZIGrPXyH3dXlHkE7ppLQrOeSbTiCRwNTpDF+IUDqKrUUK504lUkz8+XM+LXIUKXtTPQ+mu4+QMXUaQ0U3sO0Of4j87DWyTjrj952OkH1Uq/bLEOwUO4UMd53lNfSfOoPEdPYmk8+cHfppA5TVzS7WRQ6RoYttlERdmoLIYT6p04FJg6SYm3qoc8RIiDuDyeyfSK8qvltUarCn8HsNzf3JZbf/2sVx3apODE4bpol82hovTK906pzMNomYqsaBF0ilARZaxTh6rHMmAXgq2eTwyuHXmRBhbIraIVs3j8hpmwm3HjmYSoA6bQlYnJ91j+C20VQMUujKUxxniR/CnFS1dnQFHRq/ddG1AJm9MsdEd1KSJKLrZFYgKWHFDFoHnp2toWk73Ojy8E3WfclpCTIY1N2khFxtJ/AGI+u2nDfRzNMs3Rq6nR2mgYdV/rSFl8HZ2JWuATATumYyhLGfJ+PYX8B5x+k/uEkG53RM+X1SszDG3fo4RfzooryPdea/A45pJsdO01/fAgooz5MZM32fppth0vrSBDulSQBPB+9iv0OjFuZSKcrjaSbymulgEgu7KkjHPcftDE60cvHnHwDRFWWKEq/1Y5Fpwo8CqvGqfE+kTjc9J7n4J/9f/x30OA+BVZa75Yq0TUjn7fxqreu/dUAYiwV+kt4AAAAASUVORK5CYII=");   /* 21/10 : le logo « K » de Kiabi envoyé par Mika (points Kiabi de la carte, puces, pastilles) */
  --gs-kiabi: #4a7bd0; --gs-zone: #f0a911; --gs-sous: #e0526e; --gs-carte: #eef1f6; --gs-bleu-pale: #eaf0fa;
  --gs-ok-encre: #12784a; --gs-att-encre: #8a5c04; --gs-risque-encre: #b13650;
}
.gs { --gs-gap: 14px; color: var(--text); font-size: 14px; line-height: 1.5; padding: 4px 2px 24px; }
.gs [hidden], [hidden].gs-sugg, .gs-deck-proxies { display: none !important; }
.gs h1, .gs h2, .gs h3, .gs h4 { margin: 0; color: var(--text); text-wrap: balance; }
.gs p { margin: 0; }

/* ---------- en-tête ---------- */
.gs-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 24px; margin-bottom: 12px; }
.gs-tete__sur { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.gs-tete h1 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin-top: 2px; }
.gs-tete__sous { color: var(--text-2); margin-top: 4px; max-width: 78ch; }
.gs-legende { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.gs-legende__t { font-size: 12px; color: var(--text-2); margin-right: 4px; }

/* ---------- étiquettes RÉEL / ESTIMÉ / EXEMPLE ---------- */
.gs-b { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; white-space: nowrap; vertical-align: middle; line-height: 1.5; }
.gs-b--reel { background: var(--success-soft); color: var(--gs-ok-encre); }
.gs-b--estime { background: var(--warning-soft); color: var(--gs-att-encre); }
.gs-b--inconnu { background: var(--danger-soft); color: var(--gs-risque-encre); }
.gs-b--exemple { color: var(--gs-risque-encre); background: repeating-linear-gradient(135deg, var(--danger-soft) 0 6px, var(--surface) 6px 9px); border: 1px solid var(--danger); }
.gs-b--avenir { background: var(--surface-2); color: var(--text-3); border: 1px dashed var(--border-2); }
.gs-ex { text-decoration: underline dashed var(--danger); text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------- barre de la zone choisie + recherche ---------- */
.gs-barre-zone { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-bottom: 12px; }   /* la barre « zone choisie + recherche » (≠ .gs-barre, une ligne des graphiques) */
.gs-zonebar { flex: 1 1 420px; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 7px 12px; box-shadow: var(--shadow-sm); min-height: 44px; }
.gs-zonebar__t { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.gs-zonebar__n { color: var(--text-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.gs-zonebar__vide { color: var(--text-2); font-size: 13px; }
.gs-cherche { position: relative; flex: 0 1 340px; min-width: 220px; }
.gs-sugg { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); padding: 4px; max-height: 340px; overflow: auto; }
.gs-sugg button { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; text-align: left; padding: 7px 9px; border-radius: 6px; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; }
.gs-sugg button:hover, .gs-sugg button:focus-visible { background: var(--primary-soft-2); color: var(--primary-dark); }
.gs-sugg small { color: var(--text-3); }
.gs-sugg__vide { padding: 8px 10px; color: var(--text-3); font-size: 13px; }
.gs-pastille { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--primary); opacity: .7; }
.gs-pastille--kiabi { border-radius: 0; width: 13px; height: 13px; background: var(--gs-logo-k) center / contain no-repeat; opacity: 1; }
.gs-pastille--pole { border-radius: 3px; background: var(--primary-dark); opacity: 1; }
.gs-pastille--prendre { background: var(--gs-zone); opacity: 1; }
.gs-etat { font-size: 12px; color: var(--text-2); }

/* ---------- Lémap : colonne des modules + zone de travail ---------- */
.gs-studio { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; }
.gs-modules { position: sticky; top: 12px; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; box-shadow: var(--shadow-sm); }
.gs-modules__titre { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); padding: 6px 10px 4px; }
#gs-rail { display: flex; flex-direction: column; gap: 2px; }
.gs-mod-btn { display: flex; align-items: center; gap: 10px; border: 0; background: none; text-align: left; padding: 8px 10px; border-radius: 9px; color: var(--text-2); font: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer; }
.gs-mod-btn svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gs-mod-btn:hover { background: var(--primary-soft-2); color: var(--primary); }
.gs-mod-btn.is-active, .gs-mod-btn[aria-current="true"] { background: var(--primary-soft); color: var(--primary-dark); box-shadow: inset 3px 0 0 var(--primary); }
.gs-mod-btn small { display: block; font-size: 11px; font-weight: 500; color: var(--text-3); }
.gs-zone-modules { min-width: 0; }
.gs-module { min-width: 0; }
.gs-mod-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px 18px; margin-bottom: 12px; }
.gs-mod-tete h2 { font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.gs-mod-tete p { color: var(--text-2); margin-top: 3px; max-width: 74ch; }
.gs-srcs { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- cartons, grilles ---------- */
.gs-carton { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-sm); min-width: 0; }
.gs-carton h3, .pb-fen .gs-carton h3, [data-gs-bloc] > h3 { font-size: 15px; font-weight: 700; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.gs-carton h4 { font-size: 13px; font-weight: 700; margin: 12px 0 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gs-aide { font-size: 12.5px; color: var(--text-2); font-weight: 400; }
.gs-veut-dire { margin-top: 10px; padding: 9px 12px; background: var(--primary-soft-2); border-radius: var(--radius-sm); font-size: 13px; color: var(--text); }
.gs-veut-dire b { color: var(--primary-dark); }
/* Le VERDICT en tête de chaque écran (lot 25) : une phrase, 3 raisons, le risque n° 1 ; le détail vient après. */
.gs-verdict { margin: 0 0 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: var(--radius-sm); }
.gs-verdict__phrase { font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.4; }
.gs-verdict__phrase .gs-b { vertical-align: 2px; margin-right: 4px; white-space: normal; max-width: 100%; }
.gs-verdict__raisons { margin: 6px 0 0; padding-left: 20px; color: var(--text-2); font-size: 13px; }
.gs-verdict__raisons li { margin: 2px 0; font-variant-numeric: tabular-nums; }
.gs-verdict__risque { margin-top: 6px; font-size: 13px; color: var(--text); }
.gs-verdict__risque b { color: var(--gs-risque-encre); margin-right: 4px; }
/* « Ce que vous voyez / comment le lire » (lot 25 bis) */
.gs-lire { margin: 0 0 10px; padding: 8px 12px; background: var(--primary-soft-2); border-radius: var(--radius-sm); font-size: 13px; color: var(--text-2); line-height: 1.45; }
.gs-lire p { margin: 0; } .gs-lire p + p { margin-top: 3px; } .gs-lire b { color: var(--text); margin-right: 4px; }
/* la légende d'une couche allumée, sous celle des communes ; les tranches des seuils fixes */
.gs-leg-couche { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--border); } .gs-leg-couche > b { display: block; font-size: 12px; margin-bottom: 2px; }
.gs-legendes { margin-top: 10px; font-size: 12.5px; } .gs-legendes > summary { cursor: pointer; font-weight: 700; color: var(--text-2); }
.gs-bornes--seuils { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; font-size: 10.5px; text-align: center; }
.gs-grille2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gs-gap); }
.gs-travail { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--gs-gap); align-items: start; }
.gs-pile { display: flex; flex-direction: column; gap: var(--gs-gap); min-width: 0; }
.gs-panneau { max-height: calc(100vh - 150px); overflow: auto; padding-right: 2px; }
.gs-bandeau { display: flex; gap: 8px; align-items: flex-start; border-radius: var(--radius-sm); padding: 8px 10px; margin-bottom: 8px; font-size: 12.5px; }
.gs-bandeau--estime { background: var(--warning-soft); color: var(--gs-att-encre); border: 1px solid var(--warning); }
.gs-fiche__mod { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }

/* ---------- la carte ---------- */
.gs-carte { position: relative; isolation: isolate; height: clamp(440px, calc(100vh - 290px), 900px); background: var(--gs-carte); border: 1px solid var(--border-2); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); touch-action: none; cursor: grab; user-select: none; outline: none; }
.gs-carte:focus-visible { box-shadow: 0 0 0 2px var(--primary), var(--shadow-md); }
.gs-carte--glisse { cursor: grabbing; }
.gs-carte--main { cursor: pointer; }
.gs-carte--capte { cursor: crosshair; }
.gs-carte canvas { position: absolute; left: 0; top: 0; display: block; pointer-events: none; }
.gs-carte__tuiles { filter: saturate(.9) brightness(1.02); opacity: 1; }   /* le fond de carte en COULEURS (Mika, 20/10 21 h 19) */
.gs-carte__pouls { position: absolute; left: 0; top: 0; z-index: 2; border-radius: 50%; border: 3px solid var(--primary-dark); pointer-events: none; box-sizing: border-box; }
.gs-carte__pouls::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 3px solid var(--primary-dark); animation: gsPouls 1.5s ease-out infinite; }
@keyframes gsPouls { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gs-carte__pouls::after { animation: none; } }
.gs-carte__zoom { position: absolute; top: 10px; left: 10px; z-index: 3; display: flex; flex-direction: column; gap: 4px; }
.gs-carte__zoom button { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border-2); background: var(--surface); color: var(--text); font-size: 17px; font-weight: 700; cursor: pointer; box-shadow: var(--shadow-sm); padding: 0; }
.gs-carte__zoom button:hover { color: var(--primary); border-color: var(--primary); }
.gs-carte__etat { position: absolute; z-index: 3; top: 10px; left: 52px; right: 10px; width: max-content; max-width: calc(100% - 64px); padding: 5px 11px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-sm); font-size: 12.5px; color: var(--text-2); }
.gs-carte__etat--estime { background: var(--warning-soft); color: var(--gs-att-encre); border: 1px solid var(--warning); border-radius: 10px; }
.gs-carte__etat--erreur { background: var(--danger-soft); color: var(--gs-risque-encre); border: 1px solid var(--danger); border-radius: 10px; }
.gs-carte__leg { position: absolute; z-index: 3; right: 10px; bottom: 26px; max-width: min(300px, calc(100% - 20px)); background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 7px 10px; font-size: 11.5px; color: var(--text-2); box-shadow: var(--shadow-sm); }
.gs-carte__leg b { color: var(--text); font-weight: 700; }
.gs-ech { display: flex; gap: 2px; margin: 4px 0 2px; }
.gs-ech i { width: 26px; height: 9px; border-radius: 2px; background: var(--primary); }
.gs-bornes { display: flex; justify-content: space-between; gap: 6px; font-variant-numeric: tabular-nums; }
.gs-carte__km { position: absolute; z-index: 3; left: 10px; bottom: 26px; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; padding: 3px 8px; font-size: 11px; color: var(--text); font-variant-numeric: tabular-nums; }
.gs-carte__km i { display: block; height: 3px; background: var(--text); border-radius: 2px; margin-bottom: 2px; }
/* La bulle de la carte (22/10) : accrochée à un point, au-dessus */
.gs-carte__bulle { position: absolute; left: 0; top: 0; z-index: 5; width: max-content; max-width: min(320px, calc(100% - 12px)); background: var(--surface); color: var(--text); border: 1px solid var(--border-2); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); padding: 10px 30px 10px 12px; font-size: 13px; line-height: 1.4; }
.gs-carte__bulle b { display: block; margin-bottom: 3px; } .gs-carte__bulle p { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.gs-carte__bulle-x { position: absolute; top: 3px; right: 5px; border: 0; background: none; font: inherit; font-size: 17px; line-height: 1; color: var(--text-2); cursor: pointer; padding: 3px 5px; }
/* mise: "carte" (22/10, Mika) : la carte en grand ; les blocs du panneau se lisent en Fenêtres du Deck. Sous 1 024 px : comme avant (blocs sous la carte). */
@media (min-width: 1024px) { .gs-mise-carte .gs-travail { grid-template-columns: minmax(0, 1fr); } .gs-mise-carte .gs-panneau { display: none; } }
.gs-carte__tip { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; background: var(--text); color: var(--surface); font-size: 12px; padding: 5px 9px; border-radius: 7px; max-width: 280px; box-shadow: var(--shadow-md); }
.gs-carte__osm { position: absolute; z-index: 3; right: 6px; bottom: 4px; font-size: 10px; color: var(--text-3); background: rgba(255, 255, 255, .75); border-radius: 4px; padding: 0 4px; }

/* ---------- couches (puces) ---------- */
.gs-puces { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.gs-puces--avenir { margin-top: -2px; }
.gs-puce { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border-2); background: var(--surface); color: var(--text-2); border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.gs-puce:hover { border-color: var(--primary); color: var(--primary); }
.gs-puce[aria-pressed="true"] { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-dark); }
.gs-puce[disabled] { cursor: default; color: var(--text-3); border-style: dashed; background: var(--surface-2); }
.gs-puce[disabled]:hover { border-color: var(--border-2); color: var(--text-3); }
.gs-puce__n { font-size: 11px; font-weight: 500; color: var(--text-3); }
.gs-puce__ic { --gs-puce: var(--primary); width: 12px; height: 12px; flex: none; display: inline-block; background: var(--gs-puce); }
.gs-puce__ic--rond { border-radius: 50%; opacity: .75; }
.gs-puce__ic--carre { border-radius: 3px; }
.gs-puce__ic--losange { transform: rotate(45deg) scale(.8); }
.gs-puce__ic--goutte { border-radius: 50% 0 50% 50%; transform: rotate(-45deg) scale(.85); }
.gs-puce__ic--anneau { background: var(--surface); border: 2px solid var(--gs-puce); border-radius: 50%; }
.gs-puce__ic--logo-k { background: var(--gs-logo-k) center / contain no-repeat; width: 14px; height: 14px; }
.gs-puce__ic--tirets { background: var(--primary-soft); border: 1.5px dashed var(--primary-dark); border-radius: 3px; }
.gs-puce__ic--gris { background: var(--border-2); border-radius: 50%; }

/* ---------- champs, boutons ---------- */
.gs-champ { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gs-champ label { font-size: 12px; font-weight: 600; color: var(--text-2); }
.gs-champs { display: grid; gap: 10px; }
.gs-champs--ligne { grid-template-columns: minmax(0, 1fr) auto; align-items: end; margin-bottom: 10px; }
.gs-input { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--border-2); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; }
.gs-input:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.gs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--primary); background: var(--primary); color: var(--surface); border-radius: var(--radius-sm); padding: 8px 14px; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; }
.gs-btn:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.gs-btn--clair { background: var(--surface); color: var(--primary-dark); border-color: var(--border-2); }
.gs-btn--clair:hover { background: var(--primary-soft-2); border-color: var(--primary); color: var(--primary-dark); }
.gs-btn--petit { padding: 4px 10px; font-size: 12px; }
.gs-x { border: 0; background: none; color: var(--text-3); font-size: 15px; cursor: pointer; padding: 2px 6px; border-radius: 6px; line-height: 1; }
.gs-x:hover { color: var(--danger); background: var(--danger-soft); }
.gs-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.gs-segments { display: flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 3px; }
.gs-segments button { flex: 1; border: 0; background: none; padding: 7px 10px; border-radius: 8px; font: inherit; font-weight: 700; font-size: 12.5px; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.gs-segments button[aria-pressed="true"] { background: var(--surface); color: var(--primary-dark); box-shadow: var(--shadow-sm); }

/* ---------- tableaux ---------- */
.gs-defile { overflow-x: auto; max-width: 100%; }
.gs-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.gs-table th, .gs-table td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.gs-table th { font-size: 11.5px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.gs-table td.n, .gs-table th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gs-table--fiche td { padding: 5px 4px; }
.gs-table--cmp td:first-child { color: var(--text-2); }
.gs-table--acces th, .gs-table--acces td { padding: 7px 5px; }
.gs-table td.gs-meilleur { background: var(--primary-soft-2); color: var(--primary-dark); font-weight: 700; }
.gs-table tr.gs-cliq { cursor: pointer; }
.gs-table tr.gs-cliq:hover td { background: var(--primary-soft-2); }

/* ---------- chiffres clés, barres, pastilles ---------- */
.gs-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.gs-kpi { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; min-width: 0; }
.gs-kpi__v { font-size: 20px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.gs-kpi__l { font-size: 12px; color: var(--text-2); }
.gs-kpi__s { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.gs-barres { display: flex; flex-direction: column; gap: 7px; }
.gs-barre { display: grid; grid-template-columns: minmax(90px, 38%) minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 12.5px; }
.gs-barre--cliquable { cursor: pointer; border-radius: 6px; }
.gs-barre--cliquable:hover .gs-barre__nom { color: var(--primary); }
.gs-barre.is-active .gs-barre__nom { color: var(--primary-dark); font-weight: 700; }
.gs-barre__nom { color: var(--text-2); min-width: 0; overflow-wrap: anywhere; }
.gs-barre__piste { position: relative; height: 12px; background: var(--border); border-radius: 999px; overflow: hidden; }
.gs-barre__piste i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--primary); }
.gs-barre__piste i.ref { background: var(--text-3); opacity: .55; top: 7px; height: 5px; bottom: auto; }
.gs-barre__piste i.k { background: var(--gs-kiabi); }
.gs-barre__v { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 52px; text-align: right; }
.gs-cle-barres { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11.5px; color: var(--text-3); margin-bottom: 8px; }
.gs-cle-barres i { display: inline-block; width: 14px; height: 6px; border-radius: 3px; background: var(--primary); margin-right: 5px; vertical-align: middle; }
.gs-cle-barres i.ref { background: var(--text-3); opacity: .55; }
.gs-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.gs-pill--ok { background: var(--success-soft); color: var(--gs-ok-encre); }
.gs-pill--att { background: var(--warning-soft); color: var(--gs-att-encre); }
.gs-pill--risque { background: var(--danger-soft); color: var(--gs-risque-encre); }
.gs-pill--neutre { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); }

/* ---------- Comparer, Profils ---------- */
/* Comparer en UNE grille (23/10, Mika) : les cartes des zones sont l'en-tête du tableau ; libellés 28 %, puis 4 colonnes égales */
.gs-table--cmp { table-layout: fixed; min-width: 760px; }
.gs-table--cmp col.gs-cmp-c-lib { width: 28%; }
.gs-table--cmp thead th { vertical-align: top; padding: 0 5px 10px; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 13px; color: var(--text); border-bottom: 0; }
.gs-table--cmp td.n { white-space: normal; overflow-wrap: anywhere; }
.gs-cmp-col { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; border: 1px solid var(--border-2); border-radius: var(--radius-sm); padding: 8px 10px; background: var(--surface-2); min-width: 0; }
.gs-cmp-col b { flex: 1 1 100%; min-width: 0; overflow-wrap: anywhere; }
.gs-cmp-col .gs-x { margin-left: auto; }
.gs-cmp-col__n { flex: 1 1 100%; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.gs-cmp-col--vide { background: none; border-style: dashed; padding: 6px; }
/* Comparer : chercher une zone partout en France (js/geostudio-chercher.js, 21/10) */
.gs-cmp-cherche { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.gs-cmp-cherche .gs-cherche { flex: 1 1 380px; min-width: 0; }
.gs-cmp-cherche select { flex: 0 1 240px; min-width: 0; }
.gs-sugg__g { padding: 7px 9px 2px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.gs-cz { display: flex; align-items: center; gap: 4px; }
.gs-sugg .gs-cz > button:first-child { flex: 1 1 auto; min-width: 0; }
.gs-sugg .gs-cz__autour { width: auto; flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--primary-dark); white-space: nowrap; }
.gs-prof-choix { margin-bottom: var(--gs-gap); }
.gs-prof-choix .gs-champ { max-width: 460px; }
#gs-prof-bloc .gs-grille2 { margin-bottom: 4px; }

/* ---------- écrans plus étroits ---------- */
@media (max-width: 1180px) { .gs-travail { grid-template-columns: minmax(0, 1fr); } .gs-panneau { max-height: none; overflow: visible; } }
@media (max-width: 900px) {
  .gs-studio { grid-template-columns: minmax(0, 1fr); }
  .gs-modules { position: static; flex-direction: row; overflow-x: auto; padding: 6px; }
  .gs-modules__titre { display: none; }
  #gs-rail { flex-direction: row; }
  .gs-mod-btn { flex: none; }
  .gs-mod-btn small { display: none; }
  .gs-grille2 { grid-template-columns: minmax(0, 1fr); }
  .gs-carte { height: clamp(360px, 62vh, 640px); }
}
@media (max-width: 520px) { .gs-tete h1 { font-size: 22px; } .gs-barre { grid-template-columns: minmax(70px, 34%) minmax(0, 1fr) auto; }
  /* lot 27 (téléphone) : une étiquette ou une pastille longue passe à la ligne au lieu de pousser l'écran de côté */
  .gs-srcs, .gs-srcs > *, .gs-pill, .gs-b { max-width: 100%; } .gs-pill, .gs-b { white-space: normal; } }
@media print { .gs-modules, .gs-cherche, .gs-carte__zoom { display: none !important; } .gs-studio { grid-template-columns: minmax(0, 1fr); } .gs-carte { height: 620px; box-shadow: none; } }