:root{

  --bg:#f6f1e7;

  --surface:
    rgba(255,255,255,.82);

  --surface-strong:
    rgba(255,255,255,.92);

  --border:
    rgba(255,255,255,.28);

  --text:#1f1f1f;

  --text-soft:#6b6b6b;

  --accent:#ff7a00;

  --accent-2:#ff5500;

  --shadow:
    0 10px 30px rgba(0,0,0,.12);

  --radius:18px;

}
/* =========================================================
   GLOBAL
========================================================= */

*{
  box-sizing:border-box;
}

html,
body{
  height:100%;
  margin:0;

  font-family:
  Inter,
  ui-sans-serif,
  system-ui,
  -apple-system,
  BlinkMacSystemFont,
  "SF Pro Display",
  sans-serif;

  background:
    linear-gradient(
      135deg,
      #f6f1e7,
      #efe6d6
    );
}

body{
  margin:0;
  height:100vh;

  overflow:hidden;
  overflow-x:hidden;
}

/* =========================================================
    BOUTONS  FLOTTANTS : UNIQUEMENT VUE CARTE
========================================================= */



/* reset : carte + stats + tables */
body:not(.view-map-active):not(.view-stats-active):not(.view-tables-active) #resetViewBtn{
  display:none;
}

/* =========================================================
   MAP
========================================================= */

#map{

  position:fixed !important;

  top:calc(-1 * env(safe-area-inset-top)) !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;

  width:100vw !important;

  height:
    calc(
      100vh + env(safe-area-inset-top)
    ) !important;

  z-index:1;
}

/* =========================================================
   PANEL
========================================================= */

#panel{
  position:fixed;

  top:0;
  right:-100%;

  width:85%;
  max-width:420px;
  height:100%;

  padding:14px;

  overflow:auto;

  background:rgba(255,255,255,0.95);

  backdrop-filter:blur(10px);

  z-index:2;

  transition:
    right .3s ease,
    transform .35s cubic-bezier(0.22,1,0.36,1);
}

#panel.open{
  right:0;
}

/* =========================================================
   PANEL HEADER
========================================================= */

.panel-header{
  position:sticky;
  top:-14px;

  z-index:20;

  background:rgba(255,255,255,0.96);

  backdrop-filter:blur(10px);

  margin:-14px -14px 10px -14px;

  padding:
    8px 14px 6px;

  border-bottom:
    1px solid rgba(0,0,0,0.06);
}

.panel-header-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;

  gap:10px;
}

.panel-header-actions{
  display:flex;
  align-items:center;

  gap:2px;

  flex-shrink:0;

  margin-left:-6px;
}

/* =========================================================
   TYPOGRAPHY
========================================================= */

h1{
  margin:0;

  font-size:22px;

  letter-spacing:.5px;
}

.subtitle{
  font-size:12px;
  opacity:.7;

  margin-bottom:12px;
}

/* =========================================================
   BUTTONS
========================================================= */

button{
  padding:10px 12px;
  margin:4px;

  border:none;
  border-radius:10px;

  background:
    linear-gradient(
      135deg,
      #2b2b2b,
      #444
      
    );

  color:#fff;

  font-size:13px;

  cursor:pointer;

  box-shadow:
    0 4px 10px rgba(0,0,0,.15);
font-weight:600;

letter-spacing:.2px;

border:
  1px solid rgba(255,255,255,.12);

backdrop-filter:blur(12px);
transition:
  transform .18s ease,
  opacity .18s ease,
  background .28s ease,
  box-shadow .28s ease;
}

button:hover{
  transform:translateY(-2px);

  background:
    linear-gradient(
      135deg,
      #ff7a00,
      #ff5500
    );
}

button:active{
  transform:scale(.95);
}

button.danger{
  background:
    linear-gradient(
      135deg,
      #8b0000,
      #b30000
    );
}

.settings-btn{

  width:100%;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:10px;

  padding:14px;

  margin-bottom:12px;

  border:none;
  border-radius:14px;

  background:
    linear-gradient(
      135deg,
      #2b2b2b,
      #444
    );

  color:white;

  font-size:15px;
}

/* =========================================================
   ICON BUTTONS
========================================================= */

.icon-btn{
  width:26px;
  height:26px;

  padding:0;

  border:none;
  border-radius:50%;

  background:transparent;
  box-shadow:none;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:13px;

  color:#444;
}

.icon-btn:hover{
  background:rgba(0,0,0,.06);

  transform:none;
}

.icon-btn:active{
  background:rgba(0,0,0,.10);

  transform:scale(.92);
}

/* lecture */
#playToggleBtn{
  width:38px;
  height:38px;
  font-size:20px;
  background: linear-gradient(135deg, #ff7a00, #ff5500) !important;
  color: white;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(255,122,0,.4);
}


/* =========================================================
   HEADER ACTIONS
========================================================= */

.header-actions{
  display:flex;
  gap:6px;

  margin-right:14px;
}

.header-actions button{
  min-width:32px;
  height:20px;

  padding:4px 8px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:13px;

  border-radius:6px;
}

/* =========================================================
   CONTROLS
========================================================= */

.controls{
  margin-bottom:12px;

  padding:12px;

  border-radius:14px;

  background:rgba(255,255,255,.8);

  box-shadow:
    0 8px 20px rgba(0,0,0,.06);
}

input[type=range]{
  width:100%;
}

/* =========================================================
   SLIDER
========================================================= */

