/* ─── Reset & Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --topbar-h:      48px;
    --map-w:         44vw;
    --map-w-max:     680px;
    --toggle-peek:   38px;

    --bar-bg:        rgba(62, 62, 62, 0.84);
    --bar-border:    rgba(255,255,255,0.10);
    --btn-hover:     rgba(255,255,255,0.13);
    --btn-active:    rgba(255,255,255,0.20);
    --resume-bg:     #4e7d35;
    --resume-hover:  #416a2b;
    --text-light:    #f2f2f2;
    --text-dim:      rgba(242,242,242,0.58);
    --divider:       rgba(0,0,0,0.06);

    --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
    --ease-io:       cubic-bezier(0.45, 0, 0.55, 1);

    --r-sm:  6px;
}

html, body {
    height: 100%;
    width:  100%;
    overflow: hidden;
    background: #fff;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════════════════════════════════
   TOP BAR
   ═══════════════════════════════════════════════════════════════ */
.topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--topbar-h);
    z-index: 200;
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    background: var(--bar-bg);
    border-bottom: 1px solid var(--bar-border);
    user-select: none;
}

.topbar-inner {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 14px 0 18px;
    gap: 6px;
}

/* Title */
.topbar-left  { flex: 0 0 auto; margin-right: 4px; }
.topbar-title {
    font-size:      10.5px;
    font-weight:    600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--text-light);
    opacity:        0.88;
    white-space:    nowrap;
}

/* Nav buttons */
.topbar-nav {
    display:         flex;
    align-items:     center;
    gap:             2px;
    flex:            1;
    justify-content: center;
}

