/* Page GM « 13. Options » (klugle_options) : catalogue global des options de réservation ; feuille AUTONOME (jetons --tcc- recopiés), préfixes .kgo- / .kg- et JAMAIS .ad- / .adv- (bloqueurs de publicité). */
/* Date: 2026-10-01 ; Version: 1.3.0 ; GSt / Claude ; Modale de Sync avec l'autre site (.kgo-sync-*) : resume, table des champs ici / distant, choix par option */
/* Date: 2026-09-30 ; Version: 1.2.0 ; GSt / Claude ; Ligne du tarif à cinq champs (.kgo-row-tarif : tarif, prix, min et max de personnes, proposée), empilée sous 700 px comme les autres. */
/* Date: 2026-09-30 ; Version: 1.1.0 ; GSt / Claude ; Retour GSt : miniatures de la Médiathèque écrasées en fines bandes (une grille à hauteur bornée compresse ses rangées automatiques dès qu'il y a beaucoup d'images) → grid-auto-rows: max-content + défilement, comme les sélecteurs d'Aventures et d'Enigma Studio ; miniatures agrandies (180 px, 120 px de haut) et fenêtre élargie. Le champ Pictogramme reçoit le sélecteur partagé (icon-picker.css). */
/* Date: 2026-09-30 ; Version: 1.0.0 ; GSt / Claude ; NOUVEAU FICHIER — PR 2 « Options » : socle de page repris d'adventures.css, deux colonnes (liste ordonnable + éditeur), barre de langue .kg-lang-bar, visuel, sélecteur de Médiathèque léger. */

:root {
    /* — repris de teammanager.css pour indépendance — */
    --tcc-encre:            #0D0F0E;
    --tcc-encre-profond:    #070908;
    --tcc-relief:           #151917;
    --tcc-surface:          rgba(13,15,14,0.55);
    --tcc-champ:            rgba(7,9,8,0.55);
    --tcc-champ-clair:      rgba(244,246,242,0.11);
    --tcc-champ-plein:      #070908;
    --tcc-voile:            rgba(13,15,14,0.92);

    --tcc-surbrillance:     #FFFFFF;
    --tcc-texte:            #F4F6F2;
    --tcc-texte-doux:       #A6AEA2;
    --tcc-texte-faible:     #7C857A;
    --tcc-tuile:            rgba(244,246,242,0.07);

    --tcc-fluo:             #C6FF00;
    --tcc-vert-klugle:      #009513;
    --tcc-vert-clair:       #DFFF9E;
    --tcc-vert-profond:     #0A2A14;

    --tcc-bord:             var(--tcc-vert-profond);
    --tcc-bord-fort:        rgba(0,149,19,0.55);
    --tcc-bord-doux:        rgba(244,246,242,0.10);
    --tcc-survol:           rgba(0,149,19,0.10);
    --tcc-halo:             rgba(0,149,19,0.45);
    --tcc-ombre:            rgba(0,0,0,0.65);
    --tcc-interrupteur-off: #3A413A;

    --tcc-btn-pri-fond:     var(--tcc-fluo);
    --tcc-btn-pri-texte:    var(--tcc-encre);
    --tcc-btn-acc-fond:     var(--tcc-vert-klugle);
    --tcc-btn-acc-texte:    var(--tcc-encre);
    --tcc-btn-sec-fond:     rgba(0,149,19,0.14);
    --tcc-btn-sec-bord:     var(--tcc-vert-klugle);
    --tcc-btn-sec-texte:    var(--tcc-vert-clair);
    --tcc-btn-dng-fond:     rgba(231,76,60,0.16);
    --tcc-btn-dng-bord:     #c0392b;
    --tcc-btn-dng-texte:    #FF9F94;
}

/* ==========================================
   SOCLE DE PAGE (patron .klugle-dashboard-wrapper/.klugle-panel/h2, cf. planning.css 1.1.0)
   ========================================== */
