/* ─────────────────────────────────────────────
   STYLE V7 — COUCHES ADDITIVES (CINEMATIQUE + AFFINEMENTS)
   Charge APRES style.css. N'override jamais une structure existante.
   Règle : si un ajout devient visible → il est mauvais.
───────────────────────────────────────────── */


/* ───────── 1. VIDEO HERO CINEMATIQUE ─────────
   Posée par-dessus le .ph-bg existant (qui devient fallback / poster
   pendant le chargement). Le voile additionnel garantit la même
   lisibilité que le HERO original. */

/* Le voile pseudo-élément du .ph-bg est conçu pour une image fixe
   (opacité ~0.97). En mode cinéma, on le neutralise pour laisser la
   vidéo respirer — la lisibilité est assurée par .ph-video-veil. */
.ph--cine .ph-bg::after {
  background: none !important;
}

.ph--cine .ph-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0;                              /* fade-in piloté ci-dessous */
  filter: grayscale(1) contrast(1.06) brightness(0.82);
  pointer-events: none;
  user-select: none;
  will-change: opacity;
  transition: opacity 1.8s cubic-bezier(.22,.61,.36,1);
}

/* Apparition lente de la vidéo après 350ms (laisse l'image se poser
   d'abord, comme un voile qui se révèle) */
.ph--cine .ph-video.is-ready {
  opacity: .42;                            /* visible mais maîtrisée */
}

/* Voile additionnel — ton ivoire dégradé qui préserve le contraste
   du texte sans écraser la vidéo */
.ph--cine .ph-video-veil {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(247,243,234,.62) 0%,
      rgba(247,243,234,.48) 35%,
      rgba(247,243,234,.28) 65%,
      rgba(247,243,234,.22) 100%
    ),
    linear-gradient(
      180deg,
      rgba(247,243,234,.06) 0%,
      rgba(247,243,234,.0)  30%,
      rgba(247,243,234,.0)  70%,
      rgba(247,243,234,.20) 100%
    );
}

/* Le contenu reste au-dessus de tout */
.ph--cine .container { position: relative; z-index: 1; }

/* Sur tablette/mobile, on diminue légèrement l'intensité */
@media (max-width: 900px) {
  .ph--cine .ph-video.is-ready { opacity: .34; }
}

/* Fallback total — pas de mouvement si l'utilisateur le refuse */
@media (prefers-reduced-motion: reduce) {
  .ph--cine .ph-video {
    display: none !important;
  }
}


/* ───────── 2. MICRO-RYTHME ─────────
   Ajoute une fraction de seconde au démarrage du HERO uniquement,
   sans toucher aux autres animations existantes. */

.ph .rv.d1 { transition-delay: .42s !important; }   /* +0.12s */
.ph .rv.d2 { transition-delay: .68s !important; }   /* +0.18s */


/* ───────── 3. SILENCE VISUEL ─────────
   Réduction très subtile de la présence de l'or sur les éléments
   décoratifs uniquement (séparateurs, accents). Pas de changement
   sur les CTA ni sur les éléments porteurs de marque. */

.sep,
.eyebrow::before,
.eyebrow::after,
.kicker::before,
.kicker::after {
  opacity: .90;       /* -10% perception or */
}


/* ───────── 4. GRAIN GLOBAL ─────────
   Surcouche de grain ultra-discrète, en mix-blend overlay.
   Ne se voit jamais — se ressent uniquement. */

.v7-grain {
  position: fixed;
  inset: 0;
  z-index: 9998;                  /* sous le curseur (#cur) qui est ~9999 */
  pointer-events: none;
  opacity: .028;                  /* milieu de la fourchette 0.02–0.035 */
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .85 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}

@media (prefers-reduced-motion: reduce) {
  .v7-grain { opacity: .018; }
}


/* ───────── 5. TYPOGRAPHIE — secondaires ─────────
   Légère désaturation des textes secondaires sans toucher au corps. */

.ph-sub  { opacity: .82; }       /* sous-titres HERO (fond ivoire — on reste lisible) */
.kicker  { opacity: .90; }
.eyebrow { opacity: .92; }


/* ───────── 6. SCROLL — sensation de poids ─────────
   On ne touche pas au scroll natif (risque trop élevé).
   Inertie supplémentaire perçue via la barre de progression : très
   léger lissage de sa transition. */

#pb { transition: transform .28s cubic-bezier(.22,.61,.36,1) !important; }