.nav-btn {
    background:     transparent;
    border:         none;
    cursor:         pointer;
    font-family:    inherit;
    font-size:      10px;
    font-weight:    600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color:          var(--text-dim);
    padding:        6px 11px;
    border-radius:  var(--r-sm);
    transition:
        background 0.20s var(--ease-out),
        color      0.20s var(--ease-out),
        transform  0.14s var(--ease-out);
    white-space: nowrap;
}
.nav-btn:hover  { background: var(--btn-hover); color: var(--text-light); }
.nav-btn:active { transform: scale(0.95); }
.nav-btn.active { background: var(--btn-active); color: #fff; }

/* Résumé */
.topbar-right { flex: 0 0 auto; margin-left: 6px; }

.resume-btn {
    display:        inline-flex;
    align-items:    center;
    gap:            5px;
    background:     var(--resume-bg);
    color:          #fff;
    text-decoration: none;
    font-family:    inherit;
    font-size:      10px;
    font-weight:    700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding:        8px;
    border-radius:  var(--r-sm);
    border:         none;
    cursor:         pointer;
    box-shadow:     0 2px 8px rgba(0,0,0,0.22);
    transition:
        background  0.20s var(--ease-out),
        transform   0.14s var(--ease-out),
        box-shadow  0.20s var(--ease-out);
    white-space: nowrap;
}
.resume-btn:hover  {
    background: var(--resume-hover);
    transform:  translateY(-1px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.28);
}
.resume-btn:active { transform: scale(0.96); }
.resume-btn svg    { opacity: 0.82; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════
   MAIN WRAPPER  — flex row, fills below topbar
   ═══════════════════════════════════════════════════════════════ */
.main-wrapper {
    position: fixed;
    top:      var(--topbar-h);
    left:     0;
    right:    0;
    bottom:   0;
    display:  flex;
    flex-direction: row;
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   VIEWER
   ═══════════════════════════════════════════════════════════════ */
.viewer {
    flex:     1 1 auto;
    position: relative;
    overflow: hidden;
    cursor:   default;
    transition: flex 0.44s var(--ease-out);
    background: #fff;
    /* thin right border to separate from map when open */
    border-right: 1px solid transparent;
}

body.map-open .viewer {
    border-right-color: var(--divider);
}

body.section-active .viewer {
    cursor: pointer;        /* clicking returns to full when on section */
}

.image-container {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.viewer-image {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: contain;
    object-position: center;
    padding:    14px 20px;

    opacity:   0;
    transform: scale(0.97);
    transition:
        opacity   0.40s var(--ease-out),
        transform 0.40s var(--ease-out);
    pointer-events: none;
    will-change: transform, opacity;
}

.viewer-image.active {
    opacity:   1;
    transform: scale(1);
}

/* ── Back hint pill (visible when on a section) ────────────── */
.back-hint {
    position:   absolute;
    bottom:     16px;
    left:       50%;
    transform:  translateX(-50%) translateY(8px);
    background: rgba(55, 55, 55, 0.70);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color:          rgba(255,255,255,0.88);
    font-size:      10px;
    font-weight:    500;
    letter-spacing: 0.07em;
    padding:        7px 18px;
    border-radius:  50px;
    border:         1px solid rgba(255,255,255,0.10);
    pointer-events: none;
    opacity:        0;
    transition:
        opacity   0.30s var(--ease-out),
        transform 0.30s var(--ease-out);
    white-space: nowrap;
    z-index: 10;
}

body.section-active .back-hint {
    opacity:   1;
    transform: translateX(-50%) translateY(0);
}

/* ═══════════════════════════════════════════════════════════════
   MAP PANEL  — slides in from right, pushes viewer
   ═══════════════════════════════════════════════════════════════ */
.map-panel {
    flex:      0 0 auto;
    width:     0;               /* collapsed: takes 0 space  */
    max-width: var(--map-w-max);
    overflow:  hidden;
    background: #ffffff;
    position:  relative;
    display:   flex;
    flex-direction: column;

    /* Smooth width expansion */
    transition: width 0.44s var(--ease-out);
}

body.map-open .map-panel {
    width: var(--map-w);
}

/* Inner container: no slide — pure push from width expansion */
.map-panel-inner {
    position:   absolute;
    inset:      0;
    display:    flex;
    flex-direction: column;
    align-items: stretch;
    overflow:   hidden;
}

/* Close button */
.map-close-btn {
    position:     absolute;
    top:          10px;
    right:        12px;
    z-index:      20;
    background:   rgba(62,62,62,0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border:       1px solid rgba(255,255,255,0.12);
    color:        #fff;
    width:        30px;
    height:       30px;
    border-radius: 50%;
    display:      flex;
    align-items:  center;
    justify-content: center;
    cursor:       pointer;
    transition:
        background 0.18s var(--ease-out),
        transform  0.14s var(--ease-out);
}
.map-close-btn:hover  { background: rgba(80,80,80,0.90); }
.map-close-btn:active { transform: scale(0.92); }

/* Map image */
.map-image-wrap {
    flex:     1;
    display:  flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding:  10px 10px 10px 8px;
}

.map-img {
    width:      100%;
    height:     100%;
    object-fit: contain;
    object-position: center;
    display:    block;
    border-radius: 6px;
}

/* ═══════════════════════════════════════════════════════════════
   MAP TOGGLE  — tracks the map seam via --map-actual-w
   ═══════════════════════════════════════════════════════════════ */
.map-toggle {
    position:   fixed;
    right:      0;
    top:        50%;
    transform:  translateY(-50%);
    z-index:    150;

    width:         var(--toggle-peek);
    height:        72px;
    border-radius: 72px 0 0 72px;

    background: rgba(62, 62, 62, 0.86);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border:       1px solid var(--bar-border);
    border-right: none;

    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    color:           var(--text-light);
    box-shadow:      -3px 0 16px rgba(0,0,0,0.14);

    transition:
        background  0.22s var(--ease-out),
        width       0.20s var(--ease-out),
        opacity     0.22s var(--ease-out);
}

.map-toggle:hover  { background: rgba(82, 82, 82, 0.94); width: 44px; }
.map-toggle:active { transform: translateY(-50%) scale(0.95); }
.map-toggle svg    { margin-right: 4px; }

/* Hide toggle when map is open (X button handles closing) */
body.map-open .map-toggle {
    opacity:        0;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   DRAG RESIZER  — between viewer and map panel
   ═══════════════════════════════════════════════════════════════ */
.resizer {
    flex:          0 0 5px;
    width:         5px;
    position:      relative;
    cursor:        col-resize;
    background:    transparent;
    z-index:       60;

    /* Hidden when map is closed */
    opacity:        0;
    pointer-events: none;
    transition:     opacity 0.30s var(--ease-out);
}

body.map-open .resizer {
    opacity:        1;
    pointer-events: all;
}

/* Visual pill indicator */
.resizer::after {
    content:      '';
    position:     absolute;
    top:          50%;
    left:         50%;
    transform:    translate(-50%, -50%);
    width:        3px;
    height:       44px;
    background:   rgba(0,0,0,0.15);
    border-radius: 4px;
    transition:   background 0.18s var(--ease-out), height 0.18s var(--ease-out);
}

.resizer:hover::after,
.resizer.dragging::after {
    background: rgba(0,0,0,0.38);
    height:     64px;
}

/* While dragging: prevent text selection across the page */
body.is-resizing {
    cursor:      col-resize !important;
    user-select: none;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
    .topbar-title  { display: none; }
    .topbar-inner  { padding: 0 10px; }
    .nav-btn       { padding: 6px 8px; font-size: 9.5px; letter-spacing: 0.08em; }
    body.map-open .map-panel { width: 48vw; }
}

@media (max-width: 900px) {
    .nav-btn       { padding: 5px 6px; font-size: 9px; letter-spacing: 0.06em; }
    .resume-btn    { padding: 6px 10px; font-size: 9px; }
    body.map-open .map-panel { width: 55vw; }
}

/* Projector / large displays */
@media (min-width: 1600px) {
    :root          { --topbar-h: 52px; --map-w-max: 750px; }
    .nav-btn       { font-size: 11px; padding: 7px 14px; }
    .topbar-title  { font-size: 11.5px; }
    .viewer-image  { padding: 18px 28px; }
    body.map-open .map-panel { width: 42vw; }
}