/* * Agenda de la formation. Valeurs reprises du handoff Claude Design * « Agenda APMT v2 » (couleurs, typographie, espacements). * Le tableau est un vrai , pour les lecteurs d'écran. * Sans JavaScript (pas de classe .js sur ), toutes les années sont * affichées en tableau et les contrôles sont masqués. */ .agenda { width: 100%; max-width: 960px; margin: 0 auto; padding: 80px 20px 100px; display: flex; flex-direction: column; gap: 32px; } .agenda button { cursor: pointer; transition: all .3s ease-in-out; } .agenda .agenda__header { display: flex; flex-direction: column; gap: 12px; max-width: 600px; } .agenda .agenda__rule { display: block; width: 60px; height: 1px; background: #EAD8C2; } .agenda .agenda__kicker { margin: 0; font-family: 'Suisse intl Medium', sans-serif; font-size: 14px; line-height: 21px; color: #8C6A3F; } .agenda .agenda__title { margin: 0; padding: 0; font-family: 'Euclid Flex Medium', sans-serif; font-size: 28px; line-height: 36px; color: #2673C1; } .agenda .agenda__lead { margin: 0; font-size: 16px; line-height: 24px; } /* Contrôles : visibles seulement avec JavaScript. */ .agenda .agenda__controls { display: none; flex-direction: column; gap: 16px; } .js .agenda .agenda__controls { display: flex; } .agenda .agenda__controls-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; } .agenda .agenda__years { display: flex; flex-wrap: wrap; gap: 8px; } .agenda .agenda__pill { padding: 6px 16px; border-radius: 60px; border: 1px solid #2673C1; background: #fff; color: #2673C1; font-family: 'Suisse intl Medium', sans-serif; font-size: 14px; line-height: 21px; } .agenda .agenda__pill.is-active { background: #2673C1; color: #fff; } .agenda .agenda__pill--year { padding: 10px 24px; font-size: 16px; line-height: 24px; } .agenda .agenda__switch { display: flex; border: 1px solid #2673C1; border-radius: 60px; padding: 3px; gap: 2px; } .agenda .agenda__switch button { padding: 6px 14px; border: none; border-radius: 60px; background: transparent; color: #2673C1; font-family: 'Suisse intl Medium', sans-serif; font-size: 14px; line-height: 21px; } .agenda .agenda__switch button.is-active { background: #2673C1; color: #fff; } .agenda .agenda__filters { display: none; flex-wrap: wrap; align-items: center; gap: 6px; } .agenda[data-vue="mois"] .agenda__filters { display: flex; } .agenda .agenda__filters-label { margin-right: 4px; font-size: 14px; line-height: 21px; color: #666; } /* Années : toutes visibles sans JavaScript, une seule avec. */ .agenda .agenda__annee { display: flex; flex-direction: column; gap: 32px; } .js .agenda .agenda__annee:not(.is-active) { display: none; } .agenda .agenda__annee-titre { margin: 0; font-family: 'Euclid Flex Medium', sans-serif; font-size: 22px; line-height: 28px; color: #1A4F85; } .js .agenda .agenda__annee-titre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); } /* Vues : tableau par défaut, liste avec JavaScript seulement. */ .agenda .agenda__months { display: none; } .js .agenda[data-vue="mois"] .agenda__months { display: flex; } .js .agenda[data-vue="mois"] .agenda__grid-wrap, .js .agenda[data-vue="mois"] .agenda__legend { display: none; } /* Vue « Par module » */ .agenda .agenda__grid-wrap { overflow-x: auto; box-shadow: 0 0 10px rgba(0, 0, 0, .17); } .agenda .agenda__grid { width: 100%; min-width: 900px; border-collapse: collapse; table-layout: fixed; } .agenda .agenda__grid th, .agenda .agenda__grid td { border-top: 1px solid #D6E6F5; } .agenda .agenda__grid-row--head th { padding: 12px 4px; border-top: none; background: #2673C1; color: #fff; text-align: center; font-family: 'Suisse intl Medium', sans-serif; font-weight: 400; font-size: 14px; line-height: 21px; } .agenda .agenda__grid .agenda__grid-module { position: sticky; left: 0; z-index: 1; width: 220px; padding: 14px 16px; background: #fff; border-right: 1px solid #D6E6F5; text-align: left; font-weight: 400; vertical-align: middle; } .agenda .agenda__grid-row--head .agenda__grid-module { padding: 12px 16px; background: #2673C1; border-right: none; } .agenda .agenda__grid-abbr { display: block; font-family: 'Suisse intl Bold', sans-serif; font-size: 15px; line-height: 21px; color: #1A4F85; letter-spacing: .04em; } .agenda .agenda__grid-name { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: #4A4A4A; } .agenda .agenda__cell { padding: 14px 4px; text-align: center; vertical-align: middle; font-family: 'Suisse intl Bold', sans-serif; font-size: 14px; line-height: 20px; color: #1A4F85; background: #fff; border-left: 1px solid #EEF4FA; } .agenda .agenda__cell.is-odd { background: #F6FAFD; } .agenda .agenda__cell.is-confirmed { background: #EAF3FB; } .agenda .agenda__cell.is-forecast { outline: 1px dashed #2673C1; outline-offset: -4px; } .agenda .agenda__cell.is-past { color: #767676; } .agenda .agenda__cell.is-past.is-confirmed { background: #F2F2F2; } .agenda .agenda__legend { margin: -16px 0 0; font-size: 14px; line-height: 21px; color: #666; } /* Vue « Par mois » */ .agenda .agenda__months { flex-direction: column; border-top: 1px solid #EAD8C2; } .agenda .agenda__month { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 8px 24px; padding: 20px 0; border-bottom: 1px solid #EAD8C2; } .agenda .agenda__month[hidden] { display: none; } .agenda .agenda__month-name { margin: 0; font-family: 'Euclid Flex Medium', sans-serif; font-size: 22px; line-height: 28px; color: #1A4F85; } .agenda .agenda__month-items { grid-column: span 3; min-width: 0; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; } .agenda .agenda__item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; color: #4A4A4A; } .agenda .agenda__item[hidden] { display: none; } .agenda .agenda__item.is-past { color: #767676; } .agenda .agenda__item-date { margin: 0; flex: 0 0 250px; font-family: 'Suisse intl Medium', sans-serif; font-size: 16px; line-height: 24px; color: inherit; } .agenda .agenda__badge { flex: none; width: 52px; padding: 2px 0; text-align: center; background: #EAF3FB; color: #1A4F85; font-family: 'Suisse intl Bold', sans-serif; font-size: 13px; line-height: 20px; letter-spacing: .04em; } .agenda .agenda__item-body { flex: 1 1 220px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 16px; line-height: 24px; } .agenda .agenda__tag { border: 1px dashed #2673C1; color: #2673C1; border-radius: 60px; padding: 0 10px; font-family: 'Suisse intl Medium', sans-serif; font-size: 13px; line-height: 20px; } .agenda .agenda__empty { margin: 0; padding: 24px 0; font-size: 16px; line-height: 24px; color: #666; } /* Pied de l'agenda */ .agenda .agenda__notes { display: flex; flex-direction: column; gap: 6px; } .agenda .agenda__notes p { margin: 0; font-size: 14px; line-height: 21px; color: #666; } .agenda .agenda__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid #EAD8C2; padding-top: 24px; } .agenda .agenda__footer p { margin: 0; } .agenda .agenda__cta { background: #2673C1; color: #fff; text-decoration: none; border-radius: 50px; padding: 12px 28px; font-family: 'Suisse intl Medium', sans-serif; font-size: 16px; box-shadow: 0 4px 12px rgba(0, 0, 0, .2); transition: all .3s ease-in-out; } .agenda .agenda__cta:hover, .agenda .agenda__cta:focus { background: #2F83D9; box-shadow: none; color: #fff; text-decoration: none; } @media (max-width: 768px) { .agenda { padding: 60px 0 80px; } } @media (max-width: 600px) { .agenda .agenda__item-date { flex-basis: auto; } }