https://hypnodingues.org/categories/technique/Recent content in Technique on HypnodinguesHugofr-CHMon, 20 Apr 2026 00:00:00 +0000https://hypnodingues.org/posts/2026-04-20-moocs/Mon, 20 Apr 2026 00:00:00 +0000https://hypnodingues.org/posts/2026-04-20-moocs/<style> .mooc-search { --panel: #f6f3ed; --panel-strong: #ebe3d4; --ink: #1c1a17; --muted: #6a6258; --line: #d9ccb8; --accent: #0f766e; --accent-strong: #115e59; margin: 2rem 0 3rem; color: var(--ink); } .mooc-search__intro { margin-bottom: 1.5rem; } .mooc-search__panel { background: linear-gradient(135deg, #f7f1e7 0%, #f1ede6 100%); border: 1px solid var(--line); border-radius: 18px; padding: 1.25rem; box-shadow: 0 20px 50px rgba(28, 26, 23, 0.08); } .mooc-search__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; } .mooc-search__input, .mooc-search__button { font: inherit; } .mooc-search__input { min-width: 0; border: 1px solid var(--line); border-radius: 12px; padding: 0.9rem 1rem; background: #fffdf8; color: var(--ink); } .mooc-search__button { border: 0; border-radius: 12px; padding: 0.9rem 1.2rem; background: var(--accent); color: #ffffff; cursor: pointer; font-weight: 700; } .mooc-search__button:hover, .mooc-search__button:focus-visible { background: var(--accent-strong); } .mooc-search__hint { margin: 0.85rem 0 0; color: var(--muted); font-size: 0.95rem; } .mooc-search__results { margin-top: 1.5rem; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .mooc-search__card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 1rem; display: grid; gap: 0.65rem; } .mooc-search__card h3 { margin: 0; font-size: 1.05rem; } .mooc-search__meta { margin: 0; color: var(--muted); font-size: 0.92rem; } .mooc-search__meta-link { color: inherit; text-decoration: underline; text-decoration-color: rgba(106, 98, 88, 0.45); word-break: break-word; } .mooc-search__meta-link:hover, .mooc-search__meta-link:focus-visible { color: var(--accent-strong); text-decoration-color: currentColor; background: transparent; } .mooc-search__actions { display: block; } .mooc-search__search-link { color: var(--accent-strong); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(17, 94, 89, 0.35); } .mooc-search__search-link:hover, .mooc-search__search-link:focus-visible { color: #0b3f3b; text-decoration-color: currentColor; background: transparent; } @media (max-width: 640px) { .mooc-search__form { grid-template-columns: 1fr; } } </style> <section class="mooc-search" aria-labelledby="mooc-search-title"> <div class="mooc-search__intro"> <h2 id="mooc-search-title">Chercher un MOOC sur plusieurs plateformes</h2> <p>Cette page genere des liens de recherche vers plusieurs catalogues de cours. Saisissez un sujet, puis lancez la recherche.</p>