/* ══════════════════════════════════════════════════════════════════
   Vantage RP — Site V2
   Règles : DESIGN.md (racine du repo). Skills appliqués : apple-design,
   emil-design-eng, mobile-native, animate (Downloads\skills-main).
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* Fond noir, surfaces légèrement chaudes. Violet/rose = marque, réservés au vivant et aux actions. */
  --bg: #000000;
  --tile: #111014;
  --tile-2: #1C1B20;
  --text: #F5F5F7;
  --text-2: #D2D2D7;
  --muted: #86868B;
  --line: rgba(255,255,255,.10);
  --line-2: rgba(255,255,255,.16);
  --violet: #8B5CF6;
  --violet-press: #7C4DF0;
  --violet-hi: #A78BFA;
  --pink: #EC4899;
  --amber: #F5A524;
  --green: #30D158;
  --red: #FF453A;

  /* Police système d'abord (SF Pro sur iPhone/Mac), Geist ailleurs. Jamais « SF Pro » par son nom. */
  --font: -apple-system, BlinkMacSystemFont, 'Geist', sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;

  /* Courbes fortes, jamais les courbes CSS par défaut ni ease-in */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --pill: 980px;
  --r-tile: 1.75rem;
  --r-card: 1.125rem;
  --gutter: 1.375rem;
  --wide: 64rem;
  --narrow: 42rem;
  --gnav-h: 3rem;
}

/* ── Socle (mobile-native) ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--gnav-h) + 1rem); }
body { background: var(--bg); color: var(--text); font: 100%/1.47 var(--font); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; min-height: 100svh; display: flex; flex-direction: column; }
main { flex: 1; }
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a, button, summary { touch-action: manipulation; }
.btn, .gnav a, .gnav button, .seg a, summary { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
:focus-visible { outline: 2px solid var(--violet-hi); outline-offset: 3px; border-radius: .375rem; }
.mono { font-family: var(--mono); font-feature-settings: 'tnum' 1; letter-spacing: 0; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 200; background: var(--violet); color: #fff; padding: .625rem 1rem; border-radius: var(--pill); font-size: .875rem; transition: top 160ms var(--ease-out); }
.skip:focus { top: calc(.5rem + env(safe-area-inset-top, 0px)); }

/* ══ Navigation globale : matériau translucide, contenu qui défile dessous ══ */
.gnav { position: sticky; top: 0; z-index: 60; padding-top: env(safe-area-inset-top, 0px); background: rgba(0,0,0,.72); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); }
/* Bord de défilement : fondu, pas de trait */
.gnav::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 1.25rem; background: linear-gradient(to bottom, rgba(0,0,0,.5), transparent); pointer-events: none; transition: opacity 200ms ease; }
.gnav-in { height: var(--gnav-h); max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: 2rem; font-size: .8125rem; color: var(--text-2); letter-spacing: -.003em; }
.gnav .brand { display: flex; align-items: center; gap: .5rem; color: var(--text); font-weight: 600; font-size: .9375rem; letter-spacing: -.012em; margin-right: auto; min-height: 2.75rem; }
.gnav .brand img { width: 1.5rem; height: 1.5rem; }
.gnav .links { display: flex; align-items: center; gap: 1.75rem; }
.gnav .links a { min-height: 2.75rem; display: inline-flex; align-items: center; transition: color 160ms ease; }
.gnav .links a[aria-current="page"] { color: var(--text); }
.gnav .actions { display: flex; align-items: center; gap: 1rem; margin-left: 1.5rem; }
.gnav .panel-link { color: var(--violet-hi); min-height: 2.75rem; display: inline-flex; align-items: center; }
.menu-btn { display: none; width: 2.75rem; height: 2.75rem; margin-right: -.75rem; align-items: center; justify-content: center; }
.menu-btn i { position: relative; width: 1.0625rem; height: .5625rem; }
.menu-btn i::before, .menu-btn i::after { content: ''; position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 1px; background: var(--text); transition: transform 240ms var(--ease-out); }
.menu-btn i::before { top: 0; }
.menu-btn i::after { bottom: 0; }
.menu-open .menu-btn i::before { transform: translateY(3.75px) rotate(45deg); }
.menu-open .menu-btn i::after { transform: translateY(-3.75px) rotate(-45deg); }

/* Feuille de menu mobile : descend du haut, liens en cascade de 30 ms */
.sheet { position: fixed; z-index: 55; left: 0; right: 0; top: calc(var(--gnav-h) + env(safe-area-inset-top, 0px)); bottom: 0; background: rgba(0,0,0,.94); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); padding: 1.5rem 2.5rem calc(2rem + env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transition: opacity 200ms var(--ease-out), visibility 0s linear 200ms; }
.menu-open .sheet { opacity: 1; visibility: visible; transition: opacity 240ms var(--ease-out), visibility 0s; }
.sheet a { display: block; font-size: 1.75rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; padding: .375rem 0; color: var(--text); opacity: 0; transform: translateY(-.375rem); transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
.sheet .small { margin-top: 1.75rem; }
.sheet .small a { font-size: 1.0625rem; font-weight: 500; color: var(--text-2); letter-spacing: -.01em; padding: .5rem 0; }
.menu-open .sheet a { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 30ms + 60ms); }
.menu-open { overflow: hidden; }

/* Bandeau d'annonce (configurable par le staff, /api/public-banner) */
.ribbon { display: none; background: var(--tile); text-align: center; font-size: .875rem; color: var(--text-2); padding: .875rem var(--gutter); letter-spacing: -.006em; }
.ribbon.on { display: block; }
.ribbon a { color: var(--violet-hi); white-space: nowrap; }
.ribbon b { color: var(--text); font-weight: 600; }

