/* Rallypac — design moderne (novembre 2026). Chargé APRÈS site.css, qu'il recouvre entièrement côté apparence.
   Pour revenir à l'ancien design « muscle car vintage » : retirer la ligne modern.css (et motion.js) dans app/layout.php.
   Thème sombre unique : fond nuit, dégradé orange signal → violet électrique, cartes en verre dépoli,
   typographies Space Grotesk (titres), Inter (texte), JetBrains Mono (étiquettes). Animations dans assets/motion.js. */

@property --rp-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

:root, :root[data-theme="dark"], :root:not([data-theme="light"]) {
  --bg: #07080B;
  --bg-2: #0B0D12;
  --surface: #10131A;
  --surface-2: #171B24;
  --glass: rgba(18, 21, 29, 0.66);
  --ink: #ECEFF4;
  --ink-soft: #98A1B2;
  --title: #FFFFFF;
  --red: #8D2632;
  --red-ink: #FFFFFF;
  --red-soft: #A32E3B;
  --blue: #AEB5C2;
  --blue-ink: #0B0D12;
  --violet: #A66BFF;
  --cyan: #3CCBFF;
  --nav: rgba(7, 8, 11, 0.62);
  --nav-ink: #ECEFF4;
  --green: #3DDC97;
  --border: rgba(255, 255, 255, 0.09);
  --border-2: rgba(255, 255, 255, 0.16);
  --hood: transparent;
  --hood-stripe: transparent;
  --hood-ink: #ECEFF4;
  --asphalt: #050608;
  /* Sobriété (demande du 10/11) : plus aucun dégradé de couleur. --grad reste défini (une seule teinte) pour les règles qui l'utilisent. */
  --accent: #8D2632;
  --grad: linear-gradient(var(--accent), var(--accent));
  --grad-soft: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05));
  --f-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --radius: 20px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  color-scheme: dark;
}

/* ---------------------------------------------------------------- base */
html { scroll-padding-top: 84px; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--f-body); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(141, 38, 50, 0.35); color: #fff; }
.wrap { max-width: 1200px; padding-inline: 24px; }
@media (max-width: 560px) { .wrap { padding-inline: 18px; } }
a { text-underline-offset: 3px; }

h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 600; text-transform: none; letter-spacing: -0.025em; color: var(--title); }
.script {
  font-family: var(--f-display); font-weight: 600; font-style: normal; letter-spacing: -0.02em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cond { font-family: var(--f-body); }
.muted, .summary .muted { color: var(--ink-soft); }

/* étiquette au-dessus des titres : pilule mono avec point lumineux */
.eyebrow {
  display: inline-flex; width: fit-content; align-items: center; gap: 10px;
  padding: 6px 14px 6px 12px; border: 1px solid var(--border-2); border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  font-family: var(--f-mono); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
}
.eyebrow::before { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 12px var(--red); }

/* séparateurs à damier → fin liseré lumineux */
.flag { height: 1px; margin: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent); }

/* ---------------------------------------------------------------- barre du haut : verre dépoli */
.topbar {
  background: var(--nav); color: var(--nav-ink);
  border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.topbar.is-scrolled { background: rgba(7, 8, 11, 0.85); box-shadow: 0 10px 40px -20px rgba(0, 0, 0, 0.9); }
.topbar-inner { max-width: 1200px; padding: 12px 24px; }
.brand { align-items: center; gap: 6px; }
.brand-logo { display: block; height: 44px; width: auto; }
@media (max-width: 520px) { .brand-logo { height: 34px; } }
.footer-logo { display: block; height: clamp(90px, 14vw, 140px); width: auto; }
.brand b { font-family: var(--f-display); font-weight: 700; font-size: 1.2rem; letter-spacing: 0.06em; color: #fff; }
.brand .script { font-size: 1.2rem; letter-spacing: 0; }
.topnav { gap: 6px; font-family: var(--f-body); font-weight: 500; font-size: 0.92rem; text-transform: none; letter-spacing: 0; }
.topnav a { display: block; padding: 7px 13px; border: 0; border-radius: 999px; color: var(--ink-soft); transition: color 0.2s ease, background 0.2s ease; }
.topnav a:hover, .topnav a:focus-visible { color: #fff; background: rgba(255, 255, 255, 0.07); }
.topcart { font-family: var(--f-body); font-weight: 500; font-size: 0.92rem; text-transform: none; letter-spacing: 0; color: var(--ink-soft); }
.topcart:hover { color: #fff; text-decoration: none; }
.lang-menu summary { font-family: var(--f-mono); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.06em; color: var(--ink-soft); padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px; }
.lang-menu summary:hover, .lang-menu[open] summary { background: rgba(255, 255, 255, 0.07); color: #fff; }
.lang-panel { background: rgba(14, 16, 22, 0.94); border: 1px solid var(--border-2); border-radius: 16px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.9); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.lang-h { font-family: var(--f-mono); font-weight: 500; letter-spacing: 0.12em; }
.lang-menu li a { font-family: var(--f-body); border-radius: 10px; }

/* barre du haut sur téléphone : marque, langue, panier et Commander tiennent sur une ligne */
@media (max-width: 520px) {
  .topbar-inner { padding: 10px 14px; gap: 8px; }
  .brand b { font-size: 1.02rem; letter-spacing: 0.04em; }
  .topbar-shop { gap: 6px; }
  .lang-menu summary { padding: 5px 8px; font-size: 0.7rem; letter-spacing: 0.02em; }
  .topcart { font-size: 0.85rem; }
  .topbar-shop .btn-sm { padding: 7px 12px; font-size: 0.8rem; }
}
@media (max-width: 380px) { .topcart { display: none; } }

/* ---------------------------------------------------------------- boutons */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  font-family: var(--f-body); font-weight: 600; font-size: 0.95rem; text-transform: none; letter-spacing: -0.005em;
  padding: 13px 24px; border-radius: 999px; border: 1px solid transparent;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.btn-primary { background: var(--grad); background-size: 160% 100%; color: #fff; box-shadow: 0 10px 30px -10px rgba(141, 38, 50, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.btn-primary:hover { filter: none; transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 16px 40px -12px rgba(192, 99, 255, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
/* reflet qui traverse le bouton au survol */
.btn-primary::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.35) 50%, transparent 65%); transform: translateX(-120%); transition: transform 0.7s var(--ease); }
.btn-primary:hover::after { transform: translateX(120%); }
.btn-ghost { background: rgba(255, 255, 255, 0.04); color: var(--ink); border-color: var(--border-2); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.1); color: #fff; border-color: rgba(255, 255, 255, 0.3); transform: translateY(-2px); }
.btn-sm { padding: 8px 16px; font-size: 0.85rem; }
.btn:focus-visible, .topnav a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--red-soft); outline-offset: 3px; }
.topbar a:focus-visible { outline: 2px solid var(--red-soft); }

/* ---------------------------------------------------------------- Noël */
.xmas-bar { background: linear-gradient(90deg, #0E2A1E, #12402B 50%, #0E2A1E); color: #E7F5EC; font: 500 0.85rem var(--f-body); letter-spacing: 0; text-transform: none; border-bottom: 1px solid rgba(201, 154, 28, 0.45); }
.xmas-bar a { color: #FFD873; font-weight: 600; }

/* ---------------------------------------------------------------- démo live (haut de page) */
.demo-band {
  --band: var(--bg); --stripe: transparent;
  color: var(--ink); border-bottom: 0; padding-block: 34px 48px;
  background:
    radial-gradient(48% 42% at 30% 52%, rgba(141, 38, 50, 0.16), transparent 72%),
    radial-gradient(36% 46% at 82% 30%, rgba(166, 107, 255, 0.16), transparent 72%),
    radial-gradient(60% 50% at 50% 100%, rgba(60, 203, 255, 0.06), transparent 70%),
    var(--bg);
}
/* quadrillage discret, estompé sur les bords */
.demo-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 80%); mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 80%);
}
.demo-band .wrap { position: relative; }
.demo-band .rp-caption {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 12px;
  border: 1px solid var(--border-2); border-radius: 999px; background: rgba(255, 255, 255, 0.04);
  font-family: var(--f-mono); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.12em; color: var(--ink-soft);
}
.demo-band .rp-caption::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(61, 220, 151, 0.6); animation: m-ping 2s ease-out infinite; }
.demo-band .rp-stage { background: none; }
@media (max-width: 1179px) { .demo-band .rp-stage { background: var(--bg); } }
.rp-mock { filter: saturate(1.05) contrast(1.08) brightness(0.92); }
@media (min-width: 700px) { .rp-mock { filter: saturate(1.05) contrast(1.1) brightness(0.92); } }
.rp-stage::before { background: radial-gradient(ellipse 72% 80% at 50% 56%, transparent 70%, rgba(7, 8, 11, 0.55) 100%) !important; }
/* les deux écrans « allumés » : halo qui respire */
.rp-dial { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 34px 2px rgba(255, 110, 70, 0.32); animation: m-glow 4.5s ease-in-out infinite; }
.rp-dial.right { animation-delay: -2.2s; }

