/* ============================================================
   bentops · site marketing · styles v1
   Serif (titres) + IBM Plex (corps/labels/mono) · palette Grey Friends
   ============================================================ */

:root {
  /* Clair (crème / menthe) */
  --paper: #F5F8F3;
  --surface: #FCFDFB;
  --surface-2: #E9F0EB;
  --menthe: #D6EADF;
  --ink-strong: #2C3A32;
  --ink: #394B41;
  --ink-muted: #5E6F65;
  --ink-subtle: #86958B;
  --hairline: #DCE5DD;
  --hairline-strong: #C7D3C8;
  /* Sombre (encre) */
  --nuit: #191F1B;
  --nuit-2: #222A25;
  --nuit-3: #2B342E;
  --cream: #EAF1EB;
  --cream-2: #D3DCD5;
  --cream-muted: #A6B4AC;
  --cream-subtle: #7B8A81;
  --hairline-dark: #33403A;
  /* Accent */
  --sauge: #8AB59E;
  --sauge-dark: #6E9E85;
  --sauge-text: #3E5C4A;
  --sauge-light: #B9D6C6;
  /* Signal flow */
  --flow: #B5563C;
  --flow-warm: #C8703F;
  --flow-cool: #5E7E93;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --wrap: 1200px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(4.5rem, 11vw, 9rem); position: relative; }

/* --- Typographie --- */
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.06; letter-spacing: -0.01em; margin: 0; }
.display { font-size: clamp(2.6rem, 7vw, 5.4rem); }
.h2 { font-size: clamp(2rem, 4.6vw, 3.5rem); }
.h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--ink-muted); max-width: 46ch; }
.eyebrow {
  font-family: var(--sans); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--sauge-text); margin: 0 0 1.1rem;
}
.section--dark .eyebrow { color: var(--sauge-light); }

/* --- Boutons / liens --- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--sans); font-size: 0.95rem; font-weight: 500;
  padding: 0.85rem 1.5rem; border-radius: 999px; border: 1px solid transparent;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
  cursor: pointer;
}
.btn--primary { background: var(--ink-strong); color: var(--paper); }
.btn--primary:hover { background: #1f2a23; transform: translateY(-1px); }
.section--dark .btn--primary { background: var(--sauge); color: var(--nuit); }
.section--dark .btn--primary:hover { background: var(--sauge-light); }
.btn--ghost { background: transparent; border-color: var(--hairline-strong); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); }

/* --- Sections sombres --- */
.section--dark { background: var(--nuit); color: var(--cream-2); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--cream); }
.section--dark .lead { color: var(--cream-muted); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; inset: 0 0 auto 0; top: var(--soon-h, 0px); z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem var(--gutter);
  transition: transform .45s ease, background .35s ease, border-color .35s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled { background: rgba(245,248,243,0.82); backdrop-filter: blur(12px); border-color: var(--hairline); }
.nav.is-hidden { transform: translateY(-100%); }
.nav__brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; font-size: 1.1rem; color: var(--ink-strong); }
.nav__brand svg { width: 28px; height: 28px; }
.nav__links { display: flex; align-items: center; gap: 2rem; }
.nav__links a:not(.btn) { font-size: 0.9rem; color: var(--ink-muted); }
.nav__links a:not(.btn):hover { color: var(--ink-strong); }
.nav__cta { padding: 0.6rem 1.15rem; font-size: 0.85rem; }
@media (max-width: 820px) { .nav__links a:not(.nav__cta) { display: none; } }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: 0; will-change: transform; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(245,248,243,0.97) 0%, rgba(245,248,243,0.86) 40%, rgba(245,248,243,0.3) 68%, rgba(245,248,243,0) 100%),
    linear-gradient(to top, rgba(245,248,243,0.55) 0%, rgba(245,248,243,0) 30%);
}
.hero__inner { position: relative; z-index: 2; max-width: 40rem; }
.hero__title { margin-bottom: 1.5rem; }
.hero__actions { display: flex; gap: 0.9rem; margin-top: 2.2rem; flex-wrap: wrap; }
.hero__reassure { margin-top: 1.4rem; font-family: var(--sans); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.05em; color: var(--ink-strong); text-transform: uppercase; }

