/* File: organigramme/organigramme.css - Styles pour le diagramme de flux énergétique
// Desc: Feuille de style CSS pour l'organigramme de flux énergétique
// Version 1.0.83
// © 2025 DNAvatar.org - Arnaud Maignan
// Licensed under Apache License 2.0 with Commons Clause.
// See LICENSE_HEADER.txt for full terms.
// Logs: v1.0.83 barre titre — moins de padding flou / offset synthese ; séparateur plus haut ; .visu_epoch-name line-height 1.3 (2e ligne lisible) ; style.css titre h1 compact + --visu-title-h 120px.
// Logs: v1.0.82 barre titre visu — align-items flex-start (synthese + flou) ; .visu_epoch-name 14px — ligne époque moins haute quand nom sur 2 lignes.
// Logs: v1.0.81 exceptions : coque EVENEMENT cursor default ; tuiles événements / SKIP / panneaux ⚗🛰 cursor pointer !important (surcharge img[alt] help).
// Logs: v1.0.80 #visu-panel .flux-circle-bg cursor help !important — surcharge pointer/default/tooltips.js sur tous les logos cercles (dont albédo).
// Logs: v1.0.79 exceptions albédo/tooltip sous #flux-diagram:not(.hide-organigram-arrows) pour gagner sur les règles suivantes ; override data-tooltip-initialized quand détail masqué.
// Logs: v1.0.78 hide-organigram-arrows + détail albédo masqué : pointer-events none (visibility:hidden laisse encore les hits ; curseur help inactif).
// Logs: v1.0.77 SKIP #plot-anim-toggle sans icon-button/.flux-button-cell (.icon-button dans style.css = grayscale sur tout le nœud) ; pulse/hover `.organigram-logo` fusionné (timeline + panneaux + SKIP)
// Logs: v1.0.76 classe .organigram-buttons sur panneaux #organigram-config-wrap / #observation-config-wrap (main.js) ; layout par id (#plot-anim-toggle SKIP hors de ce jeu depuis v1.0.77)
// Logs: v1.0.74 SKIP : flux-circle-bg sans grayscale (action directe) ; titres DETAILS/OBS — glow titre au seul survol titre ; EVENEMENT / SKIP — glow titre au survol zone ; pulse logos = event-logo-pulse / event-logo-pulse-img (ergo_button) + hover blanc
// Logs: v1.0.73 classe unique .organigram-logo (retrait .timeline-event-logo / .organigram-unified-logo sur flux) ; pulse + hover vert --retro-clicable ; plus de grayscale
// Logs: v1.0.72 #plot-anim-toggle.plot-anim-toggle--scenario-hidden — display none !important (SKIP masqué si order.length===1 ou 📱)
// Logs: v1.0.71 retrait masque compute-loading sur logos/SKIP — voile #organigram-calculation-overlay (style.css + loader_panels)
// Logs: v1.0.69 retrait styles .visu_epochs-title (span EPOQUES supprimé de visu_radiatif.html)
// Logs: v1.0.8 un seul tooltip (pas title), cursor help sur tous les alt
// Logs: v1.0.9 bloc CONFIGURATION + ⚗ (titres alignés timeline SCENARIO/EPOQUES)
// Logs: v1.0.10 .organigram-config-heading : 04B_03, marge bas, pas de trait (hors .flux-diagram)
// Logs: v1.0.11 organigram-config-wrap : largeur min (fit-content), collé bord gauche
// Logs: v1.0.12 commentaire : libellé CONFIG.
// Logs: v1.0.13 commentaire : PILOTAGE (titre au-dessus du bouton ⚗, main.js)
// Logs: v1.0.14 organigram-config-row + albedo_percent à droite de ⚗
// Logs: v1.0.15 fine_tuning_cloud_bary dans wrap (style badge + tooltip)
// Logs: v1.0.16 hide-organigram-arrows : exclure #organigram-config-wrap (badges PILOTAGE visibles)
// Logs: v1.0.17 badges PILOTAGE (% albédo, 🧩 nuages) visibles seulement si ⚗ selected (ON)
// Logs: v1.0.18 badges PILOTAGE : override visibility hidden de hide-organigram-arrows quand ⚗ est selected
// Logs: v1.0.19 albedo_percent hors PILOTAGE — CSS 🧩 nuages seul dans le wrap
// Logs: v1.0.20 PILOTAGE : wrap align-items flex-start ; ligne ⚗ justify-content flex-start
// Logs: v1.0.21 badge 🧩 : 2 lignes + panneau alt (2s) au-dessus à droite
// Logs: v1.0.22 panneau alt nuages : classe --fixed (viewport), plus de absolute dans le badge
// Logs: v1.0.23 hide-organigram-arrows : labels sans unité connue (vert) toujours visibles — liste explicite des classes à masquer
// Logs: v1.0.24 badge 🧩 compact en 3 lignes (🔺🧩🔻 / % / mini-slider 4ch)
// Logs: v1.0.25 badge 🧩 sorti de #organigram-config-wrap — enfant direct de #flux-diagram, position absolute, sélecteurs simplifiés
// Logs: v1.0.26 badge 🧩 : animation de bordure pulsante rouge-noir (même esprit que SCENARIO event-logo-pulse-img)
// Logs: v1.0.27 observation_title : même font/size que PILOTAGE (.organigram-config-heading)
// Logs: v1.0.28 OBSERVATIONS : wrap #observation-config-wrap (main.js) ; hide-organigram-observation-metrics + .flux-label-plain-metric
// Logs: v1.0.29 hide-organigram-observation-metrics : masquer aussi .flux-arrow (🛰 OFF)
// Logs: v1.0.56 ACTION + #timeline-action-block ; #plot-anim-toggle icon-button + SKIP + plot-anim-blink ; sélecteurs #timeline-events-logos descendant
// Logs: v1.0.68 couleurs rétro : --retro-green (clicable 04B_03) / --retro-orange (dates, non-clicable) ; synthese_Temp-col-right couleur dynamique par JS
// Logs: v1.0.67 #cell-timeline-scenario-logos : pointer-events none (ID plus spécifique) ; seul .flux-circle-bg auto (contient les logos)
// Logs: v1.0.66 flux-cell--scenario-logos-shell + circleBg : pointer-events none ; seuls #timeline-events-logos et .organigram-logo en pointer-events auto
// Logs: v1.0.65 .flux-grid-item + .flux-label : pointer-events none global (cases vides 3×3 ne bloquent plus) ; exceptions data-tooltip + albedo/bary
// Logs: v1.0.64 #plot-anim-toggle : retrait halo vert checked/selected (action directe, pas toggle) ; text-shadow/box-shadow none sur circleBg
// Logs: v1.0.63 flux-cell--scenario-logos-shell .flux-grid-item + .flux-label : pointer-events none (gridItems bloquaient clics sur logos domSlot)
// Logs: v1.0.62 #plot-anim-toggle .flux-circle-bg > span : event-logo-pulse-img (glow cyan/jaune, même effet que ⚗/🛰) ; retrait plot-anim-blink (opacité seule)
// Logs: v1.0.61 #flux-diagram .flux-label.organigram-config-heading : sans cadre (comme DETAILS) ; #plot-anim-toggle sans border-radius circulaire sur la cellule
// Logs: v1.0.60 domSlot scénario : #cell-timeline-scenario-logos.flux-cell--scenario-logos-shell ; retrait .timeline-action-block ; #plot-anim-toggle sans casser la grille flux-cell
// Logs: v1.0.59 badge flou : grille 2 col (.organigram-bary-face--two-cols) — gauche icônes+slider, droite puzzle+%
// Logs: v1.0.58 badge flou : sélecteur .organigram-bary-line-pct .organigram-bary-mini-slider après règle 6ch (flex + width auto)
// Logs: v1.0.57 badge flou titre : jauge (range) dans .organigram-bary-line-pct à côté du % (retrait tirets)
// Logs: v1.0.55 badge flou titre : .organigram-bary-line-pct + .organigram-bary-dash (------ + %)
// Logs: v1.0.54 .organigram-picto-inactived (grayscale+opacity) : picto cell-geometrie si OBSERVATIONS OFF + marqueurs spectraux plot.js
// Logs: v1.0.30 hide-organigram-observation-metrics : picto #cell-geometrie (.flux-circle-bg > span) ; reemis + albedo-btn toujours visibles (v1.0.34)
// Logs: v1.0.31 PALEOMAP / C.R. Scotese (organigramme seul) : teinte & contour type .ppm-label ; visibles si ⚗/🛰 OFF
// Logs: v1.0.33 commentaires : DETAILS (ex PILOTAGE, titre main.js) ; OBSERVATIONS fermées par défaut
// Logs: v1.0.35 albédo sans vert : règles #cell-albedo-btn après .flux-button-cell.checked/selected (cascade)
// Logs: v1.0.36 visu_radiatif : barre scénario une ligne (logos + 🎞 compact à droite), sans libellé SCENARIO — DETAILS/organigramme inchangés
// Logs: v1.0.37 nœuds domSlot dans #flux-diagram (obsolète — retiré v1.0.42)
// Logs: v1.0.38 badge 🧩 (flou) : top explicite au-dessus du nœud reemis (EDS), plus bottom:auto — évite remontée visuelle en haut du graphe
// Logs: v1.0.39 badge 🧩 dans .title-container (#title-flou-scientifique-slot) ; sans border ; masqué si .flou-scientifique--hidden (⚗ OFF)
// Logs: v1.0.40 CO₂ / CH₄ / H₂O : halo blanc comme albédo — retrait contour vert (checked/selected)
// Logs: v1.0.41 title-content-row : 2 col — Flou scientifique à gauche, synthèse cyan à droite (visu_radiatif)
// Logs: v1.0.42 retrait .flux-dom-slot ; barre logos + 🎞 : .title-scenario-row + .timeline-scenario-toolbar (visu_radiatif)
// Logs: v1.0.43 logos + 🎞 dans #flux-diagram (domSlot direct) ; .title-scenario-row → #flux-diagram #timeline-events-logos
// Logs: v1.0.44 flou-scientifique toujours visible (retrait flou-scientifique--hidden) ; bary-face row (icônes | jauge | %)
// Logs: v1.0.45 badge flou 2 colonnes : [icônes+jauge à gauche] | [% à droite] ; badge flex-row sans border
// Logs: v1.0.46 .flux-label.organigram-fine-tuning-bary-badge border:none !important ; jauge 10ch / min 72px / h 8px
// Logs: v1.0.47 jauge intermédiaire 8ch / min 60px / h 6px ; .organigram-bary-pct vert (#4ade80)
// Logs: v1.0.48 jauge plus compacte 6ch / min 48px / h 5px (entre 4ch et 8ch)
// Logs: v1.0.49 mini-jauge flou : piste + curseur verts (#4ade80) ; curseur losange (clip-path) ; retrait pulse rouge SCENARIO
// Logs: v1.0.53 retrait CSS fantôme spectre — grayscale/opacity inline dans plot.js (hide-organigram-* lus sur #flux-diagram)
// Logs: v1.0.51 #timeline-events-logos : var(--slot-event-logo-px, 65px) pour tuiles + variante .btn-year-indexed (ratio46/65)
// Logs: v1.0.50 range Firefox : ::-moz-focus-outer border 0 (contour parasite)
// Logs: v1.0.34 🛰 OFF : masquer seul picto Géométrie ; EDS (reemis) + albédo (btn) toujours visibles ; albédo sans halo vert (halo blanc)
// Logs: v1.0.32 retrait .credits-paleomap-badge (dialogue index — hors périmètre organigramme)
*/

