/* ============================================================
   GLORIA RABARISON — COUCHE DE RAFFINEMENT
   Polish, hero photographique, micro-interactions.
   Chargée APRÈS site.css / portfolio.css / categories.css.
   ============================================================ */

/* ── GLOBAL POLISH ─────────────────────────────────────── */
::selection { background: var(--terre-rouge); color: var(--ivoire); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
:focus-visible {
  outline: 2px solid var(--terre-rouge);
  outline-offset: 3px;
  border-radius: 1px;
}
body { font-feature-settings: "kern" 1, "liga" 1; }
.p-intro .right p,
.artiste-body p,
.p-atelier-body p,
.cat-atelier-note p { text-wrap: pretty; }

/* nicer scrollbar (webkit) */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--lin); }
::-webkit-scrollbar-thumb { background: var(--argile-ombre); border: 3px solid var(--lin); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--terre-rouge); }

/* ── MICRO-INTERACTIONS : reveal au scroll ─────────────── */
/* Base = VISIBLE (jamais masqué de façon permanente). L'état masqué
   n'est armé que sur les éléments que le JS marque .rise-armed, et il
   est retiré dès l'apparition. Si le JS ou l'animation ne tourne pas,
   le contenu reste visible. */
html.js [data-rise].rise-armed {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
  transition-delay: var(--rise-delay, 0ms);
}
html.js [data-rise].rise-armed.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-rise] { opacity: 1 !important; transform: none !important; }
}

/* image clip-reveal */
html.js [data-mask].rise-armed { clip-path: inset(0 0 100% 0); transition: clip-path 1.05s var(--ease-out); transition-delay: var(--rise-delay, 0ms); }
html.js [data-mask].rise-armed.in { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { [data-mask] { clip-path: none !important; } }

/* Reveal « .reveal » (exposition EAU) — même garantie anti-gel :
   visible par défaut, masqué uniquement quand armé par le JS. */
html.js .reveal { opacity: 1; transform: none; }
html.js .reveal.rise-armed {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: var(--rise-delay, 0ms);
}
html.js .reveal.rise-armed.in,
html.js .reveal.rise-armed.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } }

/* boutons : ressort magnétique + halo */
.btn { will-change: transform; }
.btn-primary { box-shadow: 0 1px 2px rgba(28,23,20,0.10), 0 10px 24px -12px rgba(177,74,46,0.55); }
.btn-primary:hover { box-shadow: 0 2px 6px rgba(28,23,20,0.14), 0 16px 34px -12px rgba(142,56,32,0.6); }

/* liens nav : point actif */
.nav nav a.is-current { color: var(--terre-rouge); }
.nav nav a.is-current::after { transform: scaleX(1); }

/* ============================================================
   NAV — système A : groupe « Pièces » + menu mobile
   ============================================================ */
/* groupe déroulant (desktop) */
.nav-group { position: relative; display: flex; align-items: center; }
.nav-group-trigger {
  font-size: 13px; font-weight: 500; letter-spacing: 0.01em;
  color: var(--ink); background: transparent;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 0; position: relative; cursor: pointer;
  font-family: inherit;
  transition: color var(--dur-base) var(--ease-out);
}
.nav-group-trigger:hover { color: var(--terre-rouge); }
.nav-caret {
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform var(--dur-base) var(--ease-out);
  opacity: 0.65;
}
.nav-group-trigger::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--terre-rouge);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav-group:hover .nav-group-trigger::after,
.nav-group.open .nav-group-trigger::after,
.nav-group.is-current .nav-group-trigger::after { transform: scaleX(1); }
.nav-group:hover .nav-caret,
.nav-group.open .nav-caret { transform: rotate(225deg) translateY(2px); }
.nav-group.is-current .nav-group-trigger { color: var(--terre-rouge); }

.nav-sub {
  position: absolute; top: calc(100% + 16px); left: 50%;
  transform: translateX(-50%);
  min-width: 248px;
  background: var(--ivoire);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-deep);
  padding: 8px;
  flex-direction: column; gap: 2px;
  display: none;
  z-index: 60;
}
.nav-sub::before { content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }
.nav-group:hover .nav-sub,
.nav-group.open .nav-sub {
  display: flex;
}
.nav-sub a {
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 13px;
  border-radius: 2px;
  transition: background var(--dur-base) var(--ease-out);
}
.nav-sub a::after { display: none; } /* kill inherited underline */
.nav-sub a span { font-size: 14px; font-weight: 500; color: var(--ink); transition: color var(--dur-base) var(--ease-out); }
.nav-sub a em {
  font-style: normal; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--ink-muted);
}
.nav-sub a:hover { background: rgba(177, 74, 46, 0.08); }
.nav-sub a:hover span,
.nav-sub a.is-current span { color: var(--terre-rouge); }
.nav-sub a.is-current { background: rgba(177, 74, 46, 0.06); }

