/* Styles propres aux pages, portés des blocs <style> des pages et composants Astro (non superposés aux couches :
   comme dans Astro, ils l'emportent sur le design system). */

/* ---- Accueil ------------------------------------------------------------------------------------------------ */
.m-hero { align-items: start; }
.m-hero .c-lede { padding-block-start: var(--space-3); }
.m-hero__mention { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.m-hero__elos { display: inline-flex; gap: var(--space-2); }
.m-hero__facts { display: grid; gap: var(--space-2); font-size: var(--step--1); }
.m-hero__facts div { display: flex; justify-content: space-between; gap: var(--space-4); border-block-start: 1px solid var(--rule-soft); padding-block-start: var(--space-2); }
.m-hero__facts dt { color: var(--ink-2); }
.m-hero__facts dd { font-weight: var(--weight-semibold); }
.m-title { font-size: var(--step-2); max-inline-size: 26ch; }
.c-folio__body p > a > svg { display: inline; vertical-align: -0.15em; margin-inline-start: 0.2em; }
.m-steps { display: grid; gap: var(--space-5); }
@media (width >= 50rem) { .m-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.m-steps li { display: grid; gap: var(--space-2); align-content: start; }
.m-steps h3 { font-size: var(--step-1); }
.m-steps p { color: var(--ink-2); }
.m-steps__n { display: grid; place-items: center; inline-size: 2.4rem; block-size: 2.4rem; border: 1.5px solid var(--signal); border-radius: 50%; font: var(--weight-medium) var(--step-0) / 1 var(--font-mono); color: var(--signal); }
.m-versus { border-collapse: collapse; inline-size: 100%; }
.m-versus th { text-align: start; padding: var(--space-2) var(--space-4); font: var(--weight-semibold) var(--step-1) / 1.2 var(--font-display); font-stretch: var(--display-width); }
.m-versus th:last-child { color: var(--signal); }
.m-versus td { padding: var(--space-4); border-block-start: 1px solid var(--rule-soft); vertical-align: top; }
.m-versus td:first-child { color: var(--ink-2); }
.m-versus td:last-child { background: var(--signal-tint); font-weight: var(--weight-medium); }
@media (width < 40rem) {
  .m-versus thead { display: none; }
  .m-versus, .m-versus tbody, .m-versus tr, .m-versus td { display: block; }
  .m-versus tr { border: 1px solid var(--rule-soft); border-radius: var(--radius-m); overflow: clip; margin-block-end: var(--space-3); }
  .m-versus td { border: 0; }
  .m-versus td::before { content: attr(data-label); display: block; font-size: var(--step--1); color: var(--ink-3); margin-block-end: 2px; }
}
.m-pledges, .m-list { display: grid; gap: var(--space-4); max-inline-size: 60ch; }
.m-pledges li, .m-list li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; }
.m-pledges svg { color: var(--signal); margin-block-start: 0.3em; inline-size: 1.2rem; block-size: 1.2rem; }
.m-list svg { color: var(--ink-3); margin-block-start: 0.3em; inline-size: 1.2rem; block-size: 1.2rem; }

/* ---- Exemple de plan (accueil) ----------------------------------------------------------------------------- */
.m-plan { container-type: inline-size; display: grid; gap: 0; background: var(--paper-1); border: 1px solid var(--rule); border-radius: var(--radius-m); overflow: clip; }
.m-plan > .c-callout { border-radius: 0; border-inline: 0; border-block-start: 0; }
.m-plan__row { display: grid; gap: var(--space-3); padding: var(--space-5) clamp(var(--space-4), 0.5rem + 2vw, var(--space-6)); border-block-start: 1px solid var(--rule-soft); min-inline-size: 0; }
.m-plan > .m-plan__row:first-of-type { border-block-start: 0; }
@container (width >= 52rem) {
  .m-plan__row:not(.m-plan__head):not(.m-plan__foot) { grid-template-columns: 9.5rem minmax(0, 1fr); column-gap: var(--space-6); }
  .m-plan__head { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; column-gap: var(--space-6); }
}
.m-plan__title { font-size: var(--step-2); }
.m-plan__block { font: var(--weight-semibold) var(--step-1) / 1.2 var(--font-display); font-stretch: var(--display-width); }
.m-plan__leak { font-size: var(--step-1); max-inline-size: 46ch; }
.m-plan__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: var(--step--1); }
.m-plan__meta div { display: grid; gap: 2px; }
.m-plan__meta dt { color: var(--ink-3); }
.m-plan__foot { color: var(--ink-2); background: var(--paper-2); }
.m-plan__foot strong { color: var(--ink); }
.m-objectifs { display: grid; gap: var(--space-2); padding-inline-start: 1.2rem; color: var(--ink-2); }
.m-objectifs strong { color: var(--ink); }

