:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:var(--ds-text-caption-s) var(--ds-font-body);background:var(--card);color:var(--foreground)}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}
/* Tokens copied verbatim from global.css (revision 5). Single light theme: the DS has no dark palette. */
@media (min-width: 48rem) {
}
/* Layout concept: the page opens on a playable sheet on a pink desk; everything after explains what the visitor just saw. Local x- classes read tokens only. */
html { color-scheme: light; --x-bar-h: 4rem; }
body { background-color: var(--background); color: var(--foreground); font-family: var(--ds-font-body); font-weight: var(--ds-weight-body); font-size: var(--ds-text-body); line-height: var(--ds-leading-body); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--background); }
*, *::before, *::after { box-sizing: border-box; border-color: var(--border); }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
h1, h2, h3, h4 { font-family: var(--ds-font-heading); font-weight: var(--ds-weight-heading); text-wrap: balance; }
ul, ol { padding: 0; list-style: none; }
button { background: none; border: 0; color: inherit; font: inherit; }
input, select { font: inherit; }
input::placeholder { color: var(--ds-color-ink-muted); }
:focus-visible { outline: var(--ds-space-xs) solid var(--ring); outline-offset: var(--ds-space-xs); }
.bg-primary :focus-visible { outline-color: var(--primary-foreground); }
section[id], input[id] { scroll-margin-top: var(--ds-space-2xl); }
section:focus { outline: none; }

.x-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.x-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.x-minw { min-width: 0; }
.x-bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; }
.x-link { color: var(--muted-foreground); }
.x-link:hover { color: var(--foreground); text-decoration: underline; }
@media (max-width: 47.99rem) { .x-hide-sm { display: none !important; } }

.x-mode { background: var(--muted); color: var(--foreground); min-width: var(--ds-space-2xl); }
.x-mode[aria-pressed="true"] { background: var(--primary); color: var(--primary-foreground); }

/* The desk and its stack of sheets */
.x-desk { position: relative; overflow: hidden; }
.x-stack { position: relative; }
.x-stack::before, .x-stack::after { content: ""; position: absolute; inset: 0; border-radius: var(--ds-radius-card); box-shadow: var(--ds-shadow-sm); }
.x-stack::before { background: var(--accent); transform: rotate(-3deg); }
.x-stack::after { background: var(--ds-color-primary-light); transform: rotate(2deg); }
.x-paper { position: relative; z-index: 1; min-height: 100%; }
.x-paper-in { animation: x-in .35s ease-out both; }
@keyframes x-in { from { transform: translateY(var(--ds-space-md)) rotate(1deg); opacity: .4; } to { transform: none; opacity: 1; } }
.x-burst { position: absolute; left: 50%; top: 40%; z-index: 2; pointer-events: none; }
.x-spark { position: absolute; width: var(--ds-space-lg); height: var(--ds-space-lg); animation: x-spark .75s ease-out both; --x: 0; --y: 0; }
@keyframes x-spark { from { transform: translate(0, 0) scale(.4); opacity: 1; } to { transform: translate(var(--x), var(--y)) scale(1.1); opacity: 0; } }

.x-tag { display: inline-block; color: var(--foreground); border-radius: var(--ds-radius-cta); padding: var(--ds-space-xs) var(--ds-space-sm-md); }
.x-sum { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-xs) var(--ds-space-sm-md); }
.x-sum-text { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-sm); min-width: 0; }
.x-cell { width: calc(var(--ds-space-xl) + var(--ds-space-md)); padding: var(--ds-space-xs); text-align: center; color: var(--foreground); background: var(--background); border: 2px solid var(--primary); border-radius: var(--ds-radius-sm); }
.x-cell-ok { border-color: var(--ds-color-success); }
.x-cell-try { border-color: var(--ds-color-ink-muted); background: var(--ds-color-accent-soft); }
.x-dots { display: flex; flex-wrap: wrap; gap: var(--ds-space-xs); }
.x-dots .x-dot { width: var(--ds-space-sm-md); height: var(--ds-space-sm-md); }
.x-box { display: inline-block; width: var(--ds-space-lg); height: var(--ds-space-lg); vertical-align: middle; border: 2px solid var(--primary); border-radius: var(--ds-radius-sm); }

.x-step { color: var(--muted-foreground); background: var(--background); }
.x-step-on { color: var(--accent-foreground); background: var(--accent); }
.x-dot { display: block; flex-shrink: 0; width: var(--ds-space-md); height: var(--ds-space-md); border-radius: var(--ds-bullet-radius); border: 2px solid var(--primary); }
.x-dot-full { background: var(--primary); }
.x-dot-half { background: linear-gradient(90deg, var(--primary) 50%, transparent 50%); }
.x-stops { display: flex; flex-direction: column; gap: var(--ds-space-sm); }
.x-stop { display: flex; align-items: center; gap: var(--ds-space-sm); }
.x-stop-now { font-weight: var(--ds-weight-body-strong); }
@media (min-width: 48rem) {
  .x-stops { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ds-space-md); }
  .x-stop { flex-direction: column; align-items: flex-start; }
}

.x-tilt-l { transform: rotate(-1deg); }
.x-tilt-r { transform: rotate(1deg); }
.x-pin { display: inline-flex; align-items: center; justify-content: center; width: var(--ds-space-lg); height: var(--ds-space-lg); margin-right: var(--ds-space-xs); border-radius: var(--ds-bullet-radius); background: var(--primary); color: var(--primary-foreground); font-family: var(--ds-font-heading); font-size: var(--ds-text-caption); line-height: 1; vertical-align: middle; }
.x-indent { padding-left: calc(var(--ds-space-lg) + var(--ds-space-sm)); }

/* The skills map */
.x-map { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(5, minmax(0, 1fr)); align-items: center; gap: var(--ds-space-sm-md) var(--ds-space-xs); }
.x-map-h { text-align: center; font-family: var(--ds-font-heading); font-size: var(--ds-text-caption); color: var(--muted-foreground); }
.x-map-now { color: var(--primary-foreground); background: var(--primary); border-radius: var(--ds-radius-cta); }
.x-map-l { font-size: var(--ds-text-body-xs); min-width: 0; }
.x-c { display: block; height: var(--ds-space-lg); border-radius: var(--ds-radius-sm); background: var(--ds-color-surface-page); border: 2px solid var(--border); }
.x-c-full { background: var(--primary); border-color: var(--primary); }
.x-c-half { background: repeating-linear-gradient(45deg, var(--secondary), var(--secondary) 4px, var(--accent) 4px, var(--accent) 8px); border-color: var(--primary); }
.x-c-now { outline: 2px dashed var(--primary); outline-offset: 2px; }
.x-c-key { width: var(--ds-space-lg); height: var(--ds-space-md); flex-shrink: 0; }
.x-skill { display: flex; align-items: center; gap: var(--ds-space-sm); }

.x-sheet { display: block; width: var(--ds-space-xl); height: calc(var(--ds-space-xl) * 1.3); max-width: 100%; }

.x-todo { background: var(--ds-color-accent-soft); color: var(--ds-color-ink); border: 1px dashed var(--ds-color-ink-muted); }
.x-todo-tag { display: inline-block; background: var(--accent); color: var(--accent-foreground); border-radius: var(--ds-radius-cta); padding-inline: var(--ds-space-sm); font-family: var(--ds-font-heading); font-size: var(--ds-text-caption); margin-right: var(--ds-space-xs); }
.divide-y > * + * { border-top: 1px solid var(--border); }

@media (prefers-reduced-motion: reduce) {
  .x-paper-in, .x-spark { animation: none; }
}