/* burger (caché en desktop) */
.nav-burger { display: none; }
.nav-scrim { display: none; }

@media (max-width: 860px) {
  .nav-burger {
    display: flex; flex-direction: column; gap: 5px;
    width: 44px; height: 44px; align-items: center; justify-content: center;
    background: transparent; cursor: pointer; position: relative; z-index: 70;
    margin-left: 4px;
  }
  .nav-burger span { width: 22px; height: 1.5px; background: var(--ink); transition: transform .34s var(--ease-out), opacity .2s; }
  body.nav-open .nav-burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  body.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  /* panneau latéral */
  #primary-nav {
    display: flex !important;
    position: fixed; top: 0; right: 0;
    height: 100svh; width: min(84vw, 360px);
    flex-direction: column; align-items: stretch; justify-self: stretch;
    gap: 2px; padding: 104px 30px 36px;
    background: var(--ivoire);
    border-left: 1px solid var(--rule);
    box-shadow: var(--shadow-deep);
    transform: translateX(102%);
    transition: transform .4s var(--ease-out);
    z-index: 65; overflow-y: auto;
  }
  body.nav-open #primary-nav { transform: none; }
  #primary-nav > a,
  .nav-group-trigger {
    font-family: var(--font-display); font-weight: 300;
    font-size: 26px; letter-spacing: -0.01em;
    padding: 12px 0; width: 100%;
  }
  #primary-nav > a::after, .nav-group-trigger::after { display: none; }
  .nav-group { flex-direction: column; align-items: stretch; width: 100%; }
  .nav-group-trigger { justify-content: space-between; }
  .nav-caret { width: 8px; height: 8px; }
  .nav-sub {
    position: static; transform: none;
    display: flex; animation: none;
    min-width: 0; width: 100%;
    background: transparent; border: none; box-shadow: none;
    padding: 0 0 8px 14px; gap: 0;
  }
  .nav-sub::before { display: none; }
  .nav-sub a { padding: 9px 4px; }
  .nav-sub a span { font-size: 17px; font-weight: 400; font-family: var(--font-display); }

  .nav-scrim {
    display: block; position: fixed; inset: 0;
    background: rgba(28, 23, 20, 0.42);
    backdrop-filter: blur(2px);
    opacity: 0; visibility: hidden;
    transition: opacity .4s var(--ease-out), visibility .4s;
    z-index: 60;
  }
  body.nav-open .nav-scrim { opacity: 1; visibility: visible; }
  body.nav-open { overflow: hidden; }
}

/* ============================================================
   HERO REFAIT — .gh (Gloria Hero)
   4 traitements commutables : photo / portrait / typo / 3d
   ============================================================ */
.gh {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 72% 26%, rgba(177,74,46,0.10), transparent 55%),
    radial-gradient(90% 80% at 16% 82%, rgba(74,38,24,0.10), transparent 60%),
    var(--sable);
}
.gh::after { /* fine grain crack wash */
  content: "";
  position: absolute; inset: 0;
  background: url('../img/cracked-shadows.jpg') center / cover;
  opacity: 0.05;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.gh-stage {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,1.1fr) minmax(0,1.05fr);
  align-items: center;
  gap: var(--s-6);
  padding: 132px 56px 0;
  z-index: 2;
}

/* — colonne gauche : eyebrow + phrase — */
.gh-left {
  align-self: center;
  display: flex; flex-direction: column; gap: var(--s-5);
  max-width: 30ch;
}
.gh-left .eyebrow { color: var(--terre-rouge); }
.gh-left .say {
  font-family: var(--font-display);
  font-weight: 300; font-style: italic;
  font-size: clamp(21px, 2vw, 30px);
  line-height: 1.28; margin: 0; color: var(--encre);
}
.gh-left .say em { color: var(--terre-rouge); }
.gh-left .tag {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--ink-muted);
}