/* Révélation ligne par ligne */
.line-mask { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }

/* ============================================================
   Blocs génériques
   ============================================================ */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.75rem); }
@media (max-width: 820px) { .grid-3 { grid-template-columns: 1fr; } }

.pillar .ic, .grief .ic { font-size: 2rem; color: var(--sauge-text); line-height: 1; }
.section--dark .pillar .ic, .section--dark .grief .ic { color: var(--sauge-light); }
.pillar h3, .grief h3 { margin: 1rem 0 0.5rem; font-size: 1.35rem; }
.pillar p, .grief p { margin: 0; color: var(--ink-muted); font-size: 1rem; }
.section--dark .pillar p, .section--dark .grief p { color: var(--cream-muted); }

.center { text-align: center; margin-inline: auto; }
.section__head { max-width: 44rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section__head.center { margin-inline: auto; }

/* --- 168 h : grille de vie --- */
.vie-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 3.5rem; align-items: start; }
.vie-card { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 13/25; }
.vie-card:nth-child(even) { margin-top: 2.4rem; }
.vie-card img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.vie-card figcaption {
  position: absolute; inset: auto 0 0 0; padding: 1rem;
  background: linear-gradient(to top, rgba(25,31,27,0.8), rgba(25,31,27,0));
  color: var(--cream); font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
}
@media (max-width: 820px) { .vie-grid { grid-template-columns: repeat(2, 1fr); } }

/* --- Rangée de fonctions (icônes Phosphor) --- */
.features-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 2.5rem; border-top: 1px solid var(--hairline); }
.feature-cell {
  padding: 1.8rem 1.5rem; border-bottom: 1px solid var(--hairline); border-right: 1px solid var(--hairline);
}
.feature-cell .ic { font-size: 1.8rem; color: var(--sauge-text); }
.feature-cell h3 { font-size: 1.15rem; margin: 0.7rem 0 0.35rem; }
.feature-cell p { margin: 0; font-size: 0.92rem; color: var(--ink-muted); }
@media (min-width: 821px) {
  .feature-cell:nth-child(3n) { border-right: none; }
}
@media (max-width: 820px) { .features-row { grid-template-columns: 1fr; } .feature-cell { border-right: none; } }

/* --- Bloc capture d'écran (présentation fonction) --- */
.showcase { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.showcase__frame {
  border-radius: 14px; overflow: hidden; border: 1px solid var(--hairline);
  box-shadow: 0 30px 60px -30px rgba(44,58,50,0.35); background: var(--surface);
}
.section--dark .showcase__frame { border-color: var(--hairline-dark); box-shadow: 0 30px 70px -30px rgba(0,0,0,0.6); }
@media (max-width: 820px) { .showcase { grid-template-columns: 1fr; } }

/* --- Prix --- */
.price-card {
  max-width: 30rem; margin-inline: auto; text-align: center;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 20px;
  padding: clamp(2rem, 4vw, 3rem);
}
.price-card .amount { font-family: var(--serif); font-size: clamp(3rem, 7vw, 4.5rem); color: var(--ink-strong); line-height: 1; margin: 0.5rem 0; }
.price-card .once { font-family: var(--sans); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sauge-text); }
.price-card ul { list-style: none; padding: 0; margin: 1.5rem 0; text-align: left; display: grid; gap: 0.6rem; }
.price-card li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.95rem; color: var(--ink-muted); }
.price-card li .ic { color: var(--sauge-text); font-size: 1.1rem; margin-top: 0.1rem; }
.price-note { margin-top: 1.2rem; font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--ink-subtle); text-transform: uppercase; }

/* --- Bande CTA --- */
.band { position: relative; overflow: hidden; }
.band__media { position: absolute; inset: 0; z-index: 0; }
.band__media img { width: 100%; height: 100%; object-fit: cover; }
.band__media::after { content: ""; position: absolute; inset: 0; background: rgba(25,31,27,0.62); }
.band__inner { position: relative; z-index: 2; text-align: center; color: var(--cream); }
.band__inner h2 { color: var(--cream); }

