/* Variable utilisée par .globe-info pour la largeur du panneau latéral */
:root {
    --globe-info-width: 26em;
}

.globe-wrap {
    width: 100%;
    height: min(100vh, 100rem);
    position: relative;
    overflow: clip;
  }
  
  .globe-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
  }
  
  .globe-map {
    z-index: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
  }
  
  .globe-info {
    z-index: 10;
    color: #f2f2f2;
    width: var(--globe-info-width);
    background-color: #2a2727;
    border: 1px solid #ffffff1a;
    border-radius: 1em;
    position: absolute;
    top: 1em;
    bottom: 1em;
    right: 0em;
    box-shadow: 0 0 12px #0000001a;
  }
  
  /* Info pane */
  [data-globe-info] {
    opacity: 1;
    visibility: visible;
    transform: translate(0em, 0px);
    transition: all 0.65s cubic-bezier(0.625, 0.05, 0, 1);
  }
  
  [data-globe-init][data-collapsed="true"] [data-globe-info] {
    opacity: 0;
    visibility: hidden;
    transform: translate(4em, 0px);
  }
  
  .globe-info__collection {
    width: 100%;
    height: 100%;
  }
  
  .globe-info__list {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    position: absolute;
    inset: 0%;
    overflow: hidden auto;
  }
  
  .globe-info__list-item {
    grid-column-gap: 2em;
    grid-row-gap: 2em;
    scroll-snap-align: start;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    min-height: 100%;
    padding: 2em;
    display: flex;
  }
  
  .globe-info__list-item-visual {
    aspect-ratio: 3 / 2;
    border-radius: .75em;
    width: 100%;
    overflow: hidden;
  }
  
  .globe-info__list-item-img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
  
  .globe-info__list-item-text {
    grid-column-gap: .5em;
    grid-row-gap: .5em;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 1em;
    display: flex;
  }
  
  .globe-info__list-item-label {
    opacity: .6;
    text-transform: uppercase;
    margin-bottom: 0;
    font-family: Haffer Mono, Arial, sans-serif;
    font-size: .75em;
  }
  
  .globe-info__list-item-h {
    margin-top: 0;
    margin-bottom: 0;
    font-family: Haffer XH, Arial, sans-serif;
    font-size: 2em;
    font-weight: 400;
    line-height: 1.2;
  }

  /* Lien sur le titre de la ville : cliquable mais 100% invisible
     (hérite toutes les propriétés du <h3>, pas de soulignement). */
  .globe-info__list-item-h-link {
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-decoration: none;
    background: none;
  }
  .globe-info__list-item-h-link:hover,
  .globe-info__list-item-h-link:focus {
    color: inherit;
    text-decoration: none;
  }
  
  .globe-info__list-item-link {
    color: inherit;
    text-decoration: none;
  }
  
  .globe-close {
    z-index: 11;
    position: absolute;
    top: 1em;
    right: 1em;
  }
  
  .globe-close__button {
    color: #201d1d;
    background-color: #f2f2f2;
    border-radius: 100em;
    width: 2.5em;
    height: 2.5em;
    padding: 0;
  }
  
  .globe-close__icon {
    width: .625em;
  }
  
  .globe-nav {
    z-index: 10;
    grid-column-gap: 1em;
    grid-row-gap: 1em;
    color: #f2f2f2;
    bottom: 1em;
    right: calc(var(--globe-info-width)  + 2em);
    background-color: #2a2727;
    border: 1px solid #ffffff1a;
    border-radius: 100em;
    justify-content: center;
    align-items: center;
    padding: .25em;
    display: flex;
    position: absolute;
  }
  
  /* Collapse nav to the right */
  [data-globe-nav] { 
    transition: all 0.65s cubic-bezier(0.625, 0.05, 0, 1);
  }
  
  [data-globe-init][data-collapsed="true"] [data-globe-nav] {
    right: 1em;
  }
  
  .globe-nav__button {
    background-color: #0000;
    border-radius: 100em;
    justify-content: center;
    align-items: center;
    width: 2em;
    height: 2em;
    padding: 0;
    display: flex;
  }
  
  .globe-nav__button-icon {
    width: .75em;
  }
  
  .globe-nav__counter {
    text-transform: uppercase;
    margin-bottom: 0;
    font-family: Haffer Mono, Arial, sans-serif;
    font-size: .875em;
  }
  
  .globe-reopen {
    z-index: 12;
    color: #f2f2f2;
    background-color: #2a2727;
    border: 1px solid #ffffff26;
    border-right-style: none;
    border-top-left-radius: .5em;
    border-bottom-left-radius: .5em;
    height: 3em;
    padding: 0 .5em;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
  }
  
  .globe-reopen__icon {
    width: 1em;
  }
  
  [data-globe-reopen] {
    opacity: 0;
    visibility: hidden;
    transform: translate(2em, 0px);
    transition: all 0.4s cubic-bezier(0.625, 0.05, 0, 1);
  }
  
  [data-globe-init][data-collapsed="true"] [data-globe-reopen] {
    opacity: 1;
    visibility: visible;
    transform: translate(0em, 0px);
  }
  
  .globe-marker {
    color: #201d1d;
    background-color: #ffe19e;
    border-radius: 100em;
    justify-content: center;
    align-items: center;
    width: 2.5em;
    height: 2.5em;
    padding: .625em;
    display: flex;
    position: relative;
  }
  
  .globe-marker__icon {
    width: 100%;
  }
  
  [data-globe-marker][data-active="true"] {
    outline: 1px solid #FFF;
    outline-offset: .5em;
  }
  
  
  /* Hide marker template on site */
  [data-globe-init="initialized"] [data-globe-marker-template] {
    display: none;
  }

  /* Points rendus en couche native Mapbox (cf. addPins) → le template HTML
     n'est plus jamais utilisé, on le masque dans tous les cas. */
  [data-globe-marker-template] {
    display: none !important;
  }
  
  /* Style zoom in/out buttons */
  .mapboxgl-ctrl-group button {
    background: #2a2727 !important;
  }
  
  /* Make default zoom icons white */
  .mapboxgl-ctrl button .mapboxgl-ctrl-icon {
    filter: invert(1);
  }
  
  /* Hide mapbox logo and info */
  .mapboxgl-ctrl-logo, .mapboxgl-ctrl-attrib {
    display: none !important;
  }
  
  .mapboxgl-ctrl-group button+button {
    border-top: 1px solid #ffffff1a;
  }
  
  @media screen and (max-width: 991px) {
    .section-resource {
      justify-content: center;
      align-items: flex-start;
    }
  
    .globe-wrap {
      flex-flow: column;
      height: auto;
      display: flex;
    }
  
    .globe-map {
      aspect-ratio: 1;
      flex: none;
      height: auto;
      position: relative;
      inset: auto;
    }
  
    .globe-info {
      z-index: auto;
      box-shadow: none;
      border-style: solid none none;
      border-radius: 0;
      width: 100%;
      position: relative;
      inset: auto;
    }
  
    .globe-info__list {
      scroll-snap-type: x mandatory;
      display: flex;
      position: relative;
      inset: auto;
      overflow: auto hidden;
    }
  
    .globe-info__list-item {
      scroll-snap-align: center;
      border-right: 1px solid #ffffff1a;
      flex: 0 0 80%;
      min-width: 80%;
      padding: 1.5em 1.5em 2em;
    }
  
    .globe-info__list-item-text {
      margin-bottom: 0;
    }
  
    .globe-info__list-item-h {
      font-size: 1.5em;
    }
  
    .globe-close {
      display: none;
    }
  
    .globe-nav {
      border-left-style: none;
      border-right-style: none;
      border-radius: 0;
      justify-content: space-between;
      align-items: center;
      padding: 1em 1.5em;
      position: relative;
      inset: auto;
    }
  
    .globe-reopen {
      display: none;
    }
  }
  
  @media screen and (max-width: 479px) {
    .globe-info__list-item {
      grid-column-gap: 1em;
      grid-row-gap: 1em;
      padding-top: 1em;
      padding-left: 1em;
      padding-right: 1em;
    }
  
    .globe-info__list-item-visual {
      border-radius: .5em;
    }
  }

