/* ============================================================
   HOMÉOSPIRITS — Refonte 2026 · Socle global
   Patterns répétés entre les pages : variables de marque,
   CTA, eyebrow/rule, lien souligné, grain papier, et le
   système d'apparition (intro au chargement + reveal au scroll).
   Tout le reste (layout, couleurs, typo) passe par Tailwind.
   ============================================================ */

:root {
  /* Neutres chauds */
  --hs-cream:      #F6F2EA;
  --hs-cream-warm: #F7F3EC;
  --hs-sand:       #EDE8DE;
  --hs-paper:      #FDFAF5;
  --hs-ink:        #231D17;
  --hs-ink-soft:   #4A3E32;
  --hs-dark:       #1C1610;

  /* Or de marque */
  --hs-gold:       #B38B53;
  --hs-gold-deep:  #926E3C;
  --hs-gold-light: #CBA56B;
  --hs-gold-pale:  #E3CEA3;

  /* Accent NATURE — couple des 2 piliers holohoméo (choix Dylan 2026-06-19)
     clair = pilier inactif, foncé = pilier actif. Anciens : forêt #26342A/#18221B, canard #045548 — au cas où */
  --hs-forest:      #2C4438;
  --hs-forest-deep: #02342C;
  --hs-pine:        #2C4438;
  --hs-pine-light:  #3A5A4A;
  --hs-sage:        #7C9277;
  --hs-sage-light:  #A9BCA0;
  --hs-lichen:      #B7C189;

  --hs-error:   #B5462F;
  --hs-success: #4C7A4A;

  /* Typo */
  --f-display: 'Playfair Display', serif;
  --f-serif:   'Cormorant Garamond', serif;
  --f-sans:    'Poppins', system-ui, sans-serif;
  --f-mark:    'Adorn Engraved', 'Playfair Display', serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

::selection { background: var(--hs-gold); color: var(--hs-paper); }

/* ---- Navigation fluide ---- */
html { scroll-behavior: smooth; scroll-padding-top: 130px; }

/* Transitions entre pages (View Transitions cross-document — Chrome/Edge/Safari récents).
   Vraies navigations : les scripts de page se réinitialisent normalement, zéro conflit JS.
   La navbar [data-nav] a son propre calque : elle reste visuellement en place. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: 0.26s; animation-timing-function: ease-out; }
::view-transition-new(root) { animation-duration: 0.38s; animation-timing-function: ease-in; }
[data-nav] { view-transition-name: masthead; }

/* Fallback navigateurs sans View Transitions : fondu d'entrée léger */
@supports not (view-transition-name: none) {
  body { animation: pageFade 0.45s var(--ease) both; }
  @keyframes pageFade { from { opacity: 0; } to { opacity: 1; } }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  @supports not (view-transition-name: none) { body { animation: none; } }
}

/* ---- Typographie utilitaire ---- */
.eyebrow {
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.28em;
}

.rule {
  display: inline-block;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
  vertical-align: middle;
}

/* ---- Boutons / CTA ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 1.05rem 1.9rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.45s var(--ease);
  white-space: nowrap;
}
.btn .arr {
  display: inline-block;
  width: 1.6rem; height: 1px;
  background: currentColor;
  position: relative;
  transition: width 0.45s var(--ease);
}
.btn .arr::after {
  content: '';
  position: absolute; right: 0; top: 50%;
  width: 6px; height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.btn:hover .arr { width: 2.4rem; }

.btn--gold { background: var(--hs-gold); color: var(--hs-paper); }
.btn--gold:hover { background: var(--hs-gold-deep); }
.btn--forest { background: var(--hs-forest); color: var(--hs-cream); }
.btn--forest:hover { background: var(--hs-forest-deep); }
.btn--ghost { background: transparent; border-color: currentColor; }
.btn--ghost:hover { background: var(--hs-ink); color: var(--hs-cream); border-color: var(--hs-ink); }

/* ---- Lien de navigation masthead (soulignement or animé) ---- */
.nav-link {
  position: relative;
  white-space: nowrap;
  font-family: var(--f-sans);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hs-ink-soft);
  transition: color 0.3s;
}
.nav-link::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: var(--hs-gold-deep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.nav-link:hover { color: var(--hs-gold-deep); }
.nav-link:hover::after { transform: scaleX(1); }

/* ---- Lien fil souligné ---- */
.link-underline {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-family: var(--f-sans); font-weight: 400;
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
}
.link-underline .ln { width: 2rem; height: 1px; background: currentColor; transition: width 0.5s var(--ease); }
.link-underline:hover .ln { width: 3.2rem; }

/* ---- Lien de footer ---- */
.footer-link {
  display: block;
  font-family: var(--f-serif);
  font-size: 1.05rem;
  color: rgba(246, 242, 234, 0.75);
  padding: 0.32rem 0;
  transition: color 0.3s, padding-left 0.3s;
}
.footer-link:hover { color: var(--hs-cream); padding-left: 0.3rem; }

/* ---- Lien-flèche compact (CTA des cartes / portes) ---- */
.go-line {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--f-sans); font-size: 0.62rem;
  letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap;
}
.go-line .ln { display: inline-block; width: 1.7rem; height: 1px; background: currentColor; position: relative; transition: width 0.5s var(--ease); }
.go-line .ln::after {
  content: ''; position: absolute; right: 0; top: 50%;
  width: 5px; height: 5px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

/* ---- Champs de formulaire publics ---- */
.form-label {
  display: block;
  font-family: var(--f-sans);
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hs-ink-soft);
  margin-bottom: 0.5rem;
}
.form-label .opt { color: var(--hs-sage); letter-spacing: 0.1em; }
.form-input {
  width: 100%;
  background: var(--hs-paper);
  border: 1px solid rgba(35, 29, 23, 0.16);
  border-radius: 0;
  padding: 0.85rem 1rem;
  font-family: var(--f-serif);
  font-size: 1.05rem;
  color: var(--hs-ink);
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.form-input:focus { border-color: var(--hs-gold); box-shadow: 0 0 0 3px rgba(179, 139, 83, 0.12); }
.form-input::placeholder { color: rgba(35, 29, 23, 0.38); }
textarea.form-input { resize: vertical; min-height: 130px; }
.form-error {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--f-sans);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--hs-error);
}