/* — centre : objet + wordmark — */
.gh-center {
  position: relative;
  align-self: stretch;
  display: flex; align-items: center; justify-content: center;
}
.gh-word {
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  pointer-events: none;
  z-index: 1;
  line-height: 0.82;
}
.gh-word .l1, .gh-word .l2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(64px, 11vw, 168px);
  letter-spacing: -0.04em;
  display: block;
}
.gh-word .l1 { color: var(--charbon); transform: translateY(-0.46em); }
.gh-word .l2 { color: var(--terre-rouge); font-style: italic; transform: translateY(0.46em); }

.gh-objwrap {
  position: relative; z-index: 3;
  transform: translate(var(--px, 0), var(--py, 0));
  transition: transform 0.35s var(--ease-out);
  will-change: transform;
}
.gh-object {
  position: relative;
  z-index: 3;
  height: clamp(330px, 52vh, 600px);
  filter: drop-shadow(0 38px 34px rgba(28,23,20,0.30));
  animation: ghFloat 7s var(--ease-in-out) infinite;
  will-change: transform;
}
.gh-object img { height: 100%; width: auto; display: block; }
@keyframes ghFloat {
  0%,100% { transform: translateY(0) rotate(-0.4deg); }
  50% { transform: translateY(-14px) rotate(0.4deg); }
}
.gh-shadow {
  position: absolute;
  z-index: 2;
  bottom: 9%; left: 50%;
  width: clamp(220px, 24vw, 340px); height: 46px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(28,23,20,0.34), transparent 70%);
  filter: blur(9px);
  animation: ghShadow 7s var(--ease-in-out) infinite;
}
@keyframes ghShadow {
  0%,100% { transform: translateX(-50%) scale(1); opacity: 0.85; }
  50% { transform: translateX(-50%) scale(0.9); opacity: 0.6; }
}

/* the rotating ring of small captions around the object (subtle) */
.gh-mark {
  position: absolute;
  bottom: 6%;
  left: 50%; transform: translateX(-50%);
  z-index: 4;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--tracking-mega); text-transform: uppercase;
  color: var(--ink-muted);
  display: flex; align-items: center; gap: 10px;
  white-space: nowrap;
}
.gh-mark::before, .gh-mark::after { content: ""; width: 28px; height: 1px; background: var(--rule-strong); }

/* — colonne droite : cartel — */
.gh-right {
  align-self: center;
  display: flex; flex-direction: column; gap: var(--s-5);
  align-items: flex-end; text-align: right;
}
.gh-cartel {
  background: rgba(28, 23, 20, 0.80);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: 18px 22px; color: var(--ivoire);
  text-align: left; max-width: 290px;
  border-left: 2px solid var(--terre-vive);
  box-shadow: var(--shadow-deep);
}
.gh-cartel .k {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--argile-bone); opacity: 0.85; margin-bottom: 6px;
}
.gh-cartel .nm { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 28px; line-height: 1; margin: 0 0 8px; }
.gh-cartel .nm span { font-style: normal; font-size: 12px; opacity: 0.7; font-family: var(--font-mono); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.gh-cartel .ds { font-size: 13px; line-height: 1.45; opacity: 0.86; }

/* — pied du hero — */
.gh-foot {
  position: relative; z-index: 2;
  padding: 0 56px 30px;
  display: flex; justify-content: space-between; align-items: end;
  gap: var(--s-5); flex-wrap: wrap;
  border-bottom: 1px solid var(--rule); padding-bottom: 26px;
}
.gh-foot .c {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--ink-muted); line-height: 1.6;
}
.gh-foot .c:last-child { text-align: right; }
.gh-foot strong { color: var(--ink); font-weight: 500; }

/* ── PORTRAIT TREATMENT ────────────────────────────────── */
.gh-portrait {
  position: absolute; inset: 0;
  z-index: 1;
  display: none;
  grid-template-columns: 1fr 1fr;
}
.gh-portrait .pf {
  position: relative; overflow: hidden;
  margin: 108px 0 70px 56px;
  align-self: stretch;
}
.gh-portrait .pf img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.gh-portrait .pf .cap {
  position: absolute; left: 18px; bottom: 18px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--ivoire); background: rgba(28,23,20,0.5);
  backdrop-filter: blur(6px); padding: 6px 10px;
}
.gh-portrait .pt {
  align-self: center; padding: 0 56px;
  display: flex; flex-direction: column; gap: var(--s-5);
}
.gh-portrait .pt .big {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(54px, 7.4vw, 128px); line-height: 0.86;
  letter-spacing: -0.035em; margin: 0;
}
.gh-portrait .pt .big em { font-style: italic; color: var(--terre-rouge); display: block; }
.gh-portrait .pt .lead {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: clamp(20px, 2vw, 28px); line-height: 1.3; color: var(--encre);
  max-width: 26ch; margin: 0;
}

