/* Styles propres à Judo Waza Generator, par-dessus assets/css/app.css.

   Parti pris de cette passe : de l'air. L'écran servait quinze pastilles de
   13 px, trois boutons et une carte serrée dans la même hauteur. On respire :
   un rythme vertical unique, des cibles tactiles d'au moins 44 px, et une
   hiérarchie qui se lit d'un coup d'œil — le nom de la technique domine tout
   le reste. */

/* Les couleurs de l'appli sont dans themes/light/light.css et
   themes/dark/dark.css : ici, seulement la mise en page. */

:root {
  --pile: 1.5rem;             /* respiration entre deux blocs */
  --pile-serree: 0.75rem;     /* entre deux éléments d'un même bloc */
}

/* ------------------------------------------------------------------ en-tête */

.hero { margin: 0 0 var(--pile); }

.hero__lede {
  margin: 0 0 0.875rem;
  max-width: 34rem;
  color: var(--ink-2);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.hero__lede strong { color: var(--ink); font-weight: 700; }

.faits {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1rem;
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  color: var(--ink-2);
}

.faits li { display: flex; align-items: baseline; gap: 0.3125rem; }

.faits b {
  color: var(--ink);
  font-weight: 800;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ filtres

   Deux rangées : le domaine, puis les familles de ce domaine seulement. La
   seconde rangée disparaît quand elle n'a rien à dire. */

.filtres {
  display: grid;
  gap: var(--pile-serree);
  margin: 0 0 var(--pile);
}

.filtres__rang { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.filtres__rang--sous {
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}

.filtres__rang[hidden] { display: none !important; }

/* Le choix multiple ne se devine pas : on le dit, et la même ligne sert
   ensuite à annoncer la taille du vivier une fois la sélection faite. */
.filtres__aide {
  margin: 0;
  font-size: 0.75rem;
  color: var(--ink-2);
}

.filtres__aide[hidden] { display: none !important; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

/* 44 px de haut : la hauteur en dessous de laquelle on rate la pastille une
   fois sur trois avec le pouce. */
.chip--grand {
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  font-size: 0.9375rem;
}

.chip--sous {
  min-height: 2.25rem;
  padding: 0.4375rem 0.8125rem;
  font-size: 0.8125rem;
}

.chip__nom { white-space: nowrap; }

.chip__n {
  font-size: 0.75em;
  font-weight: 700;
  opacity: 0.65;
  font-variant-numeric: tabular-nums;
}

.chip.is-actif {
  border-color: transparent;
  background: var(--brand-fill);
  color: var(--brand-ink);
}

.chip.is-actif .chip__n { opacity: 0.7; }
.chip.is-actif:active { transform: scale(0.97); }
.chip--hors { opacity: 0.6; border-style: dashed; }

@media (hover: hover) {
  .chip:hover { border-color: var(--brand); color: var(--brand); }
  .chip.is-actif:hover { color: var(--brand-ink); border-color: transparent; }
}

/* ------------------------------------------------------------------ actions */

.actions {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 var(--pile);
}

/* L'action principale prend toute la largeur : c'est celle qu'on cherche, et
   deux boutons côte à côte passaient sur deux lignes sur un téléphone. */
.btn--geste {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.875rem 1rem;
  border-radius: 16px;
  font-size: 1.0625rem;
  font-weight: 700;
}

.btn--geste svg { width: 1.125rem; height: 1.125rem; }
.btn--second { background: var(--surface); color: var(--ink); }

@media (min-width: 34rem) {
  .actions { grid-template-columns: 1.4fr 1fr; }
}

/* ------------------------------------------------------------------ mémoire */

.memoire {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 var(--pile);
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  font-size: 0.8125rem;
  color: var(--ink-2);
}

.memoire[hidden] { display: none !important; }

.memoire__titre {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.6875rem;
}

.memoire__liste { display: flex; flex-wrap: wrap; gap: 0.375rem; flex: 1 1 auto; }

.memoire__item {
  padding: 0.1875rem 0.5625rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
}

/* Le bouton vit là où il a du sens, et disparaît avec la mémoire : quand il
   n'y a rien à vider, il n'y a pas de bouton. */
.memoire__vider {
  flex: 0 0 auto;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

@media (hover: hover) {
  .memoire__vider:hover { color: var(--brand); border-color: var(--brand); }
}

/* ------------------------------------------------------------------ tirage */

.waza {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(70% 50% at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 72%),
    var(--surface);
  box-shadow: var(--shadow-1);
  padding: 1.5rem 1.375rem;
}

.waza[hidden] { display: none !important; }

.waza.is-neuf { animation: waza-entree 0.28s ease-out both; }

@keyframes waza-entree {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .waza.is-neuf { animation: none; }
}

.waza__famille {
  margin: 0 0 0.375rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-texte);
}

.waza__nom {
  margin: 0 0 0.5rem;
  font-size: clamp(1.625rem, 7.5vw, 2.375rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-wrap: balance;
}

.waza__sens { margin: 0; color: var(--ink-2); font-size: 1rem; line-height: 1.5; }

.waza__note {
  margin: 0.625rem 0 0;
  padding-left: 0.75rem;
  border-left: 2px solid var(--line-strong);
  color: var(--ink-2);
  font-size: 0.875rem;
}

.waza__figure {
  margin: 1.375rem 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
}

/* Hauteur bornée : certaines planches de Wikipédia sont très hautes et
   poussaient la légende hors de l'écran. */
.waza__figure img {
  width: 100%;
  max-height: 62svh;
  height: auto;
  object-fit: contain;
  display: block;
}

.waza__figure figcaption {
  padding: 0.625rem 0.875rem;
  border-top: 1px solid var(--line);
  font-size: 0.75rem;
  color: var(--ink-2);
}

.waza__figure figcaption a { color: inherit; }

.waza__attente,
.waza__absente {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--ink-2);
  font-size: 0.875rem;
}

/* ---------------------------------------------------------------- images

   Une fiche d'attaque montre l'attaque, puis les techniques de la réponse,
   chacune annoncée par son rôle et son nom. Sans ces étiquettes on regarde
   trois photos de judo sans savoir laquelle montre quoi.                     */

.images {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.images__titre {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.images__note {
  margin: 0 0 1.125rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ink-2);
}

.images__note strong { color: var(--ink); font-weight: 700; }

.vignette {
  margin: 0 0 1.125rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
}

.vignette:last-child { margin-bottom: 0; }

.vignette__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.vignette__role {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-texte);
}

.vignette__nom { font-size: 0.9375rem; font-weight: 700; color: var(--ink); }

/* Hauteur bornée : certaines planches de Wikipédia sont très hautes et
   poussaient la légende hors de l'écran. */
.vignette__zone img {
  width: 100%;
  max-height: 52svh;
  height: auto;
  object-fit: contain;
  display: block;
}

.vignette__source {
  display: block;
  padding: 0.5rem 0.875rem;
  border-top: 1px solid var(--line);
  font-size: 0.75rem;
  color: var(--ink-2);
}

.vignette__etat {
  margin: 0;
  padding: 2rem 1rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--ink-2);
}

/* ------------------------------------------------------------------- fiche */

.waza__code {
  display: inline-block;
  margin-right: 0.4375rem;
  padding: 0.125rem 0.5rem;
  border-radius: 8px;
  background: var(--accent-pastille);
  color: var(--ink);
  font-size: 0.55em;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}

.fiche { margin-top: 1.375rem; display: grid; gap: 0.625rem; }

.fiche p {
  margin: 0;
  padding: 0.9375rem 1rem;
  border-radius: var(--radius);
  background: var(--surface-2);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-2);
}

.fiche strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--ink);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fiche__rappel {
  background: transparent !important;
  padding: 0.25rem 0 0 !important;
  font-size: 0.875rem !important;
  opacity: 0.85;
}

/* ------------------------------------------------------------------ séries */

.serie { margin-top: 1.75rem; }

.serie__titre {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.serie__titre span { font-size: 0.6875rem; opacity: 0.7; }

.serie__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.serie__liste li + li { border-top: 1px solid var(--line); }

/* Chaque ligne ouvre sa fiche : c'est un bouton, pas du texte décoré. */
.serie__item {
  width: 100%;
  min-height: 3.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6875rem 0.875rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.serie__num {
  flex: 0 0 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-2);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.serie__texte { flex: 1 1 auto; min-width: 0; }
.serie__item strong { display: block; font-weight: 700; font-size: 0.9375rem; line-height: 1.3; }

.serie__item em {
  display: block;
  margin-top: 0.0625rem;
  font-style: normal;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--ink-2);
}

.serie__chevron { flex: 0 0 auto; color: var(--ink-2); font-size: 1.25rem; opacity: 0.5; }
.serie__item:active { background: var(--surface-2); }

@media (hover: hover) {
  .serie__item:hover { background: var(--surface-2); }
  .serie__item:hover strong { color: var(--brand); }
}

.serie__note { margin: 0.625rem 0 0; font-size: 0.875rem; color: var(--ink-2); }

/* ------------------------------------------------------------------- vide */

.vide {
  margin: 0;
  padding: 2.25rem 1.25rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  text-align: center;
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.vide[hidden] { display: none !important; }