/* YK Marketing Agency — feuille de style partagée
   Charte : noir #080808, or #C89B4A, or clair #E0B96B, crème #F6F3EC, champagne #EADBB8, sur fond sombre.
   Layout : colonne centrée de 1200px, halos dorés uniquement derrière les en-têtes de page et les appels à l'action. */
:root {
  --void: #080808;
  --abyss: #0d0c0a;
  --deep: #151310;
  --hot: #231d12;
  --hot-line: #4a3c22;
  --gold: #c89b4a;
  --gold-light: #e0b96b;
  --gold-deep: #9a7330;
  --champagne: #eadbb8;
  --cream: #f6f3ec;
  --ash: #a9a293;
  --mist: #cfc9bb;
  --muted: #8a8170;
  --slate: #3d3a33;
  --edge: #2a251c;
  --inkline: #1f1c16;
  --hairline: #3a3122;
  --ghost-line: #7a7466;
  --glow-a: rgba(200, 155, 74, .30);
  --glow-b: rgba(224, 185, 107, .18);

  --font-display: "Figtree", "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --shadow-xl: rgba(0,0,0,.5) 0 4px 30px 0;
  --shadow-float: rgba(0,0,0,.34) 0 20px 35px 0, rgba(0,0,0,.25) 0 4px 13px 0;
  --max: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--void); color: var(--cream);
  font-family: var(--font-ui); font-weight: 300; font-size: 16px; line-height: 1.6; letter-spacing: -0.015em;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; text-wrap: balance; font-weight: 500; }
p, ul, ol { margin: 0; }
:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--cream); color: var(--void); padding: 10px 16px; border-radius: 9999px; font-weight: 500; }
.skip:focus { left: 16px; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* Type */
.eyebrow { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-light); }
.h-xl { font-family: var(--font-display); font-weight: 500; font-size: clamp(40px, 5.6vw, 64px); line-height: 1.02; letter-spacing: -0.02em; }
.h-lg { font-family: var(--font-display); font-weight: 500; font-size: clamp(30px, 4.2vw, 46px); line-height: 1.12; letter-spacing: -0.02em; }
.h-md { font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.2; letter-spacing: -0.02em; }
.soft { color: var(--ash); }
.gold { color: var(--gold-light); }
.lead { font-size: 18px; color: var(--mist); font-weight: 300; line-height: 1.55; max-width: 60ch; }
.center { text-align: center; margin-inline: auto; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border-radius: 9999px; border: 1px solid transparent;
  font: 500 15px/1.4 var(--font-ui); letter-spacing: -0.01em; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, opacity .2s ease, transform .2s ease;
}
.btn--primary { background: var(--cream); color: #080808; border-color: #161618; --fill: var(--gold-light); --fill-ink: #080808; }
.btn--ghost { background: transparent; color: var(--cream); border-color: var(--ghost-line); --fill: var(--cream); --fill-ink: #080808; }
.btn--accent { background: linear-gradient(90deg, var(--gold-deep), var(--gold-light)); color: #080808; font-weight: 600; --fill: var(--cream); --fill-ink: #080808; }
.btn:active { transform: scale(.97); }
.btn svg { width: 16px; height: 16px; flex: none; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* Header */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(8,8,8,.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--inkline); }
.nav__inner { height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px; position: relative; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--font-display); font-weight: 500; font-size: 17px; letter-spacing: -0.02em; color: var(--cream); }
.brand img { width: 38px; height: 38px; object-fit: cover; border-radius: 9px; border: 1px solid var(--edge); }
.brand b { font-weight: 500; color: var(--ash); }
.nav__links { display: flex; align-items: center; gap: 4px; list-style: none; padding: 0; }
.nav__links > li > a, .dd > a { display: inline-block; padding: 8px 12px; border-radius: 9999px; text-decoration: none; font-size: 15px; font-weight: 400; color: var(--ash); transition: color .2s, background-color .2s; }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--cream); }
.nav__links a[aria-current="page"] { background: var(--deep); }
.dd { position: relative; }
.dd > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); }
.dd__panel {
  position: absolute; top: calc(100% + 8px); left: -8px; min-width: 300px;
  display: grid; gap: 2px; padding: 8px; list-style: none;
  background: var(--deep); border: 1px solid var(--edge); border-radius: 12px; box-shadow: var(--shadow-xl);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.dd:hover .dd__panel, .dd:focus-within .dd__panel { opacity: 1; visibility: visible; transform: none; }
.dd__panel a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 8px; text-decoration: none; }
.dd__panel a:hover { background: var(--hot); }
.dd__panel strong { font-weight: 500; color: var(--cream); font-size: 15px; }
.dd__panel span { font-size: 13px; color: var(--ash); font-weight: 400; }
.nav__right { display: flex; gap: 8px; align-items: center; }
/* Bouton menu : deux traits qui se croisent en X */
.menu-btn {
  display: none; width: 46px; height: 46px; border-radius: 9999px;
  border: 1px solid var(--ghost-line); background: transparent; color: var(--cream);
  cursor: pointer; place-items: center; position: relative;
  transition: border-color .3s ease, background-color .3s ease;
}
.menu-btn[aria-expanded="true"] { border-color: var(--gold); background: var(--hot); }
.burger { position: relative; width: 18px; height: 12px; display: block; }
.burger i { position: absolute; left: 0; width: 100%; height: 1.6px; border-radius: 2px; background: currentColor; transition: transform .45s cubic-bezier(.7,0,.2,1), top .45s cubic-bezier(.7,0,.2,1), width .3s ease, background-color .3s; }
.burger i:nth-child(1) { top: 2px; }
.burger i:nth-child(2) { top: 8px; width: 70%; left: auto; right: 0; }
.menu-btn:hover .burger i:nth-child(2) { width: 100%; }
.menu-btn[aria-expanded="true"] .burger i { top: 5px; width: 100%; background: var(--gold-light); }
.menu-btn[aria-expanded="true"] .burger i:nth-child(1) { transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .burger i:nth-child(2) { transform: rotate(-45deg); }

/* Menu mobile plein écran : s'ouvre en cercle depuis le bouton, liens en cascade */
.mnav {
  --cx: calc(100% - 38px); --cy: 34px;
  position: fixed; inset: 0; z-index: 45;
  background: var(--void);
  padding: calc(68px + env(safe-area-inset-top, 0px)) var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto; overscroll-behavior: contain;
  clip-path: circle(0px at var(--cx) var(--cy));
  transition: clip-path .5s cubic-bezier(.7, 0, .2, 1) .12s;
}
.mnav::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(70% 45% at 85% 0%, var(--glow-a) 0, rgba(0,0,0,0) 100%), radial-gradient(60% 40% at 0% 100%, var(--glow-b) 0, rgba(0,0,0,0) 100%);
}
.mnav.is-open { clip-path: circle(150vmax at var(--cx) var(--cy)); transition: clip-path .7s cubic-bezier(.7, 0, .2, 1); }
.mnav__inner { max-width: 560px; margin-inline: auto; display: grid; gap: 14px; padding-top: 18px; }
.mnav__item { opacity: 0; transform: translateY(18px); transition: opacity .2s ease, transform .25s ease; }
.mnav.is-open .mnav__item {
  opacity: 1; transform: none;
  transition: opacity .5s ease, transform .6s cubic-bezier(.2, .8, .2, 1);
  transition-delay: calc(.22s + var(--i) * .05s);
}
.mnav__label { font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--gold-light); font-weight: 500; margin-top: 10px; }
.mnav__list, .mnav__pills { list-style: none; padding: 0; }
.mnav__list { display: grid; border-top: 1px solid var(--inkline); }
.mnav__svc { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 2px; border-bottom: 1px solid var(--inkline); text-decoration: none; }
.mnav__ico { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--edge); background: var(--deep); color: var(--gold); transition: background-color .25s, border-color .25s; }
.mnav__ico svg { width: 19px; height: 19px; }
.mnav__name { font-family: var(--font-display); font-size: 23px; font-weight: 500; letter-spacing: -0.02em; color: var(--cream); line-height: 1.15; transition: color .25s, transform .3s cubic-bezier(.2,.8,.2,1); }
.mnav__price { font-size: 13px; color: var(--ash); font-weight: 400; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mnav__svc:hover .mnav__name, .mnav__svc:focus-visible .mnav__name, .mnav__svc[aria-current="page"] .mnav__name { color: var(--gold-light); transform: translateX(4px); }
.mnav__svc:hover .mnav__ico, .mnav__svc[aria-current="page"] .mnav__ico { background: var(--hot); border-color: var(--hot-line); }
.mnav__pills { display: flex; flex-wrap: wrap; gap: 8px; }
.mnav__pill { display: inline-block; padding: 10px 18px; border-radius: 9999px; border: 1px solid var(--edge); background: var(--deep); text-decoration: none; color: var(--mist); font-weight: 400; font-size: 15px; transition: border-color .25s, color .25s; }
.mnav__pill:hover, .mnav__pill[aria-current="page"] { border-color: var(--gold); color: var(--cream); }
.mnav__cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.mnav__cta .btn { padding-block: 14px; }
.mnav__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--inkline); font-size: 13px; color: var(--ash); font-weight: 400; }
body.menu-open { overflow: hidden; }

/* Barre d'action fixe sur mobile */
.mbar { display: none; }

/* Glow header (home hero + inner page heads) */
.glow { position: relative; overflow: hidden; background: var(--void); isolation: isolate; }
.glow::before, .glow::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.glow::before { background: radial-gradient(80% 95% at 38% -55%, var(--glow-a) 0, rgba(0,0,0,0) 100%); }
.glow::after { background: radial-gradient(30% 34% at 74% 104%, var(--glow-b) 0, rgba(0,0,0,0) 100%); }

/* Home hero */
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: 48px; align-items: center; padding-block: clamp(56px, 8vw, 100px) clamp(72px, 9vw, 116px); }
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.badge { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border-radius: 9999px; background: var(--hot); color: var(--gold-light); font-size: 12px; font-weight: 500; letter-spacing: 0; }
.badge--plain { background: var(--deep); color: var(--cream); border: 1px solid var(--edge); }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.hero__text { font-size: 18px; color: var(--mist); max-width: 48ch; margin-top: 22px; }
.hero .btn-row { margin-top: 32px; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 10px 28px; margin-top: 36px; color: var(--mist); font-size: 14px; list-style: none; padding: 0; }
.facts li, .check { display: flex; align-items: flex-start; gap: 9px; }
.facts svg, .check svg { width: 16px; height: 16px; color: var(--gold); flex: none; margin-top: 3px; }