.klugle-dashboard-wrapper { width: 100%; margin: 0; padding: 0; display: flex; justify-content: center; }
.klugle-dashboard { font-family: 'Orbitron', sans-serif; color: var(--tcc-texte); background: transparent; width: 100%; max-width: 100%; box-sizing: border-box; text-transform: none !important; }
.klugle-panel {
    background: var(--tcc-encre); border: 2px solid var(--tcc-bord-fort); border-radius: 8px;
    padding: 15px 20px; margin-bottom: 20px; box-shadow: 0 5px 15px var(--tcc-ombre);
    width: 100%; box-sizing: border-box;
}
.klugle-panel h2 { color: var(--tcc-fluo); text-align: center; margin-top: 0; font-family: 'Cinzel', serif; font-size: 1.5rem; margin-bottom: 15px; text-transform: none !important; display: flex; align-items: center; justify-content: center; gap: 10px; }

/* Boutons (mêmes 4 niveaux que le TCC/Planning : primaire fluo / accent vert plein / secondaire fantôme / destructif) */
.klugle-btn-sm {
    border: 1px solid var(--tcc-btn-sec-bord); padding: 8px 12px; border-radius: 4px; cursor: pointer;
    background: var(--tcc-btn-sec-fond); color: var(--tcc-btn-sec-texte);
    font-weight: bold; font-family: 'Orbitron', sans-serif; font-size: 0.8rem; transition: all 0.2s ease; text-transform: none !important;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none;
}
.klugle-btn-sm:hover { transform: translateY(-1px); box-shadow: 0 3px 8px var(--tcc-ombre); background: var(--tcc-survol); }
.klugle-btn-sm:disabled { cursor: not-allowed; opacity: 0.5; transform: none; box-shadow: none; }
.btn-green, .btn-green:hover { background: var(--tcc-btn-pri-fond); border-color: var(--tcc-btn-pri-fond); color: var(--tcc-btn-pri-texte); }
.btn-red { background: var(--tcc-btn-dng-fond); border-color: var(--tcc-btn-dng-bord); color: var(--tcc-btn-dng-texte); }
.btn-red:hover { background: rgba(231,76,60,0.28); }
.btn-blue { background: var(--tcc-btn-sec-fond); border-color: var(--tcc-btn-sec-bord); color: var(--tcc-btn-sec-texte); }

/* ==========================================
   PAGE OPTIONS
   ========================================== */