:root {
    --slot-event-logo-px: 65px;
}

.controle-simulation {
    padding: 0 !important;
    height: fit-content;
    position: relative;
    overflow: visible;
    border-left: none !important;
}
.flux-diagram-wrapper {
    position: relative;
    width: fit-content;
    height: fit-content;
}

.flux-diagram {
    width: 395px;
    position: relative;
    outline: none !important;
    font-family: 'Tahoma', 'Roboto', 'Verdana', sans-serif;
    /* border, border-radius, box-shadow, background → .divGlass (style.css) */
}

/* 🎞 SKIP (#plot-anim-toggle) : flux-cell uniquement — pas icon-button (style.css grise tout le bloc) ni flux-button-cell (grayscale sur .flux-circle-bg organigramme) */
.flux-diagram #plot-anim-toggle.flux-cell {
    pointer-events: none;
    border-radius: 0 !important;
    background: none !important;
}
.flux-diagram #plot-anim-toggle.flux-cell .flux-circle-bg {
    pointer-events: auto;
    cursor: pointer !important;
    filter: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    border-radius: 0 !important;
}
.flux-diagram #plot-anim-toggle.flux-cell .flux-circle-bg:hover {
    filter: none !important;
}

/* Masquage SKIP : events.js — plot-anim-toggle--scenario-hidden */
.flux-diagram #plot-anim-toggle.plot-anim-toggle--scenario-hidden {
    display: none !important;
}

/* Titres ACTION / SKIP : même esprit que DETAILS & OBSERVATIONS (04B_03, pas de boîte .flux-label) */
#flux-diagram .flux-label.organigram-config-heading {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none;
    font-family: '04B_03', 'Tahoma', 'Roboto', 'Verdana', sans-serif;
    font-size: 12px;
    font-weight: lighter;
    text-align: center;
    align-self: center;
    line-height: 1.2;
    color: var(--retro-clicable);
}
#cell-timeline-scenario-logos .flux-label-container .organigram-config-heading {
    text-align: center;
}

