/* TR PERFORMANCE — motion 2027 (CSS-first, GPU: transform/opacity/filter) */
:root {
  --press-scale: 0.96;
  --spring-press-dur: 0.3s;
  --spring-press-ease: cubic-bezier(0.34, 1.3, 0.64, 1);
  --ease-ui: cubic-bezier(.22,.8,.28,1);
  --lift-ms: 220ms;
  --tap-ms: 200ms;
  --route-ms: 280ms;
  --spring: cubic-bezier(0.22, 1.2, 0.36, 1);
  --glow: color-mix(in srgb, var(--or, #c9a227) 45%, transparent);
  --glow-soft: color-mix(in srgb, var(--or, #c9a227) 22%, transparent);
  --depth-1: 0 1px 2px rgba(0,0,0,.18), 0 4px 14px rgba(0,0,0,.14), 0 0 0 1px color-mix(in srgb, var(--or,#c9a227) 5%, transparent);
  --depth-2: 0 2px 6px rgba(0,0,0,.16), 0 10px 28px rgba(0,0,0,.18), 0 0 0 1px color-mix(in srgb, var(--or,#c9a227) 10%, transparent);
  --depth-lift: 0 6px 10px rgba(0, 0, 0, .28), 0 18px 36px rgba(0, 0, 0, .32),
    0 0 0 1px color-mix(in srgb, var(--or, #c9a227) 18%, transparent);
  --glass-bg: color-mix(in srgb, var(--carte, #15161a) 78%, transparent);
  --theme-ms: 300ms;
  --fx-blur: 8px;
}

html, body {
  background-color: var(--fond);
  color: var(--texte);
  transition:
    background-color var(--theme-ms) ease,
    color var(--theme-ms) ease;
}

/* —— Theme overrides (data-theme beats prefers-color-scheme) —— */
html[data-theme="dark"] {
  color-scheme: dark;
  --fond: #0b0b0d;
  --carte: #15161a;
  --carte-haute: #1e2026;
  --texte: #f3f0ea;
  --texte-doux: #aaa49a;
  --or: #d8a53c;
  --or-clair: #f0cd7a;
  --or-doux: #2a2115;
  --sur-or: #0b0b0d;
  --trait: #2b2d34;
  --trait-fin: #212329;
  --ombre: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.35);
  --fond-0: rgba(11,11,13,0);
  --fond-1: #0b0b0d;
  --glass-bg: rgba(21, 22, 26, .78);
}
html[data-theme="light"] {
  color-scheme: light;
  --fond: #faf8f4;
  --carte: #ffffff;
  --carte-haute: #f2eee6;
  --texte: #17160f;
  --texte-doux: #575249;
  --or: #8a6200;
  --or-clair: #6b4c00;
  --or-doux: #fbf1d8;
  --sur-or: #ffffff;
  --trait: #e2dcd0;
  --trait-fin: #ece7dc;
  --ombre: 0 1px 2px rgba(20,18,10,.05), 0 2px 10px rgba(20,18,10,.06);
  --fond-0: rgba(250,248,244,0);
  --fond-1: #faf8f4;
  --glass-bg: rgba(255, 255, 255, .82);
  --depth-1: 0 1px 2px rgba(20,18,10,.06), 0 4px 12px rgba(20,18,10,.08);
  --depth-2: 0 2px 4px rgba(20,18,10,.07), 0 8px 20px rgba(20,18,10,.1),
    0 0 0 1px color-mix(in srgb, var(--or, #8a6200) 10%, transparent);
  --depth-lift: 0 6px 10px rgba(20,18,10,.08), 0 18px 36px rgba(20,18,10,.12),
    0 0 0 1px color-mix(in srgb, var(--or, #8a6200) 20%, transparent);
}

/* —— Tap / press (keep + extend) —— */
.bouton, button.bouton, .carte, .ligne, .acces, .puce, .puce-vue, .onglet,
[data-va], .filiere-tuile, .filiere-tile, .chip, .liste-peel .ligne,
.nutri-hub-card, .metier-carte, .rec-carte, .barre button {
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--tap-ms) var(--spring),
    box-shadow var(--tap-ms) ease,
    background-color var(--theme-ms) ease,
    color var(--theme-ms) ease,
    opacity var(--tap-ms) ease,
    filter var(--tap-ms) ease,
    border-color var(--theme-ms) ease;
  touch-action: manipulation;
}

.bouton:active, button.bouton:active,
.carte:active, .ligne:active, .acces:active,
.puce:active, .puce-vue:active, .filiere-tuile:active, .filiere-tile:active,
.chip:active, [data-va]:active, .nutri-hub-card:active, .barre button:active {
  transform: scale(var(--press-scale, 0.96));
  box-shadow: 0 0 0 2px var(--glow);
}

.is-pressed, .tap-press {
  transform: scale(var(--press-scale, 0.96)) !important;
  box-shadow: 0 0 0 2px var(--glow) !important;
}

/* Ripple host */
.tap-host { position: relative; overflow: hidden; }
.tap-ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, var(--glow) 0%, transparent 70%);
  opacity: .55;
  transform: scale(0);
  animation: tap-ripple-out 420ms var(--spring) forwards;
  z-index: 2;
}
@keyframes tap-ripple-out {
  to { transform: scale(1); opacity: 0; }
}

/* —— Depth + glass —— */
.carte, .filiere-tuile, .filiere-tile, .nutri-hub-card, .metier-carte {
  box-shadow: var(--depth-1);
}
.bouton:not(.sobre) {
  box-shadow: var(--depth-1), 0 0 0 1px color-mix(in srgb, var(--or, #c9a227) 25%, transparent);
}
.carte.glass, .nutri-hub-card, .barre, .profil-hq .bloc {
  background: var(--glass-bg, var(--carte));
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html[data-fx="normal"] .nutri-hub-card,
  html[data-fx="immersif"] .nutri-hub-card,
  html[data-fx="normal"] .barre,
  html[data-fx="immersif"] .barre,
  html:not([data-fx]) .nutri-hub-card,
  html:not([data-fx]) .barre {
    -webkit-backdrop-filter: blur(var(--fx-blur));
    backdrop-filter: blur(var(--fx-blur));
  }
  html[data-fx="leger"] .nutri-hub-card,
  html[data-fx="leger"] .barre {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (hover: hover) and (pointer: fine) {
  .carte:hover, .filiere-tuile:hover, .filiere-tile:hover,
  .nutri-hub-card:hover, .metier-carte:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: var(--depth-lift);
  }
  .bouton:not(.sobre):hover {
    transform: translateY(-1px);
    box-shadow: var(--depth-lift);
  }
  html[data-fx="leger"] .carte:hover,
  html[data-fx="leger"] .filiere-tuile:hover,
  html[data-fx="leger"] .nutri-hub-card:hover {
    transform: none;
    box-shadow: var(--depth-1);
  }
}

/* Parallax tilt (JS sets --tilt-x / --tilt-y) */
.carte.tr-tilt, .filiere-tuile.tr-tilt, .nutri-hub-card.tr-tilt, .metier-carte.tr-tilt {
  transform: perspective(640px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  will-change: transform;
  transition: transform 80ms linear, box-shadow var(--tap-ms) ease;
}
.carte.tr-tilt:hover, .filiere-tuile.tr-tilt:hover, .nutri-hub-card.tr-tilt:hover {
  box-shadow: var(--depth-lift);
}

/* —— Living hierarchy —— */
.filiere-tuile.choisie, .filiere-tile.choisie, .filiere-tuile.is-selected,
.puce-vue.actif, .puce.choisie, [aria-pressed="true"].puce-vue {
  box-shadow: 0 0 0 2px var(--or, #c9a227), var(--depth-2);
  animation: filiere-ring var(--tap-ms) var(--spring);
}
@keyframes filiere-ring {
  from { box-shadow: 0 0 0 0 var(--glow); }
  to   { box-shadow: 0 0 0 2px var(--or, #c9a227), var(--depth-2); }
}

.barre button[aria-current="page"] {
  color: var(--or);
  text-shadow: 0 0 12px var(--glow-soft);
  box-shadow: inset 0 -2px 0 var(--or), 0 0 16px var(--glow-soft);
}

html[data-fx="immersif"] .bouton:not(.sobre):not(:disabled) {
  animation: cta-pulse 2.5s var(--spring) infinite;
}
@keyframes cta-pulse {
  0%, 100% { opacity: 1; box-shadow: var(--depth-1), 0 0 0 0 var(--glow-soft); }
  50% { opacity: .92; box-shadow: var(--depth-2), 0 0 22px 2px var(--glow-soft); }
}

/* —— Spatial nav (3D push/pop) —— */
#app {
  perspective: 900px;
  transform-style: preserve-3d;
}
#app > *:first-child {
  transform-origin: 50% 40%;
}
#app.route-enter > *:first-child,
#app.arrive > *:first-child {
  animation: route-push-in var(--route-ms) var(--spring) both;
}
#app.route-exit > *:first-child {
  animation: route-pop-out 160ms ease-in both;
}
@keyframes route-push-in {
  from {
    opacity: 0;
    transform: translateZ(-28px) translateY(10px) rotateY(-2.2deg) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateZ(0) translateY(0) rotateY(0) scale(1);
  }
}
@keyframes route-pop-out {
  from {
    opacity: 1;
    transform: translateZ(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateZ(-18px) translateY(6px) rotateY(1.6deg) scale(.97);
  }
}
#app.route-enter { animation: none; }

.liste .ligne:active, .liste-peel .ligne:active {
  background-color: color-mix(in srgb, var(--or, #c9a227) 12%, transparent);
}

/* —— Skeleton shimmer —— */
.skeleton {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: color-mix(in srgb, var(--carte-haute, #1e2026) 88%, var(--trait, #2b2d34));
  min-height: 64px;
  pointer-events: none;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 0%,
    color-mix(in srgb, var(--or, #c9a227) 14%, transparent) 45%,
    transparent 70%
  );
  transform: translateX(-120%);
  animation: skeleton-shimmer 1.35s ease-in-out infinite;
}
.skeleton-ligne { height: 14px; margin: 10px 14px; min-height: 14px; border-radius: 8px; }
.skeleton-carte { min-height: 92px; margin-bottom: 12px; }
.skeleton-stack { display: grid; gap: 12px; }
@keyframes skeleton-shimmer {
  to { transform: translateX(120%); }
}

html[data-fx="leger"] .skeleton::after { animation-duration: 2.2s; opacity: .5; }

/* —— Reduced motion —— */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .bouton:active, .carte:active, .ligne:active, .filiere-tuile:active,
  .is-pressed, .tap-press, .carte.tr-tilt {
    transform: none !important;
  }
  .tap-ripple { display: none !important; }
  html[data-fx="immersif"] .bouton:not(.sobre) { animation: none !important; }
}

/* —— TR Crystal / Liquid Glass paint (hub visibility) —— */
html[data-theme="crystal-light"] .carte,
html[data-theme="crystal-light"] .bloc,
html[data-theme="crystal-light"] .ligne,
html[data-theme="crystal-light"] .filiere-tuile,
html[data-theme="crystal-dark"] .carte,
html[data-theme="crystal-dark"] .bloc,
html[data-theme="crystal-dark"] .ligne,
html[data-theme="crystal-dark"] .filiere-tuile,
html[data-theme="liquid-glass-light"] .carte,
html[data-theme="liquid-glass-light"] .bloc,
html[data-theme="liquid-glass-light"] .ligne,
html[data-theme="liquid-glass-light"] .filiere-tuile,
html[data-theme="liquid-glass-dark"] .carte,
html[data-theme="liquid-glass-dark"] .bloc,
html[data-theme="liquid-glass-dark"] .ligne,
html[data-theme="liquid-glass-dark"] .filiere-tuile {
  background: var(--glass-bg, var(--carte));
  border-color: var(--glass-border, var(--trait));
  box-shadow: var(--elev-1, var(--ombre));
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html[data-theme="crystal-light"] .carte,
  html[data-theme="crystal-light"] .bloc,
  html[data-theme="crystal-light"] .barre,
  html[data-theme="crystal-dark"] .carte,
  html[data-theme="crystal-dark"] .bloc,
  html[data-theme="crystal-dark"] .barre,
  html[data-theme="liquid-glass-light"] .carte,
  html[data-theme="liquid-glass-light"] .bloc,
  html[data-theme="liquid-glass-light"] .barre,
  html[data-theme="liquid-glass-dark"] .carte,
  html[data-theme="liquid-glass-dark"] .bloc,
  html[data-theme="liquid-glass-dark"] .barre {
    -webkit-backdrop-filter: blur(var(--fx-blur, 10px));
    backdrop-filter: blur(var(--fx-blur, 10px));
  }
}
html[data-theme="crystal-light"] .carte::before,
html[data-theme="crystal-dark"] .carte::before,
html[data-theme="liquid-glass-light"] .carte::before,
html[data-theme="liquid-glass-dark"] .carte::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: var(--specular, transparent);
  opacity: .55;
}
html[data-theme="crystal-light"] .carte,
html[data-theme="crystal-dark"] .carte,
html[data-theme="liquid-glass-light"] .carte,
html[data-theme="liquid-glass-dark"] .carte {
  position: relative;
  overflow: hidden;
}
html[data-fx="leger"] .carte,
html[data-fx="leger"] .bloc,
html[data-fx="leger"] .barre {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* ══ Global visual depth + hierarchy (all tabs) ═══════════════════ */
:root {
  --depth-1: 0 1px 2px rgba(0, 0, 0, .30), 0 4px 14px rgba(0, 0, 0, .26),
    0 0 0 1px color-mix(in srgb, var(--or, #c9a227) 6%, transparent);
  --depth-2: 0 2px 6px rgba(0, 0, 0, .34), 0 10px 24px rgba(0, 0, 0, .30),
    0 0 0 1px color-mix(in srgb, var(--or, #c9a227) 12%, transparent);
  --depth-lift: 0 8px 14px rgba(0, 0, 0, .30), 0 22px 44px rgba(0, 0, 0, .34),
    0 0 0 1px color-mix(in srgb, var(--or, #c9a227) 22%, transparent);
  --section-gap: clamp(16px, 3.5vw, 28px);
}
html[data-theme="light"],
html[data-theme="clair"] {
  --depth-1: 0 1px 2px rgba(20,18,10,.07), 0 4px 14px rgba(20,18,10,.09),
    0 0 0 1px color-mix(in srgb, var(--or, #8a6200) 8%, transparent);
  --depth-2: 0 2px 6px rgba(20,18,10,.08), 0 10px 24px rgba(20,18,10,.11),
    0 0 0 1px color-mix(in srgb, var(--or, #8a6200) 14%, transparent);
  --depth-lift: 0 8px 14px rgba(20,18,10,.10), 0 22px 44px rgba(20,18,10,.14),
    0 0 0 1px color-mix(in srgb, var(--or, #8a6200) 22%, transparent);
}

.bloc {
  box-shadow: var(--depth-1);
  border: 1px solid color-mix(in srgb, var(--trait, #2b2d34) 85%, var(--or, #c9a227));
  margin-block: var(--section-gap);
  padding: 18px 20px;
}
.bloc.elevated, .bloc.box-featured, .profil-identite {
  box-shadow: var(--depth-2);
  border-color: color-mix(in srgb, var(--or, #c9a227) 35%, var(--trait, #2b2d34));
  background: var(--carte-haute, var(--carte));
}
.carte, .filiere-tuile, .filiere-tile, .nutri-hub-card, .metier-carte, .rec-post, .acces {
  box-shadow: var(--depth-1);
}
.cartes {
  gap: 16px !important;
}
.carte, .filiere-tuile {
  padding: 18px 18px !important;
}
h2, .box-section-title, .section-title {
  margin-top: var(--section-gap);
  margin-bottom: 10px;
  letter-spacing: .02em;
  padding-bottom: 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--trait, #2b2d34) 70%, transparent);
}
.sous-h2 { margin-bottom: 12px; }

/* Combat hub sections */
.box-section { margin-top: var(--section-gap); }
.box-section-title {
  font-family: var(--titre, inherit);
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--or, #c9a227);
  border-bottom: 1px solid color-mix(in srgb, var(--or, #c9a227) 28%, transparent);
  padding-bottom: 8px;
  margin: 0 0 14px;
}
.box-featured {
  margin-top: 16px;
}
.box-featured .bouton { margin-top: 10px; }
.box-disc-card .pictogramme { font-size: 28px; line-height: 1; }
.box-disc-card .corps { display: grid; gap: 4px; margin-top: 8px; }
.box-disc-card .corps b { font-size: 16px; }
.box-disc-card .corps small { color: var(--texte-doux); font-size: 13px; line-height: 1.4; }

/* Nutrition Fil */
.nutri-hub { gap: 14px !important; }
#nutri-panel-fil .rec-feed { display: grid; gap: 16px; }
.fil-demo-badge {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--or); border: 1px solid color-mix(in srgb, var(--or) 40%, transparent);
  border-radius: 999px; padding: 2px 8px; margin-bottom: 8px;
}
.rec-post {
  border: 1px solid var(--trait, #2b2d34);
  border-radius: var(--rond, 16px);
  background: var(--carte);
  overflow: hidden;
}

/* Profil identity header */
.profil-identite h1 { margin: 0 0 4px; font-size: 26px; }
.profil-identite .profil-filiere {
  margin: 0 0 14px; color: var(--texte-doux); font-size: 14px;
}
.profil-chiffres {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.profil-chiffre {
  background: color-mix(in srgb, var(--carte-haute, #1e2026) 70%, transparent);
  border: 1px solid var(--trait-fin, var(--trait));
  border-radius: 12px; padding: 10px 8px; text-align: center;
  box-shadow: var(--depth-1);
}
.profil-chiffre b {
  display: block; font: 800 20px/1.1 var(--titre, inherit);
  font-variant-numeric: tabular-nums;
}
.profil-chiffre span {
  display: block; margin-top: 4px; font-size: 11px;
  color: var(--texte-doux); text-transform: uppercase; letter-spacing: .04em;
}
.profil-objectif { margin-top: 0; }
.look-panel .apparence-grille { margin-bottom: 14px; }

html[data-theme="crystal-light"] .bloc,
html[data-theme="crystal-dark"] .bloc,
html[data-theme="liquid-glass-light"] .bloc,
html[data-theme="liquid-glass-dark"] .bloc,
html[data-theme="crystal-light"] .carte,
html[data-theme="crystal-dark"] .carte,
html[data-theme="liquid-glass-light"] .carte,
html[data-theme="liquid-glass-dark"] .carte {
  box-shadow: var(--depth-2, var(--elev-2));
}


/* ══ Polish mieux (18 sep 2026) ═══════════════════════════════════ */
:root {
  --tap-ms: 200ms;
  --lift-ms: 220ms;
  --route-ms: 240ms;
  --ease-ui: cubic-bezier(.22, .8, .28, 1);
  --depth-1: 0 1px 2px rgba(0,0,0,.16), 0 6px 18px rgba(0,0,0,.12),
    0 0 0 1px color-mix(in srgb, var(--or, #c9a227) 6%, transparent);
  --depth-2: 0 2px 6px rgba(0,0,0,.14), 0 12px 32px rgba(0,0,0,.16),
    0 0 0 1px color-mix(in srgb, var(--or, #c9a227) 12%, transparent);
  --depth-lift: 0 4px 10px rgba(0,0,0,.14), 0 18px 40px rgba(0,0,0,.18),
    0 0 0 1px color-mix(in srgb, var(--or, #c9a227) 20%, transparent);
}
html[data-theme="clair"], html[data-theme="light"] {
  --depth-1: 0 1px 2px rgba(20,18,10,.05), 0 6px 18px rgba(20,18,10,.07),
    0 0 0 1px color-mix(in srgb, var(--or, #8a6200) 8%, transparent);
  --depth-2: 0 2px 6px rgba(20,18,10,.06), 0 12px 32px rgba(20,18,10,.09),
    0 0 0 1px color-mix(in srgb, var(--or, #8a6200) 12%, transparent);
  --depth-lift: 0 4px 10px rgba(20,18,10,.08), 0 18px 40px rgba(20,18,10,.11),
    0 0 0 1px color-mix(in srgb, var(--or, #8a6200) 18%, transparent);
}

.carte, .bouton, .filiere-tuile, .nutri-hub-card, .ligne, .barre button, .rec-post, .box-disc-card {
  transition:
    transform var(--lift-ms) var(--ease-ui),
    box-shadow var(--lift-ms) var(--ease-ui),
    background-color 220ms ease,
    color 220ms ease,
    border-color 220ms ease,
    opacity 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .carte:hover, .filiere-tuile:hover, .box-disc-card:hover,
  .nutri-hub-card:hover, .metier-carte:hover, .rec-post:hover {
    transform: translateY(-2px);
    box-shadow: var(--depth-lift);
  }
  .bouton:not(.sobre):hover, .barre button:hover {
    transform: translateY(-1px);
  }
  html[data-fx="leger"] .carte:hover,
  html[data-fx="leger"] .box-disc-card:hover,
  html[data-fx="leger"] .nutri-hub-card:hover,
  html[data-fx="leger"] .rec-post:hover {
    transform: none;
    box-shadow: var(--depth-1);
  }
}

/* Type hierarchy */
h1, .heros .h-nom, .box-hero-texte h1, .profil-identite h1 {
  letter-spacing: -.02em;
  font-weight: 900;
  color: var(--texte);
  text-wrap: balance;
}
h2, .box-section-title, .section-title {
  letter-spacing: .08em;
  font-weight: 800;
  color: color-mix(in srgb, var(--texte) 88%, var(--or));
}
.box-section-title {
  letter-spacing: .14em;
  color: var(--or);
}

/* Combat cards — expressive */
.box-disc-card, .box-disc-card.carte {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  min-height: 96px;
  padding: 16px 16px 16px 14px !important;
  text-align: left;
}
.box-disc-card .pictogramme {
  font-size: 40px;
  line-height: 1;
  flex: 0 0 auto;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}
.box-disc-card .corps {
  display: grid;
  gap: 4px;
  margin-top: 0;
  min-width: 0;
  flex: 1;
}
.box-disc-card .corps b {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.box-disc-card .corps small {
  color: var(--texte-doux);
  font-size: 13px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.box-disc-cta {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--or);
  margin-top: 2px;
}
.box-disc-card.is-selected,
.box-disc-card[aria-current="true"] {
  box-shadow: 0 0 0 2px var(--or), var(--depth-2);
  background: color-mix(in srgb, var(--or) 10%, var(--carte));
}
.box-hero {
  aspect-ratio: 16 / 9;
  min-height: 180px;
  max-height: 280px;
  background: #1A0C10;
  display: block;
  overflow: hidden;
}
.box-hero-img {
  width: 100%;
  height: 100%;
  max-height: 280px;
  object-fit: cover; /* cadrage sujet — pas d’étirement / moins de plafond */
  object-position: center 28%;
  aspect-ratio: auto;
}

/* Feed social */
.rec-post-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.rec-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  font: 800 12px/1 var(--titre, system-ui);
  letter-spacing: .02em;
  color: var(--sur-or, #0b0b0d);
  background: linear-gradient(135deg, var(--or-clair, #f0cd7a), var(--or, #c9a227));
  box-shadow: var(--depth-1);
  flex: 0 0 auto;
}
.rec-post-who { display: grid; gap: 2px; min-width: 0; }
.rec-auteur { font-size: 13px; font-weight: 700; }
.rec-when { font-size: 12px; color: var(--texte-doux); }
.fil-empty {
  text-align: center;
  padding: 28px 16px;
  border: 1px dashed color-mix(in srgb, var(--or) 35%, var(--trait));
  border-radius: 16px;
  background: color-mix(in srgb, var(--carte) 92%, var(--or-doux, transparent));
}
.fil-empty-ico { font-size: 28px; margin-bottom: 8px; }
.fil-empty-titre { margin: 0 0 6px; font-weight: 800; font-size: 16px; }
.fil-empty-sous { margin: 0; color: var(--texte-doux); font-size: 14px; line-height: 1.45; }

/* Profil meters */
.profil-identite, .profil-identite.bloc {
  padding: 22px 20px 20px;
  border-radius: 18px;
}
.profil-kicker {
  margin: 0 0 6px;
  font: 800 11px/1 var(--titre, inherit);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--or);
}
.profil-identite h1 {
  font-size: clamp(26px, 6vw, 32px);
  margin: 0 0 4px;
}
.profil-meters, .profil-chiffres {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 16px;
}
.profil-meter {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 8px 4px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--carte-haute, #1e2026) 65%, transparent);
  border: 1px solid var(--trait-fin, var(--trait));
}
.profil-meter.is-empty .profil-ring-val { opacity: .25; }
.profil-ring { width: 52px; height: 52px; transform: rotate(-90deg); }
.profil-ring-track, .profil-ring-val {
  fill: none;
  stroke-width: 4;
}
.profil-ring-track { stroke: color-mix(in srgb, var(--trait) 80%, transparent); }
.profil-ring-val {
  stroke: var(--or);
  stroke-linecap: round;
  transition: stroke-dasharray 280ms var(--ease-ui);
}
.profil-meter-txt { text-align: center; }
.profil-meter-txt b {
  display: block;
  font: 800 15px/1.1 var(--titre, inherit);
  font-variant-numeric: tabular-nums;
}
.profil-meter-txt span {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  color: var(--texte-doux);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Nav active — pill + underline glow */
.barre button {
  position: relative;
  transition: color var(--lift-ms) var(--ease-ui), transform var(--lift-ms) var(--ease-ui),
    text-shadow var(--lift-ms) ease, box-shadow var(--lift-ms) ease;
}
.barre button[aria-current="page"] {
  color: var(--or);
  text-shadow: 0 0 14px var(--glow-soft, rgba(201,162,39,.35));
}
.barre button[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 22%; right: 22%; bottom: 5px;
  height: 3px;
  border-radius: 99px;
  background: var(--or);
  box-shadow: 0 0 12px var(--glow-soft, rgba(201,162,39,.45));
}
.barre button[aria-current="page"] .pictogramme {
  transform: translateY(-1px);
  filter: drop-shadow(0 0 6px var(--glow-soft, rgba(201,162,39,.4)));
}

/* Content swap */
#app.tr-enter > *:first-child,
#app.route-enter > *:first-child,
#app.arrive > *:first-child {
  animation: tr-enter-soft var(--route-ms, 240ms) var(--ease-ui) both;
}
@keyframes tr-enter-soft {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
html[data-fx="leger"] #app.tr-enter > *:first-child,
html[data-fx="leger"] #app.route-enter > *:first-child {
  animation: tr-enter-fade 180ms ease both;
}
@keyframes tr-enter-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #app.tr-enter > *:first-child,
  #app.route-enter > *:first-child { animation: none !important; }
}


/* ── Nutrition dash (above Fil) ───────────────────────────────── */
.nutri-dash { display: grid; gap: 14px; margin-top: 16px; }
.nutri-card { padding: 16px 16px 14px; }
.nutri-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.nutri-card-title { margin: 0; font-size: 18px; letter-spacing: .02em; }
.nutri-card-meta, .nutri-tendance { color: var(--texte-doux); font-size: 13px; line-height: 1.45; margin: 6px 0 0; }
.nutri-kcal b { font-size: 22px; color: var(--or); }
.nutri-spark { margin: 8px 0 4px; min-height: 40px; }
.nutri-spark .sparkline, .nutri-spark .courbe { width: 100%; height: 40px; display: block; }
.nutri-spark-empty { margin: 8px 0; color: var(--texte-doux); font-size: 13px; }
.nutri-poids-row { display: flex; gap: 10px; align-items: end; margin-top: 12px; }
.nutri-poids-label { flex: 1; display: grid; gap: 4px; font-size: 12px; color: var(--texte-doux); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.nutri-poids-label input { font-size: 18px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--bordure); background: var(--carte); color: var(--texte); width: 100%; }
.nutri-macros { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.nutri-macro-chip { font-size: 12px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--bordure); background: color-mix(in srgb, var(--carte) 80%, transparent); }
.nutri-macro-chip.muted { color: var(--texte-doux); }
.nutri-search-label { display: grid; gap: 6px; font-size: 12px; color: var(--texte-doux); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.nutri-search-label input { font-size: 16px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--bordure); background: var(--carte); color: var(--texte); }
.nutri-al-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.nutri-al-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--bordure); background: var(--carte); }
.nutri-al-row .corps { flex: 1; min-width: 0; }
.nutri-al-row .corps b { display: block; font-size: 14px; }
.nutri-al-row .corps small { color: var(--texte-doux); font-size: 12px; }
.nutri-al-empty { color: var(--texte-doux); font-size: 14px; margin: 10px 0 0; }
.nutri-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-top: 4px; }
.nutri-chips .puce-vue { flex: 0 0 auto; }
button.lien-btn { background: none; border: 0; color: var(--or); font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }

/* === TREND UI 2025 — accents chaleur + profondeur === */
:root {
  --heat: #E07A3D;
  --heat-clair: #F0A060;
  --heat-doux: color-mix(in srgb, #E07A3D 22%, transparent);
  --ember: #C94A3A;
  --ambre: #D4A04A;
  --glow-heat: color-mix(in srgb, var(--heat) 35%, transparent);
  --glow-ambre: color-mix(in srgb, var(--ambre) 28%, transparent);
  --elev-1: 0 4px 12px rgba(0,0,0,.22), 0 12px 32px rgba(0,0,0,.28);
  --elev-2: 0 8px 20px rgba(0,0,0,.28), 0 18px 40px rgba(0,0,0,.34), 0 0 0 1px color-mix(in srgb, var(--heat) 12%, transparent);
  --elev-3: 0 12px 28px rgba(0,0,0,.34), 0 24px 56px rgba(0,0,0,.40), 0 0 24px var(--glow-heat);
  --depth-1: var(--elev-1);
  --depth-2: var(--elev-2);
  --depth-lift: var(--elev-3);
  --grad-warm: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 70%, var(--heat)) 0%,
    var(--accent) 45%,
    color-mix(in srgb, var(--accent) 55%, var(--ambre)) 100%);
  --grad-card: linear-gradient(165deg,
    color-mix(in srgb, var(--carte-haute) 90%, var(--heat)) 0%,
    var(--carte) 42%,
    var(--carte) 100%);
}
html[data-theme="noir"],
html[data-theme="dark"],
html[data-theme="crystal-dark"],
html[data-theme="liquid-glass-dark"] {
  --heat: #E8894A;
  --heat-clair: #F2B07A;
  --ember: #D45442;
  --ambre: #E0B35A;
  --elev-1: 0 6px 16px rgba(0,0,0,.36), 0 14px 36px rgba(0,0,0,.40);
  --elev-2: 0 10px 24px rgba(0,0,0,.42), 0 22px 48px rgba(0,0,0,.46), 0 0 0 1px rgba(224,137,74,.14);
  --elev-3: 0 14px 32px rgba(0,0,0,.48), 0 28px 64px rgba(0,0,0,.52), 0 0 28px rgba(224,137,74,.18);
  --glow: color-mix(in srgb, var(--accent) 35%, var(--heat) 25%);
  --glow-soft: color-mix(in srgb, var(--heat) 20%, transparent);
  --glass-border: color-mix(in srgb, #fff 12%, var(--heat) 8%);
}
html[data-theme="clair"],
html[data-theme="light"],
html[data-theme="crystal-light"],
html[data-theme="liquid-glass-light"] {
  --heat: #C45E28;
  --heat-clair: #E07A3D;
  --ember: #B03A2E;
  --ambre: #B8860B;
  --elev-1: 0 6px 18px rgba(40,28,12,.10), 0 2px 6px rgba(40,28,12,.06);
  --elev-2: 0 10px 28px rgba(40,28,12,.12), 0 0 0 1px color-mix(in srgb, var(--heat) 18%, transparent);
  --elev-3: 0 16px 40px rgba(40,28,12,.14), 0 0 20px color-mix(in srgb, var(--heat) 12%, transparent);
  --glow-soft: color-mix(in srgb, var(--heat) 14%, transparent);
}

/* Cartes / blocs — glass + chaleur */
.carte, .bloc, .nutri-card, .filiere-tuile, .box-disc-card, .rec-post, .acces, .nutri-hub-card {
  background: var(--grad-card);
  box-shadow: var(--elev-1);
  border: 1px solid color-mix(in srgb, var(--trait) 70%, var(--heat) 18%);
  transition: transform 220ms var(--spring, cubic-bezier(.22,1,.36,1)),
    box-shadow 220ms ease, border-color 220ms ease, filter 220ms ease;
}
@supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) {
  html[data-theme="crystal-dark"] .carte,
  html[data-theme="crystal-dark"] .bloc,
  html[data-theme="crystal-dark"] .rec-post,
  html[data-theme="crystal-light"] .carte,
  html[data-theme="crystal-light"] .bloc,
  html[data-theme="liquid-glass-dark"] .carte,
  html[data-theme="liquid-glass-dark"] .bloc,
  html[data-theme="liquid-glass-light"] .carte,
  html[data-theme="liquid-glass-light"] .bloc {
    -webkit-backdrop-filter: blur(var(--fx-blur, 10px)) saturate(1.15);
    backdrop-filter: blur(var(--fx-blur, 10px)) saturate(1.15);
  }
}
@media (hover: hover) {
  .carte:hover, .bloc.elevated:hover, .filiere-tuile:hover, .box-disc-card:hover,
  .rec-post:hover, .acces:hover, .nutri-hub-card:hover, .nutri-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--elev-3);
    border-color: color-mix(in srgb, var(--heat) 45%, var(--trait));
  }
}
.bouton, button.bouton {
  background: var(--grad-warm);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--heat) 28%, transparent), var(--elev-1);
  border: 1px solid color-mix(in srgb, var(--heat-clair) 35%, transparent);
  transition: transform 160ms ease, box-shadow 200ms ease, filter 200ms ease;
}
@media (hover: hover) {
  .bouton:hover, button.bouton:hover {
    filter: brightness(1.06);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--heat) 40%, transparent), var(--elev-2);
  }
}
.bouton:active, button.bouton:active { transform: scale(.98); }

/* Nav — pastille active chaude */
.barre button[aria-current="page"],
.barre [aria-current="page"] {
  color: var(--heat-clair) !important;
  text-shadow: 0 0 18px var(--glow-heat);
  box-shadow: inset 0 -2px 0 var(--heat), 0 0 16px var(--glow-heat);
}
.barre button {
  transition: color 200ms ease, text-shadow 200ms ease, box-shadow 200ms ease;
}

/* Titres — accent chaleur discrète */
h1, .box-section-title, .nutri-card-title, .profil-identite h1 {
  background: linear-gradient(90deg, var(--texte) 0%, color-mix(in srgb, var(--texte) 70%, var(--heat-clair)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 color-mix(in srgb, var(--heat) 25%, transparent));
}
html[data-theme="clair"] h1,
html[data-theme="light"] h1,
html[data-theme="crystal-light"] h1,
html[data-theme="liquid-glass-light"] h1 {
  background: none;
  color: var(--texte);
  filter: none;
  border-image: linear-gradient(90deg, var(--heat), var(--accent)) 1;
}

/* Fil votes / badges */
.fil-votes {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--trait) 60%, var(--heat) 20%);
}
.fil-vote-btn.on {
  border-color: var(--heat);
  box-shadow: 0 0 0 1px var(--heat), 0 0 14px var(--glow-heat);
  color: var(--heat-clair);
}
.fil-badge-news {
  background: color-mix(in srgb, var(--ember) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--ember) 45%, transparent);
  color: var(--heat-clair);
}
.fil-badge-com {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}

/* Sélection combat */
.box-disc-card.is-selected, .filiere-tuile.is-selected {
  border-color: var(--heat);
  box-shadow: var(--elev-2), 0 0 0 1px var(--heat), 0 0 22px var(--glow-heat);
}

/* Puces actives */
.puce-vue.actif, .puce.choisie, .apparence-opt.actif {
  box-shadow: 0 0 0 1px var(--heat), 0 0 16px var(--glow-heat);
  border-color: color-mix(in srgb, var(--heat) 55%, var(--accent));
}

html[data-fx="leger"] .carte:hover,
html[data-fx="leger"] .bouton:hover {
  transform: none;
  filter: none;
}
@media (prefers-reduced-motion: reduce) {
  .carte, .bloc, .bouton, .barre button { transition: none !important; }
}

/* === TYPO 2025 — hiérarchie + soulignages utiles === */
:root {
  --titre: 'Barlow Condensed', 'Archivo', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --corps: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  --fs-display: clamp(28px, 6.5vw, 34px);
  --fs-h2: clamp(18px, 4.2vw, 22px);
  --fs-h3: 17px;
  --fs-corps: 16.5px;
  --lh-corps: 1.55;
  --track-titre: -0.025em;
}
body {
  font-family: var(--corps);
  font-size: var(--fs-corps);
  line-height: var(--lh-corps);
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, .titre-display {
  font-family: var(--titre);
  font-weight: 900;
  font-size: var(--fs-display);
  letter-spacing: var(--track-titre);
  line-height: 1.12;
  text-wrap: balance;
}
h2, .box-section-title, .section-title, .nutri-card-title {
  font-family: var(--titre);
  font-weight: 800;
  font-size: var(--fs-h2);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
h3 {
  font-family: var(--titre);
  font-weight: 700;
  font-size: var(--fs-h3);
  letter-spacing: -0.015em;
}

/* Soulignage utile — titres de section (accent chaleur, pas décoratif partout) */
h1.titre-souligne,
.box-hero-texte h1,
.nutri-card-title,
.box-section-title,
.profil-identite h1,
h2.section-title {
  display: inline-block;
  padding-bottom: 6px;
  border-bottom: 2.5px solid transparent;
  border-image: linear-gradient(90deg, var(--heat, #E07A3D), var(--ambre, #D4A04A), var(--accent)) 1;
  margin-bottom: 4px;
}

/* Surlignage mots-clés */
mark, .surligne, .mot-cle {
  background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--heat, #E07A3D) 38%, transparent) 55%);
  color: inherit;
  padding: 0 0.12em;
  border-radius: 2px;
  font-weight: 650;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
mark.ambre, .surligne-ambre {
  background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--ambre, #D4A04A) 42%, transparent) 55%);
}
.lien-accent {
  color: var(--heat-clair, var(--heat));
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--heat) 55%, transparent);
}

/* Aération + contraste corps */
.sous-h2, .nutri-tendance, .nutri-card-meta, .rec-post-blurb, p {
  max-width: 42rem;
}
.barre .mot {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.carte .titre, .ligne .nom, .rec-post-titre {
  font-family: var(--titre);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.fil-votes-compte {
  font-family: var(--titre);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  letter-spacing: 0.01em;
}
/* Espacement sections */
#app > h1, #app > h2, .nutri-dash, .box-section { margin-top: clamp(14px, 3vw, 24px); }

/* Typo: titres lisibles (override gradient clip trop agressif) */
h1, .box-section-title, .nutri-card-title, .profil-identite h1 {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  color: var(--texte) !important;
  filter: none !important;
}

/* === REGISTRES: angulaire vs arrondi === */
/* Défaut arrondi (nav + nutrition + profil) */
html[data-registre="arrondi"] {
  --rond: 22px;
  --rond-carte: 20px;
  --rond-bouton: 14px;
}
html[data-registre="arrondi"] .carte,
html[data-registre="arrondi"] .bloc,
html[data-registre="arrondi"] .rec-post,
html[data-registre="arrondi"] .nutri-card,
html[data-registre="arrondi"] .acces,
html[data-registre="arrondi"] .nutri-hub-card,
html[data-registre="arrondi"] .ligne {
  border-radius: var(--rond-carte) !important;
}
html[data-registre="arrondi"] .bouton,
html[data-registre="arrondi"] .puce,
html[data-registre="arrondi"] .puce-vue {
  border-radius: 999px !important;
}
html[data-registre="arrondi"] h1,
html[data-registre="arrondi"] h2,
html[data-registre="arrondi"] .nutri-card-title {
  font-family: var(--titre);
  font-weight: 750;
  letter-spacing: -0.02em;
  border-radius: 0;
}

/* Angulaire = Combat + Opérationnel */
html[data-registre="angulaire"] {
  --rond: 6px;
  --rond-carte: 4px;
  --rond-bouton: 4px;
}
html[data-registre="angulaire"] .carte,
html[data-registre="angulaire"] .bloc,
html[data-registre="angulaire"] .filiere-tuile,
html[data-registre="angulaire"] .box-disc-card,
html[data-registre="angulaire"] .box-hero,
html[data-registre="angulaire"] .acces,
html[data-registre="angulaire"] .ligne,
html[data-registre="angulaire"] .metier-carte {
  border-radius: var(--rond-carte) !important;
  clip-path: none;
}
html[data-registre="angulaire"] .bouton {
  border-radius: 4px !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 900;
}
html[data-registre="angulaire"] .puce,
html[data-registre="angulaire"] .puce-vue {
  border-radius: 4px !important;
}
html[data-registre="angulaire"] h1,
html[data-registre="angulaire"] .box-hero-texte h1,
html[data-registre="angulaire"] .box-section-title,
html[data-registre="angulaire"] h2 {
  font-family: var(--titre);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 3px solid var(--heat, #E07A3D);
  border-image: none;
  padding-bottom: 8px;
  display: inline-block;
}
html[data-registre="angulaire"] .box-hero {
  border: 2px solid color-mix(in srgb, var(--heat) 50%, var(--trait));
  box-shadow: var(--elev-2), inset 0 0 0 1px color-mix(in srgb, var(--ambre) 25%, transparent);
}
html[data-registre="angulaire"] .box-disc-card .pictogramme,
html[data-registre="angulaire"] .filiere-tuile .pictogramme {
  font-size: 28px;
  filter: drop-shadow(0 0 8px var(--glow-heat, rgba(224,122,61,.35)));
}

/* Navigation toujours arrondie (même en écran angulaire) */
.barre, .barre button {
  border-radius: 18px !important;
}
.barre button {
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  font-weight: 700 !important;
}

/* === SECTION HEAT ACCENTS 2025 === */
/* Famille chaude cohérente — pas de bleu/vert froid.
   Opérationnel: orange feu punchy
   Combat: bordeaux profond
   Nutrition: corail doux (bien-être chaud)
   Suivi: cuivre / pêche
   Profil: prune / bordeaux élégant */
html[data-section="operationnel"] {
  --sec: #F05A1A;
  --sec-clair: #FF7A3D;
  --sec-doux: color-mix(in srgb, #F05A1A 22%, transparent);
  --heat: var(--sec);
  --heat-clair: var(--sec-clair);
  --glow-heat: color-mix(in srgb, var(--sec) 38%, transparent);
  --or: var(--sec);
  --or-clair: var(--sec-clair);
  --accent: var(--sec);
  --accent-clair: var(--sec-clair);
}
html[data-section="combat"] {
  --sec: #8B1E2D;
  --sec-clair: #C43A4A;
  --sec-doux: color-mix(in srgb, #8B1E2D 24%, transparent);
  --heat: var(--sec-clair);
  --heat-clair: #E85A68;
  --ember: #8B1E2D;
  --glow-heat: color-mix(in srgb, #C43A4A 36%, transparent);
  --or: #C43A4A;
  --or-clair: #E85A68;
  --accent: #C43A4A;
  --accent-clair: #E85A68;
}
html[data-section="nutrition"] {
  --sec: #E07A5F;
  --sec-clair: #F0A090;
  --sec-doux: color-mix(in srgb, #E07A5F 22%, transparent);
  --heat: var(--sec);
  --heat-clair: var(--sec-clair);
  --glow-heat: color-mix(in srgb, #E07A5F 32%, transparent);
  --or: #E07A5F;
  --or-clair: #F0A090;
  --accent: #E07A5F;
  --accent-clair: #F0A090;
}
html[data-section="suivi"] {
  --sec: #C47A4A;
  --sec-clair: #E0A878;
  --sec-doux: color-mix(in srgb, #C47A4A 20%, transparent);
  --heat: var(--sec);
  --heat-clair: var(--sec-clair);
  --ambre: #D4A06A;
  --glow-heat: color-mix(in srgb, #C47A4A 30%, transparent);
  --or: #C47A4A;
  --or-clair: #E0A878;
  --accent: #C47A4A;
  --accent-clair: #E0A878;
}
html[data-section="profil"] {
  --sec: #6B2D4A;
  --sec-clair: #A04A72;
  --sec-doux: color-mix(in srgb, #6B2D4A 22%, transparent);
  --heat: var(--sec-clair);
  --heat-clair: #C46A92;
  --ember: #6B2D4A;
  --glow-heat: color-mix(in srgb, #A04A72 34%, transparent);
  --or: #A04A72;
  --or-clair: #C46A92;
  --accent: #A04A72;
  --accent-clair: #C46A92;
}

/* Appliquer la teinte section sur chrome actif */
html[data-section] .barre button[aria-current="page"] {
  color: var(--sec-clair) !important;
  text-shadow: 0 0 16px var(--glow-heat);
  box-shadow: inset 0 -2px 0 var(--sec), 0 0 14px var(--glow-heat);
}
html[data-section] .bouton {
  background: linear-gradient(135deg, var(--sec-clair), var(--sec));
  border-color: color-mix(in srgb, var(--sec-clair) 40%, transparent);
  box-shadow: 0 4px 14px var(--glow-heat), var(--elev-1);
}
html[data-section="angulaire"] h1,
html[data-registre="angulaire"][data-section] h1,
html[data-registre="angulaire"][data-section] .box-section-title {
  border-bottom-color: var(--sec);
}
html[data-section] .fil-vote-btn.on,
html[data-section] .puce-vue.actif,
html[data-section] .box-disc-card.is-selected {
  border-color: var(--sec);
  box-shadow: 0 0 0 1px var(--sec), 0 0 16px var(--glow-heat);
}

/* Nutrition — Votre Chemin en corail (plus de vert militaire) */
html[data-section="nutrition"] .nutri-perso,
html[data-section="nutrition"] .prudence.nutri-perso {
  border-color: color-mix(in srgb, #E07A5F 45%, transparent) !important;
  background: color-mix(in srgb, #E07A5F 12%, var(--carte)) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, #F0A090 25%, transparent), var(--elev-1);
}
html[data-section="nutrition"] .nutri-perso b {
  color: #F0A090 !important;
}
html[data-section="nutrition"] .prudence:not(.nutri-perso) {
  border-color: color-mix(in srgb, #E07A5F 35%, var(--trait)) !important;
}
/* replaced by nutri-perso-cta AA block */

/* Suivi notes — Apple-like clarity + copper */
.suivi-notes-du-jour { margin-top: 14px; }
.suivi-note-echelle { margin-top: 12px; }
.suivi-note-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; font-family: var(--titre); font-weight: 700; }
.suivi-note-head small { color: var(--texte-doux); font-weight: 500; }
.suivi-note-puces .puce { min-width: 32px; border-radius: 10px !important; }
.suivi-mini-courbes { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.suivi-mini-c { padding: 10px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--sec, #C47A4A) 25%, var(--trait)); background: color-mix(in srgb, var(--carte) 90%, var(--sec, #C47A4A)); }
.suivi-insights { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.suivi-insight { padding: 12px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--sec, #C47A4A) 30%, transparent); background: color-mix(in srgb, var(--sec, #C47A4A) 10%, var(--carte)); font-size: 14px; line-height: 1.45; display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; }
#sv-fait:not([hidden]), #j-fait:not([hidden]) { color: var(--sec-clair, #E0A878); font-weight: 700; margin-top: 10px; }
.bouton.ok { filter: saturate(1.1); }


/* === PHOTOS FULL-BLEED FIX === */
.heros > img, .box-hero-img, .parcours > img, .bio-photo img, .rec-cover img,
.photo-vue img, .fond-photo img, img.contenu-photo {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}
.box-hero { min-height: clamp(180px, 42vw, 280px); width: 100%; }
.box-hero-img { height: clamp(180px, 42vw, 280px) !important; }
.heros { width: 100%; }
.rec-cover { width: 100%; min-height: 140px; }
@media (max-width: 520px) {
  .box-hero-img, .box-hero { height: clamp(160px, 48vw, 220px) !important; min-height: 160px; }
  .rec-cover { min-height: 120px; aspect-ratio: 16/10; }
  .heros { min-height: 260px; max-height: 58vh; }
}


/* === SECTION SIGNATURE FX (subtil) === */
html[data-section="operationnel"] .barre button[aria-current="page"] .pictogramme {
  animation: sec-pulse-op 2.4s ease-in-out infinite;
}
@keyframes sec-pulse-op {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); transform: scale(1); }
  50% { filter: drop-shadow(0 0 10px var(--glow-heat)); transform: scale(1.06); }
}
html[data-section="combat"] .box-hero {
  box-shadow: var(--elev-3), 0 0 40px color-mix(in srgb, #8B1E2D 35%, transparent);
}
html[data-section="combat"] .box-disc-card:hover {
  box-shadow: var(--elev-3), 0 0 28px color-mix(in srgb, #C43A4A 40%, transparent);
}
html[data-section="nutrition"] .nutri-dash .nutri-card {
  box-shadow: var(--elev-1), 0 0 24px color-mix(in srgb, #E07A5F 18%, transparent);
}
html[data-section="suivi"] .suivi-notes-du-jour,
html[data-section="suivi"] .suivi-hero {
  animation: sec-breathe 4.5s ease-in-out infinite;
}
@keyframes sec-breathe {
  0%, 100% { box-shadow: var(--elev-1); }
  50% { box-shadow: var(--elev-2), 0 0 20px color-mix(in srgb, #C47A4A 22%, transparent); }
}
html[data-section="profil"] .profil-identite {
  box-shadow: var(--elev-2), 0 0 32px color-mix(in srgb, #6B2D4A 28%, transparent);
  border-color: color-mix(in srgb, #A04A72 40%, var(--trait));
}
html[data-fx="leger"] [data-section] .barre button[aria-current="page"] .pictogramme,
html[data-fx="leger"] .suivi-notes-du-jour,
html[data-fx="leger"] .suivi-hero { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  html[data-section] .barre button[aria-current="page"] .pictogramme,
  html[data-section] .suivi-notes-du-jour,
  html[data-section] .suivi-hero { animation: none !important; }
}



/* === Livre d’exercices — bord droit permanent (2026-09-19) === */
.btn-livre-bord {
  position: fixed;
  right: 0;
  bottom: 40%;
  z-index: 45;
  transform: translateY(50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 36px;
  padding: 14px 8px 14px 10px;
  border: 1px solid color-mix(in srgb, var(--accent, var(--heat)) 45%, transparent);
  border-right: 0;
  border-radius: 14px 0 0 14px;
  background: color-mix(in srgb, var(--carte, #1a1a1a) 90%, var(--accent, var(--heat)));
  color: var(--texte, #fff);
  font: 800 11px/1.1 var(--titre, system-ui);
  letter-spacing: 0.04em;
  box-shadow: var(--elev-2, 0 4px 18px rgba(0,0,0,.35));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  touch-action: manipulation;
  cursor: pointer;
}
.btn-livre-bord .btn-livre-ico { font-size: 16px; line-height: 1; }
.btn-livre-bord .btn-livre-lab {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.btn-livre-bord[aria-current="page"],
.btn-livre-bord.is-actif {
  background: color-mix(in srgb, var(--accent, var(--heat)) 55%, var(--carte, #1a1a1a));
  border-color: var(--accent, var(--heat));
}
.btn-livre-bord:active { transform: translateY(50%) scale(0.97); }
.btn-al-rapide {
  position: fixed; right: 14px; bottom: 88px; z-index: 40;
  width: 48px; height: 48px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent, var(--heat)) 40%, transparent);
  background: color-mix(in srgb, var(--carte) 88%, var(--accent, var(--heat)));
  color: var(--texte); font: 800 14px/1 var(--titre); box-shadow: var(--elev-2);
  display: grid; place-items: center; padding: 0;
}
.btn-al-rapide .btn-al-ico { display: flex; flex-direction: column; align-items: center; gap: 0; }
.btn-al-rapide .btn-al-sun { font-size: 16px; line-height: 1; }
.btn-al-rapide .btn-al-globe { font-size: 11px; line-height: 1; opacity: .9; }
.panneau-al-carte .al-help { margin: 0 0 8px; font-size: 13px; color: var(--texte-doux); }
.panneau-al-carte .al-row-head { display: flex; align-items: center; gap: 8px; font-size: 15px; }

.panneau-al {
  position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.45);
  display: grid; place-items: end center; padding: 16px;
}
.panneau-al-carte {
  width: min(100%, 420px); border-radius: 20px; padding: 16px;
  background: var(--glass-bg, var(--carte));
  border: 1px solid var(--glass-border, var(--trait));
  box-shadow: var(--elev-3);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.panneau-al-carte header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }

/* === CRITIQUE APPLE HIG 2025 — Liquid Glass = couche nav, pas contenu ===
   Source: developer.apple.com/design/human-interface-guidelines/materials
   « Don't use Liquid Glass in the content layer. »
*/
html[data-theme="crystal-glass"] .carte,
html[data-theme="crystal-glass"] .bloc,
html[data-theme="crystal-glass"] .ligne,
html[data-theme="crystal-glass-light"] .carte,
html[data-theme="crystal-glass-light"] .bloc,
html[data-theme="crystal-glass-light"] .ligne,
html[data-theme="liquid-glass-dark"] .carte,
html[data-theme="liquid-glass-dark"] .bloc,
html[data-theme="liquid-glass-light"] .carte,
html[data-theme="liquid-glass-light"] .bloc {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: var(--carte) !important;
}

html[data-theme="crystal-glass"] .barre,
html[data-theme="crystal-glass-light"] .barre,
html[data-theme="liquid-glass-dark"] .barre,
html[data-theme="liquid-glass-light"] .barre,
html[data-theme="crystal-glass"] .tr-apparence-panel,
html[data-theme="crystal-glass-light"] .tr-apparence-panel {
  -webkit-backdrop-filter: blur(var(--fx-blur, 16px)) saturate(1.2);
  backdrop-filter: blur(var(--fx-blur, 16px)) saturate(1.2);
  background: var(--glass-bg, color-mix(in srgb, var(--carte) 72%, transparent));
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme^="crystal"] .barre,
  html[data-theme^="liquid-glass"] .barre {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* === PULSE FORME — innovation Suivi (cuivre / pêche) === */
.suivi-pulse-forme {
  margin: 12px 0 18px;
  padding: 16px 16px 14px;
  border: 1px solid color-mix(in srgb, var(--sec, #C47A4A) 35%, var(--trait));
  box-shadow: var(--elev-2, 0 10px 28px rgba(0,0,0,.28)), 0 0 0 1px color-mix(in srgb, var(--sec, #C47A4A) 18%, transparent);
}
.pulse-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.pulse-ring {
  position: relative;
  width: 112px;
  height: 112px;
  flex: 0 0 auto;
}
.pulse-ring-val {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  font-family: var(--display, Archivo, system-ui, sans-serif);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.03em;
  color: var(--sec-clair, #E0A878);
  line-height: 1;
}
.pulse-ring-val small {
  display: block;
  font-size: 11px;
  font-weight: 600;
  opacity: .7;
  letter-spacing: 0.04em;
  text-align: center;
  margin-top: 2px;
}
.pulse-ring-arc {
  transition: stroke-dashoffset .45s cubic-bezier(.22,1,.36,1);
}
.pulse-ring-arc.pulse-pop {
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--sec, #C47A4A) 55%, transparent));
}
.pulse-taps { display: grid; gap: 10px; }
.pulse-tap-k {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sec-clair, #E0A878);
  margin-bottom: 6px;
}
.pulse-tap-puces {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pulse-tap-puces .puce {
  min-width: 2rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--sec, #C47A4A) 28%, var(--trait));
  background: color-mix(in srgb, var(--carte) 88%, var(--sec, #C47A4A));
}
.pulse-tap-puces .puce.choisie {
  background: var(--sec, #C47A4A);
  color: #1a100c;
  border-color: transparent;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sec-clair, #E0A878) 45%, transparent);
}
.pulse-live, .pulse-corr, .pulse-hint {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--texte-doux);
}
.pulse-hint {
  color: var(--sec-clair, #E0A878);
  font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
  .pulse-ring-arc { transition: none; }
}

/* === PULSE FORME v2 — dials + contributeurs + ordre === */
.pulse-dials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 8px 0 14px;
  justify-items: center;
}
.pulse-dial { position: relative; text-align: center; width: 72px; }
.pulse-dial-val {
  position: absolute; inset: 0 0 18px 0; display: grid; place-content: center;
  font-family: var(--display, Archivo, system-ui, sans-serif);
  font-weight: 800; font-size: 18px; color: var(--sec-clair, #E0A878);
}
.pulse-dial-lab {
  display: block; margin-top: 2px; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--texte-doux);
}
.pulse-dial-arc { transition: stroke-dashoffset .45s cubic-bezier(.22,1,.36,1); }
.pulse-dial-arc.pulse-pop {
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--sec, #C47A4A) 55%, transparent));
}
.pulse-streak {
  margin: 6px 0 0; font-size: 12px; font-weight: 700;
  color: var(--sec-clair, #E0A878);
}
.pulse-contrib { display: grid; gap: 8px; margin-top: 12px; }
.pulse-contrib-row {
  display: grid; grid-template-columns: 7.5rem 1fr auto; gap: 8px; align-items: center;
  font-size: 12px;
}
.pulse-contrib-track {
  height: 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--sec, #C47A4A) 18%, transparent);
  overflow: hidden;
}
.pulse-contrib-track > i {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--sec, #C47A4A), var(--sec-clair, #E0A878));
}
.pulse-ordre {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--sec, #C47A4A) 25%, var(--trait));
}
.pulse-ordre .bouton { margin-top: 8px; width: 100%; }
.pulse-tap-soir { opacity: .92; }
.pulse-head .pulse-ring { display: none; } /* v1 ring retiré au profit des 3 dials */
@media (prefers-reduced-motion: reduce) {
  .pulse-dial-arc { transition: none; }
}

/* === PULSE FORME v3 — hist / corrs / conseil / rappel === */
.pulse-hist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 4px 0 8px;
}
.pulse-hist-card {
  padding: 10px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--sec, #C47A4A) 10%, var(--carte));
  border: 1px solid color-mix(in srgb, var(--sec, #C47A4A) 22%, var(--trait));
}
.pulse-tendance {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem; height: 1.6rem;
  margin-left: 6px;
  border-radius: 999px;
  font-weight: 800;
  background: color-mix(in srgb, var(--sec, #C47A4A) 22%, transparent);
}
.pulse-tend-haut { color: #E8C48A; }
.pulse-tend-bas { color: #E07A5F; }
.pulse-tend-plat { color: var(--texte-doux); }
.pulse-tend-mot { margin: 0 0 10px; font-size: 13px; color: var(--texte-doux); }
.pulse-corrs, .pulse-conseil {
  margin-top: 12px;
  padding: 12px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--carte) 88%, var(--sec, #C47A4A));
  border: 1px solid color-mix(in srgb, var(--sec, #C47A4A) 20%, var(--trait));
}
.pulse-corr-list {
  margin: 6px 0 0;
  padding-left: 1.1rem;
  font-size: 12.5px;
  color: var(--texte-doux);
  line-height: 1.45;
}
.pulse-conseil-mot {
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--sec-clair, #E0A878);
  line-height: 1.45;
}
.pulse-rappel-ligne {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 12px;
  font-size: 13px;
  cursor: pointer;
}
.pulse-rappel-ligne small {
  display: block;
  color: var(--texte-doux);
  font-weight: 400;
  margin-top: 2px;
}
@media (max-width: 420px) {
  .pulse-hist { grid-template-columns: 1fr; }
}

/* === PULSE v4 + LIQUID GLASS APPLE-DEPTH === */
.liquid-panel,
html[data-theme="crystal-glass"] .suivi-pulse-forme,
html[data-theme="crystal-glass-light"] .suivi-pulse-forme {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--carte) 72%, transparent);
  border: 1px solid color-mix(in srgb, #fff 14%, var(--sec, #C47A4A) 18%);
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 18%, transparent) inset,
    0 18px 40px rgba(0,0,0,.28),
    0 0 0 1px color-mix(in srgb, var(--sec, #C47A4A) 12%, transparent);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html[data-theme="crystal-glass"] .suivi-pulse-forme,
  html[data-theme="crystal-glass-light"] .suivi-pulse-forme,
  html[data-theme="crystal-glass"] .barre,
  html[data-theme="crystal-glass-light"] .barre {
    -webkit-backdrop-filter: blur(22px) saturate(1.35);
    backdrop-filter: blur(22px) saturate(1.35);
  }
}
.liquid-panel::before {
  content: "";
  pointer-events: none;
  position: absolute; inset: 0 auto auto 0;
  width: 55%; height: 42%;
  background: linear-gradient(135deg, color-mix(in srgb, #fff 16%, transparent), transparent 70%);
  opacity: .55;
}
.liquid-card {
  background: color-mix(in srgb, var(--carte) 82%, var(--sec, #C47A4A));
  border: 1px solid color-mix(in srgb, #fff 10%, var(--sec, #C47A4A) 16%);
  border-radius: 16px;
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 12%, transparent) inset;
}
.liquid-chip {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
  margin: 8px 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--sec, #C47A4A) 14%, var(--carte));
  border: 1px solid color-mix(in srgb, var(--sec, #C47A4A) 28%, var(--trait));
  font-size: 13px;
  color: var(--texte-doux);
}
.pulse-pred b {
  font-family: var(--display, Archivo, system-ui, sans-serif);
  font-size: 22px;
  color: var(--sec-clair, #E0A878);
}
.pulse-pred-k {
  font-size: 11px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--sec-clair, #E0A878);
}
.pulse-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.pulse-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.pulse-badge {
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 6px 10px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--sec, #C47A4A) 25%, var(--trait));
  color: var(--texte-doux); opacity: .55;
}
.pulse-badge.on {
  opacity: 1;
  color: #1a100c;
  background: linear-gradient(135deg, var(--sec-clair, #E0A878), var(--sec, #C47A4A));
  border-color: transparent;
  box-shadow: 0 0 12px color-mix(in srgb, var(--sec, #C47A4A) 35%, transparent);
}
.pulse-export { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.pulse-export .bouton { min-height: 44px; min-width: 44px; flex: 1; }

/* Focus mode — only Pulse visible */
html.pulse-focus #barre,
html.pulse-focus header,
body.pulse-focus #barre,
body.pulse-focus header { opacity: .15; pointer-events: none; }
html.pulse-focus .suivi-hq,
html.pulse-focus .suivi-notes-du-jour,
html.pulse-focus .suivi-grille,
html.pulse-focus .sp-suivi-top,
html.pulse-focus .blocCue,
body.pulse-focus .suivi-hq,
body.pulse-focus .suivi-notes-du-jour,
body.pulse-focus .suivi-grille,
body.pulse-focus .sp-suivi-top { display: none !important; }
html.pulse-focus .pulse-detail,
body.pulse-focus .pulse-detail { display: none !important; }
html.pulse-focus .suivi-pulse-forme,
body.pulse-focus .suivi-pulse-forme {
  margin-top: 8px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sec, #C47A4A) 40%, transparent), 0 24px 60px rgba(0,0,0,.4);
}

/* A11y — touch targets + focus ring */
.pulse-tap-puces .puce {
  min-width: 44px; min-height: 44px;
  font-size: 15px; font-weight: 700;
}
.pulse-tap-puces .puce:focus-visible,
.pulse-focus-btn:focus-visible,
#pulse-appliquer:focus-visible,
.pulse-export .bouton:focus-visible {
  outline: 2px solid var(--sec-clair, #E0A878);
  outline-offset: 2px;
}
@media (prefers-reduced-transparency: reduce) {
  .liquid-panel, .liquid-card, .suivi-pulse-forme {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: var(--carte) !important;
  }
}
@media (prefers-contrast: more) {
  .pulse-badge.on { outline: 2px solid #fff; }
  .pulse-tap-puces .puce.choisie { outline: 2px solid #fff; }
}

/* Nav Liquid Glass deeper specular */
html[data-theme="crystal-glass"] .barre,
html[data-theme="crystal-glass-light"] .barre {
  border-top: 1px solid color-mix(in srgb, #fff 16%, transparent);
  box-shadow: 0 -8px 32px rgba(0,0,0,.25), 0 1px 0 color-mix(in srgb, #fff 12%, transparent) inset;
}
html[data-theme="crystal-glass"] .barre button[aria-current="page"],
html[data-theme="crystal-glass-light"] .barre button[aria-current="page"] {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sec, #C47A4A) 45%, transparent),
    0 0 18px color-mix(in srgb, var(--sec, #C47A4A) 30%, transparent);
}

/* ═══════════════════════════════════════════════════════════════
   LIQUID GLASS MAX — multicouche, specular pointeur, scroll-edge,
   morph, glass toast/sheet (principes WWDC25, rendu CSS/GPU)
   ═══════════════════════════════════════════════════════════════ */
:root {
  --lg-light-x: 50%;
  --lg-light-y: 30%;
  --lg-spec-x: 0px;
  --lg-spec-y: 0px;
  --lg-scroll-edge: 0;
  --lg-blur: 22px;
  --lg-sat: 1.4;
  --lg-rim: color-mix(in srgb, #fff 22%, var(--sec, #C47A4A) 10%);
  --lg-fill: color-mix(in srgb, var(--carte, #15161a) 62%, transparent);
}

.lg-surface,
.lg-toast,
.lg-sheet,
html[data-theme^="crystal"] .barre,
html[data-theme^="crystal"] .suivi-pulse-forme,
html[data-theme^="crystal"] .tr-apparence-panel,
html[data-theme^="crystal"] .box-disc-card,
html[data-theme^="crystal"] .nutri-card,
html[data-theme^="crystal"] .fil-vote-ligne,
html[data-theme^="crystal"] .profil-identite {
  position: relative;
  background: var(--lg-fill);
  border: 1px solid var(--lg-rim);
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 20%, transparent) inset,
    calc(var(--lg-spec-x) * 0.15) calc(var(--lg-spec-y) * 0.15) 28px rgba(0,0,0,.22),
    0 12px 40px rgba(0,0,0,.28);
  overflow: hidden;
  isolation: isolate;
}
@supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) {
  .lg-surface,
  .lg-toast,
  .lg-sheet,
  html[data-theme^="crystal"] .barre,
  html[data-theme^="crystal"] .suivi-pulse-forme,
  html[data-theme^="crystal"] .tr-apparence-panel {
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
    backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  }
}
/* Couche specular / réfraction bord (gradient suit --lg-light-*) */
.lg-surface::before,
.lg-sheet::before,
html[data-theme^="crystal"] .suivi-pulse-forme::before,
html[data-theme^="crystal"] .barre::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(120% 80% at var(--lg-light-x) var(--lg-light-y),
      color-mix(in srgb, #fff 28%, transparent), transparent 55%),
    linear-gradient(135deg,
      color-mix(in srgb, #fff 18%, transparent),
      transparent 42%,
      color-mix(in srgb, var(--sec, #C47A4A) 8%, transparent) 100%);
  opacity: .7;
  mix-blend-mode: soft-light;
  z-index: 0;
}
/* Rim refraction (lensing edge) */
.lg-surface::after,
html[data-theme^="crystal"] .bouton.lg-morph::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #fff 25%, transparent),
    inset 0 -10px 24px color-mix(in srgb, #000 18%, transparent),
    inset 0 12px 20px color-mix(in srgb, #fff 10%, transparent);
  z-index: 1;
}
.lg-surface > *,
.suivi-pulse-forme > * { position: relative; z-index: 2; }

/* Scroll edge: soft fade ONLY when scrolled — never mask whole #app at rest
   (transparent@0 + failed calc blanked the UI → black screen). */
#app.lg-edge-soft {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 36px,
    #000 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 36px,
    #000 100%
  );
}
html.lg-scrolled #app.lg-edge-soft { }
html.lg-scrolled .barre {
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 18%, transparent) inset,
    0 -1px 0 color-mix(in srgb, #000 30%, transparent),
    0 12px 36px rgba(0,0,0,.35);
}

/* Morph interactive glass (press → goutte) */
.lg-morph,
.bouton.lg-morph,
.puce.lg-morph,
.barre button.lg-morph {
  transform: scale(0.96);
  border-radius: 18px !important;
  transition: transform .18s cubic-bezier(.22,1,.36,1), border-radius .22s ease, box-shadow .22s ease;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--sec, #C47A4A) 40%, transparent),
    0 0 24px color-mix(in srgb, var(--sec, #C47A4A) 35%, transparent) !important;
}
.bouton, .puce, .barre button, .box-disc-card {
  transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease, border-radius .2s ease, background .2s ease;
}

/* Toast glass flottant */
.toast.lg-toast,
#toast.lg-toast {
  background: color-mix(in srgb, var(--carte) 55%, transparent) !important;
  border: 1px solid var(--lg-rim) !important;
  border-radius: 16px !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 12px 40px rgba(0,0,0,.35), 0 1px 0 color-mix(in srgb, #fff 20%, transparent) inset;
}
.tr-apparence-panel.lg-sheet {
  border-radius: 22px;
  -webkit-backdrop-filter: blur(28px) saturate(1.45);
  backdrop-filter: blur(28px) saturate(1.45);
}

/* Writing Tools + patterns + resume */
.pulse-wt { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.pulse-wt-btn { min-height: 40px; flex: 1; font-size: 12px; }
.pulse-wt-btn[aria-pressed="true"] {
  background: var(--sec, #C47A4A); color: #1a100c; border-color: transparent;
}
.pulse-resume-mot, .pulse-pattern { font-size: 13px; line-height: 1.45; margin: 6px 0 0; }
.pulse-pattern-douce { color: var(--sec-clair, #E0A878); font-weight: 600; }
.pulse-pattern-info { color: var(--texte-doux); }

/* BIC screen polish */
html[data-section="combat"] .box-disc-card {
  min-height: 88px;
  border-radius: 12px;
}
html[data-section="combat"] .box-disc-card.is-selected,
html[data-section="combat"] .box-disc-card:focus-visible {
  box-shadow: 0 0 0 2px var(--sec-clair, #C43A4A), 0 12px 28px rgba(0,0,0,.35);
}
html[data-section="nutrition"] .nutri-card,
html[data-section="nutrition"] .rec-cover {
  border-radius: 18px;
}
html[data-section="profil"] .profil-identite {
  border-radius: 20px;
  padding: 16px;
}
.fil-badge { border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 700; }

@media (prefers-reduced-transparency: reduce) {
  .lg-surface, .lg-toast, .lg-sheet,
  html[data-theme^="crystal"] .barre,
  html[data-theme^="crystal"] .suivi-pulse-forme {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: var(--carte) !important;
  }
  .lg-surface::before, .lg-surface::after { display: none; }
  #app { -webkit-mask-image: none; mask-image: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lg-morph { transform: none; }
  .bouton, .puce { transition: none; }
}


/* FIX contraste Nutrition — chemin / profil / filières (AA) */
.nutri-perso {
  background: #1A0C10 !important;
  border-color: #C47A4A !important;
  color: #F8E8D8 !important;
}
.nutri-perso-titre, html[data-section="nutrition"] .nutri-perso b {
  color: #F0A090 !important;
}
.nutri-perso-lib, .nutri-perso-sous, .nutri-perso small {
  color: #E8D0C0 !important;
}
.nutri-perso-cta, html[data-section="nutrition"] .nutri-perso .bouton {
  width: auto !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #1A0C10 !important;
  background: #F0A090 !important;
  border: 1px solid #E85D2A !important;
  border-radius: 12px !important;
}
.nutri-perso-cta:focus-visible {
  outline: 2px solid #F8E8D8;
  outline-offset: 2px;
}
html[data-section="nutrition"] .bouton.sobre {
  border-color: #C47A4A;
  color: #F8E8D8;
  background: #2A1520;
}


/* Filière visible partout */
.filiere-chip {
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--or, #C9A227) 45%, var(--bordure));
  background: color-mix(in srgb, var(--carte) 88%, #2a1a10);
}
.filiere-chip-kicker {
  margin: 0;
  font: 700 11px/1.2 var(--titre);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--or, #C9A227);
}
.filiere-chip-titre {
  margin: 6px 0 0;
  font: 800 20px/1.25 var(--titre);
  color: var(--texte);
}
.filiere-chip-actions { margin: 8px 0 0; font-size: 14px; }
.profil-identite .profil-filiere {
  margin: 0 0 14px;
  color: var(--texte);
  font-size: 16px;
  line-height: 1.4;
}
.profil-filiere-label {
  display: block;
  font: 700 11px/1.2 var(--titre);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--or, #C9A227);
  margin-bottom: 4px;
}
.profil-identite .profil-filiere b {
  font-size: 18px;
  font-weight: 800;
  color: var(--texte);
}


/* Opérationnel — Prochaine séance (libellé explicite) */
.op-prochaine-kicker {
  margin: 0 0 8px;
  font: 800 13px/1.2 var(--titre);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--or, #C9A227);
}
.op-prochaine-carte {
  border-color: color-mix(in srgb, var(--or, #C9A227) 40%, var(--bordure)) !important;
}


/* Opérationnel — chemin métier (1× visible + select) */
.op-chemin-kicker {
  margin: 0;
  font: 800 11px/1.2 var(--titre);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--or, #C9A227);
}
.op-chemin-titre {
  margin: 6px 0 12px;
  font: 800 20px/1.25 var(--titre);
  color: var(--texte);
}
.op-chemin-select-label {
  display: grid;
  gap: 6px;
  font: 600 13px/1.2 var(--titre);
  color: var(--texte-doux);
}
.op-filiere-select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--bordure);
  background: var(--fond-carte, var(--carte));
  color: var(--texte);
  font: 600 15px/1.3 var(--titre);
}

.op-seance-exos li{margin:0 0 6px}

.rec-bio{color:var(--ok,#2a7a3a);font-weight:700}
.rec-filter-row{margin:8px 0}
.rec-filter-label{display:block;font-size:12px;font-weight:700;margin:0 0 4px;color:var(--texte-doux)}

.rec-browse-hint{margin:0 0 8px;font-size:13px;color:var(--texte-doux);line-height:1.4}
.al-check-list{display:grid;gap:6px;max-height:42vh;overflow:auto;padding:4px 0}
.al-check{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;border:1px solid var(--bordure);background:var(--fond-carte);cursor:pointer}
.al-check.is-on{border-color:var(--or);background:color-mix(in srgb, var(--or) 12%, var(--fond-carte))}
.al-check input{margin-top:3px;width:18px;height:18px;flex-shrink:0}
.al-check-corps{display:grid;gap:2px;min-width:0}
.al-check-corps b{font-size:14px;line-height:1.3}
.al-check-corps small{font-size:12px;color:var(--texte-doux)}
.carnet-rapide .carnet-jour-bar{margin-bottom:8px}

.ux-tip-ouverture{animation:none}
.coach-fil{display:grid;gap:10px;max-height:40vh;overflow:auto}
.coach-bulle{padding:10px 12px;border-radius:12px;border:1px solid var(--bordure)}
.coach-bulle.from-tonio{background:color-mix(in srgb,var(--or) 10%,var(--fond-carte))}
.coach-bulle.from-moi{background:var(--fond-carte)}
.coach-bulle-meta{font-size:11px;font-weight:700;color:var(--texte-doux);margin-bottom:4px}
.coach-stats-grid{display:grid;gap:10px}

/* Avatar Apple/IG : photo seule + badge crayon + lightbox */
.profil-avatar-row{display:flex;justify-content:flex-start;align-items:center;gap:14px;margin:8px 0 14px;flex-wrap:wrap}
.avatar-slot{display:inline-flex;position:relative;margin:0;align-items:center}
.avatar-tap{
  position:relative;padding:0;border:0;background:transparent;cursor:pointer;
  border-radius:50%;-webkit-tap-highlight-color:transparent;line-height:0;
}
.avatar-tap:focus-visible{outline:2px solid var(--or,#c9a24a);outline-offset:3px}
.avatar-preview{
  width:88px;height:88px;border-radius:50%;overflow:hidden;
  background:var(--fond-carte);border:2px solid var(--bordure);
  display:grid;place-items:center;pointer-events:none;
}
.avatar-preview img{width:100%;height:100%;object-fit:cover;display:block}
.avatar-placeholder{font-size:34px;opacity:.7}
.avatar-placeholder-lg{font-size:72px;opacity:.55}
.avatar-badge-edit{
  position:absolute;right:0;bottom:0;width:26px;height:26px;border-radius:50%;
  background:var(--or,#c9a24a);color:#0b0b0d;display:grid;place-items:center;
  border:2px solid var(--fond,#0b0b0d);box-shadow:0 1px 4px rgba(0,0,0,.4);
  pointer-events:none;
}
.avatar-badge-edit svg{display:block}
/* Legacy labels retirés du flux — gardés inertes si HTML ancien en cache */
.avatar-actions,.avatar-titre,.avatar-sous,.avatar-upload-btn{display:none!important}

.avatar-lightbox{
  position:fixed;inset:0;z-index:10050;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:max(16px,env(safe-area-inset-top)) 20px max(24px,env(safe-area-inset-bottom));
  animation:avatar-lb-in .22s ease;
}
@keyframes avatar-lb-in{from{opacity:0}to{opacity:1}}
.avatar-lightbox-scrim{position:absolute;inset:0;background:rgba(0,0,0,.88);cursor:pointer}
.avatar-lightbox-close{
  position:absolute;top:max(12px,env(safe-area-inset-top));right:14px;z-index:2;
  width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:1;
  display:grid;place-items:center;-webkit-tap-highlight-color:transparent;
}
.avatar-lightbox-close:focus-visible{outline:2px solid #fff;outline-offset:2px}
.avatar-lightbox-photo{
  position:relative;z-index:1;width:min(72vw,300px);aspect-ratio:1;border-radius:50%;
  overflow:hidden;background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.18);
  display:grid;place-items:center;box-shadow:0 12px 40px rgba(0,0,0,.45);
}
.avatar-lightbox-photo img{width:100%;height:100%;object-fit:cover;display:block}
.avatar-lightbox-actions{
  position:relative;z-index:1;margin-top:28px;display:flex;flex-direction:column;
  gap:10px;width:min(100%,280px);
}
.avatar-lightbox-actions .bouton{width:100%;justify-content:center;text-align:center}
.avatar-lb-danger{color:#ff7a7a!important;border-color:rgba(255,122,122,.4)!important}
@media (prefers-reduced-motion:reduce){.avatar-lightbox{animation:none}}
.suivi-titre-photo-avatar .avatar-slot{margin:0}
.suivi-titre-photo-avatar .avatar-preview{width:56px!important;height:56px!important}
.suivi-titre-photo-avatar .avatar-placeholder{font-size:22px}
.suivi-titre-photo-avatar .avatar-badge-edit{width:18px;height:18px;border-width:1.5px}
.suivi-titre-photo-avatar .avatar-badge-edit svg{width:9px;height:9px}



/* Combat hero: cover + cadrage sujet (moins plafond, pas d’étirement) — 19 sep 2026 */
.box-hero,
html[data-section="combat"] .box-hero,
html[data-registre="angulaire"] .box-hero {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 180px;
  max-height: 280px;
  background: #1a0c10;
}
.box-hero-img,
html[data-section="combat"] .box-hero-img,
html[data-registre="angulaire"] .box-hero-img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  /* portrait 1538×2047 : centre le sujet, coupe le plafond excessif */
  object-position: center 28% !important;
  aspect-ratio: auto !important;
  display: block;
  background: #1a0c10;
}
@media (max-width: 520px) {
  .box-hero,
  html[data-section="combat"] .box-hero {
    max-height: 220px;
    min-height: 160px;
  }
}


/* === Nutrition toolbar 2028 — verre, une ligne, pas de pile grise === */
.rec-toolbar-2028 {
  position: sticky; top: 0; z-index: 6;
  margin: 0 0 12px; padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--glass-border, var(--bordure, #333)) 80%, transparent);
  background: color-mix(in srgb, var(--glass-bg, var(--carte, var(--fond-carte, #1a1a1a))) 82%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: var(--elev-2, 0 8px 24px rgba(0,0,0,.2));
}
.rec-seg {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  padding: 3px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--texte, #fff) 6%, transparent);
}
.rec-seg-btn {
  appearance: none; border: 0; cursor: pointer;
  min-height: 40px; padding: 8px 6px;
  border-radius: 11px;
  background: transparent;
  color: var(--texte, #eee);
  font: 700 13px/1.2 var(--titre, system-ui);
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  touch-action: manipulation;
  position: relative;
}
.rec-seg-btn .rec-seg-ico { font-size: 14px; line-height: 1; opacity: .9; }
.rec-seg-btn.is-on,
.rec-seg-btn[aria-pressed="true"],
.rec-seg-btn.is-open {
  background: color-mix(in srgb, var(--or, var(--accent, #c9a227)) 28%, var(--carte, #222));
  color: var(--texte, #fff);
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 12%, transparent);
}
.rec-seg-btn.has-active:not(.is-open)::after {
  content: ""; position: absolute; top: 6px; right: 8px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--or, #c9a227);
}
.rec-seg-badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  font: 800 10px/18px system-ui; background: var(--or, #c9a227); color: #111;
}
.rec-toolbar-panels { margin-top: 8px; }
.rec-toolbar-panel {
  padding: 10px 4px 4px;
  border-top: 1px solid color-mix(in srgb, var(--texte, #fff) 8%, transparent);
  animation: recPanelIn .18s ease;
}
@keyframes recPanelIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
.rec-cats-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rec-cats-inline.puces, .rec-cats-inline {
  display: flex; flex-wrap: nowrap; gap: 8px; padding-bottom: 4px;
}
.rec-cats-inline .puce { flex: 0 0 auto; }
.rec-cats-autres { margin-top: 8px; }
.rec-filiere-row { margin-top: 8px; }
.rec-filters-glass { display: grid; gap: 12px; }
.rec-glass-section { display: grid; gap: 6px; }
.rec-glass-kicker {
  margin: 0; font: 700 11px/1 var(--titre, system-ui);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--texte-doux, #999);
}
.rec-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.rec-chip {
  appearance: none; cursor: pointer; touch-action: manipulation;
  min-height: 34px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--texte, #fff) 16%, transparent);
  background: color-mix(in srgb, var(--texte, #fff) 5%, transparent);
  color: var(--texte, #eee);
  font: 650 12px/1.2 system-ui, sans-serif;
}
.rec-chip.on, .rec-chip[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--or, #c9a227) 55%, transparent);
  background: color-mix(in srgb, var(--or, #c9a227) 32%, transparent);
  color: var(--texte, #fff);
  font-weight: 750;
}
.rec-glass-actions { display: flex; justify-content: flex-end; padding-top: 2px; }
/* Contraste thèmes clairs */
html[data-theme="clair"] .rec-toolbar-2028,
html[data-theme="light"] .rec-toolbar-2028,
html[data-theme="crystal-glass-light"] .rec-toolbar-2028,
html[data-theme="liquid-glass-light"] .rec-toolbar-2028 {
  background: color-mix(in srgb, var(--carte, #fff) 88%, transparent);
  border-color: color-mix(in srgb, var(--texte, #111) 12%, transparent);
}
html[data-theme="clair"] .rec-seg,
html[data-theme="light"] .rec-seg,
html[data-theme="crystal-glass-light"] .rec-seg,
html[data-theme="liquid-glass-light"] .rec-seg {
  background: color-mix(in srgb, var(--texte, #111) 6%, transparent);
}
html[data-theme="clair"] .rec-seg-btn.is-on,
html[data-theme="clair"] .rec-seg-btn[aria-pressed="true"],
html[data-theme="clair"] .rec-seg-btn.is-open,
html[data-theme="light"] .rec-seg-btn.is-on,
html[data-theme="light"] .rec-seg-btn[aria-pressed="true"],
html[data-theme="light"] .rec-seg-btn.is-open {
  background: color-mix(in srgb, var(--or, #c9a227) 35%, #fff);
  color: #111;
}
/* Masquer l’ancien hint gris si encore présent */
.rec-browse-hint { display: none !important; }
.rec-filters-compact:not(.rec-toolbar-panel) .rec-filter-label { display: none; }


/* === morpho-final-2026-09-19 — Suivi Morpho FINAL + Profil avatar gauche === */
.profil-avatar-row{
  display:flex!important;
  justify-content:flex-start!important;
  align-items:center!important;
  gap:14px!important;
  margin:8px 0 14px!important;
  flex-wrap:wrap;
}
.profil-avatar-meta{flex:1 1 auto;min-width:0;text-align:left}
.profil-avatar-meta .profil-kicker{margin:0 0 2px}
.profil-avatar-meta h1{margin:0 0 4px;font-size:26px;line-height:1.15}
.profil-avatar-meta .profil-filiere{margin:0}
.profil-identite .profil-avatar-row .avatar-preview{
  width:72px;height:72px;border-radius:50%;
}
.profil-identite .profil-avatar-row .avatar-tap{display:block}

.suivi-morpho-toolbar{
  display:flex;flex-wrap:wrap;gap:10px 14px;
  align-items:center;justify-content:space-between;
  margin:0 0 8px;padding:0 2px;
}
.suivi-morpho-seg-group{
  display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.suivi-morpho-seg-lab{
  font-size:10px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;
  color:var(--texte-doux,#a89890);margin-right:2px;
}
.suivi-morpho-seg{
  appearance:none;border:1px solid color-mix(in srgb,#E85D2A 35%,var(--bordure,#444));
  background:color-mix(in srgb,var(--carte,#161412) 88%,#E85D2A 6%);
  color:var(--texte,#F3E6D8);
  font-size:14px;font-weight:700;letter-spacing:.02em;
  padding:0 16px;border-radius:999px;min-height:44px;min-width:44px;
  cursor:pointer;line-height:1;
}
.suivi-morpho-seg.on,
.suivi-morpho-seg[aria-pressed="true"]{
  background:#E85D2A;
  border-color:#E85D2A;color:#1a120c;
  box-shadow:0 0 16px rgba(232,93,42,.35);
}
.suivi-morpho-seg:focus-visible{
  outline:2px solid #E85D2A;outline-offset:2px;
}
.suivi-morpho-cadre{
  /* overridden by Morpho APPLE morpho-apple-2026-09-19 in futur2030 — keep tall full-body */
  position:relative;width:100%;
  aspect-ratio:3/4;
  min-height:min(70vh,520px);
  max-height:none;
  border-radius:20px;overflow:hidden;background:#050605;
}
.suivi-muscle-fiche:not([hidden]){
  display:block!important;visibility:visible!important;opacity:1!important;
}

/* morpho-final profil avatar LEFT hard fix */
.profil-hq .profil-avatar-row,
.profil-identite .profil-avatar-row{
  display:flex!important;
  flex-direction:row!important;
  justify-content:flex-start!important;
  align-items:center!important;
  gap:14px!important;
  text-align:left!important;
}
.profil-hq .profil-avatar-row .avatar-slot,
.profil-identite .profil-avatar-row .avatar-slot{
  flex:0 0 auto!important;
  margin:0!important;
  display:inline-flex!important;
}
.profil-hq .profil-avatar-row .avatar-preview,
.profil-identite .profil-avatar-row .avatar-preview{
  width:72px!important;height:72px!important;border-radius:50%!important;
  display:block!important;
}
.profil-hq .profil-avatar-meta,
.profil-identite .profil-avatar-meta{
  flex:1 1 auto!important;
  min-width:0!important;
  text-align:left!important;
}
.profil-hq .profil-avatar-meta h1,
.profil-identite .profil-avatar-meta h1{margin:0 0 4px!important;text-align:left!important}

/* morpho-final profil ROW nowrap — avatar LEFT, titre à droite */
.profil-hq .profil-avatar-row,
.profil-identite .profil-avatar-row,
.profil-avatar-row{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  justify-content:flex-start!important;
  align-items:center!important;
  gap:14px!important;
}
.profil-hq .profil-avatar-row .avatar-slot,
.profil-identite .profil-avatar-row .avatar-slot{
  flex:0 0 72px!important;
  width:72px!important;
  max-width:72px!important;
}
.profil-hq .profil-avatar-meta,
.profil-identite .profil-avatar-meta,
.profil-avatar-meta{
  flex:1 1 auto!important;
  width:auto!important;
  max-width:calc(100% - 90px)!important;
  min-width:0!important;
}


/* FRONT 2 — hide orphan Affichage FAB under Exercices */
#btn-al-rapide { display: none !important; }
.metier-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
button.metier-pick.actif, button.metier-pick.is-selected { outline: none; }


/* VISUEL-MAX-2026-09-19 — motion polish (depth springs, no a11y break) */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="reduit"]):not([data-fx="leger"]) .ile-verre,
  html:not([data-motion="reduit"]):not([data-fx="leger"]) .carte.elevated,
  html:not([data-motion="reduit"]):not([data-fx="leger"]) .rec-card {
    transition:
      transform 240ms cubic-bezier(.22,.8,.28,1),
      box-shadow 280ms ease,
      border-color 220ms ease;
  }
  html:not([data-motion="reduit"]) .suivi-morpho-cadre {
    transition: box-shadow 320ms ease, border-color 280ms ease;
  }
  html:not([data-motion="reduit"]) .suivi-morpho-seg.on {
    transition: background 180ms ease, box-shadow 220ms ease, transform 180ms var(--spring-press-ease, cubic-bezier(.34,1.3,.64,1));
  }
}