/* ---- Primitives de section (pages intérieures) ---- */
.sec { padding: 7rem 0; position: relative; }
.sec--tight { padding: 5rem 0; }
.wrapp { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 2.5rem; }
.wrapn { width: 100%; max-width: 920px; margin: 0 auto; padding: 0 2.5rem; }
@media (max-width: 700px) { .wrapp, .wrapn { padding: 0 1.4rem; } .sec { padding: 4.5rem 0; } }

.s-eyebrow { display: inline-flex; align-items: center; gap: 0.9rem; color: var(--hs-gold-deep); margin-bottom: 1.3rem; }
.s-eyebrow .rule { width: 38px; }
.s-eyebrow.c { justify-content: center; }
.s-h2 { font-family: var(--f-display); font-size: clamp(2.1rem, 4.2vw, 3.4rem); line-height: 1.12; color: var(--hs-ink); }
.s-h2 em { font-style: italic; color: var(--hs-gold-deep); }
.s-lead { font-family: var(--f-serif); font-size: 1.24rem; line-height: 1.66; color: var(--hs-ink-soft); text-wrap: pretty; }
.s-body { font-family: var(--f-serif); font-size: 1.12rem; line-height: 1.72; color: var(--hs-ink-soft); text-wrap: pretty; }
.s-body strong { color: var(--hs-ink); font-weight: 600; }
.s-body + .s-body { margin-top: 1rem; }
.center { text-align: center; }

/* variantes sur fonds sombres (vert forêt / encre) */
.on-dark { color: var(--hs-cream); }
.on-dark .s-h2 { color: var(--hs-cream); }
.on-dark .s-h2 em { color: var(--hs-gold-light); }
.on-dark .s-eyebrow { color: var(--hs-lichen); }
.on-dark .s-eyebrow .rule { background: var(--hs-lichen); }
.on-dark .s-lead, .on-dark .s-body { color: rgba(246, 242, 234, 0.82); }
.on-dark .s-body strong { color: var(--hs-cream); }

