/* Outil interne « Création de gisements » — 3 panneaux : Entreprises · Coproduits · Copilote. */
#gisement-creator-view {
  padding: 0;
  --gc-green: #1f8a54; --gc-green-soft: #e7f4ec; --gc-ink: #1f2937; --gc-line: #e5e7eb;
  --gc-muted: #6b7280; --gc-amber: #e6a000; --gc-red: #c0392b;
  /* Hauteur verrouillée à l'écran (surcharge .dashboard-view flex:1 / overflow-y:auto / padding-bottom)
     pour que col2 défile seule et que col3/carte ne grandissent jamais. */
  display: flex; flex-direction: column;
  flex: none;
  /* 70px nav + 40px footer (#main-footer) → laisse le footer visible sous la carte. */
  height: calc(100vh - 110px);
  max-height: calc(100vh - 110px);
  overflow: hidden;
}
.gc-topbar { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--gc-line); background: #fff; flex: none; }
.gc-topbar-label { font-size: 12px; color: var(--gc-muted); }
.gc-topbar { flex-wrap: wrap; }
.gc-topbar-name { font-weight: 600; font-size: 13px; color: var(--gc-ink); display: inline-flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.gc-contact-chip { background: var(--gc-green-soft); color: var(--gc-green); border-radius: 10px; padding: 2px 9px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.gc-topbar .gc-btn { margin-left: auto; }
.gc-contact-box { position: absolute; top: 100%; right: 12px; z-index: 2000; width: 380px; max-height: 70vh; overflow: auto; background: #fff; border: 1px solid var(--gc-line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 14px; }
.gc-contact-box.hidden { display: none; }
.gc-shell { display: flex; flex: 1; min-height: 0; background: #fff; }

/* ----- Colonne 1 : entreprises ----- */
.gc-col1 { width: 256px; flex: none; border-right: 1px solid var(--gc-line); background: #fbfdfc; overflow: auto; padding: 14px 12px; }
.gc-col1 h2 { font-size: 13px; margin: 0 0 12px; color: var(--gc-muted); text-transform: uppercase; letter-spacing: .4px; }
.gc-co-item { position: relative; border: 1px solid var(--gc-line); border-radius: 10px; padding: 10px 26px 10px 12px; margin-bottom: 10px; cursor: pointer; background: #fff; }
.gc-co-item.active { border-color: var(--gc-green); box-shadow: 0 0 0 2px var(--gc-green-soft); }
.gc-co-remove { position: absolute; top: 6px; right: 8px; border: 0; background: none; color: var(--gc-muted); cursor: pointer; font-size: 13px; line-height: 1; padding: 2px; }
.gc-co-remove:hover { color: var(--gc-red); }
.gc-co-name { font-weight: 600; font-size: 14px; color: var(--gc-ink); }
.gc-co-city { font-size: 11px; color: var(--gc-muted); margin-top: 2px; }
.gc-co-block { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--gc-line); }
.gc-co-label { font-size: 10px; color: var(--gc-muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 4px; }
.gc-co-copros { font-size: 12px; color: var(--gc-ink); }
.gc-co-copros .gc-co-cop { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }
.gc-co-copros .gc-empty { font-size: 12px; }
.gc-add-co { width: 100%; margin-top: 4px; }

/* ----- Colonne 2 : coproduits (accordéon) ----- */
.gc-col2 { flex: 1; min-width: 0; overflow: auto; padding: 18px 22px; }
.gc-col2 h1 { font-size: 18px; margin: 0 0 2px; color: var(--gc-ink); }
.gc-col2 .gc-sub { color: var(--gc-muted); font-size: 12px; margin: 0 0 16px; }
.gc-copro-add { margin-bottom: 14px; }
.gc-suggest { margin-top: 8px; }

.gc-panel { border: 1px solid var(--gc-line); border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.gc-panel.open { border-color: var(--gc-green); }
.gc-panel-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; }
.gc-panel-head:hover { background: #f8fbf9; }
.gc-panel-photo { width: 64px; height: 64px; flex: none; border-radius: 10px; object-fit: cover; background: #eef2f5; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.gc-panel-photo.placeholder { display: flex; align-items: center; justify-content: center; color: #b9c2cc; font-size: 26px; }
.gc-panel-hero { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; background: var(--gc-green-soft); border-radius: 12px; padding: 14px; margin-bottom: 6px; }
.gc-panel-hero img { max-height: 190px; max-width: 100%; object-fit: contain; border-radius: 6px; }
.gc-panel-main { flex: 1; min-width: 0; }
.gc-panel-title { font-weight: 600; font-size: 14px; color: var(--gc-ink); }
.gc-panel-meta { font-size: 12px; color: var(--gc-muted); margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap; }
.gc-pill { display: inline-block; font-size: 11px; border-radius: 10px; padding: 1px 8px; background: var(--gc-green-soft); color: var(--gc-green); }
.gc-pill.spot { background: #fdf0d8; color: var(--gc-amber); }
.gc-chevron { color: var(--gc-muted); transition: transform .15s; }
.gc-panel.open .gc-chevron { transform: rotate(90deg); }
.gc-panel-body { padding: 14px; display: flex; gap: 16px; border-top: 1px solid var(--gc-line); }
.gc-panel-body.hidden { display: none; }
.gc-panel-media { width: 200px; flex: none; }
.gc-panel-media img { width: 100%; max-height: 220px; object-fit: contain; background: var(--gc-green-soft); border-radius: 12px; padding: 12px; box-sizing: border-box; }
.gc-panel-media-ph { width: 100%; height: 160px; display: flex; align-items: center; justify-content: center; font-size: 40px; color: #b9c2cc; background: var(--gc-green-soft); border-radius: 12px; }
.gc-panel-fields { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
.gc-panel-fields .full { grid-column: 1 / -1; }

/* ----- Panel coproduit : sections thématiques ----- */
.gc-panel-sections { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.gc-section { border: 1px solid var(--gc-line); border-radius: 10px; padding: 12px 14px; background: #fbfdfc; }
.gc-section-title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--gc-green); }
.gc-section-title i { font-size: 12px; }
.gc-fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
.gc-fields-grid .full { grid-column: 1 / -1; }
.gc-panel-sections > .gc-field.full { margin-top: 0; }

/* Combobox « Type de matière » (filtrage côté client) */
.gc-combo { position: relative; }
.gc-combo-list { position: absolute; top: 100%; left: 0; right: 0; z-index: 60; max-height: 220px; overflow-y: auto; margin-top: 4px; background: #fff; border: 1px solid var(--gc-line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.gc-combo-list.hidden { display: none; }

/* ----- Coproduit marqué pour archivage (barré / rouge, supprimé au submit) ----- */
.gc-panel.to-archive { border-color: var(--gc-red); background: #fdf3f2; }
.gc-panel.to-archive .gc-panel-head { cursor: default; }
.gc-panel.to-archive .gc-panel-title { text-decoration: line-through; color: var(--gc-red); }
.gc-panel.to-archive .gc-panel-photo { opacity: .5; filter: grayscale(1); }
.gc-pill.archive { background: #fdecea; color: var(--gc-red); display: inline-flex; align-items: center; gap: 5px; }
.gc-remove.gc-undo { color: var(--gc-green); }
.gc-co-cop.archived span { text-decoration: line-through; color: var(--gc-red); }

/* ----- Section interlocuteurs (colonne entreprises) ----- */
.gc-contacts-section { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--gc-line); }
.gc-contacts-head { display: flex; align-items: center; gap: 6px; }
.gc-ct-search { margin: 8px 0; }
.gc-ct-row { display: flex; align-items: center; gap: 6px; padding: 5px 0; font-size: 12px; color: var(--gc-ink); cursor: pointer; }
.gc-ct-row .gc-ct-name { font-weight: 600; }
.gc-ct-row .gc-city { margin-left: auto; font-size: 11px; }
.gc-ct-add-details { margin-top: 8px; }
.gc-ct-add-details summary { cursor: pointer; font-size: 12px; color: var(--gc-green); }
#gc-ct-results { margin-top: 6px; }

/* ----- Colonne 3 : copilote / carte (redimensionnable) ----- */
.gc-resizer { width: 6px; flex: none; cursor: col-resize; background: transparent; }
.gc-resizer:hover, .gc-resizer.dragging { background: var(--gc-green-soft); }
.gc-col3 { width: 340px; flex: none; border-left: 1px solid var(--gc-line); background: #fbfdfc; display: flex; flex-direction: column; min-width: 260px; overflow: hidden; }
.gc-col3-head { padding: 12px 16px; font-size: 11px; font-weight: 800; color: var(--gc-green); text-transform: uppercase; letter-spacing: .5px; border-bottom: 1px solid var(--gc-line); }
#gc-filieres { padding: 12px 16px; overflow: auto; max-height: 45%; }
#gc-filieres .gc-co-label { margin-bottom: 8px; }
.gc-fil { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 7px; }
.gc-fil .gc-rank { width: 18px; height: 18px; flex: none; border-radius: 50%; color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; background: var(--gc-green); }
.gc-fil .gc-count { margin-left: auto; font-size: 11px; color: var(--gc-muted); }
.gc-fil-note { font-size: 11px; color: var(--gc-muted); font-style: italic; margin-top: 6px; }
#gc-map { flex: 1; min-height: 220px; margin: 0 12px 12px; border: 1px solid var(--gc-line); border-radius: 8px; }

/* ----- éléments communs ----- */
.gc-field { margin: 0; }
.gc-field label { display: block; font-size: 11px; color: var(--gc-muted); margin-bottom: 4px; }
.gc-input, .gc-select { width: 100%; padding: 9px 11px; border: 1px solid var(--gc-line); border-radius: 8px; font-size: 13px; box-sizing: border-box; }
.gc-input:focus, .gc-select:focus { outline: none; border-color: var(--gc-green); }
.gc-results { border: 1px solid var(--gc-line); border-radius: 8px; margin-top: 6px; overflow: hidden; }
.gc-result { padding: 9px 11px; cursor: pointer; font-size: 13px; border-top: 1px solid #f1f5f3; }
.gc-result:first-child { border-top: 0; }
.gc-result:hover { background: var(--gc-green-soft); }
.gc-result .gc-city { color: var(--gc-muted); font-size: 12px; }
.gc-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; border: 1px solid var(--gc-line); background: #fff; border-radius: 14px; padding: 4px 10px; color: var(--gc-ink); cursor: pointer; margin: 0 6px 6px 0; }
.gc-chip.green { border-color: var(--gc-green); color: var(--gc-green); background: var(--gc-green-soft); cursor: default; }
.gc-btn { background: var(--gc-green); color: #fff; border: 0; border-radius: 8px; padding: 9px 14px; font-size: 13px; cursor: pointer; }
.gc-btn:disabled { opacity: .5; cursor: not-allowed; }
.gc-btn.secondary { background: #fff; color: var(--gc-ink); border: 1px solid var(--gc-line); }
.gc-btn.link { background: none; color: var(--gc-green); padding: 4px 0; }
.gc-empty { color: var(--gc-muted); font-size: 13px; }
.gc-remove { color: var(--gc-muted); cursor: pointer; border: 0; background: none; font-size: 14px; }
.gc-remove:hover { color: var(--gc-red); }

/* ----- spinner de chargement ----- */
.gc-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--gc-line); border-top-color: var(--gc-green); border-radius: 50%; animation: gc-spin .7s linear infinite; vertical-align: middle; }
@keyframes gc-spin { to { transform: rotate(360deg); } }
.gc-loading { display: flex; align-items: center; gap: 8px; color: var(--gc-muted); font-size: 13px; padding: 14px 0; }

/* ----- filières cliquables (copilote) ----- */
.gc-fil-toggle { cursor: pointer; padding: 5px 6px; border-radius: 6px; }
.gc-fil-toggle:hover { background: #f1f5f3; }
.gc-fil-toggle.off { opacity: .5; }
.gc-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.gc-fil-name { flex: 1; }
.gc-star { color: var(--gc-amber); }

/* ----- curseur de rayon (copilote) ----- */
.gc-radius { padding: 8px 16px; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--gc-ink); border-top: 1px solid var(--gc-line); }
.gc-radius label { white-space: nowrap; }
.gc-radius b { color: var(--gc-green); }
.gc-radius input[type="range"] { flex: 1; accent-color: var(--gc-green); }

/* ----- Responsive mobile : les 3 colonnes s'empilent en lignes -----
   Sur smartphone/tablette, le layout 3 colonnes (entreprises · coproduits ·
   copilote) devient une pile verticale. On libère la hauteur verrouillée du
   bureau pour laisser la page défiler. */
@media (max-width: 900px) {
  /* La vue ne se verrouille plus en hauteur : elle défile verticalement. */
  #gisement-creator-view {
    height: auto;
    max-height: none;
    overflow-y: auto;
    flex: 1;
  }
  /* Barre du haut (interlocuteurs) : on autorise le retour à la ligne. */
  .gc-topbar {
    flex-wrap: wrap;
  }
  .gc-topbar .gc-btn {
    margin-left: 0;
  }
  /* Les 3 colonnes passent en lignes empilées. Le padding est inclus dans la
     largeur (sinon width:100% + padding déborde l'écran du téléphone). */
  .gc-shell {
    flex-direction: column;
  }
  .gc-col1,
  .gc-col2,
  .gc-col3 {
    box-sizing: border-box;
  }
  .gc-col1,
  .gc-col3 {
    width: 100%;
    min-width: 0;
    flex: none;
    border-right: none;
    border-left: none;
    border-bottom: 1px solid var(--gc-line);
  }
  /* Copilote : pleine largeur du mobile. Le !important est nécessaire car la
     largeur de cette colonne est posée en style inline par le JS (gc-col3). */
  .gc-col3 {
    width: 100% !important;
    overflow: visible;
  }
  /* Liste des entreprises : hauteur bornée avec scroll interne. */
  .gc-col1 {
    max-height: 260px;
  }
  .gc-col2 {
    padding: 16px 14px;
  }
  /* Bloc entreprise : on laisse la place à une croix de fermeture cliquable. */
  .gc-co-item {
    padding-right: 46px;
  }
  /* Croix « retirer l'entreprise » : cible tactile confortable (≈ 40 px). */
  .gc-co-remove {
    top: 4px;
    right: 4px;
    font-size: 18px;
    padding: 9px 11px;
    line-height: 1;
  }
  /* Pas de poignée de redimensionnement de colonnes au doigt. */
  .gc-resizer {
    display: none;
  }
  #gc-filieres {
    max-height: none;
  }
  /* Carte du copilote : pleine largeur (on retire les marges latérales). */
  #gc-map {
    min-height: 260px;
    margin: 0 0 12px;
  }
  /* Carte coproduit (accordéon) : média au-dessus, champs en une colonne. */
  .gc-panel-body {
    flex-direction: column;
  }
  .gc-panel-media {
    width: 100%;
  }
  .gc-panel-fields,
  .gc-fields-grid {
    grid-template-columns: 1fr;
  }
  /* Boîte « contact » : ne déborde plus de l'écran. */
  .gc-contact-box {
    width: calc(100vw - 24px);
    right: 12px;
  }
}