/* ---- Pages marketing --------------------------------------------------------------------------------------- */
.m-intro { padding-block: clamp(2.5rem, 1.5rem + 5vw, 5.5rem) clamp(1.5rem, 1rem + 2vw, 3rem); }
.m-intro__title { font-size: var(--step-3); max-inline-size: 22ch; margin-block-end: var(--space-4); letter-spacing: -0.02em; }
.m-cta__grid { display: grid; gap: var(--space-6); align-items: center; }
.m-cta__title { font-size: var(--step-3); max-inline-size: 18ch; letter-spacing: -0.02em; }
.m-faq { display: grid; border-block-start: 1px solid var(--rule); }
.m-faq details { border-block-end: 1px solid var(--rule); }
.m-faq summary { cursor: pointer; padding-block: var(--space-4); padding-inline-end: var(--space-6); position: relative; font: var(--weight-semibold) var(--step-1) / var(--leading-snug) var(--font-display); font-stretch: var(--display-width); list-style: none; }
.m-faq summary::-webkit-details-marker { display: none; }
.m-faq summary::after { content: "+"; position: absolute; inset-inline-end: 0; inset-block-start: var(--space-3); font: 1.6rem/1 var(--font-sans); color: var(--signal); }
.m-faq details[open] > summary::after { content: "−"; }
.m-faq__answer { padding-block-end: var(--space-5); max-inline-size: 62ch; color: var(--ink-2); }
.m-faq__answer strong { color: var(--ink); }
.m-faqpage { display: grid; gap: var(--space-6); padding-block-end: var(--space-7); }
@media (width >= 60rem) {
  .m-faqpage { grid-template-columns: 13rem minmax(0, 1fr); gap: var(--space-8); }
  .m-faqpage__toc { position: sticky; inset-block-start: calc(var(--header-height, 4rem) + var(--space-5)); align-self: start; }
}
.m-faqpage__toc h2 { font-size: var(--step-0); margin-block-end: var(--space-3); }
.m-faqpage__toc ol { display: grid; gap: var(--space-2); font-size: var(--step--1); }
.m-faqpage__groups { display: grid; gap: var(--space-7); min-inline-size: 0; }
.m-faqpage__groups h2 { font-size: var(--step-2); margin-block-end: var(--space-3); scroll-margin-block-start: 6rem; }
.m-faqpage section { scroll-margin-block-start: 6rem; }
.m-tarifs { display: grid; gap: var(--space-8); padding-block-end: var(--space-7); }
.m-tarifs__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.m-tarifs__title { font-size: var(--step-2); }
.m-prices { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); align-items: stretch; }
.m-price { gap: var(--space-3); align-content: start; }
.m-price--featured { border-color: var(--signal); box-shadow: inset 0 3px 0 var(--signal); }
.m-price--locked { border-style: dashed; border-color: var(--rule); background: repeating-linear-gradient(135deg, transparent 0 8px, color-mix(in oklch, var(--rule) 22%, transparent) 8px 9px), var(--paper-1); }
.m-price__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.m-price__amount { font: var(--weight-medium) var(--step-3) / 1 var(--font-mono); font-variant-numeric: tabular-nums lining-nums; }
.m-price__amount small { font: var(--weight-regular) var(--step--1) / 1 var(--font-sans); color: var(--ink-2); }
.m-prices--compact .m-price__amount { font-size: var(--step-2); }
.m-price__amount .m-price__or { display: block; margin-block-start: var(--space-2); }
.m-price__list { display: grid; gap: var(--space-2); }
.m-price__list li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2); align-items: start; }
.m-price__list svg { margin-block-start: 0.28em; color: var(--signal); }
.m-price--locked .m-price__list svg { color: var(--ink-3); }
.m-price__locked { display: flex; gap: var(--space-2); align-items: center; }
.m-price__y { display: none; }
.m-billing:has(#billing-yearly:checked) .m-price__m { display: none; }
.m-billing:has(#billing-yearly:checked) .m-price__y { display: inline; }
.m-beta { display: grid; gap: var(--space-6); padding-block-end: var(--space-8); max-inline-size: 44rem; }
.m-beta__form { gap: var(--space-5); }
.m-beta__deux { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.m-beta__h2 { font-size: var(--step-2); }
.m-beta__steps { display: grid; gap: var(--space-3); padding-inline-start: 1.4rem; }
.m-beta__done .c-callout + p { color: var(--ink-2); }
.c-stat-table__mark { font-weight: var(--weight-semibold); color: var(--ink-3); }

/* ---- Espace connecté --------------------------------------------------------------------------------------- */
.c-app__declared, .c-app__simulated { font-size: var(--step--1); color: var(--ink-2); }
.c-admin-mark { margin-block-end: var(--space-3); }
.c-app-nav__off { display: flex; align-items: center; gap: var(--space-2); min-block-size: 2.75rem; padding: 0.5rem 0.8rem; color: var(--ink-3); font-size: var(--step--1); font-weight: var(--weight-medium); white-space: nowrap; cursor: not-allowed; }
.c-app-nav__off svg { inline-size: 1.1rem; block-size: 1.1rem; flex: none; }
.c-app-nav__soon { font-weight: var(--weight-regular); }
@media (width < 60rem) { .c-app-nav__soon { display: none; } }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); padding: 0; margin: 0; list-style: none; }
.step { display: flex; align-items: center; gap: var(--space-2); padding-block-start: var(--space-2); border-block-start: 3px solid var(--rule); color: var(--ink-3); font-size: var(--step--1); min-inline-size: 0; }
.step--done { border-color: var(--ink-strong); color: var(--ink-2); }
.step--current { border-color: var(--signal); color: var(--ink); font-weight: var(--weight-semibold); }
.step__n { display: inline-grid; place-items: center; inline-size: 1.6rem; block-size: 1.6rem; flex: none; border: 1.5px solid currentColor; border-radius: 50%; font-size: var(--step--2); }
.step--current .step__n { background: var(--signal); color: var(--on-signal); border-color: var(--signal); }
@media (width < 32rem) { .step { flex-direction: column; align-items: flex-start; } }
.form, .q-form { display: grid; gap: var(--space-5); max-inline-size: 32rem; }
.lede { color: var(--ink-2); max-inline-size: 60ch; }
.me { gap: var(--space-3); }
.me__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.me__id { font-size: var(--step-2); font-family: var(--font-mono); font-weight: var(--weight-medium); }
.me__season { max-inline-size: 70ch; }
.jump { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--step--1); }
.zone { display: grid; gap: var(--space-4); scroll-margin-block-start: 5rem; }
.section { display: grid; gap: var(--space-4); }
.section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.cards { --grid-min: 18rem; }
.constat { gap: var(--space-3); }
.constat__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.constat__title { font-size: var(--step-1); }
.constat__phrase { max-inline-size: 60ch; color: var(--ink-2); }
.constat__phrase strong { color: var(--ink); }
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: var(--space-3); margin: 0; padding-block: var(--space-3); border-block: 1px solid var(--rule-soft); }
.figures > div { display: grid; gap: 0.15rem; min-inline-size: 0; }
.figures dt { font-size: var(--step--1); color: var(--ink-3); }
.figures dd { margin: 0; font-size: var(--step-1); font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.figures dd .text-meta { display: block; line-height: 1.35; font-size: var(--step--1); font-weight: var(--weight-regular); }
.constat__assoc { font-weight: var(--weight-medium); }
.texte > summary { cursor: pointer; font: var(--weight-semibold) var(--step-1) / 1.3 var(--font-display); font-stretch: var(--display-width); padding-block: var(--space-2); }
.c-prose--moteur { max-inline-size: 70ch; }
.c-prose--moteur h2 { font-size: var(--step-2); margin-block: var(--space-6) var(--space-3); }
.c-prose--moteur h3 { font-size: var(--step-1); margin-block: var(--space-5) var(--space-2); }
.c-prose--moteur h4 { font-size: var(--step-0); margin-block: var(--space-4) var(--space-2); }
.c-prose--moteur p, .c-prose--moteur li { color: var(--ink-2); }
.c-prose--moteur strong { color: var(--ink); }
.c-prose--moteur hr { border: 0; border-block-start: 1px solid var(--rule-soft); margin-block: var(--space-5); }
.c-prose--moteur table { inline-size: 100%; font-size: var(--step--1); }
.c-prose--moteur th, .c-prose--moteur td { text-align: start; vertical-align: top; padding: var(--space-2) var(--space-3); border: 1px solid var(--rule-strong); }
.block { display: grid; gap: var(--space-4); }
.validation { padding-block-start: var(--space-3); border-block-start: 1px solid var(--rule-soft); }
.wait { gap: var(--space-3); }
.wait__title { font-size: var(--step-1); }
.wait__text { font-weight: var(--weight-semibold); }
.wait__bar { inline-size: 100%; max-inline-size: 28rem; block-size: 0.6rem; accent-color: var(--signal); }
.wait__corps { display: flex; align-items: flex-start; gap: var(--space-4); }
.wait__etat { display: grid; gap: var(--space-2); flex: 1; min-inline-size: 0; }
.h { font-size: var(--step-1); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--space-4); margin: 0; }
.facts > div { display: grid; gap: 0.2rem; min-inline-size: 0; }
.facts dt { font-size: var(--step--1); color: var(--ink-3); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.delete-form { display: grid; gap: var(--space-4); max-inline-size: 28rem; }
.danger { border-color: color-mix(in oklch, var(--ink-alert) 55%, transparent); }
.gone { display: grid; gap: var(--space-4); padding-block: var(--space-8); }
.table-scroll { contain: inline-size; max-inline-size: 100%; overflow-x: auto; border: 1px solid var(--rule-strong); border-radius: var(--radius-m); }
.parties { inline-size: 100%; min-inline-size: 52rem; font-size: var(--step--1); border-collapse: collapse; }
.parties th, .parties td { text-align: start; padding: var(--space-2) var(--space-3); border-block-end: 1px solid var(--rule-soft); white-space: nowrap; }
.parties thead th { color: var(--ink-2); font-weight: var(--weight-medium); background: var(--paper-1); }
.parties tbody th { font-weight: var(--weight-regular); }
@media (width < 40rem) {
  /* Les tableaux « Tous tes chiffres » restent défilables sur mobile : sans `contain`, la grille `.replis` prenait la
     largeur du tableau et toute la page débordait à 360 px (recette du 19/10/2026). */
  .parties { min-inline-size: 0; }
  .parties thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .parties tbody, .parties tr { display: block; }
  .parties tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); padding: var(--space-3); margin-block-end: var(--space-3); border: 1px solid var(--rule-strong); border-radius: var(--radius-m); }
  .parties th, .parties td { display: block; padding: 0; border: 0; white-space: normal; overflow-wrap: anywhere; }
  .parties tbody th { grid-column: 1 / -1; font-weight: var(--weight-medium); }
  .parties td::before { content: attr(data-label); display: block; color: var(--ink-3); }
}
.health-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.health-grid h2 { font-size: var(--step-1); margin-block-end: var(--space-3); }
.kv { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-4); }
.kv dd { margin: 0; text-align: end; font-weight: var(--weight-medium); }
.c-prose table { inline-size: 100%; font-size: var(--step--1); }
.c-prose th, .c-prose td { text-align: start; vertical-align: top; padding: var(--space-2) var(--space-3); border: 1px solid var(--rule-strong); }
.c-prose blockquote { margin-inline: 0; padding-inline-start: var(--space-4); border-inline-start: 3px solid var(--rule-strong); }
.c-prose .c-todo { background: color-mix(in oklch, var(--ink-watch) 30%, transparent); color: inherit; padding-inline: 0.25em; border-radius: 3px; }

