/* ===== RESET & BASE STYLES ===== */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
}

/* ===== Dinot webfont (local) ===== */
/* Place Dinot-Bold.woff2 / Dinot-Bold.woff in the ./fonts/ directory for this to work */
@font-face {
    font-family: 'Dinot';
    src: url('../fonts/Dinot-Bold.woff2') format('woff2'),
         url('../fonts/Dinot-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Dinot Regular (for subtitles) */
@font-face {
    font-family: 'Dinot';
    src: url('../fonts/Dinot-Regular.woff2') format('woff2'),
         url('../fonts/Dinot-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Bree Serif webfont for popup body text */
@font-face {
    font-family: 'BreeSerif';
    src: url('../fonts/BreeSerif-Regular.woff2') format('woff2'),
         url('../fonts/BreeSerif-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ===== SOLUTION 4: LOADING INDICATOR ===== */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loading-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loading-content {
    text-align: center;
    color: white;
}

.loading-spinner {
    width: 60px;
    height: 60px;
    border: 5px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    margin: 0 auto 20px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-text {
    font-size: 18px;
    margin: 10px 0;
    font-weight: 600;
}

.loading-progress {
    font-size: 14px;
    opacity: 0.9;
}

/* ===== SOLUTION 3: DOUBLE-BUFFER LAYER (DISABLED) ===== */
.back-principal-buffer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: contain;
    /* align habitat background image to the left as requested */
    background-position: left;
    background-repeat: no-repeat;
    opacity: 0 !important;
    pointer-events: none;
    z-index: -999 !important;
    visibility: hidden !important;
    transition: opacity 0.15s ease-out;
    will-change: opacity;
}

/* 🟢 Habitat 1: Forêts naturelles - Couleur #99c06a */
            
    /* 🟤 Habitat 2: Forêts exploitées - Couleur #C29676 */
    .habitat-btn[data-bg="h2"] {
        border-color: #C29676;
        color: #C29676;
    }

    .habitat-btn[data-bg="h2"]:hover,

    .habitat-btn[data-bg="h2"].active {
        border-color: #C29676;
        color: #C29676;
        background: linear-gradient(145deg, rgba(194, 150, 118, 0.12), rgba(255,255,255,0.95));
    }
            
     /* ⚫ Habitat 3: Cirques glaciaires - Couleur #6d6d6c */
    .habitat-btn[data-bg="h3"] {
        border-color: #6d6d6c;
        color: #6d6d6c;
    }

    .habitat-btn[data-bg="h3"]:hover,
    .habitat-btn[data-bg="h3"].active {
        border-color: #6d6d6c;
        color: #6d6d6c;
        background: linear-gradient(145deg, rgba(109, 109, 108, 0.12), rgba(255,255,255,0.95));
    }
            
    /* 🔵 Habitat 4: Milieux aquatiques - Couleur #0082bd */
    .habitat-btn[data-bg="h4"] {
        border-color: #0082bd;
        color: #0082bd;
    }

    .habitat-btn[data-bg="h4"]:hover,
    .habitat-btn[data-bg="h4"].active {
        border-color: #0082bd;
        color: #0082bd;
        background: linear-gradient(145deg, rgba(0,130,189,0.12), rgba(255,255,255,0.95));
    }
            
    /* 🟢 Habitat 5: Milieux ouverts - Couleur #018e6b */
    .habitat-btn[data-bg="h5"] {
        border-color: #018e6b;
        color: #018e6b;
    }
    .habitat-btn[data-bg="h5"]:hover,
    .habitat-btn[data-bg="h5"].active {
        border-color: #018e6b;
        color: #018e6b;
        background: linear-gradient(145deg, rgba(1,142,107,0.12), rgba(255,255,255,0.95));
    }

.back-principal-buffer.active {
    opacity: 0 !important;
    z-index: -999 !important;
    visibility: hidden !important;
}

li {
    list-style: none;
}

/* ♿ ACCESSIBILITÉ: Screen reader only - pour texte accessible mais invisible */
.sr-only, .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ♿ ACCESSIBILITÉ: Focus visible pour navigation clavier */
*:focus-visible {
    outline: 3px solid #3FA535;
    outline-offset: 2px;
}

/* ♿ Skip to content link pour navigation clavier */
.skip-to-content {
    position: absolute;
    top: -100px;
    left: 0;
    background: #3FA535;
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 10000;
}

.skip-to-content:focus {
    top: 0;
}

/* ===== MAIN CONTAINER ===== */
#backPrincipal {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: url('../images/reserveGlobale/global.png') center/contain no-repeat;
    background-color: #dee5ed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 750px;
    width: 1300px;
    margin: 0;
    padding: 0;
    /* Solution 2: Optimized transition - only animate background for better performance */
    transition: background 0.15s ease-out;
    position: relative;
    border: solid 1px #414141 !important;
    /* GPU acceleration hint for smoother transitions */
    will-change: background;
}

#backPrincipal::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.172);
    z-index: 1;
    transition: background 0.6s ease;
    pointer-events: none;
}

/* ===== UTILITY CLASSES ===== */
.svgIcons {
    width: 20px;
    height: 20px;
}

.icons {
    width: 40px;
}

/* Objective box styles (top-level) - forced per request */
.objective-box {
    background: #ffffff; /* white interior to match design */
    border: none; /* do not apply border to legacy objective-box */
    padding: 14px 16px;
    border-radius: 0; /* square corners */
    color: #333; /* neutral text color */
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    width: 100%;
    margin-top: 12px;
}
.objective-box h5 {
    margin: 0 0 8px 0;
    font-size: 0.75rem;
    color: #593f00;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    border: none; /* ensure no border */
}
.objective-box ul {
    margin: 0;
    padding-left: 18px;
}
.objective-box p {
    margin: 0;
    line-height: 1.45;
    font-weight: 500;
}

/* New block for objectifBottom (replaces UL) */
/* objectifBottom: white panel with colored border (border-color set dynamically) */
#objectifBottom, .objectif-bottom {
    background: #ffffff; /* white interior */
    padding: 12px;
    border-radius: 0; /* square corners per design */
    border: 4px solid transparent; /* color injected by JS to match habitat */
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    margin-top: 8px;
}

/* Ensure legacy objective-box does not receive a border - user requested no border */
.objective-box {
    border: none !important;
}

/* Label for the objectif section */
.objectif-label {
    font-weight: 700;
    margin-bottom: 8px;
    display: block;
}
.objectif-item {
    margin-bottom: 6px;
}

/* Inline icon used before some action items */
.inline-icon {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-right: 6px;
}

/* Force inline icons to render in B/W (grayscale) */
.inline-icon {
    -webkit-filter: grayscale(100%) brightness(0.8) contrast(1.1);
    filter: grayscale(100%) brightness(0.8) contrast(1.1);
}

/* Action line: icon on the left, text on the right (single row) */
.action-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.action-line .action-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
}
.action-line .action-icon-emoji {
    font-size: 40px;
    line-height: 40px;
    display: inline-block;
    width: 40px;
    text-align: center;
}
.action-line .action-text {
    flex: 1 1 auto;
    color: #333;
    font-size: 16px;
}

/* Show the center header (Actions) in the popup center column */
.dynamic-center h5 {
    display: block;
    font-size: 18px;
    margin: 0 0 8px 0;
    font-weight: 600;
    color: #234;
    border-bottom: none;
    padding-bottom: 0;
}

.dynamic-center {
    padding-top: 45px;
}

/* Remove any left border on list items inside dynamic-center */
.dynamic-center ul li {
    border-left: none !important;
    padding-left: 0 !important;
}

/* Increase default inline-icon sizing used elsewhere */
.inline-icon {
    width: 24px;
    height: 24px;
}

/* Add spacing at the bottom of lists inside dynamic-composter to avoid cramped layout */
.dynamic-composter ul {
    margin-bottom: 50px;
}

/* Softer yellow specifically when the objective box appears inside the popup left column */
.dynamic-left .objective-box {
    background: #fff7d1; /* softer, eye-friendly pale yellow */
    box-shadow: 0 1px 6px rgba(0,0,0,0.03);
}

/* Also ensure objective box inside the popup left section (detailsHTML) uses the soft yellow */
.popup-left-section .objective-box {
    background: #fff7d1 !important; /* higher specificity to override inline or competing rules */
    box-shadow: 0 1px 6px rgba(0,0,0,0.03);
    overflow: visible !important;
    max-height: none !important;
}

.text-infos {
    font-size: 1.3rem;
    font-family: 'BreeSerif', 'Georgia', 'Times New Roman', serif;
    font-weight: 400;
}

.fade-transition {
    opacity: 0.8;
    transform: scale(0.98);
}

/* ===== SELECTOR SECTION ===== */
.selector-section {
    text-align: center;
    max-width: 1300px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    padding: 20px;
    border-radius: 2px;
    /* box-shadow removed as requested */
    box-shadow: none;
    z-index: 10;
    position: relative;
    
}

.title {
    color: #2c3e50;
    margin-bottom: 25px;
    font-weight: 500;
    font-size: 1.5rem;
    letter-spacing: 0.5px;
}

/* ===== HABITAT BUTTONS ===== */
.habitat-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    align-items: center;
}

