/* ══════════════════════════════════════════════════════════════════════════════
   MES OUTILS NUMÉRIQUES — mise en page
   ══════════════════════════════════════════════════════════════════════════════

   Reprend la structure du portail ARENA que les collègues connaissent :
   des onglets de catégories colorés en haut, une grille de tuiles en dessous,
   chaque tuile portant une pastille et son libellé.

   Le panneau est posé sur une SURFACE CLAIRE, comme tous les autres. Le fond
   de page du tableau de bord est un dégradé sombre : y écrire directement,
   c'est le défaut qui a rendu le panneau SNT illisible.

   Toutes les couleurs de texte tiennent le niveau AA (4,5:1), vérifié par
   calcul dans scripts/test-liens-outils.js.
   ══════════════════════════════════════════════════════════════════════════════ */

#content-liens > div {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 16px;
  padding: 24px 22px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}
#content-liens h1 { color: #0f172a !important; font-size: 1.6rem; font-weight: 800; margin: 0 0 4px; }

/* ══════════════════════════════════════════════════════════════════════════
   ⚠️ NE JAMAIS ÉTENDRE CETTE RÈGLE AUX « span » NI AUX « div »

   Elle l'était : « #content-liens p, label, span, div { color: … } ». Un
   sélecteur avec IDENTIFIANT pèse (1,0,1) ; une classe comme
   « .lien-cat-actif span » ne pèse que (0,1,1). L'identifiant l'emporte, et
   « !important » des deux côtés n'y change rien.

   Conséquence observée le 18/08/2026 : l'onglet actif s'affichait comme un
   rectangle sombre SANS LIBELLÉ — texte #334155 sur fond #334155. Les autres
   onglets semblaient corrects par pur hasard, leur couleur voulue étant
   justement celle que la règle imposait.

   Le même piège touchait « .lien-nom », « .lien-averti » et les pastilles de
   comptage : toutes repeintes en gris, sans que rien ne le signale.

   Les balises génériques restent couvertes ; le reste appartient aux classes
   « .lien-… », qui savent ce qu'elles font.
   ══════════════════════════════════════════════════════════════════════════ */
#content-liens > div > p,
#content-liens label { color: #334155 !important; }
#content-liens strong, #content-liens b { color: #0f172a !important; }

/* ══════════════════════════════════════════════════════════════════════════
   BARRE D'ACCÈS RAPIDE — en haut du tableau de bord

   Cinq liens au plus, sous le bandeau du matin. Elle est masquée tant
   qu'aucun favori n'existe : une bande vide en haut de page ne ferait
   qu'occuper la place de ce que l'enseignant vient consulter.

   Elle vit HORS du panneau « Mes outils numériques », donc sur le fond
   sombre du tableau de bord — d'où sa propre surface claire.
   ══════════════════════════════════════════════════════════════════════════ */
/* ⚠️ « display: flex » ÉCRASE L'ATTRIBUT « hidden ».
   La feuille du navigateur pose « [hidden] { display: none } », mais toute
   règle d'auteur qui redéclare « display » l'emporte — et la barre restait
   affichée, vide, même quand aucun favori n'existait. Il faut donc rendre
   le masquage explicite, et prioritaire. */
/* 07/09/2026 — la marge basse vit désormais sur .lien-acces-rapide-ligne
   (le conteneur commun avec le bouton « Mes Raccourcis'), pas ici : sinon,
   favoris masqués, cette marge disparaissait avec eux et collait la ligne
   du bouton au bloc suivant. */
.lien-acces-rapide-ligne {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin: 0 0 24px;
}
.lien-raccourcis[hidden] { display: none !important; }
.lien-raccourcis {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  background: rgba(255, 255, 255, .95);
}
/* Bouton d'accès direct au carnet, TOUJOURS visible sur cette ligne — que
   des favoris existent ou non (voir le commentaire dans teacher-dashboard.html
   à l'endroit où il est posé). Couleur pleine, distincte des pastilles de
   favoris (.lien-rac, blanches) : ce n'est pas un raccourci de plus, c'est
   l'action qui ouvre le carnet qui les gère tous. */