/* ---- Boîte de réception de développement ------------------------------------------------------------------- */
.m-inbox { padding-block-end: var(--space-8); }
.m-inbox__list { display: grid; gap: var(--space-4); padding: 0; margin: 0; list-style: none; }
.m-inbox__mail { gap: var(--space-2); }
.m-inbox__texte { white-space: pre-wrap; overflow-wrap: anywhere; font: var(--weight-regular) var(--step--1) / 1.5 var(--font-mono); color: var(--ink-2); background: var(--paper-2); padding: var(--space-3); border-radius: var(--radius-s); }

/* ---- Sélecteur de langue ---------------------------------------------------------------------------------- */
.c-langues ul { display: flex; flex-wrap: wrap; gap: var(--space-1); padding: 0; margin: 0; list-style: none; }
.c-langues button { background: none; border: 1px solid transparent; border-radius: var(--radius-s); color: var(--ink-2); font: var(--weight-medium) var(--step--1) / 1.2 var(--font-mono); padding: 0.3rem 0.5rem; cursor: pointer; }
.c-langues button:hover { color: var(--ink); border-color: var(--rule-strong); }
.c-langues button[aria-current="true"] { color: var(--signal); border-color: var(--signal); }
.c-langues button:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.c-menu__panel .c-langues { margin-block-start: var(--space-3); }

