:root {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #18364c;
  background: #f8f7f2;
  --navy: #18364c;
  --teal: #16786f;
  --teal-dark: #0f655e;
  --cream: #f8f7f2;
  --paper: #fff;
  --line: #d7e3e1;
  --muted: #5b707d;
  --red: #a43d45;
  --green: #2e7b55;
  --blue: #2d6fa9;
  --orange: #a95f13;
  --violet: #795b88;
  --violet-soft: #f1ebf4;
  --blue-soft: #eaf2f7;
  --sand-soft: #f7efe3;
  --rose-soft: #f6ecec;
  --shadow: 0 18px 46px rgba(24,54,76,.09);
}
* { box-sizing: border-box; }
body.training-public-page { margin: 0; min-width: 320px; min-height: 100vh; background: radial-gradient(circle at 9% 8%, rgba(22,120,111,.12), transparent 26rem), radial-gradient(circle at 88% 18%, rgba(121,91,136,.10), transparent 26rem), radial-gradient(circle at 94% 92%, rgba(45,111,169,.08), transparent 30rem), var(--cream); }
button, input, select { font: inherit; }
button { cursor: pointer; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #cf7b1d; outline-offset: 3px; }
.training-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 68px; padding: .7rem max(1rem, calc((100vw - 1180px)/2)); border-bottom: 1px solid rgba(199,216,215,.88); background: rgba(248,247,242,.94); backdrop-filter: blur(12px); }
.training-brand { display: inline-flex; align-items: center; gap: .62rem; color: var(--navy); font-size: 1.2rem; font-weight: 850; text-decoration: none; letter-spacing: -.035em; }
.training-brand img { border-radius: 10px; }
.training-brand strong { color: var(--teal); }
.training-home-link { padding: .6rem .85rem; border: 1px solid #c8d6db; border-radius: 10px; color: var(--navy); background: rgba(255,255,255,.75); font-weight: 750; text-decoration: none; }
.training-course-link { border-color:#8fc7bd; background:#eef8f5; color:#0f6d64; }
.training-course-link:hover { background:#e2f3ee; }
.training-shell { width: min(1120px, calc(100% - 2rem)); margin: 0 auto; padding: 2.6rem 0 4rem; }
.training-hero.compact { max-width: 760px; margin-bottom: 2.6rem; }
.training-eyebrow { margin: 0 0 .45rem; color: var(--teal); font-size: .78rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.training-hero h1, .module-hero h1, .summary-card h1 { margin: 0; color: var(--navy); font-size: clamp(2.4rem, 7vw, 4.7rem); line-height: .98; letter-spacing: -.06em; }
.training-hero p, .module-hero p { color: var(--muted); font-size: 1.08rem; line-height: 1.65; }
.section-heading-row { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.section-heading-row h2 { margin: 0 0 1.1rem; font-size: clamp(1.55rem, 4vw, 2.25rem); letter-spacing: -.035em; }
.level-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.level-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; min-height: 122px; padding: 1.25rem; border: 1px solid var(--line); border-radius: 20px; color: inherit; background: rgba(255,255,255,.82); box-shadow: 0 9px 25px rgba(24,54,76,.05); text-decoration: none; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.level-card:hover { transform: translateY(-3px); border-color: #82b9af; box-shadow: var(--shadow); }
.level-6e { background: linear-gradient(145deg,#f0f8f5,#fff); border-left: 5px solid #3f8d78; }
.level-5e { background: linear-gradient(145deg,#eef5fa,#fff); border-left: 5px solid #4f7fa5; }
.level-4e { background: linear-gradient(145deg,#f4eff7,#fff); border-left: 5px solid #80618e; }
.level-3e { background: linear-gradient(145deg,#f8eeee,#fff); border-left: 5px solid #a45f63; }
.level-badge { display: grid; width: 68px; height: 68px; place-items: center; border-radius: 18px; color: white; background: var(--teal); font-size: 1.45rem; font-weight: 950; }
.level-5e .level-badge { background: #316f9f; }
.level-4e .level-badge { background: #865a9d; }
.level-3e .level-badge { background: #a24f55; }
.level-copy strong, .level-copy small { display: block; }
.level-copy strong { margin-bottom: .28rem; font-size: 1.12rem; }
.level-copy small { color: var(--muted); font-size: .92rem; }
.level-arrow { font-size: 1.55rem; }
.availability-note { margin: 1rem 0 0; color: var(--muted); font-size: .9rem; }
.training-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-bottom: 1.45rem; color: var(--muted); font-size: .9rem; }
.training-breadcrumb a { color: var(--teal-dark); font-weight: 750; text-decoration: none; }
.training-breadcrumb strong { color: var(--navy); }
.level-heading { margin-bottom: 1.5rem !important; }
.chapter-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.chapter-card { display: grid; grid-template-columns: 180px minmax(0,1fr); overflow: hidden; min-height: 250px; border: 1px solid var(--line); border-radius: 24px; color: inherit; background: white; box-shadow: var(--shadow); text-decoration: none; transition: transform .16s ease, border-color .16s ease; }
.chapter-card:hover { transform: translateY(-3px); border-color: #8ebeb6; }
.chapter-card.available { border-top: 5px solid #80618e; }
.chapter-card.available .chapter-icon { background: linear-gradient(145deg,#efe7f3,#f7fbfa); color: #735683; }
.chapter-icon { display: grid; place-items: center; background: linear-gradient(145deg,#e3f2ed,#f4f8fa); color: var(--teal); }
.chapter-icon svg { width: 118px; }
.chapter-copy { padding: 1.6rem; }
.chapter-kicker { color: var(--teal); font-size: .75rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.chapter-copy h2 { margin: .35rem 0 .6rem; font-size: 1.45rem; }
.chapter-copy p { margin: 0; color: var(--muted); line-height: 1.55; }
.chapter-cta { display: inline-flex; gap: .5rem; margin-top: 1.15rem; color: var(--teal-dark); font-weight: 850; }
.empty-level-card { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.1rem; min-height: 180px; padding: 1.5rem; border: 1px dashed #b7c9ce; border-radius: 20px; background: rgba(255,255,255,.5); }
.empty-level-card > span { font-size: 2.5rem; }
.empty-level-card h2 { margin: 0 0 .25rem; font-size: 1.2rem; }
.empty-level-card p { margin: 0; color: var(--muted); }
.training-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 1rem; width: min(1120px, calc(100% - 2rem)); margin: 0 auto; padding: 1.2rem 0 1.8rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .82rem; }

/* Module Pythagore */
.pythagore-shell { width: min(1180px, calc(100% - 2rem)); }
.module-hero { display: grid; grid-template-columns: minmax(0,1fr) 320px; align-items: center; gap: 2rem; padding: 2rem clamp(1.3rem,4vw,2.6rem); border: 1px solid var(--line); border-radius: 28px; background: rgba(255,255,255,.84); box-shadow: var(--shadow); }
.module-hero h1 { font-size: clamp(3rem,8vw,5.4rem); }
.module-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }
.module-tags span { padding: .42rem .7rem; border: 1px solid #b9d6cf; border-radius: 999px; color: #17685f; background: #edf8f5; font-size: .82rem; font-weight: 800; }
.hero-triangle { display: grid; place-items: center; min-height: 235px; border-radius: 22px; background: linear-gradient(145deg,#f6fbfa,#edf3f5); }
.hero-triangle svg { width: min(270px, 92%); }
.start-panel { margin-top: 1.2rem; }
.start-main { width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; min-height: 104px; padding: 1.15rem 1.3rem; border: 0; border-radius: 20px; color: white; background: linear-gradient(135deg,var(--teal),#245f7e); box-shadow: 0 15px 34px rgba(22,120,111,.18); text-align: left; }
.start-main:hover { filter: brightness(.98); transform: translateY(-1px); }
.start-main .start-icon { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 50%; background: rgba(255,255,255,.16); font-size: 1.2rem; }
.start-main strong, .start-main small { display: block; }
.start-main strong { font-size: 1.25rem; }
.start-main small { margin-top: .18rem; color: rgba(255,255,255,.82); font-size: .9rem; }
.start-main b { font-size: 1.6rem; }
.targeted-wrap { margin-top: 1.5rem; }
.targeted-wrap h2 { margin: 0 0 .8rem; font-size: 1.2rem; }
.targeted-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; }
.targeted-grid button { display: flex; align-items: center; gap: .7rem; min-height: 58px; padding: .7rem .85rem; border: 1px solid #cfdddf; border-radius: 13px; color: var(--navy); background: rgba(255,255,255,.86); font-weight: 760; text-align: left; }
.targeted-grid button:hover { border-color: #80b7ae; background: #f2faf8; }
.targeted-grid button span { display: grid; flex: 0 0 auto; width: 30px; height: 30px; place-items: center; border-radius: 8px; color: var(--teal-dark); background: #e3f4ef; font-size: .8rem; font-weight: 950; }
.exercise-topline { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 1rem; margin-bottom: 1rem; }
.ghost-button, .secondary-button { min-height: 42px; padding: .65rem .9rem; border: 1px solid #c8d7db; border-radius: 10px; color: var(--navy); background: white; font-weight: 800; }
.exercise-progress-wrap { min-width: 0; }
.exercise-progress-label { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .35rem; color: var(--muted); font-size: .82rem; }
.exercise-progress-label strong { overflow: hidden; color: var(--navy); text-overflow: ellipsis; white-space: nowrap; }
.progress-track { overflow: hidden; height: 9px; border-radius: 999px; background: #dde8e8; }
.progress-track span { display: block; width: 12.5%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--teal),#4c91b3); transition: width .25s ease; }
.exercise-card { overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: rgba(255,255,255,.94); box-shadow: var(--shadow); }
.exercise-head { padding: 1.2rem 1.35rem 1rem; border-bottom: 1px solid #e3ebeb; background: linear-gradient(180deg,#fbfdfc,#f6faf9); }
.exercise-step-kicker { color: var(--teal); font-size: .74rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.exercise-head h2 { margin: .25rem 0 .4rem; font-size: clamp(1.4rem,3vw,2rem); letter-spacing: -.03em; }
.exercise-head p { max-width: 70ch; margin: 0; color: var(--muted); line-height: 1.5; }
.exercise-body { display: grid; grid-template-columns: minmax(330px,.95fr) minmax(340px,1.05fr); min-height: 430px; }
.exercise-visual { display: grid; align-content: center; justify-items: center; min-width: 0; padding: 1.2rem; border-right: 1px solid #e4ebeb; background: #fbfcfa; }
.exercise-work { min-width: 0; padding: 1.3rem; }
.triangle-svg { width: min(100%, 520px); height: auto; overflow: visible; }
.side-hit { cursor: pointer; stroke: transparent; stroke-width: 24; fill: none; }
.side-visible { stroke: #18364c; stroke-width: 5; stroke-linecap: round; }
.side-visible.selected { stroke: #c87919; stroke-width: 7; }
.side-visible.correct { stroke: #2e7b55; }
.side-visible.wrong { stroke: #a43d45; }
.triangle-label { fill: #18364c; font-size: 24px; font-weight: 850; }
.length-label { fill: #536d7a; font-size: 18px; font-weight: 750; }
.right-mark { fill: none; stroke: #16786f; stroke-width: 4; }
.square-shape { stroke-width: 3; }
.square-label { font-size: 22px; font-weight: 900; text-anchor: middle; dominant-baseline: middle; }
.visual-caption { margin: .7rem 0 0; color: var(--muted); font-size: .86rem; text-align: center; }
.question-block + .question-block { margin-top: 1rem; }
.question-block label, .question-title { display: block; margin-bottom: .5rem; color: var(--navy); font-weight: 850; line-height: 1.4; }
.answer-grid { display: grid; gap: .55rem; }
.answer-grid.two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.answer-button { min-height: 48px; padding: .7rem .85rem; border: 1px solid #cbdadd; border-radius: 11px; color: var(--navy); background: white; font-weight: 800; text-align: left; }
.answer-button:hover { border-color: #78aca4; background: #f3faf8; }
.answer-button.selected { border-color: #b76d18; background: #fff6e8; }
.answer-button.correct { border-color: #55a17a; background: #eaf7ef; color: #195d3e; }
.answer-button.wrong { border-color: #c77a80; background: #fbecec; color: #8e2f36; }
.math-line { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .45rem 0; font-family: "Cambria Math", Cambria, Georgia, serif; font-size: clamp(1.05rem,2.5vw,1.25rem); }
.math-box { padding: .55rem .7rem; border: 1px solid #d1dde0; border-radius: 9px; background: #f9fbfb; }
.input-inline { width: 112px; min-height: 44px; padding: .55rem .65rem; border: 1px solid #aebfc4; border-radius: 9px; color: var(--navy); background: white; font-weight: 800; text-align: center; }
.input-inline.small { width: 78px; }
.sentence-builder { padding: .85rem; border: 1px solid #d5e2e2; border-radius: 13px; background: #f8fbfa; line-height: 1.65; }
.method-strip { display: flex; flex-wrap: wrap; gap: .42rem; margin: .8rem 0 1rem; }
.method-strip span { padding: .37rem .58rem; border-radius: 8px; background: #eef4f5; color: #46616f; font-size: .78rem; font-weight: 800; }
.method-strip span.active { color: white; background: var(--teal); }
.feedback-box { display: none; margin-top: 1rem; padding: .8rem .9rem; border-radius: 12px; line-height: 1.5; }
.feedback-box.show { display: block; }
.feedback-box.success { border: 1px solid #a8d3b9; color: #225e3f; background: #edf8f1; }
.feedback-box.error { border: 1px solid #e1b3b5; color: #85333a; background: #fcf0f0; }
.feedback-box.hint { border: 1px solid #e6c998; color: #7d521b; background: #fff8e9; }
.exercise-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.15rem; }
.primary-button { min-height: 44px; padding: .68rem 1rem; border: 0; border-radius: 10px; color: white; background: var(--teal); font-weight: 850; }
.primary-button:hover { background: var(--teal-dark); }
.hint-button { min-height: 44px; padding: .68rem 1rem; border: 1px solid #dfc18e; border-radius: 10px; color: #80551d; background: var(--sand-soft); font-weight: 850; }
.next-button { margin-left: auto; }
.pedago-callout { margin: .9rem 0; padding: .8rem .9rem; border-left: 4px solid var(--teal); border-radius: 0 10px 10px 0; background: #edf7f4; color: #284d48; line-height: 1.5; }
.square-equation { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem; margin-top: 1rem; font-family: "Cambria Math", Cambria, Georgia, serif; font-size: 1.25rem; font-weight: 850; }
.order-pool, .order-answer { display: grid; gap: .5rem; min-height: 70px; padding: .65rem; border: 1px dashed #b8cbd0; border-radius: 12px; background: #fafcfc; }
.order-answer { margin-top: .7rem; border-style: solid; background: #f3f8f7; }
.order-line { display: flex; align-items: center; gap: .65rem; width: 100%; padding: .65rem .75rem; border: 1px solid #ccdadd; border-radius: 9px; background: white; color: var(--navy); text-align: left; }
.order-line:hover { border-color: #7caea8; }
.order-line .order-num { display: grid; flex: 0 0 auto; width: 26px; height: 26px; place-items: center; border-radius: 7px; background: #e8f2f0; color: var(--teal-dark); font-size: .75rem; font-weight: 900; }
.order-controls { display: flex; gap: .35rem; margin-left: auto; }
.order-controls button { width: 30px; height: 30px; border: 1px solid #cbd9dc; border-radius: 7px; background: white; font-weight: 900; }
.writing-preview { margin-top: 1rem; padding: .9rem; border: 1px solid #d7e1e2; border-radius: 12px; background: #fff; font-family: Georgia, serif; line-height: 1.75; }
.autonomous-grid { display: grid; gap: .75rem; }
.autonomous-row { display: grid; grid-template-columns: 175px minmax(0,1fr); align-items: center; gap: .65rem; }
.autonomous-row > label { font-size: .86rem; font-weight: 850; }
.autonomous-row select, .autonomous-row input { width: 100%; min-height: 43px; padding: .55rem .65rem; border: 1px solid #b6c7cb; border-radius: 9px; background: white; color: var(--navy); }
.summary-view { padding-top: 2rem; }
.summary-card { max-width: 760px; margin: 0 auto; padding: clamp(1.5rem,4vw,2.5rem); border: 1px solid var(--line); border-radius: 26px; background: white; box-shadow: var(--shadow); text-align: center; }
.summary-icon { display: grid; width: 68px; height: 68px; place-items: center; margin: 0 auto 1rem; border-radius: 50%; color: white; background: var(--teal); font-size: 2rem; font-weight: 950; }
.summary-card > p { color: var(--muted); line-height: 1.55; }
.summary-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: .65rem; margin: 1.4rem 0; }
.summary-stats div { padding: 1rem .5rem; border: 1px solid #d8e3e4; border-radius: 14px; background: #f8fbfa; }
.summary-stats strong, .summary-stats span { display: block; }
.summary-stats strong { color: var(--teal); font-size: 1.7rem; }
.summary-stats span { margin-top: .2rem; color: var(--muted); font-size: .8rem; }
.summary-message { margin: 1rem 0; padding: .9rem; border-radius: 12px; background: #eef7f4; color: #285e54; line-height: 1.5; }
.summary-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .65rem; margin-top: 1rem; }
.local-note { margin-bottom: 0; font-size: .78rem; }
@media (max-width: 820px) {
  .level-grid, .chapter-grid, .targeted-grid { grid-template-columns: 1fr; }
  .module-hero { grid-template-columns: 1fr; }
  .hero-triangle { min-height: 190px; }
  .exercise-body { grid-template-columns: 1fr; }
  .exercise-visual { border-right: 0; border-bottom: 1px solid #e4ebeb; }
  .exercise-topline { grid-template-columns: 1fr; }
  .ghost-button { justify-self: start; }
  .autonomous-row { grid-template-columns: 1fr; gap: .3rem; }
}
@media (max-width: 560px) {
  .training-shell, .pythagore-shell, .training-footer { width: min(100% - 1rem, 1180px); }
  .training-topbar { min-height: 60px; padding: .5rem; }
  .training-brand img { width: 34px; height: 34px; }
  .training-home-link { padding: .5rem .65rem; font-size: .83rem; }
  .level-card { grid-template-columns: auto 1fr; }
  .level-arrow { display: none; }
  .chapter-card { grid-template-columns: 1fr; }
  .chapter-icon { min-height: 140px; }
  .module-hero { padding: 1.1rem; }
  .hero-triangle { display: none; }
  .exercise-body { min-height: 0; }
  .exercise-visual, .exercise-work { padding: .9rem; }
  .answer-grid.two { grid-template-columns: 1fr; }
  .next-button { margin-left: 0; }
  .summary-stats { grid-template-columns: 1fr; }
}

/* ===== Pythagore V2 : interface d'exercice volontairement minimale ===== */
.simple-hero { grid-template-columns: 1fr; padding: 1.7rem clamp(1.2rem,4vw,2rem); border-top: 5px solid #80618e; background: linear-gradient(150deg,#ffffff,#f5f0f7 72%,#edf7f4); }
.simple-hero p:last-child { max-width: 720px; margin-bottom: 0; }
.minimal-topline { grid-template-columns: auto 1fr; }
.exercise-counter { justify-self: end; color: var(--muted); font-weight: 850; font-size: .92rem; }
.exercise-question { padding: 1rem 1.3rem; border-bottom: 1px solid #dce8e6; border-left: 5px solid var(--teal); background: linear-gradient(90deg,#edf7f4,#fbfdfc 60%); color: var(--navy); font-size: clamp(1.05rem,2.5vw,1.25rem); font-weight: 850; line-height: 1.45; }
.simple-body { min-height: 455px; }
.simple-body .exercise-visual { padding: 1rem 1.2rem; background: linear-gradient(160deg,#fbfcfa,#f2f7f6); }
.simple-body .exercise-work { display: flex; flex-direction: column; justify-content: center; padding: clamp(1rem,3vw,1.7rem); }
.triangle-svg { width: min(100%, 560px); max-height: 400px; }
.triangle-label { font-size: 25px; }
.length-label { fill: #29495d; font-size: 19px; font-weight: 850; }
.length-label.target-length { fill: #a43d45; font-size: 22px; }
.side-visible.solution-side { stroke: #2e7b55; stroke-width: 8; }
.side-visible.selected { stroke: #c87919; stroke-width: 8; }
.writing-sentence, .short-prompt { margin: 0 0 .8rem; line-height: 1.55; }
.short-prompt { font-weight: 800; }
.writing-line { display: flex; flex-wrap: wrap; align-items: center; gap: .42rem; min-height: 54px; margin: .35rem 0; color: #102f43; font-family: "Cambria Math", Cambria, Georgia, serif; font-size: clamp(1.08rem,2.4vw,1.32rem); line-height: 1.6; }
.writing-line sup { font-size: .68em; }
.input-inline { width: 96px; min-height: 47px; padding: .5rem .6rem; border: 2px solid #b7c9cf; border-radius: 10px; background: white; color: var(--navy); font-weight: 850; text-align: center; }
.input-inline.small { width: 76px; }
.input-inline.tiny { width: 58px; }
.side-input { width: 76px; text-transform: uppercase; }
.completed-work { margin-bottom: .7rem; padding-bottom: .7rem; border-bottom: 1px solid #e5ecec; color: #2e4d5e; font-family: "Cambria Math", Cambria, Georgia, serif; font-size: 1.08rem; line-height: 1.75; }
.feedback-box { margin-top: .8rem; }
.exercise-actions { align-items: center; }
.solution-button { min-height: 44px; padding: .68rem 1rem; border: 1px solid #b7c9d5; border-radius: 10px; color: #31546a; background: var(--blue-soft); font-weight: 850; }
.solution-button:hover { background: #dfeaf1; }
.success-box { padding: 1rem; border: 1px solid #acd4bb; border-radius: 13px; background: #edf8f1; color: #235f40; font-size: 1.08rem; font-weight: 850; text-align: center; }
.solution-box { padding: 1rem 1.1rem; border: 1px solid #cbdcda; border-radius: 14px; background: #f7fbfa; color: #18364c; font-family: Georgia, serif; line-height: 1.7; }
.solution-box p { margin: .35rem 0; }
.solution-title { margin-bottom: .65rem; color: var(--teal-dark); font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size: 1rem; font-weight: 900; }
.end-actions { margin-top: 1rem; }
.full-writing { display: grid; gap: .2rem; }
.full-writing > p { margin: 0 0 .35rem; line-height: 1.65; }
.conclusion-line { margin-top: .65rem; }
.simple-summary h1 { font-size: clamp(2.2rem,6vw,4rem); }
.simple-summary { max-width: 650px; }

@media (max-width: 820px) {
  .simple-body { grid-template-columns: 1fr; min-height: 0; }
  .simple-body .exercise-visual { border-right: 0; border-bottom: 1px solid #e4ebeb; }
  .triangle-svg { max-height: 340px; }
}
@media (max-width: 560px) {
  .exercise-question { padding: .85rem .9rem; }
  .simple-body .exercise-work { padding: .9rem; }
  .exercise-actions { display: grid; grid-template-columns: 1fr; }
  .exercise-actions button { width: 100%; }
  .writing-line { font-size: 1.05rem; }
}

/* ===== Pythagore V2.1 : saisie des carrés + aides en modales ===== */
.side-hit:focus, .side-hit:focus-visible { outline: none !important; }
.input-inline:focus, .input-inline:focus-visible,
.square-entry-input:focus, .square-entry-input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--teal);
}
.square-side-input { width: 96px; text-transform: uppercase; }
.square-number-input { width: 84px; }
.equation-entry { gap: .55rem; }
.square-entry-help { display: flex; align-items: center; gap: .45rem; margin: .3rem 0 .65rem; color: var(--muted); font-size: .84rem; }
.square-key { min-width: 42px; min-height: 40px; padding: .35rem .65rem; border: 1px solid #a8b9ca; border-radius: 9px; background: #edf3f8; color: #31546a; font-family: "Cambria Math", Cambria, Georgia, serif; font-size: 1.35rem; font-weight: 900; cursor: pointer; }
.square-key:hover { background: #e9f5f1; }
.rounding-help-button { min-height: 44px; padding: .68rem 1rem; border: 1px solid #b8cbd0; border-radius: 10px; color: #31546a; background: #f8fbfb; font-weight: 850; }
.calc-result-row, .solution-result-row { display: grid; grid-template-columns: minmax(220px,auto) minmax(170px,1fr); align-items: center; gap: 1rem; }
.calc-result-row .writing-line { margin: .35rem 0; }
.result-kind, .solution-result-row span { color: #607784; font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size: .84rem; font-weight: 750; }
.solution-result-row { margin: .4rem 0; font-family: "Cambria Math", Cambria, Georgia, serif; font-size: 1.05rem; }
.training-modal[hidden] { display: none !important; }
.training-modal { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 1rem; }
.training-modal-backdrop { position: absolute; inset: 0; background: rgba(13,35,49,.46); backdrop-filter: blur(2px); }
.training-modal-dialog { position: relative; z-index: 1; width: min(620px,100%); max-height: min(82vh,720px); overflow: auto; padding: 1.3rem 1.35rem 1.2rem; border: 1px solid #d4e0e1; border-radius: 18px; background: #fff; box-shadow: 0 24px 70px rgba(18,43,55,.24); }
.training-modal-dialog h2 { margin: 0 2rem .85rem 0; color: var(--navy); font-size: 1.3rem; }
.training-modal-close { position: absolute; top: .7rem; right: .8rem; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #eef4f4; color: #365263; font-size: 1.45rem; line-height: 1; cursor: pointer; }
.training-modal-content { color: #18364c; line-height: 1.6; }
.training-modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; margin-top: 1rem; padding-top: .85rem; border-top: 1px solid #e5ecec; }
.modal-hint-text { margin: .2rem 0; font-size: 1.04rem; }
.modal-solution { border: 0; padding: 0; background: transparent; }
.rounding-rule p { margin: .45rem 0; }
.rounding-example { margin-top: .8rem !important; padding: .65rem .75rem; border-radius: 10px; background: #f2f7f6; }
body.modal-open { overflow: hidden; }
@media (max-width: 560px) {
  .calc-result-row, .solution-result-row { grid-template-columns: 1fr; gap: .15rem; }
  .training-modal-dialog { padding: 1.05rem; }
  .training-modal-actions { display: grid; grid-template-columns: 1fr; }
  .training-modal-actions button { width: 100%; }
}

/* ===== Pythagore V2.2 : carrés saisis par l’élève ===== */
.equation-entry { align-items: center; }
.square-entry-input { vertical-align: middle; }
.full-writing-prompt { margin-top: .45rem; }

/* ===== Pythagore V2.3 : exposants + palette douce ===== */
.writing-line sup,
.completed-work sup,
.modal-solution sup,
.solution-box sup,
.solution-result-row sup,
.full-writing sup {
  display: inline-block;
  position: relative;
  top: -.48em;
  vertical-align: baseline;
  font-size: .62em;
  line-height: 0;
  margin-left: .02em;
}
.exercise-card { border-top: 4px solid rgba(22,120,111,.72); }
.training-modal-dialog { border-top: 5px solid #80618e; }
.training-modal-dialog h2 { color: #604a6b; }
.rounding-help-button { background: #f3eff5; border-color: #c9b9d1; color: #604a6b; }

/* ===== Pythagore V2.4 : calculatrice, arrondis variés et Vers le brevet ===== */
.calculator-button { min-height: 44px; padding: .68rem 1rem; border: 1px solid #a9c5c1; border-radius: 10px; color: #235f58; background: #edf7f4; font-weight: 850; }
.calculator-button:hover { background: #e2f2ee; }
.calculator { max-width: 430px; margin: 0 auto; }
.calculator-display { width: 100%; min-height: 64px; margin-bottom: .8rem; padding: .8rem 1rem; border: 2px solid #b8c9cf; border-radius: 12px; background: #f9fbfb; color: var(--navy); font-family: "Cambria Math", Cambria, Georgia, serif; font-size: 1.55rem; font-weight: 800; text-align: right; }
.calculator-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .5rem; }
.calculator-grid button { min-height: 48px; border: 1px solid #c7d5d8; border-radius: 10px; background: #fff; color: var(--navy); font-size: 1.05rem; font-weight: 850; }
.calculator-grid button:hover { background: #f1f7f6; border-color: #91b6b0; }
.calculator-grid .calc-wide { grid-column: span 2; }
.calculator-grid .calc-equals { color: #fff; background: var(--teal); border-color: var(--teal); }
.calculator-grid .calc-equals:hover { background: var(--teal-dark); }
.calculator-note { margin: .75rem 0 0; color: var(--muted); font-size: .82rem; line-height: 1.45; }

.brevet-launch-wrap { margin-top: 1rem; }
.brevet-launch { width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; min-height: 88px; padding: 1rem 1.2rem; border: 1px solid #cbbdd2; border-radius: 18px; color: #4d3d58; background: linear-gradient(135deg,#f6f1f7,#eef6f5); text-align: left; }
.brevet-launch:hover { border-color: #a990b4; background: linear-gradient(135deg,#f1e9f3,#e8f4f1); }
.brevet-launch > span:first-child { font-size: 1.8rem; }
.brevet-launch strong, .brevet-launch small { display: block; }
.brevet-launch strong { font-size: 1.08rem; }
.brevet-launch small { margin-top: .2rem; color: #6d6075; line-height: 1.4; }
.brevet-launch b { font-size: 1.35rem; }
.brevet-summary-button { min-height: 44px; padding: .68rem 1rem; border: 1px solid #cbbdd2; border-radius: 10px; background: #f5f0f7; color: #604a6b; font-weight: 850; }
.brevet-statement { margin-bottom: 1rem; padding: 1rem 1.05rem; border-left: 4px solid #80618e; border-radius: 0 12px 12px 0; background: #f7f3f8; line-height: 1.6; }
.brevet-statement p { margin: .35rem 0; }
.brevet-badge { display: inline-block; margin-bottom: .35rem; color: #604a6b; font-size: .76rem; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.brevet-search-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.brevet-check-grid { display: grid; gap: .8rem; }
.brevet-check-grid > label, .brevet-check-grid > div { padding: .75rem .85rem; border: 1px solid #d9e3e3; border-radius: 11px; background: #fbfcfc; line-height: 1.55; }
.brevet-check-label { display: block; margin-bottom: .4rem; color: var(--navy); font-size: .88rem; font-weight: 850; }
.brevet-decision { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; margin: 0; padding: .8rem .9rem; border: 1px solid #d9e3e3; border-radius: 11px; background: #fbfcfc; }
.brevet-decision legend { width: 100%; margin-bottom: .35rem; color: var(--navy); font-weight: 850; }
.brevet-decision label { display: inline-flex; align-items: center; gap: .4rem; font-weight: 750; }

/* Les exposants doivent rester nettement au-dessus de la ligne de base. */
.writing-line sup,
.completed-work sup,
.modal-solution sup,
.solution-box sup,
.solution-result-row sup,
.full-writing sup,
.brevet-check-grid sup {
  top: -.56em;
  font-size: .60em;
}

@media (max-width: 560px) {
  .brevet-launch { grid-template-columns: auto 1fr; }
  .brevet-launch b { display: none; }
  .brevet-search-actions { display: grid; grid-template-columns: 1fr; }
  .brevet-search-actions button { width: 100%; }
}

/* ===== Pythagore V3 : mode élève connecté ===== */
.training-account-links { display:flex; align-items:center; justify-content:flex-end; gap:.45rem; flex-wrap:wrap; }
.training-account-links .training-home-link { white-space:nowrap; }
@media (max-width:680px) {
  .training-topbar { align-items:flex-start; }
  .training-account-links { gap:.3rem; }
  .training-account-links .training-home-link { padding:.45rem .55rem; font-size:.78rem; }
}

/* ===== Pythagore V2.5 : trois problèmes Vers le brevet ===== */
.brevet-section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:.65rem; }
.brevet-section-heading > div { display:flex; align-items:center; gap:.55rem; color:#4d3d58; }
.brevet-section-heading > div span { font-size:1.35rem; }
.brevet-section-heading > div strong { font-size:1.06rem; }
.brevet-section-heading small { max-width:640px; color:#6d6075; line-height:1.45; text-align:right; }
.brevet-launch-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7rem; }
.brevet-launch-grid .brevet-launch { min-height:112px; }
.brevet-launch-grid .brevet-launch > span:first-child { display:grid; width:38px; height:38px; place-items:center; border-radius:50%; background:#e9dfee; color:#604a6b; font-size:1rem; font-weight:950; }
@media (max-width:900px) { .brevet-launch-grid { grid-template-columns:1fr; } .brevet-section-heading { align-items:flex-start; flex-direction:column; } .brevet-section-heading small { text-align:left; } }
/* 0.26.0 — repère visuel des contenus 5e alignés sur le programme 2026 */
.chapter-card.new-program-card{border-top-color:#2b8a76}.chapter-card.new-program-card .chapter-icon{background:linear-gradient(145deg,#e8f5f1,#f7fbfa);color:#176d63}.chapter-card.new-program-card .chapter-kicker{color:#177261}

/* ===== 0.27.1 : pictogrammes de chapitres harmonisés ===== */
.chapter-icon-svg svg{width:104px;height:78px;overflow:visible}
.chapter-icon-svg svg *{vector-effect:non-scaling-stroke}
.chapter-icon-svg svg path,.chapter-icon-svg svg line,.chapter-icon-svg svg rect,.chapter-icon-svg svg circle{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.chapter-icon-svg svg text{fill:currentColor;stroke:none;font:800 12px system-ui,-apple-system,"Segoe UI",sans-serif}
.chapter-icon-svg svg .bars{stroke-width:5}
.chapter-icon-svg svg .accent{color:#cf7816;stroke:#cf7816;fill:none}
.scratch-icon svg .accent{color:#cf7816;stroke:#cf7816}
@media(max-width:720px){.chapter-icon-svg svg{width:82px;height:62px}}


/* ===== 0.27.2 : présentation des chapitres ===== */
.chapter-card{min-height:236px}
.chapter-card .chapter-icon{position:relative;isolation:isolate}
.chapter-card .chapter-icon::after{content:"";position:absolute;width:112px;height:112px;border-radius:28px;background:rgba(255,255,255,.48);border:1px solid rgba(255,255,255,.76);z-index:-1}
.chapter-icon-svg svg{width:100px;height:76px;display:block;overflow:visible;color:inherit}
.chapter-icon-svg svg path,.chapter-icon-svg svg line,.chapter-icon-svg svg rect,.chapter-icon-svg svg circle{fill:none!important;stroke:currentColor!important;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.chapter-icon-svg svg text{fill:currentColor!important;stroke:none!important;font:800 12px system-ui,-apple-system,"Segoe UI",sans-serif}
.chapter-icon-svg svg .bars{stroke-width:5!important}
.chapter-icon-svg svg .accent{stroke:#cf7816!important;fill:none!important}
.scratch-icon svg .accent{stroke:#cf7816!important;fill:none!important}
@media(max-width:720px){
  .chapter-card{grid-template-columns:112px minmax(0,1fr);min-height:210px}
  .chapter-card .chapter-icon::after{width:82px;height:82px;border-radius:22px}
  .chapter-icon-svg svg{width:76px;height:58px}
}

.chapter-meta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.15rem}
.program-badge{display:inline-flex;align-items:center;min-height:24px;padding:.2rem .52rem;border:1px solid #b9ddd3;border-radius:999px;background:#e8f5f1;color:#176d63;font-size:.67rem;font-weight:900;letter-spacing:.045em;text-transform:uppercase;white-space:nowrap}


/* ===== 0.34.5 : liste de chapitres plus compacte et extensible =====
   Les descriptions restent dans le HTML pour le référencement, mais sont
   limitées visuellement à deux lignes afin que la liste reste facile à scanner. */
@media (min-width: 1081px) {
  .chapter-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: .78rem; }
}

.level-heading { max-width: 860px; margin-bottom: 1rem !important; }
.level-heading h1 { font-size: clamp(2.35rem, 5vw, 3.65rem); }
.level-heading p { margin: .7rem 0 0; font-size: .98rem; line-height: 1.5; }
.training-breadcrumb { margin-bottom: .9rem; }

.chapter-grid { gap: .78rem; }
.chapter-card,
.chapter-card.new-program-card {
  grid-template-columns: 88px minmax(0,1fr);
  min-height: 148px;
  border-radius: 18px;
  border-top-width: 4px;
  box-shadow: 0 8px 24px rgba(24,54,76,.07);
}
.chapter-card:hover { transform: translateY(-2px); }
.chapter-card .chapter-icon { min-width: 0; min-height: 0; }
.chapter-card .chapter-icon::after {
  width: 64px;
  height: 64px;
  border-radius: 18px;
}
.chapter-card .chapter-icon > svg,
.chapter-card .chapter-icon-svg svg {
  width: 58px;
  height: 48px;
}
.chapter-copy { min-width: 0; padding: 1rem .95rem 1rem .75rem; }
.chapter-kicker { font-size: .67rem; letter-spacing: .085em; }
.chapter-copy h2 { margin: .22rem 0 .38rem; font-size: 1.08rem; line-height: 1.16; }
.chapter-copy p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.36;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.chapter-cta { margin-top: .55rem; font-size: .84rem; }
.chapter-meta { gap: .32rem; margin-bottom: .08rem; }
.program-badge {
  min-height: 20px;
  padding: .13rem .4rem;
  font-size: .58rem;
  letter-spacing: .035em;
}

@media (max-width: 1080px) {
  .chapter-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 680px) {
  .training-shell { padding-top: 1.45rem; }
  .level-heading h1 { font-size: clamp(2.1rem, 12vw, 3rem); }
  .chapter-grid { grid-template-columns: 1fr; gap: .62rem; }
  .chapter-card,
  .chapter-card.new-program-card {
    grid-template-columns: 76px minmax(0,1fr);
    min-height: 126px;
    border-radius: 15px;
  }
  .chapter-card .chapter-icon::after { width: 54px; height: 54px; border-radius: 15px; }
  .chapter-card .chapter-icon > svg,
  .chapter-card .chapter-icon-svg svg { width: 50px; height: 42px; }
  .chapter-copy { padding: .85rem .8rem .85rem .55rem; }
  .chapter-copy h2 { font-size: 1rem; }
  .chapter-copy p { font-size: .8rem; -webkit-line-clamp: 2; }
  .chapter-cta { margin-top: .42rem; }
}

/* Ressources externes complémentaires (MathALÉA, etc.) */
.external-resources{margin-top:1.6rem;padding:1.15rem;border:1px dashed #a9bdc2;border-radius:22px;background:#f7faf9;box-shadow:0 10px 26px rgba(24,54,76,.045)}
.external-resources-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.external-resources-head h2{margin:.1rem 0 .42rem;color:var(--navy);font-size:1.18rem;letter-spacing:-.015em}
.external-resources-head p:last-child{max-width:820px;margin:0;color:var(--muted);font-size:.9rem;line-height:1.5}
.external-badge{flex:0 0 auto;padding:.38rem .62rem;border:1px solid #b9c9cd;border-radius:999px;background:#fff;color:#56707a;font-size:.75rem;font-weight:850;white-space:nowrap}
.external-resource-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.external-resource-card{display:flex;align-items:flex-start;gap:.85rem;min-height:118px;padding:1rem;border:1px solid #cfdadd;border-radius:16px;background:#fff;color:var(--navy);text-decoration:none;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.external-resource-card:hover{transform:translateY(-2px);border-color:#80b7ae;box-shadow:0 10px 24px rgba(24,54,76,.08)}
.external-resource-card:focus-visible{outline:3px solid rgba(47,138,114,.28);outline-offset:3px}
.external-resource-icon{display:grid;flex:0 0 auto;width:34px;height:34px;place-items:center;border-radius:10px;background:#e8f3f1;color:#2d7465;font-size:.86rem;font-weight:950}
.external-resource-copy{display:grid;gap:.28rem;min-width:0}
.external-resource-copy strong{font-size:1rem;line-height:1.3}
.external-resource-copy small{color:var(--muted);font-size:.84rem;line-height:1.45}
.external-resource-copy em{margin-top:.18rem;color:#2d7465;font-size:.8rem;font-style:normal;font-weight:850}
.external-provider-note{margin:.85rem 0 0;color:#6d7f86;font-size:.78rem;line-height:1.4;text-align:right}
@media(max-width:760px){.external-resources-head{display:grid}.external-badge{justify-self:start}.external-resource-grid{grid-template-columns:1fr}}

/* ===============================================================
   CATALOGUE PUBLIC — v0.37.0
   Identité commune avec l'accueil Salle112 : 6e bleu, 5e vert,
   4e ambre, 3e violet. Scopé à .training-catalog afin de ne pas
   toucher aux interfaces d'exercices qui utilisent cette feuille.
   =============================================================== */
.training-catalog {
  --navy: #15375f;
  --teal: #24814b;
  --teal-dark: #1e7040;
  --muted: #5b6e83;
  --line: #e2e9ef;
  --cream: #fff;
  --level-color: #1e5a99;
  --level-soft: #e7f2ff;
  --level-border: #a4c8ef;
  font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  color: var(--navy);
  background: linear-gradient(180deg, #f5faff 0, #fff 390px) !important;
}
.training-catalog.catalog-level-5e { --level-color: #196c40; --level-soft: #e8f7ec; --level-border: #96d2a8; }
.training-catalog.catalog-level-4e { --level-color: #906011; --level-soft: #fff4d6; --level-border: #e5c277; }
.training-catalog.catalog-level-3e { --level-color: #744fa2; --level-soft: #f2eafb; --level-border: #c9abe7; }
.training-catalog .catalog-ribbon { height: 5px; background: linear-gradient(90deg,#1e5798 0%,#239251 58%,#ffb83f 100%); }
.training-catalog .training-topbar {
  position: relative; top: auto; min-height: 83px;
  width: min(1130px,calc(100% - 48px)); margin-inline: auto;
  padding: 14px 0; border-bottom: 0; background: transparent;
  backdrop-filter: none;
}
.training-catalog .training-brand { gap: 9px; font-size: 1.32rem; letter-spacing: -.055em; }
.training-catalog .training-brand strong { color: #24814b; }
.training-catalog .training-home-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 39px; padding: 9px 12px;
  border-radius: 11px; border-color: #d7e5f0;
  background: #fff; color: #1b477b; font-size: .87rem; font-weight: 750;
}
.training-catalog .training-home-link:hover { background: #edf5ff; border-color: #b8cfe6; }
.training-catalog .training-shell { width: min(1130px,calc(100% - 48px)); padding: 31px 0 72px; }
.training-catalog .training-breadcrumb { margin: 0 0 19px; }
.training-catalog .training-breadcrumb a { color: #1d5395; text-decoration: underline; text-underline-offset: 4px; }
.training-catalog .training-breadcrumb strong { color: var(--level-color); }
.training-catalog .training-hero.compact { max-width: none; margin: 0 0 30px !important; }
.training-catalog .training-eyebrow { font-size: .79rem; letter-spacing: .08em; color: var(--level-color); }
.training-catalog .training-hero h1 { color: #15375f; letter-spacing: -.058em; font-size: clamp(2.6rem,5.5vw,4.2rem); font-weight: 850; line-height: 1.04; }
.training-catalog .level-heading h1 { font-size: clamp(2.5rem,4.5vw,3.9rem); }
.training-catalog .level-text { color: var(--level-color); }
.training-catalog .training-hero p:last-of-type { margin: 11px 0 0; color: #526c84; font-size: 1.04rem; line-height: 1.45; }
.training-catalog .catalog-intro { padding-top: 10px; }
.training-catalog .section-heading-row h2 { margin: 0 0 17px; font-size: 1.55rem; }
.training-catalog .availability-note { margin-top: 16px; font-size: .87rem; }
/* Choix du niveau : identique aux cartes numérotées de index.html. */
.training-catalog .level-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 15px; }
.training-catalog .level-card { display: flex; align-items: center; justify-content: center;
  min-height: 116px; padding: 15px; border: 2px solid; border-radius: 21px;
  box-shadow: 0 7px 20px rgba(26,65,101,.065); }
.training-catalog .level-badge { width: auto; height: auto; background: none !important; border-radius: 0; color: inherit; font-size: 2.7rem; letter-spacing: -.065em; }
.training-catalog .level-arrow { display:none; }
.training-catalog .level-6e { color: #1e5a99; background: #daebff; border-color: #96bee8; }
.training-catalog .level-5e { color: #196c40; background: #d8f2df; border-color: #8dcca3; }
.training-catalog .level-4e { color: #906011; background: #ffebbb; border-color: #e8bf64; }
.training-catalog .level-3e { color: #744fa2; background: #eddffb; border-color: #bca0e0; }
.training-catalog .level-card:hover { box-shadow: 0 13px 24px rgba(26,65,101,.13); transform: translateY(-4px); }
/* Navigation légère vers les autres niveaux. */
.training-catalog .catalog-level-nav { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 0; }
.training-catalog .catalog-level-pill { display: inline-flex; align-items:center; justify-content:center;
  min-width: 57px; min-height: 39px; padding: 8px 15px;
  border: 1px solid #d6e4f0; border-radius: 11px; background: #fff;
  text-decoration: none; color:#45647e; font-weight: 850; font-size: .9rem;
  transition:transform .16s ease, background .16s ease; }
.training-catalog .catalog-level-pill:hover { transform: translateY(-2px); background: #f2f8ff; }
.training-catalog .catalog-level-pill.is-current { color: var(--level-color); background: var(--level-soft); border: 2px solid var(--level-border); }
/* Catalogue et filtres. */
.training-catalog .catalog-library { scroll-margin-top: 20px; }
.training-catalog .catalog-library-top { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom: 15px; }
.training-catalog .catalog-library-top h2 { margin:0; font-weight: 820; font-size:1.57rem; letter-spacing:-.035em; }
.training-catalog .catalog-results { color:#627890; font-size:.87rem; white-space:nowrap; }
.training-catalog .catalog-controls { display: flex; align-items: flex-start; justify-content:space-between; flex-wrap:wrap; gap: 12px 17px; margin-bottom: 20px; }
.training-catalog .catalog-controls[hidden], .training-catalog .catalog-filter[hidden],
.training-catalog .catalog-empty[hidden], .training-catalog .chapter-card[hidden] { display:none !important; }
.training-catalog .catalog-filters { display:flex; flex-wrap:wrap; gap:8px; min-width:0; }
.training-catalog .catalog-filter { display:inline-flex; align-items:center; gap:6px;
  padding: 9px 13px; min-height: 42px; border-radius:999px;
  border:1px solid #dce6ef; color: #355976; background:#fff;
  font-size: .87rem; font-weight: 750;
  box-shadow: 0 2px 7px rgba(24,60,90,.025);
  transition: border-color .16s, background .16s, transform .16s;
}
.training-catalog .catalog-filter:hover { border-color: var(--level-border); transform: translateY(-1px); }
.training-catalog .catalog-filter.is-selected { border-color: var(--level-color); color: #fff; background: var(--level-color); }
.training-catalog .filter-count { display:inline-flex; align-items:center; justify-content:center; min-width:19px; padding: 1px 3px;
  background: rgba(22,56,90,.07); color: inherit; border-radius:100px; font-size: .73rem; }
.training-catalog .catalog-filter.is-selected .filter-count { background:rgba(255,255,255,.18); }
.training-catalog .catalog-search { flex:0 1 215px; display:flex;align-items:center;gap:7px;min-height:42px;
  padding:0 12px; border:1px solid #d9e5ee; border-radius:12px; background:#fff; }
.training-catalog .catalog-search:focus-within { outline: 2px solid var(--level-border); border-color:var(--level-color); }
.training-catalog .search-icon { color:#597589; font-size:1.3rem; line-height:1; }
.training-catalog .catalog-search input { min-width:0;width:100%;height:39px; border:0; outline:0; background:transparent; font-size:.87rem;color:#183c64; }
.training-catalog .catalog-search input::placeholder { color:#697e8f; }
.training-catalog .visually-hidden {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.training-catalog .catalog-empty { padding: 30px 18px; border: 1px dashed var(--level-border); border-radius:16px; background:var(--level-soft);color:#41566b;text-align:center; }
/* 20 chapitres -> 4 colonnes sur grand écran ; carte : pictogramme + numéro + titre. */
.training-catalog .chapter-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.training-catalog .chapter-card,
.training-catalog .chapter-card.new-program-card {
  position:relative; display:grid; grid-template-columns:62px minmax(0,1fr);
  align-items:stretch; min-height:119px; overflow:hidden;
  background:#fff; color:#173b67; border:1px solid #dce8f0;
  border-top:3px solid var(--level-color); border-radius:17px;
  box-shadow: 0 5px 16px rgba(24,60,99,.055);
  text-decoration:none; transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.training-catalog .chapter-card:hover { transform:translateY(-3px); border-color:var(--level-border); box-shadow:0 10px 22px rgba(24,60,99,.12); }
.training-catalog .chapter-card:after { content:"→"; position:absolute; top:11px; right:13px; font-size:1.14rem; font-weight:850; color:var(--level-color); opacity:.85; }
.training-catalog .chapter-card.available .chapter-icon,
.training-catalog .chapter-card.new-program-card .chapter-icon {
  display:grid; place-items:center; min-width:0; min-height:0;
  padding:9px 5px; background: var(--level-soft); color:var(--level-color);
}
.training-catalog .chapter-card .chapter-icon::after { display:none; }
.training-catalog .chapter-card .chapter-icon > svg,
.training-catalog .chapter-card .chapter-icon-svg svg { width:49px;height:49px;max-width:100%; }
.training-catalog .chapter-copy { padding: 23px 16px 17px 13px; min-width:0; }
.training-catalog .chapter-meta { display:block; margin:0; }
.training-catalog .chapter-kicker { display:block; color:var(--level-color); font-weight:850; font-size:.67rem; letter-spacing:.08em; }
.training-catalog .chapter-copy h2 { margin:8px 0 0; padding-right:2px; font-weight:790; font-size:1.02rem; line-height:1.24; letter-spacing:-.023em; overflow-wrap:break-word; }
.training-catalog .chapter-copy p, .training-catalog .chapter-cta,
.training-catalog .program-badge { display:none; }
.training-catalog .empty-level-card { grid-column:1 / -1; }
.training-catalog .training-footer { width:min(1130px,calc(100% - 48px)); }
@media(max-width:1100px){
  .training-catalog .chapter-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:850px){
  .training-catalog .chapter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .training-catalog .catalog-search { flex-basis:100%; max-width:300px; }
}
@media(max-width:600px){
  .training-catalog .training-topbar,.training-catalog .training-shell,.training-catalog .training-footer { width:calc(100% - 26px); }
  .training-catalog .training-topbar { min-height:67px; padding:10px 0; }
  .training-catalog .training-brand { font-size:1.13rem; }
  .training-catalog .training-brand img { width:35px;height:35px; }
  .training-catalog .training-home-link { font-size:.77rem; min-height:34px; padding:7px 8px; }
  .training-catalog .training-account-links { gap:5px; }
  .training-catalog .training-shell { padding:23px 0 53px; }
  .training-catalog .training-hero h1 { font-size:clamp(2.23rem,10vw,3rem); }
  .training-catalog .training-hero p:last-of-type { font-size:.96rem; }
  .training-catalog .level-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .training-catalog .level-card { min-height:95px;border-radius:16px; }
  .training-catalog .level-badge { font-size:2.27rem; }
  .training-catalog .chapter-grid { grid-template-columns:1fr; gap:9px; }
  .training-catalog .chapter-card,.training-catalog .chapter-card.new-program-card { min-height:92px; grid-template-columns:65px minmax(0,1fr); border-radius:15px; }
  .training-catalog .chapter-card .chapter-icon > svg,.training-catalog .chapter-card .chapter-icon-svg svg{width:49px;height:49px}
  .training-catalog .chapter-copy { padding:21px 37px 16px 14px; }
  .training-catalog .chapter-copy h2{font-size:1.02rem}
  .training-catalog .catalog-library-top h2 { font-size:1.36rem; }
  .training-catalog .catalog-controls { margin-bottom:16px; gap:11px; }
  .training-catalog .catalog-filters { gap:7px; }
  .training-catalog .catalog-filter { min-height:39px; padding:7px 10px; font-size:.79rem; }
  .training-catalog .catalog-search { max-width:none; }
}
@media (prefers-reduced-motion:reduce){
  .training-catalog .chapter-card,.training-catalog .level-card,.training-catalog .catalog-filter {transition:none}
}