.lien-ouvrir-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; min-height: 40px;
  border: 1px solid #4f46e5; border-radius: 999px;
  background: #4f46e5; color: #ffffff !important;
  font-family: inherit; font-size: .86rem; font-weight: 700;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, transform .09s ease;
}
.lien-ouvrir-btn:hover { background: #4338ca; border-color: #4338ca; }
.lien-ouvrir-btn:active { transform: scale(.985); }
.lien-ouvrir-btn:focus-visible { outline: 3px solid #c7d2fe; outline-offset: 2px; }
.lien-rac-titre {
  margin-right: 4px;
  color: #475569 !important;
  font-size: .74rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
}
.lien-rac {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #ffffff;
  text-decoration: none;
  min-height: 40px;
  transition: border-color var(--t-reponse, 90ms), box-shadow var(--t-entree, 200ms),
              transform var(--t-reponse, 90ms);
}
.lien-rac:hover { border-color: #6366f1; box-shadow: 0 3px 10px rgba(79, 70, 229, .16); }
.lien-rac:active { transform: scale(.985); }
.lien-rac-pastille {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border: 1.5px solid; border-radius: 8px;
  font-size: .68rem; font-weight: 800;
}
.lien-rac-nom {
  color: #0f172a !important;
  font-size: .86rem; font-weight: 700;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .lien-rac-nom { max-width: 8.5rem; overflow: hidden; text-overflow: ellipsis; }
}

/* ── Onglets de catégories ─────────────────────────────────────────────── */
.lien-cats {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 16px 0 18px;
}
.lien-cat {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px;
  border: 2px solid var(--cat, #475569);
  border-radius: 10px;
  background: #ffffff;
  color: var(--cat, #475569) !important;
  font-weight: 700; font-size: .9rem;
  cursor: pointer;
  min-height: 42px;
  transition: background var(--t-reponse, 90ms), color var(--t-reponse, 90ms);
}
.lien-cat:hover { background: color-mix(in srgb, var(--cat) 10%, #ffffff); }
/* Onglet actif : fond plein. Le blanc sur ces six teintes reste au-dessus
   de 4,5:1 — elles ont été choisies pour cela, pas au hasard. */
/* Préfixé par l'identifiant du panneau : sans cela, toute règle générique
   portant « #content-liens … » l'emporterait sur une simple classe, et le
   libellé blanc redeviendrait gris sur fond gris. */
#content-liens .lien-cat-actif {
  background: var(--cat, #475569) !important;
  color: #ffffff !important;
}
#content-liens .lien-cat-actif span,
#content-liens .lien-cat-actif .lien-cat-nb { color: #ffffff !important; }
/* 02/10/2026 — le même défaut est revenu : la règle « balai » de dashboard.css
   (« .tab-content span:not(…) ») a gagné un « :not(#…) » et pèse désormais
   (1,4,1), plus que la règle ci-dessus (1,1,1). L'onglet actif redevenait un
   rectangle sombre sans libellé. Deux identifiants la dépassent quoi qu'on
   ajoute à ses :not() de classes. */
#content-liens #liensCategories .lien-cat-actif span,
#content-liens #liensCategories .lien-cat-actif .lien-cat-nb { color: #ffffff !important; }
.lien-cat-nb {
  min-width: 22px; padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 16%, transparent);
  font-size: .78rem; font-weight: 800;
  color: inherit !important;
}

/* ── Grille de tuiles ──────────────────────────────────────────────────── */
.lien-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.lien-tuile {
  position: relative;
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  background: #f8fafc;
  transition: border-color var(--t-entree, 200ms), box-shadow var(--t-entree, 200ms),
              transform var(--t-reponse, 90ms);
}
.lien-tuile:hover {
  border-color: #6366f1;
  box-shadow: 0 4px 14px rgba(79, 70, 229, .16);
}
.lien-tuile:active { transform: scale(.985); }

.lien-cible {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 16px 10px 12px;
  text-decoration: none;
  text-align: center;
}
.lien-pastille {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  border: 2px solid;
  border-radius: 14px;
  font-weight: 800; font-size: 1.05rem;
  letter-spacing: .5px;
}
.lien-nom {
  color: #0f172a !important;
  font-weight: 700; font-size: .9rem; line-height: 1.25;
  overflow-wrap: anywhere;
}
.lien-domaine {
  color: #475569 !important;
  font-size: .74rem;
  overflow-wrap: anywhere;
}
/* Signale une adresse construite par motif, non vérifiée : mieux vaut le
   dire que laisser croire à une adresse officielle. */
.lien-averti {
  margin-top: 2px; padding: 2px 7px;
  border: 1px solid #b45309;
  border-radius: 999px;
  background: #fffbeb;
  color: #92400e !important;
  font-size: .68rem; font-weight: 800;
}

/* ── Actions d'une tuile ───────────────────────────────────────────────── */
.lien-actions {
  display: flex; justify-content: center; gap: 4px;
  padding: 0 8px 10px;
}
/* Les icônes sont des tracés SVG, pas des caractères : dashboard.css force
   sur tous les boutons une pile de polices (Inter + polices d'émojis) qui ne
   contient NI « ☆ » NI « ★ ». Le bouton restait donc vide, et paraissait
   inerte alors qu'il fonctionnait. « currentColor » relie le tracé à la
   couleur du bouton, y compris à l'état actif. */
.lien-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  background: #ffffff;
  color: #334155 !important;
  line-height: 1;
  cursor: pointer;
  /* dashboard.css met « overflow: hidden » sur tous les boutons : sans cela
     un tracé légèrement débordant serait rogné sans prévenir. */
  overflow: visible !important;
}
/* Dimension et couleur EXPLICITES, sans dépendre de « currentColor » ni de
   l'héritage : c'est ce qui a manqué à la première version, dont les tracés
   étaient créés mais jamais peints. Un maillon de moins entre l'intention
   et le pixel. */
.lien-btn svg {
  display: block;
  width: 17px; height: 17px;
  flex: 0 0 auto;
  overflow: visible;
  pointer-events: none;
}
.lien-btn svg path {
  fill: none;
  stroke: #334155;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Étoile pleine dès que le lien est en accès rapide : la différence doit se
   voir d'un coup d'œil, pas seulement à la teinte du fond. */
.lien-btn-actif svg path { fill: #facc15; stroke: #854d0e; }
.lien-btn-danger:hover svg path { stroke: #991b1b; }
.lien-btn:hover { border-color: #6366f1; background: #eef2ff; }
.lien-btn-actif { border-color: #ca8a04; background: #fefce8; color: #854d0e !important; }
.lien-btn-danger:hover { border-color: #dc2626; background: #fef2f2; color: #991b1b !important; }

/* ══════════════════════════════════════════════════════════════════════════
   BULLE D'INFORMATION

   Posée sur <body>, en « position: fixed » : la grille de tuiles la
   rognerait, et l'empilement des tuiles voisines la passerait dessus.

   Fond SOMBRE à dessein — une bulle claire sur une carte claire se confond
   avec elle, et on ne sait plus où finit le contenu et où commence l'aide.
   Blanc sur #0f172a : 17,9:1.

   « pointer-events: none » : sans cela, la bulle qui apparaît sous le
   curseur déclencherait un « mouseleave » sur la tuile, qui la masquerait,
   ce qui rendrait le curseur à la tuile… et la ferait clignoter sans fin.
   ══════════════════════════════════════════════════════════════════════════ */
.lien-bulle {
  position: fixed;
  z-index: 10050;
  max-width: 22rem;
  padding: 10px 13px;
  border-radius: 10px;
  background: #0f172a;
  color: #ffffff !important;
  font-size: .84rem;
  line-height: 1.5;
  white-space: pre-line;            /* la note et l'URL restent séparées */
  overflow-wrap: anywhere;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .3);
  pointer-events: none;
  animation: bulle-entree var(--t-entree, 200ms) var(--t-courbe, ease) both;
}
.lien-bulle[hidden] { display: none !important; }
@keyframes bulle-entree {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lien-bulle { animation: none; }
}

/* ── Formulaire et catalogue ───────────────────────────────────────────── */
.lien-form {
  margin: 0 0 18px; padding: 16px 18px;
  border: 2px solid #6366f1; border-radius: 14px;
  background: #eef2ff;
}
.lien-form label { display: block; font-weight: 700; margin: 10px 0 4px; color: #0f172a !important; }
.lien-form input, .lien-form select {
  width: 100%; padding: 9px 12px;
  border: 1.5px solid #94a3b8; border-radius: 9px;
  background: #ffffff; color: #0f172a !important;
  font-size: .95rem;
}
.lien-form .lien-aide { font-size: .8rem; color: #475569 !important; margin: 4px 0 0; }

.lien-catalogue {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 18px; padding: 14px 16px;
  border: 1px solid #cbd5e1; border-radius: 14px;
  background: #f8fafc;
}
.lien-propose {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 13px;
  border: 1px solid #94a3b8; border-radius: 999px;
  background: #ffffff;
  cursor: pointer; min-height: 38px;
}
.lien-propose:hover { border-color: #4f46e5; background: #eef2ff; }
.lien-propose-nom { color: #0f172a !important; font-weight: 700; font-size: .88rem; }
.lien-propose-url { color: #475569 !important; font-size: .76rem; }

.lien-vide {
  grid-column: 1 / -1;
  padding: 26px 16px;
  border: 1px dashed #94a3b8; border-radius: 12px;
  background: #f8fafc;
  color: #334155 !important;
  text-align: center; font-size: .92rem;
}

@media (max-width: 640px) {
  .lien-grille { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
  .lien-cat { font-size: .84rem; padding: 8px 12px; }
}