/* OYEE — the site around the experience («Pièce par pièce», design spec §2, §7, §8, §9).
   Every page except the homepage. Same tokens, faces and grid as public/css/flow.css.
   Ink is what is set. Vermilion is what is in human hands right now (your mark, your
   booking). A hairline is what is still open. Georgia is the voice; Helvetica/Arial the
   instrument. No web fonts, shadows, radii, gradients, monospace or uppercase.
   CSP: no inline styles anywhere; this file is the only stylesheet sales pages load.

   Scope. Pages rebuilt in the new vocabulary carry body.site. The chrome (.site-top,
   .site-foot) is styled wherever this file loads: sales pages, and pages whose bodies
   still use older component CSS (lab, course, library), whose tokens the aliases in §1
   re-point to the new palette. Never use var(--hair) or var(--line) in a rule here: the
   older stylesheets give those names other meanings (a colour, a border shorthand). */

/* ---------- 0. Tokens (verbatim: design spec §2 and §5.2) ---------- */
:root{
  --paper:#f3efe5; --paper-hi:#faf7f0; --paper-lo:#e8e2d4;
  --ink:#24241f; --ink-2:#57544c; --ink-3:#7d796e; --rule:#cdc7b8;
  --vermilion:#b73521; --yellow:#edc955; --sage:#dce3d3;
  --voice:Georgia, "Times New Roman", serif;
  --tool:"Helvetica Neue", Helvetica, Arial, sans-serif;
  --fs-cover:clamp(2.5rem, 1.479rem + 4.19vw, 5.25rem);
  --fs-question:clamp(2.25rem, 1.414rem + 3.429vw, 4.5rem);
  --fs-answer:clamp(1.875rem, 1.318rem + 2.286vw, 3.375rem);
  --fs-h2:clamp(1.75rem, 1.379rem + 1.524vw, 2.75rem);
  --fs-choice:clamp(1.375rem, 1.143rem + 0.952vw, 2rem);
  --fs-material:clamp(1.5rem, 1.129rem + 1.524vw, 2.5rem);
  --fs-piece:clamp(1.125rem, 0.939rem + 0.762vw, 1.625rem);
  --fs-lead:clamp(1.1875rem, 1.071rem + 0.476vw, 1.5rem);
  --fs-body:clamp(1.0625rem, 1.016rem + 0.19vw, 1.1875rem);
  --fs-num-lg:clamp(1.75rem, 1.379rem + 1.524vw, 2.75rem);
  --fs-num:clamp(0.875rem, 0.829rem + 0.19vw, 1rem);
  --fs-ui:clamp(1rem, 0.977rem + 0.095vw, 1.0625rem);
  --fs-small:clamp(0.875rem, 0.852rem + 0.095vw, 0.9375rem);
}
@media (max-height:560px){:root{--fs-cover:2rem; --fs-question:1.875rem; --fs-answer:1.5rem; --fs-material:1.375rem; --fs-piece:1.0625rem}}
:root{
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:144px;
  --margin: clamp(1.25rem, 0.229rem + 4.19vw, 4rem);   /* 20 → 64 */
  --gap:    clamp(1rem, 0.814rem + 0.762vw, 1.5rem);   /* 16 → 24 */
  --chrome-top: 72px; --chrome-bottom: 80px;           /* ≥1024 */
  --hair: 1px; --line: 2px; --weight-max: 8px;         /* 1px structure, 2px human marks & focus, bets ≤ 8px */
  --radius: 0;
  --z-slide:1; --z-chrome:20; --z-flight:30; --z-popover:40; --z-skip:50; /* <dialog> uses the top layer */
}
@media (max-width:1023px){ :root{ --chrome-top:64px; --chrome-bottom:72px; } }
@media (max-width:599px) { :root{ --chrome-top:56px; --chrome-bottom:64px; } }
@media (max-height:560px){ :root{ --chrome-top:48px; --chrome-bottom:52px; } }
:root{
  --ease-out:cubic-bezier(.16,1,.3,1);    /* arrive and settle */
  --ease-in:cubic-bezier(.55,0,.75,.2);   /* leave */
  --ease-inout:cubic-bezier(.65,0,.35,1); /* A → B: FLIP, docking, path */
  --t-state:160ms; --t-move:360ms; --t-enter:520ms; --t-leave:240ms; --t-draw:900ms; --t-path:1600ms;
}
/* Grid §2.5: the margin is 16px at 360 and below. */
@media (max-width:360px){:root{--margin:16px}}

/* ---------- 1. Legacy aliases and site variables ---------- */
/* Older component CSS (studio, immersive, course, world, machine, discovery, library)
   inherits the new look: vermilion for the human act, the two faces, no mono, no blue. */
:root{--red:var(--vermilion); --serif:var(--voice); --sans:var(--tool); --mono:var(--tool); --muted:var(--ink-2); --blue:var(--ink)}
/* --line is a width in the spec but a colour in the older stylesheets. */
body:not(.site){--line:var(--rule)}
/* The older stylesheets ring focus in var(--blue) (legacy-studio.css), now ink. On an ink surface (an older page's
   .band-ink) the ring turns paper: 13.58:1, where ink would vanish and vermilion is never set on ink (spec §2.2).
   The library draws its .band-ink on paper and rings it in vermilion itself (public/css/library.css). */
body:not(.site, [data-library]) .band-ink :focus-visible{outline-color:var(--paper)}
/* Hairlines between rows, field borders and the strands' 1px lines; stronger contrast turns them all to ink. */
:root{--edge:var(--rule); --field-edge:var(--ink-3); --strand:var(--ink-3); --sect:clamp(64px, 9vw, 144px); --lh-body:1.5; --lh-lead:1.4; --lh-choice:1.25; --measure:36em; --measure-lead:34em}

/* ---------- 2. Global ---------- */
[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
::selection{background:var(--yellow); color:var(--ink)}
/* A short English compound («in-person») that should not break at its hyphen (scripts/parts.py typo()). */
.nw{white-space:nowrap}
.sr-only{position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0}
.skip{position:fixed; top:12px; left:12px; z-index:var(--z-skip); padding:12px 16px; background:var(--paper-hi); color:var(--ink); border:1px solid var(--ink); border-radius:0; font:400 .9375rem/1.2 var(--tool); letter-spacing:0; text-decoration:none}
.skip:not(:focus){clip-path:inset(50%); width:1px; height:1px; overflow:hidden; white-space:nowrap; padding:0; border:0}
:is(.site, .site-top, .site-foot) :focus-visible, .skip:focus-visible{outline:2px solid var(--vermilion); outline-offset:3px}
:is(.site, .site-top, .site-foot) :focus:not(:focus-visible){outline:none}

/* ---------- 3. Header (spec §7.2) ----------
   The chrome is set in rem and its layout switches in em, so a reader who raises the browser's default text size
   gets a larger header too, and the phone layout (Menu) as soon as the desktop row would not fit. min-block-size
   and wrap: a header enlarged by other means (a 200% root font size) grows instead of pushing the page sideways. */
.site-top{position:relative; z-index:var(--z-chrome); display:flex; flex-wrap:wrap; align-items:center; gap:0 28px; min-block-size:var(--chrome-top); max-width:none; margin:0; padding:0 var(--margin); border:0; background:var(--paper); color:var(--ink); font:400 .9375rem/1.2 var(--tool); letter-spacing:0; text-transform:none}
.site-top a{color:var(--ink); text-decoration:none}
.site-top .site-logo{display:flex; align-items:center; flex:none; min-height:44px; margin-right:auto}
.site-top .site-logo img{display:block; width:100px; min-width:100px; max-width:none; height:auto}
.site-top .desktop-nav{display:flex; flex-wrap:wrap; align-items:center; gap:0 28px; margin:0; padding:0}
.site-top .desktop-nav a{display:flex; align-items:center; min-height:44px; font:400 .9375rem/1.2 var(--tool); letter-spacing:0; white-space:nowrap}
.site-top .desktop-nav a:hover, .site-top .desktop-nav a[aria-current=page]{text-decoration:underline; text-decoration-color:var(--ink); text-decoration-thickness:1px; text-underline-offset:.35em}
.site-top .language{display:flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; margin:0; padding:0; border:0; background:none; color:var(--ink-2); font:400 .875rem/1.2 var(--tool); letter-spacing:0; text-transform:none; cursor:pointer}
.site-top .language:hover{color:var(--ink); text-decoration:underline; text-underline-offset:.35em}

/* The reading-comfort menu lives in the header (the accessibility page promises it «en haut des pages»). */
.site-top .comfort{position:static; margin:0; padding:0; border:0; font:400 .9375rem/1.2 var(--tool)}
.site-top .comfort>summary{display:flex; align-items:center; justify-content:center; gap:8px; min-width:44px; min-height:44px; margin:0; padding:0; list-style:none; cursor:pointer; color:var(--ink); font:400 .9375rem/1 var(--tool); letter-spacing:0}
.site-top .comfort>summary::-webkit-details-marker{display:none}
.site-top .comfort>summary>span{font:inherit; color:inherit; letter-spacing:0}
.site-top .comfort>summary>.comfort-icon{font-size:1.25rem; line-height:1; color:var(--ink)}
.site-top .comfort[open]>summary .comfort-label, .site-top .comfort>summary:hover .comfort-label{text-decoration:underline; text-underline-offset:.35em}
@media (max-width:74.9375em){.site-top .comfort-label{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}}
/* Below 1024 the panel hangs from the header's bottom edge on the page margin (◐ sits beside «Menu»). */
.site-top .comfort-panel{position:absolute; top:100%; right:var(--margin); z-index:var(--z-popover); width:min(18.75rem, calc(100vw - 2 * var(--margin))); margin:0; padding:16px 20px; border:1px solid var(--ink); background:var(--paper-hi); color:var(--ink); box-shadow:none; font:400 .9375rem/1.35 var(--tool); text-align:left}
/* ≥1024 (spec §4.5): it opens under its summary, aligned right, its top on the header's bottom edge.
   This must follow the base rule above: same specificity, so the later rule wins. */
@media (min-width:64em){.site-top .comfort{position:relative} .site-top .comfort-panel{right:0; top:calc(100% + (var(--chrome-top) - 44px) / 2)}}
.site-top .comfort-panel label{display:flex; align-items:center; gap:12px; min-height:44px; margin:0; font:400 .9375rem/1.3 var(--tool); color:var(--ink); cursor:pointer}
.site-top .comfort-panel .fine{margin:8px 0 0; max-width:none; font:400 .875rem/1.4 var(--tool); color:var(--ink-2)}
.site-top .comfort-panel a{display:inline-flex; align-items:center; min-height:44px; margin-top:4px; font:400 .9375rem/1.3 var(--tool); color:var(--ink); text-decoration:underline; text-decoration-color:var(--ink-3); text-decoration-thickness:1px; text-underline-offset:.25em}
.site-top .comfort-panel a:hover{text-decoration-color:var(--vermilion); text-decoration-thickness:2px}

/* Checkboxes and radios: 20px squares; checked = an ink fill holding a paper square. */
:is(.site-top, .site) input:is([type=checkbox], [type=radio]){-webkit-appearance:none; appearance:none; display:inline-grid; place-content:center; flex:none; width:20px; height:20px; margin:0; border:1px solid var(--ink); border-radius:0; background:var(--paper-hi); accent-color:auto; cursor:pointer}
:is(.site-top, .site) input:is([type=checkbox], [type=radio]):checked{background:var(--ink)}
:is(.site-top, .site) input:is([type=checkbox], [type=radio]):checked::before{content:""; width:8px; height:8px; background:var(--paper-hi)}
:is(.site-top, .site) input:is([type=checkbox], [type=radio]):disabled{border-color:var(--ink-3); cursor:default}
:is(.site-top, .site) input:is([type=checkbox], [type=radio]):disabled:checked{background:var(--ink-3)}

/* The booking button: a compact vermilion button, 40px (the human act of meeting an educator). */
/* In rem like the rest of the header: enlarged default text enlarges it too (the header wraps rather than overflows). */
.site-top .btn.nav-book{position:relative; min-height:40px; padding:0 16px; font-size:.9375rem; white-space:nowrap}
/* 40px to see (spec §7.2), 44px to hit (§9.2). */
.site-top .btn.nav-book::before{content:""; position:absolute; inset:-3px -1px}
.site-top .btn.nav-book[aria-current=page]{background:transparent; color:var(--ink); border-color:var(--ink)}

/* Phone: logo, ◐, Menu. The menu is a full-screen paper sheet that works without JS. */
.site-top .mobile-menu{display:none; margin:0; padding:0; border:0; font:400 1rem/1.2 var(--tool)}
.site-top .mobile-menu>summary{display:flex; align-items:center; min-width:44px; min-height:44px; margin:0; padding:0 4px; list-style:none; cursor:pointer; color:var(--ink); font:400 1rem/1 var(--tool); letter-spacing:0; text-transform:none}
.site-top .mobile-menu>summary::-webkit-details-marker{display:none}
.site-top .mobile-menu>summary:hover span{text-decoration:underline; text-underline-offset:.35em}
.site-top .mobile-menu:not([open]) .menu-close, .site-top .mobile-menu[open] .menu-open{display:none}
.site-top .mobile-menu[open]>summary{position:fixed; top:0; right:var(--margin); height:var(--chrome-top); z-index:calc(var(--z-popover) + 1); background:var(--paper)}
/* The sheet scrolls in the box below its top bar, so a row that Tab / Shift+Tab brings into view is never hidden
   under the bar, in any engine (short landscape screens scroll). scroll-padding leaves room for the focus ring. */
.site-top .menu-sheet{position:fixed; inset:var(--chrome-top) 0 0; z-index:var(--z-popover); display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain; scroll-padding-block:8px 16px; margin:0; padding:0 var(--margin) 24px; border:0; background:var(--paper); box-shadow:none}
/* The sheet's top bar (logo, «Fermer»): paper over the header strip. Fixed, so the sheet's overflow never clips it. */
.site-top .menu-sheet::before{content:""; position:fixed; top:0; left:0; right:0; z-index:1; height:var(--chrome-top); background:var(--paper)}
.site-top .menu-brand{position:fixed; top:0; left:var(--margin); z-index:2; display:flex; align-items:center; height:var(--chrome-top)}
.site-top .menu-brand img{display:block; width:100px; min-width:100px; max-width:none; height:auto}
.site-top .mobile-menu nav{position:static; inset:auto; z-index:auto; margin:0; padding:0; border:0; background:none; box-shadow:none}
.site-top .menu-rows{list-style:none; margin:16px 0 0; padding:0; border-bottom:1px solid var(--edge)}
.site-top .menu-rows li{margin:0; padding:0}
.site-top .menu-rows a{display:flex; align-items:center; min-height:64px; padding:10px 0; border-top:1px solid var(--edge); border-bottom:0; font:400 min(1.75rem, 11vw)/1.2 var(--voice); letter-spacing:0; color:var(--ink)}
.site-top .menu-rows a:hover, .site-top .menu-rows a[aria-current=page]{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em}
.site-top .menu-foot{display:flex; flex-direction:column; gap:12px; margin-top:auto; padding-top:32px}
.site-top .menu-tools{display:flex; flex-wrap:wrap; gap:4px 28px; margin:0}
.site-top .menu-tools a, .site-top .menu-tools button{display:inline-flex; align-items:center; gap:8px; min-height:44px; margin:0; padding:0; border:0; background:none; color:var(--ink); font:400 1rem/1.2 var(--tool); cursor:pointer; text-decoration:underline; text-decoration-color:var(--ink-3); text-decoration-thickness:1px; text-underline-offset:.3em}
.site-top .menu-tools .comfort-link{text-decoration:none}
.site-top .menu-tools .comfort-link>span:last-child{text-decoration:underline; text-decoration-color:var(--ink-3); text-decoration-thickness:1px; text-underline-offset:.3em}
.site-top .menu-foot .btn{width:100%}
@media (min-width:37.5em){.site-top .menu-foot .btn{width:auto; align-self:flex-start}}
@media (max-width:63.9375em){
  .site-top{gap:0 12px}
  .site-top .desktop-nav{display:none}
  .site-top .mobile-menu{display:block}
  html:has(.site-top .mobile-menu[open]){overflow:hidden}
}
@media (max-width:37.4375em){.site-top>.btn.nav-book{display:none}}
/* 320 with enlarged default text (22.4375em = 359px at 16px, 718px at 32px): logo, EN, ◐ and Menu still share one row. */
@media (max-width:22.4375em){.site-top{gap:0 4px} .site-top .comfort>summary{min-width:36px} .site-top .mobile-menu:not([open])>summary{padding-right:0}}

/* ---------- 4. Footer (spec §7.5) ---------- */
.site-foot{max-width:none; margin:var(--sect) 0 0; padding:40px var(--margin) 32px; border-top:1px solid var(--edge); background:var(--paper); color:var(--ink); font:400 .9375rem/1.4 var(--tool); letter-spacing:0; text-transform:none; --hang:0px}
.site-foot a{color:var(--ink); text-decoration:none}
.site-foot a:hover{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.3em}
.site-foot p{margin:0; max-width:none}
.site-foot .foot-id{display:flex; flex-wrap:wrap; align-items:center; gap:12px 28px}
.site-foot .foot-logo{display:block; width:100px; min-width:100px; max-width:none; height:auto}
.site-foot .foot-org{font:400 var(--fs-small)/1.4 var(--tool); color:var(--ink-2)}
.site-foot .foot-mail{display:inline-flex; align-items:center; max-width:100%; min-height:44px; font:400 .9375rem/1.3 var(--tool); overflow-wrap:anywhere}
.site-foot .foot-cols{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:32px var(--gap); margin:40px 0 0}
.site-foot .foot-title{margin:0 0 8px; font:400 var(--fs-small)/1.4 var(--tool); letter-spacing:0; text-transform:none; color:var(--ink-2)}
.site-foot ul{list-style:none; margin:0; padding:0}
.site-foot li{margin:0; padding:0; font:inherit; line-height:inherit; letter-spacing:0}
.site-foot li a{display:inline-flex; align-items:center; max-width:100%; min-height:32px; padding:2px 0; font:400 .9375rem/1.3 var(--tool); overflow-wrap:anywhere}
.site-foot .foot-base{display:flex; flex-wrap:wrap; align-items:center; gap:0 28px; margin-top:32px; padding-top:8px}
.site-foot .foot-base a, .site-foot .foot-base button{display:inline-flex; align-items:center; gap:8px; min-height:44px; margin:0; padding:0; border:0; background:none; color:var(--ink-2); font:400 var(--fs-small)/1.3 var(--tool); cursor:pointer}
.site-foot .foot-base a:hover, .site-foot .foot-base button:hover{color:var(--ink); text-decoration:underline; text-underline-offset:.3em}
.site-foot .foot-base .comfort-link:hover{text-decoration:none}
.site-foot .foot-base .comfort-link:hover>span:last-child{text-decoration:underline; text-underline-offset:.3em}
/* Phone: two columns of links; a wrapped entry keeps clear of the next one. */
@media (max-width:599px){.site-foot li+li{margin-top:8px}}
/* Enlarged default text on a phone (17.5em = 280px at 16px, 560px at 32px): one column, so no word has to break. The
   anywhere-wrap above is the last resort for text enlarged by other means (a 200% root font size). */
@media (max-width:17.5em){.site-foot .foot-cols{grid-template-columns:minmax(0, 1fr)}}
@media (min-width:768px){.site-foot .foot-cols{grid-template-columns:repeat(3, minmax(0, 1fr))}}
/* ≥1024: the three bands start on the text column (col 2), like the page above them. */
@media (min-width:1024px){
  .site-foot{--hang:calc((100% - 11 * var(--gap)) / 12 + var(--gap))}
  .site-foot .foot-id{margin-left:var(--hang)}
  .site-foot .foot-cols, .site-foot .foot-base{margin-left:var(--hang); margin-right:calc(var(--hang) * 2)}
}
/* Older bodies (course, library) that end in their own full-width rule or a ruled bridge: that rule
   becomes the footer's single top hairline, with no empty band between two rules. (Pages that print
   one-pagers after <main>, or end in a coloured band, keep the footer's own space and hairline.) */
body:not(.site) main:has(> :is(.section, .workshop-bridge):last-child) + .site-foot,
body:not(.site) main:has(> :is(.section, .workshop-bridge):last-child) + [hidden] + .site-foot{margin-top:0; border-top:0}

/* ---------- 5. Sales pages: base ---------- */
/* overflow-wrap: at very large text sizes (a phone set to 200%) a word longer than its line breaks instead of
   pushing the page sideways; at every normal size no word is that long, so nothing changes. */
body.site{margin:0; background:var(--paper); color:var(--ink); font:400 var(--fs-body)/var(--lh-body) var(--voice); letter-spacing:0; overflow-wrap:break-word; -webkit-text-size-adjust:100%; text-size-adjust:100%}
.site main{display:block}
.site img, .site svg{max-width:100%}
.site :is(h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote, fieldset){margin:0}
.site :is(h1, h2, h3){font-weight:400; font-family:var(--voice); text-wrap:balance; hyphens:manual}
.site :is(p, li, dd){text-wrap:pretty; hyphens:manual}
.site :is(button, input, select, textarea){font:inherit; color:inherit}
.site main a:not([class]){color:var(--ink); text-decoration:underline; text-decoration-color:var(--ink-3); text-decoration-thickness:1px; text-underline-offset:.2em}
.site main a:not([class]):hover{text-decoration-color:var(--vermilion); text-decoration-thickness:2px}
.site .fine{font:400 var(--fs-small)/1.4 var(--tool); color:var(--ink-2); max-width:48em}
.site noscript{display:block}
.site noscript>p{margin-top:24px; max-width:min(var(--measure), var(--span8)); font:400 var(--fs-body)/var(--lh-body) var(--voice)}
.site .qa>.lead+noscript>p:first-child{margin-top:0}
.site .kicker{margin:0 0 16px; font:400 var(--fs-small)/1.4 var(--tool); color:var(--ink-2); text-wrap:balance}
.site .num{font-family:var(--tool); font-variant-numeric:tabular-nums lining-nums}

/* ---------- 6. Layout: one idea per section, on the 12-column grid ----------
   ≥1024: col 1 is the hanging margin, text runs in cols 2–9, rows in cols 2–11.
   --hang is one column plus one gap of the section's content box. */
.site{--hang:0px; --span8:100%}
.site :is(.opener, .qa, .closing, .choose){padding:var(--sect) var(--margin) 0}
.site .opener{padding-top:clamp(40px, 6.67vw, 96px)}
@media (min-width:1024px){
  .site{--hang:calc((100% - 11 * var(--gap)) / 12 + var(--gap)); --span8:calc((100% - 11 * var(--gap)) / 12 * 8 + 7 * var(--gap))}
  .site :is(.opener, .qa, .closing, .choose)>*{margin-left:var(--hang)}
}

/* Opener (spec §7.3): the page's question or statement, one direct answer, one action. */
/* The vw cap never binds at a normal text size (36px at 320 < 13vw); with enlarged text on a phone it keeps the longest
   opener word («d’expériences.») on one line instead of breaking it without a hyphen (hyphens stay manual, §1). */
.site .opener h1{max-width:min(16em, var(--span8)); font:400 min(var(--fs-question), 13vw)/1.08 var(--voice); letter-spacing:-.012em}
.site .opener h1 .l{display:block}
.site .opener .lead{margin-top:24px; max-width:min(30em, var(--span8))}
.site .opener-actions{display:flex; flex-wrap:wrap; align-items:center; gap:12px 28px; margin-top:40px}
/* The booking page, arriving from «Partir de cette idée»: the chosen starting point, confirmed under the answer. */
.site .opener .start-note{margin-top:16px; max-width:min(36em, var(--span8)); font:400 var(--fs-small)/1.5 var(--tool); color:var(--ink-2)}

/* Section (spec §7.4): question-led H2, a direct answer, the detail, at most one action. */
.site .qa>h2{max-width:min(20em, var(--span8)); font:400 var(--fs-h2)/1.15 var(--voice)}
.site .lead{font:400 var(--fs-lead)/var(--lh-lead) var(--voice); color:var(--ink); max-width:min(var(--measure-lead), var(--span8))}
.site .qa>.lead{margin-top:16px}
.site .qa>p:where(:not(.lead)){max-width:min(var(--measure), var(--span8)); font:400 var(--fs-body)/var(--lh-body) var(--voice)}
.site .qa>*+p:where(:not(.lead)){margin-top:1em}
.site .qa>.lead+*, .site .qa>*+:is(.rows, .facts, .steps, .points, .faqs, .tries, .planner-body, .booking-form, .more){margin-top:32px}
.site .qa>p.fine{font:400 var(--fs-small)/1.4 var(--tool); color:var(--ink-2)}
.site .qa>*+p.note{margin-top:32px}
.site .qa>.actions, .site .qa>*+.actions{margin-top:32px}
/* «Pourquoi ça fonctionne?»: the method's five steps as one quiet line, then the way to the method page. */
.site .qa>.meta{margin-top:24px; max-width:min(var(--measure), var(--span8)); font:400 var(--fs-ui)/1.5 var(--tool); color:var(--ink-2)}
@media (min-width:600px){.site .qa>.meta>span{white-space:nowrap}}
.site .qa>.meta+.actions{margin-top:12px}
.site .actions{display:flex; flex-wrap:wrap; align-items:center; gap:12px 28px}
@media (min-width:1280px){.site :is(.qa, .choose)>h2{letter-spacing:-.012em}}

/* ---------- 7. Components ---------- */
/* Buttons (spec §7.5): ink fill with an arrow; vermilion only to book or to prepare the request. */
:is(.site, .site-top) :is(.btn, .btn-quiet){display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:52px; margin:0; padding:0 22px; border:1px solid var(--ink); border-radius:0; background:var(--ink); color:var(--paper); box-shadow:none; font:400 var(--fs-ui)/1.2 var(--tool); letter-spacing:0; text-transform:none; text-decoration:none; text-align:center; cursor:pointer; -webkit-appearance:none; appearance:none; transform:none}
:is(.site, .site-top) .btn::after{content:"→"; content:"→" / ""; display:inline-block; font-family:var(--tool); transition:transform var(--t-state) var(--ease-out)}
:is(.site, .site-top) .btn:hover::after{transform:translateX(3px)}
:is(.site, .site-top) .btn.btn-down::after{content:"↓"; content:"↓" / ""}
:is(.site, .site-top) .btn.btn-down:hover::after{transform:translateY(3px)}
:is(.site, .site-top) .btn.btn-out::after{content:"↗"; content:"↗" / ""}
:is(.site, .site-top) .btn.btn-out:hover::after{transform:translate(2px, -2px)}
:is(.site, .site-top) .btn-book{background:var(--vermilion); border-color:var(--vermilion); color:var(--paper)}
:is(.site, .site-top) .btn-quiet{background:transparent; color:var(--ink)}
:is(.site, .site-top) .btn-quiet:hover{background:var(--paper-lo)}
.site .link-button{display:inline-flex; align-items:center; min-height:44px; margin:0; padding:0; border:0; background:none; color:var(--ink); font:400 var(--fs-ui)/1.2 var(--tool); text-decoration:underline; text-decoration-color:var(--ink-3); text-decoration-thickness:1px; text-underline-offset:.25em; cursor:pointer}
.site .link-button:hover{text-decoration-color:var(--vermilion); text-decoration-thickness:2px}
/* A link-style button that cannot act yet looks quiet, and never takes the vermilion hover mark. */
.site .link-button:is(:disabled, [aria-disabled="true"]), .site .link-button:is(:disabled, [aria-disabled="true"]):hover{color:var(--ink-2); text-decoration-color:var(--rule); text-decoration-thickness:1px; cursor:default}
/* The quiet link: text with a 1px underline, a 44px hit area. Inline text, so a wrapped link keeps its arrow
   after the last word instead of pushing it to the far edge. */
.site .quiet{display:inline-block; padding:calc((44px - 1.3em) / 2) 0; color:var(--ink); font:400 var(--fs-ui)/1.3 var(--tool); text-decoration:none}
.site .quiet>span{text-decoration:underline; text-decoration-color:var(--ink-3); text-decoration-thickness:1px; text-underline-offset:.25em}
.site .quiet::after{content:"→"; content:"→" / ""; margin-left:.3em}
.site .quiet.quiet-out::after{content:"↗"; content:"↗" / ""}
.site .quiet:hover>span{text-decoration-color:var(--vermilion); text-decoration-thickness:2px}

/* Rows replace every card (spec §7.5): a name, one line, an arrow; hairlines between. */
.site .rows{list-style:none; margin-right:var(--hang); padding:0; border-bottom:1px solid var(--edge)}
.site .rows>li{margin:0; padding:0}
.site .row{display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; column-gap:var(--gap); min-height:64px; padding:20px 0; border-top:1px solid var(--edge); color:var(--ink); text-decoration:none}
.site .row>span{grid-column:1; display:block}
/* The arrow is the homepage finale door's arrow (flow.css .door::after): Tool 20px. */
.site .row::after{content:"→"; content:"→" / ""; grid-column:2; grid-row:1 / span 3; align-self:center; font:400 20px/1 var(--tool); color:var(--ink); transition:transform var(--t-state) var(--ease-out)}
.site .row.row-out::after{content:"↗"; content:"↗" / ""}
.site .row-tag{margin-bottom:4px; font:400 var(--fs-small)/1.4 var(--tool); color:var(--ink-2)}
.site .row-name{font:400 var(--fs-choice)/var(--lh-choice) var(--voice); text-wrap:balance}
.site .row-line{margin-top:4px; max-width:var(--measure); font:400 var(--fs-body)/var(--lh-body) var(--voice); color:var(--ink-2)}
.site .row:hover{border-top-color:var(--ink)}
.site .row:hover .row-name{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em}
.site .row:hover::after{transform:translateX(4px)}
.site .row.row-out:hover::after{transform:translate(3px, -3px)}

/* Facts (replace the formats grid): the duration in Tool, then the format and one line. */
.site .facts{margin-right:var(--hang); border-bottom:1px solid var(--edge)}
.site .fact{display:grid; grid-template-columns:max(7.5em, calc((100% - 9 * var(--gap)) / 5 + var(--gap))) minmax(0, 1fr); align-items:baseline; column-gap:var(--gap); padding:20px 0; border-top:1px solid var(--edge)}
.site .facts dt{font:400 var(--fs-num)/1.3 var(--tool); font-variant-numeric:tabular-nums lining-nums; color:var(--ink)}
.site .facts dd{margin:0}
.site .fact-name{display:block; font:400 var(--fs-choice)/var(--lh-choice) var(--voice); text-wrap:balance}
.site .fact-line{display:block; margin-top:4px; max-width:var(--measure); font:400 var(--fs-body)/var(--lh-body) var(--voice); color:var(--ink-2)}
@media (max-width:599px){.site .fact{grid-template-columns:minmax(0, 1fr); row-gap:6px}}

/* Steps (replace the process): the number hangs in col 1 on the title's baseline, then the title, one line in ink-2. */
.site .steps{position:relative; list-style:none; margin-right:var(--hang); padding:0; border-bottom:1px solid var(--edge)}
.site .steps>li{position:relative; display:grid; grid-template-columns:40px minmax(0, 1fr); align-items:baseline; margin:0; padding:20px 0; border-top:1px solid var(--edge)}
.site .step-n{grid-column:1; grid-row:1; font:400 var(--fs-small)/1 var(--tool); font-variant-numeric:tabular-nums lining-nums; color:var(--ink-2)}
.site .step-name{grid-column:2; grid-row:1; font:400 var(--fs-choice)/var(--lh-choice) var(--voice); text-wrap:balance}
.site .step-line{grid-column:2; grid-row:2; margin-top:4px; max-width:var(--measure); font:400 var(--fs-body)/var(--lh-body) var(--voice); color:var(--ink-2)}
@media (min-width:1024px){
  .site .steps>li{grid-template-columns:0 minmax(0, 1fr)}
  .site .step-n{justify-self:end; margin-right:var(--gap); white-space:nowrap}
}
/* The loop (method page): a return line from the last step back up into the first,
   ending in an open chevron: repeat. It sits left of the hanging numbers. Each segment starts at
   -1px, over its row's 1px top border, so the line runs unbroken from row to row. */
.site .steps.loop>li{grid-template-columns:64px minmax(0, 1fr)}
.site .steps.loop .step-n{justify-self:end; margin-right:var(--gap)}
.site .steps.loop>li::before{content:""; position:absolute; left:6px; top:-1px; bottom:0; width:14px; border-left:1px solid var(--strand)}
.site .steps.loop>li:first-child::before{top:calc(20px + var(--fs-choice) * ((var(--lh-choice) - 1.136) / 2 + .917) - .36 * var(--fs-small)); border-top:1px solid var(--strand); border-top-left-radius:12px}
.site .steps.loop>li:last-child::before{bottom:auto; height:calc(20px + var(--fs-choice) * ((var(--lh-choice) - 1.136) / 2 + .917) - .36 * var(--fs-small) + 2px); border-bottom:1px solid var(--strand); border-bottom-left-radius:12px}
.site .steps.loop>li:first-child::after{content:""; position:absolute; left:13px; top:calc(20px + var(--fs-choice) * ((var(--lh-choice) - 1.136) / 2 + .917) - .36 * var(--fs-small) - 3px); width:7px; height:7px; border-top:1px solid var(--strand); border-right:1px solid var(--strand); transform:rotate(45deg)}
@media (min-width:1024px){
  .site .steps.loop>li{grid-template-columns:0 minmax(0, 1fr)}
  .site .steps.loop>li::before{left:auto; right:100%; margin-right:calc(var(--gap) + 20px)}
  .site .steps.loop>li:first-child::after{left:auto; right:100%; margin-right:calc(var(--gap) + 20px)}
}

/* Plain lists of outcomes and principles: Georgia between hairlines. */
.site .points{list-style:none; margin-right:var(--hang); padding:0; border-bottom:1px solid var(--edge)}
.site .points>li{margin:0; padding:16px 0; border-top:1px solid var(--edge); font:400 var(--fs-lead)/var(--lh-lead) var(--voice)}
.site .points>li>span{display:block; max-width:var(--measure-lead)}

/* FAQ (spec §7.5): the question in Georgia, a Tool «+» / «−» aligned right; no height animation. */
.site .faqs{margin-right:var(--hang); border-bottom:1px solid var(--edge)}
.site .faq{margin:0; border-top:1px solid var(--edge)}
.site .faq>summary{display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:baseline; column-gap:var(--gap); min-height:64px; padding:18px 0; list-style:none; cursor:pointer; color:var(--ink); font:400 var(--fs-choice)/var(--lh-choice) var(--voice)}
.site .faq>summary::-webkit-details-marker{display:none}
/* Questions balance like every other Georgia heading (spec §2.3): no word alone on the last line. */
.site .faq>summary>span, .site .more>summary>span{text-wrap:balance}
.site .faq>summary::after{content:"+"; content:"+" / ""; width:1ch; font:400 var(--fs-choice)/1 var(--tool); text-align:center; color:var(--ink-2)}
.site .faq[open]>summary::after{content:"−"; content:"−" / ""}
.site .faq>summary:hover>span{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em}
.site .faq-a{padding:0 0 24px; max-width:var(--measure)}
.site .faq-a p{font:400 var(--fs-body)/var(--lh-body) var(--voice)}
.site .faq-a p+p{margin-top:1em}
.site .faq-a .rows{margin:8px 0 0; border-bottom:0}

/* Try-links (spec §7.5): the logo's piece, a device-neutral invitation, the time it takes. */
.site .tries{list-style:none; margin-right:var(--hang); padding:0; border-bottom:1px solid var(--edge)}
.site .tries>li{margin:0; padding:0}
.site .try{display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; column-gap:16px; min-height:64px; padding:16px 0; border-top:1px solid var(--edge); color:var(--ink); text-decoration:none}
/* max-width:none: at ≥1024 the piece hangs out of a 0-wide grid track, which max-width:100% would collapse. */
.site .piece{display:block; width:16px; height:16px; max-width:none; overflow:visible; transition:transform var(--t-state) var(--ease-out)}
.site .piece path{fill:var(--vermilion)}
.site .try-q{font:400 var(--fs-lead)/var(--lh-lead) var(--voice); text-wrap:balance}
.site .try-time{font:400 var(--fs-small)/1.3 var(--tool); font-variant-numeric:tabular-nums lining-nums; color:var(--ink-2); white-space:nowrap}
.site .try:hover{border-top-color:var(--ink)}
.site .try:hover .try-q{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em}
.site .try:hover .piece{transform:translate(2px, -2px)}
@media (min-width:1024px){.site .try{grid-template-columns:0 minmax(0, 1fr) auto; column-gap:0} .site .try .piece{justify-self:end; margin-right:14px} .site .try-time{margin-left:var(--gap)}}

/* The educator's note: Georgia ink-2 with a vermilion tick hanging in the margin. */
.site p.note{position:relative; padding-left:14px; max-width:min(30em, var(--span8)); font:400 var(--fs-lead)/var(--lh-lead) var(--voice); color:var(--ink-2)}
.site .note::before{content:""; position:absolute; left:0; top:.2em; width:2px; height:1.1em; background:var(--vermilion)}
@media (min-width:1024px){.site p.note{padding-left:0} .site p.note::before{left:auto; right:100%; margin-right:var(--gap)}}
/* Where another vermilion idea shares the screen, the note keeps its voice and loses its tick. */
.site p.note.note-plain{padding-left:0} .site p.note.note-plain::before{content:none}

/* Closing (replaces the yellow invitation band): paper, one lead line, the booking button, the promise. */
.site .closing h2{max-width:min(14em, var(--span8)); font:400 var(--fs-question)/1.08 var(--voice); letter-spacing:-.012em}
.site .closing .lead{margin-top:24px; max-width:min(30em, var(--span8))}
.site .closing .actions{margin-top:40px}
.site .promise{margin-top:12px; font:400 var(--fs-small)/1.4 var(--tool); color:var(--ink-2)}
@media (max-width:599px){.site .closing h2{letter-spacing:0}}

/* «Et ensuite?» (every page, before the footer): three rows and the homepage's strands:
   a trunk in the margin, an elbow into each row; the one you consider turns 2px vermilion. */
.site .choose>h2{font:400 var(--fs-h2)/1.15 var(--voice)}
.site .choices{--elbow:calc(16px + var(--fs-choice) * var(--lh-choice) / 2); position:relative; list-style:none; margin-top:32px; margin-right:var(--hang); padding:0 0 0 28px}
.site .choices::before{content:""; position:absolute; left:0; top:-24px; height:24px; border-left:1px solid var(--strand)}
.site .choices>li{position:relative; margin:0; padding:0}
.site .choices>li::before{content:""; position:absolute; left:-28px; top:0; width:22px; height:var(--elbow); border-left:1px solid var(--strand); border-bottom:1px solid var(--strand); border-bottom-left-radius:14px}
.site .choices>li:not(:last-child)::after{content:""; position:absolute; left:-28px; top:calc(var(--elbow) - 14px); bottom:0; border-left:1px solid var(--strand)}
.site .choices>li:is(:hover, :focus-within)::before{border-left:2px solid var(--vermilion); border-bottom:2px solid var(--vermilion)}
.site .choice{display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; column-gap:var(--gap); min-height:64px; padding:16px 0; color:var(--ink); text-decoration:none}
.site .choice>span{grid-column:1; display:block}
.site .choice::after{content:"→"; content:"→" / ""; grid-column:2; grid-row:1 / span 2; font:400 20px/1 var(--tool); color:var(--ink); transition:transform var(--t-state) var(--ease-out)}
.site .choice-q{font:400 var(--fs-choice)/var(--lh-choice) var(--voice); text-wrap:balance}
.site .choice-hint{margin-top:4px; font:400 var(--fs-small)/1.4 var(--tool); color:var(--ink-2)}
.site .choice:hover .choice-q, .site .choice:focus-visible .choice-q{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em}
.site .choice:hover::after{transform:translateX(4px)}
@media (min-width:1024px){.site .choose>.choices{margin-left:calc(var(--hang) - 28px)}}

/* A sheet: paper-hi, 1px ink border — a document you prepare (the programme, the request). */
.site .sheet{padding:clamp(20px, 2.4vw, 32px); border:1px solid var(--ink); background:var(--paper-hi); color:var(--ink)}
.site .sheet-meta{font:400 var(--fs-small)/1.4 var(--tool); font-variant-numeric:tabular-nums lining-nums; color:var(--ink-2)}
.site .sheet h3{margin-top:8px; font:400 var(--fs-choice)/var(--lh-choice) var(--voice)}
.site .sheet p{max-width:var(--measure)}

/* Forms (spec §7.5): the label above the field, «(obligatoire)» in words, 52px paper-hi fields. */
.site .field{display:flex; flex-direction:column; gap:6px; min-width:0; margin:0; padding:0; border:0}
.site .field>label{font:400 var(--fs-ui)/1.3 var(--tool); color:var(--ink)}
.site .opt, .site .req{color:var(--ink-2)}
.site .hint{font:400 var(--fs-small)/1.4 var(--tool); color:var(--ink-2)}
.site :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea){display:block; width:100%; max-width:100%; min-height:52px; margin:0; padding:12px 14px; border:1px solid var(--field-edge); border-radius:0; background:var(--paper-hi); color:var(--ink); box-shadow:none; font:400 1.0625rem/1.3 var(--tool); -webkit-appearance:none; appearance:none}
.site textarea{min-height:140px; resize:vertical; line-height:1.5; overflow-wrap:anywhere}
/* A placeholder is an example, in ink-2 (7.07:1 on paper-hi; the browser's grey is 4.31:1). */
.site ::placeholder{color:var(--ink-2); opacity:1}
.site :is(input:not([type=range]), select, textarea):hover{border-color:var(--ink)}
.site :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea):focus-visible{border-color:var(--ink)}
/* The error bar outranks the field's own border (same selector as the rule above, later in the file). */
.site :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea):is(:user-invalid, [aria-invalid="true"]){border-left:2px solid var(--vermilion)}
/* The message the booking form writes under a field it cannot use (public/js/studio.js): ink, «Erreur : …». */
.site .field-error{margin:2px 0 0; font:400 var(--fs-small)/1.4 var(--tool); color:var(--ink)}
.site .select{position:relative; display:block}
.site .select::after{content:""; position:absolute; right:19px; top:50%; width:7px; height:7px; border-right:1px solid var(--ink); border-bottom:1px solid var(--ink); transform:translateY(-70%) rotate(45deg); pointer-events:none}
.site .select select{padding-right:48px; cursor:pointer}