.slider-wrap{
  position:relative;

  display:flex;
  align-items:center;

  gap:10px;

  margin-bottom:6px;
}

.slider-left{
  min-width:42px;

  font-size:12px;
  opacity:.8;
}

.slider-year{
  margin-top:6px;

  text-align:center;

  font-size:13px;
  font-weight:600;
}

/* =========================================================
   TIMELINE BUTTONS
========================================================= */

.timeline{
  display:flex;
  flex-wrap:nowrap;
overflow-x:auto;
  gap:6px;

  margin-top:10px;

  overflow-x:auto;


}

.timeline button{
  padding:7px 10px;

  font-size:12px;

  border-radius:999px;
}

.timeline button.active{
  color:white;

  transform:scale(1.05);

  background:
    linear-gradient(
      135deg,
      #ff7a00,
      #ff5500
    );
}

#timelineModeBtn{
  min-width:42px;

  font-size:16px;
}

#timelineToggleBtn{
  display:none !important;

  flex:0 0 auto;

  position:sticky;
  left:0;

  z-index:2;

  background:#2b2b2b;
  color:white;
}

/* =========================================================
   SEARCH
========================================================= */

.search-wrap{
  display:flex;
  gap:6px;

  margin-top:10px;

  max-width:100%;
}

.search-box{
  position:relative;

  flex:1;
  min-width:0;
}

.search-box input,
#search{
  width:100%;
  max-width:100%;

  padding:10px;

  border:
    1px solid #ddd;

  border-radius:10px;

  font-size:16px;

  outline:none;

  box-sizing:border-box;
}

.search-box input{
  padding:10px 32px 10px 10px;
}

.search-clear{
  position:absolute;

  top:50%;
  right:8px;

  transform:translateY(-50%);

  width:18px;
  height:18px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:#eee;

  color:#888;

  font-size:12px;

  cursor:pointer;

  opacity:0;

  transition:opacity .2s ease;
}

.search-box input:not(:placeholder-shown) + .search-clear{
  opacity:1;
}

.search-clear:hover{
  background:#ddd;
  color:#444;
}

/* suggestions */

#suggestions{
  max-height:120px;

  margin-top:6px;

  overflow:auto;

  background:#fff;

  border-radius:10px;

  font-size:12px;

  box-shadow:
    0 8px 18px rgba(0,0,0,.1);
}

#suggestions div{
  padding:6px;

  cursor:pointer;
}

#suggestions div:hover{
  background:#ff7a00;
  color:white;
}

/* =========================================================
   KPI
========================================================= */

.kpis{
  position:relative;

  display:flex;
  flex-direction:column;

  gap:10px;

  margin-top:10px;
}

#kpiRow1{
  margin:
    10px 0 4px;
}

#kpiRow2{
  margin:
    8px 0 6px;
}

.kpi-row{
  display:flex;

  gap:10px;

  width:100%;

  overflow-x:auto;
  overflow-y:hidden;

  flex-wrap:nowrap;

  scroll-snap-type:x mandatory;


touch-action:pan-x;
  padding-bottom:4px;
}

.kpi-row::-webkit-scrollbar{
  display:none;
}

.card{
  flex:none;

  min-width:132px;
  max-width:138px;

  padding:8px 9px;

  

  text-align:left;

  scroll-snap-align:start;

  border-radius:18px;

background:var(--surface);

border:1px solid var(--border);

box-shadow:var(--shadow);

backdrop-filter:blur(14px);

  transition:transform .2s ease;
}

.card:hover{
transform:
  translateY(-4px)
  scale(1.02);
}

.kpis .kpi-row:first-child .card{
  min-width:90px;
  max-width:96px;
}

.kpis .kpi-row:last-child .card{
  min-width:42%;
  max-width:42%;

  padding:6px 8px;
}

.kpis .kpi-row:last-child .card h3{
  margin-bottom:2px;

  font-size:14px;
}

.kpis .kpi-row:last-child .kpi-list{
  font-size:10px;
  line-height:1.25;
}

.kpis .kpi-row:last-child .card:nth-last-child(-n+3) h3{
  font-size:15px;
}

.kpis .kpi-row:last-child .card:nth-last-child(-n+3) .kpi-list{
  font-size:11px;
  line-height:1.35;
}

.card h3,
.kpi-list{
  text-align:left;
}

.kpi-list{
  display:block;

  font-size:11px;
  line-height:1.4;
}

.kpi-item{
  cursor:pointer;

  padding:2px 0;

  border-radius:6px;
}

.kpi-item:hover{
  background:rgba(255,122,0,.15);

  transform:translateX(2px);
}

/* =========================================================
   TABLES
========================================================= */

#table{
  display:table-row-group;

  transition:opacity .2s ease;
}

table{
  width:calc(100% - 4px);

  margin:
    10px 4px 20px 0;

  border-collapse:separate;
  border-spacing:0;

  table-layout:fixed;

  background:rgba(255,255,255,.85);

  border-radius:10px;

  font-size:11px;
}

table thead{
  position:sticky;
  top:55px;
  z-index:29;
  background:#f2eadc;
  box-shadow:
    0 2px 0 rgba(0,0,0,.06);
}

table thead th{
  position:sticky;
  top:55px;
  z-index:30;
  height:38px;
  padding-bottom:10px;
  text-align:left;
  background:#f2eadc;
}

@media (orientation:portrait){

  #view-tables table thead,
  #view-tables table thead th{
    top:102px;
  }

}


@media (orientation:landscape){

  table thead,
  table thead th{
    top:46px;
  }

}

