/* ═══════════════════════════════════════════════════════════════════════
   Parcells' pages of their own (own mode, m226-06): sign-in, invitation, Équipe, Abonnement, the
   legal pages. The brand guide's values are static/tokens.css (m394 C4: light, then `.dark` on <html>, set
   before the first paint by templates/_theme.html), loaded first; its type (Asap large,
   static/fonts/fonts.css) and shapes. A page in the
   frame (Équipe, Abonnement) sits right of the rail and under its phone bar (--rail-w, --shell-top).
   ═══════════════════════════════════════════════════════════════════════ */
:root {
    /* Parcells' tokens are static/tokens.css (m394 C4), linked before this file. A page in the frame
       (Équipe, Abonnement) sits right of the rail and under its phone bar: web/src/frame/frame.css sets both */
    --rail-w: 0px;
    --shell-top: 0px;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    min-height: 100vh;
    background: var(--chalk);
    color: var(--ink);
    font: semi-expanded 16px/1.5 var(--font);
    font-stretch: 112.5%;
}
code, kbd, samp { font-family: var(--mono); font-size: 13px; }
/* A page in the frame, or a long one (legal) */
.page-wrap {
    display: grid;
    justify-items: center;
    min-height: 100vh;
    padding: calc(var(--shell-top) + 24px) 16px 24px calc(var(--rail-w) + 16px);
}

