/* ---------- Thème ---------- */
/* Palette et tuiles reprises de games.lab.phil-flix.fr, pour que les deux
   sites se ressemblent. Les composants d'outils (chips, cartes, sheet)
   réutilisent les mêmes variables : l'état actif est toujours une inversion. */

:root {
  --bg: #0d0d0f;
  --bg-glow: #1a1a20;
  --tile: #161619;
  --tile-hover: #ffffff;
  --border: #2a2a30;
  --border-hover: #ffffff;
  --icon: #8f8f99;
  --icon-hover: #0d0d0f;
  --text: #f2f2f4;
  --text-dim: #7c7c86;
  --overlay: rgb(0 0 0 / 0.65);
  --radius: 20px;
  --radius-sm: 13px;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f4f4f5;
    --bg-glow: #ffffff;
    --tile: #ffffff;
    --tile-hover: #111114;
    --border: #e0e0e4;
    --border-hover: #111114;
    --icon: #6b6b75;
    --icon-hover: #ffffff;
    --text: #111114;
    --text-dim: #76767f;
    --overlay: rgb(0 0 0 / 0.35);
  }
}

/* ---------- Base ---------- */

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

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  background-image: radial-gradient(ellipse 80% 55% at 50% -10%, var(--bg-glow), transparent 70%);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  white-space: nowrap; /* pas de césure au milieu d'un nom de domaine */
}

.hidden { display: none !important; }

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

/* ---------- Page hub ---------- */

.page--hub {
  padding: clamp(2rem, 8vw, 5rem) clamp(1rem, 5vw, 3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2.5rem, 7vw, 4.5rem);
}

/* width:100% évite qu'un enfant flex garde sa largeur intrinsèque
   et déborde horizontalement sur les petits écrans */
.header,
.page--hub main {
  width: 100%;
}

.header {
  text-align: center;
  max-width: 40rem;
}

.header__title {
  margin: 0;
  font-size: clamp(2.25rem, 9vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}

.header__subtitle {
  margin: 0.9rem 0 0;
  color: var(--text-dim);
  font-size: clamp(0.9rem, 3vw, 1rem);
  line-height: 1.6;
}

/* ---------- Grille d'outils ---------- */

.tools {
  list-style: none;
  margin-block: 0;
  margin-inline: auto; /* garde la grille centrée une fois max-width atteinte */
  padding: 0;
  width: 100%;
  max-width: 62rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.25rem, 4vw, 2rem);
}

/* Les tuiles s'étirent pour remplir la ligne, sans jamais devenir énormes */
.tools > li {
  flex: 1 1 8rem;
  max-width: 11rem;
}

.tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  text-decoration: none;
  color: inherit;
  outline: none;
}

.tool__icon {
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 22%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--tile);
  color: var(--icon);
  transition:
    transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1),
    background-color 0.28s ease,
    border-color 0.28s ease,
    color 0.28s ease,
    box-shadow 0.28s ease;
}

.tool__icon svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.tool__name {
  font-size: clamp(0.85rem, 2.6vw, 0.95rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--text-dim);
  transition: color 0.28s ease;
}

.tool:hover .tool__icon,
.tool:focus-visible .tool__icon {
  transform: translateY(-6px);
  background: var(--tile-hover);
  border-color: var(--border-hover);
  color: var(--icon-hover);
  box-shadow: 0 14px 32px -12px rgb(0 0 0 / 0.55);
}

.tool:hover .tool__icon svg,
.tool:focus-visible .tool__icon svg { transform: scale(1.08); }

.tool:hover .tool__name,
.tool:focus-visible .tool__name { color: var(--text); }

.tool:focus-visible .tool__icon {
  outline: 2px solid var(--border-hover);
  outline-offset: 4px;
}

.tool:active .tool__icon { transform: translateY(-2px) scale(0.98); }

/* ---------- Pied de page ---------- */

.footer {
  margin-top: auto;
  padding-top: 2rem;
  color: var(--text-dim);
  font-size: 0.8rem;
  opacity: 0.7;
}

/* ---------- Page outil ---------- */

/* padding-bottom : réserve la place de la barre d'action fixe, plus la
   safe-area des iPhone. Sans ça, la dernière carte passe sous le bouton. */
.page--tool {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 0.75rem clamp(0.9rem, 4vw, 1.5rem) calc(6.5rem + env(safe-area-inset-bottom));
  max-width: 40rem;
  margin-inline: auto;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
}