/* ---- Hero de page intérieure ---- */
.phero { position: relative; overflow: hidden; isolation: isolate; }
.phero__bg { position: absolute; inset: 0; z-index: -2; }
.phero__bg img { width: 100%; height: 100%; object-fit: cover; }
.phero__veil { position: absolute; inset: 0; z-index: -1; }
.phero__in { max-width: 1240px; margin: 0 auto; padding: 8.5rem 2.5rem 5rem; }
.phero__h1 { font-family: var(--f-display); font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1.04; letter-spacing: -0.01em; }
.phero__h1 em { font-style: italic; }
.phero__p { font-family: var(--f-serif); font-size: 1.3rem; line-height: 1.66; margin-top: 1.6rem; max-width: 38rem; text-wrap: pretty; }
.phero__cta { display: flex; flex-wrap: wrap; gap: 1.2rem 1.8rem; align-items: center; margin-top: 2.4rem; }
@media (max-width: 700px) { .phero__in { padding: 7rem 1.4rem 4rem; } }

/* ---- Image encadrée (enluminure dorée) ---- */
.framed { position: relative; isolation: isolate; }
.framed__img { position: relative; z-index: 1; overflow: hidden; box-shadow: 0 24px 50px rgba(35, 29, 23, 0.16); }
.framed__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.framed__img::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(203, 165, 107, 0.5); pointer-events: none; }
.framed__line { position: absolute; inset: -13px; z-index: 2; border: 1px solid rgba(179, 139, 83, 0.34); pointer-events: none; }
.framed__cap { position: absolute; z-index: 4; left: 0; bottom: 1.4rem; background: var(--hs-paper); color: var(--hs-gold-deep); font-family: var(--f-sans); font-size: 0.56rem; letter-spacing: 0.22em; text-transform: uppercase; padding: 0.5rem 0.9rem; }
.orn { position: absolute; z-index: 3; width: 46px; height: 46px; background: no-repeat center/contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none' stroke='%23B38B53'%3E%3Cpath d='M5 44 V14 Q5 5 14 5 H44' stroke-width='1.5'/%3E%3Cpath d='M15 32 V21 Q15 15 21 15 H32' stroke-width='1' opacity='0.75'/%3E%3Cpath d='M44 5 q10 0 11 9' stroke-width='1.2'/%3E%3Cpath d='M5 44 q0 10 9 11' stroke-width='1.2'/%3E%3Cpath d='M21 15 q-4 -8 -13 -9 q7 5 5 12' stroke-width='1' opacity='0.85'/%3E%3Ccircle cx='9' cy='9' r='1.9' fill='%23B38B53' stroke='none'/%3E%3C/svg%3E"); }
.orn--tl { top: -19px; left: -19px; }
.orn--tr { top: -19px; right: -19px; transform: scaleX(-1); }
.orn--bl { bottom: -19px; left: -19px; transform: scaleY(-1); }
.orn--br { bottom: -19px; right: -19px; transform: scale(-1, -1); }

/* ---- Porte d'entrée légale (Loi Évin + confidentialité) — modale pleine page ---- */
html.legal-gate-open { overflow: hidden; }
.legal-gate { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; overflow-y: auto; overflow-x: hidden; background: var(--hs-forest-deep); isolation: isolate; animation: gateIn 0.7s var(--ease) both; }
.legal-gate::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(58% 70% at 50% 18%, rgba(203, 165, 107, 0.16), transparent 62%), radial-gradient(70% 60% at 12% 96%, rgba(44, 68, 56, 0.65), transparent 58%), radial-gradient(50% 50% at 90% 88%, rgba(146, 110, 60, 0.12), transparent 60%); }
.legal-gate .grain { position: absolute; inset: 0; z-index: 0; opacity: 0.45; mix-blend-mode: overlay; }
.legal-gate__ghost { position: absolute; left: 50%; bottom: -3rem; transform: translateX(-50%); z-index: 0; font-family: var(--f-display); font-weight: 600; font-style: italic; font-size: clamp(6rem, 18vw, 15rem); line-height: 0.7; color: transparent; -webkit-text-stroke: 1.3px rgba(246, 242, 234, 0.06); white-space: nowrap; pointer-events: none; }
.legal-gate__in { position: relative; z-index: 1; width: 100%; max-width: 46rem; margin: auto; padding: clamp(2.5rem, 7vh, 5rem) clamp(1.4rem, 5vw, 3rem); text-align: center; color: var(--hs-cream); animation: gateRise 0.9s var(--ease) 0.15s both; }
.legal-gate__marks { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.legal-gate__marks .mark { height: clamp(64px, 9vh, 92px); width: auto; }
.legal-gate__marks .wm { height: clamp(16px, 2.4vh, 22px); width: auto; opacity: 0.95; }
.legal-gate__chain { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.7rem 1.1rem; margin-top: 1.8rem; }
.legal-gate__chain span { font-family: var(--f-sans); font-size: clamp(0.72rem, 1.6vw, 0.92rem); letter-spacing: 0.26em; text-transform: uppercase; color: var(--hs-gold-light); }
.legal-gate__chain i { position: relative; width: 2.2rem; height: 1px; background: rgba(203, 165, 107, 0.5); }
.legal-gate__chain i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--hs-gold-light); transform: translate(-50%, -50%); box-shadow: 0 0 8px rgba(203, 165, 107, 0.6); }
.legal-gate__t { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.25rem, 2.4vw, 1.7rem); line-height: 1.2; color: var(--hs-cream); margin-top: 1.6rem; }
.legal-gate__t em { font-style: italic; color: var(--hs-gold-light); }
.legal-gate__evin { font-family: var(--f-serif); font-size: clamp(1.05rem, 1.4vw, 1.18rem); line-height: 1.6; color: rgba(246, 242, 234, 0.85); max-width: 34rem; margin: 1.2rem auto 0; text-wrap: pretty; }
.legal-gate__evin strong { color: var(--hs-cream); font-weight: 600; }
.legal-gate__sep { display: flex; align-items: center; justify-content: center; gap: 0.9rem; margin: 1.6rem auto; }
.legal-gate__sep i { width: 2.6rem; height: 1px; background: rgba(203, 165, 107, 0.4); }
.legal-gate__sep svg { width: 15px; height: 15px; color: var(--hs-gold-light); opacity: 0.8; }
.legal-gate__privacy { font-family: var(--f-serif); font-size: 0.98rem; line-height: 1.6; color: rgba(246, 242, 234, 0.62); max-width: 32rem; margin: 0 auto; }
.legal-gate__privacy a { color: var(--hs-gold-light); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(203, 165, 107, 0.45); transition: text-decoration-color 0.3s; }
.legal-gate__privacy a:hover { text-decoration-color: var(--hs-gold-light); }
.legal-gate__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.1rem 2rem; margin-top: 2.2rem; }
.legal-gate__leave { color: rgba(246, 242, 234, 0.65); transition: color 0.3s; }
.legal-gate__leave:hover { color: var(--hs-cream); }
.legal-gate__fine { font-family: var(--f-sans); font-size: 0.54rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(246, 242, 234, 0.4); margin-top: 2rem; }
.legal-gate.is-leaving { animation: gateOut 0.6s var(--ease) both; }
@keyframes gateIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes gateRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes gateOut { from { opacity: 1; } to { opacity: 0; } }
@media (max-width: 480px) {
  .legal-gate__in { padding: 2.2rem 1.2rem; }
  .legal-gate__chain i { width: 1.3rem; }
  .legal-gate__cta { gap: 1rem; }
  .legal-gate__cta .btn { width: 100%; justify-content: center; }
  .legal-gate__ghost { font-size: clamp(4.5rem, 26vw, 7rem); bottom: -1.6rem; }
}
@media (max-height: 700px) {
  .legal-gate__in { padding-top: 1.8rem; padding-bottom: 1.8rem; }
  .legal-gate__marks .mark { height: 52px; }
  .legal-gate__fine { margin-top: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) { .legal-gate, .legal-gate__in, .legal-gate.is-leaving { animation: none; } }

/* ---- Bandeau newsletter "forêt nocturne" (composant partagé) ---- */
.nl-form { display: flex; gap: 0.6rem; width: 100%; }
.nl-form input { flex: 1 1 14rem; min-width: 0; font-family: var(--f-serif); font-size: 1.12rem; letter-spacing: 0.01em; padding: 0 1.4rem; height: 60px; border: 1px solid; background: transparent; outline: none; transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.nl-form input::placeholder { font-family: var(--f-sans); font-size: 0.78rem; letter-spacing: 0.06em; }
.nl-form button { flex: none; height: 60px; padding: 0 1.4rem; font-family: var(--f-sans); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; border: 1px solid transparent; display: inline-flex; align-items: center; gap: 0.7rem; transition: background 0.4s var(--ease), color 0.4s var(--ease); }
.nl-form button .arrow { width: 1.4rem; height: 1px; background: currentColor; position: relative; transition: width 0.4s var(--ease); }
.nl-form button .arrow::after { content: ''; position: absolute; right: -1px; top: 50%; width: 6px; height: 6px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: translateY(-50%) rotate(45deg); }
.nl-form button:hover .arrow { width: 2rem; }
.nl-fine { font-family: var(--f-sans); font-size: 0.6rem; letter-spacing: 0.05em; line-height: 1.6; margin-top: 1rem; }
.nl-ok { font-family: var(--f-display); font-style: italic; font-size: 1.05rem; }

.nl1 { position: relative; overflow: hidden; isolation: isolate; background: var(--hs-forest-deep); color: var(--hs-cream); padding: clamp(2.8rem, 6vw, 4.2rem) clamp(1.6rem, 5vw, 4.5rem); }
.nl1::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(60% 120% at 88% 50%, rgba(203, 165, 107, 0.16), transparent 60%), radial-gradient(70% 120% at 4% 0%, rgba(44, 68, 56, 0.6), transparent 58%); }
.nl1 .grain { position: absolute; inset: 0; z-index: 0; opacity: 0.4; mix-blend-mode: overlay; }
.nl1__ghost { position: absolute; right: clamp(-1rem, 1vw, 2rem); bottom: -2.6rem; z-index: 0; font-family: var(--f-display); font-weight: 600; font-style: italic; font-size: clamp(6rem, 15vw, 12rem); line-height: 0.7; color: transparent; -webkit-text-stroke: 1.3px rgba(246, 242, 234, 0.07); pointer-events: none; }
.nl1__in { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 0.92fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.nl1__eyebrow { display: inline-flex; align-items: center; gap: 0.9rem; margin-bottom: 1.1rem; }
.nl1__eyebrow .rule { width: 36px; height: 1px; background: var(--hs-gold-light); }
.nl1__eyebrow span:last-child { font-family: var(--f-sans); font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--hs-gold-light); }
.nl1 h2 { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.9rem, 3.2vw, 2.9rem); line-height: 1.08; color: var(--hs-cream); }
.nl1 h2 em { font-style: italic; color: var(--hs-gold-light); }
.nl1 .lead { font-family: var(--f-serif); font-size: 1.16rem; line-height: 1.5; color: rgba(246, 242, 234, 0.82); margin-top: 0.9rem; max-width: 26rem; }
.nl1 .nl-form input { border-color: rgba(233, 206, 163, 0.4); color: var(--hs-cream); }
.nl1 .nl-form input::placeholder { color: rgba(246, 242, 234, 0.5); }
.nl1 .nl-form input:focus { border-color: var(--hs-gold-light); box-shadow: 0 0 0 3px rgba(203, 165, 107, 0.16); }
.nl1 .nl-form button { background: var(--hs-gold); color: var(--hs-forest-deep); }
.nl1 .nl-form button:hover { background: var(--hs-gold-light); }
.nl1 .nl-fine { color: rgba(246, 242, 234, 0.55); }
.nl1 .nl-ok { color: var(--hs-gold-light); }
@media (max-width: 900px) { .nl1__in { grid-template-columns: 1fr; gap: 1.8rem; } .nl1 .lead { max-width: none; } }
@media (max-width: 560px) {
  .nl1 { padding: 2.2rem 1.2rem; }
  .nl1__ghost { font-size: clamp(4rem, 22vw, 6rem); bottom: -1.8rem; }
  .nl-form { flex-direction: column; gap: 0.8rem; }
  /* flex-basis 14rem devient la hauteur en colonne → neutraliser le flex */
  .nl-form input { width: 100%; height: 56px; flex: 0 0 auto; }
  .nl-form button { width: 100%; height: 56px; justify-content: center; }
}

/* ---- Bandeau marquee éditorial ---- */
.smarq { border-top: 1px solid rgba(203, 165, 107, 0.25); border-bottom: 1px solid rgba(203, 165, 107, 0.25); padding: 1.1rem 0; overflow: hidden; }
.smarq__t { display: inline-flex; align-items: center; gap: 2rem; white-space: nowrap; animation: smarq 34s linear infinite; }
.smarq__t span { font-family: var(--f-display); font-style: italic; font-size: 1.3rem; color: var(--hs-ink); opacity: 0.55; }
.smarq__t .dot { color: var(--hs-gold-deep); opacity: 1; }
@keyframes smarq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .smarq__t { animation: none; } }

/* ---- Filigrane grain (texture papier subtile) ---- */
.grain::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  opacity: 0.04;
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* ============================================================
   MOTION — apparitions propres et soignées
   L'état caché est porté par le CSS dès le PREMIER PAINT,
   conditionné par html.hs-js (posée par le micro-script du
   <head> de base.html) → aucun flash visible/caché/visible.
   Le moteur js/main.js RÉVÈLE en ajoutant .is-in (scroll) ou
   .intro-on (chargement). Sans JS : html.hs-js absente, tout
   reste visible. Failsafe : html.hs-failsafe force tout visible
   si le moteur n'a pas démarré (cf. head base.html).
   ============================================================ */

