/* ============================================================
   THOMAS PRUVOT — style.css
   ============================================================ */

:root {
  --gold:         #c8a055;
  --font-heading: 'Exo 2', system-ui, sans-serif;
  --font-serif:   'Cormorant Garamond', Georgia, serif;
  --ease:         cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after {
  margin:     0;
  padding:    0;
  box-sizing: border-box;
}

html, body {
  width:  100%;
  height: 100%;
}

html {
  background:               #0c0b09;
  -webkit-font-smoothing:   antialiased;
  -moz-osx-font-smoothing:  grayscale;
}

a {
  text-decoration: none;
  color:           inherit;
}

/* ============================================================
   TEXTURE DORÉE
   ============================================================ */

.gold { color: var(--gold); }

html.texture-ready .home-name {
  background:              url('Images/Texture-doree2.webp') left center / 100% 100% no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color:                   var(--gold);
}

html.texture-ready .home-quote {
  background:              url('Images/Texture-doree2.webp') left center / 100% 100% no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color:                   var(--gold);
}

html.texture-ready .home-subtitle {
   background:              none;
  -webkit-background-clip: unset;
          background-clip: unset;
  -webkit-text-fill-color: unset;
  color:                   var (--gold);
  text-shadow:             0 1px 12px rgba(0,0,0,0.80);
}

html.texture-ready .nav-link {
  color: #c8922a;
}  

@supports not (-webkit-background-clip: text) {
  html.texture-ready .home-name,
  html.texture-ready .home-quote,
  html.texture-ready .home-subtitle {
    background:              none;
    -webkit-text-fill-color: unset;
    color:                   var(--gold);
  }
}

/* ============================================================
   HOME
   ============================================================ */

body.home {
  overflow:   hidden;
  background: #0c0b09;
}

.bg-image {
  position:   fixed;
  inset:      0;
  background: url('Images/Eclat-detail.webp') center / cover no-repeat;
  z-index:    0;
}

.bg-overlay {
  position: fixed;
  inset:    0;
  background: radial-gradient(
    ellipse 75% 75% at 50% 48%,
    rgba(5, 3, 1, 0) 0%,
    rgba(5, 3, 1, 0.70) 100%
  );
  z-index:        1;
  pointer-events: none;
}

.home-wrapper {
  position:            relative;
  width:               100%;
  height:              100dvh;
  z-index:             2;
  -webkit-user-select: none;
  user-select:         none;
}

/* ============================================================
   GROUPE HAUT — NOM + SOUS-TITRE
   ============================================================ */

.home-top-group {
  position:       absolute;
  top:            9vh;
  left:           0;
  right:          0;
  text-align:     center;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            1.4rem;
}

.home-name {
  font-family:      var(--font-heading);
  font-weight:      200;
  font-size:        9rem;
  line-height:      1;
  text-transform:   uppercase;
  letter-spacing:   -0.02em;
  transform:        scaleX(0.70);
  transform-origin: center;
  opacity:          0;
  animation:        reveal-name 1.6s var(--ease) both 0.3s;
}

.home-subtitle {
  font-family:      var(--font-heading);
  font-weight:      300;
  font-size:        1.8rem;
  text-transform:   uppercase;
  letter-spacing:   0.5em;
  line-height:      1;
  transform:        scaleX(0.70);
  transform-origin: center;
  opacity:          0;
  animation:        reveal-subtitle 1.6s var(--ease) both 0.55s;
}

/* ============================================================
   CITATION
   ============================================================ */

.home-quote-wrap {
  position:  absolute;
  top:       66.66vh;
  left:      0;
  right:     0;
  transform: translateY(-50%);
  opacity:   0;
  animation: reveal-fade 1.6s var(--ease) both 0.85s;
}

.home-quote {
  text-align:     center;
  font-family:    var(--font-serif);
  font-style:     italic;
  font-weight:    300;
  font-size:      4rem;
  letter-spacing: 0.03em;
  line-height:    1.45;
}

/* ============================================================
   NAVIGATION ACCUEIL
   ============================================================ */

.home-nav {
  position:        absolute;
  bottom:          max(6vh, calc(env(safe-area-inset-bottom, 0px) + 1.8rem));
  left:            0;
  right:           0;
  display:         flex;
  justify-content: center;
  align-items:     center;
  gap:             5rem;
  opacity:         0;
  animation:       reveal-text 1.6s var(--ease) both 1.3s;
}

.nav-link {
  display:          inline-block;
  font-family:      var(--font-heading);
  font-weight:      300;
  font-size:        1.25rem;
  text-transform:   uppercase;
  letter-spacing:   0.25em;
  line-height:      1;
  transform:        scaleX(0.70);
  transform-origin: center;
  transition:       opacity 0.45s ease;
  cursor:           pointer;
}

.nav-link:hover         { opacity: 0.50; }
.nav-link:focus-visible {
  outline:        1px solid var(--gold);
  outline-offset: 5px;
  border-radius:  1px;
}

/* ============================================================
   KEYFRAMES
   ============================================================ */

@keyframes reveal-name {
  from { opacity: 0; transform: scaleX(0.70) translateY(18px); }
  to   { opacity: 1; transform: scaleX(0.70) translateY(0); }
}
@keyframes reveal-subtitle {
  from { opacity: 0; transform: scaleX(0.70) translateY(10px); }
  to   { opacity: 1; transform: scaleX(0.70) translateY(0); }
}
@keyframes reveal-text {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes reveal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* ============================================================
   RESPONSIVE — ACCUEIL
   ============================================================ */

@media (max-width: 1024px) {
  .home-name     { font-size: 6.5rem; }
  .home-subtitle { font-size: 1.05rem; }
  .home-quote    { font-size: 2.2rem; }
  .home-nav      { gap: 3.5rem; }
  .nav-link      { font-size: 1rem; }
}

@media (max-width: 1024px) and (orientation: landscape) {
    html.texture-ready .home-subtitle {
        color: #e8cd8a !important;
    }
}
@media (max-width: 768px) {
  .home-top-group { top: 7vh; gap: 1.2rem; }
  .home-name      { font-size: 5rem; }
  .home-subtitle  { font-size: 1rem; letter-spacing: 0.4em; }
  .home-quote     { font-size: 2.4rem; padding: 0 1.5rem; top: 62vh; }
  .home-nav       { gap: 2.2rem; bottom: max(4.5vh, calc(env(safe-area-inset-bottom, 0px) + 1.2rem)); }
  .nav-link       { font-size: 1rem; letter-spacing: 0.18em; }
  .site-header    { align-items: center !important; }
  .brand-name     { transform-origin: center !important; }
  html.texture-ready .home-subtitle { color: #e8cd8a !important; }
}

@media (max-width: 480px) {
  .home-top-group { top: 6vh; gap: 1rem; }
  .home-name      { font-size: 3.8rem; }
  .home-subtitle  { font-size: 0.95rem; letter-spacing: 0.35em; }
  .home-quote-wrap { top: 62vh; }
  .home-quote     { font-size: 2.2rem; padding: 0 1.2rem; }
  .home-nav { flex-wrap: wrap; justify-content: center; gap: 1.2rem 0; padding: 0; }
  .nav-link  { font-size: 0.95rem; flex: 0 0 33.333%; text-align: center; }
}

@media (max-width: 375px) {
  .home-name     { font-size: 3.2rem; }
  .home-subtitle { font-size: 0.85rem; }
  .home-quote    { font-size: 1.55rem; }
  .nav-link      { font-size: 0.88rem; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .home-top-group { top: 2vh; gap: 0.5rem; }
  .home-name      { font-size: 4rem; }
  .home-subtitle  { font-size: 1rem; }
  .home-quote     { font-size: 2.4rem; top: 43vh; padding: 0 3rem; }
  .home-nav       { bottom: max(3vh, calc(env(safe-area-inset-bottom, 0px) + 1rem)); }
  .nav-link       { font-size: 1rem; }
  html.texture-ready .home-subtitle { color: #e8cd8a !important; }
  html.texture-ready .home-nav { color: #c8922a !important; }
}

@media (prefers-reduced-motion: reduce) {
  .home-name, .home-subtitle, .home-quote, .home-nav {
    animation-duration: 0.01ms !important;
    animation-delay:    0ms    !important;
  }
}

/* ============================================================
   SCROLLBAR — filet doré discret
   ============================================================ */

::-webkit-scrollbar       { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background:    rgba(200, 160, 85, 0.45);
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(200, 160, 85, 0.80); }

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(200, 160, 85, 0.45) transparent;
}

/* ============================================================
   PAGES SECONDAIRES — navigation header
   ============================================================ */

.site-nav {
  display:     flex;
  align-items: center;
  gap:         1.4rem;
}

.site-nav-link {
  font-family:      var(--font-heading);
  font-weight:      300;
  font-size:        0.90rem;
  text-transform:   uppercase;
  letter-spacing:   0.38em;
  color:            rgba(200, 160, 85, 0.85);
  display:          inline-block;
  transform:        scaleX(0.70);
  transform-origin: center;
  text-decoration:  none;
  white-space:      nowrap;
  transition:       opacity 0.35s ease;
}

.site-nav-link:hover         { opacity: 0.55; }
.site-nav-link:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
.site-nav-link.active        { opacity: 0.38; pointer-events: none; }

@media (max-width: 560px) {
  .site-nav      { gap: 0.8rem; flex-wrap: nowrap; }
  .site-nav-link { font-size: 0.68rem; letter-spacing: 0.15em; }
}

@media (max-width: 400px) {
  .site-nav      { gap: 0.5rem; }
  .site-nav-link { font-size: 0.60rem; letter-spacing: 0.05em; }
}

/* ============================================================
   FIX MOBILE — fond fixe stable malgré barre d'adresse
   Force le rendu GPU pour éviter le saut au scroll
   ============================================================ */

.mica-bg,
.mica-overlay {
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change:       transform;
}