/* * MACFR Academy — habillage MY ALL COURSES * ------------------------------------------------------------------------- * L'identité vient du logo : une maison dessinée d'un seul trait orange épais * aux angles arrondis, qui ne se referme jamais ; une toque bleue ; une * fenêtre de quatre carreaux vert olive. * * Trois motifs structurent toute l'interface : * 1. LE TRAIT — un filet orange longe le bord et tourne l'angle inférieur, * exactement comme le trait du logo. * 2. LA FENÊTRE — la progression se remplit carreau par carreau. * 3. LA TOQUE — le bleu ne sert qu'au direct et à ce qui se passe maintenant. * * Techniques : couches de cascade (@layer) pour ne jamais entrer en conflit avec * le thème, requêtes de conteneur pour que les cartes s'adaptent à leur * emplacement et non à l'écran, propriétés logiques pour un basculement RTL * immédiat en arabe, color-mix() pour dériver toutes les teintes de la couleur * réglée dans l'administration, mode sombre, et transitions de vue entre leçons * quand le navigateur les prend en charge. */ @layer macfr.tokens, macfr.base, macfr.layout, macfr.components, macfr.state; /* ========================================================================= * 1. Jetons * ====================================================================== */ @layer macfr.tokens { /* Surchargées par Académie ▸ Réglages via un style en ligne. */ :root { --macfr-orange: #D2540B; --macfr-blue: #0B47B0; --macfr-olive: #3C5A0E; } .macfr { /* Couleurs du logo */ --macfr-brand: var(--macfr-orange); --macfr-live: var(--macfr-blue); --macfr-done: var(--macfr-olive); /* Neutres — un blanc cassé très légèrement olive, jamais crème */ --macfr-ink: #101110; --macfr-ink-2: #5C625B; --macfr-surface: #FFFFFF; --macfr-bg: #F1F3EE; --macfr-line: #DDE1D8; /* Teintes dérivées : une seule couleur à régler, tout le reste suit */ --macfr-brand-soft: color-mix(in oklab, var(--macfr-brand) 10%, transparent); --macfr-brand-deep: color-mix(in oklab, var(--macfr-brand) 82%, #000); --macfr-live-soft: color-mix(in oklab, var(--macfr-live) 9%, transparent); --macfr-done-soft: color-mix(in oklab, var(--macfr-done) 12%, transparent); /* Le trait : épaisseur et rayon repris du logo */ --macfr-stroke: 4px; --macfr-stroke-radius: 20px; --macfr-radius: 4px; --macfr-radius-lg: 10px; --macfr-shadow: 0 1px 1px color-mix(in oklab, var(--macfr-ink) 4%, transparent), 0 12px 28px -20px color-mix(in oklab, var(--macfr-ink) 40%, transparent); /* Type : Anton porte la voix du logo, Public Sans lit le français */ --macfr-display: 'Anton', 'Arial Narrow', 'Haettenschweiler', Impact, system-ui, sans-serif; --macfr-body: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans Arabic', sans-serif; /* Échelle fluide */ --macfr-t-hero: clamp(2rem, 1.3rem + 3.2vw, 3.4rem); --macfr-t-title: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); --macfr-t-section: clamp(1.1rem, 1rem + .5vw, 1.35rem); --macfr-t-body: 1.0625rem; } /* Repli si color-mix() n'est pas disponible. */ @supports not (color: color-mix(in oklab, red 10%, transparent)) { .macfr { --macfr-brand-soft: #FBEEE5; --macfr-brand-deep: #A94208; --macfr-live-soft: #E9EFFA; --macfr-done-soft: #EAEEE3; --macfr-shadow: 0 1px 1px rgba(16, 17, 16, .04), 0 12px 28px -20px rgba(16, 17, 16, .4); } } /* * Mode sombre — désactivé par défaut. * * Il ne s'applique que si le thème le demande, en ajoutant la classe * macfr-dark au : sinon les blocs passaient en sombre pendant que * la page restait claire, et les titres devenaient illisibles. */ @media (prefers-color-scheme: dark) { body.macfr-dark .macfr { color-scheme: dark; --macfr-ink: #F2F4F0; --macfr-ink-2: #A2AA9E; --macfr-surface: #191B18; --macfr-bg: #101210; --macfr-line: #2E322C; --macfr-brand: color-mix(in oklab, var(--macfr-orange) 78%, #FFF3E8); --macfr-live: color-mix(in oklab, var(--macfr-blue) 62%, #DCE8FF); --macfr-done: color-mix(in oklab, var(--macfr-olive) 55%, #DFF0C4); } } } /* ========================================================================= * 2. Base * ====================================================================== */ @layer macfr.base { .macfr { box-sizing: border-box; color: var(--macfr-ink); font-family: var(--macfr-body); font-size: var(--macfr-t-body); line-height: 1.65; font-synthesis-weight: none; text-underline-offset: 3px; } .macfr *, .macfr *::before, .macfr *::after { box-sizing: inherit; } .macfr img { max-inline-size: 100%; block-size: auto; } .macfr :focus-visible { outline: 3px solid var(--macfr-live); outline-offset: 2px; border-radius: 2px; } .macfr h1, .macfr h2, .macfr h3, .macfr h4 { font-family: var(--macfr-display); font-weight: 400; letter-spacing: .005em; line-height: 1.08; text-transform: uppercase; } /* Le titre d'une leçon reste en minuscules : c'est du contenu, pas une enseigne. */ .macfr-prose h2, .macfr-prose h3, .macfr-card__title, .macfr-session-row__title, .macfr-session-card__title, .macfr-resource h4 { font-family: var(--macfr-body); font-weight: 800; letter-spacing: -.012em; line-height: 1.3; text-transform: none; } } /* Transition de vue d'une leçon à la suivante, si le navigateur sait faire. */ @view-transition { navigation: auto; } /* ========================================================================= * 3. Motifs signature * ====================================================================== */ @layer macfr.components { /* * LE TRAIT — un filet orange descend le long du bord et tourne l'angle * inférieur sans jamais refermer la forme. C'est le geste du logo. */ .macfr-hero, .macfr-course-row, .macfr-session-row, .macfr-module, .macfr-rewards__head, .macfr-resource { position: relative; isolation: isolate; } .macfr-hero::before, .macfr-course-row::before, .macfr-session-row::before, .macfr-module::before, .macfr-rewards__head::before, .macfr-resource::before { content: ''; position: absolute; z-index: -1; inset-block: 14px -5px; inset-inline-start: -5px; inline-size: 42%; border-inline-start: var(--macfr-stroke) solid var(--macfr-brand); border-block-end: var(--macfr-stroke) solid var(--macfr-brand); border-end-start-radius: var(--macfr-stroke-radius); pointer-events: none; } .macfr-hero::before { --macfr-stroke: 6px; --macfr-stroke-radius: 28px; } /* LA FENÊTRE — quatre carreaux, remplis à mesure que le travail avance. */ .macfr-mosaic { display: flex; flex-wrap: wrap; gap: 3px; margin-block: 14px 10px; } .macfr-mosaic__tile { inline-size: 12px; block-size: 12px; background: var(--macfr-line); border-radius: 1px; transition: background .35s ease; } /* Un intervalle plus large tous les quatre carreaux : le montant de la fenêtre. */ .macfr-mosaic__tile:nth-child(4n) { margin-inline-end: 7px; } .macfr-mosaic__tile.is-done { background: var(--macfr-done); } /* LA TOQUE — le bleu, réservé à ce qui se passe maintenant. */ .macfr-dot { inline-size: 9px; block-size: 9px; background: currentColor; clip-path: polygon(50% 0, 100% 38%, 50% 76%, 0 38%); animation: macfr-cap 1.8s ease-in-out infinite; } @keyframes macfr-cap { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(-3px); opacity: .55; } } } /* ========================================================================= * 4. Typographie utilitaire * ====================================================================== */ @layer macfr.components { .macfr-eyebrow { margin: 0 0 8px; font-family: var(--macfr-display); font-size: .8125rem; letter-spacing: .16em; text-transform: uppercase; color: var(--macfr-brand); } .macfr-muted { color: var(--macfr-ink-2); font-size: .875rem; } .macfr-link { color: var(--macfr-brand-deep); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; } .macfr-block { margin-block: 48px; } .macfr-block__title { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; font-size: var(--macfr-t-section); letter-spacing: .04em; } /* Une petite arête de toit ouvre chaque section. */ .macfr-block__title::before { content: ''; flex: 0 0 auto; inline-size: 18px; block-size: 11px; background: var(--macfr-brand); clip-path: polygon(50% 0, 100% 100%, 82% 100%, 50% 34%, 18% 100%, 0 100%); } .macfr-tagline { margin: 0; font-size: .875rem; color: var(--macfr-ink-2); } .macfr-prose { font-size: 1.0625rem; line-height: 1.8; } .macfr-prose h2 { font-size: 1.35rem; margin-block-start: 2rem; } .macfr-prose h3 { font-size: 1.15rem; margin-block-start: 1.6rem; } .macfr-price { font-family: var(--macfr-display); font-size: 1.25rem; letter-spacing: .01em; } .macfr-price--big { font-size: clamp(1.7rem, 1.4rem + 1vw, 2.2rem); margin: 0 0 16px; } .macfr-tag { display: inline-block; padding: 3px 9px; border: 1px solid var(--macfr-line); border-radius: var(--macfr-radius); font-size: .75rem; font-weight: 700; letter-spacing: .03em; color: var(--macfr-ink-2); } .macfr-tag--present { border-color: var(--macfr-done); color: var(--macfr-done); } .macfr-tag--absent { border-color: var(--macfr-brand); color: var(--macfr-brand-deep); } .macfr-badge-pill { display: inline-block; padding: 5px 12px; border-radius: var(--macfr-radius); background: var(--macfr-brand-soft); color: var(--macfr-brand-deep); font-size: .8125rem; font-weight: 700; } .macfr-badge-pill--done { background: var(--macfr-done-soft); color: var(--macfr-done); } .macfr-badge-pill--warn { background: var(--macfr-live-soft); color: var(--macfr-live); } } /* ========================================================================= * 5. Boutons * ====================================================================== */ @layer macfr.components { .macfr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 22px; border: 2px solid var(--macfr-brand); border-radius: var(--macfr-radius); background: var(--macfr-brand); color: #fff; font-family: var(--macfr-display); font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; line-height: 1.2; cursor: pointer; transition: background .18s ease, border-color .18s ease, color .18s ease, translate .18s ease; } .macfr-btn:hover { background: var(--macfr-brand-deep); border-color: var(--macfr-brand-deep); color: #fff; translate: 0 -1px; } .macfr-btn:active { translate: 0 1px; } .macfr-btn[disabled] { opacity: .5; cursor: not-allowed; translate: none; } .macfr-btn--ghost { background: transparent; border-color: var(--macfr-line); color: var(--macfr-ink); } .macfr-btn--ghost:hover { background: transparent; border-color: var(--macfr-brand); color: var(--macfr-brand-deep); } .macfr-btn--small { padding: 8px 14px; font-size: .8125rem; } .macfr-btn--large { padding: 15px 30px; font-size: 1.05rem; } .macfr-btn--block { inline-size: 100%; } /* Le direct emprunte la couleur de la toque. */ .macfr-btn--live { background: var(--macfr-live); border-color: var(--macfr-live); } .macfr-btn--live:hover { background: color-mix(in oklab, var(--macfr-live) 82%, #000); border-color: color-mix(in oklab, var(--macfr-live) 82%, #000); } .macfr-btn.is-done { background: transparent; border-color: var(--macfr-done); color: var(--macfr-done); } } /* ========================================================================= * 6. Blocs génériques * ====================================================================== */ @layer macfr.components { .macfr-notice { padding: 28px; border: 1px solid var(--macfr-line); border-radius: var(--macfr-radius-lg); background: var(--macfr-surface); } .macfr-notice--locked { text-align: center; } .macfr-notice--locked h1 { margin-block-start: 0; font-size: var(--macfr-t-title); } .macfr-empty { padding: 40px 26px; border: 2px dashed var(--macfr-line); border-radius: var(--macfr-radius-lg); text-align: center; color: var(--macfr-ink-2); } .macfr-panel { padding: 20px; border: 1px solid var(--macfr-line); border-radius: var(--macfr-radius-lg); background: var(--macfr-surface); } .macfr-panel-label { margin: 0 0 8px; font-family: var(--macfr-display); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--macfr-ink-2); } .macfr-panel-note { margin: 12px 0 0; font-size: .8125rem; color: var(--macfr-ink-2); } .macfr-panel-staff { margin-block-start: 20px; padding-block-start: 18px; border-block-start: 1px solid var(--macfr-line); } .macfr-chip { display: inline-flex; align-items: center; gap: 8px; margin: 0 8px 8px 0; font-size: .875rem; } .macfr-chip__avatar { border-radius: 50%; } .macfr-details { margin-block: 26px; padding: 16px 20px; border: 1px solid var(--macfr-line); border-radius: var(--macfr-radius-lg); background: var(--macfr-surface); } .macfr-details summary { cursor: pointer; font-weight: 700; } .macfr-details[open] summary { margin-block-end: 10px; } } /* ========================================================================= * 7. Progression * ====================================================================== */ @layer macfr.components { .macfr-progress { display: flex; align-items: center; gap: 12px; } .macfr-progress__track { flex: 1; block-size: 5px; background: var(--macfr-line); overflow: hidden; } .macfr-progress__track span { display: block; block-size: 100%; background: var(--macfr-done); transition: inline-size .55s cubic-bezier(.2, .8, .2, 1); } .macfr-progress__label { min-inline-size: 42px; font-family: var(--macfr-display); font-size: .875rem; text-align: end; color: var(--macfr-ink-2); } .macfr-meter { block-size: 7px; background: var(--macfr-line); overflow: hidden; } .macfr-meter__fill { block-size: 100%; background: linear-gradient(90deg, var(--macfr-brand), var(--macfr-live)); transition: inline-size .6s cubic-bezier(.2, .8, .2, 1); } } /* ========================================================================= * 8. Tableau de bord * ====================================================================== */ @layer macfr.layout { .macfr-hero { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between; padding: 28px; border: 1px solid var(--macfr-line); border-radius: var(--macfr-radius-lg); background: var(--macfr-surface); } .macfr-hero__identity { display: flex; align-items: center; gap: 20px; } .macfr-hero__avatar { border-radius: 50%; } .macfr-hero__name { margin: 0; font-size: var(--macfr-t-hero); letter-spacing: .01em; } .macfr-hero__level { margin: 6px 0 0; font-family: var(--macfr-display); font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--macfr-brand); } .macfr-hero__meter { flex: 1; min-inline-size: 240px; } .macfr-hero__meter-text { margin: 10px 0 0; font-size: .875rem; color: var(--macfr-ink-2); } .macfr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); gap: 1px; margin-block-start: 18px; background: var(--macfr-line); border: 1px solid var(--macfr-line); border-radius: var(--macfr-radius-lg); overflow: hidden; } .macfr-stat { padding: 20px 14px; background: var(--macfr-surface); text-align: center; text-decoration: none; color: inherit; transition: background .18s ease; } .macfr-stat--link:hover { background: var(--macfr-brand-soft); } .macfr-stat__value { display: block; font-family: var(--macfr-display); font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); line-height: 1; } .macfr-stat__label { display: block; margin-block-start: 6px; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--macfr-ink-2); } .macfr-session-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } .macfr-course-rows { display: grid; gap: 18px; } .macfr-course-row { display: grid; grid-template-columns: 136px minmax(0, 1fr) auto; gap: 22px; align-items: center; padding: 18px; border: 1px solid var(--macfr-line); border-radius: var(--macfr-radius-lg); background: var(--macfr-surface); } .macfr-course-row__thumb img { border-radius: var(--macfr-radius); aspect-ratio: 16 / 10; object-fit: cover; inline-size: 100%; } .macfr-course-row__placeholder, .macfr-card__placeholder { display: block; aspect-ratio: 16 / 10; border-radius: var(--macfr-radius); background: linear-gradient(var(--macfr-line) 0 0) 50% 46% / 60% 2px no-repeat, linear-gradient(var(--macfr-line) 0 0) 50% 54% / 34% 2px no-repeat, var(--macfr-bg); } .macfr-card__placeholder { aspect-ratio: 16 / 9; border-radius: 0; } .macfr-course-row__title { margin: 0 0 4px; font-size: 1.2rem; } .macfr-course-row__title a { color: inherit; text-decoration: none; } .macfr-course-row__title a:hover { color: var(--macfr-brand-deep); } .macfr-course-row__action { text-align: end; min-inline-size: 156px; } .macfr-course-row__next { margin: 10px 0 0; font-size: .75rem; color: var(--macfr-ink-2); } } /* ========================================================================= * 9. Catalogue — les cartes réagissent à leur conteneur, pas à l'écran * ====================================================================== */ @layer macfr.layout { .macfr-catalog__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 22px; } .macfr-card { container-type: inline-size; container-name: macfr-card; display: flex; flex-direction: column; border: 1px solid var(--macfr-line); border-radius: var(--macfr-radius-lg); background: var(--macfr-surface); overflow: hidden; transition: border-color .2s ease, translate .2s ease, box-shadow .2s ease; } .macfr-card:hover { border-color: var(--macfr-brand); translate: 0 -3px; box-shadow: var(--macfr-shadow); } .macfr-card__media { display: block; position: relative; } .macfr-card__media img { inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; } .macfr-card__format { position: absolute; inset-block-start: 12px; inset-inline-start: 12px; padding: 5px 11px; background: var(--macfr-ink); color: var(--macfr-surface); font-family: var(--macfr-display); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; } .macfr-card__body { flex: 1; padding: 20px; } .macfr-card__title { margin: 0 0 10px; font-size: 1.15rem; } .macfr-card__title a { color: inherit; text-decoration: none; } .macfr-card__excerpt { margin: 0 0 14px; font-size: .9rem; color: var(--macfr-ink-2); } .macfr-card__meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: .8125rem; color: var(--macfr-ink-2); } .macfr-card__meta li + li::before { content: '·'; margin-inline-end: 10px; } .macfr-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-block-start: 1px solid var(--macfr-line); } /* Carte étroite (colonne latérale) : on empile plutôt que de comprimer. */ @container macfr-card (max-width: 260px) { .macfr-card__footer { flex-direction: column; align-items: stretch; } .macfr-card__footer .macfr-btn { inline-size: 100%; } .macfr-card__excerpt { display: none; } } } /* ========================================================================= * 10. Page formation * ====================================================================== */ @layer macfr.layout { .macfr-course__head { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; } .macfr-course__title { margin: 0 0 14px; font-size: var(--macfr-t-hero); } .macfr-course__intro p { font-size: 1.1rem; color: var(--macfr-ink-2); } .macfr-factline { display: flex; flex-wrap: wrap; gap: 0; margin: 22px 0 0; padding: 0; list-style: none; font-size: .875rem; color: var(--macfr-ink-2); } .macfr-factline li { padding-inline: 16px; border-inline-start: 2px solid var(--macfr-brand); } .macfr-factline li:first-child { padding-inline-start: 0; border-inline-start: 0; } .macfr-course__panel { padding: 22px; border: 1px solid var(--macfr-line); border-radius: var(--macfr-radius-lg); background: var(--macfr-surface); box-shadow: var(--macfr-shadow); position: sticky; inset-block-start: 24px; } .macfr-course__panel-media img { border-radius: var(--macfr-radius); margin-block-end: 18px; } .macfr-objectives { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); gap: 2px; margin: 0; padding: 0; list-style: none; } .macfr-objectives li { position: relative; padding: 14px 16px 14px 36px; background: var(--macfr-surface); border: 1px solid var(--macfr-line); font-size: .95rem; } /* Le carreau de fenêtre marque chaque objectif. */ .macfr-objectives li::before { content: ''; position: absolute; inset-inline-start: 15px; inset-block-start: 1.35em; inline-size: 9px; block-size: 9px; background: var(--macfr-done); } } /* ========================================================================= * 11. Programme * ====================================================================== */ @layer macfr.components { .macfr-curriculum { display: grid; gap: 20px; } .macfr-module { border: 1px solid var(--macfr-line); border-radius: var(--macfr-radius-lg); background: var(--macfr-surface); overflow: hidden; } .macfr-module__head { display: flex; gap: 18px; align-items: baseline; padding: 20px 22px; border-block-end: 1px solid var(--macfr-line); } /* Le programme EST une séquence : la numérotation porte une information. */ .macfr-module__rank { font-family: var(--macfr-display); font-size: 1.6rem; line-height: 1; color: var(--macfr-brand); font-variant-numeric: tabular-nums; } .macfr-module__title { margin: 0; font-size: 1.15rem; letter-spacing: .03em; } .macfr-module__desc { margin: 5px 0 0; font-size: .875rem; color: var(--macfr-ink-2); } .macfr-module__items { margin: 0; padding: 0; list-style: none; } .macfr-item { display: flex; align-items: center; gap: 16px; padding: 15px 22px; border-block-start: 1px solid var(--macfr-line); transition: background .16s ease; } .macfr-item:first-child { border-block-start: 0; } .macfr-item:hover { background: var(--macfr-brand-soft); } /* Chaque type de contenu porte une marque tirée du logo. */ .macfr-item__mark { flex: 0 0 auto; inline-size: 20px; block-size: 20px; border: 2px solid var(--macfr-line); } .macfr-item__mark--lecon { border-radius: 1px; } .macfr-item__mark--exercice { border-radius: 50%; } .macfr-item__mark--direct { border-color: var(--macfr-live); clip-path: polygon(50% 0, 100% 42%, 50% 84%, 0 42%); border-radius: 0; } .macfr-item.is-done .macfr-item__mark { background: var(--macfr-done); border-color: var(--macfr-done); } .macfr-item.is-locked { opacity: .45; } .macfr-item.is-locked:hover { background: none; } .macfr-item__label { flex: 1; } .macfr-item__label a { color: inherit; text-decoration: none; font-weight: 700; } .macfr-item__label a:hover { color: var(--macfr-brand-deep); } .macfr-item__label small { display: block; font-size: .75rem; font-weight: 400; color: var(--macfr-ink-2); } .macfr-item__aside { display: flex; align-items: center; gap: 10px; font-size: .8125rem; color: var(--macfr-ink-2); } .macfr-item__aside em { font-style: normal; } } /* ========================================================================= * 12. Lecteur de leçon * ====================================================================== */ @layer macfr.layout { .macfr-player { max-inline-size: 780px; margin-inline: auto; } .macfr-player__breadcrumb { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-block-end: 20px; padding-block-end: 14px; border-block-end: 1px solid var(--macfr-line); font-size: .875rem; } .macfr-player__breadcrumb a { color: var(--macfr-ink-2); text-decoration: none; font-weight: 700; } .macfr-player__breadcrumb a:hover { color: var(--macfr-brand-deep); } .macfr-player__progress { font-family: var(--macfr-display); color: var(--macfr-brand); letter-spacing: .06em; } .macfr-player__title { margin: 0 0 26px; font-size: var(--macfr-t-title); } .macfr-media-frame { border-radius: var(--macfr-radius); overflow: hidden; background: #0C0E0B; margin-block-end: 26px; } .macfr-media-frame iframe, .macfr-media-frame video { display: block; inline-size: 100%; aspect-ratio: 16 / 9; border: 0; } .macfr-audio-frame { margin-block-end: 26px; } .macfr-audio-frame audio { inline-size: 100%; } .macfr-downloads ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; } .macfr-downloads a { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid var(--macfr-line); border-radius: var(--macfr-radius); background: var(--macfr-surface); text-decoration: none; color: inherit; font-weight: 700; } .macfr-downloads a:hover { border-color: var(--macfr-brand); } .macfr-file-type { flex: 0 0 auto; padding: 4px 8px; background: var(--macfr-ink); color: var(--macfr-surface); font-family: var(--macfr-display); font-size: .65rem; letter-spacing: .1em; } .macfr-player__complete { margin-block: 40px; text-align: center; } .macfr-player__nav { display: flex; justify-content: space-between; gap: 12px; margin-block-start: 36px; padding-block-start: 26px; border-block-start: 1px solid var(--macfr-line); } } /* ========================================================================= * 13. Exercices * ====================================================================== */ @layer macfr.components { .macfr-quiz { padding: 30px; border: 1px solid var(--macfr-line); border-radius: var(--macfr-radius-lg); background: var(--macfr-surface); } .macfr-quiz__facts { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 16px; } .macfr-quiz__facts span { padding: 5px 12px; border: 1px solid var(--macfr-line); font-size: .8125rem; font-weight: 600; color: var(--macfr-ink-2); } .macfr-quiz__best { margin: 0 0 18px; font-weight: 700; color: var(--macfr-done); } .macfr-quiz__bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-block-end: 18px; } .macfr-quiz__counter { font-family: var(--macfr-display); font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--macfr-ink-2); } .macfr-quiz__timer { font-family: var(--macfr-display); font-size: 1.1rem; font-variant-numeric: tabular-nums; color: var(--macfr-live); } .macfr-q__text { margin: 18px 0; font-size: 1.2rem; font-weight: 700; line-height: 1.45; } .macfr-q__media { margin-block-end: 18px; border-radius: var(--macfr-radius); overflow: hidden; } .macfr-q__hint { margin: 16px 0 0; font-size: .8125rem; color: var(--macfr-ink-2); font-style: italic; } .macfr-opts { display: grid; gap: 10px; } .macfr-opt { display: flex; align-items: flex-start; gap: 14px; padding: 15px 18px; border: 2px solid var(--macfr-line); border-radius: var(--macfr-radius); background: var(--macfr-surface); cursor: pointer; transition: border-color .15s ease, background .15s ease; } .macfr-opt:hover { border-color: var(--macfr-brand); } .macfr-opt input { margin-block-start: 4px; accent-color: var(--macfr-brand); } /* L'état sélectionné tient sans JavaScript. */ .macfr-opt:has(input:checked), .macfr-opt.is-selected { border-color: var(--macfr-brand); background: var(--macfr-brand-soft); } .macfr-opt.is-correct { border-color: var(--macfr-done); background: var(--macfr-done-soft); } .macfr-opt.is-wrong { border-color: var(--macfr-live); background: var(--macfr-live-soft); } .macfr-blank, .macfr-short { padding: 10px 14px; border: 0; border-block-end: 2px solid var(--macfr-brand); background: var(--macfr-brand-soft); font-family: inherit; font-size: 1rem; color: inherit; min-inline-size: 140px; } .macfr-blank:focus, .macfr-short:focus { outline: none; background: transparent; border-color: var(--macfr-live); } .macfr-fill-text { font-size: 1.15rem; line-height: 2.4; } .macfr-match { display: grid; gap: 10px; } .macfr-match__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: center; } .macfr-match__left { padding: 14px 16px; background: var(--macfr-bg); font-weight: 700; } .macfr-match select { inline-size: 100%; padding: 12px 14px; border: 2px solid var(--macfr-line); border-radius: var(--macfr-radius); background: var(--macfr-surface); font-family: inherit; font-size: .95rem; color: inherit; } .macfr-order { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .macfr-order__item { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border: 2px solid var(--macfr-line); border-radius: var(--macfr-radius); background: var(--macfr-surface); cursor: grab; } .macfr-order__item:hover { border-color: var(--macfr-brand); } .macfr-order__item.is-dragging { opacity: .4; cursor: grabbing; } .macfr-order__grip { color: var(--macfr-ink-2); line-height: 1; } .macfr-order__pos { font-family: var(--macfr-display); color: var(--macfr-brand); font-variant-numeric: tabular-nums; } .macfr-open textarea { inline-size: 100%; padding: 15px; border: 2px solid var(--macfr-line); border-radius: var(--macfr-radius); background: var(--macfr-surface); font-family: inherit; font-size: 1rem; color: inherit; resize: vertical; field-sizing: content; } .macfr-open textarea:focus { outline: none; border-color: var(--macfr-brand); } .macfr-quiz__actions { display: flex; justify-content: space-between; gap: 12px; margin-block-start: 28px; } .macfr-quiz__feedback { margin-block-start: 18px; padding: 15px 18px; border-inline-start: 4px solid var(--macfr-line); font-size: .95rem; } .macfr-quiz__feedback.is-correct { border-color: var(--macfr-done); background: var(--macfr-done-soft); } .macfr-quiz__feedback.is-wrong { border-color: var(--macfr-brand); background: var(--macfr-brand-soft); } .macfr-quiz__feedback.is-partial { border-color: var(--macfr-live); background: var(--macfr-live-soft); } /* Résultat : la note se lit dans une fenêtre qui se remplit. */ .macfr-score { text-align: center; padding-block: 10px; } .macfr-score__ring { inline-size: 132px; block-size: 132px; margin: 0 auto 20px; display: grid; place-items: center; position: relative; background: linear-gradient(to top, var(--macfr-done) calc(var(--macfr-score) * 1%), var(--macfr-line) 0); border: 3px solid var(--macfr-ink); } /* Les croisillons de la fenêtre. */ .macfr-score__ring::before { content: ''; position: absolute; inset: 0; background: linear-gradient(var(--macfr-surface) 0 0) 50% 0 / 4px 100% no-repeat, linear-gradient(var(--macfr-surface) 0 0) 0 50% / 100% 4px no-repeat; } .macfr-score__ring span { position: relative; z-index: 1; padding: 4px 10px; background: var(--macfr-ink); color: var(--macfr-surface); font-family: var(--macfr-display); font-size: 1.5rem; } .macfr-score__verdict { margin: 0 0 8px; font-family: var(--macfr-display); font-size: 1.3rem; text-transform: uppercase; letter-spacing: .04em; } .macfr-score__detail { margin: 0 0 22px; color: var(--macfr-ink-2); font-size: .875rem; } .macfr-review { display: grid; gap: 10px; margin-block-start: 26px; text-align: start; } .macfr-review__item { padding: 15px 18px; border-inline-start: 4px solid var(--macfr-line); background: var(--macfr-bg); } .macfr-review__item.is-correct { border-color: var(--macfr-done); } .macfr-review__item.is-wrong { border-color: var(--macfr-brand); } .macfr-review__item.is-partial { border-color: var(--macfr-live); } .macfr-review__q { margin: 0 0 6px; font-weight: 700; } .macfr-review__a { margin: 0; font-size: .875rem; color: var(--macfr-ink-2); } } /* ========================================================================= * 14. Séances en direct * ====================================================================== */ @layer macfr.components { .macfr-session-card { padding: 20px; border: 1px solid var(--macfr-line); border-radius: var(--macfr-radius-lg); background: var(--macfr-surface); } .macfr-session-card__date { margin: 0 0 8px; font-family: var(--macfr-display); font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--macfr-brand); } .macfr-session-card__title { margin: 0 0 5px; font-size: 1.05rem; } .macfr-session-card__title a { color: inherit; text-decoration: none; } .macfr-session-card__course { margin: 0 0 16px; font-size: .8125rem; color: var(--macfr-ink-2); } .macfr-session-card--live { border-color: var(--macfr-live); } .macfr-session-card--live .macfr-session-card__date { color: var(--macfr-live); } .macfr-session-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; content-visibility: auto; contain-intrinsic-size: auto 110px; } .macfr-session-row { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 16px 20px; border: 1px solid var(--macfr-line); border-radius: var(--macfr-radius-lg); background: var(--macfr-surface); } .macfr-session-row--live { border-color: var(--macfr-live); } .macfr-session-row--live::before { border-color: var(--macfr-live); } .macfr-session-row--ended { opacity: .68; } .macfr-session-row--ended::before { border-color: var(--macfr-line); } .macfr-session-row__when { text-align: center; padding: 10px 0; border: 1px solid var(--macfr-line); } .macfr-session-row__day { display: block; font-family: var(--macfr-display); font-size: 1.7rem; line-height: 1; } .macfr-session-row__month { display: block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--macfr-ink-2); } .macfr-session-row__time { display: block; margin-block-start: 5px; font-weight: 700; font-size: .8125rem; color: var(--macfr-brand); } .macfr-session-row__status { margin: 0 0 3px; font-family: var(--macfr-display); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--macfr-ink-2); } .macfr-session-row__title { margin: 0 0 4px; font-size: 1.05rem; } .macfr-session-row__title a { color: inherit; text-decoration: none; } .macfr-session-row__meta { margin: 0; font-size: .8125rem; color: var(--macfr-ink-2); } .macfr-session-single__head { padding: 34px; border: 1px solid var(--macfr-line); border-radius: var(--macfr-radius-lg); background: var(--macfr-surface); } .macfr-session-single__head--live { border-color: var(--macfr-live); border-width: 2px; } .macfr-session-single__title { margin: 0 0 10px; font-size: var(--macfr-t-title); } .macfr-session-single__when { margin: 0 0 22px; color: var(--macfr-ink-2); } .macfr-live-tag { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: 12px; font-family: var(--macfr-display); letter-spacing: .1em; text-transform: uppercase; color: var(--macfr-live); } .macfr-session-single__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 34px; margin-block-start: 32px; } .macfr-session-single__aside { display: grid; gap: 16px; align-content: start; } .macfr-agenda p { margin: 0 0 8px; font-size: .9rem; } .macfr-attendee-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .macfr-attendee-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; } } /* ========================================================================= * 15. Récompenses * ====================================================================== */ @layer macfr.components { .macfr-rewards__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 34px; padding: 32px; border: 1px solid var(--macfr-line); border-radius: var(--macfr-radius-lg); background: var(--macfr-surface); } .macfr-rewards__points { margin: 0; font-family: var(--macfr-display); font-size: clamp(2.6rem, 2rem + 2.6vw, 4rem); line-height: .95; } .macfr-rewards__points small { font-family: var(--macfr-body); font-size: 1rem; font-weight: 400; color: var(--macfr-ink-2); } .macfr-rewards__level { margin: 10px 0 16px; font-family: var(--macfr-display); letter-spacing: .1em; text-transform: uppercase; color: var(--macfr-brand); } .macfr-rewards__side { display: flex; gap: 12px; align-items: flex-start; } .macfr-badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(158px, 100%), 1fr)); gap: 16px; } .macfr-badge-card { margin: 0; padding: 22px 16px; border: 1px solid var(--macfr-line); border-radius: var(--macfr-radius-lg); background: var(--macfr-surface); text-align: center; } .macfr-badge-card img { inline-size: 64px; block-size: 64px; object-fit: contain; margin-block-end: 12px; } .macfr-badge-card.is-locked { opacity: .38; filter: grayscale(1); } .macfr-badge-card figcaption strong { display: block; font-weight: 800; font-size: .9rem; } .macfr-badge-card figcaption span { display: block; margin-block-start: 4px; font-size: .75rem; color: var(--macfr-ink-2); } /* Un badge sans image reprend la toque du logo. */ .macfr-badge-card__mark { display: block; inline-size: 58px; block-size: 40px; margin: 0 auto 14px; background: var(--macfr-live); clip-path: polygon(50% 0, 100% 42%, 50% 84%, 0 42%); } .macfr-timeline { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; } .macfr-timeline li { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 13px 18px; border: 1px solid var(--macfr-line); background: var(--macfr-surface); } .macfr-timeline__points { font-family: var(--macfr-display); color: var(--macfr-done); font-variant-numeric: tabular-nums; } .macfr-timeline__label strong { display: block; font-size: .95rem; } .macfr-timeline__label em { font-style: normal; font-size: .8125rem; color: var(--macfr-ink-2); } .macfr-timeline__date { font-size: .8125rem; color: var(--macfr-ink-2); } .macfr-rank-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; } .macfr-rank { display: grid; grid-template-columns: 38px 36px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 18px; border: 1px solid var(--macfr-line); background: var(--macfr-surface); } .macfr-rank.is-me { border-color: var(--macfr-brand); border-inline-start-width: 4px; } .macfr-rank__pos { font-family: var(--macfr-display); color: var(--macfr-brand); font-variant-numeric: tabular-nums; } .macfr-rank__avatar { border-radius: 50%; } .macfr-rank__name { font-weight: 700; } .macfr-rank__points { font-family: var(--macfr-display); font-variant-numeric: tabular-nums; } } /* ========================================================================= * 16. Documentation * ====================================================================== */ @layer macfr.components { .macfr-resource-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; content-visibility: auto; contain-intrinsic-size: auto 96px; } .macfr-resource { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 18px 20px; border: 1px solid var(--macfr-line); border-radius: var(--macfr-radius-lg); background: var(--macfr-surface); } .macfr-resource h4 { margin: 0 0 5px; font-size: 1rem; } .macfr-resource p { margin: 0; font-size: .875rem; color: var(--macfr-ink-2); } .macfr-resource.is-locked { opacity: .6; } .macfr-resource.is-locked::before { border-color: var(--macfr-line); } } /* ========================================================================= * 17. Messagerie * ====================================================================== */ @layer macfr.layout { .macfr-messenger { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-block-size: 540px; border: 1px solid var(--macfr-line); border-radius: var(--macfr-radius-lg); background: var(--macfr-surface); overflow: hidden; } .macfr-messenger__list { display: flex; flex-direction: column; border-inline-end: 1px solid var(--macfr-line); background: var(--macfr-bg); } .macfr-messenger__list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px; border-block-end: 1px solid var(--macfr-line); } .macfr-messenger__list-head h2 { margin: 0; font-size: 1rem; letter-spacing: .06em; } .macfr-messenger__threads { flex: 1; overflow-y: auto; padding: 10px; } .macfr-thread { display: block; inline-size: 100%; padding: 13px 15px; border: 0; border-inline-start: 3px solid transparent; background: transparent; font-family: inherit; color: inherit; text-align: start; cursor: pointer; transition: background .15s ease, border-color .15s ease; } .macfr-thread:hover { background: var(--macfr-brand-soft); } .macfr-thread.is-active { background: var(--macfr-surface); border-inline-start-color: var(--macfr-brand); } .macfr-thread__subject { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 800; font-size: .95rem; } .macfr-thread__excerpt { margin: 4px 0 0; font-size: .8125rem; color: var(--macfr-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .macfr-thread__date { display: block; margin-block-start: 5px; font-size: .75rem; color: var(--macfr-ink-2); } .macfr-thread__unread { flex: 0 0 auto; min-inline-size: 20px; block-size: 20px; display: grid; place-items: center; padding-inline: 6px; background: var(--macfr-live); color: #fff; font-size: .7rem; font-weight: 700; } .macfr-messenger__panel { display: flex; flex-direction: column; } .macfr-conv__head { padding: 18px 22px; border-block-end: 1px solid var(--macfr-line); } .macfr-conv__head h3 { margin: 0; font-size: 1.05rem; letter-spacing: .04em; } .macfr-conv__body { flex: 1; display: flex; flex-direction: column; gap: 16px; padding: 22px; max-block-size: 430px; overflow-y: auto; scroll-behavior: smooth; } .macfr-msg { display: flex; gap: 12px; max-inline-size: 78%; } .macfr-msg img { inline-size: 34px; block-size: 34px; border-radius: 50%; flex: 0 0 auto; } .macfr-msg__bubble { padding: 13px 17px; border: 1px solid var(--macfr-line); border-radius: var(--macfr-radius); border-start-start-radius: 0; background: var(--macfr-bg); font-size: .95rem; } .macfr-msg__bubble p { margin: 0 0 8px; } .macfr-msg__bubble p:last-child { margin: 0; } .macfr-msg__meta { display: block; margin-block-start: 8px; font-size: .7rem; color: var(--macfr-ink-2); } .macfr-msg--mine { margin-inline-start: auto; flex-direction: row-reverse; } .macfr-msg--mine .macfr-msg__bubble { border-color: var(--macfr-brand); background: var(--macfr-brand-soft); border-start-start-radius: var(--macfr-radius); border-start-end-radius: 0; } .macfr-conv__form { display: flex; gap: 12px; padding: 16px 22px; border-block-start: 1px solid var(--macfr-line); } .macfr-conv__form textarea { flex: 1; min-block-size: 48px; padding: 13px 15px; border: 2px solid var(--macfr-line); border-radius: var(--macfr-radius); background: var(--macfr-surface); font-family: inherit; font-size: .95rem; color: inherit; resize: none; } .macfr-conv__form textarea:focus { outline: none; border-color: var(--macfr-brand); } .macfr-modal { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 20px; background: color-mix(in oklab, var(--macfr-ink) 62%, transparent); } .macfr-modal__box { inline-size: min(520px, 100%); padding: 30px; border-radius: var(--macfr-radius-lg); background: var(--macfr-surface); } .macfr-modal__box h3 { margin: 0 0 20px; font-size: 1.25rem; letter-spacing: .04em; } .macfr-modal__box input, .macfr-modal__box select, .macfr-modal__box textarea { inline-size: 100%; margin-block-end: 14px; padding: 12px 14px; border: 2px solid var(--macfr-line); border-radius: var(--macfr-radius); background: var(--macfr-surface); font-family: inherit; font-size: .95rem; color: inherit; } .macfr-modal__actions { display: flex; justify-content: flex-end; gap: 12px; } } /* ========================================================================= * 18. Inscription * ====================================================================== */ @layer macfr.components { .macfr-register { max-inline-size: 480px; margin-inline: auto; } .macfr-form { padding: 32px; border: 1px solid var(--macfr-line); border-radius: var(--macfr-radius-lg); background: var(--macfr-surface); } .macfr-form h3 { margin: 0 0 22px; font-size: var(--macfr-t-section); letter-spacing: .04em; } .macfr-form .macfr-field__label { display: block; margin-block-end: 16px; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--macfr-ink-2); } .macfr-form input[type="text"], .macfr-form input[type="email"] { display: block; inline-size: 100%; margin-block-start: 7px; padding: 12px 15px; border: 2px solid var(--macfr-line); border-radius: var(--macfr-radius); background: var(--macfr-surface); font-family: inherit; font-size: 1rem; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--macfr-ink); } .macfr-form input:focus { outline: none; border-color: var(--macfr-brand); } .macfr-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .macfr-form__error { margin: 0 0 18px; padding: 13px 16px; border-inline-start: 4px solid var(--macfr-brand); background: var(--macfr-brand-soft); font-size: .875rem; } .macfr-form .macfr-btn { margin-block-start: 8px; } .macfr-form .macfr-muted { margin: 16px 0 0; text-align: center; } /* Champ leurre : hors du flux, sans être caché aux lecteurs d'écran. */ .macfr-hp { position: absolute; inset-inline-start: -9999px; inline-size: 1px; block-size: 1px; overflow: hidden; } } /* ========================================================================= * 19. Notification passagère * ====================================================================== */ @layer macfr.components { .macfr-toast { position: fixed; inset-block-end: 26px; inset-inline: 0; z-index: 10000; inline-size: fit-content; margin-inline: auto; padding: 13px 24px; border-inline-start: 4px solid var(--macfr-brand); background: #101110; color: #fff; font-family: var(--macfr-display); font-size: .9rem; letter-spacing: .06em; text-transform: uppercase; opacity: 0; translate: 0 14px; transition: opacity .25s ease, translate .25s ease; pointer-events: none; } .macfr-toast.is-visible { opacity: 1; translate: 0 0; } .macfr-toast--error { border-inline-start-color: var(--macfr-blue); } } /* ========================================================================= * 20. Adaptation * ====================================================================== */ @layer macfr.state { @media (max-width: 1000px) { .macfr-course__head, .macfr-session-single__grid { grid-template-columns: minmax(0, 1fr); } .macfr-course__panel { position: static; } .macfr-messenger { grid-template-columns: minmax(0, 1fr); min-block-size: 0; } .macfr-messenger__list { border-inline-end: 0; border-block-end: 1px solid var(--macfr-line); max-block-size: 260px; } } @media (max-width: 640px) { .macfr-course-row { grid-template-columns: minmax(0, 1fr); } .macfr-course-row__thumb { display: none; } .macfr-course-row__action { text-align: start; min-inline-size: 0; } .macfr-session-row { grid-template-columns: 72px minmax(0, 1fr); } .macfr-session-row__action { grid-column: 1 / -1; } .macfr-rewards__head { grid-template-columns: minmax(0, 1fr); } .macfr-rewards__side { flex-wrap: wrap; } .macfr-match__row { grid-template-columns: minmax(0, 1fr); } .macfr-form__row { grid-template-columns: minmax(0, 1fr); } .macfr-quiz { padding: 20px; } .macfr-msg { max-inline-size: 92%; } .macfr-hero { padding: 22px; } .macfr-timeline li, .macfr-rank { padding-inline: 14px; } } /* Le trait signature s'efface sur très petit écran : il mangeait la marge. */ @media (max-width: 460px) { .macfr-hero::before, .macfr-course-row::before, .macfr-session-row::before, .macfr-module::before, .macfr-rewards__head::before, .macfr-resource::before { display: none; } } /* Arabe et darija : le trait, les marges et les bulles se retournent seuls grâce aux propriétés logiques ; il ne reste que le dégradé à inverser. */ [dir="rtl"] .macfr-meter__fill { background: linear-gradient(270deg, var(--macfr-brand), var(--macfr-live)); } @media (prefers-reduced-motion: reduce) { .macfr *, .macfr *::before, .macfr *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } @media print { .macfr-btn, .macfr-messenger__list, .macfr-toast { display: none; } .macfr-course__panel { position: static; box-shadow: none; } .macfr-hero::before, .macfr-course-row::before, .macfr-module::before { display: none; } } } /* ========================================================================= * 21. Espace formateur * ====================================================================== */ @layer macfr.components { .macfr-prof__nav { display: flex; flex-wrap: wrap; gap: 2px; margin-block: 26px 30px; border-block-end: 2px solid var(--macfr-line); } .macfr-prof__tab { padding: 12px 18px; border: 0; border-block-end: 3px solid transparent; margin-block-end: -2px; background: transparent; font-family: var(--macfr-display); font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; color: var(--macfr-ink-2); cursor: pointer; transition: color .15s ease, border-color .15s ease; } .macfr-prof__tab:hover { color: var(--macfr-ink); } .macfr-prof__tab.is-active { color: var(--macfr-brand); border-block-end-color: var(--macfr-brand); } .macfr-prof__panel { display: none; } .macfr-prof__panel.is-active { display: block; } .macfr-prof .macfr-field__label { display: block; margin-block-end: 16px; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--macfr-ink-2); } .macfr-prof input[type="text"], .macfr-prof input[type="url"], .macfr-prof input[type="number"], .macfr-prof input[type="datetime-local"], .macfr-prof input[type="file"], .macfr-prof select, .macfr-prof textarea { display: block; inline-size: 100%; margin-block-start: 7px; padding: 11px 14px; border: 2px solid var(--macfr-line); border-radius: var(--macfr-radius); background: var(--macfr-surface); font-family: inherit; font-size: 1rem; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--macfr-ink); } .macfr-prof textarea { resize: vertical; line-height: 1.6; } .macfr-prof [name="raw"] { font-family: var(--macfr-mono, ui-monospace, 'SFMono-Regular', Menlo, monospace); font-size: .95rem; } .macfr-prof :is(input, select, textarea):focus { outline: none; border-color: var(--macfr-brand); } .macfr-prof__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 14px; } .macfr-prof__check { display: flex; align-items: center; gap: 9px; margin-block-end: 12px; font-size: .9rem; color: var(--macfr-ink-2); } .macfr-prof__check input { accent-color: var(--macfr-brand); } .macfr-prof__actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-block: 18px; } .macfr-prof__form { max-inline-size: 660px; padding: 26px; border: 1px solid var(--macfr-line); border-radius: var(--macfr-radius-lg); background: var(--macfr-surface); } .macfr-prof__feedback { margin: 14px 0 0; font-size: .9rem; } .macfr-prof__feedback.is-ok { color: var(--macfr-done); font-weight: 700; } .macfr-prof__feedback.is-error { color: var(--macfr-brand-deep); font-weight: 700; } /* Formulaire de modification d'une séance, déplié sous la ligne. */ .macfr-prof__edit { grid-column: 1 / -1; margin-block-start: 16px; padding-block-start: 18px; border-block-start: 1px solid var(--macfr-line); } /* Feuille de présence */ .macfr-prof__sheet { display: grid; gap: 2px; margin: 0 0 18px; padding: 0; list-style: none; } .macfr-prof__sheet-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 16px; border: 1px solid var(--macfr-line); background: var(--macfr-surface); } .macfr-prof__sheet-row img { inline-size: 34px; block-size: 34px; border-radius: 50%; } .macfr-prof__sheet-name { font-weight: 700; } .macfr-prof__choices { display: flex; flex-wrap: wrap; gap: 4px; } .macfr-prof__choice { padding: 6px 12px; border: 2px solid var(--macfr-line); border-radius: var(--macfr-radius); font-size: .8125rem; font-weight: 700; color: var(--macfr-ink-2); cursor: pointer; transition: border-color .12s ease, color .12s ease, background .12s ease; } .macfr-prof__choice input { position: absolute; opacity: 0; pointer-events: none; } .macfr-prof__choice:hover { border-color: var(--macfr-ink-2); } .macfr-prof__choice:has(input:focus-visible) { outline: 3px solid var(--macfr-live); outline-offset: 2px; } .macfr-prof__choice--present:has(input:checked) { border-color: var(--macfr-done); background: var(--macfr-done-soft); color: var(--macfr-done); } .macfr-prof__choice--late:has(input:checked) { border-color: var(--macfr-live); background: var(--macfr-live-soft); color: var(--macfr-live); } .macfr-prof__choice--absent:has(input:checked) { border-color: var(--macfr-brand); background: var(--macfr-brand-soft); color: var(--macfr-brand-deep); } .macfr-prof__choice--excused:has(input:checked) { border-color: var(--macfr-ink); background: var(--macfr-bg); color: var(--macfr-ink); } /* Ma classe */ .macfr-prof__student { margin-block-end: 12px; padding: 18px 20px; border: 1px solid var(--macfr-line); border-radius: var(--macfr-radius-lg); background: var(--macfr-surface); } .macfr-prof__student-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } .macfr-prof__student-head img { inline-size: 42px; block-size: 42px; border-radius: 50%; } .macfr-prof__student-id { display: grid; } .macfr-prof__student-id strong { font-size: 1rem; } .macfr-prof__student-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-inline-start: auto; } .macfr-prof__marks { display: grid; gap: 2px; margin: 14px 0 0; padding: 0; list-style: none; } .macfr-prof__marks li { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 9px 14px; background: var(--macfr-bg); font-size: .9rem; } .macfr-prof__marks strong { font-family: var(--macfr-display); color: var(--macfr-done); } .macfr-prof__mark-form { margin-block-start: 16px; padding-block-start: 16px; border-block-start: 1px solid var(--macfr-line); } /* Listes et aperçu d'exercice */ .macfr-prof__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; } .macfr-prof__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border: 1px solid var(--macfr-line); background: var(--macfr-surface); } .macfr-prof__row span { display: block; } .macfr-prof__syntax { margin: 12px 0 0; padding-inline-start: 18px; font-size: .9rem; line-height: 2; } .macfr-prof__syntax code { padding: 2px 7px; background: var(--macfr-brand-soft); color: var(--macfr-brand-deep); font-weight: 700; } .macfr-prof__preview { margin-block: 18px; } .macfr-prof__count { margin: 0 0 12px; font-family: var(--macfr-display); letter-spacing: .06em; text-transform: uppercase; color: var(--macfr-done); } .macfr-prof__preview-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; counter-reset: q; } .macfr-prof__preview-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px; background: var(--macfr-bg); font-size: .9rem; } .macfr-prof__errors { margin: 0 0 14px; padding: 14px 18px 14px 34px; border-inline-start: 4px solid var(--macfr-brand); background: var(--macfr-brand-soft); font-size: .9rem; } /* Pièce jointe dans la messagerie */ .macfr-conv__clip { padding-inline: 14px; font-family: var(--macfr-body); font-size: 1.1rem; } .macfr-conv__attachment { display: block; margin: 0 22px; padding: 8px 14px; background: var(--macfr-brand-soft); color: var(--macfr-brand-deep); font-size: .8125rem; font-weight: 700; } } @layer macfr.state { @media (max-width: 640px) { .macfr-prof__nav { overflow-x: auto; flex-wrap: nowrap; } .macfr-prof__tab { white-space: nowrap; } .macfr-prof__sheet-row { grid-template-columns: 36px minmax(0, 1fr); } .macfr-prof__choices { grid-column: 1 / -1; } .macfr-prof__student-stats { margin-inline-start: 0; } .macfr-prof__marks li { grid-template-columns: 78px minmax(0, 1fr); } .macfr-prof__form { padding: 18px; } } } /* ========================================================================= * 22. Correctif : [hidden] doit toujours l'emporter * * Un élément passé en display:grid ou display:flex ignore l'attribut hidden, * dont la règle par défaut du navigateur a une spécificité nulle. C'est ce * qui empêchait la modale « Nouvelle conversation » de se refermer. * ====================================================================== */ @layer macfr.state { .macfr [hidden], .macfr[hidden] { display: none !important; } } /* ========================================================================= * 23. Messagerie * ====================================================================== */ @layer macfr.components { /* --- Boutons ronds ------------------------------------------------ */ .macfr-icon-btn { display: inline-grid; place-items: center; inline-size: 40px; block-size: 40px; flex: 0 0 auto; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--macfr-ink-2); cursor: pointer; transition: background .15s ease, color .15s ease; } .macfr-icon-btn:hover { background: var(--macfr-brand-soft); color: var(--macfr-brand-deep); } .macfr-icon-btn svg { inline-size: 21px; block-size: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .macfr-icon-btn--send { background: var(--macfr-brand); color: #fff; } .macfr-icon-btn--send:hover { background: var(--macfr-brand-deep); color: #fff; } .macfr-icon-btn--send svg { fill: currentColor; stroke: none; translate: 1px 0; } .macfr-icon-btn.is-recording { background: var(--macfr-live); color: #fff; animation: macfr-rec 1.4s ease-in-out infinite; } @keyframes macfr-rec { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--macfr-live) 45%, transparent); } 50% { box-shadow: 0 0 0 8px transparent; } } /* --- Liste des conversations -------------------------------------- */ .macfr-messenger__search { padding: 10px 14px; border-block-end: 1px solid var(--macfr-line); } .macfr-messenger__search input { inline-size: 100%; padding: 9px 14px; border: 0; border-radius: 100px; background: var(--macfr-surface); font-family: inherit; font-size: .9rem; color: inherit; } .macfr-messenger__search input:focus { outline: 2px solid var(--macfr-brand); } .macfr-thread__subject { align-items: baseline; } .macfr-thread__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .macfr-thread__date { flex: 0 0 auto; font-size: .7rem; font-weight: 400; color: var(--macfr-ink-2); } .macfr-thread__line { display: flex; align-items: center; gap: 8px; margin-block-start: 3px; } .macfr-thread__line .macfr-thread__excerpt { flex: 1; margin: 0; } .macfr-thread__unread { border-radius: 100px; } /* --- En-tête de conversation --------------------------------------- */ .macfr-conv__head { display: flex; align-items: center; gap: 12px; } .macfr-conv__back { display: none; } .macfr-conv__avatar { inline-size: 40px; block-size: 40px; border-radius: 50%; flex: 0 0 auto; } .macfr-conv__titles { min-inline-size: 0; } .macfr-conv__titles h3 { margin: 0; font-size: 1rem; letter-spacing: .04em; } .macfr-conv__titles p { margin: 2px 0 0; font-size: .78rem; color: var(--macfr-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* --- Fil ------------------------------------------------------------ */ .macfr-conv__body { position: relative; gap: 3px; scroll-behavior: smooth; } .macfr-conv__body.is-dropping { outline: 3px dashed var(--macfr-brand); outline-offset: -8px; } .macfr-conv__day { align-self: center; margin-block: 14px 8px; padding: 4px 14px; border-radius: 100px; background: var(--macfr-bg); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--macfr-ink-2); } .macfr-conv__jump { position: absolute; inset-inline: 0; inset-block-end: 96px; z-index: 3; inline-size: fit-content; margin-inline: auto; padding: 8px 18px; border: 0; border-radius: 100px; background: var(--macfr-live); color: #fff; font-size: .8rem; font-weight: 700; cursor: pointer; } .macfr-conv__closed { margin: 0; padding: 16px 22px; border-block-start: 1px solid var(--macfr-line); text-align: center; font-size: .875rem; color: var(--macfr-ink-2); } /* --- Bulles --------------------------------------------------------- */ .macfr-msg { align-items: flex-end; max-inline-size: 74%; } .macfr-msg.is-grouped { margin-block-start: -1px; } .macfr-msg__spacer { flex: 0 0 auto; inline-size: 34px; } .macfr-msg__author { display: block; margin-block-end: 3px; font-size: .75rem; font-weight: 800; color: var(--macfr-brand-deep); } .macfr-msg__bubble { border-radius: 14px; border-start-start-radius: 4px; } .macfr-msg--mine .macfr-msg__bubble { border-start-start-radius: 14px; border-start-end-radius: 4px; } .macfr-msg.is-grouped .macfr-msg__bubble { border-start-start-radius: 14px; border-start-end-radius: 14px; } .macfr-msg__text p { margin: 0 0 6px; } .macfr-msg__text p:last-child { margin: 0; } .macfr-msg__meta { display: flex; align-items: center; justify-content: flex-end; gap: 5px; margin-block-start: 4px; font-size: .68rem; color: var(--macfr-ink-2); } .macfr-msg__ticks svg { inline-size: 16px; block-size: 10px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .macfr-msg__ticks.is-read { color: var(--macfr-live); } .macfr-msg.is-sending { opacity: .55; } .macfr-msg.is-failed .macfr-msg__bubble { border-color: var(--macfr-live); } /* --- Pièces jointes -------------------------------------------------- */ .macfr-attach { display: block; margin-block-end: 8px; } .macfr-attach--image { padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: none; cursor: zoom-in; line-height: 0; } .macfr-attach--image img { max-inline-size: 260px; max-block-size: 300px; object-fit: cover; } .macfr-attach--audio audio { inline-size: min(260px, 60vw); block-size: 40px; } .macfr-attach--video video { max-inline-size: 260px; border-radius: 10px; } .macfr-attach--file { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--macfr-line); border-radius: 10px; background: var(--macfr-surface); text-decoration: none; color: inherit; } .macfr-attach--file:hover { border-color: var(--macfr-brand); } .macfr-attach__label { display: grid; min-inline-size: 0; } .macfr-attach__label strong { font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .macfr-attach__label span { font-size: .7rem; color: var(--macfr-ink-2); } /* --- Composeur -------------------------------------------------------- */ .macfr-composer { border-block-start: 1px solid var(--macfr-line); background: var(--macfr-surface); } .macfr-composer__bar { display: flex; align-items: flex-end; gap: 6px; padding: 10px 14px 4px; } .macfr-composer__bar textarea { flex: 1; min-block-size: 40px; max-block-size: 160px; padding: 9px 16px; border: 1px solid var(--macfr-line); border-radius: 20px; background: var(--macfr-bg); font-family: inherit; font-size: .95rem; line-height: 1.5; color: inherit; resize: none; overflow-y: auto; } .macfr-composer__bar textarea:focus { outline: none; border-color: var(--macfr-brand); background: var(--macfr-surface); } .macfr-composer__chip { display: flex; align-items: center; gap: 10px; margin: 10px 14px 0; padding: 8px 14px; border-radius: 10px; background: var(--macfr-brand-soft); color: var(--macfr-brand-deep); font-size: .8rem; font-weight: 700; } .macfr-composer__chip.is-busy { opacity: .7; } .macfr-composer__remove { margin-inline-start: auto; padding: 0 4px; border: 0; background: none; color: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer; } .macfr-composer__hint { margin: 0; padding: 0 14px 10px 60px; font-size: .68rem; color: var(--macfr-ink-2); } /* --- Visionneuse ------------------------------------------------------ */ .macfr-lightbox { position: fixed; inset: 0; z-index: 10001; display: grid; place-items: center; padding: 30px; background: color-mix(in oklab, #000 82%, transparent); } .macfr-lightbox img { max-inline-size: 100%; max-block-size: 90vh; border-radius: 6px; } .macfr-lightbox__close { position: absolute; inset-block-start: 18px; inset-inline-end: 22px; inline-size: 44px; block-size: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; } } @layer macfr.state { /* Sur téléphone, la liste et la conversation occupent l'écran à tour de rôle, comme dans une application de messagerie. */ @media (max-width: 1000px) { .macfr-messenger { grid-template-columns: minmax(0, 1fr); min-block-size: 70vh; } .macfr-messenger__list { max-block-size: none; border-block-end: 0; } .macfr-messenger.is-conversation .macfr-messenger__list { display: none; } .macfr-messenger:not(.is-conversation) .macfr-messenger__panel { display: none; } .macfr-conv__back { display: inline-grid; } .macfr-conv__body { max-block-size: none; flex: 1; } .macfr-msg { max-inline-size: 86%; } .macfr-composer__hint { display: none; } } } @layer macfr.components { /* Le bouton « nouveaux messages » se positionne par rapport au panneau. */ .macfr-messenger__panel { position: relative; } .macfr-messenger__welcome { margin: auto; max-inline-size: 340px; border: 0; } .macfr-messenger__loading { padding: 16px; } } /* ========================================================================= * 24. Espace de l'équipe * ====================================================================== */ @layer macfr.components { .macfr-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); gap: 14px; } .macfr-tool { display: grid; gap: 6px; padding: 20px; border: 1px solid var(--macfr-line); border-radius: var(--macfr-radius-lg); background: var(--macfr-surface); text-decoration: none; color: inherit; transition: border-color .18s ease, translate .18s ease; } .macfr-tool:hover { border-color: var(--macfr-brand); translate: 0 -2px; } .macfr-tool strong { font-family: var(--macfr-display); font-size: 1.05rem; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; } .macfr-tool span { font-size: .85rem; color: var(--macfr-ink-2); line-height: 1.5; } /* Ce qui réclame une action porte le trait orange. */ .macfr-stat.is-alert { box-shadow: inset 3px 0 0 var(--macfr-brand); } .macfr-stat.is-alert .macfr-stat__value { color: var(--macfr-brand); } } @layer macfr.components { /* Zone de pièce jointe dans la modale de nouvelle conversation. */ .macfr-modal__attach { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-block-end: 18px; padding: 14px; border: 2px dashed var(--macfr-line); border-radius: var(--macfr-radius); transition: border-color .15s ease, background .15s ease; } .macfr-modal__attach.is-dropping { border-color: var(--macfr-brand); background: var(--macfr-brand-soft); } .macfr-modal__hint { font-size: .8rem; color: var(--macfr-ink-2); } .macfr-modal__attach .macfr-composer__chip { inline-size: 100%; margin: 0; } } @layer macfr.components { .macfr-messenger__retention { margin: 0; padding: 12px 16px; border-block-start: 1px solid var(--macfr-line); font-size: .72rem; line-height: 1.5; color: var(--macfr-ink-2); } } @layer macfr.components { /* Supports d'exercice : image, écoute, vidéo. */ .macfr-q__media img { display: block; inline-size: 100%; border-radius: var(--macfr-radius); } .macfr-q__media--audio { padding: 14px; background: var(--macfr-bg); border-radius: var(--macfr-radius); } .macfr-q__media--audio audio { inline-size: 100%; } .macfr-q__media--video iframe, .macfr-q__media--video video { display: block; inline-size: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--macfr-radius); background: #0C0E0B; } /* Outils de support dans l'espace formateur. */ .macfr-prof__media { margin-block: 18px; padding: 16px; border: 1px solid var(--macfr-line); border-radius: var(--macfr-radius); background: var(--macfr-bg); } .macfr-prof__media-label { margin: 0 0 10px; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--macfr-ink-2); } .macfr-prof__media-row { display: flex; flex-wrap: wrap; gap: 8px; } .macfr-prof__media-state { margin: 10px 0 0; font-size: .8125rem; color: var(--macfr-done); } .macfr-prof__media .is-recording { background: var(--macfr-live); border-color: var(--macfr-live); color: #fff; } } @layer macfr.components { /* Profil côté site */ .macfr-account__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 30px; align-items: start; } .macfr-account__done { border-inline-start: 4px solid var(--macfr-done); background: var(--macfr-done-soft); font-weight: 700; } .macfr-account .macfr-form input[type="password"], .macfr-account .macfr-form input[type="file"], .macfr-account .macfr-form textarea { display: block; inline-size: 100%; margin-block-start: 7px; padding: 12px 15px; border: 2px solid var(--macfr-line); border-radius: var(--macfr-radius); background: var(--macfr-surface); font-family: inherit; font-size: 1rem; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--macfr-ink); } .macfr-account__out { margin-block-start: 18px; } /* Correction des copies dans l'espace formateur */ .macfr-prof__copy { margin-block-end: 14px; padding: 20px; border: 1px solid var(--macfr-line); border-radius: var(--macfr-radius-lg); background: var(--macfr-surface); transition: opacity .3s ease; } .macfr-prof__copy.is-done { opacity: .3; } .macfr-prof__copy-head { display: flex; align-items: center; gap: 12px; margin-block-end: 16px; } .macfr-prof__copy-head img { inline-size: 40px; block-size: 40px; border-radius: 50%; } .macfr-prof__copy-head strong { display: block; } .macfr-prof__copy-head span { display: block; font-size: .8125rem; } .macfr-prof__answer { margin-block-end: 16px; } .macfr-prof__answer-q { margin: 0 0 8px; font-weight: 700; font-size: .95rem; } .macfr-prof__answer audio { inline-size: 100%; max-inline-size: 420px; } .macfr-prof__answer blockquote { margin: 0; padding: 14px 18px; border-inline-start: 3px solid var(--macfr-line); background: var(--macfr-bg); white-space: pre-wrap; font-size: .95rem; } .macfr-prof__grade-form { padding-block-start: 16px; border-block-start: 1px solid var(--macfr-line); } } @layer macfr.components { /* Cartes de classe dans l'espace formateur */ .macfr-class-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 12px; margin-block-end: 26px; } .macfr-class-card { display: grid; gap: 4px; padding: 16px 18px; border: 2px solid var(--macfr-line); border-radius: var(--macfr-radius-lg); background: var(--macfr-surface); font-family: inherit; text-align: start; color: inherit; cursor: pointer; transition: border-color .15s ease, translate .15s ease; } .macfr-class-card:hover { border-color: var(--macfr-brand); translate: 0 -2px; } .macfr-class-card.is-active { border-color: var(--macfr-brand); background: var(--macfr-brand-soft); } .macfr-class-card__type { font-family: var(--macfr-display); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--macfr-brand); } .macfr-class-card strong { font-size: 1.05rem; } .macfr-class-card__foot { font-size: .78rem; color: var(--macfr-ink-2); } } @layer macfr.components { .macfr-course-row__class { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 0; font-size: .8125rem; color: var(--macfr-ink-2); } } @layer macfr.components { .macfr-pay-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-block: 18px; } } @layer macfr.components { .macfr-notice--quota { border-inline-start: 4px solid var(--macfr-brand); background: var(--macfr-brand-soft); font-weight: 600; } } @layer macfr.components { .macfr-quiz__window { margin: 0 0 16px; padding: 10px 16px; border-inline-start: 4px solid var(--macfr-live); background: var(--macfr-live-soft); font-size: .9rem; font-weight: 600; } .macfr-quiz__window.is-closed { border-color: var(--macfr-brand); background: var(--macfr-brand-soft); } .macfr-prof__new { margin-block-end: 26px; } .macfr-prof__new .macfr-prof__form { max-inline-size: none; margin-block-start: 16px; } .macfr-prof__row-aside { display: flex; align-items: center; gap: 10px; } } /* ========================================================================= * 25. Constructeur de questions * ====================================================================== */ @layer macfr.components { .macfr-prof__subtitle { margin: 26px 0 4px; font-size: 1.05rem; letter-spacing: .04em; } .macfr-qcard { margin-block-end: 14px; padding: 18px; border: 1px solid var(--macfr-line); border-inline-start: 3px solid var(--macfr-brand); border-radius: var(--macfr-radius-lg); background: var(--macfr-surface); } .macfr-qcard__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-block-end: 12px; } .macfr-qcard__rank { font-family: var(--macfr-display); font-size: 1.3rem; color: var(--macfr-brand); font-variant-numeric: tabular-nums; } .macfr-qcard__head select { flex: 1; min-inline-size: 170px; padding: 9px 12px; border: 2px solid var(--macfr-line); border-radius: var(--macfr-radius); background: var(--macfr-surface); font-family: inherit; font-size: .9rem; color: inherit; } .macfr-qcard__points-label { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--macfr-ink-2); } .macfr-qcard__points { inline-size: 62px; padding: 8px 10px; border: 2px solid var(--macfr-line); border-radius: var(--macfr-radius); font-family: inherit; } .macfr-qcard__tools { display: flex; gap: 4px; margin-inline-start: auto; } .macfr-qcard__tool { inline-size: 32px; block-size: 32px; border: 1px solid var(--macfr-line); border-radius: var(--macfr-radius); background: var(--macfr-surface); color: var(--macfr-ink-2); font-size: .95rem; line-height: 1; cursor: pointer; flex: 0 0 auto; } .macfr-qcard__tool:hover { border-color: var(--macfr-brand); color: var(--macfr-brand-deep); } .macfr-qcard__text, .macfr-qcard__answers input[type="text"], .macfr-qcard__answers textarea, .macfr-qcard__extras input { inline-size: 100%; padding: 11px 14px; border: 2px solid var(--macfr-line); border-radius: var(--macfr-radius); background: var(--macfr-surface); font-family: inherit; font-size: .95rem; color: inherit; } .macfr-qcard__text { margin-block-end: 12px; resize: vertical; } .macfr-qcard__media { margin-block-end: 12px; padding: 12px 14px; border-radius: var(--macfr-radius); background: var(--macfr-bg); } .macfr-qcard__media-row { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; } .macfr-qcard__media-label { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--macfr-ink-2); margin-inline-end: 4px; } .macfr-qcard__media-state { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; font-size: .8rem; } .macfr-qcard__thumb { max-inline-size: 130px; max-block-size: 80px; border-radius: var(--macfr-radius); } .macfr-qcard__audio { block-size: 34px; max-inline-size: 240px; } .macfr-qcard__media .is-recording { background: var(--macfr-live); border-color: var(--macfr-live); color: #fff; } .macfr-qcard__answers { display: grid; gap: 8px; margin-block-end: 12px; } .macfr-qcard__line { display: flex; align-items: center; gap: 8px; } .macfr-qcard__line input[type="radio"], .macfr-qcard__line input[type="checkbox"] { accent-color: var(--macfr-done); inline-size: 18px; block-size: 18px; flex: 0 0 auto; } .macfr-qcard__num { min-inline-size: 46px; font-weight: 700; color: var(--macfr-brand); font-variant-numeric: tabular-nums; } .macfr-qcard__add { justify-self: start; padding: 7px 14px; border: 1px dashed var(--macfr-line); border-radius: var(--macfr-radius); background: transparent; font-family: inherit; font-size: .82rem; font-weight: 700; color: var(--macfr-ink-2); cursor: pointer; } .macfr-qcard__add:hover { border-color: var(--macfr-brand); color: var(--macfr-brand-deep); } .macfr-qcard__extras { display: grid; gap: 8px; } } @layer macfr.state { @media (max-width: 640px) { .macfr-qcard__head select { min-inline-size: 0; inline-size: 100%; order: 3; } .macfr-qcard__tools { margin-inline-start: 0; } } } /* ========================================================================= * 26. Emploi du temps * ====================================================================== */ @layer macfr.components { .macfr-week { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 12px; } .macfr-week__day { padding: 16px; border: 1px solid var(--macfr-line); border-block-start: 3px solid var(--macfr-brand); border-radius: var(--macfr-radius-lg); background: var(--macfr-surface); } .macfr-week__label { margin: 0 0 12px; font-size: .82rem; letter-spacing: .12em; } .macfr-week__slot { display: grid; gap: 3px; padding: 12px 0; border-block-start: 1px solid var(--macfr-line); font-size: .875rem; } .macfr-week__slot:first-of-type { border-block-start: 0; padding-block-start: 0; } .macfr-week__time { font-family: var(--macfr-display); font-size: .95rem; letter-spacing: .04em; color: var(--macfr-brand); } .macfr-week__slot .macfr-tag, .macfr-week__slot .macfr-link { justify-self: start; margin-block-start: 4px; } /* Éditeur de créneaux, côté formateur */ .macfr-slots { display: grid; gap: 8px; margin-block-end: 14px; } .macfr-slot { display: grid; grid-template-columns: minmax(120px, 1fr) 110px 110px minmax(120px, 2fr) auto; gap: 8px; align-items: center; } .macfr-slot select, .macfr-slot input { inline-size: 100%; padding: 9px 12px; border: 2px solid var(--macfr-line); border-radius: var(--macfr-radius); background: var(--macfr-surface); font-family: inherit; font-size: .9rem; color: inherit; } } @layer macfr.state { @media (max-width: 700px) { .macfr-slot { grid-template-columns: 1fr 1fr; } .macfr-slot input[type="text"] { grid-column: 1 / -1; } } } /* ========================================================================= * 27. Programme — lecture d'un parcours * ====================================================================== */ @layer macfr.components { /* Ce que contient le parcours, avant d'entrer dans le détail. */ .macfr-syllabus { display: flex; flex-wrap: wrap; gap: 1px; margin: 0 0 22px; padding: 0; list-style: none; background: var(--macfr-line); border: 1px solid var(--macfr-line); border-radius: var(--macfr-radius-lg); overflow: hidden; } .macfr-syllabus li { flex: 1 1 110px; display: grid; gap: 2px; padding: 14px 18px; background: var(--macfr-surface); text-align: center; } .macfr-syllabus strong { font-family: var(--macfr-display); font-size: 1.4rem; line-height: 1; } .macfr-syllabus span { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--macfr-ink-2); } /* En-tête de module : le numéro, le titre, l'avancement. */ .macfr-module__head { align-items: center; } .macfr-module__main { flex: 1; min-inline-size: 0; } .macfr-module.is-complete { border-color: var(--macfr-done); } .macfr-module.is-complete .macfr-module__rank { color: var(--macfr-done); } .macfr-module__progress { flex: 0 0 auto; display: grid; gap: 5px; inline-size: 108px; justify-items: end; } .macfr-module__count { font-family: var(--macfr-display); font-size: .8rem; letter-spacing: .06em; color: var(--macfr-ink-2); font-variant-numeric: tabular-nums; } .macfr-module__bar { display: block; inline-size: 100%; block-size: 5px; background: var(--macfr-line); overflow: hidden; } .macfr-module__bar span { display: block; block-size: 100%; background: var(--macfr-done); transition: inline-size .5s cubic-bezier(.2, .8, .2, 1); } /* La marque porte une lettre : L leçon, E exercice, D direct, ✓ terminé. */ .macfr-item__mark { display: grid; place-items: center; inline-size: 26px; block-size: 26px; border-radius: var(--macfr-radius); font-family: var(--macfr-display); font-size: .72rem; line-height: 1; color: var(--macfr-ink-2); clip-path: none; } .macfr-item__mark--exercice { border-radius: 50%; } .macfr-item__mark--direct { border-color: var(--macfr-live); color: var(--macfr-live); } .macfr-item.is-done .macfr-item__mark { color: #fff; } .macfr-tag--locked { border-style: dashed; } } @layer macfr.state { @media (max-width: 640px) { .macfr-module__head { flex-wrap: wrap; } .macfr-module__progress { inline-size: 100%; justify-items: start; } .macfr-syllabus li { flex-basis: 90px; padding: 12px 10px; } } } /* ========================================================================= * 28. Espace entreprise * ====================================================================== */ @layer macfr.components { .macfr-company__switch { display: grid; gap: 4px; } .macfr-company__switch select { padding: 10px 14px; border: 2px solid var(--macfr-line); border-radius: var(--macfr-radius); background: var(--macfr-surface); font-family: inherit; font-size: .95rem; color: inherit; } /* Un tableau : un service formation compare des lignes. */ .macfr-table-wrap { overflow-x: auto; } .macfr-table { inline-size: 100%; border-collapse: collapse; background: var(--macfr-surface); border: 1px solid var(--macfr-line); border-radius: var(--macfr-radius-lg); overflow: hidden; font-size: .92rem; } .macfr-table th { padding: 14px 16px; background: var(--macfr-bg); border-block-end: 1px solid var(--macfr-line); font-family: var(--macfr-display); font-size: .72rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; text-align: start; color: var(--macfr-ink-2); white-space: nowrap; } .macfr-table td { padding: 14px 16px; border-block-end: 1px solid var(--macfr-line); vertical-align: middle; font-variant-numeric: tabular-nums; } .macfr-table tr:last-child td { border-block-end: 0; } .macfr-company__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-block-start: 18px; } .macfr-company__note { margin-block-start: 30px; padding-block-start: 18px; border-block-start: 1px solid var(--macfr-line); } } @layer macfr.state { /* Sur téléphone, chaque ligne devient une fiche lisible. */ @media (max-width: 760px) { .macfr-table thead { display: none; } .macfr-table, .macfr-table tbody, .macfr-table tr, .macfr-table td { display: block; inline-size: 100%; } .macfr-table tr { margin-block-end: 10px; border: 1px solid var(--macfr-line); border-radius: var(--macfr-radius-lg); } .macfr-table td { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 16px; } .macfr-table td::before { content: attr(data-label); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--macfr-ink-2); } } } /* ========================================================================= * 29. Attestation de fin de parcours * ====================================================================== */ @layer macfr.components { .macfr-cert { max-inline-size: 760px; margin-inline: auto; padding: 52px 56px; background: #fff; border: 1px solid var(--macfr-line); border-block-start: 6px solid var(--macfr-brand); border-radius: var(--macfr-radius-lg); color: #101110; } .macfr-cert__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 14px; padding-block-end: 22px; border-block-end: 1px solid var(--macfr-line); } .macfr-cert__issuer { margin: 0 0 4px; font-family: var(--macfr-display); font-size: 1.15rem; letter-spacing: .04em; color: var(--macfr-brand); } .macfr-cert__title { margin: 0; font-size: 1.5rem; letter-spacing: .02em; } .macfr-cert__ref { margin: 0; font-size: .75rem; color: var(--macfr-ink-2); font-variant-numeric: tabular-nums; } .macfr-cert__lead { margin: 26px 0 6px; font-size: .95rem; color: var(--macfr-ink-2); } .macfr-cert__name { margin: 0; font-family: var(--macfr-display); font-size: 2rem; line-height: 1.15; letter-spacing: .01em; } .macfr-cert__company { margin: 4px 0 0; font-size: .95rem; color: var(--macfr-ink-2); } .macfr-cert__course { margin: 0; padding-inline-start: 16px; border-inline-start: 4px solid var(--macfr-brand); font-size: 1.35rem; font-weight: 800; } .macfr-cert__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 18px 26px; margin: 34px 0 0; padding: 24px 0; border-block: 1px solid var(--macfr-line); } .macfr-cert__facts dt { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--macfr-ink-2); } .macfr-cert__facts dd { margin: 4px 0 0; font-family: var(--macfr-display); font-size: 1.2rem; } .macfr-cert__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-block-start: 30px; font-size: .88rem; } .macfr-cert__sign { color: var(--macfr-ink-2); } .macfr-cert__note { margin-block-start: 26px; font-size: .75rem; color: var(--macfr-ink-2); } .macfr-cert__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; justify-content: center; margin-block-start: 26px; } .macfr-course-row__cert { margin: 6px 0 0; font-size: .82rem; } } /* À l'impression, seule l'attestation subsiste. */ @media print { body * { visibility: hidden; } .macfr-cert, .macfr-cert * { visibility: visible; } .macfr-cert { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 100%; max-inline-size: none; border: 0; padding: 0; } .macfr-no-print { display: none !important; } } @layer macfr.components { /* Vue formateur sur un exercice : on pilote, on ne rend pas. */ .macfr-quiz__intro--staff { border-inline-start: 4px solid var(--macfr-live); } .macfr-quiz__staff-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 18px 8px; } .macfr-quiz__preview-note { font-size: .8rem; } } @layer macfr.components { /* Demande d'autorisation de notification : présente, jamais bloquante. */ .macfr-permission { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-block-end: 16px; padding: 12px 16px; border: 1px solid var(--macfr-line); border-inline-start: 4px solid var(--macfr-live); border-radius: var(--macfr-radius); background: var(--macfr-surface); font-size: .875rem; } .macfr-permission span:first-child { flex: 1; min-inline-size: 200px; } } /* ========================================================================= * 30. Alertes en direct * ====================================================================== */ .macfr-live { position: fixed; inset-block-end: 20px; inset-inline-end: 20px; z-index: 9998; display: grid; gap: 10px; max-inline-size: min(340px, calc(100vw - 40px)); pointer-events: none; } .macfr-live__card { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #FFFFFF; border: 1px solid #E2E5DE; border-inline-start: 4px solid #0B47B0; border-radius: 12px; box-shadow: 0 12px 30px rgba(16, 17, 16, .16); text-decoration: none; color: #101110; font-family: inherit; font-size: .875rem; pointer-events: auto; animation: macfr-live-in .32s cubic-bezier(.2, .8, .2, 1); } .macfr-live__card img { inline-size: 36px; block-size: 36px; border-radius: 50%; flex: 0 0 auto; } .macfr-live__card span { display: grid; gap: 2px; min-inline-size: 0; } .macfr-live__card strong { font-size: .9rem; } .macfr-live__card span span { color: #5B6157; font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .macfr-live__card.is-leaving { opacity: 0; translate: 0 8px; transition: opacity .35s ease, translate .35s ease; } @keyframes macfr-live-in { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } } @media (prefers-reduced-motion: reduce) { .macfr-live__card { animation: none; } } @layer macfr.components { .macfr-messenger__sound { margin: 0; padding: 10px 16px; border-block-end: 1px solid var(--macfr-line); } [data-macfr-sound].is-active { border-color: var(--macfr-done); color: var(--macfr-done); } } .macfr-offline { position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 9999; padding: 10px 16px; border: 0; background: #B8410A; color: #fff; font-family: inherit; font-size: .85rem; text-align: center; cursor: pointer; } /* ========================================================================= * 31. Barre de discussion * ====================================================================== */ .macfr-dock { position: fixed; inset-block-end: 0; inset-inline-end: 18px; z-index: 9997; display: flex; align-items: flex-end; gap: 12px; font-family: "Public Sans", system-ui, sans-serif; } .macfr-dock__launcher { display: flex; align-items: center; gap: 8px; padding: 11px 20px; border: 1px solid #E2E5DE; border-block-end: 0; border-radius: 12px 12px 0 0; background: #FFFFFF; box-shadow: 0 -4px 20px rgba(16, 17, 16, .10); font-family: inherit; font-size: .9rem; font-weight: 700; color: #101110; cursor: pointer; } .macfr-dock.has-unread .macfr-dock__launcher { border-color: #D2540B; color: #B8410A; } .macfr-dock__badge { display: grid; place-items: center; min-inline-size: 20px; block-size: 20px; padding-inline: 6px; border-radius: 100px; background: #D2540B; color: #fff; font-size: .72rem; font-variant-numeric: tabular-nums; } .macfr-dock__panel { position: absolute; inset-block-end: 46px; inset-inline-end: 0; inline-size: min(320px, calc(100vw - 36px)); max-block-size: 60vh; overflow-y: auto; background: #FFFFFF; border: 1px solid #E2E5DE; border-radius: 12px; box-shadow: 0 18px 40px rgba(16, 17, 16, .18); } .macfr-dock__head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-block-end: 1px solid #EDEFEA; } .macfr-dock__all { font-size: .8rem; color: #B8410A; text-decoration: none; } .macfr-dock__empty { margin: 0; padding: 18px 16px; color: #5B6157; font-size: .85rem; text-align: center; } .macfr-dock__list { margin: 0; padding: 0; list-style: none; } .macfr-dock__thread { display: flex; align-items: center; gap: 10px; inline-size: 100%; padding: 11px 16px; border: 0; background: transparent; font-family: inherit; text-align: start; cursor: pointer; } .macfr-dock__thread:hover { background: #F6F7F5; } .macfr-dock__thread img { inline-size: 34px; block-size: 34px; border-radius: 50%; flex: 0 0 auto; } .macfr-dock__thread-text { display: grid; gap: 1px; min-inline-size: 0; flex: 1; } .macfr-dock__thread-text strong { font-size: .875rem; } .macfr-dock__thread-text span { font-size: .78rem; color: #5B6157; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .macfr-dock__count { display: grid; place-items: center; min-inline-size: 18px; block-size: 18px; border-radius: 100px; background: #D2540B; color: #fff; font-size: .7rem; } /* --- Fenêtres de conversation ------------------------------------------ */ .macfr-dock__windows { display: flex; align-items: flex-end; gap: 12px; } .macfr-chat { display: flex; flex-direction: column; inline-size: 300px; block-size: 380px; background: #FFFFFF; border: 1px solid #E2E5DE; border-block-end: 0; border-radius: 12px 12px 0 0; box-shadow: 0 -4px 24px rgba(16, 17, 16, .14); overflow: hidden; } .macfr-chat.is-folded { block-size: auto; } .macfr-chat.is-folded .macfr-chat__body, .macfr-chat.is-folded .macfr-chat__form { display: none; } .macfr-chat.is-ringing { animation: macfr-ring 1s ease 3; } @keyframes macfr-ring { 0%, 100% { box-shadow: 0 -4px 24px rgba(16, 17, 16, .14); } 50% { box-shadow: 0 -4px 24px rgba(210, 84, 11, .55); } } .macfr-chat__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; background: #101110; color: #fff; cursor: pointer; } .macfr-chat__head strong { font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .macfr-chat__tools { display: flex; gap: 2px; flex: 0 0 auto; } .macfr-chat__tool { inline-size: 24px; block-size: 24px; border: 0; border-radius: 6px; background: transparent; color: #fff; font-size: .9rem; line-height: 1; cursor: pointer; } .macfr-chat__tool:hover { background: rgba(255, 255, 255, .16); } .macfr-chat__body { flex: 1; overflow-y: auto; padding: 12px; display: grid; gap: 8px; align-content: start; background: #F6F7F5; } .macfr-chat__msg { max-inline-size: 82%; padding: 8px 12px; border-radius: 14px; background: #FFFFFF; border: 1px solid #E2E5DE; font-size: .85rem; line-height: 1.45; justify-self: start; white-space: pre-wrap; overflow-wrap: anywhere; } .macfr-chat__msg.is-mine { justify-self: end; background: #D2540B; border-color: #D2540B; color: #fff; } .macfr-chat__msg.is-pending { opacity: .6; } .macfr-chat__msg.is-failed { background: #B8410A; border-color: #B8410A; color: #FFFFFF; } .macfr-chat__author { display: block; font-size: .7rem; font-weight: 700; color: #5B6157; margin-block-end: 2px; } .macfr-chat__form { display: flex; align-items: flex-end; gap: 8px; padding: 10px; border-block-start: 1px solid #EDEFEA; } .macfr-chat__form textarea { flex: 1; resize: none; padding: 9px 12px; border: 1px solid #E2E5DE; border-radius: 18px; font-family: inherit; font-size: .85rem; line-height: 1.4; max-block-size: 90px; } .macfr-chat__send { inline-size: 34px; block-size: 34px; border: 0; border-radius: 50%; background: #D2540B; color: #fff; cursor: pointer; flex: 0 0 auto; } /* --- Téléphone et tablette -------------------------------------------- */ @media (max-width: 780px) { .macfr-dock { inset-inline: 0; justify-content: flex-end; padding-inline-end: 12px; } .macfr-dock__panel { inline-size: calc(100vw - 24px); max-block-size: 70vh; } /* * Une fenêtre flottante n'a pas de sens sur un écran de téléphone : * la conversation prend tout l'espace, comme dans une application. */ .macfr-dock__windows { position: fixed; inset: 0; z-index: 9998; display: block; pointer-events: none; } .macfr-dock__windows:empty { display: none; } .macfr-chat { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; border-radius: 0; pointer-events: auto; } /* Deux fenêtres ouvertes : seule la dernière est visible. */ .macfr-chat:not(:last-child) { display: none; } .macfr-chat.is-folded { display: none; } .macfr-chat__head { padding: 14px 16px; font-size: 1rem; } .macfr-chat__tool { inline-size: 34px; block-size: 34px; font-size: 1.1rem; } /* Un champ à moins de 16 px déclenche le zoom automatique d'iOS. */ .macfr-chat__form textarea { font-size: 16px; } .macfr-chat__form { padding: 12px; padding-block-end: max(12px, env(safe-area-inset-bottom)); } .macfr-chat__send { inline-size: 40px; block-size: 40px; } .macfr-chat__clip { inline-size: 38px; block-size: 38px; } .macfr-chat__msg { max-inline-size: 88%; font-size: .95rem; } } @media (prefers-reduced-motion: reduce) { .macfr-chat.is-ringing { animation: none; } } /* Témoin de liaison : gris quand la connexion est perdue, vert en direct. */ .macfr-dock__dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: #9AA096; flex: 0 0 auto; transition: background .3s ease; } .macfr-dock__dot.is-live { background: #3C5A0E; box-shadow: 0 0 0 3px rgba(60, 90, 14, .18); } /* Invitation à activer les alertes, dans la barre de discussion. */ .macfr-dock__ask { display: grid; gap: 8px; padding: 14px 16px; border-block-end: 1px solid #EDEFEA; background: #F6F7F5; font-size: .82rem; color: #5B6157; } .macfr-dock__ask .macfr-btn { justify-self: start; } /* --- Pièces jointes dans la fenêtre de discussion ---------------------- */ .macfr-chat__clip { inline-size: 32px; block-size: 32px; border: 0; border-radius: 50%; background: transparent; font-size: 1rem; line-height: 1; cursor: pointer; flex: 0 0 auto; } .macfr-chat__clip:hover { background: #EDEFEA; } .macfr-chat__pending { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #F6F7F5; border-block-start: 1px solid #EDEFEA; font-size: .78rem; color: #5B6157; } .macfr-chat__pending img { inline-size: 32px; block-size: 32px; object-fit: cover; border-radius: 6px; } .macfr-chat__pending-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: #101110; } .macfr-chat__pending-size { flex: 0 0 auto; } .macfr-chat__pending .macfr-chat__tool { color: #5B6157; } .macfr-chat__failed { color: #B8410A; } .macfr-chat.is-dropping { outline: 2px dashed #D2540B; outline-offset: -6px; } .macfr-chat__image { display: block; margin-block-start: 6px; } .macfr-chat__image img { display: block; max-inline-size: 100%; border-radius: 10px; } .macfr-chat__file { display: grid; gap: 2px; margin-block-start: 6px; padding: 8px 12px; border-radius: 10px; background: rgba(16, 17, 16, .06); text-decoration: none; color: inherit; } .macfr-chat__msg.is-mine .macfr-chat__file { background: rgba(255, 255, 255, .18); } .macfr-chat__file-name { font-weight: 700; font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .macfr-chat__file-size { font-size: .72rem; opacity: .75; } .macfr-chat__msg audio { inline-size: 100%; margin-block-start: 6px; } /* La messagerie complète, sur téléphone : champs à 16 px pour éviter le zoom automatique d'iOS, et zone de saisie au-dessus de la barre système. */ @media (max-width: 780px) { .macfr-composer textarea, .macfr-messenger__search input { font-size: 16px; } .macfr-composer { padding-block-end: max(12px, env(safe-area-inset-bottom)); } .macfr-messenger__sound { display: flex; flex-wrap: wrap; gap: 8px; } } /* ========================================================================= * 32. Appel vidéo * ====================================================================== */ .macfr-call { position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column; background: #0C0E0B; } .macfr-call__head { display: flex; align-items: center; gap: 16px; padding: 12px 18px; color: #fff; font-family: "Public Sans", system-ui, sans-serif; font-size: .9rem; } .macfr-call__tab { margin-inline-start: auto; color: rgba(255, 255, 255, .7); font-size: .8rem; text-decoration: none; } .macfr-call__tab:hover { color: #fff; } .macfr-call__close { inline-size: 34px; block-size: 34px; border: 0; border-radius: 50%; background: #B8410A; color: #fff; font-size: 1.2rem; line-height: 1; cursor: pointer; } .macfr-call__frame { flex: 1; inline-size: 100%; border: 0; } .macfr-chat__call { font-size: .95rem; } .macfr-chat__join { display: block; margin-block-start: 8px; padding: 8px 14px; border: 0; border-radius: 100px; background: #0B47B0; color: #fff; font-family: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; } .macfr-chat__msg.is-mine .macfr-chat__join { background: rgba(255, 255, 255, .22); } @layer macfr.components { .macfr-conv__call { margin-inline-start: auto; } .macfr-conv__call svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; } } /* ========================================================================= * 33. Appel vidéo intégré * ====================================================================== */ .macfr-rtc { position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column; background: #0C0E0B; font-family: "Public Sans", system-ui, sans-serif; } .macfr-rtc__grid { flex: 1; display: grid; gap: 8px; padding: 14px; place-content: stretch; grid-template-columns: 1fr; min-block-size: 0; } /* Deux à quatre participants : la grille se réorganise d'elle-même. */ .macfr-rtc__grid[data-count="2"] { grid-template-columns: repeat(2, 1fr); } .macfr-rtc__grid[data-count="3"], .macfr-rtc__grid[data-count="4"] { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); } .macfr-rtc__tile { position: relative; overflow: hidden; border-radius: 14px; background: #161A14; min-block-size: 0; } .macfr-rtc__tile video { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; } /* Sa propre image en miroir : sans cela, on lève la main gauche et l'image montre la droite, ce qui trouble tout le monde. */ .macfr-rtc__tile.is-self video { transform: scaleX(-1); } .macfr-rtc__name { position: absolute; inset-block-end: 10px; inset-inline-start: 12px; padding: 4px 10px; border-radius: 100px; background: rgba(12, 14, 11, .62); color: #fff; font-size: .78rem; font-weight: 600; } .macfr-rtc__status { margin: 0; padding: 0 16px 10px; color: rgba(255, 255, 255, .72); font-size: .85rem; text-align: center; } .macfr-rtc__bar { display: flex; justify-content: center; gap: 12px; padding: 14px; padding-block-end: max(14px, env(safe-area-inset-bottom)); background: rgba(0, 0, 0, .35); } .macfr-rtc__btn { inline-size: 52px; block-size: 52px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 1.2rem; line-height: 1; cursor: pointer; transition: background .15s ease; } .macfr-rtc__btn:hover { background: rgba(255, 255, 255, .24); } .macfr-rtc__btn.is-off { background: #B8410A; } .macfr-rtc__btn.is-on { background: #3C5A0E; } .macfr-rtc__hang { background: #D2540B; } .macfr-rtc__hang:hover { background: #B8410A; } @media (max-width: 780px) { .macfr-rtc__grid { padding: 8px; gap: 6px; } .macfr-rtc__grid[data-count="2"] { grid-template-columns: 1fr; grid-template-rows: repeat(2, 1fr); } .macfr-rtc__btn { inline-size: 58px; block-size: 58px; } } /* État d'une vignette : reconnexion, attente, échec. */ .macfr-rtc__state { position: absolute; inset-block-start: 10px; inset-inline-start: 12px; padding: 4px 10px; border-radius: 100px; background: rgba(210, 84, 11, .88); color: #fff; font-size: .72rem; font-weight: 700; } .macfr-rtc__tile.is-waiting video { opacity: .35; } .macfr-rtc__tile.is-waiting::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 12px, transparent 12px 24px); } /* ========================================================================= * 34. Appel entrant * ====================================================================== */ .macfr-incoming { position: fixed; inset-block-start: 20px; inset-inline-end: 20px; z-index: 10001; display: flex; align-items: center; gap: 14px; max-inline-size: min(420px, calc(100vw - 32px)); padding: 16px 18px; border-radius: 16px; background: #101110; color: #fff; box-shadow: 0 18px 44px rgba(16, 17, 16, .38); font-family: "Public Sans", system-ui, sans-serif; animation: macfr-incoming-in .3s cubic-bezier(.2, .8, .2, 1); } .macfr-incoming img { inline-size: 48px; block-size: 48px; border-radius: 50%; flex: 0 0 auto; animation: macfr-pulse 1.6s ease-in-out infinite; } .macfr-incoming__who { flex: 1; display: grid; gap: 2px; min-inline-size: 0; } .macfr-incoming__who strong { font-size: .98rem; } .macfr-incoming__who span { font-size: .8rem; color: rgba(255, 255, 255, .7); } .macfr-incoming button { padding: 10px 16px; border: 0; border-radius: 100px; font-family: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; flex: 0 0 auto; } .macfr-incoming__accept { background: #3C5A0E; color: #fff; } .macfr-incoming__refuse { background: rgba(255, 255, 255, .16); color: #fff; } @keyframes macfr-incoming-in { from { opacity: 0; translate: 0 -12px; } to { opacity: 1; translate: 0 0; } } @keyframes macfr-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(210, 84, 11, .6); } 50% { box-shadow: 0 0 0 10px rgba(210, 84, 11, 0); } } @media (max-width: 600px) { .macfr-incoming { inset-inline: 12px; inset-block-start: 12px; flex-wrap: wrap; } .macfr-incoming__who { min-inline-size: 100%; order: -1; } } @media (prefers-reduced-motion: reduce) { .macfr-incoming, .macfr-incoming img { animation: none; } } /* ========================================================================= * 35. Rafraîchissement — respirations, rondeurs, profondeur * * Cette couche ne réécrit pas l'existant : elle l'ajuste. Trois principes. * * 1. Des angles plus doux, mais jamais mous : 10 px pour les champs, * 16 px pour les blocs. Le trait du logo est courbe, l'interface suit. * 2. De la profondeur par l'ombre plutôt que par le trait. Une bordure * partout fatigue l'œil ; une ombre légère hiérarchise sans bruit. * 3. De l'air. La plupart des interfaces datées se reconnaissent à leur * manque d'espace, pas à leurs couleurs. * ====================================================================== */ @layer macfr.tokens { .macfr { --macfr-radius: 10px; --macfr-radius-lg: 16px; /* Ombres calées sur la teinte de l'encre : une ombre grise sur un fond chaud grise toute la page. */ --macfr-shadow-1: 0 1px 2px rgba(16, 17, 16, .04), 0 2px 8px rgba(16, 17, 16, .04); --macfr-shadow-2: 0 2px 6px rgba(16, 17, 16, .06), 0 12px 28px rgba(16, 17, 16, .08); --macfr-shadow-3: 0 20px 50px rgba(16, 17, 16, .14); } } @layer macfr.components { /* --- Blocs et cartes ---------------------------------------------- */ .macfr-block, .macfr-course-row, .macfr-session-row, .macfr-stat, .macfr-module, .macfr-qcard, .macfr-class-card, .macfr-week__day, .macfr-test, .macfr-review { box-shadow: var(--macfr-shadow-1); border-color: color-mix(in srgb, var(--macfr-line) 60%, transparent); } .macfr-course-row, .macfr-session-row, .macfr-class-card { transition: box-shadow .18s ease, translate .18s ease, border-color .18s ease; } .macfr-course-row:hover, .macfr-session-row:hover, .macfr-class-card:hover { box-shadow: var(--macfr-shadow-2); translate: 0 -2px; } /* --- Titres : plus d'air au-dessus, moins en dessous -------------- */ .macfr-block__title { margin-block: 0 18px; letter-spacing: .01em; } .macfr-block + .macfr-block { margin-block-start: 34px; } /* --- Champs -------------------------------------------------------- */ .macfr input[type="text"], .macfr input[type="email"], .macfr input[type="url"], .macfr input[type="password"], .macfr input[type="number"], .macfr input[type="date"], .macfr input[type="time"], .macfr input[type="datetime-local"], .macfr select, .macfr textarea { border-width: 1px; background: var(--macfr-surface); box-shadow: inset 0 1px 2px rgba(16, 17, 16, .03); transition: border-color .15s ease, box-shadow .15s ease; } .macfr input:focus-visible, .macfr select:focus-visible, .macfr textarea:focus-visible { outline: none; border-color: var(--macfr-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--macfr-brand) 18%, transparent); } /* --- Boutons : une ombre courte, qui s'efface au clic -------------- */ .macfr-btn { border-radius: 100px; box-shadow: 0 1px 2px rgba(16, 17, 16, .10); transition: translate .12s ease, box-shadow .18s ease, filter .18s ease; } .macfr-btn:hover { box-shadow: 0 4px 12px rgba(210, 84, 11, .24); translate: 0 -1px; } .macfr-btn:active { translate: 0 0; box-shadow: none; } .macfr-btn--ghost { box-shadow: none; } .macfr-btn--ghost:hover { box-shadow: var(--macfr-shadow-1); } /* --- Statistiques : le chiffre porte, le libellé accompagne -------- */ .macfr-stat { padding-block: 20px; } .macfr-stat__value { letter-spacing: -.01em; } /* --- Étiquettes ---------------------------------------------------- */ .macfr-tag, .macfr-badge-pill { border-radius: 100px; } /* --- Barres de progression ---------------------------------------- */ .macfr-meter, .macfr-progress__track, .macfr-module__bar, .macfr-funnel__track { border-radius: 100px; overflow: hidden; } /* --- En-tête de l'espace ------------------------------------------ */ .macfr-hero { box-shadow: var(--macfr-shadow-1); } } @layer macfr.state { /* Sur téléphone, on resserre les marges mais on garde les respirations verticales : c'est l'entassement qui rend une interface illisible. */ @media (max-width: 640px) { .macfr-block { padding-inline: 16px; } .macfr-block + .macfr-block { margin-block-start: 24px; } .macfr-stats { gap: 10px; } .macfr-stat { padding: 16px 14px; } .macfr-hero { border-radius: var(--macfr-radius-lg); } } @media (prefers-reduced-motion: reduce) { .macfr-course-row:hover, .macfr-session-row:hover, .macfr-class-card:hover, .macfr-btn:hover { translate: none; } } } @layer macfr.components { .macfr-dock__group { font-weight: 400; color: #5B6157; font-size: .78rem; } /* Écrire à une classe, dans l'espace formateur. */ .macfr-prof__classmail { margin-block-end: 30px; padding: 22px; border: 1px solid var(--macfr-line); border-radius: var(--macfr-radius-lg); background: var(--macfr-surface); box-shadow: var(--macfr-shadow-1); } .macfr-prof__classmail .macfr-prof__subtitle { margin-block-start: 0; } .macfr-prof__classmail .macfr-prof__form { max-inline-size: none; margin-block-start: 14px; } } /* ========================================================================= * 36. Choix des destinataires * ====================================================================== */ @layer macfr.components { .macfr-picklist { margin-block-end: 16px; } .macfr-picklist__label { margin: 0 0 8px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--macfr-ink-2); } .macfr-picklist__items { display: flex; flex-wrap: wrap; gap: 8px; } .macfr-picklist__chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border: 1px solid var(--macfr-line); border-radius: 100px; background: var(--macfr-surface); font-size: .85rem; cursor: pointer; transition: border-color .15s ease, background .15s ease; } .macfr-picklist__chip:hover { border-color: var(--macfr-brand); } .macfr-picklist__chip.is-picked { border-color: var(--macfr-brand); background: var(--macfr-brand-soft); } .macfr-picklist__chip img { inline-size: 26px; block-size: 26px; border-radius: 50%; } .macfr-picklist__chip input { accent-color: var(--macfr-brand); inline-size: 16px; block-size: 16px; } .macfr-picklist__hint { margin: 10px 0 0; font-size: .8rem; color: var(--macfr-ink-2); } } @layer macfr.components { /* Message vocal dans la fenêtre de discussion. */ .macfr-chat__voice.is-recording { background: #B8410A; color: #fff; animation: macfr-rec 1.4s ease-in-out infinite; } .macfr-chat__rec { color: #B8410A; font-weight: 700; } @keyframes macfr-rec { 0%, 100% { box-shadow: 0 0 0 0 rgba(184, 65, 10, .5); } 50% { box-shadow: 0 0 0 8px rgba(184, 65, 10, 0); } } /* Choix d'une classe dans la nouvelle conversation. */ .macfr-modal__classes { margin-block-end: 18px; } .macfr-classpick { display: grid; gap: 8px; margin-block-end: 14px; } .macfr-classpick__item { display: grid; gap: 2px; padding: 12px 16px; border: 1px solid var(--macfr-line); border-radius: var(--macfr-radius); background: var(--macfr-surface); font-family: inherit; text-align: start; color: inherit; cursor: pointer; transition: border-color .15s ease, background .15s ease; } .macfr-classpick__item:hover { border-color: var(--macfr-brand); } .macfr-classpick__item.is-active { border-color: var(--macfr-brand); background: var(--macfr-brand-soft); } .macfr-classpick__item strong { font-size: .95rem; } .macfr-classpick__item span { font-size: .78rem; color: var(--macfr-ink-2); } .macfr-modal__or { margin: 18px 0 14px; padding-block-start: 14px; border-block-start: 1px solid var(--macfr-line); font-size: .8rem; color: var(--macfr-ink-2); text-align: center; } } @media (prefers-reduced-motion: reduce) { .macfr-chat__voice.is-recording { animation: none; } } /* ========================================================================= * 37. Barre de discussion — couleurs vives * * Le noir des en-têtes venait des messageries généralistes ; il jure avec * l'orange du logo et rend certains boutons difficiles à distinguer. On * repasse sur les couleurs de la marque, avec un contraste vérifié : texte * blanc sur orange profond, au-dessus du seuil AA dans les deux sens. * ====================================================================== */ .macfr-chat__head { background: linear-gradient(135deg, #D2540B 0%, #B8410A 100%); color: #FFFFFF; border-block-end: 0; } .macfr-chat__tool { background: rgba(255, 255, 255, .18); color: #FFFFFF; } .macfr-chat__tool:hover { background: rgba(255, 255, 255, .32); } /* Le bouton d'appel se distingue du reste de l'en-tête. */ .macfr-chat__call { background: rgba(255, 255, 255, .26); } .macfr-chat__call:hover { background: #FFFFFF; color: #B8410A; } /* Corps de la conversation : un fond chaud, jamais gris. */ .macfr-chat__body { background: #FBF8F4; } .macfr-chat__msg { background: #FFFFFF; border-color: #E8E2D9; color: #101110; } /* * Ses propres messages. * * L'orange du logo (#D2540B) ne donne que 4,19 de contraste avec le blanc : * insuffisant pour du texte courant. On descend d'un cran vers #A8390A, qui * atteint 6,4 tout en restant la même couleur à l'œil. */ .macfr-chat__msg.is-mine { background: #A8390A; border-color: #A8390A; color: #FFFFFF; } .macfr-chat__author { color: #8A6A4F; } /* Lanceur et panneau : blanc franc, liseré orange quand il y a du nouveau. */ .macfr-dock__launcher { background: #FFFFFF; color: #101110; border-color: #E8E2D9; } .macfr-dock.has-unread .macfr-dock__launcher { background: #D2540B; border-color: #D2540B; color: #FFFFFF; } .macfr-dock.has-unread .macfr-dock__badge { background: #FFFFFF; color: #B8410A; } .macfr-dock.has-unread .macfr-dock__dot.is-live { background: #FFFFFF; box-shadow: 0 0 0 3px rgba(255, 255, 255, .32); } .macfr-dock__panel { border-color: #E8E2D9; } .macfr-dock__head { border-block-end-color: #F0E9E0; } .macfr-dock__thread:hover { background: #FDF6F0; } .macfr-dock__ask { background: #FDF6F0; border-block-end-color: #F0E9E0; } /* Appel entrant : orange plutôt que noir, on l'attend plus qu'on ne le subit. */ .macfr-incoming { background: linear-gradient(135deg, #D2540B 0%, #B8410A 100%); color: #FFFFFF; box-shadow: 0 18px 44px rgba(184, 65, 10, .34); } .macfr-incoming__who span { color: rgba(255, 255, 255, .82); } .macfr-incoming__accept { background: #FFFFFF; color: #B8410A; } .macfr-incoming__refuse { background: rgba(255, 255, 255, .22); color: #FFFFFF; } /* La fenêtre d'appel vidéo reste sombre : c'est le seul endroit où c'est justifié, une image de caméra se lit mal sur un fond clair. */ /* --- Boutons devenus invisibles ------------------------------------------ * Un bouton fantôme sur fond coloré perdait sa bordure et son texte. * On force ici une couleur lisible partout où le fond n'est pas neutre. * --------------------------------------------------------------------- */ .macfr-chat .macfr-btn--ghost, .macfr-dock .macfr-btn--ghost, .macfr-incoming .macfr-btn--ghost { border-color: currentColor; color: inherit; background: transparent; } .macfr-chat__send { background: #D2540B; color: #FFFFFF; } .macfr-chat__send:hover { background: #B8410A; } .macfr-chat__clip { color: #6B5340; } .macfr-chat__clip:hover { background: #F3E7DC; color: #B8410A; } /* Le message provisoire doit rester lisible : une opacité trop basse le faisait disparaître sur fond orange. */ .macfr-chat__msg.is-pending { opacity: .78; } /* ========================================================================= * 38. Lisibilité — aucun bouton ne doit disparaître * * Le défaut vient toujours du même mécanisme : un bouton pensé pour un fond * clair posé sur un fond coloré ou sombre. Plutôt que de corriger au cas par * cas, on déclare ici la règle générale, puis les exceptions. * ====================================================================== */ @layer macfr.components { /* Le bouton fantôme a toujours une bordure visible, jamais transparente. */ .macfr-btn--ghost { border: 2px solid var(--macfr-line); background: var(--macfr-surface); color: var(--macfr-ink); } .macfr-btn--ghost:hover { border-color: var(--macfr-brand); color: var(--macfr-brand-deep); background: var(--macfr-brand-soft); } /* Le bouton plein garde son texte blanc quoi qu'il arrive : sur un thème sombre, une couleur héritée le rendrait illisible. */ .macfr-btn { color: #FFFFFF; } .macfr-btn:disabled { opacity: .55; cursor: not-allowed; } /* Étiquettes et pastilles : jamais de texte de la même teinte que le fond. */ .macfr-tag { border: 1px solid var(--macfr-line); color: var(--macfr-ink-2); background: var(--macfr-surface); } .macfr-badge-pill { background: var(--macfr-brand-soft); color: var(--macfr-brand-deep); } .macfr-badge-pill--done { background: var(--macfr-done-soft); color: var(--macfr-done); } /* Les icônes en trait suivent la couleur du texte : sans cela, une icône noire sur un en-tête coloré devient un carré sombre. */ .macfr-icon-btn svg { stroke: currentColor; fill: none; } /* Champs à l'intérieur d'un bloc coloré. */ .macfr-hero input, .macfr-hero select, .macfr-hero textarea { background: var(--macfr-surface); color: var(--macfr-ink); } } @layer macfr.state { /* Contraste renforcé : certains apprenants l'activent sur leur système. */ @media (prefers-contrast: more) { .macfr-btn--ghost { border-width: 2px; border-color: var(--macfr-ink); } .macfr-tag, .macfr-badge-pill { border: 1px solid var(--macfr-ink-2); } .macfr-muted { color: var(--macfr-ink); } } } /* ========================================================================= * 39. Application mobile — les gestes et les marges du système * * Une application web installée se trahit par trois détails : le contenu * qui passe sous l'encoche, le rebond élastique au bout du défilement, et * la sélection de texte qui s'active en maintenant le doigt. On les traite. * ====================================================================== */ @media (display-mode: standalone) { /* Marges de sécurité : encoche en haut, barre de gestes en bas, et les côtés en mode paysage sur iPhone. */ body { padding-block-start: env(safe-area-inset-top); padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); overscroll-behavior-y: none; } .macfr-dock { inset-block-end: env(safe-area-inset-bottom); } .macfr-chat__form { padding-block-end: max(12px, env(safe-area-inset-bottom)); } .macfr-rtc__bar { padding-block-end: max(14px, env(safe-area-inset-bottom)); } /* En application, la barre du navigateur n'existe plus : l'en-tête du site prend sa place et doit rester visible. */ .mac-header, .macfr-hero { padding-block-start: 12px; } } .macfr { /* Un appui long sur un bouton ne doit pas proposer « Copier ». */ -webkit-touch-callout: none; /* Le surlignage bleu d'Android au toucher fait daté : on le remplace par la réaction visuelle propre à chaque élément. */ -webkit-tap-highlight-color: transparent; } /* Le texte des messages reste sélectionnable : on veut pouvoir le copier. */ .macfr-msg__bubble, .macfr-chat__text, .macfr-conv__body, .macfr input, .macfr textarea { -webkit-touch-callout: default; user-select: text; } @media (pointer: coarse) { /* * Cibles tactiles. * * Quarante-quatre pixels : la taille sous laquelle un doigt manque sa * cible une fois sur cinq. C'est la mesure recommandée par Apple comme * par Google, et le premier défaut des interfaces conçues à la souris. */ .macfr-btn, .macfr-icon-btn, .macfr-chat__tool, .macfr-chat__clip, .macfr-chat__send, .macfr-qcard__tool, .macfr-prof__tab { min-block-size: 44px; min-inline-size: 44px; } .macfr-prof__tabs { gap: 4px; } .macfr-picklist__chip { padding-block: 10px; } /* Les listes défilent avec l'inertie du système. */ .macfr-chat__body, .macfr-conv__body, .macfr-dock__panel, .macfr-table-wrap { -webkit-overflow-scrolling: touch; } } /* Les onglets de l'espace formateur deviennent une bande défilante plutôt qu'une liste repliée sur trois lignes. */ @media (max-width: 780px) { .macfr-prof__tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-block-end: 4px; } .macfr-prof__tabs::-webkit-scrollbar { display: none; } .macfr-prof__tab { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; } } /* Invitation à installer l'application. */ .macfr-install { position: fixed; inset-block-end: max(16px, env(safe-area-inset-bottom)); inset-inline: 16px; z-index: 9996; display: flex; align-items: center; gap: 12px; max-inline-size: 520px; margin-inline: auto; padding: 14px 16px; border-radius: 16px; background: #FFFFFF; border: 1px solid #E8E2D9; box-shadow: 0 16px 40px rgba(16, 17, 16, .18); font-family: "Public Sans", system-ui, sans-serif; font-size: .875rem; color: #101110; animation: macfr-install-in .32s cubic-bezier(.2, .8, .2, 1); } .macfr-install span { flex: 1; } .macfr-install__go { padding: 10px 18px; border: 0; border-radius: 100px; background: #A8390A; color: #FFFFFF; font-family: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; flex: 0 0 auto; } .macfr-install__close { inline-size: 32px; block-size: 32px; border: 0; border-radius: 50%; background: transparent; color: #5B6157; font-size: 1.1rem; cursor: pointer; flex: 0 0 auto; } @keyframes macfr-install-in { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } } @media (display-mode: standalone) { .macfr-install { display: none; } } @media (prefers-reduced-motion: reduce) { .macfr-install { animation: none; } } /* ========================================================================= * 40. Identité de la page d'accueil, portée à la plateforme * * On reprend le système de la page d'accueil : le bleu marine porte * l'autorité et les titres, l'orange marque l'action, le vert la réussite. * Fraunces pour les titres, Inter pour le texte courant. * * Cette couche redéfinit les jetons plutôt que de réécrire les composants : * tout ce qui les utilise suit automatiquement, sans qu'aucune règle * existante n'ait à changer. * ====================================================================== */ @layer macfr.tokens { .macfr { /* --- Palette ------------------------------------------------- */ --macfr-navy: #06366F; --macfr-navy-2: #004AAD; --macfr-brand: #D5570A; --macfr-brand-2: #F2872E; --macfr-brand-deep: #A23F06; --macfr-olive: #365907; --macfr-olive-2: #4E7A12; --macfr-blue: var(--macfr-navy-2); --macfr-live: var(--macfr-navy-2); --macfr-done: var(--macfr-olive); /* --- Neutres : crème plutôt que blanc cassé olive ------------ */ --macfr-ink: #222222; --macfr-ink-2: #6B6B6B; --macfr-surface: #FFFFFF; --macfr-bg: #FCFAF7; --macfr-line: #ECE4D9; --macfr-brand-soft: #FBE7D6; --macfr-done-soft: #EBF1E1; --macfr-live-soft: color-mix(in oklab, var(--macfr-navy-2) 8%, transparent); /* --- Formes -------------------------------------------------- */ --macfr-radius: 14px; --macfr-radius-lg: 20px; --macfr-stroke-radius: 26px; --macfr-shadow-1: 0 10px 30px -18px rgba(6, 54, 111, .32); --macfr-shadow-2: 0 26px 70px -34px rgba(6, 54, 111, .40); --macfr-shadow-3: 0 30px 80px -30px rgba(6, 54, 111, .45); --macfr-shadow: var(--macfr-shadow-1); /* --- Typographie --------------------------------------------- */ --macfr-display: 'Fraunces', Georgia, 'Times New Roman', serif; --macfr-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans Arabic', sans-serif; font-family: var(--macfr-body); line-height: 1.65; -webkit-font-smoothing: antialiased; } } @layer macfr.components { /* --- Titres : Fraunces, serrés, en bleu marine ------------------- */ .macfr h1, .macfr h2, .macfr h3, .macfr h4, .macfr-block__title, .macfr-hero__name, .macfr-stat__value { font-family: var(--macfr-display); font-weight: 600; line-height: 1.08; letter-spacing: -.02em; text-transform: none; } .macfr h1, .macfr h2, .macfr-block__title, .macfr-hero__name { color: var(--macfr-navy); } .macfr-stat__value { color: var(--macfr-navy); font-weight: 600; } /* * Les surtitres gardent Inter en capitales espacées, avec le filet * orange de la page d'accueil : c'est la signature la plus reconnaissable * du système, et elle ne coûte rien à reproduire. */ .macfr-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--macfr-body); font-weight: 600; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--macfr-brand); } .macfr-eyebrow::before { content: ""; inline-size: 26px; block-size: 1.5px; background: var(--macfr-brand); flex: none; } /* --- Boutons : dégradé orange, ombre portée chaude --------------- */ /* * Le dégradé du bouton. * * Celui de la page d'accueil part de #F2872E, qui n'offre que 2,54 de * contraste avec du texte blanc — le libellé y devient difficile à lire * sur la partie gauche. On resserre donc le dégradé entre #D5570A et * #A23F06 : l'effet reste, la lisibilité passe partout le seuil AA. */ .macfr-btn { background: linear-gradient(100deg, var(--macfr-brand), var(--macfr-brand-deep)); border: 0; border-radius: 999px; font-family: var(--macfr-body); font-weight: 600; font-size: .98rem; letter-spacing: 0; text-transform: none; box-shadow: 0 16px 34px -14px rgba(180, 74, 12, .9); } .macfr-btn:hover { background: linear-gradient(100deg, var(--macfr-brand-2), var(--macfr-brand)); box-shadow: 0 22px 44px -16px rgba(232, 105, 27, .9); translate: 0 -2px; } .macfr-btn--ghost { background: var(--macfr-surface); border: 1.5px solid var(--macfr-line); color: var(--macfr-navy); box-shadow: none; } .macfr-btn--ghost:hover { border-color: var(--macfr-brand); color: var(--macfr-brand); background: var(--macfr-surface); box-shadow: var(--macfr-shadow-1); } /* --- Blocs et cartes -------------------------------------------- */ .macfr-block, .macfr-course-row, .macfr-session-row, .macfr-class-card, .macfr-module, .macfr-qcard, .macfr-test, .macfr-review, .macfr-week__day { border-radius: var(--macfr-radius-lg); box-shadow: var(--macfr-shadow-1); } .macfr-course-row:hover, .macfr-session-row:hover, .macfr-class-card:hover { box-shadow: var(--macfr-shadow-2); translate: 0 -4px; } /* * Le filet orange qui se déploie au survol : repris des cartes de * langues. Il donne le sentiment d'une interface qui répond, sans * animation coûteuse. */ .macfr-course-row, .macfr-class-card, .macfr-test { position: relative; overflow: hidden; } .macfr-course-row::before, .macfr-class-card::before, .macfr-test::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 4px; background: linear-gradient(90deg, var(--macfr-brand-2), var(--macfr-brand)); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; z-index: 2; } .macfr-course-row:hover::before, .macfr-class-card:hover::before, .macfr-test:hover::before { transform: scaleX(1); } /* --- En-tête d'espace : le dégradé marine ------------------------ */ .macfr-hero { position: relative; overflow: hidden; background: linear-gradient(150deg, var(--macfr-navy), var(--macfr-navy-2)); border: 0; border-radius: 24px; color: #FFFFFF; box-shadow: var(--macfr-shadow-2); } /* La lueur orange en coin, signature des blocs marine. */ .macfr-hero::after { content: ""; position: absolute; inline-size: 300px; block-size: 300px; inset-inline-end: -80px; inset-block-start: -90px; background: radial-gradient(circle, rgba(232, 105, 27, .40), transparent 65%); filter: blur(20px); pointer-events: none; } .macfr-hero > * { position: relative; z-index: 1; } .macfr-hero__name { color: #FFFFFF; } .macfr-hero__level, .macfr-hero__meter-text { color: #C9C6DD; } .macfr-hero .macfr-eyebrow { color: var(--macfr-brand-2); } .macfr-hero .macfr-eyebrow::before { background: var(--macfr-brand-2); } .macfr-hero .macfr-meter { background: rgba(255, 255, 255, .16); } /* --- Statistiques ------------------------------------------------ */ .macfr-stat { background: var(--macfr-surface); border: 1px solid var(--macfr-line); border-radius: var(--macfr-radius-lg); box-shadow: var(--macfr-shadow-1); } /* --- Étiquettes -------------------------------------------------- */ .macfr-tag, .macfr-badge-pill { border-radius: 999px; font-family: var(--macfr-body); font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } .macfr-badge-pill { background: var(--macfr-brand-soft); color: var(--macfr-brand-deep); } .macfr-badge-pill--done { background: var(--macfr-done-soft); color: var(--macfr-olive); } /* --- Champs ------------------------------------------------------ */ .macfr input[type="text"], .macfr input[type="email"], .macfr input[type="url"], .macfr input[type="password"], .macfr input[type="number"], .macfr input[type="date"], .macfr input[type="time"], .macfr input[type="datetime-local"], .macfr select, .macfr textarea { border-radius: var(--macfr-radius); border-color: var(--macfr-line); } .macfr input:focus-visible, .macfr select:focus-visible, .macfr textarea:focus-visible { border-color: var(--macfr-brand); box-shadow: 0 0 0 3px rgba(213, 87, 10, .16); } /* --- Liens ------------------------------------------------------- */ .macfr-link { color: var(--macfr-brand-deep); } .macfr-link:hover { color: var(--macfr-brand); } } /* --- La barre de discussion suit la même palette ---------------------- */ .macfr-chat__head { background: linear-gradient(150deg, #06366F, #004AAD); } .macfr-chat__body { background: #FCFAF7; } .macfr-chat__msg { border-color: #ECE4D9; } .macfr-chat__msg.is-mine { background: #A23F06; border-color: #A23F06; } .macfr-chat__author { color: #6B6B6B; } .macfr-chat__send { background: #A23F06; } .macfr-chat__send:hover { background: #8F3505; } .macfr-chat__clip { color: #06366F; } .macfr-chat__clip:hover { background: #FBE7D6; color: #A23F06; } .macfr-chat__join { background: #004AAD; } .macfr-dock__launcher { border-color: #ECE4D9; color: #06366F; } .macfr-dock.has-unread .macfr-dock__launcher { background: #A23F06; border-color: #A23F06; } .macfr-dock__badge { background: #D5570A; } .macfr-dock__count { background: #D5570A; } .macfr-dock__panel { border-color: #ECE4D9; } .macfr-dock__head { border-block-end-color: #F3EDE4; } .macfr-dock__thread:hover { background: #FDF6F0; } .macfr-dock__ask { background: #FDF6F0; border-block-end-color: #F3EDE4; } .macfr-dock__all { color: #A23F06; } .macfr-dock__dot.is-live { background: #4E7A12; box-shadow: 0 0 0 3px rgba(78, 122, 18, .20); } /* L'appel entrant reste orange : c'est une sollicitation, pas une information — le marine l'y ferait passer inaperçu. */ .macfr-incoming { background: linear-gradient(135deg, #D5570A, #A23F06); } .macfr-incoming__accept { background: #FFFFFF; color: #A23F06; } .macfr-install__go { background: #A23F06; } .macfr-permission { border-inline-start-color: #004AAD; } @layer macfr.components { /* Ligne de total d'un tableau : elle doit se lire d'un coup d'œil. */ .macfr-table__total td { background: var(--macfr-brand-soft); border-block-start: 2px solid var(--macfr-brand); } /* Le sous-texte d'une cellule — forme de la classe, détail du calcul. */ .macfr-table .macfr-muted { display: block; margin-block-start: 2px; font-size: .78rem; font-weight: 400; } .macfr-prof__subtitle { margin-block: 28px 12px; font-family: var(--macfr-display); font-size: 1.15rem; color: var(--macfr-navy); } } /* ========================================================================= * 41. Lisibilité des blocs marine * * Le défaut, et sa cause : la règle « .macfr h2 » pose le bleu marine sur * tous les titres. Sa spécificité (0,1,1) dépasse celle de * « .macfr-hero__name » (0,1,0), qui posait le blanc. Le nom du formateur * s'affichait donc en marine sur un fond marine. * * On corrige par la spécificité plutôt qu'avec !important : les règles * restent lisibles et surchargeables. * ====================================================================== */ @layer macfr.components { .macfr .macfr-hero h1, .macfr .macfr-hero h2, .macfr .macfr-hero h3, .macfr .macfr-hero__name, .macfr .macfr-hero strong { color: #FFFFFF; } .macfr .macfr-hero__level, .macfr .macfr-hero__meter-text, .macfr .macfr-hero p, .macfr .macfr-hero small { color: rgba(255, 255, 255, .86); } .macfr .macfr-hero .macfr-eyebrow { color: #FFC48C; } .macfr .macfr-hero .macfr-eyebrow::before { background: #FFC48C; } .macfr .macfr-hero a:not(.macfr-btn) { color: #FFFFFF; border-block-end-color: rgba(255, 255, 255, .5); } /* Même correction partout où le fond est sombre. */ .macfr .macfr-platformcard h1, .macfr .macfr-platformcard h2, .macfr .macfr-platformcard h3, .macfr .macfr-call h1, .macfr .macfr-call h2, .macfr .macfr-rtc h2, .macfr .macfr-incoming strong { color: #FFFFFF; } /* * Les onglets de l'espace formateur. * * Fraunces convient aux titres, pas à une barre de navigation : les * capitales en serif se lisent mal et prennent trop de place. On revient * à Inter pour les onglets. */ .macfr .macfr-prof__tab { font-family: var(--macfr-body); font-weight: 600; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; } .macfr .macfr-prof__tab.is-active { color: var(--macfr-brand); } } @layer macfr.components { /* Sélecteur de point de vue, dans l'en-tête marine. */ .macfr-hero__switch { display: grid; gap: 4px; justify-items: start; margin-block-start: 16px; } .macfr .macfr-hero__switch .macfr-field__label { color: rgba(255, 255, 255, .8); } .macfr-hero__switch select { padding: 10px 14px; border: 1px solid rgba(255, 255, 255, .28); border-radius: var(--macfr-radius); background: rgba(255, 255, 255, .12); color: #FFFFFF; font-family: inherit; font-size: .9rem; } /* Les options héritent du fond du système : sans cela, texte blanc sur fond blanc dans la liste déroulante ouverte. */ .macfr-hero__switch select option { color: #101110; background: #FFFFFF; } } @layer macfr.components { /* Relevé de fidélité : un gain se distingue d'une utilisation. */ .macfr-plus { color: var(--macfr-olive); } .macfr-minus { color: var(--macfr-brand-deep); } .macfr-field--loyalty { padding-block: 10px; } } @layer macfr.components { /* Sélecteur de langue : trois choix visibles d'un coup d'œil. */ .macfr-langs { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--macfr-line); border-radius: 999px; background: var(--macfr-surface); } .macfr-langs__item { padding: 7px 16px; border-radius: 999px; font-size: .85rem; font-weight: 600; color: var(--macfr-ink-2); text-decoration: none; transition: background .15s ease, color .15s ease; } .macfr-langs__item:hover { color: var(--macfr-brand-deep); background: var(--macfr-brand-soft); } .macfr-langs__item.is-active { background: var(--macfr-navy); color: #FFFFFF; } } @layer macfr.components { /* Détail nominatif des règlements, replié par défaut : le total suffit la plupart du temps, le détail sert quand on veut vérifier. */ .macfr-learners { margin-block-start: 8px; } .macfr-learners > summary { font-size: .78rem; color: var(--macfr-ink-2); cursor: pointer; list-style: none; } .macfr-learners > summary::-webkit-details-marker { display: none; } .macfr-learners > summary::before { content: '▸ '; display: inline-block; transition: rotate .15s ease; } .macfr-learners[open] > summary::before { rotate: 90deg; } .macfr-learners > summary:hover { color: var(--macfr-brand-deep); } .macfr-learners__list { margin: 8px 0 0; padding: 10px 12px; list-style: none; border-radius: var(--macfr-radius); background: var(--macfr-bg); font-size: .82rem; font-weight: 400; } .macfr-learners__list li { display: flex; justify-content: space-between; gap: 14px; padding-block: 3px; } .macfr-learners__list li + li { border-block-start: 1px solid var(--macfr-line); } .macfr-learners__list span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; } } /* ========================================================================= * 42. Messagerie — agir sur un message précis * * Trois principes de forme : les actions restent discrètes tant qu'on ne * les cherche pas, la citation se distingue nettement du message qui la * porte, et un message supprimé garde sa place sans attirer l'œil. * ====================================================================== */ @layer macfr.components { .macfr-msg { position: relative; } /* --- Citation du message auquel on répond ------------------------ */ .macfr-msg__quote { display: block; inline-size: 100%; margin-block-end: 8px; padding: 8px 11px; border: 0; border-inline-start: 3px solid var(--macfr-brand); border-radius: 8px; background: color-mix(in oklab, var(--macfr-brand) 8%, transparent); font: inherit; font-size: .82rem; text-align: start; cursor: pointer; transition: background .15s ease; } .macfr-msg__quote:hover { background: color-mix(in oklab, var(--macfr-brand) 14%, transparent); } .macfr-msg__quote strong { display: block; margin-block-end: 2px; font-size: .76rem; color: var(--macfr-brand-deep); } .macfr-msg__quote span { display: block; color: var(--macfr-ink-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* Dans une bulle à soi, fond sombre : la citation s'éclaircit. */ .macfr-msg--mine .macfr-msg__quote { border-inline-start-color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .16); } .macfr-msg--mine .macfr-msg__quote:hover { background: rgba(255, 255, 255, .24); } .macfr-msg--mine .macfr-msg__quote strong { color: #FFFFFF; } .macfr-msg--mine .macfr-msg__quote span { color: rgba(255, 255, 255, .85); } /* --- Actions au survol -------------------------------------------- */ /* * L'ancienne barre flottante. * * Elle se plaçait hors de la bulle et n'apparaissait qu'au survol — * inexistant au doigt. Remplacée par un chevron dans la bulle, elle * n'est plus produite ; la règle reste pour les vues non encore * rechargées. */ .macfr-msg__tools { display: none; } .macfr-msg--mine .macfr-msg__tools { inset-inline-end: auto; inset-inline-start: 100%; padding-inline: 6px 0; } .macfr-msg:hover .macfr-msg__tools, .macfr-msg:focus-within .macfr-msg__tools { opacity: 1; pointer-events: auto; } .macfr-msg__tool { inline-size: 28px; block-size: 28px; border: 1px solid var(--macfr-line); border-radius: 50%; background: var(--macfr-surface); color: var(--macfr-ink-2); font-size: .82rem; line-height: 1; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; } .macfr-msg__tool:hover { border-color: var(--macfr-brand); background: var(--macfr-brand-soft); color: var(--macfr-brand-deep); } .macfr-msg__tool--danger:hover { border-color: #B8410A; background: #FDEDE9; color: #7A2A05; } /* Sur écran tactile, il n'y a pas de survol : les actions restent visibles, en plus discret. */ @media (hover: none) { .macfr-msg__tools { opacity: .5; pointer-events: auto; } } /* --- Marques d'état ----------------------------------------------- */ .macfr-msg__edited { font-size: .7rem; font-style: italic; opacity: .7; } .macfr-msg.is-deleted .macfr-msg__bubble { border: 1px dashed var(--macfr-line); background: transparent; box-shadow: none; } .macfr-msg.is-deleted .macfr-msg__text { font-style: italic; color: var(--macfr-ink-2); } .macfr-msg--mine.is-deleted .macfr-msg__text { color: var(--macfr-ink-2); } /* Surbrillance brève quand on revient à un message cité. */ .macfr-msg.is-highlighted .macfr-msg__bubble { animation: macfr-flash 1.6s ease; } @keyframes macfr-flash { 0%, 100% { box-shadow: var(--macfr-shadow-1); } 20%, 60% { box-shadow: 0 0 0 3px color-mix(in oklab, var(--macfr-brand) 45%, transparent); } } /* --- Modification sur place --------------------------------------- */ .macfr-msg__editor { display: grid; gap: 8px; } .macfr-msg__editor textarea { inline-size: 100%; min-block-size: 60px; padding: 9px 11px; border: 1px solid var(--macfr-line); border-radius: 10px; background: var(--macfr-surface); font: inherit; font-size: .92rem; color: var(--macfr-ink); resize: vertical; } .macfr-msg__editor-actions { display: flex; gap: 8px; justify-content: flex-end; } .macfr-btn--small { padding: 7px 15px; font-size: .82rem; box-shadow: none; } /* --- Bandeau « en réponse à » ------------------------------------- */ .macfr-replying { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-block-start: 1px solid var(--macfr-line); border-inline-start: 3px solid var(--macfr-brand); background: var(--macfr-bg); font-size: .84rem; } .macfr-replying[hidden] { display: none; } .macfr-replying__body { flex: 1; min-inline-size: 0; display: grid; gap: 1px; } .macfr-replying__body strong { font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--macfr-brand-deep); } .macfr-replying__body span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--macfr-ink-2); } .macfr-replying__cancel { flex: none; inline-size: 26px; block-size: 26px; border: 0; border-radius: 50%; background: transparent; color: var(--macfr-ink-2); font-size: 1.2rem; line-height: 1; cursor: pointer; } .macfr-replying__cancel:hover { background: var(--macfr-line); color: var(--macfr-ink); } } @layer macfr.components { /* Statuts de présence : la couleur porte le sens avant le mot. */ .macfr-tag--present { background: var(--macfr-done-soft); color: var(--macfr-olive); } .macfr-tag--late { background: #FDF3E3; color: #8A5A0B; } .macfr-tag--excused { background: var(--macfr-live-soft); color: var(--macfr-navy-2); } .macfr-tag--absent { background: #FDEDE9; color: #8F3505; } /* Le choix « absence tolérée » se distingue dans la feuille d'appel : c'est le seul qui engage la rémunération et le rattrapage. */ .macfr-prof__choice--excused { border-color: var(--macfr-navy-2); } .macfr-prof__choice--excused input:checked + span { background: var(--macfr-navy-2); color: #FFFFFF; } } /* ========================================================================= * 43. Lisibilité sur fond sombre — règles hors couche * * Le problème, et pourquoi il résistait aux corrections précédentes : le * thème déclare ses propres couches de cascade, chargées après celles de * l'extension. Une couche postérieure l'emporte sur toutes les précédentes, * quelle que soit la spécificité des sélecteurs. La règle « h1, h2, h3 en * bleu marine » du thème écrasait donc nos règles, même écrites avec une * spécificité supérieure. * * Ces déclarations sont volontairement HORS de toute couche : les styles * non affectés à une couche l'emportent sur tous les styles en couche. * C'est le mécanisme prévu pour ce cas, et il évite le recours à * !important, qui empêcherait toute surcharge ultérieure. * ====================================================================== */ .macfr .macfr-hero, .macfr .macfr-hero h1, .macfr .macfr-hero h2, .macfr .macfr-hero h3, .macfr .macfr-hero h4, .macfr .macfr-hero__name, .macfr .macfr-hero strong, .macfr .macfr-hero b, .macfr .macfr-hero a:not(.macfr-btn) { color: #FFFFFF; } .macfr .macfr-hero p, .macfr .macfr-hero small, .macfr .macfr-hero time, .macfr .macfr-hero__level, .macfr .macfr-hero__meter-text, .macfr .macfr-hero .macfr-muted { color: rgba(255, 255, 255, .88); } /* * Le surtitre sur fond marine. * * L'orange de la charte (#F2872E) n'offre que 3,21 de contraste sur le bleu * clair du dégradé : suffisant pour un gros titre, insuffisant pour ces * petites capitales. On l'éclaircit à #FFC48C, qui monte à 5,24 tout en * restant reconnaissable comme l'orange de la maison. */ .macfr .macfr-hero .macfr-eyebrow { color: #FFC48C; } .macfr .macfr-hero .macfr-eyebrow::before { background: #FFC48C; } /* La jauge de progression et son remplissage. */ .macfr .macfr-hero .macfr-meter { background: rgba(255, 255, 255, .20); } .macfr .macfr-hero .macfr-meter__fill { background: linear-gradient(90deg, #F2872E, #D5570A); } /* Le palier atteint, sous le nom. */ .macfr .macfr-hero__tier, .macfr .macfr-hero__badge { color: rgba(255, 255, 255, .92); } /* Les autres blocs marine de la plateforme. */ .macfr .macfr-platformcard, .macfr .macfr-platformcard h1, .macfr .macfr-platformcard h2, .macfr .macfr-platformcard h3, .macfr .macfr-platformcard strong, .macfr .macfr-call h2, .macfr .macfr-rtc h2, .macfr .macfr-incoming, .macfr .macfr-incoming strong, .macfr .macfr-chat__head, .macfr .macfr-chat__head strong { color: #FFFFFF; } .macfr .macfr-platformcard p, .macfr .macfr-chat__head small { color: rgba(255, 255, 255, .85); } /* Une bulle de message à soi : fond orange profond, texte blanc. */ .macfr .macfr-msg--mine .macfr-msg__text, .macfr .macfr-msg--mine .macfr-msg__meta, .macfr .macfr-msg--mine time { color: #FFFFFF; } /* Le sélecteur de langue actif : blanc sur marine. */ .macfr .macfr-langs__item.is-active { color: #FFFFFF; } /* --- Boutons : mêmes règles hors couche ------------------------------- */ .macfr .macfr-btn, .macfr a.macfr-btn, .macfr button.macfr-btn, .macfr .macfr-btn:link, .macfr .macfr-btn:visited { background: linear-gradient(100deg, #C24F09, #8F3505); color: #FFFFFF; border: 0; text-decoration: none; } .macfr .macfr-btn:hover, .macfr a.macfr-btn:hover, .macfr .macfr-btn:focus { background: linear-gradient(100deg, #D5570A, #A23F06); color: #FFFFFF; } .macfr .macfr-btn--ghost, .macfr a.macfr-btn--ghost { background: #FFFFFF; color: #06366F; border: 1.5px solid #ECE4D9; } .macfr .macfr-btn--ghost:hover, .macfr a.macfr-btn--ghost:hover { background: #FFFFFF; color: #A23F06; border-color: #D5570A; } /* Dans un bloc marine, le bouton fantôme s'inverse. */ .macfr .macfr-hero .macfr-btn--ghost, .macfr .macfr-platformcard .macfr-btn--ghost { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, .45); } /* Le bouton blanc, posé sur un fond marine. */ .macfr .macfr-btn--white, .macfr a.macfr-btn--white { background: #FFFFFF; color: #A23F06; border: 0; } .macfr .macfr-btn--white:hover { background: #FFFFFF; color: #8F3505; } /* Le bouton d'appel entrant : blanc sur orange, toujours lisible. */ .macfr .macfr-incoming__accept { background: #FFFFFF; color: #A23F06; } .macfr .macfr-incoming__decline { background: rgba(255, 255, 255, .2); color: #FFFFFF; } /* Les petits boutons d'action de la messagerie. */ .macfr .macfr-msg__tool { color: #5B6157; background: #FFFFFF; } .macfr .macfr-msg__tool:hover { color: #A23F06; background: #FBE7D6; } /* * Dernier recours pour la couleur des libellés. * * Une extension tierce impose sa couleur de lien avec !important — ni la * spécificité ni les règles hors couche n'en viennent à bout. On limite la * portée au texte du bouton, et à rien d'autre. */ .macfr .macfr-btn, .macfr .macfr-btn:link, .macfr .macfr-btn:visited, .macfr .macfr-btn:hover, .macfr a.macfr-btn, .macfr a.macfr-btn:hover { color: #FFFFFF !important; } .macfr .macfr-btn--ghost, .macfr a.macfr-btn--ghost { color: #06366F !important; } .macfr .macfr-btn--ghost:hover { color: #A23F06 !important; } .macfr .macfr-hero .macfr-btn--ghost { color: #FFFFFF !important; } .macfr .macfr-btn--white, .macfr a.macfr-btn--white { color: #A23F06 !important; } @layer macfr.components { /* --- Historique des relevés de présence -------------------------- */ .macfr-att-row { margin-block-end: 8px; border: 1px solid var(--macfr-line); border-radius: var(--macfr-radius); background: var(--macfr-surface); overflow: hidden; } /* Un appel oublié se repère sans ouvrir la ligne. */ .macfr-att-row.is-pending { border-inline-start: 3px solid #D5570A; } .macfr-att-row > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; padding: 13px 16px; cursor: pointer; list-style: none; font-size: .9rem; } .macfr-att-row > summary::-webkit-details-marker { display: none; } .macfr-att-row > summary::before { content: '▸'; transition: rotate .15s ease; color: var(--macfr-ink-2); } .macfr-att-row[open] > summary::before { rotate: 90deg; } .macfr-att-row > summary:hover { background: var(--macfr-bg); } .macfr-att-row > summary strong { min-inline-size: 90px; color: var(--macfr-navy); } .macfr-att-row__state { margin-inline-start: auto; padding: 3px 10px; border-radius: 999px; background: var(--macfr-done-soft); color: var(--macfr-olive); font-size: .72rem; font-weight: 600; } .macfr-att-row.is-pending .macfr-att-row__state { background: #FDF3E3; color: #8A5A0B; } .macfr-att-row__body { padding: 4px 16px 16px; border-block-start: 1px solid var(--macfr-line); } .macfr-att-row__list { margin: 12px 0; padding: 0; list-style: none; display: grid; gap: 8px; } .macfr-att-row__list li { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: .9rem; } .macfr-att-row__list select { min-inline-size: 150px; padding: 7px 10px; border: 1px solid var(--macfr-line); border-radius: 10px; font-family: inherit; font-size: .85rem; } } /* ========================================================================= * 44. Messagerie — apparence complète * * Règles hors couche, et chacune pose ENSEMBLE le fond et le texte. C'est * la leçon d'un défaut précédent : du texte blanc imposé sur une bulle * restée pâle rendait mes propres messages illisibles. Une couleur de texte * ne se décide jamais sans savoir sur quoi elle se pose. * ====================================================================== */ /* --- La conversation -------------------------------------------------- */ .macfr .macfr-conv__body { display: flex; flex-direction: column; gap: 3px; padding: 20px 18px 10px; background: #F4F1EC; } /* Le séparateur de journée, en pastille centrée. */ .macfr .macfr-conv__day { align-self: center; margin-block: 14px 10px; padding: 5px 14px; border-radius: 999px; background: rgba(6, 54, 111, .07); color: #5B6157; font-size: .74rem; font-weight: 600; } .macfr .macfr-conv__head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: #FFFFFF; border-block-end: 1px solid #F1EDE6; } .macfr .macfr-conv__titles strong { color: #06366F; font-size: 1rem; } .macfr .macfr-conv__titles small { color: #7A8069; } .macfr .macfr-conv__avatar { inline-size: 40px; block-size: 40px; border-radius: 50%; object-fit: cover; } .macfr .macfr-conv__call, .macfr .macfr-conv__back { inline-size: 40px; block-size: 40px; border: 0; border-radius: 50%; background: transparent; color: #06366F; cursor: pointer; display: grid; place-items: center; } .macfr .macfr-conv__call { margin-inline-start: auto; } .macfr .macfr-conv__call:hover, .macfr .macfr-conv__back:hover { background: #FBE7D6; color: #A23F06; } /* --- Les bulles -------------------------------------------------------- */ .macfr .macfr-msg { display: flex; align-items: flex-end; gap: 8px; max-inline-size: min(76%, 560px); } .macfr .macfr-msg--mine { margin-inline-start: auto; flex-direction: row-reverse; } .macfr .macfr-msg__bubble { position: relative; padding: 10px 13px 6px; border-radius: 16px; background: #FFFFFF; color: #101110; font-size: .93rem; line-height: 1.5; box-shadow: 0 1px 2px rgba(6, 54, 111, .10); } /* * Mes messages : fond orange profond ET texte blanc, dans la même règle. * L'orange retenu tient 6,46 de contraste avec du blanc. */ .macfr .macfr-msg--mine .macfr-msg__bubble { background: #A23F06; color: #FFFFFF; } .macfr .macfr-msg--mine .macfr-msg__text, .macfr .macfr-msg--mine .macfr-msg__author { color: #FFFFFF; } .macfr .macfr-msg--mine .macfr-msg__meta, .macfr .macfr-msg--mine .macfr-msg__meta time, .macfr .macfr-msg--mine .macfr-msg__edited { color: rgba(255, 255, 255, .78); } .macfr .macfr-msg--mine .macfr-msg__bubble a { color: #FFE3C4; } /* * Le coin pointu du premier message d'une suite. * * C'est ce détail qui distingue une messagerie moderne d'une simple liste : * il regroupe visuellement les messages d'un même interlocuteur. */ .macfr .macfr-msg:not(.is-grouped) .macfr-msg__bubble { border-end-start-radius: 5px; } .macfr .macfr-msg--mine:not(.is-grouped) .macfr-msg__bubble { border-end-start-radius: 16px; border-end-end-radius: 5px; } .macfr .macfr-msg__spacer { inline-size: 30px; flex: none; } .macfr .macfr-msg__author { display: block; margin-block-end: 3px; font-size: .76rem; font-weight: 700; color: #A23F06; } .macfr .macfr-msg__text { margin: 0; } .macfr .macfr-msg__text a { color: #A23F06; } .macfr .macfr-msg__meta { display: flex; align-items: center; justify-content: flex-end; gap: 5px; margin-block-start: 2px; font-size: .68rem; color: #7A8069; } .macfr .macfr-msg__ticks svg { inline-size: 15px; block-size: 9px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; opacity: .75; } /* Les coches bleues du message lu : le repère universel. */ .macfr .macfr-msg--mine .macfr-msg__ticks.is-read { color: #5FC3F5; } .macfr .macfr-msg--mine .macfr-msg__ticks.is-read svg { opacity: 1; } /* --- La liste des conversations ---------------------------------------- */ .macfr .macfr-threads { background: #FFFFFF; } .macfr .macfr-thread { display: block; inline-size: 100%; padding: 13px 16px; border: 0; border-block-end: 1px solid #F1EDE6; background: #FFFFFF; text-align: start; cursor: pointer; transition: background .15s ease; } .macfr .macfr-thread:hover { background: #FBF8F4; } .macfr .macfr-thread.is-active { background: #FDF2E9; border-inline-start: 3px solid #A23F06; padding-inline-start: 13px; } .macfr .macfr-thread__line { display: flex; align-items: baseline; gap: 10px; } .macfr .macfr-thread__name, .macfr .macfr-thread__subject { color: #06366F; font-weight: 600; font-size: .93rem; } .macfr .macfr-thread__date { margin-inline-start: auto; color: #7A8069; font-size: .76rem; white-space: nowrap; } .macfr .macfr-thread__excerpt { margin: 3px 0 0; color: #5B6157; font-size: .84rem; } .macfr .macfr-thread__unread { min-inline-size: 20px; block-size: 20px; padding-inline: 6px; border-radius: 999px; background: #4E7A12; color: #FFFFFF; font-size: .7rem; font-weight: 700; display: grid; place-items: center; } /* --- La zone de saisie -------------------------------------------------- */ .macfr .macfr-composer__bar { display: flex; align-items: flex-end; gap: 8px; padding: 12px 14px; background: #FFFFFF; border-block-start: 1px solid #F1EDE6; } .macfr .macfr-composer__bar textarea { flex: 1; min-block-size: 42px; max-block-size: 160px; padding: 11px 15px; border: 1px solid #E4E0D8; border-radius: 21px; background: #F7F4EF; font-family: inherit; font-size: 16px; line-height: 1.45; color: #101110; resize: none; } .macfr .macfr-composer__bar textarea:focus { outline: none; border-color: #A23F06; background: #FFFFFF; } .macfr .macfr-icon-btn { inline-size: 42px; block-size: 42px; border: 0; border-radius: 50%; background: transparent; color: #5B6157; display: grid; place-items: center; cursor: pointer; flex: none; transition: background .15s ease, color .15s ease; } .macfr .macfr-icon-btn:hover { background: #FBE7D6; color: #A23F06; } .macfr .macfr-icon-btn.is-recording { background: #A23F06; color: #FFFFFF; } .macfr .macfr-icon-btn--send { background: #A23F06; color: #FFFFFF; } .macfr .macfr-icon-btn--send:hover { background: #8F3505; color: #FFFFFF; } .macfr .macfr-composer__chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: #FBE7D6; color: #A23F06; font-size: .82rem; } .macfr .macfr-composer__hint { color: #7A8069; font-size: .78rem; } /* --- Les boutons de réglage du son -------------------------------------- */ /* * Ils étaient orange plein, ce qui les faisait passer pour des actions * principales et rendait leur libellé difficile à lire. Un réglage est * discret ; seul l'état actif se colore. */ .macfr [data-macfr-sound], .macfr [data-macfr-sound-test], .macfr [data-macfr-sound-try] { background: #FFFFFF !important; border: 1px solid #E4E0D8; color: #5B6157 !important; font-weight: 600; box-shadow: none; } .macfr [data-macfr-sound]:hover, .macfr [data-macfr-sound-test]:hover, .macfr [data-macfr-sound-try]:hover { border-color: #A23F06; color: #A23F06 !important; background: #FFFFFF !important; } .macfr [data-macfr-sound].is-active, .macfr [data-macfr-sound-try].is-active { background: #365907 !important; border-color: #365907; color: #FFFFFF !important; } /* --- Petits écrans ------------------------------------------------------ */ @media (max-width: 720px) { .macfr .macfr-msg { max-inline-size: 88%; } .macfr .macfr-conv__body { padding-inline: 12px; } } /* --- Cohérence avec la barre de discussion flottante -------------------- */ /* * La barre flottante servait déjà de référence : c'est elle que le client * trouvait réussie. On aligne la page pleine sur elle, plutôt que l'inverse. */ .macfr-chat__msg { background: #FFFFFF; color: #101110; border-radius: 14px; box-shadow: 0 1px 2px rgba(6, 54, 111, .10); } .macfr-chat__msg.is-mine { background: #A23F06; border-color: #A23F06; color: #FFFFFF; } .macfr-chat__msg.is-mine time, .macfr-chat__msg.is-mine .macfr-chat__author { color: rgba(255, 255, 255, .78); } /* ========================================================================= * 45. Fenêtres — hauteur et défilement * * Le défaut : la fenêtre « Nouvelle conversation » n'avait ni hauteur * maximale ni défilement. Avec cinq classes listées, le champ Sujet et le * bouton d'envoi sortaient de l'écran, sans aucun moyen de les atteindre. * * Une fenêtre doit toujours tenir dans l'écran, et défiler à l'intérieur * plutôt que déborder au-dehors — c'est la règle, pas l'exception. * ====================================================================== */ .macfr-modal { /* La fenêtre s'aligne en haut plutôt qu'au centre : centrée, un contenu long dépasse des deux côtés à la fois. */ place-items: start center; padding: 24px 16px; overflow-y: auto; overscroll-behavior: contain; } .macfr-modal__box { inline-size: min(520px, 100%); max-block-size: calc(100vh - 48px); display: flex; flex-direction: column; overflow: hidden; } /* * Le titre reste visible pendant le défilement : on sait toujours dans * quelle fenêtre on se trouve. */ .macfr-modal__box > h3 { flex: none; padding-block-end: 16px; border-block-end: 1px solid var(--macfr-line); } /* Le corps défile, la fenêtre non. */ .macfr-modal__body, .macfr-modal__box > form { flex: 1; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; padding-block-start: 16px; } /* La liste des classes ne mange pas tout l'espace : le formulaire dessous doit rester atteignable sans défiler longuement. */ .macfr-picklist, .macfr-modal__classes { max-block-size: 34vh; overflow-y: auto; overscroll-behavior: contain; } /* Sur mobile, la fenêtre occupe presque tout l'écran. */ @media (max-width: 600px) { .macfr-modal { padding: 12px 10px; } .macfr-modal__box { max-block-size: calc(100vh - 24px); padding: 20px; } .macfr-modal__classes { max-block-size: 30vh; } } /* ========================================================================= * 46. Application Android — confort et sécurité d'usage * * Hors couche, car ces règles corrigent des gênes réelles à l'usage et * doivent tenir face aux feuilles des extensions tierces. * ====================================================================== */ @media (max-width: 720px) { /* * L'encoche et la barre de gestes. * * Dans l'application installée, rien ne sépare le contenu du haut de * l'écran : la barre d'état se dessine par-dessus. « env() » vaut zéro * là où ce n'est pas nécessaire. */ .macfr { padding-inline: calc(14px + env(safe-area-inset-left)) calc(14px + env(safe-area-inset-right)); } .macfr-hero { padding-block-start: calc(22px + env(safe-area-inset-top)); } /* La barre de discussion flottante remonte au-dessus de la barre de gestes, sans quoi le bouton se touche mal. */ .macfr-dock { inset-block-end: calc(16px + env(safe-area-inset-bottom)); } .macfr-live { inset-block-end: calc(16px + env(safe-area-inset-bottom)); } /* La zone de saisie de la messagerie, de même. */ .macfr .macfr-composer__bar { padding-block-end: calc(12px + env(safe-area-inset-bottom)); } /* * Des cibles atteignables au doigt. * * Quarante-huit pixels : en dessous, on rate une fois sur trois, et * l'on touche le lien voisin. */ .macfr .macfr-btn, .macfr .macfr-tab, .macfr .macfr-prof__tab, .macfr .macfr-thread, .macfr .macfr-icon-btn, .macfr .macfr-langs__item { min-block-size: 48px; } .macfr .macfr-prof__tab { padding-inline: 14px; } /* Les onglets de l'espace formateur défilent au doigt plutôt que de s'empiler sur quatre lignes. */ .macfr .macfr-prof__nav { display: flex; flex-wrap: nowrap; gap: 4px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x proximity; } .macfr .macfr-prof__nav::-webkit-scrollbar { display: none; } .macfr .macfr-prof__tab { flex: none; scroll-snap-align: start; white-space: nowrap; } /* * Les tableaux deviennent des fiches. * * Un tableau de six colonnes sur un écran de trois cent cinquante * pixels oblige à défiler horizontalement pour lire une seule ligne. * Chaque cellule reprend son intitulé et se place l'une sous l'autre. */ .macfr .macfr-table, .macfr .macfr-table thead, .macfr .macfr-table tbody, .macfr .macfr-table tr, .macfr .macfr-table td { display: block; inline-size: 100%; } .macfr .macfr-table thead { display: none; } .macfr .macfr-table tr { margin-block-end: 10px; padding: 12px 14px; border: 1px solid var(--macfr-line); border-radius: var(--macfr-radius); background: var(--macfr-surface); } .macfr .macfr-table td { display: flex; justify-content: space-between; gap: 14px; padding: 6px 0; border: 0; text-align: end; } .macfr .macfr-table td::before { content: attr(data-label); flex: none; font-size: .78rem; font-weight: 600; color: var(--macfr-ink-2); text-align: start; } .macfr .macfr-table td:not([data-label]) { justify-content: flex-start; text-align: start; } /* Pas de débordement horizontal : il fait croire à une page cassée. */ .macfr, .macfr * { max-inline-size: 100%; } .macfr img, .macfr video, .macfr pre { block-size: auto; } /* Seize pixels dans les champs : en dessous, le navigateur agrandit la page à chaque saisie et ne la remet jamais comme elle était. */ .macfr input, .macfr select, .macfr textarea { font-size: 16px; } .macfr a, .macfr button { -webkit-tap-highlight-color: rgba(162, 63, 6, .12); } } @media (display-mode: standalone) { /* La traction vers le bas rechargerait la page en perdant la saisie en cours — un geste qu'on n'attend pas d'une application. */ .macfr { overscroll-behavior-y: contain; } /* Le retour au site ouvrirait le navigateur par-dessus l'application : l'apprenant se retrouverait avec deux fenêtres. */ .macfr .macfr-back-to-site { display: none; } } /* --- Le voile des conditions ------------------------------------------ */ .macfr-terms-gate { position: fixed; inset: 0; z-index: 99990; display: grid; place-items: start center; padding: 20px 14px; overflow-y: auto; background: rgba(6, 54, 111, .62); } .macfr-terms-gate__box { inline-size: min(680px, 100%); max-block-size: calc(100vh - 40px); display: flex; flex-direction: column; border-radius: 18px; background: #FFFFFF; box-shadow: 0 40px 90px -40px rgba(6, 54, 111, .6); overflow: hidden; } .macfr-terms-gate__title { flex: none; margin: 0; padding: 22px 26px 12px; font-size: 1.4rem; color: #06366F; } .macfr-terms-gate__intro { flex: none; margin: 0; padding: 0 26px 16px; color: #5B6157; font-size: .94rem; border-block-end: 1px solid #F1EDE6; } /* Le texte défile ; l'en-tête et le pied restent en place. */ .macfr-terms-gate__body { flex: 1; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 26px; font-size: .93rem; line-height: 1.65; color: #101110; } .macfr-terms-gate__body h2 { margin: 22px 0 8px; font-size: 1.02rem; color: #06366F; } .macfr-terms-gate__body h2:first-child { margin-block-start: 0; } .macfr-terms-gate__body p { margin: 0 0 10px; } .macfr-terms-gate__foot { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 26px; border-block-start: 1px solid #F1EDE6; background: #FBF8F4; } .macfr-terms-gate__check { display: flex; align-items: center; gap: 10px; font-size: .92rem; cursor: pointer; } .macfr-terms-gate__check input { inline-size: 20px; block-size: 20px; } /* Un bouton inactif doit se voir inactif, sans quoi on clique dans le vide. */ .macfr-terms-gate__foot .macfr-btn:disabled { opacity: .45; cursor: not-allowed; } @media (max-width: 600px) { .macfr-terms-gate { padding: 10px; } .macfr-terms-gate__box { max-block-size: calc(100vh - 20px); } .macfr-terms-gate__title { padding: 18px 18px 10px; } .macfr-terms-gate__intro, .macfr-terms-gate__body, .macfr-terms-gate__foot { padding-inline: 18px; } .macfr-terms-gate__foot { flex-direction: column; align-items: stretch; } .macfr-terms-gate__foot .macfr-btn { inline-size: 100%; } } /* --- Réactions --------------------------------------------------------- */ /* La barre de choix, ouverte par appui long ou par le bouton. */ .macfr .macfr-reactbar { position: absolute; inset-block-end: calc(100% + 6px); inset-inline-start: 0; z-index: 20; display: flex; gap: 2px; padding: 5px; border-radius: 999px; background: #FFFFFF; box-shadow: 0 10px 28px -12px rgba(6, 54, 111, .5); } .macfr .macfr-msg--mine .macfr-reactbar { inset-inline-start: auto; inset-inline-end: 0; } .macfr .macfr-reactbar__item { inline-size: 38px; block-size: 38px; border: 0; border-radius: 50%; background: transparent; font-size: 1.28rem; line-height: 1; cursor: pointer; transition: background .12s ease, scale .12s ease; } .macfr .macfr-reactbar__item:hover { background: #F4F1EC; scale: 1.18; } /* Les pastilles posées, sous la bulle. */ .macfr .macfr-msg__reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-block-start: 6px; } .macfr .macfr-msg__reaction { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border: 1px solid #E4E0D8; border-radius: 999px; background: #FFFFFF; color: #5B6157; font-size: .8rem; line-height: 1.6; cursor: pointer; } /* La mienne se distingue : on voit d'un coup d'œil si l'on a déjà réagi. */ .macfr .macfr-msg__reaction.is-mine { border-color: #A23F06; background: #FBE7D6; color: #A23F06; } .macfr .macfr-msg--mine .macfr-msg__reaction { border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .18); color: #FFFFFF; } .macfr .macfr-msg--mine .macfr-msg__reaction.is-mine { background: #FFFFFF; color: #A23F06; } /* --- Feuille de choix -------------------------------------------------- */ /* * Elle monte du bas, comme sur un téléphone. * * Une boîte de dialogue au centre oblige à lever le pouce ; une feuille qui * remonte se touche là où la main se trouve déjà. */ .macfr-sheet { position: fixed; inset: 0; z-index: 99980; display: flex; align-items: flex-end; justify-content: center; background: rgba(6, 54, 111, .5); } .macfr-sheet__box { inline-size: min(460px, 100%); padding: 10px 10px calc(14px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; background: #FFFFFF; animation: macfr-sheet-up .2s ease; } @keyframes macfr-sheet-up { from { translate: 0 100%; } to { translate: 0 0; } } @media (min-width: 700px) { .macfr-sheet { align-items: center; } .macfr-sheet__box { border-radius: 18px; animation: none; } } .macfr-sheet__title { margin: 6px 0 12px; padding-inline: 12px; font-weight: 700; color: #06366F; text-align: center; } .macfr-sheet__action { display: block; inline-size: 100%; min-block-size: 52px; padding: 14px 16px; border: 0; border-radius: 12px; background: transparent; color: #06366F; font-family: inherit; font-size: .98rem; text-align: start; cursor: pointer; } .macfr-sheet__action:hover { background: #F4F1EC; } .macfr-sheet__action--danger { color: #8F3505; font-weight: 600; } .macfr-sheet__action--quiet { color: #7A8069; text-align: center; } /* --- Éditeur d'image --------------------------------------------------- */ .macfr-imged { position: fixed; inset: 0; z-index: 99985; display: grid; place-items: center; padding: 12px; background: rgba(16, 17, 16, .88); } .macfr-imged__box { inline-size: min(760px, 100%); max-block-size: calc(100vh - 24px); display: flex; flex-direction: column; gap: 10px; } .macfr-imged__tools, .macfr-imged__colors { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } .macfr-imged__tool { inline-size: 46px; block-size: 46px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 12px; background: rgba(255, 255, 255, .08); color: #FFFFFF; font-size: 1.15rem; cursor: pointer; } .macfr-imged__tool.is-active { background: #A23F06; border-color: #A23F06; } .macfr-imged__color { inline-size: 32px; block-size: 32px; border: 2px solid rgba(255, 255, 255, .35); border-radius: 50%; cursor: pointer; } /* La teinte choisie s'entoure de blanc : sur fond sombre, c'est le seul repère qui tienne quelle que soit la couleur. */ .macfr-imged__color.is-active { border-color: #FFFFFF; scale: 1.15; } .macfr-imged__canvas { flex: 1; min-block-size: 0; inline-size: 100%; object-fit: contain; border-radius: 12px; background: #000000; touch-action: none; cursor: crosshair; } .macfr-imged__foot { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; padding-block-end: env(safe-area-inset-bottom); } @media (max-width: 600px) { .macfr-imged__foot { justify-content: stretch; } .macfr-imged__foot .macfr-btn { flex: 1; justify-content: center; } .macfr-imged__tool { inline-size: 44px; block-size: 44px; } } /* --- Le menu d'un message --------------------------------------------- */ @media (hover: none) { } /* Les réactions en tête : l'action la plus fréquente, la plus accessible. */ /* Sur petit écran, le menu remonte du bas comme une feuille. */ @media (max-width: 600px) { } /* --- Barre flottante : mêmes actions que la messagerie ----------------- */ .macfr-chat__msg { position: relative; } @media (hover: none) { } /* Les pastilles de réaction. */ .macfr-chat__reactions { display: flex; flex-wrap: wrap; gap: 3px; margin-block-start: 5px; } .macfr-chat__reaction { padding: 1px 7px; border: 1px solid #E4E0D8; border-radius: 999px; background: #FFFFFF; color: #5B6157; font-size: .75rem; cursor: pointer; } .macfr-chat__reaction.is-mine { border-color: #A23F06; background: #FBE7D6; color: #A23F06; } .macfr-chat__msg.is-mine .macfr-chat__reaction { border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .18); color: #FFFFFF; } .macfr-chat__msg.is-mine .macfr-chat__reaction.is-mine { background: #FFFFFF; color: #A23F06; } /* Le bandeau « en réponse à », au-dessus du champ. */ .macfr-chat__replying { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-block-start: 1px solid #F1EDE6; border-inline-start: 3px solid #A23F06; background: #FBF8F4; font-size: .8rem; } .macfr-chat__replying-body { flex: 1; min-inline-size: 0; display: grid; gap: 1px; } .macfr-chat__replying-body strong { font-size: .72rem; color: #A23F06; } .macfr-chat__replying-body span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #5B6157; } .macfr-chat__replying-cancel { flex: none; inline-size: 24px; block-size: 24px; border: 0; border-radius: 50%; background: transparent; color: #7A8069; font-size: 1.1rem; line-height: 1; cursor: pointer; } .macfr-chat__replying-cancel:hover { background: #ECE4D9; color: #101110; } /* ========================================================================= * 47. Le menu d'un message — compact * * La fenêtre flottante fait 300 × 380 pixels. Un menu qui en occupe la * moitié cache la conversation qu'on est en train de lire : on ne voit plus * le message sur lequel on agit. * * D'où ce parti pris : le plus petit menu possible. Pas de rappel du * message — il reste visible juste au-dessus. Pas de voile — il n'y a rien * à masquer. Des lignes serrées, des emojis en une rangée. * * Environ 190 pixels de haut au lieu de 310 : la conversation reste lisible * derrière. * ====================================================================== */ .macfr .macfr-messenger__panel, .macfr-chat { position: relative; } .macfr .macfr-msgmenu, .macfr-chat__menu { position: absolute; inset: auto 6px 6px 6px; z-index: 40; padding: 4px; border: 1px solid #E2E5DE; border-radius: 12px; background: #FFFFFF; box-shadow: 0 10px 30px -12px rgba(6, 54, 111, .45); animation: macfr-sheet-up .16s ease; } /* Le rappel du message n'a pas lieu d'être : il est juste au-dessus. */ .macfr .macfr-msgmenu__about, .macfr-chat__menu-about { display: none; } /* * Les six emojis, sur une rangée serrée. * * Ils tiennent en une ligne de trente pixels : c'est le poste le plus * rentable du menu, six actions pour la place d'une. */ .macfr .macfr-msgmenu__reactions, .macfr-chat__menu-reactions { display: flex; gap: 1px; padding-block-end: 3px; margin-block-end: 2px; border-block-end: 1px solid #F1EDE6; } .macfr .macfr-msgmenu__emoji, .macfr-chat__menu-emoji { flex: 1; block-size: 30px; border: 0; border-radius: 8px; background: transparent; font-size: 1rem; line-height: 1; cursor: pointer; } .macfr .macfr-msgmenu__emoji:hover, .macfr-chat__menu-emoji:hover { background: #F4F1EC; } /* Les actions, serrées : 34 px de haut plutôt que 44. */ .macfr .macfr-msgmenu__item, .macfr-chat__menu-item { display: flex; align-items: center; gap: 8px; inline-size: 100%; min-block-size: 30px; padding: 5px 9px; border: 0; border-radius: 8px; background: transparent; color: #101110; font-family: inherit; font-size: .8rem; line-height: 1.2; text-align: start; cursor: pointer; } .macfr .macfr-msgmenu__item:hover, .macfr-chat__menu-item:hover { background: #F4F1EC; } .macfr .macfr-msgmenu__item.is-danger, .macfr-chat__menu-item.is-danger { color: #8F3505; } .macfr .macfr-msgmenu__icon, .macfr-chat__menu-icon { flex: none; inline-size: 15px; text-align: center; opacity: .7; font-size: .9rem; } /* * Dans la messagerie pleine page, le menu se pose près de la saisie. * * Le panneau est large : inutile de barrer toute sa largeur pour six * lignes. Il s'aligne à droite, sur une colonne étroite. */ @media (min-width: 720px) { .macfr .macfr-msgmenu { inline-size: 240px; inset-inline-start: auto; inset-inline-end: 14px; inset-block-end: 14px; } } /* --- Au doigt, un peu plus d'air -------------------------------------- */ /* * Trente-quatre pixels se ratent au doigt. * * Sur écran tactile, on repasse à quarante-deux : c'est le compromis entre * un menu qui reste compact et des lignes qu'on touche du premier coup. La * différence de huit pixels par ligne coûte cinquante pixels au total — * acceptable, contrairement aux cent-vingt de la version précédente. */ @media (hover: none) { .macfr .macfr-msgmenu__item, .macfr-chat__menu-item { min-block-size: 38px; font-size: .86rem; } .macfr .macfr-msgmenu__emoji, .macfr-chat__menu-emoji { block-size: 36px; font-size: 1.1rem; } } /* * Sur téléphone, la barre flottante occupe tout l'écran. * * Le menu peut donc s'élargir un peu sans gêner : il reste dans la * fenêtre, qui est alors la page entière. */ @media (max-width: 600px) { .macfr .macfr-msgmenu, .macfr-chat__menu { inset-inline: 8px; } } /* ========================================================================= * 48. L'appui long, sans chevron * * Le chevron occupait un coin de chaque bulle et encombrait une fenêtre de * trois cents pixels. L'appui long le remplace — mais un geste invisible * n'existe pas : deux repères discrets l'annoncent. * ====================================================================== */ /* Le texte reprend la place du chevron. */ .macfr .macfr-msg__bubble, .macfr-chat__msg { padding-inline-end: 13px; } /* * La bulle s'enfonce légèrement pendant l'appui. * * C'est le seul retour qui dise « continue d'appuyer » : sans lui, on * relâche avant les 450 millisecondes en croyant qu'il ne se passe rien. */ .macfr .macfr-msg__bubble:active, .macfr-chat__msg:active { scale: .985; transition: scale .12s ease; } /* * Une main au survol, sur ordinateur. * * Elle signale que la bulle réagit au clic. Le clic droit ouvre le même * menu : maintenir le bouton une demi-seconde n'est pas un geste naturel * au curseur. */ @media (hover: hover) { .macfr .macfr-msg__bubble, .macfr-chat__msg { cursor: context-menu; } } /* * Une indication au premier message, et une seule fois. * * Elle disparaît dès qu'on a ouvert un menu : répéter une consigne déjà * comprise agace plus qu'elle n'aide. */ .macfr .macfr-conv__hint, .macfr-chat__hint { align-self: center; margin-block: 6px 10px; padding: 4px 12px; border-radius: 999px; background: rgba(6, 54, 111, .06); color: #5B6157; font-size: .72rem; } /* --- Le bandeau « vue apprenant » d'un membre de l'équipe -------------- */ /* * Il se distingue d'une alerte : ce n'est pas un problème, seulement un * repère. D'où le bleu marine du centre plutôt qu'un orange d'avertissement. */ .macfr .macfr-notice--staff { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-block-end: 18px; padding: 12px 16px; border-inline-start: 3px solid #06366F; border-radius: 10px; background: rgba(6, 54, 111, .06); color: #06366F; font-size: .9rem; } /* --- Le champ de photo de profil -------------------------------------- */ .macfr .macfr-field__photo { display: flex; align-items: center; gap: 14px; } .macfr .macfr-field__avatar { inline-size: 56px; block-size: 56px; border-radius: 50%; object-fit: cover; border: 1px solid #ECE4D9; flex: none; } /* Un avertissement se distingue d'une confirmation. */ .macfr .macfr-notice--warn { border-inline-start: 3px solid #D5570A; background: #FDF3E3; color: #8A5A0B; } /* --- Un nom long dans l'en-tête ---------------------------------------- */ /* * « HILARIA OBONO ONDO NZANG » débordait du cadre. * * La taille était fixe, calculée pour un prénom et un nom courts. On la * fait dépendre de la largeur disponible : elle se réduit d'elle-même * quand le nom s'allonge, sans jamais devenir illisible. */ .macfr .macfr-hero__name { font-size: clamp(1.3rem, 4.2vw, 2.4rem); line-height: 1.1; overflow-wrap: anywhere; hyphens: auto; } /* L'adresse électronique aussi : elle ne se coupe nulle part. */ .macfr .macfr-hero__level, .macfr .macfr-hero__mail { overflow-wrap: anywhere; font-size: clamp(.78rem, 1.6vw, .95rem); } /* Le bloc lui-même ne déborde pas de son conteneur. */ .macfr .macfr-hero__identity { min-inline-size: 0; } .macfr .macfr-hero__identity > div { min-inline-size: 0; } /* ========================================================================= * 49. Le bouton des alertes, hors couche * * Il s'affichait en blanc sur blanc, donc invisible. La règle qui lui donne * sa couleur vit dans une couche (@layer) ; Pagelayer impose la sienne hors * couche, et une règle hors couche bat toujours une règle en couche, quelle * que soit sa précision. * * On sort donc ces règles de la couche. C'est la même correction que pour * les liens de l'en-tête en juillet. * ====================================================================== */ .macfr [data-macfr-push], .macfr .macfr-btn--ghost { background: #FFFFFF; border: 1px solid #D8D3C9; color: #06366F !important; } .macfr [data-macfr-push]:hover, .macfr .macfr-btn--ghost:hover { border-color: #A23F06; color: #A23F06 !important; background: #FBF8F4; } /* Alertes actives : le bouton le montre franchement. */ .macfr [data-macfr-push].is-active { background: #EAF3E4; border-color: #5B8C2A; color: #365907 !important; } /* * Le bouton d'essai. * * Discret mais lisible : c'est un outil de vérification, pas une action * courante. */ .macfr .macfr-btn--small { padding: 7px 14px; font-size: .85rem; color: #06366F !important; } /* ========================================================================= * 50. Le programme et son avancement * ====================================================================== */ .macfr .macfr-prog { margin-block: 14px 20px; } .macfr .macfr-prog__bar { block-size: 10px; border-radius: 999px; background: #ECE4D9; overflow: hidden; } .macfr .macfr-prog__bar span { display: block; block-size: 100%; background: linear-gradient(90deg, #A23F06, #D5570A); transition: inline-size .4s ease; } .macfr .macfr-prog__legend { margin-block-start: 8px; font-size: .9rem; color: #5B6157; } .macfr .macfr-prog__legend strong { color: #A23F06; font-size: 1.05rem; } /* La liste des unités. */ .macfr .macfr-units { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .macfr .macfr-unit { display: flex; gap: 14px; padding: 14px 16px; border-radius: 12px; background: #FFFFFF; border: 1px solid #F1EDE6; } /* * Trois états, trois traitements. * * Terminée : discrète, elle est derrière soi. En cours : mise en avant, * c'est là qu'on travaille. À venir : pâle, sans être illisible — on doit * pouvoir lire ce qui vient. */ .macfr .macfr-unit.is-done { background: #F7F9F4; border-color: #E0E8D6; } .macfr .macfr-unit.is-done .macfr-unit__title { color: #5B6157; } .macfr .macfr-unit.is-current { border-color: #A23F06; border-inline-start-width: 3px; box-shadow: 0 6px 18px -12px rgba(162, 63, 6, .5); } .macfr .macfr-unit.is-todo { opacity: .78; } .macfr .macfr-unit__mark { flex: none; inline-size: 30px; block-size: 30px; display: grid; place-items: center; border-radius: 50%; background: #ECE4D9; color: #5B6157; font-size: .85rem; font-weight: 700; } .macfr .macfr-unit.is-done .macfr-unit__mark { background: #5B8C2A; color: #FFFFFF; } .macfr .macfr-unit.is-current .macfr-unit__mark { background: #A23F06; color: #FFFFFF; } .macfr .macfr-unit__check { flex: none; padding-block-start: 3px; } .macfr .macfr-unit__check input { inline-size: 22px; block-size: 22px; cursor: pointer; } .macfr .macfr-unit__body { min-inline-size: 0; } .macfr .macfr-unit__title { margin: 0 0 4px; font-size: .98rem; } .macfr .macfr-unit__mission { margin: 0 0 4px; font-size: .88rem; color: #5B6157; } /* Les ressources linguistiques : utiles au formateur, pas à l'apprenant. */ .macfr .macfr-unit__lang { margin: 6px 0 0; font-size: .8rem; color: #7A8069; line-height: 1.5; } .macfr .macfr-unit__when { margin: 4px 0 0; font-size: .78rem; color: #7A8069; } .macfr .macfr-unit.is-current .macfr-unit__when { color: #A23F06; font-weight: 600; } @media (max-width: 600px) { .macfr .macfr-unit { padding: 12px; gap: 10px; } .macfr .macfr-unit__lang { display: none; } } /* --- Le détail par niveau d'un palier ---------------------------------- */ .macfr .macfr-prog__levels { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .macfr .macfr-prog__levels li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid #ECE4D9; border-radius: 999px; background: #FFFFFF; font-size: .85rem; color: #5B6157; } .macfr .macfr-prog__levels li strong { color: #06366F; } .macfr .macfr-prog__levels li.is-done { background: #F2F7EC; border-color: #CFE0BC; } .macfr .macfr-prog__badge { font-size: .74rem; color: #365907; } /* Le niveau porté par chaque unité. */ .macfr .macfr-unit__level { display: inline-block; margin-inline-end: 7px; padding: 1px 7px; border-radius: 999px; background: #ECE4D9; color: #5B6157; font-size: .68rem; font-weight: 700; vertical-align: middle; } .macfr .macfr-unit.is-current .macfr-unit__level { background: #A23F06; color: #FFFFFF; } /* --- L'éditeur de programme -------------------------------------------- */ .macfr .macfr-units--editor .macfr-unit { align-items: flex-start; gap: 10px; } .macfr .macfr-units--editor .macfr-unit__body { flex: 1; display: grid; gap: 6px; } .macfr .macfr-units--editor input[type="text"] { inline-size: 100%; padding: 8px 10px; border: 1px solid #E4E0D8; border-radius: 8px; font-size: .9rem; } /* Le titre porte l'unité : il se distingue de la mission. */ .macfr .macfr-units--editor input[data-macfr-field="title"] { font-weight: 600; color: #06366F; } .macfr .macfr-units--editor [data-macfr-remove] { flex: none; inline-size: 34px; padding: 6px 0; font-size: 1.1rem; line-height: 1; } /* --- Les liens dans les messages --------------------------------------- */ /* * Hors couche : les extensions tierces imposent leur couleur de lien sans * couche, et battraient toute règle en couche. Même correction que pour les * boutons en juillet. */ .macfr .macfr-msg__text a, .macfr-chat__text a { color: #A23F06 !important; text-decoration: underline; text-underline-offset: 2px; /* * Une adresse longue se coupe plutôt que de déborder. * * Un lien de visioconférence fait cent caractères : sans cela, la bulle * s'élargit et la conversation défile latéralement. */ overflow-wrap: anywhere; } .macfr .macfr-msg--mine .macfr-msg__text a, .macfr-chat__msg.is-mine .macfr-chat__text a { color: #FFFFFF !important; } .macfr .macfr-msg__text a:hover, .macfr-chat__text a:hover { text-decoration-thickness: 2px; } /* --- Le sélecteur de classe -------------------------------------------- */ .macfr .macfr-prof__picker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-block-end: 18px; padding: 12px 16px; border-radius: 12px; background: #F4F1EC; } .macfr .macfr-prof__picker label { font-size: .85rem; font-weight: 600; color: #06366F; text-transform: uppercase; letter-spacing: .04em; } .macfr .macfr-prof__picker select { flex: 1; min-inline-size: 220px; max-inline-size: 460px; min-block-size: 42px; padding: 8px 12px; border: 1px solid #D8D3C9; border-radius: 10px; background: #FFFFFF; font-size: .95rem; color: #06366F; } @media (max-width: 600px) { .macfr .macfr-prof__picker select { inline-size: 100%; max-inline-size: none; } } /* --- Corriger le décompte d'un pack ------------------------------------ */ /* * Discrets mais atteignables. * * Ce sont des boutons de correction, non une action courante : ils ne * doivent pas attirer l'œil, mais rester assez grands pour le doigt. */ .macfr .macfr-pack-fix { display: inline-flex; gap: 4px; margin-inline-start: 8px; vertical-align: middle; } .macfr .macfr-pack-fix__btn { inline-size: 26px; block-size: 26px; display: grid; place-items: center; padding: 0; border: 1px solid #D8D3C9; border-radius: 7px; background: #FFFFFF; color: #5B6157; font-size: .95rem; line-height: 1; cursor: pointer; } .macfr .macfr-pack-fix__btn:hover { border-color: #A23F06; color: #A23F06; background: #FBF8F4; } .macfr .macfr-pack-fix__btn:disabled { opacity: .5; cursor: default; } /* --- L'alerte de marge ------------------------------------------------- */ /* * Visible sans être criarde. * * Elle s'adresse à la direction, sur un écran que le formateur consulte * aussi : elle doit se remarquer sans donner l'impression d'un reproche. */ .macfr .macfr-pack-warn { display: block; margin-block-start: 6px; padding: 5px 9px; border-radius: 7px; background: #FDF3E3; border-inline-start: 3px solid #D5570A; color: #8A5A0B; font-size: .78rem; line-height: 1.45; } /* --- Le détail d'un calcul de rémunération ----------------------------- */ /* * Discret mais lisible. * * Un montant sans son cheminement est invérifiable : on ne sait pas si * l'erreur vient du taux, de la retenue ou du nombre d'heures. */ .macfr .macfr-pack-calc { display: block; margin-block-start: 4px; font-size: .76rem; font-variant-numeric: tabular-nums; color: #7A8069; line-height: 1.5; } /* ========================================================================= * 51. La visionneuse de documents * * Hors couche : elle doit passer au-dessus de tout, y compris des barres * flottantes des extensions tierces, qui se posent souvent très haut. * ====================================================================== */ .macfr-viewer { position: fixed; inset: 0; z-index: 2147483000; display: flex; flex-direction: column; background: #14110D; } /* * La barre, au-dessus de l'encoche. * * Sur iPhone, une barre collée en haut passe sous l'encoche et son bouton * devient inatteignable — exactement le problème qu'on corrige. */ .macfr-viewer__bar { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 14px; padding-block-start: max(10px, env(safe-area-inset-top)); background: #FFFFFF; border-block-end: 1px solid #E4E0D8; } .macfr-viewer__back { flex: none; display: inline-flex; align-items: center; gap: 6px; /* Assez grand pour le pouce, même en marchant. */ min-block-size: 44px; padding: 8px 14px; border: 1px solid #D8D3C9; border-radius: 10px; background: #FFFFFF; color: #06366F; font-size: .95rem; font-weight: 600; cursor: pointer; } .macfr-viewer__back:hover { border-color: #A23F06; color: #A23F06; } .macfr-viewer__title { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; color: #5B6157; } .macfr-viewer__actions { flex: none; display: flex; gap: 6px; } .macfr-viewer__btn { display: inline-flex; align-items: center; min-block-size: 44px; padding: 8px 14px; border: 1px solid #D8D3C9; border-radius: 10px; background: #FFFFFF; color: #06366F; font-size: .88rem; text-decoration: none; cursor: pointer; } .macfr-viewer__btn:hover { border-color: #A23F06; color: #A23F06; } .macfr-viewer__btn--danger { color: #8F3505; border-color: #E8CFC2; } .macfr-viewer__btn--danger:hover { background: #FDF3E3; border-color: #8F3505; } .macfr-viewer__body { flex: 1; min-block-size: 0; display: flex; align-items: center; justify-content: center; padding: 0; padding-block-end: env(safe-area-inset-bottom); overflow: auto; } .macfr-viewer__body iframe { inline-size: 100%; block-size: 100%; border: 0; } .macfr-viewer__body img, .macfr-viewer__body video { max-inline-size: 100%; max-block-size: 100%; object-fit: contain; } .macfr-viewer__body audio { inline-size: min(92%, 460px); } .macfr-viewer__note { max-inline-size: 320px; padding: 0 20px; color: #F1EDE6; text-align: center; line-height: 1.6; } /* * Sur petit écran, les libellés cèdent la place. * * « Retour » reste, parce que c'est ce qu'on cherche ; les autres se * réduisent pour que tout tienne sur une ligne. */ @media (max-width: 560px) { .macfr-viewer__title { display: none; } .macfr-viewer__btn { padding: 8px 10px; font-size: .82rem; } } /* ========================================================================= * 52. La visionneuse d'images, hors couche * * Elle vivait dans une couche, avec une superposition de 10 001 : les * barres flottantes des extensions tierces montent souvent plus haut et la * recouvraient. Son bouton de fermeture devenait alors inatteignable — la * personne restait bloquée sur l'image. * * Le bouton était en outre à 18 pixels du haut, donc sous l'encoche des * iPhone récents. * ====================================================================== */ .macfr-lightbox { position: fixed !important; inset: 0 !important; z-index: 2147483000 !important; display: flex; align-items: center; justify-content: center; background: rgba(20, 17, 13, .94); } .macfr-lightbox[hidden] { display: none !important; } .macfr-lightbox img { max-inline-size: 94%; max-block-size: 78vh; border-radius: 8px; } /* * Le bouton de fermeture, au-dessus de l'encoche et assez grand. * * Une croix de 20 pixels dans un coin se manque une fois sur trois avec le * pouce ; on la porte à 48, avec un fond qui la détache de l'image. */ .macfr-lightbox__close { position: absolute !important; inset-block-start: max(14px, env(safe-area-inset-top)) !important; inset-inline-end: 14px !important; inline-size: 48px; block-size: 48px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #FFFFFF; color: #14110D; font-size: 1.5rem; line-height: 1; cursor: pointer; box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .6); } .macfr-lightbox__close:hover { background: #F4F1EC; } /* * Une barre de secours en bas. * * Sur les téléphones où la croix reste malgré tout hors d'atteinte — clavier * ouvert, navigateur en mode plein écran — ce bandeau donne une seconde * porte de sortie, toujours à portée de pouce. */ .macfr-lightbox__foot { position: absolute; inset-inline: 0; inset-block-end: 0; display: flex; justify-content: center; gap: 10px; padding: 12px; padding-block-end: max(12px, env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(20, 17, 13, .85) 40%); } .macfr-lightbox__foot a, .macfr-lightbox__foot button { min-block-size: 44px; padding: 10px 18px; border: 0; border-radius: 10px; background: #FFFFFF; color: #06366F; font-size: .9rem; font-weight: 600; text-decoration: none; cursor: pointer; } /* --- Le PDF dans la visionneuse ---------------------------------------- */ /* * Le défilement à l'intérieur du cadre. * * Safari sur iPhone bloque le défilement d'un cadre imbriqué : le document * s'affiche zoomé sur son coin supérieur, et le doigt ne le fait pas bouger. * Cette propriété rend la main au geste. */ .macfr-viewer__body iframe { inline-size: 100%; block-size: 100%; border: 0; -webkit-overflow-scrolling: touch; } /* * Le corps défile, pas seulement le cadre. * * Quand le lecteur refuse de défiler lui-même, c'est le conteneur qui prend * le relais : on ne reste jamais coincé sur la première page. */ .macfr-viewer__body { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* Le repli, lisible sur le fond sombre. */ .macfr-viewer__note a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; } /* ========================================================================= * 53. Les onglets du formateur, par famille * * Dix onglets sur une ligne obligeaient à faire défiler pour atteindre les * derniers, et rien ne disait ce qu'on y trouverait. * ====================================================================== */ .macfr .macfr-prof__nav--grouped { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: flex-start; overflow: visible; } .macfr .macfr-prof__group { display: flex; flex-direction: column; gap: 5px; } /* * Le nom de la famille, discret. * * Il guide sans concurrencer les onglets eux-mêmes : c'est un repère, pas * un bouton. */ .macfr .macfr-prof__group-title { font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #9A9384; padding-inline-start: 4px; } .macfr .macfr-prof__group-tabs { display: flex; flex-wrap: wrap; gap: 4px; } /* * Sur téléphone, les familles s'empilent. * * Les mettre côte à côte y donnerait des colonnes d'un onglet chacune, * illisibles. Empilées, chaque famille garde ses onglets sur une ligne. */ @media (max-width: 720px) { .macfr .macfr-prof__nav--grouped { flex-direction: column; gap: 12px; } .macfr .macfr-prof__group-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; padding-block-end: 2px; } .macfr .macfr-prof__group-tabs::-webkit-scrollbar { display: none; } .macfr .macfr-prof__group-tabs .macfr-prof__tab { flex: none; } } /* ========================================================================= * 54. Le sommaire d'une page longue * * Sept sections empilées sans repère : on cherchait ses paiements en * défilant à l'aveugle, plusieurs écrans sur téléphone. * ====================================================================== */ .macfr .macfr-jump { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 18px 24px; padding: 12px 14px; border-radius: 12px; background: #F4F1EC; } .macfr .macfr-jump__link { min-block-size: 38px; display: inline-flex; align-items: center; padding: 8px 14px; border: 1px solid transparent; border-radius: 999px; background: #FFFFFF; color: #06366F !important; font-size: .86rem; font-weight: 600; text-decoration: none; } .macfr .macfr-jump__link:hover { border-color: #A23F06; color: #A23F06 !important; } /* * Le saut s'arrête sous l'en-tête collant. * * Sans cela, le titre visé se retrouve caché derrière la barre du site et * l'on croit avoir atterri au mauvais endroit. */ .macfr .macfr-block__title[id] { scroll-margin-block-start: 90px; } @media (max-width: 600px) { .macfr .macfr-jump { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .macfr .macfr-jump::-webkit-scrollbar { display: none; } .macfr .macfr-jump__link { flex: none; } } /* --- Le changement de classe d'un exercice ----------------------------- */ .macfr .macfr-table select[data-macfr-quiz-class] { max-inline-size: 240px; min-block-size: 40px; padding: 7px 10px; border: 1px solid #D8D3C9; border-radius: 9px; background: #FFFFFF; font-size: .88rem; } /* * Une confirmation brève, sans recharger. * * Un changement enregistré sans retour visible laisse douter : on se * demande si le clic a été pris en compte. */ .macfr .macfr-table select.is-saved { border-color: #5B8C2A; background: #F2F7EC; } /* --- L'avancement du programme, sur une formation ---------------------- */ /* * Séparé du reste par un trait, non par un encadré. * * C'est une information secondaire dans la ligne : elle complète la * formation sans lui disputer l'attention. */ .macfr .macfr-course-row__prog { grid-column: 1 / -1; margin-block-start: 12px; padding-block-start: 12px; border-block-start: 1px solid #F1EDE6; } .macfr .macfr-course-row__prog .macfr-prog { margin-block: 0 8px; } .macfr .macfr-course-row__unit { margin: 0 0 6px; font-size: .86rem; color: #5B6157; } .macfr .macfr-course-row__unit strong { color: #06366F; } @media (max-width: 600px) { .macfr .macfr-course-row__prog { margin-block-start: 10px; } }