/* Indice de zoom au centre du globe (avant toute interaction) */
.globe-zoom-hint {
    position: absolute;
    z-index: 5;
    transform: translate(-50%, -50%);
    pointer-events: none;
    white-space: nowrap;
    font-family: 'RMMono', 'Haffer Mono', Arial, sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    text-transform: lowercase;
    color: rgba(255, 255, 255, 0.65);
    opacity: 1;
    transition: opacity 0.4s ease;
}

.globe-zoom-hint.is-hidden {
    opacity: 0;
}

/* Indice de zoom en bas du globe (avant toute interaction) */
.globe-zoom-hint {
    position: absolute;
    z-index: 5;
    bottom: 2.5em;
    transform: translateX(-50%);
    pointer-events: none;
    white-space: nowrap;
    font-family: 'RMMono', 'Haffer Mono', Arial, sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    text-transform: lowercase;
    color: rgba(255, 255, 255, 0.65);
    opacity: 1;
    transition: opacity 0.4s ease;
}

.globe-zoom-hint.is-hidden {
    opacity: 0;
}

.globe-city-popup .mapboxgl-popup-content {
    background: #2a2727;
    color: #f2f2f2;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0.5rem;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
    font-family: 'RMMono', monospace;
    font-size: 0.75rem;
    padding: 0.5rem 0.7rem;
}