/* --- Galerie de vues rapprochées (vrais écrans) --- */
.shots { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.25rem, 3vw, 2.25rem); margin-top: 3rem; }
.shot { border-radius: 16px; overflow: hidden; border: 1px solid var(--hairline); background: var(--surface); box-shadow: 0 24px 50px -32px rgba(44,58,50,0.4); padding: 14px; }
.shot img { width: 100%; display: block; border-radius: 9px; border: 1px solid var(--hairline); }
.shot figcaption { padding: 1rem 0.4rem 0.3rem; font-size: 0.92rem; color: var(--ink-muted); }
.shot figcaption b { color: var(--ink-strong); font-weight: 500; font-family: var(--serif); font-size: 1.05rem; display: block; margin-bottom: 0.15rem; }
.shot--wide { grid-column: 1 / -1; }
@media (max-width: 820px) { .shots { grid-template-columns: 1fr; } }

/* --- Liste de points (pointeur) --- */
.pts { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1.1rem; }
.pts li { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: start; }
.pts .ic { font-size: 1.5rem; color: var(--sauge-text); line-height: 1; margin-top: 0.15rem; }
.section--dark .pts .ic { color: var(--sauge-light); }
.pts b { font-family: var(--serif); font-weight: 500; font-size: 1.1rem; color: var(--ink-strong); display: block; }
.section--dark .pts b { color: var(--cream); }
.pts p { margin: 0.15rem 0 0; font-size: 0.95rem; color: var(--ink-muted); }
.section--dark .pts p { color: var(--cream-muted); }

/* --- C · Trio de différentiateurs (bandeau haut) --- */
.trio-sec { padding-block: clamp(2.25rem, 4vw, 3.5rem); border-bottom: 1px solid var(--hairline); }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
.trio__item { display: grid; grid-template-columns: auto 1fr; gap: 0.85rem; align-items: start; }
.trio__item .ic { font-size: 1.6rem; color: var(--sauge-text); line-height: 1; margin-top: 0.1rem; }
.trio__item b { font-family: var(--serif); font-weight: 500; font-size: 1.12rem; color: var(--ink-strong); display: block; }
.trio__item p { margin: 0.2rem 0 0; font-size: 0.92rem; color: var(--ink-muted); }
@media (max-width: 820px) { .trio { grid-template-columns: 1fr; } }

/* --- Anneau SVG partagé (Time Timer du budget) --- */
.ring-track { fill: none; stroke: var(--hairline-dark); stroke-width: 12; }
.ring-prog { fill: none; stroke: var(--sauge); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 628; stroke-dashoffset: 240; transform: rotate(-90deg); transform-origin: 120px 120px; }

/* --- Budget de temps (compte à rebours piloté au scroll) --- */
.budget__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.budget__viz { display: grid; gap: 1.25rem; }
.budget__num { font-family: var(--serif); font-size: clamp(3rem, 7vw, 4.75rem); color: var(--ink-strong); line-height: 1; display: flex; align-items: baseline; gap: 0.6rem; }
.budget__num small { font-family: var(--sans); font-weight: 600; font-size: 0.85rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.budget__scale { display: flex; justify-content: space-between; font-family: var(--sans); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-subtle); }
.budget-ring { width: min(72%, 230px); height: auto; display: block; margin: 0 auto; }

