/* ============================================================
 * 10-page-practices.css — V_new_00.2
 * ------------------------------------------------------------
 * Page Practices (liste) — refonte 2026-06-24.
 *
 * Plus de #snap, plus de .panel { 100vh }. La page coule
 * verticalement comme newlake_2 : un wrapper .practices-page +
 * un layout grille (liste de pratiques à gauche, preview hover
 * sur la moitié droite, fixed comme dans le V14 d'origine).
 *
 * Toutes les règles formula-* / o-footer / snap-* qui traînaient
 * par héritage V14 ont été retirées (elles vivent dans
 * 10-page-formulas.css avec leur propre cascade isolée).
 *
 * Le chrome (topbar, menu, canvas-bg, footer) reste dans 00-base.css.
 * ============================================================ */

/* ── Scroll natif (override du 00-base.css qui forçait overflow:hidden
 *    pour les pages snap) ─────────────────────────────────────── */
html, body { overflow: auto; height: auto; }

/* ── Page wrapper (flow vertical libre) ───────────────────── */
.practices-page {
  position: relative;
  z-index: 10;
  width: 100%;
  min-height: 100vh;             /* le preview fixed à droite a besoin
                                    d'une hauteur de page suffisante */
  padding: 14vh 4vw 6vh 5vw;
  display: flex;
  flex-direction: column;
}

/* ── Practices layout (list left, preview right via fixed) ── */
.practices {
  position: relative;
  width: calc(50vw - 5vw);       /* desktop : moitié gauche
                                    (preview occupe l'autre moitié) */
  display: flex;
  flex-direction: column;
  gap: 3vh;
}

/* ── Filter row (toggle + pills) ──────────────────────────── */
.practices-filter-row {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.5em;
  max-width: 100%;
}

.filters-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.55em 1.05em;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(8.55px, 0.612vw, 11.25px);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  transition: color 0.08s ease, border-color 0.08s ease, background 0.08s ease;
}
.filters-toggle:hover { color: #fff; border-color: rgba(255,255,255,0.55); }
.filters-toggle:focus { outline: none; }
.filters-toggle:focus-visible { outline: 1px dashed rgba(255,240,220,0.4); outline-offset: 3px; }
.filters-toggle .ft-icon {
  display: inline-block;
  width: 10px; height: 10px;
  color: currentColor;
}
.filters-toggle .ft-icon svg { display: block; width: 100%; height: 100%; }
.filters-toggle .ft-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(210,168,135,0.95);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.filters-toggle.has-filter .ft-dot { opacity: 1; }
.practices.is-filters-open .filters-toggle {
  color: #fff;
  border-color: rgba(255,240,220,0.65);
  background: rgba(255,240,220,0.07);
}

.concern-filters {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em;
  padding: 0 0.2em;
}
.practices.is-filters-open .concern-filters { display: flex; }

.filters-hint {
  flex-basis: 100%;
  margin: 0.5em 0 0 0.3em;
  font-family: 'DM Sans', sans-serif;
  /* +20% (feedback client 30/06/2026 — agrandir la phrase sous le filtre) :
     clamp(10.8px, 0.78vw, 13.8px) × 1.2 */
  font-size: clamp(12.96px, 0.94vw, 16.56px);
  font-weight: 300;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.88);
}
.practices.is-filters-open .filters-hint { display: none; }

.concern-filter {
  padding: 0.45em 0.95em;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(8.1px, 0.567vw, 9.9px);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  white-space: nowrap;
  transition: color 0.08s ease, border-color 0.08s ease, background 0.08s ease;
}
.concern-filter:hover { color: #fff; border-color: rgba(255,255,255,0.5); }
.concern-filter.is-active {
  color: #1a0a04;
  background: rgba(255,245,225,0.95);
  border-color: rgba(255,245,225,0.95);
}
.concern-filter:focus { outline: none; }
.concern-filter:focus-visible { outline: 1px dashed rgba(255,240,220,0.4); outline-offset: 3px; }

/* ── Practice list (left column) ──────────────────────────── */
.practices-layout {
  display: flex;
  flex-direction: column;
  gap: 2vh;
}

.practice-list {
  display: flex;
  flex-direction: column;
  gap: 1.4vh;
  padding-right: 0.4vw;
}

/* Tarifs inline RETIRÉS de la liste (feedback client 16/07/2026 :
   les prix ne vivent plus que dans les sous-pages pratiques ; un
   « spa menu » PDF téléchargeable les regroupe par ailleurs). */

/* ── Répartition verticale homogène (demande Lucas 06/07/2026) ──
   La liste occupe toute la hauteur disponible (space-evenly) ; quand les
   filtres Health Concerns s'ouvrent, la hauteur disponible diminue et
   l'espacement se compresse automatiquement — tout reste visible sur un
   seul écran, sans scroll. Desktop uniquement (mobile = flow libre). */
@media (min-width: 1025px) {
  .practices-page { height: 100vh; padding-bottom: 9vh; }
  .practices { flex: 1; min-height: 0; }
  .practices-layout { flex: 1; min-height: 0; }
  .practice-list {
    flex: 1;
    min-height: 0;
    justify-content: space-evenly;
    gap: 0;
  }
}
.practice-list-section {
  font-family: 'Outfit', sans-serif;
  /* +35% (feedback client 30/06/2026 — agrandir les titres Traditional
     Medicine / Modern Science) : clamp(8.55px, 0.63vw, 11.25px) × 1.35 */
  font-size: clamp(11.5px, 0.85vw, 15.2px);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(210,168,135,0.85);
  padding-bottom: 0.6vh;
  border-bottom: 1px solid rgba(255,240,220,0.22);
  margin: 0 0 0.6vh 0;
}
.practice-list-section:not(:first-child) { margin-top: 2.4vh; }

/* Practice row — clickable, with hover preview */
.practice-row {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  padding: 0.4vh 0;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  width: fit-content;
  max-width: 100%;
  align-self: flex-start;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s ease;
}
.practice-row:hover,
.practice-row.is-active { transform: translateX(0.45vw); }
.practice-row-name {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(11.7px, 0.927vw, 15.3px);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.70);
  line-height: 1;
  transition: color 0.08s ease;
}
.practice-row-name::after {
  content: ' +';
  display: inline-block;
  margin-left: 0.35em;
  font-weight: 400;
  color: inherit;
  transform-origin: 55% 55%;
  transition: transform 0.22s cubic-bezier(0.22,1,0.36,1);
}
.practice-row:hover .practice-row-name,
.practice-row.is-active .practice-row-name {
  color: #fff;
  /* le glow vient du text-shadow (retour Lucas 13/07) ; neonBreathSoft ne
     fait respirer que l'opacité par-dessus */
  text-shadow: var(--neonGlowSoft);
  animation: neonBreathSoft 4s ease-in-out infinite;
}
.practice-row:hover .practice-row-name::after,
.practice-row.is-active .practice-row-name::after { transform: rotate(45deg); }
.practice-row-arrow { display: none; }

