/* Adventure Config (klugle_adventures) : éditeur des Aventures ; AUTONOME ; .avt- jamais .adv- (bloqueurs), miroir du JS et de la vue. */
/* Date: 2026-10-19 ; Version: 1.13.0 ; GSt / Claude ; Photo souvenir : petit tableau .avt-pm-pos (Équipe / Date × Hauteur % / Taille %). */
/* Date: 2026-10-19 ; Version: 1.12.0 ; GSt / Claude ; Champ image : aide courte entre titre et URL, boutons en icônes, miniature calée en bas et pleine hauteur ; style de l'ancien sélecteur retiré (fenêtre partagée media-picker.css), en-tête gardé pour la fenêtre de synchro. */
/* Date: 2026-10-19 ; Version: 1.11.0 ; GSt / Claude ; Sélecteur de Médiathèque : vignettes ENTIÈRES sur damier, vignette choisie encadrée, pied Annuler / Valider. */
/* Date: 2026-10-19 ; Version: 1.10.0 ; GSt / Claude ; Retour GSt du 19/10 (mise en page) : liste des aventures FLOTTANTE (sticky, suit le défilement, sa liste défile seule) ; champ image sur une ligne (.avt-imgfield : URL, Médiathèque, Retirer, miniature) avec aide courte et bulle .avt-info ; panneaux .avt-group (Habillage du jeu, Photo souvenir) (section en fin de fichier). */
/* Date: 2026-10-18 ; Version: 1.9.0 ; GSt / Claude ; Bandeau du catalogue (.avt-ribbon-row, .avt-ribbon-color, .avt-ribbon-preview) à la place de la case « Badge New ». */
/* Date: 2026-10-18 ; Version: 1.8.0 ; GSt / Claude ; Retour GM du 18/10 : ligne .avt-name-code-row (Nom de l'aventure + Code Aventure et « Régénérer » côte à côte, repli en colonne sur écran étroit). */
/* Date: 2026-10-02 ; Version: 1.7.0 ; GSt / Claude ; Pastille .avt-status-dev (orange) : scénario marqué « In Dev » dans le tableau des scénarios d'une aventure. */
/* Date: 2026-09-30 ; Version: 1.6.0 ; GSt / Claude ; Barre de langue .kg-lang-bar (onglets FR/EN/DE/IT, pastille remplie/vide, boutons DeepL) au-dessus du texte de présentation et du texte produit — préfixe kg- et non adv-/ad- (bloqueurs de pub). .ws-review-meta : rangée Prénom + Date de jeu d'un avis de vitrine (retour GSt du 30/09). */
/* Date: 2026-09-28 ; Version: 1.5.1 ; GSt / Claude ; .es-input.ws-field-ko : la bordure rouge d'erreur l'emporte enfin sur celle des champs sombres (!important de .es-input.dark-field) — le doublon de Code Aventure n'etait jamais marque en rouge. */
/* Date: 2026-09-28 ; Version: 1.5.0 ; GSt / Claude ; Bloc « Périodes d'ouverture » du volet VENTE (.avt-op-*) : lignes Du / Au / Libellé au gabarit des heures d'ouverture, champ fautif en rouge (en !important, comme la bordure de .dark-field qu'il doit battre), message d'erreur. */
/* Date: 2026-09-27 ; Version: 1.4.0 ; GSt / Claude ; Styles de la fenetre [SYNC] de l'aventure (#avt-sync-overlay) : modale large, tableau des scenarios, compte rendu lisible sur l'encre. */
/* Date: 2026-09-27 ; Version: 1.3.0 ; GSt / Claude ; Selecteurs de date et champs numeriques : color-scheme dark. Leur icone est dessinee par le NAVIGATEUR, qui la dessinait en sombre sur le fond encre des ecrans GM — invisible. Regle repetee dans chaque feuille a dessein : ce projet n'a pas de feuille commune aux pages GM. */
/* Date: 2026-09-25 ; Version: 1.2.1 ; Claude ; Nettoyage d'entete : format canonique, historique anterieur au 2026-09-14 retire (voir Git) */
/* Date: 2026-09-23 ; Version: 1.2.0 ; Claude ; Cause du « panneau Sélectionner recouvre la liste » : un bloqueur masquait adv-sidebar (adv = advertisement) après le 1er rendu, d'où le « blip ». Famille adv- renommée avt- dans les trois fichiers ; jamais ad/adv/banner dans un nom de classe. */
/* Date: 2026-09-23 ; Version: 1.1.0 ; Claude ; Durcissement deux colonnes : colonne gauche non rétrécissable, panneaux droits en statique, exclusivité par la seule .avt-has-selection. Chevauchement impossible par construction. */
/* Date: 2026-09-22 ; Version: 1.0.1 ; Claude ; Page autonome : aucune dépendance sur workshop.css ni teammanager.css, socle, jetons --tcc- et règles de l'ex-éditeur de Thèmes recopiés. Fix : étoile suivie d'une barre oblique fermait ce commentaire, tuant le bloc :root. */

