/* Book : un globe de nuit en page d'accueil, puis une galerie claire qui remonte par-dessus comme une feuille. */
/* Polices hébergées sur le site (pas de Google Fonts, donc rien n'est envoyé à Google) */
@font-face{ font-family:'DM Mono'; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/dm-mono-400-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF }
@font-face{ font-family:'DM Mono'; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/dm-mono-400-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face{ font-family:'DM Mono'; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/dm-mono-500-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF }
@font-face{ font-family:'DM Mono'; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/dm-mono-500-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face{ font-family:'Schibsted Grotesk'; font-style:normal; font-weight:400 800; font-display:swap; src:url(../fonts/schibsted-grotesk-400-800-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF }
@font-face{ font-family:'Schibsted Grotesk'; font-style:normal; font-weight:400 800; font-display:swap; src:url(../fonts/schibsted-grotesk-400-800-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face{ font-family:'Unbounded'; font-style:normal; font-weight:400 700; font-display:swap; src:url(../fonts/unbounded-400-700-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF }
@font-face{ font-family:'Unbounded'; font-style:normal; font-weight:400 700; font-display:swap; src:url(../fonts/unbounded-400-700-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }

:root{
  /* nuit (accueil, globe, photo en grand) */
  --space:#060912; --deep:#0f1a33; --ink-n:#e9edf5; --mute-n:#8c97ab; --line-n:#1f2a42; --pin:#ffbd59;
  /* jour (galerie, à propos) */
  --bg:#eceef1; --ink:#101216; --mute:#5e6470; --line:#cdd1d8; --acc:#1c3bff; --card:#ffffff;
  --f-wide:"Unbounded","Arial Black",sans-serif;
  --f-text:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --f-mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --gut:clamp(16px,4vw,48px);
  --nav-h:64px;
  color-scheme:light;
}
*,*::before,*::after{ box-sizing:border-box }
[hidden]{ display:none!important }
html{ scroll-behavior:smooth; scroll-padding-top:var(--nav-h) }
body{ margin:0; background:var(--space); color:var(--ink); font:400 16px/1.55 var(--f-text); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility }
img{ display:block; max-width:100% }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer }
a{ color:inherit }
:focus-visible{ outline:2px solid var(--pin); outline-offset:3px }
.gut{ padding-left:max(var(--gut), env(safe-area-inset-left,0px)); padding-right:max(var(--gut), env(safe-area-inset-right,0px)) }
.in{ max-width:1320px; margin:0 auto }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

/* mode brouillon (?brouillon dans l'adresse) : textes provisoires encadrés */
.brouillon [data-demo]{ outline:2px dashed #e0a800; outline-offset:4px }

/* ---------- barre de navigation ---------- */
.nav{ position:fixed; z-index:50; inset:0 0 auto; padding-top:env(safe-area-inset-top,0px); color:var(--ink-n); transition:background .35s, color .35s, box-shadow .35s }
.nav-in{ height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; gap:16px }
.nav-logo{ font:700 13px/1 var(--f-wide); letter-spacing:.24em; text-transform:uppercase; text-decoration:none }
.nav nav{ display:flex; gap:clamp(14px,3vw,32px); font-size:14px }
.nav nav a{ text-decoration:none; opacity:.75; transition:opacity .2s }
.nav nav a:hover,.nav nav a[aria-current="true"]{ opacity:1 }
.nav.jour{ background:rgba(236,238,241,.94); color:var(--ink); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); box-shadow:0 1px 0 var(--line) }

/* ---------- accueil : le globe ---------- */
.hero{ position:relative; color:var(--ink-n); overflow:hidden; padding-block:calc(var(--nav-h) + env(safe-area-inset-top,0px) + 8px) 72px;
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.55), transparent),
    radial-gradient(1px 1px at 78% 12%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 34% 82%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 91% 66%, rgba(255,255,255,.45), transparent),
    radial-gradient(1px 1px at 56% 40%, rgba(255,255,255,.3), transparent),
    radial-gradient(1200px 760px at 68% 42%, var(--deep) 0%, var(--space) 62%);
  background-size:320px 320px,280px 280px,360px 360px,300px 300px,240px 240px,100% 100%; background-color:var(--space) }
.hero-in{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(20px,4vw,56px); align-items:center; min-height:min(calc(100svh - var(--nav-h) - 80px), 900px) }
.hero-text{ display:grid; gap:22px; align-content:center; min-width:0 }
.kicker{ margin:0; font:400 12px/1.4 var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--mute-n) }
.hero h1{ margin:0; font:700 clamp(72px,9vw,150px)/.9 var(--f-wide); letter-spacing:-.05em; white-space:nowrap }
.hero h1 .l{ display:inline-block; animation:monte 1s cubic-bezier(.2,.75,.2,1) both; animation-delay:calc(var(--i) * 45ms + 150ms) }
@keyframes monte{ from{ transform:translateY(40%); opacity:0 } to{ transform:none; opacity:1 } }
.hero-sub{ margin:0; max-width:40ch; font-size:17px; color:var(--ink-n); opacity:.86; text-wrap:pretty }
.stats{ display:flex; flex-wrap:wrap; gap:14px 30px; margin:0 }
.stats div{ display:grid; gap:6px }
.stats dd{ margin:0; font:600 clamp(28px,3vw,38px)/1 var(--f-wide); color:var(--pin); font-variant-numeric:tabular-nums; letter-spacing:-.02em }
.stats dt{ order:2; font:400 11px/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--mute-n) }
.hero-actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center }
.btn{ display:inline-flex; align-items:center; gap:10px; padding:13px 20px; border-radius:99px; font:500 15px/1 var(--f-text); text-decoration:none; transition:transform .2s, background .2s, border-color .2s }
.btn:hover{ transform:translateY(-1px) }
.btn-plein{ background:var(--pin); color:#1a1306 }
.btn-plein svg{ width:14px; height:14px }
.btn-ligne{ border:1px solid var(--line-n); color:var(--ink-n) }
.btn-ligne:hover{ border-color:var(--mute-n) }

.globe-wrap{ position:relative; width:min(100%,780px); aspect-ratio:1; justify-self:center }
.globe-wrap canvas{ position:absolute; inset:0; width:100%; height:100%; touch-action:pan-y; cursor:grab }
.globe-wrap canvas:active{ cursor:grabbing }
.globe-hint{ position:absolute; left:0; top:1%; margin:0; font:400 11px/1.4 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--mute-n); pointer-events:none }
.card{ position:absolute; right:0; bottom:1%; width:min(320px,64%); background:rgba(9,13,24,.8); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid var(--line-n); border-radius:14px; padding:10px; display:grid; gap:10px; box-shadow:0 24px 60px -24px rgba(0,0,0,.85) }
.card .ph{ position:relative; display:block; width:100%; aspect-ratio:3/2; border-radius:8px; overflow:hidden; background:#000; cursor:zoom-in }
.card .ph img{ width:100%; height:100%; object-fit:cover; animation:apparait .6s ease both }
@keyframes apparait{ from{ opacity:0; transform:scale(1.04) } to{ opacity:1; transform:none } }
.card .tx{ display:grid; gap:4px; padding:0 4px }
.card .tx b{ font:600 16px/1.2 var(--f-wide); letter-spacing:-.01em }
.card .tx span{ font:400 11.5px/1.5 var(--f-mono); color:var(--mute-n); letter-spacing:.03em }
.card .tx .reg{ color:var(--ink-n); opacity:.85 }
.card .th{ display:flex; flex-wrap:wrap; gap:6px; padding:0 2px 2px }
.card .th button{ width:46px; height:32px; border-radius:5px; overflow:hidden; opacity:.55; outline:1px solid transparent; transition:opacity .2s }
.card .th button:hover{ opacity:.85 }
.card .th button.on{ opacity:1; outline-color:var(--pin) }
.card .th img{ width:100%; height:100%; object-fit:cover }

.dest{ margin-top:clamp(10px,2vw,24px) }
.dest-in{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding-bottom:4px; mask-image:linear-gradient(to right, #000 92%, transparent) }
.dest-in::-webkit-scrollbar{ display:none }
.chip-n{ flex:none; padding:8px 13px; border-radius:99px; border:1px solid var(--line-n); font-size:13.5px; line-height:1; color:var(--ink-n); white-space:nowrap; transition:background .2s, border-color .2s, color .2s }
.chip-n small{ margin-left:5px; color:var(--mute-n); font-size:11px }
.chip-n:hover{ border-color:var(--mute-n) }
.chip-n.on{ background:var(--pin); border-color:var(--pin); color:#1a1306 }
.chip-n.on small{ color:#4d3a12 }

/* ---------- la galerie, une feuille claire qui recouvre le globe ---------- */
.sheet{ position:relative; z-index:2; margin-top:-36px; background:var(--bg); color:var(--ink); border-radius:28px 28px 0 0; padding-block:clamp(40px,7vw,96px) clamp(40px,6vw,80px) }
.g-hero{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,320px); gap:24px; align-items:end; padding-bottom:clamp(20px,3vw,36px) }
.g-hero h2{ margin:0; font-weight:800; font-size:clamp(52px,11vw,170px); line-height:.86; letter-spacing:-.055em }
.g-hero h2 em{ font-style:normal; color:var(--acc) }
.g-hero p{ margin:0 0 .8em; color:var(--mute); max-width:34ch }
.g-tools{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 20px; align-items:center; padding-bottom:24px }
.chips{ display:flex; flex-wrap:wrap; gap:6px }
.chip{ padding:9px 14px; border-radius:99px; border:1px solid var(--line); font-size:14px; font-weight:500; line-height:1.1; transition:background .2s, color .2s, border-color .2s }
.chip sup{ font-size:10px; margin-left:3px; color:var(--mute) }
.chip:hover{ border-color:var(--ink) }
.chip.on{ background:var(--ink); border-color:var(--ink); color:var(--bg) }
.chip.on sup{ color:inherit; opacity:.7 }
.seg{ display:flex; border:1px solid var(--line); border-radius:99px; padding:3px }
.seg button{ display:flex; align-items:center; gap:7px; height:30px; padding:0 12px; border-radius:99px; font:500 12px/1 var(--f-mono); color:var(--mute); letter-spacing:.04em }
.seg button svg{ width:14px; height:14px }
.seg button.on{ background:var(--card); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.12) }

.grid{ --cols:3; columns:var(--cols); column-gap:16px }
.grid[data-vue="grand"]{ --cols:2 }
.item{ break-inside:avoid; margin:0 0 22px; display:grid; gap:9px }
.item > button{ display:block; width:100%; overflow:hidden; background:var(--line); cursor:zoom-in }
.item img{ width:100%; height:auto; transition:transform .8s cubic-bezier(.2,.7,.2,1) }
.item > button:hover img{ transform:scale(1.035) }
.item figcaption{ display:grid; gap:3px }
.item .l1{ display:flex; justify-content:space-between; gap:10px; font-size:14px; line-height:1.3 }
.item .l1 b{ font-weight:600 }
.item .l1 i{ font:400 11px/1.3 var(--f-mono); font-style:normal; color:var(--mute); margin-right:8px }
.item .l1 span{ color:var(--mute); text-align:right }
.item .reg{ font:400 11.5px/1.45 var(--f-mono); color:var(--mute); letter-spacing:.02em }
.vide{ padding:40px 0; color:var(--mute) }

.pied{ background:var(--bg); color:var(--mute); font-size:13px; padding-block:24px calc(28px + env(safe-area-inset-bottom,0px)) }
.pied-in{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; border-top:1px solid var(--line); padding-top:20px }

/* ---------- photo en grand ---------- */
.lb{ position:fixed; inset:0; z-index:100; background:rgba(6,8,12,.985); color:#f1f2f4; display:grid; grid-template-rows:auto minmax(0,1fr) auto;
  padding:calc(env(safe-area-inset-top,0px) + 12px) max(16px, env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 16px) max(16px, env(safe-area-inset-left,0px)) }
.lb-top{ display:flex; justify-content:space-between; align-items:center; font:400 12px/1 var(--f-mono); letter-spacing:.1em; color:#9ba0a8 }
.lb-btn{ width:46px; height:46px; display:grid; place-items:center; border-radius:50%; color:#fff; border:1px solid rgba(255,255,255,.18); transition:background .2s }
.lb-btn:hover{ background:rgba(255,255,255,.1) }
.lb-btn svg{ width:18px; height:18px }
.lb-img{ position:relative; min-height:0; touch-action:pan-y }
.lb-img img{ position:absolute; inset:12px 0; margin:auto; width:auto; height:auto; max-width:100%; max-height:calc(100% - 24px); animation:apparait .45s ease both }
.lb-bot{ display:flex; justify-content:space-between; align-items:end; gap:16px 24px; flex-wrap:wrap }
.lb-info{ display:grid; gap:6px; min-width:0; max-width:760px }
.lb-info h3{ margin:0; font:700 clamp(20px,2.6vw,30px)/1.1 var(--f-wide); letter-spacing:-.03em }
.lb-info p{ margin:0; font:400 12px/1.6 var(--f-mono); color:#a2a7b0; letter-spacing:.03em }
.lb-info .reg{ color:#f1f2f4 }
.lb-info .txt{ font:400 15px/1.5 var(--f-text); color:#d9dce1; letter-spacing:0 }
.lb-actions{ display:flex; gap:8px; align-items:center }
.lb-globe{ display:inline-flex; align-items:center; gap:8px; height:46px; padding:0 16px; border-radius:99px; border:1px solid rgba(255,255,255,.18); font-size:14px }
.lb-globe:hover{ background:rgba(255,255,255,.1) }
.lb-globe svg{ width:16px; height:16px }

/* ---------- tablettes et téléphones ---------- */
@media (max-width:980px){
  .hero-in{ grid-template-columns:minmax(0,1fr); min-height:0 }
  .globe-wrap{ aspect-ratio:auto; display:grid; width:100% }
  .globe-wrap canvas{ position:relative; aspect-ratio:1; height:auto }
  .card{ position:relative; right:auto; bottom:auto; width:100%; margin-top:-6% }
  .g-hero{ grid-template-columns:minmax(0,1fr) }
  .grid{ --cols:2 } .grid[data-vue="grand"]{ --cols:1 }
}
@media (max-width:560px){
  .nav nav{ gap:14px; font-size:13px }
  .hero{ padding-bottom:60px }
  .grid{ column-gap:10px }
  .item{ margin-bottom:16px }
  .item .l1{ font-size:13px; flex-direction:column; gap:1px }
  .item .l1 span{ text-align:left }
  .item .reg{ font-size:10.5px }
  .seg button span{ display:none }
  .lb-globe span{ display:none }
  .lb-globe{ width:46px; padding:0; justify-content:center }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important }
}