.practice-row.is-dimmed {
  opacity: 0.22;
  pointer-events: none;
}

/* ── Lien « The Sammā Menu » PDF (CR 16/07, retouche 17/07) —
   ⚠ jamais d'Italiana (bannie de l'univers Sammā, Lucas 17/07).
   DM Sans italique léger : police du site, mais registre opposé aux
   rangées Outfit uppercase → le lien ressort sans police étrangère.
   Icône download à la place de la flèche. ── */
.spa-menu-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  width: fit-content;
  align-self: flex-start;
  margin-top: 3vh;
  text-decoration: none;
  font-family: 'DM Sans', sans-serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(14px, 1.1vw, 18px);
  letter-spacing: 0.05em;
  color: rgba(255,246,232,0.8);
  transition: color 0.2s ease;
}
.spa-menu-link .dl-icon {
  width: 0.85em;
  height: 0.85em;
  flex-shrink: 0;
  transition: transform 0.22s cubic-bezier(0.22,1,0.36,1);
}
.spa-menu-link:hover { color: #fff; text-shadow: var(--neonGlowSoft); }
.spa-menu-link:hover .dl-icon { transform: translateY(0.14em); }

/* ── Preview (right half, fixed) ──────────────────────────── */
.practice-preview {
  position: fixed;
  top: 0;
  right: 0;
  width: 50vw;
  height: 100vh;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
  background: transparent;
}
.practice-preview-card {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  background: transparent;
  visibility: hidden;
}
.practice-preview.is-visible .practice-preview-card { visibility: visible; }
.practice-preview-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.92) contrast(1.04) saturate(1.02);
}
.practice-preview-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  box-shadow: inset 0 0 50px rgba(0,0,0,0.30);
  pointer-events: none;
}
.practice-preview-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  opacity: 0.18;
  pointer-events: none;
}
.practice-preview-content,
.practice-preview-name,
.practice-preview-tagline,
.practice-preview-teaser,
.practice-preview-cta { display: none; }

/* ── Tablette ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .practices-page { padding: 12vh 5vw 6vh; min-height: auto; }
  .practices { width: 100%; }
  .practice-preview {
    position: relative;          /* sort du fixed, prend sa place sous la liste */
    width: 100%;
    height: 40vh;
    margin-top: 4vh;
    top: auto; bottom: auto; left: auto; right: auto;
  }
}

/* ── Mobile ────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .practices-page { padding: 12vh 5vw 6vh; }
  .practices { width: 100%; }
  .practice-preview { display: none; }   /* on simplifie : pas de preview mobile */

  .practice-row { padding: 0.5em 0; }
  .practice-row-name { font-size: clamp(13px, 3.6vw, 16px); }
  /* +35% (feedback client 30/06/2026) : clamp(9px, 2.4vw, 11px) × 1.35 */
  .practice-list-section { font-size: clamp(12.15px, 3.24vw, 14.85px); }
  .practice-list { gap: 0.8vh; }
  .filters-toggle { font-size: clamp(9.24px, 2.64vw, 11.88px); padding: 0.4em 0.8em; }
  /* +20% (feedback client 30/06/2026) : clamp(11px, 3vw, 14px) × 1.2 */
  .filters-hint { font-size: clamp(13.2px, 3.6vw, 16.8px); }
  .concern-filter { font-size: clamp(8px, 2.2vw, 10px); padding: 0.4em 0.8em; }
}