/* =========================================================
   Matrice Ultime 2 — SIGNATURE HEYOKA
   · Sections « Pour qui ? » et « Jouez le jeu »
   · Panneau « Les dix zones » débarrassé de ses cadres
   · Révélation droite → gauche (le miroir vit à l'envers),
     inversée à la remontée.
   Deux familles seulement : Zodiak (titres), Sofia Sans.
   ========================================================= */

/* ---------------------------------------------------------
   1. Sections éditoriales, fondues dans le décor
   Aucune carte, aucun cadre : le texte vit sur le fond.
   --------------------------------------------------------- */
.hk {
  max-width: 1100px;
}

.hk__head {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 5vh, 3.5rem);
}

.hk__head .lede {
  margin-top: 1rem;
  color: rgba(238, 240, 244, .72);
}

.hk__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(.9rem, 2.2vh, 1.6rem);
  max-width: 60rem;
}

.hk__liste li {
  position: relative;
  padding: 0 0 clamp(.9rem, 2.2vh, 1.6rem) 2.2rem;
  border-bottom: 1px solid rgba(238, 240, 244, .08);
  font-family: "Sofia Sans", system-ui, sans-serif;
  font-size: clamp(1.05rem, 1.35vw, 1.28rem);
  line-height: 1.5;
  color: rgba(238, 240, 244, .86);
}

.hk__liste li:last-child { border-bottom: 0; }

/* Un repère lumineux à gauche, qui pulse doucement. */
.hk__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: rgba(238, 240, 244, .85);
  box-shadow: 0 0 10px rgba(238, 240, 244, .5);
  animation: hk-pouls 3.4s ease-in-out infinite;
}