/* DS utility classes, same names as DESIGN.md */
.bg-background{background-color:var(--background)}
.bg-card{background-color:var(--card)}
.bg-foreground{background-color:var(--foreground)}
.bg-muted{background-color:var(--muted)}
.bg-primary{background-color:var(--primary)}
.border{border-width:1px;border-style:solid}
.border-b{border-bottom-width:1px;border-bottom-style:solid}
.border-border{border-color:var(--border)}
.border-t{border-top-width:1px;border-top-style:solid}
.border-y{border-block-width:1px;border-block-style:solid}
.cursor-pointer{cursor:pointer}
.flex{display:flex}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.font-button{font-family:var(--ds-button-font)}
.font-heading{font-family:var(--ds-font-heading)}
.gap-lg{gap:var(--ds-space-lg)}
.gap-md{gap:var(--ds-space-md)}
.gap-sm{gap:var(--ds-space-sm)}
.gap-xl{gap:var(--ds-space-xl)}
.gap-xs{gap:var(--ds-space-xs)}
.grid{display:grid}
.inline-flex{display:inline-flex}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.max-w-content{max-width:var(--ds-content-width)}
.max-w-measure{max-width:var(--ds-measure)}
.mx-auto{margin-inline:auto}
.p-lg{padding:var(--ds-space-lg)}
.p-sm{padding:var(--ds-space-sm)}
.pt-sm{padding-top:var(--ds-space-sm)}
.px-gutter{padding-left:max(var(--ds-gutter),env(safe-area-inset-left,0px));padding-right:max(var(--ds-gutter),env(safe-area-inset-right,0px))}
.px-lg{padding-inline:var(--ds-space-lg)}
.px-md{padding-inline:var(--ds-space-md)}
.px-sm{padding-inline:var(--ds-space-sm)}
.py-2xl{padding-block:var(--ds-space-2xl)}
.py-lg{padding-block:var(--ds-space-lg)}
.py-md{padding-block:var(--ds-space-md)}
.py-sm{padding-block:var(--ds-space-sm)}
.py-xs{padding-block:var(--ds-space-xs)}
.rounded-card{border-radius:var(--ds-radius-card)}
.rounded-cta{border-radius:var(--ds-radius-cta)}
.rounded-lg{border-radius:var(--ds-radius-lg)}
.rounded-md{border-radius:var(--ds-radius-md)}
.shadow-card{box-shadow:var(--ds-card-shadow)}
.shadow-lg{box-shadow:var(--ds-shadow-lg)}
.text-background{color:var(--background)}
.text-body{font-size:var(--ds-text-body);line-height:var(--ds-leading-body)}
.text-body-bold{font-size:var(--ds-text-body-bold);line-height:var(--ds-leading-body);font-weight:var(--ds-weight-body-strong)}
.text-body-s{font-size:var(--ds-text-body-s);line-height:var(--ds-leading-body)}
.text-caption{font-size:var(--ds-text-caption)}
.text-caption-s{font-size:var(--ds-text-caption-s)}
.text-card-foreground{color:var(--card-foreground)}
.text-center{text-align:center}
.text-foreground{color:var(--foreground)}
.text-h1{font-size:var(--ds-text-h1);line-height:var(--ds-h1-leading);letter-spacing:var(--ds-h1-tracking);font-weight:var(--ds-h1-weight)}
.text-h2{font-size:var(--ds-text-h2);line-height:var(--ds-h2-leading);letter-spacing:var(--ds-h2-tracking);font-weight:var(--ds-h2-weight)}
.text-h3{font-size:var(--ds-text-h3);line-height:var(--ds-h3-leading);letter-spacing:var(--ds-h3-tracking);font-weight:var(--ds-h3-weight)}
.text-h4{font-size:var(--ds-text-h4);line-height:var(--ds-h4-leading);letter-spacing:var(--ds-h4-tracking);font-weight:var(--ds-h4-weight)}
.text-ink-soft{color:var(--ds-color-text-soft)}
.text-muted-foreground{color:var(--muted-foreground)}
.text-primary-foreground{color:var(--primary-foreground)}
.w-full{width:100%}
@media (min-width:48rem){
.md\:col-span-2{grid-column:span 2/span 2}
.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* The two DS directions, loaded last so they win over the utilities */
/* Shared chrome of the comparison */
body { padding-bottom: calc(var(--ds-space-2xl) + env(safe-area-inset-bottom, 0px)); }

/* ========== 1. ACTUEL RENFORCÉ: same pastel tones, more brand ========== */
:root {
  font-synthesis: none;
}
@media (min-width: 48rem) {
}

/* ========== 2. ALBUM: a children's publisher. Real pictures, large colour fields, a title face with character ========== */

/* Header melts into the hero */

/* Hero: deep petrol field, cream type, one yellow phrase, one coral action */

/* The sheets become small picture-book pages */

/* Pictures */

/* Section colour fields */

/* Example sheets look like paper on a table */

/* Steps: coloured discs instead of numerals */

/* Quotes */
[hidden] { display: none !important; }
.x-self-start { align-self: flex-start; }
.x-push { margin-top: auto; }
.x-minw { min-width: 0; }

/* Hero, text version: centred on a plain ground */
[data-hero="texte"] #stage-wrap { display: none; }
[data-hero="texte"] .x-hero-grid { grid-template-columns: minmax(0, 1fr); }
[data-hero="texte"] .x-hero-text { align-items: center; text-align: center; max-width: var(--ds-wide, 56rem); margin-inline: auto; }
[data-hero="texte"] .x-hero-cta { align-items: center; }
[data-hero="texte"] .x-hero-cta .x-self-start { align-self: center; }

/* Hero, animated version: a pile of sheets, a progress card laid across it */
.x-hero { overflow-x: clip; }
.x-hero-cta { margin-top: var(--ds-space-sm); }
.x-stage { position: relative; height: 36rem; }
.x-pile { position: absolute; top: 0; right: 0; width: min(82%, 24rem); height: 28rem; }
.x-fs { position: absolute; inset: 0; display: flex; flex-direction: column; gap: var(--ds-space-sm); padding: var(--ds-space-lg); overflow: hidden; background: var(--card); color: var(--card-foreground); border-radius: var(--ds-radius-card); box-shadow: var(--ds-shadow-md); transition: transform .7s cubic-bezier(.3, .9, .4, 1), opacity .5s; }
.x-pos-0 { z-index: 3; transform: rotate(2deg); }
.x-pos-1 { z-index: 2; transform: translate(calc(var(--ds-space-md) * -1), var(--ds-space-sm)) rotate(-3deg); }
.x-pos-2 { z-index: 1; transform: translate(var(--ds-space-md), calc(var(--ds-space-sm) * -1)) rotate(5deg); opacity: .75; }
.x-fs-tag { background: var(--secondary); color: var(--secondary-foreground); border-radius: var(--ds-radius-cta); padding: var(--ds-space-xs) var(--ds-space-sm); }
.x-lvl { display: flex; gap: var(--ds-space-xs); }
.x-lvl i { display: block; width: var(--ds-space-sm); height: var(--ds-space-sm); border-radius: var(--ds-bullet-radius); background: var(--muted); }
.x-lvl i.x-on { background: var(--primary); }
.x-sk-title { display: block; width: 62%; height: var(--ds-space-md); border-radius: var(--ds-radius-sm); background: var(--foreground); }
.x-bar-l { display: block; height: var(--ds-space-sm); border-radius: var(--ds-radius-sm); background: var(--muted); }
.x-w50 { width: 50%; } .x-w60 { width: 60%; } .x-w70 { width: 70%; } .x-w90 { width: 90%; }
.x-fs-row { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-sm); }
.x-fs-row .x-bar-l { flex: none; }
.x-fs-box { display: block; flex: none; width: var(--ds-space-xl); height: var(--ds-space-lg); border: 1px solid var(--muted-foreground); border-radius: var(--ds-radius-sm); }
.x-fs-box-w { width: calc(var(--ds-space-xl) * 1.6); }
.x-fs-art { flex: none; }
.x-fs-lvl { color: var(--muted-foreground); }
.x-fs-q { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-sm); }
.x-fs-with { display: inline-flex; align-items: center; gap: var(--ds-space-xs); }
.x-fs-clock { flex: none; width: var(--ds-space-lg); height: var(--ds-space-lg); }
.x-fs-write { display: block; flex: 1; min-height: var(--ds-space-xl); border: 2px dashed var(--border); border-radius: var(--ds-radius-sm); }
.x-pcard { position: absolute; left: 0; bottom: var(--ds-space-lg); z-index: 5; width: min(100%, 27rem); display: flex; flex-direction: column; gap: var(--ds-space-md); padding: var(--ds-space-md) var(--ds-space-lg); background: var(--card); color: var(--card-foreground); border-radius: var(--ds-radius-lg); transform: rotate(-1.5deg); }
@media (max-width: 63.99rem) {
  .x-pcard { padding-inline: var(--ds-space-md); }
  .x-sk-n { font-size: var(--ds-text-caption); }
}
.x-pcard-ex { font-weight: var(--ds-weight-body); color: var(--muted-foreground); margin-left: var(--ds-space-xs); }
.x-replay { position: absolute; right: 0; bottom: 0; color: var(--muted-foreground); text-decoration: underline; text-underline-offset: .2em; padding: var(--ds-space-xs); }

/* Skill row with four stops */
.x-sk { display: flex; flex-direction: column; gap: var(--ds-space-xs); }
.x-sk-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ds-space-sm); }
.x-sk-n { min-width: 0; line-height: 1.25; }
.x-sk-s { flex: none; font-weight: var(--ds-weight-body-strong); color: var(--muted-foreground); }
.x-sk[data-at="3"] .x-sk-s { color: var(--foreground); }
.x-track { position: relative; height: var(--ds-space-sm); border-radius: var(--ds-radius-sm); background: var(--muted); }
.x-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: var(--ds-radius-sm); background: var(--primary); transition: width .8s cubic-bezier(.3, .9, .4, 1); }
.x-thumb { position: absolute; right: 0; top: 50%; width: var(--ds-space-sm); height: var(--ds-space-sm); margin-top: calc(var(--ds-space-sm) / -2); margin-right: calc(var(--ds-space-sm) / -2); border-radius: 50%; background: var(--foreground); }
[data-at="1"] .x-fill { width: 33.33%; } [data-at="2"] .x-fill { width: 66.66%; } [data-at="3"] .x-fill { width: 100%; }

.x-em { font-style: normal; }
.x-album-pic { display: none; }
.x-art-s { aspect-ratio: 4 / 1; }

/* Why */
.x-why { display: grid; gap: var(--ds-space-xs); }

/* Kinds of sheets */
.x-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-xs) var(--ds-space-sm); }
.x-ans { display: inline-block; vertical-align: middle; width: var(--ds-space-xl); height: var(--ds-space-lg); border: 1px solid var(--muted-foreground); border-radius: var(--ds-radius-sm); background: var(--card); }
.x-ans { position: relative; }
.x-hw { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--ds-font-script); font-size: var(--ds-text-body-s); font-weight: var(--ds-weight-body); line-height: 1; white-space: nowrap; color: var(--primary); clip-path: inset(0 100% 0 0); transition: clip-path .15s; }
.x-kind:hover .x-hw, .x-filled .x-hw { clip-path: inset(-20% -5% -20% 0); transition: clip-path .7s steps(14) calc(var(--i) * .75s); }
.x-ans-s { width: var(--ds-space-lg); }
.x-ans-w { width: calc(var(--ds-space-2xl) * 1.5); }
.x-art { display: block; width: 100%; aspect-ratio: 5 / 2; overflow: hidden; border-radius: var(--ds-radius-md); --a-grass: var(--ds-color-success); }
.x-art svg { display: block; width: 100%; height: 100%; }
.x-qr { display: flex; align-items: center; gap: var(--ds-space-xs); color: var(--muted-foreground); padding-top: var(--ds-space-sm); }
.x-qr-i { flex: none; width: var(--ds-space-lg); height: var(--ds-space-lg); color: var(--foreground); }

