/* ==========================================================================
   Travel2World — couche visuelle « carnet de voyage »
   Chargée après style.css / refinements.css : elle surcharge sans les casser.
   ========================================================================== */

:root{
  --bg:#f3ede2;--surface:#fbf8f2;--ink:#1b2433;--muted:#5b6370;--line:#ddd2bf;
  --blue:#1f5f7a;--orange:#d4552b;--soft:#e9e0cf;--sun:#f2b33d;
  --paper-shadow:0 1px 0 #0000000d,0 12px 30px -12px #3a2a1440;
  --f-display:'Twemoji Country Flags','Fraunces',Georgia,serif;--f-body:'Twemoji Country Flags','Work Sans',system-ui,sans-serif;
  --f-hand:'Twemoji Country Flags','Caveat',cursive;--f-poster:'Twemoji Country Flags','Anton',Impact,sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1);
}
html[data-theme=dark]{
  --bg:#121a24;--surface:#1a2533;--ink:#f3ede2;--muted:#b3b9c2;--line:#2f3c4d;
  --blue:#86c5db;--orange:#f08a5d;--soft:#223043;--sun:#f5c35f;
  --paper-shadow:0 12px 30px -12px #000a;
}

body{font-family:var(--f-body);background:var(--bg);letter-spacing:-.005em}
/* grain papier (en fond, sans calque superposé : léger pour le GPU) */
body{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .34 0 0 0 0 .22 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
html,body{overflow-x:clip}
::selection{background:var(--orange);color:#fff}

/* --- Typo --- */
h1,h2,.hero h1,.intro h1,.wizard h1,.country-top h1,.japan-hero h1,
.home-section-heading h2,.home-final h2,.dest-photo h2,.dest-next h2,.home-side-note b{
  font-family:var(--f-display)!important;font-weight:400;font-variation-settings:"SOFT" 60,"WONK" 1;letter-spacing:-.025em}
h1 em,h2 em{font-style:italic;color:var(--orange)!important}
.eyebrow{color:var(--orange);letter-spacing:.18em;font-weight:600;display:inline-flex;align-items:center;gap:10px}
.eyebrow:before{content:"";width:22px;height:1.5px;background:currentColor;display:inline-block}
a{color:var(--blue);text-underline-offset:3px}

/* --- Barre de progression --- */
#m-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--orange),var(--sun));z-index:9995;pointer-events:none}

/* --- En-tête --- */
header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid transparent;transition:transform .45s var(--ease-out),border-color .3s,background-color .3s}
header.m-scrolled{border-bottom-color:var(--line)}
header.m-hidden{transform:translateY(-105%)}
.brand{font-family:var(--f-display);font-weight:500;letter-spacing:-.03em;font-size:1.35rem}
.brand span{color:var(--orange)!important;font-style:italic;display:inline-block;transition:transform .5s var(--ease-out)}
.brand:hover span{transform:rotate(-14deg) translateY(-3px)}
.nav nav a{position:relative;font-weight:500;padding:4px 0}
.nav nav a:after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--orange);border-radius:2px;
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out)}
.nav nav a:hover:after,.nav nav a.m-active:after{transform:scaleX(1);transform-origin:left}
.nav nav a:hover{color:var(--ink)}
.nav-button{border-radius:999px;background:var(--ink);color:var(--bg)!important;transition:transform .3s var(--ease-out),background .3s}
.nav-button:hover{background:var(--orange)}
.nav-end button{transition:transform .5s var(--ease-out)}
.nav-end button:hover{transform:rotate(180deg)}

/* --- Boutons --- */
.btn{border-radius:999px;position:relative;overflow:hidden;isolation:isolate;font-weight:600;transition:transform .35s var(--ease-out),color .35s,border-color .35s}
.btn:before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--orange);
  transform:translateY(101%);transition:transform .5s var(--ease-out)}
