/* ============================================================================
   MATIÈR UI · the house kit · v2
   Rewritten 2026-08-30 on Adam's correction: « do not use the color neon, it is not
   editorial. The one principal rule is the assets have to be minimalist editorial,
   and close to the Apple UI. »

   So: no lime, no neon, no saturated signal. The accent is grass green, the paper is
   white, the tiles are editorial cream, and the register is French campagne.
   Apple contributes the MATERIALS: translucency, hairlines, large soft radii, restraint.
   Editorial contributes the STRUCTURE: serif display, rules, drop caps, folios, captions.
   ========================================================================== */

/* ---------------------------------------------------------------- THEMES -- */
:root,
.theme-campagne{
  --u-paper:#FFFFFF;        /* the canvas. white, always */
  --u-cream:#F5F1E8;        /* editorial cream. a tile, a quiet band */
  --u-sand:#EAE3D6;         /* the deeper tile, a rule, a track */
  --u-ink:#161A17;          /* warm near black. never #000 */
  --u-ink-soft:#5C665E;
  --u-ink-faint:#8B948C;
  --u-grass:#3F6F45;        /* green grass. deep, natural, matte */
  --u-grass-deep:#2C5231;
  --u-grass-tint:#E9F0E7;
  --u-ochre:#A9702F;        /* campagne warm. a second voice, used rarely */
  --u-clay:#9C4A2F;         /* tertiary. errors, negative deltas */
}
/* an ink-led variant for internal tools, same grammar */
.theme-encre{
  --u-paper:#FBFAF7; --u-cream:#F1EEE7; --u-sand:#E3DED3;
  --u-ink:#101311; --u-ink-soft:#575F58; --u-ink-faint:#8A918A;
  --u-grass:#35603A; --u-grass-deep:#24421F; --u-grass-tint:#E6EDE4;
  --u-ochre:#96652C; --u-clay:#8C412A;
}

:root{
  --u-hair:color-mix(in srgb,var(--u-ink) 9%,transparent);
  --u-hair-2:color-mix(in srgb,var(--u-ink) 16%,transparent);
  --u-up:var(--u-grass);
  --u-down:var(--u-clay);

  /* Apple-ish geometry: large, soft, continuous. A child never exceeds its parent. */
  --u-r-pill:999px;
  --u-r-xl:26px;
  --u-r-card:20px;
  --u-r-tile:14px;
  --u-r-s:10px;
  --u-r-xs:7px;

  /* Apple depth: mostly hairline, shadow only when something truly floats */
  --u-sh-0:none;
  --u-sh-1:0 1px 2px rgba(22,26,23,.045);
  --u-sh-2:0 1px 2px rgba(22,26,23,.04), 0 12px 28px -14px rgba(22,26,23,.16);
  --u-sh-3:0 6px 14px rgba(22,26,23,.06), 0 30px 64px -22px rgba(22,26,23,.22);

  --u-display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --u-text:"Source Serif 4",Georgia,serif;      /* editorial reading passages */
  --u-ui:"Inter",system-ui,-apple-system,"SF Pro Text","Segoe UI",sans-serif;
  --u-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --u-ease:cubic-bezier(.32,.72,0,1);           /* Apple's sheet curve */
  --u-ease-out:cubic-bezier(.22,1,.36,1);
  --u-dur:220ms;

  --u-measure:66ch;
}

/* ============================================================== EDITORIAL == */
.u-eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--u-ui);font-size:11px;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:var(--u-ink-soft);
}
.u-eyebrow::after{content:"";width:34px;height:1px;background:var(--u-hair-2)}
.u-eyebrow--plain::after{display:none}

.u-display{
  font-family:var(--u-ui);font-weight:600;
  font-size:clamp(2.3rem,1.5rem + 3.3vw,4.4rem);
  line-height:1.04;letter-spacing:-.033em;color:var(--u-ink);
  margin:0;text-wrap:balance;
}
/* the signature: a serif italic cut inside a grotesque headline */
.u-display .u-ital{
  font-family:var(--u-display);font-style:italic;font-weight:400;letter-spacing:-.005em;
}
.u-display--serif{
  font-family:var(--u-display);font-weight:400;letter-spacing:-.018em;line-height:1.06;
}
.u-title{                                    /* Apple large title */
  font-family:var(--u-ui);font-weight:600;font-size:clamp(1.7rem,1.3rem + 1.6vw,2.4rem);
  letter-spacing:-.025em;line-height:1.14;margin:0;color:var(--u-ink);
}
.u-lede{
  font-family:var(--u-text);font-size:1.18rem;line-height:1.62;color:var(--u-ink-soft);
  max-width:var(--u-measure);margin:0;
}
.u-body{font-family:var(--u-text);font-size:1.02rem;line-height:1.72;max-width:var(--u-measure);color:var(--u-ink)}

/* drop cap. the most editorial object there is */
.u-dropcap::first-letter{
  font-family:var(--u-display);font-size:3.6em;line-height:.82;float:left;
  padding:.06em .1em 0 0;color:var(--u-grass);
}
.u-pull{
  margin:2rem 0;padding:0 0 0 1.4rem;border-left:2px solid var(--u-grass);
  font-family:var(--u-display);font-size:1.6rem;line-height:1.34;color:var(--u-ink);
  max-width:52ch;
}
.u-pull cite{display:block;margin-top:.7rem;font-family:var(--u-ui);font-size:12.5px;font-style:normal;
  letter-spacing:.1em;text-transform:uppercase;color:var(--u-ink-faint)}
.u-caption{font-family:var(--u-ui);font-size:12.5px;line-height:1.5;color:var(--u-ink-faint);max-width:46ch}
.u-byline{font-family:var(--u-ui);font-size:12.5px;letter-spacing:.06em;color:var(--u-ink-soft)}
.u-folio{font-family:var(--u-display);font-style:italic;color:var(--u-ink-faint);font-size:14px}
/* a rule that carries a label, the way a magazine breaks a section */
.u-rule{display:flex;align-items:center;gap:1rem;margin:2.4rem 0}
.u-rule::before,.u-rule::after{content:"";height:1px;background:var(--u-hair-2);flex:1}
.u-rule span{font-family:var(--u-ui);font-size:11px;font-weight:600;letter-spacing:.17em;
  text-transform:uppercase;color:var(--u-ink-faint)}