/* Coque flux 3×3 pour logos scénario (domSlot) : disque central transparent, logos au centre */
.flux-cell.flux-cell--scenario-logos-shell {
    overflow: visible;
}
.flux-cell--scenario-logos-shell .flux-circle-bg {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    cursor: default;
}
.flux-cell--scenario-logos-shell .flux-circle-bg:hover {
    transform: translate(-50%, -50%);
}
/* Div parente + tous ses descendants insensibles ; seuls les .organigram-logo sont cliquables */
#cell-timeline-scenario-logos,
#cell-timeline-scenario-logos * {
    pointer-events: none;
}
#cell-timeline-scenario-logos .organigram-logo {
    pointer-events: auto;
}

/* Logos de scénario dans #flux-diagram (centre de #cell-timeline-scenario-logos) */
#flux-diagram #timeline-events-logos {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    box-sizing: border-box;
}
#flux-diagram #timeline-events-logos.year-indexed {
    gap: 8px;
    justify-content: center;
}
#flux-diagram #timeline-events-logos .organigram-logo {
    margin-left: -15px;
    --_slot-logo: var(--slot-event-logo-px, 65px);
    width: var(--_slot-logo);
    height: var(--_slot-logo);
    min-width: var(--_slot-logo);
    min-height: var(--_slot-logo);
    padding: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--_slot-logo) * 35 / 65);
    line-height: 1;
    object-fit: contain;
    cursor: pointer;
    opacity: 1;
    border: none;
    transition: transform 0.2s ease, color 0.25s ease, text-shadow 0.25s ease, filter 0.25s ease;
}
/* Pulse : mêmes keyframes que ergo_button.css — une seule fam. de sélecteurs (événements + panneaux ⚗🛰 + SKIP) */
#flux-diagram #timeline-events-logos .organigram-logo:not(img),
#flux-diagram #plot-anim-toggle .organigram-logo:not(img),
.flux-diagram .organigram-buttons .organigram-logo:not(img) {
    animation: event-logo-pulse 1.6s ease-in-out infinite;
}
#flux-diagram #timeline-events-logos img.organigram-logo,
#flux-diagram #plot-anim-toggle img.organigram-logo,
.flux-diagram .organigram-buttons img.organigram-logo {
    animation: event-logo-pulse-img 1.6s ease-in-out infinite;
}
#flux-diagram #timeline-events-logos .organigram-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#flux-diagram #timeline-events-logos .organigram-logo:hover,
#flux-diagram .flux-circle-bg:hover #timeline-events-logos .organigram-logo,
#flux-diagram #plot-anim-toggle .organigram-logo:hover,
#flux-diagram #plot-anim-toggle .flux-circle-bg:hover .organigram-logo,
.flux-diagram .organigram-buttons .organigram-logo:hover {
    transform: scale(1.08);
    animation: none;
    filter: drop-shadow(0 0 0px rgba(0, 0, 0, 1))
            drop-shadow(0 0 2px rgba(255, 255, 255, 0.6))
            drop-shadow(0 0 3px rgba(255, 255, 255, 0.3));
}
#flux-diagram #timeline-events-logos .organigram-logo:not(img):hover,
#flux-diagram #plot-anim-toggle .organigram-logo:not(img):hover,
.flux-diagram .organigram-buttons .organigram-logo:not(img):hover {
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.6),
                 0 0 3px rgba(255, 255, 255, 0.4);
}
#flux-diagram #timeline-events-logos img.organigram-logo:hover,
#flux-diagram #plot-anim-toggle img.organigram-logo:hover,
.flux-diagram .organigram-buttons img.organigram-logo:hover {
    filter: drop-shadow(0 0 0px rgba(0, 0, 0, 1))
            drop-shadow(0 0 2px rgba(255, 255, 255, 0.6))
            drop-shadow(0 0 3px rgba(255, 255, 255, 0.3));
}
#flux-diagram #timeline-events-logos .organigram-logo:active,
#flux-diagram #plot-anim-toggle .organigram-logo:active,
.flux-diagram .organigram-buttons .organigram-logo:active {
    transform: scale(0.95);
}
#flux-diagram #timeline-events-logos .organigram-logo.btn-year-indexed {
    width: calc(var(--_slot-logo) * 46 / 65);
    height: calc(var(--_slot-logo) * 46 / 65);
    min-width: calc(var(--_slot-logo) * 46 / 65);
    min-height: calc(var(--_slot-logo) * 46 / 65);
    font-size: calc(var(--_slot-logo) * 26 / 65);
    margin-left: 0;
}

/* SKIP : même lissage hover que les tuiles événements (🎞 est dans .flux-circle-bg, pas sous #timeline-events-logos) */
#flux-diagram #plot-anim-toggle .organigram-logo {
    transition: transform 0.2s ease, color 0.25s ease, text-shadow 0.25s ease, filter 0.25s ease;
}

/* ⚗ 🛰 : boutons avec .organigram-logo — désature annulée (icon-button hors organigramme impose grayscale) ; pulse/hover commun bloc timeline ci-dessus */
.flux-diagram .organigram-buttons .organigram-logo {
    transition: transform 0.2s ease, filter 0.25s ease, text-shadow 0.25s ease;
    filter: none;
    opacity: 1;
}

/* Panneaux ⚗ DETAILS / 🛰 OBS — mise en page sur les wrappers (#plot-anim-toggle hors de ce jeu de classes) */
.flux-diagram > #organigram-config-wrap.organigram-buttons,
.flux-diagram > #observation-config-wrap.organigram-buttons {
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: fit-content;
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
    overflow: visible;
    pointer-events: auto;
}
#organigram-config-wrap.organigram-buttons {
    position: absolute;
    bottom: 10px;
    left: 10px;
    align-items: flex-start;
}
#observation-config-wrap.organigram-buttons {
    position: absolute;
    top: 10px;
    right: 10px;
    left: auto;
    bottom: auto;
    align-items: flex-end;
}
#organigram-config-wrap.organigram-buttons .organigram-config-row,
#observation-config-wrap.organigram-buttons .organigram-config-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}
#organigram-config-wrap.organigram-buttons .organigram-config-row {
    justify-content: flex-start;
    gap: 10px;
}
#observation-config-wrap.organigram-buttons .organigram-config-heading {
    text-align: right;
    align-self: flex-end;
}
#observation-config-wrap.organigram-buttons .organigram-config-row {
    justify-content: flex-end;
    margin-right: 25px;
}
#organigram-config-wrap.organigram-buttons #three-play-indicator,
#observation-config-wrap.organigram-buttons #observation-metrics-toggle {
    position: static;
    flex-shrink: 0;
    font-size: 45px;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 2px;
    font-family: var(--font-emoji);
}

/* O(f(1)) — police timeline, pas .flux-diagram */
.organigram-config-heading {
    font-family: '04B_03', 'Tahoma', 'Roboto', 'Verdana', sans-serif;
    font-size: 12px;
    font-weight: lighter;
    color: var(--retro-clicable);
    text-align: left;
    align-self: flex-start;
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
    display: block;
    margin: 0 0 6px 0;
    padding: 0;
    border: none;
    white-space: nowrap;
    transition: text-shadow 0.25s ease;
}
.organigram-config-heading::before,
.organigram-config-heading::after {
    content: none;
    display: none;
}

