/* ═══════════════════════════════════════════
   PALOREMTHI — TOGGLE VUE TECHNIQUE / MÉTIER
═══════════════════════════════════════════ */

/* Position fixe en haut à droite, toujours visible */
.pf-toggle-wrap {
  position: fixed;
  top: 80px;          /* sous la nav (64px) + marge */
  right: 2rem;
  z-index: 400;       /* sous la nav (500) mais au-dessus du reste */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .4rem;
}

.admin-bar .pf-toggle-wrap {
  top: 112px;         /* nav(64) + adminbar(32) + marge(16) */
}

.pf-toggle-label {
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
}

/* Track — fond sombre forcé pour visibilité sur toutes sections */
.pf-toggle-track {
  display: inline-flex;
  align-items: center;
  background: rgba(9,9,11,.85);
  backdrop-filter: blur(12px);
  border: 1.5px solid rgba(0,223,255,.4);
  border-radius: 100px;
  padding: 4px;
  gap: 0;
  position: relative;
  box-shadow: 0 4px 20px rgba(0,0,0,.5), 0 0 0 1px rgba(0,223,255,.15);
}

/* Pill glissante cyan */
.pf-toggle-pill {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  bottom: 4px;
  border-radius: 100px;
  background: rgba(0,223,255,.18);
  border: 1.5px solid var(--electric);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
  z-index: 0;
}

/* Boutons */
.pf-toggle-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: .55rem 1.2rem;
  border-radius: 100px;
  border: none;
  background: transparent;
  font-family: 'Inter', sans-serif;
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .02em;
  color: rgba(255,255,255,.45);
  cursor: pointer;
  transition: color .25s;
  white-space: nowrap;
  min-width: 140px;
}

.pf-toggle-btn svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  opacity: .45;
  transition: opacity .25s;
}

.pf-toggle-btn.pf-toggle-active {
  color: var(--electric);
  font-weight: 500;
}
.pf-toggle-btn.pf-toggle-active svg { opacity: 1; }

/* Badge statut */
.pf-view-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--electric);
  opacity: .7;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
}
.pf-view-badge::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--electric);
  animation: blink 2s infinite;
}

/* Transitions morphing content */
[id^="pf-"] {
  transition: opacity .18s ease, transform .18s ease;
}

/* Vue métier — h1 ligne 3 devient violette pleine */
body.view-metier .hero h1 .line-v {
  -webkit-text-stroke: 0;
  color: var(--violet-l, #A78BFA);
}

/* Admin bar compensation nav */
.admin-bar nav#site-nav { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar nav#site-nav { top: 46px; }
  .admin-bar .pf-toggle-wrap { top: 126px; }
}

/* Responsive — réduire sur mobile */
@media (max-width: 768px) {
  .pf-toggle-wrap { right: 1rem; top: 76px; }
  .pf-toggle-btn { padding: .5rem .8rem; min-width: 0; font-size: .7rem; }
  .pf-toggle-btn span { display: none; }        /* icône seule sur mobile */
  .pf-toggle-btn { min-width: 44px; }
  .pf-toggle-label, .pf-view-badge { display: none; }
}

/* ── Blocs double vue — toutes pages ── */
/* Par défaut : vue technique visible, vue métier cachée */
[data-biz] { display: none; }
[data-tech] { display: block; }

/* En mode métier : inverser */
body.view-metier [data-biz] { display: block; }
body.view-metier [data-tech] { display: none; }

/* ── Blocs CSS Grid à double vue ──
   Les règles génériques ci-dessus ([data-tech]{display:block}, etc.) écrasent
   le display:grid des conteneurs grid (même spécificité, mais toggle-view.css
   est chargé après main.css). Résultat : la grille s'effondre en une colonne.
   On restaure display:grid avec une spécificité supérieure ([classe][attribut])
   pour chaque conteneur grid concerné. grid-template-columns reste géré par
   main.css (et ses media queries responsive). */
.sp-results-bar[data-tech],
.svc-problems[data-tech], .svc-includes[data-tech],
.svc-steps[data-tech],    .svc-metrics[data-tech] { display: grid; }

.sp-results-bar[data-biz],
.svc-problems[data-biz], .svc-includes[data-biz],
.svc-steps[data-biz],    .svc-metrics[data-biz] { display: none; }

body.view-metier .sp-results-bar[data-biz],
body.view-metier .svc-problems[data-biz], body.view-metier .svc-includes[data-biz],
body.view-metier .svc-steps[data-biz],    body.view-metier .svc-metrics[data-biz] { display: grid; }

body.view-metier .sp-results-bar[data-tech],
body.view-metier .svc-problems[data-tech], body.view-metier .svc-includes[data-tech],
body.view-metier .svc-steps[data-tech],    body.view-metier .svc-metrics[data-tech] { display: none; }

/* Transition douce */
[data-tech], [data-biz] {
  animation: fadeIn .3s ease;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }