/* Hero — manifeste italique en arrière-plan
   Animation au load : fade + translateY ; parallaxe orchestrée par GSAP. */
.hero-manifesto {
  opacity: 0;
  transform: translateY(20px);
  animation: heroManifestoIn 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s forwards;
}
@keyframes heroManifestoIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 768px) {
  .hero-manifesto {
    left: auto !important;
    right: -1rem !important;
    font-size: clamp(5rem, 22vw, 9rem) !important;
    color: rgba(45, 42, 74, 0.07) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-manifesto {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--ar-mist); color: var(--ar-ink); font-family: var(--font-sans); overflow-x: hidden; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

.container { width: min(90vw, var(--container)); margin-inline: auto; }
.container-narrow { width: min(90vw, var(--container-narrow)); margin-inline: auto; }
.container-text { width: min(90vw, var(--container-text)); margin-inline: auto; }

/* ===== Buttons ===== */
.btn { 
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 28px; border-radius: var(--radius-md);
  font-weight: var(--fw-medium); font-size: 14.5px;
  letter-spacing: 0.01em;
  border: 1px solid var(--ar-indigo);
  background: var(--ar-indigo); color: var(--ar-mist);
  cursor: pointer; text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform 90ms var(--ease-out);
}
.btn:hover { background: #2a2740; color: var(--ar-mist); }
.btn:active { transform: scale(0.985); }
.btn--secondary { background: transparent; color: var(--ar-indigo); }
.btn--secondary:hover { background: var(--ar-indigo); color: var(--ar-mist); }
.btn--ghost { background: transparent; color: var(--ar-mist); border-color: var(--ar-line-dark); }
.btn--ghost:hover { background: var(--ar-mist); color: var(--ar-indigo); border-color: var(--ar-mist); }
.btn.btn-light { background: var(--ar-mist); color: var(--ar-indigo); border-color: var(--ar-mist); }
.btn.btn-light:hover { background: #fff; color: var(--ar-indigo); }
.btn--lg { padding: 20px 36px; font-size: 15px; }

.btn .arrow { display: inline-block; transition: transform var(--dur-base) var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }

/* ===== Underline link ===== */
.ul-link { 
  position: relative; display: inline-block; padding-bottom: 4px;
  color: var(--ar-indigo); font-weight: var(--fw-medium);
}
.ul-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor;
  transform-origin: left center; transform: scaleX(1);
  transition: transform var(--dur-base) var(--ease-out);
}
.ul-link:hover { color: var(--ar-rouge-vif); }
.ul-link:hover::after { transform-origin: right center; transform: scaleX(0); }

/* ===== Eyebrow with rule ===== */
.eyebrow-rule { 
  display: inline-flex; align-items: center; gap: 14px;
  font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--ar-indigo);
}
.eyebrow-rule::before {
  content: ''; width: 32px; height: 1px; background: currentColor;
}

/* ===== Section base ===== */
section { padding-block: clamp(2rem, 5vw, 4.5rem); }
.section-deep { background: var(--ar-indigo); color: var(--ar-mist); }
.section-deep h1, .section-deep h2, .section-deep h3, .section-deep .eyebrow,
.section-deep .eyebrow-rule { color: var(--ar-mist); }
.section-paper { background: var(--ar-paper); }

/* ===== Decorative lavande square ===== */
.deco-square { 
  position: absolute; background: var(--ar-lavande);
  pointer-events: none; z-index: 0;
}

/* ===== Reveal animations on scroll ===== */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 120ms; }
.reveal-delay-2 { transition-delay: 240ms; }
.reveal-delay-3 { transition-delay: 360ms; }
.reveal-delay-4 { transition-delay: 480ms; }

/* Image curtain reveal: a lavande mask slides up to reveal the image */
.img-curtain { position: relative; overflow: hidden; }
.img-curtain::after {
  content: ''; position: absolute; inset: 0;
  background: var(--ar-lavande);
  transform-origin: bottom center;
  transition: transform 1.4s var(--ease-out);
}
.img-curtain.in::after { transform: scaleY(0); }
.img-curtain img { transform: scale(1.15); transition: transform 4s var(--ease-out); }
.img-curtain.in img { transform: scale(1); }

/* ===== Card ===== */
.card { 
  background: var(--ar-paper); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-1);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.card__img { aspect-ratio: 4 / 3; overflow: hidden; }
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 3s var(--ease-out); }
.card:hover .card__img img { transform: scale(1.05); }
.card__body { padding: 28px 28px 32px; display: flex; flex-direction: column; gap: 12px; flex: 1; }

/* ===== Form ===== */
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 13px; font-weight: 500; color: var(--ar-indigo); letter-spacing: 0.01em; }
.field input, .field textarea, .field select {
  font-family: var(--font-sans); font-size: 15px;
  padding: 14px 16px; border-radius: var(--radius-xs);
  border: 1px solid var(--ar-indigo); background: var(--ar-mist);
  color: var(--ar-ink); outline: none;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.field input:focus, .field textarea:focus { background: var(--ar-paper); border-color: var(--ar-rouge-vif); }

/* ===== Module dot ===== */
.mod-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: white;
  font-feature-settings: "tnum";
}

/* ── Accessibility: focus-visible ── */
:focus-visible {
  outline: 2px solid var(--ar-violet-500);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* ── Accessibility: reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .reveal, .img-curtain::after, .img-curtain img,
  [anim-title], [anim-text], [anim-btn], [anim-content],
  [anim-grid-4], [anim-img] img, [anim-slide], [anim-img-slide],
  [anim-slide-top], [anim-logos], [anim-grid-2] {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}