/* v88 — système visuel grounded + responsive
   L'accueil est la référence visuelle. Les pages intérieures réutilisent le même langage. */

/* ===== Fond global : une seule surface continue + lave discrète ===== */
html, body { min-height: 100%; }
body.site-redesign {
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--tone, #2f4fa3) 7%, transparent), transparent 30rem),
    radial-gradient(circle at 88% 42%, color-mix(in srgb, var(--tone-2, #f0b429) 6%, transparent), transparent 34rem),
    var(--paper, #fbfaf8);
}
body.site-redesign > main,
body.site-redesign > .hx,
body.site-redesign > footer { position: relative; z-index: 2; }
.site-lava {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
}
.site-lava::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.18), transparent 28%, rgba(255,255,255,.06));
  z-index: 5;
}
.site-lava i {
  position: absolute;
  display: block;
  width: 38vmax;
  height: 38vmax;
  border-radius: 48% 52% 58% 42% / 52% 42% 58% 48%;
  filter: blur(68px);
  opacity: .13;
  will-change: transform, border-radius;
  mix-blend-mode: multiply;
}
.site-lava i:nth-child(1) { left: -15vmax; top: -13vmax; background: #2f4fa3; animation: v88-lava-a 32s ease-in-out infinite; }
.site-lava i:nth-child(2) { right: -14vmax; top: 22vh; background: #3f8aa3; animation: v88-lava-b 39s ease-in-out infinite; }
.site-lava i:nth-child(3) { left: 16vw; bottom: -20vmax; background: #f0b429; animation: v88-lava-c 44s ease-in-out infinite; opacity: .10; }
.site-lava i:nth-child(4) { right: 8vw; top: -17vmax; background: #c8453b; animation: v88-lava-d 48s ease-in-out infinite; opacity: .08; }
@keyframes v88-lava-a { 0%,100%{transform:translate3d(0,0,0) scale(1);border-radius:48% 52% 58% 42%/52% 42% 58% 48%} 50%{transform:translate3d(27vw,18vh,0) scale(1.18);border-radius:61% 39% 43% 57%/42% 61% 39% 58%} }
@keyframes v88-lava-b { 0%,100%{transform:translate3d(0,0,0) scale(1)} 45%{transform:translate3d(-30vw,-12vh,0) scale(1.2)} 78%{transform:translate3d(-12vw,24vh,0) scale(.9)} }
@keyframes v88-lava-c { 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(28vw,-34vh,0) scale(1.25)} }
@keyframes v88-lava-d { 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(-25vw,36vh,0) scale(1.16)} }
html.dark-theme body.site-redesign { background: #17131a; }
html.dark-theme .site-lava i { opacity: .075; mix-blend-mode: screen; }

/* ===== Header : même déclencheur de catégories partout ===== */
.site-header .header-inner { position: relative; }
.site-header .brand-menu-toggle {
  order: 1;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 42px;
  padding: .45rem .75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 3px 12px rgba(8,10,18,.05);
}
.site-header .brand-menu-toggle:hover,
.site-header .brand-menu-toggle[aria-expanded="true"] { background: var(--lime); border-color: var(--ink); }
.site-header .brand-menu-toggle > span:first-child { width: 16px; display:grid; gap:3px; }
.site-header .brand-menu-toggle i { width:16px; height:2px; border-radius:2px; background:currentColor; }
.site-header .brand-menu-label { font-size:.76rem; font-weight:800; }

/* Sur mobile : vrai bouton hamburger, pas un libellé décoratif. */
@media (max-width: 760px) {
  .site-header .header-inner { gap: .5rem; }
  .site-header .brand-menu-toggle { margin-left:auto; padding:.5rem .65rem; }
  .site-header .brand-menu-label { display:none; }
  .site-header .brand-menu-toggle > span:first-child { width:18px; gap:4px; }
  .site-header .brand-menu-toggle i { width:18px; height:2px; }
  .site-header .header-tools { margin-left:0; padding-left:.4rem; }
}

/* ===== Menu : cohérent avec l'accueil, plus ancré et moins « popup » ===== */
.category-menu-panel {
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 94%, var(--tone-tint) 6%);
  box-shadow: 0 28px 80px rgba(8,10,18,.22);
}
.category-menu-item.is-live { border-color: color-mix(in srgb, var(--tone) 35%, var(--line)); background: color-mix(in srgb, var(--tone-tint) 42%, var(--surface)); }
.category-menu-item.is-live .category-menu-icon { color: var(--tone-deep); }

/* ===== Smartphone : hero identique à l'accueil, mais plus « produit » ===== */
.hx-page .hx-hero--page { padding-top: clamp(2.3rem, 5vw, 4.5rem); }
.hx-page .hx-hero--page .hx-hero-inner { align-items:center; }
.hx-page .hx-hero--page .hx-stage {
  min-height: 25rem;
  display:grid;
  place-items:center;
  position:relative;
}
.hx-page .hx-hero--page .hx-phone {
  width: 13rem;
  height: 25rem;
  transform: rotate(-3deg);
  border-radius: 2rem;
  box-shadow: 0 24px 48px rgba(8,10,18,.20);
}
.hx-page .hx-hero--page .hx-chip { border-radius:10px; box-shadow:0 7px 18px rgba(8,10,18,.09); }
.hx-page .hx-hero--page .hx-phone-bar i { background:var(--lime); }
.hx-page .hx-hero--page .hx-phone-score { color:var(--tone); }

/* Les sections intérieures reprennent la sobriété de l'accueil. */
.hx-page .section,
.hx-page .deep-group { position:relative; }
.hx-page .journey-step,
.hx-page .fiche-reading-card,
.hx-page .fiche-example-card,
.hx-page .audit-card,
.hx-page .pitfall-card {
  box-shadow: 0 8px 28px rgba(8,10,18,.045);
}

/* ===== Cartes catégories : aucune carte ne perd son illustration ===== */
.hx-card-soon .hx-card-art { display:block; }
.hx-card-soon { min-height: 12rem; }
.hx-card[data-cat="projecteurs"] .hx-card-art,
.hx-card[data-cat="pc-portables"] .hx-card-art,
.hx-card[data-cat="batteries"] .hx-card-art,
.hx-card[data-cat="ecouteurs"] .hx-card-art,
.hx-card[data-cat="montres"] .hx-card-art {
  min-height: 7.5rem;
  display:grid;
  place-items:center;
  position:relative;
}
.hx-card-soon .hx-card-icon { position:relative; left:auto; top:auto; width:7rem; height:5rem; margin:0 auto; }
.hx-card[data-cat="projecteurs"] .hx-card-icon { width:8.5rem; height:5.8rem; }
.hx-card-soon .hx-mini-chip { font-size:.68rem; padding:.4rem .65rem; }

/* ===== Responsive explicite : bureau / tablette / téléphone ===== */
/* Bureau large >= 1200 : composition complète. */
@media (min-width: 1200px) {
  .container-wide { width:min(var(--wide,1180px), calc(100% - 3rem)); }
}
/* Tablette 761–1100 : deux colonnes lorsque possible, navigation compacte. */
@media (min-width: 761px) and (max-width: 1100px) {
  .hx-hero-inner { grid-template-columns: minmax(0,1fr) minmax(250px,.65fr); gap:1.5rem; }
  .hx-page .hx-hero--page .hx-stage { min-height:21rem; }
  .hx-page .hx-hero--page .hx-phone { width:11rem; height:21rem; }
  .hx-page .hx-hero--page .hx-chip { font-size:.8rem; padding:.5rem .8rem; }
  .site-nav { gap:.55rem; }
  .site-nav a,.site-nav-disabled { font-size:.72rem; }
  .header-inner { gap:.7rem; }
  .hx-card-live { grid-column:1/-1; }
}
/* Mobile <= 760 : une colonne, contrôles empilés, aucun débordement. */
@media (max-width: 760px) {
  .hx-page .hx-hero--page .hx-stage { display:grid; min-height:18rem; margin-top:1rem; }
  .hx-page .hx-hero--page .hx-phone { width:9.5rem; height:18rem; padding:1.8rem .9rem .9rem; border-radius:1.55rem; }
  .hx-page .hx-hero--page .hx-phone-score { font-size:3rem; }
  .hx-page .hx-hero--page .hx-chip { font-size:.7rem; padding:.45rem .65rem; }
  .hx-page .hx-hero--page .hx-chip-a { left:0; top:10%; }
  .hx-page .hx-hero--page .hx-chip-b { right:0; top:24%; }
  .hx-page .hx-hero--page .hx-chip-c { left:0; bottom:17%; }
  .hx-page .hx-hero--page .hx-chip-d { right:0; bottom:5%; }
  .journey-grid { grid-template-columns:1fr; }
  .two-paths-card--analyzer.is-active { grid-column:auto; }
  .model-analyzer-input-row { display:grid; grid-template-columns:1fr; }
  .model-analyzer-input-row .btn { width:100%; }
  .hx-page .section { padding-inline:0; }
}

/* Très petit écran : éviter tout titre ou composant qui force la largeur. */
@media (max-width: 420px) {
  .container-wide { width:calc(100% - 1.25rem); }
  .hx-title { font-size:clamp(2.2rem,13vw,3.2rem); }
  .hx-page .hx-hero--page .hx-stage { min-height:16rem; }
  .hx-page .hx-hero--page .hx-phone { width:8.5rem; height:16rem; }
  .category-menu-panel { max-height:calc(100vh - 6rem); }
}

@media (prefers-reduced-motion: reduce) {
  .site-lava i { animation:none !important; }
}
.v88-platform-choice{display:flex;align-items:center;flex-wrap:wrap;gap:.45rem;margin-top:.75rem;font-size:.76rem}
.v88-platform-choice>span{font-weight:800;color:var(--ink-soft);margin-right:.15rem}
.v88-platform-choice button{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:.42rem .72rem;font:700 .72rem var(--font-display);cursor:pointer}
.v88-platform-choice button:hover,.v88-platform-choice button.is-active{background:var(--tone);border-color:var(--tone);color:var(--tone-ink)}