.u-rule--start::before{flex:0 0 0}
/* the numbered section marker */
.u-num{
  font-family:var(--u-display);font-size:13px;font-style:italic;color:var(--u-grass);
  border:1px solid var(--u-hair-2);border-radius:var(--u-r-pill);
  width:30px;height:30px;display:grid;place-items:center;flex:0 0 auto;
}
.u-marginalia{
  font-family:var(--u-ui);font-size:12px;line-height:1.55;color:var(--u-ink-faint);
  border-left:1px solid var(--u-hair-2);padding-left:.9rem;max-width:26ch;
}

/* ================================================================= PILLS == */
.u-btn,.u-chip,.u-badge{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border-radius:var(--u-r-pill);font-family:var(--u-ui);
  border:1px solid transparent;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background-color var(--u-dur) var(--u-ease-out),
             border-color var(--u-dur) var(--u-ease-out),
             color var(--u-dur) var(--u-ease-out),
             box-shadow var(--u-dur) var(--u-ease-out),
             transform var(--u-dur) var(--u-ease-out);
}
.u-btn{min-height:50px;padding:0 1.5rem;font-size:15px;font-weight:600;letter-spacing:-.005em}
.u-btn--grass{background:var(--u-grass);color:#fff}
.u-btn--grass:hover{background:var(--u-grass-deep);box-shadow:var(--u-sh-2)}
.u-btn--ink{background:var(--u-ink);color:#fff}
.u-btn--ink:hover{box-shadow:var(--u-sh-2)}
.u-btn--ghost{background:var(--u-paper);color:var(--u-ink);border-color:var(--u-hair-2)}
.u-btn--ghost:hover{border-color:var(--u-ink)}
.u-btn--quiet{background:transparent;color:var(--u-grass);padding-inline:.4rem}
.u-btn--quiet:hover{background:var(--u-grass-tint)}
.u-btn:active{transform:scale(.985)}
.u-btn[disabled]{opacity:.4;pointer-events:none}
.u-chip{min-height:34px;padding:0 .9rem;font-size:12.5px;font-weight:600;
  background:var(--u-paper);color:var(--u-ink-soft);border-color:var(--u-hair-2)}
.u-chip--grass{background:var(--u-grass-tint);color:var(--u-grass-deep);border-color:transparent}
.u-chip--ink{background:var(--u-ink);color:#fff;border-color:var(--u-ink)}
.u-badge{min-height:24px;padding:0 .6rem;font-size:11px;font-weight:600;letter-spacing:.04em;
  background:var(--u-cream);color:var(--u-ink-soft);border-color:var(--u-hair)}
.u-badge--grass{background:var(--u-grass);color:#fff;border-color:transparent}
.u-dot{width:7px;height:7px;border-radius:50%;background:var(--u-grass);flex:0 0 auto}
.u-avatar{width:34px;height:34px;border-radius:var(--u-r-pill);display:grid;place-items:center;
  font-family:var(--u-ui);font-size:12px;font-weight:600;background:var(--u-cream);
  color:var(--u-ink);border:1px solid var(--u-hair);flex:0 0 auto}

/* ============================================================== SURFACES == */
.u-card{background:var(--u-paper);border:1px solid var(--u-hair);border-radius:var(--u-r-card);
  box-shadow:var(--u-sh-1);padding:1.6rem}
.u-card--float{box-shadow:var(--u-sh-2);border-color:transparent}
.u-tile{background:var(--u-cream);border:1px solid var(--u-hair);border-radius:var(--u-r-tile);padding:1.15rem 1.25rem}
.u-tile--grass{background:var(--u-grass-tint);border-color:transparent}
/* Apple material: translucent, saturated, hairline lit from above */
.u-glass{
  background:color-mix(in srgb,var(--u-paper) 66%,transparent);
  backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);
  border:1px solid color-mix(in srgb,#fff 62%,transparent);
  box-shadow:var(--u-sh-2);
}
.u-band{background:var(--u-cream);border-block:1px solid var(--u-hair)}
.u-stack{perspective:1700px;display:grid;margin-bottom:64px}
.u-stack > *{grid-area:1/1;box-shadow:var(--u-sh-3);border-radius:var(--u-r-card)}
.u-stack__back{transform:rotateY(-12deg) rotateX(3deg) translateZ(-60px) translateX(7%)}
.u-stack__mid{transform:rotateY(-7deg) translateZ(-20px) translate(-4%,11%)}
.u-stack__front{transform:rotateY(-3deg) translate(12%,14%) scale(.68)}

/* =================================================== APPLE UI COMPONENTS == */
.u-nav{display:inline-flex;align-items:center;gap:.2rem;padding:.3rem;border-radius:var(--u-r-pill)}
.u-nav a{padding:.55rem 1.05rem;border-radius:var(--u-r-pill);text-decoration:none;
  font-family:var(--u-ui);font-size:14px;font-weight:500;color:var(--u-ink-soft)}
.u-nav a[aria-current]{background:var(--u-paper);color:var(--u-ink);box-shadow:var(--u-sh-1);font-weight:600}
.u-seg{display:inline-flex;padding:.22rem;gap:.12rem;background:var(--u-sand);
  border-radius:var(--u-r-pill)}
.u-seg button{border:0;cursor:pointer;background:transparent;color:var(--u-ink-soft);
  font-family:var(--u-ui);font-size:13px;font-weight:600;padding:.45rem 1.05rem;
  border-radius:var(--u-r-pill);transition:background-color var(--u-dur) var(--u-ease)}
.u-seg button[aria-pressed="true"]{background:var(--u-paper);color:var(--u-ink);box-shadow:var(--u-sh-1)}
/* the inset grouped list. the most Apple object in the set */
.u-list{list-style:none;margin:0;padding:0;background:var(--u-paper);
  border:1px solid var(--u-hair);border-radius:var(--u-r-card);overflow:hidden}
.u-list li{display:flex;align-items:center;gap:.9rem;padding:.95rem 1.15rem;
  font-family:var(--u-ui);font-size:15px;color:var(--u-ink)}
.u-list li + li{border-top:1px solid var(--u-hair)}
.u-list .u-list__v{margin-left:auto;color:var(--u-ink-faint);font-size:14px;
  font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:.5rem}
.u-list .u-chev{width:8px;height:8px;border-right:1.6px solid var(--u-ink-faint);
  border-bottom:1.6px solid var(--u-ink-faint);transform:rotate(-45deg);flex:0 0 auto}
.u-switch{position:relative;width:50px;height:30px;flex:0 0 auto}
.u-switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;width:100%;height:100%}
.u-switch span{position:absolute;inset:0;border-radius:var(--u-r-pill);background:var(--u-sand);
  transition:background-color var(--u-dur) var(--u-ease)}
.u-switch span::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;
  border-radius:50%;background:#fff;box-shadow:var(--u-sh-1);
  transition:transform var(--u-dur) var(--u-ease)}
.u-switch input:checked + span{background:var(--u-grass)}
.u-switch input:checked + span::after{transform:translateX(20px)}
.u-stepper{display:inline-flex;align-items:center;background:var(--u-cream);border-radius:var(--u-r-pill);padding:.2rem}
.u-stepper button{width:34px;height:34px;border:0;background:transparent;cursor:pointer;
  font-size:18px;color:var(--u-ink);border-radius:var(--u-r-pill)}
.u-stepper button:hover{background:var(--u-paper)}
.u-stepper output{min-width:44px;text-align:center;font-family:var(--u-mono);font-size:14px;font-weight:600}
.u-search{display:flex;align-items:center;gap:.6rem;background:var(--u-cream);
  border:1px solid var(--u-hair);border-radius:var(--u-r-pill);padding:0 1rem;min-height:44px}
.u-search input{border:0;background:transparent;font:inherit;font-family:var(--u-ui);
  font-size:14px;outline:0;width:100%;color:var(--u-ink)}
/* the sheet, Apple's modal grammar */
.u-sheet{border-radius:var(--u-r-xl) var(--u-r-xl) 0 0;background:var(--u-paper);
  box-shadow:var(--u-sh-3);padding:1.6rem;border:1px solid var(--u-hair);border-bottom:0}
.u-sheet__grab{width:38px;height:5px;border-radius:var(--u-r-pill);background:var(--u-sand);
  margin:0 auto 1.1rem}

/* =================================================================== DATA == */
.u-kpirow{display:grid;gap:1.25rem;grid-auto-flow:column;grid-auto-columns:1fr}
.u-kpirow > .u-kpi + .u-kpi{border-left:1px solid var(--u-hair);padding-left:1.25rem}
.u-kpi{display:grid;gap:.35rem;align-content:start}
.u-kpi__k{display:flex;align-items:center;gap:.4rem;font-family:var(--u-ui);font-size:10.5px;
  font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--u-ink-faint)}
.u-kpi__v{font-family:var(--u-ui);font-size:clamp(1.6rem,1.2rem + 1.1vw,2.1rem);font-weight:600;
  letter-spacing:-.028em;color:var(--u-ink);font-variant-numeric:tabular-nums;line-height:1}
.u-kpi__v small{font-size:.55em;opacity:.5;font-weight:500}
.u-delta{font-family:var(--u-ui);font-size:12.5px;font-weight:600;display:inline-flex;gap:.25rem}
.u-delta--up{color:var(--u-up)} .u-delta--down{color:var(--u-down)}
.u-segbar{display:flex;height:8px;border-radius:var(--u-r-pill);overflow:hidden;background:var(--u-sand)}
.u-segbar i{display:block;height:100%}
.u-segbar .u-rest{background:repeating-linear-gradient(-45deg,var(--u-hair-2) 0 4px,transparent 4px 9px)}
.u-bars{display:flex;align-items:flex-end;gap:.6rem;height:170px}
.u-bars .u-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;height:100%}
.u-bars .u-col i{display:block;border-radius:5px;background:var(--u-grass)}
.u-bars .u-col i.u-b2{background:var(--u-ochre)}
.u-bars .u-col.u-ghost i{background:repeating-linear-gradient(-45deg,var(--u-hair-2) 0 4px,transparent 4px 9px);
  border:1px solid var(--u-hair)}