/* encart « Essayez en live » : verre dépoli */
.rp-live {
  background: var(--glass); border: 1px solid var(--border-2); border-radius: var(--radius);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
}
.rp-live-top { border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.rp-live-bottom { border-top: 0; border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.95); }
.rp-live-title {
  justify-content: flex-start; padding: 16px 20px 6px; background: none; color: #fff;
  font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em; text-transform: none;
}
.rp-live-title::before { width: 8px; height: 8px; background: var(--red); box-shadow: 0 0 12px var(--red); animation: rp-blink 1.4s steps(2) infinite; }
.demo-band .rp-side { font-family: var(--f-mono); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.14em; color: var(--ink-soft); text-align: left; }
.demo-band .rp-unit { align-items: stretch; }
.demo-band .rp-choices { justify-content: flex-start; }
.demo-band .rp-chip, .demo-band .rp-act {
  font-family: var(--f-body); font-weight: 500; font-size: 0.88rem; letter-spacing: 0; text-transform: none;
  padding: 9px 14px; border-radius: 12px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.04); color: var(--ink);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.demo-band .rp-chip:hover, .demo-band .rp-act:hover:not(:disabled) { background: rgba(255, 255, 255, 0.09); border-color: var(--border-2); }
.demo-band .rp-chip:active, .demo-band .rp-act:active { transform: scale(0.97); }
.demo-band .rp-chip[aria-pressed="true"], .demo-band .rp-act[aria-pressed="true"] { background: #fff; border-color: #fff; color: #0B0D12; box-shadow: 0 6px 24px -8px rgba(255, 255, 255, 0.5); }
.demo-band .rp-act.is-primary { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 8px 26px -10px rgba(141, 38, 50, 0.8); }
.demo-band .rp-chip:focus-visible, .demo-band .rp-act:focus-visible { outline: 2px solid var(--red-soft); }
.demo-band .rp-actions { border-top: 1px solid var(--border); }
.demo-band .rp-log, .rp-log { color: var(--ink-soft); background: none; }
@media (max-width: 699px) { .demo-band .rp-chip, .demo-band .rp-act { padding: 8px 10px; font-size: 0.82rem; } }

/* ---------------------------------------------------------------- démo, ordinateur : commandes posées sur la photo
   Choix d'écran en arc autour de chaque compteur (boutons translucides), commandes de conduite et événements au centre.
   Les positions sont en % de la photo (centres des ronds mesurés sur dash.webp) et en unités cqw (largeur de la photo). */
.rp-orbit { display: none; }
@media (min-width: 1180px) {
  .demo-band .hero-demo { display: flex; flex-direction: column; align-items: center; gap: 14px; }
  .demo-band .rp-pin { display: block; width: 100%; }
  .demo-band .rp-live { display: none; }
  .demo-band .rp-stage { grid-column: auto; grid-row: auto; width: min(100%, 1280px); margin-inline: auto; container-type: inline-size; }
  .rp-orbit { display: block; position: absolute; inset: 0; z-index: 4; pointer-events: none; }
  .rp-ring { position: absolute; width: 0; height: 0; }
  /* chaque couronne s'ouvre vers l'extérieur de la photo (225°), pour laisser le centre libre au panneau de commandes */
  .rp-ring-left { left: 20.23%; top: 68.79%; --start: 105deg; }
  .rp-ring-right { left: 78.6%; top: 68.18%; --start: 210deg; }
  .rp-orb {
    --a: calc(var(--start) + var(--i) * (225deg / (var(--n) - 1)));
    position: absolute; left: 0; top: 0; pointer-events: auto; white-space: nowrap; cursor: pointer;
    transform: translate(-50%, -50%) rotate(var(--a)) translateX(15.6cqw) rotate(calc(-1 * var(--a)));
    font: 500 clamp(11px, 1.02cqw, 14px)/1 var(--f-body); letter-spacing: 0;
    padding: 0.62em 1em; border-radius: 999px; color: #FFFFFF;
    background: rgba(12, 20, 38, 0.38); border: 1px solid rgba(255, 255, 255, 0.38);
    -webkit-backdrop-filter: blur(6px) saturate(140%); backdrop-filter: blur(6px) saturate(140%);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  .rp-orb:hover { background: rgba(255, 255, 255, 0.22); }
  .rp-orb[aria-pressed="true"] { background: rgba(255, 255, 255, 0.94); color: var(--logo-blue, #1C3666); border-color: #FFFFFF; }
  .rp-orb:focus-visible, .rp-cbtn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
  .rp-console {
    position: absolute; left: 50%; top: 57%; transform: translateX(-50%); width: 25cqw; pointer-events: auto;
    padding: 1.1cqw 1.1cqw 0.8cqw; border-radius: 18px; text-align: center; color: #FFFFFF;
    background: rgba(12, 20, 38, 0.46); border: 1px solid rgba(255, 255, 255, 0.26);
    -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
  }
  .rp-console-h { margin: 0 0 0.55em; font: 500 clamp(9px, 0.74cqw, 11px)/1.2 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); }
  .rp-console-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 0.9em; }
  .rp-console-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .rp-cbtn {
    font: 600 clamp(11px, 0.95cqw, 13px)/1 var(--f-body); padding: 0.78em 0.5em; border-radius: 999px; cursor: pointer;
    color: #FFFFFF; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.32);
    touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
    transition: background 0.2s ease, transform 0.15s ease;
  }
  .rp-cbtn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.26); }
  .rp-cbtn.is-primary { background: var(--accent); border-color: transparent; }
  .rp-cbtn.is-active { transform: scale(0.96); }
  .rp-cbtn[aria-pressed="true"] { background: #FFFFFF; color: var(--logo-blue, #1C3666); }
  .rp-cbtn:disabled { opacity: 0.45; cursor: not-allowed; }
  .rp-csound { margin-top: 0.7em; padding: 0; background: none; border: 0; cursor: pointer; color: rgba(255, 255, 255, 0.75); font: 500 clamp(10px, 0.8cqw, 12px) var(--f-body); text-decoration: underline; text-underline-offset: 3px; }
  .rp-csound[aria-pressed="false"] { text-decoration: line-through; }
  .rp-console-log { margin: 0.55em 0 0; min-height: 2.5em; font-size: clamp(10px, 0.8cqw, 12px); line-height: 1.25; color: rgba(255, 255, 255, 0.86); }
}

/* ---------------------------------------------------------------- bloc d'accroche (ex-capot rouge) */
.hero {
  background:
    radial-gradient(50% 70% at 12% 20%, rgba(141, 38, 50, 0.22), transparent 70%),
    radial-gradient(45% 60% at 92% 80%, rgba(166, 107, 255, 0.2), transparent 70%),
    var(--bg-2);
  color: var(--ink); border-block: 1px solid var(--border);
}
.hero::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 40%); }
.hero-front { color: #FF8A66; opacity: 0.32; }
.hero-inner { padding-block: 96px 104px; }
@media (min-width: 880px) { .hero-inner { padding-block: 120px 130px; } }
.hero .eyebrow { color: var(--ink-soft); }
.hero .eyebrow::before { background: var(--red); }
.hero h1 { font-size: clamp(2.8rem, 6.4vw, 5.4rem); line-height: 0.98; letter-spacing: -0.04em; font-weight: 700; color: #fff; margin-block: 22px 22px; }
.hero h1 .script { display: block; margin-top: 10px; font-size: 0.62em; line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; }
.hero p.lede { color: var(--ink-soft); font-size: 1.12rem; line-height: 1.7; }
.hero .btn-primary { background: var(--grad); background-size: 160% 100%; color: #fff; }
.hero .btn-ghost { color: var(--ink); border-color: var(--border-2); }
.hero .btn-ghost:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.hero p.lede .lede-hook { display: block; margin-bottom: 10px; font-family: var(--f-display); font-weight: 600; font-size: 1.3rem; line-height: 1.3; letter-spacing: -0.02em; color: #fff; }
.hero p.lede .lede-hook span { color: var(--accent); }
.hero-note { font-family: var(--f-mono); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.1em; color: var(--ink-soft); }

/* ---------------------------------------------------------------- sections */
section { padding-block: 96px; }
@media (max-width: 700px) { section { padding-block: 68px; } }
.section-head { margin-bottom: 44px; }
.section-head h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.02; letter-spacing: -0.035em; font-weight: 700; margin-top: 18px; }
.section-head p { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.7; }

/* citation centrale */
.thesis blockquote { font-family: var(--f-display); text-transform: none; font-weight: 600; letter-spacing: -0.03em; font-size: clamp(1.8rem, 3.8vw, 3rem); line-height: 1.1; color: #fff; }
.thesis blockquote span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.thesis p.prose { color: var(--ink-soft); line-height: 1.75; }
.models-note { font-family: var(--f-mono); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.14em; color: var(--ink-soft); }

/* ---------------------------------------------------------------- cartes « verre » communes + projecteur qui suit la souris */
.model, .plate, .compat-col, .g-card, .panel, .cfg-step, .faq details, .reassure > div {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)), var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.9);
}
.model, .plate, .g-card { position: relative; overflow: hidden; transition: transform 0.4s var(--ease), border-color 0.3s ease, box-shadow 0.4s var(--ease); }
.model::before, .plate::before, .g-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 0.35s ease;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 120, 80, 0.14), transparent 60%);
}
.model:hover::before, .plate:hover::before, .g-card:hover::before { opacity: 1; }
.plate:hover, .g-card:hover { transform: translateY(-4px); border-color: var(--border-2); box-shadow: 0 40px 70px -40px rgba(0, 0, 0, 1); }
.model > *, .plate > *, .g-card > * { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- modèles */
.models { gap: 22px; }
.model, .model.is-plus { border-radius: 26px; margin: 0; box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.9); }
@media (min-width: 780px) { .model, .model.is-plus { border-radius: 26px; margin: 0; box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.9); } }
/* RallypacMOD+ : liseré en dégradé qui tourne en continu */
.model.is-plus {
  border: 1.5px solid transparent;
  background:
    linear-gradient(180deg, rgba(23, 18, 30, 0.98), rgba(14, 15, 22, 0.98)) padding-box,
    conic-gradient(from var(--rp-angle), #FF5A36, #FF8A3D, #C063FF, #7C8CFF, #3CCBFF, #FF5A36) border-box;
  animation: m-spin 7s linear infinite;
  box-shadow: 0 40px 90px -40px rgba(192, 99, 255, 0.45);
}
/* logos RPM / RPM+ en tête de chaque colonne du comparatif */
.model-logo { display: flex; align-items: center; justify-content: center; height: 170px; padding: 26px 26px 6px; }
.model-logo img { display: block; max-width: min(100%, 300px); max-height: 100%; width: auto; height: auto; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.5)); }
@media (max-width: 560px) { .model-logo { height: 140px; } }
.model-band { background: none; color: var(--ink-soft); padding: 22px 26px 0; font-family: var(--f-mono); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.14em; }
.model-band span { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid var(--border-2); border-radius: 999px; }
.model.is-plus .model-band { background: none; color: #fff; }
.model.is-plus .model-band span { border-color: transparent; background: var(--grad); }
.model-body { padding: 18px 26px 28px; gap: 14px; }
.model h3 { font-size: clamp(2rem, 3.4vw, 2.6rem); font-weight: 700; letter-spacing: -0.04em; }
.model .model-lead { font-family: var(--f-body); font-weight: 600; font-size: 1rem; color: #fff; }
.model-list { gap: 9px; }
.model-list li { font-size: 0.95rem; color: var(--ink); }
.model-list li::before { content: ""; width: 18px; height: 18px; flex: none; align-self: center; border-radius: 50%; background: rgba(61, 220, 151, 0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233DDC97' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat; }
.model.is-plus .model-list li::before { content: ""; width: 18px; height: 18px; font-size: 0; background: rgba(141, 38, 50, 0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238D2632' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 11px no-repeat; }
.model.is-plus .model-list.is-base li { color: var(--ink-soft); }
.model.is-plus .model-list.is-base li::before { content: ""; font-size: 0; width: 18px; height: 18px; background: rgba(255, 255, 255, 0.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398A1B2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat; }
.price { padding-top: 10px; border-top: 1px solid var(--border); }
.price b { font-family: var(--f-display); font-weight: 700; font-size: 3rem; letter-spacing: -0.04em; color: #fff; }
.stock-note { color: var(--red-soft); }

/* ---------------------------------------------------------------- fonctions : grille « bento » */
.plates { gap: 16px; }
.plate { padding: 26px; box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.9); }
.plate-top { margin-bottom: 22px; }
.plate-num { font-family: var(--f-mono); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.1em; color: var(--ink-soft); }
.plate .icon { width: 46px; height: 46px; padding: 11px; border-radius: 14px; color: #fff; background: var(--grad-soft); border: 1px solid rgba(255, 140, 100, 0.25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.plate h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.2rem; letter-spacing: -0.015em; text-transform: none; }
.plate p { color: var(--ink-soft); line-height: 1.65; }
.plate-tag { font-family: var(--f-mono); font-weight: 500; font-size: 0.66rem; letter-spacing: 0.1em; padding: 3px 9px; border-radius: 999px; background: var(--grad); color: #fff; }

/* écosystème : vue éclatée floutée au centre, fonctions autour reliées par des traits fins (tracés par motion.js) */
.eco { position: relative; }
.eco-core { margin: 0; position: relative; z-index: 0; }
.eco-core img {
  display: block; width: 100%; height: auto; filter: brightness(1.1) contrast(1.05);
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 78%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 78%, transparent 100%);
}
@media (min-width: 1100px) { .eco .eco-core img { width: 136%; max-width: none; margin-inline: -18%; } }
.eco-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; display: none; }
.eco-lines path { fill: none; stroke: rgba(255, 255, 255, 0.2); stroke-width: 1; transition: stroke 0.25s ease, stroke-width 0.25s ease; }
.eco-lines path.is-hot { stroke: var(--accent); stroke-width: 1.5; }
.eco-lines .eco-dot { fill: var(--bg); stroke: rgba(255, 255, 255, 0.5); stroke-width: 1; transition: fill 0.25s ease, stroke 0.25s ease; }
.eco-lines .eco-dot.is-hot { fill: var(--accent); stroke: var(--accent); }
.eco .plate { z-index: 2; }
/* téléphone et tablette : l'image au-dessus, les cartes dessous (pas de traits) */
@media (max-width: 1099px) {
  .eco .eco-core { grid-column: 1 / -1; max-width: 720px; justify-self: center; margin-bottom: 8px; }
}
/* ordinateur : 4 fonctions à gauche, 4 à droite, Plug & play sous l'image */
@media (min-width: 1100px) {
  .eco { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px 48px; align-items: stretch; }
  .eco .eco-core { grid-column: 2; grid-row: 1 / 5; align-self: center; }
  .eco-lines { display: block; }
  .eco .plate { padding: 20px 22px; }
  .eco .plate-top { margin-bottom: 12px; }
  .eco .plate .icon { width: 40px; height: 40px; padding: 9px; border-radius: 12px; }
  .eco .plate h3 { font-size: 1.08rem; }
  .eco .plate p { font-size: 0.88rem; margin-top: 6px; }
  .eco .eco-l1 { grid-column: 1; grid-row: 1; }
  .eco .eco-l2 { grid-column: 1; grid-row: 2; }
  .eco .eco-l3 { grid-column: 1; grid-row: 3; }
  .eco .eco-l4 { grid-column: 1; grid-row: 4; }
  .eco .eco-r1 { grid-column: 3; grid-row: 1; }
  .eco .eco-r2 { grid-column: 3; grid-row: 2; }
  .eco .eco-r3 { grid-column: 3; grid-row: 3; }
  .eco .eco-r4 { grid-column: 3; grid-row: 4; }
  .eco .eco-b1 { grid-column: 2; grid-row: 5; justify-self: center; width: min(100%, 420px); }
}

/* encart RallypacMOD+ (antivol) */
.plus-band {
  margin-top: 28px; border: 1px solid var(--border-2); border-radius: 28px; padding: 40px 34px; color: var(--ink);
  background:
    radial-gradient(60% 90% at 0% 0%, rgba(141, 38, 50, 0.22), transparent 60%),
    radial-gradient(60% 90% at 100% 100%, rgba(124, 140, 255, 0.22), transparent 60%),
    var(--surface);
}
.plus-band::before { display: none; }
.plus-band h3 { color: #fff; font-size: clamp(1.6rem, 3.6vw, 2.6rem); font-weight: 700; letter-spacing: -0.035em; white-space: normal; margin-top: 16px; }
.plus-band .eyebrow { color: var(--ink-soft); }
.plus-band .eyebrow::before { background: var(--red); }
.plus-grid { max-width: none; }
.plus-grid > div { padding: 18px; border-radius: 16px; background: rgba(255, 255, 255, 0.035); border: 1px solid var(--border); }
.plus-grid h4 { font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; text-transform: none; color: #fff; }
.plus-grid p { color: var(--ink-soft); }
.plus-try { font-family: var(--f-mono); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.14em; color: var(--ink-soft); }
.plus-band .rp-act, .rp-act {
  font-family: var(--f-body); font-weight: 500; font-size: 0.88rem; letter-spacing: 0; text-transform: none;
  padding: 9px 15px; border-radius: 12px; border: 1px solid var(--border-2); background: rgba(255, 255, 255, 0.05); color: var(--ink);
}
.plus-band .rp-act:hover:not(:disabled), .rp-act:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); }
.plus-band .rp-act.is-primary, .rp-act.is-primary { background: var(--grad); border-color: transparent; color: #fff; }
.rp-act[aria-pressed="true"] { background: #fff; color: #0B0D12; border-color: #fff; }
.rp-armed { background: rgba(141, 38, 50, 0.16); color: var(--red-soft); border: 1px solid rgba(141, 38, 50, 0.4); }
.rp-armed::before { background: var(--red); }
.rp-phone { background: #050608; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 30px 70px -25px rgba(0, 0, 0, 0.95), 0 0 0 6px rgba(255, 255, 255, 0.02); }
.rp-avatar { background: var(--grad); font-family: var(--f-display); font-weight: 700; }

/* ---------------------------------------------------------------- application (interface web du boîtier) */
.webui-phone { background: #050608; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 36px; padding: 10px; box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 1), 0 0 80px -20px rgba(166, 107, 255, 0.35); }
.webui-phone iframe { border-radius: 27px; }
.webui-tabs .btn { padding: 8px 14px; font-size: 0.85rem; }
/* section « Tout se règle depuis votre téléphone » : texte et raccourcis à gauche, téléphone à droite, alignés en haut */
.webui-section { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .webui-section { grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; } }
.webui-section .section-head { margin-bottom: 28px; }
.webui-section .webui-side { align-items: flex-start; gap: 16px; }
.webui-section .webui-tabs { justify-content: flex-start; }
.webui-section .webui-log { text-align: left; max-width: 52ch; }
.webui-section .webui-phone { justify-self: center; }
@media (min-width: 900px) { .webui-section .webui-phone { justify-self: end; } }
.webui-dials canvas { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 40px rgba(255, 110, 70, 0.28); }
.webui-dials figcaption { font-family: var(--f-mono); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.14em; color: var(--ink-soft); }
.webui-log { color: var(--ink-soft); }

/* ---------------------------------------------------------------- compatibilité */
.compat-col { overflow: hidden; }
.compat-col h3 { background: none; color: #fff; font-family: var(--f-display); font-weight: 600; font-size: 1.1rem; letter-spacing: -0.01em; padding: 22px 24px 12px; border-bottom: 1px solid var(--border); }
.compat-col.is-origin h3 { background: var(--grad-soft); color: #fff; }
.compat-col ul { padding: 6px 24px 14px; }
.compat-col li { border-bottom: 1px solid var(--border); padding-block: 12px; }
.compat-col li span { font-family: var(--f-mono); font-weight: 500; font-size: 0.82rem; color: var(--ink-soft); }
.compat-note p { border-left: 2px solid; border-image: var(--grad) 1; color: var(--ink-soft); }

/* ---------------------------------------------------------------- avis */
.g-card { padding: 4px; }
.g-card figcaption { gap: 10px; padding: 22px; }
.g-stars { color: #FFB547; letter-spacing: 3px; }
.g-stars span { color: rgba(255, 255, 255, 0.15); }
.g-card q { font-style: normal; color: var(--ink); line-height: 1.65; }
.g-card q::before { content: "“"; display: block; height: 0.6em; font-family: var(--f-display); font-size: 3rem; line-height: 0.9; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------------------------------------------------------------- réassurance */
.reassure { gap: 14px; padding-block: 56px; }
.reassure > div { border-left: 1px solid var(--border); padding: 20px; position: relative; overflow: hidden; }
.reassure > div::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--grad); opacity: 0.8; }
.reassure b { font-family: var(--f-display); font-weight: 600; font-size: 1.02rem; letter-spacing: -0.01em; text-transform: none; color: #fff; margin-bottom: 4px; }
.reassure span { color: var(--ink-soft); }

/* ---------------------------------------------------------------- FAQ */
.faq { gap: 10px; border-top: 0; }
.faq details { padding: 0; transition: border-color 0.3s ease, background 0.3s ease; }
.faq details[open] { border-color: var(--border-2); }
.faq summary { padding: 20px 22px; font-family: var(--f-display); font-weight: 600; font-size: 1.08rem; letter-spacing: -0.01em; color: #fff; }
.faq summary::after { content: ""; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, 0.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ECEFF4' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform 0.35s var(--ease), background-color 0.3s ease; }
.faq details[open] summary::after { content: ""; transform: rotate(45deg); background-color: rgba(141, 38, 50, 0.25); }
.faq .a { padding: 0 22px 20px; margin: 0; color: var(--ink-soft); line-height: 1.75; animation: m-fade 0.45s var(--ease); }
.faq .a + .a { margin-top: -8px; }

/* ---------------------------------------------------------------- pages intérieures, formulaires, panier */
.page-head { padding-block: 64px 14px; }
.page-head h1 { font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.02; }
.panel { padding: 26px; }
.panel h2 { font-size: 1.4rem; letter-spacing: -0.02em; }
.field label, .kit-label { font-family: var(--f-mono); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.12em; color: var(--ink-soft); }
.field input, .field select, .field textarea, .cfg-boot-text input, .promo-row input {
  font-family: var(--f-body); background: var(--bg-2); color: var(--ink); border: 1px solid var(--border-2); border-radius: 12px; padding: 12px 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus, .cfg-boot-text input:focus { border-color: var(--red-soft); box-shadow: 0 0 0 4px rgba(141, 38, 50, 0.15); outline: none; }
.field .err, .rp-dialog-full, .cart-actions button { color: var(--red-soft); }
.choice, .swatch, .cfg-model, .cfg-finish, .cfg-boot-opt { background: var(--bg-2); border: 1px solid var(--border); border-radius: 14px; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
.choice:hover, .swatch:hover, .cfg-model:hover, .cfg-finish:hover, .cfg-boot-opt:hover { border-color: var(--border-2); }
.choice:has(input:checked), .choice.is-plus:has(input:checked), .cfg-model:has(input:checked), .cfg-model.is-plus:has(input:checked), .cfg-finish:has(input:checked), .cfg-boot-opt:has(input:checked) {
  border-color: transparent; box-shadow: 0 0 0 1.5px #8D2632, 0 10px 30px -12px rgba(141, 38, 50, 0.55);
}
.swatch:has(input:checked) { border-color: transparent; box-shadow: 0 0 0 1.5px #8D2632; }
.choice .c-name, .choice .c-price, .cart-text b, .cart-price, .rp-dialog-total b, .cfg-model-top b { font-family: var(--f-display); font-weight: 700; text-transform: none; letter-spacing: -0.02em; color: #fff; }
.choice input, .check input { accent-color: var(--red); }
.cart-line, .cfg-sum td { border-bottom: 1px solid var(--border); }
.summary tr.total td, .cfg-sum tr.total td { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.02em; color: #fff; border-top: 1px solid var(--border-2); }
.alert { border: 1px solid rgba(141, 38, 50, 0.5); background: rgba(141, 38, 50, 0.08); border-radius: 14px; }
.alert.ok { border-color: rgba(61, 220, 151, 0.5); background: rgba(61, 220, 151, 0.08); }
.legal h2 { font-size: 1.5rem; letter-spacing: -0.02em; }
.legal .todo { background: rgba(124, 140, 255, 0.1); border-left: 2px solid var(--blue); border-radius: 0 12px 12px 0; }
.gift-panel { border-left: 1px solid var(--border); box-shadow: inset 3px 0 0 #8D2632, 0 30px 60px -40px rgba(0, 0, 0, 0.9); }
.finish-opt span { font-family: var(--f-body); font-weight: 500; font-size: 0.85rem; letter-spacing: 0; text-transform: none; border: 1px solid var(--border-2); background: rgba(255, 255, 255, 0.04); }
.finish-opt input:checked + span { background: #fff; border-color: #fff; color: #0B0D12; }

/* fenêtre « Une personnalisation ? » */
.rp-dialog { border: 1px solid var(--border-2); border-radius: 24px; background: rgba(14, 16, 22, 0.97); box-shadow: 0 50px 120px -30px rgba(0, 0, 0, 1); }
.rp-dialog[open] { animation: m-pop 0.35s var(--ease); }
.rp-dialog::backdrop { background: rgba(3, 4, 6, 0.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.rp-dialog-head { background: none; border-bottom: 1px solid var(--border); padding: 16px 22px; }
.rp-dialog-head h2 { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.03em; }
.rp-dialog-body { padding: 18px 22px; }
.rp-dialog-foot { border-top: 1px solid var(--border); padding: 14px 22px; }
.rp-gift { border-top: 1px solid var(--border); }

/* configurateur */
.cfg-stage { border: 1px solid var(--border-2); border-radius: 24px; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 1); background: radial-gradient(ellipse 80% 70% at 50% 38%, #232937 0%, #121520 55%, #08090D 100%); }
.cfg-stage::before { background: linear-gradient(to bottom, transparent, rgba(141, 38, 50, 0.06)); }
.cfg-badge { font-family: var(--f-mono); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.12em; background: rgba(255, 255, 255, 0.1); border: 1px solid var(--border-2); border-radius: 999px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cfg-badge.is-plus { background: var(--grad); border-color: transparent; }
.cfg-screens-label, .cfg-hint { color: var(--ink-soft); }
.cfg-screens-label { font-family: var(--f-mono); font-weight: 500; }
.cfg-chip { font-family: var(--f-body); font-weight: 500; letter-spacing: 0; text-transform: none; border: 1px solid var(--border-2); background: rgba(255, 255, 255, 0.04); color: var(--ink); }
.cfg-chip[aria-pressed="true"] { background: #fff; border-color: #fff; color: #0B0D12; }
.cfg-step { border-radius: 20px; padding: 20px 22px 22px; }
.cfg-step legend, .cfg-legend { font-family: var(--f-display); font-weight: 600; font-size: 1.1rem; letter-spacing: -0.01em; text-transform: none; color: #fff; }
.cfg-n { background: var(--grad); font-family: var(--f-mono); }
.cfg-color:hover, .cfg-color:has(input:checked) { background: var(--bg-2); }
.cfg-color:has(input:checked) { border-color: #8D2632; }
.cfg-finish b, .cfg-boot-opt b { font-family: var(--f-display); text-transform: none; letter-spacing: -0.01em; }
.cfg-share { color: var(--red-soft); }

/* suivi, notice (en-tête), avis */
.timeline li::before { background: var(--bg-2); border-color: var(--border-2); }
.timeline li.done::before { background: var(--green); border-color: var(--green); box-shadow: 0 0 14px rgba(61, 220, 151, 0.5); }
.manual-cover { background: var(--grad); box-shadow: 0 40px 80px -30px rgba(192, 99, 255, 0.5); border-radius: 18px; }
.manual-cover::before { display: none; }
.mc-brand { font-family: var(--f-display); font-weight: 700; }
.mc-title { font-family: var(--f-display); text-transform: none; background: rgba(0, 0, 0, 0.35); color: #fff; border-radius: 6px; }
.stars label { color: rgba(255, 255, 255, 0.18); }

/* notice d'utilisation, version écran (.nt-web) ; la version imprimée (PDF) a sa propre page et ne charge pas ce fichier */
.nt-web .nt-side p, .nt-web .nt-kicker { font-family: var(--f-mono); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.14em; color: var(--red-soft); }
.nt-web .nt-kicker span { background: var(--grad); font-family: var(--f-mono); font-size: 0.8rem; }
.nt-web .nt-side { font-size: 0.92rem; }
.nt-web .nt-side a { color: var(--ink-soft); transition: color 0.2s ease; }
.nt-web .nt-side a:hover { color: #fff; text-decoration: none; }
@media (max-width: 999px) { .nt-web .nt-side { border: 1px solid var(--border); border-radius: 18px; background: var(--surface); } }
.nt-web .nt-h { font-family: var(--f-display); font-weight: 700; text-transform: none; letter-spacing: -0.035em; color: #fff; }
.nt-web .nt-h::after { height: 3px; width: 72px; border-radius: 3px; background: var(--grad); }
.nt-web .nt-chapter h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; text-transform: none; color: #fff; }
.nt-web .nt-chapter p, .nt-web .nt-chapter li { color: var(--ink); }
.nt-web .nt-muted, .nt-web .nt-small, .nt-web .nt-fig figcaption, .nt-web .nt-langs { color: var(--ink-soft); }
.nt-web .nt-ill { border-radius: 16px; border-color: rgba(255, 255, 255, 0.1); }
.nt-web .nt-fig img { border-radius: 16px; }
.nt-web .nt-box { background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-left: 3px solid var(--blue); border-radius: 14px; }
.nt-web .nt-box.warn { border-left-color: var(--red); background: rgba(141, 38, 50, 0.07); }
.nt-web .nt-box.tip { border-left-color: var(--green); background: rgba(61, 220, 151, 0.06); }
.nt-web .nt-box > b:first-child { font-family: var(--f-display); text-transform: none; letter-spacing: -0.01em; color: #fff; }
.nt-web .nt-steps > li::before { background: var(--grad); font-family: var(--f-mono); font-weight: 500; font-size: 0.8rem; }
.nt-web .nt-t { border-collapse: separate; border-spacing: 0; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.nt-web .nt-t th { font-family: var(--f-mono); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.1em; background: var(--surface-2); color: var(--ink-soft); }
.nt-web .nt-t td { border-color: var(--border); }
.nt-web .nt-tag { font-family: var(--f-mono); font-weight: 500; background: var(--grad); border-radius: 999px; padding: 2px 9px; }
.nt-web .nt-callout { font-family: var(--f-body); font-weight: 600; letter-spacing: 0; text-transform: none; border-radius: 999px; padding: 4px 10px; }

/* ---------------------------------------------------------------- pied de page */
footer { background: var(--asphalt); color: var(--ink-soft); margin-top: 0; border-top: 1px solid var(--border); position: relative; overflow: hidden; }
footer::before { content: ""; position: absolute; left: 50%; top: -220px; width: 900px; height: 400px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(141, 38, 50, 0.14), transparent); pointer-events: none; }
footer .flag { display: none; }
footer a { color: var(--ink); }
.footer-inner { position: relative; padding-block: 72px 56px; }
.footer-brand b { font-family: var(--f-display); font-weight: 700; font-size: clamp(2.4rem, 7vw, 4.6rem); letter-spacing: -0.04em; color: #fff; }
.footer-brand .script { font-size: clamp(2.4rem, 7vw, 4.6rem); }
.disclaimer { border-top: 1px solid var(--border); color: #6F7888; }

/* ---------------------------------------------------------------- animations */
@keyframes m-spin { to { --rp-angle: 360deg; } }
@keyframes m-glow { 0%, 100% { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 26px 0 rgba(255, 110, 70, 0.22); } 50% { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 0 46px 6px rgba(192, 99, 255, 0.34); } }
@keyframes m-ping { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0.55); } 80%, 100% { box-shadow: 0 0 0 10px rgba(61, 220, 151, 0); } }
@keyframes m-fade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes m-pop { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes m-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -18px, 0); } }

/* apparition au défilement (classes posées par motion.js, uniquement si JavaScript est actif) */
.m-js .m-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: var(--m-delay, 0ms); }
.m-js .m-reveal.m-in { opacity: 1; transform: none; }
/* titre d'accroche : mots qui montent un à un */
.m-word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.m-word > span { display: inline-block; transform: translateY(105%); transition: transform 1s var(--ease); transition-delay: var(--m-delay, 0ms); }
.m-in .m-word > span { transform: none; }
/* dessin de la Mustang qui se trace */
.m-js .hero-front path, .m-js .hero-front circle, .m-js .hero-front ellipse { transition: stroke-dashoffset 2.6s cubic-bezier(0.6, 0, 0.2, 1), fill-opacity 1.2s ease 1.8s; }
/* halos flottants dans le bloc d'accroche */
.m-orb { position: absolute; z-index: 0; border-radius: 50%; filter: blur(60px); pointer-events: none; animation: m-float 9s ease-in-out infinite; }

/* ================================================================ SOBRIÉTÉ
   Demande du 10/11 : moderne mais sobre. Pas de dégradés de couleur, pas de halos lumineux, pas de liseré qui tourne.
   Ces règles passent après tout le reste et l'emportent. */
.demo-band { background: var(--bg); }
.demo-band::before, .m-orb, footer::before { display: none; }
.hero { background: var(--bg-2); }
.hero::after { display: none; }
.hero-front { color: #FFFFFF; opacity: 0.1; }
.script, .thesis blockquote span { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--accent); }
.flag { background: var(--border); }
/* écrans de la démo et de l'application : plus de halo */
.rp-dial { animation: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06); }
.webui-dials canvas { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1); }
.webui-phone { box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9); }
.rp-phone { box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9); }
/* points et voyants sans lueur */
.eyebrow::before, .rp-live-title::before { box-shadow: none; }
.demo-band .rp-caption::before { animation: none; box-shadow: none; }
/* boutons : couleur unie, pas de reflet ni de lueur */
.btn-primary, .hero .btn-primary { background: var(--accent); background-size: auto; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); }
.btn-primary:hover { background: #A32E3B; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.btn-primary::after { display: none; }
.demo-band .rp-act.is-primary, .plus-band .rp-act.is-primary, .rp-act.is-primary { background: var(--accent); box-shadow: none; }
.demo-band .rp-chip[aria-pressed="true"], .demo-band .rp-act[aria-pressed="true"] { box-shadow: none; }
/* cartes : fond uni, sans projecteur coloré */
.model, .plate, .compat-col, .g-card, .panel, .cfg-step, .faq details, .reassure > div { background: var(--surface); }
.model::before, .plate::before, .g-card::before { display: none; }
.model.is-plus { animation: none; border: 1px solid rgba(141, 38, 50, 0.55); background: var(--surface); box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.9); }
.model.is-plus .model-band span { background: var(--accent); }
.plate .icon { background: rgba(255, 255, 255, 0.05); border-color: var(--border); }
.plus-band { background: var(--surface); }
.compat-col.is-origin h3 { background: var(--surface-2); }
.compat-note p { border-image: none; border-left: 2px solid var(--accent); }
.g-card q::before { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--accent); }
/* bandeau de Noël aux couleurs du logo : fond bleu marine, trois larges bandes verticales rouge / blanc / bleu
   posées aux trois quarts de la largeur (comme les bandes derrière le cheval du logo), séparées par un filet marine */
.xmas-bar {
  --xr: #8D2632; --xw: #FFFFFF; --xbl: #2F5DBA; --xn: #1C3666;
  --sx: 75%; --sw: 22px; --sg: 4px;
  background:
    linear-gradient(90deg,
      transparent calc(var(--sx) - 1.5 * var(--sw) - var(--sg)),
      var(--xr) 0 calc(var(--sx) - 0.5 * var(--sw) - var(--sg)),
      transparent 0 calc(var(--sx) - 0.5 * var(--sw)),
      var(--xw) 0 calc(var(--sx) + 0.5 * var(--sw)),
      transparent 0 calc(var(--sx) + 0.5 * var(--sw) + var(--sg)),
      var(--xbl) 0 calc(var(--sx) + 1.5 * var(--sw) + var(--sg)),
      transparent 0),
    var(--xn);
  color: #FFFFFF; border-bottom: 1px solid rgba(255, 255, 255, 0.16); padding-block: 11px; font-weight: 600;
}
.xmas-bar a { color: #FFFFFF; font-weight: 700; text-decoration-color: var(--xr); text-decoration-thickness: 2px; }
.xmas-bar .xmas-snow { color: #BFD0F2; }
/* écran moyen : bandes repoussées vers la droite pour ne pas passer sous le texte ; téléphone : texte sur deux lignes, bandes à droite et plus fines */
@media (max-width: 1199px) { .xmas-bar { --sx: 88%; } }
@media (max-width: 699px) { .xmas-bar { --sx: calc(100% - 34px); --sw: 12px; --sg: 3px; padding-right: 80px; } }
.cfg-stage { background: var(--surface-2); }
.cfg-stage::before { display: none; }
.manual-cover { background: var(--accent); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8); }
.choice:has(input:checked), .choice.is-plus:has(input:checked), .cfg-model:has(input:checked), .cfg-model.is-plus:has(input:checked), .cfg-finish:has(input:checked), .cfg-boot-opt:has(input:checked) { box-shadow: 0 0 0 1.5px var(--accent); }
.field input:focus, .field select:focus, .field textarea:focus, .cfg-boot-text input:focus { box-shadow: 0 0 0 3px rgba(141, 38, 50, 0.18); }
.timeline li.done::before { box-shadow: none; }

/* ================================================================ COULEURS DU LOGO SUR FOND CRÈME (10/11)
   Fond crème beige, encadrés bleu marine du logo (texte blanc dedans), titres rouges, texte navy sur le crème.
   Barre du haut et pied de page en bleu marine. Pour revenir au thème sombre gris/orange : supprimer ce bloc. */
:root, :root[data-theme="dark"], :root:not([data-theme="light"]) {
  --logo-blue: #1C3666;
  --logo-blue-2: #24427A;
  --logo-red: #8D2632;
  --accent: #8D2632;
  --red: #8D2632;
  --red-soft: #A32E3B;
  --bg: #EFE6D3;
  --bg-2: #E8DDC6;
  --ink: #1B2A47;
  --ink-soft: #46546E;
  --title: var(--logo-red);
  --surface: #1C3666;
  --surface-2: #24427A;
  --border: rgba(27, 42, 71, 0.16);
  --border-2: rgba(27, 42, 71, 0.28);
  --nav: #1C3666;
  --asphalt: #1C3666;
  color-scheme: light;
}
::selection { background: rgba(141, 38, 50, 0.25); color: var(--ink); }
/* zones sombres (encadrés bleus, barre du haut, pied de page, encadré des prix du haut de page) : le texte y repasse en blanc */
.model, .model.is-plus, .plate, .compat-col, .g-card, .panel, .cfg-step, .faq details, .reassure > div, .plus-band, .rp-live, .plus-grid > div, .rp-dialog,
.topbar, footer, .hv-offer, .lang-panel {
  --ink: #FFFFFF; --ink-soft: #DCE2EC; --border: rgba(255, 255, 255, 0.14); --border-2: rgba(255, 255, 255, 0.26);
  color: #FFFFFF;
}
.model, .model.is-plus, .plate, .compat-col, .g-card, .panel, .cfg-step, .faq details, .reassure > div, .plus-band, .rp-live, .plus-grid > div, .rp-dialog {
  background: var(--logo-blue); border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 24px 50px -32px rgba(27, 42, 71, 0.55);
}
.model.is-plus { border-color: var(--logo-red); }
.compat-col.is-origin h3 { background: var(--logo-blue-2); }
.plate .icon { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); }
.choice, .swatch, .cfg-model, .cfg-finish, .cfg-boot-opt, .field input, .field select, .field textarea, .promo-row input { background: #152B52; color: #FFFFFF; }
.topbar, .topbar.is-scrolled { background: var(--logo-blue); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: rgba(255, 255, 255, 0.1); }
.lang-panel { background: var(--logo-blue); }
footer { background: var(--logo-blue); }
.disclaimer { color: #B9C3D6; }
/* titres en rouge */
h1, h2, h3, h4, .section-head h2, .page-head h1, .model h3, .plate h3, .plus-band h3, .plus-grid h4, .compat-col h3,
.reassure b, .faq summary, .rp-live-title, .rp-dialog-head h2, .nt-web .nt-h, .nt-web .nt-chapter h3 { color: var(--logo-red); }
/* sur les encadrés bleus, un rouge un peu plus clair pour rester lisible */
.model h3, .plate h3, .plus-band h3, .plus-grid h4, .compat-col h3, .reassure b, .faq summary, .rp-live-title, .rp-dialog-head h2 { color: #8D2632; }
/* rouge exact du logo (#8D2632) sur fond sombre : liseré blanc comme sur le logo, sinon il serait illisible */
.model h3, .plate h3, .plus-band h3, .plus-grid h4, .compat-col h3, .reassure b, .faq summary, .rp-live-title, .rp-dialog-head h2 {
  text-shadow: 1px 0 0 #FFFFFF, -1px 0 0 #FFFFFF, 0 1px 0 #FFFFFF, 0 -1px 0 #FFFFFF, 0.8px 0.8px 0 #FFFFFF, -0.8px -0.8px 0 #FFFFFF, 0.8px -0.8px 0 #FFFFFF, -0.8px 0.8px 0 #FFFFFF;
}
.rp-live-title { text-shadow: 1.5px 0 0 #FFFFFF, -1.5px 0 0 #FFFFFF, 0 1.5px 0 #FFFFFF, 0 -1.5px 0 #FFFFFF, 1.1px 1.1px 0 #FFFFFF, -1.1px -1.1px 0 #FFFFFF, 1.1px -1.1px 0 #FFFFFF, -1.1px 1.1px 0 #FFFFFF; }
/* comparatif des modèles : noms en rouge du logo, sans contour (demande du 11/11) */
.model h3 { text-shadow: none; }
.faq summary::after { background-color: rgba(255, 255, 255, 0.1); }
/* le texte : navy sur le crème, blanc dans les encadrés (via --ink) */
body { color: var(--ink); }
.section-head p, .compat-note p, .webui-log { color: var(--ink-soft); }
.model-list li, .plate p, .plus-grid p, .g-card q, .faq .a, .reassure span, .compat-col li span { color: #FFFFFF; }
.model.is-plus .model-list.is-base li { color: #C9D2E3; }
/* fond beige effet cuir grainé : tuile sans couture (assets/leather-beige.webp, générée par le script leather.py),
   même fond fixe partout pour que les raccords ne se voient pas */
:root {
  --bg-tex: url("leather-beige.webp") 0 0 / 512px 512px repeat, #E3D6BC;
}
body { background: var(--bg-tex); background-attachment: fixed; }
.demo-band { background: transparent; color: var(--ink); }
.demo-band .rp-stage { background: none; }
@media (max-width: 1179px) { .demo-band .rp-stage { background: var(--bg-tex); background-attachment: fixed; } }
.rp-stage::before { background: radial-gradient(ellipse 72% 80% at 50% 56%, transparent 70%, rgba(239, 230, 211, 0.55) 100%) !important; }
.demo-band .rp-caption { color: var(--ink-soft); }
.demo-band .rp-chip[aria-pressed="true"], .demo-band .rp-act[aria-pressed="true"] { background: #FFFFFF; color: var(--logo-blue); }
.eyebrow { color: var(--ink-soft); background: rgba(255, 255, 255, 0.4); }
.flag { background: rgba(27, 42, 71, 0.12); }
.btn-ghost { background: transparent; }
.webui-section .btn-ghost:hover, .hero .btn-ghost:hover { background: rgba(27, 42, 71, 0.08); }

@media (prefers-reduced-motion: reduce) {
  .model.is-plus, .rp-dial, .m-orb, .demo-band .rp-caption::before { animation: none; }
  .m-js .m-reveal, .m-word > span { opacity: 1; transform: none; transition: none; }
  .btn, .plate, .g-card { transition: none; }
}

/* ================================================================ 12/11 : HAUT DE PAGE, PRIX DE LANCEMENT, PAGE DÉMO, LOGO
   Haut de page (refait l'après-midi du 12/11, sans vidéo) : fond bleu marine uni, titre + une phrase + trois points clés,
   photo du tableau de bord aux vrais écrans qui défilent, encadré des deux prix de lancement, boutons.
   Animations (seulement si motion.js a posé .m-js) : titre mot par mot, éléments qui montent en cascade, coches qui se
   tracent, écrans en fondu. Couleurs unies du logo, pas de dégradé ni de halo. */

/* -- logo : grand et à cheval sur la barre en haut de page, taille normale dès qu'on défile (is-top posé par motion.js) */
.brand { position: relative; z-index: 2; }
.brand-logo { transform-origin: left top; transition: transform 0.45s var(--ease), filter 0.45s var(--ease); }
.topbar.is-top .brand-logo { transform: scale(2.3); filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.45)); }
@media (max-width: 979px) { .topbar.is-top .brand-logo { transform: scale(1.75); } }
/* petit téléphone : « Panier » masqué tant qu'il est vide (le bouton Commander suffit), pour laisser grandir le logo */
@media (max-width: 520px) {
  .topcart:has([data-cart-count]:empty) { display: none; }
  .topbar.is-top .brand-logo { transform: scale(1.6); }
  .topbar.is-top:has([data-cart-count]:not(:empty)) .brand-logo { transform: scale(1.2); }
}
/* écrans moyens (980 à 1279 px) : menu compact (« Démo » au lieu de « Démonstration interactive »), logo un peu moins
   agrandi et écarté du menu pour ne pas le chevaucher */
.topnav a { white-space: nowrap; }
@media (min-width: 980px) and (max-width: 1279px) {
  .topnav { gap: 2px; font-size: 0.88rem; }
  .topnav a { padding: 7px 10px; }
  .topnav-demo .nd-full { display: none; }
  .topnav-demo .nd-short { display: inline; }
  .brand { margin-right: 44px; }
  .topbar.is-top .brand-logo { transform: scale(1.6); }
}
.page-demo .topbar.is-top .brand-logo { transform: none; filter: none; }   /* page démo : rien ne doit mordre sur la démo */

/* -- onglet « Démonstration interactive » */
.topnav a.topnav-demo { color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); }
.topnav a.topnav-demo:hover { background: rgba(255, 255, 255, 0.14); }
.topnav a[aria-current="page"], .topnav a.topnav-demo[aria-current="page"] { background: #FFFFFF; color: var(--logo-blue); box-shadow: none; }
@media (max-width: 979px) {
  .topdemo { display: inline-flex; padding: 6px 11px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.5); color: #FFFFFF; font-size: 0.82rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
  .topdemo[aria-current="page"] { background: #FFFFFF; color: var(--logo-blue); }
}
/* petit téléphone : le menu langue/devise ne garde que le globe, pour laisser la place au bouton « Démo » */
@media (max-width: 520px) {
  .topdemo { gap: 5px; padding: 5px 9px; font-size: 0.78rem; }
  .lang-menu > summary { font-size: 0; gap: 0; }
  .lang-menu > summary span { font-size: 1rem; }
  .topbar-shop { gap: 6px; }
}

/* -- badge « Prix de lancement » (haut de page, modèles, démo) */
.launch-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: #8D2632; color: #FFFFFF; font-family: var(--f-mono); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.2; white-space: nowrap; }
.launch-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #FFFFFF; animation: launch-blink 1.6s ease-in-out infinite; }
@keyframes launch-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
.launch-price { font-family: var(--f-display); font-size: 1.1rem; color: inherit; }
.launch-price b { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; }
.launch-price s { margin-left: 4px; opacity: 0.72; font-size: 1.05rem; text-decoration-thickness: 2px; }

/* -- haut de page */
/* sans fond propre (demande du 12/11) : le haut de page est posé sur le fond du thème (cuir beige, noir, siège…) */
.hero.hero-v3 { background: transparent; color: var(--ink); border: 0; }
.hero.hero-v3::after { display: none; }
.hero-v3 h1 { margin: 0; color: var(--logo-red); font-size: clamp(2.2rem, 3.9vw, 3.6rem); line-height: 1.02; letter-spacing: -0.035em; }
.hero-v3 h1 .script { display: block; margin-top: 14px; color: var(--ink); text-shadow: none; font-weight: 500; font-size: 0.5em; line-height: 1.25; letter-spacing: -0.015em; }
.hv-lead { margin: 18px 0 0; max-width: 46ch; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.6; }
.hv-points li { font-size: 1.02rem; font-weight: 500; line-height: 1.45; color: var(--ink); }
.hv-points svg { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: #8D2632; color: #FFFFFF; }
.hv-frame { border: 1px solid rgba(0, 0, 0, 0.18); box-shadow: 0 30px 60px -30px rgba(27, 42, 71, 0.6); }
.hv-dash { transition: transform 0.6s var(--ease); }
.hv-visual:hover .hv-dash { transform: scale(1.025); }
.hv-play { padding: 5px 15px 5px 5px; gap: 8px; border-radius: 999px; background: #FFFFFF; color: var(--logo-blue); font-weight: 700; font-size: 0.86rem; box-shadow: 0 12px 26px -12px rgba(0, 0, 0, 0.7); transition: background-color 0.25s ease, color 0.25s ease; }
.hv-play i { width: 26px; height: 26px; }
@media (min-width: 600px) { .hv-play { bottom: 3%; } }
.hv-play i { background: #8D2632; color: #FFFFFF; }
.hv-visual:hover .hv-play, .hv-visual:focus-visible .hv-play { background: #8D2632; color: #FFFFFF; }
.hv-visual:hover .hv-play i, .hv-visual:focus-visible .hv-play i { background: #FFFFFF; color: #8D2632; }
.hv-visual:focus-visible { outline: none; }
.hv-visual:focus-visible .hv-frame { outline: 3px solid var(--ink); outline-offset: 3px; }
.hv-offer { padding: 14px 20px 14px; border-radius: 18px; background: var(--logo-blue); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 24px 50px -32px rgba(27, 42, 71, 0.55); }
.hv-left { font-size: 0.86rem; font-weight: 600; color: #FFFFFF; }
.hv-rows li + li { border-top: 1px solid rgba(255, 255, 255, 0.14); }
.hv-name { font-weight: 600; font-size: 1rem; color: #FFFFFF; }
.hv-name small { font-weight: 400; font-size: 0.82rem; line-height: 1.35; color: #C9D3E6; }
.hv-price b { font-family: var(--f-display); font-size: 1.65rem; font-weight: 700; letter-spacing: -0.02em; color: #FFFFFF; }
.hv-price s { font-family: var(--f-display); font-size: 1.05rem; font-weight: 500; color: rgba(255, 255, 255, 0.62); text-decoration-thickness: 2px; }
.hv-until { font-size: 0.84rem; color: #C9D3E6; }
.hero-v3 .hero-ctas { margin-top: 0; }
.hero-v3 .btn-ghost { color: var(--ink); border-color: var(--border-2); }
.hero-v3 .btn-ghost:hover { background: rgba(27, 42, 71, 0.08); color: var(--ink); }
.hero-v3 .hero-note { margin: 14px 0 0; color: var(--ink-soft); }
.hero-ctas .btn-demo svg { transition: transform 0.3s var(--ease); }
.hero-ctas .btn-demo:hover svg { transform: scale(1.2); }
@media (max-width: 599px) {
  .hero-v3 h1 .script { font-size: 0.56em; }
  .hv-offer { padding-inline: 16px; }
  .hv-price b { font-size: 1.4rem; }
  .hv-price s { font-size: 0.95rem; }
  .hero-v3 .hero-ctas .btn { flex: 1 1 100%; justify-content: center; }
}

/* animations du haut de page : montée en cascade, coches qui se tracent, photo qui apparaît, bouton démo qui respire */
@keyframes hero-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes hero-draw { from { stroke-dasharray: 1 2; stroke-dashoffset: 1; } to { stroke-dasharray: 1 2; stroke-dashoffset: 0; } }
@keyframes hv-rise { from { opacity: 0; transform: translateY(22px) scale(0.97); } }
@keyframes hv-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.m-js .hero-v3 .hv-anim { animation: hero-in 0.8s var(--ease) backwards; animation-delay: calc(0.3s + var(--d, 0) * 0.12s); }
.m-js .hero-v3 .hv-points svg path { animation: hero-draw 0.9s var(--ease) backwards; animation-delay: calc(0.6s + var(--d, 0) * 0.12s); }
.m-js .hero-v3 .hv-points li:nth-child(1) svg path { --d: 3; }
.m-js .hero-v3 .hv-points li:nth-child(2) svg path { --d: 4; }
.m-js .hero-v3 .hv-points li:nth-child(3) svg path { --d: 5; }
.m-js .hero-v3 .hv-visual { animation: hv-rise 1s var(--ease) 0.2s backwards; }
.m-js .hero-v3 .hv-play i { animation: hv-breathe 2.4s ease-in-out 1.6s infinite; }
@media (prefers-reduced-motion: reduce) { .hv-dash { transition: none; } }

/* -- modèles : badge, économie, prix barré, date de fin ; lien vers la démo */
.model-launch { margin-top: auto; gap: 8px 10px; }
.model-launch + .price { margin-top: 0; }
.launch-save { padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.42); font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: #FFFFFF; white-space: nowrap; }
.price.has-compare { flex-wrap: wrap; }
.price.has-compare s { font-family: var(--f-display); font-size: 1.45rem; font-weight: 600; color: rgba(255, 255, 255, 0.68); text-decoration-thickness: 2px; }
.model-until { margin: -4px 0 0; font-size: 0.82rem; color: #DCE2EC; }
.demo-link-row { margin: 28px 0 0; text-align: center; }
.demo-link { padding: 13px 22px; border-radius: 999px; background: var(--logo-blue, #1C3666); color: #FFFFFF; font-weight: 600; text-decoration: none; transition: transform 0.25s var(--ease), background-color 0.25s ease; }
.demo-link:hover { background: #24427A; transform: translateY(-2px); }
.demo-link span { transition: transform 0.25s var(--ease); }
.demo-link:hover span { transform: translateX(4px); }
.choice .c-price s { margin-right: 4px; font-size: 0.78em; font-weight: 500; opacity: 0.65; }

/* -- page « Démonstration interactive » : la démo occupe tout l'écran sous la barre du menu */
/* largeur de la photo = hauteur disponible × 1,8 (format de dash.webp), moins la barre du haut de la démo, la légende et le bandeau de Noël */
.demo-band.is-page { --demo-w: min(100%, calc((100vh - var(--topbar-h, 64px) - 180px) * 1.8)); min-height: calc(100vh - var(--topbar-h, 64px)); display: flex; flex-direction: column; justify-content: center; padding-block: 16px 22px; }
@supports (height: 100svh) { .demo-band.is-page { --demo-w: min(100%, calc((100svh - var(--topbar-h, 64px) - 180px) * 1.8)); min-height: calc(100svh - var(--topbar-h, 64px)); } }
.demo-band.is-page .rp-caption { display: none; }   /* le titre de la page dit déjà la même chose */
.demo-band.is-page > .wrap { width: 100%; }
.demo-top h1 { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.3rem); line-height: 1.1; }
.demo-top .launch-price { color: var(--ink); }
.demo-order { padding: 14px 26px; font-size: 1.02rem; }
@media (min-width: 1180px) {
  .demo-band.is-page .wrap { max-width: none; padding-inline: 32px; }
  .demo-band.is-page .demo-top { flex-wrap: nowrap; width: 100%; max-width: 1500px; margin-inline: auto; }
  .demo-band.is-page .rp-stage { width: var(--demo-w); }
}
@media (max-width: 1179px) {
  .demo-fab { position: fixed; z-index: 30; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 10px 10px 14px; border-radius: 18px; background: rgba(28, 54, 102, 0.95); color: #FFFFFF; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.6); }
  .demo-fab-price { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-family: var(--f-display); }
  .demo-fab-price .launch-badge { padding: 3px 8px; font-size: 0.6rem; }
  .demo-fab-price b { font-size: 1.25rem; }
  .demo-fab-price s { opacity: 0.7; }
  .demo-fab .btn { flex: none; margin-left: auto; padding: 12px 22px; }
  .demo-page { padding-bottom: 84px; }
  .demo-top .demo-top-order { display: none; }   /* téléphone / tablette : le bouton du bas suffit */
}

@media (prefers-reduced-motion: reduce) {
  .brand-logo { transition: none; }
  .launch-dot { animation: none; }
}

/* page démo sur un écran peu haut (portable 1280×720…) : le bandeau de Noël laisse sa place à la démo */
@media (min-width: 1180px) and (max-height: 820px) { .page-demo .xmas-bar { display: none; } }