/* ══ Boutons et liens : réponse immédiate à l'appui, survol réservé à la souris ══ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; padding: 0 1.375rem; border-radius: var(--pill); font-size: 1.0625rem; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; transition: transform 160ms var(--ease-out), background-color 160ms ease, color 160ms ease, box-shadow 160ms ease; }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--violet); color: #fff; }
.btn.primary:active { background: var(--violet-press); }
.btn.secondary { background: var(--tile-2); color: var(--text); }
.btn.ghost { box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); }
.btn.sm { min-height: 1.75rem; padding: 0 .875rem; font-size: .8125rem; letter-spacing: -.003em; }
.btn.block { display: flex; width: 100%; }
.link { color: var(--violet-hi); font-size: 1.0625rem; letter-spacing: -.01em; display: inline-flex; align-items: center; min-height: 2.75rem; transition: opacity 160ms ease; }
.link::after { content: '\00a0›'; }
.link:active { opacity: .6; }
.link.ext::after { content: '\00a0↗'; }
@media (hover: hover) and (pointer: fine) {
  .btn.primary:hover { background: var(--violet-press); }
  .btn.secondary:hover { background: #26252B; }
  .btn.ghost:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.32); }
  .link:hover { text-decoration: underline; text-underline-offset: .2em; }
  .gnav .links a:hover, .gnav .panel-link:hover, .gfoot a:hover { color: var(--text); }
}
/* Zones tactiles de 44 px minimum (HIG) */
@media (pointer: coarse) {
  .btn.sm { min-height: 2.75rem; padding: 0 1rem; font-size: .875rem; }
  /* Barre de nav : pastille visuelle compacte, zone tactile étendue à 44 px par un pseudo-élément */
  .gnav .btn.sm { min-height: 2rem; position: relative; }
  .gnav .btn.sm::after { content: ''; position: absolute; inset: -.375rem -.25rem; }
}

/* ══ Typographie : approche négative sur les grands titres, interlignage inverse à la taille ══ */
.eyebrow { font-size: 1.3125rem; font-weight: 600; color: var(--muted); letter-spacing: .004em; }
.eyebrow.violet { color: var(--violet-hi); }
.display { font-size: clamp(3rem, 7vw, 6rem); font-weight: 700; line-height: 1.05; letter-spacing: -.028em; }
.h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 700; line-height: 1.06; letter-spacing: -.025em; }
.h2 { font-size: clamp(2rem, 4.6vw, 3.5rem); font-weight: 700; line-height: 1.08; letter-spacing: -.021em; }
.h3 { font-size: clamp(1.375rem, 2.4vw, 1.75rem); font-weight: 600; line-height: 1.17; letter-spacing: -.015em; }
.h4 { font-size: 1.1875rem; font-weight: 600; line-height: 1.26; letter-spacing: -.012em; }
.grad { background: linear-gradient(90deg, var(--violet-hi), var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.soft { color: var(--muted); }
.lede { font-size: clamp(1.1875rem, 2vw, 1.5rem); line-height: 1.33; color: var(--muted); font-weight: 500; letter-spacing: -.012em; max-width: 40rem; }
.lede b, .p b { color: var(--text); font-weight: 600; }
.p { font-size: clamp(1.0625rem, 1.6vw, 1.3125rem); line-height: 1.43; color: var(--muted); font-weight: 500; letter-spacing: -.008em; max-width: 36rem; }
.body { font-size: 1.0625rem; line-height: 1.47; letter-spacing: -.01em; color: var(--text-2); }
.caption { font-size: .875rem; line-height: 1.43; letter-spacing: -.006em; color: var(--muted); }
.center { text-align: center; }
.center .lede, .center .p { margin-left: auto; margin-right: auto; }

/* ══ Mise en page ══ */
.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }
.wrap.narrow { max-width: calc(var(--narrow) + 2 * var(--gutter)); }
.section { padding: 7.5rem 0; }
.section.tight { padding: 4.5rem 0; }
.section + .section.join { padding-top: 0; }
.page-hero { padding: 5.5rem 0 3.5rem; text-align: center; }
.page-hero .h1 { margin-top: .375rem; }
.page-hero .lede { margin: 1.125rem auto 0; }
.ctas { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .75rem 1.5rem; margin-top: 2rem; }
.ctas.left { justify-content: flex-start; }
.stack > * + * { margin-top: 1rem; }
.grid { display: grid; gap: 1.25rem; }
.grid.c2 { grid-template-columns: repeat(2, 1fr); }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
.grid.c4 { grid-template-columns: repeat(4, 1fr); }
.mt-s { margin-top: 1rem; } .mt-m { margin-top: 2rem; } .mt-l { margin-top: 3.5rem; }

/* ══ Tuiles et cartes ══ */
.tile { background: var(--tile); border-radius: var(--r-tile); padding: 2.25rem; position: relative; overflow: hidden; }
.tile .k { font-size: 1.0625rem; font-weight: 600; color: var(--muted); letter-spacing: -.008em; }
.tile .big { font-size: 2.5rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.08; margin-top: .5rem; }
.tile .num { font-family: var(--mono); font-feature-settings: 'tnum' 1; font-size: 4.5rem; font-weight: 500; letter-spacing: -.04em; line-height: 1; margin-top: 1.125rem; }
.tile .num small { font-size: 1.375rem; color: var(--muted); letter-spacing: 0; font-family: var(--font); font-weight: 500; }
.tile .sub { font-family: var(--mono); font-size: .9375rem; color: var(--muted); margin-top: .625rem; }
.tile p { color: var(--muted); font-size: 1.0625rem; line-height: 1.47; letter-spacing: -.01em; margin-top: .75rem; }
.tile p b { color: var(--text); font-weight: 600; }
.tile.media { display: flex; flex-direction: column; padding-bottom: 0; }
.tile.media > img { margin: auto -2.25rem 0 auto; padding-top: 1.75rem; width: 80%; border-radius: 1.125rem 0 0 0; box-sizing: content-box; }
.tile.media > img.full { margin: auto -2.25rem 0; width: calc(100% + 4.5rem); border-radius: 0; }
.tile.phone-shot > img { width: 14rem; margin: 2rem auto -6rem; border-radius: 2.25rem; padding: 0; }
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.25rem; }
.bento .w2 { grid-column: span 2; } .bento .w3 { grid-column: span 3; } .bento .w4 { grid-column: span 4; } .bento .w6 { grid-column: span 6; }
.bento .tile { min-height: 18.75rem; }
.ac-violet { color: var(--violet-hi); } .ac-pink { color: var(--pink); } .ac-amber { color: var(--amber); } .ac-green { color: var(--green); }

.card { background: var(--tile); border-radius: var(--r-card); padding: 1.75rem; display: flex; flex-direction: column; gap: .5rem; position: relative; }
.card .ico { width: 2.5rem; height: 2.5rem; border-radius: .75rem; display: grid; place-items: center; font-size: 1.25rem; background: var(--tile-2); margin-bottom: .5rem; }
.card h3 { font-size: 1.1875rem; font-weight: 600; letter-spacing: -.012em; line-height: 1.26; }
.card p { color: var(--muted); font-size: 1rem; line-height: 1.47; letter-spacing: -.008em; }
.card .link { margin-top: auto; font-size: 1rem; min-height: 2.25rem; }
a.card, a.tile { transition: transform 160ms var(--ease-out), background-color 160ms ease; }
a.card:active, a.tile:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { a.card:hover { background: #17161B; } }

.badge { display: inline-flex; align-items: center; gap: .375rem; height: 1.5rem; padding: 0 .625rem; border-radius: var(--pill); font-size: .75rem; font-weight: 600; letter-spacing: .01em; background: var(--tile-2); color: var(--text-2); white-space: nowrap; }
.badge.violet { background: rgba(139,92,246,.16); color: var(--violet-hi); }
.badge.green { background: rgba(48,209,88,.14); color: var(--green); }
.badge.amber { background: rgba(245,165,36,.14); color: var(--amber); }
.badge.pink { background: rgba(236,72,153,.14); color: var(--pink); }
.dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--muted); flex: none; }
.dot.ok { background: var(--green); } .dot.warn { background: var(--amber); } .dot.err { background: var(--red); }