/* Empêche tbody de passer au-dessus du thead */
table tbody tr{
  position:relative;
  z-index:1;
}

table tbody tr.year-row{
  z-index:2;
}


table tbody{
 /* transform:translateY(-10px);*/
transform:none;
}

td,
th{
  padding:6px 5px;

  border:none;

  vertical-align:top;
}

td{
  overflow:hidden;

  text-overflow:ellipsis;
}

th:last-child{
  width:24px;

  text-align:left;
}

td:last-child{
  width:24px;

  text-align:center;
}

tbody tr:nth-child(even),
.trip-row:nth-child(even){
  background:rgba(0,0,0,.03);
}

tbody tr:hover,
.trip-row:hover{
  background:rgba(255,122,0,.08);
}

.year-row td{
  background:#f2eadc;

  font-weight:600;

  text-align:center;
}

/* =========================================================
   WISHLIST TABLE
========================================================= */

#wishlistTable{
  width:calc(100% - 4px);

  margin-right:4px;

  border-collapse:collapse;

  table-layout:fixed;

  overflow:hidden;

  background:rgba(255,255,255,.85);

  border-radius:10px;
}

#wishlistTable th,
#wishlistTable td{
  padding:6px 5px;

  border:none;

  vertical-align:top;

  overflow:hidden;

  text-overflow:ellipsis;
}

#wishlistTable td{
  white-space:nowrap;
}

#wishlistTable th{
  text-align:left !important;
}

#wishlistTable thead tr{
  background:#f2eadc;

  font-weight:600;
}

#wishlistTable tbody tr:nth-child(even){
  background:rgba(0,0,0,.03);
}

#wishlistTable tbody tr:hover{
  background:rgba(255,122,0,.08);
}

#wishlistTable th:nth-child(1),
#wishlistTable td:nth-child(1){
  width:45%;
}

#wishlistTable th:nth-child(2),
#wishlistTable td:nth-child(2){
  width:55%;
}

#wishlistTable input{
  width:100%;
  min-width:0;

  border:none;

  outline:none;

  background:transparent;

  font-size:11px;

  box-sizing:border-box;
}

/* =========================================================
   TOP ACTIONS
========================================================= */

.top-actions{
  display:flex;
  flex-wrap:wrap;

  gap:8px;

  margin-bottom:10px;
}

.top-actions button{
  flex:1;

  padding:8px;

  font-size:12px;
}

/* =========================================================
   LEAFLET
========================================================= */

.leaflet-top.leaflet-left{

  top:
    calc(
      14px + env(safe-area-inset-top)
    );

  left:
    calc(
      68px + env(safe-area-inset-left)
    );

  bottom:auto;
}

.leaflet-popup-content{
  margin:10px !important;
}

.flight-path{
  filter:
    drop-shadow(0 0 4px rgba(255,122,0,.9))
    drop-shadow(0 0 6px rgba(255,122,0,.45));
}

/* =========================================================
   POPUP APP
========================================================= */

.popup-app{
  max-height:340px;

  display:flex;
  flex-direction:column;

  overflow-y:auto;

  padding-right:4px;
}