.globe-city-popup .mapboxgl-popup-tip {
    border-top-color: #2a2727;
}

/* ==========================================================================
   Mapbox Globe Section — intégration homepage Arc & Typ (fond noir styleguide)
   ========================================================================== */

.mapbox-globe-section {
    background-color: var(--black);
    color: var(--white);
    padding: 6em 9.6em 6em 9.6em;
    position: relative;
}

/* Aligné sur le pattern engagement-section-v2 */
.mapbox-globe-section .section-subtitle {
    color: var(--white);
    opacity: 0.55;
}

.mapbox-globe-section .new-title-section {
    margin-bottom: 4rem;
}

/* Titre blanc sur fond noir (override du var(--black) global de .new-hero-title) */
.mapbox-globe-section .new-hero-title,
.mapbox-globe-section .new-hero-title .line,
.mapbox-globe-section .new-hero-title .word,
.mapbox-globe-section .new-hero-title .char {
    color: var(--white);
}

/* Globe sans cadre : tout l'arbre interne hérite du noir styleguide --------
   On force chaque couche Mapbox (wrap, container, canvas, map) à matcher
   var(--black) pour que rien ne fasse "carré posé" dans la section. */
.mapbox-globe-section .globe-container,
.mapbox-globe-section .globe-wrap {
    background-color: var(--black);
}

.mapbox-globe-section .globe-wrap {
    height: clamp(32rem, 75vh, 56rem);
}

.mapbox-globe-section .globe-map,
.mapbox-globe-section .mapboxgl-map,
.mapbox-globe-section .mapboxgl-canvas-container,
.mapbox-globe-section .mapboxgl-canvas {
    background-color: var(--black) !important;
}

/* Fondu périphérique très court : adoucit la coupe du globe au bord du canvas
   sans toucher au panneau, aux indications ni aux interactions Mapbox. */
.mapbox-globe-section .globe-map {
    --globe-edge-fade: clamp(10px, 1.25vw, 24px);
}

.mapbox-globe-section .globe-map::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background:
        linear-gradient(to right, var(--black) 0%, transparent 100%) left center / var(--globe-edge-fade) 100% no-repeat,
        linear-gradient(to left, var(--black) 0%, transparent 100%) right center / var(--globe-edge-fade) 100% no-repeat,
        linear-gradient(to bottom, var(--black) 0%, transparent 100%) center top / 100% var(--globe-edge-fade) no-repeat,
        linear-gradient(to top, var(--black) 0%, transparent 100%) center bottom / 100% var(--globe-edge-fade) no-repeat;
}