/* Colour rotation across the page */
:root { --x-c2: var(--ds-color-extra1); --x-c2-on: var(--ds-color-on-extra1); --x-c3: var(--ds-color-extra2); --x-c3-on: var(--foreground); --x-c3-ink: var(--ds-color-extra2-ink); }
.x-sk:nth-child(3n+2) .x-fill { background: var(--x-c2); }
.x-sk:nth-child(3n+3) .x-fill { background: var(--x-c3); }
:root .x-hw { color: var(--x-c2); }
:root #formules { background: color-mix(in srgb, var(--x-c3) 25%, var(--card)); }
:root #sur-mesure { background: var(--ds-color-secondary); }
:root #comment .x-row:nth-child(2) .x-num { color: var(--x-c2); }
:root #comment .x-row:nth-child(3) .x-num { color: var(--x-c3); }

/* Footer */
.x-foot { display: grid; gap: var(--ds-space-lg); }
@media (min-width: 48rem) { .x-foot { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.x-foot-go { display: block; padding: 0; text-align: left; }
.x-foot-go:hover { text-decoration: underline; }

/* Steps: alternating rows, text and an animated card */
.x-num { color: var(--primary); line-height: 1; }
.x-rows { display: flex; flex-direction: column; gap: var(--ds-space-2xl); list-style: none; }
@media (min-width: 48rem) {
  .x-flip > :first-child { order: 2; }
}
.x-fc-field { display: flex; flex-direction: column; gap: var(--ds-space-xs); min-width: 0; }
.x-fc-v { display: block; padding: var(--ds-space-xs) var(--ds-space-sm); border: 1px solid var(--border); border-radius: var(--ds-radius-sm); background: var(--background); }
.x-fc-t { display: inline-block; clip-path: inset(0 100% 0 0); }
.x-filled .x-fc-t { clip-path: inset(-20% -5% -20% 0); transition: clip-path .6s steps(10) calc(var(--i) * .55s + .3s); }
.x-fc-chips { display: flex; flex-wrap: wrap; gap: var(--ds-space-xs); }
.x-fc-chip { padding: var(--ds-space-xs) var(--ds-space-sm); border: 1px solid var(--border); border-radius: var(--ds-radius-lg); background: var(--background); }
.x-fc-chip.x-on { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }

/* Offers, proof */
.x-ticks li { position: relative; padding-left: var(--ds-space-lg); }
.x-ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--ds-color-success); font-weight: var(--ds-weight-body-strong); }
.x-face { display: block; flex: none; width: var(--ds-space-2xl); height: var(--ds-space-2xl); border-radius: var(--ds-bullet-radius); overflow: hidden; }
.x-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ds-space-xs); }
.x-todo-tag { color: var(--accent-foreground); }
details .x-todo { margin-top: var(--ds-space-sm); }

@media (prefers-reduced-motion: reduce) {
  .x-fs, .x-fill, .x-thumb, .x-hw, .x-kind:hover .x-hw, .x-filled .x-hw, .x-filled .x-fc-t { transition: none; }
}

/* Themed A4 sheets: all text scales with the sheet, so it stays on the painted panels. */
.x-a4::before { content: ""; display: block; padding-top: 141.43%; }
.x-a4-grid { display: grid; gap: var(--ds-space-lg); grid-template-columns: minmax(0, 26rem); justify-content: center; }
@media (min-width: 72rem) { .x-a4-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.x-a4-fig { display: block; margin: 0; width: 100%; }
.x-seq .x-a4-fig { opacity: 0; transform: translateY(var(--ds-space-lg)); transition: opacity .6s ease var(--d), transform .6s cubic-bezier(.2, .8, .3, 1) var(--d); --d: 0s; }
.x-seq .x-a4-fig.x-in { opacity: 1; transform: none; }
.x-a4-fig figcaption { margin-top: var(--ds-space-sm); }
:root #sur-mesure .x-a4-fig figcaption { color: var(--primary); }
.x-a4 { display: block; width: 100%; padding: 0; position: relative; overflow: hidden; color: var(--foreground); background-color: var(--ds-color-accent-soft); background-size: cover; background-position: center; border-radius: var(--ds-radius-sm); box-shadow: var(--ds-card-shadow); }
.x-a4-in { position: absolute; inset: 0; container-type: inline-size; }
.x-a4-t { position: absolute; left: 12%; right: 12%; top: 3.3%; height: 9.5%; display: grid; place-items: center; margin: 0; text-align: center; font-family: var(--ds-font-heading); font-size: var(--ds-text-caption); line-height: 1.1; font-weight: var(--ds-weight-heading); background: var(--card); }
.x-a4-ex { list-style: none; margin: 0; padding: 0; counter-reset: x-ex; }
.x-a4-ex li { position: absolute; width: 68%; height: 13.8%; box-sizing: border-box; padding: 0 var(--ds-space-sm-md) 0 var(--ds-space-sm); display: flex; align-items: center; gap: var(--ds-space-sm); font-size: var(--ds-text-caption-s); line-height: 1.35; counter-increment: x-ex; background: var(--card); }
.x-a4-ex li::before { content: counter(x-ex); flex: none; width: 5.4cqw; height: 5.4cqw; display: grid; place-items: center; border-radius: 50%; font-weight: var(--ds-weight-body-strong); color: var(--primary-foreground); background: var(--primary); }
.x-a4-ex li:nth-child(1) { left: 6%; top: 16%; }
.x-a4-ex li:nth-child(2) { right: 6%; top: 33%; }
.x-a4-ex li:nth-child(3) { left: 6%; top: 50%; }
.x-a4-ex li:nth-child(4) { right: 6%; top: 67%; }
.x-a4 .x-ans { height: 1.5em; width: 2.2em; vertical-align: -.4em; background: transparent; }
.x-a4 .x-ans-m { width: 4.6em; }
.x-a4 .x-ans-w { width: 6.6em; }
.x-a4 .x-hw { font-size: var(--ds-text-caption-s); }
.x-a4-qr { position: absolute; right: 4%; bottom: 3%; display: flex; align-items: center; gap: var(--ds-space-xs); margin: 0; padding: var(--ds-space-xs) var(--ds-space-sm); font-size: var(--ds-text-caption-s); border-radius: var(--ds-radius-sm); background: var(--card); }
.x-a4-qr .x-qr-i { width: 5cqw; height: 5cqw; }

/* x-one-line: in Actuel the wider body font needs a smaller size for the longest skill name. */
@media (max-width: 63.99rem) {
  :root .x-pcard .x-sk-n, :root #kid-skills .x-sk-n { font-size: var(--ds-text-caption-s); }
}

/* Text boxes placed on the panels painted in each A4 image. */
/* The sheet grows with the child: fewer pictures and more text from CP to CM2. */
.x-a4-jungle .x-a4-t { left: 14.65%; right: auto; top: 4.42%; width: 70.80%; height: 8.29%; }
.x-a4-jungle .x-a4-ex li:nth-child(1) { left: 6.05%; right: auto; top: 16.99%; width: 67.38%; height: 13.67%; }
.x-a4-jungle .x-a4-ex li:nth-child(2) { left: 29.10%; right: auto; top: 32.60%; width: 65.23%; height: 13.81%; }
.x-a4-jungle .x-a4-ex li:nth-child(3) { left: 5.86%; right: auto; top: 48.34%; width: 65.92%; height: 13.81%; }
.x-a4-jungle .x-a4-ex li:nth-child(4) { left: 27.34%; right: auto; top: 64.23%; width: 66.99%; height: 13.81%; }
.x-a4-jungle .x-a4-ex li { font-size: var(--ds-text-caption-s); }
.x-nw { white-space: nowrap; }
.x-a4-espace .x-a4-t { left: 9.57%; right: auto; top: 3.04%; width: 80.86%; height: 8.56%; }
.x-a4-espace .x-a4-ex li:nth-child(1) { left: 3.91%; right: auto; top: 14.78%; width: 74.80%; height: 13.12%; }
.x-a4-espace .x-a4-ex li:nth-child(2) { left: 18.95%; right: auto; top: 29.90%; width: 77.93%; height: 13.12%; }
.x-a4-espace .x-a4-ex li:nth-child(3) { left: 3.91%; right: auto; top: 45.10%; width: 74.80%; height: 13.19%; }
.x-a4-espace .x-a4-ex li:nth-child(4) { left: 18.95%; right: auto; top: 60.29%; width: 77.93%; height: 13.12%; }
.x-a4-espace .x-a4-ex li:nth-child(5) { left: 3.91%; right: auto; top: 75.07%; width: 74.80%; height: 12.50%; }
.x-a4-espace .x-a4-qr { left: 4%; right: auto; width: 36%; }
.x-a4-creatures .x-a4-t { left: 6.45%; right: auto; top: 2.76%; width: 69.73%; height: 6.35%; }
.x-a4-creatures .x-a4-t { justify-items: start; text-align: left; }
.x-a4-creatures .x-a4-ex { position: absolute; left: 6.45%; top: 12.5%; width: 69%; height: 77%; display: flex; flex-direction: column; justify-content: space-between; }
.x-a4-creatures .x-a4-ex li:nth-child(n) { position: static; left: auto; right: auto; top: auto; width: auto; height: auto; padding: 0; align-items: flex-start; font-size: var(--ds-text-caption-s); }
.x-a4-creatures .x-a4-qr { left: 6.45%; right: auto; background: transparent; padding: 0; }

/* Progress as a path: a ring where the bilan found the child, a run of colour to where the child is today. */
.x-prog { --c: var(--primary); display: flex; flex-direction: column; gap: var(--ds-space-xs); --a: 0; --b: 0; }
.x-heads { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); font-weight: var(--ds-weight-body-strong); color: var(--muted-foreground); text-align: center; line-height: 1.2; align-items: end; }
.x-legend { display: flex; gap: var(--ds-space-md); }
.x-legend span { display: inline-flex; align-items: center; gap: var(--ds-space-xs); }
.x-key { width: .75rem; height: .75rem; border-radius: 50%; }
.x-key-a { border: 2px solid var(--st); background: var(--card); }
.x-key-b { background: var(--st); }
.x-path { --size: var(--ds-space-lg); --pos: 25%; position: relative; height: var(--size); }
/* Stops sit at the centre of each of the four columns. */
.x-path::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 50%; height: 4px; margin-top: calc(var(--ds-space-xs) / -2); border-radius: 0; background: var(--muted); }
.x-stop { position: absolute; top: 50%; width: 6px; height: 6px; margin: calc(var(--ds-space-xs) * -.75) 0 0 calc(var(--ds-space-xs) * -.75); border-radius: 50%; background: var(--border); }
.x-s0 { left: 12.5%; } .x-s1 { left: 37.5%; } .x-s2 { left: 62.5%; } .x-s3 { left: 87.5%; }
.x-run { position: absolute; top: 50%; left: calc(12.5% + var(--a) * var(--pos)); width: 0; height: 6px; margin-top: calc(var(--ds-space-xs) * -.75); border-radius: var(--ds-radius-sm); background: var(--st); transition: width .9s cubic-bezier(.3, .9, .4, 1) .2s; }
.x-filled .x-run { width: calc((var(--b) - var(--a)) * var(--pos)); }
.x-start, .x-now { position: absolute; top: 50%; width: var(--size); height: var(--size); margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2); border-radius: 50%; }
.x-start { left: calc(12.5% + var(--a) * var(--pos)); box-sizing: border-box; border: 3px solid var(--st); background: var(--card); }
.x-now { left: calc(12.5% + var(--b) * var(--pos)); display: grid; place-items: center; font-style: normal; font-weight: var(--ds-weight-body-strong); font-size: var(--ds-text-caption); color: var(--st-on); background: var(--st); box-shadow: 0 0 0 calc(var(--ds-space-xs) * 1.25) var(--x-halo); transform: scale(0); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1) 1s; }
.x-filled .x-now { transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .x-run, .x-now { transition: none; } }