.popup-layout{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.popup-photo{
  flex:0 0 110px;
  width:110px;
  height:150px;

  object-fit:cover;

  border-radius:12px;

  box-shadow:
    0 4px 12px rgba(0,0,0,.18);
}

.popup-photo-credit{
  font-size:9px;
  opacity:.5;
  margin-top:3px;
  text-align:center;
  width:110px;
}

.popup-photo-credit a{
  color:inherit;
  text-decoration:none;
}

.popup-photo-wrap{
  flex:0 0 110px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.popup-content{
  flex:1;
  min-width:0;
}


.popup-app::-webkit-scrollbar{
  width:4px;
}

.popup-app::-webkit-scrollbar-thumb{
  background:#ccc;

  border-radius:4px;
}

.popup-header{
  position:sticky;
  top:0;

  z-index:10;

  display:flex;
  justify-content:space-between;
  align-items:center;

  gap:6px;

  margin-bottom:10px;

  padding-bottom:6px;

  background:white;
}

.popup-body{
  max-height:240px;

  overflow-y:auto;

  padding-right:4px;

  -webkit-overflow-scrolling:touch;
}

.popup-body::-webkit-scrollbar{
  width:3px;
}

.popup-body::-webkit-scrollbar-thumb{
  background:#bbb;
}

.popup-title{
  display:flex;
  align-items:center;

  gap:4px;

  font-size:15px;
  font-weight:600;
}

.popup-star{
  cursor:pointer;

  font-size:18px;

  color:#bbb;
}

.popup-star.active{
  color:#28a745;
}

.popup-section{
  margin-bottom:12px;
}

.popup-section-title{
  margin-bottom:6px;

  font-weight:600;
}

.popup-meta{
  font-size:11px;

  color:#555;
}

.popup-flag-img{
  width:50px;

  margin-bottom:4px;

  border-radius:4px;
}

/* =========================================================
   TRIP CARD
========================================================= */

.trip-card{
  margin-bottom:6px;

  padding:8px;

  border-radius:10px;

  background:#f7f7f7;
}

.trip-main{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.trip-city{
  font-weight:600;
}

.trip-edit{
  cursor:pointer;

  font-size:11px;

  opacity:.4;
}

.trip-edit:hover{
  opacity:1;
}

.trip-occasion{
  cursor:pointer;

  font-size:11px;

  color:#777;
}

.trip-friends{
  font-size:11px;

  color:#555;
}

.trip-friends span{
  cursor:pointer;

  color:#ff7a00;
}

.trip-friends span:hover{
  text-decoration:underline;
}

/* souvenir */

.trip-memory{
  margin-top:6px;

  padding:6px 8px;

  border-radius:8px;

  background:#fff8e8;

  color:#444;

  font-size:11px;
  line-height:1.35;

  cursor:pointer;

  transition:all .25s ease;
}

.trip-memory.collapsed{
  position:relative;

  display:-webkit-box;

  overflow:hidden;

  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

.trip-memory.collapsed::after{
  content:"";

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  height:18px;

  background:
    linear-gradient(
      to bottom,
      rgba(255,248,232,0),
      rgba(255,248,232,1)
    );
}

.trip-memory.expanded{
  display:block;
}

/* =========================================================
   TABLE SPÉCIFIQUE
========================================================= */

.pays-amis-table th{
  text-align:left !important;
}

/* =========================================================
   TIMELINE PROGRESS
========================================================= */

.timeline-progress-wrap{
  position:relative;

  height:34px;

  margin:
    0 0 -10px;
}

#timelineProgress{
  position:relative;

  width:100%;
  height:100%;
}

.timeline-progress-line{
  position:absolute;

  top:11px;
  left:0;
  right:0;

  height:2px;

  background:rgba(0,0,0,.15);
}

.timeline-progress-dot{
  position:absolute;
  top:0;

  width:38px;
  height:20px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:999px;

  background:#ff7a00;

  color:white;

  font-size:10px;
  font-weight:600;

  z-index:2;

  box-shadow:
    0 0 0 4px rgba(255,122,0,.18);

  transition:left .35s ease;
}

/* =========================================================
   TIMELINE CHART
========================================================= */

.timeline-chart-card{
  margin-top:6px;

  padding:
    6px 2px 2px;

  border-radius:14px;

  background:rgba(255,255,255,.9);

  box-shadow:
    0 8px 18px rgba(0,0,0,.08);
}

.timeline-chart-header{
  margin-bottom:10px;
}

/* legend */

.legend-header{
  display:flex;
  flex-wrap:wrap;
  align-items:center;

  gap:10px;

  font-size:11px;

  opacity:.9;
}

.legend-item{
  display:flex;
  align-items:center;

  gap:5px;
}

.legend-color{
  width:10px;
  height:10px;

  display:inline-block;

  border-radius:50%;
}

/* chart */

.timeline-chart-wrapper{
  display:flex;
  align-items:flex-end;

  gap:8px;
}

#timelineYAxis{
  width:22px;
  height:108px;

  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:flex-end;

  padding-bottom:0;

  font-size:9px;

  color:rgba(0,0,0,.35);
}

.y-axis-label{
  position:relative;
}

.y-axis-label::after{
  content:"";

  position:absolute;

  top:50%;
  left:26px;

  width:6px;
  height:1px;

  background:rgba(0,0,0,.15);
}

#timelineChart{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:1px;

  height:118px;

  overflow-x:auto;
  overflow-y:hidden;

  scroll-snap-type:x mandatory;



  padding:
    0 0 0 12px;

  margin-top:0;
}

.timeline-bar-wrap{
  flex:none;

  min-width:10px;
  max-width:14px;

  display:flex;
  flex-direction:column;
  align-items:center;

  cursor:pointer;

  scroll-snap-align:center;

  transition:transform .2s ease;
}

.timeline-bar-wrap:hover{
  transform:translateY(-2px);
}

.timeline-bar{
  width:8px;

  min-height:3px;

  display:flex;
  flex-direction:column-reverse;

  overflow:hidden;

  border-radius:6px;

  background:#eee;
}

.timeline-segment{
  width:100%;

  transition:height .25s ease;
}

.timeline-year{
  margin-top:6px;

  font-size:10px;

  opacity:.7;

  white-space:nowrap;
}

.timeline-bar-wrap.active-year .timeline-bar{
  outline:2px solid #ff7a00;

  transform:scale(1.05);
}

.timeline-bar-wrap.active-year .timeline-year{
  color:#ff7a00;

  font-weight:700;
}

/* continents */

.seg-europe{ background:#4e79a7; }
.seg-asia{ background:#f28e2b; }
.seg-america{ background:#e15759; }
.seg-africa{ background:#59a14f; }
.seg-oceania{ background:#b07aa1; }

/* =========================================================
   STORY OVERLAY
========================================================= */

/* =========================================================
   STORY OVERLAY CENTER
========================================================= */

#storyYearOverlay.centered{

  top:50% !important;
  left:50% !important;

  bottom:auto !important;

  transform:
    translate(-50%,-50%)
    scale(.96);
}

#storyYearOverlay.centered.show{

  transform:
    translate(-50%,-50%)
    scale(1);
}

#storyYearOverlay{
  position:fixed;

  left:16px;
  bottom:16px;

  z-index:999999;

  width:180px;

  padding:10px 12px;

  border-radius:14px;

  background:rgba(255,255,255,.92);

  backdrop-filter:blur(10px);

  opacity:0;

  pointer-events:none;

  box-shadow:
    0 8px 24px rgba(0,0,0,.18);

  transform:
    translateY(10px)
    scale(.96);

  transition:
    opacity .28s ease,
    transform .28s ease;
}

#storyYearOverlay.show{
  opacity:1;

  transform:
    translateY(0)
    scale(1);
}

.story-btn.recording{
  background:#e53935 !important;
  color:white !important;
}

.story-year-title{
  margin-bottom:4px;

  font-size:18px;
  font-weight:700;
}

.story-year-sub{
  margin-bottom:8px;

  font-size:11px;

  opacity:.7;
}

.story-year-lines{
  font-size:11px;
  line-height:1.35;
}

.story-year-line{
  margin-bottom:3px;
}

/* =========================================================
   STORY CARDS
========================================================= */

#storyCardsCarousel{
  display:flex;

  gap:0;

  overflow-x:auto;

  padding:
    14px 18px 26px 6px;

  margin:
    8px 0;

  scroll-snap-type:x mandatory;

  -webkit-overflow-scrolling:touch;
}

#storyCardsCarousel::-webkit-scrollbar{
  display:none;
}