.habitat-btn {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(245, 245, 245, 0.9));
    border: 2px solid rgba(220, 220, 220, 0.6);
    border-radius: 2px;
    padding: 18px 28px;
    font-size: 16px;
    font-weight: 600;
    color: #495057;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    outline: none;
    font-family: inherit;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    min-width: 130px;
    overflow: hidden;
}

.habitat-btn:hover {
    background: linear-gradient(145deg, rgba(255, 255, 255, 1), rgba(248, 249, 250, 0.95));
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.habitat-btn:focus {
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
}

.habitat-btn:active {
    transform: translateY(-1px) scale(1.02);
}

.habitat-btn.active {
    animation: pulse 2s infinite;
}

/* Habitat-specific button styles */
.habitat-btn[data-bg="h1"] {
    border-color: #99c06a;
    color: #99c06a;
}
.habitat-btn[data-bg="h1"]:hover,
.habitat-btn[data-bg="h1"].active {
    border-color: #99c06a;
    color: #99c06a;
    background: linear-gradient(145deg, rgba(153, 192, 106, 0.12), rgba(255, 255, 255, 0.95));
}

.habitat-btn[data-bg="h2"]:hover {
    border-color: #28a745;
    color: #28a745;
    background: linear-gradient(145deg, rgba(40, 167, 69, 0.1), rgba(255, 255, 255, 0.95));
}

.habitat-btn[data-bg="h3"]:hover {
    border-color: #17a2b8;
    color: #17a2b8;
    background: linear-gradient(145deg, rgba(23, 162, 184, 0.1), rgba(255, 255, 255, 0.95));
}

.habitat-btn[data-bg="h4"]:hover {
    border-color: #fd7e14;
    color: #fd7e14;
    background: linear-gradient(145deg, rgba(253, 126, 20, 0.1), rgba(255, 255, 255, 0.95));
}

.habitat-btn[data-bg="h5"]:hover {
    border-color: #6f42c1;
    color: #6f42c1;
    background: linear-gradient(145deg, rgba(111, 66, 193, 0.1), rgba(255, 255, 255, 0.95));
}

/* ===== STATUS INDICATOR ===== */
.status-indicator {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    padding: 20px 30px;
    border-radius: 3px;
    font-size: 16px;
    font-weight: 600;
    z-index: 100;
    transition: all 0.4s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border: 3px solid rgba(0, 0, 0, 0.5);
    width: max-content;
}

/* Global map title (top centered, visible without border) */
.global-map-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 12px;
    padding: 8px 18px;
    /* no background — use a dark color and stronger shadow for contrast against light/cloudy backgrounds */
    color: #6cdba7;
    /* ensure webkit text stroke for a fine black contour (thinner) */
    -webkit-text-stroke: 0.5px #000;
    -webkit-text-fill-color: #6cdba7;
    font-size: 30px;
    font-weight: 700;
    border-radius: 6px;
    text-align: center;
    z-index: 120;
    pointer-events: none; /* not interactive */
    /* softened gray-toned shadows for depth without overpowering the contour */
    text-shadow:
        0 1px 0 rgba(255,255,255,0.35),
        0 2px 4px rgba(0,0,0,0.18),
        0 5px 10px rgba(0,0,0,0.12);
}

