/* Piclap — styles génériques.
   Règle : uniquement des variables --pl-* fournies par le thème (themes/theme-loader.js).
   Aucune couleur, police ou image ici : scripts/check-theme.sh le vérifie. */

*, *::before, *::after { box-sizing: border-box; }

/* Un élément marqué « hidden » reste caché, même si sa classe lui donne un display (flex, grid…). */
[hidden] { display: none !important; }

html {
  background: var(--pl-bg);
  color: var(--pl-text);
  font-family: var(--pl-font-body);
  font-size: calc(100% * var(--pl-scale, 1));
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

body { margin: 0; min-height: 100vh; }

h1, h2, h3, h4 {
  font-family: var(--pl-font-heading);
  font-weight: var(--pl-heading-weight);
  letter-spacing: var(--pl-heading-tracking);
  line-height: 1.1;
  margin: 0;
}

p { margin: 0; }

img { max-width: 100%; }

:focus-visible {
  outline: 3px solid var(--pl-focus);
  outline-offset: 3px;
}

.pl-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.pl-stack > * + * { margin-top: calc(var(--pl-spacing) * 2); }
.pl-row { display: flex; flex-wrap: wrap; gap: var(--pl-spacing); align-items: center; }

.pl-muted { color: var(--pl-text-muted); }
.pl-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pl-text-muted);
}

/* Boutons : cible tactile de 44 px minimum (PRD §4) */
.pl-btn {
  min-height: 44px;
  min-width: 44px;
  padding: calc(var(--pl-spacing) * 1.25) calc(var(--pl-spacing) * 2.5);
  border: 1px solid var(--pl-accent);
  border-radius: var(--pl-radius);
  background: var(--pl-accent);
  color: var(--pl-accent-contrast);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.pl-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pl-btn--ghost {
  background: transparent;
  color: var(--pl-text);
  border-color: var(--pl-border);
}
.pl-btn[aria-pressed="true"],
.pl-btn[aria-checked="true"] {
  background: var(--pl-accent);
  color: var(--pl-accent-contrast);
  border-color: var(--pl-accent);
}
.pl-btn--option {
  width: 100%;
  text-align: left;
  background: var(--pl-surface);
  color: var(--pl-text);
  border-color: var(--pl-border);
}

.pl-card {
  background: var(--pl-surface);
  border: 1px solid var(--pl-border);
  border-radius: var(--pl-radius);
  padding: calc(var(--pl-spacing) * 2);
}

.pl-inverse {
  background: var(--pl-inverse-bg);
  color: var(--pl-inverse-text);
}
.pl-inverse .pl-muted, .pl-inverse .pl-eyebrow { color: var(--pl-inverse-text-muted); }

/* Badges d'état */
.pl-badge {
  display: inline-block;
  padding: 2px calc(var(--pl-spacing) * 1);
  border-radius: var(--pl-radius);
  border: 2px solid currentColor;
  font-size: 0.8rem;
  font-weight: 700;
}
.pl-badge--success { color: var(--pl-success); }
.pl-badge--warning { color: var(--pl-warning); }
.pl-badge--danger  { color: var(--pl-danger); }

/* Barres de résultats */
.pl-bars { display: grid; gap: var(--pl-spacing); }
.pl-bar { display: grid; grid-template-columns: minmax(6rem, 1fr) 3fr 3rem; gap: var(--pl-spacing); align-items: center; }
.pl-bar__track { height: 1.25rem; background: var(--pl-surface); border: 1px solid var(--pl-border); border-radius: var(--pl-radius); overflow: hidden; }
.pl-bar__fill { height: 100%; border-radius: var(--pl-radius); }
.pl-bar__fill[data-series="1"] { background: var(--pl-chart-1); }
.pl-bar__fill[data-series="2"] { background: var(--pl-chart-2); }
.pl-bar__fill[data-series="3"] { background: var(--pl-chart-3); }
.pl-bar__fill[data-series="4"] { background: var(--pl-chart-4); }
.pl-bar__fill[data-series="5"] { background: var(--pl-chart-5); }
.pl-bar__fill[data-series="6"] { background: var(--pl-chart-6); }

/* QR code : toujours noir sur blanc, quel que soit le thème (PRD §4 et §6). */
.pl-qr {
  display: inline-grid;
  place-items: center;
  background: white;
  color: black;
  padding: 16px;
}

.pl-logo { display: block; height: 2.5rem; width: auto; }
.pl-logo-partner { height: 2rem; width: auto; }

@media (prefers-reduced-motion: no-preference) {
  .pl-bar__fill { transition: width 400ms ease; }
}