.story-card{
  position:relative;
will-change:
  transform,
  opacity;
  isolation:isolate;

  contain:layout paint;

  flex:none;

  width:190px;
  min-height:150px;

  margin-left:-42px;

  padding:14px;

  border-radius:18px;

  background:rgba(255,255,255,.92);

  backdrop-filter:blur(10px);

  scroll-snap-align:center;

  box-shadow:
    0 10px 28px rgba(0,0,0,.14);

  transition:
    transform .35s ease,
    opacity .35s ease;
}

.story-card:first-child{
  margin-left:0;

  min-width:190px;

  flex-shrink:0;
}

.story-card.active{
  z-index:30;

  transform:
    translateY(-16px)
    scale(1.06);

  box-shadow:
    0 18px 40px rgba(0,0,0,.22);
}

.story-card-year{
  position:relative;
  z-index:2;

  margin-bottom:8px;

  font-size:22px;
  font-weight:700;
}

.story-card-lines{
  font-size:11px;
  line-height:1.45;
}

.story-card-separator{
  margin:7px 0;

  border-top:
    1px solid rgba(0,0,0,.12);
}

.story-card-country{
  cursor:pointer;

  padding:2px 4px;

  border-radius:8px;

  transition:
    background .2s ease,
    transform .2s ease;
}

.story-card-country:hover{
  background:rgba(255,122,0,.12);

  transform:translateX(2px);
}

.story-card-header{
  display:flex;
  align-items:center;

  gap:10px;

  margin-bottom:10px;
}

.story-card-title{
  font-size:18px;
  font-weight:700;
}

/* =========================================================
   FLOATING BUTTONS
========================================================= */


/* =========================================================
   LANDSCAPE FLOATING RAIL
========================================================= */

#landscapeRail{
  display:none;
}

@media (orientation:landscape){

  #landscapeRail{

    position:fixed;

    top:
      calc(
        14px + env(safe-area-inset-top)
      );

    left:
      calc(
        14px + env(safe-area-inset-left)
      );

    z-index:99999;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:8px;
  }

  .rail-btn{

    width:42px;
    height:42px;

    margin:0;

    padding:0;

    border:none;
    border-radius:14px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:
      rgba(35,35,35,.92);

    color:white;

    font-size:18px;

    backdrop-filter:blur(14px);

    box-shadow:
      0 6px 18px rgba(0,0,0,.22);
  }

  .play-btn{

    background:
      linear-gradient(
        135deg,
        #ff7a00,
        #ff5500
      ) !important;
  }

 #railSearchWrap{

  position:relative;
 z-index:999999;
  display:flex;

  align-items:center;
}

#landscapeSearchBox{

  position:absolute;

  left:52px;

  top:0;

  width:0;

  overflow:visible;
 z-index:999999;
  opacity:0;

  pointer-events:none;

  transition:
    width .25s ease,
    opacity .25s ease;
}

  body.landscape-search-open
#landscapeSearchBox{

  width:260px;

  opacity:1;

  pointer-events:auto;
}

  #landscapeSearchBox .search-box{
    width:260px;
  }

  #landscapeSearchBox input{

    height:42px;

    background:
      rgba(255,255,255,.96);

    border:none;

    border-radius:14px;

    font-size:13px;
  }

#landscapeSuggestions{

  position:absolute;

  top:48px;

  left:0;

  width:260px;

  max-height:180px;

  overflow-y:auto;

  border-radius:14px;

  background:
    rgba(255,255,255,.96);

  backdrop-filter:blur(12px);

  box-shadow:
    0 10px 26px rgba(0,0,0,.18);

  display:none;

  z-index:999999;
}

#landscapeSuggestions div{

  padding:10px 12px;

  font-size:13px;

  cursor:pointer;
}

#landscapeSuggestions div:hover{

  background:
    rgba(255,122,0,.12);
}

}





/* =========================================================
   APP SHELL SPA
========================================================= */

#appShell{
  position:relative;
  width:100%;
  height:100vh;
  overflow:hidden;
}

/* =========================================================
   VIEWS CONTAINER
========================================================= */

#views{
  position:absolute;
  inset:0;
  z-index:20;
  /*pointer-events:none;*/

}



/* =========================================================
   SETTINGS FULLSCREEN
========================================================= */

#view-settings{
  background:transparent;

  z-index:20;
}



/* =========================================================
   PAGE
========================================================= */

#view-map{
  pointer-events:none;
}



@media (orientation:landscape){
  
  
  
  #view-map{
    pointer-events:none !important;
  }
  #map{
    pointer-events:auto !important;
  }
}