/* The long logo in the page's head (brand.inline_long, m243 C3; never the square format in a head) */
.brand { display: flex; align-items: center; width: max-content; max-width: 100%; margin-bottom: 24px; color: var(--ink); text-decoration: none; border-radius: 10px; }
.brand svg.logo { display: block; width: auto; height: 32px; max-width: 100%; }
.brand .logo-edge { stroke: none; }
:root.dark .brand .logo-edge { stroke: #3a4c3f; }
@media (prefers-color-scheme: dark) { :root:not(.light):not(.dark) .brand .logo-edge { stroke: #3a4c3f; } }
/* The guide's sentence under the logo (sign-in) */
.tagline { margin: -12px 0 28px; color: var(--ink-muted); font-size: 16px; font-weight: 500; }
h1 { font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0 0 4px; }
h2 { font-size: 16px; font-weight: 600; margin: 28px 0 10px; }
p.sub { margin: 0 0 24px; color: var(--ink-muted); font-size: 14px; }
a { color: var(--primary); }
/* A state is text with a word, never a background (m243 C2) */
.error {
    margin: 0 0 16px;
    color: var(--danger);
    font-size: 14px;
    font-weight: 500;
}
.error:empty { display: none; }
a.provider {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-bottom: 10px;
    padding: 10px 16px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    color: var(--ink);
    text-decoration: none;
    font-weight: 600;
}
a.provider:hover { border-color: var(--primary); }
a.provider:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { color: var(--ink-muted); font-weight: 500; font-size: 12px; }
td small { display: block; color: var(--ink-muted); overflow-wrap: anywhere; }
/* Fields: bordered line-strong, 10 px corners, the label above */
select, input[type=text], input[type=email] {
    font: inherit; font-stretch: inherit; font-size: 14px; color: var(--ink); background: var(--surface);
    border: 1px solid var(--line-strong); border-radius: 10px; padding: 8px 12px; min-height: 40px;
}
input[type=text] { flex: 1 1 240px; min-width: 0; }
/* A field: its label above it */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.field > label { color: var(--ink); font-size: 14px; font-weight: 500; }
.field .row { margin-bottom: 0; }
/* A state is a line of text with its word (ok, warn), never a background */
.state-ok { color: var(--ok); font-size: 14px; font-weight: 500; }
.state-warn { color: var(--warn); font-size: 14px; font-weight: 500; }
/* Buttons (the guide): 40 px, 14 px 600, 10 px corners, a green outline; the door's are static/ui.css's ui-btn */
button {
    font: inherit; font-stretch: inherit; font-size: 14px; font-weight: 600; cursor: pointer; min-height: 40px;
    padding: 8px 16px; border-radius: 10px; border: 1px solid var(--primary);
    background: var(--surface); color: var(--primary);
}
button:hover { background: var(--primary-soft); }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.muted { color: var(--ink-muted); font-size: 14px; }
.link { margin-top: 12px; }
[hidden] { display: none !important; }

/* The legal pages' links under a page alone */
.page-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin: 16px 0 0; font-size: 13px; }
.page-legal a { color: var(--ink-muted); }

/* ─── The door (m435 C1, the m435-01 board): templates/_door.html, every page alone ──────────────────
   The column on the surface (640 px from 1280, half the width from 960, the whole width below); beside it,
   from 960 px, the aside on the chalk: the sample plot (Connexion), the three roles (Invitation) or the
   sign (every other door). On a phone (below 960 px) the content starts under the logo, never centred;
   the aside goes, and only the plot brings its 132 px cropped card into the column; the footer follows
   the content. The parts are static/ui.css's (ui-btn, ui-alert, ui-badge, door-account). */
body.door-page { background: var(--surface); }
.door { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; background: var(--surface); }
.door-main { position: relative; display: flex; flex-direction: column; gap: 28px; min-width: 0; padding: 20px 16px 24px; background: var(--surface); }
.door-main > .brand { margin-bottom: 0; }
.door-main > .brand svg.logo { height: 30px; }
.door-body { display: flex; align-items: flex-start; }
.door-form { display: flex; flex-direction: column; gap: 22px; width: 100%; max-width: 420px; }
.door-head { display: flex; flex-direction: column; gap: 8px; }
.door h1 { margin: 0; font-size: 28px; line-height: 36px; font-weight: 700; overflow-wrap: anywhere; text-wrap: balance; }
.door-lede { margin: 0; font-size: 15px; line-height: 23px; color: var(--ink-2); overflow-wrap: anywhere; }
.door-note { margin: 0; font-size: 13px; line-height: 19px; color: var(--muted); }
/* The seasonal decor (decor.py): the band right of the logo, above the column and under no text; the logo stands in
   front of it on its own ground, whatever the product's name and however narrow the phone; the greeting's line */
.door-main > .brand { position: relative; z-index: 1; background: var(--surface); box-shadow: 0 0 0 8px var(--surface); }
.door-decor { position: absolute; top: 8px; right: 12px; width: min(40%, 360px); height: 60px; pointer-events: none; }
.door-decor svg { width: 100%; height: 100%; }
/* No room beside the logo on the narrowest phones: better no drawing than one cut in two */
@media (max-width: 359px) { .door-decor { display: none; } }
.door-greeting { margin: 0; font-size: 14px; line-height: 20px; color: var(--muted); }
.door-actions { display: flex; flex-direction: column; gap: 10px; }
.door-actions form { margin: 0; }
/* Large buttons fill the column and wrap a long workspace name rather than overflow */
.door .ui-btn[data-size="lg"] {
    width: 100%; height: auto; min-height: 48px; padding: 10px 16px; gap: 12px;
    font-size: 15px; line-height: 1.25; white-space: normal; text-align: center; overflow-wrap: anywhere;
}
.door .ui-btn svg.provider-mark { width: 18px; height: 18px; }
.door-legal { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; line-height: 19px; }
.door-legal a { color: var(--muted); }
/* The facts of an invitation: label, value */
.door-facts { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; font-size: 14px; line-height: 20px; }
.door-facts dt { color: var(--muted); }
.door-facts dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

.door-aside { display: none; }
@media (min-width: 960px) {
    .door { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .door-main { gap: 32px; padding: 48px clamp(48px, 7vw, 96px) 40px; }
    .door-decor { top: 12px; right: 24px; height: 96px; }
    .door-body { flex: 1; align-items: center; }
    .door-crop { display: none; }
    .door-aside {
        display: flex; flex-direction: column; gap: 32px; min-width: 0; overflow: hidden;
        padding: 48px clamp(40px, 5vw, 64px); background: var(--chalk); border-left: 1px solid var(--line);
    }
}
@media (min-width: 1280px) {
    .door { grid-template-columns: 640px minmax(0, 1fr); }
}
.door-aside-head { display: flex; flex-direction: column; gap: 6px; max-width: 560px; }
.door-aside-head p { margin: 0; font-size: 15px; line-height: 22px; color: var(--muted); }
.door-aside-head .door-aside-title { font-size: 24px; line-height: 32px; font-weight: 700; color: var(--ink); }
/* Every other door: the sign alone, centred */
.door-aside[data-aside="sign"] { align-items: center; justify-content: center; }
.door-sign { display: block; width: 200px; height: 200px; color: var(--primary); opacity: .55; }

/* The sample plot: the parcel drawn on the chalk, its sheet over the corner */
.plot { position: relative; width: 100%; max-width: 640px; margin: 0; padding-bottom: 104px; }
.plot-map { display: block; width: min(100%, 540px); height: auto; margin-left: auto; border: 1px solid var(--line); border-radius: 12px; }
/* The map keeps its light tokens in dark (maps stay light, no veil); the cards laid on it follow the theme */
.plot-map, .door-crop-map {
    --chalk: #f6f4ee; --surface: #ffffff; --ink: #1f2a22; --muted: #5d665c; --line: #e2e2d9;
    --line-strong: #7f877d; --primary: #2f5a3e; --primary-soft: #e6ebe8;
}
.plot-ground { fill: var(--chalk); }
.plot-lot { fill: var(--surface); stroke: color-mix(in srgb, var(--line-strong) 40%, var(--line)); stroke-width: 1.2; }
.plot-road { fill: color-mix(in srgb, var(--ink) 6%, var(--chalk)); }
.plot-street { fill: var(--muted); font: 600 12px var(--font); font-stretch: 112.5%; }
.plot-this { fill: var(--primary-soft); stroke: var(--primary); stroke-width: 2.5; stroke-linejoin: round; }
.plot-house { fill: color-mix(in srgb, var(--ink) 20%, var(--surface)); }
.plot-group { fill: none; stroke: var(--primary); stroke-width: 1.6; stroke-dasharray: 6 5; stroke-linejoin: round; }
.plot-label { fill: var(--primary); font: 700 15px var(--font); font-stretch: 112.5%; }
.plot-label--next { font-size: 13px; font-weight: 600; }
.plot-jalon { fill: var(--jalon); }
.plot-sheet {
    position: absolute; left: 0; bottom: 8px; display: flex; flex-direction: column; gap: 10px;
    width: min(340px, 80%); padding: 16px 18px; background: var(--surface); color: var(--ink);
    border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--ui-shadow-float);
}
.plot-sheet-head { display: flex; flex-direction: column; gap: 2px; }
.plot-sheet-head b { font-size: 16px; line-height: 22px; }
.plot-sheet-head code { color: var(--muted); font-size: 12px; }
.plot-sheet dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; font-size: 13px; line-height: 18px; }
.plot-sheet dt { color: var(--muted); }
.plot-sheet dd { margin: 0; font-variant-numeric: tabular-nums; }
/* The phone's card (Connexion): AB 0187's jalon corner, its address and number on a tag */
.door-crop { position: relative; flex: none; height: 132px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #f6f4ee; }
.door-crop-map { position: absolute; left: -130px; top: -128px; width: 560px; height: 560px; }
.door-crop-tag {
    position: absolute; left: 10px; bottom: 10px; display: flex; flex-direction: column;
    padding: 6px 10px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 8px;
    font-size: 12.5px; line-height: 17px; box-shadow: var(--ui-shadow-float);
}
.door-crop-tag code { font-size: 11px; color: var(--muted); }

/* The three roles beside an invitation; the offered one edged in green, with its badge */
.roles { display: flex; flex-direction: column; gap: 12px; max-width: 560px; margin: 0; padding: 0; list-style: none; }
.role { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 15px; line-height: 22px; }
.role b { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.role-text { color: var(--muted); }
.role[aria-current="true"] { border-color: var(--line); box-shadow: inset 3px 0 0 var(--primary); }

/* ─── The legal frame (board 57, m396): templates/legal.html, the app's and the site's ───────────────
   A 64 px bar (logo, « Ouvrir »), the five pages at the left, the text at 720 px, « Sur cette page » at the
   right, the article being read edged in green (static/legal.js, m435-04); the hub's four pages as 2 × 2
   cards. Below 1180 px « Sur cette page » is the Sommaire above the text (static/ui.css's ui-collapsible,
   closed, pushing the text down when open); below 900 px (phone) the bar is 56 px with the logo and
   « Ouvrir » only, the tables become cards and the definitions go under their term. The block's classes are templates/legal/'s: updated, chap, art, hub, tbl-wrap, tbl, mono. */
body.lg-page { background: var(--surface); }
.lg-skip { position: absolute; left: 16px; top: -48px; z-index: 20; padding: 8px 12px; border-radius: 8px; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); }
.lg-skip:focus { top: 12px; }
.lg-bar {
    position: sticky; top: 0; z-index: 10;
    height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 0 40px; border-bottom: 1px solid var(--line); background: var(--surface);
}
.lg-bar .brand { margin: 0; }
.lg-bar .brand svg.logo { height: 28px; }
.lg-btn {
    display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 14px;
    border: 1px solid var(--line-strong); border-radius: 10px; background: transparent;
    color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.lg-btn:hover { border-color: var(--primary); }
.lg-page a:focus-visible, .lg-page button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* « Ouvrir Parcells », « Ouvrir » on a phone: static/ui.css's ui-btn outline sm */
.lg-bar .lg-open { flex: none; }

.lg-body {
    display: grid; grid-template-columns: 240px minmax(0, 720px) 200px; gap: 56px; justify-content: center;
    padding: 40px 40px 96px;
}
.lg-side { position: sticky; top: 104px; align-self: start; padding-top: 6px; }
.lg-nav { display: flex; flex-direction: column; gap: 2px; }
.lg-nav a {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
    color: var(--ink-2); font-size: 14px; line-height: 20px; text-decoration: none;
}
.lg-nav a svg { flex: none; color: var(--line-strong); }
.lg-nav a:hover { background: var(--chalk); color: var(--ink); }
.lg-nav a[aria-current="page"] { background: var(--primary-soft); color: var(--ink); font-weight: 600; }
.lg-nav a[aria-current="page"] svg { color: var(--primary); }
.lg-consent { margin-top: 12px; padding: 8px 10px; border: 0; background: none; color: var(--primary); font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }

.lg-main { min-width: 0; }
.lg-main:focus { outline: none; }
.lg-main h1 { margin: 0 0 6px; font-size: 32px; line-height: 40px; font-weight: 700; overflow-wrap: anywhere; }
.lg-back { display: none; align-items: center; gap: 6px; margin-bottom: 14px; font-size: 13px; font-weight: 600; text-decoration: none; }
.legal p { margin: 0 0 16px; max-width: 68ch; font-size: 15px; line-height: 24px; }
.legal p.updated { margin: 0 0 24px; font-size: 14px; line-height: 20px; color: var(--muted); }
.legal .chap { color: var(--ink-2); }
.legal h2 { margin: 36px 0 10px; font-size: 19px; line-height: 26px; font-weight: 700; scroll-margin-top: 88px; }
.legal .art { margin-right: 2px; color: var(--muted); font-variant-numeric: tabular-nums; }
.legal ul { margin: 0 0 16px; padding-left: 20px; font-size: 15px; line-height: 24px; }
.legal dl { margin: 0 0 16px; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 10px 20px; font-size: 15px; line-height: 23px; }
.legal dt { color: var(--muted); }
.legal dd { margin: 0; overflow-wrap: anywhere; }
.legal .tbl-wrap { margin: 0 0 16px; overflow-x: auto; }
.legal .tbl { width: 100%; border-collapse: collapse; }
.legal .tbl th { text-align: left; vertical-align: bottom; padding: 0 14px 8px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 16px; font-weight: 600; }
.legal .tbl td { vertical-align: top; padding: 9px 14px 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 20px; }
.legal .mono { font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; }
/* The hub: the four pages as 2 × 2 cards, an icon each */
.legal .hub { list-style: none; margin: 8px 0 32px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.legal .hub a { height: 100%; display: flex; gap: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); text-decoration: none; }
.legal .hub a:hover { border-color: var(--line-strong); }
.legal .hub-ico { flex: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--primary-soft); color: var(--primary); }
.legal .hub-txt { display: flex; flex-direction: column; gap: 3px; }
.legal .hub-txt b { font-size: 16px; line-height: 22px; }
.legal .hub-txt span { font-size: 14px; line-height: 20px; color: var(--ink-2); }
.legal-hub h2 { margin: 0 0 12px; }
/* « Sur cette page »: at the right, the article in view edged (aria-current, static/legal.js); the Sommaire
   above the text below 1180 px */
.lg-toc { position: sticky; top: 104px; align-self: start; padding-top: 10px; }
.lg-toc > b { display: block; margin-bottom: 10px; font-size: 13px; }
.lg-toc-links { display: flex; flex-direction: column; gap: 4px; }
.lg-toc-links a { padding: 3px 0 3px 12px; border-left: 1px solid var(--line); color: var(--ink-2); font-size: 13px; line-height: 19px; text-decoration: none; }
.lg-toc-links a:hover { border-left-color: var(--primary); color: var(--ink); }
.lg-toc-links a[aria-current="true"] { border-left: 2px solid var(--primary); padding-left: 11px; color: var(--ink); font-weight: 600; }
.lg-toc-links .num { margin-right: 6px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* The Sommaire (board m435-04): « Sommaire » 600, the count muted beside it, the chevron at the right; links of 40 px */
.lg-sommaire { display: none; margin: 8px 0 16px; }
.lg-sommaire .ui-collapsible-trigger { gap: 6px; font-size: 14px; font-weight: 600; }
.lg-sommaire .ui-collapsible-count { margin-left: 0; }
.lg-sommaire .ui-collapsible-trigger svg { margin-left: auto; }
.lg-sommaire .ui-collapsible-content { padding: 0 14px 10px; }
.lg-sommaire .ui-collapsible-content a { display: flex; align-items: center; min-height: 40px; padding: 0 0 0 12px; font-size: 14px; }
.lg-sommaire .ui-collapsible-content a:focus-visible { outline-offset: -2px; }
.lg-sommaire .num { min-width: 22px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* The site's consent (m247 C3), only with a GA ID */
.consent { position: fixed; z-index: 30; right: 16px; bottom: 16px; left: 16px; max-width: 420px; margin-left: auto; padding: 16px; display: grid; gap: 12px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); font-size: 14px; line-height: 21px; }
.consent[hidden] { display: none; }
.consent p { margin: 0; }
.consent .row { margin: 0; }
.consent .lg-btn { flex: 1 1 0; }

@media (max-width: 1179px) {
    .lg-body { grid-template-columns: 220px minmax(0, 720px); gap: 40px; }
    .lg-toc { display: none; }
    .lg-sommaire { display: block; }
}
@media (max-width: 899px) {
    .lg-bar { height: 56px; padding: 0 12px 0 16px; }
    .lg-bar .brand svg.logo { height: 22px; }
    .lg-open-name { display: none; }
    .lg-body { display: block; padding: 20px 20px 64px; }
    .lg-side { display: none; }
    .lg-back { display: inline-flex; }
    .lg-main h1 { margin-bottom: 4px; font-size: 26px; line-height: 32px; }
    .legal p { margin-bottom: 12px; font-size: 14px; line-height: 22px; }
    .legal p.updated { margin-bottom: 8px; font-size: 13px; }
    .legal h2 { margin: 18px 0 8px; font-size: 18px; line-height: 24px; scroll-margin-top: 72px; }
    .legal dl { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 21px; }
    .legal dd { margin-bottom: 8px; }
    .legal .hub { grid-template-columns: 1fr; gap: 10px; }
    /* A table's row becomes a card */
    .legal .tbl-wrap { overflow: visible; }
    .legal .tbl thead { display: none; }
    .legal .tbl, .legal .tbl tbody, .legal .tbl tr, .legal .tbl td { display: block; }
    .legal .tbl tbody { display: flex; flex-direction: column; gap: 10px; }
    .legal .tbl tr { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
    .legal .tbl td { padding: 0; border: 0; }
    .legal .tbl td + td { color: var(--ink-2); }
    .legal .tbl td:last-child:not(:first-child) { color: var(--muted); }
}
@media print {
    .lg-bar, .lg-side, .lg-toc, .lg-sommaire, .lg-back, .consent { display: none !important; }
    .lg-body { display: block; padding: 0; }
}