@font-face{font-family:Inter;src:url('/assets/inter-variable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Bricolage Grotesque';src:url('/assets/bricolage-grotesque-latin.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
/* Fondations et composants partagés. Les seuls styles de documentation sont préfixés ds-. */
*{box-sizing:border-box}html{scroll-padding-top:var(--space-6)}body{margin:0;background:var(--background);color:var(--text);font:var(--weight-regular) var(--text-body)/var(--line-body) var(--font);-webkit-font-smoothing:antialiased}button,input,textarea,select{font:inherit;color:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}img,svg{display:block;max-width:100%}img{height:auto}h1,h2,h3,h4,p{margin:0}h1,h2,h3,h4{font-weight:var(--weight-heading);line-height:var(--line-heading);letter-spacing:var(--tracking-heading);text-wrap:balance}h1{font-size:var(--text-hero)}h2{font-size:var(--text-h2)}h3{font-size:var(--text-h3)}h4{font-size:var(--text-lead)}p{text-wrap:pretty}button{border:0}a,button{touch-action:manipulation}a:hover{text-decoration:underline;text-underline-offset:5px}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--focus);outline-offset:5px}main:focus{outline:none}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.skip-link{position:fixed;top:var(--space-4);left:var(--space-4);z-index:100;transform:translateY(-200%);padding:var(--space-3) var(--space-6);color:var(--action-text);background:var(--action-bg);border-radius:var(--radius-pill)}.skip-link:focus{transform:none}.container{width:min(calc(100% - var(--layout-gutter)*2),var(--content-max));margin-inline:auto}.reading{width:min(calc(100% - var(--layout-gutter)*2),var(--reading-max));margin-inline:auto}.muted{color:var(--text-muted)}.lead{font-size:var(--text-lead);line-height:1.55}.eyebrow{font-size:var(--text-small);line-height:1.5;font-weight:var(--weight-medium);margin-bottom:var(--space-6)}.section{padding-block:var(--section-gap)}.split{display:grid;grid-template-columns:1fr 2fr;gap:var(--space-16)}.actions{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center}.arrow{flex:none}.button{display:inline-flex;min-height:var(--target);align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);border-radius:var(--radius-pill);font-size:var(--text-small);font-weight:var(--weight-medium);line-height:1.45;border:1px solid transparent;transition:background var(--duration),transform var(--duration);text-align:center}.button:hover{text-decoration:none}.button-primary{background:var(--action-bg);color:var(--action-text)}.button-primary:is(:hover,[data-demo-state=hover]){background:var(--action-hover)}.button-secondary{background:var(--surface-hover);color:var(--text)}.button-secondary:is(:hover,[data-demo-state=hover]){background:var(--surface-active)}.button-text{padding-inline:0;background:transparent;border-radius:0;justify-content:flex-start}.button-text:hover{text-decoration:underline;text-underline-offset:5px}.button:is(:active,[data-demo-state=active]){transform:scale(.97)}.button[data-demo-state=focus]{outline:3px solid var(--focus);outline-offset:5px}.button:disabled{cursor:not-allowed;background:var(--surface-hover);color:var(--text-muted);transform:none}.button[aria-busy=true]{cursor:wait}.spinner{width:var(--space-4);height:var(--space-4);border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin 800ms linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
/* L’identité existante : étoile 26 px, mot-symbole Bricolage. */
.brand{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--target);flex-shrink:0}.brand:hover{text-decoration:none}.brand .youpi-icon{width:var(--logo-height);height:var(--logo-height);flex:none}.youpi-wordmark{display:flex;align-items:baseline;font-family:var(--font-brand);font-size:var(--logo-size);letter-spacing:-.055em;line-height:1;white-space:nowrap}.youpi-wordmark b{font-weight:800}.youpi-wordmark>span{font-weight:500}.site-header{position:relative;z-index:10;background:var(--background)}.nav-container{width:min(calc(100% - var(--layout-gutter)*2),var(--content-max));margin:auto;min-height:var(--header-height);display:flex;align-items:center;gap:var(--space-12)}.nav-content{display:flex;flex:1;justify-content:space-between;gap:var(--space-6);align-items:center}.primary-links,.nav-tools{display:flex;align-items:center;gap:var(--space-8)}.primary-links>a,.nav-contact,.languages>a{display:inline-flex;min-height:var(--target);align-items:center;font-size:var(--text-small);font-weight:var(--weight-medium);white-space:nowrap}.primary-links>a[aria-current],.nav-contact[aria-current]{text-decoration:underline;text-underline-offset:6px}.languages{display:flex;gap:var(--space-1)}.languages>a{min-width:var(--target);justify-content:center;color:var(--text-muted);border-radius:var(--radius-pill)}.languages>a[aria-current]{color:var(--text);background:var(--surface);text-decoration:underline;text-underline-offset:4px}.menu-toggle{display:none;background:transparent;width:var(--target);height:var(--target);position:relative;flex:none}
/* Action Youpi.one du header uniquement : bordure et halo arc-en-ciel. */
.nav-contact.nav-rainbow {
  position: relative;
  isolation: isolate;
  flex-shrink: 0;
  justify-content: center;
  min-height: var(--target);
  padding: var(--space-2) var(--space-8);
  border: var(--nav-rainbow-border) solid transparent;
  border-radius: var(--radius-control);
  color: var(--nav-rainbow-text);
  background-color: var(--nav-rainbow-surface);
}
.nav-contact.nav-rainbow:hover { text-decoration: none; }
@media (any-hover: hover) and (forced-colors: none) {
  .nav-contact.nav-rainbow:hover {
    background-image:
      linear-gradient(var(--nav-rainbow-surface), var(--nav-rainbow-surface)),
      linear-gradient(var(--nav-rainbow-surface) 50%, color-mix(in srgb, var(--nav-rainbow-surface) 60%, transparent) 80%, transparent),
      var(--nav-rainbow-gradient);
    background-clip: padding-box, border-box, border-box;
    background-origin: border-box;
    background-size: 200% 100%;
    background-position: 0% 50%;
  }
  .nav-contact.nav-rainbow:hover::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    bottom: var(--nav-rainbow-halo-offset);
    width: var(--nav-rainbow-halo-width);
    height: var(--nav-rainbow-halo-height);
    transform: translateX(-50%);
    background-image: var(--nav-rainbow-gradient);
    background-size: 200% 100%;
    background-position: 0% 50%;
    filter: blur(var(--nav-rainbow-halo-blur));
    pointer-events: none;
  }
}
@media (any-hover: hover) and (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  .nav-contact.nav-rainbow:hover,
  .nav-contact.nav-rainbow:hover::before {
    animation: nav-rainbow var(--nav-rainbow-duration) linear infinite;
  }
}
@keyframes nav-rainbow {
  from { background-position: 0% 50%; }
  to { background-position: 200% 50%; }
}
@media (forced-colors: active) {
  .nav-contact.nav-rainbow {
    color: ButtonText;
    background: ButtonFace;
    border-color: ButtonText;
    forced-color-adjust: auto;
  }
  .nav-contact.nav-rainbow:focus-visible { outline-color: Highlight; }
}
/* Hero : mêmes proportions et respiration, hauteur bornée par le contenu. */
.mobile-nav, .mobile-contact { display: none; }
.hero{display:flex;align-items:center;min-height:min(800px,calc(100svh - var(--header-height)));padding-block:var(--space-32) var(--space-24);text-align:center}.hero-content{max-width:var(--hero-max)}.hero-title{font-size:var(--text-hero);font-weight:var(--weight-heading);line-height:1.02;letter-spacing:var(--tracking-hero)}.hero-title>.hero-line{display:block}.hero-description{font-size:var(--text-lead);line-height:1.4;color:var(--text-muted);max-width:650px;margin:var(--space-10) auto 0;text-wrap:balance}.hero .actions{justify-content:center;margin-top:var(--space-12)}.hero .button{font-size:var(--text-body);padding-inline:var(--space-4)}.intro-block{border-top:1px solid var(--border)}.intro-block h2{max-width:850px}.intro-block .lead{margin-top:var(--space-8);max-width:var(--reading-max)}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:var(--space-8);margin-bottom:var(--space-12)}.section-heading h2{max-width:var(--reading-max)}.activity-list{border-top:1px solid var(--border)}.activity-card{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16);padding-block:var(--space-12);border-bottom:1px solid var(--border)}.activity-card h3,.activity-card h2{font-size:var(--text-h2)}.activity-body{max-width:550px;font-size:var(--text-lead)}.activity-body p+p{margin-top:var(--space-6)}.activity-body .button{margin-top:var(--space-6)}.product-feature{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16);align-items:center;background:var(--surface);padding:var(--space-16);border-radius:var(--radius-panel)}.product-wordmark{display:flex;align-items:baseline;position:relative;font-family:var(--font-brand);font-size:clamp(2.5rem,5vw,5rem);font-weight:800;letter-spacing:-.065em;line-height:1.2}.product-wordmark>span{font-weight:500}.product-wordmark img{width:var(--space-8);height:var(--space-8);align-self:flex-start;margin-top:var(--space-2);margin-left:var(--space-2)}.product-copy h2{font-size:var(--text-h3)}.product-copy p{margin-bottom:var(--space-6)}.product-copy h2+p{margin-top:var(--space-6)}.product-copy .button-secondary{background:var(--background)}.product-copy .button-secondary:hover{background:var(--surface-hover)}.product-copy .actions{gap:var(--space-4)}.vision-block{max-width:980px;text-align:center;padding-block:var(--space-32)}.vision-block h2{font-size:clamp(2rem,4.5vw,4rem)}.vision-block .lead{margin:var(--space-8) auto;max-width:650px}.vision-block .button{display:inline-flex}.contact-callout{display:flex;justify-content:space-between;align-items:center;gap:var(--space-8);padding-block:var(--space-12);border-top:1px solid var(--border);margin-bottom:var(--space-16)}.contact-callout h2{font-size:var(--text-h3)}.contact-callout p{margin-top:var(--space-4)}.contact-callout .button{flex-shrink:0}.page-intro{padding-block:var(--space-24) var(--space-16);max-width:var(--content-max)}.page-intro h1{max-width:1000px}.page-intro .lead{max-width:var(--reading-max);margin-top:var(--space-8)}.page-content{padding-bottom:var(--space-24)}.prose-section{display:grid;grid-template-columns:1fr 1.4fr;gap:var(--space-16);padding-block:var(--space-12);border-top:1px solid var(--border)}.prose-section h2{font-size:var(--text-h3)}.prose-section p{font-size:var(--text-lead);color:var(--text-muted)}.prose-section p+p{margin-top:var(--space-6)}.empty-state{padding:var(--space-16) var(--space-8);border:1px solid var(--border);border-radius:var(--radius-panel);text-align:center}.empty-state h2{font-size:var(--text-h3)}.empty-state p{max-width:600px;margin:var(--space-4) auto 0}.empty-mark{display:block;font-size:var(--text-h2);color:var(--text-muted);margin-bottom:var(--space-6)}.news-list{display:grid;gap:var(--space-12)}.news-card{padding-block:var(--space-8);border-bottom:1px solid var(--border)}.news-card h3 a{display:inline-flex;gap:var(--space-4);align-items:center}.news-card p{margin-block:var(--space-4)}.news-card time{color:var(--text-muted);font-size:var(--text-small)}.article{padding-block:var(--space-24)}.article>p{margin-top:var(--space-8)}.article h1{font-size:var(--text-h2)}.article .article-byline{font-size:var(--text-small);color:var(--text-muted)}.prose{margin-top:var(--space-12)}.prose>*+*{margin-top:var(--space-6)}.prose h2,.prose h4{margin-top:var(--space-12)}.prose p,.prose li{font-size:var(--text-lead)}.prose a{color:var(--focus);text-decoration:underline}.article>.button{margin-top:var(--space-12)}.article img{width:100%;border-radius:var(--radius-control)}.notice{padding:var(--space-4) var(--space-6);border-left:3px solid var(--control-border);background:var(--surface);font-size:var(--text-small)}.contact-form{max-width:var(--reading-max)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);margin-block:var(--space-8)}.field-wide{grid-column:1/-1}.field{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-6)}label{font-size:var(--text-small);font-weight:var(--weight-medium)}input,textarea,select{width:100%;min-height:var(--target);padding:var(--space-3) var(--space-4);border:1px solid var(--control-border);border-radius:var(--radius-control);background:var(--background)}textarea{resize:vertical}input[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--error)}.field-error{color:var(--error);font-size:var(--text-small)}.form-status{min-height:var(--space-6);margin-top:var(--space-6);font-size:var(--text-small)}.form-status[data-state=success]{color:var(--success)}.form-status[data-state=error]{color:var(--error)}
.site-footer {
  background: var(--background);
  border-top: 1px solid var(--border);
  padding-block: var(--space-16) var(--space-8);
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .75fr) minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-8);
}
.footer-description {
  max-width: 24ch;
  margin-top: var(--space-3);
  font-size: var(--text-small);
}
.footer-heading {
  min-height: var(--target);
  display: flex;
  align-items: center;
  font-size: var(--text-body);
  letter-spacing: -.01em;
}
.footer-links {
  display: grid;
  justify-items: start;
}
.footer-links a, .legal-links a {
  display: flex;
  align-items: center;
  min-height: var(--space-8);
  font-size: var(--text-small);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.footer-links a:hover, .legal-links a:hover { color: var(--text); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
  font-size: var(--text-small);
  color: var(--text-muted);
}
.legal-links { display: flex; flex-wrap: wrap; gap: 0 var(--space-6); }
.theme-picker {
  position: relative;
  display: inline-flex;
  padding: var(--space-1);
  margin-top: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--background);
  box-shadow: 0 0 0 1px var(--border);
}
.theme-picker::before {
  content: "";
  position: absolute;
  inset-block-start: var(--space-1);
  inset-inline-start: var(--space-1);
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-pill);
  background: var(--surface-hover);
  pointer-events: none;
  transform: translateX(var(--theme-indicator-offset, 0%));
  transition: transform 500ms cubic-bezier(.22, 1.18, .36, 1);
}
.theme-picker:has([data-theme-choice="light"][aria-pressed="true"]) {
  --theme-indicator-offset: 100%;
}
.theme-picker:has([data-theme-choice="dark"][aria-pressed="true"]) {
  --theme-indicator-offset: 200%;
}
.theme-picker button {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--space-6);
  height: var(--space-6);
  padding: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
}
.theme-picker button:hover,
.theme-picker button[aria-pressed="true"] {
  color: var(--text);
}
.theme-picker button:focus-visible {
  z-index: 1;
  outline-offset: 0;
}
@media (forced-colors: active) {
  .theme-picker {
    outline: 1px solid CanvasText;
  }
  .theme-picker::before {
    border: 1px solid Highlight;
  }
  .theme-picker button[aria-pressed="true"] {
    color: Highlight;
  }
}
/* Reveal the new palette over the captured old page. */
:root[data-theme-reveal]::view-transition-group(root) {
  animation: none;
}
:root[data-theme-reveal]::view-transition-image-pair(root) {
  isolation: auto;
}
:root[data-theme-reveal]::view-transition-old(root),
:root[data-theme-reveal]::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
@media (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  :root[data-theme-reveal]::view-transition-new(root) {
    animation: theme-reveal 700ms ease-in-out both;
  }
}
@keyframes theme-reveal {
  from { clip-path: circle(0px at var(--theme-reveal-origin)); }
  to { clip-path: circle(var(--theme-reveal-radius) at var(--theme-reveal-origin)); }
}
.brand img, .product-wordmark img { filter: var(--brand-filter); }
@media (max-width: 1000px) {
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.footer-appearance-mobile { display: none; }
@media (max-width: 540px) {
  .site-footer { padding-block: var(--space-10) var(--space-6); }
  .footer-top { gap: var(--space-6) var(--space-4); }
  .footer-top > :first-child { grid-column: 1 / -1; }
  .footer-top > .footer-appearance { display: none; }
  .footer-bottom > span, .footer-bottom > .legal-links { flex-basis: 100%; }
  .footer-appearance-mobile:not([hidden]) { display: block; }
  .footer-bottom { column-gap: var(--space-2); }
}

.intro-block { align-items: center; }
.intro-image {
  width: 100%;
  border-radius: var(--radius-panel);
}
@media (max-width: 899px) {
  .intro-image { max-width: 32rem; }
}

/* Habillage documentaire seulement : les composants présentés gardent leur CSS. */
.ds-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--space-12);padding-block:var(--space-12)}.ds-sidebar{position:sticky;top:var(--space-6);align-self:start;max-height:calc(100svh - var(--space-12));overflow:auto;font-size:var(--text-small)}.ds-sidebar a{display:block;padding:var(--space-2)}.ds-main{min-width:0}.ds-main>h1{font-size:var(--text-h2)}.ds-main>p{margin-top:var(--space-6)}.ds-toolbar{display:flex;gap:var(--space-4);align-items:center;flex-wrap:wrap;margin-block:var(--space-8);padding:var(--space-6);background:var(--surface);border-radius:var(--radius-control)}.ds-toolbar select{width:auto}.ds-section{padding-block:var(--space-12);border-top:1px solid var(--border);scroll-margin-top:var(--space-6)}.ds-section>h2{font-size:var(--text-h3);margin-bottom:var(--space-6)}.ds-section>p{margin-bottom:var(--space-6);max-width:var(--reading-max)}.ds-example{padding:var(--space-8);border:1px solid var(--border);border-radius:var(--radius-control);margin-block:var(--space-6);min-width:0}.ds-example>.actions{gap:var(--space-4)}.ds-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:var(--space-4)}.ds-swatch{padding:var(--space-4);border:1px solid var(--border);border-radius:var(--radius-control);overflow-wrap:anywhere;font-size:var(--text-small)}.ds-swatch-color{height:var(--space-16);border:1px solid var(--border);border-radius:var(--space-2);margin-bottom:var(--space-4)}.ds-token{font-family:monospace;font-size:var(--text-small);overflow-wrap:anywhere}.ds-contract{margin-top:var(--space-4);padding:var(--space-4);border:1px solid var(--border);border-radius:var(--radius-control)}.ds-contract summary{cursor:pointer;min-height:var(--target);font-weight:var(--weight-medium)}.ds-contract dl{display:grid;grid-template-columns:140px minmax(0,1fr);gap:var(--space-3);font-size:var(--text-small)}.ds-contract dd{margin:0}.ds-contract dt{font-weight:var(--weight-medium)}.ds-code,pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--surface);padding:var(--space-4);font-size:var(--text-small);border-radius:var(--space-2)}.ds-scale{display:flex;align-items:end;flex-wrap:wrap;gap:var(--space-4);margin-block:var(--space-6)}.ds-scale>div{font-size:var(--text-small)}.ds-note{font-size:var(--text-small);color:var(--text-muted);margin-block:var(--space-6)}.ds-table-wrap{overflow:auto;max-width:100%}table{border-collapse:collapse;width:100%;font-size:var(--text-small)}th,td{text-align:left;border-bottom:1px solid var(--border);padding:var(--space-3);overflow-wrap:anywhere}td code{white-space:normal}
@media(max-width:1199px){:root{--layout-gutter:var(--space-8)}.nav-container{gap:var(--space-8)}.primary-links,.nav-tools{gap:var(--space-6)}.product-feature{gap:var(--space-8);padding:var(--space-12)}.ds-layout{grid-template-columns:180px minmax(0,1fr);gap:var(--space-8)}}
@media(max-width:899px){.menu-toggle{display:block}.nav-container{flex-wrap:wrap;justify-content:space-between;gap:0;padding-block:var(--space-6)}.nav-content{display:none;flex-basis:100%;padding-top:var(--space-8);padding-bottom:var(--space-4)}.nav-content.is-open{display:flex;flex-direction:column;align-items:stretch}.primary-links{flex-direction:column;align-items:stretch;gap:var(--space-2)}.primary-links>a{font-size:var(--text-lead)}.nav-tools{justify-content:space-between;padding-top:var(--space-4);border-top:1px solid var(--border)}.split{grid-template-columns:1fr;gap:var(--space-6)}.product-feature{gap:var(--space-12)}.ds-layout{grid-template-columns:1fr}.ds-sidebar{position:static;max-height:none;display:flex;flex-wrap:wrap;gap:var(--space-2)}.ds-sidebar a{padding:var(--space-2) var(--space-3);background:var(--surface);border-radius:var(--radius-pill);min-height:var(--target)}}
@media(max-width:767px){:root{--layout-gutter:var(--space-5);--section-gap:var(--space-16);--logo-size:23px}.hero{padding-block:var(--space-16);min-height:min(640px,calc(100svh - var(--header-height)))}.hero-title{font-size:clamp(2.25rem,7vw,3rem);line-height:1.08}.hero-title>.hero-line{display:inline}.hero-description{margin-top:var(--space-6);font-size:1.125rem}.hero .actions{margin-top:var(--space-10)}.section-heading{align-items:start;flex-direction:column;gap:var(--space-4)}.activity-card{grid-template-columns:1fr;gap:var(--space-6);padding-block:var(--space-8)}.activity-title .eyebrow{margin-bottom:var(--space-4)}.product-feature{grid-template-columns:1fr;padding:var(--space-8);gap:var(--space-12)}.product-wordmark{font-size:clamp(3rem,12vw,5rem)}.vision-block{padding-block:var(--space-24)}.contact-callout{align-items:start;flex-direction:column}.page-intro{padding-block:var(--space-16) var(--space-12)}.page-intro h1{font-size:clamp(2.25rem,7vw,3.5rem)}.page-content{padding-bottom:var(--space-16)}.prose-section{grid-template-columns:1fr;gap:var(--space-6);padding-block:var(--space-8)}.form-grid{grid-template-columns:1fr;gap:0}.article{padding-block:var(--space-12)}.ds-example{padding:var(--space-5)}.ds-contract dl{grid-template-columns:1fr;gap:var(--space-2)}.ds-contract dd{margin-bottom:var(--space-4)}}
@media(max-height:700px) and (min-width:768px){.hero{min-height:0;padding-block:var(--space-16)}.hero .actions{margin-top:var(--space-8)}.hero-description{margin-top:var(--space-8)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.button:active{transform:none}}

.ds-frame{display:block;width:100%;max-width:100%;height:600px;border:1px solid var(--border);border-radius:var(--radius-control);background:var(--background)}
.ds-frame-mobile{width:390px}

.contact-form fieldset{border:0;margin:0;padding:0;min-width:0}
@media(max-width:899px){.ds-sidebar nav{display:flex;flex-wrap:wrap;gap:var(--space-2)}}

/* Long copy and text enlargement remain within their shared layout. */
:where(h1,h2,h3,h4,p,li,dd,code){overflow-wrap:anywhere}
.product-feature>*,.activity-card>*,.split>*{min-width:0}
.product-wordmark{flex-wrap:wrap;max-width:100%}
.button{max-width:100%}
@media(max-width:767px){.product-wordmark{font-size:min(5rem,12vw)}}

/* Original hero motion: blur reveal and three independently rotating icon families. */
.hero[data-animated-hero]{position:relative}
.icon-slot{display:inline-block;position:relative;height:0;width:var(--hero-icon-slot);vertical-align:baseline}
.icon-position{position:absolute;bottom:-.075em;left:50%;width:var(--hero-icon-size);height:var(--hero-icon-size);transform:translateX(-50%)}
.app-icon{position:relative;display:block;width:100%;height:100%;padding:0;border-radius:var(--hero-icon-radius);background:var(--rain-tile-surface);box-shadow:var(--rain-tile-shadow);transition:transform var(--duration) ease}
.app-icon::before{content:'';position:absolute;inset:min(0px,calc((var(--hero-icon-size) - var(--target))/2))}
.app-icon:hover{transform:rotate(-6deg) scale(1.08)}
.app-icon:active{transform:scale(.94)}
.app-icon::after{content:'';position:absolute;inset:0;border-radius:var(--hero-icon-radius);pointer-events:none;box-shadow:inset 0 0 0 1px var(--rain-tile-border)}
.app-icon img{position:absolute;inset:calc((100% - var(--rain-logo-size))/2);width:var(--rain-logo-size);height:var(--rain-logo-size);object-fit:contain;user-select:none;transition:opacity var(--hero-icon-opacity-duration) ease,transform var(--hero-icon-transform-duration) ease,filter var(--hero-icon-opacity-duration) ease}
.app-icon img.entering,.app-icon img.leaving{opacity:0;transform:scale(.78);filter:blur(var(--hero-icon-blur))}
@media (max-width: 767px) {
  .hero-content { width: calc(100% - 2 * var(--space-3)); }
  .hero-title { text-wrap: balance; }
}
@media(prefers-reduced-motion:reduce){.hero-title>.hero-line,.hero-description,.hero-actions{animation:none}.app-icon:hover,.app-icon:active{transform:none}.app-icon img{transition:none}}

/* Shared blur-to-clear entrance: load for visible content, then once on scroll. */
[data-reveal]{--reveal-delay:calc(var(--reveal-stagger)*var(--reveal-order,0))}
.hero-description[data-reveal]{--reveal-delay:var(--hero-description-delay);--reveal-distance:var(--hero-support-distance)}
.hero-actions[data-reveal]{--reveal-delay:var(--hero-actions-delay);--reveal-distance:var(--hero-support-distance)}
[data-reveal][data-reveal-state=pending]{opacity:0;filter:blur(var(--reveal-blur))}
[data-reveal][data-reveal-state=running]{animation:site-reveal var(--reveal-duration) ease var(--reveal-delay) both}
@keyframes site-reveal{
 from{opacity:0;filter:blur(var(--reveal-blur));translate:0 var(--reveal-distance)}
 to{opacity:1;filter:blur(0);translate:0 0}
}
@media(prefers-reduced-motion:reduce){
 [data-reveal]{opacity:1!important;filter:none!important;translate:none!important;animation:none!important}
}
@media print{[data-reveal]{opacity:1!important;filter:none!important;translate:none!important;animation:none!important}}

/* The following contact callout owns the separator after the activities page. */
.page-content > .activity-list > .activity-card:last-child{border-bottom:0}

/* Illustrated signature in the footer. The static SVG is the resting state. */
.footer-scene { margin-top: var(--space-8); }
.footer-scene svg { width: 100%; height: auto; }
.footer-scene-type {
  fill: var(--text);
  font: 800 187px var(--font-brand);
}
.footer-scene-ground, .footer-scene-sparkles, .footer-scene-crew {
  stroke: var(--text);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.footer-scene-ground { fill: none; }
.footer-scene-crew { fill: var(--background); }
.footer-scene-crew .n { fill: none; }
.footer-scene-crew .k, .footer-scene-shadow { fill: var(--text); }
.footer-scene-crew .thin { stroke-width: 1.5; }
.footer-scene-crew .thick { stroke-width: 3.4; }
.footer-scene-crew .a { fill: #ffab68; }
.footer-scene-crew .o { fill: #ffbe53; }
.footer-scene-crew .r { fill: #ff737d; }
.footer-scene-shadow { stroke: none; opacity: .16; }
.footer-scene-crew .footer-scene-hatch { fill: url(#footer-scene-hatch); }
.footer-scene-sparkles { fill: #ffd36a; }
.footer-scene-sparkles path:nth-child(2) { fill: #85d2f5; }

@media (prefers-reduced-motion: no-preference) {
  .footer-scene-letter, .footer-scene-crew, .footer-scene-sparkles {
    transform-box: fill-box;
    transform-origin: center bottom;
  }
  .footer-scene[data-footer-motion="playing"] .footer-scene-letter {
    animation: footer-stamp .56s calc(var(--step) * 52ms) cubic-bezier(.2,.7,.35,1) both;
  }
  .footer-scene[data-footer-motion="playing"] .footer-scene-crew {
    animation: footer-character .65s calc(620ms + var(--step) * 80ms) cubic-bezier(.2,.65,.4,1) both;
    --entry: 28px;
  }
  .footer-scene[data-footer-motion="playing"] .footer-scene-drop { --entry: -30px; }
  .footer-scene[data-footer-motion="playing"] .footer-scene-peek { --entry: 42px; }
  .footer-scene[data-footer-motion="playing"] .footer-scene-line {
    stroke-dasharray: 1;
    animation: footer-line .6s .2s ease-out both;
  }
  .footer-scene[data-footer-motion="playing"] .footer-scene-sparkles {
    animation: footer-character .55s 1.02s ease both;
    --entry: 8px;
  }
}
@keyframes footer-stamp {
  0% { opacity: 0; transform: translateY(-24px) rotate(var(--tilt)) scale(1.12); }
  56% { opacity: 1; transform: translateY(2px) scale(1.04,.94); }
  78% { transform: translateY(-2px) scale(.98,1.02); }
  100% { transform: none; }
}
@keyframes footer-character {
  0% { opacity: 0; transform: translateY(var(--entry)) scale(.88); }
  57% { opacity: 1; transform: translateY(-5px) scale(.98,1.07); }
  78% { transform: scale(1.045,.96); }
  100% { transform: none; }
}
@keyframes footer-line { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* Temporary welcome screen on the two home pages. */
.home-intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--space-6);
  background: var(--background);
  color: var(--text);
  text-align: center;
  animation: home-intro-out var(--home-intro-duration) linear both;
}
html[data-intro-active] { overflow: hidden; }
html[data-intro-active] [data-home-content] { visibility: hidden; }
.home-intro-message {
  font-size: var(--home-intro-text-size);
  font-weight: 400;
  line-height: 1.5;
}
.home-intro-skip {
  position: absolute;
  bottom: max(var(--space-6), env(safe-area-inset-bottom));
}
.home-intro-skip:not(:focus-visible) {
  opacity: 0;
  pointer-events: none;
}
@property --home-wave-position {
  syntax: "<percentage>";
  inherits: false;
  initial-value: -55%;
}
@supports (background-clip: text) {
  .home-intro-message {
    background-image: radial-gradient(ellipse at 50% 100%,
      var(--text) var(--home-wave-position),
      var(--home-intro-wave-rose) calc(var(--home-wave-position) + 7%),
      var(--home-intro-wave-blue) calc(var(--home-wave-position) + 14%),
      var(--home-intro-wave-olive) calc(var(--home-wave-position) + 21%),
      var(--home-intro-wave-gold) calc(var(--home-wave-position) + 28%),
      var(--home-intro-wave-coral) calc(var(--home-wave-position) + 35%),
      var(--home-intro-wave-plum) calc(var(--home-wave-position) + 42%),
      var(--text) calc(var(--home-wave-position) + 48%)
    );
    background-clip: text;
    color: transparent;
    animation: home-intro-wave var(--home-intro-wave-duration) linear 100ms both;
  }
}
@keyframes home-intro-wave {
  from { --home-wave-position: -55%; }
  to { --home-wave-position: 105%; }
}
@keyframes home-intro-out {
  0%, 83% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  .home-intro { display: none; }
  html[data-intro-active] { overflow: auto; }
  html[data-intro-active] [data-home-content] { visibility: visible; }
}

.product-version {
  text-align: center;
  font: 800 clamp(7rem, 18vw, 15rem)/1 var(--font-brand);
  letter-spacing: -.07em;
}
/* Brand roles are editorial text, distinct from the two activity presentations. */
.activity-signatures-list { display: grid; gap: var(--space-8); }
.activity-signatures-list h3 {
  font-size: var(--text-lead);
  line-height: var(--line-body);
  letter-spacing: normal;
  margin-bottom: var(--space-2);
}
.activity-signatures .actions { margin-top: var(--space-6); }
.product-principles-list { display: grid; gap: var(--space-8); }
.product-principles-list h3 {
  font-size: var(--text-lead);
  line-height: var(--line-body);
  letter-spacing: normal;
  margin-bottom: var(--space-2);
}
.product-copy h2.product-wordmark { font-size: clamp(2rem, 4.8vw, 4rem); }
.product-copy h2.product-wordmark img {
  width: .5em;
  height: .5em;
  margin-block-start: .1em;
}

.product-loop { position: relative; min-width: 0; }
.product-loop-stage {
  display: grid;
  place-items: center;
  isolation: isolate;
  min-height: clamp(13rem, 30vw, 24rem);
  padding-block: var(--space-8);
  overflow: hidden;
  text-align: center;
}
.product-loop-stage > * { grid-area: 1 / 1; }
.product-loop-workspace, .product-loop-brands, .product-loop-ripple { display: none; }
.product-loop-title {
  font: 800 clamp(2rem, 5vw, 4.5rem)/1 var(--font-brand);
  letter-spacing: -.055em;
}
.product-loop-workspace {
  justify-items: center;
  gap: var(--space-3);
}
.product-loop-workspace img { filter: var(--brand-filter); }
.product-loop-agent { max-width: 28ch; color: var(--text-muted); }
.product-loop-brands {
  width: min(100%, 360px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}
.product-loop-brand {
  position: relative;
  height: 110px;
  min-width: 0;
  color: var(--text);
  font-size: clamp(.7rem, 1.5vw, 1rem);
  font-weight: 600;
}
.product-loop-brand-whole, .product-loop-shard {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.product-loop-brand-mark {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.product-loop-brand-mark img {
  width: 56px;
  height: 56px;
  max-width: 80%;
  object-fit: contain;
}
.product-loop-brand-mark img.product-loop-wordmark {
  width: 106px;
  max-width: 100%;
}
.product-loop-shard { pointer-events: none; }
.product-loop-ripple {
  width: min(48%, 12rem);
  aspect-ratio: 1;
  border: 1px solid var(--focus);
  border-radius: 50%;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  [data-product-loop-ready] .product-loop-workspace { display: grid; }
  [data-product-loop-ready] .product-loop-brands { display: grid; }
  [data-product-loop-ready] .product-loop-ripple { display: block; }
  [data-product-loop-ready] :is(.product-version, .product-loop-workspace, .product-loop-brand-whole, .product-loop-shard, .product-loop-ripple) {
    animation: var(--loop-keyframes) 9s linear infinite paused;
  }
  [data-product-loop-running] :is(.product-version, .product-loop-workspace, .product-loop-brand-whole, .product-loop-shard, .product-loop-ripple) { animation-play-state: running; }
  .product-version { --loop-keyframes: product-loop-version; }
  .product-loop-workspace { --loop-keyframes: product-loop-workspace; }
  .product-loop-brand-whole { --loop-keyframes: product-loop-brand; }
  .product-loop-shard { --loop-keyframes: product-loop-shatter; }
  .product-loop-ripple { --loop-keyframes: product-loop-ripple; }
}
@keyframes product-loop-version {
  0%, 18%, 94%, 100% { opacity: 1; transform: scale(1); }
  25% { opacity: 0; transform: translateY(-.2em) scale(1.08); }
  81% { opacity: 0; transform: scale(.58); }
  90% { opacity: 1; transform: scale(1.07); }
}
@keyframes product-loop-workspace {
  0%, 23% { opacity: 0; transform: translateY(18px) scale(.95); }
  31%, 46% { opacity: 1; transform: translateY(0) scale(1); }
  53%, 100% { opacity: 0; transform: translateY(-15px) scale(.98); }
}
@keyframes product-loop-brand {
  0%, 53% { opacity: 0; transform: translateY(14px) scale(.87); }
  59%, 70% { opacity: 1; transform: none; }
  72% { opacity: 1; transform: translateX(-2px) scale(.97); }
  73% { opacity: 1; transform: translateX(2px) scale(.95); }
  73.99% { opacity: 1; transform: none; }
  74%, 100% { opacity: 0; transform: none; }
}
@keyframes product-loop-shatter {
  0%, 73.99% { opacity: 0; transform: none; }
  74% {
    opacity: 1;
    transform: none;
    animation-timing-function: cubic-bezier(.12, .7, .3, 1);
  }
  82% {
    opacity: 1;
    transform: translate(var(--shard-x), var(--shard-y)) rotate(var(--shard-rotation)) scale(.75);
  }
  88%, 100% {
    opacity: 0;
    transform: translate(calc(var(--shard-x) * 1.25), calc(var(--shard-y) * 1.25)) rotate(var(--shard-rotation)) scale(.25);
  }
}
@keyframes product-loop-ripple {
  0%, 74% { opacity: 0; transform: scale(.18); }
  77% { opacity: .5; }
  86%, 100% { opacity: 0; transform: scale(1.8); }
}

/* Navigation mobile : réservée au téléphone, le header tablette reste inchangé. */
@media (max-width: 767px) {
  :root { --mobile-nav-clearance: calc(var(--mobile-nav-height) + var(--space-8) + env(safe-area-inset-bottom, 0px)); }
  html { scroll-padding-bottom: var(--mobile-nav-clearance); }
  body:has(.mobile-nav) { padding-bottom: var(--mobile-nav-clearance); }
  /* La spécificité conserve cette disposition même sans JavaScript. */
  .site-header .menu-toggle, .site-header .nav-content { display: none !important; }
  .mobile-contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--target);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
  }
  .mobile-contact[aria-current] { text-decoration: underline; text-underline-offset: 6px; }
  .mobile-nav {
    position: fixed;
    z-index: 50;
    inset-inline: 0;
    bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    width: min(calc(100% - var(--space-4) * 2), var(--mobile-nav-max));
    height: var(--mobile-nav-height);
    margin-inline: auto;
    padding: 7px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface);
    background: color-mix(in srgb, var(--surface) 72%, transparent);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: 0 8px 32px rgb(0 0 0 / .12), inset 0 1px 0 rgb(255 255 255 / .12);
  }
  .mobile-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 52px;
    border-radius: var(--radius-pill);
    color: var(--text-muted);
    font-size: .625rem;
    font-weight: var(--weight-medium);
    line-height: 1.2;
    transition: background var(--duration), color var(--duration);
  }
  .mobile-nav-link[aria-current],
  .mobile-nav-link:is(:hover, :focus-visible, :active) {
    color: var(--text);
    text-decoration: none;
  }

  /* One lens, sized to a grid column and shared by all four tabs. */
  .mobile-nav::before {
    content: "";
    position: absolute;
    inset-inline-start: 7px;
    inset-block-start: 50%;
    width: calc((100% - 14px) / 4);
    height: 52px;
    border-radius: var(--radius-pill);
    pointer-events: none;
    opacity: var(--lens-visible, 0);
    translate: calc(var(--lens-slot, 0) * 100%) -50%;
    background: linear-gradient(165deg, rgb(255 255 255 / .28), transparent 54%),
      color-mix(in srgb, var(--background) 68%, transparent);
    box-shadow: inset 0 1px 1px rgb(255 255 255 / .58),
      inset 0 -1px 2px rgb(125 151 190 / .25), 0 3px 10px rgb(0 0 0 / .15);
    backdrop-filter: blur(4px) saturate(1.25);
  }
  .mobile-nav-link { position: relative; }
  .mobile-nav-one { z-index: 1; }

  @media (forced-colors: none) {
    .mobile-nav:has(> .mobile-nav-link:is([aria-current], :focus-visible, :active)) { --lens-visible: 1; }
    .mobile-nav:has(> .mobile-nav-link:nth-child(2)[aria-current]) { --lens-slot: 1; }
    .mobile-nav:has(> .mobile-nav-link:nth-child(4)[aria-current]) { --lens-slot: 3; }
    .mobile-nav:has(> .mobile-nav-link:nth-child(1):is(:focus-visible, :active)) { --lens-slot: 0; }
    .mobile-nav:has(> .mobile-nav-link:nth-child(2):is(:focus-visible, :active)) { --lens-slot: 1; }
    .mobile-nav:has(> .mobile-nav-link:nth-child(4):is(:focus-visible, :active)) { --lens-slot: 3; }
    @media (hover: hover) {
      .mobile-nav:has(> .mobile-nav-link:hover) { --lens-visible: 1; }
      .mobile-nav:has(> .mobile-nav-link:nth-child(1):hover) { --lens-slot: 0; }
      .mobile-nav:has(> .mobile-nav-link:nth-child(2):hover) { --lens-slot: 1; }
      .mobile-nav:has(> .mobile-nav-link:nth-child(4):hover) { --lens-slot: 3; }
    }
    @media (prefers-reduced-motion: no-preference) {
      .mobile-nav::before {
        transition: translate 380ms cubic-bezier(.22, .85, .3, 1.08), opacity 180ms ease;
      }
      .mobile-nav[data-lens-arrival]::before {
        animation: mobile-nav-arrival 420ms cubic-bezier(.22, .85, .3, 1) both;
      }
    }
  }
  @keyframes mobile-nav-arrival {
    from { transform: translateX(var(--lens-origin)); }
    50% { scale: 1.16 .94; }
    to { transform: translateX(0); scale: 1; }
  }
  .mobile-nav-one {
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    justify-self: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--mobile-nav-accent);
    transition: transform var(--duration);
  }
  .mobile-nav-one img { width: 28px; height: 28px; filter: invert(1); }
  @media (hover: hover) and (prefers-reduced-motion: no-preference) and (forced-colors: none) {
    .mobile-nav-one:hover::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(115deg, transparent 32%, rgb(255 255 255 / .48) 50%, transparent 68%);
      animation: mobile-nav-shine 650ms ease-out both;
    }
  }
  @keyframes mobile-nav-shine {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
  }
  .mobile-nav-one:active { transform: scale(.94); }
  .mobile-nav a:focus-visible { outline-offset: 1px; }
  /* Garder l'invitation au défilement au-dessus de la barre, sans changer le hero. */
  body .tunnel-prompt { inset-block-end: var(--mobile-nav-clearance); }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-nav a { transition: none; }
}
@media (forced-colors: active) {
  .mobile-nav { background: Canvas; border-color: CanvasText; }
  .mobile-nav-link[aria-current] { outline: 2px solid Highlight; outline-offset: -3px; }
  .mobile-nav-one { forced-color-adjust: none; }
}
@media print { .mobile-nav, .mobile-contact { display: none; } }

@media (768px <= width < 900px) {
  html:has(.site-header .nav-content.is-open) { overflow: hidden; }
  .site-header:has(.nav-content.is-open) {
    position: fixed;
    inset: 0;
    z-index: 90;
    overflow: auto;
    overscroll-behavior: contain;
  }
  .site-header .nav-content.is-open { padding-block-end: var(--space-8); }
  .site-header .nav-content.is-open .primary-links > a { font-size: var(--text-h3); }
}

.menu-toggle-icon {
  margin-inline: auto;
  transition: transform 600ms ease-out;
}
.menu-toggle-stroke {
  stroke-dasharray: 12 63;
  stroke-dashoffset: 0;
  transition: stroke-dasharray 600ms ease-out, stroke-dashoffset 600ms ease-out;
}
.menu-toggle[aria-expanded="true"] .menu-toggle-icon { transform: rotate(-45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-stroke {
  stroke-dasharray: 20 300;
  stroke-dashoffset: -32.42px;
}
@media (prefers-reduced-motion: reduce) {
  .menu-toggle-icon, .menu-toggle-stroke { transition: none; }
}

@media (768px <= width < 900px) {
  .site-header:has(.nav-content.is-open) .nav-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr;
    min-height: 100%;
    padding-block-end: calc(var(--space-6) + var(--target));
  }
  .site-header .nav-content.is-open {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, 18rem);
    gap: var(--space-6);
    padding-block: var(--space-6);
  }
  .nav-content.is-open .primary-links {
    --tree-height: 3.5rem;
    --tree-y: calc(var(--tree-row, 0) * var(--tree-height));
    --tree-opacity: 0;
    position: relative;
    isolation: isolate;
    gap: 0;
    padding-inline-start: 1.5rem;
    background:
      radial-gradient(circle 2px, var(--control-border) 99%, transparent) 0 calc(100% - var(--tree-height) / 2 + 2px) / 1rem 4px no-repeat,
      linear-gradient(var(--control-border), var(--control-border)) 7.5px 0 / 1px calc(100% - var(--tree-height) / 2) no-repeat;
  }
  .nav-content.is-open .primary-links[data-tree-marked] { --tree-opacity: 1; }
  .nav-content.is-open .primary-links::before,
  .nav-content.is-open .primary-links::after {
    content: '';
    position: absolute;
    pointer-events: none;
    opacity: var(--tree-opacity);
    transition: transform 220ms cubic-bezier(.2,.75,.25,1), opacity 120ms ease-out;
  }
  .nav-content.is-open .primary-links::before {
    inset: 0 0 auto 1.5rem;
    height: var(--tree-height);
    border-radius: var(--radius-control);
    background: var(--surface-hover);
    transform: translateY(var(--tree-y));
    z-index: -1;
  }
  .nav-content.is-open .primary-links::after {
    top: calc(var(--tree-height) / 2 - 4px);
    left: 4px;
    width: 8px;
    height: 8px;
    border-radius: 1px;
    background: var(--text);
    transform: translateY(var(--tree-y)) rotate(45deg);
  }
  .site-header .nav-content.is-open .primary-links > a {
    height: var(--tree-height);
    padding-inline: var(--space-3);
    font-size: var(--text-lead);
  }
  .site-header .nav-content.is-open .primary-links > a:hover {
    text-decoration: none;
  }
  .nav-content.is-open .nav-tools {
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    border-top: 0;
    padding-top: 0;
  }
  @media (prefers-reduced-motion: reduce) {
    .nav-content.is-open .primary-links::before,
    .nav-content.is-open .primary-links::after { transition: none; }
  }
}