/* Onglet élève « Mes cours ».
   Conçu pour le téléphone d'abord : cibles tactiles larges, une colonne, et
   des sections repliables pour que la liste reste parcourable au pouce. */

.cours-recherche {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 1rem;
}

.cours-recherche input[type="search"] {
  flex: 1;
  min-width: 12rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid #cbd2d9;
  border-radius: 8px;
  font-size: 1rem;
}

.cours-arbre {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.cours-section {
  background: #fff;
  border: 1px solid #e2e5ea;
  border-radius: 10px;
  overflow: hidden;
}

/* Section atteinte depuis « Revoir le cours » : l'ancre l'amène sous les yeux,
   le liseré dit laquelle des sections dépliées était visée. */
.cours-section.est-visee {
  border-color: #97C459;
  box-shadow: 0 0 0 2px rgba(151, 196, 89, 0.25);
}

.cours-section-entete {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 0.9rem;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 1.02rem;
}

.cours-section-entete::-webkit-details-marker { display: none; }

.cours-chevron {
  color: #6b7280;
  font-size: 0.8rem;
  transition: transform 0.15s ease;
}

.cours-section[open] > .cours-section-entete .cours-chevron {
  transform: rotate(90deg);
}

.cours-section-titre { flex: 1; }

.cours-compte {
  background: #f1f3f5;
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: #6b7280;
}

.cours-section-corps { padding: 0 0.9rem 0.8rem 1.5rem; }

.cours-section-desc {
  color: #6b7280;
  font-size: 0.92rem;
  margin: 0 0 0.6rem;
}

.cours-ressources {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.cours-ressource {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  /* 44 px de haut au minimum : c'est la taille d'un doigt. */
  padding: 0.6rem 0.4rem;
  border-radius: 8px;
}

.cours-ressource + .cours-ressource { border-top: 1px solid #f0f2f4; }

.cours-ressource-icone { font-size: 1.05rem; line-height: 1.4; }

.cours-ressource-corps { flex: 1; min-width: 0; }

.cours-lien {
  font-weight: 500;
  text-decoration: none;
  color: #1c4f9c;
}

.cours-lien:hover,
.cours-lien:focus { text-decoration: underline; }

.cours-meta {
  color: #6b7280;
  font-size: 0.8rem;
  margin-left: 0.4rem;
  white-space: nowrap;
}

.cours-note {
  margin: 0.15rem 0 0;
  font-size: 0.88rem;
  color: #6b7280;
}

.cours-contenu {
  margin: 0.4rem 0 0;
  padding: 0.6rem 0.7rem;
  background: #f6f8fa;
  border-radius: 6px;
  font-size: 0.85rem;
  overflow-x: auto;
  white-space: pre-wrap;
}

.cours-section.est-sous-section {
  border: none;
  border-left: 3px solid #e2e5ea;
  border-radius: 0;
  margin: 0.4rem 0 0;
  background: transparent;
}

.cours-section.est-sous-section > .cours-section-entete {
  padding: 0.5rem 0.5rem;
  font-size: 0.96rem;
}

.cours-section.est-sous-section > .cours-section-corps {
  padding: 0 0.5rem 0.4rem 1.1rem;
}

.cours-vide {
  color: #6b7280;
  padding: 1.5rem 0.5rem;
  text-align: center;
}

/* Pastille « Nouveau » — sept jours après le dépôt, elle s'éteint d'elle-même.
   Volontairement discrète : sur un chapitre déposé d'un coup, une couleur vive
   sur douze lignes ne désigne plus rien. */
.cours-pastille-nouveau {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: #e7f5ec;
  color: #0a6b3d;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  vertical-align: 0.05rem;
}

/* Vignette d'un lien : servie par ce serveur-ci, jamais par YouTube. */
.cours-vignette {
  width: 104px;
  height: 58px;
  object-fit: cover;
  border-radius: 6px;
  background: #f1f3f5;
  flex-shrink: 0;
}

/* Code coloré côté serveur — aucune bibliothèque chargée sur le téléphone. */
.cours-code {
  margin: 0.4rem 0 0;
  padding: 0.6rem 0.7rem;
  background: #f8f9fb;
  border: 1px solid #e2e5ea;
  border-radius: 6px;
  font-size: 0.82rem;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre;
}

.cours-code .cod-kw  { color: #b5006f; font-weight: 600; }
.cours-code .cod-str { color: #0a7c46; }
.cours-code .cod-com { color: #7a828c; font-style: italic; }
.cours-code .cod-num { color: #a2530a; }
.cours-code .cod-def { color: #1c4f9c; font-weight: 600; }
.cours-code .cod-bui { color: #6b3fa0; }
.cours-code .cod-dec { color: #a2530a; font-weight: 600; }

.cours-apercu { margin-top: 0.4rem; }

.cours-apercu > summary {
  cursor: pointer;
  color: #1c4f9c;
  font-size: 0.85rem;
}

.cours-apercu-coupe {
  color: #6b7280;
  font-size: 0.8rem;
  margin: 0.25rem 0 0;
}

/* La lecture confort agrandit tout le portail : les cours suivent. */
.lecture-confort .cours-section-entete { font-size: 1.15rem; }
.lecture-confort .cours-ressource { padding: 0.75rem 0.4rem; }
.lecture-confort .cours-note,
.lecture-confort .cours-meta { font-size: 0.95rem; }
.lecture-confort .cours-code { font-size: 0.95rem; }