/* Octopus web app pages (/application/*): same design system as getoctopus.app (octopus.css loaded first) —
   Geist, Octopus blue, 10/12px smoothed corners, light grey strokes. */
.app-main{display:flex;flex-direction:column;align-items:center;padding:clamp(28px,6vh,72px) var(--gut) 72px}

.app-mark{display:block;width:44px;height:auto;margin:0 auto 18px}
.app-title{font-size:clamp(26px,3.4vw,34px);font-weight:300;letter-spacing:-.035em;line-height:1.1;text-align:center;color:var(--fg)}
.app-title em{font-style:italic;font-weight:420}
.app-sub{margin-top:8px;text-align:center;font-size:14.5px;line-height:1.55;color:#6b6b6b}

/* tabs (Se connecter / Créer un compte) */

/* fields */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:13px;font-weight:500;color:var(--fg)}
.field input,.field select{width:100%;padding:11px 13px;border:1px solid #d0d0d0;border-radius:10px;background:#fff;color:var(--fg);font-size:15px;font-weight:400;line-height:1.3;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(22,93,251,.18)}
.field .hint{font-size:12.5px;color:#8a8a8a}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.row2{grid-template-columns:1fr}}
@supports (corner-shape: squircle){.field input,.field select{border-radius:16px;corner-shape:squircle}}

/* password checklist */
.pw-checks{display:flex;flex-wrap:wrap;gap:6px 12px;margin:-4px 0 14px;font-size:12.5px;color:#8a8a8a;list-style:none;padding:0}
.pw-checks li::before{content:"○ ";}
.pw-checks li.ok{color:#16803c}
.pw-checks li.ok::before{content:"● ";}

/* profile picture */

/* buttons inside forms: full width */

.link-btn{border:0;background:none;padding:0;color:var(--primary);font-size:13.5px;font-weight:500;cursor:pointer}
.link-btn:hover{text-decoration:underline}
.form-foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size:13.5px;color:#6b6b6b}

/* messages */
.form-msg{min-height:0;margin:0 0 12px;font-size:13.5px;line-height:1.45}
.form-msg.error{padding:10px 12px;border:1px solid rgba(220,38,38,.3);border-radius:10px;background:rgba(220,38,38,.05);color:#b91c1c}
.form-msg.notice{padding:10px 12px;border:1px solid rgba(22,93,251,.25);border-radius:10px;background:#eef3ff;color:#1d3a8a}

/* plan picker */

/* two choices (create / join) */
.choice{display:grid;grid-template-columns:1.4fr 1fr;gap:14px;width:100%;max-width:980px}
@media (max-width:860px){.choice{grid-template-columns:1fr}}

.sep{display:flex;align-items:center;gap:10px;margin:18px 0;font-size:12.5px;color:#8a8a8a}
.sep::before,.sep::after{content:"";flex:1;height:1px;background:#e4e4e4}
.hidden{display:none!important}
/* signed-in avatar with a photo */
.acct-btn .avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}

/* the shared .cta starts hidden for the home intro animation: always visible on app pages */
.app-main .cta{opacity:1;transform:none}

.app-split{display:grid;grid-template-columns:1fr 1fr;width:100%;max-width:1000px;border:1px solid #d6d6d6;border-radius:24px;background:#fff;overflow:hidden;text-align:left}
@supports (corner-shape: squircle){.app-split{border-radius:36px;corner-shape:squircle}}
.app-split>.side{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:44px 40px;background:#f7f8fb;border-right:1px solid #e4e4e4}
.app-split>.side .app-mark{margin:0 0 6px}
.app-split>.side .app-title,.app-split>.side .app-sub{text-align:left}
.app-split>.side .app-sub{margin-top:0}
.app-split>.pane{padding:36px 36px 32px}
.app-split>.pane.center{display:flex;flex-direction:column;justify-content:center}

.stack{display:flex;flex-direction:column;gap:16px;width:100%;max-width:1000px}

.soon-list{display:flex;flex-wrap:wrap;gap:8px}
.soon-list .chip{padding:7px 13px;border:1px solid #e4e4e4;border-radius:999px;font-size:14px;color:#333;background:#fff}
@media (max-width:860px){
  .app-split{grid-template-columns:1fr}
  .app-split>.side{border-right:0;border-bottom:1px solid #e4e4e4;padding:30px 24px}
  .app-split>.pane{padding:26px 22px}
}

/* full-width form buttons inside the 50/50 card */
.app-split .cta.block{display:flex;width:100%;justify-content:center;margin-top:6px}

/* login: Google on the left under the subtitle; "ou" bubble on the divider between the two halves */

.app-split>.side .cta.block{margin-top:14px}
.app-split>.side{padding:44px 32px 44px 36px}
.app-split>.side .app-sub{max-width:none}
/* profile picture circle next to the name field */
.name-row{display:flex;align-items:flex-end;gap:12px}
.name-row .field{flex:1}
.avatar-circle{position:relative;flex:none;display:flex;align-items:center;justify-content:center;width:46px;height:46px;margin-bottom:14px;border:1px dashed #c4c4c4;border-radius:50%;background:#f6f6f6 center/cover no-repeat;color:#8a8a8a;cursor:pointer;transition:border-color .2s}
.avatar-circle:hover{border-color:var(--primary);color:var(--primary)}
.avatar-circle .plus{position:absolute;right:-3px;bottom:-3px;display:flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--primary);color:#fff;font-size:13px;font-weight:600;line-height:1}
.avatar-circle.has-photo{border-style:solid}
.avatar-circle.has-photo svg{display:none}
.sr,.sr-file{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* consent lines */
.legal-note{margin-top:14px;font-size:12.5px;line-height:1.5;color:#8a8a8a}
.legal-note .link-btn{font-size:12.5px}
/* legal modal */
.legal-modal{width:min(760px,calc(100vw - 32px));max-height:min(80vh,820px);padding:0;border:1px solid #d6d6d6;border-radius:20px;background:#fff;color:var(--fg);box-shadow:none;overflow:hidden}
.legal-modal::backdrop{background:transparent}
.legal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;border-bottom:1px solid #e4e4e4}
.legal-head h2{font-size:20px;font-weight:420;letter-spacing:-.02em}
.legal-close{width:32px;height:32px;border:1px solid #e4e4e4;border-radius:50%;background:#fff;font-size:20px;line-height:1;color:#555;cursor:pointer}
.legal-body{max-height:calc(min(80vh,820px) - 70px);overflow-y:auto;padding:18px 22px 24px;font-size:14px;line-height:1.6;color:#333}
.legal-body h3{margin:18px 0 6px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fg)}
.legal-body p{margin:0 0 8px}
.legal-body ul{margin:0 0 8px;padding-left:20px}
.legal-notice{padding:8px 12px;border-radius:10px;background:#eef3ff;color:#1d3a8a}
.legal-updated{margin-top:16px!important;font-size:12.5px;color:#8a8a8a}
@supports (corner-shape: squircle){.legal-modal{border-radius:30px;corner-shape:squircle}}

.legal-modal{margin:auto}

/* App-page action buttons = the hero's big buttons (10px 20px, 14px, 12px corners), full width */
.app-split .cta.block{gap:9px;padding:10px 20px;font-size:14px;font-weight:520;line-height:normal;border-radius:12px}
.app-split .cta.block:not(.ghost)::after{inset:.5px;border-radius:10px}
@supports (corner-shape: squircle){.app-split .cta.block{border-radius:19px;corner-shape:squircle}.app-split .cta.block:not(.ghost)::after{border-radius:17px}}
.app-split .pane .cta-pair{flex-direction:column;align-items:stretch;gap:10px;margin-top:0}
.app-split .pane .cta-pair .cta{justify-content:center;padding:10px 20px;font-size:14px;border-radius:12px}
@supports (corner-shape: squircle){.app-split .pane .cta-pair .cta{border-radius:19px;corner-shape:squircle}}
/* sign-in / sign-up: the single navbar action sits on the right */
.nav ul li.tight:not(.hidden){margin-left:auto}

/* consent links: black, underlined, regular weight */
.legal-note .link-btn{color:var(--fg);font-weight:inherit;text-decoration:underline;text-underline-offset:2px}
.legal-note .link-btn:hover{text-decoration-thickness:2px}
/* login navbar: sign-in view = "Mot de passe oublié ?" (text) + "Créer un compte" on the right; sign-up view = "Se connecter" on the right */
.nav ul a.login.forgot{font-weight:440}

/* Focused field: ONE solid 2px stroke in the exact Octopus blue of the navbar / frame (no lighter halo) */
.field input:focus,.field select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
/* forgot password sits close to "Créer un compte" */

/* When the card is shorter than the screen, center it vertically in the space between the navbar and the footer (footer stays visible) */
.app-main{justify-content:center;padding-top:40px;padding-bottom:40px}
/* focused field: solid Octopus-blue border + a 2nd outer stroke in the same blue at 15% opacity */
.field input:focus,.field select:focus{box-shadow:0 0 0 3px rgba(22,93,251,.15)}

/* forgotten-password view (right pane) */
.pane-title{font-size:20px;font-weight:420;letter-spacing:-.02em;color:var(--fg)}
.pane-hint{margin:6px 0 16px;font-size:14px;line-height:1.5;color:#6b6b6b}

/* Messages: floating card in the menu style (replaces the red / blue inline boxes) */
.form-msg{display:none!important}
.toast{position:fixed;top:calc(var(--navh,53px) + 14px);left:50%;z-index:60;transform:translateX(-50%);display:flex;align-items:center;gap:10px;width:max-content;max-width:min(520px,calc(100vw - 32px));padding:10px 10px 10px 14px;background:#0a0a0a;border-radius:12px;box-shadow:0 10px 32px rgba(10,10,10,.28),0 0 0 1px rgba(255,255,255,.1);color:#fff;font-size:14px;line-height:1.45;animation:toast-in .2s ease-out}
.toast p{margin:0}
.toast>svg{flex:none}
.toast.error>svg{color:#ff6b6b}
.toast.notice>svg{color:#6ea0ff}
.toast-close{flex:none;width:26px;height:26px;margin-left:4px;border:0;border-radius:8px;background:none;color:#a3a3a3;font-size:19px;line-height:1;cursor:pointer}
.toast-close:hover{background:rgba(255,255,255,.14);color:#fff}
@supports (corner-shape: squircle){.toast{border-radius:18px;corner-shape:squircle}}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){.toast{animation:none}}

/* ===== Flow layout: every /application page = one centered white column under the navbar.
   (The old blue left panel with the brain / reviews was removed: those reviews were invented placeholders.) ===== */
main.app-main.auth{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;justify-content:stretch;padding:0!important}

.auth-main{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px clamp(24px,5vw,72px) 5rem;background:#fff}
.auth-main>*{width:100%;max-width:480px}
/* the old 2-sided card becomes plain content in the white zone */
.auth-main .app-split{display:block;max-width:480px;border:0;border-radius:0;background:none;overflow:visible;corner-shape:round}
.auth-main .app-split>.side{display:block;padding:0;margin-bottom:22px;background:none;border:0}
.auth-main .app-split>.pane{padding:0}
.auth-main .app-mark{display:none}
.auth-main .app-title{text-align:left;font-size:clamp(26px,2.6vw,32px)}
.auth-main .app-sub{margin-top:8px;text-align:left}
.auth-main .side .cta.block{margin-top:14px}
.auth-main .stack{gap:0;max-width:480px}
.auth-main .stack>.app-split+.app-split{margin-top:40px;padding-top:36px;border-top:1px solid #e4e4e4}

.pane-title{font-size:clamp(24px,2.4vw,30px);font-weight:300;letter-spacing:-.035em;line-height:1.1}
.auth-main .side+.pane .pane-title{font-size:20px;font-weight:420;letter-spacing:-.02em}
.g-block .cta.block{margin-top:0}
.g-block .sep{margin:16px 0}

@media (max-width:900px){
  main.app-main.auth{grid-template-columns:1fr}
  .auth-main{order:1;padding:36px 20px 48px}
}

/* Flow layout v2 (Martin 30/10): wider side padding in the white zone; left and right zones scroll independently */
.auth-main{padding-left:clamp(32px,8vw,128px);padding-right:clamp(32px,8vw,128px)}
@media (max-width:900px){
  .auth-main{padding-left:24px;padding-right:24px}
}

/* "Retour au site" (every flow page): first item of the right-hand group, then the page's actions / account menu */
.nav ul li.back-site{order:1;margin-left:auto}
.nav ul li.back-site~li:not(:last-child),.nav ul li.acct{order:2}
.nav ul li.back-site a.login{font-weight:440}
/* right zone: more side padding, narrower inputs (Martin 30/10) */
.auth-main{padding-left:clamp(48px,12vw,200px);padding-right:clamp(48px,12vw,200px)}
.auth-main>*,.auth-main .app-split,.auth-main .stack{max-width:400px}
@media (max-width:900px){.auth-main{padding-left:24px;padding-right:24px}}
/* profile picture circle on the RIGHT of the name field */
.name-row .field{order:1}
.name-row .avatar-circle{order:2}
/* reusable input / select: shorter (Martin 30/10) */
.field input,.field select{padding:8px 12px;font-size:14.5px}
/* blue scribble sits BEFORE the title, on the same line */
/* big right-zone titles (Se connecter, Créer un compte, Créer une teamspace…): 2px smaller, weight +25 */
.pane-title{font-size:clamp(22px,calc(2.4vw - 2px),28px);font-weight:325}
.auth-main .app-title{font-size:clamp(24px,calc(2.6vw - 2px),30px);font-weight:325}
.auth-main .side+.pane .pane-title{font-size:20px;font-weight:420}
.pane-title,.auth-main .app-title{font-weight:350}
.auth-main .side+.pane .pane-title{font-weight:420}
/* title in between (Martin 30/10) */

.auth-main{position:relative;z-index:0}
/* white zone: same small space above and below the content (was 5rem below) */
.auth-main{padding-top:48px;padding-bottom:48px}
@media (max-width:900px){.auth-main{padding-top:32px;padding-bottom:32px}}
/* white 30 % stroke drawn ON the top (blur) layer so nothing can cover it */
/* card switch, more pronounced: the old card slides left, shrinks and blurs out; the new one slides in from the right */
/* Flow navbar = EXACTLY the home navbar rhythm (octopus.css): text link → 18px → outlined button → 8px → black button.
   Same reusable items in the same order: "Retour au site" (text, like "Se connecter"), outlined, black. */
.nav ul li.back-site a.login{font-weight:520}

/* Login "Se connecter" / "Mot de passe oublié" views: no blue panel, the form is centered on the whole page (same 400px column).
   Create account keeps the 50/50 layout. */
html[data-view="in"] main.auth,html[data-view="reset"] main.auth{grid-template-columns:1fr}

/* login page: the consent line belongs to "Créer un compte" only; the other views show the support contact instead */
html[data-view="up"] .help-note,html:not([data-view="up"]) .consent-up{display:none}
.legal-note a{color:var(--fg);text-decoration:underline;text-underline-offset:2px}
.legal-note a:hover{text-decoration-thickness:2px}

/* Login navbar = the home navbar rhythm: label (Retour au site) → 18px → light button → 8px → black button.
   Exactly 3 items on every view; the two that point at the current page are hidden (html[data-view], set before first paint). */
html[data-view="in"] #li-in,html[data-view="in"] #li-up-l,html[data-view="up"] #li-up,html[data-view="up"] #li-up-l,html[data-view="reset"] #li-forgot,html[data-view="reset"] #li-up{display:none!important}
.nav ul:has(.back-site) li.mid,.nav ul:has(.back-site) li.acct{margin-left:calc(18px - var(--g))!important}
.nav ul:has(.back-site) li.last{margin-left:calc(8px - var(--g))!important}
/* consent / help notes under the forms: +1px (12.5 -> 13.5) */
.legal-note,.legal-note .link-btn{font-size:13.5px}
/* Créer un compte view: no "Mot de passe oublié"; "Se connecter" (black) follows the label with the usual 18px */
html[data-view="up"] #li-forgot{display:none!important}
html[data-view="up"] .nav ul:has(.back-site) li.last{margin-left:calc(18px - var(--g))!important}
/* big blue scribble above the title on the centered views (Se connecter / Mot de passe oublié) */
.solo-mark{display:none}
html[data-view="in"] .solo-mark,html[data-view="reset"] .solo-mark{display:block;width:76px;height:auto;margin:0 0 22px}
/* scribble sits NEXT to the title (before it, same line), smaller */
html[data-view="in"] .solo-mark,html[data-view="reset"] .solo-mark{display:inline-block;width:1.15em;height:auto;margin:0}
.pane-title:has(.solo-mark){display:flex;align-items:center;gap:.4em}

main.app-main.auth{grid-template-columns:1fr}
.solo-mark{display:inline-block;width:1.15em;height:auto;margin:0}
.pane-title:has(.solo-mark){display:flex;align-items:center;gap:.4em}
.auth-main .side .app-title::before{content:"";display:inline-block;width:1.05em;height:1.05em;margin-right:.35em;vertical-align:-.14em;background:url(/img/octopus-scribble-blue.png) center/contain no-repeat}
.auth-main .stack>.app-split+.app-split .app-title::before{display:none}
/* subtitles under the titles and the notes under the forms: 15 % narrower than the form column */
.auth-main .pane-hint,.auth-main .app-sub,.auth-main .legal-note{max-width:85%}
/* page titles (Se connecter, Créer un compte, Mot de passe oublié, Créer une teamspace…): a bit bolder (350 -> 410) */
.pane-title,.auth-main .app-title{font-weight:410}
.auth-main .side+.pane .pane-title{font-weight:420}

/* Everything appears together: the page content is hidden until the page's scripts have applied translations, placeholders and data */
.auth-main{transition:opacity .25s ease}
html:not(.ready) .auth-main{opacity:0}

/* Scrolling = the page itself scrolls (native, smooth), no inner scroll box; short pages stay vertically centered */
main.app-main.auth{flex:1 0 auto;min-height:0;height:auto;overflow:visible}
.auth-main{overflow:visible;justify-content:safe center}

/* more air between a page title and its subtitle */
.pane-hint{margin-top:12px}
.auth-main .app-split>.side .app-sub,.auth-main .app-sub{margin-top:18px}

/* ===== Offer page: 3 plan cards exactly like the home cards, side by side, same width ===== */

.plans.three{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:0;opacity:1;transform:none}
.plans .plan.mid,.plans .plan.mid:hover{border-left:1px solid #c4c4c4;border-radius:0}
.plans.three .plan.main,.plans.three .plan.main:hover{border-radius:28px 0 0 28px}
.plans.three .obtn svg,.plans.three .plan .obtn.light svg{transform:none}
.plans .plan.busy{opacity:.6;pointer-events:none}
@supports (corner-shape: squircle){
  .plans.three .plan.main,.plans.three .plan.main:hover{border-radius:40px 0 0 40px}
  .plans.three .plan.alt,.plans.three .plan.alt:hover{border-radius:0 40px 40px 0}
}
@media (max-width:980px){
  .plans.three{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto}
  .plans.three .plan.main,.plans.three .plan.main:hover{border-radius:28px 28px 0 0}
  .plans .plan.mid,.plans .plan.mid:hover{border-left:0;border-top:1px solid #c4c4c4;border-radius:0}
  .plans.three .plan.alt,.plans.three .plan.alt:hover{border-left:0;border-top:1px solid #c4c4c4;border-radius:0 0 28px 28px}
}

/* create page: the title above the form ("Créez votre espace") is a big title like the join one (scribble before it) */
.auth-main .pane .app-title{margin-bottom:0}
.auth-main .pane .app-title::before{content:"";display:inline-block;width:1.05em;height:1.05em;margin-right:.35em;vertical-align:-.14em;background:url(/img/octopus-scribble-blue.png) center/contain no-repeat}
.auth-main .pane .app-sub{margin-bottom:18px}
/* white scribble icon inside a black button */
.cta .btn-scribble{flex:none;display:block;width:18px;height:auto}

/* selects: icon (or flag) on the left, custom chevron with room on the right */
.field .select-wrap{position:relative}
.field .select-wrap select{appearance:none;-webkit-appearance:none;padding-left:42px;padding-right:44px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center/16px;cursor:pointer}
.select-wrap .sel-ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#6b6b6b}
.select-wrap .fl{display:none;width:20px;height:20px;color:inherit}
.select-wrap[data-v="fr"] .fl-fr,.select-wrap[data-v="en"] .fl-en,.select-wrap[data-v="es"] .fl-es,.select-wrap[data-v="it"] .fl-it{display:block}
/* create / join subtitles on the teamspace page: as wide as the form column (no 85 % cut) */
.auth-main .pane .app-sub,.auth-main .side .app-sub{max-width:100%}

/* join code: 10 separate squares (5 + 5), like a one-time code */
.code-boxes{display:flex;align-items:center;gap:6px;margin-bottom:16px}
.code-box{flex:1;min-width:0;height:50px;padding:0;text-align:center;text-transform:uppercase;font-size:19px;font-weight:500;letter-spacing:0;color:var(--fg);border:1px solid #d0d0d0;border-radius:10px;background:#fff;transition:border-color .2s,box-shadow .2s;caret-color:var(--primary)}
@supports (corner-shape: squircle){.code-box{border-radius:16px;corner-shape:squircle}}
.code-box:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(22,93,251,.15)}
.code-dash{flex:none;width:8px;height:2px;border-radius:1px;background:#c4c4c4}

/* grey "back" link above the title (same component as the MCP page) */
.auth-main .back{display:flex;width:max-content;max-width:none;margin:0 0 28px -3px;align-self:flex-start;text-decoration:none}

/* offer cards: option toggles (blue switch, OFF by default) inside the plan list, price updates live */
.plan li.opt{align-items:center;gap:10px}
.plan .toggle{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;cursor:pointer}
.plan .opt-text{display:block;line-height:1.35}
.plan .opt-text small{display:block;margin-top:1px;font-size:12.5px;color:#8a8a8a;font-weight:400}
.plan .toggle input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.plan .toggle .sw{flex:none;position:relative;width:38px;height:22px;border-radius:999px;background:#d0d0d0;transition:background .2s}
.plan .toggle .sw::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s}
.plan .toggle input:checked+.sw{background:var(--primary)}
.plan .toggle input:checked+.sw::after{transform:translateX(16px)}
.plan .toggle input:focus-visible+.sw{outline:2px solid var(--primary);outline-offset:3px}
.plans.three .plan button.obtn{cursor:pointer;font-family:inherit}

/* ===== Offer page, full-bleed (Martin 30/10): NO title, three cards = 1/3 each of the WHOLE white zone. The content inside a card keeps
   its previous width (380px, centred) : only the cards grow. "Modifier" = sticky light button, top left. Populaire sits inside the card. ===== */
main.app-main.offer-full{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:0!important}
.offer-edit.cta{position:sticky;top:calc(var(--navh,54px) + 14px);z-index:6;display:inline-flex;align-self:flex-start;width:max-content;margin:14px 0 -48px 14px;padding:7px 14px;font-size:13.5px;border-radius:12px;opacity:1}
.offer-full .plans.three{flex:1 0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:none;margin:0;border:0;border-radius:0;background:transparent;opacity:1;transform:none}
.offer-full .plans.three .plan,.offer-full .plans.three .plan:hover{border-radius:0!important;padding:84px max(26px,calc(50% - 190px)) 44px}
.offer-full .plans.three .plan.mid,.offer-full .plans.three .plan.alt{border-left:1px solid #d6d6d6}
.offer-full .plans.three .plan-badge{top:20px;right:20px}
html:not(.ready) main.offer-full{opacity:0}
main.offer-full{transition:opacity .25s ease}
@media (max-width:980px){
  .offer-full .plans.three{grid-template-columns:1fr}
  .offer-full .plans.three .plan.mid,.offer-full .plans.three .plan.alt{border-left:0;border-top:1px solid #d6d6d6}
}

/* option rows: icon before the label (lock = Zero Data Retention, round EU flag = models hosted in Europe) */
.plan .toggle .opt-ico{flex:none;width:20px;height:20px;color:#6b6b6b}
.plan .toggle .opt-text{flex:1}
/* pill inside a select button: "Populaire" (MCP), "−50 €" (Solo) */
.obtn .btn-pill{display:inline-flex;align-items:center;gap:5px;margin-left:4px;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:560;letter-spacing:.01em;line-height:1.3}
.obtn.btn-primary .btn-pill{background:#fff;color:var(--primary)}
.obtn.light .btn-pill{background:var(--primary);color:#fff}
.obtn .btn-pill svg{width:11px;height:11px;margin:0;transform:none}
/* offer cards: no corner scribble watermark */
.offer-full .plans.three .plan::before{display:none}

/* Solo button: "−50 €" is a plain blue label (no bubble) */
.obtn.light .btn-pill{padding:0;border-radius:0;background:none;color:var(--primary);font-size:14px;font-weight:600}
/* padlock before Zero Data Retention: Octopus blue */
.plan .toggle svg.opt-ico[stroke]{color:var(--primary)}

/* Enterprise: the "Nous contacter" button sits right under the select button */
.plan .obtn + .obtn{margin-top:10px}
/* contact popover: the language-menu component, anchored above the button */
.contact-menu a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;color:var(--fg);text-decoration:none;font-size:14.5px;font-weight:480;letter-spacing:.01em}
.contact-menu a:hover,.contact-menu a:focus-visible{background:#f0f0f0;outline:none}
.contact-menu a svg{flex:none;color:var(--primary)}

/* Enterprise card: its scribble before the price is black (the Solo one stays blue) */
.offer-full .plans .plan[data-plan="app"] .plan-price img,.offer-full .plans .plan[data-plan="app"]:hover .plan-price img{filter:brightness(0)}

/* ===== offer: sticky bar (Modifier left, monthly/yearly toggle right), title above the price, billing note ===== */
.offer-bar{position:sticky;top:calc(var(--navh,54px) + 14px);z-index:6;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:14px 14px 0;margin-bottom:-48px;pointer-events:none}
.offer-bar>*{pointer-events:auto}
.offer-bar .offer-edit.cta{position:static;margin:0;align-self:auto}
.interval-toggle{display:inline-flex;gap:2px;padding:3px;border:1px solid #c4c4c4;border-radius:12px;background:linear-gradient(180deg,#fafafa 0%,#f0f0f0 100%);box-shadow:inset 0 0 0 1px #fff}
@supports (corner-shape: squircle){.interval-toggle{border-radius:17px;corner-shape:squircle}}
.interval-toggle button{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border:0;border-radius:9px;background:none;color:#555;font-size:13.5px;font-weight:520;letter-spacing:.01em;cursor:pointer;transition:background .2s,color .2s}
.interval-toggle button.on{background:#0a0a0a;color:#fff}

.plan .plan-name{margin-bottom:14px}
.plan .plan-price{margin:0 0 6px}

/* selected segment of the monthly/yearly toggle: white with a grey stroke */
.interval-toggle button.on{background:#fff;color:var(--fg);box-shadow:0 0 0 1px #c4c4c4}
.plan .plan-price{margin:0 0 16px}

/* payment step: Stripe's form embedded in the page (wide enough for its two-column layout), title with the scribble, back link above */
.auth-main>.pay-view{max-width:1000px}
.pay-view .app-title{text-align:left}
.pay-view .app-title::before{content:"";display:inline-block;width:1.05em;height:1.05em;margin-right:.35em;vertical-align:-.14em;background:url(/img/octopus-scribble-blue.png) center/contain no-repeat}
.pay-view .app-sub{max-width:520px;margin:18px 0 22px;text-align:left}
#checkout-mount{min-height:320px}
.code-row{max-width:400px;margin-top:26px}
.code-row form{margin-top:12px}

/* payment step, full-bleed (Martin 2/11): no title/intro, the Stripe container takes the whole white zone, "Modifier mon offre" = sticky light button top left (like the offer page) */
html.to-pay .auth-main,.auth-main:has(.pay-view:not(.hidden)){padding:0!important;align-items:stretch;justify-content:flex-start}
html.to-pay .auth-main>.pay-view,.auth-main>.pay-view{max-width:none;width:100%}
.pay-back.cta{position:sticky;top:calc(var(--navh,54px) + 14px);z-index:6;display:inline-flex;width:max-content;margin:14px 0 0 14px;padding:7px 14px;font-size:13.5px;border-radius:12px}
.pay-view #checkout-mount{margin-top:-8px}
.pay-view .form-msg{margin:12px 24px 0}
.pay-view .code-row{margin:26px 24px 40px}
/* access code = sticky light button bottom right (Martin 2/11); the form opens as a small card above it */
.pay-view .code-row{position:fixed;right:28px;bottom:28px;z-index:20;margin:0;max-width:340px;display:flex;flex-direction:column-reverse;align-items:flex-end;gap:10px}
.pay-view .code-row form{margin:0;width:320px;padding:14px;background:#fff;border:1px solid #d6d6d6;border-radius:14px;box-shadow:0 8px 28px rgba(0,0,0,.14)}
.pay-view .code-row form:not(.hidden){display:flex;flex-direction:column;gap:10px}

/* ===== App shell navbar (Martin 2/11): teamspace name + tabs, no flag, no "Retour au site" ===== */
.app-nav{gap:8px}
.app-nav .nav-brand{flex:none}
.app-nav ul{flex:none;display:flex;justify-content:flex-end;margin-left:4px}
/* Tutorial button (same as getoctopus.app/mcp), right-aligned in the navbar, just left of the account */
.app-nav .app-tuto{margin:0 0 0 auto;transform:none;opacity:1;flex:none;padding:6px 14px;font-size:14.5px;gap:7px;cursor:pointer}
@media (max-width:760px){.app-nav .app-tuto{order:4;margin-left:auto}}
/* Right cluster (Martin 02/11): everything right-aligned with one even gap — Tutoriel · (Actualiser, desktop only) · user menu */
.app-nav .nav-right{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto}
.app-nav .nav-right .app-tuto{margin-left:0}
.app-nav ul{margin-left:0;gap:0}
.app-nav ul li.acct{margin-left:0}   /* 8-px nav gap only between Tutoriel and the avatar (measured: was 16) */
.app-tabs{display:flex;align-items:center;gap:2px;margin-left:0;overflow-x:auto;scrollbar-width:none}
.app-tabs::-webkit-scrollbar{display:none}
.app-tab{color:rgba(255,255,255,.82);text-decoration:none;font-size:14.5px;font-weight:500;padding:7px 9px;border-radius:10px;white-space:nowrap;transition:background .15s,opacity .15s}   /* tighter inner left/right spacing (Martin 02/11) */
.app-tab:hover{color:#fff;background:rgba(255,255,255,.12)}
.app-tab.on{opacity:1;background:rgba(255,255,255,.2)}  /* looks bolder without changing the glyph widths: the item never resizes */  /* looks bolder without changing the glyph widths: the item never resizes */
.app-tab:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:760px){.app-nav{flex-wrap:wrap}.app-tabs{order:5;flex:1 1 100%;margin-left:0}}
/* app pages: empty white panel */
main.app-page{padding:0!important;display:block}

/* ===== Settings page: Users + Billing (buttons = .cta / .cta.ghost, select = .field select, pills = .chip, corners = the site's squircle) ===== */
.set{max-width:920px;margin:0 auto;padding:44px clamp(20px,4vw,48px) 80px}
.set-title{font-size:30px;font-weight:420;letter-spacing:-.02em;margin:0 0 28px}
.set-sec{border:1px solid #c4c4c4;border-radius:28px;padding:24px clamp(16px,3vw,28px);margin:0 0 22px;background:#fff}
.set-sec h2{font-size:20px;font-weight:420;letter-spacing:-.02em;margin:0 0 16px}
.set-h3{font-size:15px;font-weight:520;margin:26px 0 10px}
.set-sub{margin:0 0 10px;color:#6b6b6b;font-size:14px}
.set-hint{margin:10px 0 0;color:#6b6b6b;font-size:13px;line-height:1.5}
.set-msg{margin:10px 0 0;color:#b3261e;font-size:13.5px}
.set-msgbox{min-height:4px}
.set-plain{margin:0 0 22px}
.mtable{width:100%;border-collapse:collapse;font-size:15px;background:#fff}
.mtable th{text-transform:uppercase;letter-spacing:.04em;text-align:left;color:#6b6b6b;font-weight:480;font-size:12.5px;padding:8px 12px 8px 0;border-bottom:1px solid #e4e4e4}
.mtable td{padding:12px 12px 12px 0;border-bottom:1px solid #eee;vertical-align:middle}
.mtable tbody tr:last-child td{border-bottom:0}
.c-who{display:flex;align-items:center;gap:12px;min-width:0}
.mav{flex:none;width:34px;height:34px;border-radius:50%;background:#e8efff;color:var(--primary);display:grid;place-items:center;font-size:12.5px;font-weight:600}
.mwho{display:flex;flex-direction:column;min-width:0}
.mwho b{font-weight:520;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mwho small{color:#6b6b6b;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.you{font-style:normal;font-size:11.5px;color:var(--primary);background:#e8efff;border-radius:999px;padding:1px 8px;margin-left:6px;font-weight:500}
.mrole .field{margin:0}
.mrole .field select{padding:8px 12px;font-size:14px}
.mrole{width:190px}
.chip-role{font-size:14px;color:#333}
.mjoin{font-size:13px;color:#6b6b6b;width:130px;white-space:nowrap}
.mact{text-align:right;width:100px}
.jcard{margin-top:28px}
.jbox{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin:0}
.jbox code{font-size:18px;letter-spacing:.06em;font-weight:560}
.jact{display:flex;gap:8px}
.bgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.bcard{display:flex;flex-direction:column;gap:6px;padding:16px;border:1px solid #e4e4e4;border-radius:18px}
.bcard small{color:#6b6b6b;font-size:12.5px}.bcard b{font-size:22px;font-weight:420;letter-spacing:-.02em}.bcard span{color:#6b6b6b;font-size:12.5px;line-height:1.4}
.chip.badge{display:inline-block;padding:3px 11px;border:1px solid #e4e4e4;border-radius:999px;font-size:12.5px;font-weight:520;color:#333;background:#fff}
.chip.badge.ok{background:#e3f6e8;border-color:#e3f6e8;color:#14612c}.chip.badge.warn{background:#fff1d6;border-color:#fff1d6;color:#8a5a00}.chip.badge.bad{background:#fde4e2;border-color:#fde4e2;color:#b3261e}
.set-actions{margin-top:18px}
.itable{width:100%;border-collapse:collapse;font-size:13.5px}
.itable th{text-align:left;color:#6b6b6b;font-weight:480;font-size:12.5px;padding:8px 8px 8px 0;border-bottom:1px solid #e4e4e4}
.itable td{padding:10px 8px 10px 0;border-bottom:1px solid #f0f0f0}
.ilinks a{margin-right:12px;color:var(--primary);text-decoration:none}
@media (max-width:820px){.bgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.mjoin,.mtable th:nth-child(3){display:none}.mrole{width:auto}}
@supports (corner-shape: squircle){
  .set-sec{border-radius:40px;corner-shape:squircle}
  .bcard,.jbox{border-radius:28px;corner-shape:squircle}
  .app-tab{border-radius:15px;corner-shape:squircle}
  .set .cta{border-radius:15px;corner-shape:squircle}
}
.set .cta{margin-top:0}

/* tab icons + vertical separators (after Tâches, and between the language switcher and the user) */
.app-tab{display:inline-flex;align-items:center;gap:7px}
.app-tab svg{flex:none}
.app-sep{width:1px;height:20px;background:rgba(255,255,255,.35);margin:0 8px;flex:none}
.app-tab-ico{display:block;flex:none;object-fit:contain}

/* language switcher sits right after the teamspace name, then a separator, then the tabs */
.app-lang{display:flex;align-items:center;margin-left:-4px;flex:none}   /* flag closer to the teamspace name (Martin 02/11) */
.app-lang>li{display:flex;align-items:center;list-style:none;order:0!important;margin:0!important}
.lang-sep{margin:0 6px 0 12px}
.app-nav .logo{font-size:17px}

.set .cta,.code-row .cta{opacity:1;transform:none}
.code-row .cta{margin-top:0;box-shadow:0 2px 10px rgba(0,0,0,.08)}
@supports (corner-shape: squircle){.code-row .cta,.pay-back.cta{border-radius:15px;corner-shape:squircle}}
.mrole .field .select-wrap select{padding-left:14px}

/* ===== Frame / top bar color (Settings → Appearance): blue (default), white, purple, green ===== */
html[data-frame]{--primary-frame:var(--frame)}
html[data-frame="white"]{--frame:#fff}
html[data-frame="purple"]{--frame:#7c4dff}
html[data-frame="green"]{--frame:#1f9d55}
html[data-frame],html[data-frame] body{background:var(--frame)}
html[data-frame="white"] .app-nav,html[data-frame="white"] .app-nav a,html[data-frame="white"] .app-nav button,html[data-frame="white"] .app-nav .logo,html[data-frame="white"] .app-nav .lang-btn{color:#0a0a0a}
html[data-frame="white"] .app-tab-ico{filter:brightness(0)}
html[data-frame="white"] .app-nav .logo-mark{filter:none;content:url(/img/octopus-scribble-blue.png)}
html[data-frame="white"] .app-tab:hover{background:rgba(0,0,0,.06)}
html[data-frame="white"] .app-tab.on{background:rgba(22,93,251,.12);color:var(--primary,#165dfb);opacity:1}
html[data-frame="white"] .app-nav .app-tab.on .app-tab-ico{filter:none;content:url(/img/octopus-scribble-blue.png)}
html[data-frame="white"] .app-sep{background:rgba(0,0,0,.2)}
html[data-frame="white"] .app-nav .acct-btn .avatar{background:#efefef;color:#0a0a0a;box-shadow:none}
html[data-frame="white"] .shell{box-shadow:0 0 0 1px #e1e1e1}
.sw{display:inline-flex;align-items:center;gap:9px}
.sw i{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);flex:none}
.sw.on{border-color:#0a0a0a;box-shadow:0 0 0 1px #0a0a0a}
.swatches{display:flex;flex-wrap:wrap;gap:10px}

/* Shared modal (Martin 02/11): no page darkening, light spread shadow, darker grey stroke + 4-px outer white stroke at 25 % */
.confirm-modal{width:min(420px,calc(100vw - 32px));padding:26px;border:1px solid #b9b9b9;border-radius:20px;background:#fff;color:var(--fg);box-shadow:0 18px 60px rgba(0,0,0,.16),0 4px 14px rgba(0,0,0,.07);margin:auto}
.confirm-modal::backdrop{background:transparent}
.confirm-modal{overscroll-behavior:contain}
html:has(dialog[open]:modal),html:has(dialog[open]:modal) body,html:has(dialog[open]:modal) .shell-scroll,html:has(dialog[open]:modal) .shell{overflow:hidden!important}
/* (the outer white ring was removed on 02/11: its pseudo-element overflowed the dialog box and made every modal scroll) */
.confirm-modal h3{margin:0 0 8px;font-size:19px;font-weight:480;letter-spacing:-.01em}
.confirm-modal p{margin:0 0 22px;color:#555;font-size:14.5px;line-height:1.5;font-weight:400}   /* the site body is weight 300: modal copy reads at normal weight (Martin 02/11) */
.cm-act{display:flex;justify-content:flex-end;gap:8px}
.cm-act .cta{margin:0}
.cta.danger{background:#b3261e;border-color:#b3261e;color:#fff}
@supports (corner-shape: squircle){.confirm-modal{border-radius:30px;corner-shape:squircle}}

/* Users page: same top bar as the desktop app (wide 80px side padding, 26px title with icon on the left, actions on the right) */
.set.wide{max-width:none;margin:0;padding:32px 80px 36px}
.set-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 28px}
.set-head .set-title{display:flex;align-items:center;gap:10px;font-size:26px;margin:0}
.set-head .set-title svg{color:#6b6b6b;flex:none}
.set-head-act{margin-left:auto;display:flex;align-items:center;gap:8px}
@media (max-width:820px){.set.wide{padding:24px 20px 32px}}
.set-head .set-title svg,.set-head .set-title .title-ico{width:24px;height:24px;flex:none}
.set-head .set-title .title-ico{height:auto}
.confirm-modal{position:relative}
.confirm-modal .cta{opacity:1;transform:none;display:inline-flex;align-items:center;justify-content:center;padding:9px 18px;font-size:14px;cursor:pointer}
.confirm-modal .cta.ghost{background:#fff;color:var(--fg);border:1px solid #c4c4c4}
.confirm-modal .cta.danger{background:#b3261e;border:1px solid #b3261e;color:#fff}
.cm-x{position:absolute;top:14px;right:14px;width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:#555;cursor:pointer}
.cm-x:hover{background:#f0f0f0}
.confirm-modal h3{padding-right:36px}
.confirm-modal h3{display:flex;align-items:center;gap:10px}
.cm-ico{display:flex;flex:none;color:var(--primary)}
.invite-modal{width:min(520px,calc(100vw - 32px))}
.inv-label{display:flex;align-items:center;gap:6px;margin:0 0 8px;font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#6b6b6b}
.inv-code{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid #e1e1e1;border-radius:12px;background:#f7f7f7}
.inv-code code{flex:1;font-size:18px;font-weight:600;letter-spacing:.15em;color:var(--fg)}
.inv-hint{margin:8px 0 18px;color:#6b6b6b;font-size:13px;line-height:1.55}
.inv-roles{margin-top:4px}
.invite-modal .cm-act{margin-top:4px}
.invite-modal .cta:not(.ghost){background:var(--primary);border:1px solid var(--primary);color:#fff}
.invite-modal .cta svg{margin-right:6px}
.set-head-act .cta{display:inline-flex;align-items:center;gap:8px;margin:0;padding:9px 16px;font-size:14px;opacity:1;transform:none}
.mbrain{width:110px}
.brain-btn{display:inline-grid;place-items:center;width:34px;height:34px;border:1px solid #d6d6d6;border-radius:10px;background:#fff;color:var(--fg);cursor:pointer}
.brain-btn:hover:not([disabled]){background:#f3f3f3}
.brain-btn[disabled]{opacity:.35;cursor:default}
.invite-modal{width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:auto}
.inv-form{display:flex;gap:8px;align-items:stretch}
.inv-form input{flex:1;min-width:0;padding:9px 12px;font-size:14px;border:1px solid #c4c4c4;border-radius:12px;background:#fff}
.inv-form input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(22,93,251,.15)}
.inv-form .select-wrap select{padding:9px 34px 9px 12px;font-size:14px;background-position:right 10px center}
.inv-form .cta{margin:0}
.inv-list{list-style:none;margin:0 0 18px;padding:0}
.inv-list li{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid #eee;font-size:14px}
.inv-list li:first-child{border-top:0}
.inv-mail{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inv-state{color:#8a8a8a;font-size:12.5px}
.inv-rm.cm-x{position:static;width:28px;height:28px}
.inv-form .field{margin:0}.inv-form .field select{padding:9px 38px 9px 12px;font-size:14px;height:100%}
.inv-code{flex-direction:column;align-items:stretch;gap:8px;padding:12px 14px}
.inv-code-row{display:flex;align-items:center;gap:10px}
.inv-code-row code{flex:1;font-size:18px;font-weight:600;letter-spacing:.15em;color:var(--fg)}
.inv-code-hint{margin:0;color:#6b6b6b;font-size:12.5px;line-height:1.5}
.invite-modal .inv-label+.inv-code,.invite-modal #inv-list+.inv-label{margin-top:0}
.invite-modal #inv-list+.inv-label{margin-top:30px}

/* ===== Invite modal layout (v3): header / grouped cards / roles / footer. Spacing scale: 22 (header→body), 16 (between groups), 12 (inside a card) ===== */
.invite-modal{width:min(580px,calc(100vw - 32px));padding:28px}
.invite-modal h3{margin:0 0 22px}
.inv-body{display:flex;flex-direction:column;gap:16px}
.inv-card{display:flex;flex-direction:column;gap:12px;padding:16px 18px;border:1px solid #e4e4e4;border-radius:16px;background:#f8f8f8}
.inv-card .inv-label,.inv-roles .inv-label{margin:0}
.inv-card .inv-hint{margin:0;font-size:12.5px;line-height:1.5;color:#6b6b6b}
.inv-card .inv-form{margin:0}
.inv-card .inv-list{margin:0}
.inv-card .inv-list:empty{display:none}
.inv-code-row{display:flex;align-items:center;gap:8px}
.inv-code-row code{flex:1;min-width:0;font-size:19px;font-weight:600;letter-spacing:.14em;color:var(--fg)}
.inv-code-row .cta{margin:0;white-space:nowrap}
.inv-roles{display:flex;flex-direction:column;gap:8px;padding:4px 4px 0}
.inv-roles dl{margin:0;display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;font-size:13.5px;line-height:1.45}
.inv-roles dt{font-weight:560;color:var(--fg)}
.inv-roles dd{margin:0;color:#555}
.inv-roles .inv-hint{margin:2px 0 0;font-size:12.5px;line-height:1.5;color:#6b6b6b}
.invite-modal .set-msgbox{min-height:0;margin-top:4px}
.invite-modal .cm-act{margin-top:20px}
.mtable th{white-space:nowrap}.mbrain{width:150px}
.inv-roles{gap:4px}
.inv-roles dl{gap:0 10px;line-height:1.35}
.inv-roles dt,.inv-roles dd{margin:0;padding:0}

/* ===== HARD RULE (Martin 2/11): every rounded shape is a squircle (iOS-style corner smoothing), never a plain circular arc.
   Universal switch + larger radii where the old plain-arc radius looked tight (a squircle needs ~1.5x the radius to read the same). ===== */
@supports (corner-shape: squircle){
  *,*::before,*::after{corner-shape:squircle}
  .app-tab,.brain-btn{border-radius:15px}
  .inv-card{border-radius:24px}
  .inv-form input,.inv-form .field select,.field select,.field input,.rsel{border-radius:18px}
  .mrole .field select,.rsel{border-radius:16px}
  .confirm-modal,.invite-modal{border-radius:30px}
  .legal-modal{border-radius:30px}
  .code-box{border-radius:16px}
  .set-head-act .cta,.confirm-modal .cta,.invite-modal .cta,.mact .cta,.mrm{border-radius:16px}
  .you,.chip.badge,.inv-state{border-radius:999px}
}
.mtable th:nth-child(2),.mbrain{text-align:left}
.mbrain{width:190px}
.brain-btn{display:inline-flex;align-items:center;gap:8px;width:auto;height:34px;padding:0 12px 0 10px;font-size:13.5px;font-weight:480;white-space:nowrap}
.brain-btn svg{flex:none}
.mbrain{padding-right:56px}
.mtable th:nth-child(2){padding-right:56px}
.inv-roles dl{display:block}
.inv-roles dt{display:inline;margin:0}
.inv-roles dt::after{content:" "}
.inv-roles dd{display:inline;margin:0}
.inv-roles dd::after{content:"";display:block}
.inv-roles dl{line-height:1.4}
.inv-roles dd::after{margin-bottom:10px}
.inv-roles dd:last-child::after{margin-bottom:0}


/* ===== Tasks page ===== */
.t-sec{margin:0 0 28px}
.t-sec h2{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:15px;font-weight:560;letter-spacing:-.01em}
.t-sec h2 svg{color:#6b6b6b;flex:none}
.t-sec.sub h2{font-size:13.5px}
.t-list{display:flex;flex-direction:column;gap:2px}
.t-row{display:flex;align-items:flex-start;gap:12px;padding:9px 8px;border-radius:14px;transition:background .15s}
.t-row:hover{background:#f6f6f6}
.t-row.flash{background:#fff3cf;box-shadow:0 0 0 2px #f2b53c inset}
.t-st{flex:none;margin-top:1px;display:inline-grid;place-items:center;border:0;background:transparent;padding:0;cursor:pointer}
span.t-st{cursor:default}
.t-st:hover{opacity:.7}
.st-todo{color:#8a8a8a}.st-prog{color:#d98a00}.st-done{color:#1f9d55}
.t-main{flex:1;min-width:0}
.t-title{font-size:15px;line-height:1.4;color:var(--fg)}
.t-title.done{color:#8a8a8a;text-decoration:line-through}
.t-desc{margin-top:2px;font-size:13px;color:#6b6b6b;white-space:pre-wrap}
.t-tools{display:flex;gap:2px;opacity:0;transition:opacity .15s}
.t-row:hover .t-tools,.t-tools:focus-within{opacity:1}
.t-ib{display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:9px;background:transparent;color:#6b6b6b;cursor:pointer}
.t-ib:hover{background:#ececec;color:var(--fg)}
.t-del:hover{color:#b3261e}
.t-assign{flex:none;display:flex;align-items:center;border:0;background:transparent;padding:0;cursor:pointer}
span.t-assign{cursor:default}
.t-assign.empty{opacity:0;transition:opacity .15s}
.t-row:hover .t-assign.empty,.t-assign.empty:focus-visible{opacity:1}
.t-assign-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border:1px dashed #bdbdbd;border-radius:999px;font-size:11.5px;font-weight:500;color:#6b6b6b}
.t-avs{display:flex}
.t-avs .t-av{margin-left:-6px;box-shadow:0 0 0 2px #fff}
.t-avs .t-av:first-child{margin-left:0}
.t-av{flex:none}
.t-more{background:#eee;color:#555}
.t-add{display:flex;align-items:center;gap:10px;margin:4px 8px 0;color:#6b6b6b}
.t-add input{flex:1;min-width:0;height:34px;border:0;background:transparent;font-size:14.5px;color:var(--fg)}
.t-add input:focus{outline:none}
.t-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:48px 16px;text-align:center;color:#6b6b6b;font-size:14px}
.t-empty>b{max-width:34ch;text-wrap:balance}
.t-empty>span:not(.t-empty-ico){display:block;max-width:46ch;line-height:1.55;text-wrap:pretty}   /* the icon tile is a span too: keep its grid centring */
.t-empty b{font-size:17px;font-weight:480;color:var(--fg)}
.t-over{margin:8px 0 0;border:1px solid #e4e4e4;border-radius:20px}
.t-over-h{display:flex;align-items:center;gap:8px;width:100%;padding:13px 16px;border:0;background:transparent;font-size:13.5px;font-weight:560;color:#555;cursor:pointer;text-align:left}
.t-over-h em{font-style:normal;font-size:11.5px;background:#eee;border-radius:999px;padding:1px 8px}
.t-chev{margin-left:auto;display:grid;transition:transform .2s}.t-chev.up{transform:rotate(180deg)}
.t-over-b{padding:6px 16px 8px;border-top:1px solid #eee;display:flex;flex-direction:column;gap:6px}
.t-menu{position:fixed;z-index:1000;width:178px;padding:6px;background:#fff;border:1px solid #d6d6d6;border-radius:16px;display:flex;flex-direction:column;gap:2px}
.t-menu button{display:flex;align-items:center;gap:10px;padding:8px 10px;border:0;border-radius:11px;background:transparent;font-size:14px;color:var(--fg);cursor:pointer;text-align:left}
.t-menu button:hover{background:#f3f3f3}
.t-menu button i{margin-left:auto;display:grid;color:#6b6b6b}
.t-menu button.st-todo svg{color:#8a8a8a}.t-menu button.st-prog svg{color:#d98a00}.t-menu button.st-done svg{color:#1f9d55}
.task-modal{width:min(500px,calc(100vw - 32px))}
.task-modal h3{margin-bottom:18px}
.t-form{display:flex;flex-direction:column;gap:10px;margin-bottom:6px}
.t-form input,.t-form textarea{width:100%;padding:10px 13px;font:inherit;font-size:14.5px;border:1px solid #c4c4c4;border-radius:16px;background:#fff;color:var(--fg);resize:vertical}
.t-form input:focus,.t-form textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(22,93,251,.15)}
.t-form .inv-label{margin:8px 0 0}
.t-pick{display:flex;flex-direction:column;gap:2px;max-height:240px;overflow:auto;padding:4px;border:1px solid #e4e4e4;border-radius:16px}
.t-pick-row{display:flex;align-items:center;gap:10px;padding:7px 9px;border:0;border-radius:11px;background:transparent;font-size:14px;color:var(--fg);cursor:pointer;text-align:left}
.t-pick-row:hover,.t-pick-row.on{background:#f3f3f3}
.t-pick-row span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t-pick-row i{display:grid;color:var(--primary)}
.task-modal .cm-act{margin-top:16px}
.t-ask-p{margin:0 0 20px;color:#555;font-size:14.5px;line-height:1.55}
.t-ask-btns{display:flex;flex-direction:column;gap:10px}
.t-ask-btns .cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin:0;padding:12px 18px;text-decoration:none}
.t-ask-btns .cta.ghost{background:#fff;color:var(--fg);border:1px solid #c4c4c4}
.set-head-act .cta.ghost{background:#fff;color:var(--fg);border:1px solid #c4c4c4}
.set-head-act .cta img{display:block}

/* Settings page = same layout as the rest of the app (wide, plain sections); frame colour really recolours the bar + frame */
.nav{background:var(--frame,var(--primary))}
.shell::after{box-shadow:0 0 0 8px var(--frame,var(--primary))}
@media (max-width:760px){.shell::after{box-shadow:0 0 0 6px var(--frame,var(--primary))}}
.set-block{margin:0 0 34px}
.set-block .set-sub{margin:0 0 12px}
.set-block .set-h3{margin:26px 0 10px}
.pay-card{display:flex;align-items:center;gap:18px;width:min(380px,100%);padding:16px 20px;border-radius:20px;background:linear-gradient(135deg,#1c2a4a,#2d5ff5);color:#fff;font-size:15px}
.pay-card .pc-brand{font-weight:650;letter-spacing:.06em;font-size:13px}
.pay-card .pc-num{flex:1;letter-spacing:.12em}
.pay-card .pc-exp{font-size:13px;opacity:.85}
.pay-card.none{background:#f6f6f6;color:#555;border:1px dashed #cfcfcf}
.pay-card.none .pc-num{letter-spacing:0;font-size:14px}
.set-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.set-actions .cta{display:inline-flex;align-items:center;margin:0;text-decoration:none}
.set-actions .cta.ghost{background:#fff;color:var(--fg);border:1px solid #c4c4c4}
.plan.current{box-shadow:inset 0 0 0 2px var(--primary)}
.plan-current{margin:0 0 8px;font-size:12.5px;font-weight:600;color:var(--primary);text-align:center}
.plan.current.main .plan-current,.plan.main .plan-current{color:#fff}

/* Task types + reminders */
.t-type{flex:none;display:inline-flex;align-items:center;gap:6px;margin-top:1px;padding:2px 10px;border-radius:999px;font-size:11.5px;font-weight:560;color:var(--tc);background:color-mix(in srgb,var(--tc) 12%,#fff)}
.t-type i,.t-chip i,.t-tchip i{width:7px;height:7px;border-radius:50%;background:var(--tc);display:inline-block}
.t-remind{flex:none;display:inline-flex;align-items:center;gap:5px;margin-top:1px;padding:2px 10px;border-radius:999px;font-size:11.5px;font-weight:520;color:#555;background:#f1f1f1}
.t-remind.late{color:#b3261e;background:#fde8e6}
.t-filters{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.t-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 13px;border:1px solid #d6d6d6;border-radius:999px;background:#fff;font-size:13px;color:#444;cursor:pointer}
.t-chip.on{background:#0a0a0a;border-color:#0a0a0a;color:#fff}
.t-types{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.t-tchip{display:inline-flex;align-items:center;border:1px solid #d6d6d6;border-radius:999px;background:#fff;overflow:hidden}
.t-tchip>button{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border:0;background:transparent;font-size:13px;color:#444;cursor:pointer}
.t-tchip .t-tdel{padding:5px 8px 5px 0;color:#8a8a8a}
.t-tchip.on{border-color:var(--tc);background:color-mix(in srgb,var(--tc) 12%,#fff)}
.t-tchip.on>button{color:var(--tc);font-weight:560}
.t-tnew{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border:1px dashed #bdbdbd;border-radius:999px;background:transparent;font-size:13px;color:#6b6b6b;cursor:pointer}
.t-newtype{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.t-newtype[hidden]{display:none}
.t-newtype input{flex:1;min-width:140px;padding:7px 12px;font:inherit;font-size:13.5px;border:1px solid #c4c4c4;border-radius:14px;background:#fff}
.t-sw{display:flex;gap:6px}
.t-swb{width:20px;height:20px;border:2px solid #fff;border-radius:50%;cursor:pointer;box-shadow:0 0 0 1px #d0d0d0}
.t-swb.on{box-shadow:0 0 0 2px #0a0a0a}
.t-newtype .cta{margin:0;padding:7px 14px}
.t-rem{display:flex;align-items:center;gap:8px}
.t-rem input{padding:8px 12px;font:inherit;font-size:14px;border:1px solid #c4c4c4;border-radius:14px;background:#fff}
.task-modal{max-height:calc(100vh - 40px);overflow:auto}

/* Frame picker reuses the language picker look, on the white panel */
.frame-pick .lang-btn{color:var(--fg);padding:2px}
.frame-pick .lang-btn:hover .lang{box-shadow:0 0 0 1px #0a0a0a}
.frame-pick .lang-menu{left:0}
.frame-dot{display:block;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);flex:none}
.frame-pick .lang-btn .frame-dot{width:26px;height:26px}
/* White frame: grey stroke around the content zone (stroke first, then the 8px white frame under it) */
html[data-frame="white"] .shell::after{box-shadow:inset 0 0 0 1px #d2d2d2,0 0 0 8px #fff}
@media (max-width:760px){html[data-frame="white"] .shell::after{box-shadow:inset 0 0 0 1px #d2d2d2,0 0 0 6px #fff}}
.t-empty-ico{display:grid;place-items:center;width:56px;height:56px;margin-bottom:6px;border:1px solid #e1e1e1;border-radius:18px;background:#fff;color:#6b6b6b}

/* Billing = two 50% cards side by side (Abonnement | Moyen de paiement) */
.bill-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
.bill-card{display:flex;flex-direction:column;padding:20px 22px;border:1px solid #e1e1e1;border-radius:24px;background:#fff}
.bill-card .set-h3{margin:0 0 14px;font-size:15px;font-weight:560}
.bill-card .bgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.bill-card .bcard{padding:12px 14px;border-radius:16px}
.bill-card .bcard b{font-size:19px}
.bill-card .set-hint{margin:12px 0 0}
.bill-card .set-actions{margin-top:auto;padding-top:18px}
.bill-card .pay-card{width:100%}
@media (max-width:980px){.bill-2{grid-template-columns:1fr}.bill-card .bgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Billing v2: the 3 stat cards on top, then Moyen de paiement | Factures as two 50% cards */
.bill-card .bgrid{grid-template-columns:none}
.set-block>.set-body>.bgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
.set-block>.set-body>.set-hint{margin:12px 0 0}
.set-block>.set-body>.set-actions{margin:16px 0 22px}
.bill-card .set-actions{margin-top:auto;padding-top:18px}
.bill-card .itable{margin-top:2px}
@media (max-width:760px){.set-block>.set-body>.bgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Bento: teamspace customization cards */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.bento-admin{display:contents}
.bcell{display:flex;flex-direction:column;gap:10px;padding:20px 22px;border:1px solid #e1e1e1;border-radius:24px;background:#fff;min-width:0}
.bcell.c-3{grid-column:span 3}.bcell.c-6{grid-column:span 6}
.bcell h3{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-size:15px;font-weight:560;letter-spacing:-.01em}
.bcell h3 svg{color:#6b6b6b}
.c-lab{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#6b6b6b;margin-top:4px}
.c-in{width:100%;padding:9px 13px;font:inherit;font-size:14.5px;border:1px solid #c4c4c4;border-radius:16px;background:#fff;color:var(--fg)}
.c-in:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(22,93,251,.15)}
.c-hint{color:#7a7a7a;font-size:12.5px;line-height:1.5}
.c-up{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.c-img{display:block;max-height:92px;max-width:100%;border-radius:14px}
.c-img.sq{width:64px;height:64px;object-fit:cover}
.c-img.none{display:grid;place-items:center;width:64px;height:64px;border:1px dashed #c4c4c4;color:#9a9a9a}
.c-up.wide .c-img.none{width:120px}
.c-btns{display:flex;gap:8px;flex-wrap:wrap}
.c-btns .cta{margin:0;padding:8px 14px;font-size:13.5px;background:#fff;color:var(--fg);border:1px solid #c4c4c4}
.c-btns .cta[hidden]{display:none}
.c-save{grid-column:span 6;display:flex;align-items:center;justify-content:flex-end;gap:14px}
.c-save .cta{margin:0}
.c-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:6px 0}
.c-row[hidden]{display:none}
.c-row b{display:block;font-size:14.5px;font-weight:520}.c-row small{display:block;color:#7a7a7a;font-size:12.5px}
.c-acc{display:flex;align-items:center;gap:10px}
.c-acc input[type=color]{width:42px;height:34px;padding:2px;border:1px solid #c4c4c4;border-radius:12px;background:#fff;cursor:pointer}
.c-acc .cta{margin:0;padding:7px 14px;font-size:13.5px;background:#fff;color:var(--fg);border:1px solid #c4c4c4}
@media (max-width:980px){.bcell.c-3{grid-column:span 6}}
.set-block>.set-body>.set-actions.bill-manage{margin:16px 0 0}
.set-block>.set-body>.bgrid{margin-bottom:16px}

/* MCP guide embedded in Settings */
.mcp-embed{max-width:860px;font-size:15px;line-height:1.6}
.mcp-embed h1{font-size:26px;font-weight:420;letter-spacing:-.02em;margin:0 0 18px}
.mcp-embed h2{font-size:18px;font-weight:520;margin:30px 0 10px;display:flex;align-items:center}
.mcp-embed p,.mcp-embed li{color:#444}
.mcp-embed ol,.mcp-embed ul{padding-left:22px}
.mcp-embed a{color:var(--primary)}
.mcp-embed .code{max-width:100%}
.mcp-embed .copy{cursor:pointer}

/* Brain page: sticky top-right "you're using Octopus Web" card (zero-height sticky wrapper so it never pushes the title) */
.web-card-wrap{position:sticky;top:16px;z-index:8;height:0}
.web-card{position:absolute;top:0;right:0;width:min(360px,calc(100vw - 40px));display:flex;flex-direction:column;gap:10px;padding:18px 20px;border:1px solid #d9e2fb;border-radius:22px;background:#f4f7ff;box-shadow:0 6px 22px rgba(22,93,251,.08)}
.wc-head{display:flex;align-items:center;gap:10px;font-size:15px}
.wc-head b{font-weight:560;letter-spacing:-.01em}
.web-card p{margin:0;font-size:13.5px;line-height:1.55;color:#45506b}
.wc-btns{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:2px}
.wc-btns .cta{display:inline-flex;align-items:center;gap:7px;margin:0;padding:8px 14px;font-size:13.5px;text-decoration:none}
.wc-btns .cta.ghost{background:#fff;color:var(--fg);border:1px solid #c4c4c4}
.wc-btns .cta img{display:block}
.wc-link{font-size:13px;color:var(--primary);text-decoration:none;margin-left:2px}
.wc-link:hover{text-decoration:underline}
@media (max-width:1100px){.web-card-wrap{position:static;height:auto;margin-bottom:18px}.web-card{position:static;width:auto}}
.t-empty .t-empty-btn{display:inline-flex;align-items:center;gap:8px;margin:14px 0 0;padding:10px 20px}
.t-chip-new{border-style:dashed;color:#6b6b6b}
.t-chip-new:hover{border-color:#8a8a8a;color:var(--fg)}
.t-sw.big{display:flex;gap:10px}.t-sw.big .t-swb{width:28px;height:28px}

/* ===== Task dialogs: ONE spacing scale. 24 between groups · 8 label→control · 10 inside a group of controls · 28 before the footer ===== */
.task-modal{width:min(520px,calc(100vw - 32px));padding:28px}
.task-modal h3{margin:0 0 24px}
.task-modal .t-form{display:flex;flex-direction:column;gap:24px;margin:0}
.task-modal .t-group{display:flex;flex-direction:column;gap:8px}
.task-modal .t-group.tight{gap:10px}
.task-modal #tr-box{display:flex;flex-direction:column;gap:24px}
.task-modal .inv-label{margin:0}
.task-modal .t-types{display:flex;flex-wrap:wrap;gap:8px}
.task-modal .t-newtype{margin-top:4px}
.task-modal .t-form input,.task-modal .t-form textarea{padding:11px 14px}
.task-modal .t-form textarea{min-height:84px}
.task-modal .set-msgbox{min-height:0;margin:0}
.task-modal .set-msgbox:not(:empty){margin-top:10px}
.task-modal .cm-act{margin-top:28px}
.t-pick{gap:2px;max-height:200px}
.t-pick-row{min-height:44px;padding:8px 10px}
.t-pick-row>span:not(.mav){flex:1;min-width:0}
.t-pick-row .mav{flex:none}
.t-pick-row .t-av{display:grid;place-items:center}
.task-modal .field{margin:0}
.task-modal .field select{padding:11px 44px 11px 16px;font-size:14.5px}

/* ===== v1 desktop serif (Tailwind default `font-serif` = ui-serif → "New York" on macOS, Georgia elsewhere): dialog titles, page titles, empty-state titles ===== */
:root{--serif:ui-serif,Georgia,Cambria,"Times New Roman",Times,serif}
.confirm-modal h3,.invite-modal h3,.task-modal h3{font-family:var(--serif);font-size:20px;font-weight:400;letter-spacing:-.01em}
.set-head .set-title,.set-title{font-family:var(--serif);font-weight:400}
.t-empty b{font-family:var(--serif);font-weight:400;font-size:19px}

/* Modal titles = v1 serif. Brave/Chrome ignore `ui-serif` (Safari/WebKit only), so try Apple's New York by file/system names first, then Georgia. */
@font-face{font-family:"NY Serif";src:local("NewYork-Regular"),local("New York"),local("NewYork");font-weight:100 900}
:root{--serif:ui-serif,"NY Serif","New York","Iowan Old Style","Palatino Linotype",Georgia,Cambria,"Times New Roman",serif}
dialog h1,dialog h2,dialog h3,dialog .dlg-title,.legal-modal h2,.legal-modal h3{font-family:var(--serif)!important;font-weight:400;letter-spacing:-.01em}
dialog h3{font-size:20px}

/* v1 navbar: teamspace name and user name are serif, medium weight */
.app-nav #ts-name{font-family:var(--sans,Geist,system-ui,sans-serif);font-weight:500}   /* same font as the tabs (Martin 02/11) */
/* user name = same font, size and weight as the navbar tabs */
.app-nav .acct-btn,.app-nav .acct-name{font-family:inherit;font-size:14.5px;font-weight:500;letter-spacing:normal;line-height:1.2}

/* ===== Projects page (Users-page table + v1 features) ===== */
.p-label{margin:0 0 6px;font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#6b6b6b}
.ptable{table-layout:auto}
.ptable th.pchk,.ptable td.pchk{width:44px;padding-right:0}
.ptable th.pnum,.ptable td.pnum{text-align:center;width:104px;font-variant-numeric:tabular-nums;color:#6b6b6b;white-space:nowrap}
.ptable th.pby,.ptable td.pby{text-align:right;width:150px}
.ptable td.pname{font-family:var(--serif);font-size:16px;color:var(--fg)}
.ptable .pn{display:inline-flex;align-items:center;gap:8px;min-width:0}
.ptable .pn-lock{display:grid;color:#7a7a7a}
.ptable .pn-admin{display:inline-flex;align-items:center;gap:4px;font:600 11px/1 var(--sans,Geist,system-ui,sans-serif);font-style:normal;padding:3px 8px;border-radius:999px;color:#b45309;background:#fffbeb;border:1px solid rgba(251,191,36,.5)}
.ptable .pn-admin svg{fill:currentColor}
.ptable td.pby>span{display:inline-flex;align-items:center;gap:8px;justify-content:flex-end}
.ptable td.pby .mav{display:grid;place-items:center;justify-content:center}
.ptable td.pby b{font-weight:600;font-size:13.5px;max-width:9ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ptable tr.prow{cursor:default}
.ptable tr.prow.sel td{background:#f6f8ff}
.ptable tr.locked td.pname{opacity:.85}
.ptable td.mbrain,.ptable th:nth-child(3){text-align:left;width:190px;padding-right:20px}
.pcb,#pcb-all{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin:0;border:1.5px solid #bdbdbd;border-radius:6px;background:#fff;cursor:pointer;display:inline-grid;place-items:center;vertical-align:middle}
.pcb:checked,#pcb-all:checked,#pcb-all:indeterminate{background:#0a0a0a;border-color:#0a0a0a}
.pcb:checked::after,#pcb-all:checked::after{content:"";width:9px;height:5px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
#pcb-all:indeterminate::after{content:"";width:8px;height:2px;background:#fff}
.p-search{display:flex;align-items:center;gap:8px;height:42px;padding:0 14px;border:1px solid #c4c4c4;border-radius:16px;background:#fff;color:#7a7a7a;min-width:260px}
.p-search:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(22,93,251,.15)}
.p-search input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:14.5px;color:var(--fg);outline:none}
.p-q-x{display:grid;place-items:center;width:22px;height:22px;border:0;border-radius:50%;background:transparent;color:#7a7a7a;cursor:pointer}
.p-q-x[hidden]{display:none}
.p-bar{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:6px;padding:8px 8px 8px 20px;border-radius:999px;background:#0a0a0a;color:#fff;box-shadow:0 16px 40px -8px rgba(0,0,0,.55)}
.p-bar-n{margin-right:8px;font-size:14px;font-weight:500;font-variant-numeric:tabular-nums}
.p-bar button{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:#fff;font-size:14px;font-weight:500;cursor:pointer}
.p-bar button:hover{background:rgba(255,255,255,.12)}
.p-bar .p-del{background:#fff;color:#0a0a0a}.p-bar .p-del:hover{background:#ececec}
.j-code{letter-spacing:.14em;font-weight:600;text-transform:uppercase}
.t-pick-row.static{cursor:default}
.t-pick-row.static:hover{background:transparent}
.t-pick-row .cta.small{margin:0;padding:6px 12px;font-size:13px;background:#fff;color:var(--fg);border:1px solid #c4c4c4}
.t-pick-none{margin:0;padding:10px;color:#7a7a7a;font-size:13.5px}
.t-pick-row .you{font-style:normal;font-size:11.5px;color:var(--primary);background:#e8efff;border-radius:999px;padding:1px 8px;margin-left:6px}
@media (max-width:980px){.ptable th.pnum:nth-child(n+4),.ptable td.pnum:nth-child(n+4){display:none}}

/* Settings: every section (look, billing, MCP) shares the MCP column: 860px, centered, so left/right padding is unified (Martin 2/11) */
/* (superseded by the 30/70 layout below) */
/* the 24-px side padding is for the Settings page with its sidebar ONLY; the Users page keeps the shared .set.wide layout like Projects / Tasks (Martin 02/11) */
#settings.has-side.set.wide{padding-left:var(--navx,24px);padding-right:var(--navx,24px)}
.set-layout{display:grid;grid-template-columns:20% minmax(0,1fr);gap:0;align-items:start}
.set-side{overflow:hidden;display:flex;flex-direction:column;gap:2px;padding-right:32px;box-sizing:border-box}
.set-side a{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:12px;color:#444;text-decoration:none;font-size:14.5px;font-weight:500;transition:background .15s,color .15s}
.set-side a svg{flex:none;color:#6b6b6b}
.set-side a:hover{background:#f2f2f2}
.set-side a.on{background:rgba(22,93,251,.1);color:var(--primary,#165dfb)}
.set-side a.on svg{color:inherit}
.set-main{min-width:0}
.set-main>.set-block{scroll-margin-top:20px}
@media (max-width:820px){.set-layout{grid-template-columns:1fr}.set-side{position:static;flex-direction:row;flex-wrap:wrap;padding:0 0 16px}}

/* Tasks page: section titles = same style as the table column headers (all caps, small, grey) */
#tasks-root .t-sec>h2{font-family:inherit;font-size:12.5px;font-weight:480;letter-spacing:.04em;text-transform:uppercase;color:#6b6b6b}
#tasks-root .t-sec>h2 svg{width:14px;height:14px}
.set-select{font:inherit;font-size:14.5px;padding:9px 12px;border:1px solid #c4c4c4;border-radius:12px;background:#fff;color:inherit;min-width:180px}
.set-select:disabled{opacity:.6}
/* Sticky save button, bottom right, shown only when something can be saved */
.save-bar{position:sticky;bottom:18px;z-index:20;display:flex;align-items:center;justify-content:flex-end;gap:14px;pointer-events:none;margin-top:12px}
.save-bar[hidden]{display:none}
.save-bar>*{pointer-events:auto}
.save-bar .cta{margin:0;opacity:1;transform:none;box-shadow:0 6px 22px rgba(0,0,0,.22)}
.save-msg{font-size:13.5px;background:#fff;border-radius:10px;padding:6px 10px;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.save-msg:empty{display:none}
.save-msg.ok{color:#1f7a3f}.save-msg.bad{color:#b3261e}
.set-main .mcp-embed{margin-left:0}
.t-empty b{font-weight:600;font-size:20px;letter-spacing:-.01em}

/* Settings with sidebar: nothing scrolls except the right pane (top bar and sidebar stay put) */
.shell-scroll:has(#settings.has-side){overflow:hidden}
main.app-page:has(#settings.has-side){height:100%}
#settings.has-side{height:100%;display:flex;flex-direction:column;padding-bottom:0!important}
#settings.has-side .set-head{flex:none}
#settings.has-side .set-layout{flex:1;min-height:0;grid-template-rows:minmax(0,1fr)}
#settings.has-side .set-main{height:100%;overflow-y:auto;overscroll-behavior:contain;padding:0 4px 80px 0;scrollbar-width:thin}
@media (max-width:820px){#settings.has-side .set-layout{grid-template-rows:auto minmax(0,1fr)}}
.p-searchrow{margin:-10px 0 22px}.p-searchrow .p-search{max-width:360px}
.mav.t-av{box-sizing:border-box;padding:0;line-height:1;letter-spacing:-.01em;text-align:center;border-radius:50%}
.pby>span{display:inline-flex;align-items:center;gap:10px}

/* HARD RULE (Martin 2/11): the serif is ALWAYS weight 500, everywhere in the app (modal titles, page titles, empty-state titles, teamspace name, project names). */
.confirm-modal h3,.invite-modal h3,.task-modal h3,dialog h1,dialog h2,dialog h3,.legal-modal h2,.legal-modal h3,
.set-head .set-title,.set-title,.t-empty b,.ptable td.pname,.mcp-embed h1,
.pj-head h1,.fp-head .fp-title{font-weight:500!important}
/* Language flag + frame-colour picker circles (and their hover ring) stay perfectly round */
.lang,.lang svg,.lang-btn,.lang-btn .lang,.frame-dot,.frame-pick .lang-btn{corner-shape:round!important;border-radius:50%}
.lang-btn{border-radius:999px}
/* Tasks table = same table as Projects / Users */
tr.t-row{display:table-row;border-radius:0}
tr.t-row:hover,tr.t-row.flash{background:#f6f8ff}
.ttable td{vertical-align:middle}
.ttable td.tname{font-family:var(--serif);font-size:16px;width:auto}
.ttable td.tname .t-title{font-size:16px}
.ttable td.tname .t-desc{font-family:var(--sans,Geist,system-ui,sans-serif);font-size:13px}
.ttable th.tasg,.ttable td.tasg{width:150px}
.ttable th.ttools,.ttable td.ttools{width:84px;padding-right:0}
.ttable .t-tools{justify-content:flex-end}
.ttable td.pchk .t-st{margin:0}
.ttable th:nth-child(2){padding-right:12px}
.t-sec .ttable+.t-add{margin-top:10px}
@media (max-width:820px){.ttable th:nth-child(3){display:table-cell}}
.shell-scroll>main.app-page:has(#settings.has-side){flex:1 1 0;min-height:0;height:auto;overflow:hidden}
#settings.has-side{min-height:0;box-sizing:border-box}
#settings.has-side .set-layout{overflow:hidden}
/* Settings: title lives in the left column; the right pane runs up to the top edge */
#settings.has-side{padding-top:0!important}
.set-left{display:flex;flex-direction:column;min-width:0;padding-top:32px}
.set-left .set-head{margin:0 0 20px}
#settings.has-side .set-main{padding-top:32px}
#settings.has-side .set-layout{grid-template-rows:minmax(0,1fr)}
@media (max-width:820px){.set-left{padding-top:20px}}
#sec-mcp>h2{display:none}  /* the sidebar entry already names this section */
.mcp-embed .cta-row{margin-top:0}.mcp-embed .cta-row .cta,.mcp-embed .cta-row .cta.tuto{margin-top:0}
/* Save bar: fixed to the bottom-right corner of the window frame (sticky inside the scroll pane floated too high) */
.save-bar{position:fixed;right:28px;bottom:26px;margin:0;z-index:50}
.save-bar .cta.ghost{background:#fff;color:var(--fg);border:1px solid #c4c4c4;box-shadow:0 6px 22px rgba(0,0,0,.14)}
.save-bar .cta{display:inline-flex;align-items:center;gap:8px}

/* Settings: ONE card style everywhere = the MCP server-address card (.code), but white: light grey stroke, same radius */
#settings .bcell,#settings .bill-card,#settings .bcard,#settings .code,#settings .set-sec{background:#fff;border:1px solid #e2e5ec;border-radius:14px}
#settings .pay-card.none{background:#fff;border:1px solid #e2e5ec;border-radius:14px}
#settings .code-top{border-bottom-color:#e2e5ec}
@supports (corner-shape: squircle){#settings .bcell,#settings .bill-card,#settings .bcard,#settings .code,#settings .set-sec,#settings .pay-card.none{border-radius:20px;corner-shape:squircle}}
.bcell.c-2{grid-column:span 2}
@media (max-width:980px){.bcell.c-2{grid-column:span 6}}
#gen-lang-pick{align-self:flex-start;margin-top:4px}
#gen-lang-pick .lang-btn{display:inline-flex;align-items:center;gap:10px;color:var(--fg)}
#gen-lang-pick .lang-name{font-size:14.5px;font-weight:500}
#gen-notif-card .cta,#gen-notif{align-self:flex-start}
/* Octopus Web card = the same card as everywhere else (white, light grey stroke) */
.web-card{background:#fff;border:1px solid #e2e5ec;border-radius:14px;box-shadow:none}
.web-card p{color:#6b6b6b}
@supports (corner-shape: squircle){.web-card{border-radius:20px;corner-shape:squircle}}
/* Tasks table: Tâche = 50%, the other columns share the rest evenly; assignee last (right), edit/delete just before it */
.ttable{table-layout:fixed;width:100%}
.ttable th.pchk,.ttable td.pchk{width:44px}
.ttable th:nth-child(2),.ttable td.tname{width:50%}
.ttable th.tasg,.ttable td.tasg{width:auto;text-align:right}
.ttable th.ttools,.ttable td.ttools{width:auto;padding-right:8px}
.ttable td.tasg .t-assign{margin-left:auto;justify-content:flex-end}
.ttable td.tasg .t-avs{justify-content:flex-end}
.ttable .t-tools{justify-content:flex-end}
.ttable th:nth-child(3){width:auto}
/* Tasks: 3 equal columns (Type, Rappel, Assignée) after Tâche; edit/delete live inside the last one, right before the avatar */
.ttable th:nth-child(2),.ttable td.tname{width:calc(50% - 44px)}
.ttable th:nth-child(3),.ttable th:nth-child(4),.ttable th.tasg{width:auto}
.tasg-in{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.tasg-in .t-tools{margin-right:2px}
/* Tasks table FINAL widths (Martin): Tâche 50% (checkbox included) · Type 15% · Rappel 15% · Assignée 20% */
table.ttable.ptable{table-layout:fixed;width:100%}
table.ttable.ptable thead th:nth-child(1){width:44px}
table.ttable.ptable thead th:nth-child(2){width:calc(50% - 44px);padding-right:12px}
table.ttable.ptable thead th:nth-child(3){width:15%;padding-right:12px}
table.ttable.ptable thead th:nth-child(4){width:15%;padding-right:12px}
table.ttable.ptable thead th:nth-child(5){width:20%}
/* the avatar's margin-left:auto was eating the free space and leaving the icons at the left of the cell */
.ttable td.tasg .t-assign{margin-left:0!important}
.tasg-in{width:100%;justify-content:flex-end!important}
/* Tasks: Type / Rappel / Assignée = three EQUAL columns (the 50% left after Tâche, split in 3) */
table.ttable.ptable thead th:nth-child(3),table.ttable.ptable thead th:nth-child(4),table.ttable.ptable thead th:nth-child(5){width:calc(100% / 6)}
/* The 3 columns ARE equal; the last one only looked narrower because it was right-aligned. Left-align it like Type and Rappel. */
table.ttable.ptable thead th:nth-child(5),.ttable td.tasg{text-align:left}
.tasg-in{justify-content:flex-start!important}
/* Tasks: only the LAST column (Assignée à) aligned to its right edge */
table.ttable.ptable thead th:nth-child(5),.ttable td.tasg{text-align:right}
.tasg-in{justify-content:flex-end!important}
/* Tasks widths: Tâche 50% · Type 19% · Rappel 19% · Assignée 12% */
table.ttable.ptable thead th:nth-child(3),table.ttable.ptable thead th:nth-child(4){width:19%}
table.ttable.ptable thead th:nth-child(5){width:12%}
/* Tasks widths v2: Tâche 50% · Type 22% · Rappel 22% · Assignée 6% */
table.ttable.ptable thead th:nth-child(3),table.ttable.ptable thead th:nth-child(4){width:22%}
table.ttable.ptable thead th:nth-child(5){width:6%}
/* Tasks widths v3: Tâche 65% (checkbox included) · Type / Rappel / Assignée = 3 equal columns of the remaining 35% */
table.ttable.ptable thead th:nth-child(2){width:calc(65% - 44px)}
table.ttable.ptable thead th:nth-child(3),table.ttable.ptable thead th:nth-child(4),table.ttable.ptable thead th:nth-child(5){width:calc(35% / 3)}
/* Users table: balanced fixed columns — Membre 36 · Cerveau 20 · Depuis 16 · Rôle 18 · action 10 */
table.utable{table-layout:fixed;width:100%}
table.utable th:nth-child(1){width:36%}
table.utable th:nth-child(2){width:20%}
table.utable th:nth-child(3){width:16%}
table.utable th:nth-child(4){width:18%}
table.utable th:nth-child(5){width:10%}
table.utable .mrole,table.utable .mjoin,table.utable .mact{width:auto}
table.utable .mrole .field{max-width:100%}
table.utable td{overflow:hidden;text-overflow:ellipsis}
table.utable td.mact{text-align:right;overflow:visible}
/* Member name = same font as a project name (serif, 16px) */
.mwho b{font-family:var(--serif);font-size:16px;font-weight:400}

/* ======================================================================================================================
   ===== Phase 0 "S shared" (plan §2.0): tokens + component styles used by the brain / project / file / connectors /
   ===== settings / navbar / tour streams. Same system as above: white cards, light grey strokes, Geist, squircle corners.
   ====================================================================================================================== */
:root{--ink:#0a0a0a;--muted:#6b6b6b;--faint:#8a8a8a;--line:#e1e1e1;--line-soft:#eeeeee;--card:#ffffff;--grid:#f6f6f6;--danger:#b3261e;--ok:#1f9d55;--warn:#d98a00}
/* (desktop: the name is a button, no drag region) */

/* avatars: a photo covers the initials; broken photos are removed → initials show */
.mav{position:relative;overflow:hidden}
.mav img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.av-stack{display:inline-flex;align-items:center}
.av-stack .t-av{margin-left:-6px;box-shadow:0 0 0 2px #fff;border-radius:50%}
.av-stack .t-av:first-child{margin-left:0}
.av-stack .av-more{background:#eee;color:#555;font-weight:600}

/* ----- .seg pill toggle (Fichiers | Tâches | Cerveau · Afficher les marques | Final | Original · direction) ----- */
.seg{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--grid)}
.seg button{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 14px;border:0;border-radius:999px;background:transparent;font:inherit;font-size:13.5px;font-weight:500;color:#444;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.seg button:hover:not([disabled]){color:var(--ink)}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px #d6d6d6}
.seg button[disabled]{opacity:.45;cursor:default}
.seg.small button{height:26px;padding:0 10px;font-size:12.5px}

/* ----- popover menu additions (.t-menu from the tasks page): separators, danger items ----- */
.t-menu-sep{display:block;height:1px;margin:4px 6px;background:var(--line-soft)}
.t-menu button.danger{color:var(--danger)}
.t-menu button[disabled]{opacity:.45;cursor:default}
.t-menu button span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t-none{margin:4px 0 0;padding:10px 8px;color:var(--faint);font-size:13.5px}
.task-modal.invite-modal{width:min(580px,calc(100vw - 32px))}

/* ----- file-type icons ----- */
.fi{display:inline-grid;place-items:center;flex:none;color:var(--muted)}
.fi-pdf{color:#d1403a}.fi-doc{color:#2b5fd9}.fi-sheet,.fi-csv{color:#1f8f4e}.fi-slides{color:#d9731a}.fi-image{color:#8e44ad}.fi-archive{color:#8a6d3b}.fi-code,.fi-html{color:#0a7f8c}.fi-md,.fi-text{color:#555}.fi-audio,.fi-video{color:#c2185b}

/* ======================= Brain page: graph canvas + overlays (§2.1) ======================= */
.g-wrap{position:relative;width:100%;height:calc(100vh - var(--navh,53px) - 190px);min-height:420px;border:1px solid var(--line);border-radius:24px;background:#fff;overflow:hidden}
.g-wrap.embedded{height:min(640px,calc(100vh - 260px));min-height:360px}
.g-wrap canvas{display:block}
.g-wrap.loading::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fafafa 25%,#f1f1f1 37%,#fafafa 63%);background-size:400% 100%;animation:g-skel 1.4s ease infinite}
@keyframes g-skel{0%{background-position:100% 0}100%{background-position:0 0}}
.g-status{position:absolute;top:14px;left:16px;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);font-size:12.5px;font-weight:500;color:var(--muted);pointer-events:none}
.g-status b{font-weight:600;color:var(--ink)}
.g-zoom{position:absolute;right:14px;top:14px;z-index:3;display:flex;flex-direction:column;gap:4px;padding:4px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px)}
.g-zoom button{display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:10px;background:transparent;color:#444;cursor:pointer}
.g-zoom button:hover{background:#f0f0f0;color:var(--ink)}
.g-legend{position:absolute;left:16px;bottom:16px;z-index:3;display:flex;flex-direction:column;gap:2px;max-width:260px;max-height:46%;overflow:auto;padding:8px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);scrollbar-width:thin}
.g-legend button{display:flex;align-items:center;gap:8px;width:100%;padding:5px 8px;border:0;border-radius:9px;background:transparent;font:inherit;font-size:12.5px;color:#333;cursor:pointer;text-align:left}
.g-legend button:hover{background:#f3f3f3}
.g-legend button.off{opacity:.4;text-decoration:line-through}
.g-legend button em{margin-left:auto;font-style:normal;font-variant-numeric:tabular-nums;color:var(--faint);font-size:11.5px}
.g-legend .g-legend-all{margin-top:4px;padding-top:6px;border-top:1px solid var(--line-soft);border-radius:0;color:var(--primary);font-weight:500;justify-content:center}
.type-dot{display:inline-block;flex:none;width:9px;height:9px;border-radius:50%;background:var(--tc,#888);box-shadow:0 0 0 1px rgba(0,0,0,.08) inset}
.type-dot.lg{width:12px;height:12px}
.g-tip{position:absolute;z-index:4;max-width:260px;padding:8px 11px;border-radius:12px;background:#0a0a0a;color:#fff;font-size:12.5px;line-height:1.4;pointer-events:none;box-shadow:0 8px 24px rgba(0,0,0,.25);transform:translate(12px,12px)}
.g-tip b{display:block;font-weight:600}
.g-tip small{display:block;opacity:.7;font-size:11.5px}
.g-foot{position:absolute;right:16px;bottom:14px;z-index:3;font-size:12px;color:var(--faint);pointer-events:none;text-align:right}
.g-viewonly{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:3;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:#fff3cf;color:#8a5a00;border:1px solid #f2d58a;font-size:12.5px;font-weight:560;white-space:nowrap}
.g-search{position:relative}
.g-search .p-search{min-width:300px}
.g-results{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;display:flex;flex-direction:column;gap:2px;max-height:320px;overflow:auto;padding:6px;border:1px solid #d6d6d6;border-radius:16px;background:#fff;box-shadow:0 12px 32px rgba(0,0,0,.12)}
.g-results button{display:flex;align-items:center;gap:10px;padding:8px 10px;border:0;border-radius:11px;background:transparent;font:inherit;font-size:14px;color:var(--ink);cursor:pointer;text-align:left}
.g-results button:hover,.g-results button.on{background:#f3f3f3}
.g-results button span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-results button small{color:var(--faint);font-size:12px}
.g-results .g-none{padding:10px;color:var(--faint);font-size:13.5px}
/* intro toast (the old sticky « Vous utilisez Octopus Web » card): countdown ring → black scribble bubble */
@media (prefers-reduced-motion:reduce){.g-wrap.loading::after{animation:none}}
/* empty states on the canvas */
.g-wrap .t-empty{position:absolute;inset:0;justify-content:center;background:#fff}

/* ----- node modal (§2.1) ----- */
.node-modal{width:min(640px,calc(100vw - 32px));max-height:calc(100vh - 40px);overflow:auto;padding:28px}
.node-modal h3{margin:0 0 8px;padding-right:36px}
.nm-sub{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 24px;font-size:13px;color:var(--muted)}
.nm-sub .nm-type{display:inline-flex;align-items:center;gap:6px;font-weight:560;color:#333}
.nm-imp{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;background:#f1f1f1;font-size:11.5px;font-weight:560;color:#555}
.nm-imp.i4,.nm-imp.i5{background:#fde8e6;color:#b3261e}.nm-imp.i3{background:#fff1d6;color:#8a5a00}.nm-imp.i2{background:#e8efff;color:var(--primary)}
.nm-notes{margin:0 0 24px;font-size:14.5px;line-height:1.6;color:#333;white-space:pre-wrap}
.nm-notes.empty{color:var(--faint);font-style:italic}
.nm-sec{display:flex;flex-direction:column;gap:8px;margin:0 0 24px}
.nm-sec .inv-label{margin:0}
.nm-rel{display:flex;flex-direction:column;gap:2px;max-height:260px;overflow:auto;padding:4px;border:1px solid var(--line);border-radius:16px}
.nm-rel-row{display:flex;align-items:center;gap:10px;min-height:40px;padding:6px 10px;border:0;border-radius:11px;background:transparent;font:inherit;font-size:14px;color:var(--ink);cursor:pointer;text-align:left}
.nm-rel-row:hover{background:#f3f3f3}
.nm-rel-row .nm-dir{display:grid;flex:none;color:var(--faint)}
.nm-rel-row .nm-rt{flex:none;padding:2px 9px;border-radius:999px;background:#f1f1f1;font-size:11.5px;font-weight:560;color:#555}
.nm-rel-row .nm-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nm-rel-row .t-ib{margin-left:auto}
.nm-files{display:flex;flex-direction:column;gap:2px}
.nm-file{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:11px;font-size:14px;color:var(--ink);text-decoration:none}
.nm-file:hover{background:#f3f3f3}
.nm-file small{margin-left:auto;color:var(--faint);font-size:12px}
.nm-foot{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:28px}
.nm-foot .cta{margin:0;display:inline-flex;align-items:center;gap:8px}
.nm-foot .cta.ghost{background:#fff;color:var(--ink);border:1px solid #c4c4c4}
.nm-foot .left{margin-right:auto}
.nm-form{display:flex;flex-direction:column;gap:24px}
.nm-form .t-group{display:flex;flex-direction:column;gap:8px}
.nm-form input,.nm-form textarea{width:100%;padding:11px 14px;font:inherit;font-size:14.5px;border:1px solid #c4c4c4;border-radius:16px;background:#fff;color:var(--ink);resize:vertical}
.nm-form input:focus,.nm-form textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(22,93,251,.15)}
.nm-form .field{margin:0}
/* importance slider 0-5 with a live label */
.imp-range{display:flex;align-items:center;gap:12px}
.imp-range input[type=range]{flex:1;accent-color:var(--primary);height:4px}
.imp-range output{min-width:84px;font-size:13px;font-weight:560;color:#333;text-align:right}
/* link picker */
.nm-links{display:flex;flex-direction:column;gap:2px;max-height:200px;overflow:auto;padding:4px;border:1px solid var(--line);border-radius:16px}
.nm-links .t-pick-row{min-height:40px}
.nm-links .t-pick-row .nm-rt{margin-left:auto}

/* ======================= Project page (§2.3) ======================= */
.pj-head{display:flex;align-items:center;gap:14px;margin:0 0 20px;min-width:0}
.pj-head .pj-back{display:grid;place-items:center;flex:none;width:36px;height:36px;border:1px solid #d6d6d6;border-radius:12px;background:#fff;color:var(--ink);cursor:pointer;text-decoration:none}
.pj-head .pj-back:hover{background:#f3f3f3}
.pj-head .pj-ico{display:grid;place-items:center;flex:none;width:44px;height:44px;border:1px solid var(--line);border-radius:14px;background:var(--grid);color:var(--muted)}
.pj-head h1{flex:1;min-width:0;margin:0;font-family:var(--serif);font-size:28px;font-weight:500;letter-spacing:-.02em;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pj-head .pj-meta{display:flex;align-items:center;gap:10px;flex:none;color:var(--muted);font-size:13px}
.pj-head .pj-members{display:inline-flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border:1px solid var(--line);border-radius:999px;background:#fff;font:inherit;font-size:13px;color:#333;cursor:pointer}
.pj-head .pj-members:hover{background:#f3f3f3}
.pj-crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin:-8px 0 16px;font-size:13.5px;color:var(--muted)}
.pj-crumbs a,.pj-crumbs button{border:0;background:transparent;padding:3px 7px;border-radius:8px;font:inherit;color:var(--muted);text-decoration:none;cursor:pointer}
.pj-crumbs a:hover,.pj-crumbs button:hover{background:#f0f0f0;color:var(--ink)}
.pj-crumbs .cur{padding:3px 7px;color:var(--ink);font-weight:560}
.pj-crumbs svg{color:#bdbdbd}
.pj-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:0 0 20px}
.pj-toolbar .p-search{flex:1;max-width:420px}
.pj-toolbar .seg{margin-left:auto}
.ro-banner{display:flex;align-items:center;gap:10px;margin:0 0 18px;padding:10px 14px;border:1px solid #f2d58a;border-radius:14px;background:#fff8e6;color:#8a5a00;font-size:13.5px}
.ro-banner svg{flex:none}
/* files table */
.ftable{table-layout:fixed;width:100%}
.ftable th.pchk,.ftable td.pchk{width:44px;padding-right:0}
.ftable td.fname{font-family:var(--serif);font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ftable td.fname .fn{display:inline-flex;align-items:center;gap:10px;max-width:100%}
.ftable td.fname .fn span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ftable td.fname small{display:block;font-family:var(--sans,Geist,system-ui,sans-serif);font-size:12px;color:var(--faint)}
.ftable th.ftype,.ftable td.ftype{width:13%;color:var(--muted);text-transform:uppercase;font-size:12.5px;letter-spacing:.03em}
.ftable th.fsize,.ftable td.fsize{width:11%;font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.ftable th.forig,.ftable td.forig{width:18%}
.ftable th.fdate,.ftable td.fdate{width:16%;color:var(--muted);white-space:nowrap}
.ftable th.fact,.ftable td.fact{width:44px;padding-right:4px;text-align:right}
.ftable tr.frow{cursor:pointer}
.ftable tr.frow:hover td,.ftable tr.frow.sel td{background:#f6f8ff}
.ftable tr.frow:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.f-origin{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:#333;min-width:0}
.f-origin .mav{width:22px;height:22px;font-size:9.5px}
.f-origin span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.f-origin.gen{color:var(--primary)}
.f-row-up td{color:var(--faint)}
.f-row-up .f-prog{display:block;height:4px;margin-top:6px;border-radius:999px;background:#e8e8e8;overflow:hidden}
.f-row-up .f-prog i{display:block;height:100%;width:var(--p,0%);background:var(--primary);transition:width .3s}
/* drop zone overlay */
.f-drop{position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;background:rgba(22,93,251,.08);backdrop-filter:blur(2px);pointer-events:none}
.f-drop.on{display:flex}
.f-drop>div{display:flex;flex-direction:column;align-items:center;gap:10px;padding:34px 44px;border:2px dashed var(--primary);border-radius:28px;background:#fff;color:var(--primary);font-size:16px;font-weight:560}
/* folder tree (browser + « Déplacer vers… ») */
.tree{display:flex;flex-direction:column;gap:1px;max-height:320px;overflow:auto;padding:4px;border:1px solid var(--line);border-radius:16px}
.tree button{display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;border:0;border-radius:10px;background:transparent;font:inherit;font-size:14px;color:var(--ink);cursor:pointer;text-align:left}
.tree button:hover,.tree button.on{background:#f3f3f3}
.tree button.on{color:var(--primary);font-weight:560}
.tree button svg{flex:none;color:var(--muted)}
.tree button span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tree button small{color:var(--faint);font-size:12px}
.tree .lvl-1{padding-left:26px}.tree .lvl-2{padding-left:44px}.tree .lvl-3{padding-left:62px}.tree .lvl-4{padding-left:80px}
/* connector context card (aggregate, never browsable) */
.ctx-card{display:flex;align-items:center;gap:14px;margin:0 0 20px;padding:16px 18px;border:1px solid #d9e2fb;border-radius:20px;background:#f4f7ff}
.ctx-card .ctx-ico{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;background:#fff;color:var(--primary);border:1px solid #d9e2fb}
.ctx-card b{display:block;font-size:14.5px;font-weight:560}
.ctx-card p{margin:2px 0 0;font-size:13px;color:#45506b}
.ctx-card .ctx-stats{margin-left:auto;display:flex;gap:16px;font-size:13px;color:#45506b;white-space:nowrap}
.ctx-card .ctx-stats b{font-size:16px}
/* browser sections */
.f-sec{margin:0 0 28px}
.f-sec h3{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:12.5px;font-weight:480;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.f-sec h3 em{font-style:normal;color:var(--faint)}
.f-sec .f-back{display:inline-flex;align-items:center;gap:6px;margin:0 0 14px;border:0;background:transparent;padding:0;font:inherit;font-size:13.5px;color:var(--primary);cursor:pointer}
.f-sec .f-back:hover{text-decoration:underline}
.f-sec .frow .fdir{display:inline-flex;align-items:center;gap:10px}
.f-sec .frow .fdir svg{color:#e0a53a}
.load-more{display:flex;justify-content:center;margin:14px 0 0}
.load-more .cta.ghost{background:#fff;color:var(--ink);border:1px solid #c4c4c4;margin:0}
.load-more .sentinel{height:1px;width:100%}
/* upload progress card (fixed bottom right) */
.up-card{position:fixed;right:24px;bottom:24px;z-index:60;width:min(380px,calc(100vw - 32px));display:flex;flex-direction:column;gap:10px;padding:16px 18px;border:1px solid #d6d6d6;border-radius:20px;background:#fff;box-shadow:0 16px 40px -8px rgba(0,0,0,.3);animation:toast-in .2s ease-out}
.up-card .up-head{display:flex;align-items:center;gap:10px}
.up-card .up-head b{flex:1;font-size:14.5px;font-weight:560}
.up-card .up-head small{color:var(--faint);font-variant-numeric:tabular-nums}
.up-card .up-bar{height:6px;border-radius:999px;background:#ececec;overflow:hidden}
.up-card .up-bar i{display:block;height:100%;width:var(--p,0%);background:var(--primary);transition:width .3s}
.up-card .up-names{margin:0;font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.up-card .up-act{display:flex;justify-content:flex-end;gap:8px}
.up-card .up-act .cta{margin:0;padding:7px 14px;font-size:13px}
.up-card .up-act .cta.ghost{background:#fff;color:var(--ink);border:1px solid #c4c4c4}
.up-card details{font-size:12.5px;color:var(--danger)}
.up-card details summary{cursor:pointer;font-weight:560}
.up-card details ul{margin:6px 0 0;padding-left:18px;max-height:120px;overflow:auto}
.up-card.done .up-bar i{background:var(--ok)}
.up-card.failed .up-bar i{background:var(--danger)}

/* ======================= File page (§2.4) ======================= */
.fp-head{position:sticky;top:0;z-index:12;display:flex;align-items:center;gap:12px;margin:-44px calc(-1 * clamp(20px,4vw,48px)) 20px;padding:14px clamp(20px,4vw,48px);border-bottom:1px solid var(--line);background:rgba(255,255,255,.94);backdrop-filter:blur(8px)}
.fp-head .fp-title{flex:1;min-width:0;display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:19px;font-weight:500;letter-spacing:-.01em}
.fp-head .fp-title span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fp-head .fp-title small{font-family:var(--sans,Geist,system-ui,sans-serif);font-size:12.5px;color:var(--faint);white-space:nowrap}
.fp-head .fp-title input{flex:1;min-width:0;padding:7px 12px;font:inherit;font-size:16px;border:1px solid #c4c4c4;border-radius:12px;background:#fff}
.fp-head .fp-act{display:flex;align-items:center;gap:6px;flex:none}
.fp-ico-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;min-width:36px;padding:0 10px;border:1px solid #d6d6d6;border-radius:12px;background:#fff;color:var(--ink);font:inherit;font-size:13.5px;font-weight:500;cursor:pointer;text-decoration:none;white-space:nowrap}
.fp-ico-btn:hover:not([disabled]){background:#f3f3f3}
.fp-ico-btn[disabled]{opacity:.45;cursor:default}
.fp-ico-btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.fp-ico-btn.primary:hover{background:var(--primary-hover)}
.fp-ico-btn em{font-style:normal;padding:0 6px;border-radius:999px;background:#e8efff;color:var(--primary);font-size:11.5px;font-weight:600}
.fp-body{position:relative;min-height:60vh;border:1px solid var(--line);border-radius:24px;background:#fff;overflow:hidden}
.fp-body iframe{display:block;width:100%;height:calc(100vh - var(--navh,53px) - 150px);min-height:520px;border:0;background:#fff}
.fp-body img.fp-img{display:block;max-width:100%;max-height:calc(100vh - 200px);margin:0 auto;object-fit:contain}
.fp-body .t-empty{min-height:50vh;justify-content:center}
.fp-loading{display:flex;align-items:center;justify-content:center;gap:10px;min-height:50vh;color:var(--muted);font-size:14px}
.fp-loading svg{animation:fp-spin 1s linear infinite}
@keyframes fp-spin{to{transform:rotate(360deg)}}
/* busy button (login / signup / reset / Google): label hidden, centred spinner, not clickable */
.cta.is-busy,.google-btn.is-busy{position:relative;pointer-events:none;color:transparent!important;cursor:default}
.cta.is-busy>*,.google-btn.is-busy>*{visibility:hidden}
.cta.is-busy::after,.google-btn.is-busy::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:fp-spin .8s linear infinite}
.cta.ghost.is-busy::after,.google-btn.is-busy::after{border-color:rgba(0,0,0,.14);border-top-color:#222}
form[aria-busy="true"] .field input{opacity:.55}
@media (prefers-reduced-motion:reduce){.cta.is-busy::after,.google-btn.is-busy::after{animation-duration:2s}}
/* office renderers */
.dr-office{padding:28px clamp(16px,4vw,48px);background:#f3f3f3;min-height:60vh}
.dr-office .docx-wrapper{background:transparent!important;padding:0!important}
.dr-office .docx-wrapper>section.docx{box-shadow:0 2px 12px rgba(0,0,0,.08);margin-bottom:20px!important}
.dr-sheet{padding:0}
.dr-sheet .dr-tabs{display:flex;gap:2px;padding:10px 14px 0;border-bottom:1px solid var(--line);background:var(--grid);overflow-x:auto;scrollbar-width:none}
.dr-sheet .dr-tabs button{padding:8px 14px;border:1px solid transparent;border-bottom:0;border-radius:12px 12px 0 0;background:transparent;font:inherit;font-size:13px;color:var(--muted);cursor:pointer;white-space:nowrap}
.dr-sheet .dr-tabs button.on{background:#fff;border-color:var(--line);color:var(--ink);font-weight:560}
.dr-sheet .dr-grid{overflow:auto;max-height:calc(100vh - 240px)}
.dr-sheet table{border-collapse:collapse;font-size:13px;min-width:100%}
.dr-sheet td,.dr-sheet th{padding:5px 10px;border:1px solid #e6e6e6;white-space:nowrap;max-width:320px;overflow:hidden;text-overflow:ellipsis}
.dr-sheet th,.dr-sheet tr:first-child td{background:#fafafa;font-weight:560;position:sticky;top:0}
.dr-pptx{display:flex;flex-direction:column;gap:24px;padding:28px;background:#f3f3f3}
.dr-pptx .dr-slide{position:relative;width:min(960px,100%);aspect-ratio:16/9;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,.08);overflow:hidden}
.dr-pptx .dr-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.dr-pptx .dr-slide .dr-txt{position:absolute;inset:0;padding:5% 6%;display:flex;flex-direction:column;gap:.6em;font-size:clamp(12px,1.8vw,20px);line-height:1.35;overflow:auto}
.dr-pptx .dr-slide .dr-txt p{margin:0}
.dr-pptx .dr-slide .dr-n{position:absolute;right:12px;bottom:8px;font-size:11px;color:var(--faint)}
.fp-pre{margin:0;padding:24px clamp(16px,3vw,32px);font:13.5px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;word-break:break-word;color:#222;max-height:calc(100vh - 200px);overflow:auto}
.fp-csv{overflow:auto;max-height:calc(100vh - 200px)}
.fp-csv table{border-collapse:collapse;font-size:13px;min-width:100%}
.fp-csv td,.fp-csv th{padding:6px 12px;border-bottom:1px solid #eee;white-space:nowrap;max-width:360px;overflow:hidden;text-overflow:ellipsis}
.fp-csv th{position:sticky;top:0;background:#fafafa;text-align:left;font-weight:560;text-transform:uppercase;font-size:11.5px;letter-spacing:.04em;color:var(--muted)}
.fp-md{padding:28px clamp(16px,4vw,48px);font-size:15px;line-height:1.65;max-width:860px;margin:0 auto}
.fp-md pre{white-space:pre-wrap;word-break:break-word;font:13.5px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
/* « Copier pour Claude » pill + hint */
.fp-sel{position:fixed;z-index:65;display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border:0;border-radius:999px;background:#0a0a0a;color:#fff;font:inherit;font-size:13px;font-weight:500;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.28);transform:translate(-50%,-100%);animation:toast-in .15s ease-out}
.fp-sel:hover{background:#222}
.fp-sel img{width:14px;height:14px}
.fp-tip{position:fixed;left:50%;bottom:28px;z-index:65;transform:translateX(-50%);padding:8px 14px;border-radius:999px;background:#0a0a0a;color:#fff;font-size:13px;opacity:1;transition:opacity .6s}
.fp-tip.fade{opacity:0}
/* docx tracked changes bar + list */
.rev-bar{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--grid);font-size:13px}
.rev-bar .rev-n{font-weight:560;color:#333}
.rev-bar .rev-authors{display:flex;flex-wrap:wrap;gap:6px}
.rev-bar .rev-act{margin-left:auto;display:flex;gap:6px}
.rev-bar .rev-act .cta{margin:0;padding:6px 12px;font-size:12.5px}
.rev-bar .rev-act .cta.ghost{background:#fff;color:var(--ink);border:1px solid #c4c4c4}
.rev-author{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:560;background:color-mix(in srgb,var(--ac) 14%,#fff);color:var(--ac)}
.rev-author i{width:7px;height:7px;border-radius:50%;background:var(--ac)}
.rev-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;align-items:start}
.rev-list{position:sticky;top:0;max-height:calc(100vh - 220px);overflow:auto;border-left:1px solid var(--line);padding:10px;display:flex;flex-direction:column;gap:4px;scrollbar-width:thin}
.rev-item{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border:1px solid var(--line-soft);border-radius:14px;background:#fff;cursor:pointer;font-size:13px}
.rev-item:hover,.rev-item.on{border-color:var(--ac,var(--primary));background:color-mix(in srgb,var(--ac,var(--primary)) 6%,#fff)}
.rev-item .rev-kind{display:flex;align-items:center;gap:8px;font-weight:560}
.rev-item .rev-kind small{margin-left:auto;font-weight:400;color:var(--faint)}
.rev-item .rev-txt{color:#444;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.rev-item .rev-btns{display:flex;gap:4px;justify-content:flex-end}
.rev-item .rev-btns .t-ib{width:26px;height:26px}
.rev-item.comment{border-style:dashed}
.rev-item .rev-reply{margin-left:14px;padding-left:10px;border-left:2px solid var(--line);color:#555}
.rev-item.resolved{opacity:.55}
.rev-item textarea{width:100%;padding:8px 10px;font:inherit;font-size:13px;border:1px solid #c4c4c4;border-radius:10px;resize:vertical}
/* revision marks inside the rendered docx: author colour slots 0-5, mode classes on .fp-body */
.dr-rev-a0{--ac:#2d5ff5}.dr-rev-a1{--ac:#1f9d55}.dr-rev-a2{--ac:#d98a00}.dr-rev-a3{--ac:#d6409f}.dr-rev-a4{--ac:#0aa5c0}.dr-rev-a5{--ac:#7c4dff}
.fp-body ins[class*=dr-rev-a]{text-decoration:underline;text-decoration-color:var(--ac);background:color-mix(in srgb,var(--ac) 14%,#fff);color:var(--ac)}
.fp-body del[class*=dr-rev-a]{text-decoration:line-through;text-decoration-color:var(--ac);background:color-mix(in srgb,var(--ac) 10%,#fff);color:color-mix(in srgb,var(--ac) 70%,#000)}
.fp-body ins.hl,.fp-body del.hl{outline:2px solid var(--ac);outline-offset:1px;border-radius:3px}
.fp-body.rev-final del[class*=dr-rev-a]{display:none}
.fp-body.rev-final ins[class*=dr-rev-a]{text-decoration:none;background:none;color:inherit}
.fp-body.rev-original ins[class*=dr-rev-a]{display:none}
.fp-body.rev-original del[class*=dr-rev-a]{text-decoration:none;background:none;color:inherit}
.fp-body .dr-cm{background:#fff3cf;border-bottom:2px solid #f2b53c;cursor:pointer}
.fp-body .dr-cm.hl{outline:2px solid #f2b53c}
@media (max-width:900px){.rev-layout{grid-template-columns:1fr}.rev-list{position:static;max-height:none;border-left:0;border-top:1px solid var(--line)}}
/* editor */
.ed-text{display:block;width:100%;min-height:calc(100vh - 230px);padding:24px clamp(16px,3vw,32px);border:0;resize:none;background:#fff;font:14px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#222;outline:none}
.ed-para{display:flex;flex-direction:column;gap:10px;padding:28px clamp(16px,4vw,48px);max-width:900px;margin:0 auto}
.ed-para textarea{width:100%;padding:10px 14px;font:inherit;font-size:15px;line-height:1.55;border:1px solid transparent;border-radius:12px;background:transparent;resize:none;overflow:hidden;field-sizing:content}
.ed-para textarea:hover{border-color:var(--line)}
.ed-para textarea:focus{outline:none;border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px rgba(22,93,251,.12)}
.ed-para textarea.h1{font-family:var(--serif);font-size:24px;font-weight:500}
.ed-para textarea.h2{font-family:var(--serif);font-size:19px;font-weight:500}
.ed-slide{display:flex;flex-direction:column;gap:10px;padding:18px 20px;border:1px solid var(--line);border-radius:18px;background:#fff}
.ed-slide h4{margin:0;font-size:12.5px;font-weight:480;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.ed-slide textarea{width:100%;padding:8px 12px;font:inherit;font-size:14px;border:1px solid #d6d6d6;border-radius:12px;resize:vertical;field-sizing:content}
.ed-slides{display:flex;flex-direction:column;gap:16px;padding:24px;background:#f3f3f3}
.ed-grid{overflow:auto;max-height:calc(100vh - 240px)}
.ed-grid table{border-collapse:collapse;font-size:13px}
.ed-grid td{padding:0;border:1px solid #e6e6e6}
.ed-grid td input{width:140px;padding:5px 8px;border:0;font:inherit;font-size:13px;background:transparent}
.ed-grid td input:focus{outline:2px solid var(--primary);outline-offset:-2px;background:#fff}
.ed-grid th{padding:5px 8px;background:#fafafa;font-weight:560;color:var(--muted);position:sticky;top:0;text-align:center;border:1px solid #e6e6e6}
.ed-dirty .fp-head{border-bottom-color:var(--primary)}

/* ======================= Connectors (§2.7) ======================= */
.cn-sec{margin:0 0 34px}
.cn-sec h2{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:12.5px;font-weight:480;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.cn-sec h2 em{font-style:normal;color:var(--faint)}
.cn-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:1100px){.cn-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.cn-grid{grid-template-columns:minmax(0,1fr)}}
.cn-card{display:flex;flex-direction:column;gap:10px;padding:18px;border:1px solid var(--line);border-radius:22px;background:#fff;min-width:0;transition:border-color .15s,box-shadow .15s}
.cn-card:hover{border-color:#c9c9c9;box-shadow:0 6px 22px rgba(0,0,0,.05)}
.cn-card .cn-top{display:flex;align-items:center;gap:12px}
.cn-card .cn-ico{display:grid;place-items:center;flex:none;width:42px;height:42px;border:1px solid var(--line);border-radius:13px;background:var(--grid);overflow:hidden}
.cn-card .cn-ico img{width:26px;height:26px;object-fit:contain}
.cn-card .cn-ico svg{color:var(--muted)}
.cn-card .cn-name{flex:1;min-width:0}
.cn-card .cn-name b{display:block;font-family:var(--serif);font-size:16px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cn-card .cn-name small{display:block;font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.03em}
.cn-card p{margin:0;font-size:13px;line-height:1.5;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cn-card .cn-act{flex:none;display:flex;align-items:center;gap:6px;margin-left:auto;align-self:center}
.cn-card .cn-act .cta{margin:0;padding:6px 12px;font-size:12.5px;display:inline-flex;align-items:center;gap:6px;background:#fff;color:var(--ink);border:1px solid #c4c4c4;white-space:nowrap}
.cn-card .cn-act .cta:hover{background:#f3f3f3}
.cn-card.on .cn-act .cta{border-color:#bcd3ff;color:#14612c}
.cn-card .cn-act .cn-soon{font-size:11.5px;color:var(--faint);white-space:nowrap}
.cn-card .cn-foot{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:6px}
.cn-card .cn-foot .cta{margin:0;padding:7px 14px;font-size:13px;display:inline-flex;align-items:center;gap:6px}
.cn-card .cn-foot .cta.ghost{background:#fff;color:var(--ink);border:1px solid #c4c4c4}
.cn-card .cn-foot .cn-state{margin-left:auto;font-size:12px;color:var(--faint)}
.cn-card .cn-premium{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;background:#fff1d6;color:#8a5a00;font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase}
.cn-card .cn-ok{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;background:#e3f6e8;color:#14612c;font-size:11.5px;font-weight:560}
.cn-card.soon{opacity:.7}
.cn-card.soon .cn-ico{filter:grayscale(1)}
.cn-card.on{border-color:#bcd3ff;background:#fbfcff}
/* industry intelligence (priced) */
.cn-sector{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.cn-sector button{padding:6px 14px;border:1px solid #d6d6d6;border-radius:999px;background:#fff;font:inherit;font-size:13px;color:#444;cursor:pointer}
.cn-sector button.on{background:#0a0a0a;border-color:#0a0a0a;color:#fff}
.cn-priced{border-color:#e8e2f8;background:linear-gradient(180deg,#fcfbff,#fff)}
.cn-priced .cn-price{display:inline-flex;align-items:baseline;gap:4px;font-size:13px;color:#333}
.cn-priced .cn-price b{font-size:17px;font-weight:600;color:var(--ink)}
.cn-priced .cn-price small{color:var(--faint)}
.cn-more{display:flex;justify-content:center;margin:14px 0 0}
.cn-more .cta.ghost{background:#fff;color:var(--ink);border:1px solid #c4c4c4;margin:0;display:inline-flex;align-items:center;gap:6px}
.cn-note{display:flex;align-items:center;gap:10px;margin:0 0 20px;padding:10px 14px;border:1px solid var(--line);border-radius:14px;background:var(--grid);color:var(--muted);font-size:13.5px}
.cn-status{display:flex;align-items:center;gap:12px;margin:0 0 20px;padding:16px 18px;border:1px solid var(--line);border-radius:18px;background:#fff}
.cn-status .cn-dot{width:10px;height:10px;border-radius:50%;background:#bdbdbd}
.cn-status.on .cn-dot{background:var(--ok)}
.cn-status b{font-size:14.5px;font-weight:560}
.cn-status small{display:block;color:var(--faint);font-size:12.5px}
.cn-status .cta{margin-left:auto}
.cn-cred{display:flex;flex-direction:column;gap:8px}
.cn-cred input{width:100%;padding:11px 14px;font:inherit;font-size:14.5px;border:1px solid #c4c4c4;border-radius:16px;background:#fff}
.cn-cred input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(22,93,251,.15)}
.cn-scopes{display:flex;flex-wrap:wrap;gap:6px}
.cn-scopes span{padding:3px 10px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:12px;color:#444}

/* ======================= Settings additions (§2.8) ======================= */
.prof-row{display:flex;align-items:center;gap:18px;margin:0 0 16px}
.prof-row .mav{width:64px;height:64px;font-size:22px}
.prof-row .prof-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.prof-row .prof-main b{font-family:var(--serif);font-size:18px;font-weight:500}
.prof-row .prof-main small{color:var(--muted);font-size:13px}
.prof-row .prof-btns{display:flex;flex-wrap:wrap;gap:8px}
.prof-row .prof-btns .cta{margin:0;padding:7px 14px;font-size:13px}
.prof-row .prof-btns .cta.ghost{background:#fff;color:var(--ink);border:1px solid #c4c4c4}
.pref-btns{display:flex;flex-wrap:wrap;gap:6px}
.pref-btns button{min-width:44px;padding:7px 12px;border:1px solid #d6d6d6;border-radius:12px;background:#fff;font:inherit;font-size:13px;font-weight:500;color:#444;cursor:pointer}
.pref-btns button:hover{background:#f3f3f3}
.pref-btns button.on{background:#0a0a0a;border-color:#0a0a0a;color:#fff}
.pref-btns button .lang{width:22px;height:22px}
.opt-row{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--line-soft)}
.opt-row:first-of-type{border-top:0;padding-top:0}
.opt-row>div:first-child{flex:1;min-width:0}
.opt-row b{display:block;font-size:14.5px;font-weight:560}
.opt-row small{display:block;margin-top:2px;color:var(--muted);font-size:13px;line-height:1.45}
.opt-row .chip.badge{margin-left:6px}
.opt-row .price{font-size:13px;color:var(--muted);white-space:nowrap}
/* toggle switch */
.switch{position:relative;flex:none;width:44px;height:26px;border:0;border-radius:999px;background:#d0d0d0;cursor:pointer;transition:background .2s;padding:0}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.switch[aria-checked=true]{background:var(--primary)}
.switch[aria-checked=true]::after{transform:translateX(18px)}
.switch[disabled]{opacity:.5;cursor:default}
.switch:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.danger-card{border-color:#f3c9c6;background:#fffafa}
.danger-card h3{color:var(--danger)}
.danger-card h3 svg{color:var(--danger)}
.danger-card .cta.danger{background:var(--danger);border:1px solid var(--danger);color:#fff;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin:0}
.brain-mini{position:relative;height:240px;border:1px solid var(--line);border-radius:18px;background:#fff;overflow:hidden}
.brain-mini canvas{display:block}
.brain-mini .brain-mini-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--muted);font-size:14px}
.brain-mini-act{display:flex;gap:8px;margin-top:10px}
.brain-mini-act .cta{margin:0;display:inline-flex;align-items:center;gap:8px}
.brain-mini-act .cta.ghost{background:#fff;color:var(--ink);border:1px solid #c4c4c4}
.mcp-keys{display:flex;flex-direction:column;gap:6px}
.mcp-keys .key-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--line);border-radius:14px;background:#fff;font-size:13.5px}
.mcp-keys .key-row code{font-size:12.5px;color:#333;letter-spacing:.04em}
.mcp-keys .key-row small{margin-left:auto;color:var(--faint);white-space:nowrap}

/* ======================= Navbar (§2.10) ======================= */
/* navbar extras (nav.js, no stylesheet of its own): teamspace-name dropdown (> 1 teamspace), user menu rows */
.app-nav .nav-brand #ts-name[role=button]{cursor:pointer}
.app-nav .nav-brand #ts-name[role=button]:hover,.app-nav .nav-brand #ts-name[aria-expanded="true"]{text-decoration:underline;text-underline-offset:3px}
.app-nav .nav-brand .ts-chev{display:inline-grid;margin-left:2px;opacity:.8;cursor:pointer}
.app-nav .acct-menu[hidden]{display:none}
.app-nav .acct-menu.pm-user{min-width:230px;padding:6px;border-radius:16px}
.app-nav .acct-menu.pm-user .pm-row{color:var(--fg)}
.app-nav .acct-menu.pm-user .pm-row:hover{background:#f3f3f3}
/* popover menu under navbar controls (teamspace name / user) */
.pm{position:fixed;z-index:1000;min-width:230px;padding:6px;background:#fff;border:1px solid #d6d6d6;border-radius:16px;box-shadow:0 12px 32px rgba(0,0,0,.14);display:flex;flex-direction:column;gap:2px;animation:toast-in .15s ease-out}
.pm-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:0;border-radius:11px;background:transparent;font:inherit;font-size:14px;color:var(--ink);cursor:pointer;text-align:left;text-decoration:none;width:100%}
.pm-row:hover{background:#f3f3f3}
.pm-row svg{flex:none;color:var(--muted)}
.pm-row img{width:16px;height:16px;object-fit:contain;flex:none}
.pm-row span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-row small{color:var(--faint);font-size:12px}
.pm-row.danger{color:var(--danger)}.pm-row.danger svg{color:var(--danger)}
.pm-row .pm-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.pm-row .mav{width:22px;height:22px;font-size:9.5px}
.pm-sep{height:1px;margin:4px 6px;background:var(--line-soft)}
.pm-head{padding:8px 10px 4px;font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.pm{max-height:min(70vh,560px);overflow:auto}
.pm-row:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.pm-row[aria-disabled="true"]{opacity:.5;cursor:default}
.pm-row .pm-chip{margin-left:auto;flex:none;padding:1px 8px;border-radius:999px;background:#e8efff;color:var(--primary);font-size:11px;font-weight:600}
.pm-row .pm-blank{display:inline-block;width:16px;height:16px;flex:none}
.pm-row.ts-cur{font-weight:560}
.nav-ghost{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border:1px solid rgba(255,255,255,.4);border-radius:12px;background:transparent;color:#fff;font:inherit;font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap}
.nav-ghost:hover{background:rgba(255,255,255,.12)}
html[data-frame="white"] .nav-ghost{border-color:#c4c4c4;color:var(--ink)}
html[data-frame="white"] .nav-ghost:hover{background:rgba(0,0,0,.06)}
.app-tab .tab-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-left:0;border-radius:999px;background:#fff;color:var(--primary);font-size:11px;font-weight:600;line-height:1}
.app-tab .tab-badge.late{background:#ff6b6b;color:#fff}
.app-tab img.tab-logo{width:16px;height:16px;object-fit:contain;border-radius:4px}
/* data-policy dialog */
.dp-list{display:flex;flex-direction:column;gap:10px;margin:0 0 4px;padding:0;list-style:none}
.dp-list li{display:flex;gap:10px;font-size:14px;line-height:1.5;color:#333}
.dp-list li svg{flex:none;margin-top:3px;color:var(--ok)}
.dp-modal .dp-list{margin-top:4px}
.dp-modal .dp-list li svg.dp-eu{color:#003399}

/* ======================= Onboarding tour (§2.10) ======================= */
/* Tutorial modal (Martin 02/11): 25 % list of videos | 75 % video spot */
.tour-modal{width:min(1040px,calc(100vw - 32px));height:min(540px,calc(100vh - 64px));padding:0;overflow:hidden;display:flex;flex-direction:column}
.tour-modal .tour-split{display:grid;grid-template-columns:minmax(240px,1fr) minmax(0,3fr);flex:1;min-height:0}
.tour-modal .tour-list{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line);background:#fafafa}
.tour-modal .tour-list-head{display:flex;align-items:center;gap:8px;padding:18px 18px 12px;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:#6b6b6b}
.tour-modal .tour-list-head svg{color:#9a9a9a}
.tour-modal .tour-list-head b{font-weight:600;color:var(--ink)}
.tour-modal .tour-list-head em{font-style:normal;color:var(--faint)}
.tour-modal .tour-items{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:1px;padding:0 8px 8px}
.tour-modal .tour-item{display:flex;align-items:center;gap:10px;width:100%;padding:7px 10px;border:1px solid transparent;border-radius:12px;background:transparent;font:inherit;color:var(--fg);text-align:left;cursor:pointer}
.tour-modal .tour-item:hover{background:#f0f0f0}
.tour-modal .tour-item.on{background:#fff;border-color:#d6d6d6;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.tour-modal .tour-item-ico{display:grid;place-items:center;flex:none;width:22px;height:22px;color:var(--fg)}
.tour-modal .tour-item-ico img{display:block}
.tour-modal .tour-item-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.tour-modal .tour-item-txt b{font-size:14.5px;font-weight:480;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tour-modal .tour-item-dur{flex:none;font-size:12px;font-variant-numeric:tabular-nums;color:var(--faint);white-space:nowrap}
.tour-modal .tour-stage{display:flex;flex-direction:column;min-width:0;min-height:0;padding:16px;overflow:hidden}
.tour-modal .tour-player{position:relative;flex:1;min-height:0;width:100%;border-radius:16px;background:#0f1115;overflow:hidden}
.tour-modal .tour-player video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.tour-modal .tour-soon{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#fff;text-align:center;padding:24px}
.tour-modal .tour-soon-ico{display:grid;place-items:center;width:64px;height:64px;margin-bottom:8px;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:rgba(255,255,255,.08)}
.tour-modal .tour-soon b{font-family:var(--serif);font-weight:400;font-size:22px}
.tour-modal .tour-soon span:last-child{font-size:13.5px;opacity:.7}
.tour-modal .tour-foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px;border-top:1px solid var(--line);background:#fff}
.tour-modal .tour-foot .cta{margin:0;display:inline-flex;align-items:center;gap:8px}
.tour-modal .cm-x{top:12px;right:12px;background:rgba(255,255,255,.8)}
@media (max-width:760px){.tour-modal .tour-split{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,2fr) minmax(0,3fr)}.tour-modal .tour-list{border-right:0;border-bottom:1px solid var(--line)}}
@media (prefers-reduced-motion:reduce){.tour-modal .tour-dots i,.switch::after,.pm,.up-card{transition:none;animation:none}}

/* ----- squircle radii for every new rounded box (HARD RULE: every rounded shape is a squircle; avatars/dots stay round) ----- */
@supports (corner-shape: squircle){
  .g-wrap,.fp-body,.node-modal,  .tour-modal{border-radius:34px}
  .ctx-card,.cn-card,.up-card,.pm,.t-menu,.g-results,.g-legend,.ed-slide,.cn-status,.brain-mini{border-radius:22px}
  .g-zoom,.f-drop>div,.tree,.nm-rel,.nm-links,.nm-form input,.nm-form textarea,.cn-cred input,  .pj-head .pj-back,.pj-head .pj-ico,.fp-ico-btn,  .dr-sheet .dr-tabs button.on{border-radius:14px 14px 0 0}
  .seg,.seg button,.g-status,.g-viewonly,.switch,.fp-sel,.fp-tip,.rev-author,.nm-imp,.nm-rel-row .nm-rt,.cn-sector button,.cn-card .cn-premium,.cn-card .cn-ok,.cn-scopes span,.app-tab .tab-badge,.pj-head .pj-members{border-radius:999px}
  .mav,.mav img,.type-dot,.switch::after,.cn-status .cn-dot,.pm-row .pm-dot,.tour-modal .tour-dots i,.rev-author i,.av-stack .t-av{corner-shape:round;border-radius:50%}
}

/* sweep ===== DESIGN-CONFORMANCE SWEEP (02/11) — appended at the end (append-only rule). =====
   Every rule below is written with the v2 literals only (#0a0a0a #6b6b6b #8a8a8a #e1e1e1/#e4e4e4 #eee #f6f6f6 #fff #b3261e #1f9d55 #d98a00),
   the existing Geist fallback expression, var(--serif) and the `.doc code` monospace stack. No new tokens, no new fonts.
   Sections:
   §A re-applies the baseline rules the streams broke at l.949-953 (serif weight 500 list lost its declaration) and l.1473 (`.pm` scoped to the white frame) — to clean once the file may be edited in place
   §B rules needed by the swept pages (project / projects / file / node / oauth)
   §C token-free, v2-mono rewrite of the §2.4 "File page" viewers/editor/revisions block + .f-drop + .fi (overrides the earlier block; that block can be deleted later)
   §D oauth inline code */

/* ───────── §A — baseline rules broken by the streams (application.css l.949-953 lost `{font-weight:500!important}`; l.1473 scoped .pm to the white frame) ───────── */
.confirm-modal h3,.invite-modal h3,.task-modal h3,dialog h1,dialog h2,dialog h3,.legal-modal h2,.legal-modal h3,
.set-head .set-title,.set-title,.t-empty b,.app-nav #ts-name,.ptable td.pname,.mcp-embed h1{font-weight:500!important;border-radius:0;corner-shape:squircle}
.pm{position:fixed;z-index:1000;min-width:230px;padding:6px;background:#fff;border:1px solid #d6d6d6;border-radius:16px;box-shadow:0 12px 32px rgba(0,0,0,.14);display:flex;flex-direction:column;gap:2px;animation:toast-in .15s ease-out}
@supports (corner-shape: squircle){.pm{border-radius:22px;corner-shape:squircle}}

/* ───────── §B — swept pages ───────── */
/* projects: rows open the project (Enter / Space too) */
.ptable tr.prow.open{cursor:pointer}
.ptable tr.prow.open:hover td{background:#f6f8ff}
.ptable tr.prow:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
/* page header: the title may grow (file name / project name ellipsis, rename input), a badge or the members button sits next to it */
.set-head .set-title.grow{flex:1;min-width:0}
.set-title .ellip{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.set-title .c-in{font-family:var(--sans,Geist,system-ui,sans-serif);font-size:16px;font-weight:400;letter-spacing:0}
.set-head .brain-btn .av-stack{margin-right:2px}
.set-head .brain-btn .av-stack .t-av{box-shadow:0 0 0 2px #fff}
/* loader icons */
.spin svg{animation:fp-spin 1s linear infinite}
@media (prefers-reduced-motion:reduce){.spin svg{animation-duration:2s}}
/* breadcrumbs = subtitle line of link buttons */
.set-sub.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:-16px 0 18px}
.set-sub.crumbs .link-btn{font-size:14px}
.set-sub.crumbs svg{color:#bdbdbd}
.set-sub.crumbs b{font-weight:520;color:#0a0a0a}
/* files table = the projects table; 3rd column (Type) is not the 190px brain column */
.ptable.files th:nth-child(3),.ptable.files td:nth-child(3){width:auto;padding-right:12px}
.ptable.files td.pname .mwho b{font-weight:500}
.ptable.files td.pname .c-who{gap:10px}
.ptable.files td.pname .pn-lock,.ptable td.pname .pn .fi{display:inline-grid}
.ptable .pn a{color:inherit;text-decoration:none}
.ptable .pn a:hover{text-decoration:underline}
.ptable.files td.mact .t-ib{opacity:.55}
.ptable.files tr:hover td.mact .t-ib,.ptable.files tr:focus-within td.mact .t-ib,.ptable.files td.mact .t-ib:focus-visible{opacity:1}
.ptable td.pby img{display:block;width:22px;height:auto}
/* « Déplacer vers… » folder picker = the member picker, indented per level */
.t-pick-row.lvl-1{padding-left:30px}.t-pick-row.lvl-2{padding-left:50px}.t-pick-row.lvl-3{padding-left:70px}.t-pick-row.lvl-4{padding-left:90px}
.t-pick-row .pn-lock{display:grid;color:#7a7a7a}
/* context card (connectors aggregate) = a bento cell with one row */
.bcell.set-plain{margin:0 0 22px}
.bcell .c-row .av-stack{flex:none}
/* upload progress = the confirm card, fixed bottom-right */
.up-card.confirm-modal{position:fixed;right:24px;bottom:24px;z-index:60;width:min(380px,calc(100vw - 32px));margin:0;padding:20px 22px;display:flex;flex-direction:column;gap:10px;box-shadow:0 16px 40px -8px rgba(0,0,0,.3);animation:toast-in .2s ease-out}
.up-card.confirm-modal h3{margin:0;font-size:17px;padding-right:36px}
.up-card .c-hint.names{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.up-card ul{margin:0;padding-left:18px;font-size:12.5px;color:#6b6b6b}
.up-card ul b{color:#0a0a0a}
.up-card details{font-size:12.5px;color:#b3261e}
.up-card details summary{cursor:pointer;font-weight:560}
.up-card details ul{margin:6px 0 0;max-height:120px;overflow:auto;color:#b3261e}
.up-card .c-btns{margin-top:2px}
.up-bar{height:6px;border-radius:999px;background:#ececec;overflow:hidden}
.up-bar i{display:block;height:100%;width:var(--p,0%);background:var(--primary);transition:width .3s}
.up-card.done .up-bar i{background:#1f9d55}
.up-card.failed .up-bar i{background:#b3261e}
@media (prefers-reduced-motion:reduce){.up-card.confirm-modal{animation:none}}
/* file page */
.fp-body{position:relative;min-height:60vh;margin-top:4px}
.p-bar.fp-sel{bottom:auto;padding:4px;transform:translate(-50%,-100%);z-index:65}
.p-bar.fp-sel img{width:14px;height:14px}
.rev-bar .t-filters{margin:0}
.inv-list .inv-mail .mav{margin-right:10px}
/* node page */
.set-title .type-dot{flex:none}
.bento.node-info{margin:0 0 28px}
.bcell .chips{display:flex;flex-wrap:wrap;gap:6px}
.bcell p.notes{margin:0;font-size:14.5px;line-height:1.6;color:#333;white-space:pre-wrap}
.bcell p.notes.empty{color:#8a8a8a;font-style:italic}
.ptable td .chip-role{display:inline-flex;align-items:center;gap:6px}
.ptable td .chip-role svg{color:#8a8a8a}
/* oauth page (centered .set column + .set-sec card) */
.set-sec .c-row+.legal-notice{margin-top:14px}
.set-sec .legal-notice{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.5}
.set-sec .legal-notice svg{flex:none;margin-top:2px}
.set-sec .inv-label{margin:22px 0 8px}
.set-sec .field{margin:0}
.set-sec .set-hint{margin:12px 0 0}

/* ───────── §C — application.css §2.4 "File page" rewritten token-free, v2 mono stack (replaces l.1283-1375 + .f-drop + .fi at merge) ───────── */
.fi{display:inline-grid;place-items:center;flex:none;color:#6b6b6b}
.fi-pdf{color:#d1403a}.fi-doc{color:#2b5fd9}.fi-sheet,.fi-csv{color:#1f8f4e}.fi-slides{color:#d9731a}.fi-image{color:#8e44ad}.fi-archive{color:#8a6d3b}.fi-code,.fi-html{color:#0a7f8c}.fi-md,.fi-text{color:#555}.fi-audio,.fi-video{color:#c2185b}
.f-drop{position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;background:rgba(22,93,251,.08);backdrop-filter:blur(2px);pointer-events:none}
.f-drop.on{display:flex}
.f-drop>div{display:flex;flex-direction:column;align-items:center;gap:10px;padding:34px 44px;border:2px dashed var(--primary);border-radius:28px;background:#fff;color:var(--primary);font-size:16px;font-weight:560}
.f-drop>div span{font-size:13.5px;font-weight:400;color:#6b6b6b}
.fp-body{border:1px solid #e1e1e1;border-radius:24px;background:#fff;overflow:hidden}
.fp-body.fp-edit{overflow:visible}
.fp-body iframe{display:block;width:100%;height:calc(100vh - var(--navh,53px) - 150px);min-height:520px;border:0;background:#fff}
.fp-body img.fp-img{display:block;max-width:100%;max-height:calc(100vh - 200px);margin:0 auto;object-fit:contain}
.fp-body .t-empty{min-height:50vh;justify-content:center}
.fp-loading{display:flex;align-items:center;justify-content:center;gap:10px;min-height:50vh;color:#6b6b6b;font-size:14px}
.fp-loading svg{animation:fp-spin 1s linear infinite}
@keyframes fp-spin{to{transform:rotate(360deg)}}
/* office renderers */
.dr-office{padding:28px clamp(16px,4vw,48px);background:#f3f3f3;min-height:60vh}
.dr-office .docx-wrapper{background:transparent!important;padding:0!important}
.dr-office .docx-wrapper>section.docx{box-shadow:0 2px 12px rgba(0,0,0,.08);margin-bottom:20px!important}
.dr-sheet{padding:0}
.dr-sheet .dr-tabs{display:flex;gap:2px;padding:10px 14px 0;border-bottom:1px solid #e1e1e1;background:#f6f6f6;overflow-x:auto;scrollbar-width:none}
.dr-sheet .dr-tabs button{padding:8px 14px;border:1px solid transparent;border-bottom:0;border-radius:12px 12px 0 0;background:transparent;font:inherit;font-size:13px;color:#6b6b6b;cursor:pointer;white-space:nowrap}
.dr-sheet .dr-tabs button.on{background:#fff;border-color:#e1e1e1;color:#0a0a0a;font-weight:560}
.dr-sheet .dr-grid{overflow:auto;max-height:calc(100vh - 240px)}
.dr-sheet .dr-grid[hidden]{display:none}
.dr-sheet table{border-collapse:collapse;font-size:13px;min-width:100%}
.dr-sheet td,.dr-sheet th{padding:5px 10px;border:1px solid #e6e6e6;white-space:nowrap;max-width:320px;overflow:hidden;text-overflow:ellipsis}
.dr-sheet th,.dr-sheet tr:first-child td{background:#fafafa;font-weight:560;position:sticky;top:0}
.dr-pptx{display:flex;flex-direction:column;gap:24px;padding:28px;background:#f3f3f3}
.dr-pptx .dr-slide{position:relative;width:min(960px,100%);aspect-ratio:16/9;margin:0 auto;background:#fff;border:1px solid #e1e1e1;border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,.08);overflow:hidden}
.dr-pptx .dr-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.dr-pptx .dr-slide .dr-txt{position:absolute;inset:0;padding:5% 6%;display:flex;flex-direction:column;gap:.6em;font-size:clamp(12px,1.8vw,20px);line-height:1.35;overflow:auto}
.dr-pptx .dr-slide .dr-txt p{margin:0}
.dr-pptx .dr-slide .dr-txt .dr-t1{font-size:1.5em;font-weight:600;margin-bottom:.4em}
.dr-pptx .dr-slide .dr-txt.dr-empty{align-items:center;justify-content:center;color:#8a8a8a}
.dr-pptx .dr-slide .dr-n{position:absolute;right:12px;bottom:8px;font-size:11px;color:#8a8a8a}
.fp-pre{margin:0;padding:24px clamp(16px,3vw,32px);font:13.5px/1.6 ui-monospace,"SF Mono",Menlo,Consolas,monospace;white-space:pre-wrap;word-break:break-word;color:#222;max-height:calc(100vh - 200px);overflow:auto}
.fp-csv{overflow:auto;max-height:calc(100vh - 200px)}
.fp-csv table{border-collapse:collapse;font-size:13px;min-width:100%}
.fp-csv td,.fp-csv th{padding:6px 12px;border-bottom:1px solid #eee;white-space:nowrap;max-width:360px;overflow:hidden;text-overflow:ellipsis}
.fp-csv th{position:sticky;top:0;background:#fafafa;text-align:left;font-weight:560;text-transform:uppercase;font-size:11.5px;letter-spacing:.04em;color:#6b6b6b}
.fp-md{padding:28px clamp(16px,4vw,48px);font-size:15px;line-height:1.65;max-width:860px;margin:0 auto}
.fp-md pre{white-space:pre-wrap;word-break:break-word;font:13.5px/1.6 ui-monospace,"SF Mono",Menlo,Consolas,monospace}
.fp-md .fp-md-pre{font:14.5px/1.65 var(--sans,Geist,system-ui,sans-serif);padding:0}
/* docx tracked changes bar + list */
.rev-bar{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;padding:10px 16px;border-bottom:1px solid #e1e1e1;background:#f6f6f6;font-size:13px}
.rev-bar .rev-n{font-weight:560;color:#333}
.rev-bar .rev-authors{display:flex;flex-wrap:wrap;gap:6px}
.rev-bar .rev-act{margin-left:auto;display:flex;gap:6px}
.rev-bar .rev-act .cta{margin:0;padding:6px 12px;font-size:12.5px}
.rev-bar .rev-act .cta.ghost{background:#fff;color:#0a0a0a;border:1px solid #c4c4c4}
.rev-author{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:560;background:color-mix(in srgb,var(--ac) 14%,#fff);color:var(--ac)}
.rev-author i{width:7px;height:7px;border-radius:50%;background:var(--ac)}
.rev-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;align-items:start}
.rev-list{position:sticky;top:0;max-height:calc(100vh - 220px);overflow:auto;border-left:1px solid #e1e1e1;padding:10px;display:flex;flex-direction:column;gap:4px;scrollbar-width:thin}
.rev-list h4{display:flex;align-items:center;gap:6px;margin:6px 4px 2px;font-size:11.5px;font-weight:480;letter-spacing:.05em;text-transform:uppercase;color:#6b6b6b}
.rev-list h4 em{font-style:normal;color:#8a8a8a}
.rev-list .rev-none,.rev-list .rev-hint{margin:4px 6px;font-size:12.5px;color:#8a8a8a}
.rev-item{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border:1px solid #eee;border-radius:14px;background:#fff;cursor:pointer;font-size:13px}
.rev-item:hover,.rev-item.on{border-color:var(--ac,var(--primary));background:color-mix(in srgb,var(--ac,var(--primary)) 6%,#fff)}
.rev-item .rev-kind{display:flex;align-items:center;gap:8px;font-weight:560}
.rev-item .rev-kind small{margin-left:auto;font-weight:400;color:#8a8a8a}
.rev-item .rev-anchor{font-size:12px;color:#8a8a8a;font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rev-item .rev-txt{color:#444;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.rev-item .rev-txt.del{text-decoration:line-through;color:#8a8a8a}
.rev-item .rev-btns{display:flex;gap:4px;justify-content:flex-end}
.rev-item .rev-btns .t-ib{width:26px;height:26px}
.rev-item .rev-btns .cta.small{margin:0;padding:5px 10px;font-size:12.5px}
.rev-item .rev-btns .cta.ghost.small{background:#fff;color:#0a0a0a;border:1px solid #c4c4c4}
.rev-item .rev-edit{display:flex;flex-direction:column;gap:6px}
.rev-item.comment{border-style:dashed}
.rev-item.rev-new{border-color:var(--primary)}
.rev-item .rev-reply{margin-left:14px;padding-left:10px;border-left:2px solid #e1e1e1;color:#555}
.rev-item.resolved{opacity:.55}
.rev-item textarea{width:100%;padding:8px 10px;font:inherit;font-size:13px;border:1px solid #c4c4c4;border-radius:10px;resize:vertical}
.dr-rev-a0{--ac:#2d5ff5}.dr-rev-a1{--ac:#1f9d55}.dr-rev-a2{--ac:#d98a00}.dr-rev-a3{--ac:#d6409f}.dr-rev-a4{--ac:#0aa5c0}.dr-rev-a5{--ac:#7c4dff}
.fp-body ins[class*=dr-rev-a]{text-decoration:underline;text-decoration-color:var(--ac);background:color-mix(in srgb,var(--ac) 14%,#fff);color:var(--ac)}
.fp-body del[class*=dr-rev-a]{text-decoration:line-through;text-decoration-color:var(--ac);background:color-mix(in srgb,var(--ac) 10%,#fff);color:color-mix(in srgb,var(--ac) 70%,#000)}
.fp-body ins.hl,.fp-body del.hl{outline:2px solid var(--ac);outline-offset:1px;border-radius:3px}
.fp-body.rev-final del[class*=dr-rev-a]{display:none}
.fp-body.rev-final ins[class*=dr-rev-a]{text-decoration:none;background:none;color:inherit}
.fp-body.rev-original ins[class*=dr-rev-a]{display:none}
.fp-body.rev-original del[class*=dr-rev-a]{text-decoration:none;background:none;color:inherit}
.fp-body .dr-cm{background:#fff3cf;border-bottom:2px solid #f2b53c;cursor:pointer}
.fp-body .dr-cm.hl{outline:2px solid #f2b53c}
@media (max-width:900px){.rev-layout{grid-template-columns:1fr}.rev-list{position:static;max-height:none;border-left:0;border-top:1px solid #e1e1e1}}
/* editor */
.ed-text{display:block;width:100%;min-height:calc(100vh - 230px);padding:24px clamp(16px,3vw,32px);border:0;resize:none;background:#fff;font:14px/1.6 ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:#222;outline:none}
.ed-para{display:flex;flex-direction:column;gap:10px;padding:28px clamp(16px,4vw,48px);max-width:900px;margin:0 auto}
.ed-para textarea{width:100%;padding:10px 14px;font:inherit;font-size:15px;line-height:1.55;border:1px solid transparent;border-radius:12px;background:transparent;resize:none;overflow:hidden;field-sizing:content}
.ed-para textarea:hover{border-color:#e1e1e1}
.ed-para textarea:focus{outline:none;border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px rgba(22,93,251,.12)}
.ed-para textarea.h1{font-family:var(--serif);font-size:24px;font-weight:500}
.ed-para textarea.h2{font-family:var(--serif);font-size:19px;font-weight:500}
.ed-slide{display:flex;flex-direction:column;gap:10px;padding:18px 20px;border:1px solid #e1e1e1;border-radius:18px;background:#fff}
.ed-slide h4{margin:0;font-size:12.5px;font-weight:480;letter-spacing:.04em;text-transform:uppercase;color:#6b6b6b}
.ed-slide textarea{width:100%;padding:8px 12px;font:inherit;font-size:14px;border:1px solid #d6d6d6;border-radius:12px;resize:none;overflow:hidden;field-sizing:content}
.ed-slides{display:flex;flex-direction:column;gap:16px;padding:24px;background:#f3f3f3}
.ed-none{margin:0;padding:4px 12px;color:#8a8a8a;font-size:13px}
.ed-grid{overflow:auto;max-height:calc(100vh - 240px)}
.ed-grid table{border-collapse:collapse;font-size:13px}
.ed-grid td{padding:0;border:1px solid #e6e6e6}
.ed-grid td input{width:140px;padding:5px 8px;border:0;font:inherit;font-size:13px;background:transparent}
.ed-grid td input:focus{outline:2px solid var(--primary);outline-offset:-2px;background:#fff}
.ed-grid th{padding:5px 8px;background:#fafafa;font-weight:560;color:#6b6b6b;position:sticky;top:0;text-align:center;border:1px solid #e6e6e6}
.ed-dirty .set-head{box-shadow:inset 0 -1px 0 var(--primary)}
@supports (corner-shape: squircle){
  .fp-body{border-radius:34px;corner-shape:squircle}
  .f-drop>div,.ed-slide{border-radius:28px;corner-shape:squircle}
  .rev-item,.up-bar{border-radius:14px;corner-shape:squircle}
  .dr-sheet .dr-tabs button.on{border-radius:14px 14px 0 0;corner-shape:squircle}
  .rev-author{border-radius:999px}
}
@media (prefers-reduced-motion:reduce){.fp-loading svg{animation-duration:2s}}

/* ───────── §D — inline code inside v2 lists (oauth scopes) = the `.doc code` component of octopus.css ───────── */
.inv-list code{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:12px;padding:1px 6px;border-radius:6px;background:#f2f4f8;color:#1d2b55}
/* tab chips: a disabled tab (no brain yet) */
.t-chip[disabled]{opacity:.45;cursor:default}
.t-filters.tabs{margin:0 0 18px}
.t-filters.tabs+.p-searchrow{margin-top:0}
/* grey « ← back » link (the MCP-page component) above a page header */
.set.wide>.back{margin-bottom:14px}
/* Tasks page « À venir » badge = the navbar badge colours (Martin 02/11); application.css loads before settings.css, hence the specificity */
main.app-page .set-head-act .cta .tab-badge,main.app-page .set-head-act .cta.ghost .tab-badge{background:rgba(255,255,255,.22);background:#e8efff;color:var(--primary)}
main.app-page .set-head-act .cta .tab-badge.late,main.app-page .set-head-act .cta.ghost .tab-badge.late{background:#ff6b6b;color:#fff}

/* sweep §E ===== former settings.css (stream C: navbar / tour / connectors / settings / tasks / users extras), folded here token-free (02/11).
   Changes vs the file: `.app-nav .nav-right` left to the rule the live session appended earlier (l.410); the
   OAuth block dropped (oauth page now uses .set / .set-sec / .c-row / .inv-list / .set-actions); tokens → literals. ===== */
/* hidden attribute vs. display rules of application.css (.cta is inline-flex, .set-head is flex) */
.set-head-act .cta[hidden],.prof-name .cta[hidden],.bcell .cta[hidden],.set-head[hidden],.app-nav .acct-menu[hidden]{display:none}

/* ======================= Tour (§2.10) extras ======================= */
.tour-modal .tour-label{display:inline-flex;align-items:center;gap:8px;margin:0 0 8px;color:var(--primary);font-size:13px;font-weight:600;letter-spacing:.02em}
.tour-modal .tour-label svg{flex:none}
.tour-modal .tour-badge{display:inline-block;margin:0 0 10px;padding:3px 10px;border:1px solid #bcd3ff;border-radius:999px;background:#eef3ff;color:#1a4fd6;font-size:12px;font-weight:500}
.tour-modal .tour-note{margin:10px 0 0!important;font-weight:520;color:var(--fg)!important}
.tour-modal .tour-cards{display:flex;flex-direction:column;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.tour-modal .tour-cards li{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid #e4e4e4;border-radius:16px;background:#fff;font-size:14px;line-height:1.5;color:#333}
.tour-modal .tour-cards li>span:first-child{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:10px;background:#eef3ff;color:var(--primary)}
.tour-modal .tour-cards li img{width:18px;height:18px;object-fit:contain}
.tour-modal .tour-chips{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0}
.tour-modal .tour-chips span,.tour-modal .tour-chips button{padding:3px 10px;border:1px solid #bcd3ff;border-radius:999px;background:#eef3ff;color:#1a4fd6;font:inherit;font-size:12.5px;font-weight:500}
.tour-modal .tour-chips button{background:#fff;cursor:pointer}
.tour-modal .tour-chips button:hover{background:#eef3ff}
.tour-modal .tour-steps{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;counter-reset:st}
.tour-modal .tour-steps li{display:flex;gap:10px;font-size:14.5px;line-height:1.5;color:#333}
.tour-modal .tour-steps li::before{counter-increment:st;content:counter(st) ".";flex:none;width:20px;font-weight:600;color:var(--primary);font-variant-numeric:tabular-nums}
.tour-modal .tour-checks{display:flex;flex-wrap:wrap;gap:8px 22px;margin:14px 0 0;padding:0;list-style:none}
.tour-modal .tour-checks li{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:520;color:var(--fg)}
.tour-modal .tour-checks li svg{color:var(--primary)}
.tour-modal .tour-art .tour-logos span{flex-direction:column;gap:4px;width:64px;height:auto;padding:8px 4px;font-size:10.5px;color:#6b6b6b}
.tour-modal .tour-art .tour-logos span b{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#eef3ff;color:var(--primary);font-size:13px;font-weight:600}
.tour-modal .tour-art .tour-logos span em{font-style:normal;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tour-modal .tour-art .tour-ico{display:grid;place-items:center;width:84px;height:84px;border-radius:26px;background:#fff;border:1px solid #e4e4e4;color:var(--primary);box-shadow:0 10px 30px rgba(22,93,251,.12)}
.tour-modal .tour-art .tour-ico img{width:44px;height:44px}
.tour-modal .tour-art .tour-icos{display:flex;gap:12px}
.tour-modal .tour-art .tour-icos .tour-ico{width:60px;height:60px;border-radius:18px}
.tour-modal .tour-foot .tour-n{margin-left:8px;margin-right:auto;font-size:12px;color:#6b6b6b;font-variant-numeric:tabular-nums}
.tour-modal .tour-dots{margin-right:0}
.tour-modal .tour-body{max-height:min(52vh,460px);overflow:auto}

/* ======================= Connectors (§2.7) extras ======================= */
.cn-page .cn-intro{margin:0 0 18px;max-width:640px;color:#6b6b6b;font-size:14.5px;line-height:1.55}
.cn-page .p-search{max-width:420px;margin:0 0 28px}
.cn-card .cn-name a{color:inherit;text-decoration:none}
.cn-card .cn-name a:hover{text-decoration:underline}
.cn-card .cn-ico .cn-letter{font-size:16px;font-weight:600;color:var(--primary)}
.cn-card .cn-foot .cta[disabled]{opacity:.6;cursor:default}
.cn-card .cn-foot .cn-soon{margin-left:auto;padding:3px 10px;border:1px solid #e4e4e4;border-radius:999px;background:#f6f6f6;color:#6b6b6b;font-size:11.5px;font-weight:500}
.cn-priced .cn-top .cta{margin-left:auto}
.cn-empty{padding:30px 0;color:#6b6b6b;font-size:14px}
/* connector detail modal (replaces the former per-connector page) */
.cn-card .cn-name button{all:unset;cursor:pointer;display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cn-card .cn-name button:hover{text-decoration:underline;text-underline-offset:3px}
.cn-detail-modal{width:min(560px,calc(100vw - 32px))}
.cn-detail-modal .cn-status{margin:0 0 16px}
.cn-detail-modal .cn-status .cta{margin:0 0 0 auto;display:inline-flex;align-items:center;gap:7px;padding:8px 16px;font-size:13.5px}
.cn-detail-modal .cn-status .cta.ghost{background:#fff;color:var(--fg);border:1px solid #c4c4c4}
.cn-detail-modal .cn-status .cn-txt{display:flex;flex-direction:column;min-width:0}
.cn-detail-modal .cn-desc{margin:0 0 16px;color:#333;font-size:14.5px;line-height:1.6}
.cn-detail-modal .cn-sec{margin:0 0 16px}
.cn-detail-modal .cn-sec h2{margin-bottom:8px}
.cn-detail-modal .cn-sub{margin:-6px 0 14px;color:#6b6b6b;font-size:13px}
.cn-cred label{display:flex;flex-direction:column;gap:5px;font-size:13.5px;font-weight:520}
.cn-cred label small{font-weight:400;color:#6b6b6b;font-size:12px}
.cn-cred label em{font-style:normal;font-weight:400;color:#6b6b6b;font-size:12px;margin-left:4px}
.cn-cred .cn-rotate{margin:4px 0 0;color:#6b6b6b;font-size:12.5px}
.cn-ind-note{display:flex;align-items:center;gap:8px;margin:0 0 12px;color:#6b6b6b;font-size:13px}
.cn-ind-note svg{color:var(--primary);flex:none}

/* ======================= Settings (§2.8) extras ======================= */
.prof-row .mav{position:relative;font-size:22px;background:#e8efff;color:var(--primary)}
.prof-row .prof-main .prof-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.prof-row .prof-main .prof-name input{flex:1;min-width:180px;max-width:320px;padding:8px 12px;font:inherit;font-size:15px;border:1px solid #c4c4c4;border-radius:12px;background:#fff}
.prof-row .prof-main .prof-name input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(22,93,251,.15)}
.prof-row .prof-main .prof-name .cta{margin:0;padding:8px 14px;font-size:13px}
.prof-row .prof-main .prof-mail{display:flex;align-items:center;gap:6px;color:#6b6b6b;font-size:13.5px}
.prof-row .prof-main .prof-mail svg{flex:none;opacity:.7}
.prof-pw{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px}
.prof-pw .cta{margin:0;display:inline-flex;align-items:center;gap:7px;padding:8px 14px;font-size:13px;background:#fff;color:var(--fg);border:1px solid #c4c4c4}
.prof-pw small{color:#6b6b6b;font-size:12.5px}
.pref-btns{margin-top:4px}
.pref-btns button{display:inline-flex;align-items:center;gap:8px}
.pref-btns button .lang svg{width:22px;height:22px;display:block}
.pref-btns button[aria-pressed="true"]{background:#0a0a0a;border-color:#0a0a0a;color:#fff}
.opt-row .opt-radio{flex:none;width:20px;height:20px;border:1.5px solid #c4c4c4;border-radius:50%;background:#fff;display:grid;place-items:center}
.opt-row .opt-radio::after{content:"";width:10px;height:10px;border-radius:50%;background:transparent}
.opt-row[aria-checked="true"] .opt-radio{border-color:var(--primary)}
.opt-row[aria-checked="true"] .opt-radio::after{background:var(--primary)}
button.opt-row{width:100%;border:0;border-top:1px solid #eee;background:transparent;font:inherit;text-align:left;cursor:pointer;color:inherit}
button.opt-row:first-of-type{border-top:0}
button.opt-row:hover{background:#fafafa}
button.opt-row:focus-visible{outline:2px solid var(--primary);outline-offset:-2px;border-radius:10px}
.opt-row .chip.badge.rec{background:#e3f6e8;border-color:#e3f6e8;color:#14612c;font-size:11px;padding:2px 8px}
.acc-row .acc-price{display:block;margin-top:6px;color:#6b6b6b;font-size:13px}
.acc-row .acc-note{margin:10px 0 0;color:#6b6b6b;font-size:12.5px;line-height:1.5}
.acc-dlg .acc-box{display:flex;flex-direction:column;gap:6px;margin:0 0 16px;padding:12px 14px;border:1px solid #e4e4e4;border-radius:14px;background:#f6f6f6;color:#555;font-size:13px;line-height:1.5}
.acc-dlg .acc-box b{color:var(--fg)}
.brain-mini-host{margin-top:4px}
.ind-list{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.ind-list span{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border:1px solid #e4e4e4;border-radius:999px;background:#fff;font-size:13px}
.ind-list span img{width:16px;height:16px;object-fit:contain}
.ind-none{margin:0 0 12px;color:#6b6b6b;font-size:13.5px}
.bcell .cta.ghost.wfit{align-self:flex-start;background:#fff;color:var(--fg);border:1px solid #c4c4c4;margin:0;display:inline-flex;align-items:center;gap:8px}
.mcp-status{display:flex;align-items:center;gap:12px;margin:0 0 18px;padding:14px 16px;border:1px solid #e4e4e4;border-radius:18px;background:#fff}
.mcp-status .cn-dot{width:10px;height:10px;border-radius:50%;background:#bdbdbd;flex:none}
.mcp-status.on .cn-dot{background:#1f9d55}
.mcp-status b{font-size:14.5px;font-weight:560}
.mcp-status small{display:block;color:#6b6b6b;font-size:12.5px}
.mcp-status code{margin-left:auto;font-size:12.5px;color:#333;background:#f6f6f6;padding:4px 10px;border-radius:10px;white-space:nowrap}
.mcp-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0 0 26px}
@media (max-width:820px){.mcp-two{grid-template-columns:1fr}}
.mcp-card{display:flex;flex-direction:column;gap:10px;padding:18px;border:1px solid #e4e4e4;border-radius:22px;background:#fff}
.mcp-card h3{display:flex;align-items:center;gap:8px;margin:0;font-size:15.5px;font-weight:520}
.mcp-card h3 svg{color:var(--primary)}
.mcp-card .set-sub{margin:0}
.mcp-card .mcp-act{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.mcp-card .mcp-act .cta{margin:0;display:inline-flex;align-items:center;gap:7px;padding:8px 14px;font-size:13px}
.mcp-card .mcp-act .cta.ghost{background:#fff;color:var(--fg);border:1px solid #c4c4c4}
.mcp-keys .key-row .t-ib{margin-left:4px;flex:none}
.mcp-keys .key-row .key-lab{font-weight:520;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcp-keys .key-row .key-host{color:#6b6b6b;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcp-keys .key-row .mav{width:26px;height:26px;font-size:10px;flex:none}
.mcp-keys .key-none{padding:10px 0;color:#6b6b6b;font-size:13.5px}
.key-reveal{display:flex;flex-direction:column;gap:10px;margin:0 0 16px;padding:14px;border:1px solid #bcd3ff;border-radius:16px;background:#f5f8ff}
.key-reveal p{margin:0;color:#333;font-size:13.5px;line-height:1.5}
.key-reveal .key-code{display:flex;align-items:center;gap:8px}
.key-reveal code{flex:1;min-width:0;padding:9px 12px;border:1px solid #d6d6d6;border-radius:12px;background:#fff;font-size:13px;word-break:break-all;user-select:all}
.key-reveal .cta{margin:0;padding:8px 14px;font-size:13px;display:inline-flex;align-items:center;gap:6px;flex:none}
.mcp-embed .mcp-guide-h{margin-top:8px}
.mcp-soon{display:flex;align-items:center;gap:8px;padding:10px 0;color:#6b6b6b;font-size:13.5px}

/* ======================= Tasks (§2.6) extras ======================= */
.t-chip.urgent{--tc:#e5484d}
.t-chip.urgent svg{color:#e5484d}
.t-chip.urgent.on svg{color:#fff}
.t-sec.proj h2 em{font-style:normal;margin-left:6px;padding:1px 8px;border-radius:999px;background:#eef1f5;color:#555;font-size:12px;font-weight:600}
.t-sec.proj h2 .t-ro{margin-left:8px;font-size:11.5px;font-weight:500;color:#6b6b6b;text-transform:uppercase;letter-spacing:.04em}
.t-sec.proj h2 a{color:inherit;text-decoration:none}
.t-sec.proj h2 a:hover{text-decoration:underline}
.set-head-act .cta .tab-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-left:4px;border-radius:999px;background:var(--primary);color:#fff;font-size:11px;font-weight:600;line-height:1}
.set-head-act .cta .tab-badge.late{background:#e5484d}
.set-head-act .cta.ghost .tab-badge{background:#e8efff;color:var(--primary)}
.set-head-act .cta.ghost .tab-badge.late{background:#fde4e2;color:#b3261e}
.t-filter-btn .tab-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-left:4px;border-radius:999px;background:#e8efff;color:var(--primary);font-size:11px;font-weight:600}
.up-modal{width:min(640px,calc(100vw - 32px))}
.up-sec{margin:0 0 18px}
.up-sec:last-child{margin-bottom:0}
.up-sec h4{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#6b6b6b}
.up-sec h4 em{font-style:normal;padding:0 7px;border-radius:999px;background:#eef1f5;font-size:11px}
.up-sec.late h4{color:#b3261e}.up-sec.late h4 em{background:#fde4e2;color:#b3261e}
.up-sec.today h4{color:var(--primary)}.up-sec.today h4 em{background:#e8efff;color:var(--primary)}
.up-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid #e4e4e4;border-radius:14px;background:#fff;margin:0 0 6px}
.up-row .t-st{flex:none}
.up-row .up-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.up-row .up-title{font-size:14.5px;font-weight:520;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.up-row .up-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:#6b6b6b}
.up-row .up-meta .t-type{font-size:12px}
.up-row .up-meta .up-origin{display:inline-flex;align-items:center;gap:4px}
.up-row .up-meta .up-origin svg{opacity:.7}
.up-row .up-due{flex:none;font-size:12.5px;color:#6b6b6b;white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.up-sec.late .up-due{color:#b3261e}
.up-row .up-done{flex:none;margin:0;padding:6px 12px;font-size:12.5px;display:inline-flex;align-items:center;gap:5px;background:#fff;color:var(--fg);border:1px solid #c4c4c4}
.up-row .up-done:hover{background:#f3f3f3}
.up-empty{padding:34px 10px;text-align:center;color:#6b6b6b;font-size:14.5px;display:flex;flex-direction:column;align-items:center;gap:6px}
.up-empty svg{color:#1f9d55}
.up-modal .up-body{max-height:min(60vh,520px);overflow:auto;margin:0 0 12px}
.t-brand-empty .t-empty-ico img{width:28px;height:27px}

/* ======================= Users page extra ======================= */
.inv-nightly{display:inline-flex;align-items:center;gap:5px;margin-left:8px;color:#6b6b6b;font-size:12px;white-space:nowrap}
.inv-nightly svg{opacity:.75}

/* ----- squircle radii (HARD RULE: every new rounded box is a squircle; avatars/dots stay round) ----- */
@supports (corner-shape: squircle){
  .up-modal,.mcp-card,.acc-dlg .acc-box{border-radius:22px;corner-shape:squircle}
  .tour-modal .tour-cards li,.key-reveal,.mcp-status,.up-row,.tour-modal .tour-art .tour-ico{border-radius:18px;corner-shape:squircle}
  .prof-row .prof-main .prof-name input,.key-reveal code,.mcp-status code,.tour-modal .tour-art .tour-icos .tour-ico,.tour-modal .tour-cards li>span:first-child{border-radius:12px;corner-shape:squircle}
  .pref-btns button,.tour-modal .tour-chips span,.tour-modal .tour-chips button,.ind-list span,.pm-row .pm-chip,.cn-card .cn-foot .cn-soon,.inv-nightly,.t-sec.proj h2 em,.up-sec h4 em,.set-head-act .cta .tab-badge,.t-filter-btn .tab-badge{border-radius:999px}
  .opt-row .opt-radio,.opt-row .opt-radio::after,.prof-row .mav,.mcp-status .cn-dot{corner-shape:round;border-radius:50%}
}

/* Tasks list, v1-desktop layout (Martin 02/11): plain rows, left-aligned content | right-aligned chips, no table */
.t-list{display:flex;flex-direction:column;border-top:1px solid #eee}
.t-list .t-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 8px 12px 0;border-bottom:1px solid #eee;cursor:pointer;transition:background .12s}
.t-list .t-row:hover{background:#fafafa}
.t-list .t-row.flash{background:#e8efff}
.t-list .t-left{display:flex;align-items:center;gap:14px;min-width:0;flex:1}
.t-list .t-left .t-st{margin:0;flex:none}
.t-list .t-main{min-width:0}
.t-list .t-main .t-title{font-family:var(--serif);font-size:16px;overflow-wrap:anywhere}
.t-list .t-main .t-desc{font-family:var(--sans,Geist,system-ui,sans-serif);font-size:13px}
.t-list .t-right{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex:none}
.t-list .t-right .t-type,.t-list .t-right .t-remind{margin-top:0}
.t-list .t-right .tasg-in{display:flex;align-items:center;gap:6px}
.t-list .t-right .t-tools{display:flex;gap:2px}
.t-sec .t-list+.t-add{margin-top:10px}
@media (max-width:820px){.t-list .t-row{flex-wrap:wrap}.t-list .t-right{width:100%;justify-content:flex-start;padding-left:46px}}

/* Tasks page filters (Martin 02/11): project · person · unassigned, one list; every row shows its project */
.t-filterbar{display:flex;flex-direction:column;gap:8px;margin:0 0 18px}
.t-frow{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.t-frow>b{min-width:70px;margin-right:2px;font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#6b6b6b}
.t-frow .t-chip .mav{display:grid;place-items:center;flex:none;width:16px;height:16px;font-size:7px}
.t-frow .t-chip.on .mav{background:#fff;color:#0a0a0a}
.t-proj{display:inline-flex;align-items:center;gap:5px;max-width:180px;padding:2px 10px;border-radius:999px;font-size:11.5px;font-weight:520;color:#333;background:#f1f1f1;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-proj svg{flex:none}
.t-proj.personal{color:#6b6b6b}
a.t-proj:hover{background:#e6e6e6;color:var(--fg)}

/* empty states: several CTAs side by side */
.t-empty-acts{display:flex;flex-direction:column;align-items:stretch;gap:6px;width:min(420px,100%);margin-top:14px}   /* stacked, same width, tight (Martin 02/11) */
.t-empty .t-empty-acts .t-empty-btn,.t-empty .t-empty-acts .cta{margin:0!important;width:100%;justify-content:center;text-decoration:none}
.t-empty .t-empty-acts .cta.ghost{background:#fff;color:var(--fg);border:1px solid #c4c4c4}

/* Tasks: filter modal + project group labels inside the one list (Martin 02/11) */
.t-filter-modal{width:min(640px,calc(100vw - 32px))}
.t-fmodal{display:flex;flex-direction:column;gap:14px;margin:4px 0 20px}
.t-fmodal .t-frow>b{width:100%;min-width:0;margin:0 0 2px}
.t-pgroup{display:flex;align-items:center;gap:8px;padding:14px 0 6px;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#6b6b6b}
.t-pgroup a,.t-pgroup span{display:inline-flex;align-items:center;gap:6px;color:inherit;text-decoration:none}
.t-pgroup a:hover{color:var(--fg)}
.t-pgroup em{font-style:normal;color:var(--faint);font-weight:500}
.t-pgroup+.t-row{border-top:1px solid #eee}
.t-list .t-row .t-proj{display:none}   /* grouped list: the group label names the project */
.t-empty .t-empty-btn img{display:block;flex:none}

/* navbar tabs: dim the label/icon through colour, never the tab's opacity — the Tâches badge is never dimmed (Martin 02/11) */
.app-tab{opacity:1!important}
.app-tab.on{color:#fff}
.app-tab:not(.on):not(:hover) .app-tab-ico{opacity:.82}
.app-tab .tab-badge{opacity:1}

/* navbar: the teamspace name uses the page-title serif, 2 px smaller (Martin 02/11 22:30; replaces the earlier Geist version) */
.app-nav #ts-name,.app-nav .nav-brand #ts-name{font-family:var(--sans,Geist,system-ui,sans-serif)!important;font-size:14.5px!important;font-weight:560!important;letter-spacing:0}   /* same font and size as the navbar tabs, a bit bolder (Martin 02/11) */   /* = the page title (« Tâches »: serif 26/500), 2 px smaller (Martin 02/11 22:30) */

/* ═══ Settings page unified with the other app pages (Martin 02/11): same page shell (.set.wide 32/80 padding, .set-head title row full width),
   the sidebar below the title in the left column, app fonts (Geist 400 body, sans 15/560 section + card headings), app cards (22 px, #e4e4e4),
   black pill for the active section like every selected chip of the app ═══ */
#settings.has-side.set.wide,#settings.set.wide{padding:32px 80px 0!important}
@media (max-width:820px){#settings.has-side.set.wide,#settings.set.wide{padding:24px 20px 0!important}}
#settings.has-side .set-layout{display:grid;grid-template-columns:220px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"head head" "side main";column-gap:32px;row-gap:0;align-items:start;height:100%;min-height:0;overflow:hidden}
#settings.has-side .set-left{display:contents}
#settings.has-side .set-head{grid-area:head;margin:0 0 20px;padding:0}
#settings.has-side .set-side{grid-area:side;padding:0;gap:2px}
#settings.has-side .set-main{grid-area:main;padding:0 4px 80px 0}
.set-side a{padding:8px 12px;border-radius:12px;font-size:14.5px;font-weight:500;color:#444}
.set-side a:hover{background:#f0f0f0;color:var(--fg)}
.set-side a.on{background:#0a0a0a;color:#fff}
.set-side a.on svg{color:#fff}
.bcell,.bill-card{padding:18px 20px;border:1px solid #e4e4e4;border-radius:22px}
#settings .bcell,#settings .bill-card,#settings .bcard,#settings .code,#settings .set-sec{border-color:#e4e4e4}
@supports (corner-shape: squircle){#settings .bcell,#settings .bill-card{border-radius:22px;corner-shape:squircle}.set-side a.on,.set-side a{border-radius:14px;corner-shape:squircle}}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════
   ONE TYPOGRAPHIC SCALE for every app page (Settings, Users, Tasks, Projects, Connectors, Brain) — Martin 02/11.
   L0 page title (serif 26/500) · L1 section title (12.5 uppercase grey) · L2 card title (15.5/560) · L2b sub-heading (14/600)
   · L3 description (13.5 grey) · L4 field label (11.5 uppercase grey) · L5 hint (12.5 light grey) · spacing 36 / 16 / 10.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════ */
/* L1 — section titles */
.set-block>h2,.t-sec>h2,.cn-sec>h2,.set-sec>h2,#settings .set-block h2,.t-sec h2,.cn-sec h2{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-family:var(--sans,Geist,system-ui,sans-serif);font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#6b6b6b}
.set-block>h2 svg,.t-sec>h2 svg,.cn-sec>h2 svg,.set-sec>h2 svg{width:14px;height:14px;flex:none;color:#8a8a8a}
.set-block>h2 em,.t-sec>h2 em,.cn-sec>h2 em{font-style:normal;font-weight:500;color:#9a9a9a}
.set-block,.t-sec,.cn-sec{margin:0 0 36px}
.set-main>.set-block:last-child{margin-bottom:0}
/* L2 — card titles */
.bcell>h3,.bill-card>.set-h3,.bill-card .set-h3,.mcp-card h3,.set-sec>h3,#settings .bcell h3{display:flex;align-items:center;gap:8px;margin:0;font-family:var(--sans,Geist,system-ui,sans-serif);font-size:15.5px;font-weight:560;letter-spacing:-.01em;line-height:1.3;color:#0a0a0a;text-transform:none}
.bcell>h3 svg,.bill-card .set-h3 svg,.mcp-card h3 svg,.set-sec>h3 svg{width:16px;height:16px;flex:none;color:#6b6b6b}
/* L2b — sub-headings inside a card */
.bcell .set-h3,.set-block .set-body>.set-h3,h2.set-h3,.mcp-guide-h{margin:18px 0 8px;font-family:var(--sans,Geist,system-ui,sans-serif);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:#0a0a0a}
/* L3 — descriptions */
.set-sub,.bcell>.set-sub,.set-block .set-sub,.mcp-card .set-sub,.bcell>p:not([class]),.t-ask-p{margin:0 0 6px;font-size:13.5px;font-weight:400;line-height:1.5;color:#6b6b6b}
.bcell>p.notes{color:#333;font-size:14px}
/* L4 — field labels */
.inv-label,#settings .inv-label,.set-sec .inv-label,.c-lab,.field label,.bcell label,.bill-card label{display:flex;align-items:center;gap:6px;margin:0 0 6px;font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#6b6b6b}
.inv-label svg,.c-lab svg{width:13px;height:13px;color:#8a8a8a}
/* L5 — hints and quiet text */
.set-hint,.c-hint,.inv-hint,.bcell>small,.bcard small,.bcard span,.mcp-soon,.ind-none,.key-none,.acc-note,.set-sec .set-hint{margin:8px 0 0;font-size:12.5px;font-weight:400;line-height:1.5;color:#7a7a7a}
.inv-hint{margin:6px 0 14px}
.set-msg{margin:10px 0 0;font-size:13px;color:#b3261e}
/* values and option titles */
.bcard b{font-size:20px;font-weight:500;letter-spacing:-.02em;color:#0a0a0a}
.bcell b:not(.bcard b),.opt-row b{font-size:14px;font-weight:560;color:#0a0a0a}
/* cards and grids — one rhythm */
.bento{gap:16px}
.bcell,.bill-card{display:flex;flex-direction:column;gap:10px;padding:18px 20px;border:1px solid #e4e4e4;border-radius:22px;background:#fff}
.bcard{padding:14px 16px;border:1px solid #e4e4e4;border-radius:16px}
.set-block>.set-body>.bgrid{margin-bottom:16px}
.set-block>.set-body>.set-actions,.bill-card .set-actions{margin:14px 0 0}
.field{margin:0}
/* navbar account button (Martin 02/11): no user name, a stroke around the avatar square */
.app-nav .acct-btn .acct-name{display:none}
.app-nav .acct-btn{gap:0;padding:0}
.app-nav .acct-btn .avatar{box-shadow:none;border:1px solid rgba(255,255,255,.6);box-sizing:border-box}
.app-nav .acct-btn:hover .avatar,.app-nav .acct-btn[aria-expanded=true] .avatar{box-shadow:none;border-color:#fff}
html[data-frame="white"] .app-nav .acct-btn .avatar{border-color:#c4c4c4}
html[data-frame="white"] .app-nav .acct-btn:hover .avatar,html[data-frame="white"] .app-nav .acct-btn[aria-expanded=true] .avatar{border-color:#8a8a8a}

/* « Rejoindre un projet » modal (Martin 02/11): label left-aligned, button as wide as the input */
.join-modal .t-group{align-items:stretch;text-align:left}
.join-modal .inv-label{justify-content:flex-start;text-align:left}
.join-modal .j-code{text-align:left}
.join-modal .cm-act{display:flex;justify-content:stretch;margin-top:14px}
.join-modal .cm-act .cta{flex:1;width:100%;justify-content:center}
/* white frame: the selected navbar tab is a BLACK pill, like the Settings sidebar (Martin 02/11) */
html[data-frame="white"] .app-nav .app-tab.on,html[data-frame="white"] .app-nav .app-tab.on:hover{background:#0a0a0a;color:#fff;opacity:1}
html[data-frame="white"] .app-nav .app-tab.on svg{color:#fff}
html[data-frame="white"] .app-nav .app-tab.on .app-tab-ico{opacity:1;filter:brightness(0) invert(1)}
html[data-frame="white"] .app-nav .app-tab.on .tab-badge{background:#ff6b6b;color:#fff}
html[data-frame="white"] .app-nav .app-tab.on .tab-badge:not(.late){background:#fff;color:#0a0a0a}

/* boot splash on hard refresh = the website's intro splash (shared/styles.css .splash/.scr + octopus.css blue variant); only the stacking order is ours */
.app-splash{z-index:100}
/* Tasks rows (Martin 02/11): no stroke around the rows, bigger right-hand chips, assignee avatars shaped like the navbar avatar */
#t-all,.t-list{border:0;border-radius:0;background:transparent;box-shadow:none;padding:0}
.t-list .t-row{border:0!important;border-bottom:1px solid #eee!important;border-radius:0!important;box-shadow:none;background:transparent}
.t-list .t-row:hover{background:#fafafa}
.t-list .t-row:last-child{border-bottom:0!important}
.t-list .t-right{gap:12px}
.t-list .t-right .t-type,.t-list .t-right .t-remind,.t-list .t-right .t-assign-chip{font-size:13px;padding:5px 12px;gap:7px}
.t-list .t-right .t-type i{width:8px;height:8px}
.t-list .t-right .t-remind svg{width:14px;height:14px}
.t-list .t-right .mav{width:30px;height:30px;border-radius:10px;background:#efefef;color:#0a0a0a;border:1px solid #c4c4c4;box-sizing:border-box;font-size:11.5px;font-weight:600;letter-spacing:.02em}
.t-list .t-right .t-avs .t-av{margin-left:-8px;box-shadow:0 0 0 2px #fff}
.t-list .t-right .t-avs .t-av:first-child{margin-left:0}
.t-list .t-right .t-tools .t-ib{width:32px;height:32px}
.t-list .t-right .t-tools .t-ib svg{width:17px;height:17px}
@supports (corner-shape: squircle){.t-list .t-right .mav{border-radius:12px;corner-shape:squircle}}

/* navbar brand: the teamspace picture replaces the scribble when the teamspace has one (app.js applyTeamPicture) */
.app-nav .nav-brand .logo-mark.ts-pic,html[data-frame="white"] .app-nav .logo-mark.ts-pic{content:normal;filter:none;width:28px;height:28px;border-radius:8px;object-fit:cover;background:#fff}
@supports (corner-shape: squircle){.app-nav .nav-brand .logo-mark.ts-pic{border-radius:10px;corner-shape:squircle}}

/* user menu = the standard dropdown (.lang-menu), two items, no separators */
.app-nav .acct-menu{min-width:200px}
.app-nav .acct-menu button svg{flex:none;color:#6b6b6b}

/* brand: tighter gaps name · switcher chevron · flag (measured: 34 px → ~12 px) */
.app-nav .nav-brand .logo{gap:6px}
.app-nav .nav-brand .ts-chev{margin-left:0}
.app-nav .app-lang .lang-btn{padding-left:4px}

/* The app's base text (the Geist weight everything inherits from <body>, e.g. « Martin Masseline » in the assignee picker) is 300 on the
   marketing site; in the app it is 50 heavier everywhere, dialogs included (Martin 02/11). Explicit weights elsewhere are untouched. */
html:has(.app-nav) body,html:has(.app-nav) dialog,html:has(.app-nav) .pm,html:has(.app-nav) .lang-menu{font-weight:350}
/* language lives in Settings > Préférences > « Ma langue » (user-facing, per account) — no flag picker in the app navbar (Martin 02/11) */
.app-nav .app-lang{display:none!important}   /* vertical separator after the brand kept (Martin 02/11) */
/* ===== Desktop app (html.desktop): Réglages + Cerveau in the teamspace modal, never in the navbar ===== */
html.desktop .app-tab[href="/application/app"],html.desktop .app-tab[href="/application/settings"]{display:none}
html.desktop .app-nav .logo{cursor:pointer}
html.desktop #sec-brain{display:none}
.desktop-modal{width:min(1320px,94vw);max-width:none;height:90vh;max-height:none;padding:0;overflow:hidden}
.desktop-modal[open]{display:flex;flex-direction:column}
.desktop-modal .dm-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;border-bottom:1px solid var(--line-soft,#eee);flex:none}
.desktop-modal .dm-head .cm-x{position:static}
.desktop-modal .dm-body{flex:1;min-height:0;position:relative}
.desktop-modal .dm-view{position:absolute;inset:0;overflow:auto}
.desktop-modal .dm-view[hidden]{display:none}
.desktop-modal .dm-view[data-v="brain"]{overflow:hidden}
.desktop-modal .dm-view[data-v="brain"]>.set{position:relative;height:100%}
.desktop-modal .seg button.on{background:var(--card,#fff);box-shadow:0 1px 2px rgba(0,0,0,.08)}
/* desktop extras: « Vos applications », brain spinner, project chats */
html.desktop .nav-apps{position:relative}
html.desktop .nav-apps-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:220px;z-index:60}
html.desktop .nav-apps em{font-style:normal;font-size:12px;opacity:.8;margin-left:4px}
html.desktop .nav-brain-spin{display:inline-flex;align-items:center;gap:8px;color:#fff;font-size:13px}
html.desktop .nav-brain-spin[hidden]{display:none}
.pj-chats .pc-head{display:flex;justify-content:flex-end;margin-bottom:14px}.pj-chats tr[data-i]{cursor:pointer}
html.desktop .nav-apps-menu[hidden]{display:none}
/* Connecteurs: desktop app only (Martin 02/11) */
html:not(.desktop) .app-tab[href="/application/connectors"]{display:none}