/* ==========================================================================
   BatiWeb — version PREMIUM (proposition locale)
   Même contenu, mêmes offres, mêmes outils : seule la couche visuelle change.
   Chargé APRÈS styles.css : tout ce qui suit remplace l'ancien rendu.
   Direction : noyer profond + crème + ambre incandescent, verre dépoli,
   typographie éditoriale (Inter serré + Instrument Serif italique), lumière qui suit le curseur.
   ========================================================================== */

/* Inter est une police variable : on déclare toute la plage de graisses (le site n'utilisait que 400 et 500) */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- 0. fondations ---------- */
:root {
  --bg: #090502;
  --walnut: #0a0502;
  --bark: #1a0f08;
  --cork: rgba(255, 237, 215, .10);
  --drift: rgba(255, 237, 215, .30);
  --cream: #fff4e4;
  --cream-80: rgba(255, 238, 218, .78);
  --cream-60: rgba(255, 238, 218, .58);
  --cream-40: rgba(255, 238, 218, .34);
  --cream-16: rgba(255, 238, 218, .14);
  --cream-08: rgba(255, 238, 218, .07);
  --ember: #ff8a3d;
  --amber: #ffb36b;
  --amber-2: #ff8a3d;
  --amber-glow: rgba(255, 146, 66, .28);
  --serif: 'Instrument Serif', 'Times New Roman', serif;
  --line: rgba(255, 237, 215, .09);
  --line-2: rgba(255, 237, 215, .17);
  --glass: linear-gradient(180deg, rgba(255, 237, 215, .062), rgba(255, 237, 215, .018));
  --glass-hi: linear-gradient(180deg, rgba(255, 237, 215, .095), rgba(255, 237, 215, .03));
  --shadow-card: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 40px 80px -40px rgba(0, 0, 0, .85), 0 12px 24px -16px rgba(0, 0, 0, .6);
  --r-card: 24px;
  --r-ghost: 999px;
  --r-pill: 999px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --spring: cubic-bezier(.34, 1.4, .64, 1);
}

html { background: var(--bg); }
body {
  background: transparent;
  font: 400 16px/1.6 var(--font);
  letter-spacing: -.011em;
  text-transform: none;
  color: var(--cream);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--amber); color: #1a0e06; }

/* fond ambiant : lueurs ambre qui dérivent lentement + vignette + grain (créés par premium.js) */
.fx { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict; }
.fx i { position: absolute; border-radius: 50%; will-change: transform; }
.fx .a { width: 78vmax; height: 78vmax; left: -26vmax; top: -34vmax; background: radial-gradient(closest-side, rgba(224, 124, 52, .20), transparent 70%); animation: driftA 28s ease-in-out infinite alternate; }
.fx .b { width: 64vmax; height: 64vmax; right: -28vmax; top: 6vh; background: radial-gradient(closest-side, rgba(132, 66, 24, .30), transparent 70%); animation: driftB 34s ease-in-out infinite alternate; }
.fx .c { width: 56vmax; height: 56vmax; left: 18vw; bottom: -34vmax; background: radial-gradient(closest-side, rgba(255, 176, 96, .11), transparent 70%); animation: driftC 40s ease-in-out infinite alternate; }
.fx::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 10%, transparent 50%, rgba(0, 0, 0, .42)); }
@keyframes driftA { to { transform: translate3d(12vmax, 10vmax, 0) scale(1.14); } }
@keyframes driftB { to { transform: translate3d(-14vmax, 12vmax, 0) scale(.92); } }
@keyframes driftC { to { transform: translate3d(10vmax, -8vmax, 0) scale(1.2); } }
.grain { position: fixed; inset: -60%; z-index: 140; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 7s steps(8) infinite; }
@keyframes grain { 0% { transform: translate(0, 0) } 25% { transform: translate(-3%, 2%) } 50% { transform: translate(2%, -3%) } 75% { transform: translate(-2%, -1%) } 100% { transform: translate(0, 0) } }