/* ===== INSTRUCTIONS ===== */
.instructions {
    background: rgba(0, 123, 255, 0.08);
    border-left: 4px solid #007bff;
    padding: 20px;
    margin-top: 25px;
    border-radius: 12px;
    backdrop-filter: blur(5px);
}

.instructions p {
    margin: 0;
    color: #495057;
    line-height: 1.6;
    font-size: 14px;
    font-weight: 500;
}

/* ===== POPUP OVERLAY ===== */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    overflow: hidden; /* prevent overlay from creating scrollbars */
}

/* ===== BACKGROUND CLASSES (performance: use classes instead of inline styles) ===== */
#backPrincipal.bg-default { background: url('../images/reserveGlobale/global.png') center/contain no-repeat; }
#backPrincipal.bg-h1 { background: url('../images/reserveGlobale/foretsnaturelles.png') center/contain no-repeat; }
#backPrincipal.bg-h2 { background: url('../images/reserveGlobale/habitatForetsexploitees.png') center/contain no-repeat; }
#backPrincipal.bg-h3 { background: url('../images/reserveGlobale/cirquesGlaciaires.png') center/contain no-repeat; }
#backPrincipal.bg-h4 { background: url('../images/reserveGlobale/milieux-aquatiques.png') center/contain no-repeat; }
#backPrincipal.bg-h5 { background: url('../images/reserveGlobale/milieuxouverts.png') center/contain no-repeat; }

/* Buffer div needs same background classes for crossfade system */
#backPrincipalBuffer.bg-default { background: url('../images/reserveGlobale/global.png') center/contain no-repeat; }
#backPrincipalBuffer.bg-h1 { background: url('../images/reserveGlobale/foretsnaturelles.png') center/contain no-repeat; }
#backPrincipalBuffer.bg-h2 { background: url('../images/reserveGlobale/habitatForetsexploitees.png') center/contain no-repeat; }
#backPrincipalBuffer.bg-h3 { background: url('../images/reserveGlobale/cirquesGlaciaires.png') center/contain no-repeat; }
#backPrincipalBuffer.bg-h4 { background: url('../images/reserveGlobale/milieux-aquatiques.png') center/contain no-repeat; }
#backPrincipalBuffer.bg-h5 { background: url('../images/reserveGlobale/milieuxouverts.png') center/contain no-repeat; }