/* ==========================================================================
   Lecture « dire, montrer, prouver » (docs/ux/PRESENTATION-DIAGNOSTIC.md) : une carte par priorité, un seul chiffre
   fort contre sa référence, l'engagement, et la preuve repliée. Puis les pages plan, carte de poche, attente, parties.
   ========================================================================== */
.page-head { display: grid; gap: var(--space-2); }
.page-head__meta { color: var(--ink-2); max-inline-size: var(--measure); }
.lecture { display: grid; gap: var(--space-4); }
.c-finding { display: grid; gap: var(--space-3); padding: var(--space-5); border-inline-start: 4px solid var(--status-a-surveiller); }
.c-finding[data-status="priorite"] { border-inline-start-color: var(--status-priorite); }
.c-finding[data-status="point_fort"] { border-inline-start-color: var(--status-point-fort); }
.c-finding[data-status="signale_pour_revision"] { border-inline-start-color: var(--status-signale-revision); }
.c-finding__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-size: var(--step--1); color: var(--ink-2); }
.c-finding__title { font: var(--weight-semibold) var(--step-2) / 1.2 var(--font-display); font-stretch: var(--display-width); }
.c-figure { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--space-4); align-items: baseline; margin: 0; }
.c-figure__value { grid-row: span 2; font-family: var(--font-mono); font-size: var(--step-4); font-weight: var(--weight-bold); line-height: 1; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.c-figure__label { font-weight: var(--weight-medium); align-self: end; }
.c-figure__ref { color: var(--ink-2); font-size: var(--step--1); align-self: start; }
.c-finding__do { font-size: var(--step-1); max-inline-size: var(--measure); }
.c-finding__why { color: var(--ink-2); max-inline-size: var(--measure); }
.c-commit { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4); background: var(--signal-wash); border-inline-start: 3px solid var(--signal); border-radius: var(--radius-s); }
.c-commit__target { font-weight: var(--weight-semibold); }
.c-commit__when { font-size: var(--step--1); color: var(--ink); }                         /* sur le lavis signal, ink-2 tombe sous 4,5:1 (axe, 20/10) */
.c-commit .c-piste, .c-commit .c-piste .num, .c-commit .c-piste .text-meta { color: var(--ink); }
.c-commit--fil { padding: var(--space-5); gap: var(--space-2); }
.c-commit--fil .c-commit__target { font-size: var(--step-1); }
.c-commit__titre { font-size: var(--step--1); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); }
.c-proof { border-block-start: 1px solid var(--rule-soft); padding-block-start: var(--space-1); }
.c-proof > summary { cursor: pointer; padding-block: var(--space-2); font-size: var(--step--1); font-weight: var(--weight-medium); color: var(--ink-2); list-style-position: inside; }
.c-proof > summary:hover, .c-proof[open] > summary { color: var(--ink); }
.c-proof > :not(summary) { margin-block-start: var(--space-2); }
.c-proof dl { display: grid; gap: var(--space-2); }
.c-proof dl > div { display: grid; gap: var(--space-1); }
.c-proof dt { font-size: var(--step--1); font-weight: var(--weight-semibold); }
.c-proof dd, .c-proof > p, .c-proof > ul { font-size: var(--step--1); color: var(--ink-2); max-inline-size: var(--measure); }
.c-proof > ul { display: grid; gap: var(--space-1); padding-inline-start: 1.2em; }
.c-proof .c-prose { font-size: var(--step--1); }
.c-coach-card--app { margin-block: 0; }
.c-coach-card--app p + p { margin-block-start: var(--space-2); }
.c-dont { display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-5); border: 1px dashed var(--rule); border-radius: var(--radius-m); }
.c-dont__title { font-size: var(--step-1); }
.c-dont ul { display: grid; gap: var(--space-2); }
.c-dont li { display: flex; gap: var(--space-3); align-items: flex-start; }
.c-dont li > svg { flex: none; inline-size: 1.25rem; block-size: 1.25rem; margin-block-start: 0.15em; color: var(--ink-3); }
.c-dont__label { display: block; font-weight: var(--weight-semibold); }
.c-dont__why { display: block; font-size: var(--step--1); color: var(--ink-2); }
.liste-simple { display: grid; gap: var(--space-2); }
.liste-simple ul { display: grid; gap: var(--space-2); }
.liste-simple li { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; }
.replis { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1); padding-block-start: var(--space-4); border-block-start: 1px solid var(--rule-soft); }
.replis > .c-proof { border-block-start: 0; min-inline-size: 0; }
.c-prose { overflow-wrap: anywhere; }
@media (width < 40rem) { .c-prose table { display: block; max-inline-size: 100%; overflow-x: auto; } }
.chiffres { font-size: var(--step--1); }
.chiffres th[scope="row"] { font-weight: var(--weight-medium); }
.relire { display: grid; gap: var(--space-2); padding-block-start: var(--space-4); border-block-start: 1px solid var(--rule-soft); }
.avant { gap: var(--space-2); }
.avant .c-button { justify-self: start; }
.c-wait-steps { display: grid; gap: var(--space-2); padding: 0; counter-reset: etape; list-style: none; }
.c-wait-steps li { display: flex; gap: var(--space-3); align-items: center; color: var(--ink-3); }
.c-wait-steps li::before { counter-increment: etape; content: counter(etape); flex: none; display: grid; place-items: center; inline-size: 1.6rem; block-size: 1.6rem; border: 1px solid var(--rule); border-radius: 50%; font-family: var(--font-mono); font-size: var(--step--1); }
.c-wait-steps li[data-etat="fait"] { color: var(--ink-2); }
.c-wait-steps li[data-etat="fait"]::before { content: "✓"; border-color: transparent; background: var(--signal-tint); color: var(--signal); }
.c-wait-steps li[data-etat="en_cours"] { color: var(--ink); font-weight: var(--weight-semibold); }
.c-wait-steps li[data-etat="en_cours"]::before { border-color: var(--signal); color: var(--signal); animation: pulsation 1.6s ease-in-out infinite; }
@keyframes pulsation { 50% { box-shadow: 0 0 0 4px var(--signal-wash); } }
@media (prefers-reduced-motion: reduce) { .c-wait-steps li[data-etat="en_cours"]::before { animation: none; } }
.poche { display: grid; gap: var(--space-5); max-inline-size: 36rem; }
.poche__bloc { display: grid; gap: var(--space-2); }
.poche__bloc h2 { font-size: var(--step--1); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); }
.poche__bloc ol { display: grid; gap: var(--space-2); padding-inline-start: 1.3em; font-size: var(--step-1); }
.poche__actions { padding-block-start: var(--space-2); }
.c-games { display: grid; gap: var(--space-2); padding: 0; list-style: none; }
.c-game details { border: 1px solid var(--rule-soft); border-radius: var(--radius-s); background: var(--paper-1); }
.c-game summary { display: grid; grid-template-columns: 3.5rem 1fr auto auto auto; gap: var(--space-3); align-items: center; padding: var(--space-2) var(--space-3); cursor: pointer; list-style: none; }
.c-game summary::-webkit-details-marker { display: none; }
.c-game__date { font-size: var(--step--1); color: var(--ink-2); }
.c-game__champ { font-weight: var(--weight-semibold); }
.c-game__dur { font-size: var(--step--1); color: var(--ink-2); }
.c-game__details { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-2) var(--space-4); padding: var(--space-2) var(--space-3) var(--space-3); border-block-start: 1px solid var(--rule-soft); }
.c-game__details dt { font-size: var(--step--2); color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.04em; }
@media (max-width: 40rem) {
  .c-game summary { grid-template-columns: 3.5rem 1fr auto; }
  .c-game__kda, .c-game__dur { display: none; }
  .c-figure { grid-template-columns: 1fr; }
  .c-figure__value { grid-row: auto; }
}
.compte { display: grid; gap: var(--space-4); }
.compte__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.c-coach-card--app { max-inline-size: none; }