/* barre de progression */
.prog { height: 3px; }
.prog i { background: linear-gradient(90deg, transparent, var(--amber) 35%, #fff1d8); box-shadow: 0 0 18px var(--amber-glow); }

/* ---------- 1. typographie ---------- */
.display { font-size: clamp(46px, min(7.6vw, 10.2vh), 128px); line-height: .94; font-weight: 500; letter-spacing: -.05em; }
.h2 { font-size: clamp(38px, 6vw, 104px); line-height: .96; font-weight: 500; letter-spacing: -.045em; }
.h3 { font-size: clamp(24px, 2.7vw, 42px); line-height: 1.02; font-weight: 500; letter-spacing: -.035em; }
.eyebrow { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.body { font-size: clamp(16px, 1.15vw, 18px); line-height: 1.6; color: var(--cream-80); letter-spacing: -.011em; }
.body-l { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.5; color: var(--cream-80); }
.legal { font: 400 11.5px/1.5 var(--font); letter-spacing: 0; text-transform: none; opacity: .55; }
.ember-link { color: var(--amber); font-size: 14px; background-image: linear-gradient(currentColor, currentColor); }
.num { font-variant-numeric: tabular-nums; letter-spacing: -.04em; }

/* mot d'accent : Instrument Serif italique, dégradé ambre */
.display em, .h2 em, .h3 em, .manifest-t em, .w.em > span, .st-h .w.em > span, .df-t em, .cta-line__t b em {
  font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.02em;
  background: linear-gradient(100deg, #ffe9cc 0%, #ffbf7d 40%, #ff8f45 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  padding-right: .08em;
}
.display em { font-size: 1.06em; }
.w.em > span { font-size: 1.06em; }
/* Les mots d'accent en italique débordent de leur boîte : la queue du « p » à gauche, le jambage du « p » et du « q » en bas.
   Le dégradé n'est peint que dans la boîte du mot, et le masque de révélation (.w) coupe tout ce qui dépasse :
   on agrandit les deux boîtes, avec des marges négatives égales pour que la mise en page ne bouge pas. */
.w.em { padding: .2em .14em .3em .2em; margin: -.2em -.14em -.3em -.2em; }
.w.em > span { padding: .06em .12em .22em .16em; margin: -.06em -.12em -.22em -.16em; }
/* les mots sont masqués pour la révélation : on laisse de la place aux jambages de l'italique */
.display .ln { padding-bottom: .14em; margin-bottom: -.14em; }
.w { padding: .16em 0 .16em; margin: -.16em 0 -.16em; }

/* ---------- 2. boutons ---------- */
.btn { font: 500 15px/1 var(--font); letter-spacing: -.012em; text-transform: none; gap: 12px; position: relative; isolation: isolate; overflow: hidden; }
.btn .ic { width: 18px; height: 18px; }
.btn.cta {
  background: linear-gradient(180deg, #fffaf1 0%, #ffe5c2 100%); color: #1a0e06; border: 0; border-radius: 99px; padding: 17px 24px 17px 28px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .85) inset, 0 -2px 6px rgba(200, 120, 50, .18) inset, 0 12px 32px -10px rgba(255, 146, 66, .55), 0 2px 6px rgba(0, 0, 0, .4);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), background .4s;
}
.btn.cta::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .85) 50%, transparent 68%); transform: translateX(-130%); transition: transform .9s var(--ease); }
.btn.cta:hover { background: linear-gradient(180deg, #fffdf8 0%, #ffecd2 100%); color: #1a0e06; box-shadow: 0 1px 0 #fff inset, 0 -2px 6px rgba(200, 120, 50, .2) inset, 0 18px 46px -8px rgba(255, 146, 66, .75), 0 2px 6px rgba(0, 0, 0, .4); }
.btn.cta:hover::before { transform: translateX(130%); }
.btn.cta .ic { width: 28px; height: 28px; padding: 7px; border-radius: 50%; background: #1a0e06; color: #ffe5c2; margin-right: -10px; transition: transform .5s var(--spring), background .3s; }
.btn.cta:hover .ic { transform: translateX(3px) scale(1.08); }
.btn.cta.sm { padding: 10px 14px 10px 18px; font-size: 14px; box-shadow: 0 1px 0 rgba(255, 255, 255, .85) inset, 0 8px 22px -8px rgba(255, 146, 66, .5); }
.btn.cta.sm .ic { width: 22px; height: 22px; padding: 5px; margin-right: -4px; }
.btn.cta.lg { padding: 20px 26px 20px 32px; font-size: 16px; }
.btn.cta.lg .ic { width: 32px; height: 32px; padding: 8px; }
.pulse { background: #1a0e06; }

.btn.ghost { background: rgba(255, 237, 215, .04); border: 1px solid var(--line-2); border-radius: 99px; padding: 15px 24px; color: var(--cream); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background .4s, border-color .4s, transform .5s var(--ease), box-shadow .5s; }
.btn.ghost:hover { background: rgba(255, 237, 215, .10); color: var(--cream); border-color: rgba(255, 237, 215, .42); box-shadow: 0 10px 30px -12px rgba(255, 146, 66, .35); }
.btn.sm { font-size: 14px; }
.btn.fill { background: var(--glass-hi); color: var(--cream); border: 1px solid var(--line-2); }
.btn:active { transform: scale(.97); }

/* ---------- 3. navigation : deux pastilles de verre ---------- */
.nav { height: auto; padding: 14px var(--pad) 0; align-items: flex-start; pointer-events: none; }
.nav::before { display: none; }
.nav > * { pointer-events: auto; }
.logo { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 20px 0 14px; border-radius: 99px; font: 600 17px/1 var(--font); letter-spacing: -.035em;
  background: rgba(20, 11, 6, .55); border: 1px solid var(--line); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .8); transition: background .4s, border-color .4s; }
.logo::before { content: ''; width: 22px; height: 22px; border-radius: 7px; background: conic-gradient(from 210deg, #ffe0b4, #ff9b4d, #b8480f, #ffd49c, #ffe0b4); box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) inset, 0 0 18px var(--amber-glow); }
.nav-links { gap: 2px; padding: 5px; height: 48px; border-radius: 99px; font-size: 14px; letter-spacing: -.012em;
  background: rgba(20, 11, 6, .55); border: 1px solid var(--line); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .8); transition: background .4s, border-color .4s; }
.nav.scrolled .logo, .nav.scrolled .nav-links { background: rgba(14, 8, 4, .78); border-color: var(--line-2); }
.nav-links a:not(.btn) { padding: 0 16px; height: 38px; display: inline-flex; align-items: center; border-radius: 99px; color: var(--cream-60); z-index: 1; transition: color .3s; }
.nav-links a:not(.btn):hover, .nav-links a.on { color: var(--cream); }
.nav-ind { top: 5px; bottom: 5px; height: auto; border: 0; border-radius: 99px; background: rgba(255, 237, 215, .10); box-shadow: 0 0 0 1px rgba(255, 237, 215, .10) inset; transition: transform .6s var(--ease), width .6s var(--ease), opacity .3s; }
.nav-links .btn { margin-left: 4px; height: 38px; padding: 0 12px 0 18px; }

.side { right: 14px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--cream-60); }
.side b { color: var(--amber); }
.side i { border-left: 1px solid var(--line-2); }

/* ---------- 4. hero ---------- */
.hero { isolation: isolate; }
.hero-veil { background:
  radial-gradient(70% 60% at 82% 8%, rgba(255, 146, 66, .22), transparent 60%),
  linear-gradient(90deg, rgba(9, 5, 2, .94) 0%, rgba(9, 5, 2, .66) 36%, rgba(9, 5, 2, .08) 66%, rgba(9, 5, 2, .3) 100%),
  linear-gradient(0deg, var(--bg) 0%, rgba(9, 5, 2, 0) 26%),
  linear-gradient(180deg, rgba(9, 5, 2, .7) 0%, rgba(9, 5, 2, 0) 22%); }
.hero-light { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: .9;
  background: radial-gradient(520px circle at var(--lx, 70%) var(--ly, 30%), rgba(255, 168, 90, .20), transparent 60%); }
.hero-photo img { filter: brightness(.66) contrast(1.08) saturate(.95) sepia(.14); }
.hero-copy { padding-top: calc(var(--nav-h) + 4vh); }
@media (min-width: 901px) { .hero-copy { padding-top: calc(var(--nav-h) + 7vh); padding-bottom: 200px; } }
@media (min-width: 901px) and (max-height: 960px) { .hero-copy { padding-bottom: 150px; } }
/* écrans de portable (hauteur ≤ 860 px) : titre un peu plus petit pour que tout l'accueil tienne dans l'écran */
@media (min-width: 901px) and (max-height: 860px) {
  .display { font-size: clamp(44px, min(6.4vw, 10.4vh), 110px); }
  .hero-copy { padding-top: calc(var(--nav-h) + 4vh); }
  .hero-copy .lead { margin: 18px 0 22px; }
  .trust { margin-top: 16px; }
}
@media (min-width: 901px) and (max-height: 700px) { .trust { display: none; } }
.hero-copy .eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 12px; border-radius: 99px; border: 1px solid var(--line-2); background: rgba(255, 237, 215, .05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--cream-80); letter-spacing: .12em; font-size: 11.5px; }
.hero-copy .eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px rgba(255, 179, 107, .18), 0 0 14px var(--amber); animation: blink 2.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .45; box-shadow: 0 0 0 7px rgba(255, 179, 107, 0), 0 0 6px var(--amber); } }
.hero-copy .lead { font-size: clamp(17px, 1.5vw, 22px); line-height: 1.5; color: var(--cream-80); max-width: 36ch; }
.trust { gap: 10px 12px; font-size: 13px; letter-spacing: -.005em; color: var(--cream-80); }
.trust li { padding: 8px 14px 8px 11px; border-radius: 99px; border: 1px solid var(--line); background: rgba(255, 237, 215, .04); gap: 8px; }
.trust .ic { color: var(--amber); width: 15px; height: 15px; }

.hero-card, .hero-thumb { background: var(--glass-hi); border: 1px solid var(--line-2); box-shadow: var(--shadow-card); border-radius: 22px; backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4); }
.hc-t { font-size: 20px; letter-spacing: -.03em; line-height: 1.1; }
.hc-p { font-size: 15px; }
.hero-thumb { transition: transform .7s var(--ease), border-color .4s, box-shadow .6s; }
.hero-thumb:hover { transform: translateY(-8px) scale(1.02); border-color: rgba(255, 213, 160, .55); box-shadow: var(--shadow-card), 0 30px 70px -20px rgba(255, 146, 66, .55); }
.th-bar { font-size: 12px; letter-spacing: -.01em; }
.th-bar b { font-weight: 600; }
.th-play { background: linear-gradient(180deg, #fffaf1, #ffe0b4); box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
.th-lab { font-size: 13px; border-top: 1px solid var(--line); background: rgba(9, 5, 2, .5); }
.hero-scroll { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--cream-60); }
.hero-scroll i { background: linear-gradient(var(--amber), transparent); }

.badge-demo { background: radial-gradient(circle at 30% 25%, #fff4e0, #ffd9a8 55%, #ffb36b); color: #1a0e06; box-shadow: 0 20px 50px -14px rgba(255, 146, 66, .6), 0 1px 0 rgba(255, 255, 255, .8) inset; }
.bd-ring text { font: 600 12px var(--font); letter-spacing: .22em; }
.bd-ar { background: #1a0e06; color: #ffe5c2; }

/* bandeau des métiers */
.marquee { border: 0; padding: 26px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); position: relative; }
.marquee::before, .marquee::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line-2), transparent); }
.marquee::before { top: 0; } .marquee::after { bottom: 0; }
.mq-track { font-size: clamp(26px, 3.6vw, 56px); letter-spacing: -.045em; font-weight: 500; gap: 44px; }
.mq-track span:nth-of-type(even) { -webkit-text-stroke: 1px rgba(255, 237, 215, .55); font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; font-size: 1.08em; }
.mq-track i { width: 9px; height: 9px; border: 0; border-radius: 2px; background: var(--amber); transform: rotate(45deg); box-shadow: 0 0 16px var(--amber-glow); }

/* ---------- 5. rythme des sections ---------- */
.sec, .manifest { padding-block: clamp(100px, 15vh, 210px); }
.chap { gap: 16px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--cream-60); margin-bottom: clamp(30px, 5vh, 60px); }
.chap span:first-child { display: inline-grid; place-items: center; height: 28px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line-2); background: rgba(255, 237, 215, .05); color: var(--amber); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.chap i { border: 0; height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); }
.sec-head { align-items: end; }
.sec-head .body-l { max-width: 26em; }
.js [data-r] { opacity: 0; transform: translateY(44px) scale(.985); filter: blur(10px); transition: opacity 1.1s var(--ease) var(--d, 0ms), transform 1.2s var(--ease) var(--d, 0ms), filter 1s var(--ease) var(--d, 0ms); }
.js [data-r].in { opacity: 1; transform: none; filter: none; }
.js [data-split] .w > span { transform: translateY(130%) rotate(3deg); transform-origin: 0 100%; }
.js [data-split].in .w > span { transform: none; transition: transform 1.15s var(--ease) calc(var(--i) * 50ms); }

