html { scroll-behavior: smooth; }
    body { font-family: 'Plus Jakarta Sans', sans-serif; color: #1F1B16; background: #FDF8F3; overflow-x: hidden; }
    body.menu-open { overflow: hidden; }
    section[id] { scroll-margin-top: 5rem; }
    :focus-visible { outline: 3px solid #F5C842; outline-offset: 4px; }
    .font-display { font-family: 'Fraunces', Georgia, serif; font-variation-settings: "SOFT" 50, "WONK" 0; }
    .font-hand    { font-family: 'Caveat', cursive; }

    /* Logo wordmark “Loutopia” : Lou cursive + topia jaune */
    .logo-word { font-family: 'Caveat', cursive; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
    .logo-word .topia { color: #F5C842; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; letter-spacing: .04em; font-size: .55em; vertical-align: 0.18em; margin-left: .04em; }

    /* Grain subtil */
    .grain::before {
      content:""; position:absolute; inset:0; pointer-events:none; opacity:.22;
      background-image: radial-gradient(#00000011 1px, transparent 1px);
      background-size: 3px 3px;
    }

    /* Reveal on scroll */
    .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
    .reveal.in { opacity: 1; transform: translateY(0); }

    /* Marquee */
    .marquee { display:flex; gap:3rem; animation: scroll 35s linear infinite; }
    @keyframes scroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }

    /* Gradient text accent */
    .grad-text {
      background: linear-gradient(120deg, #E86A3E 0%, #F5C842 60%, #E88C3A 100%);
      background-size: 200% 100%;
      -webkit-background-clip: text; background-clip: text; color: transparent;
      animation: sheen 12s linear infinite;
    }

    /* Underline manuscrit */
    .underline-hand {
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14'><path d='M2 9 Q 50 0 100 7 T 198 8' stroke='%23F5C842' stroke-width='5' fill='none' stroke-linecap='round'/></svg>");
      background-repeat: no-repeat; background-position: bottom left; background-size: 100% 0.5em;
      padding-bottom: .15em;
    }

    /* Carte “tilt” */
    .tilt-card { transition: transform .35s ease, box-shadow .35s ease; }
    .tilt-card:hover { transform: translateY(-6px) rotate(-.4deg); }

    /* Vidéo hero — overlay foncé en bas + cadre */
    .hero-video-frame {
      position: relative; overflow: hidden; border-radius: 2rem;
      box-shadow: 0 30px 80px -30px rgba(31,27,22,.45);
    }
    .hero-video-frame::after {
      content:""; position:absolute; inset:0;
      background: linear-gradient(180deg, transparent 55%, rgba(31,27,22,.55) 100%);
      pointer-events:none;
    }

    .hero-dot-pattern {
      background-image: radial-gradient(#ffffff66 1px, transparent 1px);
      background-size: 16px 16px;
    }

    .float-delay-1 { animation-delay: 1s; }
    .float-delay-2 { animation-delay: 2s; }

    /* Scroll progress bar */
    #progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg,#E86A3E,#F5C842); z-index: 60; transition: width .1s linear; }

    /* Header subtle border on scroll */
    header.scrolled { box-shadow: 0 10px 30px -20px rgba(31,27,22,.2); border-bottom-color: rgba(232,106,62,.18); }

    /* Repère de navigation sur les longues pages */
    .desktop-nav a { position: relative; }
    .desktop-nav a::after {
      content:""; position:absolute; left:0; right:100%; bottom:-.45rem; height:2px;
      border-radius:999px; background:#E86A3E; transition:right .25s ease;
    }
    .desktop-nav a:hover::after, .desktop-nav a.is-active::after { right:0; }
    .desktop-nav a.is-active { color:#C94F27; }

    /* Bouton primaire effet */
    .btn-primary { background: linear-gradient(120deg,#E86A3E,#F2824E); }
    .btn-primary:hover { background: linear-gradient(120deg,#C94F27,#E86A3E); }

    /* Étoile manuscrite */
    .scribble-star::after {
      content: "✶"; color: #F5C842; margin-left: .3em; display:inline-block; transform: translateY(-.05em);
    }

    /* FAQ */
    details > summary { list-style: none; cursor: pointer; }
    details > summary::-webkit-details-marker { display:none; }
    details[open] .faq-icon { transform: rotate(45deg); }
    .faq-icon { transition: transform .25s ease; }

    /* Photo polaroid */
    .polaroid { background:#fff; padding:.7rem .7rem 1.3rem; border-radius: 1rem; box-shadow: 0 18px 40px -18px rgba(31,27,22,.35); transition: transform .4s ease; }
    .polaroid:hover { transform: rotate(-1deg) scale(1.03); }
    .polaroid img { display:block; width:100%; height:200px; object-fit:cover; border-radius:.5rem; }
    .polaroid figcaption { margin-top:.5rem; font-family:'Caveat',cursive; font-size:1.25rem; text-align:center; color:#5d4a35; }
    .polaroid-lac { transform: rotate(-1.2deg); }
    .polaroid-bocasse { transform: rotate(1deg); }
    .polaroid-resto { transform: rotate(-.5deg); }
    .polaroid-bar { transform: rotate(1.4deg); }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
      .reveal { opacity: 1; transform: none; }
      .marquee { transform: none !important; }
    }