/* === DÉTECTION : scène Mac fidèle (barre de menus + fenêtre bentops) === */
.detect__stack { display: grid; gap: clamp(1.1rem, 2.5vw, 1.6rem); }
.detect__card { margin: 0; }
.detect__screen { border-radius: 14px; overflow: hidden; border: 1px solid rgba(0,0,0,0.4); box-shadow: 0 26px 54px -30px rgba(0,0,0,0.7); }
.detect__wall { height: clamp(72px, 12vw, 96px); background: radial-gradient(130% 160% at 82% -30%, #7f9c8b 0%, #4c6455 55%, #2c3a32 100%); }

/* barre de menus macOS (repère qui ALTERNE : play "non pointé" <-> logo) */
.macbar { display: flex; align-items: center; gap: 0.8rem; padding: 0.36rem 0.8rem; background: rgba(18,24,20,0.72); backdrop-filter: blur(10px); font-family: var(--sans); font-size: 0.72rem; color: rgba(255,255,255,0.9); white-space: nowrap; }
.scr__menus { font-weight: 500; color: rgba(255,255,255,0.82); }
.scr__gap { flex: 1; }
.scr__tray { display: flex; align-items: center; gap: 0.72rem; }
.scr__tray i { font-size: 0.95rem; line-height: 1; }
.scr__clock { font-weight: 600; }
.scr__flow { position: relative; display: inline-grid; place-items: center; min-width: 72px; height: 15px; }
.scr__play, .scr__logo { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.scr__play { color: #F09267; font-weight: 700; animation: flowBlinkA 2.2s steps(1, end) infinite; }
.scr__play i { font-size: 0.72rem; }
.scr__logo { width: 15px; height: 15px; color: #fff; animation: flowBlinkB 2.2s steps(1, end) infinite; }
.scr__logo svg { width: 100%; height: 100%; }
@keyframes flowBlinkA { 0%, 48% { opacity: 1; } 48.01%, 100% { opacity: 0; } }
@keyframes flowBlinkB { 0%, 48% { opacity: 0; } 48.01%, 100% { opacity: 1; } }

/* bureau + fenêtre bentops (extrait fidèle avec le cadran) */
.detect__desk { padding: clamp(0.5rem, 2vw, 1rem); display: grid; place-items: center; }
.appwin { width: min(100%, 300px); background: var(--surface); border-radius: 16px; border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 20px 44px -20px rgba(0,0,0,0.45); padding: 1.6rem 1.4rem 1.4rem; display: grid; justify-items: center; gap: 0.9rem; }
.appwin__flow { position: relative; width: 116px; height: 116px; display: grid; place-items: center; animation: cadranBounce 2.4s ease-in-out infinite; }
@keyframes cadranBounce { 0%, 50%, 100% { transform: translateY(0); } 15% { transform: translateY(-14px); } 28% { transform: translateY(0); } 36% { transform: translateY(-5px); } 44% { transform: translateY(0); } }
.flowring { width: 100%; height: 100%; }
.flowring__track { fill: none; stroke: var(--hairline); stroke-width: 8; }
.flowring__prog { fill: none; stroke: var(--flow); stroke-width: 8; }
.appwin__warn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2.5rem; line-height: 1; color: #E0A63B; }
.appwin__state { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--sans); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--flow-warm); }
.appwin__state i { font-size: 0.85rem; color: var(--ink-subtle); }
.appwin__nudge { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.42rem 0.5rem 0.42rem 0.85rem; border: 1px solid var(--flow-warm); border-radius: 999px; background: rgba(200,112,63,0.06); font-family: var(--sans); font-size: 0.85rem; color: var(--ink); }
.appwin__nudge > i { color: var(--flow-warm); font-size: 1rem; }
.appwin__btn { border: none; background: var(--flow); color: #fff; font-family: var(--sans); font-weight: 600; font-size: 0.82rem; padding: 0.35rem 0.9rem; border-radius: 999px; cursor: pointer; }
.detect__cap { margin-top: 0.9rem; font-family: var(--sans); font-size: 0.75rem; color: var(--cream-muted); text-align: center; }
@media (prefers-reduced-motion: reduce) { .scr__play, .scr__logo, .appwin__flow { animation: none; } .scr__logo { opacity: 1; } .scr__play { opacity: 0; } }

/* Mockup vue Temps : des pointages qui attendent d'être rangés */
/* Panneau « Pointages de la semaine » (fidèle à l'app) */
.tl { position: relative; padding: clamp(1.4rem, 3.2vw, 2rem); }
.tl__corner { position: absolute; width: 15px; height: 15px; border: 2px solid var(--hairline-strong); }
.tl__corner--tl { top: 11px; left: 11px; border-right: 0; border-bottom: 0; border-top-left-radius: 3px; }
.tl__corner--br { bottom: 11px; right: 11px; border-left: 0; border-top: 0; border-bottom-right-radius: 3px; }
.tl__kicker { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 1rem; }
.tl__day { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--sans); font-weight: 600; font-size: 0.86rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-strong); padding-bottom: 0.7rem; margin-bottom: 0.5rem; border-bottom: 1px solid var(--hairline); }
.tl__daytot { font-family: var(--mono); font-size: 0.86rem; color: var(--ink-muted); font-weight: 500; letter-spacing: 0; }
.tl__rows { display: grid; gap: 0.15rem; }
.tl__row { display: grid; grid-template-columns: auto auto 1fr auto auto; align-items: center; gap: 0.9rem; padding: 0.62rem 0.7rem; border-radius: 10px; transition: background 0.35s ease; }
.tl__dot { width: 11px; height: 11px; border-radius: 3px; }
.tl__time { font-family: var(--mono); font-size: 0.88rem; color: var(--ink-strong); }
.tl__name { justify-self: start; font-family: var(--sans); font-size: 0.9rem; color: var(--ink); }
.tl__name--muted { color: var(--ink-muted); }
.tl__dur { font-family: var(--mono); font-size: 0.84rem; color: var(--ink-muted); }
.tl__trash { font-size: 1rem; color: var(--ink-subtle); opacity: 0.28; transition: opacity 0.35s ease, color 0.35s ease; }
.tl__row.is-hover { background: rgba(138,181,158,0.16); }
.tl__row.is-hover .tl__trash { opacity: 1; color: var(--flow-warm); }

/* Programme ambassadeur (section subtile de l'accueil) */
.amb__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.amb__perks { list-style: none; padding: 0; margin: 1.4rem 0 1.8rem; display: grid; gap: 0.55rem; }
.amb__perks li { display: flex; align-items: center; gap: 0.6rem; font-family: var(--sans); color: var(--ink-muted); font-size: 0.98rem; }
.amb__perks .ic { color: var(--sauge-text); font-size: 1.2rem; }
.amb__media { position: relative; }
.amb__img { display: block; border-radius: 16px; box-shadow: 0 30px 60px -30px rgba(44,58,50,0.4); }
.amb__img--main { width: 100%; }
@media (max-width: 820px) {
  .amb__grid { grid-template-columns: 1fr; }
}

/* Devenir bêta-testeur (bannière d'accueil) */
.bjoin__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.bjoin__media { display: grid; gap: 1rem; }
.bjoin__img { width: 100%; display: block; border-radius: 14px; box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6); }
.bjoin__pts { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: 0.55rem; }
.bjoin__pts li { display: flex; align-items: center; gap: 0.6rem; font-family: var(--sans); color: var(--cream-muted); font-size: 0.95rem; }
.bjoin__pts .ic { font-size: 1.2rem; color: var(--sauge-light); }
.bjform { margin-top: 1.5rem; display: grid; gap: 0.85rem; }
.bjrow { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
.bjinput, .bjtext { width: 100%; font-family: var(--sans); font-size: 0.95rem; color: var(--cream); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); border-radius: 10px; padding: 0.72rem 0.9rem; }
.bjinput::placeholder, .bjtext::placeholder { color: rgba(234,241,235,0.45); }
.bjinput:focus, .bjtext:focus { outline: none; border-color: var(--sauge); background: rgba(255,255,255,0.09); }
.bjtext { resize: vertical; min-height: 3rem; }
.bjos { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.bjos__lbl { font-family: var(--sans); font-size: 0.9rem; color: var(--cream-muted); }
.bjradio { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--sans); font-size: 0.9rem; color: var(--cream); cursor: pointer; padding: 0.32rem 0.75rem; border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; }
.bjradio input { accent-color: var(--sauge); }
.bjsubmit { justify-self: start; margin-top: 0.3rem; }
.bjnote { font-family: var(--sans); font-size: 0.8rem; color: var(--cream-muted); margin: 0.2rem 0 0; max-width: 46ch; }
.bjmsg { font-family: var(--sans); font-size: 0.92rem; line-height: 1.5; border-radius: 10px; padding: 0.8rem 1rem; margin-bottom: 0.2rem; background: rgba(138,181,158,0.18); border: 1px solid var(--sauge); color: var(--cream); }
.bjmsg--erreur { background: rgba(200,112,63,0.16); border-color: var(--flow-warm); }
@media (max-width: 820px) {
  .bjoin__grid { grid-template-columns: 1fr; }
  .bjoin__img--b { display: none; }
  .bjrow { grid-template-columns: 1fr; }
}
@media (max-width: 820px) { .budget__grid { grid-template-columns: 1fr; } }

/* --- D · Ce que ce n'est pas --- */
.notgrid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); margin-top: 2.5rem; }
.notcol { border: 1px solid var(--hairline); border-radius: 16px; padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--surface); }
.notcol--yes { border-color: var(--sauge); background: color-mix(in srgb, var(--sauge) 8%, var(--surface)); }
.notcol__title { font-family: var(--sans); font-weight: 600; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 1.1rem; }
.notcol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.notcol li { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start; font-size: 1rem; color: var(--ink); }
.notcol li .ic { font-size: 1.2rem; margin-top: 0.05rem; }
.notcol .ph-x { color: var(--flow); }
.notcol--yes .ph-check { color: var(--sauge-text); }
@media (max-width: 820px) { .notgrid { grid-template-columns: 1fr; } }