/* Editor stack */
.stack { position: relative; min-height: 470px; }
.win { position: absolute; background: var(--deep); border: 1px solid var(--inkline); border-radius: 12px; box-shadow: var(--shadow-float); overflow: hidden; }
.win__bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--inkline); font-size: 13px; color: var(--ash); font-weight: 400; }
.win__dots { display: flex; gap: 6px; }
.win__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--slate); display: block; }
.win__tabs { display: flex; gap: 2px; margin-left: 6px; }
.win__tabs span { padding: 3px 10px; border-radius: 6px; }
.win__tabs span.on { background: var(--abyss); color: var(--cream); border: 1px solid var(--inkline); }
pre.code { margin: 0; padding: 14px 16px 16px; font: 400 13px/1.55 var(--font-mono); color: var(--mist); letter-spacing: 0; white-space: pre; overflow-x: auto; }
.code .ln { color: var(--slate); display: inline-block; width: 2.2em; user-select: none; }
.code .k { color: var(--gold-light); }
.code .s { color: var(--champagne); }
.code .c { color: var(--muted); }
.code .n { color: var(--gold); }
.code .t { color: var(--cream); }
.win--a { top: 0; left: 0; width: 84%; z-index: 1; }
.win--b { top: 232px; right: 0; width: 70%; z-index: 2; transform: rotate(1.5deg); }
.win--c { top: 398px; left: 4%; width: 52%; z-index: 3; transform: rotate(-1.5deg); }
.term { padding: 12px 14px 14px; font: 400 13px/1.6 var(--font-mono); color: var(--mist); letter-spacing: 0; }
.term .p { color: var(--gold-light); }

/* Inner page head */
.page-head { padding-block: clamp(36px, 5vw, 56px) clamp(56px, 7vw, 88px); }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; font-size: 13px; color: var(--ash); margin-bottom: 28px; font-weight: 400; }
.crumbs li:not(:last-child)::after { content: "/"; margin-left: 6px; color: var(--slate); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--cream); }
.crumbs [aria-current] { color: var(--mist); }
.page-head__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: end; }
.page-head .lead { margin-top: 20px; }
.page-head .btn-row { margin-top: 28px; }
.price-card { background: var(--deep); border: 1px solid var(--edge); border-radius: 12px; padding: 24px; display: grid; gap: 6px; box-shadow: var(--shadow-xl); }
.price-card .label { font-size: 13px; color: var(--ash); font-weight: 400; }
.price-card strong { font-family: var(--font-display); font-weight: 500; font-size: clamp(40px, 4.4vw, 52px); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.price-card small { color: var(--ash); font-size: 14px; font-weight: 400; }
.price-card ul { list-style: none; padding: 14px 0 0; margin-top: 10px; border-top: 1px solid var(--inkline); display: grid; gap: 8px; font-size: 14px; color: var(--mist); font-weight: 400; }

/* Sections */
.section { padding-block: clamp(80px, 10vw, 136px); background: var(--abyss); }
.section--void { background: var(--void); }
.section__head { display: grid; gap: 14px; max-width: 700px; margin-bottom: clamp(40px, 5vw, 64px); }
.section__head.center { text-align: center; justify-items: center; }

/* Cards */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.card { position: relative; background: var(--deep); border: 1px solid var(--edge); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 12px; transition: box-shadow .25s ease, border-color .25s ease; }
a.card { text-decoration: none; }
a.card:hover, .card:focus-within { box-shadow: var(--shadow-xl); border-color: var(--hairline); }
.card__icon { width: 42px; height: 42px; border-radius: 10px; background: var(--abyss); border: 1px solid var(--inkline); display: grid; place-items: center; color: var(--gold); }
.card__icon svg { width: 22px; height: 22px; }
.card h3 { font-size: 20px; letter-spacing: -0.027em; line-height: 1.3; color: var(--cream); }
.card p { color: var(--mist); font-size: 15px; font-weight: 400; }
.card__meta { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--inkline); display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 14px; color: var(--ash); font-weight: 400; }
.card__meta strong { color: var(--cream); font-weight: 500; font-family: var(--font-display); font-size: 20px; letter-spacing: -0.02em; }
.card__more { color: var(--gold-light); font-size: 14px; font-weight: 500; display: inline-flex; gap: 6px; align-items: center; }
.card__more svg { width: 14px; height: 14px; transition: transform .2s; }
a.card:hover .card__more svg { transform: translateX(3px); }

/* Spotlight */
.spot { background: var(--hot); border: 1px solid var(--hot-line); border-radius: 12px; padding: clamp(24px, 4vw, 40px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.spot p { color: var(--mist); margin-top: 14px; font-weight: 400; max-width: 46ch; }
.ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.ledger div { background: var(--deep); border: 1px solid var(--edge); border-radius: 12px; padding: 18px; }
.ledger dt { font-size: 13px; color: var(--ash); font-weight: 400; }
.ledger dd { margin: 6px 0 0; font-family: var(--font-display); font-weight: 500; font-size: 32px; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }

/* Steps */
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.step { background: var(--deep); border: 1px solid var(--edge); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.step__n { font: 400 13px/1 var(--font-mono); color: var(--gold-light); letter-spacing: 0; }
.step h3 { font-size: 18px; letter-spacing: -0.02em; line-height: 1.3; }
.step p { font-size: 15px; color: var(--mist); font-weight: 400; }

/* Pricing */
.pricing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tier { position: relative; background: var(--deep); border: 1px solid var(--edge); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.tier--hot { background: var(--hot); border-color: var(--hot-line); }
.tier__badge { position: absolute; top: 20px; right: 20px; padding: 4px 12px; border-radius: 9999px; font-size: 12px; font-weight: 600; color: #080808; background: linear-gradient(90deg, var(--gold-deep), var(--gold-light)); }
.tier h3 { font-size: 20px; letter-spacing: -0.027em; }
.tier__desc { color: var(--ash); font-size: 14px; font-weight: 400; margin-top: -10px; }
.price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price strong { font-family: var(--font-display); font-weight: 500; font-size: clamp(42px, 4.6vw, 54px); letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.price span { color: var(--ash); font-size: 16px; }
.checks { list-style: none; padding: 0; display: grid; gap: 9px; }
.checks li { color: var(--mist); font-size: 15px; font-weight: 400; }
.tier .btn { margin-top: auto; }
.note { margin-top: 20px; color: var(--ash); font-size: 14px; font-weight: 400; }
.note b { color: var(--cream); font-weight: 500; }

/* Table */
.table-wrap { overflow-x: auto; border: 1px solid var(--edge); border-radius: 12px; background: var(--deep); }
table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
th, td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--inkline); font-weight: 400; vertical-align: top; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--gold-light); font-weight: 500; background: var(--abyss); }
td:last-child, th:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: 0; }
td strong { font-weight: 500; color: var(--cream); }
td a { color: var(--cream); text-decoration-color: var(--gold); text-underline-offset: 3px; }

/* Prose (SEO text blocks) */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.split__aside { position: sticky; top: 100px; display: grid; gap: 14px; }
.prose { display: grid; gap: 18px; max-width: 68ch; color: var(--mist); font-weight: 400; font-size: 16.5px; }
.prose h2 { font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 30px); line-height: 1.2; letter-spacing: -0.02em; color: var(--cream); margin-top: 18px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 18px; color: var(--cream); margin-top: 6px; }
.prose a { color: var(--gold-light); text-underline-offset: 3px; }
.prose strong { color: var(--cream); font-weight: 500; }
.prose ul { padding-left: 0; list-style: none; display: grid; gap: 8px; }
.prose ul li { padding-left: 22px; position: relative; }
.prose ul li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 8px; height: 8px; border-radius: 2px; background: var(--gold); transform: rotate(45deg); }

/* Included list */
.includes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; list-style: none; padding: 0; }
.includes li { background: var(--deep); border: 1px solid var(--edge); border-radius: 12px; padding: 22px; display: grid; gap: 8px; align-content: start; }
.includes h3 { font-size: 17px; display: flex; gap: 10px; align-items: flex-start; letter-spacing: -0.02em; }
.includes h3 svg { width: 18px; height: 18px; color: var(--gold); flex: none; margin-top: 3px; }
.includes p { color: var(--mist); font-size: 15px; font-weight: 400; }

/* FAQ */
.faq { display: grid; gap: 10px; max-width: 860px; margin-inline: auto; }
.faq details { background: var(--deep); border: 1px solid var(--edge); border-radius: 12px; }
.faq summary { cursor: pointer; list-style: none; padding: 20px 56px 20px 22px; font-weight: 500; font-size: 17px; color: var(--cream); position: relative; letter-spacing: -0.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font: 300 24px/1 var(--font-ui); color: var(--gold-light); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details > div { padding: 0 22px 20px; color: var(--mist); font-weight: 400; max-width: 70ch; }
.faq details > div a { color: var(--gold-light); }

/* Areas */
.areas { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.areas li { padding: 6px 14px; border-radius: 9999px; border: 1px solid var(--edge); background: var(--deep); font-size: 14px; color: var(--mist); font-weight: 400; }

/* CTA band */
.cta { position: relative; overflow: hidden; background: var(--void); isolation: isolate; }
.cta::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 80% at 50% 120%, var(--glow-a) 0, rgba(0,0,0,0) 100%); }
.cta__box { display: grid; justify-items: center; text-align: center; gap: 16px; padding-block: clamp(64px, 8vw, 96px); }
.cta__box .btn-row { justify-content: center; margin-top: 8px; }
.cta__phone { font-family: var(--font-mono); letter-spacing: 0; color: var(--ash); font-size: 14px; }
.cta__phone a { color: var(--cream); text-decoration: none; }

/* Contact */
.prompt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); background: var(--deep); border: 1px solid var(--edge); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-xl); }
.prompt__info { padding: clamp(24px, 4vw, 40px); display: flex; flex-direction: column; gap: 18px; border-right: 1px solid var(--edge); }
.prompt__info p { color: var(--mist); font-weight: 400; }
.stats { display: grid; gap: 16px; margin-top: 8px; font-style: normal; }
.stat { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--mist); font-weight: 400; }
.stat svg { width: 18px; height: 18px; color: var(--gold); flex: none; margin-top: 3px; }
.stat b { display: block; color: var(--cream); font-weight: 500; }
.phone { font-family: var(--font-mono); color: var(--cream); letter-spacing: 0; text-decoration: none; }
.phone:hover { color: var(--gold-light); }
.form { padding: clamp(24px, 4vw, 40px); display: grid; gap: 16px; background: var(--abyss); }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font-size: 13px; color: var(--ash); font-weight: 500; }
.field input, .field select, .field textarea { width: 100%; background: var(--deep); color: var(--cream); border: 1px solid var(--edge); border-radius: 8px; padding: 12px 14px; font: 400 15px/1.4 var(--font-ui); letter-spacing: -0.01em; transition: border-color .2s; }
.field textarea { min-height: 140px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--slate); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold-light); }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ash); font-weight: 400; }
.consent input { margin-top: 3px; accent-color: var(--gold); }
.consent a { color: var(--gold-light); }
.form .btn { justify-self: start; }
.form-note { font-size: 14px; color: var(--gold-light); min-height: 1.4em; }

