@import url('./assets/fonts/fonts.css');

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      background-color: #F7F3EC;
      color: #1A1814;
      font-family: 'DM Sans', system-ui, sans-serif;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    /* ---- Hero entrance animations ---- */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(56px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes imgReveal {
      from { opacity: 0; transform: scale(1.07); }
      to   { opacity: 1; transform: scale(1); }
    }
    @keyframes lineGrow {
      from { transform: scaleX(0); transform-origin: left; }
      to   { transform: scaleX(1); transform-origin: left; }
    }
    @keyframes scrollPulse {
      0%, 100% { transform: scaleY(1); opacity: 0.35; }
      50%      { transform: scaleY(0.4); opacity: 0.9; }
    }
    @keyframes tagFloat {
      0%, 100% { transform: rotate(-4deg) translateY(0); }
      50%      { transform: rotate(-4deg) translateY(-8px); }
    }

    .h-label  { animation: fadeUp 0.9s cubic-bezier(0.16,1,0.3,1) 0.08s both; }
    .h-title  { animation: fadeUp 1s   cubic-bezier(0.16,1,0.3,1) 0.24s both; }
    .h-rule   { animation: lineGrow 0.8s cubic-bezier(0.16,1,0.3,1) 0.42s both; }
    .h-body   { animation: fadeUp 0.9s cubic-bezier(0.16,1,0.3,1) 0.48s both; }
    .h-cta    { animation: fadeUp 0.9s cubic-bezier(0.16,1,0.3,1) 0.64s both; }
    .h-img    { animation: imgReveal 1.5s cubic-bezier(0.16,1,0.3,1) 0.1s both; }

    /* ---- Scroll reveal ---- */
    .reveal {
      opacity: 0;
      transform: translateY(36px);
      transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1),
                  transform 0.9s cubic-bezier(0.16,1,0.3,1);
    }
    .reveal.on  { opacity: 1; transform: none; }

    .reveal-s {
      opacity: 0;
      transform: scale(1.05);
      transition: opacity 1.1s cubic-bezier(0.16,1,0.3,1),
                  transform 1.1s cubic-bezier(0.16,1,0.3,1);
    }
    .reveal-s.on { opacity: 1; transform: scale(1); }

    .d1 { transition-delay: 0.1s;  }
    .d2 { transition-delay: 0.22s; }
    .d3 { transition-delay: 0.36s; }
    .d4 { transition-delay: 0.52s; }

    /* ---- Reduced motion override ---- */
    @media (prefers-reduced-motion: reduce) {
      .h-label, .h-title, .h-rule, .h-body, .h-cta, .h-img {
        animation: none; opacity: 1; transform: none;
      }
      .reveal, .reveal-s {
        transition: none; opacity: 1; transform: none;
      }
    }

    /* ---- Image hover zoom ---- */
    .zoom { overflow: hidden; display: block; }
    .zoom img {
      display: block;
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform 0.9s cubic-bezier(0.16,1,0.3,1);
    }
    .zoom:hover img { transform: scale(1.06); }

    /* ---- Nav link hover ---- */
    .nav-link { opacity: 0.65; transition: opacity 0.2s; }
    .nav-link:hover { opacity: 1; }

    /* ---- Button hover ---- */
    .btn-sage { transition: background 0.25s, color 0.25s; }
    .btn-sage:hover { background: #1A1814 !important; }

    .btn-light { transition: background 0.25s, color 0.25s; }
    .btn-light:hover { background: #3A5044 !important; color: #F7F3EC !important; }

    .btn-outline { transition: background 0.25s, border-color 0.25s; }
    .btn-outline:hover {
      background: rgba(247,243,236,0.12) !important;
      border-color: rgba(247,243,236,0.8) !important;
    }

    .link-underline { transition: color 0.2s, border-color 0.2s; }
    .link-underline:hover { color: #1A1814 !important; border-color: #1A1814 !important; }

    .contact-link { transition: color 0.2s; }
    .contact-link:hover { color: #EDE8DF !important; }

    /* ---- Hero v2 ---- */
    .scroll-line { animation: scrollPulse 2.2s ease-in-out infinite; }
    .hero-tag { animation: tagFloat 4.5s ease-in-out infinite; }
    @media (prefers-reduced-motion: reduce) {
      .scroll-line, .hero-tag { animation: none; }
    }

    /* ---- Menu mobile (bouton + panneau) ---- */
    .menu-btn {
      width: 40px; height: 40px;
      align-items: center; justify-content: center;
      flex-direction: column; gap: 5px;
      background: transparent; border: none; padding: 0;
      cursor: pointer; flex-shrink: 0;
    }
    .menu-bar {
      display: block; width: 22px; height: 2px;
      background: currentColor; border-radius: 1px;
      transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), opacity 0.3s;
    }
    .menu-btn[aria-expanded="true"] .menu-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .menu-btn[aria-expanded="true"] .menu-bar:nth-child(2) { opacity: 0; }
    .menu-btn[aria-expanded="true"] .menu-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .mobile-menu {
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transition: max-height 0.4s cubic-bezier(0.16,1,0.3,1), opacity 0.3s;
      background: #F7F3EC;
    }
    .mobile-menu.open {
      max-height: 480px;
      opacity: 1;
    }

    /* ---- Mise en page responsive ---- */
    @media (max-width: 880px) {
      .nav-links, .nav-cta { display: none !important; }
      .menu-btn { display: flex !important; }

      #site-header nav { padding: 0 20px !important; }

      #hero { padding: 0 !important; }
      .hero-vlabel { display: none !important; }
      .hero-tag { top: 92px !important; right: 20px !important; padding: 10px 16px !important; }
      .hero-bottom { padding: 32px 20px 28px !important; }
      .hero-bottom-row { flex-direction: column !important; align-items: flex-start !important; gap: 28px !important; }
      .hero-side { max-width: 100% !important; }
      #hero-heading { font-size: clamp(52px, 15vw, 96px) !important; }
      .hero-meta-row { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; }

      .manifesto-section { padding: 72px 24px !important; min-height: auto !important; }

      #collections { padding: 72px 24px !important; }
      .collections-head { flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; margin-bottom: 56px !important; }
      .collections-grid { grid-template-columns: 1fr !important; gap: 56px !important; }
      .collection-item { margin-top: 0 !important; }

      #sur-mesure { grid-template-columns: 1fr !important; min-height: auto !important; }
      .sur-mesure-image { min-height: 320px !important; }
      .sur-mesure-text { padding: 56px 24px !important; }

      #atelier { min-height: auto !important; }
      .atelier-content { padding: 64px 24px !important; }

      #contact { padding: 72px 24px !important; }
      .contact-grid { grid-template-columns: 1fr !important; gap: 48px !important; }

      .site-footer { padding: 24px 20px !important; }
      .footer-inner { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
    }