/* =====================================================================
   Design rules v3 (docs/DESIGN.md, 2026-10-23): the shared parts.
   Menu, phone sheet, footer, and the components every
   redesigned page uses (buttons, the patch, stitched forms, inline fields,
   custom list and checkbox, title links). Loaded on every page; the class
   names are new so nothing here touches the pages not redone yet or the
   espaces. Page sections live in their own file (home.css).
   ===================================================================== */

::selection { background: var(--pink); color: #fff; }
/* nothing snaps (Matisse, 25 Oct.): on the redesigned pages every interactive thing eases its colours, shadows and
   opacity by default. Zero specificity, so any rule that sets its own transition still wins. */
:where(body.v3) :where(a, button, summary, label, [role="button"], [role="option"], [tabindex], .tile, .b3, svg *) {
  transition-property: color, background-color, border-color, box-shadow, opacity, fill, stroke, text-decoration-color;
  transition-duration: .25s; transition-timing-function: var(--ease);
}
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:where(.hdr, .sheet, .sfoot, .calcpop) :is(p, h4) { font: inherit; color: inherit; margin: 0; }
:where(.hdr, .sheet, .sfoot) :focus-visible { outline: 3px solid var(--sky-700); outline-offset: 3px; }

/* Buttons: solid, 48px, 6px corners, words alone or icon alone. Hover: rises
   2px and a white stitch runs inside the edge. Click: presses down. */
.b3 { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border: 0; border-radius: 6px; background: var(--pink); color: #fff; font: 600 17px/1 var(--body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: transform .2s var(--ease), box-shadow .25s, background-color .2s; }
.b3.navy { background: var(--ink); }
.b3:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(159,0,88,.7); }
.b3.navy:hover { box-shadow: 0 10px 22px -12px rgba(11,31,71,.7); }
.b3:active { transform: translateY(0) scale(.97); box-shadow: none; }
.b3::after { content: ""; position: absolute; inset: 5px; border-radius: 3px; pointer-events: none; opacity: 0; transform: scale(1.04); transition: opacity .25s, transform .3s var(--ease);
  background: linear-gradient(90deg, rgba(255,255,255,.8) 50%, transparent 0) 0 0 / 10px 1.5px repeat-x, linear-gradient(90deg, rgba(255,255,255,.8) 50%, transparent 0) 0 100% / 10px 1.5px repeat-x,
    linear-gradient(0deg, rgba(255,255,255,.8) 50%, transparent 0) 0 0 / 1.5px 10px repeat-y, linear-gradient(0deg, rgba(255,255,255,.8) 50%, transparent 0) 100% 0 / 1.5px 10px repeat-y; }
.b3:hover::after, .b3:focus-visible::after { opacity: 1; transform: none; animation: ants 1.2s linear infinite; }
.b3:disabled { opacity: .6; cursor: wait; }
@keyframes ants { to { background-position: 10px 0, -10px 100%, 0 -10px, 100% 10px; } }
.tool { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; cursor: pointer; transition: background-color .16s, transform .16s var(--ease); }
.tool:hover { background: var(--ink-deep); } .tool:active { transform: scale(.92); }
.tool svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* The patch: white disc, pink-100 dashed stitch, the kid head, always straight. */
.patch { --s: 56px; position: relative; display: inline-grid; place-items: center; width: var(--s); height: var(--s); flex: none; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 1px rgba(20,46,98,.06), 0 6px 16px -8px rgba(20,46,98,.45); transition: transform .3s var(--spring); }
.patch .ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.patch .ring circle { fill: none; stroke: var(--pink-100); stroke-width: 2.2; stroke-dasharray: 5 4; stroke-linecap: round; }
.patch .mk2 { width: 60%; height: 60%; }
.patch.s .mk2 { width: 66%; height: 66%; }
.patch:hover .ring circle, a:hover .patch .ring circle { animation: stitch 1.4s linear infinite; }
.patch.s { --s: 34px; } .patch.l { --s: 108px; } .patch.xl { --s: 160px; }
.patch.s .ring circle { stroke-width: 3; stroke-dasharray: 4 4; }
@keyframes stitch { to { stroke-dashoffset: -18; } }

/* A form is a stitched patch: white, radius 18, pink-100 stitch inset 9px, running while a field has focus. */
.stitched { position: relative; background: #fff; border-radius: 18px; box-shadow: 0 0 0 1px rgba(20,46,98,.06), 0 14px 30px -18px rgba(20,46,98,.4); }
.stitched > .seam { position: absolute; inset: 9px; width: calc(100% - 18px); height: calc(100% - 18px); pointer-events: none; overflow: visible; }
.stitched > .seam rect { fill: none; stroke: var(--pink-100); stroke-width: 2; stroke-dasharray: 6 5; stroke-linecap: round; }
.stitched:focus-within > .seam rect { stroke: var(--pink); animation: seam 1.6s linear infinite; }
@keyframes seam { to { stroke-dashoffset: -22; } }

/* Inline fields: the form is a sentence, each field sits on a pink dashed underline and grows with what is typed (site.js). */
.ml { font: 600 clamp(19px, 2.2vw, 22px)/1.6 var(--display); color: var(--ink); letter-spacing: -.01em; margin: 4px 0 0; min-width: 0; }
.inl { display: inline-block; position: relative; max-width: 100%; }
.inl input { font: inherit; color: var(--pink); background: transparent; border: 0; padding: 0 2px; outline: 0; appearance: none; -webkit-appearance: none; cursor: text; max-width: 100%; box-sizing: content-box; text-align: left; border-radius: 0; box-shadow: none; height: auto; min-height: 0;
  background-image: linear-gradient(90deg, var(--pink) 50%, transparent 0); background-size: 8px 2px; background-repeat: repeat-x; background-position: 0 100%; font-variant-numeric: tabular-nums; }
.inl input:focus { animation: underseam .8s linear infinite; }
.inl:not(.pick):focus-within { outline: 3px solid var(--sky-100); outline-offset: 3px; border-radius: 4px; }
.inl input[aria-invalid="true"] { background-image: linear-gradient(90deg, var(--red) 50%, transparent 0); }
@keyframes underseam { to { background-position: 16px 100%; } }
.lb-err { margin: -4px 0 0; font-size: 14px; color: var(--red); font-weight: 600; }
.consent { font-size: 13px; color: var(--mute); margin: 0; } .consent a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Custom list (role listbox, appended to body): never the OS menu. */
.inl.pick { position: relative; white-space: nowrap; }
.pickbtn { font: inherit; color: var(--pink); background: transparent; border: 0; padding: 0 2px; cursor: pointer; display: inline; white-space: nowrap; text-align: left; letter-spacing: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background-image: linear-gradient(90deg, var(--pink) 50%, transparent 0); background-size: 8px 2px; background-repeat: repeat-x; background-position: 0 100%; }
.pickbtn svg { width: .7em; height: .7em; margin-left: 4px; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.pickbtn[aria-expanded="true"] svg { transform: rotate(180deg); }
.pickbtn:focus-visible { outline: 3px solid var(--sky-100); outline-offset: 3px; border-radius: 4px; }
.picklist { position: fixed; z-index: 80; margin: 0; padding: 8px; list-style: none; background: #fff; border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(20,46,98,.06), 0 18px 36px -16px rgba(20,46,98,.45); outline: 0; font: 500 16px/1.3 var(--body); letter-spacing: 0; animation: listin .22s var(--ease); }
.picklist::before { content: ""; position: absolute; inset: 5px; border: 1.5px dashed var(--pink-100); border-radius: 10px; pointer-events: none; }
@keyframes listin { from { opacity: 0; transform: translateY(6px) scale(.98); } }
.picklist [role="option"] { position: relative; padding: 11px 14px 11px 34px; border-radius: 8px; color: var(--ink); cursor: pointer; }
.picklist [role="option"].act { background: var(--pink-50); }
.picklist [role="option"][aria-selected="true"]::before { content: ""; position: absolute; left: 13px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--pink); }
.picklist[hidden] { display: none; }

/* Custom checkbox: the box fills navy and the tick draws itself. */
.tck { display: flex; align-items: center; gap: 12px; padding: 4px 0; font: 500 15px var(--body); color: var(--text); cursor: pointer; text-align: left; justify-self: start; }
.tck a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.tbox { width: 24px; height: 24px; border-radius: 6px; border: 2px solid var(--field); display: grid; place-items: center; flex: none; cursor: pointer; transition: background-color .2s, border-color .2s, transform .25s var(--spring); }
.tbox svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tbox path { stroke-dasharray: 1 3; stroke-dashoffset: 1.5; transition: stroke-dashoffset .3s var(--ease) .05s; }
.tbox[aria-checked="true"] { background: var(--ink); border-color: var(--ink); transform: scale(1.06); }
.tbox[aria-checked="true"] path { stroke-dashoffset: 0; }
.tbox:focus-visible { outline: 3px solid var(--sky-100); outline-offset: 3px; }

/* Topic words (tags v3, Matisse 2026-10-26): a topic is a word, never a pill; the child's sun stroke draws under the
   one pointed at or chosen. Free topics (articles, products) open their page's search sentence filled (?q=); a short
   fixed list (association causes) is one index line of words with their count. */
.tw { position: relative; isolation: isolate; color: inherit; text-decoration: none; white-space: nowrap; }
a.tw:hover { text-decoration: none; }
.tw-mk { position: absolute; left: -4%; width: 108%; bottom: -.04em; height: .5em; z-index: -1; overflow: visible; pointer-events: none; }
/* hand-drawn strokes hide with a 1-on, 3-off dash pushed 1.5 path-lengths away: with a 1-on-1 pattern the round caps of the
   hidden dash and of the next one peeked out at both tips while the stroke came and went (Matisse, 27 Oct.) */
.tw-mk path { fill: none; stroke: var(--sun); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 1 3; stroke-dashoffset: 1.5; opacity: 0; transition: stroke-dashoffset .6s var(--ease), opacity 0s .6s; }
.tw:hover .tw-mk path, .tw:focus-visible .tw-mk path, .tw.on .tw-mk path { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset .6s var(--ease), opacity 0s; }
.tw-n { margin-left: 3px; font-size: .72em; font-weight: 500; vertical-align: .5em; color: var(--grey); transition: color .35s var(--ease); }
.tw-index { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 0; font: 600 17px/1.5 var(--body); }
.tw-index .tw { padding: 0; border: 0; background: none; font: inherit; color: var(--mute); cursor: pointer; transition: color .35s var(--ease); }
.tw-index .tw:hover, .tw-index .tw.on { color: var(--ink); }
.tw-index .tw:hover .tw-n, .tw-index .tw.on .tw-n { color: var(--mute); }
@media (hover: none) { .tw:not(.on):hover .tw-mk path { stroke-dashoffset: 1.5; opacity: 0; } }
@media (max-width: 760px) { .picklist [role="option"] { padding-block: 12px; } }   /* 44px rows to tap */
@media (max-width: 760px) { .tw-index { font-size: 16px; gap: 4px 18px; } }

/* Chapter dots (/faq, the legal pages): one per part on the left, 1400px and wider only, gone under the footer; on hover
   the panel gets a paper ground, its padding never changes (moved from the home page, Matisse, 26 Oct.). site.js v3Chapters */
.chapters { position: fixed; left: max(4px, calc(1.6vw - 12px)); top: 50%; transform: translateY(-50%); z-index: 30; display: grid; gap: 4px; padding: 8px 16px 8px 12px; border-radius: 12px; transition: background-color .25s, box-shadow .25s, opacity .3s; }
.chapters a { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--grey); font: 600 13px/1 var(--body); padding: 6px 0; transition: color .25s; }
.chapters a[hidden] { display: none; }
.chapters a::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: background-color .25s, transform .25s var(--spring); }
.chapters a span { opacity: 0; transform: translateX(-4px); transition: opacity .25s, transform .25s var(--ease); white-space: nowrap; }
.chapters:hover a span { opacity: 1; transform: none; }
.chapters:hover { background: rgba(250,250,247,.94); box-shadow: 0 12px 28px -16px rgba(20,46,98,.3); }
@media (min-width: 1500px) { .chapters a.on span { opacity: 1; transform: none; } }
.chapters a.on { color: var(--ink); } .chapters a.on::before { background: var(--pink); transform: scale(1.4); }
@media (max-width: 1400px) { .chapters { display: none; } }
.chapters.gone { opacity: 0; pointer-events: none; }

/* Title links: the title is the link; a sun marker stroke draws under it on hover (stays, lighter, on touch). */
.h2link { position: relative; color: inherit; text-decoration: none; display: inline-block; }
.h2link .h2more { color: var(--pink); }
.h2mk { position: absolute; left: -1%; width: 102%; bottom: -.3em; height: .42em; overflow: visible; pointer-events: none; }
.h2mk path { fill: none; stroke-linecap: round; stroke-dasharray: 1 3; stroke-dashoffset: 1.5; opacity: 0; transition: stroke-dashoffset .6s var(--ease), opacity 0s .6s; }
.h2link:hover .h2mk path, .h2link:focus-visible .h2mk path { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset .6s var(--ease), opacity 0s; }
@media (hover: none) { .h2mk path { stroke-dashoffset: 0; opacity: .55; } }

/* Background on touch screens: no filter on the layer (it flickered), the blobs carry their own soft edge (bg.js). */
.bg-shapes.touch { filter: none !important; opacity: .24; will-change: auto; } .bg-shapes.touch .blob { mix-blend-mode: normal; }


/* ---------- Menu: transparent at the top, paper with a hairline once you scroll ---------- */
.hdr { position: sticky; top: 0; z-index: 40; transition: background-color .25s, box-shadow .25s; }
.hdr.solid { background: rgba(250,250,247,.92); box-shadow: 0 1px 0 var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hdr .bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; min-height: 72px; }
.brand { justify-self: start; display: flex; align-items: center; text-decoration: none; }
.brand .wm { height: 46px; width: auto; display: block; }
.nav { display: flex; align-items: center; gap: 6px; justify-self: center; }
.acts { justify-self: end; display: flex; align-items: center; gap: 10px; }
.nl { display: inline-flex; align-items: center; gap: 4px; position: relative; padding: 10px 12px; border: 0; background: none; cursor: pointer; color: var(--ink); text-decoration: none; font: 500 16px/1 var(--body); transition: color .16s; white-space: nowrap; }
.nl::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--pink); transform: scale(0); transition: transform .3s var(--spring); }
.nl:hover, .nl[aria-expanded="true"] { color: var(--pink); }
.nl:hover::after, .nl[aria-current="page"]::after, .nl[aria-expanded="true"]::after { transform: scale(1); }
.nl.out { font-size: 14px; color: var(--mute); }
.dd { position: relative; }
.ddp { position: absolute; top: calc(100% + 10px); left: 50%; width: 300px; margin-left: -150px; background: #fff; border-radius: 18px; padding: 12px; box-shadow: 0 22px 44px -22px rgba(20,46,98,.4); display: grid; animation: ddin .28s var(--spring); }
.ddp[hidden] { display: none; }
@keyframes ddin { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.ddp > .seam { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); pointer-events: none; overflow: visible; }
.ddp > .seam rect { fill: none; stroke: var(--pink-100); stroke-width: 2; stroke-dasharray: 6 5; animation: seam 1.6s linear infinite; }
.ddp a { position: relative; display: grid; gap: 3px; padding: 11px 14px; border-radius: 12px; text-decoration: none; color: var(--ink); transition: background-color .16s; }
.ddp a b { font: 700 15px/1.2 var(--display); transition: color .16s; } .ddp a span { font: 13.5px/1.4 var(--body); color: var(--mute); }
.ddp a:hover, .ddp a:focus-visible { background: var(--paper); } .ddp a:hover b, .ddp a[aria-current="page"] b { color: var(--pink); }
/* « Mon espace »: a white pill with the pink stitch all around; the stitch turns bright and runs on hover */
.acct { position: relative; display: inline-flex; align-items: center; height: 48px; padding: 0 22px; border-radius: 999px; background: #fff; color: var(--ink); text-decoration: none; font: 600 15px/1 var(--body); white-space: nowrap; box-shadow: 0 8px 18px -12px rgba(20,46,98,.5); transition: box-shadow .2s, transform .16s var(--ease); }
.acct > .seam { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); pointer-events: none; overflow: visible; }
.acct > .seam rect { fill: none; stroke: var(--pink-100); stroke-width: 2; stroke-dasharray: 6 5; stroke-linecap: round; transition: stroke .2s; }
.acct:hover { color: var(--ink); box-shadow: 0 12px 22px -12px rgba(20,46,98,.55); transform: translateY(-1px); }
.acct:hover > .seam rect { stroke: var(--pink); animation: seam 1.6s linear infinite; }
.acct:active { transform: scale(.96); }
.menu { display: none; }
@media (max-width: 900px) { .nav { display: none; } .menu { display: inline-grid; } .hdr .bar { grid-template-columns: 1fr auto; } }
@media (max-width: 760px) { .hdr .bar .acct, .hdr .bar .nl.out { display: none; } .tool.menu { width: 44px; height: 44px; } }
/* phone: one solid menu colour from the first frame. Safari tints the strip behind the clock from this sticky bar and
   only re-reads it while scrolling, so a bar that turned solid after 8px left that strip grey or white at random (Matisse, 28 Oct.) */
@media (max-width: 760px) { .hdr, .hdr.solid { background: #FAFAF7; box-shadow: 0 1px 0 var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; transition: none; } }
/* phone, public pages: no bar at all (Matisse, 28 Oct.). The logo is page content and scrolls away; the round menu
   button floats top right, glowing softly over the footer (.onfoot, site.js); the open menu shows the logo at its top.
   Nothing full-width is fixed at the top edge, so the strip behind the clock stays see-through. The light band past
   the end of the page is Safari's (accepted, Matisse, 28 Oct.) */
.sbrand { display: none; }
@media (max-width: 760px) {
  /* z-index auto: the header no longer stacks above the open menu, so its logo stays under it (it showed through, 28 Oct.) */
  body.v3 .hdr, body.v3 .hdr.solid { position: relative; z-index: auto; background: none; box-shadow: none; }
  body.v3 .tool.menu { position: fixed; z-index: 41; top: calc(14px + env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); box-shadow: 0 8px 20px -10px rgba(20,46,98,.55); transition: opacity .3s var(--ease), transform .3s var(--ease), background-color .16s; }
  body.v3 .tool.menu.onfoot { box-shadow: 0 0 22px 4px rgba(255,255,255,.28); }   /* stays over the footer, in a soft white glow (Matisse, 28 Oct.) */
  body.v3 .sheet { top: 0; background: #EEEEEB; padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
  body.v3 .sheet .sbrand { display: flex; align-items: center; min-height: 44px; margin-bottom: 4px; }
  body.v3 .sheet .sbrand .wm { height: 38px; width: auto; display: block; }
}
@media (max-width: 400px) { .hdr .bar { gap: 10px; } .brand .wm { height: 38px; } }

/* Phone sheet: outside the header (its backdrop-filter would trap a fixed child); one column that fits one screen, sizes from the screen height */
.sheet { position: fixed; left: 0; right: 0; top: var(--sheet-top, 72px); bottom: 0; z-index: 39; background: var(--paper); overflow-y: auto; display: flex; flex-direction: column; justify-content: flex-start; gap: clamp(12px, 2.4vh, 22px);
  padding: 4px max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-bottom, 0px)); animation: sheetin .3s var(--ease); }
.sheet[hidden] { display: none; }
@keyframes sheetin { from { opacity: 0; transform: translateY(-8px); } }
.sheet nav { display: grid; }
.sheet nav a { font: 700 clamp(16px, 2.7vh, 20px)/1.2 var(--display); letter-spacing: -.02em; color: var(--ink); text-decoration: none; padding: clamp(3px, .75vh, 7px) 0; border: 0; }
.sheet nav a.top1 { font-size: clamp(18px, 3vh, 22px); padding: clamp(8px, 1.5vh, 13px) 0; border-bottom: 1px solid var(--line); }
.sheet nav a:active, .sheet nav a[aria-current="page"] { color: var(--pink); }
.sheet .sg { display: grid; padding: clamp(6px, 1.2vh, 12px) 0; border-bottom: 1px solid var(--line); }
.sheet .sgl { font: 600 12px var(--body); color: var(--mute); padding-bottom: 2px; }
.sheet-acts { display: grid; gap: 10px; justify-items: center; }
.sheet-acts .acct { width: 100%; justify-content: center; }
body.locked { overflow: hidden; }

/* ---------- Footer: navy, soft glows, the sun logo, the plan, « Nous contacter » as a sentence ---------- */
.sfoot { position: relative; z-index: 1; overflow: hidden; background: var(--ink); color: #fff; padding-block: 72px 28px; margin-top: 40px; font: 15px/1.6 var(--body); }
.sfoot::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(700px 500px at 90% 100%, rgba(255,199,60,.10), transparent 65%), radial-gradient(500px 400px at 0% 0%, rgba(125,167,255,.16), transparent 70%); }
.fgrid2 { position: relative; display: grid; grid-template-columns: 1.1fr 1fr 1.4fr; gap: 48px; align-items: start; }
.fbrand .wm { height: 52px; width: auto; display: block; }
.fbrand p { margin: 18px 0 16px; color: rgba(255,255,255,.75); max-width: 34ch; }
.fbrand .li { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.8); text-decoration: none; font-weight: 600; }
.fbrand .li svg { width: 18px; height: 18px; fill: currentColor; } .fbrand .li:hover { color: #fff; }
/* Merci la vie: a quiet link next to LinkedIn, then a stitched window with the player and a song to suggest */
.fbrand .fmerci { margin-left: 22px; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; cursor: pointer; }
.fbrand .fmerci svg.st { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
dialog.mdlg { position: fixed; inset: 0; margin: auto; box-sizing: border-box; width: min(520px, calc(100vw - 32px)); height: fit-content; max-height: calc(100dvh - 32px); overflow: auto; border: 0; padding: 34px 32px 28px; color: var(--text); font: 16px/1.6 var(--body); }
dialog.mdlg[open] { display: grid; gap: 18px; }
dialog.mdlg::backdrop { background: rgba(11,31,71,.4); }
dialog.mdlg .mdx { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; z-index: 1; }
.mdhead { padding-right: 48px; }
dialog.mdlg h3 { margin: 0 0 4px; font: 700 20px/1.25 var(--display); letter-spacing: -.02em; color: var(--ink); }
.mdhead p { margin: 0; font-size: 14px; color: var(--mute); }
.mdplayer { width: 100%; height: 175px; border: 0; border-radius: 12px; background: var(--wash); }
.mdalso { margin: -8px 0 0; font-size: 14px; color: var(--mute); } .mdalso a { color: var(--ink); font-weight: 600; text-decoration: none; }
.mdalso a:hover { color: var(--pink); }
.mdform { display: grid; gap: 14px; }
.mdform .ml { font-size: 18px; }
.mdsub { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mdok { margin: 0; font: 600 18px/1.5 var(--display); color: var(--ink); }
.sfoot h4 { margin: 0 0 14px; font: 700 15px/1.3 var(--display); color: #fff; letter-spacing: -.005em; }
.fmap .fcol { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; }
.fmap a { color: rgba(255,255,255,.72); text-decoration: none; position: relative; width: fit-content; align-self: start; white-space: nowrap; } /* the underline hugs the words, never the bottom of a taller row */
.fmap a:hover { color: #fff; }
.fmap a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px; background: var(--sun); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); } .fmap a:hover::after { transform: scaleX(1); }
.fform { position: relative; background: rgba(255,255,255,.06); border-radius: 18px; padding: 24px 24px 20px; display: grid; gap: 14px; min-width: 0; }
.fform > .seam { position: absolute; inset: 9px; width: calc(100% - 18px); height: calc(100% - 18px); pointer-events: none; overflow: visible; }
.fform > .seam rect { fill: none; stroke: rgba(255,199,60,.35); stroke-width: 2; stroke-dasharray: 6 5; stroke-linecap: round; }
.fform:focus-within > .seam rect { stroke: rgba(255,199,60,.75); animation: seam 1.6s linear infinite; }
.fform h4 { margin: 0; }
/* Two-way choice (footer intention, /transparence year): one 48 px switch, navy and white, same on both pages */
.fint { display: flex; padding: 4px; border-radius: 24px; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); }
.fint button { flex: 1; min-width: 0; height: 40px; padding: 0 8px; border: 0; border-radius: 20px; white-space: nowrap; font: 600 13px var(--body); color: rgba(255,255,255,.8); background: transparent; cursor: pointer; transition: background-color .2s, color .2s; }
.fint button[aria-checked="true"] { background: #fff; color: var(--ink); }
.fml { color: #fff; font-size: 18px; margin: 0; }
.fml .inl input { color: var(--sun); background-image: linear-gradient(90deg, var(--sun) 50%, transparent 0); }
/* the full stop stays with the email field */
.fml .nw { white-space: nowrap; }
.fml .inl input::placeholder { color: rgba(255,255,255,.4); }
.msg textarea { display: block; width: 100%; resize: vertical; min-height: 84px; font: 400 16px/1.5 var(--body); color: #fff; background: rgba(255,255,255,.06); border: 1.5px dashed rgba(255,255,255,.25); border-radius: 10px; padding: 10px 12px; outline: 0; box-sizing: border-box; }
.msg textarea:focus { border-color: var(--sun); } .msg textarea::placeholder { color: rgba(255,255,255,.4); }
.fsub { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fsub small { color: rgba(255,255,255,.6); font-size: 13px; }
.fsub small.ok { color: var(--sun); font-weight: 600; } .fsub small.ko { color: var(--red-100); font-weight: 600; }
.fform .consent { color: rgba(255,255,255,.6); }
.fform .lb-err { color: var(--red-100); }
.flegal { position: relative; margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 13px; color: rgba(255,255,255,.55); }
.flegal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 960px) { .fgrid2 { grid-template-columns: 1fr; gap: 36px; } .fbrand { order: 1; } .fform { order: 2; } .fmap { order: 3; } }
@media (max-width: 760px) { .fmap a { font-size: 14px; } .ml { font-size: 16px; } .fml { font-size: 16px; } }

@media (prefers-reduced-motion: reduce) {
  .b3, .b3::after, .patch, .patch .ring circle, .stitched > .seam rect, .ddp, .ddp > .seam rect, .acct > .seam rect, .sheet, .fform > .seam rect, .inl input, .picklist, .tbox, .tbox path, .h2mk path, .nl::after { animation: none !important; transition-duration: .01ms !important; }
}

/* an anchor jump lands below the sticky menu, not under it */
[id] { scroll-margin-top: 104px; }

/* rows that open one at a time hold the tapped row in place themselves (v3Rows); the browser's own scroll anchoring
   (Safari 27 ships it) corrected a second time and made the page jump */
html:has(.way) { overflow-anchor: none; }

/* Espace end screens (lien expiré, session expirée, « Connexion à votre espace », paiement), Matisse 2026-10-29:
   the same look as /connexion: the logo back to the public home, the title in the display face, one sentence, the
   site's buttons; full screen over the espace, centred, nothing else. Built by site/js/dash-session.js. */
.dash-fin { position: fixed; inset: 0; z-index: 9999; display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 96px 24px calc(40px + env(safe-area-inset-bottom, 0px)); background: var(--paper); overflow-y: auto; }
.dash-fin-logo { position: absolute; top: calc(13px + env(safe-area-inset-top, 0px)); left: max(24px, env(safe-area-inset-left, 0px)); }
.dash-fin-logo img { display: block; width: auto; height: 46px; }
.dash-fin-ic { color: var(--ink); opacity: .32; }
.dash-fin-ic.ok { color: var(--pink); opacity: 1; }
.dash-fin-ic svg { display: block; width: 44px; height: 44px; }
.dash-fin-t { margin: 18px 0 10px; max-width: 20ch; font: 700 clamp(26px, 4vw, 36px)/1.12 var(--display); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.dash-fin-p { margin: 0 0 28px; max-width: 46ch; font: 400 17px/1.55 var(--body); color: var(--mute); text-wrap: pretty; }
.dash-fin-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.dash-fin-acts:empty { display: none; }
@media (max-width: 760px) {
  .dash-fin-logo img { height: 38px; }
  .dash-fin-p { font-size: 16px; }
  .dash-fin-acts { flex-direction: column; align-items: stretch; width: 100%; max-width: 360px; }
  .dash-fin-acts .b3 { width: 100%; }
}