/* Pricing cards: slight growth and a blue border on hover. */
#formules article { transition: transform .2s; }
.x-bill { padding: var(--ds-space-xs); }
.x-bill .x-mode { background: transparent; min-width: var(--ds-space-2xl); }
.x-bill .x-mode[aria-pressed="true"] { background: var(--primary); color: var(--primary-foreground); }
@media (hover: hover) {
  #formules article:hover { transform: scale(1.02); }
}
@media (prefers-reduced-motion: reduce) { #formules article { transition: none; } }

/* Each of the three steps uses the colour of its number: --st fills, --st-on is the text on it, --st-ink is text on the card. */
:root #comment .x-row:nth-child(1) { --st: var(--primary); --st-on: var(--primary-foreground); --st-ink: var(--primary); --x-halo: var(--ds-color-secondary); }
:root #comment .x-row:nth-child(2) { --st: var(--x-c2); --st-on: var(--x-c2-on); --st-ink: var(--x-c2); --x-halo: var(--ds-color-primary-light); }
:root #comment .x-row:nth-child(3) { --st: var(--x-c3); --st-on: var(--x-c3-on); --st-ink: var(--x-c3-ink); --x-halo: var(--ds-color-accent-soft); }
#comment .x-fc-chip.x-on { background: var(--st); border-color: var(--st); color: var(--st-on); }
#comment .x-filled .x-fc-v { border-color: var(--st); }
#comment .x-kind .x-hw { color: var(--st-ink); }
#comment .x-kind .x-ans { border-color: var(--st-ink); }

/* ===== v2: feedback of 5 November 2026 ===== */
.x-eyebrow { color: var(--primary); font-weight: var(--ds-weight-body-strong); }
.x-hero-text .x-hero-sub + .x-hero-sub { margin-top: calc(var(--ds-space-xs) * -1); }

/* Hero: printed sheets. The title stays readable, the exercises read as lines of print. */
#stage .x-pile { width: min(78%, 21rem); height: auto; aspect-ratio: 1 / 1.414; }
#stage .x-fs { background: var(--card); border-radius: var(--ds-radius-sm); padding: var(--ds-space-lg) var(--ds-space-lg) calc(var(--ds-space-xl) + var(--ds-space-md)); gap: var(--ds-space-md); box-shadow: var(--ds-shadow-lg); }
#stage .x-fs-t { padding-bottom: var(--ds-space-sm); border-bottom: 2px solid var(--primary); }
#stage .x-fs[data-fs="1"] .x-fs-t { border-color: var(--x-c2); }
#stage .x-fs[data-fs="2"] .x-fs-t { border-color: var(--x-c3); }
#stage .x-fs-q > span:not(.x-fs-box) { color: transparent; background: color-mix(in srgb, var(--foreground) 13%, transparent); border-radius: var(--ds-radius-sm); line-height: 1.1; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
#stage .x-fs-q .x-fs-clock { opacity: 0; }
#stage .x-fs-box { border-style: dashed; border-radius: 0; }
#stage .x-fs::before { content: "Edupop · fiche de la semaine"; position: absolute; left: var(--ds-space-lg); bottom: var(--ds-space-md); font-size: var(--ds-text-caption-s); line-height: 1.75rem; color: var(--muted-foreground); }
#stage .x-fs::after { content: ""; position: absolute; right: var(--ds-space-lg); bottom: var(--ds-space-md); width: 1.75rem; height: 1.75rem; background: repeating-conic-gradient(var(--foreground) 0 25%, transparent 0 50%) 0 0 / .4375rem .4375rem; opacity: .55; }

/* Pourquoi: four cards */
.x-why-grid { display: grid; gap: var(--ds-space-lg); grid-template-columns: minmax(0, 1fr); list-style: none; margin: 0; padding: 0; }
@media (min-width: 40rem) { .x-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .x-why-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.x-why-card { display: flex; flex-direction: column; gap: var(--ds-space-sm); }
.x-why-card:nth-child(2) { --ic: var(--x-c2); }
.x-why-card:nth-child(3) { --ic: var(--x-c3-ink); }
.x-why-card:nth-child(4) { --ic: var(--foreground); }
.x-ico { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: var(--ds-space-xs); border-radius: 50%; color: var(--ic, var(--primary)); background: color-mix(in srgb, var(--ic, var(--primary)) 13%, var(--card)); }
.x-ico svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Personnalisation: two ways */
.x-two { display: grid; gap: var(--ds-space-lg); }
@media (min-width: 48rem) { .x-two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-xl); } }
.x-way { display: flex; gap: var(--ds-space-md); align-items: flex-start; }
.x-way-n { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; font-family: var(--ds-font-heading); font-size: var(--ds-text-h4); font-weight: var(--ds-weight-heading); background: var(--primary); color: var(--primary-foreground); }
.x-way:nth-child(2) .x-way-n { background: var(--x-c2); color: var(--x-c2-on); }
#sur-mesure .x-a4-grid { grid-template-columns: minmax(0, 25rem); gap: var(--ds-space-2xl); }
@media (min-width: 56rem) { #sur-mesure .x-a4-grid { grid-template-columns: repeat(2, minmax(0, 25rem)); } }
#sur-mesure .x-a4-fig figcaption { color: var(--foreground); font-weight: var(--ds-weight-body-strong); }

/* A printed A4 sheet. Sizes follow the sheet width. */
.x-pf { container-type: inline-size; }
.x-paper { --ink: var(--primary); position: relative; aspect-ratio: 1 / 1.414; overflow: hidden; display: flex; flex-direction: column; gap: var(--ds-space-sm); padding: var(--ds-space-md-lg) var(--ds-space-md-lg) var(--ds-space-md); background: var(--card); color: var(--foreground); border-radius: var(--ds-radius-sm); box-shadow: var(--ds-shadow-lg); font-family: var(--ds-font-body); font-size: var(--ds-text-caption-s); line-height: 1.4; }
.x-ink-2 { --ink: var(--x-c2); }
.x-pf:nth-child(odd) .x-paper { transform: rotate(-1deg); }
.x-pf:nth-child(even) .x-paper { transform: rotate(.8deg); }
.x-paper-h { display: flex; justify-content: space-between; gap: var(--ds-space-sm); margin: 0; padding-bottom: var(--ds-space-sm); border-bottom: 1px solid var(--border); font-size: var(--ds-text-caption-s); color: var(--muted-foreground); }
.x-paper-t { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-sm); margin: 0; font-family: var(--ds-font-heading); font-weight: var(--ds-weight-heading); font-size: var(--ds-text-body); line-height: 1.12; color: var(--ink); }
.x-paper-t svg { flex: none; width: 23cqw; height: 18.4cqw; }
.x-paper ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ds-space-md); counter-reset: x-p; }
.x-paper ol > li { display: flex; gap: var(--ds-space-sm); align-items: flex-start; counter-increment: x-p; }
.x-paper ol > li::before { content: counter(x-p); flex: none; display: grid; place-items: center; width: 5.6cqw; height: 5.6cqw; border-radius: 50%; border: 1.5px solid var(--ink); color: var(--ink); font-weight: var(--ds-weight-body-strong); font-size: var(--ds-text-caption-s); }
.x-paper .x-k { display: block; margin-bottom: 0; font-size: var(--ds-text-caption-s); letter-spacing: .06em; text-transform: uppercase; font-weight: var(--ds-weight-body-strong); color: var(--muted-foreground); }
.x-paper .x-ans { width: 3em; height: 1.4em; vertical-align: -.3em; border: 0; border-bottom: 1.5px dashed var(--muted-foreground); border-radius: 0; background: transparent; }
.x-paper .x-ans-m { width: 5em; }
.x-paper .x-ans-w { width: 8em; }
.x-paper .x-hw { font-size: var(--ds-text-caption-s); color: var(--ink); }
.x-pick { position: relative; display: inline-block; padding-inline: 0; }
.x-pick-ok::after { content: ""; position: absolute; inset: -.2em -.25em; border: 1.5px solid var(--ink); border-radius: 50%; clip-path: inset(0 100% 0 0); transition: clip-path .15s; }
.x-kind:hover .x-pick-ok::after, .x-filled .x-pick-ok::after { clip-path: inset(-10%); transition: clip-path .6s steps(10) calc(var(--i) * .75s); }
.x-tip { margin: 0; padding: var(--ds-space-xs) var(--ds-space-sm); border-left: 3px solid var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent); font-size: var(--ds-text-caption-s); }
.x-tip b { display: block; color: var(--ink); }
.x-paper-f { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-sm); margin: 0; font-size: var(--ds-text-caption-s); color: var(--muted-foreground); }
.x-paper > .x-paper-f, .x-paper > .x-tip { margin-top: auto; }
.x-paper > .x-tip + .x-paper-f { margin-top: 0; }
.x-paper-qr { display: inline-flex; align-items: center; gap: var(--ds-space-sm); }
.x-paper-qr i { flex: none; width: 7cqw; height: 7cqw; background: repeating-conic-gradient(var(--foreground) 0 25%, transparent 0 50%) 0 0 / 1.75cqw 1.75cqw; opacity: .7; }
@media (prefers-reduced-motion: reduce) { .x-pick-ok::after { transition: none; } }