/* Titres tableau organigramme : glow blanc commun */
.flux-diagram .organigram-unified-title {
    color: var(--retro-clicable) !important;
    transition: text-shadow 0.25s ease;
}
.flux-diagram .organigram-buttons:hover .organigram-unified-title,
.flux-diagram .organigram-buttons:has(.organigram-logo:hover) .organigram-unified-title,
.flux-diagram .organigram-buttons .organigram-unified-title:hover,
.flux-diagram #plot-anim-toggle:hover .organigram-unified-title,
.flux-diagram #plot-anim-toggle:has(.organigram-logo:hover) .organigram-unified-title {
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.9),
                 0 0 4px rgba(255, 255, 255, 0.7),
                 0 0 6px rgba(255, 255, 255, 0.5);
}
.flux-diagram .flux-cell--scenario-logos-shell:hover .organigram-unified-title {
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.9),
                 0 0 4px rgba(255, 255, 255, 0.7),
                 0 0 6px rgba(255, 255, 255, 0.5);
}
/* Logos « glow » organigramme : #timeline-events-logos ; panneaux .organigram-buttons ; SKIP #plot-anim-toggle (.organigram-logo) */

/* Barre titre visu : Flou scientifique (gauche) + synthèse cyan (droite) */
.title-content-row.title-content-row--flou-et-resultat {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
    box-sizing: border-box;
}
/* Emplacement Flou scientifique (🧩) — rempli par main.js ; colonne gauche */
.title-flou-scientifique-slot {
    padding: 8px 0 0 0;
}
.title-content-row.title-content-row--flou-et-resultat .synthese_Temp.synthese_Temp-two-cols {
    flex: 1 1 auto;
    margin-left: auto;
    width: auto;
    left: 0;
    top: 0;
    justify-content: flex-end;
}
/* Badge barycentre nuages (Flou scientifique) — sans bordure (.flux-label impose 1px ; surcharge ici) ; 2 colonnes : [icônes+jauge] | [%] */
.flux-label.organigram-fine-tuning-bary-badge {
    border: none !important;
    outline: none;
    box-shadow: none;
}
.organigram-fine-tuning-bary-badge {
    display: flex;
    gap: 6px;
    pointer-events: auto;
    cursor: help;
    user-select: none;
}
/* Colonne gauche : icônes + jauge alignées à gauche (badge hors grille 2 col) */
.organigram-bary-face {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
/* Flou scientifique : 2 colonnes — jauge sous 🔺🌡️🔻 ; % sous 🧩 ; icônes en justify sur toute la largeur */
.organigram-bary-face.organigram-bary-face--two-cols {
    display: grid;
    grid-template-columns: min-content max-content;
    align-items: start;
    column-gap: 6px;
    width: 100%;
    max-width: 28ch;
}
.organigram-bary-face--two-cols .organigram-bary-col-left {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    min-width: 0;
}
.organigram-bary-face--two-cols .organigram-bary-col-left > .organigram-bary-icons {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}
.organigram-bary-face--two-cols .organigram-bary-icons-puzzle {
    display: flex;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}
.organigram-bary-face--two-cols .organigram-bary-line-slider {
    width: 100%;
    align-self: stretch;
}
.organigram-bary-face--two-cols .organigram-bary-col-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.organigram-bary-icons {
    font-size: 16px;
    line-height: 1;
}
/* Colonne droite : % seul — clicable (jauge interactive) */
.organigram-fine-tuning-bary-badge .organigram-bary-pct {
    color: var(--retro-clicable);
}
.organigram-bary-pct {
    white-space: nowrap;
    font-size: 11px;
    line-height: 1;
    margin: 0;
    flex-shrink: 0;
    align-self: center;
}
/* Mini-jauge : visible uniquement dans le badge */
.organigram-bary-mini-slider {
    display: none;
}
.organigram-fine-tuning-bary-badge .organigram-bary-mini-slider {
    display: block;
    width: 6ch;
    min-width: 48px;
    height: 14px;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    pointer-events: auto;
    cursor: ew-resize;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    box-sizing: border-box;
}
/* Jauge dans colonne gauche : pleine largeur de la ligne 🔺🌡️🔻. (fin alignée sous 🔻) */
.organigram-fine-tuning-bary-badge .organigram-bary-face--two-cols .organigram-bary-mini-slider {
    width: 100%;
    min-width: 48px;
    flex-shrink: 0;
}
/* Piste (--retro-clicable) */
.organigram-fine-tuning-bary-badge .organigram-bary-mini-slider::-webkit-slider-runnable-track {
    height: 4px;
    background: color-mix(in srgb, var(--retro-clicable) 38%, transparent);
    border-radius: 0;
}
.organigram-fine-tuning-bary-badge .organigram-bary-mini-slider::-moz-range-track {
    height: 4px;
    background: color-mix(in srgb, var(--retro-clicable) 38%, transparent);
    border-radius: 0;
}
.organigram-fine-tuning-bary-badge .organigram-bary-mini-slider::-moz-range-progress {
    height: 4px;
    background: color-mix(in srgb, var(--retro-clicable) 72%, transparent);
    border-radius: 0;
}
/* Curseur : losange (carré 45° via clip-path), pas un rond */
.organigram-fine-tuning-bary-badge .organigram-bary-mini-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 10px;
    margin-top: -3px;
    box-sizing: border-box;
    background: var(--retro-clicable);
    border: none;
    border-radius: 0;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    box-shadow: 0 0 2px color-mix(in srgb, var(--retro-clicable) 65%, transparent);
}
.organigram-fine-tuning-bary-badge .organigram-bary-mini-slider::-moz-range-thumb {
    width: 10px;
    height: 10px;
    box-sizing: border-box;
    background: var(--retro-clicable);
    border: none;
    border-radius: 0;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    box-shadow: 0 0 2px color-mix(in srgb, var(--retro-clicable) 65%, transparent);
}
.organigram-fine-tuning-bary-badge .organigram-bary-mini-slider::-moz-focus-outer {
    border: 0;
}
/* Panneau alt détaillé nuages : append sur body, position fixed (getBoundingClientRect) */
.organigram-fine-tuning-alt-panel--fixed {
    position: fixed;
    min-width: 180px;
    max-height: 42vh;
    overflow-y: auto;
    padding: 8px 10px;
    text-align: left;
    font-size: 10px;
    line-height: 1.4;
    color: rgb(220, 235, 255);
    background: rgba(8, 12, 28, 0.97);
    border: 1px solid rgb(135, 206, 250);
    border-radius: 8px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
    z-index: 100050;
    pointer-events: none;
    box-sizing: border-box;
}
.flux-cell {
    position: absolute;
    display: grid;
    grid-template-columns: 100px 60px 100px;
    grid-template-rows: 25px 65px 20px;
    width: 260px;
    height: 110px;
    /* Pas de z-index : l'ordre DOM détermine la superposition */
}
.flux-cellRect {
    position: absolute;
    display: grid;
    grid-template-columns: 100px 60px 100px;
    grid-template-rows: 25px 200px 20px;
    width: 260px;
    height: 245px;
    /* Pas de z-index : l'ordre DOM détermine la superposition */
}
.flux-circle-bg {
    position: absolute;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* font-size définie dynamiquement en JS selon le radius */
    border: 4px solid;
    /* Pas de z-index : l'ordre DOM détermine la superposition */
    cursor: pointer;
    transition: transform 0.2s ease;
    /* Effets visuels supplémentaires - box-shadow avec inset crée un effet de pulse/respiration */
    /* Commenté temporairement car crée un effet bleuté qui pulse à toutes les époques
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.2), inset 0 0 10px rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(2px);
    */
    /* Léger flou pour l'effet verre - désactivé pour éviter l'effet de pulse */
}