/* Legal */
.legal { max-width: 760px; display: grid; gap: 14px; color: var(--mist); font-weight: 400; }
.legal h2 { font-family: var(--font-display); font-size: 24px; color: var(--cream); margin-top: 22px; letter-spacing: -0.02em; }
.legal a { color: var(--gold-light); }
.legal .todo { color: #080808; background: var(--gold-light); padding: 1px 6px; border-radius: 4px; font-weight: 500; }

/* Footer */
.footer { background: var(--void); border-top: 1px solid var(--inkline); padding-block: 56px 28px; }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 40px; }
.footer__brand { display: grid; gap: 16px; align-content: start; }
.footer__brand address { font-style: normal; color: var(--ash); font-size: 14px; font-weight: 400; line-height: 1.7; }
.footer__brand address a { text-decoration: none; color: var(--cream); }
.footer h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--gold-light); font-weight: 500; margin-bottom: 14px; font-family: var(--font-ui); }
.footer ul { list-style: none; padding: 0; display: grid; gap: 9px; }
.footer ul a { text-decoration: none; color: var(--ash); font-size: 14px; font-weight: 400; }
.footer ul a:hover { color: var(--cream); }
.footer__legal { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--inkline); color: var(--ash); font-size: 13px; font-weight: 400; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.tagline { font-family: var(--font-display); color: var(--cream); letter-spacing: .2em; text-transform: uppercase; font-size: 12px; }
.tagline b { color: var(--gold); font-weight: 500; }

/* 404 */
.notfound { min-height: 60vh; display: grid; place-items: center; text-align: center; padding-block: 80px; }
.notfound .code404 { font: 400 14px/1 var(--font-mono); color: var(--gold-light); letter-spacing: 0; }

/* Responsive */
@media (max-width: 1040px) {
  .hero__grid, .spot, .prompt, .page-head__grid, .split { grid-template-columns: minmax(0, 1fr); }
  .split__aside { position: static; }
  .prompt__info { border-right: 0; border-bottom: 1px solid var(--edge); }
  .grid-3, .pricing, .includes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 880px) {
  .nav__links, .nav__right .btn { display: none; }
  .menu-btn { display: grid; }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .mbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 8px;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(8, 8, 8, .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--inkline);
    transition: transform .4s cubic-bezier(.7, 0, .2, 1);
    animation: mbar-in .6s cubic-bezier(.2, .8, .2, 1) .3s both;
  }
  .mbar .btn { padding-block: 13px; }
  .mbar svg { width: 16px; height: 16px; }
  body.menu-open .mbar { transform: translateY(110%); }
}
@media (min-width: 881px) { .mnav { display: none !important; } }
@keyframes mbar-in { from { transform: translateY(110%); } to { transform: none; } }
@media (max-width: 640px) {
  .grid-3, .grid-2, .pricing, .steps, .ledger, .row2, .includes, .footer__grid { grid-template-columns: minmax(0, 1fr); }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .stack { min-height: 0; display: grid; gap: 14px; }
  .win { position: relative; inset: auto; width: 100%; transform: none; }
  .win--c { display: none; }
  .mnav__name { font-size: 21px; }
}
@media (max-width: 360px) { .brand span { display: none; } .mnav__price { display: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .mnav { clip-path: none; }
}

/* Accueil allégé */
.stack--duo { min-height: 380px; }
.stack--duo .win--a { width: 82%; }
.stack--duo .win--b { top: 190px; width: 66%; }
.card--lg { padding: 32px; gap: 14px; }
.card--lg h3 { font-family: var(--font-display); font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -0.02em; line-height: 1.15; }
.card--lg p { font-size: 16px; max-width: 46ch; }
.why { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.why li { padding: 32px 28px; border-top: 1px solid var(--hot-line); display: grid; gap: 8px; align-content: start; }
.why strong { font-family: var(--font-display); font-weight: 500; font-size: clamp(56px, 6vw, 80px); line-height: 1; letter-spacing: -0.03em; color: var(--gold-light); font-variant-numeric: tabular-nums; }
.why h3 { font-size: 20px; letter-spacing: -0.02em; }
.why p { color: var(--mist); font-weight: 400; font-size: 15px; max-width: 34ch; }
.why a, .note a { text-decoration: none; color: var(--gold-light); background: linear-gradient(var(--gold-light), var(--gold-light)) no-repeat right bottom / 0 1px; transition: background-size .45s cubic-bezier(.7, 0, .2, 1); padding-bottom: 1px; }
.why a:hover, .note a:hover { background-position: left bottom; background-size: 100% 1px; }
@media (max-width: 1040px) { .includes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .why { grid-template-columns: minmax(0, 1fr); } .why li { padding: 24px 4px; } }
@media (max-width: 640px) {
  .stack--duo { min-height: 0; }
  .stack--duo .win--a, .stack--duo .win--b { top: auto; width: 100%; }
  .stack--duo .win--b { display: none; }
}
@media (max-width: 640px) { .includes { grid-template-columns: minmax(0, 1fr); } .card--lg { padding: 24px; } }

/* =====================================================================
   Micro-interactions : même famille que le menu (cercle doré qui se révèle),
   une variante par type d'élément cliquable.
   ===================================================================== */

/* 1. Boutons : remplissage circulaire qui naît là où la souris entre
      et se rétracte là où elle sort (--mx / --my posés par main.js). */
.btn { position: relative; overflow: hidden; isolation: isolate; transition: color .35s ease, border-color .35s ease, transform .2s ease; }
.btn::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: var(--mx, 50%); top: var(--my, 50%);
  width: 0; aspect-ratio: 1; border-radius: 50%;
  background: var(--fill, var(--gold-light));
  transform: translate(-50%, -50%);
  transition: width .55s cubic-bezier(.7, 0, .2, 1);
}
@media (hover: hover) {
  .btn:hover::before { width: 280%; }
  .btn:hover { color: var(--fill-ink, #080808); border-color: var(--fill, var(--gold-light)); }
  .btn:hover svg:last-child { transform: translateX(3px); }
}
.btn:focus-visible::before { width: 280%; }
.btn:focus-visible { color: var(--fill-ink, #080808); }

/* 2. Onde au clic / au toucher, sur tout ce qui est cliquable */
.fx-ripple {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(224, 185, 107, .55) 0, rgba(224, 185, 107, .18) 45%, rgba(224, 185, 107, 0) 70%);
  transform: translate(-50%, -50%) scale(0);
  animation: fx-ripple .7s cubic-bezier(.2, .8, .2, 1) forwards;
}
@keyframes fx-ripple { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }

/* 3. Cartes cliquables : contour doré qui suit la souris + reflet + élévation */
a.card { overflow: hidden; isolation: isolate; transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease, border-color .3s ease; }
a.card::before, a.card::after { content: ""; position: absolute; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .35s ease; }
a.card::before {
  inset: -1px; padding: 1px; z-index: 2;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%), var(--gold-light), rgba(224, 185, 107, 0) 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
a.card::after { inset: 0; z-index: -1; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(200, 155, 74, .12), rgba(0, 0, 0, 0) 65%); }
@media (hover: hover) {
  a.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-float); }
  a.card:hover::before, a.card:hover::after { opacity: 1; }
  a.card:hover .card__icon { background: var(--hot); border-color: var(--hot-line); transform: rotate(-6deg) scale(1.06); }
  a.card:hover h3 { color: var(--gold-light); }
}
a.card:focus-visible::before, a.card:focus-visible::after { opacity: 1; }
.card__icon { transition: transform .45s cubic-bezier(.2, .8, .2, 1), background-color .3s, border-color .3s; }
.card h3 { transition: color .3s ease; }

/* 4. Navigation ordinateur : soulignement doré qui s'ouvre depuis le centre */
.nav__links > li > a, .dd > a { position: relative; }
.nav__links > li > a::before, .dd > a::before {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 1.5px; border-radius: 2px;
  background: var(--gold-light); transform: scaleX(0); transition: transform .4s cubic-bezier(.7, 0, .2, 1);
}
.nav__links > li > a:hover::before, .dd:hover > a::before, .dd:focus-within > a::before, .nav__links a[aria-current="page"]::before { transform: scaleX(1); }
.nav__links a[aria-current="page"] { background: transparent; }
.dd > a::after { transition: transform .35s cubic-bezier(.7, 0, .2, 1); }
.dd:hover > a::after, .dd:focus-within > a::after { transform: translateY(0) rotate(-135deg); }

/* Menu Services : se déroule du haut, liens en cascade */
.dd__panel { width: max-content; min-width: 320px; padding-right: 16px; clip-path: inset(0 0 100% 0 round 12px); transform: none; transition: clip-path .5s cubic-bezier(.7, 0, .2, 1), opacity .3s ease, visibility .5s; }
.dd:hover .dd__panel, .dd:focus-within .dd__panel { clip-path: inset(0 0 0 0 round 12px); }
.dd__panel li { opacity: 0; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease; }
.dd:hover .dd__panel li, .dd:focus-within .dd__panel li { opacity: 1; transform: none; transition: opacity .4s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.dd__panel li:nth-child(1) { transition-delay: .08s; } .dd__panel li:nth-child(2) { transition-delay: .12s; }
.dd__panel li:nth-child(3) { transition-delay: .16s; } .dd__panel li:nth-child(4) { transition-delay: .20s; }
.dd__panel li:nth-child(5) { transition-delay: .24s; }
.dd__panel a { position: relative; overflow: hidden; transition: background-color .3s ease, padding-left .35s cubic-bezier(.2, .8, .2, 1); }
.dd__panel a:hover { padding-left: 18px; }
.dd__panel a strong { transition: color .3s; }
.dd__panel a:hover strong { color: var(--gold-light); }

/* 5. Liens dans le texte : trait doré qui se dessine de gauche à droite
      et repart vers la droite à la sortie */
.prose a, .faq details > div a, .legal a, .note a, td a, .crumbs a, .footer ul a, .consent a, .cta__phone a, .footer__brand address a {
  text-decoration: none;
  background: linear-gradient(var(--gold-light), var(--gold-light)) no-repeat right bottom / 0 1px;
  transition: background-size .45s cubic-bezier(.7, 0, .2, 1), color .3s ease;
  padding-bottom: 1px;
}
.prose a:hover, .faq details > div a:hover, .legal a:hover, .note a:hover, td a:hover, .crumbs a:hover, .footer ul a:hover, .consent a:hover, .cta__phone a:hover, .footer__brand address a:hover,
.prose a:focus-visible, .footer ul a:focus-visible { background-position: left bottom; background-size: 100% 1px; color: var(--gold-light); }

/* 6. Logo : le monogramme pivote légèrement, comme une carte qu'on retourne */
.brand img { transition: transform .6s cubic-bezier(.2, .8, .2, 1), border-color .3s; }
.brand:hover img { transform: rotate(-8deg) scale(1.08); border-color: var(--gold); }

/* 7. Menu mobile : éléments cliquables avec l'onde */
.mnav__svc, .mnav__pill { position: relative; overflow: hidden; }

/* 8. FAQ : ouverture fluide (navigateurs récents), réponse qui glisse */
.faq { interpolate-size: allow-keywords; }
.faq details { transition: border-color .3s ease, background-color .3s ease; position: relative; overflow: hidden; }
.faq details::details-content { height: 0; overflow: hidden; transition: height .45s cubic-bezier(.7, 0, .2, 1), content-visibility .45s allow-discrete; }
.faq details[open]::details-content { height: auto; }
.faq details[open] { border-color: var(--hot-line); background: var(--hot); }
.faq summary { transition: color .3s ease; }
.faq summary:hover { color: var(--gold-light); }
.faq details > div { opacity: 0; transform: translateY(-6px); transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1); }
.faq details[open] > div { opacity: 1; transform: none; transition-delay: .1s; }

/* 9. Champs de formulaire : liseré doré qui s'allume */
.field label { transition: color .3s ease; }
.field:focus-within label { color: var(--gold-light); }
.field input, .field select, .field textarea { transition: border-color .3s ease, box-shadow .4s ease; }
.field input:focus, .field select:focus, .field textarea:focus { box-shadow: 0 0 0 4px rgba(224, 185, 107, .12); }

/* 10. Changement de page : la nouvelle page s'ouvre en cercle depuis le clic,
       l'en-tête reste en place (navigateurs compatibles, sinon navigation normale) */
/* Arrivée sur une page : le contenu monte légèrement en fondu, l'en-tête reste fixe.
   (Pas de transition entre pages : aucun chevauchement entre l'ancienne et la nouvelle.) */
html { background: var(--void); }
main, .footer { animation: page-in .55s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes page-in { from { transform: translateY(14px); } }
/* Départ (classe posée par main.js au clic) : la page s'efface entièrement avant de changer */
html.is-leaving main, html.is-leaving .footer { opacity: 0; transform: translateY(-8px); transition: opacity .26s ease-in, transform .3s ease-in; }
/* Ligne dorée sous l'en-tête : avance au départ, se termine à l'arrivée */
.nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, rgba(224, 185, 107, 0), var(--gold-light) 60%, var(--gold));
  transform-origin: left; transform: scaleX(0); opacity: 0;
}
html.is-leaving .nav::after { opacity: 1; transform: scaleX(.75); transition: transform .9s cubic-bezier(.2, .8, .2, 1), opacity .15s; }
html.is-arriving .nav::after { animation: nav-line-done .6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes nav-line-done { from { opacity: 1; transform: scaleX(.75); } 60% { opacity: 1; transform: scaleX(1); } to { opacity: 0; transform: scaleX(1); } }
/* ---- Effets au clic ---- */
/* Étincelles (bouton principal) */
.fx-spark {
  position: fixed; z-index: 200; pointer-events: none;
  width: var(--sz, 5px); height: var(--sz, 5px); border-radius: 50%;
  background: var(--gold-light); box-shadow: 0 0 8px rgba(224, 185, 107, .8);
  transform: translate(-50%, -50%);
  animation: fx-spark .65s cubic-bezier(.2, .8, .2, 1) forwards;
}
@keyframes fx-spark { to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.2); opacity: 0; } }
/* Anneau (boutons secondaires, bouton menu) */
.fx-ring {
  position: absolute; z-index: 1; pointer-events: none; border-radius: 50%;
  border: 1.5px solid var(--gold-light);
  transform: translate(-50%, -50%) scale(0);
  animation: fx-ring .7s cubic-bezier(.2, .8, .2, 1) forwards;
}
@keyframes fx-ring { 60% { opacity: 1; } to { transform: translate(-50%, -50%) scale(1); opacity: 0; border-width: .5px; } }
/* Cadre qui s'illumine (cartes) */
.fx-frame {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  border: 1px solid var(--gold-light); box-shadow: inset 0 0 40px rgba(224, 185, 107, .22), 0 0 24px rgba(224, 185, 107, .25);
  animation: fx-frame .8s ease-out forwards;
}
@keyframes fx-frame { from { opacity: 1; } to { opacity: 0; } }
a.card.fx-press { animation: fx-press .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes fx-press { 35% { transform: translateY(-2px) scale(.975); } }
/* Reflet qui balaie (liens de menus) */
.fx-sweep {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(224, 185, 107, 0) 20%, rgba(224, 185, 107, .32) 50%, rgba(224, 185, 107, 0) 80%);
  transform: translateX(-100%);
  animation: fx-sweep .65s cubic-bezier(.6, 0, .2, 1) forwards;
}
@keyframes fx-sweep { to { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
  .fx-ripple, .fx-spark, .fx-ring, .fx-frame, .fx-sweep { display: none; }
}

/* =====================================================================
   Apparition au défilement : fondu + légère montée, en cascade par rangée.
   La classe reveal-on est posée dans le <head> (aucun clignotement) ;
   sans JavaScript, tout reste visible.
   ===================================================================== */
.reveal-on :is(.section__head, .grid-2 > *, .grid-3 > *, .step, .why > li, .faq > details, .pricing > *, .includes > li, .spot, .prompt, .prose > *, .split__aside, .table-wrap, .cta__box > *, .note):not(.rv-done) {
  opacity: 0; transform: translateY(28px);
}
.reveal-on :is(.section__head, .grid-2 > *, .grid-3 > *, .step, .why > li, .faq > details, .pricing > *, .includes > li, .spot, .prompt, .prose > *, .split__aside, .table-wrap, .cta__box > *, .note).rv-in:not(.rv-done) {
  opacity: 1; transform: none;
  transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .9s cubic-bezier(.2, .8, .2, 1);
  transition-delay: var(--rv-d, 0ms);
}
/* Le trait doré du bloc « Pourquoi YK » se dessine à l'apparition */
.why > li { position: relative; border-top-color: transparent; }
.why > li::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: var(--hot-line); transform-origin: left; }
.reveal-on .why > li:not(.rv-done)::before { transform: scaleX(0); }
.reveal-on .why > li.rv-in:not(.rv-done)::before { transform: scaleX(1); transition: transform 1.1s cubic-bezier(.7, 0, .2, 1) calc(var(--rv-d, 0ms) + .15s); }
@media (max-width: 880px) {
  .reveal-on :is(.section__head, .grid-2 > *, .grid-3 > *, .step, .why > li, .faq > details, .pricing > *, .includes > li, .spot, .prompt, .prose > *, .split__aside, .table-wrap, .cta__box > *, .note):not(.rv-done) { transform: translateY(40px) scale(.97); }
  .reveal-on :is(.section__head, .grid-2 > *, .grid-3 > *, .step, .why > li, .faq > details, .pricing > *, .includes > li, .spot, .prompt, .prose > *, .split__aside, .table-wrap, .cta__box > *, .note).rv-in:not(.rv-done) { transform: none; transition-duration: 1s, 1.1s; }
}
/* Mobile : sections moins espacées */
@media (max-width: 640px) {
  .section { padding-block: 64px; }
  .hero__grid { padding-block: 36px 48px; gap: 32px; }
  .page-head { padding-block: 28px 48px; }
  .section__head { margin-bottom: 32px; }
  .cta__box { padding-block: 64px; }
}