.view{
  position:absolute;
  inset:0;

  overflow:visible;

  opacity:0;
  transform:translateX(18px);

  transition:
  opacity .42s cubic-bezier(.22,1,.36,1),
  transform .42s cubic-bezier(.22,1,.36,1);
min-height:0;
  pointer-events:none;
}

/* =========================================================
   ACTIVE PAGE
========================================================= */

.view.active{
  opacity:1;
  transform:translateX(0);

  pointer-events:auto;
}

.view.active .page-surface{

  pointer-events:auto;

  overflow-y:auto;
  overflow-x:hidden;

  -webkit-overflow-scrolling:touch;

  overscroll-behavior-y:contain;
}

/* =========================================================
   PAGE SURFACE
========================================================= */


.page-surface{
  transform:translateZ(0);

will-change:
  transform,
  opacity;
  touch-action:pan-y;
  
  position:absolute;
min-height:0;
  left:0;
  right:0;
  top:0;
  bottom:0;

  overflow:auto;

  padding:
    14px 14px
    calc(18px + env(safe-area-inset-bottom));

  background:
    rgba(255,255,255,.92);

  backdrop-filter:blur(16px);

  border-top-left-radius:22px;
  border-top-right-radius:22px;

  box-shadow:
    0 -10px 30px rgba(0,0,0,.18);
}

/* =========================================================
   MAP VIEW
========================================================= */

#view-map .page-surface{
  display:block;
  /* top:34%; */
}

/* =========================================================
   FULL VIEWS
========================================================= */

#view-stats,
#view-tables,
#view-settings{
  overflow:visible;
}

#view-stats .page-surface,
#view-tables .page-surface{
  top:0 !important;
  bottom:0 !important;

  height:auto !important;
  max-height:none !important;

  padding-bottom:
    calc(18px + env(safe-area-inset-bottom));
}

/* =========================================================
   IPHONE FLOATING NAV
========================================================= */

#bottomNav{
  border:
  1px solid rgba(255,255,255,.12);

box-shadow:
  0 12px 40px rgba(0,0,0,.22);
  position:fixed;
pointer-events:auto;
  left:12px;
  right:12px;

  bottom:
    calc(
      4px + env(safe-area-inset-bottom)
    );

  height:52px;

display:flex;
align-items:center;
justify-content:flex-start;

gap:6px;

  padding:4px 8px;

  border-radius:18px;

  background:
    rgba(35,35,35,.92);

  backdrop-filter:blur(18px);

  z-index:99999;

  box-shadow:
    0 10px 30px rgba(0,0,0,.25);
}

/* =========================================================
   NAV BUTTON
========================================================= */

.nav-btn{
  flex:1;

  height:100%;

  border:none;
  background:transparent;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  gap:4px;

  color:rgba(255,255,255,.7);

  font-size:11px;

  border-radius:18px;

  transition:all .22s ease;
}

.pdf-btn{

  background:#1976d2;
  color:white;

}

.nav-btn span{
display:none;
}

/* =========================================================
   ACTIVE NAV
========================================================= */

.nav-btn.active{
  background:
    linear-gradient(
      135deg,
      #ff7a00,
      #ff5500
    );

  color:white;

  /*transform:translateY(-8px);*/
}

/* =========================================================
   NAV COLLAPSED
========================================================= */



/* cache labels */

body.nav-collapsed .nav-btn span{
  display:none;
}

/* boutons compacts */

body.nav-collapsed .nav-btn{

  flex:none;

  width:48px;
  min-width:48px;

  padding:0;

  border-radius:16px;
}

/* bouton actif */

body.nav-collapsed .nav-btn.active{

  transform:none;
}

/* =========================================
   PORTRAIT : NAV COLLAPSÉE
========================================= */

@media (orientation:portrait){

  .leaflet-control-zoom{
    display:none !important;
  }

  /* cache tous les boutons sauf ☰ */
  body.nav-collapsed .nav-btn:not(#navCollapseBtn){
    display:none;
  }

  /* navbar compacte reste à gauche */
  body.nav-collapsed #bottomNav{

    left:12px !important;
    right:auto !important;

    width:64px !important;
    min-width:64px !important;

    justify-content:center !important;

    padding:6px !important;
  }

  /* hamburger fixe */
  body.nav-collapsed #navCollapseBtn{

    width:48px !important;
    height:48px !important;

    min-width:48px !important;
    min-height:48px !important;

    margin:0 !important;
    padding:0 !important;

    flex:none !important;

    transform:none !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

}

/* sécurité bouton ☰ */

#navCollapseBtn.active{

  background:transparent !important;

  transform:none !important;
}

/* =========================================================
   PAGE TITLE
========================================================= */

.page-title{
margin:

    34px 0 22px;

  font-size:22px;
  font-weight:700;
}

#view-map .page-title{
  margin:-4px 0 10px;
}

/* =========================================================
   PAGE BLOCK
========================================================= */

.page-block{
  margin-bottom:18px;
}
   
/* =========================================================
   MOBILE
========================================================= */

@media (max-width:430px){

  .export-box,
  .kpi-box,
  .wishlist-box,
  .timeline-table-wrapper{
    width:96%;

    margin-inline:auto;
  }

  table{
    width:100%;

    font-size:.92rem;
  }

  th,
  td{
    padding:8px 6px;
  }
}

/* =========================================================
   PORTRAIT
========================================================= */

