/* Shared material system; each palette has its own tint, edge and ambient light. */
html {
  --glass: rgba(33, 64, 98, .62);
  --glass-solid: #15314d;
  --rim: rgba(176, 211, 246, .22);
  --shine: rgba(208, 231, 255, .16);
  --shade: rgba(2, 13, 32, .23);
  --ambient: rgba(52, 133, 224, .18);
  --warm: rgba(255, 152, 88, .10);
  --nav-tint: rgba(10, 28, 51, .82);
  --field: #172f51;
  --field-cool: #4677ae;
  --field-warm: #d98c68;
  --card-radius: 26px;
  scroll-padding-top: 92px;
}
html[data-theme=light] {
  --bg: #f5f6f8;
  --ink: #182331;
  --muted: #4c5a68;
  --band: #eef1f5;
  --glass: rgba(255, 255, 255, .63);
  --glass-solid: #fbfcff;
  --rim: rgba(70, 99, 125, .19);
  --shine: rgba(255, 255, 255, .96);
  --shade: rgba(36, 57, 82, .09);
  --ambient: rgba(124, 177, 227, .2);
  --warm: rgba(255, 170, 117, .16);
  --nav-tint: rgba(248, 250, 253, .84);
  --field: #d8e6f4;
  --field-cool: #91b4dc;
  --field-warm: #fac3a0;
}
body, h1, h2, h3, .price, .kicker, .offer, .board-label {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
h1, h2 { font-weight: 660; letter-spacing: -.062em; line-height: 1.01; }
.kicker { font-size: 12px; text-transform: none; letter-spacing: .035em; }
.kicker i { width: 18px; border-radius: 4px; }
.offer { text-transform: none; letter-spacing: .018em; font-weight: 620; background: var(--band); color: var(--ink); }
.offer .tiny-dot { background: var(--orange); }
header {
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--bg);
  border-bottom-color: var(--rim);
}
.nav { height: 68px; }
.nav nav a { font-weight: 520; }
.nav .brand { width: 96px; }
.btn, .nav-cta, .theme, .garden b { border-radius: 999px; }
.btn {
  padding: 14px 22px;
  font-weight: 650;
  border: 1px solid #ffa264;
  background: linear-gradient(170deg, #ffad73 0%, #ff833d 52%, #ff7933 100%);
  box-shadow: inset 0 1px 0 #ffffff66, 0 5px 14px rgba(199, 92, 24, .17);
}
.btn:not(.secondary):hover { background: linear-gradient(170deg, #ffbd8c, #ff944c); }
.btn:active, .nav-cta:active { transform: scale(.985); }
.btn.secondary, .theme, .nav-cta {
  background: var(--glass-solid);
  border: 1px solid var(--rim);
  color: var(--ink);
  box-shadow: inset 0 1px 0 var(--shine), 0 3px 12px var(--shade);
}
html .hero, html[data-theme=dark] .hero {
  background: radial-gradient(ellipse at 75% 45%, var(--ambient), transparent 58%),
              radial-gradient(ellipse at 96% 92%, var(--warm), transparent 38%);
  border-bottom-color: var(--rim);
}
.hero-grid { padding-block: clamp(50px, 6vw, 96px); }
.showcase {
  border-radius: 36px;
  border: 1px solid var(--rim);
  overflow: hidden;
  background: radial-gradient(ellipse at 90% 100%, var(--field-warm), transparent 59%),
              radial-gradient(ellipse at 30% 10%, var(--field-cool), transparent 67%), var(--field);
  box-shadow: inset 0 1px 0 var(--shine), 0 20px 58px var(--shade);
}
.showcase::before, .showcase::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.36);
  border-radius: 50%;
  background: linear-gradient(152deg, rgba(255,255,255,.23), transparent 46%);
  box-shadow: inset 0 2px 8px rgba(255,255,255,.18);
}
.showcase::before { inset: -53% -22% 20% 22%; transform: rotate(-36deg); }
.showcase::after { inset: 51% 15% -67% -30%; transform: rotate(-29deg); }
.cross { display: none; }
.board-label { top: 5%; left: 6%; color: var(--ink); font-weight: 650; letter-spacing: .1em; }
.sheet {
  transform: rotate(-3deg);
  border-radius: 22px;
  background: #f8fafc;
  border: 1px solid rgba(255,255,255,.84);
  box-shadow: inset 0 1px 0 white, 0 18px 32px rgba(12,28,46,.22);
}
.garden { border-radius: 12px; }
.sheet-head .status { font-family: inherit; }
html .budget, html[data-theme=dark] .budget {
  border-radius: 20px;
  transform: rotate(1deg);
  background: #15314d;
  border: 1px solid rgba(227,241,255,.47);
  box-shadow: inset 0 1px 0 #ffffff31, 0 8px 22px #0b172a30;
}
#fonctionnement, #tarifs {
  background: radial-gradient(ellipse at 18% 75%, var(--ambient), transparent 53%),
              radial-gradient(ellipse at 86% 80%, var(--warm), transparent 42%);
}
.steps article, .plans article, .questions {
  border-radius: var(--card-radius);
  background: var(--glass-solid);
  border: 1px solid var(--rim);
  box-shadow: inset 0 1px 0 var(--shine), 0 9px 30px var(--shade);
}
.plans .pro { border-color: var(--orange); box-shadow: inset 0 1px 0 var(--shine), 0 12px 32px var(--shade); }
.steps article > svg {
  box-sizing: content-box;
  padding: 10px;
  width: 24px; height: 24px;
  border-radius: 15px;
  background: var(--warm);
}
.band { border-color: var(--rim); background: linear-gradient(125deg, var(--ambient), transparent 58%), var(--band); }
.screens { border-radius: var(--card-radius); background: radial-gradient(ellipse at 15% 0%,var(--field-cool),transparent 70%), var(--field); box-shadow: inset 0 1px 0 var(--shine); }
.tabs {
  width: fit-content;
  max-width: 100%;
  background: var(--glass-solid);
  padding: 4px;
  border: 1px solid var(--rim);
  border-radius: 22px;
  gap: 2px;
}
.tabs button { border: 0; font-weight: 560; }
.tabs button[aria-pressed=true] { box-shadow: 0 1px 5px var(--shade); }
.questions { padding-inline: clamp(16px, 2.2vw, 30px); align-self: start; }
.questions details { border-color: var(--rim); }
.questions details:first-child { border-top: 0; }
.questions details:last-child { border-bottom: 0; }
@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  header, .steps article, .plans article, .questions, .btn.secondary, .theme, .nav-cta, .tabs, .sheet, .budget {
    -webkit-backdrop-filter: saturate(130%) blur(16px);
    backdrop-filter: saturate(130%) blur(16px);
  }
  header { background: var(--nav-tint); }
  .steps article, .plans article, .questions, .btn.secondary, .theme, .nav-cta, .tabs {
    background: linear-gradient(140deg, var(--shine), transparent 64%), var(--glass);
  }
  .sheet { background: rgba(250,252,255,.89); }
  html .budget, html[data-theme=dark] .budget { background: rgba(18,43,70,.87); }
}
@media (max-width:760px) {
  .hero-grid { padding-block: 38px; }
  .nav { height: 60px; }
  .showcase { border-radius: 26px; }
  .sheet { border-radius: 16px; }
  .steps article > svg { margin-right: 12px; }
}
@media (prefers-reduced-transparency:reduce) {
  :is(header, .steps article, .plans article, .questions, .btn.secondary, .theme, .nav-cta, .tabs, .sheet, .budget) {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  header { background: var(--bg); }
  .steps article, .plans article, .questions, .btn.secondary, .theme, .nav-cta, .tabs { background: var(--glass-solid); }
  .sheet { background: #f8fafc; }
  html .budget, html[data-theme=dark] .budget { background: #15314d; }
}

/* Product story and first-version customer feedback */
.feature-row, .feedback-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 6vw, 90px);
}
.feature-copy p:not(.kicker), .feature-copy ul {
  color: var(--muted);
  line-height: 1.65;
  margin-top: 20px;
}
.feature-copy ul { padding-top: 16px; }
.feature-frame, .feedback-intro img {
  margin: 0;
  border-radius: var(--card-radius);
  border: 1px solid var(--rim);
  overflow: hidden;
  box-shadow: inset 0 1px 0 var(--shine), 0 14px 38px var(--shade);
}
.feature-frame img { display: block; }
.analysis-art {
  align-self: stretch;
  min-height: 430px;
  max-height: 520px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 38px;
  background: radial-gradient(ellipse at 65% 100%, var(--field-warm), transparent 67%),
              radial-gradient(ellipse at 18% 0%, var(--field-cool), transparent 73%), var(--field);
}
.analysis-art img {
  width: min(63%, 283px);
  height: auto;
  border: 6px solid #17212b;
  border-radius: 33px 33px 16px 16px;
  box-shadow: 0 16px 35px #06132655;
}
.project-row { grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); }
.project-art, .reviews article, .project-facts > div {
  background: linear-gradient(135deg, var(--shine), transparent 60%), var(--glass-solid);
}
.project-photo { position: relative; }
.project-photo img { width: 100%; height: auto; }
.project-photo span {
  position: absolute; top: 14px; left: 14px;
  border-radius: 99px; padding: 4px 12px;
  background: #0a1c33e8; color: white; font-size: 12px; font-weight: 650;
}
.project-photo span:last-child { left: calc(50% + 14px); }
.project-art figcaption { padding: 14px 18px; color: var(--muted); font-size: 13px; }
.project-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }
.project-facts > div { border: 1px solid var(--rim); border-radius: 18px; padding: 12px 16px; }
.project-facts dt, .reviews footer span { font-size: 13px; color: var(--muted); }
.project-facts dd { margin: 2px 0 0; font-size: 20px; font-weight: 650; }
.feedback-layout { align-items: center; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
.feedback-intro img { display: block; width: min(100%, 250px); height: auto; margin-top: 24px; }
.reviews { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.reviews article { padding: clamp(18px, 2.4vw, 34px); border: 1px solid var(--rim); border-radius: var(--card-radius); box-shadow: 0 8px 26px var(--shade); }
.reviews article:first-child { grid-column: 1 / -1; }
.reviews blockquote { margin: 0; font-size: clamp(18px, 1.6vw, 23px); letter-spacing: -.023em; line-height: 1.4; }
.reviews blockquote::first-letter { color: var(--orange); }
.reviews footer { display: grid; gap: 1px; justify-content: start; min-height: 0; padding: 12px 0 0; margin-top: 17px; border-color: var(--rim); }
@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .project-art, .reviews article, .project-facts > div {
    background: linear-gradient(135deg, var(--shine), transparent 60%), var(--glass);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
}
@media(max-width:760px) {
  .feature-row, .feedback-layout { grid-template-columns: minmax(0, 1fr); }
  .feature-copy { grid-row: 1; }
  .analysis-art { min-height: 0; height: 340px; }
  .feedback-intro img { width: 170px; }
}
@media(max-width:500px) {
  .reviews { grid-template-columns: 1fr; }
  .analysis-art { height: 300px; padding-top: 22px; }
}
@media(prefers-reduced-transparency:reduce) {
  .reviews article, .project-art, .project-facts > div { background: var(--glass-solid); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* The product and its audience stay in view while the previews move. */
.launch { overflow: clip; }
.launch-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: clamp(22px, 4vw, 62px);
  align-items: center;
  padding-block: clamp(38px, 5.4vw, 82px);
}
.launch h1 { font-size: clamp(50px, 5.1vw, 80px); text-wrap: balance; }
.launch-audience { font-size: clamp(18px, 1.6vw, 24px); font-weight: 620; line-height: 1.3; letter-spacing: -.025em; margin-top: 20px; }
.launch .intro { margin-top: 14px; }
.device-gallery { min-width: 0; text-align: center; }
.device-stage {
  position: relative; isolation: isolate; overflow: hidden; border-radius: 36px;
  height: clamp(330px, 34vw, 490px); border: 1px solid var(--rim);
  background: radial-gradient(ellipse at 83% 90%, var(--field-warm), transparent 60%), radial-gradient(ellipse at 15% 10%, var(--field-cool), transparent 70%), var(--field);
  box-shadow: inset 0 1px 0 var(--shine), 0 16px 38px var(--shade);
}
.device-orbit {
  position: absolute; inset: 14% -27% -65% -17%; border-radius: 50%;
  transform: rotate(-25deg); border: 1px solid rgba(255,255,255,.46);
  box-shadow: inset 0 8px 34px #ffffff26, 0 0 50px #ffffff20;
  background: linear-gradient(145deg, #ffffff32, transparent 53%);
}
.device-front, .device-back {
  position: absolute; width: auto; height: 92%; top: 6%;
  filter: drop-shadow(0 10px 12px rgba(3,21,42,.23));
}
.device-back { left: 12%; height: 82%; top: 16%; transform: rotate(-11deg); }
.device-front { right: 16%; transform: rotate(6deg); aspect-ratio: 440 / 903; }
.device-front img { width: 100%; height: 100%; display: block; }
.screen-picker {
  display: inline-flex; align-items: center; gap: 2px; margin-top: 13px;
  border: 1px solid var(--rim); padding: 3px; border-radius: 100px; background: var(--glass-solid);
}
.screen-picker button {
  border: 0; border-radius: 100px; background: transparent; color: var(--muted);
  padding: 10px 15px; font-size: 13px; font-weight: 600;
}
.screen-picker button[aria-pressed=true] { background: var(--ink); color: var(--bg); }
.decision .hero-copy h2 { font-size: clamp(40px, 4vw, 65px); }
.decision .sheet-body h3 { font-size: clamp(22px, 2.1vw, 34px); letter-spacing: -.045em; line-height: 1.2; margin: 4px 0 9px; }
.analysis-art img { border: 0; border-radius: 0; box-shadow: none; filter: drop-shadow(0 14px 20px #0613264a); }
@media (prefers-reduced-motion: no-preference) {
  .device-back, .device-front { translate: 0 var(--drift, 0px); }
  .device-stage.arriving .device-back { animation: phone-back-in 1.05s cubic-bezier(.2,.75,.2,1) both; }
  .device-stage.arriving .device-front { animation: phone-front-in .95s cubic-bezier(.2,.75,.2,1) both; }
  .device-stage.arriving .device-orbit { animation: orbit-light 4s ease-out both; }
  .project-photo.arriving img { animation: project-zoom 1.6s ease-out both; }
  .btn svg { transition: transform .23s ease-out; }
  .btn:is(:hover,:focus-visible) svg { transform: translateX(4px); }
  @keyframes phone-back-in { from { transform: translate(14%,16%) rotate(-2deg); } to { transform: rotate(-11deg); } }
  @keyframes phone-front-in { from { transform: translate(-9%,15%) rotate(-3deg); } to { transform: rotate(6deg); } }
  @keyframes orbit-light { from { transform: translateY(10%) rotate(-39deg); opacity: .3; } to { transform: rotate(-25deg); opacity: 1; } }
  @keyframes project-zoom { from { transform: scale(1.06); } to { transform: scale(1); } }
  .project-photo { overflow: hidden; }
}
@media(max-width:760px) {
  .launch-grid { grid-template-columns: 1fr; gap: 23px; padding-block: 30px 34px; }
  .launch h1 { font-size: clamp(40px, 8.8vw, 60px); }
  .launch-audience { margin-top: 12px; }
  .launch .intro { margin-top: 10px; }
  .launch .hero-actions { flex-direction: row; align-items: center; gap: 10px 16px; margin-top: 17px; }
  .device-gallery { width: min(100%, 520px); justify-self: center; }
  .device-stage { height: clamp(260px, 75vw, 380px); border-radius: 26px; }
}

.device-stage .hero-photo {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}
.device-gallery[data-active="accueil"] .hero-photo { display: block; }
.device-gallery[data-active="accueil"] .device-stage > :not(.hero-photo) { display: none; }