/* Effet de trou transparent pour les nœuds espace */
.flux-circle-bg.flux-space-hole {
    background: transparent !important;
    border: none !important;
    mix-blend-mode: multiply;
    backdrop-filter: brightness(1.2) contrast(0.9);
    pointer-events: none;
}
/* Cercle albedo = séparation symbolique : pas de fill, pas de blur */
#cell-albedo .flux-circle-bg {
    background: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}
/* Réactiver pointer-events sur les cercles espace/reemis pour que le tooltip (alt) s’affiche au survol */
#cell-espace1 .flux-circle-bg,
#cell-espace2 .flux-circle-bg,
#cell-reemis .flux-circle-bg {
    pointer-events: auto;
    cursor: default;
}
/* Curseur par défaut sur les éléments avec tooltip (tooltip seul, pas alt) — pointer-events réactivé si dans un grid-item */
#flux-diagram [data-tooltip-initialized="true"],
#flux-diagram [data-tooltip]:not([data-tooltip=""]) {
    cursor: default;
    pointer-events: auto;
}
/* Albédo / bary nuages : même avec data-tooltip-initialized, pas d’interaction si ⚗ masque le détail (hide-organigram-arrows) */
#flux-diagram.hide-organigram-arrows .flux-label[data-id="albedo_percents"][data-tooltip-initialized="true"],
#flux-diagram.hide-organigram-arrows .flux-label[data-id="fine_tuning_cloud_bary"][data-tooltip-initialized="true"],
#flux-diagram.hide-organigram-arrows .flux-label[data-id="albedo_percents"][data-tooltip]:not([data-tooltip=""]),
#flux-diagram.hide-organigram-arrows .flux-label[data-id="fine_tuning_cloud_bary"][data-tooltip]:not([data-tooltip=""]) {
    pointer-events: none;
    cursor: default;
}
.flux-circle-bg:hover {
    transform: scale(1.3);
}
/* Images dans les cercles : display block + offset -1px pour cadrage vertical */
.flux-circle-bg img {
    display: block;
    object-position: center;
    transform: translateY(-1px);
}
.flux-grid-item {
    display: flex;
    align-items: center;
}
.flux-grid-item-center {
    justify-content: center;
}
.flux-grid-item-left {
    justify-content: flex-end;
}
.flux-grid-item-right {
    justify-content: flex-start;
}

/* Ligne du haut (row 0) : aligner le contenu en haut de la cellule (0.0% en top, pas en bottom) */
.flux-grid-item-top {
    align-items: flex-start;
}

/* Ligne du bas (row 2) : aligner le contenu en haut de la cellule pour que le 50% ne chevauche pas la boule à facette */
.flux-grid-item-bottom {
    align-items: flex-start;
}

.flux-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 56px;
    border: 4px solid;
    position: relative;
    z-index: 2;
}
.flux-label {
    padding: 0px 4px;
    border-radius: 4px;
    background: rgba(10, 14, 39, 0.7);
    border: 1px solid var(--base-color); /* Couleur par défaut (vert) */
    font-size: 11px;
    /*font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Police plus lisible en petit */
    /* font-weight: bold; */
    white-space: nowrap;
    text-align: center;
    line-height: 1.2; /* Interligne réduit pour textes multi-lignes */
    z-index: 10000 !important; /* TOUJOURS au-dessus des flèches (z-index max ~26) */
    overflow: visible; /* Permettre au contenu de dépasser si nécessaire */
    max-width: none; /* Pas de limite de largeur par défaut */
}

/* Exception pour les labels avec <br> (multi-lignes) */
.flux-label:has(br) {
    white-space: normal;
    overflow: visible;
    max-width: none;
    width: max-content;
}

/* Label albedo_percents : fond sombre, textes et bordure en blanc (⛅ %, 🧊, 🌊, etc.) */
.flux-label[data-id="albedo_percents"],
.flux-label[data-id="albedo_percents"] span,
.flux-label.buttonData[data-id="albedo_percents"],
.flux-label.buttonData[data-id="albedo_percents"] span {
    color: #999 !important;
}
.flux-label[data-id="albedo_percents"] {
    line-height: 20px;
    align-self: center;
    background: rgba(10, 14, 39, 0.7);
    border: 1px solid #999 !important;
}


/* Labels des boutons en gris */
.flux-label.buttonData {
    color: #888;
    border-color: #888;
}

/* Couleur pour les étiquettes contenant W/m² */
.flux-label.watt-per-m2 {
    color: rgb(255, 145, 0);
    border-color: rgb(255, 208, 0);
}

/* Couleur pour les étiquettes contenant " W " ou " K " (rouge) */
.flux-label.watt-or-kelvin {
    color: rgb(255, 0, 0);
    border-color: rgb(255, 100, 100);
}

/* Étiquettes à valeur 0 (W/m² ou %) en gris */
.flux-label.zero-value {
    color: #888 !important;
    border-color: #888 !important;
}

/* Couleur verte pour les étiquettes CO2 actives */
.flux-label.co2-label {
    color: rgb(0, 200, 0);
    border-color: rgb(0, 255, 0);
}

/* Couleur bleu clair pour les étiquettes avec % actives */
.flux-label.percent-label {
    color: rgb(135, 206, 250);
    border-color: rgb(173, 216, 230);
}

/* Couleur bleu clair pour les étiquettes avec ppm (comme les %) */
.flux-label.ppm-label {
    color: rgb(135, 206, 250);
    border-color: rgb(173, 216, 230);
}

/* Container pour regrouper toutes les radiations (flux-sphere) */
.flux-radiation-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Pas de z-index : ajouté en premier dans le DOM, donc en dessous de tout */
    pointer-events: none;
    color: #ff9800; /* Couleur par défaut si non définie */
}

/* Container pour un groupe de radiations avec une couleur spécifique */
.flux-radiation-group {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Pas de z-index : l'ordre DOM détermine la superposition */
    pointer-events: none;
}