@media (orientation:portrait){

  /* =========================================
     PORTRAIT :
     aucun zoom visible
  ========================================= */

  .leaflet-control-zoom{
    display:none !important;
  }

#resetViewBtn{
  display:none !important;
}

  /* =====================================================
     GLOBAL PORTRAIT
  ===================================================== */

  #views{
    position:fixed;
    inset:0;
    z-index:20;
    pointer-events:none;
  }

  .view{
    position:absolute;
    inset:0;
    transform:none !important;
  }

  .view.active{
    pointer-events:auto;
  }

 #map{

  position:fixed !important;

  top:0 !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;

  width:100vw !important;
  height:100vh !important;

  z-index:1 !important;
}



#view-map .page-surface,
#view-settings .page-surface{

  z-index:20;

  background:rgba(255,255,255,.94);
}



 .page-surface{
  padding-top:
    calc(10px + env(safe-area-inset-top));
}

  /* =====================================================
     MAP + SETTINGS
     33% map / 67% panel
  ===================================================== */

 #view-map{
  background:transparent !important;
}

#view-map .page-surface{

  position:absolute;

  left:0;
  right:0;
  bottom:0;

top:42vh !important;

  height:auto !important;

  overflow:auto;

  background:rgba(255,255,255,.94);

  border-top-left-radius:22px;
  border-top-right-radius:22px;
  
  padding-top:12px !important;

}

  /* =====================================================
     STATS + TABLES
     FULLSCREEN
  ===================================================== */

   #view-stats .page-surface,
  #view-tables .page-surface{

    position:absolute;

    inset:0 !important;

    height:100vh !important;

    overflow:auto;
    overflow-y:auto;
    overflow-x:hidden;

    -webkit-overflow-scrolling:touch;

    touch-action:pan-y;

    border-radius:0 !important;

    background:rgba(255,255,255,.94);

    padding-top:
      calc(
        14px + env(safe-area-inset-top)
      ) !important;

    -webkit-overflow-scrolling:touch;
overflow-y:auto;
overflow-x:hidden;
  }
  
#view-settings .page-surface{

  position:absolute;

  inset:0 !important;

  height:100vh !important;

  overflow:auto;

  border-radius:0 !important;

  background:rgba(255,255,255,.94);
}
  /* =====================================================
     PANEL
  ===================================================== */

  #panel{
    position:fixed;

    top:34%;
    left:0;
    right:0;

    width:100%;

    transform:translateY(100%);

    border-top-left-radius:20px;
    border-top-right-radius:20px;

    box-shadow:
      0 -10px 30px rgba(0,0,0,.2);
  }

  #panel.open{
    transform:translateY(0);
  }

  /* =====================================================
     OVERLAY
  ===================================================== */

  #storyYearOverlay{
    left:16px;

    bottom:calc(67vh + 12px);
  }

  /* =====================================================
     STATS GRID
  ===================================================== */

  #view-stats #kpiRow1 .kpi-row{
    display:grid;

    grid-template-columns:
      repeat(5,1fr);

    overflow:visible;
  }

  #view-stats #kpiRow1 .card{
    min-width:auto;
    max-width:none;
  }

  #view-stats #kpiRow2 .kpi-row{
    display:grid;

    grid-template-columns:
      repeat(2,1fr);

    gap:10px;

    overflow:visible;
  }

  #view-stats #kpiRow2 .card{
    min-width:auto;
    max-width:none;
  }

#view-stats .page-surface{

  display:block;

  min-height:100%;

}

/* ===== STICKY PORTRAIT TABLES ===== */
#view-stats .page-title,
#view-tables .page-title{
  position:sticky;
  top:0;
  z-index:25;
  background:#fff;
  margin-top:0;
  padding:10px 0 8px;
}

#view-tables .search-wrap{
  position:sticky;
  top:45px;
  z-index:24;
  background:#fff;
  padding-bottom:6px;
}

#view-tables .search-wrap + #suggestions{
  position:sticky;
  top:97px;
  z-index:23;
  background:#fff;
}


/* ===== SAFE AREA COVER ===== */
#view-tables .page-surface::before,
#view-stats .page-surface::before{
  content:"";
  position:sticky;
  top:0;
  display:block;
  height:0;
  box-shadow:
    0 calc(-1 * env(safe-area-inset-top)) 0
    calc(env(safe-area-inset-top))
    #fff;
  z-index:26;
}



#view-stats .page-surface::after{

  content:"";

  display:block;

  height:140px;

}


/* bouton hamburger portrait NORMAL */
body.nav-collapsed #navCollapseBtn{

  width:48px !important;
  height:48px !important;

  min-width:48px !important;
  min-height:48px !important;

  border-radius:16px !important;

  margin:0 !important;

  transform:none !important;
}




}




/* =========================================================
   /* =========================================================
   LANDSCAPE
========================================================= */

/* =========================================================
   LANDSCAPE LEFT COLUMN
========================================================= */