.kgo-intro { color: var(--tcc-texte-doux); font-family: sans-serif; font-size: 0.85rem; line-height: 1.5; margin: 0 0 16px; text-align: center; }
.kgo-layout { display: flex; gap: 18px; align-items: flex-start; }
.kgo-side { flex: 0 0 280px; display: flex; flex-direction: column; gap: 10px; }
.kgo-new { width: 100%; }
.kgo-list { display: flex; flex-direction: column; gap: 6px; }
.kgo-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--tcc-relief); border: 1px solid var(--tcc-bord-doux); border-radius: 6px; cursor: pointer; font-family: sans-serif; font-size: 0.82rem; }
.kgo-item:hover { border-color: var(--tcc-bord-fort); }
.kgo-item.is-active { border-color: var(--tcc-fluo); box-shadow: 0 0 0 1px var(--tcc-fluo) inset; }
.kgo-item.is-off { opacity: 0.55; }
.kgo-item-badge { flex: 0 0 26px; text-align: center; font-size: 1.1rem; }
.kgo-item-main { flex: 1 1 auto; min-width: 0; }
.kgo-item-name { display: block; font-weight: bold; color: var(--tcc-texte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kgo-item-meta { display: block; font-size: 0.72rem; color: var(--tcc-texte-doux); }
.kgo-item-move { display: flex; flex-direction: column; gap: 2px; }
.kgo-item-move button { background: transparent; border: 1px solid var(--tcc-bord-doux); color: var(--tcc-texte-doux); border-radius: 3px; font-size: 0.6rem; line-height: 1; padding: 2px 4px; cursor: pointer; }
.kgo-item-move button:hover:not([disabled]) { color: var(--tcc-fluo); border-color: var(--tcc-fluo); }
.kgo-item-move button[disabled] { opacity: 0.3; cursor: default; }
.kgo-empty { color: var(--tcc-texte-faible); font-family: sans-serif; font-size: 0.85rem; padding: 10px 0; }
.kgo-editor { flex: 1 1 auto; min-width: 0; background: var(--tcc-relief); border: 1px solid var(--tcc-bord-doux); border-radius: 8px; padding: 16px; }
.kgo-editor-empty { text-align: center; padding: 40px 0; }
.kgo-row { display: grid; gap: 14px; }
.kgo-row-2 { grid-template-columns: 2fr 1fr; }
.kgo-row-3 { grid-template-columns: 1.4fr 1fr 1fr; align-items: end; }
.kgo-row-tarif { grid-template-columns: 1.5fr 0.9fr 0.8fr 0.8fr 1.1fr; align-items: end; }
.kgo-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.kgo-field > label { font-size: 0.78rem; font-weight: bold; color: var(--tcc-vert-clair); font-family: sans-serif; }
.kgo-field-check > label { display: flex; align-items: center; gap: 8px; color: var(--tcc-texte); padding-bottom: 10px; }
.kgo-hint { font-size: 0.72rem; font-weight: normal; color: var(--tcc-texte-faible); font-family: sans-serif; }
.kgo-hint code { background: rgba(255,255,255,0.06); padding: 1px 4px; border-radius: 3px; }
.kgo-input { width: 100%; box-sizing: border-box; background: var(--tcc-champ-plein); color: var(--tcc-texte); border: 1px solid #333; border-radius: 4px; padding: 9px 10px; font-family: sans-serif; font-size: 0.88rem; }
.kgo-input:focus { outline: none; border-color: #3498db; }
textarea.kgo-input { resize: vertical; line-height: 1.45; }
select.kgo-input, input[type="number"].kgo-input { color-scheme: dark; }
.kgo-input.kgo-code { text-transform: uppercase; letter-spacing: 0.08em; font-family: monospace; }
.kgo-input.is-ko { border-color: #e74c3c !important; }
.kgo-media { display: flex; gap: 12px; align-items: center; }
.kgo-media-preview { width: 120px; height: 80px; border: 1px dashed #444; border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #000; color: #555; font-size: 1.6rem; }
.kgo-media-preview img { width: 100%; height: 100%; object-fit: cover; }
.kgo-media-actions { display: flex; flex-direction: column; gap: 6px; }
.kgo-actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--tcc-bord-doux); }
.kgo-actions #kgo-save { margin-left: auto; }
.kgo-status { font-family: sans-serif; font-size: 0.8rem; color: var(--tcc-texte-doux); }
.kgo-status.is-ok { color: #2ecc71; }
.kgo-status.is-ko { color: #e74c3c; }
.kgo-status.is-dirty { color: #f1c40f; }

/* Barre de langue (même dessin qu'Adventure Config, recopié pour l'autonomie de la feuille). */
.kg-lang-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.kg-lang-tab { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; color: #bdc3c7; background: rgba(255,255,255,0.04); border: 1px solid #3a3a44; border-radius: 12px; cursor: pointer; }
.kg-lang-tab:hover { border-color: #9b59b6; color: #fff; }
.kg-lang-tab.is-active { background: #9b59b6; border-color: #fff; color: #fff; }
.kg-lang-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.kg-lang-dot.is-done { background: #2ecc71; }
.kg-lang-dot.is-none { background: transparent; border: 1px solid #7f8c8d; }
.kg-lang-deepl { margin-left: 4px; padding: 3px 9px; font-size: 0.72rem; color: #dff3ff; background: #1f5f8b; border: 1px solid #2e86c1; border-radius: 12px; cursor: pointer; }
.kg-lang-deepl:hover:not([disabled]) { background: #2e86c1; }
.kg-lang-deepl[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Sélecteur de Médiathèque (images seulement). */
.kgo-picker { position: fixed; inset: 0; z-index: 999999; background: var(--tcc-voile); display: flex; align-items: center; justify-content: center; }
.kgo-picker-box { width: min(1200px, 94vw); height: 86vh; max-height: 86vh; display: flex; flex-direction: column; background: var(--tcc-encre); border: 2px solid var(--tcc-fluo); border-radius: 10px; padding: 14px; box-sizing: border-box; }
.kgo-picker-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: var(--tcc-fluo); font-family: sans-serif; }
.kgo-picker-head .kgo-input { flex: 1; }
.kgo-picker-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; align-content: start; display: grid; grid-auto-rows: max-content; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.kgo-picker-cell { border: 1px solid #333; border-radius: 6px; overflow: hidden; cursor: pointer; background: #000; }
.kgo-picker-cell:hover { border-color: var(--tcc-fluo); }
.kgo-picker-cell img { width: 100%; height: 120px; object-fit: cover; display: block; }
.kgo-picker-cell span { display: block; padding: 4px 6px; font-family: sans-serif; font-size: 0.68rem; color: var(--tcc-texte-doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 900px) {
    /* En colonne, align-items:flex-start laissait l'éditeur prendre sa largeur de contenu et déborder
       (vu au banc 430 px) : on étire les deux panneaux sur la largeur disponible. */
    .kgo-layout { flex-direction: column; align-items: stretch; }
    .kgo-side, .kgo-editor { flex-basis: auto; width: 100%; min-width: 0; box-sizing: border-box; }
    .klugle-panel { padding: 12px; }
    /* Largeur minimale : un élément flex ne descend pas sous la largeur de son contenu insécable —
       la rangée « visuel + boutons » et la rangée d'actions élargissaient toute la page. */
    .klugle-dashboard { min-width: 0; }
    .kgo-media, .kgo-actions { flex-wrap: wrap; }
    .kgo-actions #kgo-save { margin-left: 0; }
    .kgo-row-2, .kgo-row-3, .kgo-row-tarif { grid-template-columns: 1fr; }
}

/* ── Sync avec l'autre site (modale #kgo-sync, même voile que le sélecteur de média) ── */
.kgo-sync-box { height: auto; max-height: 90vh; }
.kgo-sync-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; font-family: sans-serif; color: var(--tcc-texte-doux); }
.kgo-sync-foot { display: flex; align-items: center; gap: 10px; justify-content: flex-end; padding-top: 10px; margin-top: 10px; border-top: 1px solid #333; }
#kgo-sync-count { margin-right: auto; font-family: sans-serif; font-size: 0.8rem; color: var(--tcc-texte-doux); }
.kgo-sync-sites { font-size: 0.8rem; margin-bottom: 8px; }
.kgo-sync-resume { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.kgo-sync-voir { margin-left: auto; font-size: 0.75rem; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.kgo-sync-note { font-size: 0.72rem; opacity: 0.8; margin: 4px 0 10px; }
.kgo-sync-ok { color: #2ecc71; }
.kgo-sync-etat { font-size: 0.65rem; padding: 2px 7px; border-radius: 10px; border: 1px solid; white-space: nowrap; }
.kgo-sync-etat.is-identique { color: #7f8c8d; border-color: #555; }
.kgo-sync-etat.is-different { color: #f39c12; border-color: #f39c12; }
.kgo-sync-etat.is-ici_seulement { color: #3498db; border-color: #3498db; }
.kgo-sync-etat.is-distant_seulement { color: #9b59b6; border-color: #9b59b6; }
.kgo-sync-ligne { border: 1px solid #333; border-radius: 6px; padding: 8px 10px; margin-bottom: 8px; }
.kgo-sync-tete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: #eee; }
.kgo-sync-tete code { color: var(--tcc-fluo); font-size: 0.72rem; }
.kgo-sync-table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 0.75rem; table-layout: fixed; }
.kgo-sync-table th, .kgo-sync-table td { border-top: 1px solid #262626; padding: 4px 6px; text-align: left; vertical-align: top; word-break: break-word; }
.kgo-sync-table thead th { color: var(--tcc-fluo); font-weight: normal; }
.kgo-sync-table tbody th { width: 28%; color: #aaa; font-weight: normal; }
.kgo-sync-img { width: 40px; height: 40px; object-fit: cover; border-radius: 3px; vertical-align: middle; }
.kgo-sync-choix { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.75rem; color: #ddd; }
.kgo-sync-radio { display: flex; align-items: center; gap: 4px; cursor: pointer; }