/* ══ Tarifs ══ */
.price { background: var(--tile); border-radius: var(--r-tile); padding: 2.25rem; display: flex; flex-direction: column; }
.price.hl { box-shadow: inset 0 0 0 1.5px var(--violet); background: linear-gradient(180deg, rgba(139,92,246,.10), var(--tile) 45%); }
.price .name { font-size: 1.3125rem; font-weight: 600; letter-spacing: -.015em; display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.price .amount { font-family: var(--mono); font-feature-settings: 'tnum' 1; font-size: 3rem; font-weight: 500; letter-spacing: -.04em; line-height: 1; margin-top: 1.25rem; }
.price .amount small { font-family: var(--font); font-size: 1rem; color: var(--muted); letter-spacing: -.01em; font-weight: 500; margin-left: .25rem; }
.price .desc { color: var(--muted); font-size: 1rem; line-height: 1.47; margin-top: .875rem; letter-spacing: -.008em; }
.price ul { list-style: none; margin: 1.5rem 0 2rem; display: grid; gap: .625rem; font-size: 1rem; letter-spacing: -.008em; color: var(--text-2); }
.price li { display: grid; grid-template-columns: 1.25rem 1fr; gap: .5rem; line-height: 1.4; }
.price li::before { content: ''; width: 1rem; height: 1rem; margin-top: .125rem; border-radius: 50%; background: rgba(139,92,246,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.9' fill='none' stroke='%23A78BFA' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.price li b { color: var(--text); font-weight: 600; }
.price .btn { margin-top: auto; }

/* ══ Listes groupées (façon Réglages) : docs, blog, support, changelog ══ */
.group { background: var(--tile); border-radius: var(--r-card); overflow: hidden; }
.group > .row + .row { box-shadow: inset 0 1px 0 var(--line); }
.row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; padding: 1.125rem 1.375rem; min-height: 3.5rem; }
.row .ico { width: 2.25rem; height: 2.25rem; border-radius: .625rem; display: grid; place-items: center; font-size: 1.125rem; background: var(--tile-2); }
.row .txt { display: flex; flex-direction: column; min-width: 0; }
.row .t { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.012em; line-height: 1.3; }
.row .s { font-size: .9375rem; color: var(--muted); letter-spacing: -.006em; line-height: 1.4; margin-top: .125rem; }
.row .end { font-size: .875rem; color: var(--muted); display: flex; align-items: center; gap: .5rem; white-space: nowrap; }
a.row { transition: background-color 160ms ease; }
a.row .end::after { content: ''; width: .4375rem; height: .4375rem; border-right: 1.5px solid var(--muted); border-top: 1.5px solid var(--muted); transform: rotate(45deg); margin-left: .25rem; }
a.row:active { background: var(--tile-2); }
@media (hover: hover) and (pointer: fine) { a.row:hover { background: #17161B; } }
.group-title { font-size: .8125rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); margin: 2.5rem 0 .75rem 1.375rem; }
.group-title:first-child { margin-top: 0; }

/* ══ Accordéon (FAQ) : details natif, hauteur animée quand le navigateur le permet ══ */
.acc { background: var(--tile); border-radius: var(--r-card); overflow: hidden; }
.acc details + details { box-shadow: inset 0 1px 0 var(--line); }
.acc summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1.25rem 1.5rem; min-height: 3.5rem; cursor: pointer; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.012em; line-height: 1.35; transition: background-color 160ms ease; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: ''; flex: none; width: .875rem; height: .875rem; background: linear-gradient(var(--muted), var(--muted)) center/100% 1.5px no-repeat, linear-gradient(var(--muted), var(--muted)) center/1.5px 100% no-repeat; transition: transform 240ms var(--ease-out); }
.acc details[open] summary::after { transform: rotate(45deg); }
.acc summary:active { background: var(--tile-2); }
.acc .ans { padding: 0 1.5rem 1.375rem; color: var(--text-2); font-size: 1rem; line-height: 1.55; letter-spacing: -.008em; }
.acc .ans p + p { margin-top: .75rem; }
.acc .ans a { color: var(--violet-hi); }
.acc .ans b, .acc .ans strong { color: var(--text); font-weight: 600; }
@supports (interpolate-size: allow-keywords) {
  .acc { interpolate-size: allow-keywords; }
  .acc details::details-content { block-size: 0; overflow: clip; transition: block-size 320ms var(--ease-out), content-visibility 320ms allow-discrete; }
  .acc details[open]::details-content { block-size: auto; }
}

/* ══ Prose : légal, docs, blog ══ */
.prose { color: var(--text-2); font-size: 1.0625rem; line-height: 1.65; letter-spacing: -.01em; }
.prose > * + * { margin-top: 1.125rem; }
.prose h2 { color: var(--text); font-size: 1.75rem; font-weight: 700; line-height: 1.2; letter-spacing: -.018em; margin-top: 3rem; }
.prose h3 { color: var(--text); font-size: 1.25rem; font-weight: 600; line-height: 1.3; letter-spacing: -.014em; margin-top: 2.25rem; }
.prose h4 { color: var(--text); font-size: 1.0625rem; font-weight: 600; margin-top: 1.75rem; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: .75rem; }
.prose a { color: var(--violet-hi); text-decoration: underline; text-decoration-color: rgba(167,139,250,.4); text-underline-offset: .18em; }
.prose strong, .prose b { color: var(--text); font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.375rem; }
.prose li + li { margin-top: .375rem; }
.prose li::marker { color: var(--muted); }
.prose blockquote { padding: 1rem 1.25rem; border-radius: .875rem; background: var(--tile); color: var(--text-2); }
.prose code { font-family: var(--mono); font-size: .875em; background: var(--tile-2); padding: .125rem .375rem; border-radius: .375rem; color: var(--text); }
.prose pre { background: var(--tile); border-radius: .875rem; padding: 1.125rem 1.25rem; overflow-x: auto; font-size: .875rem; line-height: 1.55; }
.prose pre code { background: none; padding: 0; }
.prose hr { border: 0; height: 1px; background: var(--line); margin: 2.5rem 0; }
.prose img { border-radius: .875rem; }
.prose table { width: 100%; border-collapse: collapse; font-size: .9375rem; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: .625rem .875rem .625rem 0; box-shadow: inset 0 -1px 0 var(--line); vertical-align: top; }
.prose th { color: var(--text); font-weight: 600; }
.prose .note { background: var(--tile); border-radius: .875rem; padding: 1rem 1.25rem; }
.doc-layout { display: grid; grid-template-columns: 13rem 1fr; gap: 3.5rem; align-items: start; }
.toc { position: sticky; top: calc(var(--gnav-h) + 2rem); font-size: .875rem; max-height: calc(100svh - var(--gnav-h) - 4rem); overflow-y: auto; overscroll-behavior: contain; }
.toc .tt { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin-bottom: .75rem; }
.toc a { display: block; padding: .3125rem 0; color: var(--muted); line-height: 1.35; transition: color 160ms ease; }
.toc a.l3 { padding-left: .75rem; font-size: .8125rem; }
.toc a.on { color: var(--text); }
@media (hover: hover) and (pointer: fine) { .toc a:hover { color: var(--text); } }
.meta-line { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: center; color: var(--muted); font-size: .875rem; margin-top: 1.25rem; }

/* Pages légales : sommaire en pastilles, encadrés, séparateurs */
.legal-toc { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 3rem; }
.legal-toc a { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 .875rem; border-radius: var(--pill); background: var(--tile); font-size: .875rem; color: var(--text-2); letter-spacing: -.006em; transition: background-color 160ms ease, transform 160ms var(--ease-out); }
.legal-toc a:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .legal-toc a:hover { background: var(--tile-2); color: var(--text); } }
@media (pointer: coarse) { .legal-toc a { min-height: 2.75rem; } }
.prose h2[id], .prose h3[id] { scroll-margin-top: calc(var(--gnav-h) + 1.5rem); }
.prose .legal-highlight { background: var(--tile); border-radius: .875rem; padding: 1.125rem 1.25rem; }
.prose .legal-separator { border: 0; height: 1px; background: var(--line); margin: 3rem 0; }
.prose.legal { font-size: 1rem; }

/* Articles : encadré d'appel et lien retour */
.prose .cta-box { background: var(--tile); border-radius: var(--r-tile); padding: 2rem; margin-top: 3rem; text-align: center; }
.prose .cta-box h3 { margin-top: 0; }
.prose .cta-box p { margin-top: .5rem; color: var(--muted); }
.prose .cta-box .btn { color: #fff; text-decoration: none; margin-top: 1.25rem; }
.link.back::after { content: none; }
.link.back::before { content: '‹\00a0'; }

/* ══ Vitrines : une idée par section, une grande image entière (jamais recadrée) ══ */
.showcase { padding: 7.5rem 0 0; text-align: center; }
.showcase + .showcase { padding-top: 9rem; }
.showcase .h2 { max-width: 48rem; margin: 0 auto; }
.showcase .p { margin: 1.125rem auto 0; }
.showcase .ctas { margin-top: 1.5rem; }
.shot { display: block; width: 100%; height: auto; margin: 3.5rem auto 0; }
.shot.tablet { max-width: 60rem; filter: drop-shadow(0 2.5rem 4rem rgba(139,92,246,.18)); }
.shot.game { max-width: 46rem; border-radius: 1.5rem; }
.shot.inv { max-width: var(--wide); border-radius: 1.25rem; }
/* Rangée de téléphones entiers ; carrousel glissable sur mobile */
.phones { display: flex; justify-content: center; gap: 2.5rem; margin-top: 3.5rem; list-style: none; }
.phones li { flex: none; width: 16.5rem; }
.phones img { width: 100%; height: auto; }
.phones .cap { margin-top: 1.25rem; font-size: .9375rem; line-height: 1.4; color: var(--muted); letter-spacing: -.006em; }
.phones .cap b { display: block; color: var(--text); font-weight: 600; font-size: 1.0625rem; }
/* Liste de fonctions sans cartes ni liens */
.feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem 3rem; margin-top: 3.5rem; text-align: left; }
.feats h3 { font-size: 1.1875rem; font-weight: 600; letter-spacing: -.012em; line-height: 1.26; }
.feats p { margin-top: .5rem; color: var(--muted); font-size: 1rem; line-height: 1.47; letter-spacing: -.008em; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem 3rem; margin-top: 3.5rem; text-align: left; counter-reset: st; }
.steps li { list-style: none; counter-increment: st; }
.steps li::before { content: counter(st); display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--tile-2); color: var(--violet-hi); font: 600 .9375rem/1 var(--mono); margin-bottom: 1rem; }
.steps h3 { font-size: 1.1875rem; font-weight: 600; letter-spacing: -.012em; }
.steps p { margin-top: .5rem; color: var(--muted); font-size: 1rem; line-height: 1.47; }
@media (max-width: 834px) {
  .feats, .steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 734px) {
  .showcase { padding-top: 5rem; }
  .showcase + .showcase { padding-top: 6rem; }
  .shot { margin-top: 2.25rem; }
  .shot.game { border-radius: 1rem; }
  /* Inventaire : sur téléphone on montre le premier panneau entier plutôt qu'une bande illisible */
  .shot.inv { aspect-ratio: .92; object-fit: cover; object-position: 0 50%; border-radius: 1rem; }
  .phones { justify-content: flex-start; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin: 2.25rem calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter) .5rem; scrollbar-width: none; }
  .phones::-webkit-scrollbar { display: none; }
  .phones li { width: 66vw; max-width: 16rem; scroll-snap-align: center; }
  .feats, .steps { grid-template-columns: 1fr; gap: 2rem; }
}