.popup-overlay.active {
    opacity: 1;
    visibility: visible;
}

.popup-overlay.active .popup-content {
    transform: scale(1) translateY(0);
}

/* ===== POPUP CONTENT ===== */
.popup-content {
    background: rgb(255, 255, 255) !important;
    backdrop-filter: blur(20px);
    padding: 0 28px; /* remove top/bottom padding, keep left/right */
    /* Set the popup width to 85% of the viewport (keeps a comfortable margin)
       while still clamping the maximum width for large screens. */
    width: 1650px;
    height: 900px;
    overflow: hidden; /* make popup window fixed (no internal scrolling) */
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.8) translateY(30px);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    background-size: contain;
    background-position: right top;
}

/* popup container positioning: child bottom will be absolutely positioned */
.popup-container {
    position: relative;
    width: 100%;
    height: 100%; /* ensure bottom-section bottom aligns with popup-content bottom */
    box-sizing: border-box;
}

/* When the popup is rendered with the habitat-specific wrapper class (popup-content),
   ensure it fills the available width and height of its parent container. */
.popup-container.popup-content, .popup-content.popup-container {
    width: 100%;
    height: 100%;
}

/* Ensure no box-shadow is applied to the popup card or its map section */
.popup-container.popup-content, .popup-container.popup-content .popup-map-section {
    box-shadow: none !important;
}

/* Force the popup-content to have a minimum vertical size */
.popup-container.popup-content {
    min-height: 780px;
}

/* Hide scrollbars visually while preserving scroll behavior */
/* WebKit browsers */
.popup-content::-webkit-scrollbar,
.popup-principal::-webkit-scrollbar,
.popup-top-section::-webkit-scrollbar,
.popup-left-section::-webkit-scrollbar,
.popup-right-section::-webkit-scrollbar,
.popup-map-section::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* Firefox */
.popup-content, .popup-principal, .popup-top-section, .popup-left-section, .popup-right-section, .popup-map-section {
    scrollbar-width: none; /* hide in Firefox */
    -ms-overflow-style: none; /* hide in IE 10+ / Edge Legacy */
}

/* Keep smooth scrolling on touch devices */
.popup-overlay .popup-content {
    -webkit-overflow-scrolling: touch;
}

/* Gutter clipping trick: clip scrollbar gutter while keeping content scrollable. Adjust if your scrollbar width differs. */
.popup-content {
    margin-right: 0;
    padding: 0; /* keep popup-content flush; padding applied to #popContent instead */
}

/* Apply padding only to the specific popup container element with id #popupContent */
#popupContent {
    padding: 25px; /* desktop */
}

/* Responsive: reduce min-height on small viewports to avoid overflow */
@media (max-width: 600px) {
    .popup-container.popup-content {
        min-height: 520px;
    }
}

/* ===== POPUP HEADER ===== */
.popup-content {
    position: relative; /* stacking context for absolute header */
}

.popup-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    z-index: 50; /* sit above the illustration */
    background: transparent; /* header must be transparent to show illustration behind */
    /* backdrop-filter removed to keep header fully transparent across browsers */
}

.popup-title {
    font-size: 1.8rem;
    font-weight: 1000;
    color: #2c3e50;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Use Dinot Bold if available on the system, otherwise fall back to similar sans-serif fonts */
.popup-title, #habitatName {
    font-family: 'Dinot', 'Helvetica Neue', Arial, sans-serif;
    /* Explicit bold variant to match Dinot Bold when the font is present */
    font-weight: 1000;
    text-transform: uppercase;
}

/* Force habitat name color to match habitat h1 theme when displayed outside the popup header */
#habitatName {
    color: #3FA535 !important;
    font-size: 2.5rem;
    text-transform: uppercase;
}
    

.popup-close {
    background: rgba(220, 53, 69, 0.1);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    color: #dc3545;
    transition: all 0.2s ease;
}

.popup-close:hover {
    background: rgba(220, 53, 69, 0.2);
    transform: scale(1.1);
}

/* ===== POPUP BODY ===== */
.popup-principal {
    color: #3d3f42;
    line-height: 1.5;
    height: 100%;
}

/* Apply BreeSerif to popup main content and dynamic areas */
.popup-content, .popup-principal, .dynamic-composter, .dynamic-left, .dynamic-center, .dynamic-right, .popup-bottom-section {
    font-family: 'BreeSerif', 'Georgia', 'Times New Roman', serif;
}

.popup-principal h3 {
    color: #2c3e50;
    margin-top: 25px;
    margin-bottom: 15px;
    font-size: 1.2rem;
    font-weight: 600;
}

.popup-principal p {
    margin-bottom: 15px;
    font-weight: 500;
}