@media (orientation:landscape){

  :root{
    --left-column:
      calc(
        14px + env(safe-area-inset-left)
      );
  }

  /* =========================================
     FLOATING RAIL
  ========================================= */

  #landscapeRail{

    position:fixed;

    left:var(--left-column);

    top:
      calc(
        14px + env(safe-area-inset-top)
      );

    z-index:99999;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:8px;
  }

  .rail-btn{

    width:42px;
    height:42px;

    margin:0;
    padding:0;

    border:none;
    border-radius:14px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:
      rgba(35,35,35,.92);

    color:white;

    font-size:18px;

    backdrop-filter:blur(14px);

    box-shadow:
      0 6px 18px rgba(0,0,0,.22);
  }

  /* =========================================
     SEARCH OVERLAY
  ========================================= */

  #landscapeSearchBox{

    position:absolute;

    left:52px;

    top:0;

    width:0;

    opacity:0;

    pointer-events:none;

    transition:
      width .25s ease,
      opacity .25s ease;
  }

  body.landscape-search-open
  #landscapeSearchBox{

    width:260px;

    opacity:1;

    pointer-events:auto;
  }

 #landscapeSearchBox input{

    height:42px;

    background:
      rgba(255,255,255,.96);

    border:none;

    border-radius:14px;

    font-size:16px !important;

    -webkit-text-size-adjust:100%;
}

  /* =========================================
     LEAFLET ZOOM
     sous la rail
  ========================================= */

 .leaflet-top.leaflet-left{

  left:var(--left-column) !important;

  top:
    calc(
      214px + env(safe-area-inset-top)
    ) !important;
}

  .leaflet-control-zoom{

    margin:0 !important;

    border:none !important;

    box-shadow:none !important;
  }

  .leaflet-control-zoom a{

    width:42px !important;
    height:42px !important;

    line-height:42px !important;

    border:none !important;

    border-radius:14px !important;

    background:
      rgba(35,35,35,.92) !important;

    color:white !important;

    font-size:20px !important;

    box-shadow:
      0 6px 18px rgba(0,0,0,.22);
  }

  .leaflet-control-zoom a:first-child{
  margin-bottom:2px !important;
}

  /* =========================================
     NAVBAR EN BAS
  ========================================= */

  #bottomNav{

    position:fixed;

    left:var(--left-column);

    bottom:
      calc(
        14px + env(safe-area-inset-bottom)
      );

    right:auto;
    top:auto;

    width:auto;
    height:auto;

    display:flex;

    align-items:center;

    justify-content:flex-start;

    gap:6px;

    padding:6px 8px;

    border-radius:20px;

    z-index:99999;
  }

body.nav-collapsed #bottomNav{

  position:fixed;

  left:var(--left-column) !important;

  bottom:
    calc(
      14px + env(safe-area-inset-bottom)
    ) !important;

  width:42px !important;
  height:42px !important;

  min-width:42px !important;
  min-height:42px !important;

  padding:0 !important;

  margin:0 !important;

  overflow:hidden !important;

  display:flex !important;

  align-items:center !important;
  justify-content:center !important;

  border-radius:14px !important;

  background:
    rgba(35,35,35,.92) !important;
}



  /* =========================================
     NAV COMPACTE
  ========================================= */

  body.nav-collapsed .nav-btn:not(#navCollapseBtn){
    display:none;
  }

  body.nav-collapsed .nav-btn{

  width:42px !important;
  height:42px !important;

  min-width:42px !important;
  min-height:42px !important;

  margin:0 !important;
  padding:0 !important;

  flex:none !important;

  border-radius:14px !important;

  transform:none !important;
  transition:none !important;
}

  body.nav-collapsed #navCollapseBtn{

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    font-size:18px !important;
  }

}

@media (orientation:landscape){
  
  #views{

    pointer-events:none;

  }

  .view{

    background:transparent !important;

    pointer-events:none !important;

  }

  .view:not(.active){

    visibility:hidden;

  }

  .view.active{

    pointer-events:none !important;

  }

  #view-map{

    pointer-events:none !important;

  }

  #map{

    width:100%;

    height:100%;

    pointer-events:auto !important;

    touch-action:none !important;

    z-index:1 !important;

  }

  .page-surface{

    position:absolute;

    top:0;

    right:0;

    bottom:0;

    left:auto;

    width:420px;

    max-width:42vw;

    border-radius:0;

    border-top-left-radius:24px;

    overflow-y:auto;

    overflow-x:hidden;

    -webkit-overflow-scrolling:touch;

    pointer-events:auto !important;

    touch-action:pan-y !important;

    z-index:30;

  }
  
  body.landscape-panel-hidden .page-surface{

  transform:translateX(105%);

  pointer-events:none;

  transition:transform .32s ease;
}

  

  #views{
    inset:0;
  }

  .view{
    inset:0;
  }

  .page-surface{

    position:absolute;

    top:0;
    right:0;
    bottom:0;

    left:auto;

    width:420px;
    max-width:42vw;

    border-radius:0;
    border-top-left-radius:24px;

    overflow-y:auto;
    overflow-x:hidden;

    -webkit-overflow-scrolling:touch;



    pointer-events:auto;

    z-index:30;
  }

  #view-map .page-surface{
    top:0;
  }

  

#view-stats .page-surface,
#view-tables .page-surface,
#view-settings .page-surface{

  overscroll-behavior-y:contain;

}

/* ===== TITRES STICKY PAYSAGE ===== */
.page-title{

  position:sticky;

  top:0;

  z-index:25;

  background:rgba(255,255,255,.96);

  backdrop-filter:blur(12px);

  margin-top:0;

  padding:10px 0 8px;

}




} /* ← ACCOLADE FINALE DU MEDIA QUERY */



/* =========================================================
   PRINT
========================================================= */

@media print{

  body *{
    visibility:hidden;
  }

  #map{
    visibility:visible;

    position:absolute;
    inset:0;

    width:100%;
    height:100%;
  }

  #panel{
    display:none !important;
  }
}


#shareBox{
  display:none;
  position:fixed;
  top:20%;
  left:50%;
  transform:translateX(-50%);
  background:white;
  padding:16px;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
  z-index:9999;
  width:260px;
}