/* fiable — système de matière, de typographie et de composition. Refonte du 27/10/2026.
   Trois rôles typographiques (poster / sans / mono), sections peintes, bords déchirés, tampons honnêtes. */

/* OD-LAYOUT-PRIMITIVES v1 — structure only: display, flex/grid, overflow, wrapping, ratio, geometry.
   Put this @layer first; product CSS outside the layer wins ordinary layout rules.
   Native hidden and closed-dialog states take precedence over component display rules. */
@layer od-layout {
  [hidden]:not([hidden="until-found" i]) { display: none !important; }
  dialog:not([open]) { display: none !important; }
  :where(.od-stack,.od-row,.od-row-top,.od-cluster,.od-grid,.od-field,.od-stat,.od-cell,.od-tile) > :where(*) { min-width: 0; }
  .od-stack   { display: flex; flex-direction: column; gap: var(--od-gap, 8px); }
  .od-row     { display: flex; align-items: center; gap: var(--od-gap, 8px); }
  .od-row-top { display: flex; align-items: flex-start; gap: var(--od-gap, 8px); }
  .od-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--od-gap, 8px); }
  .od-fill    { flex: 1 1 0; min-width: 0; }
  .od-fixed   { flex: none; }
  .od-grid    { display: grid; gap: var(--od-gap, 12px); grid-template-columns: repeat(var(--od-cols, 3), minmax(0, 1fr)); }
  .od-stat, .od-field, .od-cell { display: grid; gap: var(--od-gap, 2px); }
  :where(.od-stat,.od-field,.od-cell) > :where(*) { display: block; }
  .od-tile { display: grid; grid-template-rows: auto 1fr; }
  :where(.od-tile) > :where(*) { display: block; }
  .od-media { display: block; width: 100%; height: auto; aspect-ratio: var(--od-ratio, auto); }
  .od-media-cover { object-fit: cover; }
  .od-icon { display: inline-block; inline-size: var(--od-icon-size, 1em); block-size: var(--od-icon-size, 1em); flex: none; }
  .od-truncate { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .od-clamp-2, .od-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  .od-clamp-2 { -webkit-line-clamp: 2; }
  .od-clamp-3 { -webkit-line-clamp: 3; }
  .od-lines-2 { min-height: calc(2 * 1.4em); }
  .od-nowrap  { white-space: nowrap; }
  .od-keep    { word-break: keep-all; overflow-wrap: anywhere; }
  .od-screen { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
  .od-scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
  .od-rail { display: flex; gap: var(--od-gap, 8px); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
             padding-inline: var(--od-rail-pad, 16px); scroll-padding-inline: var(--od-rail-pad, 16px); }
  .od-rail::-webkit-scrollbar { display: none; }
  :where(.od-rail) > :where(*) { flex: none; scroll-snap-align: start; }
  :where(.od-rail) > :where(:last-child) { margin-inline-end: var(--od-rail-pad, 16px); }
  .od-spacer { flex: none; visibility: hidden; pointer-events: none; }
  .od-touch  { min-width: 44px; min-height: 44px; }
}
:root [hidden]:where(:not([hidden="until-found" i])) { display: none; }
/* /OD-LAYOUT-PRIMITIVES v1 */

/* ---------- 1. Jetons ---------- */
:root{
  color-scheme:light;
  --paper:#F4F1EA;--paper-deep:#E8E1D2;--ink:#1D2024;
  --ink-2:color-mix(in srgb,var(--ink) 72%,var(--paper));
  --ink-3:color-mix(in srgb,var(--ink) 56%,var(--paper));
  --rule:color-mix(in srgb,var(--ink) 16%,transparent);
  --rule-strong:color-mix(in srgb,var(--ink) 85%,transparent);
  --night:#1D2024;--night-ink:#F4F1EA;
  --night-ink-2:color-mix(in srgb,var(--night-ink) 72%,transparent);
  --night-rule:color-mix(in srgb,var(--night-ink) 16%,transparent);
  --accent:#D23A2A;
  --stamp:color-mix(in srgb,var(--accent) 78%,var(--ink));
  --morning:#F4F1EA;--sand:#E8DCC2;--golden:#E4C48E;--golden-late:#D2A368;--kraft:#C99A5B;--ember:#9E672D;
  --grain:url(/assets/textures/grain.webp);
  --edge-a:url(/assets/edge-a.svg);--edge-b:url(/assets/edge-b.svg);
  --poster:"Bricolage Grotesque","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --sans:"Schibsted Grotesk",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --t-mega:clamp(3.4rem,1.2rem + 9.4vw,11.5rem);--t-h2:clamp(2.6rem,1.3rem + 5.4vw,7rem);--t-h3:clamp(1.7rem,1.25rem + 1.5vw,2.6rem);
  --t-lede:clamp(1.14rem,1.02rem + .48vw,1.42rem);--t-body:clamp(1rem,.96rem + .16vw,1.1rem);--t-small:.9rem;--t-label:.69rem;
  --gutter:clamp(16px,3.2vw,40px);--max:1440px;--section:clamp(96px,7rem + 6vw,220px);--edge:clamp(28px,3.4vw,52px);
  --ease-out:cubic-bezier(.22,1,.36,1);--ease-in-out:cubic-bezier(.65,0,.35,1);
  --bar-h:60px;
}
:root[data-piste="vert"]{--accent:#235D4C}

/* ---------- 2. Base ---------- */
*,::before,::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overscroll-behavior-y:none;scroll-padding-top:72px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background-color:var(--paper);background-image:var(--grain);background-blend-mode:soft-light;background-size:256px;color:var(--ink);font-family:var(--sans);font-size:var(--t-body);font-weight:420;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg,canvas,video{display:block;max-width:100%}
img,video{height:auto}
a{color:inherit}
p{margin:0;text-wrap:pretty}
h1,h2,h3,h4{margin:0;font-weight:inherit;text-wrap:balance}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;margin:0}
pre{margin:0;font:inherit}
::selection{background:var(--accent);color:var(--paper)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.wrap{width:100%;max-width:var(--max);padding-inline:var(--gutter);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.svg-library{position:absolute;width:0;height:0;overflow:hidden}
.svg-library .ia{fill:var(--accent)}
.skip-link{position:absolute;top:-120px;left:var(--gutter);z-index:60;padding:12px 16px;background:var(--ink);color:var(--paper);border-radius:3px;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.skip-link:focus{top:12px}

/* ---------- 3. Trois rôles typographiques ---------- */
.poster{font-family:var(--poster);font-weight:800;font-stretch:75%;font-optical-sizing:auto;text-transform:uppercase;letter-spacing:.02em;line-height:.85;font-kerning:normal;text-wrap:balance}
.label{font-family:var(--mono);font-size:var(--t-label);font-weight:500;letter-spacing:.06em;text-transform:uppercase;line-height:1.5}
.lede{font-size:var(--t-lede);line-height:1.4;color:var(--ink-2);max-width:30em}
.h2{font-size:var(--t-h2);line-height:.9}
.h3{font-size:var(--t-h3)}
.kicker{display:inline-flex;align-items:center;gap:10px;margin-bottom:20px;color:var(--ink-2)}
.kicker::before{content:"";flex:none;width:18px;height:12px;border-radius:55% 45% 60% 40%/60% 50% 50% 40%;transform:rotate(-8deg);background-color:var(--dab,var(--accent))}
.link{text-decoration:underline 1px;text-underline-offset:.2em;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);transition:text-decoration-color .16s}
.link:hover{text-decoration-color:currentColor}
.arrow-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:560;text-decoration:none;color:var(--ink)}
.arrow-link .od-icon{--od-icon-size:18px;transition:transform .25s var(--ease-out)}
@media (hover:hover){.arrow-link:hover .od-icon{transform:translateX(4px)}}
.dark{color:var(--night-ink);--ink-2:var(--night-ink-2);--ink-3:color-mix(in srgb,var(--night-ink-2) 80%,transparent);--rule:var(--night-rule);--rule-strong:color-mix(in srgb,var(--night-ink) 70%,transparent);--stamp:color-mix(in srgb,var(--accent) 62%,var(--paper))}
.dark .arrow-link{color:var(--night-ink)}
.dark ::selection{background:var(--accent);color:var(--paper)}

/* Tampons */
.stamp{display:inline-block;max-width:9em;padding:3px 7px;color:var(--stamp);border:1.5px solid currentColor;border-radius:3px;font-family:var(--poster);font-weight:620;font-stretch:85%;font-size:.56rem;letter-spacing:.07em;text-transform:uppercase;line-height:1.25;text-align:center;transform:rotate(3deg);transform-origin:center}
.stamp.tilt-left{transform:rotate(-4deg)}
.stamp.round{display:inline-flex;align-items:center;justify-content:center;width:6.6em;height:6.6em;max-width:none;padding:.5em;border-width:2px;border-radius:50%;font-size:.6rem;line-height:1.2}
.stamp.big{font-size:.72rem;padding:5px 10px;max-width:16em}
@media (prefers-reduced-motion:no-preference){
  .stamp.flash{animation:stamp-flash .9s var(--ease-out) both}
  .stamp.round.flash{animation-name:stamp-flash-round}
}
@keyframes stamp-flash{0%{opacity:0;transform:rotate(3deg) scale(.86)}30%{opacity:1;transform:rotate(3deg) scale(1.06)}100%{transform:rotate(3deg) scale(1)}}
@keyframes stamp-flash-round{0%{opacity:0;transform:rotate(-6deg) scale(.86)}30%{opacity:1;transform:rotate(-6deg) scale(1.06)}100%{transform:rotate(-6deg) scale(1)}}
.stamp.round{transform:rotate(-6deg)}

/* ---------- 4. Boutons ---------- */
.btn{--h:56px;--btn-bg:var(--ink);--btn-fg:var(--paper);--btn-wipe:var(--accent);position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:14px;height:var(--h);padding:0 22px 0 20px;border:0;border-radius:4px;background:var(--btn-bg);color:var(--btn-fg);font-family:var(--poster);font-weight:740;font-stretch:85%;font-size:1.04rem;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;text-decoration:none;cursor:pointer;touch-action:manipulation;transition:color .2s var(--ease-out),transform .16s var(--ease-out)}
.btn::before{content:"";position:absolute;inset:-2px -24px;z-index:-1;background-color:var(--btn-wipe);-webkit-mask:var(--edge-a) 0 -22px/600px calc(100% + 22px) repeat-x;mask:var(--edge-a) 0 -22px/600px calc(100% + 22px) repeat-x;transform:translate(-104%) skew(-12deg);transition:transform .42s var(--ease-out)}
@media (hover:hover){.btn:hover::before{transform:translate(0) skew(-12deg)}.btn:hover{color:var(--btn-fg-hover,var(--btn-fg))}}
.btn:active{transform:translateY(1px) scale(.99)}
.btn .od-icon{--od-icon-size:18px}
.btn .btn-meta{display:inline-flex;align-items:center;align-self:stretch;padding-left:14px;border-left:1px solid color-mix(in srgb,currentColor 25%,transparent);font-family:var(--mono);font-weight:400;font-size:.66rem;letter-spacing:.04em;opacity:.66}
.btn.ghost{--btn-bg:transparent;--btn-fg:currentColor;--btn-wipe:color-mix(in srgb,currentColor 14%,transparent);box-shadow:inset 0 0 0 1.5px currentColor}
.btn.paper{--btn-bg:var(--paper);--btn-fg:var(--ink);--btn-wipe:var(--accent);--btn-fg-hover:var(--paper)}
.btn.small{--h:46px;padding:0 18px;font-size:.92rem}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:default}
.btn[disabled]::before{display:none}
@media (width<=560px){.btn .btn-meta{display:none}}

/* ---------- 5. Barre de navigation ---------- */
.bar-sentinel{position:absolute;top:0;left:0;width:1px;height:9px;visibility:hidden;pointer-events:none}
.bar{position:sticky;top:0;z-index:20;background:transparent;color:var(--ink);transition:color .4s var(--ease-out)}
.bar::before{content:"";position:absolute;inset:0 0 -36px;z-index:-1;opacity:0;pointer-events:none;background:linear-gradient(to bottom,color-mix(in srgb,var(--paper) 58%,transparent),color-mix(in srgb,var(--paper) 30%,transparent));-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);-webkit-mask-image:linear-gradient(#000 0 60px,transparent);mask-image:linear-gradient(#000 0 60px,transparent);transition:opacity .3s var(--ease-out)}
.bar[data-scrolled]::before{opacity:1}
.bar-inner{display:flex;align-items:center;gap:24px;height:var(--bar-h)}
.mark{display:inline-flex;align-items:center;min-height:44px;margin-right:auto;text-decoration:none}
.mark svg{height:22px;width:auto;fill:currentColor}
.links{display:flex;gap:26px}
.links a{font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;transition:color .15s}
.links a:hover{color:var(--ink)}
.bar-cta{display:inline-flex;align-items:center;gap:8px;padding:9px 14px 8px;border-radius:3px;background:var(--ink);color:var(--paper);font-family:var(--poster);font-weight:740;font-stretch:85%;font-size:.9rem;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;transition:background-color .15s,box-shadow .6s var(--ease-out)}
.bar-cta:hover{background:var(--accent)}
.menu-btn,.menu{display:none}
/* Sur l'ouverture, la barre prend la tonalité de la peinture et un halo de lecture */
.bar:not([data-scrolled]) :is(.mark,.links a,.menu-btn){text-shadow:0 0 1px rgb(var(--halo-rgb,244 241 234)/.9),0 0 2px rgb(var(--halo-rgb,244 241 234)/.8),0 0 3px rgb(var(--halo-rgb,244 241 234)/.6)}
.bar:not([data-scrolled])[data-tone="dark"]{--halo-rgb:29 32 36;color:var(--night-ink)}
.bar:not([data-scrolled])[data-tone="dark"] .links a,.bar:not([data-scrolled])[data-tone="dark"] .menu-btn{color:var(--night-ink)}
.bar:not([data-scrolled])[data-tone="dark"] .bar-cta{box-shadow:0 0 0 1px color-mix(in srgb,var(--night-ink) 55%,transparent)}
@media (width<=820px){
  .bar-inner{gap:8px}
  .links{display:none}
  .menu-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:0;background:none;cursor:pointer;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:inherit;touch-action:manipulation}
  .menu-btn .od-icon{--od-icon-size:18px}
  .bar-cta{min-height:44px;padding:0 16px;white-space:nowrap}
  .menu:not([hidden]){display:block;position:absolute;top:100%;left:0;right:0;padding-top:4px;padding-bottom:20px;background:var(--paper);color:var(--ink);border-bottom:1px solid var(--rule-strong)}
  .menu a:not(.btn){display:flex;align-items:center;min-height:56px;border-top:1px solid var(--rule);font-family:var(--poster);font-weight:800;font-stretch:75%;font-size:2rem;line-height:1;text-transform:uppercase;text-decoration:none}
  .menu a:first-child{border-top:0}
  .menu-cta{border-top:1px solid var(--rule);padding-top:20px}
  .menu-cta .btn{width:100%;justify-content:center}
  .menu-fine{color:var(--ink-3);margin-top:10px}
}
@media (prefers-reduced-motion:no-preference){.menu:not([hidden]){animation:drop .22s var(--ease-out) both}}
@keyframes drop{0%{opacity:0;transform:translateY(-8px)}}

/* ---------- 6. Sections peintes ---------- */
.paint{position:relative;background-color:var(--bg,var(--paper));background-image:var(--grain),var(--wash,none);background-blend-mode:soft-light,normal;background-size:256px,100% 100%}
.paint.edge::before,.paint.edge-b::before{content:"";position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:var(--edge);z-index:2;pointer-events:none;background-color:var(--bg-top,var(--bg,var(--paper)));background-image:var(--grain);background-size:256px;background-position:0 var(--edge);background-blend-mode:soft-light;-webkit-mask:var(--edge-mask,var(--edge-a)) 0 100%/1200px 100% repeat-x;mask:var(--edge-mask,var(--edge-a)) 0 100%/1200px 100% repeat-x}
.paint.edge-b::before{--edge-mask:var(--edge-b)}
.sec{padding:var(--section) 0}
.sec-head{margin-bottom:clamp(32px,4.4vw,64px)}
.sec-head .lede{margin-top:clamp(18px,2vw,28px)}
.sec-head .h2{max-width:11em}
.sec-head.split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:24px;align-items:end}
.sec-head.split>.sec-main{grid-column:1/span 7}
.sec-head.split>.sec-side{grid-column:9/-1;justify-self:start;align-self:end}
@media (width<=860px){.sec-head.split>.sec-main,.sec-head.split>.sec-side{grid-column:1/-1}}
.small-print{font-family:var(--mono);font-size:.72rem;line-height:1.5;color:var(--ink-3);max-width:60em}
.small-print a{color:var(--ink-2)}