.popup-principal ul {
    padding-left: 20px;
    margin-bottom: 15px;
}

.popup-principal li {
    margin-bottom: 8px;
}

/* ===== POPUP SECTIONS ===== */
.popup-top-section {
    display: flex;
    gap: 20px;
    width: 100%;
            /* offset to align visual bottom with popup outer edge */
            bottom: -50px;
    max-height: 80vh;
    overflow: visible; /* allow inner image container to show rather than being clipped */
}

/* Responsive adjustments: stack columns on narrow viewports so right/map are always visible */
@media (max-width: 1100px) {
    .popup-content {
        width: calc(100% - 40px);
        padding: 16px;
        height: auto;
        max-height: 95vh;
        overflow: hidden; /* keep popup fixed on smaller screens as well */
    }
    .popup-top-section {
        flex-direction: column;
        gap: 12px;
        max-height: none;
    }
    .popup-left-section, .popup-right-section, .popup-map-section {
        flex: none;
        width: 100%;
        min-width: auto;
        max-width: 100%;
        height: auto;
    }
    .habitat-image-container {
        min-height: 580px; /* ensure a minimum image area for popup display */
        background-size: contain;
        background-position: center;
    }
    .popup-bottom-section {
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        height: auto;
        min-height: 150px;
        margin-top: 48px; /* pushed lower to free space for illustration */
    }

    /* Position the dynamic text container slightly above the bottom edge */
    #dynamicTextContainer {
        position: relative;
        bottom: 90px !important;
    }

    /* Responsive padding for the specific popup element */
    #popupContent {
        padding: 16px; /* smaller padding on narrow viewports */
    }
}

/* make the top area visually the white card; bottom stays transparent */
.popup-top-section {
    background: rgb(255,255,255);
    border-radius: 6px;
    padding: 0;
    box-sizing: border-box;
}

/* Ensure dynamic text container is offset from bottom across all viewports */
#dynamicTextContainer {
    position: relative;
    bottom: 90px !important;
}

.popup-left-section {
    /* Left column should take 30% of the top area for better balance */
    font-size: 1rem; /* increased per request */
    padding-top: 35px;
    flex: 0 0 30%;
    max-width: 30%;
    min-width: 200px;
    height: 100%;
    overflow: visible; /* allow objective box to be fully visible */
    box-sizing: border-box;
}