.btn:hover:before{transform:translateY(0)}
.btn.primary{background:var(--ink);color:var(--bg)}
.btn.primary:hover{background:var(--ink);color:#fff}
.btn.secondary{background:transparent;border:1.5px solid var(--ink);color:var(--ink)}
.btn.secondary:hover{color:#fff;border-color:var(--orange)}
.btn-arrow{display:inline-block;transition:transform .4s var(--ease-out)}
.btn:hover .btn-arrow{transform:translateX(5px)}
.btn:hover{transform:translateY(-2px)}

/* --- Accueil : ouverture --- */
.map-home{padding-top:clamp(28px,5vw,64px)}
.home-lead{align-items:center}
.hand-note{font-family:var(--f-hand);font-size:clamp(1.35rem,2vw,1.7rem);color:var(--orange);display:inline-block;transform:rotate(-2deg);position:relative;line-height:1}
.hand-note:after{content:"";position:absolute;left:0;right:8%;bottom:-8px;height:10px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M2 7 C 50 1, 110 9, 198 3' fill='none' stroke='%23d4552b' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%}
.home-lead h1{font-size:clamp(2.9rem,7.2vw,6.6rem)!important;line-height:.98!important;letter-spacing:-.04em!important;margin:22px 0 22px!important}
.home-lead h1 em{display:inline-block}
.home-lead .map-intro>p{font-size:1.12rem;max-width:600px}

/* Carte d'embarquement */
.boarding{border:0!important;padding:0!important;background:var(--surface);border-radius:18px;box-shadow:var(--paper-shadow);
  position:relative;transform:rotate(1.6deg);transition:transform .6s var(--ease-out);overflow:hidden}
.boarding:hover{transform:rotate(0) translateY(-4px)}
.boarding>*{margin-left:22px!important;margin-right:22px!important}
.boarding-top{display:flex;justify-content:space-between;background:var(--orange);color:#fff;margin:0!important;padding:11px 22px}
.boarding-top span{color:#fff!important;font-size:.66rem!important;letter-spacing:.16em!important;font-weight:700}
.boarding-route{display:flex;align-items:center;justify-content:space-between;padding:20px 0 14px;border-bottom:2px dashed var(--line)}
.boarding-route small{display:block;font-size:.6rem;letter-spacing:.16em;color:var(--muted);font-weight:600}
.boarding-route b{font-family:var(--f-poster)!important;font-size:2.4rem!important;letter-spacing:.02em;margin:0!important;line-height:1!important;color:var(--ink)}
.boarding-route>div:last-child{text-align:right}
.boarding-plane{width:30px;height:30px;fill:var(--orange);animation:m-fly 3.2s var(--ease-out) infinite}
@keyframes m-fly{0%{transform:translateX(-26px) rotate(90deg);opacity:0}20%,70%{opacity:1}100%{transform:translateX(26px) rotate(90deg);opacity:0}}
.boarding p{margin-top:14px!important}
.boarding a{display:inline-block;margin-bottom:14px}
.boarding-barcode{height:34px;margin-bottom:20px!important;opacity:.85;
  background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 5px,transparent 5px 9px,var(--ink) 9px 12px,transparent 12px 14px)}
.boarding:before,.boarding:after{content:"";position:absolute;width:22px;height:22px;border-radius:50%;background:var(--bg);top:118px;z-index:2}
.boarding:before{left:-11px}.boarding:after{right:-11px}

/* Bandeau défilant */
.marquee{position:relative;overflow:hidden;margin:34px calc(50% - 50vw) 34px;background:var(--ink);color:var(--bg);transform:rotate(-1.4deg);padding:14px 0;
  box-shadow:0 10px 30px -15px #0006}
.marquee-track{display:flex;width:max-content;animation:m-marquee 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{font-family:var(--f-poster);text-transform:uppercase;font-size:clamp(1.5rem,3vw,2.4rem);letter-spacing:.02em;padding:0 22px;white-space:nowrap;display:flex;align-items:center;gap:44px}
.marquee span:nth-child(even){color:transparent;-webkit-text-stroke:1.2px var(--bg)}
.marquee span:after{content:"✺";color:var(--orange);-webkit-text-stroke:0;font-size:.7em;margin-right:-22px}
@keyframes m-marquee{to{transform:translateX(-50%)}}
html[data-theme=dark] .marquee{background:var(--orange);color:#1b2433}
html[data-theme=dark] .marquee span:nth-child(even){-webkit-text-stroke-color:#1b2433}
html[data-theme=dark] .marquee span:after{color:#1b2433}

/* Globe */
.map-wrap{border-radius:28px!important;border:0!important;box-shadow:0 30px 60px -25px #0a1a2e88!important}
.globe-guide{position:relative;z-index:3}
.globe-guide .eyebrow{color:var(--sun)}
.globe-scribble{position:absolute;z-index:4;right:clamp(16px,5vw,70px);top:22px;font-family:var(--f-hand);font-size:1.5rem;color:#fff;transform:rotate(-4deg);pointer-events:none;
  animation:m-wiggle 3s ease-in-out infinite}
@keyframes m-wiggle{50%{transform:rotate(-1deg) translateY(4px)}}
.globe-pin span{font-family:var(--f-body)}

/* Étapes */
.home-path{position:relative}
.route-line{display:block;width:100%;height:90px;margin:-10px 0 -30px;overflow:visible}
.route-line path{fill:none;stroke:var(--orange);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:8 10}
.home-path-grid{gap:22px!important}
.home-step{border:1.5px solid var(--ink)!important;border-radius:6px!important;background:var(--surface)!important;position:relative;
  transition:transform .6s var(--ease-out),box-shadow .4s;box-shadow:6px 6px 0 var(--ink)}
.home-step:nth-child(1){transform:rotate(-1.2deg)}
.home-step:nth-child(2){transform:rotate(.8deg) translateY(18px)}
.home-step:nth-child(3){transform:rotate(-.5deg)}
.home-step:hover{transform:rotate(0) translateY(-6px)!important;box-shadow:10px 10px 0 var(--orange)!important;border-color:var(--ink)!important}
.home-step>span{font-family:var(--f-hand);font-size:1.45rem!important;letter-spacing:0!important;color:var(--orange)!important;font-weight:700!important}
.home-step h3{font-family:var(--f-display);font-weight:500;font-size:1.6rem!important;margin-top:18px!important}
.home-step b{color:var(--ink)!important;display:inline-flex;gap:6px}

/* Polaroïds destinations */
.home-dest-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:34px!important;padding:20px 0 10px}
.home-dest-card{border:0!important;border-radius:4px!important;background:#fffdf8!important;padding:12px 12px 22px!important;min-height:0!important;
  box-shadow:var(--paper-shadow)!important;position:relative;transition:transform .7s var(--ease-out),box-shadow .5s,rotate .7s var(--ease-out);color:#1b2433!important;
  transform-style:preserve-3d}
html[data-theme=dark] .home-dest-card{background:#f3ede2!important}
.home-dest-card:nth-child(1){rotate:-2deg}.home-dest-card:nth-child(2){rotate:1.5deg;margin-top:26px}.home-dest-card:nth-child(3){rotate:-1deg}
.home-dest-card:hover{rotate:0deg;box-shadow:0 30px 50px -20px #3a2a1466!important}
.home-dest-card:before{content:"";position:absolute;top:-12px;left:50%;width:96px;height:26px;translate:-50% 0;rotate:-3deg;z-index:3;
  background:#e9d9b3c4;box-shadow:0 1px 2px #0002;clip-path:polygon(3% 0,97% 4%,100% 100%,0 96%)}
.home-dest-card img{width:100%!important;margin:0 0 16px!important;height:260px!important;border-radius:2px}
.home-dest-card>span{color:var(--orange)!important;font-family:var(--f-poster);font-weight:400!important;font-size:.95rem!important;letter-spacing:.08em!important;padding:0 6px}
.home-dest-card h3{font-family:var(--f-hand);font-weight:700;font-size:1.9rem;line-height:1.05;margin:4px 0 6px;padding:0 6px;color:#1b2433}
.home-dest-card p{padding:0 6px;color:#5b6370!important;font-size:.92rem}
.home-dest-card b{padding:0 6px;color:#1f5f7a!important}
.stamp{position:absolute;z-index:4;top:26px;right:22px;width:78px;height:78px;border-radius:50%;display:grid;place-items:center;text-align:center;
  font:normal 400 .95rem/1 var(--f-poster);letter-spacing:.05em;color:#fff;border:2px dashed #ffffffcc;outline:2px solid #ffffff99;outline-offset:3px;
  background:#d4552bd9;rotate:14deg;box-shadow:0 6px 16px #0004;pointer-events:none}
.m-rv .stamp{opacity:0;scale:2.2}
.m-rv.m-in .stamp{opacity:1;scale:1;transition:scale .5s cubic-bezier(.3,1.6,.5,1) .45s,opacity .2s .45s}

/* Appel final */
.home-final{background:var(--orange);color:#fff;border-radius:28px;padding:clamp(34px,6vw,70px)!important;margin-top:90px!important;margin-bottom:90px;
  border:0!important;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.home-final:after{content:"✈\FE0E";position:absolute;right:-20px;bottom:-60px;font-size:260px;line-height:1;color:#ffffff1f;rotate:-20deg;pointer-events:none;
  translate:var(--fx,0px) 0;animation:m-drift 9s ease-in-out infinite}
@keyframes m-drift{50%{rotate:-12deg;scale:1.06}}
.home-final .eyebrow{color:#fff}
.home-final h2{color:#fff}
.home-final p{color:#ffffffd9!important}
.home-final .btn.primary{background:#fff;color:#1b2433;z-index:1}
.home-final .btn.primary:before{background:var(--ink)}
.home-final .btn.primary:hover{color:#fff}
.home-section-heading h2,.home-final h2{font-size:clamp(2.2rem,4.6vw,4rem)!important;line-height:1.02!important}

/* --- Pages destinations / guides --- */
.dest-photo,.country-top,.japan-hero,.home-dest-card,.japan-city,.compare-card{overflow:hidden}
.country-top{background-size:cover!important;background-position:50% var(--py,50%)!important}
.japan-hero>img{transform:translateY(var(--py-px,0px)) scale(1.12)}
.country-top h1,.japan-hero h1{font-size:clamp(3rem,8vw,7rem)!important;line-height:.95}
.dest-photo{border-radius:24px!important}
.dest-next,.panel,.card{border-radius:14px}
.card{box-shadow:none}
.card:hover{box-shadow:6px 6px 0 var(--ink)!important;border-color:var(--ink)!important}
.japan-city img,.compare-card img,.city-gallery img{transition:transform .9s var(--ease-out)!important}
.japan-city:hover img,.compare-card:hover img,.city-gallery img:hover{transform:scale(1.06)}

/* --- Pied de page --- */
footer{background:var(--ink)!important;color:var(--bg);border-top:0!important;position:relative;overflow:hidden;padding-top:60px!important}
footer:before{content:"Travel2World";display:block;font-family:var(--f-display);font-style:italic;font-size:clamp(3.5rem,13vw,12rem);line-height:.9;
  letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px #f3ede255;white-space:nowrap;text-align:center;margin:0 0 40px;pointer-events:none;transform:translateX(var(--fw,0))}
footer b{font-family:var(--f-display);font-weight:500;font-size:1.2rem}
footer a,footer button{color:var(--bg)!important;opacity:.8;transition:opacity .2s}
footer a:hover,footer button:hover{opacity:1}
.foot p,.foot-note{color:#f3ede2a8!important}
html[data-theme=dark] footer{background:#0b1118!important}

/* --- Curseur --- */
.m-cursor{position:fixed;left:0;top:0;width:38px;height:38px;margin:-19px 0 0 -19px;border:1.5px solid var(--orange);border-radius:50%;
  pointer-events:none;z-index:9998;transition:width .3s var(--ease-out),height .3s var(--ease-out),margin .3s var(--ease-out),background-color .3s,opacity .3s;opacity:0}
.m-cursor-dot{position:fixed;left:0;top:0;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--orange);pointer-events:none;z-index:9999;opacity:0}
.m-cursor.m-on,.m-cursor-dot.m-on{opacity:1}
.m-cursor.m-hover{width:64px;height:64px;margin:-32px 0 0 -32px;background:#d4552b22}

/* --- Transitions de page --- */
#m-wipe{position:fixed;inset:0;z-index:9996;pointer-events:none;visibility:hidden;background:var(--orange);transform:translateY(100%);display:grid;place-items:center}
#m-wipe svg{width:56px;height:56px;fill:#fff;opacity:0;transform:translateY(20px) rotate(45deg)}
#m-wipe.m-cover{visibility:visible;transition:transform .42s cubic-bezier(.7,0,.3,1);transform:translateY(0)}
#m-wipe.m-cover svg{opacity:1;transform:translateY(0) rotate(45deg);transition:all .4s var(--ease-out) .15s}
#m-wipe.m-leave{transition:transform .55s cubic-bezier(.7,0,.3,1);transform:translateY(-100%)}
main.m-enter{animation:m-enter .7s var(--ease-out) both}
@keyframes m-enter{from{opacity:0;transform:translateY(24px)}}

/* --- Intro (premier chargement) --- */
#m-intro{position:fixed;inset:0;z-index:10000;background:var(--ink);color:var(--bg);display:grid;place-items:center;
  transition:clip-path .9s cubic-bezier(.8,0,.2,1);clip-path:inset(0 0 0 0)}
#m-intro.m-out{clip-path:inset(0 0 100% 0)}
#m-intro .m-intro-in{text-align:center}
#m-intro .m-intro-word{font-family:var(--f-display);font-style:italic;font-size:clamp(2.6rem,8vw,6rem);letter-spacing:-.04em;overflow:hidden;display:flex;justify-content:center}
#m-intro .m-intro-word span{display:inline-block;transform:translateY(110%);animation:m-up .8s var(--ease-out) forwards}
#m-intro .m-intro-word span.o{color:var(--orange)}
#m-intro svg{width:min(420px,80vw);height:70px;overflow:visible;margin-top:8px}
#m-intro svg path{fill:none;stroke:var(--orange);stroke-width:2;stroke-dasharray:6 8}
#m-intro svg{animation:m-draw 1.3s var(--ease-out) .2s both}
@keyframes m-draw{from{clip-path:inset(-20px 100% -20px 0)}to{clip-path:inset(-20px 0 -20px 0)}}
@keyframes m-up{to{transform:translateY(0)}}

/* --- Révélations au défilement --- */
.m-split .m-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.m-split .m-w>span{display:inline-block;transform:translateY(105%) rotate(4deg);transform-origin:0 100%;transition:transform 1s var(--ease-out);transition-delay:calc(var(--i) * 55ms)}
.m-split.m-in .m-w>span{transform:none}
.m-rv{opacity:0;transform:translateY(38px);transition:opacity .9s var(--ease-out) var(--d,0ms),transform 1s var(--ease-out) var(--d,0ms),box-shadow .4s,rotate .7s var(--ease-out)}
.m-rv.m-in{opacity:1;transform:none}
.home-step.m-rv:nth-child(1){transform:translateY(38px) rotate(-1.2deg)}
.home-step.m-rv:nth-child(2){transform:translateY(58px) rotate(.8deg)}
.home-step.m-rv:nth-child(3){transform:translateY(38px) rotate(-.5deg)}
.home-step.m-rv.m-in:nth-child(1){transform:rotate(-1.2deg)}
.home-step.m-rv.m-in:nth-child(2){transform:rotate(.8deg) translateY(18px)}
.home-step.m-rv.m-in:nth-child(3){transform:rotate(-.5deg)}
.m-img{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s var(--ease-out),scale 1.6s var(--ease-out)!important;scale:1.15}
.m-img.m-in{clip-path:inset(0 0 0 0);scale:1}
.motion-on .reveal{translate:0 30px;transition:opacity .9s var(--ease-out),translate 1s var(--ease-out)}

/* --- Mobile --- */
@media (max-width:900px){
  .home-dest-grid{grid-template-columns:1fr 1fr!important}
  .home-lead{grid-template-columns:1fr!important}
  .boarding{max-width:420px}
}
@media (max-width:650px){
  .home-dest-grid,.home-path-grid{grid-template-columns:1fr!important}
  .home-dest-card:nth-child(n){margin-top:0}
  .home-step:nth-child(2),.home-step.m-rv.m-in:nth-child(2){transform:rotate(.8deg)}
  .route-line{display:none}
  .globe-scribble{top:auto;bottom:14px;right:14px;font-size:1.25rem}
  .home-final{border-radius:20px}
  .stamp{width:64px;height:64px;font-size:.8rem}
  .marquee{margin-top:26px;margin-bottom:26px}
}
@media (pointer:coarse){.m-cursor,.m-cursor-dot{display:none}}

/* --- Accessibilité : pas d'animation si demandé --- */
@media (prefers-reduced-motion:reduce){
  .m-rv,.m-img,.m-split .m-w>span{opacity:1!important;transform:none!important;clip-path:none!important;scale:1!important}
  .marquee-track,.boarding-plane,.globe-scribble,.home-final:after{animation:none!important}
  #m-intro,#m-wipe,.m-cursor,.m-cursor-dot{display:none!important}
}

/* Globe : défilement de la page possible au doigt et à la molette */
.globe-host,.globe-host canvas{touch-action:pan-y!important}
.globe-zoom-hint{position:absolute;left:50%;bottom:22px;transform:translate(-50%,10px);z-index:6;pointer-events:none;
  background:#0b1f33d9;color:#fff;font:600 .85rem var(--f-body);padding:8px 14px;border-radius:999px;opacity:0;transition:opacity .3s,transform .3s}
.globe-zoom-hint.on{opacity:1;transform:translate(-50%,0)}

/* Globe : Japon et Corée sont proches → étiquettes de part et d'autre de leur épingle */
.globe-pin{position:relative}
.globe-pin[aria-label$="Corée du Sud"] span,.globe-pin[aria-label$="Japon"] span{position:absolute;top:6px;white-space:nowrap}
.globe-pin[aria-label$="Corée du Sud"] span{right:calc(100% + 2px)}
.globe-pin[aria-label$="Japon"] span{left:calc(100% + 2px)}