@keyframes hk-pouls {
  0%, 100% { opacity: .5; transform: scale(.85); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* --- Le jeu de préparation --- */
.hk__jeu {
  display: grid;
  gap: clamp(1.2rem, 3vh, 2rem);
  max-width: 56rem;
}

.hk__jeu p {
  margin: 0;
  font-family: "Sofia Sans", system-ui, sans-serif;
  font-size: clamp(1.05rem, 1.3vw, 1.24rem);
  line-height: 1.6;
  color: rgba(238, 240, 244, .82);
}

.hk__jeu b {
  color: #eef0f4;
  font-weight: 600;
}

.hk__serment {
  max-width: 46rem;
  margin: clamp(2rem, 5vh, 3.5rem) 0 0;
  font-family: "Zodiak", "Times New Roman", serif;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  font-weight: 300;
  line-height: 1.28;
  color: #eef0f4;
}

/* ---------------------------------------------------------
   2. Panneau « Les dix zones » — plus aucun cadre
   Les tableaux « en activation / en blocage » et les puces
   du sommaire vivent sur le fond, sans boîte.
   --------------------------------------------------------- */
.zg-lecture__polarite {
  gap: clamp(1.5rem, 4vw, 3rem) !important;
}

.zg-lecture__pole {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.zg-lecture__pole h4 {
  padding-bottom: .6rem;
  border-bottom: 1px solid rgba(238, 240, 244, .12);
}

/* Le sommaire : des mots posés sur le fond, pas des gélules. */
.zg-sommaire {
  border-bottom: 1px solid rgba(238, 240, 244, .1);
}

.zg-sommaire a {
  border: 0 !important;
  padding: .28rem .1rem !important;
  border-radius: 0 !important;
  position: relative;
}

.zg-sommaire a::after {
  content: "";
  position: absolute;
  left: .1rem;
  right: .1rem;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;   /* le trait naît à droite : miroir Heyoka */
  transition: transform .4s cubic-bezier(.16, 1, .3, 1);
}

.zg-sommaire a:hover::after,
.zg-sommaire a:focus-visible::after {
  transform: scaleX(1);
}

.zg-sommaire a:hover,
.zg-sommaire a:focus-visible {
  background: transparent !important;
  color: #eef0f4 !important;
}

/* Le plan de lecture lui-même : plus léger, moins « boîte ». */
.zg-lecture__plan {
  border-color: rgba(238, 240, 244, .1) !important;
}

/* ---------------------------------------------------------
   3. RÉVÉLATION DROITE → GAUCHE (le miroir Heyoka)
   Tout ce qui porte data-hk arrive depuis la droite en
   descendant, depuis la gauche en remontant.
   --------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  [data-hk] {
    opacity: 0;
    transform: translateX(46px);
    filter: blur(3px);
    transition:
      opacity .7s cubic-bezier(.16, 1, .3, 1),
      transform .8s cubic-bezier(.16, 1, .3, 1),
      filter .7s ease;
    will-change: transform, opacity;
  }
  /* En remontant, le sens s'inverse : arrivée depuis la gauche. */
  html[data-scroll-dir="up"] [data-hk]:not(.is-hk-in) {
    transform: translateX(-46px);
  }
  [data-hk].is-hk-in {
    opacity: 1;
    transform: none;
    filter: none;
    will-change: auto;
  }
}

/* ---------------------------------------------------------
   4. RESPONSIVE
   --------------------------------------------------------- */
@media (max-width: 720px) {
  .hk__liste li {
    font-size: 1rem;
    padding-left: 1.7rem;
  }
  .hk__jeu p { font-size: 1rem; }
  .hk__serment { font-size: 1.3rem; }
  [data-hk] { transform: translateX(28px); }
  html[data-scroll-dir="up"] [data-hk]:not(.is-hk-in) { transform: translateX(-28px); }
}

/* =========================================================
   5. LES PANNEAUX DE LECTURE — PLUS AUCUN CADRE
   ---------------------------------------------------------
   « La matrice », « Découvrir + » et « Les dix zones » étaient
   des cartes encadrées. Le site vit sur le fond noir, sans
   boîte : le texte se pose directement sur un voile sombre et
   se fond dans le décor.
   ========================================================= */

/* Le voile reprend LE MÊME graphite que la page (#15161b / #171920),
   avec un léger flou : on reste dans le même monde, jamais dans un noir
   plat incohérent. La page animée transparaît doucement derrière. */
.zg-lecture__voile {
  background: linear-gradient(180deg,
    rgba(21, 22, 27, .88) 0%,
    rgba(23, 25, 32, .92) 100%) !important;
  -webkit-backdrop-filter: blur(7px) saturate(1.05) brightness(.96) !important;
  backdrop-filter: blur(7px) saturate(1.05) brightness(.96) !important;
}

/* Le panneau lui-même : plus de cadre, plus de flou de carte,
   plus d'ombre, plus d'arrondi. Juste une colonne de lecture. */
.zg-lecture__plan {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: min(100%, 60rem) !important;
  max-height: 92svh !important;
  padding: clamp(3.5rem, 7vh, 5.5rem) clamp(1.25rem, 4vw, 2rem) clamp(2.5rem, 6vh, 4rem) !important;
}

.zg-lecture__plan::before { display: none !important; }

/* Le bandeau de matrice se fond aussi : pas de coin arrondi net. */
.zg-lecture__bandeau {
  border-radius: 0 !important;
}

/* Le bouton fermer reste visible mais discret, posé sur le fond. */
.zg-lecture__fermer {
  background: rgba(238, 240, 244, .06) !important;
  border-color: rgba(238, 240, 244, .16) !important;
}

/* =========================================================
   6. LE MIROIR PARTOUT — révélation droite → gauche homogène
   ---------------------------------------------------------
   On étend le principe à tout le contenu marqué data-reveal
   (têtes de section, textes, offres), pris en charge par le
   même moteur. main.js applique déjà le sens ; ici on garantit
   l'état de départ à droite pour rester cohérent avec data-hk.
   ========================================================= */

/* =========================================================
   7. « POUR QUI ? » — plus de lignes, des points animés fins
   ---------------------------------------------------------
   Jason ne veut ni les traits de séparation, ni les gros
   points. On enlève les lignes et on remplace le point par
   un repère fin qui respire, entouré d'un halo animé.
   ========================================================= */
.hk__liste li {
  border-bottom: 0 !important;
  padding-bottom: clamp(.5rem, 1.4vh, 1rem) !important;
  padding-left: 2rem !important;
}

.hk__liste li::before {
  width: .34rem !important;
  height: .34rem !important;
  top: .62em !important;
  background: rgba(238, 240, 244, .9) !important;
  box-shadow: 0 0 0 0 rgba(238, 240, 244, .4) !important;
  animation: hk-halo 3.6s ease-in-out infinite !important;
}

/* Un halo qui s'ouvre et se referme, décalé ligne par ligne. */
.hk__liste li:nth-child(2)::before { animation-delay: .3s !important; }
.hk__liste li:nth-child(3)::before { animation-delay: .6s !important; }
.hk__liste li:nth-child(4)::before { animation-delay: .9s !important; }
.hk__liste li:nth-child(5)::before { animation-delay: 1.2s !important; }
.hk__liste li:nth-child(6)::before { animation-delay: 1.5s !important; }
.hk__liste li:nth-child(7)::before { animation-delay: 1.8s !important; }

@keyframes hk-halo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(238, 240, 244, .35); opacity: .85; }
  50% { box-shadow: 0 0 0 6px rgba(238, 240, 244, 0); opacity: 1; }
}