.popup-right-section {
    flex: 1;
    min-width: 300px;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.popup-map-section {
    flex: 0 0 170px;
    min-width: 170px;
    height: 100%;
    max-height: 300px;
    overflow: hidden;
    box-sizing: border-box;
    /* background intentionally removed to allow habitat-driven <img> rendering */
    border-radius: 8px;
    box-shadow: none !important;
    padding: 10px;
    text-align: center;
    color: #666;
    font-style: italic;
    position: absolute; /* pinned to the right */
    right: 0;
    top: 0;
    margin: 12px; /* keep a little gap from the popup edges */
}


/* No background on .popup-map-section - map images are supplied per-habitat via <img> */

/* Force the image inside the map section to be small (60px width) */
.popup-map-section img {
    width: 150px !important; /* increased from 120px to 150px */
    height: auto !important;
    display: block;
    margin: 0 auto;
}

.map-placeholder {
    text-align: center;
    font-size: 16px;
    color: #666;
}

.popup-right-section {
    flex: 1;
    min-width: 300px;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.objectifs {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 10px;
    padding: 15px;
    background: rgba(250, 232, 114, 0.9);
}

.detail-item {
    margin-top: 8px;
    padding: 10px;
    background: rgba(245,245,245,0.9);
    border-radius: 4px;
    color: #234;
    font-size: 0.85em; /* reduced for first test */
}

/* Objective box (yellow callout) */
.objective-box {
    margin: 14px 0;
    background: #ffeb3b !important; /* pale yellow forced with !important */
    border-radius: 6px;
    padding: 12px 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.objective-box .obj-label {
    font-weight: 700;
    font-size: 1em;
    color: #333;
    margin-bottom: 6px;
    font-family: 'Dinot', 'Helvetica Neue', Arial, sans-serif;
    text-transform: uppercase;
}
.objective-box .obj-text {
    font-size: 0.95em;
    color: #333;
}

/* Jauge image styling (small, centered) */
.jauge img {
    max-width: 350px;
    height: auto;
    display: block;
    margin: 8px 0; /* left align */
}

.intro-paragraph {
    margin-top: 10px;
    margin-bottom: 8px;
    font-size: 0.9em;
    color: #333;
}

/* Icon list similar to the picture */
.list-icons {
    list-style: none;
    padding: 0;
    margin: 12px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.list-icons li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #222;
}

/* Each .icon is a row: left = .icon-img, right = text content */
.list-icons .icon {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Circle image (use background-image when set via inline style) */
.list-icons .icon-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg,#e6f4ff,#d7f0e6);
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.6);
    flex: 0 0 36px;
}

.list-icons .icon-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.list-icons .icon-label {
    font-weight: 700;
    color: #222;
}

.list-icons .icon-desc {
    font-size: 0.92rem;
    color: #666;
    margin-top: 0; /* keep same line as label */
}

.detail-item.sub-objective {
    background: transparent;
    padding: 6px 0;
    font-style: italic;
}

/* ===== HABITAT IMAGE CONTAINER ===== */
.habitat-image-container {
    position: relative;
    /* enforce larger min-height for consistent popup layout */
    min-height: 580px;
    width: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* ===== HOTSPOTS ===== */
.hotspot-wrapper {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    /* Ensure hotspots are above the popup bottom section which uses z-index:1002 */
    z-index: 1105;
}

/* ♿ ACCESSIBILITÉ: Focus visible sur hotspot wrapper */
.hotspot-wrapper:focus-visible {
    /* keep keyboard focus high-contrast but neutral (not the 'active' indicator) */
    outline: 3px solid #3FA535;
    outline-offset: 4px;
    border-radius: 50%;
}

.hotspot {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    cursor: pointer;
    /* ⚡ OPTIMISÉ: Transform + opacity uniquement (GPU accelerated) */
    transition: transform 0.3s ease, opacity 0.3s ease, filter 0.3s ease;
    will-change: transform; /* GPU acceleration hint */
    object-fit: contain;
    z-index: 2;
}

.hotspot:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
}

/* ♿ ACCESSIBILITÉ: État focus pour navigation clavier */
.hotspot:focus-visible,
.hotspot-wrapper:focus-within .hotspot {
    /* Keep focus outline for keyboard users */
    outline: 3px solid #3FA535;
    outline-offset: 4px;
}

/* 🎨 UX: Loading state pour lazy-loaded images */
.hotspot.loading {
    opacity: 0.5;
    animation: pulse-loading 1.5s infinite;
}

@keyframes pulse-loading {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.8; }
}

.hotspot.loaded {
    animation: fade-in 0.3s ease;
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.hotspot.error {
    opacity: 0.3;
    filter: grayscale(100%);
}

/* ===== HOTSPOT SELECTED / ACTIVE VISUAL (replaces old blue circle) ===== */
/* We apply the selected state on the wrapper to avoid duplicate image layering */
.hotspot-wrapper.hotspot-selected {
    /* subtle scale to indicate selection */
    transform: translate(-50%, -50%) scale(1.06);
    z-index: 1106;
}

.hotspot-wrapper.hotspot-selected .hotspot {
    /* add a soft green ring using box-shadow to avoid layout shift */
    box-shadow: 0 0 0 6px rgba(63,165,53,0.12), /* outer soft halo */
                0 0 0 2px rgba(63,165,53,0.18) inset; /* subtle inner ring */
    transform: scale(1.02);
}

/* small checkmark badge positioned top-right of the hotspot wrapper */
.hotspot-wrapper.hotspot-selected::after {
    content: '\2713'; /* checkmark */
    position: absolute;
    top: 6%;
    right: 6%;
    transform: translate(50%, -50%);
    background: #3FA535;
    color: white;
    font-size: 12px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    z-index: 1107;
}

/* Keep hover visuals unobtrusive: hover behavior remains defined earlier (no-op override removed) */

.hotspot-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 16px 0;
}

.hotspot-cell {
    background: #f5f5f5;
    border-radius: 8px;
    padding: 12px;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== POPUP BOTTOM SECTION ===== */
.popup-bottom-section {
    position: absolute;
    left: 0;
    right: 0;
    /* offset by popup-content padding so visual bottom is flush with popup outer edge */
    bottom: -90px !important;
    z-index: 1002;
    height: 50vh;
    min-height: 50vh;
    padding: 0 20px 20px 20px;
    border-radius: 0 0 10px 10px;
    margin: 0;
    display: none;
    transition: all 0.3s ease;
    overflow-y: auto;
}

/* Ensure we don't force background on this section or its children */
.popup-bottom-section,
.popup-bottom-section * {
    background: transparent !important;
}

/* Pin dynamic text container to bottom of the bottom section */
#dynamicTextContainer {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px; /* respect popup padding */
    box-sizing: border-box;
}

.dynamic-text-container {
    width: 100%;
}

.placeholder-message {
    text-align: center;
    padding: 40px;
    color: #666;
    font-style: italic;
}

.click-icon {
    font-size: 24px;
    display: block;
    margin-bottom: 10px;
}

/* ===== DYNAMIC CONTENT ===== */
.dynamic-composter {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 20px;
    animation: fadeIn 0.3s ease forwards;
}

.dynamic-left {
    width: 33%;
    padding: 15px;
    /* background, border-radius, box-shadow and colored left border removed per request */
    text-align: left;
    font-size: 14px;
    position: relative;
    top: -120px;
}

/* Habitat-specific override: bring .dynamic-left up slightly for habitat h4 */
.popup-content.h4 .dynamic-left {
    top: -90px;
}

/* Habitat-specific override: lower .dynamic-left for habitat h2 */
.popup-content.h2 .dynamic-left {
    top: -40px;
}

/* Habitat-specific override: bring .dynamic-left up more for habitat h5 */
.popup-content.h5 .dynamic-left {
    top: -30px;
}

/* Habitat-specific override: increase min-height of habitat image container for habitat h1 */
.popup-content.h1 .habitat-image-container {
    min-height: 670px;
}

/* Habitat-specific override: set .dynamic-left position for habitat h1 */
.popup-content.h1 .dynamic-left {
    top: -35px;
}

.dynamic-center {
    width: 33%;
    padding: 15px;
    /* background, border-radius, box-shadow and colored left border removed per request */
}

.dynamic-right {
    width: 30%;
    padding: 15px;
    /* background, border-radius, box-shadow and colored left border removed per request */
}

.dynamic-right img {
    width: 85px;
}

/* Ensure the top padding for the center column is preserved despite earlier padding shorthand rules */
.dynamic-composter .dynamic-center {
    padding-top: 25px !important;
}

.main-title {
    color: #2E7D32;
    margin-bottom: 10px;
    font-size: 16px;
}

.main-description {
    color: #555;
    line-height: 1.5;
    margin-bottom: 15px;
}

.dynamic-composter h4 {
    color: #333;
    margin: 15px 0 10px 0;
    font-size: 16px;
}

.dynamic-composter ul {
    padding-left: 20px;
}

.dynamic-composter li {
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.4;
}

/* ===== HABITAT-SPECIFIC POPUP STYLES ===== */
.popup-content.h1 .popup-header {
    border-bottom-color: rgba(63, 165, 53, 0.25); /* subtle green tint matching #3FA535 */
}
.popup-content.h1 .popup-title {
    color: #3FA535 !important;
}

.popup-content.h2 .popup-header {
    border-bottom-color: rgba(40, 167, 69, 0.3);
}
.popup-content.h2 .popup-title {
    color: #28a745;
}

.popup-content.h3 .popup-header {
    border-bottom-color: rgba(23, 162, 184, 0.3);
}
.popup-content.h3 .popup-title {
    color: #17a2b8;
}

.popup-content.h4 .popup-header {
    border-bottom-color: rgba(253, 126, 20, 0.3);
}
.popup-content.h4 .popup-title {
    color: #fd7e14;
}

.popup-content.h5 .popup-header {
    border-bottom-color: rgba(111, 66, 193, 0.3);
}
.popup-content.h5 .popup-title {
    color: #6f42c1;
}

/* ===== HABITAT-SPECIFIC MAP BACKGROUNDS ===== */
/* h1: Forêts à caractère naturel */
.popup-content.h1 .popup-map-section {
    background-image: none;
}

/* h2: Forêts exploitées (fallback to niveau image if a dedicated map not present) */
.popup-content.h2 .popup-map-section {
    background-image: none;
}

/* h3: Cirques glaciaires */
.popup-content.h3 .popup-map-section {
    background-image: none;
}

/* Adjust popup bottom section position specifically for habitat h3 */
.popup-content.h3 .popup-bottom-section {
    bottom: -80px;
}

/* h4: Milieux aquatiques */
.popup-content.h4 .popup-map-section {
    /* replace with specific map when available */
    background-image: none;
}

/* h5: Milieux ouverts */
.popup-content.h5 .popup-map-section {
    background-image: none;
}

/* ===== ANIMATIONS ===== */
@keyframes pulse {
    0% { box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3); }
    50% { box-shadow: 0 8px 25px rgba(0, 123, 255, 0.5); }
    100% { box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3); }
}