/* =====================================================================
   Version plus vivante : titres Playfair, bandes crème, visuels, bandeau or
   ===================================================================== */
:root { --font-display: "Playfair Display", Georgia, "Times New Roman", serif; }
.h-xl, .h-lg, .h-md, .card--lg h3, .why strong, .price strong, .price-card strong, .ledger dd, .card__meta strong, .mnav__name, .prose h2, .legal h2, .tagline {
  font-variant-numeric: lining-nums tabular-nums;
}
.h-xl { font-weight: 500; letter-spacing: -0.015em; line-height: 1.04; }
.h-lg, .h-md { font-weight: 500; letter-spacing: -0.01em; }
.h-xl em, .h-lg em, .h-md em { font-style: italic; font-weight: 500; color: var(--gold-light); }
.card--lg h3, .card h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.005em; }
.card h3 { font-size: 22px; }
.step h3, .includes h3, .why h3, .tier h3 { font-family: var(--font-display); font-weight: 500; font-size: 21px; letter-spacing: 0; }
.faq summary { font-family: var(--font-display); font-weight: 500; font-size: 19px; letter-spacing: 0; }

/* Bandes crème : on inverse les couleurs du système à l'intérieur de la bande */
.section--cream {
  --cream: #15120d; --mist: #4b4537; --ash: #6e6656; --muted: #8b826f;
  --deep: #fffdf8; --abyss: #f6f3ec; --hot: #f3e7cc; --hot-line: #d8bf88;
  --edge: #e2d6bb; --inkline: #ebe2cd; --hairline: #d9c9a6; --slate: #c9bfa8;
  --gold-light: #9a7330; --gold: #a97f2e;
  background: #f6f3ec; color: #15120d;
}
.section--cream .btn--primary { background: #080808; color: #f6f3ec; border-color: #080808; --fill: #c89b4a; --fill-ink: #080808; }
.section--cream .btn--ghost { color: #15120d; border-color: #b9ad94; --fill: #080808; --fill-ink: #f6f3ec; }
.section--cream .card, .section--cream .faq details, .section--cream .includes li, .section--cream .table-wrap { box-shadow: 0 1px 0 rgba(21, 18, 13, .04); }
.section--cream .faq details[open] { background: #fffaf0; }
.section--cream .why strong { color: #9a7330; }
.section--cream th { background: #efe8d8; color: #7d5c22; }
.section--cream .fx-ripple { background: radial-gradient(circle, rgba(154, 115, 48, .35) 0, rgba(154, 115, 48, .1) 45%, rgba(154, 115, 48, 0) 70%); }

/* Visuels des cartes */
.card__visual { display: block; width: 100%; height: auto; border-radius: 10px; margin-bottom: 6px; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
@media (hover: hover) { a.card:hover .card__visual { transform: scale(1.025) translateY(-2px); } }
.v-frame { fill: #0d0c0a; stroke: #2a251c; }
.v-panel { fill: #1c1914; }
.v-dot { fill: #3d3a33; }
.v-line { fill: #3a342a; }
.v-rule { stroke: #2a251c; }
.v-cream { fill: #eadbb8; }
.v-gold { fill: #c89b4a; }
.v-gold-soft { fill: #8a6a2e; }
.v-old { fill: #2b2b2b; stroke: #3a3a3a; }
.v-old-dark { fill: #3e3e3e; }
.v-old-line { fill: #565656; }
.v-label { font: 600 10px/1 "Inter", sans-serif; letter-spacing: .14em; fill: #e0b96b; }
.v-label--old { fill: #8a8a8a; }
.v-handle { fill: #f6f3ec; stroke: #c89b4a; stroke-width: 2; }
.v-handle-ico { fill: none; stroke: #080808; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Illustration du lac d'Annecy */
.annecy { display: block; width: 100%; height: auto; margin-top: clamp(32px, 5vw, 56px); color: var(--gold); }
.annecy .a-ridge { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.annecy .a-ridge--far { opacity: .45; }
.annecy .a-water { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; opacity: .55; }
.annecy .a-sun { fill: none; stroke: currentColor; stroke-width: 1.4; opacity: .8; }
.annecy .a-boat { fill: currentColor; opacity: .85; }
.reveal-on .annecy .a-ridge { stroke-dasharray: 1600; stroke-dashoffset: 1600; }
.reveal-on .annecy.is-drawn .a-ridge { stroke-dashoffset: 0; transition: stroke-dashoffset 2.4s cubic-bezier(.6, 0, .2, 1); }
.reveal-on .annecy.is-drawn .a-ridge--far { transition-delay: .4s; }

/* Bandeau final en or plein */
.cta { background: #c89b4a; color: #080808; }
.cta::before { background: radial-gradient(60% 90% at 50% 0%, rgba(255, 240, 205, .45) 0, rgba(255, 240, 205, 0) 100%); }
.cta .eyebrow { color: #3b2a0c; }
.cta .h-lg em { color: #080808; }
.cta .lead { color: #2b2113; }
.cta .btn--primary { background: #080808; color: #f6f3ec; border-color: #080808; --fill: #f6f3ec; --fill-ink: #080808; }
.cta .btn--ghost { color: #080808; border-color: rgba(8, 8, 8, .55); --fill: #080808; --fill-ink: #f6f3ec; }
.cta__phone { color: #3b2a0c; }
.cta__phone a { color: #080808; background-image: linear-gradient(#080808, #080808); }
.cta .fx-ripple { background: radial-gradient(circle, rgba(255, 255, 255, .55) 0, rgba(255, 255, 255, 0) 70%); }
.card--lg h3 { font-size: clamp(26px, 2.6vw, 32px); }

/* =====================================================================
   REFONTE PREMIUM — maison noir, or et crème
   ===================================================================== */
/* Texture de grain discrète sur tout le site */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Or métallique animé */
.gold-text {
  background: linear-gradient(110deg, #9a7330 0%, #e0b96b 22%, #f8e7b8 38%, #c89b4a 52%, #e8c77f 70%, #9a7330 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: gold-shimmer 7s linear infinite;
}
@keyframes gold-shimmer { from { background-position: 0% 0; } to { background-position: -260% 0; } }

.btn--xl { padding: 15px 28px; font-size: 15.5px; }

/* Hero */
.hero2 { border-bottom: 1px solid var(--inkline); }
.hero2__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: center; padding-block: clamp(56px, 8vw, 112px) clamp(64px, 9vw, 128px); }
.display { font-family: var(--font-display); font-weight: 500; font-size: clamp(54px, 7.4vw, 112px); line-height: .98; letter-spacing: -0.025em; color: #f6f3ec; }
.display em { font-style: italic; font-weight: 500; padding-right: .06em; }
.display__kicker {
  display: flex; align-items: center; gap: 14px; margin-bottom: 26px;
  font: 500 12px/1 var(--font-ui); letter-spacing: .32em; text-transform: uppercase; color: #eadbb8;
}
.display__kicker::before { content: ""; width: 42px; height: 1px; background: linear-gradient(90deg, transparent, #e0b96b); }
.hero2__lead { margin-top: 26px; font-size: clamp(17px, 1.5vw, 19px); color: #cfc9bb; max-width: 44ch; }
.hero2 .btn-row { margin-top: 36px; }
.hero2__proof { list-style: none; padding: 0; margin-top: 40px; display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 14px; color: #a9a293; }
.hero2__proof li { display: flex; align-items: center; gap: 8px; }
.hero2__proof li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #c89b4a; box-shadow: 0 0 10px rgba(224, 185, 107, .7); }
.hero2__proof b { color: #f6f3ec; font-weight: 500; }

/* Appareils */
.devices { position: relative; aspect-ratio: 1.08; max-width: 100%; }
.devices::before { content: ""; position: absolute; inset: 10% 5% 0 10%; background: radial-gradient(closest-side, rgba(200, 155, 74, .28), rgba(200, 155, 74, 0)); filter: blur(10px); z-index: -1; }
.laptop { position: absolute; left: 0; top: 8%; width: 88%; transform: translateY(calc(var(--py, 0) * -0.4px)); }
.laptop__screen { background: #050505; padding: 2.2% 2.2% 2.6%; border-radius: 16px 16px 6px 6px; border: 1px solid #2c2720; box-shadow: 0 50px 90px rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(224, 185, 107, .08); }
.laptop__screen .mini { display: block; width: 100%; height: auto; border-radius: 6px; }
.laptop__base { position: relative; height: 16px; margin: 0 -7%; border-radius: 0 0 18px 18px; background: linear-gradient(180deg, #3a342a 0%, #1a1814 60%, #0e0d0b 100%); box-shadow: 0 30px 40px rgba(0, 0, 0, .5); }
.laptop__base::before { content: ""; position: absolute; left: 50%; top: 0; width: 18%; height: 6px; transform: translateX(-50%); border-radius: 0 0 8px 8px; background: #0e0d0b; }
.phone {
  position: absolute; right: 0; bottom: 2%; width: 31%;
  padding: 2.4%; border-radius: 30px; background: #050505; border: 1px solid #2c2720;
  box-shadow: 0 40px 70px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(224, 185, 107, .1);
  transform: translateY(calc(var(--py, 0) * -0.9px)) rotate(4deg);
}
.phone__screen { border-radius: 22px; overflow: hidden; }
.phone__screen .mini { display: block; width: 100%; height: auto; }
.chip-float {
  position: absolute; left: 4%; bottom: 6%; display: flex; align-items: center; gap: 12px;
  padding: 12px 18px 12px 12px; border-radius: 16px;
  background: rgba(246, 243, 236, .94); color: #15120d; box-shadow: 0 20px 40px rgba(0, 0, 0, .45);
  transform: translateY(calc(var(--py, 0) * -0.6px));
  animation: float-y 6s ease-in-out infinite;
}
.chip-float__dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #15120d; color: #e0b96b; }
.chip-float__dot svg { width: 16px; height: 16px; }
.chip-float b { display: block; font-size: 14px; font-weight: 600; }
.chip-float small { display: block; font-size: 12px; color: #6e6656; }
@keyframes float-y { 50% { translate: 0 -8px; } }

/* Bandeau défilant crème */
.marquee2 { background: #f6f3ec; color: #15120d; overflow: hidden; border-block: 1px solid #e2d6bb; padding-block: 22px; }
.marquee2__track { display: inline-flex; align-items: center; white-space: nowrap; animation: marquee2 42s linear infinite; }
.marquee2 span { font: italic 500 clamp(28px, 3.6vw, 48px)/1 var(--font-display); padding-inline: 28px; }
.marquee2 span:nth-of-type(even) { color: transparent; -webkit-text-stroke: 1px #9a7330; }
.marquee2 i { font-style: normal; color: #c89b4a; font-size: 18px; }
@keyframes marquee2 { to { transform: translateX(-50%); } }

/* Titre de section en deux colonnes */
.split-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; gap: 32px; max-width: none; }

/* Services en liste éditoriale */
.svc-list { list-style: none; padding: 0; border-top: 1px solid var(--hairline); }
.svc-row {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: clamp(16px, 3vw, 40px);
  padding: clamp(22px, 3vw, 34px) 12px; border-bottom: 1px solid var(--hairline); text-decoration: none; overflow: hidden; isolation: isolate;
}
.svc-row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(200, 155, 74, .14), rgba(200, 155, 74, .02)); transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.7, 0, .2, 1); }
.svc-row__icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--hot-line); color: #e0b96b; transition: background-color .4s, color .4s, transform .5s cubic-bezier(.2, .8, .2, 1); }
.svc-row__icon svg { width: 22px; height: 22px; }
.svc-row h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, 3vw, 40px); line-height: 1.1; color: #f6f3ec; transition: color .4s, transform .5s cubic-bezier(.2, .8, .2, 1); }
.svc-row__desc { display: block; margin-top: 8px; color: #a9a293; font-size: 15px; max-width: 58ch; }
.svc-row__price { text-align: right; font-family: var(--font-display); font-size: clamp(20px, 2vw, 26px); color: #eadbb8; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.svc-row__price small { display: block; font: 500 11px/1.4 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: #8a8170; }
.svc-row__go { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--ghost-line); color: #f6f3ec; transition: background-color .4s, color .4s, border-color .4s, transform .5s cubic-bezier(.2, .8, .2, 1); }
.svc-row__go svg { width: 18px; height: 18px; }
@media (hover: hover) {
  .svc-row:hover::before { transform: scaleX(1); }
  .svc-row:hover h3 { color: #e0b96b; transform: translateX(8px); }
  .svc-row:hover .svc-row__icon { background: #c89b4a; color: #080808; transform: rotate(-8deg); }
  .svc-row:hover .svc-row__go { background: #f6f3ec; color: #080808; border-color: #f6f3ec; transform: rotate(-45deg); }
}
.svc-row:focus-visible::before { transform: scaleX(1); }
.svc-list + .note { margin-top: 28px; }

/* Manifeste */
.manifesto blockquote { margin: 0 auto; max-width: 980px; text-align: center; }
.manifesto blockquote p { font-family: var(--font-display); font-weight: 500; font-size: clamp(32px, 4.6vw, 64px); line-height: 1.12; letter-spacing: -0.015em; color: #15120d; text-wrap: balance; }
.manifesto blockquote em { font-style: italic; color: #9a7330; }
.manifesto cite { display: inline-flex; align-items: center; gap: 14px; margin-top: 30px; font: 500 12px/1 var(--font-ui); font-style: normal; letter-spacing: .3em; text-transform: uppercase; color: #6e6656; }
.manifesto cite::before, .manifesto cite::after { content: ""; width: 36px; height: 1px; background: #c89b4a; }

/* Pourquoi YK, version noire */
.why--lux li { border-top: 1px solid var(--hairline); }
.why--lux strong { font-size: clamp(64px, 7vw, 104px); }

/* Frise de la méthode */
.timeline { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 30px; height: 1px; background: linear-gradient(90deg, #c89b4a, #e2d6bb); }
.timeline li { position: relative; padding-top: 70px; display: grid; gap: 10px; align-content: start; }
.timeline li::before { content: ""; position: absolute; left: 0; top: 24px; width: 13px; height: 13px; border-radius: 50%; background: #f6f3ec; border: 2px solid #c89b4a; box-shadow: 0 0 0 6px #f6f3ec; }
.tl__n { position: absolute; top: 0; left: 30px; font: italic 500 22px/1 var(--font-display); color: #9a7330; }
.timeline h3 { font-family: var(--font-display); font-weight: 500; font-size: 24px; color: #15120d; }
.timeline p { color: #4b4537; font-size: 15px; }

/* Bandeau final : or métallique */
.cta { background: linear-gradient(120deg, #8f6a2a 0%, #c89b4a 30%, #ecd09a 52%, #c89b4a 72%, #9a7330 100%); background-size: 200% 100%; animation: cta-sheen 12s ease-in-out infinite alternate; }
@keyframes cta-sheen { to { background-position: 100% 0; } }
.cta .h-lg { font-size: clamp(38px, 5.4vw, 72px); }

/* Grand nom de marque en pied de page */
.wordmark {
  margin: 56px 0 0; text-align: center; white-space: nowrap; overflow: hidden;
  font: 500 clamp(40px, 8.4vw, 124px)/1 var(--font-display); letter-spacing: -0.02em;
  color: transparent; -webkit-text-stroke: 1px rgba(224, 185, 107, .45);
}
.wordmark em { font-style: italic; -webkit-text-stroke: 0; color: rgba(234, 219, 184, .9); }

/* Apparition au défilement pour les nouveaux blocs */
.reveal-on .rv:not(.rv-done) { opacity: 0; transform: translateY(28px); }
.reveal-on .rv.rv-in:not(.rv-done) { opacity: 1; transform: none; transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .9s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--rv-d, 0ms); }

/* Responsive premium */
@media (max-width: 1040px) {
  .hero2__grid { grid-template-columns: minmax(0, 1fr); }
  .devices { max-width: 620px; margin-inline: auto; width: 100%; }
  .split-head { grid-template-columns: minmax(0, 1fr); }
  .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .timeline::before { display: none; }
}
@media (max-width: 720px) {
  .svc-row { grid-template-columns: auto minmax(0, 1fr) auto; padding-inline: 4px; }
  .svc-row__price { grid-column: 2; grid-row: 2; text-align: left; }
  .svc-row__go { grid-column: 3; grid-row: 1 / span 2; width: 40px; height: 40px; }
  .svc-row__icon { width: 42px; height: 42px; align-self: start; }
  .svc-row__desc { font-size: 14px; }
}
@media (max-width: 640px) {
  .display { font-size: clamp(46px, 13vw, 60px); }
  .hero2__grid { padding-block: 32px 56px; }
  .chip-float { left: 0; bottom: -4%; padding: 10px 14px 10px 10px; }
  .chip-float b { font-size: 13px; }
  .timeline { grid-template-columns: minmax(0, 1fr); gap: 0; padding-left: 28px; }
  .timeline::before { display: block; left: 6px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; background: linear-gradient(180deg, #c89b4a, #e2d6bb); }
  .timeline li { padding: 0 0 32px 0; }
  .timeline li::before { left: -28px; top: 4px; }
  .tl__n { position: static; }
  .marquee2 { padding-block: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .gold-text, .marquee2__track, .cta, .chip-float { animation: none !important; }
}
.timeline::before { top: 42px; }
.timeline li { padding-top: 80px; }
.timeline li::before { top: 36px; }
@media (max-width: 640px) { .timeline::before { top: 0; } .timeline li { padding-top: 0; } .timeline li::before { top: 4px; } }

/* =====================================================================
   V3 — TECH PREMIUM, VIVANT
   ===================================================================== */
/* Halo doré qui suit la souris (ordinateur) */
.spot-cursor { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .6s ease;
  background: radial-gradient(520px circle at var(--cx, 50%) var(--cy, 30%), rgba(200, 155, 74, .09), rgba(200, 155, 74, 0) 60%); }
.spot-cursor.on { opacity: 1; }

/* Hero */
.hero3 { position: relative; overflow: hidden; isolation: isolate; background:
  radial-gradient(60% 70% at 80% 10%, rgba(200, 155, 74, .16), rgba(0, 0, 0, 0) 70%),
  radial-gradient(50% 60% at 0% 100%, rgba(224, 185, 107, .08), rgba(0, 0, 0, 0) 70%), #080808; border-bottom: 1px solid var(--inkline); }
.dotgrid { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hero3__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 64px); align-items: center; padding-block: clamp(48px, 7vw, 100px) clamp(64px, 8vw, 112px); }
.mono-kicker { display: inline-flex; align-items: center; gap: 10px; font: 400 13px/1 var(--font-mono); letter-spacing: 0; color: #eadbb8; padding: 8px 14px; border: 1px solid var(--edge); border-radius: 9999px; background: rgba(21, 19, 16, .7); }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: #55d68a; box-shadow: 0 0 0 0 rgba(85, 214, 138, .6); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(85, 214, 138, 0); } 100% { box-shadow: 0 0 0 0 rgba(85, 214, 138, 0); } }
.display3 { margin-top: 26px; font-family: var(--font-display); font-weight: 500; font-size: clamp(44px, 5.6vw, 82px); line-height: 1.02; letter-spacing: -0.02em; color: #f6f3ec; }
.display3 em { font-style: italic; display: inline-block; padding-right: .05em; }
.hero3__lead { margin-top: 22px; font-size: clamp(17px, 1.4vw, 19px); color: #cfc9bb; max-width: 46ch; }
.hero3 .btn-row { margin-top: 32px; }
.hero3__proof { list-style: none; padding: 0; margin-top: 36px; display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 14px; color: #a9a293; }
.hero3__proof li { display: flex; align-items: center; gap: 8px; }
.hero3__proof li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #c89b4a; box-shadow: 0 0 10px rgba(224, 185, 107, .7); }
.hero3__proof b { color: #f6f3ec; font-weight: 500; }

/* Constructeur en direct */
.builder { position: relative; min-height: 480px; }
.builder__editor { position: absolute; left: 0; top: 0; width: 62%; z-index: 1; }
.builder__live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: 400 11px/1 var(--font-mono); color: #55d68a; letter-spacing: 0; }
.builder__live i { width: 6px; height: 6px; border-radius: 50%; background: #55d68a; animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: .2; } }
.builder__code { min-height: 262px; font-size: 12.5px; line-height: 1.75; white-space: pre-wrap; word-break: break-word; }
.caret { display: inline-block; width: 7px; height: 15px; margin-left: 1px; vertical-align: -2px; background: #e0b96b; animation: blink 1s steps(1) infinite; }
.builder__preview { position: absolute; right: 0; top: 76px; width: 66%; z-index: 2; border-radius: 14px; overflow: hidden; background: #f6f3ec; border: 1px solid #e2d6bb; box-shadow: 0 40px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(224, 185, 107, .15); }
.pv__bar { display: flex; align-items: center; gap: 12px; padding: 9px 12px; background: #ece4d3; border-bottom: 1px solid #e2d6bb; }
.pv__bar .win__dots i { background: #cdbfa3; }
.pv__url { flex: 1; padding: 4px 12px; border-radius: 9999px; background: #f6f3ec; font: 400 11px/1.2 var(--font-mono); color: #6e6656; letter-spacing: 0; }
.pv { position: relative; padding: 18px 20px 22px; min-height: 330px; color: #15120d; display: grid; gap: 12px; align-content: start; }
.pv [data-step] { opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .5s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.pv [data-step].on { opacity: 1; transform: none; }
.pv__nav { display: flex; align-items: center; gap: 10px; }
.pv__nav b { font: italic 500 15px/1 var(--font-display); margin-right: auto; }
.pv__nav span { width: 30px; height: 5px; border-radius: 3px; background: #cdbfa3; }
.pv__nav em { font: normal 600 10px/1 var(--font-ui); padding: 7px 12px; border-radius: 9999px; background: #15120d; color: #f6f3ec; }
.pv__kicker { font: 500 9px/1 var(--font-ui); letter-spacing: .22em; color: #9a7330; margin-top: 8px; }
.pv__title { font: 500 clamp(22px, 2.3vw, 30px)/1.08 var(--font-display); letter-spacing: -0.01em; }
.pv__title i { color: #9a7330; }
.pv__btns { display: flex; gap: 8px; }
.pv__btn { font: 600 10px/1 var(--font-ui); padding: 9px 16px; border-radius: 9999px; border: 1px solid #15120d; }
.pv__btn--dark { background: #15120d; color: #f6f3ec; }
.pv__img { border-radius: 10px; overflow: hidden; background: #14120f; height: 96px; }
.pv__img svg { width: 100%; height: 100%; display: block; }
.pv__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pv__cards span { height: 34px; border-radius: 8px; background: #fffdf8; border: 1px solid #e2d6bb; position: relative; }
.pv__cards span::before { content: ""; position: absolute; left: 8px; top: 9px; width: 14px; height: 14px; border-radius: 4px; background: #e0b96b; }
.pv__badge { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 9999px; background: #15120d; color: #f6f3ec; font: 600 12px/1 var(--font-ui); box-shadow: 0 10px 24px rgba(0, 0, 0, .3); }
.pv__badge span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #55d68a; color: #0d0c0a; }
.pv__badge svg { width: 12px; height: 12px; }
.pv.is-reset [data-step] { opacity: 0; transition-duration: .4s; }

/* Bento des services */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.bento__card {
  position: relative; display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 20px; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #16140f, #100f0c); border: 1px solid var(--edge);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2, .8, .2, 1), border-color .3s;
}
.bento__card::before { content: ""; position: absolute; inset: -1px; padding: 1px; border-radius: inherit; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), #e0b96b, rgba(224, 185, 107, 0) 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.bento__card::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(200, 155, 74, .12), rgba(0, 0, 0, 0) 65%); }
@media (hover: hover) { .bento__card:hover::before, .bento__card:hover::after { opacity: 1; } .bento__card:hover .bento__link { color: #e0b96b; } .bento__card:hover .bento__more svg { transform: translateX(4px); } }
.bento--vitrine { grid-column: span 4; }
.bento--refonte { grid-column: span 2; }
.bento--maint, .bento--social, .bento--news { grid-column: span 2; }
.bento__visual .card__visual { margin: 0; }
.bento__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-top: auto; }
.bento__head h3 { font: 500 clamp(21px, 2vw, 26px)/1.15 var(--font-display); }
.bento__link { text-decoration: none; color: #f6f3ec; transition: color .3s; }
.bento__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.bento__price { text-align: right; white-space: nowrap; font: 500 20px/1.1 var(--font-display); color: #eadbb8; font-variant-numeric: lining-nums tabular-nums; }
.bento__price small { display: block; font: 500 10px/1.5 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: #8a8170; }
.bento__desc { color: #a9a293; font-size: 14.5px; max-width: 52ch; }
.bento__more { color: #e0b96b; font-size: 13.5px; font-weight: 500; display: inline-flex; gap: 6px; align-items: center; }
.bento__more svg { width: 14px; height: 14px; transition: transform .3s; }

/* Avant / après */
.ba { position: relative; aspect-ratio: 5 / 3; border-radius: 12px; overflow: hidden; z-index: 2; user-select: none; border: 1px solid var(--edge); }
.ba__layer { position: absolute; inset: 0; }
.ba__layer svg { width: 100%; height: 100%; display: block; }
.ba__new { clip-path: inset(0 0 0 var(--pos)); }
.ba__tag { position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 9999px; background: rgba(0, 0, 0, .55); color: #fff; font: 600 10px/1.2 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; }
.ba__tag--gold { left: auto; right: 10px; background: #e0b96b; color: #080808; }
.ba::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; transform: translateX(-1px); background: #e0b96b; box-shadow: 0 0 12px rgba(224, 185, 107, .8); pointer-events: none; }
.ba__handle { position: absolute; top: 50%; left: var(--pos); width: 38px; height: 38px; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; background: #f6f3ec; color: #080808; box-shadow: 0 6px 18px rgba(0, 0, 0, .5); pointer-events: none; z-index: 2; }
.ba__handle svg { width: 18px; height: 18px; }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; }
.ba__range:focus-visible + * , .ba:focus-within .ba__handle { outline: 2px solid #e0b96b; outline-offset: 3px; }

/* Maintenance : liste qui se coche */
.ticks { list-style: none; padding: 0; display: grid; gap: 8px; position: relative; z-index: 2; }
.ticks li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: #0d0c0a; border: 1px solid var(--inkline); font-size: 14px; color: #cfc9bb; }
.ticks li span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--hairline); color: transparent; transition: background-color .4s, color .4s, border-color .4s; }
.ticks li span svg { width: 12px; height: 12px; }
.ticks li code { margin-left: auto; font: 400 11px/1 var(--font-mono); color: #3d3a33; transition: color .4s; }
.ticks li.done span { background: #55d68a; border-color: #55d68a; color: #0d0c0a; }
.ticks li.done code { color: #55d68a; }

/* Réseaux sociaux : fil qui défile */
.feed { height: 176px; border-radius: 14px; overflow: hidden; position: relative; z-index: 2; background: #0d0c0a; border: 1px solid var(--inkline);
  -webkit-mask: linear-gradient(transparent, #000 18%, #000 82%, transparent); mask: linear-gradient(transparent, #000 18%, #000 82%, transparent); }
.feed__track { display: grid; gap: 10px; padding: 10px; animation: feed 14s linear infinite; }
@keyframes feed { to { transform: translateY(-50%); } }
.post { display: grid; grid-template-columns: 26px 1fr; grid-template-rows: auto auto; gap: 6px 10px; padding: 10px; border-radius: 10px; background: #16140f; border: 1px solid var(--inkline); }
.post i { grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; background: #3a342a; }
.post b { height: 7px; width: 60%; border-radius: 4px; background: #eadbb8; opacity: .8; }
.post span { height: 34px; border-radius: 6px; background: #231d12; }
.post--gold span { background: linear-gradient(120deg, #9a7330, #e0b96b); }

/* Newsletter : envoi */
.mail { height: 176px; border-radius: 14px; position: relative; z-index: 2; display: grid; place-items: center; align-content: center; gap: 14px; background: #0d0c0a; border: 1px solid var(--inkline); }
.mail__env svg { width: 76px; height: 52px; fill: #16140f; stroke: #e0b96b; stroke-width: 1.6; stroke-linejoin: round; animation: env 3.6s ease-in-out infinite; }
@keyframes env { 0%, 20% { transform: translate(0, 0) rotate(0); opacity: 1; } 55% { transform: translate(60px, -40px) rotate(-12deg); opacity: 0; } 56% { transform: translate(-40px, 20px); opacity: 0; } 80%, 100% { transform: translate(0, 0); opacity: 1; } }
.mail__bar { width: 60%; height: 4px; border-radius: 4px; background: #231d12; overflow: hidden; }
.mail__bar span { display: block; height: 100%; width: 100%; background: #e0b96b; transform-origin: left; animation: mailbar 3.6s ease-in-out infinite; }
@keyframes mailbar { 0% { transform: scaleX(0); } 50%, 100% { transform: scaleX(1); } }
.mail__status { font: 400 12px/1 var(--font-mono); color: #55d68a; animation: blink 3.6s steps(1) infinite; }

/* Méthode + terminal */
.process { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.process__steps { list-style: none; padding: 0; display: grid; gap: 4px; }
.process__steps li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 18px 0; border-top: 1px solid var(--inkline); }
.process__steps li > span { font: italic 500 20px/1.3 var(--font-display); color: #e0b96b; }
.process__steps h3 { font: 500 21px/1.25 var(--font-display); }
.process__steps p { color: #a9a293; font-size: 15px; margin-top: 4px; }
.term3 { position: relative; box-shadow: 0 40px 80px rgba(0, 0, 0, .55); }
.term3__body { padding: 18px 20px 22px; font: 400 13.5px/1.9 var(--font-mono); letter-spacing: 0; min-height: 250px; }
.term3__body p { color: #8a8170; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .5s; }
.term3__body p::before { content: "❯ " attr(data-cmd); display: block; color: #f6f3ec; }
.term3__body p.on { opacity: 1; transform: none; }
.term3__body p.ok::after { content: "  ✓ " ; color: #55d68a; }
.term3__body p { margin-bottom: 10px; }

/* Pourquoi YK sur crème */
.section--cream .why li { border-top: 1px solid #d8bf88; }

/* Responsive V3 */
@media (max-width: 1040px) {
  .hero3__grid, .process { grid-template-columns: minmax(0, 1fr); }
  .builder { max-width: 640px; width: 100%; margin-inline: auto; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento--vitrine { grid-column: span 2; }
  .bento--refonte, .bento--maint, .bento--social, .bento--news { grid-column: span 1; }
}
@media (max-width: 640px) {
  .builder { min-height: 0; display: grid; gap: 14px; }
  .builder__editor, .builder__preview { position: relative; width: 100%; top: auto; }
  .builder__code { min-height: 150px; max-height: 150px; overflow: hidden; font-size: 11.5px; }
  .pv { min-height: 300px; }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento--vitrine, .bento--refonte, .bento--maint, .bento--social, .bento--news { grid-column: span 1; }
  .bento__card { padding: 18px; transform: none; }
  .display3 { font-size: clamp(40px, 11vw, 52px); }
}
@media (prefers-reduced-motion: reduce) {
  .feed__track, .mail__env svg, .mail__bar span, .pulse, .caret, .builder__live i { animation: none !important; }
  .pv [data-step], .term3__body p { opacity: 1 !important; transform: none !important; }
  .ticks li span { background: #55d68a; color: #0d0c0a; }
}
.bento__visual { aspect-ratio: 16 / 7; border-radius: 12px; overflow: hidden; } .bento__visual .card__visual { width: 100%; height: 100%; } @media (max-width: 640px) { .bento__visual { aspect-ratio: 16 / 9; } }

/* =====================================================================
   V4 — TOUTES LES PAGES ANIMÉES
   ===================================================================== */
/* Barre de progression de lecture */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 70; pointer-events: none; transform-origin: left; transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, #9a7330, #e0b96b, #f8e7b8); box-shadow: 0 0 10px rgba(224, 185, 107, .6); }

/* Hauts de page animés */
.page-head--fx { position: relative; isolation: isolate; overflow: hidden; }
.page-head--fx .dotgrid { z-index: -1; }
.page-head .eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 9999px; border: 1px solid var(--edge); background: rgba(21, 19, 16, .7);
  font: 400 12.5px/1 var(--font-mono); letter-spacing: 0; text-transform: none; color: #eadbb8; }
.page-head .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #55d68a; animation: pulse 2s infinite; }
.page-head .h-xl { font-size: clamp(40px, 5.4vw, 76px); }

/* Titres : les mots montent un par un */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.w > span { display: inline-block; transform: translateY(110%); transition: transform .9s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 55ms); }
.words-in .w > span { transform: none; }

/* Boutons aimantés */
.btn { translate: var(--tx, 0) var(--ty, 0); transition: color .35s ease, border-color .35s ease, transform .2s ease, translate .35s cubic-bezier(.2, .8, .2, 1); }

/* Démos sur les pages de service */
.demo-sec__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.demo-sec .section__head { margin-bottom: 0; }
.builder--demo { min-height: 470px; }
.ba--big { aspect-ratio: 16 / 10; border-radius: 18px; box-shadow: 0 40px 80px rgba(0, 0, 0, .55); }
.ba--big .ba__handle { width: 52px; height: 52px; }
.monitor { box-shadow: 0 40px 80px rgba(0, 0, 0, .55); }
.ticks--big { padding: 16px; gap: 10px; }
.ticks--big li { font-size: 15px; padding: 14px 16px; }
.phone-demo { position: relative; width: min(300px, 80%); margin-inline: auto; padding: 14px; border-radius: 42px; background: #050505; border: 1px solid #2c2720;
  box-shadow: 0 40px 80px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(224, 185, 107, .12); }
.phone-demo__notch { position: absolute; top: 20px; left: 50%; width: 80px; height: 20px; transform: translateX(-50%); border-radius: 12px; background: #050505; z-index: 3; }
.feed--phone { height: 520px; border-radius: 30px; }
.mail--big { height: 320px; border-radius: 20px; box-shadow: 0 40px 80px rgba(0, 0, 0, .55); }
.mail--big .mail__env svg { width: 140px; height: 96px; }
.mail--big .mail__bar { width: 50%; }

/* Cartes inclinables (3D) */
.tiltable > li, .tier, a.card, .way, .logo-card { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2, .8, .2, 1), border-color .3s, box-shadow .4s; }
@media (hover: hover) { a.card:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); translate: 0 -5px; } }
.tiltable > li { position: relative; overflow: hidden; isolation: isolate; }
.tiltable > li::before, .tier::before, .way::before { content: ""; position: absolute; inset: -1px; padding: 1px; border-radius: inherit; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), #c89b4a, rgba(200, 155, 74, 0) 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
@media (hover: hover) { .tiltable > li:hover::before, .tier:hover::before, .way:hover::before { opacity: 1; } }

/* Formule recommandée : bordure dorée qui tourne */
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.tier--hot { border: 1px solid transparent; background: linear-gradient(var(--hot), var(--hot)) padding-box, conic-gradient(from var(--ang), #4a3c22, #e0b96b, #f8e7b8, #c89b4a, #4a3c22 60%) border-box; animation: spin-ang 5s linear infinite; }
@keyframes spin-ang { to { --ang: 360deg; } }

/* Logo de la page L'agence : reflet qui passe */
.logo-card { position: relative; overflow: hidden; border-radius: 16px; border: 1px solid var(--edge); box-shadow: 0 30px 60px rgba(0, 0, 0, .5); }
.logo-card img { display: block; width: 100%; }
.logo-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(248, 231, 184, .28) 50%, transparent 65%); transform: translateX(-100%); animation: shine 4.5s ease-in-out infinite; }
@keyframes shine { 60%, 100% { transform: translateX(100%); } }

/* Contact */
.contact3__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 24px; align-items: start; }
.form3 { position: relative; display: grid; gap: 18px; padding: clamp(22px, 3.5vw, 36px); border-radius: 22px; background: linear-gradient(180deg, #16140f, #100f0c); border: 1px solid var(--edge); overflow: hidden; }
.form3__progress { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: #1f1c16; }
.form3__progress span { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(var(--fp, 0)); background: linear-gradient(90deg, #9a7330, #e0b96b, #f8e7b8); transition: transform .5s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 0 12px rgba(224, 185, 107, .7); }
.fl { position: relative; }
.fl input, .fl select, .fl textarea {
  width: 100%; padding: 24px 16px 10px; border-radius: 14px; border: 1px solid var(--edge); background: #0d0c0a; color: #f6f3ec;
  font: 400 16px/1.4 var(--font-ui); transition: border-color .3s, box-shadow .4s, background-color .3s; -webkit-appearance: none; appearance: none;
}
.fl textarea { min-height: 150px; resize: vertical; }
.fl label { position: absolute; left: 16px; top: 18px; color: #8a8170; font-size: 15.5px; pointer-events: none; transform-origin: left top; transition: transform .3s cubic-bezier(.2, .8, .2, 1), color .3s; }
.fl input:focus, .fl select:focus, .fl textarea:focus { outline: none; border-color: #e0b96b; background: #12100d; box-shadow: 0 0 0 4px rgba(224, 185, 107, .12); }
.fl input:focus + label, .fl input:not(:placeholder-shown) + label, .fl textarea:focus + label, .fl textarea:not(:placeholder-shown) + label, .fl--select label { transform: translateY(-11px) scale(.76); color: #e0b96b; }
.fl--select::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; border-right: 1.5px solid #e0b96b; border-bottom: 1.5px solid #e0b96b; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.fl.is-valid input { border-color: rgba(85, 214, 138, .5); }
.picks { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.picks legend { width: 100%; margin-bottom: 10px; font-size: 13.5px; color: #a9a293; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick span { display: inline-block; padding: 10px 16px; border-radius: 9999px; border: 1px solid var(--edge); color: #cfc9bb; font-size: 14px; cursor: pointer; transition: all .3s cubic-bezier(.2, .8, .2, 1); }
.pick input:checked + span { background: #e0b96b; border-color: #e0b96b; color: #080808; transform: scale(1.04); }
.pick input:focus-visible + span { outline: 2px solid #e0b96b; outline-offset: 3px; }
.btn--send { position: relative; justify-self: start; min-width: 250px; }
.btn--send__ok { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(.5); transition: opacity .3s, transform .4s cubic-bezier(.2, .8, .2, 1); }
.btn--send__ok svg { width: 22px; height: 22px; }
.btn--send.is-sending .btn--send__label { opacity: .4; }
.btn--send.is-sent { background: #55d68a !important; border-color: #55d68a !important; color: #080808 !important; }
.btn--send.is-sent .btn--send__label { opacity: 0; }
.btn--send.is-sent .btn--send__ok { opacity: 1; transform: none; }

.ticket { position: sticky; top: 92px; display: grid; gap: 16px; padding: 24px; border-radius: 22px; background: #f6f3ec; color: #15120d; box-shadow: 0 40px 80px rgba(0, 0, 0, .5);
  -webkit-mask: radial-gradient(circle 12px at 0 62%, transparent 98%, #000) , radial-gradient(circle 12px at 100% 62%, transparent 98%, #000); -webkit-mask-composite: source-in; mask-composite: intersect; }
.ticket__top { display: flex; align-items: center; justify-content: space-between; }
.mono { font: 400 12px/1.4 var(--font-mono); letter-spacing: 0; color: #6e6656; }
.mono b { color: #15120d; font-weight: 500; }
.ring { position: relative; width: 54px; height: 54px; display: grid; place-items: center; }
.ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 3; }
.ring__bg { stroke: #e2d6bb; }
.ring__fg { stroke: #9a7330; stroke-linecap: round; stroke-dasharray: 97.4; stroke-dashoffset: 97.4; transition: stroke-dashoffset .6s cubic-bezier(.2, .8, .2, 1), stroke .3s; }
.ring b { font: 500 12px/1 var(--font-mono); }
.ticket__label { font: italic 500 26px/1.1 var(--font-display); }
.ticket__rows { margin: 0; display: grid; gap: 0; border-top: 1px dashed #d8bf88; }
.ticket__rows div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 11px 0; border-bottom: 1px dashed #e2d6bb; font-size: 14.5px; }
.ticket__rows dt { color: #6e6656; }
.ticket__rows dd { margin: 0; overflow-wrap: anywhere; transition: color .3s; }
.ticket__rows dd.is-empty, .ticket__msg.is-empty { color: #b3a88f; }
.ticket__rows dd.flash, .ticket__msg.flash { animation: flash .5s ease; }
@keyframes flash { 0% { background: rgba(224, 185, 107, .45); } 100% { background: transparent; } }
.chip-gold { display: inline-block; padding: 4px 10px; border-radius: 9999px; background: #15120d; color: #e0b96b; font-size: 12.5px; }
.ticket__msg { min-height: 72px; padding: 14px; border-radius: 12px; background: #efe8d8; font-size: 14.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ticket__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: center; }
.status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #6e6656; }
.status i { width: 8px; height: 8px; border-radius: 50%; background: #c89b4a; animation: blink 1.2s infinite; }
.status.ready { color: #1f8a4c; }
.status.ready i { background: #55d68a; animation: none; }
.ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 24px; }
.way { position: relative; display: flex; gap: 14px; align-items: center; padding: 20px; border-radius: 18px; background: #12100d; border: 1px solid var(--edge); text-decoration: none; color: #cfc9bb; font-size: 14.5px; }
.way > svg { width: 22px; height: 22px; color: #e0b96b; flex: none; }
.way b { display: block; color: #f6f3ec; font-weight: 500; }
a.way[href^="tel"] span { font-family: var(--font-mono); }

/* 404 : glitch */
.endpage .notfound { min-height: 72vh; }
.glitch { position: relative; margin: 0; font: 500 clamp(110px, 22vw, 220px)/1 var(--font-display); letter-spacing: -0.04em; color: #f6f3ec; }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; inset: 0; }
.glitch::before { color: #e0b96b; animation: glitch-a 2.4s infinite steps(1); clip-path: inset(0 0 60% 0); }
.glitch::after { color: #55d68a; opacity: .7; animation: glitch-b 2.4s infinite steps(1); clip-path: inset(60% 0 0 0); }
@keyframes glitch-a { 0%, 86%, 100% { transform: none; } 88% { transform: translate(-6px, -2px); } 92% { transform: translate(5px, 1px); } 96% { transform: translate(-3px, 2px); } }
@keyframes glitch-b { 0%, 84%, 100% { transform: none; } 87% { transform: translate(6px, 2px); } 91% { transform: translate(-5px, -1px); } 95% { transform: translate(3px, -2px); } }

/* Merci : coche + confettis */
.bigcheck { width: 120px; height: 120px; }
.bigcheck circle { fill: rgba(85, 214, 138, .1); stroke: #55d68a; stroke-width: 3; stroke-dasharray: 340; stroke-dashoffset: 340; animation: draw 1s cubic-bezier(.6, 0, .2, 1) .2s forwards; }
.bigcheck path { fill: none; stroke: #55d68a; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 80; stroke-dashoffset: 80; animation: draw .6s cubic-bezier(.6, 0, .2, 1) 1s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.confetti i { position: absolute; top: -20px; width: 8px; height: 14px; border-radius: 2px; background: #e0b96b; animation: confetti-fall var(--d, 3s) cubic-bezier(.3, .5, .4, 1) var(--delay, 0s) forwards; opacity: 0; }
@keyframes confetti-fall { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--dx, 0), 110vh) rotate(var(--rot, 540deg)); } }

/* Responsive V4 */
@media (max-width: 1040px) {
  .demo-sec__grid, .contact3__grid { grid-template-columns: minmax(0, 1fr); }
  .builder--demo { max-width: 640px; margin-inline: auto; width: 100%; }
  .ticket { position: relative; top: auto; }
}
@media (max-width: 640px) {
  .builder--demo { min-height: 0; }
  .feed--phone { height: 420px; }
  .mail--big { height: 240px; }
  .btn--send { width: 100%; }
  .ticket__rows div { grid-template-columns: 84px minmax(0, 1fr); }
  .page-head .h-xl { font-size: clamp(36px, 10vw, 48px); }
}
@media (prefers-reduced-motion: reduce) {
  .w > span { transform: none !important; }
  .tier--hot, .logo-card::after, .glitch::before, .glitch::after, .confetti i { animation: none !important; }
  .bigcheck circle, .bigcheck path { stroke-dashoffset: 0; animation: none; }
}
.form3.shake { animation: shake .45s cubic-bezier(.36,.07,.19,.97); } @keyframes shake { 20%, 60% { translate: -8px 0; } 40%, 80% { translate: 8px 0; } }
.glitch::before, .glitch::after { opacity: 0; }
@keyframes glitch-a { 0%, 86%, 100% { transform: none; opacity: 0; } 88% { transform: translate(-6px, -2px); opacity: 1; } 92% { transform: translate(5px, 1px); opacity: 1; } 96% { transform: translate(-3px, 2px); opacity: 1; } }
@keyframes glitch-b { 0%, 84%, 100% { transform: none; opacity: 0; } 87% { transform: translate(6px, 2px); opacity: .8; } 91% { transform: translate(-5px, -1px); opacity: .8; } 95% { transform: translate(3px, -2px); opacity: .8; } }

/* ---- Correctifs QA ---- */
/* Le titre principal s'anime tout seul en CSS : il ne peut jamais rester caché */
h1 .w > span { transform: none; animation: word-up .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.1s + var(--i, 0) * 60ms); }
@keyframes word-up { from { transform: translateY(110%); } to { transform: none; } }
/* Constructeur : éditeur et aperçu côte à côte, sans se cacher l'un l'autre */
.builder { min-height: 500px; }
.builder__editor { width: 50%; }
.builder__preview { top: 44px; width: 55%; }
.builder__code { min-height: 300px; }
/* Aperçu vide : un repère « aperçu en direct » en attendant le premier élément */
.pv::before {
  content: "Aperçu en direct"; position: absolute; inset: 18px 20px 22px; display: grid; place-items: center;
  border: 1px dashed #d8ccb2; border-radius: 12px; font: 400 12px/1 var(--font-mono); letter-spacing: 0; color: #b3a88f;
  transition: opacity .4s ease;
}
.pv.has-content::before { opacity: 0; }
@media (max-width: 640px) {
  .builder__editor, .builder__preview { width: 100%; top: auto; }
  .builder { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { h1 .w > span { animation: none; } }
.pv:has([data-step].on)::before { opacity: 0; } @media (prefers-reduced-motion: reduce) { .pv::before { display: none; } }
.builder { min-height: 640px; }
.builder__editor { width: 84%; top: 0; left: 0; }
.builder__code { min-height: 196px; }
.builder__preview { top: 236px; width: 76%; right: 0; }
.builder--demo { min-height: 640px; }
@media (max-width: 1040px) { .builder { min-height: 660px; } }
@media (max-width: 640px) {
  .builder, .builder--demo { min-height: 0; }
  .builder__editor, .builder__preview { width: 100%; top: auto; }
  .builder__code { min-height: 150px; }
}
.monitor { position: relative; inset: auto; width: 100%; }
.prose .areas { display: flex; flex-wrap: wrap; gap: 8px; }
.prose .areas li { padding: 6px 14px; }
.prose .areas li::before { display: none; }
a.way[href^="tel"] span { font-family: var(--font-ui); } a.way[href^="tel"] span { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
@media (max-width: 640px) { .wordmark { font-size: 8.2vw; margin-top: 40px; } }
/* 404 : glitch simple et fiable (ombres décalées + léger tremblement), sans couches superposées */
.glitch::before, .glitch::after { content: none !important; display: none !important; }
.glitch { animation: glitch-main 3.2s infinite; }
@keyframes glitch-main {
  0%, 84%, 100% { transform: none; text-shadow: none; }
  86% { transform: translate(-3px, 1px) skewX(-4deg); text-shadow: 4px 0 #e0b96b, -4px 0 rgba(246, 243, 236, .35); }
  89% { transform: translate(3px, -1px) skewX(3deg); text-shadow: -5px 0 #e0b96b, 5px 0 rgba(246, 243, 236, .35); }
  92% { transform: none; text-shadow: 2px 0 #c89b4a; }
  95% { transform: translate(-2px, 0); text-shadow: none; }
}
/* L'italique ne doit jamais être rogné par le cache d'animation des mots */
.w { padding-right: .14em; margin-right: -.14em; }
@media (prefers-reduced-motion: reduce) { .glitch { animation: none; } }
/* Bouton « Espace client » dans l'en-tête */
.nav__account { gap: 8px; }
.nav__account svg { width: 16px; height: 16px; }
@media (max-width: 1180px) { .nav__tel { display: none; } }