.u-bars .u-x{font-family:var(--u-ui);font-size:10.5px;color:var(--u-ink-faint);text-align:center;margin-top:.5rem}
.u-spark{width:100%;height:auto;display:block;overflow:visible}
.u-spark path{fill:none;stroke:var(--u-grass);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.u-spark .u-fill{fill:var(--u-grass-tint);stroke:none}
.u-spark circle{fill:var(--u-paper);stroke:var(--u-grass);stroke-width:2.4}
.u-gauge{display:block;width:100%;max-width:210px;height:auto;margin-inline:auto}
.u-gauge .u-track{fill:none;stroke:var(--u-sand);stroke-width:10;stroke-linecap:round}
.u-gauge .u-val{fill:none;stroke:var(--u-grass);stroke-width:10;stroke-linecap:round}
.u-ring{--p:64;width:104px;height:104px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--u-grass) calc(var(--p)*1%),var(--u-sand) 0);flex:0 0 auto}
.u-ring span{width:78px;height:78px;border-radius:50%;background:var(--u-paper);display:grid;
  place-items:center;font-family:var(--u-ui);font-weight:600;font-size:18px;
  font-variant-numeric:tabular-nums}
.u-table{width:100%;border-collapse:collapse;font-family:var(--u-ui);font-variant-numeric:tabular-nums}
.u-table th{text-align:left;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--u-ink-faint);font-weight:600;padding:0 1rem .7rem 0;border-bottom:1px solid var(--u-hair-2)}
.u-table td{padding:.85rem 1rem .85rem 0;border-bottom:1px solid var(--u-hair);font-size:14.5px}
.u-table tr:last-child td{border-bottom:0}
.u-table .u-fig{font-weight:600;text-align:right}

