/* ═══════════════════════════════════════════════════════════
   PAIR — couche d'animation (enhance) · registre "soft luxe"
   Principe : peu de choses bougent, lentement, faibles amplitudes,
   tout est porté par l'opacité. Aucun contenu n'est modifié.
   Pour retirer : supprimer enhance.css + enhance.js et leurs
   2 lignes dans index.html.
   ═══════════════════════════════════════════════════════════ */

:root {
  --pe-ease: cubic-bezier(.22, 1, .36, 1);   /* sortie très douce */
  --pe-slow: 1.5s;
}

/* ── 1. OUVERTURE — fondu enchaîné, sans rideau ni barre ─── */
.pair-intro {
  position: fixed; inset: 0; z-index: 9999;
  background: #050f1c;
  display: grid; place-items: center;
  opacity: 1; transition: opacity 1.2s var(--pe-ease);
}
.pair-intro.fade { opacity: 0; }
.pair-intro-inner { display: flex; flex-direction: column; align-items: center; }

/* le mot-symbole : l'interlettrage se resserre — geste très "maison de luxe" */
.pair-intro-word {
  font: 500 clamp(40px, 5.4vw, 74px)/1 var(--serif, Georgia, serif);
  color: #d9b56e;
  letter-spacing: .58em; text-indent: .58em;
  opacity: 0;
  animation: pi-word 1.5s var(--pe-ease) .15s forwards;
}
@keyframes pi-word {
  0%   { opacity: 0; letter-spacing: .58em; text-indent: .58em; }
  38%  { opacity: 1; }
  100% { opacity: 1; letter-spacing: .12em; text-indent: .12em; }
}

/* un filet capillaire qui s'ouvre depuis le centre */
.pair-intro-rule {
  width: min(320px, 46vw); height: 1px; margin-top: 30px;
  background: linear-gradient(90deg, transparent, rgba(217,181,110,.85), transparent);
  transform: scaleX(0); opacity: 0;
  animation: pi-rule 1.05s var(--pe-ease) .5s forwards;
}
@keyframes pi-rule { to { transform: scaleX(1); opacity: 1; } }

.pair-intro-sub {
  margin-top: 22px;
  font: 400 10px/1 var(--sans, sans-serif);
  letter-spacing: .42em; text-indent: .42em; color: #8d9cae;
  opacity: 0; animation: pi-sub .85s var(--pe-ease) .8s forwards;
}
@keyframes pi-sub { to { opacity: 1; } }

/* ── 2. HERO — réglage lent, aucune secousse ─────────────── */
.js-intro .hero-image {
  animation: none !important;
  transform: scale(1.055);
  filter: brightness(.72) blur(5px);
}
.js-intro.intro-go .hero-image {
  transform: scale(1);
  filter: brightness(1) blur(0);
  transition: transform 2.6s var(--pe-ease), filter 2.0s var(--pe-ease);
}

/* le texte : montée courte (12px), fondu long, cadence espacée */
.js-intro .hero-kicker,
.js-intro .hero h1 .hl,
.js-intro .hero-description,
.js-intro .hero-purchase,
.js-intro .hero-note,
.js-intro .hero-caption { opacity: 0; transform: translateY(12px); }

/* La flèche est centrée par translateX(-50%) dans styles.css.
   Animer son "transform" détruirait ce centrage : on n'anime que l'opacité. */
.js-intro .scroll-cue { opacity: 0; }
.js-intro.intro-go .scroll-cue { opacity: 1; transition: opacity 1.45s var(--pe-ease) 1.35s; }

.js-intro .hero h1 { animation: none !important; }
.hero h1 .hl { display: inline-block; }   /* aussi hors animation : porte le calage optique */

.js-intro.intro-go .hero-kicker,
.js-intro.intro-go .hero h1 .hl,
.js-intro.intro-go .hero-description,
.js-intro.intro-go .hero-purchase,
.js-intro.intro-go .hero-note,
.js-intro.intro-go .hero-caption {
  opacity: 1; transform: none;
  transition: opacity 1.45s var(--pe-ease), transform 1.45s var(--pe-ease);
}
.js-intro.intro-go .hero-kicker              { transition-delay: .25s; }
.js-intro.intro-go .hero h1 .hl:nth-child(1) { transition-delay: .38s; }
.js-intro.intro-go .hero h1 .hl:nth-child(2) { transition-delay: .52s; }
.js-intro.intro-go .hero h1 .hl:nth-child(3) { transition-delay: .66s; }
.js-intro.intro-go .hero-description         { transition-delay: .84s; }
.js-intro.intro-go .hero-purchase            { transition-delay: .98s; }
.js-intro.intro-go .hero-note                { transition-delay: 1.10s; }
.js-intro.intro-go .hero-caption             { transition-delay: 1.20s; }