.topbar__title {
  margin: 0;
  flex: 1;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ---------- Boutons ronds (retour, réglages, reroll) ---------- */

.iconbtn {
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--tile);
  color: var(--icon);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.iconbtn svg {
  width: 1.15rem;
  height: 1.15rem;
}

.iconbtn:hover,
.iconbtn:focus-visible {
  background: var(--tile-hover);
  border-color: var(--border-hover);
  color: var(--icon-hover);
}

.iconbtn:active { transform: scale(0.94); }

/* ---------- Chips ---------- */

/* Liste horizontale scrollable : les presets et les filtres tiennent sur une
   ligne quel que soit leur nombre. Les marges négatives laissent le scroll
   aller jusqu'aux bords de l'écran malgré le padding de la page. */
.chips {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

/* Les chips défilent d'un bord à l'autre de l'écran : les marges négatives
   annulent le padding de la page, le padding interne le rétablit devant la
   première chip. C'est overflow-x qui contient le dépassement — vérifié :
   le document ne scrolle pas horizontalement, de 320px à 768px.
   padding-block laisse la place à l'anneau de focus, qu'overflow-x rognerait. */
.chips--scroll {
  --fade: 1.75rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  margin-inline: calc(-1 * clamp(0.9rem, 4vw, 1.5rem));
  padding-inline: clamp(0.9rem, 4vw, 1.5rem);
  padding-block: 0.4rem;
  scroll-padding-inline: clamp(0.9rem, 4vw, 1.5rem);
}

.chips--scroll::-webkit-scrollbar { display: none; }

.chip {
  flex: none;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--tile);
  color: var(--text-dim);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.chip:hover,
.chip:focus-visible {
  border-color: var(--border-hover);
  color: var(--text);
}

.chip[aria-pressed="true"],
.chip[aria-selected="true"] {
  background: var(--tile-hover);
  border-color: var(--border-hover);
  color: var(--icon-hover);
}

/* Indices de défilement (classes posées par suivreDefilement(), commun.js) :
   le bord s'estompe et une flèche apparaît, du seul côté où il reste des chips.
   Sans JS : ni fade ni flèche, mais la bande reste défilable au doigt.
   Un masque plutôt qu'un dégradé de couleur : il se fond dans le halo du fond,
   qui n'est pas uni. */
.chipsbar {
  position: relative;
}

.chipsbar--debut .chips--scroll {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade));
  mask-image: linear-gradient(to right, transparent, #000 var(--fade));
}

.chipsbar--fin .chips--scroll {
  -webkit-mask-image: linear-gradient(to left, transparent, #000 var(--fade));
  mask-image: linear-gradient(to left, transparent, #000 var(--fade));
}

.chipsbar--debut.chipsbar--fin .chips--scroll {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
}

/* La flèche flotte au-dessus de la zone estompée, donc au-dessus d'une chip
   coupée : c'est précisément celle qu'un appui va révéler.
   Centrage par `margin-block: auto` entre top et bottom, et non par transform :
   .iconbtn:active applique un scale() qui écraserait un transform de centrage. */
.chipsbar__fleche {
  position: absolute;
  top: 0;
  bottom: 0;
  margin-block: auto;
  width: 2.15rem;
  height: 2.15rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.chipsbar__fleche svg { width: 0.95rem; height: 0.95rem; }

.chipsbar__fleche--gauche { left: -0.35rem; }

.chipsbar__fleche--droite { right: -0.35rem; }

/* même chevron des deux côtés : on retourne l'icône, pas le bouton */
.chipsbar__fleche--droite svg { transform: scaleX(-1); }

.chipsbar--debut .chipsbar__fleche--gauche,
.chipsbar--fin .chipsbar__fleche--droite {
  opacity: 1;
  pointer-events: auto;
}

/* ---------- Cartes de résultat ---------- */

.cards {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--tile);
  padding: 1.05rem 1.15rem 1.15rem;
}

.card__label {
  margin: 0 3rem 0.5rem 0; /* laisse la place du bouton reroll */
  color: var(--text-dim);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.card__text {
  margin: 0;
  overflow-wrap: break-word;
  font-size: 1.05rem;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.card__reroll {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  width: 2.3rem;
  height: 2.3rem;
}

.card__reroll svg { width: 1.05rem; height: 1.05rem; }

.empty {
  margin: 0;
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ---------- Barre d'action ---------- */

.actionbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  padding: 0.85rem clamp(0.9rem, 4vw, 1.5rem) calc(0.85rem + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 55%, transparent);
}

.actionbar__inner {
  display: flex;
  align-items: stretch;
  gap: 0.6rem;
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
}

/* Action secondaire : même hauteur que le bouton principal, mais discrète
   (fond de tuile au lieu de l'inversion) et carrée pour ne rien lui voler. */
.actionbar__secondary {
  flex: none;
  width: 3.5rem;
  height: auto;
  border-radius: var(--radius);
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 3.5rem;
  padding: 0 1.25rem;
  border: 1px solid var(--border-hover);
  border-radius: var(--radius);
  background: var(--tile-hover);
  color: var(--icon-hover);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.2s ease;
}

.btn:active { transform: scale(0.985); }

.btn--ghost {
  background: var(--tile);
  border-color: var(--border);
  color: var(--text);
  font-weight: 500;
  min-height: 3rem;
  font-size: 1rem;
}

.btn--ghost:hover,
.btn--ghost:focus-visible { border-color: var(--border-hover); }

/* Le hub remplace l'outline bleu du navigateur par un anneau blanc (voir .tool) :
   les composants d'outils font pareil, sinon le focus clavier jure avec le thème.
   La bordure/inversion suffit à la souris, l'anneau sert au clavier. */
.chip:focus-visible,
.iconbtn:focus-visible,
.btn:focus-visible,
.card__reroll:focus-visible,
.exo:focus-visible {
  outline: 2px solid var(--border-hover);
  outline-offset: 3px;
}

/* ---------- Bottom sheet ---------- */

.sheet {
  width: 100%;
  max-width: 34rem;
  margin: auto auto 0;
  padding: 0;
  border: none;
  background: transparent;
}

.sheet::backdrop { background: var(--overlay); }

.sheet__panel {
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--bg);
  padding: 1.25rem clamp(1rem, 4vw, 1.5rem) calc(1.25rem + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: 85dvh;
  overflow-y: auto;
}

.sheet__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.sheet__hint {
  margin: -0.5rem 0 0;
  color: var(--text-dim);
  font-size: 0.85rem;
  line-height: 1.5;
}

.sheet__group {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.sheet__grouplabel {
  color: var(--text-dim);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* Le CSS du navigateur donne au dialog modal `inset: 0` + `margin: auto` avec
   une hauteur fit-content : c'est ce qui fait fonctionner le `margin: auto auto 0`
   de .sheet, qui colle le panneau en bas. Ne pas donner de hauteur au dialog —
   elle annule le fit-content et le panneau remonte en haut de l'écran (vérifié
   en mesurant sa position : bas du panneau == bas de la fenêtre). */
dialog.sheet[open] {
  display: flex;
  flex-direction: column;
}

/* ---------- Exercices ---------- */

.count {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.82rem;
}

.exos {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.exo {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--tile);
  color: inherit;
  padding: 1rem 1.1rem;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.exo:hover,
.exo:focus-visible { border-color: var(--border-hover); }

.exo:active { transform: scale(0.99); }

.exo__title {
  margin: 0 0 0.4rem;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.35;
}

.exo__meta {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.82rem;
  line-height: 1.5;
}

/* ---------- Fiche exercice ---------- */

.fiche__title {
  margin: 0 0 1.25rem;
  font-size: clamp(1.4rem, 6vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.fiche__section {
  border-top: 1px solid var(--border);
  padding: 1rem 0;
}

.fiche__label {
  margin: 0 0 0.4rem;
  color: var(--text-dim);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.fiche__text {
  margin: 0;
  overflow-wrap: break-word;
  font-size: 1rem;
  line-height: 1.6;
}

.fiche__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fiche__tag {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  color: var(--text-dim);
  font-size: 0.78rem;
}

/* ---------- Accessibilité ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .tool:hover .tool__icon,
  .tool:focus-visible .tool__icon,
  .tool:hover .tool__icon svg,
  .tool:focus-visible .tool__icon svg,
  .tool:active .tool__icon,
  .btn:active,
  .exo:active,
  .iconbtn:active { transform: none; }
}

/* Sur écrans tactiles, pas d'état de survol persistant */
@media (hover: none) {
  .tool:hover .tool__icon {
    transform: none;
    background: var(--tile);
    border-color: var(--border);
    color: var(--icon);
    box-shadow: none;
  }

  .tool:hover .tool__name { color: var(--text-dim); }

  .iconbtn:hover {
    background: var(--tile);
    border-color: var(--border);
    color: var(--icon);
  }
}

/* Animation de tirage : signale qu'une carte vient de changer.
   (neutralisée par prefers-reduced-motion juste en dessous) */
@keyframes card-flash {
  from { opacity: 0.25; transform: translateY(4px); }
  to   { opacity: 1;    transform: none; }
}

.card--flash { animation: card-flash 0.26s cubic-bezier(0.2, 0.7, 0.3, 1); }

@media (prefers-reduced-motion: reduce) {
  .card--flash { animation: none; }
}

/* Page outil sans barre d'action fixe (exercices) : pas de place à réserver. */
.page--tool.page--nobar {
  padding-bottom: calc(2rem + env(safe-area-inset-bottom));
}

/* Bouton rond signalant un état actif (des filtres sont posés). */
.iconbtn--on {
  background: var(--tile-hover);
  border-color: var(--border-hover);
  color: var(--icon-hover);
}

/* La sheet de filtres empile plusieurs groupes : on annule l'espacement
   serré hérité de .sheet__group utilisé comme conteneur. */
#groupes-filtres {
  gap: 1.1rem;
}