/* ═══════════════════════════════════════════════════════════════════════
   BOUTIQUE DU PROFESSEUR — galerie des thèmes (26/09/2026)
   Logique : boutique-prof.js. Fonds des thèmes : habillages.css (généré).

   Deux règles de la page hôte s'imposent ici, et c'est voulu :
     · « .tab-content p » peint tout paragraphe en #2d3748 !important :
       les textes de la galerie restent donc sombres et lisibles ; seule la
       pastille d'état, qui porte data-couleurs, choisit sa teinte ;
     · tout bouton reçoit un texte blanc !important : les boutons de la
       galerie ont donc un fond soutenu (indigo, vert une fois appliqué),
       6,3:1 et 5,5:1 sur le blanc.
   ═══════════════════════════════════════════════════════════════════════ */
.boutique-prof-entete {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.boutique-prof-entete > div { max-width: 60rem; }
.boutique-prof-actif {
  /* Pas de flex-shrink: 0 : sur téléphone, la phrase de confirmation doit
     passer à la ligne plutôt que sortir de la carte (mesuré à 390 points). */
  max-width: 100%;
  margin: 0;
  padding: 7px 14px;
  border-radius: 14px;
  border: 1px solid #c7d2fe;
  background: #eef2ff;
  font-size: 14px;
  font-weight: 700;
  color: #312e81 !important;
}
.boutique-prof-actif.is-ok     { background: #ecfdf5; border-color: #6ee7b7; color: #065f46 !important; }
.boutique-prof-actif.is-erreur { background: #fef2f2; border-color: #fca5a5; color: #991b1b !important; }

.boutique-prof-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px;
}
.boutique-prof-carte {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  background: #ffffff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.boutique-prof-carte.is-actif {
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .18);
}

/* L'aperçu porte la même classe que le corps de la page (theme-<cle>) : il
   reçoit donc exactement le fond que le thème posera. */
.habillage-apercu {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88px;
  background: var(--bg-main);
  border-bottom: 1px solid #e2e8f0;
}
/* Le fond d'origine, tel que dashboard.css le déclare dans :root — sans ce
   rappel, l'aperçu « Par défaut » hériterait du thème en cours. */
.habillage-apercu.habillage-defaut {
  --bg-main: linear-gradient(135deg, #0f0e17 0%, #1a0033 100%);
}
.habillage-emoji {
  font-size: 34px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35));
}

.boutique-prof-infos { flex: 1; padding: 10px 12px 2px; }
.boutique-prof-nom  { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.3; }
.boutique-prof-desc { margin: 2px 0 0; font-size: 13px; line-height: 1.4; }
.boutique-prof-note { margin: 20px 0 0; font-size: 13px; }

.boutique-prof-bouton {
  margin: 8px 12px 12px;
  min-height: 42px;
  padding: 9px 12px;
  border: 0;
  border-radius: 10px;
  background: #4f46e5;
  font-size: 14px;
  cursor: pointer;
}
.boutique-prof-carte.is-actif .boutique-prof-bouton { background: #047857; cursor: default; }
.boutique-prof-bouton:disabled { opacity: .6; cursor: progress; }
.boutique-prof-bouton:focus-visible { outline: 3px solid #1e1b4b; outline-offset: 2px; }

@media (max-width: 690px) {
  .boutique-prof-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .habillage-apercu { height: 64px; }
  .boutique-prof-infos { padding: 8px 10px 0; }
  .boutique-prof-bouton { margin: 6px 10px 10px; }
}