/*
 * RH-2 — Menu sticky + shrink. Lot 1 « Dynamisation ». Child theme versionné.
 *
 * Pourquoi custom et pas natif Blocksy : le sticky natif dépend du plugin
 * Blocksy Companion (absent ici) et le shrink de Companion Pro (payant). Le
 * `theme_mod has_sticky_header=yes` en DB est un vestige orphelin (build nvision),
 * laissé inerte. Le custom versionné voyage par la CI (zéro dépendance plugin/DB).
 *
 * Pourquoi `position: fixed` et pas `sticky` : `#main-container` (parent de
 * `#header`) a `overflow: clip` → `position: sticky` y est cassé. Aucun ancêtre
 * n'a de `transform` → `fixed` est relatif au viewport et n'est pas clippé.
 *
 * Anti-chevauchement / anti-jump : le contenu est décalé de la hauteur réelle du
 * header via `--rh-header-h`, mise à jour en continu par un ResizeObserver (JS) →
 * la réserve suit la hauteur pendant le shrink (responsive, pas de gap).
 */

:root {
  --rh-header-h: 120px;         /* défaut avant JS ; ensuite = hauteur réelle (ResizeObserver) */
  --rh-sticky-dur: 0.32s;
  --rh-sticky-ease: ease;
  --rh-sticky-shrink-h: 74px;        /* hauteur row desktop au shrink (tunable) — naturel 120 */
  --rh-sticky-shrink-h-mobile: 54px; /* hauteur row mobile au shrink (tunable) — naturel ~70 */
  --rh-sticky-logo-scale: 0.66;      /* échelle logo au shrink (tunable) */
}

/* Header épinglé */
#header.ct-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: box-shadow var(--rh-sticky-dur) var(--rh-sticky-ease);
}

/* Admin bar WordPress (utilisateurs connectés — testeurs UAT) : la barre est fixée
 * en top:0 ; on décale le header de sa hauteur pour ne pas passer dessous. */
body.admin-bar #header.ct-header {
  top: 32px;
}
@media screen and (max-width: 782px) {
  body.admin-bar #header.ct-header {
    top: 46px;
  }
}

/* Réserve d'espace : le contenu démarre sous le header fixe (zéro chevauchement) */
#main-container {
  padding-top: var(--rh-header-h);
}

/* Transitions douces du shrink.
 * IMPORTANT : c'est le `.ct-container` interne qui porte `min-height: var(--height)`
 * (le `[data-row]` lui-même a min-height:0). La transition doit donc être sur lui,
 * sinon la hauteur snappe (et le ResizeObserver répercute le saut sur le padding). */
#header.ct-header [data-row="middle"],
#header.ct-header [data-row="middle"] .ct-container {
  transition: min-height var(--rh-sticky-dur) var(--rh-sticky-ease),
              height var(--rh-sticky-dur) var(--rh-sticky-ease);
}
#header.ct-header .site-logo-container {
  transform-origin: left center;
  transition: transform var(--rh-sticky-dur) var(--rh-sticky-ease);
}

/* --- État compacté : `html.rh-sticky-shrunk` posé par le JS au-delà du seuil ---
 * Scopé par [data-device] : le header a une variante desktop (~120) et mobile (~70)
 * dans #header ; sans scope, la valeur desktop (74) AGRANDIRAIT le header mobile (70).
 * (L'offcanvas mobile .ct-panel est hors #header → non touché.) */
html.rh-sticky-shrunk #header.ct-header [data-device="desktop"] [data-row="middle"] {
  --height: var(--rh-sticky-shrink-h);
}
html.rh-sticky-shrunk #header.ct-header [data-device="mobile"] [data-row="middle"] {
  --height: var(--rh-sticky-shrink-h-mobile);
}
html.rh-sticky-shrunk #header.ct-header .site-logo-container {
  transform: scale(var(--rh-sticky-logo-scale));
}
html.rh-sticky-shrunk #header.ct-header {
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.10); /* ombre au franchissement (le fond blanc existe déjà) */
}

/*
 * prefers-reduced-motion : le JS ne pose pas le shrink (header sticky, plein,
 * statique). Défense en profondeur : on coupe aussi toute transition.
 */
@media (prefers-reduced-motion: reduce) {
  #header.ct-header,
  #header.ct-header [data-row="middle"],
  #header.ct-header .site-logo-container {
    transition: none !important;
  }
}