/* Apparitions au défilement */
@media (prefers-reduced-motion:no-preference){
  .js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease-out),transform .9s var(--ease-out);transition-delay:calc(var(--i,0) * 70ms)}
  .js [data-reveal].in{opacity:1;transform:none}
}
:root[data-motion="reduce"] [data-reveal]{opacity:1 !important;transform:none !important;transition:none !important}
:root[data-motion="reduce"] [data-land]{opacity:1 !important;transform:none !important;transition:none !important}
:root[data-motion="reduce"] .lane-bar{transform:none !important;transition:none !important}

/* ---------- 7. Démonstration ---------- */
.demo-sec{--bg:var(--sand);--bg-top:#EDE3CC;--wash:linear-gradient(180deg,#EDE3CC 0%,var(--sand) 45%,#DFCFAE 100%);--dab:var(--accent);padding:clamp(56px,6vw,96px) 0 var(--section)}
.plate{position:relative;isolation:isolate;padding:clamp(50px,6.5%,78px) clamp(14px,6%,84px) clamp(16px,4.5%,60px);border-radius:4px;overflow:hidden;background:var(--kraft)}
.plate-art{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none;transition:transform .9s var(--ease-out)}

@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.scenery{scale:1.04}}
.demo{position:relative}
.demo-cue{position:absolute;bottom:100%;left:0;z-index:3;display:flex;gap:.7em;margin:0 0 clamp(10px,1.2vw,13px);padding:.72em 1em .66em;border-radius:4px;background:var(--ink);color:var(--paper);white-space:nowrap;font-size:clamp(.66rem,.6rem + .3vw,.78rem)}
.demo-cue::after{content:"";position:absolute;top:100%;left:1.6em;border:6px solid transparent;border-top-color:var(--ink);border-bottom:0}
.demo-cue .go-on{color:color-mix(in srgb,var(--paper) 72%,var(--golden))}
.demo-cue-swap{display:grid}
.demo-nudge,.demo-told{grid-area:1/1;transition:opacity .4s var(--ease-out)}
.demo-told,.demo[data-engaged] .demo-nudge{opacity:0}
.demo[data-engaged] .demo-told{opacity:1;transition-delay:.25s}
.by-touch{display:none}
@media (hover:none){.by-touch{display:inline}.by-pointer{display:none}}
@media (width<=400px){.demo-cue .go-on{display:none}}
.demo-shell{position:relative;background:var(--paper);background-image:var(--grain);background-blend-mode:soft-light;background-size:256px;border:1.5px solid var(--rule-strong);border-radius:4px;overflow:hidden;color:var(--ink)}
.demo-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 18px;border-bottom:1.5px solid var(--rule-strong);background:var(--paper-deep)}
.demo-toolbar .dots{display:inline-flex;gap:6px;margin-right:10px}
.demo-toolbar .dots span{display:block;width:10px;height:10px;border-radius:50%;border:1.5px solid var(--ink)}
.demo-toolbar .who{display:flex;align-items:center;gap:10px;min-width:0}
.demo-toolbar strong{font-family:var(--poster);font-weight:740;font-stretch:85%;text-transform:uppercase;letter-spacing:.03em;font-size:.95rem}
.demo-toolbar .label{color:var(--ink-3)}
.demo-mode{color:var(--ink-3);flex:none}
.demo-tabs{display:none}
.demo-panels{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.knowledge-panel{border-right:1.5px solid var(--rule-strong);background:color-mix(in srgb,var(--paper-deep) 55%,var(--paper))}
.panel-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:16px 18px 10px}
.panel-heading h3{font-family:var(--poster);font-weight:740;font-stretch:85%;font-size:1.02rem;letter-spacing:.03em;text-transform:uppercase}
.panel-heading .label{color:var(--ink-3)}
.knowledge-layout{display:grid;grid-template-columns:minmax(176px,.9fr) minmax(0,1.5fr);min-height:460px}
.file-tree{border-right:1px solid var(--rule);padding:6px 8px 16px}
.folder-group+.folder-group{margin-top:8px}
.folder-toggle{display:flex;align-items:center;gap:8px;width:100%;min-height:40px;padding:4px 8px;border:0;background:none;cursor:pointer;border-radius:3px;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);text-align:left}
.folder-toggle .od-icon{--od-icon-size:16px}
.folder-toggle .chev{margin-left:auto;transition:transform .25s var(--ease-out)}
.folder-toggle[aria-expanded="false"] .chev{transform:rotate(-90deg)}
.folder-files{padding-left:6px}
.file-button{display:flex;align-items:center;gap:8px;width:100%;min-height:40px;padding:6px 8px 6px 14px;border:0;background:none;border-radius:3px;cursor:pointer;font-size:.9rem;text-align:left;color:var(--ink);transition:background-color .15s}
.file-button .od-icon{--od-icon-size:16px;color:var(--ink-3)}
.file-button:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.file-button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.file-button[aria-pressed="true"] .od-icon{color:inherit}
.file-viewer{padding:14px 18px 18px;min-width:0}
.file-path{color:var(--ink-3)}
.file-viewer h4{font-family:var(--poster);font-weight:740;font-stretch:85%;text-transform:uppercase;letter-spacing:.03em;font-size:1.15rem;margin-top:8px}
.file-body{margin-top:12px;padding:14px 16px;max-height:330px;overflow:auto;border:1px solid var(--rule);border-radius:3px;background:var(--paper);font-family:var(--mono);font-size:.78rem;line-height:1.55;white-space:pre-wrap;color:var(--ink-2)}
.back-to-answer{margin-top:12px}
.assistant-panel{display:flex;flex-direction:column;min-width:0}
.reset-demo{border:0;background:none;cursor:pointer;color:var(--ink-3);min-height:32px;padding:0 4px;text-decoration:underline 1px;text-underline-offset:.3em;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent)}
.reset-demo:hover{color:var(--ink)}
.question-label{padding:0 18px;color:var(--ink-2);font-size:var(--t-small)}
.question-list{display:flex;flex-direction:column;gap:6px;padding:10px 18px 0}
.question-button{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:10px 14px;border:1.5px solid var(--rule-strong);border-radius:3px;background:var(--paper);cursor:pointer;text-align:left;font-size:.95rem;font-weight:520;transition:background-color .15s,color .15s,transform .16s var(--ease-out)}
.question-button .od-icon{--od-icon-size:18px;transition:transform .25s var(--ease-out)}
@media (hover:hover){.question-button:hover{background:var(--paper-deep)}.question-button:hover .od-icon{transform:translateX(3px)}}
.question-button:active{transform:translateY(1px)}
.question-button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.question-button .q-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.question-button .q-tag{color:var(--ink-3);font-size:.62rem}
.question-button[aria-pressed="true"] .q-tag{color:color-mix(in srgb,var(--paper) 70%,transparent)}
.answer-space{flex:1;padding:16px 18px 0}
.answer-empty{display:flex;align-items:center;gap:14px;min-height:140px;padding:18px;border:1.5px dashed var(--rule-strong);border-radius:3px;color:var(--ink-2)}
.answer-empty .empty-bracket{font-family:var(--mono);font-size:1.4rem;color:var(--ink-3)}
.answer-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;color:var(--ink-3)}
.text-button{border:0;background:none;cursor:pointer;color:var(--ink);padding:0;min-height:32px;text-decoration:underline 1px;text-underline-offset:.3em;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);font-size:var(--t-small);display:inline-flex;align-items:center;gap:6px}
.text-button:hover{text-decoration-color:currentColor}
.answer-text{display:flex;flex-direction:column;gap:12px}
.answer-paragraph{position:relative;padding:12px 14px;border-left:2px solid var(--ink);background:color-mix(in srgb,var(--paper-deep) 50%,var(--paper))}
.answer-paragraph p{min-height:1.55em}
.answer-paragraph .doc-title{font-family:var(--poster);font-weight:740;font-stretch:85%;text-transform:uppercase;letter-spacing:.03em;font-size:1.05rem;line-height:1.2}
.answer-paragraph .doc-sub{margin-top:4px;color:var(--ink-2);font-size:.95rem}
.answer-paragraph .doc-label{color:var(--ink-3);min-height:0}
.doc-list{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.doc-list li{display:flex;gap:10px;min-height:1.55em;font-size:.98rem;line-height:1.45}
.doc-list li::before{content:"";flex:none;width:10px;height:2px;margin-top:.72em;background:var(--ink)}
.doc-list li:empty::before{opacity:.35}
.answer-sources{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.source-button{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 10px;border:1px solid var(--rule-strong);border-radius:3px;background:var(--paper);cursor:pointer;font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);transition:background-color .15s,color .15s}
.source-button .od-icon{--od-icon-size:14px}
.source-button:hover{background:var(--ink);color:var(--paper)}
@media (prefers-reduced-motion:no-preference){.js .source-button{animation:source-in .5s var(--ease-out) both;animation-delay:calc(var(--i,0) * 120ms)}}
@keyframes source-in{0%{opacity:0;transform:translateY(6px)}}
.review-strip{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:16px;padding-top:14px;border-top:1.5px solid var(--rule-strong)}
.review-stamp{font-size:.66rem;padding:5px 10px}
.review-stamp.is-reviewed{--stamp:#235D4C}
:root[data-piste="vert"] .review-stamp.is-reviewed{--stamp:var(--ink)}
.review-context{padding:10px 18px 0;color:var(--ink-3);font-size:var(--t-small)}
.simulation-note{margin-top:auto;padding:18px;border-top:1px solid var(--rule);font-family:var(--mono);font-size:.68rem;line-height:1.5;letter-spacing:.02em;color:var(--ink-3)}
.band{display:flex;align-items:center;justify-content:space-between;gap:20px 32px;margin-top:clamp(40px,5vw,72px);padding:22px 0;border-top:2px solid var(--ink);border-bottom:1px solid var(--rule-strong)}
.band-line{font-size:clamp(2rem,1.2rem + 2.6vw,3.6rem);line-height:.9}
.band-line span:last-of-type{color:var(--accent)}
.band .note{max-width:26em;color:var(--ink-2)}
@media (width<=860px){
  .demo-tabs{display:flex;gap:0;border-bottom:1.5px solid var(--rule-strong)}
  .demo-tabs button{flex:1;min-height:48px;border:0;background:none;cursor:pointer;font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);border-bottom:2px solid transparent;margin-bottom:-1.5px}
  .demo-tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
  .demo-panels{grid-template-columns:minmax(0,1fr)}
  .knowledge-panel{border-right:0}
  .knowledge-layout{grid-template-columns:minmax(0,1fr);min-height:0}
  .file-tree{border-right:0;border-bottom:1px solid var(--rule);padding:6px 10px 12px}
  .folder-files{display:flex;flex-wrap:wrap;gap:4px;padding-left:0}
  .file-button{width:auto;padding:6px 10px}
  .file-body{max-height:260px}
  .band{flex-direction:column;align-items:flex-start}
}
@media (width<=640px){.plate{padding:48px 10px 12px}.demo-toolbar{padding:10px 12px}.demo-toolbar .label{display:none}.demo-mode{display:none}.panel-heading,.question-label,.question-list,.answer-space,.review-context,.simulation-note{padding-left:12px;padding-right:12px}.file-viewer{padding:12px}}

/* ---------- 8. Jeu « Trouvez l'erreur » ---------- */
.game-sec{--bg:var(--golden);--bg-top:#EBD2A3;--wash:linear-gradient(180deg,#EBD2A3 0%,var(--golden) 40%,var(--golden-late) 100%);--dab:var(--ink);--ink-2:#4A3F30;--ink-3:#6B5B45}
.game-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:32px;align-items:start}
.board{grid-column:1/span 7;position:relative;margin:0}
.view{position:relative;padding:clamp(8px,1.2vw,16px);border-radius:4px;background-color:var(--ink);background-image:var(--grain);background-blend-mode:soft-light;background-size:256px}
.board-img{position:relative;overflow:hidden;border-radius:3px;aspect-ratio:1672/941}
.board-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out)}
.correction{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.correction path{fill:none;stroke:var(--accent);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset .7s var(--ease-out) .1s,opacity .16s var(--ease-out)}
.board.is-solved .correction path{stroke-dashoffset:0;opacity:1}
.board-caption{margin-top:10px;color:var(--ink-3)}
.sheet{grid-column:8/-1;position:relative;overflow:clip;padding:clamp(16px,1.8vw,24px);border:1.5px solid var(--rule-strong);border-radius:4px;background:var(--paper);background-image:var(--grain);background-blend-mode:soft-light;background-size:256px}
.sheet-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;color:var(--ink-3);padding-bottom:10px;border-bottom:1.5px solid var(--ink)}
.sheet .instruction{margin-top:14px;font-weight:560}
.sentences{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.sentence{position:relative;display:grid;grid-template-columns:2.2rem minmax(0,1fr) 22px;align-items:center;gap:10px;min-height:48px;padding:10px 12px;border:1.5px solid transparent;border-radius:3px;background:none;cursor:pointer;text-align:left;font-size:1rem;line-height:1.35;transition:background-color .15s,border-color .15s}
.sentence .num{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--ink-3)}
.sentence .dot{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--rule-strong);justify-self:end}
@media (hover:hover){.sentence:hover{background:var(--paper-deep)}}
.sentence[data-result="try"]{border-color:var(--rule-strong);background:var(--paper-deep)}
.sentence[data-result="try"] .dot{border-style:dashed}
.sentence[data-result="correct"]{z-index:1;background:var(--paper);outline:3px solid var(--accent);outline-offset:2px;box-shadow:0 0 0 9999px color-mix(in srgb,var(--ink) 55%,transparent)}
.sentence[data-result="correct"] .dot{border-color:var(--accent);background:var(--accent)}
.sentence[aria-disabled="true"]{cursor:default}
.game-feedback{position:relative;z-index:2;margin:14px -6px 0;padding:8px 6px;min-height:2.4em;border-radius:3px;background:var(--paper)}
.game-feedback strong{display:block;font-family:var(--poster);font-weight:740;font-stretch:85%;text-transform:uppercase;letter-spacing:.03em;font-size:1.05rem}
.game-feedback p{margin-top:6px;color:var(--ink-2)}
.game-reset{position:relative;z-index:2;margin:6px -6px 0;padding:4px 6px;border-radius:3px;background:var(--paper)}
.evidence{grid-column:8/-1;position:relative;padding:clamp(16px,1.8vw,24px);border:1.5px solid var(--rule-strong);border-radius:4px;background:var(--paper-deep);background-image:var(--grain);background-blend-mode:soft-light;background-size:256px}
.evidence h3{font-family:var(--mono);font-size:.95rem;margin-top:8px}
.evidence blockquote{margin:14px 0 0;padding-left:14px;border-left:2px solid var(--ink);font-size:1.05rem;line-height:1.45}
.pencil{text-decoration:underline 2px var(--accent);text-underline-offset:.18em;text-decoration-skip-ink:none}
.evidence .caption{margin-top:10px;color:var(--ink-3);font-size:var(--t-small)}
.evidence .note{margin-top:14px;padding-top:12px;border-top:1px solid var(--rule)}
.evidence .note p{margin-top:4px;color:var(--ink-2)}
.evidence .stamp{position:absolute;top:14px;right:14px}
.game-sec .small-print{margin-top:clamp(24px,3vw,40px)}
@media (width<=960px){.board,.sheet,.evidence{grid-column:1/-1}}