.flux-sphere {
    position: absolute;
    border-radius: 50%;
    border: 2px dashed currentColor; /* Hérite de la couleur du container parent */
    background: none;
    pointer-events: none;
    aspect-ratio: 1 / 1; /* Forcer un ratio 1:1 pour maintenir les cercles parfaits */
    /* Effets visuels supplémentaires */
    box-shadow: 0 0 5px currentColor;
    filter: drop-shadow(0 0 2px currentColor);
}
.flux-arrow {
    position: absolute;
    background: #667eea;
    z-index: 1;
    filter: drop-shadow(0 0 3px #667eea);
}

/* Pointe de flèche lumineuse */
.flux-arrow>div {
    filter: drop-shadow(0 0 2px #667eea);
}

/* ⚗ unselected : masquer textes (flux-label) et logos CO2 / H2O / CH4 ; garder les flèches */
/* Garder visibles : W/m² (orange), W/K (rouge), et labels sans unité connue (vert) */
#flux-diagram.hide-organigram-arrows .flux-label.percent-label,
#flux-diagram.hide-organigram-arrows .flux-label.ppm-label,
#flux-diagram.hide-organigram-arrows .flux-label.co2-label,
#flux-diagram.hide-organigram-arrows .flux-label.zero-value,
#flux-diagram.hide-organigram-arrows .flux-label.buttonData,
#flux-diagram.hide-organigram-arrows #cell-co2,
#flux-diagram.hide-organigram-arrows #cell-methane,
#flux-diagram.hide-organigram-arrows #cell-h2o {
    visibility: hidden;
}
/* 🧩 Flou scientifique : toujours visible (pas de .flou-scientifique--hidden) */

/* 🗺 Crédits — toujours visible quelles que soient les classes du flux-diagram */
#cell-credits-paleomap {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Libellés PALEOMAP / Scotese : même style que les ppm (cyan / bordure claire) */
#cell-credits-paleomap .flux-label {
    color: rgb(135, 206, 250) !important;
    border-color: rgb(173, 216, 230) !important;
}

/* Reste visible si ⚗ masque les autres .buttonData / .flux-label-plain-metric */
#flux-diagram.hide-organigram-arrows #cell-credits-paleomap .flux-label,
#flux-diagram.hide-organigram-observation-metrics #cell-credits-paleomap .flux-label {
    visibility: visible !important;
}

/* 🛰 OFF : masquer W/m², MW/W/K, zéros, libellés verts (.flux-label-plain-metric) — pas le bandeau OBSERVATIONS */
#flux-diagram.hide-organigram-observation-metrics .flux-label.watt-per-m2,
#flux-diagram.hide-organigram-observation-metrics .flux-label.watt-or-kelvin,
#flux-diagram.hide-organigram-observation-metrics .flux-label.zero-value,
#flux-diagram.hide-organigram-observation-metrics .flux-label.flux-label-plain-metric {
    visibility: hidden;
}
#flux-diagram.hide-organigram-observation-metrics .flux-arrow {
    visibility: hidden;
}
/* Picto Géométrie atténué si 🛰 OFF (gris+alpha, visible) ; EDS + albédo inchangés */
.organigram-picto-inactived,
#flux-diagram.hide-organigram-observation-metrics #cell-geometrie .flux-circle-bg > span {
    filter: grayscale(1);
    opacity: 0.3;
}

.flux-rectangle {
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 10px;
}
.flux-rectangle-factor {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

/* Container pour les étiquettes top/bottom */
.flux-label-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 10000;
}


/* Alignement en bas pour entourer le trait du cercle (2 éléments) - pour top */
.flux-label-container-bottom {
    justify-content: flex-end !important;
}

/* Alignement en haut pour entourer le trait du cercle (2 éléments) - pour bottom */
.flux-label-container-top {
    justify-content: flex-start !important;
}

/* A bar (albédo moyen) entre logo et les 2 lignes — LaTeX \bar{A} (MathJax) */
.flux-albedo-bar-container {
    pointer-events: none;
    color: var(--base-color, #fff);
}
.flux-albedo-bar {
    font-size: 18px;
    line-height: 1.2;
    color: var(--base-color, #fff);
}
.flux-albedo-bar-container .MathJax,
.flux-albedo-bar-container [class*="mjx"] {
    color: inherit !important;
    font-size: 18px !important;
}

/* Style pour les cellules de boutons */
/* Ne pas modifier display: grid de la cellule, garder la structure de grille */
/* Désactiver les pointer-events sur la cellule entière pour limiter la zone de détection */
.flux-button-cell {
    pointer-events: none;
}

/* Toutes les cases de la grille 3×3 sont insensibles à la souris — le circleBg (position:absolute) gère les events */
.flux-grid-item {
    pointer-events: none;
}
.flux-label,
.flux-label-container {
    pointer-events: none;
}

/* Exceptions : labels interactifs (tooltip) — uniquement si détail PILOTAGE visible (⚗ ON : pas hide-organigram-arrows).
   Sinon visibility:hidden sur .buttonData laisse les hits actifs (spec CSS) + curseur help fantôme. */
#flux-diagram:not(.hide-organigram-arrows) .flux-label[data-id="albedo_percents"],
#flux-diagram:not(.hide-organigram-arrows) .flux-label[data-id="fine_tuning_cloud_bary"],
#flux-diagram:not(.hide-organigram-arrows) .flux-grid-item:has(.flux-label[data-id="albedo_percents"]),
#flux-diagram:not(.hide-organigram-arrows) .flux-grid-item:has(.flux-label[data-id="fine_tuning_cloud_bary"]) {
    pointer-events: auto;
    cursor: help;
    user-select: none;
}
#flux-diagram:not(.hide-organigram-arrows) .flux-label-container:has(.flux-label[data-id="albedo_percents"]),
#flux-diagram:not(.hide-organigram-arrows) .flux-label-container:has(.flux-label[data-id="fine_tuning_cloud_bary"]) {
    pointer-events: auto;
    cursor: help;
    user-select: none;
}

/* Réactiver les pointer-events uniquement sur le cercle */
.flux-button-cell .flux-circle-bg {
    pointer-events: auto;
    transition: filter 0.3s ease;
    /* Désactiver les effets visuels du cercle pour les boutons */
    box-shadow: none !important;
    backdrop-filter: none !important;
    border: none !important;
    background: transparent !important;
    /* Par défaut : gris (identique à epoch-btn) */
    filter: grayscale(100%);
    /* Contour blanc autour du logo (emoji) - ne change pas au rollover */
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.9),
                 0 0 4px rgba(255, 255, 255, 0.7),
                 0 0 6px rgba(255, 255, 255, 0.5);
    /* Curseur pointer uniquement sur le cercle */
    cursor: pointer !important;
    /* Limiter la zone cliquable à la taille exacte du cercle */
    border-radius: 50%;
    /* S'assurer que la zone cliquable ne dépasse pas */
    overflow: hidden;
    /* Forcer la taille à être exactement celle définie */
    box-sizing: border-box;
    /* S'assurer que le cercle est positionné de manière absolue */
    position: absolute;
    /* Limiter la zone cliquable aux enfants aussi */
    isolation: isolate;
}