/* ================================================================= FORMS == */
.u-field{display:grid;gap:.45rem}
.u-field label{font-family:var(--u-ui);font-size:13px;font-weight:600;color:var(--u-ink)}
.u-field input,.u-field select{min-height:50px;padding:0 1rem;font-family:var(--u-ui);font-size:15px;
  color:var(--u-ink);background:var(--u-paper);border:1px solid var(--u-hair-2);
  border-radius:var(--u-r-s);width:100%}
.u-field input:focus{border-color:var(--u-grass);outline:0;box-shadow:0 0 0 3px var(--u-grass-tint)}
.u-field .u-help{font-family:var(--u-ui);font-size:12.5px;color:var(--u-ink-faint)}
/* the radio card. tap, never type */
.u-opt{position:relative;display:block}
.u-opt input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.u-opt span{display:flex;align-items:center;gap:.85rem;min-height:62px;padding:0 1.15rem;
  background:var(--u-paper);border:1px solid var(--u-hair-2);border-radius:var(--u-r-tile);
  font-family:var(--u-ui);font-size:15px;font-weight:600;color:var(--u-ink);
  transition:border-color var(--u-dur) var(--u-ease),background-color var(--u-dur) var(--u-ease)}
.u-opt span::before{content:"";width:20px;height:20px;border-radius:50%;flex:0 0 auto;
  border:1.8px solid var(--u-hair-2);transition:border-color var(--u-dur) var(--u-ease)}
.u-opt input:checked + span{border-color:var(--u-grass);background:var(--u-grass-tint)}
.u-opt input:checked + span::before{border-color:var(--u-grass);border-width:6px}
.u-opt input:focus-visible + span{outline:2px solid var(--u-grass);outline-offset:3px}
.u-alert{display:flex;gap:.85rem;padding:1rem 1.15rem;border-radius:var(--u-r-tile);
  font-family:var(--u-ui);font-size:14px;line-height:1.5}
.u-alert--info{background:var(--u-cream);color:var(--u-ink)}
.u-alert--good{background:var(--u-grass-tint);color:var(--u-grass-deep)}
.u-alert--bad{background:color-mix(in srgb,var(--u-clay) 9%,transparent);color:var(--u-clay)}
.u-empty{text-align:center;padding:3rem 1rem;color:var(--u-ink-faint);font-family:var(--u-ui)}

/* ================================================================== A11Y == */
:where(a,button,input,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--u-grass);outline-offset:3px;border-radius:var(--u-r-xs)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .u-stack > *{transform:none!important}
}

/* ============================================================== PATTERNS ==
   Section blocks, built from the atoms above. These are what a page is
   assembled from, so a build never restyles from zero.
   ========================================================================= */

.u-wrap{max-width:1080px;margin-inline:auto;padding-inline:28px}
.u-wrap--tight{max-width:760px}
.u-sec{padding-block:clamp(56px,7vw,104px)}
.u-sec--air{padding-block:clamp(80px,10vw,148px)}

/* hero · editorial split, asymmetric, never 6/6 */
.u-hero{display:grid;gap:clamp(32px,5vw,64px);align-items:center}
@media(min-width:900px){.u-hero{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}}
.u-hero__proof{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:1.4rem;
  font-family:var(--u-ui);font-size:13px;color:var(--u-ink-soft)}
.u-hero__proof li{display:flex;align-items:center;gap:.45rem;list-style:none}
.u-hero__proof li::before{content:"";width:13px;height:7px;border-left:1.8px solid var(--u-grass);
  border-bottom:1.8px solid var(--u-grass);transform:rotate(-45deg);flex:0 0 auto}

/* trust strip · logos on a quiet band */
.u-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(28px,5vw,68px);list-style:none;margin:0;padding:0}
.u-logos img{height:38px;width:auto;object-fit:contain}
@media(min-width:700px){.u-logos img{height:44px}}