/* What is in a sheet: an annotated sheet */
.x-parts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ds-space-md); }
.x-parts li { display: flex; gap: var(--ds-space-md); align-items: flex-start; }
.x-mark { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; font-family: var(--ds-font-heading); font-weight: var(--ds-weight-heading); font-size: var(--ds-text-body-s); background: var(--x-c3); color: var(--x-c3-on); }
.x-anat { width: min(100%, 25rem); justify-self: center; }
.x-anat .x-paper { transform: rotate(1deg); }
.x-zone { position: relative; }
.x-zone > .x-mark { position: absolute; right: -4.5cqw; top: -1.5cqw; z-index: 1; width: 6.5cqw; height: 6.5cqw; font-size: var(--ds-text-caption-s); box-shadow: var(--ds-shadow-sm); }
.x-zone.x-push { margin-top: auto; }
.x-redact { color: transparent; background: color-mix(in srgb, var(--foreground) 12%, transparent); border-radius: var(--ds-radius-sm); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Parents */
.x-ini { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; font-family: var(--ds-font-heading); font-weight: var(--ds-weight-heading); background: color-mix(in srgb, var(--primary) 14%, var(--card)); color: var(--primary); }
.x-ini-2 { background: color-mix(in srgb, var(--x-c2) 14%, var(--card)); color: var(--x-c2); }

/* Pricing: what the yearly plan saves */
.x-was { color: var(--muted-foreground); text-decoration: line-through; }
.x-was:empty { display: none; }
.x-save { margin: 0; color: var(--muted-foreground); }
:root[data-bill="y"] .x-save { align-self: flex-start; padding: var(--ds-space-xs) var(--ds-space-sm); border-radius: var(--ds-radius-cta); font-weight: var(--ds-weight-body-strong); color: var(--ds-color-success); background: color-mix(in srgb, var(--ds-color-success) 12%, var(--card)); }
.x-off { margin-left: var(--ds-space-xs); font-size: var(--ds-text-caption-s); font-weight: var(--ds-weight-body-strong); color: var(--ds-color-success); }
.x-mode[aria-pressed="true"] .x-off { color: inherit; }

/* ===== v3 ===== */
.x-how { font-weight: var(--ds-weight-body-strong); }
.x-shared { background: color-mix(in srgb, var(--card) 70%, transparent); border: 1px dashed var(--border); }
.x-shared-list { display: grid; gap: var(--ds-space-xs) var(--ds-space-lg); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .x-shared-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .x-shared-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
textarea { font: inherit; resize: vertical; }
[data-view][aria-current="page"] { color: var(--primary); }

/* ===== v4 ===== */
.x-stars { color: var(--ink); font-size: var(--ds-text-caption); letter-spacing: .05em; }
.x-steps { list-style: none; margin: 0; padding: 0; }
.x-steps > .x-way:nth-child(3) .x-way-n { background: var(--x-c3); color: var(--x-c3-on); }
.x-steps > .x-way:nth-child(4) .x-way-n { background: var(--foreground); color: var(--background); }

/* ===== v5 ===== */
.x-expert { display: grid; gap: var(--ds-space-lg); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 48rem) { .x-expert { grid-template-columns: auto minmax(0, 1fr); } }
.x-ini-xl { width: 5.5rem; height: 5.5rem; font-size: var(--ds-text-h3); }

/* ===== v6: a real sheet, black and white like the printed one ===== */
.x-docfig { display: flex; flex-direction: column; gap: var(--ds-space-sm); width: min(100%, 34rem); justify-self: center; }
.x-doc { --ink: var(--foreground); position: relative; aspect-ratio: 1 / 1.414; overflow: hidden; display: flex; flex-direction: column; gap: var(--ds-space-xs); padding: var(--ds-space-md) var(--ds-space-md) var(--ds-space-sm-md); background: var(--card); color: var(--ink); border-radius: 0; box-shadow: var(--ds-shadow-lg); font-family: var(--ds-font-body); font-size: var(--ds-text-caption-s); line-height: 1.35; transform: rotate(-.6deg); }
.x-doc p, .x-doc h4, .x-doc h5, .x-doc ul, .x-doc table { margin: 0; }
.x-doc b { font-weight: var(--ds-weight-body-strong); }
.x-doc-h { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--ds-space-sm); padding: var(--ds-space-xs) var(--ds-space-sm); border: 1px solid var(--ink); border-radius: var(--ds-radius-sm); }
.x-doc-h div { display: flex; flex-direction: column; }
.x-doc-logo { font-family: var(--ds-font-heading); font-size: var(--ds-text-caption); line-height: 1.1; }
.x-doc-r { text-align: right; } .x-doc-r b { font-size: var(--ds-text-caption-s); }
.x-doc-line { display: flex; justify-content: space-between; gap: var(--ds-space-sm); }
.x-doc-line span { flex: 1; border-bottom: 1px dotted var(--ink); padding-bottom: 0; }
.x-doc-box { padding: var(--ds-space-xs) var(--ds-space-sm); border: 1px solid var(--ink); border-radius: var(--ds-radius-sm); }
.x-doc-s { display: flex; justify-content: space-between; align-items: baseline; gap: var(--ds-space-sm); padding-bottom: 0; border-bottom: 1px solid var(--ink); font-size: var(--ds-text-caption-s); font-weight: var(--ds-weight-body-strong); }
.x-doc-s small { font-size: var(--ds-text-caption-s); font-weight: var(--ds-weight-body); }
.x-doc-lesson { display: flex; flex-direction: column; gap: var(--ds-space-xs); padding: var(--ds-space-xs) var(--ds-space-sm); border: 1px dashed var(--ink); border-radius: var(--ds-radius-sm); }
.x-doc-cols { display: grid; grid-template-columns: auto 1fr; gap: var(--ds-space-sm); align-items: center; }
.x-doc-calc { display: grid; grid-template-columns: repeat(4, 3.2cqw); font-size: var(--ds-text-caption-s); text-align: center; line-height: 1.5; }
.x-doc-calc i { font-style: normal; } .x-doc-calc i:nth-child(n+9) { border-top: 1px solid var(--ink); }
.x-doc-calc sup, .x-doc-calc sub { font-size: var(--ds-text-caption-s); }
.x-doc-rule { padding-left: var(--ds-space-xs); border-left: .5cqw solid var(--ink); }
.x-doc-qr { display: flex; align-items: center; gap: var(--ds-space-xs); }
.x-doc-qr i { flex: none; width: 4cqw; height: 4cqw; background: repeating-conic-gradient(var(--ink) 0 25%, transparent 0 50%) 0 0 / 1cqw 1cqw; }
.x-doc-q { margin-top: 0; }
.x-doc-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--ds-space-xs); padding-left: var(--ds-space-xs); font-size: var(--ds-text-caption-s); white-space: nowrap; }
.x-doc-row u { width: 4.5cqw; }
.x-doc u { display: inline-block; width: 6cqw; border-bottom: 1px dotted var(--ink); text-decoration: none; }
.x-doc u.x-doc-long { width: 30cqw; }
.x-doc-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--ds-space-xs); height: 9cqw; }
.x-doc-grid i { border: 1px solid var(--border); border-top: 0; }
.x-doc-t { width: 100%; border-collapse: collapse; font-size: var(--ds-text-caption-s); }
.x-doc-t th, .x-doc-t td { border: 1px solid var(--ink); padding: 0 var(--ds-space-xs); text-align: left; font-weight: var(--ds-weight-body); }
.x-doc-t th { font-weight: var(--ds-weight-body-strong); }
.x-doc-h5 { margin-top: var(--ds-space-xs) !important; font-size: var(--ds-text-caption-s); font-weight: var(--ds-weight-body-strong); }
.x-doc-ul { padding-left: var(--ds-space-sm); display: flex; flex-direction: column; gap: 0; }
.x-doc-f { margin-top: auto; display: flex; justify-content: space-between; gap: var(--ds-space-sm); font-size: var(--ds-text-caption-s); }
.x-docfig .x-zone > .x-mark { right: -8cqw; top: 0; }
.x-docfig + .x-docfig { transform: rotate(.5deg); }

