/* OnlyPhone – feuille de style unique */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --ink: #16181c;
  --ink-2: #1e2126;
  --graphite: #2b2e34;
  --brass: #c9a06c;
  --brass-hi: #e6cfa8;
  --brass-ink: #8a6232;
  --glass: #f3f4f6;
  --white: #fff;
  --text: #16181c;
  --muted: #555a63;
  --line: rgba(22, 24, 28, .12);
  --on-dark: #f3f4f6;
  --on-dark-muted: #aab0ba;
  --line-dark: rgba(243, 244, 246, .14);
  --green: #1e7f4f;
  --green-hi: #5fd394;
  --red: #b3261e;
  --red-hi: #ff9b92;
  --wa: #177245;

  --f-display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --f-text: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --r-s: 10px;
  --r-m: 16px;
  --r-l: 28px;
  --gutter: 20px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --shadow-lift: 0 1px 2px rgba(22, 24, 28, .06), 0 12px 32px -12px rgba(22, 24, 28, .22);
  --dock-h: 0px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font: 400 1.0625rem/1.6 var(--f-text);
  font-feature-settings: "kern";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--dock-h);
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--f-display); line-height: 1.08; margin: 0; text-wrap: balance; font-weight: 700; letter-spacing: -.025em; }
p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: var(--brass-ink); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
button { font: inherit; color: inherit; }
::selection { background: var(--brass-hi); color: var(--ink); }
:focus-visible { outline: 3px solid var(--brass-ink); outline-offset: 3px; border-radius: 6px; }
.section-ink :focus-visible, .section-night :focus-visible, .hero :focus-visible, .site-header :focus-visible, .dock :focus-visible, .screens.is-dark :focus-visible { outline-color: var(--brass-hi); }

.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--brass); color: var(--ink); padding: 10px 16px; border-radius: var(--r-s); font-weight: 600; }
.skip:focus { top: 12px; }

/* Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 50px; padding: .75em 1.35em; border-radius: 999px; border: 1.5px solid transparent; background: transparent;
  font: 600 1rem/1.2 var(--f-text); text-decoration: none; cursor: pointer; text-align: center;
  transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--ease-out), box-shadow .2s;
}
.btn:active { transform: scale(.98); }
.btn-sm { min-height: 40px; padding: .5em 1.05em; font-size: .9375rem; }
.btn-brass { background: var(--brass); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 10px 22px -12px rgba(0, 0, 0, .55); }
.btn-brass:hover { background: var(--brass-hi); }
.btn-ghost { color: var(--on-dark); border-color: rgba(243, 244, 246, .35); }
.btn-ghost:hover { border-color: var(--on-dark); }
.btn-ink { background: var(--ink); color: var(--white); }
.btn-ink:hover { background: var(--graphite); }
.btn-wa { background: var(--wa); color: var(--white); }
.btn-wa:hover { background: #135e39; }
.btn-line { border-color: rgba(243, 244, 246, .35); color: var(--on-dark); }
.btn-line:hover { border-color: var(--on-dark); }
.btn-line-light { border-color: rgba(243, 244, 246, .35); color: var(--on-dark); }
.btn-line-light:hover { border-color: var(--on-dark); }
.btn-text { color: var(--on-dark-muted); padding-inline: .6em; }
.btn-text:hover { color: var(--on-dark); }
.link-btn { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--brass-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }

/* En-tête */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(22, 24, 28, .86);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  color: var(--on-dark);
  border-bottom: 1px solid var(--line-dark);
}
/* Sur téléphone et petite tablette : fond presque opaque sans flou (le flou d'arrière-plan ralentit le défilement) */
@media (max-width: 899px) {
  .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(22, 24, 28, .97); }
}
.header-in { display: flex; align-items: center; gap: 14px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--on-dark); text-decoration: none; font: 700 1.125rem/1 var(--f-display); letter-spacing: -.02em; }
.brand img { border-radius: 11px; }
.status { display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; color: var(--on-dark-muted); white-space: nowrap; }
.status strong { color: var(--on-dark); font-weight: 600; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--on-dark-muted); flex: none; }
.is-open .status-dot { background: var(--green-hi); box-shadow: 0 0 0 4px rgba(95, 211, 148, .18); }
.is-closed .status-dot { background: var(--red-hi); }
.nav { margin-left: auto; }
.nav ul { display: flex; gap: 4px; }
.nav a { display: block; padding: 10px 12px; color: var(--on-dark); text-decoration: none; font-size: .9375rem; border-radius: 8px; }
.nav a:not(.btn):hover { background: rgba(243, 244, 246, .08); }
.menu-btn { display: none; }
.header-cta { flex: none; }
/* Bouton « Appeler » de l'en-tête (sur téléphone, c'est la barre du bas qui s'en charge) */
.header-call { flex: none; }
@media (max-width: 899px) { .header-call { display: none; } }
/* Menu complet : un peu plus de largeur pour loger « Appeler » */
@media (min-width: 100000px) {
  .header-in { max-width: 1320px; }
  .nav a { padding-inline: 10px; }
}

@media (max-width: 99999px) {
  .header-in { min-height: 60px; }

  .status { margin-left: auto; }
  .header-cta { display: none; }
  .menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-right: -8px; border: 0; background: none; color: var(--on-dark); cursor: pointer; border-radius: 10px;
  }
  .menu-btn .ic { width: 26px; height: 26px; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--ink); border-bottom: 1px solid var(--line-dark);
    padding: 8px var(--gutter) 20px;
    max-height: calc(100dvh - 60px); overflow-y: auto; overscroll-behavior: contain;
    visibility: hidden; clip-path: inset(0 0 100% 0);
    transition: clip-path .32s var(--ease-out), visibility 0s .32s;
  }
  .nav.is-open { visibility: visible; clip-path: inset(0); transition: clip-path .38s var(--ease-out), visibility 0s; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav a { padding: 14px 4px; font: 600 1.375rem/1.2 var(--f-display); border-bottom: 1px solid var(--line-dark); border-radius: 0; }
}
.brand { flex: none; }
@media (max-width: 430px) { .brand span { display: none; } }

