/* BoatsFun — Homepage finale (consolidée).
   Charte officielle : Navy #002244 · Lagoon Teal #00B5E2 · Solar Orange #FF8200
   Sea Mist #F0F8FF · Deep Ink #111111  ·  Poppins (titres) · Inter (UI/texte)
   12 sections, marketplace Montréal, "Réservez ou faites une offre".

   Phase 1 — Architecture multi-pages :
   - Styles globaux  : shared/styles.css
   - Header partagé  : shared/header.jsx → window.BFHeader
   - Footer partagé  : shared/footer.jsx → window.BFFooter
   - Catalogue       : data/boats.js     → window.BFBoats
*/

(function () {
  const { I, Photo, Stars } = window.BF;

  // ============ DATA ============
  // Catalogue partagé (source de vérité = data/boats.js)
  const BOATS_MTL = window.BFBoats.BOATS;

  const WHY = [
  { icon: "shield",  title: "Paiement sécurisé",        tag: "100% protégé",     desc: "Votre dépôt est gardé en main tierce jusqu'à l'acceptation. Aucun paiement direct au propriétaire.",                     img: "https://images.unsplash.com/photo-1567899378494-47b22a2ae96a?w=800&q=80&auto=format&fit=crop" },
  { icon: "check",   title: "Bateaux vérifiés",         tag: "Certifié",         desc: "Chaque bateau est inspecté, assuré et son propriétaire validé avant publication sur la plateforme.",                  img: "https://images.unsplash.com/photo-1605281317010-fe5ffe798166?w=800&q=80&auto=format&fit=crop" },
  { icon: "headset", title: "Support 7 jours sur 7",    tag: "Toujours là",      desc: "Une question avant, pendant ou après votre sortie ? L'équipe BoatsFun répond en moins de deux heures.",                 img: "https://images.unsplash.com/photo-1540541338287-41700207dee6?w=800&q=80&auto=format&fit=crop" },
  { icon: "refund",  title: "Dépôt 100 % remboursé",    tag: "0 $ de risque",    desc: "Si personne n'accepte votre prix, vous récupérez automatiquement la totalité de votre dépôt. Promis.",                 img: "https://images.unsplash.com/photo-1473116763249-2faaef81ccda?w=800&q=80&auto=format&fit=crop" }];

  // EXPÉRIENCES — fond animé (mots en boucle) + galerie bento (sortie par moment)
  const EXP_TAGS = [
    "Sorties entre amis", "Anniversaires", "Coucher de soleil", "Journées en famille",
    "Party privé", "Traiteur à bord", "Photos & vidéos", "Expérience sur mesure",
    "Bateaux combinés", "Événements d'été", "Ambiance premium", "Demandes spéciales"];

  // Galerie bento : 1 grande tuile + 4 tuiles (layout asymétrique). Images nautiques/lifestyle premium.
  const EXP_SLIDES = [
    { tag: "Entre amis",   title: "Journées entre amis",    desc: "Musique, soleil et moments simples sur l'eau.",                 img: "https://images.unsplash.com/photo-1502933691298-84fc14542831?w=1400&q=80&auto=format&fit=crop" },
    { tag: "Famille",      title: "Sorties en famille",     desc: "Une sortie calme, accessible et agréable pour tout le groupe.", img: "https://images.unsplash.com/photo-1502209524164-acea936639a2?w=1000&q=80&auto=format&fit=crop" },
    { tag: "Romantique",   title: "Coucher de soleil",      desc: "Une ambiance plus premium pour finir la journée sur l'eau.",    img: "https://images.unsplash.com/photo-1473116763249-2faaef81ccda?w=1000&q=80&auto=format&fit=crop" },
    { tag: "Célébration",  title: "Événements privés",      desc: "Anniversaire, surprise, party privé ou célébration spéciale.",  img: "https://images.unsplash.com/photo-1605281317010-fe5ffe798166?w=1000&q=80&auto=format&fit=crop" },
    { tag: "Sur mesure",   title: "Expérience sur mesure",  desc: "Traiteur, photos, vidéos ou bateaux combinés selon le moment.", img: "https://images.unsplash.com/photo-1567899378494-47b22a2ae96a?w=1000&q=80&auto=format&fit=crop" }];


  const HOW = [
  { n: 1, title: "Choisissez votre bateau", desc: "Sélectionnez une date, une plage horaire et le bateau qui vous convient." },
  { n: 2, title: "Envoyez votre demande", desc: "Remplissez vos informations. Nous confirmons la disponibilité avec le propriétaire." },
  { n: 3, title: "Profitez de votre sortie", desc: "Une fois la réservation confirmée, vous recevez les instructions de départ." }];


  const OFFER_FLOW = [
  { n: 1, title: "Choisissez une date et un bateau" },
  { n: 2, title: "Proposez votre prix" },
  { n: 3, title: "Payez un dépôt" },
  { n: 4, title: "Le propriétaire accepte ou refuse" }];


  // TIME SLOTS — 3 moments de la journée (éditorial image + texte)
  // Images à remplacer par assets/time-slot-*.jpg quand fournis
  const TIME_SLOTS = [
  {
    id: "morning",
    theme: "morning",
    label: "CALME",
    title: "Matin en famille",
    hours: "9h à 13h",
    desc: "Eau plus calme, moins de trafic et ambiance relax : le moment parfait pour une sortie tranquille avec les enfants ou en famille.",
    img: "https://images.unsplash.com/photo-1502209524164-acea936639a2?w=1200&q=80&auto=format&fit=crop"
  },
  {
    id: "afternoon",
    theme: "afternoon",
    label: "SOLEIL",
    title: "Après-midi au soleil",
    hours: "14h à 18h",
    desc: "Plein soleil, énergie estivale et chaleur sur l'eau : le créneau idéal pour bronzer, se baigner et profiter à fond.",
    img: "https://images.unsplash.com/photo-1473116763249-2faaef81ccda?w=1200&q=80&auto=format&fit=crop"
  },
  {
    id: "sunset",
    theme: "sunset",
    label: "SUNSET",
    title: "Coucher de soleil",
    hours: "19h à 23h",
    desc: "Lumière dorée, ambiance douce et romantique : la sortie la plus premium pour terminer la journée en beauté sur l'eau.",
    img: "https://images.unsplash.com/photo-1505159940484-eb2b9f2588e2?w=1200&q=80&auto=format&fit=crop"
  }];


  const FAQ = [
  {
    q: "Comment fonctionne le système d'offre ?",
    a: "Sur chaque fiche bateau, vous pouvez faire une offre au prix qui vous convient. Le propriétaire reçoit votre offre et peut l'accepter ou la refuser. Si elle est acceptée, votre réservation est confirmée. Si elle est refusée, votre dépôt est remboursé."
  },
  {
    q: "Faut-il un permis pour louer un bateau ?",
    a: "Cela dépend du bateau. Certaines embarcations peuvent être louées sans permis, d'autres nécessitent une Carte de conducteur d'embarcation de plaisance (CCEP). L'exigence est indiquée clairement sur chaque fiche bateau. Pour les bateaux sans permis, une courte initiation à la sécurité est généralement offerte au départ."
  },
  {
    q: "BoatsFun fournit-il le capitaine ?",
    a: "BoatsFun.com est une marketplace : les bateaux et les services associés sont fournis par les propriétaires. Certains propriétaires proposent une location avec capitaine, d'autres sans. L'option « avec capitaine » est précisée sur chaque fiche bateau lorsque disponible."
  },
  {
    q: "Mon dépôt est-il remboursable ?",
    a: "Oui. Si votre offre n'est pas acceptée, votre dépôt est remboursé. Pour une réservation directe, les conditions d'annulation doivent être affichées clairement."
  },
  {
    q: "Quelle est la politique d'annulation ?",
    a: "Le client doit pouvoir consulter les conditions d'annulation avant de payer."
  },
  {
    q: "Et s'il pleut le jour de ma sortie ?",
    a: "La météo doit être vérifiée par le client avant la sortie. Les règles de changement ou d'annulation sont indiquées clairement dans les conditions."
  }];


  // ============ STYLES (homepage-specific only) ============
  // Note Phase 1 : variables, reset, container, typo, sections, CTA system, hierarchy
  // et responsive typo sont désormais dans shared/styles.css.
  // Header / Footer ont leurs propres styles dans shared/header.jsx / shared/footer.jsx.
  const styles = `
/* ============ HERO (Lodr-style, full-bleed with curve) ============ */
.bf .hero { position:relative; overflow:hidden; min-height:auto; background:var(--navy); }
.bf .hero-bg { position:absolute; inset:0; }
.bf .hero-bg img { width:100%; height:100%; object-fit:cover; display:block; }
.bf .hero-bg::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,34,68,.75) 0%, rgba(0,34,68,.55) 50%, rgba(0,34,68,.85) 100%); }
.bf .hero-inner { position:relative; z-index:3; min-height:auto; display:flex; flex-direction:column; justify-content:flex-end; padding-block:100px 140px; }
.bf .hero-content { max-width:780px; }
/* Hero H1 — shimmer gradient animation */
@keyframes bf-hero-shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
.bf .hero h1 { font-family:'Poppins', sans-serif; font-size:78px; line-height:1.02; font-weight:700; letter-spacing:-2.5px; margin:0 0 26px; color:#fff; background:linear-gradient(110deg, #FFFFFF 0%, #B8E4F0 35%, #FFFFFF 65%, #FFFFFF 100%); background-size:250% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; animation:bf-hero-shimmer 8s ease-in-out infinite alternate; text-shadow:0 2px 24px rgba(0,0,0,.25); }
.bf .hero .lead { font-size:18px; line-height:1.55; color:rgba(255,255,255,.88); max-width:560px; margin:0 0 40px; }
.bf .hero-actions { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }


/* ============ SEARCH BAR (floating glassmorphism overlay on hero) ============ */
.bf .search-wrap { position:relative; z-index:10; margin-top:-72px; margin-bottom:32px; }
.bf .search-inner { padding-block:0; }
.bf .search-bar {
  background: rgba(240, 248, 255, 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 18px 50px rgba(0, 34, 68, 0.18);
  border-radius: 24px;
  padding: 10px;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr auto;
  align-items: stretch;
  gap: 0;
}
.bf .search-seg { padding:14px 22px; position:relative; cursor:pointer; transition:background .15s ease; border-radius:14px; display:flex; flex-direction:column; gap:6px; justify-content:center; }
.bf .search-seg + .search-seg::before { content:''; position:absolute; left:0; top:14px; bottom:14px; width:1px; background:rgba(0,34,68,.18); }
.bf .search-seg:hover { background:rgba(255,255,255,.45); }
.bf .search-seg .lb { font-family:'Inter', sans-serif; font-size:10.5px; font-weight:600; letter-spacing:.16em; color:rgba(0,34,68,.7); text-transform:uppercase; display:inline-flex; align-items:center; gap:7px; }
.bf .search-seg .lb svg { color:var(--navy); flex-shrink:0; }
.bf .search-seg .vl { font-family:'Inter', sans-serif; font-size:15px; color:var(--navy); font-weight:500; }
.bf .search-seg .vl-input, .bf .search-seg .vl-select { font-family:'Inter', sans-serif; font-size:15px; color:var(--navy); font-weight:500; background:transparent; border:none; outline:none; padding:0; width:100%; min-width:0; cursor:pointer; }
.bf .search-seg .vl-input::placeholder { color:rgba(0,34,68,.55); }
.bf .search-seg .vl-select { appearance:none; padding-right:18px; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23002244' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat:no-repeat; background-position:right center; }
.bf .search-submit { background:#FF8200; color:#fff; border:none; border-radius:16px; padding:0 30px; cursor:pointer; font-family:'Inter', sans-serif; font-weight:600; font-size:13.5px; letter-spacing:.04em; text-transform:none; display:flex; align-items:center; justify-content:center; gap:10px; white-space:nowrap; transition:background .22s ease, transform .15s ease; }
.bf .search-submit:hover { background:#FF9420; }

/* Ligne secondaire sous la search bar : carte "Combiner" (gauche) + réassurance (droite) */
.bf .search-extras { display:flex; align-items:center; justify-content:space-between; gap:24px 32px; margin-top:18px; flex-wrap:wrap; }

/* Carte "Combiner plusieurs bateaux" — compacte et premium, ne vole pas la vedette à la search bar */
.bf .search-combine { display:inline-flex; align-items:center; gap:13px; background:rgba(255, 255, 255, 0.8); -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%); border:1px solid rgba(255, 255, 255, 0.7); border-radius:16px; padding:10px 16px; margin:0; cursor:pointer; box-shadow:0 8px 24px -10px rgba(0, 34, 68, 0.22); transition:box-shadow .18s ease, border-color .18s ease, transform .18s ease; }
.bf .search-combine:hover { box-shadow:0 12px 28px -10px rgba(0, 34, 68, 0.26); transform:translateY(-1px); }
.bf .sc-ico { flex-shrink:0; width:38px; height:38px; border-radius:11px; background:rgba(0,181,226,.12); display:inline-flex; align-items:center; justify-content:center; }
.bf .sc-ico svg { width:24px; height:24px; display:block; }
.bf .search-combine .sc-text { min-width:0; }
.bf .search-combine .sc-text strong { display:block; font-family:'Inter', sans-serif; font-weight:700; font-size:13px; color:var(--navy); letter-spacing:.01em; }
.bf .search-combine .sc-text span { display:block; font-size:11.5px; color:var(--body); margin-top:1px; line-height:1.3; }
.bf .search-combine .sc-switch { position:relative; width:38px; height:22px; flex-shrink:0; }
.bf .search-combine .sc-switch input { position:absolute; opacity:0; width:0; height:0; }
.bf .search-combine .sc-track { position:absolute; inset:0; background:rgba(0,34,68,.18); border-radius:999px; transition:background .2s; }
.bf .search-combine .sc-thumb { position:absolute; top:3px; left:3px; width:16px; height:16px; background:#fff; border-radius:50%; transition:transform .2s; box-shadow:0 1px 4px rgba(0,34,68,.2); }
.bf .search-combine.is-on .sc-track { background:var(--orange); }
.bf .search-combine.is-on .sc-thumb { transform:translateX(16px); }

/* Séparateur ondulé — transition douce zone recherche → catalogue */
.bf .zone-wave { width:100%; margin-top:16px; line-height:0; pointer-events:none; }
.bf .zone-wave svg { display:block; width:100%; height:28px; }

/* Capsule "Catalogue" — éditoriale, premium (override scopé du .eyebrow global) */
.bf #catalog .cat-eyebrow { display:inline-flex; align-items:center; gap:8px; background:rgba(0,181,226,.10); color:var(--navy); padding:7px 15px; border-radius:999px; letter-spacing:1.6px; }
.bf #catalog .cat-eyebrow svg { color:var(--teal); flex-shrink:0; }

/* Titre + sous-titre catalogue — orientés réservation, premium, lisibles desktop & mobile */
.bf #catalog .cat-title { max-width:560px; text-wrap:balance; }
.bf #catalog .cat-sub { max-width:540px; text-wrap:pretty; }

/* Desktop : on resserre l'espacement entre la search bar et le catalogue (mobile inchangé) */
@media (min-width: 861px) {
  .bf .search-wrap { margin-bottom:14px; }
  .bf #catalog { padding-top:26px; }
}

/* ============ CATALOG (filter pills + boats grid) ============ */
.bf .boat-cta { background:var(--navy); color:#fff; border:none; padding:10px 20px; border-radius:10px; font-family:'Inter', sans-serif; font-weight:600; font-size:13px; letter-spacing:.04em; text-transform:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:background .22s ease; }
.bf .boat-cta:hover { background:var(--orange); }
.bf .boat-cta svg { transition:transform .22s ease; }
.bf .boat-cta:hover svg { transform:translateX(2px); }

.bf .alerts-row button { background:#FF8200; color:#fff; border:none; padding:14px 22px; border-radius:10px; font-family:'Inter', sans-serif; font-weight:600; font-size:13.5px; letter-spacing:.04em; text-transform:none; cursor:pointer; transition:background .22s ease; }
.bf .alerts-row button:hover { background:#FF9420; }

.bf .catalog-filters { display:flex; gap:8px; margin-bottom:28px; flex-wrap:wrap; }
.bf .filter-pill { padding:10px 20px; border-radius:999px; font-weight:600; font-size:13.5px; color:var(--body); background:#fff; border:1px solid var(--hair); cursor:pointer; transition:all .12s; }
.bf .filter-pill:hover { border-color:var(--teal); color:var(--navy); }
.bf .filter-pill.active { background:var(--navy); color:#fff; border-color:var(--navy); }
.bf .boats-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }
.bf .boat { background:#fff; border-radius:18px; overflow:hidden; border:1px solid var(--hair); transition:all .22s; cursor:pointer; display:flex; flex-direction:column; }
.bf .boat:hover { transform:translateY(-4px); box-shadow:0 24px 48px -22px rgba(0,34,68,.28); border-color:var(--teal-soft); }
.bf .boat-img { aspect-ratio:5/4; position:relative; background:linear-gradient(135deg,#002244,#00B5E2); }
.bf .boat-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.bf .boat-type { position:absolute; top:14px; left:14px; background:rgba(255,255,255,.95); color:var(--navy); font-family:'Poppins', sans-serif; font-size:10.5px; font-weight:700; padding:5px 10px; border-radius:6px; letter-spacing:1.2px; }
.bf .boat-body { padding:18px 18px 16px; display:flex; flex-direction:column; flex:1; }
.bf .boat-name { font-family:'Poppins', sans-serif; font-size:16.5px; font-weight:700; color:var(--navy); margin-bottom:4px; line-height:1.3; min-height:42px; }
.bf .boat-loc { font-size:13px; color:var(--muted); display:inline-flex; align-items:center; gap:5px; margin-bottom:12px; }
.bf .boat-meta { display:flex; gap:14px; font-size:13px; color:var(--body); margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--hair); }
.bf .boat-meta span { display:inline-flex; align-items:center; gap:5px; }
.bf .boat-foot { display:flex; align-items:center; justify-content:space-between; margin-top:auto; }
.bf .boat-price { font-family:'Poppins', sans-serif; font-size:23px; font-weight:800; color:var(--navy); letter-spacing:-.5px; }
.bf .boat-price small { font-size:12px; font-weight:500; color:var(--muted); margin-left:2px; }

/* ============ WHY → EXPÉRIENCES (fond animé en boucle + galerie bento) ============ */
.bf .why { background:#fff; }

/* En-tête + fond animé éditorial */
.bf .wx-intro { position:relative; padding:18px 0 6px; margin-bottom:44px; overflow:hidden; }
.bf .wx-head { position:relative; z-index:2; max-width:760px; margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; }
.bf .wx-head .ws-eyebrow { margin-bottom:18px; }
.bf .wx-title { font-family:'Poppins', sans-serif; font-size:48px; font-weight:700; color:var(--navy); line-height:1.08; letter-spacing:-1.4px; margin:0 0 16px; text-wrap:balance; }
.bf .wx-sub { font-family:'Inter', sans-serif; font-size:18px; line-height:1.55; color:rgba(0,34,68,.72); max-width:620px; margin:0 0 14px; text-wrap:pretty; }
.bf .wx-note { font-family:'Inter', sans-serif; font-size:15px; line-height:1.6; color:rgba(0,34,68,.5); max-width:560px; margin:0; text-wrap:pretty; }

/* Fond animé : mots qui tournent en boucle, faibles, masqués sur les côtés (profondeur) */
.bf .wx-ambient {
  position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.bf .wx-amb-row { display:flex; width:max-content; white-space:nowrap; font-family:'Poppins', sans-serif; font-weight:700; line-height:1.15; will-change:transform; }
.bf .wx-amb-word { display:inline-flex; align-items:center; }
.bf .wx-amb-dot { margin:0 .35em; color:var(--teal); }
.bf .wx-amb-a { font-size:clamp(38px, 6.4vw, 78px); color:rgba(0,34,68,.055); animation:wx-amb-left 58s linear infinite; }
.bf .wx-amb-b { font-size:clamp(30px, 5vw, 60px); color:rgba(0,34,68,.04);  animation:wx-amb-right 72s linear infinite; }
.bf .wx-amb-c { font-size:clamp(34px, 5.6vw, 68px); color:rgba(0,34,68,.05);  animation:wx-amb-left 64s linear infinite; }
.bf .wx-amb-a .wx-amb-dot { color:rgba(0,181,226,.5); }
.bf .wx-amb-b .wx-amb-dot { color:rgba(255,130,0,.45); }
.bf .wx-amb-c .wx-amb-dot { color:rgba(0,181,226,.4); }
@keyframes wx-amb-left  { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes wx-amb-right { from { transform:translateX(-50%); } to { transform:translateX(0); } }
@media (prefers-reduced-motion: reduce) { .bf .wx-amb-row { animation:none !important; } }

/* Galerie bento — 1 grande tuile + 4 tuiles, layout asymétrique */
.bf .wx-bento {
  display:grid; gap:16px;
  grid-template-columns:repeat(4, 1fr);
  grid-template-rows:repeat(2, minmax(0, 210px));
  grid-template-areas:
    "a a b c"
    "a a d e";
}
.bf .wx-tile-1 { grid-area:a; } .bf .wx-tile-2 { grid-area:b; }
.bf .wx-tile-3 { grid-area:c; } .bf .wx-tile-4 { grid-area:d; }
.bf .wx-tile-5 { grid-area:e; }
.bf .wx-tile {
  position:relative; overflow:hidden; border-radius:22px; background:#0a1a2e;
  box-shadow:0 18px 50px -28px rgba(0,34,68,.5); cursor:default;
  transition:transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease, z-index 0s;
}
.bf .wx-tile-1 { border-radius:26px; }
.bf .wx-tile-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.01); transition:transform .6s cubic-bezier(.22,.61,.36,1); }
.bf .wx-tile-grade { position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,34,68,0) 34%, rgba(0,34,68,.30) 60%, rgba(0,17,40,.84) 100%); pointer-events:none; transition:opacity .4s ease; }
.bf .wx-tile-tag {
  position:absolute; top:14px; left:14px;
  display:inline-flex; align-items:center; padding:6px 12px; border-radius:999px;
  background:rgba(255,255,255,.16); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.28);
  font-family:'Poppins', sans-serif; font-size:10.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:#fff;
}
.bf .wx-tile-body { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:18px 18px 20px; }
.bf .wx-tile-body h3 { font-family:'Poppins', sans-serif; font-weight:700; color:#fff; line-height:1.14; letter-spacing:-.4px; margin:0; font-size:19px; }
.bf .wx-tile-body p { font-family:'Inter', sans-serif; font-size:13px; line-height:1.5; color:rgba(255,255,255,.86); margin:7px 0 0; max-height:0; opacity:0; overflow:hidden; transition:max-height .45s ease, opacity .35s ease, margin .45s ease; }
/* Grande tuile : titre plus fort + texte visible d'emblée */
.bf .wx-tile-1 .wx-tile-body { padding:26px 28px 28px; }
.bf .wx-tile-1 .wx-tile-body h3 { font-size:30px; letter-spacing:-.6px; }
.bf .wx-tile-1 .wx-tile-body p { font-size:15px; max-height:80px; opacity:1; margin-top:9px; max-width:440px; }
.bf .wx-tile-1 .wx-tile-tag { top:18px; left:18px; padding:7px 14px; font-size:11.5px; }
/* Hover desktop : mise en avant (zoom image + révélation texte + élévation) */
@media (hover: hover) and (min-width: 861px) {
  .bf .wx-tile:hover { transform:translateY(-4px) scale(1.02); box-shadow:0 32px 70px -28px rgba(0,34,68,.55); z-index:3; }
  .bf .wx-tile:hover .wx-tile-img { transform:scale(1.09); }
  .bf .wx-tile:hover .wx-tile-grade { opacity:1; }
  .bf .wx-tile:not(.wx-tile-1):hover .wx-tile-body p { max-height:80px; opacity:1; margin-top:7px; }
}
@media (prefers-reduced-motion: reduce) {
  .bf .wx-tile, .bf .wx-tile-img { transition:none; }
}

/* ============ HOW IT WORKS (editorial timeline) ============ */
/* ============ COMMENT ÇA MARCHE — section immersive lifestyle ============ */
/* Image plein cadre en fond (desktop/mobile via <picture>), panneau verre navy à droite */
.bf .hiw { position:relative; overflow:hidden; padding:0; min-height:560px; display:flex; }
.bf .hiw-bg { position:absolute; inset:0; z-index:0; }
.bf .hiw-bg picture { display:block; width:100%; height:100%; }
.bf .hiw-bg img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.bf .hiw-overlay { position:absolute; inset:0; z-index:1; background:linear-gradient(100deg, rgba(0,34,68,0) 0%, rgba(0,34,68,.10) 36%, rgba(0,34,68,.52) 64%, rgba(0,34,68,.80) 100%); }
.bf .hiw-inner { position:relative; z-index:2; width:100%; display:flex; justify-content:flex-end; align-items:center; padding-block:clamp(72px, 9vw, 120px); }
.bf .hiw-panel { width:min(100%, 480px); background:rgba(0,34,68,.42); backdrop-filter:blur(10px) saturate(130%); -webkit-backdrop-filter:blur(10px) saturate(130%); border:1px solid rgba(255,255,255,.16); border-radius:24px; padding:40px 38px; box-shadow:0 30px 70px -28px rgba(0,17,40,.6); }
.bf .hiw-eyebrow { color:#7FDCF3; }
.bf .hiw-title { font-family:'Poppins', sans-serif; font-size:40px; font-weight:700; line-height:1.1; letter-spacing:-1px; color:#fff; margin:10px 0 8px; }
.bf .hiw-sub { font-family:'Inter', sans-serif; font-size:16px; line-height:1.55; color:rgba(255,255,255,.82); margin:0 0 30px; }
.bf .hiw-steps { list-style:none; margin:0 0 32px; padding:0; display:flex; flex-direction:column; gap:22px; }
.bf .hiw-step { display:flex; align-items:flex-start; gap:16px; }
.bf .hiw-step-num { flex:0 0 auto; width:36px; height:36px; border-radius:50%; background:var(--teal); color:#fff; font-family:'Poppins', sans-serif; font-weight:700; font-size:16px; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 6px 16px -6px rgba(0,181,226,.7); }
.bf .hiw-step-txt h3 { font-family:'Poppins', sans-serif; font-size:18px; font-weight:600; color:#fff; margin:5px 0 5px; line-height:1.2; }
.bf .hiw-step-txt p { font-family:'Inter', sans-serif; font-size:14.5px; line-height:1.55; color:rgba(255,255,255,.78); margin:0; }
.bf .hiw-cta { display:inline-flex; align-items:center; gap:10px; }
.bf .hiw-cta svg { transition:transform .35s ease; }
.bf .hiw-cta:hover svg { transform:translateX(4px); }
/* Navigation du slider + CTA mobile — desktop : masqués (3 étapes visibles, CTA dans le panneau) */
.bf .hiw-nav { display:none; }
.bf .hiw-cta-mobile { display:none; }

/* ============ OFFER (Navy section) ============ */
.bf .offer { background:var(--navy); color:#fff; position:relative; overflow:hidden; }
.bf .offer::before { content:''; position:absolute; top:-100px; right:-100px; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle at center, rgba(255,130,0,.22), transparent 65%); pointer-events:none; }
.bf .offer::after { content:''; position:absolute; bottom:-120px; left:-120px; width:380px; height:380px; border-radius:50%; background:radial-gradient(circle at center, rgba(0,181,226,.18), transparent 65%); pointer-events:none; }
.bf .offer h2 { color:#fff; font-size:46px; line-height:1.05; font-weight:800; margin-bottom:18px; letter-spacing:-1.5px; }
.bf .offer .eyebrow { color:var(--teal); }
.bf .offer .lead { font-size:17px; line-height:1.6; color:rgba(255,255,255,.85); max-width:680px; margin-bottom:48px; }
.bf .offer-flow { display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; margin-bottom:36px; position:relative; z-index:1; }
.bf .offer-flow .step { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:26px 22px; position:relative; }
.bf .offer-flow .step .n { font-family:'Poppins', sans-serif; font-size:13px; font-weight:700; color:var(--teal); letter-spacing:.14em; margin-bottom:14px; }
.bf .offer-flow .step h4 { font-family:'Poppins', sans-serif; font-size:15.5px; font-weight:700; color:#fff; line-height:1.4; min-height:42px; }
.bf .offer-note { background:rgba(255,255,255,.06); border:1px solid rgba(255,130,0,.4); border-left:3px solid var(--orange); border-radius:12px; padding:18px 22px; display:flex; gap:14px; align-items:flex-start; max-width:760px; margin-bottom:32px; }
.bf .offer-note .ic { color:var(--orange); flex-shrink:0; margin-top:1px; }
.bf .offer-note p { font-size:14px; color:rgba(255,255,255,.92); line-height:1.55; }

/* ============ FAQ ============ */
.bf .faq { background:#fff; }
.bf .faq-head { text-align:center; max-width:620px; margin:0 auto 40px; }
.bf .faq-head h2 { font-size:42px; }
.bf .faq-list { max-width:880px; margin:0 auto; }
.bf .faq-item { border-top:1px solid var(--hair); padding:0; }
.bf .faq-item:last-child { border-bottom:1px solid var(--hair); }
.bf .faq-q { display:flex; align-items:center; justify-content:space-between; padding:26px 4px; cursor:pointer; gap:24px; }
.bf .faq-q h4 { font-family:'Poppins', sans-serif; font-size:17.5px; font-weight:600; color:var(--navy); line-height:1.4; }
.bf .faq-q .plus { width:32px; height:32px; border-radius:50%; background:var(--sea-mist); color:var(--navy); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .2s; }
.bf .faq-item.open .faq-q .plus { background:var(--orange); color:#fff; transform:rotate(45deg); }
.bf .faq-a { max-height:0; overflow:hidden; transition:max-height .3s ease, padding .3s ease; }
.bf .faq-item.open .faq-a { max-height:300px; padding:0 4px 24px; }
.bf .faq-a p { font-size:15px; color:var(--body); line-height:1.7; padding-right:48px; }
.bf .faq-foot { text-align:center; margin-top:36px; }

/* ============ EMAIL ALERTS ============ */
.bf .alerts { background:linear-gradient(135deg, var(--teal) 0%, #0091B5 100%); color:#fff; position:relative; overflow:hidden; }
.bf .alerts::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 80% 30%, rgba(255,255,255,.12), transparent 50%); }
.bf .alerts-inner { display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center; padding-block:64px; position:relative; }
.bf .alerts h3 { font-family:'Poppins', sans-serif; font-size:32px; line-height:1.2; font-weight:800; color:#fff; margin-bottom:14px; letter-spacing:-1px; }
.bf .alerts p.desc { font-size:15.5px; color:rgba(255,255,255,.92); line-height:1.6; max-width:480px; }
.bf .alerts-form { display:flex; flex-direction:column; gap:10px; }
.bf .alerts-row { display:flex; background:#fff; border-radius:12px; padding:5px; box-shadow:0 12px 28px -10px rgba(0,34,68,.25); }
.bf .alerts-row input { flex:1; background:transparent; border:none; outline:none; padding:14px 18px; font-size:15px; color:var(--navy); font-family:'Inter', sans-serif; }
.bf .alerts-row input::placeholder { color:var(--muted); }
.bf .alerts-note { font-size:12.5px; color:rgba(255,255,255,.78); }

/* ============ TIME SLOTS — éditorial image + texte ============ */
/* Fond dynamique selon le slide actif (matin/après-midi/coucher de soleil).
   On transitionne background-color (interpolable) plutôt qu'un dégradé (non animable → flash). */
.bf .time-slots-section { background:#fff; position:relative; overflow:hidden; transition:background-color 450ms ease; }
/* Matin — clair, frais, lumineux */
.bf .time-slots-section.is-morning { background-color:#F5FBFF; }
/* Après-midi — Sea Mist réchauffé d'une touche solaire très douce */
.bf .time-slots-section.is-afternoon { background-color:#FBF8F0; }
/* Coucher de soleil — bleu profond adouci, premium, texte toujours lisible */
.bf .time-slots-section.is-sunset { background-color:#E6ECF4; }
/* Séparateur très subtil en haut : fine ligne dégradée, rien de décoratif */
.bf .time-slots-section::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:min(100%, 1200px); height:1px; background:linear-gradient(to right, transparent, rgba(0,34,68,.10), transparent); }
.bf .ts-head { text-align:center; max-width:720px; margin:0 auto 48px; }
.bf .ts-head .eyebrow { color:var(--teal); }
.bf .ts-head h2 { font-size:42px; letter-spacing:-1.2px; margin-top:12px; }
.bf .ts-head p { font-family:'Inter', sans-serif; font-size:16.5px; line-height:1.55; color:var(--body); margin-top:14px; }

/* Layout éditorial 3 colonnes — reproduction fidèle de la référence
   col 1 : vignettes horizontales, alignées en bas à gauche (navigation)
   col 2 : grande image portrait centrée
   col 3 : texte (centré vertical) + flèches dessous */
.bf .ts-editorial { display:grid; grid-template-columns:auto minmax(0, 460px) minmax(240px, 1fr); gap:40px; align-items:center; justify-content:center; max-width:1120px; margin:0 auto; }

/* Grande image principale (portrait, crossfade) — colonne centrale */
.bf .ts-visual { position:relative; width:100%; aspect-ratio:5/6; border-radius:22px; overflow:hidden; box-shadow:0 30px 70px -28px rgba(0,34,68,.45); background:var(--sea-mist); }
.bf .ts-visual-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .6s cubic-bezier(.22,.61,.36,1); -webkit-user-drag:none; }
.bf .ts-visual-img.is-active { opacity:1; }

/* Vignettes — rangée horizontale, alignées en bas à gauche (col 1) */
.bf .ts-thumbs { display:flex; flex-direction:row; gap:12px; align-self:end; }
.bf .ts-thumb { width:80px; height:96px; flex:0 0 auto; padding:0; border:2px solid transparent; border-radius:12px; overflow:hidden; cursor:pointer; background:var(--sea-mist); opacity:.5; transition:opacity .28s ease, border-color .28s ease, transform .28s ease, box-shadow .28s ease; }
.bf .ts-thumb img { width:100%; height:100%; object-fit:cover; display:block; -webkit-user-drag:none; }
.bf .ts-thumb:hover { opacity:.85; transform:translateY(-1px); }
.bf .ts-thumb.is-active { opacity:1; border-color:var(--navy); box-shadow:0 12px 26px -12px rgba(0,34,68,.45); }

/* Colonne droite — texte centré verticalement + flèches dessous (col 3) */
.bf .ts-right { display:flex; flex-direction:column; justify-content:center; }
.bf .ts-content { max-width:380px; }
.bf .ts-content h3 { font-family:'Poppins', sans-serif; font-size:34px; font-weight:700; color:var(--navy); line-height:1.12; letter-spacing:-.8px; margin:0 0 10px; }
.bf .ts-content-hours { font-family:'Inter', sans-serif; font-size:15px; font-weight:600; color:var(--teal); margin-bottom:18px; }
.bf .ts-content p { font-family:'Inter', sans-serif; font-size:16.5px; line-height:1.65; color:var(--body); margin:0; }

/* Flèches de navigation — bas droite, sous le texte */
.bf .ts-arrows { display:flex; gap:12px; margin-top:32px; }
.bf .ts-arrow { width:52px; height:52px; border-radius:50%; background:#fff; border:1.5px solid var(--hair); color:var(--navy); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s ease; }
.bf .ts-arrow svg { width:20px; height:20px; }
.bf .ts-arrow:hover { border-color:var(--navy); transform:translateY(-2px); }
.bf .ts-arrow.is-primary { background:var(--navy); border-color:var(--navy); color:#fff; box-shadow:0 14px 30px -12px rgba(0,34,68,.5); }
.bf .ts-arrow.is-primary:hover { background:#003866; }

/* CTA + micro-lien "Journée entière" */
.bf .ts-cta-wrap { display:flex; flex-direction:column; align-items:center; gap:16px; margin-top:52px; }
.bf .ts-fullday-note { font-family:'Inter', sans-serif; font-size:13.5px; color:var(--body); }
.bf .ts-fullday-note a { color:var(--navy); font-weight:600; text-decoration:none; border-bottom:1px solid rgba(0,34,68,.25); transition:color .2s ease, border-color .2s ease; }
.bf .ts-fullday-note a:hover { color:var(--orange); border-color:var(--orange); }

/* ============ HOST SECTION (Vague 3 — Devenir hôte) ============ */
.bf .host { background:linear-gradient(135deg, #002244 0%, #003866 100%); color:#fff; position:relative; overflow:hidden; }
.bf .host::before { content:""; position:absolute; top:-120px; right:-120px; width:380px; height:380px; border-radius:50%; background:radial-gradient(circle, rgba(0,181,226,.18) 0%, rgba(0,181,226,0) 70%); pointer-events:none; }
.bf .host-inner { display:grid; grid-template-columns:1.1fr 1fr; gap:64px; align-items:center; padding-block:88px; position:relative; z-index:1; }
.bf .host-eyebrow { font-family:'Inter', sans-serif; font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:#00B5E2; }
.bf .host h2 { font-family:'Poppins', sans-serif; font-size:42px; font-weight:700; line-height:1.12; letter-spacing:-1.2px; color:#fff; margin:14px 0 16px; }
.bf .host h2 b { color:#FF8200; font-weight:700; }
.bf .host .host-lead { font-family:'Inter', sans-serif; font-size:17px; line-height:1.6; color:rgba(255,255,255,.82); margin:0 0 32px; max-width:520px; }
.bf .host-benefits { list-style:none; padding:0; margin:0 0 36px; display:flex; flex-direction:column; gap:14px; }
.bf .host-benefits li { display:flex; align-items:flex-start; gap:12px; font-family:'Inter', sans-serif; font-size:15px; line-height:1.5; color:rgba(255,255,255,.92); }
.bf .host-benefits li svg { color:#00B5E2; flex-shrink:0; margin-top:3px; }
.bf .host-cta { background:#FF8200; color:#fff; border:none; padding:16px 32px; border-radius:999px; font-family:'Inter', sans-serif; font-weight:600; font-size:14.5px; letter-spacing:.04em; cursor:pointer; display:inline-flex; align-items:center; gap:10px; box-shadow:0 14px 32px -10px rgba(255,130,0,.55); transition:all .22s ease; }
.bf .host-cta:hover { background:#FF9420; transform:translateY(-2px); box-shadow:0 18px 38px -10px rgba(255,130,0,.65); }
.bf .host-stats { display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; }
.bf .host-stat { background:rgba(255,255,255,.06); border:1px solid rgba(0,181,226,.22); border-radius:18px; padding:24px 22px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.bf .host-stat .ico { width:42px; height:42px; border-radius:12px; background:rgba(0,181,226,.16); color:#00B5E2; display:inline-flex; align-items:center; justify-content:center; margin-bottom:14px; }
.bf .host-stat h4 { font-family:'Poppins', sans-serif; font-size:17px; font-weight:600; color:#fff; margin:0 0 6px; line-height:1.25; }
.bf .host-stat p { font-family:'Inter', sans-serif; font-size:13.5px; line-height:1.5; color:rgba(255,255,255,.7); margin:0; }

/* ============ HERO PRICE + TRUST BAR (Vague 1) ============ */
.bf .hero-price { margin-top:20px; font-family:'Inter', sans-serif; font-size:13px; color:rgba(255,255,255,.78); letter-spacing:.02em; line-height:1.4; }
.bf .hero-price b { color:#fff; font-weight:600; font-size:14.5px; letter-spacing:.01em; }

.bf .trust-bar { display:flex; flex-wrap:wrap; gap:6px 0; justify-content:flex-end; align-items:center; padding:0; font-family:'Inter', sans-serif; font-size:13px; color:#002244; line-height:1.4; }
.bf .trust-bar-item { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; font-weight:500; padding:0 20px; position:relative; }
.bf .trust-bar-item:not(:last-child)::after { content:''; position:absolute; right:0; top:50%; transform:translateY(-50%); width:1px; height:15px; background:rgba(0,34,68,.16); }
.bf .trust-bar-item:last-child { padding-right:0; }
.bf .trust-bar-item svg { color:#00B5E2; flex-shrink:0; }
.bf .trust-bar-item .tb-short { display:none; }

/* ============ RESPONSIVE BREAKPOINTS (homepage-specific) ============ */
/* Large desktop wind-down */
@media (max-width: 1180px) {
  .bf .boats-grid { grid-template-columns:repeat(3, 1fr); gap:20px; }
  .bf .why-grid { grid-template-columns:repeat(2, 1fr); }
}

/* Time slots — tablet : on garde les 2 colonnes, gaps resserrés, bloc centré */
@media (max-width: 1024px) {
  .bf .ts-editorial { grid-template-columns:auto minmax(0, 380px) minmax(200px, 1fr); gap:28px; max-width:960px; }
  .bf .ts-content h3 { font-size:28px; }
  .bf .ts-head h2 { font-size:36px; }
}
/* Mobile : grande image au-dessus, texte, vignettes en ligne, flèches */
@media (max-width: 768px) {
  .bf .ts-editorial { display:flex; flex-direction:column; gap:20px; max-width:480px; align-items:stretch; }
  .bf .ts-right { display:contents; }
  .bf .ts-visual { order:1; width:100%; aspect-ratio:4/5; align-self:center; }
  .bf .ts-content { order:2; max-width:none; }
  .bf .ts-thumbs { order:3; align-self:center; justify-content:center; }
  .bf .ts-arrows { order:4; justify-content:center; margin-top:8px; }
}
@media (max-width: 500px) {
  .bf .ts-head h2 { font-size:26px; }
  .bf .ts-content h3 { font-size:24px; }
  .bf .ts-content p { font-size:15px; }
  .bf .ts-thumb { width:72px; height:88px; }
  .bf .ts-thumbs { gap:10px; }
  .bf .ts-arrow { width:48px; height:48px; }
}

/* Tablet (landscape) — 1024px */
@media (max-width: 1024px) {
  .bf .hero h1 { font-size:62px; letter-spacing:-1.8px; }
  .bf .hero .lead { font-size:17px; }
  .bf .hero-inner { padding-block:90px 130px; }

  .bf .offer h2 { font-size:38px; letter-spacing:-1.2px; }
  .bf .alerts h3 { font-size:28px; }

  /* Expériences — tablette : bento resserré */
  .bf .wx-title { font-size:38px; letter-spacing:-1px; }
  .bf .wx-bento { grid-template-rows:repeat(2, minmax(0, 168px)); gap:13px; }
  .bf .wx-tile-1 .wx-tile-body h3 { font-size:25px; }
  .bf .wx-tile-1 .wx-tile-body p { font-size:14px; }
  .bf .wx-tile-body h3 { font-size:17px; }

  /* Glass search bar — keep horizontal but tighter */
  .bf .search-wrap { margin-top:-56px; margin-bottom:28px; }
  .bf .search-bar { grid-template-columns:1.2fr 1fr 1fr 1fr auto; padding:8px; }
  .bf .search-seg { padding:12px 16px; }
  .bf .search-seg .vl { font-size:14px; }

  /* Grids — collapse to 2 cols at tablet */
  .bf .boats-grid { grid-template-columns:repeat(2, 1fr); gap:20px; }
  .bf .hiw-title { font-size:34px; }
  .bf .hiw-panel { width:min(100%, 440px); padding:36px 32px; }
  .bf .offer-flow { grid-template-columns:repeat(2, 1fr); gap:14px; }

  /* Alerts — stack at tablet for breathing */
  .bf .alerts-inner { grid-template-columns:1fr; gap:24px; padding-block:56px; }
}

/* Tablet (portrait) — 900px */
@media (max-width: 900px) {
  .bf .hero h1 { font-size:54px; letter-spacing:-1.5px; }
  .bf .why-grid { grid-template-columns:repeat(2, 1fr); gap:14px; }
}

/* Mobile — 860px */
@media (max-width: 860px) {
  /* Hero — shorter, smaller type, both CTAs visible */
  .bf .hero { min-height:auto; }
  .bf .hero-inner { padding-block:84px 72px; min-height:auto; }
  .bf .hero h1 { font-size:42px; letter-spacing:-1.2px; line-height:1.05; margin-bottom:20px; }
  .bf .hero .lead { font-size:15.5px; margin-bottom:28px; line-height:1.55; }
  .bf .hero-actions { width:100%; flex-direction:column; gap:12px; align-items:stretch; }
  .bf .hero-cta, .bf .hero-cta-secondary { width:100%; min-width:0; height:52px; padding:14px 22px; font-size:15px; }
  .bf .hero-bg::after { background:linear-gradient(180deg, rgba(0,34,68,.82) 0%, rgba(0,34,68,.62) 50%, rgba(0,34,68,.92) 100%); }

  /* Glass search bar — vertical stack on mobile, stays in flow */
  .bf .search-wrap { margin-top:-36px; margin-bottom:24px; }
  .bf .search-bar { grid-template-columns:1fr; gap:4px; padding:8px; border-radius:20px; }
  .bf .search-seg { padding:14px 16px; }
  .bf .search-seg + .search-seg::before { left:14px; right:14px; top:0; bottom:auto; width:auto; height:1px; background:rgba(0,34,68,.14); }
  .bf .search-submit { padding:14px 22px; justify-content:center; margin-top:6px; height:48px; border-radius:14px; }
  .bf .search-extras { flex-direction:column; align-items:stretch; gap:14px; }
  .bf .search-combine { display:flex; width:100%; box-sizing:border-box; }
  .bf .search-combine .sc-text strong { font-size:12.5px; }
  .bf .search-combine .sc-text span { font-size:11px; }
  .bf .trust-bar { justify-content:center; gap:8px 16px; }
  .bf .trust-bar-item { padding:0; }
  .bf .trust-bar-item:not(:last-child)::after { display:none; }

  /* Catalogue — single column, tighter cards */
  .bf .boats-grid { grid-template-columns:1fr; gap:16px; }
  .bf .boat-img { aspect-ratio:16/10; }
  .bf .boat-name { min-height:auto; }
  .bf .catalog-filters { overflow-x:auto; flex-wrap:nowrap; padding-bottom:6px; -webkit-overflow-scrolling:touch; margin-left:calc(-1 * var(--container-pad)); margin-right:calc(-1 * var(--container-pad)); padding-left:var(--container-pad); padding-right:var(--container-pad); }
  .bf .filter-pill { flex-shrink:0; padding:10px 16px; font-size:13px; min-height:40px; }

  /* Expériences — mobile : en-tête resserré + galerie en carousel scrollable */
  .bf .wx-intro { padding:8px 0 4px; margin-bottom:28px; }
  .bf .wx-title { font-size:30px; letter-spacing:-.8px; }
  .bf .wx-sub { font-size:15.5px; }
  .bf .wx-note { font-size:14px; }

  /* La grille bento devient un carousel horizontal scroll-snap (pas d'overflow page) */
  .bf .wx-bento {
    display:flex; gap:14px;
    grid-template-columns:none; grid-template-rows:none; grid-template-areas:none;
    overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    padding-bottom:8px;
    margin-left:calc(-1 * var(--container-pad)); margin-right:calc(-1 * var(--container-pad));
    padding-left:var(--container-pad); padding-right:var(--container-pad);
    scrollbar-width:none;
  }
  .bf .wx-bento::-webkit-scrollbar { display:none; }
  .bf .wx-tile, .bf .wx-tile-1 { grid-area:auto; flex:0 0 78%; max-width:330px; aspect-ratio:4/5; scroll-snap-align:center; border-radius:22px; }
  .bf .wx-tile-body, .bf .wx-tile-1 .wx-tile-body { padding:18px 18px 20px; }
  .bf .wx-tile-body h3, .bf .wx-tile-1 .wx-tile-body h3 { font-size:21px; letter-spacing:-.3px; }
  /* Sur mobile, le texte de chaque tuile est visible (pas de hover) */
  .bf .wx-tile-body p, .bf .wx-tile-1 .wx-tile-body p { font-size:13.5px; max-height:90px; opacity:1; margin-top:7px; max-width:none; }
  .bf .wx-tile-tag, .bf .wx-tile-1 .wx-tile-tag { top:14px; left:14px; font-size:10.5px; padding:6px 12px; }

  /* Comment ça marche — mobile : image portrait + panneau pleine largeur */
  .bf .hiw-overlay { background:linear-gradient(180deg, rgba(0,34,68,.30) 0%, rgba(0,34,68,.48) 45%, rgba(0,34,68,.82) 100%); }
  .bf .hiw-inner { justify-content:center; padding-block:clamp(56px, 12vw, 80px); }
  .bf .hiw-panel { width:100%; padding:30px 22px; border-radius:20px; }
  .bf .hiw-title { font-size:30px; }
  .bf .hiw-step-num { width:32px; height:32px; font-size:15px; }

  /* Offer */
  .bf .offer h2 { font-size:30px; letter-spacing:-.8px; }
  .bf .offer .lead { font-size:15.5px; margin-bottom:28px; }
  .bf .offer-flow { grid-template-columns:1fr 1fr; gap:12px; }
  .bf .offer-flow .step { padding:20px 18px; }
  .bf .offer-flow .step h4 { font-size:14.5px; min-height:auto; }
  .bf .offer-cta { width:100%; justify-content:center; padding:15px 24px; font-size:15px; height:52px; }

  /* FAQ */
  .bf .faq-q { padding:18px 0; gap:14px; }
  .bf .faq-q h4 { font-size:15.5px; }
  .bf .faq-a p { font-size:14.5px; padding-right:0; }

  /* Alerts — stacked, comfortable */
  .bf .alerts-inner { grid-template-columns:1fr; gap:20px; padding-block:44px; }
  .bf .alerts h3 { font-size:26px; }
  .bf .alerts p.desc { font-size:14.5px; }
  .bf .alerts-row { flex-direction:column; gap:6px; padding:6px; }
  .bf .alerts-row input { padding:14px 16px; }
  .bf .alerts-row button { padding:14px 18px; height:48px; }
}

/* Small mobile — 500px */
@media (max-width: 500px) {
  .bf .hero h1 { font-size:34px; letter-spacing:-1px; }
  .bf .hero .lead { font-size:15px; }
  .bf .hero-inner { padding-block:96px 72px; }
  .bf .search-wrap { margin-top:-24px; }
  .bf .offer h2 { font-size:26px; }
  .bf .offer-flow { grid-template-columns:1fr; }
  .bf .offer-flow .step h4 { font-size:15px; min-height:auto; }
  .bf .alerts h3 { font-size:22px; line-height:1.25; }
  .bf .boat-name { font-size:15.5px; }
  .bf .boat-price { font-size:21px; }
}

/* Host — responsive */
@media (max-width: 960px) {
  .bf .host-inner { grid-template-columns:1fr; gap:48px; padding-block:72px; }
  .bf .host h2 { font-size:34px; }
  .bf .host-stats { grid-template-columns:repeat(2, 1fr); gap:16px; }
}
@media (max-width: 768px) {
  .bf .host-inner { padding-block:56px; gap:36px; }
  .bf .host h2 { font-size:28px; }
  .bf .host .host-lead { font-size:15.5px; margin-bottom:24px; }
  .bf .host-benefits li { font-size:14.5px; }
  .bf .host-cta { width:100%; justify-content:center; padding:15px 22px; }
  .bf .host-stat { padding:20px 18px; }
  .bf .host-stat h4 { font-size:15.5px; }
  .bf .host-stat p { font-size:13px; }
}
@media (max-width: 480px) {
  .bf .host h2 { font-size:25px; letter-spacing:-.5px; }
  .bf .host-stat { padding:18px 16px; }
  .bf .host-stats { gap:14px; }
}

/* Hero price + trust bar — responsive */
@media (max-width: 768px) {
  .bf .hero-price { font-size:12.5px; margin-top:16px; text-align:center; }
  .bf .hero-price b { font-size:13.5px; }
  .bf .trust-bar { gap:8px 18px; padding:14px 12px 0; font-size:12px; }
  .bf .trust-bar-item { gap:6px; }
}
@media (max-width: 480px) {
  .bf .trust-bar { gap:8px 14px; font-size:11.5px; padding:12px 8px 0; }
  .bf .trust-bar-item { gap:5px; }
  .bf .trust-bar-item svg { width:12px; height:12px; }
  .bf .trust-bar-item .tb-full { display:none; }
  .bf .trust-bar-item .tb-short { display:inline; }
}

/* Extra-small — 360px (older phones) */
@media (max-width: 360px) {
  .bf .hero h1 { font-size:30px; }
  .bf .hero-price { font-size:12px; margin-top:14px; }
  .bf .trust-bar { font-size:11px; gap:6px 10px; }
  .bf .host h2 { font-size:22px; letter-spacing:-.3px; }
  .bf .host-stats { grid-template-columns:1fr; gap:10px; }
  .bf .host-stat { padding:16px 14px; }
}

/* ============ COMMENT ÇA MARCHE — slider mobile (1 étape à la fois) ============ */
/* Placé en fin de feuille pour primer sur le bloc 860px à ≤768px (où l'image portrait s'affiche).
   Le desktop n'est jamais touché : 3 étapes empilées, CTA dans le panneau, nav masquée.
   Mobile : panneau compact en haut, personnage visible au milieu, CTA seul en bas. */
@media (max-width: 768px) {
  /* Pleine hauteur : on répartit panneau (haut) et CTA (bas) */
  .bf .hiw { min-height:86vh; }
  /* Cadrage biaisé vers le haut de l'image : dégage le haut du corps du personnage sous le panneau */
  .bf .hiw-bg img { object-position:center 25%; }
  .bf .hiw-overlay { background:linear-gradient(180deg, rgba(0,34,68,.30) 0%, rgba(0,34,68,.06) 28%, rgba(0,34,68,0) 52%, rgba(0,34,68,.12) 82%, rgba(0,34,68,.34) 100%); }
  .bf .hiw-inner { flex-direction:column; justify-content:space-between; align-items:center; padding-block:28px 46px; }

  /* Panneau compact : seulement label + titre + sous-titre + slide + nav */
  .bf .hiw-panel { width:100%; max-width:360px; background:rgba(0,34,68,.38); backdrop-filter:blur(9px) saturate(130%); -webkit-backdrop-filter:blur(9px) saturate(130%); border:1px solid rgba(255,255,255,.16); border-radius:18px; padding:18px; box-shadow:0 18px 44px -22px rgba(0,17,40,.55); }
  .bf .hiw-title { font-size:25px; margin:8px 0 6px; }
  .bf .hiw-sub { font-size:13.5px; line-height:1.45; margin-bottom:14px; }

  /* Slider : une seule carte visible à la fois */
  .bf .hiw-steps { margin:0 0 12px; min-height:96px; }
  .bf .hiw-step { display:none; }
  .bf .hiw-step.is-active { display:flex; animation:hiwFade .35s ease; }
  .bf .hiw-step-num { width:28px; height:28px; font-size:13.5px; }
  .bf .hiw-step-txt h3 { font-size:16.5px; }
  .bf .hiw-step-txt p { font-size:13.5px; line-height:1.5; }

  /* Navigation : dots à gauche, flèches à droite (dernier élément du panneau) */
  .bf .hiw-nav { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0; }
  .bf .hiw-dots { display:flex; gap:8px; align-items:center; }
  .bf .hiw-dot { width:8px; height:8px; border-radius:50%; border:0; padding:0; background:rgba(255,255,255,.35); cursor:pointer; transition:background .2s ease, transform .2s ease; }
  .bf .hiw-dot.is-active { background:#fff; transform:scale(1.25); }
  .bf .hiw-arrows { display:flex; gap:8px; }
  .bf .hiw-arrow { width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.30); color:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s ease; }
  .bf .hiw-arrow:hover { background:rgba(255,255,255,.22); }
  .bf .hiw-arrow svg { width:17px; height:17px; }

  /* CTA : retiré du panneau, affiché seul en bas — compact, pill, élégant */
  .bf .hiw-panel .hiw-cta { display:none; }
  .bf .hiw-cta-mobile { display:inline-flex; align-items:center; justify-content:center; gap:9px; width:auto; max-width:300px; padding:12px 24px; font-size:14px; line-height:1; border-radius:999px; margin-top:8px; }
}
@keyframes hiwFade { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
`;

  // ============ WHY → EXPÉRIENCES — fond animé en boucle + galerie bento ============
  function WhyExperience() {
    // 3 rangées de mots qui tournent en boucle (vitesses/sens variés → profondeur)
    const ambientRows = [
      { cls: "wx-amb-a", words: EXP_TAGS },
      { cls: "wx-amb-b", words: [...EXP_TAGS].reverse() },
      { cls: "wx-amb-c", words: [...EXP_TAGS.slice(4), ...EXP_TAGS.slice(0, 4)] }];

    return (
      <React.Fragment>
        {/* En-tête + fond animé éditorial (mots en boucle, subtil, masqué sur les côtés) */}
        <div className="wx-intro">
          <div className="wx-ambient" aria-hidden="true">
            {ambientRows.map((row) =>
              <div className={`wx-amb-row ${row.cls}`} key={row.cls}>
                {[...row.words, ...row.words].map((w, i) =>
                  <span className="wx-amb-word" key={i}>{w}<span className="wx-amb-dot">•</span></span>
                )}
              </div>
            )}
          </div>
          <div className="wx-head">
            <span className="eyebrow ws-eyebrow">Pourquoi BoatsFun</span>
            <h2 className="wx-title">Des sorties pensées pour chaque moment</h2>
            <p className="wx-sub">Famille, amis, coucher de soleil ou célébration privée : trouvez l'expérience qui correspond à votre journée.</p>
            <p className="wx-note">BoatsFun vous aide à choisir le bon bateau, la bonne ambiance et le bon moment pour profiter de l'eau simplement.</p>
          </div>
        </div>

        {/* Galerie bento — plusieurs visuels visibles, layout asymétrique, hover = mise en avant */}
        <div className="wx-bento">
          {EXP_SLIDES.map((s, i) =>
            <article className={`wx-tile wx-tile-${i + 1}`} key={i}>
              <img className="wx-tile-img" src={s.img} alt={s.title} loading="lazy" draggable="false" />
              <div className="wx-tile-grade" aria-hidden="true"></div>
              <span className="wx-tile-tag">{s.tag}</span>
              <div className="wx-tile-body">
                <h3>{s.title}</h3>
                <p>{s.desc}</p>
              </div>
            </article>
          )}
        </div>
      </React.Fragment>);
  }

  // ============ TIME SLOTS — carousel éditorial 3 colonnes (pas d'autoplay) ============
  // vignettes images à gauche | grande image au centre | texte à droite
  function TimeSlotsCarousel({ current, setCurrent }) {
    const total = TIME_SLOTS.length;
    const goTo = (i) => setCurrent(((i % total) + total) % total);
    const go = (d) => setCurrent((c) => ((c + d) % total + total) % total);
    const slot = TIME_SLOTS[current];

    const ChevronL = () => (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><polyline points="15 18 9 12 15 6" /></svg>);
    const ChevronR = () => (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><polyline points="9 6 15 12 9 18" /></svg>);

    return (
      <div className="ts-editorial">
        {/* COL 1 — vignettes horizontales, bas gauche (navigation) */}
        <div className="ts-thumbs" role="tablist" aria-label="Choisir un moment de la journée">
          {TIME_SLOTS.map((s, i) => (
            <button
              key={s.id}
              type="button"
              className={`ts-thumb ${current === i ? "is-active" : ""}`}
              onClick={() => goTo(i)}
              role="tab"
              aria-selected={current === i}
              aria-label={`${s.title} — ${s.hours}`}>
              <img src={s.img} alt={s.title} loading="lazy" draggable="false" />
            </button>
          ))}
        </div>

        {/* COL 2 — grande image portrait centrée (crossfade) */}
        <div className="ts-visual">
          {TIME_SLOTS.map((s, i) => (
            <img
              key={s.id}
              className={`ts-visual-img ${current === i ? "is-active" : ""}`}
              src={s.img}
              alt={s.title}
              loading="lazy"
              draggable="false"
              aria-hidden={current !== i} />
          ))}
        </div>

        {/* COL 3 — texte centré verticalement + flèches dessous */}
        <div className="ts-right">
          <div className="ts-content">
            <h3>{slot.title}</h3>
            <div className="ts-content-hours">{slot.hours}</div>
            <p>{slot.desc}</p>
          </div>

          <div className="ts-arrows">
            <button type="button" className="ts-arrow" onClick={() => go(-1)} aria-label="Moment précédent"><ChevronL /></button>
            <button type="button" className="ts-arrow is-primary" onClick={() => go(1)} aria-label="Moment suivant"><ChevronR /></button>
          </div>
        </div>
      </div>);
  }

  // ============ COMPONENT ============
  function Homepage() {
    const [filter, setFilter] = React.useState("Tous");
    const [openFaq, setOpenFaq] = React.useState(0);
    // Slide actif du carousel "Plages horaires" — remonté ici pour piloter le fond de la section
    const [tsCurrent, setTsCurrent] = React.useState(0);
    // Slider mobile "Comment ça marche" (1 étape à la fois — desktop reste 3 visibles)
    const [hiwStep, setHiwStep] = React.useState(0);
    const hiwGo = (d) => setHiwStep((s) => (s + d + HOW.length) % HOW.length);
    const filters = ["Tous", "Ponton", "Yacht", "Cruiser", "Speedboat"];
    const visibleBoats = (filter === "Tous" ? BOATS_MTL : BOATS_MTL.filter((b) => b.type === filter)).slice(0, 6);

    // Search bar (home) — état + redirection vers /bateaux
    const homeRegions = React.useMemo(
      () => (window.BFBoats && window.BFBoats.getRegions ? window.BFBoats.getRegions() : []),
      []
    );
    const homeSlots = (window.BFBoats && window.BFBoats.TIME_SLOTS) || ["Matin", "Après-midi", "Soir", "Journée entière"];
    const [hRegion, setHRegion]     = React.useState("");
    const [hCap, setHCap]           = React.useState("");
    const [hDate, setHDate]         = React.useState("");
    const [hSlot, setHSlot]         = React.useState("");
    const [hCombine, setHCombine]   = React.useState(false);

    const submitSearch = (e) => {
      if (e && e.preventDefault) e.preventDefault();
      const params = new URLSearchParams();
      if (hRegion)  params.set("region", hRegion);
      if (hCap)     params.set("cap", hCap);
      if (hDate)    params.set("date", hDate);
      if (hSlot)    params.set("slot", hSlot);
      if (hCombine) params.set("combine", "1");
      const qs = params.toString();
      window.BF.nav(qs ? `/bateaux?${qs}` : "/bateaux");
    };

    return (
      <div className="bf" data-screen-label="BoatsFun Homepage">
        <style>{styles}</style>

        {/* ============ HEADER (partagé) ============ */}
        <window.BFHeader />

        {/* ============ HERO ============ */}
        <section className="hero">
          <div className="hero-bg">
            {/* HERO IMAGE — standard <img>, replace src to swap */}
            <img src="https://images.unsplash.com/photo-1567899378494-47b22a2ae96a?w=1800&q=80&auto=format&fit=crop" alt="Hero — bateau sur l'eau" />
          </div>
          <div className="container hero-inner">
            <div className="hero-content">
              <h1>Réservez un bateau à Montréal.<br />Ou faites une offre au propriétaire.</h1>
              <p className="lead" style={{ color: "rgb(255, 255, 255)" }}>Réservez directement ou laissez les propriétaires venir à vous. Paiement sécurisé, dépôt 100 % remboursable.</p>
              <div className="hero-actions">
                <a href="/bateaux" className="hero-cta" style={{ fontFamily: "Inter" }}>Voir les bateaux disponibles</a>
                <a href="/faire-une-offre" className="hero-cta-secondary">Faire une offre</a>
              </div>
              <div className="hero-price">À partir de <b>150 $ / heure</b></div>
            </div>
          </div>
        </section>

        {/* ============ SEARCH BAR (glassmorphism overlay on hero) ============ */}
        <div className="search-wrap">
          <div className="container search-inner">
            <form className="search-bar" onSubmit={submitSearch}>
              <div className="search-seg">
                <div className="lb"><I.pin width="13" /> Région</div>
                <select className="vl-select" value={hRegion} onChange={(e) => setHRegion(e.target.value)} aria-label="Région">
                  <option value="">Toutes les régions</option>
                  {homeRegions.map((r) => <option key={r} value={r}>{r}</option>)}
                </select>
              </div>
              <div className="search-seg">
                <div className="lb"><I.users width="13" /> Capacité</div>
                <select className="vl-select" value={hCap} onChange={(e) => setHCap(e.target.value)} aria-label="Capacité">
                  <option value="">Toutes</option>
                  <option value="1-4">1-4 personnes</option>
                  <option value="5-8">5-8 personnes</option>
                  <option value="9-12">9-12 personnes</option>
                  <option value="13+">13+ personnes</option>
                </select>
              </div>
              <div className="search-seg">
                <div className="lb"><I.cal width="13" /> Date</div>
                <input className="vl-input" type="date" value={hDate} onChange={(e) => setHDate(e.target.value)} aria-label="Date" />
              </div>
              <div className="search-seg">
                <div className="lb"><I.clock width="13" /> Plage horaire</div>
                <select className="vl-select" value={hSlot} onChange={(e) => setHSlot(e.target.value)} aria-label="Plage horaire">
                  <option value="">Toutes</option>
                  <option value="Matin">Matin</option>
                  <option value="Après-midi">Après-midi</option>
                  <option value="Soir">Soir</option>
                  <option value="Journée entière">Journée entière</option>
                </select>
              </div>
              <button type="submit" className="search-submit"><I.search width="15" /> Rechercher</button>
            </form>
            {/* Ligne secondaire : carte "Combiner" à gauche + réassurance à droite */}
            <div className="search-extras">
              <label className={`search-combine ${hCombine ? "is-on" : ""}`}>
                <span className="sc-ico" aria-hidden="true">
                  <svg viewBox="0 0 32 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                    {/* bateau arrière (décalé, teal) */}
                    <path d="M14 8h15l-2.4 4.4a1.8 1.8 0 0 1-1.58.95h-7.04a1.8 1.8 0 0 1-1.62-1.02L14 8Z" fill="#00B5E2" opacity="0.5" />
                    <path d="M21.3 7.4V3l5 4.4" stroke="#00B5E2" strokeWidth="1.4" strokeLinejoin="round" opacity="0.5" />
                    {/* bateau avant (navy) */}
                    <path d="M3 11h16l-2.6 4.8a2 2 0 0 1-1.74 1.02H7.34a2 2 0 0 1-1.78-1.08L3 11Z" fill="#002244" />
                    <path d="M11 10.4V5.6l5.4 4.8" stroke="#002244" strokeWidth="1.5" strokeLinejoin="round" />
                  </svg>
                </span>
                <div className="sc-text">
                  <strong>Combiner plusieurs bateaux</strong>
                  <span>Idéal pour les groupes qui sortent ensemble.</span>
                </div>
                <span className="sc-switch">
                  <input type="checkbox" checked={hCombine} onChange={(e) => setHCombine(e.target.checked)} />
                  <span className="sc-track"></span>
                  <span className="sc-thumb"></span>
                </span>
              </label>
              <div className="trust-bar" role="list" aria-label="Garanties BoatsFun">
                <span className="trust-bar-item" role="listitem"><I.shield width="14" /> Paiement sécurisé</span>
                <span className="trust-bar-item" role="listitem"><I.refund width="14" /> <span className="tb-full">Dépôt 100 % remboursable</span><span className="tb-short">Dépôt remboursable</span></span>
                <span className="trust-bar-item" role="listitem"><I.check width="14" /> Bateaux vérifiés</span>
                <span className="trust-bar-item" role="listitem"><I.cal width="14" /> Annulation flexible</span>
              </div>
            </div>
          </div>
        </div>

        {/* ============ SÉPARATEUR ONDULÉ — transition douce vers le catalogue ============ */}
        <div className="zone-wave" aria-hidden="true">
          <svg viewBox="0 0 1440 30" preserveAspectRatio="none" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0 15 C 120 3, 240 3, 360 15 S 600 27, 720 15 S 960 3, 1080 15 S 1320 27, 1440 15" stroke="rgba(0,34,68,0.10)" strokeWidth="1.5" />
            <path d="M0 21 C 120 9, 240 9, 360 21 S 600 33, 720 21 S 960 9, 1080 21 S 1320 33, 1440 21" stroke="rgba(0,181,226,0.14)" strokeWidth="1.5" />
          </svg>
        </div>

        {/* ============ POPULAR BOATS ============ */}
        <section className="s" id="catalog" style={{ fontSize: "17px" }}>
          <div className="container">
            <div className="s-head">
              <div>
                <div className="eyebrow cat-eyebrow"><I.anchor width="13" /> Catalogue</div>
                <h2 className="cat-title" style={{ marginTop: 14 }}>Découvrez les bateaux disponibles près de vous</h2>
                <p className="sub cat-sub" style={{ fontSize: "18px" }}>Comparez les options, choisissez votre date et envoyez votre demande en quelques minutes.</p>
              </div>
              <a className="s-link" href="/bateaux">Voir tout le catalogue <I.arrowR width="14" /></a>
            </div>
            <div className="catalog-filters">
              {filters.map((f) =>
              <button
                key={f}
                className={`filter-pill ${f === filter ? "active" : ""}`}
                onClick={() => setFilter(f)}>
                {f}</button>
              )}
            </div>
            <div className="boats-grid">
              {visibleBoats.map((b, i) =>
              <div className="boat" key={i}>
                  <div className="boat-img">
                    <img src={b.img} alt={b.name} loading="lazy" />
                    <span className="boat-type">{b.type.toUpperCase()}</span>
                  </div>
                  <div className="boat-body">
                    <div className="boat-name">{b.name}</div>
                    <div className="boat-loc"><I.pin width="11" /> {b.loc}</div>
                    <div className="boat-meta">
                      <span><I.users width="13" /> Jusqu'à {b.pers} pers.</span>
                    </div>
                    <div className="boat-foot">
                      <div className="boat-price">{window.BFBoats.startingPriceLabel(b.lowestPricePerHour)}</div>
                      <a href={`/bateau?id=${b.slug}`} className="boat-cta">Voir <I.arrowR width="13" /></a>
                    </div>
                  </div>
                </div>
              )}
            </div>
          </div>
        </section>

        {/* ============ TIME SLOTS — 3D curve carousel ============ */}
        <section className={`s time-slots-section is-${TIME_SLOTS[tsCurrent].theme}`} id="time-slots">
          <div className="container">
            <div className="ts-head">
              <div className="eyebrow">Plages horaires</div>
              <h2>Choisissez votre moment parfait</h2>
              <p>Chaque plage horaire offre une ambiance différente : sortie calme le matin, après-midi au soleil ou coucher de soleil sur l'eau.</p>
            </div>
            <TimeSlotsCarousel current={tsCurrent} setCurrent={setTsCurrent} />
            <div className="ts-cta-wrap">
              <a href="/bateaux" className="offer-cta"><I.tag width="16" /> Trouver ma sortie idéale</a>
              <p className="ts-fullday-note">Envie de plus ? Réservez la <a href="/bateaux">journée entière</a>, du matin au coucher du soleil.</p>
            </div>
          </div>
        </section>

        {/* ============ COMMENT ÇA MARCHE — section immersive lifestyle ============ */}
        <section className="s hiw" id="how">
          <div className="hiw-bg" aria-hidden="true">
            <picture>
              <source media="(max-width: 768px)" srcSet="assets/sections/how-it-works/how-it-works-mobile.png" />
              <img src="assets/sections/how-it-works/how-it-works-desktop.png" alt="" loading="lazy" draggable="false" />
            </picture>
          </div>
          <div className="hiw-overlay" aria-hidden="true"></div>
          <div className="container hiw-inner">
            <div className="hiw-panel">
              <div className="eyebrow hiw-eyebrow">En 3 étapes</div>
              <h2 className="hiw-title">Comment ça marche</h2>
              <p className="hiw-sub">Réservez votre sortie en quelques étapes simples.</p>
              <ol className="hiw-steps">
                {HOW.map((s, i) =>
                <li className={`hiw-step ${i === hiwStep ? "is-active" : ""}`} key={s.n}>
                    <span className="hiw-step-num" aria-hidden="true">{s.n}</span>
                    <div className="hiw-step-txt">
                      <h3>{s.title}</h3>
                      <p>{s.desc}</p>
                    </div>
                  </li>
                )}
              </ol>

              {/* Navigation — visible sur mobile uniquement (slider 1 étape à la fois) */}
              <div className="hiw-nav">
                <div className="hiw-dots" role="tablist" aria-label="Étapes">
                  {HOW.map((s, i) =>
                  <button
                    key={s.n}
                    type="button"
                    className={`hiw-dot ${i === hiwStep ? "is-active" : ""}`}
                    onClick={() => setHiwStep(i)}
                    role="tab"
                    aria-selected={i === hiwStep}
                    aria-label={`Étape ${i + 1} : ${s.title}`} />
                  )}
                </div>
                <div className="hiw-arrows">
                  <button type="button" className="hiw-arrow" onClick={() => hiwGo(-1)} aria-label="Étape précédente">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><polyline points="15 18 9 12 15 6" /></svg>
                  </button>
                  <button type="button" className="hiw-arrow" onClick={() => hiwGo(1)} aria-label="Étape suivante">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><polyline points="9 6 15 12 9 18" /></svg>
                  </button>
                </div>
              </div>
              <a
                href="/bateaux"
                className="offer-cta hiw-cta"
                onClick={(e) => {if (window.BF && window.BF.nav) {e.preventDefault();window.BF.nav("/bateaux");}}}>
                Voir les bateaux disponibles <I.arrow width="16" />
              </a>
            </div>

            {/* CTA mobile — sorti du panneau, seul en bas (masqué sur desktop) */}
            <a
              href="/bateaux"
              className="offer-cta hiw-cta-mobile"
              onClick={(e) => {if (window.BF && window.BF.nav) {e.preventDefault();window.BF.nav("/bateaux");}}}>
              Voir les bateaux disponibles <I.arrow width="16" />
            </a>
          </div>
        </section>

        {/* ============ MAKE AN OFFER ============ */}
        <section className="s offer" id="offer">
          <div className="container">
            <div className="eyebrow">Faire une offre</div>
            <h2 style={{ marginTop: 12 }}>Faites une offre,<br />obtenez votre prix.</h2>
            <p className="lead">Proposez un budget raisonnable pour une date précise. Si un propriétaire accepte, votre réservation est confirmée. Sinon, votre dépôt est remboursé.</p>
            <div className="offer-flow">
              {OFFER_FLOW.map((s) =>
              <div className="step" key={s.n}>
                  <div className="n">ÉTAPE 0{s.n}</div>
                  <h4>{s.title}</h4>
                </div>
              )}
            </div>
            <div className="offer-note">
              <div className="ic"><I.shield width="20" /></div>
              <p><b>Si aucune offre n'est acceptée</b>, BoatsFun.com est uniquement responsable du remboursement du dépôt.</p>
            </div>
            <a href="/faire-une-offre" className="offer-cta"><I.tag width="16" /> Faire une offre maintenant</a>
          </div>
        </section>

        {/* ============ WHY BOATSFUN — expérience (marquee + carousel bento) ============ */}
        <section className="s why">
          <div className="container">
            <WhyExperience />
          </div>
        </section>

        {/* ============ FAQ ============ */}
        <section className="s faq">
          <div className="container">
            <div className="faq-head">
              <div className="eyebrow">FAQ</div>
              <h2 style={{ marginTop: 12 }}>Questions fréquentes</h2>
            </div>
            <div className="faq-list">
              {FAQ.map((item, i) =>
              <div className={`faq-item ${openFaq === i ? "open" : ""}`} key={i}>
                  <div className="faq-q" onClick={() => setOpenFaq(openFaq === i ? -1 : i)}>
                    <h4>{item.q}</h4>
                    <span className="plus"><I.plus width="16" /></span>
                  </div>
                  <div className="faq-a"><p>{item.a}</p></div>
                </div>
              )}
            </div>
            <div className="faq-foot">
              <a href="/faq" className="btn-outline">Voir toutes les questions <I.arrowR width="14" /></a>
            </div>
          </div>
        </section>

        {/* ============ DEVENIR HÔTE — propriétaires marketplace (Vague 3) ============ */}
        <section className="host" id="host">
          <div className="container host-inner">
            <div>
              <div className="host-eyebrow">Propriétaires</div>
              <h2>Votre bateau peut <b>travailler pour vous.</b></h2>
              <p className="host-lead">Mettez votre bateau en location sur BoatsFun. Vous gardez le contrôle sur les tarifs, les dates et les locataires acceptés.</p>
              <ul className="host-benefits">
                <li><I.check width="16" /> Vous fixez vos tarifs et vos disponibilités</li>
                <li><I.check width="16" /> Paiements sécurisés et automatisés, sans avance</li>
                <li><I.check width="16" /> Chaque locataire est vérifié par notre équipe avant la sortie</li>
              </ul>
              <a href="/devenir-hote" className="host-cta"><I.arrowR width="16" /> Devenir hôte</a>
            </div>
            <div className="host-stats" aria-label="Avantages propriétaires">
              <div className="host-stat">
                <span className="ico"><I.tag width="20" /></span>
                <h4>Vous fixez le prix</h4>
                <p>Acceptez ou refusez librement chaque offre reçue.</p>
              </div>
              <div className="host-stat">
                <span className="ico"><I.shield width="20" /></span>
                <h4>Paiement protégé</h4>
                <p>Fonds sécurisés en main tierce jusqu'à la sortie.</p>
              </div>
              <div className="host-stat">
                <span className="ico"><I.cal width="20" /></span>
                <h4>Calendrier flexible</h4>
                <p>Bloquez vos dates personnelles en un clic.</p>
              </div>
              <div className="host-stat">
                <span className="ico"><I.headset width="20" /></span>
                <h4>Support 7j/7</h4>
                <p>Une équipe locale à Montréal pour vous accompagner.</p>
              </div>
            </div>
          </div>
        </section>

        {/* ============ EMAIL ALERTS ============ */}
        <section className="alerts">
          <div className="container alerts-inner">
            <div>
              <div className="eyebrow" style={{ color: "rgba(255,255,255,.85)" }}>Alertes</div>
              <h3 style={{ marginTop: 12 }}>Recevez les meilleures disponibilités par email</h3>
              <p className="desc" style={{ marginTop: 14 }}>Soyez alerté lorsqu'un bateau devient disponible, qu'un prix baisse ou qu'une offre intéressante apparaît.</p>
            </div>
            <div className="alerts-form">
              <div className="alerts-row">
                <input type="email" placeholder="Votre email" aria-label="Votre email" />
                <button>Recevoir les alertes</button>
              </div>
              <p className="alerts-note">Pas de spam. Désabonnement en un clic.</p>
            </div>
          </div>
        </section>

        {/* ============ FOOTER (partagé) ============ */}
        <window.BFFooter />
      </div>);
  }

  window.Homepage = Homepage;
})();