/* --- Démo du bouton flow (SVG) --- */
.flowdemo { display: grid; place-items: center; gap: 2rem; padding: clamp(2.5rem, 5vw, 4rem); }
.flowbtn { width: min(60%, 240px); height: auto; filter: drop-shadow(0 12px 24px rgba(44,58,50,0.18)); }
.flowstates { display: grid; gap: 0.6rem; font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--ink-muted); }
.flowstates span { display: inline-flex; align-items: center; gap: 0.55rem; }
.flowstates .dot { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--nuit); color: var(--cream-muted); padding-block: 4rem 2.5rem; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
.footer h4 { font-family: var(--sans); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-subtle); margin: 0 0 1rem; }
.footer a { display: block; color: var(--cream-muted); font-size: 0.9rem; padding: 0.25rem 0; }
.footer a:hover { color: var(--cream); }
.footer__brand { display: flex; align-items: center; gap: 0.6rem; color: var(--cream); font-weight: 600; font-size: 1.15rem; margin-bottom: 0.75rem; }
.footer__brand svg { width: 28px; height: 28px; }
.footer__bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--hairline-dark); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--cream-subtle); }
@media (max-width: 820px) { .footer__grid { grid-template-columns: 1fr 1fr; } }

/* --- États d'animation (défaut : caché ; fallback JS rend visible) --- */
[data-animate] { opacity: 0; }
[data-arrive] { opacity: 0; }