/* -- Intégration native du panneau info dans la charte Arc & Typ ---------- */
.mapbox-globe-section .globe-info {
    background-color: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

.mapbox-globe-section .globe-info__list-item-label {
    font-family: 'RMMono', 'Haffer Mono', Arial, sans-serif;
    opacity: 0.55;
}

.mapbox-globe-section .globe-info__list-item-h {
    font-family: 'Arc_Typ', 'RMNeue-Regular', Arial, sans-serif;
    letter-spacing: -0.02em;
    font-weight: 500;
    color: var(--white);
}

/* Scrollbar du panneau info masquée (le panneau n'est pas en 100vh) */
.mapbox-globe-section .globe-info__list {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.mapbox-globe-section .globe-info__list::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* -- "Nous rencontrer" : bouton du site (about-link-container) ------------ */
.mapbox-globe-section .globe-info__list-item-link.about-link-container {
    display: inline-flex;
    align-items: center;
    gap: 1em;
    margin-top: 0.5em;
    text-decoration: none;
    color: var(--white);
    width: fit-content;
}

.mapbox-globe-section .globe-info__list-item-link .about-link {
    font-family: 'RMMono', 'Haffer Mono', Arial, sans-serif;
    font-size: 0.8rem;
    color: var(--white);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-bottom: 5px;
    position: relative;
}

.mapbox-globe-section .globe-info__list-item-link .about-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: var(--white);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.mapbox-globe-section .globe-info__list-item-link.about-link-container:hover .about-link::after {
    transform: scaleX(1);
}

.mapbox-globe-section .globe-info__list-item-link .about-button {
    background: transparent;
    border: 1px dotted var(--white);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    color: var(--white);
}

.mapbox-globe-section .globe-info__list-item-link .arrow-wrapper {
    display: flex;
    transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
    position: absolute;
    width: 200%;
    left: 0;
    transform: translateX(-50%);
}

.mapbox-globe-section .globe-info__list-item-link.about-link-container:hover .arrow-wrapper {
    transform: translateX(0);
}

.mapbox-globe-section .globe-info__list-item-link .arrow-svg {
    width: 50%;
    box-sizing: border-box;
    padding: 0 16px;
    color: var(--white);
}

/* -- Navigation & boutons : minimaux, sans effet "widget" ----------------- */
.mapbox-globe-section .globe-nav {
    background-color: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.mapbox-globe-section .globe-nav__counter {
    font-family: 'RMMono', 'Haffer Mono', Arial, sans-serif;
}

.mapbox-globe-section .globe-reopen {
    background-color: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-right-style: none;
}

.mapbox-globe-section .globe-close__button {
    background-color: var(--white);
    color: var(--black);
}

/* -- Marqueurs aux couleurs Arc & Typ ------------------------------------- */
.mapbox-globe-section .globe-marker {
    color: #ffffff;
    background-color: var(--orange-primary);
}

.mapbox-globe-section [data-globe-marker][data-active="true"] {
    outline: 1px solid var(--orange-primary);
    outline-offset: .5em;
}

/* -- Contrôles natifs Mapbox : zoom +/- adaptés au thème ------------------ */
.mapbox-globe-section .mapboxgl-ctrl-group {
    background-color: rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: none !important;
}

.mapbox-globe-section .mapboxgl-ctrl-group button {
    background: transparent !important;
}

/* -- Masquer le hover overlay "Use Ctrl + scroll to zoom" (cooperativeGestures) -- */
.mapbox-globe-section .mapboxgl-scroll-zoom-blocker,
.mapbox-globe-section .mapboxgl-touch-pan-blocker,
.mapbox-globe-section .mapboxgl-canvas-container--scroll-zoom-blocker .mapboxgl-scroll-zoom-blocker,
.mapboxgl-scroll-zoom-blocker,
.mapboxgl-touch-pan-blocker {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Masquer aussi les pseudo-elements qui produisent le voile sombre + texte */
.mapbox-globe-section .mapboxgl-canvas-container--scroll-zoom-blocker::after,
.mapbox-globe-section .mapboxgl-canvas-container--touch-pan-blocker::after,
.mapboxgl-canvas-container--scroll-zoom-blocker::after,
.mapboxgl-canvas-container--touch-pan-blocker::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
}

@media screen and (max-width: 991px) {
    .mapbox-globe-section {
        padding: 4em 2em;
    }

    .mapbox-globe-section .globe-wrap {
        height: auto;
    }
}

@media screen and (max-width: 479px) {
    .mapbox-globe-section {
        padding: 3em 1.25em;
    }
}

/* =============================================
   RESPONSIVE — MOBILE (≤768px)
   On force le globe + le panneau d'info à s'empiler verticalement.
   ============================================= */
@media (max-width: 768px) {
    :root {
        --globe-info-width: 100%;
    }

    .globe-wrap {
        height: auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    /* Le conteneur doit épouser la hauteur réelle du globe empilé (carte +
       panneau info = min-height 100vh sur .globe-wrap). Une hauteur fixe de
       60vh tronquait le flux → la section suivante (chiffres) chevauchait le
       globe entre ~510 et ~750px de large. */
    .globe-container {
        height: auto;
        min-height: 0;
        position: relative;
    }

    .globe-info {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        width: 100%;
        height: auto;
        min-height: 0;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .globe-info__list {
        position: relative;
        height: auto;
        min-height: 0;
    }

    .globe-info__list-item {
        padding: 1.5em;
    }

    .globe-info__list-item-h {
        font-size: 1.5em;
    }

    /* Le bouton "reopen" et la nav s'adaptent */
    .globe-nav {
        right: 1em;
        bottom: auto;
        top: 1em;
    }

    [data-globe-init][data-collapsed="true"] [data-globe-nav] {
        right: 1em;
    }

    .globe-reopen {
        right: 1em;
        top: 1em;
        transform: none;
        border-radius: 100em;
        height: 2.5em;
    }
}