/* ---- Reveal au scroll : [data-reveal] ---- */
[data-reveal] {
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
  will-change: opacity, transform;
}
html.hs-js [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(34px); }
html.hs-js [data-reveal="fade"]:not(.is-in)   { transform: none; }
html.hs-js [data-reveal="left"]:not(.is-in)   { transform: translateX(-44px); }
html.hs-js [data-reveal="right"]:not(.is-in)  { transform: translateX(44px); }
html.hs-js [data-reveal="scale"]:not(.is-in)  { transform: scale(0.93); }
[data-reveal="blur"] { transition: opacity 1.2s var(--ease), transform 1.2s var(--ease), filter 1.2s var(--ease); }
html.hs-js [data-reveal="blur"]:not(.is-in) { opacity: 0; transform: translateY(18px); filter: blur(11px); }
[data-reveal="clip"] { transition: opacity 1.1s var(--ease), clip-path 1.2s var(--ease), transform 1.2s var(--ease); }
html.hs-js [data-reveal="clip"]:not(.is-in) { clip-path: inset(0 0 100% 0); transform: translateY(8px); }
[data-reveal-delay="1"] { transition-delay: 0.12s; }
[data-reveal-delay="2"] { transition-delay: 0.24s; }
[data-reveal-delay="3"] { transition-delay: 0.36s; }
[data-reveal-delay="4"] { transition-delay: 0.48s; }
[data-reveal-delay="5"] { transition-delay: 0.60s; }
[data-reveal-delay="6"] { transition-delay: 0.72s; }
[data-reveal-delay="7"] { transition-delay: 0.84s; }

