/* Extensions propres au lecteur de troisième, construites sur course-v2. */
/*
 * Extensions propres au lecteur de troisième. Le shell, les jetons
 * disciplinaires, le hero, le sommaire et les boutons proviennent de
 * course-v2 ; ces règles ne complètent que les ressources collège.
 */

.college-main { padding-bottom: 4rem; }
.college-body > * + * { margin-top: 1.25rem; }
.college-page .college-eyebrow { color: var(--subject-deep); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.055em; line-height: 1.6; text-transform: uppercase; }
.college-hero .college-hero-mark { position: absolute; top: 2rem; right: 2rem; z-index: 0; width: 7rem; height: 7rem; opacity: 0.14; pointer-events: none; }
.college-hero .college-hero-mark svg { width: 100%; height: 100%; }
.college-hero .hero__copy { position: relative; z-index: 1; }
.college-hero .college-eyebrow { color: #ffd58f; }
.college-hero .college-action-quiet, .college-unlock .college-action-quiet { padding-inline: 0.3rem; border-color: transparent; background: transparent; color: inherit; text-decoration: underline; text-underline-offset: 0.3em; }

.college-body > section, .college-body > aside { scroll-margin-top: 1.25rem; }
.college-objectives { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(11rem, 1fr); gap: 1.4rem; align-items: start; }
.college-objectives h2 { margin: 0.4rem 0 1.05rem; font-size: 1.85rem; }
.college-objectives ul { margin: 0; padding-left: 1.2rem; }
.college-objectives li { margin: 0.4rem 0; }
.college-prerequisites { padding: 1rem; border-radius: var(--radius-md); background: var(--subject-soft); font-size: 0.92rem; }
.college-prerequisites h3 { margin: 0 0 0.75rem; color: var(--subject-deep); font-size: 1.05rem; }
.college-positioning { margin: 1.3rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); }
.college-section > .college-eyebrow { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.7rem; border-radius: 0.5rem; background: var(--subject-soft); }
.college-section > p:not(.college-key) { line-height: 1.85; }