/* ───────── 7. MICRO-FRICTION CTA ─────────
   Délai supplémentaire au mouseup pour ajouter de la "matière"
   au clic. Combiné au délai existant de 280ms côté JS. */

.btn,
.btn-primary,
.btn-ghost,
.btn-line,
button.btn,
a.btn {
  transition:
    background-color .42s cubic-bezier(.22,.61,.36,1),
    color .42s cubic-bezier(.22,.61,.36,1),
    border-color .42s cubic-bezier(.22,.61,.36,1),
    transform .35s cubic-bezier(.22,.61,.36,1),
    opacity .35s cubic-bezier(.22,.61,.36,1) !important;
}


/* ───────── 8. FALLBACK MOTION GLOBAL ─────────
   Si l'utilisateur refuse le mouvement, on désactive aussi
   l'animation des éléments de révélation (.rv) du HERO uniquement. */

@media (prefers-reduced-motion: reduce) {
  .ph .rv { transition: none !important; transform: none !important; opacity: 1 !important; }
}


/* ─────────────────────────────────────────────
   V7.1 — RAFFINEMENTS COMPLEMENTAIRES
   Toujours additif, jamais visible.
───────────────────────────────────────────── */


/* ───────── 9. PARALLAX MICROSCOPIQUE HERO ─────────
   Le ph-bg et la vidéo se déplacent ~8% plus lentement que le scroll.
   Sensation de profondeur sans aucun mouvement perçu comme tel.
   Activé uniquement en non-reduced-motion via JS (variable --v7-py). */

.ph .ph-bg,
.ph--cine .ph-video {
  transform: translate3d(0, var(--v7-py, 0px), 0);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .ph .ph-bg,
  .ph--cine .ph-video { transform: none !important; }
}


/* ───────── 10. VIGNETTAGE PERIPHERIQUE TRES LEGER ─────────
   Crée une "vue tunnel" cinéma à peine perceptible — uniquement
   en haut et en bas du viewport, jamais sur les côtés (préserve
   la respiration latérale du contenu luxe). */

.v7-vignette {
  position: fixed;
  inset: 0;
  z-index: 9997;                 /* sous le grain qui est à 9998 */
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(20,18,14,.055) 0%,
      rgba(20,18,14,0)    14%,
      rgba(20,18,14,0)    86%,
      rgba(20,18,14,.045) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .v7-vignette { background: none; }
}


/* ───────── 11. CURSEUR — OPACITE DYNAMIQUE ─────────
   Le curseur s'atténue très lentement quand l'utilisateur reste
   immobile, et reprend instantanément sa présence au moindre
   mouvement. Sensation : "matière vivante mais respectueuse". */

#cur {
  transition: opacity 1.6s cubic-bezier(.22,.61,.36,1) !important;
}

#cur.v7-faint .cur-ring,
#cur.v7-faint .cur-dot {
  opacity: .55 !important;
}


/* ───────── 12. FOCUS ETAT — OR DESATURE DISCRET ─────────
   Accessibilité : ressenti élite mondiale. Les utilisateurs au
   clavier (Tab) voient un anneau d'or désaturé extrêmement fin,
   les utilisateurs souris ne le voient jamais. */

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 1px solid rgba(184, 159, 110, .55) !important;   /* or désaturé */
  outline-offset: 3px;
  border-radius: 1px;
  transition: outline-color .35s cubic-bezier(.22,.61,.36,1);
}


/* ───────── 13. CASCADE PORTFOLIO AFFINEE ─────────
   Les cartes/projets reçoivent un ease cubic plus posé,
   rythme de lecture +60ms entre chaque. */

.proj-c.rv,
.proj-card.rv,
[class*="proj"].rv {
  transition-duration: .95s !important;
  transition-timing-function: cubic-bezier(.22,.61,.36,1) !important;
}


/* ───────── 14. SELECTION TEXTUELLE — DISCRETE ─────────
   La sélection de texte ne doit pas être agressive. Or désaturé
   à très basse opacité, sans ombre ni bordure. */

::selection {
  background: rgba(184, 159, 110, .22);
  color: inherit;
}
::-moz-selection {
  background: rgba(184, 159, 110, .22);
  color: inherit;
}


/* ───────── 15. SCROLLBAR SOBRE (WEBKIT) ─────────
   Très fine, ton ivoire/encre. Ne se voit pas par défaut,
   apparaît juste lors du scroll. */

@media (pointer: fine) {
  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: rgba(40, 36, 30, .14);
    border-radius: 6px;
    transition: background .4s ease;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(40, 36, 30, .26);
  }
}