/* The planner («Composer mon atelier»): two questions as rows with strands, then the programme sheet. */
.site .planner-body{display:grid; grid-template-columns:minmax(0, 1fr); gap:40px; margin-right:var(--hang)}
.site .planner-controls{display:flex; flex-direction:column; gap:32px}
.site .ask{display:block; padding:0; font:400 var(--fs-choice)/var(--lh-choice) var(--voice); color:var(--ink); text-wrap:balance}
.site .field>label.ask{font:400 var(--fs-choice)/var(--lh-choice) var(--voice)}
.site .options{margin:0; padding:0; border:0; min-width:0}
.site .options>legend{margin-bottom:10px}
.site .options-list{position:relative; padding-left:28px}
.site .options-list::before{content:""; position:absolute; left:0; top:-10px; height:10px; border-left:1px solid var(--strand)}
.site .option{position:relative; display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; column-gap:14px; min-height:56px; padding:12px 0; border-top:1px solid var(--edge); font:400 var(--fs-body)/1.35 var(--voice); cursor:pointer}
/* The elbow starts at -1px, over the row's 1px top border, so the trunk runs unbroken. */
.site .option::before{content:""; position:absolute; left:-28px; top:-1px; width:20px; height:calc(50% + 1px); border-left:1px solid var(--strand); border-bottom:1px solid var(--strand); border-bottom-left-radius:12px}
.site .option:not(:last-child)::after{content:""; position:absolute; left:-28px; top:calc(50% - 12px); bottom:0; border-left:1px solid var(--strand)}
.site .option:last-child{border-bottom:1px solid var(--edge)}
.site .option:hover>span{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em}
/* The chosen option is UI state: a 2px ink elbow (spec §6.1). The one you consider (hover, focus) turns vermilion. */
.site .option:has(input:checked)::before{border-left:2px solid var(--ink); border-bottom:2px solid var(--ink)}
.site .options-list .option:is(:hover, :focus-within)::before{border-left:2px solid var(--vermilion); border-bottom:2px solid var(--vermilion)}
.site .planner-sheet{display:flex; flex-direction:column; align-self:start}
.site .planner-sheet #planner-description{margin-top:12px; font:400 var(--fs-body)/var(--lh-body) var(--voice)}
.site .planner-sheet ol{counter-reset:agenda; list-style:none; margin:20px 0 0; padding:0; border-bottom:1px solid var(--edge)}
.site .planner-sheet ol>li{counter-increment:agenda; display:grid; grid-template-columns:2em minmax(0, 1fr); align-items:baseline; padding:10px 0; border-top:1px solid var(--edge); font:400 var(--fs-body)/1.4 var(--voice)}
.site .planner-sheet ol>li::before{content:counter(agenda); content:counter(agenda) / ""; font:400 var(--fs-small)/1 var(--tool); font-variant-numeric:tabular-nums lining-nums; color:var(--ink-2)}
.site .planner-sheet .fine{margin-top:16px}
.site .planner-sheet .btn{align-self:flex-start; margin-top:24px}
@media (min-width:1024px){.site .planner-body{grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:var(--gap)} .site .planner-controls{padding-right:var(--gap)} .site .options-list{margin-left:-28px}}

