/* =====================================================================
 * Page « Mes cours » — habillage rainbow (Quantum Depth).
 *
 * Reprend le design valide dans la maquette : les en-tetes de module,
 * jusqu'ici en aplats de couleur pleins, deviennent des tuiles sombres
 * surmontees d'une ligne lumineuse degradee. Le spectre avance d'un module
 * a l'autre (menthe -> cyan -> bleu -> indigo -> violet -> rose), en restant
 * dans la gamme froide du theme. Aucun script touche : CSS pur.
 * ===================================================================== */

/* --- En-tete de section : l'aplat plein laisse place a une tuile sombre - */
#root button.p-5.bg-gradient-to-r {
  position: relative;
  overflow: hidden;
  background-image: none !important;
  background-color: color-mix(in srgb, #020A18 82%, transparent) !important;
  border-bottom: 1px solid color-mix(in srgb, #63C7FF 16%, transparent);
}

/* La ligne lumineuse du haut, avec les trois teintes du module. */
#root button.p-5.bg-gradient-to-r::before {
  content: '';
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 100%;
  height: 0.18rem;
  background: linear-gradient(115deg, var(--m-a, #63C7FF), var(--m-b, #72FFD2) 48%, var(--m-c, #A77BFF));
  box-shadow: 0 0 1.8rem var(--m-b, #63C7FF);
}

/* Le carre d'icone reprend le degrade du module. */
#root button.p-5.bg-gradient-to-r .bg-white\/20 {
  background: linear-gradient(135deg, var(--m-a, #63C7FF), var(--m-c, #A77BFF)) !important;
  color: #04101F !important;
}

/* Le gros numero a droite prend la teinte claire du module. */
#root button.p-5.bg-gradient-to-r .text-4xl,
#root button.p-5.bg-gradient-to-r .text-3xl,
#root button.p-5.bg-gradient-to-r [class*="text-5xl"] {
  color: var(--m-b, #72FFD2) !important;
  opacity: 0.9;
}

/* --- Spectre : chaque couleur de module recoit sa tranche du degrade ---- */

#root button.p-5.from-blue-500 {
  --m-a: #72FFD2; --m-b: #3FD0E8; --m-c: #63C7FF;
}
#root button.p-5.from-emerald-500,
#root button.p-5.from-green-500,
#root button.p-5.from-teal-500 {
  --m-a: #3FD0E8; --m-b: #63C7FF; --m-c: #7C8CFF;
}
#root button.p-5.from-purple-500,
#root button.p-5.from-violet-500,
#root button.p-5.from-indigo-500 {
  --m-a: #63C7FF; --m-b: #7C8CFF; --m-c: #A77BFF;
}
#root button.p-5.from-red-500,
#root button.p-5.from-orange-500,
#root button.p-5.from-pink-500,
#root button.p-5.from-rose-500 {
  --m-a: #7C8CFF; --m-b: #A77BFF; --m-c: #FF8AD8;
}
#root button.p-5.from-amber-500,
#root button.p-5.from-yellow-500 {
  --m-a: #A77BFF; --m-b: #FF8AD8; --m-c: #72FFD2;
}

/* --- La section elle-meme : bordure du theme, fond sombre --------------- */
#root div.rounded-2xl.overflow-hidden:has(> button.p-5.bg-gradient-to-r) {
  border-color: color-mix(in srgb, #63C7FF 22%, transparent) !important;
  background: color-mix(in srgb, #020A18 79%, transparent);
  backdrop-filter: blur(16px);
}

/* Le titre du module reste lisible, aligne sur la police du theme. */
#root button.p-5.bg-gradient-to-r h2,
#root button.p-5.bg-gradient-to-r h3 {
  font-family: 'Sora', system-ui, sans-serif;
  letter-spacing: -0.02em;
}