.college-example { margin: 1.65rem 0; padding: 1.2rem; border: 1px solid #ccd8e6; border-radius: var(--radius-md); background: linear-gradient(130deg, #f8faff, #fff); }
.college-example h3 { margin: 0.35rem 0 0.9rem; font-size: 1.2rem; }
.college-example .college-eyebrow { margin: 0; }
.college-example ol { padding-left: 0; list-style: none; counter-reset: college-step; }
.college-example li { position: relative; min-height: 3rem; margin: 0; padding: 0.65rem 0.5rem 0.65rem 2.6rem; border-bottom: 1px solid #dce4ef; counter-increment: college-step; }
.college-example li::before { position: absolute; top: 0.75rem; left: 0; display: grid; width: 1.6rem; height: 1.6rem; place-items: center; border-radius: 0.45rem; background: var(--subject-deep); color: #fff; content: counter(college-step); font-size: 0.75rem; font-weight: 800; }
.college-example-conclusion, .college-key strong { color: var(--subject-deep); font-weight: 700; }
.college-key { margin: 1.4rem 0 0; padding: 1rem; border-left: 4px solid var(--subject-end); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--subject-soft); line-height: 1.7; }
.college-mistakes { display: grid; gap: 0.8rem; }
.college-mistakes article { padding: 1rem; border: 1px solid #e3d9d0; border-left: 4px solid #b36726; border-radius: var(--radius-sm); background: #fffaf3; }
.college-mistakes h4 { margin: 0 0 0.4rem; font-size: 1rem; }
.college-mistakes p { margin: 0; }

/* Le sommaire reste le composant course-v2 : seul son appel abonnement est 3e. */
.college-toc-access { padding: 0.9rem 1rem; border-top: 1px solid var(--line); background: var(--subject-soft); font-size: 0.82rem; }
.college-toc-access p { margin: 0 0 0.25rem; font-weight: 700; }
.college-toc-access a { display: block; color: var(--subject-deep); font-weight: 800; text-decoration: underline; }

.college-access-preview { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 1.6rem; padding: 1.1rem 1.3rem; border: 1px solid #c6d3e2; border-radius: var(--radius-md); background: var(--subject-soft); }
.college-access-label { font-size: 0.87rem; font-weight: 800; }
.college-access-preview p { margin: 0.3rem 0 0; color: var(--muted); font-size: 0.88rem; }
.college-access-preview > a { display: flex; flex-shrink: 0; align-items: center; gap: 0.6rem; min-height: 2.75rem; color: var(--subject-deep); font-size: 0.87rem; font-weight: 800; }

.college-body .college-unlock { padding: clamp(1.5rem, 3vw, 2.4rem); border: 1px solid #363954; border-radius: var(--radius-lg); background: linear-gradient(125deg, var(--subject-start), var(--subject-deep)); box-shadow: 0 15px 35px rgb(16 29 51 / 0.08); color: #fff; }
.college-unlock .college-eyebrow { display: flex; align-items: center; gap: 0.6rem; color: #ffd58f; }
.college-unlock .college-eyebrow svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.college-unlock h2 { margin: 1rem 0; font-size: clamp(1.75rem, 3vw, 2.45rem); line-height: 1.15; }
.college-unlock > p:not(.college-eyebrow) { color: #e4e9f3; line-height: 1.75; }
.college-unlock-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem; margin: 1.5rem 0; }
.college-unlock-features article { padding: 0.9rem; border: 1px solid rgb(255 255 255 / 0.19); border-radius: var(--radius-sm); background: rgb(255 255 255 / 0.03); }
.college-unlock-features article > span { color: #ffcf76; font-size: 0.75rem; font-weight: 800; }
.college-unlock-features h3 { margin: 0.55rem 0; font-size: 1rem; }
.college-unlock-features p { margin: 0.6rem 0 0; color: #e4e9f3; font-size: 0.85rem; line-height: 1.6; }
.college-unlock .college-actions, .college-method-access .college-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: center; }
.college-unlock .college-unlock-cta, .college-method-access .college-actions > a:first-child { display: inline-flex; align-items: center; justify-content: center; min-height: 2.7rem; padding: 0.65rem 1rem; border: 1px solid transparent; border-radius: var(--radius-sm); background: #ffb540; color: #172640; font-weight: 800; text-decoration: none; }
.college-method-access .college-actions > a:first-child { background: var(--subject-deep); color: #fff; }
.college-unlock .college-unlock-note { margin-bottom: 0; color: #cbd5e5; font-size: 0.76rem; }
.college-inline-access { padding: 0.9rem; border-radius: var(--radius-sm); background: var(--subject-soft); font-size: 0.9rem; }
.college-method-access { margin: 1.5rem 0; padding: 1.35rem; border: 1px solid #d5dce8; border-left: 4px solid var(--subject-end); border-radius: var(--radius-md); background: linear-gradient(120deg, #fff, var(--subject-soft)); color: var(--ink); }
.college-method-access h3 { margin: 0.4rem 0; font-size: 1.25rem; }
.college-method-access > p:not(.college-eyebrow) { font-size: 0.94rem; line-height: 1.65; }

.college-program-trace { padding: 1rem; border-radius: var(--radius-sm); background: #f0f5fa; font-size: 0.92rem; font-variant-numeric: tabular-nums; white-space: pre-line; }
.college-program-trace:empty, .college-result:empty { display: none; }
.college-model { margin: 1.5rem 0; padding: 1.2rem; border: 1px solid #b9cadd; border-radius: var(--radius-md); background: #f9fbff; }
.college-document .college-verse { overflow-wrap: anywhere; hyphens: none; line-height: 1.85; white-space: pre-line; }
.college-document .college-verse p { margin-block: 1.1rem; }

/* Le contrôle ne doit pas masquer une donnée du document, surtout sur mobile. */
.college-document .course-visual-document__zoom { display: flex; flex-direction: column; gap: .6rem; }
.college-document .course-visual-document__zoom span { position: static; align-self: flex-end; display: inline-flex; align-items: center; min-height: 2.75rem; margin: 0; padding: .6rem .8rem; }

/* MathML et tableau de dérivation : contraintes de lecture, pas de thème parallèle. */
.college-page .math-expression { max-width: 100%; color: inherit; font-size: 1.12em; vertical-align: -0.12em; }
.college-page .math-expression mfrac { padding-inline: 0.08em; }
.college-page .pilot-inline-code { padding: 0.1rem 0.35rem; border: 1px solid #d0dae8; border-radius: 0.3rem; background: #edf1f7; color: #243953; font-size: 0.88em; }
.college-page .math-derivation { min-width: 0; max-width: 100%; box-sizing: border-box; }
.college-page .math-derivation__scroll:focus-visible { outline: 3px solid #a56806; outline-offset: 2px; }
.college-page .math-derivation__steps { width: min(100%, 40rem); margin: 0.85rem auto 0; }
.college-page .math-derivation__steps td { border: 0; background: transparent; }
.college-page .math-derivation__equation td { padding: 0.3rem 0.25rem; vertical-align: baseline; }
.college-page .math-derivation__left { text-align: right; }
.college-page .math-derivation__relation { text-align: center; }
.college-page .math-derivation__right { text-align: left; }
.college-page .math-derivation .math-expression { font-size: 1.2rem; }
.college-page .math-derivation__annotation td { padding: 0.15rem 0 0.85rem; font-size: 0.9rem; line-height: 1.55; text-align: center; }
.college-page .course-visual-document-viewer button { border-color: currentColor; background: #10243b; color: #fff; }
.college-page .college-task { border-top: 3px solid var(--subject-end); }
.college-page .college-task h3 { font-size: 1.4rem; }
.college-next { padding: 1rem; }
.college-next h2 { font-size: 1.35rem; }

@media (max-width: 54rem) {
  .college-objectives { grid-template-columns: 1fr; }
  .college-hero .college-hero-mark { width: 5rem; height: 5rem; }
}

@media (max-width: 36rem) {
  .college-access-preview { align-items: flex-start; flex-direction: column; padding: 1rem; }
  .college-unlock-features { grid-template-columns: 1fr; }
  .college-unlock .college-actions { align-items: stretch; flex-direction: column; }
  .college-unlock .college-actions > a { width: 100%; text-align: center; }
  .college-example { padding: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .college-page * { scroll-behavior: auto !important; transition: none !important; }
}

@media (forced-colors: active) {
  .college-unlock, .college-access-preview, .college-prerequisites, .college-example, .college-method-access { border: 1px solid CanvasText; }
  .college-key { border-left-color: CanvasText; }
}

@media print {
  .college-course-toc, .college-access-preview, .college-unlock, .college-method-access, .college-actions, .college-footer { display: none !important; }
  .college-page .college-hero { background: #fff !important; color: #000 !important; }
  .college-hero p { color: #000 !important; }
  .college-hero-facts { display: none; }
}
.college-document-analysis { margin: 1.25rem 0; padding: 1.1rem 1.25rem; border: 1px solid #b3c8bd; border-radius: 12px; background: #f1f7f3; color: #183e2c; }
.college-document-analysis summary { cursor: pointer; font-weight: 700; padding: .3rem 0; }
.college-document-analysis summary:focus-visible { outline: 3px solid #1f6650; outline-offset: 5px; }
.college-document-analysis p { color: #243b30; line-height: 1.8; }
.college-document[data-document-layout="diagram"] .course-visual-document__zoom img { width: min(100%, 25rem); max-height: none; margin-inline: auto; }
.college-model-verse { white-space: pre-line; line-height: 1.85; }