/*
 * Papillote — cartes : carte simple, carte d'activité (une couleur par type), carte de modèle,
 * carte d'atout. La couleur d'une activité passe par --pa-tone (forte) et --pa-tone-soft (teinte).
 */

.pa-card {
  background: var(--pa-surface);
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-radius-lg);
  padding: var(--pa-space-6);
  box-shadow: var(--pa-shadow-1);
}

/* Couleurs par type d'activité */
[data-tone="raspberry"] { --pa-tone: var(--pa-raspberry); --pa-tone-soft: var(--pa-raspberry-soft); }
[data-tone="lagoon"] { --pa-tone: var(--pa-lagoon); --pa-tone-soft: var(--pa-lagoon-soft); }
[data-tone="gold"] { --pa-tone: var(--pa-gold-ink); --pa-tone-soft: var(--pa-gold-soft); }
[data-tone="violet"] { --pa-tone: var(--pa-violet); --pa-tone-soft: var(--pa-violet-soft); }
[data-tone="mint"] { --pa-tone: var(--pa-mint); --pa-tone-soft: var(--pa-mint-soft); }
[data-tone="indigo"] { --pa-tone: var(--pa-indigo); --pa-tone-soft: var(--pa-indigo-soft); }
[data-tone="plum"] { --pa-tone: var(--pa-plum); --pa-tone-soft: var(--pa-plum-soft); }
[data-tone="slate"] { --pa-tone: var(--pa-slate); --pa-tone-soft: var(--pa-slate-soft); }

/* Une couleur par type de question, partout où il apparaît (recette, plan de l'atelier) */
[data-qtype="choice"] { --pa-qtype: var(--pa-raspberry); --pa-qtype-soft: var(--pa-raspberry-soft); }
[data-qtype="multiple-choice"] { --pa-qtype: var(--pa-violet); --pa-qtype-soft: var(--pa-violet-soft); }
[data-qtype="drag-and-drop"] { --pa-qtype: var(--pa-gold-ink); --pa-qtype-soft: var(--pa-gold-soft); }
[data-qtype="swipe"] { --pa-qtype: var(--pa-mint); --pa-qtype-soft: var(--pa-mint-soft); }
[data-qtype="reorder"] { --pa-qtype: var(--pa-lagoon); --pa-qtype-soft: var(--pa-lagoon-soft); }
[data-qtype="dropdown-list"] { --pa-qtype: var(--pa-indigo); --pa-qtype-soft: var(--pa-indigo-soft); }

/* Pictogrammes : aplats dans la couleur de la carte */
.pa-picto .pa-picto-fill { fill: currentColor; fill-opacity: 0.16; }
.pa-picto .pa-picto-fill-strong { fill: currentColor; fill-opacity: 0.9; }
.pa-picto .pa-picto-dot { fill: var(--pa-tone-soft, var(--pa-surface)); stroke: none; }
.pa-picto .pa-picto-on-strong { stroke: var(--pa-tone-soft, var(--pa-surface)); }

/* Grille du catalogue d'activités */
.pa-grid-activities {
  display: grid;
  gap: var(--pa-space-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}

/* Carte d'activité du catalogue */
.pa-activity {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--pa-space-3);
  padding: var(--pa-space-5);
  border-radius: var(--pa-radius-lg);
  background: var(--pa-tone-soft);
  color: var(--pa-ink);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--pa-duration-base) var(--pa-ease-out), box-shadow var(--pa-duration-base) var(--pa-ease-out);
}

.pa-activity::after {
  content: "";
  position: absolute;
  inset: auto -30% -55% auto;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--pa-tone);
  opacity: 0.08;
  z-index: -1;
}

.pa-activity:hover {
  transform: translateY(-4px) rotate(-0.4deg);
  box-shadow: var(--pa-shadow-3);
}

.pa-activity__picto {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 22px;
  background: var(--pa-surface);
  color: var(--pa-tone);
  box-shadow: var(--pa-shadow-1);
}

.pa-activity__name {
  font-size: var(--pa-text-xl);
  color: var(--pa-tone);
}

.pa-activity__use {
  color: var(--pa-ink);
  font-size: var(--pa-text-md);
}

.pa-activity__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pa-space-2);
  margin-top: var(--pa-space-2);
}

.pa-activity__actions .pa-button--quiet {
  --pa-button-bg: var(--pa-surface);
  --pa-button-border: transparent;
}

.pa-activity__actions .pa-button {
  --pa-button-bg: var(--pa-tone);
  --pa-button-ink: var(--pa-tone-soft);
  --pa-button-shadow: none;
}

.pa-activity__actions .pa-button.pa-button--quiet {
  --pa-button-bg: var(--pa-surface);
  --pa-button-ink: var(--pa-ink);
}

/* Carte de modèle de formation */
.pa-model {
  display: grid;
  border-radius: var(--pa-radius-xl);
  background: var(--pa-surface);
  border: 1px solid var(--pa-line);
  overflow: hidden;
  box-shadow: var(--pa-shadow-2);
  transition: transform var(--pa-duration-base) var(--pa-ease-out), box-shadow var(--pa-duration-base) var(--pa-ease-out);
}

.pa-model:hover {
  transform: translateY(-4px);
  box-shadow: var(--pa-shadow-3);
}

.pa-model__cover {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--pa-tone-soft);
  color: var(--pa-tone);
  overflow: hidden;
}

.pa-model__cover svg {
  width: 100%;
  height: 100%;
}

.pa-model__body {
  display: grid;
  gap: var(--pa-space-3);
  padding: var(--pa-space-5) var(--pa-space-6) var(--pa-space-6);
}

.pa-model__title {
  font-size: var(--pa-text-xl);
}

.pa-model__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pa-space-2) var(--pa-space-4);
  color: var(--pa-ink-soft);
  font-size: var(--pa-text-sm);
}

.pa-model__meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Carte d'atout (libre, souverain, compatible) */
.pa-feature {
  display: grid;
  gap: var(--pa-space-3);
  align-content: start;
}

.pa-feature__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--pa-tone-soft);
  color: var(--pa-tone);
}

.pa-feature h3 {
  font-size: var(--pa-text-xl);
}

.pa-feature p {
  color: var(--pa-ink-soft);
}

/* Sur téléphone : carte d'activité en ligne, pictogramme à gauche, pour garder le catalogue court */
@media (max-width: 599px) {
  .pa-activity {
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto;
    column-gap: var(--pa-space-4);
    row-gap: var(--pa-space-1);
    align-items: start;
  }

  .pa-activity__picto {
    grid-row: span 3;
    width: 56px;
    height: 56px;
    border-radius: 18px;
  }

  .pa-activity__picto .pa-picto {
    width: 38px;
    height: 38px;
  }

  .pa-activity__name {
    font-size: var(--pa-text-lg);
  }

  .pa-activity__use {
    font-size: var(--pa-text-sm);
  }
}