/* VistaNova polish.css — bundle de tous les overrides UI premium */

/* ============ polish-ui-v37 ============ */
/* ============================================================
       FAQ v37 — Carousel premium SLIDE : 1 question visible a la fois
       ============================================================ */
    body:not(.page-boutique) .faq-doc {
      display: block !important;
      max-width: 880px !important;
      margin: 0 auto !important;
      position: relative !important;
      grid-template-columns: none !important;
    }

    /* Wrapper carousel : ajoute les controles via CSS */
    body:not(.page-boutique) .faq-doc::before {
      content: 'Question ' attr(data-current) ' / 08';
      position: absolute;
      top: -2.6rem;
      left: 50%;
      transform: translateX(-50%);
      color: #e0b480;
      font-family: 'Cinzel', serif;
      font-size: 0.7rem;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      pointer-events: none;
    }

    /* Liste = piste de carousel */
    .faq-doc-nav,
    .faq-v20 .faq-doc-nav {
      display: block !important;
      grid-template-columns: none !important;
      position: relative !important;
      list-style: none !important;
      padding: 0 !important;
      margin: 0 !important;
      min-height: 360px !important;
    }

    /* Une seule question visible a la fois */
    .faq-item {
      display: none !important;
      list-style: none !important;
      animation: faqSlideIn .5s cubic-bezier(.2,.7,.2,1) !important;
    }
    .faq-item.is-visible {
      display: block !important;
    }
    @keyframes faqSlideIn {
      from { opacity: 0; transform: translateX(30px); }
      to { opacity: 1; transform: translateX(0); }
    }

    /* La question elle-meme : carte premium pleine largeur */
    .faq-q {
      display: grid !important;
      grid-template-columns: auto 1fr auto !important;
      align-items: center !important;
      gap: 18px !important;
      padding: 22px 28px !important;
      background:
        radial-gradient(circle 300px at 0% 50%, rgba(224,180,128,0.15) 0%, transparent 70%),
        linear-gradient(135deg, rgba(224, 180, 128, 0.12) 0%, rgba(224, 180, 128, 0.04) 100%) !important;
      border: 1px solid rgba(224, 180, 128, 0.45) !important;
      border-radius: 16px 16px 0 0 !important;
      cursor: default !important;
      box-shadow: 0 18px 40px -16px rgba(224, 180, 128, 0.35) !important;
      position: relative !important;
    }
    .faq-q-num {
      width: 52px !important;
      height: 52px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      border-radius: 50% !important;
      background: linear-gradient(135deg, #e0b480 0%, #c89a64 100%) !important;
      color: #0c221c !important;
      font-family: 'Cinzel', serif !important;
      font-size: 1.1rem !important;
      font-weight: 700 !important;
      box-shadow: 0 10px 22px -6px rgba(224, 180, 128, 0.6), 0 0 0 6px rgba(224, 180, 128, 0.15) !important;
      flex-shrink: 0 !important;
    }
    .faq-q-title {
      font-family: 'Cormorant Garamond', serif !important;
      font-size: clamp(1.1rem, 2vw, 1.4rem) !important;
      font-weight: 500 !important;
      line-height: 1.25 !important;
      color: #fdebd6 !important;
      letter-spacing: 0.01em !important;
    }
    .faq-q-cat {
      display: inline-block !important;
      padding: 5px 14px !important;
      background: rgba(12, 34, 28, 0.5) !important;
      color: #fdebd6 !important;
      font-family: 'Cinzel', serif !important;
      font-size: 0.6rem !important;
      letter-spacing: 0.24em !important;
      text-transform: uppercase !important;
      border-radius: 999px !important;
      border: 1px solid rgba(253, 235, 214, 0.35) !important;
      white-space: nowrap !important;
    }
    /* Pas de chevron en mode slide */
    .faq-q::before { display: none !important; }
    .faq-q::after { display: none !important; }

    /* Reponse : grand panneau dore juste dessous, toujours visible quand item actif */
    .faq-item .faq-a,
    .faq-item .faq-a.is-active {
      display: block !important;
      padding: clamp(2rem, 4vw, 3rem) !important;
      background:
        radial-gradient(circle 300px at 100% 0%, rgba(20, 48, 42, 0.15) 0%, transparent 65%),
        radial-gradient(circle 280px at 0% 100%, rgba(20, 48, 42, 0.1) 0%, transparent 65%),
        linear-gradient(180deg, #e0b480 0%, #c89a64 100%) !important;
      border: 1px solid rgba(20, 48, 42, 0.3) !important;
      border-top: 0 !important;
      border-radius: 0 0 16px 16px !important;
      box-shadow: 0 30px 60px -22px rgba(0, 0, 0, 0.5) !important;
      margin: 0 !important;
      animation: none !important;
    }
    .faq-a::before { display: none !important; }
    .faq-a-cat {
      display: inline-block !important;
      padding: 0.4rem 1.1rem !important;
      background: #0c221c !important;
      color: #e0b480 !important;
      font-family: 'Cinzel', serif !important;
      font-size: 0.66rem !important;
      letter-spacing: 0.26em !important;
      text-transform: uppercase !important;
      border-radius: 999px !important;
      margin-bottom: 1.2rem !important;
    }
    .faq-a h3 {
      font-family: 'Cinzel', serif !important;
      font-weight: 500 !important;
      font-size: clamp(1.3rem, 2.4vw, 1.7rem) !important;
      color: #0c221c !important;
      margin: 0 0 1.2rem !important;
      line-height: 1.2 !important;
    }
    .faq-a p {
      font-family: 'Cormorant Garamond', serif !important;
      font-style: italic !important;
      font-size: 1.08rem !important;
      line-height: 1.65 !important;
      color: #14302a !important;
      margin: 0 0 1rem !important;
    }
    .faq-a p strong { color: #0c221c !important; font-style: normal !important; font-weight: 600 !important; }
    .faq-a-tip {
      margin-top: 1.4rem !important;
      padding: 1rem 1.2rem !important;
      background: rgba(12, 34, 28, 0.12) !important;
      border-left: 3px solid #0c221c !important;
      border-radius: 4px !important;
      font-family: 'Inter', sans-serif !important;
      font-style: normal !important;
      font-size: 0.92rem !important;
      line-height: 1.55 !important;
      color: #14302a !important;
    }

    /* Controles du carousel : ajoute via .faq-nav (cree par JS) */
    .faq-nav {
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
      max-width: 880px !important;
      margin: clamp(1.5rem, 3vw, 2.4rem) auto 0 !important;
      gap: 12px !important;
    }
    .faq-nav-btn {
      width: 52px !important;
      height: 52px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      border-radius: 50% !important;
      border: 1px solid rgba(224, 180, 128, 0.5) !important;
      background: rgba(20, 48, 42, 0.5) !important;
      color: #e0b480 !important;
      cursor: pointer !important;
      transition: all .35s cubic-bezier(.2,.7,.2,1) !important;
      backdrop-filter: blur(8px) !important;
    }
    .faq-nav-btn:hover:not(:disabled) {
      background: linear-gradient(135deg, #e0b480 0%, #c89a64 100%) !important;
      color: #0c221c !important;
      border-color: transparent !important;
      transform: scale(1.06) !important;
      box-shadow: 0 10px 24px -8px rgba(224, 180, 128, 0.5) !important;
    }
    .faq-nav-btn:disabled {
      opacity: 0.35 !important;
      cursor: not-allowed !important;
    }
    .faq-nav-btn svg { width: 18px !important; height: 18px !important; }
    .faq-dots {
      display: flex !important;
      gap: 8px !important;
      justify-content: center !important;
      flex: 1 !important;
    }
    .faq-dot {
      width: 8px !important;
      height: 8px !important;
      border-radius: 50% !important;
      background: rgba(224, 180, 128, 0.3) !important;
      border: 0 !important;
      cursor: pointer !important;
      transition: all .3s ease !important;
      padding: 0 !important;
    }
    .faq-dot:hover { background: rgba(224, 180, 128, 0.6) !important; }
    .faq-dot.is-active {
      background: #e0b480 !important;
      width: 28px !important;
      border-radius: 999px !important;
      box-shadow: 0 0 12px rgba(224, 180, 128, 0.6) !important;
    }

    /* ============================================================
       v37 — Section VIDEOS (selected work + portfolio)
       ============================================================ */
    .work-videos {
      max-width: 1400px;
      margin: clamp(2rem, 5vw, 4rem) auto 0;
      padding: 0 var(--pad-x, 1.5rem);
      display: grid;
      grid-template-columns: 9fr 16fr 16fr;
      gap: clamp(1rem, 2vw, 1.8rem);
      align-items: stretch;
    }
    @media (max-width: 880px) {
      .work-videos { grid-template-columns: 1fr; }
    }
    /* Card vertical (9:16) — pour les reels portrait */
    .work-video-card.work-video-vertical {
      aspect-ratio: 9/16 !important;
    }
    .work-video-card {
      position: relative;
      aspect-ratio: 16/9;
      border-radius: 16px;
      overflow: hidden;
      background: #0a1c17;
      border: 1px solid rgba(224, 180, 128, 0.25);
      cursor: pointer;
      transition: all .5s cubic-bezier(.2,.7,.2,1);
      box-shadow: 0 18px 40px -18px rgba(0,0,0,0.5);
    }
    .work-video-card:hover {
      transform: translateY(-4px) scale(1.01);
      border-color: rgba(224, 180, 128, 0.6);
      box-shadow: 0 32px 60px -22px rgba(0,0,0,0.7), 0 0 50px -16px rgba(224, 180, 128, 0.4);
    }
    .work-video-card video {
      width: 100%; height: 100%;
      object-fit: cover;
      filter: saturate(0.95) contrast(1.04);
    }
    .work-video-card .video-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(12,34,28,0.85) 0%, rgba(12,34,28,0.3) 50%, transparent 100%);
      display: flex;
      align-items: flex-end;
      padding: 1.5rem;
      pointer-events: none;
    }
    .work-video-card .video-label {
      color: #fdebd6;
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 1.1rem;
      line-height: 1.2;
    }
    .work-video-card .video-cat {
      display: block;
      color: #e0b480;
      font-family: 'Cinzel', serif;
      font-size: 0.62rem;
      letter-spacing: 0.26em;
      text-transform: uppercase;
      margin-bottom: 6px;
    }
    .work-video-card .play-badge {
      position: absolute;
      top: 18px; right: 18px;
      width: 44px; height: 44px;
      border-radius: 50%;
      background: linear-gradient(135deg, #e0b480 0%, #c89a64 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 22px -4px rgba(224, 180, 128, 0.6);
      z-index: 2;
    }
    .work-video-card .play-badge svg {
      width: 18px; height: 18px;
      fill: #0c221c;
    }

/* ============ polish-ui-v36 ============ */
/* ============================================================
       FAQ v36 — Refonte complete : accordeon vertical premium
       ============================================================ */
    /* Override TOUS les anciens layouts FAQ */
    body:not(.page-boutique) .faq-doc,
    .faq-doc {
      display: block !important;
      max-width: 880px !important;
      margin: 0 auto !important;
      grid-template-columns: none !important;
      gap: 0 !important;
    }
    .faq-doc-nav,
    .faq-v20 .faq-doc-nav {
      display: flex !important;
      flex-direction: column !important;
      gap: 12px !important;
      grid-template-columns: none !important;
      list-style: none !important;
      padding: 0 !important;
      margin: 0 !important;
    }
    .faq-item {
      display: block !important;
      list-style: none !important;
      position: relative !important;
    }

    /* Question : carte premium dore profond, glow doré au hover/actif */
    .faq-q {
      display: grid !important;
      grid-template-columns: auto 1fr auto !important;
      align-items: center !important;
      gap: 18px !important;
      padding: 18px 56px 18px 22px !important;
      background:
        radial-gradient(circle 200px at 0% 50%, rgba(224,180,128,0.06) 0%, transparent 70%),
        linear-gradient(180deg, rgba(20, 48, 42, 0.55) 0%, rgba(20, 48, 42, 0.35) 100%) !important;
      border: 1px solid rgba(224, 180, 128, 0.22) !important;
      border-radius: 14px !important;
      cursor: pointer !important;
      transition: all .4s cubic-bezier(.2,.7,.2,1) !important;
      position: relative !important;
      overflow: hidden !important;
      box-sizing: border-box !important;
    }
    .faq-q::before {
      content: '' !important;
      position: absolute !important;
      left: 0; top: 0; bottom: 0;
      width: 3px !important;
      background: linear-gradient(180deg, #e0b480, #c89a64) !important;
      transform: scaleY(0) !important;
      transform-origin: center !important;
      transition: transform .4s cubic-bezier(.2,.7,.2,1) !important;
      z-index: 2 !important;
    }
    .faq-q:hover {
      background:
        radial-gradient(circle 300px at 0% 50%, rgba(224,180,128,0.12) 0%, transparent 70%),
        linear-gradient(180deg, rgba(20, 48, 42, 0.7) 0%, rgba(20, 48, 42, 0.5) 100%) !important;
      border-color: rgba(224, 180, 128, 0.5) !important;
    }
    .faq-q:hover::before { transform: scaleY(1) !important; }
    .faq-q.is-active {
      background:
        radial-gradient(circle 400px at 0% 50%, rgba(224, 180, 128, 0.22) 0%, transparent 70%),
        linear-gradient(135deg, rgba(224, 180, 128, 0.18) 0%, rgba(224, 180, 128, 0.06) 100%) !important;
      border-color: rgba(224, 180, 128, 0.65) !important;
      border-bottom-left-radius: 0 !important;
      border-bottom-right-radius: 0 !important;
      box-shadow: 0 18px 40px -16px rgba(224, 180, 128, 0.4) !important;
    }
    .faq-q.is-active::before {
      transform: scaleY(1) !important;
      width: 4px !important;
      box-shadow: 0 0 16px rgba(224, 180, 128, 0.7) !important;
    }
    .faq-q-num {
      width: 42px !important;
      height: 42px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      border-radius: 50% !important;
      background: rgba(12, 34, 28, 0.5) !important;
      border: 1px solid rgba(224, 180, 128, 0.4) !important;
      color: #e0b480 !important;
      font-family: 'Cinzel', serif !important;
      font-size: 0.95rem !important;
      font-weight: 600 !important;
      letter-spacing: 0.05em !important;
      transition: all .4s ease !important;
      flex-shrink: 0 !important;
    }
    .faq-q.is-active .faq-q-num {
      background: linear-gradient(135deg, #e0b480 0%, #c89a64 100%) !important;
      color: #0c221c !important;
      border-color: transparent !important;
      box-shadow: 0 8px 22px -6px rgba(224, 180, 128, 0.6), 0 0 0 5px rgba(224, 180, 128, 0.15) !important;
    }
    .faq-q-title {
      font-family: 'Cormorant Garamond', serif !important;
      font-style: normal !important;
      font-size: 1.08rem !important;
      font-weight: 500 !important;
      line-height: 1.3 !important;
      color: #fdebd6 !important;
      letter-spacing: 0.005em !important;
    }
    .faq-q.is-active .faq-q-title { color: #fdebd6 !important; font-weight: 600 !important; }
    .faq-q-cat {
      display: inline-block !important;
      padding: 4px 12px !important;
      background: rgba(224, 180, 128, 0.1) !important;
      color: #e0b480 !important;
      font-family: 'Cinzel', serif !important;
      font-size: 0.58rem !important;
      letter-spacing: 0.22em !important;
      text-transform: uppercase !important;
      border-radius: 999px !important;
      border: 1px solid rgba(224, 180, 128, 0.22) !important;
      white-space: nowrap !important;
    }
    .faq-q.is-active .faq-q-cat {
      background: rgba(12, 34, 28, 0.5) !important;
      color: #fdebd6 !important;
      border-color: rgba(253, 235, 214, 0.4) !important;
    }
    /* Chevron */
    .faq-q::after {
      content: '+' !important;
      position: absolute !important;
      right: 22px !important;
      top: 50% !important;
      transform: translateY(-50%) !important;
      color: #e0b480 !important;
      font-family: 'Cinzel', serif !important;
      font-size: 1.4rem !important;
      font-weight: 300 !important;
      transition: transform .35s ease !important;
      pointer-events: none !important;
    }
    .faq-q.is-active::after {
      content: '–' !important;
      transform: translateY(-50%) rotate(180deg) !important;
    }

    /* Reponse : carte DORÉE (au lieu de beige) */
    .faq-item .faq-a {
      display: none !important;
    }
    .faq-item .faq-a.is-active {
      display: block !important;
      padding: clamp(1.8rem, 3vw, 2.6rem) !important;
      background:
        radial-gradient(circle 300px at 100% 0%, rgba(20, 48, 42, 0.15) 0%, transparent 65%),
        radial-gradient(circle 280px at 0% 100%, rgba(20, 48, 42, 0.1) 0%, transparent 65%),
        linear-gradient(180deg, #e0b480 0%, #c89a64 100%) !important;
      border: 1px solid rgba(20, 48, 42, 0.25) !important;
      border-top: 0 !important;
      border-radius: 0 0 14px 14px !important;
      box-shadow: 0 22px 40px -18px rgba(0, 0, 0, 0.45) !important;
      margin-top: -1px !important;
      animation: faqExpand .45s cubic-bezier(.2,.7,.2,1) !important;
    }
    @keyframes faqExpand {
      from { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; }
      to { opacity: 1; max-height: 2000px; }
    }
    .faq-a::before { display: none !important; }
    .faq-a-cat {
      display: inline-block !important;
      padding: 0.35rem 1rem !important;
      background: #0c221c !important;
      color: #e0b480 !important;
      font-family: 'Cinzel', serif !important;
      font-size: 0.62rem !important;
      letter-spacing: 0.26em !important;
      text-transform: uppercase !important;
      border-radius: 999px !important;
      margin-bottom: 1rem !important;
    }
    .faq-a h3 {
      font-family: 'Cinzel', serif !important;
      font-weight: 500 !important;
      font-size: clamp(1.2rem, 2vw, 1.5rem) !important;
      color: #0c221c !important;
      margin: 0 0 1rem !important;
      line-height: 1.2 !important;
    }
    .faq-a p {
      font-family: 'Cormorant Garamond', serif !important;
      font-style: italic !important;
      font-size: 1.02rem !important;
      line-height: 1.6 !important;
      color: #1a3a30 !important;
      margin: 0 0 0.8rem !important;
    }
    .faq-a p strong {
      color: #0c221c !important;
      font-style: normal !important;
      font-weight: 600 !important;
    }
    .faq-a-tip {
      margin-top: 1.2rem !important;
      padding: 0.85rem 1.05rem !important;
      background: rgba(12, 34, 28, 0.1) !important;
      border-left: 3px solid #0c221c !important;
      border-radius: 4px !important;
      font-family: 'Inter', sans-serif !important;
      font-style: normal !important;
      font-size: 0.88rem !important;
      line-height: 1.55 !important;
      color: #14302a !important;
    }

    /* ============================================================
       v36 — BEIGE -> OR : tous les fonds beige du site passent en dore
       ============================================================ */
    /* boutique panneau : couleurs adapt */
    body.page-boutique .modal-options fieldset legend,
    body.page-offre .svc-card-body,
    body.page-offre .offre-cta-band {
      background-image:
        radial-gradient(circle 300px at 0% 0%, rgba(20, 48, 42, 0.15) 0%, transparent 60%),
        linear-gradient(180deg, #e0b480 0%, #c89a64 100%) !important;
    }

    /* ============================================================
       Email + bouton lead magnet : compact inline (v36)
       ============================================================ */
    html body .lead-magnet-v32 .lm-form-row,
    html body .lm-form-row {
      display: flex !important;
      flex-direction: row !important;
      gap: 8px !important;
      align-items: stretch !important;
      flex-wrap: nowrap !important;
      max-width: 540px !important;
      background: rgba(12, 34, 28, 0.5) !important;
      border: 1px solid rgba(224, 180, 128, 0.3) !important;
      border-radius: 999px !important;
      padding: 4px !important;
    }
    html body .lead-magnet-v32 .lm-form-row input[type="email"],
    html body .lm-form-row input[type="email"] {
      flex: 1 1 auto !important;
      min-width: 0 !important;
      max-width: 100% !important;
      padding: 0.65rem 1rem !important;
      height: 42px !important;
      border-radius: 999px !important;
      border: 0 !important;
      background: transparent !important;
      color: #fdebd6 !important;
      font-family: 'Inter', sans-serif !important;
      font-size: 0.88rem !important;
      outline: none !important;
      box-shadow: none !important;
    }
    html body .lead-magnet-v32 .lm-form-row input[type="email"]::placeholder,
    html body .lm-form-row input[type="email"]::placeholder {
      color: rgba(253, 235, 214, 0.55) !important;
      opacity: 1 !important;
    }
    html body .lead-magnet-v32 .lm-form-row .big-cta,
    html body .lm-form-row .big-cta {
      flex: 0 0 auto !important;
      padding: 0 1.4rem !important;
      height: 42px !important;
      font-size: 0.72rem !important;
      letter-spacing: 0.18em !important;
      text-transform: uppercase !important;
      background: linear-gradient(135deg, #e0b480 0%, #c89a64 100%) !important;
      color: #0c221c !important;
      border: 0 !important;
      border-radius: 999px !important;
      font-family: 'Cinzel', serif !important;
      font-weight: 600 !important;
      box-shadow: 0 6px 16px -6px rgba(224, 180, 128, 0.5) !important;
      cursor: pointer !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 0.4rem !important;
      white-space: nowrap !important;
      transition: transform .3s cubic-bezier(.2,.7,.2,1) !important;
    }
    html body .lead-magnet-v32 .lm-form-row .big-cta:hover,
    html body .lm-form-row .big-cta:hover {
      transform: translateY(-1px) scale(1.02) !important;
    }
    html body .lead-magnet-v32 .lm-form-row .big-cta svg,
    html body .lm-form-row .big-cta svg {
      width: 12px !important; height: 12px !important;
    }

    /* ============================================================
       MOBILE v36 : burger visible + cards reduites + lm-form-row
       ============================================================ */
    @media (max-width: 820px) {
      /* Burger toujours visible */
      html body .burger {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        width: 44px !important;
        height: 44px !important;
        gap: 5px !important;
        z-index: 110 !important;
        background: transparent !important;
        border: 0 !important;
        cursor: pointer !important;
        padding: 0 !important;
      }
      html body .burger span {
        display: block !important;
        width: 22px !important;
        height: 2px !important;
        background: #fdebd6 !important;
        transition: transform .3s ease, opacity .3s ease !important;
      }
      html body .burger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
      html body .burger.is-active span:nth-child(2) { opacity: 0 !important; }
      html body .burger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }

      /* Lead magnet form row : pile vertical sur mobile */
      html body .lead-magnet-v32 .lm-form-row,
      html body .lm-form-row {
        flex-direction: column !important;
        gap: 6px !important;
        background: transparent !important;
        border: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
      }
      html body .lead-magnet-v32 .lm-form-row input[type="email"],
      html body .lm-form-row input[type="email"] {
        background: rgba(12, 34, 28, 0.5) !important;
        border: 1px solid rgba(224, 180, 128, 0.3) !important;
        padding: 0.55rem 0.9rem !important;
        height: 38px !important;
        font-size: 0.82rem !important;
        width: 100% !important;
      }
      html body .lead-magnet-v32 .lm-form-row .big-cta,
      html body .lm-form-row .big-cta {
        width: 100% !important;
        justify-content: center !important;
        height: 38px !important;
        padding: 0 1rem !important;
        font-size: 0.7rem !important;
      }

      /* Shop cards : 2 colonnes mobile au lieu de 1 */
      html body .shop-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        padding: 0 12px !important;
      }
      html body .shop-card {
        font-size: 0.8rem !important;
      }
      html body .shop-card-media {
        aspect-ratio: 4/5 !important;
      }
      html body .shop-card-body { padding: 10px 8px !important; }
      html body .shop-card-body h3 { font-size: 0.92rem !important; margin: 0 0 4px !important; line-height: 1.2 !important; }
      html body .shop-card-body .shop-num { font-size: 0.62rem !important; letter-spacing: 0.18em !important; }
      html body .shop-card-body .shop-meta { font-size: 0.7rem !important; margin: 0 0 4px !important; }
      html body .shop-card-body .shop-price { font-size: 0.85rem !important; }

      /* Work mosaique "Du sol au ciel" : 2 colonnes mobile */
      html body .work-mosaic,
      html body .work-v23 .work-mosaic {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        grid-auto-rows: 140px !important;
      }
      html body .work-card,
      html body .work-v23 .work-card,
      html body .work-card-hero,
      html body .work-card-wide,
      html body .work-card-tall {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
      }
      /* Premiere card hero plus grande pour rythme */
      html body .work-v23 .work-card:first-child,
      html body .work-mosaic .work-card:first-child {
        grid-column: span 2 !important;
        grid-row: span 2 !important;
      }
      html body .work-card .work-card-overlay h3,
      html body .work-v23 .work-card .work-card-overlay h3 {
        font-size: 0.95rem !important;
      }
      html body .work-v23 .work-card:first-child .work-card-overlay h3 {
        font-size: 1.3rem !important;
      }
    }

    /* ============ FAQ accordeon v35 : Q + reponse inline dans le meme item ============ */

/* ============ FAQ accordeon v35 : Q + reponse inline dans le meme item ============ */
    .faq-item {
      display: flex !important;
      flex-direction: column !important;
      gap: 10px !important;
      list-style: none !important;
    }
    .faq-item .faq-a {
      display: none !important;
      margin-top: 0 !important;
    }
    .faq-item .faq-a.is-active {
      display: block !important;
      animation: faqInlineIn .4s cubic-bezier(.2,.7,.2,1) !important;
    }
    @keyframes faqInlineIn {
      from { opacity: 0; transform: translateY(-6px); }
      to { opacity: 1; transform: translateY(0); }
    }
    /* Le triangle pointe vers la question juste au-dessus */
    .faq-item .faq-a::before {
      top: -8px !important;
      left: 40px !important;
    }

    /* ============ Email field : fond clair, compact ============ */
    html body .lead-magnet-v20 .lm-form-row input[type="email"],
    html body .lead-magnet-v32 .lm-form-row input[type="email"],
    html body .lm-form .lm-form-row input[type="email"] {
      flex: 1 1 220px !important;
      max-width: 100% !important;
      min-width: 0 !important;
      padding: 0.65rem 1rem !important;
      height: auto !important;
      border-radius: 999px !important;
      border: 1px solid rgba(224,180,128,0.5) !important;
      background: #fdebd6 !important;
      color: #14302a !important;
      font-family: 'Inter', sans-serif !important;
      font-size: 0.88rem !important;
      font-weight: 400 !important;
      outline: none !important;
      transition: border-color .25s ease, box-shadow .25s ease !important;
    }
    html body .lead-magnet-v20 .lm-form-row input[type="email"]::placeholder,
    html body .lead-magnet-v32 .lm-form-row input[type="email"]::placeholder,
    html body .lm-form .lm-form-row input[type="email"]::placeholder {
      color: rgba(20, 48, 42, 0.55) !important;
      opacity: 1 !important;
    }
    html body .lead-magnet-v20 .lm-form-row input[type="email"]:focus,
    html body .lead-magnet-v32 .lm-form-row input[type="email"]:focus,
    html body .lm-form .lm-form-row input[type="email"]:focus {
      border-color: #c89a64 !important;
      background: #faedd0 !important;
      box-shadow: 0 0 0 3px rgba(224, 180, 128, 0.22) !important;
    }

    /* ============================================================
       FAQ v34 — accordeon premium 1 colonne, plus aere, plus elegant
       ============================================================ */
    /* On annule la grille 2-col du panneau de reponses */
    body:not(.page-boutique) .faq-doc {
      display: block !important;
      max-width: 880px !important;
      margin: 0 auto !important;
    }
    .faq-doc-nav {
      display: flex !important;
      flex-direction: column !important;
      gap: 14px !important;
      list-style: none !important;
      padding: 0 !important;
      margin: 0 !important;
    }
    /* Chaque question = une carte premium pleine largeur */
    .faq-q {
      display: grid !important;
      grid-template-columns: auto 1fr auto !important;
      align-items: center !important;
      gap: 18px !important;
      padding: 18px 22px !important;
      background: linear-gradient(180deg, rgba(20, 48, 42, 0.55) 0%, rgba(20, 48, 42, 0.35) 100%) !important;
      border: 1px solid rgba(224, 180, 128, 0.2) !important;
      border-radius: 14px !important;
      cursor: pointer !important;
      transition: all .45s cubic-bezier(.2,.7,.2,1) !important;
      position: relative !important;
      overflow: hidden !important;
    }
    .faq-q::before {
      content: '' !important;
      position: absolute !important;
      left: 0; top: 0; bottom: 0;
      width: 3px !important;
      background: linear-gradient(180deg, #e0b480, #c89a64) !important;
      transform: scaleY(0) !important;
      transform-origin: center !important;
      transition: transform .45s cubic-bezier(.2,.7,.2,1) !important;
    }
    .faq-q:hover {
      background: linear-gradient(180deg, rgba(20, 48, 42, 0.7) 0%, rgba(20, 48, 42, 0.5) 100%) !important;
      border-color: rgba(224, 180, 128, 0.45) !important;
      transform: translateX(4px) !important;
    }
    .faq-q:hover::before { transform: scaleY(1) !important; }

    /* Etat actif : la carte s'illumine et se gonfle */
    .faq-q.is-active {
      background:
        radial-gradient(circle 300px at 0% 50%, rgba(224, 180, 128, 0.12) 0%, transparent 60%),
        linear-gradient(180deg, rgba(224, 180, 128, 0.08) 0%, rgba(224, 180, 128, 0.04) 100%) !important;
      border-color: rgba(224, 180, 128, 0.6) !important;
      box-shadow: 0 18px 40px -16px rgba(224, 180, 128, 0.4), 0 4px 12px rgba(0,0,0,0.25) !important;
      transform: translateX(0) !important;
    }
    .faq-q.is-active::before {
      transform: scaleY(1) !important;
      background: linear-gradient(180deg, #fdebd6, #e0b480) !important;
      box-shadow: 0 0 12px rgba(224, 180, 128, 0.6) !important;
    }

    /* Numero dore en grosse typo */
    .faq-q-num {
      grid-row: 1 !important;
      font-family: 'Cinzel', serif !important;
      font-size: 1.1rem !important;
      font-weight: 600 !important;
      color: #e0b480 !important;
      letter-spacing: 0.1em !important;
      width: 44px !important;
      height: 44px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      border: 1px solid rgba(224, 180, 128, 0.35) !important;
      border-radius: 50% !important;
      background: rgba(12, 34, 28, 0.4) !important;
      transition: all .4s ease !important;
      flex-shrink: 0 !important;
    }
    .faq-q.is-active .faq-q-num {
      background: linear-gradient(135deg, #e0b480, #c89a64) !important;
      color: #0c221c !important;
      border-color: transparent !important;
      box-shadow: 0 6px 16px -4px rgba(224, 180, 128, 0.5) !important;
    }
    /* Titre */
    .faq-q-title {
      font-family: 'Cormorant Garamond', serif !important;
      font-style: normal !important;
      font-size: 1.1rem !important;
      font-weight: 500 !important;
      line-height: 1.3 !important;
      color: #fdebd6 !important;
      letter-spacing: 0.01em !important;
    }
    .faq-q.is-active .faq-q-title { color: #fdebd6 !important; font-weight: 600 !important; }
    /* Categorie en chip a droite */
    .faq-q-cat {
      display: inline-block !important;
      padding: 4px 12px !important;
      background: rgba(224, 180, 128, 0.12) !important;
      color: #e0b480 !important;
      font-family: 'Cinzel', serif !important;
      font-size: 0.6rem !important;
      letter-spacing: 0.2em !important;
      text-transform: uppercase !important;
      border-radius: 999px !important;
      border: 1px solid rgba(224, 180, 128, 0.2) !important;
      transition: all .35s ease !important;
      white-space: nowrap !important;
    }
    .faq-q.is-active .faq-q-cat {
      background: rgba(12, 34, 28, 0.6) !important;
      color: #fdebd6 !important;
      border-color: rgba(224, 180, 128, 0.5) !important;
    }
    /* Petit chevron a droite */
    .faq-q::after {
      content: '+' !important;
      position: absolute !important;
      right: 22px !important;
      bottom: 18px !important;
      width: 28px !important;
      height: 28px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      color: #e0b480 !important;
      font-family: 'Cinzel', serif !important;
      font-size: 1.2rem !important;
      font-weight: 300 !important;
      opacity: 0 !important;
      transition: opacity .35s ease !important;
      pointer-events: none !important;
    }
    .faq-q:hover::after { opacity: 0.7 !important; }
    .faq-q.is-active::after { content: '–' !important; opacity: 1 !important; }

    /* Reponse : insertion juste apres la question active */
    .faq-doc-answers {
      position: static !important;
      top: auto !important;
      min-height: auto !important;
      margin-top: 14px !important;
    }
    .faq-a {
      display: none !important;
      padding: clamp(2rem, 4vw, 3rem) !important;
      background:
        radial-gradient(circle 260px at 100% 0%, rgba(20, 48, 42, 0.22) 0%, transparent 65%),
        radial-gradient(circle 260px at 0% 100%, rgba(20, 48, 42, 0.18) 0%, transparent 65%),
        linear-gradient(180deg, #f5e2c4 0%, #ecd5af 100%) !important;
      border: 1px solid rgba(20, 48, 42, 0.3) !important;
      border-radius: 14px !important;
      box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5) !important;
      position: relative !important;
    }
    .faq-a::before {
      content: '' !important;
      position: absolute !important;
      top: -8px; left: 30px;
      width: 16px; height: 16px;
      background: #f5e2c4 !important;
      border-top: 1px solid rgba(20, 48, 42, 0.3) !important;
      border-left: 1px solid rgba(20, 48, 42, 0.3) !important;
      transform: rotate(45deg) !important;
    }
    .faq-a.is-active {
      display: block !important;
      animation: faqFadeIn .5s cubic-bezier(.2,.7,.2,1) !important;
    }
    @keyframes faqFadeIn {
      from { opacity: 0; transform: translateY(-10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .faq-a-cat {
      display: inline-block !important;
      padding: 0.4rem 1rem !important;
      background: #14302a !important;
      color: #ecc89e !important;
      font-family: 'Cinzel', serif !important;
      font-size: 0.66rem !important;
      letter-spacing: 0.24em !important;
      text-transform: uppercase !important;
      border-radius: 999px !important;
      margin-bottom: 1.2rem !important;
    }
    .faq-a h3 {
      font-family: 'Cinzel', serif !important;
      font-weight: 500 !important;
      font-size: clamp(1.3rem, 2.3vw, 1.7rem) !important;
      color: #14302a !important;
      margin: 0 0 1.2rem !important;
      line-height: 1.2 !important;
    }
    .faq-a p {
      font-family: 'Cormorant Garamond', serif !important;
      font-style: italic !important;
      font-size: 1.08rem !important;
      line-height: 1.65 !important;
      color: #244d43 !important;
      margin: 0 0 1rem !important;
    }
    .faq-a p strong { color: #14302a !important; font-style: normal !important; }
    .faq-a-tip {
      margin-top: 1.4rem !important;
      padding: 1rem 1.2rem !important;
      background: rgba(20, 48, 42, 0.08) !important;
      border-left: 3px solid #c69968 !important;
      border-radius: 4px !important;
      font-family: 'Inter', sans-serif !important;
      font-style: normal !important;
      font-size: 0.92rem !important;
      line-height: 1.55 !important;
      color: #244d43 !important;
    }

    /* ============================================================
       Champ email lead magnet : fond clair, texte lisible
       ============================================================ */
    .lead-magnet-v32 .lm-form-row input[type="email"] {
      flex: 1 1 220px !important;
      min-width: 0 !important;
      padding: 0.95rem 1.2rem !important;
      border-radius: 999px !important;
      border: 1px solid rgba(224,180,128,0.45) !important;
      background: rgba(253, 235, 214, 0.95) !important;
      color: #14302a !important;
      font-family: 'Inter', sans-serif !important;
      font-size: 0.96rem !important;
      outline: none !important;
      transition: border-color .25s ease, background .25s ease, box-shadow .25s ease !important;
    }
    .lead-magnet-v32 .lm-form-row input[type="email"]::placeholder {
      color: rgba(20, 48, 42, 0.5) !important;
    }
    .lead-magnet-v32 .lm-form-row input[type="email"]:focus {
      border-color: #c89a64 !important;
      background: #fdebd6 !important;
      box-shadow: 0 0 0 4px rgba(224, 180, 128, 0.15) !important;
    }

    /* ============================================================
       Stepper "Trois etapes, zero friction" — premium et interactif
       ============================================================ */
    .process-v20 .stepper {
      display: grid !important;
      grid-template-columns: repeat(3, 1fr) !important;
      gap: 14px !important;
      max-width: 1100px !important;
      margin: 0 auto clamp(2rem, 4vw, 3rem) !important;
      padding: 0 var(--pad-x, 1.5rem) !important;
      position: relative !important;
    }
    /* Ligne de connexion entre les 3 etapes */
    .process-v20 .stepper::before {
      content: '' !important;
      position: absolute !important;
      top: 32px !important;
      left: 16% !important;
      right: 16% !important;
      height: 2px !important;
      background: linear-gradient(90deg, rgba(224,180,128,0.2) 0%, rgba(224,180,128,0.5) 50%, rgba(224,180,128,0.2) 100%) !important;
      z-index: 0 !important;
    }
    .process-v20 .step-tab {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      gap: 8px !important;
      padding: 18px 14px !important;
      background: linear-gradient(180deg, rgba(20, 48, 42, 0.55) 0%, rgba(20, 48, 42, 0.35) 100%) !important;
      border: 1px solid rgba(224, 180, 128, 0.22) !important;
      border-radius: 16px !important;
      cursor: pointer !important;
      transition: all .5s cubic-bezier(.2,.7,.2,1) !important;
      position: relative !important;
      z-index: 1 !important;
      text-align: center !important;
    }
    .process-v20 .step-tab:hover {
      transform: translateY(-3px) !important;
      border-color: rgba(224, 180, 128, 0.55) !important;
      box-shadow: 0 12px 32px -12px rgba(0,0,0,0.4) !important;
    }
    .process-v20 .step-tab.is-active {
      background:
        radial-gradient(circle 250px at 50% 0%, rgba(224, 180, 128, 0.18) 0%, transparent 70%),
        linear-gradient(180deg, rgba(224, 180, 128, 0.1) 0%, rgba(224, 180, 128, 0.04) 100%) !important;
      border-color: rgba(224, 180, 128, 0.7) !important;
      box-shadow: 0 20px 50px -16px rgba(224, 180, 128, 0.4) !important;
      transform: translateY(-4px) !important;
    }
    /* Numero dans un cercle dore */
    .process-v20 .step-num {
      width: 56px !important;
      height: 56px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      border-radius: 50% !important;
      background: rgba(12, 34, 28, 0.7) !important;
      border: 1px solid rgba(224, 180, 128, 0.4) !important;
      color: #e0b480 !important;
      font-family: 'Cinzel', serif !important;
      font-size: 1.15rem !important;
      font-weight: 600 !important;
      letter-spacing: 0.04em !important;
      margin-bottom: 6px !important;
      transition: all .5s cubic-bezier(.2,.7,.2,1) !important;
      position: relative !important;
    }
    .process-v20 .step-tab.is-active .step-num {
      background: linear-gradient(135deg, #e0b480 0%, #c89a64 100%) !important;
      border-color: transparent !important;
      color: #0c221c !important;
      box-shadow: 0 10px 28px -8px rgba(224, 180, 128, 0.6), 0 0 0 6px rgba(224, 180, 128, 0.12) !important;
      transform: scale(1.08) !important;
    }
    /* Petit halo pulsant autour du numero actif */
    .process-v20 .step-tab.is-active .step-num::after {
      content: '' !important;
      position: absolute !important;
      inset: -8px !important;
      border-radius: 50% !important;
      border: 1px solid rgba(224, 180, 128, 0.4) !important;
      animation: stepPulse 2s ease-in-out infinite !important;
    }
    @keyframes stepPulse {
      0%, 100% { transform: scale(0.92); opacity: 0.6; }
      50% { transform: scale(1.1); opacity: 0; }
    }
    .process-v20 .step-label {
      display: block !important;
      font-family: 'Cinzel', serif !important;
      font-size: 0.78rem !important;
      letter-spacing: 0.22em !important;
      text-transform: uppercase !important;
      color: #fdebd6 !important;
      font-weight: 500 !important;
    }
    .process-v20 .step-sub {
      display: block !important;
      font-family: 'Cormorant Garamond', serif !important;
      font-style: italic !important;
      font-size: 0.85rem !important;
      color: #ecc89e !important;
      opacity: 0.85 !important;
      margin-top: 2px !important;
    }
    /* Panel actif : carte premium */
    .process-v20 .step-panels {
      max-width: 1000px !important;
      margin: 0 auto !important;
      padding: 0 var(--pad-x, 1.5rem) !important;
    }
    .process-v20 .step-panel {
      display: none !important;
    }
    .process-v20 .step-panel.is-active {
      display: grid !important;
      grid-template-columns: auto 1fr !important;
      gap: clamp(1.5rem, 3vw, 2.5rem) !important;
      align-items: center !important;
      padding: clamp(2rem, 4vw, 3rem) !important;
      background:
        radial-gradient(circle 300px at 0% 0%, rgba(224, 180, 128, 0.1) 0%, transparent 60%),
        linear-gradient(180deg, rgba(20, 48, 42, 0.6) 0%, rgba(20, 48, 42, 0.4) 100%) !important;
      border: 1px solid rgba(224, 180, 128, 0.28) !important;
      border-radius: 18px !important;
      box-shadow: 0 30px 60px -24px rgba(0,0,0,0.5) !important;
      animation: stepPanelIn .5s cubic-bezier(.2,.7,.2,1) !important;
    }
    @keyframes stepPanelIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .process-v20 .step-panel-icon {
      width: 96px !important;
      height: 96px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      border-radius: 50% !important;
      background:
        radial-gradient(circle at 30% 30%, rgba(224, 180, 128, 0.35), rgba(224, 180, 128, 0.1)) !important;
      border: 1px solid rgba(224, 180, 128, 0.3) !important;
      color: #e0b480 !important;
      flex-shrink: 0 !important;
    }
    .process-v20 .step-panel-icon svg {
      width: 44px !important;
      height: 44px !important;
    }
    .process-v20 .step-panel-text h3 {
      font-family: 'Cinzel', serif !important;
      font-weight: 500 !important;
      font-size: clamp(1.4rem, 2.6vw, 1.9rem) !important;
      color: #fdebd6 !important;
      margin: 0 0 0.8rem !important;
    }
    .process-v20 .step-panel-text p {
      font-family: 'Cormorant Garamond', serif !important;
      font-style: italic !important;
      font-size: 1.08rem !important;
      line-height: 1.6 !important;
      color: #ecc89e !important;
      margin: 0 0 1.4rem !important;
    }

    /* Mobile : stepper en 1 colonne, panel empile l'icone au-dessus */
    @media (max-width: 700px) {
      .process-v20 .stepper {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
      }
      .process-v20 .stepper::before { display: none !important; }
      .process-v20 .step-tab {
        flex-direction: row !important;
        justify-content: flex-start !important;
        text-align: left !important;
        gap: 14px !important;
        padding: 14px 16px !important;
      }
      .process-v20 .step-num { margin-bottom: 0 !important; }
      .process-v20 .step-panel.is-active {
        grid-template-columns: 1fr !important;
        text-align: center !important;
      }
      .process-v20 .step-panel-icon {
        margin: 0 auto !important;
      }
    }

    /* ============================================================
       Lead magnet : visuel (livre) + interactivite
       ============================================================ */
    .lead-magnet-v32 .lm-visual {
      display: flex; align-items: center; justify-content: center;
      padding: 1rem; perspective: 1400px;
      position: relative;
    }
    .lead-magnet-v32 .lm-visual::before,
    .lead-magnet-v32 .lm-visual::after {
      content: '';
      position: absolute;
      width: 10px; height: 10px;
      background: radial-gradient(circle, #e0b480 0%, transparent 70%);
      border-radius: 50%;
      opacity: 0.7;
      animation: lmTwinkle 3.5s ease-in-out infinite;
    }
    .lead-magnet-v32 .lm-visual::before { top: 12%; left: 8%; animation-delay: 0s; }
    .lead-magnet-v32 .lm-visual::after { bottom: 18%; right: 10%; width: 14px; height: 14px; animation-delay: 1.5s; }
    @keyframes lmTwinkle {
      0%, 100% { opacity: 0.2; transform: scale(0.8); }
      50% { opacity: 0.9; transform: scale(1.2); }
    }
    .lead-magnet-v32 .lm-book {
      position: relative;
      width: min(280px, 75vw);
      aspect-ratio: 3 / 4.2;
      transform-style: preserve-3d;
      transform: rotateY(-8deg) rotateX(2deg);
      transition: transform .8s cubic-bezier(.2,.7,.2,1);
      filter: drop-shadow(0 30px 50px rgba(0,0,0,.45));
      animation: lmFloat 6s ease-in-out infinite;
    }
    @keyframes lmFloat {
      0%, 100% { transform: rotateY(-8deg) rotateX(2deg) translateY(0); }
      50% { transform: rotateY(-6deg) rotateX(1deg) translateY(-8px); }
    }
    .lead-magnet-v32 .lm-visual:hover .lm-book {
      transform: rotateY(0deg) rotateX(0deg) translateY(-8px) scale(1.02);
      animation-play-state: paused;
    }
    .lead-magnet-v32 .lm-book-shadow {
      position: absolute;
      left: 8%; right: 8%; bottom: -22px; height: 24px;
      background: radial-gradient(ellipse at center, rgba(0,0,0,.45), transparent 70%);
      filter: blur(8px); z-index: 0;
    }
    .lead-magnet-v32 .lm-book-spine {
      position: absolute; left: 0; top: 2%; bottom: 2%;
      width: 14px;
      background: linear-gradient(90deg, #0a1c17 0%, #14302a 50%, #1f4338 100%);
      border-radius: 2px 0 0 2px;
      transform: translateX(-7px) rotateY(-15deg);
      transform-origin: right center;
      box-shadow: inset -2px 0 4px rgba(0,0,0,.5);
    }
    .lead-magnet-v32 .lm-book-cover {
      position: relative; z-index: 2;
      width: 100%; height: 100%;
      border-radius: 4px 8px 8px 4px;
      background:
        radial-gradient(circle 220px at 0% 0%, rgba(224,180,128,0.22) 0%, transparent 60%),
        radial-gradient(circle 240px at 100% 100%, rgba(224,180,128,0.14) 0%, transparent 65%),
        linear-gradient(160deg, #14302a 0%, #0c221c 100%);
      border: 1px solid rgba(224,180,128,0.4);
      box-shadow: inset 0 0 0 1px rgba(253,235,214,0.06), inset 6px 0 18px rgba(0,0,0,0.4);
      padding: clamp(1.4rem, 3.5vw, 2.2rem) clamp(1.2rem, 3vw, 1.8rem);
      display: flex; flex-direction: column; justify-content: space-between;
      overflow: hidden;
    }
    .lead-magnet-v32 .lm-book-cover::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(120deg, transparent 30%, rgba(224,180,128,0.15) 50%, transparent 70%);
      transform: translateX(-100%);
      animation: lmShimmer 5s ease-in-out infinite;
      animation-delay: 1s;
      pointer-events: none;
    }
    @keyframes lmShimmer {
      0%, 70% { transform: translateX(-100%); }
      100% { transform: translateX(100%); }
    }
    .lead-magnet-v32 .lm-book-ribbon {
      position: absolute; top: 20px; right: -38px;
      background: linear-gradient(135deg, #e0b480, #c89a64);
      color: #0c221c; font-family: 'Cinzel', serif;
      font-size: 0.58rem; font-weight: 700; letter-spacing: 0.22em;
      padding: 5px 44px; transform: rotate(35deg);
      box-shadow: 0 4px 8px rgba(0,0,0,0.3); z-index: 4;
    }
    .lead-magnet-v32 .lm-book-brand {
      display: block; color: #e0b480;
      font-family: 'Cinzel', serif; font-size: 0.74rem; font-weight: 600;
      letter-spacing: 0.32em; text-align: center; margin-bottom: 0.6rem;
      z-index: 3; position: relative;
    }
    .lead-magnet-v32 .lm-book-divider {
      width: 36px; height: 1px; background: #e0b480;
      margin: 0 auto 1.4rem; opacity: 0.75;
      z-index: 3; position: relative;
    }
    .lead-magnet-v32 .lm-book-title {
      color: #fdebd6; font-family: 'Cinzel', serif; font-weight: 500;
      font-size: clamp(1.25rem, 3vw, 1.55rem); line-height: 1.1;
      letter-spacing: 0.015em; text-align: center; margin: 0;
      z-index: 3; position: relative;
    }
    .lead-magnet-v32 .lm-book-title em {
      display: block; font-family: 'Cormorant Garamond', serif;
      font-style: italic; color: #e0b480; font-weight: 400;
      margin-top: 0.4rem; font-size: 0.92em;
    }
    .lead-magnet-v32 .lm-book-sub {
      color: #ecc89e; font-family: 'Cormorant Garamond', serif;
      font-style: italic; font-size: clamp(0.78rem, 1.6vw, 0.92rem);
      line-height: 1.45; text-align: center; margin: 0.8rem 0 0; opacity: 0.88;
      z-index: 3; position: relative;
    }
    .lead-magnet-v32 .lm-book-foot {
      display: flex; align-items: center; justify-content: center; gap: 0.6rem;
      color: #e0b480; font-family: 'Cinzel', serif;
      font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase;
      padding-top: 0.6rem; border-top: 1px solid rgba(224,180,128,0.22);
      z-index: 3; position: relative;
    }
    .lead-magnet-v32 .lm-book-dot { opacity: 0.5; }
    @media (min-width: 881px) {
      .lead-magnet-v32 .lead-magnet-inner {
        display: grid !important;
        grid-template-columns: 320px 1fr !important;
        gap: clamp(2rem, 5vw, 4rem) !important;
        align-items: center !important;
        max-width: 1200px !important;
        margin: 0 auto !important;
      }
    }
    @media (max-width: 880px) {
      .lead-magnet-v32 .lead-magnet-inner {
        display: flex !important; flex-direction: column !important;
        gap: 2rem !important; align-items: center !important; text-align: center !important;
      }
      .lead-magnet-v32 .lm-content { width: 100%; max-width: 560px; }
    }
    .lead-magnet-v32 .lm-content { min-width: 0; }
    .lead-magnet-v32 .lm-content > * { max-width: 100%; }

    /* ============================================================
       CTA boutons (Recevoir le guide / Envoyer demande) — dore compact
       ============================================================ */
    .lead-magnet-v32 .lm-form-row {
      display: flex !important; gap: 0.6rem !important;
      align-items: stretch !important; flex-wrap: wrap !important;
    }
    .lead-magnet-v32 .lm-form-row .big-cta,
    .contact .contact-form .big-cta {
      padding: 0.85rem 1.6rem !important;
      font-size: 0.78rem !important;
      letter-spacing: 0.2em !important;
      text-transform: uppercase !important;
      background: linear-gradient(135deg, #e0b480 0%, #c89a64 100%) !important;
      color: #0c221c !important;
      border: 0 !important;
      border-radius: 999px !important;
      font-family: 'Cinzel', serif !important;
      font-weight: 600 !important;
      grid-column: auto !important;
      justify-self: start !important;
      align-self: stretch !important;
      box-shadow: 0 10px 28px -10px rgba(224,180,128,0.55) !important;
      transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease !important;
      cursor: pointer !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 0.5rem !important;
      white-space: nowrap !important;
    }
    .lead-magnet-v32 .lm-form-row .big-cta:hover,
    .contact .contact-form .big-cta:hover {
      transform: translateY(-2px) scale(1.02) !important;
      background: linear-gradient(135deg, #e6bd8d 0%, #d2a370 100%) !important;
      box-shadow: 0 14px 36px -10px rgba(224,180,128,0.75) !important;
    }
    .lead-magnet-v32 .lm-form-row .big-cta svg,
    .contact .contact-form .big-cta svg {
      width: 14px !important; height: 14px !important;
    }
    @media (max-width: 700px) {
      .lead-magnet-v32 .lm-form-row .big-cta,
      .contact .contact-form .big-cta {
        width: 100% !important; justify-content: center !important;
      }
      .lead-magnet-v32 .lm-form-row { flex-direction: column !important; }
    }

    /* ============ WhatsApp FAB sur boutique : plus petit ============ */
    body.page-boutique .whatsapp-fab {
      width: 44px !important; height: 44px !important;
      bottom: 1.2rem !important; right: 1.2rem !important; opacity: 0.85 !important;
    }
    body.page-boutique .whatsapp-fab svg { width: 22px !important; height: 22px !important; }
    body.page-boutique .whatsapp-fab::before { inset: -3px !important; }

/* ============ FAQ : liste 2 colonnes sur desktop ============ */
    @media (min-width: 881px) {
      body:not(.page-boutique) .faq-doc {
        grid-template-columns: minmax(420px, 1fr) 1.1fr !important;
        gap: clamp(1.5rem, 3vw, 2.5rem) !important;
      }
      .faq-doc-nav {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5rem !important;
        align-content: start !important;
      }
      /* Sticky : le panneau de reponse suit le scroll */
      .faq-doc-answers {
        position: sticky !important;
        top: 100px !important;
        align-self: start !important;
      }
    }
    /* Questions plus compactes */
    .faq-q {
      padding: 0.7rem 0.9rem !important;
      gap: 0.15rem 0.7rem !important;
    }
    .faq-q-title {
      font-size: 0.85rem !important;
      line-height: 1.2 !important;
    }
    .faq-q-num {
      font-size: 0.66rem !important;
    }
    .faq-q-cat {
      font-size: 0.55rem !important;
      letter-spacing: 0.2em !important;
    }

    /* ============ Lead magnet : visuel plus interactif ============ */
    .lead-magnet-v32 .lm-visual {
      display: flex; align-items: center; justify-content: center;
      padding: 1rem; perspective: 1400px;
      position: relative;
    }
    /* Decor : petites etoiles dorees autour du livre */
    .lead-magnet-v32 .lm-visual::before,
    .lead-magnet-v32 .lm-visual::after {
      content: '';
      position: absolute;
      width: 10px; height: 10px;
      background: radial-gradient(circle, #e0b480 0%, transparent 70%);
      border-radius: 50%;
      opacity: 0.7;
      animation: lmTwinkle 3.5s ease-in-out infinite;
    }
    .lead-magnet-v32 .lm-visual::before {
      top: 12%; left: 8%;
      animation-delay: 0s;
    }
    .lead-magnet-v32 .lm-visual::after {
      bottom: 18%; right: 10%;
      width: 14px; height: 14px;
      animation-delay: 1.5s;
    }
    @keyframes lmTwinkle {
      0%, 100% { opacity: 0.2; transform: scale(0.8); }
      50% { opacity: 0.9; transform: scale(1.2); }
    }

    .lead-magnet-v32 .lm-book {
      position: relative;
      width: min(280px, 75vw);
      aspect-ratio: 3 / 4.2;
      transform-style: preserve-3d;
      transform: rotateY(-8deg) rotateX(2deg);
      transition: transform .8s cubic-bezier(.2,.7,.2,1);
      filter: drop-shadow(0 30px 50px rgba(0,0,0,.45));
      animation: lmFloat 6s ease-in-out infinite;
    }
    @keyframes lmFloat {
      0%, 100% { transform: rotateY(-8deg) rotateX(2deg) translateY(0); }
      50% { transform: rotateY(-6deg) rotateX(1deg) translateY(-8px); }
    }
    .lead-magnet-v32 .lm-visual:hover .lm-book {
      transform: rotateY(0deg) rotateX(0deg) translateY(-8px) scale(1.02);
      animation-play-state: paused;
    }
    .lead-magnet-v32 .lm-book-shadow {
      position: absolute;
      left: 8%; right: 8%;
      bottom: -22px;
      height: 24px;
      background: radial-gradient(ellipse at center, rgba(0,0,0,.45), transparent 70%);
      filter: blur(8px);
      z-index: 0;
    }
    .lead-magnet-v32 .lm-book-spine {
      position: absolute;
      left: 0; top: 2%; bottom: 2%;
      width: 14px;
      background: linear-gradient(90deg, #0a1c17 0%, #14302a 50%, #1f4338 100%);
      border-radius: 2px 0 0 2px;
      transform: translateX(-7px) rotateY(-15deg);
      transform-origin: right center;
      box-shadow: inset -2px 0 4px rgba(0,0,0,.5);
    }
    .lead-magnet-v32 .lm-book-cover {
      position: relative;
      z-index: 2;
      width: 100%; height: 100%;
      border-radius: 4px 8px 8px 4px;
      background:
        radial-gradient(circle 220px at 0% 0%, rgba(224,180,128,0.22) 0%, transparent 60%),
        radial-gradient(circle 240px at 100% 100%, rgba(224,180,128,0.14) 0%, transparent 65%),
        linear-gradient(160deg, #14302a 0%, #0c221c 100%);
      border: 1px solid rgba(224,180,128,0.4);
      box-shadow:
        inset 0 0 0 1px rgba(253,235,214,0.06),
        inset 6px 0 18px rgba(0,0,0,0.4);
      padding: clamp(1.4rem, 3.5vw, 2.2rem) clamp(1.2rem, 3vw, 1.8rem);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      overflow: hidden;
    }
    /* Effet shimmer doré qui passe sur le titre */
    .lead-magnet-v32 .lm-book-cover::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(120deg, transparent 30%, rgba(224,180,128,0.15) 50%, transparent 70%);
      transform: translateX(-100%);
      animation: lmShimmer 5s ease-in-out infinite;
      animation-delay: 1s;
      pointer-events: none;
    }
    @keyframes lmShimmer {
      0%, 70% { transform: translateX(-100%); }
      100% { transform: translateX(100%); }
    }
    .lead-magnet-v32 .lm-book-ribbon {
      position: absolute;
      top: 20px;
      right: -38px;
      background: linear-gradient(135deg, #e0b480, #c89a64);
      color: #0c221c;
      font-family: 'Cinzel', serif;
      font-size: 0.58rem;
      font-weight: 700;
      letter-spacing: 0.22em;
      padding: 5px 44px;
      transform: rotate(35deg);
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
      z-index: 4;
    }
    .lead-magnet-v32 .lm-book-brand {
      display: block;
      color: #e0b480;
      font-family: 'Cinzel', serif;
      font-size: 0.74rem;
      font-weight: 600;
      letter-spacing: 0.32em;
      text-align: center;
      margin-bottom: 0.6rem;
      z-index: 3;
      position: relative;
    }
    .lead-magnet-v32 .lm-book-divider {
      width: 36px;
      height: 1px;
      background: #e0b480;
      margin: 0 auto 1.4rem;
      opacity: 0.75;
      z-index: 3;
      position: relative;
    }
    .lead-magnet-v32 .lm-book-title {
      color: #fdebd6;
      font-family: 'Cinzel', serif;
      font-weight: 500;
      font-size: clamp(1.25rem, 3vw, 1.55rem);
      line-height: 1.1;
      letter-spacing: 0.015em;
      text-align: center;
      margin: 0;
      z-index: 3;
      position: relative;
    }
    .lead-magnet-v32 .lm-book-title em {
      display: block;
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      color: #e0b480;
      font-weight: 400;
      margin-top: 0.4rem;
      font-size: 0.92em;
    }
    .lead-magnet-v32 .lm-book-sub {
      color: #ecc89e;
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: clamp(0.78rem, 1.6vw, 0.92rem);
      line-height: 1.45;
      text-align: center;
      margin: 0.8rem 0 0;
      opacity: 0.88;
      z-index: 3;
      position: relative;
    }
    .lead-magnet-v32 .lm-book-foot {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.6rem;
      color: #e0b480;
      font-family: 'Cinzel', serif;
      font-size: 0.62rem;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      padding-top: 0.6rem;
      border-top: 1px solid rgba(224,180,128,0.22);
      z-index: 3;
      position: relative;
    }
    .lead-magnet-v32 .lm-book-dot { opacity: 0.5; }

    /* Section grille */
    @media (min-width: 881px) {
      .lead-magnet-v32 .lead-magnet-inner {
        display: grid !important;
        grid-template-columns: 320px 1fr !important;
        gap: clamp(2rem, 5vw, 4rem) !important;
        align-items: center !important;
        max-width: 1200px !important;
        margin: 0 auto !important;
      }
    }
    @media (max-width: 880px) {
      .lead-magnet-v32 .lead-magnet-inner {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
        align-items: center !important;
        text-align: center !important;
      }
      .lead-magnet-v32 .lm-content { width: 100%; max-width: 560px; }
    }
    .lead-magnet-v32 .lm-content { min-width: 0; }
    .lead-magnet-v32 .lm-content > * { max-width: 100%; }

    /* ============ CTA "Recevoir le guide" + form contact : compacts et dores ============ */
    .lead-magnet-v32 .lm-form-row {
      display: flex !important;
      gap: 0.6rem !important;
      align-items: stretch !important;
      flex-wrap: wrap !important;
    }
    .lead-magnet-v32 .lm-form-row input[type="email"] {
      flex: 1 1 220px !important;
      min-width: 0 !important;
      padding: 0.85rem 1.1rem !important;
      border-radius: 999px !important;
      border: 1px solid rgba(224,180,128,0.35) !important;
      background: rgba(12,34,28,0.55) !important;
      color: #fdebd6 !important;
      font-family: 'Inter', sans-serif !important;
      font-size: 0.92rem !important;
      outline: none !important;
      transition: border-color .25s ease, background .25s ease !important;
    }
    .lead-magnet-v32 .lm-form-row input[type="email"]:focus {
      border-color: #e0b480 !important;
      background: rgba(12,34,28,0.75) !important;
    }
    /* Bouton recevoir le guide : refined, dore, taille raisonnable */
    .lead-magnet-v32 .lm-form-row .big-cta,
    .contact .contact-form .big-cta {
      padding: 0.85rem 1.6rem !important;
      font-size: 0.78rem !important;
      letter-spacing: 0.2em !important;
      text-transform: uppercase !important;
      background: linear-gradient(135deg, #e0b480 0%, #c89a64 100%) !important;
      color: #0c221c !important;
      border: 0 !important;
      border-radius: 999px !important;
      font-family: 'Cinzel', serif !important;
      font-weight: 600 !important;
      grid-column: auto !important;
      justify-self: start !important;
      align-self: stretch !important;
      box-shadow: 0 10px 28px -10px rgba(224,180,128,0.55) !important;
      transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease !important;
      cursor: pointer !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 0.5rem !important;
      white-space: nowrap !important;
    }
    .lead-magnet-v32 .lm-form-row .big-cta:hover,
    .contact .contact-form .big-cta:hover {
      transform: translateY(-2px) scale(1.02) !important;
      background: linear-gradient(135deg, #e6bd8d 0%, #d2a370 100%) !important;
      box-shadow: 0 14px 36px -10px rgba(224,180,128,0.75) !important;
    }
    .lead-magnet-v32 .lm-form-row .big-cta svg,
    .contact .contact-form .big-cta svg {
      width: 14px !important;
      height: 14px !important;
    }
    @media (max-width: 700px) {
      .lead-magnet-v32 .lm-form-row .big-cta,
      .contact .contact-form .big-cta {
        width: 100% !important;
        justify-content: center !important;
      }
      .lead-magnet-v32 .lm-form-row { flex-direction: column !important; }
    }

    /* ============ WhatsApp FAB sur boutique : plus petit aussi ============ */
    body.page-boutique .whatsapp-fab {
      width: 44px !important;
      height: 44px !important;
      bottom: 1.2rem !important;
      right: 1.2rem !important;
      opacity: 0.85 !important;
    }
    body.page-boutique .whatsapp-fab svg {
      width: 22px !important;
      height: 22px !important;
    }
    body.page-boutique .whatsapp-fab::before {
      inset: -3px !important;
    }

/* ============ lead-magnet-v32-visual ============ */
.lead-magnet-v32 .lm-visual {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1rem;
      perspective: 1400px;
    }
    .lead-magnet-v32 .lm-book {
      position: relative;
      width: min(300px, 80vw);
      aspect-ratio: 3 / 4.2;
      transform-style: preserve-3d;
      transform: rotateY(-4deg) rotateX(2deg);
      transition: transform .8s cubic-bezier(.2,.7,.2,1);
      filter: drop-shadow(0 30px 50px rgba(0,0,0,.45));
    }
    .lead-magnet-v32 .lm-visual:hover .lm-book {
      transform: rotateY(0deg) rotateX(0deg) translateY(-6px);
    }
    .lead-magnet-v32 .lm-book-shadow {
      position: absolute;
      left: 8%; right: 8%;
      bottom: -22px;
      height: 24px;
      background: radial-gradient(ellipse at center, rgba(0,0,0,.4), transparent 70%);
      filter: blur(8px);
      z-index: 0;
    }
    .lead-magnet-v32 .lm-book-spine {
      position: absolute;
      left: 0; top: 2%; bottom: 2%;
      width: 12px;
      background: linear-gradient(90deg, #0a1c17 0%, #14302a 50%, #1f4338 100%);
      border-radius: 2px 0 0 2px;
      transform: translateX(-6px) rotateY(-15deg);
      transform-origin: right center;
      box-shadow: inset -2px 0 4px rgba(0,0,0,.4);
    }
    .lead-magnet-v32 .lm-book-cover {
      position: relative;
      z-index: 2;
      width: 100%; height: 100%;
      border-radius: 4px 8px 8px 4px;
      background:
        radial-gradient(circle 220px at 0% 0%, rgba(224,180,128,0.18) 0%, transparent 60%),
        radial-gradient(circle 240px at 100% 100%, rgba(224,180,128,0.12) 0%, transparent 65%),
        linear-gradient(160deg, #14302a 0%, #0c221c 100%);
      border: 1px solid rgba(224,180,128,0.35);
      box-shadow:
        inset 0 0 0 1px rgba(253,235,214,0.05),
        inset 6px 0 16px rgba(0,0,0,0.4);
      padding: clamp(1.4rem, 3.5vw, 2.2rem) clamp(1.2rem, 3vw, 1.8rem);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      overflow: hidden;
    }
    .lead-magnet-v32 .lm-book-ribbon {
      position: absolute;
      top: 18px;
      right: -34px;
      background: linear-gradient(135deg, #e0b480, #c89a64);
      color: #0c221c;
      font-family: 'Cinzel', serif;
      font-size: 0.58rem;
      font-weight: 700;
      letter-spacing: 0.22em;
      padding: 5px 40px;
      transform: rotate(35deg);
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
      z-index: 3;
    }
    .lead-magnet-v32 .lm-book-brand {
      display: block;
      color: #e0b480;
      font-family: 'Cinzel', serif;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.32em;
      text-align: center;
      margin-bottom: 0.6rem;
    }
    .lead-magnet-v32 .lm-book-divider {
      width: 36px;
      height: 1px;
      background: #e0b480;
      margin: 0 auto 1.4rem;
      opacity: 0.7;
    }
    .lead-magnet-v32 .lm-book-title {
      color: #fdebd6;
      font-family: 'Cinzel', serif;
      font-weight: 500;
      font-size: clamp(1.3rem, 3.4vw, 1.7rem);
      line-height: 1.1;
      letter-spacing: 0.01em;
      text-align: center;
      margin: 0;
    }
    .lead-magnet-v32 .lm-book-title em {
      display: block;
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      color: #e0b480;
      font-weight: 400;
      margin-top: 0.4rem;
      font-size: 0.92em;
    }
    .lead-magnet-v32 .lm-book-sub {
      color: #ecc89e;
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: clamp(0.78rem, 1.6vw, 0.92rem);
      line-height: 1.45;
      text-align: center;
      margin: 0.8rem 0 0;
      opacity: 0.88;
    }
    .lead-magnet-v32 .lm-book-foot {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.6rem;
      color: #e0b480;
      font-family: 'Cinzel', serif;
      font-size: 0.62rem;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      padding-top: 0.6rem;
      border-top: 1px solid rgba(224,180,128,0.22);
    }
    .lead-magnet-v32 .lm-book-dot { opacity: 0.5; }

    /* Grille section : 340 + 1fr sur desktop, empile sur mobile */
    @media (min-width: 881px) {
      .lead-magnet-v32 .lead-magnet-inner {
        display: grid !important;
        grid-template-columns: 340px 1fr !important;
        gap: clamp(2rem, 5vw, 4rem) !important;
        align-items: center !important;
        max-width: 1200px !important;
        margin: 0 auto !important;
      }
    }
    @media (max-width: 880px) {
      .lead-magnet-v32 .lead-magnet-inner {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
        align-items: center !important;
        text-align: center !important;
      }
      .lead-magnet-v32 .lm-content { width: 100%; max-width: 560px; }
    }
    .lead-magnet-v32 .lm-content { min-width: 0; }
    .lead-magnet-v32 .lm-content > * { max-width: 100%; }

/* ============ faq-and-lm-safety-v31 ============ */
/* FAQ : la toolbar (search + chips) est un flex inline-block en ligne au-dessus du grid doc */
    .faq .faq-toolbar {
      display: flex !important;
      flex-wrap: wrap !important;
      align-items: center !important;
      gap: 1rem !important;
      max-width: 1200px !important;
      margin: 0 auto 1.6rem !important;
      padding: 0 var(--pad-x, 1.5rem) !important;
    }
    .faq .faq-toolbar .faq-search {
      flex: 1 1 280px !important;
    }
    .faq .faq-toolbar .faq-filters {
      flex: 1 1 auto !important;
      justify-content: flex-end !important;
    }

    /* Lead magnet : forcer la grille 2 colonnes propre sur desktop,
       et eviter tout chevauchement entre la stack et le formulaire */
    @media (min-width: 881px) {
      .lead-magnet-v20 .lead-magnet-inner {
        grid-template-columns: 380px 1fr !important;
        align-items: center !important;
        gap: clamp(2rem, 5vw, 4rem) !important;
      }
      .lm-mockup-stage { justify-self: center; }
    }
    .lead-magnet-v20 .lm-content {
      min-width: 0 !important;        /* anti debordement grid item */
    }
    .lead-magnet-v20 .lm-content > * { max-width: 100% !important; }

    /* FAQ doc : sur desktop, garder les 2 colonnes propres */
    @media (min-width: 881px) {
      body:not(.page-boutique) .faq-doc {
        grid-template-columns: minmax(260px, 380px) 1fr !important;
        gap: clamp(1.5rem, 3vw, 2.5rem) !important;
        align-items: start !important;
      }
      .faq-doc-answers { min-height: 360px !important; }
    }

    /* Contact form : 2 colonnes propres sur desktop */
    @media (min-width: 881px) {
      .contact-form {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 2rem 2.5rem !important;
      }
      .contact-form .field-full { grid-column: 1 / -1 !important; }
      .contact-form .contact-tags { grid-column: 1 / -1 !important; }
    }
    @media (max-width: 880px) {
      .contact-form {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.6rem !important;
      }
    }

/* ============ mobile-rescue-v30 ============ */
@media (max-width: 820px) {
    /* ============ Anti debordement global ============ */
    html, html body { overflow-x: hidden !important; max-width: 100vw !important; }
    html body { background: #0c221c !important; color: #fdebd6 !important; font-family: 'Inter', sans-serif !important; }
    html body * { max-width: 100% !important; }
    html body img, html body video { max-width: 100% !important; height: auto !important; }

    /* Curseur custom : disable sur mobile (tactile) */
    html body .cursor { display: none !important; }

    /* ============ HEADER mobile ============ */
    html body .site-header {
      position: fixed !important;
      top: 0 !important; left: 0 !important; right: 0 !important;
      width: 100% !important;
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      padding: 12px 14px !important;
      background: rgba(12, 34, 28, 0.92) !important;
      backdrop-filter: blur(12px) !important;
      -webkit-backdrop-filter: blur(12px) !important;
      border-bottom: 1px solid rgba(224, 180, 128, 0.18) !important;
      z-index: 100 !important;
      box-sizing: border-box !important;
    }
    html body .site-header .brand,
    html body .site-header .brand a { display: inline-flex !important; align-items: center !important; }
    html body .site-header .brand-logo { height: 34px !important; width: auto !important; }
    html body .site-header .nav { display: none !important; }
    html body .site-header .header-actions { display: inline-flex !important; align-items: center !important; gap: 8px !important; }
    html body .site-header .header-actions .btn-pill,
    html body .site-header .header-actions a.btn {
      padding: 8px 14px !important;
      font-size: 11px !important;
      letter-spacing: 0.18em !important;
      border-radius: 999px !important;
      text-transform: uppercase !important;
      background: linear-gradient(135deg, #e0b480, #c89a64) !important;
      color: #0c221c !important;
      border: 0 !important;
      text-decoration: none !important;
      font-weight: 600 !important;
    }

    /* ============ HERO mobile ultra propre ============ */
    html body .hero.hero-v13,
    html body section.hero {
      position: relative !important;
      min-height: 100vh !important;
      min-height: 100dvh !important;
      padding: 80px 18px 40px !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      text-align: center !important;
      overflow: hidden !important;
      box-sizing: border-box !important;
    }
    html body .hero .hero-triptych {
      position: absolute !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
      z-index: 1 !important;
      display: block !important;
    }
    html body .hero .hero-triptych > .clip {
      position: absolute !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
      display: none !important;
    }
    html body .hero .hero-triptych > .clip:first-child {
      display: block !important;
    }
    html body .hero .hero-triptych > .clip > video,
    html body .hero .hero-triptych > .clip > img {
      position: absolute !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      object-position: center !important;
      filter: brightness(0.55) saturate(1.05) !important;
    }
    /* Overlay sombre fort pour lisibilite mobile */
    html body .hero::before {
      content: '' !important;
      position: absolute !important;
      inset: 0 !important;
      background: linear-gradient(180deg,
        rgba(12,34,28,0.55) 0%,
        rgba(12,34,28,0.3) 40%,
        rgba(12,34,28,0.6) 80%,
        rgba(12,34,28,0.9) 100%) !important;
      z-index: 2 !important;
      pointer-events: none !important;
    }
    html body .hero > *:not(.hero-triptych):not(.hero-bg) {
      position: relative !important;
      z-index: 5 !important;
    }
    html body .hero .hero-bg { z-index: 2 !important; }

    html body .hero .hero-logo-mark {
      margin: 0 auto 18px !important;
      display: flex !important;
      justify-content: center !important;
    }
    html body .hero .hero-logo-mark img {
      width: 72px !important;
      height: auto !important;
      filter: drop-shadow(0 4px 16px rgba(0,0,0,0.6))
              drop-shadow(0 0 24px rgba(224,180,128,0.3)) !important;
    }
    html body .hero .hero-overline {
      font-size: 10px !important;
      letter-spacing: 0.22em !important;
      text-transform: uppercase !important;
      color: #e0b480 !important;
      margin-bottom: 14px !important;
      opacity: 0.95 !important;
      font-family: 'Cinzel', serif !important;
    }
    html body .hero .hero-overline .dot { display: inline-block !important; margin: 0 6px !important; opacity: 0.6 !important; }
    html body .hero .hero-title-big,
    html body .hero h1 {
      color: #fdebd6 !important;
      font-family: 'Cinzel', serif !important;
      font-weight: 500 !important;
      font-size: 36px !important;
      line-height: 1.05 !important;
      letter-spacing: 0.01em !important;
      margin: 0 0 16px !important;
      text-align: center !important;
    }
    html body .hero .hero-title-big span { display: block !important; }
    html body .hero .hero-title-big em,
    html body .hero h1 em {
      font-family: 'Cormorant Garamond', serif !important;
      font-style: italic !important;
      color: #e0b480 !important;
      font-weight: 400 !important;
    }
    html body .hero .hero-sub {
      color: #ecc89e !important;
      font-family: 'Cormorant Garamond', serif !important;
      font-style: italic !important;
      font-size: 15px !important;
      line-height: 1.5 !important;
      max-width: 36ch !important;
      margin: 0 auto 24px !important;
      padding: 0 8px !important;
    }
    html body .hero .hero-cta-row {
      display: flex !important;
      flex-direction: column !important;
      gap: 10px !important;
      width: 100% !important;
      max-width: 320px !important;
      margin: 0 auto !important;
    }
    html body .hero .hero-cta-row a {
      width: 100% !important;
      padding: 14px 18px !important;
      border-radius: 999px !important;
      font-family: 'Cinzel', serif !important;
      font-size: 12px !important;
      letter-spacing: 0.2em !important;
      text-transform: uppercase !important;
      text-decoration: none !important;
      text-align: center !important;
      box-sizing: border-box !important;
    }
    html body .hero .hero-cta-row a:first-child {
      background: linear-gradient(135deg, #e0b480, #c89a64) !important;
      color: #0c221c !important;
      font-weight: 600 !important;
      box-shadow: 0 10px 28px -10px rgba(224,180,128,0.5) !important;
    }
    html body .hero .hero-cta-row a:not(:first-child) {
      background: transparent !important;
      color: #fdebd6 !important;
      border: 1px solid rgba(224,180,128,0.4) !important;
    }
    html body .hero .hero-scroll { display: none !important; }

    /* ============ Marquee : ralentir et simplifier ============ */
    html body .marquee,
    html body .marquee-track,
    html body .keywords-track {
      font-size: 12px !important;
      padding: 12px 0 !important;
    }

    /* ============ Sections genrales : padding mobile ============ */
    html body main > section,
    html body main > div > section {
      padding: 48px 16px !important;
      box-sizing: border-box !important;
    }
    html body .section-head {
      text-align: center !important;
      padding: 0 4px !important;
      margin-bottom: 28px !important;
    }
    html body .section-head .eyebrow,
    html body section .eyebrow {
      display: inline-block !important;
      color: #e0b480 !important;
      font-family: 'Cinzel', serif !important;
      font-size: 11px !important;
      letter-spacing: 0.26em !important;
      text-transform: uppercase !important;
      margin-bottom: 14px !important;
    }
    html body .section-title,
    html body .section-title.big,
    html body section h2 {
      color: #fdebd6 !important;
      font-family: 'Cinzel', serif !important;
      font-weight: 500 !important;
      font-size: 30px !important;
      line-height: 1.1 !important;
      letter-spacing: 0.01em !important;
      margin: 0 0 14px !important;
      text-align: center !important;
    }
    html body section h2 em,
    html body .section-title em {
      font-family: 'Cormorant Garamond', serif !important;
      font-style: italic !important;
      color: #e0b480 !important;
      font-weight: 400 !important;
    }
    html body .section-lede,
    html body section .lede,
    html body section > p {
      color: #ecc89e !important;
      font-family: 'Cormorant Garamond', serif !important;
      font-style: italic !important;
      font-size: 16px !important;
      line-height: 1.55 !important;
      max-width: 40ch !important;
      margin: 0 auto !important;
      text-align: center !important;
    }

    /* ============ Stats : 2 colonnes ============ */
    html body .stats-grid,
    html body .stats {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 18px !important;
      margin-top: 28px !important;
    }
    html body .stat-num { font-size: 28px !important; color: #fdebd6 !important; font-family: 'Cormorant Garamond', serif !important; }
    html body .stat-label { font-size: 10px !important; letter-spacing: 0.2em !important; color: #e0b480 !important; }

    /* ============ AUDIENCE split : tabs au dessus du panel ============ */
    html body .audience-split {
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: 18px !important;
    }
    html body .audience-tabs {
      display: flex !important;
      flex-direction: column !important;
      gap: 8px !important;
    }
    html body .audience-tab {
      display: flex !important;
      align-items: center !important;
      gap: 12px !important;
      padding: 14px !important;
      background: rgba(224,180,128,0.05) !important;
      border: 1px solid rgba(224,180,128,0.18) !important;
      border-radius: 12px !important;
      width: 100% !important;
      text-align: left !important;
      cursor: pointer !important;
      box-sizing: border-box !important;
    }
    html body .audience-tab.is-active {
      background: linear-gradient(135deg, rgba(224,180,128,0.15), rgba(224,180,128,0.05)) !important;
      border-color: rgba(224,180,128,0.5) !important;
    }
    html body .audience-tab .aud-num {
      width: 32px !important; height: 32px !important;
      display: flex !important; align-items: center !important; justify-content: center !important;
      background: rgba(224,180,128,0.2) !important;
      border-radius: 50% !important;
      color: #e0b480 !important;
      font-family: 'Cinzel', serif !important;
      font-size: 11px !important;
      flex-shrink: 0 !important;
    }
    html body .audience-tab h3,
    html body .audience-tab .aud-tab-text h3 {
      font-family: 'Cormorant Garamond', serif !important;
      font-size: 16px !important;
      margin: 0 !important;
      color: #fdebd6 !important;
      font-weight: 500 !important;
    }
    html body .aud-tab-text p {
      font-size: 12px !important;
      color: #ecc89e !important;
      margin: 4px 0 0 !important;
      opacity: 0.85 !important;
    }
    html body .audience-tab .aud-tab-hint { display: none !important; }
    html body .audience-panels { min-height: auto !important; }
    html body .audience-panel { display: none !important; }
    html body .audience-panel.is-active {
      display: block !important;
      grid-template-columns: 1fr !important;
      border-radius: 14px !important;
      overflow: hidden !important;
      background: rgba(224,180,128,0.05) !important;
      border: 1px solid rgba(224,180,128,0.22) !important;
    }
    html body .aud-panel-media {
      aspect-ratio: 16 / 10 !important;
      width: 100% !important;
      overflow: hidden !important;
      position: relative !important;
    }
    html body .aud-panel-media img {
      width: 100% !important; height: 100% !important;
      object-fit: cover !important;
    }
    html body .aud-panel-body { padding: 18px !important; }
    html body .aud-panel-body h3 {
      font-family: 'Cormorant Garamond', serif !important;
      font-size: 20px !important;
      color: #fdebd6 !important;
      margin: 0 0 10px !important;
    }
    html body .aud-panel-body p {
      font-size: 14px !important;
      line-height: 1.5 !important;
      color: #ecc89e !important;
    }
    html body .aud-panel-body ul {
      margin: 14px 0 18px !important;
      padding-left: 18px !important;
      font-size: 13px !important;
    }

    /* ============ Work mosaique : 1 colonne ============ */
    html body .work-mosaic {
      display: grid !important;
      grid-template-columns: 1fr !important;
      grid-auto-rows: auto !important;
      gap: 14px !important;
    }
    html body .work-card {
      grid-column: span 1 !important;
      grid-row: span 1 !important;
      aspect-ratio: 4 / 3 !important;
      border-radius: 14px !important;
      overflow: hidden !important;
      position: relative !important;
    }
    html body .work-card img {
      width: 100% !important; height: 100% !important;
      object-fit: cover !important;
      display: block !important;
    }

    /* ============ Services : cards 1 colonne ============ */
    html body .services-layout {
      grid-template-columns: 1fr !important;
    }
    html body .services-visual { display: none !important; }
    html body .services-list {
      padding: 0 !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 10px !important;
    }
    html body .srv {
      display: block !important;
      padding: 16px !important;
      background: rgba(224,180,128,0.05) !important;
      border: 1px solid rgba(224,180,128,0.18) !important;
      border-radius: 12px !important;
      text-decoration: none !important;
      color: inherit !important;
    }
    html body .srv-num {
      font-family: 'Cinzel', serif !important;
      font-size: 11px !important;
      color: #e0b480 !important;
      letter-spacing: 0.2em !important;
    }
    html body .srv-title {
      font-family: 'Cormorant Garamond', serif !important;
      font-size: 18px !important;
      color: #fdebd6 !important;
      margin: 6px 0 !important;
      font-weight: 500 !important;
    }
    html body .srv-desc {
      font-size: 13px !important;
      color: #ecc89e !important;
      line-height: 1.5 !important;
    }
    html body .srv-arrow { font-size: 14px !important; color: #e0b480 !important; }

    /* ============ About / Boutique home : 1 col ============ */
    html body .about-grid,
    html body .shop-grid,
    html body .home-shop-grid {
      grid-template-columns: 1fr !important;
      gap: 16px !important;
    }
    html body .about-media,
    html body .about-portrait {
      width: 100% !important;
      max-width: 280px !important;
      margin: 0 auto !important;
      aspect-ratio: 4 / 5 !important;
      border-radius: 14px !important;
      overflow: hidden !important;
    }
    html body .about-media img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
    html body .about-text h2 { text-align: center !important; }
    html body .about-text p { text-align: center !important; font-size: 15px !important; line-height: 1.6 !important; }

    /* ============ Process stepper : vertical, 1 col ============ */
    html body .process-v20 .stepper,
    html body .stepper {
      grid-template-columns: 1fr !important;
      gap: 8px !important;
    }
    html body .step-tab,
    html body .process-v20 .step-tab {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      gap: 12px !important;
      padding: 14px !important;
      text-align: left !important;
      width: 100% !important;
      box-sizing: border-box !important;
    }
    html body .step-num,
    html body .process-v20 .step-num {
      font-size: 22px !important;
      color: #e0b480 !important;
      font-family: 'Cinzel', serif !important;
    }
    html body .step-panel,
    html body .process-v20 .step-panel { display: none !important; }
    html body .step-panel.is-active,
    html body .process-v20 .step-panel.is-active {
      display: block !important;
      padding: 18px !important;
      grid-template-columns: 1fr !important;
      text-align: center !important;
      background: rgba(224,180,128,0.05) !important;
      border-radius: 14px !important;
      margin-top: 12px !important;
    }
    html body .step-panel-text h3 { font-size: 18px !important; }

    /* ============ FAQ : 1 col ============ */
    html body .faq-doc {
      grid-template-columns: 1fr !important;
      gap: 14px !important;
    }
    html body .faq-search {
      width: 100% !important;
      padding: 12px 14px !important;
      background: rgba(12,34,28,0.6) !important;
      border: 1px solid rgba(224,180,128,0.25) !important;
      color: #fdebd6 !important;
      font-size: 14px !important;
      border-radius: 10px !important;
      box-sizing: border-box !important;
    }
    html body .faq-filters {
      overflow-x: auto !important;
      flex-wrap: nowrap !important;
      padding-bottom: 6px !important;
      gap: 6px !important;
    }
    html body .faq-chip {
      white-space: nowrap !important;
      flex-shrink: 0 !important;
      font-size: 11px !important;
      padding: 6px 12px !important;
    }
    html body .faq-q {
      padding: 14px !important;
      font-size: 14px !important;
    }
    html body .faq-a {
      padding: 16px !important;
      font-size: 14px !important;
    }

    /* ============ Lead magnet : empile ============ */
    html body .lead-magnet-v20 .lead-magnet-inner {
      grid-template-columns: 1fr !important;
      gap: 24px !important;
    }
    html body .lm-mockup-stage { transform: scale(0.85) !important; }
    html body .lm-form-row {
      flex-direction: column !important;
      gap: 8px !important;
    }
    html body .lm-form-row input {
      width: 100% !important;
      padding: 14px !important;
      font-size: 15px !important;
      border-radius: 10px !important;
      box-sizing: border-box !important;
    }
    html body .lm-form-row .big-cta {
      width: 100% !important;
      justify-content: center !important;
    }

    /* ============ CONTACT : 1 col, champs lisibles ============ */
    html body .contact-inner {
      padding: 0 !important;
      display: block !important;
    }
    html body .contact-info {
      grid-template-columns: 1fr !important;
      gap: 12px !important;
      margin-bottom: 24px !important;
    }
    html body .contact-info > div {
      text-align: center !important;
      padding: 14px !important;
      background: rgba(224,180,128,0.05) !important;
      border-radius: 10px !important;
    }
    html body .contact-form { padding: 0 !important; }
    html body .field {
      margin-bottom: 14px !important;
    }
    html body .field input,
    html body .field textarea {
      width: 100% !important;
      padding: 14px !important;
      font-size: 15px !important;
      background: rgba(12,34,28,0.6) !important;
      border: 1px solid rgba(224,180,128,0.25) !important;
      color: #fdebd6 !important;
      border-radius: 10px !important;
      box-sizing: border-box !important;
      font-family: 'Inter', sans-serif !important;
    }
    html body .field textarea { min-height: 96px !important; }
    html body .field label {
      display: block !important;
      margin-bottom: 6px !important;
      font-size: 12px !important;
      letter-spacing: 0.16em !important;
      color: #e0b480 !important;
      text-transform: uppercase !important;
    }
    html body .contact-tags {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 6px !important;
      margin-bottom: 18px !important;
    }
    html body .chip {
      padding: 6px 12px !important;
      font-size: 11px !important;
      border-radius: 999px !important;
      border: 1px solid rgba(224,180,128,0.3) !important;
      color: #fdebd6 !important;
      background: rgba(12,34,28,0.5) !important;
    }
    html body .big-cta {
      width: 100% !important;
      padding: 16px !important;
      font-size: 13px !important;
      letter-spacing: 0.2em !important;
      text-transform: uppercase !important;
      background: linear-gradient(135deg, #e0b480, #c89a64) !important;
      color: #0c221c !important;
      border: 0 !important;
      border-radius: 999px !important;
      cursor: pointer !important;
      font-family: 'Cinzel', serif !important;
      font-weight: 600 !important;
    }

    /* ============ Footer : 1 col centre ============ */
    html body .footer-grid {
      grid-template-columns: 1fr !important;
      gap: 24px !important;
      text-align: center !important;
    }
    html body .footer-grid > div { text-align: center !important; }
    html body .footer-bottom {
      flex-direction: column !important;
      gap: 8px !important;
      text-align: center !important;
      font-size: 11px !important;
      padding-top: 18px !important;
    }

    /* ============ Burger : VISIBLE sur mobile (v36 override) ============ */
    html body .burger {
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
      align-items: center !important;
      width: 44px !important;
      height: 44px !important;
      gap: 5px !important;
      z-index: 110 !important;
      background: transparent !important;
      border: 0 !important;
      cursor: pointer !important;
      padding: 0 !important;
    }
    html body .burger span {
      display: block !important;
      width: 22px !important;
      height: 2px !important;
      background: #fdebd6 !important;
    }

    /* ============ Reveal : on FORCE l affichage si JS pas charge ============ */
    html body [data-reveal],
    html body .reveal,
    html body .fade-in,
    html body .audience-panel,
    html body .step-panel,
    html body .work-card {
      opacity: 1 !important;
      transform: none !important;
      visibility: visible !important;
    }
    /* Sauf premier audience et step actif qui reste actif */

    /* ============ Lightbox / modales : prennent toute la place ============ */
    html body .pf-lightbox.is-open { padding: 8px !important; }

    /* ============ Boutons magnetiques : disable l effet ============ */
    html body .magnetic { transform: none !important; }

    /* ============ Cacher elements desktop-only ============ */
    html body .cursor,
    html body .cursor-label,
    html body .desktop-only { display: none !important; }
  }

  /* ============ Petits ecrans : ajustement supplementaire ============ */
  @media (max-width: 380px) {
    html body .hero .hero-title-big,
    html body .hero h1 { font-size: 30px !important; }
    html body section h2,
    html body .section-title { font-size: 26px !important; }
    html body .hero .hero-sub { font-size: 14px !important; }
  }


/* ============================================================
   FINAL v38 OVERRIDE — Gagne la cascade
   Garantit le carousel FAQ + supprime tout layout 2-col residuel
   ============================================================ */

/* FAQ Carousel : UNE seule question visible (.is-visible) */
html body .faq .faq-doc,
html body:not(.page-boutique) .faq .faq-doc {
  display: block !important;
  grid-template-columns: none !important;
  max-width: 880px !important;
  margin: 0 auto !important;
  position: relative !important;
}
html body .faq .faq-doc-nav,
html body:not(.page-boutique) .faq .faq-doc-nav {
  display: block !important;
  grid-template-columns: none !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
}
html body .faq .faq-item {
  display: none !important;
}
html body .faq .faq-item.is-visible {
  display: block !important;
  animation: faqFinalSlideIn .45s cubic-bezier(.2,.7,.2,1) !important;
}
@keyframes faqFinalSlideIn {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Question et reponse dans l'item visible */
html body .faq .faq-item.is-visible .faq-q {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 22px 28px !important;
  border-radius: 16px 16px 0 0 !important;
  background:
    radial-gradient(circle 300px at 0% 50%, rgba(224,180,128,0.15) 0%, transparent 70%),
    linear-gradient(135deg, rgba(224, 180, 128, 0.12) 0%, rgba(224, 180, 128, 0.04) 100%) !important;
  border: 1px solid rgba(224, 180, 128, 0.45) !important;
  border-bottom: 0 !important;
  cursor: default !important;
  box-shadow: 0 18px 40px -16px rgba(224, 180, 128, 0.35) !important;
}
html body .faq .faq-item.is-visible .faq-a,
html body .faq .faq-item.is-visible .faq-a.is-active {
  display: block !important;
  padding: clamp(2rem, 4vw, 3rem) !important;
  background:
    radial-gradient(circle 300px at 100% 0%, rgba(20, 48, 42, 0.15) 0%, transparent 65%),
    linear-gradient(180deg, #e0b480 0%, #c89a64 100%) !important;
  border: 1px solid rgba(20, 48, 42, 0.3) !important;
  border-top: 0 !important;
  border-radius: 0 0 16px 16px !important;
  margin: 0 !important;
}
html body .faq .faq-nav {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  max-width: 880px !important;
  margin: clamp(1.5rem, 3vw, 2.4rem) auto 0 !important;
  gap: 12px !important;
}

/* ============================================================
   Section video HOME : UN SEUL player vertical
   ============================================================ */
.home-video-hero {
  max-width: 460px;
  margin: clamp(3rem, 6vw, 5rem) auto 0;
  padding: 0 var(--pad-x, 1.5rem);
  position: relative;
}
.home-video-hero .video-frame {
  position: relative;
  aspect-ratio: 9/16;
  border-radius: 18px;
  overflow: hidden;
  background: #0a1c17;
  border: 1px solid rgba(224, 180, 128, 0.35);
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,0.6),
    0 0 60px -16px rgba(224, 180, 128, 0.3);
  cursor: pointer;
  transition: transform .55s cubic-bezier(.2,.7,.2,1), box-shadow .55s ease, border-color .35s ease;
}
.home-video-hero .video-frame:hover {
  transform: translateY(-4px) scale(1.005);
  border-color: rgba(224, 180, 128, 0.65);
  box-shadow:
    0 40px 80px -22px rgba(0,0,0,0.75),
    0 0 80px -12px rgba(224, 180, 128, 0.45);
}
.home-video-hero video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.home-video-hero .video-play-cta {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom,
    rgba(12,34,28,0.18) 0%,
    rgba(12,34,28,0.05) 35%,
    rgba(12,34,28,0.4) 100%);
  pointer-events: none;
  transition: opacity .4s ease;
}
.home-video-hero .video-frame.is-playing .video-play-cta { opacity: 0; }
.home-video-hero .play-circle {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e0b480, #c89a64);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 20px 48px -10px rgba(0,0,0,0.6),
    0 0 0 0 rgba(224, 180, 128, 0.5);
  animation: playPulse 2.4s ease-out infinite;
}
.home-video-hero .play-circle svg {
  width: 32px; height: 32px;
  fill: #0c221c;
  margin-left: 4px;
}
@keyframes playPulse {
  0%, 100% { box-shadow: 0 20px 48px -10px rgba(0,0,0,0.6), 0 0 0 0 rgba(224, 180, 128, 0.5); }
  50%      { box-shadow: 0 20px 48px -10px rgba(0,0,0,0.6), 0 0 0 18px rgba(224, 180, 128, 0); }
}
.home-video-hero .video-tagline {
  position: absolute;
  bottom: 22px;
  left: 22px;
  right: 22px;
  color: #fdebd6;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.3;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
  pointer-events: none;
  transition: opacity .4s ease;
}
.home-video-hero .video-frame.is-playing .video-tagline { opacity: 0; }
.home-video-hero .video-tagline-cat {
  display: block;
  font-family: 'Cinzel', serif;
  font-style: normal;
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #e0b480;
  margin-bottom: 6px;
}

/* Annule l'ancienne grid 3-cols .work-videos */
.work-videos { display: none !important; }

/* Portfolio : section video dediee */
.pf-video-section {
  max-width: 920px;
  margin: clamp(3rem, 6vw, 5rem) auto;
  padding: 0 clamp(1rem, 3vw, 2rem);
  text-align: center;
}
.pf-video-section h2 {
  color: #fdebd6;
  font-family: 'Cinzel', serif;
  font-weight: 500;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin: 0.8rem 0 0.8rem;
}
.pf-video-section h2 em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: #e0b480;
}
.pf-video-section .lede {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: #ecc89e;
  font-size: 1.05rem;
  max-width: 50ch;
  margin: 0 auto clamp(1.5rem, 3vw, 2.4rem);
}
.pf-video-section .video-frame {
  position: relative;
  aspect-ratio: 9/16;
  max-width: 420px;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  background: #0a1c17;
  border: 1px solid rgba(224, 180, 128, 0.35);
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,0.6),
    0 0 60px -16px rgba(224, 180, 128, 0.3);
  cursor: pointer;
}
.pf-video-section video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.pf-video-section .video-play-cta {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, rgba(12,34,28,0.15), rgba(12,34,28,0.4));
  pointer-events: none;
}
.pf-video-section .video-frame.is-playing .video-play-cta { opacity: 0; transition: opacity .4s; }
.pf-video-section .play-circle {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e0b480, #c89a64);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 20px 48px -10px rgba(0,0,0,0.6);
  animation: playPulse 2.4s ease-out infinite;
}
.pf-video-section .play-circle svg {
  width: 32px; height: 32px;
  fill: #0c221c; margin-left: 4px;
}

/* ============================================================
   v39 — Mobile : reduit la taille des cards "Tirages limites" (home)
   et autres ajustements polish
   ============================================================ */
@media (max-width: 600px) {
  /* SHOP / Tirages limites sur HOME : cards plus compactes */
  html body section.shop .shop-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    max-width: 100% !important;
    padding: 0 12px !important;
    margin: 0 !important;
  }
  html body section.shop .shop-card {
    border-radius: 12px !important;
    overflow: hidden !important;
  }
  html body section.shop .shop-card-media {
    aspect-ratio: 3/4 !important;
    width: 100% !important;
  }
  html body section.shop .shop-card-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  html body section.shop .shop-card-body {
    padding: 8px 8px 10px !important;
  }
  html body section.shop .shop-card-body h3 {
    font-size: 0.88rem !important;
    line-height: 1.18 !important;
    margin: 0 0 4px !important;
  }
  html body section.shop .shop-num {
    font-size: 0.58rem !important;
    letter-spacing: 0.18em !important;
  }
  html body section.shop .shop-meta {
    font-size: 0.66rem !important;
    margin: 0 0 4px !important;
  }
  html body section.shop .shop-price {
    font-size: 0.82rem !important;
  }
  html body section.shop .shop-price .was-tag,
  html body section.shop .shop-price .was {
    font-size: 0.62rem !important;
    margin-left: 4px !important;
  }
  /* Header section shop : padding reduit */
  html body section.shop {
    padding: 36px 0 40px !important;
  }
  html body section.shop .section-head {
    padding: 0 16px !important;
    margin-bottom: 20px !important;
  }
  html body section.shop .section-title {
    font-size: 26px !important;
  }
  html body section.shop .shop-cta-row {
    margin-top: 18px !important;
  }
}

/* ============================================================
   v40 — Pages PACKS enrichies (forwho, why, gallery, faq)
   ============================================================ */
.page-pack main { background: #0c221c; color: #fdebd6; }
.page-pack .pack-section-head {
  max-width: 980px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  padding: 0 var(--pad-x, 1.5rem);
  text-align: center;
}
.page-pack .pack-section-head .eyebrow {
  display: inline-block;
  color: #e0b480;
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}
.page-pack .pack-section-head h2 {
  color: #fdebd6;
  font-family: 'Cinzel', serif;
  font-weight: 500;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.1;
  margin: 0 0 1rem;
}
.page-pack .pack-section-head h2 em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: #e0b480;
  font-weight: 400;
}
.page-pack .pack-section-lede {
  color: #ecc89e;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.05rem;
  max-width: 56ch;
  margin: 0 auto;
  line-height: 1.55;
}

/* POUR QUI */
.page-pack .pack-forwho {
  padding: clamp(3rem, 6vw, 5rem) var(--pad-x, 1.5rem);
  background: radial-gradient(800px 400px at 50% 0%, rgba(224,180,128,0.06), transparent 70%);
}
.page-pack .pack-forwho-inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.page-pack .pack-forwho .eyebrow {
  display: inline-block; color: #e0b480; font-family: 'Cinzel', serif;
  font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: 1rem;
}
.page-pack .pack-forwho h2 {
  color: #fdebd6; font-family: 'Cinzel', serif; font-weight: 500;
  font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; margin: 0 0 1.5rem;
}
.page-pack .pack-forwho h2 em {
  font-family: 'Cormorant Garamond', serif; font-style: italic; color: #e0b480; font-weight: 400;
}
.page-pack .pack-forwho p {
  color: #ecc89e; font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 1.15rem; line-height: 1.65; max-width: 64ch; margin: 0 auto;
}
.page-pack .pack-forwho p strong {
  color: #fdebd6; font-style: normal; font-weight: 600;
}

/* POURQUOI */
.page-pack .pack-why-section {
  padding: clamp(3rem, 6vw, 5rem) var(--pad-x, 1.5rem);
}
.page-pack .pack-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.8rem);
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 880px) { .page-pack .pack-why-grid { grid-template-columns: 1fr; } }
.page-pack .pack-why {
  padding: clamp(1.5rem, 3vw, 2rem);
  background: linear-gradient(180deg, rgba(20,48,42,0.55), rgba(20,48,42,0.35));
  border: 1px solid rgba(224,180,128,0.22);
  border-radius: 14px;
  transition: transform .4s ease, border-color .35s ease, box-shadow .4s ease;
}
.page-pack .pack-why:hover {
  transform: translateY(-4px);
  border-color: rgba(224,180,128,0.5);
  box-shadow: 0 18px 40px -16px rgba(224,180,128,0.35);
}
.page-pack .pack-why h3 {
  color: #fdebd6; font-family: 'Cinzel', serif; font-weight: 500;
  font-size: 1.05rem; line-height: 1.25; margin: 0 0 0.8rem;
}
.page-pack .pack-why p {
  color: #ecc89e; font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 0.96rem; line-height: 1.55; margin: 0;
}

/* INCLUS — surcharge propre */
.page-pack .pack-includes {
  padding: clamp(3rem, 6vw, 5rem) var(--pad-x, 1.5rem);
  background: rgba(20,48,42,0.2);
}
.page-pack .pack-includes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 880px) { .page-pack .pack-includes-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .page-pack .pack-includes-grid { grid-template-columns: 1fr; } }
.page-pack .pack-include {
  padding: clamp(1.2rem, 2vw, 1.6rem);
  border-left: 3px solid #e0b480;
  background: rgba(12,34,28,0.4);
  border-radius: 6px;
}
.page-pack .pack-include h3 {
  color: #fdebd6; font-family: 'Cinzel', serif; font-weight: 500;
  font-size: 0.95rem; margin: 0 0 0.6rem; line-height: 1.3;
}
.page-pack .pack-include p {
  color: #ecc89e; font-family: 'Inter', sans-serif;
  font-size: 0.88rem; line-height: 1.55; margin: 0;
}

/* GALERIE */
.page-pack .pack-gallery {
  padding: clamp(3rem, 6vw, 5rem) var(--pad-x, 1.5rem);
}
.page-pack .pack-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.6rem, 1.5vw, 1rem);
  max-width: 1300px;
  margin: 0 auto;
}
@media (max-width: 880px) { .page-pack .pack-gallery-grid { grid-template-columns: 1fr 1fr; } }
.page-pack .pack-gal-item {
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.page-pack .pack-gal-item:hover {
  transform: scale(1.03);
}
.page-pack .pack-gal-item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: filter .5s ease;
  filter: saturate(0.92);
}
.page-pack .pack-gal-item:hover img { filter: saturate(1.05); }

/* FAQ */
.page-pack .pack-faq {
  padding: clamp(3rem, 6vw, 5rem) var(--pad-x, 1.5rem);
  background: rgba(20,48,42,0.18);
}
.page-pack .pack-faq-list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.page-pack .pack-faq-item {
  background: linear-gradient(180deg, rgba(20,48,42,0.55), rgba(20,48,42,0.35));
  border: 1px solid rgba(224,180,128,0.22);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .35s ease;
}
.page-pack .pack-faq-item[open] {
  border-color: rgba(224,180,128,0.5);
  background: radial-gradient(circle 300px at 0% 50%, rgba(224,180,128,0.12), transparent 70%),
              linear-gradient(180deg, rgba(20,48,42,0.7), rgba(20,48,42,0.45));
}
.page-pack .pack-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 1.5rem;
  cursor: pointer;
  color: #fdebd6;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.3;
  list-style: none;
}
.page-pack .pack-faq-q::-webkit-details-marker { display: none; }
.page-pack .pack-faq-icon {
  color: #e0b480;
  font-family: 'Cinzel', serif;
  font-size: 1.4rem;
  font-weight: 300;
  flex-shrink: 0;
  transition: transform .3s ease;
}
.page-pack .pack-faq-item[open] .pack-faq-icon { transform: rotate(45deg); }
.page-pack .pack-faq-a {
  padding: 0 1.5rem 1.4rem;
}
.page-pack .pack-faq-a p {
  color: #ecc89e;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

/* NAV PACKS */
.page-pack .pack-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1000px;
  margin: clamp(2rem, 4vw, 3rem) auto;
  padding: clamp(1.4rem, 3vw, 2rem) var(--pad-x, 1.5rem);
  border-top: 1px solid rgba(224,180,128,0.18);
  border-bottom: 1px solid rgba(224,180,128,0.18);
  gap: 1rem;
  flex-wrap: wrap;
}
.page-pack .pack-nav a {
  color: #ecc89e;
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.5rem 0.8rem;
  transition: color .25s ease;
}
.page-pack .pack-nav a:hover { color: #e0b480; }
.page-pack .pack-nav a.home {
  color: #e0b480;
  border: 1px solid rgba(224,180,128,0.4);
  border-radius: 999px;
  padding: 0.55rem 1.4rem;
}

/* MOBILE polish */
@media (max-width: 600px) {
  .page-pack .pack-hero { padding: clamp(70px, 12vw, 100px) 16px 32px !important; }
  .page-pack .pack-hero-text h1 { font-size: 32px !important; }
  .page-pack .pack-quick { flex-direction: column !important; gap: 8px !important; }
  .page-pack .pack-quick > div { padding: 8px 0 !important; }
  .page-pack .pack-faq-q { font-size: 0.95rem !important; padding: 14px 16px !important; }
}

/* ============================================================
   v42 — Section video work (Home) : externalisation styles inline
   ============================================================ */
.work-video-head {
  max-width: 1400px;
  margin: clamp(3rem, 6vw, 5rem) auto 0;
  padding: 0 var(--pad-x, 1.5rem);
  text-align: center;
}
.work-video-head .eyebrow {
  color: #e0b480;
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  display: inline-block;
}
.work-video-title {
  font-family: 'Cinzel', serif;
  font-weight: 500;
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  color: #fdebd6;
  margin: 0.8rem 0 0.6rem;
  line-height: 1.1;
}
.work-video-title em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: #e0b480;
}
.work-video-lede {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: #ecc89e;
  font-size: 1.05rem;
  max-width: 50ch;
  margin: 0 auto 1rem;
}

/* ============================================================
   v42 — Textarea formulaire contact : style aligné avec inputs
   ============================================================ */
.contact-form .field-textarea textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(224, 180, 128, 0.3);
  color: #fdebd6;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  padding: 1.6rem 0 0.8rem;
  resize: vertical;
  min-height: 90px;
  outline: none;
  transition: border-color .3s ease;
  font-style: normal;
}
.contact-form .field-textarea textarea:focus {
  border-bottom-color: #e0b480;
}
.contact-form .field-textarea textarea::placeholder {
  color: transparent;
}
.contact-form .field-textarea label {
  position: absolute;
  top: 1.6rem;
  left: 0;
  color: rgba(253, 235, 214, 0.55);
  font-size: 1rem;
  font-family: 'Inter', sans-serif;
  pointer-events: none;
  transition: all .3s ease;
}
.contact-form .field-textarea textarea:focus + label,
.contact-form .field-textarea textarea:not(:placeholder-shown) + label {
  top: 0.2rem;
  font-size: 0.72rem;
  color: #e0b480;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.contact-form .field-textarea {
  position: relative;
}

/* ============================================================
   v42 — FAQ contraste MINIMAL (couleurs seules, layout intact)
   On ne touche QUE les couleurs/bordures. Layout grid conservé.
   ============================================================ */

/* Carte question visible : fond vert profond */
html body .faq .faq-item.is-visible .faq-q {
  background: linear-gradient(135deg, #0c221c 0%, #14302a 100%) !important;
  border: 1px solid rgba(224, 180, 128, 0.5) !important;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.5) !important;
}

/* Numero : pastille or pleine */
html body .faq .faq-item.is-visible .faq-q-num {
  background: linear-gradient(135deg, #fdebd6 0%, #e0b480 100%) !important;
  color: #0c221c !important;
  border-color: transparent !important;
  font-weight: 700 !important;
}

/* Titre : creme bien lisible */
html body .faq .faq-item.is-visible .faq-q-title {
  color: #fdebd6 !important;
  font-weight: 500 !important;
}

/* Chip categorie : or sur fond fonce */
html body .faq .faq-item.is-visible .faq-q-cat {
  background: rgba(12, 34, 28, 0.7) !important;
  color: #e0b480 !important;
  border: 1px solid rgba(224, 180, 128, 0.45) !important;
}

/* Reponse en dessous : on garde le fond dore par defaut */
/* (rien a redefinir, les styles existants conviennent) */

/* ============================================================
   v41 — Process stepper enrichi : eyebrow + sous-points
   ============================================================ */
.process-v20 .step-panel-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
.process-v20 .step-panel-eyebrow {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #e0b480;
  margin: 0 0 0.6rem;
  font-weight: 600;
}
.process-v20 .step-panel-points {
  list-style: none !important;
  padding: 0 !important;
  margin: 0.4rem 0 1.6rem !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px 18px !important;
}
.process-v20 .step-panel-points li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px 14px 12px 14px;
  background: linear-gradient(180deg, rgba(224, 180, 128, 0.06) 0%, rgba(224, 180, 128, 0.02) 100%);
  border: 1px solid rgba(224, 180, 128, 0.18);
  border-radius: 12px;
  transition: all .35s cubic-bezier(.2,.7,.2,1);
}
.process-v20 .step-panel-points li:hover {
  background: linear-gradient(180deg, rgba(224, 180, 128, 0.12) 0%, rgba(224, 180, 128, 0.04) 100%);
  border-color: rgba(224, 180, 128, 0.4);
  transform: translateX(2px);
}
.process-v20 .step-panel-points .spp-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  padding: 4px 10px;
  background: linear-gradient(135deg, #e0b480 0%, #c89a64 100%);
  color: #0c221c;
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: start;
  box-shadow: 0 4px 10px -3px rgba(224, 180, 128, 0.4);
}
.process-v20 .step-panel-points li > span:not(.spp-tag) {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 0.92rem;
  line-height: 1.45;
  color: #ecc89e;
}

/* Mobile : 1 colonne pour les sous-points */
@media (max-width: 700px) {
  .process-v20 .step-panel-points {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .process-v20 .step-panel-eyebrow {
    font-size: 0.58rem !important;
    letter-spacing: 0.22em !important;
  }
  .process-v20 .step-panel-points li {
    padding: 10px 12px !important;
    grid-template-columns: auto 1fr !important;
    gap: 10px !important;
  }
  .process-v20 .step-panel-points .spp-tag {
    min-width: 52px;
    font-size: 0.55rem;
    padding: 3px 8px;
  }
}

/* ============================================================
   v43 — SAFETY ANTI-CHEVAUCHEMENT
   Force le texte des titres a etre visible meme si JS reveal
   ne charge pas. Le translateY(110%) historique poussait le texte
   par dessus le contenu du dessous. On annule.
   ============================================================ */
html body .section-title [data-line],
html body [data-line] {
  transform: none !important;
  opacity: 1 !important;
}
/* On garde l'animation au reveal : opacity 0 -> 1 via .is-visible si JS marche */
/* Mais on ne risque plus que le texte deborde DEHORS de sa box */

/* Securite reveal : tout element [data-reveal] non revele apres 1.5s */
html body [data-reveal]:not(.is-visible) {
  /* Au lieu de translateY(40px) (qui ne deborde pas), on garde mais on
     reduit l'opacite minimale pour eviter "trou" */
  opacity: 0.001;
}
/* Les .section-title ne doivent jamais ETRE INVISIBLES — c'est crucial pour la lisibilite */
html body .section-title {
  opacity: 1 !important;
  transform: none !important;
}

/* Espacements entre header de section et corps : marge garantie */
html body .section-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
html body .section-head .section-title { margin-bottom: clamp(0.8rem, 2vw, 1.4rem); }
html body .section-head .eyebrow { display: inline-block; margin-bottom: clamp(0.6rem, 1.5vw, 1.1rem); }
html body .section-head .section-lede { margin-top: 0; max-width: 60ch; }

/* ============================================================
   v44 — Icones reseaux sociaux footer (Instagram + Facebook)
   ============================================================ */
.footer-socials {
  display: flex;
  gap: 12px;
  margin-top: 1.2rem;
  align-items: center;
}
.footer-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(224, 180, 128, 0.08);
  border: 1px solid rgba(224, 180, 128, 0.28);
  color: #e0b480;
  transition: all .35s cubic-bezier(.2,.7,.2,1);
}
.footer-socials a:hover {
  background: linear-gradient(135deg, #fdebd6 0%, #e0b480 100%);
  border-color: transparent;
  color: #0c221c;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 22px -6px rgba(224, 180, 128, 0.5);
}
.footer-socials a svg {
  display: block;
  transition: transform .35s ease;
}
.footer-socials a:hover svg {
  transform: scale(1.08);
}

/* Mobile : centrer les icones sur petites largeurs */
@media (max-width: 600px) {
  .footer-socials {
    justify-content: flex-start;
    margin-top: 1rem;
  }
}

/* ============================================================
   v45 — Adaptation des illustrations packs (ratio 16:9)
   Les PNG fournis sont en 16:9. Les cadres existants etaient prevus
   pour de la photo en 4:3 ou 16:11. On adapte : object-fit contain
   + fond vert profond pour que l'illustration soit visible en entier.
   ============================================================ */

/* === Pages PACKS : hero-media === */
.page-pack .pack-hero-media {
  background:
    radial-gradient(circle 400px at 50% 50%, rgba(224, 180, 128, 0.15) 0%, transparent 70%),
    linear-gradient(135deg, #14302a 0%, #0c221c 100%) !important;
  border: 1px solid rgba(224, 180, 128, 0.25);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}
.page-pack .pack-hero-media img[src*="assets/img/packs/"] {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
}

/* === Page d'accueil : services crossfade visuel === */
.services-visual-frame {
  background:
    radial-gradient(circle 360px at 50% 50%, rgba(224, 180, 128, 0.12) 0%, transparent 70%),
    linear-gradient(135deg, #14302a 0%, #0c221c 100%) !important;
}
.srv-bg-img[src*="assets/img/packs/"] {
  object-fit: contain !important;
  object-position: center !important;
  padding: 18px !important;
  box-sizing: border-box !important;
}

/* === Page Notre offre : svc-card-media + feature card === */
body.page-offre .svc-card-media:has(img[src*="assets/img/packs/"]),
body.page-offre .svc-card-feature .svc-card-media {
  background:
    radial-gradient(circle 280px at 50% 50%, rgba(224, 180, 128, 0.14) 0%, transparent 70%),
    linear-gradient(135deg, #14302a 0%, #0c221c 100%) !important;
}
body.page-offre .svc-card-media img[src*="assets/img/packs/"] {
  object-fit: contain !important;
  object-position: center !important;
  padding: 10px !important;
  box-sizing: border-box !important;
}
/* Feature Prestige : grand cadre */
body.page-offre .offre-grid-v2 .svc-card-feature .svc-card-media img {
  object-fit: contain !important;
  object-position: center !important;
  padding: 14px !important;
  box-sizing: border-box !important;
}

/* === Aspect-ratio ajuste pour 16:9 (mieux pour les illustrations) === */
body.page-offre .svc-card-media,
.page-pack .pack-hero-media {
  aspect-ratio: 16 / 10 !important;
}

/* === Pas de zoom au hover sur les illustrations (effet bizarre vu le contain) === */
.svc-card:hover .svc-card-media img[src*="assets/img/packs/"] {
  transform: scale(1.02) !important;
}

/* ============================================================
   v46 — Annule v45 et impose cadres 16:9 + object-fit cover
   Les illustrations sont maintenant pre-rognees au format 16:9
   exact (1920x1080), donc cover fonctionne sans rien rogner
   visiblement.
   ============================================================ */

/* === Pages PACKS : pack-hero-media === */
.page-pack .pack-hero-media {
  aspect-ratio: 16 / 9 !important;
  padding: 0 !important;
  border: 1px solid rgba(224, 180, 128, 0.25) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  display: block !important;
  background: #0c221c !important;
}
.page-pack .pack-hero-media img,
.page-pack .pack-hero-media img[src*="assets/img/packs/"] {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  padding: 0 !important;
  display: block !important;
}

/* === Home : services crossfade visuel === */
.services-visual-frame {
  aspect-ratio: 16 / 9 !important;
}
.srv-bg-img,
.srv-bg-img[src*="assets/img/packs/"] {
  object-fit: cover !important;
  object-position: center !important;
  padding: 0 !important;
}

/* === Page offre : cards 04 + 05 (regulars) === */
body.page-offre .svc-card-media {
  aspect-ratio: 16 / 9 !important;
}
body.page-offre .svc-card-media img,
body.page-offre .svc-card-media img[src*="assets/img/packs/"] {
  object-fit: cover !important;
  object-position: center !important;
  padding: 0 !important;
}

/* === Page offre : feature card Prestige (override absolu) === */
html body.page-offre .offre-grid-v2 .svc-card-feature .svc-card-media img {
  object-fit: cover !important;
  object-position: center !important;
  padding: 0 !important;
}

/* Restaurer le hover scale plus visible (cover marche bien maintenant) */
.svc-card:hover .svc-card-media img,
.svc-card:hover .svc-card-media img[src*="assets/img/packs/"] {
  transform: scale(1.06) !important;
}

/* ============================================================
   v47 — DENSIFIER LA VERSION MOBILE (≤ 700px)
   Objectif : ajouter de la structure, réduire les gros éléments,
   tightener les espacements verticaux. Aucune modif desktop.
   ============================================================ */
@media (max-width: 700px) {

  /* === HERO : réduire le H1 monstre et tasser le bloc === */
  html body .hero h1.hero-title-big {
    font-size: clamp(1.7rem, 8vw, 2.6rem) !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
    margin: 0.4rem auto 0.8rem !important;
  }
  html body .hero .hero-sub {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
    margin: 0.6rem auto 1.2rem !important;
    max-width: 32ch !important;
  }
  html body .hero .hero-logo-mark img {
    width: 52px !important;
  }
  html body .hero .hero-overline {
    font-size: 8px !important;
    letter-spacing: 0.18em !important;
    margin-bottom: 8px !important;
  }
  html body .hero .hero-cta-row {
    gap: 0.6rem !important;
    margin-top: 1rem !important;
  }
  html body .hero .big-cta {
    padding: 0.75rem 1.3rem !important;
    font-size: 0.7rem !important;
  }

  /* === STATS : 2×2 compact avec séparateurs nets === */
  html body .stats .stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    padding: 1.4rem 1rem !important;
  }
  html body .stats .stat {
    padding: 0.9rem 0.6rem !important;
    border-bottom: 1px solid rgba(224, 180, 128, 0.18) !important;
    border-right: 1px solid rgba(224, 180, 128, 0.18) !important;
  }
  html body .stats .stat:nth-child(2n) { border-right: none !important; }
  html body .stats .stat:nth-last-child(-n+2) { border-bottom: none !important; }
  html body .stats .stat-num {
    font-size: 1.6rem !important;
    line-height: 1 !important;
  }
  html body .stats .stat-label {
    font-size: 0.55rem !important;
    letter-spacing: 0.18em !important;
    margin-top: 0.3rem !important;
  }

  /* === SECTION HEAD : H2 plus contenu, eyebrow plus pro === */
  html body section .section-title.big,
  html body section h2.section-title {
    font-size: clamp(1.5rem, 6.5vw, 2rem) !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
  }
  html body section .section-head .eyebrow,
  html body section .eyebrow {
    font-size: 0.6rem !important;
    letter-spacing: 0.24em !important;
    margin-bottom: 0.6rem !important;
  }
  html body section .section-lede {
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    max-width: 36ch !important;
    margin-top: 0.6rem !important;
  }

  /* === ESPACEMENTS VERTICAUX généraux : -40% pour densifier === */
  html body section {
    padding-top: clamp(2rem, 5vw, 3rem) !important;
    padding-bottom: clamp(2rem, 5vw, 3rem) !important;
  }
  html body section .section-head {
    margin-bottom: 1.4rem !important;
  }

  /* === AUDIENCE : image panel moins haute, plus structurée === */
  html body .audience .aud-panel-media {
    aspect-ratio: 16 / 11 !important;
    max-height: 200px !important;
  }
  html body .audience .audience-tab {
    padding: 0.7rem 0.8rem !important;
  }
  html body .audience .audience-tab h3 {
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
  }
  html body .audience .aud-tab-hint {
    font-size: 0.7rem !important;
    margin-top: 0.1rem !important;
  }
  html body .audience .aud-panel-body h3 {
    font-size: 1.1rem !important;
    line-height: 1.25 !important;
  }
  html body .audience .aud-panel-body p {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
  }

  /* === WORK mosaïque : cards plus tassées avec séparation visible === */
  html body .work-mosaic {
    gap: 0.8rem !important;
  }
  html body .work-card {
    border-radius: 10px !important;
  }
  html body .work-card .work-card-img {
    aspect-ratio: 16 / 11 !important;
  }
  html body .work-card .work-card-overlay h3 {
    font-size: 1rem !important;
  }
  html body .work-card .work-card-overlay p {
    font-size: 0.72rem !important;
  }
  html body .work-card-num {
    font-size: 0.55rem !important;
    padding: 3px 8px !important;
  }

  /* === SERVICES list : compacter chaque ligne === */
  html body .services-list .srv {
    padding: 0.8rem 0 !important;
  }
  html body .services-list .srv-num {
    font-size: 0.7rem !important;
    width: 36px !important;
  }
  html body .services-list .srv-title {
    font-size: 1rem !important;
    line-height: 1.2 !important;
  }
  html body .services-list .srv-desc {
    font-size: 0.78rem !important;
    line-height: 1.45 !important;
    margin-top: 0.3rem !important;
  }

  /* === ABOUT : portrait + texte plus dense === */
  html body .about .about-portrait img {
    max-width: 160px !important;
  }
  html body .about .about-portrait figcaption {
    font-size: 0.7rem !important;
  }
  html body .about .about-lede {
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
  }
  html body .about p {
    font-size: 0.85rem !important;
    line-height: 1.55 !important;
  }
  html body .about-testimonials .testimonial {
    padding: 1.1rem 1rem !important;
  }
  html body .about-testimonials blockquote {
    font-size: 0.85rem !important;
    line-height: 1.55 !important;
  }
  html body .about-testimonials figcaption {
    font-size: 0.75rem !important;
  }

  /* === SHOP cards déjà compactes, on tightent les titres === */
  html body .shop .shop-card h3 {
    font-size: 0.85rem !important;
    line-height: 1.2 !important;
  }
  html body .shop .shop-card .shop-meta {
    font-size: 0.7rem !important;
  }
  html body .shop .shop-card .shop-price {
    font-size: 0.85rem !important;
  }

  /* === PROCESS stepper : tighter, mais lisible === */
  html body .process .stepper .step-tab {
    padding: 0.7rem 0.8rem !important;
  }
  html body .process .step-tab .step-num {
    font-size: 0.85rem !important;
  }
  html body .process .step-tab .step-label {
    font-size: 0.75rem !important;
  }
  html body .process .step-tab .step-sub {
    font-size: 0.65rem !important;
  }
  html body .process .step-panel.is-active {
    padding: 1.3rem 1rem !important;
  }
  html body .process .step-panel-text h3 {
    font-size: 1.05rem !important;
    line-height: 1.25 !important;
  }
  html body .process .step-panel-text p {
    font-size: 0.83rem !important;
    line-height: 1.5 !important;
  }
  html body .process .step-panel-points li {
    padding: 8px 10px !important;
    grid-template-columns: auto 1fr !important;
    gap: 8px !important;
  }
  html body .process .step-panel-points .spp-tag {
    font-size: 0.5rem !important;
    padding: 2px 6px !important;
    min-width: 46px !important;
  }
  html body .process .step-panel-points li > span:not(.spp-tag) {
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
  }
  html body .process .step-panel-icon {
    width: 60px !important;
    height: 60px !important;
  }
  html body .process .step-panel-icon svg {
    width: 28px !important;
    height: 28px !important;
  }

  /* === FAQ : carte question plus compacte === */
  html body .faq .faq-item.is-visible .faq-q,
  html body .faq .faq-q.is-active {
    padding: 14px 16px !important;
  }
  html body .faq .faq-item.is-visible .faq-q-num,
  html body .faq .faq-q.is-active .faq-q-num {
    width: 36px !important;
    height: 36px !important;
    font-size: 0.7rem !important;
  }
  html body .faq .faq-item.is-visible .faq-q-title {
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
  }
  html body .faq .faq-item.is-visible .faq-q-cat {
    font-size: 0.5rem !important;
    padding: 3px 8px !important;
  }
  html body .faq .faq-item.is-visible .faq-a {
    padding: 1.2rem 1rem !important;
  }
  html body .faq .faq-item.is-visible .faq-a h3 {
    font-size: 1rem !important;
    line-height: 1.25 !important;
  }
  html body .faq .faq-item.is-visible .faq-a p {
    font-size: 0.85rem !important;
    line-height: 1.55 !important;
  }
  html body .faq .faq-nav-btn {
    width: 40px !important;
    height: 40px !important;
  }

  /* === LEAD MAGNET : livre plus petit, texte tassé === */
  html body .lead-magnet-v32 .lm-book {
    width: 180px !important;
  }
  html body .lead-magnet-v32 .lm-content h2 {
    font-size: 1.4rem !important;
    line-height: 1.15 !important;
  }
  html body .lead-magnet-v32 .lm-bullets li {
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
  }
  html body .lead-magnet-v32 .lm-bullet-num {
    font-size: 0.65rem !important;
    width: 24px !important;
    height: 24px !important;
  }

  /* === CONTACT form : champs plus compacts === */
  html body .contact .contact-title {
    font-size: 1.5rem !important;
  }
  html body .contact .contact-info {
    grid-template-columns: 1fr !important;
    gap: 0.8rem !important;
  }
  html body .contact .contact-info > div {
    padding: 0.5rem 0 !important;
    border-bottom: 1px solid rgba(224, 180, 128, 0.18) !important;
  }
  html body .contact .contact-info > div:last-child {
    border-bottom: none !important;
  }
  html body .contact .contact-info .kicker {
    font-size: 0.6rem !important;
    letter-spacing: 0.2em !important;
  }
  html body .contact .field {
    margin-bottom: 0.6rem !important;
  }
  html body .contact .field input,
  html body .contact .field textarea {
    padding-top: 1.3rem !important;
    font-size: 0.92rem !important;
  }
  html body .contact-tags {
    gap: 0.4rem !important;
    margin-top: 0.8rem !important;
  }
  html body .contact-tags .chip {
    font-size: 0.7rem !important;
    padding: 0.35rem 0.7rem !important;
  }

  /* === FOOTER : grille 2 colonnes + plus compact === */
  html body .site-footer .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem 1rem !important;
  }
  html body .site-footer .footer-grid > div:first-child {
    grid-column: 1 / -1 !important;
    text-align: center !important;
  }
  html body .site-footer h4 {
    font-size: 0.62rem !important;
    letter-spacing: 0.2em !important;
    margin-bottom: 0.6rem !important;
  }
  html body .site-footer ul li {
    font-size: 0.78rem !important;
    margin-bottom: 0.3rem !important;
  }
  html body .site-footer .footer-socials {
    justify-content: center !important;
  }

  /* === SÉPARATEURS DOUX entre sections === */
  html body main > section + section {
    border-top: 1px solid rgba(224, 180, 128, 0.08);
  }
}

/* ============================================================
   v48 — REFONTE PREMIUM (TYPO + FIXES CRITIQUES)
   ============================================================ */

/* --- TYPOGRAPHIE PREMIUM : palette dorée affinée + Inter Tight --- */
:root {
  --gold-soft: #d4a574;        /* Or champagne (était #e0b480) */
  --gold-light: #f0e3cc;        /* Crème dorée chaude (était #fdebd6) */
  --gold-deep: #b8915a;         /* Or profond (signature) */
  --cream-warm: #f4ead4;        /* Crème chaude pour titres */
}
html body {
  font-family: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  font-feature-settings: 'ss01', 'cv11', 'kern' !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

/* Affiner les couleurs dorées partout (sans toucher la structure) */
html body .eyebrow,
html body .section-title em,
html body .hero-title-big em,
html body .audience .aud-num,
html body .work-card-num,
html body .services-list .srv-num {
  color: #d4a574 !important;
}
html body .hero-title-big,
html body .section-title.big,
html body section h2 {
  color: #f4ead4 !important;
}

/* --- FAQ : forcer la grille sur la question visible (pas de !important display
       sur :first-of-type pour ne pas bloquer le carousel) --- */
html body .faq .faq-doc-nav .faq-item.is-visible .faq-q {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: 18px !important;
  visibility: visible !important;
  opacity: 1 !important;
}
html body .faq .faq-doc-nav .faq-item.is-visible .faq-a {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* --- AUDIENCE : photos NON coupées + textes toujours visibles --- */
html body .audience .aud-panel-media {
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
  position: relative !important;
}
html body .audience .aud-panel-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}
html body .audience .aud-tab-hint,
html body .audience .audience-tab .aud-tab-hint {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: rgba(244, 234, 212, 0.7) !important;
  font-size: 0.72rem !important;
  margin-top: 0.25rem !important;
  letter-spacing: 0.02em !important;
}

/* --- LEAD MAGNET BOUTON "RECEVOIR" CENTRÉ avec champ email --- */
html body .lead-magnet-v32 .lm-form-row {
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 0 !important;
  max-width: 520px !important;
  margin: 0 auto !important;
}
html body .lead-magnet-v32 .lm-form-row input[type="email"] {
  flex: 1 !important;
  border-radius: 999px 0 0 999px !important;
  padding: 0.95rem 1.4rem !important;
  margin: 0 !important;
}
html body .lead-magnet-v32 .lm-form-row button,
html body .lead-magnet-v32 .lm-form-row .big-cta {
  border-radius: 0 999px 999px 0 !important;
  padding: 0.95rem 1.6rem !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

/* --- LIBÉRER LE CONTENU DESKTOP : couleur affinée --- */
@media (min-width: 701px) {
  html body .hero-title-big {
    color: #f4ead4 !important;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45) !important;
  }
  html body .hero-title-big em,
  html body .section-title em {
    color: #d4a574 !important;
    text-shadow: 0 0 30px rgba(212, 165, 116, 0.35) !important;
  }
}

/* ============================================================
   v49 — PORTFOLIO REFONTE : 1 slide par maison + swiper horizontal
   ============================================================ */
body.page-portfolio main {
  padding-top: clamp(96px, 11vw, 130px);
  padding-bottom: clamp(4rem, 8vw, 7rem);
}
body.page-portfolio {
  background:
    radial-gradient(1100px 600px at 18% -10%, rgba(212,165,116,0.07), transparent 60%),
    radial-gradient(900px 700px at 95% 110%, rgba(212,165,116,0.05), transparent 65%),
    #0c221c;
  color: #f4ead4;
}

/* === Filtres catégories === */
.pf-filters-bar {
  position: sticky; top: 76px;
  z-index: 50;
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 0.6rem;
  max-width: 1200px; margin: 0 auto 3rem;
  padding: 0.8rem clamp(1rem, 3vw, 2rem);
  background: rgba(12, 34, 28, 0.6);
  backdrop-filter: blur(20px);
  border-radius: 999px;
  border: 1px solid rgba(212, 165, 116, 0.2);
}
.pf-chip {
  background: transparent;
  border: 1px solid rgba(212, 165, 116, 0.25);
  color: #f4ead4;
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all .35s cubic-bezier(.2,.7,.2,1);
  font-weight: 500;
}
.pf-chip:hover {
  background: rgba(212, 165, 116, 0.08);
  border-color: rgba(212, 165, 116, 0.5);
  color: #d4a574;
}
.pf-chip.is-active {
  background: linear-gradient(135deg, #d4a574, #b8915a);
  color: #0c221c;
  border-color: transparent;
  box-shadow: 0 10px 22px -6px rgba(212, 165, 116, 0.4);
}

/* === Bloc maison === */
.house-block {
  max-width: 1280px;
  margin: 0 auto clamp(4rem, 8vw, 7rem);
  padding: 0 clamp(1rem, 3vw, 2rem);
}
.house-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: flex-end;
  margin-bottom: 1.5rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid rgba(212, 165, 116, 0.15);
}
.house-meta-left .eyebrow {
  display: inline-block;
  color: #d4a574;
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.house-name {
  font-family: 'Cinzel', serif;
  font-weight: 500;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  color: #f4ead4;
  margin: 0 0 0.6rem;
  letter-spacing: 0.01em;
  line-height: 1.1;
}
.house-desc {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: #ecc89e;
  font-size: 1.05rem;
  max-width: 56ch;
  margin: 0 0 1rem;
  line-height: 1.55;
}
.house-tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.house-tag {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #d4a574;
  padding: 4px 10px;
  border: 1px solid rgba(212, 165, 116, 0.3);
  border-radius: 999px;
  background: rgba(212, 165, 116, 0.05);
}
.house-stats {
  display: flex;
  gap: 1.4rem;
}
.house-stats > div {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.house-stats strong {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 1.5rem;
  color: #d4a574;
}
.house-stats span {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ecc89e;
}
@media (max-width: 700px) {
  .house-header {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  .house-stats {
    gap: 1rem;
  }
  .house-stats strong { font-size: 1.2rem; }
}

/* === Swiper === */
.house-swiper-wrap {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.8rem;
}
.house-swiper {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 1rem;
  scrollbar-width: none;
  padding: 0.5rem 0;
  border-radius: 18px;
}
.house-swiper::-webkit-scrollbar { display: none; }
.house-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(135deg, #14302a, #0c221c);
  border: 1px solid rgba(212, 165, 116, 0.18);
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.55);
  position: relative;
}
.house-slide img,
.house-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.house-slide:hover img { transform: scale(1.03); }
.house-slide-video video {
  object-fit: contain;
  background: #000;
}

/* Flèches */
.swiper-arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(212, 165, 116, 0.1);
  border: 1px solid rgba(212, 165, 116, 0.35);
  color: #d4a574;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .35s cubic-bezier(.2,.7,.2,1);
  flex-shrink: 0;
}
.swiper-arrow:hover {
  background: linear-gradient(135deg, #d4a574, #b8915a);
  color: #0c221c;
  border-color: transparent;
  transform: scale(1.08);
}
.swiper-arrow svg { width: 22px; height: 22px; }
.swiper-arrow:disabled { opacity: 0.3; cursor: not-allowed; }

/* Pagination */
.house-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: #d4a574;
}
.house-pagination .page-current {
  font-weight: 600;
  font-size: 0.9rem;
  color: #f4ead4;
}
.house-pagination .page-sep {
  opacity: 0.5;
}

/* Quand un filtre cache un slide */
.house-slide.is-hidden {
  display: none !important;
}
.house-block.is-empty {
  display: none !important;
}

/* Mobile : swiper plus compact */
@media (max-width: 700px) {
  .house-swiper-wrap {
    grid-template-columns: 1fr;
  }
  .swiper-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(12, 34, 28, 0.85);
    backdrop-filter: blur(10px);
  }
  .swiper-prev { left: 8px; }
  .swiper-next { right: 8px; }
}

/* ============================================================
   v50 — PORTFOLIO MOSAÏQUE GRID + LIGHTBOX zoom
   ============================================================ */
body.page-portfolio .house-block {
  max-width: 1400px;
  margin: 0 auto clamp(4rem, 8vw, 6rem);
  padding: 0 clamp(1rem, 3vw, 2rem);
}
body.page-portfolio .house-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: end;
  margin-bottom: 1.5rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid rgba(212, 165, 116, 0.2);
}
body.page-portfolio .house-meta-left .eyebrow {
  display: inline-block;
  color: #d4a574;
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
body.page-portfolio .house-name {
  font-family: 'Cinzel', serif;
  font-weight: 500;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  color: #f4ead4;
  margin: 0 0 0.5rem;
  line-height: 1.1;
}
body.page-portfolio .house-desc {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: #ecc89e;
  font-size: 1.05rem;
  max-width: 56ch;
  margin: 0;
  line-height: 1.55;
}
body.page-portfolio .house-stats {
  display: flex;
  gap: 1.6rem;
}
body.page-portfolio .house-stats > div {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
body.page-portfolio .house-stats strong {
  font-family: 'Cinzel', serif;
  font-size: 1.6rem;
  color: #d4a574;
}
body.page-portfolio .house-stats span {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ecc89e;
}

/* MOSAÏQUE GRID = colonnes asymétriques (CSS columns) */
body.page-portfolio .mosaic-grid {
  column-count: 4;
  column-gap: 12px;
}
@media (max-width: 1100px) {
  body.page-portfolio .mosaic-grid { column-count: 3; }
}
@media (max-width: 750px) {
  body.page-portfolio .mosaic-grid { column-count: 2; }
}
@media (max-width: 480px) {
  body.page-portfolio .mosaic-grid { column-count: 1; }
}

body.page-portfolio .mosaic-tile {
  display: block;
  width: 100%;
  margin: 0 0 12px;
  padding: 0;
  border: none;
  background: linear-gradient(135deg, #14302a, #0c221c);
  border-radius: 10px;
  overflow: hidden;
  cursor: zoom-in;
  position: relative;
  break-inside: avoid;
  box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.5);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
}
body.page-portfolio .mosaic-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 34px -10px rgba(0, 0, 0, 0.6);
}
body.page-portfolio .mosaic-tile img,
body.page-portfolio .mosaic-tile video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
body.page-portfolio .mosaic-tile.mosaic-video {
  cursor: pointer;
}
body.page-portfolio .mosaic-tile.mosaic-video video {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Bouton play sur les vidéos */
body.page-portfolio .mosaic-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
body.page-portfolio .mosaic-play svg {
  width: 48px;
  height: 48px;
  color: #fdebd6;
  background: linear-gradient(135deg, #d4a574, #b8915a);
  border-radius: 50%;
  padding: 14px 12px 14px 16px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
  color: #0c221c;
}
body.page-portfolio .mosaic-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(12, 34, 28, 0.85);
  color: #d4a574;
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(212, 165, 116, 0.5);
  backdrop-filter: blur(8px);
}

@media (max-width: 700px) {
  body.page-portfolio .house-header {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  body.page-portfolio .house-stats { gap: 1rem; }
  body.page-portfolio .house-stats strong { font-size: 1.2rem; }
  body.page-portfolio .mosaic-grid { column-gap: 8px; }
  body.page-portfolio .mosaic-tile { margin-bottom: 8px; }
}

/* === HOME : Services list cliquables avec photos packs visibles sur mobile === */
@media (max-width: 700px) {
  html body .services .services-list .srv {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin-bottom: 1rem !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #14302a, #0c221c) !important;
    border: 1px solid rgba(212, 165, 116, 0.18) !important;
  }
  html body .services .services-list .srv-link {
    display: block !important;
    padding: 0 !important;
    text-decoration: none !important;
  }
  html body .services .services-list .srv::before {
    content: '' !important;
    display: block !important;
    height: 160px !important;
    background-image: var(--srv-img) !important;
    background-size: cover !important;
    background-position: center !important;
    position: relative !important;
  }
  /* Affecte chaque srv une image de fond via data-img */
  html body .services .services-list .srv:nth-child(1)::before { background-image: url('assets/img/packs/prestige-hero.webp') !important; }
  html body .services .services-list .srv:nth-child(2)::before { background-image: url('assets/img/packs/elegance-hero.webp') !important; }
  html body .services .services-list .srv:nth-child(3)::before { background-image: url('assets/img/packs/vue-celeste-hero.webp') !important; }
  html body .services .services-list .srv:nth-child(4)::before { background-image: url('assets/img/packs/cinema-hero.webp') !important; }
  html body .services .services-list .srv:nth-child(5)::before { background-image: url('assets/img/packs/inspection-hero.webp') !important; }
  html body .services .services-list .srv-content {
    padding: 1rem 1.2rem 1.2rem !important;
  }
  html body .services-list .srv-num {
    color: #d4a574 !important;
    font-size: 0.65rem !important;
    margin-bottom: 0.3rem !important;
  }
  html body .services-list .srv-title {
    color: #f4ead4 !important;
    font-size: 1rem !important;
    margin-bottom: 0.3rem !important;
  }
  html body .services-list .srv-desc {
    color: #ecc89e !important;
    font-size: 0.82rem !important;
  }
  html body .services-list .srv-arrow {
    display: none !important;
  }
  /* Cacher le visual crossfade qui ne sert plus à rien en mobile */
  html body .services-visual {
    display: none !important;
  }
}

/* === MOBILE : burger DOIT s'ouvrir === */
@media (max-width: 980px) {
  html body .site-header .burger {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    width: 40px !important;
    height: 40px !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 1px solid rgba(212, 165, 116, 0.4) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    z-index: 1001 !important;
  }
  html body .site-header .burger span {
    display: block !important;
    width: 18px !important;
    height: 2px !important;
    background: #d4a574 !important;
    transition: transform .3s ease !important;
  }
  html body .site-header .nav {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: min(320px, 80vw) !important;
    background: linear-gradient(180deg, #14302a, #0c221c) !important;
    padding: 100px 2rem 2rem !important;
    transform: translateX(100%) !important;
    transition: transform .4s cubic-bezier(.2,.7,.2,1) !important;
    border-left: 1px solid rgba(212, 165, 116, 0.25) !important;
    z-index: 1000 !important;
    display: block !important;
  }
  html body .site-header .nav.is-open,
  html body.nav-open .site-header .nav {
    transform: translateX(0) !important;
  }
  html body .site-header .nav ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.2rem !important;
  }
  html body .site-header .nav ul li a {
    color: #f4ead4 !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    display: block !important;
    padding: 0.6rem 0 !important;
    border-bottom: 1px solid rgba(212, 165, 116, 0.18) !important;
  }
  html body .site-header .nav ul li a:hover {
    color: #d4a574 !important;
  }
  /* Animation hamburger */
  html body .site-header .burger.is-open span:first-child,
  html body.nav-open .site-header .burger span:first-child {
    transform: translateY(3.5px) rotate(45deg) !important;
  }
  html body .site-header .burger.is-open span:last-child,
  html body.nav-open .site-header .burger span:last-child {
    transform: translateY(-3.5px) rotate(-45deg) !important;
  }
}

/* ============================================================
   v51 — Galeries packs : support vidéo + ratio 16:10 uniforme
   ============================================================ */
.page-pack .pack-gal-item.pack-gal-video {
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  position: relative;
}
.page-pack .pack-gal-item.pack-gal-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page-pack .pack-gal-item.pack-gal-video::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 80px at center, rgba(212, 165, 116, 0.18) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}
.page-pack .pack-gallery-videos {
  grid-template-columns: repeat(2, 1fr) !important;
}
@media (max-width: 700px) {
  .page-pack .pack-gallery-videos {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   v52 — KILL CUSTOM CURSOR : restaure le curseur natif partout
   ============================================================ */
html, html body { cursor: auto !important; }
html body a, html body button, html body [role="button"],
html body input[type="submit"], html body input[type="button"],
html body label, html body summary, html body .big-cta,
html body .btn, html body .btn-pill, html body .magnetic,
html body [data-cursor], html body .pack-gal-item,
html body .mosaic-tile, html body .pricing-card,
html body .faq-arrow, html body .faq-item,
html body .burger, html body .nav a {
  cursor: pointer !important;
}
html body input[type="text"], html body input[type="email"],
html body input[type="tel"], html body input[type="url"],
html body input[type="search"], html body textarea,
html body select { cursor: text !important; }
html body input[type="checkbox"], html body input[type="radio"],
html body select { cursor: pointer !important; }
html body .cursor, html body .cursor-label,
html body #cursor, html body [id="cursor"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ============================================================
   v52 — Vidéo verticale (9:16) dans galerie pack
   ============================================================ */
.page-pack .pack-gal-item.pack-gal-video-vertical {
  aspect-ratio: 9 / 16;
  max-height: 640px;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
}
.page-pack .pack-gal-item.pack-gal-video-vertical video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.page-pack .pack-gallery-cinema {
  display: grid !important;
  grid-template-columns: 9fr 16fr;
  gap: 14px;
  align-items: stretch;
}
@media (max-width: 760px) {
  .page-pack .pack-gallery-cinema { grid-template-columns: 1fr; }
  .page-pack .pack-gal-item.pack-gal-video-vertical { max-height: 80vh; aspect-ratio: 9/16; }
}

/* ============================================================
   v54 — Section Uxegney : placeholder photos à venir + vidéo large
   ============================================================ */
body.page-portfolio .mosaic-placeholder {
  width: 100%;
  break-inside: avoid;
  margin: 0 0 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(212,165,116,0.06) 0%, rgba(212,165,116,0.02) 100%);
  border: 1px dashed rgba(212,165,116,0.32);
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.page-portfolio .mosaic-placeholder-inner {
  text-align: center;
  color: rgba(245, 227, 199, 0.55);
}
body.page-portfolio .mosaic-placeholder-inner svg {
  margin-bottom: 10px;
  opacity: 0.45;
  color: var(--gold, #d4a574);
}
body.page-portfolio .mosaic-placeholder-inner p {
  margin: 0;
  font-size: 11pt;
  letter-spacing: 0.06em;
  color: rgba(245, 227, 199, 0.75);
  line-height: 1.35;
}
body.page-portfolio .mosaic-placeholder-inner p em {
  font-style: italic;
  color: var(--gold, #d4a574);
  font-size: 14pt;
  font-family: 'Cormorant Garamond', Georgia, serif;
}
body.page-portfolio .mosaic-video.mosaic-video-large {
  /* La vidéo Uxegney prend une place premium */
  aspect-ratio: 16/9;
}

/* ========================================================================
   v59 — PATCH GLOBAL UI (Desktop + Mobile)
   ======================================================================== */

/* ============ 1) HERO PC : font-size réduit pour "Élevez votre vision" ============ */
@media (min-width: 821px) {
  html body .hero .hero-title-big,
  html body .hero.hero-v13 .hero-title-big {
    font-size: clamp(3.2rem, 5.8vw, 5.8rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.015em !important;
  }
  html body .hero .hero-overline,
  html body .hero.hero-v13 .hero-overline {
    font-size: 0.78rem !important;
  }
  html body .hero .hero-sub {
    font-size: clamp(1.05rem, 1.5vw, 1.25rem) !important;
    max-width: 580px !important;
  }
}

/* ============ 2) AUDIENCE PANEL : image EN HAUT, texte EN BAS (PC + mobile) ============ */
html body .audience .audience-split,
html body .audience #audienceSplit {
  display: grid !important;
  grid-template-columns: minmax(280px, 360px) 1fr !important;
  gap: 2rem !important;
  align-items: stretch !important;
}
html body .audience .audience-tabs {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.6rem !important;
}
html body .audience .audience-panels {
  position: relative !important;
}
html body .audience .audience-panel {
  display: none !important;
}
html body .audience .audience-panel.is-active {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: 1fr !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, #14302a, #0c221c) !important;
  border: 1px solid rgba(212, 165, 116, 0.18) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,0.35) !important;
}
html body .audience .aud-panel-media {
  width: 100% !important;
  max-height: 360px !important;
  min-height: 280px !important;
  overflow: hidden !important;
  position: relative !important;
  flex: 0 0 auto !important;
}
html body .audience .aud-panel-media img {
  width: 100% !important;
  height: 100% !important;
  max-height: 360px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}
html body .audience .aud-panel-body {
  padding: 1.6rem 2rem 2rem !important;
  flex: 1 1 auto !important;
}
@media (max-width: 820px) {
  html body .audience .audience-split,
  html body .audience #audienceSplit {
    grid-template-columns: 1fr !important;
    gap: 1.2rem !important;
  }
  html body .audience .aud-panel-media {
    max-height: 220px !important;
    min-height: 180px !important;
  }
  html body .audience .aud-panel-media img { max-height: 220px !important; }
  html body .audience .aud-panel-body { padding: 1.2rem 1.4rem 1.6rem !important; }
}

/* ============ 3) SERVICES (5 PACKS) : noms + descriptions visibles ============ */
@media (min-width: 821px) {
  html body .services-list .srv-desc {
    max-height: 80px !important;
    opacity: 0.82 !important;
    margin-top: 0.5rem !important;
  }
  html body .services-list .srv-title {
    color: var(--cream, #fdebd6) !important;
    opacity: 1 !important;
    font-size: clamp(1.4rem, 2.2vw, 1.85rem) !important;
  }
  html body .services-list .srv-num {
    opacity: 0.9 !important;
  }
  html body .services-list .srv {
    padding: 1.6rem 0 !important;
  }
}

/* ============ 4) DEVIS : textarea avec texte BLANC ============ */
html body .contact-form textarea,
html body .pack-devis-form textarea,
html body form#contactForm textarea,
html body .field textarea {
  color: #fdebd6 !important;
  -webkit-text-fill-color: #fdebd6 !important;
  caret-color: #d4a574 !important;
  background: rgba(20, 48, 40, 0.45) !important;
}
html body .contact-form textarea::placeholder,
html body .pack-devis-form textarea::placeholder,
html body form#contactForm textarea::placeholder,
html body .field textarea::placeholder {
  color: rgba(253, 235, 214, 0.42) !important;
  -webkit-text-fill-color: rgba(253, 235, 214, 0.42) !important;
}
/* Fix aussi les inputs text/email/tel à blanc */
html body .contact-form input[type="text"],
html body .contact-form input[type="email"],
html body .contact-form input[type="tel"],
html body .pack-devis-form input[type="text"],
html body .pack-devis-form input[type="email"],
html body .pack-devis-form input[type="tel"],
html body form#contactForm input[type="text"],
html body form#contactForm input[type="email"],
html body form#contactForm input[type="tel"] {
  color: #fdebd6 !important;
  -webkit-text-fill-color: #fdebd6 !important;
  caret-color: #d4a574 !important;
}

/* ============ 5) HOME : 3 VIDÉOS EN LIGNE (Dinozé / Dogneville / Uxegney) ============ */
.home-videos-row {
  display: grid;
  grid-template-columns: 1fr 1fr 0.6fr;
  gap: 1rem;
  margin: 2rem auto 0;
  max-width: 1280px;
  padding: 0 1.5rem;
}
.home-video-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #0c221c;
  cursor: pointer;
  box-shadow: 0 18px 48px rgba(0,0,0,0.45);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.home-video-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 64px rgba(0,0,0,0.55);
}
.home-video-card.home-video-card-vertical {
  aspect-ratio: 9 / 16;
}
.home-video-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.home-video-card.home-video-card-vertical video {
  object-fit: cover;
}
.hv-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(8,22,15,0.85) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1rem 1.2rem;
  color: #fdebd6;
  pointer-events: none;
}
.hv-overlay .hv-cat {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #d4a574;
  margin-bottom: 0.3rem;
}
.hv-overlay .hv-title {
  font-family: Georgia, 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-weight: 500;
}
.hv-overlay .hv-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 54px; height: 54px;
  border-radius: 50%;
  background: rgba(212,165,116,0.95);
  color: #0c221c;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
  opacity: 0.92;
}
.hv-overlay .hv-play svg { width: 22px; height: 22px; margin-left: 2px; }
@media (max-width: 820px) {
  .home-videos-row {
    grid-template-columns: 1fr;
    gap: 0.8rem;
    padding: 0 1rem;
  }
  .home-video-card { aspect-ratio: 16 / 10; }
  .home-video-card.home-video-card-vertical { aspect-ratio: 9 / 16; max-height: 70vh; }
}

/* ============ 6) MOBILE : STATS EN LIGNE (4 colonnes flex) ============ */
@media (max-width: 820px) {
  html body section.stats .stats-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 0.7rem !important;
    padding: 0 1rem !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  html body section.stats .stats-grid::-webkit-scrollbar { display: none !important; }
  html body section.stats .stats-grid > * {
    flex: 0 0 auto !important;
    min-width: 130px !important;
    max-width: 160px !important;
    padding: 0.8rem 0.7rem !important;
    text-align: center !important;
  }
  html body section.stats .stats-grid .stat-num,
  html body section.stats .stats-grid > * > *:first-child {
    font-size: 1.6rem !important;
  }
  html body section.stats .stats-grid .stat-label {
    font-size: 0.7rem !important;
    letter-spacing: 0.1em !important;
  }
}

/* ============ 7) MOBILE PORTFOLIO : burger menu visible + mosaïque dense ============ */
@media (max-width: 820px) {
  html body.page-portfolio .site-header .burger,
  html body.page-portfolio .burger,
  html body.page-portfolio header .burger {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 4px !important;
    width: 36px !important;
    height: 36px !important;
    z-index: 102 !important;
  }
  /* Burger menu = 3 lignes blanches */
  html body.page-portfolio .burger span {
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    background: #fdebd6 !important;
    border-radius: 2px !important;
    transition: transform 0.3s ease, opacity 0.3s ease !important;
  }

  /* Mosaïque portfolio : 2 colonnes au lieu de 1 (lecture plus fluide) */
  html body.page-portfolio .mosaic-grid {
    column-count: 2 !important;
    column-gap: 6px !important;
  }
  html body.page-portfolio .mosaic-tile,
  html body.page-portfolio .mosaic-tile img {
    margin-bottom: 6px !important;
    border-radius: 8px !important;
  }
}
@media (max-width: 480px) {
  html body.page-portfolio .mosaic-grid {
    column-count: 2 !important;
    column-gap: 5px !important;
  }
}