/* Booking (spec §7.5 forms): one calm form, the prepared request as the sheet. */
.site .booking-form{max-width:min(46rem, var(--span8))}
.site .fields{display:grid; grid-template-columns:minmax(0, 1fr); gap:24px var(--gap)}
.site .form-actions{margin-top:32px}
.site .form-actions .promise{margin-top:12px}
.site .booking-preview{max-width:min(46rem, var(--span8)); margin-top:40px}
.site .booking-preview h3{margin-top:0; font:400 var(--fs-h2)/1.15 var(--voice)}
.site .booking-preview>p{margin-top:12px; font:400 var(--fs-body)/var(--lh-body) var(--voice)}
.site #booking-summary{margin:20px 0 0; padding:16px 0; border-block:1px solid var(--edge); white-space:pre-wrap; overflow-wrap:anywhere; font:400 var(--fs-body)/1.55 var(--voice); color:var(--ink); background:none}
.site .sheet-actions{display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; margin-top:24px}
.site #booking-feedback{margin-top:16px; font:400 var(--fs-small)/1.4 var(--tool); color:var(--ink)}
@media (min-width:768px){.site .fields{grid-template-columns:repeat(2, minmax(0, 1fr))} .site .field.wide{grid-column:1 / -1}}

/* Resources: a disclosure that holds more rows. */
.site .more{margin-right:var(--hang); margin-top:32px; border-top:1px solid var(--edge); border-bottom:1px solid var(--edge)}
.site .more>summary{display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:baseline; column-gap:var(--gap); min-height:64px; padding:18px 0; list-style:none; cursor:pointer; font:400 var(--fs-choice)/var(--lh-choice) var(--voice)}
.site .more>summary::-webkit-details-marker{display:none}
.site .more>summary::after{content:"+"; content:"+" / ""; width:1ch; font:400 var(--fs-choice)/1 var(--tool); text-align:center; color:var(--ink-2)}
.site .more[open]>summary::after{content:"−"; content:"−" / ""}
.site .more>summary:hover>span{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em}
.site .more .rows{margin:0 0 16px; border-bottom:0}
/* Right after a list of rows, the disclosure is that list's last row: no gap, no second rule. */
.site .rows+.more{margin-top:0; border-top:0}

