/* Hypra site shell, 30.09.2026: type, theme tokens, top bar, footer.
   Loaded by every page. New pages (<html class="os theme-ready">) are built on it
   entirely; older pages only take the top bar and the footer from it.

   Theme: dark is the default. A page that carries .theme-ready gets data-theme
   from the inline head script (stored choice, else the system setting); the top
   bar toggle flips it and remembers the choice (js/os-theme.js). Pages without
   .theme-ready stay dark, as they were. Light = warm paper (#f6f5f2 family, as in
   Hypra Beta), accent ink; dark = near-black, accent white. */

@font-face { font-family: "Hypra Display"; src: url("/assets/fonts/hypra-display-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Hypra Sans"; src: url("/assets/fonts/c-light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Hypra Sans"; src: url("/assets/fonts/c-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Hypra Sans"; src: url("/assets/fonts/c-book.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Hypra Sans"; src: url("/assets/fonts/c-medium.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  /* the display size: the hero title, "Studio" in the closing, the pricing and FAQ titles */
  --os-f: clamp(27px, 3.76vw, 70px);
  --os-font: "Hypra Sans", ". Book", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --os-display: "Hypra Display", "Hypra Display", Georgia, serif;

  --page: #050505;
  --page-2: #0b0b0b;
  --card: #111111;
  --card-2: #191919;
  --card-3: #222222;
  --ink: #f4f3f1;
  --ink-2: rgba(244, 243, 241, 0.62);
  --ink-3: rgba(244, 243, 241, 0.42);
  --ink-4: rgba(244, 243, 241, 0.2);
  --line: rgba(244, 243, 241, 0.09);
  --line-2: rgba(244, 243, 241, 0.16);
  --accent: #f4f3f1;
  --on-accent: #0b0b0a;
  --veil: 0, 0, 0;
  --veil-max: 0.55;
  --media: #0a0a0a;
  --card-shadow: 0 0 0 1px rgba(244, 243, 241, 0.05);
  --nav-bg: rgba(5, 5, 5, 0.72);
  --irid: linear-gradient(112deg, #d9ebff -8%, #ebebeb 17%, #faffed 34%, #ededed 50%, #faffed 66%, #f9f5ff 81%, #ffe0e0 108%);
  --irid-line: linear-gradient(90deg, #cd93ff 0%, #70e2ff 20%, #9fff5b 40%, #ffe83f 60%, #ffa647 80%, #ff75c3 100%);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  /* Corners, one shape (25.10.2026, set with the tuner of /admin/ui/). Controls (buttons, fields,
     labels) are rounded to 30 % of their height: Login and Access, 11 px for 36. A surface takes
     the corner of what sits in its corner plus the gap between them, so the two curves run
     parallel: a tile is 19 = a 22 px label (7) 12 px from its edge; a panel 8 px inside a tile is 11;
     a card is 29 = a 36 px button (11) 18 px in. Circles stay round.
     Named by height: --r-40 is the corner of a 40 px control. */
  --r-22: 8px; --r-24: 8px; --r-28: 10px; --r-32: 11px; --r-36: 13px; --r-40: 14px; --r-44: 15px; --r-48: 17px; --r-52: 18px; --r-56: 20px; /* 35 % de la hauteur (réglage du 25.10) le 25.10.2026 (avant 30 %) */
  --radius-card: 31px;
  --radius-tile: 20px;
  --radius-panel: 12px;
  --gutter: 24px;
  --wrap: 1232px;
  --nav-h: 84px;
  color-scheme: dark;
}

html[data-theme="light"] {
  --page: #f6f5f2;
  --page-2: #efeee9;
  --card: #ffffff;
  --card-2: #f2f1ed;
  --card-3: #e8e6e0;
  --ink: #1b1a18;
  --ink-2: rgba(27, 26, 24, 0.64);
  --ink-3: rgba(27, 26, 24, 0.44);
  --ink-4: rgba(27, 26, 24, 0.2);
  --line: rgba(27, 26, 24, 0.09);
  --line-2: rgba(27, 26, 24, 0.16);
  --accent: #1b1a18;
  --on-accent: #f6f5f2;
  --veil: 27, 26, 24;
  --veil-max: 0.14;
  --card-shadow: 0 0 0 1px rgba(27, 26, 24, 0.05), 0 1px 2px rgba(27, 26, 24, 0.04), 0 12px 40px rgba(27, 26, 24, 0.05);
  --nav-bg: rgba(246, 245, 242, 0.76);
  color-scheme: light;
}
/* Without JS, a ready page still follows the system setting. */
@media (prefers-color-scheme: light) {
  html.theme-ready:not([data-theme]) {
    --page: #f6f5f2; --page-2: #efeee9; --card: #ffffff; --card-2: #f2f1ed; --card-3: #e8e6e0;
    --ink: #1b1a18; --ink-2: rgba(27, 26, 24, 0.64); --ink-3: rgba(27, 26, 24, 0.44); --ink-4: rgba(27, 26, 24, 0.2);
    --line: rgba(27, 26, 24, 0.09); --line-2: rgba(27, 26, 24, 0.16); --accent: #1b1a18; --on-accent: #f6f5f2;
    --veil: 27, 26, 24; --veil-max: 0.14; --nav-bg: rgba(246, 245, 242, 0.76); color-scheme: light;
  }
}

/* A surface that stays ink in both themes (the edit suite, the Motion player). */
.is-ink {
  --card: #121212;
  --card-2: #1b1b1b;
  --card-3: #252525;
  --ink: #f4f3f1;
  --ink-2: rgba(244, 243, 241, 0.62);
  --ink-3: rgba(244, 243, 241, 0.42);
  --ink-4: rgba(244, 243, 241, 0.2);
  --line: rgba(244, 243, 241, 0.09);
  --line-2: rgba(244, 243, 241, 0.16);
  --accent: #f4f3f1;
  --on-accent: #0b0b0a;
  color-scheme: dark;
}


/* Smooth flip when the visitor changes the theme (only during the switch). */
html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after {
  transition: background-color 380ms ease, color 380ms ease, border-color 380ms ease, box-shadow 380ms ease, fill 380ms ease !important;
}

/* ---------- New pages: base ---------- */
html.os { background: var(--page); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.os, html.os body { margin: 0; padding: 0; overflow-x: clip; }
html.os body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--os-font);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.45;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
}
:where(html.os) *, :where(html.os) *::before, :where(html.os) *::after { box-sizing: border-box; }
:where(html.os) :where(h1, h2, h3, h4, p, ul, ol, figure, dl, dd) { margin: 0; padding: 0; }
:where(html.os) :where(ul, ol) { list-style: none; }
:where(html.os) :where(a) { color: inherit; text-decoration: none; }
:where(html.os) :where(img, video, canvas, svg) { display: block; max-width: 100%; }
:where(html.os) :where(button, input, select, textarea) { font: inherit; color: inherit; background: none; border: 0; margin: 0; }
:where(html.os) ::selection { background: var(--ink); color: var(--page); }
:where(html.os) :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.os-btn:focus-visible, .os-theme:focus-visible, .how summary:focus-visible, .pr-toggle button:focus-visible, .calc-step:focus-visible, .mo-templates button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 999px; }
.os-wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.os-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Type: title and lede share one size, the weight and the grey make the
   difference. Body 17, fine 13. No bold in paragraphs, no caps. */
.t-display { font-size: clamp(40px, 5.6vw, 80px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 500; text-wrap: balance; }
.t-title { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.06; letter-spacing: -0.03em; font-weight: 500; text-wrap: balance; }
.t-lede { display: block; font-weight: 300; color: var(--ink-2); }
.t-body { font-size: 17px; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.t-fine { font-size: 13px; line-height: 1.45; color: var(--ink-3); text-wrap: pretty; }
.t-label { font-size: 14px; line-height: 1; font-weight: 500; letter-spacing: -0.01em; color: var(--ink-2); }
.t-num { font-variant-numeric: tabular-nums; }

/* Discreet mark for what is not out yet: one small word, never a sentence. */
.soon {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; line-height: 1; font-weight: 400; letter-spacing: 0;
  color: var(--ink-3);
}
.soon::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-4); }

/* ---------- Buttons (pills) ---------- */
.os-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px; border-radius: 11px;
  font-family: var(--os-font); font-size: 16px; font-weight: 500; letter-spacing: -0.01em; line-height: 1;
  white-space: nowrap; cursor: pointer; user-select: none;
  transition: transform 180ms var(--ease), box-shadow 200ms ease, background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.os-btn:active { transform: scale(0.97); }
.os-btn--sm { height: 32px; padding: 0 14px; font-size: 14px; }
.os-btn--primary { background: var(--irid); color: #0b0b0a; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 40px rgba(255, 255, 255, 0.16); }
.os-btn--primary:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 48px rgba(255, 255, 255, 0.26); }
/* Light: the same iridescent pill; the white glow becomes a soft coloured one. */
html[data-theme="light"] .os-btn--primary { box-shadow: inset 0 0 0 1px rgba(27, 26, 24, 0.08), 0 6px 24px rgba(170, 150, 255, 0.22), 0 2px 10px rgba(255, 170, 130, 0.14); }
html[data-theme="light"] .os-btn--primary:hover { box-shadow: inset 0 0 0 1px rgba(27, 26, 24, 0.12), 0 8px 30px rgba(170, 150, 255, 0.3), 0 2px 12px rgba(255, 170, 130, 0.2); }
.os-btn--ghost { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.os-btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
.os-btn--ink { background: var(--accent); color: var(--on-accent); }
.os-btn--ink:hover { opacity: 0.88; }
.os-link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-4); text-underline-offset: 3px; transition: text-decoration-color 200ms ease; }
.os-link:hover { text-decoration-color: var(--ink-2); }

/* ---------- Top bar: the app's header (hypra-app Navbar.tsx) ----------
   Links on the left (14 px, medium, #9F9EA1, hover white, gap 24), the logo in
   the absolute centre (28 px high), the pills on the right (height 36), padding
   24 / 40 (24 / 24 on phones), min-height 84. No background and no line, ever:
   it floats over the page, the stacked cards included. */
.os-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 84px; padding: 24px 40px;
  background: none; border: 0;
  font-family: var(--os-font);
  --nav-link: #9f9ea1;
  --nav-link-hover: #ffffff;
}
html[data-theme="light"] .os-nav { --nav-link: rgba(27, 26, 24, 0.56); --nav-link-hover: #1b1a18; }
.os-nav-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.os-nav-links { display: flex; align-items: center; gap: 24px; }
.os-nav-links a { font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: -0.005em; color: var(--nav-link); transition: color 150ms ease; text-shadow: 0 1px 14px var(--nav-halo, rgba(0, 0, 0, 0.45)); }
html[data-theme="light"] .os-nav-links a { --nav-halo: rgba(246, 245, 242, 0.7); }
.os-nav-links a:hover, .os-nav-links a[aria-current="page"] { color: var(--nav-link-hover); }
.os-logo { display: block; height: 28px; width: auto; color: var(--ink); }
.os-nav .os-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.os-logo svg { display: block; height: 100%; width: auto; aspect-ratio: 1026 / 455; }
.os-logo svg path { fill: currentColor; }
.os-nav-actions { display: flex; align-items: center; gap: 8px; }
/* pills, height 36 like the app's */
.os-pill {
  display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 16px; border-radius: var(--r-36);
  font-family: var(--os-font); font-size: 14px; line-height: 1; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap;
  transition: box-shadow 200ms ease, background-color 200ms ease, color 200ms ease, transform 150ms var(--ease);
}
.os-pill:active { transform: scale(0.97); }
.os-pill--ghost { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.os-pill--ghost:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
/* in the bar (no background), the ghost pill and the icon keep a light glass fill
   so they stay legible over the images and cards that pass under them */
.os-nav .os-pill--ghost, .os-nav .os-theme, .os-nav .os-menu summary {
  background: color-mix(in srgb, var(--page) 40%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  /* Couche à part (26.10.2026) : le flou par-dessus les animations du site faisait clignoter
     Login par moments dans Chrome et Safari. */
  transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.os-nav .os-pill--ghost:active { transform: translateZ(0) scale(0.97); }
.os-pill--primary { color: #0b0b0a; background: var(--irid); box-shadow: 0 0 24px rgba(255, 255, 255, 0.14); }
.os-pill--primary:hover { box-shadow: 0 0 32px rgba(255, 255, 255, 0.24); }
/* Light: a solid ink pill, white text, a soft warm glow on the paper (dark keeps the iridescent pill) */
html[data-theme="light"] .os-pill--primary { color: #f6f5f2; background: #1b1a18; box-shadow: 0 1px 1px rgba(27, 26, 24, 0.16), 0 8px 20px -8px rgba(160, 104, 52, 0.5), 0 2px 10px rgba(236, 170, 110, 0.14); }
html[data-theme="light"] .os-pill--primary:hover { background: #2b2926; box-shadow: 0 1px 1px rgba(27, 26, 24, 0.18), 0 10px 26px -8px rgba(160, 104, 52, 0.58), 0 2px 12px rgba(236, 170, 110, 0.2); }
/* theme button: a small icon in the right cluster (left cluster on phones) */
.os-theme {
  display: none; width: 36px; height: 36px; border-radius: 50%;
  align-items: center; justify-content: center; cursor: pointer;
  color: var(--nav-link); background: none;
  transition: color 150ms ease, background-color 150ms ease, transform 150ms var(--ease);
}
html.theme-ready .os-theme--right { display: inline-flex; }
.os-theme:hover { color: var(--nav-link-hover); }
.os-theme:active { transform: scale(0.94); }
.os-theme svg { width: 17px; height: 17px; }
.os-theme .i-sun { display: none; }
html[data-theme="light"] .os-theme .i-sun { display: block; }
html[data-theme="light"] .os-theme .i-moon { display: none; }
/* phone menu (links do not fit next to the centred logo) */
.os-menu { display: none; position: relative; }
.os-menu summary { list-style: none; display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; padding: 0 9px; border-radius: 50%; cursor: pointer; color: var(--nav-link); }
.os-menu summary::-webkit-details-marker { display: none; }
.os-menu summary i { display: block; height: 1.5px; border-radius: 1px; background: currentColor; transition: transform 250ms var(--ease-out); }
.os-menu[open] summary i:first-child { transform: translateY(3.25px) rotate(45deg); }
.os-menu[open] summary i:last-child { transform: translateY(-3.25px) rotate(-45deg); }
.os-menu-panel { position: absolute; left: 0; top: 44px; min-width: 180px; padding: 8px; border-radius: calc(var(--r-40) + 8px); display: flex; flex-direction: column; background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 16px 40px rgba(0, 0, 0, 0.3); }
.os-menu-panel a { padding: 10px 12px; border-radius: var(--r-40); font-size: 15px; font-weight: 500; color: var(--ink); }
.os-menu-panel a:hover { background: var(--card-2); }
@media (max-width: 809.98px) {
  .os-nav { padding: 24px; }
  .os-nav-links { display: none; }
  .os-menu { display: block; }
  html.theme-ready .os-theme--left { display: inline-flex; }
  html.theme-ready .os-theme--right { display: none; }
  .os-nav .os-login { display: none; }
  .os-nav-actions { gap: 6px; }
}

/* ---------- Money-back guarantee stamp (26.10.2026) ----------
   Under the buttons that lead to a paid plan: "Access now" in the top bar, the home
   Personal and Pro cards (never Enterprise), under the home's « See pricing » (27.10, out of the footer) and the compare table; never in the top bar (26.10.2026). A small seal (a thin ring, a
   perforated inner ring, a 7 in the display face) and two lines; one click opens the
   conditions (/legals/guarantee/). On hover the seal turns like a stamp being set. */
.mbg {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--os-font); text-align: left; color: var(--ink-2);
  text-decoration: none; -webkit-tap-highlight-color: transparent;
}
/* Tampon v2 (26.10.2026) : une pièce en Hypra Sans, « MONEY-BACK GUARANTEE · 7 DAYS » écrit
   en cercle autour du 7, l'anneau de texte tourne lentement. */
.mbg-seal { flex: none; display: block; width: 32px; height: 32px; color: var(--ink-2); transition: color 200ms ease; }
.mbg-seal svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* contour extérieur en petits points espacés ; autour du 7, une nébuleuse de poussière qui part
   du chiffre et se disperse vers le texte. Tout le tampon dans le même gris (26.10.2026). */
.mbg-seal .mbg-r1 { fill: none; stroke: currentColor; stroke-width: 0.9; stroke-dasharray: 0 2.4; stroke-linecap: round; }
.mbg-seal .mbg-dust circle { fill: currentColor; }
.mbg-seal .mbg-arc { font-family: var(--os-font); font-size: 4.7px; font-weight: 500; letter-spacing: 0.04em; fill: currentColor; }
.mbg-seal .mbg-ring { transform-origin: 20px 20px; animation: mbg-turn 18s linear infinite; }
@keyframes mbg-turn { to { transform: rotate(360deg); } }
.mbg-seal .mbg-n { font-family: var(--os-font); font-weight: 500; font-size: 13px; fill: currentColor; }
.mbg-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mbg-t { font-size: 11.7px; line-height: 14px; font-weight: 500; letter-spacing: -0.005em; color: var(--ink-2); white-space: nowrap; transition: color 200ms ease; }
.mbg-c { font-size: 10.8px; line-height: 13.5px; font-weight: 400; color: var(--ink-3); white-space: nowrap; text-decoration: underline; text-decoration-color: var(--ink-4); text-underline-offset: 2px; transition: text-decoration-color 200ms ease, color 200ms ease; }
.mbg:hover .mbg-seal { color: var(--ink); }
.mbg:hover .mbg-ring { animation-duration: 6s; }
.mbg:hover .mbg-t { color: var(--ink); }
.mbg:hover .mbg-c { color: var(--ink-2); text-decoration-color: var(--ink-3); }
.mbg:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: var(--r-36); }
/* 27.10: no longer in the footer (back as it was); on the home it sits under « See pricing » (os-home.css) */
@media (prefers-reduced-motion: reduce) {
  .mbg-seal { transition: none; }
  .mbg-seal .mbg-ring { animation: none; }
}

/* ---------- Footer: the live site's footer (rebuild/site, components.css) ----------
   Product and Company, Become an Affiliate, Get Updates, the legal row with the logo
   and Instagram. Live sizes and glass cards, in the site's light and dark colours, and
   without the old 700 px minimum height (no empty band at the end of the page). */
.osf {
  --f-title: rgba(240, 240, 240, 0.96); --f-link: rgba(247, 247, 247, 0.65); --f-hover: rgba(255, 255, 255, 0.92);
  --f-muted: rgb(143, 143, 143); --f-card: rgba(48, 48, 48, 0.5); --f-ring: transparent;
  --f-field: rgba(255, 255, 255, 0.06); --f-input: #fff; --f-ph: rgb(153, 153, 153);
  --f-chip: rgb(28, 28, 28); --f-glyph: #fff; --f-glow: rgba(255, 255, 255, 0.14);
  --f-outline: #3a3a3a;
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; overflow: hidden;
  min-height: 0; padding: 48px 0; background: var(--page); color: var(--f-title); font-family: var(--os-font);
}
html[data-theme="light"] .osf {
  --f-title: rgba(27, 26, 24, 0.96); --f-link: rgba(27, 26, 24, 0.6); --f-hover: rgba(27, 26, 24, 0.92);
  --f-muted: #706d67; --f-card: rgba(255, 255, 255, 0.6); --f-ring: rgba(27, 26, 24, 0.09);
  --f-field: rgba(0, 0, 0, 0.04); --f-input: #1b1a18; --f-ph: #706d67;
  --f-chip: #fff; --f-glyph: rgba(27, 26, 24, 0.96); --f-glow: rgba(27, 26, 24, 0.1);
  --f-outline: #d3d0c9;
}
.osf .footer-shade { display: none; }
.osf .footer-inner { position: relative; z-index: 5; width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; }
.osf .footer-top { display: flex; justify-content: space-between; align-items: flex-start; }
.osf .footer-cols { display: flex; gap: 24px; }
.osf .footer-col { width: 160px; }
.osf h4 { font-family: var(--os-font); font-weight: 400; font-size: 16px; line-height: 24px; letter-spacing: -0.16px; color: var(--f-title); }
.osf .footer-col h4 { margin-bottom: 8px; }
.osf .footer-col ul { display: flex; flex-direction: column; gap: 8px; }
.osf .footer-col a, .osf .footer-legal a { font-family: var(--os-font); font-weight: 400; font-size: 16px; line-height: 24px; letter-spacing: -0.16px; color: var(--f-link); transition: color 200ms ease, text-shadow 200ms ease; }
.osf .footer-legal a { color: var(--f-title); }
.osf .footer-col a:hover, .osf .footer-legal a:hover, .osf .footer-col a:focus-visible, .osf .footer-legal a:focus-visible { color: var(--f-hover); text-shadow: 0 0 12px var(--f-glow); outline: none; }
.osf .footer-side { display: flex; gap: 16px; align-items: stretch; }
.osf .footer-affil, .osf .newsletter {
  border-radius: calc(var(--r-36) + 18px); padding: 18px; display: flex; flex-direction: column; gap: 16px;
  background-color: var(--f-card); box-shadow: inset 0 0 0 1px var(--f-ring);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.osf .footer-affil { width: 280px; max-width: 280px; }
.osf .newsletter { width: 320px; max-width: 320px; }
.osf .footer-affil p { font-family: var(--os-font); font-size: 14px; line-height: 20px; letter-spacing: -0.14px; color: var(--f-muted); }
.osf .footer-affil .btn { margin-top: auto; align-self: flex-start; padding: 5px 16px; border: 1px solid var(--f-outline); border-radius: var(--r-36); }
.osf .footer-affil .btn p { font-size: 16px; line-height: 24px; letter-spacing: -0.16px; color: var(--f-title); }
.osf .footer-affil .btn:hover { border-color: var(--f-link); box-shadow: 0 0 16px var(--f-glow); }
.osf .newsletter form { display: flex; flex-direction: column; gap: 16px; }
.osf .fields { display: flex; flex-direction: column; gap: 12px; }
.osf .field { position: relative; display: flex; align-items: center; height: 40px; padding: 0 12px; border-radius: var(--r-40); overflow: hidden; background: var(--f-field); box-shadow: inset 0 0 0 1px var(--f-ring); }
.osf .field input, .osf .field select { width: 100%; font-family: var(--os-font); font-size: 14px; line-height: 16.8px; letter-spacing: -0.14px; color: var(--f-input); background: transparent; border: 0; outline: none; }
.osf .field input::placeholder { color: var(--f-ph); opacity: 1; }
.osf .field select { -webkit-appearance: none; appearance: none; color: var(--f-ph); cursor: pointer; }
.osf .field .chevron { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.osf .field:focus-within { box-shadow: inset 0 0 0 1px var(--f-link); }
.osf .newsletter button { height: 36px; border: 0; border-radius: var(--r-36); background-color: rgba(240, 240, 240, 0.96); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: box-shadow 200ms ease; }
html[data-theme="light"] .osf .newsletter button { background-color: #1b1a18; }
.osf .newsletter button p { font-family: var(--os-font); font-weight: 500; font-size: 16px; line-height: 24px; letter-spacing: -0.48px; color: #000; }
html[data-theme="light"] .osf .newsletter button p { color: #f6f5f2; }
.osf .newsletter button:hover, .osf .newsletter button:focus-visible { box-shadow: 0 0 16px var(--f-glow); outline: none; }
.osf .newsletter button[disabled] { opacity: 0.6; cursor: default; }
.osf .newsletter-msg { margin-top: -4px; font-family: var(--os-font); font-size: 13px; line-height: 18px; color: var(--f-muted); }
.osf .footer-bottom { display: flex; align-items: center; gap: 12px; height: 48px; margin-top: clamp(72px, 12vh, 128px); }
.osf .footer-legal { flex: 1; display: flex; flex-wrap: wrap; gap: 4px 24px; }
.osf .footer-logo { display: block; width: 63px; height: 28px; }
.osf .footer-logo svg { display: block; width: 100%; height: 100%; }
.osf .footer-logo svg path { fill: var(--f-title); }
.osf .footer-social { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.osf .footer-social a { width: 48px; height: 48px; border-radius: 64px; display: flex; align-items: center; justify-content: center; overflow: hidden; background-color: var(--f-chip); box-shadow: inset 0 0 0 1px var(--f-ring); transition: box-shadow 200ms ease; }
.osf .footer-social a:hover, .osf .footer-social a:focus-visible { box-shadow: inset 0 0 0 1px var(--f-ring), 0 0 16px var(--f-glow); outline: none; }
.osf .footer-social svg { width: 16px; height: 16px; fill: var(--f-glyph); }
@media (max-width: 1199.98px) {
  .osf .footer-inner { max-width: 928px; }
  .osf .footer-side { flex-direction: column; }
  .osf .footer-affil { width: 320px; max-width: 320px; }
}
@media (max-width: 809.98px) {
  .osf { padding: 32px 0; min-height: 0; }
  .osf .footer-top { flex-direction: column; gap: 40px; }
  .osf .newsletter, .osf .footer-affil { width: 100%; max-width: none; }
  .osf .footer-side { width: 100%; }
  .osf .footer-bottom { flex-direction: column; gap: 30px; height: auto; align-items: stretch; margin-top: 48px; }
  .osf .footer-legal { flex: none; order: 0; }
  .osf .footer-social { flex: none; order: 1; justify-content: flex-end; }
  .osf .footer-logo { order: 2; align-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  .os-btn, .os-theme, .os-pill { transition: none; }
}


/* 25.10.2026 : plus de pilules (rectangles a petit arrondi) et coins lisses partout
   (superellipse 1.80 (réglage du 25.10) le 25.10.2026 à la carte ?tuner=1 ; 1 = arc de cercle, 2 = squircle iOS).
   Navigateurs sans corner-shape : arrondis classiques. */
@supports (corner-shape: superellipse(1.8)) {
  *, *::before, *::after { corner-shape: superellipse(1.8); }
}