/* =========================================================
   8. BOUTON MENU — épuré, fondu, cliquable
   ---------------------------------------------------------
   L'ancien « MENU ‖ » faisait cheap et sa zone de clic était
   minuscule. On repart d'un repère fin en deux traits d'égale
   élégance (le bas plus court : signature), une vraie surface
   de clic, aucun cadre. Il se morphe en croix à l'ouverture.
   ========================================================= */
.nav__menu {
  display: inline-flex !important;
  align-items: center;
  gap: .75rem;
  padding: .7rem .3rem .7rem 1rem !important;   /* grande zone de clic */
  background: transparent !important;
  border: 0 !important;
  cursor: pointer;
}

.nav__menu-label {
  width: auto !important;
  height: auto !important;
  background: none !important;
  font-family: "Sofia Sans", system-ui, sans-serif !important;
  font-size: .7rem !important;
  font-weight: 500 !important;
  letter-spacing: .28em !important;
  text-transform: uppercase;
  color: rgba(238, 240, 244, .82);
  transition: color .3s ease;
}

.nav__menu-label::after { display: none !important; }

/* L'icône : deux traits argentés, le bas plus court. */
.nav__menu-icon {
  position: relative !important;
  width: 26px !important;
  height: 12px !important;
  background: none !important;
}

.nav__menu-icon::after {
  content: "" !important;
  position: absolute !important;
  left: auto !important;
  right: 0 !important;
  top: 9px !important;
  width: 26px !important;
  height: 1.5px !important;
  background: rgba(238, 240, 244, .85) !important;
  border-radius: 2px;
  /* Le trait paraît plus court grâce à scaleX (transform), jamais en
     animant la largeur : aucun recalcul de mise en page. */
  transform: scaleX(.66);
  transform-origin: right center;
  transition: transform .4s cubic-bezier(.16,1,.3,1), top .4s cubic-bezier(.16,1,.3,1) !important;
}

/* Trait du haut : un pseudo-élément propre sur le conteneur. */
.nav__menu-icon::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 2px;
  height: 1.5px;
  background: rgba(238, 240, 244, .85);
  border-radius: 2px;
  transition: top .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1);
}

/* Survol : le trait court s'allonge, le tout s'éclaire. */
.nav__menu:hover .nav__menu-label,
.nav__menu:focus-visible .nav__menu-label { color: #eef0f4; }
.nav__menu:hover .nav__menu-icon::after { transform: scaleX(1); }

/* Ouvert : les deux traits se croisent en X, centré. */
.nav.is-menu .nav__menu-icon::before {
  top: 5px;
  transform: rotate(45deg);
}
.nav.is-menu .nav__menu-icon::after {
  top: 5px !important;
  transform-origin: center !important;   /* la croix reste centrée */
  transform: rotate(-45deg) !important;
}

/* =========================================================
   9. RESPONSIVE — bouton menu et sections sur petit écran
   ========================================================= */
@media (max-width: 720px) {
  .nav__menu { gap: .5rem; padding: .7rem .2rem .7rem .6rem !important; }
  .nav__menu-label { font-size: .64rem !important; letter-spacing: .2em !important; }
  .nav__menu-icon { width: 22px !important; }
  .nav__menu-icon::after { width: 22px !important; }

  .zg-lecture__voile {
    -webkit-backdrop-filter: blur(4px) !important;
    backdrop-filter: blur(4px) !important;
  }
}