/* ---------- 8. Reading comfort, stronger contrast, calm (spec §9) ---------- */
html[data-reading="true"] .site{--lh-body:1.65; --lh-lead:1.55; --lh-choice:1.4; --measure:30em; --measure-lead:26em; word-spacing:.06em; letter-spacing:.01em}
html[data-reading="true"] .site :is(h1, h2){letter-spacing:0}
html[data-reading="true"] .site .opener h1{line-height:1.2}
html[data-reading="true"] .site :is(.qa>h2, .choose>h2){line-height:1.3}
/* Stronger contrast (spec §9.8). Paper and ink stay the brand's; the legacy aliases are pinned again
   so that no older stylesheet's contrast rule can bring back a blue or a darker red (the retired
   immersive.css did, under html[data-contrast=true]). */
html[data-contrast="true"]{--ink-2:var(--ink); --ink-3:#57544c; --rule:#7d796e; --edge:var(--ink); --field-edge:var(--ink); --strand:var(--ink);
  --paper:#f3efe5; --ink:#24241f; --red:var(--vermilion); --blue:var(--ink); --muted:var(--ink-2)}
html[data-calm="true"] :is(.site, .site-top, .site-foot) *, html[data-calm="true"] :is(.site, .site-top, .site-foot) *::before, html[data-calm="true"] :is(.site, .site-top, .site-foot) *::after{transition:none!important; animation:none!important}
/* Calm stops the arrows' nudge only: a chevron drawn by rotation (a select's, the method's loop) keeps its shape on hover. */
html[data-calm="true"] :is(.site, .site-top) :is(.btn, .row, .choice):hover::after, html[data-calm="true"] .site .try:hover .piece{transform:none!important}
@media (prefers-reduced-motion:reduce){
  :is(.site, .site-top, .site-foot) *, :is(.site, .site-top, .site-foot) *::before, :is(.site, .site-top, .site-foot) *::after{transition:none!important; animation:none!important}
  :is(.site, .site-top) :is(.btn, .row, .choice):hover::after, .site .try:hover .piece{transform:none!important}
}

/* ---------- 9. Forced colours ---------- */
@media (forced-colors:active){
  :is(.site, .site-top) :is(.btn, .btn-quiet){border:1px solid ButtonText}
  :is(.site-top, .site) input:is([type=checkbox], [type=radio]){-webkit-appearance:auto; appearance:auto}
  :is(.site-top, .site) input:is([type=checkbox], [type=radio]):checked::before{content:none}
  .site .piece path{fill:Highlight}
  .site :is(.choices>li, .option)::before, .site .steps.loop>li::before{border-color:CanvasText}
  .site :is(.choices>li:is(:hover, :focus-within), .option:has(input:checked), .option:is(:hover, :focus-within))::before{border-color:Highlight}
  /* The ink logo would vanish on a dark system background: it keeps its paper. */
  :is(.site-top .site-logo, .site-top .menu-brand) img, .site-foot .foot-logo{forced-color-adjust:none; background:#f3efe5; outline:4px solid #f3efe5}
  .site .note::before{background:Highlight}
}

/* ---------- 10. Print ---------- */
/* A closed <details> never prints its content: public/js/immersive.js opens the FAQ and the «more»
   disclosures before printing and closes them after; ::details-content covers Chromium without JS. */
@media print{
  .site-top, .site-foot, .skip, .site .choose, .site .opener-actions, .site .closing .actions, .site .planner-controls,
  .site .actions, .site .planner-sheet .btn, .site .sheet-actions{display:none!important}
  body.site{background:#fff; color:#000}
  .site :is(.opener, .qa, .closing){padding-top:24px}
  /* A button does nothing on paper: the printed form keeps its fields and the promise. */
  .site .form-actions .btn{display:none!important}
  .site :is(.faq, .more)>summary::after{display:none}
}
@media print{.site details::details-content{content-visibility:visible}}

/* ---------- 11. Without JavaScript ---------- */
/* The comfort preferences need public/js/immersive.js (which sets html[data-enhanced]); without it, no dead controls. */
html:not([data-enhanced]) :is(.site-top .comfort, .comfort-link, [data-comfort-open]){display:none!important}
/* The library's in-place language switch needs public/js/oyee.js, and «Préparer ma demande» needs public/js/studio.js
   (the CSP's form-action 'none' blocks a plain submit; the page gives the email address instead). */
html:not([data-enhanced]) :is(#lang-toggle, [data-lang-toggle], .booking-form .form-actions .btn){display:none!important}