/* ===== v7: the real sheet in colour ===== */
.x-doc { --ink: var(--foreground); --acc: var(--primary); background: var(--card); }
.x-doc-2 { --acc: var(--x-c2); }
.x-doc-h { border-color: var(--acc); border-width: 1.5px; }
.x-doc-logo, .x-doc-r b, .x-doc-h5, .x-doc-q > b, .x-doc-lesson > b { color: var(--acc); }
.x-doc-box { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 6%, transparent); }
.x-doc-s { border-bottom: 2px solid var(--acc); color: var(--acc); }
.x-doc-s small { color: var(--muted-foreground); }
.x-doc-lesson { border-color: var(--x-c3); background: color-mix(in srgb, var(--x-c3) 12%, transparent); }
.x-doc-rule { border-left-color: var(--x-c3); }
.x-doc .x-st { color: var(--x-c3-ink, var(--acc)); }
.x-doc-t th { background: color-mix(in srgb, var(--acc) 10%, transparent); }
.x-doc-t th, .x-doc-t td { border-color: color-mix(in srgb, var(--ink) 55%, transparent); }
.x-doc-grid i { border-color: color-mix(in srgb, var(--acc) 40%, transparent); }
.x-doc-f { color: var(--muted-foreground); }

/* ===== v8 ===== */
.x-pers .x-way { align-items: flex-start; }
@media (min-width: 48rem) { .x-pers { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr); } .x-pers h2 { white-space: nowrap; } }
#sur-mesure .x-a4-grid { grid-template-columns: minmax(0, 12.5rem); gap: var(--ds-space-xl); justify-content: start; }
@media (min-width: 30rem) { #sur-mesure .x-a4-grid { grid-template-columns: repeat(2, minmax(0, 12.5rem)); } }
.x-paper-cp { font-size: var(--ds-text-body); gap: var(--ds-space-md); }
.x-paper-cp ol { gap: var(--ds-space-md-lg); }
.x-paper-cp .x-paper-t { font-size: var(--ds-text-h3); }
.x-face-img { flex: none; width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover; }
.x-cta-alt { background: var(--x-c2); color: var(--x-c2-on); }

/* ===== v12: competences page ===== */
.x-cls-tabs { display: flex; flex-wrap: wrap; gap: var(--ds-space-sm); }
.x-cls-tab { padding: var(--ds-space-xs) var(--ds-space-lg); border-radius: var(--ds-radius-cta); border: 2px solid var(--border); background: var(--card); color: var(--foreground); }
.x-cls-tab[aria-selected="true"] { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.x-cls-list { list-style: none; padding: 0; }
.x-cls-list li { padding-left: var(--ds-space-md); border-left: 3px solid var(--sub); }
.x-cls-col { border-top: 6px solid var(--sub); }
.x-sub-m { --sub: var(--x-c2); } .x-sub-f { --sub: var(--primary); } .x-sub-s { --sub: var(--x-c3); }
.x-cls-note { padding-top: var(--ds-space-sm); border-top: 1px solid var(--border); }

/* ===== v11: how it works + progress section ===== */
.x-tag { display: inline-block; padding: 0 var(--ds-space-sm); border-radius: var(--ds-radius-cta); background: var(--x-c2); color: var(--x-c2-on); font-weight: var(--ds-weight-body-strong); }
.x-adj-row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--ds-space-md); align-items: start; padding-top: var(--ds-space-md); border-top: 1px solid var(--border); }
.x-adj-k { justify-self: start; padding: 0 var(--ds-space-sm); border-radius: var(--ds-radius-cta); background: var(--x-c3); color: var(--x-c3-on); font-weight: var(--ds-weight-body-strong); }
.x-adj-b .x-adj-k { background: var(--primary); color: var(--primary-foreground); }
.x-adj-go { color: var(--muted-foreground); }
.x-adj-go::before { content: "→ "; color: var(--foreground); font-weight: var(--ds-weight-body-strong); }
.x-ans-ko .x-hw { color: var(--primary); }
.x-ko { margin-left: var(--ds-space-sm); color: var(--primary); font-weight: var(--ds-weight-body-strong); }
.x-adj-f { padding-top: var(--ds-space-md); border-top: 1px solid var(--border); }
#progres { --st: var(--x-c3); --st-on: var(--x-c3-on); --st-ink: var(--x-c3-ink); --x-halo: var(--ds-color-accent-soft); }
.x-prog-sec { display: grid; gap: var(--ds-space-2xl); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 48rem) { .x-prog-sec { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.x-gain { list-style: none; padding: 0; }
.x-gain li { padding-left: var(--ds-space-lg); position: relative; }
.x-gain li::before { content: "✓"; position: absolute; left: 0; color: var(--primary); font-weight: var(--ds-weight-body-strong); }
.x-joy { background: var(--card); border-left: 4px solid var(--primary); }
.x-phone { width: min(100%, 20rem); padding: var(--ds-space-sm-md); border-radius: var(--ds-radius-lg); background: var(--foreground); box-shadow: var(--ds-shadow-xl); position: relative; }
.x-phone::before { content: ""; position: absolute; top: 1.15rem; left: 50%; width: 5.5rem; height: 1.4rem; margin-left: calc(var(--ds-space-md) * -2.75); border-radius: var(--ds-radius-card); background: var(--foreground); z-index: 1; }
.x-phone-in { min-height: 30rem; padding: var(--ds-space-xl) var(--ds-space-md) var(--ds-space-lg); border-radius: var(--ds-radius-lg); background: var(--card); color: var(--card-foreground); overflow: hidden; }
.x-phone #kid-skills .x-sk-n { font-size: var(--ds-text-caption); }
.x-phone .x-heads { font-size: var(--ds-text-caption-s); }

/* ===== v13: phone closer to an iPhone, app icons ===== */
.x-phone { width: min(100%, 16.5rem); aspect-ratio: 9 / 19.5; padding: var(--ds-space-sm); border-radius: var(--ds-radius-lg); overflow: hidden; }
.x-phone::before { top: .95rem; width: 4.6rem; height: 1.25rem; margin-left: calc(var(--ds-space-md) * -2.3); }
.x-phone-in { min-height: 0; height: 100%; padding: var(--ds-space-lg) var(--ds-space-md) var(--ds-space-md); border-radius: var(--ds-radius-lg); }
.x-phone .x-heads { font-size: var(--ds-text-caption-s); letter-spacing: -.01em; }
.x-phone .x-heads span { white-space: nowrap; }
.x-phone #kid-skills .x-sk-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x-phone .x-path { --size: var(--ds-space-md); }
.x-phone .x-now { font-size: var(--ds-text-caption-s); box-shadow: 0 0 0 calc(var(--ds-space-xs) * .75) var(--x-halo); }
.x-phone .x-start { border-width: 2px; }
.x-phone-last { margin-top: auto; background: var(--muted); min-width: 0; }
.x-phone-ok { padding: 0 var(--ds-space-sm); border-radius: var(--ds-radius-cta); background: var(--x-c2); color: var(--x-c2-on); font-weight: var(--ds-weight-body-strong); }
.x-phone-ok { white-space: nowrap; font-size: var(--ds-text-caption-s); padding: 0 var(--ds-space-sm); }
.x-phone-last p { white-space: normal; overflow-wrap: break-word; }
.x-phone .x-heads span:first-child { font-size: 0; }
.x-phone .x-heads span:first-child::after { content: "Pas vu"; font-size: var(--ds-text-caption-s); }

/* ===== v14: no left-border accents ===== */
.x-joy { background: var(--primary); color: var(--primary-foreground); border-left: 0; }
.x-cls-col { border-top: 0; }
.x-sub-tag { align-self: flex-start; padding: var(--ds-space-xs) var(--ds-space-md); border-radius: var(--ds-radius-cta); background: var(--sub); color: var(--sub-on); }
.x-sub-m { --sub-on: var(--x-c2-on); } .x-sub-f { --sub-on: var(--primary-foreground); } .x-sub-s { --sub-on: var(--x-c3-on); }
.x-cls-list { gap: 0; }
.x-cls-list li { position: relative; border-left: 0; padding: var(--ds-space-sm) 0 var(--ds-space-sm) var(--ds-space-lg); border-top: 1px solid var(--border); }
.x-cls-list li:first-child { border-top: 0; }
.x-cls-list li::before { content: ""; position: absolute; left: .2rem; top: calc(var(--ds-space-sm) + .45em); width: .5rem; height: .5rem; border-radius: 50%; background: var(--sub); }

/* ===== v15: plaisir as a headline ===== */
.x-joy { background: none; color: inherit; border: 0; padding: 0; }
.x-joy-t { color: var(--primary); }

/* ===== v16: yellow phone ===== */
.x-phone-ok { background: var(--x-c3); color: var(--x-c3-on); }

/* ===== v16b: the bar never shows what scrolls under it; the phone's labels wrap at their space instead of overlapping ===== */
.x-bar { background-color: var(--background); }
.x-phone .x-heads { align-items: end; }
.x-phone .x-heads span { white-space: normal; overflow-wrap: normal; text-wrap: balance; }

/* ===== v17: "how it works" as one sticky band, card left, text right ===== */
@media (min-width: 48rem) { #comment .x-row > :first-child { order: 2; } }
.x-sy-on { height: calc(100vh - var(--x-bar-h, 4rem) + 120vh); }
.x-sy-on .x-sy-stage { position: sticky; top: var(--x-bar-h, 4rem); height: calc(100vh - var(--x-bar-h, 4rem)); justify-content: center; }
.x-sy-on .x-rows { display: grid; }
.x-sy-on .x-row { grid-area: 1 / 1; }
.x-sy-on .x-row > * { transition: opacity .4s ease, transform .55s cubic-bezier(.2, .7, .2, 1); }
.x-sy-on .x-row.x-cur > :first-child { transition-delay: .08s; }
.x-sy-on .x-row:not(.x-cur) { pointer-events: none; }
.x-sy-on .x-row:not(.x-cur) > * { opacity: 0; }
.x-sy-on .x-row.x-next > * { transform: translateY(3rem); }
.x-sy-on .x-row.x-past > * { transform: translateY(-3rem); }

/* ===== v18: step-3 card without lines, space above the step-3 buttons ===== */
#comment .x-adj-row, #comment .x-adj-f { border-top: 0; }
.x-sy-cta { margin-top: var(--ds-space-md); }

/* ===== v19: Méthode — the sheet in the middle of one sticky band ===== */
.x-my-ph { display: grid; gap: var(--ds-space-lg); align-items: start; }
.x-my-ph + .x-my-ph { margin-top: var(--ds-space-2xl); }
.x-my-c .x-mark { margin-top: 0; }
@media (min-width: 48rem) {
  .x-my-ph { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--ds-space-xl); }
  .x-my-ph > :not(figure) { grid-column: 1; }
  .x-my-ph > figure { grid-column: 2; grid-row: 1 / span 5; }
}
.x-my-on { height: calc(100vh - var(--x-bar-h, 4rem) + 230vh); }
.x-my-on .x-my-stage { position: sticky; top: var(--x-bar-h, 4rem); height: calc(100vh - var(--x-bar-h, 4rem)); display: grid; align-content: center; }
.x-my-on .x-my-ph { grid-area: 1 / 1; margin: 0; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: auto 1fr 1fr; gap: var(--ds-space-lg) var(--ds-space-xl); align-items: center; }
.x-my-on .x-my-head { grid-column: 1 / -1; grid-row: 1; align-items: center; text-align: center; }
.x-my-on .x-my-ph > figure { grid-column: 2; grid-row: 2 / span 2; width: min(30rem, calc((100vh - var(--x-bar-h, 4rem) - 13rem) / 1.414)); }
.x-my-on .x-my-ph figcaption { display: none; }
.x-my-on .x-my-c[data-side="l"] { grid-column: 1; }
.x-my-on .x-my-c[data-side="r"] { grid-column: 3; }
.x-my-on .x-my-c[data-row="1"] { grid-row: 2; }
.x-my-on .x-my-c[data-row="2"] { grid-row: 3; }
.x-my-on .x-my-ph > * { transition: opacity .4s ease, transform .55s cubic-bezier(.2, .7, .2, 1); }
.x-my-on .x-my-ph:not(.x-cur) { pointer-events: none; }
.x-my-on .x-my-ph:not(.x-cur) > * { opacity: 0; }
.x-my-on .x-my-ph.x-next > * { transform: translateY(3rem); }
.x-my-on .x-my-ph.x-past > * { transform: translateY(-3rem); }
.x-my-on .x-my-ph.x-cur > .x-my-c:not(.x-in) { opacity: 0; }
.x-my-on .x-my-c[data-side="l"]:not(.x-in) { transform: translateX(-2rem); }
.x-my-on .x-my-c[data-side="r"]:not(.x-in) { transform: translateX(2rem); }
.x-my-on .x-zone > .x-mark { transition: transform .3s ease; }
.x-my-on .x-zone[data-z]::after { content: ""; position: absolute; inset: -1cqw; border: 2px solid var(--x-c3); border-radius: var(--ds-radius-sm); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.x-my-on .x-zone.x-hl::after { opacity: 1; }
.x-my-on .x-zone.x-hl > .x-mark { transform: scale(1.25); }

/* ===== v20: cards level with their zone, marks astride the sheet edge ===== */
.x-my-on .x-my-ph { grid-template-rows: auto auto; }
.x-my-on .x-my-ph > figure { grid-row: 2; align-self: start; }
.x-my-on .x-my-c { grid-row: 2; align-self: start; margin-top: var(--y); position: relative; display: block; --y: 0; }
.x-my-on .x-my-c > .x-mark { display: none; }
.x-my-on .x-my-c::after { content: ""; position: absolute; top: 50%; width: var(--ds-space-xl); height: 2px; background: var(--x-c3); opacity: 0; transition: opacity .3s ease .2s; }
.x-my-on .x-my-c[data-side="l"]::after { left: 100%; }
.x-my-on .x-my-c[data-side="r"]::after { right: 100%; }
.x-my-on .x-my-c.x-in::after { opacity: 1; }
.x-my-on .x-my-c::after { height: 0; background: none; border-top: 1px dashed color-mix(in srgb, var(--x-c3) 70%, transparent); }
.x-bg-rose { background: var(--ds-color-secondary); }

/* ===== v22: "how it works" as three tinted columns ===== */
.x-hw3 > h2 { text-align: center; margin-inline: auto; }
#comment .x-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-lg); }
@media (min-width: 56rem) { #comment .x-rows { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-space-2xl); } }
#comment .x-row { position: relative; display: flex; flex-direction: column; gap: var(--ds-space-sm); padding: var(--ds-space-lg); border-radius: var(--ds-radius-lg); background: var(--st-bg); }
#comment .x-row:nth-child(1) { --st-bg: var(--ds-color-secondary); }
#comment .x-row:nth-child(2) { --st-bg: var(--muted); }
#comment .x-row:nth-child(3) { --st-bg: color-mix(in srgb, var(--x-c3) 22%, var(--background)); }
#comment .x-row > div { display: contents; }
#comment .x-row > figure, #comment .x-row > article { order: 1; margin: var(--ds-space-sm) 0 var(--ds-space-md); zoom: .8; transform: rotate(-1deg); }
#comment .x-row:nth-child(2) > article { transform: rotate(1deg); }
:root #comment .x-row:nth-child(n) .x-num { order: 0; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--st); color: var(--st-on); font-size: var(--ds-text-h4); line-height: 1; }
#comment .x-row h3 { order: 2; }
#comment .x-row > div > p { order: 3; }
.x-hw3-cta { justify-content: center; }
#comment .x-row { align-items: stretch; }
:root #comment .x-row:nth-child(n) .x-num { align-self: flex-start; }
#comment .x-row h3 { font-size: var(--ds-text-h4); }
#comment .x-adj-row { grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-xs); }

/* ===== v24: "how it works" compact, mock-up layout ===== */
#comment .x-hw3-top { order: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-sm); }
#comment .x-hw3-pill { padding: var(--ds-space-xs) var(--ds-space-sm); border-radius: var(--ds-radius-cta); background: var(--card); color: var(--st-ink); font-weight: var(--ds-weight-body-strong); }
#comment .x-row { gap: var(--ds-space-xs); padding: var(--ds-space-lg) var(--ds-space-lg) var(--ds-space-xl); }
#comment .x-row > figure, #comment .x-row > article { zoom: .82; gap: var(--ds-space-xs); padding: var(--ds-space-md) var(--ds-space-lg); margin: var(--ds-space-md) 0 var(--ds-space-lg); transform: rotate(-1.5deg); }
#comment .x-row:nth-child(2) > article { transform: rotate(1.5deg); }
#comment .x-hw3-fields { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--ds-space-sm); }
#comment .x-row .x-line { font-size: var(--ds-text-body-s); }
#comment .x-adj-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-xs) var(--ds-space-sm); }
#comment .x-row > div > p { font-size: var(--ds-text-body-s); }
#comment .x-rows { align-items: stretch; }

/* ===== v25: same-height white cards, titles aligned across the three columns ===== */
#comment .x-row .x-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-xs) var(--ds-space-sm); }
@media (min-width: 56rem) {
  #comment .x-rows { grid-template-rows: auto auto auto auto; row-gap: 0; }
  #comment .x-row { display: grid; grid-row: span 4; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; row-gap: var(--ds-space-xs); align-items: start; }
  #comment .x-row > figure, #comment .x-row > article { align-self: stretch; justify-content: center; }
}

/* ===== v26: the sheet band on the home page, title left (1/4), sheets right (3/4) ===== */
.x-my-stage { display: flex; flex-direction: column; gap: var(--ds-space-xl); }
.x-my-title { max-width: 22ch; }
.x-my-on .x-my-stage { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: var(--ds-space-lg); }
.x-my-on .x-my-title { text-align: center; margin-inline: auto; max-width: none; }
.x-my-on .x-my-phs { display: grid; }
.x-my-on .x-my-ph { grid-template-rows: auto; }
.x-my-on .x-my-ph > figure, .x-my-on .x-my-c { grid-row: 1; }
.x-my-on .x-my-ph > figure { width: min(26rem, calc((100vh - var(--x-bar-h, 4rem) - 11rem) / 1.414)); }
.x-my-on .x-my-c { padding: var(--ds-space-md); }
.x-my-on .x-my-c p { font-size: var(--ds-text-body-s); }
@media (min-width: 64rem) {
  .x-my-on .x-my-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); column-gap: var(--ds-space-xl); align-items: center; }
  .x-my-on .x-my-title { text-align: left; margin: 0; font-size: var(--ds-text-h3); }
  .x-my-on .x-my-ph > figure { width: min(22rem, calc((100vh - var(--x-bar-h, 4rem) - 5rem) / 1.414)); }
  .x-my-on .x-my-ph { column-gap: var(--ds-space-lg); }
}

/* ===== v27: phase headings back above the sheet; full-size left title ===== */
.x-my-on .x-my-ph { grid-template-rows: auto auto; row-gap: var(--ds-space-md); }
.x-my-on .x-my-ph > .x-my-head { grid-column: 1 / -1; grid-row: 1; align-items: center; text-align: center; }
.x-my-on .x-my-ph > figure, .x-my-on .x-my-c { grid-row: 2; }
.x-my-on .x-my-ph > figure { width: min(30rem, calc((100vh - var(--x-bar-h, 4rem) - 3rem) / 1.414)); }
@media (min-width: 64rem) {
  .x-my-on .x-my-title { font-size: var(--ds-text-h2); }
  .x-my-on .x-my-ph > figure { width: min(22rem, calc((100vh - var(--x-bar-h, 4rem) - 11rem) / 1.414)); }
}

/* ===== v28: two-beat title above the sheet, no left column, no connector ===== */
.x-my-lead { max-width: 44ch; text-wrap: balance; }
.x-my-head h2 { text-wrap: balance; }
.x-my-on .x-my-head .x-my-lead { margin-inline: auto; }
.x-my-on .x-my-c::after { display: none; }
@media (min-width: 64rem) {
  .x-my-on .x-my-stage { grid-template-columns: minmax(0, 1fr); }
  .x-my-on .x-my-ph > figure { width: min(26rem, calc((100vh - var(--x-bar-h, 4rem) - 13rem) / 1.414)); }
  .x-my-on .x-my-ph { column-gap: var(--ds-space-xl); }
  .x-my-on .x-my-c { max-width: 22rem; justify-self: end; }
  .x-my-on .x-my-c[data-side="r"] { justify-self: start; }
}

/* ===== v29: horizontal band, title and lead left (1/3), sheet and cards right (2/3) ===== */
@media (min-width: 64rem) {
  .x-my-on .x-my-ph { grid-template-columns: 31% minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: auto; column-gap: var(--ds-space-md); }
  .x-my-on .x-my-ph > .x-my-head { grid-column: 1; grid-row: 1; align-self: center; align-items: flex-start; text-align: left; padding-right: var(--ds-space-lg); }
  .x-my-on .x-my-head .x-my-lead { margin-inline: 0; max-width: none; }
  .x-my-on .x-my-ph > figure { grid-column: 3; grid-row: 1; width: min(30rem,calc((100vh - var(--x-bar-h, 4rem) - 2rem) / 1.414)); }
  .x-my-on .x-my-c, .x-my-on .x-my-c[data-side] { grid-row: 1; max-width: none; justify-self: stretch; }
  .x-my-on .x-my-c[data-side="l"] { grid-column: 2; }
  .x-my-on .x-my-c[data-side="r"] { grid-column: 4; }
}

/* ===== v30: navy footer, nav bar tinted by the section under it ===== */
.x-foot-dark .text-muted-foreground { color: color-mix(in srgb, var(--background) 72%, transparent); }
.x-bar { transition: background-color .3s ease, color .3s ease; }
body { padding-bottom: 0; }

/* ===== v31: editorial annotations and highlighter on the sheet ===== */
.x-my-on .x-my-c { background: none; box-shadow: none; border-radius: 0; padding: 0; display: flex; gap: var(--ds-space-sm); align-items: baseline; }
.x-my-on .x-my-c > .x-my-n { display: inline-block; position: static; width: auto; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; transform: none; font-family: var(--ds-font-heading); font-size: var(--ds-text-h4); line-height: 1; color: var(--primary); }
.x-my-on .x-my-c p { font-size: var(--ds-text-body); color: var(--foreground); }
.x-my-on .x-zone > .x-mark { display: none; }
.x-my-on .x-zone[data-z]::after { inset: -.6cqw -1cqw; border: 0; border-radius: 0; background: color-mix(in srgb, var(--x-c3) 45%, transparent); mix-blend-mode: multiply; transform: scaleX(0); transform-origin: left center; transition: opacity .2s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
.x-my-on .x-zone.x-hl::after { transform: scaleX(1); }

/* ===== v32: colour rhythm, readable annotations ===== */
.x-bg-jaune { background: color-mix(in srgb, var(--x-c3) 22%, var(--background)); }
.x-my-on .x-my-c { flex-direction: column; gap: var(--ds-space-xs); align-items: flex-start; align-self: start; width: min(17rem, 100%); max-width: none; }
.x-my-on .x-my-c[data-side="l"] { justify-self: end; }
.x-my-on .x-my-c[data-side="r"] { justify-self: start; }
.x-my-on .x-my-c > .x-my-n { font-size: var(--ds-text-body-s); font-weight: var(--ds-weight-body-strong); letter-spacing: .08em; padding: var(--ds-space-xs) var(--ds-space-sm); border-radius: var(--ds-radius-cta); background: var(--card); }
.x-my-on .x-my-c.x-my-now > .x-my-n { background: var(--x-c3); color: var(--x-c3-on); }
.x-my-on .x-my-c p { font-size: var(--ds-text-body-s); line-height: 1.5; }
.x-my-on .x-my-ph.x-cur > .x-my-c.x-in:not(.x-my-now) { opacity: .55; }
:root #formules { background: var(--background); }

/* ===== v33: no replay link under the hero ===== */
#stage-replay { display: none; }

/* ===== v34: FAQ tabs, question cards ===== */
.x-faq-p { display: flex; flex-direction: column; gap: var(--ds-space-sm); }
.x-faq-h { font-family: var(--ds-font-heading); font-size: var(--ds-text-h4); line-height: 1.2; color: var(--foreground); margin-bottom: var(--ds-space-xs); }
.x-faq-q { background: var(--card); color: var(--card-foreground); border-radius: var(--ds-radius-card); box-shadow: var(--ds-shadow-sm); }
.x-faq-q > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-md); padding: var(--ds-space-md) var(--ds-space-lg); font-weight: var(--ds-weight-body-strong); }
.x-faq-q > summary::-webkit-details-marker { display: none; }
.x-faq-q > summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: var(--ds-radius-cta); background: var(--ds-color-secondary); color: var(--primary); font-weight: var(--ds-weight-body-strong); line-height: 1; }
.x-faq-q[open] > summary::after { content: "−"; background: var(--primary); color: var(--primary-foreground); }
.x-faq-q > p { padding: 0 var(--ds-space-lg) var(--ds-space-md); max-width: 62ch; }
.x-my .x-doc { overflow: visible; }
.x-my-on .x-doc { overflow: hidden; }
.x-my .x-docfig .x-zone > .x-mark { top: 50%; right: -9.25cqw; transform: translateY(-50%); }
.x-my .x-docfig .x-zone[data-side="l"] > .x-mark { right: auto; left: -9.25cqw; }
.x-my-on .x-zone.x-hl > .x-mark { transform: translateY(-50%) scale(1.25); }
.x-apps { margin-top: var(--ds-space-sm); }
.x-app { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: var(--ds-radius-md); box-shadow: var(--ds-shadow-md); }
.x-app-e { background: var(--primary); color: var(--primary-foreground); font-family: var(--ds-font-heading); font-weight: var(--ds-weight-heading); font-size: var(--ds-text-h3); line-height: 1; }
.x-app-wa { background: var(--ds-color-success); color: var(--primary-foreground); }
.x-app-wa svg { width: 2.2rem; height: 2.2rem; }

/* ===== v9: personalisation — text column left, two sheets right ===== */
.x-pers { gap: var(--ds-space-lg); grid-template-columns: minmax(0, 1fr); }
.x-pers-cta { display: flex; padding-top: var(--ds-space-md); }
.x-pers-fig { width: min(100%, 16rem); margin: 0; }
@media (min-width: 48rem) {
  .x-pers { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--ds-space-xl); align-items: start; }
  .x-pers h2 { white-space: normal; }
  .x-pers > :nth-child(1) { grid-area: 1 / 1; }
  .x-pers > :nth-child(2) { grid-area: 2 / 1; }
  .x-pers > :nth-child(3) { grid-area: 3 / 1; }
  .x-pers > :nth-child(4) { grid-area: 1 / 2 / 5 / 3; align-self: center; }
  .x-pers > :nth-child(5) { grid-area: 1 / 3 / 5 / 4; align-self: center; }
  .x-pers > :nth-child(6) { grid-area: 4 / 1; }
  .x-pers-fig { width: 100%; }
}
.x-pers .x-paper-cp { font-size: var(--ds-text-body); }