/* Hero */
.hero {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 70% at 85% 20%, #2f3238 0%, var(--ink) 60%);
  color: var(--on-dark);
  padding: 40px 0 28px;
}
.hero-in { display: grid; gap: 36px; align-items: center; }
.hero h1 { font-size: clamp(2.6rem, 11vw, 5.25rem); font-weight: 750; letter-spacing: -.04em; line-height: .98; max-width: 11ch; }
.hero-lead { margin-top: 20px; font-size: clamp(1.125rem, 3.8vw, 1.375rem); line-height: 1.45; color: var(--on-dark); max-width: 30ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-cta .btn { flex: 1 1 220px; }
@media (min-width: 560px) { .hero-cta .btn { flex: 0 0 auto; } }
.hero-note { margin-top: 16px; color: var(--on-dark-muted); font-size: .9375rem; max-width: 36ch; }
.hero-rating { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; color: var(--on-dark); text-decoration: none; font-size: .9375rem; min-height: 44px; }
.hero-rating:hover span:last-child { text-decoration: underline; }
.stars { display: inline-flex; gap: 2px; color: var(--brass); }
.stars .ic { width: 1rem; height: 1rem; fill: currentColor; stroke: none; }

.hero-visual { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.replay { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 0; background: none; color: var(--on-dark-muted); font-size: .875rem; cursor: pointer; border-radius: 999px; }
.replay:hover { color: var(--on-dark); }
.replay .ic { width: 1.05rem; height: 1.05rem; }

/* Le téléphone */
.phone {
  --w: clamp(212px, 58vw, 300px);
  position: relative; width: var(--w); aspect-ratio: 300 / 620;
  border-radius: calc(var(--w) * .165);
  padding: calc(var(--w) * .035);
  background: linear-gradient(145deg, #4a4e56 0%, #1c1e22 30%, #0c0d0f 70%, #3a3d44 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, .12),
    0 2px 4px rgba(0, 0, 0, .3),
    0 40px 80px -30px rgba(0, 0, 0, .8);
  transform: rotate(-4deg);
}
.phone-island { position: absolute; top: calc(var(--w) * .07); left: 50%; width: 30%; height: calc(var(--w) * .085); translate: -50% 0; background: #000; border-radius: 999px; z-index: 5; }
.phone-screen { position: relative; height: 100%; border-radius: calc(var(--w) * .135); overflow: hidden; background: #000; isolation: isolate; }

.lock {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  padding: 26% 7% 0;
  background:
    radial-gradient(90% 55% at 20% 95%, rgba(201, 160, 108, .75), transparent 70%),
    radial-gradient(80% 50% at 90% 70%, rgba(138, 98, 50, .8), transparent 70%),
    linear-gradient(180deg, #25282e 0%, #2b2e34 45%, #3a3128 100%);
  color: #fff;
}
.lock-date { font-size: calc(var(--w) * .052); font-weight: 600; opacity: .9; }
.lock-time { font: 600 calc(var(--w) * .25)/1 var(--f-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin-top: 2px; }
.notif {
  display: flex; gap: 10px; align-items: center; width: 100%; margin-top: 22%;
  padding: 10px 12px; border-radius: 18px;
  background: rgba(30, 32, 36, .55); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  text-align: left;
}
.notif img { border-radius: 8px; width: calc(var(--w) * .11); height: auto; }
.notif-title { font-size: calc(var(--w) * .045); font-weight: 600; display: flex; justify-content: space-between; gap: 6px; }
.notif-title span { font-weight: 400; opacity: .7; }
.notif-text { font-size: calc(var(--w) * .045); line-height: 1.3; opacity: .92; }

.broken { position: absolute; inset: 0; background: #050506; opacity: 0; }
.broken span { position: absolute; top: 0; bottom: 18%; }
.broken span:nth-child(1) { left: 5%; width: 7%; background: linear-gradient(#cfc6ff, #8f86ff 60%, #fff); opacity: .85; }
.broken span:nth-child(2) { left: 13%; width: 3%; background: #fff; opacity: .7; }
.broken span:nth-child(3) { left: 17%; width: 12%; bottom: 30%; background: linear-gradient(#e9e7ff, #6d7cff); opacity: .55; }
.broken span:nth-child(4) { left: 40%; width: 1.5%; top: 30%; bottom: 40%; background: #ff3b3b; opacity: .6; box-shadow: 14px 0 0 #3bff7a, 30px 0 0 rgba(255, 255, 255, .6); }
.cracks { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.cracks path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cracks .c { stroke: rgba(255, 255, 255, .88); stroke-width: 1.1; stroke-dasharray: var(--len) var(--len); stroke-dashoffset: 0; }
.cracks .g { stroke: var(--brass-hi); stroke-width: 3; opacity: 0; filter: drop-shadow(0 0 4px var(--brass)); stroke-dasharray: 16px calc(var(--len) * 1px + 16px); stroke-dashoffset: calc(16px - var(--len) * 1px); }
.chrono { position: absolute; inset: auto 0 12%; text-align: center; color: var(--brass-hi); opacity: 0; }
.chrono-num { font: 600 calc(var(--w) * .15)/1 var(--f-display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; text-shadow: 0 0 18px rgba(201, 160, 108, .6); }
.chrono-label { font-size: calc(var(--w) * .045); color: #e8e1d6; margin-top: 6px; }

/* États JS : cassé → réparation → réparé */
.js .phone.is-broken .broken,
.js .phone.is-broken .cracks,
.js .phone.is-healing .cracks { opacity: 1; }
.js .phone.is-healing .broken { opacity: 0; transition: opacity .9s ease .5s; }
.js .phone.is-broken .broken { opacity: 1; transition: none; }
.js .phone.is-healing .chrono { opacity: 1; transition: opacity .25s; }
.js .phone.is-healing .c { stroke-dashoffset: var(--len); transition: stroke-dashoffset .95s var(--ease-out) calc(var(--i) * 55ms + 150ms); }
.js .phone.is-healing .g { animation: trace .95s var(--ease-out) calc(var(--i) * 55ms + 150ms) both; }
.js .phone.is-healing .lock { filter: brightness(.3); }
.js .phone.is-healed .lock { filter: none; transition: filter .8s var(--ease-out); }
.js .phone.is-healed .chrono { opacity: 0; transition: opacity .4s; }
.js .phone.is-healed .notif { animation: notif .7s var(--ease-out) .15s both; }
.js .phone.is-broken .lock, .js .phone.is-healing .lock { filter: brightness(.25); }
@keyframes trace {
  0% { opacity: 0; stroke-dashoffset: calc(16px - var(--len) * 1px); }
  12% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; stroke-dashoffset: 0; }
}
@keyframes notif { from { opacity: 0; transform: translateY(-14px) scale(.96); } to { opacity: 1; transform: none; } }

/* Engagements */
.promises { display: grid; gap: 22px; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line-dark); }
.promises li { display: flex; gap: 14px; align-items: flex-start; }
.promises .ic { width: 28px; height: 28px; color: var(--brass); margin-top: 2px; }
.promises h2 { font-size: 1.1875rem; letter-spacing: -.015em; }
.promises p { color: var(--on-dark-muted); font-size: .9375rem; margin-top: 4px; }

@media (min-width: 760px) {
  .promises { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}
@media (min-width: 900px) {
  .hero { padding: 72px 0 40px; }
  .hero-in { grid-template-columns: 1.15fr .85fr; gap: 48px; }
  .hero-visual { padding-top: 8px; }
}

/* Sections */
.section { padding: 72px 0; }
.section-glass { background: var(--glass); }
.section-ink { background: var(--ink); color: var(--on-dark); }
.section-ink a:not(.btn) { color: var(--brass-hi); }
.section-night { background: #0f1013; color: var(--on-dark); }
.head { max-width: 720px; margin-bottom: 40px; }
.head h2, .split h2, .about h2, .faq-in h2, .contact-main h2, .pc-text h2 { font-size: clamp(2rem, 6.5vw, 3.25rem); letter-spacing: -.035em; }
.head p { margin-top: 14px; color: var(--muted); font-size: 1.0625rem; max-width: 60ch; }
.section-ink .head p, .section-night .head p { color: var(--on-dark-muted); }
.lead { font-size: 1.1875rem; line-height: 1.5; margin-top: 16px; max-width: 46ch; }
.muted { color: var(--muted); }
.h-sub { font-size: clamp(1.5rem, 4.5vw, 2.125rem); letter-spacing: -.03em; }
.opt { font-weight: 400; color: var(--on-dark-muted); }
@media (min-width: 900px) { .section { padding: 112px 0; } }

/* Réparations : liste, pas de cartes */
.repairs { border-top: 1px solid var(--line); }
.repairs li {
  display: grid; grid-template-columns: auto 1fr; column-gap: 16px; row-gap: 2px;
  padding: 22px 0; border-bottom: 1px solid var(--line);
}
.repairs .ic { width: 30px; height: 30px; color: var(--brass-ink); grid-row: span 2; margin-top: 2px; }
.repairs h3 { font-size: 1.3125rem; letter-spacing: -.02em; }
.repairs p { color: var(--muted); margin-top: 4px; max-width: 52ch; }
.repairs .link-btn { grid-column: 2; justify-self: start; margin-top: 4px; }
@media (min-width: 900px) {
  .repairs { display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; border-top: 0; }
  .repairs li { grid-template-columns: auto 1fr auto; align-items: center; padding: 26px 0; }
  .repairs li:nth-child(-n+2) { border-top: 1px solid var(--line); }
  .repairs .ic { grid-row: auto; }
  .repairs .link-btn { grid-column: auto; margin: 0; font-size: .9375rem; white-space: nowrap; }
}

/* Avant / pendant / après : les téléphones 3D (styles en fin de fichier) */

/* Pièces */
.parts { display: grid; gap: 28px; margin-bottom: 64px; }
.parts > div { padding-top: 18px; border-top: 2px solid var(--ink); }
.parts dt { font: 700 1.3125rem/1.2 var(--f-display); letter-spacing: -.02em; }
.parts dd { color: var(--muted); margin-top: 8px; max-width: 42ch; }
@media (min-width: 760px) { .parts { grid-template-columns: repeat(3, 1fr); gap: 40px; } }

.screens .muted { margin-top: 10px; max-width: 60ch; }
.screens-grid { display: grid; gap: 16px; margin-top: 32px; }
.screen-opt { position: relative; padding: 22px; border-radius: var(--r-l); background: var(--glass); }
/* Écran OLED : la recommandation du technicien (contour et badge couleur du bouton « Demander mon prix ») */
.screen-opt--reco { box-shadow: inset 0 0 0 2px var(--brass); }
.reco {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 6px 14px; border-radius: 999px; background: var(--brass); color: var(--ink);
  font: 600 .8125rem/1.2 var(--f-text); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .45);
}
.reco .ic { width: 14px; height: 14px; fill: currentColor; stroke: none; }
@media (max-width: 899px) { .screen-opt--reco { margin-top: 14px; } }
.screen-opt h4 { font-size: 1.375rem; letter-spacing: -.02em; margin-top: 18px; }
.screen-tag { color: var(--brass-ink); font-weight: 600; margin-top: 4px; }
.pros, .cons { margin-top: 16px; display: grid; gap: 8px; font-size: .9688rem; }
.pros li, .cons li { position: relative; padding-left: 28px; }
.pros li::before, .cons li::before { content: ""; position: absolute; left: 0; top: .28em; width: 18px; height: 18px; border-radius: 50%; }
.pros li::before { background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat; }
.cons li::before { background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E") center/12px no-repeat; }
.pros { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.screens-foot { margin-top: 28px; font-size: 1.0625rem; }

/* Démo d'écran : même image, noir et couleurs différents */
.demo { height: 120px; border-radius: 14px; position: relative; overflow: hidden; box-shadow: inset 0 0 0 5px #0a0a0b; }
.demo span { position: absolute; inset: 0; background:
  radial-gradient(34% 55% at 30% 50%, #ff7a3d, transparent 70%),
  radial-gradient(34% 55% at 55% 45%, #c542ff, transparent 70%),
  radial-gradient(30% 50% at 75% 55%, #2f8bff, transparent 70%); }
.demo-lcd { background: #23262c; }
.demo-lcd span { filter: saturate(.62) brightness(.92); opacity: .85; }
.demo-oled { background: #000; }
.demo-oled span { filter: saturate(1.1); }
.demo-orig { background: #000; }
.demo-orig span { filter: saturate(1.25) contrast(1.08); }
@media (min-width: 900px) {
  .screens-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .screen-opt { padding: 26px; }
}

/* Formulaire */
.form-wrap { display: grid; gap: 8px; }
.head-form p { color: var(--on-dark-muted); }
.rq { min-width: 0; }
.modes {
  display: flex; gap: 4px; padding: 4px; margin: 0 0 28px; border: 0; border-radius: 999px; min-width: 0; max-width: 100%;
  background: rgba(243, 244, 246, .08); overflow-x: auto; scrollbar-width: none;
}
.modes::-webkit-scrollbar { display: none; }
.modes label { flex: 1 0 auto; position: relative; }
.modes input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.modes span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 999px; font-weight: 600; font-size: .9375rem; white-space: nowrap; color: var(--on-dark-muted); transition: background-color .25s var(--ease-out), color .25s; }
.modes input:checked + span { background: var(--on-dark); color: var(--ink); }
.modes input:focus-visible + span { outline: 3px solid var(--brass-hi); outline-offset: 2px; }
.modes label:hover input:not(:checked) + span { color: var(--on-dark); }

.rq-grid { display: grid; gap: 32px; }
.rq-grid > * { min-width: 0; }
.rq-fields { display: grid; gap: 18px; align-content: start; }
.grp { display: grid; gap: 18px; }
.grp[hidden] { display: none; }
.field { display: grid; gap: 7px; align-content: start; min-width: 0; border: 0; padding: 0; margin: 0; }
.field > label, .field > legend { font-weight: 600; font-size: .9375rem; padding: 0; }
.field > legend { margin-bottom: 8px; }
.field input[type="text"], .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 12px 14px; border-radius: 12px;
  border: 1.5px solid rgba(243, 244, 246, .22); background: var(--ink-2); color: var(--on-dark);
  font: 400 1rem/1.4 var(--f-text); transition: border-color .2s, background-color .2s;
}
.field textarea { resize: vertical; min-height: 76px; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 42px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a06c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 20px; }
.field select option { background: var(--ink); color: var(--on-dark); }
.field ::placeholder { color: #8b919b; opacity: 1; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(243, 244, 246, .4); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brass); background: #23262c; box-shadow: 0 0 0 3px rgba(201, 160, 108, .3); }
.field [aria-invalid="true"] { border-color: var(--red-hi); }
.suffix { position: relative; }
.suffix span { position: absolute; right: 14px; top: 50%; translate: 0 -50%; color: var(--on-dark-muted); }
.err { color: var(--red-hi); font-size: .9063rem; font-weight: 500; }
.err::before { content: "! "; font-weight: 700; }
.err-summary { padding: 14px 16px; border-radius: 12px; background: rgba(255, 155, 146, .12); color: var(--on-dark); box-shadow: inset 0 0 0 1px rgba(255, 155, 146, .45); }
.err-summary strong { display: block; margin-bottom: 4px; }
.err-summary ul { list-style: disc; padding-left: 20px; }
.err-summary a { color: var(--red-hi) !important; }

.choice { display: flex; flex-wrap: wrap; gap: 8px; }
.choice > legend { width: 100%; }
.choice label { position: relative; }
.choice label[hidden] { display: none; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1.5px solid rgba(243, 244, 246, .22); font-size: .9375rem; font-weight: 500; transition: all .2s;
}
.choice label:hover span { border-color: rgba(243, 244, 246, .5); }
.choice input:checked + span { background: var(--brass); border-color: var(--brass); color: var(--ink); font-weight: 600; }
.choice input:focus-visible + span { outline: 3px solid var(--brass-hi); outline-offset: 2px; }
.choice .err { width: 100%; }

.rq-send { align-self: start; }
.bubble-label { font-weight: 600; font-size: .9375rem; margin-bottom: 10px; }
.bubble {
  position: relative; padding: 16px 18px; border-radius: 20px 20px 6px 20px;
  background: linear-gradient(180deg, #2c3a31, #23302a); color: #f1f5f2;
  box-shadow: inset 0 0 0 1px rgba(95, 211, 148, .18), 0 20px 40px -24px rgba(0, 0, 0, .8);
  min-height: 150px;
}
.bubble p { white-space: pre-wrap; font-size: .9688rem; line-height: 1.55; overflow-wrap: anywhere; }
.send { display: grid; gap: 10px; margin-top: 18px; }
.send .btn { width: 100%; }
.copy-status { min-height: 1.5em; margin-top: 8px; font-size: .9375rem; color: var(--green-hi); text-align: center; }
@media (min-width: 900px) {
  .form-wrap { grid-template-columns: 1fr; }
  .rq-grid { grid-template-columns: 1.25fr .85fr; gap: 56px; }
  .rq-fields { grid-template-columns: 1fr 1fr; column-gap: 20px; }
  .rq-fields > .err-summary, .rq-fields > .grp, .rq-fields > .field { grid-column: 1 / -1; }
  .grp { grid-template-columns: 1fr 1fr; column-gap: 20px; }
  .grp > .field:has(textarea), .grp > .choice { grid-column: 1 / -1; }
  .rq-send { position: sticky; top: 96px; }
  .modes { display: inline-flex; }
}

/* Rachat */
.split { display: grid; gap: 40px; }
.split .btn { margin-top: 28px; }
.flow { display: grid; gap: 0; counter-reset: none; }
.flow li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 20px 0; border-top: 1px solid var(--line); }
.flow li:last-child { border-bottom: 1px solid var(--line); }
.flow-n { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--glass); font: 700 1.125rem/1 var(--f-display); color: var(--brass-ink); }
.flow strong { font: 700 1.1875rem/1.25 var(--f-display); letter-spacing: -.015em; }
.flow p { color: var(--muted); margin-top: 4px; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } }

/* PC gamer */
.section-night { position: relative; overflow: hidden; }
.section-night::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 80% 40%, rgba(122, 76, 255, .22), transparent 70%), radial-gradient(40% 40% at 60% 90%, rgba(47, 139, 255, .14), transparent 70%); pointer-events: none; }
.pc-in { position: relative; display: grid; gap: 48px; }
.pc-text .lead { color: var(--on-dark); }
.pc-list { display: grid; gap: 20px; margin: 32px 0; }
.pc-list > div { padding-top: 16px; border-top: 1px solid var(--line-dark); }
.pc-list dt { font: 700 1.1875rem/1.25 var(--f-display); }
.pc-list dd { color: var(--on-dark-muted); margin-top: 6px; max-width: 46ch; }
.pc-photos { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; align-items: end; }
.pc-photos figure { margin: 0; border-radius: var(--r-l); overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }
.pc-a img { aspect-ratio: 3 / 4.4; object-fit: cover; width: 100%; }
.pc-b { margin-bottom: 18%; }
.pc-b img { aspect-ratio: 1; object-fit: cover; width: 100%; }
@media (min-width: 900px) { .pc-in { grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } }

/* Vente */
.shop { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--line); }
.shop li { display: grid; gap: 4px; align-content: start; padding: 20px 16px; background: var(--white); }
.shop .ic { width: 30px; height: 30px; color: var(--brass-ink); margin-bottom: 10px; }
.shop strong { font: 700 1.0625rem/1.25 var(--f-display); letter-spacing: -.01em; }
.shop span { color: var(--muted); font-size: .9063rem; }
@media (min-width: 760px) { .shop { grid-template-columns: repeat(4, 1fr); } .shop li { padding: 28px 24px; } }

/* Pourquoi + avis */
.why { display: grid; gap: 24px; }
.why > div { padding-top: 16px; border-top: 2px solid var(--ink); }
.why dt { font: 700 1.3125rem/1.2 var(--f-display); letter-spacing: -.02em; }
.why dd { color: var(--muted); margin-top: 8px; max-width: 42ch; }
@media (min-width: 760px) { .why { grid-template-columns: repeat(3, 1fr); gap: 40px; } }

.reviews { margin-top: 80px; display: grid; gap: 32px; }
.reviews-head { display: grid; gap: 14px; align-content: start; }
.score { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.score-n { font: 750 clamp(3.25rem, 12vw, 4.5rem)/1 var(--f-display); letter-spacing: -.04em; }
.score-n span { font-size: .45em; color: var(--muted); letter-spacing: 0; }
.score .stars .ic { width: 1.35rem; height: 1.35rem; color: var(--brass); }
.score-c { width: 100%; color: var(--muted); }
.quotes { display: grid; grid-auto-flow: column; grid-auto-columns: 86%; align-items: start; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--gutter) 16px; margin-inline: calc(var(--gutter) * -1); scrollbar-width: thin; scrollbar-color: var(--brass) transparent; }
.quotes li { scroll-snap-align: center; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 24px; border-radius: var(--r-l); background: var(--white); box-shadow: var(--shadow-lift); }
.quotes blockquote { margin: 0; display: grid; gap: 10px; font-size: 1rem; line-height: 1.55; }
.who { font-size: .875rem; color: var(--muted); }
.who strong { display: block; color: var(--text); font-size: .9688rem; }
@media (min-width: 1000px) {
  .reviews { grid-template-columns: 300px 1fr; gap: 56px; }
  .reviews-head { position: sticky; top: 100px; }
  .quotes { display: block; columns: 2; column-gap: 18px; overflow: visible; margin: 0; padding: 0; }
  .quotes li { break-inside: avoid; margin-bottom: 18px; }
}
/* Avis : défilement lent et continu, en boucle (script : initReviews).
   Sans script ou avec « mouvement réduit », la mise en page ci-dessus reste. */
.quotes-view {
  position: relative; overflow: hidden; min-width: 0;
  margin-inline: calc(var(--gutter) * -1); padding-block: 6px 34px; margin-bottom: -18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.quotes.is-marquee {
  display: flex; align-items: stretch; gap: 18px; width: max-content;
  overflow: visible; margin: 0; padding: 0; columns: auto; scroll-snap-type: none; will-change: transform;
}
.quotes.is-marquee.has-open { align-items: flex-start; }
.quotes.is-marquee li { flex: none; width: min(380px, 86vw); margin: 0; justify-content: flex-start; gap: 12px; }
/* cartes compactes : au-delà de 6 lignes, le texte s'efface en fondu et « Lire la suite » le déplie */
.quotes.is-marquee blockquote { max-height: 9.3em; overflow: hidden; }
.quotes.is-marquee li.is-clamped:not(.is-open) blockquote {
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent); mask-image: linear-gradient(180deg, #000 62%, transparent);
}
.quotes.is-marquee li.is-open blockquote { max-height: none; }
.more {
  align-self: flex-start; min-height: 32px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--brass-ink); font: 600 .9375rem/1.2 var(--f-text); text-decoration: underline; text-underline-offset: .22em;
}
.quotes.is-marquee .who { margin-top: auto; padding-top: 4px; }
/* on peut faire glisser les avis : à l'horizontale pour la rangée, à la verticale la page défile normalement */
.quotes-view { touch-action: pan-y; -webkit-user-select: none; user-select: none; }
@media (pointer: fine) { .quotes-view { cursor: grab; } }
.quotes-view.is-dragging { cursor: grabbing; }
@media (min-width: 1000px) { .quotes-view { margin-inline: 0; } }
.marquee-toggle {
  justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin-top: 2px; padding: 0 16px 0 12px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--text);
  font: 600 .875rem/1 var(--f-text); cursor: pointer; transition: border-color .2s;
}
.marquee-toggle:hover { border-color: var(--text); }
.marquee-toggle svg { width: 14px; height: 14px; fill: currentColor; flex: none; }

/* À propos */
.about { display: grid; gap: 48px; }
.about-text > p:not(.lead) { margin-top: 16px; color: var(--muted); max-width: 62ch; }
.about-text .lead { color: var(--text); font-weight: 500; }
.facts { display: grid; gap: 0; margin-top: 32px; border-top: 1px solid var(--line); }
.facts li { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.facts strong { font: 700 1.0625rem/1.3 var(--f-display); }
.facts span { color: var(--muted); }
.about-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
.about-photos figure { margin: 0; }
.about-photos img { border-radius: var(--r-m); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.about-photos .ph-main { grid-column: 1 / -1; }
.about-photos .ph-main img { aspect-ratio: 1200 / 559; border-radius: var(--r-l); }
.about-photos figcaption { font-size: .875rem; color: var(--muted); margin-top: 8px; }
@media (min-width: 1000px) { .about { grid-template-columns: 1fr 1.05fr; gap: 72px; align-items: start; } .about-photos { position: sticky; top: 96px; } }

/* FAQ */
.faq-in { display: grid; gap: 32px; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 60px; padding: 16px 0; font: 600 1.125rem/1.35 var(--f-display); letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316181c' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/16px no-repeat;
  transition: transform .3s var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--brass-ink); }
.faq details p { padding: 0 44px 20px 0; color: var(--muted); max-width: 64ch; }
@media (min-width: 900px) { .faq-in { grid-template-columns: 1fr 2fr; gap: 64px; align-items: start; } }

/* Contact */
.contact-in { display: grid; gap: 48px; }
.big-phone { display: inline-flex; align-items: center; gap: 14px; margin-top: 28px; color: var(--on-dark) !important; text-decoration: none; font: 700 clamp(2.1rem, 9vw, 3.5rem)/1 var(--f-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.big-phone .ic { width: .8em; height: .8em; color: var(--brass); stroke-width: 1.8; }
.big-phone:hover { color: var(--brass-hi) !important; }
.contact-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.contact-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.contact-side { display: grid; gap: 36px; }
.block h3 { font-size: 1.25rem; margin-bottom: 12px; }
.block > p { color: var(--on-dark); }
.maps-label { margin-top: 18px; color: var(--on-dark-muted) !important; font-size: .9375rem; }
.maps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.maps a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid rgba(243, 244, 246, .3); color: var(--on-dark) !important; text-decoration: none; font-weight: 600; font-size: .9375rem; }
.maps a:hover { border-color: var(--brass); }
.hours { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hours th, .hours td { padding: 9px 0; border-bottom: 1px solid var(--line-dark); text-align: left; font-weight: 400; }
.hours td { text-align: right; color: var(--on-dark-muted); }
.hours tr.is-today th, .hours tr.is-today td { color: var(--brass-hi); font-weight: 600; }
.status-light { margin-top: 16px; font-size: .9375rem; white-space: normal; }
.hours td { white-space: nowrap; padding-left: 16px; }
@media (min-width: 900px) { .contact-in { grid-template-columns: 1fr 1fr; gap: 64px; } }
@media (min-width: 1020px) { .contact-side { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; } }

/* Pied de page */
.footer { background: var(--glass); padding: 56px 0 32px; font-size: .9063rem; color: var(--muted); }
.areas { font-weight: 600; color: var(--text); max-width: 70ch; }
.legal { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
.legal h2 { font-size: 1.5rem; color: var(--text); }
.legal-grid { display: grid; gap: 24px; margin-top: 20px; }
.legal h3 { font-size: 1rem; color: var(--text); margin: 0 0 6px; letter-spacing: -.01em; }
.legal p + h3 { margin-top: 18px; }
.legal p + p { margin-top: 8px; }
.copy { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .legal-grid { grid-template-columns: 1fr 1fr; gap: 32px 56px; } }

/* Barre mobile */
.dock { display: none; }
@media (max-width: 899px) {
  :root { --dock-h: calc(72px + env(safe-area-inset-bottom)); }
  .dock {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    transition: transform .28s var(--ease-out), visibility 0s;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: rgba(22, 24, 28, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid var(--line-dark);
  }
  .dock a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 54px; border-radius: 14px;
    color: var(--on-dark); text-decoration: none; font-weight: 600; font-size: .8125rem; line-height: 1.1; background: rgba(243, 244, 246, .08);
  }
  .dock a.dock-wa { background: var(--wa); }
  .dock .ic { width: 1.3rem; height: 1.3rem; }
  html:has(.nav.is-open) .dock,
  .is-typing .dock { transform: translateY(110%); visibility: hidden; transition: transform .25s var(--ease-out), visibility 0s .25s; }
  html { scroll-padding-bottom: var(--dock-h); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .phone .broken, .phone .cracks, .phone .chrono { display: none; }
  .phone .lock { filter: none !important; }
  .replay { display: none; }
}

/* Onglets du formulaire sur une ligne de 3 cases sur petit écran */
@media (max-width: 559px) {
  .modes { display: grid; grid-template-columns: 1.3fr 1fr 1fr; border-radius: 20px; overflow: visible; }
  .modes span { border-radius: 16px; white-space: normal; text-align: center; line-height: 1.2; padding: 6px 10px; }
}

/* =========================================================
   Animations et finitions (2e passe)
   Toutes respectent « mouvement réduit » : la règle globale plus haut
   coupe transitions et animations, et les animations liées au défilement
   sont réservées à « no-preference ».
   ========================================================= */

/* En-tête : boutons prix et appel aussi entre 900 et 1299 px */
@media (min-width: 900px) and (max-width: 99999px) {
  .header-cta { display: inline-flex; }
  .nav-extra:has(.btn) { display: none !important; }
}

/* Menu mobile : les deux traits forment une croix, liens en plus */
.burger path { transition: transform .3s var(--ease-out); transform-box: fill-box; transform-origin: center; }
.menu-btn[aria-expanded="true"] .b1 { transform: translateY(4px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .b2 { transform: translateY(-4px) rotate(-45deg); }
.nav-extra { display: none; }
@media (max-width: 99999px) {
  .nav-extra { display: block; }
  .nav .nav-extra .btn { margin-top: 18px; width: 100%; padding: 14px; border-bottom: 0; border-radius: 999px; font: 600 1rem/1.2 var(--f-text); color: var(--ink); }
  .nav .nav-extra .nav-call { display: flex; align-items: center; justify-content: center; gap: 10px; border-bottom: 0; font: 600 1.0625rem/1.2 var(--f-text); color: var(--on-dark); }
}

/* Téléphone du hero : l'écran se touche */
.phone-screen { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.js .phone.is-healed .phone-screen { cursor: pointer; }
.replay-row { display: flex; flex-direction: column; align-items: center; }
.replay-hint { margin-top: -6px; font-size: .8125rem; color: var(--on-dark-muted); }
html:not(.js) .replay-row { display: none; }
@media (prefers-reduced-motion: reduce) { .replay-hint { display: none; } }

/* Point Ouvert / Fermé : un seul anneau lumineux */
.status-dot { position: relative; }
.is-open .status-dot { color: var(--green-hi); }
.is-closed .status-dot { color: var(--red-hi); }
.status.is-ping .status-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid currentColor;
  animation: ping 1s var(--ease-out) .15s both;
}
@keyframes ping { from { transform: scale(.5); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }

/* Horaires : le jour d'aujourd'hui se souligne */
.hours tr.is-today th, .hours tr.is-today td { background: linear-gradient(var(--brass-hi), var(--brass-hi)) left bottom / 100% 2px no-repeat; }
.js .hours tr.is-today th, .js .hours tr.is-today td { background-size: 0 2px; }
.js .hours.is-lit tr.is-today th { background-size: 100% 2px; transition: background-size .32s var(--ease-out); }
.js .hours.is-lit tr.is-today td { background-size: 100% 2px; transition: background-size .32s var(--ease-out) .3s; }

/* « Voir dans le noir » : LCD contre OLED */
.screens { padding: 28px var(--gutter); margin-inline: calc(var(--gutter) * -1); transition: background-color .35s ease, color .35s ease; }
@media (min-width: 900px) { .screens { border-radius: var(--r-l); } }
.lights { display: none; }
.js .lights {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; min-height: 44px; padding: 0 18px 0 8px;
  border-radius: 999px; border: 1.5px solid var(--line); background: var(--white); color: var(--text);
  font: 600 .9375rem/1.2 var(--f-text); cursor: pointer; transition: background-color .3s, color .3s, border-color .3s;
}
.js .lights:hover { border-color: var(--text); }
.lights-sw { position: relative; width: 38px; height: 24px; border-radius: 999px; background: #c9ccd2; transition: background-color .25s; flex: none; }
.lights-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .25s var(--ease-out); }
.lights[aria-pressed="true"] .lights-sw { background: var(--brass); }
.lights[aria-pressed="true"] .lights-sw::after { transform: translateX(14px); }
.screens.is-dark { background: #060607; color: var(--on-dark); }
.screens.is-dark .muted { color: var(--on-dark-muted); }
.screens.is-dark .lights { background: #16181c; color: var(--on-dark); border-color: var(--line-dark); }
.screens.is-dark .screen-opt { background: #111215; color: var(--on-dark); transition: background-color .35s ease, color .35s ease; }
.screens.is-dark .screen-tag { color: var(--brass-hi); }
.screens.is-dark .pros { border-color: var(--line-dark); }
.screens.is-dark .screens-foot a { color: var(--brass-hi); }
/* À l'extinction, les écrans se rallument : le LCD d'abord en gris (rétroéclairage), l'OLED reste noir */
.screens.is-dark .demo-lcd { animation: backlight .5s ease-out both; }
.screens.is-dark .demo span { animation: pixels .7s var(--ease-out) .3s both; }
@keyframes backlight { from { background-color: #000; } }
@keyframes pixels { from { opacity: 0; transform: scale(.92); } }
::view-transition-old(ecrans) { animation: none; }
::view-transition-new(ecrans) { animation: lights-reveal .45s var(--ease-out); }
@keyframes lights-reveal {
  from { clip-path: circle(0 at var(--lx, 50%) var(--ly, 0)); }
  to { clip-path: circle(150% at var(--lx, 50%) var(--ly, 0)); }
}

/* Formulaire : pastille qui glisse sous l'onglet choisi */
.modes { position: relative; }
.modes label { z-index: 1; }
.modes-thumb {
  position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none;
  width: var(--tw, 0); height: var(--th, 0); transform: translate(var(--tx, 0), var(--ty, 0));
  border-radius: 999px; background: var(--on-dark); opacity: 0;
  transition: transform .4s var(--ease-out), width .4s var(--ease-out), height .4s var(--ease-out);
}
.modes.has-thumb .modes-thumb { opacity: 1; }
.modes.has-thumb input:checked + span { background: transparent; }
@media (max-width: 559px) { .modes-thumb { border-radius: 16px; } }
.grp.grp-in { animation: grp-in .26s var(--ease-out); }
@keyframes grp-in { from { opacity: 0; transform: translateY(6px); } }
.choice input:checked + span { animation: pop .22s var(--ease-out); }
@keyframes pop { from { transform: scale(.92); } }

/* Aide « Où trouver mon modèle ? » */
.help { font-size: .875rem; }
.help summary { display: inline-flex; align-items: center; min-height: 32px; list-style: none; cursor: pointer; color: var(--brass-hi); text-decoration: underline; text-underline-offset: .2em; }
.help summary::-webkit-details-marker { display: none; }
.help p { margin-top: 2px; color: var(--on-dark-muted); max-width: 52ch; }

/* La bulle : une ligne par info, les manques en gris */
.bubble p { white-space: normal; }
.bubble .ln { display: block; white-space: pre-wrap; margin-inline: -6px; padding-inline: 6px; border-radius: 6px; }
.bubble .ph { opacity: .55; }

/* Après l'envoi : la dernière étape */
.send-status { margin-top: 14px; font-size: .9375rem; }
.send-status:empty { margin-top: 0; }
.send-status.is-on { animation: st-in .3s var(--ease-out); }
.send-status .st-main {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px;
  background: rgba(95, 211, 148, .1); box-shadow: inset 0 0 0 1px rgba(95, 211, 148, .35); color: var(--on-dark); line-height: 1.45;
}
.send-status .st-main strong { color: #fff; }
.send-status .st-help { margin-top: 8px; color: var(--on-dark-muted); text-align: center; }
.ic-check { width: 22px; height: 22px; color: var(--green-hi); stroke-width: 2.2; stroke-dasharray: 24; stroke-dashoffset: 0; animation: draw .45s var(--ease-out) .05s both; }
@keyframes draw { from { stroke-dashoffset: 24; } }
@keyframes st-in { from { opacity: 0; transform: translateY(4px); } }
.btn-text.is-done { color: var(--green-hi); }
.btn-text.is-done .ic { stroke-width: 2.2; }
.err-summary:not([hidden]) { animation: st-in .22s var(--ease-out); }

/* Rachat : avant de vendre */
.prep { margin-top: 28px; max-width: 46ch; border-top: 1px solid var(--line); }
.prep summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; list-style: none; cursor: pointer; font-weight: 600; }
.prep summary::-webkit-details-marker { display: none; }
.prep summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .25s var(--ease-out); }
.prep[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.prep ul { list-style: disc; padding: 0 0 8px 20px; display: grid; gap: 6px; color: var(--muted); }

/* Avis : le sujet de chaque avis, tiré de son texte */
.q-tag { width: fit-content; padding: 4px 10px; border-radius: 999px; background: #f6efe6; color: #6f4d24; font-size: .8125rem; font-weight: 600; }

/* PC gamer : la lueur monte comme des ventilateurs qui démarrent */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .section-night, .pc-photos figure { overflow: clip; }
    .section-night::before { animation: glow-up linear both; animation-timeline: view(); animation-range: entry 10% cover 35%; }
    .pc-a { position: relative; }
    .pc-a::after { content: ""; position: absolute; inset: 0; background: #0f1013; pointer-events: none; animation: unveil linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
  }
}
@keyframes glow-up { from { opacity: 0; } to { opacity: 1; } }
@keyframes unveil { from { opacity: .55; } to { opacity: 0; } }

/* FAQ : les réponses se déplient en douceur (navigateurs récents) */
@supports (interpolate-size: allow-keywords) and selector(::details-content) {
  @media (prefers-reduced-motion: no-preference) {
    .faq { interpolate-size: allow-keywords; }
    .faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .32s var(--ease-out), content-visibility .32s allow-discrete; }
    .faq details[open]::details-content { block-size: auto; }
  }
}

/* Pendant l'effet « Voir dans le noir » : pas de fondu, la nouvelle image est déjà sombre */
.vt-instant, .vt-instant * { transition: none !important; }

/* Mode contraste élevé de Windows : l'option choisie reste visible */
@media (forced-colors: active) {
  .modes-thumb { background: Highlight; forced-color-adjust: none; }
  .modes input:checked + span, .choice input:checked + span {
    forced-color-adjust: none; background: Highlight; color: HighlightText;
  }
}

/* En-tête : le statut rétrécit avant de pousser le bouton du menu */
.site-header .status { min-width: 0; }
.site-header [data-status-text] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.menu-btn { flex: none; }

/* « Voir dans le noir » : fond clair opaque, pour que le retour à la lumière ne laisse pas voir l'ancienne image */
.screens { background: var(--white); }

/* Contraste élevé : anneau de focus et interrupteur visibles */
@media (forced-colors: active) {
  .modes input:focus-visible + span, .choice input:focus-visible + span { outline-color: CanvasText; }
  .lights-sw { border: 1px solid ButtonText; }
  .lights-sw::after { forced-color-adjust: none; background: ButtonText; }
  .lights[aria-pressed="true"] .lights-sw { forced-color-adjust: none; background: Highlight; }
}

/* Logos WhatsApp, Instagram et Google (fichiers dans assets/icons) */
.btn-wa > .ic, .dock-wa > .ic { display: none; }
.btn-wa::before, .dock-wa::before {
  content: ""; flex: none; width: 1.35em; height: 1.35em; background: currentColor;
  -webkit-mask: url("../icons/whatsapp.svg") center / contain no-repeat; mask: url("../icons/whatsapp.svg") center / contain no-repeat;
}
.dock-wa::before { width: 1.4rem; height: 1.4rem; }
/* Instagram et Google : boutons comme WhatsApp (logo + nom), aux couleurs de chaque marque */
.btn-ig { color: var(--white); background: linear-gradient(90deg, #f56040 0%, #d62976 30%, #962fbf 65%, #4f5bd5 100%); }
.btn-ig:hover { filter: brightness(1.08); }
.btn-ig::before {
  content: ""; flex: none; width: 1.3em; height: 1.3em; background: currentColor;
  -webkit-mask: url("../icons/instagram-glyph.svg") center / contain no-repeat; mask: url("../icons/instagram-glyph.svg") center / contain no-repeat;
}
.btn-tt {
  color: var(--white); font-weight: 700; border: 2px solid transparent;
  background: linear-gradient(#0b0b0b, #0b0b0b) padding-box, linear-gradient(90deg, #25f4ee, #fe2c55) border-box;
  text-shadow: -1px -1px 0 rgba(37, 244, 238, .7), 1px 1px 0 rgba(254, 44, 85, .7);
}
.btn-tt:hover { filter: brightness(1.15); }
.btn-tt::before { content: ""; flex: none; width: 1.35em; height: 1.35em; background: url("../icons/tiktok.svg") center / contain no-repeat; }
.btn-google { background: var(--white); color: #1f1f1f; }
.btn-google:hover { background: #eef0f3; }
.btn-google::before { content: ""; flex: none; width: 1.25em; height: 1.25em; background: url("../icons/google.svg") center / contain no-repeat; }

/* =========================================================
   Avant / pendant / après : trois téléphones 3D (inspirés de l'iPhone 17 Pro)
   Dessinés en SVG et en CSS, sans image. Ils s'inclinent sous la souris et
   leurs pièces s'animent au survol ou au toucher (script : initPhones3d).
   Les couleurs de ce bloc restent celles du logo (--s-…), à part du reste du site.
   ========================================================= */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
.studio {
  --s-gold: #c8a065;
  --s-deep: var(--ink);
  --s-ink: #fff;
  --s-mute: rgba(255, 255, 255, .76);
  --s-soft: rgba(255, 255, 255, .6);
  --s-line: rgba(255, 255, 255, .1);
  --s-line-2: rgba(255, 255, 255, .18);
  --s-gold-line: rgba(200, 160, 101, .42);
  --s-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
  --s-sans: "Montserrat", var(--f-text);
  --s-ease-back: cubic-bezier(.34, 1.56, .64, 1);
  position: relative;
  padding: clamp(20px, 2.6vw, 40px) clamp(14px, 2.6vw, 48px) clamp(24px, 3vw, 44px);
  border: 1px solid var(--s-line);
  border-radius: var(--r-l);
  /* même fond que le haut de page (hero) */
  background: radial-gradient(120% 70% at 85% 20%, #2f3238 0%, var(--ink) 60%);
  color: var(--s-ink);
  overflow: hidden;
}
.studio :focus-visible { outline-color: var(--brass-hi); }
.studio__meta {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px;
  margin-bottom: clamp(18px, 2.2vw, 30px);
  font: 500 .7rem/1.3 var(--s-mono); letter-spacing: .16em; text-transform: uppercase;
}
.studio__rec { display: inline-flex; align-items: center; gap: 8px; color: var(--s-gold); }
.studio__rec::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--s-gold); }
.studio__hint { color: var(--s-ink); }
.rsteps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 4px; }
.rsteps::before { content: ""; position: absolute; left: 16.66%; right: 16.66%; top: 20px; height: 1px; background: var(--s-gold-line); }
.rstep { position: relative; display: grid; justify-items: center; gap: 10px; }
.rstep__node {
  position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--s-gold); background: var(--s-deep);
  font: 500 .76rem/1 var(--s-mono); color: var(--s-gold);
  transition: background-color .4s ease, color .4s ease;
}
.rstep__node::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1px dashed var(--s-gold-line); }
.rstep.is-active .rstep__node { background: var(--s-gold); color: var(--s-deep); }
.rstep__lab { font: 500 .72rem/1 var(--s-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--s-soft); }
.rstep.is-active .rstep__lab { color: var(--s-ink); }
.stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 32px); }
.stage { position: relative; display: grid; justify-items: center; align-content: start; }
.stage::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 86%; pointer-events: none;
  background: radial-gradient(50% 55% at 50% 45%, rgba(200, 160, 101, .2), rgba(200, 160, 101, .06) 45%, transparent 72%);
}
.shot3d { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 600px; }
.p3-fit { transform-origin: 50% 50%; }
.cap { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; margin-top: 4px; }
.cap__k { font: 500 .7rem/1 var(--s-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--s-gold); }
.cap h3 { font-size: clamp(1.2rem, 1rem + .55vw, 1.55rem); line-height: 1.2; letter-spacing: -.02em; color: var(--s-ink); }
.cap p { color: var(--s-mute); max-width: 30ch; }
.studio__dots { display: none; }
.studio__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: clamp(24px, 3vw, 40px); padding-top: clamp(18px, 2vw, 26px); border-top: 1px solid var(--s-line);
}
.studio__foot p { color: var(--s-mute); }
@media (max-width: 1439px) {
  .p3-fit { transform: scale(.84); }
  .shot3d { height: 520px; }
}
/* Tablette (600 à 1099 px) : les trois téléphones côte à côte, en entier.
   Colonnes à la largeur réelle des dessins (237, 400 et 237 px à l'échelle 1) ;
   --fit est calculé par le script selon la place, la valeur ici sert sans script. */
@media (max-width: 1099px) {
  .studio { padding-inline: clamp(12px, 3vw, 26px); }
  .stages { grid-template-columns: minmax(0, 237fr) minmax(0, 400fr) minmax(0, 237fr); gap: clamp(8px, 2vw, 20px); }
  /* la colonne suit la place disponible, pas la largeur du téléphone avant réduction */
  .stage { min-width: 0; grid-template-columns: minmax(0, 1fr); }
  .shot3d, .cap { min-width: 0; max-width: 100%; }
  .p3-fit { transform: scale(var(--fit, .7)); }
  .shot3d { height: calc(var(--fit, .7) * 560px); }
  .cap p { font-size: .9375rem; }
}
@media (max-width: 767px) {
  .cap h3 { font-size: 1.125rem; }
  .cap p { font-size: .875rem; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .p3-fit { transform: scale(var(--fit, .9)); }
  .shot3d { height: calc(var(--fit, .9) * 560px); }
}
/* Téléphone (moins de 600 px) : un appareil à la fois, en entier ; on glisse,
   ou on touche 01 / 02 / 03 et les tirets pour changer d'étape */
@media (max-width: 599px) {
  .studio { padding-inline: 0; }
  .studio__meta, .rsteps, .studio__foot { margin-inline: 18px; }
  .stages { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
  .stages::-webkit-scrollbar { display: none; }
  .stage { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; padding-inline: 18px; }
  /* à la souris : la main « attrape » le carrousel ; pendant le glissement, pas d'aimantation ni de sélection de texte */
  @media (pointer: fine) { .js .stages { cursor: grab; } }
  .stages.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; -webkit-user-select: none; }
  .p3-fit { transform: scale(var(--fit, .66)); }
  .shot3d { height: calc(var(--fit, .66) * 560px); }
  .cap p { font-size: 1rem; }
  .js .rstep { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .studio__dots { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
  .studio__dots span { position: relative; width: 26px; height: 3px; border-radius: 2px; background: var(--s-line-2); transition: background-color .3s ease; }
  .js .studio__dots span { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .studio__dots span::before { content: ""; position: absolute; inset: -16px -5px; }
  .studio__dots span.is-active { background: var(--s-gold); }
}

/* Téléphone 3D : tranche en bandes éclairées, faces SVG, couches en profondeur */
.p3 { position: relative; width: var(--w); height: var(--h); perspective: 1300px; perspective-origin: 50% 40%; -webkit-tap-highlight-color: transparent; cursor: pointer; }
.p3__sway, .p3__obj, .p3__layer { position: absolute; inset: 0; transform-style: preserve-3d; }
/* les conteneurs 3D laissent passer le pointeur : seules les faces et parties animées réagissent */
.p3__sway, .p3__obj, .p3__layer { pointer-events: none; }
.p3__hinge { pointer-events: auto; }
.p3__obj { transition: transform .8s var(--ease-out); }
.p3__strip { position: absolute; left: 0; top: 0; transform-origin: 0 0; backface-visibility: visible; }
.p3__btn { position: absolute; transform-origin: 0 0; border-radius: 2px; background: linear-gradient(90deg, #8c8d92, #f1f1f3 45%, #a9aaaf); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .35); }
.p3__btn--action { background: linear-gradient(90deg, #8c8d92, #e9e9ec 50%, #9fa0a5); }
.p3__btn--cc { background: linear-gradient(90deg, #3b3d42, #6d7079 50%, #2e3035); box-shadow: 0 0 0 .8px #c9cace; }
.p3__ant { position: absolute; transform-origin: 0 0; background: #3a3b40; opacity: .85; }
.p3__back { position: absolute; inset: 0; }
.p3__face { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.p3__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: auto; }
.p3__glass, .p3__batt { transform: translateZ(1px); transition: transform .8s var(--ease-out); }
.p3__batt .p3__svg, .p3__svg--rim { pointer-events: none; }
.p3__batt .il-batt { pointer-events: auto; }
.p3__sheen { position: absolute; inset: 0; border-radius: var(--r); overflow: hidden; transform: translateZ(1.5px); pointer-events: none; }
.p3__sheen > i { position: absolute; inset: -60%; background: linear-gradient(112deg, transparent 42%, rgba(255, 255, 255, .15) 49%, rgba(255, 255, 255, .04) 53%, transparent 58%); transition: transform .8s var(--ease-out); }
.p3__floor { position: absolute; left: -18%; right: -18%; bottom: -8%; height: 16%; background: radial-gradient(closest-side, rgba(0, 0, 0, .72), rgba(0, 0, 0, .35) 55%, transparent); transition: transform .8s var(--ease-out); }
.p3__bloom { position: absolute; inset: -12% -30%; background: radial-gradient(closest-side, rgba(200, 160, 101, .24), transparent); pointer-events: none; }
.p3__beam { position: absolute; left: -40%; right: 20%; bottom: -16%; height: 24%; background: radial-gradient(closest-side, rgba(255, 255, 255, .55), rgba(230, 200, 148, .18) 55%, transparent); opacity: 0; transition: opacity .35s ease; pointer-events: none; }
@keyframes p3-sway { 0% { transform: rotateY(-5deg) translateY(0); } 100% { transform: rotateY(5deg) translateY(-6px); } }
/* Léger balancement permanent : ordinateur et tablette seulement (sur téléphone, il ralentissait le défilement) */
@media (prefers-reduced-motion: no-preference) and (min-width: 600px) {
  .p3__sway { animation: p3-sway 5.5s ease-in-out infinite alternate; }
  .p3--open .p3__sway { animation-delay: -1.8s; }
  .p3--apres .p3__sway { animation-delay: -3.6s; }
}
/* Pendant : écran ouvert comme un livre (charnière côté nappes) */
.p3__hinge { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 100% 50%; transform: translateZ(.6px) rotateY(122deg); transition: transform 1.1s var(--ease-out); }
.p3__hinge:hover, .p3__hinge.is-on { transform: translateZ(.6px) rotateY(92deg); }
.p3__front, .p3__backface { position: absolute; inset: 0; backface-visibility: hidden; }
.p3__backface { transform: translateZ(calc(var(--dd, 6) * -1px)) rotateY(180deg); }
.p3--open .p3__floor { left: -14%; right: -62%; }
.p3--open .p3__batt { transform: translateZ(var(--bz, 1px)); }
.p3--open .hot--batt:hover, .p3--open .hot--batt.is-on { transform: translateZ(calc(var(--bz, 1px) + 40px)); }
/* Survol / toucher des parties animées */
.p3--avant:hover .p3__glass, .p3--avant.is-on .p3__glass { transform: translate3d(-6px, -10px, 26px) rotateX(-6deg) rotateY(5deg); }
.p3--apres:has(.hot--torch:hover) .p3__beam, .p3--apres:has(.hot--torch.is-on) .p3__beam { opacity: 1; }
.il-ov { pointer-events: none; }
.il-sweep, .il-glint, .il-torch-on, .il-bright { opacity: 0; }
@keyframes il-sweep { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(330px); opacity: 0; } }
@keyframes il-flicker { 0%, 100% { opacity: 1; } 15% { opacity: .15; } 30% { opacity: .9; } 45% { opacity: .3; } 60% { opacity: 1; } 75% { opacity: .5; } }
@keyframes il-twinkle { 0%, 100% { opacity: .85; } 50% { opacity: .1; } }
@keyframes il-glint { 0% { opacity: 0; transform: scale(.4); } 40% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.3); } }
.hot--crack:hover .il-sweep, .hot--crack.is-on .il-sweep, .hot--screen:hover .il-sweep, .hot--screen.is-on .il-sweep { animation: il-sweep 1.1s var(--ease-out) .1s both; }
.hot--crack:hover .il-dead, .hot--crack.is-on .il-dead { animation: il-flicker .7s steps(1) 2; }
.hot--crack:hover .il-dust circle:nth-child(3n), .hot--crack.is-on .il-dust circle:nth-child(3n) { animation: il-twinkle .5s ease 3; }
.il-glint { transform-box: fill-box; transform-origin: center; }
.hot--cam:hover .il-glint, .hot--cam.is-on .il-glint { animation: il-glint .8s ease-out both; }
.il-bright { transition: opacity .5s ease; }
.hot--screen:hover .il-bright, .hot--screen.is-on .il-bright { opacity: .08; }
.il-shackle { transform-origin: 86px 45px; transition: transform .5s var(--s-ease-back); }
.hot--lock:hover .il-shackle, .hot--lock.is-on .il-shackle { transform: translateY(-3px) rotate(-28deg); }
.il-torch-on { transition: opacity .35s ease; }
.hot--torch:hover .il-torch-on, .hot--torch.is-on .il-torch-on { opacity: 1; }
/* textes dessinés dans les écrans */
.i17-sb { font: 600 8.4px var(--s-sans); fill: #fff; }
.i17-search { font: 500 6.4px var(--s-sans); fill: #fff; }
.i17-date { font: 600 10.5px var(--s-sans); fill: #fff; fill-opacity: .92; }
.i17-time { font: 700 62px var(--s-sans); letter-spacing: -.03em; }
.i17-bl { font: 600 8px var(--s-sans); fill: #8d8e93; fill-opacity: .85; letter-spacing: .02em; }


/* =========================================================
   Liquid Glass (refonte octobre 2026)
   En-tête, boutons, champs, choix et barre mobile en verre ;
   demande de prix pas à pas (appareil, marque, modèle, panne) ;
   aperçus d'écran LCD / OLED / origine.
   ========================================================= */
:root {
  --lg-spring: cubic-bezier(.34, 1.56, .64, 1);
  --lg-brass: linear-gradient(180deg, #f0dab6, #c9a06c);
  --lg-brass-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -3px 6px rgba(138, 98, 50, .35);
  --lg-dark: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .09));
  --lg-dark-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 24px -14px rgba(0, 0, 0, .7);
  --lg-light: linear-gradient(180deg, #fff, #f0f1f3);
  --lg-light-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(22, 24, 28, .09), 0 10px 22px -14px rgba(22, 24, 28, .45);
  --hdr-h: 70px;
}
@media (min-width: 100000px) { :root { --hdr-h: 74px; } }

/* Boutons */
.btn { transition: background-color .2s, border-color .2s, color .2s, transform .45s var(--lg-spring), box-shadow .25s; }
.btn:hover { transform: scale(1.035); }
.btn:active { transform: scale(.97); }
.btn-brass { background: var(--lg-brass); border-color: transparent; box-shadow: var(--lg-brass-shadow), 0 12px 28px -12px rgba(201, 160, 108, .75); }
.btn-brass:hover { background: linear-gradient(180deg, #f6e4c6, #d4ae7c); }
.btn-ghost, .btn-line, .btn-line-light { background: var(--lg-dark); border-color: rgba(255, 255, 255, .26); box-shadow: var(--lg-dark-shadow); }
.btn-ghost:hover, .btn-line:hover, .btn-line-light:hover { border-color: rgba(255, 255, 255, .5); background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .08) 50%, rgba(255, 255, 255, .12)); }
.btn-ink { background: linear-gradient(180deg, #3a3e46, #16181c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -2px 4px rgba(0, 0, 0, .4), 0 12px 26px -12px rgba(22, 24, 28, .7); }
.btn-ink:hover { background: linear-gradient(180deg, #474c55, #1e2126); }
.btn-wa { background: linear-gradient(180deg, #34b26c, #177245); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -3px 6px rgba(0, 60, 30, .35), 0 12px 26px -12px rgba(23, 114, 69, .75); }
.btn-wa:hover { background: linear-gradient(180deg, #3cc077, #1a7d4c); }
.btn-ig { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -3px 6px rgba(60, 0, 80, .3), 0 12px 26px -12px rgba(214, 41, 118, .6); }
.btn-tt { box-shadow: -4px 0 18px -6px rgba(37, 244, 238, .75), 4px 6px 18px -6px rgba(254, 44, 85, .75); }
.btn-google { background: var(--lg-light); box-shadow: var(--lg-light-shadow); }
.btn-google:hover { background: linear-gradient(180deg, #fff, #f7f8f9); }
.link-btn {
  padding: 0 18px; border-radius: 999px; text-decoration: none; color: var(--text);
  background: var(--lg-light); box-shadow: var(--lg-light-shadow);
  transition: transform .45s var(--lg-spring), box-shadow .25s;
}
.link-btn:hover { transform: scale(1.035); color: var(--text); }

/* En-tête : barre de verre flottante */
.site-header {
  background: transparent; border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none;
  padding: 10px 10px 0; pointer-events: none;
}
.site-header .header-in {
  position: relative; pointer-events: auto; max-width: 1240px; min-height: 60px; padding: 6px 8px 6px 18px; border-radius: 999px;
  background: rgba(22, 24, 28, .95);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 40px -18px rgba(0, 0, 0, .6);
}
@media (min-width: 900px) {
  .site-header .header-in { background: rgba(22, 24, 28, .62); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); }
}
@media (min-width: 100000px) { .site-header .header-in { max-width: 1320px; min-height: 64px; } }
#contenu > .hero:first-child { margin-top: calc(-1 * var(--hdr-h)); padding-top: calc(40px + var(--hdr-h)); }
@media (min-width: 900px) { #contenu > .hero:first-child { padding-top: calc(72px + var(--hdr-h)); } }
html { scroll-padding-top: calc(var(--hdr-h) + 12px); }
.nav a:not(.btn) { transition: background-color .25s, box-shadow .25s; }
@media (min-width: 100000px) {
  .nav a:not(.btn) { border-radius: 999px; }
  .nav a:not(.btn):hover { background: rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(255, 255, 255, .1); }
}
@media (max-width: 99999px) {
  .menu-btn { margin-right: 0; border-radius: 50%; background: var(--lg-dark); box-shadow: var(--lg-dark-shadow); }
  .nav {
    top: calc(100% + 8px); border-radius: 26px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(22, 24, 28, .97);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 24px 50px -20px rgba(0, 0, 0, .7);
    max-height: calc(100dvh - var(--hdr-h) - 24px);
  }
  .nav a:not(.btn) { border-radius: 0; }
}
@media (min-width: 560px) {
  .site-header .status { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 0 1px rgba(255, 255, 255, .07); }
}

/* Haut de page */
.hero-rating {
  padding: 4px 16px 4px 12px; border-radius: 999px; background: var(--lg-dark); box-shadow: var(--lg-dark-shadow);
  transition: transform .45s var(--lg-spring);
}
.hero-rating:hover { transform: scale(1.03); }
.replay { background: var(--lg-dark); box-shadow: var(--lg-dark-shadow); color: var(--on-dark); transition: transform .45s var(--lg-spring); }
.replay:hover { transform: scale(1.04); }

/* Formulaire : onglets, champs et choix en verre */
.modes { background: rgba(255, 255, 255, .06); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.modes input:checked + span { background: var(--lg-brass); color: var(--ink); }
.modes-thumb {
  background: var(--lg-brass); box-shadow: var(--lg-brass-shadow), 0 8px 20px -8px rgba(201, 160, 108, .7);
  transition: transform .5s var(--lg-spring), width .4s var(--ease-out), height .4s var(--ease-out);
}
.field input[type="text"], .field select, .field textarea {
  border-radius: 16px; background-color: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 255, 255, .05);
}
.field input:focus, .field select:focus, .field textarea:focus { background-color: rgba(255, 255, 255, .09); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35), 0 0 0 4px rgba(201, 160, 108, .22); }
.choice span {
  border-color: rgba(255, 255, 255, .16);
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: background-color .25s, border-color .25s, color .25s, transform .4s var(--lg-spring);
}
.choice label:hover span { border-color: rgba(255, 255, 255, .4); transform: scale(1.03); }
.choice input:checked + span { background: var(--lg-brass); border-color: transparent; box-shadow: var(--lg-brass-shadow); }

/* FAQ : bouton rond en verre */
.faq summary::after {
  width: 32px; height: 32px;
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(22, 24, 28, .09), 0 6px 14px -8px rgba(22, 24, 28, .5);
  transition: transform .45s var(--lg-spring), background-color .25s;
}
.faq details[open] summary::after { background-color: #ecd6b2; }

/* Contact : itinéraires avec leur logo */
.maps a {
  gap: 8px; background: var(--lg-dark); border-color: rgba(255, 255, 255, .24); box-shadow: var(--lg-dark-shadow);
  transition: transform .45s var(--lg-spring), border-color .2s;
}
.maps a:hover { transform: scale(1.04); border-color: rgba(255, 255, 255, .5); }
.maps a::before { content: ""; flex: none; width: 20px; height: 20px; background: center / contain no-repeat; }
.maps a[href*="google.com/maps"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23EA4335' d='M12 2a7 7 0 0 0-7 7c0 1.3.4 2.6 1 3.8L12 7z'/%3E%3Cpath fill='%234285F4' d='M12 2a7 7 0 0 1 7 7c0 1.3-.4 2.6-1 3.8L12 7z'/%3E%3Cpath fill='%2334A853' d='M6 12.8C7.8 16.6 12 22 12 22l3-4.3L12 7z'/%3E%3Cpath fill='%23FBBC05' d='M18 12.8C17 15 15 17.7 15 17.7L12 7z'/%3E%3Ccircle cx='12' cy='9' r='2.6' fill='%23fff'/%3E%3C/svg%3E"); }
.maps a[href*="maps.apple.com"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='1' y='1' width='22' height='22' rx='5.5' fill='%23E8F3DF'/%3E%3Cpath d='M1 16 23 6' stroke='%23F6C445' stroke-width='3'/%3E%3Cpath d='M9 1v22' stroke='%23fff' stroke-width='2'/%3E%3Cpath fill='%231E88FF' d='M12.5 7.5l4.5 10-4.5-2.6L8 17.5z'/%3E%3C/svg%3E"); }
.maps a[href*="waze.com"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2333CCFF' stroke='%2316181c' stroke-width='1.3' d='M3.5 12.5a8.5 7.5 0 0 1 17 0c0 3.2-2.2 5-4.6 5.5H8.2c-2.6-.4-4.7-2.2-4.7-5.5z'/%3E%3Ccircle cx='9.5' cy='10.6' r='1' fill='%2316181c'/%3E%3Ccircle cx='14.8' cy='10.6' r='1' fill='%2316181c'/%3E%3Cpath d='M9.6 13.6c1.3 1.2 3.6 1.2 4.9 0' fill='none' stroke='%2316181c' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='19.6' r='1.7' fill='%2316181c'/%3E%3Ccircle cx='15.8' cy='19.6' r='1.7' fill='%2316181c'/%3E%3C/svg%3E"); }

/* Barre mobile : pilule de verre flottante */
@media (max-width: 899px) {
  :root { --dock-h: calc(82px + env(safe-area-inset-bottom)); }
  .dock {
    left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); gap: 4px; padding: 6px; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .1); background: rgba(22, 24, 28, .88);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 18px 40px -14px rgba(0, 0, 0, .6);
  }
  .dock a { border-radius: 999px; background: transparent; }
  .dock a:active { background: rgba(255, 255, 255, .1); }
  .dock a.dock-wa { background: linear-gradient(180deg, #34b26c, #177245); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }
}

/* Écrans LCD / OLED / origine */
.js .lights { border-color: transparent; background: var(--lg-light); box-shadow: var(--lg-light-shadow); transition: background-color .3s, color .3s, transform .45s var(--lg-spring); }
.js .lights:hover { transform: scale(1.03); }
.lights-sw { box-shadow: inset 0 1px 3px rgba(22, 24, 28, .3); }
.lights-sw::after { box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(0, 0, 0, .3); transition: transform .5s var(--lg-spring); }
.screens.is-dark .lights { background: linear-gradient(180deg, #2a2d33, #16181c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); }
.reco { background: var(--lg-brass); box-shadow: var(--lg-brass-shadow), 0 8px 18px -8px rgba(201, 160, 108, .8); }
.screen-opt { box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(22, 24, 28, .05), 0 18px 40px -28px rgba(22, 24, 28, .45); }
.screen-opt--reco { box-shadow: inset 0 0 0 2px var(--brass), inset 0 3px 0 rgba(255, 255, 255, .7), 0 22px 44px -26px rgba(201, 160, 108, .7); }
.screens.is-dark .screen-opt { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .07); }
.screens.is-dark .screen-opt--reco { box-shadow: inset 0 0 0 2px var(--brass), inset 0 3px 0 rgba(255, 255, 255, .12); }

/* Aperçu : la même scène de nuit, rendue selon la technologie */
.js .screens .demo, .demo.is-scene { height: 174px; }
.demo.is-scene { padding: 7px; border-radius: 26px; overflow: visible; background: linear-gradient(145deg, #55585f, #1b1c1f 45%, #2b2e34); box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .14); }
.screens.is-dark .demo.is-scene, .screens.is-dark .demo.is-scene span { animation: none; }
.sd-screen { position: relative; height: 160px; border-radius: 20px; overflow: hidden; background: linear-gradient(180deg, #000 0%, #000 34%, #140d33 56%, #5d2a70 72%, #ff7a3d 90%, #ffc46b 100%); transition: filter .5s; }
.screens.is-dark .demo.is-scene .sd-screen { animation: pixels .7s var(--ease-out) .2s both; }
.demo.is-scene span { position: absolute; inset: auto; background: none; filter: none; opacity: 1; }
.demo.is-scene .sd-stars { inset: 0 0 50% 0; background: radial-gradient(1.2px 1.2px at 12% 30%, #fff 60%, transparent 61%), radial-gradient(1px 1px at 31% 14%, #fff 60%, transparent 61%), radial-gradient(1.4px 1.4px at 47% 40%, #fff 60%, transparent 61%), radial-gradient(1px 1px at 58% 18%, #fff 60%, transparent 61%), radial-gradient(1.2px 1.2px at 69% 52%, #fff 60%, transparent 61%), radial-gradient(1px 1px at 88% 60%, #fff 60%, transparent 61%), radial-gradient(1px 1px at 40% 70%, #fff 60%, transparent 61%), radial-gradient(1.3px 1.3px at 23% 62%, #fff 60%, transparent 61%); }
.demo.is-scene .sd-moon { top: 20px; right: 44px; width: 24px; height: 24px; border-radius: 50%; background: #fdf6e3; box-shadow: 0 0 16px rgba(253, 246, 227, .55); }
.demo.is-scene .sd-city {
  left: 0; right: 0; bottom: 0; height: 48%;
  clip-path: polygon(0 62%, 6% 62%, 6% 36%, 12% 36%, 12% 56%, 18% 56%, 18% 20%, 24% 20%, 24% 50%, 30% 50%, 30% 40%, 36% 40%, 36% 8%, 41% 8%, 41% 45%, 47% 45%, 47% 30%, 53% 30%, 53% 60%, 60% 60%, 60% 24%, 66% 24%, 66% 50%, 72% 50%, 72% 14%, 77% 14%, 77% 55%, 84% 55%, 84% 34%, 90% 34%, 90% 58%, 100% 58%, 100% 100%, 0 100%);
  background: radial-gradient(1.6px 2.4px at 20% 34%, #ffd27a 60%, transparent 61%), radial-gradient(1.6px 2.4px at 22% 52%, #ffd27a 60%, transparent 61%), radial-gradient(1.6px 2.4px at 38% 22%, #7ad3ff 60%, transparent 61%), radial-gradient(1.6px 2.4px at 39% 44%, #ffd27a 60%, transparent 61%), radial-gradient(1.6px 2.4px at 62% 38%, #ff8ad8 60%, transparent 61%), radial-gradient(1.6px 2.4px at 64% 60%, #ffd27a 60%, transparent 61%), radial-gradient(1.6px 2.4px at 74% 28%, #ffd27a 60%, transparent 61%), radial-gradient(1.6px 2.4px at 75% 50%, #7ad3ff 60%, transparent 61%), radial-gradient(1.6px 2.4px at 86% 48%, #ffd27a 60%, transparent 61%), #000;
}
.sd-time { position: absolute; top: 14px; left: 34px; color: #fff; font: 700 34px/1 var(--f-display); letter-spacing: -.03em; }
.sd-time small { display: block; font: 500 11px var(--f-text); letter-spacing: 0; opacity: .8; margin-bottom: 3px; }
.demo.is-scene .sd-veil, .demo.is-scene .sd-bleed { inset: 0; pointer-events: none; z-index: 3; transition: opacity .5s, background-color .5s; }
.demo.is-scene .sd-island { left: 15px; top: 50%; transform: translateY(-50%); width: 9px; height: 34px; border-radius: 9px; background: #000; z-index: 6; }
.demo.is-scene .sd-tag {
  right: 16px; bottom: 15px; z-index: 7; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; color: #fff; font: 600 12px var(--f-text);
  background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 0 0 1px rgba(255, 255, 255, .2);
}
.demo.is-scene .sd-tag i { width: 7px; height: 7px; border-radius: 50%; background: #5fd394; }
/* LCD compatible : rétroéclairage = noirs grisâtres, couleurs ternes, bordure plus épaisse */
.demo-lcd.is-scene .sd-screen { filter: saturate(.62) brightness(.93); }
.demo-lcd.is-scene .sd-screen::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 5px solid #000; border-right-width: 11px; z-index: 5; }
.demo-lcd.is-scene .sd-veil { background: rgba(52, 57, 68, .6); mix-blend-mode: lighten; }
.demo-lcd.is-scene .sd-bleed { opacity: .8; background: radial-gradient(45% 70% at 0% 100%, rgba(200, 210, 255, .2), transparent 70%), radial-gradient(40% 60% at 100% 0%, rgba(200, 210, 255, .16), transparent 70%); }
.demo-lcd.is-scene .sd-tag i { background: #ffb35c; }
.screens.is-dark .demo-lcd.is-scene .sd-veil { background: rgba(66, 72, 86, .72); }
.screens.is-dark .demo-lcd.is-scene .sd-bleed { opacity: 1; }
/* OLED compatible : vrais noirs, teinte très légèrement différente */
.demo-oled.is-scene .sd-screen { filter: saturate(1.08) contrast(1.04) brightness(.97) hue-rotate(-6deg); }
/* Origine : rendu d'usine */
.demo-orig.is-scene .sd-screen { filter: saturate(1.22) contrast(1.08); }
/* Avis du technicien */
.meters { display: grid; gap: 9px; margin-top: 16px; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, .65); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(22, 24, 28, .06); }
.meters .mh { display: block; font: 600 .7188rem/1.2 var(--f-text); letter-spacing: .08em; text-transform: uppercase; color: var(--brass-ink); }
.meters div { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .875rem; font-weight: 500; }
.meters dt { color: var(--muted); }
.meters dd { display: flex; gap: 4px; margin: 0; font-weight: 700; }
.meters dd i { width: 18px; height: 6px; border-radius: 9px; background: rgba(22, 24, 28, .12); }
.meters dd i.on { background: linear-gradient(90deg, #e6cfa8, #c9a06c); }
.screens.is-dark .meters { background: rgba(255, 255, 255, .05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.screens.is-dark .meters dt { color: var(--on-dark-muted); }
.screens.is-dark .meters dd i { background: rgba(255, 255, 255, .14); }
.screens.is-dark .meters dd i.on { background: linear-gradient(90deg, #e6cfa8, #c9a06c); }
.screens.is-dark .meters dd { color: var(--on-dark); }

/* Mobile : les trois écrans défilent de gauche à droite */
.sc-dots { display: none; }
@media (max-width: 899px) {
  .screens-grid {
    display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding: 16px var(--gutter) 6px; scroll-padding-inline: var(--gutter);
  }
  .screens-grid::-webkit-scrollbar { display: none; }
  .screens-grid > .screen-opt { flex: 0 0 86%; scroll-snap-align: start; }
  .screens-grid > .screen-opt--reco { margin-top: 0; }
  .meters { padding: 12px 14px; }
  .meters div { gap: 8px; }
  .meters dt { font-size: .8125rem; white-space: nowrap; }
  .meters dd { gap: 3px; }
  .meters dd i { width: 12px; }
  .sc-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
  .sc-dots button { width: 44px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
  .sc-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: rgba(22, 24, 28, .22); transition: width .35s var(--lg-spring), background-color .25s; }
  .sc-dots button[aria-current="true"]::before { width: 26px; background: var(--brass); }
  .screens.is-dark .sc-dots button::before { background: rgba(255, 255, 255, .25); }
  .screens.is-dark .sc-dots button[aria-current="true"]::before { background: var(--brass); }
}
.screens.is-dark .meters .mh { color: var(--brass-hi); }

/* Demande de prix pas à pas */
.grp > .pk { grid-column: 1 / -1; }
.pk-off, .pk-wait > :not(.pk) { display: none !important; }
.pk { display: grid; gap: 4px; min-width: 0; padding: 20px; border-radius: 28px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .07); }
.pk-steps { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.pk-step { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px 0 5px; border-radius: 999px; border: 0; font: 500 .875rem/1 var(--f-text); color: #8b919b; background: rgba(255, 255, 255, .04); cursor: default; }
.pk-step i { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 700 .78rem/1 var(--f-text); font-style: normal; background: rgba(255, 255, 255, .08); }
.pk-step.is-done { color: var(--on-dark); cursor: pointer; background: rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.pk-step.is-done i { background: var(--green-hi); color: var(--ink); }
.pk-step.is-done:hover { background: rgba(255, 255, 255, .16); }
.pk-step.is-cur { color: var(--ink); background: var(--lg-brass); box-shadow: var(--lg-brass-shadow); }
.pk-step.is-cur i { background: rgba(255, 255, 255, .6); }
.pk-h { font: 700 1.375rem/1.2 var(--f-display); letter-spacing: -.02em; }
.pk-sub { color: var(--on-dark-muted); font-size: .9375rem; margin: 2px 0 16px; }
.pk-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pk-tiles.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pk-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 130px; padding: 16px 10px;
  border-radius: 24px; border: 0; cursor: pointer; color: var(--on-dark); text-align: center; font: 600 .9688rem/1.25 var(--f-text);
  background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 0 0 1px rgba(255, 255, 255, .1), 0 16px 30px -20px rgba(0, 0, 0, .8);
  transition: transform .45s var(--lg-spring), background-color .3s;
}
.pk-tile:hover { transform: translateY(-3px) scale(1.02); background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .06)); }
.pk-tile:active { transform: scale(.97); }
.pk-tile:focus-visible { outline: 3px solid var(--brass-hi); outline-offset: 3px; }
.pk-tile.is-on { color: var(--ink); background: var(--lg-brass); box-shadow: var(--lg-brass-shadow); }
.pk-tile .ic { width: 38px; height: 38px; color: var(--brass-hi); stroke-width: 1.5; }
.pk-tile.is-on .ic { color: var(--ink); }
.pk-tile.is-sm { min-height: 96px; }
.pk-logo { height: 46px; display: flex; align-items: center; justify-content: center; }
.pk-logo svg { width: 40px; height: 40px; fill: currentColor; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .3)) drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); transition: transform .45s var(--lg-spring); }
.pk-logo svg.is-wide { width: 92px; height: 92px; margin: -23px 0; }
.pk-tile:hover .pk-logo svg { transform: translateY(-2px) scale(1.06); }
.pk-tile.is-on .pk-logo svg { filter: none; }
.pk-logo b { font: 700 1.2rem/1 var(--f-display); letter-spacing: -.02em; }
.pk-search { position: relative; margin-bottom: 14px; }
.pk-search input { width: 100%; min-height: 50px; padding: 0 18px 0 46px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); color: var(--on-dark); font: 400 1rem/1.2 var(--f-text); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35); }
.pk-search input:focus { outline: none; border-color: var(--brass); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35), 0 0 0 4px rgba(201, 160, 108, .22); }
.pk-search .ic { position: absolute; left: 16px; top: 50%; translate: 0 -50%; width: 20px; height: 20px; color: var(--on-dark-muted); }
/* La rangée de familles défile dans sa bande sans élargir le parcours */
.pk > *, .pk-panel { min-width: 0; }
.pk-fams { max-width: 100%; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: -2px -4px 12px; padding: 4px; overscroll-behavior-x: contain; }
.pk-fams::-webkit-scrollbar { display: none; }
.pk-fam {
  flex: none; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 0; cursor: pointer; white-space: nowrap;
  font: 600 .875rem/1 var(--f-text); color: var(--on-dark-muted);
  background: linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .08);
  transition: color .2s, transform .4s var(--lg-spring);
}
.pk-fam:hover { color: var(--on-dark); transform: scale(1.03); }
.pk-fam:focus-visible { outline: 3px solid var(--brass-hi); outline-offset: 2px; }
.pk-fam[aria-pressed="true"] { color: var(--ink); background: var(--lg-brass); box-shadow: var(--lg-brass-shadow); }
.pk-fam-h { grid-column: 1 / -1; margin: 14px 4px 0; font: 700 1rem/1.2 var(--f-display); letter-spacing: -.01em; color: var(--on-dark); }
.pk-fam-h:first-child { margin-top: 0; }
.pk-models { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; max-height: 560px; overflow-y: auto; padding: 4px; margin: -4px; overscroll-behavior: contain; }
.pk-model { min-height: 0; padding: 10px 10px 14px; gap: 8px; font-size: .875rem; justify-content: flex-start; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 0 0 1px rgba(255, 255, 255, .1); }
/* Grille de modèles : pas d'ombre portée ni de flou, pour un défilement fluide sur mobile */
.pk-model.is-on { box-shadow: var(--lg-brass-shadow); }
.pk-img { width: 100%; height: 124px; display: flex; align-items: center; justify-content: center; padding: 6px 8px 10px; }
.pk-img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .5)); transition: transform .45s var(--lg-spring); }
.pk-tile:hover .pk-img img { transform: translateY(-3px) scale(1.04); }
.pk-tile.is-on .pk-img img { filter: drop-shadow(0 8px 10px rgba(90, 60, 20, .45)); }
.pk-empty { color: var(--on-dark-muted); margin-top: 14px; }
.pk-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 18px; }
.pk-nav .btn { min-height: 44px; }
.pk-nav .pk-next { margin-left: auto; }
.pk-free { display: grid; gap: 7px; max-width: 520px; }
.pk-done { display: flex; align-items: center; gap: 16px; }
.pk-done .pk-img { flex: none; width: 92px; height: 104px; }
.pk-done-txt { display: grid; gap: 3px; min-width: 0; }
.pk-done-txt strong { font: 700 1.125rem/1.25 var(--f-display); }
.pk-done-txt span { color: var(--on-dark-muted); font-size: .9375rem; }
.pk-done .btn { margin-left: auto; min-height: 44px; }
.pk-hint { color: var(--red-hi); font-weight: 500; font-size: .9375rem; margin-top: 10px; }
.pk-hint::before { content: "! "; font-weight: 700; }
.pk.is-shake { animation: pk-shake .32s ease-out; }
@keyframes pk-shake { 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
.pk-panel { animation: grp-in .26s var(--ease-out); }
@media (max-width: 899px) {
  .pk-tiles.is-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .demo.is-scene .sd-tag { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(0, 0, 0, .45); }
}
@media (max-width: 559px) {
  .pk { padding: 14px; border-radius: 22px; }
  .pk-tiles, .pk-tiles.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* La rangée de familles défile dans sa bande sans élargir le parcours */
.pk > *, .pk-panel { min-width: 0; }
.pk-fams { max-width: 100%; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: -2px -4px 12px; padding: 4px; overscroll-behavior-x: contain; }
.pk-fams::-webkit-scrollbar { display: none; }
.pk-fam {
  flex: none; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 0; cursor: pointer; white-space: nowrap;
  font: 600 .875rem/1 var(--f-text); color: var(--on-dark-muted);
  background: linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .08);
  transition: color .2s, transform .4s var(--lg-spring);
}
.pk-fam:hover { color: var(--on-dark); transform: scale(1.03); }
.pk-fam:focus-visible { outline: 3px solid var(--brass-hi); outline-offset: 2px; }
.pk-fam[aria-pressed="true"] { color: var(--ink); background: var(--lg-brass); box-shadow: var(--lg-brass-shadow); }
.pk-fam-h { grid-column: 1 / -1; margin: 14px 4px 0; font: 700 1rem/1.2 var(--f-display); letter-spacing: -.01em; color: var(--on-dark); }
.pk-fam-h:first-child { margin-top: 0; }
.pk-models { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pk-done { flex-wrap: wrap; }
  .pk-done .btn { margin-left: 0; }
}
/* Parcours : tout est centré, y compris les rangées incomplètes (marques, pannes, modèles) */
.pk-steps { justify-content: center; }
.pk-h, .pk-sub, .pk-empty, .pk-fam-h { text-align: center; }
.pk-tiles, .pk-models { display: flex; flex-wrap: wrap; justify-content: center; }
.pk-models { align-content: flex-start; }
.pk-tiles > .pk-tile { flex: 0 0 calc((100% - 24px) / 3); }
.pk-tiles.is-4 > .pk-tile { flex-basis: calc((100% - 36px) / 4); }
.pk-models > .pk-model { flex: 0 0 calc((100% - 30px) / 4); }
.pk-fam-h { flex: 0 0 100%; }
.pk-fams > :first-child { margin-left: auto; }
.pk-fams > :last-child { margin-right: auto; }
.pk-free { margin-inline: auto; width: 100%; }
.pk-done { justify-content: center; }
@media (max-width: 899px) {
  .pk-tiles.is-4 > .pk-tile { flex-basis: calc((100% - 24px) / 3); }
  .pk-models > .pk-model { flex-basis: calc((100% - 20px) / 3); }
}
@media (max-width: 559px) {
  .pk-tiles > .pk-tile, .pk-tiles.is-4 > .pk-tile { flex-basis: calc((100% - 12px) / 2); }
  .pk-models > .pk-model { flex-basis: calc((100% - 10px) / 2); }
}
/* Familles : toutes visibles, sur plusieurs lignes centrées (pas de défilement) */
.pk-fams { flex-wrap: wrap; justify-content: center; overflow: visible; margin: 0 0 16px; padding: 0; }
.pk-fams > :first-child, .pk-fams > :last-child { margin: 0; }
@media (max-width: 559px) {
  .pk-fams { gap: 6px; }
  .pk-fam { padding: 0 13px; font-size: .8125rem; }
}
/* Tant que le choix n'est pas terminé : ni message, ni envoi, ni prénom ; le parcours prend toute la largeur */
#rq.pk-pending .rq-send, #rq.pk-pending .pk-after { display: none; }
#rq:not(.pk-pending) .rq-send, #rq:not(.pk-pending) .pk-after { animation: grp-in .35s var(--ease-out); }
@media (min-width: 900px) {
  #rq.pk-pending .rq-grid { grid-template-columns: minmax(0, 1fr); }
  #rq.pk-pending .rq-fields { width: 100%; max-width: 760px; margin-inline: auto; }
}


/* =========================================================
   Haut de page : iPhone or en 3D, réparation d'écran animée
   (remplace le téléphone d'origine quand le script est actif)
   ========================================================= */
.rp { --rp-s: .64; display: flex; flex-direction: column; align-items: center; gap: 10px; }
@media (min-width: 560px) { .rp { --rp-s: .8; } }
@media (min-width: 900px) { .rp { --rp-s: .86; } }
.js .hero-visual > .phone, .js .hero-visual > .replay-row { display: none; }
.js .hero-visual { min-height: calc(676px * .64 + 150px); }
@media (min-width: 560px) { .js .hero-visual { min-height: calc(676px * .8 + 150px); } }
@media (min-width: 900px) { .js .hero-visual { min-height: calc(676px * .86 + 150px); } }
.rp-stage { isolation: isolate; z-index: 0; position: relative; width: calc(324px * var(--rp-s)); height: calc(676px * var(--rp-s)); perspective: 1900px; perspective-origin: 50% 40%; }
.rp-scale { position: absolute; left: 0; top: 0; width: 324px; height: 676px; transform: scale(var(--rp-s)); transform-origin: 0 0; transform-style: preserve-3d; }
.rp-tilt { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1s cubic-bezier(.16, 1, .3, 1); }
.rp-float { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: rp-float 7s ease-in-out infinite; }
@keyframes rp-float { 50% { transform: translate3d(0, -10px, 0); } }
.rp.is-broken .rp-float { animation: rp-impact .7s cubic-bezier(.36, .07, .19, .97) both, rp-float 7s ease-in-out .7s infinite; }
@keyframes rp-impact { 0% { transform: translate3d(0, -80px, 0) rotateZ(-4deg); } 50% { transform: translate3d(0, 6px, 0) rotateZ(.8deg); } 64% { transform: translate3d(0, -8px, 0) rotateZ(-.6deg); } 78% { transform: translate3d(0, 3px, 0); } 100% { transform: none; } }
.rp-phone { position: relative; width: 324px; height: 676px; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.45, 0, .2, 1); }
/* Écran ouvert : le téléphone glisse à gauche pour que l'écran ouvert reste visible */
.rp.is-open .rp-phone, .rp.is-disconnect .rp-phone, .rp.is-remove .rp-phone, .rp.is-newin .rp-phone, .rp.is-connect .rp-phone { transform: translateX(-34%); }
.rp-slab { position: absolute; inset: 0; border-radius: 66px; background: #a67c48; }
.rp-back { position: absolute; inset: 0; border-radius: 66px; background: linear-gradient(160deg, #ecd5ab, #b88d57); transform: translateZ(-11px); box-shadow: 0 50px 80px -30px rgba(0, 0, 0, .9); }
.rp-front { position: absolute; inset: 0; border-radius: 66px; padding: 3px; transform: translateZ(1px); transform-style: preserve-3d;
  background: linear-gradient(120deg, #8a6232 0%, #f6e6c8 12%, #b48a52 26%, #f2dcb2 44%, #7d5a2e 62%, #e6c999 80%, #9c7240 100%); background-size: 240% 240%; background-position: var(--rp-lx, 70%) 30%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), inset 0 1.5px 0 rgba(255, 255, 255, .75), inset 0 -1.5px 1px rgba(0, 0, 0, .3); }
.rp-chamfer { position: absolute; inset: 2px; border-radius: 64px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); pointer-events: none; }
.rp-key { position: absolute; width: 6px; border-radius: 3px; background: linear-gradient(90deg, #8a6232, #f3dfba 45%, #9c7240); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 1px 2px rgba(0, 0, 0, .5); transform: translateZ(-5px); }
.rp-key.k1 { left: -5px; top: 140px; height: 36px; } .rp-key.k2 { left: -5px; top: 196px; height: 64px; } .rp-key.k3 { left: -5px; top: 270px; height: 64px; }
.rp-key.k4 { right: -5px; top: 216px; height: 100px; } .rp-key.k5 { right: -4px; top: 420px; height: 62px; width: 5px; background: linear-gradient(90deg, #5a3f1e, #c9a06c); }
.rp-band { position: absolute; width: 4px; height: 3px; background: rgba(0, 0, 0, .28); }
.rp-band.b1 { left: 0; top: 104px; } .rp-band.b2 { right: 0; top: 104px; } .rp-band.b3 { left: 0; bottom: 104px; } .rp-band.b4 { right: 0; bottom: 104px; }
.rp-bezel { position: absolute; inset: 3px; border-radius: 63px; background: #020203; transform-style: preserve-3d; box-shadow: inset 0 0 0 1px #1a1b1e; }
.rp-port { position: absolute; bottom: -1px; left: 50%; width: 42px; height: 4px; margin-left: -21px; border-radius: 3px; background: #0b0b0c; transform: translateZ(2px); }
.rp-vis { position: absolute; bottom: -2px; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f4e7cf, #8a6232 70%); transform: translateZ(3px); }
.rp-vis.v1 { left: 118px; } .rp-vis.v2 { right: 118px; }
.rp.is-unscrew .rp-vis { animation: rp-unscrew 1s ease-in both; }
.rp.is-unscrew .rp-vis.v2 { animation-delay: .35s; }
@keyframes rp-unscrew { 0%, 40% { transform: translateZ(3px); } 100% { transform: translate3d(0, 22px, 30px) rotate(540deg); opacity: 0; } }
.rp.is-lift .rp-vis, .rp.is-open .rp-vis, .rp.is-disconnect .rp-vis, .rp.is-remove .rp-vis, .rp.is-newin .rp-vis, .rp.is-connect .rp-vis, .rp.is-close .rp-vis { opacity: 0; }
.rp.is-screw .rp-vis { animation: rp-rescrew .6s ease-out both; }
.rp.is-screw .rp-vis.v2 { animation-delay: .2s; }
@keyframes rp-rescrew { 0% { transform: translate3d(0, 22px, 30px) rotate(-540deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: translateZ(3px); } }
/* Intérieur */
.rp-inside { position: absolute; inset: 9px; border-radius: 54px; overflow: hidden; transform: translateZ(1px); background: linear-gradient(180deg, #1c1d21, #141518); }
.rp-board { position: absolute; left: 8%; right: 8%; top: 5%; height: 27%; border-radius: 18px; background: linear-gradient(160deg, #10201a, #0a1410); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.rp-chip { position: absolute; border-radius: 3px; background: linear-gradient(160deg, #2b2d31, #141517); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.rp-chip.c1 { left: 10%; top: 22%; width: 30%; height: 34%; } .rp-chip.c2 { left: 46%; top: 18%; width: 18%; height: 22%; } .rp-chip.c3 { left: 46%; top: 52%; width: 22%; height: 20%; }
.rp-chip.c4 { left: 12%; top: 66%; width: 16%; height: 16%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #3a4566, #0b0f1a 70%); }
.rp-batt { position: absolute; left: 10%; right: 10%; top: 38%; bottom: 7%; border-radius: 16px; background: linear-gradient(170deg, #43464c, #2a2c31 60%, #34363b); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.rp-batt b { font: 700 13px/1 var(--f-text); color: rgba(255, 255, 255, .55); }
.rp-batt small { font: 500 10.5px/1 var(--f-text); color: rgba(255, 255, 255, .35); }
.rp-tab { position: absolute; bottom: 10px; left: 50%; width: 46px; height: 16px; margin-left: -23px; border-radius: 4px; background: #0e0f11; }
.rp-sc { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e3e4e6, #6b6d72 60%, #2c2d30); }
.rp-sc.s1 { left: 6%; top: 3%; } .rp-sc.s2 { right: 6%; top: 3%; } .rp-sc.s3 { left: 6%; bottom: 3%; } .rp-sc.s4 { right: 6%; bottom: 3%; }
.rp-sock { position: absolute; right: 12%; top: 15%; width: 20%; height: 8%; border-radius: 4px; background: #0c0d0f; }
.rp-sock::after { content: ""; position: absolute; inset: 25% 12%; background: repeating-linear-gradient(90deg, #c89a4c 0 2px, transparent 2px 4px); }
.rp-plate { position: absolute; right: 10%; top: 13%; width: 24%; height: 12%; border-radius: 6px; transform: translateZ(2px); background: linear-gradient(150deg, #d9dadd, #8e9095 55%, #b7b9bd); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 4px rgba(0, 0, 0, .5); transition: transform .55s cubic-bezier(.55, 0, .35, 1), opacity .4s; }
.rp.is-disconnect .rp-plate, .rp.is-remove .rp-plate, .rp.is-newin .rp-plate, .rp.is-connect .rp-plate { transform: translate3d(30px, -60px, 60px) rotateZ(18deg); opacity: 0; }
.rp-ribbon { position: absolute; right: 0; top: 16%; width: 16%; height: 5%; background: linear-gradient(180deg, #e9c27e, #b98d43); opacity: 0; transition: opacity .25s; }
.rp.is-open .rp-ribbon, .rp.is-disconnect .rp-ribbon, .rp.is-connect .rp-ribbon { opacity: 1; }
.rp.is-disconnect .rp-ribbon { animation: rp-unplug .6s .25s ease-in both; }
@keyframes rp-unplug { to { transform: translateX(18px); opacity: 0; } }
.rp-flash { position: absolute; right: 12%; top: 15%; width: 20%; height: 8%; border-radius: 4px; opacity: 0; }
.rp.is-connect .rp-flash { animation: rp-flash .5s .15s ease-out both; }
@keyframes rp-flash { 30% { opacity: 1; background: rgba(48, 209, 88, .5); box-shadow: 0 0 22px 6px rgba(48, 209, 88, .7); } 100% { opacity: 0; } }
/* Écrans qui s'ouvrent comme un livre */
.rp-panel { position: absolute; inset: 9px; border-radius: 54px; transform-style: preserve-3d; transform-origin: 100% 50%; z-index: 5; transform: translateZ(3px); }
.rp-face, .rp-pback { position: absolute; inset: 0; border-radius: 54px; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.rp-pback { transform: rotateY(180deg); background: linear-gradient(160deg, #b9bbbf, #7d7f84 55%, #a4a6aa); }
.rp-pback::before { content: ""; position: absolute; left: 12%; right: 12%; top: 10%; bottom: 10%; border-radius: 30px; background: linear-gradient(160deg, #2a2c30, #18191c); }
.rp-old { transition: transform .9s cubic-bezier(.45, 0, .2, 1), opacity .5s; }
.rp.is-newin .rp-old, .rp.is-connect .rp-old, .rp.is-close .rp-old, .rp.is-screw .rp-old, .rp.is-boot .rp-old, .rp.is-wake .rp-old, .rp.is-done .rp-old { opacity: 0; transition: none; }
.rp.is-lift .rp-old { transform: translateZ(3px) rotateY(7deg); }
.rp.is-open .rp-old, .rp.is-disconnect .rp-old { transform: translateZ(3px) rotateY(112deg); }
.rp.is-remove .rp-old { transform: translate3d(420px, -30px, 123px) rotateY(112deg) rotateZ(6deg); opacity: 0; transition: transform .7s cubic-bezier(.55, 0, .35, 1), opacity .55s .15s; }
.rp-new { opacity: 0; transition: transform .8s cubic-bezier(.34, 1.25, .64, 1); }
.rp.is-boot .rp-new, .rp.is-wake .rp-new, .rp.is-done .rp-new, .rp.is-close .rp-new, .rp.is-screw .rp-new { opacity: 1; }
.rp.is-newin .rp-new { opacity: 1; animation: rp-newin 1s cubic-bezier(.3, .7, .2, 1) both; }
@keyframes rp-newin { 0% { transform: translate3d(440px, -60px, 160px) rotateY(112deg) rotateZ(-6deg); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateZ(3px) rotateY(112deg); } }
.rp.is-connect .rp-new { opacity: 1; transform: translateZ(3px) rotateY(112deg); }
/* Écran neuf */
.rp-disp { background: #000; isolation: isolate; }
.rp-wall, .rp-dead { position: absolute; inset: -4%; background: radial-gradient(70% 42% at 18% 88%, #e0b47a 0%, rgba(224, 180, 122, 0) 70%), radial-gradient(60% 40% at 92% 68%, #7a58c9 0%, rgba(122, 88, 201, 0) 72%), radial-gradient(80% 48% at 60% 22%, #2f4a86 0%, rgba(47, 74, 134, 0) 70%), radial-gradient(50% 30% at 40% 55%, rgba(255, 140, 90, .55) 0%, rgba(255, 140, 90, 0) 70%), linear-gradient(180deg, #10131c 0%, #0a0b10 100%); }
.rp-wall { transform: scale(1.1); opacity: 0; transition: transform 1.4s cubic-bezier(.16, 1, .3, 1), opacity .7s; }
.rp.is-wake .rp-wall, .rp.is-done .rp-wall { opacity: 1; transform: none; }
.rp-dead { filter: brightness(.62) saturate(.55) contrast(1.15); }
.rp-ui { position: absolute; inset: 0; opacity: 0; transition: opacity .5s; color: #fff; }
.rp.is-wake .rp-ui, .rp.is-done .rp-ui { opacity: 1; }
.rp-status { position: absolute; top: 17px; left: 34px; right: 28px; display: flex; justify-content: space-between; align-items: center; font: 600 15px/1 var(--f-text); }
.rp-status span { display: flex; gap: 6px; align-items: center; }
.rp-lock { position: absolute; left: 0; right: 0; top: 66px; text-align: center; }
.rp-date { font: 600 18px/1 var(--f-text); opacity: .92; }
.rp-time { margin-top: 2px; font: 600 104px/1 var(--f-display); letter-spacing: -.05em; color: rgba(255, 255, 255, .92); text-shadow: 0 8px 30px rgba(0, 0, 0, .35); }
.rp.is-wake .rp-lock { animation: rp-wake .8s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes rp-wake { from { filter: blur(12px); opacity: 0; transform: translateY(14px) scale(.96); } }
.rp-qa { position: absolute; bottom: 44px; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 0 0 1px rgba(255, 255, 255, .12); }
.rp-qa.l { left: 42px; } .rp-qa.r { right: 42px; }
.rp-home { position: absolute; bottom: 9px; left: 50%; width: 132px; height: 5px; margin-left: -66px; border-radius: 3px; background: rgba(255, 255, 255, .9); }
.rp-notif { position: absolute; left: 14px; right: 14px; top: 262px; display: flex; gap: 11px; align-items: center; padding: 12px 14px; border-radius: 26px; opacity: 0; transform: translateY(-30px) scale(.94);
  background: rgba(46, 46, 54, .72); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 0 0 1px rgba(255, 255, 255, .12), 0 16px 34px -16px rgba(0, 0, 0, .7); transition: opacity .4s, transform .65s cubic-bezier(.34, 1.56, .64, 1); }
.rp-notif img { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.rp-notif p { margin: 0; font: 400 14px/1.3 var(--f-text); }
.rp-notif .t { display: flex; justify-content: space-between; font-weight: 600; font-size: 14.5px; }
.rp-notif .t span { font-weight: 400; opacity: .65; }
.rp.is-done .rp-notif { opacity: 1; transform: none; }
.rp-boot { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; background: #000; opacity: 0; transition: opacity .4s; }
.rp-boot img { width: 76px; height: 76px; border-radius: 18px; }
.rp-bar { width: 110px; height: 4px; border-radius: 3px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.rp-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: #fff; }
.rp.is-boot .rp-boot { opacity: 1; }
.rp.is-boot .rp-boot .rp-bar i { animation: rp-bootbar .85s cubic-bezier(.45, 0, .2, 1) .1s forwards; }
@keyframes rp-bootbar { to { width: 100%; } }
.rp-off { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .04) 32%, transparent 48%, rgba(255, 255, 255, .07) 100%); opacity: 0; transition: opacity .3s; }
.rp.is-newin .rp-off, .rp.is-connect .rp-off, .rp.is-close .rp-off, .rp.is-screw .rp-off { opacity: 1; }
.rp-island { position: absolute; top: 12px; left: 50%; width: 104px; height: 31px; margin-left: -52px; border-radius: 20px; background: #000; z-index: 9; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #fff;
  transition: width .55s cubic-bezier(.34, 1.35, .64, 1), height .55s cubic-bezier(.34, 1.35, .64, 1), margin .55s cubic-bezier(.34, 1.35, .64, 1); }
.rp-lens { position: absolute; right: 11px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%; background: radial-gradient(circle at 35% 32%, #4a5a86 0, #141a2c 38%, #05060a 70%); transition: opacity .2s; }
.rp-isl { display: flex; align-items: center; gap: 10px; opacity: 0; transform: scale(.85); transition: opacity .25s, transform .4s; white-space: nowrap; font: 600 14px/1 var(--f-text); }
.rp-isl i { width: 24px; height: 24px; border-radius: 50%; background: #30d158; display: flex; align-items: center; justify-content: center; }
.rp.is-wake .rp-disp .rp-island { width: 236px; height: 40px; margin-left: -118px; }
.rp.is-wake .rp-disp .rp-isl { opacity: 1; transform: none; transition-delay: .15s; }
.rp.is-wake .rp-disp .rp-lens { opacity: 0; }
/* Écran cassé */
.rp-broken { background: #000; }
.rp-blot { position: absolute; inset: 0; width: 100%; height: 100%; }
.rp-bars { position: absolute; inset: 0; animation: rp-flick 1.7s steps(1) infinite; }
.rp-bars span { position: absolute; top: 0; bottom: 0; }
.rp-bars .a { left: 12%; width: 16px; background: linear-gradient(180deg, #a37bff, #5d3fd8 60%, #3a2a8a); }
.rp-bars .b { left: 17%; width: 2px; background: #f1f1ff; }
.rp-bars .c { left: 63%; width: 2px; background: #4dff9a; }
.rp-bars .d { left: 65.5%; width: 2px; background: #ff3d6a; }
.rp-bars .e { left: 0; right: 0; top: 71%; bottom: auto; height: 2px; background: linear-gradient(90deg, transparent, #7cf 20%, #fff 50%, #f7c 80%, transparent); }
@keyframes rp-flick { 0% { opacity: 1; } 11% { opacity: .55; } 13% { opacity: 1; } 47% { opacity: .85; } 49% { opacity: .25; } 51% { opacity: 1; } }
.rp:not(.is-broken) .rp-bars { animation: none; opacity: .35; }
.rp-cracks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rp-cracks .w { fill: none; stroke: rgba(255, 255, 255, .9); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 700; }
.rp-cracks .gl { fill: none; stroke: rgba(190, 215, 255, .32); stroke-linecap: round; stroke-dasharray: 700; }
.rp-cracks .sh { fill: rgba(255, 255, 255, .07); stroke: rgba(255, 255, 255, .18); stroke-width: .4; }
.rp.is-broken .rp-cracks .w, .rp.is-broken .rp-cracks .gl { animation: rp-draw .75s cubic-bezier(.2, .75, .2, 1) both; }
@keyframes rp-draw { from { stroke-dashoffset: 700; } }
.rp-oldisland { position: absolute; top: 12px; left: 50%; width: 104px; height: 31px; margin-left: -52px; border-radius: 20px; background: #000; }
.rp-heat { position: absolute; inset: 0; border-radius: 54px; pointer-events: none; opacity: 0; box-shadow: inset 0 0 26px 6px rgba(255, 120, 40, .65); }
.rp.is-lift .rp-heat { animation: rp-heat 1.2s ease-in-out both; }
@keyframes rp-heat { 30%, 70% { opacity: 1; } }
/* Outils */
.rp-tool { position: absolute; pointer-events: none; opacity: 0; }
.rp-driver { left: 50%; top: 100%; width: 20px; height: 150px; margin-left: -10px; }
.rp-driver .h { position: absolute; left: 0; top: 40px; width: 20px; height: 110px; border-radius: 9px; background: repeating-linear-gradient(90deg, #16181c 0 3px, #2a2d33 3px 6px); }
.rp-driver .h::after { content: ""; position: absolute; left: 3px; right: 3px; top: 6px; height: 10px; border-radius: 4px; background: linear-gradient(180deg, #e6cfa8, #c9a06c); }
.rp-driver .s { position: absolute; left: 8px; top: 0; width: 4px; height: 44px; background: linear-gradient(90deg, #8b8d92, #f2f3f5, #8b8d92); }
.rp.is-unscrew .rp-driver { animation: rp-driver 1.05s ease-in-out both; }
.rp.is-screw .rp-driver { animation: rp-driver .75s ease-in-out both reverse; }
@keyframes rp-driver { 0% { opacity: 0; transform: translate3d(-48px, 60px, 40px); } 15% { opacity: 1; transform: translate3d(-48px, 4px, 40px); } 45% { transform: translate3d(-48px, 4px, 40px); } 55% { transform: translate3d(48px, 4px, 40px); } 85% { opacity: 1; transform: translate3d(48px, 4px, 40px); } 100% { opacity: 0; transform: translate3d(48px, 60px, 40px); } }
.rp-cup { left: 50%; bottom: 120px; width: 78px; height: 78px; margin-left: -39px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, rgba(160, 200, 255, .55), rgba(60, 110, 190, .55) 60%, rgba(30, 60, 120, .65)); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .25); }
.rp-cup::after { content: ""; position: absolute; left: 50%; top: -34px; width: 40px; height: 44px; margin-left: -20px; border: 6px solid #c9a06c; border-bottom: 0; border-radius: 22px 22px 0 0; }
.rp.is-lift .rp-cup { animation: rp-cup 1.2s cubic-bezier(.45, 0, .3, 1) both; }
@keyframes rp-cup { 0% { opacity: 0; transform: translate3d(0, -40px, 240px) scale(1.2); } 30% { opacity: 1; transform: translateZ(42px); } 55% { transform: translateZ(42px); } 80% { opacity: 1; transform: translateZ(64px); } 100% { opacity: 0; transform: translate3d(0, -40px, 180px); } }
.rp-pick { left: -6px; top: 300px; width: 56px; height: 38px; background: linear-gradient(135deg, rgba(80, 170, 255, .85), rgba(40, 120, 220, .7)); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.rp.is-lift .rp-pick { animation: rp-pick 1.2s ease-in-out both; }
@keyframes rp-pick { 0%, 35% { opacity: 0; transform: translate3d(-60px, 0, 30px); } 50% { opacity: 1; transform: translate3d(-30px, 0, 30px); } 75% { opacity: 1; transform: translate3d(-30px, -160px, 30px); } 100% { opacity: 0; transform: translate3d(-60px, -160px, 30px); } }
.rp-glass { position: absolute; inset: 12px; border-radius: 54px; pointer-events: none; transform: translateZ(5px); background: linear-gradient(115deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .05) 24%, transparent 40%, transparent 70%, rgba(255, 255, 255, .05) 100%); opacity: 0; transition: opacity .3s; }
.rp.is-boot .rp-glass, .rp.is-wake .rp-glass, .rp.is-done .rp-glass { opacity: 1; }
/* Compte à rebours sous le téléphone */
.rp-chrono { display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 10px 18px; border-radius: 22px; color: var(--on-dark); visibility: hidden; opacity: 0; transform: translateY(8px);
  background: rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 0 0 1px rgba(255, 255, 255, .12); transition: opacity .35s, transform .5s cubic-bezier(.34, 1.56, .64, 1), visibility 0s .35s; }
.rp.is-working .rp-chrono { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.rp-chrono b { font: 600 26px/1 var(--f-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rp-chrono span { display: grid; gap: 6px; width: 150px; }
.rp-chrono small { font: 600 12.5px/1.2 var(--f-text); }
.rp-chrono .rp-bar { width: 100%; }
.rp-chrono .rp-bar i { background: linear-gradient(90deg, #e6cfa8, #c9a06c); }
.rp .replay { background: var(--lg-dark); box-shadow: var(--lg-dark-shadow); color: var(--on-dark); }
@media (min-width: 900px) and (hover: hover) {
  .rp-notif { -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); background: rgba(40, 40, 46, .4); }
}
@media (prefers-reduced-motion: reduce) { .rp-float, .rp.is-broken .rp-float { animation: none; } }
/* Hors de l'écran : tout est en pause */
.rp.is-paused, .rp.is-paused * { animation-play-state: paused !important; }


/* =========================================================
   Mode sombre : réglage de l'appareil par défaut, ou choix du visiteur
   ========================================================= */
html[data-theme="dark"] {
  color-scheme: dark;
  --text: #eceef1; --muted: #a6acb6; --line: rgba(243, 244, 246, .12); --glass: #17191d; --brass-ink: #e6cfa8;
  --lg-light: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05));
  --lg-light-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 0 0 1px rgba(255, 255, 255, .1), 0 10px 22px -14px rgba(0, 0, 0, .7);
}
html[data-theme="dark"] body { background: #101114; }
html[data-theme="dark"] .shop li { background: #15171b; }
html[data-theme="dark"] .quotes li { background: #1b1d22; }
html[data-theme="dark"] .marquee-toggle { background: #1b1d22; color: var(--text); }
html[data-theme="dark"] .screens:not(.is-dark) { background: transparent; }
html[data-theme="dark"] .screen-opt { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(255, 255, 255, .06); }
html[data-theme="dark"] .screen-opt--reco { box-shadow: inset 0 0 0 2px var(--brass), inset 0 3px 0 rgba(255, 255, 255, .08); }
html[data-theme="dark"] .meters { background: rgba(255, 255, 255, .05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(255, 255, 255, .06); }
html[data-theme="dark"] .meters dd i { background: rgba(255, 255, 255, .14); }
html[data-theme="dark"] .meters dd i.on { background: linear-gradient(90deg, #e6cfa8, #c9a06c); }
html[data-theme="dark"] .meters .mh { color: var(--brass-hi); }
html[data-theme="dark"] .btn-google { background: linear-gradient(180deg, #fff, #eef0f3); color: #1f1f1f; box-shadow: inset 0 1px 0 #fff, 0 10px 22px -14px rgba(0, 0, 0, .7); }
html[data-theme="dark"] .faq summary::after { box-shadow: inset 0 1px 0 #fff, 0 6px 14px -8px rgba(0, 0, 0, .6); }
html[data-theme="dark"] .link-btn:hover, html[data-theme="dark"] .lights:hover { color: #fff; }

/* Bouton soleil / lune de l'en-tête */
.theme-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: var(--on-dark);
  background: var(--lg-dark); box-shadow: var(--lg-dark-shadow); transition: transform .45s var(--lg-spring); }
.theme-btn:hover { transform: scale(1.06); }
.theme-btn:focus-visible { outline: 3px solid var(--brass-hi); outline-offset: 2px; }
.theme-btn .ic { width: 20px; height: 20px; }
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after { transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease !important; }

/* Onglets « Votre marque » (iPhone, Samsung…) : CSS seul, tout le texte reste dans la page */
.brands { position: relative; margin: 8px 0 40px; }
.brands-label { margin: 0 0 10px; font-weight: 600; font-size: .9375rem; opacity: .75; }
.brands > input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.brand-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.brand-tabs label { cursor: pointer; padding: .6em 1.15em; border-radius: 999px; border: 1.5px solid var(--line); font: 600 .9375rem/1.2 var(--f-text); transition: background-color .2s, border-color .2s, color .2s; }
.brand-tabs label:hover { border-color: var(--brass); }
.brand-panel { display: none; padding: 24px; border-radius: 22px; border: 1px solid var(--line); background: rgba(255, 255, 255, .55); }
.brand-panel h3 { margin: 0 0 10px; }
.brand-panel p { margin: 0 0 14px; max-width: 70ch; }
#m-iphone:checked ~ #p-iphone, #m-samsung:checked ~ #p-samsung, #m-xiaomi:checked ~ #p-xiaomi, #m-autres:checked ~ #p-autres { display: block; }
#m-iphone:checked ~ .brand-tabs [for="m-iphone"], #m-samsung:checked ~ .brand-tabs [for="m-samsung"], #m-xiaomi:checked ~ .brand-tabs [for="m-xiaomi"], #m-autres:checked ~ .brand-tabs [for="m-autres"] { background: var(--brass); border-color: var(--brass); color: var(--ink); }
.brands > input:focus-visible ~ .brand-tabs label { outline: none; }
#m-iphone:focus-visible ~ .brand-tabs [for="m-iphone"], #m-samsung:focus-visible ~ .brand-tabs [for="m-samsung"], #m-xiaomi:focus-visible ~ .brand-tabs [for="m-xiaomi"], #m-autres:focus-visible ~ .brand-tabs [for="m-autres"] { outline: 2px solid var(--brass); outline-offset: 3px; }
html[data-theme="dark"] .brand-panel { background: rgba(255, 255, 255, .04); border-color: var(--line-dark); }
html[data-theme="dark"] .brand-tabs label { border-color: var(--line-dark); }
@media (max-width: 600px) {
  .brand-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 16px; }
  .brand-tabs label { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: .5em .4em; text-align: center; font-size: .875rem; line-height: 1.15; }
  .brand-panel { padding: 18px 16px; border-radius: 18px; }
  .brand-panel h3 { font-size: 1.1875rem; }
  .brand-panel .link-btn { display: flex; width: 100%; justify-content: center; text-align: center; }
}


/* Avant / Pendant / Après : téléphones statiques (octobre 2026) : aucun mouvement, aucun effet au survol */
.studio .p3__sway { animation: none !important; }
.studio .p3__obj, .studio .p3__glass, .studio .p3__batt, .studio .p3__hinge, .studio .p3__sheen > i, .studio .p3__floor, .studio .p3__beam, .studio .il-bright, .studio .il-shackle, .studio .il-torch-on { transition: none !important; }
.studio .p3--avant:hover .p3__glass, .studio .p3--avant.is-on .p3__glass { transform: translateZ(1px) !important; }
.studio .p3__hinge:hover, .studio .p3__hinge.is-on { transform: translateZ(.6px) rotateY(122deg) !important; }
.studio .p3--open .hot--batt:hover, .studio .p3--open .hot--batt.is-on { transform: translateZ(var(--bz, 1px)) !important; }
.studio .il-sweep, .studio .il-dead, .studio .il-dust circle, .studio .il-glint { animation: none !important; }
.studio .hot--screen:hover .il-bright, .studio .hot--screen.is-on .il-bright { opacity: 0 !important; }
.studio .p3--apres:has(.hot--torch:hover) .p3__beam, .studio .p3--apres:has(.hot--torch.is-on) .p3__beam { opacity: 0 !important; }
.studio .hot--lock:hover .il-shackle, .studio .hot--lock.is-on .il-shackle { transform: none !important; }
.studio .hot--torch:hover .il-torch-on, .studio .hot--torch.is-on .il-torch-on { opacity: 0 !important; }
.studio .hot, .studio .p3__svg { cursor: default; }

/* En-tête ordinateur, version équilibrée (octobre 2026) :
   logo + statut à gauche, menu au centre, actions à droite ; sans flou d'arrière-plan
   (le flou recalculé à chaque défilement saccadait sur les écrans Retina, comme sur mobile) */
@media (min-width: 900px) {
  .site-header .header-in { gap: 10px; padding: 6px 8px 6px 14px; background: rgba(22, 24, 28, .9); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-header .status { margin-left: 4px; margin-right: auto; }
}
@media (min-width: 100000px) {
  .site-header .status { margin-right: 0; }
  .site-header [data-status-text] { font-size: 0; }
  .site-header [data-status-text] strong { font-size: .875rem; }
  .nav { margin-left: auto; margin-right: auto; }
  .nav ul { gap: 2px; }
  .nav a { white-space: nowrap; padding-inline: 11px; }
}

/* Avant / Pendant / Après : téléphones en images (octobre 2026), bien plus légers à afficher
   que les dessins 3D ; même rendu, même place, mêmes tailles sur ordinateur, tablette et mobile */
.studio .p3 { cursor: default; }
.studio .p3__img { position: absolute; max-width: none; pointer-events: none; -webkit-user-select: none; user-select: none; }

/* Fluidité du défilement : téléphone du haut redressé puis rendu à plat une fois la réparation terminée */
.rp.is-settle .rp-tilt { transform: none !important; }
.rp.is-rest .rp-stage { perspective: none; }
.rp.is-rest .rp-stage * { transform-style: flat !important; }