/* manifeste */
.manifest-t { font-size: clamp(30px, 5.4vw, 92px); line-height: 1.02; letter-spacing: -.05em; max-width: 17em; font-weight: 500; }
.fw { transition: opacity .3s linear, filter .3s linear; filter: blur(calc((1 - var(--o, .2)) * 2.2px)); }
.fw.em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; color: var(--amber); font-size: 1.06em; }

/* ---------- 6. lumière partagée : bordure qui s'allume sous le curseur + halo (classe .glow posée par premium.js) ---------- */
.glow { --mx: 50%; --my: 0%; }
:where(.demo-flow, .cta-line, .calc-in, .calc-out, .faq-item, .next-link, .df-steps li).glow { position: relative; }   /* les autres cartes sont déjà positionnées (absolute, sticky ou relative) : on ne touche pas */
.glow::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease); z-index: 2;
  background: radial-gradient(380px circle at var(--mx) var(--my), rgba(255, 200, 138, .95), rgba(255, 146, 66, .38) 42%, transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.glow::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease); z-index: 0;
  background: radial-gradient(520px circle at var(--mx) var(--my), rgba(255, 200, 138, .10), transparent 62%); }
.glow:hover::before, .glow:hover::after, .glow:focus-visible::before { opacity: 1; }
.glow > .march { display: none; }