/* feature row · alternating, image one side, words the other */
.u-feat{display:grid;gap:clamp(28px,4vw,56px);align-items:center}
@media(min-width:860px){
  .u-feat{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .u-feat--flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .u-feat--flip .u-feat__media{order:2}
}

/* step cards, numbered, editorial */
.u-steps{list-style:none;margin:0;padding:0;display:grid;gap:16px}
@media(min-width:820px){.u-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.u-steps li{display:flex;flex-direction:column;gap:.8rem;align-items:flex-start;
  background:var(--u-paper);border:1px solid var(--u-hair);border-radius:var(--u-r-card);padding:1.5rem}
.u-steps h3{margin:0;font-family:var(--u-ui);font-size:1.05rem;font-weight:600;letter-spacing:-.01em}
.u-steps p{margin:0;font-family:var(--u-text);font-size:.98rem;line-height:1.6;color:var(--u-ink-soft)}

/* testimonial · editorial quote card, no stars, no avatars-as-proof */
.u-quotes{list-style:none;margin:0;padding:0;display:grid;gap:16px}
@media(min-width:780px){.u-quotes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.u-quotes{grid-template-columns:repeat(3,minmax(0,1fr))}}
.u-quote{background:var(--u-cream);border-radius:var(--u-r-card);padding:1.6rem;
  display:flex;flex-direction:column;gap:1rem}
.u-quote__t{margin:0;font-family:var(--u-display);font-size:1.24rem;line-height:1.42;color:var(--u-ink)}
.u-quote__w{margin:auto 0 0;font-family:var(--u-ui);font-size:12.5px;color:var(--u-ink-faint)}
.u-quote__w strong{color:var(--u-ink);font-weight:600}

/* FAQ · native details, no JS */
.u-faq{border-top:1px solid var(--u-hair)}
.u-faq details{border-bottom:1px solid var(--u-hair)}
.u-faq summary{list-style:none;cursor:pointer;padding:1.25rem 2.6rem 1.25rem 0;position:relative;
  font-family:var(--u-ui);font-size:1.02rem;font-weight:600;color:var(--u-ink)}
.u-faq summary::-webkit-details-marker{display:none}
.u-faq summary::after{content:"";position:absolute;right:6px;top:calc(50% - 5px);width:9px;height:9px;
  border-right:1.8px solid var(--u-grass);border-bottom:1.8px solid var(--u-grass);
  transform:rotate(45deg);transition:transform var(--u-dur) var(--u-ease)}
.u-faq details[open] summary::after{transform:rotate(-135deg)}
.u-faq p{margin:0 0 1.25rem;font-family:var(--u-text);line-height:1.68;color:var(--u-ink-soft);max-width:62ch}

/* CTA band · the close */
.u-cta{background:var(--u-grass);color:#fff;border-radius:var(--u-r-xl);
  padding:clamp(32px,5vw,60px);text-align:center}
.u-cta h2{margin:0 0 1rem;font-family:var(--u-display);font-weight:400;
  font-size:clamp(1.9rem,1.4rem + 2vw,3rem);line-height:1.1;letter-spacing:-.02em}
.u-cta p{margin:0 auto 1.8rem;max-width:52ch;font-family:var(--u-text);
  color:color-mix(in srgb,#fff 82%,transparent);line-height:1.6}
.u-cta .u-btn--ghost{background:#fff;border-color:#fff;color:var(--u-grass-deep)}

/* footer · fact strip */
.u-foot{background:var(--u-cream);border-top:1px solid var(--u-hair);
  font-family:var(--u-ui);font-size:13.5px;color:var(--u-ink-soft)}
.u-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem;font-variant-numeric:tabular-nums}
.u-foot a{color:var(--u-ink-soft)}

/* before / after, no JS, pure CSS range */
.u-ba{position:relative;border-radius:var(--u-r-card);overflow:hidden;isolation:isolate}
.u-ba > img{width:100%;display:block}
.u-ba__after{position:absolute;inset:0;width:50%;overflow:hidden;border-right:2px solid #fff}
.u-ba__after img{width:200%;max-width:none;height:100%;object-fit:cover}

/* ============================================== PATTERNS · second wave === */

/* tabs, underline not pill, editorial */
.u-tabs{display:flex;gap:1.6rem;border-bottom:1px solid var(--u-hair);overflow-x:auto}
.u-tabs button{border:0;background:transparent;cursor:pointer;font-family:var(--u-ui);
  font-size:14.5px;font-weight:600;color:var(--u-ink-faint);padding:0 0 .85rem;
  border-bottom:2px solid transparent;white-space:nowrap}
.u-tabs button[aria-selected="true"]{color:var(--u-ink);border-bottom-color:var(--u-grass)}

/* timeline · a chantier, week by week */
.u-timeline{list-style:none;margin:0;padding:0 0 0 1.6rem;border-left:1px solid var(--u-hair-2)}
.u-timeline li{position:relative;padding:0 0 1.9rem .4rem}
.u-timeline li::before{content:"";position:absolute;left:calc(-1.6rem - 5px);top:.45em;
  width:9px;height:9px;border-radius:50%;background:var(--u-paper);border:2px solid var(--u-grass)}
.u-timeline li:last-child{padding-bottom:0}
.u-timeline h4{margin:0 0 .25rem;font-family:var(--u-ui);font-size:15px;font-weight:600}
.u-timeline p{margin:0;font-family:var(--u-text);font-size:.96rem;color:var(--u-ink-soft);line-height:1.6}
.u-timeline time{font-family:var(--u-mono);font-size:11px;color:var(--u-grass);letter-spacing:.04em}

/* comparison bar · two values, honest geometry */
.u-vs{display:grid;gap:.75rem}
.u-vs__row{display:grid;grid-template-columns:9rem 1fr auto;gap:1rem;align-items:center}
.u-vs__k{font-family:var(--u-ui);font-size:13px;color:var(--u-ink-soft)}
.u-vs__track{height:30px;background:var(--u-sand);border-radius:var(--u-r-xs);overflow:hidden}
.u-vs__fill{height:100%;background:var(--u-grass);border-radius:var(--u-r-xs)}
.u-vs__fill--alt{background:var(--u-ochre)}
.u-vs__v{font-family:var(--u-ui);font-weight:600;font-variant-numeric:tabular-nums;font-size:15px}

/* pricing / offer tile */
.u-offer{background:var(--u-paper);border:1px solid var(--u-hair-2);border-radius:var(--u-r-card);
  padding:1.7rem;display:flex;flex-direction:column;gap:1rem}
.u-offer--lead{border-color:var(--u-grass);box-shadow:0 0 0 3px var(--u-grass-tint)}
.u-offer ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;font-family:var(--u-ui);font-size:14.5px}
.u-offer li{display:flex;gap:.6rem;align-items:flex-start;color:var(--u-ink-soft)}
.u-offer li::before{content:"";width:13px;height:7px;margin-top:.42em;flex:0 0 auto;
  border-left:1.8px solid var(--u-grass);border-bottom:1.8px solid var(--u-grass);transform:rotate(-45deg)}

/* toast */
.u-toast{display:inline-flex;align-items:center;gap:.7rem;padding:.8rem 1.1rem;
  border-radius:var(--u-r-pill);background:var(--u-ink);color:#fff;
  font-family:var(--u-ui);font-size:14px;box-shadow:var(--u-sh-3)}

/* breadcrumb */
.u-crumb{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;list-style:none;margin:0;padding:0;
  font-family:var(--u-ui);font-size:13px;color:var(--u-ink-faint)}
.u-crumb a{color:var(--u-ink-soft);text-decoration:none}
.u-crumb li + li::before{content:"/";margin-right:.5rem;color:var(--u-hair-2)}

/* progress, multi-step form */
.u-prog{display:grid;gap:.55rem}
.u-prog__k{font-family:var(--u-ui);font-size:12.5px;color:var(--u-ink-faint)}
.u-prog__track{height:4px;background:var(--u-sand);border-radius:var(--u-r-pill);overflow:hidden}
.u-prog__bar{height:100%;background:var(--u-grass);border-radius:var(--u-r-pill);
  transition:width var(--u-dur) var(--u-ease)}

/* image treatments */
.u-figure{margin:0}
.u-figure img{width:100%;display:block;border-radius:var(--u-r-card)}
.u-figure figcaption{margin-top:.7rem}
.u-figure--frame img{border:1px solid var(--u-hair);padding:8px;background:var(--u-paper)}
.u-figure--duo{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}

/* ================================================ RESPONSIVE GUARDS ======
   Caught by the 390px audit. Both were real overflow, not cosmetic.
   ======================================================================== */

/* the tilted stack cannot tilt on a phone: the rotation pushes past the
   viewport and there is no room for the depth to read anyway. It becomes a
   plain vertical stack of cards. */
@media (max-width:760px){
  .u-stack{perspective:none;display:grid;gap:12px;margin-bottom:32px;height:auto!important}
  .u-stack > *{grid-area:auto;transform:none;box-shadow:var(--u-sh-1)}
  .u-stack__front{max-width:none}
}
/* a nav that only exists where there is room for it */
.u-nav--desk{display:none}
@media (min-width:940px){.u-nav--desk{display:inline-flex}}
/* any header row: the mark and one action survive on a phone, nothing else */
.u-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:66px}
.u-topbar > *{min-width:0}
/* horizontal scrollers must clip, never widen the document */
.u-tabs,.u-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.u-table-scroll table{min-width:520px}

/* [hidden] must win. A component class that sets `display` silently defeats the
   attribute, which is how an empty simulator shipped visible. Caught 2026-08-30. */
[hidden]{display:none!important}

/* ============================================================================
   V3 · 2026-08-30 · les composants que les 12 screenshots enseignent et que le
   kit n'avait pas. Rien n'est remplacé ici, tout est ajouté.

   Lus dans les captures : le hero Cirrus (la carte blanche flotte sur une vraie
   photo et la chevauche par le bas), le rail « trusted by » de Lumenwave (des
   wordmarks typographiques mélangés), sa carte de pricing inversée en noir, et
   son bloc de clôture encre avec un formulaire blanc posé dedans.
   ========================================================================== */

/* ------------------------------------------------- LE HERO SUR UNE IMAGE -- */
/* Le mouvement Cirrus. L'image est le sol, la carte est l'objet, et le
   chevauchement par le bas est d'où vient tout le premium.
   Mobile : l'image est une BANDE, jamais un plein cadre, parce que la seule
   lecon mesurée de la page soeur est que le formulaire doit rester visible. */
.u-hero--image{position:relative;display:block;padding:0}
.u-hero--image .u-hero__img{
  position:relative;width:100%;aspect-ratio:16/9;max-height:38vh;
  overflow:hidden;background:var(--u-sand);
}
.u-hero--image .u-hero__img img{width:100%;height:100%;object-fit:cover;display:block}
/* le voile: il ne teinte pas, il rend le texte lisible sur n'importe quelle photo */
.u-hero--image .u-hero__img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--u-ink) 26%,transparent) 0%,
    color-mix(in srgb,var(--u-ink) 6%,transparent) 42%,
    color-mix(in srgb,var(--u-paper) 92%,transparent) 100%);
}
.u-hero--image .u-hero__over{position:relative;margin-top:-42px;z-index:2}
@media(min-width:900px){
  .u-hero--image .u-hero__img{max-height:min(74vh,620px);aspect-ratio:16/9}
  .u-hero--image .u-hero__over{margin-top:-190px}
  /* desktop: le texte se pose SUR l'image, la carte deborde par le bas */
  .u-hero--image .u-hero__grid{
    display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);
    gap:clamp(32px,4vw,60px);align-items:end;
  }
}