/* lueur qui respire très lentement — presque imperceptible */
.hero-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 58% 48% at 26% 46%, rgba(217,181,110,.085), transparent 68%);
  animation: pe-breathe 13s ease-in-out infinite;
}
@keyframes pe-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* particules : fines, lentes, presque transparentes */
.pe-dust { position: absolute; inset: 0; pointer-events: none; }
/* insérées après .hero-overlay : au-dessus de la photo, sous le texte */
.pair-intro .pe-dust { z-index: 0; opacity: 0; animation: pe-dust-in 1.45s var(--pe-ease) .3s forwards; }
@keyframes pe-dust-in { to { opacity: 1; } }
.pair-intro-inner { position: relative; z-index: 2; }

/* ── 3. RÉVÉLATIONS — fondu dominant, 14px, lent ─────────── */
.js-motion .pe-in { opacity: 0; transform: translateY(14px); }
.js-motion .pe-in.pe-shown {
  opacity: 1; transform: none;
  transition: opacity 1.35s var(--pe-ease), transform 1.35s var(--pe-ease);
}
/* le filet des sur-titres se trace doucement */
.js-motion .eyebrow:before {
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.3s var(--pe-ease) .2s;
}
.js-motion .eyebrow.pe-shown:before { transform: scaleX(1); }

/* ── 4. SURVOLS — discrets, longs ────────────────────────── */
.desktop-nav a { position: relative; }
.desktop-nav a:after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 1px;
  background: var(--gold, #d9b56e); opacity: .8;
  transform: scaleX(0); transform-origin: right;
  transition: transform .75s var(--pe-ease);
}
.desktop-nav a:hover:after, .desktop-nav a.active:after { transform: scaleX(1); transform-origin: left; }

.company-card { transition: background .7s var(--pe-ease), transform .7s var(--pe-ease), box-shadow .7s var(--pe-ease) !important; }
.company-card:hover { transform: translateY(-3px) !important; box-shadow: 0 14px 40px rgba(3,12,24,.34) !important; }

.roadmap-card { transition: transform .7s var(--pe-ease), border-color .7s var(--pe-ease); }
.roadmap-card:hover { transform: translateY(-3px); border-color: rgba(217,181,110,.42); }

.step { transition: background .7s var(--pe-ease); }
.step:hover { background: rgba(217,181,110,.028); }

.image-frame { overflow: hidden; }
.image-frame img { transition: transform 1.8s var(--pe-ease); }
.image-frame:hover img { transform: scale(1.03); }

.purchase-button { transition: filter .5s var(--pe-ease), transform .6s var(--pe-ease); }
.purchase-button:not(:disabled):hover { transform: translateY(-2px); }

/* ── 5. ACCESSIBILITÉ ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pair-intro { display: none !important; }
  .js-intro .hero-image { transform: none; filter: none; }
  .js-intro .hero-kicker, .js-intro .hero h1 .hl, .js-intro .hero-description,
  .js-intro .hero-purchase, .js-intro .hero-note, .js-intro .hero-caption,
  .js-motion .pe-in {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  /* la flèche : jamais de transform ici, son centrage en dépend */
  .js-intro .scroll-cue { opacity: 1 !important; transition: none !important; }
  .hero-glow, .pe-dust { display: none !important; }
  .js-motion .eyebrow:before { transform: scaleX(1); }
}

/* ── 6. MOBILE — bord droit aligné ───────────────────────────
   styles.css contient deux règles contradictoires pour le cadre
   d'achat dans le même point de rupture : max-width:100% (l.22)
   puis max-width:280px (l.48), qui gagne. Résultat : le cadre
   s'arrête à 93 px du bord alors que le titre et le paragraphe
   s'arrêtent à 20 px. On rétablit l'intention d'origine. */
@media (max-width: 640px) {
  .hero .hero-purchase { max-width: 100%; }

  /* ── 7. MOBILE — hero centré ───────────────────────────────
     Choix utilisateur : titre, accroche, paragraphe et mention
     centrés ligne à ligne. Les blocs qui portent un max-width
     doivent être recentrés eux-mêmes, sinon on centrerait le
     texte dans une boîte elle-même calée à gauche. */
  .hero .hero-copy { text-align: center; }
  .hero .hero-kicker,
  .hero .hero-description,
  .hero .hero-note { margin-inline: auto; }
}