/* ---- Intro au chargement (above-the-fold) : [data-intro] ---- */
[data-intro] {
  transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease);
  will-change: opacity, transform;
}
html.hs-js [data-intro]:not(.intro-on)         { opacity: 0; transform: translateY(28px); }
html.hs-js [data-intro="left"]:not(.intro-on)  { transform: translateX(-38px); }
html.hs-js [data-intro="right"]:not(.intro-on) { transform: translateX(38px); }
html.hs-js [data-intro="scale"]:not(.intro-on) { transform: scale(0.92); }
[data-intro="blur"] { transition: opacity 1.2s var(--ease), transform 1.2s var(--ease), filter 1.2s var(--ease); }
html.hs-js [data-intro="blur"]:not(.intro-on)  { transform: translateY(14px); filter: blur(10px); }
[data-intro-delay="1"] { transition-delay: 0.10s; }
[data-intro-delay="2"] { transition-delay: 0.24s; }
[data-intro-delay="3"] { transition-delay: 0.40s; }
[data-intro-delay="4"] { transition-delay: 0.56s; }
[data-intro-delay="5"] { transition-delay: 0.72s; }
[data-intro-delay="6"] { transition-delay: 0.88s; }
[data-intro-delay="7"] { transition-delay: 1.04s; }

/* Failsafe : si le moteur ne démarre pas, tout redevient visible */
html.hs-failsafe [data-reveal], html.hs-failsafe [data-intro] {
  opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html.hs-js [data-reveal]:not(.is-in), html.hs-js [data-intro]:not(.intro-on) {
    opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important;
  }
  html { scroll-behavior: auto; }
}