: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); }

/* Modale générique (confirmation de suppression + sélecteur de Médiathèque) — patron
   .custom-modal-overlay/.custom-modal du Scenario Workshop, redéclaré pour indépendance. */
.custom-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--tcc-voile); z-index: 999999; display: flex; justify-content: center; align-items: center; backdrop-filter: blur(5px); }
.custom-modal { background: var(--tcc-encre); border: 2px solid var(--tcc-fluo); border-radius: 12px; padding: 30px; width: 90%; max-width: 400px; text-align: center; box-shadow: 0 10px 30px var(--tcc-ombre); font-family: 'Orbitron', sans-serif; box-sizing: border-box; }
.custom-modal h3 { color: var(--tcc-fluo); font-family: 'Cinzel', serif; margin-top: 0; font-size: 1.4rem; }
.custom-modal p { color: var(--tcc-texte-doux); font-size: 0.9rem; line-height: 1.5; margin-bottom: 25px; }
.modal-buttons-horizontal { display: flex; gap: 10px; justify-content: center; }
.btn-close-theme { background: transparent; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; transition: 0.2s; }
.btn-close-theme:hover { color: #e74c3c; }

/* ==========================================
   CHAMPS GÉNÉRIQUES (patron .es-input/.setting-group du Scenario Workshop)
   ========================================== */
.setting-group { display: flex; flex-direction: column; gap: 8px; }
.setting-group label {
    color: #bdc3c7; font-size: 0.85rem; font-family: 'Orbitron', sans-serif; font-weight: bold;
    display: flex; align-items: center; gap: 8px;
}
.setting-hint { margin: 0; font-size: 0.75rem; color: #7f8c8d; font-family: sans-serif; }

.es-input {
    background: #050505; border: 1px solid #444; color: #fff; padding: 12px;
    border-radius: 6px; font-family: 'Orbitron', sans-serif; font-size: 0.95rem;
    transition: 0.2s; width: 100%; box-sizing: border-box; outline: none;
}
.es-input:focus { border-color: #3498db; box-shadow: 0 0 10px rgba(52, 152, 219, 0.2); background: #0a0a0c; }
.es-input::placeholder { color: #555; }
select.es-input option { background: #111; color: #fff; }
.es-input.dark-field,
.es-input[type="text"],
.es-input[type="number"],
.es-input[type="url"] {
    background-color: #050505 !important;
    color: #fff !important;
    border: 1px solid #444 !important;
}
.es-input.dark-field:focus,
.es-input[type="text"]:focus,
.es-input[type="number"]:focus {
    border-color: #3498db !important;
    background-color: #0a0a0c !important;
}
.ws-field-ko { border-color: #e74c3c; }

/* Section Badge/Cadres (Logo, Map/Game/InOutro/Slots Frame) */
.logo-setting-section {
    display: flex; gap: 20px; align-items: stretch; background: #1a1a24;
    padding: 20px; border-radius: 8px; border: 1px solid #333;
}
.logo-preview-box {
    width: 100px; height: 100px; background: #000; border: 2px dashed #555;
    border-radius: 8px; display: flex; justify-content: center; align-items: center;
    overflow: hidden; flex-shrink: 0; position: relative;
}
#theme-logo-preview-img, #theme-map-frame-preview-img, #theme-game-frame-preview-img,
#theme-inoutro-frame-preview-img, #theme-slots-frame-preview-img {
    max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
}

.btn-save-themes-success {
    background: #27ae60 !important;
    color: #000 !important;
    transform: scale(1.02);
}

/* ==========================================
   LAYOUT DEUX COLONNES (liste des aventures + éditeur) — ex .themes-layout/.themes-sidebar
   ========================================== */
.avt-panel { text-align: left; }
.avt-layout { display: flex; gap: 20px; align-items: flex-start; min-height: 60vh; }

/* ── DURCISSEMENT DE LA MISE EN PAGE (v1.1.0) ────────────────────────────────────────────────
   Le GSt a signalé à trois reprises que la colonne de droite (« Sélectionnez une aventure pour
   la modifier », #theme-editor-empty) venait RECOUVRIR la liste de gauche, rendant la sélection
   impossible. Le défaut n'a jamais pu être reproduit ici : ni à douze largeurs de fenêtre
   (430 → 1920 px), ni pendant le chargement (mesures à 40/90/150/250/400/700/1100/1800/2600 ms),
   ni avec le canvas GM désactivé (page rendue dans le thème du site), ni en cherchant un enfant
   qui déborderait de sa colonne. Plutôt que de laisser le doute, on rend le chevauchement
   STRUCTURELLEMENT IMPOSSIBLE, quelle qu'en soit la cause — y compris une feuille de style
   extérieure que ce plugin ne contrôle pas :
     • la colonne de gauche ne peut plus être ni rétrécie ni dépassée (flex-basis fixe, nowrap) ;
     • les deux panneaux de droite sont forcés en position STATIQUE : une règle extérieure qui
       leur donnerait position:absolute/fixed ne peut plus les faire flotter par-dessus ;
     • un seul des deux panneaux peut être visible à la fois, et c'est une CLASSE portée par le
       conteneur qui l'arbitre (.avt-has-selection, posée par adventures.js) — plus un style en
       ligne par panneau, qui laissait la possibilité que les deux soient affichés ensemble.
   Les styles en ligne posés par le JS restent en place (aucune régression si le CSS est périmé) :
   ces règles-ci les doublent, elles ne les remplacent pas. */
.avt-layout { flex-wrap: nowrap; }
.avt-layout > .avt-sidebar { flex: 0 0 300px; max-width: 300px; }
.avt-layout > .avt-editor,
.avt-layout > .themes-editor-empty { flex: 1 1 0; min-width: 0; position: static; z-index: auto; }
.avt-layout.avt-has-selection > .themes-editor-empty { display: none !important; }
.avt-layout:not(.avt-has-selection) > .avt-editor { display: none !important; }

.avt-sidebar { width: 300px; flex-shrink: 0; background: #0f0f11; border: 1px solid #333; border-radius: 8px; padding: 15px; display: flex; flex-direction: column; }
.themes-list-container { flex-grow: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; max-height: 70vh; }

.theme-list-item {
    background: #1a1a24; border: 1px solid #333; padding: 10px; border-radius: 6px;
    cursor: pointer; transition: 0.2s; font-family: 'Orbitron', sans-serif; font-size: 0.9rem;
    display: flex; justify-content: space-between; align-items: center;
}
.theme-list-item:hover { background: #22222d; }
.theme-list-item.selected { border-color: #3498db; background: rgba(52, 152, 219, 0.1); }

.avt-editor { flex-grow: 1; min-width: 0; background: #1a1a24; border: 1px solid #333; border-radius: 8px; padding: 20px; }
.themes-editor-empty { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #555; min-height: 300px; background: #1a1a24; border: 1px dashed #333; border-radius: 8px; }
.themes-editor-empty i { font-size: 3rem; margin-bottom: 10px; }

.avt-code-readonly { display: inline-block; padding: 8px 12px; background: #050505; border: 1px dashed #444; border-radius: 6px; color: #7f8c8d; font-family: 'Orbitron', sans-serif; font-size: 0.85rem; }

/* Groupe SCÉNARIOS (P0, nouveau) */
.avt-routes-empty { font-size: 0.8rem; color: #7f8c8d; padding: 6px 0; }
.avt-routes-table { overflow-x: auto; }
.avt-routes-table-inner { width: 100%; border-collapse: collapse; font-size: 0.8rem; font-family: 'Orbitron', sans-serif; }
.avt-routes-table-inner th { text-align: left; color: #7f8c8d; font-size: 0.7rem; text-transform: uppercase; padding: 4px 8px; border-bottom: 1px solid #333; }
.avt-routes-table-inner td { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,0.05); color: #ecf0f1; }
.avt-status { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.68rem; font-weight: bold; }
.avt-status-publish { background: rgba(46,204,113,0.15); color: #2ecc71; }
.avt-status-draft { background: rgba(127,140,141,0.2); color: #bdc3c7; }
.avt-status-dev { background: rgba(243,156,18,0.18); color: #f39c12; }
.avt-route-sold-chip { display: inline-flex; align-items: center; gap: 5px; background: rgba(230,126,34,0.15); color: #e67e22; padding: 2px 8px; border-radius: 10px; font-size: 0.68rem; font-weight: bold; }
.avt-open-workshop-link { display: inline-block; margin-top: 12px; color: #3498db; font-size: 0.8rem; font-family: 'Orbitron', sans-serif; text-decoration: none; }
.avt-open-workshop-link:hover { text-decoration: underline; }

/* ==========================================
   VITRINE DU CATALOGUE / VENTE (ex .ws-showcase-* /.ws-sales-box du Scenario Workshop)
   ========================================== */
.ws-showcase-box {
    margin-top: 15px; padding: 15px; border-radius: 8px;
    background: rgba(241, 196, 15, 0.04); border: 1px solid #f1c40f;
}
.ws-showcase-title { color: #f1c40f; margin-bottom: 12px; display: block; font-weight: bold; }
.ws-showcase-teaser { width: 100%; resize: vertical; font-family: inherit; line-height: 1.4; }

.ws-cover-row { display: flex; gap: 12px; align-items: flex-start; }
.ws-cover-preview { width: 120px; height: 80px; flex-shrink: 0; overflow: hidden; }
.ws-cover-preview img, .ws-cover-preview video { max-width: 100%; max-height: 100%; object-fit: contain; }
.ws-cover-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; flex-grow: 1; }
.ws-cover-filename { font-size: 0.7rem; color: #7f8c8d; word-break: break-all; }

.ws-scale-hint { display: block; margin-top: 4px; line-height: 1.35; min-height: 2.7em; }

.ws-md-help { display: block; margin-top: 6px; font-size: 0.7rem; color: #7f8c8d; font-family: sans-serif; line-height: 1.6; }
.ws-md-help code {
    background: #15151d; border: 1px solid #3a3a48; border-radius: 3px;
    padding: 1px 5px; margin: 0 2px; color: #f1c40f; font-size: 0.68rem;
}

.ws-showcase-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 12px; }

.ws-url-row { display: flex; gap: 8px; align-items: stretch; }
.ws-url-row .es-input { flex: 1 1 auto; min-width: 0; }
.ws-url-row .klugle-btn-sm { flex: 0 0 auto; white-space: nowrap; cursor: pointer; }
.ws-url-row .klugle-btn-sm:disabled { opacity: 0.35; cursor: not-allowed; }

.ws-url-status { display: block; margin-top: 5px; }
.ws-url-status.is-ok { color: #2ecc71; }
.ws-url-status.is-ko { color: #e74c3c; }

.ws-reviews-list { display: flex; flex-direction: column; gap: 10px; }
.ws-reviews-empty { font-size: 0.75rem; color: #7f8c8d; padding: 6px 0; }
.ws-review-row {
    display: grid; grid-template-columns: 110px 1fr 28px; gap: 6px;
    background: rgba(0,0,0,0.3); border: 1px solid #333; border-radius: 6px; padding: 8px;
}
.ws-review-rating { font-size: 0.8rem; }
.ws-review-text { grid-column: 1 / -1; resize: vertical; font-family: inherit; line-height: 1.4; }
/* v1.6.0 — Barre de langue d'un texte traduisible (retour GSt du 30/09). */
.kg-lang-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 2px 0 6px; }
.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; }
.ws-review-meta { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 160px; gap: 6px; }
.ws-review-meta input[type="date"] { color-scheme: dark; }

.ws-icon-btn {
    width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid #444; border-radius: 4px; color: #bdc3c7;
    font-size: 0.7rem; cursor: pointer; transition: 0.2s; padding: 0; flex-shrink: 0;
}
.ws-icon-btn:hover { background: #3498db; border-color: #3498db; color: #fff; }
.ws-icon-btn-danger { border-color: #e74c3c; color: #e74c3c; }
.ws-icon-btn-danger:hover { background: #e74c3c; border-color: #e74c3c; color: #fff; }

.ws-info-badge { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #2c3e50; color: #5dade2; border: 1px solid #3498db; font-size: 0.65rem; font-weight: bold; font-style: italic; cursor: help; flex-shrink: 0; }

/* ==========================================
   APPARENCE SUR LA CARTE (marqueur classique / icône personnalisée + outil d'ancrage)
   ========================================== */
.marker-type-selector { display: flex; gap: 10px; margin-bottom: 15px; }
.btn-marker-type {
    flex: 1; background: #111; color: #bdc3c7; border: 2px solid #333;
    padding: 10px; border-radius: 6px; cursor: pointer; font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem; font-weight: bold; transition: 0.2s;
}
.btn-marker-type.active { background: #3498db; color: #fff; border-color: #2980b9; }

.marker-colors-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
    gap: 10px; padding: 10px; background: rgba(0,0,0,0.5); border-radius: 8px;
}
.color-swatch {
    width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff;
    cursor: pointer; transition: transform 0.2s; box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}
.color-swatch:hover { transform: scale(1.1); }
.color-swatch.selected { outline: 3px solid #f1c40f; outline-offset: 2px; }

.anchor-tool-container { display: flex; gap: 20px; align-items: flex-start; margin-top: 10px; flex-wrap: wrap; }
.anchor-preview-box {
    position: relative; width: 120px; height: 120px; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAOklEQVQYV2NkYGAwYcSPgHwGBoZ/CMyYQBSnIRB/AInDhTAF2A0h1Q0k+wyhXkCykKhuINEPcC+Q7AUAtygM+1l9pYkAAAAASUVORK5CYII=');
    border: 2px solid #555; border-radius: 8px; cursor: crosshair; overflow: hidden; display: flex; justify-content: center; align-items: center; flex-shrink: 0;
}
.anchor-preview-img { max-width: 100%; max-height: 100%; pointer-events: none; }
.anchor-crosshair {
    position: absolute; width: 10px; height: 10px; pointer-events: none;
    transform: translate(-50%, -50%); display: none;
}
.anchor-crosshair::before, .anchor-crosshair::after { content: ''; position: absolute; background: #e74c3c; }
.anchor-crosshair::before { top: 4px; left: 0; width: 10px; height: 2px; }
.anchor-crosshair::after { top: 0; left: 4px; width: 2px; height: 10px; }

/* ==========================================
   SÉLECTEUR DE MÉDIATHÈQUE (#ws-media-picker-overlay) — recopié à l'identique de workshop.css
   ========================================== */
/* v1.12.0 : le sélecteur est la fenêtre PARTAGÉE (media-picker.css). Seul l'en-tête reste : la fenêtre de synchro l'utilise. */
.ws-media-picker-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-shrink: 0; }

/* ==========================================
   RESPONSIVE — mobile (~430px) : layout deux colonnes -> empilé sous 700px, même seuil que
   l'éditeur de thème historique (.themes-layout du Scenario Workshop visait un panneau de modale
   fixe à 800-900px, jamais testé sous cette largeur ; 700px est le seuil retenu ici pour cette
   page, désormais une page pleine largeur).
   ========================================== */
@media (max-width: 700px) {
    .avt-layout { flex-direction: column; }
    .avt-sidebar { width: 100%; }
    .themes-list-container { max-height: 40vh; }
    .ws-showcase-facts { grid-template-columns: 1fr; }
    .ws-review-row { grid-template-columns: 1fr; }
    .anchor-tool-container { flex-direction: column; align-items: stretch; }
}

/* ── SÉLECTEURS DE DATE ET D'HEURE : rendre leur icône visible ─────────────────────────────────
   Le petit calendrier d'un <input type="date"> est dessiné par le NAVIGATEUR, pas par cette
   feuille. Il se dessine en sombre parce que le navigateur croit la page claire — et sur le fond
   encre des écrans de Game Master, il devenait invisible : le champ semblait ne pas en avoir.
   `color-scheme: dark` est la façon normalisée de le lui dire ; elle recolore aussi le calendrier
   déroulant et les flèches des champs numériques, là où un filtre d'inversion n'aurait retouché
   que l'icône en laissant la fenêtre du calendrier illisible.
   ⚠️ Répétée dans chaque feuille d'écran À DESSEIN : ce projet n'a pas de feuille commune aux
   pages GM — .klugle-search elle-même y est recopiée — et créer une dépendance nouvelle pour trois
   lignes coûterait plus cher que la répétition. Signalé pour que la prochaine correction les
   trouve toutes. */
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input[type="number"] {
    color-scheme: dark;
}

/* ── PÉRIODES D'OUVERTURE (bloc VENTE, adventures.js : wsOpeningPeriodRowHtml) ─────────────────
   Même gabarit que les lignes des heures d'ouverture juste au-dessus (.ws-oh-row, styles en ligne
   dans le JS) : ligne souple, champs compacts en 0.8rem, séparateur à peine visible. Le libellé
   prend la place restante et passe à la ligne sous les dates quand la colonne est étroite. */
.avt-op-list { display: flex; flex-direction: column; }
.avt-op-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.avt-op-num { width: 18px; flex: 0 0 18px; text-align: center; color: #7f8c8d; font-family: 'Orbitron', sans-serif; font-size: 0.75rem; }
/* .setting-group label (gras, 0.85rem) s'applique aussi à ces <label> : on le ramène au gabarit des jours. */
.setting-group label.avt-op-field { display: inline-flex; align-items: center; gap: 6px; font-weight: normal; font-size: 0.8rem; color: #ecf0f1; }
.avt-op-row .es-input { width: auto; padding: 4px 6px; font-size: 0.8rem; }
/* Largeur FIXE des dates : en largeur auto, Orbitron n'ayant pas des chiffres de chasse égale, les colonnes « Au » se décalaient d'une ligne à l'autre. */
.avt-op-row input[type="date"].es-input { width: 150px; flex: 0 0 150px; }
.avt-op-row .avt-op-label { flex: 1 1 180px; min-width: 150px; }
.avt-op-row .avt-op-clear { padding: 2px 8px; font-size: 0.75rem; }
/* .es-input.dark-field impose sa bordure en !important : la marque d'erreur doit l'être aussi. */
.avt-op-row .es-input.ws-field-ko { border-color: #e74c3c !important; }
.avt-op-row.is-ko .avt-op-num { color: #e74c3c; font-weight: bold; }
.avt-op-error { display: block; font-size: 0.75rem; color: #ff7b6b; font-family: sans-serif; font-weight: bold; }


/* ── Fenêtre [SYNC] de l'aventure (#avt-sync-overlay, adventures.js module 13) ─────────────────
   Plus large que les modales de confirmation (un tableau de scénarios et un compte rendu), texte
   aligné à gauche, police d'interface : le compte rendu est de la lecture, pas un titre. */
.custom-modal.avt-sync-modal { max-width: 820px; max-height: 90vh; overflow-y: auto; text-align: left; font-family: system-ui, 'Segoe UI', sans-serif; padding: 22px 24px; }
.avt-sync-modal .avt-sync-intro { margin: 10px 0 14px; font-size: 0.85rem; }
.avt-sync-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; color: var(--tcc-texte); }
.avt-sync-table th { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--tcc-bord-fort); color: var(--tcc-texte-doux); font-weight: 700; }
.avt-sync-table td { padding: 6px 8px; border-bottom: 1px solid var(--tcc-bord-doux); }
.avt-sync-table td:first-child, .avt-sync-table th:first-child { width: 28px; }
.avt-sync-modal .modal-buttons-horizontal { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.avt-sync-modal button:disabled { opacity: 0.45; cursor: not-allowed; }
.avt-sync-wait, .avt-sync-err { margin: 10px 0 0 !important; font-size: 0.85rem; }
.avt-sync-err { color: #ff7b6b !important; font-weight: 700; }
/* Le compte rendu est rendu par le gabarit PHP de la page d'admin (classes .notice de WordPress,
   absentes ici) : on lui donne un cadre et une couleur de texte lisibles sur l'encre. */
.avt-sync-report .notice { margin-top: 14px; padding: 10px 14px; border-radius: 8px; border-left: 4px solid var(--tcc-fluo); background: var(--tcc-surface); color: var(--tcc-texte); max-width: none !important; }
.avt-sync-report .notice-warning { border-left-color: #f0b429; }
.avt-sync-report .notice-error { border-left-color: #e74c3c; }
.avt-sync-report .notice p, .avt-sync-report .notice li { color: var(--tcc-texte); margin: 4px 0; font-size: 0.85rem; }
.avt-sync-report code, .avt-sync-report pre { color: var(--tcc-fluo); background: var(--tcc-encre-profond); }

/* Champ en erreur : doit battre la bordure imposée en !important aux champs sombres (.es-input.dark-field). */
.es-input.ws-field-ko { border-color: #e74c3c !important; }

/* v1.8.0 (retour GM du 18/10) : Nom de l'aventure et Code Aventure + « Régénérer » sur une seule ligne ;
   le code garde sa largeur, le nom prend le reste. Repli en colonne sur écran étroit. */
/* v1.9.0 : bandeau du catalogue — texte, couleur, retour au fluo, aperçu (même police et casse que dans l'app). */
.avt-ribbon-row { display: flex; align-items: center; gap: 8px; }
.avt-ribbon-row #edit-theme-ribbon-text { flex: 1 1 auto; min-width: 0; }
.avt-ribbon-color { width: 44px; height: 34px; padding: 2px; border: 1px solid #444; border-radius: 6px; background: #111; cursor: pointer; flex: 0 0 auto; }
.avt-ribbon-reset { flex: 0 0 auto; }
.avt-ribbon-preview { flex: 0 0 auto; min-width: 70px; max-width: 140px; padding: 4px 10px; border-radius: 4px; font-weight: 800; font-size: 0.7rem; letter-spacing: 0.05em; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 2px 6px rgba(17, 51, 34, 0.3); }
.avt-ribbon-preview:empty { display: none; }
.avt-name-code-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.avt-name-code-row .setting-group { margin: 0; }
@media (max-width: 700px) {
    .avt-name-code-row { grid-template-columns: 1fr; }
}

/* ==========================================
   v1.10.0 — LISTE FLOTTANTE, CHAMPS IMAGE SUR UNE LIGNE, PANNEAUX (retour GSt du 19/10)
   ========================================== */
/* La colonne des aventures reste à l'écran pendant qu'on fait défiler l'éditeur ; trop longue, c'est SA liste
   qui défile. Décalée sous la barre d'administration de WordPress quand elle est affichée. */
.avt-layout > .avt-sidebar { position: sticky; top: 16px; align-self: flex-start; max-height: calc(100vh - 32px); box-sizing: border-box; }
body.admin-bar .avt-layout > .avt-sidebar { top: 48px; max-height: calc(100vh - 64px); }
.avt-layout > .avt-sidebar .themes-list-container { max-height: none; min-height: 0; }

/* Panneau d'un groupe de réglages (Habillage du jeu, Photo souvenir…). */
.avt-group { background: rgba(255,255,255,0.03); padding: 15px; border-radius: 8px; border: 1px solid #333; margin-top: 15px; }
.avt-group-title { display: block; font-weight: bold; margin-bottom: 12px; }

/* Champ image (v1.12.0) : à gauche titre + ⓘ, aide courte, puis URL | icône Médiathèque | icône Retirer ; à droite la
   miniature, du haut du titre au bas du champ URL. */
.avt-imgfield { display: flex; align-items: stretch; gap: 10px; }
.avt-imgfield + .avt-imgfield { margin-top: 14px; }
.avt-imgfield-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.avt-imgfield-head { display: flex; align-items: center; gap: 8px; margin: 0; }
.avt-imgfield-head label { margin: 0; line-height: 1.2; }
.avt-imgfield-hint { font-size: 0.7rem; color: #7f8c8d; line-height: 1.3; margin: 2px 0 4px; }
.avt-imgfield-row { display: flex; align-items: center; gap: 6px; margin-top: auto; }
.avt-imgfield-row > input { flex: 1 1 auto; min-width: 0; width: auto; margin: 0; }
.avt-ico-btn { flex: 0 0 auto; width: 40px; height: 40px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem; }
.avt-btn-media { background: #8e44ad; border-color: #5b2c6f; color: #fff; }
.avt-imgfield-thumb { width: 96px; height: auto !important; min-height: 64px; flex: 0 0 96px; align-self: stretch; box-sizing: border-box; }
.avt-imgfield-thumb img, .avt-imgfield-thumb video { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

/* Bulle d'aide ⓘ : le texte complet, au survol ou au focus clavier. */
.avt-info { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
    border: 1px solid #3498db; border-radius: 50%; color: #3498db; font: italic bold 0.65rem Georgia, serif; cursor: help; flex: 0 0 auto; }
.avt-info:hover, .avt-info:focus { background: #3498db; color: #fff; outline: none; }
.avt-info:hover::after, .avt-info:focus::after {
    content: attr(data-tip); position: absolute; top: calc(100% + 6px); left: -8px; z-index: 60;
    width: max-content; max-width: min(380px, 80vw); white-space: normal; text-align: left;
    background: #0f0f11; border: 1px solid #3498db; border-radius: 6px; padding: 8px 10px; box-shadow: 0 6px 18px rgba(0,0,0,0.6);
    color: #ecf0f1; font: normal 0.74rem/1.45 Arial, Helvetica, sans-serif; text-transform: none; }

@media (max-width: 700px) {
    .avt-layout > .avt-sidebar, body.admin-bar .avt-layout > .avt-sidebar { position: static; max-height: none; }
    .avt-layout > .avt-sidebar .themes-list-container { max-height: 40vh; }
    .avt-imgfield-thumb { width: 64px; flex-basis: 64px; }
}

/* v1.13.0 — Photo souvenir : positions et tailles du texte, en %, dans un petit tableau. */
.avt-pm-pos { display: grid; grid-template-columns: auto 92px 92px; gap: 6px 10px; align-items: center; justify-content: start; margin-top: 10px; }
.avt-pm-pos-corner { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: #bdc3c7; }
.avt-pm-pos-col { font-size: 0.7rem; color: #7f8c8d; text-align: center; }
.avt-pm-pos label { margin: 0; font-size: 0.8rem; }
.avt-pm-pos input { width: 92px; margin: 0; padding: 6px 8px; text-align: right; box-sizing: border-box; }