/* Geodalia · socle commun aux deux pages, couche mince au-dessus de Carbon.
   Ordre de chargement dans chaque page : polices Google (IBM Plex), vendor/carbon.css, base.css, puis public.css ou app.css.
   Carbon fournit le reset, les thèmes (White / Gray 100 + cobalt), la grille, la typographie et les composants <cds-…>.
   Ici seulement : jetons propres à Geodalia, réglages de page, accessibilité, logo, icônes, classes de points, .todo.
   Préfixe des classes maison : gd- (socle), pub- (public.css), app- (app.css). Voir spec-carbon.md. */

/* ========== 1. Jetons Geodalia (hors Carbon) ========== */
:root {
  /* Classes de points (légendes, répartition) : décor, jamais seul porteur du sens. */
  --gd-c-sol: #968f85; --gd-c-veg: #607c48; --gd-c-bat: #4a5c7a; --gd-c-veh: #b8743a; --gd-c-nc: #d6c496;
  --gd-pastille-filet: rgb(0 0 0 / .14);
  /* Marque .todo : texte à compléter, visible exprès. */
  --gd-todo-bg: #fff4d6; --gd-todo-ink: #6b4a00;
  /* Hauteur de cds-header (fixe, 48 px). */
  --gd-entete: 3rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --gd-c-sol: #a39c92; --gd-c-veg: #8fb070; --gd-c-bat: #7d93c4; --gd-c-veh: #c98447; --gd-c-nc: #d6c496;
    --gd-pastille-filet: rgb(255 255 255 / .18);
    --gd-todo-bg: #3a3014; --gd-todo-ink: #f0d58a;
  }
}
/* Zone sombre explicite (bandeau inversé en clair), même valeurs qu'en sombre. */
.cds--g100 {
  --gd-c-sol: #a39c92; --gd-c-veg: #8fb070; --gd-c-bat: #7d93c4; --gd-c-veh: #c98447; --gd-c-nc: #d6c496;
  --gd-pastille-filet: rgb(255 255 255 / .18);
  --gd-todo-bg: #3a3014; --gd-todo-ink: #f0d58a;
}

[hidden] { display: none !important; }