/* ---------- 9. Méthode en escalier ---------- */
.method-sec{--bg:var(--paper-deep);--bg-top:#EFE9DC;--wash:linear-gradient(180deg,#EFE9DC 0%,var(--paper-deep) 50%,#DED5C2 100%);--dab:var(--accent)}
.steps{--rise:clamp(28px,6vw,96px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gutter);align-items:end;margin-top:clamp(16px,3vw,40px)}
.step{position:relative;padding-bottom:22px}
.step:nth-child(2){margin-bottom:var(--rise)}
.step:nth-child(3){margin-bottom:calc(var(--rise) * 2)}
.step::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ink);transform-origin:left;transform:scaleX(var(--tread,1))}
.step .riser{position:absolute;left:calc(-1 * var(--gutter) / 2 - 1px);bottom:0;width:2px;height:calc(var(--rise) + 2px);background:var(--ink);transform-origin:bottom;transform:scaleY(var(--tread,1))}
.step:first-child .riser{display:none}
.step-art{position:relative;overflow:hidden;border-radius:4px;aspect-ratio:1;border:1.5px solid var(--rule-strong)}
.step-art img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out)}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.step-art:hover img,.board-img:hover img{transform:scale(1.04)}}
.step .index{margin-top:16px;color:var(--ink-3)}
.step h3{font-size:var(--t-h3);margin-top:8px}
.step p{margin-top:10px;color:var(--ink-2);max-width:26em}
.step .stamp{margin-top:14px}
@media (prefers-reduced-motion:no-preference){
  .js .step{--tread:0}
  .js .step::after,.js .step .riser{transition:transform .6s var(--ease-out)}
  .js .step::after{transition-delay:calc(var(--i,0) * 160ms + .25s)}
  .js .step .riser{transition-delay:calc(var(--i,0) * 160ms + .1s)}
  .js .step.in{--tread:1}
}
.method-foot{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(20px,3vw,48px);margin-top:clamp(40px,5vw,72px);padding-top:24px;border-top:1.5px solid var(--ink)}
.method-foot .pile{width:clamp(72px,8vw,110px);fill:var(--ink)}
.method-foot .pile .ia{fill:var(--accent)}
.method-foot .line{font-family:var(--poster);font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:clamp(1.5rem,1rem + 2vw,2.6rem);line-height:.9}
.method-foot .line span{display:block;color:var(--ink-3)}
@media (width<=860px){
  .steps{grid-template-columns:minmax(0,1fr);row-gap:28px;--rise:0px}
  .step:nth-child(2),.step:nth-child(3){margin-bottom:0}
  .step:nth-child(2){margin-left:8%}.step:nth-child(3){margin-left:16%}
  .step .riser{display:none}
  .step-art{max-width:420px}
  .method-foot{grid-template-columns:auto minmax(0,1fr)}
  .method-foot .arrow-link{grid-column:1/-1}
}