/* Désactiver les pointer-events sur les enfants du cercle pour limiter la zone */
.flux-button-cell .flux-circle-bg > * {
    pointer-events: none;
}

/* Rollover : swap de rendu sur la couleur (inverse le grayscale), le contour ne change pas (identique à epoch-btn:hover) */
/* Le hover fonctionne directement sur le cercle grâce à pointer-events */
.flux-button-cell .flux-circle-bg:hover {
    /* Si non sélectionné : swap vers couleur, contour reste blanc */
    filter: grayscale(0%);
}

/* Rollover spécifique pour unselected : forcer la couleur */
.flux-button-cell.unselected .flux-circle-bg:hover {
    /* Si non sélectionné : swap vers couleur, contour reste blanc */
    filter: grayscale(0%) !important;
}

/* Albédo (boule à facette) : ne pas rogner le cercle pour voir la boule en entier */
#cell-albedo-btn .flux-circle-bg {
    overflow: visible;
}

/* Bouton checked : contour --retro-clicable */
.flux-button-cell.checked .flux-circle-bg {
    filter: grayscale(0%) drop-shadow(0 0 3px color-mix(in srgb, var(--retro-clicable) 80%, transparent)) drop-shadow(0 0 6px color-mix(in srgb, var(--retro-clicable) 50%, transparent)) !important;
    text-shadow: 0 0 2px color-mix(in srgb, var(--retro-clicable) 90%, transparent),
                 0 0 4px color-mix(in srgb, var(--retro-clicable) 70%, transparent),
                 0 0 6px color-mix(in srgb, var(--retro-clicable) 50%, transparent),
                 0 0 8px color-mix(in srgb, var(--retro-clicable) 30%, transparent) !important;
}

/* Rollover sur checked : swap vers noir et blanc, contour reste --retro-clicable */
.flux-button-cell.checked .flux-circle-bg:hover {
    filter: grayscale(100%) drop-shadow(0 0 3px color-mix(in srgb, var(--retro-clicable) 80%, transparent)) drop-shadow(0 0 6px color-mix(in srgb, var(--retro-clicable) 50%, transparent)) !important;
    text-shadow: 0 0 2px color-mix(in srgb, var(--retro-clicable) 90%, transparent),
                 0 0 4px color-mix(in srgb, var(--retro-clicable) 70%, transparent),
                 0 0 6px color-mix(in srgb, var(--retro-clicable) 50%, transparent),
                 0 0 8px color-mix(in srgb, var(--retro-clicable) 30%, transparent) !important;
}

/* État selected : contour --retro-clicable */
.flux-button-cell.selected .flux-circle-bg {
    filter: grayscale(0%) drop-shadow(0 0 3px color-mix(in srgb, var(--retro-clicable) 80%, transparent)) drop-shadow(0 0 6px color-mix(in srgb, var(--retro-clicable) 50%, transparent)) !important;
    text-shadow: 0 0 2px color-mix(in srgb, var(--retro-clicable) 90%, transparent),
                 0 0 4px color-mix(in srgb, var(--retro-clicable) 70%, transparent),
                 0 0 6px color-mix(in srgb, var(--retro-clicable) 50%, transparent),
                 0 0 8px color-mix(in srgb, var(--retro-clicable) 30%, transparent) !important;
}

/* Rollover sur selected : swap vers noir et blanc, contour reste --retro-clicable */
.flux-button-cell.selected .flux-circle-bg:hover {
    filter: grayscale(100%) drop-shadow(0 0 3px color-mix(in srgb, var(--retro-clicable) 80%, transparent)) drop-shadow(0 0 6px color-mix(in srgb, var(--retro-clicable) 50%, transparent)) !important;
    text-shadow: 0 0 2px color-mix(in srgb, var(--retro-clicable) 90%, transparent),
                 0 0 4px color-mix(in srgb, var(--retro-clicable) 70%, transparent),
                 0 0 6px color-mix(in srgb, var(--retro-clicable) 50%, transparent),
                 0 0 8px color-mix(in srgb, var(--retro-clicable) 30%, transparent) !important;
}

/* Étiquettes ppm/% à côté des gaz : même ton que .percent-label (plus de vert CO₂) */
#cell-co2 .flux-label.co2-label {
    color: rgb(135, 206, 250);
    border-color: rgb(173, 216, 230);
}

/* État unselected : gris (par défaut) */
.flux-button-cell.unselected .flux-circle-bg {
    filter: grayscale(100%);
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.9),
                 0 0 4px rgba(255, 255, 255, 0.7),
                 0 0 6px rgba(255, 255, 255, 0.5);
}

/* Cercle de référence pour visualiser la position des boutons */
.flux-button-reference-circle {
    position: absolute;
    pointer-events: none;
    /* Styles définis inline dans le JS */
}

/* ==========================================================================
   Styles supplémentaires pour flux-diagram (layout uniquement, pas de surcharge divGlass)
   ========================================================================== */

.flux-diagram {
    padding: 10px;
    overflow: hidden;
}

.synthese-wrapper {
    display: block;
    /* Divs indépendantes, pas de flex */
}

.synthese_EdS {
    display: none;
    /* Cachée car intégrée dans l'organigramme */
}

.synthese_Temp {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px;
    width: 190px;
    position: relative;
    top: -30px;
    left: 100px;
    padding: 5px 10px;
    z-index: 10001;
}

.synthese_Temp .synthese_Temp-row {
    align-items: center;
}

.synthese_Temp .thermometer-icon {
    font-size: 20px;
    font-style: normal;
    line-height: 1;
    margin-right: 10px;
    display: inline-flex;
    transition: filter 0.3s ease, text-shadow 0.3s ease;
}

.synthese_Temp-temp-line {
    display: flex;
    align-items: center;
    font-size: 15px;
    line-height: 1.2;
}
.synthese_Temp-temp-line #temp-unit-synthese {
    font-size: 18px;
}

.synthese_Temp-pressure {
    font-size: 14px;
    line-height: 1.2;
}

/* synthese_Temp : variante 2 colonnes (sans coupler à #visu-panel .title-container) */
/* couleur dynamique par JS (updateTemperatureDisplay → .synthese_Temp entier, cols L+R) ; thermomètre garde sa couleur Wien !important */
.synthese_Temp.synthese_Temp-two-cols {
    color: cyan; /* fallback avant premier calcul JS */
    padding: 0px;
    font-family: 'ProggyDotted';
    font-style: italic;
    position: relative;
    top: 4px;
    left: 20px;
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 0;
    margin-top: 0;
}
.synthese_Temp-two-cols .synthese_Temp-col-left {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}
.synthese_Temp-two-cols .synthese_Temp-sep {
    width: 1px;
    min-height: 48px;
    align-self: stretch;
    background: rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
}
.synthese_Temp-two-cols .synthese_Temp-col-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding-left: 10px;
}
.synthese_Temp .visu_timeline-epoch-section {
    min-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    width: 100%;
}
.synthese_Temp .visu_timeline-epoch-name-wrap {
    text-align: right;
    margin-right: 10px;
}