/* --------------------------------------------------- LE VERRE REFRACTIF -- */
/* .u-glass reste. Ceci l'epaissit: une arete claire en haut, une ombre courte
   en bas, et un repli opaque quand le backdrop n'est pas supporte. */
.u-glass{position:relative}
.u-glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,
    color-mix(in srgb,#fff 46%,transparent) 0%,
    transparent 38%,
    color-mix(in srgb,var(--u-ink) 4%,transparent) 100%);
}
@supports not (backdrop-filter:blur(2px)){
  .u-glass{background:color-mix(in srgb,var(--u-paper) 94%,transparent)}
}

/* --------------------------------------- LE RAIL DE MARQUES TYPOGRAPHIQUES */
/* Lumenwave « TRUSTED BY TREASURIES AT ». Des wordmarks, pas des images.
   Un serif, un mono, un grotesque: le melange est ce qui le fait lire comme
   une liste d'institutions et pas comme une rangee de logos clients. */
.u-rail{
  display:flex;align-items:center;gap:clamp(1.4rem,4vw,3.2rem);
  flex-wrap:wrap;justify-content:center;
  padding-block:1.2rem;border-block:1px solid var(--u-hair);
}
.u-rail__k{
  font-family:var(--u-ui);font-size:10.5px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--u-ink-faint);margin-right:auto;
}
.u-rail__m{font-size:15px;color:var(--u-ink-soft);white-space:nowrap;letter-spacing:.02em}
.u-rail__m--serif{font-family:var(--u-display);font-style:italic;font-size:18px}
.u-rail__m--mono{font-family:var(--u-mono);font-size:13px;letter-spacing:.06em}
.u-rail__m--bold{font-family:var(--u-ui);font-weight:700;letter-spacing:-.01em}
.u-rail img{height:30px;width:auto;object-fit:contain;opacity:.85}
@media(max-width:700px){.u-rail__k{margin-right:0;width:100%;text-align:center}}

/* ------------------------------------------------------------ LE MARQUEE -- */
/* Le bandeau d'avis qui defile. Il se met en pause au survol ET au focus
   clavier, sinon il est inutilisable pour qui tabule. Duplique le contenu deux
   fois dans le HTML: la boucle est un translate de -50%. */