/* ---------- 10. Mesures (section nuit) ---------- */
.limits-sec{overflow:clip;--bg:var(--night);--bg-top:#2A2E33;--wash:linear-gradient(180deg,#2A2E33 0%,var(--night) 40%,#15181B 100%);--dab:var(--accent);--card:var(--paper);--card-edge:color-mix(in srgb,var(--ink) 85%,transparent);--muted:color-mix(in srgb,var(--ink) 42%,var(--paper));--radius:3px 4px 3px 4px/4px 3px 4px 3px}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:dense;gap:clamp(10px,1.3vw,18px)}
.card{position:relative;display:flex;flex-direction:column;min-width:0;padding:clamp(14px,1.4vw,20px);border:1.5px solid var(--card-edge);border-radius:var(--radius);background-color:var(--card);background-image:var(--grain);background-blend-mode:soft-light;background-size:256px;color:var(--ink);box-shadow:0 16px 28px -22px color-mix(in srgb,var(--ink) 55%,transparent);--ink-2:color-mix(in srgb,var(--ink) 72%,var(--paper));--ink-3:color-mix(in srgb,var(--ink) 56%,var(--paper));--rule:color-mix(in srgb,var(--ink) 16%,transparent);--stamp:color-mix(in srgb,var(--accent) 78%,var(--ink))}
.card.wide{grid-column:span 2}
.card.plain{background:none;box-shadow:none;border-color:var(--night-rule);color:var(--night-ink);--ink-2:var(--night-ink-2);--ink-3:color-mix(in srgb,var(--night-ink-2) 80%,transparent);--rule:var(--night-rule);--stamp:color-mix(in srgb,var(--accent) 62%,var(--paper))}
.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;min-height:2.2em}
.card-top .label{color:var(--ink-3);padding-top:3px;margin-left:auto;white-space:nowrap}
.card-top .stamp.round{flex:none;margin:-6px 0 -14px 0}
.card-top .label+.stamp.round{margin-left:4px}
.card-title{font-family:var(--poster);font-weight:740;font-stretch:85%;text-transform:uppercase;letter-spacing:.02em;font-size:.98rem;line-height:1.15;text-wrap:balance}
.card-body{display:flex;flex-direction:column;flex:1}
.call{margin-top:clamp(12px,1.4vw,20px)}
.context{color:var(--ink-2);margin-bottom:4px}
.verdict{display:flex;align-items:flex-start;gap:10px;font-family:var(--poster);font-weight:800;font-stretch:75%;font-size:clamp(3.4rem,1.4rem + 4.2vw,6.2rem);line-height:.82;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.verdict .unit{font-size:.42em;line-height:1;margin-top:.14em}
.card.wide .verdict{font-size:clamp(3.8rem,1.4rem + 5vw,7.4rem)}
.verdict-line{margin-top:10px;font-size:1.04rem;font-weight:560;line-height:1.2}
.verdict-note{margin-top:4px;font-size:.86rem;line-height:1.3;color:var(--ink-2)}
.lanes{display:grid;row-gap:8px;margin-top:auto;padding-top:clamp(16px,1.8vw,24px)}
.lane{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:3px 8px}
.lane-name{font-family:var(--poster);font-weight:700;font-stretch:85%;text-transform:uppercase;letter-spacing:.03em;font-size:.8rem;line-height:1.1;color:var(--ink-2)}
.lane-val{font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.lane-track{grid-column:1/-1;display:block;height:9px}
.lane-bar{display:block;height:100%;width:max(4px,calc(100% * var(--w)));border-radius:2px 3px 2px 3px/3px 2px 3px 2px;background-color:var(--accent);background-image:var(--grain);background-blend-mode:soft-light;background-size:256px;transform-origin:0 50%}
.card.wide .card-body{flex:none;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:clamp(16px,2vw,28px);align-items:start}
.card-foot{margin-top:auto;padding-top:14px;font-size:.78rem;line-height:1.4;color:var(--ink-2)}
.card-foot a{color:var(--ink)}
.card-foot .label{color:var(--ink-3);display:block;margin-bottom:4px}
.card .trust-list{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.card .trust-list li{display:flex;gap:10px;align-items:baseline}
.card .trust-list li::before{content:"";flex:none;width:8px;height:8px;margin-top:.1em;border-radius:50%;background:var(--accent);transform:translateY(-1px)}
.card .big-words{font-family:var(--poster);font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:clamp(1.7rem,1.3rem + 1.2vw,2.4rem);line-height:.9;margin-top:12px}
.card .big-words span{display:block}
.card.plain .big-words{color:var(--night-ink)}
.card .copy{margin-top:12px;color:var(--ink-2);font-size:.95rem}
@media (prefers-reduced-motion:no-preference){
  .js .limits-sec [data-land]{transition:opacity .32s var(--ease-out) var(--d,0s),transform .52s cubic-bezier(.2,1.2,.3,1) var(--d,0s)}
  .js .limits-sec [data-land]:not(.landed){opacity:0;transform:translateY(22px) rotate(-.6deg)}
  .js .limits-sec .lane-bar{transition:transform .62s var(--ease-out) calc(var(--d,0s) + .16s + var(--j,0) * 70ms)}
  .js .limits-sec [data-land]:not(.landed) .lane-bar{transform:scaleX(0)}
}
@media (width<=1100px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (width<=860px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.card.wide .card-body{display:flex}}
@media (width<=600px){.cards{grid-template-columns:minmax(0,1fr);gap:10px}.card{padding:14px}.card-title{font-size:.86rem}.verdict{font-size:clamp(2.7rem,1.4rem + 6vw,3.4rem)}.card.wide .verdict{font-size:clamp(3.4rem,2rem + 8vw,4.6rem)}.verdict-line{font-size:.9rem}.verdict-note{font-size:.76rem}.lane-name{font-size:.7rem}.lane-track{height:7px}.card.wide,.card.plain{grid-column:1/-1}.card .stamp.round{font-size:.52rem;width:6.2em;height:6.2em}}

/* ---------- 11. Offre sur l'escalier ---------- */
.offer-sec{--bg:var(--kraft);--bg-top:#D6AE74;--wash:linear-gradient(180deg,#D6AE74 0%,var(--kraft) 40%,#AF7B3B 100%);--dab:var(--ink);--ink-2:#3E2E18;--ink-3:#5E4A2B}
.landscape{position:relative;overflow:hidden;border-radius:4px;border:1.5px solid var(--rule-strong);aspect-ratio:1916/821;background:var(--ember)}
.landscape img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out)}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.landscape:hover img{transform:scale(1.04)}}
.stops{position:absolute;inset:0;margin:0}
.stops li{position:absolute;left:var(--x);top:var(--y);transform:translate(-8px,-100%)}
.stop{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px 8px 10px;border:1.5px solid var(--ink);border-radius:3px;background:var(--paper);color:var(--ink);text-decoration:none;white-space:nowrap;transition:background-color .15s,color .15s,transform .16s var(--ease-out)}
.stop .num{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em}
.stop .name{font-family:var(--poster);font-weight:740;font-stretch:85%;text-transform:uppercase;letter-spacing:.03em;font-size:.9rem}
.stop::after{content:"";position:absolute;left:14px;top:100%;width:2px;height:12px;background:var(--ink)}
@media (hover:hover){.stop:hover{background:var(--ink);color:var(--paper)}.stop:hover::after{height:16px}}
.stop:active{transform:translateY(1px)}
.timeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.3vw,18px);margin-top:clamp(28px,3vw,44px)}
.offer-step{position:relative;display:flex;flex-direction:column;padding:clamp(16px,1.6vw,22px);border:1.5px solid var(--ink);border-radius:4px;background:var(--paper);background-image:var(--grain);background-blend-mode:soft-light;background-size:256px;--ink-2:color-mix(in srgb,var(--ink) 72%,var(--paper));--ink-3:color-mix(in srgb,var(--ink) 56%,var(--paper))}
.offer-step .kick{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--ink-3)}
.offer-step .kick .n{font-family:var(--mono);font-size:.66rem}
.offer-step h3{font-size:clamp(1.6rem,1.2rem + 1.2vw,2.2rem);margin-top:12px}
.offer-step .time{margin-top:8px;color:var(--ink-3)}
.price{margin-top:14px;font-family:var(--poster);font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:clamp(2.2rem,1.4rem + 2.4vw,3.6rem);line-height:.9;font-variant-numeric:tabular-nums;white-space:nowrap}
.price .unit{font-size:.4em;letter-spacing:.04em;margin-left:.12em;font-stretch:85%}
.price .or{font-size:.5em;margin:0 .1em}
.offer-step .lines{display:flex;flex-direction:column;gap:6px;margin-top:14px;color:var(--ink-2);font-size:.95rem}
.offer-step .lines li{display:flex;gap:10px}
.offer-step .lines li::before{content:"";flex:none;width:10px;height:2px;margin-top:.7em;background:var(--ink)}
.offer-step .detail{margin-top:12px;padding-top:10px;border-top:1px solid var(--rule);font-size:.86rem;color:var(--ink-2)}
.offer-step .arrow-link{margin-top:auto;padding-top:12px}
.offer-step .sizes{display:inline-flex;gap:0;margin-top:14px;border:1.5px solid var(--ink);border-radius:3px;overflow:hidden;align-self:flex-start}
.offer-step .sizes button{min-height:40px;padding:0 12px;border:0;background:var(--paper);cursor:pointer;font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.offer-step .sizes button+button{border-left:1.5px solid var(--ink)}
.offer-step .sizes button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.offer-step .size-label{margin-top:8px;color:var(--ink-3)}
.custom-band{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;align-items:center;gap:20px clamp(20px,3vw,48px);margin-top:clamp(28px,3vw,44px);padding:22px 0;border-top:2px solid var(--ink);border-bottom:1px solid var(--rule-strong)}
.custom-band h3{font-size:clamp(1.5rem,1.1rem + 1.4vw,2.4rem);margin-top:6px}
.custom-band p{color:var(--ink-2)}
.offer-sec .small-print{margin-top:20px}
@media (width<=1100px){.timeline{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (width<=860px){.custom-band{grid-template-columns:minmax(0,1fr)}}
@media (width<=700px){
  .landscape{aspect-ratio:auto;height:clamp(300px,70vw,420px)}
  .landscape img{object-position:62% 60%}
  .stops li{transform:translate(-50%,-100%)}
  .stop{padding:0 8px;min-width:44px;justify-content:center}
  .stop .name{display:none}
  .stop::after{left:50%;margin-left:-1px}
}
@media (width<=600px){.timeline{grid-template-columns:minmax(0,1fr)}}

/* ---------- 12. Qui est derrière ---------- */
.person-sec{--bg:var(--paper);--bg-top:#F6F3ED;--wash:linear-gradient(180deg,#F6F3ED 0%,var(--paper) 50%,#EDE8DE 100%);--dab:var(--accent)}
.person-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:36px;align-items:start}
.person-copy{grid-column:1/span 6}
.person-copy .place{margin-top:14px;color:var(--ink-3)}
.person-copy p+p{margin-top:14px}
.person-copy .body{margin-top:clamp(20px,2.4vw,32px);max-width:32em;color:var(--ink-2)}
.person-copy .line{margin-top:20px;font-family:var(--poster);font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:clamp(1.4rem,1rem + 1.4vw,2.2rem);line-height:.92}
.video{grid-column:8/-1;position:relative;margin:0;aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;border:1.5px solid var(--ink);border-radius:4px;background:var(--paper-deep);background-image:var(--grain);background-blend-mode:soft-light;background-size:256px;text-align:center}
.video .corner{position:absolute;width:18px;height:18px;border:2px solid var(--ink)}
.video .corner.tl{top:8px;left:8px;border-right:0;border-bottom:0}.video .corner.tr{top:8px;right:8px;border-left:0;border-bottom:0}.video .corner.bl{bottom:8px;left:8px;border-right:0;border-top:0}.video .corner.br{bottom:8px;right:8px;border-left:0;border-top:0}
.video .mono-fi{width:52px;fill:var(--ink)}
.video p{font-family:var(--poster);font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:clamp(1.3rem,1rem + 1.2vw,2rem);line-height:.92}
.video p span{display:block;color:var(--ink-3)}
.video figcaption{color:var(--ink-3)}
.video .stamp{position:absolute;top:16px;right:16px}
@media (width<=860px){.person-copy,.video{grid-column:1/-1}}

/* ---------- 13. Questions franches ---------- */
.faq-sec{--bg:var(--golden-late);--bg-top:#DBB27A;--wash:linear-gradient(180deg,#DBB27A 0%,var(--golden-late) 40%,#C4915A 100%);--dab:var(--ink);--ink-2:#3F3122;--ink-3:#5A4730;--rule:color-mix(in srgb,var(--ink) 22%,transparent)}
.faq-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:48px}
.faq-head{grid-column:1/span 5;align-self:start;position:sticky;top:100px}
.faq-head .h2{font-size:clamp(2.6rem,1.2rem + 4vw,5.6rem)}
.faq-head .sub{margin-top:20px;font-size:var(--t-lede);color:var(--ink-2);max-width:18em}
.qa{grid-column:7/-1;border-top:2px solid var(--ink)}
.qa details{border-bottom:1px solid var(--rule)}
.qa summary{display:grid;grid-template-columns:2.4rem minmax(0,1fr) 28px;align-items:start;gap:0 10px;padding:22px 0;cursor:pointer;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa .q,.qa .a{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.06em;color:var(--ink-3);line-height:2.2}
.qa summary h3{font-size:1.2rem;font-weight:620;letter-spacing:-.018em;line-height:1.25}
.qa .plus{position:relative;width:28px;height:28px;margin-top:-1px;border:1.5px solid var(--ink);border-radius:50%;justify-self:end}
.qa .plus::before,.qa .plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:var(--ink);transform:translate(-50%,-50%)}
.qa .plus::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .25s var(--ease-out)}
.qa details[open] .plus::after{transform:translate(-50%,-50%) rotate(0)}
.qa .answer{display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:0 10px;padding:0 0 26px}
.qa .answer p{color:var(--ink-2)}
@media (prefers-reduced-motion:no-preference){.qa details[open] .answer{animation:answer-in .35s var(--ease-out) both}}
@keyframes answer-in{0%{opacity:0;transform:translateY(-4px)}}
@media (width<=960px){.faq-head,.qa{grid-column:1/-1;position:static}}

/* ---------- 14. Contact et pied de page (nuit) ---------- */
.closing{--bg:var(--night);--bg-top:#2A2E33;--wash:linear-gradient(180deg,#2A2E33 0%,var(--night) 34%,#15181B 100%);--dab:var(--accent);padding:var(--section) 0 clamp(72px,9vw,140px)}
.closing-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:40px;align-items:end}
.closing-copy{grid-column:1/span 7}
.closing-copy>h3{font-size:clamp(2.6rem,6vw,5rem);line-height:.95;overflow-wrap:anywhere}
.closing h2{font-size:clamp(3.2rem,1rem + 7.4vw,9.6rem);line-height:.84}
.closing .lede{margin-top:32px;max-width:24em;color:var(--night-ink)}
.closing .cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:32px}
.closing .fine{margin-top:22px;color:var(--ink-3)}
.booking{grid-column:8/-1;position:relative;padding:clamp(20px,2.4vw,32px);border:1.5px solid var(--night-rule);border-radius:4px;background:color-mix(in srgb,var(--night-ink) 4%,transparent)}
.booking .stamp{position:absolute;top:-14px;right:18px;background:var(--night);padding:5px 10px;font-size:.66rem}
.booking h3{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.4rem);margin-top:6px}
.booking p{margin-top:12px;color:var(--night-ink-2)}
.booking .slot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:18px}
.booking .slot span{display:block;height:44px;border:1.5px dashed var(--night-rule);border-radius:3px}
.booking .foot{margin-top:16px;color:var(--ink-3)}
@media (width<=900px){.closing-copy,.booking{grid-column:1/-1}.closing h2{font-size:clamp(2.6rem,10vw,4.8rem);overflow-wrap:anywhere}}
.foot{--bg:var(--night);--wash:linear-gradient(180deg,#15181B 0%,var(--night) 40%,#101214 100%);padding:clamp(48px,7vw,96px) 0 clamp(40px,5vw,64px);border-top:1px solid var(--night-rule)}
.sign-off{margin-left:-.04em;font-size:clamp(3rem,.6rem + 10.4vw,11.4rem);line-height:.84}
.sign-off span{white-space:nowrap;color:var(--accent)}
:root[data-piste="vert"] .sign-off span{color:color-mix(in srgb,var(--accent) 60%,var(--paper))}
.sign-sub{margin-top:18px;color:var(--night-ink-2)}
.cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:36px;margin-top:clamp(48px,6vw,88px);padding-top:24px;border-top:1px solid var(--night-rule);font-size:var(--t-small);color:var(--night-ink-2)}
.col{grid-column:span 4;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.col .h{color:var(--night-ink);margin-bottom:6px}
.col a{color:var(--night-ink);display:inline-flex;align-items:center;min-height:32px}
.col p:not(.h){max-width:30em}
.col details summary{cursor:pointer;color:var(--night-ink);list-style:none;min-height:32px;display:inline-flex;align-items:center;text-decoration:underline 1px;text-underline-offset:.2em;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent)}
.col details summary::-webkit-details-marker{display:none}
.col details p{margin-top:8px;max-width:30em}
.credit{margin-top:36px;padding-top:18px;border-top:1px solid var(--night-rule);color:var(--ink-3)}
@media (width<=800px){.sign-off{font-size:calc((100vw - 2 * var(--gutter)) / 3.68)}.col{grid-column:1/-1}.col>a{min-height:44px}}

/* ---------- 15. Divers ---------- */
.noscript-note{padding:12px var(--gutter);background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:.78rem;text-align:center}
@media (prefers-reduced-motion:reduce){
  *,::before,::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .step{--tread:1}
  .lane-bar{transform:none !important}
}

/* ---------- 16. Contenu v4 : bande des métiers, scènes, pour qui, bordereau, frise, calculateur, encadré, cas réel ---------- */
.trades{margin:0 0 clamp(40px,5vw,72px);padding:14px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);color:var(--ink-2);text-align:center;text-wrap:balance;line-height:1.9}
.scenes-sec{--bg:var(--morning);--bg-top:#F7F4EE;--wash:linear-gradient(180deg,#F7F4EE 0%,var(--morning) 40%,var(--paper-deep) 100%);--dab:var(--accent);padding-top:clamp(32px,4vw,56px)}
.scenes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.scene-card{position:relative;display:flex;flex-direction:column;gap:14px;padding:clamp(16px,1.8vw,24px);border:1.5px solid var(--rule-strong);border-radius:4px;background:var(--paper);background-image:var(--grain);background-blend-mode:soft-light;background-size:256px}
.scene-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;color:var(--ink-3)}
.scene-top .stamp{flex:none;margin:-4px -2px 0 0}
.scene-block{display:grid;grid-template-columns:3.6rem minmax(0,1fr);gap:4px 12px;align-items:baseline}
.scene-block>.label{color:var(--ink-3);padding-top:.35em}
.scene-block p{font-size:var(--t-body);line-height:1.5}
.scene-block.avant p{color:var(--ink-2);text-decoration:line-through;text-decoration-color:var(--accent);text-decoration-thickness:1px}
.scene-block.apres p{color:var(--ink);font-weight:460}
.scene-block.apres{padding-top:10px;border-top:1px solid var(--rule)}
.scenes-close{margin-top:clamp(28px,3.4vw,48px);padding-top:22px;border-top:2px solid var(--ink);font-size:var(--t-h3);max-width:22em}
@media (width<=760px){.scenes{grid-template-columns:minmax(0,1fr)}.scene-block{grid-template-columns:minmax(0,1fr);gap:2px}.trades{text-align:left}}