.visu_epoch-name {
    font-size: 17px;
    line-height: 1.3;
    display: block;
    margin-top: 0;
    width: 100%;
    max-width: 100%;
    /*white-space: nowrap;*/
}

/* Bloc epoch (3 lignes) : ex timeline-date-display / epoch-start-time / info-time, noms en synthese_epoch-* */
.synthese_epoch-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.synthese_epoch-start {
    font-size: 10px;
    display: block;
    margin-top: 2px;
    width: 100%;
}
.synthese_epoch-info {
    font-size: 10px;
    display: block;
    margin-top: 2px;
    width: 100%;
}

/* Bloc actions scénario (visu) : par défaut colonne ; variante .timeline-action-bar-compact = une ligne */
.timeline-action-bar {
    display: flex;
    flex-direction: column;
}
.timeline-action-bar.timeline-action-bar-compact {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 4px 10px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.timeline-scenario-toolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 6px 10px;
    flex: 1 1 auto;
    min-width: 0;
}
.timeline-scenario-toolbar .timeline-events-logos {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
}
.timeline-scenario-toolbar .timeline-events-logos.year-indexed {
    justify-content: flex-start;
}
#plot-anim-toggle.plot-anim-toggle--aside {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    padding: 0;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.timeline-action-bar .timeline-action-title-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 20px;
}
.timeline-action-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.timeline-action-buttons #plot-anim-toggle {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    padding: 0;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.timeline-action-title {
    font-size: 12px;
    font-weight: lighter;
    color: var(--retro-base);
}
.timeline-action-bar .timeline-events-logos {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}
.timeline-action-bar .timeline-event-logo {
    margin-left: -15px;
    width: 65px;
    height: 65px;
    min-width: 65px;
    min-height: 65px;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 35px;
    line-height: 1;
    object-fit: contain;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s ease, transform 0.2s ease;
    border: none;
}
.timeline-action-bar .timeline-event-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.timeline-action-bar .timeline-event-logo:hover {
    opacity: 1;
    transform: scale(1.1);
}
.timeline-action-bar .timeline-event-logo:active {
    transform: scale(0.95);
}
/* Year-indexed (📱) : boutons plus compacts, centrés */
.timeline-action-bar .timeline-events-logos.year-indexed {
    justify-content: center;
    gap: 8px;
}
.timeline-action-bar .timeline-event-logo.btn-year-indexed {
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
    font-size: 26px;
    margin-left: 0;
}

/* Barre actions dans title-content-row (alignée au contenu, pas centrée sur toute la largeur) */
.title-toolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
}
.title-toolbar .timeline-events-logos {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    margin-top: 0;
}
.title-toolbar .timeline-event-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s ease, transform 0.2s ease;
    border: none;
    border-radius: 2px;
    padding: 0;
    box-sizing: border-box;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.title-toolbar .timeline-event-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.title-toolbar .timeline-event-logo:hover {
    opacity: 1;
    transform: scale(1.1);
}
.title-toolbar .timeline-event-logo:active {
    transform: scale(0.95);
}

.controle-simulation-title {
    font-size: 14px;
    font-weight: bold;
}

/* Boutons dans le flux-diagram */
.flux-diagram .btn {
    font-size: 24px;
    font-family: var(--font-emoji);
    background: none !important; /* Pas de fond */
    border: none !important; /* Pas de border */
    border-radius: 50%;
    cursor: pointer;
    padding: 5px;
    transition: filter 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    position: relative;
    /* Par défaut : noir et blanc avec contour blanc autour du logo */
    filter: grayscale(100%);
    /* Contour blanc autour du logo (emoji) - ne change pas au rollover */
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.9),
                 0 0 4px rgba(255, 255, 255, 0.7),
                 0 0 6px rgba(255, 255, 255, 0.5);
}

/* Bouton du flux activé (checked) : contour --retro-clicable */
.flux-diagram .btn.checked {
    filter: grayscale(0%) drop-shadow(0 0 3px color-mix(in srgb, var(--retro-clicable) 80%, transparent)) drop-shadow(0 0 6px color-mix(in srgb, var(--retro-clicable) 50%, transparent)) !important;
    text-shadow: 0 0 2px color-mix(in srgb, var(--retro-clicable) 90%, transparent),
                 0 0 4px color-mix(in srgb, var(--retro-clicable) 70%, transparent),
                 0 0 6px color-mix(in srgb, var(--retro-clicable) 50%, transparent),
                 0 0 8px color-mix(in srgb, var(--retro-clicable) 30%, transparent) !important;
}

/* Rollover : swap de rendu sur la couleur (inverse le grayscale), le contour ne change pas */
.flux-diagram .btn:hover {
    /* Si non activé : swap vers couleur, contour reste blanc */
    filter: grayscale(0%);
}

.flux-diagram .btn.checked:hover {
    /* Si activé : swap vers noir et blanc, contour reste vert */
    filter: grayscale(100%);
}

/* Boutons désactivés (en époque Corps noir) */
.flux-diagram .btn.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    filter: grayscale(100%);
    text-shadow: 0 0 2px rgba(128, 128, 128, 0.5),
                 0 0 4px rgba(128, 128, 128, 0.3);
}

.flux-diagram .btn.disabled:hover {
    filter: grayscale(100%); /* Pas de changement au rollover si désactivé */
}


/* ==========================================================================
   Modes et états spéciaux
   ========================================================================== */

/* No Blur Mode */
body.no-blur .flux-arrow,
body.no-blur .flux-sphere {
    text-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
}

/* 🔒 Tooltips gérés par tooltips.js (styles injectés dynamiquement) */

/* ==========================================================================
   Animation de pulse/respiration pour sphère (commenté - joli effet à garder sous le coude)
   ========================================================================== */
/* 
Effet de pulse/respiration sur les sphères de radiation - très joli, comme si ça respirait
Peut être réactivé plus tard avec une autre couleur ou pour d'autres époques

.flux-sphere {
    animation: sphere-pulse 3s ease-in-out infinite;
}

@keyframes sphere-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}
*/

#visu-panel .flux-circle-bg,#visu-panel img[alt]:not([alt=""]):not(button img),#visu-panel [role="img"][aria-label]:not([aria-label=""]){cursor:help!important;}
#visu-panel .flux-cell--scenario-logos-shell .flux-circle-bg{cursor:default!important;}
#visu-panel #timeline-events-logos .organigram-logo,#visu-panel #timeline-events-logos .organigram-logo img,#visu-panel #plot-anim-toggle .organigram-logo,#visu-panel #plot-anim-toggle .organigram-logo img,#visu-panel .organigram-buttons .organigram-logo,#visu-panel .organigram-buttons .organigram-logo img{cursor:pointer!important;}