/* ---------- 7. scène du téléphone ---------- */
.st-h { font-size: clamp(32px, 3.9vw, 66px); line-height: 1; letter-spacing: -.05em; }
.st-p { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.5; color: var(--cream-80); max-width: 19em; }
.phone-wrap { position: relative; }
.phone-wrap::before { content: ''; position: absolute; left: 50%; top: 50%; width: 170%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 150, 70, .32), rgba(255, 150, 70, .10) 46%, transparent 72%); animation: halo 6.5s ease-in-out infinite; }
.phone-wrap::after { content: ''; position: absolute; left: 50%; bottom: -5%; width: 80%; height: 7%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .65), transparent); filter: blur(8px); pointer-events: none; }
@keyframes halo { 0%, 100% { opacity: .75; transform: translate(-50%, -50%) scale(.94); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } }
.phone-body { background: linear-gradient(150deg, #9a7656 0%, #4a3020 20%, #1a0f08 52%, #6a4a33 100%); border: 1px solid rgba(255, 226, 190, .38); box-shadow: 0 0 0 1px rgba(0, 0, 0, .55) inset, 0 40px 80px rgba(0, 0, 0, .55); }
.phone-edge i { background: #2c1b10; border-color: rgba(255, 220, 180, .16); }
.phone-screen { background: #070402; }
.phone-sheen { background: linear-gradient(115deg, transparent calc(var(--sx, 70%) - 26%), rgba(255, 226, 190, .17) var(--sx, 70%), transparent calc(var(--sx, 70%) + 26%)); }
.notif { background: linear-gradient(180deg, #2a1a10, #1e120a); border: 1px solid rgba(255, 237, 215, .13); }
.st-nav { gap: 10px; }
.st-nav button { width: 66px; gap: 10px; font-size: 12px; letter-spacing: .1em; opacity: .5; }
.st-nav button i { border: 0; height: 3px; border-radius: 3px; background: rgba(255, 237, 215, .16); overflow: hidden; }
.st-nav button i::after { top: 0; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--amber), #fff0d8); }

/* ---------- 8. métiers ---------- */
.mt-list li { border-top: 1px solid var(--line); }
.mt-list li:last-child { border-bottom: 1px solid var(--line); }
.mt-list button { font-size: clamp(25px, 3.3vw, 56px); letter-spacing: -.05em; line-height: 1; color: var(--cream-40); padding: clamp(16px, 2.4vh, 26px) 0; align-items: center; transition: color .4s var(--ease), padding .6s var(--ease), background .5s; }
.mt-list button i { color: var(--amber); letter-spacing: .1em; font-size: 12px; }
.mt-list button:hover, .mt-list button[aria-selected="true"] { color: var(--cream); padding-left: 22px; }
.mt-list button[aria-selected="true"] { background: linear-gradient(90deg, rgba(255, 179, 107, .12), transparent 70%); box-shadow: inset 3px 0 0 var(--amber); }
.mt-list button em { font-size: 12px; letter-spacing: 0; padding: 6px 12px; border-radius: 99px; border: 1px solid rgba(255, 179, 107, .4); background: rgba(255, 179, 107, .1); color: var(--amber); margin-right: 14px; }
.mock { border: 1px solid var(--line-2); border-radius: 26px; background: linear-gradient(180deg, rgba(255, 237, 215, .07), rgba(255, 237, 215, .02)); box-shadow: var(--shadow-card), 0 70px 140px -60px rgba(255, 146, 66, .35); }
.mk-bar { padding: 14px 16px; border-bottom: 1px solid var(--line); gap: 8px; background: rgba(9, 5, 2, .45); }
.mk-bar i { width: 11px; height: 11px; border: 0; }
.mk-bar i:nth-child(1) { background: #ff6a5f; } .mk-bar i:nth-child(2) { background: #ffbd4a; } .mk-bar i:nth-child(3) { background: #3ecf5a; }
.mk-url { border: 1px solid var(--line); background: rgba(255, 237, 215, .05); font-size: 12px; letter-spacing: 0; padding: 7px 14px; }
.mk-open { font-size: 12px; border-color: rgba(255, 179, 107, .45); color: var(--amber); background: rgba(255, 179, 107, .08); }
.mock:hover .mk-open { background: linear-gradient(180deg, #fffaf1, #ffe0b4); color: #1a0e06; border-color: transparent; }
.pv-hint { background: rgba(9, 5, 2, .8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-color: var(--line-2); font-size: 12px; letter-spacing: 0; }

/* ---------- 9. démos ---------- */
.demo-grid { gap: 20px; }
.proj { background: var(--glass); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow-card); transition: border-color .4s, transform .7s var(--ease), box-shadow .7s var(--ease); }
.proj:hover, .proj:focus-visible { border-color: transparent; box-shadow: var(--shadow-card), 0 50px 100px -40px rgba(255, 146, 66, .45); }
.proj-screen { border-bottom: 1px solid var(--line); background: #120a05; }
.proj-screen::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(9, 5, 2, .75)); pointer-events: none; z-index: 1; }
.proj-meta { padding: 24px 26px 26px; gap: 14px; }
.proj-meta .h3 { font-size: clamp(26px, 2.4vw, 38px); letter-spacing: -.05em; }
.proj-meta .body { font-size: 15px; }
.proj-open { padding: 10px 16px; border: 1px solid var(--line-2); border-radius: 99px; background: rgba(255, 237, 215, .04); font-size: 13px; font-weight: 500; letter-spacing: -.005em; transition: background .4s, color .4s, border-color .4s; }
.proj:hover .proj-open { background: linear-gradient(180deg, #fffaf1, #ffe0b4); color: #1a0e06; border-color: transparent; }
.proj-next { border-style: solid; background: linear-gradient(120deg, rgba(255, 179, 107, .14), rgba(255, 237, 215, .02) 60%); }
.proj-next .proj-screen { border-right: 1px solid var(--line); background: transparent; }
.proj-next .proj-screen::after { display: none; }
.proj-next .proj-screen .ic { color: var(--amber); }

/* ---------- 10. simulation ---------- */
.calc-in, .calc-out { border: 1px solid var(--line); border-radius: 30px; background: var(--glass); box-shadow: var(--shadow-card); padding: clamp(26px, 3vw, 46px); }
.calc-in { gap: clamp(28px, 4.5vh, 50px); }
.calc-out { background: linear-gradient(180deg, rgba(255, 179, 107, .12), rgba(255, 237, 215, .025) 55%); border-color: rgba(255, 179, 107, .28); box-shadow: var(--shadow-card), 0 60px 120px -60px rgba(255, 146, 66, .5); }
.field label, .field .lbl { font-size: 15px; opacity: 1; color: var(--cream-80); margin-bottom: 10px; letter-spacing: -.012em; }
.big-out { font-size: clamp(46px, 5vw, 82px); letter-spacing: -.06em; line-height: .95; margin-bottom: 18px; padding: 0 .1em .04em 0; background: linear-gradient(180deg, #ffffff, #ffd7a6); -webkit-background-clip: text; background-clip: text; color: transparent; width: fit-content; }
.big-out.sm { font-size: clamp(34px, 3.6vw, 56px); }
.range { height: 36px; }
.range::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--amber-2), var(--amber) var(--p), rgba(255, 237, 215, .13) var(--p)); box-shadow: 0 0 18px rgba(255, 146, 66, .22); }
.range::-moz-range-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--amber-2), var(--amber) var(--p), rgba(255, 237, 215, .13) var(--p)); }
.range::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -11px; border: 0; background: radial-gradient(circle at 35% 30%, #fff, #ffe3c0); box-shadow: 0 0 0 6px rgba(255, 179, 107, .22), 0 6px 18px rgba(0, 0, 0, .6); transition: transform .3s var(--spring), box-shadow .3s; }
.range::-moz-range-thumb { width: 28px; height: 28px; border: 0; background: radial-gradient(circle at 35% 30%, #fff, #ffe3c0); box-shadow: 0 0 0 6px rgba(255, 179, 107, .22), 0 6px 18px rgba(0, 0, 0, .6); }
.range:hover::-webkit-slider-thumb { transform: scale(1.12); box-shadow: 0 0 0 9px rgba(255, 179, 107, .24), 0 6px 18px rgba(0, 0, 0, .6); }
.range:active::-webkit-slider-thumb { transform: scale(1.22); }
.range-ticks { font-size: 12px; opacity: .6; letter-spacing: 0; }
.co-k { font-size: clamp(14px, 1.15vw, 17px); line-height: 1.45; color: var(--cream-80); }
.co-k b, .co-k .num { color: var(--amber); font-weight: 600; }
.calc-out { container-type: inline-size; }
.co-big.money { font-size: clamp(46px, 7vw, 112px); font-size: clamp(44px, 16.5cqw, 150px); letter-spacing: -.07em; line-height: .86; padding: .1em 0 .14em; }   /* la taille suit la largeur du panneau : « +600 000 € » tient toujours */
.co-big.money span { padding-right: .1em; background: linear-gradient(180deg, #fff8ec 0%, #ffd29c 52%, #ff9b4d 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 18px 50px rgba(255, 146, 66, .35)); }
.dots { gap: 6px; max-width: 560px; }
.dots i { border-radius: 50%; background: rgba(255, 237, 215, .09); transform: scale(.7); }
.dots i.lo { background: var(--amber); box-shadow: 0 0 12px rgba(255, 146, 66, .55); transform: scale(1); }
.dots i.hi { background: rgba(255, 237, 215, .3); transform: scale(.9); }
.contacts { border-top: 1px solid var(--line); }
.fine { font-size: 12px; }

/* ---------- 11. offres ---------- */
.offer-grid { gap: 20px; align-items: stretch; }
.offer { background: var(--glass); border: 1px solid var(--line); border-radius: 32px; box-shadow: var(--shadow-card); padding: clamp(28px, 2.6vw, 44px); gap: 20px; transition: transform .7s var(--ease), border-color .4s, box-shadow .7s var(--ease); }
.offer:hover { border-color: transparent; box-shadow: var(--shadow-card), 0 50px 110px -50px rgba(255, 146, 66, .45); }
.offer header { gap: 12px; }
.offer header .h3 { font-size: clamp(28px, 2.4vw, 38px); font-weight: 600; letter-spacing: -.05em; }
.offer .for { font-size: 16px; line-height: 1.5; color: var(--cream-80); margin-top: 0; min-height: 0; }
@media (min-width: 1001px) { .offer .for { min-height: 4.6em; } }
.price { gap: 8px; margin-bottom: 0; }
.price span { font-size: clamp(58px, 5.8vw, 96px); letter-spacing: -.065em; line-height: .9; padding-right: .08em; background: linear-gradient(180deg, #ffffff, #ffd9ab); -webkit-background-clip: text; background-clip: text; color: transparent; }
.price small { font: italic 400 clamp(28px, 2.6vw, 42px)/1 var(--serif); letter-spacing: 0; color: var(--amber); opacity: 1; }
.inc-row { padding: 11px 16px; border: 1px solid var(--line-2); border-radius: 99px; background: rgba(255, 237, 215, .04); font-size: 14px; letter-spacing: -.008em; color: var(--cream); line-height: 1.2; }
.inc-row .ic { color: var(--amber); width: 16px; height: 16px; }
.plus-t { margin: 4px 0 -10px; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); opacity: 1; }
.ticks-list li { border-top: 1px solid var(--line); padding: 13px 0 13px 34px; font-size: 15px; letter-spacing: -.011em; color: var(--cream-80); }
.ticks-list li::before { content: ''; position: absolute; left: 0; top: 50%; width: 20px; height: 20px; border: 1px solid rgba(255, 179, 107, .42); border-radius: 50%; background: rgba(255, 179, 107, .12); transform: translateY(-50%); font-size: 0; }
.ticks-list li::after { content: ''; position: absolute; left: 6.5px; top: 50%; width: 8px; height: 4.5px; border-left: 1.6px solid var(--amber); border-bottom: 1.6px solid var(--amber); transform: translateY(-72%) rotate(-45deg); }
.ticks-list.plus li::before { content: '+'; display: grid; place-items: center; left: 0; top: 50%; width: 20px; height: 20px; border: 1px solid rgba(255, 179, 107, .42); font: 400 15px/1 var(--font); color: var(--amber); transform: translateY(-50%); }
.ticks-list.plus li::after { display: none; }
.ticks-list li.ai { margin: 10px 0 6px; padding: 18px 18px 18px 54px; border: 1px solid rgba(255, 179, 107, .34); border-radius: 18px; background: linear-gradient(135deg, rgba(255, 179, 107, .17), rgba(255, 179, 107, .03)); box-shadow: 0 1px 0 rgba(255, 255, 255, .07) inset, 0 16px 40px -20px rgba(255, 146, 66, .5); gap: 6px; }
.ticks-list li.ai::before, .ticks-list li.ai::after { display: none; }
.ticks-list li.ai .ic { color: var(--amber); left: 18px; top: 19px; width: 22px; height: 22px; filter: drop-shadow(0 0 8px rgba(255, 179, 107, .7)); animation: twinkle 3.2s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: .9; } 50% { transform: scale(1.18) rotate(12deg); opacity: 1; } }
.ticks-list li.ai b { font-size: 17px; letter-spacing: -.03em; font-weight: 600; color: var(--cream); }
.ticks-list li.ai span { font-size: 14.5px; color: var(--cream-80); }
.ticks-list li.ai .ai-note { font-size: 12.5px; color: var(--cream-60); }
.ticks-list li.gift .tag-free { top: 16px; right: 16px; padding: 6px 11px; border-radius: 99px; background: linear-gradient(180deg, #fffaf1, #ffe0b4); color: #1a0e06; font: 600 11px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; }
.offer.reco { border: 1px solid transparent; background: linear-gradient(180deg, #1e1209, #130a05) padding-box, conic-gradient(from var(--ang, 0deg), rgba(255, 179, 107, .12), #ffc58a 14%, #fff2dc 20%, rgba(255, 179, 107, .12) 34%, rgba(255, 179, 107, .12) 66%, #ffc58a 84%, #fff2dc 90%, rgba(255, 179, 107, .12)) border-box; box-shadow: var(--shadow-card), 0 70px 140px -60px rgba(255, 146, 66, .7); animation: spin 9s linear infinite; }
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes spin { to { --ang: 360deg; } }
.offer.reco::before { display: none; }
.offer.reco::after { opacity: 1; background: radial-gradient(70% 45% at 50% 0%, rgba(255, 179, 107, .20), transparent 70%); }
.badge-reco { background: linear-gradient(180deg, #fffaf1, #ffd9a8); color: #1a0e06; padding: 9px 15px; font: 600 11.5px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 8px 24px -8px rgba(255, 146, 66, .7); }
.offer-foot { font-size: 13px; color: var(--cream-60); }
.basics { border-top: 1px solid var(--line); }
.basics li { border: 1px solid var(--line-2); border-radius: 99px; background: rgba(255, 237, 215, .035); font-size: 13px; letter-spacing: -.005em; padding: 10px 16px; }
.basics li:hover { background: rgba(255, 179, 107, .14); color: var(--cream); border-color: rgba(255, 179, 107, .5); }
.demo-flow { border: 1px solid rgba(255, 179, 107, .3); border-radius: 30px; background: linear-gradient(120deg, rgba(255, 179, 107, .13), rgba(255, 237, 215, .02) 55%); box-shadow: var(--shadow-card); }
.df-t { font-size: clamp(26px, 2.6vw, 42px); letter-spacing: -.05em; line-height: 1; }
.df-steps li { border-top: 1px solid var(--line-2); }
.df-steps .num { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 179, 107, .45); background: rgba(255, 179, 107, .1); color: var(--amber); opacity: 1; font-size: 13px; }
.df-steps b { font-size: clamp(17px, 1.4vw, 21px); letter-spacing: -.03em; font-weight: 600; }
.df-steps p { font-size: 15px; }

/* appels à l'action intermédiaires */
.cta-line { border: 1px solid var(--line-2); border-radius: 30px; background: linear-gradient(110deg, rgba(255, 179, 107, .12), rgba(255, 237, 215, .025) 55%); box-shadow: var(--shadow-card); padding: clamp(26px, 3vw, 44px) clamp(24px, 3.4vw, 52px); overflow: hidden; }
.cta-line:hover { border-color: rgba(255, 179, 107, .45); }
.cta-line__t b { font-size: clamp(24px, 2.8vw, 44px); letter-spacing: -.05em; line-height: 1.02; font-weight: 500; }
.cta-line__t span { font-size: clamp(15px, 1.2vw, 18px); color: var(--cream-80); }
.next-link { border: 1px solid var(--line); border-radius: 22px; background: var(--glass); transition: border-color .4s, background .4s, transform .6s var(--ease); }
.next-link:hover { background: var(--glass-hi); border-color: rgba(255, 179, 107, .45); transform: translateY(-3px); }
.next-link b { color: var(--amber); font-size: 14px; letter-spacing: -.005em; }

/* ---------- 12. suivi mensuel : trois listes déroulantes (nom, phrase d'accroche et prix visibles ; détail au clic) ---------- */
.abo-list { display: grid; gap: 14px; }
.abo { position: relative; border: 1px solid var(--line); border-radius: 30px; background: var(--glass); box-shadow: var(--shadow-card); transition: background .4s, border-color .4s, box-shadow .6s var(--ease); }
.abo:hover { border-color: var(--line-2); }
.abo.top { border-color: rgba(255, 179, 107, .35); background: linear-gradient(180deg, rgba(255, 179, 107, .10), rgba(255, 237, 215, .02) 60%); }
.abo.open { background: var(--glass-hi); border-color: rgba(255, 179, 107, .42); box-shadow: var(--shadow-card), 0 40px 90px -50px rgba(255, 146, 66, .45); }
.abo h3 { margin: 0; }
.abo-h { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px 28px; width: 100%; padding: clamp(20px, 2.4vw, 30px) clamp(20px, 2.6vw, 38px); border-radius: inherit; text-align: left; cursor: pointer; }
.abo-h:focus-visible { outline: 2px solid var(--amber); outline-offset: -4px; }
.abo-t { display: grid; gap: 8px; min-width: 0; }
.abo-t .eyebrow { font-size: 11.5px; }
.abo-t b { font-size: clamp(28px, 2.8vw, 42px); letter-spacing: -.055em; line-height: 1; font-weight: 600; }
.abo-t .hook { max-width: 34em; font-weight: 400; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.4; letter-spacing: -.012em; color: var(--cream-80); }
.abo-p { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.abo-p .num { font-size: clamp(34px, 3.2vw, 52px); letter-spacing: -.06em; line-height: 1; font-weight: 600; }
.abo-p small { font: 500 13px var(--font); letter-spacing: 0; color: var(--cream-60); }
.abo.open .pm { background: linear-gradient(180deg, #fffaf1, #ffe0b4); border-color: transparent; transform: rotate(180deg); box-shadow: 0 8px 22px -8px rgba(255, 146, 66, .7); }
.abo.open .pm::before, .abo.open .pm::after { background: #1a0e06; }
.abo.open .pm::after { transform: translate(-50%, -50%) rotate(0); }
.abo-a { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .6s var(--ease), visibility 0s .6s; }
.abo.open .abo-a { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .6s var(--ease), visibility 0s; }
.abo-a > div { min-height: 0; overflow: hidden; }
.abo-in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px clamp(28px, 4vw, 64px); padding: 6px clamp(20px, 2.6vw, 38px) clamp(24px, 3vw, 36px); opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.abo.open .abo-in { opacity: 1; transform: none; transition-delay: .15s; }
.abo-main { display: grid; gap: 14px; align-content: start; }
.abo-side { display: grid; gap: 12px; align-content: start; align-self: start; padding: 20px 22px; border: 1px solid var(--line); border-radius: 22px; background: rgba(255, 237, 215, .03); }
.promise { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.42; color: var(--cream); letter-spacing: -.012em; }
.benefits li { border-top: 1px solid var(--line); }
.benefits strong { font-size: 13px; letter-spacing: 0; font-weight: 600; color: var(--cream); }
.benefits span { font-size: 14.5px; color: var(--cream-80); }
.abo-inc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; color: var(--cream-60); }
.abo-inc b { padding: 6px 14px; border: 1px solid var(--line-2); border-radius: 99px; background: rgba(255, 237, 215, .04); font-size: 13.5px; font-weight: 500; color: var(--amber); }
.perday { font-size: 14px; color: var(--cream-80); }
.eng { font-size: 13px; opacity: .85; letter-spacing: -.005em; color: var(--cream-80); }
.eng.gift-note { border: 1px solid rgba(255, 179, 107, .45); background: rgba(255, 179, 107, .12); color: var(--amber); border-radius: 99px; padding: 8px 14px; opacity: 1; }
.ideal { border-top: 1px solid var(--line); color: var(--cream); font-size: 14.5px; }
.ideal .ic { color: var(--amber); }
@media (max-width: 900px) {
  .abo-in { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 640px) {
  .abo { border-radius: 24px; }
  .abo-h { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t pm" "p pm"; gap: 14px 14px; padding: 18px 18px; }
  .abo-t { grid-area: t; } .abo-p { grid-area: p; } .abo-h .pm { grid-area: pm; align-self: center; }
  .abo-in { padding: 4px 18px 22px; }
  .abo-side { padding: 16px 18px; }
}
.note { border-top: 1px solid var(--line); color: var(--cream-60); font-size: 15px; }

/* ---------- 13. FAQ ---------- */
.faq-list { border: 0; display: grid; gap: 12px; }
.faq-item { border: 1px solid var(--line); border-radius: 24px; background: var(--glass); transition: background .4s, border-color .4s, box-shadow .6s var(--ease); }
.faq-item:hover { border-color: var(--line-2); }
.faq-item.open { background: var(--glass-hi); border-color: rgba(255, 179, 107, .38); box-shadow: 0 40px 90px -50px rgba(255, 146, 66, .45); }
.faq-item button { padding: clamp(20px, 2.8vh, 30px) clamp(22px, 2.4vw, 36px); font-size: clamp(18px, 1.75vw, 27px); line-height: 1.15; letter-spacing: -.04em; font-weight: 500; gap: 28px; }
.faq-item button:hover { padding-left: clamp(22px, 2.4vw, 36px); }
.pm { width: 36px; height: 36px; border: 1px solid var(--line-2); background: rgba(255, 237, 215, .05); }
.pm::before, .pm::after { width: 13px; background: var(--cream); }
.faq-item.open .pm { background: linear-gradient(180deg, #fffaf1, #ffe0b4); border-color: transparent; transform: rotate(180deg); box-shadow: 0 8px 22px -8px rgba(255, 146, 66, .7); }
.faq-item.open .pm::before, .faq-item.open .pm::after { background: #1a0e06; }
.faq-a p { padding: 0 clamp(22px, 2.4vw, 36px) 30px; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: var(--cream-80); max-width: 52em; }

/* ---------- 14. contact ---------- */
.ct-copy .body-l { max-width: 22em; }
.ct-pts li { font-size: 15px; letter-spacing: -.01em; color: var(--cream-80); gap: 12px; }
.ct-pts .ic { color: var(--amber); width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: rgba(255, 179, 107, .12); border: 1px solid rgba(255, 179, 107, .35); }
.ct-lines { border-top: 1px solid var(--line); }
.ct-lines li { border-bottom: 1px solid var(--line); font-size: clamp(18px, 1.8vw, 28px); letter-spacing: -.04em; padding: 18px 0; }
.ct-lines li.soft { font-size: 13px; letter-spacing: 0; color: var(--cream-60); opacity: 1; }
.ct-lines .ic { color: var(--amber); }
.form { padding: clamp(26px, 3vw, 46px); border: 1px solid var(--line-2); border-radius: 32px; background: var(--glass); box-shadow: var(--shadow-card), 0 70px 140px -70px rgba(255, 146, 66, .35); }
.fld input:not([type=radio]), .fld select, .fld textarea { background: rgba(255, 237, 215, .04); border: 1px solid var(--line); border-radius: 16px; padding: 28px 18px 10px; font: 400 17px/1.3 var(--font); letter-spacing: -.011em; transition: border-color .4s, background .4s, box-shadow .4s; }
.fld select { background-position: right 16px center; }
.fld input:not([type=radio]):hover, .fld select:hover, .fld textarea:hover { border-color: var(--line-2); }
.fld:not(.chips-f) > label { left: 18px; top: 20px; font-size: 15px; opacity: .7; letter-spacing: -.01em; }
.fld input:focus ~ label, .fld input:not(:placeholder-shown) ~ label, .fld textarea:focus ~ label, .fld textarea:not(:placeholder-shown) ~ label, .fld select:focus ~ label, .fld select:valid ~ label { transform: translateY(-14px) scale(.8); opacity: .85; color: var(--amber); }
.fld::after { display: none; }
.fld input:not([type=radio]):focus, .fld select:focus, .fld textarea:focus { outline: 0; border-color: rgba(255, 179, 107, .75); background: rgba(255, 237, 215, .06); box-shadow: 0 0 0 4px rgba(255, 179, 107, .14); }
.fld.bad input, .fld.bad select { border-color: #ff7a59; }
.fld .err { left: 4px; font-size: 12px; color: #ff9d7f; }
.chips-f legend { font-size: 14px; opacity: 1; color: var(--cream-80); margin-bottom: 12px; letter-spacing: -.01em; }
.chip span { padding: 11px 18px; font-size: 14px; letter-spacing: -.008em; border: 1px solid var(--line-2); background: rgba(255, 237, 215, .04); color: var(--cream); }
.chip:hover span { border-color: rgba(255, 179, 107, .55); background: rgba(255, 179, 107, .08); }
.chip input:checked + span { background: linear-gradient(180deg, #fffaf1, #ffe0b4); color: #1a0e06; border-color: transparent; box-shadow: 0 8px 24px -10px rgba(255, 146, 66, .8); }
.chip input:focus-visible + span { outline: 2px solid var(--amber); outline-offset: 3px; }
.form-foot { gap: 20px; }
.form-foot .btn { width: 100%; justify-content: space-between; }
.form-ok { background: #140b06; border-radius: inherit; padding: clamp(26px, 3vw, 46px); }

/* ---------- 15. pied de page ---------- */
.foot-top { padding: 30px 0; }
.foot-links { gap: 8px; font-size: 14px; flex-wrap: wrap; }
.foot-links a { white-space: nowrap; }
.foot-links a { padding: 8px 14px; border-radius: 99px; border: 1px solid var(--line); color: var(--cream-80); transition: background .3s, color .3s, border-color .3s; }
.foot-links a:hover { text-decoration: none; background: rgba(255, 237, 215, .07); color: var(--cream); border-color: var(--line-2); }
.foot-word { letter-spacing: -.06em; font-weight: 600; }
.foot-word span { letter-spacing: 0; padding: .02em .05em .02em; margin: -.02em -.05em -.02em; background: linear-gradient(180deg, #fff4e4 6%, rgba(255, 237, 215, .5) 40%, rgba(255, 237, 215, .04) 96%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.foot-word.in span:hover { background: linear-gradient(180deg, #ffe0b4, #ff8a3d); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 0; color: transparent; -webkit-text-fill-color: transparent; transform: translateY(-5%); }
.foot-bot { border-top: 1px solid var(--line); font-size: 13px; color: var(--cream-60); }
.to-top { padding: 9px 16px; border: 1px solid var(--line-2); border-radius: 99px; color: var(--cream); transition: background .3s, border-color .3s; }
.to-top:hover { background: rgba(255, 237, 215, .07); border-color: rgba(255, 237, 215, .4); }
.tape { opacity: .85; }

/* ---------- 16. fenêtre de démo, barre mobile, rideau d'intro, curseur ---------- */
.demo-modal { background: var(--bg); }
.dm-bar { border-bottom: 1px solid var(--line); background: rgba(14, 8, 4, .82); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.dm-views { border: 1px solid var(--line-2); background: rgba(255, 237, 215, .04); }
.dm-views button { font-size: 13px; color: var(--cream-80); }
.dm-views button.on { background: linear-gradient(180deg, #fffaf1, #ffe0b4); color: #1a0e06; }
.dm-close { border-color: var(--line-2); background: rgba(255, 237, 215, .05); }
.dm-close:hover { background: linear-gradient(180deg, #fffaf1, #ffe0b4); color: #1a0e06; border-color: transparent; }
.dm-device { border: 1px solid var(--line-2); border-radius: 22px; box-shadow: 0 50px 120px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 237, 215, .04); }
.dock .btn.ghost { background: rgba(14, 8, 4, .85); }
.loader { background: var(--bg); }
.ld-word { font-weight: 600; letter-spacing: -.06em; }
.ld-word span { letter-spacing: 0; padding: 0 .05em; margin: 0 -.05em; background: linear-gradient(180deg, #fff4e4, #ffc58a 90%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.ld-line { border: 0; height: 2px; background: rgba(255, 237, 215, .12); border-radius: 2px; overflow: hidden; }
.ld-line i { top: 0; height: 100%; background: linear-gradient(90deg, var(--amber), #fff2dc); }
.ld-meta { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.cur-dot { background: var(--amber); box-shadow: 0 0 14px var(--amber); }
.cur-ring { border-color: rgba(255, 179, 107, .6); }
.cur.hov .cur-ring { border-color: var(--amber); background: rgba(255, 179, 107, .08); }
.cur.lab .cur-ring { background: linear-gradient(180deg, #fffaf1, #ffe0b4); border-color: transparent; }
.cur-ring b { color: #1a0e06; font-weight: 600; font-size: 11px; letter-spacing: .02em; }

/* ---------- 17. écrans étroits : on garde le style, on allège les effets ---------- */
@media (max-width: 900px) {
  .nav-links a:not(.btn) { display: none; }
  .hero-veil { background:
    radial-gradient(80% 50% at 85% 0%, rgba(255, 146, 66, .2), transparent 60%),
    linear-gradient(180deg, rgba(9, 5, 2, .9) 0%, rgba(9, 5, 2, .66) 50%, rgba(9, 5, 2, .5) 78%, rgba(9, 5, 2, .75) 100%),
    linear-gradient(0deg, var(--bg) 0%, rgba(9, 5, 2, 0) 18%); }
  .nav { padding-top: 10px; }
  .logo, .nav-links { height: 44px; }
  .logo { font-size: 16px; padding: 0 16px 0 12px; }
  .nav-links { padding: 4px; }
  .nav-links .btn { height: 36px; }
  .display { font-size: clamp(42px, 12.4vw, 84px); }
  .h2 { font-size: clamp(36px, 10.4vw, 64px); }
  .manifest-t { font-size: clamp(30px, 8.4vw, 56px); }
  .st-h { font-size: clamp(28px, 7.8vw, 40px); }
  .st-p { font-size: clamp(16px, 4.4vw, 19px); }
  .st-nav button { width: 54px; }
  .mt-list button { font-size: clamp(24px, 7.4vw, 38px); }
  .price span { font-size: clamp(56px, 16vw, 84px); }
  .big-out { font-size: clamp(42px, 12vw, 64px); }
  .offer, .proj, .calc-in, .calc-out, .form, .faq-item, .demo-flow, .cta-line { border-radius: 26px; }
  .phone-wrap::before { width: 150%; }
  .fx .a, .fx .b, .fx .c { animation-duration: 60s; }
  .grain { opacity: .035; animation: none; }
  .hero-light { display: none; }
  .faq-item button { padding: 20px 20px; }
  .btn.cta.lg { padding: 18px 22px 18px 26px; }
}
@media (max-width: 560px) {
  .form-foot .btn { justify-content: center; }
  .marquee { padding: 20px 0; }
}
/* pas de survol sur écran tactile : la lumière du curseur ne sert à rien */
@media (hover: none) {
  .glow::before, .glow::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fx i, .grain, .phone-wrap::before, .offer.reco, .hero-copy .eyebrow::before, .ticks-list li.ai .ic { animation: none !important; }
  .js [data-r] { filter: none; }
}

/* ---------- liens internes de référencement : pages métier et guides ---------- */
.mt-more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 30px; font-size: 15px; color: var(--cream-80); }
.mt-more span { margin-right: 6px; }
.mt-more a { display: inline-block; padding: 9px 15px; border: 1px solid var(--line-2); border-radius: 99px; background: rgba(255, 237, 215, .04); font-size: 14px; letter-spacing: -.005em; text-decoration: none; transition: background .3s, border-color .3s, color .3s; }
.mt-more a:hover { background: rgba(255, 179, 107, .14); border-color: rgba(255, 179, 107, .5); color: var(--cream); }
.foot-seo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; padding: 8px 0 34px; }
.foot-seo-t { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); margin-bottom: 14px; }
.foot-seo li + li { margin-top: 9px; }
.foot-seo a { font-size: 15px; color: var(--cream-80); text-decoration: none; transition: color .3s; }
.foot-seo a:hover { color: var(--cream); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 900px) { .foot-seo { grid-template-columns: 1fr; } }