.demo-sec.edge-b::before{--edge-mask:var(--edge-b)}

.who-sec{--bg:var(--golden);--bg-top:#EBD2A3;--wash:linear-gradient(180deg,#EBD2A3 0%,var(--golden) 45%,#DDBA82 100%);--dab:var(--ink);--ink-2:#4A3F30;--ink-3:#6B5B45;--card:var(--paper);--card-edge:color-mix(in srgb,var(--ink) 85%,transparent);--radius:3px 4px 3px 4px/4px 3px 4px 3px}
.who-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.who-card .card-title{font-size:1.15rem}
.who-card .branch-label{margin-top:12px;color:var(--ink-3)}
.who-card .trust-list{margin-top:8px}
.who-card .trust-list li{font-size:.95rem;line-height:1.4;color:var(--ink-2)}
.who-card.plain{border-color:var(--rule-strong);color:var(--ink);--ink-2:color-mix(in srgb,var(--ink) 72%,var(--paper));--ink-3:color-mix(in srgb,var(--ink) 56%,var(--paper))}
.who-card.plain .copy{font-size:1.05rem;margin-top:10px}
.who-card.plain .card-foot{padding-top:10px}
@media (width<=960px){.who-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (width<=600px){.who-cards{grid-template-columns:minmax(0,1fr)}}

.kit-sec{--bg:var(--paper-deep);--bg-top:#EFE9DC;--wash:linear-gradient(180deg,#EFE9DC 0%,var(--paper-deep) 50%,#DED5C2 100%);--dab:var(--accent)}
.slip{position:relative;margin-top:clamp(28px,3vw,44px);padding:clamp(18px,2.4vw,36px) clamp(18px,2.6vw,40px) clamp(18px,2.2vw,32px);border:1.5px solid var(--ink);border-top:0;background-color:var(--kraft);background-image:var(--grain);background-blend-mode:soft-light;background-size:256px;color:var(--ink);--ink-2:#3E2E18;--ink-3:#5E4A2B;--rule:color-mix(in srgb,var(--ink) 26%,transparent)}
.slip::before{content:"";position:absolute;left:-1.5px;right:-1.5px;bottom:100%;height:22px;background-color:var(--kraft);background-image:var(--grain);background-size:256px;background-blend-mode:soft-light;-webkit-mask:var(--edge-b) 0 100%/700px 100% repeat-x;mask:var(--edge-b) 0 100%/700px 100% repeat-x;pointer-events:none}
.slip-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:14px;border-bottom:2px solid var(--ink);color:var(--ink-2)}
.slip-head .stamp{flex:none;margin:-6px 0 -10px}
.slip-lines{margin-top:4px}
.slip-line{display:grid;grid-template-columns:2.2rem 20px minmax(0,1fr);gap:4px 14px;align-items:start;padding:16px 0;border-bottom:1px solid var(--rule)}
.slip-line .num{color:var(--ink-3);padding-top:.25em}
.slip-line .box{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-top:2px;border:1.5px solid var(--ink);border-radius:2px;background:color-mix(in srgb,var(--paper) 55%,transparent)}
.slip-line .box .od-icon{--od-icon-size:14px}
.slip-text{display:block}
.slip-text strong{display:block;font-weight:620;font-size:1.08rem;line-height:1.3}
.slip-text span{display:block;margin-top:4px;color:var(--ink-2);font-size:.95rem;line-height:1.45}
.slip-foot{margin-top:16px;color:var(--ink-2)}
.slip.case{margin-top:0}
.slip.case .case-text{margin-top:18px;font-size:var(--t-lede);line-height:1.45;max-width:38em}
.case-sec{--bg:var(--paper);--bg-top:#F6F3ED;--wash:linear-gradient(180deg,#F6F3ED 0%,var(--paper) 50%,#EDE8DE 100%);--dab:var(--accent)}
.case-sec .person-grid{margin-top:clamp(56px,7vw,112px);padding-top:clamp(32px,4vw,56px);border-top:1.5px solid var(--ink)}
.person-copy .to-validate{position:relative}
.person-copy .to-validate .stamp{display:inline-block;margin-left:10px;vertical-align:middle;font-size:.5rem;transform:rotate(-3deg)}
@media (width<=640px){.slip{padding:16px 14px}.slip-head{flex-direction:column}.slip-head .stamp{margin:4px 0 0;align-self:flex-start}.slip-line{grid-template-columns:2rem 18px minmax(0,1fr);gap:2px 10px}}

.method-sec{--bg:var(--paper);--bg-top:#F6F3ED;--wash:linear-gradient(180deg,#F6F3ED 0%,var(--paper) 50%,#ECE6D8 100%)}
.frise{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gutter);row-gap:24px;margin-top:clamp(48px,6vw,88px);padding-top:28px;border-top:2px solid var(--ink)}
.temps{position:relative;padding-top:18px}
.temps::before{content:"";position:absolute;left:0;top:-36px;width:14px;height:14px;border-radius:50%;background:var(--ink)}
.temps .when{display:block;font-size:1.25rem;font-stretch:85%}
.temps p{margin-top:10px;color:var(--ink-2);font-size:.95rem;line-height:1.5;max-width:24em}
.temps .your-time{display:block;margin-top:12px;padding-top:10px;border-top:1px solid var(--rule);color:var(--ink)}
@media (width<=860px){.frise{grid-template-columns:minmax(0,1fr);border-top:0;padding-top:0;margin-left:7px;border-left:2px solid var(--ink);row-gap:0}.temps{padding:0 0 28px 24px}.temps::before{left:-8px;top:4px}.temps:last-child{padding-bottom:4px}}

.calc-sec{--bg:var(--golden-late);--bg-top:#DBB27A;--wash:linear-gradient(180deg,#DBB27A 0%,var(--golden-late) 40%,#C4915A 100%);--dab:var(--ink);--ink-2:#3F3122;--ink-3:#5A4730;--rule:color-mix(in srgb,var(--ink) 22%,transparent)}
.calc{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--gutter);row-gap:32px;align-items:start}
.calc-controls{display:flex;flex-direction:column;gap:clamp(20px,2.4vw,32px);padding:clamp(18px,2.2vw,30px);border:1.5px solid var(--ink);border-radius:4px;background:var(--paper);background-image:var(--grain);background-blend-mode:soft-light;background-size:256px;--ink-2:color-mix(in srgb,var(--ink) 72%,var(--paper));--ink-3:color-mix(in srgb,var(--ink) 56%,var(--paper))}
.calc-controls .field{display:flex;flex-direction:column;gap:8px}
.calc-controls label,.calc-controls .field-label{font-weight:560;line-height:1.35}
.range-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px}
.range-row output{font-size:1.6rem;font-stretch:85%;min-width:4.2em;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.calc-controls .hint{color:var(--ink-3)}
.calc-controls .sizes{display:inline-flex;align-self:flex-start;border:1.5px solid var(--ink);border-radius:3px;overflow:hidden}
.calc-controls .sizes button{min-height:40px;padding:0 14px;border:0;background:var(--paper);cursor:pointer;font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.calc-controls .sizes button+button{border-left:1.5px solid var(--ink)}
.calc-controls .sizes button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.calc input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:30px;margin:0;background:transparent;cursor:pointer}
.calc input[type="range"]::-webkit-slider-runnable-track{height:3px;background:var(--ink);border-radius:2px}
.calc input[type="range"]::-moz-range-track{height:3px;background:var(--ink);border-radius:2px}
.calc input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;margin-top:-9.5px;border:2px solid var(--ink);border-radius:3px;background:var(--paper);transition:transform .16s var(--ease-out)}
.calc input[type="range"]::-moz-range-thumb{width:18px;height:18px;border:2px solid var(--ink);border-radius:3px;background:var(--paper)}
@media (hover:hover){.calc input[type="range"]:hover::-webkit-slider-thumb{transform:scale(1.08)}}
.calc input[type="range"]:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.calc-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.calc-result{display:flex;flex-direction:column;gap:8px;padding:clamp(16px,1.8vw,24px);border:1.5px solid var(--ink);border-radius:4px;background:var(--paper);background-image:var(--grain);background-blend-mode:soft-light;background-size:256px;box-shadow:0 16px 28px -22px color-mix(in srgb,var(--ink) 55%,transparent);--ink-2:color-mix(in srgb,var(--ink) 72%,var(--paper));--ink-3:color-mix(in srgb,var(--ink) 56%,var(--paper))}
.calc-result:nth-child(3){grid-column:1/-1}
.calc-result>.label{color:var(--ink-3)}
.calc-value{font-size:clamp(2.6rem,1.6rem + 3.2vw,5.2rem);line-height:.9;font-variant-numeric:tabular-nums;white-space:nowrap;margin-top:4px;text-transform:none}
.range-row output{text-transform:none}
.calc-result .formula{color:var(--ink-2);text-transform:none;letter-spacing:.02em;font-size:.74rem}
.calc-sentence{font-size:1.05rem;line-height:1.45;max-width:32em}
.calc-sentence strong{font-weight:640}
.calc-check{color:var(--ink-2);font-size:var(--t-small)}
.calc-sec .small-print{margin-top:clamp(20px,2.4vw,32px)}
@media (width<=960px){.calc{grid-template-columns:minmax(0,1fr)}}
@media (width<=640px){.calc-results{grid-template-columns:minmax(0,1fr)}.range-row output{font-size:1.3rem;min-width:3.6em}}

.offer-step .why{margin-top:12px;padding:10px 12px;border:1px solid var(--rule);border-radius:3px;background:color-mix(in srgb,var(--paper-deep) 50%,var(--paper));font-size:.95rem;line-height:1.4}
.offer-step .why .label{display:block;color:var(--ink-3);margin-bottom:4px}
.offer-step .why .link{color:var(--ink)}
.offer-foot{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--gutter);row-gap:20px;align-items:start;margin-top:clamp(28px,3vw,44px)}
.not-sold{padding:clamp(16px,1.8vw,24px);border:1.5px solid var(--ink);border-radius:4px;font-family:var(--mono);font-size:.8rem;line-height:1.55;color:var(--ink)}
.not-sold .label{display:block;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--rule-strong)}
.not-sold ul{display:flex;flex-direction:column;gap:6px}
.not-sold li{display:flex;gap:10px}
.not-sold li::before{content:"—";flex:none;color:var(--accent)}
.offer-foot .small-print{margin-top:0}
@media (width<=860px){.offer-foot{grid-template-columns:minmax(0,1fr)}}

.game-sec.edge-b::before{--edge-mask:var(--edge-b)}
.limits-sec.edge::before{--edge-mask:var(--edge-a)}

/* ---------- 17. Pages : en-tête, fil d'Ariane, bandes, cartes de liens, prose ---------- */
.page-inner .head-sec{padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(48px,6vw,96px)}
.page-inner .head-sec.person-sec{padding-bottom:var(--section)}
.head-sec{--bg:var(--morning);--bg-top:#F7F4EE;--wash:linear-gradient(180deg,#F7F4EE 0%,var(--morning) 50%,var(--paper-deep) 100%);--dab:var(--accent)}
.page-head{display:grid;grid-template-columns:minmax(0,1fr);row-gap:24px}
.page-head.split{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:end}
.page-head.split>.sec-main{grid-column:1/span 8}
.page-head.split>.sec-side{grid-column:10/-1;justify-self:start}
.page-head .h1{font-size:clamp(2.6rem,1.3rem + 5.4vw,6.4rem);max-width:12em}
.page-head .chapo{margin-top:clamp(18px,2vw,28px);max-width:36em;color:var(--ink)}
.crumbs{margin-bottom:18px;color:var(--ink-3)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:4px 8px}
.crumbs li+li::before{content:"›";margin-right:8px;color:var(--ink-3)}
.crumbs a{color:var(--ink-2);text-decoration:none;min-height:24px;display:inline-flex;align-items:center}
.crumbs a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:.3em}
.crumbs [aria-current]{color:var(--ink)}
@media (width<=860px){.page-head.split>.sec-main,.page-head.split>.sec-side{grid-column:1/-1}}

.who-band{display:grid;gap:clamp(20px,3vw,40px)}
.who-links{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.3vw,18px)}
.who-link{display:flex;flex-direction:column;gap:8px;min-height:100%;padding:clamp(14px,1.6vw,22px);border:1.5px solid var(--ink);border-radius:4px;background:var(--paper);background-image:var(--grain);background-blend-mode:soft-light;background-size:256px;color:var(--ink);text-decoration:none;transition:background-color .15s,color .15s,transform .16s var(--ease-out)}
.who-link .poster{font-size:clamp(1.2rem,1rem + .8vw,1.7rem);font-stretch:85%;font-weight:740}
.who-link .label{color:var(--ink-3)}
@media (hover:hover){.who-link:hover{background:var(--ink);color:var(--paper)}.who-link:hover .label{color:color-mix(in srgb,var(--paper) 70%,transparent)}}
.who-link:active{transform:translateY(1px)}
.who-other-line{max-width:46em;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center}
.who-other-line strong{color:var(--ink)}
@media (width<=1100px){.who-links{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (width<=640px){.who-links{grid-template-columns:minmax(0,1fr)}}

.slip--summary .slip-line{padding:12px 0}
.slip-more{margin-top:14px}
.timeline--summary .offer-step .why{margin-top:14px}
.price--small{font-size:clamp(1.5rem,1.1rem + 1.2vw,2.2rem);white-space:normal}
.timeline-more{margin-top:20px}
.faq-more,.method-more{margin-top:18px}

.cta-sec{--bg:var(--night);--bg-top:#2A2E33;--wash:linear-gradient(180deg,#2A2E33 0%,var(--night) 40%,#15181B 100%);--dab:var(--accent);padding:clamp(56px,7vw,110px) 0}
.cta-band{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px clamp(24px,4vw,64px)}
.cta-title{font-size:clamp(2rem,1.2rem + 3vw,4.2rem);line-height:.88}
.cta-band .lede{margin-top:12px;color:var(--night-ink-2);max-width:30em}
@media (width<=760px){.cta-band{grid-template-columns:minmax(0,1fr)}}

.frame-sec{--bg:var(--paper-deep);--bg-top:#EFE9DC;--wash:linear-gradient(180deg,#EFE9DC 0%,var(--paper-deep) 50%,#DED5C2 100%);--dab:var(--accent)}
.frame-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.frame-step{padding:clamp(16px,1.8vw,24px);border:1.5px solid var(--ink);border-radius:4px;background:var(--paper);background-image:var(--grain);background-blend-mode:soft-light;background-size:256px}
.frame-step .n{color:var(--ink-3)}
.frame-step h3{font-size:clamp(1.4rem,1.1rem + 1vw,2rem);margin-top:10px}
.frame-step p{margin-top:10px;color:var(--ink-2);font-size:.95rem;line-height:1.5}
@media (width<=960px){.frame-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (width<=560px){.frame-steps{grid-template-columns:minmax(0,1fr)}}

.name-sec{--bg:var(--morning);--bg-top:#F7F4EE;--wash:linear-gradient(180deg,#F7F4EE 0%,var(--morning) 50%,var(--paper-deep) 100%);--dab:var(--accent)}
.senses{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:var(--gutter);row-gap:32px;align-items:start}
.senses-sign{margin:0;max-width:360px}
.senses-sign svg{width:100%;height:auto;fill:var(--ink)}
.senses-list{display:flex;flex-direction:column;border-top:2px solid var(--ink)}
.senses-list li{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:16px;padding:22px 0;border-bottom:1px solid var(--rule);align-items:start}
.senses-list .part{font-size:clamp(2.4rem,1.6rem + 2.4vw,4.2rem);line-height:.85;text-transform:none;font-stretch:80%}
.senses-list .part.ia{color:var(--accent)}
.senses-list .sense strong{display:block;color:var(--ink-3);margin-bottom:6px}
.senses-list .sense p{color:var(--ink-2)}
@media (width<=860px){.senses{grid-template-columns:minmax(0,1fr)}.senses-sign{max-width:240px}}

.case-sec .slip.case{margin-top:0}
.limits-sec--short .cards--two{grid-template-columns:repeat(2,minmax(0,1fr))}
.limits-sec--short .card .copy{font-size:1.02rem}
.limits-more{margin-top:20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;color:var(--night-ink-2)}
.limits-more .link{color:var(--night-ink)}
@media (width<=760px){.limits-sec--short .cards--two{grid-template-columns:minmax(0,1fr)}}

.links-sec{--bg:var(--paper-deep);--bg-top:#EFE9DC;--wash:linear-gradient(180deg,#EFE9DC 0%,var(--paper-deep) 50%,#DED5C2 100%);--dab:var(--ink)}
.links-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:var(--gutter);row-gap:28px;align-items:start}
.link-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.3vw,18px)}
.link-card{display:flex;flex-direction:column;gap:6px;height:100%;padding:clamp(14px,1.6vw,22px);border:1.5px solid var(--ink);border-radius:4px;background:var(--paper);background-image:var(--grain);background-blend-mode:soft-light;background-size:256px;color:var(--ink);text-decoration:none;transition:background-color .15s,color .15s}
.link-card .label{color:var(--ink-3)}
.link-card strong{font-family:var(--poster);font-weight:740;font-stretch:85%;text-transform:uppercase;letter-spacing:.02em;font-size:1.05rem;line-height:1.2}
.link-card>span:last-child:not(.label){color:var(--ink-2);font-size:.92rem}
@media (hover:hover){.link-card:hover{background:var(--ink);color:var(--paper)}.link-card:hover .label,.link-card:hover>span{color:color-mix(in srgb,var(--paper) 72%,transparent)}}
@media (width<=860px){.links-grid{grid-template-columns:minmax(0,1fr)}}
@media (width<=560px){.link-cards{grid-template-columns:minmax(0,1fr)}}
.notfound-links{margin-top:clamp(28px,3vw,44px);grid-template-columns:repeat(3,minmax(0,1fr))}
@media (width<=860px){.notfound-links{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (width<=560px){.notfound-links{grid-template-columns:minmax(0,1fr)}}

.prose-sec{--bg:var(--paper-deep);--bg-top:#EFE9DC;--wash:linear-gradient(180deg,#EFE9DC 0%,var(--paper-deep) 50%,#DED5C2 100%)}
.prose{max-width:46em}
.prose-block+.prose-block{margin-top:clamp(28px,3.4vw,48px);padding-top:clamp(20px,2.4vw,32px);border-top:1.5px solid var(--ink)}
.prose-block h2{font-size:var(--t-h3)}
.prose-block p{margin-top:12px;color:var(--ink-2)}
.legal-list{margin-top:14px;display:flex;flex-direction:column}
.legal-field{display:grid;grid-template-columns:11rem minmax(0,1fr);gap:4px 16px;padding:12px 0;border-top:1px solid var(--rule)}
.legal-field .label{color:var(--ink-3)}
.to-fill{color:var(--ink-2)}
.to-fill .stamp{margin-left:8px;vertical-align:middle;font-size:.5rem}
@media (width<=640px){.legal-field{grid-template-columns:minmax(0,1fr)}}

.carnet-sec{--bg:var(--paper-deep);--bg-top:#EFE9DC;--wash:linear-gradient(180deg,#EFE9DC 0%,var(--paper-deep) 50%,#DED5C2 100%)}
.carnet-empty{margin-top:0}
.carnet-empty .slip-sub{margin-top:18px;color:var(--ink-3)}
.upcoming{margin-top:8px;display:flex;flex-direction:column}
.upcoming li{display:grid;grid-template-columns:2.2rem minmax(0,1fr) auto;gap:10px 14px;align-items:baseline;padding:12px 0;border-top:1px solid var(--rule)}
.upcoming .num{color:var(--ink-3)}
.upcoming .soon{color:var(--ink-3)}
.article-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.article-card a{display:flex;flex-direction:column;gap:8px;height:100%;padding:clamp(16px,1.8vw,24px);border:1.5px solid var(--ink);border-radius:4px;background:var(--paper);color:var(--ink);text-decoration:none}
.article-card .poster{font-size:1.3rem;font-stretch:85%;font-weight:740}
.article-grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,3fr);column-gap:var(--gutter);row-gap:32px;align-items:start}
.article-body h2{margin-top:clamp(28px,3vw,44px)}
.article-body p,.article-body li{margin-top:12px;color:var(--ink-2);font-size:1.05rem;line-height:1.6}
.article-aside{position:sticky;top:100px;padding:18px;border:1.5px solid var(--ink);border-radius:4px;background:var(--paper)}
.article-aside .label{color:var(--ink-3);margin-top:12px}
.article-aside .label:first-child{margin-top:0}
@media (width<=860px){.article-grid{grid-template-columns:minmax(0,1fr)}.article-aside{position:static}.article-list{grid-template-columns:minmax(0,1fr)}}

.foot-top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px var(--gutter)}
.foot-pile{width:clamp(120px,14vw,200px);height:auto;fill:var(--night-ink)}
.cols--5 .col{grid-column:span 2}
.cols--5 .col:nth-child(4),.cols--5 .col:nth-child(5){grid-column:span 3}
.col a{text-decoration:underline 1px;text-underline-offset:.2em;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent)}
@media (width<=800px){.cols--5 .col,.cols--5 .col:nth-child(4),.cols--5 .col:nth-child(5){grid-column:1/-1}.foot-top{grid-template-columns:minmax(0,1fr)}.foot-pile{width:120px}}
.demo-shell--preview .demo-panels{grid-template-columns:minmax(0,1fr)}
.demo-shell--preview .assistant-panel{max-width:760px}
.band .btn{flex:none}

/* ---------- 18. Le carnet : articles, encadrés, liste ---------- */
.article-head{padding-bottom:clamp(32px,4vw,56px)}
.article-head .page-head .h1{max-width:16em;font-size:clamp(2.2rem,1.2rem + 4.2vw,5.2rem)}
.article-hero{position:relative;margin:clamp(24px,3vw,40px) 0 0;overflow:hidden;border:1.5px solid var(--ink);border-radius:4px;aspect-ratio:21/9;background:var(--ink)}
.article-hero img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
@media (width<=760px){.article-hero{aspect-ratio:4/3}}
.article-sec{--bg:var(--morning);--bg-top:#F7F4EE;--wash:linear-gradient(180deg,#F7F4EE 0%,var(--morning) 50%,var(--paper-deep) 100%);--dab:var(--accent)}
.article-body{max-width:46em}
.article-body h2{margin-top:clamp(36px,4vw,56px);padding-top:18px;border-top:1.5px solid var(--ink)}
.article-body h2:first-child{margin-top:0;padding-top:0;border-top:0}
.article-body p strong{color:var(--ink);font-weight:640}
.art-list{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.art-list li{display:flex;gap:12px;margin-top:0;align-items:baseline}
.art-list li::before{content:"";flex:none;width:10px;height:2px;background:var(--ink);transform:translateY(-.3em)}
.art-list>li>span:last-child{display:block}
.art-steps li::before{display:none}
.art-steps .num{flex:none;color:var(--ink-3);padding-top:.2em;width:2.2rem}
.art-box{margin:clamp(22px,2.6vw,36px) 0}
.article-body .art-box p{margin-top:0;font-size:1rem}
.article-body .slip{margin-top:clamp(28px,3vw,44px)}
.article-body .slip .slip-text strong{font-size:1rem;font-weight:560;color:var(--ink)}
.art-model .file-body{max-height:none;margin-top:10px;font-size:.8rem;color:var(--ink)}
.art-model-foot{margin-top:12px}
.art-note{position:relative;display:grid;gap:8px;padding:16px 18px;border:1.5px solid var(--ink);border-radius:4px;background:var(--paper);background-image:var(--grain);background-blend-mode:soft-light;background-size:256px}
.art-note>.label{color:var(--ink-3)}
.art-note p{padding-right:8em;color:var(--ink-2)}
.art-note .stamp{position:absolute;top:12px;right:12px}
.art-table{padding:14px 16px;border:1.5px solid var(--ink);border-radius:4px;background:var(--paper)}
.art-table>.label{color:var(--ink-3)}
.art-table table{width:100%;margin-top:8px;border-collapse:collapse;font-family:var(--mono);font-size:.78rem;line-height:1.45}
.art-table th,.art-table td{text-align:left;padding:8px 10px 8px 0;vertical-align:top;border-top:1px solid var(--rule)}
.art-table thead th{border-top:0;font-weight:500;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;font-size:.66rem}
.art-table tbody th{font-weight:500;color:var(--ink)}
.art-table td{color:var(--ink-2)}
.art-table .small-print{margin-top:10px}
.art-sources{margin-top:14px}
.art-sources .label{display:inline;margin-right:6px;color:var(--ink-3)}
.art-sources a{color:var(--ink-2)}
.article-aside{position:sticky;top:100px;padding:18px;border:1.5px solid var(--ink);border-radius:4px;background:var(--paper);background-image:var(--grain);background-blend-mode:soft-light;background-size:256px;z-index:1}
.article-grid{align-items:start}
.article-sec{overflow:clip}
.article-aside p{margin-top:2px;font-size:.95rem}
.article-aside .label{color:var(--ink-3);margin-top:14px}
.article-aside .label:first-child{margin-top:0}
.article-end .lede{margin-top:16px;max-width:26em}
.link-stack{display:grid;gap:clamp(10px,1.3vw,18px)}
.link-cards--three{grid-template-columns:repeat(3,minmax(0,1fr))}
.link-cards--articles{grid-template-columns:repeat(2,minmax(0,1fr))}
.link-cards--articles .link-card{background:var(--paper-deep)}
.link-cards--articles .link-card strong{font-size:1.1rem}
@media (width<=960px){.link-cards--three{grid-template-columns:minmax(0,1fr)}}
@media (width<=600px){.link-cards--articles{grid-template-columns:minmax(0,1fr)}}
.article-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.article-card a{gap:10px;background-image:var(--grain);background-blend-mode:soft-light;background-size:256px;transition:background-color .15s,color .15s}
.article-card .label{color:var(--ink-3)}
.article-card .poster{font-size:clamp(1.25rem,1.05rem + .7vw,1.7rem);line-height:.95;text-wrap:balance}
.article-card .desc{color:var(--ink-2);font-size:.95rem;line-height:1.45}
.article-card .metier{margin-top:auto;padding-top:10px;border-top:1px solid var(--rule);color:var(--ink)}
@media (hover:hover){.article-card a:hover{background-color:var(--ink);color:var(--paper)}.article-card a:hover .label,.article-card a:hover .desc,.article-card a:hover .metier{color:color-mix(in srgb,var(--paper) 72%,transparent)}.article-card a:hover .metier{border-top-color:color-mix(in srgb,var(--paper) 30%,transparent)}}
@media (width<=860px){.article-list{grid-template-columns:minmax(0,1fr)}.article-aside{position:static}}
@media (width<=640px){.art-note p{padding-right:0}.art-note .stamp{position:static;justify-self:start;margin-top:4px}.art-table th,.art-table td{display:block;padding:4px 0;border-top:0}.art-table tbody tr{display:block;padding:8px 0;border-top:1px solid var(--rule)}.art-table thead{display:none}}

/* ---------- 19. Le face à face ---------- */
.match-sec{--bg:var(--night);--bg-top:#2A2E33;--wash:linear-gradient(180deg,#2A2E33 0%,var(--night) 40%,#15181B 100%);--dab:var(--accent)}
.match{border:1.5px solid var(--night-rule);border-radius:4px;padding:clamp(16px,2.2vw,32px);background:color-mix(in srgb,var(--night-ink) 3%,transparent)}
.match-top{display:grid;gap:10px;padding-bottom:clamp(16px,2vw,24px);border-bottom:1px solid var(--night-rule);text-align:center;justify-items:center}
.match-counter{color:var(--night-ink-2)}
.match-q{font-size:clamp(1.6rem,1.1rem + 2.2vw,3.2rem);line-height:.92;color:var(--night-ink);max-width:16em;min-height:1.9em}
.match-q::before{content:"« "}.match-q::after{content:" »"}
.match-tabs{display:none}
.match-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:clamp(16px,2vw,24px)}
.match-col{display:flex;flex-direction:column;gap:12px;padding:0 clamp(12px,2vw,28px);min-width:0;transition:opacity .4s var(--ease-out)}
.match-col.sans{padding-left:0}
.match-col.avec{padding-right:0;border-left:2px solid var(--accent)}
.match-col .col-label{color:var(--night-ink-2);min-height:2.6em}
.match-col.is-dim{opacity:.45}
.match-sheet{position:relative;flex:1;display:flex;flex-direction:column;gap:12px;min-height:260px;padding:18px 18px 22px;border:1.5px solid var(--rule-strong);border-radius:3px;background:var(--paper);background-image:var(--grain);background-blend-mode:soft-light;background-size:256px;color:var(--ink);--ink-2:color-mix(in srgb,var(--ink) 72%,var(--paper));--ink-3:color-mix(in srgb,var(--ink) 56%,var(--paper));--rule:color-mix(in srgb,var(--ink) 16%,transparent);--stamp:color-mix(in srgb,var(--accent) 78%,var(--ink))}
.match-answer{display:flex;flex-direction:column;gap:10px;font-size:1rem;line-height:1.5}
.match-answer p{min-height:1.5em}
.match-answer .answer-paragraph{padding:10px 12px;border-left:2px solid var(--ink);background:color-mix(in srgb,var(--paper-deep) 50%,var(--paper))}
.match-answer .doc-title{font-family:var(--poster);font-weight:740;font-stretch:85%;text-transform:uppercase;letter-spacing:.03em;font-size:1rem;line-height:1.2}
.match-answer .doc-sub{margin-top:4px;color:var(--ink-2);font-size:.92rem}
.match-answer .doc-label{color:var(--ink-3);min-height:0}
.match-answer .doc-list{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.match-answer .doc-list li{display:flex;gap:10px;min-height:1.5em;font-size:.95rem;line-height:1.45}
.match-answer .doc-list li::before{content:"";flex:none;width:10px;height:2px;margin-top:.72em;background:var(--ink)}
.match-template{font-family:var(--mono);font-size:.82rem;line-height:1.7;color:var(--ink-2)}
.match-template p{min-height:1.7em}
.match-sources{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:10px;border-top:1px solid var(--rule)}
.match-sources:empty{display:none}
.match-explain{color:var(--stamp);padding-right:5.5em}
.match-stamp{position:static;align-self:flex-start;font-size:.62rem;padding:4px 8px}
.match-sheet .ring{position:absolute;inset:-7px;width:calc(100% + 14px);height:calc(100% + 14px);pointer-events:none;overflow:visible}
.match-sheet .ring path{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset .7s var(--ease-out) .05s,opacity .16s var(--ease-out)}
.match-col.is-chosen .ring path{stroke-dashoffset:0;opacity:1}
.match-choice{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px clamp(12px,2vw,28px);margin-top:clamp(16px,2vw,24px)}
.match-choice .btn{width:100%;justify-content:center;white-space:normal;text-align:left;height:auto;min-height:56px;padding-top:10px;padding-bottom:10px}
.match-choice .btn[aria-pressed="true"]{--btn-bg:var(--night-ink);--btn-fg:var(--ink);box-shadow:none}
.match-choice .btn[disabled]{opacity:1;cursor:default}
.match-choice .btn[disabled]:not([aria-pressed="true"]){opacity:.45}
.match-line{margin-top:16px;padding:12px 14px;border-left:2px solid var(--accent);color:var(--night-ink)}
.match-actions{display:flex;justify-content:center;margin-top:clamp(16px,2vw,24px)}
.match-end{display:grid;gap:16px;margin-top:clamp(20px,2.6vw,36px);padding-top:clamp(20px,2.6vw,36px);border-top:2px solid var(--accent);text-align:center;justify-items:center}
.match-score{font-size:clamp(1.8rem,1.1rem + 3vw,4.2rem);line-height:.9;color:var(--night-ink);max-width:14em}
.match-end .lede{color:var(--night-ink-2);max-width:26em}
.match-end .cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 20px}
.match-note{margin-top:18px;color:var(--night-ink-2)}
.match-simulation{margin:0 0 22px;color:var(--night-ink-2);max-width:70ch}
.match-source-dialog{width:min(720px,calc(100% - 32px));max-height:85dvh;margin:auto;padding:clamp(20px,4vw,36px);border:1px solid var(--ink);border-radius:4px;background:var(--paper);color:var(--ink)}
.match-source-dialog::backdrop{background:rgb(0 0 0 / .65)}
.match-source-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px}
.match-source-head h3{font-family:var(--mono);font-size:1rem;overflow-wrap:anywhere;min-width:0}
.match-source-dialog .small-print{color:var(--ink)}
.match-source-dialog pre{white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--sans);font-size:1rem;line-height:1.6;margin-top:20px}
.match-sec{padding-block:clamp(64px,7vw,112px);scroll-margin-top:72px}
@media(width<=560px){.match-source-head{align-items:flex-start;flex-direction:column}.match-source-head .btn{min-height:44px}}
@media (prefers-reduced-motion:no-preference){.js .match-sources .source-button{animation:source-in .5s var(--ease-out) both;animation-delay:calc(var(--i,0) * 120ms)}}
:root[data-motion="reduce"] .match-sheet .ring path{transition:none}
@media (prefers-reduced-motion:reduce){.match-sheet .ring path{transition:none}}
@media (width<=860px){
  .match-tabs{display:flex;margin-top:16px;border-bottom:1.5px solid var(--night-rule)}
  .match-tabs button{flex:1;min-height:48px;border:0;background:none;cursor:pointer;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--night-ink-2);border-bottom:2px solid transparent;margin-bottom:-1.5px}
  .match-tabs button[aria-selected="true"]{color:var(--night-ink);border-bottom-color:var(--accent)}
  .match-cols{grid-template-columns:minmax(0,1fr);margin-top:14px}
  .match-col{padding:0}
  .match-col.avec{border-left:0}
  .match[data-view="sans"] .match-col.avec,.match[data-view="avec"] .match-col.sans{display:none}
  .match-col.is-dim{opacity:1}
  .match-col .col-label{min-height:0}
  .match-choice{grid-template-columns:minmax(0,1fr)}
  .match-sheet{min-height:200px}
}
@media (width<=560px){.match-choice .btn .btn-meta{display:inline-flex}.match-answer,.match-explain{padding-right:0}.match-stamp{position:static;align-self:flex-start;margin-top:-4px}}

/* ---------- 20. Escalier photo : repères sur les marches, rangée sous la photo sur mobile ---------- */
.landscape-block{display:grid;gap:12px}
.stops-row{display:none}
@media (width<=700px){
  .stops{display:none}
  .landscape{aspect-ratio:1916/821;height:auto}
  .landscape img{object-position:50% 50%}
  .stops-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .stops-row .stop{width:100%;padding:8px 12px 8px 10px;white-space:normal}
  .stops-row .stop .name{display:inline}
  .stops-row .stop::after{display:none}
}