/* ========== 2. Page ========== */
html {
  scroll-behavior: smooth; scroll-padding-top: calc(var(--gd-entete) + 1rem);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
/* Toute page refaite porte <body class="gd-page …"> : les règles d'éléments ci-dessous ne touchent qu'elle
   (spécificité nulle grâce à :where, le CSS de page les surcharge sans effort).
   Le reset Carbon met line-height: 1 sur body : on pose body-01 (14/20), la taille de base de Carbon productive. */
body.gd-page {
  margin: 0;
  background: var(--cds-background, #ffffff);
  color: var(--cds-text-primary, #161616);
  font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--cds-body-01-font-size, .875rem);
  font-weight: var(--cds-body-01-font-weight, 400);
  line-height: var(--cds-body-01-line-height, 1.42857);
  letter-spacing: var(--cds-body-01-letter-spacing, .16px);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
:where(.gd-page) img { max-width: 100%; height: auto; }
:where(.gd-page) ::selection { background: var(--cds-highlight, #dde2fb); color: var(--cds-text-primary, #161616); }

/* Contenu sous cds-header (position fixe). */
.gd-sous-entete { padding-top: var(--gd-entete); }

/* Liens du texte courant (les composants ont leurs propres styles : cds-link pour un lien isolé). */
:where(.gd-page) a { color: var(--cds-link-primary, #2340d8); text-underline-offset: .1875rem; }
:where(.gd-page) a:hover { color: var(--cds-link-primary-hover, #1a2fa8); }

/* Code en ligne : formats, codes de classe, noms de fichiers. */
:where(.gd-page) :is(code, kbd, samp), .gd-mono {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: var(--cds-code-01-font-size, .75rem); letter-spacing: var(--cds-code-01-letter-spacing, .32px);
}
:where(.gd-page) code {
  padding: 0 var(--cds-spacing-02, .25rem);
  background: var(--cds-layer-01, #f4f4f4); color: var(--cds-text-primary, #161616);
  border: 1px solid var(--cds-border-subtle-01, #e0e0e0); white-space: nowrap;
}
.gd-num { font-variant-numeric: tabular-nums; }
/* Défilement horizontal contenu : cds-table, cds-progress-indicator horizontal… ne rétrécissent pas sous 390 px. */
.gd-defile { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.gd-nw { white-space: nowrap; }

/* Jusqu'à leur définition (module chargé), les composants de mise en page ne s'affichent pas en vrac. */
cds-header:not(:defined), cds-side-nav:not(:defined), cds-table:not(:defined),
cds-file-uploader-drop-container:not(:defined), cds-progress-indicator:not(:defined) { visibility: hidden; }

/* ========== 3. Accessibilité ========== */
/* Focus des éléments natifs (les composants Carbon dessinent le leur dans leur shadow DOM). */
:where(.gd-page) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--cds-focus, #2340d8); outline-offset: 1px;
}
:where(.gd-page) :where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) { outline: none; }

/* Lien d'évitement : premier élément du body, au-dessus de cds-header (z-index 8000). */
.skip {
  position: absolute; left: var(--cds-spacing-03, .5rem); top: -100px; z-index: 9000;
  padding: var(--cds-spacing-03, .5rem) var(--cds-spacing-05, 1rem);
  background: var(--cds-button-primary, #2340d8); color: var(--cds-text-on-color, #ffffff);
  font-size: var(--cds-body-compact-01-font-size, .875rem); text-decoration: none;
}
.skip:focus { top: var(--cds-spacing-03, .5rem); color: var(--cds-text-on-color, #ffffff); outline: 2px solid var(--cds-focus-inset, #ffffff); outline-offset: -4px; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ========== 4. Marque à compléter ========== */
.todo {
  padding: 0 var(--cds-spacing-02, .25rem);
  background: var(--gd-todo-bg); color: var(--gd-todo-ink);
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace; font-size: .8125em; font-weight: 400;
  letter-spacing: 0; white-space: nowrap;
}

/* ========== 5. Logo : grille 3 × 3, carré central cobalt ========== */
/* <a class="gd-logo" href="…"><i aria-hidden="true"><b></b> ×9</i><span>Geodalia</span></a>
   Dans cds-header-name : <cds-header-name href="index.html" prefix=""><span class="gd-logo"><i…></i><span>Geodalia</span></span></cds-header-name> */
.gd-logo {
  display: inline-flex; align-items: center; gap: .625rem;
  color: var(--cds-text-primary, #161616); text-decoration: none;
  font-size: 1.125rem; line-height: 1; font-weight: 600; letter-spacing: -.01em;
}
.gd-logo:hover { color: var(--cds-text-primary, #161616); }
.gd-logo i { display: grid; grid-template-columns: repeat(3, 5px); grid-auto-rows: 5px; gap: 2px; flex: none; }
.gd-logo i b { width: 5px; height: 5px; background: currentColor; }
.gd-logo i b:nth-child(5) { background: var(--cds-button-primary, #2340d8); }
.gd-logo--grand { font-size: 1.5rem; gap: .75rem; }
.gd-logo--grand i { grid-template-columns: repeat(3, 7px); grid-auto-rows: 7px; }
.gd-logo--grand i b { width: 7px; height: 7px; }

/* ========== 6. Icônes Carbon (sprite vendor/icones.svg) ========== */
/* <svg class="gd-ico" aria-hidden="true" focusable="false"><use href="vendor/icones.svg#download"/></svg>
   Dans un composant : ajouter slot="icon" (cds-button, cds-icon-button…). Liste des noms : spec-carbon.md. */
.gd-ico { display: inline-block; width: 1rem; height: 1rem; flex: none; fill: currentColor; vertical-align: -.1875rem; }
.gd-ico--20 { width: 1.25rem; height: 1.25rem; }
.gd-ico--24 { width: 1.5rem; height: 1.5rem; }
.gd-ico--32 { width: 2rem; height: 2rem; }
/* Action d'en-tête (cds-header-global-action) : Carbon colore l'icône par ::slotted(svg), que fill: currentColor
   ci-dessus écrase (l'icône virait au cobalt). On rend la couleur Carbon : icon-secondary, icon-primary au survol,
   comme le bouton de menu voisin. */
cds-header-global-action > .gd-ico { fill: var(--cds-icon-secondary, #525252); }
cds-header-global-action:hover > .gd-ico { fill: var(--cds-icon-primary, #161616); }

/* ========== 7. Classes de points ========== */
/* <ul class="gd-legende"><li><i class="gd-pastille gd-c-sol"></i>Sol <code>2</code></li>…</ul> */
.gd-pastille {
  display: inline-block; width: .625rem; height: .625rem; flex: none;
  box-shadow: inset 0 0 0 1px var(--gd-pastille-filet);
}
.gd-c-sol { background: var(--gd-c-sol); }
.gd-c-veg { background: var(--gd-c-veg); }
.gd-c-bat { background: var(--gd-c-bat); }
.gd-c-veh { background: var(--gd-c-veh); }
.gd-c-nc { background: var(--gd-c-nc); }
.gd-legende {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: var(--cds-spacing-03, .5rem) var(--cds-spacing-05, 1rem);
  margin: 0; padding: 0; list-style: none; color: var(--cds-text-secondary, #525252);
}
.gd-legende > li { display: flex; align-items: center; gap: var(--cds-spacing-03, .5rem); min-width: 0; }