/* Mode capture statique : hero à hauteur normale */
body.is-static .hero { min-height: auto; padding-block: 7rem 5rem; }
body.is-static .moment__stage { min-height: auto; }
body.is-static [data-animate], body.is-static [data-arrive] { opacity: 1 !important; }

/* ===================== Bandeau temporaire « bientôt disponible » ===================== */
.soon {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.6rem 3rem; text-align: center;
  background: var(--ink-strong); color: var(--cream);
  font-size: 0.85rem; line-height: 1.4;
}
.soon strong { color: #fff; font-weight: 600; }
.soon__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sauge-light); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sauge-light) 30%, transparent); flex-shrink: 0; }
.soon__close { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 28px; height: 28px; border: none; border-radius: 7px; background: transparent; color: var(--cream); font-size: 1.05rem; line-height: 1; cursor: pointer; opacity: 0.7; transition: opacity .2s ease, background .2s ease; }
.soon__close:hover { opacity: 1; background: rgba(255,255,255,0.12); }
body.soon-dismissed .soon { display: none; }
@media (max-width: 560px) { .soon { font-size: 0.78rem; padding: 0.5rem 2.6rem; } }

/* ===================== Offre de lancement (prix) ===================== */
.price-badge {
  display: inline-block; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: #fff; background: var(--flow);
  padding: 0.22rem 0.6rem; border-radius: 999px; margin-bottom: 0.4rem;
}
.amount-old { color: var(--ink-subtle); text-decoration: line-through; font-weight: 400; font-size: 0.62em; margin-right: 0.35rem; }
.price-econo { color: var(--sauge-text); font-size: 0.85rem; margin: 0.35rem 0 0; }
.hero__old { color: var(--ink-subtle); text-decoration: line-through; }

/* Bouton désactivé (pré-lancement) */
.btn.is-disabled { opacity: 0.65; cursor: not-allowed; pointer-events: none; }

/* Lien version discret dans le pied de page */
.footer__version { color: var(--cream-subtle); text-decoration: none; font-family: var(--mono); font-size: 0.8rem; }
.footer__version:hover { color: var(--cream); }