/* Illustration de l'inventaire V2 sur l'accueil (HTML, pas une capture) */
.inv-demo { max-width: 56rem; margin: 3.5rem auto 0; background: var(--tile); border-radius: var(--r-tile); padding: 1.75rem; display: grid; grid-template-columns: 1fr 17rem; gap: 1.5rem; text-align: left; box-shadow: 0 2.5rem 5rem -1.5rem rgba(139,92,246,.18); }
.inv-demo .top { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.inv-demo .top b { font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; }
.inv-demo .wt { flex: 0 1 16rem; }
.inv-demo .bar { height: .5rem; border-radius: var(--pill); background: var(--tile-2); overflow: hidden; }
.inv-demo .bar i { display: block; height: 100%; width: 54%; background: var(--green); border-radius: inherit; }
.inv-demo .wt span { display: block; margin-top: .375rem; font: 500 .8125rem/1 var(--mono); color: var(--muted); }
.inv-demo .g { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; align-content: start; }
.inv-demo .s { position: relative; aspect-ratio: 1; border-radius: .75rem; background: var(--tile-2); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: .375rem; }
.inv-demo .s.e { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.inv-demo .s.on { box-shadow: inset 0 0 0 1.5px var(--violet); }
.inv-demo .s img { width: 50%; height: 50%; object-fit: contain; }
.inv-demo .s em { font-style: normal; margin-top: .25rem; font-size: .625rem; color: var(--text-2); text-align: center; line-height: 1.2; }
.inv-demo .s q { quotes: none; position: absolute; top: .3125rem; right: .375rem; font: 500 .625rem/1 var(--mono); color: var(--muted); }
.inv-demo .card2 { background: #161519; border-radius: 1.125rem; padding: 1.25rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); align-self: start; }
.inv-demo .card2 .hd { display: flex; align-items: center; gap: .75rem; }
.inv-demo .card2 .ic { width: 3rem; height: 3rem; border-radius: .875rem; background: var(--tile-2); display: grid; place-items: center; flex: none; }
.inv-demo .card2 .ic img { width: 70%; height: 70%; object-fit: contain; }
.inv-demo .card2 strong { display: block; font-size: 1.0625rem; letter-spacing: -.012em; }
.inv-demo .card2 small { font: 500 .75rem/1.3 var(--mono); color: var(--muted); }
.inv-demo .kv { display: flex; justify-content: space-between; margin-top: 1rem; padding: .625rem .75rem; border-radius: .75rem; background: var(--tile); font-size: .8125rem; color: var(--muted); }
.inv-demo .kv b { color: var(--text); font-weight: 600; }
.inv-demo .bt { display: flex; align-items: center; justify-content: center; min-height: 2.25rem; border-radius: var(--pill); font-size: .875rem; font-weight: 500; margin-top: .5rem; background: var(--tile-2); }
.inv-demo .bt.p { background: var(--violet); color: #fff; margin-top: 1rem; }
.inv-demo .bt.d { background: transparent; color: var(--red); box-shadow: inset 0 0 0 1px rgba(255,69,58,.35); }
.inv-demo .two { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
@media (max-width: 734px) {
  .inv-demo { grid-template-columns: 1fr; padding: 1.125rem; margin-top: 2.25rem; }
  .inv-demo .top { flex-direction: column; align-items: stretch; gap: .75rem; }
  .inv-demo .wt { flex: none; }
  .inv-demo .card2 { display: none; }
}

/* ══ Champs (16 px minimum : pas de zoom auto sur iOS) ══ */
.field { display: grid; gap: .5rem; }
.field label { font-size: .875rem; font-weight: 600; color: var(--text-2); }
.input { width: 100%; min-height: 3rem; padding: .75rem 1rem; border-radius: .875rem; border: 0; background: var(--tile-2); color: var(--text); font: 500 1rem/1.4 var(--font); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 160ms ease; }
.input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--violet-hi); }

/* ══ Segmenté (onglets) ══ */
.seg { display: inline-flex; gap: .25rem; padding: .25rem; border-radius: var(--pill); background: var(--tile); }
.seg a, .seg button { min-height: 2.25rem; padding: 0 1.125rem; border-radius: var(--pill); display: inline-flex; align-items: center; font-size: .9375rem; font-weight: 500; color: var(--muted); transition: background-color 200ms var(--ease-out), color 200ms ease, transform 160ms var(--ease-out); }
.seg a:active, .seg button:active { transform: scale(.97); }
.seg [aria-selected="true"], .seg [aria-current="page"] { background: var(--tile-2); color: var(--text); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
@media (pointer: coarse) { .seg a, .seg button { min-height: 2.75rem; } }

/* ══ Héro accueil : pastille vivante + scène de ville ══ */
.hero { position: relative; text-align: center; padding: 3.5rem var(--gutter) 0; overflow: hidden; }
.island { position: relative; display: inline-grid; grid-template-columns: 1.625rem 1fr auto; align-items: center; gap: .75rem; width: min(23rem, 100%); height: 2.5rem; padding: 0 1.125rem 0 .5rem; border-radius: var(--pill); background: #0A0A0B; text-align: left; font-size: .875rem; margin-bottom: 2.25rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(255,255,255,.06), 0 .75rem 2.5rem rgba(0,0,0,.6); opacity: 0; transform: scale(.96); transition: opacity 400ms var(--ease-out), transform 500ms var(--ease-out); }
.island.on { opacity: 1; transform: none; }
.island .ic { width: 1.625rem; height: 1.625rem; border-radius: 50%; display: grid; place-items: center; font-size: .8125rem; background: rgba(245,165,36,.18); transition: background-color 300ms ease; }
.island .txt { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.island .t { font-weight: 600; }
.island .s { color: var(--muted); }
.island .v { font-family: var(--mono); font-feature-settings: 'tnum' 1; color: var(--amber); transition: color 300ms ease; }
.island .swap { transition: opacity 220ms var(--ease-out), filter 220ms var(--ease-out), transform 220ms var(--ease-out); }
.island.changing .swap { opacity: 0; filter: blur(2px); transform: translateY(-3px); }
.hero .display { margin-top: .5rem; }
.hero .lede { margin: 1.125rem auto 0; }
.scene { position: relative; margin-top: 3.5rem; padding: 2.5rem 0 4rem; }
.scene svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene .fade { position: absolute; inset: 0; background: radial-gradient(60% 75% at 50% 45%, transparent 30%, var(--bg) 80%), linear-gradient(to bottom, var(--bg) 0%, transparent 15%, transparent 75%, var(--bg) 100%); }
/* Téléphone entier, posé au centre ; arrive une fois au chargement */
.scene .phone { position: relative; display: block; width: 18rem; height: auto; margin: 0 auto; filter: drop-shadow(0 3rem 5rem rgba(139,92,246,.35)) drop-shadow(0 1.5rem 3rem rgba(0,0,0,.8)); transform: translateY(2rem); opacity: 0; transition: transform 900ms var(--ease-out), opacity 700ms var(--ease-out); }
.scene.on .phone { transform: none; opacity: 1; }
/* Étiquettes accrochées au téléphone (décalages depuis le centre, visibles à toutes les largeurs desktop) */
.scene .tag { position: absolute; display: flex; align-items: center; gap: .625rem; }
.scene .tag.r { left: calc(50% + 10.5rem); }
.scene .tag.l { right: calc(50% + 10.5rem); flex-direction: row-reverse; }
.ping { position: relative; flex: none; width: .75rem; height: .75rem; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 .375rem rgba(139,92,246,.16); }
.ping.pink { background: var(--pink); box-shadow: 0 0 0 .375rem rgba(236,72,153,.18); }
.ping.amber { background: var(--amber); box-shadow: 0 0 0 .375rem rgba(245,165,36,.2); animation: ring 1.8s linear infinite; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(245,165,36,.55); } 100% { box-shadow: 0 0 0 1.5rem rgba(245,165,36,0); } }
.chip { position: relative; font-size: .8125rem; color: var(--text-2); background: rgba(17,16,20,.82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: .75rem; padding: .5rem .75rem; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 1px rgba(255,255,255,.06); }
.chip b { color: var(--text); font-weight: 600; }
.chip .mono { color: var(--muted); font-size: .75rem; margin-left: .375rem; }

/* Bande de chiffres */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.stat .n { font-family: var(--mono); font-feature-settings: 'tnum' 1; font-size: clamp(2.25rem, 4.5vw, 3.5rem); font-weight: 500; letter-spacing: -.04em; line-height: 1; transition: opacity 300ms var(--ease-out), filter 300ms var(--ease-out); }
.stats.c3 { grid-template-columns: repeat(3, 1fr); }
.stat .n.loading { opacity: .3; filter: blur(2px); }
.stat .l { color: var(--muted); font-size: .9375rem; margin-top: .625rem; letter-spacing: -.006em; }

/* ══ Apparitions au défilement : une fois, cascade 50 ms ══ */
.reveal { opacity: 0; transform: translateY(.5rem); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.tile.media.reveal > img { clip-path: inset(0 0 100% 0); transition: clip-path 900ms var(--ease-in-out); }
.tile.media.reveal.in > img { clip-path: inset(0 0 0 0); }
.no-js .reveal { opacity: 1; transform: none; }
.no-js .tile.media.reveal > img { clip-path: none; }

/* ══ Pied de page (dense, façon Apple) ══ */
.gfoot { background: #0A0A0B; color: var(--muted); font-size: .75rem; line-height: 1.33; letter-spacing: -.001em; padding: 1.5rem 0 calc(1.5rem + env(safe-area-inset-bottom, 0px)); margin-top: 0; }
.gfoot .note { padding-bottom: 1rem; box-shadow: inset 0 -1px 0 var(--line); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.gfoot .status { display: inline-flex; align-items: center; gap: .5rem; color: var(--text-2); min-height: 2rem; }
.gfoot .cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; padding: 1.5rem 0; box-shadow: inset 0 -1px 0 var(--line); }
.gfoot h4 { color: var(--text-2); font-size: .75rem; font-weight: 600; margin-bottom: .625rem; }
.gfoot .cols a { display: block; padding: .3125rem 0; transition: color 160ms ease; }
.gfoot .legal { padding-top: 1rem; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; justify-content: space-between; }
.gfoot .legal nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.gfoot .legal a { min-height: 2rem; display: inline-flex; align-items: center; }

/* Aperçu V2 : petit lien flottant vers l'ancien site (retiré à la bascule) */
.v2-pill { position: fixed; z-index: 90; left: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; gap: .5rem; min-height: 2rem; padding: 0 .75rem 0 .375rem; border-radius: var(--pill); background: rgba(28,28,30,.72); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); font-size: .75rem; color: var(--muted); opacity: .85; transition: opacity 160ms ease, transform 160ms var(--ease-out); }
.v2-pill b { font: 600 .6875rem/1 var(--mono); color: #fff; background: var(--violet); border-radius: var(--pill); padding: .3125rem .4375rem; }
.v2-pill:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .v2-pill:hover { opacity: 1; color: var(--text); } }

/* ══ Responsive ══ */
@media (max-width: 1068px) {
  .gnav .links { gap: 1.25rem; }
  .gnav .actions { margin-left: .75rem; }
  .doc-layout { grid-template-columns: 1fr; }
  .toc { display: none; }
}
@media (max-width: 834px) {
  .gnav .links { display: none; }
  .gnav .actions { margin-left: 0; gap: .5rem; }
  .menu-btn { display: inline-flex; }
  .scene .tag { display: none; }
  .grid.c3, .grid.c4 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); row-gap: 2.25rem; }
  .stats.c3 { grid-template-columns: 1fr; }
}
@media (max-width: 734px) {
  :root { --gutter: 1rem; }
  .section { padding: 5rem 0; }
  .section.tight { padding: 3rem 0; }
  .page-hero { padding: 3.5rem 0 2.5rem; }
  .eyebrow { font-size: 1.0625rem; }
  .ctas { flex-direction: column; gap: .5rem; }
  .ctas.left { align-items: flex-start; }
  .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr; gap: .875rem; }
  .bento { grid-template-columns: 1fr; gap: .875rem; }
  .bento .w2, .bento .w3, .bento .w4, .bento .w6 { grid-column: auto; }
  .bento .tile { min-height: 15rem; }
  .tile { padding: 1.75rem; }
  .tile .big { font-size: 2rem; }
  .tile .num { font-size: 3.5rem; }
  .tile.media > img { margin-right: -1.75rem; width: 88%; }
  .tile.media > img.full { margin: auto -1.75rem 0; width: calc(100% + 3.5rem); }
  .price { padding: 1.75rem; }
  .row { padding: 1rem 1.125rem; gap: .875rem; }
  .acc summary { padding: 1.125rem 1.25rem; }
  .acc .ans { padding: 0 1.25rem 1.25rem; }
  .group-title { margin-left: 1.125rem; }
  .hero { padding-top: 2.5rem; }
  .island { font-size: .8125rem; margin-bottom: 1.625rem; }
  .island .s { display: none; }
  .scene { margin-top: 2.25rem; padding: 1.5rem 0 3rem; }
  .scene .phone { width: 14.5rem; }
  .hide-m { display: none !important; }
  .gfoot .cols { grid-template-columns: repeat(2, 1fr); }
}

/* ══ Accessibilité ══ */
@media (prefers-reduced-motion: reduce) {
  .reveal, .island, .scene .phone, .sheet a { transform: none !important; transition: opacity 200ms ease !important; }
  .island.changing .swap { filter: none; transform: none; }
  .ping.amber { animation: none; }
  .tile.media.reveal > img { clip-path: none !important; transition: none !important; }
  .menu-btn i::before, .menu-btn i::after, .acc summary::after { transition: none; }
  .acc details::details-content { transition: none !important; }
  .stat .n { transition: none; filter: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .gnav, .sheet { background: #000; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .chip, .v2-pill { background: #1C1C1E; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --muted: #AEAEB2; --line: rgba(255,255,255,.3); }
  .tile, .card, .group, .acc, .price, .chip, .island { box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
}

/* ══ Panel V2 : navigation du panel (partial panel-v2/_nav.ejs) ══
   ≥ 1200 px : barre latérale fixe. En dessous : tiroir ouvert par le bouton « Menu » de la barre du haut. */
.pnav { position: fixed; z-index: 70; top: 0; bottom: 0; left: 0; width: 16rem; max-width: 86vw; display: flex; flex-direction: column; gap: .125rem; padding: calc(.75rem + env(safe-area-inset-top, 0px)) .75rem calc(1rem + env(safe-area-inset-bottom, 0px)); background: #0B0A0E; box-shadow: inset -1px 0 0 rgba(255,255,255,.06); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.pnav::-webkit-scrollbar { display: none; }
.pnav-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 0 .25rem .5rem .5rem; }
.pnav-brand { display: inline-flex; align-items: center; gap: .625rem; min-height: 2.75rem; min-width: 0; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
.pnav-brand img { width: 1.75rem; height: 1.75rem; flex: none; border-radius: .5rem; object-fit: contain; }
.pnav-brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pnav-label { margin: 1rem .75rem .375rem; font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pnav-link { display: flex; align-items: center; gap: .75rem; min-height: 2.75rem; padding: 0 .75rem; border-radius: .75rem; font-size: .9375rem; font-weight: 500; color: var(--text-2); transition: background-color 160ms ease, color 160ms ease; }
.pnav-link svg { width: 1.25rem; height: 1.25rem; flex: none; opacity: .75; }
.pnav-link[aria-current="page"] { background: rgba(139,92,246,.14); color: var(--text); box-shadow: inset 0 0 0 1px rgba(139,92,246,.3); }
.pnav-link[aria-current="page"] svg { color: var(--violet-hi); opacity: 1; }
.pnav-link[target="_blank"]::after { content: '↗'; margin-left: auto; font-size: .8125rem; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .pnav-link:not([aria-current]):hover { background: rgba(255,255,255,.05); color: var(--text); } }
.pnav-foot { margin-top: auto; padding-top: 1.25rem; display: grid; gap: .375rem; }
.pnav-user { display: flex; align-items: center; gap: .625rem; min-width: 0; padding: .5rem .75rem; border-radius: .75rem; background: rgba(255,255,255,.04); }
.pnav-user .av { width: 2rem; height: 2rem; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: .875rem; font-weight: 600; color: #fff; background: linear-gradient(135deg, var(--violet), var(--pink)); }
.pnav-user .nm { min-width: 0; font-size: .875rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pnav-old { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.5rem; padding: 0 .75rem; border-radius: .75rem; font-size: .8125rem; color: var(--muted); }
.pnav-old b { font: 600 .6875rem/1 var(--mono); color: #fff; background: var(--violet); border-radius: var(--pill); padding: .3125rem .4375rem; }
@media (hover: hover) and (pointer: fine) { .pnav-old:hover { color: var(--text); } }
.pnav-x, .app-menu { display: none; }
.pnav-scrim { display: none; }
@media (min-width: 1200px) {
  body.has-pnav { padding-left: 16rem; }
  body.has-pnav .appbar { display: none; }
}
@media (max-width: 1199px) {
  .pnav { transform: translateX(-100%); visibility: hidden; box-shadow: 0 0 3rem rgba(0,0,0,.7); transition: transform 320ms var(--ease-drawer), visibility 0s linear 320ms; }
  .pnav-open .pnav { transform: none; visibility: visible; transition: transform 320ms var(--ease-drawer), visibility 0s; }
  .pnav-scrim { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(0,0,0,.55); opacity: 0; pointer-events: none; transition: opacity 240ms ease; }
  .pnav-open .pnav-scrim { opacity: 1; pointer-events: auto; }
  html.pnav-open { overflow: hidden; }
  .pnav-x { display: block; position: relative; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; }
  .pnav-x::before, .pnav-x::after { content: ''; position: absolute; left: 50%; top: 50%; width: .875rem; height: 1.5px; border-radius: 1px; background: var(--text-2); }
  .pnav-x::before { transform: translate(-50%, -50%) rotate(45deg); } .pnav-x::after { transform: translate(-50%, -50%) rotate(-45deg); }
  .app-menu { display: inline-flex; align-items: center; gap: .4375rem; min-height: 2.75rem; justify-self: start; font-size: .9375rem; color: var(--violet-hi); }
  .app-menu svg { width: 1.25rem; height: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pnav, .pnav-open .pnav, .pnav-scrim { transition: none; }
}

/* ══ Règlement RP (site-v2/reglement-rp.ejs, généré depuis l'ancienne page) ══ */
.rr-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.rr { max-width: 46rem; min-width: 0; }
.toc a + .tt { margin-top: 1.25rem; }
.rr-notice { display: flex; gap: .75rem; padding: 1rem 1.25rem; border-radius: var(--r-card); background: var(--tile); box-shadow: inset 3px 0 0 var(--amber); font-size: .9375rem; line-height: 1.55; color: var(--text-2); }
.rr-notice .ic { flex: none; }
.rr-sec { margin-top: 3.25rem; scroll-margin-top: calc(var(--gnav-h) + 1.5rem); }
.rr-sec h2 { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; font-size: 1.75rem; font-weight: 700; line-height: 1.2; letter-spacing: -.018em; color: var(--text); }
.rr-sec .lead { margin-top: .375rem; font-size: 1rem; color: var(--muted); }
.rr-block { margin-top: 1rem; padding: 1.25rem 1.375rem; border-radius: var(--r-card); background: var(--tile); }
.rr-block h3 { margin-bottom: .75rem; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.012em; color: var(--text); }
.rr-block ul { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.rr-block li { position: relative; padding-left: 1.375rem; font-size: .9375rem; line-height: 1.55; color: var(--text-2); }
.rr-block li::before { content: ''; position: absolute; left: .3125rem; top: .62em; width: .375rem; height: .375rem; border-radius: 50%; background: var(--violet-hi); }
.rr-block li.no::before, .rr-block li.yes::before { left: 0; top: 0; width: auto; height: auto; border-radius: 0; background: none; font-size: .8125rem; font-weight: 700; line-height: 1.9; }
.rr-block li.no::before { content: '✕'; color: var(--red); }
.rr-block li.yes::before { content: '✓'; color: var(--green); }
.rr-block strong, .rr-notice strong { color: var(--text); font-weight: 600; }
.rr-block .sub { font-size: .875rem; color: var(--muted); }
.rr-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .75rem; }
.rr-foot { margin-top: 3.5rem; padding-top: 1.5rem; box-shadow: inset 0 1px 0 var(--line); font-size: .875rem; color: var(--muted); }
.rr-foot strong { color: var(--text-2); }
@media (max-width: 734px) {
  .rr-grid2 { grid-template-columns: minmax(0, 1fr); }
  .rr-sec h2 { font-size: 1.375rem; }
  .rr-block { padding: 1.125rem 1.125rem; }
}

/* ══ Accueil : deux portes (joueur / créateur de serveur) + accès au panel expliqué (2026-10-20) ══ */
/* La porte entière est cliquable (pas de bouton dedans) ; joueur déjà connecté : icône violette (le seul bouton violet reste « Ajouter »). */
.doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-width: 48rem; margin: 2.5rem auto 0; text-align: left; }
.door { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1.25rem 1.25rem 1.25rem 1.125rem; border-radius: var(--r-card); background: var(--tile); transition: transform 160ms var(--ease-out), background-color 160ms ease; }
.door:active { transform: scale(.98); }
.door .ico { width: 2.75rem; height: 2.75rem; border-radius: .875rem; display: grid; place-items: center; background: var(--tile-2); color: var(--violet-hi); }
.door .ico svg { width: 1.375rem; height: 1.375rem; }
.door .txt { display: flex; flex-direction: column; min-width: 0; }
.door .k { font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.door .t { font-size: 1.1875rem; font-weight: 600; letter-spacing: -.012em; line-height: 1.26; margin-top: .125rem; color: var(--text); }
.door .s { font-size: .9375rem; line-height: 1.4; letter-spacing: -.006em; color: var(--muted); margin-top: .25rem; }
.door .go { font-size: 1.625rem; line-height: 1; color: var(--muted); transition: transform 160ms var(--ease-out); }
.door.on .ico { background: var(--violet); color: #fff; }
.door.on .go { color: var(--violet-hi); }
.hero .doors + .ctas { margin-top: 1rem; }
@media (hover: hover) and (pointer: fine) {
  .door:hover { background: #17161B; }
  .door:hover .go { transform: translateX(2px); }
}

/* Commande Discord dans le texte */
.cmd { font-family: var(--mono); font-size: .9em; font-weight: 500; color: var(--text); background: var(--tile-2); border-radius: .375rem; padding: .0625rem .375rem; white-space: nowrap; }

/* Joueur : étapes à gauche, réponse du bot à droite */
.howto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 25rem); gap: 3rem; align-items: center; margin-top: 3.5rem; }
.vsteps { list-style: none; counter-reset: st; display: grid; gap: 2rem; }
.vsteps li { counter-increment: st; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.vsteps li::before { content: counter(st); display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--tile-2); color: var(--violet-hi); font: 600 .9375rem/1 var(--mono); }
.vsteps h3 { font-size: 1.1875rem; font-weight: 600; letter-spacing: -.012em; line-height: 1.3; padding-top: .1875rem; }
.vsteps p { margin-top: .375rem; color: var(--muted); font-size: 1rem; line-height: 1.47; letter-spacing: -.008em; }
.howto-after { margin-top: 3rem; text-align: center; display: grid; gap: .25rem; color: var(--text-2); font-size: 1rem; line-height: 1.47; }
.howto-after .link { font-size: 1rem; min-height: 2.25rem; }
.howto-after .muted { font-size: .875rem; }

/* Réponse du bot dessinée (pas une capture) : mêmes textes que la vraie commande /dashboard */
.dc { background: var(--tile); border-radius: var(--r-tile); padding: 1.5rem; display: grid; gap: 1.25rem; font-size: .9375rem; line-height: 1.4; box-shadow: 0 2.5rem 5rem -1.5rem rgba(139,92,246,.18); }
.dc-msg { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: .875rem; align-items: start; }
.dc-av { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--tile-2); display: grid; place-items: center; font-weight: 600; color: var(--text-2); object-fit: cover; }
.dc-body { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.dc-name { display: inline-flex; align-items: center; gap: .375rem; font-weight: 600; color: var(--text); }
.dc-app { font: 600 .625rem/1 var(--font); font-style: normal; letter-spacing: .03em; color: #fff; background: #5865F2; border-radius: .25rem; padding: .1875rem .3125rem; }
.dc-cmd { margin-top: .25rem; font-family: var(--mono); font-size: .875rem; color: var(--violet-hi); }
.dc-embed { margin-top: .5rem; align-self: stretch; display: grid; gap: .25rem; background: var(--tile-2); border-radius: .5rem; padding: .75rem .875rem; box-shadow: inset 3px 0 0 #5865F2; }
.dc-embed strong { color: var(--text); font-weight: 600; }
.dc-embed span { color: var(--text-2); font-size: .875rem; }
.dc-btn { margin-top: .625rem; display: inline-flex; align-items: center; gap: .375rem; min-height: 2rem; padding: 0 .875rem; border-radius: .375rem; background: #2E2D35; color: var(--text); font-size: .875rem; font-weight: 500; box-shadow: 0 0 0 2px rgba(139,92,246,.55); }
.dc-ext { color: var(--muted); font-size: .75rem; }
.dc-only { margin-top: .5rem; font-size: .75rem; color: var(--muted); }

.home-stats { margin-top: 5rem; }
.home-acc { margin-top: 2.5rem; }
.home-more { margin-top: 1rem; text-align: center; }

@media (max-width: 834px) {
  .howto { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; max-width: 30rem; margin-left: auto; margin-right: auto; }
}
@media (max-width: 734px) {
  .doors { grid-template-columns: minmax(0, 1fr); gap: .75rem; margin-top: 2rem; }
  .door { padding: 1rem 1rem 1rem .875rem; gap: .875rem; }
  .door .t { font-size: 1.125rem; }
  .dc { padding: 1.25rem; }
  .home-stats { margin-top: 3.5rem; }
}
/* Barre : « Mon panel » visible aussi sur téléphone, jamais coupé sur deux lignes */
.gnav .brand, .gnav .panel-link { white-space: nowrap; }
@media (max-width: 734px) {
  .gnav-in { gap: 1rem; }
}
/* Très petit écran : la barre garde le logo, « Ajouter » et le menu ; « Mon panel » reste dans le menu */
@media (max-width: 359px) {
  .gnav .panel-link { display: none; }
}