/* ==========================================================================
   Landing « rentre à la base » (docs/communication/LANDING.md) : bandeau, scène du héros (carte abstraite, trajet, retour,
   anneau de la marque, puis la carte de coach), bulles de l'insight, piste de verdict, méthode en trois blocs.
   L'état final est l'état par défaut : sous mouvement réduit, tout s'affiche d'emblée.
   ========================================================================== */
.m-bandeau { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-block-start: var(--space-4); padding: var(--space-2) var(--space-4); border: 1px solid var(--rule-soft); border-radius: var(--radius-s); background: var(--paper-1); font-size: var(--step--1); color: var(--ink-2); }
.m-bandeau > span { flex: 1 1 24rem; }
.m-bandeau > svg { inline-size: 1.1rem; block-size: 1.1rem; color: var(--signal); flex: none; }
.m-bandeau a { font-weight: var(--weight-semibold); }
.m-hero__sur { font: var(--weight-medium) var(--step--1) / 1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--signal); }
.m-hero .c-hero__us { color: var(--ink); max-inline-size: 14ch; }
.m-hero .c-hero__them { font-size: var(--step-3); font-stretch: 62%; }
.m-scene { position: relative; display: grid; grid-template-areas: "scene"; min-block-size: 22rem; }
.m-scene > * { grid-area: scene; }
.m-map { inline-size: min(100%, 26rem); block-size: auto; justify-self: end; align-self: start; color: var(--signal); animation: m-map-fond 0.8s var(--ease-ink) 3.4s both; }
.m-map__fond { fill: var(--paper-1); }
.m-map__riviere { stroke: var(--signal-wash); }
.m-map__trajet { stroke: var(--ink-2); stroke-dasharray: 100; stroke-dashoffset: 0; animation: m-trace 1.4s linear 1.2s both; }
.m-map__mort { stroke: var(--status-priorite); animation: m-mort 0.3s var(--ease-ink) 2s both; }
.m-map__mort--2 { animation-delay: 2.3s; }
.m-map__mort--3 { animation-delay: 2.6s; }
.m-map__retour { stroke: var(--signal); stroke-dasharray: 100; stroke-dashoffset: 0; animation: m-trace 0.8s linear 2.6s both; }
.m-map__base { fill: var(--signal); }
.m-scene__recall { --recall-taille: 2.6rem; --recall-delai: 2.8s; --recall-duree: 0.8s; position: absolute; display: flex; align-items: center; gap: var(--space-2); inset-inline-start: calc(100% - min(100%, 26rem) + 2.2rem); inset-block-start: 21rem; animation: m-mort 0.3s var(--ease-ink) 2.8s both; }
.m-scene__etiquette { font: var(--weight-medium) var(--step--2) / 1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--signal); }
.m-hero__note { align-self: end; justify-self: start; max-inline-size: 27rem; margin-block-start: 8rem; animation: m-carte 0.8s var(--ease-ink) 3.4s both; }
.m-hero__theme { font: var(--weight-semibold) var(--step-1) / 1.2 var(--font-display); font-stretch: var(--display-width); }
.m-hero__note .c-figure__value { font-size: var(--step-3); }
.m-hero__objectif { font-size: var(--step-0); }
.m-hero__dont { font-size: var(--step--1); color: var(--ink-2); }
@keyframes m-trace { from { stroke-dashoffset: 100; } }
@keyframes m-mort { from { opacity: 0; } }
@keyframes m-carte { from { opacity: 0; translate: 0 12px; } }
@keyframes m-map-fond { from { opacity: 0.9; } }
.m-map { opacity: 0.45; }
@media (width < 66rem) {
  .m-scene { min-block-size: 0; }
  .m-map { inline-size: 12rem; opacity: 0.25; }
  .m-scene__recall { display: none; }
  .m-hero__note { margin-block-start: 3rem; }
}
.c-piste { display: grid; gap: var(--space-1); font-size: var(--step--1); color: var(--ink-2); }
.c-piste__barre { inline-size: 100%; block-size: 0.7rem; accent-color: var(--signal); background: repeating-linear-gradient(90deg, var(--paper-2) 0 7px, var(--rule-soft) 7px 8px); border: 1px solid var(--rule-soft); border-radius: 2px; }
.c-piste__barre::-webkit-progress-bar { background: repeating-linear-gradient(90deg, var(--paper-2) 0 7px, var(--rule-soft) 7px 8px); }
.c-piste__barre::-webkit-progress-value { background: var(--signal); }
.c-piste__barre::-moz-progress-bar { background: var(--signal); }
.m-bulles { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.m-bulle { display: inline-block; padding: var(--space-2) var(--space-4); border: 1px solid var(--rule); border-radius: 1.2rem 1.2rem 1.2rem 0.2rem; background: var(--paper-1); color: var(--ink-2); font-size: var(--step--1); rotate: -1.5deg; }
.m-bulle--2 { rotate: 1deg; border-radius: 1.2rem 1.2rem 0.2rem 1.2rem; }
.m-bulle--3 { rotate: -0.5deg; }
.m-calme { display: grid; gap: var(--space-3); padding: var(--space-5); border-inline-start: 3px solid var(--signal); background: var(--signal-tint); border-radius: var(--radius-s); max-inline-size: var(--measure); }
.m-calme__titre { font: var(--weight-medium) var(--step--1) / 1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--signal); }
.m-exemple { gap: var(--space-4); }
.m-trois { display: grid; gap: var(--space-5); }
@media (width >= 50rem) { .m-trois { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.m-trois h3 { font-size: var(--step-1); margin-block-end: var(--space-2); }
.m-trois p { color: var(--ink-2); }
.m-insight .m-title { max-inline-size: 30ch; }
.m-criteres { display: grid; gap: var(--space-3); padding-inline-start: 1.4em; max-inline-size: 60ch; list-style: decimal; }
.m-criteres li::marker { color: var(--signal); font-family: var(--font-mono); }
.m-criteres li { color: var(--ink-2); }
.m-criteres li strong { color: var(--ink); }

/* Impression : la carte de poche et le plan sortent en noir sur blanc, sans l'habillage de l'application (revue UX L1-06). */
@media print {
  body { background: #fff; color: #000; }
  .c-app__header-wrap, .c-app__side, .c-app__demo, .c-site-footer, .poche__actions, .relire, .avant, .c-skip, .c-cookie { display: none !important; }
  .c-app__body { display: block; }
  .c-app__main, .poche { max-inline-size: 100%; }
  .c-card, .c-commit, .c-coach-card, .c-finding, .c-dont, .poche__bloc { border: 1px solid #999; background: #fff; color: #000; break-inside: avoid; box-shadow: none; }
  a { color: #000; text-decoration: none; }
  summary { list-style: none; }
}