/* Ocean Buddy 1.3 — accueil « envies de départ » (home-feed.js). */
#home.hf-on .home-intro{display:none!important}
#home.hf-on #oceanHub .hub-greet{display:none}
#home.hf-on #oceanHub{margin-top:14px}

/* ---------- Ouverture : recherche, activités, spots de rêve ---------- */
.hf-top{margin:0 0 4px}
.hf-search{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;margin:0 0 12px;padding:8px 18px;border:0;border-radius:999px;cursor:pointer;text-align:left;
  background:#fff;color:var(--as-ink,#0c1d3f);box-shadow:0 10px 30px -14px rgba(12,29,63,.45),0 1px 2px rgba(12,29,63,.06)}
.hf-search svg{width:22px;height:22px;flex:none;color:var(--as-accent,#1f55e0)}
.hf-search span{display:grid;gap:1px;min-width:0}
.hf-search b{font:750 16px/1.2 var(--body)}
.hf-search small{font:500 13px/1.25 var(--body);color:var(--as-ink3,#7d8aa6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hf-search:active{transform:scale(.98)}
/* Ancienne section « Quelle aventure aujourd’hui ? » : remplacée par la rangée d’activités ci-dessous. */
#home .poulpy-activities{display:none!important}
/* L’ancienne barre « Ton activité » (bas de l’onglet Aujourd’hui) ferait doublon avec la rangée du haut. Masquée par CSS
   dès le premier rendu (aucun décalage après la levée du rideau). */
#home.hf-on #homeActivity{display:none!important}
/* Choix d’activité (home-feed.js, rendu avec l’ouverture). Hauteur fixe de 52 px : aucune insertion ne décale
   l’accueil. Cibles de 44 px ; l’activité choisie est pleine, en gras et cochée (pas seulement une couleur). */
.hf-acts{display:flex;gap:8px;height:52px;box-sizing:border-box;overflow-x:auto;overflow-y:hidden;margin:0 calc(-1 * var(--as-gutter,16px)) 12px;padding:4px var(--as-gutter,16px);
  scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-inline:var(--as-gutter,16px);overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.hf-acts::-webkit-scrollbar{display:none}
.hf-act{flex:none;display:inline-flex;align-items:center;gap:7px;height:44px;min-width:44px;padding:0 14px 0 6px;box-sizing:border-box;border:1.5px solid var(--t-line,#b9cbf5);border-radius:999px;
  background:#fff;color:var(--as-ink,#0c1d3f);font:650 14px/1 var(--body);white-space:nowrap;cursor:pointer;scroll-snap-align:start;
  box-shadow:0 4px 12px -8px rgba(12,29,63,.4);-webkit-tap-highlight-color:transparent;transition:background-color .35s,border-color .35s,color .35s,transform .2s}
.hf-act-ic{flex:none;width:32px;height:32px;border-radius:50%;background:var(--t-tint,#e8efff);position:relative;transition:background-color .35s}
.hf-act-ic::before{content:"";position:absolute;inset:5px;background:var(--t-main,#2154dc);-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;transition:background-color .35s}
.hf-act-ok{display:none;width:16px;height:16px;flex:none;margin-left:-2px}
.hf-act[aria-checked="true"]{background:var(--t-main,#2154dc);border-color:var(--t-deep,#0b2d7a);color:#fff;font-weight:800;box-shadow:0 3px 8px -5px var(--t-deep,#0b2d7a)}
.hf-act[aria-checked="true"] .hf-act-ic{background:rgba(255,255,255,.2)}
.hf-act[aria-checked="true"] .hf-act-ic::before{background:#fff}
.hf-act[aria-checked="true"] .hf-act-ok{display:block}
.hf-act:active{transform:scale(.96)}
.hf-act:focus-visible{outline:3px solid var(--t-bright,#2f6bff);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.hf-act,.hf-act-ic,.hf-act-ic::before{transition:none}}
.reduce-motion .hf-act,.reduce-motion .hf-act-ic,.reduce-motion .hf-act-ic::before{transition:none}
.hf-hero{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--as-r-xl,28px);background:var(--t-deep,#0b2d7a);aspect-ratio:4/5;min-height:430px;max-height:600px;box-shadow:0 26px 60px -30px rgba(12,29,63,.75)}
.hf-slides{position:absolute;inset:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.hf-slides::-webkit-scrollbar{display:none}
.hf-slide{position:relative;flex:0 0 100%;height:100%;scroll-snap-align:start;scroll-snap-stop:always;cursor:pointer;color:#fff;overflow:hidden}
.hf-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%;z-index:-2;transform:scale(1.04);transition:transform 6s ease-out}
.hf-slide::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,10,30,.25) 0%,rgba(0,10,30,0) 28%,rgba(0,10,30,0) 48%,rgba(0,12,36,.82) 100%)}
.hf-slide-tx{position:absolute;left:20px;right:20px;bottom:38px}
.hf-kicker{display:inline-block;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font:750 11.5px/1 var(--body);letter-spacing:1.2px;text-transform:uppercase;color:#fff}
.hf-slide h2{margin:10px 0 4px;font:900 48px/.92 var(--as-condensed);letter-spacing:-.8px;text-transform:uppercase;color:#fff;text-shadow:0 4px 24px rgba(0,0,0,.4)}
.hf-slide p{margin:0 0 14px;font:600 15px/1.35 var(--body);color:rgba(255,255,255,.9)}
.hf-go{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 20px;border:0;border-radius:999px;background:#fff;color:var(--g-ink,#0c1d3f);font:800 15px var(--body);cursor:pointer;box-shadow:0 10px 26px -10px rgba(0,0,0,.55)}
.hf-go svg{width:18px;height:18px;color:var(--as-accent,#1f55e0)}
.hf-go:active{transform:scale(.96)}
.hf-dots{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;gap:6px;pointer-events:none}
.hf-dots i{width:6px;height:6px;border-radius:999px;background:rgba(255,255,255,.5);transition:width .3s,background .3s}
.hf-dots i.on{width:20px;background:#fff}
@media(min-width:960px){.hf-hero{aspect-ratio:auto;height:520px;max-height:none}.hf-slide h2{font-size:76px}.hf-slide-tx{left:44px;bottom:48px;max-width:640px}.hf-acts{margin-inline:0;padding-inline:0}.hf-search{max-width:640px}}

/* ---------- Carte du monde ---------- */
.hf-world{margin:30px 0 4px;border-radius:var(--as-r-xl,28px);overflow:hidden;background:radial-gradient(90% 70% at 50% 16%,var(--g-lift,#2f6fe0) 0%,var(--g-mid,#1b4fc4) 48%,var(--t-deep) 100%);color:#fff}
.hf-world-map{--d:232px;position:relative;height:276px;display:grid;place-items:center;overflow:hidden}
/* Globe 3D de l’accueil : carré de la taille de la planète, transparent hors de la sphère. */
.hf-globe{position:absolute;left:50%;top:50%;width:var(--d);height:var(--d);transform:translate(-50%,-50%);border-radius:50%;overflow:hidden;touch-action:pan-y;opacity:0;transition:opacity .45s ease}
.hf-globe canvas{width:100%!important;height:100%!important}
/* Le globe 3D prend le relais en fondu, une fois sa première image éclairée dessinée ; la sphère CSS disparaît ensuite. */
.hf-world-map.is-live .hf-globe{opacity:1}
.hf-world-map.is-live .hf-planet{visibility:hidden;transition:visibility 0s .45s}
.hf-planet{position:relative;width:var(--d);height:var(--d);border-radius:50%;overflow:hidden;isolation:isolate;background:var(--t-deep);box-shadow:0 0 0 1px rgba(255,255,255,.12),0 22px 50px -12px rgba(3,16,46,.75);transform:translateZ(0)}
/* La Terre (NASA) défile en boucle : la sphère tourne sans canvas ni WebGL, donc sans à-coups. */
.hf-planet-tex{position:absolute;inset:0;background:url(assets/globe/earth-day-4k.webp) 0 50%/calc(var(--d) * 2) var(--d) repeat-x;animation:hf-spin 48s linear infinite}
.hf-planet-shade{position:absolute;inset:0;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.2) 0,rgba(255,255,255,0) 44%),radial-gradient(circle at 62% 56%,rgba(0,0,0,0) 50%,rgba(3,16,46,.6) 100%)}
@keyframes hf-spin{from{background-position:0 50%}to{background-position:calc(var(--d) * -2) 50%}}
.reduce-motion .hf-planet-tex{animation:none}
@media (prefers-reduced-motion:reduce){.hf-planet-tex{animation:none}}
.hf-world-tx{padding:16px 18px 18px}
.hf-world-tx .hf-kicker{background:rgba(224,255,145,.16);color:var(--ob-lime,#e0ff91)}
.hf-world-tx h2{margin:10px 0 6px;font:900 32px/.95 var(--as-condensed);text-transform:uppercase;letter-spacing:-.3px}
.hf-world-tx p{margin:0 0 14px;font:500 14.5px/1.45 var(--body);color:rgba(255,255,255,.85)}
.hf-world-go{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 18px;border:0;border-radius:999px;background:var(--ob-lime,#e0ff91);color:var(--t-acc-ink,#0b2d7a);font:800 15px var(--body);cursor:pointer}
.hf-world-go svg{width:18px;height:18px}

/* ---------- Rails de photos ---------- */
.hf-sec{margin:0}
.hf-sec .as-sec{margin-top:30px}
.hf-rail{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--as-gutter,16px);
  margin:0 calc(-1 * var(--as-gutter,16px));padding:2px var(--as-gutter,16px) 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hf-rail::-webkit-scrollbar{display:none}
.hf-card{position:relative;flex:0 0 58%;max-width:230px;aspect-ratio:4/5;scroll-snap-align:start;overflow:hidden;isolation:isolate;border-radius:var(--as-r-l,22px);background:var(--t-deep,#0b2d7a);color:#fff;cursor:pointer;
  box-shadow:0 14px 30px -18px rgba(12,29,63,.6);transition:transform .25s cubic-bezier(.32,1.28,.42,1)}
.hf-rail.big .hf-card{flex-basis:78%;max-width:320px;aspect-ratio:3/4}
.hf-card:active{transform:scale(.97)}
.hf-card:focus-visible{outline:3px solid var(--as-accent,#1f55e0);outline-offset:3px}
.hf-card img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.hf-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(3,12,32,.82) 100%)}
.hf-card-tx{position:absolute;left:14px;right:14px;bottom:14px}
.hf-card-tx small{display:block;font:700 11.5px/1.2 var(--body);letter-spacing:.8px;text-transform:uppercase;color:rgba(255,255,255,.82);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hf-card-tx h3{margin:4px 0 8px;font:800 24px/1 var(--as-condensed);letter-spacing:-.3px;text-transform:uppercase;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hf-rail.big .hf-card-tx h3{font-size:30px}
.hf-card-tx p{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.hf-card-tx p span{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:999px;background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font:700 11.5px var(--body);white-space:nowrap}
.hf-card-tx p .hf-season{background:var(--ob-lime,#e0ff91);color:var(--t-acc-ink,#0c1d3f)}
.hf-fav{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(10,20,40,.32);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff}
.hf-fav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}
.hf-fav.on svg{fill:#ff5a6e;stroke:#ff5a6e}
.hf-fav:active{transform:scale(.88)}
@media(min-width:960px){.hf-card{flex-basis:220px}.hf-rail.big .hf-card{flex-basis:280px}.hf-rail{margin:0;padding-inline:0}}
@media(prefers-reduced-motion:reduce){.hf-slide img{transition:none}}

/* ---------- Fond d’ambiance (photo du spot affiché, floutée) ---------- */
#home.hf-on{position:relative;z-index:0}
.hf-ambient{position:absolute;z-index:-1;left:calc(-1 * var(--as-gutter,16px));right:calc(-1 * var(--as-gutter,16px));top:calc(-8px - var(--as-top,0px));height:560px;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 35%,transparent);mask-image:linear-gradient(180deg,#000 35%,transparent)}
.hf-ambient img{position:absolute;inset:-60px;width:calc(100% + 120px);height:calc(100% + 120px);object-fit:cover;filter:blur(46px) saturate(1.5) brightness(1.08);opacity:0;transition:opacity 1.2s ease}
.hf-ambient img.on{opacity:.55}
@media(min-width:960px){.hf-ambient{left:-24px;right:-24px;top:-24px}}

/* ---------- Envies du moment ---------- */
.hf-moods .as-sec{margin-top:28px}
.hf-mood-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hf-mood{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:1/1;border:0;border-radius:var(--as-r-l,22px);padding:0;cursor:pointer;color:#fff;text-align:left;background:var(--t-deep,#0b2d7a);box-shadow:0 12px 26px -16px rgba(12,29,63,.6)}
.hf-mood img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.hf-mood::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(3,12,32,.78))}
.hf-mood b{position:absolute;left:12px;right:10px;bottom:28px;font:800 20px/1 var(--as-condensed);text-transform:uppercase;letter-spacing:-.2px}
.hf-mood small{position:absolute;left:12px;bottom:11px;font:650 12px var(--body);opacity:.85}
.hf-mood:active{transform:scale(.97)}
@media(min-width:960px){.hf-mood-grid{grid-template-columns:repeat(4,1fr)}}

/* ---------- Couleurs de l’activité ----------
   Sans activité, l’accueil garde exactement le cobalt d’origine ; avec une activité, la carte de la planète
   et le planificateur prennent la palette (--t-*, activity-theme.css). Les photos ne sont jamais teintées. */
html[data-act] .hf-world{background:radial-gradient(90% 70% at 50% 16%,var(--t-main2) 0%,var(--t-main) 48%,var(--t-deep) 100%)}
html[data-act] .hf-plan{background:radial-gradient(140% 120% at 0% 0%,color-mix(in srgb,var(--t-acc) 20%,transparent),transparent 50%),linear-gradient(140deg,var(--t-deep) 0%,var(--t-main) 70%,var(--t-main2) 120%);box-shadow:0 22px 40px -26px var(--t-deep)}
html[data-act] .hf-plan-cal i.on,html[data-act] .hf-plan-go{background:var(--t-acc);color:var(--t-acc-ink)}
html[data-act] .hf-plan-tx small{color:var(--t-acc)}

/* Fond d’ambiance : avec une activité, la photo floutée prend la teinte de l’activité (mélange « couleur » :
   on garde la lumière de la photo, on change la couleur). Sans activité : photo telle quelle. */
html[data-act] .hf-ambient::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.2) 60%,rgba(255,255,255,0));pointer-events:none}
html[data-act] .hf-ambient::after{content:"";position:absolute;inset:0;z-index:2;background:var(--t-line);mix-blend-mode:color;pointer-events:none}
html[data-act] #home .as-large p{color:var(--t-deep)}

/* Zone tactile 44 px (B-03) : le bouton garde ses 38 px visibles, la zone de frappe déborde de 3 px (aucun décalage). */
.hf-fav::after{content:"";position:absolute;inset:-3px}