/* ── TYPO TREATMENT ────────────────────────────────────── */
.gh-typo {
  position: absolute; inset: 0;
  z-index: 1; display: none;
  flex-direction: column; justify-content: center; align-items: center;
  padding: 120px 56px 40px; text-align: center;
}
.gh-typo .mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-mega); text-transform: uppercase; color: var(--terre-rouge); margin-bottom: var(--s-5); }
.gh-typo .mega {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(72px, 16vw, 248px); line-height: 0.8;
  letter-spacing: -0.045em; margin: 0; color: var(--charbon);
}
.gh-typo .mega em { font-style: italic; color: var(--terre-rouge); }
.gh-typo .strip {
  margin-top: var(--s-7);
  display: flex; gap: var(--s-5); align-items: flex-end; justify-content: center;
}
.gh-typo .strip img {
  height: clamp(90px, 13vh, 150px); width: auto;
  filter: drop-shadow(0 16px 16px rgba(28,23,20,0.22));
}
.gh-typo .sub { margin-top: var(--s-6); font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-muted); }

/* ── 3D TREATMENT (canvas) ─────────────────────────────── */
.gh-canvas { position: absolute; inset: 0; z-index: 1; display: none; }

/* treatment toggles */
.gh[data-view="portrait"] .gh-stage,
.gh[data-view="typo"] .gh-stage,
.gh[data-view="3d"] .gh-stage { opacity: 0; pointer-events: none; }
.gh[data-view="portrait"] .gh-portrait { display: grid; }
.gh[data-view="typo"] .gh-typo { display: flex; }
.gh[data-view="3d"] .gh-canvas { display: block; }
.gh[data-view="3d"] .gh-stage { opacity: 1; pointer-events: auto; }
.gh[data-view="3d"] .gh-center { visibility: hidden; } /* show meta+cartel over canvas, hide flat object */

/* ── SWITCHER ──────────────────────────────────────────── */
.gh-switch {
  position: absolute; z-index: 6;
  left: 50%; bottom: 96px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  background: rgba(245,239,224,0.72);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--rule);
  border-radius: var(--r-full);
  padding: 5px 6px 5px 14px;
  box-shadow: var(--shadow-soft);
}
.gh-switch .lbl {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--ink-muted); padding-right: 4px;
}
.gh-switch .opts { display: flex; gap: 2px; }
.gh-switch button {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-muted);
  padding: 7px 13px; border-radius: var(--r-full);
  transition: color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.gh-switch button:hover { color: var(--ink); }
.gh-switch button.on { background: var(--terre-rouge); color: var(--ivoire); }

/* hero scroll cue */
.gh-cue {
  position: absolute; z-index: 5;
  left: 56px; bottom: 96px;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--ink-muted);
}
.gh-cue .ln { width: 52px; height: 1px; background: var(--ink-muted); position: relative; overflow: hidden; }
.gh-cue .ln::after { content: ""; position: absolute; inset: 0; background: var(--terre-rouge); transform: scaleX(0); transform-origin: left; animation: ghCue 2.4s var(--ease-in-out) infinite; }
@keyframes ghCue { 0%{transform:scaleX(0);transform-origin:left} 50%{transform:scaleX(1);transform-origin:left} 51%{transform:scaleX(1);transform-origin:right} 100%{transform:scaleX(0);transform-origin:right} }

/* ── RESPONSIVE HERO ───────────────────────────────────── */
@media (max-width: 1100px) {
  .gh-stage { grid-template-columns: 1fr; padding: 120px 24px 0; gap: var(--s-5); justify-items: start; }
  .gh-left { order: 1; }
  .gh-center { order: 2; align-self: center; min-height: 46vh; width: 100%; }
  .gh-right { order: 3; align-items: flex-start; text-align: left; }
  .gh-word .l1, .gh-word .l2 { font-size: clamp(54px, 17vw, 120px); }
  .gh-foot { padding: 0 24px 26px; }
  .gh-foot .c:last-child { text-align: left; }
  .gh-portrait { grid-template-columns: 1fr; }
  .gh-portrait .pf { display: none; }
  .gh-portrait .pt { padding: 120px 24px 0; }
  .gh-cue { display: none; }
  .gh-switch { bottom: 24px; }
}
@media (max-width: 560px) {
  .gh-switch .lbl { display: none; }
  .gh-switch button { padding: 7px 10px; }
  .gh-typo .strip img { height: 76px; }
}