/* PARTS Icon System v1.0.0
   Variantes : Sumi (défaut), Bento, Relief, Kirie.
   Aucune dépendance externe. */

:root {
  --pi-size: 1.25rem;
  --pi-size-card: 1.5rem;
  --pi-stroke: 1.75;
  --pi-ink: var(--ink, #1c2a3a);
  --pi-surface: var(--card, #ffffff);
  --pi-border: var(--line, rgba(28, 42, 58, .16));
  --pi-blue: #2469a8;
  --pi-blue-soft: #e7f0fa;
  --pi-red: #9f342d;
  --pi-red-soft: #f5e8e5;
  --pi-yellow: #b77a00;
  --pi-yellow-soft: #f7edd2;
  --pi-green: #4f7654;
  --pi-green-soft: #e7efe5;
  --pi-violet: #705c8c;
  --pi-violet-soft: #eee9f4;
  --pi-focus: #2e75bb;
}

[data-theme="dark"] {
  --pi-ink: var(--ink, #eaf1fa);
  --pi-surface: var(--card, #16273f);
  --pi-border: var(--line, rgba(234, 241, 250, .22));
  --pi-blue: #86b9ec;
  --pi-blue-soft: #213d5b;
  --pi-red: #e09a93;
  --pi-red-soft: #4c2b31;
  --pi-yellow: #e5be61;
  --pi-yellow-soft: #493e26;
  --pi-green: #a2c2a0;
  --pi-green-soft: #284331;
  --pi-violet: #c2acd9;
  --pi-violet-soft: #3d334d;
}

.pi {
  --pi-category: var(--pi-ink);
  --pi-category-soft: transparent;
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--pi-size);
  height: var(--pi-size);
  flex: 0 0 auto;
  color: var(--pi-category);
  vertical-align: -.16em;
}

.pi > svg {
  /* Correctif (2026-08-21) : `height:100%` ne se resout pas de facon fiable
     ici (bloc englobant indefini en hauteur dans un parent inline-grid en
     place-items:center) - l'icone retombait alors sur la hauteur par defaut
     d'un <svg> sans viewBox propre (150px), ecrasant la mise en page. Les 49
     icones du kit partagent toutes un viewBox carre (0 0 24 24) : fixer le
     ratio directement evite de dependre de cette resolution en pourcentage. */
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--pi-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.pi--card { --pi-size: var(--pi-size-card); }
.pi--sm { --pi-size: 1rem; }
.pi--lg { --pi-size: 2rem; }

/* Sumi : actions et commandes fonctionnelles. */
.pi--sumi { --pi-category: currentColor; }

/* Bento : navigation et catégories. Couleur sémantique stable, jamais seule. */
.pi--bento {
  box-sizing: content-box;
  padding: .45em;
  border-radius: 44% 56% 52% 48%;
  background: var(--pi-category-soft);
}
.pi[data-family="explore"] { --pi-category: var(--pi-blue); --pi-category-soft: var(--pi-blue-soft); }
.pi[data-family="body"] { --pi-category: var(--pi-red); --pi-category-soft: var(--pi-red-soft); }
.pi[data-family="insight"] { --pi-category: var(--pi-yellow); --pi-category-soft: var(--pi-yellow-soft); }
.pi[data-family="growth"],
.pi[data-family="ecology"] { --pi-category: var(--pi-green); --pi-category-soft: var(--pi-green-soft); }
.pi[data-family="record"],
.pi[data-family="consent"] { --pi-category: var(--pi-violet); --pi-category-soft: var(--pi-violet-soft); }
.pi[data-family="warning"] { --pi-category: var(--pi-red); --pi-category-soft: var(--pi-red-soft); }
.pi[data-family="success"] { --pi-category: var(--pi-green); --pi-category-soft: var(--pi-green-soft); }

/* Relief : uniquement les grandes cartes d’entrée et CTA importants. */
.pi--relief {
  box-sizing: content-box;
  padding: .55em;
  color: var(--pi-category);
  border: 1px solid var(--pi-border);
  border-radius: .8em;
  background: var(--pi-surface);
  box-shadow:
    0 .5em 1em -.65em rgba(15, 31, 48, .5),
    inset 0 1px 0 rgba(255, 255, 255, .65);
}
.pi--relief > svg {
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .7))
          drop-shadow(0 2px 1px rgba(15, 31, 48, .18));
}
[data-theme="dark"] .pi--relief {
  box-shadow:
    0 .5em 1em -.65em rgba(0, 0, 0, .7),
    inset 0 1px 0 rgba(255, 255, 255, .12);
}
[data-theme="dark"] .pi--relief > svg {
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .12))
          drop-shadow(0 2px 1px rgba(0, 0, 0, .4));
}

/* Kirie : marque, onboarding et célébrations. Jamais pour les outils denses. */
.pi--kirie {
  box-sizing: content-box;
  padding: .6em;
  color: var(--pi-ink);
}
.pi--kirie::before {
  content: "";
  position: absolute;
  inset: .08em;
  border-radius: 58% 42% 48% 52%;
  background: var(--pi-category-soft);
  transform: rotate(-6deg);
}
.pi--kirie > svg { --pi-stroke: 2.35; }

/* États : ne jamais coder l’état uniquement par la couleur. */
[aria-current="page"] .pi,
[aria-pressed="true"] .pi {
  outline: 2px solid currentColor;
  outline-offset: .18rem;
}
.icon-button {
  min-width: 2.75rem;
  min-height: 2.75rem;
}
.icon-button:focus-visible,
a:focus-visible .pi {
  outline: 3px solid var(--pi-focus);
  outline-offset: 3px;
}

@media (prefers-contrast: more) {
  .pi { --pi-stroke: 2.25; }
  .pi--bento,
  .pi--relief { border: 1px solid currentColor; }
}

@media (prefers-reduced-motion: reduce) {
  .pi,
  .pi::before { transition: none !important; animation: none !important; }
}