@keyframes ripple {
    to {
        transform: scale(2.5);
        opacity: 0;
    }
}

@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(10px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* ===== STYLES POUR LE NOUVEAU SYSTÈME DE HOTSPOTS ===== */
.details-section {
    margin-top: 15px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 5px;
}

.details-section h6 {
    color: #2c3e50;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
}

.details-section ul {
    margin: 0;
    padding-left: 15px;
}

.details-section li {
    margin-bottom: 5px;
    font-size: 13px;
    color: #555;
}

.indicators-section {
    margin-top: 15px;
}

.indicator {
    display: inline-block;
    padding: 5px 10px;
    margin: 2px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 600;
    transition: transform 0.2s ease;
}

.indicator.conservation {
    background: linear-gradient(135deg, #4CAF50, #66BB6A);
    color: white;
}

.indicator.threat {
    background: linear-gradient(135deg, #FF9800, #FFB74D);
    color: white;
}

.indicator.priority {
    background: linear-gradient(135deg, #2196F3, #64B5F6);
    color: white;
}

.error-message {
    text-align: center;
    padding: 30px;
    background: linear-gradient(135deg, #ffebee, #ffcdd2);
    border-radius: 10px;
    border-left: 4px solid #f44336;
}

/* Styling for Le saviez-vous values (remove labels - display values clearly) */
.dynamic-right .indicator {
    display: block;
    background: none;
    color: #2c3e50;
    font-size: 15px;
    font-weight: 500;
    padding: 6px 0;
    margin: 4px 0;
    border-radius: 0;
}

.dynamic-right .indicator img {
    display: none !important;
}

.dynamic-right p {
    color: #2c3e50;
    font-size: 15px;
    line-height: 1.45;
    margin: 6px 0;
    font-weight: 500;
}

/* Saviez-vous card style (inspired by provided mockup) */
.saviez-card {
    display: flex;
    gap: 12px;
    background: #fff6db !important; /* pale warm yellow */
    padding: 30px 10px;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    align-items: center;
}
.saviez-deco {
    flex: 0 0 56px;
    height: 56px;
    border-radius: 6px;
    background: rgba(0,0,0,0.06);
    color: #444;
    font-size: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
.saviez-body {
    flex: 1 1 auto;
}
.saviez-title {
    margin: 0 0 6px 0;
    font-size: 18px;
    letter-spacing: 0.6px;
    color: #2b2b2b;
    text-transform: uppercase;
    font-weight: 700;
    border-bottom: none !important;
}
.saviez-text {
    margin: 0;
    color: #222;
    font-size: 15px;
    line-height: 1.4;
}

.error-title {
    color: #c62828;
    margin-bottom: 10px;
    font-size: 18px;
}

.error-details {
    color: #666;
    font-size: 14px;
    font-style: italic;
}

.dynamic-composter.error {
    justify-content: center;
}

.dynamic-composter.legacy::before {
    content: "⚠️ Mode compatibilité";
    position: absolute;
    top: -25px;
    left: 0;
    font-size: 12px;
    color: #ff9800;
    font-weight: 600;
}

.dynamic-composter.legacy {
    position: relative;
    border: 2px dashed #ff9800;
    border-radius: 8px;
}

/* Styles pour les sections de contenu */
.dynamic-left h5,
.dynamic-right h5 {
    color: #2c3e50;
    margin: 10px 0 8px 0;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
}

/* Center header (Actions) should be larger and without bottom border */
.dynamic-center h5 {
    color: #2c3e50;
    margin: 10px 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    border-bottom: none;
    padding-bottom: 0;
    padding-left:15px;
}

/* Animation pour les indicateurs */
.indicator:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Styles pour le contenu enrichi */
.content-section {
    margin: 15px 0;
    padding: 10px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.3);
}

.content-section h6 {
    margin: 0 0 8px 0;
    color: #2c3e50;
    font-size: 13px;
    font-weight: 600;
}

/* Styles pour les galeries futures */
.image-gallery {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    overflow-x: auto;
    padding: 5px 0;
}

.gallery-thumbnail {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.gallery-thumbnail:hover {
    transform: scale(1.1);
}

/* Styles pour les données de graphiques futures */
.chart-container {
    margin-top: 15px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 5px;
    text-align: center;
}

.chart-placeholder {
    color: #666;
    font-style: italic;
    padding: 20px;
}

/* Amélioration de la lisibilité des listes */
.dynamic-composter ul {
    margin: 10px 0;
}

.dynamic-composter li {
    background: rgba(255, 255, 255, 0.6);
    margin-bottom: 6px;
    padding: 5px 8px;
    border-radius: 3px;
    border-left: 3px solid currentColor;
    transition: background-color 0.2s ease;
}

.dynamic-composter li:hover {
    background: rgba(255, 255, 255, 0.8);
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    #backPrincipal {
        justify-content: center;
        padding: 15px;
        width: 100%;
        max-width: 768px;
    }
    
    .selector-section {
        padding: 20px;
        margin: 10px;
    }
    
    .habitat-container {
        flex-direction: column;
        gap: 15px;
    }
    
    .habitat-btn {
        width: 100%;
        max-width: 250px;
        padding: 16px 24px;
    }
    
    .title {
        font-size: 1.3rem;
    }
    
    .status-indicator {
        top: 10px;
        right: 10px;
        font-size: 16px;
        padding: 20px 30px;
    }

    .popup-content {
        padding: 25px;
        margin: 20px;
        min-width: auto;
        width: 95%;
    }

    .popup-title {
        font-size: 1.5rem;
    }

    .popup-left-section,
    .popup-right-section {
        width: 100%;
        float: none;
    }

    .dynamic-composter {
        flex-direction: column;
        gap: 15px;
    }

    .dynamic-left,
    .dynamic-center,
    .dynamic-right {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .selector-section {
        padding: 15px;
    }
    

    .habitat-btn {
        font-size: 15px;
        padding: 14px 20px;
    }

    .popup-content {
        padding: 20px;
    }

    .habitat-image-container {
        min-height: 580px;
    }
}