/* =====================================================================
   Unfilled : charte « Cellule » (2026-11-14)
   Blanc, encre, et un seul cobalt : celui de ce que mesure Unfilled.
   ===================================================================== */
@font-face { font-family: "Satoshi"; src: url("fonts/satoshi-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/satoshi-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/satoshi-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --bg: #FFFFFF; --surface: #F6F7F9; --surface-2: #EEF0F3;
  --ink: #151A23; --ink-2: #3A414F; --muted: #626978;
  --line: rgba(21, 26, 35, .08); --line-2: rgba(21, 26, 35, .14); --line-3: rgba(21, 26, 35, .28);
  --blue: #2338D8; --blue-bg: #EEF0FD; --blue-line: #C9CFF6;
  --fresh: #1B9A54; --fresh-bg: #D3F0DD;
  --shadow-sm: 0 1px 2px rgba(21, 26, 35, .06);
  --shadow: 0 1px 2px rgba(21, 26, 35, .05), 0 8px 24px -8px rgba(21, 26, 35, .12), 0 32px 64px -32px rgba(21, 26, 35, .24);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --r-lg: 14px; --r: 10px; --r-sm: 8px;
  --font: "Satoshi", "Segoe UI", system-ui, sans-serif;
  --gutter: clamp(20px, 4vw, 40px);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { background: var(--bg); scroll-padding-top: 84px; }
body { font-family: var(--font); font-size: 17px; line-height: 1.6; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
a { color: inherit; }
a, button, summary, label { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(38px, 5vw, 60px); line-height: 1.04; letter-spacing: -.04em; }
h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -.035em; }
h3 { font-size: 19px; line-height: 1.3; letter-spacing: -.015em; }
.wrap { max-width: 1200px; margin: 0 auto; padding-inline: var(--gutter); }
.lead { font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 48ch; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: var(--r-sm); text-decoration: none; }
.skip:focus { top: 12px; }
.todo { background: #FFF3C4; color: #6B5310; padding: 1px 6px; border-radius: 4px; font-size: 13px; font-weight: 500; }

/* ---------- Logotype : le mot suivi de la cellule vide ---------- */
.logo { display: inline-flex; align-items: center; font-weight: 700; font-size: 23px; line-height: 1; letter-spacing: -.035em; text-decoration: none; color: var(--ink); }

/* ---------- Motifs communs ---------- */
.cell { position: relative; display: inline-block; flex: none; width: 1.2em; height: .72em; margin-left: .16em; background: #fff; border: .085em solid var(--ink); box-sizing: border-box; }
.cell::after { content: ""; position: absolute; right: -.16em; bottom: -.16em; width: .22em; height: .22em; background: var(--blue); box-shadow: 0 0 0 .045em #fff; }
.nowrap { white-space: nowrap; }
.cell-fig { position: relative; display: inline-block; padding: .05em .22em .13em; border: .055em solid var(--ink); background: #fff; color: var(--blue); line-height: 1.1; white-space: nowrap; }
.cell-name { display: inline-block; position: relative; padding: 3px 10px 4px; border: 2px solid var(--ink); background: #fff; color: var(--ink); font-weight: 700; line-height: 1.3; }
.cell-name::after { content: ""; position: absolute; right: -5px; bottom: -5px; width: 8px; height: 8px; background: var(--blue); box-shadow: 0 0 0 2px var(--surface); }
.cell-fig::after { content: ""; position: absolute; right: -.15em; bottom: -.15em; width: .2em; height: .2em; background: var(--blue); box-shadow: 0 0 0 .04em #fff; }
.date-pill { display: inline-block; padding: .34em .85em; border-radius: 999px; background: var(--surface-2); color: #3D4852; font-weight: 500; white-space: nowrap; }
.excl { font-weight: 700; color: var(--ink); }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: var(--r-sm); border: 1px solid transparent; font: inherit; font-size: 15.5px; font-weight: 700; letter-spacing: -.005em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, transform .16s var(--ease-out); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .55; cursor: default; transform: none; }
.btn.primary { background: var(--ink); color: #fff; box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .12); }
.btn.primary:hover { background: #2A303C; }
.btn.secondary { background: #fff; color: var(--ink); border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.btn.secondary:hover { border-color: var(--line-3); }
.btn.sm { height: 38px; padding: 0 14px; font-size: 14.5px; }
.ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.more-link { font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.more-link:hover { text-decoration-color: var(--ink); }

/* ---------- Barre de navigation ---------- */
.topbar { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.topbar.scrolled { border-bottom-color: var(--line); }
.nav { display: flex; align-items: center; gap: 40px; height: 68px; }
.links { display: flex; gap: 28px; font-size: 15px; font-weight: 500; color: var(--ink-2); }
.links a { position: relative; text-decoration: none; padding-block: 6px; transition: color .15s ease; }
.links a:hover, .links a[aria-current="page"] { color: var(--ink); }
.links a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--ink); border-radius: 2px; }
.nav-end { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.menu-btn { display: none; font: inherit; font-size: 14.5px; font-weight: 700; color: var(--ink); background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-sm); height: 38px; padding: 0 14px; cursor: pointer; }

/* ---------- Sections ---------- */
section { padding-block: clamp(72px, 10vw, 120px); }
.surface { background: var(--surface); }
.sec-head { display: grid; gap: 16px; max-width: 660px; margin-bottom: 48px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 80px); align-items: center; }
.split > .sec-head { margin-bottom: 0; }
@media (min-width: 981px) { .split.rev > .sec-head { order: 2; } }
.fineprint { margin-top: 20px; font-size: 14px; color: var(--muted); max-width: 70ch; }
.fineprint a { color: var(--ink-2); }

/* Texture de cellules : un tableur en filigrane, derrière le haut de page */
.cells { position: relative; isolation: isolate; }
.cells::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 112px 36px; background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(110% 80% at 70% 0%, #000 15%, transparent 70%); mask-image: radial-gradient(110% 80% at 70% 0%, #000 15%, transparent 70%); }

/* ---------- Accueil : l'accroche ----------
   La date affichée par l'annonce défile, puis l'ancienneté réelle s'inscrit dans une cellule qui
   s'agrandit. Le HTML porte déjà l'état final, c'est ce qu'on voit sans script. Un court script en
   tête de l'accroche pose la classe .js avant le premier affichage (lignes masquées), puis
   accroche.js pose .play qui les fait entrer. */
.accroche { --out: cubic-bezier(.16, 1, .3, 1); --pop: cubic-bezier(.34, 1.56, .64, 1); position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: calc(100svh - 68px); overflow: hidden; line-height: 1.5; }
.accroche::before, .accroche::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.accroche.grid::before { background-image: linear-gradient(to right, rgba(21, 26, 35, .075) 1px, transparent 1px), linear-gradient(to bottom, rgba(21, 26, 35, .075) 1px, transparent 1px); background-size: 172px 46px; -webkit-mask-image: radial-gradient(115% 95% at 100% 45%, #000 0%, rgba(0, 0, 0, .5) 42%, transparent 76%); mask-image: radial-gradient(115% 95% at 100% 45%, #000 0%, rgba(0, 0, 0, .5) 42%, transparent 76%); }
.accroche.mist::after { background: radial-gradient(58% 70% at 88% 42%, rgba(35, 56, 216, .11), transparent 72%), radial-gradient(40% 46% at 4% 100%, rgba(35, 56, 216, .05), transparent 72%); }
.accroche > .wrap { width: 100%; }
.accroche .stage { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-block: 32px 24px; }
.accroche .foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; padding-block: 0 36px; }
.accroche .foot::before { content: ""; grid-column: 1 / -1; height: 1px; background: rgba(21, 26, 35, .1); margin-bottom: -6px; }
.accroche .foot h1 { font-size: clamp(20px, 2.2vw, 29px); line-height: 1.18; letter-spacing: -.025em; max-width: 30ch; }
.accroche .foot p { margin-top: 8px; font-size: 16.5px; color: var(--ink-2); }
.accroche .foot .excl { color: var(--ink); }
/* La marge basse réserve la place de la cellule agrandie (hauteur de la cellule x 0,65). Le script la recalcule. */
.accroche .say { margin-bottom: .9em; font-size: clamp(34px, 5.6vw, 80px); font-weight: 700; line-height: 1.3; letter-spacing: -.04em; }
.accroche .say > span { display: block; }
.accroche .say .dim { color: #6F7686; }
.accroche .cap { padding-top: 22px; font-size: clamp(16px, 1.6vw, 21px); color: var(--ink-2); opacity: 0; transition: opacity .6s ease; }
.accroche:not(.js) .cap, .accroche .cap.on { opacity: 1; }
.accroche.js .say > span { opacity: 0; transform: translateY(18px); }
.accroche.js .foot { opacity: 0; transform: translateY(12px); visibility: hidden; }
.accroche.play .say > span { opacity: 1; transform: none; transition: opacity .5s ease, transform .9s var(--out); }
.accroche.play .say > span:nth-child(2) { transition-delay: .08s; }
.accroche.play .say > span:nth-child(3) { transition-delay: .16s; }
.accroche.play .foot { opacity: 1; transform: none; visibility: visible; transition: opacity .6s ease .3s, transform .9s var(--out) .3s, visibility 0s; }

/* Roues : une bande de libellés qui défile derrière un masque, doublée d'une copie floutée pour la vitesse */
.accroche .reel { position: relative; display: inline-block; box-sizing: content-box; padding: 0 .08em; margin-inline: -.08em; vertical-align: baseline; -webkit-mask-image: linear-gradient(transparent, #000 .1em, #000 calc(100% - .1em), transparent); mask-image: linear-gradient(transparent, #000 .1em, #000 calc(100% - .1em), transparent); transition: width .45s var(--out); }
.accroche .reel .ghost { visibility: hidden; white-space: nowrap; }
.accroche .reel .meas { position: absolute; left: 0; top: 0; visibility: hidden; white-space: nowrap; }
.accroche .reel .strip { position: absolute; left: .08em; right: .08em; top: 0; }
.accroche .reel .strip.soft { opacity: 0; }
.accroche .reel .bl { display: block; }
.accroche .reel .strip > span, .accroche .reel .bl > span { display: block; text-align: center; white-space: nowrap; }

/* La pastille de date de l'annonce */
.accroche .badge { position: relative; isolation: isolate; display: inline-block; margin-left: .3em; padding: .34em .85em; border-radius: 999px; background: var(--surface-2); color: #3D4852; font-size: .5em; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; vertical-align: .24em; white-space: nowrap; }
.accroche .badge .fg { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--fresh-bg); opacity: .7; }
.accroche .icw { position: relative; display: inline-block; width: .92em; height: .92em; margin-right: .4em; vertical-align: -.13em; }
.accroche .icw svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.accroche .icw .g0 { color: #8A919E; }
.accroche .icw .g1 { color: var(--fresh); opacity: .7; }
.accroche .bub { position: absolute; top: -.72em; right: -.72em; min-width: 1.6em; height: 1.6em; padding: 0 .32em; border-radius: 999px; background: var(--blue); color: #fff; font-size: .8em; font-weight: 700; line-height: 1.6; text-align: center; box-shadow: 0 0 0 .16em #fff; transform: scale(0); transition: transform .55s var(--pop); }
.accroche:not(.js) .bub, .accroche .bub.on { transform: none; }

/* La cellule. Sans script, elle est déjà agrandie. */
.accroche .box { position: relative; display: inline-block; padding: .05em .22em .13em; border: .055em solid var(--ink); background: #fff; color: var(--blue); line-height: 1.1; white-space: nowrap; transform-origin: 0 0; }
.accroche:not(.js) .box { transform: scale(1.65); }
.accroche .hd { position: absolute; right: -.15em; bottom: -.15em; width: .2em; height: .2em; background: var(--blue); box-shadow: 0 0 0 .04em #fff; transition: transform .35s var(--pop); }
.accroche .hd.hot { transform: scale(1.5); }
.accroche .cursor { position: absolute; left: 0; top: 0; z-index: 5; opacity: 0; pointer-events: none; }
.accroche .cursor svg { display: block; margin: -2px 0 0 -3px; transform-origin: 3px 2px; transition: transform .22s var(--out); }
.accroche .cursor.down svg { transform: scale(.86); }

@media (max-width: 760px) { .accroche .foot { grid-template-columns: minmax(0, 1fr); } }
/* Petits écrans : la phrase, le titre, la ligne d'exclusivité et le bouton tiennent dans le premier écran (360 x 640). */
@media (max-width: 560px) {
  .accroche .stage { padding-block: 20px 12px; }
  .accroche .say { font-size: clamp(28px, 8vw, 34px); }
  .accroche .cap { padding-top: 14px; }
  .accroche .foot { gap: 16px; padding-block: 0 20px; }
  .accroche .foot p { font-size: 15.5px; }
}
.showcase { position: relative; margin-top: 0; padding-top: clamp(44px, 5.5vw, 72px); }
.showcase::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: var(--surface); z-index: -1; }
.showcase-foot { padding-block: 22px clamp(64px, 8vw, 96px); background: var(--surface); }
.showcase-foot .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px 32px; flex-wrap: wrap; }
.showcase-foot p { font-size: 15px; color: var(--muted); max-width: 62ch; }

/* ---------- Classeur ----------
   Une fenêtre Excel sur macOS, aux couleurs du site (variante « Ardoise ») : en-têtes
   gris ardoise, onglets et repères à l'encre, sélection cobalt, dégradé de cobalts pour les
   scores. Toutes les couleurs du tableur sont des variables --xl-* : changer de jeu ne touche
   qu'à ce bloc. */
.frame { background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }
.book {
  --xl-font: var(--font); --xl-text: #1C2130;
  --xl-grid: #E1E4E9; --xl-zebra: #F7F8FA; --xl-head: #F1F2F5; --xl-head-fg: #626978;
  --xl-accent: #2338D8; --xl-chrome: var(--ink); --xl-on: #E2E4E9;
  --xl-title: #2A3140; --xl-hdr-bg: #2A3140; --xl-hdr-fg: #fff; --xl-hdr-line: #3B4456; --xl-hdr-under: transparent;
  --xl-s1: #C3CBF5; --xl-s1-fg: #17238F; --xl-s2: #E1E5FA; --xl-s2-fg: #2338D8; --xl-s3: #F4F5F7; --xl-s3-fg: #3A414F;
  --xl-bar: linear-gradient(90deg, #AEB8F2, #EEF0FD); --xl-bar-fg: inherit;
  border-radius: 12px; border-color: rgba(0, 0, 0, .18);
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .12), 0 22px 70px -12px rgba(21, 26, 35, .38), 0 8px 24px -8px rgba(21, 26, 35, .18);
  font-family: var(--xl-font); font-size: 13px; color: var(--xl-text); }
.titlebar { position: relative; display: flex; align-items: center; height: 38px; padding: 0 14px; background: linear-gradient(#F6F6F6, #E9E9E9); border-bottom: 1px solid #D1D1D1; }
.titlebar .dots { display: flex; gap: 8px; }
.titlebar .dots i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .18); }
.titlebar .dots i:nth-child(1) { background: #FF5F57; } .titlebar .dots i:nth-child(2) { background: #FEBC2E; } .titlebar .dots i:nth-child(3) { background: #28C840; }
.fname { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: #3C3C3C; white-space: nowrap; }
.fname::before { content: "X"; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 3px; background: var(--xl-chrome); color: #fff; font-size: 10px; font-weight: 700; }
.tb-right { margin-left: auto; padding: 2px 8px; border-radius: 5px; background: rgba(0, 0, 0, .06); font-size: 11.5px; color: #555; }
.ribbon { display: flex; gap: 20px; padding: 0 16px; background: #F3F3F3; border-bottom: 1px solid #DADADA; font-size: 12.5px; color: #444; overflow: hidden; white-space: nowrap; }
.ribbon span { padding: 8px 0 7px; border-bottom: 2px solid transparent; }
.ribbon span:first-child { color: var(--xl-chrome); font-weight: 600; border-bottom-color: var(--xl-chrome); }
.fbar { display: grid; grid-template-columns: 76px 34px minmax(0, 1fr); align-items: center; padding: 5px 8px; gap: 6px; background: #fff; border-bottom: 1px solid #DADADA; }
.fbar > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fbar .ref { padding: 3px 8px; border: 1px solid #D0D0D0; border-radius: 4px; font-size: 12.5px; }
.fbar .fx { color: #777; font-style: italic; text-align: center; font-family: Georgia, serif; }
.fbar .val { padding: 3px 8px; border-left: 1px solid #E2E2E2; }
.fbar .val.locked { color: var(--muted); }
.scroller { position: relative; overflow: auto; max-height: 470px; background: #fff; }
table.sheet { border-collapse: separate; border-spacing: 0; min-width: 100%; font-variant-numeric: tabular-nums; }
.sheet th, .sheet td { height: 30px; padding: 0 10px; border-right: 1px solid var(--xl-grid); border-bottom: 1px solid var(--xl-grid); background: #fff; text-align: left; white-space: nowrap; }
.sheet thead th { position: sticky; top: 0; z-index: 3; height: 22px; background: var(--xl-head); color: var(--xl-head-fg); font-size: 11.5px; font-weight: 400; text-align: center; border-color: #CFCFCF; }
.sheet .rn { position: sticky; left: 0; z-index: 2; width: 42px; min-width: 42px; padding: 0; background: var(--xl-head); color: #555; font-size: 11.5px; text-align: center; border-color: #CFCFCF; }
.sheet .frz { position: sticky; left: 42px; z-index: 1; box-shadow: 1.5px 0 0 #A6A6A6; }
.sheet thead th.rn, .sheet thead th.frz { z-index: 4; }
.sheet th.on, .sheet td.rn.on { background: var(--xl-on); color: var(--xl-chrome); font-weight: 600; box-shadow: inset 0 -2px 0 var(--xl-chrome); }
.sheet td.rn.on { box-shadow: inset -2px 0 0 var(--xl-chrome); }
.sheet tr.title td { height: 34px; font-size: 16px; font-weight: 700; color: var(--xl-title); border-right-color: transparent; }
.sheet tr.sub td { font-style: italic; color: #595959; border-right-color: transparent; }
.sheet tr.hdr td { height: 40px; min-width: 110px; background: var(--xl-hdr-bg); color: var(--xl-hdr-fg); font-size: 12px; font-weight: 700; line-height: 1.25; white-space: normal; border-color: var(--xl-hdr-line); box-shadow: inset 0 -2px 0 var(--xl-hdr-under); }
.sheet tr.title td.rn, .sheet tr.sub td.rn { font-size: 11.5px; font-weight: 400; font-style: normal; color: #555; border-right-color: #CFCFCF; }
.sheet tr.hdr td.rn { background: var(--xl-head); color: #555; font-weight: 400; border-color: #CFCFCF; }
.lock { width: 10px; height: 10px; margin-left: 5px; vertical-align: -1px; opacity: .75; }
.sheet tr.data:nth-child(even) td:not(.rn) { background: var(--xl-zebra); }
.sheet td.data-cell { cursor: cell; }
.sheet td.sel { position: relative; z-index: 2; outline: 2px solid var(--xl-accent); outline-offset: -2px; }
.sheet td.sel::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 6px; height: 6px; background: var(--xl-accent); border: 1px solid #fff; }
.sheet td.locked, .sheet tr.data:nth-child(even) td.locked { background: repeating-linear-gradient(135deg, #fff 0 6px, #F1F2F4 6px 12px); }
.blur { filter: blur(4.5px); user-select: none; font-weight: 600; }
.bar { position: relative; display: flex; align-items: center; min-width: 110px; height: 30px; }
.bar .fill { position: absolute; left: -6px; top: var(--xl-bar-top, 6px); bottom: 6px; background: var(--xl-bar); border-radius: 1px; }
.bar b { position: relative; font-weight: 400; color: var(--xl-bar-fg); }
.sheet td.age .bar b { color: var(--blue); font-weight: 700; }
.sheet td.s1 { background: var(--xl-s1) !important; color: var(--xl-s1-fg); font-weight: 700; }
.sheet td.s2 { background: var(--xl-s2) !important; color: var(--xl-s2-fg); font-weight: 700; }
.sheet td.s3 { background: var(--xl-s3) !important; color: var(--xl-s3-fg); font-weight: 700; }
.muted { color: var(--muted); }
.veil { position: sticky; left: 0; bottom: 0; z-index: 5; height: 110px; margin-top: -110px; pointer-events: none; background: linear-gradient(rgba(255, 255, 255, 0), #fff); }
.tabs { display: flex; align-items: stretch; gap: 0; padding: 0 8px; background: #F3F3F3; border-top: 1px solid #D0D0D0; overflow-x: auto; }
.tabs button { position: relative; padding: 8px 16px; border: 0; border-right: 1px solid #DADADA; background: none; font: inherit; font-size: 12.5px; color: #444; white-space: nowrap; cursor: pointer; transition: color .15s ease, background-color .15s ease; }
.tabs button:hover { background: #EAEAEA; }
.tabs button[aria-selected="true"] { background: #fff; color: var(--xl-chrome); font-weight: 600; box-shadow: inset 0 -2px 0 var(--xl-chrome); }
.panel-locked { display: grid; place-content: center; justify-items: center; gap: 8px; min-height: 360px; padding: 48px 24px; text-align: center; background: repeating-linear-gradient(135deg, #fff 0 8px, #F4F5F7 8px 16px); }
.panel-locked h3 { font-family: var(--font); font-size: 18px; color: var(--ink); }
.panel-locked p { max-width: 52ch; color: var(--muted); font-size: 14.5px; }
.panel-notice { min-height: 360px; padding: 20px 24px; }
.panel-notice h3 { margin-bottom: 12px; padding: 6px 10px; background: var(--xl-hdr-bg); color: var(--xl-hdr-fg); font-size: 13px; }
.panel-notice dl { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 0; max-width: 760px; margin: 0; font-size: 13px; border-top: 1px solid var(--xl-grid); border-left: 1px solid var(--xl-grid); }
.panel-notice dt, .panel-notice dd { margin: 0; padding: 7px 10px; border-right: 1px solid var(--xl-grid); border-bottom: 1px solid var(--xl-grid); }
.panel-notice dt { font-weight: 700; }

/* ---------- Ce que vous recevez ---------- */
.benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.benefit { display: grid; grid-template-rows: auto 1fr; gap: 24px; padding: 28px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); }
.benefit .text { display: grid; gap: 8px; align-content: start; }
.benefit p { color: var(--ink-2); font-size: 16px; }
.sample { display: grid; gap: 10px; align-content: center; min-height: 112px; padding: 18px; border-radius: var(--r); background: var(--surface); font-size: 13.5px; }
.sample .row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sample .k { color: var(--muted); }
.sample .v { font-weight: 700; }
.sample .cell-fig { font-size: 1.3em; }
.sample .person { display: flex; align-items: center; gap: 12px; }
.sample .avatar { width: 36px; height: 36px; border-radius: 9px; background: var(--surface-2); flex: none; }
.sample .quote { padding: 12px 14px; border-radius: var(--r-sm); background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.pill { display: inline-block; padding: 2px 8px; border-radius: 5px; font-size: 12px; font-weight: 700; color: var(--ink); }
.pill.t1 { background: #C3CBF5; color: #17238F; } .pill.t2 { background: #E1E5FA; color: #2338D8; } .pill.t3 { background: #F4F5F7; color: #3A414F; }
.sample .ranks { display: grid; gap: 6px; }
.sample .ranks div { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 12px; align-items: center; }

/* ---------- Exclusivité ---------- */
.slots { padding: 8px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.slots-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 16px 12px; }
.slots-head b { font-size: 15px; }
.slots-head span { font-size: 13px; color: var(--muted); }
.slot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px; border-radius: var(--r); background: var(--surface); }
.slot + .slot { margin-top: 6px; }
.slot b { display: inline-block; margin-bottom: 6px; font-size: 16px; }
.slot small { display: block; font-size: 13.5px; color: var(--muted); }
.slot .state { font-size: 12.5px; font-weight: 700; padding: 4px 9px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); white-space: nowrap; }
.slots-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; padding: 16px 16px 10px; font-size: 14.5px; color: var(--ink-2); }
.slots-foot p { flex: 1 1 220px; }

/* ---------- Preuve ---------- */
.stats { border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); overflow: hidden; }
.stat { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 8px 24px; align-items: center; padding: 26px 28px; }
.stat + .stat { border-top: 1px solid var(--line); }
.stat b { color: var(--blue); font-size: 42px; font-weight: 700; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat .meter { height: 6px; margin-bottom: 10px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.stat .meter i { display: block; height: 100%; border-radius: 99px; background: var(--blue); }
.stat p { font-size: 15px; color: var(--ink-2); }
.since { padding: 18px 28px; border-top: 1px solid var(--line); background: var(--surface); font-size: 15px; color: var(--ink-2); }
.since b { color: var(--ink); }

/* ---------- Filtre des intermédiaires ---------- */
.sieve { display: grid; gap: 4px; margin: 0; padding: 8px; list-style: none; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); }
.sieve li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 16px; border-radius: var(--r-sm); font-weight: 500; }
.sieve li.out { color: var(--muted); }
.sieve li.out > span:first-child { text-decoration: line-through; text-decoration-color: var(--muted); text-decoration-thickness: 2px; }
.sieve li.in { background: var(--surface); color: var(--ink); font-weight: 700; }
.tag { flex: none; padding: 3px 8px; border-radius: 6px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.tag.out { color: var(--muted); background: var(--surface-2); }
.tag.in { color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); }

/* ---------- Deux métiers ---------- */
.doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.door { display: grid; grid-template-rows: auto auto 1fr auto; gap: 14px; padding: 32px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease; }
.door:hover { border-color: var(--line-3); box-shadow: var(--shadow); }
.door .scope { display: flex; flex-wrap: wrap; gap: 6px; }
.door h3 { font-size: 25px; letter-spacing: -.03em; }
.door p { color: var(--ink-2); }
.go { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.go::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 1.75px 1.75px 0 0; transform: rotate(45deg); transition: transform .2s var(--ease-out); }
.door:hover .go::after { transform: translateX(3px) rotate(45deg); }

/* ---------- Fondateurs ---------- */
.team { align-items: center; }
.people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.person img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-lg); background: var(--surface-2); }
.person h3 { margin-top: 14px; font-size: 17px; }
.person p { font-size: 14.5px; color: var(--muted); }

/* ---------- Appel final et formulaires ---------- */
.final { border-top: 1px solid var(--line); }
.final-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(40px, 6vw, 80px); align-items: start; }
.final-title { font-size: clamp(34px, 4.4vw, 54px); line-height: 1.04; letter-spacing: -.04em; max-width: 14ch; }
.checks { display: grid; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; max-width: 48ch; }
.checks li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; color: var(--ink-2); }
.checks li::before { content: ""; width: 8px; height: 8px; margin: 9px 0 0 4px; border-radius: 2px; background: var(--ink); }
.final-note { margin-top: 28px; padding: 16px 18px; border-radius: var(--r); background: var(--surface); font-size: 15px; color: var(--ink-2); max-width: 52ch; }
.final-note b { color: var(--ink); }
.final-alt { display: grid; gap: 6px; margin-top: 24px; font-size: 15px; color: var(--muted); }
.final-alt b { color: var(--ink); user-select: all; }
.final-alt a { color: var(--ink-2); text-underline-offset: 4px; }

.lead-form { display: grid; gap: 18px; padding: 28px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.lead-form h3 { font-size: 20px; letter-spacing: -.02em; }
.lead-form .sub { margin-top: -12px; font-size: 14.5px; color: var(--muted); }
.field { display: grid; gap: 6px; }
.field label, .field legend { padding: 0; font-size: 14px; font-weight: 700; }
.field input, .field textarea { width: 100%; padding: 0 12px; height: 46px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: #fff; color: var(--ink); font: inherit; font-size: 16px; transition: border-color .15s ease, box-shadow .15s ease; }
.field textarea { height: auto; min-height: 120px; padding: 12px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #767C88; }
.field input:hover, .field textarea:hover { border-color: var(--line-3); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(21, 26, 35, .1); }
.field input[aria-invalid="true"] { border: 2px solid var(--ink); }
.field .err { font-size: 13.5px; color: var(--ink); }
fieldset.field { margin: 0; padding: 0; border: 0; min-width: 0; }
.seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: var(--r-sm); background: var(--surface); }
.seg label { position: relative; display: flex; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { flex: 1; padding: 9px 8px; border-radius: 6px; text-align: center; font-size: 14px; font-weight: 500; color: var(--ink-2); transition: background-color .15s ease, box-shadow .15s ease, color .15s ease; }
.seg label:hover span { color: var(--ink); }
.seg input:checked + span { background: #fff; color: var(--ink); font-weight: 700; box-shadow: var(--shadow-sm), 0 0 0 1px var(--line-2); }
.seg input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.lead-form button[type="submit"] { width: 100%; height: 50px; }
.lead-form .fine { font-size: 13px; line-height: 1.5; color: var(--muted); }
.lead-form .fine a { color: var(--ink-2); }
.lead-form .done { padding: 12px 14px; border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font-size: 14.5px; box-shadow: inset 0 0 0 1px var(--line-2); }

/* ---------- Pied de page ---------- */
footer { border-top: 1px solid var(--line); background: var(--surface); padding-block: 56px 28px; font-size: 14.5px; color: var(--muted); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.foot-brand p { margin-top: 14px; max-width: 32ch; color: var(--ink-2); }
.foot-col h4 { margin-bottom: 12px; font-size: 14px; color: var(--ink); }
.foot-col ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
footer a { text-decoration: none; transition: color .15s ease; }
footer a:hover { color: var(--ink); }
.foot-legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; }
.foot-legal a { text-decoration: underline; text-underline-offset: 3px; }

/* =====================================================================
   Pages intérieures
   ===================================================================== */
.page-hero { padding-block: clamp(48px, 7vw, 96px) clamp(56px, 7vw, 96px); }
.page-hero .wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px 72px; align-items: center; }
.page-hero.solo .wrap { grid-template-columns: minmax(0, 1fr); gap: 20px; }

/* Étapes : une vraie séquence dans le temps */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { position: relative; display: grid; gap: 10px; align-content: start; padding: 28px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); counter-increment: step; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 6px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 15px; font-weight: 700; }
.steps .when { font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.steps p { color: var(--ink-2); font-size: 16px; }
.page-hero .copy { display: grid; gap: 22px; align-content: start; }
.page-title { font-size: clamp(36px, 4.8vw, 58px); line-height: 1.05; letter-spacing: -.04em; max-width: 18ch; }
.page-lead { font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 50ch; }
.page-title .cell-fig { margin-right: .06em; letter-spacing: -.02em; }
.page-hero .excl { font-size: 17px; }
.page-hero .ctas { margin-top: 4px; }

/* Une ligne de l'onglet « Appels », montrée en exemple */
.callcard { padding: 22px; display: grid; gap: 14px; font-size: 14px; }
.callcard .top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.callcard dl { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 10px 14px; margin: 0; }
.callcard dt { color: var(--muted); }
.callcard dd { margin: 0; font-weight: 500; }
.callcard .quote { padding: 12px 14px; border-radius: var(--r-sm); background: var(--surface); color: var(--ink-2); line-height: 1.5; }
.callcard .cap { font-size: 12.5px; color: var(--muted); }

/* Ordres de grandeur */
.econ { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); overflow: hidden; }
.econ > div { display: grid; gap: 8px; padding: 32px; align-content: start; }
.econ > div + div { border-left: 1px solid var(--line); }
.econ .fig { font-size: clamp(36px, 4.4vw, 52px); font-weight: 700; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.econ .cap { font-weight: 700; }
.econ p { color: var(--ink-2); font-size: 16px; max-width: 42ch; }

/* Liste de caractéristiques */
.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 64px; border-top: 1px solid var(--line-2); }
.feature { display: grid; gap: 8px; padding-block: 28px; border-bottom: 1px solid var(--line); align-content: start; }
.feature h3 { display: flex; align-items: baseline; gap: 12px; font-size: 20px; letter-spacing: -.02em; }
.feature h3::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--ink); transform: translateY(-2px); }
.feature p { padding-left: 20px; color: var(--ink-2); font-size: 16px; max-width: 52ch; }

/* Bandeau d'exclusivité */
.excl-band { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px 64px; align-items: center; padding: clamp(28px, 4vw, 48px); border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.excl-band h2 { font-size: clamp(26px, 3vw, 36px); }
.excl-band .copy { display: grid; gap: 14px; }
.excl-band .copy p { color: var(--ink-2); }

/* Questions fréquentes */
.faq { max-width: 820px; border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { position: relative; padding: 22px 48px 22px 0; font-size: 18px; font-weight: 700; letter-spacing: -.015em; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: linear-gradient(var(--ink), var(--ink)) center / 14px 2px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 2px 14px no-repeat; transition: transform .25s var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 24px; color: var(--ink-2); max-width: 64ch; }
.faq details a { color: var(--ink); }

/* Méthode : étapes (une vraie séquence) */
.chapters { display: grid; gap: 0; border-top: 1px solid var(--line-2); }
.chapter { display: grid; grid-template-columns: 64px minmax(0, 1.2fr) minmax(0, .8fr); gap: 16px 48px; padding-block: 36px; border-bottom: 1px solid var(--line); align-items: start; }
.chapter .n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--blue); color: #fff; font-weight: 700; }
.chapter h2 { margin-bottom: 8px; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -.03em; }
.chapter p { color: var(--ink-2); max-width: 56ch; }
.chapter aside { padding: 16px 18px; border-radius: var(--r); background: var(--surface); font-size: 14.5px; color: var(--ink-2); }
.chapter aside .fig { display: block; margin-bottom: 4px; font-size: 30px; font-weight: 700; letter-spacing: -.04em; line-height: 1.1; color: var(--blue); }
.chapter aside a { color: var(--ink); }

/* Contact */
.who { display: grid; grid-template-columns: repeat(2, minmax(0, 150px)); gap: 16px; }
.who figure { display: grid; gap: 8px; margin: 0; }
.who img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); background: var(--surface-2); }
.who figcaption { font-size: 14.5px; font-weight: 700; }
.ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.way { display: grid; gap: 12px; align-content: start; padding: 28px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); scroll-margin-top: 100px; }
.way p { color: var(--ink-2); }
.way .addr { font-size: 22px; font-weight: 700; letter-spacing: -.02em; user-select: all; }
.way .btn { justify-self: start; }

/* Pages légales */
.legal { max-width: 760px; }
.legal h2 { margin: 48px 0 12px; font-size: 24px; letter-spacing: -.025em; }
.legal h2:first-of-type { margin-top: 0; }
.legal p, .legal li { color: var(--ink-2); }
.legal p { margin-bottom: 14px; }
.legal ul { display: grid; gap: 6px; margin: 0 0 14px; padding-left: 22px; }
.legal b { color: var(--ink); }
.legal dl { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 10px 24px; margin: 0; font-size: 16px; }
.legal dt { color: var(--muted); } .legal dd { margin: 0; }
.legal a { color: var(--ink); }
.draft { margin-bottom: 40px; padding: 14px 18px; border-radius: var(--r); background: #FFF8E1; color: #6B5310; font-size: 15px; box-shadow: inset 0 0 0 1px #F2E2A8; }
.request { max-width: 620px; box-shadow: var(--shadow-sm); }
.request .seg { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* =====================================================================
   Mouvement
   Une seule séquence, à l'arrivée en haut de page. Le reste ne bouge
   qu'en réponse à une action.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .enter { animation: enter .6s var(--ease-out) both; animation-delay: var(--d, 0ms); }
  @keyframes enter { from { opacity: 0; transform: translateY(8px); } }
  .lead-form .done:not([hidden]) { animation: enter .35s var(--ease-out) both; }
  .faq details::details-content { transition: height .3s var(--ease-out), content-visibility .3s allow-discrete; height: 0; overflow: clip; }
  .faq details[open]::details-content { height: auto; }
  :root { interpolate-size: allow-keywords; }
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
}
/* L'accroche pose ses transitions hors de ce bloc (le script en règle certaines en ligne) : on les coupe ici. */
@media (prefers-reduced-motion: reduce) {
  .accroche .say > span, .accroche .foot, .accroche .cap, .accroche .bub, .accroche .hd, .accroche .reel { transition: none !important; }
}

/* =====================================================================
   Adaptation aux écrans
   ===================================================================== */
@media (max-width: 980px) {
  .split, .final-grid, .page-hero .wrap, .excl-band { grid-template-columns: minmax(0, 1fr); }
  .chapter { grid-template-columns: 48px minmax(0, 1fr); }
  .chapter aside { grid-column: 2; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  .links { display: none; }
  .menu-btn { display: inline-flex; align-items: center; }
  .nav { gap: 16px; }
  .nav-end { gap: 8px; }
  .nav.open { flex-wrap: wrap; height: auto; padding-block: 15px 14px; }
  .nav.open .links { display: grid; order: 3; width: 100%; gap: 0; font-size: 17px; }
  .nav.open .links a { padding-block: 12px; border-top: 1px solid var(--line); }
  .nav.open .links a[aria-current="page"]::after { display: none; }
  .nav.open .links a[aria-current="page"] { font-weight: 700; }
  footer li a { display: inline-block; padding-block: 6px; }
  .benefits, .doors, .ways, .features, .econ, .steps { grid-template-columns: minmax(0, 1fr); }
  .econ > div + div { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 360px) { .nav-end .btn { display: none; } }
@media (max-width: 560px) {
  body { font-size: 16px; }
  .lead, .page-lead { font-size: 17px; }
  .stat { grid-template-columns: minmax(0, 1fr); padding: 22px; }
  .since { padding: 18px 22px; }
  .fname span, .tb-right { display: none; }
  .benefit, .door { padding: 22px; }
  .callcard dl, .panel-notice dl, .legal dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .callcard dd, .panel-notice dd, .legal dd { margin-bottom: 8px; }
  .sheet .frz { position: static; box-shadow: none; }
  .request .seg { grid-template-columns: minmax(0, 1fr); }
  .people { gap: 12px; }
  .slot { grid-template-columns: minmax(0, 1fr); }
  .slot .state { grid-column: 1; justify-self: start; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
}