.u-marquee{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.u-marquee__t{display:flex;gap:16px;width:max-content;
  animation:u-slide var(--u-marquee-dur,58s) linear infinite}
.u-marquee:hover .u-marquee__t,
.u-marquee:focus-within .u-marquee__t{animation-play-state:paused}
@keyframes u-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .u-marquee{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .u-marquee__t{animation:none}
}

/* ------------------------------------------------------- L'AVIS GOOGLE --- */
.u-review{
  width:clamp(268px,74vw,340px);flex:0 0 auto;display:flex;flex-direction:column;gap:.85rem;
  background:var(--u-paper);border:1px solid var(--u-hair);border-radius:var(--u-r-card);
  padding:1.35rem;box-shadow:var(--u-sh-1);
}
.u-review__h{display:flex;align-items:center;gap:.7rem}
.u-review__n{font-family:var(--u-ui);font-size:14.5px;font-weight:600;color:var(--u-ink)}
.u-review__d{font-family:var(--u-ui);font-size:12px;color:var(--u-ink-faint)}
.u-review__t{margin:0;font-family:var(--u-text);font-size:15px;line-height:1.6;color:var(--u-ink)}
.u-review__g{margin-top:auto;padding-top:.5rem;display:flex;align-items:center;gap:.4rem;
  border-top:1px solid var(--u-hair);
  font-family:var(--u-ui);font-size:11.5px;color:var(--u-ink-faint)}
.u-review__g img,.u-review__g svg{height:14px;width:auto}
/* les etoiles. l'or, pas le vert: c'est la marque Google, pas la notre */
.u-stars{display:inline-flex;gap:2px;color:#E8A33D}
.u-stars svg{width:15px;height:15px;fill:currentColor}
.u-stars[data-empty] svg:nth-child(n+0){opacity:1}

/* ----------------------------------------------------- LE CAROUSEL SNAP -- */
/* « Comment ca se passe ». Images en fond, texte en VRAI HTML par-dessus.
   Un texte cuit dans une image ne se zoome pas et ne se lit pas a 65 ans. */
.u-carousel{
  display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-padding-inline:28px;padding-bottom:.6rem;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch;
}
.u-carousel > *{scroll-snap-align:start}
.u-slide{
  position:relative;flex:0 0 auto;width:clamp(280px,82vw,420px);aspect-ratio:4/5;
  border-radius:var(--u-r-card);overflow:hidden;isolation:isolate;background:var(--u-sand);
  display:flex;flex-direction:column;justify-content:flex-end;padding:1.5rem;
}
.u-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.u-slide::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,transparent 22%,color-mix(in srgb,var(--u-ink) 78%,transparent) 100%)}
.u-slide__n{font-family:var(--u-display);font-style:italic;font-size:14px;color:#fff;opacity:.8}
.u-slide h3{margin:.3rem 0 .4rem;font-family:var(--u-ui);font-size:1.2rem;font-weight:600;
  letter-spacing:-.015em;color:#fff}
.u-slide p{margin:0;font-family:var(--u-text);font-size:.98rem;line-height:1.55;
  color:color-mix(in srgb,#fff 84%,transparent);max-width:36ch}
@media(min-width:900px){.u-slide{width:380px;aspect-ratio:3/4}}

/* ------------------------------------------------- LES CARTES QUI COLLENT */
/* Empilement sticky. Chaque carte s'arrete sous la precedente. */
.u-stick{display:grid;gap:18px}
.u-stick > *{position:sticky;top:var(--u-stick-top,86px)}
.u-stick > *:nth-child(1){top:calc(var(--u-stick-top,86px) + 0px)}
.u-stick > *:nth-child(2){top:calc(var(--u-stick-top,86px) + 14px)}
.u-stick > *:nth-child(3){top:calc(var(--u-stick-top,86px) + 28px)}
.u-stick > *:nth-child(4){top:calc(var(--u-stick-top,86px) + 42px)}
@media (prefers-reduced-motion:reduce){.u-stick > *{position:static}}

/* ------------------------------------------ LE TABLEAU D'AIDES INTERACTIF */
/* Deux colonnes morales: ce que l'Etat DONNE, ce qu'il PRETE. Le total en gros
   mono. La ligne se deplie sur ses conditions, sans jamais les cacher. */
.u-aides{border:1px solid var(--u-hair);border-radius:var(--u-r-card);overflow:hidden;
  background:var(--u-paper)}
.u-aides__k{display:flex;align-items:center;gap:.7rem;padding:.85rem 1.25rem;
  background:var(--u-cream);border-bottom:1px solid var(--u-hair);
  font-family:var(--u-ui);font-size:10.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--u-ink-faint)}
.u-aides details{border-bottom:1px solid var(--u-hair)}
.u-aides summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.9rem;
  min-height:64px;padding:.7rem 2.4rem .7rem 1.25rem;position:relative}
.u-aides summary::-webkit-details-marker{display:none}
.u-aides summary::after{content:"";position:absolute;right:16px;top:calc(50% - 5px);
  width:9px;height:9px;border-right:1.7px solid var(--u-ink-faint);
  border-bottom:1.7px solid var(--u-ink-faint);transform:rotate(45deg);
  transition:transform var(--u-dur) var(--u-ease)}
.u-aides details[open] summary::after{transform:rotate(-135deg)}
.u-aides__n{font-family:var(--u-ui);font-size:16px;font-weight:600;color:var(--u-ink)}
.u-aides__logo{height:26px;width:auto;object-fit:contain;flex:0 0 auto}
.u-aides__v{margin-left:auto;font-family:var(--u-mono);font-size:16px;font-weight:600;
  color:var(--u-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.u-aides__v--loan{color:var(--u-ink-faint);font-weight:500}
.u-aides p{margin:0 0 1.1rem;padding-inline:1.25rem;font-family:var(--u-text);
  font-size:.96rem;line-height:1.62;color:var(--u-ink-soft);max-width:62ch}
.u-aides__tot{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;
  padding:1.4rem 1.25rem;background:var(--u-grass-tint)}
.u-aides__tot b{font-family:var(--u-ui);font-size:15px;font-weight:600;color:var(--u-grass-deep)}
.u-aides__big{
  margin-left:auto;font-family:var(--u-ui);font-weight:700;
  font-size:clamp(2.4rem,1.4rem + 4.2vw,4rem);line-height:.94;letter-spacing:-.04em;
  color:var(--u-grass-deep);font-variant-numeric:tabular-nums}
.u-aides__big small{font-size:.36em;font-weight:600;letter-spacing:0;opacity:.7}
/* la mention d'eligibilite. Elle est SOUDEE au chiffre, jamais une note en bas */
.u-aides__cond{width:100%;font-family:var(--u-ui);font-size:12.5px;color:var(--u-grass-deep);
  opacity:.85;margin:0}

/* ------------------------------------------------------ LE BLOC ENCRE ---- */
/* La carte de pricing inversee de Lumenwave, et son bloc de cloture: fond
   encre pleine largeur, formulaire en carte BLANCHE posee dedans. */
.u-ink{background:var(--u-ink);color:#fff;border-radius:var(--u-r-xl);
  padding:clamp(28px,5vw,56px);position:relative;overflow:hidden}
.u-ink h2{margin:0 0 1rem;font-family:var(--u-display);font-weight:400;
  font-size:clamp(1.9rem,1.3rem + 2.4vw,3rem);line-height:1.08;letter-spacing:-.02em}
.u-ink h2 .u-ital{font-style:italic}
.u-ink p{margin:0 0 1.6rem;max-width:46ch;font-family:var(--u-text);
  font-size:1.02rem;line-height:1.65;color:color-mix(in srgb,#fff 76%,transparent)}
.u-ink .u-btn--grass{background:var(--u-grass);color:#fff}
.u-ink .u-btn--ghost{background:transparent;border-color:color-mix(in srgb,#fff 30%,transparent);color:#fff}
.u-ink__grid{display:grid;gap:clamp(28px,4vw,48px);align-items:center}
@media(min-width:880px){.u-ink__grid{grid-template-columns:minmax(0,1fr) minmax(0,420px)}}
/* la carte blanche posee dans le noir */
.u-ink__card{background:var(--u-paper);color:var(--u-ink);border-radius:var(--u-r-card);
  padding:1.6rem;box-shadow:var(--u-sh-3)}

/* --------------------------------------------------- LE SEGMENT GLISSANT - */
/* .u-seg existe. Ceci lui donne la pilule qui GLISSE au lieu de sauter.
   Le HTML pose --i sur le conteneur, l'index de l'onglet actif. */
.u-seg--slide{position:relative;isolation:isolate}
.u-seg--slide::before{
  content:"";position:absolute;z-index:-1;top:.22rem;bottom:.22rem;left:.22rem;
  width:calc((100% - .44rem) / var(--n,3));
  transform:translateX(calc(100% * var(--i,0)));
  background:var(--u-paper);border-radius:var(--u-r-pill);box-shadow:var(--u-sh-1);
  transition:transform var(--u-dur) var(--u-ease);
}
.u-seg--slide button[aria-pressed="true"]{background:transparent;box-shadow:none}
@media (prefers-reduced-motion:reduce){.u-seg--slide::before{transition:none}}

/* --------------------------------------------------------- LE COMPTEUR --- */
/* Le chiffre qui monte une fois. Le JS ecrit --u-n, le CSS ne fait que
   l'afficher en mono tabulaire pour qu'il ne fasse pas sauter la mise en page. */
.u-count{font-family:var(--u-ui);font-weight:700;font-variant-numeric:tabular-nums;
  letter-spacing:-.035em;line-height:.96;color:var(--u-ink);
  font-size:clamp(2.1rem,1.3rem + 3.2vw,3.4rem);display:inline-block}
.u-count small{font-size:.4em;font-weight:600;letter-spacing:0;opacity:.6;margin-left:.15em}

/* ------------------------------------------------------- LA BANDE WEDGE -- */
/* « On ne vous demarche pas. » L'objection la mieux classee du corpus.
   Calme, creme, une seule regle verte a gauche. Jamais un bloc criard. */
.u-wedge{background:var(--u-cream);border-left:3px solid var(--u-grass);
  border-radius:0 var(--u-r-card) var(--u-r-card) 0;
  padding:clamp(24px,4vw,40px) clamp(22px,4vw,40px)}
.u-wedge h2{margin:0 0 .9rem;font-family:var(--u-display);font-weight:400;
  font-size:clamp(1.5rem,1.1rem + 1.7vw,2.1rem);line-height:1.14;color:var(--u-ink)}
.u-wedge p{margin:0;font-family:var(--u-text);font-size:1.02rem;line-height:1.68;
  color:var(--u-ink-soft);max-width:58ch}
.u-wedge__law{margin-top:1rem;font-family:var(--u-ui);font-size:12.5px;color:var(--u-ink-faint)}

/* ---------------------------------------------- CORRECTIFS v3.1 · 2026-08-31 */
/* Deux bugs trouves en auditant la premiere page batie sur le kit. */

/* 1 · La carte blanche posee dans le bloc encre heritait des couleurs inversees
       du bloc, donc son texte etait blanc sur blanc et la carte paraissait VIDE.
       Elle remet sa propre palette, elle ne l'herite plus. */
.u-ink__card{color:var(--u-ink)}
.u-ink__card p{color:var(--u-ink-soft)}
.u-ink__card .u-eyebrow{color:var(--u-ink-faint)}
.u-ink__card .u-btn--ghost{background:var(--u-paper);color:var(--u-ink);border-color:var(--u-hair-2)}
.u-ink__card .u-btn--ghost:hover{border-color:var(--u-ink)}
.u-ink__card .u-caption{color:var(--u-ink-faint)}

/* 2 · .u-slide suppose une PHOTO derriere, donc il pose un voile sombre et ecrit
       en blanc. Avec une illustration au trait sur fond creme, ce voile rend le
       texte illisible. Le modificateur --plain est la variante dessinee. */
.u-slide--plain{background:var(--u-cream);aspect-ratio:auto}  /* la hauteur suit le contenu:
   une illustration au trait n'a pas besoin d'un cadre photo, et le 3/4 creusait un vide */
.u-slide--plain::after{display:none}
.u-slide--plain .u-slide__n{color:var(--u-grass);opacity:1}
.u-slide--plain h3{color:var(--u-ink)}
.u-slide--plain p{color:var(--u-ink-soft)}