:root{
    --accent-dim:#12a55e22;
  }
  html[data-theme="dark"]{
    --bg:#0b0b0a;
    --bg-2:#161614;
    --card:#1a1a17;
    --line:rgba(245,245,240,0.1);
    --text:#f5f4ef;
    --text-soft:#d8d5c9;
    --muted:#9c9a90;
    --accent:#15b568;
    --accent-2:#4c86e0;
    --accent-2-dim:#4c86e022;
    --header-scrolled-bg:rgba(11,11,10,0.86);
  }
  html[data-theme="light"]{
    --bg:#faf9f5;
    --bg-2:#f1efe8;
    --card:#ffffff;
    --line:rgba(11,11,10,0.1);
    --text:#0f0f0d;
    --text-soft:#3a392f;
    --muted:#65635a;
    --accent:#0f9a55;
    --accent-2:#0c4da8;
    --accent-2-dim:#0c4da822;
    --header-scrolled-bg:rgba(250,249,245,0.86);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  html,body{transition:background-color .5s ease;}
  body{background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;line-height:1.55;overflow-x:hidden;}
  h1,h2,h3{font-family:'Fraunces',serif;font-weight:700;letter-spacing:-0.01em;line-height:1.08;}
  em{font-style:italic;font-weight:500;color:var(--accent);}
  a{color:inherit;text-decoration:none;}
  img{display:block;width:100%;height:100%;object-fit:cover;}
  .wrap{max-width:1280px;margin:0 auto;padding:0 40px;}
  section{padding:130px 0;}
  ::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal;}

  /* BRAND MARK */
  .brand-mark{display:inline-flex;align-items:center;background:#fdfdfb;padding:8px 14px;border-radius:9px;box-shadow:0 2px 10px rgba(0,0,0,.15);}
  .brand-mark svg{height:14px;width:auto;display:block;}
  .theme-toggle{
    width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
    background:transparent;color:inherit;cursor:pointer;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
    transition:border-color .2s,background .2s;
  }
  .theme-toggle:hover{background:rgba(128,128,128,.12);}
  .theme-toggle svg{width:17px;height:17px;}
  .lang-toggle{
    width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
    background:transparent;color:inherit;cursor:pointer;font-family:'Inter',sans-serif;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
    font-size:12px;font-weight:700;letter-spacing:.03em;
    transition:border-color .2s,background .2s;
  }
  .lang-toggle:hover{background:rgba(128,128,128,.12);}
  .theme-toggle .sun{display:none;}
  html[data-theme="light"] .theme-toggle .moon{display:none;}
  html[data-theme="light"] .theme-toggle .sun{display:block;}



  /* NAV */
  header{position:fixed;top:0;left:0;right:0;z-index:200;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:18px 40px;transition:background .3s,border-color .3s,color .3s,opacity .3s,transform .3s;color:#fff;opacity:0;pointer-events:none;transform:translateY(-8px);}
  header.scrolled{
    background:var(--header-scrolled-bg);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
    color:var(--text);opacity:1;pointer-events:auto;transform:translateY(0);
  }
  /* Once scrolled, switch the HOMEPAGE header from the hero's centered-logo
     grid to the same left-logo / inline-nav / right-actions flex layout
     used on the standalone pages (.page-header-inner) — not just nav's own
     pill-vs-flat styling but the whole arrangement. Scoped to
     :not(.page-header): script.js toggles the same "scrolled" class on
     every page's #siteHeader, and .header-logo/nav are bare selectors that
     also match the standalone pages' own header — without this guard the
     unscoped `order` values would override their default DOM order (their
     actions cluster has no explicit order, so it would jump ahead of the
     logo) each time the visitor scrolls, breaking the "same on scroll or
     not" header those pages are meant to keep. Desktop only: below 900px
     the nav links are hidden and the actions cluster (theme toggle,
     "Nous Contacter" pill, hamburger) is too wide to sit next to the logo
     in an unwrapped flex row — it was overflowing the header and pushing
     the hamburger off-screen. Mobile keeps the existing
     grid-template-columns:auto 1fr auto layout from the 900px query below. */
  @media (min-width:901px){
    header.scrolled:not(.page-header){display:flex;align-items:center;gap:28px;}
    header.scrolled:not(.page-header) .header-logo{order:1;justify-self:auto;}
    header.scrolled:not(.page-header) nav{order:2;flex:1;justify-self:auto;}
    header.scrolled:not(.page-header) .nav-right{order:3;}
    /* The social icons only ever showed once scrolled anyway (the header is
       fully transparent before that) — dropped here so the scrolled bar reads
       as the same clean actions cluster as the standalone pages. Still shown
       in the mobile menu panel and the footer. */
    header.scrolled:not(.page-header) .nav-right .ff-menu-social{display:none;}
  }
  .header-logo{justify-self:center;display:flex;align-items:center;}
  .header-logo img{height:22px;width:auto;display:block;}
  .header-logo .logo-white{display:none;}
  html[data-theme="dark"] .header-logo .logo-white{display:block;}
  html[data-theme="dark"] .header-logo .logo-color{display:none;}
  nav{justify-self:start;}
  nav ul{list-style:none;display:flex;gap:6px;background:rgba(128,128,128,.12);border:1px solid var(--line);border-radius:100px;padding:6px;}
  nav a{font-size:13.5px;font-weight:600;color:inherit;opacity:.85;transition:opacity .2s,background .2s;padding:9px 16px;border-radius:100px;display:inline-block;}
  nav a:hover{opacity:1;background:rgba(128,128,128,.14);}
  /* Once scrolled past the hero, match the flat nav look used on the
     standalone pages (Guide du voyageur, À propos, Contact) instead of the
     pill treatment that only reads well over the hero image. */
  header.scrolled nav ul{background:none;border:none;border-radius:0;padding:0;gap:26px;}
  header.scrolled nav a{opacity:1;padding:0;border-radius:0;color:var(--text-soft);}
  header.scrolled nav a:hover{background:none;color:var(--accent);}
  .logo .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);}
  .nav-right{display:flex;align-items:center;gap:16px;justify-self:end;}
  .btn-pill{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#0b0b0a;font-weight:700;font-size:14px;padding:13px 24px;border-radius:100px;border:none;cursor:pointer;transition:transform .2s,filter .2s;}
  .btn-pill:hover{transform:translateY(-2px);filter:brightness(1.08);}
  .btn-outline{display:inline-flex;align-items:center;gap:10px;background:transparent;color:var(--text);font-weight:600;font-size:14px;padding:14px 22px;border-radius:100px;border:1px solid var(--line);cursor:pointer;transition:background .2s,border-color .2s;}
  .btn-outline:hover{background:rgba(128,128,128,.1);border-color:rgba(128,128,128,.35);}
  .btn-outline.disabled{opacity:.4;cursor:not-allowed;}
  .btn-outline.disabled:hover{background:transparent;border-color:var(--line);}

  /* VISION */
  .eyebrow{color:var(--muted);font-size:13.5px;font-weight:600;letter-spacing:.02em;margin-bottom:22px;}
  .eyebrow .dot{display:none;}
  .accent-word{color:var(--accent);}
  .vision-eyebrow{color:var(--muted);font-size:13.5px;font-weight:600;margin-bottom:40px;}
  .vision-copy{max-width:820px;}
  .vision-copy h2{font-size:clamp(30px,4vw,50px);margin-bottom:28px;}
  .vision-copy p{color:var(--muted);font-size:clamp(17px,2vw,21px);line-height:1.7;max-width:760px;margin-bottom:34px;}
  .sr-word{display:inline-block;opacity:.15;filter:blur(3px);transition:opacity .5s ease,filter .5s ease;}
  .sr-word.active{opacity:1;filter:blur(0);}

  /* OFFERS — sticky stacking cards, full content */
  .offer-head{max-width:640px;margin-bottom:70px;}
  .offer-head h2{font-size:clamp(30px,3.6vw,46px);}
  .offers-stack{position:relative;padding-bottom:40px;}
  .offer-card{
    position:sticky;
    display:grid;grid-template-columns:1.05fr 0.95fr;gap:48px;align-items:center;
    background:var(--card);border:1px solid var(--line);border-radius:22px;
    padding:48px;margin-bottom:26px;
    box-shadow:0 30px 70px rgba(0,0,0,.4);
  }
  .offer-card:nth-child(1){top:112px;z-index:1;}
  .offer-card:nth-child(2){top:142px;z-index:2;}
  .offer-card:nth-child(3){top:172px;z-index:3;}
  .offer-card:nth-child(4){top:202px;z-index:4;}
  .offer-card:nth-child(5){top:232px;z-index:5;}
  .offer-card:nth-child(6){top:262px;z-index:6;margin-bottom:0;}

  /* SPECIAL OFFER CARD (gradient) */
  .offer-card-special{
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    border:none;
  }
  .offer-card-special .o-quote{color:rgba(255,255,255,.92);}
  .offer-card-special h3,.offer-card-special .o-desc{color:#fff;}
  .offer-card-special .o-desc{opacity:.92;}
  .offer-card-special .o-included-label{color:rgba(255,255,255,.75);}
  .offer-card-special .o-included div{color:rgba(255,255,255,.92);}
  .offer-card-special .o-included div::before{background:#fff;}
  .offer-card-special .o-pricing{border-color:rgba(255,255,255,.35);}
  .offer-card-special .o-price-tier{border-color:rgba(255,255,255,.35);}
  .offer-card-special .o-price-tier span{color:rgba(255,255,255,.75);}
  .offer-card-special .o-price-tier b{color:#fff;}
  .offer-card-special .btn-pill{background:#fff;color:#0b0b0a;}
  .offer-card-special .o-meta{color:rgba(255,255,255,.75);}
  .offer-card-special .o-meta b{color:#fff;}
  .offer-card-special .o-badge{
    display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.2);
    color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
    padding:6px 14px;border-radius:100px;margin-bottom:16px;
  }
  .o-media{border-radius:14px;overflow:hidden;position:relative;aspect-ratio:5/4;}
  .o-index{position:absolute;top:16px;left:16px;font-family:'Fraunces',serif;font-size:14px;color:#fff;background:rgba(16,15,12,.6);padding:5px 13px;border-radius:100px;backdrop-filter:blur(3px);}
  .o-info h3{font-size:clamp(22px,2.4vw,30px);margin-bottom:10px;}
  .o-quote{font-style:italic;color:var(--accent-2);font-size:15px;margin-bottom:16px;}
  .o-desc{color:var(--muted);font-size:14.5px;max-width:460px;margin-bottom:22px;line-height:1.6;}
  .o-included-label{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--muted);margin-bottom:12px;}
  .o-included{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;margin-bottom:24px;max-width:460px;}
  .o-included div{font-size:13.5px;color:var(--text-soft);display:flex;align-items:center;gap:8px;}
  .o-included div::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0;}
  .o-pricing{display:flex;margin-bottom:22px;border:1px solid var(--line);border-radius:8px;overflow:hidden;max-width:460px;}
  .o-price-tier{flex:1;padding:12px 14px;border-right:1px solid var(--line);}
  .o-price-tier:last-child{border-right:none;}
  .o-price-tier span{display:block;font-size:11px;color:var(--muted);margin-bottom:4px;}
  .o-price-tier b{font-family:'Fraunces',serif;font-size:17px;color:var(--text);font-weight:600;}
  .o-meta{font-size:12.5px;color:var(--muted);margin-top:18px;}
  .o-meta b{color:var(--text-soft);font-weight:600;}

  /* PATRIMOINE */
  .heritage-head{margin-bottom:80px;max-width:640px;}
  /* Text + thumbnail front / full photo on flip back — hover (or keyboard
     focus, or a tap on touch devices) rotates the card 180° to reveal the
     photo. Text-first so the description is readable without any
     interaction; the flip is a "see the photo" reward rather than the only
     way to read the card. */
  .heritage-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
  /* Without this, tapping the card on iOS Safari can be read as a
     text-selection gesture (word highlight + Copy/Search callout) instead
     of a tap — which ate the tap that's supposed to flip the card, since
     the callout swallows the click entirely. */
  .heritage-card{
    perspective:1600px;aspect-ratio:3/4;cursor:pointer;
    -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  }
  .heritage-card:focus{outline:none;}
  .heritage-card:focus-visible .heritage-flip{outline:2px solid var(--accent);outline-offset:4px;}
  .heritage-flip{
    position:relative;width:100%;height:100%;border-radius:16px;
    transform-style:preserve-3d;transition:transform .7s cubic-bezier(.4,.1,.2,1);
  }
  /* .flipped is toggled by script.js on tap for touch devices, since :hover
     is unreliable/undiscoverable on mobile — see the tap-hint block below. */
  .heritage-card:hover .heritage-flip,.heritage-card:focus-within .heritage-flip,.heritage-card.flipped .heritage-flip{transform:rotateY(180deg);}
  .heritage-flip-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:16px;overflow:hidden;}
  .heritage-flip-front{
    background:var(--card);border:1px solid var(--line);padding:22px 20px;
    display:flex;flex-direction:column;
  }
  .heritage-thumb{aspect-ratio:16/10;border-radius:10px;overflow:hidden;margin-bottom:16px;flex-shrink:0;}
  .heritage-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
  .heritage-flip-front h3{font-size:18px;margin-bottom:10px;}
  .heritage-flip-front p{color:var(--muted);font-size:13.5px;line-height:1.6;}
  .heritage-flip-back{transform:rotateY(180deg);}
  .heritage-flip-back img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease;}
  .heritage-card:hover .heritage-flip-back img{transform:scale(1.05);}
  @media (max-width:1000px){.heritage-grid{grid-template-columns:1fr 1fr;}}
  /* Below 600px, a swipeable horizontal row instead of a single stacked
     column — cards are shown one (mostly) at a time with a peek of the
     next, snapping into place as the visitor swipes left/right. Native
     scroll-snap rather than a JS carousel, so it's just a normal touch
     scroll and doesn't fight the tap-to-flip handler. */
  @media (max-width:600px){
    .heritage-grid{
      display:flex;grid-template-columns:none;overflow-x:auto;gap:16px;
      scroll-snap-type:x mandatory;scroll-padding-left:22px;
      margin:0 -22px;padding:4px 22px 10px;-webkit-overflow-scrolling:touch;
      scrollbar-width:none;
    }
    .heritage-grid::-webkit-scrollbar{display:none;}
    .heritage-card{flex:0 0 78%;scroll-snap-align:start;}
  }

  /* Touch-only "tap me" hint: a pulsing badge plus a one-time wobble once
     the grid scrolls into view (.in is added by script.js's shared reveal
     observer), so mobile visitors — who never get a hover cue — discover
     the flip. Desktop keeps the plain hover interaction, untouched. */
  .heritage-tap-hint{
    position:absolute;bottom:14px;right:14px;z-index:2;width:34px;height:34px;border-radius:50%;
    background:rgba(11,11,10,.55);backdrop-filter:blur(4px);color:#fff;
    display:none;align-items:center;justify-content:center;pointer-events:none;
  }
  .heritage-tap-hint svg{width:16px;height:16px;}
  @media (hover:none) and (pointer:coarse){
    .heritage-tap-hint{display:flex;animation:heritageTapPulse 2.2s ease-in-out infinite;}
    .heritage-grid.in .heritage-card:nth-child(1) .heritage-flip{animation:heritagePeek 1.3s ease-in-out .3s 1;}
    .heritage-grid.in .heritage-card:nth-child(2) .heritage-flip{animation:heritagePeek 1.3s ease-in-out .5s 1;}
    .heritage-grid.in .heritage-card:nth-child(3) .heritage-flip{animation:heritagePeek 1.3s ease-in-out .7s 1;}
    .heritage-grid.in .heritage-card:nth-child(4) .heritage-flip{animation:heritagePeek 1.3s ease-in-out .9s 1;}
  }
  @keyframes heritageTapPulse{0%,100%{transform:scale(1);opacity:.8;}50%{transform:scale(1.15);opacity:1;}}
  @keyframes heritagePeek{0%,100%{transform:rotateY(0deg);}30%{transform:rotateY(-16deg);}55%{transform:rotateY(5deg);}}
  @media (prefers-reduced-motion: reduce){
    .heritage-tap-hint{animation:none;}
    .heritage-grid .heritage-card .heritage-flip{animation:none !important;}
  }

  /* OFFRE SPÉCIALE — MODAL (full-screen sheet, slides up like a new page) */
  .offer-modal{position:fixed;inset:0;z-index:500;visibility:hidden;pointer-events:none;}
  .offer-modal.open{visibility:visible;pointer-events:auto;}
  .offer-modal-backdrop{position:absolute;inset:0;background:rgba(6,6,5,.7);opacity:0;transition:opacity .4s ease;}
  .offer-modal.open .offer-modal-backdrop{opacity:1;}
  .offer-modal-panel{
    position:absolute;inset:0;background:var(--bg);
    transform:translateY(100%);transition:transform .5s cubic-bezier(.16,1,.3,1);
    overflow:hidden;box-shadow:0 -20px 60px rgba(0,0,0,.4);
  }
  .offer-modal-bg{position:absolute;inset:0;z-index:0;}
  .offer-modal-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,7,6,.55) 0%,var(--bg) 62%,var(--bg) 100%);}
  .offer-modal-scroll{position:relative;z-index:1;}
  .offer-modal.open .offer-modal-panel{transform:translateY(0);}
  .offer-modal-scroll{overflow-y:auto;height:100%;padding:80px 48px 80px;max-width:920px;margin:0 auto;}
  .offer-modal-close{
    position:fixed;top:24px;right:34px;z-index:2;width:42px;height:42px;border-radius:50%;
    background:var(--bg-2);border:1px solid var(--line);color:var(--text);cursor:pointer;
    display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s;
  }
  .offer-modal-close:hover{background:var(--accent);color:#0b0b0a;transform:rotate(90deg);}
  .offer-modal-close svg{width:17px;height:17px;}
  .offer-special-head{max-width:720px;margin-bottom:16px;}
  .offer-special-dates{color:var(--text);font-size:15px;margin-bottom:34px;}
  .offer-modal .o-included-label{color:var(--text);}
  .offer-special-price-row{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:44px;}
  .osp-chip{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:16px 22px;}
  .osp-chip span{display:block;font-size:11px;color:var(--muted);letter-spacing:.06em;margin-bottom:5px;text-transform:uppercase;}
  .osp-chip b{font-family:'Fraunces',serif;font-size:20px;color:var(--text);}
  .osp-chip.highlight{border-color:var(--accent);}
  .osp-chip.highlight b{color:var(--accent);}
  .offer-special-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:60px;margin-bottom:70px;}
  .special-included{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;}
  .special-included div{font-size:14.5px;color:var(--text-soft);display:flex;align-items:center;gap:10px;}
  .special-included div::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0;}
  .special-pricing{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:34px;}
  .special-pricing .row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--text);}
  .special-pricing .row:last-of-type{border-bottom:none;}
  .special-pricing .row b{color:var(--text);font-family:'Fraunces',serif;font-size:17px;font-weight:600;}
  .special-pricing .row.save b{color:var(--accent);}
  .itinerary{display:flex;flex-direction:column;}
  .itinerary-day{display:grid;grid-template-columns:170px 1fr;gap:24px;padding:22px 0;border-top:1px solid var(--line);}
  .itinerary-day:last-child{border-bottom:1px solid var(--line);}
  .itinerary-day .date{font-family:'Fraunces',serif;color:var(--accent-2);font-weight:600;font-size:14.5px;}
  .itinerary-day h4{font-size:16.5px;margin-bottom:6px;}
  .itinerary-day p{color:var(--muted);font-size:14px;max-width:560px;}
  .offer-special-note{color:var(--muted);font-size:13px;margin-top:24px;max-width:640px;}

  /* HERO — FarmForm-style slideshow hero */
  .hero-ff{position:relative;height:100vh;height:100svh;min-height:640px;overflow:hidden;}
  .hero-ff-bg{position:absolute;inset:0;}
  .hero-ff-bg img{position:absolute;inset:0;opacity:0;transition:opacity 1s ease;}
  .hero-ff-bg img.active{opacity:1;}
  .hero-ff::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(8,7,6,.82) 0%,rgba(8,7,6,.05) 40%,rgba(8,7,6,.3) 100%);z-index:1;}
  .hero-ff-top{position:absolute;top:0;left:0;right:0;z-index:4;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:30px 44px;}
  .hero-ff-tag{display:flex;align-items:center;gap:9px;font-size:11.5px;font-weight:700;letter-spacing:.1em;color:#fff;text-transform:uppercase;justify-self:start;}
  .type-cursor{display:inline-block;margin-left:2px;font-weight:400;animation:typeBlink .9s step-end infinite;}
  @keyframes typeBlink{50%{opacity:0;}}
  .hero-ff-tag svg{width:14px;height:14px;color:var(--accent);}
  .hero-ff-top .header-logo{justify-self:center;}
  .hero-ff-top .header-logo img{height:20px;}
  .hero-ff-top-right{display:flex;align-items:center;gap:18px;justify-self:end;}
  .hero-ff-lang-toggle{font-size:11.5px;font-weight:700;letter-spacing:.1em;color:#fff;text-transform:uppercase;cursor:pointer;background:none;border:none;padding:0;opacity:.85;transition:opacity .2s;}
  .hero-ff-lang-toggle:hover{opacity:1;}
  .hero-ff-menu{display:flex;align-items:center;gap:10px;font-size:11.5px;font-weight:700;letter-spacing:.1em;color:#fff;text-transform:uppercase;cursor:pointer;background:none;border:none;padding:0;}
  .hero-ff-menu svg{width:18px;height:18px;}
  .hero-ff-menu .icon-close,.hero-ff-menu .label-close{display:none;}
  .hero-ff-menu.is-open .icon-open,.hero-ff-menu.is-open .label-open{display:none;}
  .hero-ff-menu.is-open .icon-close,.hero-ff-menu.is-open .label-close{display:inline-flex;}
  /* The full-screen menu panel (mobile) sits opaque behind this button — its
     background follows the theme, so the button must too, not the fixed
     white used for the rest of the (always-dark) hero header. */
  .hero-ff-menu.is-open{color:var(--text);}
  /* Mirrors the hero's own menu toggle so the same full-screen panel stays
     reachable from the sticky header once the hero has scrolled out of view.
     Hidden on desktop (that width uses the plain <nav> links instead). */
  .site-header-menu-toggle{
    display:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
    background:transparent;color:inherit;cursor:pointer;align-items:center;justify-content:center;flex-shrink:0;
  }
  .site-header-menu-toggle svg{width:17px;height:17px;}
  .site-header-menu-toggle .icon-close{display:none;}
  .site-header-menu-toggle.is-open .icon-open{display:none;}
  .site-header-menu-toggle.is-open .icon-close{display:inline-flex;}
  .hero-ff-menu-panel{
    position:absolute;top:70px;right:44px;z-index:5;background:var(--card);border:1px solid var(--line);
    border-radius:12px;padding:32px;display:none;grid-template-columns:1fr 1fr;gap:44px;min-width:420px;
    box-shadow:0 20px 50px rgba(0,0,0,.4);color:var(--text);
  }
  .hero-ff-menu-panel.open{display:grid;}
  .ff-menu-brand{display:flex;flex-direction:column;gap:20px;}
  .brand-mark-flat{display:inline-flex;}
  .brand-mark-flat svg{height:15px;width:auto;display:block;}
  .brand-mark-flat.logo-white{display:none;}
  html[data-theme="dark"] .brand-mark-flat.logo-white{display:inline-flex;}
  html[data-theme="dark"] .brand-mark-flat.logo-color{display:none;}
  .ff-menu-contact{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);}
  .ff-menu-social{display:flex;gap:10px;}
  .ff-menu-social a{
    width:32px;height:32px;border-radius:50%;border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;color:var(--text);transition:background .2s,color .2s;
  }
  .ff-menu-social a:hover{background:var(--accent);color:#0b0b0a;border-color:var(--accent);}
  .ff-menu-social svg{width:14px;height:14px;}
  .ff-menu-links{display:flex;flex-direction:column;gap:13px;}
  .ff-menu-links a{font-size:14px;font-weight:600;}
  .ff-menu-links a:hover{color:var(--accent);}
  .hero-ff-content{position:absolute;left:44px;right:44px;bottom:64px;z-index:3;display:flex;justify-content:space-between;align-items:flex-end;gap:40px;}
  .hero-ff-welcome{font-size:11.5px;font-weight:700;letter-spacing:.1em;color:#fff;opacity:.85;margin-bottom:14px;text-transform:uppercase;}
  .hero-ff-content h1{font-size:clamp(28px,4vw,50px);color:#fff;max-width:600px;}
  .hero-ff-pagination{display:flex;gap:9px;align-items:center;flex-shrink:0;padding-bottom:8px;}
  .hero-ff-pagination .seg{width:32px;height:2px;background:rgba(255,255,255,.35);transition:background .3s,width .3s;}
  .hero-ff-pagination .seg.active{background:#fff;width:44px;}
  .hero-ff-cta{display:none;align-items:center;gap:8px;margin-top:18px;background:var(--accent);color:#0b0b0a;font-weight:700;font-size:13.5px;padding:11px 20px;border-radius:100px;width:fit-content;border:none;cursor:pointer;font-family:'Inter',sans-serif;transition:transform .2s,filter .2s;}
  .hero-ff-cta:hover{transform:translateY(-2px);filter:brightness(1.08);}
  .hero-ff-cta.show{display:inline-flex;}
  .hero-ff-side{display:flex;flex-direction:column;align-items:flex-end;gap:16px;flex-shrink:0;}
  .loc-chip{display:inline-flex;align-items:center;gap:9px;background:var(--accent);border-radius:100px;padding:7px 16px 7px 8px;box-shadow:0 12px 26px rgba(0,0,0,.3);}
  .loc-chip-icon{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .loc-chip-icon svg{width:12px;height:12px;color:#fff;}
  .loc-chip-text{font-size:12.5px;font-weight:700;color:#fff;white-space:nowrap;}
  .loc-chip-text span#pinSub{font-weight:500;opacity:.85;}
  .loc-chip-text span#pinTitle{margin-right:4px;}

  .hero-scroll-cue{
    position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;
    width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.4);
    display:flex;align-items:center;justify-content:center;color:#fff;
    animation:heroScrollBounce 2s ease-in-out infinite;transition:opacity .3s;
  }
  .hero-scroll-cue svg{width:16px;height:16px;}
  .hero-scroll-cue:hover{border-color:#fff;}
  .hero-ff.scrolled-past .hero-scroll-cue{opacity:0;pointer-events:none;}
  @keyframes heroScrollBounce{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(8px);}}
  @media (prefers-reduced-motion: reduce){.hero-scroll-cue{animation:none;}}

  /* BACK TO TOP — shared across every page (script.js shows it past a
     scroll threshold and handles the click). z-index sits just below the
     mobile full-screen menu panel (z-index:5) so an open menu still covers
     it instead of floating on top of the nav. */
  .back-to-top{
    position:fixed;right:24px;bottom:24px;z-index:4;width:46px;height:46px;border-radius:50%;
    background:var(--card);border:1px solid var(--line);color:var(--text);
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    box-shadow:0 12px 28px rgba(0,0,0,.18);
    opacity:0;pointer-events:none;transform:translateY(12px);
    transition:opacity .3s ease,transform .3s ease,background .2s,border-color .2s,color .2s;
  }
  .back-to-top.show{opacity:1;pointer-events:auto;transform:translateY(0);}
  .back-to-top:hover{background:var(--accent);color:#0b0b0a;border-color:var(--accent);}
  .back-to-top svg{width:18px;height:18px;}
  @media (max-width:600px){.back-to-top{right:16px;bottom:16px;width:42px;height:42px;}}
  @media (prefers-reduced-motion: reduce){.back-to-top{transition:opacity .3s ease;}}

  /* CONTACT */
  .contact-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:70px;}
  .contact-info h2{font-size:clamp(28px,3.2vw,40px);margin-bottom:20px;}
  .contact-info p{color:var(--muted);font-size:15.5px;margin-bottom:44px;max-width:400px;}
  .contact-detail{margin-bottom:22px;}
  .contact-detail span{display:block;font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--muted);margin-bottom:4px;}
  .contact-detail b{font-size:15.5px;font-weight:600;color:var(--text);}
  .form-card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:44px;}
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px;}
  .field{display:flex;flex-direction:column;gap:8px;}
  .field.full{grid-column:1/-1;}
  .field label{font-size:12.5px;color:var(--muted);font-weight:600;}
  .field input,.field select,.field textarea{
    background:var(--bg-2);border:1px solid var(--line);border-radius:6px;color:var(--text);
    padding:12px 14px;font-family:'Inter',sans-serif;font-size:14.5px;outline:none;transition:border-color .2s;
  }
  .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);}
  .field textarea{resize:vertical;min-height:100px;}
  .form-submit{width:100%;justify-content:center;margin-top:6px;padding:15px;}
  .form-note{font-size:13px;color:var(--muted);margin-top:14px;text-align:center;}

  /* FOOTER */
  footer{padding:90px 0 30px;border-top:1px solid var(--line);}
  .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:60px;}
  .footer-brand p{color:var(--muted);font-size:14.5px;margin-top:14px;max-width:280px;}
  .footer-col h4{font-size:12.5px;letter-spacing:.06em;color:var(--muted);margin-bottom:18px;font-weight:700;}
  .footer-col ul{list-style:none;display:flex;flex-direction:column;gap:11px;}
  .footer-col a{font-size:14.5px;color:var(--text-soft);}
  .footer-col a:hover{color:var(--accent);}
  .footer-legal{display:flex;justify-content:space-between;padding-top:26px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);flex-wrap:wrap;gap:14px;}
  .footer-legal .links{display:flex;gap:22px;}

  .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease;}
  .reveal.in{opacity:1;transform:translateY(0);}

  @media (max-width:900px){
    .wrap{padding:0 22px;}
    header{padding:20px 22px;}
    nav{display:none;}
    section{padding:80px 0;}
    .offer-card,.contact-grid,.footer-grid{grid-template-columns:1fr;gap:30px;}
    .form-row{grid-template-columns:1fr;}
    /* Mobile only (desktop/tablet keep the sticky-stacking layout as-is):
       the photo (.o-media) came after the whole text block — quote,
       description, included list, price, CTA — so on a long card the next
       sticky card had already slid up and covered the current one before
       you ever scrolled far enough to see its photo. Photo now leads, and
       cards flow normally instead of stacking, so nothing gets covered
       before it's been seen. */
    .offer-card{
      grid-template-columns:1fr;padding:28px;
      position:relative;top:0!important;
    }
    .offer-card .o-media{order:-1;margin-bottom:22px;aspect-ratio:16/10;}
    .hero-ff-tag span{display:none;}
    .hero-ff-content{flex-direction:column;align-items:flex-start;gap:20px;}
    .hero-ff-side{align-items:flex-start;width:100%;}
    .brand-mark{padding:6px 10px;}
    .brand-mark svg{height:11px;}
    .hero-ff-top-right{position:relative;z-index:6;}
    .hero-ff-menu-panel{
      position:fixed;inset:0;top:0;right:0;bottom:0;left:0;
      width:100%;height:100%;min-width:0;max-width:none;
      border-radius:0;border:none;grid-template-columns:1fr;
      padding:100px 28px 40px;overflow-y:auto;align-content:start;
    }
    .offer-special-grid{grid-template-columns:1fr;}
    .offer-modal-scroll{padding:26px;}
    .offer-modal-close{top:12px;right:12px;}
    .itinerary-day{grid-template-columns:1fr;gap:6px;}
    header{grid-template-columns:auto 1fr auto;gap:10px;}
    /* nav is display:none at this width, which removes it from the grid's
       auto-placement entirely — without pinning these explicitly, .nav-right
       slides into the (too-narrow) middle track instead of the last one. */
    header .header-logo{grid-column:1;}
    header .nav-right{grid-column:3;}
    header .header-logo img{height:15px;}
    .nav-right{gap:8px;}
    .nav-right .ff-menu-social{display:none;}
    .site-header-menu-toggle{display:flex;}
    .btn-pill{padding:11px 16px;font-size:13px;}
    .theme-toggle{width:34px;height:34px;}
    /* On the standalone content pages (guide/about/contact) the sticky
       .page-header logo stays visible above the full-screen mobile menu
       panel, so the panel's own brand-row logo is redundant — showing both
       reads as the logo repeating twice. The homepage's own menu panel uses
       .brand-mark-flat instead of .header-logo, so it's unaffected. */
    .hero-ff-menu-panel .ff-menu-brand .header-logo{display:none;}
  }

  /* CONTENT PAGES (Guide du voyageur, À propos) — a plain page hero plus a
     grid of topic cards, shared by both since they're the same shape on the
     backend (hero + sections). */
  .page-hero{padding:80px 0 60px;}
  .page-hero .eyebrow{margin-bottom:18px;}
  .page-hero h1{font-size:clamp(34px,5vw,58px);max-width:820px;margin-bottom:22px;text-wrap:balance;}
  .page-hero p{color:var(--muted);font-size:clamp(16px,1.6vw,19px);max-width:640px;line-height:1.7;}
  /* Photo variant — a real destination photo behind the title, in the same
     spirit as the homepage's own hero, sized per-page via --hero-img. */
  .page-hero.has-photo{position:relative;padding:150px 0 110px;color:#fff;overflow:hidden;}
  .page-hero.has-photo::before{content:'';position:absolute;inset:0;background:var(--hero-img) center/cover no-repeat;z-index:0;}
  .page-hero.has-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,6,5,.68) 0%,rgba(6,6,5,.85) 100%);z-index:1;}
  .page-hero.has-photo .wrap{position:relative;z-index:2;}
  .page-hero.has-photo .eyebrow{color:rgba(255,255,255,.8);}
  .page-hero.has-photo p{color:rgba(255,255,255,.88);}
  /* About-page intro — a photo + word-by-word scroll-reveal text pair,
     shown before the Mission/Authenticity/etc. card grid. Reuses the same
     .scroll-reveal-text/.sr-word mechanism as the homepage's Vision
     section (see script.js), so it needs no extra JS. */
  .about-intro{padding:16px 0 90px;}
  .about-intro .wrap{display:grid;grid-template-columns:0.85fr 1.15fr;gap:64px;align-items:center;}
  .about-intro-media{border-radius:20px;overflow:hidden;aspect-ratio:4/5;box-shadow:0 30px 70px rgba(0,0,0,.25);}
  .about-intro-media img{width:100%;height:100%;object-fit:cover;display:block;}
  .about-intro-copy .eyebrow{color:var(--text);}
  .about-intro-copy h2{font-size:clamp(28px,3.6vw,42px);margin:16px 0 24px;text-wrap:balance;}
  .about-intro-copy p{color:var(--muted);font-size:clamp(15.5px,1.6vw,18px);line-height:1.75;max-width:640px;}
  @media (max-width:760px){
    .about-intro{padding:8px 0 60px;}
    .about-intro .wrap{grid-template-columns:1fr;gap:32px;}
    .about-intro-media{aspect-ratio:16/11;}
  }
  .content-section{padding:0 0 140px;}
  .content-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:44px 40px;}
  .content-card{/* border-top:1px solid var(--line); */padding-top:26px;}
  .content-card-icon{
    width:52px;height:52px;border-radius:14px;background:var(--accent-2-dim);color:var(--accent-2);
    display:flex;align-items:center;justify-content:center;margin-bottom:14px;
  }
  .content-card-icon svg{width:24px;height:24px;}
  /* Short underline beneath the icon instead of a number — same device as
     heritage-card's index digit, just anchored to the icon here. */
  .content-card-rule{display:block;width:28px;height:2px;background:var(--accent-2);margin-bottom:18px;}
  .content-card h3{font-size:20px;margin-bottom:12px;}
  .content-card p{color:var(--muted);font-size:15px;line-height:1.7;}
  .content-loading{color:var(--muted);font-size:14.5px;}
  .contact-guide-link{display:inline-block;font-size:14.5px;font-weight:600;color:var(--accent-2);border-bottom:1px solid transparent;transition:border-color .2s;}
  .contact-guide-link:hover{border-color:var(--accent-2);}

  /* Simple, always-visible header for interior pages (Guide du voyageur,
     À propos) — the homepage's own <header> starts transparent/invisible
     until scrolled past its hero, which only makes sense over that hero. */
  /* Overrides every property the shared bare `header{}` rule sets for the
     homepage's hide-until-scrolled hero header — this one must be visible,
     interactive, and normally colored from the very first paint. */
  .page-header{
    position:sticky;top:0;left:0;right:0;z-index:200;display:block;
    background:var(--header-scrolled-bg);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
    color:var(--text);opacity:1;pointer-events:auto;transform:none;
  }
  .page-header-inner{display:flex;align-items:center;gap:28px;padding:16px 40px;}
  .page-header-logo{flex-shrink:0;display:block;}
  .page-header-logo img{height:16px;width:auto;}
  .page-nav{display:flex;gap:26px;flex:1;}
  .page-nav a{font-size:14px;font-weight:600;color:var(--text-soft);}
  .page-nav a:hover{color:var(--accent);}
  .page-header-actions{display:flex;align-items:center;gap:10px;}
  /* Same breakpoint as the homepage's own header — below it, the flat nav
     gives way to the hamburger + full-screen menu panel it shares with
     every other page (see .hero-ff-menu-panel / #siteMenuToggle). */
  @media (max-width:900px){
    .page-header-inner{padding:14px 20px;gap:10px;justify-content:space-between;}
    .page-nav{display:none;}
  }
  /* The wordmark logo alone runs ~150px even at reduced height, leaving no
     room for the action cluster on narrow phones — the "Espace Client" pill
     is already reachable from the hamburger panel below, so it's dropped
     here rather than risking horizontal overflow. */
  @media (max-width:430px){
    .page-header-actions .btn-pill{display:none;}
  }
  /* Same idea for the homepage's own sticky header: the "Nous Contacter"
     pill plus lang/theme toggles and the hamburger run wider than the
     wordmark logo leaves room for on narrow phones. "Contact" is already
     reachable from the hamburger panel, so drop the pill here too. */
  @media (max-width:480px){
    header .nav-right .btn-pill{display:none;}
  }

  @media (max-width:700px){
    .page-hero{padding:50px 0 40px;}
    .content-grid{grid-template-columns:1fr;}
    .content-section{padding:0 0 90px;}
  }